@charset "utf-8";
/* H.D.S株式会社 子テーマ — 画面の部品（R10・2026-09-13）
 *
 * ★値は theme.json が持つ。このファイルに色・余白・書体の「数値」を書かない。
 *   色・余白・書体 → var(--wp--preset--…) ／ それ以外 → var(--wp--custom--…)
 *   （design/tokens.css の :root ブロックは theme.json に移したので、ここには無い）
 *
 * ★出どころは design/tokens.css（R09-b・承認①-b・2026-09-13）。
 *   699件のコントラスト実測を通した実装なので、部品のCSSはその形を保っている。
 *   値の参照先だけを theme.json に付け替えた。
 *
 * ★動き: 出現アニメ（.rv）は prefers-reduced-motion: reduce で完全に止まる。
 */

/* C001 H.D.S株式会社 — 基本デザインの値（R09-b・2026-09-12 差し戻し1 の修正版）
 * 実装の正は子テーマ（R10）。このファイルは theme.json / 子テーマ style.css に入れる値の控え。
 * ★6画面のHTMLは、すべてこのファイルを <link> で読んでいる。CSSはここ1か所にしかない。
 * ★動き: 出現アニメ（.rv）とカウントアップの正は、このファイルと parts.js。
 *        トップFVの車・雲・太陽の動きの正は preview/assets/style.css（Claude Code）。
 */

/* ══ 1. 値 ════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:16px;line-height:1.85}
h1,h2,h3,.num,.big,.secno,.stat__n{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;line-height:1.3;margin:0}
a{color:var(--wp--preset--color--link)}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--wp--preset--spacing--50)}
.narrow{max-width:760px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ══ 2. 動き（★差し戻し④で範囲を拡張・2026-09-12 Rand決定） ══
 * 全ページに「スクロールでふわっと出る」だけを入れる。位置は動かさない（読みに来た人の邪魔をしない）。
 * FVの車・雲・太陽は preview/ が正。ここでは静止コマ。 */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}
.rv-2{transition-delay:.08s}.rv-3{transition-delay:.16s}.rv-4{transition-delay:.24s}
/* ★車の速さ。1か所で変える（preview/assets/style.css と同じ 16s） */
:root{--car-speed:16s}

/* ★動きを減らす設定では、すべて完全に止める（D336）。
 * 出現アニメだけでなく、情景の車と雲も止める。「ゆっくりにする」ではなく「止める」。
 * 車は最後の位置で残らないよう、道路の上の見える位置に置き直す。 */
@media (prefers-reduced-motion:reduce){
  .rv,.rv-2,.rv-3,.rv-4{opacity:1!important;transform:none!important;transition:none!important}
  .car,.cloud{animation:none!important}
  .car--kei{left:170px}
  .car--truck{left:760px}
  .car--far1{left:420px}
  .car--far2{left:1080px}
  .cloud--a{left:6%}.cloud--b{left:44%}.cloud--c{left:62%}
  .cloud--d{left:26%}.cloud--e{left:76%}.cloud--f{left:14%}
}

/* ══ 3. ヘッダー ═══════════════════════════════════════ */
.hd{background:var(--wp--preset--color--sky)}
.hd__in{display:flex;align-items:center;gap:var(--wp--preset--spacing--40);padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);max-width:1200px;margin:0 auto}
/* ★重ねヘッダーの「位置の基準」（D370③の再発を直した・R13前）。
 *
 * .hd--over は position:absolute だが、祖先に位置の基準が1つも無かった。
 *   ・main.board は position:static（padding-bottom だけ）
 *   ・そもそも <header> は main.board の【外】にあるので、.board に付けても届かない
 * 基準が無いと「最初の包含ブロック」＝文書の左上に貼り付く。
 * その結果、管理バーが入れる html{margin-top:32px} の【外】に取り残され、
 * ログインするとヘッダーが管理バーの下に潜って見えなくなっていた。
 *
 * ★直し方はA（ヘッダーを position:relative の箱に入れる）。
 * 箱はテンプレート側の template-part の包み（.hd-holder）を使う。
 * この包みは中身が絶対配置だけなので高さ0——重ねたままで、流れの中に居るので
 * 管理バーのぶんも一緒に下がる。★admin-bar 用の数値を別に書かなくてよい形。 */
.hd-holder{position:relative;z-index:5}
.hd--over{position:absolute;inset:0 0 auto;z-index:5;background:none}
.hd__logo{display:flex;align-items:center;text-decoration:none}
/* ★2026-09-12 Rand: 白い板は不採用。白抜き版 logo-white.png を地に直接載せる */
.hd__logo img{display:block;height:44px;width:auto}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:var(--wp--preset--spacing--40)}
.hd__nav a{color:var(--wp--preset--color--base);text-decoration:none;font-size:14px;font-weight:500;position:relative;padding-bottom:3px}
.hd__nav a:not(.hd__cta):not(.hd__tel)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--wp--preset--color--accent);opacity:0;transition:opacity .2s}
.hd__nav a[aria-current="page"]{color:var(--wp--preset--color--accent)}
.hd__nav a[aria-current="page"]::after{opacity:1}
/* ★塗りのボタンは主CTA「ドライバー募集」だけ（N144）。他は枠線。 */
.hd__cta{display:inline-flex;align-items:center;height:42px;padding:0 var(--wp--preset--spacing--40);
  border:2px solid var(--wp--preset--color--base);color:var(--wp--preset--color--base)!important;border-radius:var(--wp--custom--radius--part);font-weight:700;font-size:14px}
.hd__tel{color:var(--wp--preset--color--base)!important;text-decoration:none;font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900;font-size:18px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px}
.hd__tel .ic{width:16px;height:16px;color:var(--wp--preset--color--accent)}

/* ══ 4. ボタン ═════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wp--preset--spacing--20);height:var(--wp--custom--button--height);padding:0 var(--wp--custom--button--padding);
  border-radius:var(--wp--custom--radius--part);font-weight:700;font-size:16px;text-decoration:none}
.btn--main{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--contrast);box-shadow:var(--wp--custom--shadow--card)}
.btn--sub{border:2px solid var(--wp--preset--color--base);color:var(--wp--preset--color--base)}
.btn--sub-on-white{border:2px solid var(--wp--preset--color--contrast);color:var(--wp--preset--color--contrast)}
.btn .ic{width:18px;height:18px}

/* ══ 5. トップのFV ═════════════════════════════════════ */
.fv{position:relative;overflow:hidden;height:820px;
  background:linear-gradient(170deg,var(--wp--preset--color--sky) 0%,var(--wp--preset--color--sky-2) 100%);color:var(--wp--preset--color--base)}
/* 地の作り込み（差し戻し②「背景がシンプルすぎる」）— 斜めの光と細かい格子 */
.fv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(102deg,transparent 38%,rgba(245,165,36,.07) 46%,transparent 54%),
    linear-gradient(102deg,transparent 58%,rgba(255,255,255,.05) 64%,transparent 70%)}
.fv::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 62%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 62%)}
.fv__inner{position:relative;z-index:3;max-width:1200px;margin:0 auto;padding:96px var(--wp--preset--spacing--50) 0}
/* ★アクセントの塗りは主CTAだけなので、目印は「濃紺の上のアクセント文字＋細枠」（組み合わせ①） */
.fv__eyebrow{display:inline-flex;align-items:center;gap:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--30);padding:3px var(--wp--preset--spacing--25);
  border:1px solid var(--wp--preset--color--accent);border-radius:999px;color:var(--wp--preset--color--accent);
  font-size:13px;font-weight:700;letter-spacing:.08em}
.fv__eyebrow .ic{width:14px;height:14px}
.fv h1{font-weight:900;font-size:68px;letter-spacing:.01em}
.fv h1 em{font-style:normal;color:var(--wp--preset--color--accent)}
.fv h1 .u{position:relative;display:inline-block}
.fv h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:8px;background:var(--wp--preset--color--accent);opacity:.28;border-radius:4px}
.fv__sub{margin:var(--wp--preset--spacing--40) 0 0;max-width:34em;color:var(--wp--preset--color--sky-ink-2);font-size:18px}
.fv__acts{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--25);margin-top:var(--wp--preset--spacing--50)}
.fv__tags{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20);margin:var(--wp--preset--spacing--40) 0 0;padding:0;list-style:none}
.fv__tags li{border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:2px var(--wp--preset--spacing--25);
  font-size:12px;font-weight:700;color:var(--wp--preset--color--sky-ink-2)}

/* 数字3枠（★FVの中に置かない。FV直下の濃紺の帯。FVの中だと画面の高さで情景と重なる） */
.facts{background:var(--wp--preset--color--sky);color:var(--wp--preset--color--sky-ink-2);padding:var(--wp--preset--spacing--50) 0;position:relative}
.facts::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--wp--preset--color--accent) 0 22%,rgba(255,255,255,.16) 22%)}
.facts ul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wp--preset--spacing--45);list-style:none;padding:0;margin:0}
.facts li{font-size:13px;line-height:1.7;padding-left:var(--wp--preset--spacing--40);border-left:1px solid rgba(255,255,255,.18)}
.facts .num{display:block;color:var(--wp--preset--color--base);font-size:30px;font-weight:900;margin-bottom:var(--wp--preset--spacing--10)}
.facts .num i{font-style:normal;font-size:15px;font-weight:700;color:var(--wp--preset--color--accent)}
.facts .ic{width:20px;height:20px;color:var(--wp--preset--color--accent);margin-bottom:var(--wp--preset--spacing--20)}

/* FV直下の帯（文言版・数字を置かないとき） */
.band{background:var(--wp--preset--color--sky);color:var(--wp--preset--color--sky-ink-2);padding:var(--wp--preset--spacing--50) 0;position:relative}
.band::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--wp--preset--color--accent) 0 22%,rgba(255,255,255,.16) 22%)}
.band ul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wp--preset--spacing--45);list-style:none;padding:0;margin:0}
.band li{padding-left:var(--wp--preset--spacing--40);border-left:1px solid rgba(255,255,255,.18);font-size:13.5px;line-height:1.8}
.band .ic{width:22px;height:22px;color:var(--wp--preset--color--accent);margin-bottom:var(--wp--preset--spacing--20)}
.band h3,.band .band__t{font-size:18px;font-weight:900;color:var(--wp--preset--color--base);margin:0 0 var(--wp--preset--spacing--20)}

/* カードの中に置くイラスト */
.card__il{display:block;width:100%;height:auto;margin-bottom:var(--wp--preset--spacing--30);border-radius:10px;background:var(--wp--preset--color--gray-100)}
.sec--navy .card__il{background:rgba(255,255,255,.06)}

/* 情景（R09-b ①・2026-09-12 確定の動きを子テーマへ移した・R13前）
 *
 * ★車線の帯を先に決めてから車を置く（D370）。道路は高さ120px、中央線は ::before の
 * top:46px なので「下端から74px」。日本は左側通行——横から見た情景では
 *   手前の車線（下端 0〜70px）… 自社の車。大きく映る。★右→左
 *   奥の車線（下端 78px以上）… 一般車。遠いので小さい。★左→右
 * ★手前の車は鼻を左に描いてある。scaleX で反転させない（車体の H.D.S が鏡文字になる）。
 * ★数字3枠はFVの外（濃紺の帯）に置いたまま。ここに戻すと画面が低いとき情景と重なる（D369）。 */
.scene{position:absolute;inset:auto 0 0;z-index:1;height:300px;pointer-events:none}
.scene__road{position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--wp--custom--scene--road)}
.scene__road::before{content:"";position:absolute;left:0;right:0;top:46px;height:3px;
  background:repeating-linear-gradient(90deg,var(--wp--custom--scene--road-line) 0 40px,transparent 40px 88px);opacity:.45}
.scene__city{position:absolute;left:0;width:100%;bottom:104px;height:130px;opacity:.42}
.car{position:absolute;will-change:transform}
/* 軽バン viewBox 150x88（比 .587）→ 幅104で高さ61.0、上端67.0（中央線74の内側） */
.car--kei{bottom:6px;width:104px;animation:runLeftPlain var(--car-speed) linear infinite}
/* 小型トラック viewBox 200x92（比 .460）→ 幅132で高さ60.7、上端66.7（同じく内側） */
.car--truck{bottom:6px;width:132px;animation:runLeftPlain calc(var(--car-speed)*1.55) linear infinite;
  animation-delay:calc(var(--car-speed)*-.8)}
.car--far1{bottom:80px;width:96px;opacity:.8;animation:runRight calc(var(--car-speed)*1.3) linear infinite}
.car--far2{bottom:78px;width:92px;opacity:.7;animation:runRight calc(var(--car-speed)*.95) linear infinite;
  animation-delay:calc(var(--car-speed)*-.6)}
.cloud{position:absolute;opacity:.12;animation:drift 26s linear infinite}
.cloud--a{top:12%;width:220px}
.cloud--b{top:26%;width:150px;animation-duration:38s;animation-delay:-12s}
.cloud--c{top:8%;width:180px;animation-duration:32s;animation-delay:-20s}
.cloud--d{top:34%;width:110px;animation-duration:44s;animation-delay:-6s;opacity:.10}
.cloud--e{top:19%;width:250px;animation-duration:30s;animation-delay:-26s}
.cloud--f{top:40%;width:130px;animation-duration:50s;animation-delay:-34s;opacity:.09}

/* ★右向きの走り（奥の車線・左→右） */
@keyframes runRight{from{transform:translateX(-170px)}to{transform:translateX(100vw)}}
/* ★反転させない左走り（手前の車線・右→左）。反転すると車体の文字が鏡文字になる */
@keyframes runLeftPlain{from{transform:translateX(100vw)}to{transform:translateX(-220px)}}
@keyframes drift{from{transform:translateX(-20vw)}to{transform:translateX(120vw)}}
.sun{position:absolute;right:8%;top:9%;width:176px;aspect-ratio:1;z-index:0;pointer-events:none}

/* ══ 6. 下層ページの見出し帯 ═══════════════════════════ */
.ph{background:linear-gradient(170deg,var(--wp--preset--color--sky) 0%,var(--wp--preset--color--sky-2) 100%);color:var(--wp--preset--color--base);
  padding:var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--60);position:relative;overflow:hidden}
/* ★2026-09-12 Rand「各ページの上部にもっと色を」——トップのFVと同じ世界にする。
 * 新しい色は増やさず、太陽（アクセント）・雲・斜めの光・窓の明かりで色を足す。 */
.ph::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(102deg,transparent 30%,rgba(245,165,36,.13) 44%,transparent 58%),
    linear-gradient(102deg,transparent 58%,rgba(255,255,255,.07) 66%,transparent 74%)}
.ph__cloud{position:absolute;z-index:0;pointer-events:none;opacity:.11}
.ph__cloud--a{top:16%;left:54%;width:210px}
.ph__cloud--b{top:52%;left:78%;width:140px;opacity:.09}
.ph__cloud--c{top:66%;left:42%;width:170px;opacity:.08}
.ph .wrap{position:relative;z-index:2}
.ph h1{font-size:40px;font-weight:900}
.ph p{margin:var(--wp--preset--spacing--25) 0 0;color:var(--wp--preset--color--sky-ink-2);font-size:15px;max-width:40em}
/* ★2026-09-12 Rand「文字などに対して色や装飾を」——太陽はやめ、文字側に色を足す */
.ph__eyebrow{display:inline-flex;align-items:center;gap:var(--wp--preset--spacing--25);margin-bottom:var(--wp--preset--spacing--30);color:var(--wp--preset--color--accent);
  font-size:12px;font-weight:700;letter-spacing:.18em}
.ph__eyebrow::before{content:"";width:32px;height:3px;border-radius:2px;background:var(--wp--preset--color--accent)}
.ph h1 em{font-style:normal;color:var(--wp--preset--color--accent)}
.ph h1::after{content:"";display:block;width:72px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--wp--preset--color--accent) 0 60%,#71D9B8 60%);margin-top:var(--wp--preset--spacing--30)}
.ph .fv__tags li{border-color:rgba(245,165,36,.55);color:var(--wp--preset--color--base)}
.ph .fv__tags li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--wp--preset--color--accent);margin-right:7px;vertical-align:2px}
/* ★パンくずは .ph（濃紺のページ見出し）の中だけに効かせる（R12で実測して直した）。
 *
 * もとは `.crumb` を裸で書いていたので、★親テーマのブログ側にも当たっていた。
 * 親は `:where(.crumb)`（詳細度0）で書いているため、こちらの `.crumb`（0,1,0）が必ず勝つ。
 * その結果 /blog/ のパンくずが、濃紺用の #C9D6E4 のまま明るい地（#F6F6FA）に乗り、
 * ★1.37:1 になっていた（本文は4.5:1が要る）。見た目が薄いだけなので目視では見つからない。
 * ★子テーマのCSSは、子テーマが出す箱の中に閉じる。 */
.ph .crumb{font-size:12px;color:var(--wp--preset--color--sky-ink-2);margin-bottom:var(--wp--preset--spacing--25)}
.ph .crumb a{color:var(--wp--preset--color--sky-ink-2);border-bottom:1px solid rgba(255,255,255,.35)}
/* 地の帯に薄いスカイライン（図形のみ・不透明度16%） */
.ph__city{position:absolute;left:0;width:100%;bottom:0;height:72px;opacity:.26;z-index:1}

/* ══ 7. セクションの地（★差し戻し②の中心） ═════════════ */
.sec{padding:var(--wp--preset--spacing--70) 0;position:relative}
.sec--soft{background:var(--wp--preset--color--gray-100)}
/* ★点の格子はやめた（2026-09-12 Rand：作られた模様に見えるため）。
 * 代わりに「上端に道路の車線を思わせる破線を1本」＋「地を上から白へ薄く抜く」。
 * 敷き詰めた模様ではなく、形と明暗で見分けさせる。 */
.sec--soft::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0,rgba(255,255,255,0) 36%)}
.sec--soft::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--wp--preset--color--line-2) 0 30px,transparent 30px 58px);opacity:.8}
.sec--tint{background:var(--wp--preset--color--accent-tint)}
.sec--tint::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(112deg,rgba(245,165,36,.10) 0 2px,transparent 2px 14px)}
.sec--navy{background:linear-gradient(170deg,var(--wp--preset--color--sky) 0%,var(--wp--preset--color--sky-2) 100%);color:var(--wp--preset--color--base);overflow:hidden}
.sec--navy h2{color:var(--wp--preset--color--base)}
.sec--navy p{color:var(--wp--preset--color--sky-ink-2)}
.sec--navy .lead{color:var(--wp--preset--color--base)}
.sec>.wrap{position:relative;z-index:2}
/* 濃紺と紙のあいだを斜めで切る（帯の切り替わりを「線」で見せる） */
.sec--slant{clip-path:polygon(0 0,100% 34px,100% 100%,0 100%);margin-top:-34px;padding-top:calc(var(--wp--preset--spacing--70) + 34px)}

.sec h2{font-size:30px;font-weight:900;margin-bottom:var(--wp--preset--spacing--40)}
.sec h3{font-size:18px;font-weight:700;margin:var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--25)}
.sec p{margin:0 0 var(--wp--preset--spacing--30)}
.lead{font-size:17px}
.mut{color:var(--wp--preset--color--gray-600);font-size:13px}
.sec--navy .mut{color:var(--wp--preset--color--sky-ink-2)}

/* 見出しのまとまり（小見出し＋通し番号＋横線） */
.hgroup{margin-bottom:var(--wp--preset--spacing--45)}
.eyebrow{display:flex;align-items:center;gap:var(--wp--preset--spacing--25);margin-bottom:var(--wp--preset--spacing--25);
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--wp--preset--color--gray-600)}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--wp--preset--color--accent);border-radius:2px}
.sec--navy .eyebrow{color:var(--wp--preset--color--sky-ink-2)}
.hgroup h2{margin-bottom:var(--wp--preset--spacing--25)}
.hgroup .lead{margin:0;color:var(--wp--preset--color--ink-2);max-width:44em}
.sec--navy .hgroup .lead{color:var(--wp--preset--color--sky-ink-2)}
.secno{position:absolute;right:var(--wp--preset--spacing--50);top:calc(var(--wp--preset--spacing--70) - 24px);z-index:1;
  font-size:120px;font-weight:900;line-height:1;color:transparent;
  -webkit-text-stroke:2px var(--wp--preset--color--gray-300);pointer-events:none;user-select:none}
.sec--navy .secno{-webkit-text-stroke-color:rgba(255,255,255,.16)}

/* 強調（アクセントの地＋濃紺の文字＝7.67:1。白文字は載せない） */
.mark{background:linear-gradient(transparent 62%,var(--wp--preset--color--accent) 62%);font-weight:700;padding:0 2px}
strong{font-weight:700}

/* ══ 8. 部品 ═══════════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--wp--preset--spacing--40);list-style:none;padding:0;margin:0}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--45) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  box-shadow:var(--wp--custom--shadow--card);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--wp--preset--color--accent);opacity:.9}
.card h3,.card .card__t{margin:0 0 var(--wp--preset--spacing--20);font-size:17px}
/* ★見出しに見えるが見出しではないもの（D101で階層が飛ぶため p にした）。
   書体と太さは h3 と同じにする。 */
.band .band__t,.card .card__t{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;line-height:1.3}
.card .card__t{font-weight:700}
.card p{margin:0;font-size:14px;color:var(--wp--preset--color--ink-2)}
.card__ic{width:44px;height:44px;border-radius:10px;background:var(--wp--preset--color--gray-100);display:grid;place-items:center;margin-bottom:var(--wp--preset--spacing--30)}
.card__ic .ic{width:24px;height:24px;color:var(--wp--preset--color--sky-2)}

/* アイコン（線は --ic ＝ #14406B。白地10.63:1／薄い地9.79:1） */
.ic{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}

/* ちいさな札 */
.chips{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20);padding:0;margin:0 0 var(--wp--preset--spacing--40);list-style:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--wp--preset--color--gray-300);background:#fff;
  border-radius:999px;padding:4px var(--wp--preset--spacing--30);font-size:13px;font-weight:700;color:var(--wp--preset--color--ink-2)}
.chip .ic{width:14px;height:14px;color:var(--wp--preset--color--sky-2)}
.chip--em{border-color:var(--wp--preset--color--accent);border-width:2px}

/* 数字タイル */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wp--preset--spacing--30);list-style:none;padding:0;margin:0}
.stat{background:#fff;border:1px solid var(--wp--preset--color--gray-300);border-left:4px solid var(--wp--preset--color--accent);
  border-radius:var(--wp--custom--radius--part);padding:var(--wp--preset--spacing--40);box-shadow:var(--wp--custom--shadow--card)}
.stat__k{font-size:12px;font-weight:700;color:var(--wp--preset--color--gray-600);letter-spacing:.06em}
.stat__n{display:block;font-size:28px;font-weight:900;margin:var(--wp--preset--spacing--10) 0}
.stat__n i{font-style:normal;font-size:15px}
.stat p{margin:0;font-size:13px;color:var(--wp--preset--color--ink-2)}

/* 手順 */
.steps{list-style:none;padding:0;margin:0;counter-reset:st}
.steps li{position:relative;padding:0 0 var(--wp--preset--spacing--45) var(--wp--preset--spacing--60);counter-increment:st}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--wp--preset--color--accent);color:var(--wp--preset--color--contrast);display:grid;place-items:center;font-weight:900;font-size:15px;z-index:2}
.steps li::after{content:"";position:absolute;left:17px;top:36px;bottom:8px;width:2px;
  background:repeating-linear-gradient(180deg,var(--wp--preset--color--line-2) 0 6px,transparent 6px 12px)}
.steps li:last-child::after{display:none}
.steps h3{margin:0 0 var(--wp--preset--spacing--10);font-size:17px}
.steps p{margin:0;font-size:14px;color:var(--wp--preset--color--ink-2)}

/* 引用（代表の言葉など） */
.quote{position:relative;border-left:4px solid var(--wp--preset--color--accent);background:var(--wp--preset--color--gray-100);
  border-radius:0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0;padding:var(--wp--preset--spacing--45) var(--wp--preset--spacing--45) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);margin:0 0 var(--wp--preset--spacing--45)}
.quote::before{content:"“";position:absolute;left:var(--wp--preset--spacing--30);top:var(--wp--preset--spacing--25);
  font-family:"Zen Kaku Gothic New",serif;font-size:56px;line-height:1;color:var(--wp--preset--color--accent);opacity:.55}
.quote p{font-size:17px;margin:0 0 var(--wp--preset--spacing--25)}
.quote cite{font-style:normal;font-size:13px;color:var(--wp--preset--color--gray-600)}

/* 濃紺の差し込み箱 */
.panel{background:var(--wp--preset--color--sky);color:var(--wp--preset--color--base);border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--45);position:relative;overflow:hidden}
.panel h3{margin:0 0 var(--wp--preset--spacing--25);font-size:16px;color:var(--wp--preset--color--accent)}
.panel p{margin:0;color:var(--wp--preset--color--sky-ink-2)}
.model{background:var(--wp--preset--color--sky);color:var(--wp--preset--color--base);border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--45);margin-bottom:var(--wp--preset--spacing--45);position:relative;overflow:hidden}
.model::after{content:"";position:absolute;right:-46px;top:-46px;width:184px;height:184px;border-radius:50%;
  border:2px solid var(--wp--preset--color--accent);opacity:.22}
.model h3{margin:0 0 var(--wp--preset--spacing--25);font-size:16px;color:var(--wp--preset--color--accent);position:relative}
.model p{margin:0;font-size:17px;line-height:1.9;position:relative}

/* 報酬の三段（①入る → ②引く → ③残る） */
.money{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wp--preset--spacing--45);list-style:none;padding:0;margin:0 0 var(--wp--preset--spacing--30);position:relative}
.money li{border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--40);background:#fff;
  position:relative;box-shadow:var(--wp--custom--shadow--card)}
.money li:not(:last-child)::after{content:"";position:absolute;right:-24px;top:50%;width:24px;height:2px;
  background:var(--wp--preset--color--line-2)}
.money li:not(:last-child)::before{content:"";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--wp--preset--color--line-2)}
.money .step{display:inline-block;font-size:12px;font-weight:700;color:var(--wp--preset--color--gray-600);
  border:1px solid var(--wp--preset--color--gray-300);border-radius:999px;padding:1px var(--wp--preset--spacing--25);margin-bottom:var(--wp--preset--spacing--20)}
.money .big{display:block;font-weight:900;font-size:24px;margin:var(--wp--preset--spacing--10) 0}
.money .note{font-size:13px;color:var(--wp--preset--color--ink-2);margin:0}
/* ③「残る」に添える条件（R11・案A）。金額のすぐ下に置き、下限の根拠を逃がさない。
   ★文字色は紙の上で 4.5:1 を満たす ink-2 を使う（accent-tint の上でも同じ） */
.money .cond{display:block;font-size:13px;font-weight:700;color:var(--wp--preset--color--ink-2);
  margin:0 0 var(--wp--preset--spacing--10)}
.money li.is-net{border-color:var(--wp--preset--color--accent);border-width:2px;background:var(--wp--preset--color--accent-tint)}
.money li.is-net .step{border-color:var(--wp--preset--color--accent);background:var(--wp--preset--color--accent);color:var(--wp--preset--color--contrast)}

/* 表 */
.dl{border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);overflow:hidden;margin:0;background:#fff}
.dl div{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--wp--preset--color--gray-300)}
.dl div:last-child{border-bottom:0}
.dl dt{background:var(--wp--preset--color--gray-100);padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);font-weight:700;font-size:14px;margin:0}
.dl dd{padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);margin:0;font-size:15px}
.blank{display:inline-block;min-width:12em;border-bottom:1px dashed var(--wp--preset--color--gray-600);color:var(--wp--preset--color--gray-600)}

/* ★未確定の欄（吉田様の回答待ち）— 顧客に見せる版で「空である」ことが分かる形 */
.hold{border:2px dashed var(--wp--preset--color--field);border-radius:var(--wp--custom--radius--card);background:var(--wp--preset--color--gray-100);padding:var(--wp--preset--spacing--45);margin:0}
.hold__tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--wp--preset--color--contrast);
  background:var(--wp--preset--color--accent);border-radius:999px;padding:2px var(--wp--preset--spacing--25);margin-bottom:var(--wp--preset--spacing--30)}
.hold__tag .ic{width:13px;height:13px}
.hold ul{margin:0;padding-left:1.2em}
.hold li{font-size:14px;color:var(--wp--preset--color--ink-2);margin-bottom:var(--wp--preset--spacing--20)}

/* よくある質問 */
.faq{list-style:none;padding:0;margin:0}
.faq li{border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);background:#fff;padding:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--25);box-shadow:var(--wp--custom--shadow--card)}
.faq h3{margin:0 0 var(--wp--preset--spacing--20);font-size:16px;display:flex;gap:var(--wp--preset--spacing--25);align-items:flex-start}
.faq h3::before{content:"Q";flex:none;width:24px;height:24px;border-radius:6px;background:var(--wp--preset--color--sky);color:#fff;
  font-size:13px;font-weight:900;display:grid;place-items:center}
.faq p{margin:0 0 0 36px;font-size:15px;color:var(--wp--preset--color--ink-2)}

/* お知らせ */
.news{list-style:none;padding:0;margin:0}
.news li{display:grid;grid-template-columns:110px 150px 1fr;gap:var(--wp--preset--spacing--30);align-items:center;
  padding:var(--wp--preset--spacing--30) 0;border-bottom:1px solid var(--wp--preset--color--gray-300)}
.news time{font-size:13px;color:var(--wp--preset--color--gray-600)}
.news .cat{font-size:12px;font-weight:700;color:var(--wp--preset--color--ink-2);border:1px solid var(--wp--preset--color--gray-300);border-radius:999px;
  padding:2px var(--wp--preset--spacing--25);text-align:center;white-space:nowrap}
.news a{font-size:15px;text-decoration:none}

/* ── 流れの図（HTML。★SVGの中に文字を入れない）─────────
 * SVGに文字を入れると、360pxで図ごと縮んで読めなくなる（2026-09-12 Randの指摘）。
 * 箱と文字はHTML、絵柄だけSVGにして、狭いところでは縦に積む。 */
.flow{display:flex;align-items:stretch;gap:var(--wp--preset--spacing--30)}
.flow__b{flex:1;border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--40);display:flex;flex-direction:column;justify-content:center}
.flow__b strong{display:block;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:17px;font-weight:900;margin-bottom:var(--wp--preset--spacing--10)}
.flow__b span{font-size:13px;color:var(--wp--preset--color--ink-2);line-height:1.7}
.flow__b--dark{background:var(--wp--preset--color--sky);color:var(--wp--preset--color--base)}
.flow__b--dark span{color:var(--wp--preset--color--sky-ink-2)}
.flow__b--em{background:var(--wp--preset--color--accent-tint);border:2px solid var(--wp--preset--color--accent)}
.flow__b--plain{background:#fff;border:1px solid var(--wp--preset--color--gray-300)}
.flow__b--dash{background:var(--wp--preset--color--gray-100);border:2px dashed var(--wp--preset--color--field)}
.flow__b--plain strong,.flow__b--dash strong{display:flex;align-items:center;gap:var(--wp--preset--spacing--20);font-size:15px}
.flow__b .ic{width:20px;height:20px;color:var(--wp--preset--color--sky-2);flex:none}
.flow__b--dash .ic{color:var(--wp--preset--color--gray-600)}
.flow__a{flex:none;align-self:center;width:26px;height:26px;color:var(--wp--preset--color--sky-2)}
.flow__out{flex:1.5;display:flex;flex-direction:column;gap:var(--wp--preset--spacing--25)}

/* 対応の範囲（HTML） */
.area{list-style:none;padding:0;margin:0;display:grid;gap:var(--wp--preset--spacing--25)}
.area li{display:flex;align-items:center;gap:var(--wp--preset--spacing--40);background:#fff;border:1px solid var(--wp--preset--color--gray-300);
  border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);box-shadow:var(--wp--custom--shadow--card)}
.area__d{flex:none;width:156px;height:38px}
.area h3{font-size:16px;margin:0 0 2px}
.area p{font-size:13px;color:var(--wp--preset--color--ink-2);margin:0}

/* 横に長い図は、狭いところでは最小幅を保って図だけ横スクロールさせる */
.figure--scroll{overflow-x:auto}
.only-sm{display:none}

/* ── 年表（HTML。★SVGの棒グラフは360pxで切れるので作り直した）───
 * PCは横一列、狭いところは縦一列。線と丸はCSSで引く。 */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--wp--preset--spacing--30);
  position:relative;counter-reset:tl}
.tl::before{content:"";position:absolute;left:12.5%;right:12.5%;top:11px;height:6px;border-radius:3px;background:var(--wp--preset--color--accent)}
.tl li{position:relative;padding-top:var(--wp--preset--spacing--45);text-align:center}
.tl li::before{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--wp--preset--color--sky-2);border:4px solid #fff;box-shadow:0 0 0 2px var(--wp--preset--color--sky-2)}
.tl li.is-goal::before{background:var(--wp--preset--color--accent);box-shadow:0 0 0 2px var(--wp--preset--color--accent)}
.tl b{display:block;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:17px;font-weight:900}
.tl span{display:block;font-size:13px;color:var(--wp--preset--color--ink-2);margin-top:var(--wp--preset--spacing--10);line-height:1.7}
.tl li.is-goal b{color:var(--wp--preset--color--contrast)}
.tl__wrap{background:#fff;border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);
  padding:var(--wp--preset--spacing--45);box-shadow:var(--wp--custom--shadow--card)}
.tl__wrap h3{margin:0 0 var(--wp--preset--spacing--45);font-size:16px}
.tl__note{margin:var(--wp--preset--spacing--45) 0 0;font-size:13px;color:var(--wp--preset--color--gray-600)}

.only-lg{display:block}

/* 図（インラインSVG）の囲み */
/* ★margin:0 を必ず書く。<figure> はブラウザの既定で margin:1em 40px が付き、
 * 左右80pxぶん図が細くなる（2026-09-12 実測で判明） */
.figure{margin:0;background:#fff;border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);
  padding:var(--wp--preset--spacing--45);box-shadow:var(--wp--custom--shadow--card)}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{margin-top:var(--wp--preset--spacing--25);font-size:13px;color:var(--wp--preset--color--gray-600)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp--preset--spacing--50);align-items:center}
.split--wide{grid-template-columns:1.1fr .9fr}

/* 大きなCTA帯 */
.cta{background:linear-gradient(170deg,var(--wp--preset--color--sky) 0%,var(--wp--preset--color--sky-2) 100%);color:var(--wp--preset--color--base);
  padding:var(--wp--preset--spacing--70) 0;text-align:center;position:relative;overflow:hidden}
.cta__city{position:absolute;left:0;width:100%;bottom:0;height:76px;opacity:.14;z-index:1}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:30px;font-weight:900;margin-bottom:var(--wp--preset--spacing--25)}
.cta p{color:var(--wp--preset--color--sky-ink-2);margin:0 0 var(--wp--preset--spacing--45)}
.cta__acts{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--25);justify-content:center}

/* フォーム（見た目だけ） */
.fm{max-width:100%}
.fm__r{margin-bottom:var(--wp--preset--spacing--40)}
.fm label{display:block;font-weight:700;font-size:14px;margin-bottom:var(--wp--preset--spacing--20)}
.fm .req{display:inline-block;margin-left:var(--wp--preset--spacing--20);padding:1px var(--wp--preset--spacing--20);border-radius:3px;
  background:var(--wp--preset--color--accent);color:var(--wp--preset--color--contrast);font-size:11px}
/* ★枠線は #A9B4C0（2.10:1）だと部品の境界の基準3:1に届かない。#7C8896（3.61:1）に替えた */
.fm .fld{display:block;width:100%;padding:var(--wp--preset--spacing--25) var(--wp--preset--spacing--30);border:1px solid var(--wp--preset--color--field);
  border-radius:var(--wp--custom--radius--part);font-size:15px;background:#fff;color:var(--wp--preset--color--gray-600);min-height:48px;line-height:1.5}
.fm .fld--area{min-height:140px}
.fm__h{font-size:13px;color:var(--wp--preset--color--gray-600);margin:var(--wp--preset--spacing--20) 0 0}
.fmbox{border:1px solid var(--wp--preset--color--gray-300);border-radius:var(--wp--custom--radius--card);padding:var(--wp--preset--spacing--50);background:#fff;
  max-width:720px;margin:0 auto;box-shadow:var(--wp--custom--shadow--lift);position:relative;overflow:hidden}
.fmbox::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--wp--preset--color--accent)}
.fmbox+.fmbox{margin-top:var(--wp--preset--spacing--50)}
.fmbox>h2{font-size:22px;margin-bottom:var(--wp--preset--spacing--20)}
.fmbox .tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--wp--preset--spacing--30);font-size:12px;font-weight:700;color:var(--wp--preset--color--gray-600)}
.fmbox .tag .ic{width:15px;height:15px;color:var(--wp--preset--color--sky-2)}

/* ── モバイルの追従ボタン（2026-09-12 Rand）───────────
 * ★塗りは「そのページの次の一歩」1つだけ。電話は枠線。
 * 位置は fixed なので、版面には下の余白を足す。 */
.fab{display:none}

/* フッター */
.ft{background:var(--wp--preset--color--sky);color:var(--wp--preset--color--sky-ink-2);padding:var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--45);font-size:13px;position:relative}
/* ★上端の帯（R13前に直した）。
 * もとは3つめの区間が rgba(255,255,255,.14) で、濃紺の上ではほとんど見えず
 * 「線が30%で途切れた」ように見えていた（実測: 合成後 #29394B で、地との差がごくわずか）。
 * 3つめを .28 まで上げ、帯が右端まで続いて見えるようにした。
 * ★等間隔で敷き詰めた模様にはしない（D361/D362）。区切りは1本の線のまま。 */
.ft::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--wp--preset--color--accent) 0 18%,#71D9B8 18% 30%,rgba(255,255,255,.28) 30%)}
.ft__logo{display:inline-flex;margin-bottom:var(--wp--preset--spacing--40)}
.ft__logo img{display:block;height:40px;width:auto}
/* フッターの電話（もとはヘッダーのクラス hd__tel を借りていた）。
 * ★アイコンの大きさを書き忘れると、SVGが既定の大きさ（44px相当）で入り、
 * 番号が3行に折り返す。.hd__tel は .ic を16pxに縛っていた——名前を変えるときは
 * その要素に付いていた指定を全部持ってくる。 */
.ft__tel{display:inline-flex;align-items:center;gap:var(--wp--preset--spacing--20);
  color:var(--wp--preset--color--base);text-decoration:none;font-weight:700;font-size:15px;
  white-space:nowrap;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif}
.ft__tel .ic{flex:none;width:16px;height:16px;color:var(--wp--preset--color--accent)}
/* ★段組み（R13前に直した）。
 * もとは 1.2fr 1fr で左が広すぎ、左の文の右に空きができ、右のナビ6項目が2行に折り返していた。
 * 左を狭め、右に文字ぶんの幅を渡して1行に収める。minmax(0,…) は
 * グリッドの既定（min-width:auto）で長い文が列を押し広げるのを止めるため。 */
.ft__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--wp--preset--spacing--50)}
.ft__nav{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);margin:0 0 var(--wp--preset--spacing--40);padding:0;list-style:none}
.ft__nav a{color:var(--wp--preset--color--base);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.ft p{margin:0 0 var(--wp--preset--spacing--20)}
.ft__cr{margin-top:var(--wp--preset--spacing--45);padding-top:var(--wp--preset--spacing--30);border-top:1px solid rgba(255,255,255,.16);font-size:12px}

/* ══ 9. 360px（max-width:782px で当てる） ═══════════════ */
@media (max-width:782px){
.wrap{padding:0 var(--wp--preset--spacing--30)}
.hd__in{padding:var(--wp--preset--spacing--25) var(--wp--preset--spacing--30);gap:var(--wp--preset--spacing--25)}
.hd__nav a:not(.hd__cta){display:none}
/* ★ロゴはモバイルでも44pxのまま（上書きを置かない）。
   360pxで実測して、CTAとの間が42px空き、横あふれも出ないことを確認した（R13前）。
   幅ごとに別の値にすると、直すときに2か所を探すことになる。 */
.hd__cta{height:38px;padding:0 var(--wp--preset--spacing--25);font-size:13px}
.fv{height:700px}
.fv__inner{padding:80px var(--wp--preset--spacing--30) 0}
.fv h1{font-size:34px}
.fv__sub{font-size:15px}
.fv__acts{margin-top:var(--wp--preset--spacing--45);gap:var(--wp--preset--spacing--20)}
.fv__tags{display:none}
.btn{width:100%;height:52px;font-size:15px}
.facts,.band{padding:var(--wp--preset--spacing--45) 0}
.band ul{grid-template-columns:1fr;gap:var(--wp--preset--spacing--40)}
.band li{padding-left:var(--wp--preset--spacing--30)}
.facts ul{grid-template-columns:1fr;gap:var(--wp--preset--spacing--40)}
.facts li{padding-left:var(--wp--preset--spacing--30)}
.facts .num{font-size:24px}
.scene{height:210px}
.scene__road{height:86px}
.scene__road::before{top:33px}
.scene__city{bottom:78px;height:96px}
.car--kei{bottom:4px;width:74px;left:18px}
.car--truck{bottom:4px;width:94px;left:196px}
.car--far1{bottom:58px;width:68px;left:104px}
.car--far2{bottom:58px;width:64px;left:262px}
.sun{width:104px;right:6%}
.ph{padding:var(--wp--preset--spacing--50) 0}
.ph h1{font-size:28px}
.ph__cloud--a{left:44%;width:150px}
.ph__cloud--b{display:none}
.ph__cloud--c{display:none}
.sec{padding:var(--wp--preset--spacing--60) 0}
.sec--slant{clip-path:polygon(0 0,100% 18px,100% 100%,0 100%);margin-top:-18px;padding-top:calc(var(--wp--preset--spacing--60) + 18px)}
.sec h2{font-size:22px}
/* ★2026-09-12 Rand「モバイルで文面が長いところに強弱を」
 * 行間と段落の間をひろげ、太字にうすいアクセントの下線を敷く。PCの見た目は変えない。 */
.sec p{margin-bottom:var(--wp--preset--spacing--40);line-height:1.95}
.lead{font-size:16.5px;font-weight:500;color:var(--wp--preset--color--contrast)}
.sec--navy .lead{color:var(--wp--preset--color--base)}
.sec p strong{background:linear-gradient(transparent 72%,rgba(245,165,36,.38) 72%);padding:0 1px}
.sec--navy p strong{background:linear-gradient(transparent 72%,rgba(245,165,36,.30) 72%)}
/* ★注記（.mut）の中の strong には蛍光ペンを当てない（2026-09-14・R14で実測）。
 * マーカーは「本文の中の強調」の飾り、.mut は「弱める」ための指定で、意図が正面からぶつかる。
 * 当てると、山吹38%を白に重ねた #FBDDAC の上に .mut の灰 #5B6774 が乗り、
 * ★4.41:1 になる（本文の要は4.5:1。白の上なら5.77:1で通る）。
 * 色ではなく「当てる範囲」の誤りなので、範囲で直す。 */
.sec p.mut strong{background:none}
.quote p{font-size:16px;line-height:1.95}
.card p{line-height:1.9}
.secno{font-size:72px;right:var(--wp--preset--spacing--30);top:calc(var(--wp--preset--spacing--60) - 14px)}
.cards,.cards--3,.cards--2{grid-template-columns:1fr}
.stats{grid-template-columns:1fr}
.split,.split--wide{grid-template-columns:1fr;gap:var(--wp--preset--spacing--45)}
.money{grid-template-columns:1fr;gap:var(--wp--preset--spacing--50)}
.money li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-24px;width:2px;height:24px}
.money li:not(:last-child)::before{right:auto;left:50%;top:auto;bottom:-25px;transform:translateX(-50%);
  border-left-color:transparent;border-top-color:var(--wp--preset--color--line-2)}
.flow{flex-direction:column;gap:var(--wp--preset--spacing--25)}
.flow__a{transform:rotate(90deg)}
.flow__out{gap:var(--wp--preset--spacing--25)}
.area li{flex-direction:column;align-items:flex-start;gap:var(--wp--preset--spacing--25)}
.area__d{width:180px}
.figure--scroll svg{min-width:560px}
.only-sm{display:block}
.tl{grid-template-columns:1fr;gap:0;padding-left:0}
.tl::before{left:7px;right:auto;top:10px;bottom:16px;height:auto;width:6px}
.tl li{padding:0 0 var(--wp--preset--spacing--40) 44px;text-align:left}
.tl li::before{left:0;top:0;transform:none}
.tl__note{margin-top:var(--wp--preset--spacing--30)}
/* ★通し番号は出す。ただし見出しとぶつからないよう、セクション上の余白に置く（2026-09-12 Rand） */
.secno{display:block;font-size:56px;top:var(--wp--preset--spacing--30);right:var(--wp--preset--spacing--30);-webkit-text-stroke-width:2px}
.tl__wrap{padding:var(--wp--preset--spacing--40)}
.only-lg{display:none}
.fab{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:var(--wp--preset--spacing--20);
  padding:var(--wp--preset--spacing--25) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--25) + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.95);border-top:1px solid var(--wp--preset--color--gray-300);
  box-shadow:0 -6px 20px rgba(11,33,56,.12)}
.fab a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:48px;border-radius:var(--wp--custom--radius--part);font-weight:700;font-size:14px;text-decoration:none}
.fab .ic{width:16px;height:16px}
.fab__main{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--contrast)}
.fab__sub{border:2px solid var(--wp--preset--color--contrast);color:var(--wp--preset--color--contrast)}
.board{padding-bottom:80px}
.dl div{grid-template-columns:1fr}
.dl dt{padding-bottom:var(--wp--preset--spacing--20)}
.dl dd{padding-top:var(--wp--preset--spacing--20)}
.news li{grid-template-columns:1fr;gap:var(--wp--preset--spacing--20)}
.quote{padding:var(--wp--preset--spacing--40)}
/* ★モバイルでは「“」を文字の上に重ねない（2026-09-12 Rand）。1行ぶん上に置く */
.quote::before{position:static;display:block;font-size:36px;line-height:.7;margin-bottom:var(--wp--preset--spacing--25)}
.faq p{margin-left:0}
.cta h2{font-size:22px}
.cta__acts .btn{width:100%}
.fmbox{padding:var(--wp--preset--spacing--40)}
.ft__grid{grid-template-columns:1fr;gap:var(--wp--preset--spacing--45)}
}

/* ══ スキップリンク（D101）═══════════════════════════════
 * キーボードで来た人が、ヘッダーのメニューを飛ばして本文へ行けるようにする。
 * ★design/ の6画面には無かった（キャンバスなので）。子テーマで足している。
 * 普段は画面の外に置き、フォーカスが当たったときだけ出す。 */
.skip{position:absolute;top:-999px;left:0;z-index:100000;
  padding:var(--wp--preset--spacing--25) var(--wp--preset--spacing--40);
  background:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);
  font-weight:700;text-decoration:none;border-radius:0 0 var(--wp--custom--radius--part) 0}
.skip:focus{top:0}

/* ★.fm__pick は消しました（N190）。
   「お問い合わせ内容の最初にどちらかをお書きください」の案内に当てていたもので、
   本体が2系統（type="recruit" / type="contact"）を持ったので案内ごと要らなくなりました。
   使われていないCSSを残すと、次に触る人が「どこに出るのか」を探すことになります。 */

/* プライバシーポリシー（R12・design/ に無いページ）。
   ★条文なので、飾らずに読めることだけを見る。見出しは h2 で 12条ぶん。 */
.pp h2{font-size:var(--wp--preset--font-size--large);margin:var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20)}
.pp h2:first-of-type{margin-top:0}
.pp p{margin:0 0 var(--wp--preset--spacing--20)}
.pp__list{margin:0 0 var(--wp--preset--spacing--20);padding-left:1.4em}
.pp__list li{margin:0 0 var(--wp--preset--spacing--10)}
.pp__list li::marker{color:var(--wp--preset--color--gray-600)}

/* ★フォームの箱の中の見出し（R12で実測）。
   .sec h2 の上余白（96px）がそのまま効いて、タグと見出しが112px離れていた。 */
.fmbox h2{margin-top:0}
.fmbox .tag{margin-bottom:var(--wp--preset--spacing--30)}

/* ══ 12. 押せるもの・触れたときの返し（R13前に追加）════════════
 *
 * ★入れる前は :hover も :focus-visible も0件だった（実測）。
 * :focus-visible は見た目の話ではない——キーボードだけで全ページを回れて、
 * 「いまどこにいるか」が分かるために要る（D101と同じ並びの話）。
 *
 * ★動きの決め（2026-09-12）
 *   ・位置は大きく動かさない。持ち上がりは最大2px、横の送りは最大3px
 *   ・prefers-reduced-motion: reduce で全部止まる（このファイルの末尾で一括して切る）
 *   ・等間隔で敷き詰めた模様は使わない（D361/D362）。返しは「色・影・1〜2pxの移動」だけ
 */

/* ★キーボードの現在地。
 * 土台（2px・山吹・offset 2px）は親テーマの base.css が全部の a/button/input に入れている。
 * ★実測して分かったこと: ここに `:where(...)` で書き足しても、:where() は詳細度0なので
 * 親の `a:focus-visible`（0,1,1）に負けて効かない。子で上書きするなら詳細度を上げる。
 *
 * ★濃紺の地では、山吹の枠だけだと縁が沈んで見つけにくい。白の暈を足す。
 * `:where()` を使わず素で並べているのは、上の理由で負けないようにするため。 */
.hd a:focus-visible,.hd button:focus-visible,
.ft a:focus-visible,.ft button:focus-visible,
.fv a:focus-visible,.fv button:focus-visible,
.ph a:focus-visible,.band a:focus-visible,
.sec--navy a:focus-visible,.sec--navy button:focus-visible,
.cta a:focus-visible,.cta button:focus-visible{
  outline:3px solid var(--wp--preset--color--accent);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.4)}

/* スキップリンク（元から :focus だけだったので :focus-visible も受ける） */
.skip:focus-visible{outline-offset:0}

/* ── ボタン ───────────────────────────── */
.btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease,
  box-shadow .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.06s}
.btn--main:hover{background:var(--wp--preset--color--accent-deep);
  box-shadow:0 8px 20px rgba(0,0,0,.22)}
.btn--sub:hover{background:rgba(255,255,255,.14);border-color:var(--wp--preset--color--accent)}
.btn--sub-on-white:hover{background:var(--wp--preset--color--gray-100);
  border-color:var(--wp--preset--color--accent)}
/* ★アイコンの小さな動き。矢印だけ3px送る（位置は大きく動かさない） */
.btn .ic{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.btn:hover .ic{transform:translateX(3px)}

/* ── ヘッダー ─────────────────────────── */
/* ★下線の仕掛けは元から書いてあったのに、:hover が無くて一度も出ていなかった */
.hd__nav a:not(.hd__cta):not(.hd__tel):hover::after{opacity:1}
.hd__cta{transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.hd__cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.hd__cta:active{transform:translateY(0)}
.hd__tel{transition:color .18s ease}
.hd__tel:hover .ic{transform:scale(1.12)}
.hd__tel .ic{transition:transform .18s ease}
.hd__logo img{transition:opacity .18s ease}
.hd__logo:hover img{opacity:.82}

/* ── フッター ─────────────────────────── */
.ft__nav a{transition:color .18s ease,border-color .18s ease}
.ft__nav a:hover{color:var(--wp--preset--color--accent);border-bottom-color:var(--wp--preset--color--accent)}
.ft__tel{transition:color .18s ease}
.ft__tel:hover{color:var(--wp--preset--color--accent)}
.ft__logo img{transition:opacity .18s ease}
.ft__logo:hover img{opacity:.82}

/* ── パンくず ─────────────────────────── */
.crumb a{transition:color .18s ease}
.ph .crumb a:hover{color:var(--wp--preset--color--base)}

/* ── カード・FAQ ──────────────────────── */
/* ★浮き上がりは2pxまで。読みに来た人の視線を動かさない */
.card,.faq li{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease}
.card:hover,.faq li:hover{transform:translateY(-2px);border-color:var(--wp--preset--color--accent);
  box-shadow:0 10px 24px rgba(11,33,56,.10)}
.sec--navy .card:hover{border-color:rgba(255,255,255,.5);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.card__ic{transition:background-color .2s ease}
.card__ic .ic{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__ic{background:var(--wp--preset--color--accent-tint)}
.card:hover .card__ic .ic{transform:scale(1.1)}

/* ── モバイルの追従ボタン ─────────────── */
.fab a{transition:background-color .18s ease,transform .12s ease}
.fab a:active{transform:scale(.98)}

/* ── フォーム（localift-core が出す部品）───────────────
 * ★プラグイン側のCSSに :hover も :focus も無い（実測）。
 * 入力中の欄が分からないと、キーボードだけでは埋められない。 */
.localift-contact input[type=text],.localift-contact input[type=email],
.localift-contact input[type=tel],.localift-contact textarea{
  transition:border-color .18s ease,box-shadow .18s ease}
.localift-contact input:hover,.localift-contact textarea:hover{
  border-color:var(--wp--preset--color--ink-2)}
.localift-contact input:focus-visible,.localift-contact textarea:focus-visible{
  outline:3px solid var(--wp--preset--color--accent);outline-offset:0;
  box-shadow:0 0 0 4px var(--wp--preset--color--accent-tint)}
.localift-contact__btn{transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
.localift-contact__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,33,56,.22)}
.localift-contact__btn:active{transform:translateY(0);transition-duration:.06s}
.localift-contact__purpose a{transition:color .18s ease}

/* ── ★動きを減らす設定では、ここまでの返しを全部止める ──────
 * 色の変化は残す（現在地が分からなくなるため）。動く指定だけを止める。 */
@media (prefers-reduced-motion:reduce){
  .btn,.btn .ic,.hd__cta,.hd__tel .ic,.hd__logo img,.ft__nav a,.ft__tel,.ft__logo img,
  .crumb a,.card,.faq li,.card__ic,.card__ic .ic,.fab a,
  .localift-contact input,.localift-contact textarea,.localift-contact__btn{
    transition:none!important}
  .btn:hover,.btn:active,.hd__cta:hover,.hd__cta:active,.card:hover,.faq li:hover,
  .localift-contact__btn:hover,.localift-contact__btn:active,.fab a:active{transform:none!important}
  .btn:hover .ic,.hd__tel:hover .ic,.card:hover .card__ic .ic{transform:none!important}
}