@charset "UTF-8";
/* ============================================================
   英検イッパツ塾 共通スタイル
   デザイン参考：MeRISE英会話（白基調＋赤アクセント／赤ラベル付き中央見出し）
   全ページで読み込む。ページ固有の装飾は各HTMLの <style> に書く。
   ============================================================ */

:root{
  --red:#d33339;
  --red-dark:#b32a2f;
  --ink:#2c2f2f;
  --ink-soft:#4a4f4f;
  --gray:#959797;
  --light:#f5f5f5;
  --line:#e2e5e5;
  --gold:#cfad5f;
  --container:1024px;
}

/* ---------- リセット・ベース ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.inner{max-width:var(--container);margin:0 auto;padding:0 24px;}
.sec{padding:120px 0;}
.sec--light{background:var(--light);}
.tr{color:var(--red);}

/* ---------- 見出しコンポーネント（デザインの中核） ---------- */
.sec-head{text-align:center;margin-bottom:64px;}
.sec-head .label{
  display:inline-block;background:var(--red);color:#fff;font-size:13px;font-weight:900;
  letter-spacing:.14em;margin-bottom:20px;padding:7px 18px;
}
.sec-head h2{font-size:38px;font-weight:900;line-height:1.45;color:var(--ink);letter-spacing:.01em;}
.sec-head h2 .tr{color:var(--red);}
.sec-head .lead{margin-top:26px;font-size:16px;color:var(--ink-soft);line-height:2;}

/* ============ 数字バンド（赤ベタ・実績や比較の見せ場） ============ */
.numbers{background:var(--red);padding:56px 0;}
.numbers-in{display:grid;grid-template-columns:repeat(3,1fr);max-width:960px;margin:0 auto;}
.numbers-in > div{text-align:center;padding:6px 20px;border-right:1px solid rgba(255,255,255,.3);}
.numbers-in > div:last-child{border-right:0;}
.numbers .cap{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.08em;}
.numbers .big{display:block;font-size:54px;font-weight:900;color:#fff;line-height:1.15;margin:8px 0 6px;letter-spacing:.01em;}
.numbers .big small{font-size:21px;font-weight:900;}
.numbers .big.is-strike{color:rgba(255,255,255,.55);text-decoration:line-through;text-decoration-thickness:3px;}
/* 数字ではなく語句を入れる枠（折り返さないよう一回り小さく） */
.numbers .big.is-text{font-size:34px;line-height:1.45;}
.numbers .sub{display:block;font-size:12px;color:rgba(255,255,255,.7);line-height:1.7;}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:22px 44px;font-size:17px;font-weight:900;line-height:1.4;
  border:2px solid transparent;transition:.15s;text-align:center;letter-spacing:.03em;
}
/* 主要CTA：影で押せる感を出す。押すと沈む */
.btn--primary{
  background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 5px 0 var(--red-dark);
}
.btn--primary:hover{background:var(--red);transform:translateY(3px);box-shadow:0 2px 0 var(--red-dark);}
.btn--primary.btn--sm{box-shadow:0 3px 0 var(--red-dark);}
.btn--primary.btn--sm:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--red-dark);}
/* 副CTA：白地に赤の輪郭。塗りは主CTAに独占させて、序列を濁さずに出す */
.btn--soft{
  background:#fff;color:var(--red);border-color:var(--red);
  box-shadow:0 5px 0 #f2c9cb;
}
.btn--soft:hover{background:var(--red);color:#fff;transform:translateY(3px);box-shadow:0 2px 0 #f2c9cb;}
.btn--soft.btn--sm{box-shadow:0 3px 0 #f2c9cb;}
.btn--soft.btn--sm:hover{transform:translateY(2px);box-shadow:0 1px 0 #f2c9cb;}
/* CTAの矢印 */
.btn--primary::after,.btn--soft::after{content:"▶";font-size:.7em;margin-left:2px;}
.btn--sm::after{font-size:.65em;}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;}
.btn--ghost-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
.btn--ghost-w:hover{background:#fff;color:var(--ink);}
.btn--sm{padding:14px 26px;font-size:15px;}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px;}

/* ---------- ダミー画像 ---------- */
.dummy{
  background:repeating-linear-gradient(45deg,#ececec,#ececec 10px,#f6f6f6 10px,#f6f6f6 20px);
  border:1px dashed #cfd4d4;color:#a6adad;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.1em;width:100%;text-align:center;
}

/* ---------- 汎用テキスト ---------- */
.prose{max-width:760px;margin:0 auto;font-size:16.5px;line-height:2.2;}
.prose p{margin-bottom:28px;}
.prose p:last-child{margin-bottom:0;}
.prose strong{font-weight:700;}
.disc{margin-top:14px;font-size:11px;color:var(--gray);line-height:1.8;}
.note-line{
  max-width:760px;margin:32px auto 0;border-left:3px solid var(--gray);
  padding:4px 0 4px 20px;font-size:13px;color:var(--gray);line-height:1.9;
}

/* ---------- 表 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px;}
.tbl th,.tbl td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;}
.tbl th{font-weight:700;background:var(--light);}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap;}

/* ============ ヘッダー ============ */
.topbar{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:8px 20px;letter-spacing:.05em;}
.topbar strong{color:#ffd8d8;font-size:15px;}
header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);}
.head-in{max-width:1265px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:76px;gap:24px;}
.logo{font-size:22px;font-weight:900;letter-spacing:.02em;white-space:nowrap;}
.gnav{display:flex;gap:14px;margin-left:auto;font-size:14px;font-weight:500;}
/* 項目内で改行させない。折れると2段になってヘッダーが崩れる */
.gnav a{white-space:nowrap;}
.gnav a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s;}
.gnav a:hover{border-color:var(--red);color:var(--red);}
.gnav a.is-current{border-color:var(--red);color:var(--red);}
.head-ctas{display:flex;align-items:center;gap:10px;margin-left:8px;flex-shrink:0;}
.burger{display:none;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);}

/* ============ ページ見出し（下層ページのFV） ============ */
.phero{background:var(--light);padding:80px 0 88px;text-align:center;}
.phero .crumb{font-size:12px;color:var(--gray);margin-bottom:24px;letter-spacing:.06em;}
.phero .crumb a:hover{color:var(--red);}
.phero h1{font-size:40px;font-weight:900;line-height:1.5;margin-bottom:28px;}
.phero p{font-size:16.5px;line-height:2.2;color:var(--ink-soft);max-width:720px;margin:0 auto;}
.phero strong{color:var(--ink);font-weight:700;}

/* ============ 反転バンド（濃色帯） ============ */
.band{background:var(--ink);color:#fff;padding:120px 0;text-align:center;}
.band h2{font-size:38px;font-weight:900;line-height:1.5;margin-bottom:36px;}
.band .dates{font-size:18px;line-height:2.2;color:#c9cccc;margin-bottom:32px;}
.band p{font-size:18px;line-height:2.1;}
.band .big{font-size:24px;font-weight:700;margin-top:32px;line-height:1.8;}
.band .big .tr{color:#ff8f8f;}

/* ============ 引用ブロック（黒ベタ） ============ */
.quote{max-width:820px;margin:48px auto 0;background:var(--ink);color:#fff;padding:44px 40px;text-align:center;}
.quote h3{font-size:26px;font-weight:700;margin-bottom:18px;line-height:1.6;}
.quote p{font-size:16px;line-height:2.1;color:#d6d9d9;}
.quote strong{color:#fff;}

/* ============ 含まれるもの（チェックリスト） ============ */
.incl{max-width:760px;margin:56px auto 0;background:var(--light);padding:36px 32px;}
.incl--white{background:#fff;border:1px solid var(--line);}
.incl h4{font-size:16px;font-weight:700;text-align:center;margin-bottom:22px;}
.incl ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.incl--1col ul{grid-template-columns:1fr;}
.incl li{font-size:15px;padding-left:26px;position:relative;line-height:1.8;}
.incl li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:900;}
.incl li strong{font-weight:700;}

/* ============ 0円の羅列 ============ */
.zero{max-width:760px;margin:28px auto 0;text-align:center;font-size:15px;line-height:2.1;}
.zero .zl{display:inline-block;font-weight:700;margin:0 6px;}

/* ============ あんしん補償フロー ============ */
.flow{max-width:820px;margin:0 auto;}
.flow-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.fcard{border:1px solid var(--line);background:#fff;padding:32px 28px;}
.fcard.pass{border-top:4px solid var(--red);}
.fcard.fail{border-top:4px solid var(--ink);}
.fcard h4{font-size:19px;font-weight:700;margin-bottom:14px;line-height:1.6;}
.fcard p{font-size:15px;line-height:2;color:var(--ink-soft);}
.fcard .opts{margin-top:16px;border-top:1px dashed var(--line);padding-top:16px;}
.fcard .opts li{font-size:14px;line-height:1.9;padding-left:18px;position:relative;margin-bottom:10px;}
.fcard .opts li:last-child{margin-bottom:0;}
.fcard .opts li::before{content:"―";position:absolute;left:0;color:var(--red);}
.hosho-price{text-align:center;font-size:18px;line-height:2;margin-bottom:8px;}
.hosho-price b{font-size:24px;color:var(--red);}
.hosho-price span{font-size:15px;color:var(--ink-soft);}
.calc{max-width:820px;margin:32px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.calc div{background:var(--light);padding:24px;font-size:15px;line-height:1.9;text-align:center;}
.calc b{display:block;font-size:22px;font-weight:900;margin-top:6px;}
.calc span{font-size:13px;color:var(--gray);}
.cond{max-width:820px;margin:32px auto 0;border:1px solid var(--line);background:#fff;padding:24px 28px;text-align:center;font-size:15px;line-height:2;}
.cond strong{font-size:17px;}
.cond span{font-size:13px;color:var(--gray);}

/* ============ POINTカード（3カラム） ============ */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.point .pnum{
  display:inline-block;background:var(--red);color:#fff;font-size:12px;font-weight:700;
  padding:5px 14px;letter-spacing:.1em;margin-bottom:16px;
}
.point .pv{aspect-ratio:16/10;margin-bottom:20px;}
.point h3{font-size:21px;font-weight:700;line-height:1.6;margin-bottom:14px;}
.point p{font-size:15px;line-height:2;color:var(--ink-soft);margin-bottom:14px;}
.point p:last-child{margin-bottom:0;}

/* ============ ステップ（4カラム） ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.steps--3{grid-template-columns:repeat(3,1fr);}
.step{background:#fff;border:1px solid var(--line);padding:30px 22px;}
.step .sn{color:var(--red);font-size:13px;font-weight:900;letter-spacing:.12em;margin-bottom:10px;}
.step h4{font-size:17px;font-weight:700;line-height:1.6;margin-bottom:12px;}
.step p{font-size:14px;line-height:1.95;color:var(--ink-soft);}
.step p+p{margin-top:10px;}

/* ============ 講師カード ============ */
.teachers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.teacher{border:1px solid var(--line);background:#fff;}
.teacher .tv{aspect-ratio:1/1;}
.teacher .tb{padding:22px 20px;}
.teacher .tn{font-size:18px;font-weight:700;}
.teacher .tq{
  display:inline-block;background:var(--light);color:var(--ink-soft);
  font-size:12px;font-weight:700;padding:4px 10px;margin:8px 0 12px;
}
.teacher .tc{font-size:14px;line-height:1.9;color:var(--ink-soft);}

/* ============ FAQ（details/summary） ============ */
.faq{max-width:820px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);background:#fff;}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 48px 26px 44px;position:relative;
  font-size:17px;font-weight:700;line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"Q";position:absolute;left:8px;top:24px;color:var(--red);font-weight:900;font-size:18px;}
.faq summary::after{
  content:"";position:absolute;right:14px;top:34px;width:10px;height:10px;
  border-right:2px solid var(--gray);border-bottom:2px solid var(--gray);
  transform:rotate(45deg);transition:.2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:38px;}
.faq .a{padding:0 20px 28px 44px;font-size:15px;line-height:2.1;color:var(--ink-soft);position:relative;}
.faq .a::before{content:"A";position:absolute;left:8px;top:0;color:var(--gray);font-weight:900;font-size:18px;}

/* ============ 横スクロール表（比較表など） ============ */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.scroller table{min-width:760px;}
.scroll-hint{display:none;font-size:12px;color:var(--gray);margin-bottom:10px;text-align:center;}

/* ============================================================
   コラム（一覧・個別記事）
   ============================================================ */

/* ---- パンくず ---- */
.crumbs{font-size:12px;color:var(--gray);letter-spacing:.04em;margin-bottom:22px;line-height:1.8;}
.crumbs a:hover{color:var(--red);}

/* ---- カテゴリタブ ---- */
.cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:48px;}
.cats a{
  border:1px solid var(--line);background:#fff;padding:10px 20px;
  font-size:14px;font-weight:700;transition:.2s;
}
.cats a:hover{border-color:var(--red);color:var(--red);}
.cats a.is-current{background:var(--red);border-color:var(--red);color:#fff;}

/* ---- 記事カード一覧 ---- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.postcard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:.2s;}
.postcard:hover{border-color:var(--red);transform:translateY(-3px);}
.postcard .pv{aspect-ratio:16/9;}
.postcard .pb{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.postcard .pcat{
  align-self:flex-start;background:var(--light);color:var(--ink-soft);
  font-size:11px;font-weight:700;padding:4px 10px;margin-bottom:12px;letter-spacing:.04em;
}
.postcard h3{font-size:17px;font-weight:700;line-height:1.65;margin-bottom:12px;}
.postcard .pex{font-size:13.5px;line-height:1.85;color:var(--ink-soft);flex:1;}
.postcard .pd{margin-top:16px;font-size:12px;color:var(--gray);letter-spacing:.04em;}

/* ---- 注目記事（横長） ---- */
.postcard--wide{grid-column:1/-1;flex-direction:row;}
.postcard--wide .pv{aspect-ratio:auto;width:44%;min-height:240px;}
.postcard--wide .pb{padding:34px 36px;justify-content:center;}
.postcard--wide h3{font-size:24px;line-height:1.55;}
.postcard--wide .pex{flex:0;font-size:15px;}

/* ---- ページネーション ---- */
.pager{display:flex;gap:8px;justify-content:center;margin-top:56px;flex-wrap:wrap;}
.pager a,.pager span{
  min-width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;font-size:15px;font-weight:700;padding:0 14px;
}
.pager a:hover{border-color:var(--red);color:var(--red);}
.pager .is-current{background:var(--red);border-color:var(--red);color:#fff;}

/* ---- 記事ヘッダー ---- */
.art-head{max-width:760px;margin:0 auto;}
.art-head .pcat{
  display:inline-block;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;padding:5px 14px;margin-bottom:18px;letter-spacing:.06em;
}
.art-head h1{font-size:34px;font-weight:900;line-height:1.55;margin-bottom:22px;}
.art-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--gray);letter-spacing:.04em;}
.art-eyecatch{max-width:760px;margin:36px auto 0;aspect-ratio:16/9;}

/* ---- 目次 ---- */
.toc{max-width:760px;margin:48px auto 0;background:var(--light);padding:28px 32px;}
.toc h2{font-size:16px;font-weight:700;margin-bottom:16px;text-align:center;letter-spacing:.06em;}
.toc ol{list-style:none;counter-reset:toc;}
.toc li{counter-increment:toc;padding:8px 0 8px 34px;position:relative;font-size:15px;line-height:1.8;}
.toc li::before{
  content:counter(toc);position:absolute;left:0;top:8px;
  width:22px;height:22px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;
}
.toc a:hover{color:var(--red);text-decoration:underline;}
.toc li ul{margin-top:6px;}
.toc li li{padding:5px 0 5px 14px;font-size:14px;counter-increment:none;}
.toc li li::before{content:"―";background:none;color:var(--gray);width:auto;height:auto;top:5px;}

/* ---- 記事本文 ---- */
.article{max-width:760px;margin:56px auto 0;font-size:16.5px;line-height:2.15;}
.article > *{margin-bottom:28px;}
.article > *:last-child{margin-bottom:0;}
/* 見出しは3段階。H2＝赤ベタ、H3＝黒の二重下線、H4＝赤の左罫。
   参考にしたVK Blocksの plain / double_bottomborder を白赤に置き換えたもの。
   ブロックエディターでは見出しブロックのレベルを選ぶだけで、
   クラスを付けなくてもこの見た目になります。 */
.article h2{
  font-size:22px;font-weight:900;line-height:1.6;letter-spacing:.01em;
  color:#fff;background:var(--red);
  margin:64px 0 28px;padding:15px 20px;border:0;
}
.article h3{
  position:relative;
  font-size:20px;font-weight:900;line-height:1.65;color:var(--ink);
  margin:52px 0 22px;padding:0 0 13px;
  border:0;border-bottom:3px solid var(--ink);
}
/* 二重線の下側。1本目との間に隙間を作って「二重下線」にする */
.article h3::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);
}
.article h4{
  font-size:17.5px;font-weight:700;line-height:1.7;color:var(--ink);
  margin:38px 0 16px;padding-left:14px;border-left:4px solid var(--red);
}
/* 見出しの中の <strong> で太さが下がらないようにする。
   他サイトから貼り付けた見出しは <strong> で囲まれていることがある。 */
.article h2 strong,.article h3 strong,.article h4 strong{font-weight:inherit;color:inherit;}
/* 区切り線 */
.article hr,.article .wp-block-separator{
  border:0;height:1px;background:var(--line);margin:56px 0;
}
.article strong{font-weight:700;}
.article a{color:var(--red);text-decoration:underline;}
.article ul,.article ol{padding-left:0;}
.article ul li{padding-left:26px;position:relative;margin-bottom:12px;}
.article ul li::before{content:"";position:absolute;left:6px;top:14px;width:8px;height:8px;background:var(--red);}
.article ol{counter-reset:al;}
.article ol li{counter-increment:al;padding-left:36px;position:relative;margin-bottom:12px;}
.article ol li::before{
  content:counter(al);position:absolute;left:0;top:5px;
  width:24px;height:24px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;
}
.article table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;}
.article th,.article td{border:1px solid var(--line);padding:14px 14px;line-height:1.8;}
.article th{background:var(--light);font-weight:700;text-align:left;}
.article blockquote{
  background:var(--light);padding:26px 30px;font-size:15.5px;line-height:2;color:var(--ink-soft);
  border-left:4px solid var(--gray);
}
.article .box{border:1px solid var(--line);background:#fff;padding:28px 30px;}
.article .box--key{border:2px solid var(--red);background:#fdf7f7;}
.article .box h4{margin-top:0;}
.article .box > *:last-child{margin-bottom:0;}
.article figure{margin-bottom:28px;}
.article figcaption{margin-top:10px;font-size:12.5px;color:var(--gray);line-height:1.8;text-align:center;}
.article .lead{font-size:17px;line-height:2.1;}

/* ---- 記事内CTA（1箇所で管理する想定） ---- */
.art-cta{
  max-width:760px;margin:56px auto;background:var(--ink);color:#fff;
  padding:40px 38px;text-align:center;
}
.art-cta .label{color:#ff8f8f;font-size:13px;font-weight:700;letter-spacing:.1em;margin-bottom:12px;}
.art-cta h3{font-size:23px;font-weight:700;line-height:1.6;margin-bottom:16px;}
.art-cta p{font-size:15px;line-height:2;color:#d6d9d9;margin-bottom:26px;}
.art-cta .btn{max-width:440px;}
.art-cta .micro{margin-top:16px;margin-bottom:0;font-size:12px;color:#8d9292;}

/* ---- 執筆者 ---- */
.author{
  max-width:760px;margin:64px auto 0;border:1px solid var(--line);background:#fff;
  padding:30px 32px;display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:start;
}
.author .av{width:88px;height:88px;border-radius:50%;overflow:hidden;}
.author .an{font-size:17px;font-weight:700;margin-bottom:4px;}
.author .aq{font-size:12px;color:var(--red);font-weight:700;margin-bottom:12px;}
.author p{font-size:14px;line-height:1.95;color:var(--ink-soft);}

/* ---- 関連記事 ---- */
.related{max-width:1024px;margin:0 auto;}
.related h2{font-size:22px;font-weight:700;text-align:center;margin-bottom:36px;}

/* ============================================================
   WordPress用の調整
   （静的HTML版では未使用。テーマ化したときに効きます）
   ============================================================ */
.postcard img.pv{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;}
.postcard--wide img.pv{aspect-ratio:auto;width:44%;min-height:240px;}
.art-eyecatch img{width:100%;height:100%;object-fit:cover;}
.author .av img{width:100%;height:100%;object-fit:cover;display:block;}
.pager .current{background:var(--red);border-color:var(--red);color:#fff;}
.pager .dots{border-color:transparent;}
.article .wp-block-image img{width:100%;height:auto;}
.article .wp-block-table{overflow-x:auto;}
.alignwide,.alignfull{max-width:100%;}

/* ナビ6項目＋CTA2つは1265pxの枠に収まらない。
   枠が縮む幅からは資料請求ボタンを下ろして、主CTAだけ残す。 */
@media (max-width:1264px){
  .head-cta--doc{display:none;}
  .head-ctas .btn--sm{padding:13px 18px;font-size:14px;}
}
@media (max-width:1100px){
  .gnav{gap:13px;font-size:13px;}
}
@media (max-width:900px){
  .postcard--wide img.pv{width:100%;aspect-ratio:16/9;min-height:0;}
}

/* ============ クロージング ============ */
.closing{background:var(--ink);color:#fff;padding:110px 0;text-align:center;}
.closing h2{font-size:34px;font-weight:900;line-height:1.55;margin-bottom:26px;}
.closing p{font-size:16px;line-height:2.1;color:#c9cccc;}
.closing .micro{margin-top:28px;font-size:12px;color:#8d9292;}

/* ============ フッター ============ */
footer{background:#1c1f1f;color:#8d9292;padding:56px 0 100px;font-size:13px;line-height:2;}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px;}
.f-logo{color:#fff;font-size:20px;font-weight:900;}
.f-nav{display:flex;gap:28px;flex-wrap:wrap;}
.f-nav a:hover{color:#fff;}
.f-legal{border-top:1px solid #303434;padding-top:24px;font-size:11px;line-height:2;}

/* ============ SP追従CTA ============ */
.spbar{display:none;}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:900px){
  .points,.teachers{grid-template-columns:1fr;}
  .steps,.steps--3{grid-template-columns:1fr 1fr;}
  .postgrid{grid-template-columns:1fr 1fr;}
  .postcard--wide{flex-direction:column;}
  .postcard--wide .pv{width:100%;aspect-ratio:16/9;min-height:0;}
  .postcard--wide .pb{padding:24px 24px 26px;}
  .postcard--wide h3{font-size:20px;}
}
@media (max-width:768px){
  body{font-size:15px;}
  .sec{padding:72px 0;}
  .band,.closing{padding:72px 0;}
  .phero{padding:52px 0 60px;}
  .phero h1{font-size:27px;}

  .gnav{display:none;}
  /* スマホでは主CTAを出さない（画面下の固定バーと重複するため）。
     資料請求だけヘッダーに残す。敷居の低い入口を常に見える所に置いておく。 */
  .head-ctas{margin-left:auto;gap:8px;}
  .head-cta--main{display:none;}
  .head-ctas .head-cta--doc{display:inline-flex;width:auto;padding:9px 11px;font-size:11.5px;letter-spacing:0;box-shadow:0 2px 0 #b45c60;}
  .burger{display:block;margin-left:2px;}
  .head-in{height:64px;gap:12px;}
  .logo{font-size:19px;}

  .sec-head{margin-bottom:44px;}
  .sec-head h2{font-size:26px;}
  .sec-head .label{font-size:12px;padding:6px 14px;margin-bottom:16px;}
  .numbers{padding:36px 0;}
  .numbers-in{grid-template-columns:1fr;}
  .numbers-in > div{border-right:0;border-bottom:1px solid rgba(255,255,255,.3);padding:20px 0;}
  .numbers-in > div:last-child{border-bottom:0;}
  .numbers .big{font-size:42px;}
  .band h2{font-size:26px;}
  .closing h2{font-size:25px;}
  .quote{padding:26px 20px;}
  .quote h3{font-size:20px;}

  .steps,.steps--3{grid-template-columns:1fr;}
  .flow-row,.calc,.incl ul{grid-template-columns:1fr;}
  .incl,.cond,.fcard{padding:26px 20px;}
  .btn{padding:19px 24px;font-size:16px;width:100%;}
  .btn-row{flex-direction:column;}

  .faq summary{font-size:16px;padding:22px 40px 22px 38px;}
  .faq .a{padding-left:38px;}

  .scroll-hint{display:block;}

  /* コラム */
  .postgrid{grid-template-columns:1fr;gap:20px;}
  .cats{gap:8px;margin-bottom:32px;}
  .cats a{padding:8px 14px;font-size:13px;}
  .art-head h1{font-size:24px;}
  .art-meta{gap:12px;font-size:12px;}
  .toc{padding:22px 20px;}
  .article{font-size:16px;line-height:2.05;margin-top:40px;}
  .article h2{font-size:18.5px;margin:48px 0 24px;padding:13px 15px;}
  .article h3{font-size:17px;margin:40px 0 20px;padding-bottom:11px;}
  .article h4{font-size:16px;margin:30px 0 14px;}
  .article table{font-size:14px;}
  .article th,.article td{padding:10px;}
  .article blockquote,.article .box{padding:22px 20px;}
  .art-cta{padding:28px 22px;margin:40px auto;}
  .art-cta h3{font-size:19px;}
  .author{grid-template-columns:1fr;gap:16px;padding:24px 20px;}
  .pager a,.pager span{min-width:42px;height:42px;font-size:14px;padding:0 10px;}

  footer{padding-bottom:110px;}
  .spbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:#fff;border-top:1px solid var(--line);
    padding:10px 12px;gap:10px;align-items:center;
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
  }
  .spbar .txt{flex:1;font-size:11px;line-height:1.5;}
  .spbar .txt b{display:block;font-size:19px;font-weight:900;}
  .spbar .btn{width:auto;flex:0 0 auto;padding:15px 20px;font-size:14px;}
}

/* ---------- 申し込みフォーム ----------
   Contact Form 7 が吐くマークアップに合わせています。
   フォーム全体を .eform で包んでからショートコードを置いてください。 */
.eform{max-width:620px;margin:0 auto;}
.eform .row{margin-bottom:28px;}
.eform .q{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:11px;}
.eform .req{display:inline-block;background:var(--red);color:#fff;font-size:10.5px;font-weight:900;
  padding:3px 7px;margin-left:9px;vertical-align:2px;letter-spacing:.06em;}
.eform .opt{display:inline-block;background:var(--light);color:var(--gray);border:1px solid var(--line);
  font-size:10.5px;font-weight:700;padding:2px 7px;margin-left:9px;vertical-align:2px;}
.eform .hint{font-size:12.5px;color:var(--gray);line-height:1.8;margin-top:7px;}

.eform input[type=text],.eform input[type=email],.eform input[type=tel],
.eform select,.eform textarea{
  width:100%;border:1.5px solid var(--line);background:#fff;padding:14px;
  font-family:inherit;font-size:16px;color:var(--ink);transition:.15s;
}
.eform input:focus,.eform select:focus,.eform textarea:focus{
  outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(211,51,57,.12);
}
.eform textarea{min-height:130px;line-height:1.9;resize:vertical;}

/* 希望内容のチェックボックス。指で押せるようカード型にする */
.eform .checks .wpcf7-list-item{display:block;margin:0 0 10px;}
.eform .checks .wpcf7-list-item label{
  display:flex;align-items:center;gap:13px;border:1.5px solid var(--line);background:#fff;
  padding:16px;cursor:pointer;transition:.15s;
}
.eform .checks .wpcf7-list-item label:hover{border-color:var(--red);background:#fffafa;}
.eform .checks input[type=checkbox]{width:20px;height:20px;accent-color:var(--red);flex:0 0 auto;margin:0;}
.eform .checks .wpcf7-list-item-label{font-size:15.5px;font-weight:700;color:var(--ink);}

/* 同意欄 */
.eform .agree{background:var(--light);border:1px solid var(--line);padding:18px;font-size:13.5px;line-height:1.95;}
.eform .agree a{color:var(--red);text-decoration:underline;font-weight:700;}
.eform .agree .wpcf7-list-item{margin:0;}
.eform .agree input[type=checkbox]{width:18px;height:18px;accent-color:var(--red);margin-right:9px;}

.eform .submit{margin-top:34px;}
.eform .submit .btn{width:100%;}
.eform .submit .micro{font-size:12px;color:var(--gray);line-height:1.85;margin-top:14px;text-align:center;}

/* CF7のバリデーション表示をサイトの見た目に寄せる */
.eform .wpcf7-not-valid-tip{color:var(--red);font-size:12.5px;font-weight:700;margin-top:7px;}
.eform .wpcf7-response-output{
  border:1.5px solid var(--line)!important;padding:16px!important;
  font-size:14px;line-height:1.85;margin:24px 0 0!important;
}
.eform .wpcf7-spinner{display:block;margin:14px auto 0;}

/* 何が届くのかを先に見せる小さなカード */
.formlead{max-width:620px;margin:0 auto 40px;border:1px solid var(--line);border-top:4px solid var(--red);
  background:#fff;padding:26px 26px 22px;}
.formlead h3{font-size:16px;font-weight:900;margin-bottom:14px;}
.formlead ul{list-style:none;}
.formlead li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.95;color:var(--ink-soft);}
.formlead li::before{content:"";position:absolute;left:4px;top:12px;width:9px;height:9px;background:var(--red);}

/* ---------- お客様の声（[eiken_voices]） ----------
   RIZAP ENGLISHのカルーセルと同じ構成。写真の下端に実績バッジを重ねます。
   ライブラリは使わず、CSSのスクロールスナップ＋素のJSで動かしています。 */
/* 参考サイト実測：セクション余白は上70px／下75px、見出しからカードまで40px。
   ここで縦を取りすぎると、肝心のカードが下に押し出されて枚数が見えなくなる。 */
.voices{background:var(--light);overflow:hidden;padding:70px 0 75px;}
.voices .sec-head{margin-bottom:32px;}
.voices .sec-head h2{font-size:33px;font-weight:700;letter-spacing:.02em;}

.voices-track{display:grid;gap:20px;}

/* カルーセルはコンテナを飛び出して画面の右端まで流す。
   端で切れたカードが見えることで「まだ先にある」と伝わる。
   幅を固定にしてあるので、画面が広いほど見える枚数が増える。 */
.voices--carousel .voices-track{
  grid-auto-flow:column;grid-auto-columns:280px;
  /* 画面の左右いっぱいに流す。片側だけ端まで伸びていると不自然に見える */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 0 6px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;

}
.voices--carousel .voices-track::-webkit-scrollbar{display:none;}
.voices--carousel .vcard{scroll-snap-align:start;}

/* カード */
.vcard{display:block;background:#fff;border:1px solid var(--line);transition:.18s;}
.vcard:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);}
.vcard-photo{position:relative;aspect-ratio:4/3;background:#e8e6e6;overflow:hidden;}
.vcard-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.vcard-noimg{display:block;width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#e8e6e6,#e8e6e6 10px,#f1efef 10px,#f1efef 20px);}

/* 実績バッジ。写真の下端にまたがせて視線を止める */
/* 受講コースは字数が伸びるので、入りきらない幅では自動で2段に落とす */
.vcard-badge{
  position:absolute;left:14px;right:14px;bottom:-1px;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 9px;
  background:#fff;border-top:3px solid var(--red);
  padding:8px 10px 9px;box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
.vcard-badge em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.02em;}
.vcard-badge b{font-size:19px;font-weight:900;color:var(--red);line-height:1.2;letter-spacing:.01em;}

.vcard-body{padding:20px 18px 22px;}
.vcard-attr{display:inline-block;background:var(--light);border:1px solid var(--line);
  color:var(--ink-soft);font-size:11px;font-weight:700;padding:4px 10px;margin-bottom:12px;letter-spacing:.04em;}
.vcard-body h3{font-size:16px;font-weight:700;line-height:1.75;color:var(--ink);}
.vcard:hover .vcard-body h3{color:var(--red);}

/* ページャー */
/* スクロールの必要がないときはJSがこのクラスを付けて隠す */
.voices-dots{display:flex;justify-content:center;gap:9px;margin-top:22px;}
.voices-dots.is-hidden{display:none;}
.voices-dots button{width:9px;height:9px;border:0;padding:0;background:var(--line);cursor:pointer;transition:.15s;}
.voices-dots button.is-on{background:var(--red);transform:scale(1.25);}

/* 写真がモデルであることは、カード内ではなくここで独立して断る */
.voices-note{margin-top:18px;text-align:center;font-size:11.5px;color:var(--gray);line-height:1.8;}


@media (max-width:1100px){
  .voices--carousel .voices-track{grid-auto-columns:260px;}
}
@media (max-width:900px){

  .voices--carousel .voices-track{grid-auto-columns:240px;}
}
@media (max-width:768px){
  .voices{padding:46px 0 50px;}
  .voices .sec-head{margin-bottom:22px;}
  .voices .sec-head h2{font-size:24px;}
  .voices-track{gap:14px;}

  /* 1.2枚見せ。次のカードが覗くことで「まだある」と伝わる */
  .voices--carousel .voices-track{grid-auto-columns:78%;}
  .vcard-body{padding:16px 15px 18px;}
  .vcard-body h3{font-size:15px;}
  .vcard-badge b{font-size:17px;}

}

/* 表がスマホの画面幅を超えてページ全体を横スクロールさせないようにする。
   表だけを内部でスクロールさせ、ページ本体は動かさない。 */
@media (max-width:768px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tbl > tbody,.tbl > thead{display:table;width:100%;min-width:420px;}
}

/* ---------- お客様の声の記事本文 ----------
   コードエディターに貼るだけで整うよう、クラス名を決め打ちにしています。
   .voice-profile … 冒頭の学年・氏名・所属
   .voice-q       … インタビューの質問行（──で始まる行） */
.article .voice-profile{
  display:block;border-left:5px solid var(--red);background:var(--light);
  padding:16px 22px;margin-bottom:40px;
  font-size:14.5px;line-height:1.95;color:var(--ink-soft);
}
.article .voice-profile strong{
  display:block;font-size:19px;font-weight:900;color:var(--ink);line-height:1.5;margin-bottom:2px;
}
.article p.voice-q{
  font-weight:700;color:var(--ink);
  margin-top:36px;margin-bottom:12px;line-height:1.9;
}
.article p.voice-q + p{margin-top:0;}
@media (max-width:768px){
  .article .voice-profile{padding:14px 16px;margin-bottom:30px;font-size:13.5px;}
  .article .voice-profile strong{font-size:17px;}
  .article p.voice-q{margin-top:28px;}
}

/* ---------- お客様の声：個別記事のヘッダー ----------
   参考にした構成（左に顔写真／右にラベル・見出し・属性・実績）を白赤で。 */
.vhero{
  position:relative;background:var(--ink);color:#fff;text-align:center;
  padding:52px 0 46px;overflow:hidden;
}
/* 赤の斜めラインを薄く敷いて、黒ベタ一色にしない */
.vhero::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(211,51,57,.20) 0 2px,transparent 2px 16px);
}
.vhero .inner{position:relative;z-index:1;}
.vhero-en{font-size:44px;font-weight:900;letter-spacing:.06em;line-height:1.1;}
.vhero-ja{margin-top:8px;font-size:12.5px;letter-spacing:.18em;color:rgba(255,255,255,.75);}

/* 参考サイトの実測に合わせている：文字は細く小さく、行間は広く、
   アクセント色は1色だけを線とラベルに使う。太字と塗りを増やさない。 */
.vhead-sec{background:var(--light);padding:34px 0 46px;}
.vhead-sec .crumbs{color:var(--gray);}
.vhead{
  display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;
  background:#fff;padding:44px 46px;margin-top:20px;
}
.vhead-photo{aspect-ratio:4/5;background:#eceaea;overflow:hidden;}
.vhead-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.vhead-noimg{display:block;width:100%;height:100%;background:#eceaea;}

/* ラベルは罫の上に乗せる。罫はラベルの下端から右へ伸びる */
.vhead-label{display:flex;align-items:flex-end;border-bottom:1px solid var(--red);margin-bottom:30px;}
.vhead-label span{
  display:inline-block;background:var(--red);color:#fff;
  font-size:14px;font-weight:400;letter-spacing:.04em;padding:3px 12px;
}

.vhead h1{font-size:22px;font-weight:400;line-height:1.6;color:var(--ink-soft);letter-spacing:.02em;}

.vhead-attr{
  display:flex;align-items:center;gap:16px;margin-top:30px;
  font-size:16.5px;font-weight:400;color:var(--ink-soft);letter-spacing:.02em;
}
.vhead-attr::before{content:"";width:58px;height:1px;background:var(--ink-soft);flex:0 0 auto;}

/* 実績。白地に細い赤枠。塗りつぶさず、数字だけを大きくする */
.vresult{
  display:inline-block;min-width:320px;margin-top:26px;
  background:#fff;border:1px solid var(--red);padding:11px 24px 14px;text-align:center;
}
.vresult-cap{font-size:12px;font-weight:400;letter-spacing:.1em;color:var(--ink-soft);}
.vresult-main{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:5px;}
/* 級はここが一番はっきり出る場所。白抜きにして小さくしない */
.vresult-main .pill{
  flex:0 0 auto;background:var(--red);color:#fff;
  font-size:17px;font-weight:700;letter-spacing:.06em;padding:7px 16px;
}
.vresult-main b{font-size:44px;font-weight:700;color:var(--red);line-height:1.1;letter-spacing:.04em;}
.vnote{margin-top:26px;font-size:11.2px;font-weight:400;line-height:2.1;color:var(--gray);}

@media (max-width:900px){
  .vhead{grid-template-columns:230px 1fr;gap:32px;padding:32px 30px;}
  .vhead h1{font-size:20px;}
  .vresult{min-width:0;width:100%;}
  .vresult-main b{font-size:38px;}
}
@media (max-width:768px){
  .vhero{padding:38px 0 34px;}
  .vhero-en{font-size:32px;}
  .vhead-sec{padding:26px 0 34px;}
  .vhead{grid-template-columns:1fr;gap:24px;padding:24px 22px;margin-top:16px;}
  .vhead-photo{aspect-ratio:4/3;}
  .vhead-label{margin-bottom:20px;}
  .vhead-label span{font-size:12.5px;padding:3px 11px;}
  .vhead h1{font-size:18.5px;line-height:1.65;}
  .vhead-attr{margin-top:20px;font-size:14.5px;gap:12px;}
  .vhead-attr::before{width:40px;}
  .vresult{margin-top:20px;padding:10px 16px 12px;}
  .vresult-cap{font-size:11px;}
  .vresult-main{gap:12px;}
  .vresult-main .pill{font-size:14.5px;padding:6px 12px;}
  .vresult-main b{font-size:32px;}
  .vnote{font-size:10.5px;line-height:2;}
}

/* 自動スクロール中はスナップを切る。スナップが効いていると
   1フレームごとの移動が引き戻されて、かくついてしまう。 */
.voices-track.is-auto{scroll-snap-type:none;scroll-behavior:auto;}
.voices-track.is-auto .vcard{scroll-snap-align:none;}

/* 隣の節と地色が続いてしまうときは [eiken_voices bg="white"] で白地にする */
.voices--white{background:#fff;}