@charset "utf-8";
/* ==========================================================================
   求人広告代理店の選び方ガイド / 株式会社カケハシスカイ
   handoff/design/01_zenhan.html・02_kohan.html（1280px カンプ）を
   1ページに統合したスタイル。デスクトップ1280px時にカンプと同一の見た目になる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  --navy:#0F2A5C;
  --blue:#1E4FA3;
  --blue-lt:#2E6BC6;
  --slate:#3B4761;
  --orange:#F08A24;
  --orange-dk:#C86A0F;
  --amber:#FFB454;
  --amber-lt:#FFE3B8;
  --amber-bg:#FFF0DD;
  --amber-br:#F5B25C;
  --brown:#B45309;
  --ink:#17233B;
  --ink-2:#3B4761;
  --ink-3:#6B7590;
  --ink-4:#5A6580;
  --line:#D6E1F2;
  --line-2:#E1E8F3;
  --bg-lt:#F3F7FD;
  --pad-x:80px;          /* セクション左右padding（カンプ値） */
  --header-h:79px;       /* 固定ヘッダー実高（行76 + 下線3） */
  --ctable-cols:280px 1fr 1fr 1fr 1.5fr;  /* 項目名・大手総合型・媒体特化型・RPO・コンサル型・当社（05「3つのタイプと当社」と同じ並び） */
  --font-go:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --font-zen:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Sans',sans-serif;
}

/* --------------------------------------------------------------------------
   2. ベース（カンプの base CSS 準拠）
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-go);font-size:16px;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--font-zen);margin:0;font-weight:900;letter-spacing:.01em}
p{margin:0}
img{max-width:100%}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}  /* 読み上げ専用（「新しいタブで開く」など） */
ul{margin:0;padding:0;list-style:none}

/* --------------------------------------------------------------------------
   3. レイアウト土台
   セクションは全幅。内側 .inner を 1120px（=1280 - 80*2）で中央寄せ。
   -------------------------------------------------------------------------- */
.sec{position:relative;overflow:hidden;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sec > .inner{position:relative;z-index:1;max-width:1120px;margin:0 auto}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.center{display:flex;justify-content:center}
.center--mt6{margin-top:6px}

/* 装飾（丸・ドット）はセクション基準の絶対配置 */
.deco{position:absolute;z-index:0;pointer-events:none}
.dot-pattern{background-image:radial-gradient(#BFD0EA 1.6px,transparent 1.6px);background-size:18px 18px}

/* --------------------------------------------------------------------------
   4. 共通パーツ（カンプの共通クラス）
   -------------------------------------------------------------------------- */
.sec-label{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;letter-spacing:.12em;padding:8px 18px;border-radius:999px}
.sec-label .num{font-family:var(--font-zen);font-weight:900;font-size:18px;color:var(--amber)}
.sec-label--amber{background:var(--amber);color:var(--navy)}
.sec-label--amber .num{color:var(--navy)}
.sec-label--orange{background:var(--orange)}
.sec-label--orange .num{color:#fff}

.h2{font-size:38px;line-height:1.3;color:var(--navy);text-wrap:balance}
.h2 .mk{background:linear-gradient(transparent 62%,var(--amber-lt) 62%);padding:0 2px}
.h2--white{color:#fff}
.h2--white .mk-o{background:linear-gradient(transparent 62%,var(--orange) 62%);padding:0 2px}

.lead{font-size:17px;line-height:1.9;color:var(--ink-2)}
.lead--760{max-width:760px}
.lead--780{max-width:780px}
.lead--800{max-width:800px}
.lead--820{max-width:820px}
.lead--light{color:var(--line)}
/* 見出し下の概要文の改行位置（tools/linebreak.cjs で <wbr> と <br class="sb"> を挿入。施工管理LPと同じ方式）
   文節の途中では折り返さない。「。」の後の改行（br.sb）と長い文の読点の後の改行（br.pc）は PC・タブレットだけで、スマホでは入れない */
.lead,.stance-body p,.cv-head p{word-break:keep-all;overflow-wrap:break-word;line-break:strict;text-wrap:pretty}  /* pretty：最後の行が数文字だけになるのを避ける */
@media (max-width:767px){br.sb,br.pc{display:none}}
/* セクションの見出し：スマホだけ文節の切れ目（<wbr>）で折り返す。PC は従来どおり */
@media (max-width:767px){.h2,.stance-body h2,.cv-head h2{word-break:keep-all;overflow-wrap:break-word}}
h2 .nw{white-space:nowrap}  /* 見出し末尾の短い語（例：」です）を1語だけ次の行に残さない */  /* br.pc：長い文の読点の後の改行（PCで最後の数文字だけ残るのを防ぐ） */

.fine{font-size:14px;line-height:1.7;color:var(--ink-4)}
.fine--light{color:#C9D3E6}
.fine--center{text-align:center}

.card{background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:0 10px 28px rgba(15,42,92,.08)}
.card--navy{border-color:var(--navy)}
.card--navy3{border-color:var(--navy);border-width:3px}
.card--amber{border-color:var(--amber-br);background:#FFFBF4}

.chip{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px}
/* 注釈の参照記号（※1・※2） */
.note-ref{font-size:13px;line-height:1;color:var(--navy);vertical-align:super;margin-left:1px}
.chip .note-ref{align-self:flex-start;margin-top:-3px}
.chip--navy{background:var(--navy);color:#fff}
.chip--outline{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.chip--soft{background:#EEF3FA;color:var(--navy)}
.chip--amber{background:var(--amber);color:var(--navy)}
.chip--amber-soft{background:var(--amber-bg);color:var(--brown)}
.chip--warn{background:var(--amber-bg);color:var(--brown);border:2px solid var(--amber-br)}

/* ボタン：primary と secondary は同じ高さ(60px)・同じ文字サイズ(18px)。
   box-sizing:border-box なので secondary の3px枠は min-height の内側に収まり、
   左右も padding を 31px にして枠線分を吸収（外側の余白は primary の34pxと一致）。 */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;border-radius:999px;text-decoration:none;font-family:var(--font-go);font-weight:900;
  font-size:18px;line-height:1.4}
.btn-primary{background:var(--orange);color:#fff;padding:10px 34px;border:0;box-shadow:0 8px 0 var(--orange-dk),0 16px 28px rgba(240,138,36,.35)}
.btn-primary:hover{color:#fff}
.btn-secondary{background:#fff;color:var(--navy);padding:10px 31px;border:3px solid var(--navy)}
.btn-secondary:hover{color:var(--navy)}
.btn-secondary--ghost{background:transparent;color:#fff;border-color:#fff}
.btn-secondary--ghost:hover{color:#fff}
/* 小さい派生。min-height を上書きするので基本サイズには影響しない */
.btn-sm{min-height:45px;font-size:15px;padding:0 22px;box-shadow:0 4px 0 var(--orange-dk)}
.btn-sm2{min-height:50px;font-size:15px;padding:0 19px}
.btn-sm3{min-height:50px;font-size:15px;padding:0 22px;box-shadow:0 5px 0 var(--orange-dk)}
.btn-nowrap{white-space:nowrap}
.btn-mt-auto{margin-top:auto}

/* 数字を入れる丸バッジ（悩み1〜3・6つの質問・Q1〜Q3・施策マップ1〜5） */
.sym{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-family:var(--font-zen);font-weight:900;font-size:24px;line-height:1;flex-shrink:0}
.sym-a{background:var(--navy);color:#fff}
.sym--30{width:30px;height:30px;font-size:15px}
.sym--32{width:32px;height:32px;font-size:15px}
.sym--q{font-size:18px}

/* 評価記号 ◎○△×：丸枠を使わず、記号そのものを大きく色付きで見せる */
.mark{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-zen);font-weight:900;font-size:36px;line-height:1;flex-shrink:0}
.mark-a{color:var(--navy)}
.mark-b{color:var(--blue)}
.mark-c{color:var(--orange)}
.mark-d{color:#9AA3B5}
.mark-own{color:var(--orange)}
.mark--legend{font-size:28px}

/* --------------------------------------------------------------------------
   5. 固定ヘッダー（sticky）
   -------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:3px solid var(--navy)}
.header-row{height:76px;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 40px}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-logo{height:28px;width:auto;display:block}
.brand-text{display:flex;align-items:center;min-width:0}
.brand-title{font-family:var(--font-zen);font-weight:900;font-size:24px;line-height:1.2;color:var(--navy);white-space:nowrap}
@media (min-width:1200px) and (max-width:1279px){.brand-title{font-size:22px}}  /* フルヘッダーの最小幅で右側のナビ群と重ならないように */
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-link{font-weight:700;font-size:15px;color:var(--navy);text-decoration:none;padding:10px 14px;white-space:nowrap}

/* --------------------------------------------------------------------------
   6. ヒーロー #top
   -------------------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,#EAF1FB 0%,#F7FAFF 100%);padding-top:64px;padding-bottom:0;min-height:720px}
.hero-deco-1{left:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:#DCE7F7;opacity:.8}
.hero-deco-2{right:-90px;bottom:-160px;width:380px;height:380px;border-radius:50%;background:#FFE9CF;opacity:.9}
.hero-deco-3{right:60px;top:40px;width:220px;height:120px;opacity:.7}
.hero-grid{display:flex;gap:48px;align-items:flex-start}
.hero-left{flex:0 1 59.7%;display:flex;flex-direction:column;gap:22px;min-width:0;container-type:inline-size}
.hero-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-kicker{font-size:20px;font-weight:700;color:var(--blue);letter-spacing:.04em}
/* 3行構成。2行目「採用工程の「ボトルネック」」が左カラム幅に1行で収まるサイズ（約13.3字分）。狭い画面では <wbr> の位置でも折り返す */
.hero-title{font-size:min(66px,7.3cqi);line-height:1.2;color:var(--navy);text-wrap:balance;word-break:keep-all}
.hero-title .mk{background:linear-gradient(transparent 60%,#FFD79A 60%);padding:0 6px}
.hero-lead{font-size:18px}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-right{flex:0 1 40.3%;display:flex;flex-direction:column;gap:16px;padding-top:12px;min-width:0}
.hero-img{width:100%;height:380px;object-fit:contain;display:block;transform:rotate(-2deg)}
.hero-stats{display:flex;gap:12px;align-items:stretch}
.stat-card{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat-num{font-family:var(--font-zen);font-weight:900;font-size:30px;color:var(--navy);line-height:1}
.stat-num .unit{font-size:18px}
.stat-label{font-size:13px;font-weight:700;color:var(--ink);line-height:1.5}
.stat-src{font-size:13px;color:var(--ink-3);line-height:1.5}

/* --------------------------------------------------------------------------
   7. このガイドの立場
   -------------------------------------------------------------------------- */
.stance{padding-top:0;padding-bottom:0;margin-top:-48px;z-index:2;overflow:visible}
.stance-card{padding:28px 36px;display:flex;gap:28px;align-items:center;background:#fff}
.stance-icon-wrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.stance-icon{width:84px;height:84px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center}
.stance-icon-label{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.1em;white-space:nowrap}
.stance-body{display:flex;flex-direction:column;gap:10px}
.stance-body h2{font-size:22px;color:var(--navy);line-height:1.5}
.stance-body p{font-size:16px;line-height:1.8;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   8. 悩み3シーン
   -------------------------------------------------------------------------- */
.nayami{padding-top:88px;padding-bottom:72px}
.nayami .inner{display:flex;flex-direction:column;gap:36px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pain-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pain-head{color:#fff;padding:14px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pain-head--1{background:var(--navy)}
.pain-head--2{background:var(--blue)}
.pain-head--3{background:var(--blue-lt)}
.pain-head .no{font-family:var(--font-zen);font-weight:900;font-size:20px;color:var(--amber)}
.pain-head .stage{font-weight:700;font-size:15px}
.pain-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:14px}
.pain-img{width:100%;height:150px;object-fit:contain;display:block;border-radius:16px;background:#fff}
.pain-body h3{font-size:24px;color:var(--navy);line-height:1.4}
.pain-body p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.pain-body strong{color:var(--navy)}
.banner-navy{background:var(--navy);color:#fff;border-radius:999px;padding:18px 40px;display:flex;align-items:center;gap:16px;box-shadow:0 10px 24px rgba(15,42,92,.25)}
.banner-navy svg{flex-shrink:0}
.banner-navy span{font-size:19px;font-weight:700;line-height:1.5}

/* --------------------------------------------------------------------------
   9. 代理店を使う理由 #riyu
   -------------------------------------------------------------------------- */
.riyu{padding-top:72px;padding-bottom:72px;background:var(--bg-lt)}
.riyu .inner{display:flex;flex-direction:column;gap:36px}
.riyu-deco{left:-80px;bottom:-120px;width:300px;height:300px;border-radius:50%;border:28px solid #E1EAF8}
.riyu-grid{display:flex;gap:28px;align-items:stretch}
.vs-table{flex:1.4;padding:0;overflow:hidden;min-width:0}
.vs-head,.vs-row{display:grid;grid-template-columns:1.1fr 1fr 1.2fr}
.vs-head{background:var(--navy);color:#fff;font-weight:700;font-size:16px}
.vs-head > *{padding:16px 20px}
.vs-head > * + *{border-left:1px solid rgba(255,255,255,.2)}
.vs-head > *:last-child{background:var(--blue)}
.vs-row{border-bottom:1px solid var(--line-2);font-size:15px;line-height:1.6}
.vs-row:last-child{border-bottom:0}
.vs-row > *{padding:14px 20px}
.vs-row > *:first-child{font-weight:700}
.vs-row > * + *{border-left:1px solid var(--line-2)}
.vs-row > *:last-child{background:#F7FAFF}
.riyu-side{flex:1;display:flex;flex-direction:column;gap:20px;min-width:0}
.side-card{padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.side-title{font-family:var(--font-zen);font-weight:900;font-size:19px;color:var(--navy)}
.side-title--brown{color:var(--brown)}
.side-card p{font-size:15px;line-height:1.8;color:var(--ink-2)}
.q3-list{display:flex;flex-direction:column;gap:10px}
.q3-item{display:flex;gap:12px;align-items:flex-start}
.q3-item span:last-child{font-size:15px;line-height:1.7;color:var(--ink)}

/* --------------------------------------------------------------------------
   10. コミットとは #commit
   -------------------------------------------------------------------------- */
.commit{padding-top:80px;padding-bottom:72px}
.commit .inner{display:flex;flex-direction:column;gap:36px}
.curve-card{padding:36px 40px 28px;display:flex;flex-direction:column;gap:18px;background:#fff}
.curve-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.curve-head h3{font-size:22px;color:var(--navy);line-height:1.4}
.curve-svg{width:100%;height:auto;display:block}
.q6-block{display:flex;flex-direction:column;gap:18px}
.hr-title{display:flex;align-items:center;gap:14px}
.hr-title .bar{height:3px;flex:1;background:var(--navy)}
.hr-title h3{font-size:24px;color:var(--navy);white-space:nowrap}
.grid-3--18{gap:18px}
.q6-card{padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.q6-card .body{display:flex;flex-direction:column;gap:6px}
.q6-t{font-weight:700;font-size:17px;color:var(--navy);line-height:1.5}
.q6-p{font-size:15px;line-height:1.7;color:var(--ink-2)}
.note-amber{display:inline-flex;align-items:center;gap:12px;background:var(--amber-bg);border:2px solid var(--amber-br);border-radius:12px;padding:14px 24px;font-size:16px;font-weight:700;color:var(--brown);line-height:1.6}
.note-amber svg{flex-shrink:0}

/* --------------------------------------------------------------------------
   11. 選び方3ポイント #erabikata
   -------------------------------------------------------------------------- */
.erabikata{padding-top:72px;padding-bottom:72px;background:var(--navy);color:#fff}
.erabikata .inner{display:flex;flex-direction:column;gap:36px}
.erabikata-deco-1{left:40px;top:30px;width:260px;height:120px;opacity:.25}
.erabikata-deco-2{right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;background:var(--blue);opacity:.6}
.point-card{background:#fff;color:var(--ink);border-radius:18px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;position:relative}
.point-badge{position:absolute;top:-18px;left:24px;background:var(--orange);color:#fff;font-family:var(--font-zen);font-weight:900;font-size:15px;padding:8px 16px;border-radius:999px;letter-spacing:.1em}
.point-img{width:100%;height:120px;object-fit:contain;display:block;border-radius:16px;background:#fff;margin-top:8px}
.point-card h3{font-size:22px;color:var(--navy);line-height:1.4}
.point-card p{font-size:15px;line-height:1.8;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   12. 3タイプ＋当社 #types
   -------------------------------------------------------------------------- */
.types{padding-top:80px;padding-bottom:64px}
.types .inner{display:flex;flex-direction:column;gap:36px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* 4枚の行（ヘッダー／画像／本文／向いている企業）を subgrid で揃える */
.type-grid{row-gap:0;margin-bottom:-18px}
.type-card{padding:0;overflow:hidden;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;margin-bottom:18px}
.type-card--own{border-color:var(--orange);border-width:3px;box-shadow:0 14px 34px rgba(240,138,36,.22)}
.type-head{background:#3B4761;color:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.type-head--own{background:var(--orange)}
.type-head .no{font-size:13px;font-weight:700;letter-spacing:.1em;color:#C9D3E6}
.type-head--own .no{color:var(--amber-lt)}
.type-head .name{font-family:var(--font-zen);font-weight:900;font-size:22px}
.type-body{display:contents;font-size:15px;line-height:1.7;color:var(--ink-2)}
.type-img{width:calc(100% - 40px);height:120px;margin:20px 20px 0;object-fit:contain;object-position:center;display:block;border-radius:16px;background:#fff}
.type-text{margin:14px 20px 0}
.type-text b{font-weight:700;color:#0F2A5C}
/* 向いている企業：薄い背景のボックスに、ラベル＋チェックマーク付きの箇条書き */
.type-fit{margin:16px 16px 20px;padding:14px 16px;background:#EEF3FA;border-radius:12px}
.type-card--own .type-fit{background:var(--amber-bg)}
.type-fit-label{font-weight:900;font-size:14px;color:var(--navy);margin-bottom:8px;letter-spacing:.04em}
.type-fit-list{display:flex;flex-direction:column;gap:8px}
.type-fit-list li{position:relative;padding-left:28px;font-weight:700;color:var(--ink);line-height:1.6;word-break:keep-all;overflow-wrap:break-word}  /* <wbr>（文節）の位置で折り返す */
.type-fit-list li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.type-card--own .type-fit-list li::before{background-color:var(--orange)}
.own-logo-box{height:120px;margin:20px 20px 0;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:16px}
.own-logo{height:40px;width:auto;display:block}

/* --------------------------------------------------------------------------
   13. 比較表 #hikaku
   スマホ／タブレットでは横スクロール＋左端「評価項目」列を sticky 固定。
   -------------------------------------------------------------------------- */
.hikaku{padding-top:64px;padding-bottom:80px;background:var(--bg-lt)}
.hikaku .inner{display:flex;flex-direction:column;gap:28px}
.hikaku-deco{right:-60px;top:40px;width:220px;height:220px;border-radius:50%;background:#E1EAF8}
.legend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 16px}
.legend-item .txt{font-size:14px;font-weight:700}

.scroll-hint{display:none;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--brown);background:var(--amber-bg);border:1px solid var(--amber-br);border-radius:999px;padding:6px 14px;align-self:flex-start;transition:opacity .25s}
.scroll-hint.is-hidden{opacity:0}

/* 比較表・02の比較は table 要素（AIOで表として読まれるように）。見た目は従来どおり grid で組む */
:where(.ctable,.vs-table) :is(th,td){padding:0;font-weight:inherit;text-align:inherit;vertical-align:inherit}
.ctable,.ctable thead,.ctable tbody,.vs-table,.vs-table thead,.vs-table tbody,.ctable-block,.ctable-block > th{display:block}
.ctable-wrap{overflow-x:auto;background:#fff;border:3px solid var(--navy);border-radius:18px;box-shadow:0 10px 28px rgba(15,42,92,.08);-webkit-overflow-scrolling:touch}
.ctable{min-width:1000px}
.ctable-head,.ctable-row{display:grid;grid-template-columns:var(--ctable-cols)}
.ctable-head{background:var(--navy);color:#fff}
.ctable-head .rh{padding:18px 20px;display:flex;align-items:center;font-weight:700;font-size:15px;color:#C9D3E6;background:var(--navy);position:sticky;left:0;z-index:3}
.ctable-head .th{padding:16px 12px;text-align:center;border-left:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:2px;align-items:center}
.ctable-head .th .tno{font-size:13px;color:#C9D3E6;font-weight:700}
.ctable-head .th .tname{font-family:var(--font-zen);font-weight:900;font-size:19px}
.ctable-head .th--own{background:var(--orange)}
.ctable-head .th--own .tno{color:var(--amber-lt)}

.ctable-block{padding:12px 20px;background:#E9F0FC;border-bottom:1px solid var(--line)}
.ctable-block .blk-inner{position:sticky;left:20px;display:inline-flex;align-items:center;gap:12px}
.blk-tag{background:var(--navy);color:#fff;font-family:var(--font-zen);font-weight:900;font-size:15px;padding:4px 12px;border-radius:6px}
.blk-name{font-weight:700;font-size:16px;color:var(--navy)}
.ctable-block--c{background:var(--amber-bg);border-bottom-color:var(--amber-br)}
.ctable-block--c .blk-tag{background:var(--orange)}
.ctable-block--c .blk-name{color:var(--brown)}

.ctable-row{border-bottom:1px solid var(--line-2)}
.rowhead{padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;background:#fff;position:sticky;left:0;z-index:2}
.rowhead .t{font-size:16px;font-weight:700;color:var(--ink);line-height:1.5}
.rowhead .s{font-size:13px;color:var(--ink-3);line-height:1.5}
.cell{padding:14px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;border-left:1px solid var(--line-2)}
.cell-a{background:#E9F0FC}
.cell-b{background:#F7FAFF}
.cell-c{background:#FFF7EC}
.cell-d{background:#F4F5F8}
.cell-e{background:#fff}
.cell--chips{gap:10px}
.cell-note{font-size:14px;line-height:1.5;color:var(--ink-2);font-weight:500}
.chip-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip--outline-sm{background:#fff;color:var(--navy);border:1.5px solid var(--navy);font-size:13px;padding:4px 10px}
.chip-2l{display:block;text-align:center}  /* 2行のチップ（比較表C2の TRACT letter）。2行目のカッコ内は .nw で折り返さない */
.chip .nw{white-space:nowrap}
.ctable .chip{word-break:keep-all;overflow-wrap:break-word}  /* 比較表のサービス名は <wbr>（「・」の後など）の位置でだけ折り返す */

.conclusion{position:relative;border-radius:22px;background:var(--navy);color:#fff;padding:36px 44px;display:flex;align-items:center;gap:32px;overflow:hidden;box-shadow:0 16px 40px rgba(15,42,92,.28)}
.conclusion-deco{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--orange);opacity:.3}
.conclusion-body{flex:1;display:flex;flex-direction:column;gap:10px;position:relative}
.conclusion-kicker{font-size:15px;font-weight:700;color:var(--amber);letter-spacing:.1em}
.conclusion h3{font-size:30px;line-height:1.4;color:#fff}
.conclusion p{font-size:16px;line-height:1.8;color:var(--line)}
.conclusion-cta{display:flex;flex-direction:column;gap:12px;position:relative}
.inline-cv{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.inline-cv::after{content:" →"}
.inline-cv-wrap{margin-top:4px;font-size:15px}
.conclusion .inline-cv,.ryokin .inline-cv{color:var(--amber)}
.conclusion .inline-cv:hover,.ryokin .inline-cv:hover{color:#fff}

/* --------------------------------------------------------------------------
   14. 3問診断 #shindan
   -------------------------------------------------------------------------- */
.shindan{padding-top:80px;padding-bottom:72px;background:#fff}
.shindan .inner{display:flex;flex-direction:column;gap:32px}
.shindan-deco{right:60px;top:40px;width:220px;height:120px;opacity:.7}
.grid-3--22{gap:22px}
.q-card{padding:24px 22px 26px;display:flex;flex-direction:column;gap:14px}
.q-head{display:flex;align-items:center;gap:10px}
.q-title{font-weight:900;font-size:18px;color:var(--navy);line-height:1.4;font-family:var(--font-zen)}
.qopt{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;border:2px solid var(--line);background:#fff}
.qopt .a{font-weight:700;font-size:16px;color:var(--ink);line-height:1.5}
.qopt .r{font-size:14px;color:var(--blue);font-weight:700;line-height:1.5}
.shindan-cta{padding:26px 36px;display:flex;align-items:center;gap:28px;max-width:980px}
.shindan-cta .body{display:flex;flex-direction:column;gap:6px;flex:1}
.shindan-cta .t{font-family:var(--font-zen);font-weight:900;font-size:22px;color:var(--navy);line-height:1.4}
.shindan-cta p{font-size:15px;line-height:1.7;color:var(--ink-2)}


/* --------------------------------------------------------------------------
   14b. 3問診断（対話型）
   -------------------------------------------------------------------------- */
.diag{padding:32px 36px;display:block}

/* 進捗 */
.diag-progress{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.diag-step{font-family:var(--font-zen);font-weight:900;font-size:15px;color:var(--ink-3);letter-spacing:.08em}
.diag-dots{display:inline-flex;gap:8px}
.diag-dot{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.diag-dot.is-on{background:var(--navy)}

/* 質問 */
.diag-panel{transition:opacity .25s ease}
.diag-panel.is-fading{opacity:0}
.diag-q .q-head{margin-bottom:18px}
.diag-opts{display:flex;flex-direction:column;gap:12px}
.diag-opt{width:100%;min-height:56px;justify-content:center;text-align:left;font-family:var(--font-go);cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s}
.diag-opt:hover{border-color:var(--blue);background:#F7FAFF;box-shadow:0 4px 14px rgba(15,42,92,.10)}
.diag-opt:active{background:#EEF3FA}
.diag-opt:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.diag-nav{margin-top:18px;display:flex}
.diag-back,.diag-restart{background:none;border:0;padding:8px 0;font-family:var(--font-go);font-size:15px;font-weight:700;
  color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.diag-back:hover,.diag-restart:hover{color:var(--navy)}
.diag-back:focus-visible,.diag-restart:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* 結果 */
.diag-comment{background:var(--navy);color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.diag-comment-title{font-family:var(--font-zen);font-weight:900;font-size:20px;color:#fff;line-height:1.4}
.diag-comment p{font-size:16px;line-height:1.9;color:#E4ECF9}
.diag-texts{display:none}
.diag-result-title{font-size:24px;color:var(--navy);line-height:1.4;margin-bottom:20px}
.diag-result-title:focus{outline:none}
.diag-cards{display:flex;flex-direction:column;gap:14px}
.diag-card{border:2px solid var(--line);border-radius:16px;background:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.diag-card--own{border-color:var(--orange);border-width:3px;background:#FFFBF4;box-shadow:0 10px 26px rgba(240,138,36,.18)}
.diag-card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.diag-rank{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;border-radius:999px;
  background:#7B8497;color:#fff;font-family:var(--font-zen);font-weight:900;font-size:15px;flex-shrink:0}
.diag-rank--1{background:var(--navy)}
.diag-name{font-family:var(--font-zen);font-weight:900;font-size:20px;color:var(--navy);line-height:1.4}
.diag-bar{display:flex;align-items:center;gap:12px}
.diag-bar-track{flex:1;height:14px;border-radius:999px;background:#EEF3FA;overflow:hidden;min-width:0}
.diag-bar-fill{height:100%;width:0;border-radius:999px;background:var(--navy);transition:width .5s ease}
.diag-card--own .diag-bar-fill{background:var(--orange)}
.diag-pct{font-family:var(--font-zen);font-weight:900;font-size:18px;color:var(--navy);min-width:54px;text-align:right}
.diag-reason{font-size:15px;line-height:1.8;color:var(--ink-2)}

/* 1位カード直下のCTA */
.diag-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:2px 2px 6px}
.diag-cta--own .btn-primary{text-align:center}
.diag-other-note{font-size:15px;line-height:1.8;color:var(--ink-2)}
.diag-other-sub{font-size:14px;line-height:1.7}
.diag-note{margin-top:20px}

/* --------------------------------------------------------------------------
   15. 当社について #company
   -------------------------------------------------------------------------- */
.company{padding-top:72px;padding-bottom:80px;background:var(--bg-lt)}
.company .inner{display:flex;flex-direction:column;gap:32px}
.company-deco-1{left:-110px;top:60px;width:300px;height:300px;border-radius:50%;border:28px solid #E1EAF8}
.company-deco-2{right:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:#FFE9CF}
.grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cap-card{padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cap-card .body{display:flex;flex-direction:column;gap:8px}
.cap-card .t{font-weight:700;font-size:15px;color:var(--navy);line-height:1.4}
.cap-card .s{font-size:13px;color:var(--ink-3);line-height:1.5}
.cap-card--own{border-color:var(--orange);border-width:3px;background:#FFFBF4}
.cap-card--own .t{color:var(--brown)}

.map-card{padding:0;overflow:hidden;border-color:var(--navy);border-width:3px}
.map-head{background:var(--navy);color:#fff;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.map-head-text{display:flex;flex-direction:column;gap:4px}
.map-head-label{font-size:13px;font-weight:700;color:var(--amber);letter-spacing:.04em;line-height:1.4}
.map-head h3{font-size:22px;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
/* 列見出し・1行説明・施策カード4段を subgrid で揃える。施策カードの段は 1fr で全段同じ高さ（最も長いカードに合わせる） */
.map-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto repeat(4,1fr) auto auto}  /* 7段目の auto は列の下余白用（最下段のカードが縮まないように）、8段目は TRACT letter */
.map-col{padding:22px 12px 18px;display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:12px;border-right:1px solid var(--line-2)}
.map-col:nth-child(5){border-right:0}
/* 段階どうしの矢印（5列表示のときだけ） */
@media (min-width:1024px){
  .map-col:not(:nth-child(5)) .map-stage::after{content:"";position:absolute;z-index:1;right:-12px;top:32px;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 3px #fff}
}
/* 段階の見出し（列見出し＋1行説明）。白地＋下の太い紺線で施策カードと区別する。subgrid の1〜2段目にまたがり、5列で高さがそろう */
.map-stage{grid-row:span 2;position:relative;margin:-22px -12px 6px;padding:16px 16px 12px 18px;background:#fff;border-bottom:4px solid var(--navy);display:flex;flex-direction:column;gap:6px}
.map-col-head{display:flex;align-items:center;gap:8px}
.map-col-title{font-weight:900;font-size:18px;color:var(--navy);font-family:var(--font-zen);line-height:1.35}
.map-col-sub{font-size:14px;color:var(--ink-2);line-height:1.5;min-height:3em;word-break:auto-phrase}  /* 帯の背景 #E9F0FC 上で 8.1:1 */  /* 2行分：施策カードの開始位置を5列で揃える */
.map-items{display:contents}
.map-item{background:#F3F5F9;border-radius:12px;padding:14px 12px;display:flex;flex-direction:column;gap:8px}  /* 枠線・影なし。ごく薄いグレーの面とカード間の余白で区切る（説明文は 8.5:1） */
.map-item-head{display:flex;align-items:center;gap:10px}
.map-item-icon{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#0F2A5C;display:flex;align-items:center;justify-content:center}
.map-item-icon svg{width:24px;height:24px;display:block}
.map-item-name{font-size:15px;font-weight:700;color:var(--navy);line-height:1.4;min-height:2.8em;min-width:0;word-break:keep-all;overflow-wrap:anywhere}  /* 名前は <wbr> の位置（「・」の後など）でだけ折り返す */  /* 2行分で固定・上揃え（1024〜1199pxで3行になる名前はそのまま伸びる） */
.map-item-desc{font-size:15px;font-weight:400;color:var(--ink-2);line-height:1.6;word-break:auto-phrase}  /* 白背景で 9.3:1。auto-phrase 非対応のブラウザは通常の折り返し */
/* 選考の各ステップに効く施策（TRACT letter）：2列目「応募→面接」〜4列目「内定→承諾」の下に横長でまたがる */
.map-cross{grid-column:2/5;grid-row:8;padding:0 12px 22px}
.map-cross-label{display:inline-block;background:#fff;border:1px solid var(--amber-br);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;color:var(--brown);line-height:1.5}
.map-item--wide{flex-direction:row;align-items:center;gap:24px}
.map-item-lead{flex:0 0 200px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.map-item--wide .map-item-name{min-height:0}
.map-foot{padding:16px 28px;background:var(--amber-bg);border-top:1px solid var(--amber-br);display:flex;align-items:center;gap:12px}
.map-foot svg{flex-shrink:0}
.map-foot span{font-size:15px;font-weight:700;color:var(--brown);line-height:1.6}
.map-notes{margin-top:16px;background:#FFFFFF;border:2px solid #D6E1F2;border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.map-notes p{font-size:15px;line-height:1.8;color:#3B4761}

.reasons{display:flex;gap:28px;align-items:stretch}
.reasons-img{flex:0 0 380px;width:380px;height:360px;object-fit:contain;display:block;align-self:center}
.reasons-list{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.reason-card{padding:20px 24px;display:flex;gap:18px;align-items:flex-start}
.reason-no{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-zen);font-weight:900;font-size:20px;color:var(--amber)}
.reason-card .body{display:flex;flex-direction:column;gap:6px}
.reason-card h3{font-size:19px;color:var(--navy);line-height:1.4}
.reason-card p{font-size:15px;line-height:1.8;color:var(--ink-2)}

.notfit{padding:24px 28px;display:flex;gap:24px;align-items:flex-start}
.notfit-head{display:flex;align-items:center;gap:10px;flex-shrink:0}
.notfit-head h3{font-size:19px;color:var(--brown);white-space:nowrap}
.notfit-list{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.7;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   16. 事例 #jirei
   -------------------------------------------------------------------------- */
.jirei{padding-top:80px;padding-bottom:72px}
.jirei .inner{display:flex;flex-direction:column;gap:32px}
.case-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.case-head{color:#fff;padding:16px 22px;display:flex;flex-direction:column;gap:4px}
.case-head--1{background:var(--navy)}
.case-head--2{background:var(--blue)}
.case-head--3{background:var(--blue-lt)}
.case-meta{font-size:13px;color:#C9D3E6;font-weight:700;line-height:1.5}
.case-title{font-family:var(--font-zen);font-weight:900;font-size:19px;line-height:1.4}
.case-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:14px}
.case-ba{display:flex;align-items:center;justify-content:center;gap:16px}
.case-ba svg{flex-shrink:0}
.ba-item{text-align:center}
.ba-label{font-size:13px;color:var(--ink-3);font-weight:700}
.ba-label--after{color:var(--brown)}
.ba-num{font-family:var(--font-zen);font-weight:900;font-size:30px;color:#7B8497;line-height:1.3}
.ba-num--after{color:var(--orange)}
.case-body p{font-size:15px;line-height:1.8;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   17. 料金と契約条件 #ryokin
   -------------------------------------------------------------------------- */
.ryokin{padding-top:72px;padding-bottom:72px;background:var(--navy);color:#fff}
.ryokin .inner{display:flex;flex-direction:column;gap:32px}
.ryokin-deco-1{left:40px;bottom:30px;width:260px;height:120px;opacity:.25}
.ryokin-deco-2{right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;background:var(--blue);opacity:.6}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.price-card{background:#fff;color:var(--ink);border-radius:18px;padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.price-card--own{border:3px solid var(--orange)}
.price-card--wide{grid-column:1/-1}
.price-card h3{font-size:20px;color:var(--navy);line-height:1.5}
.price-card p{font-size:15px;line-height:1.8;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   18. FAQ #faq
   -------------------------------------------------------------------------- */
.faq{padding-top:80px;padding-bottom:64px}
.faq .inner{display:flex;flex-direction:column;gap:32px}
.faq-list{padding:0;overflow:hidden}
.faq-q{display:flex;gap:14px;align-items:flex-start;padding:20px 24px;border-bottom:1px solid var(--line-2)}
.faq-q:last-child{border-bottom:0}
.faq-q .q{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-zen);font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}
.faq-body{display:flex;flex-direction:column;gap:10px}
.faq-title{font-family:var(--font-go);letter-spacing:normal;font-weight:700;font-size:17px;color:var(--navy);line-height:1.5}
.faq-a{display:flex;gap:12px;align-items:flex-start}
.faq-a .a{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--font-zen);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.faq-a p{font-size:15px;line-height:1.8;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   19. CV #contact
   -------------------------------------------------------------------------- */
.contact{padding-top:24px;padding-bottom:80px}
.cv-box{border-radius:28px;background:linear-gradient(135deg,#0F2A5C 0%,#1E4FA3 100%);color:#fff;padding:52px 56px;display:flex;flex-direction:column;gap:28px;position:relative;overflow:hidden;box-shadow:0 20px 48px rgba(15,42,92,.3)}
.cv-deco-1{right:40px;top:30px;width:260px;height:140px;opacity:.25}
.cv-deco-2{left:-80px;bottom:-120px;width:280px;height:280px;border-radius:50%;background:var(--orange);opacity:.25}
.cv-head{display:flex;flex-direction:column;gap:12px;text-align:center;position:relative;z-index:1}
.cv-head h2{font-size:36px;line-height:1.35;color:#fff}
.cv-head p{font-size:17px;line-height:1.8;color:var(--line)}
.cv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative;z-index:1}
.cv-card{background:#fff;color:var(--ink);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.cv-card--hl{border:3px solid var(--orange);box-shadow:0 12px 30px rgba(240,138,36,.3)}
.cv-icon{width:56px;height:56px;border-radius:50%;background:#EEF3FA;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cv-icon--orange{background:var(--amber-bg)}  /* 一押しのカード（相談）のアイコン */
.cv-card .t{font-family:var(--font-zen);font-weight:900;font-size:19px;color:var(--navy);line-height:1.4}
.cv-card p{font-size:14px;line-height:1.7;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   20. フッター（免責・調査概要・運営者情報）
   -------------------------------------------------------------------------- */
.site-footer{padding:56px var(--pad-x) 48px;background:var(--bg-lt);border-top:3px solid var(--navy)}
.site-footer .inner{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col h2{font-size:18px;color:var(--navy)}
.company-card{padding:20px 22px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.company-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line-2)}  /* 社名の右にロゴ（文字の中央にそろえる）。1行に収まらない幅ではロゴが社名の下に回る */
.company-logo{height:22px;width:auto;display:block}
.company-name{font-weight:700;font-size:16px;color:var(--navy)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line)}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand-text{font-weight:700;font-size:15px;color:var(--navy);line-height:1.5}
.footer-links{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
.footer-links a{text-decoration:none;font-weight:700}
.copyright{text-align:center;color:#8A93A8}
/* 追従バナー（相談先診断へ）。冒頭を過ぎたら右下に出し、診断・CV・フッターが見えている間は隠す（script.js） */
.float-diag{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;background:var(--navy);border-radius:16px;box-shadow:0 10px 28px rgba(15,42,92,.28);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.float-diag.is-show{opacity:1;transform:none;pointer-events:auto}
.float-diag-link{display:flex;align-items:center;gap:12px;padding:14px 8px 14px 18px;color:#fff;text-decoration:none}
.float-diag-label{flex-shrink:0;background:var(--amber);color:var(--navy);font-weight:700;font-size:13px;line-height:1;padding:7px 10px;border-radius:999px}
.float-diag-t{font-family:var(--font-zen);font-weight:900;font-size:16px;line-height:1.4}
.float-diag-t .nw{display:inline-block}
.float-diag-arrow{flex-shrink:0;color:var(--amber)}
.float-diag-close{flex-shrink:0;width:40px;height:40px;margin-right:6px;border:0;background:transparent;color:var(--line);font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
.float-diag-close:hover,.float-diag-close:focus-visible{background:rgba(255,255,255,.12);color:#fff}
@media (prefers-reduced-motion:reduce){.float-diag{transition:none}}

/* ==========================================================================
   21. レスポンシブ
   ========================================================================== */

/* --- 〜1199px：ヘッダーのナビを畳む ------------------------------------ */
@media (max-width:1199px){
  :root{--pad-x:40px}
  .nav-link{display:none}
  .scroll-hint{display:inline-flex}
  .hero-title{font-size:min(66px,7.3cqi)}
  .hero{min-height:0;padding-bottom:96px}
  .conclusion h3{font-size:26px}
  .cv-box{padding:44px 36px}
  .cv-head h2{font-size:30px}
}

/* --- タブレット 768〜1023px ------------------------------------------------ */
@media (max-width:1023px){
  :root{--pad-x:32px}
  .h2{font-size:32px}

  /* ヒーロー：縦積み（文字 → 画像 → 数字3枚） */
  .hero{padding-top:48px;padding-bottom:88px}
  .hero-grid{flex-direction:column;gap:32px}
  .hero-left,.hero-right{flex:1 1 auto;width:100%}
  .hero-right{padding-top:0}
  .hero-img{height:320px}
  .hero-deco-1{left:-180px;top:-200px}
  .hero-deco-2{right:-160px;bottom:-220px}
  .hero-deco-3{display:none}

  .stance-card{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 26px}

  /* 3列・4列・6列 → 2列 */
  .grid-3,.grid-4,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-6{gap:16px}

  /* 施策マップ 5列 → 3列 */
  .map-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto repeat(4,1fr) auto auto auto repeat(4,1fr) auto}
  .map-col{border-bottom:1px solid var(--line-2)}
  .map-col:nth-child(3n){border-right:0}
  .map-col:nth-child(n+4){border-bottom:0}
  .map-cross{grid-column:1/-1;grid-row:auto;padding:18px 18px 22px;border-top:1px solid var(--line-2)}

  .riyu-grid{flex-direction:column}
  .reasons{flex-direction:column;align-items:center}
  .reasons-img{flex:0 0 auto;width:100%;max-width:420px;height:280px}
  .reasons-list{width:100%}
  .conclusion{flex-direction:column;align-items:stretch;padding:32px 28px}
  .conclusion-cta{align-items:stretch}
  .conclusion-cta .btn-primary,.conclusion-cta .btn-secondary{width:100%}
  .shindan-cta{flex-direction:column;align-items:stretch;text-align:left;padding:24px 26px}
  .shindan-cta .btn-primary{align-self:flex-start}
  .cv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr}
  .hr-title h3{white-space:normal;text-align:center}
  .notfit{flex-direction:column;gap:14px}
  .notfit-head h3{white-space:normal}
  .banner-navy{border-radius:20px;padding:16px 24px}
  .banner-navy span{font-size:17px}
  .curve-card{padding:24px 22px 22px}
  .point-card{padding:28px 22px 26px}
}

/* --- スマホ 〜767px -------------------------------------------------------- */
@media (max-width:767px){
  :root{--pad-x:20px;--header-h:67px}
  .float-diag{left:12px;right:12px;bottom:12px}
  .float-diag-link{flex:1;min-width:0;padding:12px 6px 12px 14px;gap:10px}
  .float-diag-t{font-size:15px}

  /* ヘッダー：左＝ロゴ、右＝無料相談ボタン */
  .header-row{height:64px;padding:0 16px;gap:10px}
  .brand-logo{height:22px}
  .brand-text{display:none}
  .header-actions .btn-sm{font-size:14px;padding:10px 16px;box-shadow:0 3px 0 var(--orange-dk)}

  .h2{font-size:26px}
  .lead{font-size:16px}

  .hero{padding-top:32px;padding-bottom:72px}
  .hero-title{font-size:min(36px,9.4cqi);letter-spacing:0}  /* 狭い画面は <wbr> の位置で折り返す */
  .hero-kicker{font-size:17px}
  .hero-lead{font-size:16px}
  .hero-img{height:220px}
  .hero-cta{gap:12px}
  .hero-cta .btn-primary,.hero-cta .btn-secondary{width:100%;font-size:16px;padding:10px 18px}
  .hero-stats{flex-direction:column}
  .hero-deco-1{left:-200px;top:-240px;width:360px;height:360px}
  .hero-deco-2{right:-200px;bottom:-240px;width:320px;height:320px}

  .stance{margin-top:-32px}
  .stance-card{padding:20px 20px 22px}
  .stance-icon-wrap{flex-direction:row;gap:12px}
  .stance-icon{width:56px;height:56px}
  .stance-icon svg{width:30px;height:30px}
  .stance-body h2{font-size:19px}
  .stance-body p{font-size:15px}

  .nayami{padding-top:56px;padding-bottom:48px}
  .nayami .inner,.riyu .inner,.commit .inner,.erabikata .inner,.types .inner,
  .hikaku .inner,.shindan .inner,.company .inner,.jirei .inner,.ryokin .inner,
  .faq .inner{gap:24px}

  /* すべてのカードグリッドを1列に */
  .grid-3,.grid-4,.grid-6,.grid-2,.cv-grid,.map-grid{grid-template-columns:1fr}
  .grid-3{gap:18px}
  .map-col{border-right:0;border-bottom:1px solid var(--line-2)}
  .map-col:nth-child(5){border-bottom:0;order:2}  /* 1列のときは TRACT letter を4列目の後ろに */
  .map-cross{order:1;border-top:0;border-bottom:1px solid var(--line-2)}

  .pain-body{padding:20px 18px 22px}
  .pain-body h3{font-size:21px}
  .pain-body p{font-size:15px}
  .pain-img{height:170px}
  .banner-navy{border-radius:16px;padding:16px 18px;gap:12px}
  .banner-navy span{font-size:16px}

  .riyu{padding-top:48px;padding-bottom:48px}
  /* 直販 vs 代理店：縦並び。各セルに列名を付けて読めるようにする */
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr}
  .vs-row > *{padding:10px 16px}
  .vs-row > * + *{border-left:0}
  .vs-row > *:first-child{background:#EEF3FA;color:var(--navy);padding-top:12px;padding-bottom:12px}
  .vs-row > [data-label]::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:2px}
  .vs-row > *:last-child{padding-bottom:14px}
  .side-card{padding:20px 20px}

  .commit{padding-top:48px;padding-bottom:48px}
  .curve-card{padding:18px 14px 16px}
  .curve-head h3{font-size:18px}
  .hr-title .bar{display:none}
  .hr-title h3{font-size:20px}
  .q6-card{padding:18px 18px}
  .note-amber{font-size:15px;padding:12px 16px;align-items:flex-start}

  .erabikata{padding-top:48px;padding-bottom:48px}
  .grid-3.point-grid{gap:38px;margin-top:10px}
  .point-card{padding:26px 20px 24px}
  .point-card h3{font-size:20px}

  .types{padding-top:48px;padding-bottom:48px}
  .hikaku{padding-top:48px;padding-bottom:56px}
  .legend{justify-content:flex-start;gap:8px}
  .legend-item{padding:3px 12px}
  .legend-item .txt{font-size:13px}

  /* スマホは当社の列を項目名のすぐ右に表示（order で見た目だけ並べ替え。DOM の順は PC と同じなので、読み上げの重複や見出しとの対応のずれはない）。
     開いた状態で項目名150px＋当社200pxが表示幅（約352px）に収まる */
  :root{--ctable-cols:150px 200px 170px 170px 170px}
  .ctable{min-width:860px}
  .ctable-head .rh,.rowhead{order:-2}
  .ctable-head .th--own,.ctable-row .cell-own{order:-1}
  .ctable-head .rh,.rowhead{box-shadow:8px 0 12px -8px rgba(15,42,92,.22)}
  .rowhead{padding:12px 14px}
  .rowhead .t{font-size:15px}
  .conclusion{padding:26px 20px;gap:20px}
  .conclusion h3{font-size:22px}
  .conclusion p{font-size:15px}
  .conclusion-cta .btn-primary,.conclusion-cta .btn-secondary{font-size:16px;padding:10px 16px;text-align:center}

  .shindan{padding-top:48px;padding-bottom:48px}
  .shindan-deco{display:none}
  .q-card{padding:20px 18px 22px}
  .shindan-cta{padding:20px 20px}
  .shindan-cta .t{font-size:19px}
  .shindan-cta .btn-primary{align-self:stretch;width:100%;font-size:16px;padding:10px 18px}
  .diag{padding:20px 16px}
  .diag-opt{min-height:60px;padding:14px 16px}
  .diag-comment{padding:18px 16px}
  .diag-comment-title{font-size:18px}
  .diag-comment p{font-size:15px;line-height:1.8}
  .diag-result-title{font-size:20px}
  .diag-card{padding:16px 16px}
  .diag-name{font-size:18px}
  .diag-pct{font-size:16px;min-width:46px}
  .diag-cta{align-items:stretch}
  .diag-cta--own .btn-primary,.diag-cta--own .btn-secondary{width:100%;font-size:16px;padding:10px 14px}

  .company{padding-top:48px;padding-bottom:48px}
  .cap-card{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:14px 16px}
  .cap-card .body{display:flex;flex-direction:column;gap:4px}
  .map-head{padding:16px 18px}
  .map-head h3{font-size:19px}
  .map-col{padding:18px 16px 20px}
  .map-stage{margin:-18px -16px 10px;padding:14px 16px 12px}
  .map-grid{grid-template-rows:none}
  .map-col{grid-row:auto;display:flex;flex-direction:column;gap:8px}
  .map-items{display:flex;flex-direction:column;gap:12px}
  .map-col-sub{min-height:0}
  .map-cross{padding:18px 16px 20px}
  .map-item--wide{flex-direction:column;align-items:stretch;gap:8px}
  .map-item-lead{flex:none}
  .map-foot{padding:14px 18px}
  .map-foot span{font-size:14px}
  .reasons-img{height:220px}
  .reason-card{padding:18px 18px;gap:14px}
  .reason-no{width:44px;height:44px;font-size:18px}
  .reason-card h3{font-size:18px}
  .notfit{padding:20px 18px}

  .jirei{padding-top:48px;padding-bottom:48px}
  .case-head{padding:14px 18px}
  .case-title{font-size:18px}
  .case-body{padding:18px 18px 22px}
  .case-ba{gap:10px}
  .ba-num{font-size:26px}

  .ryokin{padding-top:48px;padding-bottom:48px}
  .price-card{padding:20px 20px}
  .price-card h3{font-size:18px}

  .faq{padding-top:48px;padding-bottom:40px}
  .faq-q{padding:16px 16px;gap:10px}
  .faq-q .q{width:30px;height:30px;font-size:16px}
  .faq-title{font-size:16px}

  .contact{padding-top:16px;padding-bottom:56px}
  .cv-box{border-radius:20px;padding:32px 18px}
  .cv-head h2{font-size:24px}
  .cv-head p{font-size:15px}
  .cv-deco-1{display:none}
  .cv-card{padding:22px 18px}
  .cv-card .btn-primary,.cv-card .btn-secondary{width:100%}

  .site-footer{padding-top:40px;padding-bottom:36px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-brand-text{font-size:14px}
}

/* 極小幅（〜360px）の保険 */
@media (max-width:360px){
  .hero-title{font-size:min(30px,9.4cqi)}
  .header-actions .btn-sm{font-size:13px;padding:9px 12px}
}

/* 360px前後の幅：比較表を開いた状態で、表示幅（約322px）に項目名＋当社の列が収まるよう列幅を詰める */
@media (max-width:374px){
  :root{--ctable-cols:128px 190px 160px 160px 160px}
  .ctable{min-width:798px}
}