/* ==========================================================
   場面15｜入口（料金）
   ========================================================== */
.s15{background:var(--color-bg);min-height:0;padding:130px 0}
.s15 .h2{text-align:center}
.s15-lead{max-width:640px;margin:0 auto 64px;text-align:center}
/* 2026-09-15 中島さんのご指示で余白を2か所足した（お電話でのご指摘）。
   ① 上 … リード文と白い帯がくっついていた。
      原因は base の `p:last-child{margin-bottom:0}`。こちらの方が指定が強く（0-1-1 > 0-1-0）、
      `.s15-lead{margin:0 auto 64px}` の 64px を打ち消していた。リード文がその wrap の最後の <p> のため。
      🚨 .s15-lead 側を強くして戦うのではなく、**帯の側に margin-top を持たせて**解決している
         （.common は <div> なので p:last-child の影響を受けない＝壊れにくい）。
   ② 左右 … 帯に横の余白が無く、文字が白い帯の端に貼りついていた。
   スマホ側は base-e-responsive.css の .common でも同じ2点を足してある。 */
.common{background:var(--color-white);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:32px;margin:64px auto 72px}
.common-title{font-family:var(--font-heading);font-size:15px;letter-spacing:.1em;color:var(--color-text-sub);margin:0 0 14px}
.common li{font-size:15px;line-height:2.0;margin-bottom:6px}
.common li:last-child{margin-bottom:0}
.plans-lead{font-family:var(--font-heading);font-size:clamp(18px,2.6vw,22px);text-align:center;margin:0 0 56px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:0 auto}
.plans > :nth-child(1){--rv-delay:0s}
.plans > :nth-child(2){--rv-delay:.14s}
.plans > :nth-child(3){--rv-delay:.28s}
.plan{border-top:1px solid var(--color-line);padding:30px 0 0;display:flex;flex-direction:column}
.plan--std{border-top-color:var(--color-blue-mid)}
.plan-name{font-family:var(--font-heading);font-weight:400;font-size:17px;letter-spacing:.06em;margin:0 0 14px}
.plan--std .plan-name{font-weight:600}
.plan-price{font-family:var(--font-heading);font-size:27px;line-height:1.5;letter-spacing:.02em;margin:0 0 18px;color:var(--color-navy)}
.plan--std .plan-price{font-size:30px}
.plan-price span{font-size:14px;letter-spacing:.04em}
.plan-list{margin:0 0 28px}
.plan-list li{font-size:15px;line-height:1.95;margin-bottom:8px;color:var(--color-text)}
/* プランごとの申込みボタン（2026-09-13 追加・SUPPORT LOUNGE【回答5】）
   3つのプランを見せている以上、押したプランの申込み画面へ行くのが正しい形、とのご指示。
   計測用の目印は、こちらでは一切付けない（【指示10】）。
   テーマ側が href に /join/ を含むリンクを自動で拾うため、付けると二重に数えてしまう。 */
.plan-btn{
  display:flex;align-items:center;justify-content:center;
  margin-top:auto;min-height:48px;
  background:var(--color-navy);color:#fff;
  font-family:var(--font-heading);font-size:15px;letter-spacing:.06em;
  text-decoration:none;padding:12px 16px;
}
.s15-after{margin-top:72px}
.s15-after .note-c{font-size:15px;color:var(--color-text-sub);margin:0 0 1.2em}
.s15-after .closing{margin:0}
/* ==========================================================
   場面15・案A（2026-09-15・中島さんのご判断で確定）
   🚨 文章は1文字も足していない。料金・機能・ボタンの文言も変えていない。
      変えたのは、大きさ・色・書体・余白・地の明暗だけ。
   🚨 「おすすめ」「人気No.1」のような販売表現は使っていない。
      真ん中であることは、明るさと位置だけで示している。
   ========================================================== */

/* (1) 金額と「相談できる相手」の主従を入れ替える
   見出しの上に既にある「違うのは、迷ったときに相談できる相手です」が違いの軸。
   その行（.plan-list）がいちばん小さく置かれていたので、主役にする。
   プラン名は小さな見出しへ、金額は一段下げる（読めなくはしない）。 */
.plan-name{font-size:13px;letter-spacing:.12em;color:var(--color-text-sub);margin:0 0 12px}
.plan--std .plan-name{font-weight:400;color:var(--color-navy)}
.plan-price{font-size:24px;margin:0 0 22px}
.plan--std .plan-price{font-size:26px}
.plan-list li{font-family:var(--font-heading);font-size:17px;line-height:1.85;letter-spacing:.02em;margin-bottom:10px}

/* (2) 真ん中だけ、白い台に載せる
   色は増やしていない。場面15がすでに使っている「淡い青の地に白」の2色だけ。
   🚨 外へ広げた分と同じだけ内側に余白を入れているので、
      3つの文字の位置とボタンの高さは今までどおりそろう（台だけが外へ広がる）。 */
.plan--std{
  background:var(--color-white);
  border-top-color:var(--color-navy);
  margin:-28px -22px;
  padding:58px 22px 28px;
}