/* ===== トークン（指定色） ===== */
: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}
.sec-head{text-align:center;margin-bottom:36px}
.sec-head h2{font-size:clamp(24px,3vw,30px)}
.sec-head h2::after{content:"";display:block;width:32px;height:3px;background:var(--teal);margin:14px auto 0}
.sec-lead{margin-top:14px;color:var(--ink-2);font-size:14.5px}
@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}
/* ===== 理由へのアンカー ===== */
/* ===== 選ばれる理由（左右交互） ===== */
/* 図1: 見る数字の範囲 */
/* 図2: 初期戦略設計の入口と出口 */
/* 図3: 勤務地周辺への配信 */
/* 図4: 公式LINEの流れ */
/* 図5: 投稿データ */
/* ===== 一般的な運用代行との違い ===== */
/* ===== 向いている／向いていない ===== */
/* ===== 次に読むページ ===== */
/* ===== サービス内容・支援の流れ ===== */
/* ===== よくある質問（一覧） ===== */
/* ===== スマホのヘッダー（折り返し防止） ===== */
/* =====================================================================
   v2（2026-09-25）: カード・アイコン・角丸を減らし、図を画面風に。
   base / extra の後に読ませて上書きする
   ===================================================================== */
:root{--radius:0}
.tile, .tile-btn{border-radius:0}
/* 見出し: 左揃え・縦線。中央揃えは .sec-head--c だけ */
.sec-head{text-align:left;border-left:4px solid var(--teal);padding-left:18px;margin-bottom:32px}
.sec-head h2::after{display:none}
.sec-lead{margin-top:8px;max-width:46em}
/* 数字の帯: 点をやめて縦線で区切る */
/* タイル: 枠なし・角なし（アイコンは HTML から外した） */
.tile{border:0;background:var(--mist)}
.tile:hover{background:#DDF0F1}
/* 理由へのアンカー: ピルをやめて縦線区切りの文字列 */
/* 理由の図: 箱をやめる */
/* 図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}
.sec-head{text-align:center;border-left:0;padding-left:0;margin-bottom:36px;padding-top:36px}
.sec-head h2{position:relative;z-index:1;font-family:var(--font-head);font-weight:700;font-size:32px;letter-spacing:.05em;color:var(--teal);line-height:1.5}
.sec-head h2::after{display:none}
.sec-head h2[data-en]::before{content:attr(data-en);position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-family:var(--font-en);font-weight:700;font-size:48px;letter-spacing:.05em;color:var(--mist);white-space:nowrap;z-index:-1;line-height:1}
@media (min-width:769px){.sec-head h2{font-size:40px}
.sec-head h2[data-en]::before{font-size:96px;top:-60px}}
.sec-lead{text-align:center;margin:14px auto 0;font-size:16px;line-height:1.5;color:#333;max-width:none}
/* 理由へのアンカー: ティール枠の丸いチップ */
/* 選ばれる理由 */
/* 違いの表: 料金表と同じ、ティールの罫線と帯 */
/* 向いている企業: ティール枠のカード＋チェック。おすすめしない側は灰色の枠＋バツ */
/* 次に読む */
/* サービス内容: 工程はティール枠のカード＋番号の丸 */
/* 料金: 対応範囲の図 */
/* 料金: プランのカード（おすすめは橙） */
/* 料金: 比較表（列の見出しはティールの帯・項目名は薄いティール） */
/* 料金: オプション */
/* 料金: 導入の流れ（本番の「ご利用の流れ」と同じ、縦に並ぶカードと矢印） */
/* よくある質問: 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}
/* よくある質問: スマホでは目次を上に 1 列で（v3 の 240px 指定が extra のスマホ用を上書きしていた） */
/* ===== 導入事例（2026-09-25 原稿到着） ===== */
.cases .case{border-top:1px solid var(--line);padding-block:56px}
.cases .case:first-child{border-top:0;padding-top:8px}
.case-kicker{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;font-weight:700;margin:0}
.case-cat{background:var(--mist);color:var(--teal);padding:4px 14px;border-radius:999px}
.case-co{color:#333}
.case > h2{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.45;color:#333;margin-top:12px}
@media (max-width:900px){.cases .case{padding-block:40px}}
/* 他の実績を知りたい方へ */
/* スマホ: 事例の脇（ボタンの文が長く 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){.sec-head h2[data-en]::before{font-size:clamp(30px,9vw,42px)}
.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. */
/* 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. */
/* 01 — the two paths are read across in the same order. */
/* 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. */
/* 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. */
#cases.sec{padding-top:40px}
#cases .sec-head, #results-more .sec-head{margin-bottom:48px;text-align:center}
#cases .sec-lead{max-width:54em;margin:14px auto 0;color:#333;font-size:15px;line-height:1.7;text-align:center}
#cases .wrap{max-width:var(--max)}
#results .cases{display:block}
#results .cases .case, #results .cases .case:first-child{position:relative;min-width:0;margin:72px 0 0;padding:36px;border:2px solid var(--teal);border-radius:0 12px 12px 12px;background:#fff;box-shadow:none}
#results .cases .case:first-child{margin-top:0}
#results .case-kicker{gap:8px 18px;font-size:14px}
#results .case-cat{padding:0;border:0;border-radius:0;background:none;color:#168b96;font-weight:700}
#results .case-co{position:absolute;top:-42px;left:-2px;min-height:42px;padding:7px 18px;border:0;border-radius:5px 5px 0 0;background:var(--teal);color:#fff;font-size:18px;font-weight:700}
#results .case>h2, #results .case-hero h2{margin:12px 0 0;color:#252d31;font-family:var(--font-head);font-size:clamp(27px,3vw,36px);font-weight:800;letter-spacing:0;line-height:1.4;text-wrap:balance}
#results .case-title-break{display:none}
#results .case-hero h2 strong{color:#252d31;font-weight:800;white-space:nowrap}
#results .case-hero h2 strong:last-of-type{color:#fb8b18}
#results .case-intro{max-width:62em;margin:12px 0 0;color:#3d494d;font-size:16px;line-height:1.8}
#results .case-resultbar{display:grid;grid-template-columns:105px minmax(0,1fr) minmax(180px,235px);align-items:center;gap:20px;min-width:0;margin-top:28px;padding:20px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:#fff;overflow:visible}
#results .case-resultbar__label{display:block;margin:0;color:#168b96;font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:0;text-align:left}
#results .case-resultbar__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;width:100%;min-width:0;margin:0;padding:0}
#results .case-resultbar__metrics>div{min-width:0;padding:0 20px;text-align:left}
#results .case-resultbar__metrics>div:first-child{padding-left:0}
#results .case-resultbar__metrics>div+div{border-left:1px solid var(--line)}
#results .case-resultbar__metrics dt{color:#3d555a;font-size:13px;font-weight:700;line-height:1.4}
#results .case-resultbar__metrics dd{display:flex;align-items:baseline;justify-content:flex-start;gap:2px;min-width:0;margin:3px 0 0;color:#252d31;font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap}
#results .case-resultbar__metrics dd strong{display:inline-block;padding:0;border:0;color:#252d31;font-family:var(--font-body);font-size:clamp(34px,4vw,46px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0}
#results .case-resultbar__metrics>div:last-child dd strong{color:#fb8b18}
#results .case-resultbar__period{grid-column:auto;display:block;margin:0;padding:0;border:0;color:#52666b;font-size:13px;line-height:1.6;text-align:right}
@media (max-width:850px){#results .case-resultbar{grid-template-columns:85px minmax(0,1fr);gap:10px 18px}
#results .case-resultbar__period{grid-column:2;text-align:left}}
@media (max-width:600px){#cases.sec{padding-top:26px}
#cases .sec-head{margin-bottom:50px}
#results .cases .case, #results .cases .case:first-child{margin-top:66px;padding:20px 18px 24px}
#results .cases .case:first-child{margin-top:0}
#results .case-kicker{gap:5px 12px;font-size:13px}
#results .case-co{top:-35px;min-height:35px;padding:6px 12px;font-size:15px}
#results .case-hero h2{margin-top:14px;font-size:clamp(25px,7vw,31px)}
#results .case-title-break{display:initial}
#results .case-intro{font-size:14px}
#results .case-resultbar{grid-template-columns:1fr;gap:12px;margin-top:22px;padding:17px 0}
#results .case-resultbar__label{font-size:13px}
#results .case-resultbar__metrics{margin:0}
#results .case-resultbar__metrics>div{padding:0 12px}
#results .case-resultbar__metrics>div:first-child{padding-left:0}
#results .case-resultbar__metrics dt{font-size:12px}
#results .case-resultbar__metrics dd{font-size:13px}
#results .case-resultbar__metrics dd strong{font-size:clamp(29px,9vw,36px)}
#results .case-resultbar__period{grid-column:1;margin:0;padding-top:10px;border-top:1px solid var(--line);font-size:11px;text-align:left}}
/* Responsive readability fixes found in the 320–1920px page audit. */
/* 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}