/* 生成物です。直接編集しないでください。
   トークン → 09-design/design-tokens.json
   スタイル → tools/site/assets/common.css
   ビルド   → node tools/build.mjs */
:root{
  /* 色: 原崎の実測値そのまま。4色＋文字色のみで、体系外の色を置かない（tone-and-manner 11-2） */
  --cream:#F4F4F0; --white:#FFFFFF; --dcream:#E5E5D9;
  --navy:#3C699C; --on-deep:#FFFFFF;
  --ink:#1F1F1F; --sub:#4D4D4D;
  --focus-ring:#3C699C; --focus-w:2px; --focus-off:2px;
  /* オレンジ（2026-08-28 担当者指示）。**行動を促すボタンだけに使う。**
     文字色・罫・面の色には広げない。2026-08-20 に撤回した値をそのまま戻したもの */
  --orange:#9E6D0A; --on-orange:#FFFFFF;
  /* LINE のブランドカラー（2026-09-08 担当者指示）。LINE へ送るボタン・バナーだけに使う */
  --line:#06C755;
  /* 角丸は2値のみ（原崎の実測）。影は使わない */
  --r:10px; --pill:999px;
  /* 罫は border ではなく背景のグラデーション（原崎の実測どおり。tone-and-manner 5-1） */
  --rule-c:rgba(31,31,31,.5);
  --rule-c-on-deep:#FFFFFF;
  --rule-period:4px;
  --reassure-w:3px;
  /* 書体 */
  --sans:'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --catch:'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  --catch-w:600;
  --w-body:400;
  --w-heading:500;
  --w-strong:700;
  --lh-body:1.9;
  --lh-heading:1.45;
  --ls-body:0.05em;
  --ls-heading:0.05em;
  --ls-sitename:0.08em;
  --measure:35em;
  /* 余白 */
  --sec-y:56px;
  --sec-y-top:96px;
  --sec-y-bottom:72px;
  --card-pad:24px;
  --quiet-scale:1.25;
  /* 部品 */
  --bar-h:56px;
  --btn-h:44px;
  --band-h:2rem;
  --band-bg:rgba(244,244,240,.94);
  --tel-num:20px;
  --rot-odd:-0.5deg;
  --rot-even:0.4deg;
  --bleed-fv:4vw;
  --grid-break:-12px;
  /* 見出し（size-h1〜h3 は scale と別に持っている値） */
  --fs-h1:26px;
  --fs-h2:22px;
  --fs-h3:19px;
  --fs-body:15px;
  --fs-catch:28px;
  --fs-introfv:17px;
  --fs-lead:16.5px;
  --fs-small:14.5px;
  --fs-foot-nav:12.5px;
  --fs-foot-ext:12.5px;
  --fs-foot-owner:12.5px;
  --fs-r1:14.5px;
  --fs-btn:16px;
  --fs-label:12px;
  --fs-cats:12px;
  --fs-sitename:14px;
  --fs-tel:14px;
  --fs-telnum:18px;
  --fs-note:11px;
  --fs-next:13px;
  --fs-bigno:76px;
  --fs-navno:14px;
  --fs-gnav-brand:14px（--fs-sitename）;
  /* PC のみのトークン（SP では宣言しない。PC のメディアクエリの外で使わないこと）: --fs-nav, --fs-arrow, --fs-gnav, --fs-gnav-sub */
}
/* PC（768px〜）: キャッチ以外すべて +2px（2026-08-20 指示書 A。SP は変えない） */
@media(min-width:768px){
  :root{
    --sec-y:88px;
    --bar-h:84px;
    --tel-num:22px;
    --fs-h1:36px;
    --fs-h2:30px;
    --fs-h3:23px;
    --fs-body:18px;
    --fs-catch:40px;
    --fs-introfv:19px;
    --fs-lead:18.5px;
    --fs-small:16.5px;
    --fs-foot-nav:14.5px;
    --fs-foot-ext:14.5px;
    --fs-foot-owner:14.5px;
    --fs-r1:16px;
    --fs-btn:18px;
    --fs-label:14px;
    --fs-cats:13.5px;
    --fs-sitename:19px;
    --fs-tel:16px;
    --fs-telnum:20px;
    --fs-note:13px;
    --fs-next:15px;
    --fs-bigno:134px;
    --fs-nav:17px;
    --fs-arrow:16px;
    --fs-gnav:16px;
    --fs-gnav-sub:15px;
    --fs-gnav-brand:17px;
  }
}
/* quiet トーン（R7・R8）: 色は変えず、余白だけ 1.25 倍にする（tone-and-manner 5章）。
   崩し（微回転・はみ出し・グリッド外し）は quiet ではすべてオフ（CSS 側で :not([data-tone="quiet"])） */
[data-tone="quiet"]{ --sec-y:calc(56px * 1.25) }
@media(min-width:768px){
  [data-tone="quiet"]{ --sec-y:calc(88px * 1.25) }
}

/* ============================================================
   common.css — カミキリベヤのオーダーウィッグ
   :root のトークンは build.mjs が design-tokens.json から書き出す（このファイルの先頭に差し込まれる）。
   **ここには色コードも px の生値も書かない。** すべて var() を参照する（CLAUDE.md 7）。

   造形の作り方は 09-design/references/reference-spec.md のとおり:
     罫    = 点線パターン（linear-gradient ＋ background-size 4px 1px）。1px 実線の border は使わない（3-8）
     面境界 = 背景色 ＋ SVG マスク（画像で作らない。色を変えれば境界も追従する）（3-2）
     影    = 1つも使わない（1-8）
     角丸  = 10px とピルの2値のみ（3-7）
     色    = クリーム／白／濃クリーム／紺 ＋ 文字色2段のみ。体系外の色を置かない（3-10）
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:var(--fs-body)}
body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-size:var(--fs-body);
  background-color:var(--cream);
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
ul,ol{list-style:none}

/* リンクは下線を出す（本文中・導線とも）。ボタン・ナビは面で識別できるので下線を外す */
main a{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
main a.btn-line,main a.btn-out,main a.cta-detail,main a.go,main a.card-link,main a.navcard{text-decoration:none}
main a.cta-detail,main a.go,main a.card-link{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:var(--focus-off)}

.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:var(--on-deep);padding:10px 16px;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* タップ領域 44px（B-9）。テキストリンクは行の高さで確保する */
.btn-line,.gnav-menu,.drawer-close,.sticky-cta a{min-height:var(--btn-h)}

/* ---------- 共通の型 ---------- */
.inner{max-width:1280px;margin:0 auto;padding-left:20px;padding-right:20px}
.sec{padding-top:var(--sec-y-bottom);padding-bottom:var(--sec-y-bottom)}
/* 余白の非対称（imperfection）。セクションごとに上下を反転する。quiet ではオフ */
[data-tone]:not([data-tone="quiet"]) .sec:nth-of-type(odd){padding-top:var(--sec-y-top);padding-bottom:var(--sec-y-bottom)}
[data-tone]:not([data-tone="quiet"]) .sec:nth-of-type(even){padding-top:var(--sec-y-bottom);padding-bottom:var(--sec-y-top)}
[data-tone="quiet"] .sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
/* 各ページの最初のセクションは、上に固定バー（--bar-h）があるぶん上余白を詰める。
   R5 の最初の画面・R1 の1画面（B-8）を成立させるための調整で、行間・文字サイズは変えていない */
[data-tone]:not([data-tone="x"]) .sec.fv-lite:nth-of-type(n){padding-top:20px;padding-bottom:40px}
[data-tone]:not([data-tone="x"]) .sec.onescreen:nth-of-type(n){padding-top:24px;padding-bottom:24px}
.sec[data-surface="white"]{background:var(--white)}
.sec[data-surface="dcream"]{background:var(--dcream)}

h1,h2,h3{font-weight:var(--w-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
.sec h2,.deep h2{margin-bottom:.9em}
/* 2026-08-28: 1つのセクションに見出しが何本も並ぶページ（R18 プライバシーポリシー）で、
   前の節の本文と次の見出しがくっついて見えた。**2本目以降の見出しにだけ**上の余白を足す。
   1本目（節の先頭）は従来どおり触らない＝ほかのページの見え方は1pxも変わらない。 */
.sec .inner > .hd:not(:first-child){margin-top:2.4em}

/* 見出しのピクトグラム（担当者指示 2026-08-21 A）。h1・h2・h3 のすべてに付く（例外は FV のキャッチ）。
   線画は currentColor で描く。クリーム／白の面では紺、紺の面では面の文字色をそのまま継ぐ。
   **色は増やさない**（4色＋文字色の体系のまま。reference-spec 3-10） */
.hd{display:flex;align-items:flex-start;gap:.5em}
.hd > .ico{flex:none;width:1.05em;height:1.05em;color:var(--navy);
  /* 行の中心ではなく1行目の中心に合わせる（行間 1.9 の分だけ下げる） */
  margin-top:calc((var(--lh-heading) - 1.05) * .5em)}
.hd > .ico svg{display:block;width:100%;height:100%}
.hd > .ht{flex:1 1 auto;min-width:0}
.deep .hd > .ico,.on-navy .hd > .ico{color:currentColor}

.sec p + p,.sec p + ul,.sec ul + p{margin-top:1em}
/* ---- 本文の行長（2026-08-28 2回目の指示） ----
   「特に指示のないコンテンツはコンテンツ幅全域に表示されるようにし、おかしな所で改行しない様に。」
   **旧: .sec p,.deep p{max-width:var(--measure)}（--measure = 35em）。**
   これが原因で、コンテンツ幅 1280px の中で本文だけ約 560px で折り返し、
   文の途中の見当違いな位置で改行して見えていた（.lead-wide はこの上限を外すための逃げだった）。
   上限そのものを外し、**本文は .inner の幅（1280px）いっぱいで流す。**
   --measure トークンは消していない（09-design に残す。戻すときはここに1行足すだけ）。 */
.eyebrow{display:block;font-size:var(--fs-label);letter-spacing:.15em;font-weight:var(--w-heading);color:var(--navy);margin-bottom:.6em}
.on-navy .eyebrow,.deep .eyebrow{color:var(--on-deep);opacity:.85}
strong,b{font-weight:var(--w-strong)}

/* 罫（原崎の実測どおりの点線パターン。border は使わない） */
.rule{
  height:1px;
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0;
}
.deep .rule{background-image:linear-gradient(to right, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px)}

/* ---------- 部品8: 再保証の一文の型（左に紺の縦線。背景塗り・枠・アイコンなし） ---------- */
.reassure{border-left:var(--reassure-w) solid var(--navy);padding-left:1em;margin:.75em 0}

/* ---------- 導線リンク ---------- */
.go{display:inline-flex;align-items:center;gap:.45em;color:var(--navy);font-weight:var(--w-heading);min-height:2.2em}
.golist li{margin-top:.5em}
.golist li:first-child{margin-top:0}

/* ---------- 定義行（「**語**　説明」の組） ---------- */
.defrow + .defrow{margin-top:1.1em}
.defrow .term{font-weight:var(--w-strong);letter-spacing:.04em}
/* 2026-08-28（2回目）: ここも行長の上限（旧 max-width:var(--measure)）を外した。
   列の幅は行や格子の側が決めており、その中でさらに 35em で折るとおかしな位置で改行していた。 */
.defrow .body{margin-top:.15em;color:var(--sub);font-size:var(--fs-small);line-height:1.8}
.deep .defrow .body{color:var(--on-deep);opacity:.9}

/* 2026-08-28（4回目）「"毛の素材について"エリアと上部エリアがくっついている。マージンを 20px 空けて」
   （"料金について" も同じ）。**単体の .card には上余白が無かった**（.cards には 1.4em ある）。
   行リストや格子のすぐ下にカードが来る形は /wig/ の2か所だけだが、規則として置いておく。 */
.rowlist + .card,.gridlist + .card,.cardgrid + .card,.ticks + .card{margin-top:20px}

/* ---------- カード（白地・角丸10・影なし） ---------- */
.cards{display:flex;flex-direction:column;gap:14px;margin-top:1.4em}
.card{background:var(--white);border-radius:var(--r);padding:var(--card-pad)}
.sec[data-surface="white"] .card{background:var(--cream)}
.card .lead{font-weight:var(--w-strong);font-size:var(--fs-lead);letter-spacing:.04em;line-height:1.6}
.card .body{margin-top:.4em;font-size:var(--fs-small);color:var(--sub);line-height:1.8}
/* ---------- 写真つきカードの格子（2026-08-28 3回目の担当者指示。/flow/ の2節） ----------
   「3行2列のカードにして。各カードには画像を配置。**スマホ版は1列**で良い。」
   SP は1列（＝.cards と同じ積み方）。PC で2列にする。
   **造形はカードのまま**（白い面・角丸 10px・影ゼロ）。新しい様式を足していない。 */
.cardgrid{display:grid;gap:16px;margin-top:1.4em}
.cardgrid .card{display:flex;flex-direction:column}
/* カードの上いっぱいの写真。カードの角丸に合わせて上2隅だけ丸める（下は本文が続く）。
   .card の内側の余白ぶんだけ外へ広げて、**写真をカードの幅いっぱい**にする。 */
.cardgrid .fig.cardtop{margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  width:auto;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.cardgrid .fig.cardtop img{border-radius:var(--r) var(--r) 0 0}
.cardgrid .no{margin-top:.9em;color:var(--navy);font-weight:var(--w-heading);
  font-size:var(--fs-navno);letter-spacing:.06em;line-height:1.2}
.cardgrid .lead{margin-top:.25em}
.cardgrid .no + .lead{margin-top:.15em}
.cardgrid .fig.cardtop + .lead{margin-top:.9em}
/* 紺面の中でも、カードは白い面のまま。
   **色の指定を必ず戻す。** .deep は節ごと color:var(--on-deep)（白）なので、
   白いカードの中で札（.lead）が**白のまま消える**（.body だけは --sub を持っていて助かっていた）。 */
.deep .cardgrid .card{background:var(--white);color:var(--ink)}

/* 比較のカード（R7「できること／できないこと」・R8「訪問で…」。2026-08-21 担当者指示 A-4）。
   **対比が意味そのもの**の並びだけをカードにする。読み進めるだけの列挙はカードにしない */
.cards.compare .card > .hd{margin-top:0}
.cards.compare .card ul{margin-top:.7em}
.cards.compare .card li + li{margin-top:.55em}
.cards.compare .card li{color:var(--sub);font-size:var(--fs-small);line-height:1.8}
.card .note{margin-top:.5em}
.card-link{display:inline-flex;align-items:center;gap:.4em;margin-top:.7em;color:var(--navy);font-weight:var(--w-heading);font-size:var(--fs-small);min-height:2.2em}

/* ---------- 部品15: リンクボタン（枠ピル。2026-08-21 担当者指示 B-2・B-3・B-4） ----------
   紺 1.5px の枠・地は透明・紺文字・ピル。塗りピルは CTA 専用にして、行動の強さを分ける。
   影ゼロ・角丸はピルの1値のまま（確定値を触っていない）。高さ 44px でタップ領域を満たす。 */
.btn-out{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--btn-h);padding:0 20px;border:1.5px solid var(--navy);border-radius:var(--pill);
  color:var(--navy);font-weight:var(--w-heading);font-size:var(--fs-small);letter-spacing:.04em;line-height:1.4}
.card .btn-out{margin-top:.9em}
.deep .btn-out,.on-navy .btn-out{border-color:rgba(255,255,255,.9);color:var(--white)}
.btn-row{margin-top:1.4em;text-align:center}
/* ボタンの行は本文の行長（--measure）を受けない。受けると「中央」が本文幅の中央になる */
.sec .btn-row,.deep .btn-row{max-width:none}

/* ---------- 部品18: 行リスト（面＋点線罫。2026-08-22 担当者指示 C） ----------
   造形は FV の主ナビと同じ「白い面＋点線罫で区切った行」。新しい様式を持ち込まない。
   角丸は 10px の1値、影ゼロ。番号は紺で、順序のある並びのときだけ置く。 */
.rowlist{margin-top:1.2em;background:var(--white);border-radius:var(--r);padding:2px 20px}
.sec[data-surface="white"] .rowlist{background:var(--cream)}
.rowlist .row{display:flex;gap:16px;padding:1.05em 0}
.rowlist .row + .row{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.rowlist .no{flex:none;width:2.1em;color:var(--navy);font-weight:var(--w-heading);
  font-size:var(--fs-navno);letter-spacing:.06em;line-height:1.7}
.rowlist .tx{min-width:0}
.rowlist .tx .term{font-weight:var(--w-strong);letter-spacing:.04em}
.rowlist .tx .body{margin-top:.25em;color:var(--sub);font-size:var(--fs-small);line-height:1.8}

/* 行に添える画像（2026-08-28 担当者指示「各要素の右側に画像を配置」）。
   SP は本文の下、PC は右隣。**行の中に入れてあるので、行が増えても対応が崩れない。** */
.rowlist.has-fig .row{flex-wrap:wrap}
.rowlist .fig.rowfig{width:100%;margin:.9em 0 0;border-radius:var(--r)}
/* 2026-08-28（4回目）: 写真2枚を**見出し・本文の左**に置く形（部品18 の変種。pairList）。
   SP は本文の上に2枚を横に並べる。PC で左の列にする。 */
.rowlist.has-pair .row{flex-wrap:wrap}
.rowlist .pairfigs{display:flex;gap:10px;width:100%;order:-1}
.rowlist .fig.pairfig{flex:1 1 0;margin:0 0 .9em;border-radius:var(--r)}
.rowlist.has-fig .tx{flex:1 1 100%}

/* ---------- 2列の行リスト（2026-08-28 担当者指示。/wig/ b2） ----------
   罫は**列ごとに引く**。1本の罫が2列をまたぐと左右がひと続きに見えて、列の切れ目が分からない。
   列の間には縦の点線を1本入れる（罫は border ではなく背景のグラデーション＝体系どおり）。 */
.gridlist{margin-top:1.2em;display:grid;gap:0}
.gridlist .gcell{display:flex;gap:14px;padding:1.05em 0}
.gridlist .gcell + .gcell{
  background-image:linear-gradient(to right, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
/* **.fig を選択子に入れて詳細度を上げる。** これが無いと PC の
   `.deep-grid .fig{flex:none;width:360px}`（同じ詳細度・あとに書いてある）に負け、
   サムネイルが 360px に広がって本文の幅が 0 になる（2026-08-28 に実際にそうなった）。 */
.gridlist .fig.gthumb{flex:none;width:72px;margin:0;border-radius:var(--r)}
.gridlist .tx{min-width:0}
.gridlist .tx .term{font-weight:var(--w-strong);letter-spacing:.04em}
.gridlist .tx .body{margin-top:.25em;font-size:var(--fs-small);line-height:1.8}
.deep .gridlist .tx .body{color:var(--on-deep);opacity:.9}

/* ---------- 箇条書き（.ticks）。2026-08-22 担当者指示 C ----------
   **これまで .ticks には1行も指定が無く、素の <ul> がそのまま出ていた**（`ul,ol{list-style:none}`
   だけが当たるので、印も行間も持たない）。**項目の切れ目と、折り返した行の区別が付かない**状態で、
   /contact/「ご予約いただける内容」5件、/price/「含まれる3つ」などがそれに当たっていた。
   造形は新しく作らず、**部品18（行リスト）と同じ「面＋点線罫で区切った行」**をそのまま使う。
   カードの中（R7 b1・R8 b2）は**カードが既に面を持っている**ので、面を重ねず罫だけを引く。
   「できないこと」の列に付いていた `.negs` は外した——**規則が1つも無く、何も起きていなかった**
   （検証10 が拾う）。できないことであるのは見出しが言っているので、別の見せ方は作らない。 */
.ticks{margin-top:1.2em;background:var(--white);border-radius:var(--r);padding:2px 20px}
.sec[data-surface="white"] .ticks{background:var(--cream)}
.ticks li{padding:.9em 0;line-height:1.8}
.ticks li + li{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
/* カードの中・紺面の中では面を重ねない */
.cards .ticks,.deep .ticks{background:transparent;border-radius:0;padding:0;margin-top:.7em}
.cards .ticks li{padding:.6em 0}
.deep .ticks li + li{
  background-image:linear-gradient(to right, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px)}
/* .cards.compare の既存指定（li + li の margin）は罫が無い前提の値なので、罫を引く側に寄せる */
.cards.compare .card .ticks li + li{margin-top:0}

/* ---------- 価格（.pricebox / .priceline）。2026-08-22 担当者指示 C ----------
   **ここにも指定が無く、価格が本文と同じ大きさの段落として流れていた。**
   /price/ の最初の画面で一番読まれる要素なので、行リストと同じ面に載せ、金額だけを紺・h3 の級数にする。
   **色も角丸も既定値のまま**（クリーム／白／紺、角丸 10px の1値）で、新しい色や形は足していない。 */
.pricebox{margin-top:1.2em;background:var(--white);border-radius:var(--r);padding:2px 20px}
.sec[data-surface="white"] .pricebox{background:var(--cream)}
.priceline{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.2em 1em;padding:1.05em 0;max-width:none}
.priceline + .priceline{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.pricebox .pname{font-weight:var(--w-strong);letter-spacing:.04em}
.pricebox .pval{color:var(--navy);font-weight:var(--w-heading);font-size:var(--fs-h3);letter-spacing:.02em;line-height:1.3}
.formline{margin-top:1em}

/* ---------- 番号付きの導線リスト（.numlist。R1「まず、この3つ」）。2026-08-22 ----------
   ここも指定が無く、番号（01〜03）が本文の中に流れていた。行リストと同じ罫で区切る。
   R1 は 1.6画面の目安があるので**面は敷かず、罫と余白だけ**でまとまりを作る。 */
.numlist li{position:relative;padding:.55em 0 .55em 2.5em}
/* R1 は 1.6画面の目安がある。**上下端の余白は節の余白と重なる**ので落とす（行間ではなく重複ぶん） */
.numlist li:first-child{padding-top:0}
.numlist li:first-child .no{top:0}
.numlist li:last-child{padding-bottom:0}
.numlist li + li{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
/* 番号の級数は行リスト（部品18）と同じ --fs-navno に揃える（2026-08-22 担当者指示）。
   同じ「行の頭の番号」なので、部品ごとに級数が違う状態を残さない。 */
.numlist .no{position:absolute;left:0;top:.6em;color:var(--navy);font-weight:var(--w-heading);
  font-size:var(--fs-navno);letter-spacing:.06em}

/* ---------- 紺面の中の行リスト（R2 b2「『含まれるもの』の内訳」）。2026-08-22 ----------
   紺面の中に白い面を重ねない（面の中は面の色で完結させる。reference-spec 3-3）。
   罫だけを「濃色面用の罫色」で引き、語は白、説明は白の 90%。 */
.deep .rowlist{background:transparent;border-radius:0;padding:0}
.deep .rowlist .row + .row{
  background-image:linear-gradient(to right, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px)}
.deep .rowlist .tx .body{color:var(--on-deep);opacity:.9}
.deep .rowlist .no{color:var(--on-deep);opacity:.75}


/* ---------- 部品17: 節末尾の導線（問い＋ボタン。2026-08-21 担当者指示 A-3） ---------- */
.go-btns{margin-top:1.2em;display:flex;flex-direction:column;gap:1.1em}
.go-item .go-q{margin-bottom:.5em;color:var(--sub);font-size:var(--fs-small);line-height:1.7}
.go-item .btn-out{width:100%}

/* ---------- 分岐カード（R10 b6。画像 → ボタン → 説明文） ---------- */
/* 崩し（写真の微回転）はカードの中では当てない。枠の中で傾くと「崩し」ではなく「ずれ」に見える */
.branch-card .fig{margin:0 0 .2em;transform:none}

/* ---------- 部品: 濃色面の中の導線カード（.navcards）。2026-08-27 担当者指示 ----------
   「カミキリベヤのウィッグについて」「お悩み解決までの流れ」を**角丸長方形のカード2列**で置く。
   紺面の中なので、地は透明・枠と文字は白（`.on-navy .btn-line` と同じ作り）。**新しい色を足していない。** */
.navcards{display:grid;gap:12px;margin-top:1.6em}
/* 2026-08-28（3回目）「2列の CTA の幅をそれぞれ 30% ずつ縮小する。本文に対して中央に配置。」
   対象は**紺面の中の2枚**（トップ「私たちがすること」）。
   2026-08-28（4回目）「小さくしたが2行になってしまった。プラス5%広げて。また中央寄せにしてもらったが、左寄せに修正。」
   旧値: 70%・中央寄せ → **75%・左寄せ**。列いっぱいだったのがさらに前の値。
   ほかのページ末尾の .navcards は指示に無いので**触っていない**（.deep の中だけに当てる）。 */
.deep .navcards{grid-template-columns:75%;justify-content:start}
/* 2026-08-28（4回目）「CTA は線・文字とも白色で可読性が低いので青系にして」。
   **もとは紺面の中の部品として作ったので、枠も文字も白だった。**
   そのまま明るい面（クリーム・白）でも使っていたため、**ほとんど見えていなかった**
   （/wig/ のアフターサービス、薄毛3ページのウィッグの種類、/flow/ の末尾）。
   既定を紺に変え、**紺面の中だけ白に戻す。** オンマウスの動き（オレンジ）はそのまま。 */
.navcard{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1.5px solid var(--navy);border-radius:var(--r);padding:var(--card-pad);
  color:var(--navy);min-height:var(--btn-h)}
.deep .navcard,.on-navy .navcard{border-color:rgba(255,255,255,.9);color:var(--on-deep)}
/* 1枚だけのときは中央に置く（担当者「ボタンは中央寄せにして」）。
   2枚並ぶところは指示が無いので触っていない。 */
.navcards:not(:has(.navcard + .navcard)){justify-content:center;grid-template-columns:minmax(0,min(100%,26em))}
.navcard .lead{font-weight:var(--w-heading);font-size:var(--fs-lead);line-height:1.5}
.navcard .arw{flex:none;font-weight:var(--w-strong)}

/* ---------- 部品: 画像と文章の2列（.split）。2026-08-27 担当者指示 ----------
   「ご相談だけでも大丈夫です」で、**画像を左・見出しと本文を右**に置く。
   SP は積む（画像 → 見出し → 本文）。PC だけ2列にする。新しい色も角丸も足していない。 */
.split{display:block}
.split .fig{margin-top:0}
.split-tx{min-width:0}
.split-tx > .hd:first-child{margin-top:1.2em}
.branch-card .note{margin-top:.7em}
.branch-card .btn-out{width:100%}

/* ---------- figure（部品9） ---------- */
.fig{position:relative;border-radius:var(--r);overflow:hidden;margin:1.6em 0}
.fig img{width:100%;aspect-ratio:var(--ar);object-fit:cover}
.fig-band{position:absolute;left:0;right:0;bottom:0;min-height:var(--band-h);display:flex;align-items:center;gap:.6em;
  background:var(--band-bg);color:var(--ink);font-size:var(--fs-label);padding:.3em 1em}
.fig-tag{border:1px solid var(--navy);color:var(--navy);border-radius:var(--pill);padding:0 .6em;font-size:var(--fs-note)}
.fig-cap{margin-top:.5em;font-size:var(--fs-small);color:var(--sub);line-height:1.7}
/* 崩し: 写真の微回転。FV 主写真と quiet ページは対象外 */
[data-tone]:not([data-tone="quiet"]) .sec .fig:nth-of-type(odd){transform:rotate(var(--rot-odd))}
[data-tone]:not([data-tone="quiet"]) .sec .fig:nth-of-type(even){transform:rotate(var(--rot-even))}
.fv .fig,.deep .fig{transform:none}
/* 紺面の中の大判写真は角丸なし（原崎の実測） */
/* 2026-08-28 担当者指示「FV 下のセクションにある縦長の画像について、全て角丸にして」。
   紺面の中の写真は**角丸なし**が体系の決めだったが、縦長（.tall）はそこから外す。
   SP では左右いっぱいまで出していた（margin の負の値）ため角が画面外にあり、
   **角丸にしても見えない。**負の margin もあわせて外す。 */
.deep .fig{border-radius:0}
.deep .fig.tall{border-radius:var(--r)}

/* FV の波（面の境界）の塗り。**SVG の fill 属性に var() を書かない**
   （presentation attribute での CSS 変数の解決はブラウザによって効かず、写真が透けて
   キャッチのコントラストが割れる。実測で 1.01:1 まで落ちたため CSS 側に移した） */
.fv .mask path,.fv .photo .wave-top path{fill:var(--cream)}

/* ---------- 濃色面（全幅の紺面。3-1・3-3） ---------- */
/* **mask-size を必ず指定する。**（2026-08-21 修正）
   指定しないと mask-size は auto ＝ SVG の既定サイズ 300×150 になり、mask-repeat も repeat のままなので、
   帯の高さ 44px には**マスクの上 44px ぶんだけ**が当たる。波の実体は viewBox の下側（y=17〜60）にあるため、
   **当たるのは透明な部分だけになり、波が1本も出ない**（＝面の境界が直線に見える）。
   P12 でカンプの <svg fill> から mask 方式へ寄せたときに落ちた指定で、以来ずっと直線だった。 */
.edge{width:100%;height:var(--edge-h);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0}
.deep{background:var(--navy);color:var(--on-deep);padding:calc(var(--sec-y) * .7) 0}
.deep .inner{max-width:1280px;margin:0 auto}
.deep a{color:var(--on-deep)}
/* 2026-09-18: 紺面の中でも行リストとカードは白い面なので、リンクは紺で下線（/flow/ 10 の料金表へのリンクが白で見えなかった） */
.deep .rowlist a,.deep .card a{color:var(--navy);text-decoration:underline;text-underline-offset:.2em}
.bigno{position:absolute;z-index:2;left:8px;top:-34px;font-weight:var(--w-strong);font-size:var(--fs-bigno);line-height:1;color:var(--white);opacity:.55;letter-spacing:0}
.handwave{width:132px;height:12px;margin-top:20px}
.deep-grid{position:relative}
/* 巨大番号は **写真の角** に食い込ませる（3-4）。基準を写真側に置かないと見出しに重なる */
.figwrap{position:relative}
.deep-grid .fig{position:relative;margin:1.6em -20px 0}
.deep-grid .fig.tall{margin:1.6em 0 0}

/* ---------- ボタン ---------- */
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--pill);
  background:var(--navy);color:var(--white);font-weight:var(--w-heading);font-size:var(--fs-btn);letter-spacing:.08em;padding:0 22px}
/* 紺面の中は白枠ピル（原崎のヘッダー予約ボタンの型） */
.on-navy .btn-line,.deep .btn-line{background:transparent;border:1.5px solid rgba(255,255,255,.9);color:var(--white)}
/* ヘッダーの LINE ボタン（部品3）は塗りの面で識別できるので下線を出さない。
   本文の下線ルールは main の中だけに効くため、header では既定の下線が残っていた（2026-08-21 修正） */
.gnav .btn-line{text-decoration:none}
/* 2026-08-28 担当者指示「CTA ボタンはオレンジ色にし、目立つように」。
   **常時オレンジで塗るのは、この1個だけ。** 本文中の CTA は紺のままにして、
   「今すぐの行動はヘッダー」という関係を色で示す。白文字で 5.20:1（紺は 5.69:1）。 */
.gnav .btn-line{background:var(--orange);color:var(--on-orange)}

/* ---------- 下層3ページの最初の画面（2026-08-28 担当者指示） ----------
   「ヘッドラインとリードコピーの FV の背景**全て**に画像が当たるように。
     リードコピーは白色の角丸四角形の背景。不透明度25%。」
   写真は節の地。文字は同じ節の .inner に重ねる。
   **写真の上に置く白は 25% だけ**なので、地の明るさは写真そのものが持つ。
   そのため画像側で「左半分と上帯を無地の明るい面にする」ことを指定して作っている
   （09-design/image-plan.json の IMG-23-1〜3）。造形の値は既存のまま（角丸 --r・影ゼロ）。 */
.fv-hero{position:relative;overflow:hidden;isolation:isolate}
/* 2026-08-28（4回目）「FV の画像を、下のセクションにおける波線部分まで広げて。白いマージン部分が気になる。」
   **原因は、波形の面境界（.edge）が節の外に置かれた別の帯だったこと。**
   帯の中の「波の上側」はマスクで抜けており、そこから**ページの地（クリーム）が見えていた。**
   帯を FV の上へ引き上げ、そのぶん FV の下余白を足す。
   （帯の高さぶん引き上げて、同じだけ足すので、**下の節の位置は動かない。**）
   引き上げた帯は写真の上に乗るので、波の下側＝紺、波の上側＝**写真がそのまま見える。** */
.fv-hero + .edge{position:relative;z-index:2;margin-top:calc(var(--edge-h) * -1)}
.fv-hero:has(+ .edge){padding-bottom:calc(var(--sec-y-bottom) + var(--edge-h))}
.fv-hero .hero-media{position:absolute;inset:0;z-index:0}
/* SP は縦長に切るので、**横のどこを見せるかで読めるかどうかが決まる。**
   写真は「左半分＝無地の明るい壁／右＝人物」で作ってあるので、左寄りを見せて
   文字が壁の側に来るようにする。**中央を見せると顔の上に本文が乗り、25% の白では読めない**
   （2026-08-28 に実際にそうなった）。PC は横幅が足りて全体が入るので中央のままでよい。 */
.fv-hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.fv-hero .inner{position:relative;z-index:3}
.fv-hero .hd{max-width:14em}
/* 2026-08-28 担当者指示: 白の不透明度を **25% → 50%** へ。
   旧値 .25 では本文の下限（4.5:1）に届いていなかった（SP 1.59〜1.76:1・実測）。
   .5 で SP 4.17〜4.42:1・PC 6.37:1 以上。**SP はまだ下限にわずかに届かない**（下限は 4.5:1）。 */
/* 2026-09-08 担当者指示「リードコピー背景の白色部分について、不透明度を15パーセントずつ上げて」。旧値 .5 → **.65**（.25 → .5 → .65 の履歴） */
.fv-hero .hero-lead{margin-top:1.2em;background:rgba(255,255,255,.65);border-radius:var(--r);padding:16px 16px 18px}
.fv-hero .hero-lead p{max-width:none}
.fv-hero .hero-lead p + p{margin-top:1em}
/* 「仮画像」の帯は写真の側に置く（区分Sの差し替えが要ることを隠さない。RC-1） */
.fv-hero .fig-band{z-index:1}


/* カードの中を「文章 ＋ 写真」にする（2026-08-28 担当者指示。/wig/ の料金）。
   SP は縦、PC は横並び。**カードの造形（面・角丸・余白）は変えていない。** */
.cardwithfig{display:flex;flex-direction:column;gap:14px}
.cardwithfig .cardtx{min-width:0}
.cardwithfig .fig.cardfig{margin:0;border-radius:var(--r)}

/* ---------- 地の装飾（2026-08-28 担当者指示） ----------
   節の下端をまたいで置く。**前後関係は z-index を積み上げずに、塗りの順序で決める。**
     地の色（節の背景・位置指定なし）→ 装飾（位置指定・z-index 0）→ 中身（.inner・z-index 1）
   次の節の背景も位置指定が無いので、**装飾はそこにも重なる**＝境目をまたげる。
   .deco に z-index を持たせないと中身より前に出る（位置指定ありのほうが後に塗られるため）。 */
.sec,.deep{position:relative}
/* 重なりの順（下から）: 地の色 → 波形の面境界（.edge）→ 装飾 → 中身。
   **装飾を .edge より下に置くと、波に食われて半分しか見えない**（2026-08-28 に実際にそうなった）。
   .edge は節の外に置かれた兄弟要素なので、節の中の装飾より**後に塗られる**。
   z-index を明示して順序を固定する。 */
.edge{z-index:1}
.deco{position:absolute;z-index:2;opacity:.75;height:auto;pointer-events:none;user-select:none}
/* 装飾は原寸の 22%（2026-08-28 4回目の指示。旧: 20% → 30% → 50%）。いちばん大きいもので 338px。
   画面が狭いと**横にはみ出して横スクロールが出る**。
   **大きさは指示どおりのまま、main の外にはみ出したぶんだけ切る。**
   overflow-x:clip は縦のはみ出しを止めないので、**節の境目をまたぐ効果は保たれる**
   （overflow:hidden にすると縦も切れて、またがらなくなる）。 */
main{overflow-x:clip}
.sec > .inner,.deep > .inner{position:relative;z-index:3}

/* ---- 横位置（2026-08-28 2回目の指示） ----
   「メインコンテンツに被る位置に配置しているが、左右の余白を埋めるための装飾がぶち壊しである。左右に広げて。」
   **旧: 端から 2〜27% という割合で置いていた。** 割合で置くと、画面が広いほど中央＝本文の上へ寄る。
   ここでは「本文の外側」を基準にする:
     本文の左右の端 = 50% ∓ (--wrap-half)。装飾の内側の端をそこに合わせれば、本文には掛からない。
   ただし画面が狭いと余白そのものが無く、そのままでは装飾が画面の外へ出て**見えなくなる。**
   min() で「本文の外側」と「画面端から --deco-peek だけ内側」の**内側にあるほう**を採る。
     広い画面 → 本文の外側（＝余白を埋める）／狭い画面 → 画面端に --deco-peek だけ残す。 */
/* --deco-peek: 画面が狭くて余白が無いとき、画面端に何 px 残すか。
   1280px 幅（＝本文の幅と画面の幅が同じ）では余白が 0 なので、この値だけ本文に掛かる。
   1440px 以上では「本文の外側」のほうが内側になり、**本文には一切掛からない。** */
:root{--wrap-half:620px; --deco-peek:70px; --edge-h:44px}
/* --deco-nudge は1枚ずつの微差（-20 / 0 / +20px。2026-08-28 3回目の指示）。
   **正の値ほど本文から外へ出る。** 左右で符号の向きが同じになるよう、両方とも足す。 */
.deco-l{right:calc(min(calc(50% + var(--wrap-half)), calc(100% - var(--deco-peek))) + var(--deco-nudge, 0px))}
.deco-r{left:calc(min(calc(50% + var(--wrap-half)), calc(100% - var(--deco-peek))) + var(--deco-nudge, 0px))}

/* トップの FV は節ではなく <div class="fv">。ここにも装飾を1枚置くので、
   **位置の基準になるよう position を持たせる。** 持たせないと画面全体を基準にしてしまう。
   中身（SP 用・PC 用の両方）は装飾より前に出す。 */
.fv{position:relative}
.fv > .fv-sp,.fv > .fvpc{position:relative;z-index:3}

/* FV の中にも1枚置く（担当者「また FV 左側にも配置したい」）。
   **旧: .fv-hero .deco{display:none} で消していた。**
   FV は overflow:hidden なので、はみ出したぶんは FV の中で切れる＝ヘッダーには掛からない。
   重なりは 写真（.hero-media z-index 0）→ 装飾（1）→ 文字（.inner 3）。 */
.fv-hero .deco{z-index:1}
/* PC だけ 20px 下げる指定は、下の PC ブロック（.deco-fv）にある（2026-08-28 4回目の指示）。 */

/* ---------- パンくずリスト（2026-08-28 2回目の指示。FV の最上部） ----------
   造形は既にあるものだけで組む: 級数は --fs-label、色は --sub、区切りは「/」の文字。
   **新しい様式を足していない。** 区切りは ::before で描く＝読み上げに拾われない。 */
/* 下の余白を明示する。**入れないとリード文の1行目にくっつき、本文の一部に見える**
   （.sec p + p の間隔は p 同士にしか効かず、nav の次の p には効かない。実際にそう出た）。 */
.crumb{margin-top:0;margin-bottom:1.6em;font-size:var(--fs-label);color:var(--sub);line-height:1.6}
/* FV のあるページ。**FV の上端に貼る**（節の中身は縦中央に置くので、流れに入れると一緒に中央へ動く）。
   .inner を中に持たせて、左右の位置と最大幅を本文と揃える。 */
.fv-crumbwrap{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:14px}
/* 2026-08-28（3回目）「パンくずリストは白背景は不要なので削除」。
   旧: display:inline-block／background:rgba(255,255,255,.5)／border-radius:var(--r)／padding:5px 12px。
   地を外したので、**写真の明るいところに載るかどうかは FV の画像側の作りで決まる**
   （画像は「左半分と上帯を無地の明るい面にする」指定で作ってある）。 */
.fv-crumbwrap .crumb{margin-bottom:0}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .5em;list-style:none;margin:0;padding:0}
.crumb li{display:flex;align-items:center;gap:.5em}
.crumb li + li::before{content:"/";opacity:.55}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{text-decoration:underline;text-underline-offset:.22em}
.crumb [aria-current="page"]{color:var(--ink)}

/* ---------- 部品4・5: 共通 CTA ---------- */
.cta-panel{background:var(--navy);border-radius:var(--r);padding:24px 20px 22px;text-align:center;margin-top:1.8em}
.cta-panel .cta-lead{margin:0 auto .9em;max-width:28em;color:var(--on-deep);font-size:var(--fs-body)}
.cta-panel .btn-line{height:52px;width:100%;max-width:22em}
/* 2026-08-27: FV の CTA は文言が長く（「まずは無料のカウンセリングから」）、PC の左列 314px では
   2行になる。**高さ固定のままだと文字が箱から出る**ので、FV の中だけ高さを可変にする。
   角丸・色・枠はピルのまま（トークンを変えていない）。 */
.fv .cta-panel .btn-line{height:auto;min-height:52px;padding:12px 18px;line-height:1.5}
/* 2026-08-28 担当者指示: 「まずは無料のカウンセリングから」はオンマウスでオレンジに変わる。
   **左から右へ斜めに色が切り替わる。**
   作り方: 斜めに倒した面を1枚、ボタンの外（左）に置いておき、触れたら右へ滑らせる。
   **色を animation で点滅させない**（面が動くほうが「切り替わる」が見える）。
   .on-navy の中では地が透明・枠と文字が白なので、この面がそのまま塗りになる。
   z-index を -1 にしても isolation:isolate で文字の下に収まる（節の地には潜らない）。 */
/* 2026-08-28（3回目）「オンマウスでオレンジに可変するアニメーションを実装して。**他の全 CTA も同様に。**」
   旧はこの効きが `.cta-panel .btn-line`（＝共通 CTA のボタン）だけだった。
   **行動を促すボタンすべて**へ広げる: 塗りピル（.btn-line）・枠ピル（.btn-out）・
   紺面の導線カード（.navcard）・追従 CTA（.sticky-cta a）。
   本文中のテキストリンク（.go・.card-link）は**対象外**。あれはボタンではない。 */
.btn-line,.btn-out,.navcard,.sticky-cta a{position:relative;overflow:hidden;isolation:isolate}
.btn-line::before,.btn-out::before,.navcard::before,.sticky-cta a::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-15%;width:150%;
  background:var(--orange);transform:translateX(-118%) skewX(-16deg);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);z-index:-1}
.btn-line:hover::before,.btn-line:focus-visible::before,
.btn-out:hover::before,.btn-out:focus-visible::before,
.navcard:hover::before,.navcard:focus-visible::before,
.sticky-cta a:hover::before,.sticky-cta a:focus-visible::before{transform:translateX(0) skewX(-16deg)}
/* **ヘッダーの CTA は最初からオレンジ**なので、上から同じ色を滑らせても何も起きない。
   動かす意味が無いぶんを外す（色を変えたいわけではなく、変化を見せたい指示のため）。 */
.gnav .btn-line::before{display:none}
/* 触れているあいだは、枠と文字もオレンジの面に合わせる。
   **合わせないと、紺の文字がオレンジの上に乗って読めなくなる**（.btn-out・.sticky-cta .tel）。 */
.on-navy .btn-line:hover,.on-navy .btn-line:focus-visible,
.deep .btn-line:hover,.deep .btn-line:focus-visible,
.navcard:hover,.navcard:focus-visible{border-color:var(--orange)}
.btn-out:hover,.btn-out:focus-visible,
.sticky-cta .tel:hover,.sticky-cta .tel:focus-visible{color:var(--on-orange);border-color:var(--orange)}
/* 2026-08-28（5回目）「オンマウス時に文字色を白になるようにして」。
   **明るい面の導線カードは既定が紺文字**（D-092 で直したところ）。
   触れるとオレンジの面が滑り込むので、**紺の文字のままだとオレンジの上で沈む。**
   紺面の中のカードは元から白文字なので、この指定は両方に効いて食い違わない。 */
.navcard:hover,.navcard:focus-visible{color:var(--on-orange)}
.cta-panel .tel{margin-top:12px;color:var(--on-deep);font-size:var(--fs-tel);line-height:1.7}
.cta-panel .tel a{color:var(--on-deep)}
.cta-panel .tel .num{font-weight:600;font-size:var(--tel-num);letter-spacing:.02em}
.cta-detail{display:inline-flex;align-items:center;gap:.4em;margin-top:14px;color:var(--on-deep);font-size:var(--fs-small);min-height:2.2em}
.cta-note{margin-top:.8em;color:var(--on-deep);opacity:.85;font-size:var(--fs-small)}

/* ---------- 表（R2 b4・R11 b1） ---------- */
.tablewrap{overflow-x:auto;margin-top:1.2em}
/* 2026-09-18: 料金表（/wig/）の下に本文が続くので、下にも間を取る */
.tablewrap + p{margin-top:1.4em}
/* 料金表（/wig/）: 2列だけなので、狭い画面でも横に流さず収める。金額は右寄せ・折り返さない */
.price-table table{min-width:0}
.price-table th{width:auto}
.price-table td{white-space:nowrap;text-align:right;width:7em}
.price-table thead th:last-child{text-align:right}
table{border-collapse:collapse;width:100%;min-width:34em;font-size:var(--fs-small)}
th,td{text-align:left;vertical-align:top;padding:.85em .9em;line-height:1.8}

/* ---------- 店舗情報＋地図（R10 b9）。2026-08-28 担当者指示 ----------
   SP は縦に積む（表 → 地図）。PC だけ 2 列にして地図を右へ置く。
   地図は Google マップの実地図（iframe）。仮の枠（.card）はやめた。 */
.aboutgrid{margin-top:1.2em}
.mapbox{margin-top:1.2em}
.mapframe{display:block;width:100%;height:280px;border:0;border-radius:var(--r)}
.mapnote{margin-top:.6em;font-size:var(--fs-small)}

/* ---------- 店舗ギャラリー（R10 b9）。2026-08-28 担当者指示 ----------
   **外観 1 点だけにしない。**5 点を横に並べ、**右から左へゆっくり送る**。
   継ぎ目を出さないために同じ 5 点を 2 組並べ、**-50% ちょうど**まで送って戻す。
   間の隔たりは gap ではなく **margin-right** にする。gap だと 10 個の間の 9 つしか隔たりが
   入らず、-50% が 1 組分の幅と半個分（＝8px）ずれて、一周ごとに飛ぶ。
   オンマウスでその 1 枚が大きくなり、**両隣もつられて少し大きくなる**（JS を使わない。
   右隣は `:hover + `、左隣は `:has(+ :hover)`）。オンマウスの間は送りを止める。
   拡大した分が上下で切れないよう、送りの外枠に上下の余白を取ってある。 */
.gallery{margin-top:1.8em;overflow:hidden;padding:20px 0}
.galtrack{display:flex;width:max-content;animation:galslide 60s linear infinite}
@keyframes galslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gallery:hover .galtrack,.gallery:focus-within .galtrack{animation-play-state:paused}
.galitem{position:relative;flex:none;width:240px;margin-right:16px;border-radius:var(--r);overflow:hidden;
  transition:transform .35s ease;will-change:transform}
.galitem img{width:100%;aspect-ratio:3/2;object-fit:cover}
.galitem:hover{transform:scale(1.16)}
.galitem:hover + .galitem,.galitem:has(+ .galitem:hover){transform:scale(1.07)}
thead th{font-weight:var(--w-heading);color:var(--navy)}
tbody tr{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0;
}
.spec th{width:9em;white-space:nowrap}

/* ---------- FAQ ---------- */
.faq{margin-top:1.2em}
.faq > div{padding:1.1em 0;
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.faq .q{font-weight:var(--w-strong)}
.faq .a{margin-top:.4em;color:var(--sub);font-size:var(--fs-small);line-height:1.85}

/* ---------- 引用（R4 b2。代表者の言葉。原文のまま） ---------- */
blockquote{border-left:var(--reassure-w) solid var(--navy);padding:.2em 0 .2em 1em;margin:1.2em 0;color:var(--ink)}
.deep blockquote{border-left-color:var(--white)}

/* ---------- 4つの場面のアイコン（D-011。線画・currentColor・塗りなし） ---------- */
.scenes{display:flex;flex-direction:column;gap:12px;margin-top:1.2em;counter-reset:scene}
.scene{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:var(--r);padding:14px 18px}
.sec[data-surface="white"] .scene{background:var(--cream)}
.scene .ico{flex:none;width:32px;height:32px;color:var(--navy)}
.scene .ico svg{width:100%;height:100%}
.scene .no{flex:none;font-size:var(--fs-navno);color:var(--navy);font-weight:var(--w-heading);letter-spacing:.06em}
.scene .label{font-weight:var(--w-heading)}

/* ---------- parts-3（部品10。SP は横型行カード・PC は3カード） ---------- */
.parts3{display:flex;flex-direction:column;gap:12px;margin-top:1.4em}
.part{display:flex;gap:14px;align-items:flex-start;background:var(--white);border-radius:var(--r);padding:14px;overflow:hidden}
.sec[data-surface="white"] .part{background:var(--cream)}
.part .fig{flex:none;width:96px;margin:0}
.part .fig img{aspect-ratio:1/1}   /* SP は 1:1（部品10）。PC は下で 3:4 に切り替える */
.part .txt h3{font-size:var(--fs-lead)}
.part .txt p{margin-top:.2em;font-size:var(--fs-small);color:var(--sub);line-height:1.8}
/* 2026-08-28: parts-3 を R10 から R5 へ移すとき、語を h3 から <p class="term"> に変えた。
   **見出しの数を増やさないため**（この3枚は「選び方 1. どこに足すか」の図版であって節ではない）。
   見た目は行リストの語（.rowlist .tx .term）と同じにする。 */
.part .txt .term{margin-top:0;color:var(--ink);font-size:var(--fs-body);font-weight:var(--w-strong);letter-spacing:.04em}
/* 制定日など、本文の末尾に置く1行（R18）。右に寄せず、余白だけで区切る */
.policy-date{margin-top:2.4em;color:var(--sub);font-size:var(--fs-small)}
/* カードの中の見出し（R5 の「毛の素材について」「料金について」）。
   カードは .lead で始まる作りなので、h3 が入るときだけ上の余白を殺す */
.card > .hd:first-child{margin-top:0;margin-bottom:.6em}

/* 人物写真を2点並べる箱（R4 b1・R11 b3）。縦に積むと「家族に見せる2画面」に収まらない */
.portraits{display:flex;gap:10px;margin:1.6em 0}
.portraits .fig{flex:1;margin:0}
/* 図版は写真より小さく置く（面の主役にしない。3-3「面の中に要素の種類を足さない」と同じ考え） */
/* 図版は語が入るので、幅を詰めると読めなくなる（2026-08-21）。
   52% だと 375px 幅で 174px しかなく、図の中の文字が 6px 相当になっていた */
.fig.diagram{max-width:100%;margin-left:auto;margin-right:auto}
/* 節の中央に置く写真（R10 b4）。全幅にすると 1280px で高さ 850px を超え、節が写真に食われる */
.fig.centered{margin-left:auto;margin-right:auto}

/* ---------- 注意書き・注記 ---------- */
.note{margin-top:1em;font-size:var(--fs-small);color:var(--sub)}
.deep .note{color:var(--on-deep);opacity:.85}

/* ============ ヘッダー: スクロール後のグローバルナビ（reference-spec 1-9） ============
   発火は「FV ブロックの高さを超えたら」。動きは **フェードのみ**（opacity/visibility 0.4s）。
   背景は地色の不透明・影なし・境界線なし。戻ると同じ位置で消える（対称）。 */
.gnav{position:fixed;top:0;left:0;width:100%;z-index:1000;background:var(--cream);
  opacity:0;visibility:hidden;transition:opacity .4s, visibility .4s}
.gnav.is-shown,.gnav.is-static{opacity:1;visibility:visible}

/* 2026-08-28 担当者指示（下層ページのみ）:
   「ヘッダーのメニューエリアだけ（破線以下からヘッダー下部まで）高さを20px増やして。メニューは縦方向に中央寄せで。」
   高さが増えるぶん、**本文の上余白（body の padding-top）も同じ式で動かす。**
   別々に持つと、片方だけ直したときに本文がバーの下に潜る。
   **トップ（R10）は対象外。** 指示が「下層全ページについて」の中の項目で、
   トップの FV はバー 84px を前提に組んである。

   **2026-08-28（2回目）取り消し:** ヘッダー最下段に置いていたパンくずの段（.gnav-crumbrow）を**削除した。**
   「パンくずリストはヘッダー内に納める指示はしていない。パンくずリストとして取っている
     ヘッダースペースはなくし、パンくずリストは FV の最上部に表示されるように。」
   旧値: --gnav-crumb-h は下層で 32px。ヘッダーは PC 136px（44＋60＋32）・SP 88px（56＋32）だった。
   いまは PC 104px（44＋60）・SP 56px に戻る。
   段そのものを消したので、:not(.gnav-crumbrow) という逃げも要らなくなった（下の隣接セレクタから外した）。 */
:root{--gnav-extra:0px}
body:not(.has-fv){padding-top:calc(var(--bar-h) + var(--gnav-extra))}
.gnav-inner{max-width:1280px;margin:0 auto;padding:0 20px}
.gnav-row{display:flex;align-items:center;gap:12px;height:var(--bar-h)}
/* SP は主ナビをバーに出さない（開閉メニューへ） */
.gnav-row + .gnav-row{display:none}
.gnav-brand{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none}
.gnav-brand img{height:30px;width:auto}
.gnav-brand span{font-weight:var(--w-heading);font-size:var(--fs-sitename);letter-spacing:var(--ls-sitename);white-space:nowrap}
.gnav-r1,.gnav .btn-line,.gnav-list{display:none}
.gnav-menu{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;background:var(--navy);border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.gnav-menu span{display:block;width:16px;height:2px;background:var(--white);border-radius:var(--pill)}

/* ---------- スマホの開閉メニュー ---------- */
.drawer{position:fixed;inset:0;z-index:1100;background:var(--cream);padding:16px 20px 32px;overflow-y:auto}
.drawer[hidden]{display:none}
.drawer-head{display:flex;align-items:center;height:var(--bar-h)}
.drawer-title{font-weight:var(--w-heading);font-size:var(--fs-sitename);letter-spacing:var(--ls-sitename)}
.drawer-close{margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
/* 部品2: R1 別枠は濃クリーム地・角丸10・ink 文字＋小さな紺の矢印（主ナビとは塗りで区別する） */
.drawer-r1{display:flex;align-items:center;gap:8px;background:var(--dcream);border-radius:var(--r);
  min-height:var(--btn-h);padding:8px 14px;font-size:var(--fs-r1);font-weight:var(--w-heading);text-decoration:none}
.drawer-r1 .arw{margin-left:auto;color:var(--navy);font-weight:var(--w-strong)}
.drawer-nav{margin-top:18px}
.drawer-nav a{display:flex;align-items:center;gap:12px;min-height:52px;font-weight:var(--w-heading);text-decoration:none}
.drawer-nav a + a{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.drawer-nav .no{flex:none;width:24px;font-size:var(--fs-navno);color:var(--navy);letter-spacing:.06em}
.drawer-nav .go{margin-left:auto;color:var(--navy);font-weight:var(--w-strong)}
.drawer-sub{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;font-size:var(--fs-small);color:var(--sub)}
.drawer-sub a{min-height:2.4em;display:inline-flex;align-items:center}
.drawer .btn-line{margin-top:20px;width:100%;height:52px}

/* ---------- 追従 CTA（スマホのみ。P08 部品6） ---------- */
/* 2026-09-09 担当者指示「スマホ版フッター下部の CTA は角丸形状でなく、帯状に」。
   旧: 地に 8px/13px の余白、ボタン2つはピル（--pill）で間 10px。新: 余白・間隔ゼロ、角丸ゼロ、2つの帯が画面幅を分ける。 */
.sticky-cta{position:fixed;left:0;bottom:0;width:100%;z-index:999;
  padding:0 0 env(safe-area-inset-bottom);display:flex;gap:0;background:var(--cream);
  opacity:0;visibility:hidden;transition:opacity .4s, visibility .4s}
.sticky-cta.is-shown,.sticky-cta.is-static{opacity:1;visibility:visible}
.sticky-cta a{flex:1;height:52px;display:flex;align-items:center;justify-content:center;border-radius:0;
  font-weight:var(--w-heading);font-size:var(--fs-btn);text-decoration:none}
.sticky-cta .line{background:var(--navy);color:var(--white)}
.sticky-cta .tel{background:var(--white);color:var(--ink);border:0;border-top:1.5px solid var(--navy);font-size:var(--fs-tel)}
/* 追従 CTA が本文の最後に重ならないよう、フッターの下に場所を空ける */
body:has(.sticky-cta) .foot{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* ---------- フッター（部品7: 紺地・白文字） ---------- */
.foot{background:var(--navy);color:var(--on-deep);padding:40px 0 32px;margin-top:0}
.foot a{color:var(--on-deep)}
/* 2026-08-28 作り直し（担当者の指摘「フッターのナビゲーションがぐちゃぐちゃ」）。
   **原因は行き先ではなく、造形が無かったこと。** 下線ルール（31 行目）は `main a` に限って
   効かせているので、**フッターのリンクはブラウザ既定の下線のまま**出ていた。
   その結果、7本のメニューと3本の外部リンクと説明文が、**同じ下線つきの行として横一列に混ざり、
   どこからどこまでが1項目か分からなかった。**
   直したのは3点だけで、**行き先とラベルは1つも変えていない**（台帳のとおり）。
     1. 既定の下線を外し、**触れたときだけ**下線を出す（何が押せるかは残す）
     2. メニューを**1項目1行の格子**にし、点線罫で区切る（罫は border ではなく背景のグラデーション＝体系どおり）
     3. 説明文をリンクの外へ出した（layout.mjs 側） */
.foot a{text-decoration:none}
.foot a:hover,.foot a:focus-visible{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.foot-brand{display:inline-flex;align-items:center;gap:8px;font-weight:var(--w-heading);font-size:var(--fs-sitename);letter-spacing:var(--ls-sitename)}
/* 級数は 2026-08-28 担当者指示で 2px 小さい専用トークン（--fs-small の共用をやめた）。
   **タップ領域は級数と切り離す。** 文字だけ小さくすると押せる面まで小さくなるので、
   min-height は px で 44 を持たせる（--btn-h と同じ値） */
.foot-nav{display:grid;margin-top:20px;font-size:var(--fs-foot-nav)}
.foot-nav li + li{background-image:linear-gradient(to right,var(--rule-c-on-deep),var(--rule-c-on-deep) 2px,transparent 2px);
  background-size:4px 1px;background-position:0 0;background-repeat:repeat-x}
.foot-nav a{display:flex;align-items:center;min-height:44px;opacity:.92}
/* 2026-08-28 担当者指示: 外部リンク3本を**バナー画像つきの1行3列**に。
   画像は幅 300px 程度、高さはフッターを取り過ぎない比率（15:7）で切る。
   SP は1列に落ちる（横に3枚並べると1枚 100px 少々になり、何の絵か分からない）。 */
/* 2026-08-28（3回目）「フッター部のバナー3つは中央揃えにして」。
   旧: grid の既定（左寄せ）。列を内容幅にして justify-content:center で束ごと中央へ。 */
.foot-banners{margin-top:24px;display:grid;justify-content:center;gap:20px;font-size:var(--fs-foot-ext)}
.foot-banners li{display:flex;justify-content:center}
/* 2026-08-28（2回目）「バナー下のテキストリンクは不要である。テキストごと削除」。
   旧: .foot-banners b（ラベル）と .foot-banners .d（説明文）を画像の下に出していた。 */
.foot-banners a{display:block}
.foot-banners .bnr{display:block;width:100%;max-width:300px;aspect-ratio:15/7;object-fit:cover;border-radius:var(--r)}
.foot-owner{margin-top:24px;font-size:var(--fs-foot-owner);opacity:.9}
.foot-copy{margin-top:.4em;font-size:var(--fs-note);opacity:.8}

/* ============ FV（R10 のみ）============
   骨格は #7 杜の里 の実測: SP は縦積み・PC は左 314px の情報列＋右の写真ブリード。
   キャッチだけを明部に重ねる（本文段落は写真に重ねない）。 */
.fv .sp-only{display:block}
.fv .pc-only{display:none}
.head{height:86px;display:flex;align-items:center;gap:10px;padding:0 20px}
.head .sym{height:30px;width:auto}
.head .name{font-weight:var(--w-heading);font-size:var(--fs-sitename);letter-spacing:.06em;white-space:nowrap}
.head .menu{margin-left:auto;flex:none;width:46px;height:46px;border-radius:50%;background:var(--navy);border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.head .menu span{display:block;width:18px;height:2px;background:var(--white);border-radius:var(--pill)}
.cats{margin:2px 20px 0;color:var(--navy);font-size:var(--fs-cats);letter-spacing:.1em;font-weight:var(--w-heading)}
.cats .sep{opacity:.4;margin:0 .28em}   /* PC の左列 314px で1行に収める（実測で折り返していた） */
/* 2026-08-28 担当者指示: **見出し 1（h1 = FV のキャッチ）の行間を 2px 狭く**。
   値を 1.48 のような倍率で書くと SP（28px）と PC（40px）で狭まる量が変わるので、
   **calc(1.55em - 2px)** にしてどちらもちょうど 2px 狭くする（SP 43.4→41.4 / PC 62→60）。
   旧値は 1.55。文字サイズ・字間・改行位置は変えていない。 */
/* 行間は 2026-08-28 に2度詰めた。**旧値: 1.55em → calc(1.55em - 2px) → calc(1.55em - 4px)**（現行）。 */
.catch{margin:40px 20px 0;font-family:var(--catch);font-weight:var(--catch-w);font-size:var(--fs-catch);
  line-height:calc(1.55em - 4px);letter-spacing:.06em;color:var(--navy)}
.fv .intro{margin:20px 20px 0;font-size:var(--fs-body)}
.fv .intro .place{color:var(--sub)}
.r1{margin:20px 20px 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;background:var(--dcream);
  border-radius:var(--r);min-height:var(--btn-h);padding:8px 14px;font-size:var(--fs-r1);font-weight:var(--w-heading);
  letter-spacing:.02em;text-decoration:none}
.r1 .arw{color:var(--navy);font-weight:var(--w-strong)}   /* 文が2行になっても矢印が落ちないよう2列にする */
.fv .photo{position:relative;margin:20px 13px 0;overflow:hidden;border-radius:0 0 var(--r) var(--r)}
.fv .photo img{width:100%;height:365px;object-fit:cover}

/* ---------- FV の写真スライド（.fvslide）。2026-08-27 担当者指示 ----------
   3枚を重ねて、**1枚5秒・フェードイン／フェードアウトで入れ替える**（15秒で一周）。
   JS は使わない。動かすのは opacity だけで、レイアウトも再描画も起こさない。
   **prefers-reduced-motion: reduce では止めて1枚目だけを出す**（motion.reduced-motion）。 */
.fvslide{position:relative;width:100%;height:100%}
.fvslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:fvfade 15s linear infinite;will-change:opacity}
/* 2026-09-09: nth-child → nth-of-type。WordPress の遅延読み込みプラグインが img の間に <noscript> を差し込み、
   3枚目が nth-child(3) から外れて1枚目と同時に出ていた（＝3枚目が見えない）。img だけを数える。 */
.fvslide img:nth-of-type(1){animation-delay:0s}
.fvslide img:nth-of-type(2){animation-delay:5s}
.fvslide img:nth-of-type(3){animation-delay:10s}
@keyframes fvfade{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
.fv .photo .fvslide{height:365px}
.fv .photo .fvslide img{height:100%}
/* viewBox に上 8px の余白を足してあるので、揺れても地が抜けない（motion.fv-wave.headroom） */
.fv .photo .wave-top{position:absolute;top:-20px;left:-7%;width:114%;height:64px}
.fv .photo .chip{position:absolute;right:0;bottom:0;background:var(--band-bg);border-radius:var(--r) 0 0 0;
  padding:4px 14px;font-size:var(--fs-label);color:var(--sub)}
.fv .cta-panel{margin:26px 13px 0}

/* ============ 印刷・管理用（公開ビルドでは data-open ごと取り除く）============ */
[data-open]{position:relative}
.proto [data-open]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;opacity:.5}

/* ============ スクロール表示（JS 有効時だけ効かせる。JS が動かないと本文が消えるため）============ */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ============ FV の波の動き（担当者の指示による追加。参考サイトには無い）============
   2026-08-21 改訂（B-1）。**動いてはいたが、認識できなかった**ため揺れ幅と周期を上げた。
   旧: 周期 17s・縦 ±1.5px・回転 ±0.18deg（縦の移動 3px を 8.5 秒かけて＝0.35px/秒。
       知覚のしきい値を下回っていた。**しかも横に動かないので、面全体が上下するだけで「さざめき」にならない**）。
   新: 周期 11s・縦 ±4px・横 ±5px・回転 ±0.5deg。**横と縦の位相をずらして**楕円状に動かすことで、
       波の山が横へ流れて見える＝風で水面がさざめく見え方になる。速さは約 1.5px/秒で、
       「気づくが、気を取られない」範囲に置いた。 */
/* FV の波（2026-08-22 に3度目の作り直し）。
   **要素は動かさない。パス（d）を補間して波形そのものを変形させる**（D-059）。

   **段差の原因は、パスの形そのものだった。**（担当者の目視指摘）
   前の形は「x=0〜440 がほぼ水平（400→378）」＋「x=440〜890 で一気に立ち上がる（378→46）」の2区間で、
   **曲率が一箇所で急変**していた。人の目にはそこが角に見え、**「四角形の上に別の図形を重ねた」**ように読める。
   接線は連続していた（数値上は滑らか）が、**曲率の急変は目には段差として出る。**
   → **全幅を1本の流れとして引き直した。** 平らな区間を作らず、左からゆるく波打って右へ上がる。

   **形を変えるときは C1 連続を壁にする。** 継ぎ目 P の前後の制御点は、必ず P と一直線に置く
   （A = P - d、B = P + d）。制御点を勝手に散らすと、**そのキーフレームだけ角が出る。**
   4 つの形はすべてこの作りで、**両端（0,412）と（890,38）は留めたまま**中ほどだけが動く。

   **動きの大きさ**: 制御点の振れを 24〜34 → **48〜78** に上げた（周期は 14 秒のまま）。 */
@keyframes wave-morph-pc{
  0%,100%{ d:path("M0,412 C110,384 230,414 340,376 C450,338 540,308 640,236 C740,164 810,100 890,38 L890,-30 L0,-30 Z") }
  25%     { d:path("M0,412 C110,430 230,448 340,396 C450,344 540,360 640,272 C740,184 810,76 890,38 L890,-30 L0,-30 Z") }
  50%     { d:path("M0,412 C110,352 230,374 340,344 C450,314 540,262 640,204 C740,146 810,124 890,38 L890,-30 L0,-30 Z") }
  75%     { d:path("M0,412 C110,402 230,430 340,386 C450,342 540,332 640,252 C740,172 810,88 890,38 L890,-30 L0,-30 Z") }
}
@keyframes wave-morph-sp{
  0%,100%{ d:path("M0,26 C48,8 96,29 150,20 C204,11 268,2 335,18 L335,-20 L0,-20 Z") }
  25%     { d:path("M0,26 C48,20 96,40 150,28 C204,16 268,-5 335,18 L335,-20 L0,-20 Z") }
  50%     { d:path("M0,26 C48,-2 96,16 150,12 C204,8 268,10 335,18 L335,-20 L0,-20 Z") }
  75%     { d:path("M0,26 C48,14 96,35 150,24 C204,13 268,0 335,18 L335,-20 L0,-20 Z") }
}
.fv .photo .wave-top path{ d:path("M0,26 C48,8 96,29 150,20 C204,11 268,2 335,18 L335,-20 L0,-20 Z");
  animation:wave-morph-sp 14s ease-in-out infinite }
.fv .mask path{ d:path("M0,412 C110,384 230,414 340,376 C450,338 540,308 640,236 C740,164 810,100 890,38 L890,-30 L0,-30 Z");
  animation:wave-morph-pc 14s ease-in-out infinite }
@media (prefers-reduced-motion: reduce){
  .fv .photo .wave-top path,
  .fv .mask path{animation:none}
  /* 2026-08-27: FV のスライドも止める。**1枚目だけを出す**（切り替わらないだけで、内容は欠けない） */
  .fvslide img{animation:none;opacity:0;will-change:auto}
  .fvslide img:nth-of-type(1){opacity:1}
  /* 2026-08-28: 店舗ギャラリーの送りも止める。**止めるだけだと残りの写真が見られなくなる**ので、
     手で横にさがせる形にする。拡大（オンマウス）もやめる。 */
  .gallery{overflow-x:auto}
  .galtrack{animation:none}
  .galitem,.galitem:hover,.galitem:hover + .galitem,.galitem:has(+ .galitem:hover){transform:none;transition:none;will-change:auto}
  /* 2026-08-28: CTA の斜めの滑りも止める。**色は変える**（何が起きたか分からなくなるので、
     動きだけを消して結果は残す）。 */
  .gnav-list a::after{transition:none}
  .btn-line::before,.btn-out::before,.navcard::before,.sticky-cta a::before{
    transition:none;transform:translateX(-118%) skewX(0)}
  .btn-line:hover::before,.btn-line:focus-visible::before,
  .btn-out:hover::before,.btn-out:focus-visible::before,
  .navcard:hover::before,.navcard:focus-visible::before,
  .sticky-cta a:hover::before,.sticky-cta a:focus-visible::before{transform:translateX(0) skewX(0)}
}

/* ============ PC（768px〜）============ */
@media(min-width:768px){
  /* 2026-08-28: **ここより前にあった別の @media(min-width:768px) から移した。**
     前に置いたままだと、あとに書いた土台の規則（.cardwithfig の flex-direction:column など）に
     **後勝ちで負ける。**実際に負けて、料金カードが PC でも縦積みのまま出ていた。
     PC の規則は1か所にまとめる。 */
  .fv-hero .hero-media img{object-position:center}
  /* **文字の列を人物の手前で止める。** 写真は右三分の一に人物を置いて作ってあるので、
     本文をそこまで伸ばすと顔の上に乗る。列を止めるだけで、写真は節いっぱいのまま。 */
  /* 2026-08-28 担当者指示「FV のコンテンツ幅を 50px 広く」。旧値 58%。 */
  .fv-hero .inner > *{max-width:calc(58% + 50px)}
  .fv-hero .hero-lead p{max-width:none}

  /* 2026-08-28 担当者指示「PC 版 FV について、画像を大きく取る際もスクロールしなくても全て納まる様に」。
     **固定の数値では収まらない。** 画面の高さは端末で変わるのに、
     見出し・リード文・CTA の高さは文字数で決まるので、**低い画面ほどはみ出す**
     （実測: 1920x1080 は収まるが、1280x800 では 227px はみ出していた）。
     そこで**画面の高さに連動して詰める**。文字を消したり隠したりはしない。
       ・節の上下余白を、画面の高さの割合で決める
       ・リード文の級数と行間を、画面が低いときだけ小さくする（--fs-body が上限）
       ・段落の間隔と CTA 面の余白を詰める
     1280x800（この案件で想定する最小の PC）で収まる値に合わせてある。 */
  .fv-hero:has(+ .edge){padding-bottom:calc(min(var(--sec-y-bottom), 2.6vh) + var(--edge-h))}
  .fv-hero{padding-top:min(var(--sec-y-top), 2.6vh);padding-bottom:min(var(--sec-y-bottom), 2.6vh);
    min-height:calc(100svh - var(--bar-h) - var(--gnav-extra));
    display:flex;flex-direction:column;justify-content:center}
  .fv-hero .hd{font-size:min(var(--fs-h1), 3.85vh);line-height:1.34}
  .fv-hero .hero-lead{margin-top:min(1.2em, 1.9vh);padding:min(16px, 1.5vh) 18px min(18px, 1.6vh);
    font-size:min(var(--fs-body), 1.83vh);line-height:1.68}
  .fv-hero .hero-lead p + p{margin-top:min(1em, 1.25vh)}
  .fv-hero .cta-panel{margin-top:min(1.8em, 2.1vh);padding:min(28px, 1.9vh) 24px min(26px, 1.8vh)}
  .fv-hero .cta-panel .btn-line{height:auto;min-height:min(52px, 6vh)}

  .cardwithfig{flex-direction:row;align-items:flex-start;gap:24px}
  .cardwithfig .cardtx{flex:1 1 auto}
  .cardwithfig .fig.cardfig{flex:none;width:280px}

  /* 行に添える画像は PC で本文の右隣（担当者指示） */
  .rowlist.has-fig .row{flex-wrap:nowrap;align-items:flex-start}
  .rowlist.has-fig .tx{flex:1 1 auto}
  .rowlist .fig.rowfig{flex:none;width:240px;margin:0}
  /* 写真2枚を左の列に。2枚で 240px（行リストの写真1枚と同じ幅）に収める */
  .rowlist.has-pair .row{flex-wrap:nowrap;align-items:flex-start}
  .rowlist .pairfigs{flex:none;width:240px;order:0;gap:12px}
  .rowlist .fig.pairfig{margin:0}

  /* 2列。**縦の点線で列の切れ目を出し、横の罫は列ごとに切る**（担当者指示） */
  .gridlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .gridlist .gcell:nth-child(-n+2){background-image:none}   /* 各列の1行目には上の罫を引かない */
  .gridlist .gcell:nth-child(odd){
    background-image:linear-gradient(to right, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px),
                     linear-gradient(to bottom, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px);
    background-size:var(--rule-period) 1px, 1px var(--rule-period);
    background-repeat:repeat-x, repeat-y;
    background-position:0 0, calc(100% + 20px) 0}
  .gridlist .gcell:nth-child(odd):nth-child(-n+2){
    background-image:linear-gradient(to bottom, var(--rule-c-on-deep), var(--rule-c-on-deep) 2px, transparent 2px);
    background-size:1px var(--rule-period);background-repeat:repeat-y;background-position:calc(100% + 20px) 0}
  .gridlist .fig.gthumb{width:88px}

  /* フッターのメニューは PC で2列。**1列のままだと点線罫が 1320px 伸びて、
     短いラベル1本に対して罫だけが長い**（実際にそう出た）。行き先もラベルも変えていない。 */
  .foot-banners{grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:28px}
  .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .foot-nav li:nth-child(2){background-image:none}
  .inner{padding-left:40px;padding-right:40px}
  .cards{flex-direction:row;gap:18px}
  .card{flex:1}
  /* 崩し: グリッド外し（R10 の parts-3 中央カードのみ）。quiet ではオフ。
     **分岐カード（b6）は対象外**——2枚しかないので片方だけ下がると「崩し」ではなく「ずれ」に見える */
  [data-page="R10"][data-tone]:not([data-tone="quiet"]) .cards:not(.branch-cards) .card:nth-child(2){transform:translateY(var(--grid-break))}
  /* 分岐カード（b6）は PC で2列（担当者指示 B-4） */
  /* PC では行き先の名前の長さぶんだけ。横一杯のボタンが並ぶと重い */
  .go-item .btn-out{width:auto}
  .branch-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  /* 2026-08-28（3回目）: 写真つきカードは PC で2列（＝3行2列）。SP は1列のまま。 */
  .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  /* 2026-08-28（4回目）「PC 版の FV に配置した画像だけ 20px 位置を下げて」。
     SP は指示に無いので触っていない（bottom の値はそのまま）。 */
  .deco-fv{margin-bottom:-20px}
  .navcards{grid-template-columns:1fr 1fr;gap:18px}
  .deep .navcards{grid-template-columns:repeat(2, calc((100% - 18px) / 2 * .75));justify-content:start}
  /* .split（2026-08-27）: 画像を左・文章を右。画像は幅の 44%（写真が主張しすぎない比） */
  .split{display:flex;gap:48px;align-items:flex-start}
  .split .fig{flex:none;width:44%;margin:0}
  .split-tx{flex:1}
  .split-tx > .hd:first-child{margin-top:0}
  :root{--edge-h:56px}
  .deep-grid{display:flex;gap:56px;align-items:flex-start}
  .deep-grid .txt{flex:1;min-width:0}
  .deep-grid .fig{flex:none;width:360px;margin:0}
  .deep-grid .fig img{aspect-ratio:1/1}
  /* 2026-08-28 担当者指示: R10 b2 の写真だけ**縦だけ 1.5 倍**（360×360 → 360×540）。
     上の 1/1 は他ページの紺面の写真の値なので残す。 */
  .deep-grid .fig.tall img{aspect-ratio:2/3}
  .bigno{left:-38px;top:-56px;opacity:.5}
  .scenes{flex-direction:row;flex-wrap:wrap}
  .scene{flex:1 1 calc(50% - 6px);min-width:16em}
  .parts3{flex-direction:row}
  .part{flex:1;flex-direction:column}
  .part .fig{width:100%}
  .part .fig img{aspect-ratio:3/4}
  /* 2026-08-28（2回目）: .sec p.lead-wide{max-width:none} は**役目が無くなったので削除した。**
     本文全体の行長の上限（--measure）を外したため、この 1 文だけ逃がす必要がなくなった。
     class="lead-wide" は原稿側に残してある（付いていても何も効かない）。 */
  .gallery{padding:28px 0}
  .galitem{width:280px;margin-right:20px}
  .fig.diagram{max-width:480px}
  .fig.centered{max-width:720px}
  .cta-panel{padding:28px 24px 26px}

  /* --- グローバルナビ: 2段 84px（上 44px＝サイト名／R1 別枠／LINE、下 40px＝主ナビ5）--- */
  /* 2026-08-21（担当者指示 C-2）: バーの中身は**中央揃え**。2段 84px の構成は変えていない。
     旧: 上段＝サイト名を左端に置き、R1 別枠と LINE を margin-left:auto で右端へ寄せた両端揃え／下段＝左揃え */
  .gnav-inner{height:calc(var(--bar-h) + var(--gnav-extra));display:block;padding:0 20px}
  .gnav-row{height:44px;gap:16px;justify-content:center}
  /* 上段は**ロゴを左・CTA 2つを右**（2026-08-21 担当者指示 B-2）。下段（主ナビ）は中央のまま。
     2段 84px は変えていない。 */
  .gnav-row:first-child{justify-content:flex-start}
  /* 2026-08-28 担当者指示「CTA は右揃え。ロゴはそのまま移動させない」。
     **これまで右へ押していたのは .gnav-r1（R1 の別枠）だった。**
     2026-08-28 に R1 をヘッダーから外したので押すものが無くなり、
     CTA がロゴのすぐ右に貼り付いていた。押す役目を CTA 自身に移す。
     ロゴ（.gnav-brand）は flex:none のまま左端で動かない。 */
  .gnav-row:first-child .gnav-r1,
  .gnav-row:first-child .btn-line{margin-left:auto}
  /* メニュー帯だけ +20px。**縦方向は中央寄せ**（担当者指示）。 */
  html:not([data-page="R10"]){--gnav-extra:20px}
  .gnav-row + .gnav-row{
    display:flex;height:calc(40px + var(--gnav-extra));justify-content:center;align-items:center;
    background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
    background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
  .gnav-brand span{font-size:var(--fs-gnav-brand)}
  .gnav-menu{display:none}
  /* 768px でも主ナビ5があふれないよう、項目間だけ可変にする（文字サイズは落とさない） */
  .gnav-list{display:flex;align-items:center;gap:clamp(12px, 1.4vw, 22px)}
  .gnav-list a{font-weight:var(--w-heading);font-size:var(--fs-gnav);letter-spacing:0;white-space:nowrap;text-decoration:none;
    /* 2026-08-28（4回目）「オンマウスで該当メニューの下にオレンジの線。**左から右へ線が引かれる**。線幅 5px」。
       下線（text-decoration）では引かれる動きが作れないので、**幅 0 の帯を右へ伸ばす。**
       transform:scaleX だと線の太さまで伸縮するので、width を動かす。
       段の高さ（40px + --gnav-extra）は変えていない。線は文字の下の余白に置く。 */
    position:relative;padding-bottom:9px}
  .gnav-list a::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:0;
    background:var(--orange);transition:width .28s cubic-bezier(.22,.61,.36,1)}
  .gnav-list a:hover::after,.gnav-list a:focus-visible::after{width:100%}
  .gnav-r1{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--dcream);
    border-radius:var(--pill);padding:6px 14px;font-size:var(--fs-gnav-sub);font-weight:var(--w-heading);white-space:nowrap;text-decoration:none}
  .gnav-r1 .arw{color:var(--navy);font-weight:var(--w-strong)}
  .gnav .btn-line{display:inline-flex;flex:none;height:34px;min-height:0;padding:0 18px;font-size:var(--fs-gnav-sub)}
  .drawer{display:none}
  .sticky-cta{display:none}
  body:has(.sticky-cta) .foot{padding-bottom:32px}

  /* --- FV: 768〜1023 は SP の骨格のまま（下の 1024px から PC 骨格に切り替える）---
     参考の実測は「左の情報列 314px = 画面の 24.5%」。768px では 41% になり、
     写した比率が壊れる（reference-spec 1-1「幅は変えない」）。列に押し込むと
     キャッチが写真の上に落ちてコントラストも割れる（実測 1.01:1）ので、
     タブレット幅では杜の里の **SP の骨格**（縦積み）を使う。 */
  .fv .fv-sp{max-width:640px;margin:0 auto}
  /* PC 骨格の**見た目**の指定だけをここに置く。**display はここで決めない。**
     2026-08-21 修正: ここに display:flex を書いていたため、**768〜1023px で FV が二重に描かれていた**
     （.fv .sp-only{display:block} が生きたまま .fvpc も出ていた）。display は 1024px の1か所に集約する。 */
  .fv .fvpc.pc-only{position:relative;min-height:800px;max-width:1280px;margin:0 auto;overflow:hidden}
  .col-info{flex:none;width:314px;margin-left:20px;padding-top:40px;display:flex;flex-direction:column}
  .logo{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none}
  .logo img{width:112px;height:auto}
  .logo .name{font-weight:var(--w-heading);font-size:var(--fs-sitename);letter-spacing:var(--ls-sitename)}
  .logo .cats{margin:6px 0 0;font-size:var(--fs-cats);text-align:center}
  .nav-panel{margin-top:40px;background:var(--white);border-radius:var(--r);padding:6px 16px}
  .nav-panel a{display:flex;align-items:center;gap:12px;height:47px;font-size:var(--fs-nav);font-weight:var(--w-heading);text-decoration:none}
  .nav-panel a + a{
    background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
    background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
  .nav-panel .no{flex:none;width:24px;font-size:var(--fs-navno);font-weight:var(--w-heading);letter-spacing:.06em;color:var(--navy)}
  .nav-panel .go{margin-left:auto;color:var(--navy);font-weight:var(--w-strong);font-size:var(--fs-arrow);min-height:0}
  .fv .r1{margin:20px 0 0;padding:10px 14px;letter-spacing:0}
  .fv .cta-panel{margin:40px 0 0}
  .col-vis{position:relative;flex:1;margin-left:36px;min-height:800px}
  /* 2026-08-28 担当者指示: **FV 画像の下部を他の画像と同じく角丸に**。
     SP（.fv .photo）は元から下 2 角が丸い。PC だけ直角のままだったので揃える。
     上端は波マスクが切っているので触らない。角丸は --r（10px）のまま（3-7）。 */
  .photo-pc{position:absolute;inset:0;overflow:hidden;border-radius:0 0 var(--r) var(--r)}
  .photo-pc img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
  .photo-pc .fvslide{height:100%}
  .photo-pc .fvslide img{object-position:60% 40%}
  .fv .mask{position:absolute;top:-30px;left:-26px;width:calc(100% + 52px);height:462px;pointer-events:none}
  /* 行間は SP と同じ。**旧値: 1.55em → calc(1.55em - 2px) → calc(1.55em - 4px)**（現行。担当者指示で2度詰めた） */
  .catch-pc{position:absolute;z-index:2;top:48px;left:8px;font-family:var(--catch);font-weight:var(--catch-w);
    font-size:var(--fs-catch);line-height:calc(1.55em - 4px);letter-spacing:.06em;color:var(--navy)}
  /* 2026-08-27: 新しいリード文は旧文より長い（118字）。23em だと6行になり、**最終行が波の内側＝写真に重なる**。
     幅を広げて行数を減らす（同じ文字数なら、行が長いほど早く終わるので下へ伸びない）。 */
  /* 2026-08-27: リード文が2文（支給の改行位置どおり）に短くなった。27em だと1文目が3行になり
     「す。」だけの行が出るので 30em に。波（写真の縁）には触れていない。 */
  .intro-pc{position:absolute;z-index:2;top:180px;left:8px;max-width:30em;font-size:var(--fs-introfv);line-height:var(--lh-body)}
  .intro-pc .place{color:var(--sub)}
  .chip-pc{position:absolute;z-index:3;right:0;bottom:0;background:var(--band-bg);border-radius:var(--r) 0 0 0;
    padding:10px 28px 10px 20px;font-size:var(--fs-tel);color:var(--ink);display:flex;gap:16px;align-items:center}
  .chip-pc .num{font-weight:600}
  .chip-pc a{color:var(--ink)}
  .deep-grid .fig{margin:0}
}

@media(min-width:1024px){
  /* --- FV（杜の里 PC の骨格）。1024px から（reference-spec 1-1「適用する画面幅」） ---
     .fvpc と .pc-only が同じ要素に付くので、display は詳細度の高い側で1回だけ決める */
  .fv .sp-only{display:none}
  .fv .pc-only{display:block}
  .fv .fvpc.pc-only{display:flex}

  /* --- 店舗情報（左）＋地図（右）。2026-08-28 担当者指示 ---
     **768〜1023 では 2 列にしない。** 列が 320px 前後になり、表の最小幅（min-width:34em）を下回って
     表の中に横スクロールが出る。FV が PC の骨格に切り替わるのと同じ 1024px からに揃える。 */
  .aboutgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:stretch}
  .aboutgrid .tablewrap{margin-top:0}
  /* 列の中で横スクロールが出ないよう、表の最小幅をここだけ下げる（字の大きさは変えていない） */
  .aboutgrid table{min-width:24em}
  .mapbox{margin-top:0;display:flex;flex-direction:column}
  .mapframe{flex:1;height:auto;min-height:340px}
}

@media(min-width:1280px){
  .fv .photo img{height:420px}
  .fv .photo .fvslide{height:420px}
}

/* ============ 2026-09-08 指示書「デザイン変更・構築やり直し」で足した部品 ============
   造形は既存の値だけ（面＝白／クリーム／紺、罫＝点線パターン、角丸 --r とピル、影ゼロ）。新しい様式は無い。 */

/* --- 写真つきカードの格子: PC 3列（トップ「お悩み解決までの流れ」の3枚）。既定の2列は変えていない --- */
/* --- 3段階（/flow/）: 小見出し＋1文のリード＋カード。段階のあいだは余白で区切る --- */
.stage + .stage{margin-top:2.4em}
.stage .stage-lead{margin-top:.5em}
.deep .stage .hd{margin-top:0}

/* --- ラインナップ（/wig/）の仕様の箇条書き。行リストの中なので面を重ねず、罫だけ --- */
.rowlist .tx .who{display:block;color:var(--navy);font-weight:var(--w-heading);font-size:var(--fs-small);margin-bottom:.3em}
.specs{margin-top:.7em;font-size:var(--fs-small);line-height:1.8;color:var(--sub)}
.specs li{padding:.35em 0}
.specs li + li{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.specs .k{color:var(--ink);font-weight:var(--w-heading)}

/* --- /services/ の節の写真（縦 2:3。.split の中） --- */
.split .fig.svc-fig{margin-top:0}

/* --- FAQ: 開閉式の1問（<details>）。行リスト（部品18）と同じ面＋点線罫 --- */
.faqlist{margin-top:1.2em;background:var(--white);border-radius:var(--r);padding:2px 20px}
.sec[data-surface="white"] .faqlist{background:var(--cream)}
.qa + .qa{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.qa summary{display:flex;align-items:flex-start;gap:12px;padding:1em 0;cursor:pointer;list-style:none;
  font-weight:var(--w-strong);letter-spacing:.04em;line-height:1.7;min-height:var(--btn-h)}
.qa summary::-webkit-details-marker{display:none}
.qa .qno{flex:none;width:2.4em;color:var(--navy);font-weight:var(--w-heading);font-size:var(--fs-navno);letter-spacing:.06em;line-height:1.7}
.qa .qtx{flex:1 1 auto;min-width:0}
/* 開閉の印は文字ではなく線2本で描く（＋／−）。色は紺、体系内 */
.qa .qmark{flex:none;position:relative;width:16px;height:16px;margin-top:.45em}
.qa .qmark::before,.qa .qmark::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--navy);border-radius:var(--pill);transition:transform .25s}
.qa .qmark::after{transform:rotate(90deg)}
.qa[open] .qmark::after{transform:rotate(0)}
.qa summary:hover .qtx,.qa summary:focus-visible .qtx{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.qa .qa-a{padding:0 0 1.1em calc(2.4em + 12px);color:var(--sub);font-size:var(--fs-small);line-height:1.85}
.faq-teaser .btn-row{margin-top:1.4em}

/* --- FAQ ページ: カテゴリの絞り込み（タブ）。枠ピル（部品15）と塗りピルの2値 --- */
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.2em}
.faq-tab{display:inline-flex;align-items:center;min-height:var(--btn-h);padding:0 16px;border:1.5px solid var(--navy);border-radius:var(--pill);
  background:transparent;color:var(--navy);font-family:inherit;font-weight:var(--w-heading);font-size:var(--fs-small);letter-spacing:.04em;cursor:pointer}
.faq-tab[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.faq-cat + .faq-cat{margin-top:2.4em}
.faq-cat[hidden]{display:none}
.faq-all .faq-cat .hd{margin-top:0}

@media(min-width:768px){
  .cardgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qa .qa-a{padding-right:28px}
  .faq-tab{padding:0 20px}
}

/* ============ 2026-09-08 担当者指示: ナビゲーションの新設／LINE の CTA ============ */

/* --- 展開項目「お悩み別ウィッグの選び方」。PC はメガメニュー（バーの下に全幅の面）。クリックで開く（オンマウスでは開かない） --- */
.gnav-list .has-mega{position:static}
.gnav-list .mega-btn{display:inline-flex;align-items:center;gap:.4em;background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  font-weight:var(--w-heading);letter-spacing:0;white-space:nowrap;position:relative;padding-bottom:9px}
.gnav-list .mega-btn::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:0;background:var(--orange);transition:width .28s cubic-bezier(.22,.61,.36,1)}
.gnav-list .mega-btn:hover::after,.gnav-list .mega-btn:focus-visible::after,.gnav-list .mega-btn[aria-expanded="true"]::after{width:100%}
.mega-btn .chev{display:inline-block;width:.55em;height:.55em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.15em);transition:transform .2s}
.mega-btn[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-.1em)}
/* 面: 地はクリーム、上に点線罫。影は使わない（体系どおり）。中身は写真つきの導線カード3枚（トップのお悩みカードと同じ写真） */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--cream);z-index:1001;
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.mega[hidden]{display:none}
/* 2026-09-09 担当者「メガメニューになっていない」。面を大きくした: 見出し行＋写真を上いっぱいに置いた大きなカード3枚（写真 3:2・題・行き先ページの見出し1）。
   旧: 横長の小カード（96px の写真＋題）が1行に3枚。 */
.mega-inner{max-width:1280px;margin:0 auto;padding:28px 40px 34px}
.mega-title{font-size:var(--fs-label);letter-spacing:.15em;font-weight:var(--w-heading);color:var(--navy);margin-bottom:14px}
/* 2026-09-16: お悩み4ページになったので4列（旧 3列・gap 24px） */
.mega-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* .gnav-list a の white-space:nowrap を継ぐと説明の1行が切れる（2026-09-09 に実際に切れた）。ここで戻す */
.mega-card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);position:relative;white-space:normal;font-weight:var(--w-body)}
.mega-card .fig{margin:0;border-radius:0;width:100%}
.mega-card .fig img{aspect-ratio:3/2}
.mega-card .mega-tx{display:block;padding:14px 46px 16px 16px}
.mega-card .lead{display:block;font-weight:var(--w-heading);font-size:var(--fs-lead);line-height:1.5}
.mega-card .desc{display:block;margin-top:.35em;color:var(--sub);font-size:var(--fs-small);line-height:1.7}
.mega-card .arw{position:absolute;right:16px;bottom:16px;color:var(--navy);font-weight:var(--w-strong)}
.mega-card:hover .lead,.mega-card:focus-visible .lead{text-decoration:underline;text-underline-offset:.22em}
/* プライバシーポリシーは小さく（担当者指示）。主ナビの列の末尾に小さな文字で置く */
.gnav-list .nav-sub{font-size:var(--fs-note);font-weight:var(--w-body);color:var(--sub);align-self:center;padding-bottom:9px}
.gnav-list .nav-sub::after{display:none}

/* --- スマホの開閉メニュー: 展開項目は details/summary。子は1段下げて小さく --- */
.drawer-nav details{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.drawer-nav details:first-child{background-image:none}
.drawer-nav summary{display:flex;align-items:center;gap:12px;min-height:52px;font-weight:var(--w-heading);cursor:pointer;list-style:none}
.drawer-nav summary::-webkit-details-marker{display:none}
.drawer-nav summary .chev{margin-left:auto;display:inline-block;width:.6em;height:.6em;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(45deg);transition:transform .2s}
.drawer-nav details[open] summary .chev{transform:rotate(-135deg)}
.drawer-nav .sub a{min-height:44px;padding-left:36px;font-size:var(--fs-small);background-image:none}
.drawer-nav .sub a + a{background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.drawer-nav a + details,.drawer-nav details + a{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.drawer-sub .small{font-size:var(--fs-note)}

/* --- LINE の CTA: ブランドカラー（--line）＋ロゴ。LINE へ送るボタン・バナーだけに使う（担当者指示 2026-09-08） --- */
.btn-line.is-line,.on-navy .btn-line.is-line,.deep .btn-line.is-line{background:var(--line);border-color:var(--line);color:var(--white)}
.btn-line.is-line::before{display:none}
.btn-line.is-line:hover,.btn-line.is-line:focus-visible{filter:brightness(.92)}
.line-logo{display:inline-block;width:1.5em;height:1.5em;flex:none}
.line-logo svg{width:100%;height:100%;display:block}
/* フッターのバナー（LINE）。写真ではなく、ブランド色の面にロゴと文言。大きさは他のバナーと同じ 300×140 */
.foot-banners .bnr-line{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:300px;aspect-ratio:15/7;
  background:var(--line);color:var(--white);border-radius:var(--r);font-weight:var(--w-heading);font-size:var(--fs-lead);letter-spacing:.04em;text-decoration:none}
.foot-banners .bnr-line .line-logo{width:2.2em;height:2.2em}
.foot-banners a.bnr-line:hover,.foot-banners a.bnr-line:focus-visible{text-decoration:none;filter:brightness(.92)}

@media(min-width:768px){
  /* 主ナビが6項目＋小さなリンクになった。768〜1023 では2行に折り返せるよう、高さを最小値にする（旧: height 固定） */
  .gnav-row + .gnav-row{height:auto;min-height:calc(40px + var(--gnav-extra));flex-wrap:wrap;row-gap:0;padding:4px 0}
}

/* トップ FV の主ナビ（左列 314px）の展開項目。行の造形は既存のまま、子は1段下げて小さく */
.nav-panel details.nav-group{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.nav-panel details.nav-group summary{display:flex;align-items:center;gap:12px;height:47px;font-weight:var(--w-heading);cursor:pointer;list-style:none}
.nav-panel details.nav-group summary::-webkit-details-marker{display:none}
.nav-panel details.nav-group summary .chev{margin-left:auto;display:inline-block;width:.5em;height:.5em;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(45deg);transition:transform .2s}
.nav-panel details.nav-group[open] summary .chev{transform:rotate(-135deg)}
.nav-panel details.nav-group a.sub{height:40px;padding-left:36px;font-size:var(--fs-small);background-image:none}
.nav-panel details.nav-group a.sub + a.sub{background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}
.nav-panel a + details.nav-group,.nav-panel details.nav-group + a{
  background-image:linear-gradient(to right, var(--rule-c), var(--rule-c) 2px, transparent 2px);
  background-size:var(--rule-period) 1px;background-repeat:repeat-x;background-position:0 0}

@media(min-width:768px){
  /* PC のみのトークンは PC のメディアクエリの中で使う（D-064。検査 3-8） */
  .gnav-list .mega-btn{font-size:var(--fs-gnav)}
  .nav-panel details.nav-group summary{font-size:var(--fs-nav)}
}

/* フッターの「プライバシーポリシー」は小さく（担当者指示 2026-09-08） */
.foot-nav li.small a{font-size:var(--fs-note);opacity:.8}

/* 開閉メニューの LINE ボタンはボタンなので下線を出さない（2026-09-08。main の外なので既定の下線が残っていた） */
.drawer .btn-line{text-decoration:none}

@media(min-width:768px){
  /* メガメニューのカードは .gnav-list a の指定（nowrap・級数・下線の帯）を受けない。詳細度で上書きする（(0,2,0) > (0,1,1)） */
  .gnav-list .mega-card{white-space:normal;font-size:var(--fs-body);padding-bottom:0}
  .gnav-list .mega-card::after{display:none}
}

/* ============ 2026-09-09 担当者指示: FAQ の回答をアコーディオンのように滑らかに開閉 ============
   <details> はそのままでは開閉に動きが付かない。JS が summary のクリックを受け、回答の高さを 0 ↔ 実寸で遷移させる。
   JS 無しでは従来どおり瞬時に開閉する（内容は欠けない）。 */
.qa .qa-a{overflow:hidden}
.js .qa .qa-a{transition:height .32s cubic-bezier(.22,.61,.36,1), opacity .32s}
.js .qa.is-animating .qa-a{will-change:height}
.qa .qmark::before,.qa .qmark::after{transition:transform .32s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: reduce){ .js .qa .qa-a{transition:none} }