/* ============================================================
   中田造園 コーポレートサイト — 共有デザインシステム（site.css）
   方針: 中田造園_デザイン方針書D1（第4次改訂 2026-07-04）準拠
   採点: ゲート1=ルーブリック05（コード衛生・合格90）／ゲート2=ルーブリック06（リファレンス近接度・合格24/30）
   配色: 常緑 #223a28 が地。雪 #f2f4f0 は「読むために雪が積もったところ」で、
         ブランドカラーではない。長文本文は雪面にしか置かない。（2026-08-07 全面転換）
         旧「生成り #fdf7f2 が地の主役 × 墨 #252321」＋章色4本は破棄。理由はD1§5を参照。
   原則: 長文本文・会社情報・料金・CTAは対称＋AA維持（崩し禁止ゾーン）。
         崩し（白短冊オーバーラップ／巨大文字見切れ／透かし／写真半がかり／散らし）は
         見出し・写真・章扉まわりに限定し、章ごとに異なる組み方を1つ配布する（D1§4・§11-5）。
   モーション: 出現=フェード系限定（opacity+blur/字間のみ）。M1〜M7を実装。rest時常時アニメは0件。
   写真: assets/nakata/ の実写を使う。プレースホルダ規約（グレー方眼禁止・紙質感＋縦書き明朝の
         被写体ラベル＋コーナーマーク）は、まだ写真が入っていない枠にだけ適用する。
         現在それに該当するのは company.html の地図枠1つだけ。
   ============================================================ */

:root{
  /* ============================================================
     配色トークン（2026-08-07 正本）
     ★この2行がいちばん効く単純化ルール★
       1. --ink は文字専用。面（背景）には一切使わない。面は必ず --pine 系。
       2. 緑を面に使ってよいのは L≤20% と L≥84% の2帯だけ。
          中明度（L25〜83）の緑面を作らないこと。これがセージ／ミント／くすみを
          構造的に排除している唯一の仕組みで、ここが崩れるとこの配色は死ぬ。
          面色6つの HSL明度 = 94.9 / 90.0 / 84.3 / 19.0 / 18.0 / 8.0（25〜83が空く）
     ============================================================ */

  /* ---- 雪面（読字面）。長文本文はこの3面にしか置かない ---- */
  --snow:#f2f4f0;         /* 読字面。--ink で 14.48:1 */
  --snow-2:#e5eae1;       /* 沈んだ区切り面。--ink で 13.11:1。長文可 */
  --snow-3:#d7ddd1;       /* 写真枠の下地。--ink-muted で 4.70:1（雪面で最も厳しい組） */

  --ink:#1c2320;          /* 本文・見出し。★文字専用。面に使わない */
  --ink-soft:#434a44;     /* リード・補助文・figcaption。--snow に 8.24:1 */
  --ink-muted:#586057;    /* ラベル(.en)・注記。--snow-3 上でも 4.70:1 を確保する最明値 */

  --rule:#d4dacf;         /* 装飾細罫（非文字・非操作）。
                             ★操作要素の境界に使うことを禁止。旧実装は .filter-tabs の枠に
                             これを流用していて 1.244:1 と WCAG 1.4.11 を割っていた。
                             境界が要るところは必ず --edge / --edge-on-pine を使う */
  --edge:#5f7c66;         /* 雪面の操作要素の境界。--snow 4.16:1 / --snow-3 3.32:1（1.4.11 の3:1） */
  --pine-accent:#3b6042;  /* 雪面上の緑アクセント文字と1〜2pxの線。--snow に 6.46:1。
                             ★面には使わない。旧 --ch-moss と --ch-soil を1本に統合したもの
                             （2色とも面使用0件・HSL明度53.5%で同一の死にトークンだった） */

  /* ---- 常緑面 ---- */
  --pine:#223a28;         /* 主面。page-hero / FVの逆L字 / CTA / nav / 写真上の不透明プレート */
  --pine-deep:#0f1a12;    /* 最暗面。フッター / FVの敷居 / recruit の Why。
                             --pine との明度差 10.0pt。旧 --ink↔--ch-ink は 2.7pt しかなく
                             暗転章とフッターが1枚の黒帯に見えていた */
  --pine-hover:#2d4a33;   /* 松面ボタンのホバー地。--on-pine で 9.19:1 */
  --fill-on-pine:#253c2b; /* 濃面の中の面（入力欄の地・濃面上の写真枠の下地） */

  /* ---- 濃緑面の上の文字・線（旧実装は rgba(255,255,255,α) が20段に散乱していた）----
     α指定は地の輝度で結果が変わるため、章色を足すたびに新しいαが当て直されて20段になった。
     値は20段あったが意味は4種類しかない。不透明色にすれば1回測れば全ての濃色面で固定できる。
     規約: 文字に使えるのは --on-pine-muted まで。それより暗い階調を文字に当てない。
           罫(--hairline-on-pine)と操作境界(--edge-on-pine)を混ぜない。3:1が要るのは後者だけ。
           --on-pine-muted と --edge-on-pine を背景（塗り）に使うことを絶対に禁止する。 */
  --on-pine:#f6f8f4;         /* 見出し・本文・電話番号。--pine 11.53:1 / --pine-deep 16.70:1 */
  --on-pine-soft:#cbd7c7;    /* リード・段落・詩文・foot-nav。--pine 8.27:1 */
  --on-pine-muted:#acbab0;   /* ラベル・figcaption・dt・placeholder。--pine 6.11:1。
                                ★塗りに使わない。セージ #9caf88 との距離を44.5まで離した値 */
  --hairline-on-pine:#486550;/* 濃面の装飾細罫（非文字・非操作）。--pine 1.91:1 */
  --edge-on-pine:#6c8470;    /* 濃面の操作要素の境界。--pine 3.04:1（1.4.11 の3:1）。
                                旧実装の白30%相当は #1e1c1a 上で実測 2.72:1 で既に違反していた */

  /* ---- 書体 ---- */
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Inter Tight","Zen Kaku Gothic New",sans-serif;

  /* ---- タイプスケール（D1§6 新設: トップ=巨大型比6.5以上／下層=囁き型比2.0-2.8） ---- */
  --body:1.0625rem;       /* 17px 本文(50代可読性の担保) */
  --lh-body:1.9;
  --ls-body:0.04em;
  /* トップFV専用。116px÷17px=6.82（基準6.5以上）。
     下限を3.6rem→4.4remに引き上げ: 旧値は1061px未満で比6.5を割っていた（1024pxで6.31） */
  --text-giant:clamp(4.4rem, 2.2rem + 8.6vw, 7.25rem);
  --text-whisper-l:clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); /* 下層見出し大。約41.6px÷17px≒2.45 */
  --text-whisper-m:clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem); /* 下層見出し中 */

  /* ---- 空間（4ptスケール） ---- */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
  --gutter:clamp(1.5rem,5vw,5rem);

  /* ---- モーション（D1§7 統一則） ---- */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:820ms;
  --dur-signature:800ms;   /* M4 ぼかし→合焦 */
  --dur-converge:600ms;    /* M6 字間収束 */
  --dur-zoom:1.6s;         /* M7 写真ゆるズーム */

  /* ---- 紙質感テクスチャ（D1§5 otoden型・コード生成。S5） ---- */
  --noise-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   0-A. 面のスコープ（濃色面の既定値）
   ここが規約1「濃色面は必ずスコープで既定を切り替える。個別セレクタで白を手打ちしない」の実装。
   共有部品（.en / .lead / .dl-row / 罫）は --c-* だけを見るので、面が変わっても勝手に追従する。
   手打ちしていた頃は .hero-v のように「どの濃面クラスにも属さない面」で必ず穴が空いていた。
   ============================================================ */
:root{--c-soft:var(--ink-soft);--c-muted:var(--ink-muted);--c-rule:var(--rule);--c-edge:var(--edge);}
.hero-v,.ch-pine,.ch-pine-deep,.nav,.nav-drawer,.foot,[data-surface="dark"]{
  --c-soft:var(--on-pine-soft);--c-muted:var(--on-pine-muted);
  --c-rule:var(--hairline-on-pine);--c-edge:var(--edge-on-pine);
}

/* ============================================================
   0. リセット／ベース
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;scroll-behavior:smooth;
     /* 2026-10-09 ページ内リンク（about.html#mvv-h など）の着地点が固定ヘッダーの下に潜らないように */
     scroll-padding-top:6rem;}
/* 2026-10-09 hidden 属性はどの要素でも必ず消す。作者CSSの display（.nav-drawer の flex、
   company.html の .form-grid の grid）がブラウザ既定の [hidden]{display:none} に勝ち、
   閉じた引き出しが全画面に残る／送信後に入力欄が消えない、という不具合が2件出ていた。 */
[hidden]{display:none !important;}
body{
  margin:0;overflow-x:clip;
  background:var(--snow);color:var(--ink);
  font-family:var(--sans);font-size:var(--body);font-weight:400;
  line-height:var(--lh-body);letter-spacing:var(--ls-body);
  line-break:strict;overflow-wrap:anywhere;
  /* 文節改行（2026-09-24）: HTML の <wbr> は BudouX で文節境界に入れてある。
     keep-all でそれ以外の位置では折り返さない。auto-phrase は Chrome 専用で
     iPhone の Safari では効かず「黒|部」「なりま|す。」のように割れていたため使わない。
     1文節が行幅より長いときだけ overflow-wrap:anywhere で折り返す。 */
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{
  font-family:var(--serif);font-weight:600;margin:0;
  line-height:1.55;letter-spacing:0.08em;
  font-feature-settings:"palt";word-break:keep-all;text-wrap:balance;
  min-width:0;overflow-wrap:anywhere;
}
p{margin:0;}
/* 最終行に「す。」だけ残る泣き別れを防ぐ（未対応ブラウザは通常の折り返しになるだけ） */
p,li,dd,dt,figcaption,summary,blockquote{text-wrap:pretty;}
/* 本文中の電話番号・郵便番号を途中で折らない */
.nw{white-space:nowrap;}
ul,dl{margin:0;padding:0;list-style:none;}
img,video,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

/* 2026-10-26 社長の指示で、見出しの上の小さなラベルや季節の添え字を英語からすべて日本語にした。
   クラス名 .en は英字ラベルの名残。和文の小さなラベルとして読めるよう、字間を詰めて一段大きくした
   （英字のときは 0.7rem・0.28em。和文で 0.28em だと一字ずつばらけて読みにくい）。 */
.en{font-family:var(--en);font-weight:500;letter-spacing:0.18em;
    text-transform:uppercase;font-size:0.78rem;color:var(--c-muted);
    word-break:normal;overflow-wrap:normal;}
/* nowrap必須: 指定なしだと body の overflow-wrap:anywhere により
   320px幅で電話番号が「0765-52-」「0681」に分断される。サイト唯一のCV導線 */
.num{font-family:var(--en);font-variant-numeric:tabular-nums;letter-spacing:0.06em;
     white-space:nowrap;overflow-wrap:normal;word-break:keep-all;}
.num-mix{font-family:var(--en);font-weight:500;font-size:1.35em;letter-spacing:0.02em;}

.skip{position:absolute;left:1rem;top:-4rem;background:var(--pine);color:var(--on-pine);
      padding:0.5rem 1rem;z-index:100;transition:top .2s;}
.skip:focus-visible{top:1rem;}
/* 視覚的には隠すが支援技術には読ませる（FV動画のfigcaption等） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap;border:0;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.on-dark :focus-visible,[data-surface="dark"] :focus-visible{outline-color:var(--on-pine);}

/* ============================================================
   1. ナビゲーション（最小・追従型。全ページ共通）
   ============================================================ */
/* 2026-08-07: 全ページの先頭が常緑面（index=FVの上バンド、下層=page-hero）になったので、
   ナビは常に緑の上に乗る。文字は常に --on-pine の1系統でよくなり、
   明面／暗面の出し分け（旧 .nav.on-dark と .nav.on-dark.scrolled）が不要になった。
   あわせて backdrop-filter:blur(12px) と、その発熱回避のための
   body.fv-visible 分岐も削除した（不透明な面になったのでぼかす対象がない）。
   backdrop-filter は最頻出のAI-FVの徴候そのものなので、
   規律が強くなりながらコードが減る、この移行で唯一の構造的な純益。 */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;
     display:flex;align-items:center;justify-content:space-between;
     padding:clamp(1rem,2vw,1.5rem) var(--gutter);
     color:var(--on-pine);
     transition:background .5s var(--ease),border-color .5s var(--ease);}
.nav.scrolled{background:var(--pine);
     border-bottom:1px solid var(--hairline-on-pine);}
.nav-name{font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:0.14em;}
/* 2026-08-05 追加（中林指摘 1a）。会社の看板の表記が「(有)中田造園」なので現物に合わせる。
   aria-hidden で読み上げからは外し、リンク側の aria-label で「有限会社中田造園」と読ませる。
   2026-10-26 社長の電話での指示で、(有)を社名より小さくするのをやめ、「中田造園」と同じ大きさ・書体にした
   （以前は 0.62em に縮めて主従をつけていたが「小さいのが気になる」）。 */
.nav-name-co,.foot-mark-co{font-feature-settings:"palt";}
.nav-right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);}
.nav-menu{display:flex;gap:clamp(1rem,2vw,1.75rem);font-size:0.8rem;letter-spacing:0.08em;}
.nav-menu a{position:relative;padding:2px 0;transition:opacity .3s var(--ease);}
.nav-menu a[aria-current="page"]{opacity:.55;}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;
     background:currentColor;transition:width .4s var(--ease);}
.nav-menu a:hover::after{width:100%;}
.nav-menu a:active{opacity:.55;}
.nav-tel{font-family:var(--en);font-size:0.9rem;letter-spacing:0.1em;
     display:inline-flex;align-items:center;gap:0.4rem;transition:opacity .3s var(--ease);}
.nav-tel::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.nav-tel:active{opacity:.55;}
/* --- モバイルの引き出しメニュー（site.jsが組み立てる。HTMLには存在しない） ---
   ヘッダー(z-index:50)より下に敷き、開いている間もトグルを押せるようにする。 */
.nav-toggle{display:none;}
/* 2026-10-09 縦の中央寄せを justify-content:center から上下の auto マージンに変えた。
   center だと中身(約580px)が画面より高いとき上下に同じだけはみ出し、横向きのスマホでは
   先頭のリンクがヘッダーの下に潜って押すとトップへ飛び、電話番号は画面外に切れていた。
   auto マージンなら、収まるときは中央、収まらないときは上詰めでスクロールになる。 */
.nav-drawer{position:fixed;inset:0;z-index:49;background:var(--pine);color:var(--on-pine);
     display:flex;flex-direction:column;justify-content:flex-start;gap:2.5rem;
     overflow-y:auto;overscroll-behavior:contain;
     padding:6rem var(--gutter) 4rem;
     opacity:0;transition:opacity .32s var(--ease);}
.nav-drawer.in{opacity:1;}
/* 2026-10-09 修正（専務からの報告「個人・法人・公共を押すと電話案内になる」「お問い合わせでどこかへ飛ぶ」）。
   上の display:flex がブラウザ既定の [hidden]{display:none} に勝っていたため、閉じている引き出しが
   透明(opacity:0)のまま全画面に残り、52rem以下では本文へのタップがすべて引き出しの中の
   ページリンクと tel: に吸われていた。閉じているあいだは冒頭の [hidden] で消し、
   フェードアウト中（.in が外れてから hidden に戻るまでの320ms）もタップを通す。 */
.nav-drawer:not(.in){pointer-events:none;}
.nav-drawer nav{display:flex;flex-direction:column;gap:1.6rem;margin-top:auto;}
.nav-drawer a{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:0.12em;}
.nav-drawer a[aria-current="page"]{opacity:.45;}
.nav-drawer a:active{opacity:.55;}
.nav-drawer-tel{font-family:var(--en);font-size:1.15rem;letter-spacing:0.1em;
     padding-top:2rem;border-top:1px solid var(--hairline-on-pine);margin-bottom:auto;}
/* html に overflow-x:clip があると body の overflow は画面に伝わらないので、html 側でも止める */
body.nav-open,html.nav-open{overflow:hidden;}
/* 引き出しの中にも電話番号があるので、ヘッダー側は伏せて二重に見せない */
body.nav-open .nav-tel{opacity:0;pointer-events:none;}
@media(max-width:52rem){
  .nav-menu{display:none;}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;
       gap:6px;width:44px;height:44px;padding:0;margin-right:-10px;
       background:none;border:0;color:inherit;cursor:pointer;}
  .nav-toggle-bar{display:block;width:22px;height:1px;background:currentColor;
       transition:transform .3s var(--ease);}
  .nav-toggle.is-open .nav-toggle-bar:first-child{transform:translateY(3.5px) rotate(45deg);}
  .nav-toggle.is-open .nav-toggle-bar:last-child{transform:translateY(-3.5px) rotate(-45deg);}
}
@media(min-width:52.0625rem){.nav-drawer{display:none;}}
/* 2026-10-26 幅320px級（〜358px）では社名・電話番号・メニューが1行に入らず、社名が2行に折れて
   ヘッダーが102pxに伸びていた（(有)を社名と同じ大きさにする前から）。この幅だけ字間を詰め、電話番号の丸を外す。 */
@media(max-width:22.4rem){
  .nav-name{letter-spacing:0.06em;white-space:nowrap;}
  .nav-right{gap:0.75rem;}
  .nav-tel{letter-spacing:0.02em;}
  .nav-tel::before{display:none;}
}

/* ============================================================
   2. レイアウト共通
   ============================================================ */
.section{padding-block:clamp(4rem,12vh,9rem);}
.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gutter);}
.bleed{padding-inline:var(--gutter);}
.eyebrow{display:inline-flex;align-items:center;gap:0.75rem;margin-bottom:2rem;}
.eyebrow::before{content:"";width:2.25rem;height:1px;background:currentColor;opacity:.9;}

/* 下層ページ用「囁き型」見出し・本文はここでスケールを固定し、中間帯(比3〜6)に落ちないようにする。
   h1 を入れ忘れていたため、下層7ページすべてで h1(ブラウザ既定の2em=34px) が
   h2(41.6px) より小さいという階層の逆転が起きていた。h1 46.4px÷本文17px=2.73 で
   囁き型の帯(2.0〜2.8)の上端に収める。 */
.whisper h1{font-size:clamp(2.2rem,1.7rem + 1.6vw,2.9rem);line-height:1.45;}
.whisper h2,.whisper .h-l{font-size:var(--text-whisper-l);line-height:1.5;}
.whisper h3,.whisper .h-m{font-size:var(--text-whisper-m);line-height:1.5;}
.whisper p{max-width:34em;line-height:2;}
/* 色指定はクラスの付いていない素の <p> だけに効かせる。
   全 p に効かせていたため特異度(0,2,0)が下層の色指定を全て握りつぶし、
   companyのフォーム注記が1.81:1（ほぼ不可視）、章色アクセントが全滅していた */
.whisper p:not([class]){color:var(--c-soft);}

/* ============================================================
   3. モーション・プリミティブ（D1§7 v4必須 M1〜M7）
   出現前の不可視状態は .js（JS有効時）に限定し、JS未実行/失敗時は
   本文・CTA・会社情報が常時可視になるようにする（プログレッシブ・エンハンスメント。2026-07-13レビューD-01）。
   ============================================================ */
/* M1: 基本出現フェード */
.js .reveal{opacity:0;transform:translateY(14px);
      transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.reveal.in{opacity:1;transform:none;}
/* 2026-10-09 出現前の透明な要素は押せないようにする。opacity:0 は当たり判定を消さないので、
   画面の下端で何も見えない所を押すと、まだ出ていない電話ボタンやリンクが反応していた */
.js .reveal:not(.in),.js .reveal--still:not(.in){pointer-events:none;}
.js .reveal[data-delay="1"]{transition-delay:.12s;}
.js .reveal[data-delay="2"]{transition-delay:.24s;}
.js .reveal[data-delay="3"]{transition-delay:.36s;}

/* M2: FV文字送り(JSがspanに分割して付与。JS未実行時は元テキストが常時可視) */
.char-in{display:inline-block;vertical-align:top;line-height:1;opacity:0;transform:translateY(8px);
      transition:opacity .5s var(--ease),transform .5s var(--ease);}
.char-in.in{opacity:1;transform:none;}

/* M3: 詩文の行別カスケード(初動600ms・行間stagger350ms。旧1600msは"間"でなく空白のため短縮。レビューP2/D-04) */
.poem{line-height:2.8;}
.poem-line{display:block;}
.js .poem-line{opacity:0;filter:blur(2px);
      transition:opacity .9s var(--ease),filter .9s var(--ease);
      transition-delay:calc(600ms + var(--d,0) * 350ms);}
.poem-line.in{opacity:1;filter:blur(0);}

/* M4: ぼかし→合焦の署名出現(トップ1〜2箇所限定) */
.js .signature{opacity:0;filter:blur(8px);
      transition:opacity var(--dur-signature) var(--ease),filter var(--dur-signature) var(--ease);}
.signature.in{opacity:1;filter:blur(0);}

/* M5: SVG図解の描画(stroke-dashoffset順次) */
.js .draw-path{stroke-dasharray:340;stroke-dashoffset:340;
      transition:stroke-dashoffset .6s var(--ease);}
.draw-path.in{stroke-dashoffset:0;}
.js .draw-path:nth-of-type(1){transition-delay:0ms;}
.js .draw-path:nth-of-type(2){transition-delay:600ms;}
.js .draw-path:nth-of-type(3){transition-delay:1200ms;}
.js .draw-path:nth-of-type(4){transition-delay:1800ms;}

/* M6(英字ラベルの字間収束)は廃止: 0.4→0.28em(差0.12em)は知覚閾値以下でモーション装置の数合わせだったため除去(Fable 5裁定・レビューP7/D-02 2026-07-13) */

/* M7: 写真のゆるズーム(settle型: 視界に入った瞬間だけ僅かに寄り、本来の構図1.0へ落ち着く。拡大したまま静止しない。レビューP1/D-13) */
.js .zoomable{transition:transform var(--dur-zoom) var(--ease);transform:scale(1.055);}
.zoomable.in{transform:scale(1);}

/* ============================================================
   4. 崩し（Kuzushi）コンポーネント — 見出し・写真・章扉まわり限定
   ============================================================ */
/* 白短冊オーバーラップ(S1): FVの写真枠に白/生成りの短冊を段違いで重ねる */
.strip-panel{background:var(--snow);box-shadow:0 1.5rem 3.5rem -1.5rem rgba(15,26,18,.22);}
.strip-panel--a{transform:translateY(-1.5rem);}
.strip-panel--b{transform:translateY(1.5rem);}
@media(max-width:44rem){.strip-panel--a,.strip-panel--b{transform:none;}}

/* 巨大一文字の実テキスト見切れ(S2): overflow:hiddenの親内で一文字を大きく配置し縁で切る */
.kanji-crop-host{position:relative;overflow:hidden;}
.kanji-crop{position:absolute;z-index:1;font-family:var(--serif);font-weight:700;
      line-height:0.78;color:var(--on-pine);opacity:.94;pointer-events:none;
      font-size:clamp(7rem,5rem + 10vw,13rem);}
.kanji-crop--br{right:-0.12em;bottom:-0.22em;}
.kanji-crop--tl{left:-0.1em;top:-0.2em;}
.kanji-crop--ink{color:var(--ink);}

/* 実テキスト透かし(S3): 章扉の背後に低不透明度の巨大英字/和文 */
.watermark{position:absolute;z-index:0;pointer-events:none;user-select:none;
      font-family:var(--en);font-weight:600;white-space:nowrap;
      font-size:clamp(4rem,3rem + 9vw,10.5rem);line-height:0.72;
      letter-spacing:0.02em;color:currentColor;opacity:.075;}
.watermark--snow{color:var(--on-pine);opacity:.14;}

/* 写真半がかり(季節カード等): 見出し数字を写真の縁にオーバーラップ */
.half-cover{position:relative;}
/* 既定の color:var(--snow) × multiply は写真上で最大5.1%の輝度差しか出ず、
   四季3箇所のS2(巨大一文字見切れ)が事実上不可視だった */
.half-cover .kanji-crop{mix-blend-mode:multiply;color:var(--ink);opacity:.55;}

/* 見出しパネルの写真オーバーラップ(Works等) */
.overlap-card{position:relative;z-index:2;background:var(--snow);
      max-width:26rem;padding:clamp(1.75rem,3vw,2.75rem);
      margin-top:-4.5rem;margin-inline-start:clamp(0rem,4vw,3rem);
      box-shadow:0 1.5rem 3rem -1.25rem rgba(15,26,18,.25);}
@media(max-width:44rem){.overlap-card{margin-top:-2.5rem;margin-inline-start:1rem;max-width:none;}}
/* 2026-09-24: スマホでは見出し2行目「毎年手入れしています。」（11字）がカード幅に数px足りず、
   「毎年」だけが1行に残っていた。カードが狭いときは幅に合わせて字を下げ、2行に収める。 */
.overlap-card{container-type:inline-size;}
@container (max-width:24rem){.overlap-card h2{font-size:min(1.6rem,8.3cqi);}}
/* 2026-10-03: 見出しが4行（「お声がかかれば、…協力させてもらいます。」）になり、
   h2・p とも margin:0 のため見出しの最終行と本文が詰まって一続きに見えた。 */
.overlap-card h2{margin-bottom:1rem;}

/* レターボックス素材接写帯(4.6:1・章扉/FV共通) */
.band{display:grid;align-items:center;gap:clamp(1rem,4vw,3rem);}
.band-strip{aspect-ratio:4.6/1;overflow:hidden;background:var(--snow-3);}
.band-strip .ph{width:100%;height:100%;}
.band-char{font-family:var(--serif);font-weight:600;color:var(--on-pine);
      font-size:clamp(2.2rem,2rem + 2vw,3.4rem);letter-spacing:0.1em;
      writing-mode:vertical-rl;text-orientation:upright;line-height:1;text-align:center;}
/* 章色面の外（生成り地）に帯を置く場合。既定の color:var(--snow) のままだと
   地色と同色になって一文字が完全に消える */
.bandwrap:not(.chapter) .band-char{color:var(--ink);opacity:.9;}

/* ============================================================
   5. 章色面（テクスチャ連鎖・S5 otoden型）
   ============================================================ */
.chapter{position:relative;isolation:isolate;}
.chapter::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background-image:var(--noise-svg);background-size:220px 220px;
      mix-blend-mode:overlay;opacity:.5;}
/* :not() 除外がないと .kanji-crop / .watermark の absolute が position:relative で
   上書きされ、採用章「育」の見切れが成立せずセクション高を押し広げていた */
.chapter > *:not(.kanji-crop):not(.watermark){position:relative;z-index:1;}
.ch-pine{background-color:var(--pine);color:var(--on-pine);}
.ch-pine-deep{background-color:var(--pine-deep);color:var(--on-pine);}

/* ============================================================
   6. テキストリンク／CTA／プレースホルダ（共通）
   ============================================================ */
.tlink{display:inline-flex;align-items:center;gap:0.6rem;
      font-family:var(--serif);font-size:1.05rem;letter-spacing:0.06em;
      border-bottom:1px solid currentColor;padding-bottom:2px;
      transition:gap .35s var(--ease),opacity .35s var(--ease);}
.tlink::after{content:"→";font-family:var(--en);}
.tlink:hover{gap:1rem;opacity:.62;}
.tlink:active{opacity:.4;}

.tel-cta{display:inline-grid;gap:0.5rem;padding:1.5rem 2.25rem;
      background:var(--pine);color:var(--on-pine);
      transition:transform .18s var(--ease),background .3s var(--ease);}
.tel-cta:hover{background:var(--pine-hover);}
.tel-cta:active{transform:translateY(1px);}
.tel-cta .en{color:var(--on-pine-muted);}
.tel-cta .num{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.7rem);font-weight:500;line-height:1.1;}
.ch-pine-deep .tel-cta{background:var(--snow);color:var(--ink);}
.ch-pine-deep .tel-cta:hover{background:var(--snow-2);}
.ch-pine-deep .tel-cta .en{color:var(--ink-muted);}

/* プレースホルダ = 「撮影計画図」。方眼禁止。紙質感＋縦書きラベル＋コーナーマーク */
.ph{position:relative;background:var(--snow-3);display:grid;place-content:center;
    text-align:center;padding:1.5rem;overflow:hidden;}
.ph::before{content:"";position:absolute;inset:0;
    background-image:var(--noise-svg);background-size:200px 200px;opacity:.35;}
.ph::after{content:"";position:absolute;inset:0.6rem;pointer-events:none;
    background-image:
      linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
      linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-size:0.85rem 1px,1px 0.85rem,0.85rem 1px,1px 0.85rem;
    background-position:top left,top left,bottom right,bottom right;
    color:var(--ink-muted);opacity:.55;}
.ph small{position:relative;font-size:0.8rem;line-height:1.7;color:var(--ink-muted);letter-spacing:0.03em;}
.ph .en{color:var(--ink-muted);}   /* 明色ボックス内で既定の白系ラベルだと1.17:1 */
/* 実写枠の共通指定。下層6ページへの実写展開の前提としてページ内styleから昇格 */
.ph-img{display:block;width:100%;height:100%;object-fit:cover;}
.ph .en{letter-spacing:0.14em;}
.ph .ph-subject{display:block;margin-top:0.35rem;font-family:var(--serif);
    writing-mode:vertical-rl;text-orientation:mixed;height:3.4em;margin-inline:auto;
    font-size:0.95rem;letter-spacing:0.16em;color:var(--ink-soft);}

/* ============================================================
   7. 定義リスト・アコーディオン・タイムライン・ネームプレート（共通部品）
   ============================================================ */
.dl-row{display:grid;grid-template-columns:7em 1fr;}
.dl-row dt,.dl-row dd{padding-block:0.9rem;border-bottom:1px solid var(--c-rule);margin:0;}
.dl-row dt{font-size:0.8rem;letter-spacing:0.08em;color:var(--c-muted);}
.dl-row dd{font-size:0.95rem;}
@media(max-width:26rem){
  .dl-row{grid-template-columns:1fr;}
  .dl-row dt{border-bottom:0;padding-bottom:0;color:var(--ink);}
  .ch-pine-deep .dl-row dt{color:var(--on-pine);}
}

.acc{border-top:1px solid var(--rule);}
.acc-item{border-bottom:1px solid var(--rule);}
.acc-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
      gap:1.5rem;padding-block:1.5rem;cursor:pointer;font-family:var(--serif);
      font-size:1.05rem;letter-spacing:0.04em;}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary::after{content:"+";font-family:var(--en);font-size:1.1rem;
      flex:none;transition:transform .35s var(--ease);color:var(--ink-muted);}
.acc-item[open] summary::after{transform:rotate(45deg);}
.acc-item .acc-a{padding-bottom:1.75rem;max-width:38em;color:var(--ink-soft);line-height:2;}
.acc-item .acc-q-tag{font-family:var(--en);color:var(--ink-muted);margin-right:0.9rem;}

.timeline{border-top:1px solid var(--rule);}
.timeline-row{display:grid;grid-template-columns:6em 1fr;gap:clamp(1.25rem,3vw,2.5rem);
      padding-block:clamp(1.75rem,3.5vh,2.5rem);border-bottom:1px solid var(--rule);align-items:baseline;}
.timeline-year{font-family:var(--en);font-size:1.4rem;color:var(--pine-accent);}
.timeline-row h3{font-size:1.05rem;margin-bottom:0.5rem;}
.timeline-row p{color:var(--ink-soft);max-width:32em;}
@media(max-width:36rem){.timeline-row{grid-template-columns:1fr;gap:0.5rem;}}

.nameplate{position:relative;}
.nameplate-photo{aspect-ratio:4/5;overflow:hidden;background:var(--snow-3);}
.nameplate-bar{background:var(--pine);color:var(--on-pine);padding:0.85rem 1.1rem;
      display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;}
.nameplate-bar .role{font-size:0.72rem;letter-spacing:0.1em;color:var(--on-pine-muted);}
.nameplate-bar .name{font-family:var(--serif);font-size:1rem;letter-spacing:0.06em;}

.filter-tabs{display:flex;flex-wrap:wrap;gap:0.75rem;}
.filter-tabs button{padding:0.55rem 1.1rem;border:1px solid var(--edge);
      font-size:0.82rem;letter-spacing:0.06em;transition:background .3s var(--ease),color .3s var(--ease);}
.filter-tabs button[aria-pressed="true"]{background:var(--pine);color:var(--on-pine);border-color:var(--pine);}
.filter-tabs button:hover{border-color:var(--ink-muted);}

/* ============================================================
   8. 下層ページ用ヒーロー（囁き型）
   ============================================================ */
.page-hero{padding-block:clamp(7.5rem,20vh,11rem) clamp(3rem,8vh,5rem);}
.page-hero .eyebrow{color:var(--c-muted);}
.page-hero .lead{max-width:36em;color:var(--c-soft);line-height:2;margin-top:1.25rem;}
.page-hero--on-color{color:var(--on-pine);}

/* ============================================================
   9. フォーム（Company）
   ============================================================ */
.form-row{display:grid;gap:0.5rem;margin-bottom:1.5rem;}
.form-row label{font-size:0.8rem;letter-spacing:0.06em;color:var(--on-pine-soft);}
.form-row input,.form-row select,.form-row textarea{
      background:var(--fill-on-pine);border:1px solid var(--edge-on-pine);
      color:var(--on-pine);padding:0.85rem 1rem;font:inherit;
      /* 2026-10-09 0.95rem(15.2px)から変更。16px未満だと iPhone が入力時に画面を拡大し、戻らない */
      font-size:max(16px,1rem);
      transition:border-color .3s var(--ease),background .3s var(--ease);}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--edge-on-pine);}
.form-row input:hover,.form-row select:hover,.form-row textarea:hover{border-color:var(--on-pine-muted);}
.form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{
      border-color:var(--on-pine);background:var(--fill-on-pine);}
.form-submit{padding:1rem 2.5rem;background:var(--snow);color:var(--ink);
      font-family:var(--serif);letter-spacing:0.08em;
      transition:background .3s var(--ease);}
.form-submit:hover{background:var(--snow-2);}

/* ============================================================
   10. フッター
   ============================================================ */
.foot{background:var(--pine-deep);color:var(--on-pine);padding-block:clamp(3.5rem,8vh,6rem);}
.foot .wrap{display:grid;gap:2.5rem;}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-end;}
.foot-mark{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:0.16em;}
.foot-tag{color:var(--on-pine-muted);font-size:0.85rem;letter-spacing:0.1em;margin-top:0.5rem;}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:0.85rem;}
.foot-nav a{color:var(--on-pine-soft);transition:color .3s var(--ease);}
.foot-nav a:hover{color:var(--on-pine);}
.foot-nav a:active{color:var(--on-pine-muted);}
.foot-meta{border-top:1px solid var(--hairline-on-pine);padding-top:2rem;
    font-size:0.8rem;color:var(--on-pine-muted);line-height:1.9;}

/* ============================================================
   11. レスポンシブ（共通ブレークポイント）
   ============================================================ */
@media(max-width:48rem){
  .section{padding-block:clamp(3.5rem,10vh,6rem);}
}
@media(max-width:26rem){
  .wrap{padding-inline:1.25rem;}
}

/* ============================================================
   12. prefers-reduced-motion（全モーション無効化）
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .reveal,.reveal--still,.char-in,.poem-line,.signature{opacity:1!important;transform:none!important;filter:none!important;}
  .zoomable{transform:none!important;}
  .draw-path{stroke-dashoffset:0!important;}
  /* 動画はJS側でもsrcを注入しないが、二重の保険として描画自体を止める。
     posterだけが残り、FVは「実写1枚」として同じ構図のまま成立する */
  .hero-v-media{display:none!important;}
}