/* ===== トークン（指定色） ===== */
: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)}
.phead-lead .keep-word{white-space:nowrap}
.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--mist{background:var(--mist-2)}
.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 原稿到着） ===== */
/* 他の実績を知りたい方へ */
/* スマホ: 事例の脇（ボタンの文が長く 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}}
#service #h-overview + .sec-lead strong{color:#176d74;font-weight:700}
/* Give the three detailed phase headings a clear visual hierarchy. */
/* Editable HTML diagrams shared by the reason and service pages. */
.strategy-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* The service overview reads as three connected phases, with connected steps inside each phase. */
.service-flow{display:grid;gap:50px}
.service-flow__stage{position:relative;min-width:0}
.service-flow__stage:not(:last-child)::after{content:"↓";position:absolute;bottom:-44px;left:calc(50% - 17px);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#0d8795;font-size:27px;font-weight:800;line-height:1}
.service-flow__heading{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 18px;border-radius:11px;background:#379faa;color:#fff}
.service-flow__phase-no{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#0c7784;font-family:var(--font-en);font-size:20px;font-weight:800}
.service-flow__heading h3{margin:0;color:#fff;font-size:clamp(21px,2.3vw,27px);line-height:1.3}
.service-flow__heading p{margin:0 0 0 auto;font-size:14px;font-weight:700;text-align:right}
.service-flow__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin:16px 0 0;padding:0;list-style:none}
.service-flow__steps > li{position:relative;min-width:0;border:1px solid #acdce3;border-radius:11px;background:#f6fcfd}
.service-flow__steps > li:not(:last-child)::after{content:"→";position:absolute;z-index:2;top:calc(50% - 19px);right:-31px;color:#0d8795;font-size:31px;font-weight:800;line-height:1}
.service-flow__step-head{display:flex;align-items:center;gap:10px;min-height:66px;padding:11px 14px;border-radius:9px 9px 0 0;background:#0d8795;color:#fff}
.service-flow__step-head span{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#0c7784;font-family:var(--font-en);font-size:16px;font-weight:800}
.service-flow__step-head h4{margin:0;color:#fff;font-size:clamp(16px,1.7vw,21px);line-height:1.25;overflow-wrap:anywhere}
.service-flow__lead{margin:0;padding:13px 15px 5px;color:#334d59;font-size:14px;font-weight:700;line-height:1.5;text-align:center}
.service-flow__tasks{margin:0;padding:8px 16px 15px;list-style:none}
.service-flow__tasks li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 2px;border-bottom:1px solid #d5e9ec;color:#135a68;font-size:clamp(13px,1.4vw,16px);font-weight:700;line-height:1.4}
.service-flow__tasks li:last-child{border-bottom:0}
.service-flow__tasks svg{flex:none;width:29px;height:29px;fill:none;stroke:#0b8090;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1100px){.service-flow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:50px}
.service-flow__stage:first-child{grid-column:1/-1}
.service-flow__stage:nth-child(2)::after{content:"→";top:calc(50% - 17px);right:-31px;bottom:auto;left:auto}
.service-flow__stage:nth-child(n/**/+2) .service-flow__heading{gap:8px;padding:8px 12px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__heading h3{font-size:20px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__heading p{font-size:11px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__steps{gap:10px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__steps > li:not(:last-child)::after{top:calc(50% - 12px);right:-13px;font-size:22px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__step-head{gap:4px;min-height:58px;padding:6px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__step-head span{width:26px;height:26px;font-size:12px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__step-head h4{font-size:13px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__tasks{padding:5px 7px 8px}
.service-flow__stage:nth-child(n/**/+2) .service-flow__tasks li{gap:4px;min-height:34px;padding:4px 1px;font-size:12px;line-height:1.3}}
.overview-phase-lines{display:block;margin-top:4px;line-height:1.55}
.overview-phase-lines span{display:block}
/* The detailed initial strategy is a connected, six-node process diagram. */
@media (max-width:800px){.service-flow{gap:46px}
.service-flow__steps{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:12px}
.service-flow__steps > li:not(:last-child)::after{content:"↓";top:auto;right:auto;bottom:-22px;left:calc(50% - 9px);font-size:21px}
.service-flow__heading{flex-wrap:wrap;min-height:0;padding:10px 12px}
.service-flow__heading h3{font-size:20px}
.service-flow__heading p{flex-basis:100%;margin-left:50px;text-align:left;font-size:12px}
.service-flow__step-head{min-height:50px;padding:8px 12px}
.service-flow__step-head h4{font-size:17px}
.service-flow__lead{padding:9px 12px 1px;font-size:13px}
.service-flow__tasks{padding:5px 13px 9px}
.service-flow__tasks li{min-height:36px;padding:4px 2px;font-size:13px}
.service-flow__tasks svg{width:24px;height:24px}}
/* 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. */
#service .phead .tiles{gap:14px}
#service .phead .tile{min-height:196px;padding:20px 18px 18px;gap:9px}
#service .phead .tile-title{display:block;min-height:2.9em;font-size:17px;line-height:1.45}
#service .phead .tile-btn{width:100%;min-height:46px;white-space:nowrap}
/* 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. */
/* 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. */
#service .service-overview{padding-bottom:48px}
@media (max-width:767px){#service .service-overview{padding-bottom:44px}}
/* 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}