@charset "utf-8";
/* ============================================================
   ナカミチロードサービス LP
   デザイン: Figma「ロードサービスLP」Page 2 / page/roadservice-mobile
   基準幅 390px / モバイルファースト
   ============================================================ */

:root{
  /* ブランド */
  --c-navy:#102f57; --c-blue:#1b63ad; --c-blue-mid:#246ab0;
  --c-blue-deep:#123f78; --c-blue-link:#195eab; --c-blue-label:#173f70;
  /* 赤 */
  --c-red:#ec1831; --c-red-vivid:#ed151b; --c-cta-from:#e65359;
  --c-cta-to:#ca3448; --c-badge-red:#c92e43;
  /* 黄 */
  --c-yellow:#fff36b; --c-yellow-mid:#ffe831; --c-yellow-pale:#fff470; --c-yellow-lt:#fff54a;
  /* 面・線 */
  --c-pale:#edf5fc; --c-line:#d5e3f1; --c-faq-bg:#f3f8fd;
  --c-faq-q:#e4effb; --c-faq-a:#edf4fc; --c-white:#fff;
  /* 文字 */
  --c-text:#111; --c-text-sub:#242b34; --c-text-body:#292929;
  /* 寸法 */
  --radius:8px; --pill:27px; --tap:44px;
  --page-w:min(100vw,480px);   /* ページの表示幅。デスクトップでは下の @media で狭める */
  --jp:"Noto Sans JP",system-ui,sans-serif;
  --num:"Roboto",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--jp); font-weight:400; color:var(--c-text);
  background:var(--c-pale); line-height:1.5;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:900}

/* 追従CTAぶんの余白は .page 側に持たせる。
   body に付けるとその範囲だけ白が途切れ、CTAが浮いて見えるため。 */
.page{
  max-width:var(--page-w);margin-inline:auto;background:var(--c-white);overflow:hidden;
  padding-bottom:calc(var(--page-w) * 188 / 390 + env(safe-area-inset-bottom));
}

/* ============ 共通 CTA ============ */
/* Figma CTA/電話相談 (234:745) 348x87。section/contact-cta と price-list の2か所で共有する。
   内部座標はFigmaの実測値。枠線が座標をずらさないよう、背景と枠は ::before に持たせている。 */
/* スクロールで視界に入ったら拡大しながら現れる */
.cta{
  position:relative;width:348px;height:87px;
  transform:scale(.86);opacity:0;
  transition:transform .65s cubic-bezier(.2,.85,.25,1),opacity .45s ease;
}
.cta-block.is-in .cta{transform:scale(1);opacity:1;animation:cta-pulse 1.6s ease-in-out .7s infinite}
/* 表示後はゆっくり拡大縮小を繰り返してタップを促す。transform は登場演出が使うので scale で動かす */
@keyframes cta-pulse{0%,100%{scale:1}50%{scale:1.04}}
.no-js .cta{transform:none;opacity:1}
.cta__btn{position:absolute;left:0;top:10px;width:348px;height:85px;display:block;text-decoration:none}
.cta__btn::before{
  content:"";position:absolute;inset:0;border-radius:27px;
  background:linear-gradient(to bottom,#e65359 10.884%,#ca3448 102.04%);
  box-shadow:0 0 0 3px var(--c-white),0 4px 4px rgba(0,0,0,.25);
}
/* 上辺のハイライト */
.cta__btn::after{
  content:"";position:absolute;top:7px;right:6px;bottom:32px;left:11px;border-radius:27px 27px 0 0;
  background:linear-gradient(179.6deg,rgba(255,255,255,.206) 17.751%,rgba(255,255,255,0) 97.687%);
}
.cta__btn-sub{
  position:absolute;top:17px;left:69px;right:35.1px;z-index:1;
  font-size:14px;font-weight:800;line-height:15px;letter-spacing:.56px;color:var(--c-white);text-align:center;
}
.cta__btn-num{
  position:absolute;top:44px;left:41px;right:25px;z-index:1;
  font-family:var(--num);font-weight:500;font-size:36px;line-height:24px;
  color:var(--c-white);text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.cta__arrow{position:absolute;left:313px;top:45px;width:22px;height:22px;z-index:1}
.cta__label{
  position:absolute;left:61px;top:-2px;width:252.29px;height:23.39px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-blue-label);border:1.5px solid var(--c-white);border-radius:7px;
  font-size:14px;font-weight:800;line-height:15px;letter-spacing:.56px;color:var(--c-white);
}
.cta__badge{position:absolute;left:-4px;top:0;width:59px;height:59px;z-index:3}
.cta__badge-bg{position:absolute;left:-3px;top:-3px;width:65px;height:65px;max-width:none}
.cta__badge em,.cta__badge strong,.cta__badge i{position:absolute;font-style:normal;text-align:center;line-height:15px}
.cta__badge em{top:7px;left:11.7px;right:11.3px;font-size:13px;font-weight:800;letter-spacing:.52px;color:var(--c-badge-red)}
.cta__badge strong{
  top:29px;left:8.7px;right:21.3px;font-family:var(--num);font-style:italic;font-weight:900;
  font-variation-settings:"wdth" 75;font-size:30px;letter-spacing:-1.5px;color:var(--c-badge-red);
}
.cta__badge i{top:32px;left:37px;right:7px;font-size:12px;font-weight:800;letter-spacing:.48px;color:var(--c-blue-label)}

/* ============ 01 HERO ============ */
/* Figma section/hero 236:527 は 390x700 の固定キャンバス。
   等倍で組んでからコンテナ幅に合わせて拡大縮小する。座標・寸法はすべてFigmaの実測値。
   Figma上端の白いバー(店名・営業時間, 高さ59px)はファーストビューを稼ぐため削除し、ステージを59px上へずらしている。
   スマホの最初の画面で直下のCTAボタン（上端から118px）まで見えるよう、ヒーローは 535(キャンバスpx)に詰めて固定する
   （393x662 の実機で確認した見た目に合わせた値）。
   画面の高さ(vh/svh)に連動させると、スクロールでツールバーが伸縮するたびにFVが伸び縮みするため使わない。
   料金は .hero__foot で下端に固定し、料金が人物の顔に重ならないよう背景写真は詰めた量の一定割合(--bg-lift)だけ上へずらす。 */
.hero{
  --u:calc(var(--page-w) / 390);   /* キャンバス1pxぶんの実寸 */
  --hero-h:calc(var(--u) * 535);
  --bg-lift:.6;
  position:relative;overflow:hidden;background:var(--c-white);container-type:inline-size;
  height:var(--hero-h);
}
.hero__stage{position:absolute;left:0;top:0;width:390px;height:700px;transform-origin:0 0;transform:scale(calc(100cqw/390px)) translateY(-59px)}
/* Figma上の位置(-16,-21)からバー分59pxを引いた(-16,-80)が基準。縮んだ量×--bg-lift だけ上へ */
.hero__bg{
  position:absolute;max-width:none;object-fit:cover;
  left:calc(var(--u) * -16);width:calc(var(--u) * 408);height:calc(var(--u) * 723);
  top:calc(var(--u) * -80 - (var(--u) * 641 - var(--hero-h)) * var(--bg-lift));
}
/* 見出し背後の青いぼかし。Figma 237:548 */
.hero__glow{position:absolute;left:-32px;top:126px;width:454px;height:163px;background:#124a86;opacity:.7;filter:blur(19px)}
.hero__title{position:absolute;left:0;top:58.78px;width:390px;height:67.3px;margin:0}
.hero__title::before{content:"";position:absolute;left:0;top:.22px;width:390px;height:76px;background:linear-gradient(to right,#093162,#2586db)}
.hero__title span{
  position:absolute;white-space:nowrap;line-height:1.15;font-weight:900;
  text-shadow:2.43px 3.24px 5.68px rgba(0,57,19,.7);
}
.hero__title-sm{left:15.19px;top:5.51px;font-size:20px;color:var(--c-white)}
.hero__title-lg{left:13px;top:30.22px;font-size:36px;letter-spacing:-2.03px;color:var(--c-yellow)}
/* 「お任せください！」は改行せず「緊急トラブル」の右に重なる。Figma 317:491 */
.hero__title-end{left:224px;top:44.22px;font-size:20px;color:var(--c-white)}
/* Figma 234:638。帯は回転・斜体・縦94%の変形が掛かっている */
.hero__band{position:absolute;left:15px;top:151px;display:flex;align-items:center;justify-content:center;width:178.94px;height:47.85px}
.hero__band span{
  display:flex;align-items:center;justify-content:center;
  width:169px;height:37.48px;padding:8px 25px 9px 27px;
  background:var(--c-blue-deep);color:var(--c-white);
  font-size:24px;font-weight:900;line-height:1;white-space:nowrap;
  text-shadow:0 4px 4.4px rgba(0,0,0,.52);
  transform:rotate(-4.01deg) skewX(-20.04deg) scaleY(.94);
  filter:drop-shadow(5px 5px 2px rgba(0,0,0,.25));
}
.hero__band em{font-family:var(--num);font-style:normal;font-weight:900;font-size:32px}
.hero__photo{position:absolute;left:6px;top:171px;width:378px;height:126px;max-width:none}
.hero__services{position:absolute;left:14px;top:271px;width:345px;height:117.62px;list-style:none}
.svc{position:absolute}
.svc--tire{left:0;top:12.38px;width:120px;height:105.24px}
.svc--battery{left:112px;top:10.58px;width:118px;height:107.03px}
.svc--tow{left:230px;top:0;width:115px;height:112.62px}
/* Figma service/tire-border は 104x104 に r=51 / stroke white 2px。
   borderだと box-sizing:border-box で画像が縮むため、外側に出る box-shadow で再現する。 */
.svc__img{position:absolute;width:100px;height:100px;border-radius:50%;object-fit:cover;background:var(--c-white);box-shadow:0 0 0 2px var(--c-white)}
.svc--tire .svc__img{left:20px;top:5.24px}
.svc--battery .svc__img{left:18px;top:7.03px}
.svc--tow .svc__img{left:14px;top:12.62px}
/* Figmaではラベルに白フチが入っている（codegenではストロークが落ちるため実レンダから確認） */
.svc__word{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  font-weight:900;line-height:1.15;white-space:nowrap;transform:rotate(-7deg);
  -webkit-text-stroke:4px var(--c-white);paint-order:stroke fill;
}
.svc__word--a{color:#090909}
.svc__word--b{color:var(--c-red-vivid)}
.svc--tire .svc__word--a{left:0;top:-9.76px;width:82.18px;height:31.6px;font-size:19.05px}
.svc--tire .svc__word--b{left:9.38px;top:10.52px;width:68.56px;height:32.86px;font-size:21.49px}
.svc--battery .svc__word--b{left:0;top:-10.97px;width:91.89px;height:31.81px;font-size:17.84px}
.svc--battery .svc__word--a{left:17.65px;top:11.84px;width:61.24px;height:29.03px;font-size:19.46px}
.svc--tow .svc__word--b{left:0;top:-9.38px;width:79.11px;height:31.22px;font-size:19.05px}
.svc--tow .svc__word--a{left:21.54px;top:14.77px;width:41.39px;height:26.59px;font-size:19.46px}
.hero__foot{position:absolute;left:0;bottom:0;width:390px;height:139px;transform-origin:0 100%;transform:scale(calc(100cqw/390px))}
.hero__price{position:absolute;left:65px;top:0;width:293.51px;height:125px}
.hero__price-label{
  position:absolute;left:15.32px;top:0;display:flex;align-items:flex-end;justify-content:center;
  /* 幅を固定すると、フォントによって（）が全角幅になったとき（iOSのヒラギノ等）に折り返すため、文字幅に合わせる */
  min-width:108px;white-space:nowrap;padding:.41px 8.11px 2.03px;border-radius:12.16px;
  background:var(--c-white);color:var(--c-blue-deep);font-size:12px;font-weight:900;line-height:1.15;
}
.hero__price-highlight{position:absolute;left:0;top:64.05px;width:293.51px;height:46.62px;max-width:none}
.hero__price-amount{position:absolute;left:12.32px;top:12px;display:flex;align-items:center;line-height:1.15;white-space:nowrap}
.hero__price-amount .num{
  font-family:var(--num);font-style:italic;font-weight:900;font-variation-settings:"wdth" 75;
  font-size:98.11px;letter-spacing:-2px;
  /* Figmaはグラデーション塗りだが、白フチ(-webkit-text-stroke)とbackground-clip:textは併用できない。
     またcolor:transparentだとtext-shadowが字面を透けて前面に見えるため、
     Figma実レンダの実測色に近い単色＋白フチ＋drop-shadowで再現する。 */
  color:#d8404f;
  -webkit-text-stroke:9px var(--c-white);paint-order:stroke fill;
  filter:drop-shadow(1.22px 2.03px 0 rgba(212,159,0,.7));
}
.hero__price-amount .comma{font-size:36px}
.hero__price-amount .unit{
  position:absolute;left:206px;top:40px;font-weight:900;color:#d8404f;
  -webkit-text-stroke:7px var(--c-white);paint-order:stroke fill;
  filter:drop-shadow(1.22px 2.03px 0 rgba(214,154,0,.7));
}
.hero__price-amount .yen{font-size:48.65px;letter-spacing:8.76px}
.hero__price-amount .kara{font-size:36px;letter-spacing:7.2px}

/* ============ 02 CTA block ============ */
/* Figma section/contact-cta 253:469 (390x133)。CTA本体は348px固定なので
   他セクションと同じく390pxキャンバスをコンテナ幅に合わせて拡大縮小する。 */
.cta-block{position:relative;overflow:hidden;background:var(--c-white);container-type:inline-size;aspect-ratio:390/133}
.cta-block__stage{
  position:absolute;left:0;top:0;width:390px;height:133px;transform-origin:0 0;transform:scale(calc(100cqw/390px));
  display:flex;justify-content:center;padding-top:16px;
}

/* ============ 03 estimate ============ */
/* Figma section/estimate-and-offer 263:491 (390x584)。
   3ブロック構成: 営業時間案内(y=6,279) / 料金バナー(y=285,55) / 価格比較(y=340,244)。
   金額はbackground-clip:textのため、影はtext-shadowではなくfilterで掛ける
   （透明な字面にtext-shadowを掛けると影が前面に出てグラデーションを覆うため）。 */
.estimate{position:relative;overflow:hidden;background:var(--c-white);container-type:inline-size;aspect-ratio:390/584}
.estimate__stage{position:absolute;left:0;top:0;width:390px;height:584px;transform-origin:0 0;transform:scale(calc(100cqw/390px))}

.estimate__intro{position:absolute;left:0;top:6px;width:390px;height:279px}
.estimate__highlight{position:absolute;left:20px;top:74.16px;width:278px;height:7px;background:var(--c-yellow-pale)}
.estimate__circle{position:absolute;left:224px;top:77px;width:190px;height:190px;max-width:none}
.estimate__lead{position:absolute;left:20px;top:25px;font-size:16px;font-weight:700;line-height:1.35;color:#222;white-space:nowrap}
.estimate__headline{position:absolute;left:20px;top:53px;display:flex;align-items:center;gap:4px;line-height:1.35;white-space:nowrap}
.estimate__headline strong{font-size:22px;font-weight:900;color:var(--c-blue-link);letter-spacing:-.5px}
.estimate__headline span{font-size:15px;font-weight:700;color:#222}
.estimate__rule{position:absolute;left:20px;top:94.16px;width:258px;height:2px;max-width:none}
.estimate__text{position:absolute;left:21px;top:120.16px;font-size:14px;font-weight:700;line-height:1.54;color:#222;white-space:nowrap}
.estimate__photo{position:absolute;left:240px;top:91.16px;width:135px;height:188px;object-fit:cover;object-position:top}

.estimate__banner{position:absolute;left:0;top:285px;width:390px;height:55px;background:var(--c-blue-mid)}
.estimate__banner-curve{position:absolute;left:0;top:0;width:390px;height:55px;max-width:none}
.estimate__banner-text{
  position:absolute;left:0;top:0;width:390px;height:55px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:25px;font-weight:900;line-height:1.35;color:var(--c-white);white-space:nowrap;
}
.estimate__banner-text span{font-size:22px;color:var(--c-yellow-mid)}

.estimate__price{position:absolute;left:0;top:340px;width:390px;height:244px;background:#edf5fc}
.estimate__waves{position:absolute;left:0;top:0;width:390px;height:244px;max-width:none}
.estimate__free{position:absolute;left:65px;top:32px;display:flex;align-items:center;gap:15px}
.estimate__free-label{
  flex:none;display:flex;align-items:center;justify-content:center;width:151px;height:32px;
  background:var(--c-white);border-radius:20px;font-size:18px;font-weight:900;line-height:1.35;color:var(--c-blue-link);
}
.estimate__free-value{font-size:36px;font-weight:900;line-height:1.35;color:var(--c-navy);letter-spacing:4.32px}
.estimate__badge{position:absolute;left:17px;top:121px;width:80px;height:80px}
.estimate__basic-label{
  position:absolute;left:57px;top:147px;width:64px;height:46px;transform:translateX(-50%);
  text-align:center;color:var(--c-white);font-weight:700;font-size:15px;line-height:1.15;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
.estimate__basic-label small{display:block;font-size:12px;line-height:1.52}
.estimate__underline{position:absolute;left:87px;top:176px;width:270px;height:20px;max-width:none}
/* Figmaの数字には白フチが入っているが get_design_context には出てこない（ストロークが落ちる）。
   白フチと background-clip:text は併用できないため、ヒーローと同じく単色で塗る。 */
.estimate__amount{
  position:absolute;left:102px;top:101px;white-space:nowrap;
  font-family:var(--num);font-style:italic;font-weight:900;font-variation-settings:"wdth" 75;
  font-size:91px;line-height:1.1;letter-spacing:-2px;color:#d8404f;
  -webkit-text-stroke:8px var(--c-white);paint-order:stroke fill;
  filter:drop-shadow(0 2px 3px rgba(229,107,38,.22));
}
.estimate__amount .comma{font-size:36px}
.estimate__unit{
  position:absolute;left:282px;top:138px;white-space:nowrap;font-weight:900;line-height:1.35;color:#d8404f;
  -webkit-text-stroke:6px var(--c-white);paint-order:stroke fill;
}
.estimate__unit .yen{font-size:42px}
.estimate__unit .kara{font-size:32px}

/* ============ 04/12 payment ============ */
.payment{background:var(--c-white);padding:38px 24px;text-align:center}
.payment__en{font-size:19px;font-weight:700;color:var(--c-blue-mid);line-height:1.45}
.payment__title{font-size:24px;font-weight:900;color:var(--c-text);line-height:1.45;margin-top:8px}
.payment__group{margin-top:24px}
.payment__label{
  background:var(--c-blue-mid);color:var(--c-white);border-radius:30px;padding:4px;
  font-size:19px;font-weight:700;line-height:1.45;
}
.payment__logos{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}
.payment__logos img{height:auto;max-height:38px;width:auto;object-fit:contain}
.payment__logos--qr{justify-content:center}
.payment__logos--qr img{max-height:56px}
.payment__cash{margin-top:24px;font-size:16px;font-weight:700;color:var(--c-text);line-height:1.45}

/* ============ 05 pricing（アコーディオン） ============ */
.pricing{background:var(--c-pale);padding:36px 16px;display:flex;flex-direction:column;gap:16px}
.pricing__heading{text-align:center}
.pricing__title{font-size:26px;font-weight:700;color:var(--c-blue);line-height:1.5}
.pricing__tax{font-size:11px;color:var(--c-navy);line-height:1.5}
.pricing__toggle{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;padding-inline:16px;
  background:var(--c-white);border:2px solid var(--c-blue);border-radius:var(--radius);
  color:var(--c-blue);font-weight:700;font-size:17px;-webkit-tap-highlight-color:transparent;
}
.pricing__toggle:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.pricing__toggle-icon{
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid currentColor;transition:transform .3s ease;
}
.pricing__toggle[aria-expanded="true"] .pricing__toggle-icon{transform:rotate(180deg)}
.pricing__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.pricing__panel-inner{overflow:hidden;display:flex;flex-direction:column;gap:16px}
.pricing__toggle[aria-expanded="true"] + .pricing__panel{grid-template-rows:1fr}
.no-js .pricing__toggle{display:none}
.no-js .pricing__panel{grid-template-rows:1fr}
.pricing__table{background:var(--c-white);border-radius:var(--radius);overflow:hidden}
.pricing__subhead{background:var(--c-blue);color:var(--c-white);font-size:14px;font-weight:700;text-align:center;padding:10px;line-height:1.5}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:8px 14px;border-bottom:1px solid var(--c-line)}
.price-row__label{font-size:14px;font-weight:700;color:var(--c-navy);line-height:1.5}
.price-row__amount{font-family:var(--num);font-stretch:condensed;font-weight:900;font-size:24px;color:var(--c-blue);white-space:nowrap;line-height:1.5}
.price-row__amount--free{font-size:23px;color:var(--c-red);font-family:var(--jp)}
.price-row__unit{font-size:16px}
.pricing__note{padding:10px 14px 14px;font-size:11px;color:var(--c-navy);line-height:1.6;text-align:left}
.pricing__conditions{font-size:12px;color:var(--c-navy);line-height:1.5;text-align:center}

/* ============ 06 concerns ============ */
/* Figma section/concerns-and-benefits 267:472 (390x784)。
   灰色の掲示板は-3度、その中の写真と矢印は打ち消しで+3度傾けている。 */
.concerns{position:relative;overflow:hidden;background:var(--c-white);container-type:inline-size;aspect-ratio:390/784}
.concerns__stage{position:absolute;left:0;top:0;width:390px;height:784px;transform-origin:0 0;transform:scale(calc(100cqw/390px))}

.concerns__panel{position:absolute;left:0;top:0;width:390px;height:405px}
.concerns__board{
  position:absolute;left:21.47px;top:20.53px;width:355.77px;height:350.91px;
  background:#b8b9b8;border:4px solid #494b48;border-radius:16px;transform:rotate(-3deg);
}
.concerns__photo{position:absolute;left:-8.23px;top:130.86px;width:178px;height:220px;transform:rotate(-177deg) scaleY(-1)}
.concerns__arrow{position:absolute;left:293.49px;top:309.66px;width:58px;height:77px;transform:rotate(3deg)}
.concerns__title{
  position:absolute;left:195px;top:44px;width:374px;transform:translateX(-50%);
  font-size:22px;font-weight:900;line-height:1.45;color:#111;text-align:center;
}
.concerns__list{position:absolute;left:143px;top:117.16px;width:225px;display:flex;flex-direction:column;gap:12px;list-style:none}
.bubble{
  width:225px;padding:11px 10px 11px 13px;border-radius:12px;background:var(--c-white);
  font-size:16px;font-weight:900;line-height:1.4;color:#111;
}
.bubble em{font-style:normal;color:#ff7d00}
.bubble--dark{background:#292b29;border:1.5px solid #181a18;color:var(--c-white)}
.bubble--dark em{color:#ffe632}
.bubble--sm{font-size:14px}

.concerns__benefit{
  position:absolute;left:0;top:405px;width:390px;height:243px;padding-inline:10px;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.concerns__pair{display:flex;gap:8px;width:370px;height:126px}
.concerns__pair img{width:181px;height:126px;border-radius:10px;object-fit:cover}
.concerns__banner{position:relative;width:370px;height:105px}
.concerns__chevron{position:absolute;left:-12px;top:.16px;width:392px;height:124px;max-width:none}
.concerns__banner-sm{position:absolute;left:98px;top:11px;font-size:24px;font-weight:900;line-height:1.4;color:var(--c-white)}
.concerns__banner-lg{
  position:absolute;left:184px;top:46.16px;width:350px;transform:translateX(-50%);
  text-align:center;font-size:32px;font-weight:900;line-height:1.4;color:#fff236;letter-spacing:3.2px;
}
.concerns__end{
  position:absolute;left:36px;top:686.16px;width:313px;text-align:center;
  font-size:24px;font-weight:900;line-height:1.4;color:var(--c-blue-deep);
  -webkit-text-stroke:5px var(--c-white);paint-order:stroke fill;
}

/* ============ 07 troubles ============ */
/* Figma section/vehicle-troubles-fukuoka 279:472 (390x822)。
   背景は青の縦グラデーション。カードもアイコンも寸法が1点ずつ違うので個別に指定する。 */
.troubles{
  position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:390/822;
  background:linear-gradient(to bottom,#2a87d4,#165ca9);
}
.troubles__stage{
  position:absolute;left:0;top:0;width:390px;height:822px;transform-origin:0 0;transform:scale(calc(100cqw/390px));
  display:flex;flex-direction:column;align-items:center;gap:24px;padding:28px 12px;
}
.troubles__head{display:flex;flex-direction:column;align-items:center;gap:8px}
.troubles__area{
  width:254px;padding-block:6px;border-radius:4px;background:var(--c-blue-deep);
  font-size:21px;font-weight:900;line-height:1.45;color:var(--c-white);text-align:center;
}
.troubles__title{
  width:366px;height:30px;font-size:24px;font-weight:900;line-height:1.45;
  color:var(--c-white);text-align:center;text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.troubles__grid{display:flex;flex-wrap:wrap;gap:8px;width:364px;list-style:none}
.troubles__grid li{
  width:116px;height:122px;padding-block:18px;border-radius:12px;background:var(--c-white);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:900;line-height:1.45;color:#172c46;text-align:center;
}
/* Figmaで個別に違う値 */
.troubles__grid li:nth-child(2){font-size:12px}
.troubles__grid li:nth-child(5){gap:3px}
.troubles__grid li:nth-child(12){gap:14px}
/* アイコンはHTMLのwidth/heightがFigmaの表示寸法。CSSで潰さないこと */
.troubles__icon{display:block;flex:none}
.troubles__msg{
  width:366px;padding-block:16px;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(123.69deg,#529ae4 37.246%,#567ace 63.246%,#212da9 89.246%);
}
.troubles__msg-sm{width:346px;height:30px;font-size:16px;font-weight:900;line-height:1.45;color:var(--c-white)}
.troubles__msg-lg{width:346px;font-size:22px;font-weight:900;line-height:1.45;color:var(--c-yellow-lt)}

/* ============ 08 reasons ============ */
/* Figma section/staff-and-local-service 300:472 (390x1597)。
   01/02/03で数字のフォント・行送り・重ね代・gapが異なるため、ブロックごとに指定する。
   見出しの帯は回転後のバウンディングボックスを親に持たせて高さを確定させている。 */
/* 390pxキャンバスをコンテナ幅に合わせて拡大縮小する。
   帯や見出しが固定幅のため、これが無いと390px未満で内容がはみ出して切れる。 */
.reasons{position:relative;overflow:hidden;background:var(--c-white);container-type:inline-size;aspect-ratio:390/1597}
.reasons__stage{
  position:absolute;left:0;top:0;width:390px;height:1597px;transform-origin:0 0;transform:scale(calc(100cqw/390px));
  display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 0 57.2px;
}
.reason{display:flex;flex-direction:column;align-items:center;gap:12px}
.reason--03{gap:16px}
.reason__chev{width:38px;height:24px}
.reason__head{display:flex;flex-direction:column;align-items:flex-start;width:366px}
.reason__num{font-family:var(--num);font-weight:900;font-size:72px;color:#cbdff2;line-height:1.45;width:105px;margin-bottom:-12px}
.reason--03 .reason__num{font-family:inherit;line-height:1.5;width:104px;margin-bottom:-5px}
.reason__title{display:flex;flex-direction:column;align-items:flex-start}
.reason__row{display:flex;align-items:center;justify-content:center}
.reason__row>span{
  display:block;background:var(--c-blue);color:var(--c-white);
  font-weight:900;line-height:1.45;padding:3px 8px 3px 10px;transform:rotate(-3deg);
}
.reason--03 .reason__row>span{line-height:1.5}
.reason--01 .reason__row:first-child{width:272.62px;height:52.13px;margin-bottom:-12px}
.reason--01 .reason__row:first-child>span{width:271px;font-size:22px}
.reason--01 .reason__row:last-child{width:351.4px;height:54.27px}
.reason--01 .reason__row:last-child>span{width:350px;font-size:21px}
.reason--02 .reason__row:first-child{width:270.43px;height:52.02px;margin-bottom:-12px}
.reason--02 .reason__row:first-child>span{width:268.81px;font-size:22px}
.reason--02 .reason__row:last-child{width:315.61px;height:55.38px}
.reason--02 .reason__row:last-child>span{width:314px;font-size:23px}
.reason--03 .reason__row:first-child{width:269.67px;height:52.97px;margin-bottom:-5px}
.reason--03 .reason__row:first-child>span{width:268px;font-size:22px}
.reason--03 .reason__row:last-child{width:227.73px;height:50.77px}
.reason--03 .reason__row:last-child>span{width:226px;font-size:22px}
.reason__photo{width:348px;height:182px;object-fit:cover}
/* 01の写真だけ角丸が付いていない（Figmaの指定どおり） */
.reason--02 .reason__photo,.reason--03 .reason__photo{border-radius:16px}
.reason__text{font-size:16px;font-weight:500;color:#292929;line-height:1.45}
/* 幅はFigmaのテキストノード実測値。折り返し位置を合わせるために効く */
.reason--01 .reason__text{width:327px}
.reason--02 .reason__text{width:351px;line-height:1.5}
.reason--03 .reason__text{width:342px;line-height:1.5}

/* ============ 09 vehicles ============ */
/* Figma section/vehicle-types 321:469 (390x730)。
   カードに背景色は無い（Figma指定どおり）。車種名・画像・説明は
   カード内で個別のabsolute座標。上部に白い三角の切り込みが入る。 */
.vehicles{
  position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:390/730;
  background:linear-gradient(154.07deg,rgba(235,234,234,.7) 2.77%,rgba(194,194,194,0) 38.1%,
             rgba(169,169,169,.11) 74.34%,rgba(143,143,143,.21) 98.2%);
}
.vehicles__stage{
  position:absolute;left:0;top:0;width:390px;height:730px;transform-origin:0 0;transform:scale(calc(100cqw/390px));
  padding:100px 20px 36px;
}
.vehicles__notch{position:absolute;left:-33px;top:-15.84px;width:456px;height:60px;max-width:none;transform:rotate(180deg)}
.vehicles__title{
  width:130px;height:37px;margin-inline:auto;display:flex;align-items:center;justify-content:center;
  padding-bottom:1px;background:var(--c-blue);
  font-size:20px;font-weight:700;line-height:1.5;color:var(--c-white);text-align:center;
}
.vehicles__list{width:350px;height:557px;list-style:none}
.vcard{position:relative;width:350px;border-radius:14px}
.vcard--car{height:176px}
.vcard--truck{height:154px}
.vcard--bike{height:227px}
.vcard__name{position:absolute;width:150px;font-size:24px;font-weight:900;line-height:1.5;color:var(--c-blue-mid)}
.vcard__img{position:absolute;max-width:none}
.vcard__note{position:absolute;width:322px;font-size:14px;font-weight:700;line-height:1.65;color:#222}
/* 位置はFigmaの実測値（カード左上が原点） */
.vcard--car   .vcard__name{left:14px;top:57.16px}
.vcard--car   .vcard__img {left:167px;top:34.16px;width:169px;height:103px}
.vcard--car   .vcard__note{left:14px;top:111.16px}
.vcard--truck .vcard__name{left:14px;top:95.16px}
.vcard--truck .vcard__img {left:131px;top:26.16px;width:233px;height:138px}
.vcard--truck .vcard__note{left:16px;top:134px}
.vcard--bike  .vcard__name{left:15px;top:106.16px}
/* バイクのみ、文字との間隔を空けるため右へ寄せている（Figmaは left:177px）*/
.vcard--bike  .vcard__img {left:195px;top:64.16px;width:155px;height:118px}
.vcard--bike  .vcard__note{left:15px;top:152.16px}

/* ============ 10 flow ============ */
/* Figma section/request-flow 330:469 (390x1758)。390pxキャンバスとして組む。
   余白はFigmaのauto-layout gap: 写真→12→タグ→12→見出し→10→下線→14→本文 */
.flow{position:relative;overflow:hidden;background:var(--c-white);container-type:inline-size;aspect-ratio:390/1758}
.flow__stage{
  position:absolute;left:0;top:0;width:390px;height:1758px;transform-origin:0 0;transform:scale(calc(100cqw/390px));
  padding:36px 20px 0;
}
.flow__title{width:350px;height:48px;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--c-text);line-height:1.5}
.flow__title strong{font-weight:700;color:var(--c-blue)}
.flow__list{margin-top:28px;display:flex;flex-direction:column;gap:24px}
.step{position:relative;display:flex;gap:12px;align-items:flex-start}
/* ステップの高さはFigmaの実測値。中身より少し高く、下に余白が入る作りになっている */
.flow__list>li:nth-child(1){height:371px}
.flow__list>li:nth-child(2){height:379px}
.flow__list>li:nth-child(3){height:377px}
.flow__list>li:nth-child(4){height:400px}
.step__badge{
  flex:none;width:54px;height:54px;border-radius:27px;background:var(--c-blue);color:var(--c-white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:4px;
}
.step__badge span{width:100%;height:12px;font-size:8px;font-weight:700;line-height:1.5;text-align:center}
.step__badge strong{display:flex;align-items:center;justify-content:center;width:100%;height:19px;font-size:22px;font-weight:900;line-height:1.5}
/* 縦の導線。長さはFigmaの実測値（bottom基準だと次のステップまで届かない） */
.step::before{content:"";position:absolute;left:26.5px;top:54px;width:1px;background:#b5d0eb}
.flow__list>li:nth-child(1)::before{height:347px}
.flow__list>li:nth-child(2)::before{height:364px}
.flow__list>li:nth-child(3)::before{height:353px}
.step--last::before{content:none}
.step__body{width:284px;display:flex;flex-direction:column;align-items:flex-start}
.step__photo{width:264px;height:176px;object-fit:cover;border-radius:16px}
.step__tag{
  margin-top:12px;height:31px;display:flex;align-items:center;justify-content:center;padding-inline:7px;
  background:var(--c-blue);color:var(--c-white);font-size:18px;font-weight:900;line-height:1.5;
}
.step__lead{margin-top:12px;font-size:17px;font-weight:700;color:#111;line-height:1.5}
.step__lead strong{font-weight:700;color:var(--c-blue)}
.step__lead::after{content:"";display:block;width:28px;height:2px;background:var(--c-blue);margin-top:10px}
.step__text{margin-top:14px;font-size:14px;font-weight:400;color:#242b34;line-height:1.5}

/* ============ 11 faq ============ */
.faq{background:var(--c-faq-bg);padding:36px 16px}
.faq__title{font-size:23px;font-weight:700;text-align:center;color:#151915;line-height:1.5}
.faq__title strong{font-weight:700;color:var(--c-blue)}
.faq__list{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.faq__item{background:var(--c-white);padding:16px 12px 12px;filter:drop-shadow(0 4px 6px rgba(51,115,38,.09))}
.faq__q{display:flex;gap:10px;align-items:center}
.faq__q p{font-size:15.5px;font-weight:700;color:var(--c-blue);line-height:1.5}
.faq__q strong{font-weight:700;color:var(--c-blue)}
.badge{
  flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;line-height:1;
}
.badge--q{background:var(--c-faq-q);color:#195fa9}
.badge--a{background:linear-gradient(to bottom,#fea304 10%,#f74901 34%);color:var(--c-white)}
.faq__a{margin-top:14px;background:var(--c-faq-a);padding:12px 12px 14px}
.faq__a-head{display:flex;gap:10px;align-items:center}
.faq__a-head p{font-size:15.5px;font-weight:700;color:#195fa9;line-height:1.5}
.faq__a-detail{margin-top:8px;font-size:14px;font-weight:700;color:var(--c-text-sub);line-height:1.65}

/* ============ 13 footer ============ */
.footer{background:var(--c-white);padding:28px 20px 32px;text-align:center}
/* Figmaも縦並び（各行19px・ピッチ33pxなので間隔14px）*/
.footer__links{display:flex;flex-direction:column;gap:14px;font-size:14px;font-weight:700;color:var(--c-blue)}
.footer__links a:hover{text-decoration:underline}
.footer__company{margin-top:22px;text-align:left;font-size:13px;line-height:1.7;color:var(--c-text-sub)}
.footer__company > div{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--c-line)}
.footer__company dt{flex:none;width:92px;font-weight:700;color:var(--c-navy)}
.footer__company dt small{font-weight:400;font-size:11px}
.footer__company dd{flex:1;overflow-wrap:anywhere}
.footer__company a{color:var(--c-blue);font-weight:700}
.tel-link{color:var(--c-blue);font-weight:700}
.footer__copy{margin-top:20px;font-size:11px;color:var(--c-text-sub)}


/* ============ 下部固定CTA ============ */
/* Figma CTA 2(下部に常時表示) 340:839 (377x180.195)。
   390pxキャンバスとして組み、他セクションと同じ比率で拡大縮小する。
   枠線が内部座標をずらさないよう、背景と枠は ::before に持たせている。 */
/* 追従CTA: 初期は画面外に隠し、CTAセクションを通過したら下からせり上がる。
   JS無効時は常時表示（.no-js はinlineスクリプトで外れる）。 */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:var(--page-w);margin-inline:auto;
  container-type:inline-size;aspect-ratio:390/188;pointer-events:none;
  transform:translateY(105%);transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
.sticky.is-shown{transform:translateY(0)}
.no-js .sticky{transform:none}
.sticky__stage{
  position:absolute;left:0;top:0;width:390px;height:188px;
  transform-origin:0 0;transform:scale(calc(100cqw/390px));
}
/* Figmaでは Bubble が z-2、Button が z-1。吹き出しの尻尾がボタンに隠れないよう前面に置く */
/* Figmaの Bubble は padding:4px 23px の「上揃え」。下半分は尻尾の領域なので
   中央揃えにすると文字が沈む（実測で6px下にずれていた）。 */
.sticky__bubble{
  position:absolute;left:75.5px;top:0;width:239px;height:42.2px;z-index:2;
  display:flex;align-items:flex-start;padding:4px 23px;
  /* 尻尾がボタンに刺さったまま動かないよう、下辺中央を基点に拡縮する */
  transform-origin:50% 100%;
}
/* 冒頭CTAと同じ cta-pulse を使う。せり上がり(.5s)が終わってから始める */
.sticky.is-shown .sticky__bubble{animation:cta-pulse 1.6s ease-in-out .7s infinite}
/* Figmaの Bubble Content は212pxで、パディング領域(193px)をはみ出す作り。
   縮むとテキストが折り返して吹き出しの外へ出るため flex:none で固定する。 */
.sticky__bubble-inner{display:flex;align-items:center;width:212px;flex:none}
.sticky__bubble-bg{position:absolute;left:0;top:0;width:239px;height:42.2px;max-width:none}
.sticky__clock{position:relative;flex:none;width:22px;height:23px;object-fit:contain}
.sticky__lead{position:relative;flex:none;width:175px;white-space:nowrap;text-align:center;font-size:16px;font-weight:700;line-height:15px;letter-spacing:.64px;color:#181818}
.sticky__lead strong{font-size:24px;color:#d63e50}
.sticky__lead em{font-style:normal;color:#d63e50}
.sticky__btn{position:absolute;left:6.5px;top:35.2px;width:377px;height:145px;z-index:1;display:block;text-decoration:none;pointer-events:auto}
.sticky__btn::before{
  content:"";position:absolute;inset:0;border-radius:15px;
  background:linear-gradient(to bottom,#e65359 10.884%,#ca3448 102.04%);
  /* Figmaの白枠は枠の「外側」。borderだと内側に食い込んで赤が痩せるためリングで描く */
  box-shadow:0 0 0 3px var(--c-white),0 4px 4px rgba(0,0,0,.25);
}
/* 内側の淡い光。Figma BG Inner */
.sticky__btn::after{
  content:"";position:absolute;left:19.79px;top:24.65px;width:342.63px;height:64.3px;
  background:rgba(238,255,246,.35);filter:blur(8.8px);
}
.sticky__notice{position:absolute;left:16px;top:10px;width:345px;height:25px;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px}
.sticky__chip{
  flex:none;display:flex;align-items:center;justify-content:center;width:111px;height:25px;
  background:var(--c-blue-label);border-radius:21px;
  font-size:14px;font-weight:800;line-height:15px;letter-spacing:.56px;color:var(--c-white);
}
.sticky__hours{
  flex:none;width:229px;text-align:center;font-size:18px;font-weight:800;line-height:15px;
  letter-spacing:.72px;color:var(--c-white);text-shadow:1px 1px 2px rgba(0,0,0,.1);
}
.sticky__panel{
  position:absolute;left:7px;top:41px;width:363px;height:91px;z-index:1;
  background:var(--c-white);border-radius:15px;box-shadow:0 4px 4px rgba(0,0,0,.25);
}
.sticky__icon{position:absolute;left:9px;top:43px;width:33px;height:34px;filter:drop-shadow(0 4px 2px rgba(0,0,0,.25))}
.sticky__icon-bg{position:absolute;left:0;top:0;width:33px;height:34px;max-width:none}
.sticky__icon-call{position:absolute;left:5.75px;top:7.45px;width:21.78px;height:22.22px;transform:rotate(-98.88deg)}
.sticky__icon-s1{position:absolute;left:16.29px;top:10.26px;width:10.75px;height:3.17px;max-width:none;transform:rotate(45.69deg)}
.sticky__icon-s2{position:absolute;left:16.14px;top:12.48px;width:7.24px;height:2.39px;max-width:none;transform:rotate(45.69deg)}
.sticky__text{position:absolute;left:44px;top:11px;width:310px;display:flex;flex-direction:column;gap:5px;text-align:center}
.sticky__tap{height:23px;font-size:16px;font-weight:600;line-height:24px;color:#181818}
.sticky__tap strong{font-weight:600;color:var(--c-badge-red)}
.sticky__num{
  height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-weight:700;font-size:42px;line-height:24px;letter-spacing:.42px;
  color:#d63e50;text-shadow:0 0 1.9px rgba(0,0,0,.25);
}

/* ============ 480px超：左右の余白 ============ */
@media (min-width:481px){
  /* 幅を広げすぎるとヒーロー+CTA(キャンバス759px)が画面高さに収まらず、ヒーローが縮んで詰まって見える。
     縮まずに収まる幅(高さ×390/759)まで狭める。下限はFigmaの390px */
  :root{--page-w:clamp(390px, 100vh * 390 / 759, 480px)}
  /* 高さ759px未満の画面ではページ幅が下限390pxで止まり収まらないため、ヒーローを画面の高さに合わせて縮める。
     PCはスクロールで画面の高さが変わらないので、スマホと違い vh に連動させても伸び縮みしない */
  .hero{--hero-h:clamp(calc(var(--u) * 471), calc(100vh - var(--u) * 118), calc(var(--u) * 641))}
  body{background:#dfe9f4}
}

/* ============ 動きを抑える設定 ============ */
/* 後続ルールに上書きされないよう、必ずファイル末尾に置く */
@media (prefers-reduced-motion:reduce){
  .pricing__panel,.pricing__toggle-icon,.sticky,.cta{transition:none}
  .cta{transform:none;opacity:1}
  .cta-block.is-in .cta,.sticky.is-shown .sticky__bubble{animation:none}
}