/* ===== トークン（指定色） ===== */
: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)}
/* ===== ボタン ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:4px;font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1.3;text-decoration:none;border:1.5px solid var(--teal-deep);cursor:pointer;transition:background .15s,color .15s}
.btn--fill{background:var(--teal-deep);color:#fff}
.btn--fill:hover{background:#125A60}
.btn--line{background:#fff;color:var(--teal-deep)}
.btn--line:hover{background:var(--mist)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn svg{width:14px;height:14px;flex:none}
/* ===== 下書きの印 ===== */
/* ===== ヘッダー ===== */
/* ===== ページ頭 ===== */
.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}
/* ===== 理由へのアンカー ===== */
/* ===== 選ばれる理由（左右交互） ===== */
/* 図1: 見る数字の範囲 */
/* 図2: 初期戦略設計の入口と出口 */
/* 図3: 勤務地周辺への配信 */
/* 図4: 公式LINEの流れ */
/* 図5: 投稿データ */
/* ===== 一般的な運用代行との違い ===== */
/* ===== 向いている／向いていない ===== */
/* ===== 次に読むページ ===== */
/* ===== サービス内容・支援の流れ ===== */
/* ===== よくある質問（一覧） ===== */
.faq-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.faq-nav{position:sticky;top:calc(64px + env(safe-area-inset-top,0px) + 16px);display:grid;gap:2px}
.faq-nav a{display:block;padding:7px 12px;font-size:13px;color:var(--ink-2);text-decoration:none;border-left:2px solid var(--line);line-height:1.5}
.faq-nav a:hover{color:var(--teal-deep);border-left-color:var(--teal)}
.faq-nav a small{color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
.faq-cat{margin-bottom:44px}
.faq-cat h2{font-size:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);margin-bottom:4px}
.qa{padding:18px 0;border-bottom:1px solid var(--line)}
.qa-q{display:grid;grid-template-columns:26px 1fr;gap:10px;font-weight:700;font-size:15.5px;line-height:1.6;font-family:var(--font-head);font-feature-settings:"palt"}
.qa-q::before{content:"Q";font-weight:900;color:var(--teal);font-size:16px}
.qa-a{display:grid;grid-template-columns:26px 1fr;gap:10px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.qa-a::before{content:"A";font-family:var(--font-head);font-weight:900;color:var(--teal-deep);font-size:16px;line-height:1.6}
.qa-a p + p{margin-top:8px}
@media (max-width:860px){.faq-layout{grid-template-columns:1fr;gap:16px}
.faq-nav{position:static;display:flex;flex-wrap:wrap;gap:6px}
.faq-nav a{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;background:#fff}
.faq-nav a small{display:none}}
/* ===== スマホのヘッダー（折り返し防止） ===== */
.btn{white-space:nowrap}
/* =====================================================================
   v2（2026-09-25）: カード・アイコン・角丸を減らし、図を画面風に。
   base / extra の後に読ませて上書きする
   ===================================================================== */
:root{--radius:0}
.btn, .tile, .tile-btn{border-radius:0}
/* 見出し: 左揃え・縦線。中央揃えは .sec-head--c だけ */
/* 数字の帯: 点をやめて縦線で区切る */
/* タイル: 枠なし・角なし（アイコンは HTML から外した） */
.tile{border:0;background:var(--mist)}
.tile:hover{background:#DDF0F1}
/* 理由へのアンカー: ピルをやめて縦線区切りの文字列 */
/* 理由の図: 箱をやめる */
/* 図1: 見る数字（箱 → 下線つきの並び） */
/* 図2: 入口と出口（塗りをやめて罫線） */
/* 図3: 広告の配信設定（画面風） */
/* 図4: 公式LINE（スマホ画面風） */
/* 図5: 投稿データ（数字＋扱う内容の一覧） */
/* 違いの表・向き不向き・次に読む: 箱をやめる */
/* サービス内容: 工程を罫線で並べる（丸数字をやめる） */
/* 料金: 対応範囲の図とオプション・導入の流れの箱をやめる */
/* よくある質問: スマホの目次をチップから 2 列の一覧に */
@media (max-width:860px){.faq-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.faq-nav a{border:0;border-radius:0;border-top:1px solid var(--line);padding:8px 0;background:none;font-size:13px}}
/* 向いている企業の印: チェック丸をやめて小さな点に */
/* 番号付きリスト（導入の流れ・工程）: ブラウザ既定の「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・影あり */
.btn{border-radius:10px;border:0;font-family:var(--font-body);font-weight:700;font-size:16px;min-height:48px;padding:12px 24px;box-shadow:0 3px 3px rgba(0,0,0,.15);transition:transform .3s ease;line-height:1.2}
.btn:hover{transform:translateY(-2px)}
.btn--fill{background:var(--orange);color:#fff}
.btn--fill:hover{background:var(--orange)}
.btn--line{background:#fff;color:var(--orange);border:2px solid var(--orange)}
.btn--line:hover{background:#fff}
/* ヘッダー: ロゴ左・メニュー右・影。文字は 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}
/* 理由へのアンカー: ティール枠の丸いチップ */
/* 選ばれる理由 */
/* 違いの表: 料金表と同じ、ティールの罫線と帯 */
/* 向いている企業: ティール枠のカード＋チェック。おすすめしない側は灰色の枠＋バツ */
/* 次に読む */
/* サービス内容: 工程はティール枠のカード＋番号の丸 */
/* 料金: 対応範囲の図 */
/* 料金: プランのカード（おすすめは橙） */
/* 料金: 比較表（列の見出しはティールの帯・項目名は薄いティール） */
/* 料金: オプション */
/* 料金: 導入の流れ（本番の「ご利用の流れ」と同じ、縦に並ぶカードと矢印） */
/* よくある質問: Q はティールの帯・答えは枠の中（開閉式）。料金ページの抜粋も同じ */
.qa{border:2px solid var(--teal);border-radius:10px;margin-top:18px;background:#fff;padding:0}
.qa summary{list-style:none;display:flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border-radius:5px 5px 2px 2px;padding:12px 20px;min-height:64px;font-weight:700;font-size:16px;line-height:1.5;letter-spacing:.05em;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa-q{display:flex;gap:10px;align-items:center;margin-right:auto;font-family:var(--font-body);font-size:16px;color:#fff;font-feature-settings:normal;line-height:1.5}
.qa-q::before{content:"Q";font-size:24px;font-weight:700;color:#fff;line-height:1}
.qa .tg{width:20px;height:20px;margin:0;flex:none;position:relative}
.qa .tg::before, .qa .tg::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff}
.qa .tg::before{width:20px;height:3px}
.qa .tg::after{width:3px;height:20px;transition:transform .3s ease}
.qa-a{display:block;padding:30px 20px;font-size:15px;line-height:1.7;letter-spacing:.05em;color:#333;margin-top:0}
.qa-a::before{display:none}
.qa-a p + p{margin-top:14px}
.qa-a strong{font-weight:700}
.faq-layout{grid-template-columns:240px 1fr;gap:40px}
.faq-nav{top:calc(60px + env(safe-area-inset-top,0px) + 16px)}
.faq-nav a{font-size:14px;color:#333;border-left:2px solid var(--line);padding:7px 12px;line-height:1.5}
.faq-nav a:hover{color:var(--teal);border-left-color:var(--teal)}
.faq-nav a small{color:#555}
.faq-cat{margin-bottom:48px}
.faq-cat h2{font-family:var(--font-head);font-weight:700;font-size:24px;color:var(--teal);border-bottom:0;padding-bottom:0;margin-bottom:0;letter-spacing:.05em}
@media (max-width:860px){.faq-nav a{border:0;border-top:1px solid var(--line);font-size:14px}}
/* 共通 CTA: ティールの帯に白い箱、橙のボタン 2 つ */
.cta-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
/* フッター: 薄いティール・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 のスマホ用を上書きしていた） */
@media (max-width:860px){.faq-layout{grid-template-columns:1fr;gap:24px}
.faq-nav{position:static}}
/* ===== 導入事例（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ボタンに統一。 */
.cta-buttons{display:flex;align-items:center;justify-content:center;gap:15px}
.cta-buttons .btn{width:380px;max-width:100%;min-height:72px;padding:18px 48px 18px 18px;font-size:20px;line-height:1.2;position:relative}
.cta-buttons .btn--line{border:2px solid #fb8b18}
.cta-buttons .btn--fill{border:2px solid #fb8b18}
.cta-buttons .btn::after{content:"";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;background-repeat:no-repeat;background-position:center;background-size:contain}
.cta-buttons .btn--line::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb8b18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='17' height='14' rx='2'/%3E%3Cpath d='m3 6 7.5 6L18 6M18 20h4m-2-2v4'/%3E%3C/svg%3E")}
.cta-buttons .btn--fill::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v14m-5-5 5 5 5-5M4 20h16'/%3E%3C/svg%3E")}
/* 表や長文の幅が画面全体を押し広げないようにする。 */
.page, .sec, .wrap, .faq-layout{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}
.cta-buttons{flex-direction:column;gap:20px}
.cta-buttons .btn{width:min(315px,100%);min-height:64px;font-size:18px}}
@media (max-width:480px){.tiles{grid-template-columns:minmax(0,1fr)}
.tile{gap:6px}
.cta-buttons .btn{font-size:clamp(15px,4.3vw,18px);padding-left:12px;padding-right:40px}
.cta-buttons .btn::after{right:12px}}
/* 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. */
/* 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. */
#faq .faq-side{position:sticky;top:calc(60px + env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;min-width:0;max-height:calc(100dvh - 92px)}
#faq .faq-side .faq-nav{position:static;top:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#faq .faq-side-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;flex:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
#faq .faq-side-cta .btn{width:100%;min-height:58px;padding:10px 34px 10px 10px;border-radius:8px;font-size:13px;line-height:1.35;text-align:center;white-space:normal;box-shadow:0 3px 3px rgba(0,0,0,.15)}
#faq .faq-side-cta .btn::after{right:10px;width:18px;height:18px}
@media (max-width:860px){#faq .faq-side{position:static;max-height:none;display:block}
#faq .faq-side .faq-nav{overflow:visible}
#faq .faq-side-cta{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;padding-top:18px}
#faq .faq-side-cta .btn{width:100%;min-height:62px;font-size:14px}}
@media (max-width:560px){#faq .faq-side-cta{grid-template-columns:minmax(0,1fr)}
#faq .faq-side-cta .btn{min-height:54px;font-size:15px}}
: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}