:root {
  --color-accent: #e2531f;
  --color-ink: #000000;
  --font-body: 'Noto Sans JP', system-ui, sans-serif;
  --font-number: 'Lato', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  /* ヘッダーをposition: stickyで固定表示にしたため、#contact-formへの
     アンカー遷移時にヘッダーの高さ分オフセットして隠れないようにする */
  scroll-padding-top: 90px;

  @media (max-width: 900px) {
    scroll-padding-top: 8vw;
  }

  @media (max-width: 560px) {
    scroll-padding-top: 90px;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  font-feature-settings: "halt" 1;
}

section {
  min-height: 4rem;
}

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

/* Responsive display utilities: .-sp は560px以下(スマホ)でのみ表示、.-pc は
   561px以上(PC/タブレット)でのみ表示する。要素本来のdisplay値
   (block/flex/inline-blockなど)を尊重するため、非表示側の display: none
   のみを付け外しし、表示側の値は強制しない。 */
@media (min-width: 561px) {
  .-sp {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .-pc {
    display: none !important;
  }
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding-right: 30px;

  @media (max-width: 900px) {
    height: 8vw;
  }

  @media (max-width: 560px) {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 16px;
    height: auto;
  }
}

.site-header__logo {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 30px;

  @media (max-width: 560px) {
    padding: 0;
    height: auto;
  }
}

.site-header__logo img {
  width: clamp(240px, 18vw, 249px);
  /* 249/1920, floor matches the 900px mobile size */
  height: auto;
  aspect-ratio: 249 / 41;

  @media (max-width: 900px) {
    width: 240px;
    height: auto;
  }

  @media (max-width: 560px) {
    width: 40vw;
    height: auto;
  }
}

.site-header__contact {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.87vw, 16.76px);
  /* 16.76/1920 */
}

.site-header__phone {
  display: flex;
  align-items: center;
  gap: 8px;

  @media (max-width: 560px) {
    display: none;
  }
}

.site-header__phone-icon {
  margin-bottom: 1em;
  width: 36px;
  flex-shrink: 0;
}

.site-header__phone-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-header__phone-number {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(24px, 1.86vw, 35.75px);
  /* 35.75/1920, floor matches the 900px mobile size */
  letter-spacing: 0.89px;
  white-space: nowrap;

  @media (max-width: 900px) {
    font-size: 24px;
  }
}

.site-header__phone-hours {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.17px;
  align-self: center;
  white-space: nowrap;
}

.site-header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 5.59px;
  background: var(--color-accent);
  border-radius: 8px;
  padding: clamp(12px, 0.93vw, 17.87px) clamp(16px, 1.05vw, 20.11px);
  /* floors match the 900px mobile padding */
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(15px, 0.94vw, 18px);
  /* floor matches the 900px mobile size */
  letter-spacing: 0.9px;
  text-decoration: none;
  white-space: nowrap;

  @media (max-width: 900px) {
    width: auto;
    padding: 12px 16px;
    font-size: 15px;
  }

  @media (max-width: 560px) {
    padding: 8px 14px;
    font-size: 13px;
    gap: 4px;
  }
}

.site-header__cta img {
  width: 20.11px;
  height: 20.11px;

  @media (max-width: 560px) {
    width: 15px;
    height: 15px;
  }
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  background: url(../img/bg_mv.webp) no-repeat center top;
  background-size: cover;

  @media (max-width: 560px) {
    padding: 10vw 5vw 14vw;
    height: 120vw;
    background-image: url(../img/bg_mv_sp.webp);
    background-size: cover;
    background-position: center bottom -4vw;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__bg-blur {
  position: absolute;
  left: -35px;
  top: -292px;
  width: 1955px;
  height: 1304px;
  object-fit: cover;
  filter: blur(7.5px);
  transform: scaleX(-1);

  @media (max-width: 560px) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
}

.hero__bg-overlay-box {
  position: absolute;
  left: -888px;
  top: -920px;
  width: 2652.68px;
  height: 2008.39px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media (max-width: 560px) {
    display: none;
  }
}

.hero__bg-overlay {
  width: 2403.98px;
  height: 1602.85px;
  object-fit: cover;
  transform: rotate(-10.34deg);
  mix-blend-mode: screen;
}

.hero__gradient {
  position: absolute;
  left: 776.5px;
  top: -849px;
  width: 1920px;
  height: 569px;
  z-index: 1;

  @media (max-width: 560px) {
    display: none;
  }
}

.hero__people {
  position: absolute;
  right: 0.94vw;
  /* 18/1920 */
  bottom: -1px;
  width: 47.08vw;
  /* 904/1920 */
  max-width: 904px;
  height: auto;
  aspect-ratio: 904 / 755;
  object-fit: cover;
  z-index: 2;

  @media (max-width: 560px) {
    position: static;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 24px auto 0;
  }
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 50.47vw;
  /* 969/1920 */
  max-width: 969px;
  margin-left: 6.09vw;
  /* 117/1920 */
  /* min-height (not height): at desktop widths the heading stays on its two
     Figma-authored lines and fits comfortably within this proportional box,
     so min-height renders identically to a fixed height there. But once the
     heading's floored font-size (see .hero__heading-line) can no longer keep
     pace with this shrinking box at tablet widths, min-height lets the box
     grow to fit its content instead of clipping it against .hero's
     overflow: hidden. */
  min-height: calc(800 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;

  @media (max-width: 900px) {
    width: 54vw;
  }

  @media (max-width: 560px) {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    /* Stacked+centered content needs far more vertical room than the desktop
       proportional height (calc(800/1920*100vw)) provides — let it size to
       its own content instead so the heading/CTA never get clipped. */
    height: auto;
    align-items: center;
    gap: 24px;
  }
}

.hero__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__heading-line {
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  background: #ffffff;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(40px, 4.17vw, 80px);
  /* 80/1920 */
  line-height: 1.2;
  letter-spacing: 4px;
  color: var(--color-ink);

  @media (max-width: 900px) {
    white-space: normal;
    font-size: 3.6vw;
    /* 40/900、下限30pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: 7vw;
    /* 30/560、狭い端末側は22px(30pxの約75%)で下げ止まり */
    letter-spacing: 0;
  }
}

.hero__accent {
  color: var(--color-accent);
}

.hero__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(36/1920 * 100vw);
  line-height: 1.4;
  letter-spacing: 1.8px;
  color: #ffffff;

  @media (max-width: 900px) {
    font-size: 2vw;
    /* 20/900、狭い端末側は15px(20pxの75%)で下げ止まり */
  }

  @media (max-width: 560px) {
    font-size: 3vw;
  }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(640/1920 * 100vw);
  max-width: 100%;
  background: var(--color-accent);
  border-radius: 9.76px;
  padding: calc(24/1920 * 100vw) 0;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(36/1920 * 100vw);
  letter-spacing: 1.22px;
  text-decoration: none;

  /* デスクトップの font-size/padding は vw のみで下限が無く、900px以下では
     際限なく縮んでいた(320px幅で文字が6px相当になっていた)。.cta-banner__cta
     と同じ考え方でここにも下限を設ける(幅はタブレット幅ではPCと同じ比率の
     ままにするため、560px以下でのみ100%固定にする)。 */
  @media (max-width: 900px) {
    width: auto;
    padding: 16px 0;
    font-size: clamp(18px, 2.67vw, 24px);
    /* 24/900、狭い端末側は18px(24pxの75%)で下げ止まり */
  }

  @media (max-width: 560px) {
    width: 100%;
    max-width: 360px;
  }
}

.hero__cta img {
  width: 28.47px;
  height: auto;
}

/* Intro banner */

.intro-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 80px 24px 200px;
  background: linear-gradient(94.33deg, rgb(13, 76, 116) 0%, rgb(39, 117, 187) 99.999%);

  /* デスクトップの下200pxはカード下の装飾用の大きな余白で、モバイルでは
     そのまま間延びした空白になるため縮小する */
  @media (max-width: 900px) {
    padding: 48px 24px;
  }
}

.intro-banner__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: soft-light;
}

.intro-banner__bg-texture {
  position: absolute;
  left: 0;
  top: -52.66%;
  width: 100%;
  height: 165.03%;
  object-fit: cover;
}

.intro-banner__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 97px;
  width: 100%;
  max-width: 1490px;
  padding: 60px;
  background: #ffffff;
  border-radius: 32px;

  @media (max-width: 900px) {
    gap: 32px;
    padding: 32px 24px;
  }

  @media (max-width: 560px) {
    flex-direction: column;
    padding: 6vw;
  }
}

.intro-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2em;
  /* Shares the card's available width with .intro-banner__video in the same
     568:705 ratio as the Figma sizes, so both shrink together (never wrap)
     once the 1490px card itself no longer fits the viewport. Uses width (not
     the flex shorthand) so flex-basis stays 'auto' and doesn't leak into
     height once the 560px override switches this row to a column. */
  flex-grow: 0;
  flex-shrink: 1;
  width: 568px;
  max-width: 568px;
  /* Lets descendant font-sizes below be expressed in cqw, tracking this
     box's own rendered width (not the viewport) so text never outgrows it. */
  container-type: inline-size;

  @media (max-width: 560px) {
    width: 100%;
    gap: 8vw;
  }
}

.intro-banner__headline {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(6.34cqw, 36px);
  /* 36/568 — no floor needed, scales with the box itself */
  line-height: 1.4;
  letter-spacing: 1.8px;
  color: var(--color-ink);
  white-space: nowrap;

  /* No font-size override here: .intro-banner__text is itself a flex item
     that shrinks via flex-shrink at tablet widths (see its own comment), and
     since this cqw font-size already tracks that same container, it keeps
     scaling down in step automatically — a vw-based override here fought
     that and produced a floor too large for how narrow the text column
     actually gets, causing awkward mid-word wraps. */
  @media (max-width: 900px) {
    white-space: normal;
  }

  @media (max-width: 560px) {
    text-align: center;
    font-size: 4.2vw;
  }
}

.intro-banner__accent {
  color: var(--color-accent);
}

.intro-banner__network {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.intro-banner__network-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(3.52cqw, 20px);
  /* 20/568 — no floor needed, scales with the box itself */
  line-height: 1.6;
  text-align: center;
  color: var(--color-ink);
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
    font-size: 1.8vw;
    /* 16/900、狭い端末側は12px(16pxの75%)で下げ止まり */
  }

  @media (max-width: 560px) {
    font-size: 3.2vw;
  }
}

.intro-banner__logo {
  width: 100%;
  aspect-ratio: 1014 / 200;
  object-fit: cover;
}

.intro-banner__video {
  position: relative;
  flex-grow: 0;
  flex-shrink: 1;
  width: 705px;
  max-width: 705px;
  aspect-ratio: 705 / 496;
  container-type: inline-size;

  @media (max-width: 560px) {
    position: static;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: auto;
  }
}

.intro-banner__video-caption {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 13.1%;
  /* 65/496, keeps pace with .intro-banner__video's own scaling */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: var(--color-accent);
  border-radius: 12px;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(3.97cqw, 28px);
  /* 28/705 — no floor needed, scales with the box itself */
  line-height: 1.6;
  letter-spacing: 0.76px;
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
    font-size: clamp(14px, 1.6vw, 20px);
    /* 20/900、狭い端末側は15px(20pxの75%)で下げ止まり */
    padding: 12px 16px;
  }

  @media (max-width: 560px) {
    position: static;
    width: 100%;
    height: auto;
  }
}

.intro-banner__video-arrow {
  position: absolute;
  left: 50%;
  top: 11.09%;
  /* 55/496 */
  width: min(7.94cqw, 56px);
  /* 56/705 */
  height: min(4.82cqw, 34px);
  /* 34/705 */
  transform: translateX(-50%) rotate(180deg);

  @media (max-width: 560px) {
    display: none;
  }
}

.intro-banner__video-thumb {
  position: absolute;
  left: 0;
  top: 19.15%;
  /* 95/496 */
  width: 100%;
  height: 79.23%;
  /* 393/496 */
  border: 0;

  @media (max-width: 560px) {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 12px;
  }
}

/* Pricing */
/*
 * 反復するカードのFigma値(枠線・余白・フォントサイズ等)は3枚のカードで
 * 完全一致していたため、統一値としてそのまま .plan-card 共有クラスに一本化している。
 * カードごとの差異はテーマカラー(--plan-color)のみに閉じ込める。
 */

.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 24px;

  @media (max-width: 900px) {
    padding: 60px 24px;
  }
}

.pricing__heading {
  width: 100%;
  max-width: 1300px;
  padding: 32px 26px 0 0;
}

.pricing__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Zen Kaku Gothic New', var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.89px;

  /* Section title + badge pattern (pricing / benefits / target-audience):
     let the text block and the badge wrap onto separate lines as whole
     units instead of breaking mid-word inside either one. */
  @media (max-width: 900px) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

.pricing__title-text,
.pricing__title-badge {
  font-size: 60.9px;
  white-space: nowrap;

  @media (max-width: 900px) {
    font-size: clamp(32px, 4.44vw, 40px);
    /* 40/900、下限32pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(24px, 5.71vw, 32px);
    /* 32/560、狭い端末側は24px(32pxの75%)で下げ止まり */
  }
}

.pricing__title-particle {
  font-size: 48px;

  @media (max-width: 900px) {
    font-size: clamp(26px, 3.56vw, 32px);
    /* 32/900、下限26pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(19px, 4.64vw, 26px);
    /* 26/560、狭い端末側は19px(26pxの約75%)で下げ止まり */
  }
}

.pricing__title-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #17a4b1;
  color: #ffffff;
}

.pricing__sparkle {
  position: absolute;
  top: -46px;
  right: -40px;
  width: 64px;
  height: auto;

  @media (max-width: 900px) {
    top: -4.5vw;
    right: -4vw;
    width: 6vw;
  }
}

.pricing__cards {
  width: 100%;
  max-width: 1300px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing__cards-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.pricing__house-icon {
  width: 80px;
  height: 32px;
}

.pricing__cards-title {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', var(--font-body);
  font-weight: 700;
  font-size: 37.5px;
  letter-spacing: 0.88px;
  color: #17a4b1;
  /* .mansion-plan__heading でも同じクラスを再利用しているため、
     ここでの上書きがそちらにも適用される */

  @media (max-width: 900px) {
    font-size: clamp(21px, 3.11vw, 28px);
    /* 28/900、狭い端末側は21px(28pxの75%)で下げ止まり */
  }

  @media (max-width: 560px) {
    font-size: 5.6vw;
    /* 28/900、狭い端末側は21px(28pxの75%)で下げ止まり */
  }
}

.pricing__cards-badge {
  margin: 0;
  padding: 10px 20px;
  border: 2px solid #17a4b1;
  border-radius: 999px;
  color: #17a4b1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.29px;

  @media (max-width: 560px) {
    font-size: 4vw;
  }
}

.plan-cards {
  margin-top: 47px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 32px;

  @media (max-width: 900px) {
    gap: 2.4vw;
  }

  @media (max-width: 560px) {
    flex-direction: column;
    align-items: center;
  }
}

.plan-card {
  --plan-color: #17a4b1;
  /* Equal-share proportional shrink (basis 0 via width, not the flex shorthand,
     so this doesn't leak into height once the 560px override switches the row
     to flex-direction: column). Keeps all 3 cards side by side down through
     tablet widths (flex-shrink handles the narrowing, cqw children shrink in
     step), never wrapping. */
  flex-grow: 1;
  flex-shrink: 1;
  width: 0;
  max-width: 410px;
  background: #ffffff;
  border: 2.34px solid var(--plan-color);
  /* No padding here: it used to live on this element with a matching negative
     margin on .plan-card__header to cancel it back out, but container query
     units resolve against a query container's own CONTENT box — so the two
     cqw expressions (this padding vs. that margin) silently resolved against
     different widths (410px vs. ~406px) and never quite canceled, leaving a
     gap around the header. Padding now lives on .plan-card__body below,
     which is a plain descendant (not itself a container), so it resolves
     like everything else and the header can just sit flush with margin: 0. */
  display: flex;
  flex-direction: column;
  container-type: inline-size;

  @media (max-width: 560px) {
    width: 100%;
    max-width: 410px;
    height: auto;
  }
}

.plan-card--standard {
  --plan-color: #2775bb;
}

.plan-card--plus {
  --plan-color: #0d4c74;
}

.plan-card__header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  padding: min(4.57cqw, 18.74px) 0;
  /* 18.74/410 — no floor needed, scales with the card itself */
  background: var(--plan-color);
}

.plan-card__body {
  display: flex;
  flex-direction: column;
  padding: min(7.32cqw, 30px);
  /* 30/410 — no floor needed, scales with the card itself */
}

.plan-card__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(9.15cqw, 37.5px);
  /* 37.5/410 — no floor needed, scales with the card itself */
  color: #ffffff;
  white-space: nowrap;

  @media (max-width: 900px) {
    font-size: 2.4vw;
    /* 28/900、狭い端末側は21px(28pxの75%)で下げ止まり */
    white-space: normal;
  }
}

.plan-card__frequency {
  margin: 0;
  padding: min(1.14cqw, 4.69px) min(6.86cqw, 28.11px);
  /* 4.69/410, 28.11/410 — no floor needed, scales with the card itself */
  background: #ffffff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  letter-spacing: 0.94px;
  color: var(--plan-color);
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
  }
}

.plan-card__tagline {
  margin: 0 -1em;
  padding: 0 0 min(4.57cqw, 18.74px);
  /* 28.11/410, 20/410, 18.74/410 — no floor needed, scales with the card itself */
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  letter-spacing: 0.3px;
  color: var(--color-ink);
}

.plan-card__price-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.95cqw, 8px);
  /* 8/410 — no floor needed, scales with the card itself */
}

.plan-card__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: min(0.98cqw, 4px);
  /* 4/410 — no floor needed, scales with the card itself */
}

.plan-card__price-number {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: min(13.14cqw, 53.87px);
  /* 53.87/410 — no floor needed, scales with the card itself */
  color: var(--plan-color);
  white-space: nowrap;
}

.plan-card__price-unit {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(5.14cqw, 21.08px);
  /* 21.08/410 — no floor needed, scales with the card itself */
  color: var(--color-ink);
  white-space: nowrap;
}

.plan-card__price-note {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  color: var(--color-ink);
  white-space: nowrap;
}

.plan-card__scope {
  margin-top: min(5.12cqw, 21px);
  /* 21/410 — no floor needed, scales with the card itself */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(3.43cqw, 14.05px);
  /* 14.05/410 — no floor needed, scales with the card itself */
}

.plan-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: min(1.14cqw, 4.69px) min(4.57cqw, 18.74px);
  /* 4.69/410, 18.74/410 — no floor needed, scales with the card itself */
  border: 1.17px solid var(--plan-color);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  letter-spacing: 1.41px;
  color: var(--plan-color);
  background: #ffffff;
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
  }

  @media (max-width: 560px) {
    margin: 0 auto;
  }
}

.plan-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.57cqw, 10.54px);

  /* 10.54/410 — no floor needed, scales with the card itself */
  @media (max-width: 560px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.plan-card__list li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  letter-spacing: 0.94px;
  color: var(--color-ink);
  white-space: nowrap;

  @media (max-width: 560px) {
    width: 48%;
  }
}

.plan-card__list-note {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  letter-spacing: 0.94px;
  color: var(--color-ink);
  white-space: nowrap;
}

.plan-card__combo {
  margin-top: min(5.12cqw, 21px);
  /* 21/410 — no floor needed, scales with the card itself */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.29cqw, 9.37px);
  /* 9.37/410 — no floor needed, scales with the card itself */
}

.plan-card__combo-box {
  width: 100%;
  max-width: 316.22px;
  padding: min(6.86cqw, 28.11px);
  /* 28.11/410 — no floor needed, scales with the card itself */
  border-radius: 9.37px;
  background: rgba(13, 76, 116, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(3.43cqw, 14.05px);
  /* 14.05/410 — no floor needed, scales with the card itself */
}

.plan-card__combo-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: min(5.71cqw, 23.42px);
  /* 23.42/410 — no floor needed, scales with the card itself */
  color: var(--plan-color);
  white-space: nowrap;
}

.plan-card__combo-detail {
  margin: 0;
  display: flex;
  align-items: center;
  gap: min(2.86cqw, 11.71px);
  /* 11.71/410 — no floor needed, scales with the card itself */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: min(4.57cqw, 18.74px);
  /* 18.74/410 — no floor needed, scales with the card itself */
  color: var(--color-ink);
  white-space: nowrap;
}

.plan-card__combo-detail .plan-card__badge {
  background: #ffffff;
}

.plan-card__combo-plus {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: min(9.15cqw, 37.5px);
  /* 37.5/410 — no floor needed, scales with the card itself */
  color: var(--plan-color);
}

/* Mansion plan — reuses .pricing__cards-title / .pricing__cards-badge / .plan-card__price* / .plan-card__badge
   since Figma specifies identical values for these repeated pieces. */

.mansion-plan {
  margin-top: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (max-width: 900px) {
    margin-top: 60px;
  }
}

.mansion-plan__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mansion-plan__icon {
  width: 80px;
  height: 36px;
}

.mansion-plan__box {
  margin-top: 47px;
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28.11px;
  padding: 46.85px 35.14px;
  background: #ffffff;
  border: 2.34px solid #17a4b1;

  @media (max-width: 560px) {
    padding: 6vw;
  }
}

.mansion-plan__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17.57px;
  letter-spacing: 0.88px;
  color: var(--color-ink);

  @media (max-width: 900px) {
    font-size: 2.4vw;
  }

  @media (max-width: 560px) {
    text-align: center;
    font-size: 4vw;
  }
}

.mansion-plan__details {
  display: flex;
  align-items: center;
  gap: 56.22px;
  /* .mansion-plan__box centers its children (align-items: center) instead of
     stretching them, so without an explicit width this row would shrink-to-fit
     its children's natural sizes instead of being constrained by the box —
     and .mansion-plan__price/.mansion-plan__tasks would never get a reason
     to flex-shrink. */
  width: 100%;

  @media (max-width: 900px) {
    align-items: flex-start;
    gap: 0;
  }

  @media (max-width: 560px) {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
}

.mansion-plan__price {
  --plan-color: #17a4b1;
  /* .mansion-plan__box has more slack width than price+tasks actually need
     at 1920px, so this must only shrink (never grow) — matching that natural,
     un-stretched sizing exactly until the row runs out of room. Uses width
     (not the flex shorthand) so flex-basis stays 'auto' and doesn't leak into
     height once the 900px override switches this row to a column. */
  flex-grow: 0;
  flex-shrink: 1;
  width: 434.9px;
  max-width: 434.9px;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  container-type: inline-size;

  @media (max-width: 900px) {
    flex-direction: column;
  }


  @media (max-width: 560px) {
    width: 100%;
    flex-direction: column;
  }
}

.mansion-plan__frequency {
  margin-bottom: 1em;
  padding: 4.69px 23.42px;
  background: #17a4b1;
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(4.31cqw, 18.74px);
  /* 18.74/434.9 — no floor needed, scales with the box itself */
  letter-spacing: 0.94px;
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
  }
}

.mansion-plan__price-text {
  text-align: center;

  @media (max-width: 900px) {}
}

.mansion-plan__price-text .plan-card__price {
  justify-content: flex-end;
}

/* .plan-card__price* now scale in cqw against .plan-card's 410px basis, but
   here they sit inside .mansion-plan__price's own 434.9px container instead
   — pin back to the fixed Figma values so this reused pattern stays
   pixel-exact here too (same reasoning as .mansion-plan__tasks .plan-card__badge below). */
.mansion-plan__price-text .plan-card__price-number {
  font-size: 53.87px;

  /* デスクトップでは434.9px固定のcontainer幅でcqwを打ち消し値へ固定しているが、
     モバイルでは.mansion-plan__price自体がビューポート幅に応じて縮むため、
     その打ち消しを外して.plan-card__price*本来のcqwベースの数式に戻す。
     900px時点ではこの数式がちょうど元の固定値(53.87px)へ収束するため、
     それより狭い端末でだけ縮小する。 */
  @media (max-width: 900px) {
    font-size: min(13.14cqw, 53.87px);
  }
}

.mansion-plan__price-text .plan-card__price-unit {
  font-size: 21.08px;

  @media (max-width: 900px) {
    font-size: min(5.14cqw, 21.08px);
  }
}

.mansion-plan__price-text .plan-card__price-note {
  font-size: 18.74px;

  @media (max-width: 900px) {
    font-size: min(4.57cqw, 18.74px);
  }
}

.mansion-plan__tasks {
  --plan-color: #17a4b1;
  display: flex;
  align-items: center;
  gap: 18.74px;
  flex-grow: 0;
  flex-shrink: 1;
  /* No width/flex-basis: sizes to its own content (badge + task list) like
     .mansion-plan__price does, so it only shrinks (via flex-shrink) once the
     row runs out of room instead of claiming a fixed share of it. A fixed
     50% here fought with .mansion-plan__price's own fixed 434.9px at tablet
     widths and squeezed .mansion-plan__task-list down to an unreadable sliver. */
  min-width: 280px;
  width: 50%;

  @media (max-width: 900px) {
    flex-direction: column;
    align-items: flex-start;
  }

  @media (max-width: 560px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
}

.mansion-plan__tasks .plan-card__badge {
  /* Not nested in a .plan-card, so the cqw-based font-size/padding on the
     shared .plan-card__badge rule have no container to resolve against here
     — pin them back to the fixed Figma values instead. */
  font-size: 18.74px;
  padding: 4.69px 18.74px;
}

.mansion-plan__task-list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-grow: 1;
  flex-shrink: 1;
  /* No fixed width: fills whatever room .mansion-plan__tasks has left after
     the badge, same reasoning as .mansion-plan__tasks itself above. */
  min-width: 140px;
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28.11px;
  container-type: inline-size;

  @media (max-width: 900px) {
    width: 100%;
  }
}

.mansion-plan__task-list li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: min(6cqw, 18px);
  /* 16.4/456.76 — no floor needed, scales with the list itself */
  color: var(--color-ink);
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
    font-size: 1.6vw;
  }
}

/* Gallery */

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 30px;
  background: #e4faff;
  border-radius: 24px;
}

.gallery__heading {
  margin: 0;
  padding-top: 24px;
  font-family: 'Zen Kaku Gothic New', var(--font-body);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.45px;
  color: #2775bb;

  @media (max-width: 560px) {
    font-size: clamp(24px, 5.71vw, 32px);
  }
}

.gallery__grid {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px calc(35 / 1240 * 100%);

  @media (max-width: 560px) {
    gap: 3vw;
  }
}

.gallery__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  width: calc(390 / 1240 * 100%);

  @media (max-width: 560px) {
    width: calc(50% - 17.5px);
  }
}

.gallery__card img {
  width: 100%;
  aspect-ratio: 1280 / 853;
  object-fit: cover;
}

.gallery__card figcaption {
  padding: .75em;
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 23.42px;
  letter-spacing: 1.17px;
  color: var(--color-ink);

  @media (max-width: 900px) {
    font-size: 2vw;
  }

  @media (max-width: 560px) {
    font-size: clamp(12px, 2.86vw, 16px);
    /* 16/560、狭い端末側は12px(16pxの75%)で下げ止まり */
  }
}

/* Benefits */

.benefits {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 120px;
  background: linear-gradient(135deg, #6fcbe0 0%, #1e6fa6 100%);
  overflow: hidden;

  @media (max-width: 900px) {
    padding: 48px 24px 60px;
  }
}

.benefits__heading {
  width: 100%;
  padding: 30px 0;
}

.benefits__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-body);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.76px;

  /* Section title + badge pattern。.pricing__titleと同じ理由で折り返す */
  @media (max-width: 900px) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

.benefits__title-text,
.benefits__title-badge {
  font-size: 60px;
  white-space: nowrap;

  @media (max-width: 900px) {
    font-size: clamp(32px, 4.44vw, 40px);
    /* 40/900、下限32pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(24px, 5.71vw, 32px);
    /* 32/560、狭い端末側は24px(32pxの75%)で下げ止まり */
  }
}

.benefits__title-particle {
  font-size: 48px;

  @media (max-width: 900px) {
    font-size: clamp(26px, 3.56vw, 32px);
    /* 32/900、下限26pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(19px, 4.64vw, 26px);
    /* 26/560、狭い端末側は19px(26pxの約75%)で下げ止まり */
  }
}

.benefits__title-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  background: #ffffff;
  color: #2775bb;
}

.benefits__sparkle {
  position: absolute;
  top: -46px;
  right: -40px;
  width: 64px;
  height: auto;

  @media (max-width: 900px) {
    top: -4.5vw;
    right: -4vw;
    width: 6vw;
  }
}

.benefits__list {
  width: 100%;
  max-width: 1300px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  /* .benefit-card__number floats half-outside each card's top edge (height
     93.69px, so ~46.8px protrudes above); 40px wasn't enough clearance and
     let the number overlap the card above it. */
  gap: 56px;
}

.benefit-card {
  position: relative;
  background: #ffffff;
  border-radius: 37.5px;
  padding: 60px 48px;

  @media (max-width: 900px) {
    padding: 32px 24px;
    border-radius: 24px;
  }
}

.benefit-card__number {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 94.87px;
  height: 93.69px;
  border-radius: 999px;
  background: #0d4c74;
  border: 4.69px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 51.53px;

  @media (max-width: 900px) {
    width: 64px;
    height: 64px;
    font-size: 32px;
    border-width: 3px;
  }
}

.benefit-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  @media (max-width: 560px) {
    flex-direction: column;
    gap: 24px;
  }
}

.benefit-card__body--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 28.11px;
}

.benefit-card__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 260px;
  max-width: 640px;

  @media (max-width: 560px) {
    max-width: 100%;
  }
}

.benefit-card__heading {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32.79px;
  line-height: 1.4;
  letter-spacing: 0.63px;
  color: #2775bb;

  @media (max-width: 900px) {
    font-size: clamp(20px, 2.67vw, 24px);
    /* 24/900、狭い端末側は18px(24pxの75%)で下げ止まり */
  }

  @media (max-width: 560px) {
    font-size: 4.4vw;
  }
}

.benefit-card__heading--wide {
  letter-spacing: 1.64px;

  @media (max-width: 900px) {
    white-space: normal;
    letter-spacing: normal;
  }
}

.benefit-card__paragraph {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 1.17px;
  color: var(--color-ink);

  @media (max-width: 900px) {
    font-size: clamp(12px, 2vw, 18px);
    /* 18/900、狭い端末側は14px(18pxの約75%)で下げ止まり */
  }

  @media (max-width: 560px) {
    font-size: 3vw;
  }
}

.benefit-card__note {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.64px;
  line-height: 1.4;
  color: var(--color-ink);
}

.benefit-card__media {
  flex-grow: 0;
  flex-shrink: 1;
  width: 515.92px;
  min-width: 220px;
  max-width: 515.92px;
  height: auto;
  aspect-ratio: 515.92 / 331.05;
  border-radius: 9.37px;
  overflow: hidden;

  @media (max-width: 560px) {
    width: 100%;
    height: auto;
    aspect-ratio: 515.92 / 331.05;
  }
}

.benefit-card__media--bordered {
  width: 515.31px;
  max-width: 515.31px;
  aspect-ratio: 515.31 / 360.72;
  border: 0.78px solid #ddd4c4;

  @media (max-width: 560px) {
    width: 100%;
    height: auto;
    aspect-ratio: 515.92 / 331.05;
  }
}

.benefit-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Benefit card 2 — report mockups are reproduced as flattened exported images
   (the Figma source itself bakes the fake dashboard UI into one raster asset). */

.benefit-report {
  display: flex;
  gap: 51.53px;
  width: 100%;

  @media (max-width: 560px) {
    flex-direction: column;
  }
}

.benefit-report__figure {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.benefit-report__image-wrap {
  position: relative;
  width: 100%;
  border-radius: 9.37px;
  overflow: hidden;
}

.benefit-report__image-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.benefit-report__image {
  width: 100%;
  display: block;
}

.benefit-report__video {
  /* Sits over the video-player capture baked into benefit-report-video.png
     (the roof photo + play/seek/volume overlay), vertically matched by
     measuring that region's pixel bounds against the source PNG's 586x827
     size. video.mp4's own aspect ratio (352/200) is wider than that region,
     so width is derived from height via aspect-ratio and centered instead of
     matching the region's width — object-fit: cover there cropped the left
     and right edges of the video. */
  position: absolute;
  left: 50%;
  top: 19.47%;
  height: 31.8%;
  aspect-ratio: 352 / 200;
  transform: translateX(-50%);
}

.benefit-report__figure figcaption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15.23px;
  letter-spacing: 0.76px;
  color: var(--color-ink);
}

/* Target audience */

.target-audience {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 111.11px 24px 60px;
  background: #ffffff;

  @media (max-width: 900px) {
    padding: 60px 24px 40px;
  }
}

.target-audience__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Zen Kaku Gothic New', var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.84px;

  /* Section title + badge pattern。.pricing__titleと同じ理由で折り返す */
  @media (max-width: 900px) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

.target-audience__title-text,
.target-audience__title-badge {
  font-size: 60px;
  white-space: nowrap;

  @media (max-width: 900px) {
    font-size: clamp(32px, 4.44vw, 40px);
    /* 40/900、下限32pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(24px, 5.71vw, 32px);
    /* 32/560、狭い端末側は24px(32pxの75%)で下げ止まり */
  }
}

.target-audience__title-particle {
  font-size: 48px;

  @media (max-width: 900px) {
    font-size: clamp(26px, 3.56vw, 32px);
    /* 32/900、下限26pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(19px, 4.64vw, 26px);
    /* 26/560、狭い端末側は19px(26pxの約75%)で下げ止まり */
  }
}

.target-audience__title-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  background: var(--color-accent);
  color: #ffffff;
}

.target-audience__sparkle {
  position: absolute;
  top: -46px;
  right: -40px;
  width: 64px;
  height: auto;

  @media (max-width: 900px) {
    top: -4.5vw;
    right: -4vw;
    width: 6vw;
  }
}

.target-audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 1300px;
  /* Grid (not flex-wrap) keeps both columns the same width regardless of how
     many items land in the trailing row — flex-wrap's last odd item would
     otherwise stretch to fill the row alone. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 17.78px;
  /* Lets the li font-size/padding/icon below be expressed in cqw. Deliberately
     NOT put on the li itself: a query container's own font-size can't depend
     on cq units (browsers treat that as circular and ignore it), so the
     container has to be this parent instead. Basis is this list's own
     1300px desktop max-width, not the ~641px column — close enough since
     each column tracks roughly half of it, and it's exact at the 1920px
     desktop width that visual parity is checked against. */
  container-type: inline-size;

  @media (max-width: 560px) {
    grid-template-columns: 1fr;
  }
}

.target-audience__list li {
  /* No flex here: icon + text is plain inline flow so long text can simply
     wrap onto a second line instead of the icon/text splitting into separate
     flex items and breaking at narrow widths. */
  padding: min(2.05cqw, 26.67px) min(1.71cqw, 22.22px);
  /* 26.67/1300, 22.22/1300 — no floor needed, scales with the list itself */
  background: #e4faff;
  border-radius: 8.89px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(2cqw, 26px);
  /* 26/1300 — no floor needed, scales with the list itself */
  line-height: 1.5;
  letter-spacing: 1.3px;
  color: var(--color-ink);

  @media (max-width: 900px) {
    font-size: clamp(15px, 2.22vw, 20px);
    /* 20/900、狭い端末側は15px(20pxの75%)で下げ止まり */
  }
}

.target-audience__list img {
  display: inline;
  width: min(2.38cqw, 30.9px);
  /* 30.9/1300 — no floor needed, scales with the list itself */
  height: auto;
  aspect-ratio: 30.9 / 32.44;
  margin-right: min(1.37cqw, 17.78px);
  /* 17.78/1300 — no floor needed, scales with the list itself */
  vertical-align: middle;
}

.target-audience__accent {
  color: var(--color-accent);
  white-space: nowrap;
}

.target-audience__people {
  width: 729px;
  max-width: 100%;
  height: auto;
}

/* CTA banner */

.cta-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.5vw, 48px);
  padding: 80px 24px;
  background: linear-gradient(99.75deg, #2193b0 0%, #2775bb 99.999%);

  @media (max-width: 900px) {
    gap: 24px;
    padding: 48px 24px;
  }
}

.cta-banner__lead {
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(2.5vw, 48px);
  /* 48/1920 — a 900px breakpoint override takes over below that */
  line-height: 1.29;
  letter-spacing: 2.4px;

  @media (max-width: 900px) {
    font-size: clamp(21px, 3.11vw, 28px);
    /* 28/900、狭い端末側は21px(28pxの75%)で下げ止まり */
  }
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: min(1.83vw, 35.14px);
  /* 35.14/1920 — a 900px breakpoint override takes over below that */
}

.cta-banner__phone {
  display: flex;
  align-items: center;
  gap: min(1vw, 12px);

  /* 12/1920 — a 900px breakpoint override takes over below that */
  @media (max-width: 560px) {
    gap: 1.5vw;
  }
}

.cta-banner__phone img {
  margin-bottom: 1.2em;
  width: min(4vw, 86.67px);
  /* 86.67/1920 — a 900px breakpoint override takes over below that */
  height: auto;
  aspect-ratio: 86.67 / 57.39;

  @media (max-width: 560px) {
    margin-bottom: .5em;
    width: 7vw;
  }
}

.cta-banner__phone-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cta-banner__phone-number {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: min(3.9vw, 74.96px);
  /* 74.96/1920 — a 900px breakpoint override takes over below that */
  letter-spacing: 1.87px;
  color: #ffffff;

  @media (max-width: 900px) {
    font-size: clamp(36px, 5.33vw, 48px);
    /* 48/900、下限36pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: 8vw;
    /* 36/560、狭い端末側は27px(36pxの75%)で下げ止まり */
  }
}

.cta-banner__phone-hours {
  align-self: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: min(1.22vw, 23.42px);
  /* 23.42/1920 — a 900px breakpoint override takes over below that */
  color: #ffffff;

  @media (max-width: 560px) {
    font-size: 3vw;
  }
}

.cta-banner__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(0.61vw, 11.71px);
  /* 11.71/1920 — a 900px breakpoint override takes over below that */
  padding: min(2.16vw, 41.48px) min(2.4vw, 46.16px);
  /* 41.48/1920, 46.16/1920 — a 900px breakpoint override takes over below that */
  background: var(--color-accent);
  border: 4px solid #ffffff;
  border-radius: 16px;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: min(1.88vw, 36px);
  /* 36/1920 — a 900px breakpoint override takes over below that */
  text-decoration: none;
  white-space: nowrap;

  @media (max-width: 900px) {
    white-space: normal;
    font-size: clamp(18px, 2.67vw, 24px);
    /* 24/900、狭い端末側は18px(24pxの75%)で下げ止まり */
    padding: 24px 32px;
  }

  @media (max-width: 560px) {
    width: 100%;
    font-size: 4vw;
    gap: 1.5vw;
  }
}

.cta-banner__cta img {
  width: min(2.2vw, 42.16px);
  /* 42.16/1920 — a 900px breakpoint override takes over below that */
  height: auto;

  @media (max-width: 560px) {
    width: 6vw;
  }
}

/* Footer */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 60px 24px;
  background: #f3f3f3;

  @media (max-width: 900px) {
    gap: 40px;
    padding: 40px 24px;
  }
}

.site-footer__banners {
  width: 100%;
  max-width: 1110px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;

  @media (max-width: 560px) {
    gap: 2vw;
  }
}

.site-footer__banner {
  flex: 1 1 240px;
  max-width: 260px;
  display: block;

  @media (max-width: 560px) {
    /* 2カラム固定: gapが1本(2vw)だけ挟まる行の折り返しなので、その半分を差し引く */
    flex-basis: calc(50% - 1vw);
    max-width: calc(50% - 1vw);
    /* 高さを幅追従にしないと、2カラムで箱が正方形寄りになり
       object-fit: cover の画像(元は約2:1)が過剰にトリミングされる */
    aspect-ratio: 2 / 1;
  }
}

.site-footer__banner--bordered img {
  border: 1px solid #c0c0c0;
}

.site-footer__banner--youtube {
  background: #ffffff;
  border: 1px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.site-footer__logo {
  width: 350px;
  max-width: 100%;
  height: 58px;
  mix-blend-mode: multiply;
}

.site-footer__address {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 2;
  color: var(--color-ink);

  @media (max-width: 560px) {
    font-size: 3vw;
  }
}

.site-footer__tel {
  color: inherit;
  text-decoration: none;
}

.site-footer__copyright {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.48px;
  color: var(--color-ink);
}

/* Lightbox: generic image modal, opened by .benefit-report__image-btn */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Contact form */

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 100px 24px;

  @media (max-width: 900px) {
    padding: 60px 24px;
    gap: 24px;
  }
}

.contact-form__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: 0.76px;
  color: var(--color-ink);
  text-align: center;

  @media (max-width: 900px) {
    font-size: clamp(28px, 4vw, 36px);
    /* 36/900、下限28pxは下記560pxの値と連続させる */
  }

  @media (max-width: 560px) {
    font-size: clamp(21px, 5vw, 28px);
    /* 28/560、狭い端末側は21px(28pxの75%)で下げ止まり */
  }
}

.contact-form__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 920px;
}

.contact-form__row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 20px 0;

  @media (max-width: 560px) {
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
  }
}

.contact-form__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 185px;
  padding-top: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);

  @media (max-width: 560px) {
    flex: none;
    width: 100%;
    padding-top: 0;
  }
}

.contact-form__chip {
  flex: none;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.44px;
  white-space: nowrap;

  @media (max-width: 900px) {
    font-size: 12px;
    /* 11pxは狭い端末では小さすぎるため、モバイル幅では12pxに底上げ */
  }
}

.contact-form__chip--required {
  background: var(--color-accent);
  color: #ffffff;
}

.contact-form__chip--optional {
  background: #ffffff;
  border: 1px solid #c8bda8;
  color: var(--color-ink);
}

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

  @media (max-width: 900px) {
    width: 100%;
  }
}

.contact-form__field {
  width: 100%;
  border: 1px solid #c8bda8;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--color-ink);
  background: #ffffff;
  box-shadow: inset 3px 3px 4px rgba(0, 0, 0, 0.1);
}

.contact-form__field::placeholder {
  color: #8b959b;
}

.contact-form__field:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form__field--textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.7;
}

.contact-form__hint {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: var(--color-ink);
}

.contact-form__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;

  @media (max-width: 560px) {
    grid-template-columns: 1fr;
  }
}

.contact-form__options--inline {
  display: flex;
  flex-wrap: wrap;
}

.contact-form__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 17px;
  border: 1px solid #c8bda8;
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.725px;
  color: var(--color-ink);
  cursor: pointer;

  @media (max-width: 560px) {
    padding: 12px 14px;
    font-size: 13.5px;
  }
}

.contact-form__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-form__option-mark {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.333px solid #8b959b;
  border-radius: 50%;
}

.contact-form__option-mark--square {
  border-radius: 4px;
}

.contact-form__option-mark::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: scale(0);
  transition: transform 0.12s;
}

.contact-form__option-mark--square::after {
  border-radius: 2px;
}

.contact-form__option:has(input:checked),
.contact-form__option.is-checked {
  border-color: var(--color-accent);
}

.contact-form__option:has(input:checked) .contact-form__option-mark,
.contact-form__option.is-checked .contact-form__option-mark {
  border-color: var(--color-accent);
}

.contact-form__option input:checked~.contact-form__option-mark::after,
.contact-form__option.is-checked .contact-form__option-mark::after {
  transform: scale(1);
}

.contact-form__error {
  display: none;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-accent);
}

.contact-form__row.has-error .contact-form__field,
.contact-form__row.has-error .contact-form__option {
  border-color: var(--color-accent);
}

.contact-form__row.has-error .contact-form__error {
  display: block;
}

.contact-form__submit {
  display: flex;
  justify-content: center;
  padding-top: 26px;
}

.contact-form__submit-btn {
  width: 350px;
  max-width: 100%;
  padding: 16px 30px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;

  @media (max-width: 560px) {
    width: 100%;
  }
}

.contact-form__note {
  margin: 36px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
}

.contact-form__note a {
  color: inherit;
  text-decoration: underline;
}

/* Standalone form pages: form/mail.php(確認画面・入力エラー画面)とthanks.html(完了画面)で共有。
   どちらもFigma参照が無いページのため、視覚一致ループの対象外(トップと同じくブランドトークンのみ流用)。 */

.form-page {
  display: flex;
  justify-content: center;
  padding: 80px 24px;
  min-height: 60vh;
  background: #f7f4ee;

  @media (max-width: 560px) {
    padding: 40px 16px;
  }
}

.form-page__card {
  width: 100%;
  max-width: 640px;
  padding: 44px clamp(24px, 4vw, 48px);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);

  @media (max-width: 560px) {
    padding: 28px 20px;
  }
}

.form-page__icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
}

.form-page__title {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  text-align: center;
  color: var(--color-ink);
}

.form-page__lead {
  margin: 0 0 28px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-ink);
}

.form-page__body {
  margin: 0 0 32px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
  color: var(--color-ink);
}

.form-page__actions {
  display: flex;
  gap: 12px;

  @media (max-width: 560px) {
    flex-direction: column;
  }
}

.form-page .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.form-page .btn--accent {
  background: var(--color-accent);
  color: #ffffff;
}

.form-page .btn--outline {
  background: #ffffff;
  border: 1px solid #c8bda8;
  color: var(--color-ink);
}

.form-page table.formTable {
  width: 100%;
  margin: 0 0 32px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-ink);
}

.form-page table.formTable th,
.form-page table.formTable td {
  padding: 12px 14px;
  border: 1px solid #e5ddcd;
  text-align: left;
  vertical-align: top;

  @media (max-width: 560px) {
    display: block;
    width: auto;
  }
}

.form-page table.formTable th {
  width: 34%;
  font-weight: 700;
  font-size: 12.5px;
  color: #8b959b;
  background: #f7f4ee;
  white-space: nowrap;

  @media (max-width: 560px) {
    border-bottom: 0;
  }
}

.form-page .error_messe {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #d3341f;
}