@charset "UTF-8";
/*
==================================================================
  /open/ev/pre/ 専用スタイル

  - 本ページ専用のクラスはすべて .p-pre- 接頭辞を付ける。
    common.css に既存の .p-tab-* / .p-intro-* 等と衝突させないため。
  - ブレークポイントは既存サイト踏襲（SP: max-width 899px / PC: min-width 900px）。
==================================================================
*/

/* ------------------------------------------------------------------
   1. デザイントークン
   :root ではなく本ページの構成要素にスコープし、他ページへ漏らさない。
   ヘッダー / フッターは main の外にあるため個別に列挙する。
   ------------------------------------------------------------------ */
.p-pre,
.p-pre-header,
.p-pre-footer {
  /* Figma 変数 */
  --pre-primary: #124AB8;
  --pre-text: #333333;
  --pre-red: #FF0000;
  --pre-link: #0074C1;
  --pre-light-blue: #E8F3F9;
  --pre-light-blue-2: #E9F1FF;
  --pre-green-01: #126445;
  --pre-green-02: #073622;
  --pre-line: #C4C4C4;

  /* 実測値（Figma に変数化されていない箇所） */
  --pre-quiz-bg: #F2FAD3;
  --pre-result-bg: #264C45;
  --pre-cta: #FF6700;
  --pre-arrow-col: #D1EFFF;
  --pre-cell-bg: #F3F3F3;
  --pre-cell-bg-alt: #D1D1D1;
  --pre-cell-line: #F0F0F0;
  --pre-option-bg: #EFEFEF;
  --pre-option-text: #8F8F8F;
  --pre-line-green: #00B900;

  /* 難関特化コース紹介ブロックのグラデーション（grd_kou / grd_back_kou） */
  --pre-grd-from: #EB519E;
  --pre-grd-to: #00B8EF;
  --pre-tab-border: #88A4DB;
  --pre-point-bg: #FFEDE0;
  --pre-btn-shadow: #2D483C;

  /* コースバッジ枠線（実測値） */
  --pre-badge-none: #8E8E8E;
  --pre-badge-live: #C3DA43;
  --pre-badge-liveai: #0071BB;
  --pre-badge-original: #004EA0;
  --pre-badge-prep: #124AB8;
  --pre-badge-hybrid: #FF001C;
  --pre-badge-touch: #FF001C;
  --pre-badge-standard-ck: #FF001C;

  color: var(--pre-text);
  font-family: "Noto Sans JP", "Noto Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/*
  common.css の .l-main は固定ヘッダーの高さ分の padding-top を持つが、
  本ページのヘッダーは通常フローで並ぶ（.p-pre-header で position: static に打ち消し済み）ため、
  KV がヘッダーに接するよう padding も打ち消す。
*/
.p-pre.l-main { padding-top: 0; }

.p-pre *,
.p-pre *::before,
.p-pre *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   2. ユーティリティ
   ------------------------------------------------------------------ */
.p-pre-u-pc { display: none; }
.p-pre-u-sp { display: inline; }

@media print, screen and (min-width: 900px) {
  .p-pre-u-pc { display: inline; }
  .p-pre-u-sp { display: none; }
}

/* ------------------------------------------------------------------
   3. ヘッダー / フッター
   ------------------------------------------------------------------ */
.p-pre-header {
  /*
    common.css の .l-header は position: fixed だが、
    本ページのヘッダーは KV の上に重ならず通常フローで並ぶデザインのため打ち消す。
    .l-header クラスを外せばこの打ち消しも不要になるが、
    クラスは残す方針なので打ち消しもセットで必要。
  */
  position: static;
  background: #fff;
  height: 60px;
  border-bottom: 1px solid #E5E5E5;
}

.p-pre-header-inr {
  height: 100%;
  padding-inline: 15px;
  display: flex;
  align-items: center;
}

.p-pre-header-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.p-pre-header-logo img {
  display: block;
  width: auto;
}

.p-pre-header-logo-corp img { height: 22px; }
.p-pre-header-logo-zemi img { height: 15px; }

.p-pre-footer {
  margin-top: 80px;
  background: #fff;
}

.p-pre-footer-link {
  background: var(--pre-light-blue);
  padding: 30px 15px;
}

.p-pre-footer-link-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  font-size: 13px;
  line-height: 1.6;
}

.p-pre-footer-link-list a { color: var(--pre-primary); }

.p-pre-footer-copy {
  max-width: 1200px;
  margin-inline: auto;
  padding: 20px 15px 40px;
  text-align: center;
}

.p-pre-footer-copy-link {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  font-size: 13px;
}

.p-pre-footer-copy-link a { color: var(--pre-primary); }

.p-pre-footer-copy-txt {
  margin: 0;
  font-size: 12px;
  color: #666;
}

/* ------------------------------------------------------------------
   4. KV / リード
   ------------------------------------------------------------------ */
.p-pre-kv { margin: 0; }

.p-pre-kv-ttl { margin: 0; }

.p-pre-kv img {
  display: block;
  width: 100%;
  height: auto;
}

.p-pre-lead {
  margin: 0;
  text-align: center;
  color: var(--pre-primary);
  font-weight: 700;
}

@media only screen and (max-width: 899px) {
  .p-pre-lead {
    padding: 60px 15px 0;
    font-size: 16px;
    line-height: 30px;
  }
}

@media print, screen and (min-width: 900px) {
  .p-pre-lead {
    padding: 120px 15px 0;
    font-size: 30px;
    line-height: 45px;
  }
}

/* ------------------------------------------------------------------
   5. タブ
   ------------------------------------------------------------------ */
.p-pre-tab {
  margin-inline: auto;
}

@media only screen and (max-width: 899px) {
  /*
    Figma の SP フレームはパネルが画面幅いっぱい（375px）に置かれ、
    左右の余白は .p-pre-panel-inr の 15px だけで作られている。
    ここで余白を足すとテキスト幅が Figma より狭くなり、行末が溢れる。
  */
  .p-pre-tab {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 900px) {
  .p-pre-tab {
    margin-top: 60px;
    /*
      960px 固定だと 900〜960px の画面幅ではみ出すため、
      画面が狭いときは左右 15px ずつ空けて縮む
    */
    width: min(960px, calc(100% - 30px));
  }
}

.p-pre-tab-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.p-pre-tab-nav-item {
  flex: 1 1 0;
  min-width: 0;
}

.p-pre-tab-nav-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid var(--pre-primary);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #fff;
  color: var(--pre-primary);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.p-pre-tab-nav-btn.is-active {
  background: var(--pre-primary);
  color: #fff;
  cursor: default;
}

@media only screen and (max-width: 899px) {
  .p-pre-tab-nav { gap: 5px; }
  .p-pre-tab-nav-btn { min-height: 74px; padding: 10px 2px; font-size: 12px; line-height: 18px; }
}

@media print, screen and (min-width: 900px) {
  .p-pre-tab-nav { gap: 16px; }
  .p-pre-tab-nav-btn { min-height: 64px; padding: 10px 4px; font-size: 16px; line-height: 22px; }
  .p-pre-tab-nav-btn:not(.is-active):hover { background: var(--pre-light-blue-2); }
}

.p-pre-tab-body {
  border: 1px solid var(--pre-primary);
  background: #fff;
}

.p-pre-panel[hidden] { display: none; }

.p-pre-panel-inr {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* 再校戻し ver08：SP は「余白もう少し詰めて」の赤入れによりセクション間を 50px に */
@media only screen and (max-width: 899px) {
  .p-pre-panel-inr { padding: 60px 15px; gap: 50px; }
}

@media print, screen and (min-width: 900px) {
  .p-pre-panel-inr { padding: 60px; }
}

/* セクション内の縦積み */
.p-pre-sec {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* リボン見出しが直下のボックスに重なるセクション */
.p-pre-sec--ribbon-overlap { gap: 0; }

.p-pre-sec--ribbon-overlap > .p-pre-ribbon {
  position: relative;
  z-index: 1;
}

.p-pre-sec--ribbon-overlap > .p-pre-ribbon--news { margin-bottom: -22px; }
.p-pre-sec--ribbon-overlap > .p-pre-ribbon--important { margin-bottom: -23px; }

/* ------------------------------------------------------------------
   6. 汎用パーツ
   ------------------------------------------------------------------ */

/* リボン見出し（六角形） */
.p-pre-ribbon {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  -webkit-clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
  clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
}

.p-pre-ribbon--news {
  background: var(--pre-primary);
  min-width: 191px;
  min-height: 44px;
  padding: 11px 30px;
  font-size: 16px;
}

.p-pre-ribbon--important {
  background: var(--pre-red);
  min-width: 191px;
  min-height: 55px;
  padding: 5px 30px;
  font-size: 26px;
  line-height: 45px;
}

/* 大見出し（Figma h3：Noto Sans JP Medium 26px / 45px） */
.p-pre-hl {
  margin: 0;
  color: var(--pre-primary);
  font-size: 26px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: .16px;
  text-align: center;
}

/* SP で3行以上になる長い見出しは行間を詰める */
@media only screen and (max-width: 899px) {
  .p-pre-hl--tight { line-height: 38px; }
}

/* 新中2・新中3 の「重要」見出し（SP 18px・PC 20px）
   Figma は SP だけ #003F69 だが、指示により新中1の「重要」直下と揃えて
   --pre-primary（#124AB8）に統一している。PC はもともと同じ値。 */
.p-pre-hl--md {
  color: var(--pre-primary);
  font-size: 18px;
  line-height: 30px;
  letter-spacing: normal;
}

/* SP はリボン〜見出し〜本文が 20px 間隔（.p-pre-sec の gap 30 から詰める） */
@media only screen and (max-width: 899px) {
  .p-pre-hl--md,
  .p-pre-hl--md + .p-pre-txt { margin-top: -10px; }
}

@media print, screen and (min-width: 900px) {
  .p-pre-hl--md {
    font-size: 20px;
  }
}

/* ＼締め切りは…／ */
.p-pre-hl--sm {
  font-size: 23.8px;
  font-weight: 700;
  line-height: 40.8px;
}

/* 先頭の「＼」だけ字送りを広げる（Figma の指定どおり） */
.p-pre-hl-slash { letter-spacing: 8px; }

/* 本文 */
.p-pre-txt {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: .48px;
}

.p-pre-txt--center { text-align: center; }

/* PC は中央、SP は左揃え */
.p-pre-txt--center-pc { text-align: center; }

@media only screen and (max-width: 899px) {
  .p-pre-txt--center-pc { text-align: left; }
}

/* 補足の一文 */
.p-pre-txt--sm {
  font-size: 14px;
  line-height: 28px;
  letter-spacing: normal;
}

.p-pre-txt--red { color: var(--pre-red); }

/* リボン直下のリード文 */
.p-pre-txt--lg {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: normal;
  color: var(--pre-primary);
}

@media print, screen and (min-width: 900px) {
  .p-pre-txt--lg { font-size: 20px; }
}

.p-pre-sup { font-size: 10px; vertical-align: super; }

/* 注記 */
.p-pre-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  text-align: left;
}

.p-pre-notes li {
  display: flex;
  gap: 3px;
}

/* 中央寄せの注記は flex を解いて行送りごと中央に揃える */
.p-pre-notes--center li {
  display: block;
  text-align: center;
}

.p-pre-notes--center .p-pre-notes-mark { margin-right: 2px; }

.p-pre-notes-mark { flex: 0 0 auto; }

/* common.css の a { text-decoration: none } を打ち消して下線を戻す */
.p-pre-notes a {
  color: var(--pre-link);
  text-decoration: underline;
  text-underline-position: from-font;
}

/*
  タブの外側・フッターの直前に置く全学年共通の注記（再校戻し ver08 で追加）。
  左右位置は .p-pre-tab ＋ .p-pre-panel-inr の内側に合わせる。
  .p-pre-notes の margin: 0 / padding: 0 を上書きするため、この位置に置く。
  タブ枠の下線と密着するため、上に 30px（ページ標準のブロック間隔）空ける。
*/
.p-pre-globalnote {
  margin-top: 30px;
  margin-inline: auto;
  padding-inline: 15px;
}

@media print, screen and (min-width: 900px) {
  .p-pre-globalnote {
    width: min(960px, calc(100% - 30px));
    padding-inline: 60px;
  }
}

.p-pre-notes--onnavy { color: #fff; }
.p-pre-notes--onnavy a { color: #fff; }

/* 診断結果ブロック内の注釈（濃緑背景の上に置かれる） */
.p-pre-notes--result {
  margin: 10px auto 0;
  max-width: 556px;
  color: #fff;
}

/* 図版 */
.p-pre-fig {
  margin: 0;
  text-align: center;
}

.p-pre-fig img {
  max-width: 100%;
  height: auto;
}

/* 図版直後の注記は図版の幅に揃える */
.p-pre-fig + .p-pre-notes {
  margin-inline: auto;
  width: 100%;
  max-width: 580px;
}

/* ボタン */
.p-pre-btnwrap {
  margin: 0;
  width: 100%;
  text-align: center;
}

.p-pre-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 410px;
  min-height: 60px;
  padding: 12px 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

/* 右端の斜め矢印（Figma の icon-arrow-white.svg を書き出したもの） */
.p-pre-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: url(/open/ev/pre/_assets/img/260901_63749_chu_op_ev_icon_arrow_white.svg) no-repeat center / contain;
}

/* オプション講習の申し込み */
.p-pre-btn--apply {
  max-width: 580px;
  min-height: 91px;
  background: var(--pre-cta);
  border: 1px solid var(--pre-btn-shadow);
  box-shadow: 3px 3px 0 var(--pre-btn-shadow);
}

.p-pre-btn--apply::after { right: 25px; width: 14px; height: 14px; }

/* LINE 友だち追加 */
.p-pre-btn--line {
  background: var(--pre-line-green);
  border: 1px solid var(--pre-result-bg);
  box-shadow: 3px 3px 0 var(--pre-green-02);
}

.p-pre-btn--line::after { right: 16px; width: 12px; height: 12px; }

/*
  スタイル変更（初校戻し 2026-08-24 で追加）。
  Figma には無く、赤入れの参考画像からの実測値（地 #FFFE33 / 文字・枠・影 #011D4A、
  黄色の面 513 × 121px・枠 2px・影 7px の 2倍キャプチャ → 256 × 60px・枠 1px・影 3px）。
  矢印は白ではなく文字色に合わせるため、専用の SVG に差し替える。
*/
.p-pre-btn--style {
  max-width: 260px;
  padding: 12px 40px 12px 20px;
  background: #FFFE33;
  border: 1px solid #011D4A;
  box-shadow: 3px 3px 0 #011D4A;
  color: #011D4A;
}

.p-pre-btn--style::after {
  right: 16px;
  width: 12px;
  height: 12px;
  background-image: url(/open/ev/pre/_assets/img/260901_63749_chu_op_ev_icon_arrow_navy.svg);
}

/*
  押下できない状態のボタン（再校戻し ver08）。新中1の「スタイル変更はこちら」のみ。
  地色は赤入れキャプチャの実測値 #A6A6A6。枠・影・矢印は落とす。
*/
.p-pre-btn--disabled {
  padding: 12px 20px;
  background: #A6A6A6;
  border-color: #A6A6A6;
  box-shadow: none;
  color: #fff;
}

.p-pre-btn--disabled::after { content: none; }

.p-pre-btn-sub  { font-size: 14px; line-height: 22px; }
.p-pre-btn-main { font-size: 20px; line-height: 34px; }

@media only screen and (max-width: 899px) {
  .p-pre-btn--apply { min-height: 101px; }
}

@media print, screen and (min-width: 900px) {
  .p-pre-btn-sub { font-size: 16px; }
  .p-pre-btn:hover { opacity: .8; }
}

/* 注意喚起アイコン（赤丸の！） */
.p-pre-icon-ex {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  vertical-align: top;
  background: url("/open/ev/pre/_assets/img/260901_63749_chu_op_ev_icon_exclamation.png") no-repeat center / contain;
}

/* ------------------------------------------------------------------
   7. コースバッジ
   ------------------------------------------------------------------ */
.p-pre-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 133px;
  min-height: 61px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--pre-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
}

/* 1行目だけ小さいバッジ（Figma のコース名表記） */
.p-pre-badge-sub { font-size: 10px; }

/*
  バッジ内の補足（初校戻し 2026-08-24：「(紙講座)」→「(紙のテキスト中心の学習)」）。
  長くなるため、赤入れの「フォントサイズ小さ目にしてOK」に従って 10px にする。
*/
.p-pre-badge-note { display: block; font-size: 10px; line-height: 14px; }

.p-pre-badge--none        { border-style: dashed; border-color: var(--pre-badge-none); color: #8F8F8F; }
.p-pre-badge--live        { border-color: var(--pre-badge-live); }
.p-pre-badge--liveai      { border-color: var(--pre-badge-liveai); }
.p-pre-badge--original    { border-color: var(--pre-badge-original); }
.p-pre-badge--prep        { border-color: var(--pre-badge-prep); }
.p-pre-badge--hybrid      { border-color: var(--pre-badge-hybrid); }
.p-pre-badge--ck          { border-color: var(--pre-badge-hybrid); }
.p-pre-badge--challenge   { border-color: var(--pre-badge-original); }
.p-pre-badge--touch       { border-color: var(--pre-badge-touch); }
.p-pre-badge--standard-ck { border-color: var(--pre-badge-standard-ck); }
.p-pre-badge--nankan      { border-color: var(--pre-primary); background: var(--pre-primary); color: #fff; }
/*
  濃紺背景の上に置く白抜きバリアント（内容サイズ・16px）。
  再校戻し 2026-08-27：赤入れ「枠囲みトル」に従い、枠線と枠のための内側余白を削除。
*/
.p-pre-badge--nankan-o {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

/* バッジ群（＋で連結） */
.p-pre-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}

.p-pre-badges-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.p-pre-badges-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  color: var(--pre-green-02);
  white-space: nowrap;
}

/* 金額の下に添える注記（初校戻し 2026-08-24：「※お支払い方法によって異なります。」） */
.p-pre-badges-note {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: var(--pre-text);
}

.p-pre-badges-plus {
  font-size: 12px;
  font-weight: 700;
  color: var(--pre-text);
}

/* ------------------------------------------------------------------
   8. 更新情報
   ------------------------------------------------------------------ */
.p-pre-news-box {
  padding: 40px 30px 30px;
  border-radius: 8px;
  background: var(--pre-light-blue-2);
}

.p-pre-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 1行目＝New! バッジ＋日付 / 2行目＝本文 */
.p-pre-news-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--pre-primary);
  font-size: 12px;
  line-height: 15px;
}

.p-pre-news-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-pre-news-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 51px;
  min-height: 20px;
  padding: 3px 10px;
  border-radius: 30px;
  background: var(--pre-red);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.p-pre-news-date {
  flex: 0 0 auto;
  font-weight: 500;
}

.p-pre-news-text { margin: 0; }

/* PC は1行・16px・中央寄せ（SP フレームとはレイアウトが異なる） */
@media print, screen and (min-width: 900px) {
  .p-pre-news-box { padding: 50px 30px 30px; }

  .p-pre-news-list { align-items: center; }

  .p-pre-news-item {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    line-height: 22px;
  }

  .p-pre-news-head { align-items: flex-start; }
  .p-pre-news-badge { margin-top: 1px; }
}

/* ------------------------------------------------------------------
   8-2. 難関特化コースとは？ ブロック（.p-pre-about）＜新中1〜3＞
   初校戻し（2026-08-21）で図版 pic_01 の差し替えに伴い新設。
   PC と SP で別フレーム。
   ------------------------------------------------------------------ */
.p-pre-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* Figma の角度をそのまま使う（PC 96.152deg / SP 91.232deg） */
  background: linear-gradient(96.152deg, rgb(235 81 158 / .1) 5.95%, rgb(0 184 239 / .1) 100%);
}

.p-pre-about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.p-pre-about-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* 見出し「2027年4月からリニューアル！」＋斜めライン */
.p-pre-about-ttl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.p-pre-about-ttl-txt {
  margin: 0;
  color: var(--pre-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .16px;
  text-align: center;
}

.p-pre-about-ttl-line {
  margin: 0;
  width: 100%;
}

.p-pre-about-ttl-line img {
  display: block;
  width: 100%;
  height: auto;
}

/* ロゴ（進研ゼミ 中学講座 ／ 難関特化コース（エベレス）＋「とは？」） */
.p-pre-about-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.p-pre-about-logo-brand {
  margin: 0;
  width: 207px;
}

.p-pre-about-logo-row {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

/* 「とは？」。Figma は PC 20px / SP 16px */
.p-pre-about-logo-suffix {
  color: var(--pre-primary);
  font-weight: 700;
  white-space: nowrap;
}

.p-pre-about-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* リード文 */
.p-pre-about-lead {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: normal;
  text-align: center;
}

.p-pre-about-fig {
  margin: 0;
  text-align: center;
}

.p-pre-about-fig img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

/* ポイント3枚の上に載るリード文 */
.p-pre-about-hl {
  margin: 0;
  text-align: center;
}

.p-pre-about-hl-em {
  color: var(--pre-primary);
  font-weight: 700;
}

/* ポイント3枚 */
.p-pre-about-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}

.p-pre-about-points-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* バッジ。.p-pre-points-num と同じく本体に -17px 食い込ませる */
.p-pre-about-points-num {
  position: relative;
  z-index: 1;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: linear-gradient(109.276deg, var(--pre-grd-from) 5.95%, var(--pre-grd-to) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  /* Figma の p3 は字送り 0。common.css の body(0.16px) を打ち消す */
  letter-spacing: normal;
}

.p-pre-about-points-body {
  flex: 1 1 auto;
  margin-top: -17px;
  padding: 30px 10px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  text-align: center;
}

.p-pre-about-points-ttl {
  margin: 0;
  color: var(--pre-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .16px;
}

.p-pre-about-points-txt {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
}

/*
  ポイント本文の下に入る画面イメージ（再校戻し ver08 で追加）。
  素材は 570×414 の 2倍サイズなので等倍は 285px。PC はカード内側が 224px しかないため
  幅いっぱいまで縮める。
*/
.p-pre-about-points-fig { margin: 0; }

.p-pre-about-points-fig img {
  width: 100%;
  max-width: 285px;
  height: auto;
}

@media only screen and (max-width: 899px) {
  .p-pre-about {
    padding: 60px 15px;
    background: linear-gradient(91.232deg, rgb(235 81 158 / .1) 5.95%, rgb(0 184 239 / .1) 100%);
  }

  .p-pre-about-logo-suffix {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: normal;
  }

  /* naknan は「とは？」の残り幅に合わせて伸縮する */
  .p-pre-about-logo-name {
    flex: 1 1 0;
    min-width: 0;
  }

  .p-pre-about-fig img { width: 315px; }

  /* SP は全文 20px 太字。青は「『進研ゼミ 中学講座』が使い放題」まで */
  .p-pre-about-hl {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: .16px;
  }

  .p-pre-about-points {
    flex-direction: column;
    gap: 24px;
  }
}

@media print, screen and (min-width: 900px) {
  .p-pre-about { padding: 30px; }

  /* 見出しの斜めラインは 482px 幅 */
  .p-pre-about-ttl {
    margin-inline: auto;
    width: 482px;
  }

  .p-pre-about-logo-suffix {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: .16px;
  }

  .p-pre-about-logo-name { width: 384px; }

  /* .p-pre-about-fig img { width: 100%; } */

  .p-pre-about-hl {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: normal;
  }

  .p-pre-about-points { gap: 24px; }

  .p-pre-about-points-item { flex: 1 1 0; }

  /*
    Figma のカード内側は 224px ちょうどで、14px の日本語16文字（224.04px）が
    わずかに溢れ「に。」が泣き別れする。左右を 2px ずつ詰めて逃げ幅を作る。
  */
  .p-pre-about-points-body { padding-inline: 8px; }
}

/* ------------------------------------------------------------------
   9. 新小6：受講費表 / オプション講習
   ------------------------------------------------------------------ */
/* 「重要」リボンが重なる灰色ボックス */
.p-pre-important {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 15px 30px;
  border-radius: 8px;
  background: var(--pre-cell-bg);
}

@media print, screen and (min-width: 900px) {
  .p-pre-important { padding: 50px 0 30px; }
}

.p-pre-important-txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-pre-important-lead {
  margin: 0;
  color: var(--pre-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .16px;
  text-align: center;
}

.p-pre-important-note {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}

/* 灰色ボックス直下のメッセージ（Figma 外／初校戻し 2026-08-21 で追加）
   文字サイズ・色は直下のオプション講習の注記（.p-pre-notes）に揃える */
.p-pre-important-msg {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 20px;
  text-align: left;
}

/* 受講費の白カード */
.p-pre-fee {
  margin-inline: auto;
  display: flex;
  padding: 30px;
  background: #fff;
}

.p-pre-fee-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.p-pre-fee-term {
  margin: 0;
  min-width: 167px;
  padding: 5px 10px;
  background: var(--pre-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.p-pre-fee-term-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

.p-pre-fee-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.p-pre-fee-label {
  margin: 0;
  color: var(--pre-red);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

.p-pre-fee-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--pre-red);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.p-pre-fee-price b {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: .16px;
}

@media print, screen and (min-width: 900px) {
  .p-pre-fee-item + .p-pre-fee-item {
    margin-left: 30px;
    padding-left: 30px;
    /* Figma の区切り線 Line 1（#8F8F8F）。common の --pre-line とは別値 */
    border-left: 1px solid #8F8F8F;
  }
}

@media only screen and (max-width: 899px) {
  .p-pre-fee { flex-direction: column; width: 100%; }
  .p-pre-fee-item + .p-pre-fee-item {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #8F8F8F;
  }
}

/* オプション講習
   ※ 10秒判定の選択肢 .p-pre-option と名前が衝突するため p-pre-opt 系にしている */
.p-pre-opt {
  /* 見出しからの間隔を 60px にする（.p-pre-sec の gap 30 ＋ 30） */
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-pre-opt-figwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.p-pre-opt-figwrap .p-pre-notes {
  width: 100%;
  max-width: 580px;
}

.p-pre-opt-fig {
  margin: 0;
  text-align: center;
}

.p-pre-opt-fig img {
  max-width: 100%;
  height: auto;
}

.p-pre-opt-lead {
  margin: 0;
  color: var(--pre-green-02);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .16px;
  text-align: center;
}

.p-pre-points {
  list-style: none;
  /* リード文からの間隔を 60px にする（.p-pre-opt の gap 30 ＋ 30） */
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  gap: 16px;
}

.p-pre-points-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-pre-points-num {
  position: relative;
  z-index: 1;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: var(--pre-cta);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.p-pre-points-body {
  flex: 1 1 auto;
  margin-top: -17px;
  padding: 40px 20px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: var(--pre-point-bg);
  text-align: center;
}

.p-pre-points-lead {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

.p-pre-points-txt {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}

.p-pre-points-txt--lg { font-size: 20px; }

@media only screen and (max-width: 899px) {
  .p-pre-points { flex-direction: column; gap: 30px; }
}

/* ＼締め切りは…／ ＋ 申し込みボタン */
.p-pre-sec--apply { gap: 15px; }

/* ------------------------------------------------------------------
   10. 新中1：目次 / 中学準備講座
   ------------------------------------------------------------------ */
.p-pre-toc-ttl {
  margin: 0;
  color: var(--pre-text);
  font-size: 26px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: .16px;
  text-align: center;
}

.p-pre-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.p-pre-toc-list li { flex: 0 1 303px; }

.p-pre-toc-list a {
  position: relative;
  display: block;
  padding: 0 30px 17px 50px;
  border-bottom: 1px solid var(--pre-line);
  color: var(--pre-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: none;
  text-align: center;
}

/*
  右端の下向きシェブロン（Figma Vector 3：11 × 5px・線幅 1.5px・#124AB8）
  塗りつぶしの三角ではなく線で描かれた「∨」。
  7.8px の正方形を 45度回転させると対角が 11.03px になり Figma の幅と一致する。
*/
.p-pre-toc-list a::after {
  content: "";
  position: absolute;
  right: 6px;
  /* 下の余白 17px 分だけ上にずらしてテキストの中心に合わせる */
  top: calc(50% - 8.5px);
  width: 7.8px;
  height: 7.8px;
  border-right: 1.5px solid var(--pre-primary);
  border-bottom: 1.5px solid var(--pre-primary);
  transform: translateY(-65%) rotate(45deg);
}

@media only screen and (max-width: 899px) {
  .p-pre-toc-list { flex-direction: column; align-items: center; gap: 30px; }
  .p-pre-toc-list li { flex: 0 1 auto; width: 100%; max-width: 303px; }
  .p-pre-toc-list a { padding-bottom: 10px; }
  .p-pre-toc-list a::after { top: calc(50% - 5px); }
}

/* 中学準備講座の淡青ボックス */
.p-pre-prep {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 60px 15px;
  border-radius: 8px;
  background: var(--pre-light-blue-2);
}

@media print, screen and (min-width: 900px) {
  .p-pre-prep { padding: 60px; }
}

/* リード〜本文のかたまりは Figma のとおり詰める（30px → 15px） */
.p-pre-prep > .p-pre-prep-lead + .p-pre-txt { margin-top: -15px; }

.p-pre-prep-lead {
  margin: 0;
  text-align: center;
  color: var(--pre-red);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .16px;
}

.p-pre-prep-lead-sub {
  display: block;
  color: var(--pre-primary);
}

.p-pre-prep-lead u {
  text-decoration: underline;
  text-underline-position: from-font;
}

.p-pre-prep-ex {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
  font-size: 14px;
  line-height: 28px;
  text-align: left;
}

.p-pre-prep-ex-mark { flex: 0 0 auto; }

/* 「◯◯が変わります」枠 */
.p-pre-changebox {
  margin-inline: auto;
  width: 100%;
  max-width: 584px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* 時間帯側のラベルは「1月号から」列を指すので右寄り（pl-312） */
@media print, screen and (min-width: 900px) {
  .p-pre-changebox--time .p-pre-changebox-hd { margin-left: 312px; }
}

/* 白地に青文字のラベル＋下向き三角 */
.p-pre-changebox-hd {
  position: relative;
  margin: 0 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  background: #fff;
  color: var(--pre-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.p-pre-changebox-hd::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 13.5px 7.8px 0;
  border-color: #fff transparent transparent;
}

/*
  「◯◯が変わります」枠の外で単独で使うフキダシ（再校戻し ver08）。
  .p-pre-prep は align-items が既定の stretch なので、自分で中央に寄せる。
*/
.p-pre-changebox-hd--solo { align-self: center; }

.p-pre-changebox-body { width: 100%; }

/* 注記は表の左端に揃える（中央寄せコンテナの中でも左寄せを保つ） */
.p-pre-changebox .p-pre-notes {
  width: 100%;
  max-width: 584px;
}

/*
  表の下に置く本文（初校戻し 2026-08-24 で追加）。
  注記と同じ左端に揃えるため、注記と同じ幅指定を与える。
  赤入れの指示により、注記サイズではなく本文サイズ（.p-pre-txt--sm）で置く。
*/
.p-pre-changebox-txt {
  width: 100%;
  max-width: 584px;
  text-align: left;
}

/* 受講費の下に置く「ここがパワーアップ！」（再校戻し ver08 で追加） */
.p-pre-powerup {
  width: 100%;
  max-width: 584px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.p-pre-powerup-txt {
  margin: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: normal;
  text-align: left;
}

.p-pre-powerup-list {
  list-style: none;
  margin: -10px 0 0;
  padding: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: normal;
  text-align: left;
}

.p-pre-powerup-list li {
  display: flex;
  gap: 2px;
}

.p-pre-powerup-list li::before {
  content: "・";
  flex: 0 0 auto;
}

/* 授業時間帯の比較表 */
.p-pre-timetable {
  width: 100%;
  max-width: 584px;
  margin-inline: auto;
  border-collapse: collapse;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
}

.p-pre-timetable th,
.p-pre-timetable td {
  border: 0;
  padding: 10px 20px;
}

.p-pre-timetable thead th {
  padding-block: 8px;
  border-bottom: 1px solid #000;
  color: #fff;
}

/* 12月号まで＝グレー / 1月号から＝青 */
.p-pre-timetable thead th:first-of-type { background: #6D6D6D; }
.p-pre-timetable thead th:last-of-type  { background: var(--pre-primary); }

.p-pre-timetable thead .p-pre-timetable-arrow { border-bottom: 1px solid #000; }

.p-pre-timetable tbody th {
  border-right: 1px solid var(--pre-line);
  background: #DADADA;
  color: var(--pre-primary);
  font-weight: 500;
  white-space: nowrap;
}

.p-pre-timetable tbody td {
  background: #fff;
  color: var(--pre-primary);
  white-space: nowrap;
}

/* 1月号からの時間帯は赤字 */
.p-pre-timetable .is-after { color: var(--pre-red); }

/* 矢印セルは2行分の結合なので、行間の罫線からは除外する */
.p-pre-timetable tbody tr:not(:last-child) th,
.p-pre-timetable tbody tr:not(:last-child) td:not(.p-pre-timetable-arrow) { border-bottom: 1px solid var(--pre-line); }

/*
  矢印カラムは thead / tbody とも水色。
  上の `.p-pre-timetable tbody td` の白背景より詳細度を上げないと負けるため、
  テーブルのクラスを含めて指定する。
*/
.p-pre-timetable .p-pre-timetable-arrow {
  position: relative;
  width: 34px;
  padding: 0;
  background: var(--pre-arrow-col);
}

.p-pre-timetable-arrow::after {
  content: "»";
  color: var(--pre-primary);
  font-size: 18px;
  font-weight: 700;
}

/*
  SP は「1コマ目」の下に時間帯を積む2列レイアウト。
  table のままでは組み替えられないため grid に置き換える。
  表のセマンティクスは HTML 側の role 属性で維持する。
*/
@media only screen and (max-width: 899px) {
  .p-pre-timetable,
  .p-pre-timetable thead { display: block; }

  .p-pre-timetable thead tr {
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
  }

  /* 矢印セルが2行分をまたぐため、tbody 自体を grid にして tr は contents で透過させる */
  .p-pre-timetable tbody {
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
  }

  .p-pre-timetable tbody tr { display: contents; }

  .p-pre-timetable th,
  .p-pre-timetable td { padding: 5px 2px; }

  .p-pre-timetable tbody td { padding: 10px 2px; }

  .p-pre-timetable tbody th { border-right: 0; }

  .p-pre-timetable tbody tr:first-child th:first-of-type { grid-area: 1 / 1; }
  .p-pre-timetable tbody tr:first-child td:first-of-type { grid-area: 2 / 1; }
  .p-pre-timetable tbody tr:first-child th:last-of-type { grid-area: 1 / 3; }
  .p-pre-timetable tbody tr:first-child td:last-of-type { grid-area: 2 / 3; }
  .p-pre-timetable tbody tr:last-child th:first-of-type { grid-area: 3 / 1; }
  .p-pre-timetable tbody tr:last-child td:first-of-type { grid-area: 4 / 1; }
  .p-pre-timetable tbody tr:last-child th:last-of-type { grid-area: 3 / 3; }
  .p-pre-timetable tbody tr:last-child td:last-of-type { grid-area: 4 / 3; }
  .p-pre-timetable tbody .p-pre-timetable-arrow { grid-area: 1 / 2 / 5 / 3; }

  /* grid セルでは vertical-align が効かないため、矢印を縦横中央に置く */
  .p-pre-timetable .p-pre-timetable-arrow {
    display: grid;
    place-items: center;
  }
}

/* 受講費 */
/* 受講費 */
.p-pre-prep-fee-ttl {
  position: relative;
  z-index: 1;
  margin: 0 auto -15px;
  display: block;
  width: fit-content;
  padding: 3px 15px;
  background: var(--pre-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}

.p-pre-prep-fee {
  margin-inline: auto;
  width: 100%;
  max-width: 340px;
  padding: 30px 20px 20px;
  background: #fff;
  text-align: center;
}

.p-pre-prep-fee-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: var(--pre-red);
  font-size: 28px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .16px;
}

.p-pre-prep-fee-price span {
  font-size: 14px;
  line-height: 28px;
}

.p-pre-prep-fee-tax {
  margin: 5px 0 0;
  color: var(--pre-red);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

/* ------------------------------------------------------------------
   11. ！ご注意ください！
   ------------------------------------------------------------------ */
.p-pre-caution {
  padding: 32px 10px;
  background: var(--pre-light-blue-2);
  text-align: center;
}

@media print, screen and (min-width: 900px) {
  .p-pre-caution { padding: 32px 30px; }
}

.p-pre-caution-hd {
  margin: 0 0 10px;
  color: var(--pre-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.p-pre-caution-txt {
  margin: 0;
  color: var(--pre-red);
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

/* ------------------------------------------------------------------
   12. 10秒判定
   ------------------------------------------------------------------ */
.p-pre-quiz {
  background: var(--pre-quiz-bg);
  gap: 0;
  padding-bottom: 30px;
}

.p-pre-quiz-hd { margin: 0; }

.p-pre-quiz-hd img {
  display: block;
  width: 100%;
  height: auto;
}

/* 判定ヘッダー画像の直下の注記 */
.p-pre-quiz > .p-pre-notes { padding: 15px 30px 0; }

/* SP は中央寄せを解いて、※ のぶら下げ揃え（.p-pre-notes の基本形）に戻す */
@media only screen and (max-width: 899px) {
  .p-pre-quiz > .p-pre-notes--center li { display: flex; text-align: left; }
  .p-pre-quiz > .p-pre-notes--center .p-pre-notes-mark { margin-right: 0; }
}

.p-pre-quiz-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 15px 15px 0;
}

@media print, screen and (min-width: 900px) {
  .p-pre-quiz > .p-pre-notes { padding-top: 10px; }
  .p-pre-quiz-form { padding: 30px 30px 0; }
}

.p-pre-quiz-group {
  width: 100%;
  max-width: 556px;
  padding: 20px;
  background: #fff;
  text-align: center;
}

@media print, screen and (min-width: 900px) {
  /*
    左右は 26px（内側フレーム x=26）。
    30px にすると内側が 496px になり、3列（160 × 3 ＋ gap 12 × 2 ＝ 504px）が折り返す。
  */
  .p-pre-quiz-group { padding: 30px 26px; }
}

.p-pre-quiz-group-ttl {
  margin: 0 0 20px;
  color: var(--pre-green-01);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.p-pre-quiz-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
}

/*
  選択肢の列数（1列 160px ＋ gap 12px で幅を決める）。
  4択のグループ（新中1〜新中3の進研ゼミ側）も --2 で 2列×2行にする。
  親 .p-pre-quiz-group の内側は PC で 504px（556 − 左右 26）しかないため
  4列（676px）は入らず、全学年で 2列×2行に揃える判断（2026-08-25 表示確認済み）。
*/
.p-pre-quiz-options--1 { max-width: 160px; }
.p-pre-quiz-options--2 { max-width: 332px; }

.p-pre-quiz-plus { margin: 0; line-height: 0; }

.p-pre-option { display: block; cursor: pointer; }

.p-pre-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.p-pre-option-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 60px;
  padding: 8px 6px;
  border: 1px solid #BABABA;
  background: var(--pre-option-bg);
  color: var(--pre-option-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}

/* :has() 対応ブラウザ / 非対応ブラウザ（JS が .is-selected を付与）の両対応 */
.p-pre-option:has(input:checked) .p-pre-option-box,
.p-pre-option.is-selected .p-pre-option-box {
  border: 2px solid var(--pre-green-01);
  background: var(--pre-quiz-bg);
  color: var(--pre-green-01);
}

.p-pre-option input:focus-visible + .p-pre-option-box {
  outline: 2px solid var(--pre-primary);
  outline-offset: 2px;
}

@media only screen and (max-width: 899px) {
  .p-pre-quiz-options { flex-direction: column; align-items: center; }
}

/* 確認ボタン */
.p-pre-quiz-submit {
  margin: 40px 0 0;
  width: 100%;
  text-align: center;
}

.p-pre-quiz-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 332px;
  min-height: 60px;
  padding: 12px 20px;
  border: 1px solid var(--pre-green-02);
  background: var(--pre-cta);
  box-shadow: 3px 3px 0 #001624;
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity .2s;
}

.p-pre-quiz-btn:disabled {
  border-color: #9E9E9E;
  background: #C4C4C4;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  color: #fff;
  cursor: not-allowed;
}

@media print, screen and (min-width: 900px) {
  .p-pre-quiz-btn:not(:disabled):hover { opacity: .85; }
}

/* ------------------------------------------------------------------
   13. 診断結果 / おすすめ
   ------------------------------------------------------------------ */
.p-pre-result {
  width: 100%;
  /* 確認ボタンからの間隔（gap 40） */
  margin-top: 40px;
  padding-inline: 15px;
}

@media print, screen and (min-width: 900px) {
  .p-pre-result { padding-inline: 30px; }
}

.p-pre-result-item[hidden] { display: none; }

/*
  診断結果・おすすめ・注釈はひとつの濃緑コンテナに収める（Figma 準拠）。
  おすすめブロックはこの濃緑の上に薄緑のカードとして乗る。
*/
.p-pre-result-item {
  position: relative;
  padding: 40px 20px;
  background: var(--pre-result-bg);
}

/* SP は上だけ 44px（白カード上端が枠上端から 76px） */
@media only screen and (max-width: 899px) {
  .p-pre-result-item { padding-top: 44px; }
}

/* 結果カードは 252px 幅で中央 */
.p-pre-result-box {
  margin-inline: auto;
  width: 100%;
  max-width: 252px;
  text-align: center;
}

/*
  先生イラスト。
  Figmaでは、結果によって白カードの幅が
  変わっても常に「カードの右上角・下端がカード上端」に置かれるため、カード基準で配置する。
*/
.p-pre-result-hd + .p-pre-result-card { position: relative; }

.p-pre-result-hd + .p-pre-result-card::before {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 100%;
  background: url("/open/ev/pre/_assets/img/260901_63749_chu_op_ev_pic_03.png") no-repeat center / contain;
  pointer-events: none;
}

/* 新中1 は小さいサイズ */
.p-pre-result-hd + .p-pre-result-card::before { width: 50px; height: 62px; }

@media print, screen and (min-width: 900px) {
  .p-pre-result-hd + .p-pre-result-card::before { width: 57px; height: 71px; }
}

/* 新中2・新中3 は大きく、ボックスの上端をまたぐ */
[data-quiz="chu2"] .p-pre-result-hd + .p-pre-result-card::before,
[data-quiz="chu3"] .p-pre-result-hd + .p-pre-result-card::before {
  width: 81px;
  height: 100px;
}

/* 見出しはカードの左端に揃える（右上のイラストを避ける） */
.p-pre-result-hd {
  margin: 0 0 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
}

.p-pre-result-card {
  width: 100%;
  padding: 20px;
  background: #fff;
}

.p-pre-result-lead {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

/* 「・・・」だけ小さい */
.p-pre-result-lead small { font-size: 8px; }

.p-pre-result-placeholder {
  margin: 0;
  padding: 10px;
  background: var(--pre-option-bg);
  color: var(--pre-option-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: .16px;
}

.p-pre-result-placeholder-note {
  margin: 5px 0 0;
  color: var(--pre-option-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

/* ラベルはカードの左端に揃える */
.p-pre-result-label {
  margin: 14px 0 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: .16px;
  text-align: left;
}

.p-pre-result-card--price {
  min-height: 55px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p-pre-price {
  margin: 0;
  color: var(--pre-red);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .16px;
}

/* 金額の前に添える「月々」（.p-pre-table-price span と同じ表現。初校戻し 2026-08-21） */
.p-pre-price span {
  margin-right: 6px;
  color: var(--pre-text);
  font-size: 12px;
}

/*
  幅を持つ金額（初校戻し ver04：「月あたりの合計 19,280～20,650円」など）。
  ラベルが「月々」より長いので縦に積み、金額は数字の途中で折り返らないよう
  HTML 側の <br class="p-pre-u-sp"> で分ける。
*/
.p-pre-price--long {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 20px;
  line-height: 26px;
}

.p-pre-price--long span { margin-right: 0; }

/* 合計金額に添える注記 */
.p-pre-price-note {
  margin: 8px 0 0;
  color: var(--pre-text);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  text-align: left;
}

/* 訴求文へ導く下向き三角 */
.p-pre-price-arrow {
  margin: 6px 0 0;
  color: var(--pre-text);
  font-size: 12px;
  line-height: 1;
}

/* 「…なら、月々◯◯円！」の訴求文 */
.p-pre-price-appeal {
  margin: 6px 0 0;
  color: var(--pre-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  text-align: left;
}

.p-pre-price-appeal b { color: var(--pre-red); font-weight: 700; }

/* 診断結果内のコースバッジ（一覧表のバッジより大きい） */
.p-pre-result-card .p-pre-badge {
  width: 152px;
  min-height: 0;
  /* Figma は左右 10px だが 16px の文字が収まらないため詰める */
  padding: 8px 2px;
  font-size: 16px;
  line-height: 23px;
}

/* 診断結果内は1行目も同じサイズ */
.p-pre-result-card .p-pre-badge-sub { font-size: inherit; }

/* 2つ並ぶパターンは一覧表と同じサイズに戻す */
.p-pre-result-card .p-pre-badges-item .p-pre-badge {
  width: 133px;
  font-size: 12px;
  line-height: 15px;
}

.p-pre-result-card .p-pre-badges-item .p-pre-badge-sub { font-size: 10px; }

/* SP はカード幅 252px なのでバッジ2つを縦に積む */
.p-pre-result-card .p-pre-badges { flex-direction: column; }

@media print, screen and (min-width: 900px) {
  /* PC はカードを広げて横並びにする（バッジ 298px ＋ padding 20px）。
     133＋10＋12＋10＋133＝298px とちょうど収まる幅なので折り返しを止める */
  .p-pre-result-box:has(.p-pre-badges-item) { max-width: 338px; }
  .p-pre-result-card .p-pre-badges {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
  }
}

/* おすすめ */
.p-pre-recommend {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.p-pre-recommend-hd {
  margin: 0 0 12px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}

.p-pre-recommend-box {
  width: 100%;
  max-width: 426px;
  padding: 30px;
  border-radius: 5px;
  background: var(--pre-quiz-bg);
  text-align: center;
}

.p-pre-recommend-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 20px 15px;
  background: #fff;
  color: var(--pre-result-bg);
}

.p-pre-recommend-card p { margin: 0; }

.p-pre-recommend-card-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: .16px;
}

.p-pre-recommend-card-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.p-pre-recommend-label {
  margin: 20px 0 5px;
  color: var(--pre-result-bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: .16px;
}

/* ------------------------------------------------------------------
   9.1 診断結果内の白地コーナー（.p-pre-result-info）
   初校戻し ver04 で追加。Figma には無く、赤入れの
   「おすすめコースや受講費と並列の白地のコーナーを追加」に対応する。
   初校戻し ver05 の「緑枠でなく黄緑の枠内に含めてください」により、
   おすすめボックス（.p-pre-recommend-box）の中に置く。
   ------------------------------------------------------------------ */
.p-pre-result-info {
  margin: 20px auto 0;
  width: 100%;
  padding: 20px;
  background: #fff;
  text-align: left;
}

.p-pre-result-info-hd {
  margin: 0 0 10px;
  color: var(--pre-red);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.p-pre-result-info-txt {
  margin: 0;
  color: var(--pre-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.p-pre-result-info-link {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}

.p-pre-result-info-link a {
  color: var(--pre-link);
  text-decoration: underline;
  text-underline-position: from-font;
}

/*
  診断結果カード内の注意文（初校戻し ver04：新中1の
  「チャレンジとチャレンジタッチ両方」パターンで追加）。
  コースバッジではなくテキストだけを見せるパターン。
*/
.p-pre-result-attention {
  margin: 0;
  color: var(--pre-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

/*
  注意文の1行目（初校戻し ver05）。
  指示書（`初校戻し.xlsx` 新中1シート row=262）では赤字ではなく
  黒字＋下線の太字なので、色を戻して下線を引く。
*/
.p-pre-result-attention-lead {
  display: block;
  color: var(--pre-text);
  text-decoration: underline;
  text-underline-position: from-font;
}

.p-pre-result-attention-txt {
  margin: 10px 0 0;
  color: var(--pre-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  text-align: left;
}

.p-pre-recommend-card--price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 20px;
}

/* おすすめの金額は診断結果より小さい（20px / 行間 30px） */
.p-pre-recommend .p-pre-price { font-size: 20px; }

@media print, screen and (min-width: 900px) {
  /*
    Figmaは白カード全体が nowrap 指定。
    「エベレスでの学習に加えてAI質問や定期テスト対策ができる」がカード内側 326px に
    ぎりぎり収まる長さのため、折り返しを止めないと「る」だけが次行に落ちる。
    SP はカード幅が足りないので折り返させる。
  */
  .p-pre-recommend-card { white-space: nowrap; }
}

/* ------------------------------------------------------------------
   14. 一覧表
   ------------------------------------------------------------------ */
/*
  ヘッダー行を固定し、データ行だけを縦スクロールさせる。
  行数が多い新中2・新中3で表が縦に伸びすぎるための対応で、Figma には無い仕様。
  高さは「ヘッダー ＋ データ3行分」の実測値。
  新中1は3行しかないため、この高さだと全行が収まりスクロールは発生しない。
*/
.p-pre-table-wrap {
  width: 100%;
  max-height: 921px; /* SP：ヘッダー 220px ＋ データ3行分（実測 701px） */
  /*
    auto ではなく scroll。スクロールできることを常に見せるため、
    行数が足りてスクロール不要な場合もバーの領域を確保する。
  */
  overflow-y: scroll;
  /* Firefox 用 */
  scrollbar-width: thin;
  scrollbar-color: var(--pre-tab-border) var(--pre-light-blue-2);
}

@media print, screen and (min-width: 900px) {
  .p-pre-table-wrap { max-height: 696px; } /* PC：ヘッダー 147px ＋ データ3行分（183px × 3） */
}

/*
  新中1だけは2行分に下げる。
  データ行が3行しかないため3行分の高さでは全行が収まってしまい、
  「1行目固定・2行目以降スクロール」が成立しないため。
  上の .p-pre-table-wrap と詳細度が同じなので、必ずこの順（後）に置くこと。
*/
.p-pre-table-wrap--chu1 { max-height: 721px; } /* SP：ヘッダー 219px ＋ データ2行分（197 ＋ 305） */

@media print, screen and (min-width: 900px) {
  .p-pre-table-wrap--chu1 { max-height: 513px; } /* PC：ヘッダー 147px ＋ データ2行分（183px × 2） */
}

/*
  スクロールバーの見た目（WebKit / Blink）。
  既定のままだと macOS では操作中しか表示されないため、明示して常に見える状態にする。
  ※ iOS Safari は OS のオーバーレイ式スクロールバーのため、CSS では常時表示にできない。
*/
.p-pre-table-wrap::-webkit-scrollbar {
  width: 10px;
}

.p-pre-table-wrap::-webkit-scrollbar-track {
  background: var(--pre-light-blue-2);
}

.p-pre-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--pre-tab-border);
}

.p-pre-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.p-pre-table th,
.p-pre-table td {
  border-bottom: 1px solid var(--pre-line);
  vertical-align: middle;
  text-align: center;
}

/*
  ヘッダー行はスクロール領域の上端に貼り付ける。
  下の区切り線は border ではなく inset の box-shadow で描く。
  border-collapse: collapse では border をテーブル自身が描画するため、
  sticky で浮いたセルには border が付いてこず、スクロール時に線が消えてしまう。
*/
.p-pre-table thead th,
.p-pre-table thead td {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 #888;
}

/* 2段に分かれる行は、上段と下段の間に区切り線を入れない */
.p-pre-table tbody tr:has(td[rowspan]) > th,
.p-pre-table tbody tr:has(td[rowspan]) > td.p-pre-table-arrow { border-bottom: 0; }

/*
  列幅
  縦スクロール化でスクロールバーの幅（約15px）だけ表が狭くなり、43.5% では
  左セルのバッジ2つ（133px × 2 ＋ ＋ ＋ タグ間の空白）が折り返して行が高くなる。
  Figma の絶対幅 338px を保てるよう 45% にしている。
*/
.p-pre-table th:first-child,
.p-pre-table td:first-child { width: 45%; }

.p-pre-table-arrow {
  width: 4.5%;
  background: var(--pre-arrow-col);
  position: relative;
}

.p-pre-table-arrow::after {
  content: "»";
  color: var(--pre-primary);
  font-size: 16px;
  font-weight: 700;
}

.p-pre-table thead th:first-child {
  background: var(--pre-cell-line);
  color: var(--pre-primary);
  padding: 8px 10px;
}

.p-pre-table-th-result {
  background: var(--pre-primary);
  color: #fff;
  padding: 8px 10px;
}

.p-pre-table-hd {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.p-pre-table-hd-note {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

.p-pre-table-hd-sub {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.p-pre-table-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 133px;
  padding: 10px 20px;
  background: #fff;
  color: var(--pre-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}

.p-pre-table-chip-plus { font-size: 12px; }

.p-pre-table tbody th {
  background: var(--pre-cell-line);
  padding: 15px 20px;
  font-weight: 400;
}

.p-pre-table tbody th.is-alt { background: var(--pre-cell-bg-alt); }

.p-pre-table tbody td { background: #fff; padding: 15px; }

/* 矢印列は tbody td の白背景より後に指定する */
.p-pre-table tbody td.p-pre-table-arrow {
  background: var(--pre-arrow-col);
  padding: 8px 10px;
}

@media print, screen and (min-width: 900px) {
  .p-pre-table thead tr { height: 147px; }
  .p-pre-table tbody tr { height: 183px; }

  /* rowspan で2段に分かれる行は、2段あわせて 183px にする */
  .p-pre-table tbody tr:has(td[rowspan]),
  .p-pre-table tbody tr:has(th.is-alt) { height: 91.5px; }

  /* 右セルにバッジが1つだけ入る行は幅が広い */
  .p-pre-table tbody td > .p-pre-badges > .p-pre-badge--nankan:only-child { width: 295px; }

  /*
    新中1だけバッジ幅が 133px。
    他学年は 295px で、Figma 側で幅が揃っていないためそのまま再現する。
  */
  .p-pre-table--chu1 tbody td > .p-pre-badges > .p-pre-badge--nankan:only-child { width: 133px; }
}

.p-pre-table-price {
  margin: 0 0 10px;
  color: var(--pre-red);
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  /* 「！」アイコンが金額と分離して折り返さないようにする */
  white-space: nowrap;
}

.p-pre-table-price span {
  margin-right: 6px;
  color: var(--pre-text);
  font-size: 12px;
}

@media only screen and (max-width: 899px) {
  .p-pre-table th:first-child,
  .p-pre-table td:first-child { width: 46%; }
  .p-pre-table-arrow { width: 7.6%; }

  /* SP はヘッダー行の下罫線が 2px */
  .p-pre-table thead th,
  .p-pre-table thead td { box-shadow: inset 0 -2px 0 #888; }

  .p-pre-table thead th:first-child { padding: 20px 5px; }
  .p-pre-table-th-result { padding: 20px 10px; }

  /* SP は注記だけ左寄せ */
  .p-pre-table-hd-note { text-align: left; }
  .p-pre-table tbody th { padding: 20px 5px; }
  .p-pre-table tbody td { padding: 20px 15px; }

  /* 左の見出しだけ 16px 太字 */
  .p-pre-table thead th:first-child .p-pre-table-hd {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
  }

  .p-pre-table-hd-sub { flex-direction: column; gap: 5px; }
  .p-pre-table-chip { width: 100px; padding: 8px; }

  /* SP は「月々」と金額を縦に積む */
  .p-pre-table-price {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 26px;
  }

  .p-pre-table-price span { margin-right: 0; color: var(--pre-green-02); }

  /*
    金額が幅を持つ行（初校戻し 2026-08-24：「18,780～20,070円」）。
    申し送りの「（18,7/80円 のように泣き別れしないように」に対応する。
    nowrap は残したまま文字を詰め、HTML 側の <br class="p-pre-u-sp"> で
    「18,780～」／「20,070円」に分けるので、数字の途中では折り返らない。
  */
  .p-pre-table-price--long { font-size: 22px; line-height: 26px; }

  /* ！アイコンは流し込みから外し、「月々」の行の右寄りに置く */
  .p-pre-table-price .p-pre-icon-ex {
    position: absolute;
    top: 6px;
    right: -6px;
    margin-left: 0;
  }

  /* SP はセル内のバッジを縦積みにして横スクロールを避ける */
  .p-pre-table .p-pre-badges { flex-direction: column; }
  .p-pre-table .p-pre-badge { width: 100%; max-width: 100px; padding: 8px 2px; }
  .p-pre-table tbody th .p-pre-badge { width: 100%; }
}

/* 右セルのバッジ群 */
.p-pre-table tbody td .p-pre-badges { gap: 8px; }

/* 左セルは PC で横並び、SP で縦積み */
.p-pre-table tbody th .p-pre-badge {
  display: inline-flex;
  vertical-align: middle;
}

/* margin 5px ＋ タグ間の空白で Figma の 10px 間隔になる */
.p-pre-table tbody th .p-pre-badges-plus {
  display: inline-block;
  margin-inline: 5px;
  vertical-align: middle;
}

@media only screen and (max-width: 899px) {
  .p-pre-table tbody th .p-pre-badge {
    display: flex;
    margin-inline: auto;
  }

  .p-pre-table tbody th .p-pre-badges-plus {
    display: block;
    margin: 10px 0;
  }

  /* SP は右セルのバッジ群が 5px 間隔、＋ の行高は 15px */
  .p-pre-table tbody td .p-pre-badges { gap: 5px; }
  .p-pre-table .p-pre-badges-plus { line-height: 15px; }
}

/* ------------------------------------------------------------------
   15. アコーディオン
   ------------------------------------------------------------------ */
.p-pre-accordion { gap: 0; }

.p-pre-accordion-hd { margin: 0; }

/* 見出しは白地・枠線なし・薄い影 */
.p-pre-accordion-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
  color: var(--pre-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
}

@media print, screen and (min-width: 900px) {
  .p-pre-accordion-btn { font-size: 18px; line-height: 30px; }
}

.p-pre-accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.p-pre-accordion-icon::before,
.p-pre-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  background: var(--pre-primary);
  transform: translate(-50%, -50%);
  transition: transform .3s;
}

.p-pre-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.p-pre-accordion.is-open .p-pre-accordion-icon::after { transform: translate(-50%, -50%) rotate(180deg); }

.p-pre-accordion-body {
  overflow: hidden;
  background: var(--pre-light-blue-2);
  box-shadow: 0 4px 3px rgba(0, 0, 0, .2);
}

.p-pre-accordion-inr {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 60px 15px;
}

@media print, screen and (min-width: 900px) {
  .p-pre-accordion-inr { padding: 60px 30px; }
}

/* Figma の間隔（リード→注記 10px / 表→注記 10px / 注記→コールアウト 60px） */
.p-pre-accordion-inr > .p-pre-accordion-lead + .p-pre-notes { margin-top: -20px; }
.p-pre-accordion-inr > .p-pre-table-wrap + .p-pre-notes { margin-top: -20px; }
.p-pre-accordion-inr > .p-pre-callout { margin-top: 30px; }

/* SP はリード→注記 30px、注記→表 60px */
@media only screen and (max-width: 899px) {
  .p-pre-accordion-inr > .p-pre-accordion-lead + .p-pre-notes { margin-top: 0; }
  .p-pre-accordion-inr > .p-pre-notes + .p-pre-table-wrap { margin-top: 30px; }
}

/* リード文と注記の間隔（10px） */
.p-pre-accordion-inr > .p-pre-txt--sm + .p-pre-notes { margin-top: -20px; }

/* SP は「！について」の前後が 60px */
.p-pre-accordion-inr > .p-pre-notes + .p-pre-attention,
.p-pre-accordion-inr > .p-pre-attention + .p-pre-table-wrap { margin-top: 30px; }

@media print, screen and (min-width: 900px) {
  /* PC はリード文同士が 15px、「！について」の前も 15px */
  .p-pre-accordion-inr > .p-pre-txt--lg + .p-pre-txt--sm { margin-top: -15px; }
  .p-pre-accordion-inr > .p-pre-notes + .p-pre-attention { margin-top: -15px; }
  .p-pre-accordion-inr > .p-pre-attention + .p-pre-table-wrap { margin-top: 0; }
}

.p-pre-accordion-lead {
  margin: 0;
  color: var(--pre-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
}

@media print, screen and (min-width: 900px) {
  .p-pre-accordion-lead { font-size: 14px; line-height: 28px; }
}

/* 「！について」 */
.p-pre-attention {
  background: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
}

.p-pre-attention-hd {
  margin: 0 0 5px;
  color: var(--pre-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.p-pre-attention-hd .p-pre-icon-ex { margin: 0 4px 0 0; }

.p-pre-attention-txt {
  margin: 0;
  color: var(--pre-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

/* ------------------------------------------------------------------
   16. コールアウト（〜の方へ）
   ------------------------------------------------------------------ */
.p-pre-callout {
  margin-inline: auto;
  width: 100%;
  max-width: 533px;
}

.p-pre-callout-hd {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  /* display: flex; */
  align-items: center;
  /* justify-content: center; */
  width: fit-content;
  max-width: 100%;
  padding: 10px 30px;
  background: var(--pre-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  -webkit-clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
  clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
}

.p-pre-callout-body {
  margin-top: -22px;
  padding: 50px 20px 30px;
  background: #fff;
  text-align: center;
}

.p-pre-callout-lead {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 28px;
}

.p-pre-callout-lead b {
  display: block;
  color: var(--pre-primary);
  font-size: 20px;
  line-height: 30px;
}

.p-pre-callout-txt {
  margin: 0;
  font-size: 14px;
  line-height: 28px;
}

/* 段落が続く場合の間隔（初校戻し 2026-08-24 で本文が2段落になった） */
.p-pre-callout-txt + .p-pre-callout-txt { margin-top: 20px; }

/* common.css の a { text-decoration: none } を打ち消して下線を戻す（再校戻し ver08） */
.p-pre-callout-txt a {
  color: var(--pre-link);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* 「エベレス公式LINE」だけ緑・下線 */
.p-pre-callout-line {
  color: var(--pre-line-green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ------------------------------------------------------------------
   17. 4月号から〜に変更したい方
   ------------------------------------------------------------------ */
.p-pre-change {
  background: var(--pre-primary);
}

@media only screen and (max-width: 899px) {
  /* SP はタブパネルの内側余白を打ち消して全幅にする */
  .p-pre-change { margin-inline: -15px; }
}

.p-pre-change-inr {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

@media only screen and (max-width: 899px) {
  .p-pre-change-inr { padding: 60px 15px; }
}

@media print, screen and (min-width: 900px) {
  .p-pre-change-inr { padding: 80px 60px; }
}

.p-pre-change-ttl {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.p-pre-change-ttl { font-size: 30px; line-height: 45px; letter-spacing: .16px; }

@media only screen and (max-width: 899px) {
  .p-pre-change-ttl { flex-direction: column; }
}

.p-pre-change-card {
  background: #fff;
  padding: 40px 15px 50px;
  text-align: center;
}

@media print, screen and (min-width: 900px) {
  .p-pre-change-card { padding: 40px 50px 50px; }
}

.p-pre-change-card-hd {
  margin: 0 0 5px;
  color: var(--pre-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.p-pre-change-card-sub {
  margin: 0 0 30px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.p-pre-change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 660px;
  margin-inline: auto;
  text-align: left;
}

.p-pre-change-list li {
  display: flex;
  gap: 2px;
  font-size: 14px;
  line-height: 28px;
}

.p-pre-change-list li::before {
  content: "・";
  flex: 0 0 auto;
}

.p-pre-change-list li + li { border-top: 1px solid var(--pre-line); padding-top: 15px; }

/* 対象リストの下に置く注記（再校戻し ver08）。リストと左端を揃える */
.p-pre-change-note {
  max-width: 660px;
  margin: 15px auto 0;
}

.p-pre-change-txt {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
}

.p-pre-change-hl {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .16px;
  text-align: center;
}

/* SP は 18px・字間 0（PC は 20px のまま） */
@media only screen and (max-width: 899px) {
  .p-pre-change-hl { font-size: 18px; letter-spacing: 0; }
}

/* 見出しから 20px（inr の gap 60 から詰める） */
.p-pre-change-card--cols {
  margin-top: -40px;
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 30px;
}

/* 各カラムは内容幅 */
.p-pre-change-col { flex: 0 1 auto; }

.p-pre-change-col + .p-pre-change-col { border-left: 1px solid var(--pre-line); padding-left: 30px; }

/*
  PC は2カラムを等分し、区切り線を白カードの中央に置く（初校戻し ver06）。

  以前は flex: 0 1 auto（＝flex-basis が max-content）だったため、
  下の nowrap と組み合わさるとカラムが縮めず、2カラムの合計幅が
  白カードの内側を超えて左右にはみ出していた。
  flex: 1 1 0 で内容に依存しない等分にし、gap を 0 にして
  境界（2列目の border-left）がちょうど中央に来るようにする。
*/
@media print, screen and (min-width: 900px) {
  .p-pre-change-card--cols { gap: 0; }

  .p-pre-change-col {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 20px;
  }

  .p-pre-change-col + .p-pre-change-col { padding-left: 20px; padding-right: 0; }
}

@media only screen and (max-width: 899px) {
  .p-pre-change-card--cols { flex-direction: column; }
  .p-pre-change-col + .p-pre-change-col { border-left: none; border-top: 1px solid var(--pre-line); padding-left: 0; padding-top: 30px; }
}

.p-pre-change-col-ttl {
  margin: 0 0 15px;
  padding-bottom: 15px;
  position: relative;
  color: var(--pre-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .16px;
}

/* 見出し下の区切り線は 40 × 2px の青（Line 6。中央の縦線はグレー 1px） */
.p-pre-change-col-ttl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--pre-primary);
  transform: translateX(-50%);
}

.p-pre-change-col-txt {
  margin: 0;
  font-size: 14px;
  line-height: 28px;
}

/*
  Figmaでは見出し・本文とも折り返さないが、
  **初校戻し ver06 の「テキストが枠内からはみ出しているので、枠内に
  おさめてください」により nowrap をやめた。** カラム幅（白カード内側の
  半分 − 左右 20px）に収まらない行は折り返す。
  見出しだけは1行に収めたいので、収まらないぶん字間を詰める。
*/
.p-pre-change-col-ttl { letter-spacing: 0; }

/* カラム内の補足文とボタン（初校戻し 2026-08-24 で追加） */
.p-pre-change-col-note {
  margin: 15px 0 0;
  font-size: 14px;
  line-height: 28px;
}

/*
  カラム内のケース見出し（初校戻し ver04：新中2・新中3 で
  「オリジナルスタイル＋ライブスタイル」「同＋ライブ×AIスタイル」の
  2ケースに分かれた）。
*/
.p-pre-change-col-case {
  margin: 25px 0 0;
  color: var(--pre-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}

.p-pre-change-col .p-pre-btnwrap { margin-top: 20px; }

/* ------------------------------------------------------------------
   18. LINE
   ------------------------------------------------------------------ */
.p-pre-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* QR からの間隔は 10px */
.p-pre-line .p-pre-notes { margin-top: -20px; }

/* 新小6：独立した青地セクションとして置かれる */
.p-pre-line--section {
  background: var(--pre-primary);
}

@media only screen and (max-width: 899px) {
  .p-pre-line--section { padding: 60px 15px; }
}

@media print, screen and (min-width: 900px) {
  .p-pre-line--section { padding: 60px; }
}

.p-pre-line-hl {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: .16px;
}

/* 吹き出しからの間隔は 15px */
.p-pre-line-hl2 {
  margin: -15px 0 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .16px;
}

.p-pre-line-balloon {
  position: relative;
  width: 100%;
  max-width: 532px;
  /* 尾は ::after で箱の外に出るため、その分の余白を下に確保する */
  margin-bottom: 17.5px;
  padding: 10px 30px 22px;
  background: var(--pre-light-blue-2);
  text-align: center;
}

/* SP は Figmaどおり左右 15px。テキスト幅 285px を確保する */
@media only screen and (max-width: 899px) {
  .p-pre-line-balloon { padding-inline: 15px; }
}

.p-pre-line-balloon p {
  margin: 0;
  color: var(--pre-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: .48px;
}

@media print, screen and (min-width: 900px) {
  .p-pre-line-balloon p { font-size: 18px; line-height: 30px; letter-spacing: normal; }
}

/* 吹き出しの下向きの尾（Figma Polygon 3：25.1 × 17.4px） */
.p-pre-line-balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 17.5px 12.5px 0;
  border-color: var(--pre-light-blue-2) transparent transparent;
}

/* 新小6の吹き出しは2行構成 */
.p-pre-line-balloon .p-pre-line-balloon-sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: normal;
}

.p-pre-line-balloon .p-pre-line-balloon-main {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: normal;
}

/* SP フレームだけ濃緑・12px 指定（表記ゆれをそのまま再現） */
@media only screen and (max-width: 899px) {
  .p-pre-line-balloon .p-pre-line-balloon-sub {
    color: var(--pre-green-02);
    font-size: 12px;
    line-height: 15px;
  }
}

/* 注記のうち強調される行 */
.p-pre-notes-em {
  color: #FEF104;
  font-weight: 700;
}

.p-pre-line-qr {
  margin: 0;
  line-height: 0;
}

.p-pre-line-qr img {
  width: 162px;
  height: 162px;
}

/* ------------------------------------------------------------------
   19. モーション設定の尊重
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .p-pre *,
  .p-pre *::before,
  .p-pre *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------
   20. 追従 LINE ボタン
   PC は右下の四角ボタン、SP は画面下部の帯。
   PC は Figma では 253px の円だが、初校戻し（2026-08-21）で
   SP と同じ四角に変更し、サイズと文字を縮小した。
   KV を通過したら JS が .is-visible を付ける。
   ------------------------------------------------------------------ */
.p-pre-floating {
  position: fixed;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.p-pre-floating.is-visible {
  opacity: 1;
  visibility: visible;
}

.p-pre-floating-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma の実測値。--pre-line(#C4C4C4) とは別の値なので直接指定する */
  border: 1px solid #C3C3C3;
  background: var(--pre-line-green);
  box-shadow: 3px 3px 0 var(--pre-btn-shadow);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: .16px;
}

/* 右端の斜め矢印 */
.p-pre-floating-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url(/open/ev/pre/_assets/img/260901_63749_chu_op_ev_icon_arrow_white.svg) no-repeat center / contain;
}

@media only screen and (max-width: 899px) {
  .p-pre-floating {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px 0;
    background: rgba(0, 0, 0, .4);
  }

  .p-pre-floating-btn {
    width: 297px;
    max-width: calc(100% - 25px);
    height: 60px;
    margin-inline: auto;
  }

  /* 帯（20 + 60 + 20 = 100px）がフッター下端に重なるのを防ぐ */
  .p-pre-footer {
    padding-bottom: 100px;
  }
}

@media print, screen and (min-width: 900px) {
  .p-pre-floating {
    right: 91px;
    bottom: 40px;
  }

  .p-pre-floating-btn {
    width: 180px;
    height: 90px;
    border-radius: 8px;
  }

  /* SP よりボタンが狭いので、矢印を内側に寄せる */
  .p-pre-floating-btn::after { right: 15px; }
}