/* ===== トークン（指定色） ===== */
: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}}
/* ===== 支援範囲の帯（プランの構造図） ===== */
/* ===== プランのカード ===== */
/* ===== 支援内容の比較表 ===== */
.off{display:inline-block;width:12px;height:2px;background:var(--line);vertical-align:middle}
/* ===== オプション ===== */
.opt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;display:grid;gap:12px}
.opt h3{font-size:19px;line-height:1.4}
/* ===== 料金のしくみ ===== */
/* ===== 原稿待ちの枠 ===== */
/* ===== 導入の流れ ===== */
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;right:-11px;top:30px;border:6px solid transparent;border-left-color:var(--teal-light)}
.step h3{font-size:16px;margin-top:6px;line-height:1.4}
.step p{margin-top:10px;font-size:13px;color:var(--ink-2)}
@media (max-width:1000px){.step:not(:last-child)::after{display:none}}
/* ===== よくある質問 ===== */
.faq{max-width:840px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:16px 4px;font-weight:700;font-size:15px;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.faq .q{font-family:var(--font-head);font-weight:900;color:var(--teal);font-size:15px;line-height:1.6}
.faq .tg{width:22px;height:22px;position:relative;flex:none;margin-top:3px}
.faq .tg::before, .faq .tg::after{content:"";position:absolute;background:var(--teal-deep);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq .tg::before{width:12px;height:2px}
.faq .tg::after{width:2px;height:12px;transition:transform .15s}
.faq details[open] .tg::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .a{padding:0 40px 18px 34px;font-size:14px;color:var(--ink-2)}
.faq .a p + p{margin-top:8px}
@media (max-width:560px){.faq .a{padding-right:8px}}
/* ===== CTA ===== */
/* ===== フッター ===== */
/* ===== ページ切替（1ファイルで4ページ。実装時は1ページ1ファイルに分ける） ===== */
.page{display:none}
.page.is-active{display:block}
[id]{scroll-margin-top:84px}
/* ===== 理由へのアンカー ===== */
/* ===== 選ばれる理由（左右交互） ===== */
/* 図1: 見る数字の範囲 */
/* 図2: 初期戦略設計の入口と出口 */
/* 図3: 勤務地周辺への配信 */
/* 図4: 公式LINEの流れ */
/* 図5: 投稿データ */
/* ===== 一般的な運用代行との違い ===== */
/* ===== 向いている／向いていない ===== */
/* ===== 次に読むページ ===== */
/* ===== サービス内容・支援の流れ ===== */
.steps{display:grid;gap:10px;counter-reset:s}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--font-head);font-weight:900;color:#fff;background:var(--teal);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-top:1px}
.steps b{display:block;font-family:var(--font-head);font-size:15px;font-feature-settings:"palt";line-height:1.5}
.steps p{margin-top:4px;font-size:13px;color:var(--ink-2)}
.tag{display:inline-block;font-size:11px;color:var(--teal-deep);background:var(--mist);padding:0 8px;border-radius:999px;margin-left:6px;vertical-align:middle;font-weight:700;font-family:var(--font-body)}
.aside{margin-top:18px;background:var(--mist-2);border-left:3px solid var(--teal);padding:14px 16px;font-size:13px;color:var(--ink-2)}
.aside b{display:block;color:var(--ink);font-family:var(--font-head);margin-bottom:4px;font-size:14px}
.aside li{display:flex;gap:6px;padding:2px 0;line-height:1.7}
.aside li::before{content:"・";flex:none}
/* ===== よくある質問（一覧） ===== */
.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, .aside{border-radius:0}
.tag{background:none;border:1px solid var(--teal-light);border-radius:0;padding:0 6px;font-size:10.5px;line-height:1.6}
/* 見出し: 左揃え・縦線。中央揃えは .sec-head--c だけ */
/* 数字の帯: 点をやめて縦線で区切る */
/* タイル: 枠なし・角なし（アイコンは HTML から外した） */
.tile{border:0;background:var(--mist)}
.tile:hover{background:#DDF0F1}
/* 理由へのアンカー: ピルをやめて縦線区切りの文字列 */
/* 理由の図: 箱をやめる */
/* 図1: 見る数字（箱 → 下線つきの並び） */
/* 図2: 入口と出口（塗りをやめて罫線） */
/* 図3: 広告の配信設定（画面風） */
/* 図4: 公式LINE（スマホ画面風） */
.phone{max-width:300px;border:1px solid var(--line);background:#fff}
.msg{max-width:86%;padding:8px 11px;font-size:12px;line-height:1.6;border-radius:12px}
/* 図5: 投稿データ（数字＋扱う内容の一覧） */
.data{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
@media (max-width:480px){.data{grid-template-columns:1fr;gap:16px}}
/* 違いの表・向き不向き・次に読む: 箱をやめる */
/* サービス内容: 工程を罫線で並べる（丸数字をやめる） */
.steps{gap:0}
.steps li{border:0;border-radius:0;border-top:1px solid var(--line);padding:16px 0;background:none;grid-template-columns:34px 1fr}
.steps li::before{content:"0" counter(s);background:none;color:var(--teal-deep);width:auto;height:auto;border-radius:0;display:block;font-size:13px;letter-spacing:.06em;margin-top:4px}
.steps li:last-child{border-bottom:1px solid var(--line)}
.aside{background:none;border-left:2px solid var(--teal);padding:4px 0 4px 16px}
/* 料金: 対応範囲の図とオプション・導入の流れの箱をやめる */
.opt{border:0;padding:0;background:none}
.opt + .opt{border-left:1px solid var(--line);padding-left:40px}
@media (max-width:760px){.opt + .opt{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}}
.step{border:0;border-top:2px solid var(--line);border-radius:0;padding:14px 8px 0 0;background:none}
.step:not(:last-child)::after{display:none}
@media (max-width:1000px){.step{border-top:1px solid var(--line);padding:14px 0}
.step:last-child{border-bottom:1px solid var(--line)}}
/* よくある質問: スマホの目次をチップから 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.」を出さない（番号は自前で描く） */
.steps{list-style:none;margin:0;padding:0}
/* =====================================================================
   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}
/* 理由へのアンカー: ティール枠の丸いチップ */
/* 選ばれる理由 */
.phone{border:2px solid var(--teal);border-radius:10px;overflow:hidden}
/* 違いの表: 料金表と同じ、ティールの罫線と帯 */
/* 向いている企業: ティール枠のカード＋チェック。おすすめしない側は灰色の枠＋バツ */
/* 次に読む */
/* サービス内容: 工程はティール枠のカード＋番号の丸 */
.steps{gap:14px}
.steps li{border:2px solid var(--teal);border-radius:10px;background:#fff;padding:16px 18px 14px;grid-template-columns:36px 1fr;gap:12px}
.steps li:last-child{border-bottom:2px solid var(--teal)}
.steps li::before{content:counter(s,decimal-leading-zero);width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:0;margin-top:0}
.steps b{font-family:var(--font-body);font-size:16px;font-feature-settings:normal}
.steps p{font-size:14px;line-height:1.6;color:#333;margin-top:6px}
.tag{border:0;background:none;color:var(--orange);font-weight:700;font-size:12px;padding:0}
.aside{border:2px solid var(--teal);border-radius:10px;background:var(--warm);padding:16px 20px;font-size:15px;color:#333}
.aside b{font-family:var(--font-body);font-size:16px}
/* 料金: 対応範囲の図 */
/* 料金: プランのカード（おすすめは橙） */
/* 料金: 比較表（列の見出しはティールの帯・項目名は薄いティール） */
/* 料金: オプション */
.opt{border:2px solid var(--teal);border-radius:10px;background:#fff;padding:24px 22px;gap:12px}
.opt + .opt{border-left:2px solid var(--teal);padding-left:22px}
.opt h3{font-family:var(--font-head);font-size:22px;color:#333}
@media (max-width:760px){.opt + .opt{border:2px solid var(--teal);padding:24px 22px}}
/* 料金: 導入の流れ（本番の「ご利用の流れ」と同じ、縦に並ぶカードと矢印） */
.step{display:grid;grid-template-columns:150px 1fr;gap:16px;border:2px solid var(--teal);border-radius:0;background:#fff;padding:0 20px 0 0;position:relative}
.step:last-child{border-bottom:2px solid var(--teal)}
.step:not(:last-child)::after{content:"";display:block;position:absolute;left:50%;bottom:-19px;top:auto;right:auto;transform:translateX(-50%);border:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:17px solid var(--teal)}
.step h3{font-size:24px;margin-top:0;line-height:1.4;font-family:var(--font-body)}
.step p{margin-top:10px;padding-top:8px;border-top:1px dashed var(--teal);font-size:20px;line-height:1.6;color:#333}
@media (max-width:1000px){.step{border:2px solid var(--teal);padding:0 16px 0 0;grid-template-columns:96px 1fr}
.step:last-child{border-bottom:2px solid var(--teal)}
.step:not(:last-child)::after{display:block}
.step h3{font-size:20px}
.step p{font-size:15px}}
/* よくある質問: Q はティールの帯・答えは枠の中（開閉式）。料金ページの抜粋も同じ */
.faq{max-width:none;border-top:0}
.faq details, .qa{border:2px solid var(--teal);border-radius:10px;margin-top:18px;background:#fff;padding:0}
.faq summary, .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}
.faq summary::-webkit-details-marker, .qa summary::-webkit-details-marker{display:none}
.faq .q{color:#fff;font-family:var(--font-body);font-weight:700;font-size:24px;line-height:1;margin-right:2px}
.faq summary > span:nth-child(2){margin-right:auto}
.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}
.faq .tg, .qa .tg{width:20px;height:20px;margin:0;flex:none;position:relative}
.faq .tg::before, .faq .tg::after, .qa .tg::before, .qa .tg::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff}
.faq .tg::before, .qa .tg::before{width:20px;height:3px}
.faq .tg::after, .qa .tg::after{width:3px;height:20px;transition:transform .3s ease}
.faq details[open] .tg::after,.qa[open] .tg::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq .a, .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}
.faq .a p + p, .qa-a p + p{margin-top:14px}
.faq .a strong, .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プランを同じ配色にして、支援範囲だけを比較しやすくする */
.off{width:12px;height:2px;background:var(--gray)}
/* 共通 CTA の中身（base の .cta h2 / .cta-box を上書き） */
/* 導入の流れ: 番号の箱を左に縦いっぱい、右に題名・期間・本文（本番と同じ並び） */
.step{grid-template-rows:auto auto 1fr;align-items:start}
.step > :not(.step-no){grid-column:2}
.step h3{padding-top:20px}
.step p:last-child{padding-bottom:20px}
@media (max-width:1000px){.step h3{padding-top:14px}
.step p:last-child{padding-bottom:14px}}
/* プランの箇条書き: 丸なしのチェック（本番と同じ 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. */
.opt{display:flex;flex-direction:column}
/* 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. */
#options .wrap{max-width:var(--max);padding-inline:var(--gutter)}
#options .opt, #options .opt+.opt{display:flex;flex-direction:column;min-width:0;gap:0;padding:26px 26px 24px;border:2px solid #279bab;border-radius:12px;background:#fff}
#options .opt h3{margin-top:15px;font-size:clamp(21px,2vw,25px);line-height:1.35}
@media (max-width:760px){#options .opt, #options .opt+.opt{padding:23px 21px 22px}
#options .opt h3{margin-top:14px;font-size:22px}}
/* Plan guide: every question, branch and explanation exists in the initial HTML. */
.plan-finder{background:#fff}
.plan-flow__steps{max-width:1000px;margin:32px auto 0}
.plan-flow__step{position:relative;margin:0 0 32px;padding:22px 24px 24px;border:1.5px solid #a8dce1;border-radius:12px;background:#fbfefe;scroll-margin-top:84px}
.plan-flow__step:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);color:#178e9c;font-size:24px;font-weight:700;line-height:32px}
.plan-flow__step.is-current{border-color:#198f9c;box-shadow:0 0 0 3px #d9f3f5}
.plan-finder.is-interactive .plan-flow__step::after{display:none}
.plan-flow__answer{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"num label";align-content:center;align-items:center;column-gap:12px;width:100%;min-height:92px;padding:18px;border:1px solid #bcdfe4;border-radius:12px;background:linear-gradient(145deg,#fff 70%,#f2fafb);box-shadow:0 5px 16px rgba(24,84,95,.09),inset 0 1px #fff;color:#1b2527;font:inherit;line-height:1.5;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.plan-flow__answer:hover,.plan-flow__answer[aria-pressed="true"]{transform:translateY(-3px);border-color:#1a9eac;background:#fff;box-shadow:0 12px 24px rgba(24,84,95,.15)}
.plan-flow__answer:active{transform:translateY(-1px)}
.plan-flow__answer:focus-visible, .plan-flow__restart:focus-visible{outline:3px solid #ff9c48;outline-offset:2px}
.plan-flow__answer>span:nth-child(2){grid-area:label;min-width:0;padding-top:3px;color:#173642;font-size:17px;font-weight:700;line-height:1.45}
.plan-flow__restart{display:none;align-items:center;min-height:44px;margin-top:18px;padding:7px 4px;border:0;background:transparent;color:#0d7987;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.plan-finder.is-interactive .plan-flow__restart{display:inline-flex}
.plan-flow__restart:hover{text-decoration:underline}
.plan-flow__results{max-width:1120px;margin:10px auto 0;padding:10px 0 0;scroll-margin-top:84px}
.plan-flow__results h3{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 0 16px;color:#183149;font-size:clamp(32px,4vw,48px);line-height:1.3;text-align:center;letter-spacing:.07em}
.plan-flow__results h3::before, .plan-flow__results h3::after{content:"";width:72px;height:1px;background:#9ab4bd}
.plan-finder.is-interactive .plan-flow__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.plan-flow__status{margin:4px 0 16px;color:#52666e;font-size:13px}
@media (max-width:640px){#plan-finder h2{font-size:clamp(23px,7vw,28px);white-space:nowrap}
.plan-flow__steps{margin-top:24px}
.plan-flow__step{padding:17px 15px 18px}
.plan-flow__answer{grid-template-columns:30px minmax(0,1fr);min-height:78px;padding:14px 13px}
.plan-flow__answer>span:nth-child(2){padding-top:2px;font-size:15px}
.plan-flow__results{padding-top:8px}
.plan-flow__results h3{margin-bottom:14px;font-size:31px}}
@media (prefers-reduced-motion:reduce){.plan-flow__answer{transition:none}}
/* Shared layout for all three recruitment case studies. */
#cases .wrap{max-width:var(--max)}
#results .cases{display:grid;gap:38px}
@media (max-width:600px){#results .cases{gap:26px}}
/* Responsive readability fixes found in the 320–1920px page audit. */
@media (max-width:360px){#options .opt h3{font-size:19px}}
/* Pricing details and restrained competitor comparison. */
.kanal-lf{
  --klf-accent: #fb8b18;
  --klf-accent-hover: #e27912;
  --klf-text: #333;
  --klf-border: #c5c5c5;
  max-width: 560px;
  margin: 0 auto;
  font-family: inherit;
  color: var(--klf-text);
  line-height: 1.7;
  text-align: left;
}
.kanal-lf *{ box-sizing: border-box; }
.kanal-lf .klf-title{ text-align: center; font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; }
.kanal-lf .klf-lead{ text-align: center; font-size: .9rem; margin: 0 0 16px; white-space: pre-line; }
.kanal-lf .klf-label{ display: block; margin: 14px 0 4px; font-size: .92rem; font-weight: 700; }
.kanal-lf .klf-req{ display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 4px;
  background: var(--klf-accent); color: #fff; font-size: .7rem; font-weight: 700; vertical-align: 1px; }
.kanal-lf .klf-opt{ display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 4px;
  background: #e5e5e5; color: #555; font-size: .7rem; font-weight: 700; vertical-align: 1px; }
.kanal-lf .klf-input, .kanal-lf .klf-textarea{
  width: 100%; font: inherit; padding: 11px 12px;
  border: 1px solid var(--klf-border); border-radius: 8px; background: #fff; color: inherit; }
.kanal-lf select.klf-input{ height: auto; }
.kanal-lf .klf-textarea{ min-height: 90px; resize: vertical; }
.kanal-lf .klf-consent{ font-size: .85rem; margin: 16px 0 12px; text-align: center; }
.kanal-lf .klf-consent input{ margin-right: 6px; }
.kanal-lf .klf-btn{ display: block; width: 100%; font: inherit; font-size: 1.05rem; font-weight: 700;
  color: #fff; background: var(--klf-accent); border: none; border-radius: 10px; padding: 15px; cursor: pointer; }
.kanal-lf .klf-btn:hover{ background: var(--klf-accent-hover); }
.kanal-lf .klf-btn:disabled{ opacity: .55; cursor: default; }
.kanal-lf .klf-err{ color: #dc2626; font-weight: 700; margin-top: 12px; text-align: center; }
.kanal-lf .klf-done{ text-align: center; padding: 24px 8px; }
.kanal-lf .klf-done-title{ font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.kanal-lf .klf-hp{ position: absolute; left: -9999px; top: -9999px; }
.kanal-lf .klf-loading{
  color: #666;
  text-align: center;
  padding-block: 24px;
}
.contact .kanal-lf .klf-label{
  font-size: 16px;
  margin-top: 18px;
}
.contact .kanal-lf .klf-input, .contact .kanal-lf .klf-textarea{
  min-height: 49px;
  border-radius: 5px;
}
.contact .kanal-lf .klf-input::placeholder, .contact .kanal-lf .klf-textarea::placeholder{
  color: #999;
}
.contact .kanal-lf .klf-consent{
  margin-top: 32px;
}
.contact .kanal-lf .klf-consent a{
  color: blue;
  text-decoration: underline;
}
.contact .kanal-lf .klf-btn{
  width: min(100%, 380px);
  min-height: 64px;
  margin-inline: auto;
  box-shadow: 0 3px 3px rgb(0 0 0 / 15%);
}
@media (min-width: 1040px){.contact .kanal-lf .klf-label{
    font-size: 20px;
  }}
.kcm[hidden]{ display: none !important; }
.kcm{
  --kcm-teal: #0d9488; --kcm-teal-dark: #0f766e; --kcm-teal-bg: #e6f7f5; --kcm-teal-border: #b9e5e0;
  --kcm-text: #334155; --kcm-sub: #64748b; --kcm-faint: #94a3b8;
  --kcm-bg: #f5f7f7; --kcm-surface: #ffffff; --kcm-border: #e2e8f0;
  --kcm-danger: #dc2626; --kcm-badge-bg: #fde8e8;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 24px 12px;
  background: rgba(15, 23, 42, .55); color: var(--kcm-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px; line-height: 1.7; text-align: left; letter-spacing: normal;
}
.kcm *, .kcm *::before, .kcm *::after{ box-sizing: border-box; }
.kcm .kcm-panel{
  position: relative; width: 100%; max-width: 860px; max-height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--kcm-surface); border-radius: 14px; padding: 26px 24px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
@media (max-width: 560px){.kcm{ padding: 0; align-items: stretch; }
.kcm .kcm-panel{ max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 18px 14px 28px; }}
/* 閉じるボタンは下へスクロールしても上に残す（スマホは全画面なので、これが無いと閉じ方が分からない） */
.kcm .kcm-x{
  position: sticky; top: 0; float: right; z-index: 2; margin: -12px -10px 0 8px;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
  background: var(--kcm-surface); color: var(--kcm-sub); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.kcm .kcm-x:hover{ background: var(--kcm-bg); color: var(--kcm-text); }
.kcm .kcm-title{ font-size: 1.3rem; font-weight: 700; line-height: 1.5; margin: 0 0 10px; color: var(--kcm-text); }
.kcm .kcm-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kcm .kcm-tag{
  padding: 2px 12px; border-radius: 999px; border: 1px solid var(--kcm-teal-border);
  background: var(--kcm-teal-bg); color: var(--kcm-teal-dark); font-size: .82rem; font-weight: 700;
}
.kcm .kcm-learn{ background: var(--kcm-bg); border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; }
.kcm .kcm-learn-title{ font-weight: 700; margin: 0 0 4px; }
.kcm .kcm-learn-item{ position: relative; padding-left: 28px; margin: 6px 0 0; }
.kcm .kcm-learn-item::before{
  content: "✓"; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--kcm-teal); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
}
/* --- 予約（booking-wakatte.html と同じ見た目。3ステップタブ / 週送りグリッド） --- */
.kcm .steps{ display: flex; gap: 6px; margin: 0 0 18px; clear: both; }
.kcm .step{
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 4px; border: 1px solid var(--kcm-border); border-radius: 999px;
  font-size: .85rem; color: var(--kcm-faint); background: var(--kcm-surface); white-space: nowrap;
}
.kcm .step .num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: .75rem; font-weight: 700;
  background: var(--kcm-border); color: var(--kcm-surface);
}
.kcm .step.active{ background: var(--kcm-teal-bg); border-color: var(--kcm-teal-border); color: var(--kcm-teal-dark); font-weight: 700; }
.kcm .step.active .num{ background: var(--kcm-teal); }
.kcm .step.done .num{ background: var(--kcm-faint); }
@media (max-width: 560px){.kcm .step{ font-size: .72rem; gap: 4px; }}
.kcm .pick-title{ font-weight: 700; margin: 0 0 10px; }
.kcm .cal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.kcm .cal-month{ font-weight: 700; }
.kcm .tz{ font-size: .78rem; color: var(--kcm-faint); }
.kcm .nav-btn{
  font: inherit; font-size: .85rem; padding: 6px 16px; border-radius: 8px; margin: 0;
  border: 1px solid var(--kcm-border); background: var(--kcm-surface); color: var(--kcm-teal-dark); cursor: pointer;
}
.kcm .nav-btn:hover:not(:disabled){ border-color: var(--kcm-teal); }
.kcm .nav-btn:disabled{ color: var(--kcm-faint); cursor: default; opacity: .5; }
.kcm .grid-scroll{ overflow-x: auto; }
@media (max-width: 560px){.kcm .cal-head{ display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 4px; }
.kcm .cal-head .nav-btn{ padding: 6px 2px; }}
@media (max-width: 360px){.kcm .kcm-learn-item{ font-size: 15px; }
.kcm .step{ padding-inline: 2px; }
.kcm .step .num{ display: none; }}
.kcm .grid{ display: grid; grid-template-columns: 48px repeat(7, minmax(74px, 1fr)); min-width: 620px; }
.kcm .mobile-schedule{ display: none; }
@media (max-width: 767px){.kcm .grid-scroll{ overflow-x: visible; }
.kcm .grid{ display: none; }
.kcm .mobile-schedule{ display: block; }
.kcm .mobile-dates{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; }
.kcm .mobile-date{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; min-height: 54px; padding: 5px 2px; margin: 0; border: 1px solid var(--kcm-border);
    border-radius: 8px; background: var(--kcm-surface); color: var(--kcm-text);
    font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.3; cursor: pointer;
  }
.kcm .mobile-date[aria-pressed="true"]{ border-color: var(--kcm-teal); background: var(--kcm-teal-bg); color: var(--kcm-teal-dark); }
.kcm .mobile-date:disabled{ color: var(--kcm-faint); background: var(--kcm-bg); cursor: default; }
.kcm .mobile-weekday{ font-size: .72rem; font-weight: 400; }
.kcm .mobile-date.sat .mobile-weekday{ color: #2563eb; }
.kcm .mobile-date.sun .mobile-weekday{ color: var(--kcm-danger); }
.kcm .mobile-times{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kcm .mobile-time{
    min-width: 0; min-height: 43px; padding: 7px 4px; margin: 0; border: 1px solid var(--kcm-teal-border);
    border-radius: 8px; background: var(--kcm-surface); color: var(--kcm-teal-dark);
    font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  }
.kcm .mobile-time:hover{ border-color: var(--kcm-teal); background: var(--kcm-teal-bg); }
.kcm .mobile-no-times{ grid-column: 1 / -1; margin: 0; padding: 16px 0; color: var(--kcm-sub); text-align: center; }}
@media (min-width: 561px) and (max-width: 767px){.kcm .mobile-dates{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kcm .mobile-times{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}
.kcm .g-corner{ border-bottom: 2px solid var(--kcm-border); }
.kcm .g-day{ text-align: center; padding: 6px 2px 8px; border-bottom: 2px solid var(--kcm-border); }
.kcm .g-day .d-num{ font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.kcm .g-day .d-dow{ font-size: .72rem; color: var(--kcm-sub); }
.kcm .g-day.sat .d-dow{ color: #2563eb; }
.kcm .g-day.sun .d-dow{ color: var(--kcm-danger); }
.kcm .g-time{ font-size: .72rem; color: var(--kcm-faint); text-align: right; padding: 10px 8px 0 0; border-right: 1px solid var(--kcm-border); }
.kcm .g-cell{ padding: 3px; min-height: 40px; }
.kcm .chip{
  display: block; width: 100%; font: inherit; font-size: .74rem; font-weight: 600; margin: 0;
  padding: 8px 2px; border-radius: 8px; border: 1px solid var(--kcm-teal-border);
  background: var(--kcm-surface); color: var(--kcm-teal-dark); cursor: pointer; text-align: center; white-space: nowrap;
}
.kcm .chip:hover{ background: var(--kcm-teal-bg); border-color: var(--kcm-teal); }
.kcm .picked{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--kcm-bg); border-radius: 10px; padding: 14px 16px; margin-bottom: 6px;
}
.kcm .picked .p-label{ font-size: .78rem; color: var(--kcm-sub); }
.kcm .picked .p-when{ font-size: 1.05rem; font-weight: 700; }
.kcm .picked .p-tz{ font-size: .74rem; color: var(--kcm-faint); }
.kcm .btn-back{
  font: inherit; font-size: .85rem; padding: 9px 16px; border-radius: 8px; margin: 0;
  border: 1px solid var(--kcm-teal); background: var(--kcm-surface); color: var(--kcm-teal-dark); font-weight: 700; cursor: pointer;
}
.kcm .btn-back:hover{ background: var(--kcm-teal-bg); }
.kcm .f-label{ display: block; margin: 16px 0 4px; font-size: .9rem; font-weight: 700; color: var(--kcm-text); }
.kcm .req{
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px;
  background: var(--kcm-badge-bg); color: var(--kcm-danger); font-size: .7rem; font-weight: 700; vertical-align: 1px;
}
.kcm .f-input{
  display: block; width: 100%; height: auto; font: inherit; padding: 11px 12px; border: 1px solid var(--kcm-border);
  border-radius: 8px; background: var(--kcm-surface); color: var(--kcm-text); margin: 0; box-shadow: none;
}
.kcm .f-input:focus{ outline: 2px solid var(--kcm-teal-border); border-color: var(--kcm-teal); }
.kcm textarea.f-input{ min-height: 90px; resize: vertical; }
.kcm select.f-input{ min-height: 44px; }
.kcm .consent{ text-align: center; font-size: .82rem; color: var(--kcm-sub); margin: 22px 0 12px; }
.kcm .btn-book{
  display: block; margin: 0 auto; min-width: 320px; max-width: 100%;
  font: inherit; font-size: 1rem; font-weight: 700; color: #fff;
  background: var(--kcm-teal); border: none; border-radius: 10px; padding: 15px 28px; cursor: pointer;
}
.kcm .btn-book:hover{ background: var(--kcm-teal-dark); }
.kcm .btn-book:disabled{ opacity: .55; cursor: default; }
@media (max-width: 560px){.kcm .btn-book{ min-width: 100%; }}
.kcm .bk-note{ font-size: .8rem; color: var(--kcm-faint); margin: 12px 0 0; }
.kcm .err{ color: var(--kcm-danger); font-weight: 700; margin-top: 12px; text-align: center; }
.kcm .loading{ color: var(--kcm-faint); padding: 24px 0; text-align: center; }
.kcm .empty{ color: var(--kcm-sub); padding: 24px 0; text-align: center; }
.kcm .done-box{ text-align: center; padding: 12px 0 4px; }
.kcm .done-check{
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--kcm-teal-bg);
  color: var(--kcm-teal); font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.kcm .done-title{ font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; }
.kcm .done-when{ display: inline-block; background: var(--kcm-bg); border-radius: 10px; padding: 12px 22px; font-weight: 700; margin-bottom: 14px; }
.kcm .done-meet a{ word-break: break-all; color: var(--kcm-teal-dark); }
.kcm .done-box p{ margin: 0 0 10px; }
/* ハニーポット：画面には出さない（bot だけが埋める） */
.kcm .hp-field{ position: absolute; left: -9999px; top: -9999px; }
.lead-capture{background:#eefafb}
.lead-capture__wrap{max-width:840px}
.lead-capture__intro{text-align:center}
.lead-capture__eyebrow{margin:0 0 12px;color:#168b98;font-size:14px;font-weight:800;letter-spacing:.08em}
.lead-capture h2{margin:0 0 16px;color:#155d69;font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.45;text-wrap:balance}
.lead-capture__intro>p:not(.lead-capture__eyebrow){margin:0 auto;color:#314851;font-size:16px;line-height:1.8}
.lead-capture__form-card{min-width:0;padding:clamp(28px,5vw,52px);border:1px solid #a9dce3;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(27,106,121,.06)}
.lead-capture .kanal-lf{max-width:none;margin-top:32px}
@media (max-width:480px){.lead-capture__form-card{padding:22px 18px}
.lead-capture .kanal-lf{margin-top:24px}}
/* 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}