@charset "UTF-8";
/* =========================================================
   クルマヤイチバン 車買取LP
   PC: デザインデータ（幅1440px）準拠 / SP: 767px以下
   ========================================================= */

:root {
  --red: #D7000F;
  --yellow: #FFD200;
  --blue: #0F5BB5;
  --green: #0B7F3A;
  --cyan: #0091DA;
  --ink: #231815;
  --text: #353535;
  --pink: #F9D9DB;
  --cta: #F29600;       /* 申し込みボタン色（濃色文字 7.6:1） */
  --cta-hover: #E08600;
  --cta-text: #231815;
  --footer: #1A1A1A;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-display: "Dela Gothic One", "Noto Sans JP", sans-serif;
  --container: 1200px;
  --header-h: 91px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--ink); background: #fff; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: calc(var(--container) + 40px); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 900px; }

/* ---------- section ---------- */
.sec { padding: 96px 0 100px; }
.sec--plus { padding: 108px 0 72px; }
.sec--blue { background: var(--blue); padding: 94px 0 94px; }
.sec--yellow { background: var(--yellow); padding: 82px 0 88px; }
.sec--green { background: var(--green); padding: 80px 0 98px; }
.sec--red { background: var(--red); padding: 80px 0 88px; }

.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head__en { font-family: var(--font-display); font-size: 21px; line-height: 1.2; letter-spacing: .04em; color: var(--red); }
.sec-head__title { margin-top: 10px; font-feature-settings: normal; font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.25; color: var(--ink); }
.sec-head__lead { margin-top: 44px; font-weight: 700; font-size: 16px; color: #fff; }
.sec-head--white .sec-head__title { color: #fff; }
.sec-head--white .sec-head__en { color: var(--yellow); }
.sec--red .sec-head__lead { margin-top: 24px; }
.sec-head--sub { margin-top: 112px; }

/* =========================================================
   Header
   ========================================================= */
.header { position: relative; z-index: 10; height: var(--header-h); background: #fff; }
.header__inner { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px 0 186px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header__mascot { position: absolute; left: 8px; top: 4px; width: 164px; height: auto; pointer-events: none; }
.header__brand { display: flex; align-items: center; gap: 28px; }
.header__logo img { width: 357px; }
.header__tag { font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.header__actions { display: flex; align-items: center; gap: 16px; }
.header__tel img { width: 266px; }
.header__btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 208px; height: 62px; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); background: var(--cta); color: var(--cta-text); font-weight: 700; text-decoration: none; line-height: 1.3; transition: background .2s; }
.header__btn small { font-size: 11.5px; }
.header__btn span { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.header__btn:hover { background: var(--cta-hover); }
.header__tel-sp { display: none; }

/* =========================================================
   ① FV（PC：デザイン座標をそのまま縮尺 --u で配置）
   ========================================================= */
.fv { --u: min(1px, calc(100vw / 1440)); position: relative; overflow: hidden; background: var(--yellow); }
.fv::before { content: ""; position: absolute; inset: 0; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 22.6%, 0 77.4%); }
.fv__stage { position: relative; max-width: 1440px; height: calc(var(--u) * 871); margin: 0 auto; }
.fv__title, .fv__note, .fv__points, .fv__graph, .fv__price, .fv__mascot-r, .fv__cta { position: absolute; }
.fv__title { left: calc(var(--u) * 130); top: calc(var(--u) * 74); width: calc(var(--u) * 430); }
.fv__title img { display: block; width: 100%; }
.fv__note { left: calc(var(--u) * 137); top: calc(var(--u) * 413); width: calc(var(--u) * 457); min-height: calc(var(--u) * 74); padding: calc(var(--u) * 12) calc(var(--u) * 18); background: #fff; border-radius: calc(var(--u) * 10); color: var(--red); font-weight: 700; font-size: calc(var(--u) * 13.5); line-height: 1.7; }
.fv__em { font-weight: 900; font-size: 1.45em; line-height: 1; }
.fv__em--sm { font-size: 1.25em; }
.fv__points { left: calc(var(--u) * 135); top: calc(var(--u) * 523); display: flex; gap: calc(var(--u) * 13); }
.fv__points li { width: calc(var(--u) * 162); height: calc(var(--u) * 162); border-radius: 50%; background: var(--blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; line-height: 1.3; }
.fv__points span { font-size: calc(var(--u) * 17); }
.fv__points strong { margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 31); font-weight: 700; }
.fv__graph { left: calc(var(--u) * 615); top: calc(var(--u) * 19); width: calc(var(--u) * 701); aspect-ratio: 701 / 352; }
.fv__g { position: absolute; bottom: 0; height: auto; }
.fv__g--1 { left: 0; width: 19.34%; }
.fv__g--2 { left: 19.34%; width: 14.66%; }
.fv__g--3 { left: 34%; width: 21.98%; }
.fv__g--4 { left: 55.98%; width: 21.98%; }
.fv__g--5 { left: 77.96%; width: 22.04%; }
.fv__sit { position: absolute; left: -2.14%; top: -1.42%; width: 20.68%; z-index: 2; }
.fv__price-wrap { display: contents; }
.fv__price { left: calc(var(--u) * 700); top: calc(var(--u) * 389); width: calc(var(--u) * 540); }
.fv__mascot-r { left: calc(var(--u) * 1210); top: calc(var(--u) * 434); width: calc(var(--u) * 210); }
.fv__cta { left: 0; right: 0; top: calc(var(--u) * 743); padding: 0; gap: calc(var(--u) * 47.6); }
.fv__cta .btn-cta, .mid-cta .btn-cta { width: calc(var(--u) * 479); height: calc(var(--u) * 91); border-radius: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 7) 0 var(--ink); }
.fv__cta .btn-cta--tel, .mid-cta .btn-cta--tel { padding-left: calc(var(--u) * 106); }
.fv__cta .btn-cta--form, .mid-cta .btn-cta--form { padding-left: calc(var(--u) * 88); }
.fv__cta .btn-cta small, .mid-cta .btn-cta small { font-size: calc(var(--u) * 14); }
.fv__cta .btn-cta b, .mid-cta .btn-cta b { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 37); }
.fv__cta .btn-cta--tel b, .mid-cta .btn-cta--tel b { font-size: calc(var(--u) * 40); }
.btn-cta__mascot { position: absolute; z-index: 2; pointer-events: none; }
.btn-cta--tel .btn-cta__mascot { left: calc(var(--u) * -6); top: calc(var(--u) * -39); width: calc(var(--u) * 110); }
.btn-cta--form .btn-cta__mascot { left: calc(var(--u) * 2); top: calc(var(--u) * -34); width: calc(var(--u) * 112); }

/* CTA buttons */
.cta-row { position: relative; display: flex; justify-content: center; gap: 44px; padding: 0 20px; }
.btn-cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 442px; height: 96px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--ink); text-decoration: none; line-height: 1.15; transition: transform .15s, box-shadow .15s; }
.btn-cta:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.btn-cta small { font-size: 14px; font-weight: 700; }
.btn-cta b { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 38px; letter-spacing: .01em; white-space: nowrap; }
.btn-cta--tel { background: #fff; color: var(--ink); }
.btn-cta--tel b { color: var(--red); font-size: 40px; }
.btn-cta--form { background: var(--cta); color: var(--cta-text); }
.btn-cta--form:hover { background: var(--cta-hover); }
.btn-cta--yellow { background: var(--cta); color: var(--cta-text); }
.btn-cta--yellow:hover { background: var(--cta-hover); }
.btn-cta--shine { position: relative; }

/* =========================================================
   ② こだわりプラス
   ========================================================= */
.sec-head__title--img { line-height: 1; }
.sec--plus .sec-head { margin-bottom: 25px; }
.sec--blue .sec-head { margin-bottom: 26px; }
.sec-head__title--img img { width: 560px; }
.plus-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.plus-card { border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #fff; text-align: center; }
.plus-card__name { height: 56px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; letter-spacing: .04em; color: #fff; border-bottom: 3px solid var(--ink); }
.plus-card--red .plus-card__name { background: var(--red); }
.plus-card--blue .plus-card__name { background: var(--blue); }
.plus-card--green .plus-card__name { background: var(--green); }
.plus-card--cyan .plus-card__name { background: var(--cyan); }
.plus-card__value { margin-top: 34px; font-family: var(--font-display); font-size: 88px; line-height: 1; color: var(--red); }
.plus-card__num { display: inline-block; min-width: .62em; }
.plus-card__unit { font-size: 52px; margin-left: 4px; }
.plus-card__cond { margin: 22px 8px 28px; font-weight: 700; font-size: 19px; color: var(--ink); }
.plus-note { margin-top: 4px; line-height: 1.5; text-align: right; font-size: 12px; font-weight: 500; }
.plus-more { margin-top: 8px; background: var(--yellow); border-radius: 16px; padding: 30px 40px 30px 42px; display: flex; align-items: center; gap: 60px; }
.plus-more__title { flex: 0 0 auto; font-family: var(--font-display); font-size: 31px; line-height: 1.3; color: var(--red); }
.plus-more__list { display: flex; flex-wrap: wrap; gap: 12px; }
.plus-more__list li { background: #fff; border-radius: 8px; padding: 5px 18px; font-weight: 700; font-size: 17px; }
.plus-more__list .plus-more__etc { background: none; padding-left: 6px; padding-right: 0; align-self: center; }

/* =========================================================
   ③ 高く買える理由
   ========================================================= */
.compare { display: grid; grid-template-columns: 305px 304px minmax(0, 1fr); align-items: end; gap: 26px 22px; background: #fff; border-radius: 16px; padding: 16px 20px 20px 26px; }
.compare__col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 10px; }
.compare__col--a, .compare__col--b { border: 2px dashed var(--blue); color: var(--text); }
.compare__col--a { height: 187px; }
.compare__col--b { height: 207px; }
.compare__name { font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--ink); }
.compare__type { margin-top: 12px; font-weight: 700; font-size: 14px; }
.compare__result { margin-top: 10px; font-weight: 700; font-size: 17px; line-height: 1.55; }
.compare__col--ours { background: var(--yellow); padding: 24px 20px 26px; }
.compare__logo img { width: 404px; }
.compare__head { margin-top: 10px; }
.compare__head img { width: 345px; }
.compare__points { margin-top: 12px; text-align: left; font-weight: 700; font-size: 15px; line-height: 1.95; }
.compare__points li::before { content: "■"; }
.reasons { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.reason { background: #fff; border-radius: 16px; padding: 20px 20px 30px; text-align: center; }
.reason__img { position: relative; margin-bottom: 64px; }
.reason__img img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: 50% 15%; border-radius: 8px; }
.reason__num { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 38px; color: var(--ink); }
.reason__title { font-weight: 700; font-size: 25px; line-height: 1.4; }
.reason__text { margin-top: 18px; font-weight: 700; font-size: 17px; line-height: 1.65; color: var(--text); }

/* 中間CTA */
.mid-cta { --u: min(1px, calc(100vw / 1440)); background: var(--red); padding: 50px 0 46px; text-align: center; }
.mid-cta__title { font-family: var(--font-display); font-size: 44px; line-height: 1.2; color: #fff; margin-bottom: 56px; }
.mid-cta .cta-row { gap: calc(var(--u) * 47.6); }

/* =========================================================
   ④ 実績・声
   ========================================================= */
.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.examples img { display: block; width: 100%; }

.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.voice { background: #fff; border-radius: 16px; padding: 20px 22px 26px; }
.voice__img img { display: block; width: 100%; border-radius: 8px; }
.voice__date { margin-top: 28px; font-weight: 700; font-size: 14px; color: var(--text); }
.voice__text { margin-top: 12px; font-weight: 700; font-size: 16.5px; line-height: 1.75; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.voice__meta { margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--text); }
.voice__meta span { margin: 0 .8em; }

/* =========================================================
   ⑤ 流れ
   ========================================================= */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flow__item { border: 3px solid var(--ink); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 5px 0 var(--ink); }
.flow__num { display: block; height: 76px; padding: 4px 26px 0; background: var(--yellow); border-bottom: 3px solid var(--ink); font-family: var(--font-display); font-size: 48px; line-height: 70px; color: var(--ink); }
.flow__body { padding: 20px 26px 30px; }
.flow__body h3 { font-weight: 700; font-size: 24px; line-height: 1.4; }
.flow__body p { margin-top: 12px; font-weight: 700; font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* =========================================================
   ⑥ FAQ
   ========================================================= */
.faq { display: flex; flex-direction: column; gap: 26px; }
.faq__item { border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 0 var(--ink); background: #fff; }
.faq__item dt, .faq__item dd { display: flex; align-items: flex-start; gap: 16px; padding: 18px 26px; }
.faq__item dt { background: var(--yellow); border-bottom: 3px solid var(--ink); font-weight: 700; font-size: 17px; line-height: 1.6; align-items: center; min-height: 72px; }
.faq__item dd { font-weight: 700; font-size: 17px; line-height: 1.6; padding-top: 22px; padding-bottom: 24px; }
.faq__mark { flex: 0 0 auto; font-family: var(--font-display); font-size: 27px; line-height: 1; }
.faq__item dt .faq__mark { color: var(--red); }
.faq__item dd .faq__mark { color: var(--blue); margin-top: 4px; }

/* =========================================================
   ⑦ フォーム
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.steps li { height: 62px; border-radius: 999px; background: var(--pink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: var(--ink); }
.steps li.is-current { background: var(--yellow); }

.form { background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 30px 36px 36px; }
.form__panel[hidden] { display: none; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 58px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 18px; line-height: 1.3; padding-left: 6px; display: flex; align-items: center; }
.req { display: inline-block; margin-left: 8px; background: var(--red); color: #fff; font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 999px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; height: 62px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 0 24px; font-size: 16px; font-weight: 500; }
.field textarea { height: 186px; padding: 14px 24px; resize: vertical; line-height: 1.6; }
.field ::placeholder { color: var(--ink); opacity: 1; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 56px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-top: 13px solid var(--ink); border-bottom: 0; pointer-events: none; }
.field [aria-invalid="true"] { border-color: var(--red); background: #FFF4F4; }

.agree { margin: 34px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; min-height: 44px; }
.agree input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; margin: 0; display: grid; place-content: center; cursor: pointer; }
.agree input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .15s; }
.agree input:checked::before { transform: scale(1); }

.form__btn { display: block; width: 100%; height: 66px; margin-top: 26px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cta); color: var(--cta-text); font-weight: 700; font-size: 23px; box-shadow: 0 6px 0 var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.form__btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); background: var(--cta-hover); }
.form__btn--back:hover { background: #D6D6D6; }
.form__actions { display: flex; gap: 18px; margin-top: 54px; }
.form__actions .form__btn { margin-top: 0; }
.form__btn--back { flex: 0 0 180px; background: #E8E8E8; color: var(--ink); }
.form__note { margin-top: 20px; text-align: center; font-weight: 700; font-size: 14px; }
.form__error { margin-top: 18px; text-align: center; font-weight: 700; font-size: 14px; color: var(--red); }
.form__done { text-align: center; padding: 40px 0; outline: none; }
.form__done-title { font-family: var(--font-display); font-size: 30px; color: var(--red); margin-bottom: 14px; }
.form__done p:not(.form__done-title) { font-weight: 700; }

.form-tel { display: flex; flex-direction: column; align-items: center; margin-top: 38px; color: #fff; text-decoration: none; line-height: 1.1; }
.form-tel small { font-weight: 700; font-size: 15px; }
.form-tel b { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 52px; letter-spacing: .01em; }

/* =========================================================
   ⑧ 店舗・会社情報
   ========================================================= */
#shop { padding: 75px 0 140px; }
.shops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.shop img { display: block; width: 100%; aspect-ratio: 282 / 230; object-fit: cover; border-radius: 16px; }
.shop h3 { margin-top: 16px; font-weight: 700; font-size: 18px; line-height: 1.4; }
.shop dl { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6em; font-size: 13.5px; line-height: 1.75; }
.shop dd:first-of-type { grid-column: 1 / -1; }
.shop dt { white-space: nowrap; }
.shop a { text-decoration: none; }

.company { margin-top: 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.company__table { border-top: 3px solid var(--ink); align-self: start; }
.company__table > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); border-bottom: 1px solid var(--ink); padding: 18px 20px; font-size: 14px; line-height: 1.75; }
.company__table dt { font-weight: 700; }
.company__table a { text-decoration: none; }
.company__gap { display: inline-block; width: 2.4em; }
.company__list li::before { content: "・"; }

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--footer); color: #fff; padding: 50px 20px 34px; }
.footer__inner { max-width: 1260px; margin: 0 auto; padding-left: 60px; display: flex; align-items: center; gap: 50px; }
.footer__tag { font-size: 12px; font-weight: 700; }
.footer__name { margin-top: 2px; font-weight: 700; font-size: 26px; line-height: 1.4; }
.footer__tel { margin-top: 6px; font-weight: 700; font-size: 15px; }
.footer__tel span { display: inline-block; width: 1.4em; }
.footer__nav ul { display: grid; grid-template-columns: repeat(5, auto); gap: 14px 20px; }
.footer__nav a { position: relative; display: inline-block; padding-left: 20px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.footer__nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--red); }
.footer__nav a::after { content: ""; position: absolute; left: 5px; top: 50%; margin-top: -3.5px; border: 3.5px solid transparent; border-left: 5px solid #fff; border-right: 0; }
.footer__nav a:hover { text-decoration: underline; }
.footer__copy { margin-top: 64px; text-align: center; font-size: 12px; font-weight: 700; }

.fixed-cta { display: none; }

/* =========================================================
   Tablet（〜1279px）
   ========================================================= */
@media (max-width: 1279px) {
  .footer__inner { flex-direction: column; align-items: flex-start; padding-left: 0; }
  .footer__nav ul { grid-template-columns: repeat(3, auto); }
}

@media (max-width: 1023px) {
  .btn-cta { width: 100%; max-width: 442px; }
  .cta-row { gap: 20px; }
  .plus-list, .flow, .shops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .examples, .voices, .reasons { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .plus-more { flex-direction: column; align-items: flex-start; gap: 16px; }
  .company { grid-template-columns: 1fr; }
}

/* =========================================================
   SP（〜767px）
   ========================================================= */
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  body { font-size: 15px; padding-bottom: 76px; }


  .sec { padding: 56px 0 60px; }
  .sec--plus { padding-top: 56px; padding-bottom: 48px; }
  .sec-head { margin-bottom: 26px; }
  .sec-head__en { font-size: 15px; }
  .sec-head__title { font-size: 28px; margin-top: 6px; }
  .sec-head__lead { margin-top: 18px; font-size: 14px; text-align: left; }
  .sec-head--sub { margin-top: 64px; }

  .btn-cta { height: 76px; border-radius: 12px; }
  .btn-cta small { font-size: 12px; }
  .btn-cta b { font-size: 26px; }
  .btn-cta--tel b { font-size: 29px; }

  .plus-list { gap: 12px; }
  .plus-more { margin-top: 20px; padding: 20px 16px; border-radius: 12px; }
  .plus-more__title { font-size: 21px; }
  .plus-more__title br { display: none; }
  .plus-more__list { gap: 8px; }
  .plus-more__list li { font-size: 13px; padding: 3px 10px; }
  .plus-more__list .plus-more__etc { padding-left: 4px; padding-right: 0; }

  .reasons { gap: 16px; }
  .reason { padding: 14px 14px 22px; }
  .reason__img { margin-bottom: 48px; }
  .reason__img img { height: 160px; }
  .reason__num { width: 72px; height: 72px; bottom: -36px; font-size: 28px; }
  .reason__title { font-size: 20px; }
  .reason__text { margin-top: 10px; font-size: 14px; }

  .mid-cta { padding: 36px 20px 40px; }
  .mid-cta__title { font-size: 26px; margin-bottom: 44px; }
  .mid-cta .cta-row { flex-direction: column; align-items: center; gap: 30px; padding: 0; }

  /* 実績・声 */
  .examples { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; max-width: none; margin: 0 -20px; padding: 0 20px 8px; }
  .examples li { flex: 0 0 78%; scroll-snap-align: center; }
  .voices { gap: 16px; }
  .voice { padding: 14px 14px 20px; }
  .voice__date { margin-top: 14px; font-size: 13px; }
  .voice__text { margin-top: 6px; font-size: 14.5px; }
  .voice__meta { margin-top: 10px; font-size: 13px; }

  /* 流れ */
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow__item { display: flex; align-items: stretch; }
  .flow__num { flex: 0 0 66px; height: auto; padding: 0; display: flex; align-items: center; justify-content: center; border-bottom: 0; border-right: 3px solid var(--ink); font-size: 26px; line-height: 1; }
  .flow__body { padding: 12px 16px 14px; }
  .flow__body h3 { font-size: 17px; }
  .flow__body p { margin-top: 4px; font-size: 12.5px; }

  /* FAQ */
  .faq { gap: 16px; }
  .faq__item { border-radius: 12px; }
  .faq__item dt, .faq__item dd { gap: 10px; padding: 12px 14px; font-size: 14.5px; }
  .faq__item dt { min-height: 0; }
  .faq__mark { font-size: 21px; }

  /* フォーム */
  .steps { gap: 6px; margin-bottom: 18px; }
  .steps li { height: 44px; font-size: 13px; }
  .form { padding: 20px 16px 24px; border-radius: 16px; }
  .form__grid { grid-template-columns: 1fr; gap: 18px; }
  .field { gap: 6px; }
  .field label { font-size: 15px; padding-left: 2px; }
  .field input, .field select { height: 52px; padding: 0 14px; }
  .field textarea { height: 130px; padding: 12px 14px; }
  .select select { padding-right: 44px; }
  .select::after { right: 16px; }
  .agree { margin-top: 20px; }
  .form__btn { height: 58px; font-size: 17px; margin-top: 22px; }
  .form__actions { margin-top: 26px; gap: 10px; }
  .form__btn--back { flex-basis: 92px; }
  .form__note { font-size: 12px; text-align: left; }
  .form-tel b { font-size: 36px; }
  .form-tel small { font-size: 13px; }

  /* 店舗・会社 */
  #shop { padding: 56px 0 64px; }
  .shops { grid-template-columns: 1fr; gap: 28px; }
  .shop h3 { font-size: 17px; margin-top: 12px; }
  .company { margin-top: 48px; gap: 28px; }
  .company__table > div { grid-template-columns: 84px minmax(0, 1fr); padding: 12px 6px; font-size: 13px; }
  .company__gap { display: block; width: auto; height: 0; }

  /* フッター */
  .footer { padding: 32px 20px 24px; }
  .footer__inner { gap: 28px; }
  .footer__name { font-size: 20px; }
  .footer__tel { font-size: 13px; }
  .footer__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .footer__nav a { font-size: 12.5px; white-space: normal; }
  .footer__copy { margin-top: 28px; font-size: 10.5px; }

  /* 追従CTA */
  .fixed-cta { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 3px solid var(--ink); transition: transform .25s; }
  .fixed-cta.is-hidden { transform: translateY(110%); }
  .fixed-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 900; font-size: 15px; line-height: 1.2; }
  .fixed-cta small { font-size: 10px; font-weight: 700; }
  .fixed-cta__tel { flex: 1; background: var(--red); }
  .fixed-cta__form { flex: 1.4; background: var(--cta); color: var(--cta-text) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-cta, .btn-cta, .form__btn { transition: none; }
}


/* =========================================================
   FV・こだわりプラス・理由：タブレット／SP
   ========================================================= */
@media (max-width: 1279px) {
  .header__inner { padding-left: 170px; }
  .header__mascot { width: 140px; }
  .header__logo img { width: 280px; }
  .header__brand { gap: 20px; }
  .header__tag { display: none; }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare__col--ours { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .header__tel { display: none; }
  .fv__stage { height: auto; padding: 30px 20px 40px; display: flex; flex-direction: column; align-items: center; }
  /* 黄色い車が黄色地に埋もれないよう、グラフ下端まで赤地を伸ばす */
  .fv::before { display: none; }
  .fv__title, .fv__note, .fv__points, .fv__price-wrap, .fv__cta { z-index: 1; }
  .fv__graph { z-index: 0; }
  .fv__graph::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: -2000px; bottom: -18px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); pointer-events: none; }
  .fv__title, .fv__note, .fv__points, .fv__graph, .fv__price, .fv__mascot-r, .fv__cta { position: relative; left: auto; top: auto; }
  .fv__title { width: min(430px, 86vw); }
  .fv__note { width: 100%; max-width: 520px; min-height: 0; margin-top: 20px; padding: 10px 16px; font-size: 14px; border-radius: 10px; text-align: center; }
  .fv__points { gap: 10px; margin-top: 18px; }
  .fv__points li { width: 128px; height: 128px; }
  .fv__points span { font-size: 14px; }
  .fv__points strong { font-size: 25px; margin-top: 2px; }
  .fv__graph { width: 100%; max-width: 640px; margin-top: 44px; }
  .fv__price-wrap { display: flex; align-items: flex-end; width: 100%; max-width: 680px; margin-top: 22px; }
  .fv__price { flex: 1 1 auto; min-width: 0; width: auto; }
  .fv__mascot-r { flex: 0 0 26%; width: 26%; margin-left: -2%; }
  .fv__cta { left: auto; right: auto; width: 100%; margin-top: 52px; gap: 20px; }
  .fv__cta .btn-cta, .mid-cta .btn-cta { width: 100%; max-width: 460px; height: 88px; border-radius: 12px; box-shadow: 0 6px 0 var(--ink); }
  .fv__cta .btn-cta--tel, .mid-cta .btn-cta--tel { padding-left: 96px; }
  .fv__cta .btn-cta--form, .mid-cta .btn-cta--form { padding-left: 84px; }
  .fv__cta .btn-cta small, .mid-cta .btn-cta small { font-size: 13px; }
  .fv__cta .btn-cta b, .mid-cta .btn-cta b { font-size: 30px; margin-top: 6px; }
  .fv__cta .btn-cta--tel b, .mid-cta .btn-cta--tel b { font-size: 34px; }
  .btn-cta--tel .btn-cta__mascot { left: -6px; top: -38px; width: 100px; }
  .btn-cta--form .btn-cta__mascot { left: 2px; top: -32px; width: 100px; }
  .plus-card__name { font-size: 22px; }
}
@media (max-width: 767px) {
  .header__inner { padding: 0 12px 0 68px; }
  .header__mascot { width: 56px; top: 2px; }
  .header__logo img { width: 190px; }
  .header__btn { display: none; }
  .header__tel-sp { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; }

  .fv__stage { padding: 22px 16px 30px; }
  .fv__title { width: min(320px, 86vw); }
  .fv__note { margin-top: 16px; padding: 9px 8px; font-size: 11px; }
  .fv__points { gap: 8px; margin-top: 14px; }
  .fv__points li { width: 100px; height: 100px; }
  .fv__points span { font-size: 11px; }
  .fv__points strong { font-size: 19px; }
  .fv__graph { margin-top: 34px; }
  .fv__price-wrap { margin-top: 14px; }
  .fv__mascot-r { flex-basis: 25%; width: 25%; }
  .fv__cta { flex-direction: column; align-items: center; gap: 30px; margin-top: 40px; padding: 0; }
  .fv__cta .btn-cta, .mid-cta .btn-cta { height: 74px; }
  .fv__cta .btn-cta--tel, .mid-cta .btn-cta--tel { padding-left: 70px; }
  .fv__cta .btn-cta--form, .mid-cta .btn-cta--form { padding-left: 64px; }
  .fv__cta .btn-cta small, .mid-cta .btn-cta small { font-size: 11.5px; }
  .fv__cta .btn-cta b, .mid-cta .btn-cta b { font-size: 23px; margin-top: 4px; }
  .fv__cta .btn-cta--tel b, .mid-cta .btn-cta--tel b { font-size: 27px; }
  .btn-cta--tel .btn-cta__mascot { left: -4px; top: -30px; width: 78px; }
  .btn-cta--form .btn-cta__mascot { left: 0; top: -26px; width: 80px; }
  .fv__cta .btn-cta--form, .mid-cta .btn-cta--form { order: -1; }

  .sec-head__title--img img { width: 100%; max-width: 330px; }
  .plus-list { gap: 12px; }
  .plus-card { border-radius: 12px; }
  .plus-card__name { height: 44px; font-size: 18px; }
  .plus-card__value { margin-top: 18px; font-size: 44px; }
  .plus-card__unit { font-size: 22px; margin-left: 2px; }
  .plus-card__cond { margin: 14px 6px 18px; font-size: 13.5px; line-height: 1.45; }
  .plus-note { font-size: 11px; }
  .plus-more { margin-top: 12px; }

  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; padding: 10px; align-items: end; }
  .compare__col--a { height: 150px; }
  .compare__col--b { height: 166px; }
  .compare__col--a, .compare__col--b { padding: 8px 6px; }
  .compare__name { font-size: 13.5px; }
  .compare__type { margin-top: 6px; font-size: 11px; }
  .compare__result { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
  .compare__col--ours { padding: 18px 14px 18px; }
  .compare__logo img { width: 240px; }
  .compare__head img { width: 230px; }
  .compare__points { font-size: 12.5px; line-height: 1.7; }
  .compare__points li { padding-left: 1em; text-indent: -1em; }
}

/* =========================================================
   アニメーション
   - JS有効時のみ（html.js）。FVは画像読み込み後に .fv.is-play で再生
   - こだわりプラスはスクロールで画面に入ったら .is-in で再生
   - 「視差効果を減らす」設定では無効
   ========================================================= */
@keyframes fvFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fvPop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.1); } 80% { transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes fvCarIn { 0% { opacity: 0; transform: translateX(-70%); } 70% { opacity: 1; transform: translateX(5%); } 100% { opacity: 1; transform: none; } }
@keyframes fvRise { 0% { opacity: 0; transform: translateY(40%); } 60% { opacity: 1; transform: translateY(-7%); } 80% { transform: translateY(2%); } 100% { opacity: 1; transform: none; } }
@keyframes fvDrop { 0% { opacity: 0; transform: translateY(-50%); } 55% { opacity: 1; transform: translateY(4%); } 70% { transform: translateY(-6%); } 85% { transform: translateY(1%); } 100% { opacity: 1; transform: none; } }
@keyframes fvJumpIn { 0% { opacity: 0; transform: translateY(60%); } 55% { opacity: 1; transform: translateY(-8%); } 75% { transform: translateY(3%); } 100% { opacity: 1; transform: none; } }
@keyframes fvSlideR { 0% { opacity: 0; transform: translateX(60%) rotate(8deg); } 65% { opacity: 1; transform: translateX(-4%) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes fvDon { 0%, 14%, 100% { transform: none; } 5% { transform: translateY(-7%); } 10% { transform: translateY(1.5%); } }
@keyframes fvKing { 0%, 30%, 100% { transform: none; } 8% { transform: translateY(-8%) rotate(-3deg); } 16% { transform: none; } 22% { transform: translateY(-4%) rotate(2deg); } }
@keyframes fvHop { 0%, 40%, 100% { transform: none; } 12% { transform: translateY(-10%); } 22% { transform: translateY(0); } 30% { transform: translateY(-4%); } }
@keyframes fvWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes fvShake { 0%, 60%, 100% { transform: none; } 65% { transform: translateY(-4%) rotate(-3deg); } 72% { transform: translateY(0) rotate(2deg); } 79% { transform: translateY(-2%) rotate(-1deg); } 86% { transform: none; } }
@keyframes fvPulse { 0%, 20%, 100% { transform: none; } 8% { transform: scale(1.06); } 14% { transform: scale(.99); } }
@keyframes fvBob { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@keyframes fvShine { 0% { background-position: 160% 0; } 25%, 100% { background-position: -60% 0; } }
@keyframes fvSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes plusIn { 0% { opacity: 0; transform: translateY(30px) scale(.9); } 60% { opacity: 1; transform: translateY(-6px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes plusNum { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  .js .fv .fv__title { animation: fvPop .7s cubic-bezier(.3,1.4,.5,1) .2s both; transform-origin: 30% 60%; }
  .js .fv .fv__note { animation: fvFadeUp .5s ease-out .8s both; }
  .js .fv .fv__points li { animation: fvPop .5s cubic-bezier(.3,1.4,.5,1) both, fvBob 2.4s ease-in-out infinite; }
  .js .fv .fv__points li:nth-child(1) { animation-delay: 1s, 4s; }
  .js .fv .fv__points li:nth-child(2) { animation-delay: 1.15s, 4.3s; }
  .js .fv .fv__points li:nth-child(3) { animation-delay: 1.3s, 4.6s; }
  .js .fv .fv__sit { transform-origin: 50% 100%; animation: fvJumpIn .7s ease-out .35s both, fvHop 3.2s ease-in-out 3.4s infinite; }

  .js .fv .fv__g--1 { animation: fvCarIn .7s ease-out .5s both; }
  .js .fv .fv__g--2 { animation: fvRise .55s ease-out 1.1s both, fvDon 4.5s ease-in-out 4.5s infinite; }
  .js .fv .fv__g--3 { animation: fvRise .55s ease-out 1.35s both, fvDon 4.5s ease-in-out 4.65s infinite; }
  .js .fv .fv__g--4 { animation: fvRise .55s ease-out 1.6s both, fvDon 4.5s ease-in-out 4.8s infinite; }
  .js .fv .fv__g--5 { transform-origin: 50% 100%; animation: fvDrop .8s ease-out 1.9s both, fvKing 4.5s ease-in-out 4.95s infinite; }
  .js .fv .btn-cta__mascot, .mid-cta .btn-cta__mascot { transform-origin: 50% 100%; animation: fvHop 3s ease-in-out 4s infinite; }

  .js .fv .fv__price { transform-origin: 60% 70%; animation: fvPop .7s cubic-bezier(.3,1.4,.5,1) 2.5s both, fvPulse 4.5s ease-in-out 5.3s infinite; }
  .js .fv .fv__mascot-r { transform-origin: 50% 100%; animation: fvSlideR .8s ease-out 2.2s both, fvWave 2.8s ease-in-out 3.4s infinite; }
  .js .fv .fv__cta { animation: fvFadeUp .5s ease-out 2.9s both; }

  .btn-cta--shine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: fvShine 3.5s ease-in-out 4s infinite; pointer-events: none; }
  .header__mascot { transform-origin: 40% 100%; animation: fvSway 3s ease-in-out infinite; }

  /* FV：画像の読み込み完了（.is-play）までは停止 */
  .js .fv:not(.is-play) [data-anim],
  .js .fv:not(.is-play) .btn-cta--shine::after { animation-play-state: paused !important; }

  /* こだわりプラス：カードが順にポップ → 金額がカウントアップして弾む */
  .js .plus-list .plus-card { opacity: 0; }
  .js .plus-list.is-in .plus-card { animation: plusIn 1.1s cubic-bezier(.3,1.3,.5,1) both; }
  .js .plus-list.is-in .plus-card:nth-child(2) { animation-delay: .3s; }
  .js .plus-list.is-in .plus-card:nth-child(3) { animation-delay: .6s; }
  .js .plus-list.is-in .plus-card:nth-child(4) { animation-delay: .9s; }
  .js .plus-list .plus-card__num.is-done { animation: plusNum .7s ease-out; }
}

/* ===================== WordPress（Contact Form 7）用の調整 ===================== */
.form .wpcf7-form-control-wrap { display: block; }
.form .wpcf7-not-valid-tip { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--red); }
.form .wpcf7-not-valid { border-color: var(--red); background: #FFF4F4; }
.form .wpcf7-response-output { margin: 24px 0 0; padding: 12px 16px; border: 2px solid var(--red); border-radius: 10px; font-weight: 700; font-size: 14px; text-align: center; }
.form.sent .wpcf7-response-output, .form.init .wpcf7-response-output { display: none; }
.form .wpcf7-spinner { display: none; }
.form.submitting .wpcf7-spinner { display: block; margin: 12px auto 0; }
.agree .wpcf7-list-item { margin: 0; }
.agree .wpcf7-list-item label { display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.agree a { color: inherit; }
.form__actions .wpcf7-submit { flex: 1 1 auto; }

/* ===================== お客様の声：モーダル（Micromodal.js） ===================== */
.voice { transition: transform .2s, box-shadow .2s; }
.voice:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .voice, .voice:hover { transition: none; transform: none; } }
.voice__link { display: block; color: inherit; text-decoration: none; }
/* 投稿の画像は正方形（アンケートの上下が白い余白）なので、デザインの比率（682×361）で中央を切り抜く */
.voice__img { position: relative; padding-top: 52.93%; overflow: hidden; border-radius: 8px; }
.voice__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.modal { display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: rgba(35, 24, 21, .7); }
.modal__container { position: relative; width: 100%; max-width: 720px; background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-sizing: border-box; }
/* スクロールするのは本文だけ。閉じるボタンはスクロールの外（カードの右上角にかぶせて固定） */
.modal__body { max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; padding: 40px 40px 36px; border-radius: 17px; box-sizing: border-box; }
.modal__close { position: absolute; z-index: 1; top: -20px; right: -20px; box-shadow: 0 3px 0 var(--ink); width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); cursor: pointer; }
.modal__close::before, .modal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; background: var(--ink); border-radius: 2px; }
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__title { font-family: var(--font-display); font-size: 28px; line-height: 1.3; color: var(--red); margin-bottom: 20px; }
/* モーダルも正方形画像の上下の余白を切る。アンケートは画像の縦 25〜75% 付近にあるため、少し余裕を持たせた 5:3 で中央を切り抜く */
.modal__img { position: relative; padding-top: 60%; overflow: hidden; border-radius: 10px; border: 1px solid #ddd; }
.modal__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.modal .voice__date { margin-top: 20px; }
.modal__text { margin-top: 10px; font-weight: 700; font-size: 17px; line-height: 1.85; color: var(--text); }

/* 開く・閉じるときのアニメーション */
.modal[aria-hidden="false"] .modal__overlay { animation: modal-fade-in .25s ease-out; }
.modal[aria-hidden="false"] .modal__container { animation: modal-slide-in .3s cubic-bezier(.2, .8, .3, 1.2); }
.modal[aria-hidden="true"] .modal__overlay { animation: modal-fade-out .2s ease-in; }
.modal[aria-hidden="true"] .modal__container { animation: modal-slide-out .2s ease-in; }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-slide-in { from { transform: translateY(24px) scale(.96); } to { transform: none; } }
@keyframes modal-slide-out { from { transform: none; } to { transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .modal .modal__overlay, .modal .modal__container { animation: none !important; }
}
@media (max-width: 767px) {
  .modal__overlay { padding: 32px 16px 16px; }
  .modal__container { border-radius: 16px; }
  .modal__body { max-height: calc(100vh - 54px); padding: 28px 18px 24px; border-radius: 13px; }
  .modal__close { top: -18px; right: -10px; width: 40px; height: 40px; }
  .modal__title { font-size: 22px; margin-bottom: 14px; padding-right: 44px; }
  .modal__text { font-size: 15px; }
}