/* =========================================================
   Luff Corporate Site / Design C ― 下層ページ共通
   style.css のトークン・コンポーネントを前提に、
   下層でしか使わないパーツだけをここに置く。
   ========================================================= */

/* ---------- 1. 下層のヘッダー（トップと違い、常に白地） ---------- */
body.sub .hd{
  background:var(--white);
  box-shadow:0 1px 16px rgba(18,34,74,.10);
  border-bottom-color:var(--line);
}
body.sub .gnav a{ color:var(--navy); }
body.sub .gnav a:hover,
body.sub .gnav a[aria-current="page"]{ color:var(--gold); }
body.sub .gnav a[aria-current="page"]{ position:relative; }
body.sub .gnav a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:-14px; translate:-50% 0;
  width:6px; height:6px; background:var(--gold); rotate:45deg;
}
body.sub .hd__logo--on-dark img{ filter:none; }
body.sub .hd__cta{ border-color:var(--navy); }
body.sub .burger i{ background:var(--navy); }
body.sub .burger.is-open i{ background:var(--white); }

/* ---------- 2. ページヘッド（パンくず＋見出し） ---------- */
.phd{
  position:relative;
  padding-top:calc(88px + 76px);
  padding-bottom:0;
  background:var(--base);
}
.phd::after{
  content:""; position:absolute; left:var(--rail); top:0; bottom:0;
  width:1px; background:var(--line); pointer-events:none;
}
.phd__in{ padding-bottom:84px; }

.crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 10px;
  font-size:13px; letter-spacing:.08em; line-height:1.9; color:var(--text-sub);
}
.crumb a{ transition:color var(--dur-hover) var(--ease-hover); }
.crumb a:hover{ color:var(--gold); }
.crumb i{ font-style:normal; opacity:.45; }
.crumb [aria-current]{ color:var(--text); }

.phd__en{
  display:block; margin-top:46px;
  font-size:74px; font-weight:700; line-height:.98; letter-spacing:.01em;
  color:var(--navy);
}
.phd__ja{
  display:block; margin-top:16px;
  font-size:15px; font-weight:500; letter-spacing:.1em; line-height:1; color:var(--text-sub);
}
.phd__t{
  margin-top:40px; max-width:22em;
  font-size:44px; font-weight:700; line-height:1.55; letter-spacing:.02em;
}
.phd__t .br{ display:block; }
.phd__d{ margin-top:30px; max-width:46em; color:var(--text-sub); font-size:16px; line-height:1.95; }
.phd__btns{ margin-top:46px; display:flex; flex-wrap:wrap; gap:16px; }

/* 右にビジュアルを置く版 */
.phd--fig .phd__in{ display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:end; }
.phd--fig .phd__t{ font-size:42px; }
.phd--fig .phd__fig{ position:relative; }
.phd--fig .phd__fig figcaption{ margin-top:14px; font-size:13px; color:var(--text-sub); line-height:1.8; }

/* ---------- 3. セクション番号見出し（◆ 01 SERVICE） ---------- */
.snum{
  display:flex; align-items:center; gap:16px;
  font-size:14px; font-weight:700; letter-spacing:.16em; line-height:1; color:var(--text-sub);
}
.snum i{ width:7px; height:7px; background:var(--gold); rotate:45deg; flex:none; }
.snum b{ color:var(--navy); font-weight:700; }
.sec--navy .snum{ color:var(--sub-on-navy); }
.sec--navy .snum b{ color:var(--white); }
.snum span{ width:44px; height:1px; background:currentColor; opacity:.45; }

.stt{
  margin-top:28px; max-width:26em;
  font-size:34px; font-weight:700; line-height:1.6; letter-spacing:.02em;
}
.sec--navy .stt{ color:var(--white); }
.std{ margin-top:26px; max-width:52em; color:var(--text-sub); font-size:16px; line-height:1.95; }
.sec--navy .std{ color:var(--sub-on-navy); }
.dummy{ margin-top:24px; }

/* ---------- 4. 定義テーブル（会社概要・募集要項） ---------- */
.tbl{ margin-top:56px; border-top:1px solid var(--line); }
.tbl > div{
  display:grid; grid-template-columns:260px 1fr; gap:32px;
  padding:26px 4px; border-bottom:1px solid var(--line);
}
.tbl dt{ font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--navy); line-height:1.9; }
.tbl dd{ font-size:16px; line-height:1.9; }
.tbl dd small{ display:block; margin-top:6px; font-size:14px; color:var(--text-sub); }

/* ---------- 5. 3枚組の数値／特徴カード ---------- */
.trio{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.trio > div{
  padding:36px 30px 38px; background:var(--white);
  border:1px solid var(--line); border-radius:2px;
}
.sec--navy .trio > div{ background:rgba(255,255,255,.04); border-color:var(--line-dark); }
.trio dt,.trio .k{ font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--gold); line-height:1; }
.trio dd,.trio .v{ margin:20px 0 0; font-size:30px; font-weight:700; line-height:1.35; letter-spacing:.02em; }
.trio dd small,.trio .v small{ font-size:20px; }
.trio .n{ margin-top:16px; font-size:14px; line-height:1.85; color:var(--text-sub); }
.sec--navy .trio .n{ color:var(--sub-on-navy); }

/* 番号つきの特徴カード（01 / 02 / 03） */
.feat{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:0 44px; }
.feat > div{ padding:34px 0 0; border-top:1px solid var(--line); }
.sec--navy .feat > div{ border-top-color:var(--line-dark); }
.feat .no{ font-size:15px; font-weight:700; letter-spacing:.14em; color:var(--gold); line-height:1; }
.feat h3{ margin-top:22px; font-size:22px; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.feat p{ margin-top:18px; font-size:15px; line-height:1.9; color:var(--text-sub); }
.sec--navy .feat p{ color:var(--sub-on-navy); }
.feat--4{ grid-template-columns:repeat(4,1fr); gap:0 32px; }

/* ---------- 6. 箇条書き（ISSUE のチェックリスト） ---------- */
.checks{ margin-top:56px; display:grid; grid-template-columns:1fr; max-width:56em; }
.checks li{
  position:relative; padding:24px 0 24px 42px;
  border-bottom:1px solid var(--line);
  font-size:17px; font-weight:500; line-height:1.8;
}
.checks li::before{
  content:""; position:absolute; left:8px; top:33px;
  width:9px; height:9px; background:var(--gold); rotate:45deg;
}
.conc{
  margin-top:48px; padding-left:28px; border-left:2px solid var(--gold);
  font-size:20px; font-weight:700; line-height:1.85; letter-spacing:.02em;
}

/* ---------- 7. 対応業務リスト（SERVICE / WORK） ---------- */
.scope{
  margin-top:60px; padding:48px 52px 52px;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
}
.sec--navy .scope{ background:rgba(255,255,255,.04); border-color:var(--line-dark); }
.scope__en{ font-size:14px; font-weight:700; letter-spacing:.16em; color:var(--gold); line-height:1; }
.scope__ja{ margin-top:16px; font-size:26px; font-weight:700; letter-spacing:.02em; line-height:1.5; }
.scope__lb{ margin-top:34px; font-size:14px; letter-spacing:.1em; color:var(--text-sub); }
.sec--navy .scope__lb{ color:var(--sub-on-navy); }
.scope__list{ margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; }
.scope__list li{
  display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line);
  font-size:16px; line-height:1.7;
}
.sec--navy .scope__list li{ border-top-color:var(--line-dark); }
.scope__list li b{ flex:none; color:var(--gold); font-weight:700; letter-spacing:.1em; }
.scope__note{
  margin-top:34px; padding:26px 28px; border:1px dashed var(--line); border-radius:2px;
  font-size:15px; line-height:1.9; color:var(--text-sub);
}
.sec--navy .scope__note{ border-color:var(--line-dark); color:var(--sub-on-navy); }
.scope__note b{ display:block; margin-bottom:10px; color:var(--gold); font-size:13px; letter-spacing:.14em; }

/* ---------- 8. 横4列のプロセス ---------- */
.proc{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.proc > div{ position:relative; padding:30px 30px 34px; background:var(--white); border:1px solid var(--line); border-radius:2px; }
.proc .st{ font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--gold); line-height:1; }
.proc h4{ margin-top:18px; font-size:20px; font-weight:700; letter-spacing:.02em; line-height:1.5; }
.proc p{ margin-top:14px; font-size:14px; line-height:1.85; color:var(--text-sub); }
.proc > div + div::before{
  content:""; position:absolute; left:-17px; top:50%; translate:0 -50%;
  width:10px; height:10px; border-top:1px solid var(--gold); border-right:1px solid var(--gold);
  rotate:45deg;
}

/* ---------- 9. 縦のステップ（FLOW / A DAY / HISTORY） ---------- */
.steps{ margin-top:60px; border-top:1px solid var(--line); }
.steps > div{
  display:grid; grid-template-columns:150px 1fr 150px; gap:40px;
  padding:34px 4px; border-bottom:1px solid var(--line);
}
.steps .st{ font-size:14px; font-weight:700; letter-spacing:.16em; color:var(--gold); line-height:1.9; }
.steps h4{ font-size:21px; font-weight:700; letter-spacing:.02em; line-height:1.6; }
.steps p{ margin-top:14px; font-size:15px; line-height:1.9; color:var(--text-sub); }
.steps .meta{ text-align:right; font-size:14px; line-height:1.9; color:var(--text-sub); }
.steps .meta b{ display:block; color:var(--navy); font-size:16px; }
.steps--2 > div{ grid-template-columns:150px 1fr; }

/* ---------- 10. 料金プラン ---------- */
.plans{ margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:stretch; }
.plan{
  position:relative; padding:40px 34px 42px; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  transition:border-color var(--dur-hover) var(--ease-hover);
}
.plan:hover{ border-color:var(--gold); }
.plan--pop{ border-color:var(--navy); }
.plan__tag{
  position:absolute; top:-1px; right:-1px; padding:8px 14px;
  background:var(--navy); color:var(--white);
  font-size:12px; font-weight:700; letter-spacing:.12em; line-height:1;
}
.plan__no{ font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--gold); line-height:1; }
.plan__n{ margin-top:20px; min-height:72px; font-size:24px; font-weight:700; letter-spacing:.02em; line-height:1.5; }
.plan__p{ margin-top:22px; min-height:79px; padding-bottom:24px; border-bottom:1px solid var(--line);
  font-size:28px; font-weight:700; letter-spacing:.01em; line-height:1.4; color:var(--navy); }
.plan__p small{ font-size:16px; }
/* 成果報酬型：2つの単価を2段で並べる */
.plan__p--multi{ font-size:22px; display:flex; flex-direction:column; gap:10px; }
.plan__row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.plan__lb{ font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--text-sub); }
.plan__p--multi small{ font-size:14px; }
.plan__d{ margin-top:24px; font-size:15px; line-height:1.9; color:var(--text-sub); }
.plan__ul{ margin-top:24px; padding-bottom:2px; }
.plan__ul li{ position:relative; padding:9px 0 9px 22px; font-size:15px; line-height:1.75; }
.plan__ul li::before{ content:""; position:absolute; left:2px; top:17px; width:7px; height:7px; background:var(--gold); rotate:45deg; }
.note{ margin-top:32px; font-size:14px; line-height:1.9; color:var(--text-sub); }

/* ---------- 11. FAQ（アコーディオン） ---------- */
.faq{ margin-top:56px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; gap:20px;
  padding:28px 4px; cursor:pointer; list-style:none;
  font-size:19px; font-weight:700; line-height:1.7; letter-spacing:.02em;
  transition:color var(--dur-hover) var(--ease-hover);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold); }
.faq summary .q{ flex:none; color:var(--gold); font-size:17px; letter-spacing:.1em; line-height:1.85; }
.faq summary .ic{
  flex:none; margin-left:auto; position:relative; width:16px; height:16px; margin-top:8px;
}
.faq summary .ic::before,.faq summary .ic::after{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1px; background:var(--navy);
  transition:transform .28s var(--ease-hover);
}
.faq summary .ic::after{ transform:rotate(90deg); }
.faq details[open] summary .ic::after{ transform:rotate(0deg); }
.faq__a{
  display:flex; gap:20px; padding:0 4px 30px;
  font-size:16px; line-height:1.95; color:var(--text-sub);
}
.faq__a .q{ flex:none; color:var(--gold); font-size:17px; font-weight:700; letter-spacing:.1em; }

/* ---------- 12. 下部CTA（薄い帯） ---------- */
.cbar{ border-top:1px solid var(--line); background:var(--base); }
.cbar__in{
  padding-block:70px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:32px;
}
.cbar__t{ font-size:26px; font-weight:700; letter-spacing:.02em; line-height:1.6; }
.cbar__d{ margin-top:14px; font-size:14px; letter-spacing:.06em; color:var(--text-sub); }
.cbar__btns{ display:flex; flex-wrap:wrap; gap:16px; }

/* 紺ベタの大きいCTA（サービスページ末尾など） */
.cbig{ text-align:center; }
.cbig .snum{ justify-content:center; }
.cbig__t{ margin:30px auto 0; max-width:22em; font-size:38px; font-weight:700; line-height:1.55; letter-spacing:.02em; color:var(--white); }
.cbig__d{ margin-top:26px; font-size:16px; line-height:1.9; color:var(--sub-on-navy); }
.cbig__btns{ margin-top:46px; display:flex; justify-content:center; flex-wrap:wrap; gap:18px; }
.cbig__note{ margin-top:26px; font-size:14px; letter-spacing:.1em; color:var(--sub-on-navy); }

/* ---------- 13. 事例カード（一覧・関連） ---------- */
.ccard{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  transition:border-color var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover);
}
.ccard:hover{ border-color:var(--gold); transform:translateY(-3px); }
.ccard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy); }
.ccard__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.08) brightness(.78); }
.ccard__b{ padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.ccard__dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 18px; }
.ccard__dl dt{ font-size:13px; letter-spacing:.1em; color:var(--text-sub); line-height:1.7; }
.ccard__dl dd{ margin:0; font-size:15px; font-weight:700; line-height:1.7; }
.ccard__t{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line);
  font-size:17px; font-weight:700; line-height:1.75; letter-spacing:.02em; }
.ccard__f{ margin-top:auto; padding-top:26px; }
.cgrid{ margin-top:72px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }

/* ---------- 14. フォーム ---------- */
.form{ margin-top:56px; max-width:760px; }
.form__lead{ font-size:15px; color:var(--text-sub); line-height:1.9; }
.fld{ margin-top:34px; }
.fld > label{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; letter-spacing:.06em; }
.fld .req,.fld .opt{
  padding:4px 9px; border-radius:2px; font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1;
}
.fld .req{ background:var(--gold); color:var(--navy); }
.fld .opt{ border:1px solid var(--line); color:var(--text-sub); }
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{
  margin-top:14px; width:100%; padding:16px 18px;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  font-family:inherit; font-size:16px; line-height:1.7; color:var(--text);
  transition:border-color var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover);
}
.fld textarea{ min-height:170px; resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(18,34,74,.08);
}
.fld input[type=file]{ margin-top:14px; font-size:14px; }
.fld .hint{ margin-top:10px; font-size:14px; line-height:1.8; color:var(--text-sub); }
.agree{ margin-top:40px; display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.8; }
.agree input{ margin-top:5px; width:18px; height:18px; accent-color:var(--navy); flex:none; }
.agree a{ border-bottom:1px solid var(--line); }
.agree a:hover{ color:var(--gold); border-color:var(--gold); }
.form__submit{ margin-top:40px; }
.form__submit .btn{ padding-inline:56px; }

/* 連絡方法の3枚 */
.ways{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.ways > div{ padding:34px 30px 36px; background:var(--white); border:1px solid var(--line); border-radius:2px; }
.ways h3{ font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--gold); line-height:1; }
.ways .v{ margin-top:22px; font-size:24px; font-weight:700; letter-spacing:.01em; line-height:1.45; color:var(--navy); }
.ways .v a{ border-bottom:1px solid var(--line); }
.ways .v a:hover{ color:var(--gold); border-color:var(--gold); }
.ways p{ margin-top:16px; font-size:14px; line-height:1.85; color:var(--text-sub); }
.ways .tlink{ margin-top:22px; font-size:15px; }

/* ---------- 15. 事例詳細 ---------- */
.cmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cmeta > span{
  padding:8px 14px; border-radius:2px; background:var(--navy); color:var(--white);
  font-size:13px; font-weight:700; letter-spacing:.1em; line-height:1.5;
}
.cmeta > span + span{ background:transparent; color:var(--navy); border:1px solid var(--line); }
.chero{ margin-top:0; }
.cbody{ max-width:860px; }
.cbody > section{ margin-top:64px; }
.cbody > section:first-child{ margin-top:0; }
.cbody h2{
  display:flex; align-items:center; gap:14px;
  font-size:21px; font-weight:700; letter-spacing:.04em; line-height:1.5;
}
.cbody h2 i{ width:7px; height:7px; background:var(--gold); rotate:45deg; flex:none; }
.cbody h2 small{ font-size:14px; font-weight:500; color:var(--text-sub); letter-spacing:.06em; }
.cbody p{ margin-top:22px; font-size:17px; line-height:2; }
.cbody .quote{
  margin-top:22px; padding:28px 30px; background:var(--base);
  border-left:2px solid var(--gold);
  font-size:16px; line-height:2; color:var(--text);
}

/* ---------- 16. THANKS ---------- */
.thx{ text-align:center; padding-top:calc(88px + 130px); }
.thx__en{ font-size:14px; font-weight:700; letter-spacing:.2em; color:var(--gold); line-height:1; }
.thx__t{ margin-top:36px; font-size:40px; font-weight:700; letter-spacing:.02em; line-height:1.5; }
.thx__d{ margin-top:30px; font-size:17px; line-height:2; }
.thx__n{ margin-top:40px; padding:30px 32px; border:1px solid var(--line); border-radius:2px;
  display:inline-block; text-align:left; font-size:15px; line-height:1.95; color:var(--text-sub); }
.thx__n b{ display:block; margin-top:10px; color:var(--navy); font-size:18px; letter-spacing:.02em; }
.thx__btns{ margin-top:56px; display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }

/* ---------- 17. 読み物レイアウト（プライバシー等） ---------- */
.doc{ max-width:760px; }
.doc h2{ margin-top:56px; font-size:22px; font-weight:700; line-height:1.6; letter-spacing:.02em; }
.doc h2:first-child{ margin-top:0; }
.doc p{ margin-top:20px; font-size:16px; line-height:2; }
.doc ul{ margin-top:20px; }
.doc li{ position:relative; padding:6px 0 6px 22px; font-size:16px; line-height:1.9; }
.doc li::before{ content:""; position:absolute; left:2px; top:17px; width:6px; height:6px; background:var(--gold); rotate:45deg; }

/* ---------- 18. MAP（Googleマップ埋め込み） ---------- */
.mapbox{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--base); border:1px solid var(--line); border-radius:2px;
}
.mapbox iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }

/* ---------- 19. 画像プレースホルダ ---------- */
.ph{
  display:flex; align-items:center; justify-content:center;
  background:var(--base); border:1px dashed var(--line); border-radius:2px;
  color:var(--text-sub); font-size:13px; letter-spacing:.1em;
}

/* =========================================================
   SP
   ========================================================= */
@media (max-width:768px){
  .phd{ padding-top:calc(64px + 44px); }
  .phd::after{ display:none; }
  .phd__in{ padding-bottom:56px; }
  .phd__en{ margin-top:30px; font-size:40px; }
  .phd__t{ margin-top:28px; font-size:27px; }
  /* 長い見出し（採用情報など）はSPで行数が増えすぎるため、1段小さく／改行は自然送りに */
  .phd__t--long, .phd--fig .phd__t--long{ font-size:22px; }
  .phd__t--long .br{ display:inline; }
  .phd__d{ margin-top:22px; }
  .phd__btns{ margin-top:34px; flex-direction:column; align-items:stretch; }
  .phd__btns .btn{ justify-content:center; }
  .phd--fig .phd__in{ grid-template-columns:1fr; gap:36px; }

  .stt{ margin-top:22px; font-size:24px; }
  .std{ margin-top:20px; }

  .tbl{ margin-top:36px; }
  .tbl > div{ grid-template-columns:1fr; gap:8px; padding:20px 0; }

  .trio,.feat,.feat--4,.proc,.plans,.cgrid,.ways{ grid-template-columns:1fr; gap:24px; }
  .trio{ margin-top:40px; }
  .feat{ margin-top:40px; gap:0; }
  .feat > div{ padding-top:26px; margin-top:26px; }
  .feat > div:first-child{ margin-top:0; }
  .proc{ margin-top:36px; }
  .proc > div + div::before{ left:50%; top:-17px; translate:-50% 0; rotate:135deg; }

  .checks{ margin-top:34px; }
  .checks li{ font-size:16px; padding:18px 0 18px 34px; }
  .checks li::before{ top:27px; }
  .conc{ margin-top:34px; font-size:17px; padding-left:20px; }

  .scope{ margin-top:36px; padding:30px 22px 34px; }
  .scope__ja{ font-size:21px; }
  .scope__list{ grid-template-columns:1fr; gap:0; }
  .scope__note{ padding:20px 20px; }

  .steps{ margin-top:36px; }
  .steps > div,.steps--2 > div{ grid-template-columns:1fr; gap:14px; padding:24px 0; }
  .steps .meta{ text-align:left; }
  .steps .meta b{ display:inline; }

  .plans{ margin-top:36px; }
  .plan{ padding:30px 24px 32px; }
  .plan__n,.plan__p{ min-height:0; }

  .faq{ margin-top:34px; }
  .faq summary{ font-size:17px; padding:22px 0; gap:14px; }
  .faq__a{ font-size:15px; padding:0 0 24px; gap:14px; }

  .cbar__in{ padding-block:48px; flex-direction:column; align-items:stretch; gap:26px; }
  .cbar__t{ font-size:21px; }
  .cbar__btns{ flex-direction:column; }
  .cbar__btns .btn{ justify-content:center; }

  .cbig__t{ font-size:26px; }
  .cbig__btns{ margin-top:34px; flex-direction:column; }
  .cbig__btns .btn{ justify-content:center; }

  .cgrid{ margin-top:40px; }
  .form{ margin-top:34px; }
  .ways{ margin-top:34px; }

  .cbody > section{ margin-top:44px; }
  .cbody p{ font-size:16px; }
  .cbody .quote{ padding:22px 20px; }

  .thx{ padding-top:calc(64px + 70px); }
  .thx__t{ font-size:26px; }
  .thx__d{ font-size:16px; }
  .thx__btns{ margin-top:40px; flex-direction:column; }
  .thx__btns .btn{ justify-content:center; }

  .doc h2{ margin-top:40px; font-size:19px; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ccard:hover{ transform:none; }
}

/* ---------- 20. ACCESS（住所＋MAP） ---------- */
.access{ margin-top:48px; display:grid; grid-template-columns:1fr 520px; gap:64px; align-items:start; }
.access__ad{ font-size:20px; font-weight:700; line-height:1.9; letter-spacing:.02em; }
.access__tel{ margin-top:22px; font-size:17px; font-weight:700; color:var(--navy); }
@media (max-width:768px){
  .access{ margin-top:34px; grid-template-columns:1fr; gap:32px; }
  .access__ad{ font-size:17px; }
}

/* 長文の[要確認]注記は折り返す（.chk は既定で nowrap のため） */
.dummy .chk{ white-space:normal; line-height:1.8; }

/* ---------- 21. 横長のCASEカード（サービスページ） ----------
   縦積みのカードは1枚が縦に伸びて読みづらいため、
   写真を左・テキストを右に置いた横長カードを縦に並べる。 */
.cases--row{ margin-top:56px; grid-template-columns:1fr; gap:28px; }
.case--row{ display:grid; grid-template-columns:340px 1fr; gap:0 48px; padding:32px 36px 34px; }
.case--row .case__img{ margin-top:0; align-self:stretch; }
.case--row .case__img .zoom__i{ display:block; height:100%; }
.case--row .case__img img{ aspect-ratio:auto; width:100%; height:100%; min-height:260px; object-fit:cover; }
.case--row .case__body{ display:flex; flex-direction:column; min-width:0; }
.case--row .case__badge{ margin-bottom:22px; }

/* 業種／支援内容／支援期間は横一列に */
.case__dl--row{ margin-top:0; display:flex; flex-wrap:wrap; gap:18px 48px; }
.case__dl--row > div{ min-width:0; }
.case__dl--row dd{ margin:4px 0 0; font-size:18px; }

.case--row .case__sep{ margin:24px 0 20px; }
.case--row .case__dl.is-body{ margin-top:0; }
.case--row .case__dl.is-body dd{ margin:4px 0 16px; }
.case--row .case__dl.is-body dd:last-of-type{ margin-bottom:0; }
.case--row .tlink{ padding-top:24px; }

@media (max-width:768px){
  .cases--row{ margin-top:36px; gap:24px; }
  .case--row{ grid-template-columns:1fr; gap:0; padding:24px 22px 26px; }
  .case--row .case__img{ margin-top:0; margin-bottom:22px; }
  .case--row .case__img img{ aspect-ratio:4/3; height:auto; min-height:0; }
  .case--row .case__badge{ margin-bottom:18px; }
  .case__dl--row{ flex-direction:column; gap:14px; }
  .case__dl--row dd{ font-size:17px; }
}

/* ---------- 22. セクション背景の透かし写真 ----------
   テキスト主体のセクションに、人が働いている写真を極薄で敷いて温度を足す。
   左＝本文側は完全に透過させ、右へ向かってだけ像が立ち上がるようにマスクするので
   可読性は落とさない。出現時の1.08→1.00のスローズームは .zoom の既存挙動を流用。 */
.sec--wm{ overflow:hidden; }
.wm{
  position:absolute; top:0; right:0; bottom:0; width:66%;
  z-index:0; pointer-events:none; border-radius:0; overflow:hidden;
  -webkit-mask-image:
     linear-gradient(100deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.9) 58%, #000 100%),
     linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
  mask-image:
     linear-gradient(100deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.9) 58%, #000 100%),
     linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.wm > img{
  width:100%; height:100%; object-fit:cover;
  opacity:.14; filter:grayscale(100%) contrast(1.06) brightness(1.02);
  transition:transform 2.6s var(--ease), opacity 1.1s ease;
}
/* 紺ベタの上では像が沈むので、明度を持ち上げてから薄く乗せる */
.sec--navy .wm > img{ opacity:.13; filter:grayscale(100%) contrast(1.1) brightness(1.5); }
/* 白地の上ではやや強めでも成立する */
.sec--wm:not(.sec--gray):not(.sec--navy) .wm > img{ opacity:.12; }

/* 左端の設計線と本文は必ず透かしより前に出す */
.sec--wm > .wrap{ position:relative; z-index:2; }
.sec--wm::after{ z-index:1; }

@media (max-width:768px){
  /* SPは本文幅いっぱいに文字が来るため、さらに薄く・上寄せに */
  .wm{ width:100%; bottom:auto; height:52%;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, rgba(0,0,0,.5) 66%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, rgba(0,0,0,.5) 66%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
  .wm > img{ opacity:.09; }
  .sec--navy .wm > img{ opacity:.10; }
}
@media (prefers-reduced-motion: reduce){
  .wm > img{ transition:opacity 1.1s ease; }
}

/* ---------- 23. 代表者の写真（企業理念 OUR STORY） ---------- */
.rep{ margin-top:56px; display:grid; grid-template-columns:360px 1fr; gap:56px; align-items:start; }
.rep__fig{ position:relative; }
/* 写真の奥に1px枠を半分ずらして敷き、レイヤーの前後をつくる（RECRUITと同じ作法） */
.rep__frame{ position:relative; }
.rep__frame::before{
  content:""; position:absolute; left:-22px; top:-22px; right:44px; bottom:44px;
  border:1px solid var(--line); pointer-events:none;
}
.rep__frame::after{
  content:""; position:absolute; left:-22px; top:-22px;
  width:84px; height:84px; pointer-events:none;
  border-left:1px solid var(--gold); border-top:1px solid var(--gold);
}
.rep__ph{ position:relative; z-index:1; aspect-ratio:3/4; }
.rep__ph img{ width:100%; height:100%; object-fit:cover; }
.rep__cap{ position:relative; z-index:1; margin-top:20px; }
.rep__cap b{ display:block; font-size:20px; font-weight:700; letter-spacing:.04em; line-height:1.6; }
.rep__cap span{ display:block; margin-top:6px; font-size:13px; letter-spacing:.1em; color:var(--text-sub); }
.rep__cap em{ display:block; margin-top:14px; font-style:normal; font-size:13px; line-height:1.85; color:var(--text-sub); }
.rep__body{ min-width:0; }

/* OUR STORY 本文（代表のストーリー） */
.story__b{ position:relative; }
.story__b + .story__b{ margin-top:34px; padding-top:34px; border-top:1px solid var(--line); }
.story__no{ font-size:13px; font-weight:700; letter-spacing:.16em; color:var(--gold); line-height:1; }
.story__b .std{ margin-top:16px; }
@media (max-width:768px){
  .story__b + .story__b{ margin-top:26px; padding-top:26px; }
}

@media (max-width:768px){
  .rep{ margin-top:34px; grid-template-columns:1fr; gap:36px; }
  .rep__fig{ max-width:260px; }
  .rep__frame::before{ left:-14px; top:-14px; right:28px; bottom:28px; }
  .rep__frame::after{ left:-14px; top:-14px; width:56px; height:56px; }
}

/* 差し替え前提のプレースホルダ（縦3:4） */
.ph--rep{
  height:100%; flex-direction:column; gap:10px; text-align:center; padding:20px;
  background:linear-gradient(160deg, #EEF1F7 0%, #E3E8F2 100%);
}
.ph--rep b{ font-size:15px; font-weight:700; color:var(--navy); letter-spacing:.06em; }
.ph--rep span{ font-size:12px; line-height:1.8; }

/* =========================================================
   24. 日本語の改行位置（下層ページ）
   「を。」だけが次行に残るような行末を避けるための指定。
   ・text-wrap:balance … 見出しの行長を均等に割る（Safari 17.5+ / Chrome 114+）
   ・text-wrap:pretty  … 本文の最終行が1〜2文字にならないようにする
   ・word-break:auto-phrase … 文節単位で折る（Chromium）。非対応環境では無視される
   ・line-break:strict … 小書き仮名・長音符・promptを行頭に置かない
   ========================================================= */
body.sub{ line-break:strict; }

body.sub h1, body.sub h2, body.sub h3, body.sub h4,
body.sub .phd__t, body.sub .stt, body.sub .scope__ja, body.sub .scope__lb,
body.sub .feat h3, body.sub .proc h4, body.sub .steps h4,
body.sub .plan__n, body.sub .plan__p, body.sub .ways .v,
body.sub .faq summary, body.sub .cbar__t, body.sub .cbig__t,
body.sub .conc, body.sub .case__dl dd, body.sub .trio dd,
body.sub .tbl dt, body.sub .access__ad, body.sub .rep__cap b{
  text-wrap:balance;
  word-break:auto-phrase;
}

body.sub p, body.sub li, body.sub dd, body.sub figcaption,
body.sub .std, body.sub .phd__d, body.sub .plan__d, body.sub .note{
  text-wrap:pretty;
  word-break:auto-phrase;
}

/* 途中で切りたくない塊はこれで囲む（行に収まらないときだけ内部で折れる） */
.np{ display:inline-block; }
/* 数字＋単位など、絶対に切りたくないもの */
.nb{ white-space:nowrap; }

/* 数値カードの[要確認]は、数字のあとに中途半端に折り返さず1段下げる */
.trio dd .chk{ display:block; margin:14px 0 0; }

/* word-break:auto-phrase は最小内容幅（min-content）を文節単位まで広げるため、
   グリッドの子が既定の min-width:auto のままだと列がはみ出す。明示的に0にする。 */
body.sub .cases > *, body.sub .cgrid > *, body.sub .trio > *, body.sub .feat > *,
body.sub .proc > *, body.sub .plans > *, body.sub .ways > *, body.sub .checks > *,
body.sub .scope__list > *, body.sub .story > *, body.sub .steps > div > *, body.sub .tbl > div > *,
body.sub .access > *, body.sub .rep > *, body.sub .phd--fig .phd__in > *{ min-width:0; }

/* 2列の特徴カード（MISSION など） */
.feat--2{ grid-template-columns:repeat(2,1fr); gap:0 56px; }
/* 1列に落とす業務リスト（OUR STORY の要原稿リストなど） */
.scope__list--1{ grid-template-columns:1fr; }
@media (max-width:768px){
  .feat--2{ grid-template-columns:1fr; gap:0; }
}