/* =====================================================================
   コベドー塾 料金ページ専用CSS（price/index.html だけが読む。common.css・top.css の後）
   科目数ごとの月額表、0円の3枚、お支払い方法、利用規約への案内
   ===================================================================== */

/* ---------- 黒板の月謝の札（top.css の .fees を使う。ページでは見出しの直下に置く） ---------- */
.price-board .fees{margin-top:30px}
.price-board .board-sub{margin-top:18px;font-size:16px;color:#D9E6EF;max-width:40em}

/* ---------- 科目数ごとの月額表（白いカードの中に表） ---------- */
/* 表の上の一言：「中学生の場合」の札＋条件 */
.grade{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:16px;font-weight:700;color:var(--ink)}
.grade .tag{display:inline-block;min-height:36px;line-height:32px;padding:0 14px;border:2px solid var(--ai);border-radius:999px;color:var(--ai);font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:900}
.price-table{margin-top:16px;padding:8px 20px 14px}
.price-table .tbl{margin-top:0}
.price-table .tbl th:first-child,.price-table .tbl td:first-child{white-space:nowrap;font-weight:700}
.price-table .tbl td.num{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:900;font-size:22px;color:var(--ai)}
.price-table .tbl td.num small{font-family:"BIZ UDPGothic",sans-serif;font-weight:400;font-size:14px;color:var(--ink-2);margin-left:2px}
.price-table .tbl td.exp{font-size:15px;color:var(--ink-2);line-height:1.6}
.price-table .tbl td:not(.num) > small{display:block;font-size:14px;font-weight:400;color:var(--ink-2);line-height:1.5;margin-top:2px}
.price-table .tbl tr.total td{color:var(--on-yellow)}
.price-table .tbl tr.total td.num,.price-table .tbl tr.total td.exp,.price-table .tbl tr.total td.num small{color:var(--on-yellow)}
.price-table .tbl tr.total td:first-child{border-radius:8px 0 0 8px}
.price-table .tbl tr.total td:last-child{border-radius:0 8px 8px 0}

/* 開講する科目：集団／個別の小見出し＋教科のチップ */
.subj-h{margin-top:22px;font-size:17px;font-weight:700;color:var(--ink)}
.subj-h + .subjects{margin-top:10px}
.subjects{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;padding:0}
.subjects li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border:2px solid var(--ai);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700;font-size:17px}
.subjects li.soon{border-style:dashed;color:var(--ink-2)}
.subjects li small{font-size:14px;font-weight:400;color:var(--ink-2)}
.subjects li .dot{width:12px;height:12px;border-radius:50%;background:var(--yellow);flex:none}
.subjects li.soon .dot{background:transparent;border:2px solid var(--ink-2)}

/* ---------- 月謝のほかにかかるお金：0円の3枚＋別料金なし ---------- */
.zeros{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px}
.zeros .card{text-align:center;padding:22px 16px 20px}
.zeros .card h3{font-size:20px;color:var(--ink)}
.zeros .card .big{display:block;margin-top:6px;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:900;font-size:clamp(44px,5.6vw,64px);line-height:1.1;color:var(--ai)}
.zeros .card .big small{font-size:.5em;margin-left:2px}
.zeros .card p{margin-top:8px;font-size:15px;color:var(--ink-2)}
.only-fee{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:18px;font-weight:700}
.only-fee .tag{display:inline-block;background:var(--yellow);color:var(--on-yellow);padding:4px 14px;border-radius:8px;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:900}

/* ---------- お支払い方法：ピクト＋名前＋一言の3枚 ---------- */
.pay{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px}
.pay .card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 16px 18px}
.pay .card .pict{width:min(70%,150px);margin-bottom:10px}
.pay .card h3{font-size:21px}
.pay .card p{margin-top:6px;font-size:15px;color:var(--ink-2)}
.pay .card .kari{margin-left:0;margin-top:8px;vertical-align:0}

/* ---------- 画面幅 ---------- */
@media (max-width:900px){
  .zeros,.pay{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .price-table{padding:4px 12px 10px}
  .price-table .tbl td.num{font-size:19px}
  /* スマホでは表の「受けられる科目」の補足を出さない（すぐ下の「開講する科目」に同じことがある） */
  .price-table .tbl td:nth-child(2) > small{display:none}
  .subjects li{font-size:16px;padding:6px 12px}
  .zeros,.pay{grid-template-columns:1fr;gap:12px}
  .zeros .card .big{font-size:48px}
  .only-fee{font-size:17px}
}