@charset "utf-8";
/* ============================================================
   民泊清掃 Amazon ギフトカードキャンペーン LP
   Figma: 清掃キャンペーン LP / PC_FIX (31:1081) / SP_FIX (72:2431)
   デザイントークンは plays Design System の Variables に対応する。
   モバイルファースト。900px 以上で PC_FIX のレイアウトへ切り替える。
   ============================================================ */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* color — plays Design System / Variables */
  --brand-primary: #0f2541;
  --brand-primary-mid: #1a3658;
  --brand-accent: #2d7dd2;
  --brand-accent-dark: #1a5fa8;
  --brand-accent-light: #e8f0fb;
  --brand-cta: #e8432d;
  --neutral-white: #ffffff;
  --neutral-gray-200: #d8dfe9;
  --neutral-gray-300: #c4cdda;
  --neutral-gray-700: #3d4f66;
  --text-primary: #0f2541;
  --text-muted: #6b7a93;
  --border-default: #d8dfe9;
  --bg-default: #ffffff;

  /* radius */
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-full: 9999px;

  /* typography — plays / Typography = Mobile モード */
  --fs-heading-l: 24px;
  --lh-heading-l: 38px;
  --fs-heading-m: 22px;
  --lh-heading-m: 34px;
  --fs-heading-s: 24px;
  --lh-heading-s: 38px;
  --fs-body-l: 18px;
  --lh-body-l: 32px;
  --fs-body-m: 16px;
  --lh-body-m: 29px;
  --fs-body-s: 14px;
  --lh-body-s: 24px;

  --header-h: 76px;

  /* 版面スケール単位。Figma SP の版面 342px のときちょうど 1px になる。
     342px 未満の端末では等倍で縮み、「designed な改行」が保たれる。
     430px より広い帯では 1px 止まり（.wrap の上限で版面が固定されるため）。 */
  --u: 1px;

  --font-seed: "LINE Seed JP", "Noto Sans JP", system-ui, sans-serif;
  --font-noto: "Noto Sans JP", system-ui, sans-serif;

  /* CTA 面の塗り（Button / primary） */
  --cta-fill: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%), var(--brand-cta);
}

@media (min-width: 900px) {
  /* plays / Typography = Desktop モード */
  :root {
    --header-h: 77px;
    --fs-heading-l: 36px;
    --lh-heading-l: 56px;
    --fs-heading-m: 30px;
    --lh-heading-m: 48px;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font-seed);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-primary);
  background: var(--bg-default);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

h1, h2, h3, p, figure, dl, dd { margin: 0; }
/* 「余計な改行」対策。見出しは行長を均等化し、本文は最終行に1〜2文字だけ
   残る形を避ける（拓也 FB・2026-08-26）。未対応ブラウザでは無視される。 */
h1, h2, h3, .s5__block-head, .s4__panel-head, .s8__q-text, .offer__apply-head,
.sec-head__lead:not(.is-left), .s5__deflist .is-sub, .s4__table dd { text-wrap: balance; }
p, li, dd, dt { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand-accent-dark);
  outline-offset: 2px;
}

/* ---------- 3. 共通パーツ ---------- */
.sp-only { display: inline; }
br.sp-only { display: block; }
.pc-only { display: none; }

.wrap {
  width: 100%;
  /* タブレット幅でも SP レイアウトのまま中央に置く（拓也 FB・2026-08-26）。
     600px まで伸ばすと吹き出し・ヒーローのイラストが引き伸ばされて崩れる。 */
  max-width: 430px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 899px) {
  :root { --u: min(1px, calc((100vw - 48px) / 342)); }
}

/* Button / primary（CTA） */
.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  min-height: 48px;
  font-family: var(--font-seed);
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--neutral-white);
  text-decoration: none;
  background: var(--cta-fill);
  border: 0;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(.92); }
.btn:active { transform: translateY(1px); }
.btn__arrow { width: 16px; height: 16px; flex: none; }

@media (max-width: 899px) {
  .btn { padding: 12px calc(16 * var(--u)); font-size: calc(18 * var(--u)); }
}

/* CTA ブロック（リード文＋ボタン＋注記） */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.cta-block__lead {
  font-family: var(--font-noto);
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: 1.6;
  color: var(--brand-cta);
}
.cta-block__note {
  font-family: var(--font-noto);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--brand-primary);
}

/* セクション見出しブロック */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.sec-head__eyebrow {
  position: relative;
  padding-top: 8px;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--brand-primary);
}
.sec-head__dots {
  position: absolute;
  top: 4px;
  left: 28.7%;
  width: 58px;
  height: 4.55px;
}
.sec-head__title {
  font-size: calc(var(--fs-heading-l) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-l);
  letter-spacing: -.01em;
  color: var(--brand-primary);
}
.sec-head__lead.is-left { text-align: left; }
.sec-head__lead {
  max-width: 760px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-primary);
}

@media (min-width: 900px) {
  .sp-only, br.sp-only { display: none; }
  .pc-only { display: inline; }
  .wrap { max-width: 1440px; padding-inline: 120px; }
  .sec-head__dots { left: 42%; width: 76.5px; height: 6px; }
  .sec-head__eyebrow {
    font-size: var(--fs-heading-s);
    line-height: var(--lh-heading-s);
  }
  .sec-head__lead.is-left { text-align: center; }
}

/* ---------- 4. ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding: 16px calc(16 * var(--u));
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}
.site-header__logo { width: calc(70 * var(--u)); height: calc(17.85 * var(--u)); flex: none; }
.site-header__title {
  /* 明示的な <br> で2行に固定する。狭い端末では --u で縮めて3行化を防ぐ */
  flex: none;
  white-space: nowrap;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: calc(17 * var(--u));
  color: #063b71;
}
.site-header__cta {
  flex: none;
  padding: 8px calc(16 * var(--u));
  min-height: 44px;
  font-size: calc(14 * var(--u));
  line-height: 25px;
}
.site-header__cta .btn__arrow { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

@media (min-width: 900px) {
  .site-header__inner {
    max-width: 1440px;
    margin-inline: auto;
    padding: 16px 40px;
  }
  .site-header__brand { gap: 24px; }
  .site-header__logo { width: 120px; height: 31px; }
  .site-header__title { font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
  .site-header__title {
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
    white-space: nowrap;
  }
  .site-header__cta {
    padding: 8px 24px;
    min-height: 45px;
    font-size: var(--fs-body-m);
    line-height: 29px;
  }
}

/* ---------- 5. ヒーロー ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: 40px;
}
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--header-h));
  height: 1022px;
  background: #dbe7f5 url("../assets/hero-bg.webp") center top / cover no-repeat;
  z-index: -1;
}
.hero__inner { padding-top: 24px; }

/* 見出しブロック */
.hero__copy { position: relative; }
.hero__badgeline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.hero__house { width: calc(93 * var(--u)); height: calc(73.7 * var(--u)); flex: none; }
.hero__labels {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(12.4 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
}
/* 「民泊・簡易宿所オーナー / 運営者の方へ」ふきだし */
.hero__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: calc(8.2 * var(--u)) calc(12.4 * var(--u));
  font-size: calc(11.8 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--brand-accent-dark);
  background: var(--neutral-white);
  border-radius: 999px;
}
.hero__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/hero-pill.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
/* 「民泊清掃のご依頼」 */
.hero__kicker {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(4.6 * var(--u));
}
.hero__chips { display: flex; gap: calc(4.1 * var(--u)); }
.hero__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(33 * var(--u));
  height: calc(33 * var(--u));
  font-size: calc(21.6 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  color: var(--neutral-white);
  background: var(--brand-primary-mid);
}
.hero__kicker-tail {
  font-size: calc(25.7 * var(--u));
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--brand-primary-mid);
  white-space: nowrap;
}
.hero__kicker-tail .is-sm { font-size: calc(23.2 * var(--u)); }

/* H1 */
.hero__title {
  position: relative;
  isolation: isolate;
  margin-top: calc(2.3 * var(--u));
  /* Figma SP の版面は 354px（左右 -6px のはみ出し） */
  margin-inline: calc(-6 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--brand-primary-mid);
}
.hero__title .is-free {
  font-size: calc(50 * var(--u));
  letter-spacing: -.014em;
  color: var(--brand-cta);
}
/* 「無料」の下に敷くマーカー */
.hero__marker {
  position: absolute;
  left: calc(8 * var(--u));
  right: calc(8 * var(--u));
  top: 42.3%;
  height: calc(15 * var(--u));
  background: rgba(232, 67, 45, .2);
  z-index: -1;
}
.hero__lead {
  margin-top: 12px;
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--brand-primary-mid);
}

/* イラスト（女性＋¥0）とバッジ */
.hero__visual {
  position: relative;
  width: calc(100% + 48px);
  margin-inline: -24px;
  /* 高さを固定するとイラストだけが縦横比を失い、特典ボックスに食い込む */
  aspect-ratio: 390 / 382;
}
.hero__woman {
  position: absolute;
  left: 14.6%;
  top: 7.5%;
  width: 65.6%;
  height: auto;
}
.hero__yen0 {
  position: absolute;
  left: 5.1%;
  top: 4.8%;
  width: 24.5%;
  height: auto;
}
/* 「9月限定 Amazon ギフトカード プレゼント」丸バッジ */
.hero__badge {
  position: absolute;
  left: 68.4%;
  top: 3.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(131.665 * var(--u));
  height: calc(131.665 * var(--u));
  padding: calc(23.5 * var(--u)) calc(15.7 * var(--u)) calc(24.3 * var(--u)) calc(17.2 * var(--u));
  color: var(--neutral-white);
  text-align: center;
  background: var(--brand-cta);
  border: calc(3.1 * var(--u)) solid var(--neutral-white);
  border-radius: 50%;
  box-shadow: inset 0 0 calc(23.5 * var(--u)) rgba(255, 255, 255, .4);
  transform: rotate(7.71deg);
}
.hero__badge-top {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(2.8 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  line-height: 1.5;
}
.hero__badge-top::before,
.hero__badge-top::after {
  content: "";
  width: calc(2.1 * var(--u));
  height: calc(16.5 * var(--u));
  flex: none;
  background: currentColor;
}
.hero__badge-top::before { transform: rotate(-24.91deg); }
.hero__badge-top::after { transform: rotate(24.91deg); }
.hero__badge-main {
  white-space: nowrap;
  font-size: calc(16.1 * var(--u));
  font-weight: 800;
  line-height: 1.5;
}
.hero__badge-main .is-lg { font-size: calc(20.7 * var(--u)); }
.hero__badge-main .is-sm { font-size: calc(13.8 * var(--u)); }

@media (min-width: 900px) {
  .hero { padding-bottom: 119px; }
  .hero::before { height: 828px; }
  .hero__inner {
    position: relative;
    width: 900px;
    max-width: calc(100% - 48px);
    margin-inline: auto;
    padding-inline: 0;
    padding-top: 42px;
  }
  .hero__copy { width: 516px; }
  .hero__badgeline { gap: 6px; }
  .hero__house { width: 135.9px; height: 107.4px; }
  .hero__labels { gap: 18px; width: 365px; flex: none; }
  .hero__pill {
    padding: 12px 18px;
    font-size: 17.3px;
    line-height: 15px;
  }
  .hero__kicker { gap: 6.8px; }
  .hero__chips { gap: 6px; }
  .hero__chip { width: 48.1px; height: 48.1px; font-size: 31.5px; }
  .hero__kicker-tail { font-size: 37.6px; }
  .hero__kicker-tail .is-sm { font-size: 33.8px; }
  .hero__title { margin-top: 3.3px; margin-inline: 0; font-size: 52.6px; }
  .hero__title .is-free { font-size: 73.4px; }
  .hero__marker { left: 0; right: 0; top: 42.3%; height: 24px; }
  .hero__lead { margin-top: 12px; }

  .hero__visual {
    position: absolute;
    left: 553px;
    top: 25px;
    width: 438px;
    margin-inline: 0;
    height: 0;
  }
  .hero__woman { left: 12px; top: 50px; width: 357px; }
  .hero__yen0 { left: -10px; top: 62.8px; width: 95px; }
  .hero__badge { left: 271px; top: 10px; }
}

/* 900〜1081px：版面の外側マージンが 91px に満たず、Figma 座標のままだと
   イラストが画面右へはみ出す。右端基準へ寄せたうえで 20% 縮める。
   寄せるだけだと ¥0 が見出し「のご依頼」に 79px 重なって文字が読めなくなる
   （UI レビュー Graph・2026-08-27 実測）。バッジだけは逆スケールで
   Figma 指定の実寸 148px / 12.5・16.1・20.7・13.8px を維持する。 */
@media (min-width: 900px) and (max-width: 1081px) {
  .hero__visual {
    left: auto;
    right: -24px;
    transform: scale(.8);
    transform-origin: 100% 0;
  }
  .hero__badge { transform: rotate(7.71deg) scale(1.25); }
}

@media (max-width: 899px) {
  .hero__inner {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* ---------- 6. 特典ボックス ---------- */
.offer {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 40px 12px;
  background: var(--neutral-white);
  border: 4px solid var(--brand-primary-mid);
  border-radius: var(--rounded-xl);
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .25));
}
.offer__ribbon {
  position: absolute;
  white-space: nowrap;
  left: 50%;
  top: -29px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% + 8px);
  padding: 8px 24px;
  font-family: var(--font-noto);
  font-size: calc(18 * var(--u));
  font-weight: 900;
  line-height: 32px;
  color: var(--neutral-white);
  text-align: center;
  background: var(--brand-cta);
}
.offer__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.offer__card-img { width: 274px; max-width: 100%; height: auto; }
.offer__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.offer__amount-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.offer__brand {
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  color: var(--brand-accent-dark);
  white-space: nowrap;
}
.offer__brand .is-lg { font-size: calc(30 * var(--u)); }
.offer__figure {
  display: flex;
  align-items: center;
  gap: 8px;
}
.offer__figure-num {
  white-space: nowrap;
  font-size: calc(60 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  color: var(--brand-cta);
}
.offer__figure-unit {
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.1;
  color: var(--brand-cta);
}
.offer__tagline {
  margin-top: 8px;
  font-size: calc(18 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  color: var(--brand-primary-mid);
  text-align: center;
}
.offer__period {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-primary-mid);
  width: 100%;
}
.offer__period-key,
.offer__period-val {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(12 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 29px;
}
.offer__period-key {
  color: var(--neutral-white);
  background: var(--brand-primary-mid);
}
.offer__period-val { color: var(--brand-primary-mid); }
.offer__period-note {
  font-family: var(--font-noto);
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: var(--lh-body-s);
  color: var(--brand-primary);
}

/* お申し込み方法 */
.offer__apply {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--neutral-gray-200);
}
.offer__apply-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  font-size: calc(var(--fs-heading-s) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-s);
  color: var(--brand-primary-mid);
  white-space: nowrap;
}
.offer__apply-head::before,
.offer__apply-head::after {
  content: "";
  flex: 1 1 0;
  height: 2px;
  background: var(--neutral-gray-200);
}
.offer__apply-lead {
  font-family: var(--font-noto);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  /* pretty は効かず、320px と 900px で「さい。」が孤立していた */
  text-wrap: balance;
  line-height: 1.55;
  color: var(--brand-primary-mid);
  text-align: center;
}
.offer__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 24px;
  font-family: var(--font-noto);
  font-size: calc(28 * var(--u));
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--brand-cta);
  text-align: center;
  background: rgba(232, 67, 45, .1);
}
.offer__cta { margin-top: 32px; }

@media (min-width: 900px) {
  .offer {
    width: 900px;
    max-width: calc(100% - 48px);
    margin: 82px auto 0;
    padding: 76px;
  }
  .offer__ribbon {
    top: -33px;
    font-size: var(--fs-heading-s);
    line-height: 38px;
  }
  .offer__hero {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }
  .offer__amount { align-items: flex-start; }
  .offer__amount-row { flex-wrap: nowrap; gap: 16px; }
  .offer__brand { font-size: 24px; }
  .offer__figure-num { font-size: 75px; }
  .offer__figure-unit { font-size: 28px; }
  .offer__tagline { font-size: 24px; text-align: left; }
  .offer__period { flex-direction: row; width: auto; margin-top: 16px; }
  .offer__apply {
    gap: 40px;
    margin-top: 48px;
    padding-bottom: 48px;
  }
  .offer__apply-lead { font-size: 20px; line-height: 1.4; }
  .offer__code {
    width: auto;
    min-width: 365px;
    padding: 20px 80px;
    font-size: 36px;
    line-height: 56px;
  }
  .offer__cta { margin-top: 48px; }
  .offer__cta .cta-block__lead { font-size: 20px; line-height: 1.4; }
}

/* ---------- 7. S3 / 選ばれる理由 ---------- */
.s3 {
  padding-block: 40px;
  background: var(--brand-accent-light);
}
.s3__cards {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 56px;
}
.s3__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 24px;
  background: var(--neutral-white);
  border: 2px solid var(--brand-accent-dark);
  border-radius: var(--rounded-lg);
  filter: drop-shadow(0 0 12px rgba(17, 17, 17, .12));
}
.s3__seal {
  position: absolute;
  left: 50%;
  top: -32px;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
}
.s3__figure {
  position: relative;
  width: 180px;
  height: 180px;
  flex: none;
  overflow: hidden;
}
.s3__figure img { position: absolute; }
.s3__ico-bed { left: 6.3px; top: 35.3px; width: 136px; height: 136px; }
.s3__ico-spray { left: 86.3px; top: 38.3px; width: 83px; height: 83px; transform: scaleX(-1); }
.s3__ico-truck { left: 11px; top: 20.3px; width: 159px; height: 159px; }
.s3__ico-calendar { left: -7.3px; top: 33.3px; width: 119px; height: 119px; }
.s3__ico-sync { left: 113.7px; top: 62.3px; width: 69px; height: 69px; }
.s3__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  color: var(--text-primary);
}
.s3__card-title {
  font-size: calc(var(--fs-heading-s) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-s);
}
.s3__card-text {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}

@media (min-width: 900px) {
  .s3 { padding-block: 96px; }
  .s3__cards {
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
    margin-top: 64px;
  }
  .s3__card { flex: 1 1 0; min-width: 0; max-width: 480px; }
}

/* 900〜1199px：3カラムだとカード内容幅が 141〜241px しか取れず、24px 見出しが
   4〜10字/行、16px 本文が 8字/行まで潰れる（1000〜1059px では見出し最終行が
   「ル」1文字）。この帯は1カラム中央寄せにする。
   （UI レビュー Graph・2026-08-27 実測 → 拓也 FB で 1060 → 1199 へ拡張） */
@media (min-width: 900px) and (max-width: 1199px) {
  .s3__cards { flex-direction: column; align-items: center; gap: 56px; }
  .s3__card { flex: none; width: 100%; max-width: 480px; }
}

/* 1200px 以上の3カラム：カード見出しの designed な改行
   「予約カレンダーと連携した」は 24px で 283px 必要だが、内容幅がそれを満たすのは
   1350px 以上。足りない帯では見出しが3行に割れるため、カード幅に追随させて
   2行を保つ（拓也 FB・2026-08-27「ここ3行になっているのを2行にできる？」）。
   係数は逆算：fs ≦ 24px × 内容幅 ÷ 283px ＝ 0.0848 × 内容幅。
   cqw は container の **content box** 基準なので padding を引く必要はない。 */
@media (min-width: 1200px) {
  .s3__card { container-type: inline-size; }
  .s3__card-title { font-size: min(24px, 8.3cqw); }
}

/* ---------- 8. S5 / お見積もりの考え方 ---------- */
.s5 {
  position: relative;
  isolation: isolate;
  background: var(--brand-accent-light);
}
.s5::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/s5-pattern.png") left top / 24px 24px repeat;
  mix-blend-mode: overlay;
  z-index: -1;
}
.s5__band {
  padding: 32px 24px 40px;
  background: var(--brand-accent-dark);
}
.s5__band-inner {
  position: relative;
  width: 100%;
  max-width: 382px;
  margin-inline: auto;
}
.s5__worker {
  position: relative;
  width: calc(232 * var(--u));
  max-width: 100%;
  /* 絵の箱ではなく「人物の顔」を版面の中央に合わせる（拓也 FB・2026-08-27）。
     顔の中心はイラスト幅の約 54% にあるため、その差分だけ左へ寄せる。 */
  margin-inline: auto;
  transform: translateX(calc(-9.3 * var(--u)));
}
.s5__worker > img { width: 100%; height: auto; }
.s5__bubble {
  position: absolute;
  left: -13%;
  top: -2%;
  width: calc(108 * var(--u));
  height: calc(108 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-white);
  text-align: center;
  font-size: calc(18.3 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  background: url("../assets/s5-bubble.svg") center / 100% 100% no-repeat;
  transform: rotate(-13.52deg);
}
/* 直下の span だけ。子孫セレクタにすると入れ子の .s5__bubble-bang（!!）にも
   当たり、block 化で3行目に落ちたうえ rotate が二重にかかる */
.s5__bubble > span { display: block; transform: rotate(13.52deg); }
/* 吹き出しの三角。円の中心から見て右下 35.2° の縁に接する位置（Figma 実測） */
.s5__bubble-tail {
  position: absolute;
  left: 74.2%;
  top: 80.3%;
  width: 19.7%;
  height: auto;
  transform: rotate(141.03deg);
}
.s5__bubble-bang {
  font-size: calc(25 * var(--u));
  font-weight: 700;
  line-height: 1;
}
.s5__band-title {
  margin-top: 24px;
  font-size: calc(var(--fs-heading-l) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-l);
  letter-spacing: -.01em;
  color: var(--neutral-white);
}
.s5__band-lead {
  margin-top: 16px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--neutral-white);
}

.s5__card {
  width: calc(100% - 48px);
  max-width: 430px;
  margin: 40px auto 0;
  padding: 40px 24px;
  background: var(--neutral-white);
}
.s5__block + .s5__block { margin-top: 40px; }
.s5__block-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: calc(var(--fs-heading-s) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-s);
  color: var(--neutral-white);
  text-align: center;
  background: var(--brand-accent);
}
.s5__deflist { margin-top: 24px; }
.s5__deflist > div {
  padding: 16px;
  border-bottom: 1px solid var(--neutral-gray-300);
}
.s5__deflist > div:last-child { border-bottom: 0; }
.s5__deflist dt {
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--text-primary);
}
.s5__deflist dd {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--text-primary);
}
.s5__deflist dd .is-sub {
  display: block;
  font-size: 13px;
  line-height: 1.8;
}
.s5__checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding: 10px 16px;
}
.s5__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--brand-primary-mid);
}
.s5__checklist img { width: 24px; height: 24px; flex: none; margin-top: 4px; }
.s5__note {
  margin-top: 24px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--brand-primary);
}
.s5__note b { font-weight: 700; }
.s5__cta { margin-top: 48px; }

@media (min-width: 900px) {
  /* PC はイラストとテキストの2カラム。絶対配置だと 1280px 付近で
     イラストにテキストが重なるため、flex の左右レイアウトにしている
     （拓也 FB・2026-08-27）。下端は帯の底へぴったり付ける。 */
  .s5__band {
    position: relative;
    /* 左右 72px は吹き出しの逃げ幅。イラストの左へ約 68px はみ出すため、
       これより狭いと 900px 付近で画面外へ出る。1440px では Figma と同じ
       内側 166px（72 + 中央寄せの余り 94）になる。 */
    padding: 40px 72px 0;
  }
  .s5__band-inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(24px, 3vw, 48px);
    max-width: 1108px;
    margin-inline: auto;
  }
  .s5__worker {
    position: relative;
    flex: none;
    width: 283px;
    margin: 0;
    transform: none;
  }
  .s5__bubble {
    left: -54px;
    top: -45px;
    width: 132.4px;
    height: 132.4px;
    font-size: 22.4px;
  }
  .s5__text {
    flex: 0 1 674px;
    padding-bottom: 40px;
  }
  .s5__band-title { margin-top: 0; }

  .s5__card {
    width: 675px;
    max-width: calc(100% - 48px);
    margin-top: 0;
    padding: 80px 48px;
  }
  .s5__block + .s5__block { margin-top: 48px; }
  .s5__block-head { padding: 10px 16px; }
  .s5__deflist > div {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .s5__deflist dt { width: 90px; flex: none; }
  .s5__deflist dd { flex: 1 1 0; min-width: 0; }
  .s5__deflist.is-wide dt { width: 140px; }
  .s5__checklist li { white-space: nowrap; }
  .s5__checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 24px;
  }
  .s5__checklist li:last-child { grid-column: 1 / -1; }
  .s5__cta { margin-top: 64px; }
  .s5__cta .cta-block__lead { font-size: 20px; line-height: 1.4; }
}

/* ---------- 9. S4 / キャンペーン概要 ---------- */
.s4 {
  position: relative;
  isolation: isolate;
  padding-block: 40px;
  overflow: hidden;
}
.s4::before,
.s4::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.s4::before {
  background: url("../assets/s4-bg.webp") center / cover no-repeat;
}
.s4::after {
  background: linear-gradient(270deg, rgba(255, 165, 101, .8) 0%, rgba(243, 161, 150, .8) 50%, rgba(255, 119, 101, .8) 100%);
  mix-blend-mode: hard-light;
}
.s4__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
  /* 見出し系で唯一 --u を掛け忘れており、320〜360px で「開/催中」に割れて
     3行目が出ていた（UI レビュー Graph・2026-08-27 実測） */
  font-size: calc(var(--fs-heading-s) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-s);
  color: var(--brand-cta);
  text-align: center;
}
.s4__eyebrow::before,
.s4__eyebrow::after {
  content: "";
  width: 3px;
  height: 33.5px;
  flex: none;
  background: currentColor;
  border-radius: 2px;
}
.s4__eyebrow::before { transform: rotate(-19.91deg); }
.s4__eyebrow::after { transform: rotate(19.91deg); }
.s4__title {
  margin-top: 16px;
  font-family: var(--font-noto);
  font-size: calc(28 * var(--u));
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--brand-primary);
  text-align: center;
}
.s4__title .is-amount {
  font-size: calc(36 * var(--u));
  color: var(--brand-cta);
}
.s4__title .is-yen { color: var(--brand-cta); }

.s4__panel {
  width: 100%;
  max-width: 881px;
  margin: 32px auto 0;
}
.s4__panel-head {
  padding: 16px;
  font-size: calc(var(--fs-heading-m) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-m);
  color: var(--neutral-white);
  text-align: center;
  background: var(--brand-cta);
}
.s4__panel-body {
  padding: 24px 16px;
  background: var(--neutral-white);
}
.s4__table > div {
  padding: 20px 8px;
  border-bottom: 1px solid var(--border-default);
}
.s4__table dt {
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--brand-primary);
}
.s4__table dd {
  margin-top: 4px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-primary);
}
.s4__table .is-benefit {
  font-size: var(--fs-heading-s);
  font-weight: 700;
  line-height: var(--lh-heading-s);
  color: var(--brand-cta);
}
.s4__table .is-code {
  font-weight: 700;
  color: var(--brand-cta);
}
.s4__terms {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 8px 0;
  font-family: var(--font-noto);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .s4 { padding-block: 80px; }
  .s4__eyebrow { gap: 24px; white-space: nowrap; }
  .s4__title {
    font-size: 48px;
    line-height: 68px;
  }
  .s4__title .is-amount { font-size: 64px; }
  .s4__panel { margin-top: 48px; }
  .s4__panel-body { padding: 40px; }
  .s4__table > div {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 16px;
  }
  .s4__table dt { width: 150px; flex: none; }
  .s4__table dd { margin-top: 0; flex: 1 1 0; min-width: 0; }
  .s4__terms { padding: 24px 24px 0; }
}

/* 900〜1060px：48px のままだと2行目が段幅に4px 足りず「す」1文字が3行目に落ちる。
   .is-amount を 64px のまま残すと eyebrow と 4px 重なるため必ずセットで下げる。
   上の PC ブロックより後に置くこと（同一詳細度なので後勝ち）。 */
@media (min-width: 900px) and (max-width: 1060px) {
  .s4__title { font-size: 36px; line-height: 52px; }
  .s4__title .is-amount { font-size: 48px; }
}

/* ---------- 10. S7 / ご依頼の流れ ---------- */
.s7 {
  position: relative;
  isolation: isolate;
  padding-block: 40px;
  /* isolation: isolate で合成グループが閉じるため、
     mix-blend-mode の下地になる不透明な白をここで敷く。
     これがないと soft-light がほぼ素の黒として出る。 */
  background: var(--neutral-white);
}
.s7::before,
.s7::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.s7::before {
  z-index: -2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(26, 95, 168, .24) 50%, rgba(255, 255, 255, .24) 100%);
}
.s7::after {
  background: url("../assets/s7-pattern.png") left top / 8px 8px repeat;
  mix-blend-mode: soft-light;
}
.s7__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 640px;
  margin: 40px auto 0;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .04));
}
.s7__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--rounded-lg);
}
.s7__step-no {
  position: absolute;
  left: -18px;
  top: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--neutral-white);
  background: var(--brand-accent-dark);
  border-radius: var(--rounded-full);
}
.s7__step-icon { width: 48px; height: 48px; flex: none; }
.s7__step-title {
  font-size: calc(var(--fs-heading-s) * var(--u) / 1px);
  font-weight: 700;
  line-height: var(--lh-heading-s);
  color: var(--brand-primary);
}
.s7__step-text {
  margin-top: 4px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--text-muted);
}
.s7__step.is-gift { border: 2px solid var(--brand-cta); }
.s7__step.is-gift .s7__step-no {
  left: -19px;
  top: -19px;
  background: var(--brand-cta);
}

@media (min-width: 900px) {
  .s7 { padding-block: 96px; }
  .s7__steps { margin-top: 40px; }
  .s7__step { gap: 20px; padding: 24px 40px; }
}

/* ---------- 11. S8 / よくあるご質問 ---------- */
.s8 { padding-block: 40px; }
.s8__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 40px auto 0;
}
.s8__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--neutral-white);
  border: 1px solid var(--border-default);
  border-radius: var(--rounded-lg);
}
.s8__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.s8__q-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  font-family: var(--font-noto);
  font-size: var(--fs-body-s);
  font-weight: 900;
  line-height: 1;
  color: var(--brand-accent-dark);
  background: var(--brand-accent-light);
  border-radius: var(--rounded-full);
}
.s8__q-text {
  font-family: var(--font-noto);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--brand-primary);
}
.s8__rule {
  height: 1px;
  background: var(--border-default);
}
.s8__a {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--neutral-gray-700);
}

@media (min-width: 900px) {
  .s8 { padding-block: 80px; }
  .s8__list { gap: 16px; }
  .s8__item { gap: 16px; padding: 24px; }
  .s8__q { align-items: center; height: 32px; }
}

/* ---------- 12. S9 / 最終CTA ---------- */
.s9 {
  position: relative;
  isolation: isolate;
  padding-block: 48px;
  text-align: center;
  background: var(--brand-accent);
}
.s9::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/texture-diagonal.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  z-index: -1;
}
.s9__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.s9__figure {
  position: relative;
  width: 226px;
  height: 220px;
  flex: none;
}
.s9__figure img { position: absolute; }
.s9__circle { left: 6.1px; top: 0; width: 219.7px; height: 219.7px; }
.s9__illust { left: 0; top: 15.4px; width: 209px; height: 205px; }
.s9__title {
  font-size: var(--fs-heading-l);
  font-weight: 700;
  line-height: var(--lh-heading-l);
  letter-spacing: -.01em;
  color: var(--neutral-white);
}
.s9__lead {
  margin-top: 20px;
  font-family: var(--font-noto);
  font-size: var(--fs-body-l);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--neutral-white);
}
.s9__cta { margin-top: 24px; }
.s9__cta .cta-block__note { color: var(--neutral-white); }

@media (min-width: 900px) {
  .s9 { padding-block: 96px; text-align: left; }
  .s9__head {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }
  .s9__cta { margin-top: 20px; }
  .s9__cta .cta-block__note { width: 680px; max-width: 100%; }
}

/* ---------- 13. フッター ---------- */
.site-footer {
  padding: 32px 0;
  background: var(--brand-primary-mid);
  color: var(--neutral-white);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__logo { width: 120px; height: 31px; }
.site-footer__name {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}
.site-footer__addr {
  font-size: 12px;
  line-height: var(--lh-body-s);
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 16px;
  padding: 12px 40px;
  min-height: 48px;
  font-family: var(--font-noto);
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 25px;
  color: var(--neutral-white);
  text-decoration: none;
  background: linear-gradient(90deg, #1a5fa8 0%, #487fb9 100%);
  border-radius: 8px;
  transition: filter .15s ease;
}
.site-footer__link:hover { filter: brightness(1.08); }
.site-footer__link img { width: 12px; height: 12px; }
.site-footer__rule {
  height: 1px;
  margin: 24px 0;
  background: rgba(255, 255, 255, .1);
}
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}
.site-footer__copy {
  font-family: var(--font-noto);
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

@media (min-width: 900px) {
  .site-footer { padding: 64px 0 32px; }
  .site-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .site-footer__link { margin-top: 0; align-self: center; }
  .site-footer__rule { margin: 24px 0; }
}

/* ---------- 14. モーション設定の尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .site-footer__link { transition: none; }
}