/* ────────────────────────────────────────────
   Reset & Base
──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --salmon:       #F4674A;
  --salmon-dark:  #E05538;
  --salmon-light: #FFF2EF;
  --yellow:       #F5C518;
  --white:        #FFFFFF;
  --gray-50:      #FAFAFA;
  --gray-100:     #F5F5F5;
  --gray-200:     #E8E8E8;
  --gray-400:     #AAAAAA;
  --gray-600:     #666666;
  --text:         #1A1A1A;
  --text-sub:     #555555;
  --radius-sm:    6px;
  --radius-md:    12px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:    0 2px 8px rgba(0,0,0,0.08), 0 4px 18px rgba(0,0,0,0.05);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--text);
  line-height: 1.75;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ────────────────────────────────────────────
   Utilities
──────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ────────────────────────────────────────────
   Buttons
──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  border: 2px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn--salmon {
  background: var(--salmon);
  color: #FFFFFF;
}
.btn--salmon:hover {
  background: var(--salmon-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(244,103,74,0.38);
}
.btn--white {
  background: #FFFFFF;
  color: var(--salmon);
}
.btn--white:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}

/* ────────────────────────────────────────────
   Section Title
──────────────────────────────────────────── */
.section-title {
  text-align: center;
  margin-bottom: 52px;
}
.section-title h2 {
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 700;
  color: var(--text);
  display: inline-block;
  position: relative;
  padding-bottom: 18px;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: var(--salmon);
  border-radius: 2px;
}

/* ────────────────────────────────────────────
   SR-Only (accessibility)
──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ────────────────────────────────────────────
   HERO
──────────────────────────────────────────── */
.hero {
  background: var(--white);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

/* イラスト背景 */
.hero__bg {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストオーバーレイ（ボックス背景なし・文字にだけ白フィルター・左寄せ） */
.hero__text {
  position: absolute;
  top: 6%;
  left: 0;                       /* 4% → 0 で全体左寄せ */
  max-width: 50%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

/* 各テキスト要素を「ぼやけた雲」効果で表示（コンパクトに詰める） */
.hero__text .eyebrow,
.hero__text .hero__h1,
.hero__text .hero__lead {
  display: block;
  width: fit-content;
  max-width: 100%;
  position: relative;
  background: transparent;
  padding: 10px 50px;            /* 縦padding を 24→10 に詰める */
  margin-bottom: -14px;          /* 雲同士をより重ねてコンパクトに */
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
}

/* 擬似要素で「真っ白なぼかし雲」を要素より大きく描画＋blurで縁を完全消去 */
.hero__text .eyebrow::before,
.hero__text .hero__h1::before,
.hero__text .hero__lead::before {
  content: "";
  position: absolute;
  inset: -20px -10px;            /* 上下を要素より外に拡張 */
  background: radial-gradient(
    ellipse 70% 60% at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(8px);             /* 縁を完全にぼかす */
  z-index: -1;
  pointer-events: none;
}

.hero__text .eyebrow {
  font-size: 15px;                /* サイズはキープ */
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: -10px;
}
.hero__text .hero__h1 {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.5;               /* 1.65 → 1.5 に詰める */
  margin-bottom: -10px;
}

/* マーカー風アンダーライン（サーモンピンク） */
.hero__h1 .hl {
  background: linear-gradient(transparent 65%, rgba(244, 103, 74, 0.32) 65%);
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__h1 .sub { display: inline; }

.hero__text .hero__lead {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 0;
}

/* CTAボタン（小さくコンパクトに・ボタン枠の左をテキスト文字位置と完全一致） */
.hero__text .btn {
  display: inline-flex;
  margin-top: 14px;
  margin-left: 50px;       /* テキスト文字位置と同じ50px（ボタン枠左 = 文字左） */
  padding: 9px 20px;
  font-size: 13px;
  gap: 6px;
}
.hero__text .btn svg { width: 13px; height: 13px; }
.hero__text .btn svg:last-child { width: 11px; height: 11px; }

/* Hero画像（中央配置・元に戻し） */

/* アニメーションオーバーレイSVG */
.hero__anim {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* 鳥アニメーション：画面を横切ってフェードイン→フェードアウト */
@keyframes birdFly {
  0%   { transform: translate(-60px, 0); opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(520px, -30px); opacity: 0; }
}
.anim-bird--1 { animation: birdFly 9s ease-in-out 0s infinite; }
.anim-bird--2 { animation: birdFly 11s ease-in-out 3s infinite; }
.anim-bird--3 { animation: birdFly 13s ease-in-out 6s infinite; }

/* クレーンアーム揺れ（pivot = クレーン根元 252,482） */
@keyframes craneSway {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(1.5deg); }
  70%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}
.anim-crane {
  animation: craneSway 5s ease-in-out infinite;
  transform-origin: 252px 482px;
}

/* 吊り荷の上下 */
@keyframes loadBob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(9px); }
  100% { transform: translateY(0); }
}
.anim-load { animation: loadBob 3s ease-in-out infinite; }

.hero__illust { display: none; }
.hero-img { display: none; }
.hero-svg { display: none; }
.hero-svg--hidden { display: none; }

/* ────────────────────────────────────────────
   PAIN POINTS
──────────────────────────────────────────── */
.pain {
  padding: 80px 0;
  background: #FFF8F5;
}
.pain__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.pain__card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 18px 24px;
  text-align: center;
  flex: 1 1 180px;
  max-width: 210px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}
.pain__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
}
.pain__icon svg { width: 100%; height: 100%; }
.pain__card p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.65;
}

/* ────────────────────────────────────────────
   STRENGTHS OVERVIEW
──────────────────────────────────────────── */
.strength-overview {
  padding: 80px 0;
  background: var(--white);
}
.strength-overview__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}
.strength-overview__left h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 24px;
}
.accent-red { color: var(--salmon); }
.strength-overview__left p {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.85;
  margin-bottom: 10px;
}

.strength-overview__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.strength-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.strength-card__icon { flex-shrink: 0; }
.strength-card__icon svg { width: 52px; height: 52px; display: block; }
.strength-card__text { }
.strength-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.strength-card p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.75;
}

/* ────────────────────────────────────────────
   SERVICES
──────────────────────────────────────────── */
.services {
  padding: 80px 0;
  background: var(--gray-100);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}
.service-card__icon {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0;
}
.service-card__icon svg { width: 30px; height: 30px; }
.service-card h3 {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 16px 16px 14px;
  color: var(--text);
}
.service-card ul {
  list-style: none;
  padding: 14px 24px 26px;
  border-top: 1px solid var(--gray-200);
}
.service-card ul li {
  font-size: 14px;
  color: var(--text-sub);
  padding: 6px 0 6px 16px;
  position: relative;
  line-height: 1.5;
}
.service-card ul li::before {
  content: '·';
  position: absolute;
  left: 3px;
  color: var(--salmon);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

/* ────────────────────────────────────────────
   CASE STUDIES
──────────────────────────────────────────── */
.cases {
  padding: 80px 0;
  background: var(--white);
}
.cases__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.case-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.case-card__img {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.case-card__img svg { width: 100%; height: 100%; }
.case-card__img--1 { background: #B8C4C8; }
.case-card__img--2 { background: #C0CCC0; }
.case-card__img--3 { background: #CCC4B8; }
.case-card__img--4 { background: #C0C8D0; }
.case-card__img--5 { background: #C8C4C0; }

.case-card__body { padding: 13px 13px 16px; }
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 9px;
}
.tag--building { background: #FFF2EF; color: var(--salmon); }
.tag--factory  { background: #F0F4FF; color: #4468C8; }

.case-card__rows { }
.case-row {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-sub);
}
.case-label {
  font-weight: 600;
  color: var(--salmon);
  flex-shrink: 0;
  min-width: 50px;
}

/* ────────────────────────────────────────────
   REASONS
──────────────────────────────────────────── */
.reasons {
  padding: 80px 0;
  background: var(--gray-100);
}
.reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.reason-item {
  text-align: center;
  padding: 36px 24px 32px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}
.reason-item__num {
  font-size: 38px;
  font-weight: 800;
  color: var(--salmon);
  opacity: 0.85;
  margin-bottom: 6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reason-item__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
}
.reason-item__icon svg { width: 100%; height: 100%; }
.reason-item h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 10px;
}
.reason-item p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.75;
}

/* ────────────────────────────────────────────
   PROCESS
──────────────────────────────────────────── */
.process {
  padding: 80px 0;
  background: var(--white);
}
.process__steps {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.process-step {
  text-align: center;
  padding: 28px 16px 24px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  flex: 1;
  max-width: 220px;
}
.process-step__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--salmon);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.process-step__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
}
.process-step__icon svg { width: 100%; height: 100%; }
.process-step h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.process-step p {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.65;
}
.process__arrow { flex-shrink: 0; display: flex; align-items: center; }

/* ────────────────────────────────────────────
   CTA BOTTOM
──────────────────────────────────────────── */
.cta-bottom {
  background: var(--salmon);
  padding: 76px 0;
  text-align: center;
  color: var(--white);
}
.cta-bottom h2 {
  font-size: clamp(19px, 2.5vw, 25px);
  font-weight: 700;
  margin-bottom: 10px;
}
.cta-bottom p {
  font-size: 15px;
  opacity: 0.9;
  margin-bottom: 32px;
}

/* ────────────────────────────────────────────
   FOOTER
──────────────────────────────────────────── */
.footer {
  background: #282828;
  color: #C0C0C0;
  padding: 56px 0 32px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer__company {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.footer__tagline {
  font-size: 13px;
  color: #888888;
}
.footer__row {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}
.footer__row dt { min-width: 80px; color: #888888; }
.footer__row dd a { color: #C0C0C0; text-decoration: none; }
.footer__row dd a:hover { color: var(--white); }
.footer__copy {
  text-align: center;
  font-size: 12px;
  color: #585858;
  border-top: 1px solid #383838;
  padding-top: 24px;
}

/* ────────────────────────────────────────────
   RESPONSIVE — Tablet (≤ 1024px)
──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cases__grid { grid-template-columns: repeat(3, 1fr); }
  .hero__inner  { gap: 16px; }
}

/* ────────────────────────────────────────────
   RESPONSIVE — Mobile (≤ 768px)
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding: 36px 0 24px;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    padding: 0 20px;
    min-height: auto;
    gap: 0;
  }
  .hero__illust { order: -1; margin-bottom: 24px; }
  .hero-svg     { max-width: 100%; }

  .pain__grid { gap: 12px; }
  .pain__card { flex: 1 1 calc(50% - 6px); max-width: none; }

  .strength-overview__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .services__grid { grid-template-columns: 1fr; gap: 16px; }

  .cases__grid    { grid-template-columns: repeat(2, 1fr); }

  .reasons__grid  { grid-template-columns: 1fr; }

  .process__steps {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
  .process-step  { max-width: 100%; }
  .process__arrow { transform: rotate(90deg); align-self: center; }

  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ────────────────────────────────────────────
   RESPONSIVE — Small mobile (≤ 480px)
──────────────────────────────────────────── */
@media (max-width: 480px) {
  .cases__grid { grid-template-columns: 1fr; }
  .pain__card  { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════
   悩みカード5枚を5色アクセントでカラフルに
════════════════════════════════════════════ */
.pain__grid .pain__card:nth-child(1) .pain__icon svg [stroke="#F4674A"] { stroke: #F4674A; } /* サーモン */
.pain__grid .pain__card:nth-child(1) .pain__icon svg [fill="#F4674A"]   { fill:   #F4674A; }

.pain__grid .pain__card:nth-child(2) .pain__icon svg [stroke="#F4674A"] { stroke: #F2A93B; } /* オレンジイエロー */
.pain__grid .pain__card:nth-child(2) .pain__icon svg [fill="#F4674A"]   { fill:   #F2A93B; }

.pain__grid .pain__card:nth-child(3) .pain__icon svg [stroke="#F4674A"] { stroke: #4DB69D; } /* ティール */
.pain__grid .pain__card:nth-child(3) .pain__icon svg [fill="#F4674A"]   { fill:   #4DB69D; }

.pain__grid .pain__card:nth-child(4) .pain__icon svg [stroke="#F4674A"] { stroke: #4A8FCB; } /* ブルー */
.pain__grid .pain__card:nth-child(4) .pain__icon svg [fill="#F4674A"]   { fill:   #4A8FCB; }

.pain__grid .pain__card:nth-child(5) .pain__icon svg [stroke="#F4674A"] { stroke: #9870B6; } /* パープル */
.pain__grid .pain__card:nth-child(5) .pain__icon svg [fill="#F4674A"]   { fill:   #9870B6; }


/* ════════════════════════════════════════════
   アイコンを LP画像と同じ「オレンジ円バッジ＋白アイコン」に
════════════════════════════════════════════ */
/* 円バッジ部分（薄ピンク → ソリッドオレンジ） */
.strength-card__icon svg circle[fill="#FFF2EF"],
.reason-item__icon svg circle[fill="#FFF2EF"],
.process-step__icon svg circle[fill="#FFF2EF"] {
  fill: var(--salmon);
}

/* アイコン本体の線（オレンジ → 白） */
.strength-card__icon svg [stroke="#F4674A"],
.reason-item__icon svg [stroke="#F4674A"],
.process-step__icon svg [stroke="#F4674A"] {
  stroke: #FFFFFF;
}

/* アイコン本体の塗り（オレンジ → 白）。円バッジ自体は除外 */
.strength-card__icon svg circle[stroke="#F4674A"],
.strength-card__icon svg path[fill="#F4674A"],
.strength-card__icon svg rect[fill="#F4674A"],
.reason-item__icon svg circle[stroke="#F4674A"],
.reason-item__icon svg rect[fill="#F4674A"],
.process-step__icon svg path[fill="#F4674A"] {
  fill: #FFFFFF;
}


/* 施工事例カード写真 */
.case-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.case-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* ════════════════════════════════════════════
   ChatGPT手描きアイコン（PNG）の共通設定
   object-fit: cover でラベル部分を隠してアイコン中心だけ表示
════════════════════════════════════════════ */
.icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* === 透過PNG正方形アイコン用 (1024x1024 from OpenAI API) === */
.pain__icon {
  width: 96px;
  height: 96px;
  overflow: visible;
  margin: 0 auto 10px;
}

.strength-card__icon {
  width: 72px;
  height: 72px;
  overflow: visible;
  flex-shrink: 0;
}

.reason-item__icon {
  width: 110px;
  height: 110px;
  overflow: visible;
  margin: 0 auto 8px;
}

.process-step__icon {
  width: 88px;
  height: 88px;
  overflow: visible;
  margin: 0 auto 10px;
}

/* 数字バッジ（横長の楕円バッジ） */
.reason-item__num {
  width: 96px;
  height: 70px;
  overflow: visible;
  margin: 0 auto 4px;
  font-size: 0;
  color: transparent;
}

.process-step__num {
  width: 76px;
  height: 56px;
  overflow: visible;
  margin: 0 auto 4px;
  font-size: 0;
  color: transparent;
}

/* 数字バッジ画像 */
.num-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.reason-item__num {
  width: 70px;
  height: 60px;
  overflow: hidden;
  margin: 0 auto 8px;
  /* CSSでの「01」テキスト表示を消すための上書き */
  font-size: 0;
  color: transparent;
}

.process-step__num {
  width: 60px;
  height: 50px;
  overflow: hidden;
  margin: 0 auto 6px;
  font-size: 0;
  color: transparent;
}


/* ════════════════════════════════════════════
   コーポレート用追加：NAV (sticky・透明・blur)
   既存セクションに影響しない独立クラス（cnav__）
════════════════════════════════════════════ */
.cnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(232, 232, 232, 0.6);
}

.cnav__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  height: 60px;
}

.cnav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.cnav__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--salmon);
  position: relative;
  flex-shrink: 0;
}
.cnav__brand-mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

.cnav__brand-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.cnav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.cnav__menu a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease;
}
.cnav__menu a:hover { color: var(--salmon); }

.cnav__menu-cta {
  background: var(--salmon);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
}
.cnav__menu-cta:hover {
  background: var(--salmon-dark);
  color: #fff !important;
}

.cnav__toggle {
  display: none;
  background: none;
  border: none;
  width: 26px;
  height: 20px;
  cursor: pointer;
  padding: 0;
}
.cnav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  margin-bottom: 5px;
}
.cnav__toggle span:last-child { margin-bottom: 0; }


/* ════════════════════════════════════════════
   コーポレート用追加：会社情報セクション
════════════════════════════════════════════ */
.company-info {
  padding: 80px 0;
  background: #FFF8F5;
}

.company-info__table {
  max-width: 800px;
  margin: 0 auto;
}

.company-info__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-200);
}
.company-info__row:first-child {
  border-top: 1px solid var(--gray-200);
}
.company-info__row dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}
.company-info__row dd {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-sub);
}
.company-info__row dd a {
  color: var(--salmon);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.company-info__row dd a:hover {
  border-bottom-color: var(--salmon);
}


/* ════════════════════════════════════════════
   レスポンシブ（追加分）
════════════════════════════════════════════ */
@media (max-width: 720px) {
  .cnav__menu { display: none; }
  .cnav__toggle { display: block; }
  .cnav__inner { padding: 10px 18px; height: 54px; }
  .cnav__brand-text { font-size: 14px; }

  .company-info { padding: 60px 0; }
  .company-info__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }

  /* スマホはHero画像下にテキストをスタック表示 */
  .hero { padding-bottom: 32px; }
  .hero__inner { position: static; }
  .hero__bg { width: 100%; height: auto; display: block; }
  .hero__text {
    position: static;
    transform: none;
    max-width: 100%;
    width: auto;
    margin: 18px 16px 0;
    padding: 18px 18px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero__text .eyebrow {
    font-size: 12px;
    background: none;
    padding: 0;
    margin-bottom: 8px;
  }
  .hero__text .hero__h1 {
    font-size: 20px;
    background: none;
    padding: 0;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .hero__text .hero__lead {
    font-size: 13px;
    background: none;
    padding: 0;
    margin-bottom: 16px;
  }
  .hero__text .btn {
    margin: 0;
    padding: 12px 22px;
    font-size: 13px;
  }
}