@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 {
  --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;

  /* 実測値 */
  --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) {
  .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;
}

@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;
}

/* 大見出し */
.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） */
.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;
}

/* 先頭の「＼」だけ字送りを広げる */
.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--orange{
  color:#FF6700!important;
}
.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;
}

/*
  タブの外側・フッターの直前に置く全学年共通の注記
  左右位置は .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;
}

/* 右端の斜め矢印 */
.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; }

.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);
}

.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行目だけ小さいバッジ */
.p-pre-badge-sub { font-size: 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）。
*/
.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;
}

/* 金額の下に添える注記 */
.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＞
   PC と SP で別フレーム。
   ------------------------------------------------------------------ */
.p-pre-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  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%;
}

/* 「とは？」。 */
.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;
  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;
}

/*  ポイント本文の下に入る画面イメージ */
.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; }

  .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-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; }

  /* 「に。」が泣き別れしないように左右を 2px ずつ詰める */
  .p-pre-about-points-body { padding-inline: 8px; }
}

/* ------------------------------------------------------------------
   8-3. 特典プレゼント ブロック（.p-pre-benefit）＜新中1＞
   ------------------------------------------------------------------ */
/*特典プレゼント　構造*/
.p-pre-benefit {
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  background: #FFFDE7;
}
.p-pre-benefit-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* サブ見出し */
.p-pre-benefit-sub-ttl {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 516px;
}
.p-pre-benefit-sub-ttl-txt {
  margin: 0;
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .16px;
  text-align: center;
}
.p-pre-benefit-sub-ttl-line {
  width: 100%;
}
.p-pre-benefit-sub-ttl-line img {
  display: block;
  width: 100%;
}

/* メイン見出し */
.p-pre-benefit-ttl{
  margin-bottom: 40px;
  width: 390px;
}
.p-pre-benefit-ttl img {
  width: 100%;
}

/* 吹き出し */
.p-pre-benefit-lead-balloon {
  display:inline-block;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 8px 18px;
  border: 1px solid #FF6700;
  background: #fff;
  color: #FF6700;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.p-pre-benefit-lead-balloon:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-right: 1px solid #FF6700;
  border-bottom: 1px solid #FF6700;
  background: #fff;
  transform: rotate(45deg);
}

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

/* 特典詳細 */
.p-pre-benefit-detail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 1 auto;
  gap: 24px; 
  flex-wrap: wrap;
}
.p-pre-benefit-detail-item {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.p-pre-benefit-detail-body-wrap {
  padding: 20px 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #FF6700;
}
.p-pre-benefit-detail-body {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  flex-wrap: nowrap;
}

/*特典詳細タイトル*/
.p-pre-benefit-detail-ttl-wrap {
  padding: 20px 30px;
  background: var(--orange, #FF6700);
}
.p-pre-benefit-detail-ttl {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.p-pre-benefit-detail-ttl-wrap.p-pre-benefit-detail-ttl-num .p-pre-benefit-detail-ttl {
  padding-left: calc(45px + 15px); /* 45px→アイコンの幅は最低限保持する */
}
.p-pre-benefit-detail-ttl-wrap.p-pre-benefit-detail-ttl-num {
  display: flex;
  position: relative;
  min-height: calc(52px + 10px); /* 52px→アイコンの高さは最低限保持する */
  align-items: center;
}
.p-pre-benefit-detail-ttl-wrap.p-pre-benefit-detail-ttl-num:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 45px;
  height: 52px;
  background-repeat: no-repeat;
  background-size: contain;
}
.p-pre-benefit-detail-ttl-wrap.p-pre-benefit-detail-ttl-num.p-pre-benefit-detail-ttl-num--01:before {
  background-image: url("/open/ev/pre/_assets/img/261005_63890_chu_op_ev_tag_01.png");
}
.p-pre-benefit-detail-ttl-wrap.p-pre-benefit-detail-ttl-num.p-pre-benefit-detail-ttl-num--02:before {
  background-image: url("/open/ev/pre/_assets/img/261005_63890_chu_op_ev_tag_02.png");
}

/*特典詳細テキスト*/
.p-pre-benefit-detail-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-pre-benefit-detail-txt-main {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
}
.p-pre-benefit-detail-txt-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
}

/*  特典詳細画像 */
.p-pre-benefit-detail-fig {
  margin: 0;
}
.p-pre-benefit-detail-fig img {
  width: auto;
  height: auto;
}
.p-pre-benefit-detail-fig--01 img {
  max-width: 120px;
}
.p-pre-benefit-detail-fig--02 img {
  max-width: 200px;
}

/*特典詳細プロフィール*/
.p-pre-benefit-detail-profile-wrap {
  padding: 20px;
  display:flex;
  background: #FFF1E7;
  flex-direction: column;
  gap: 8px;
}
.p-pre-benefit-detail-profile-fig-box {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
}
.p-pre-benefit-detail-profile-fig-img {
  width: 80px;
}
.p-pre-benefit-detail-profile-name {
  margin-bottom: 8px;
}
.p-pre-benefit-detail-profile-name {
  color: #333333;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}
.p-pre-benefit-detail-profile-position {
  color: #333333;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
}
.p-pre-benefit-detail-profile-txt {
  color: #333333;
  font-size: 12px;
  line-height: 1.5;
}

/* SP */
@media only screen and (max-width: 899px) {
  /*特典プレゼント　構造*/
  .p-pre-benefit {
    padding: 30px 15px;
    gap: 20px;
  }

  /* サブ見出し */
  .p-pre-benefit-sub-ttl {
    width: 100%;
  }

  /* メイン見出し */
  .p-pre-benefit-ttl{
    margin-bottom: 20px;
    width: 100%;
  }

  /* リード文 */
  .p-pre-benefit-lead {
    font-size: 14px;
  }

  /* 特典詳細 */
  .p-pre-benefit-detail {
    gap: 20px; 
  }
  .p-pre-benefit-detail-body {
    flex-direction: column;
  }
  .p-pre-benefit-detail-body-wrap {
    padding: 12px;
  }

  /*特典詳細タイトル*/
  .p-pre-benefit-detail-ttl-wrap {
    padding: 10px 15px;
  }
  .p-pre-benefit-detail-ttl {
    font-size: 16px;
  }

  /*特典詳細テキスト*/
  .p-pre-benefit-detail-txt-sub {
    font-size: 12px;
  }

  /*特典詳細プロフィール*/
  .p-pre-benefit-detail-profile-wrap {
    padding: 15px;
  }
  .p-pre-benefit-detail-profile-fig-img {
    width: 70px;
  }
}

/* ------------------------------------------------------------------
   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;
}

/* 灰色ボックス直下のメッセージ */
.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;
    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 {
  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;
  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;
}

/*  右端の下向きシェブロン*/
.p-pre-toc-list a::after {
  content: "";
  position: absolute;
  right: 6px;
  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; }
}

.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月号から」列を指すので右寄り */
@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;
}

/* 「◯◯が変わります」枠の外で単独で使うフキダシ*/
.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;
}

/* 表の下に置く本文 */
.p-pre-changebox-txt {
  width: 100%;
  max-width: 584px;
  text-align: left;
}

/* 受講費の下に置く「ここがパワーアップ！」 */
.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) {
  .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 で幅決め）。 */
.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; }

/*
  診断結果・おすすめ・注釈はひとつの濃緑コンテナに収める。
  おすすめブロックはこの濃緑の上に薄緑のカードとして乗る。
*/
.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;
}

/*  先生イラスト。 */
.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-price span {
  margin-right: 6px;
  color: var(--pre-text);
  font-size: 12px;
}

/* 幅を持つ金額用 */
.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;
  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）。
   ------------------------------------------------------------------ */
.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-note {
    margin: 8px 0 0;
    color: var(--pre-text);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}

.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;
}

/* 診断結果カード内の注意文 */
.p-pre-result-attention {
  margin: 0;
  color: var(--pre-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

.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) {
  /*
    SP はカード幅が足りないので折り返させる。
  */
  .p-pre-recommend-card { white-space: nowrap; }
}

/* ------------------------------------------------------------------
   14. 一覧表
   ------------------------------------------------------------------ */
/*
  ヘッダー行を固定し、データ行だけを縦スクロールさせる。
  高さは「ヘッダー ＋ データ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行のみで「1行目固定・2行目以降スクロール」が成立しないため。
*/
.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 ＋ ＋ ＋ タグ間の空白）が折り返して行が高くなる。
  最低限 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 */
  .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); }

  .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;
}

.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; }
}

/* リード→注記 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;
  align-items: 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;
}

/* 段落が続く場合の間隔*/
.p-pre-callout-txt + .p-pre-callout-txt { margin-top: 20px; }

/* common.css の a { text-decoration: none } を打ち消して下線を戻す */
.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; }

/* 対象リストの下に置く注記。リストと左端を揃える */
.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カラムを等分し、区切り線を白カードの中央に置く
  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;
}

/* 見出しだけは1行に収めたいので、収まらないぶん字間を詰める。 */
.p-pre-change-col-ttl { letter-spacing: 0; }

/* カラム内の補足文とボタン */
.p-pre-change-col-note {
  margin: 15px 0 0;
  font-size: 14px;
  line-height: 28px;
}

/* カラム内のケース見出し */
.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;
}

@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; }
}

/* 吹き出しの下向きの尾*/
.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 は画面下部の帯。
   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;
  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; }
}