/* =======================
   基本設定
======================= */
:root{
  --preexam-max: 1100px;
  --preexam-gap: 20px;
  --preexam-ink: #222;
  --preexam-ink-weak: #666;
  --preexam-bg: #fff;
  --preexam-bg-alt: #f5f6f9;
  --preexam-primary: #1457ff;
  --preexam-navy: #111f4b;       /* タイトルの濃紺 */
}
.preexam{ color:var(--preexam-ink); line-height:1.8; }
.preexam *{ box-sizing:border-box; }
.preexam-container{ width:min(100%,var(--preexam-max)); margin-inline:auto; padding:0 20px; }

/* =======================
   ヒーロー帯（タイトル）
======================= */
.preexam-hero{ background:var(--preexam-bg-alt); padding:28px 0; }
.preexam-hero .preexam-container,
.preexam-hero h1,
.preexam-hero p{ text-align:center; }
.preexam-hero h1{ margin:0 0 6px; font-size:clamp(22px,4.8vw,32px); font-weight:900; letter-spacing:.02em; }
.preexam-hero p{ margin:0; color:#112a57; font-weight:700; }

/* =======================
   パンくず／セクション／箱
======================= */
.preexam-breadcrumb{ font-size:14px; background:var(--preexam-bg); border-bottom:1px solid #eee; }
.preexam-breadcrumb a{ color:inherit; }
.preexam-section{ padding:32px 0; }
.preexam-box{ background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); padding:20px; }

/* =======================
   セクション見出し（STEPS）
======================= */
.ttl{
  color:var(--preexam-navy); text-align:center; text-transform:uppercase;
  font-weight:900; line-height:1.05; letter-spacing:.02em;
  margin:6px 0 10px !important; font-size:clamp(40px,9vw,92px);
}
.lead{
  color:var(--preexam-navy); text-align:center; font-weight:900; line-height:1.25; letter-spacing:.02em;
  margin:0 0 18px !important; font-size:clamp(18px,3.6vw,34px);
}
#notice{ padding-top:24px; }

/* =======================
   STEPS（画像3カラム＋等間隔の縦線／下に“ご納車”）
   HTML: <ul class="preexam-steplist"><li><img>×3</li><li class="fin"><img></li></ul>
======================= */
.preexam .preexam-steplist{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:0;                 /* 縦線位置を正確にするため gap は 0 */
  row-gap:28px;
  padding:0;
  margin:20px 0 64px;
  position:relative;
  justify-items:center;
}
.preexam .preexam-steplist > li{
  list-style:none; text-align:center; padding:0 36px; margin:0; position:relative;
}

/* 画像は常に中央・実寸ベース（はみ出し防止のみ） */
.preexam .preexam-steplist > li > img{
  display:block; margin:0 auto; height:auto;
  width:auto; max-width:100%;        /* レスポンシブ */
  max-width:220px;                   /* PC時の見た目の基準幅 */
}

/* 等間隔の縦線（コンテナに2本引くから高さがズレない） */
.preexam .preexam-steplist::before,
.preexam .preexam-steplist::after{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:#1e2f6b38; pointer-events:none;
}
.preexam .preexam-steplist::before{ left:33.333%; transform:translateX(-0.5px); }
.preexam .preexam-steplist::after { left:66.666%; transform:translateX(-0.5px); }

/* 4つ目（ご納車）は段落ちで全幅センター */
.preexam .preexam-steplist > li.fin{
  grid-column:1 / -1; padding:0; margin-top:28px; position:relative;
}
.preexam .preexam-steplist > li.fin > img{
  width:auto; max-width:92vw; height:auto; display:block; margin:0 auto;
  max-width:360px;               /* PC時の“ご納車”サイズ */
}

/* タブレット：2カラム、縦線は非表示 */
@media (max-width:1024px){
  .preexam .preexam-steplist{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .preexam .preexam-steplist::before, .preexam .preexam-steplist::after{ display:none; }
  .preexam .preexam-steplist > li{ padding:0 20px; }
}

/* スマホ：1カラム。画像は画面に収まる最大幅で中央 */
@media (max-width:600px){
  .preexam .preexam-steplist{ grid-template-columns:1fr; row-gap:16px; }
  .preexam .preexam-steplist > li{ padding:0 8px; }
  .preexam .preexam-steplist > li > img{ max-width:min(86vw,320px); }
  .preexam .preexam-steplist > li.fin > img{ max-width:min(92vw,360px); }
}

/* =======================
   注意書き／同意枠／ボタン
======================= */
.preexam-aside{ color:var(--preexam-ink-weak); margin:8px 0 16px; }
.preexam-gray{ background:#f1f3f6; border-radius:8px; padding:16px; margin:16px 0; }
.preexam-gray h3{ margin:0 0 8px; font-weight:800; }
.red{ color:#d12; }

/* 同意条項スクロール枠 */
.preexam-scroll{
  max-height:380px; overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #e6e6e6; border-radius:8px; padding:16px; background:#fff;
}

/* 規約リンク横並び */
.preexam-termlist{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:12px 0; }

/* CF7ボタン */
.preexam-form .btn{ appearance:none; background:#ff6900; color:#fff; border:none; border-radius:999px; padding:20px 50px; font-weight:800; font-size: large; margin-top: 20px; }
.preexam-form .btn:hover{ filter:brightness(.95); }

/* アンカーのずれ対策（固定ヘッダー用） */
[id]{ scroll-margin-top:80px; }

/* ==== STEPS：1段目だけに仕切り線／画像中央寄せ／余白正常化（最終パッチ） ==== */

/* 旧：コンテナに描いた縦線は強制OFF（残っていても消す） */
.preexam .preexam-steplist::before,
.preexam .preexam-steplist::after { display: none !important; }

/* レイアウト：PC=3列 / TB=2列 / SP=1列（列間の見た目の余白は li の padding で作る） */
.preexam .preexam-steplist{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:0;                 /* 仕切り線の位置ズレ防止 */
  row-gap:28px;
  margin:20px 0 40px;
  padding:0;
  justify-items:center;
}

/* 1段目3カラム（.fin 以外） */
.preexam .preexam-steplist > li:not(.fin){
  position:relative;
  display:flex;                 /* 画像やテキスト量が違っても自然に伸縮 */
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0 28px;
}

/* 仕切り線：1列目・2列目の右端だけに線（3列目は無し） → 1段目の高さで止まる */
.preexam .preexam-steplist > li:not(.fin)::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;                     /* ← li の高さ分で終了＝下段に伸びない */
  right:-30px;
  width:1px;
  background:#1e2f6b38;
}
.preexam .preexam-steplist > li:nth-child(3)::after{ display:none; }

/* 画像は常に中央・実寸基準（過去の width:100% を打ち消す） */
.preexam .preexam-steplist > li > img{
  display:block;
  width:auto !important;
  max-width:220px;              /* PC時の目安。大きければここで調整 */
  height:auto;
  margin:0 auto;
}

/* 下段「ご納車」は段落ち＆中央に */
.preexam .preexam-steplist > li.fin{
  grid-column:1 / -1;
  padding:0;
  margin-top:16px;              /* 1段目との間隔を適量に */
}
.preexam .preexam-steplist > li.fin > img{
  width:auto; max-width:360px; height:auto; display:block; margin:0 auto;
}

/* タブレット以下は線を消して2列 */
@media (max-width:1024px){
  .preexam .preexam-steplist{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .preexam .preexam-steplist > li:not(.fin)::after{ display:none; }
  .preexam .preexam-steplist > li{ padding:0 18px; }
}

/* スマホは1列。画像は画面に合わせて拡縮 */
@media (max-width:600px){
  .preexam .preexam-steplist{ grid-template-columns:1fr; row-gap:16px; }
  .preexam .preexam-steplist > li{ padding:0 8px; }
  .preexam .preexam-steplist > li > img{ max-width:min(86vw,320px); }
  .preexam .preexam-steplist > li.fin > img{ max-width:min(92vw,360px); }
}

/* 申し込みボタンを中央寄せ */
.preexam-form .btnset{
  display: flex;
  justify-content: center;  /* ← 中央寄せ */
  align-items: center;
  margin-top: 12px;
  gap: 12px;                 /* 将来ボタンが増えても適度に間隔 */
}
.preexam-form .btn{
  display: inline-block;     /* 念のため */
  min-width: 220px;          /* 好みで調整：横幅の目安 */
  text-align: center;
}

/* === 提携各社リンク：中央揃え＆整列 === */
.preexam .preexam-termlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;                 /* 行間 / 列間 */
  margin: 14px 0 10px;
  padding: 0;
  list-style: none;
  text-align: center;
  font-weight: 700;
}
.preexam .preexam-termlist li{ list-style: none; margin: 0; }
.preexam .preexam-termlist a{ text-decoration: underline; }

/* === 同意チェック行：中央揃え・読みやすく === */
.preexam .privacyAgreeCenter{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 6px;
  text-align: center;
  font-weight: 700;
}
.preexam .privacyAgreeCenter input[type="checkbox"]{
  width: 22px; height: 22px; accent-color: var(--preexam-primary);
}
.preexam .privacyAgreeCenter a{ text-decoration: underline; }

/* SP時の折返し最適化 */
@media (max-width: 600px){
  .preexam .preexam-termlist{ gap: 6px 16px; }
  .preexam .privacyAgreeCenter{ flex-wrap: wrap; line-height: 1.7; }
}

/* 規約リンクを青に（一覧と同意文中のリンク） */
.preexam .preexam-termlist a,
.preexam .privacyCheckInputLabel a{
  color: #0a58ca;          /* 好みで #0d6efd などに変更可 */
  text-decoration: underline;
}
.preexam .preexam-termlist a:hover,
.preexam .privacyCheckInputLabel a:hover{
  filter: brightness(0.9);
}

/* テーマ側の強い色指定に負ける場合は ↓ を使用
.preexam .preexam-termlist a,
.preexam .privacyCheckInputLabel a{ color:#0a58ca !important; }
*/

/* 規約リンク（中央揃え＋任意位置で改行） */
.preexam .preexam-termlist,
.preexam-termlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;     /* 行間 / 列間 */
  margin: 14px 0 10px;
  padding: 0;
  list-style: none;   /* ● を消す */
}
.preexam .preexam-termlist li,
.preexam-termlist li{
  list-style: none;
  margin: 0;
}

/* ← これが“改行”役：次の要素を新しい行に送る */
.preexam .preexam-termlist .break,
.preexam-termlist .break{
  flex-basis: 100%;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
}

/* リンクは青に */
.preexam .preexam-termlist a,
.preexam-termlist a{
  color: #0a58ca;
  text-decoration: underline;
}
/* 同意事項の本文内リンクを青に */
.preexam .preexam-scroll a{
  color:#0a58ca;
  text-decoration:underline;
}
.preexam .preexam-scroll a:hover{ filter:brightness(0.9); }

/* テーマ側が強い場合は ↓ を使用
.preexam .preexam-scroll a{ color:#0a58ca !important; }
*/

/* ===== Pre-Examページ専用フッターの並び調整 ===== */

/* 白地・黒文字（念のため再指定） */
.preexam-footer{
  background:#fff !important; color:#111 !important;
}
.preexam-footer a{ color:#111 !important; }

/* ① メニュー：PCは1行で中央揃え。区切り「|」もきれいに表示 */
.preexam-footer .st-footer__ul{
  display:flex;
  flex-wrap:nowrap;         /* ← 1行固定 */
  justify-content:center;
  align-items:center;
  gap: 0 28px;              /* 項目間の間隔 */
  list-style:none;
  margin:0 0 28px;
  padding:0;
  white-space:nowrap;       /* 折り返し防止 */
}
.preexam-footer .st-footer__ul li{ margin:0; padding:0; }
.preexam-footer .st-footer__ul li + li{ position:relative; }
.preexam-footer .st-footer__ul li + li::before{
  content:"|";
  position:relative;
  left:-14px;
  color:#999;
}

/* ② 店舗情報：完全中央揃えに */
.preexam-footer .st-footer__info{ font-style:normal; }
.preexam-footer .st-footer__box{
  display:block;                 /* ← グリッドをやめて縦積み */
  max-width: 960px;
  margin: 0 auto 8px;
  text-align:center;
}
.preexam-footer .st-footer__boxTtl{
  font-weight:700;
  margin: 20px 0 8px;
}
.preexam-footer .st-footer__address,
.preexam-footer .st-footer__tel{
  margin: 0 0 8px;
}
.preexam-footer .st-footer__copy{
  text-align:center;
  margin: 20px 0 0;
}

/* ③ レスポンシブ：横幅が足りない端末ではメニューを折り返し */
@media (max-width: 960px){
  .preexam-footer .st-footer__ul{
    flex-wrap:wrap;          /* 折り返し許可 */
    gap: 8px 18px;
    white-space:normal;
  }
  .preexam-footer .st-footer__ul li + li::before{
    display:none;            /* 折り返し時は区切り線を消す */
  }
}
/* --- SPで画像が右にずれる／はみ出す対策（vw → 親基準に） --- */
@media (max-width: 600px){
  .preexam .preexam-steplist{ grid-template-columns: 1fr; row-gap: 16px; }
  .preexam .preexam-steplist > li{ padding: 0 8px; overflow: hidden; } /* 念のためのはみ出しガード */

  /* ここがポイント：親幅100%以内＋上限320px。vwは使わない */
  .preexam .preexam-steplist > li > img{
    width: min(100%, 320px) !important;
    max-width: none !important;   /* 既存の max-width を打ち消し */
    height: auto;
    display: block;
    margin: 0 auto;               /* 中央寄せを強制 */
  }
}