/* （サービス名） β版 LP v2 — 素の CSS。ブレークポイント 768px
   画面の作り：全画面の画像で始まり、白／ベージュ／全幅画像の段を交互に置き、
   画像は幅の 55% 以上か全幅。英字の小見出しと大きな英字で段の性格を示す。 */

:root {
  /* 色 */
  --ink: #332f27;               /* 本文・見出し：暖かい墨色 */
  --ink-sub: #5e574b;           /* 補足 */
  --white: #ffffff;
  --beige: #f3efe6;             /* 明るいベージュの段 */
  --sand: #e9e3d3;              /* 濃いベージュの段 */
  --line: rgba(51, 47, 39, 0.22);
  --accent: #9c5a4b;            /* 差し色：作例の外壁のピンクを暗くした色 */
  --accent-dark: #834a3d;
  --shade: 20, 17, 12;          /* 画像に重ねる影の色（rgba で使う） */

  /* 文字 */
  --font-jp: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en: "Jost", "Helvetica Neue", Arial, var(--font-jp);
  --weight-body: 500;
  --weight-bold: 700;
  /* v8：文字の大きさは 9 役割。要素はこのどれかを使い、新しい値を足さない（PC の上書きは下の 768px 以上） */
  --fs-caption-s: 12px;         /* 補助 S：バッジ、必須印、フッターの英語と最下段、ヘッダーのリンクとボタン（SP） */
  --fs-caption-m: 13px;         /* 補助 M：英語の小見出し、注記、フォームの補足とエラー、フッター */
  --fs-body-s: 16px;            /* 本文 S：ボタン、フォーム（入力欄は 16px 未満にしない）、Flow の本文 */
  --fs-body: 17px;              /* 本文 */
  --fs-subhead: 20px;           /* 小見出し */
  --fs-heading: 25px;           /* 見出し（整理案は 26px。ヒーロー見出しが 360 幅で左にはみ出すため 25px） */
  --fs-tile-num: 28px;          /* 画像上の番号 */
  --fs-display: 44px;           /* 表示用の数字 */
  --fs-price: 96px;             /* 価格の数字 */

  /* 幅・余白 */
  --width-content: 1200px;
  --gutter: 20px;
  --section-pad: 80px;
  --button-height: 56px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-pad: 140px;
    --fs-body: 18px;
    --fs-subhead: 22px;
    --fs-heading: 36px;
    --fs-display: 60px;
    --fs-price: 144px;
  }
}

/* 基本 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-jp);
  font-weight: var(--weight-body);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  line-break: strict;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--width-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* SP だけ／PC だけの改行 */
.br-sp { display: inline; }
.br-pc { display: none; }
@media (min-width: 768px) {
  .br-sp { display: none; }
  .br-pc { display: inline; }
}

/* 英字の小見出し */
.eyebrow {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-caption-m);
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--white); }

/* 段の共通 */
.section { padding-block: var(--section-pad); }
.section--beige { background: var(--beige); }
.section--sand { background: var(--sand); }
.section__title {
  margin-top: 18px;
  font-size: var(--fs-heading);
  font-weight: var(--weight-bold);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.section__lead { margin-top: 28px; color: var(--ink-sub); }
@media (min-width: 768px) {
  .section__title { margin-top: 20px; }
}

/* ボタン：pill。塗りと枠線の 2 種 */
.cta { margin-top: 36px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 40px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-weight: var(--weight-bold);
  font-size: var(--fs-body-s);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.button--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.button--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cta__note { margin-top: 10px; font-size: var(--fs-caption-m); }
@media (min-width: 768px) {
  .button { width: auto; min-width: 300px; }
}

/* ヘッダー：白い帯。画像の上には重ねない（画像に影を足さないため） */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 var(--gutter);
  background: var(--white);
  color: var(--ink);
}
.site-name {
  white-space: nowrap;
  font-weight: var(--weight-bold);
  font-size: var(--fs-body-s);
  letter-spacing: 0.08em;
}
.site-name a { color: inherit; text-decoration: none; }
.badge {
  display: inline-block;
  margin-left: 10px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-caption-s);
  line-height: 1.8;
  vertical-align: 2px;
}
.site-header__right { display: flex; align-items: center; gap: 28px; }
.button--small {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 18px;
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-caption-s);
  letter-spacing: 0.08em;
}
.button--small:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* v7：作例へのリンク。SP でも 1 行に収まるよう、小さな文字だけにする */
.site-header__link {
  font-size: var(--fs-caption-s);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-decoration: underline;
  padding-block: 10px; /* 押せる範囲を縦に広げる */
}
.site-header__link:hover { color: var(--accent); }
.site-header__link[aria-current="page"] { text-decoration: none; } /* 免責事項のページでは、現在地のリンクに下線を付けない */
/* v7.5 SP：名前（「（β版）」を外す）・作例・免責事項・申込ボタンを 1 行に収める（360 幅まで。v8：名前は SP 全幅で補助 M の 13px。380 幅以下は字間だけ詰める） */
@media (max-width: 767px) {
  .site-header { gap: 8px; }
  .site-name { font-size: var(--fs-caption-m); }
  .site-header__right { gap: 8px; }
  .site-header .button--small { padding: 0 12px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-name { letter-spacing: 0.04em; }
}
@media (min-width: 768px) {
  .site-header { height: 80px; }
  .site-header__link { font-size: var(--fs-caption-m); }
  .button--small { min-height: 40px; padding: 0 24px; font-size: var(--fs-caption-m); }
}

/* 第1段 ファーストビュー
   画像は元の明るさのまま。見出しは 3 枚とも元から暗い右下の道路の上に直接置き、
   画像の下端からの薄いグラデーション（最大 0.45、高さ 30%）と文字の影だけを足す。
   小さな文字（サブコピー・注記）とボタンは画像の下の白地に置く。 */
.hero { position: relative; background: var(--white); }
.hero__slides {
  position: relative;
  height: max(480px, 70svh);
  overflow: hidden;
  background: var(--beige);
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-fade 18s infinite;
}
/* 1 枚目は最初から出す（負の遅延）。2・3 枚目は 6 秒ずつ遅れて重なる */
.hero__slide:nth-child(1) { opacity: 1; animation-delay: -1.44s; }
.hero__slide:nth-child(2) { animation-delay: 4.56s; }
.hero__slide:nth-child(3) { animation-delay: 10.56s; object-position: 50% 62%; }
@keyframes hero-fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}
.hero__slides::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.hero__title-wrap {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 14px;
  color: var(--white);
}
.hero__title {
  font-size: var(--fs-heading);
  font-weight: var(--weight-bold);
  line-height: 1.45;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* v8：25px でも 360 幅では 2 行目が画面の左端を越えるため、380 幅以下は字間だけ詰める */
@media (max-width: 380px) {
  .hero__title { letter-spacing: 0.02em; }
}
.hero__foot { padding-top: 36px; padding-bottom: 56px; }
.hero__sub { margin-top: 16px; font-size: var(--fs-body); line-height: 2; }
.hero__sub strong, .conditions strong { font-weight: var(--weight-bold); }
.hero__foot .cta__note { color: var(--ink-sub); }

@media (min-width: 768px) {
  .hero__slides { height: calc(100vh - 80px); min-height: 640px; }
  .hero__title-wrap { right: max(var(--gutter), calc((100vw - var(--width-content)) / 2)); bottom: 40px; }
  .hero__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 72px;
  }
  .hero__foot .cta { margin-top: 0; text-align: center; }
}

/* 追加の段 SNS 広告の見本（v4）
   住宅広告の組み方：太いゴシック、白い札と差し色の丸札、下に墨色の帯。日付を大きく、補足を小さく。
   この段だけは文字の後ろに帯・札を敷く（広告画像の作法）。帯と札は画像の 40% 以内に収め、残りは無加工で見せる。
   文字の大きさはタイルの幅に合わせる（cqw＝タイル幅の 1%）。 */
.ads__strip {
  margin-top: 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 47, 39, 0.45) transparent;
}
.ads__strip::-webkit-scrollbar { height: 6px; }
.ads__strip::-webkit-scrollbar-thumb { background: rgba(51, 47, 39, 0.45); border-radius: 3px; }
.ads__strip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ads__track { display: flex; gap: 12px; padding-inline: var(--gutter); }
.ads__track::after { content: ""; flex: 0 0 1px; }
.ad {
  --ad-gold: #7a6440;           /* 筆記体の飾り（白地の上） */
  --ad-beige: #e8dcc4;          /* 筆記体の飾り（墨・差し色の上） */
  /* v8：文字の大きさは 8 段（cqw＝カード幅の 1%）。3 枚で同じ値を使う */
  --ad-fs-1: 2.6cqw;            /* 極小：ラベル、注記 */
  --ad-fs-2: 3.4cqw;            /* 小：見出しラベル、チップ */
  --ad-fs-3: 3.8cqw;            /* 本文：日時、一覧の値 */
  --ad-fs-4: 4.6cqw;            /* 中：ブランド名、時刻 */
  --ad-fs-5: 5.8cqw;            /* 大：チップの数字、イベント名 C */
  --ad-fs-6: 8.2cqw;            /* 日付 */
  --ad-fs-7: 8.6cqw;            /* 筆記体の英語 */
  --ad-fs-8: 10.4cqw;           /* イベント名（A、B、C の「公開中」） */
  position: relative;
  flex: 0 0 78%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  container-type: inline-size;
  background: var(--white);
  color: var(--ink);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  box-shadow: 0 1px 0 rgba(51, 47, 39, 0.08), 0 0 0 1px rgba(51, 47, 39, 0.08);
}
.ad img { width: 100%; height: 100%; object-fit: cover; }
.ad p, .ad dl, .ad dd { margin: 0; }
.ad__script {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.ad__tag {
  display: inline-block;
  padding: 0.5cqw 2cqw;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--ad-fs-1);
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.ad__brand-label {
  position: absolute;
  top: 4cqw;
  right: 4cqw;
  padding: 1.2cqw 2.6cqw;
  background: var(--white);
  color: var(--ink);
  font-size: var(--ad-fs-2);
  letter-spacing: 0.2em;
}
.ad__brand-label--left { right: auto; left: 4cqw; }

/* A：上下に白い帯、中央に写真 */
/* 行の高さは % で指定する（cqw は自分自身の大きさを参照できないため） */
.ad--a { display: grid; grid-template-rows: 12% 1fr 35.2%; }
.ad__head { display: flex; justify-content: space-between; align-items: center; padding: 0 5cqw; }
.ad__brand { font-size: var(--ad-fs-4); letter-spacing: 0.24em; line-height: 1.1; }
.ad__brand small { display: block; margin-bottom: 0.8cqw; font-size: var(--ad-fs-1); letter-spacing: 0.3em; color: var(--ink-sub); }
.ad__tagline { font-size: var(--ad-fs-1); line-height: 1.6; letter-spacing: 0.14em; text-align: right; color: var(--ink-sub); }
.ad--a .ad__photo { position: relative; overflow: hidden; }
.ad__foot { position: relative; padding: 3.6cqw 5cqw 4cqw; border-top: 0.8cqw solid var(--sand); }
.ad__when { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2.6cqw; }
.ad__date { font-size: var(--ad-fs-6); letter-spacing: 0.01em; line-height: 1.1; font-family: var(--font-en); font-weight: 500; }
.ad__dow {
  display: inline-grid;
  place-items: center;
  width: 4.8cqw;
  height: 4.8cqw;
  margin: 0 0.6cqw 0 0.4cqw;
  line-height: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-jp);
  font-style: normal;
  font-size: var(--ad-fs-1);
  vertical-align: 0.6cqw;
}
.ad__dow--sun { background: var(--accent); }
.ad__time { font-family: var(--font-en); font-weight: 500; font-size: var(--ad-fs-4); letter-spacing: 0.02em; }
.ad__event { margin-top: 2cqw; font-size: var(--ad-fs-8); letter-spacing: 0; line-height: 1.15; }
.ad__sep { display: inline-flex; }
.ad__sep > span { padding: 0 1.7cqw; border-left: 1px solid rgba(51, 47, 39, 0.35); }
.ad__sep > span:first-child { padding-left: 0; border-left: 0; }
.ad__chip {
  position: absolute;
  right: 5cqw;
  bottom: 4cqw;
  padding: 1cqw 3cqw;
  background: var(--ink);
  color: var(--white);
  font-size: var(--ad-fs-2);
  letter-spacing: 0.08em;
}
.ad__chip small { font-size: var(--ad-fs-1); }
.ad__chip b { font-family: var(--font-en); font-weight: 500; font-size: var(--ad-fs-5); margin: 0 0.4cqw; }
.ad__note { margin-top: 1.6cqw; font-size: var(--ad-fs-1); letter-spacing: 0.1em; color: var(--ink-sub); }
.ad--a .ad__script { position: absolute; left: 5cqw; bottom: 3.2cqw; font-size: var(--ad-fs-7); color: var(--ad-gold); }

/* B：写真を全面に、下 40% に墨色の面 */
.ad--b img { position: absolute; inset: 0; }
.ad__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6cqw;
  background: rgba(51, 47, 39, 0.94);
  color: var(--white);
}
.ad--b .ad__script { margin-bottom: 1cqw; font-size: var(--ad-fs-7); color: var(--ad-beige); }
.ad__event-b { font-size: var(--ad-fs-8); letter-spacing: 0.06em; line-height: 1.05; }
.ad__event-b span {
  display: inline-block;
  margin-left: 2.4cqw;
  padding: 1.2cqw 2.8cqw;
  border-radius: 999px;
  background: var(--accent);
  font-size: var(--ad-fs-4);
  letter-spacing: 0.08em;
  vertical-align: 2.4cqw;
}
.ad__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6cqw 2.6cqw; margin-top: 3.4cqw; font-size: var(--ad-fs-3); letter-spacing: 0.04em; }

/* C：写真の下に、差し色の面（左）と白い面（右）を非対称に */
.ad--c { display: grid; grid-template-rows: 1fr 44%; }
.ad--c .ad__photo { position: relative; overflow: hidden; }
.ad__split { display: grid; grid-template-columns: 60% 1fr; }
.ad__split-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5cqw 5cqw;
  background: var(--accent);
  color: var(--white);
}
.ad--c .ad__script { margin-bottom: 2cqw; font-size: var(--ad-fs-7); color: #faf4ea; } /* 差し色の上で 4.5 以上を取るため、ほぼ白の生成り色 */
.ad__event-c { font-size: var(--ad-fs-5); letter-spacing: 0.06em; line-height: 1.35; }
.ad__event-c b { font-size: var(--ad-fs-8); letter-spacing: 0.08em; }
.ad__list { display: flex; flex-direction: column; justify-content: center; padding: 0 4cqw; }
.ad__list > div { padding: 1.6cqw 0; border-top: 1px solid rgba(51, 47, 39, 0.3); }
.ad__list > div:first-child { border-top: 0; }
.ad__list dt { font-size: var(--ad-fs-1); letter-spacing: 0.16em; color: var(--ink-sub); }
.ad__list dd { margin-top: 0.4cqw; font-size: var(--ad-fs-3); letter-spacing: 0.02em; line-height: 1.35; }

/* A・B の催事名は明朝で、参考の重さに寄せる（C はゴシックのまま） */
.ad__event, .ad__event-b {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-weight: 600;
}
.ad__event-b span { font-family: var(--font-jp); font-weight: var(--weight-bold); }
/* SP：広告を画面幅の 84% で見せ（次の 1 枚が端に覗く）、小さな文字は 11px を下回らないようにする */
@media (max-width: 767px) {
  .ad { flex-basis: 84vw; }
  .ad__brand small, .ad__tagline, .ad__note, .ad__dow, .ad__tag, .ad__list dt, .ad__brand-label, .ad__chip small { font-size: max(11px, var(--ad-fs-1)); }
  .ad__dow { width: max(20px, 4.8cqw); height: max(20px, 4.8cqw); } /* 11px の字の箱が丸の内側に収まる大きさ */
  /* 丸を大きくした分、日付の行を少し詰めて 1 行に保つ（折り返すと催事名がチップに重なる）
     v8：日付は PC と同じ 8.2cqw、時刻は本文の段（3.8cqw）。日付の中でも折り返さない */
  .ad__when { flex-wrap: nowrap; gap: 0 1.6cqw; }
  .ad__date { white-space: nowrap; }
  .ad__time { font-size: var(--ad-fs-3); }
  .ad__dow { margin: 0 0.2cqw 0 0.3cqw; }
  .ad__list dd { font-size: max(13px, var(--ad-fs-3)); }
  .ad__meta { font-size: max(12px, var(--ad-fs-3)); }
}
.ads__note { margin-top: 16px; color: var(--ink-sub); font-size: var(--fs-caption-m); }
@media (min-width: 768px) {
  .ads__strip { overflow: visible; margin-top: 56px; }
  .ads__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: calc(var(--width-content) + var(--gutter) * 2);
    margin-inline: auto;
  }
  .ads__track::after { display: none; }
  .ad { flex: none; }
  .ads__note { margin-top: 20px; }
}

/* 第4段 β版の条件 */
.plan__price {
  margin-top: 40px;
  font-family: var(--font-en);
  font-weight: 300;
  line-height: 1;
}
.plan__price-num { margin: 0 8px 0 6px; font-size: var(--fs-price); letter-spacing: -0.02em; }
.plan__price-unit { font-family: var(--font-jp); font-size: var(--fs-body-s); font-weight: var(--weight-bold); }
.plan__body { margin-top: 48px; }
.conditions { border-top: 1px solid var(--line); }
.conditions__row { padding-block: 22px; border-bottom: 1px solid var(--line); }
.conditions dt { font-weight: var(--weight-bold); }
.conditions dd { margin-top: 4px; }
.conditions__terms { margin-top: 32px; }
.conditions__terms + p { margin-top: 20px; }
@media (min-width: 768px) {
  .plan__grid {
    display: grid;
    grid-template-columns: 34% 1fr;
    column-gap: 72px;
    align-items: start;
  }
  .plan__body { margin-top: 0; }
  .conditions__row { display: grid; grid-template-columns: 6em 1fr; gap: 24px; padding-block: 28px; }
  .conditions dd { margin-top: 0; }
}

/* 第4段 How It Works の後半：ご依頼からお渡しまで。番号と罫線で区切る（箱にしない）
   v6 の単独の段より縦を詰める。SP は番号を左、見出しと文を右に置いて 1 行ぶん浅くする */
.how__subtitle {
  margin-top: 64px;
  font-size: var(--fs-subhead);
  font-weight: var(--weight-bold);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.steps { margin-top: 20px; border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.step__num {
  grid-row: 1 / span 2;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--accent);
}
.step__title { font-size: var(--fs-subhead); font-weight: var(--weight-bold); line-height: 1.6; letter-spacing: 0.08em; }
.step p:last-child { margin-top: 2px; font-size: var(--fs-body-s); }
.how__foot { margin-top: 32px; font-size: var(--fs-subhead); font-weight: var(--weight-bold); }
@media (min-width: 768px) {
  .how__subtitle { margin-top: 96px; }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; padding-top: 32px; }
  .step { display: block; padding: 0 32px 8px; border-bottom: 0; border-left: 1px solid var(--line); }
  .step:first-child { padding-left: 0; border-left: 0; }
  .step__title { margin-top: 20px; }
  .step p:last-child { margin-top: 8px; }
  .how__foot { margin-top: 56px; }
}

/* 第7段 よくある質問 */
.faq { margin-top: 48px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  padding: 24px 48px 24px 0;
  font-weight: var(--weight-bold);
  line-height: 1.8;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-weight: 300;
  font-size: var(--fs-tile-num);
  line-height: 1;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding: 0 48px 28px 0; color: var(--ink-sub); }
@media (min-width: 768px) {
  .faq-section__grid { display: grid; grid-template-columns: 34% 1fr; column-gap: 72px; }
  .faq { margin-top: 0; }
  .faq__item summary { padding-block: 30px; }
}

/* 第6段 作例：戸建て 5 点と集合住宅 6 点を、縦長のタイルを余白なしで端から端まで並べた帯にし、横にスクロールする
   文字は画像に直接置き、下端 20% のグラデーション（最大 0.45）と文字の影だけで読ませる
   PC は JS で、左右の矢印・ホイールの上下・掴んで動かす操作でも横に送れる（JS が無くても横スクロールで動く） */
.strip {
  margin-top: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 47, 39, 0.45) transparent;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: rgba(51, 47, 39, 0.45); border-radius: 3px; }
.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.strip__track { display: flex; }
.tile {
  position: relative;
  flex: 0 0 calc(100% / 1.2);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
/* 主役が入る位置で切り抜く */
.tile--a1 img { object-position: 0% 50%; }
.tile--a2 img { object-position: 55% 50%; }
.tile--a3 img { object-position: 50% 0%; }
.tile--a4 img { object-position: 72% 50%; }
.tile--a5 img { object-position: 50% 0%; }
.tile--a6 img { object-position: 50% 0%; }
.tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
/* 下端がレースのカーテンと白い床の 2 枚だけ、ラベルの行の影を強める（高さ 20%、0.55 を下から 10% まで） */
.tile--a2::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 100%);
}
.tile--a3::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0) 94%);
}
/* 下端の明るい 3 枚は、文字の影を強めて読ませる */
.tile--a2 .tile__cap,
.tile--a3 .tile__cap,
.tile--a6 .tile__cap { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
/* a6 は明るさの比を 0.85 以上に保つため、濃い部分を低くする */
.tile--a6::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 0, 0) 94%);
}
.tile__cap {
  position: absolute;
  z-index: 1;
  left: 20px;
  bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.tile__en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-tile-num);
  line-height: 1.15;
  letter-spacing: 0.06em;
}
.tile__jp { font-size: var(--fs-caption-m); font-weight: var(--weight-bold); line-height: 1.6; }
.tile--h1 img { object-position: 20% 50%; }
.tile--h2 img { object-position: 50% 50%; }
.tile--h3 img { object-position: 55% 50%; }
.tile--h4 img { object-position: 50% 50%; }
.tile--h5 img { object-position: 50% 50%; }
/* PC で帯を動かす左右の矢印。JS が帯を .strip-wrap で包んで足す。SP には出さない */
.strip-wrap { position: relative; }
.strip__nav { display: none; }
@media (prefers-reduced-motion: reduce) { .strip__nav { transition: none; } }
@media (min-width: 768px) {
  .strip { margin-top: 28px; }
  /* JS があるときだけ、掴んで動かせることをカーソルで示す。動かしている間は吸着を止める */
  .strip.is-grab { cursor: grab; }
  .strip.is-dragging { cursor: grabbing; user-select: none; }
  .strip.is-free { scroll-snap-type: none; }
  .strip__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
  }
  .strip__nav--prev { left: 20px; }
  .strip__nav--next { right: 20px; }
  .strip__nav svg { width: 18px; height: 18px; }
  .strip__nav:hover { background: var(--ink); color: var(--white); }
  .strip__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .strip__nav:disabled { opacity: 0.35; cursor: default; background: var(--white); color: var(--ink); }
  /* 4 枚と 5 枚目の端が見える幅にして、横に続くことを示す */
  .tile { flex-basis: calc(100% / 4.25); }
  .tile__cap { left: 24px; bottom: 14px; }
}

/* 第8段 終端バナー：全幅画像に文を重ねる。元が暗い室内なので影は 0.35 以下、文の後ろだけ */
.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  color: var(--white);
  overflow: hidden;
}
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__body { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 56px; }
.banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.banner__body { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.banner__body .button { text-shadow: none; }
.banner__title {
  margin-top: 16px;
  font-size: var(--fs-heading);
  font-weight: var(--weight-bold);
  line-height: 1.55;
  letter-spacing: 0.08em;
}
.banner__text { margin-top: 20px; max-width: 34em; }
/* PC：画像の左下の元から暗い範囲（幅 30% ほど）に文を収める */
@media (min-width: 768px) { .banner__text { max-width: 25em; } }
/* SP：影 0.35 では本文が 4.5 に届かないため、画像の下の墨色の帯に文を出し、画像は無加工で見せる */
@media (max-width: 767px) {
  .banner { display: block; min-height: 0; background: var(--ink); }
  .banner__img { position: static; height: auto; }
  .banner__body { padding-top: 48px; padding-bottom: 64px; }
  .banner::after { display: none; }
  .banner__body { text-shadow: none; }
}
@media (min-width: 768px) {
  .banner { min-height: 760px; height: 88vh; }
  .banner__body { padding-bottom: 40px; }
}

/* 第9段 フッター */
.site-footer {
  padding-block: 72px 40px;
  background: var(--ink);
  color: #ebe6da;
  font-size: var(--fs-caption-m);
}
.site-footer__name { font-weight: var(--weight-bold); font-size: var(--fs-body-s); letter-spacing: 0.08em; }
.site-footer__en { margin-top: 14px; font-size: var(--fs-caption-s); }
.site-footer__row { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 40px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(235, 230, 218, 0.25);
  font-size: var(--fs-caption-s);
}
@media (min-width: 768px) {
  .site-footer { padding-top: 96px; }
  .site-footer__grid { display: flex; justify-content: space-between; align-items: flex-start; }
  .site-footer__row { margin-top: 4px; }
  .site-footer__bottom { margin-top: 80px; }
}

/* スクロールで要素をふわっと出す（JS が動くときだけ隠す） */
.js .fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}
.js .fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .fade { opacity: 1; transform: none; transition: none; }
  .hero__slide { animation: none; }
  .button { transition: none; }
}

/* 免責事項ページ */
.page-terms .site-header { border-bottom: 1px solid var(--line); }
.terms-page { padding-block: 56px var(--section-pad); }
.terms-page .container > * { max-width: 760px; }
.back-link { font-size: var(--fs-caption-m); }
.back-link a { color: var(--accent); }
.terms-page .back-link:last-child { margin-top: 64px; }
.terms__title { margin-top: 32px; font-size: var(--fs-heading); font-weight: var(--weight-bold); line-height: 1.5; letter-spacing: 0.08em; }
.terms__intro { margin-top: 24px; padding: 24px 28px; background: var(--beige); }
.terms__section { margin-top: 56px; }
.terms__section h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-subhead);
  font-weight: var(--weight-bold);
  line-height: 1.6;
}
.terms__section ul { margin-top: 18px; }
.terms__section li { position: relative; padding-left: 1.2em; }
.terms__section li + li { margin-top: 12px; }
.terms__section li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
@media (min-width: 768px) {
  .terms-page { padding-top: 88px; }
}

/* v5：申込ボタンの並び、PC と SP で文言を替える部品（v7.5：.pc-only はヘッダーの名前の「（β版）」） */
.sp-only { display: inline; }
.br-pc-inline, .pc-only { display: none; }
@media (min-width: 768px) {
  .sp-only { display: none; }
  .br-pc-inline, .pc-only { display: inline; }
}
.button-row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.conditions__terms + .button-row { margin-top: 20px; }
.button-row + .cta__note { color: var(--ink-sub); }
.faq__cta { margin-top: 40px; }
.faq__cta .cta__note { color: var(--ink-sub); }

/* v5：ヒアリングで決めること（番号と罫線。箱は作らない） */
.needs__grid { margin-top: 48px; }
.needs__col { margin: 0; padding: 0; list-style: none; }
.need { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.needs__col:last-child .need:last-child { border-bottom: 1px solid var(--line); }
.need__num { font-family: var(--font-en); font-weight: 300; font-size: var(--fs-display); line-height: 1; color: var(--accent); }
.need__title { font-size: var(--fs-subhead); font-weight: var(--weight-bold); line-height: 1.5; letter-spacing: 0.08em; }
.need p:last-child { margin-top: 6px; }
.needs__foot { margin-top: 28px; color: var(--ink-sub); }
@media (min-width: 768px) {
  .needs__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; margin-top: 72px; }
  .needs__col:first-child .need:last-child { border-bottom: 1px solid var(--line); }
  .need { grid-template-columns: 88px 1fr; padding: 32px 0; }
}

/* v6：申込フォームの段（自作のフォーム。送信先は Google フォーム）
   v7.5：PC は FAQ の段と同じ 2 列（左に見出しと連絡先、右にフォーム。左は固定しない）。SP は 1 列のまま */
.apply-form__body > * { max-width: 760px; }
.apply-form { scroll-margin-top: 16px; } /* ヘッダーは固定していないため、飛んだ先の上端に少し余白を残す程度 */
.apply-form__note { margin-top: 28px; }
.form a { color: var(--accent); }

.form { margin-top: 48px; border-top: 1px solid var(--line); }
.form__field { margin: 0; padding: 28px 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.form__group legend { float: left; width: 100%; padding: 0; } /* float で legend を枠線の上から外し、他の欄と同じ余白の中に置く */
.form__group legend + * { clear: both; }
.form__label { display: block; font-size: var(--fs-body-s); font-weight: var(--weight-bold); line-height: 1.6; letter-spacing: 0.08em; }
.form__req, .form__opt {
  display: inline-block;
  margin-left: 12px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--fs-caption-s);
  font-weight: var(--weight-body);
  line-height: 1.8;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}
.form__req { background: var(--accent); color: var(--white); }
.form__opt { border: 1px solid var(--line); color: var(--ink-sub); line-height: calc(1.8em - 2px); }
.form__help { margin-top: 4px; font-size: var(--fs-caption-m); line-height: 1.8; color: var(--ink-sub); }
.form__input {
  display: block;
  width: 100%;
  min-height: var(--button-height);
  margin-top: 12px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body-s); /* 16px 未満だと iPhone で入力時に拡大される */
  letter-spacing: 0.04em;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}
.form__input:hover { border-color: rgba(51, 47, 39, 0.45); }
.form__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.form__input[aria-invalid="true"] { border-color: var(--accent); }
.form__textarea { min-height: 0; padding-block: 14px; line-height: 1.8; resize: vertical; }
.form__unit { display: flex; align-items: center; gap: 12px; }
.form__unit span { margin-top: 12px; }
.form__input--short { width: 8em; }
.form__choices { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; }
.form__choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 20px 8px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  cursor: pointer;
  transition: border-color 0.2s;
}
.form__choice:hover { border-color: rgba(51, 47, 39, 0.45); }
.form__choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.form__choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__choice:has(input:checked) { border-color: var(--accent); }
.form__choice:has(input[aria-invalid="true"]) { border-color: var(--accent); }
.form__error { font-size: var(--fs-caption-m); line-height: 1.7; color: var(--accent-dark); font-weight: var(--weight-bold); }
.form__error:not(:empty) { margin-top: 8px; }
.form__error:not(:empty)::before { content: "！ "; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { padding-top: 40px; }
.form__submit .button { cursor: pointer; font-family: inherit; }
.form__submit .button:disabled { opacity: 0.6; cursor: default; }
.form__done { margin-top: 48px; padding: 32px 28px; border-top: 2px solid var(--accent); background: var(--white); }
.form__done:focus { outline: none; }
.form__done-title { font-size: var(--fs-subhead); font-weight: var(--weight-bold); line-height: 1.7; letter-spacing: 0.08em; }
.form__done-text { margin-top: 12px; font-size: var(--fs-body-s); color: var(--ink-sub); }
.form__done-text a { color: var(--accent); }
@media (min-width: 768px) {
  .apply-form__inner { display: grid; grid-template-columns: 34% 1fr; column-gap: 72px; align-items: start; }
  .form { margin-top: 0; } /* FAQ と同じく、右列の上の罫線を左列の先頭（Apply）の高さに置く */
  .form__field { padding: 32px 0; }
  .form__done { margin-top: 0; padding: 40px 48px; } /* 送信後はフォームが消え、完了表示が右列の先頭になる */
}
@media (prefers-reduced-motion: reduce) { .form__input, .form__choice { transition: none; } }

/* v5：スマホの申込の帯（ヒーローを過ぎたら下に固定。終端バナーと申込フォームが見えている間は消す） */
.apply-bar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 56px; }
  .js .apply-bar {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    background: var(--accent);
    color: var(--white);
    font-weight: var(--weight-bold);
    font-size: var(--fs-body-s);
    letter-spacing: 0.1em;
    text-decoration: none;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s, visibility 0s 0.3s;
  }
  .js .apply-bar.is-shown { transform: none; visibility: visible; transition: transform 0.3s; }
}
@media (prefers-reduced-motion: reduce) { .js .apply-bar, .js .apply-bar.is-shown { transition: none; } }

/* 404 */
.notfound__back { margin-top: 40px; }