/* ===== トークン（指定色） ===== */
: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)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== ボタン ===== */
.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}
.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}
.sec-more{margin-top:20px;text-align:right;font-size:13.5px}
.sec-more a{font-weight:700;text-decoration:none}
.sec-more a::after{content:"›";margin-left:6px;font-size:16px}
.sec-cta{margin-top:36px;text-align:center}
@media (max-width:640px){.sec{padding-block:48px}}
/* Plan support at each recruitment stage. */
.plan-summary{margin-bottom:28px}
.plan-summary__table{width:100%;border:2px solid var(--teal);border-spacing:0;border-radius:10px;background:#fff;table-layout:fixed;overflow:hidden}
.plan-summary__table thead th{padding:17px 9px;background:#edf8f9;color:#147f89;font-size:17px;font-weight:700;line-height:1.45;text-align:center}
.plan-summary__table thead th:first-child{width:30%}
.plan-summary__table thead th:last-child{width:20%}
.plan-summary__table thead th:nth-child(n+2):nth-child(-n+5){width:12.5%}
.plan-summary__table thead th+th, .plan-summary__table tbody td{border-left:1px solid var(--line)}
.plan-summary__table tbody th, .plan-summary__table tbody td{padding:17px 10px;border-top:1px solid var(--line);background:#fff}
.plan-summary__table tbody th{padding-left:23px;color:#26333a;font-size:18px;font-weight:700;line-height:1.45;text-align:left}
.plan-summary__table tbody td{text-align:center;vertical-align:middle}
.plan-summary__table tbody td:not(.plan-summary__price)>span[aria-hidden]{display:block;font-size:36px;line-height:1;color:#168f9b}
.plan-summary__table .plan-summary__partial>span[aria-hidden], .plan-summary__table .plan-summary__no>span[aria-hidden]{color:#788890}
.plan-summary__table .plan-summary__price{color:#26333a;font-size:15px;font-weight:700;white-space:nowrap}
.plan-summary__table .plan-summary__price strong{color:#168f9b;font-size:26px;font-weight:800}
.plan-summary__table .plan-summary__recommended>*{border-top:2px solid var(--orange);border-bottom:2px solid var(--orange);background:#fff9f2}
.plan-summary__table .plan-summary__recommended>th{border-left:2px solid var(--orange);padding-left:21px}
.plan-summary__table .plan-summary__recommended>td:last-child{border-right:2px solid var(--orange)}
.plan-summary__table .plan-summary__recommended .plan-summary__price strong{color:var(--orange-deep)}
.plan-summary__badge{display:inline-block;margin-left:7px;padding:3px 7px;border-radius:5px;background:var(--orange);color:#fff;font-size:12px;font-weight:700;vertical-align:middle;white-space:nowrap}
@media (max-width:760px){.plan-summary__table{display:block;border:0;border-radius:0;background:none;overflow:visible}
.plan-summary__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plan-summary__table tbody{display:grid;gap:12px}
.plan-summary__table tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--teal);border-radius:9px;background:#fff;overflow:hidden}
.plan-summary__table tbody tr>*{border:0}
.plan-summary__table tbody th{grid-column:1/-1;padding:13px 14px;border-bottom:1px solid var(--line);font-size:16px}
.plan-summary__table tbody td:not(.plan-summary__price){display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:10px 2px;text-align:center}
.plan-summary__table tbody td:not(.plan-summary__price)::before{content:attr(data-label);color:#147f89;font-size:12px;font-weight:700}
.plan-summary__table tbody td:not(.plan-summary__price)>span[aria-hidden]{font-size:30px}
.plan-summary__table .plan-summary__price{grid-column:1/-1;padding:9px 14px;border:0;border-top:1px solid var(--line);font-size:13px;text-align:right}
.plan-summary__table .plan-summary__price strong{font-size:22px}
.plan-summary__table .plan-summary__recommended{border:2px solid var(--orange);background:#fff9f2}
.plan-summary__table .plan-summary__recommended>*{border-top:0;border-bottom:0;background:#fff9f2}
.plan-summary__table .plan-summary__recommended>th{padding-left:14px;border-left:0;border-bottom:1px solid #f7d9bb}
.plan-summary__table .plan-summary__recommended>td:last-child{border-right:0;border-top:1px solid #f7d9bb}
.plan-summary__badge{font-size:11px}
}
/* ===== プランのカード ===== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;padding-top:14px}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px}
.plan--reco{border:2px solid var(--teal);box-shadow:0 10px 28px rgba(35,157,165,.14)}
.reco-label{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--teal-deep);color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;white-space:nowrap;letter-spacing:.04em}
.plan-seg{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-seg-bars{display:flex;gap:4px}
.plan-seg-bars i{display:block;width:26px;height:6px;border-radius:2px;background:var(--line-2)}
.plan--1 .plan-seg-bars i:nth-child(1){background:var(--teal-light)}
.plan--2 .plan-seg-bars i:nth-child(-n/**/+2){background:var(--teal)}
.plan--3 .plan-seg-bars i{background:var(--teal-deep)}
.plan-word{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--teal-deep);font-feature-settings:"palt"}
.plan-name{font-size:22px;line-height:1.35}
.plan-pos{margin-top:2px;font-size:12.5px;color:var(--ink-2)}
.plan-rule{width:28px;height:3px;background:var(--teal);margin:2px 0 0}
.plan-copy{font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.5;font-feature-settings:"palt";text-wrap:balance}
.plan-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;background:var(--mist);border-radius:4px}
.plan-price-label{font-size:12px;font-weight:700;color:var(--teal-deep)}
.plan-price strong{font-family:var(--font-head);font-size:34px;font-weight:900;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:0}
.plan-price strong small{font-size:15px;font-weight:700;margin-left:2px}
.plan-tax{flex-basis:100%;font-size:11.5px;color:var(--ink-2);line-height:1.5}
.plan-inc-title{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--ink-2);padding-bottom:6px;border-bottom:1px solid var(--line)}
.plan-list{display:grid;gap:8px;font-size:13.5px}
.plan-list li{display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.plan-list li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.6 6.4l2.4 2.4 4.4-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat}
.plan--1 .plan-list li::before{background-color:var(--teal-light)}
.plan--3 .plan-list li::before{background-color:var(--teal-deep)}
@media (max-width:920px){.plans{grid-template-columns:1fr;max-width:540px;margin-inline:auto;gap:28px}}
/* ===== 支援内容の比較表 ===== */
.tbl-wrap{overflow-x:auto;contain:paint;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:13.5px}
.cmp th, .cmp td{border-bottom:1px solid var(--line-2);padding:10px 14px;vertical-align:middle;text-align:left}
.cmp thead th{background:var(--mist);font-family:var(--font-head);font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line);font-feature-settings:"palt";line-height:1.4}
.cmp thead th.cmp-plan{text-align:center;width:160px}
.cmp thead th.cmp-plan small{display:block;font-family:var(--font-body);font-weight:500;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.cmp tbody th.cmp-cat{background:var(--mist-2);font-weight:700;font-size:13px;width:150px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);line-height:1.5}
.cmp td.cmp-mark{text-align:center}
.cmp tr.grp-end td{border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th{border-bottom:0}
.on{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--teal);vertical-align:middle}
.on--1{background:var(--teal-light)}
.on--2{background:var(--teal)}
.on--3{background:var(--teal-deep)}
.off{display:inline-block;width:12px;height:2px;background:var(--line);vertical-align:middle}
/* ===== オプション ===== */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.opt{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;display:grid;gap:12px}
.opt-cat{font-size:12px;font-weight:700;color:var(--teal-deep);letter-spacing:.02em}
.opt h3{font-size:19px;line-height:1.4}
.opt-desc{font-size:13.5px;color:var(--ink-2)}
.opt-sub{font-size:12.5px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:4px}
.opt-list{display:grid;gap:6px;font-size:13.5px}
.opt-list li{display:flex;gap:8px;align-items:flex-start;line-height:1.6}
.opt-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:9px}
.opt-price{display:grid;gap:4px;padding:12px 14px;background:var(--mist);border-radius:4px;font-size:13.5px}
.opt-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.opt-price-row b{font-family:var(--font-head);font-size:18px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.opt-price-row b small{font-size:12px;font-weight:700;margin-left:2px}
@media (max-width:760px){.opts{grid-template-columns:1fr}}
/* ===== 料金のしくみ ===== */
/* ===== 原稿待ちの枠 ===== */
/* ===== 導入の流れ ===== */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.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-no{font-family:var(--font-head);font-weight:900;font-size:12px;color:var(--teal-deep);letter-spacing:.08em}
.step h3{font-size:16px;margin-top:6px;line-height:1.4}
.step-dur{display:inline-block;font-size:11.5px;color:var(--teal-deep);background:var(--mist);padding:1px 8px;border-radius:999px;margin-top:8px;font-weight:700}
.step p{margin-top:10px;font-size:13px;color:var(--ink-2)}
@media (max-width:1000px){.flow{grid-template-columns:1fr;gap:10px;max-width:620px;margin-inline:auto}
.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)}
/* ===== よくある質問（一覧） ===== */
/* ===== スマホのヘッダー（折り返し防止） ===== */
.btn{white-space:nowrap}
/* =====================================================================
   v2（2026-09-25）: カード・アイコン・角丸を減らし、図を画面風に。
   base / extra の後に読ませて上書きする
   ===================================================================== */
:root{--radius:0}
.btn, .tile, .tile-btn, .plan, .plan-price, .opt-price, .tbl-wrap{border-radius:0}
.reco-label{border-radius:0;top:-12px;letter-spacing:.06em}
.plan--reco{box-shadow:none}
.step-dur{background:none;padding:0;border-radius:0;font-size:12.5px}
.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 だけ */
.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}
.sec-head--c{text-align:center;border-left:0;padding-left:0}
.sec-head--c h2::after{display:block}
.sec-head--c .sec-lead{margin-inline:auto;margin-top:14px}
/* 数字の帯: 点をやめて縦線で区切る */
/* タイル: 枠なし・角なし（アイコンは 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)}
/* 料金: 対応範囲の図とオプション・導入の流れの箱をやめる */
.opts{gap:40px}
.opt{border:0;padding:0;background:none}
.opt + .opt{border-left:1px solid var(--line);padding-left:40px}
@media (max-width:760px){.opts{gap:28px}
.opt + .opt{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}}
.flow{gap:0 20px}
.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){.flow{gap:0}
.step{border-top:1px solid var(--line);padding:14px 0}
.step:last-child{border-bottom:1px solid var(--line)}}
/* よくある質問: スマホの目次をチップから 2 列の一覧に */
/* 向いている企業の印: チェック丸をやめて小さな点に */
/* 番号付きリスト（導入の流れ・工程）: ブラウザ既定の「1.」を出さない（番号は自前で描く） */
.flow, .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}
.btn--lg{width:380px;max-width:100%;min-height:72px;font-size:20px;padding:20px 24px}
/* ヘッダー: ロゴ左・メニュー右・影。文字は 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, .sec-head--c 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}
/* 理由へのアンカー: ティール枠の丸いチップ */
/* 選ばれる理由 */
.phone{border:2px solid var(--teal);border-radius:10px;overflow:hidden}
/* 違いの表: 料金表と同じ、ティールの罫線と帯 */
/* 向いている企業: ティール枠のカード＋チェック。おすすめしない側は灰色の枠＋バツ */
/* 次に読む */
/* サービス内容: 工程はティール枠のカード＋番号の丸 */
.step-dur{color:var(--orange);font-weight:700;font-size:14px;background:none}
.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}
/* 料金: プランのカード（おすすめは橙） */
.plan{border:2px solid var(--teal);border-radius:10px;padding:26px 22px 24px;gap:14px;background:#fff}
.plan--reco{border-color:var(--orange);box-shadow:none;background:var(--warm)}
.reco-label{background:#fff;color:var(--orange);border:2px solid var(--orange);border-radius:6px;font-weight:700;font-size:13px;padding:2px 12px;top:-16px;letter-spacing:.06em}
.plan h3{font-family:var(--font-head);font-size:24px;color:#333}
.plan-price{background:#fff;border-radius:6px;border:1px solid var(--line)}
.plan--reco .plan-price{border-color:var(--orange)}
.plan-price-label{color:#333;font-size:13px}
.plan-price strong{font-family:var(--font-body);font-weight:700;font-size:40px;color:#333;letter-spacing:-.02em}
.plan-price strong small{font-size:16px}
.plan li{font-size:15px}
/* 料金: 比較表（列の見出しはティールの帯・項目名は薄いティール） */
.cmp{font-size:15px}
.cmp th, .cmp td{padding:12px 14px;border-bottom:1px solid var(--line)}
.cmp thead th{background:transparent;font-family:var(--font-body);color:#333;border-bottom:0;font-feature-settings:normal}
.cmp thead th.cmp-plan{background:var(--teal);color:#fff;border-radius:0;border-right:1px solid rgba(255,255,255,.35);font-size:18px;font-weight:800;line-height:1.4;padding:16px 10px}
.cmp thead th.cmp-plan small{color:#fff;opacity:.95;font-size:12px;margin-top:5px}
.cmp tbody th.cmp-cat{background:var(--mist);border-right:0;border-bottom:2px solid #fff;font-size:15px;font-weight:700;color:#333}
.cmp td{border-left:1px solid var(--line)}
.cmp td.cmp-mark{text-align:center;font-size:18px}
.cmp tbody tr:last-child td{border-bottom:1px solid var(--teal)}
/* 料金: オプション */
.opts{gap:20px}
.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-cat{color:var(--teal);font-size:14px}
.opt h3{font-family:var(--font-head);font-size:22px;color:#333}
.opt-desc{font-size:15px;color:#333;line-height:1.7}
.opt-sub{font-size:14px;color:#333;border-bottom:1px dashed var(--teal)}
.opt-list{font-size:15px}
.opt-price{background:var(--warm);border-radius:6px;border:1px solid var(--line);font-size:15px}
.opt-price-row b{font-family:var(--font-body);font-weight:700;font-size:20px}
@media (max-width:760px){.opt + .opt{border:2px solid var(--teal);padding:24px 22px}}
/* 料金: 導入の流れ（本番の「ご利用の流れ」と同じ、縦に並ぶカードと矢印） */
.sec--warm{background:var(--warm)}
.flow{grid-template-columns:1fr;gap:24px;max-width:860px;margin-inline:auto}
.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-no{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--teal);color:#fff;font-family:var(--font-body);font-weight:400;letter-spacing:0;padding:28px 0;min-height:176px;margin:0}
.step-no strong{font-size:64px;font-weight:400;line-height:1}
.step-no small{font-size:32px;line-height:1}
.step-body{padding:20px 0}
.step h3{font-size:24px;margin-top:0;line-height:1.4;font-family:var(--font-body)}
.step-dur{margin-top:6px;display:inline-block}
.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){.flow{gap:24px}
.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-no{min-height:0;padding:16px 0}
.step-no strong{font-size:40px}
.step-no small{font-size:16px}
.step h3{font-size:20px}
.step p{font-size:15px}}
/* よくある質問: Q はティールの帯・答えは枠の中（開閉式）。料金ページの抜粋も同じ */
.faq{max-width:none;border-top:0}
.faq details{border:2px solid var(--teal);border-radius:10px;margin-top:18px;background:#fff;padding:0}
.faq 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{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}
.faq .tg{width:20px;height:20px;margin:0;flex:none;position:relative}
.faq .tg::before, .faq .tg::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff}
.faq .tg::before{width:20px;height:3px}
.faq .tg::after{width:3px;height:20px;transition:transform .3s ease}
.faq .a{display:block;padding:30px 20px;font-size:15px;line-height:1.7;letter-spacing:.05em;color:#333;margin-top:0}
.faq .a p + p{margin-top:14px}
.faq .a strong{font-weight:700}
/* 共通 CTA: ティールの帯に白い箱、橙のボタン 2 つ */
.cta-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
@media (max-width:600px){.btn--lg{width:min(315px,100%);min-height:64px;font-size:18px}}
/* フッター: 薄いティール・12px・左に会社概要とプライバシーポリシー、右に © */
/* 比較表: 3プランを同じ配色にして、支援範囲だけを比較しやすくする */
.cmp thead th.cmp-plan:last-child{border-right:0}
.cmp tbody tr:last-child td{border-bottom:1px solid var(--line)}
.on, .on--1, .on--2, .on--3{width:15px;height:15px;background:none;border:1.5px solid var(--teal-deep)}
.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-no{grid-column:1;grid-row:1/4;align-self:stretch;height:100%}
.step > :not(.step-no){grid-column:2}
.step h3{padding-top:20px}
.step p:last-child{padding-bottom:20px}
.step .step-dur{margin-top:4px}
@media (max-width:1000px){.step h3{padding-top:14px}
.step p:last-child{padding-bottom:14px}}
/* プランの箇条書き: 丸なしのチェック（本番と同じ 13×10） */
.plan-list li::before{width:13px;height:10px;border-radius:0;margin:9px 2px 0 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><path d='M1 5l3.5 3.5L12 1' fill='none' stroke='%23379faa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain}
.plan--1 .plan-list li::before, .plan--3 .plan-list li::before{background-color:transparent}
.plan-list{font-size:15px}
.tile-title{font-size:16px}
/* 日本語の見出しは普通に折り返す（balance だと単語の途中で割れる） */
h1, h2, h3, h4, .plan-copy, .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ボタンに統一。 */
.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{min-width:0}
.cmp{max-width:none}
@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){.sec-head h2[data-en]::before{font-size:clamp(30px,9vw,42px)}
.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. */
.plan-volume{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:26px 0 14px;padding:14px 20px;border-radius:10px;background:#379faa;color:#fff;text-align:center;font-weight:700;font-size:17px}
.plan-volume span{padding:4px 10px;border:1px solid #fff;border-radius:999px;font-size:12px;white-space:nowrap}
.plan-volume strong{font-size:32px;line-height:1.1;white-space:nowrap}
.plan-price .plan-tax strong{font-family:inherit;font-size:inherit;font-weight:800;line-height:inherit;letter-spacing:inherit;color:#0e7180}
.cmp{table-layout:fixed;min-width:760px}
.cmp-col-cat{width:14%}
.cmp-col-service{width:20%}
.cmp-col-plan{width:22%}
.cmp tbody th[scope="row"]{font-weight:500}
.cmp tbody tr{background:#fff}
.cmp td.cmp-mark--off{background:#e9eef0}
.cmp td.cmp-mark--off .off{background:#6b7c84}
.cmp-mobile{display:none}
@media (min-width:761px) and (max-width:920px){.plans{grid-template-columns:1fr;max-width:none;margin:0;gap:20px}
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"seg inc" "title list" "rule list" "copy list" "price list";grid-template-rows:auto auto auto auto 1fr;gap:12px 24px;padding:25px}
.plan-seg{grid-area:seg}
.plan-title{grid-area:title}
.plan-rule{grid-area:rule}
.plan-copy{grid-area:copy}
.plan-price{grid-area:price}
.plan-inc-title{grid-area:inc;align-self:end;margin:0}
.plan-list{grid-area:list;align-content:start}}
@media (max-width:760px){.plans{grid-template-columns:1fr;max-width:none;margin:0;gap:18px}}
@media (max-width:860px){#compare .tbl-wrap{display:none}
.cmp-mobile{display:grid;gap:16px}
.cmp-mobile-card{min-width:0;overflow:hidden;border:1px solid #9bd6dc;border-radius:12px;background:#fff}
.cmp-mobile-card h3{padding:13px 16px;background:#eaf8fb;color:#0d6875;font-size:17px;line-height:1.4}
.cmp-mobile-card ul{list-style:disc;margin:10px 18px 12px;padding-left:18px}
.cmp-mobile-card li{padding:3px 0;font-size:14px;line-height:1.55}
.cmp-mobile-card__plans{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #d5edf0;background:#f8fcfd}
.cmp-mobile-card__label{width:100%;font-size:12px;font-weight:700;color:#52666e}
.cmp-mobile-card__plan{padding:5px 9px;border-radius:999px;background:#168b98;color:#fff;font-size:12px;font-weight:700;line-height:1.25;white-space:nowrap}}
@media (min-width:540px) and (max-width:860px){.cmp-mobile-card ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
.opts{align-items:stretch}
.opt{display:flex;flex-direction:column}
.opt-price{margin-top:auto}
@media (min-width:761px){.opt:nth-child(2) .opt-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
/* Comparison with other services stays a real table at every width. */
.other-compare-wrap{width:100%;padding:8px;border:2px solid #379faa;border-radius:14px;background:#fff;overflow:hidden}
.other-compare{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:5px;font-size:15px;line-height:1.5;text-align:center}
.other-compare__item{width:17%}
.other-compare__wakatte, .other-compare__peer{width:27.666%}
.other-compare th, .other-compare td{padding:15px 12px;vertical-align:middle;border-radius:7px;overflow-wrap:anywhere;word-break:normal}
.other-compare thead th{background:#8fa2b1;color:#fff;font-size:17px;font-weight:800;line-height:1.35}
.other-compare thead th:first-child{background:#e9f7fa;color:#253f48}
.other-compare thead th:nth-child(2){background:#168b98;font-size:21px}
.other-compare thead th small{display:block;margin-top:2px;font-size:11px;font-weight:700}
.other-compare tbody th{background:#e3f5f8;color:#163b49;font-weight:800}
.other-compare tbody td{background:#eef5fa;color:#1f3547}
.other-compare tbody td:nth-child(2){background:#dcf8fc;color:#075b6b}
.other-compare tbody strong{font-weight:800}
.other-compare__metrics tr:nth-child(-n/**/+2) td{font-size:20px;font-weight:700}
.other-compare__metrics tr:nth-child(-n/**/+2) td:nth-child(2){font-size:25px}
.other-compare__stages th{background:#188d9b!important;color:#fff!important;font-size:17px}
.other-compare__stages tr:nth-child(3) th, .other-compare__stages tr:nth-child(4) th{background:#136aab!important}
.other-compare__stages td{min-height:82px}
#h-others{font-size:clamp(27px,6.8vw,40px)}
#h-others span{display:block;white-space:nowrap}
#compare-others .sec-lead{text-wrap:balance}
#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. */
#flow .flow{display:grid;grid-template-columns:1fr;gap:24px;max-width:1060px;margin-inline:auto}
#flow .step{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto;gap:0;align-items:stretch;min-height:0;padding:0;border:2px solid #379faa;border-radius:0;background:#fff}
#flow .step:last-child{border-bottom:2px solid #379faa}
#flow .step:not(:last-child)::after{display:block;left:50%;right:auto;top:auto;bottom:-18px;transform:translateX(-50%);border:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:17px solid #379faa}
#flow .step-no{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;gap:2px;min-height:150px;height:auto;margin:0;padding:12px;border:0;background:#379faa;color:#fff}
#flow .step-no small{font-size:23px;line-height:1.1}
#flow .step-no strong{font-size:60px;font-weight:400;line-height:1}
#flow .step-body{grid-column:2;grid-row:1;min-width:0;padding:24px 26px}
#flow .step h3{margin:0;padding:0;color:#379faa;font-size:22px;line-height:1.35}
#flow .step .step-dur{margin:5px 0 0;padding:0;color:#c76b16;font-size:14px}
#flow .step-body p{margin:12px 0 0;padding:9px 0 0;border-top:1px dashed #9fcfd3;color:#333;font-size:17px;line-height:1.55}
@media (max-width:760px){.plan-volume{gap:6px;font-size:14px}
.plan-volume strong{font-size:26px}
#flow .step{grid-template-columns:78px minmax(0,1fr)}
#flow .step-no{min-height:132px;padding:8px 4px}
#flow .step-no small{font-size:15px}
#flow .step-no strong{font-size:38px}
#flow .step-body{padding:16px}
#flow .step h3{font-size:18px}
#flow .step-body p{font-size:14px}}
@media (max-width:600px){.other-compare-wrap{padding:3px;border-radius:10px}
.other-compare{min-width:0;border-spacing:2px;font-size:clamp(10px,2.8vw,11px);line-height:1.35}
.other-compare__item{width:19%}
.other-compare__wakatte, .other-compare__peer{width:27%}
.other-compare th, .other-compare td{padding:9px 4px;border-radius:4px}
.other-compare thead th{font-size:clamp(10px,2.8vw,11px)}
.other-compare thead th:nth-child(2){font-size:clamp(11px,3vw,12px)}
.other-compare tbody th{font-size:clamp(10px,2.8vw,11px)}
.other-compare__metrics tr:nth-child(-n/**/+2) td{font-size:clamp(11px,3.1vw,13px)}
.other-compare__metrics tr:nth-child(-n/**/+2) td:nth-child(2){font-size:clamp(14px,4vw,17px)}
.other-compare__stages th{font-size:clamp(10px,2.8vw,11px)}}
/* Pricing mechanism: three clear cost categories with a visible addition. */
.fee-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch}
.fee-card{position:relative;min-width:0;display:flex;flex-direction:column;border:1.5px solid #38a4b5;border-radius:14px;background:#fff;box-shadow:0 5px 22px rgba(21,89,110,.055)}
.fee-card:not(:last-child)::after{content:"+";position:absolute;z-index:1;top:50%;left:calc(100% + 15px);transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:40px;color:#16899b;font-family:var(--font-head);font-size:39px;font-weight:900;line-height:1}
.fee-card__head{display:flex;align-items:center;gap:14px;min-height:104px;margin:0 22px;padding:19px 0 17px;border-bottom:2px dashed #9bd6de}
.fee-card__number{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:#e5f7f9;color:#16899b;font-family:var(--font-head);font-size:22px;font-weight:900;line-height:1}
.fee-card__head div{min-width:0}
.fee-card__head h3{color:#125b70;font-size:clamp(23px,2.5vw,29px);font-weight:900;line-height:1.2}
.fee-card__head p{margin-top:7px;color:#475761;font-size:12px;line-height:1.5}
.fee-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:22px 22px 24px}
.fee-card__primary{display:flex;flex-direction:column;gap:5px}
.fee-card__primary>span, .fee-card__extra-title{font-family:var(--font-head);font-size:20px;font-weight:800;line-height:1.4}
.fee-card__primary strong{color:#13869a;font-family:var(--font-head);font-size:clamp(35px,4vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.fee-card__primary strong.fee-card__monthly-prices{font-size:clamp(25px,2.7vw,36px)}
.fee-card__primary strong small{margin-left:1px;font-size:.43em;letter-spacing:0}
.fee-card__description{margin-top:13px;color:#3a4a51;font-size:14px;line-height:1.65}
.fee-card__list{display:grid;gap:9px;margin-top:auto;padding:18px 14px;border-radius:9px;background:#f0fafe}
.fee-card__list--after{margin-top:18px;padding:17px 0 0;border-top:2px dashed #9bd6de;border-radius:0;background:none}
.fee-card__list li{position:relative;padding-left:24px;color:#263f48;font-size:14px;line-height:1.5}
.fee-card__list li::before{content:"✓";position:absolute;top:0;left:0;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#2097a6;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:1}
.fee-card__rates{margin-top:16px;padding:4px 12px;border-radius:9px;background:#f0fafe}
.fee-card__rates>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #cee8ed}
.fee-card__rates>div:last-child{border-bottom:0}
.fee-card__rates dt{min-width:0;color:#263f48;font-size:14px;font-weight:700;line-height:1.45}
.fee-card__rates dt small{font-size:11px;font-weight:500}
.fee-card__rates dd{margin:0;color:#13869a;font-family:var(--font-head);font-size:18px;font-weight:900;line-height:1.25;white-space:nowrap}
.fee-card__rates--extra{margin-top:22px;padding:5px 12px}
.fee-card__rates--extra>div{min-height:63px}
.fee-card__rates--extra dd{font-size:16px}
.fee-card__included{min-width:0}
.fee-card__included .fee-card__extra-title{color:#125b70}
.fee-card__included .fee-card__list{margin-top:16px;padding:13px 12px;gap:10px}
.fee-card__included .fee-card__list li small{display:block;margin-top:3px;color:#52646c;font-size:11px;line-height:1.4}
.fee-card__optional{margin-top:19px;padding-top:17px;border-top:2px dashed #9bd6de}
@media (max-width:960px){.fee-cards{grid-template-columns:1fr;gap:29px;max-width:680px;margin-inline:auto}
.fee-card:not(:last-child)::after{top:calc(100% + 14.5px);left:50%;transform:translate(-50%,-50%);font-size:38px}
.fee-card__head{min-height:0}}
@media (max-width:480px){.fee-card__head{gap:11px;margin-inline:17px;padding-block:17px}
.fee-card__number{width:48px;height:48px;font-size:18px}
.fee-card__head h3{font-size:23px}
.fee-card__body{padding:19px 17px 20px}
.fee-card__primary>span, .fee-card__extra-title{font-size:18px}
.fee-card__primary strong{font-size:clamp(31px,9vw,39px)}
.fee-card__rates dt{font-size:12px}
.fee-card__rates dd{font-size:15px}
.fee-card__rates--extra dd{font-size:13px}}
/* 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 .opts{gap:20px;align-items:stretch}
#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-cat{font-size:16px;font-weight:800;line-height:1.4}
#options .opt h3{margin-top:15px;font-size:clamp(21px,2vw,25px);line-height:1.35}
#options .opt-desc{margin-top:15px;font-size:15px;line-height:1.72}
#options .opt-sub{margin-top:20px;padding-bottom:9px;font-size:16px}
#options .opt-list{gap:8px;margin-top:14px;margin-bottom:23px;font-size:14px}
#options .opt-list li{line-height:1.55}
#options .opt-price{flex:none;gap:0;margin-top:auto;padding:13px 18px;border:1px solid #bde1e7;border-radius:8px;background:#f8fcfd;font-size:15px}
#options .opt-list+.opt-price{margin-top:auto}
#options .opt-price-row{min-height:43px;align-items:center;gap:14px}
#options .opt-price-row+.opt-price-row{border-top:1px solid #d6eaee}
#options .opt-price-row b{font-size:23px;line-height:1.25;white-space:nowrap}
#options .opt-price-row b small{font-size:14px}
@media (min-width:761px) and (max-width:950px){#options .opt:nth-child(2) .opt-list{grid-template-columns:1fr}}
@media (max-width:760px){#options .opts{gap:20px}
#options .opt, #options .opt+.opt{padding:23px 21px 22px}
#options .opt-cat{font-size:14px}
#options .opt h3{margin-top:14px;font-size:22px}
#options .opt-desc{margin-top:14px;font-size:15px}
#options .opt-sub{margin-top:22px;font-size:15px}
#options .opt-list{margin-top:13px;margin-bottom:17px;font-size:14px;gap:7px}
#options .opt-price{margin-top:20px;padding:10px 13px;font-size:14px}
#options .opt-list+.opt-price{margin-top:20px}
#options .opt-price-row b{font-size:21px}}
/* Plan guide: every question, branch and explanation exists in the initial HTML. */
.plan-finder{background:#fff}
.js .plan-finder:not(.is-interactive) .plan-flow__step:not(:first-child),.js .plan-finder:not(.is-interactive) .plan-flow__results,.js .plan-finder:not(.is-interactive) .plan-flow__step::after{display:none}
.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:not(.is-current),.plan-finder.is-interactive .plan-flow__steps.is-complete,.plan-finder.is-interactive .plan-flow__results:not(.is-visible),.plan-finder.is-interactive .plan-flow__outcome:not(.is-selected){display:none}
.plan-finder.is-complete .sec-head{display:none}
.plan-finder.is-interactive .plan-flow__step::after{display:none}
.plan-flow__question{display:flex;align-items:center;gap:13px;margin-bottom:17px}
.plan-flow__question>span{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:50%;background:#279bab;color:#fff;font-size:14px;font-weight:800;line-height:1}
.plan-flow__question h3{font-size:clamp(17px,2vw,22px);color:#153a43}
.plan-flow__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.plan-flow__choices li{min-width:0}
.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__back:focus-visible, .plan-flow__restart:focus-visible{outline:3px solid #ff9c48;outline-offset:2px}
.plan-flow__choice-number{grid-area:num;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e2f5f7;color:#0a8393;font-size:12px;font-weight:800;line-height:1}
.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__back, .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__back, .plan-finder.is-interactive .plan-flow__restart{display:inline-flex}
.plan-flow__back:hover, .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}
.plan-flow__symbols{position:absolute;width:0;height:0;overflow:hidden}
.plan-flow__outcomes{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.plan-flow__outcome{position:relative;min-width:0;padding:20px 24px 22px;border:1.5px solid #86d0d7;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(22,100,110,.07);color:#193345}
.plan-flow__result-label{position:relative;z-index:1;width:max-content;max-width:100%;margin:0 auto 12px;padding:7px 26px;border-radius:999px;background:#168d9d;color:#fff;font-size:17px;font-weight:800;letter-spacing:.08em;text-align:center}
.plan-flow__outcome h4{margin:0;padding:2px 12px 8px;color:#162b43;font-size:clamp(26px,3.5vw,42px);font-weight:800;line-height:1.4;text-align:center}
.plan-flow__outcome h4 span{color:#087f90;background:linear-gradient(transparent 80%,#f9e69c 80%)}
.plan-flow__result-summary{margin:0;padding:0 18px 12px;color:#354b56;font-size:16px;line-height:1.7;text-align:center}
.plan-flow__reason, .plan-flow__scope, .plan-flow__fit{margin-top:14px}
.plan-flow__outcome h5{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 14px;color:#162b43;font-size:20px;font-weight:800;letter-spacing:.05em;text-align:center}
.plan-flow__outcome h5::before, .plan-flow__outcome h5::after{content:"";width:44px;height:1px;background:#9ab4bd}
.plan-flow__reason ul{display:grid;gap:9px;max-width:960px;margin:16px auto 0;padding:0 16px;list-style:none}
.plan-flow__reason li{position:relative;padding-left:34px;font-size:16px;line-height:1.65}
.plan-flow__reason li::before{content:"✓";position:absolute;top:2px;left:0;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#1599a8;color:#fff;font-size:15px;font-weight:800;line-height:1}
.plan-flow__scope{padding:14px 16px 16px;border:1px solid #d6e9ec;border-radius:12px;background:#f8fcfc}
.plan-flow__scope ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0;padding:0;list-style:none}
.plan-flow__scope li{position:relative;display:grid;align-content:start;gap:5px;min-width:0;padding:9px 12px;text-align:center}
.plan-flow__scope li:not(:last-child){border-right:1px solid #d0e4e8}
.plan-flow__scope li:not(:last-child)::after{content:"›";position:absolute;right:-7px;top:18px;z-index:1;color:#168d9d;background:#f8fcfc;font-size:22px;line-height:1}
.plan-flow__scope li strong{color:#087b8d;font-size:16px;line-height:1.45}
.plan-flow__scope li span{color:#425763;font-size:13px;line-height:1.5}
.plan-flow__scope-icon{display:block;width:56px;height:56px;margin:0 auto 2px;padding:10px;border-radius:50%;background:#e7f7f9;color:#0d91a6}
.plan-flow__fit{padding-bottom:3px}
.plan-flow__fit>p{max-width:840px;margin:0 auto;padding:20px 24px;border:1px solid #9bd6dc;border-radius:10px;background:#f5fbfc;font-size:16px;line-height:1.6;text-align:center}
.plan-flow__plan-link{display:flex;align-items:center;justify-content:center;gap:14px;width:max-content;min-height:48px;margin:16px auto 0;padding:10px 24px;border:1px solid #168d9d;border-radius:7px;color:#087b8d;font-size:15px;font-weight:800;text-decoration:none}
.plan-flow__plan-link:hover{background:#eaf8fa;text-decoration:none}
.plan-flow__plan-link:focus-visible{outline:3px solid #ff9c48;outline-offset:2px}
.plan-flow__result-icon{display:none}
.plan-flow__mobile-break{display:none}
.plan-flow__hero{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;margin:0 auto;padding:2px 0 10px}
.plan-flow__outcome--detailed .plan-flow__result-icon{display:block;width:96px;height:96px;padding:16px;border-radius:50%;background:#e5f8fa;color:#0b7b98}
.plan-flow__outcome--detailed h4{padding:0;text-align:left;font-size:clamp(30px,3.6vw,44px);line-height:1.22}
.plan-flow__outcome--detailed h4 span{display:block;width:max-content;max-width:100%;margin-bottom:6px}
.plan-flow__outcome[data-plan-outcome="other"] h4 span{display:inline}
.plan-flow__outcome--detailed .plan-flow__result-summary{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__outcome--detailed .plan-flow__result-icon, .plan-flow__outcome--detailed .plan-flow__fit-icon, .plan-flow__outcome--detailed .plan-flow__scope-icon{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.plan-flow__fit--lead{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:20px;padding:16px 22px;border:1px solid #b5e2e6;border-radius:12px;background:#fff}
.plan-flow__fit-icon{display:block;width:92px;height:92px;padding:18px;border-radius:50%;background:#e7f7f9;color:#0d95aa}
.plan-flow__fit--lead h5{display:block;margin:0 0 8px;text-align:left}
.plan-flow__fit--lead h5::before, .plan-flow__fit--lead h5::after{display:none}
.plan-flow__fit--lead ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.plan-flow__fit--lead li{position:relative;padding-left:32px;font-size:16px;line-height:1.45}
.plan-flow__fit--lead li::before{content:"✓";position:absolute;top:3px;left:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1599a8;color:#fff;font-size:15px;font-weight:800;line-height:1}
.plan-flow__reason--emphasis{padding:16px 20px 18px;border-radius:12px;background:#e9f8fa}
.plan-flow__reason--emphasis ul{max-width:none;padding:0 16px}
.plan-flow__reason--emphasis li{font-size:16px}
.plan-flow__reason--emphasis li strong{color:#087f90;background:linear-gradient(transparent 74%,#f9e69c 74%)}
.plan-flow__outcome[data-plan-outcome="other"] .plan-flow__reason--emphasis{background:#fff8e9}
.plan-flow__scope-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.plan-flow__scope-notes p{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;margin:0;padding:9px 12px;border-radius:7px;background:#edf1f4;color:#334a57;font-size:14px;font-weight:700;text-align:center}
.plan-flow__scope-notes p::before{content:"✓";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#1696a5;color:#fff;font-size:13px;line-height:1}
@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__question{align-items:flex-start;gap:10px}
.plan-flow__question>span{width:36px;height:36px;font-size:12px}
.plan-flow__question h3{font-size:18px;line-height:1.45}
.plan-flow__choices{grid-template-columns:1fr;gap:9px}
.plan-flow__answer{grid-template-columns:30px minmax(0,1fr);min-height:78px;padding:14px 13px}
.plan-flow__choice-number{width:28px;height:28px;font-size:11px}
.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}
.plan-flow__result-label{font-size:14px}
.plan-flow__outcome{padding:16px 14px 18px}
.plan-flow__outcome h4{padding:4px 0 8px;font-size:clamp(23px,6vw,28px)}
.plan-flow__outcome h4 span{display:block;width:max-content;max-width:100%;margin-inline:auto}
.plan-flow__outcome--detailed .plan-flow__result-icon{display:none}
.plan-flow__hero{display:block;padding:0 0 4px}
.plan-flow__outcome--detailed h4{padding:4px 0 8px;font-size:clamp(24px,6.2vw,30px);text-align:center}
.plan-flow__outcome--detailed h4 span{margin-inline:auto}
.plan-flow__outcome[data-plan-outcome="other"] h4 span{display:inline}
.plan-flow__result-summary{padding:0 4px 10px;font-size:14px}
.plan-flow__reason, .plan-flow__scope, .plan-flow__fit{margin-top:13px}
.plan-flow__outcome h5{gap:10px;font-size:17px}
.plan-flow__outcome h5::before, .plan-flow__outcome h5::after{width:22px}
.plan-flow__mobile-break{display:block}
.plan-flow__reason ul{padding:0 4px}
.plan-flow__reason li{padding-left:30px;font-size:14px}
.plan-flow__reason li::before{width:21px;height:21px;font-size:13px}
.plan-flow__scope{padding:16px 10px}
.plan-flow__scope ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-flow__scope li{padding:12px 8px;border-right:0!important;border-bottom:1px solid #d0e4e8}
.plan-flow__scope li:nth-child(odd){border-right:1px solid #d0e4e8!important}
.plan-flow__scope li:last-child:nth-child(odd){grid-column:1/-1;border-right:0!important}
.plan-flow__scope li::after{display:none!important}
.plan-flow__scope li strong{font-size:14px}
.plan-flow__scope li span{font-size:12px}
.plan-flow__scope-icon{width:56px;height:56px;padding:10px}
.plan-flow__fit>p{padding:16px;font-size:14px;text-align:left}
.plan-flow__fit--lead{grid-template-columns:58px minmax(0,1fr);gap:12px;padding:14px 12px}
.plan-flow__fit-icon{width:56px;height:56px;padding:11px;margin:0;align-self:start}
.plan-flow__fit--lead h5{text-align:left;font-size:15px;letter-spacing:0}
.plan-flow__outcome--detailed .plan-flow__scope h5{display:block}
.plan-flow__outcome--detailed .plan-flow__scope h5::before, .plan-flow__outcome--detailed .plan-flow__scope h5::after{display:none}
.plan-flow__fit--lead li{padding-left:28px;font-size:14px}
.plan-flow__fit--lead li::before{top:2px;width:21px;height:21px;font-size:13px}
.plan-flow__reason--emphasis{padding:18px 14px}
.plan-flow__reason--emphasis ul{padding:0 2px}
.plan-flow__reason--emphasis li{font-size:14px}
.plan-flow__scope-notes{grid-template-columns:1fr;gap:7px}
.plan-flow__scope-notes p{font-size:13px}}
@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. */
.plan-volume-note{margin:-5px 0 17px;color:#33616a;font-size:12px;line-height:1.5;text-align:center}
@media (min-width:961px){#pricing .fee-card__head{min-height:116px}
#pricing .fee-card:nth-child(-n/**/+2) .fee-card__primary{min-height:90px}
#pricing .fee-card:nth-child(-n/**/+2) .fee-card__description{min-height:76px}
#pricing .fee-card:first-child .fee-card__list{margin-top:16px}}
#compare-others .wrap{max-width:var(--max)}
#compare-others .sec-head{margin-bottom:34px}
#h-others{color:#213747;font-size:clamp(30px,4vw,48px);line-height:1.35;letter-spacing:.035em}
#h-others em{color:#218f9d;font-style:normal}
#compare-others .sec-lead{color:#34434b;font-size:17px}
#compare-others .other-compare-wrap{padding:0;border:1px solid #d1dfe3;border-radius:10px;background:#fff;overflow:hidden;box-shadow:none}
#compare-others .other-compare{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;background:#fff;font-size:17px;line-height:1.45}
#compare-others .other-compare__item{width:17%}
#compare-others .other-compare__wakatte{width:31%}
#compare-others .other-compare__peer{width:26%}
#compare-others .other-compare th, #compare-others .other-compare td{padding:18px 14px;border:1px solid #d9e4e8;border-radius:0;overflow-wrap:anywhere}
#compare-others .other-compare thead th{padding-block:21px;background:#eef3f5;color:#213747;font-size:19px;font-weight:700}
#compare-others .other-compare thead th:nth-child(2){background:#218f9d;color:#fff;font-size:23px}
#compare-others .other-compare thead th small{margin-top:2px;font-size:14px;font-weight:600}
#compare-others .other-compare tbody th, #compare-others .other-compare__stages th, #compare-others .other-compare__stages tr:nth-child(3) th, #compare-others .other-compare__stages tr:nth-child(4) th{background:#eef3f5!important;color:#213747!important;font-size:17px;font-weight:700}
#compare-others .other-compare tbody td{background:#fff;color:#263c49;font-weight:400}
#compare-others .other-compare tbody td:nth-child(2){background:#f0fafb;color:#0a8091;font-weight:700}
#compare-others .other-compare__metrics tr:nth-child(-n/**/+2) td{font-size:19px}
#compare-others .other-compare__metrics tr:nth-child(-n/**/+2) td:nth-child(2){font-size:27px}
@media (max-width:760px){#compare-others .wrap{padding-inline:12px}
#h-others{font-size:clamp(26px,6.8vw,36px)}
#compare-others .sec-lead{font-size:14px}
#compare-others .other-compare{font-size:clamp(10px,2.8vw,11px);line-height:1.35}
#compare-others .other-compare__item{width:19%}
#compare-others .other-compare__wakatte{width:29%}
#compare-others .other-compare__peer{width:26%}
#compare-others .other-compare th, #compare-others .other-compare td{padding:9px 4px}
#compare-others .other-compare thead th{font-size:clamp(10px,2.8vw,11px)}
#compare-others .other-compare thead th:nth-child(2){font-size:clamp(11px,3vw,12px)}
#compare-others .other-compare thead th small{font-size:9px}
#compare-others .other-compare tbody th, #compare-others .other-compare__stages th, #compare-others .other-compare__stages tr:nth-child(3) th, #compare-others .other-compare__stages tr:nth-child(4) th{font-size:clamp(10px,2.8vw,11px)}
#compare-others .other-compare__metrics tr:nth-child(-n/**/+2) td{font-size:clamp(11px,3.1vw,13px)}
#compare-others .other-compare__metrics tr:nth-child(-n/**/+2) td:nth-child(2){font-size:clamp(14px,4vw,17px)}}
.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. */
:is(#difference,#service,#price) .reason-cta--single .download-cta{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:min(560px,100%);min-height:82px;margin-inline:auto;padding:16px 22px;border:0;border-radius:12px;background:#f87808;box-shadow:0 5px 0 #b95d0d,0 11px 18px rgb(89 51 19 / 17%);color:#fff;font-size:20px;font-weight:900;line-height:1.25;text-align:center;text-decoration:none;white-space:nowrap;transition:filter .2s ease,box-shadow .2s ease}
:is(#difference,#service,#price) .reason-cta--single .download-cta:hover,:is(#difference,#service,#price) .reason-cta--single .download-cta:focus-visible{filter:brightness(1.06);box-shadow:0 5px 0 #b95d0d,0 13px 22px rgb(89 51 19 / 23%)}
:is(#difference,#service,#price) .reason-cta--single .download-cta:focus-visible{outline:3px solid #333;outline-offset:4px}
:is(#difference,#service,#price) .reason-cta--single .download-cta__badge{position:absolute;top:-15px;left:22px;display:grid;place-items:center;min-width:68px;min-height:29px;padding:2px 12px;border:2px solid #f87808;border-radius:999px;background:#fff;color:#e76800;font-size:14px;font-weight:900;line-height:1}
:is(#difference,#service,#price) .reason-cta--single .download-cta__icon{display:block;flex:none;width:30px;height:30px}
:is(#difference,#service,#price) .reason-cta--single .download-cta__label{min-width:0}
@media (max-width:767px){:is(#difference,#service,#price) .reason-cta--single .download-cta{gap:9px;min-height:64px;padding:14px 13px;border-radius:8px;font-size:clamp(14px,4vw,18px)}
:is(#difference,#service,#price) .reason-cta--single .download-cta__badge{top:-12px;left:12px;min-width:54px;min-height:23px;padding-inline:9px;font-size:11px}
:is(#difference,#service,#price) .reason-cta--single .download-cta__icon{width:23px;height:23px}}
@media (max-width:390px){:is(#difference,#service,#price) .reason-cta--single .download-cta{gap:5px;padding-inline:9px;font-size:14px}
:is(#difference,#service,#price) .reason-cta--single .download-cta__icon{width:19px;height:19px}}
/* Keep both service CTA blocks close to the content they follow. */
#price #compare .comparison-cta{margin:40px auto 0}
#price #compare-others .other-comparison-cta{margin:40px auto 0}
/* 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}
/* A visual choice, rather than a text-only row, for each recommendation path. */
#plan-finder .plan-flow__answer{grid-template-columns:34px minmax(0,1fr) 78px;grid-template-rows:minmax(58px,1fr) auto;grid-template-areas:"num label icon" "action action icon";column-gap:14px;row-gap:12px;min-height:172px;padding:20px 22px;background:linear-gradient(120deg,#fff 58%,#e8f8fa);border-color:#a8dce1;box-shadow:0 8px 20px rgb(22 100 110 / 9%)}
#plan-finder .plan-flow__answer>span:nth-child(2){align-self:center;padding:0;font-size:clamp(16px,1.6vw,20px);line-height:1.45}
#plan-finder .plan-flow__answer>span:nth-child(2)>strong,#plan-finder .plan-flow__answer>span:nth-child(2)>span{display:block}
#plan-finder .plan-flow__answer>span:nth-child(2)>strong{color:#0b8999;font-weight:900}
#plan-finder .plan-flow__choice-break{display:none}
#plan-finder .plan-flow__choice-number{align-self:start}
#plan-finder .plan-flow__choice-icon{grid-area:icon;align-self:center;width:78px;height:78px;padding:13px;border-radius:50%;background:#d9f2f5;color:#0b8899;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#plan-finder .plan-flow__choice-action{grid-area:action;display:flex;align-items:center;justify-content:space-between;width:min(100%,212px);min-height:40px;padding:7px 14px;border-radius:999px;background:#0b8f9e;box-shadow:0 3px 8px rgb(12 134 148 / 20%);color:#fff;font-size:13px;font-weight:800;line-height:1.2}
#plan-finder .plan-flow__choice-action b{font-size:20px;line-height:1}
#plan-finder .plan-flow__answer:hover .plan-flow__choice-action,#plan-finder .plan-flow__answer:focus-visible .plan-flow__choice-action{background:#087584}
#price-faq #h-faq span{display:inline-block}
@media (max-width:640px){
  #plan-finder .plan-flow__answer{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"num label" "action action";column-gap:10px;row-gap:9px;min-height:122px;padding:14px}
  #plan-finder .plan-flow__answer>span:nth-child(2){font-size:15px}
  #plan-finder .plan-flow__choice-break{display:block}
  #plan-finder .plan-flow__choice-icon{display:none}
  #plan-finder .plan-flow__choice-action{width:100%;min-height:36px;font-size:12px}
  #price-faq #h-faq span{display:block}
}
@media (max-width:360px){#plan-finder .plan-flow__answer>span:nth-child(2){font-size:14px}}