.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

section{padding:64px 0;}
section.alt{background:var(--white);}
.eyebrow{color:var(--gold-strong); font-weight:700; font-size:13px; letter-spacing:0.08em; margin-bottom:8px;}
h2{font-size:26px; color:var(--navy); margin:0 0 12px;}
.lead{color:var(--text-sub); font-size:15px; max-width:680px;}

.page-hero{
  position:relative; color:#fff; overflow:hidden;
  background:
  linear-gradient(105deg, rgba(15,32,25,0.86) 0%, rgba(15,32,25,0.55) 60%, rgba(15,32,25,0.2) 100%),
  url("../assets/course.webp") center/cover no-repeat,
  linear-gradient(135deg,#163a2e,#24483c);
}
.page-hero .wrap{position:relative; z-index:2; padding:72px 24px 56px;}
.page-hero .eyebrow{color:var(--gold);}
.page-hero h1{font-size:32px; margin:8px 0 12px;}
.page-hero p{color:#e4e6e0; font-size:15px; max-width:640px; margin:0;}
.crumb{font-size:12px; color:#c9cdc2; margin-bottom:12px;}
.crumb a{color:#c9cdc2;}
.zero-fee{display:inline-flex; align-items:center; gap:10px; margin-top:20px; background:rgba(185,168,143,0.18); border:1px solid rgba(185,168,143,0.5); border-radius:10px; padding:12px 20px; font-size:14px; color:#fff;}
.zero-fee b{color:var(--gold); font-size:18px;}

.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;}
.price-card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px; display:flex; flex-direction:column;}
.price-card.highlight{border:2px solid var(--gold-strong);}
.price-card h3{font-size:16px; color:var(--navy); margin:0 0 6px;}
.price-card .sub{font-size:12px; color:var(--text-sub); margin:0 0 18px;}
.price-card .amount{font-size:24px; font-weight:700; color:var(--navy); margin:0 0 4px;}
.price-card ul{list-style:none; padding:0; margin:16px 0 0; font-size:13px; color:var(--text-sub);}
.price-card li{padding:6px 0; border-top:1px solid var(--border);}
.price-card .benefit{margin-top:16px; padding-top:16px; border-top:1px dashed var(--border); font-size:12px; color:var(--text-sub);}
.price-card .benefit b{color:var(--navy); display:block; font-size:12px; margin-bottom:6px;}

.cmp-wrap{margin-top:28px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--white);}
table.cmp{width:100%; border-collapse:collapse; font-size:13px;}
table.cmp th{padding:14px 16px; text-align:left; font-weight:500;}
table.cmp th.us{background:var(--navy); color:#fff;}
table.cmp th.them{background:var(--bg); color:var(--text-sub);}
table.cmp td{padding:14px 16px; border-top:1px solid var(--border); vertical-align:top;}
table.cmp td.us{background:rgba(185,168,143,0.08); font-weight:500;}
table.cmp td.label{color:var(--text-sub); font-size:12px; width:220px;}

.final-cta{background:var(--navy); color:#fff; text-align:center; padding:56px 0;}
.final-cta h2{color:#fff;}
.final-cta p{color:#c7c9c0; margin:0 0 24px;}
.final-cta .btn-primary{background:var(--gold-strong); color:#fff; padding:14px 32px; font-size:14px;}

@media(max-width:860px){

  .price-grid{grid-template-columns:1fr;}
  table.cmp td.label{width:auto;}

}


/* =========================================================
   レスポンシブ（下層ページ共通）
   ※ common.css より後に読み込まれるので、ここで上書きする
   ========================================================= */
@media(max-width:1024px){
  section{padding:44px 0;}
  .page-hero .wrap{padding-top:52px; padding-bottom:40px;}
  .page-hero h1{font-size:27px;}
}
@media(max-width:600px){
  .page-hero .wrap{padding-left:16px; padding-right:16px; padding-top:36px; padding-bottom:28px;}
  .page-hero h1{font-size:22px; line-height:1.45;}
  .page-hero p{font-size:14px;}
  .crumb{font-size:11px; margin-bottom:10px;}
  section{padding:34px 0;}
  h2{font-size:19px;}
  .final-cta{padding:40px 0;}
  .final-cta .btn-primary{padding:13px 22px;}
}

@media(max-width:600px){
  .price-card{padding:20px;}
  .price-card .amount{font-size:21px;}
  /* inline-flex のままだと各テキストが最小幅まで潰れて1文字ずつ折り返す */
  .zero-fee{display:block; font-size:13px; padding:12px 16px; line-height:1.7;}
  .zero-fee b{font-size:16px;}
  /* 比較表は表単体で横スクロールさせる */
  .cmp-wrap{overflow-x:auto;}
  table.cmp{min-width:520px;}
}