/* ============================================================
   - すべて #contents 配下にスコープ化(クラス名の共通CSS衝突を回避)
   - :root変数/全体リセットも #contents 内へ
   ============================================================ */

/* 約物半角フォント Yaku Han JP — 句読点・括弧類のみ unicode-range で差し替え
   （他の字は元の Noto Serif/Sans JP 等へフォールバック）
   YakuHanMP=明朝用 / YakuHanJP=ゴシック用。@import はスタイルルールより前に置く。 */
@import url("yakuhanjp-master/css/yakuhanjp.min.css");
@import url("yakuhanjp-master/css/yakuhanmp.min.css");

/* ============================================================
   【横スクロール対策】案A — 撤回する場合はこのブロックごと削除
   原因: responsive.js が読む site.css 系の #page { min-width: 980px }
   方針: 共通CSSは触らず、LP用 lp.css で上書き（編集ルール 運用2）
   ============================================================ */
html.g-wf #page,
#page {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

html {
  overflow-x: clip;
}

/* カスタムプロパティ + キャンバス背景 — #contents へスコープ */
#contents {
  /* Surfaces (Material tonal nesting) */
  --surface: #131313;
  --surface-low: #1b1c1c;
  --surface-high: #2a2a2a;
  --surface-highest: #353535;
  --surface-lowest: #0d0d0d;

  /* Foreground */
  --on-surface: #e4e2e1;
  --on-surface-variant: #b6b1ac;
  --on-surface-mute: #7a756f;

  /* Brand — champagne */
  --primary: #dcc2a7;
  --primary-container: #a89178;
  --on-primary: #3d2d1a;

  /* ゴールド地ボタンの塗り — 既存の斜めグラデに、上部のごく淡い光沢を
     重ねて高級感を出す（わずかに）。塗りCTA共通で使用 */
  --gold-fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);

  /* Subtle accents */
  --outline-variant: rgba(228, 226, 225, 0.15);
  --outline-faint: rgba(228, 226, 225, 0.06);

  /* Type — 先頭に YakuHan を置き、約物のみ半角差し替え（残りは後続フォント） */
  --serif: "YakuHanMP", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Manrope", "YakuHanJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --jp-sans: "YakuHanJP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;

  /* 本文・注釈（SP基準。PCは .lp の @container 700px+ で上書き） */
  --lp-text-body: 15px;
  --lp-text-body-lh: 1.8;
  --lp-text-note: 12px;
  --lp-text-note-lh: 1.75;

  /* 明朝リード — サイズ PC/SP 共通（.lp 16px 基準で 1.2em≒19.2px） */
  --lp-serif-lead-size: 1.2em;

  /* 章セクション余白 — PC/SP 共通 em（§02 Residences 基準。16px 基準で 6em≒96px） */
  --lp-section-pad-y: 6em;
  --lp-section-pad-x: 1.5em;
  --lp-midcta-pad-top: 4em;

  background: #08090a;
  /* basic.css の #contents { font-family: ゴシック } 直指定を打ち消す */
  font-family: inherit;
}

/* 明朝リード — フォントサイズ PC/SP 共通 */
#contents .philo-aside-lede,
#contents .philo-aside-coda,
#contents .philo-aside-cta-lead,
#contents .detail-close-lede {
  font-size: var(--lp-serif-lead-size);
}

#contents .resi-lede-coda,
#contents .col-expert-quote,
#contents .finalcta-promise {
  font-size: var(--lp-serif-lead-size) !important;
}

/* 注釈・補足（※〜）。注釈 p には必ず .lp-note を併用する運用ルール。
   これにより本文一括ルール(下部)の :not(.lp-note) 一つで全注釈を除外できる。 */
#contents .lp-note {
  font-family: var(--sans);
  font-size: var(--lp-text-note);
  line-height: var(--lp-text-note-lh);
  color: var(--on-surface-mute);
  letter-spacing: 0.04em;
}

/*
 * 本文 p — basic.css の p { line-height: 1.5 } は要素直指定のため、
 * 親 .philo-body 等の font-size / line-height だけでは p に届かない。
 */
#contents .lp p:not(.lp-note):not(.fv-main):not(.philo-aside-lede):not(.philo-aside-coda):not(.philo-aside-cta-lead):not(.detail-close-lede):not(.resi-lede-coda):not(.col-expert-quote):not(.finalcta-promise) {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
}

/* 共通CSSの font-family 直指定を打ち消し、親の指定を継承させる。
   SP: phbases/sp.css の * { font-family: sans-serif }（768px以下）
   PC: 子 em/span への直指定はないが、#contents ゴシック連鎖を断つ。
   .lp / .philo-head 等の個別 font-family は詳細度で優先される。 */
#contents * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

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

/* 本文タイポグラフィ(旧 html,body から移設。.lp は font-family/color を保持) */
#contents .lp {
  font-size: 16px;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* 章ブロック余白 — 変数で PC/SP 同一 */
#contents .philo,
#contents .detail,
#contents .proc,
#contents .col-expert,
#contents .perf,
#contents .finalcta-inner {
  padding: var(--lp-section-pad-y) var(--lp-section-pad-x);
}

#contents .resi {
  padding: var(--lp-section-pad-y) 0;
}

/* SP のみ改行（@container lp 700px 未満で有効） */
#contents .lp br.lp-br-sp {
  display: inline;
}

/* PC のみ改行（@container lp 700px 以上で有効） */
#contents .lp br.lp-br-pc {
  display: none;
}

/* 本文サイズ PC — viewport 基準（container 単体だと変数が子に届かない環境があるため併用） */
@media (min-width: 700px) {
  #contents .lp {
    --lp-text-body: 18px;
    --lp-text-note: 13px;
  }

  #contents .lp br.lp-br-pc {
    display: inline;
  }
}

@container lp (min-width: 700px) {
  #contents .lp {
    --lp-text-body: 18px;
    --lp-text-note: 13px;
  }

  #contents .lp br.lp-br-sp {
    display: none;
  }

  #contents .lp br.lp-br-pc {
    display: inline;
  }
}

#renketsu_navi,
#renketsu_foot {
  display: none;
}

/* ============================================================
   LP page styles — applied inside .lp scope
   so it works at both mobile (390px) and desktop widths
   ============================================================ */
#contents .lp {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--jp-sans);
  width: 100%;
  height: 100%;
  /* .lp はスクロールコンテナではない（縦スクロールはウィンドウ側）。
     overflow-x: clip で .fadeinR 等の画面外要素（右+300px）を枠内にクリップし、
     横スクロール／右端のスクロールバー用ガター（余白）を防ぐ。 */
  overflow-x: clip;
}

/* ------ container width logic ------
   .lp inherits its width from parent (phone screen or desktop frame).
   We use container queries so a single set of components reflows. */
#contents .lp {
  container-type: inline-size;
  container-name: lp;
}

/* ============================================================
   Top nav
   ============================================================ */
#contents .lp-nav {
  /* 追従（sticky）はさせない方針。共通CSS（basic.css）の #page{overflow:hidden}
     下では sticky が効かないため、誤解防止で指定自体を置かない。
     ページ内固定導線は右下の .lp-fixedcta が担う */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(19, 19, 19, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

#contents .lp-nav-logo {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--on-surface);
}

#contents .lp-nav-logo small {
  display: block;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--on-surface-mute);
  text-transform: uppercase;
  margin-bottom: 2px;
}

#contents .lp-nav-cta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  /* ボタンと分かるように罫線を付与 */
  padding: 8px 14px;
  border: 1px solid rgba(220, 194, 167, 0.45);
  border-radius: 2px;
  opacity: 0.9;
  transition: opacity 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, background 0.3s ease;
}

#contents .lp-nav-cta::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

@container lp (min-width: 700px) {
  #contents .lp-nav {
    padding: 24px 56px;
  }

  #contents .lp-nav-logo {
    font-size: 16px;
  }

  #contents .lp-nav-cta {
    font-size: 11px;
  }
}

#contents .btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: var(--gold-fill);
  color: var(--on-primary);
  font-family: var(--jp-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

#contents .btn-primary span:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0.04em;
}

#contents .btn-primary span:first-child em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-primary);
  opacity: 0.7;
}

#contents .btn-primary .arrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
}

@container lp (min-width: 700px) {
  #contents .btn-primary {
    flex: 1.4;
    padding: 28px 32px;
    font-size: 16px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* フッター（.lp-foot）は廃止。右下フローティングCTA（.lp-fixedcta）に集約。 */


/* ============================================================
   LP v2 — additive styles, 構成案 v1 準拠
   Reuses tokens from stage.css + base rules from lp.css
   ============================================================ */
/* ===========================================================
   §2 Philosophy — vertical photo (吹き抜けリビング)
   =========================================================== */
#contents .philo-photo {
  margin: 8px 0 12px;
  margin-left: calc(-1 * var(--lp-section-pad-x));
  margin-right: auto;
  width: min(88%, 28em);
  max-width: 28em;
}

#contents .philo-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) brightness(0.97);
  display: block;
}

@container lp (min-width: 700px) {
  #contents .philo-photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
    justify-self: start;
    height: 100%;
    min-height: 0;
    margin: 0;
    margin-left: calc(-1 * var(--lp-section-pad-x));
    width: calc(100% + var(--lp-section-pad-x));
    max-width: none;
  }

  #contents .philo-photo img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 520px;
    max-height: 800px;
  }
}

/* ===========================================================
   §5 Process — exterior photo background
   =========================================================== */
#contents .proc {
  position: relative;
  overflow: hidden;
}

#contents .proc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#contents .proc-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: brightness(0.46) saturate(0.9);
  display: block;
}

#contents .proc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(19, 19, 19, 0.48) 0%,
      rgba(19, 19, 19, 0.74) 55%,
      rgba(19, 19, 19, 0.92) 100%);
}

/* keep all process content above the photo */
#contents .proc-head,
#contents .proc-steps {
  position: relative;
  z-index: 1;
}

/* ===========================================================
   §8 Final CTA button — inquiry-form icon
   =========================================================== */
#contents .finalcta-btn {
  gap: 18px;
}

#contents .finalcta-btn .finalcta-btn-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(61, 45, 26, 0.28);
  border-radius: 2px;
}

#contents .finalcta-btn .finalcta-btn-icon svg {
  width: 22px;
  height: 22px;
  color: var(--on-primary);
}

#contents .finalcta-btn .finalcta-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 auto;
  text-transform: none;
  letter-spacing: 0.04em;
}

#contents .finalcta-btn .finalcta-btn-text em {
  font-style: normal;
  font-family: var(--jp-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--on-primary);
  opacity: 0.8;
}

@container lp (min-width: 700px) {
  #contents .finalcta-btn .finalcta-btn-icon {
    width: 48px;
    height: 48px;
  }

  #contents .finalcta-btn .finalcta-btn-icon svg {
    width: 26px;
    height: 26px;
  }
}

/* ===========================================================
   §1 FV — 4枚クロスフェードスライドショー
   =========================================================== */
#contents .fv {
  position: relative;
  background: var(--surface-lowest);
  overflow: hidden;
  /* コンテンツ駆動：コピー量に応じて高さが伸縮する。
     max-height は付けない（付けると再び上端＝タイトルが切れる）。
     min-height は下限フロア＝max(560px 絶対下限, 92cqi 比例下限)。 */
  min-height: max(560px, 92cqi);
  /* コピーは通常フローで下寄せ配置し、背景スライドショー（絶対配置）に重ねる */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* コピー余白＝旧 .fv-copy の inset を padding 化。
     上=タイトル／ヘッダーのクリアランス（実機ヘッダー分はステージングで最終調整） */
  padding: 56px 20px 84px;
  box-sizing: border-box;
}

#contents .fv-slideshow {
  position: absolute;
  inset: 0;
}

#contents .fv-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.7) saturate(0.92);
  opacity: 0;
  animation: fvFade 28s infinite;
}

#contents .fv-slide[data-i="0"] {
  animation-delay: 0s;
}

#contents .fv-slide[data-i="1"] {
  animation-delay: 7s;
}

#contents .fv-slide[data-i="2"] {
  animation-delay: 14s;
}

#contents .fv-slide[data-i="3"] {
  animation-delay: 21s;
}

@keyframes fvFade {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

#contents .fv-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 30%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

#contents .fv-copy {
  /* 通常フロー。ベール（絶対配置）より前面に出すため relative + z-index。
     左右・下端の余白は親 .fv の padding が持つ。 */
  position: relative;
  z-index: 2;
}

#contents h1.fv-title {
  font-family: var(--serif);
  font-weight: 200;
  /* 狭い画面では1行目「パナソニック ホームズの」が折れないよう
     コンテナ幅(cqi)に追従。上限30px / 下限20px */
  font-size: 1.65em;
  line-height: 1.32;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 1.5em;
  text-wrap: balance;
  padding: 0;
}

#contents .fv-title strong {
  display: block;
  /* 共通CSSの strong{} がサンセリフを直接指定して継承を上書きするため、
     ここで明朝(var(--serif))を明示して打ち消す */
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.65em;
  letter-spacing: 0.16em;
  margin-top: 6px;
  padding: 0;
}

#contents .fv-main {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 18px;
}

#contents .fv-main em {
  font-style: normal;
  color: var(--primary);
  font-weight: 400;
  border-bottom: 1px solid rgba(220, 194, 167, 0.4);
  padding-bottom: 2px;
}

#contents .fv-sub {
  font-family: var(--jp-sans);
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.04em;
  max-width: 30em;
  margin-bottom: 20px;
}

/* FV — 具体的な相談メリット3点 */
#contents .fv-benefits {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#contents .fv-benefits li {
  display: flex;
  gap: 12px;
  font-family: var(--jp-sans);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--on-surface-variant);
}

#contents .fv-benefits li::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 1px;
  margin-top: 0.72em;
  background: var(--primary);
}

#contents .fv-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  padding: 16px 22px;
  background: var(--gold-fill);
  color: var(--on-primary);
  text-decoration: none;
  min-width: 240px;
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

#contents .fv-cta .cta-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(61, 45, 26, 0.28);
  border-radius: 2px;
}

#contents .fv-cta .cta-icon svg {
  width: 21px;
  height: 21px;
  color: var(--on-primary);
  display: block;
}

#contents .fv-cta .cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  font-family: var(--jp-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

#contents .fv-cta em {
  display: block;
  font-style: normal;
  font-family: var(--jp-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.8;
}

#contents .fv-cta .arrow {
  font-size: 18px;
}

#contents .fv-dots {
  position: absolute;
  bottom: 36px;
  left: 20px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

#contents .fv-dots i {
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(228, 226, 225, 0.25);
  animation: fvDot 28s infinite;
}

#contents .fv-dots i:nth-child(1) {
  animation-delay: 0s;
}

#contents .fv-dots i:nth-child(2) {
  animation-delay: 7s;
}

#contents .fv-dots i:nth-child(3) {
  animation-delay: 14s;
}

#contents .fv-dots i:nth-child(4) {
  animation-delay: 21s;
}

@keyframes fvDot {

  0%,
  100% {
    background: rgba(228, 226, 225, 0.25);
    width: 18px;
  }

  5%,
  25% {
    background: var(--primary);
    width: 36px;
  }
}

#contents .fv-scroll {
  position: absolute;
  right: 20px;
  bottom: 32px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--on-surface-mute);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  z-index: 2;
}

#contents .fv-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--primary), transparent);
  margin: 12px auto 0;
}

@container lp (min-width: 700px) {
  #contents .fv {
    /* PC もコンテンツ駆動＋下限フロア方式。
       下限 = min(90cqi, 820px)（旧 height:90cqi / max-height:820px の見た目を再現）。
       コピーが収まる幅（目安 860px〜）では従来と同一の高さになり、
       収まらない幅（700〜850px のタブレット帯）だけ内容に合わせて伸びるため
       タイトルが上端で切れない。max-height は付けない（切れの元凶） */
    min-height: min(90cqi, 820px);
    /* 旧 .fv-copy の inset（左右 5em / 下 10em）を padding 化 */
    padding: 96px 5em 10em;
  }

  #contents .fv-copy {
    max-width: 80%;
  }

  #contents .fv-title {
    font-size: 50px;
    margin-bottom: 14px;
  }

  #contents .fv-title strong {
    margin-top: 2px;
  }

  #contents .fv-main {
    font-size: 21px;
    margin-bottom: 14px;
  }

  #contents .fv-sub {
    font-size: 18px;
    line-height: var(--lp-text-body-lh);
    margin-bottom: 18px;
    max-width: 36em;
  }

  #contents .fv-benefits {
    gap: 10px;
    margin-bottom: 28px;
  }

  #contents .fv-benefits li {
    font-size: 14px;
  }

  #contents .fv-scroll {
    right: 56px;
    bottom: 56px;
  }

  #contents .fv-dots {
    left: 5em;
    bottom: 10em;
  }

  #contents .fv-cta {
    padding: 22px 28px;
    min-width: 320px;
  }

  #contents .fv-cta .cta-text {
    font-size: 15px;
  }

  #contents .fv-cta em {
    font-size: 12px;
  }

  #contents .fv-cta .cta-icon {
    width: 44px;
    height: 44px;
  }

  #contents .fv-cta .cta-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* ===========================================================
   §2 Philosophy
   =========================================================== */
#contents .philo {
  background: var(--surface);
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* 設計図 背景 — 上品にぼかし、端はフェードアウト */
#contents .philo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/blueprint.jpg");
  background-size: 130%;
  background-position: 58% 40%;
  background-repeat: no-repeat;
  filter: invert(1) grayscale(1) contrast(1.15) brightness(1.05);
  opacity: 0.5;
  -webkit-mask-image:
    radial-gradient(120% 95% at 62% 42%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 75%);
  mask-image:
    radial-gradient(120% 95% at 62% 42%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 75%);
  pointer-events: none;
}

#contents .philo-eyebrow {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 36px;
}

#contents .philo-head {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 26px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 40px;
  text-wrap: pretty;
}

#contents .philo-head em {
  font-style: normal;
  color: var(--primary);
  font-weight: 300;
}

#contents .philo-body {
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
  max-width: 40em;
  margin: 4em 0;
}

#contents .philo-body p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
}

#contents .philo-body p+p {
  margin-top: 1.4em;
}

#contents .philo-body b {
  color: var(--on-surface);
  font-weight: 500;
}

#contents .philo-aside {
  border-top: 1px solid var(--outline-faint);
  padding-top: 10px;
}

#contents .philo-aside-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 60px;
}

#contents .philo-aside-photo {
  margin: 0;
  margin-left: auto;
  margin-right: calc(-1 * var(--lp-section-pad-x));
  justify-self: end;
  width: min(88%, 25em);
  max-width: 25em;
}

#contents .philo-aside-photo img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.92) brightness(0.97);
  display: block;
}

#contents .philo-aside-lede {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--on-surface);
  margin-bottom: 0;
  text-wrap: pretty;
}

#contents .philo-aside-lede-line1 {
  display: block;
  margin-bottom: 0.35em;
}

#contents .philo-aside-coda {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--on-surface);
  text-align: center;
  text-wrap: pretty;
  max-width: 36em;
  margin: 0 auto;
  padding: 0;
}

#contents .philo-aside-coda-line1 {
  display: block;
  margin-bottom: 0.35em;
}

#contents .philo-aside-cta {
  text-align: center;
}

#contents .philo-aside-cta-lead {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  text-wrap: pretty;
  padding: 2em var(--lp-section-pad-x) 0;
  margin: 0;
}

@container lp (min-width: 700px) {
  #contents .philo {
    display: grid;
    grid-template-columns: 0.82fr 1.5fr;
    column-gap: 72px;
    row-gap: 28px;
    align-items: start;
  }

  #contents .philo-eyebrow {
    margin-bottom: 0;
    grid-row: 1;
    grid-column: 2;
  }

  #contents .philo-head {
    grid-row: 2;
    grid-column: 2;
    font-size: 40px;
    margin-bottom: 0;
  }

  #contents .philo-body {
    grid-row: 3;
    grid-column: 2;
    margin-bottom: 0;
    margin-top: 12px;
  }

  #contents .philo-aside {
    grid-row: 4;
    grid-column: 1 / -1;
    margin-top: 13px;
    padding-top: 14px;
  }

  #contents .philo-aside-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 32px 48px;
    align-items: center;
    margin-bottom: 84px;
  }

  #contents .philo-aside-lede {
    max-width: min(100%, 44em);
    align-self: center;
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
  }

  #contents .philo-aside-photo {
    justify-self: end;
    align-self: center;
    margin-right: calc(-1 * var(--lp-section-pad-x));
    width: min(100%, 25em);
    max-width: 25em;
  }

  #contents .philo-aside-photo img {
    max-width: 100%;
  }

  #contents .philo-aside-coda {
    max-width: none;
    width: 100%;
  }
}


/* 1行目は大きい画面のみ改行抑制（狭い画面は自然折り返し） */
@container lp (min-width: 960px) {
  #contents .philo-aside-coda-line1 {
    white-space: nowrap;
    margin-bottom: 0.4em;
  }

  #contents .philo-aside-lede {
    max-width: none;
  }

  #contents .philo-aside-lede-line1 {
    white-space: nowrap;
    margin-bottom: 0.4em;
  }
}

/* ===========================================================
   §3 Residences — magazine static grid (no captions)
   =========================================================== */
#contents .resi {
  background: var(--surface-low);
}

#contents .resi-head {
  padding: 0 var(--lp-section-pad-x);
  margin-bottom: 56px;
}

#contents .resi-head .num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--on-surface-mute);
  text-transform: uppercase;
  margin-bottom: 20px;
}

#contents .resi-head h2 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 32px;
  text-wrap: balance;
}

#contents .resi-head h2 em {
  font-style: normal;
  color: var(--primary);
  font-weight: 300;
}

#contents .resi-lede p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

#contents .resi-lede p+p {
  margin-top: 1.2em;
}

#contents .resi-lede-coda {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: var(--on-surface) !important;
  margin-top: 1.6em !important;
  border-left: 1px solid var(--primary);
  padding-left: 16px;
}

#contents .resi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 0 var(--lp-section-pad-x);
}

#contents .resi-cell {
  position: relative;
  overflow: hidden;
}

#contents .resi-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3;
}

#contents .resi-cell.c1 img {
  aspect-ratio: 16/10;
}

#contents .resi-cell.c2 img {
  aspect-ratio: 4/5;
}

#contents .resi-cell.c5 img {
  aspect-ratio: 5/4;
  /* 縦長セルでは左揃えクロップ：左の襖を見せ、右下を見切らせない */
  object-position: left center;
}

/* 章間 CTA（midcta）— 直上余白は §02 と同一変数 */
#contents .resi-foot {
  margin-top: 0;
  padding: var(--lp-midcta-pad-top) var(--lp-section-pad-x) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@container lp (min-width: 700px) {
  #contents .resi-head {
    margin-bottom: 96px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    column-gap: 72px;
    align-items: end;
  }

  #contents .resi-head .num {
    grid-column: 1;
    margin-bottom: 0;
    align-self: start;
  }

  #contents .resi-head h2 {
    grid-column: 1;
    font-size: 42px;
    margin-bottom: 0;
    align-self: end;
  }

  #contents .resi-lede {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #contents .resi-lede p {
    font-size: var(--lp-text-body);
  }

  #contents .resi-lede-coda {
    padding-left: 24px;
  }

  /* magazine layout: 1 large + 2x2 small + 1 wide */
  #contents .resi-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 220px;
    gap: 12px;
  }

  #contents .resi-cell img {
    aspect-ratio: auto !important;
    height: 100%;
  }

  #contents .resi-cell.c1 {
    grid-column: 1 / span 8;
    grid-row: span 2;
  }

  #contents .resi-cell.c2 {
    grid-column: 9 / span 4;
    grid-row: span 2;
  }

  #contents .resi-cell.c3 {
    grid-column: 1 / span 4;
    grid-row: span 2;
  }

  #contents .resi-cell.c4 {
    grid-column: 5 / span 5;
    grid-row: span 2;
  }

  #contents .resi-cell.c5 {
    grid-column: 10 / span 3;
    grid-row: span 2;
  }

  #contents .resi-cell.c6 {
    grid-column: 3 / span 8;
    grid-row: span 2;
    margin-top: 0;
  }
}

/* ===========================================================
   Shared: mid-section CTA pill
   =========================================================== */
#contents .midcta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  padding: 18px 26px;
  border: 1px solid var(--primary);
  color: var(--on-surface);
  font-family: var(--jp-sans);
  text-decoration: none;
  background: transparent;
  opacity: 0.9;
  transition: background 0.3s ease, opacity 0.3s ease,
    border-color 0.3s ease, color 0.3s ease;
    width: 100%;
    max-width: 480px;
}

#contents .midcta:hover {
  background: rgba(220, 194, 167, 0.08);
}

#contents .midcta .cta-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--outline-variant);
  border-radius: 2px;
}

#contents .midcta .cta-icon svg {
  width: 21px;
  height: 21px;
  color: var(--primary);
  display: block;
}

#contents .midcta .cta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  text-align: center;
}

#contents .midcta-assure {
  font-family: var(--jp-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--on-surface-variant);
  text-wrap: balance;
}

#contents .midcta-main {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--primary);
}

#contents .midcta .arrow {
  color: var(--primary);
  font-size: 18px;
}

@container lp (min-width: 700px) {
  #contents .midcta {
    padding: 22px 34px;
    min-width: 360px;
  }

  #contents .midcta-assure {
    font-size: 13px;
  }

  #contents .midcta-main {
    font-size: 20px;
  }
}

/* nav inquiry link — small form icon */
#contents .lp-nav-cta .cta-icon {
  display: flex;
  align-items: center;
}

#contents .lp-nav-cta .cta-icon svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
  display: block;
}

/* ===========================================================
   §4 Detail & Craftsmanship
   =========================================================== */
#contents .detail {
  background: var(--surface);
}

#contents .detail-head {
  margin-bottom: 48px;
}

#contents .detail-head .num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--on-surface-mute);
  text-transform: uppercase;
  margin-bottom: 20px;
}

#contents .detail-head h2 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 28px;
  text-wrap: balance;
}

#contents .detail-head h2 em {
  font-style: normal;
  color: var(--primary);
  font-weight: 300;
}

#contents .detail-lede {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

#contents .detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

#contents .detail-card {
  display: flex;
  flex-direction: column;
}

#contents .detail-img {
  position: relative;
  overflow: hidden;
}

#contents .detail-img img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: saturate(0.92);
}

#contents .detail-card:first-child .detail-img img {
  transform: scale(2);
  transform-origin: 60% 45%;
}

#contents .detail-meta {
  margin-top: 18px;
}

#contents .detail-cat {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 12px;
}

#contents .detail-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  text-wrap: pretty;
}

#contents .detail-close {
  text-align: center;
}

#contents .detail-close-lede {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--on-surface);
  text-wrap: pretty;
  max-width: 36em;
  margin: 0 auto;
  padding: 4em 0 0;
}

@container lp (min-width: 700px) {
  #contents .detail-head {
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    column-gap: 72px;
    align-items: start;
  }

  #contents .detail-head .num {
    grid-column: 1;
    margin-bottom: 0;
  }

  #contents .detail-head h2 {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 42px;
    margin-bottom: 0;
  }

  #contents .detail-lede {
    grid-column: 1;
    max-width: 26em;
  }

  #contents .detail-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  #contents .detail-img img {
    aspect-ratio: 3/4;
  }

  #contents .detail-card h3 {
    font-size: 18px;
  }
}


/* ===========================================================
   §5 Process — 4 step grid
   =========================================================== */
#contents .proc {
  background: var(--surface-low);
}

#contents .proc-head {
  margin-bottom: 56px;
}

#contents .proc-head .num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--on-surface-mute);
  text-transform: uppercase;
  margin-bottom: 20px;
}

#contents .proc-head h2 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 26px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 28px;
  text-wrap: balance;
}

#contents .proc-head h2 em {
  font-style: normal;
  color: var(--primary);
  font-weight: 300;
}

#contents .proc-lede {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
}

#contents .proc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

#contents .proc-step {
  padding: 28px 0;
  border-top: 1px solid var(--outline-faint);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: start;
}

/* SP: 子が3つあるため auto-placement だと p が左列へ回り込む */
#contents .proc-step .proc-no {
  grid-column: 1;
  grid-row: 1 / -1;
}

#contents .proc-step h3 {
  grid-column: 2;
  grid-row: 1;
}

#contents .proc-step p {
  grid-column: 2;
  grid-row: 2;
}

#contents .proc-step:last-child {
  border-bottom: 1px solid var(--outline-faint);
}

#contents .proc-no {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 32px;
  letter-spacing: 0.06em;
  color: var(--primary);
  line-height: 1;
}

#contents .proc-no small {
  display: block;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-surface-mute);
  margin-bottom: 8px;
  font-weight: 500;
}

#contents .proc-step h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 10px;
}

#contents .proc-step p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

@container lp (min-width: 700px) {
  #contents .proc-head {
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    column-gap: 72px;
    align-items: start;
  }

  #contents .proc-head .num {
    grid-column: 1;
    margin-bottom: 0;
  }

  #contents .proc-head h2 {
    grid-column: 2;
    font-size: 38px;
    margin-bottom: 0;
  }

  #contents .proc-lede {
    grid-column: 2;
  }

  #contents .proc-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--outline-faint);
  }

  #contents .proc-step {
    border: none;
    border-right: 1px solid var(--outline-faint);
    padding: 48px 32px 56px;
    display: block;
  }

  #contents .proc-step:last-child {
    border-bottom: none;
    border-right: none;
  }

  #contents .proc-no {
    font-size: 48px;
    margin-bottom: 32px;
  }

  #contents .proc-step h3 {
    font-size: 20px;
  }

  #contents .proc-step p {
    font-size: var(--lp-text-body);
  }
}

/* ===========================================================
   §6 Column — Expert Designer
   =========================================================== */
#contents .col-expert {
  background: var(--surface-low);
}

#contents .col-expert-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  margin-bottom: 56px;
  opacity: 0.5;
}

#contents .col-expert-inner {
  position: relative;
  background:
    linear-gradient(180deg, rgba(220, 194, 167, 0.04), rgba(220, 194, 167, 0.01)),
    var(--surface);
  border: 1px solid var(--outline-faint);
  border-left: 2px solid var(--primary);
  padding: 2.5em var(--lp-section-pad-x);
  display: flex;
  flex-direction: column;
  gap: 2em;
}

#contents .col-expert-side {
  order: 1;
}

#contents .col-expert-body {
  order: 2;
}

#contents .col-tag {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 18px;
}

#contents .col-expert-img {
  overflow: hidden;
}

#contents .col-expert-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: 50% 30%;
}

#contents .col-expert-body h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 28px;
  text-wrap: pretty;
}

#contents .col-expert-body h3 em {
  font-style: normal;
  color: var(--primary);
  font-weight: 400;
}

#contents .col-expert-body p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

#contents .col-expert-body p+p {
  margin-top: 1.2em;
}

#contents .col-expert-quote {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: var(--on-surface) !important;
  margin-top: 28px !important;
  padding-left: 16px;
  border-left: 1px solid var(--primary);
}

@container lp (min-width: 700px) {
  #contents .col-expert-inner {
    padding: 4em;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
  }

  #contents .col-expert-side {
    order: 0;
  }

  #contents .col-expert-body {
    order: 0;
  }

  #contents .col-expert-body h3 {
    font-size: 26px;
  }

  #contents .col-expert-body p {
    font-size: var(--lp-text-body);
  }

  #contents .col-expert-quote {
    padding-left: 24px;
  }
}

/* ===========================================================
   §7 Performance — 3 panel grid
   =========================================================== */
#contents .perf {
  background: var(--surface);
}

#contents .perf-head {
  margin-bottom: 56px;
}

#contents .perf-head .num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--on-surface-mute);
  text-transform: uppercase;
  margin-bottom: 20px;
}

#contents .perf-head h2 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 28px;
  text-wrap: balance;
}

#contents .perf-head h2 em {
  font-style: normal;
  color: var(--primary);
  font-weight: 300;
}

#contents .perf-lede {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
}

#contents .perf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

#contents .perf-card {
  position: relative;
  background: var(--surface-low);
  display: flex;
  flex-direction: column;
}

#contents .perf-img {
  position: relative;
  overflow: hidden;
}

#contents .perf-img img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  filter: saturate(0.92);
}

#contents .perf-num {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--serif);
  font-weight: 200;
  font-size: 28px;
  color: var(--primary);
  background: rgba(13, 13, 13, 0.7);
  padding: 8px 14px;
  letter-spacing: 0.06em;
  line-height: 1;
  backdrop-filter: blur(8px);
}

#contents .perf-num small {
  display: block;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-surface-mute);
  margin-bottom: 4px;
  font-weight: 500;
}

#contents .perf-tag {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin: 24px 24px 14px;
}

#contents .perf-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin: 0 24px 16px;
  text-wrap: balance;
}

#contents .perf-card p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
  margin: 0 24px 28px;
}

#contents .perf-card p.lp-note {
  font-size: var(--lp-text-note);
  line-height: var(--lp-text-note-lh);
  margin-top: -8px;
  margin-bottom: 24px;
}

@container lp (min-width: 700px) {
  #contents .perf-head {
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    column-gap: 72px;
    align-items: start;
  }

  #contents .perf-head .num {
    grid-column: 1;
    margin-bottom: 0;
  }

  #contents .perf-head h2 {
    grid-column: 2;
    font-size: 42px;
    margin-bottom: 0;
  }

  #contents .perf-lede {
    grid-column: 2;
  }

  #contents .perf-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  #contents .perf-img img {
    aspect-ratio: 4/3;
  }

  #contents .perf-card h3 {
    font-size: 22px;
    margin: 0 28px 18px;
  }

  #contents .perf-card p {
    margin: 0 28px 32px;
  }

  #contents .perf-card p.lp-note {
    margin: -4px 28px 28px;
  }

  #contents .perf-tag {
    margin: 28px 28px 16px;
  }
}

/* ===========================================================
   §8 Final CTA
   =========================================================== */
#contents .finalcta {
  position: relative;
  background: #000;
  overflow: hidden;
}

#contents .finalcta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: brightness(0.8);
}

#contents .finalcta-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.5) 100%);
}

#contents .finalcta-inner {
  position: relative;
  z-index: 1;
}

#contents .finalcta-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 28px;
}

#contents .finalcta-title {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 34px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--on-surface);
  margin-bottom: 48px;
  text-wrap: balance;
}

#contents .finalcta-title em {
  font-style: normal;
  color: var(--primary);
  font-weight: 300;
}

#contents .finalcta-body p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-text-body-lh);
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

#contents .finalcta-rule {
  height: 1px;
  background: var(--outline-faint);
  margin: 32px 0;
  max-width: 64px;
}

#contents .finalcta-promise {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  line-height: 1.95 !important;
  color: var(--on-surface) !important;
  letter-spacing: 0.06em !important;
}

#contents .finalcta-actions {
  margin: 48px 0 16px;
}

#contents .finalcta-btn {
  width: 100%;
}

/* icon — override the .btn-primary span:first-child column rule */
#contents a.finalcta-btn .finalcta-btn-icon {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--on-primary);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  margin-right: 2px;
  opacity: 0.92;
}

#contents a.finalcta-btn .finalcta-btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* text block is now the 2nd child — restore the stacked layout */
#contents a.finalcta-btn .finalcta-btn-icon+span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0.04em;
  flex: 1 1 auto;
}

#contents a.finalcta-btn .finalcta-btn-icon+span em {
  font-style: normal;
  font-family: var(--jp-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--on-primary);
  opacity: 0.8;
}

/* .finalcta-note のタイポは .lp-note に集約（HTML 側で .lp-note を併用）。 */

/* 最終CTAの注釈のみ、背景が暗く既定の mute 色では見えにくいため白に上書き。
   .lp-note と詳細度が同じ（id+class）ため、ソース順で勝つようここ（後方）に置く。 */
#contents .finalcta-note {
  color: #fff;
}

@container lp (min-width: 700px) {
  /* PC は最終ブロック全体を中央揃え（SP は左揃えのまま） */
  #contents .finalcta-inner {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #contents .finalcta-title {
    font-size: 54px;
    margin-bottom: 64px;
  }

  #contents .finalcta-body p {
    font-size: var(--lp-text-body);
  }

  #contents .finalcta-rule {
    margin: 40px auto;
  }

  #contents .finalcta-actions {
    display: flex;
    justify-content: center;
  }

  #contents .finalcta-btn {
    flex: none;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}

/* ===========================================================
   Fixed CTA — bottom right floating
   =========================================================== */
/* .lp-v2 は子孫の絶対配置の基準として position: relative を維持 */
#contents .lp-v2 {
  position: relative;
}

/* フローティングCTA — 右下常時固定。#contents 直下（.lp の外）に配置するため
   position: fixed がビューポート基準で正しく効く（.lp は container-type を持つ）。 */
#contents .lp-fixedcta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--gold-fill);
  color: var(--on-primary);
  font-family: var(--jp-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(220, 194, 167, 0.3);
  opacity: 0.92;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

#contents .lp-fixedcta .arrow {
  font-size: 14px;
}

#contents .lp-fixedcta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  padding-right: 9px;
  border-right: 1px solid rgba(61, 45, 26, 0.3);
}

#contents .lp-fixedcta-icon svg {
  width: 19px;
  height: 19px;
  color: var(--on-primary);
  display: block;
}

@media (min-width: 700px) {
  #contents .lp-fixedcta {
    right: 32px;
    bottom: 32px;
    padding: 18px 24px;
    font-size: 13px;
  }
}

/* ===========================================================
   CTA リンク色の上書き
   サイト共通CSS(basic.css)の `a:link/a:visited/a:hover/a:active`
   が全CTAを紺(#21366e)・hoverで赤+下線に上書きしてしまうため、
   各CTA本来の配色を teitaku 内で再指定して打ち消す。
   ※共通ファイルは変更せず、ここで上書きする方針。
   `.cta:link` 等はクラス+擬似クラスで `a:link` より詳細度が高く確実に勝つ。
   =========================================================== */
/* ナビ右上CTA — シャンパン文字 */
#contents .lp-nav-cta:link,
#contents .lp-nav-cta:visited,
#contents .lp-nav-cta:hover,
#contents .lp-nav-cta:active {
  color: var(--primary);
  text-decoration: none;
}

/* 塗りCTA(シャンパン地・濃茶文字) — FV / 最終ボタン / 固定CTA */
#contents .fv-cta:link,
#contents .fv-cta:visited,
#contents .fv-cta:hover,
#contents .fv-cta:active,
#contents .btn-primary:link,
#contents .btn-primary:visited,
#contents .btn-primary:hover,
#contents .btn-primary:active,
#contents .lp-fixedcta:link,
#contents .lp-fixedcta:visited,
#contents .lp-fixedcta:hover,
#contents .lp-fixedcta:active {
  color: var(--on-primary);
  text-decoration: none;
}

/* アウトラインCTA — 明色文字(em/arrowはシャンパンのまま) */
#contents .midcta:link,
#contents .midcta:visited,
#contents .midcta:hover,
#contents .midcta:active {
  color: var(--on-surface);
  text-decoration: none;
}

/* ===========================================================
   CTA ホバー挙動 — 全ボタン共通
   通常時は opacity をわずかに落とし、hover で 1 に戻しつつ色を変える。
   色は上の「リンク色の上書き」ブロックより後に置き、同詳細度で確実に勝たせる。
   =========================================================== */
/* 塗りゴールド系 — hover でほんのり明るく（地の色変化） */
#contents .btn-primary:hover,
#contents .fv-cta:hover,
#contents .lp-fixedcta:hover {
  opacity: 1;
  filter: brightness(1.06);
}

/* ナビ右上CTA — hover で罫線・文字を明るく、地をうっすら */
#contents .lp-nav-cta:hover,
#contents .lp-nav-cta:active {
  opacity: 1;
  color: #f1e7d8;
  border-color: rgba(220, 194, 167, 0.85);
  background: rgba(220, 194, 167, 0.08);
}

/* アウトラインCTA(midcta) — hover で文字を白く */
#contents .midcta:hover,
#contents .midcta:active {
  opacity: 1;
  color: #fff;
}

/* sp.css の * { font-family } 対策（768px以下・案A）。
   基本は子要素に inherit。sp.css @import が lp.css より後に効く場合は
   詳細度の高い !important で明朝/ゴシックを再指定する。 */
@media only screen and (max-width: 768px) {
  /* 共通ヘッダー（head_responsive.inc）のスマホ用メニューボタンを、
     この邸宅LPでのみ非表示にする。#nav_btnwrapper は #contents の外側にある
     共通要素のため、ここではスコープを付けずグローバル指定する。
     ※ローカル環境では共通ヘッダーが描画されないため確認不可。実環境（SSI 反映後）でのみ有効。 */
  #nav_btnwrapper {
    display: none;
  }

  #contents .lp :where(em, span, strong, b, i, small) {
    font-family: inherit !important;
  }

  #contents .fv-main em,
  #contents .philo-head em,
  #contents .resi-head h2 em,
  #contents .detail-head h2 em,
  #contents .proc-head h2 em,
  #contents .col-expert-body h3 em,
  #contents .perf-head h2 em,
  #contents .finalcta-title em,
  #contents .philo-aside-lede-line1,
  #contents .philo-aside-coda-line1 {
    font-family: var(--serif) !important;
  }

  #contents .fv-cta em,
  #contents .midcta em,
  #contents .btn-primary span:first-child em,
  #contents a.finalcta-btn .finalcta-btn-icon + span em,
  #contents .lp-nav-logo small {
    font-family: var(--sans) !important;
  }
}

/* ============================================================
   スクロール フェードイン（JS: js/teitaku.js が .scrollin を付与）
   クラス名は小文字 i: .fadeinL / .fadeinR / .fadeinB
   方向 = L:左 / R:右 / B:下から、.delay01〜03 で時差
   （未使用の N/T・auto 系・delay04/05 は納品前清掃で削除済み）
   ============================================================ */
@media screen {
  /* 画面外（初期状態） */
  #contents .fadeinL {
    opacity: 0;
    transform: translate(-300px, 0);
    transition: all 900ms;
  }
  #contents .fadeinR {
    opacity: 0;
    transform: translate(300px, 0);
    transition: all 900ms;
  }
  #contents .fadeinB {
    opacity: 0;
    transform: translate(0, 100px);
    transition: all 900ms;
  }
  #contents .delay01 { transition-delay: .3s; }
  #contents .delay02 { transition-delay: .5s; }
  #contents .delay03 { transition-delay: .8s; }

  /* 画面内（.scrollin 付与後） */
  #contents .fadeinL.scrollin,
  #contents .fadeinR.scrollin,
  #contents .fadeinB.scrollin {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* SP 調整（元テンプレ準拠） */
  @media screen and (max-width: 768px) {
    #contents .delay03 { transition-delay: 0s; }
  }
}

/* モーション低減設定では即時表示（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  #contents .fadeinL,
  #contents .fadeinR,
  #contents .fadeinB {
    opacity: 1;
    transform: none;
    transition: none;
  }
}