@charset "UTF-8";
/* =========================================================
   通学免許プラン お申込み
   色を変更する場合は :root の変数を編集してください
   ========================================================= */
:root {
  --green:        #33a840; /* メイン緑（帯・番号・アイコン） */
  --green-hover:  #2c9538;
  --green-dark:   #1f6e2b; /* 見出し文字・メインビジュアル背景 */
  --green-darker: #17561f;
  --green-link:   #2a7f35;
  --green-pale:   #f5fbed; /* 薄緑背景 */
  --green-line:   #cde8cf;
  --green-pref:   #2e8f31;
  --green-rule:   #4aad50;
  --cream:        #fff6d9; /* チェック欄 */
  --orange:       #f8a82b; /* フォーカス枠 */
  --pink:         #fc2a64; /* 申込ボタン */
  --pink-hover:   #ea1d56;
  --pink-shadow:  #c41f4f;
  --alert:        #a3112f;
  --gray-box:     #f6f6f4;
  --gray-bg:      #f8f8f8;
  --road:         #b0afaf;
  --text:         #2b2b2b;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--text);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-link); }
a:hover { color: var(--green-darker); }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* ---------- パンくず ---------- */
#panlist { max-width: 960px; margin: 0 auto; padding: 14px 20px; font-size: 14px; }
#panlist ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
#panlist a { color: inherit; text-decoration: underline; }
#panlist a:hover { color: var(--green-link); }

/* ---------- メインビジュアル ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--green-link);
  padding-bottom: 30px; /* 道路の高さ */
}
.hero__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.hero__label {
  padding: 4px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--green-link);
  font-weight: 900;
  font-size: 23px;
  letter-spacing: .08em;
  line-height: 1.6;
}
.hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.35;
}
/* イラスト（車＋キャラ）：左下、タイヤが道路に乗る位置 */
.hero__img {
  position: absolute;
  left: max(2vw, calc(50% - 530px)); /* 広い画面ではタイトル寄りに固定 */
  bottom: 6px; /* タイヤが道路の上に乗るよう重ねる */
  width: clamp(170px, 22vw, 300px); /* 中央のタイトルと重ならない大きさ */
  height: auto;
  z-index: 1;
}
.hero__road {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background:
    linear-gradient(#fff, #fff) left 4px / 100% 1px no-repeat,
    linear-gradient(#fff, #fff) left calc(100% - 4px) / 100% 1px no-repeat,
    var(--road);
  display: flex;
  align-items: center;
}
.hero__road-line {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #fff 0 24px, transparent 24px 46px);
}
@media (max-width: 767px) {
  .hero__inner { padding: 28px 16px 0; gap: 10px; }
  .hero__label { font-size: 15px; }
  .hero__title { font-size: 26px; }
  .hero__img { position: relative; left: auto; bottom: auto; width: 130px; margin: 4px 0 -18px; }
}

/* ---------- レイアウト ---------- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.section { display: flex; flex-direction: column; gap: 20px; }
.section-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 33px;
  font-weight: 700;
  color: var(--green-dark);
}
.section-title__icon {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
}

/* ※・で始まる行のぶら下げ */
.hang, .note-list li { padding-left: 1em; text-indent: -1em; }
.is-alert { color: var(--alert); font-weight: 500; }
.break-all { word-break: break-all; }
/* 黄色マーカー */
.marker { background: linear-gradient(transparent 70%, #fff27a 70%); }
/* スマホのみ改行 */
@media (min-width: 768px) { .sp-only { display: none; } }
/* PCのみ改行 */
@media (max-width: 767px) { .pc-only { display: none; } }

/* ---------- お申込みの流れ ---------- */
/* 支給デザイン（矢羽型）に合わせた配色 */
.flow {
  --flow-ink: #000;
  --flow-notch: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.flow__badge-wrap { display: flex; }
.flow__badge {
  width: fit-content; /* 文字の長さに合わせる */
  max-width: 100%;
  padding: 10px 56px 10px 24px;
  background: #632ee3; /* 支給色 #5b16f0 を抑えめに */
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 50%, calc(100% - 48px) 100%, 0 100%);
}
.flow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.flow-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 12px calc(var(--flow-notch) + 2px) 12px calc(var(--flow-notch) + 6px);
  background: #dcaaf0;
  color: var(--flow-ink);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - var(--flow-notch)) 0, 100% 50%, calc(100% - var(--flow-notch)) 100%, 0 100%, var(--flow-notch) 50%);
}
.flow-card:first-child {
  padding-left: 14px;
  clip-path: polygon(0 0, calc(100% - var(--flow-notch)) 0, 100% 50%, calc(100% - var(--flow-notch)) 100%, 0 100%);
}
/* 支給色（#dcaaf0 / #ee86de / #f45fd0 / #fa5b6b / #ff3b3b）を少し抑えめに調整 */
.flow-card:nth-child(1) { background: #e1b8f1; }
.flow-card:nth-child(2) { background: #ef99de; }
.flow-card:nth-child(3) { background: #f179d3; }
.flow-card:nth-child(4) { background: #f77782; }
.flow-card:nth-child(5) { background: #f85a5a; }
.flow-card__num { display: none; } /* 支給デザインに番号なし（順番は ol で保持） */
.flow-card__text {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.note-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: 16px; font-weight: 700; }
/* タブレット幅：5列に収まるよう文字と矢羽を小さく */
@media (min-width: 768px) and (max-width: 1000px) {
  .flow { --flow-notch: 14px; }
  .flow-card__text { font-size: 13px; }
}

/* ---------- アコーディオン ---------- */
.confirm { display: flex; flex-direction: column; gap: 24px; }
.acc { display: flex; flex-direction: column; }
.acc__head {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--green);
  color: #fff;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 700;
}
.acc__head:hover { background: var(--green-hover); }
.acc__head:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.acc__sign::before { content: "+"; font-size: 28px; line-height: 1; font-weight: 400; }
.acc__head[aria-expanded="true"] .acc__sign::before { content: "−"; }
.acc__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px clamp(12px, 3vw, 28px);
  border: 1px solid var(--green-line);
  border-top: none;
}
.acc__body[hidden] { display: none; }
.acc__body--text { padding: 24px 28px; gap: 22px; font-size: 14px; line-height: 1.85; }
.acc__body--tight { gap: 16px; }
.acc__check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--cream);
  padding: 14px 16px;
  margin: 8px 20px 0;
  font-size: 15px;
  cursor: pointer;
}
.acc__check input { width: 20px; height: 20px; accent-color: var(--green); margin: 0; }

.text-block { display: flex; flex-direction: column; gap: 4px; }
.text-block h3 { margin: 0 0 4px; font-size: 16px; color: var(--green-dark); }
.text-block strong { color: var(--green-dark); }
.note-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--gray-box);
  font-size: 14px;
  line-height: 1.85;
}
/* 個人情報保護方針 */
.policy { display: flex; flex-direction: column; gap: 1.85em; margin-top: 1em; counter-reset: policy; }
.policy__item { position: relative; padding-left: 2.6em; counter-increment: policy; }
.policy__title { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.policy__title::before { content: counter(policy) "."; position: absolute; left: 1.3em; }
.policy__indent { padding-left: 1.5em; }
.policy-list li { position: relative; padding-left: 1.5em; }
.policy-list li::before {
  content: "";
  position: absolute;
  left: .2em; top: .62em;
  width: .6em; height: .6em;
  border-radius: 50%;
  background: var(--green);
}
.policy__sign { text-align: right; }

/* 手順（STEP 1〜4） */
.proc {
  display: flex;
  flex-direction: column;
  padding: 32px clamp(16px, 4vw, 40px);
  background: var(--green-pale);
  border-radius: 16px;
}
.proc__list { display: flex; flex-direction: column; }
.proc__note { margin-top: 24px; background: #fff; border-radius: 8px; }
.proc-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; }
.proc-step__rail { display: flex; flex-direction: column; align-items: center; }
.proc-step__rail::after {
  content: "";
  flex: 1;
  width: 3px;
  min-height: 24px;
  background: repeating-linear-gradient(180deg, #9fd3a3 0 8px, transparent 8px 14px);
}
.proc-step--last .proc-step__rail::after { display: none; }
.proc-step__num {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
  font-size: 22px;
  font-weight: 900;
}
.proc-step__num small { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.proc-step__body { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 32px; }
.proc-step--last .proc-step__body { padding-bottom: 0; }
.proc-step__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--green-dark); line-height: 1.5; }
.dot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #d9ecd9;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.8;
}
.dot-list li { position: relative; padding-left: 20px; }
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* ---------- ご利用にあたって ---------- */
.lead { text-align: center; font-size: 17px; line-height: 1.8; }
.lead__note { font-size: 15px; color: #555; }
.prefs {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px;
  background: var(--green-pale);
  border-radius: 8px;
}
.pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px 32px;
}
.pref { display: flex; flex-direction: column; gap: 6px; }
.pref-name {
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--green-rule);
  font-size: 17px;
  color: var(--green-pref);
}
.coop-list { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.65; }
.coop-list a { color: var(--green-link); text-decoration: none; }
.coop-list a:hover { text-decoration: underline; }
.coop-list--cols { display: block; columns: 3 220px; column-gap: 32px; }
.coop-list--cols li { break-inside: avoid; padding: 1px 0 6px; }
.coop-note { display: block; font-size: 12px; color: #666; }
.prefs-note { font-size: 15px; line-height: 1.8; text-align: center; padding-left: 0; text-indent: 0; }
.prefs-note a { color: var(--green-link); text-decoration: underline; }

/* ---------- 申込ボタン ---------- */
.entry { display: flex; flex-direction: column; align-items: center; gap: 18px; scroll-margin-top: 20px; }
.entry__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(600px, 100%);
  padding: 28px 64px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--pink-shadow);
}
.entry__btn:hover { background: var(--pink-hover); color: #fff; }
.entry__arrow {
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* 「›」文字は隠してCSSの矢印を表示 */
}
.entry__arrow::before {
  content: "";
  width: 10px; height: 10px;
  margin-left: -5px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- お問い合わせ ---------- */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 44px 20px;
  background: var(--gray-bg);
  text-align: center;
}
.contact__title { margin: 0; font-size: 28px; font-weight: 700; color: var(--green-dark); }
.contact__name { font-size: 18px; }
.contact__hours { font-size: 16px; line-height: 1.8; }
.contact__btn {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
.contact__btn:hover { background: var(--green-darker); color: #fff; }
.contact__arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* 「›」文字は隠してCSSの矢印を表示 */
}
.contact__arrow::before {
  content: "";
  width: 7px; height: 7px;
  margin-left: -3px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- スマホ：全体の文字サイズを縮小 ---------- */
@media (max-width: 767px) {
  /* 項目ごとの余白を詰める */
  .container { padding: 36px 16px 48px; gap: 36px; }
  .section { gap: 16px; }
  .confirm { gap: 16px; }
  .section-title { font-size: 24px; gap: 10px; }
  .section-title__icon { width: 38px; height: 38px; }
  .flow__badge { font-size: 14px; padding: 8px 40px 8px 14px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
  /* お申込みの流れ：縦積み・横幅いっぱい（下向きの矢羽） */
  .flow { --flow-notch: 14px; }
  .flow__steps { grid-template-columns: 1fr; gap: 4px; }
  .flow-card,
  .flow-card:first-child {
    min-height: 0;
    padding: calc(var(--flow-notch) + 10px) 16px calc(var(--flow-notch) + 6px);
    clip-path: polygon(0 0, 50% var(--flow-notch), 100% 0, 100% calc(100% - var(--flow-notch)), 50% 100%, 0 calc(100% - var(--flow-notch)));
  }
  .flow-card:first-child {
    padding-top: 12px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--flow-notch)), 50% 100%, 0 calc(100% - var(--flow-notch)));
  }
  .flow-card__text { font-size: 14px; }
  .flow-card__text br { display: none; }
  .note-list { font-size: 13px; }
  .acc__head { font-size: 15px; padding: 12px 16px; }
  .acc__sign::before { font-size: 24px; }
  .acc__body--text { padding: 20px 16px; font-size: 13px; }
  .acc__check { font-size: 14px; margin: 8px 0 0; }
  .text-block h3 { font-size: 14px; }
  .note-box { font-size: 13px; }
  /* 手順詳細：左のSTEP列を細くして本文を広く */
  .acc__body:not(.acc__body--text) { padding: 16px 8px; }
  .proc { padding: 20px 10px; }
  .proc-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 8px; }
  .proc-step__num { width: 36px; height: 36px; font-size: 15px; }
  .proc-step__num small { font-size: 7px; letter-spacing: .05em; }
  .proc-step__title { font-size: 15px; }
  .dot-list { font-size: 13px; padding: 12px 12px; }
  .dot-list li::before { top: 8px; }
  .lead { font-size: 14px; }
  /* ご利用にあたって：都道府県ごとのアコーディオン */
  .prefs, .pref-grid { gap: 8px; }
  .prefs { padding: 0; background: none; }
  .pref { gap: 0; }
  .pref-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 16px;
    border-bottom: none;
    background: var(--green-pale);
    border: 1px solid var(--green-line);
    font-size: 15px;
    cursor: pointer;
  }
  .pref-name::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; }
  .pref.is-open .pref-name::after { content: "−"; }
  .pref-name:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  .pref:not(.is-open) .coop-list { display: none; }
  .pref .coop-list { padding: 12px 16px; border: 1px solid var(--green-line); border-top: none; }
  .coop-list { font-size: 13px; }
  .coop-note { font-size: 11px; }
  .prefs-note { font-size: 13px; }
  .entry__btn { font-size: 16px; padding: 22px 52px 22px 20px; letter-spacing: 0; }
  .entry__arrow { right: 16px; width: 28px; height: 28px; }
  .contact__title { font-size: 22px; }
  .contact__name { font-size: 15px; }
  .contact__hours { font-size: 13px; }
  .contact__btn { font-size: 15px; }
}