/* ===== トークン（指定色） ===== */
:root{
  --teal:#239DA5;        /* メイン */
  --teal-deep:#176D74;   /* 濃いティール（ボタン・リンク・小さい文字） */
  --teal-light:#8FCDD2;  /* 3段階の一番薄い側 */
  --mist:#E8F6F7;        /* 薄い背景 */
  --mist-2:#F4FAFA;      /* さらに薄い帯 */
  --white:#FFFFFF;
  --ink:#1B2527;         /* 本文（ティール寄りの黒） */
  --ink-2:#55676A;
  --ink-3:#7E8F92;
  --line:#D8E6E8;
  --line-2:#EAF1F2;
  --focus:#7FC9CF;
  --radius:6px;
  --gutter:clamp(16px,4vw,32px);
  --max:1120px;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
  --font-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light;
}
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.9;-webkit-font-smoothing:antialiased}
h1, h2, h3, h4{font-family:var(--font-head);font-weight:700;line-height:1.45;letter-spacing:.02em;margin:0;font-feature-settings:"palt";text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--teal-deep)}
img{max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* ===== ボタン ===== */
/* ===== 下書きの印 ===== */
/* ===== ヘッダー ===== */
/* ===== ページ頭 ===== */
.crumbs{font-size:12px;color:var(--ink-3);padding-top:14px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs span{margin-inline:6px}
.phead{display:grid;grid-template-columns:1fr minmax(320px,470px);gap:40px;align-items:center;padding-block:24px 40px}
.phead h1{font-size:clamp(30px,4vw,40px);line-height:1.3}
.phead-lead{margin-top:16px;font-size:15px;color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;background:var(--mist);border-radius:var(--radius);padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);border:1px solid transparent;transition:border-color .15s}
.tile:hover{border-color:var(--teal-light)}
.tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tile-kicker{font-size:11px;color:var(--teal-deep);font-weight:700;letter-spacing:.04em}
.tile-title{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.5;font-feature-settings:"palt"}
.tile-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 14px;background:var(--teal-deep);color:#fff;border-radius:4px;font-size:13px;font-weight:700}
.tile-btn svg{width:12px;height:12px}
@media (max-width:860px){.phead{grid-template-columns:1fr;gap:24px}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}
/* ===== 事実の帯 ===== */
/* ===== セクション共通 ===== */
.sec{padding-block:64px}
@media (max-width:640px){.sec{padding-block:48px}}
/* ===== 支援範囲の帯（プランの構造図） ===== */
/* ===== プランのカード ===== */
/* ===== 支援内容の比較表 ===== */
/* ===== オプション ===== */
/* ===== 料金のしくみ ===== */
/* ===== 原稿待ちの枠 ===== */
/* ===== 導入の流れ ===== */
/* ===== よくある質問 ===== */
/* ===== CTA ===== */
/* ===== フッター ===== */
/* ===== ページ切替（1ファイルで4ページ。実装時は1ページ1ファイルに分ける） ===== */
.page{display:none}
.page.is-active{display:block}
[id]{scroll-margin-top:84px}
/* ===== 理由へのアンカー ===== */
.anchors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.anchors a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.4}
.anchors a:hover{border-color:var(--teal);color:var(--teal-deep)}
.anchors a b{font-family:var(--font-head);font-weight:900;color:var(--teal);font-size:12px}
/* ===== 選ばれる理由（左右交互） ===== */
.reason{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding-block:52px;border-top:1px solid var(--line)}
.reasons .reason:first-child{border-top:0;padding-top:24px}
.reason:nth-child(even) .reason-text{order:2}
.reason-no{font-family:var(--font-head);font-weight:900;font-size:13px;color:var(--teal);letter-spacing:.1em}
.reason h2{font-size:clamp(22px,2.6vw,28px);margin-top:8px;line-height:1.45}
.reason-text p + p{margin-top:14px}
.reason-body{margin-top:16px;color:var(--ink-2);font-size:14.5px}
.reason-fig{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
@media (max-width:820px){.reason{grid-template-columns:1fr;gap:20px;padding-block:40px}
.reason:nth-child(even) .reason-text{order:0}}
/* 図1: 見る数字の範囲 */
/* 図2: 初期戦略設計の入口と出口 */
/* 図3: 勤務地周辺への配信 */
/* 図4: 公式LINEの流れ */
/* 図5: 投稿データ */
/* ===== 一般的な運用代行との違い ===== */
/* ===== 向いている／向いていない ===== */
/* ===== 次に読むページ ===== */
/* ===== サービス内容・支援の流れ ===== */
/* ===== よくある質問（一覧） ===== */
/* ===== スマホのヘッダー（折り返し防止） ===== */
/* =====================================================================
   v2（2026-09-25）: カード・アイコン・角丸を減らし、図を画面風に。
   base / extra の後に読ませて上書きする
   ===================================================================== */
:root{--radius:0}
.tile, .tile-btn{border-radius:0}
/* 見出し: 左揃え・縦線。中央揃えは .sec-head--c だけ */
/* 数字の帯: 点をやめて縦線で区切る */
/* タイル: 枠なし・角なし（アイコンは HTML から外した） */
.tile{border:0;background:var(--mist)}
.tile:hover{background:#DDF0F1}
/* 理由へのアンカー: ピルをやめて縦線区切りの文字列 */
.anchors{justify-content:flex-start;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0;margin-bottom:0}
.anchors a{border:0;border-radius:0;background:none;padding:8px 16px 8px 0;margin-right:16px;border-right:1px solid var(--line);font-weight:500}
.anchors a:last-child{border-right:0;margin-right:0}
.anchors a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px}
/* 理由の図: 箱をやめる */
.reason-fig{background:none;border:0;padding:0}
/* 図1: 見る数字（箱 → 下線つきの並び） */
/* 図2: 入口と出口（塗りをやめて罫線） */
/* 図3: 広告の配信設定（画面風） */
/* 図4: 公式LINE（スマホ画面風） */
/* 図5: 投稿データ（数字＋扱う内容の一覧） */
/* 違いの表・向き不向き・次に読む: 箱をやめる */
/* サービス内容: 工程を罫線で並べる（丸数字をやめる） */
/* 料金: 対応範囲の図とオプション・導入の流れの箱をやめる */
/* よくある質問: スマホの目次をチップから 2 列の一覧に */
/* 向いている企業の印: チェック丸をやめて小さな点に */
/* 番号付きリスト（導入の流れ・工程）: ブラウザ既定の「1.」を出さない（番号は自前で描く） */
/* =====================================================================
   v3（2026-09-25）: wakatte.com に合わせる
   フォント・文字色・文字サイズ・行間・幅・部品の形を、本番 wakatte.com の
   main.bundle.css（2026-09-25 取得）と実測値に揃える。base / extra / v2 の後に読ませて上書き。
   ===================================================================== */
:root{
  --teal:#379faa;          /* .cl-blue: 見出し・枠線・Qの帯 */
  --teal-deep:#379faa;     /* 旧トークンの参照先も同じ色へ */
  --teal-light:#8fd0d6;
  --mist:#e5f4f5;          /* 帯・フッター・表の項目名・見出しの英字 */
  --mist-2:#f7feff;        /* FV の背景 */
  --warm:#fffbf8;          /* ご利用の流れの背景・おすすめ列 */
  --orange:#fb8b18;        /* .cl-orange: CTA ボタン・おすすめ・強調 */
  --orange-deep:#f87808;
  --ink:#333333;           /* 本文 */
  --ink-2:#333333;
  --ink-3:#555555;
  --gray:#909090;          /* 「一般的な運用代行」側の灰色 */
  --line:#cfe6e8;
  --line-2:#e5f4f5;
  --focus:#379faa;
  --radius:10px;
  --gutter:20px;
  --max:1080px;            /* .inner の max-width */
  --font-body:"Noto Sans JP",sans-serif;
  --font-head:"Zen Maru Gothic","Noto Sans JP",sans-serif;   /* h2 は丸ゴシック */
  --font-en:"Roboto",sans-serif;                              /* 見出しの後ろの英字 */
}
body{font-size:16px;line-height:1.7;color:#333;letter-spacing:normal}
h1, h2, h3, h4{font-feature-settings:normal;letter-spacing:0;line-height:1.5;text-wrap:balance}
h3, h4{font-family:var(--font-body);font-weight:700}
a{color:var(--teal)}
p{line-height:1.7}
.wrap{max-width:1080px;padding-inline:20px}
/* ボタン: 橙の塗り（資料）と橙の枠（相談）。角丸 10px・影あり */
/* ヘッダー: ロゴ左・メニュー右・影。文字は 16px 500 */
/* ページ頭 */
.crumbs{font-size:12px;color:#555}
.phead{padding-block:28px 44px;gap:48px}
.phead h1{font-family:var(--font-body);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1.25;letter-spacing:-.04em;color:#333}
.phead-lead{font-size:16px;line-height:1.7;color:#333;margin-top:18px}
.tile{border:2px solid var(--teal);border-radius:10px;background:#fff;padding:20px 18px 18px}
.tile:hover{background:#fff;border-color:var(--orange)}
.tile-kicker{color:var(--teal);font-weight:700;font-size:14px}
.tile-title{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.4;color:#333}
.tile-btn{background:var(--orange);color:#fff;border-radius:10px;font-weight:700;font-size:15px;padding:12px 16px;text-align:center;box-shadow:0 3px 3px rgba(0,0,0,.15)}
/* 数字の帯 */
/* 節の見出し: 丸ゴシック・ティール・中央。後ろに Roboto の英字（data-en） */
.sec{padding-block:64px 60px}
/* 理由へのアンカー: ティール枠の丸いチップ */
.anchors{border:0;padding:0;justify-content:center;gap:10px;margin-bottom:8px}
.anchors a{border:2px solid var(--teal);border-radius:999px;padding:8px 18px;margin:0;color:var(--teal);font-weight:700;font-size:14px;background:#fff}
.anchors a:last-child{border-right:2px solid var(--teal)}
.anchors a b{color:var(--teal);font-family:var(--font-en);font-weight:700}
.anchors a:hover{background:var(--mist);text-decoration:none}
/* 選ばれる理由 */
.reason{border-top:1px solid var(--line);padding-block:56px}
.reason h2{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.6vw,28px);color:#333;line-height:1.45;letter-spacing:.02em}
.reason p{font-size:16px;line-height:1.7;color:#333}
.reason-no{font-family:var(--font-en);color:var(--teal);font-weight:700;font-size:16px;letter-spacing:.1em}
/* 違いの表: 料金表と同じ、ティールの罫線と帯 */
/* 向いている企業: ティール枠のカード＋チェック。おすすめしない側は灰色の枠＋バツ */
/* 次に読む */
/* サービス内容: 工程はティール枠のカード＋番号の丸 */
/* 料金: 対応範囲の図 */
/* 料金: プランのカード（おすすめは橙） */
/* 料金: 比較表（列の見出しはティールの帯・項目名は薄いティール） */
/* 料金: オプション */
/* 料金: 導入の流れ（本番の「ご利用の流れ」と同じ、縦に並ぶカードと矢印） */
/* よくある質問: Q はティールの帯・答えは枠の中（開閉式）。料金ページの抜粋も同じ */
/* 共通 CTA: ティールの帯に白い箱、橙のボタン 2 つ */
/* フッター: 薄いティール・12px・左に会社概要とプライバシーポリシー、右に © */
/* 比較表: 3プランを同じ配色にして、支援範囲だけを比較しやすくする */
/* 共通 CTA の中身（base の .cta h2 / .cta-box を上書き） */
/* 導入の流れ: 番号の箱を左に縦いっぱい、右に題名・期間・本文（本番と同じ並び） */
/* プランの箇条書き: 丸なしのチェック（本番と同じ 13×10） */
.tile-title{font-size:16px}
/* 日本語の見出しは普通に折り返す（balance だと単語の途中で割れる） */
h1, h2, h3, h4, .tile-title{text-wrap:wrap}
.reason p.reason-no{color:var(--teal);font-size:16px;letter-spacing:.1em}
/* よくある質問: スマホでは目次を上に 1 列で（v3 の 240px 指定が extra のスマホ用を上書きしていた） */
/* ===== 導入事例（2026-09-25 原稿到着） ===== */
/* 他の実績を知りたい方へ */
/* スマホ: 事例の脇（ボタンの文が長く nowrap のため）が 1fr の最小幅を押し広げて右の余白へはみ出していた。列を minmax(0,1fr) にし、脇のボタンだけ折り返しを許す */
/* トップページと共通の見た目。下書き固有の本文や図の構造は維持する。 */
/* トップと同じ高さ、ロゴ、ナビ間隔。 */
/* FVと同じ明るい青緑のアクセントを、詳細ページの冒頭には控えめに使う。 */
.page > .wrap:first-child{position:relative;isolation:isolate}
.page > .wrap:first-child::before{content:"";position:absolute;inset:0 0 auto;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(145deg,transparent 0 48%,rgba(169,237,240,.18) 48% 50%,transparent 50% 100%)}
.phead{position:relative;min-width:0}
.phead > *{min-width:0}
.phead h1{font-family:var(--font-body);font-weight:900;line-height:1.3;color:#333}
.phead-lead{max-width:42em}
.tiles{min-width:0}
.tile{min-width:0}
.tile-btn{min-height:44px;display:inline-flex;justify-content:center;align-items:center}
.tile[href*="#free-consult"] .tile-btn{background:#fff;color:#fb8b18;border:2px solid #fb8b18}
.tile[href^="#"] .tile-btn{background:#379faa;color:#fff}
/* トップのCTAに合わせて2ボタンに統一。 */
/* 表や長文の幅が画面全体を押し広げないようにする。 */
.page, .sec, .wrap{min-width:0}
@media (max-width:1100px){body.is-menu-open{overflow:hidden}}
@media (max-width:760px){.phead{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:24px 38px}
.phead h1{font-size:clamp(30px,8vw,38px)}
.phead-lead{font-size:15px}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{padding:16px 14px}
.tile-title{font-size:15px}}
@media (max-width:480px){.tiles{grid-template-columns:minmax(0,1fr)}
.tile{gap:6px}}
/* Give the three detailed phase headings a clear visual hierarchy. */
/* Editable HTML diagrams shared by the reason and service pages. */
.reason p.reason-sub{margin-top:8px;color:var(--teal-deep);font-size:clamp(16px,1.5vw,18px);font-weight:700;line-height:1.55}
.reason-fig.text-figure{min-width:0;margin:0;padding:0;border:0;background:transparent}
/* The service overview reads as three connected phases, with connected steps inside each phase. */
/* The detailed initial strategy is a connected, six-node process diagram. */
/* Five illustrated reasons: vector artwork with real, selectable Japanese text. */
.rich-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sec--reasons .wrap{max-width:var(--max)}
.reason{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.reason .reason-text, .reason:nth-child(even) .reason-text{order:1;max-width:850px}
.reason-fig.rich-figure{order:0;min-width:0;margin:0;padding:0;border:0;background:transparent}
@media (min-width:1100px){.anchors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.anchors a{justify-content:center;min-width:0;min-height:56px;padding:8px 6px;font-size:12px;line-height:1.35;text-align:center}
.reason{grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr);gap:34px;align-items:center}
.reason h2{font-size:24px}
.reason .reason-text, .reason:nth-child(even) .reason-text{order:0;max-width:none}
.reason-fig.rich-figure{order:1}
.reason:nth-child(even){grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr)}
.reason:nth-child(even) .reason-fig.rich-figure{order:0}
.reason:nth-child(even) .reason-text{order:1}}
@media (max-width:1099px){.reason{grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.reason .reason-text{display:contents}
.reason .reason-text .reason-no{order:0;margin:0}
.reason .reason-text h2{order:1;margin-top:5px}
.reason .reason-text p.reason-sub{order:2;margin-top:6px}
.reason-fig.rich-figure{order:3;margin-top:20px}
.reason .reason-text p.reason-body{order:4}}
.rich-diagram{--diagram-ink:#173550;--diagram-accent:#168b9a;overflow:hidden;border:2px solid #9bdae2;border-radius:18px;background:#fff;color:var(--diagram-ink);font-family:var(--font-body)}
.rich-diagram svg{display:block;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rich-diagram b, .rich-diagram span, .rich-diagram small{overflow-wrap:anywhere}
/* 01 — the two paths are read across in the same order. */
.journey-visual{display:grid;gap:18px;padding:20px;background:#f8fdff}
.journey-row{min-width:0;overflow:hidden;border:1.5px solid #cad7e0;border-radius:14px;background:#edf4f7}
.journey-row--ours{border-color:#39aebc;background:#fff}
.journey-label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:11px 18px;background:#647381;color:#fff}
.journey-row--ours .journey-label{background:#168f9d}
.journey-label span{font-size:clamp(18px,2.3vw,26px);font-weight:800;line-height:1.3}
.journey-label b{font-size:clamp(14px,1.7vw,19px);line-height:1.35;text-align:right}
.journey-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:18px;list-style:none;counter-reset:journey}
.journey-stages li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;min-height:157px;padding:19px 8px 12px;border-radius:12px;background:#fff;text-align:center;counter-increment:journey}
.journey-row--ours .journey-stages li{background:#e8faff}
.journey-stages li + li::before{content:"";position:absolute;top:48%;left:-13px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:8px solid #7c95a3}
.journey-stages li::after{content:"0" counter(journey);position:absolute;top:7px;left:9px;color:#668092;font-family:var(--font-en);font-size:11px;font-weight:700}
.journey-row--ours .journey-stages li::after{color:#126f7a}
.journey-row--ours .journey-stages li + li::before{border-left-color:#168f9d}
.journey-stages svg{flex:none;width:41px;height:41px;color:#38506a}
.journey-row--ours .journey-stages svg{color:#137b89}
.journey-stages b{font-size:clamp(15px,1.8vw,21px);line-height:1.35}
.journey-stages small{font-size:clamp(11px,1.35vw,14px);line-height:1.45;color:#516173}
.journey-stages .is-uncovered{opacity:.58}
/* 02 — four inputs converge on an editorial output. */
/* 03 — broad reach versus a defined recruitment area. */
/* 04 — the LINE support sequence retains the reference's five interventions. */
/* 05 — data, trend and company context combine in an original plan. */
@media (max-width:760px){.journey-visual{padding:12px;gap:12px}
.journey-stages{gap:6px;padding:10px}
.journey-stages li{min-height:135px;padding:12px 3px}
.journey-stages li + li::before{left:-6px;border-top-width:5px;border-bottom-width:5px;border-left-width:6px}
.journey-stages svg{width:30px;height:30px}}
@media (max-width:480px){.rich-diagram{border-radius:12px}
.journey-label{display:block;min-height:0;padding:10px 12px;text-align:left}
.journey-label span, .journey-label b{display:block;font-size:15px;text-align:left}
.journey-label b{margin-top:2px;font-size:12px}
.journey-stages{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:7px}
.journey-stages li, .journey-stages li:nth-child(n/**/+4){grid-column:span 2;gap:4px;min-height:102px;padding:12px 4px 7px;border-radius:7px}
.journey-stages li:nth-child(n/**/+4){grid-column:span 3}
.journey-stages li + li::before{display:none}
.journey-stages li::after{top:3px;left:5px;font-size:9px}
.journey-stages svg{width:28px;height:28px;stroke-width:3.5}
.journey-stages b{font-size:13px}
.journey-stages small{font-size:10px;line-height:1.35}}
@media (max-width:360px){.journey-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
.journey-stages li, .journey-stages li:nth-child(n/**/+4){grid-column:auto}
.journey-stages li:last-child{grid-column:1/-1;min-height:82px}}
/* Recruitment-stage comparison under the five reasons. */
/* Pricing page: make the shared output, comparison and consultation easy to scan. */
/* Comparison with other services stays a real table at every width. */
/* Match the vertical numbered flow on wakatte.com. */
/* Pricing mechanism: three clear cost categories with a visible addition. */
/* Service page: month-by-month client and agency responsibilities. */
/* Pricing page option cards: spacious desktop layout and clear price hierarchy. */
/* Plan guide: every question, branch and explanation exists in the initial HTML. */
/* Shared layout for all three recruitment case studies. */
/* Responsive readability fixes found in the 320–1920px page audit. */
.anchor-mobile-break{display:inline}
@media (max-width:360px){.anchors a[href="#reason-4"]{max-width:100%;text-align:center}
.anchor-mobile-break{display:block}}
/* Pricing details and restrained competitor comparison. */
/* 閉じるボタンは下へスクロールしても上に残す（スマホは全画面なので、これが無いと閉じ方が分からない） */
/* --- 予約（booking-wakatte.html と同じ見た目。3ステップタブ / 週送りグリッド） --- */
/* ハニーポット：画面には出さない（bot だけが埋める） */
/* Detailed service phases: heading, compact diagram, then one explanation. */
/* Shared CTA designs for the reasons, service, and pricing pages. */
/* Keep both service CTA blocks close to the content they follow. */
/* Keep the FAQ actions visible below the category list on desktop. */
:root{--font-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;--font-head:"Hiragino Maru Gothic ProN",Meiryo,"Noto Sans JP","Hiragino Sans",sans-serif}