@charset "UTF-8";

/* =========================================================
   岡山市の排水桝清掃LP / 配管洗浄 Kuu
   設計: SP 390px 1カラム。PCは420px幅のカラムを中央に置く。
   数値はFigma「LPワイヤー｜SP 390」(node 3:3) の実測値。
   ========================================================= */

/* ---------------------------------------------------------
   00. リセット
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

blockquote {
  padding: 0;
}

cite {
  font-style: normal;
}

/* ---------------------------------------------------------
   01. デザイントークン
   --------------------------------------------------------- */
:root {
  /* 文字サイズの基準単位。
     390px以上では 1px（＝Figmaの値そのまま）、
     389px以下では 100vw/390 に縮み、デザインの比率を保ったまま小さくなる。
     使い方: font-size: calc(30 * var(--u));  … Figmaの 30px */
  --u: min(1px, 0.25641vw);

  /* 色（Figmaの近似値を統合したもの。詳細はガイドライン 02） */
  --c-navy: #062f53;
  --c-orange: #ff7900;
  --c-orange-deep: #ff4d00;
  --c-orange-soft: #ff871a;
  --c-after: #ff8500;
  --c-blue: #009ddd;
  --c-blue-label: #007dbb;
  --c-blue-q: #0589bd;
  --c-blue-after: #00a3e5;
  --c-gray-label: #747c81;
  --c-gray-before: #858585;
  --c-text-sub: #555555;
  --c-footer: #677b8d;
  --c-line: #dce8f0;
  --c-bg-sky: #f0faff;
  --c-bg-sky-soft: #eaf8ff;
  --c-bg-bubble: #e4f6fc;
  --c-bg-cream: #fffde3;
  --c-bg-peach: #fff4e8;
  --c-bg-peach-deep: #fff0da;
  --c-white: #ffffff;
  --c-border-sky: #c7efff;
  --c-border-badge: #7ec5ff;
  --c-border-check: #7399a6;
  --c-border-voice: #8ddff0;

  /* CTA */
  --cta-green: linear-gradient(86.53deg, #00ac31 0.68%, #01c53c 99.55%);
  --cta-label: #fded00;
  --cta-text-green: #00932c;
  --cta-text-orange: #e16308;

  /* 価格 */
  --price-grad: linear-gradient(180deg, #ff8a00, #ff4d00);

  /* FV / 最終CTA の背景グラデーション */
  --grad-fv: linear-gradient(180deg, #ffffff 0%, #f2fbff 45%, #fffde8 72%, #fff9c0 100%);
  --grad-contact: linear-gradient(180deg, rgba(213, 241, 250, 0) 0%, #f2fbff 45%, #fffde8 72%, #fff9c0 100%);

  --radius-card: 20px;
  --radius-pill: 999px;

  --font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  --font-num: "Roboto", var(--font-base);
  --font-price: "Roboto Condensed", "Roboto", var(--font-base);
}

/* ---------------------------------------------------------
   02. ページの土台
     〜389px : 全幅。幅は流動、文字は --u で比率どおり縮小
     390〜767: 全幅。中身は390pxで中央寄せ、背景はセクションごとに全幅
     768px〜 : 420px幅のカラムを中央に置き、外側をグレーに
   --------------------------------------------------------- */
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-navy);
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: clip;
}

.l-page {
  position: relative;
  width: 100%;
  max-width: none;   /* SPは全幅。768px未満ではフレーム幅を効かせない */
  margin-inline: auto;
  background: var(--c-white);
  overflow-x: clip;
}

/* デスクトップ用の背景。<img> にしているのは読み込み完了を検知してフェードさせるため
   （CSSのbackground-imageはloadイベントを持たない） */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;            /* SPでは存在ごと消す */
  background: #f5f5f5;      /* 背景画像の最下行と同じ色。画像の下に継ぎ目なく続く */
  overflow: hidden;
}

/* cover で敷くと縦長の画面（タブレット縦など）で拡大されすぎ、
   左右のロゴ・メッセージが途中で切れる。幅に合わせて上から敷き、
   下は画像の最下行と同じ #F5F5F5 で埋める */
.page-bg__img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.page-bg.is-ready .page-bg__img {
  opacity: 1;
}

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

.l-section {
  position: relative;
  width: 100%;
}

.l-section__inner {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  body {
    background: #eaf4f9;
  }

  .l-page {
    max-width: 420px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.14);
  }
}

/* 背景画像は 1120px 以上でのみ表示する。
   画像内のロゴは右端29.4%、メッセージは左端71.5%にあり、中央420pxのフレームと
   重ならないために必要な幅が約1018px。余白20pxを見て1120pxをしきい値にしている。
   これ未満の幅では #EAF4F9 の単色になる */
@media (min-width: 1120px) {
  .page-bg {
    display: block;
  }
}

/* 区切りの曲線・斜めライン。前後セクションとのすき間を出さない */
.divider {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: -1px;
}

/* Figmaは行末の「、」をぶら下げるが、ぶら下げ（hanging-punctuation）は
   Chromeが未対応で1行増えてしまう。該当箇所だけ折り返しを止める。 */
.u-nowrap {
  white-space: nowrap;
}

.u-note {
  color: var(--c-text-sub);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

/* ---------------------------------------------------------
   03. CTA（LINEお問い合わせ）
   Figma: 362 × 93px。FVと最終CTAで同じものを2回使う。
   --------------------------------------------------------- */
.cta {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: 362px;
  aspect-ratio: 362 / 93;
  margin-inline: auto;
  text-decoration: none;
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
}

.cta__body {
  position: absolute;
  inset: 11.83% 0 0 0;
  border-radius: 15px;
  background: var(--cta-green);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* 内側のやわらかい光 */
.cta__body::before {
  content: "";
  position: absolute;
  inset: 21.51% 3.87% 36.56% 5.25%;
  background: rgba(238, 255, 246, 0.35);
  filter: blur(8.8px);
}

/* 黄色い下地。Figmaではテキストとは別レイヤーで、左右の位置も少し違う */
.cta__pill {
  position: absolute;
  z-index: 1;
  inset: 0 6.35% 73.12% 18.78%;
  border-radius: 7px;
  background: var(--cta-label);
}

/* テキストはFigmaのテキストボックスをそのまま使い、上揃え＋行送りで位置を決める
   （ボックス内で中央寄せすると、Figmaより下にずれる） */
.cta__label,
.cta__sub,
.cta__main {
  position: absolute;
  z-index: 2;
  display: block;
  text-align: center;
  white-space: nowrap;
}

.cta__label {
  inset: 5.38% 6.63% 75.27% 20.99%;
  color: var(--cta-text-green);
  font-size: calc(14 * var(--u));
  font-weight: 800;
  line-height: calc(15 * var(--u));
  letter-spacing: 0.04em;
}

.cta__sub {
  inset: 33.33% 8.01% 47.31% 19.61%;
  color: var(--cta-text-orange);
  font-size: calc(14 * var(--u));
  font-weight: 800;
  line-height: calc(15 * var(--u));
  letter-spacing: 0.04em;
}

.cta__main {
  inset: 58.06% 3.87% 2.15% 18.23%;
  color: var(--c-white);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  line-height: calc(24 * var(--u));
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* 白いバッジ＋LINEアイコン。アイコンはバッジ内中央ではなくFigmaの座標に合わせる */
.cta__icon {
  position: absolute;
  z-index: 2;
  inset: 15.05% 82.04% 4.3% 1.1%;
  background: url("../img/cta-badge.svg") no-repeat center / 100% 100%;
}

.cta__icon img {
  position: absolute;
  left: 13.11%;
  top: 25.33%;
  width: 67.2%;
  height: auto;
}

/* ---- 拡大パルス ---- */
@keyframes cta-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.cta.is-animating {
  animation: cta-pulse 1.6s ease-in-out infinite;
  will-change: transform;
}

/* 上下2つが同時に見えても揃いすぎないよう、下だけずらす */
.cta[data-cta="bottom"].is-animating {
  animation-delay: 0.6s;
}

.cta:active {
  animation: none;
  transform: scale(0.97);
  transition: transform 80ms;
}

@media (hover: hover) {
  .cta:hover {
    animation: none;
    transform: scale(1.04);
    transition: transform 180ms ease-out;
  }
}

.cta:focus-visible {
  outline: 3px solid var(--c-blue-q);
  outline-offset: 4px;
  border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta.is-animating {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   04. 共通パーツ（FV・最終CTAで使い回す）
   --------------------------------------------------------- */

/* 対応エリアバッジ */
.area-badge {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 282px;
  padding: 7px 0;
  border: 1.5px solid var(--c-border-badge);
  border-radius: 24px;
  background: var(--c-white);
  color: #063e62;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* Before / After */
.ba {
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 354px;
}

.ba__col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
}

.ba__label {
  display: flex;
  justify-content: center;
  width: calc(86 * var(--u));
  padding: 3px 0;
  border-radius: 15px;
  color: var(--c-white);
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}

.ba__label--before { background: var(--c-gray-label); }
.ba__label--after  { background: var(--c-after); }

.ba__photo {
  width: 100%;
  aspect-ratio: 171 / 140;
  border-radius: 16px;
  object-fit: cover;
}

/* FVのみ：Afterの右上に重ねる女性イラストと署名 */
.ba__woman {
  position: absolute;
  top: calc(-16 * var(--u));
  right: calc(-12 * var(--u));
  width: calc(111 * var(--u));
  height: auto;
  pointer-events: none;
}

/* 写真の右下、Before/Afterブロックの9px下（Figma y=416 / w=99） */
.ba__credit {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: calc(99 * var(--u));
  color: #063e62;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* 期限つきの価格見出し */
.deadline-lead {
  color: #063e62;
  font-size: calc(19 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.deadline-lead strong {
  color: #ff6801;
  font-size: calc(24 * var(--u));
  font-weight: 700;
}

/* 価格「8,800円〜」 */
.price {
  position: relative;
  width: calc(293.5 * var(--u));
  height: calc(125 * var(--u));
}

.price__hl {
  position: absolute;
  left: 0;
  top: calc(64.05 * var(--u));
  width: calc(293.5 * var(--u));
  height: calc(46.62 * var(--u));
  z-index: 0;
}

.price__num,
.price__unit {
  position: absolute;
  z-index: 1;
  background: var(--price-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* 白フチ（Figmaにない追加要素）。背面に同じ文字を敷き、-webkit-text-stroke の
   外側半分だけを見せる。background-clip:text の文字に直接strokeを掛けると
   グラデが塗られる範囲が削れて文字が中抜けになるため、複製レイヤーで行う。
   金色の影もこのレイヤーが持つ（白フチの外側に落とすため）。 */
.price__st {
  z-index: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--c-white);
  -webkit-text-fill-color: var(--c-white);
  /* 中心揃えなので外側は4px。固定pxだと390px未満で文字だけ縮んでフチが相対的に太るため --u に追従させる */
  -webkit-text-stroke: calc(8 * var(--u)) var(--c-white);
  paint-order: stroke fill;
  /* clipした文字にtext-shadowは効かないのでfilterで落とす */
  filter: drop-shadow(1.216px 2.027px 0 rgba(212, 159, 0, 0.7));
  -webkit-user-select: none;
  user-select: none;
}

.price__num {
  left: calc(12.32 * var(--u));
  top: calc(12 * var(--u));
  font-family: var(--font-price);
  font-size: calc(98.108 * var(--u));
  font-style: italic;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: calc(-2 * var(--u));
  font-stretch: 75%;
}

.price__num .price__comma {
  font-size: calc(36 * var(--u));
}

.price__unit {
  left: calc(218.32 * var(--u));
  top: calc(52 * var(--u));
  font-family: var(--font-base);
  font-size: calc(48.649 * var(--u));
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.18em;
}

.price__unit small {
  font-size: calc(36 * var(--u));
}

/* 注記（FV・最終CTA） */
.offer-notes {
  color: #063e62;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}

/* ---------------------------------------------------------
   05. 01｜FV
   --------------------------------------------------------- */
#fv {
  background: var(--grad-fv);
}

/* 注記はFigmaどおりセクション下端に接する（下の区切り曲線が余白を兼ねる）ため padding-bottom は 0 */
#fv .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 18px 0;
}

/* ブランドロゴ。Figma 63:124（アートボード直下・最前面）x=10 y=7 101×40 */
.fv__logo {
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(7 * var(--u));
  z-index: 3;
  width: calc(101 * var(--u));
  height: auto;
}

.fv__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.fv__title {
  width: 100%;
  font-size: 0;
}

.fv__title img {
  width: 100%;
  height: auto;
}

.fv__offer {
  position: relative;
  width: 100%;
  height: calc(151 * var(--u));
}

.fv__offer .deadline-lead {
  position: absolute;
  left: 1px;
  top: calc(10 * var(--u));
}

/* Figmaは top:26px だが、それだと数字の下端とCTAのすき間が7.5pxしかなく、
   リード側の24.8pxに対して詰まって見える。9px持ち上げて上下を約16pxに揃える */
.fv__offer .price {
  position: absolute;
  left: calc(23 * var(--u));
  top: calc(17 * var(--u));
}

/* CTAは左右18pxのpaddingより4pxずつ広い（Figma x=14, w=362） */
#fv .cta {
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: -20px -4px 0;
}

/* Figma x=32 / w=331（左右18pxのpaddingから内側へ14px・9px） */
.fv__notes {
  align-self: stretch;
  margin-top: -2px;
  margin-left: 14px;
  margin-right: 9px;
}

/* ---------------------------------------------------------
   06. 02｜清掃頻度
   --------------------------------------------------------- */
#frequency .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 40px 20px;
}

.freq__head {
  width: 100%;
  text-align: center;
  font-weight: 900;
  line-height: 1.45;
  color: #092f58;
}

.freq__head .freq__head-1 { display: block; font-size: calc(30 * var(--u)); }
.freq__head .freq__head-2 { display: block; margin-top: 4px; font-size: calc(24 * var(--u)); }
.freq__head .freq__head-3 { display: block; font-size: calc(48 * var(--u)); color: var(--c-orange); }

.freq__bubbles {
  display: flex;
  gap: 10px;
  width: 100%;
}

.freq__bubble {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 8px;
  border-radius: 24px;
  background: var(--c-bg-bubble);
  color: #092f58;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.freq__illust {
  width: calc(201 * var(--u));
  height: auto;
}

.freq__lead {
  width: 100%;
  color: #092f58;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.freq__guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 20px 16px;
  border-radius: 24px;
  background: var(--c-bg-peach);
}

.freq__guide-title {
  width: 100%;
  color: #092f58;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.freq__guide-title em {
  display: block;
  color: var(--c-orange);
  font-style: normal;
}

/* Figmaの「年に1回」行は高さ67pxの固定枠に中央寄せ */
.freq__guide-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: calc(67 * var(--u));
}

.freq__guide-icon {
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}

.freq__guide-count {
  color: var(--c-orange);
  font-size: calc(32 * var(--u));
  font-weight: 900;
  line-height: 1;
}

.freq__guide-count .num {
  font-family: var(--font-num);
  font-size: calc(64 * var(--u));
  font-weight: 900;
}

.freq__caution {
  width: 100%;
  font-size: calc(13 * var(--u));
  line-height: 1.45;
}

.freq__bridge {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 20px 14px;
  border-radius: 22px;
  background: var(--c-bg-sky-soft);
}

.freq__bridge-title {
  width: 100%;
  color: #092f58;
  font-size: calc(23 * var(--u));
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.freq__bridge-title em {
  color: var(--c-orange);
  font-style: normal;
}

.freq__bridge-pill {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
  border-radius: 35px;
  background: linear-gradient(180deg, #ffb51f, #ff6e00);
  color: var(--c-white);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   07. 03｜お客様の体験談
   --------------------------------------------------------- */
#voice .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 20px;
}

.voice__head {
  width: 100%;
  color: #062649;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.voice__head-1 { display: block; font-size: calc(22 * var(--u)); }
.voice__head-2 { display: block; font-size: calc(32 * var(--u)); color: #f57500; }

.voice__photo {
  width: 100%;
  aspect-ratio: 350 / 234;
  border-radius: 16px;
  object-fit: cover;
}

.voice__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 18px;
  border: 2px solid var(--c-border-voice);
  border-radius: 20px;
  background: var(--c-white);
  color: #062649;
}

.voice__card p {
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.55;
}

.voice__card cite {
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.55;
  text-align: right;
}

.voice__disclaimer {
  width: 100%;
  color: #062649;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.voice__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 14px;
  border-radius: 20px;
  background: var(--c-bg-peach-deep);
}

.voice__cta-text {
  width: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 1.55;
}

.voice__cta-1 { display: block; font-size: calc(22 * var(--u)); color: #062649; }
.voice__cta-2 { display: block; margin-top: 4px; font-size: calc(26 * var(--u)); color: #f57500; }
.voice__cta-3 { display: block; margin-top: 4px; font-size: calc(16 * var(--u)); color: #062649; }

.voice__cta-illust {
  width: calc(188 * var(--u));
  height: auto;
}

/* ---------------------------------------------------------
   08. 04｜お悩みチェック
   --------------------------------------------------------- */
#check {
  background: var(--c-bg-cream);
}

#check .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 16px;
}

.check__head {
  width: 100%;
  color: #083859;
  font-size: calc(27 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.check__head em {
  color: var(--c-orange-deep);
  font-size: calc(36 * var(--u));
  font-style: normal;
}

.check__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.check__item {
  display: flex;
  gap: 10px;
  padding: 16px 12px;
  border-radius: 16px;
  background: var(--c-white);
}

.check__box {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-border-check);
  border-radius: 5px;
}

.check__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 234px;
}

.check__no {
  font-family: var(--font-num);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange-soft);
}

.check__title {
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  color: #083859;
}

.check__text {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1.5;
  color: #083859;
}

.check__note {
  width: 100%;
  color: #083859;
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------------------
   09. 07｜施工事例
   --------------------------------------------------------- */
#cases {
  background: var(--c-bg-sky);
}

#cases .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 16px 40px;
}

.cases__head {
  width: 100%;
  color: #073563;
  font-size: calc(25 * var(--u));
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.cases__head em {
  color: #ff8100;
  font-style: normal;
}

.cases__lead {
  width: 100%;
  color: #073563;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

.cases__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.case {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 18px 12px 14px;
  border-radius: 22px;
  background: var(--c-white);
}

.case__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.case__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 24px;
  color: var(--c-white);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.55;
}

.case__label--before { background: var(--c-gray-before); }
.case__label--after  { background: var(--c-blue-after); }

.case__photo {
  width: 100%;
  aspect-ratio: 159 / 168;
  border-radius: 14px;
  object-fit: cover;
}

/* 白丸と矢印はFigmaでは別レイヤーでずれているので、1つの要素として写真の間に置く */
.case__arrow {
  position: absolute;
  left: 50%;
  top: 112px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--c-white);
}

.case__arrow img {
  width: 23px;
  height: 23px;
}

.cases__note {
  width: 100%;
}

/* ---------------------------------------------------------
   10. 08｜清掃範囲
   --------------------------------------------------------- */
#scope .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 16px 40px;
}

.scope__head {
  width: 100%;
  color: #073451;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.scope__head-1 { display: block; font-size: calc(25 * var(--u)); }
.scope__head-2 { display: block; font-size: calc(28 * var(--u)); }
.scope__head-2 em { color: var(--c-orange); font-style: normal; }

.scope__figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px 6px 10px;
  border-radius: 18px;
}

.scope__caption {
  width: 100%;
  color: var(--c-blue-label);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.scope__map {
  width: 100%;
  aspect-ratio: 346 / 146;
  border-radius: 10px;
  object-fit: cover;
}

.scope__lead {
  width: 100%;
  color: #073451;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.scope__note {
  width: 100%;
}

/* ---------------------------------------------------------
   11. 09｜対応実績と嬉しい口コミ
   --------------------------------------------------------- */
#results {
  background: var(--c-bg-sky);
}

#results .l-section__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 16px 40px;
}

/* 「50」の下に敷く黄色マーカー（Figma x=157 / 右端から40px） */
.results__marker {
  position: absolute;
  right: 40px;
  top: 110px;
  z-index: 0;
  width: calc(193 * var(--u));
  height: auto;
  pointer-events: none;
}

.results__lead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 20px 14px;
  border-radius: 22px;
}

.results__lead-1 {
  width: 100%;
  color: #062d50;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.55;
}

/* 大きな数字の行はFigmaで高さ固定＋縦中央。line-heightで行箱を膨らませない */
.results__lead-2 {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(56 * var(--u));
  color: #ff7200;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.results__lead-2 .num {
  font-size: calc(48 * var(--u));
}

.results__staff {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 20px 14px;
  border-radius: 22px;
  background: var(--c-white);
}

.results__staff-illust {
  flex: none;
  width: calc(108 * var(--u));
  height: auto;
}

.results__staff-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: #062d50;
  font-weight: 700;
  line-height: 1.55;
}

.results__staff-body .sm { font-size: calc(17 * var(--u)); }

.results__staff-count {
  display: flex;
  align-items: center;
  height: calc(49 * var(--u));
  color: #ff7200;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.results__staff-count .num { font-size: calc(40 * var(--u)); }

.results__reviews-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  color: #062d50;
  text-align: center;
}

.results__reviews-head h2 {
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.55;
}

.results__reviews-head h2 em {
  color: #ff7200;
  font-style: normal;
}

.results__reviews-head p {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1.55;
}

.review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border-radius: 20px;
  background: var(--c-white);
}

.review img {
  height: auto;
}

/* カードの高さはFigmaの実測値（画像サイズが3枚とも違うため個別指定） */
.review__01 { height: calc(191 * var(--u)); }
.review__02 { height: calc(210 * var(--u)); }
.review__03 { height: calc(199 * var(--u)); }

.review__01 img { width: calc(280 * var(--u)); }
.review__02 img { width: calc(306 * var(--u)); }
.review__03 img { width: calc(320 * var(--u)); }

.review figcaption {
  width: calc(310 * var(--u));
  max-width: 100%;
  color: #062d50;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.55;
  text-align: right;
}

/* ---------------------------------------------------------
   12. 10｜ご依頼の流れ
   --------------------------------------------------------- */
#flow .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 16px 40px;
}

.flow__head {
  width: 100%;
  color: var(--c-navy);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.flow__head em {
  color: #ff8100;
  font-style: normal;
}

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

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border: 1px solid var(--c-border-sky);
  border-radius: 20px;
  background: var(--c-white);
  overflow: hidden;
}

.step__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.55;
}

.step__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-navy);
  font-size: calc(19 * var(--u));
  font-weight: 700;
  line-height: 1.55;
}

/* 本文は右のイラストにかからない幅に抑える */
.step__text {
  width: calc(220 * var(--u));
  max-width: 100%;
  color: var(--c-navy);
  font-size: calc(15 * var(--u));
  font-weight: 400;
  line-height: 1.55;
}

.step--3 .step__text { width: calc(226 * var(--u)); }

/* イラストはカード右端からの距離で置く（カード幅が変わっても関係が崩れない） */
.step__illust {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.step--1 .step__illust { right: 27px; top: 44px; width: calc(80 * var(--u)); }
.step--2 .step__illust { right: 27px; top: 63px; width: calc(80 * var(--u)); }
.step--3 .step__illust { right: 16px; top: 30px; width: calc(84 * var(--u)); }
.step--4 .step__illust { right: 29px; top: 35px; width: calc(79 * var(--u)); }
.step--5 .step__illust { right: 30px; top: 31px; width: calc(92 * var(--u)); }

/* ---------------------------------------------------------
   13. 11｜よくある質問
   --------------------------------------------------------- */
#faq {
  background: var(--c-bg-sky);
}

#faq .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 16px 40px;
}

.faq__head {
  width: 100%;
  color: #062e52;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}

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

.faq__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px 12px;
  border-radius: 20px;
  background: var(--c-white);
}

.faq__row {
  display: flex;
  gap: 8px;
}

/* QとAの区切り（Figmaにはない追加要素）。.faq__item の gap 12px と合わせて上下12pxずつ */
.faq__row + .faq__row {
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}

.faq__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  /* line-height:1.65 だと行ボックス(34.65px)が丸(32px)より高く、中央寄せが効かずに
     Qの尻尾が丸の外へはみ出す。行ボックスを収めたうえで1px持ち上げてFigmaと揃える */
  padding-bottom: 1px;
  border-radius: 16px;
  color: var(--c-white);
  font-size: calc(21 * var(--u));
  font-weight: 700;
  line-height: 1;
}

.faq__mark--q { background: var(--c-blue-q); }
.faq__mark--a { background: var(--c-orange-soft); }

.faq__q {
  flex: 1 1 auto;
  min-width: 0;
  color: #062e52;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.65;
}

.faq__a {
  flex: 1 1 auto;
  min-width: 0;
  color: #062e52;
  font-size: calc(15 * var(--u));
  font-weight: 400;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   14. 13｜最終CTA
   --------------------------------------------------------- */
#contact {
  background: var(--grad-contact);
}

#contact .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 36px 14px 32px;
}

.contact__head {
  width: 100%;
  max-width: 354px;
  color: #053352;
  font-size: calc(25 * var(--u));
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.contact__offer {
  position: relative;
  width: 100%;
  max-width: 354px;
  height: calc(162 * var(--u));
}

.contact__offer .deadline-lead {
  position: absolute;
  left: calc(2 * var(--u));
  top: calc(6 * var(--u));
}

.contact__offer .price {
  position: absolute;
  left: calc(18 * var(--u));
  top: calc(22 * var(--u));
}

#contact .cta {
  margin-top: -20px;
}

/* Figma x=36（セクション左右paddingより22px内側） */
.contact__notes {
  align-self: stretch;
  margin-top: -5px;
  margin-left: 22px;
}

/* ---------------------------------------------------------
   15. 14｜フッター
   --------------------------------------------------------- */
.site-footer {
  position: relative;
  width: 100%;
  background: var(--c-white);
}

.site-footer .l-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 24px 28px;
}

.site-footer__logo {
  width: calc(196 * var(--u));
  height: auto;
}

.site-footer__tagline {
  width: 100%;
  color: #062b49;
  font-size: calc(14 * var(--u));
  line-height: 1.65;
  text-align: center;
}

.site-footer__nav {
  width: 100%;
}

.site-footer__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-bottom: 1px solid var(--c-line);
  color: #062b49;
  font-size: calc(14 * var(--u));
  line-height: 1.65;
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  text-decoration: underline;
}

.site-footer__copy {
  width: 100%;
  color: var(--c-footer);
  font-size: calc(11 * var(--u));
  line-height: 1.65;
  text-align: center;
}

/* ---------------------------------------------------------
   16. 下層ページ（運営者情報・プライバシーポリシー・404）
   --------------------------------------------------------- */
.page-doc .l-section__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 20px 48px;
}

.page-doc h1 {
  color: var(--c-navy);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
}

.page-doc h2 {
  margin-top: 12px;
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.page-doc p,
.page-doc li {
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.page-doc ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 1.2em;
  list-style: disc;
}

.page-doc dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-doc dt {
  color: var(--c-blue-label);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.page-doc dd {
  margin: 0;
  color: var(--c-navy);
  font-size: 15px;
  line-height: 1.75;
}

.page-doc .back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid var(--c-border-badge);
  border-radius: 24px;
  color: #063e62;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* 和文の折り返しを自然に（非対応環境では通常の折り返し）。
   LP本文はFigmaの行数と折り返し位置を正とするため適用しない。 */
.page-doc p,
.page-doc dd,
.page-doc li {
  word-break: auto-phrase;
}