/* =============================================================
   P2M JUNIOR — /personal/（育成年代パーソナル）専用スタイル
   共通シェル（トークン・ヘッダー・フッター・ボタン）は styles.css。
   ============================================================= */

/* hero */
.hero{position:relative;background:#0c1424;color:#fff;overflow:hidden;}
.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,14,24,.95),rgba(8,14,24,.74) 55%,rgba(8,14,24,.44));}
.hero .inner{position:relative;padding:88px 0 92px;max-width:840px;}
.hero .kicker{font-family:var(--lat);font-size:12px;font-weight:800;letter-spacing:.2em;color:#8fb4f5;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;}
.hero .kicker::before{content:"";width:24px;height:2px;background:#8fb4f5;}
.hero h1{font-size:clamp(30px,6vw,54px);font-weight:900;line-height:1.3;margin:22px 0 10px;letter-spacing:.01em;}
.hero h1 .u{color:#2b6be4;}
.hero .lead{font-size:16.5px;color:#cdd6e4;line-height:1.95;max-width:640px;margin:18px 0 32px;}
.hero .lead b{color:#fff;font-weight:800;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;}

/* sections（他ページと同じリズム） */
.sec{padding:88px 0;}
.sec.tint{background:var(--tint);}
.sec .head{max-width:760px;margin-bottom:48px;}
.sec h2{font-size:clamp(25px,3.2vw,36px);font-weight:900;color:var(--navy);line-height:1.42;margin-top:14px;}
.sec .lead{font-size:16px;color:var(--muted);line-height:2;margin-top:16px;}

/* 特徴 3 つ（画像 + 本文の交互レイアウト） */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:72px;}
.frow:last-child{margin-bottom:0;}
.frow.rev .fimg{order:2;}
.frow .fimg{aspect-ratio:16/9;border-radius:18px;overflow:hidden;}
.frow .fimg img{width:100%;height:100%;object-fit:cover;display:block;}
.frow .num{font-family:var(--lat);font-size:13px;font-weight:900;letter-spacing:.14em;color:var(--gold-d);}
.frow h3{font-size:clamp(20px,2.5vw,26px);font-weight:900;color:var(--navy);line-height:1.5;margin:12px 0 14px;}
.frow p{font-size:14.5px;color:var(--muted);line-height:2;}

/* 02 のみ縦積み（テキスト → 横並び2枚） */
.frow.stack{grid-template-columns:1fr;gap:0;}
.frow.stack .fbody{max-width:760px;}
.frow.stack h3{margin-bottom:14px;}

/* 横並び2枚 — 画像中央に白文字を重ねる */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;}
.pair figure{position:relative;margin:0;border-radius:16px;overflow:hidden;}
.pair img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
.pair figcaption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:#fff;font-weight:900;line-height:1.7;letter-spacing:.03em;
  font-size:clamp(17px,2.1vw,24px);
  background:linear-gradient(180deg,rgba(8,14,24,.34),rgba(8,14,24,.60));
  text-shadow:0 2px 16px rgba(0,0,0,.55);}

/* 料金 */
.psub{font-size:15px;font-weight:900;color:var(--navy);margin:0 0 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.psub::before{content:"";width:20px;height:3px;background:var(--gold);border-radius:2px;}
.psub span{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;}
.plist{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.plist.visitor{grid-template-columns:repeat(2,1fr);max-width:600px;}
.plist + .psub{margin-top:44px;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-align:center;}
.pcard .cnt{font-size:14px;font-weight:800;color:var(--navy);}
.pcard .cnt span{display:block;font-family:var(--lat);font-size:22px;font-weight:900;color:var(--blue);margin-top:6px;}
.pcard .price{font-family:var(--lat);font-size:30px;font-weight:900;color:var(--navy);margin-top:16px;line-height:1.1;}
.pcard .price small{font-family:var(--sans);font-size:14px;font-weight:800;margin-left:2px;}
.pcard .per{font-size:12.5px;color:var(--muted);margin-top:8px;}
.pnote{list-style:none;margin-top:28px;display:grid;gap:10px;}
.pnote li{position:relative;padding-left:20px;font-size:13.5px;color:var(--muted);line-height:1.9;}
.pnote li::before{content:"※";position:absolute;left:0;color:var(--gold-d);}
.pnote b{color:var(--navy);font-weight:800;}
.pnote a{color:var(--blue);text-decoration:underline;}

/* 会場・申し込み（class.css と同じ定義リスト） */
.details{border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.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 b{color:var(--navy);font-weight:800;}
.drow .dv a{color:var(--blue);}
.drow .dv a:hover{text-decoration:underline;}
.drow .dv .sub{display:inline-block;font-size:12.5px;color:var(--muted);margin-top:4px;}

/* 末尾 CTA */
.ctaband{background:#0c1424;color:#fff;text-align:center;padding:80px 0;}
.ctaband h2{font-size:clamp(25px,3.2vw,38px);font-weight:900;line-height:1.4;}
.ctaband p{color:#c2cddd;margin:14px 0 28px;font-size:16px;}

@media (max-width:900px){
  .frow{grid-template-columns:1fr;gap:24px;margin-bottom:56px;}
  .frow.rev .fimg{order:0;}
  .frow.stack{gap:0;}
  .pair{grid-template-columns:1fr;gap:14px;margin-top:26px;}
  .plist,.plist.visitor{grid-template-columns:1fr 1fr;}
  .drow{grid-template-columns:1fr;}
  .drow .dk{padding-bottom:6px;}
}
@media (max-width:560px){
  .hero .inner{padding:64px 0 68px;}
  .sec{padding:56px 0;}
  .plist,.plist.visitor{grid-template-columns:1fr;}
  .ctaband{padding:60px 0;}
}