/* =====================================================================
   コベドー塾 トップページ専用CSS（index.html だけが読む）
   最初の画面（黒板＋アイレ）、料金（科目ごとの月謝の札）、料金比較グラフ、授業動画の横帯
   暫定版（2026-10-07）：集団授業は英語・数学の2科目。段階的な値下がりの式（.formula）は削除
   ===================================================================== */

/* ---------- 最初の画面：藍の黒板に極太のチョーク書き＋アイレ ---------- */
.hero{padding:36px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,37vw,470px);gap:0 16px;align-items:end}
.hero-text{padding:28px 0 56px;align-self:center}
.hero-kicker{font-size:clamp(22px,2.4vw,28px);line-height:1.5;color:var(--yellow)}
.hero-h{margin-top:4px;line-height:1.08;letter-spacing:.01em}
.hero-h .l1,.hero-h .l2{display:block;white-space:nowrap}
.hero-h .l1{font-size:clamp(40px,5vw,64px);color:var(--chalk)}
.hero-h .l2{font-size:clamp(46px,5.5vw,70px);color:var(--yellow);margin:.06em 0 .04em}
.hero-h .nw{white-space:nowrap}
/* 値段は控えめに1行（大きくしない） */
.hero-sub{margin-top:18px;font-size:clamp(16px,1.5vw,19px);font-weight:700;line-height:1.6;color:#D9E6EF;letter-spacing:.02em}
/* 「復習」の赤ペン下線（文字を包む要素の中に置き、幅に追従。文字に重ねず、文字の下に引く） */
.uline{position:relative;display:inline-block;padding:0 .04em}
.uline svg{position:absolute;left:-.06em;bottom:-.26em;width:calc(100% + .12em);height:.3em;overflow:visible;pointer-events:none}
.uline .stroke{stroke:var(--pen-board);stroke-linecap:round;stroke-linejoin:round;fill:none}
.uline .s1{stroke-width:13}
.uline .s2{stroke-width:6}
.hero-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.hero-cta .btn{min-width:300px}
.hero-figure{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;padding-bottom:0;margin-top:-16px}
.hero-aire{width:clamp(300px,33vw,430px);height:auto;display:block;flex:none}
.hero-cap{writing-mode:vertical-rl;text-orientation:mixed;font-size:14px;line-height:1.4;color:#C9D9E4;margin:0 0 28px;letter-spacing:.08em;white-space:nowrap}
.hero .wrap > *{min-width:0}

/* ---------- 料金（黒板の上に、科目ごとの月謝の札） ---------- */
.fees{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px 16px}
.fees li{display:inline-flex;align-items:baseline;gap:12px;padding:10px 22px;border:2px solid rgba(255,255,255,.55);border-radius:12px;color:var(--chalk)}
.fees .subj{font-family:"Klee One","Hiragino Sans",serif;font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.3}
.fees .fee{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:900;font-size:clamp(24px,2.8vw,34px);line-height:1.2;color:var(--yellow)}
.fees-sub{margin-top:16px;font-size:16px;line-height:1.7;color:#D9E6EF;max-width:40em}
.zero-line{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 14px}
.zero-line span{background:var(--yellow);color:var(--on-yellow);font-weight:900;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-size:clamp(20px,2.4vw,28px);padding:6px 18px;border-radius:8px;line-height:1.4}
.zero-note{margin-top:14px;font-size:16px;color:#D9E6EF}

/* ---------- 料金比較グラフ（横棒・0起点・金額に比例。CSSのみ） ---------- */
.cmp{margin-top:44px;--c1:#165E83;--c2:#3F8BB5;--c3:#6FB3DA;--c4:#A9D4EA;--c5:#0F4765;--cmp-ink:var(--ink);--cmp-sub:var(--ink-2);--cmp-line:var(--grid);--cmp-tab:var(--ai)}
.board .cmp{--c1:#6FB3DA;--c2:#3F8BB5;--c3:#A9D4EA;--c4:#D6EAF5;--c5:#2C6E95;--cmp-ink:var(--chalk);--cmp-sub:#C9D9E4;--cmp-line:rgba(255,255,255,.25);--cmp-tab:var(--chalk)}
.cmp-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 20px}
.cmp-title{font-family:"Klee One","Hiragino Sans",serif;font-weight:600;font-size:22px;color:var(--cmp-ink);margin:0;line-height:1.4}
.cmp-switch{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;padding:4px 10px;border:0;background:transparent;color:var(--cmp-ink);font:inherit;cursor:pointer;border-radius:10px}
.cmp-switch:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.sw-row{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.sw-l{color:var(--cmp-sub)}
.cmp-switch[aria-checked="false"] .sw-month,.cmp-switch[aria-checked="true"] .sw-year{color:var(--cmp-ink)}
.sw-track{position:relative;width:60px;height:30px;border-radius:15px;background:var(--cmp-sub);flex:none}
.sw-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--yellow);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s ease}
.cmp-switch[aria-checked="true"] .sw-knob{transform:translateX(30px)}
.cmp-switch[aria-checked="true"] .sw-track{background:var(--cmp-tab)}
.sw-hint{font-size:14px;color:var(--cmp-sub);line-height:1.4}
.sw-hint b{color:var(--cmp-ink);font-weight:700}
.cmp-panel{margin-top:16px}
.cmp-panel[hidden]{display:none}
.cmp-cond{font-size:15px;color:var(--cmp-sub);margin:0 0 6px}
.cmp-group{margin-top:14px}
.cmp-group h4{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--cmp-ink)}
.bar-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:4px 14px;align-items:center;padding:8px 0;border-top:1px solid var(--cmp-line)}
.bar-row:last-child{border-bottom:1px solid var(--cmp-line)}
.bar-name{font-size:16px;font-weight:700;color:var(--cmp-ink);line-height:1.4}
.bar-name small{display:block;font-size:14px;font-weight:400;color:var(--cmp-sub)}
.bar-name .time{display:block;font-size:15px;font-weight:700;color:var(--cmp-ink);line-height:1.4}
.cmp-sub{margin-top:18px;border-collapse:collapse;font-size:15px;color:var(--cmp-ink)}
.cmp-sub caption{text-align:left;font-weight:700;padding-bottom:6px;color:var(--cmp-ink)}
.cmp-sub th,.cmp-sub td{padding:6px 14px 6px 0;border-bottom:1px solid var(--cmp-line);text-align:left;white-space:nowrap}
.cmp-sub thead th{font-weight:400;color:var(--cmp-sub);font-size:14px}
.cmp-sub tbody th{font-weight:700}
.bar-track{display:flex;align-items:center;gap:10px;padding-right:112px;min-width:0}
.bar{display:flex;height:30px;border-radius:4px;overflow:hidden;flex:none;transform-origin:left center}
.bar .seg{height:100%;flex:none}
.bar .seg + .seg{border-left:1px solid rgba(255,255,255,.7)}
.seg.s1{background:var(--c1)}.seg.s2{background:var(--c2)}.seg.s3{background:var(--c3)}.seg.s4{background:var(--c4)}.seg.s5{background:var(--c5)}
.seg.own{background:var(--yellow)}
.bar-val{font-weight:700;font-size:17px;color:var(--cmp-ink);white-space:nowrap;flex:none;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
.bar-val small{font-weight:400;font-size:14px;color:var(--cmp-sub);margin-left:4px;font-family:"BIZ UDPGothic",sans-serif}
.board-ready .cmp:not(.on) .bar{transform:scaleX(0)}
.board-ready .cmp:not(.on) .bar-val{opacity:0}
.legend{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--cmp-sub)}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:3px;display:inline-block}
.cmp-note{margin-top:14px;font-size:14px;line-height:1.7;color:var(--cmp-sub);max-width:46em}
.cmp-note p + p{margin-top:4px}

/* ---------- 授業動画（本物のスライドの横帯） ---------- */
.videos{padding:72px 0 60px;background-color:var(--shiraai)}
.videos.ruled{background-color:var(--shiraai)}
.frame{position:relative;display:block;text-decoration:none;color:var(--ink);border:1px solid var(--grid);background:var(--box);border-radius:8px;overflow:hidden}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.frame .play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--pen);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,255,255,.8)}
.frame .play svg{width:22px;height:22px;margin-left:3px}
.frame:hover .play{background:var(--ai)}
.strip-outer{margin-top:30px}
.strip{display:flex;gap:20px;overflow-x:auto;padding:4px 20px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ai) transparent;max-width:1040px;margin:0 auto;list-style:none}
.strip > li{flex:0 0 440px;scroll-snap-align:start}
.strip-cap{display:block;margin-top:8px;font-size:16px;font-weight:700;line-height:1.6}
.videos .more{margin-top:18px;font-size:17px}
.videos .more a{font-weight:700}

/* ---------- 画面幅 ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-text{padding:24px 0 10px}
  .hero-figure{justify-content:flex-end;margin-top:0}
  .hero-aire{width:clamp(280px,46vw,400px)}
}
@media (max-width:640px){
  .hero{padding-top:20px}
  .hero .wrap{gap:0}
  .hero-text{display:contents}
  .hero-kicker{order:1}
  .hero-h{order:2}
  .hero-sub{order:2}
  .hero-figure{order:3}
  .hero-cta{order:4}
  .hero-kicker{font-size:20px}
  .hero-h{line-height:1.05}
  .hero-h .l1{font-size:min(12.4vw,50px)}
  /* スマホでは「授業で／復習。」の2行に折り返してよい（「復習。」は途中で切らない） */
  .hero-h .l2{font-size:min(13.6vw,56px);white-space:normal}
  .hero-sub{margin-top:12px;font-size:16px}
  .hero-figure{margin-top:0;gap:6px;align-items:flex-end;justify-content:flex-end}
  .hero-aire{width:min(68vw,270px)}
  .hero-cap{margin-bottom:12px}
  .hero-h .l2{margin-bottom:.14em}
  .hero-cta{margin-top:14px;padding-bottom:22px;gap:10px}
  .hero-cta .btn{width:100%;min-width:0}
  .hero-cta .btn-ghost{min-height:48px;font-size:16px}
  .videos{padding:48px 0 40px}
  .strip{gap:14px;padding:4px 16px 14px}
  .strip > li{flex-basis:300px}
  .fees{gap:10px 12px}
  .fees li{padding:8px 16px;gap:10px}
  .fees .subj{font-size:21px}
  .fees .fee{font-size:24px}
  .zero-line span{font-size:19px;padding:4px 12px}
  .cmp-title{font-size:19px}
  .sw-row{font-size:16px}
  .bar-row{grid-template-columns:1fr;gap:2px}
  .bar-track{padding-right:104px}
  .bar{height:26px}
  .bar-val{font-size:16px}
}