@charset "UTF-8";
/* ==========================================================================
   案B3「静かな専門性と、生活のそばにいる安心感」
   photoB2_save1 を元に、墨・生成り・赤茶・グレージュの4色で組み直す。
   base の style.css を読んだあとに上書きする（style.css は変更しない）。
   設計: scratchpad/design_spec_photoB3.md（§C トークン／§F FV／§G ヘッダー・固定CTA／§H 動き）
   フェーズ1: トークン・FV・ヘッダー・目次・進捗線・固定バー・動きの土台・要確認の退避
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（§C）
   旧 → 新 の対応（旧名は互換のため残す）:
     --c-shu        → --c-terra（線・塗り）／文字は --c-terra-deep（生成り系）・--c-terra-on-dark（墨）
     --c-text #1C1C1A → #26231F（真っ黒でない温かい濃色）
     --c-text-muted #45423D → #5C5750
     --c-border rgba(28,28,26,.2) → #D5CFC4（実色）
     --c-border-strong rgba(28,28,26,.5) → --c-border-ui #7E776A
     rgba(239,235,227,.72〜.85)（墨上の補足）→ --c-text-on-dark-muted #C1BDB7
     rgba(239,235,227,.5〜.6)（墨上の枠）→ --c-border-on-dark #8F887A
     --lh-body 2 → 1.8 ／ --fs-h1 34/50 → FV 専用 26/36/38 ／ --fs-h2 25/30 → 26/34
     --sec-pad-y 64/104 → 64/112 ／ --wide 960 → 1040
   廃止: --f-brush（Yuji Boku。屋号は明朝へ）、--noise（粒子。プレースホルダー写真を退避したため不要）
   -------------------------------------------------------------------------- */
:root {
  /* 色: 基本4色（墨・生成り・赤茶・グレージュ） */
  --c-sumi:           #1C1C1A;
  --c-charcoal:       #2A2825;
  --c-kinari:         #EFEBE3;
  --c-kinari-light:   #F7F4EE;
  --c-greige:         #E8E3DA;
  --c-terra:          #B8432A;   /* CTA の地・短い罫線・装飾の数字（文字には使わない） */
  --c-terra-deep:     #9E3A23;   /* 生成り系の地に置く赤茶の文字（5.3〜6.2:1） */
  --c-terra-hover:    #983621;
  --c-terra-on-dark:  #DB7A61;   /* 墨の上の赤茶の文字・線（5.66:1） */
  --c-shu:            var(--c-terra);   /* 旧名（互換） */

  /* 文字 */
  --c-text:               #26231F;
  --c-text-muted:         #5C5750;
  --c-text-on-dark:       var(--c-kinari);
  --c-text-on-dark-muted: #C1BDB7;

  /* 罫線・UI */
  --c-border:         #D5CFC4;
  --c-border-ui:      #7E776A;
  --c-border-on-dark: #8F887A;
  --c-ghost:          #E4DFD5;
  --c-ghost-on-dark:  #2B2A27;
  --c-focus:          var(--c-sumi);
  --c-focus-on-dark:  var(--c-kinari);

  /* 基底 style.css の変数（既存セレクタが参照しているため残す） */
  --c-bg:            var(--c-kinari);
  --c-bg-alt:        var(--c-kinari);
  --c-surface:       var(--c-kinari);
  --c-primary:       var(--c-sumi);
  --c-primary-dark:  var(--c-sumi);
  --c-primary-pale:  var(--c-greige);
  --c-accent:        var(--c-terra);
  --c-accent-hover:  var(--c-terra-hover);
  --c-on-accent:     #FFFFFF;
  --c-border-strong: var(--c-border-ui);
  --c-error:         var(--c-terra-deep);

  /* フォント */
  --f-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* 文字サイズ（モバイル／768px 以上は下の @media） */
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-lead:    19px;
  --fs-h1:      26px;
  --fs-h1-a:    17px;
  --fs-h2:      26px;
  --fs-h3:      19px;
  --fs-num:     40px;
  --fs-ghost:   120px;
  --fs-eyebrow: 13px;
  --lh-body:    1.8;
  --lh-heading: 1.45;
  --lh-lead:    1.75;

  /* 余白（8px 基準） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;
  --sec-pad-y:    var(--sp-8);
  --sec-pad-y-lg: var(--sp-9);
  --sec-pad-y-sm: var(--sp-7);
  --gutter:  20px;
  --measure: 720px;
  --wide:    1040px;
  --fv-wide: 1280px;

  /* 角丸・罫線・影・寸法・重なり */
  --radius: 0; --radius-lg: 0;
  --shadow-sm: none; --shadow-md: none;
  --rule:        1px solid var(--c-border);
  --rule-strong: 1px solid var(--c-sumi);
  --accent-rule: 2px;
  --tap:      48px;
  --header-h: 56px;
  --bar-h:    56px;
  --z-skip: 100; --z-header: 60; --z-progress: 61; --z-bar: 50; --z-ghost: 0; --z-content: 1;

  /* 動き */
  --ease: cubic-bezier(.2, .6, .2, 1);
}
@media (min-width: 768px) {
  :root {
    --fs-body: 18px; --fs-lead: 21px; --fs-h1: 36px; --fs-h1-a: 20px;
    --fs-h2: 34px; --fs-h3: 21px; --fs-num: 48px; --fs-ghost: 180px;
    --sec-pad-y: 112px; --sec-pad-y-lg: 160px; --sec-pad-y-sm: 64px;
    --gutter: 32px; --header-h: 64px;
  }
}
@media (min-width: 1200px) { :root { --fs-h1: 38px; } }

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
/* アンカー移動で見出しが固定ヘッダーの裏に入らないように。
   scroll-padding と scroll-margin は足し算になるため、ここでは scroll-margin だけを使う */
html { scroll-padding-top: 0; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

body { background: var(--c-bg); color: var(--c-text); font-weight: 400; }
strong, b { font-weight: 700; }

h1, h2, h3, h4 {
  font-feature-settings: "palt";
  letter-spacing: .06em;
  color: var(--c-text);
  font-weight: 500;
}
/* H2 は各セクションの .sec-head 内に置く（番号・英字ラベルは .sec-head__eyebrow の実要素。読み上げ対象外） */
h2 { margin: 0; }
h3 { margin-top: 2em; font-weight: 500; }

a {
  color: var(--c-text);
  text-decoration-color: var(--c-border-ui);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--c-terra-deep); text-decoration-color: var(--c-terra); }

.section { border-top: var(--rule); }
.section--alt, .section--pale { background: transparent; }

/* フォーカス表示（§J）。墨の帯の中では生成りの線 */
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 0; }
.site-header :focus-visible, .fv :focus-visible, #contact :focus-visible,
.site-footer :focus-visible, .mobile-bar :focus-visible { outline-color: var(--c-focus-on-dark); }
.btn:focus-visible { outline-offset: 2px; }

/* スキップリンク: 固定ヘッダーの下に出す */
.skip-link {
  position: fixed; z-index: var(--z-skip);
  background: var(--c-terra); color: #fff;
  font-weight: 700; padding: 12px 18px; min-height: var(--tap);
}
.skip-link:focus { left: 8px; top: calc(var(--header-h) + 8px); color: #fff; }

/* --------------------------------------------------------------------------
   3. ヘッダー（§G-1）: 固定・コンパクト。屋号は明朝 500
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  background: var(--c-sumi); color: var(--c-kinari);
  border-bottom: 0;
}
.site-header__inner {
  height: 100%;
  flex-wrap: nowrap;
  gap: 12px;
  padding-block: 0;
}
.site-header__brand {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-right: auto;
  font-family: var(--f-serif); font-weight: 500; font-size: 17px; line-height: 1.3;
  letter-spacing: .06em; color: var(--c-kinari); text-decoration: none; white-space: nowrap;
}
.site-header__brand:hover { color: var(--c-kinari); text-decoration: underline; text-decoration-color: var(--c-border-on-dark); }
.site-header__now { display: none; margin: 0; }
.site-header__pro { display: none; }

@media (min-width: 768px) { .site-header__brand { font-size: 19px; } }
@media (min-width: 1024px) {
  .site-header__inner { gap: 24px; }
  .site-header__brand { margin-right: 0; }
  .site-header__now {
    display: block; flex: 1 1 auto; min-width: 0;
    font-size: var(--fs-small); line-height: 1.4; color: var(--c-text-on-dark-muted);
    letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .site-header__pro {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0; border: 0; border-radius: 0; background: transparent;
    font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-kinari);
    text-decoration: underline; text-decoration-color: var(--c-border-on-dark); white-space: nowrap;
  }
  .site-header__pro:hover { background: transparent; color: var(--c-kinari); text-decoration-color: var(--c-terra-on-dark); }
}

/* 進捗線（§G-2）: 対応ブラウザだけ。装飾なので非対応では出ない */
.site-header__progress {
  position: absolute; left: 0; top: 0; z-index: var(--z-progress);
  width: 100%; height: 2px; background: var(--c-terra);
  transform-origin: left; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .site-header__progress { animation: progress-grow linear both; animation-timeline: scroll(root); }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 目次（details/summary。JS なしで開閉） */
.nav { flex: none; }
.nav__btn {
  list-style: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); min-width: var(--tap); padding: 0 14px;
  border: 1px solid var(--c-border-on-dark);
  color: var(--c-kinari); cursor: pointer; user-select: none;
  font-family: var(--f-serif); font-size: var(--fs-small); font-weight: 500; letter-spacing: .12em; line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.nav__btn::-webkit-details-marker { display: none; }
.nav__btn::marker { content: ""; }
.nav__btn:hover { background: var(--c-charcoal); }
.nav__btn-icon { position: relative; display: block; width: 18px; height: 9px; }
.nav__btn-icon::before, .nav__btn-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.nav__btn-icon::before { top: 0; }
.nav__btn-icon::after  { top: 8px; }
.nav[open] .nav__btn-icon::before { top: 4px; transform: rotate(45deg); }
.nav[open] .nav__btn-icon::after  { top: 4px; transform: rotate(-45deg); }

.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-sumi); color: var(--c-kinari);
  border-top: 1px solid var(--c-border-on-dark);
  padding: 8px var(--gutter) 24px;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow: auto; overscroll-behavior: contain;
}
.nav__list { list-style: none; margin: 0 0 16px; padding: 0; }
.nav__list li { margin: 0; }
.nav__list a {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 10px 0;
  border-bottom: 1px solid rgba(239, 235, 227, .12);
  font-family: var(--f-serif); font-size: var(--fs-body); line-height: 1.5; letter-spacing: .04em;
  color: var(--c-kinari); text-decoration: none;
}
.nav__list a::before {
  content: ""; flex: none; width: 14px; height: 1px; background: var(--c-border-on-dark);
  transition: width .2s var(--ease), background-color .2s ease;
}
.nav__list a:hover { color: var(--c-kinari); text-decoration: underline; text-decoration-color: var(--c-terra-on-dark); }
.nav__list a:hover::before { width: 22px; }
/* 現在地: 線の長さと色で示す（読み上げは aria-current） */
.nav__list a[aria-current]::before { width: 22px; height: 2px; background: var(--c-terra-on-dark); }
.nav__pro {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 10px 16px;
  border: 1px solid var(--c-border-on-dark);
  font-size: var(--fs-small); color: var(--c-kinari); text-decoration: none; text-align: center;
}
.nav__pro:hover { background: var(--c-kinari); color: var(--c-sumi); }
/* 1200px 以上はヘッダーの左右端を FV の文字列とそろえる（FV は --fv-wide で組むため） */
@media (min-width: 1200px) { .site-header__inner { max-width: var(--fv-wide); } }
@media (min-width: 1024px) {
  .nav__panel {
    left: auto; width: 360px;
    right: calc(max(0px, (100% - var(--wide)) / 2) + var(--gutter));
    border: 1px solid var(--c-border-on-dark); border-top-color: var(--c-border-on-dark);
    padding: 8px 24px 24px;
  }
}
@media (min-width: 1200px) { .nav__panel { right: calc(max(0px, (100% - var(--fv-wide)) / 2) + var(--gutter)); } }

/* --------------------------------------------------------------------------
   4. ファーストビュー（§F）
   スマホ／タブレット: 上に写真帯、下に墨の上の文字
   PC（1200px〜）: 右 54% に横顔、左に文字。顔は左を向き、視線が文字へ向かう
   -------------------------------------------------------------------------- */
.fv {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-sumi); color: var(--c-kinari);
  padding-block: 0 56px;
  border-top: 0;
}
.fv__photo { position: relative; margin: 0 0 24px; z-index: 0; }
.fv__photo img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 18%;
  background: #3A3A37;
  filter: grayscale(.35) brightness(.94);
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}
.fv__wrap { position: relative; z-index: 2; }

/* H1: 文言はユーザー指定のまま。.phr は文節単位の改行制御だけ（強調・色替えなし） */
.fv h1.fv__lead {
  max-width: none; margin: 0 0 var(--sp-6);
  font-family: var(--f-serif); font-weight: 500; color: var(--c-kinari);
  font-size: var(--fs-h1); line-height: 1.55; letter-spacing: .02em;
  word-break: auto-phrase; text-wrap: pretty;
  /* palt（字詰め）を外して全角の字幅を一定にする: Web フォント読み込みの前後で改行位置が変わらず、レイアウトがずれない（CLS 対策） */
  font-feature-settings: normal;
}
.fv__lead-a, .fv__lead-b { display: block; }
.fv__lead-a {
  font-size: var(--fs-h1-a); line-height: 1.7; letter-spacing: .04em;
  margin-bottom: .9em; color: var(--c-text-on-dark-muted);
}
.fv__lead-b { max-width: 17em; }
.phr { display: inline-block; }

/* 4点（対象／内容／担当／エリア） */
.fv__facts {
  display: grid; grid-template-columns: 4.5em 1fr; column-gap: 12px; row-gap: 6px;
  max-width: 34em; margin: 0 0 var(--sp-6); padding-top: 16px;
  border-top: 1px solid var(--c-border-on-dark);
  font-size: var(--fs-small); line-height: 1.7;
}
.fv__facts > div { display: contents; }
.fv__facts dt { font-family: var(--f-serif); letter-spacing: .1em; color: var(--c-text-on-dark-muted); }
.fv__facts dd { margin: 0; color: var(--c-kinari); }

.fv .cta-group { margin: 0 0 var(--sp-4); max-width: 34em; }
.fv__terms { margin: 0 0 var(--sp-2); font-size: var(--fs-small); line-height: 1.8; color: var(--c-kinari); }
.fv__terms > span { display: inline-block; margin-right: 1.2em; }
.fv__terms strong { font-weight: 700; }
.fv .cta-note { margin: 0; max-width: 34em; color: var(--c-text-on-dark-muted); }

/* スクロールを促すサイン（PC のみ。3回だけ動いて止まる） */
.fv__scroll { display: none; }

@media (min-width: 768px) and (max-width: 1199px) {
  .fv { padding-bottom: 88px; }
  .fv__photo { margin-bottom: 40px; }
  .fv__photo img { aspect-ratio: 16 / 9; object-position: 45% 22%; }
}

@media (min-width: 1200px) {
  .fv {
    display: flex; align-items: center;
    min-height: min(calc(100svh - var(--header-h)), 860px);
    padding-block: 96px 88px;
  }
  .fv__photo { position: absolute; inset: 0 0 0 auto; width: 54%; margin: 0; }
  .fv__photo img {
    height: 100%; aspect-ratio: auto;
    object-position: 40% 25%;
    filter: grayscale(.35) brightness(.92) contrast(1.02);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-composite: intersect;
  }
  /* 文字の列の下地の保険（写真の右側＝顔と肩には掛けない） */
  .fv::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right,
      rgba(28, 28, 26, .94) 0%, rgba(28, 28, 26, .94) 46%,
      rgba(28, 28, 26, .55) 58%, rgba(28, 28, 26, 0) 70%);
  }
  .fv__wrap { max-width: var(--fv-wide); width: 100%; }
  /* 1行目「経験豊富でプロへの技術指導を行う」(16字)が入る幅。顔(左端≈画面の69%)には掛からない */
  .fv__text { width: min(56%, 680px); }
  .fv__scroll {
    display: flex; justify-content: center;
    position: absolute; left: 50%; bottom: 12px; z-index: 2;
    width: 44px; height: 60px; padding: 10px 0; margin-left: -22px;
  }
  .fv__scroll span {
    display: block; width: 1px; height: 40px; background: var(--c-border-on-dark);
    transform-origin: top; animation: fv-drift 2.4s ease-in-out 1.2s 3 both;
  }
  .fv__scroll:hover span { background: var(--c-kinari); }
}

/* FV の出現（CSS だけ。JS なしでも動き、最後は必ず表示状態で止まる） */
@keyframes fv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fv-drift { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.fv__photo img { animation: fv-fade .9s ease-out both; }
.fv__lead-a  { animation: fv-in .6s var(--ease) both; }
.fv__lead-b  { animation: fv-in .6s var(--ease) 80ms both; }
.fv__facts   { animation: fv-in .6s var(--ease) 160ms both; }
.fv .cta-group, .fv__terms, .fv .cta-note { animation: fv-in .6s var(--ease) 240ms both; }

/* --------------------------------------------------------------------------
   5. ボタン: 角なし。主は赤茶の塗り、副は線
   -------------------------------------------------------------------------- */
.btn { border-radius: 0; font-weight: 700; letter-spacing: .04em; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn--primary { background: var(--c-terra); border-color: var(--c-terra); color: #fff; }
.btn--primary:hover { background: var(--c-terra-hover); border-color: var(--c-terra-hover); color: #fff; }
.btn--secondary { background: transparent; border: 1px solid var(--c-border-ui); color: var(--c-text); padding: 14px 23px; }
.btn--secondary:hover { background: var(--c-sumi); color: var(--c-kinari); border-color: var(--c-sumi); }
.fv .btn--secondary, #contact .btn--secondary, .mobile-bar .btn--secondary { border-color: var(--c-border-on-dark); color: var(--c-kinari); background: transparent; }
.fv .btn--secondary:hover, #contact .btn--secondary:hover, .mobile-bar .btn--secondary:hover { background: var(--c-kinari); color: var(--c-sumi); border-color: var(--c-kinari); }
.cta-group { margin-block: 2.2em 1em; }

/* --------------------------------------------------------------------------
   6. 本文の部品（注意書き・語り・手順・定義リスト・問い合わせ・フッター）
   -------------------------------------------------------------------------- */
/* 注意書き（行わないこと／送迎なし）: 墨の左線1本。赤茶の点は付けない（警告色を乱用しない）。
   安全情報なので本文と同じ大きさで出す（§E-0） */
.callout {
  background: transparent; border: 0; border-left: 3px solid var(--c-sumi);
  border-radius: 0; padding: 4px 0 4px 20px; margin-block: var(--sp-7);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.callout b {
  font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 2px);
  color: var(--c-text); letter-spacing: .04em; margin-bottom: .4em;
}

/* 語り（代表の言葉）: 引用装飾をせず、余白の広いエディトリアル段落として置く（§E-08） */
.story { max-width: 36em; background: transparent; border: 0; border-top: var(--rule-strong); border-radius: 0; padding: 28px 0 8px; margin-block: var(--sp-7); line-height: var(--lh-body); }
.story > b { display: block; margin-bottom: .8em; font-family: var(--f-serif); color: var(--c-text); font-weight: 500; font-size: calc(var(--fs-body) + 4px); line-height: 1.55; letter-spacing: .06em; }

/* 手順: 明朝の数字＋赤茶の短い線 */
.steps > li { padding-left: 60px; margin-bottom: 2em; }
.steps > li::before {
  content: "0" counter(step);
  width: auto; height: auto; border-radius: 0; background: transparent;
  color: var(--c-text); font-family: var(--f-serif); font-size: 24px; font-weight: 400; letter-spacing: .04em;
  line-height: 1; top: 3px; display: block;
}
.steps > li::after { content: ""; position: absolute; left: 0; top: 40px; width: 14px; height: 1px; background: var(--c-terra); }
.steps__title { font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 2px); letter-spacing: .04em; }


.badge-jihi {
  background: transparent; border: 1px solid var(--c-border-on-dark); border-left: 3px solid var(--c-terra);
  border-radius: 0; padding: 14px 18px; color: var(--c-kinari); max-width: 40em;
}
.badge-jihi b { color: var(--c-kinari); font-family: var(--f-serif); font-weight: 500; }

/* フッター（屋号は明朝。筆文字は廃止） */
.site-footer { background: var(--c-sumi); color: var(--c-text-on-dark-muted); border-top: 1px solid rgba(239, 235, 227, .18); padding-bottom: 40px; }
.site-footer a { color: var(--c-kinari); text-decoration-color: var(--c-border-on-dark); }
.site-footer a:hover { color: var(--c-kinari); text-decoration-color: var(--c-terra-on-dark); }
.site-footer .muted { color: var(--c-text-on-dark-muted); }
.site-footer__brand { color: var(--c-kinari); font-family: var(--f-serif); font-weight: 500; font-size: 24px; letter-spacing: .06em; }
.site-footer__jihi { border: 0; border-top: 1px solid rgba(239, 235, 227, .3); border-bottom: 1px solid rgba(239, 235, 227, .3); border-radius: 0; background: transparent; padding: 14px 0; color: var(--c-kinari); }
.site-footer__meta { color: var(--c-text-on-dark-muted); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   7. 写真（実写のみ。AI 仮画像・撮影予定の枠は §I で退避済み）
   -------------------------------------------------------------------------- */
.photo { margin: 2.4em 0; }
.photo__real { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #3A3A37; }
.photo--real .photo__real { filter: grayscale(.25) sepia(.04) contrast(1.02); }
[data-cut="04"] .photo__real { object-position: 55% 55%; }
@media (min-width: 1040px) {
  .photo { margin: 3em calc(-1 * (var(--wide) - var(--measure)) / 2); }   /* 本文幅より少し張り出す */
}

/* 他の訪問リハビリとの違い（その1〜その3） */
.diff-list { list-style: none; margin: 1.8em 0 1.6em; padding: 0; border-top: var(--rule-strong); }
.diff-list > li { padding: 26px 0 22px; border-bottom: var(--rule); }
.diff-list__no {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-serif); font-size: 18px; letter-spacing: .12em; color: var(--c-text); line-height: 1;
}
.diff-list__no::after { content: ""; width: 28px; height: var(--accent-rule); background: var(--c-terra); }
.diff-list__title { margin: .7em 0 .6em; font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 5px); line-height: 1.6; letter-spacing: .05em; }
.diff-list p { margin-block: .5em 0; }

/* --------------------------------------------------------------------------
   8. スマホ固定バー（§G-5）: 本体 56px＋safe-area。本文は body の下余白で逃がす
   -------------------------------------------------------------------------- */
.mobile-bar {
  z-index: var(--z-bar);
  align-items: stretch;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 5px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--c-sumi);
  border-top: 1px solid var(--c-border-on-dark);
  box-shadow: none;
}
.mobile-bar .btn { flex: 1 1 0; min-height: 44px; font-size: var(--fs-small); padding: 8px; }
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   8b. セクション共通（フェーズ2・§E-0）
   帯: .sec（生成り）／.sec--light（温かい白）／.sec--info（グレージュ）
   余白: 標準 64/112 ／ .sec--lg 96/160
   PC（1024px〜）: 左列に番号と英字ラベル（追従）、右列に見出しと本文（§B-2 の非対称）
   -------------------------------------------------------------------------- */
.sec { position: relative; isolation: isolate; border-top: 0; }
.sec--rule  { border-top: var(--rule); }
.sec--light { background: var(--c-kinari-light); }
.sec--info  { background: var(--c-greige); }
.sec--lg    { padding-block: var(--sec-pad-y-lg); }
.sec__grid  { position: relative; z-index: var(--z-content); }
.sec-body   { min-width: 0; }
.sec-body > :last-child { margin-bottom: 0; }

.sec-head { margin-bottom: var(--sp-6); }
.sec-head__eyebrow {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 var(--sp-3);
  font-family: var(--f-serif); font-size: var(--fs-eyebrow); line-height: 1.4; letter-spacing: .2em;
  color: var(--c-text-muted);
}
.sec-head__no { font-size: 20px; letter-spacing: .06em; color: var(--c-terra-deep); }
.sec-head__en { text-transform: uppercase; }
.sec-head h2 {
  margin: 0; padding-top: 0;
  font-size: var(--fs-h2); line-height: var(--lh-heading);
  text-wrap: balance; word-break: auto-phrase;
}

@media (min-width: 1024px) {
  .sec__grid {
    display: grid; align-items: start;
    grid-template-columns: 200px minmax(0, var(--measure));
    grid-template-rows: auto 1fr;
    column-gap: 56px;
  }
  .sec-head { display: contents; }
  .sec-head__eyebrow {
    grid-column: 1; grid-row: 1 / span 2;
    position: sticky; top: calc(var(--header-h) + 24px);
    flex-direction: column; gap: 6px; margin: 0; padding-top: 6px;
  }
  .sec-head__no { font-size: 32px; line-height: 1; }
  .sec-head h2 { grid-column: 2; grid-row: 1; margin-bottom: var(--sp-7); }
  .sec-body { grid-column: 2; grid-row: 2; }
}

/* 背景の大きな薄い番号（装飾・aria-hidden）。本文列の外側の余白に収まる幅（1280px〜）でだけ出す */
.sec__ghost { display: none; }
@media (min-width: 1280px) {
  .sec__ghost {
    display: block; position: absolute; right: 16px; top: var(--sec-pad-y); z-index: var(--z-ghost);
    font-family: var(--f-serif); font-weight: 400; line-height: 1; letter-spacing: -.02em;
    font-size: clamp(96px, calc((100vw - var(--wide)) / 2.3), 180px);
    color: var(--c-ghost); user-select: none; pointer-events: none;
  }
  .sec--lg .sec__ghost { top: var(--sec-pad-y-lg); }
  .sec--light .sec__ghost { color: #ECE7DE; }   /* 温かい白の上 1.12:1（装飾） */
  .sec--info .sec__ghost { color: #DDD7CC; }    /* グレージュの上 1.12:1（装飾） */
}

/* 要約（各セクション冒頭の1〜2行） */
.sec-summary {
  max-width: 30em; margin: 0 0 var(--sp-7);
  font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-lead);
  letter-spacing: .02em; color: var(--c-text);
}
.sec-summary::before {
  content: ""; display: block; width: 28px; height: var(--accent-rule);
  margin-bottom: var(--sp-4); background: var(--c-terra); transform-origin: left;
}
.sec-summary--wide { max-width: 34em; }
/* 要約の2文目（外出訓練の位置づけ）は本文書体の太字で区別する（明朝 700 は読み込まない） */
.sec-summary strong {
  display: block; margin-top: .6em;
  font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-body); letter-spacing: .02em;
}

/* セクション内の小見出し・段落 */
.sec .sub-h { margin: var(--sp-7) 0 var(--sp-4); font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.55; }
.sec .note { margin-top: var(--sp-6); }
.text-link { margin-top: var(--sp-4); }
/* 単独で置くテキストリンクは 44px 以上のタップ領域を取る（文中のリンクは対象外） */
.text-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* 開閉（details.more）: 補足の長文だけを入れる。閉じていても DOM には残る */
.more { margin-block: var(--sp-6); }
.more__btn {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap); padding: 10px 0;
  border-top: var(--rule); border-bottom: var(--rule);
  font-family: var(--f-sans); font-weight: 500; font-size: var(--fs-body); line-height: 1.5;
  color: var(--c-text); cursor: pointer;
  transition: color .15s ease;
}
.more__btn::-webkit-details-marker { display: none; }
.more__btn::marker { content: ""; }
/* ＋（閉）／−（開）。2本線の CSS 図形 */
.more__btn::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-right: 4px;
  background:
    linear-gradient(var(--c-border-ui), var(--c-border-ui)) center / 16px 2px no-repeat,
    linear-gradient(var(--c-border-ui), var(--c-border-ui)) center / 2px 16px no-repeat;
  transition: transform .2s var(--ease);
}
.more[open] > .more__btn::after {
  background: linear-gradient(var(--c-border-ui), var(--c-border-ui)) center / 16px 2px no-repeat;
  transform: rotate(180deg);
}
.more__btn:hover { color: var(--c-terra-deep); }
.more__body { padding-top: var(--sp-5); }
.more__body > .sub-h:first-child { margin-top: 0; }

/* 写真（本文中）。PC では本文列から少し張り出す */
.sec .photo { margin: var(--sp-7) 0; }
[data-cut="04"] .photo__real { aspect-ratio: 3 / 2; object-position: 55% 55%; }
@media (min-width: 1024px) { .sec .photo--bleed { margin-inline: -40px; } }

/* 01 疾患リンクリスト（§E-01） */
.dlist { list-style: none; margin: 0 0 var(--sp-6); padding: 0; border-top: var(--rule-strong); }
.dlist li { margin: 0; border-bottom: var(--rule); }
.dlist__item {
  position: relative; display: grid; gap: 4px;
  min-height: var(--tap); padding: 18px 36px 18px 0;
  color: var(--c-text); text-decoration: none;
}
.dlist__item::after {
  content: "→"; content: "→" / "";
  position: absolute; right: 4px; top: 20px;
  font-family: var(--f-sans); color: var(--c-terra);
  transition: transform .2s var(--ease);
}
.dlist__name {
  font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 3px); line-height: 1.5; letter-spacing: .04em;
  text-decoration: underline; text-decoration-color: var(--c-border-ui); text-decoration-thickness: 1px; text-underline-offset: .25em;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.dlist__desc { font-size: var(--fs-small); line-height: 1.75; color: var(--c-text-muted); }
.dlist__item:hover { color: var(--c-text); }
.dlist__item:hover .dlist__name { color: var(--c-terra-deep); text-decoration-color: var(--c-terra); }
.dlist__item:hover::after { transform: translateX(4px); }
@media (min-width: 768px) { .dlist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.pro-strip { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--rule); font-size: var(--fs-small); line-height: 1.8; color: var(--c-text-muted); }

/* 02 60分の内訳（既存の1文を数字で見せる）と6つの手順 */
.time-split { list-style: none; margin: 0 0 var(--sp-3); padding: var(--sp-5) 0 0; border-top: var(--rule-strong); display: grid; gap: var(--sp-5); }
.time-split__item { margin: 0; display: grid; grid-template-columns: 5.5em 1fr; align-items: baseline; column-gap: var(--sp-4); }
.time-split__num { font-family: var(--f-serif); color: var(--c-text); white-space: nowrap; }
.time-split .num { font-size: var(--fs-num); line-height: 1; letter-spacing: .02em; }
.time-split .unit { font-size: var(--fs-body); margin-left: .15em; }
.time-split__label { font-size: var(--fs-body); line-height: 1.7; }
@media (min-width: 768px) {
  .time-split { grid-template-columns: 1fr 1.7fr; column-gap: var(--sp-6); }
  .time-split__item { grid-template-columns: 1fr; row-gap: var(--sp-2); }
}
.sec .steps { margin-block: var(--sp-6); }
.sec .steps > li { margin-bottom: var(--sp-6); }
.sec .steps > li:last-child { margin-bottom: 0; }
.sec .steps__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-muted); }
@media (max-width: 767px) { .sec .steps > li { padding-left: 48px; } }

/* 04 できないこと／できること（左右比較。色や記号で善悪を分けない） */
.pair { display: grid; gap: var(--sp-6); }
.pair__col { border-top: var(--rule-strong); padding-top: 20px; }
.pair__h { margin: 0 0 var(--sp-3); font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.5; }
.pair__col p { margin: 0; }
@media (min-width: 768px) {
  .pair { position: relative; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .pair::before { content: ""; position: absolute; top: 20px; bottom: 0; left: 50%; width: 1px; background: var(--c-border); }
}

/* 05 違い: 立ち姿の写真＋その1〜3 */
.diff-layout__photo { margin: 0 0 var(--sp-6); max-width: 220px; }
.diff-layout__photo img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(.25) sepia(.04) contrast(1.02); background: #D9D4CA;
}
.diff-layout .diff-list { margin-top: 0; }
@media (min-width: 768px) {
  .diff-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .diff-layout__photo { position: sticky; top: calc(var(--header-h) + 24px); margin: 0; max-width: none; }
}

/* 06 免責（開閉の外。常時表示） */
.note-disclaimer {
  margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: var(--rule);
  font-size: var(--fs-small); line-height: 1.8; color: var(--c-text-muted);
}

/* 07 料金ブロック（§E-07）。本文列の中で縦に並べる */
.price { display: grid; gap: var(--sp-7); margin-bottom: var(--sp-6); }
.price__main { border-top: var(--rule-strong); padding-top: var(--sp-5); }
.price__sub  { border-top: 1px solid #BDB5A8; padding-top: var(--sp-5); }
.price__label { margin: 0 0 var(--sp-2); font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-small); letter-spacing: .16em; color: var(--c-terra-deep); }
.price__h { margin: 0 0 var(--sp-3); font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.55; }
.price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .15em; margin: 0 0 var(--sp-4); font-family: var(--f-serif); color: var(--c-text); line-height: 1.2; }
.price__amount .num { font-size: var(--fs-num); letter-spacing: .02em; }
.price__amount .unit { font-size: calc(var(--fs-body) + 3px); }
.price__amount .per { margin-left: .5em; font-family: var(--f-sans); font-size: var(--fs-small); color: var(--c-text-muted); }
.price__terms { display: grid; grid-template-columns: 5em 1fr; column-gap: var(--sp-4); row-gap: var(--sp-3); margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid #BDB5A8; }
.price__terms > div { display: contents; }
.price__terms dt { font-family: var(--f-serif); font-weight: 500; }
.price__terms dd { margin: 0; }
.price .muted { color: var(--c-text-muted); }

/* 本文中の見出し・短いラベルは文節で折り返す（Chrome は auto-phrase、他は balance／pretty） */
.sub-h, .pair__h, .price__h, .diff-list__title, .dlist__name { word-break: auto-phrase; text-wrap: balance; }
.time-split__label, .sec-summary { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   8c. 08〜13（フェーズ3・§E-08〜E-13）
   -------------------------------------------------------------------------- */
.sec--small { padding-block: var(--sec-pad-y-sm); }

/* 08 伺うのはこの人です */
.profile { display: grid; gap: var(--sp-5); margin: 0 0 var(--sp-7); }
.profile__photo { margin: 0; max-width: 240px; }
.profile__photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
  filter: grayscale(.25) sepia(.04) contrast(1.02); background: #D9D4CA;
}
.profile__body { min-width: 0; }
.profile__name { margin: 0 0 .1em; font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 8px); line-height: 1.5; letter-spacing: .08em; color: var(--c-text); }
.profile__kana { margin-left: .4em; font-family: var(--f-sans); font-size: var(--fs-small); letter-spacing: .04em; color: var(--c-text-muted); }
.profile__role { margin: 0 0 var(--sp-4); font-size: var(--fs-small); color: var(--c-text-muted); }
.profile__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.profile__list li { margin: 0; padding: var(--sp-3) 0; border-bottom: var(--rule); }
@media (min-width: 768px) {
  .profile { grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .profile__photo { max-width: none; }
}

/* 09 ご利用の流れ（縦のタイムライン。番号マーカー＋縦のレール。丸にしない） */
.timeline { position: relative; list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: #BDB5A8; }
.timeline__item { position: relative; margin: 0 0 var(--sp-6); padding-left: 40px; }
.timeline__item:last-child { margin-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--c-sumi); }
.timeline__no { display: block; margin-bottom: 6px; font-family: var(--f-serif); font-size: var(--fs-small); line-height: 1.4; letter-spacing: .14em; color: var(--c-terra-deep); }
.timeline__title { margin: 0 0 var(--sp-2); font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.55; letter-spacing: .04em; }
.timeline__text { margin: 0; }

/* 10 ご契約の前に（定義リスト。法的説明は本文サイズ） */
.sec .deflist { margin: 0; border-top: var(--rule-strong); }
.deflist__row { padding: var(--sp-5) 0; border-bottom: 1px solid #BDB5A8; }
.sec .deflist dt {
  margin: 0 0 var(--sp-2); padding: 0; border: 0;
  font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 1px); line-height: 1.6; letter-spacing: .04em;
  color: var(--c-text);
}
.sec .deflist dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
@media (min-width: 768px) {
  .deflist__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; }
  .sec .deflist dt { margin: 0; }
}

/* 11 FAQ（details のアコーディオン。枠なし・罫線だけ） */
.faq { margin: 0 0 var(--sp-4); border-top: var(--rule-strong); }
.faq__item { margin: 0; padding: 0; background: transparent; border: 0; border-bottom: var(--rule); border-radius: 0; }
.faq__q {
  list-style: none; position: relative;
  display: flex; align-items: baseline; gap: .6em;
  min-height: var(--tap); margin: 0; padding: 18px 44px 18px 0;
  font-family: var(--f-serif); font-weight: 500; font-size: calc(var(--fs-body) + 1px); line-height: 1.6; letter-spacing: .03em;
  color: var(--c-text); cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background:
    linear-gradient(var(--c-border-ui), var(--c-border-ui)) center / 16px 2px no-repeat,
    linear-gradient(var(--c-border-ui), var(--c-border-ui)) center / 2px 16px no-repeat;
}
.faq__item[open] > .faq__q::after { background: linear-gradient(var(--c-border-ui), var(--c-border-ui)) center / 16px 2px no-repeat; }
.faq__q:hover .faq__qt { color: var(--c-terra-deep); }
.faq__mark { flex: none; color: var(--c-terra-deep); font-weight: 400; }
.faq__body { padding: 0 0 var(--sp-5) 1.9em; }
.faq__a { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.faq__a + .faq__a { margin-top: .8em; }

/* 12 対応エリア（小） */
.area__main { font-size: var(--fs-body); }

/* 13 お問い合わせ（墨の帯） */
.sec--dark { background: var(--c-sumi); color: var(--c-kinari); }
.sec--dark .sec-head h2 { color: var(--c-kinari); }
.sec--dark .sec-head__eyebrow { color: var(--c-text-on-dark-muted); }
.sec--dark .sec-head__no { color: var(--c-terra-on-dark); }
.sec--dark .sec__ghost { color: var(--c-ghost-on-dark); }
.sec--dark a { color: var(--c-kinari); text-decoration-color: var(--c-border-on-dark); }
.sec--dark a:hover { color: var(--c-kinari); text-decoration-color: var(--c-terra-on-dark); }
.sec--dark .muted, .sec--dark .cta-note { color: var(--c-text-on-dark-muted); }

.contact-intro { display: grid; gap: var(--sp-5); align-items: center; margin: 0 0 var(--sp-6); }
.contact-face { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin: 0; }
.contact-face img {
  width: 120px; height: 150px; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(.25); border: 1px solid var(--c-border-on-dark);
}
.contact-face figcaption { font-family: var(--f-serif); font-size: var(--fs-small); letter-spacing: .1em; color: var(--c-text-on-dark-muted); }
.contact-lead { max-width: 26em; margin: 0; font-family: var(--f-serif); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: .02em; color: var(--c-kinari); }
@media (min-width: 768px) {
  .contact-intro { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-6); }
  .contact-face img { width: 160px; height: 200px; }
}
.contact-box { margin: 0 0 var(--sp-6); padding: var(--sp-5) 0; background: transparent; border: 0; border-top: 1px solid var(--c-border-on-dark); border-bottom: 1px solid rgba(239, 235, 227, .25); border-radius: 0; }
.contact-box dt { margin-top: var(--sp-5); font-family: var(--f-serif); font-weight: 400; font-size: var(--fs-small); letter-spacing: .08em; color: var(--c-text-on-dark-muted); }
.contact-box dt:first-child { margin-top: 0; }
.contact-box dd > a { display: inline-flex; align-items: center; min-height: 44px; }
.sec--dark .cta-group { margin-bottom: var(--sp-5); }
.sec--dark .badge-jihi { margin-top: var(--sp-6); color: var(--c-kinari); }

/* フッター */
.site-footer { padding-block: var(--sp-8) 40px; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }

/* 05 の立ち姿: 白い背景が紙色から浮かないよう、グレージュの台紙に収めて白をわずかに温める（写真自体は加工しない） */
.diff-layout__photo { padding: 12px; background: var(--c-greige); border: var(--rule); }
.diff-layout__photo img { filter: grayscale(.2) sepia(.1) brightness(.96) contrast(1.02); }

/* 文節での折り返し（Chrome は auto-phrase。未対応ブラウザでは通常の折り返しに戻る） */
main p, main li, main dt, main dd, .faq__qt, .sec-head h2, .site-footer p { word-break: auto-phrase; }
main p, main li, main dd, .site-footer p { text-wrap: pretty; }
.sec .deflist dt, .timeline__title, .faq__qt, .contact-lead { text-wrap: balance; }

/* --------------------------------------------------------------------------
   9. 出現の動き（§H）
   隠すのは「JS が動いている」かつ「動きを減らす設定でない」ときだけ。
   JS が無い／失敗した／動きを減らす設定 → 最初から表示。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(8px); }
  .reveal { transition: opacity .5s var(--ease), transform .5s var(--ease); }
  /* リストの子要素は 60ms ずつ遅らせる（最大5個目まで） */
  li.reveal:nth-child(2) { transition-delay: 60ms; }
  li.reveal:nth-child(3) { transition-delay: 120ms; }
  li.reveal:nth-child(4) { transition-delay: 180ms; }
  li.reveal:nth-child(n+5) { transition-delay: 240ms; }
  /* 要約の赤茶の線は出現と同時に伸びる */
  .sec-summary.reveal::before { transition: transform .5s var(--ease) .1s; }
  html.js .sec-summary.reveal:not(.is-in)::before { transform: scaleX(0); }
  /* 背景の番号はフェードだけ（動かさない） */
  .sec__ghost.reveal { transition: opacity .8s var(--ease); }
  html.js .sec__ghost.reveal:not(.is-in) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fv *, .fv__photo img, .fv__scroll span { animation: none; }
  .site-header__progress { display: none; }
}

/* 印刷: 固定要素を出さない */
@media print {
  .site-header { position: static; }
  .nav, .site-header__progress { display: none; }
  body { padding-bottom: 0; }
}