/* ===== トークン（指定色） ===== */
:root{
  --teal:#239DA5;        /* メイン */
  --teal-deep:#176D74;   /* 濃いティール（ボタン・リンク・小さい文字） */
  --teal-light:#8FCDD2;  /* 3段階の一番薄い側 */
  --mist:#E8F6F7;        /* 薄い背景 */
  --mist-2:#F4FAFA;      /* さらに薄い帯 */
  --white:#FFFFFF;
  --ink:#1B2527;         /* 本文（ティール寄りの黒） */
  --ink-2:#55676A;
  --ink-3:#7E8F92;
  --line:#D8E6E8;
  --line-2:#EAF1F2;
  --focus:#7FC9CF;
  --radius:6px;
  --gutter:clamp(16px,4vw,32px);
  --max:1120px;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",sans-serif;
  --font-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light;
}
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.9;-webkit-font-smoothing:antialiased}
h1, h2, h3, h4{font-family:var(--font-head);font-weight:700;line-height:1.45;letter-spacing:.02em;margin:0;font-feature-settings:"palt";text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--teal-deep)}
img{max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* ===== ボタン ===== */
/* ===== 下書きの印 ===== */
/* ===== ヘッダー ===== */
/* ===== ページ頭 ===== */
.crumbs{font-size:12px;color:var(--ink-3);padding-top:14px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs span{margin-inline:6px}
.phead{display:grid;grid-template-columns:1fr minmax(320px,470px);gap:40px;align-items:center;padding-block:24px 40px}
.phead h1{font-size:clamp(30px,4vw,40px);line-height:1.3}
.phead-lead{margin-top:16px;font-size:15px;color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;background:var(--mist);border-radius:var(--radius);padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);border:1px solid transparent;transition:border-color .15s}
.tile:hover{border-color:var(--teal-light)}
.tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tile-kicker{font-size:11px;color:var(--teal-deep);font-weight:700;letter-spacing:.04em}
.tile-title{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.5;font-feature-settings:"palt"}
.tile-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 14px;background:var(--teal-deep);color:#fff;border-radius:4px;font-size:13px;font-weight:700}
.tile-btn svg{width:12px;height:12px}
@media (max-width:860px){.phead{grid-template-columns:1fr;gap:24px}}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}
/* ===== 事実の帯 ===== */
/* ===== セクション共通 ===== */
.sec{padding-block:64px}
.sec--mist{background:var(--mist-2)}
.sec-head{text-align:center;margin-bottom:36px}
.sec-head h2{font-size:clamp(24px,3vw,30px)}
.sec-head h2::after{content:"";display:block;width:32px;height:3px;background:var(--teal);margin:14px auto 0}
.sec-lead{margin-top:14px;color:var(--ink-2);font-size:14.5px}
@media (max-width:640px){.sec{padding-block:48px}}
/* ===== 支援範囲の帯（プランの構造図） ===== */
/* ===== プランのカード ===== */
/* ===== 支援内容の比較表 ===== */
/* ===== オプション ===== */
/* ===== 料金のしくみ ===== */
/* ===== 原稿待ちの枠 ===== */
/* ===== 導入の流れ ===== */
/* ===== よくある質問 ===== */
/* ===== CTA ===== */
/* ===== フッター ===== */
/* ===== ページ切替（1ファイルで4ページ。実装時は1ページ1ファイルに分ける） ===== */
.page{display:none}
.page.is-active{display:block}
[id]{scroll-margin-top:84px}
/* ===== 理由へのアンカー ===== */
/* ===== 選ばれる理由（左右交互） ===== */
/* 図1: 見る数字の範囲 */
/* 図2: 初期戦略設計の入口と出口 */
/* 図3: 勤務地周辺への配信 */
/* 図4: 公式LINEの流れ */
/* 図5: 投稿データ */
/* ===== 一般的な運用代行との違い ===== */
/* ===== 向いている／向いていない ===== */
/* ===== 次に読むページ ===== */
/* ===== サービス内容・支援の流れ ===== */
/* ===== よくある質問（一覧） ===== */
/* ===== スマホのヘッダー（折り返し防止） ===== */
/* =====================================================================
   v2（2026-09-25）: カード・アイコン・角丸を減らし、図を画面風に。
   base / extra の後に読ませて上書きする
   ===================================================================== */
:root{--radius:0}
.tile, .tile-btn{border-radius:0}
/* 見出し: 左揃え・縦線。中央揃えは .sec-head--c だけ */
.sec-head{text-align:left;border-left:4px solid var(--teal);padding-left:18px;margin-bottom:32px}
.sec-head h2::after{display:none}
.sec-lead{margin-top:8px;max-width:46em}
.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（スマホ画面風） */
/* 図5: 投稿データ（数字＋扱う内容の一覧） */
/* 違いの表・向き不向き・次に読む: 箱をやめる */
/* サービス内容: 工程を罫線で並べる（丸数字をやめる） */
/* 料金: 対応範囲の図とオプション・導入の流れの箱をやめる */
/* よくある質問: スマホの目次をチップから 2 列の一覧に */
/* 向いている企業の印: チェック丸をやめて小さな点に */
/* 番号付きリスト（導入の流れ・工程）: ブラウザ既定の「1.」を出さない（番号は自前で描く） */
/* =====================================================================
   v3（2026-09-25）: wakatte.com に合わせる
   フォント・文字色・文字サイズ・行間・幅・部品の形を、本番 wakatte.com の
   main.bundle.css（2026-09-25 取得）と実測値に揃える。base / extra / v2 の後に読ませて上書き。
   ===================================================================== */
:root{
  --teal:#379faa;          /* .cl-blue: 見出し・枠線・Qの帯 */
  --teal-deep:#379faa;     /* 旧トークンの参照先も同じ色へ */
  --teal-light:#8fd0d6;
  --mist:#e5f4f5;          /* 帯・フッター・表の項目名・見出しの英字 */
  --mist-2:#f7feff;        /* FV の背景 */
  --warm:#fffbf8;          /* ご利用の流れの背景・おすすめ列 */
  --orange:#fb8b18;        /* .cl-orange: CTA ボタン・おすすめ・強調 */
  --orange-deep:#f87808;
  --ink:#333333;           /* 本文 */
  --ink-2:#333333;
  --ink-3:#555555;
  --gray:#909090;          /* 「一般的な運用代行」側の灰色 */
  --line:#cfe6e8;
  --line-2:#e5f4f5;
  --focus:#379faa;
  --radius:10px;
  --gutter:20px;
  --max:1080px;            /* .inner の max-width */
  --font-body:"Noto Sans JP",sans-serif;
  --font-head:"Zen Maru Gothic","Noto Sans JP",sans-serif;   /* h2 は丸ゴシック */
  --font-en:"Roboto",sans-serif;                              /* 見出しの後ろの英字 */
}
body{font-size:16px;line-height:1.7;color:#333;letter-spacing:normal}
h1, h2, h3, h4{font-feature-settings:normal;letter-spacing:0;line-height:1.5;text-wrap:balance}
h3, h4{font-family:var(--font-body);font-weight:700}
a{color:var(--teal)}
p{line-height:1.7}
.wrap{max-width:1080px;padding-inline:20px}
/* ボタン: 橙の塗り（資料）と橙の枠（相談）。角丸 10px・影あり */
/* ヘッダー: ロゴ左・メニュー右・影。文字は 16px 500 */
/* ページ頭 */
.crumbs{font-size:12px;color:#555}
.phead{padding-block:28px 44px;gap:48px}
.phead h1{font-family:var(--font-body);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1.25;letter-spacing:-.04em;color:#333}
.phead-lead{font-size:16px;line-height:1.7;color:#333;margin-top:18px}
.tile{border:2px solid var(--teal);border-radius:10px;background:#fff;padding:20px 18px 18px}
.tile:hover{background:#fff;border-color:var(--orange)}
.tile-kicker{color:var(--teal);font-weight:700;font-size:14px}
.tile-title{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.4;color:#333}
.tile-btn{background:var(--orange);color:#fff;border-radius:10px;font-weight:700;font-size:15px;padding:12px 16px;text-align:center;box-shadow:0 3px 3px rgba(0,0,0,.15)}
/* 数字の帯 */
/* 節の見出し: 丸ゴシック・ティール・中央。後ろに Roboto の英字（data-en） */
.sec{padding-block:64px 60px}
.sec-head{text-align:center;border-left:0;padding-left:0;margin-bottom:36px;padding-top:36px}
.sec-head h2{position:relative;z-index:1;font-family:var(--font-head);font-weight:700;font-size:32px;letter-spacing:.05em;color:var(--teal);line-height:1.5}
.sec-head h2::after, .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}
/* 理由へのアンカー: ティール枠の丸いチップ */
/* 選ばれる理由 */
/* 違いの表: 料金表と同じ、ティールの罫線と帯 */
/* 向いている企業: ティール枠のカード＋チェック。おすすめしない側は灰色の枠＋バツ */
/* 次に読む */
/* サービス内容: 工程はティール枠のカード＋番号の丸 */
/* 料金: 対応範囲の図 */
/* 料金: プランのカード（おすすめは橙） */
/* 料金: 比較表（列の見出しはティールの帯・項目名は薄いティール） */
/* 料金: オプション */
/* 料金: 導入の流れ（本番の「ご利用の流れ」と同じ、縦に並ぶカードと矢印） */
/* よくある質問: Q はティールの帯・答えは枠の中（開閉式）。料金ページの抜粋も同じ */
/* 共通 CTA: ティールの帯に白い箱、橙のボタン 2 つ */
/* フッター: 薄いティール・12px・左に会社概要とプライバシーポリシー、右に © */
/* 比較表: 3プランを同じ配色にして、支援範囲だけを比較しやすくする */
/* 共通 CTA の中身（base の .cta h2 / .cta-box を上書き） */
/* 導入の流れ: 番号の箱を左に縦いっぱい、右に題名・期間・本文（本番と同じ並び） */
/* プランの箇条書き: 丸なしのチェック（本番と同じ 13×10） */
.tile-title{font-size:16px}
/* 日本語の見出しは普通に折り返す（balance だと単語の途中で割れる） */
h1, h2, h3, h4, .tile-title{text-wrap:wrap}
/* よくある質問: スマホでは目次を上に 1 列で（v3 の 240px 指定が extra のスマホ用を上書きしていた） */
/* ===== 導入事例（2026-09-25 原稿到着） ===== */
/* 他の実績を知りたい方へ */
/* スマホ: 事例の脇（ボタンの文が長く nowrap のため）が 1fr の最小幅を押し広げて右の余白へはみ出していた。列を minmax(0,1fr) にし、脇のボタンだけ折り返しを許す */
/* トップページと共通の見た目。下書き固有の本文や図の構造は維持する。 */
/* トップと同じ高さ、ロゴ、ナビ間隔。 */
/* FVと同じ明るい青緑のアクセントを、詳細ページの冒頭には控えめに使う。 */
.page > .wrap:first-child{position:relative;isolation:isolate}
.page > .wrap:first-child::before{content:"";position:absolute;inset:0 0 auto;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(145deg,transparent 0 48%,rgba(169,237,240,.18) 48% 50%,transparent 50% 100%)}
.phead{position:relative;min-width:0}
.phead > *{min-width:0}
.phead h1{font-family:var(--font-body);font-weight:900;line-height:1.3;color:#333}
.phead-lead{max-width:42em}
.tiles{min-width:0}
.tile{min-width:0}
.tile-btn{min-height:44px;display:inline-flex;justify-content:center;align-items:center}
.tile[href*="#free-consult"] .tile-btn{background:#fff;color:#fb8b18;border:2px solid #fb8b18}
.tile[href^="#"] .tile-btn{background:#379faa;color:#fff}
/* トップのCTAに合わせて2ボタンに統一。 */
/* 表や長文の幅が画面全体を押し広げないようにする。 */
.page, .sec, .wrap{min-width:0}
@media (max-width:1100px){body.is-menu-open{overflow:hidden}}
@media (max-width:760px){.phead{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:24px 38px}
.phead h1{font-size:clamp(30px,8vw,38px)}
.phead-lead{font-size:15px}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{padding:16px 14px}
.tile-title{font-size:15px}}
@media (max-width:480px){.sec-head h2[data-en]::before{font-size:clamp(30px,9vw,42px)}
.tiles{grid-template-columns:minmax(0,1fr)}
.tile{gap:6px}}
/* Give the three detailed phase headings a clear visual hierarchy. */
/* Editable HTML diagrams shared by the reason and service pages. */
/* The service overview reads as three connected phases, with connected steps inside each phase. */
/* The detailed initial strategy is a connected, six-node process diagram. */
/* Five illustrated reasons: vector artwork with real, selectable Japanese text. */
/* 01 — the two paths are read across in the same order. */
/* 02 — four inputs converge on an editorial output. */
/* 03 — broad reach versus a defined recruitment area. */
/* 04 — the LINE support sequence retains the reference's five interventions. */
/* 05 — data, trend and company context combine in an original plan. */
/* Recruitment-stage comparison under the five reasons. */
/* Pricing page: make the shared output, comparison and consultation easy to scan. */
/* Comparison with other services stays a real table at every width. */
/* Match the vertical numbered flow on wakatte.com. */
/* Pricing mechanism: three clear cost categories with a visible addition. */
/* Service page: month-by-month client and agency responsibilities. */
/* Pricing page option cards: spacious desktop layout and clear price hierarchy. */
/* Plan guide: every question, branch and explanation exists in the initial HTML. */
.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{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{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{display:inline-flex}
.plan-flow__back: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-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__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__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__mobile-break{display:none}
.plan-flow__outcome[data-plan-outcome="other"] h4 span{display:inline}
@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__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[data-plan-outcome="other"] h4 span{display:inline}
.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}}
@media (prefers-reduced-motion:reduce){.plan-flow__answer{transition:none}}
/* Shared layout for all three recruitment case studies. */
/* Responsive readability fixes found in the 320–1920px page audit. */
/* Pricing details and restrained competitor comparison. */
/* 閉じるボタンは下へスクロールしても上に残す（スマホは全画面なので、これが無いと閉じ方が分からない） */
/* --- 予約（booking-wakatte.html と同じ見た目。3ステップタブ / 週送りグリッド） --- */
/* ハニーポット：画面には出さない（bot だけが埋める） */
/* Detailed service phases: heading, compact diagram, then one explanation. */
/* Shared CTA designs for the reasons, service, and pricing pages. */
/* Keep both service CTA blocks close to the content they follow. */
/* Keep the FAQ actions visible below the category list on desktop. */
: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}
#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}
@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}}
@media (max-width:360px){#plan-finder .plan-flow__answer>span:nth-child(2){font-size:14px}}