/* =========================================================
   pages.css ― 新規追加ページ（科目別対策 / 講師紹介 / ブログ / 404）の共通土台
   common.css の後、ページ固有CSS（blog.css 等）の前に読み込む。
   ========================================================= */

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; line-height:1.5;}
h3{color:var(--navy);}
.lead{color:var(--text-sub); font-size:15px; max-width:720px;}

/* ===== 下層ページのヒーロー ===== */
.page-hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    linear-gradient(105deg, rgba(15,32,25,0.88) 0%, rgba(15,32,25,0.58) 60%, rgba(15,32,25,0.22) 100%),
    url("../assets/header.webp") center/cover no-repeat,
    linear-gradient(135deg,#163a2e,#24483c);
}
.page-hero .wrap{position:relative; z-index:2; padding:64px 24px 48px;}
.page-hero .eyebrow{color:var(--gold);}
.page-hero h1{font-size:32px; margin:8px 0 14px; line-height:1.45;}
.page-hero .sub{color:#e4e6e0; font-size:15px; max-width:680px; margin:0;}
.page-hero .hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.page-hero .hero-tags span{
  font-size:11.5px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
}

/* ===== パンくず ===== */
.crumb{font-size:12px; color:#c9cdc2; margin:0 0 12px;}
.crumb a{color:#c9cdc2;}
.crumb a:hover{color:#fff;}
.crumb-light{color:var(--text-sub); margin-bottom:18px;}
.crumb-light a{color:var(--text-sub);}
.crumb-light a:hover{color:var(--navy);}

/* ===== 汎用テキストブロック ===== */
.prose{max-width:760px;}
.prose h2{font-size:22px; margin:40px 0 12px; padding-left:14px; border-left:4px solid var(--gold-strong);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:17px; margin:28px 0 8px;}
.prose p{font-size:14.5px; color:var(--text); margin:0 0 16px; line-height:1.9;}
.prose ul,.prose ol{font-size:14.5px; color:var(--text); padding-left:22px; margin:0 0 18px; line-height:1.9;}
.prose li{margin-bottom:6px;}
.prose b,.prose strong{color:var(--navy);}
.prose .note{
  background:var(--white); border-left:3px solid var(--gold-strong); border-radius:0 10px 10px 0;
  padding:16px 20px; font-size:13px; color:var(--text-sub); margin:0 0 20px;
}

/* ===== 表 ===== */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 22px;}
table.data{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--white); min-width:460px;}
table.data th{background:var(--navy); color:#fff; text-align:left; padding:11px 14px; font-weight:500; white-space:nowrap;}
table.data td{padding:11px 14px; border-top:1px solid var(--border);}
table.data tr:nth-child(even) td{background:var(--bg);}
table.data td b{color:var(--navy);}

/* ===== 科目ページ：戦略カード ===== */
.strategy-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;}
.strategy-grid > *{min-width:0;}
.strategy-card{
  background:var(--white); border:1px solid var(--border); border-radius:14px; padding:24px 22px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.strategy-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(22,58,46,.10); border-color:var(--gold);}
.strategy-card .num{
  width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; margin-bottom:14px;
}
.strategy-card h3{font-size:16px; margin:0 0 8px; line-height:1.55;}
.strategy-card p{font-size:13.5px; color:var(--text-sub); margin:0; line-height:1.85;}

/* ===== 科目ページ：スコア内訳バー ===== */
.weight-card{background:var(--green-mid); color:#fff; border-radius:16px; padding:28px 26px;}
.weight-card h3{color:#fff; font-size:15px; margin:0 0 4px;}
.weight-card .sub{font-size:12px; color:#c7c9c0; margin:0 0 20px;}
.weight-list{display:flex; flex-direction:column; gap:12px;}
.weight-row{display:grid; grid-template-columns:132px 1fr 44px; align-items:center; gap:12px; font-size:13px;}
.weight-row .bar-bg{background:rgba(255,255,255,.14); border-radius:999px; height:10px; overflow:hidden;}
.weight-row .bar-fill{height:100%; border-radius:999px; background:rgba(255,255,255,.42); transition:width .9s var(--ease);}
.weight-row .bar-fill.gold{background:var(--gold);}
.weight-row .pct{text-align:right; font-weight:700;}
.weight-card .src{font-size:10.5px; color:#9aa093; margin:18px 0 0;}

.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.split > *{min-width:0;}

/* ===== 科目ページ：チェックリスト ===== */
.check-list{display:flex; flex-direction:column; gap:14px; margin:0;}
.check-item{display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start;}
.check-item .chk{
  width:24px; height:24px; border-radius:50%; background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:3px; flex-shrink:0;
}
.check-item h3{font-size:15px; margin:0 0 4px;}
.check-item p{font-size:13.5px; color:var(--text-sub); margin:0; line-height:1.85;}

/* ===== 講師カード ===== */
.tutor-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.tutor-grid > *{min-width:0;}
.tutor-card{
  background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 26px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tutor-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(22,58,46,.10); border-color:var(--gold);}
.tutor-head{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
.tutor-photo{
  width:76px; height:76px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--green-mid));
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:28px; font-weight:700;
}
.tutor-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.tutor-head h3{font-size:19px; margin:0 0 4px;}
.tutor-head .uni{font-size:12.5px; color:var(--text-sub); margin:0;}
.score-badges{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px;}
.score-badge{
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;
  background:rgba(185,168,143,.2); border:1px solid rgba(185,168,143,.55); color:var(--navy);
}
.score-badge em{font-style:normal; color:var(--gold-strong);}
.tutor-card dl{margin:0 0 16px; font-size:13.5px;}
.tutor-card dt{color:var(--gold-strong); font-weight:700; font-size:12px; margin-top:12px;}
.tutor-card dd{margin:3px 0 0; color:var(--text-sub); line-height:1.85;}
.tutor-card .comment{
  background:var(--bg); border-left:3px solid var(--gold-strong); border-radius:0 10px 10px 0;
  padding:14px 18px; font-size:13px; color:var(--text-sub); line-height:1.85; margin:0;
}

/* ===== 実績・受講生の声（準備中プレースホルダー） ===== */
.placeholder-box{
  border:1px dashed var(--border); border-radius:14px; padding:40px 28px; text-align:center;
  background:var(--white); color:var(--text-sub); font-size:14px; line-height:1.9;
}
.placeholder-box b{color:var(--navy); display:block; font-size:15px; margin-bottom:8px;}
.placeholder-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.placeholder-grid > *{min-width:0;}

/* ===== CTAバナー（index.css と同じトーン） ===== */
.cta-banner{
  background:linear-gradient(135deg, var(--navy) 0%, var(--green-mid) 100%);
  color:#fff; border-radius:20px; padding:44px 40px;
  display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center;
}
.cta-banner h3{font-size:22px; line-height:1.55; margin:0; color:#fff; max-width:460px;}
.cta-banner p{color:#d5d8d0; font-size:14px; margin:0; max-width:520px;}
.cta-banner .btn-primary{background:var(--gold-strong); color:#fff; padding:14px 32px; font-size:14px;}

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

/* ===== 関連リンクの導線 ===== */
.link-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px;}
.link-cards > *{min-width:0;}
.link-card{
  display:block; background:var(--white); border:1px solid var(--border); border-radius:12px;
  padding:20px 22px; text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.link-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(22,58,46,.10); border-color:var(--gold);}
.link-card .k{font-size:11px; color:var(--gold-strong); font-weight:700; letter-spacing:.06em;}
.link-card .t{font-size:14.5px; color:var(--navy); font-weight:700; margin:6px 0 0; line-height:1.6;}
.link-card .d{font-size:12.5px; color:var(--text-sub); margin:6px 0 0; line-height:1.75;}

/* ===== 404 ===== */
.err-wrap{text-align:center; padding:90px 0;}
.err-wrap .code{font-size:76px; font-weight:700; color:var(--gold-strong); line-height:1; margin:0;}
.err-wrap h1{font-size:26px; color:var(--navy); margin:18px 0 12px;}
.err-wrap p{color:var(--text-sub); font-size:15px; margin:0 auto 28px; max-width:520px;}
.err-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:1024px){
  section{padding:48px 0;}
  h2{font-size:23px;}
  .page-hero .wrap{padding-top:52px; padding-bottom:40px;}
  .page-hero h1{font-size:27px;}
  .split{gap:28px;}
  .link-cards{grid-template-columns:repeat(3,1fr); gap:12px;}
}

@media(max-width:860px){
  .split{grid-template-columns:1fr;}
  .strategy-grid{grid-template-columns:1fr;}
  .tutor-grid{grid-template-columns:1fr;}
  .link-cards{grid-template-columns:1fr;}
  .placeholder-grid{grid-template-columns:1fr;}
}

@media(max-width:600px){
  section{padding:38px 0;}
  h2{font-size:20px;}
  .lead{font-size:14px;}
  .page-hero .wrap{padding:36px 16px 30px;}
  .page-hero h1{font-size:22px; line-height:1.5;}
  .page-hero .sub{font-size:14px;}
  .crumb{font-size:11px;}
  .prose h2{font-size:19px; margin-top:32px;}
  .prose h3{font-size:16px;}
  .prose p,.prose ul,.prose ol{font-size:14px;}
  .strategy-card{padding:20px 18px;}
  .weight-card{padding:22px 18px;}
  .weight-row{grid-template-columns:104px 1fr 40px; gap:9px; font-size:11.5px;}
  .tutor-card{padding:22px 18px;}
  .tutor-photo{width:62px; height:62px; font-size:23px;}
  .tutor-head h3{font-size:17px;}
  .cta-banner{padding:26px 20px; border-radius:14px;}
  .cta-banner h3{font-size:17px;}
  .final-cta{padding:42px 0;}
  .err-wrap{padding:60px 0;}
  .err-wrap .code{font-size:56px;}
}