/* ══════════════════════════════════════════════
   モデルプランのページ専用スタイル
   ・common.css を読み込んだ「後」に読むこと
   ・すべての指定が .plan-page の中だけに効く
   ══════════════════════════════════════════════ */

/* 見出しの中で色を変える文字 */
.plan-page .page-hero h1 em,
.plan-page .sec-title em,
.plan-page .book h2 em{font-style:normal;color:var(--mud)}

.plan-page .lede + .lede{margin-top:1rem}
.plan-page .lede b{font-weight:700;color:var(--sand)}

/* ── 3つのプランへの入口 ────────────────────── */
.plan-page .pl-nav{
  display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.plan-page .pl-nav{grid-template-columns:repeat(3,1fr)}}
.plan-page .pl-nav a{
  display:block;background:var(--ink);padding:clamp(20px,2.6vw,30px);
  text-decoration:none;transition:background .2s ease}
.plan-page .pl-nav a:hover{background:#16281F}
.plan-page .pl-nav .no{
  display:block;font-family:"Roboto Mono",monospace;font-size:.68rem;
  letter-spacing:.2em;color:var(--mud);margin-bottom:.7rem}
.plan-page .pl-nav .ti{
  display:block;font-weight:900;font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.5;color:var(--sand);margin-bottom:.4rem}
.plan-page .pl-nav .who{
  display:block;font-weight:900;font-size:1rem;color:var(--sand);margin-bottom:.3rem}
.plan-page .pl-nav .who b{font-size:1.9rem;color:var(--mud);margin-right:.1em;line-height:1.2}
.plan-page .pl-nav .me{
  display:block;font-size:.88rem;color:#B2B0A5;line-height:1.7}

/* ── 写真＋当日の流れ ─────────────────────── */
.plan-page .pl-duo{
  display:grid;gap:clamp(20px,3vw,40px);margin:1.8rem 0;align-items:start}
@media(min-width:860px){.plan-page .pl-duo{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.plan-page .pl-duo picture{display:block}
.plan-page .pl-duo img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* 当日の流れ（時刻と内容の2列） */
.plan-page .pl-time{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plan-page .pl-time li{
  display:grid;grid-template-columns:4.6rem 1fr;gap:.2rem 1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.plan-page .pl-time .t{
  font-family:"Roboto Mono",monospace;font-size:.82rem;letter-spacing:.06em;
  color:var(--mud);line-height:1.9;white-space:nowrap}
.plan-page .pl-time .w{
  font-size:.94rem;line-height:1.9;color:#B2B0A5}
.plan-page .pl-time .w b{
  display:block;font-weight:900;font-size:1rem;color:var(--sand);margin-bottom:.15rem}

/* ── 料金の内訳 ──────────────────────────── */
.plan-page .fee{
  border-top:1px solid var(--line);margin:1.6rem 0 1.2rem;padding:0;list-style:none}
.plan-page .fee li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.plan-page .fee .n{font-weight:700;font-size:.98rem;line-height:1.6}
.plan-page .fee .n small{
  display:block;font-weight:400;font-size:.85rem;color:#B2B0A5;line-height:1.75;margin-top:.2rem}
.plan-page .fee .y{
  font-family:"Anton",sans-serif;font-size:clamp(1.2rem,2.4vw,1.5rem);
  letter-spacing:.03em;color:var(--sand);white-space:nowrap}
.plan-page .fee .y span{
  display:block;text-align:right;margin-top:.2rem;font-weight:400;
  font-family:"Roboto Mono",monospace;font-size:.62rem;letter-spacing:.14em;color:var(--moss)}
/* 合計の行だけ目立たせる */
.plan-page .fee li.is-total{
  border-bottom:0;border-top:2px solid var(--mud);margin-top:.4rem;padding-top:1.2rem}
.plan-page .fee li.is-total .n{font-size:1.05rem}
.plan-page .fee li.is-total .y{
  font-size:clamp(1.7rem,4vw,2.4rem);color:var(--mud)}
.plan-page .fee li.is-total .y span{color:var(--mud-lt);font-size:.66rem}

.plan-page .fee-note{margin:0;font-size:.88rem;color:#B2B0A5;line-height:1.85}
.plan-page .fee-note b{color:var(--sand);font-weight:700}

/* ── 入れ替え・追加 ───────────────────────── */
.plan-page .pl-opt{
  display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1.6rem 0 1.4rem}
@media(min-width:680px){.plan-page .pl-opt{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.plan-page .pl-opt{grid-template-columns:repeat(3,1fr)}}
.plan-page .pl-opt > div{background:var(--ink);padding:1.1rem 1.2rem}
.plan-page .pl-opt b{
  display:block;font-weight:900;font-size:.98rem;color:var(--sand);margin-bottom:.3rem}
.plan-page .pl-opt span{
  display:block;font-size:.88rem;line-height:1.8;color:#B2B0A5}

/* ── ボタンの上の余白 ───────────────────────── */
.plan-page .panel__body > .btnrow{margin-top:1.8rem}
.plan-page .book .inner .btnrow{margin-top:1.4rem}

/* ── 各プランの人数（先頭に大きく） ─────────────
   2人で読んで「高い」と思われないように、何名の料金かを最初に見せる */
.plan-page .pl-who{
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:.2rem .6rem;
  margin:0 0 1.4rem;padding:0 0 1rem;border-bottom:2px solid var(--mud)}
.plan-page .pl-who .num{
  font-weight:900;font-size:clamp(2.6rem,7vw,3.8rem);line-height:1;color:var(--mud)}
.plan-page .pl-who .num small{font-size:.42em;margin-left:.1em;color:var(--sand)}
.plan-page .pl-who .txt{
  font-weight:900;font-size:clamp(1.1rem,2.6vw,1.45rem);line-height:1.4;color:var(--sand);padding-bottom:.2rem}
.plan-page .pl-who .txt small{
  display:block;font-weight:400;font-size:.62em;color:#B2B0A5;margin-top:.15rem}