/* =========================================================
   MIQTO 公式サービスLP — 共通ベース（A・B・C 共通）
   CSP: style-src 'self' のため、style属性・インラインstyleは使わない。
   フォント: システムフォントのみ（外部フォントなし）。
   文字サイズは下の7段階だけを使う（--fs-*）。13px未満は使わない。
   ========================================================= */
:root {
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;

  --ink: #17231e;
  --text: #29332f;
  --muted: #56625d;
  --green: #1f4b3d;
  --green-deep: #163a2f;
  --green-mid: #2f6150;
  --sage: #eef3ef;
  --sage-2: #e1e9e3;
  --line: #d8e0db;
  --gold: #a57d2e;
  --gold-text: #86651f;
  --paper: #f7f5ef;

  --shell: 1120px;
  --gutter: 24px;

  /* 文字サイズ（1440幅） */
  --fs-xs: 14px;
  --fs-s: 15px;
  --fs-m: 17px;
  --fs-l: 20px;
  --fs-h3: 24px;
  --fs-h2: 36px;
  --fs-h1: 48px;
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}
@media (max-width: 1023px) {
  :root {
    --fs-m: 16px;
    --fs-l: 18px;
    --fs-h3: 20px;
    --fs-h2: 26px;
    --fs-h1: 30px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-m);
  line-height: 1.85;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }
strong { font-weight: 700; }
small { font-size: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #c9a24a; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.page-shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 改行位置の制御: 見出しは句ごとのspan（既存の *-phrase・heading-segment と、最終版で足した .phrase）を
   inline-block にして、句の途中で改行させない。word-break: auto-phrase には頼らない（Safari非対応のため）。 */
.heading-line { display: block; }
.heading-segment, .read-phrase, .title-phrase, .answer-phrase, .plan-phrase, .phrase,
.material-intro-phrase, .term-sentence, .hero-action-note span { display: inline-block; }
.hero-mobile-break { display: none; }
@media (max-width: 699px) {
  .hero-mobile-break { display: inline; }
  .hero-desktop-break { display: none; }
}

/* ---------- 相談CTA（塗りのボタン＋右向きの矢印）---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.button-primary { background: var(--green); color: #fff; }
.button-primary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) {
  .button-primary { transition: background-color .2s ease; }
  .button-primary:hover { background: var(--green-deep); }
}
/* 個人プラン向けの相談（枠線のボタン。文言は既存の「個人プランについて相談する」） */
.button-secondary { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
.button-secondary::after { content: ""; flex: none; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.section-action-sub { margin-top: 20px; }
.section-action, .proof-action { display: flex; justify-content: center; margin-top: 48px; }
.section-action .button, .proof-action .button { min-width: 380px; }
@media (max-width: 699px) {
  .button { min-height: 56px; padding: 0 20px; }
  .section-action, .proof-action { margin-top: 32px; }
  .section-action .button, .proof-action .button { width: 100%; min-width: 0; }
}

/* ---------- ページ内リンク（下線の文字＋下向きの矢印）---------- */
.hero-price-link, .section-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-size: var(--fs-s);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.hero-price-link::after, .section-text-link::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* ---------- ヘッダー・フッター ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
  padding: 0 var(--gutter);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: block; flex: none; }
.brand-logo { width: auto; height: 30px; }
.site-header p { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0; }
@media (max-width: 699px) {
  .site-header { height: 60px; }
  .brand-logo { height: 26px; }
}
.site-footer { padding: 32px 0 40px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.site-footer .page-shell { display: flex; justify-content: space-between; gap: 16px; }
.site-footer .document-links { flex-wrap: wrap; justify-content: flex-start; margin-top: 20px; }
.document-links a, .reception-link, .boundary-list p a { text-decoration: underline; text-underline-offset: 4px; }
.contact-option .reception-link { display: inline-block; padding: 12px 0; font-weight: 700; color: var(--green); }

/* ---------- 開閉（details）---------- */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.reading-supplement, .check-information, .check-sources { border-top: 1px solid var(--line); }
.reading-supplement > summary, .check-information > summary, .check-sources > summary {
  position: relative;
  display: block;
  padding: 16px 40px 16px 0;
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--green);
}
.reading-supplement > summary::before, .reading-supplement > summary::after,
.check-information > summary::before, .check-information > summary::after,
.check-sources > summary::before, .check-sources > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
}
.reading-supplement > summary::after, .check-information > summary::after, .check-sources > summary::after { transform: rotate(90deg); }
.reading-supplement[open] > summary::after, .check-information[open] > summary::after, .check-sources[open] > summary::after { transform: none; }
.reading-supplement > p, .reading-supplement > div, .check-information > p, .check-sources > p, .check-sources > ul {
  padding-bottom: 16px;
  font-size: var(--fs-s);
  line-height: 1.8;
}

/* ---------- SVGピクトグラム（HTMLに既にあるもの。線はcurrentColor）---------- */
.pictogram { width: 48px; height: 48px; color: var(--green); }

/* =========================================================
   7問の生活習慣チェック（decision-check.js）
   DOM・id・class・aria・Tab順はそのまま。見た目だけをここで決める。
   各案は --ck-* の値と配置だけを上書きする。
   ========================================================= */
.decision-check {
  --ck-bg: var(--sage);
  --ck-card: #fff;
  --ck-accent: var(--green);
  --ck-line: var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 56px;
  align-items: start;
  margin-top: 64px;
  padding: 56px;
  border-radius: 16px;
  background: var(--ck-bg);
}
.decision-check > * { grid-column: 1; min-width: 0; }
.decision-check > .check-hint-example { grid-column: 2; grid-row: 1 / span 2; }
.check-kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); letter-spacing: 0; }
.check-introduction h3 { margin-top: 8px; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.5; color: var(--ink); }
.check-introduction > p:last-child { margin-top: 12px; font-size: var(--fs-s); }
#check-content { margin-top: 28px; }
.check-fallback { font-size: var(--fs-s); }

/* 開始前 */
.check-entry-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.check-primary, .check-secondary, .check-back {
  min-height: 56px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
}
.button.check-primary { min-height: 56px; background: var(--ck-accent); color: #fff; }
.button.check-primary:disabled { background: #9fb3aa; cursor: not-allowed; }
.check-secondary { border: 1.5px solid var(--ck-accent); background: #fff; color: var(--ck-accent); }
.check-back { border: 1px solid var(--ck-line); background: #fff; color: var(--text); font-weight: 600; }
.check-text-link, .check-related-link {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ck-accent);
  font-size: var(--fs-s);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

/* 設問中 */
.check-question { padding: 32px; border-radius: 12px; background: var(--ck-card); }
.check-question-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.check-question-top .check-text-link { margin-top: 0; white-space: nowrap; }
.check-progress { font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); letter-spacing: 0; white-space: nowrap; }
.check-topic-label { margin-top: 20px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
#check-question-title { margin-top: 4px; font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.6; color: var(--ink); }
.check-question-help { margin-top: 8px; font-size: var(--fs-s); color: var(--muted); }
.check-question-examples { margin-top: 8px; font-size: var(--fs-s); }
.check-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.check-choice {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 16px 10px 48px;
  border: 1.5px solid var(--ck-line);
  border-radius: 10px;
  background: #fff;
  font-size: var(--fs-s);
  font-weight: 700;
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
}
.check-choice::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid #9aa8a2;
  border-radius: 50%;
  background: #fff;
}
.check-choice[aria-pressed="true"] { border-color: var(--ck-accent); background: #e9f1ec; color: var(--ink); }
.check-choice[aria-pressed="true"]::before { border-color: var(--ck-accent); background: var(--ck-accent); box-shadow: inset 0 0 0 4px #fff; }
.check-navigation { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.check-navigation > * { flex: 1 1 0; }
.check-question > .check-text-link { margin-top: 16px; }

/* 結果 */
.check-result, .check-general { padding: 32px; border-radius: 12px; background: var(--ck-card); }
.check-result h4, .check-general h4 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.6; color: var(--ink); }
.sample-caption, .result-intro, .check-empty { margin-top: 12px; font-size: var(--fs-s); }
.sample-caption { color: var(--muted); }
.check-action-note { margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--paper); font-size: var(--fs-s); }
.check-reading-nav { margin-top: 20px; }
.check-theme-links { display: flex; flex-wrap: wrap; gap: 8px; }
.check-theme-links .check-text-link {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--ck-line);
  border-radius: 999px;
  background: #fff;
  font-size: var(--fs-xs);
  text-decoration: none;
}
.check-theme-links .check-text-link[aria-pressed="true"] { border-color: var(--ck-accent); background: var(--ck-accent); color: #fff; }
.check-selected-topic { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.check-articles { display: grid; gap: 12px; margin-top: 16px; }
.check-article { padding: 20px 24px; border: 1px solid var(--ck-line); border-radius: 10px; background: #fff; }
.check-article .check-topic-label { margin-top: 0; }
.check-article h5 { margin-top: 2px; font-size: var(--fs-m); line-height: 1.6; color: var(--ink); }
.check-overview { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 6px; }
.check-relation { font-size: var(--fs-s); }
.check-overview .check-secondary { flex: none; min-height: 44px; padding: 6px 16px; }
.check-reading-detail { margin-top: 12px; }
.check-scene { display: flex; gap: 12px; margin: 4px 0 12px; }
.check-scene-step { display: flex; align-items: center; gap: 10px; flex: 1 1 0; padding: 10px 12px; border-radius: 8px; background: var(--sage); }
.check-scene-step svg { flex: none; width: 40px; height: 40px; color: var(--ck-accent); }
.check-scene-step figcaption { font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; }
.check-full-relation, .check-hint, .check-limit { font-size: var(--fs-s); }
.check-hint-label { margin-top: 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); letter-spacing: 0; }
.check-hint { font-weight: 700; color: var(--ink); }
.check-limit { margin-top: 8px; color: var(--muted); }
.check-detail-actions, .check-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.check-detail-actions > button, .check-result-actions > button { min-height: 48px; margin-top: 0; }
.check-result-actions > .check-text-link { align-self: center; }
.check-evidence { margin-top: 12px; padding: 16px; border-radius: 8px; background: var(--paper); font-size: var(--fs-s); }
.check-evidence h6 { font-size: var(--fs-s); }
.check-evidence li { margin-top: 8px; }
.check-evidence li a, .check-sources li a { color: var(--green); font-weight: 700; }
.check-evidence .check-back { margin-top: 12px; min-height: 44px; }
.check-result > .check-back, .check-general > .check-back { margin-top: 12px; }
#check-additional { margin-top: 12px; }
.result-service { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ck-line); font-size: var(--fs-s); }
.check-related-link { margin-top: 6px; }
.check-general > button { margin: 12px 12px 0 0; }

/* 静的な注記（チェックの外枠） */
.check-hint-example { padding: 24px; border-radius: 12px; background: var(--ck-card); box-shadow: 0 10px 28px rgba(23, 35, 30, .08); }
.check-hint-example > p:first-child { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.check-hint-example strong { display: block; margin-top: 12px; font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.5; color: var(--ink); }
.check-hint-example strong + p { margin-top: 8px; font-size: var(--fs-s); }
.check-medical-note, .check-boundary { margin-top: 24px; font-size: var(--fs-s); line-height: 1.8; }
.check-boundary { margin-top: 8px; color: var(--muted); }
.check-information { margin-top: 24px; }
.check-sources { border-bottom: 1px solid var(--line); }
.check-sources li { padding: 12px 0; border-top: 1px dashed var(--line); }
.check-sources li p { font-size: var(--fs-xs); color: var(--muted); }
.check-sources > .check-back { margin: 4px 0 16px; min-height: 44px; }

@media (max-width: 1023px) {
  .decision-check { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; margin-top: 48px; border-radius: 12px; }
  .decision-check > .check-hint-example { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .check-entry-actions { grid-template-columns: minmax(0, 1fr); }
  .check-question, .check-result, .check-general { padding: 20px 16px; }
  .check-choices { grid-template-columns: minmax(0, 1fr); }
  .check-overview { display: block; }
  .check-overview .check-secondary { margin-top: 10px; }
  .check-scene { flex-direction: column; gap: 8px; }
  .check-article { padding: 16px; }
}

/* =========================================================
   C案・最終版「年間の道筋が主役」（2026-09-26 安井さん決定を反映）
   1 ページ左に1本の線（道筋）を通し、各章の番号をその上の節点にする（CSSのみ）。
   2 01の3段階・04の3段階・06の5場面を、同じ「節点と線」の描き方でそろえる。04は写真を残し、節点の下に写真を置く。
   3 06は横一列の年間の線＋「一度で終わりにせず」を戻り矢印、「原則12か月…」を期間の帯として描く。
   4 写真は現行のまま（Hero・01・03・04・07・7問チェック・09）。鉛筆画は使わない。
   5 相談CTAを 03の後（1023px以下のみ）・06の後・07に追加。ヘッダーを上部固定し、Heroを過ぎたら相談ボタンを出す（header-cta.js）。
   ========================================================= */
@media (min-width: 700px) and (max-width: 1023px) { :root { --shell: 680px; } }
:root {
  --paper: #f8f6f1;
  --rail: #cdb88a;
  --node: #a57d2e;
  --content-left: max(var(--gutter), calc((100% - var(--shell)) / 2));
  --rail-x: calc(var(--content-left) + 20px);
  --shift: 88px;
}
body { background: var(--paper); }

/* ---------- 固定ヘッダー（相談ボタンの表示は header-cta.js が <html> の .show-header-cta で切り替える） ---------- */
* { scroll-margin-top: 88px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 246, 241, .97); }
.site-header p { margin-left: 20px; margin-right: auto; padding-left: 20px; border-left: 1px solid var(--line); }
.header-cta { min-height: 44px; padding: 0 20px; font-size: var(--fs-s); white-space: nowrap; visibility: hidden; opacity: 0; transform: translateY(-4px); }
.header-cta::after { width: 7px; height: 7px; }
.show-header-cta .header-cta { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .header-cta { transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .show-header-cta .header-cta { transition: opacity .2s ease, transform .2s ease, visibility 0s; }
}

.chapter, .contact { position: relative; padding: 96px 0; }
.chapter > .page-shell, .contact > .page-shell { padding-left: calc(var(--gutter) + var(--shift)); }
.chapter::before, .contact::before {
  content: "";
  position: absolute;
  left: var(--rail-x);
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--rail);
}
.contact::before { bottom: auto; height: 136px; }

.section-heading, .proof-heading { position: static; }
.chapter .eyebrow, .contact .eyebrow {
  position: absolute;
  left: calc(var(--rail-x) - 22px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 5px;
  border: 2px solid var(--node);
  border-radius: 50%;
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-text);
  letter-spacing: 0;
}
.contact .eyebrow { background: var(--node); color: #fff; }
.section-heading h2, .proof-heading h2, .contact h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: 0;
}
.section-heading > p:not(.eyebrow) { margin-top: 16px; }
.section-note { margin-top: 24px; font-size: var(--fs-s); color: var(--muted); }
h3 { color: var(--ink); }

/* 共通の「節点」: 01・04・06 の段階をそろえる */
.path-node, .scene-step .pictogram, .stage-art .pictogram, .annual-symbol {
  border: 2px solid var(--rail);
  border-radius: 50%;
  background: #fff;
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-grid { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 104px; }
.hero-copy { max-width: 700px; }
.hero-audience { font-size: var(--fs-s); font-weight: 700; color: var(--gold-text); letter-spacing: 0; }
.hero h1 { margin-top: 16px; font-family: var(--font-serif); font-size: var(--fs-h1); line-height: 1.42; color: var(--ink); letter-spacing: 0; }
.hero-benefit { margin-top: 24px; font-size: var(--fs-l); }
.hero-benefit strong { color: var(--green); }
.hero-actions { margin-top: 36px; }
.hero-actions .button { min-width: 360px; }
.hero-action-note { margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); }
.hero-price-link { margin-top: 16px; }
.hero-photo { position: absolute; right: 0; top: 48px; bottom: 48px; width: 36%; overflow: hidden; border-radius: 24px 0 0 24px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-photo { width: 30%; }
}
.hero::after {
  content: "";
  position: absolute;
  left: var(--rail-x);
  bottom: 0;
  height: 64px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(205, 184, 138, 0), var(--rail));
}

/* ---------- 01 ---------- */
.purpose-opening::after {
  content: "";
  display: block;
  height: 380px;
  margin-top: 40px;
  border-radius: 16px;
  background: #d5ecfb url("/assets/miqto-c-20260929/impact-coast.webp") 50% 100% / cover no-repeat;
}
.purpose-opening { display: flex; flex-direction: column; }
.purpose-opening .section-heading { order: 1; }
.purpose-opening::after { order: 2; }
.purpose-moments { order: 3; }
.purpose-commitment { max-width: 720px; }
.purpose-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.purpose-moments li { padding-top: 12px; border-top: 1px solid var(--rail); font-family: var(--font-serif); font-size: var(--fs-m); color: var(--ink); }
.purpose-bridge { margin-top: 64px; }
.purpose-bridge h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.5; }
.purpose-bridge p { margin-top: 10px; }
.scene-bridge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr) 128px minmax(0, 1fr);
  margin-top: 36px;
}
.scene-bridge::before { content: ""; position: absolute; left: 40px; right: 40px; top: 39px; height: 2px; background: var(--rail); }
.scene-step { position: relative; }
.scene-step .pictogram { width: 80px; height: 80px; padding: 16px; }
.scene-step h3 { margin-top: 16px; font-size: var(--fs-l); line-height: 1.5; }
.scene-step p { margin-top: 4px; font-size: var(--fs-s); color: var(--muted); }
.flow-connector { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.flow-connector .pictogram { display: none; }
.flow-connector span { padding: 2px 8px; border-radius: 999px; background: var(--paper); font-size: var(--fs-xs); color: var(--gold-text); font-weight: 700; }

/* ---------- 02 ---------- */
.unresolved { background: #fff; }
.unresolved .eyebrow { background: #fff; }
.question-path { margin-top: 36px; }
.question-path li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.question-path li:last-child { border-bottom: 1px solid var(--line); }
.question-number { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--node); }
.question-path h3 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.6; }
.decision-check { --ck-bg: var(--paper); --ck-card: #fff; border: 1px solid #e6e0d2; }
@media (min-width: 1024px) {
  .decision-check {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 56px;
    background: var(--paper) url("/assets/miqto-c-20260929/impact-meeting.webp") 100% 0 / 40% auto no-repeat;
  }
  .decision-check > .check-hint-example { grid-row: 1 / span 4; align-self: end; margin-bottom: 8px; }
}
.check-progress { display: flex; align-items: center; gap: 12px; }
.check-progress::after {
  content: "";
  width: 168px;
  height: 8px;
  background:
    radial-gradient(circle, var(--node) 3.5px, transparent 4px) 0 50% / 24px 8px repeat-x,
    linear-gradient(var(--rail), var(--rail)) 0 50% / 100% 2px no-repeat;
  -webkit-mask: linear-gradient(90deg, #000 var(--p, 14.3%), rgba(0, 0, 0, .25) var(--p, 14.3%));
  mask: linear-gradient(90deg, #000 var(--p, 14.3%), rgba(0, 0, 0, .25) var(--p, 14.3%));
}
.check-progress[aria-label="7問中2問目"] { --p: 28.6%; }
.check-progress[aria-label="7問中3問目"] { --p: 42.9%; }
.check-progress[aria-label="7問中4問目"] { --p: 57.1%; }
.check-progress[aria-label="7問中5問目"] { --p: 71.4%; }
.check-progress[aria-label="7問中6問目"] { --p: 85.7%; }
.check-progress[aria-label="7問中7問目"] { --p: 100%; }
/* The unchanged check module reports progress as text, not these aria selectors. */
.check-progress::after { display: none; }

/* ---------- 03 ---------- */
.outcome-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding: 32px 32px 320px;
  border-radius: 16px;
  background: #e1e4e1 url("/assets/miqto-c-20260929/impact-table.webp") 50% 100% / cover no-repeat;
}
.outcome-row { padding: 24px 24px 20px; border-radius: 12px; background: rgba(255, 255, 255, .94); }
.outcome-question { font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); letter-spacing: 0; }
.outcome-illustration { display: none; }
.outcome-row > div { margin-top: 6px; }
.outcome-row h3 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.55; }
.outcome-row p { margin-top: 8px; font-size: var(--fs-s); color: var(--muted); }
.material .section-note { margin-top: 28px; padding: 14px 20px; border-left: 3px solid var(--node); background: #fff; color: var(--text); }
.material .section-text-link { margin-top: 16px; }
@media (min-width: 1024px) { .material .section-action { display: none; } } /* 1440では04のCTAまで約700pxしかないため、03後のCTAは1023px以下だけに出す */

/* ---------- 04 ---------- */
.product-proof { background: #fff; }
.product-proof .eyebrow { background: #fff; }
.proof-workflow { margin-top: 40px; }
.proof-stages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr); }
.proof-stages::before { content: ""; position: absolute; left: 40px; right: 40px; top: 75px; height: 2px; background: var(--rail); }
.stage-role { font-size: var(--fs-xs); font-weight: 700; line-height: 26px; color: var(--gold-text); letter-spacing: 0; }
/* 節点（SVG）と写真（::after）を .proof-stage の直接の子として並べるため、.stage-art 自体は箱を作らない */
.stage-art { display: contents; }
.stage-art .pictogram { position: relative; z-index: 1; width: 80px; height: 80px; margin-top: 10px; padding: 16px; }
.stage-art::after { content: ""; display: block; aspect-ratio: 4 / 3; margin-top: 16px; border-radius: 12px; background: #e8e6e3 url("/assets/miqto-c-20260929/proof-workflow-r2.webp") 0 50% / 300% auto no-repeat; }
.proof-stage:nth-child(3) .stage-art::after { background-position: 50% 50%; }
.proof-stage:nth-child(5) .stage-art::after { background-position: 100% 50%; }
.proof-stage h3 { margin-top: 16px; font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.55; }
.input-stack, .reason-links, .use-pairs { margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--paper); }
.input-stack p { font-size: var(--fs-s); }
.reason-links p { font-size: var(--fs-s); }
.reason-links p + p { margin-top: 8px; }
.reason-links strong, .reason-links span { display: block; }
.reason-links span { font-size: var(--fs-xs); color: var(--muted); }
.use-pairs div { display: grid; grid-template-columns: 64px minmax(0, 1fr); font-size: var(--fs-s); }
.use-pairs dt { font-weight: 700; color: var(--green); }
.use-pairs dd { margin: 0; }
.proof-transfer { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 61px; }
.proof-transfer .pictogram { display: none; }
.proof-transfer span { padding: 2px 8px; border-radius: 999px; background: #fff; font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); }
.figure-boundary { margin-top: 28px; font-size: var(--fs-s); color: var(--muted); }

/* ---------- 05 ---------- */
.role-flow { display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); grid-template-areas: "person rel doctor" "link . ." "provider provider provider"; margin-top: 40px; }
.role-actor { text-align: center; }
.role-person { grid-area: person; }
.role-actor:not(.role-person) { grid-area: doctor; }
.role-actor .pictogram, .role-provider .pictogram { display: none; }
.role-actor::before, .role-provider::before { content: ""; display: block; flex: none; width: 152px; height: 152px; margin: 0 auto 14px; background: url("/assets/miqto-c-20260929/fidelity-roles.webp") 0 0 / 300% 100% no-repeat; }
.role-actor:not(.role-person)::before { background-position: 50% 0; }
.role-provider::before { width: 112px; height: 112px; margin: 0; background-position: 100% 0; }
.role-actor h3, .role-provider h3 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.55; }
.role-actor p, .role-provider p { margin-top: 8px; font-size: var(--fs-s); }
.role-relationship { grid-area: rel; display: grid; gap: 14px; padding-top: 52px; }
.role-relationship p { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.role-relationship b { color: var(--node); font-size: var(--fs-l); font-weight: 400; }
.provider-link { grid-area: link; display: flex; flex-direction: column; align-items: center; padding: 20px 0 12px; font-size: var(--fs-xs); color: var(--muted); }
.provider-link strong { font-size: var(--fs-s); color: var(--ink); }
.provider-link span[aria-hidden] { color: var(--node); font-size: var(--fs-l); line-height: 1.2; }
.role-provider { grid-area: provider; display: flex; align-items: center; gap: 24px; padding: 24px 28px; border-radius: 16px; background: #fff; }
.roles .section-note { margin-top: 24px; padding: 18px 24px; border: 1.5px solid var(--green); border-radius: 12px; background: #fff; color: var(--ink); font-size: var(--fs-m); font-weight: 700; }

/* ---------- 06（道筋の本体） ---------- */
.journey { background: var(--green-deep); color: #fff; }
.journey::before { background: #d9b86b; }
.journey .eyebrow { border-color: #d9b86b; background: var(--green-deep); color: #f0d796; }
.journey h2, .journey h3 { color: #fff; }
.journey .section-note { display: inline-block; margin-top: 16px; padding: 6px 14px; border: 1px solid rgba(217, 184, 107, .6); border-radius: 999px; color: #f3e6c2; }
.annual-rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.annual-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 64px; height: 4px; border-radius: 2px; background: #d9b86b; }
.annual-rail li { position: relative; }
.annual-symbol { position: relative; width: 128px; height: 128px; border: 4px solid #d9b86b; background: #fff url("/assets/miqto-c-20260929/fidelity-annual.webp") 0 0 / 300% 200% no-repeat; }
.annual-symbol .pictogram { display: none; }
.annual-rail li:nth-child(2) .annual-symbol { background-position: 50% 0; }
.annual-rail li:nth-child(3) .annual-symbol { background-position: 100% 0; }
.annual-rail li:nth-child(4) .annual-symbol { background-position: 0 100%; }
.annual-rail li:nth-child(5) .annual-symbol { background-position: 50% 100%; }
.annual-order { margin-top: 16px; font-family: var(--font-serif); font-size: var(--fs-l); color: #f0d796; }
.annual-rail h3 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.5; }
.annual-rail li p:not(.annual-order) { margin-top: 6px; font-size: var(--fs-s); color: rgba(255, 255, 255, .86); }
.annual-return {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 0;
  padding: 36px 24px 14px;
  border: 2px dashed rgba(217, 184, 107, .8);
  border-top: 0;
  border-radius: 0 0 24px 24px;
}
.annual-return::before { content: ""; position: absolute; left: -7px; top: -4px; width: 12px; height: 12px; border-left: 2px solid #d9b86b; border-top: 2px solid #d9b86b; transform: rotate(45deg); }
.annual-return .pictogram { width: 28px; height: 28px; color: #d9b86b; }
.annual-return strong { color: #f0d796; }
.journey-contract {
  position: relative;
  margin-top: 24px;
  padding: 16px 24px;
  border-left: 4px solid #d9b86b;
  border-right: 4px solid #d9b86b;
  background: rgba(255, 255, 255, .08);
  font-size: var(--fs-m);
  font-weight: 700;
  text-align: center;
}
.journey .reading-supplement { margin-top: 20px; border-color: rgba(255, 255, 255, .2); }
.journey .reading-supplement > summary { color: #fff; }
.journey .section-action .button { background: #fff; color: var(--green); }

/* ---------- 07 ---------- */
.contract-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.contract-roles > div { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; background: #fff; }
.contract-roles .pictogram { flex: none; width: 36px; height: 36px; }
.contract-roles strong, .contract-roles span { display: block; }
.contract-roles strong { font-size: var(--fs-m); color: var(--ink); }
.contract-roles span { font-size: var(--fs-xs); color: var(--muted); }
.plan-role-note { margin-top: 10px; font-size: var(--fs-s); color: var(--muted); }
.corporate-plan { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "price inc" "terms terms"; gap: 24px 40px; margin-top: 32px; padding: 36px; border-radius: 16px; background: #fff; }
.price-table { grid-area: price; }
.plan-inclusions { grid-area: inc; }
.plan-terms { grid-area: terms; }
.plan-kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--gold-text); letter-spacing: 0; }
.price-table h3 { margin-top: 2px; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.5; }
.price-table dl { margin-top: 14px; border-top: 1px solid var(--line); }
.price-table dl div { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.price-table dt { font-size: var(--fs-m); font-weight: 700; }
.price-table dd { font-size: var(--fs-m); font-weight: 700; }
.price-period { margin-right: 6px; font-size: var(--fs-xs); color: var(--muted); }
.price-table dd strong { font-size: var(--fs-h3); color: var(--green); font-variant-numeric: tabular-nums; }
.price-table dd small { margin-left: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.price-table > p:last-child { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.plan-inclusions h4 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.5; color: var(--ink); }
.plan-inclusions ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; } /* r1: 2列だと1024〜1179pxで文字が1行2〜5字に潰れるため、全幅で1列にした */
.plan-inclusions li { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 10px; background: var(--paper); font-size: var(--fs-s); font-weight: 700; line-height: 1.55; }
.plan-inclusions li .pictogram { display: none; }
.plan-inclusions li::before { content: ""; flex: none; width: 72px; height: 54px; border-radius: 8px; background: #eee url("/assets/miqto-c-20260929/impact-meeting.webp") 50% 50% / cover no-repeat; }
.plan-inclusions li:nth-child(2)::before { background-image: url("/assets/miqto-c-20260929/impact-mail.webp"); }
.plan-inclusions li:nth-child(3)::before { background-image: url("/assets/miqto-c-20260929/impact-notebook.webp"); }
.plan-inclusions li:nth-child(4)::before { background-image: url("/assets/miqto-c-20260929/impact-chat.webp"); }
.plan-boundary { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--node); background: var(--paper); font-size: var(--fs-s); }
.plan-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-terms h5 { font-size: var(--fs-m); color: var(--ink); }
.plan-terms p { margin-top: 8px; font-size: var(--fs-s); }
.plan-terms strong { color: var(--green); }
.individual-plan { margin-top: 20px; padding: 28px 36px; border: 1px solid #e6e0d2; border-radius: 16px; }
.individual-plan > p:nth-child(2) { margin-top: 6px; }
.individual-plan strong { font-size: var(--fs-l); color: var(--green); }
.individual-plan-common { margin-top: 6px; font-size: var(--fs-s); color: var(--muted); }
.individual-plan .reading-supplement { margin-top: 14px; }

/* ---------- 08 ---------- */
.boundary { background: #fff; }
.boundary .eyebrow { background: #fff; }
.boundary-list { margin-top: 36px; border-bottom: 1px solid var(--line); }
.boundary-list article { display: grid; grid-template-columns: 72px 48px minmax(0, 1fr); padding: 24px 0; border-top: 1px solid var(--line); }
.boundary-list article::before { content: ""; width: 72px; height: 72px; background: url("/assets/miqto-c-20260929/fidelity-boundary.webp") 0 0 / 300% 100% no-repeat; }
.boundary-list article:nth-child(2)::before { background-position: 50% 0; }
.boundary-list article:nth-child(3)::before { background-position: 100% 0; }
.boundary-list article > span { padding: 4px 0 0 14px; font-family: var(--font-serif); font-size: var(--fs-l); color: var(--node); }
.boundary-list h3 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.55; }
.boundary-list p { margin-top: 6px; font-size: var(--fs-s); }
.boundary .reading-supplement { margin-top: 28px; border-bottom: 1px solid var(--line); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fit-grid article { padding: 20px 24px; border-radius: 12px; background: var(--paper); }
.fit-label { font-weight: 700; color: var(--green); }
.fit-grid li { position: relative; margin-top: 8px; padding-left: 18px; font-size: var(--fs-s); }
.fit-grid li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.fit-grid article + article li::before { border-radius: 0; height: 2px; top: .9em; background: var(--muted); }

/* ---------- 09（道筋の終点） ---------- */
.contact { padding-top: 384px; }
.contact::after { content: ""; position: absolute; top: 0; left: calc(var(--content-left) + var(--shift)); right: var(--content-left); height: 320px; border-radius: 0 0 16px 16px; background: #d6ecfe url("/assets/miqto-c-20260929/fidelity-contact.webp") 50% 55% / cover no-repeat; }
.contact::before { top: 0; height: 392px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: end; }
.contact-grid > div:first-child > p:last-child { margin-top: 20px; font-size: var(--fs-s); }
.contact-actions { display: grid; gap: 12px; }
.contact-option > summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 12px 56px 12px 24px; border: 1.5px solid var(--green); border-radius: 8px; background: #fff; color: var(--green); font-size: var(--fs-m); font-weight: 700; }
.contact-option:first-child > summary { background: var(--green); color: #fff; }
.contact-option > summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.contact-option[open] > summary::after { margin-top: -2px; transform: rotate(225deg); }
.contact-option > p { padding: 12px 4px 4px; font-size: var(--fs-s); color: var(--muted); }

/* =========================================================
   1023px以下: 線は左端から15pxを通し、本文は36pxから（線と本文の間を21px空ける）。番号は見出しの上の節点にする
   ========================================================= */
@media (max-width: 1023px) {
  :root { --rail-x: 19px; --shift: 12px; }
  * { scroll-margin-top: 72px; }
  .site-header p { display: none; }
  .header-cta { min-height: 40px; padding: 0 14px; font-size: var(--fs-xs); gap: 8px; letter-spacing: 0; }
  .chapter, .contact { padding: 60px 0; }
  .chapter .eyebrow, .contact .eyebrow { position: relative; left: auto; width: 30px; height: 30px; margin: 0 0 12px -32px; }
  .section-note { margin-top: 20px; }

  .hero-grid { padding-top: 28px; padding-bottom: 28px; }
  .hero-copy { max-width: none; }
  .hero h1 { margin-top: 10px; }
  .hero-benefit { margin-top: 16px; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .button { width: 100%; min-width: 0; }
  .hero-photo { position: relative; display: block; right: auto; top: auto; bottom: auto; width: auto; height: 200px; margin: 0 0 0 36px; border-radius: 16px 0 0 16px; }
  .hero::after { height: 100%; top: 0; background: linear-gradient(180deg, rgba(205, 184, 138, 0) 55%, var(--rail) 100%); z-index: 0; }

  .purpose-opening::after { height: 220px; margin-top: 24px; border-radius: 12px; background-position: 74% 100%; }
  .purpose-moments { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
  .purpose-moments li { padding: 10px 0; }
  .purpose-bridge { margin-top: 40px; }
  .scene-bridge { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .scene-bridge::before { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .scene-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .scene-step .pictogram { grid-row: 1 / span 2; width: 64px; height: 64px; padding: 13px; }
  .scene-step h3 { margin-top: 6px; }
  .flow-connector { align-items: flex-start; padding: 10px 0 10px 78px; }

  .question-path { margin-top: 28px; }
  .question-path li { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 0; }
  .decision-check { padding: 28px 16px; }
  .check-progress::after { width: 120px; background-size: 17px 8px, 100% 2px; }

  .outcome-route { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; padding: 14px 14px 260px; border-radius: 12px; background-image: url("/assets/miqto-c-20260929/fidelity-table-mobile.webp"); background-position: 50% 100%; }
  .outcome-row { padding: 16px 18px; }

  .proof-stages { grid-template-columns: minmax(0, 1fr); }
  .proof-stages::before { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; }
  .proof-stage { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .stage-role { grid-column: 2; grid-row: 1; }
  .stage-art .pictogram { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; margin-top: 0; padding: 13px; }
  .proof-stage h3 { grid-column: 2; grid-row: 2; margin-top: 2px; }
  .stage-art::after { grid-column: 2; grid-row: 3; margin-top: 12px; border-radius: 10px; }
  .input-stack, .reason-links, .use-pairs { grid-column: 2; }
  .proof-transfer { align-items: flex-start; padding: 12px 0 12px 78px; }

  .role-flow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "person" "rel" "doctor" "link" "provider"; margin-top: 28px; }
  .role-actor::before { width: 112px; height: 112px; }
  .role-relationship { padding: 14px 0; gap: 4px; }
  .role-relationship b { transform: rotate(90deg); }
  .provider-link { padding: 14px 0 10px; }
  .role-provider { flex-direction: column; gap: 12px; padding: 20px; text-align: center; }
  .role-provider::before { width: 96px; height: 96px; }
  .roles .section-note { font-size: var(--fs-s); }

  .journey .section-note { border-radius: 10px; }
  .annual-rail { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .annual-rail::before { left: 38px; right: auto; top: 40px; bottom: 40px; width: 4px; height: auto; }
  .annual-rail li { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; padding: 10px 0; }
  .annual-symbol { grid-row: 1 / span 3; width: 80px; height: 80px; border-width: 3px; }
  .annual-order { margin-top: 0; font-size: var(--fs-s); }
  .annual-return { margin-top: 16px; padding: 16px; border: 2px dashed rgba(217, 184, 107, .8); border-radius: 16px; justify-content: flex-start; }
  .annual-return::before { display: none; }
  .journey-contract { padding: 14px 16px; font-size: var(--fs-s); text-align: left; }

  .contract-roles { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 28px; }
  .corporate-plan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "price" "inc" "terms"; gap: 28px; margin-top: 24px; padding: 20px; }
  .price-table dl div { grid-template-columns: 84px minmax(0, 1fr); }
  .plan-inclusions ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plan-inclusions li::before { width: 88px; height: 66px; }
  .plan-terms { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .individual-plan { padding: 20px; }

  .boundary-list { margin-top: 28px; }
  .boundary-list article { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .boundary-list article::before { grid-row: 1 / span 2; width: 56px; height: 56px; }
  .boundary-list article > span { padding: 0; font-size: var(--fs-s); }
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .fit-grid article { padding: 16px; }

  .contact { padding-top: 240px; padding-bottom: 60px; }
  .contact::after { left: 36px; right: 0; height: 200px; border-radius: 0 0 0 16px; }
  .contact::before { height: 244px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact-option > summary { min-height: 60px; padding-left: 20px; }
}
@media (max-width: 699px) {
  .site-header { gap: 10px; }
  .brand-logo { height: 22px; }
  .header-cta { padding: 0 12px; gap: 0; letter-spacing: 0; }
  .header-cta::after { display: none; }
}
@media (max-width: 374px) {
  .site-header { padding: 0 16px; }
}

/* Company-site return links stay available independently of the consultation CTA. */
.company-home-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
/* The return control belongs to the site navigation, not the page copy. */
.site-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 35, 30, .04);
}
.site-header .header-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: none;
}
.site-header .header-home-link {
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #b4c6ba;
  border-radius: 6px;
  background: #fff;
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-decoration: none;
}
.site-header .header-home-link:hover {
  border-color: var(--green);
  background: var(--sage);
}
.site-header .header-return-icon { flex: none; }
.site-header .header-cta { min-height: 44px; border-radius: 6px; }
.site-header .header-cta-copy { display: inline-flex; gap: 0; }
.site-header .header-cta-mobile-copy { display: none; }
html:not(.show-header-cta) .site-header .header-cta { display: none; }
@media (max-width: 980px) {
  .site-header .header-navigation { gap: 8px; }
  .site-header .header-return-company { display: none; }
  .site-header .header-cta { gap: 0; padding: 0 12px; font-size: 14px; }
  .site-header .header-cta::after { display: none; }
  .site-header .header-cta-copy { display: none; }
  .site-header .header-cta-mobile-copy { display: inline; }
}
@media (max-width: 699px) {
  .site-header { gap: 8px; padding: 0 16px; }
  .site-header .brand-logo { width: 92px; height: auto; }
  .site-header .header-home-link { gap: 6px; padding: 0 10px; }
  .site-header .header-return-icon { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
  .site-header { gap: 6px; padding: 0 12px; }
  .site-header .brand-logo { width: 80px; }
  .site-header .header-navigation { gap: 6px; }
  .site-header .header-home-link { padding: 0 8px; }
  .site-header .header-cta { padding: 0 10px; }
}

/* Keep the footer identity and navigation separate from the service content. */
.site-footer {
  padding: 40px 0 32px;
  background: #fff;
}
.site-footer .footer-main { align-items: center; gap: 24px; }
.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
}
.site-footer .footer-logo { display: block; width: 160px; height: auto; }
.site-footer .footer-company { margin: 0; font-size: var(--fs-xs); line-height: 1.7; }
.site-footer .footer-navigation {
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.site-footer .footer-home-link {
  flex: none;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
}
.site-footer .footer-home-link:hover { border-color: var(--green); background: var(--sage); }
.site-footer .footer-document-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-footer .footer-document-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.site-footer .footer-document-links a:hover { color: var(--green); text-decoration-color: currentColor; }
@media (max-width: 699px) {
  .site-footer { padding: 32px 0; }
  .site-footer .footer-main { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer .footer-logo { width: 144px; }
  .site-footer .footer-navigation { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 20px; }
  .site-footer .footer-document-links { width: 100%; justify-content: flex-start; }
}