/* P2M JUNIOR — class detail pages (/class/*) — §12 template */

/* page hero (navy) */
.classhero{background:var(--navy);color:#fff;padding:78px 0 66px;position:relative;overflow:hidden;}
.classhero::after{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(43,107,228,.32),transparent 70%);}
.classhero .kicker{font-family:var(--lat);font-size:12px;font-weight:800;letter-spacing:.22em;color:#8fb4f5;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;position:relative;}
.classhero .kicker::before{content:"";width:24px;height:2px;background:#8fb4f5;}
.classhero .agebadge{display:inline-block;margin:18px 0 0;background:rgba(198,167,107,.16);border:1px solid rgba(198,167,107,.5);color:var(--gold);font-size:12.5px;font-weight:800;letter-spacing:.06em;padding:7px 15px;border-radius:999px;position:relative;}
.classhero h1{font-size:clamp(30px,6vw,48px);font-weight:900;line-height:1.32;margin:16px 0 10px;position:relative;}
.classhero .oneline{font-size:16.5px;color:#cdd6e4;line-height:1.95;max-width:620px;margin:14px 0 30px;position:relative;}
.classhero .cta{display:flex;gap:14px;flex-wrap:wrap;position:relative;}

/* sections (mirror top.css section rhythm) */
.sec{padding:84px 0;}
.sec.tint{background:var(--tint);}
.sec .head{max-width:760px;margin-bottom:44px;}
.sec h2{font-size:clamp(25px,3.2vw,36px);font-weight:900;color:var(--navy);line-height:1.4;margin-top:14px;}
.sec .lead{font-size:16px;color:var(--muted);line-height:2;margin-top:16px;}

/* pillars — 育てること */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pillar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;}
.pillar .n{font-family:var(--lat);font-size:12.5px;font-weight:800;color:var(--gold-d);letter-spacing:.1em;}
.pillar h3{font-size:18px;font-weight:800;color:var(--navy);margin:12px 0 8px;}
.pillar p{font-size:14px;color:var(--muted);line-height:1.85;}

/* content bullet list — 1回の流れ / 内容 */
.clist{list-style:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 30px;max-width:820px;}
.clist li{position:relative;padding:18px 0 18px 34px;border-top:1px solid var(--line);font-size:15px;color:var(--ink);line-height:1.75;}
.clist li:first-child{border-top:none;}
.clist li::before{content:"";position:absolute;left:2px;top:24px;width:11px;height:11px;border-radius:2px;background:var(--gold);transform:rotate(45deg);}
.clist b{color:var(--navy);}

/* details table */
.details{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;max-width:820px;}
.drow{display:grid;grid-template-columns:180px 1fr;border-top:1px solid var(--line);}
.drow:first-child{border-top:none;}
.drow .dk{background:var(--tint);padding:20px 26px;font-size:13.5px;font-weight:800;color:var(--navy);}
.drow .dv{padding:20px 26px;font-size:14.5px;color:var(--ink);line-height:1.8;}
.drow .dv .price{font-family:var(--lat);font-size:24px;font-weight:900;color:var(--navy);}
.drow .dv .sub{font-size:12.5px;color:var(--muted);}
.drow .dv .chip{display:inline-block;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:800;padding:3px 10px;border-radius:6px;margin-left:8px;}
.drow .dv .todo{color:var(--gold-d);font-weight:700;}

/* progression / 次は？ — navy = 進級、gold = 体験→継続 */
.nextwrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.ncard{border-radius:18px;padding:32px 34px;position:relative;overflow:hidden;}
.ncard .k{font-family:var(--lat);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.ncard h3{font-size:21px;font-weight:900;margin:10px 0 8px;line-height:1.4;}
.ncard p{font-size:13.5px;line-height:1.85;margin-bottom:20px;}
.ncard .go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;border-radius:999px;padding:12px 22px;min-height:44px;transition:.2s;}
/* 進級（次のクラス）= navy */
.ncard.up{background:var(--navy);color:#fff;}
.ncard.up .k{color:#8fb4f5;}
.ncard.up p{color:#c2cddd;}
.ncard.up .go{background:#fff;color:var(--navy);}
.ncard.up .go:hover{background:#e7edf6;}
/* 体験→継続 = gold accent */
.ncard.trial{background:#fff;border:1px solid var(--line);color:var(--ink);}
.ncard.trial .k{color:var(--gold-d);}
.ncard.trial h3{color:var(--navy);}
.ncard.trial p{color:var(--muted);}
.ncard.trial .go{background:var(--gold);color:#2a2410;}
.ncard.trial .go:hover{background:#b7965a;}
.nextnote{margin-top:18px;font-size:12.5px;color:var(--muted);}

.ctaband{background:var(--navy);color:#fff;text-align:center;padding:78px 0;}
.ctaband h2{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.4;}
.ctaband p{color:#c2cddd;margin:14px 0 26px;font-size:16px;}
.ctaband .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

@media (max-width:900px){
  .pillars{grid-template-columns:1fr;}
  .nextwrap{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .classhero{padding:60px 0 52px;}
  .sec{padding:56px 0;}
  .drow{grid-template-columns:1fr;}
  .drow .dk{padding-bottom:6px;}
  .clist{padding:6px 22px;}
}

/* ---- classhero photo (added) ---- */
.classhero{position:relative;}
.classhero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:0;}
.classhero .cscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(15,24,48,.95),rgba(15,24,48,.82) 46%,rgba(15,24,48,.55));}
.classhero::after{z-index:1;}
.classhero .wrap{position:relative;z-index:2;}

/* ---- class "内容" as image + list (2-col) ---- */
.ccontents{display:grid;grid-template-columns:1.02fr 1fr;gap:44px;align-items:center;}
.ccontents .cimg{aspect-ratio:3/2;border-radius:18px;overflow:hidden;}
.ccontents .cimg img{width:100%;height:100%;object-fit:cover;display:block;}
.ccontents .head{margin-bottom:22px;}
.ccontents .clist{max-width:none;}
@media (max-width:900px){ .ccontents{grid-template-columns:1fr;gap:24px;} }