/*
 * ロードサービスLP 本体スタイル（CODING_SPEC.md §4・§5）
 *
 * 値は Figma「SP ロードサービス　実写1様」（node-id 175:525, 393px 基準）の実測値。
 * - 縦方向・font-size は Figma の px をそのまま使う（1/2 換算しない）
 * - 横方向の位置・幅は 393px に対する % で指定し、375〜430px で伸縮させる
 *   （例: left 37px → 37 / 393 = 9.41%）
 * - 色はすべて :root の変数経由で指定する
 */

:root {
  /* ---- Layout ---- */
  --lp-max-width: 430px;
  --design-width: 393;

  /* ---- Color / Brand ---- */
  --c-orange:          #E96202; /* Brand/Orange */
  --c-orange-light:    #F27723; /* Brand/Orange Light（Section 4・9 背景） */
  --c-orange-bar:      #ED7118; /* Section 2 上部の帯 */
  --c-orange-vivid:    #F05208; /* Section 2「お電話1本で」 */
  --c-orange-prompt:   #E16308; /* CTA「ここをタップで…」 */
  --c-orange-badge:    #FF7A14; /* お客様の声のバッジ */
  --c-orange-border:   #FF7A19; /* 加盟店カードの枠 */
  --c-orange-grad-end: #F67416; /* サポートカードのグラデーション終点 */
  --c-pill-start:      #FEA304; /* FV「保険加入者は」の帯 */
  --c-pill-end:        #F74901;
  --c-yellow:          #FDED00; /* Brand/Yellow */
  --c-yellow-bright:   #FFF01F; /* Section 2 上部の「最短5分」 */
  --c-red:             #DD0723; /* 強調の赤（グラデーション始点） */
  --c-red-orange:      #E63E01; /* 強調の赤（グラデーション終点） */
  --c-red-strong:      #E52D03; /* FV統計バッジ・常時表示CTAの電話番号 */
  --c-red-tel:         #E53A08; /* 加盟店の電話番号 */
  --c-green-start:     #00AC31; /* FV CTA */
  --c-green-start-2:   #01B835; /* 常時表示CTA */
  --c-green-end:       #01C53C;
  --c-green-text:      #00932C; /* FV CTA ラベル */
  --c-green-chip:      #00C638; /* 常時表示CTA「通話料無料!!」 */
  --c-cta-glow:        rgba(238, 255, 246, 0.35);
  --c-blue:            #3554A1; /* Brand/Blue（FAQ 質問行） */

  /* ---- Color / Text ---- */
  --c-text:         #181818; /* Text/Primary */
  --c-text-navy:    #0A1C2E; /* Section 2 の見出し・カード */
  --c-text-sub:     #3A3A3A; /* 加盟店カードの案内文 */
  --c-text-weak:    #747474; /* 加盟店カードの受付時間 */
  --c-text-inverse: #FFFFFF; /* Text/Inverse */
  --c-text-light:   #F6F8FA; /* Section 4 の見出し */

  /* ---- Color / Surface ---- */
  --c-bg:              #FFFFFF; /* Surface/White */
  --c-bg-outer:        #E9ECEF; /* PC表示時の左右背景（Figma に指定なし） */
  --c-bg-feature:      #FFF9F0; /* Section 2 */
  --c-bg-step:         #FFF8ED; /* Section 6 STEPカード */
  --c-bg-step-note:    #FFF4E0; /* Section 6 サポート注記 */
  --c-bg-area-box:     #FDF3D3; /* Section 5 の案内枠 */
  --c-bg-ins-note:     #FFEFDA; /* Section 3 の注意書き */
  --c-bg-support:      rgba(255, 243, 230, 0.62); /* Section 7 */
  --c-bg-review:       #FFF6E8; /* Section 8 レビューカード */
  --c-bg-partner:      #FFF3E8; /* 加盟店募集｜電話申込み案内 */
  --c-bg-footer:       #FFEDD9; /* Surface/Cream（Section 11） */
  --c-border-review:   rgba(233, 98, 2, 0.45);
  --c-marker:          rgba(255, 240, 31, 0.9);  /* Section 2 の蛍光ペン */
  --c-marker-soft:     rgba(253, 237, 0, 0.56);  /* Section 3 の蛍光ペン */
  --c-glow:            rgba(255, 255, 255, 0.96); /* 見出し背後の白い光彩 */
  --c-band:            rgba(255, 255, 255, 0.33); /* サポートカードのラベル帯 */
  --c-shadow:          rgba(0, 0, 0, 0.25);

  /* ---- Typography ---- */
  --ff-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --ff-tel:  "Roboto", var(--ff-base); /* 電話番号の数字のみ（§3.4） */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ---- Radius / Shadow ---- */
  --r-sm:   7px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   15px;
  --r-2xl:  16px;
  --r-3xl:  17px;
  --r-pill: 999px;

  --shadow-drop:  0 4px 4px var(--c-shadow);
  --shadow-card:  0 4px 2px var(--c-shadow);
  --shadow-text:  0 4px 4px var(--c-shadow);

  /* ---- Sticky CTA ---- */
  --sticky-cta-space: 228px; /* フッター下部に確保する固定CTAぶんの余白（Figma Section 11 の実寸） */
}

/* ================================================================
   Base
   ================================================================ */

body {
  background: var(--c-bg-outer);
  color: var(--c-text);
  font-family: var(--ff-base);
}

.lp {
  width: 100%;
  max-width: var(--lp-max-width);
  margin-inline: auto;
  background: var(--c-bg);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ================================================================
   Header（175:526）
   ================================================================ */

.l-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  background: var(--c-bg);
}

.l-header__copy {
  color: var(--c-orange);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
  text-align: center;
}

/* ================================================================
   FV（Section 1 / 175:528）
   ================================================================ */

.fv {
  background: var(--c-bg);
}

.fv__visual {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.fv__visual > * {
  position: absolute;
}

.fv__hero {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 見出しの背後にある白い光彩（Ellipse 5〜8） */
.fv__glow {
  border-radius: 50%;
  background: var(--c-bg);
  filter: blur(12.5px);
}

.fv__glow--1 { top: 3px;   left: 11.45%; width: 75.83%; height: 59px; }
.fv__glow--2 { top: 48px;  left: 1.27%;  width: 94.91%; height: 112px; background: var(--c-glow); }
.fv__glow--3 { top: 330px; left: -0.51%; width: 55.98%; height: 72px; }
.fv__glow--4 { top: 378px; left: 0;      width: 74.30%; height: 109px; }

.fv__wave {
  top: 418px;
  left: -30.79%;
  width: 162.06%;
  max-width: none;
}

.fv__title {
  inset: 0;
  font-weight: var(--fw-black);
  line-height: 24px;
}

.fv__title > * {
  position: absolute;
}

/* 見出しの各パーツは文字サイズが固定のため、Figma と同じく中央からの px オフセットで配置する
   （% で配置すると 360px 端末で「保険適応」と「で」が重なる） */

.fv__title-lead {
  top: 23px;
  left: calc(50% - 4.5px);
  transform: translateX(-50%);
  color: var(--c-text);
  font-size: 18px;
  white-space: nowrap;
}

.fv__title-lead-lg {
  font-size: 24px;
}

.fv__title-pill {
  top: 58px;
  left: calc(50% - 159.5px);
  width: 187px;
  height: 37px;
  padding: 5px 10px 3px 9px;
  border-radius: var(--r-sm);
  background: linear-gradient(99deg, var(--c-pill-start) 4.54%, var(--c-pill-end) 66.74%);
  color: var(--c-text-inverse);
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.fv__title-pill-lg {
  font-size: 24px;
}

/* グラデーション文字（「保険適応」「！」） */
.fv__title-accent,
.fv__title-bang {
  background: linear-gradient(180deg, var(--c-red) 52.885%, var(--c-red-orange) 99.519%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv__title-accent {
  top: 98.4px;      /* Figma の文字枠（y=104, 高さ32）と同じ中心になるよう行の高さ43.2pxで配置 */
  left: calc(50% - 74.5px);
  transform: translateX(-50%);
  font-size: 36px;
  line-height: 1.2; /* 行の高さが文字より小さいとグラデーションが欠けるため */
  white-space: nowrap;
  /* Safari は display:flex の要素に background-clip:text を使うと文字が消えるため、flex は使わない */
}

.fv__title-de {
  top: 114px;
  left: calc(50% + 13.5px);
  transform: translateX(-50%);
  color: var(--c-text);
  font-size: 24px;
}

.fv__title-zero {
  top: 60.71px;
  left: calc(50% + 30.34px);
  width: 101.33px;
}

.fv__title-bang {
  top: 119.2px;
  left: calc(50% + 145.37px);
  font-size: 48px;
  line-height: 1.2; /* 行の高さが文字より小さいとグラデーションが欠けるため */
  transform: translate(-50%, -50%) rotate(4.74deg);
}

.fv__copy {
  inset: 0;
}

.fv__copy > img {
  position: absolute;
}

.fv__copy-call {
  --w: min(158px, 40.2%); /* 393px 未満は同じ比率で縮める */
  top: 329px;
  left: calc(50% - var(--w) * 1.11709); /* 中央からの距離 176.5 ÷ 158 */
  width: var(--w);
  transform: rotate(-2.09deg);
}

.fv__copy-arrival {
  --w: min(338px, 86.01%); /* 393px 未満は同じ比率で縮める */
  top: 384px;
  left: calc(50% - var(--w) * 0.6287); /* 中央からの距離 212.5 ÷ 338 */
  width: var(--w);
  max-width: none;
}

.fv__stats {
  top: 473px;
  left: 0;
  width: 100%;
}

.fv__stat {
  --size: min(119px, 30.28%); /* 393px 以上は Figma の 119px 固定、未満は同じ比率で縮める */
  position: absolute;
  top: 0;
  width: var(--size);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* アイコン＋文字のかたまりを丸の上下中央に置く */
  gap: 4px;
  min-height: 0;           /* 中身に押されて楕円にならないよう正方形を保つ */
  border: 2px solid var(--c-orange);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-red-strong);
  font-weight: var(--fw-black);
  text-align: center;
}

/* 中央基準で配置。係数は Figma の中央からの距離 ÷ 119（x=13 / 137 / 261） */
.fv__stat:nth-child(1) { left: calc(50% - var(--size) * 1.54202); }
.fv__stat:nth-child(2) { left: calc(50% - var(--size) * 0.5); }
.fv__stat:nth-child(3) { left: calc(50% + var(--size) * 0.54202); }

.fv__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39px; /* 3つのアイコンの高さ（39/34/30）の最大値。アイコンの並びを揃える */
}

/* 3つとも3行・行の高さ17pxに揃え、かたまりの高さを同じにする */
.fv__stat-text {
  font-size: 12px;
  line-height: 17px;
}

.fv__stat-text--1 .fv__stat-num { font-size: 14px; }
.fv__stat-text--2 .fv__stat-num { font-size: 15px; }
.fv__stat-text--3 .fv__stat-num { font-size: 20px; }

/* 393px 未満は丸が縮むため、中身も一回り小さくして縁に触れないようにする */
@media (max-width: 392px) {
  .fv__stat { gap: 2px; }
  .fv__stat-icon { height: 32px; }
  .fv__stat-icon img { max-height: 32px; width: auto; }
  .fv__stat-text { font-size: 11px; line-height: 15px; }
  .fv__stat-text--1 .fv__stat-num { font-size: 13px; }
  .fv__stat-text--2 .fv__stat-num { font-size: 14px; }
  .fv__stat-text--3 .fv__stat-num { font-size: 18px; }
  .fv__stat-unit { font-size: 14px; }
}
.fv__stat-unit { font-size: 16px; }

.fv__note {
  width: 80.41%;
  margin: 13px 0 0 12.98%;
  padding-bottom: 18px;
  color: var(--c-text);
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 13px;
}

/* ================================================================
   電話CTA（Figma component「CTA」/ 175:532）
   ================================================================ */

.cta__tel {
  position: relative;
  display: block;
  width: 92.11%;   /* 362 / 393 */
  height: 93px;
  margin: 12px 0 0 4.07%;
  text-align: center;
}

.cta__tel > * {
  position: absolute;
}

/* 目を引くため、FV の電話ボタンを少し拡大・縮小させる（ユーザー要望。QUESTIONS.md §12） */
.fv .cta__tel {
  animation: cta-pulse 1.6s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* 端末で「視差効果を減らす」を設定している人には動かさない（CODING_SPEC.md §9.3） */
@media (prefers-reduced-motion: reduce) {
  .fv .cta__tel,
  .cta-sticky__bubble {
    animation: none;
  }
}

.cta__tel-bg {
  inset: 11px 0 0;
  border-radius: var(--r-xl);
  background: linear-gradient(86.53deg, var(--c-green-start) 0.68%, var(--c-green-end) 99.55%);
  box-shadow: var(--shadow-drop);
}

.cta__tel-bg::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 5.25%;
  right: 3.87%;
  height: 39px;
  background: var(--c-cta-glow);
  filter: blur(8.8px);
}

.cta__tel-icon {
  top: 0;
  left: 0;
}

.cta__tel-label {
  top: 0;
  left: 18.78%;
  right: 6.35%;
  height: 25px;
  padding: 5px 0 0 8px;
  border-radius: var(--r-sm);
  background: var(--c-yellow);
  color: var(--c-green-text);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  line-height: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cta__tel-prompt {
  top: 29px;
  left: 19.61%;
  right: 8.01%;
  color: var(--c-orange-prompt);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  line-height: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cta__tel-number {
  top: 54px;
  left: 18.23%;
  right: 6.08%;
  color: var(--c-text-inverse);
  font-family: var(--ff-tel);
  font-size: min(40px, 10.2vw); /* 360px 端末でも1行に収める */
  font-weight: var(--fw-medium);
  line-height: 24px;
  text-shadow: 0 2px 4px var(--c-shadow);
  white-space: nowrap;
}

/* ================================================================
   特徴訴求（Section 2 / 175:534）
   ================================================================ */

.feature {
  padding-bottom: 8px;
  background: var(--c-bg-feature);
}

.feature__bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: 54px;
  padding-top: 13px;
  background: var(--c-orange-bar);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.feature__bar-lead {
  color: var(--c-text-inverse);
  font-size: 18px;
  line-height: 19.8px;
}

.feature__bar-main {
  color: var(--c-yellow-bright);
  font-size: 16px;
  line-height: 17.6px;
}

.feature__bar-num {
  font-size: 32px;
}

.feature__bar-rest {
  color: var(--c-text-inverse);
}

.feature__intro {
  position: relative;
  height: 177px;
}

.feature__title {
  font-weight: var(--fw-bold);
}

.feature__title > span {
  position: absolute;
  white-space: nowrap;
}

.feature__title-1 {
  top: 31px;
  left: 8.4%;
  color: var(--c-text-navy);
  font-size: 20px;
  line-height: 34.5px;
}

.feature__title-2 {
  top: 63px;
  left: 7.89%;
  color: var(--c-orange-vivid);
  font-size: 32px;
  line-height: 38.08px;
}

/* 「お電話1本で」の下に引く蛍光ペン */
.feature__title-2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 27px;
  left: 6px;
  width: 176px;
  height: 11px;
  border-radius: 2px;
  background: var(--c-marker);
}

.feature__title-2 {
  isolation: isolate;
}

.feature__title-3 {
  top: 105px;
  left: 8.4%;
  color: var(--c-text-navy);
  font-size: 24px;
  line-height: 40.32px;
}

.feature__operator {
  position: absolute;
  top: 16px;
  left: 54.45%;
  width: 37.15%;
}

.feature__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4.33%;
  padding: 0 4.58% 0 5.6%;
}

.feature__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  height: 136px;
  padding-top: 16px;
  border-radius: var(--r-xl);
  background: var(--c-bg);
  filter: drop-shadow(var(--shadow-card));
}

.feature__card--noreg {
  gap: 0;
  padding-top: 19px;
}

.feature__card-text {
  color: var(--c-text-navy);
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 22.42px;
  text-align: center;
}

.feature__pay {
  margin: 16px 4.58% 0 5.6%;
}

.feature__notes {
  width: 80.41%;
  margin: 8px 0 0 12.21%;
  color: var(--c-text);
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 13px;
}

.feature__notes li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

/* ---- 決済カード（Section 2・7 共通） ---- */

.pay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  height: 81px;
  padding: 9px 8px 12px 6px;
  border-radius: var(--r-xl);
  background: var(--c-bg);
}

.pay-card--shadow {
  filter: drop-shadow(var(--shadow-card));
}

.pay-card__text {
  color: var(--c-text-navy);
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 22.42px;
  white-space: nowrap;
}

.pay-card__logos {
  width: 259px;
}

/* ================================================================
   こんな時は（Section 4 / 175:557）
   ================================================================ */

.trouble {
  /* 画像の高さは画面幅で変わるため、見出し・画像・締めの文を縦に流して重ならないようにする。
     余白は 393px 時に Figma の座標（見出し y=31 / 画像 y=121 / 締め y=550・592）と一致する値 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 31px 0 75.5px; /* 下端 43px は山形の切り欠き分を含む */
  background: var(--c-orange-light);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 43px), 49.62% 100%, 0 calc(100% - 43px));
  color: var(--c-text-light);
  font-weight: var(--fw-bold);
  text-align: center;
  text-shadow: var(--shadow-text);
}

.trouble__title,
.trouble__closing {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trouble__title-1,
.trouble__title-2,
.trouble__closing-1,
.trouble__closing-2 {
  line-height: 34.5px;
  white-space: nowrap;
}

.trouble__title-1 { font-size: 20px; }
.trouble__title-2 { height: 34.5px; margin-top: 4.5px; font-size: 20px; } /* 32px の「当サービス」で行が膨らむのを防ぐ */

.trouble__title-em {
  color: var(--c-yellow);
  font-size: 32px;
  font-weight: var(--fw-black);
}

.trouble__grid {
  width: 95.42%;   /* 375 / 393 */
  margin-top: 16.5px;
}

.trouble__closing {
  margin-top: 7px;
}

.trouble__closing-1 { font-size: 20px; }
.trouble__closing-2 { margin: 7.5px 0 0 11px; font-size: 36px; } /* Figma は中央から 5.5px 右 */

.trouble__closing-em {
  color: var(--c-yellow);
}

/* ================================================================
   対応エリア（Section 5 / 175:564）
   ================================================================ */

.area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 67px 1.78% 32px;
  background: var(--c-bg);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.area__title,
.area__catch {
  display: flex;
  flex-direction: column;
  height: 93px;
}

.area__title-sub {
  color: var(--c-text);
  font-size: 20px;
  line-height: 24px;
}

.area__title-main {
  color: var(--c-orange);
  font-size: 48px;
  line-height: 55px;
}

.area__map {
  width: 273px;
}

.area__catch-sub {
  color: var(--c-text);
  font-size: 24px;
  line-height: 32px;
}

.area__catch-main {
  color: var(--c-red);
  font-size: 32px;
  line-height: 42px;
}

.area__box {
  position: relative;
  width: 91.03%;   /* 345 / 379 */
  height: 96px;
  border-radius: var(--r-xl);
  background: var(--c-bg-area-box);
  text-align: left;
}

.area__box-text {
  position: absolute;
  top: 16px;
  left: 9.28%;     /* 32 / 345 */
  color: var(--c-text);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.area__box-em {
  color: var(--c-orange);
  font-size: 15px;
  line-height: 22px;
}

.area__box-operator {
  position: absolute;
  top: -11px;
  left: 55.94%;    /* 193 / 345 */
  width: 130px;
}

/* ================================================================
   ご依頼の流れ（Section 6 / 175:572）
   ================================================================ */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  padding: 24px 1.27% 64px;
  background: var(--c-bg);
}

.flow__heading {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 9px;
  text-align: center;
  font-weight: var(--fw-semibold);
}

.flow__title {
  height: 39px;
  line-height: 39px;
}

.flow__title-main {
  color: var(--c-orange);
  font-size: 36px;
}

.flow__title-sub {
  color: var(--c-text);
  font-size: 24px;
}

.flow__lead {
  color: var(--c-text);
  font-size: 13px;
  line-height: 19px;
}

.flow__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.flow__step {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 142px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--c-bg-step);
}

.flow__step-photo {
  position: relative;
  flex-shrink: 0;
  width: 150px;
  height: 126px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.flow__step-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow__step-badge {
  position: absolute;
  top: 4px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  padding: 4px 3px 5px 4px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-text-inverse);
  font-weight: var(--fw-semibold);
  line-height: 16px;
}

.flow__step:nth-child(2) .flow__step-badge { top: 5px; }
.flow__step:nth-child(3) .flow__step-badge { top: 6px; }

.flow__step-badge-label { font-size: 10px; }
.flow__step-badge-num { font-size: 16px; }

.flow__step-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 1 199px;
  min-width: 0;
}

.flow__step:first-child .flow__step-body {
  flex-basis: 207px;
}

.flow__step:nth-child(2) .flow__step-desc {
  max-width: 193px;
}

.flow__step-title {
  color: var(--c-orange);
  font-size: 16px;
  font-weight: var(--fw-extrabold);
  line-height: 21.85px;
}

.flow__step:first-child .flow__step-title {
  line-height: 20px;
}

.flow__step-desc {
  color: var(--c-text);
  font-size: 11px;
  line-height: 15px;
}

.flow__step:nth-child(3) .flow__step-desc {
  letter-spacing: -0.02em;
}

.flow__note {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
  width: 95.3%;    /* 365 / 383 */
  margin-top: -5px; /* Figma では STEP と同じリスト内（間隔16px）に並ぶ */
  padding: 12px 0;
  border-radius: var(--r-lg);
  background: var(--c-bg-step-note);
  font-weight: var(--fw-semibold);
}

.flow__note-icon {
  flex-shrink: 0;
}

.flow__note-text {
  display: flex;
  flex-direction: column;
  width: 280px;
  max-width: calc(100% - 50px);
}

.flow__note-heading {
  color: var(--c-orange);
  font-size: 15px;
  line-height: 18px;
}

.flow__note-desc {
  color: var(--c-text);
  font-size: 14px;
  line-height: 16.8px;
}

/* ================================================================
   保険適応（Section 3 / 175:607）
   ================================================================ */

.insurance {
  position: relative;
  height: 590px;
  overflow: hidden;
}

.insurance > * {
  position: absolute;
}

.insurance__bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insurance__glow {
  top: 30px;
  left: 12.21%;
  width: 73.28%;
  height: 96px;
  border-radius: 50%;
  background: var(--c-glow);
  filter: blur(12.5px);
}

.insurance__title {
  top: 42px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  color: var(--c-text);
  font-weight: var(--fw-extrabold);
  text-align: center;
  white-space: nowrap;
}

.insurance__title-1 {
  display: block;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
}

.insurance__title-em {
  color: var(--c-orange);
  font-size: 24px;
  font-weight: var(--fw-extrabold);
}

.insurance__title-2 {
  display: block;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0.03em;
}

.insurance__zero {
  top: 133.47px;
  left: calc(50% - 129.44px);
  width: 274.94px;
}

.insurance__card {
  top: 387px;
  left: 6.11%;
  width: 88.04%;
  height: 108px;
  border-radius: var(--r-xl);
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.insurance__card > * {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
}

.insurance__card-marker {
  top: 48px;
  left: 50%;
  right: auto;
  width: 283px;
  height: 11px;
  transform: translateX(-50%);
  background: var(--c-marker-soft);
}

.insurance__card-1 { top: 12px; font-size: 16px; line-height: 24px; }
.insurance__card-2 { top: 27px; font-size: 16px; line-height: 37px; }
.insurance__card-3 { top: 64px; font-size: 16px; line-height: 37px; }

.insurance__card-num,
.insurance__card-yen {
  color: var(--c-red);
}

.insurance__card-num { font-size: 32px; }
.insurance__card-yen { font-size: 24px; }

.insurance__notes {
  top: 505px;
  left: 6.11%;
  width: 88.04%;
  min-height: 71px; /* 360px 端末では3行になるため高さを固定しない */
  padding: 12px 9px 5px 16px; /* Figma の文字枠（321px）が右の余白にはみ出している分を詰める */
  border-radius: var(--r-xl);
  background: var(--c-bg-ins-note);
  color: var(--c-text);
  font-size: 10px;
  line-height: 17px;
  letter-spacing: -0.04em;
  list-style: disc;
}

.insurance__notes li {
  margin-left: 15px;
}

/* ================================================================
   ご安心のサポート内容（Section 7 / 175:624）
   ================================================================ */

.support {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 35px 0 29px;
  background: var(--c-bg-support);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.support__title {
  display: flex;
  align-items: center;
  height: 39px;
  margin-right: 12px;
  color: var(--c-orange);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 36px;
}

.support__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 89.06%;   /* 350 / 393 */
  margin-top: 37px;
}

.support__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 10px;
  border-radius: var(--r-3xl);
  background: linear-gradient(84.39deg, var(--c-orange) 1.31%, var(--c-orange-grad-end) 99.51%);
  filter: drop-shadow(var(--shadow-card));
  color: var(--c-text-inverse);
}

.support__card-label {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 4px 0;
  font-size: 18px;
  line-height: 24px;
}

.support__card-label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-3xl);
  background: var(--c-band);
  filter: blur(17.75px);
}

.support__card-value {
  color: var(--c-yellow);
  font-size: 32px;
  line-height: 42px;
}

.support__card-value--sm {
  font-size: 28px;
  line-height: 36px;
  white-space: nowrap;
}

.support__card-note {
  font-size: 18px;
  line-height: 24px;
}

.support__pay {
  width: 89.82%;   /* 353 / 393 */
  margin-top: 25px;
}

/* ================================================================
   お客様の声（Section 8 / 175:638）
   ================================================================ */

.voice {
  padding: 42px 0 42px;
  background: var(--c-bg);
}

.voice__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: var(--fw-semibold);
  text-align: center;
}

.voice__title {
  color: var(--c-orange);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 36px;
  padding-top: 1.5px;
  height: 39px;
}

.voice__lead {
  color: var(--c-text);
  font-size: 13px;
  line-height: 19px;
}

.voice__list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 22px;
  padding: 0 4.58%;
}

/* カード背景は ::before で描き、figcaption（上）と blockquote（下）を重ねる */
.voice__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  margin-right: 8px;
  isolation: isolate;
}

.voice__item::before {
  content: "";
  min-height: 95px; /* Figma のカード高さ（最小95px） */
  grid-column: 2;
  grid-row: 1 / 3;
  z-index: -1;
  border: 1px solid var(--c-border-review);
  border-radius: var(--r-2xl);
  background: var(--c-bg-review);
}

.voice__photo {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
}

.voice__meta,
.voice__body {
  grid-column: 2;
}

.voice__meta {
  grid-row: 1;
  margin: 12px 16px 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-orange-badge);
  color: var(--c-text-inverse);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 13.8px;
  white-space: pre-wrap;
}

.voice__body {
  grid-row: 2;
  margin: 7px 16px 12px;
  color: var(--c-text);
  font-size: 13px;
  line-height: 18.85px;
}

/* 偶数件目はアバターを右に置く（HTML構造は同一のまま） */
.voice__item:nth-child(even) {
  grid-template-columns: 1fr 64px;
}

.voice__item:nth-child(even)::before,
.voice__item:nth-child(even) .voice__meta,
.voice__item:nth-child(even) .voice__body {
  grid-column: 1;
}

.voice__item:nth-child(even) .voice__photo {
  grid-column: 2;
}

/* ================================================================
   よくある質問（Section 9 / 175:675）
   ================================================================ */

.faq {
  padding: 45px 6.11% 59px 6.87%;
  background: var(--c-orange-light);
}

.faq__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  color: var(--c-text-inverse);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 36px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 38px;
  padding: 5px 4px 5px 10px;
  background: var(--c-blue);
  color: var(--c-text-inverse);
  text-align: left;
}

.faq__q-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding-bottom: 2px;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-blue);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
}

.faq__q-text,
.faq__a p {
  word-break: keep-all;   /* HTML の <wbr>（文節の区切り）でだけ改行する */
  overflow-wrap: anywhere; /* 1文節が1行に収まらない場合の保険 */
}

.faq__q-text {
  flex: 1;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
}

.faq__a {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 3px 4px 5px 18px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  line-height: 19px;
}

.faq__a[hidden] {
  display: none;
}

/* ================================================================
   加盟店募集（Section 10 / 175:683 ＋ 199:326）
   ================================================================ */

.partner__heading img {
  width: 100%;
}

.partner__body {
  padding: 12px 20px;
  background: var(--c-bg-partner);
}

.partner__tel {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  height: 110px;
  padding: 0 16px 0 0; /* Figma は中央から 8px 左寄り */
  border: 2px solid var(--c-orange-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
}

.partner__tel-icon {
  flex-shrink: 0;
}

.partner__tel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 209px;
  line-height: 18px;
  white-space: nowrap;
}

.partner__tel-label {
  color: var(--c-text-sub);
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.partner__tel-number {
  color: var(--c-red-tel);
  font-family: var(--ff-tel);
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 38px;
}

.partner__tel-hours {
  color: var(--c-text-weak);
  font-size: 13px;
  text-align: center;
}

/* ================================================================
   Footer（Section 11 / 175:689）
   ================================================================ */

.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 0 calc(var(--sticky-cta-space) + env(safe-area-inset-bottom));
  background: var(--c-bg-footer);
  color: var(--c-text);
  text-align: center;
}

.l-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  line-height: 19px;
}

.l-footer__copy {
  height: 25px;
  font-size: 11px;
  line-height: 19px;
}

/* ================================================================
   常時表示CTA（Figma component「CTA 2(下部に常時表示)」/ 175:694）
   ================================================================ */

.cta-sticky {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 100;
  width: 100%;
  max-width: var(--lp-max-width);
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

/* FV が画面にある間は隠す（ユーザー要望。main.js で切り替え。QUESTIONS.md §12） */
.cta-sticky.is-hidden {
  transform: translate(-50%, 100%);
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cta-sticky {
    transition: none;
  }
}

.cta-sticky__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-sticky__bubble {
  position: relative;
  z-index: 2;
  transform-origin: 50% 100%; /* 吹き出しの先（下向きの三角）を起点に拡大・縮小する */
  animation: cta-pulse 1.6s ease-in-out infinite;
  display: flex;
  align-items: flex-start;
  width: 239px;
  height: 42.2px;
  margin-bottom: -7px;
  padding: 4px 23px;
  background: url("../img/common/cta-sticky-bubble.svg") center / 100% 100% no-repeat;
}

.cta-sticky__bubble-text {
  width: 168px;
  color: var(--c-text);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 23px;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.cta-sticky__bubble-num,
.cta-sticky__bubble-unit {
  color: var(--c-red-strong);
}

.cta-sticky__bubble-num {
  font-size: 24px;
  line-height: 15px;
}

.cta-sticky__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* 下の余白は Figma どおり 14px。iOS ではホームバーの線（下端から約 8〜13px）が白いパネルに被らないよう 22px にする。
     env(safe-area-inset-bottom) は Safari のツールバーの出し入れで値が変わり、開いた直後だけ縦長になるため使わない */
  --sticky-pad-bottom: 14px;
  height: calc(131px + var(--sticky-pad-bottom));
  padding: 10px 7px var(--sticky-pad-bottom);
  border-radius: var(--r-xl) var(--r-xl) 0 0; /* 画面下端に接するため下の角は丸めない */
  background: linear-gradient(87.95deg, var(--c-green-start-2) 0.68%, var(--c-green-end) 99.55%);
  box-shadow: var(--shadow-drop);
}

/* iOS（Safari・Chrome とも WebKit）だけに当たる判定 */
@supports (-webkit-touch-callout: none) {
  .cta-sticky__body {
    --sticky-pad-bottom: 22px;
  }
}

.cta-sticky__glow {
  position: absolute;
  top: 24.65px;
  left: 5.25%;
  right: 3.87%;
  height: 64.3px;
  background: var(--c-cta-glow);
  filter: blur(8.8px);
}

.cta-sticky__notice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-weight: var(--fw-extrabold);
  line-height: 15px;
  white-space: nowrap;
}

.cta-sticky__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 111px;
  height: 25px;
  padding: 0 4px 0 5px;
  border-radius: 21px;
  background: var(--c-bg);
  color: var(--c-green-chip);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.cta-sticky__hours {
  color: var(--c-text-inverse);
  font-size: 18px;
  letter-spacing: 0.04em;
}

.cta-sticky__panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 91px;
  padding: 11px 9px 6px;
  border-radius: var(--r-xl);
  background: var(--c-bg);
  box-shadow: var(--shadow-drop);
}

.cta-sticky__icon {
  flex-shrink: 0;
  margin: 32px 4px 0 0;
  filter: drop-shadow(var(--shadow-card));
}

.cta-sticky__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto; /* アイコンと番号をひとまとまりで中央に寄せる（横幅いっぱいにしても間延びさせない） */
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.cta-sticky__prompt {
  height: 23px;
  color: var(--c-orange);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
}

.cta-sticky__number {
  display: flex;
  align-items: center;
  height: 44px;
  color: var(--c-red-strong);
  font-family: var(--ff-tel);
  font-size: min(45px, 11.45vw); /* 360px 端末でも1行に収める */
  font-weight: var(--fw-bold);
  line-height: 24px;
  text-shadow: 0 0 1.9px var(--c-shadow);
}