/* ==========================================================================
   ロードサービス LP（Figma: 1105_SP ロードサービス様｜明るいソフトピンク案）
   デザインは SP 幅 393px。PC はレスポンシブで補完。
   ========================================================================== */

:root {
  --pink: #cb788a;
  --pink-light: #edbac2;
  --pink-dark: #b66379;
  --pink-deep: #b96379;
  --pink-pale: #fcf3f3;
  --pink-soft: #f0cbd0;
  --text: #3c3c3c;
  --yellow-band: #f5dfaa;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --gradient-price: linear-gradient(178.8deg, #edbac2 1.69%, #cb788a 59.66%, #cb788a 98.31%);

  /* 393px 固定の構図（ヒーロー・CTA）を画面幅に合わせる倍率 */
  --z-sm: 1;
  --z-hero: 1;
}

@media (max-width: 392px) { :root { --z-sm: 0.99; --z-hero: 0.99; } }
@media (max-width: 389px) { :root { --z-sm: 0.95; --z-hero: 0.95; } }
@media (max-width: 374px) { :root { --z-sm: 0.91; --z-hero: 0.91; } }
@media (max-width: 359px) { :root { --z-sm: 0.81; --z-hero: 0.81; } }
@media (min-width: 600px) { :root { --z-hero: 1.2; } }
@media (min-width: 1024px) { :root { --z-hero: 1.35; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding-bottom: 200px; /* 追従CTAに隠れないための余白 */
  background: #fff;
  color: var(--text);
  font-family: var(--font-jp);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }

/* ---------- 仮表示（未確定情報） ---------- */
.tbd {
  outline: 2px dashed #f5a623;
  outline-offset: 1px;
  background-color: rgba(255, 221, 0, 0.3);
  border-radius: 2px;
}

.demo-bar {
  padding: 6px 12px;
  background: #3c3c3c;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.demo-bar .tbd { color: #fff; }

/* ---------- 共通パーツ ---------- */
.gradient-text {
  background: linear-gradient(to bottom, #edbac2 0%, #cb788a 60%, #cb788a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text--price { background-image: var(--gradient-price); }

/* 白フチ文字：data-text を白い太線で背面に描き、前面に塗りを重ねる */
.outlined { position: absolute; white-space: nowrap; }
.outlined__stroke {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  -webkit-text-stroke: 8px #fff;
}
.outlined__fill { position: relative; }

/* 画像トリミング（Figma の切り抜き位置をそのまま再現） */
.crop { position: relative; overflow: hidden; }
.crop img { position: absolute; max-width: none; }

.band-title {
  height: 72px;
  background: var(--pink);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 72px;
  text-align: center;
}

/* ==========================================================================
   ヒーロー（393×703 の構図を固定し zoom で拡縮）
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}
/* 上部の帯・下部のグラデーションは画面幅いっぱいに敷く */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}
.hero::before {
  top: 0;
  height: calc(80px * var(--z-hero));
  background: linear-gradient(to right, var(--pink-light), var(--pink));
}
.hero::after {
  bottom: 0;
  height: calc(185px * var(--z-hero));
  background: linear-gradient(to bottom, var(--pink-light), var(--pink));
}

.hero__stage {
  position: relative;
  z-index: 1;
  width: 393px;
  height: 703px;
  margin: 0 auto;
  zoom: var(--z-hero);
}
.hero__stage > * { position: absolute; }

.hero__ellipse {
  left: -23px;
  top: 460px;
  width: 464px;
  height: 160px;
  border-radius: 50%;
  background: #fff;
}
.hero__photo { left: 0; top: 144px; width: 393px; height: 394px; }

.hero__head {
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  white-space: nowrap;
}
.hero__head-l1 { display: block; font-size: 28px; }
.hero__head-l2 { display: block; font-size: 20px; }

.hero__pill {
  left: 69px;
  top: 96px;
  width: 255px;
  height: 48px;
  padding: 0 36px 4px 72px;
  border-radius: 16px;
  background: #d19fa7;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 44px;
  text-align: right;
  white-space: nowrap;
}
.hero__pill::after { /* 下向きの吹き出し */
  content: "";
  position: absolute;
  left: 50%;
  top: 47px;
  width: 42px;
  height: 12px;
  transform: translateX(-50%);
  background: #d19fa7;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hero__pill-num { font-size: 42px; }
.hero__pill-icon {
  position: absolute;
  left: 25px;
  top: 6px;
  width: 40px;
  height: 36px;
  transform: rotate(10deg);
}

.hero__catch { inset: 0; pointer-events: none; font-weight: 700; }
.hero__catch > span { position: absolute; }
.hero__catch-short {
  left: 12px;
  top: 175px;
  width: 40px;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
}
.hero__catch-num {
  left: 91.5px;
  translate: -50% 0;
  top: 134px;
  font-size: 92px;
  line-height: 100px;
  letter-spacing: -0.07em;
}
.hero__catch-min {
  left: 174px;
  translate: -50% 0;
  top: 182px;
  color: var(--pink-dark);
  font-size: 32px;
  line-height: 48px;
}
.hero__catch-rest {
  left: 296px;
  translate: -50% 0;
  top: 189px;
  font-size: 24px;
  line-height: 36px;
  white-space: nowrap;
}

.hero .price { left: 34px; top: 471px; }

.hero__troubles { inset: 0; pointer-events: none; }
.hero__trouble {
  position: absolute;
  top: 573px;
  width: 116px;
  height: 116px;
  border: 1px solid var(--pink);
  border-radius: 50%;
  background: #fff;
}
.hero__trouble--1 { left: 16px; }
.hero__trouble--2 { left: 139px; }
.hero__trouble--3 { left: 261px; }
.hero__trouble-text {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.hero__trouble-text em { color: var(--pink-dark); }
.hero__trouble img { position: absolute; top: 37px; left: 50%; height: 80px; width: auto; transform: translateX(-50%); }

/* ---------- 基本料金ブロック（ヒーロー・料金セクション共通） ---------- */
.price {
  position: relative;
  width: 332px;
  height: 112px;
  font-weight: 700;
}
.price > * { position: absolute; white-space: nowrap; }
.price::before,
.price::after { /* 「基本料金」の上下の線 */
  content: "";
  position: absolute;
  left: 0;
  width: 48px;
  height: 2px;
  border-radius: 1px;
  background: var(--pink);
}
.price::before { top: 32px; }
.price::after { top: 91px; }
.price__label {
  left: 1px;
  top: 40px;
  width: 48px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}
.price__band { left: 53px; top: 62px; width: 279px; height: 32px; background: var(--yellow-band); }
.price--section .price__band { top: 73px; height: 21px; }
.price__num {
  left: 152.5px;
  translate: -50% 0;
  top: 0;
  font-size: 80px;
  line-height: 112px;
}
.price__comma { font-size: 52px; }
.price__tax { left: 284px; translate: -50% 0; top: 28px; color: var(--pink-dark); font-size: 20px; line-height: 24px; }
.price__unit { left: 288px; translate: -50% 0; top: 49px; color: var(--pink-dark); font-size: 36px; line-height: 48px; white-space: nowrap; }

/* ==========================================================================
   電話CTA（362×93 の構図）
   ========================================================================== */
.cta-section { padding: 24px 0 23px; }

.cta-btn {
  position: relative;
  display: block;
  width: 362px;
  height: 93px;
  margin: 0 auto;
  zoom: var(--z-sm);
  color: #fff;
  font-weight: 800;
}
.cta-btn > * { position: absolute; }
.cta-btn__bg {
  inset: 11px 0 0;
  border-radius: 15px;
  background: linear-gradient(163.19deg, #47ea85 0%, #1db05f 71.43%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.cta-btn__glow { left: 19px; right: 14px; top: 20px; height: 20px; background: rgba(228, 248, 235, 0.22); filter: blur(8.8px); }
.cta-btn__label { left: 68px; right: 23px; top: 0; height: 25px; border-radius: 7px; background: #f5c32c; }
.cta-btn__badge { left: 4px; top: 16px; width: 61px; height: 72px; }
.cta-btn__call { left: 4px; top: 28px; width: 57px; height: 57px; object-fit: contain; transform: rotate(-94.36deg); }
.cta-btn__signal { width: 9px; height: 2px; border-radius: 1px; background: #078d44; }
.cta-btn__signal--1 { left: 29px; top: 32px; transform: rotate(113.96deg); }
.cta-btn__signal--2 { left: 36px; top: 37px; transform: rotate(145.22deg); }
.cta-btn__signal--3 { left: 40px; top: 44.5px; transform: rotate(175.57deg); }
.cta-btn__notice { left: 68px; right: 23px; top: 5px; font-size: 14px; line-height: 15px; letter-spacing: 0.04em; text-align: center; white-space: nowrap; }
.cta-btn__lead { left: 66px; right: 24px; top: 29px; color: #e96202; font-size: 14px; line-height: 15px; letter-spacing: 0.04em; text-align: center; white-space: nowrap; }
.cta-btn__tel {
  left: 66px;
  right: 22px;
  top: 54px;
  font-family: var(--font-num);
  font-size: 40px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.cta-btn:hover .cta-btn__bg,
.float-cta:hover .float-cta__btn { filter: brightness(1.05); }

/* ==========================================================================
   特長
   ========================================================================== */
.features__inner {
  position: relative;
  width: min(393px, 100%);
  height: 353px;
  margin: 0 auto;
  padding: 24px 16px 0;
  overflow: hidden;
}
.features__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  max-width: 172px;
  border: 1px solid var(--pink);
  border-radius: 12px;
  background: var(--pink-pale);
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.2));
}
.feature-card__title { font-size: 24px; font-weight: 700; line-height: 32px; text-align: center; }
.feature-card__icon { width: 72px; height: 72px; }
.feature-card__clock { position: relative; width: 70px; height: 72px; }
.feature-card__clock img { width: 70px; height: 72px; }
.feature-card__clock-text {
  position: absolute;
  left: 37px;
  top: 18px;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  white-space: nowrap;
}
.feature-card__clock-text small { font-size: 12px; }

.features__msg {
  position: relative;
  z-index: 1;
  margin-top: 35px;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  white-space: nowrap;
}
.features__em {
  font-size: 24px;
  background: linear-gradient(transparent 19px, var(--yellow-band) 19px, var(--yellow-band) 27px, transparent 27px);
}
.features__operator { position: absolute; right: -1px; top: 178px; width: 162px; }

/* ==========================================================================
   料金のご案内
   ========================================================================== */
.pricing { background: var(--pink-pale); padding-bottom: 60px; }
.pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(353px, 100% - 40px);
  margin: 0 auto;
}
.pricing__free {
  display: flex;
  align-items: center;
  margin-top: 41px;
  font-weight: 700;
}
.pricing__free-tag {
  position: relative;
  height: 40px;
  margin-right: 20px;
  padding: 4px 20px;
  background: #fff;
  font-size: 16px;
  line-height: 32px;
}
.pricing__free-tag::after { /* 右向きの矢印 */
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 9px;
  height: 40px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pricing__free-text { color: var(--pink-deep); font-size: 40px; line-height: 40px; }
.pricing .price { margin-top: 0; }

.payment {
  width: 100%;
  max-width: 353px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--pink);
  border-radius: 12px;
  background: #fff;
}
.payment__title {
  padding: 10px;
  background: #efefef;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.payment__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 19px;
}
.payment__pill {
  width: 240px;
  padding: 6px 20px;
  border-radius: 48px;
  background: var(--pink);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.payment__pill--qr { margin-top: 24px; }
.payment__cards { display: flex; align-items: center; gap: 20px; height: 38px; margin-top: 12px; padding-bottom: 8px; }
.payment__cards img { height: 30.4px; width: auto; }
.payment__paypay { width: 48px; margin-top: 8px; }
.payment__note { margin-top: 32px; font-size: 16px; font-weight: 700; line-height: 24px; }

.pricing__subtitle { margin-top: 60px; font-size: 24px; font-weight: 700; line-height: 24px; }

.price-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
  padding: 20px 32px;
  border-radius: 12px;
  background: #fff;
}
.price-table__row { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-size: 16px; line-height: 24px; }
.price-table__row:first-child { padding-bottom: 12px; border-bottom: 1px solid var(--pink); }
.price-table__value { color: var(--pink-deep); font-size: 24px; font-weight: 700; }
.price-table__value small { font-size: 16px; font-weight: 500; }

.more-price { width: 100%; margin-top: 16px; border-radius: 12px; background: #fff; }
.more-price__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  list-style: none;
}
.more-price__summary::-webkit-details-marker { display: none; }
.more-price__summary img { transition: transform 0.2s; }
.more-price[open] .more-price__summary img { transform: rotate(180deg); }
.more-price__body { padding: 0 32px 20px; font-size: 14px; line-height: 24px; }

/* ==========================================================================
   お悩み → 解決
   ========================================================================== */
.worry { background: var(--pink-soft); }
.worry__shape {
  position: relative;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 50% 100%, 0 calc(100% - 56px));
}
.worry__photo {
  position: relative;
  height: 597px;
  padding-top: 33px;
  overflow: hidden;
}
.worry__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.worry__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); }
.worry__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}
.worry__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(332px, 100% - 24px);
  margin: 187px auto 0;
}
.worry__list li {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 10px 10px 10px 16px;
  border-radius: 12px;
  background: rgba(53, 53, 53, 0.72);
  color: #fff;
  font-size: 20px;
  line-height: 32px;
}
.worry__list em { color: #f9cd22; }
.worry__arrow { position: relative; z-index: 1; width: 15px; margin: -13px auto 0; }

.worry__solution {
  position: relative;
  overflow: hidden;
  width: min(393px, 100%);
  height: 276px;
  margin: 0 auto;
}
.worry__now { padding-top: 2px; font-size: 24px; font-weight: 700; line-height: 44px; text-align: center; }
.worry__pill {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 14px 0 0 31px;
  padding: 6px 32px;
  border-radius: 60px;
  background: var(--pink-deep);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
}
.worry__pill::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 3px);
  width: 28px;
  height: 12px;
  margin-left: -14px;
  background: var(--pink-deep);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.worry__answer {
  position: relative;
  z-index: 1;
  margin: 18px 0 0 31px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.worry__name { color: #e8471f; font-size: 48px; }
/* Figma: 215×257 の枠内で画像を 134% に拡大し、右端はセクションの形で切り抜き */
.worry__operator { position: absolute; left: 222px; top: 63px; width: 288px; max-width: none; }

/* ==========================================================================
   対応トラブル
   ========================================================================== */
.troubles {
  position: relative;
  overflow: hidden;
  padding-top: 39px;
  background: linear-gradient(to bottom, var(--pink-soft), #e78693);
  color: #fff;
}
.troubles__area {
  width: min(340px, 100% - 40px);
  margin: 0 auto;
  padding: 12px 10px;
  background: var(--pink);
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.troubles__title { margin-top: 12px; font-size: 28px; font-weight: 700; line-height: 32px; text-align: center; }
.troubles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(360px, 100% - 24px);
  margin: 40px auto 0;
}
.troubles__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 132px;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.troubles__grid .is-tight { letter-spacing: -0.07em; }
.troubles__grid .is-small { font-size: 15px; }

.troubles__more {
  position: relative;
  width: min(393px, 100%);
  height: 237px;
  margin: 32px auto 0;
}
.troubles__more::before { /* 下向き三角 */
  content: "";
  display: block;
  width: 73px;
  height: 15px;
  margin: 0 auto 16px;
  background: var(--pink-pale);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.troubles__more-lead,
.troubles__more-text { font-weight: 700; text-shadow: 0 0 4px rgba(0, 0, 0, 0.25); }
.troubles__more-lead { font-size: 24px; line-height: 32px; text-align: center; }
.troubles__more-text { position: relative; z-index: 1; margin: 40px 0 0 30px; font-size: 28px; line-height: 44px; }
.troubles__operator { position: absolute; left: 234px; bottom: 0; width: 158px; }

/* ==========================================================================
   3つの理由
   ========================================================================== */
.reasons { background: var(--pink-pale); }
.reasons__shape {
  padding-bottom: 94px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 53px), 50% 100%, 0 calc(100% - 53px));
}
.reasons__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: var(--pink-pale);
  font-weight: 700;
  line-height: 72px;
  text-align: center;
}
.reasons__title::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 200px;
  width: 52px;
  height: 15px;
  transform: translateX(-50%);
  background: var(--pink-pale);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.reasons__title-l1 { font-size: 24px; }
.reasons__title-l2 { color: #65a30d; font-size: 28px; }
.reasons__title-num { font-size: 60px; }

.reasons__list {
  display: grid;
  gap: 24px;
  width: min(353px, 100% - 40px);
  margin: 30px auto 0;
}
.reason { position: relative; }
.reason__num {
  position: relative;
  z-index: 1;
  display: block;
  width: 92px;
  margin-left: 10px;
  color: var(--pink-pale);
  font-size: 80px;
  font-weight: 700;
  line-height: 80px;
  text-align: center;
}
.reason__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-top: -40px;
  padding: 20px 10px 10px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to bottom, var(--pink), #d08898);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
}
.reason__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 12px;
  border: 1px solid var(--pink);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  font-size: 16px;
  line-height: 28px;
}
.reason__body p { padding: 0 1px; }
.reason__img { width: 100%; aspect-ratio: 323 / 172; }

/* ==========================================================================
   対応車種
   ========================================================================== */
.vehicles { padding: 38px 0 60px; background: var(--pink-pale); }
.vehicles__title {
  width: fit-content;
  margin: 0 auto;
  padding: 8px 24px;
  border-radius: 12px;
  background: var(--pink);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
}
.vehicles__list { display: grid; gap: 40px; width: min(353px, 100% - 40px); margin: 42px auto 0; }
.vehicle { display: flex; align-items: flex-start; }
.vehicle__img { flex: none; width: 140px; height: 140px; overflow: hidden; border-radius: 50%; background: #fff; }
.vehicle__text { position: relative; z-index: 1; flex: 1; margin-left: 13px; font-size: 16px; line-height: 28px; }
.vehicle__name {
  position: relative;
  margin-bottom: 28px;
  color: var(--pink-dark);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}
.vehicle__name::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 44px;
  width: 180px;
  height: 1px;
  background: var(--pink);
}

/* ==========================================================================
   作業までの流れ
   ========================================================================== */
.flow { padding: 44px 0 60px; background: #fff; }
.flow__title { font-size: 28px; font-weight: 700; line-height: 36px; text-align: center; }
.flow__list { display: grid; gap: 40px; margin-top: 40px; }
.step { position: relative; }
.step__head {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  min-width: 280px;
  max-width: calc(100% - 20px);
  padding: 0 26px 0 20px;
  border-radius: 0 60px 60px 0;
  background: var(--pink);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}
.step__num { font-family: var(--font-num); font-size: 40px; font-weight: 700; line-height: 52px; }
.step::before { /* 縦線 */
  content: "";
  position: absolute;
  left: 37px;
  top: 51px;
  width: 1px;
  height: 180px;
  background: var(--pink);
}
.step::after { /* 線の終端の丸 */
  content: "";
  position: absolute;
  left: 34px;
  top: 228px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
}
.step__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(292px, 100% - 101px);
  margin: 12px 0 0 73px;
  font-size: 16px;
  line-height: 32px;
}
.step__title { font-size: 20px; font-weight: 700; line-height: 32px; }
.step__img { width: 100%; height: 180px; }

/* ==========================================================================
   よくある質問
   ========================================================================== */
.faq { padding: 37px 0 40px; background: var(--pink-pale); }
.faq__title { font-size: 28px; font-weight: 700; line-height: 36px; text-align: center; }
.faq__list { display: grid; gap: 24px; width: min(352px, 100% - 40px); margin: 43px auto 0; }
.faq-item { filter: drop-shadow(4px 4px 3px rgba(61, 71, 46, 0.2)); }
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 8px 8px 0 0;
  background: var(--pink);
  color: #fff;
  font-size: 18px;
  line-height: 24px;
}
.faq-item__badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding-bottom: 2px;
  border-radius: 50%;
  background: #fff;
  color: var(--pink-dark);
  font-family: "Palanquin", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.faq-item__a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 24px 12px 20px;
  border-radius: 0 0 8px 8px;
  background: #fff;
}
.faq-item__lead { color: var(--pink-dark); font-size: 16px; line-height: 32px; }
.faq-item__detail { font-size: 14px; line-height: 24px; }

/* ==========================================================================
   決済方法（再掲）
   ========================================================================== */
.payment-section { padding: 21px 20px 60px; background: var(--pink-pale); }
.payment-section .payment { margin: 0 auto; }

/* ==========================================================================
   フッター
   ========================================================================== */
.footer { padding: 30px 0 40px; background: #fff; }
.footer__nav { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer__nav a { color: #855e65; font-size: 14px; font-weight: 700; line-height: 21px; }
.footer__nav a:hover { text-decoration: underline; }
.footer__info { display: flex; flex-direction: column; gap: 8px; width: min(308px, 100% - 40px); margin: 30px auto 0; }
.footer__row { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--pink-pale); font-size: 13px; line-height: 22.1px; }
.footer__row dt { flex: none; width: 92px; color: #59464b; font-weight: 700; }
.footer__row dt small { display: block; font-size: 11px; font-weight: 400; line-height: 18.7px; }
.footer__row dd { font-weight: 400; }
.footer__copy { margin-top: 20px; font-size: 11px; font-weight: 400; line-height: 16.5px; text-align: center; }

/* ==========================================================================
   追従CTA（画面下に常時表示）
   ========================================================================== */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: 8px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 377px;
  translate: -50% 0;
  zoom: var(--z-sm);
}
.float-cta__bubble {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 239px;
  height: 42px;
  margin-bottom: -7px;
  padding: 3px 20px 12px;
  background: url("../images/cta2-bubble.svg") no-repeat center / 100% 100%;
  color: #181818;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.float-cta__bubble img { width: 22px; height: 23px; }
.float-cta__bubble em { color: #e52d03; }
.float-cta__bubble b { font-size: 24px; }

.float-cta__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 145px;
  padding: 10px 7px 14px;
  border-radius: 15px;
  background: linear-gradient(152.85deg, #3cce74 0%, #06a94f 71.43%);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.float-cta__glow { position: absolute; left: 20px; top: 25px; width: 343px; height: 64px; background: rgba(228, 248, 235, 0.22); filter: blur(8.8px); }
.float-cta__notice { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-weight: 800; line-height: 15px; }
.float-cta__chip { display: flex; align-items: center; justify-content: center; width: 111px; height: 25px; border-radius: 21px; background: #f5b52c; font-size: 14px; letter-spacing: 0.04em; }
.float-cta__open { flex: 1; font-size: 18px; letter-spacing: 0.04em; text-align: center; }

.float-cta__panel {
  position: relative;
  display: flex;
  justify-content: center;
  height: 91px;
  padding: 11px 9px 6px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.float-cta__icon { position: relative; flex: none; width: 33px; height: 34px; margin: 32px -4px 0 0; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25)); }
.float-cta__icon img { position: absolute; }
.float-cta__icon-bg { inset: 0; width: 33px; height: 34px; }
.float-cta__icon-call { left: 6px; top: 7px; width: 22px; height: 22px; transform: rotate(-98.88deg); }
.float-cta__icon-s1 { left: 16px; top: 10px; width: 10.75px; transform: rotate(45.69deg); }
.float-cta__icon-s2 { left: 16px; top: 12.5px; width: 7.24px; transform: rotate(45.69deg); }
.float-cta__text { display: flex; flex: 1; flex-direction: column; gap: 5px; text-align: center; }
.float-cta__lead { color: #e84b23; font-size: 16px; font-weight: 700; line-height: 23px; white-space: nowrap; }
.float-cta__tel {
  height: 44px;
  font-family: var(--font-num);
  font-size: 45px;
  font-weight: 700;
  line-height: 44px;
  white-space: nowrap;
  background: linear-gradient(to bottom, #fea304 10.88%, #f74901 34.18%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}
/* グラデーション文字の上に背景色を重ねると文字が隠れるため、枠線のみ */
.float-cta__tel .tbd { background: none; }

/* ==========================================================================
   PC（Figma は SP のみのため、列数を増やして横幅を活かす）
   ========================================================================== */
@media (min-width: 768px) {
  body { padding-bottom: 210px; }

  .worry__list { width: 480px; }

  .troubles__grid { grid-template-columns: repeat(6, 112px); justify-content: center; width: auto; }
  .troubles__more { width: 560px; }
  .troubles__operator { left: auto; right: 20px; }

  .reasons__list { grid-template-columns: repeat(auto-fit, minmax(320px, 353px)); justify-content: center; width: min(1107px, 100% - 80px); }
  .reason { display: flex; flex-direction: column; }
  .reason__body { flex: 1; }

  .vehicles__list { grid-template-columns: repeat(auto-fit, 353px); justify-content: center; column-gap: 24px; width: min(1107px, 100% - 80px); }

  .flow__list { grid-template-columns: repeat(2, 400px); justify-content: center; column-gap: 40px; row-gap: 48px; }

  /* 構図の外側（Figma の範囲外）は白になるため、写真とオペレーター画像の端をなじませる */
  .hero__photo { -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
  .worry__solution { overflow: visible; }
  .worry__photo-img { object-position: center 30%; }

  .faq__list { width: min(720px, 100% - 80px); }
}