/* 武田塾 長津田校 無料受験相談LP
   スマホを基本にし、900px以上でPCレイアウトに切り替える */

:root {
  --red: #E60012;
  --red-dark: #C1000F;
  --ink: #1C1C1C;
  --text: #444444;
  --sub: #555555;
  --muted: #6E6E6E;
  --line: #EAEAEA;
  --gray: #F5F5F5;
  --light: #FAFAFA;
  /* 赤ベタは「押せるボタン」だけに使う。ボタン以外の強調は薄い赤の背景＋濃い赤の文字 */
  --red-tint: #FDECEE;
  --red-line: #F4A8AE;
  --zen: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3 { text-wrap: pretty; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--red-dark); text-decoration: none; }
a:hover { color: #8F000B; }

.ic {
  width: 1em; height: 1em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.pc { display: none; }
.center { text-align: center; }
.red { color: var(--red); }
.dark { font-weight: 700; color: var(--ink); }
.marker { background: linear-gradient(transparent 60%, #FFE0E2 60%); }
.marker--red { background: linear-gradient(transparent 64%, var(--red) 64%); }

.wrap { padding: 0 24px; max-width: 560px; margin: 0 auto; }
.sec { padding: 58px 0 62px; }
.sec--gray { background: var(--gray); }
.sec--light { background: var(--light); border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF; }

.h2 { font-family: var(--zen); font-size: 27px; font-weight: 900; line-height: 1.55; color: var(--ink); }
.h2--sm { font-size: 24px; line-height: 1.6; }
.body { font-size: 15px; line-height: 2.05; color: var(--text); }
.body + .body { margin-top: 14px; }

/* ---------- ボタン ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--red); color: #fff;
  font-family: var(--zen); font-weight: 900; letter-spacing: 0.02em;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: #CC0010; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .ic { stroke-width: 2.2; }
.btn--main {
  width: 100%; height: 62px; font-size: 18px;
}
.btn--main .ic { width: 19px; height: 19px; }
.btn--center { margin-left: auto; margin-right: auto; }
.btn--header { display: none; }
.btn[disabled] { background: #B5B5B5; box-shadow: none; cursor: wait; }

.note { margin-top: 13px; text-align: center; font-size: 12.5px; line-height: 1.7; color: #767676; }
.note--dark { color: #909090; margin-top: 15px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 100px; background: var(--ink);
  font-family: var(--zen); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: #fff;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }

/* ---------- ヘッダー（PCのみ） ---------- */
.site-header { display: none; }

/* ---------- 1. ファーストビュー ---------- */
.fv { padding-top: 40px; }
.fv__text { padding: 0 24px; max-width: 560px; margin: 0 auto; }
.fv__title {
  margin-top: 30px; font-family: var(--zen); font-size: 34px; font-weight: 900;
  line-height: 1.5; letter-spacing: -0.015em; color: var(--ink);
}
.fv__lead { margin-top: 24px; font-family: var(--zen); font-size: 17.5px; font-weight: 700; line-height: 1.8; color: var(--ink); }
.fv__sub { margin-top: 14px; font-size: 15px; line-height: 1.9; }
.fv .btn--main { margin-top: 30px; }
.fv__img { margin-top: 34px; width: 100%; height: 211px; object-fit: cover; }

.points { padding: 22px 24px 30px; background: var(--light); }
.points__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 512px; margin: 0 auto; }
.points__list li {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--ink);
}
.points__list .ic { width: 22px; height: 22px; color: var(--red); stroke-width: 1.7; }

/* ---------- 2. 悩み ---------- */
.worries { margin-top: 34px; display: flex; flex-direction: column; gap: 15px; }
.worries li {
  position: relative; align-self: flex-start; width: 86%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px 18px; background: #fff; border-radius: 14px;
  font-size: 14.5px; font-weight: 500; line-height: 1.75; color: #333;
}
.worries li::after {
  content: ""; position: absolute; left: 24px; bottom: -6px; width: 13px; height: 13px;
  background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.worries li:nth-child(even) { align-self: flex-end; }
.worries li:nth-child(even)::after { left: auto; right: 24px; }
.callout {
  margin-top: 40px; padding: 24px 20px; background: #fff;
  border-top: 4px solid var(--red); border-radius: 3px 3px 14px 14px;
}
.callout p { text-align: center; font-family: var(--zen); font-size: 15px; font-weight: 700; line-height: 1.95; color: var(--ink); }
.callout .em { color: var(--red-dark); }

/* ---------- 3. 問題提起・図解 ---------- */
.problem { padding: 62px 0; }
.problem .h2 { line-height: 1.6; }
.problem .body { margin-top: 28px; line-height: 2.1; }

.steps3 { padding: 54px 0 58px; }
.steps3 .h2 { font-size: 26px; line-height: 1.6; }
.ladder { margin-top: 34px; display: flex; flex-direction: column; }
.ladder__item {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: #fff; border: 1.5px solid #E2E2E2; border-radius: 14px;
}
.ladder__num {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: #F0F0F0;
  font-family: var(--zen); font-size: 13px; font-weight: 900; color: #8C8C8C;
}
.ladder__txt { display: flex; flex-direction: column; gap: 4px; }
.ladder__txt b { font-family: var(--zen); font-size: 25px; font-weight: 900; line-height: 1.25; color: #767676; }
.ladder__txt small { font-size: 12.5px; font-weight: 500; color: #767676; }
.ladder__item--2 { border-color: var(--red-line); }
.ladder__item--2 .ladder__num { background: var(--red-tint); color: var(--red-dark); }
.ladder__item--2 .ladder__txt b { color: var(--ink); }
/* ゴール：ボタンと見間違えないよう、赤ベタではなく薄い赤の面＋赤い枠＋赤い文字 */
.ladder__item--3 { padding: 22px; background: var(--red-tint); border: 2px solid var(--red); }
.ladder__item--3 .ladder__num { background: #fff; color: var(--red-dark); }
.ladder__item--3 .ladder__txt b { font-size: 27px; color: var(--red-dark); }
.ladder__item--3 .ladder__txt small { color: #555; }
.ladder__arrow { display: flex; justify-content: center; padding: 11px 0; color: var(--red); }
.ladder__arrow .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.two-col { margin-top: 34px; }
.two-col .body { font-size: 14.5px; line-height: 2.1; }

.band { padding: 46px 24px; background: var(--ink); }
.band p { text-align: center; font-family: var(--zen); font-size: 21px; font-weight: 900; line-height: 1.85; color: #fff; }

/* ---------- 4. 3ステップ ---------- */
.cards3 { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.step { padding: 24px 22px; background: #fff; border-radius: 14px; }
.step__num {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--zen); font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--red);
}
.step__num::after { content: ""; flex: 1; height: 1px; background: #ECECEC; }
.step h3 { margin-top: 15px; font-family: var(--zen); font-size: 18px; font-weight: 900; line-height: 1.6; color: var(--ink); }
.step p { margin-top: 12px; font-size: 14px; line-height: 1.95; color: var(--sub); }
.catch { margin-top: 42px; text-align: center; font-family: var(--zen); font-size: 23px; font-weight: 900; line-height: 1.75; color: var(--ink); }
.catch + .btn { margin-top: 36px; }
.catch--sm { margin-top: 36px; font-size: 16.5px; line-height: 1.9; }
.catch--sm + .btn { margin-top: 34px; }

/* ---------- 5. 学習環境と立地 ---------- */
.env { padding: 62px 0 64px; }
.env .body:first-of-type { margin-top: 26px; }
.feature { margin-top: 32px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.feature img { width: 100%; height: 184px; object-fit: cover; }
.feature__body { padding: 20px 20px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tag {
  padding: 3px 9px; border-radius: 100px; background: var(--red-tint);
  font-family: var(--zen); font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em; color: var(--red-dark);
}
.feature h3 { font-family: var(--zen); font-size: 20px; font-weight: 900; line-height: 1.5; color: var(--ink); }
.feature p { margin-top: 2px; font-size: 14px; line-height: 1.9; }

.env__list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.env-card {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.env-card__media { flex: 0 0 auto; width: 84px; height: 63px; object-fit: cover; border-radius: 8px; }
.env-card__media--icon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #FDF0F1; color: var(--red); font-size: 10px; font-weight: 900;
}
.env-card__media--icon .ic { width: 24px; height: 24px; stroke-width: 1.7; }
.env-card__body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.env-card h3 { font-family: var(--zen); font-size: 15px; font-weight: 900; line-height: 1.5; color: var(--ink); }
.env-card p { font-size: 13.5px; line-height: 1.75; color: var(--sub); }

.access { margin-top: 36px; padding: 26px 22px 28px; background: var(--gray); border-radius: 14px; }
.access h3 { font-family: var(--zen); font-size: 18px; font-weight: 900; line-height: 1.7; color: var(--ink); }
.access__text p, .access__foot { font-size: 13.5px; line-height: 1.95; color: var(--sub); }
.access__text p { margin-top: 15px; }
.access__map { margin-top: 20px; display: flex; align-items: center; gap: 10px; }
.lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lines li {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: #fff; border: 1px solid #E6E6E6; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; color: #333;
}
.lines .ic { width: 14px; height: 14px; color: #9A9A9A; stroke-width: 1.9; }
.lines__join { flex: 0 0 auto; width: 22px; height: 112px; }
.station {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; background: var(--red-tint); border: 1.5px solid var(--red-line); border-radius: 10px;
  font-family: var(--zen); font-size: 13px; font-weight: 900; color: var(--red-dark);
}
.station .ic { width: 20px; height: 20px; }
.access__ways { margin-top: 20px; padding: 18px 16px; background: #fff; border-radius: 10px; display: flex; flex-direction: column; gap: 11px; }
.ride { display: flex; align-items: center; gap: 10px; font-family: var(--zen); font-size: 15.5px; font-weight: 900; color: var(--ink); }
.ride .ic { width: 20px; height: 20px; color: var(--red); }
.access__foot { margin-top: 18px; }

/* ---------- 6. 合格体験談 ---------- */
.voices__lead { margin-top: 24px; font-size: 14px; color: var(--sub); }
.voices { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.voice {
  display: grid; grid-template-columns: 114px 1fr; column-gap: 14px;
  grid-template-areas: "img info" "quote quote" "link link";
  grid-template-rows: auto 1fr auto;
  padding: 16px; background: #fff; border-radius: 14px;
}
.voice__img { grid-area: img; width: 114px; height: 152px; object-fit: cover; border-radius: 8px; }
.voice__info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; }
.voice__name { font-family: var(--zen); font-size: 13px; font-weight: 900; color: var(--ink); }
.voice__name small { margin-left: 3px; font-size: 11px; font-weight: 700; color: #767676; }
.voice__hs { margin-top: 9px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.voice__arrow { margin-top: 4px; width: 11px; height: 11px; color: var(--red); stroke-width: 3; }
.voice__univ { margin-top: 4px; font-family: var(--zen); font-size: 15px; font-weight: 900; line-height: 1.45; color: var(--ink); }
.voice__fac { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sub); }
/* 固定の改行はせず、カードの幅で折り返す。言葉の途中で切れないよう、<wbr> を入れた文節の切れ目でだけ改行する */
.voice__quote { grid-area: quote; margin-top: 14px; font-size: 14px; font-weight: 500; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.voice__link {
  grid-area: link; margin-top: 14px; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid #CFCFCF; border-radius: 8px; color: #3A3A3A; font-size: 13px; font-weight: 700;
}
.voice__link:hover { background: var(--light); color: var(--ink); }
.voice__link .ic { width: 13px; height: 13px; color: #8C8C8C; stroke-width: 2; }

/* ---------- 7. 無料受験相談 ---------- */
.consult { padding: 62px 0 64px; }
.consult__intro .body:first-of-type { margin-top: 26px; }
.flow { margin-top: 34px; }
.flow li { display: flex; gap: 16px; }
.flow__num {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--red-tint); border: 1.5px solid var(--red-line);
  font-family: var(--zen); font-size: 14px; font-weight: 900; color: var(--red-dark);
}
.flow li:not(:last-child) { position: relative; }
.flow li:not(:last-child)::before {
  content: ""; position: absolute; left: 20px; top: 42px; bottom: 0; width: 2px; background: #F3D6D8;
}
.flow li > div { flex: 1; padding-bottom: 26px; }
.flow li:last-child > div { padding-bottom: 0; }
.flow h3 { font-family: var(--zen); font-size: 16.5px; font-weight: 900; line-height: 1.6; color: var(--ink); }
.flow p { margin-top: 9px; font-size: 13.5px; line-height: 1.95; color: var(--sub); }
.parents { margin-top: 34px; padding: 22px 20px; background: var(--gray); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; }
.parents__label { display: flex; align-items: center; gap: 9px; font-family: var(--zen); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; color: var(--red-dark); }
.parents__label .ic { width: 20px; height: 20px; color: var(--red); }
/* 本部指定：スマホでは「…お子さまと一緒でも、」で改行。1行目（全角20字）が枠に収まるよう、狭い画面では文字を少し小さくする */
.parents__head { font-family: var(--zen); font-size: min(16px, calc((100vw - 88px) / 20.5)); font-weight: 900; line-height: 1.8; color: var(--ink); }
.nowrap { white-space: nowrap; }
.parents__body { font-size: 13.5px; line-height: 1.95; color: var(--sub); }

/* ---------- 8. FAQ ---------- */
.faq { margin-top: 32px; background: #fff; border-radius: 14px; overflow: hidden; }
.faq details + details { border-top: 1px solid #EFEFEF; }
.faq summary {
  display: flex; align-items: center; gap: 12px; padding: 17px 18px;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover .faq__q { color: var(--red-dark); }
.q, .a { flex: 0 0 auto; font-family: var(--zen); font-size: 14px; font-weight: 900; }
.q { color: var(--red); }
.a { color: #8C8C8C; }
.faq__q { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.65; color: var(--ink); transition: color .15s ease; }
.faq__chev { width: 18px; height: 18px; color: #8C8C8C; stroke-width: 2.2; transition: transform .2s ease; }
.faq details[open] .faq__chev { transform: rotate(180deg); color: var(--red); }
.faq__a { display: flex; gap: 12px; padding: 16px 18px 20px; background: var(--light); }
.faq__a p { flex: 1; font-size: 13.5px; line-height: 1.95; color: var(--sub); }

/* ---------- 9. 最終CTA ---------- */
.final { padding: 66px 0 70px; background: var(--ink); text-align: center; }
.final h2 { font-family: var(--zen); font-size: 29px; font-weight: 900; line-height: 1.55; letter-spacing: -0.015em; color: #fff; }
.final__em { margin-top: 30px; font-family: var(--zen); font-size: 19px; font-weight: 900; line-height: 1.8; color: #FF8A8F; }
.final__sub { margin-top: 16px; font-size: 14.5px; line-height: 2; color: #C4C4C4; }
.btn--final { margin-top: 34px; height: 64px; }

/* ---------- 10. フォーム ---------- */
.form-sec { padding: 62px 0 66px; scroll-margin-top: 0; }
.form-lead { margin-top: 20px; text-align: center; font-size: 13.5px; line-height: 2; color: var(--sub); }
.form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.form__row { display: flex; flex-direction: column; gap: 18px; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend, .field__label {
  display: flex; align-items: center; gap: 8px; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.field legend { margin-bottom: 8px; }
.req, .opt { padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.req { background: var(--red-tint); color: var(--red-dark); }
.opt { background: #EDEDED; color: #767676; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea {
  width: 100%; height: 52px; padding: 0 14px;
  background: var(--light); border: 1px solid #CFCFCF; border-radius: 8px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 42px;
}
.field select:invalid { color: #767676; }
.field textarea { height: 112px; padding: 14px; line-height: 1.8; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A8A8A; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(230,0,18,0.12);
}
.field.is-error input, .field.is-error select, .field.is-error .agree { border-color: var(--red); background: #FFF6F6; }
.field__err { display: none; font-size: 12px; color: var(--red-dark); }
.field.is-error .field__err { display: block; }
.radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.radios label {
  justify-content: center; gap: 9px; height: 48px;
  background: var(--light); border: 1px solid #CFCFCF; border-radius: 8px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.radios input, .agree input { margin: 0; width: 18px; height: 18px; accent-color: var(--red); }
.radios label:has(input:checked) { border-color: var(--red); background: #FFF6F6; color: var(--ink); }
.field .agree {
  gap: 11px !important; padding: 15px 14px;
  background: var(--light); border: 1px solid #CFCFCF; border-radius: 8px; cursor: pointer;
  font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.7; color: var(--text) !important;
}
.agree a { text-decoration: underline; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { padding: 12px 14px; background: #FFF6F6; border: 1px solid #F4A8AE; border-radius: 8px; font-size: 13px; line-height: 1.7; color: var(--red-dark); }
.form .btn--main { margin-top: 12px; height: 64px; }

.thanks {
  margin-top: 26px; padding: 30px 22px; text-align: center;
  background: #FFF6F6; border: 1px solid #F4A8AE; border-radius: 14px; outline: none;
}
.thanks__title { font-family: var(--zen); font-size: 20px; font-weight: 900; color: var(--ink); }
.thanks p + p { margin-top: 12px; font-size: 14px; line-height: 1.9; }
.thanks .thanks__small { font-size: 12.5px; color: var(--muted); }

.telbox {
  margin-top: 30px; padding: 22px 20px; background: var(--gray); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
}
.telbox__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #767676; }
.telbox__num { display: flex; align-items: center; gap: 9px; font-family: var(--zen); font-size: 21px; font-weight: 900; letter-spacing: 0.02em; color: var(--ink); }
.telbox__num .ic { width: 20px; height: 20px; }
.telbox__hours { font-size: 12px; line-height: 1.8; color: var(--muted); }

/* ---------- 11. フッター ---------- */
.footer { padding: 46px 0 calc(42px + 80px); background: var(--ink); }
.footer__name { font-family: var(--zen); font-size: 17px; font-weight: 900; letter-spacing: 0.02em; color: #fff; }
.footer__info { margin-top: 24px; display: flex; flex-direction: column; gap: 15px; }
.footer__info li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.85; color: #BDBDBD; }
.footer__info .ic { margin-top: 3px; width: 17px; height: 17px; color: #7E7E7E; }
.footer__bottom { margin-top: 30px; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
.footer__link {
  height: 48px; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #454545; border-radius: 8px; color: #DDD; font-size: 13px; font-weight: 700;
}
.footer__link:hover { color: #fff; border-color: #777; }
.footer__link .ic { width: 13px; height: 13px; color: #9A9A9A; stroke-width: 2; }
.footer__copy { text-align: center; font-size: 11px; letter-spacing: 0.04em; color: #9A9A9A; }

/* ---------- スマホ：追従CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97); border-top: 1px solid #E4E4E4; box-shadow: 0 -6px 22px rgba(0,0,0,0.09);
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta__tel {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; border: 1.5px solid #DCDCDC; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink);
}
.sticky-cta__tel .ic { width: 20px; height: 20px; }
.sticky-cta__tel span { font-size: 9.5px; font-weight: 700; color: var(--muted); }
.sticky-cta__btn {
  flex: 1; height: 54px; border-radius: 10px; background: var(--red);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--zen); font-size: 16.5px; font-weight: 900; letter-spacing: 0.02em; color: #fff;
}
.sticky-cta__btn:hover { color: #fff; }
.sticky-cta__btn .ic { width: 17px; height: 17px; stroke-width: 2.2; }

/* タブレット縦：写真が細長くなりすぎないようにする */
@media (min-width: 600px) and (max-width: 899px) {
  .fv__img { height: 340px; }
}

/* 小さい画面では追従CTAの文字を詰める */
@media (max-width: 359px) {
  .sticky-cta__btn { font-size: 14.5px; }
  .fv__title { font-size: 30px; }
}

/* =====================================================
   PC（900px以上）
   ===================================================== */
@media (min-width: 900px) {
  .sp { display: none; }
  .pc { display: inline; }

  .wrap { max-width: 1128px; padding: 0 24px; }
  .wrap--narrow { max-width: 888px; }
  .wrap--form { max-width: 808px; }
  .sec { padding: 100px 0 104px; }
  .h2 { font-size: 40px; line-height: 1.5; }
  .h2--lg { font-size: 44px; line-height: 1.5; }
  .h2--sm { font-size: 38px; line-height: 1.5; }
  .body { font-size: 17px; }

  .btn--main { width: 460px; height: 70px; font-size: 20px; border-radius: 12px; }
  .btn--main .ic { width: 20px; height: 20px; }
  .note { font-size: 13.5px; }

  /* ヘッダー */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    height: 84px; padding: 0 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: #fff;
  }
  .site-header .badge { padding: 8px 18px; font-size: 15px; }
  .site-header .badge::before { width: 6px; height: 6px; }
  .site-header__right { display: flex; align-items: center; gap: 28px; }
  .site-header__tel { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .site-header__tel .tel-num { display: flex; align-items: center; gap: 8px; font-family: var(--zen); font-size: 22px; font-weight: 900; letter-spacing: 0.02em; color: var(--ink); }
  .site-header__tel .tel-num .ic { width: 18px; height: 18px; }
  .site-header__tel span { font-size: 11.5px; color: var(--muted); }
  .btn--header { display: flex; height: 54px; padding: 0 28px; font-size: 16px; }
  .btn--header .ic { width: 17px; height: 17px; }
  [id] { scroll-margin-top: 84px; }

  /* FV */
  .fv { padding: 64px 24px 72px; }
  .fv__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
  .fv__text { padding: 0; max-width: none; margin: 0; }
  .badge--sp { display: none; }
  .fv__title { margin-top: 0; font-size: clamp(44px, 4.2vw, 56px); line-height: 1.42; }
  .fv__lead { margin-top: 32px; font-size: 23px; line-height: 1.7; }
  .fv__sub { font-size: 17px; }
  .fv .btn--main { margin-top: 36px; width: 440px; max-width: 100%; }
  .fv .note { width: 440px; max-width: 100%; }
  .fv__img { margin-top: 0; height: 470px; border-radius: 20px; }

  .points { padding: 28px 24px; border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; }
  .points__list { max-width: 1200px; gap: 20px; }
  .points__list li { flex-direction: row; justify-content: center; gap: 14px; padding: 20px; border-radius: 12px; font-family: var(--zen); font-size: 18px; font-weight: 900; }
  .points__list .ic { width: 28px; height: 28px; }

  /* 悩み */
  .worries { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 34px; }
  .worries li, .worries li:nth-child(even) {
    align-self: stretch; width: auto; min-height: 108px;
    padding: 22px 26px; border-radius: 16px; font-size: 16.5px;
  }
  .worries li::after, .worries li:nth-child(even)::after { left: 30px; right: auto; bottom: -7px; width: 15px; height: 15px; }
  .callout { width: 780px; max-width: 100%; margin: 60px auto 0; padding: 32px 40px; border-top-width: 5px; border-radius: 4px 4px 16px 16px; }
  .callout p { font-size: 21px; line-height: 1.9; }

  /* 問題提起・図解 */
  .problem { padding: 100px 0; }
  .problem__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
  .problem .body { margin-top: 0; font-size: 18px; }
  .steps3 { padding: 96px 0 100px; }
  .steps3 .h2 { font-size: 40px; line-height: 1.5; }
  .ladder { margin-top: 52px; flex-direction: row; align-items: center; gap: 18px; }
  .ladder__item, .ladder__item--3 {
    flex: 1; height: 168px; padding: 0 30px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; border-radius: 16px;
  }
  .ladder__num { width: 42px; height: 42px; font-size: 14px; }
  .ladder__txt { gap: 10px; }
  .ladder__txt b { font-size: 32px; line-height: 1.2; }
  .ladder__item--3 .ladder__txt b { font-size: 34px; }
  .ladder__txt small { font-size: 14px; }
  .ladder__arrow { padding: 0; }
  .ladder__arrow .ic { width: 30px; height: 30px; transform: rotate(-90deg); }
  /* 2つの文はそれぞれ1行にして上下に並べる */
  .two-col { margin-top: 48px; text-align: center; }
  .two-col .body { font-size: 17px; line-height: 1.9; }
  .two-col .body + .body { margin-top: 8px; }
  .band { padding: 64px 24px; }
  .band p { font-size: 32px; line-height: 1.8; }

  /* 3ステップ */
  .cards3 { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .step { padding: 32px 30px 34px; border-radius: 16px; }
  .step__num { gap: 14px; font-size: 38px; }
  .step h3 { margin-top: 18px; font-size: 21px; }
  .step p { margin-top: 14px; font-size: 15px; }
  .catch { margin-top: 64px; font-size: 34px; line-height: 1.7; }
  .catch + .btn { margin-top: 44px; }
  .catch--sm { font-size: 24px; line-height: 1.85; }
  .catch--sm + .btn { margin-top: 40px; }

  /* 学習環境 */
  .env { padding: 104px 0 108px; }
  .env__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
  .env .body:first-of-type { margin-top: 30px; }
  .feature { margin-top: 0; border-radius: 16px; }
  .feature img { height: 292px; }
  .feature__body { padding: 22px 26px 26px; }
  .tag { padding: 4px 11px; font-size: 11.5px; }
  .feature h3 { font-size: 24px; }
  .feature p { margin-top: 0; font-size: 15px; }
  .env__list { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .env-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 14px; overflow: hidden; }
  .env-card__media { width: 100%; height: 190px; border-radius: 0; }
  .env-card__media--icon { gap: 10px; font-family: var(--zen); font-size: 17px; color: var(--red-dark); }
  .env-card__media--icon .ic { width: 48px; height: 48px; stroke-width: 1.5; color: var(--red); }
  .env-card__body { padding: 20px 22px 24px; gap: 7px; }
  .env-card h3 { font-size: 19px; }
  .env-card p { font-size: 14.5px; line-height: 1.8; }

  .access {
    margin-top: 48px; padding: 44px 52px; border-radius: 18px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: center;
    grid-template-areas: "text map" "ways map" "foot map";
  }
  .access__text { grid-area: text; }
  .access__map { grid-area: map; margin-top: 0; gap: 14px; }
  .access__ways { grid-area: ways; margin-top: 22px; padding: 0; background: none; flex-direction: row; gap: 28px; }
  .access__foot { grid-area: foot; margin-top: 20px; }
  .access h3 { font-size: 26px; line-height: 1.6; }
  .access__text p, .access__foot { font-size: 15px; }
  .access__text p { margin-top: 16px; }
  .ride { font-size: 17px; }
  .ride .ic { width: 22px; height: 22px; }
  .lines { gap: 12px; }
  .lines li { gap: 10px; padding: 13px 16px; border-radius: 10px; font-size: 14px; }
  .lines .ic { width: 16px; height: 16px; color: #8C8C8C; }
  .lines__join { width: 30px; height: 150px; }
  .station { gap: 8px; padding: 24px 20px; border-radius: 12px; font-size: 16px; }
  .station .ic { width: 26px; height: 26px; }

  /* 合格体験談 */
  .voices__lead { margin-top: 26px; font-size: 16px; }
  .voices { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .voice {
    grid-template-columns: 120px 1fr; column-gap: 16px;
    grid-template-areas: "img info" "quote quote" "link link";
    padding: 22px; border-radius: 16px;
  }
  .voice__img { width: 120px; height: 160px; border-radius: 10px; }
  .voice__name { font-size: 14px; }
  .voice__name small { font-size: 11.5px; }
  .voice__hs { margin-top: 10px; font-size: 13px; }
  .voice__arrow { margin-top: 5px; width: 12px; height: 12px; }
  .voice__univ { margin-top: 5px; font-size: 17px; }
  .voice__fac { font-size: 13.5px; }
  .voice__quote { margin-top: 18px; font-size: 15px; }
  .voice__link { margin-top: 18px; height: 46px; font-size: 13.5px; }

  /* 無料受験相談 */
  .consult { padding: 104px 0 108px; }
  .consult__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start;
    grid-template-areas: "intro flow" "parents parents";
  }
  .consult__intro { grid-area: intro; }
  .consult__intro .h2 { font-size: 36px; line-height: 1.55; }
  .consult__intro .body:first-of-type { margin-top: 28px; }
  .flow { grid-area: flow; margin-top: 0; padding-top: 8px; }
  .flow li { gap: 20px; }
  .flow__num { width: 50px; height: 50px; font-size: 16px; }
  .flow li:not(:last-child)::before { left: 24px; top: 50px; }
  .flow li > div { padding-top: 8px; padding-bottom: 30px; }
  .flow h3 { font-size: 20px; }
  .flow p { margin-top: 10px; font-size: 15px; }
  /* 保護者向けは左右2列の下に、横幅いっぱいで置く */
  .parents { grid-area: parents; margin-top: 48px; padding: 30px 36px; }
  .parents__label { font-size: 13px; }
  .parents__label .ic { width: 22px; height: 22px; }
  .parents__head { font-size: 19px; line-height: 1.75; }
  .parents__body { font-size: 14.5px; }

  /* FAQ */
  .faq { margin-top: 48px; border-radius: 16px; }
  .faq summary { gap: 16px; padding: 22px 28px; }
  .q, .a { font-size: 17px; }
  .faq__q { font-size: 16px; }
  .faq__chev { width: 20px; height: 20px; }
  .faq__a { gap: 16px; padding: 20px 28px 24px; }
  .faq__a p { font-size: 15px; }

  /* 最終CTA */
  .final { padding: 108px 0 112px; }
  .final h2 { font-size: 48px; line-height: 1.5; }
  .final__em { margin-top: 32px; font-size: 26px; }
  .final__sub { margin-top: 14px; font-size: 17px; }
  .btn--final { margin-top: 44px; width: 480px; height: 74px; font-size: 21px; }
  .note--dark { margin-top: 16px; color: #A0A0A0; }

  /* フォーム */
  .form-sec { padding: 100px 0 108px; }
  .form-sec .h2 { font-size: 36px; }
  .form-lead { margin-top: 22px; font-size: 15px; }
  .form { margin-top: 32px; gap: 24px; }
  .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .field { gap: 9px; }
  .field label, .field legend, .field__label { font-size: 14px; }
  .field legend { margin-bottom: 10px; }
  .req, .opt { padding: 2px 8px; font-size: 11px; }
  .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select { height: 54px; padding-left: 16px; font-size: 15px; }
  .field textarea { height: 128px; padding: 14px 16px; font-size: 15px; }
  .radios { gap: 12px; }
  .radios label { height: 50px; font-size: 14.5px; }
  .field .agree { padding: 16px 18px; font-size: 14.5px !important; }
  .form .btn--main { margin-top: 10px; width: 440px; }
  .thanks { margin-top: 32px; padding: 40px 32px; }
  .thanks__title { font-size: 24px; }
  .thanks p + p { font-size: 15px; }
  .telbox { margin-top: 40px; padding: 26px 28px; border-radius: 14px; flex-direction: row; justify-content: center; gap: 28px; text-align: left; }
  .telbox__label { font-size: 13px; color: var(--muted); }
  .telbox__num { gap: 10px; font-size: 26px; }
  .telbox__num .ic { width: 22px; height: 22px; }
  .telbox__hours { font-size: 12.5px; }

  /* フッター */
  .footer { padding: 64px 0 48px; }
  .footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .footer__name { font-size: 22px; grid-column: 1; }
  .footer__info { grid-column: 1 / -1; margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto auto; column-gap: 56px; row-gap: 14px; }
  .footer__info li { font-size: 14px; gap: 12px; }
  .footer__info .ic { width: 18px; height: 18px; color: #8C8C8C; }
  .footer__bottom { grid-column: 1 / -1; margin-top: 44px; padding-top: 28px; border-top: 1px solid #333; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .footer__link { font-size: 13.5px; }
  .footer__copy { font-size: 11.5px; }

  .sticky-cta { display: none; }
}