/* bakuyasu/price ページ専用CSS
   読み込み順: 共通DS(techsuite-ds.css) → 配色(theme.css) → このファイル。
   ここに書いてよいのは「このページにしか無いセクションの構造」だけ
   （guidelines/02-lp.md「CSSの3層」）。2ページ目で必要になったらDSへ昇格させる。 */

/* ---- bkys-price ---- */
      /* --- 図解の共通枠 --- */
      .dgm{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:clamp(18px,3vw,30px);overflow-x:auto}
      .dgm svg{display:block;width:100%;min-width:640px;height:auto}
      .dgm_cap{margin-top:14px;font-size:12.5px;color:var(--fg-muted);line-height:1.7}

      /* --- ページ見出し（ヒーロー無しの簡易タイトル帯） --- */
      .ptitle{padding-block:clamp(40px,5vw,72px) clamp(28px,3.5vw,44px)}
      .ptitle h1{margin-top:10px}

      /* --- プランカード --- */
      .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(26px,4vw,38px)}
      .plan{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;position:relative}
      .plan--reco{border-color:var(--accent);box-shadow:0 10px 28px var(--accent-glow)}
      .plan_badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:4px 14px;white-space:nowrap}
      .plan_kicker{font-size:11.5px;font-weight:700;color:var(--accent-2);letter-spacing:.04em}
      .plan_name{margin:8px 0 0;font-weight:700;font-size:clamp(17px,2vw,19px);line-height:1.45;color:var(--fg)}
      .plan_for{margin:10px 0 0;font-size:12.5px;color:var(--fg-muted);line-height:1.75;min-height:3.4em}
      .plan_price{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border)}
      .plan_price .v{font-family:var(--font-serif);font-style:italic;font-weight:700;color:var(--accent);font-size:clamp(24px,3vw,31px);line-height:1.1}
      .plan_price .v .u{font-family:var(--font-jp);font-style:normal;font-size:.42em;font-weight:700;color:var(--accent-2);margin-left:3px}
      .plan_price .v--quote{font-family:var(--font-jp);font-style:normal;font-size:clamp(19px,2.2vw,23px);color:var(--dark)}
      .plan--quote{background:var(--bg-soft);border-style:dashed}
      .plan_price .lot{margin-top:7px;font-size:12px;font-weight:700;color:var(--fg-muted)}
      .plan_list{margin:16px 0 0;padding:0;list-style:none}
      .plan_list li{position:relative;padding-left:20px;font-size:13px;line-height:1.85;color:var(--fg)}
      .plan_list li+li{margin-top:5px}
      .plan_list li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--accent);opacity:.55}
      .plan_foot{margin-top:auto;padding-top:18px}
      /* カード内のボタンは DS の .btn--compact を併記する（HTML側）。
         4カラムのカード幅(約284px)では DS既定の min-width:230px がはみ出すため。 */

      /* --- 費用構成の内訳 --- */
      .costs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(24px,3vw,32px)}
      .cost{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:18px 18px 20px}
      .cost .n{font-size:11px;font-weight:700;color:var(--fg-dim);letter-spacing:.06em}
      .cost .t{margin-top:6px;font-weight:700;font-size:14.5px;color:var(--fg)}
      .cost .d{margin-top:8px;font-size:12.5px;line-height:1.8;color:var(--fg-muted)}

      .note{margin-top:16px;font-size:12px;color:var(--fg-dim);line-height:1.85}

      @media(max-width:1080px){ .plans{grid-template-columns:repeat(2,1fr)} }
      @media(max-width:640px){
        .plans{grid-template-columns:1fr}
        .costs{grid-template-columns:1fr}
        .plan_for{min-height:0}
      }
      @media(max-width:1080px) and (min-width:641px){ .plan_for{min-height:0} }