@charset "UTF-8";
:root {
  /* --- 計算基準変数 --- */
  --rem: 1rem / 16;
  --inner: 1600; /* 本文幅（px値・単位なし） */
  --vw: 1920 * 100vw; /* カンプ幅基準のフルード値（装飾のみ使用） */
  /* --- ブランドカラー（デザイン3・0918-2 FIX。text_styles.md / paths.json より） --- */
  --color-brand: #215662; /* ティール。ボタン塗り・見出し英字・CONTACT背景・ロゴ横「K」「REAL ESTATE」 */
  --color-brand-soft: #edeadb; /* 加盟店セクション背景・フッター背景 */
  --color-brand-logo: #009063; /* エイブルロゴ（画像内色・参照用） */
  --color-nav-hover: var(--color-brand); /* ヘッダーナビ hover の下線 ＝ FV タイトル「TWO PLACES, ONE LIFE.」と同じ色（2026-09-22 社長チェック第4弾・指示4。
  text.json t088 color_hex #215662／OL 画素 (32,85,97) で確定。第2弾で暫定にしていたロゴ緑 #009063 から差し替え） */
  --color-feature-bg: #dbede8; /* 特集バナー背景 */
  --color-note: #808080; /* 写真の注記「※写真は、イメージです。」（デザイン8 t177〜t181） */
  --color-line-choice: #cccccc; /* 入口カードの下線（デザイン8 p0036〜p0039・1px） */
  --shadow-trust: 0 0.25rem 1.125rem rgb(0 0 0 / 22%); /* 加盟店の帯（デザイン8: ベージュ → 白＋影。支給PDFの輝度で実測） */
  /* --- カテゴリ色（ラベル帯・「詳しく見る」塗り・「一覧を見る」枠・選択肢バナーのアクセントバー）
     デザイン5（2026-09-25）: 土地購入が物件購入と同色（#578a83）だったのをやめ --color-land を新設。
     旧 --color-buy-vivid（#39b54a）は D5 で 0 件になったため廃止（選択肢カードのラベルが塗り帯でなくなったため） --- */
  --color-tenant: #9b6881; /* 店舗・事業用（旧テナント。key は tenant のまま） */
  --color-rent: #aba043;
  --color-buy: #578a83;
  --color-land: #5685b8; /* デザイン5 で新設（T-23） */
  --color-sell: #655784; /* 売却。紫ボタン・SELLラベル */
  /* --- 下層3ページで追加（デザイン3 AB1〜3。2026-09-21） --- */
  --color-accent-red: #c1272d; /* 特集の赤見出し・フォームの「オンライン相談」「※必須」 */
  --color-link: #00a99d; /* フォーム「個人情報の取り扱い」リンク */
  --color-area: #00977e; /* 賃貸一覧のエリアピル（マップ上・エリア別に表示）。デザイン6（2026-09-25）で #78a988 → #00977e（先方赤字「この緑色を全て濃い色に変更」・AB2 の18個すべて） */
  --color-buy-tint: #f2f6f5; /* 特集「別荘・セカンドハウス」節の背景（スポット #578a83 の tint 8% を白に合成した値） */
  --color-field-bg: #f2f2f2; /* フォーム入力欄 */
  --color-placeholder: #b3b3b3; /* フォーム placeholder（姓／名） */
  --color-school-eton: #cd3e62; /* 特集カードの学校色帯: イートンハウス（デザイン5 で #2e3192 → #cd3e62。F-03） */
  --color-school-abc: #2e3192; /* ABC（デザイン5 で #cd8d62 → #2e3192。#cd8d62 は全面廃止） */
  --color-school-lca: #009245; /* LCAきたかる */
  --color-school-kazakoshi: #29abe2; /* 風越学園 */
  /* --- テキスト --- */
  --color-text: #000000;
  --color-text-inverse: #ffffff;
  --color-text-topics: #4d4d4d; /* TOPICS カードのタイトル・抜粋（t315〜t322） */
  /* --- 背景 --- */
  --color-bg: #ffffff;
  /* --- 選択肢バナーの写真オーバーレイ（デザイン6・p0024〜p0027: 線形グラデ #ffffff→#b3b3b3・乗算）。
     デザイン5 の #ffffff→#004b37（緑）は先方指示「写真の左側のグリーン、アミトル」で撤去され、無彩色の陰影だけになった。
     D5 と同じ手法で OL6 の画素と書き出し写真（img_003〜006）の比からフィット（4枚・24×24 ブロックの中央値 1,421 点・残差 std 0.116）:
       d = −0.3993·fx + 0.5763·fy + 0.3928（d = #b3b3b3 への寄与率。明度倍率 = 1 − 0.298·d）
       → 角度 208.94deg・白 0.7%・#b3b3b3 103.2%
     カードの比率（384.38:306.71）は固定なので全幅で有効 --- */
  --choice-overlay: linear-gradient(208.94deg, #ffffff 0.7%, #b3b3b3 103.2%);
  /* --- 罫線 --- */
  --color-border: #999999; /* 物件スペック罫線・お知らせ罫線 */
  --color-border-choice: rgb(33 86 98 / 47%); /* スポット #215662 tint 47%。デザイン5 以降は SP ドロワーの下罫線（layouts/_header.scss）でのみ使用（旧・選択肢カード枠） */
  --color-border-choice-card: #ffffff; /* 選択肢カードの枠（デザイン6 で新設。paths.json p0003〜p0006: stroke #ffffff 1.5px） */
  --color-border-topics: #808080; /* TOPICS「他のTOPICSを見る」の下線（p0501） */
  /* --- フォーカスリング（a11y） --- */
  --color-focus: #2f6fb0;
  /* --- フォント（全て Google Fonts で読み込み。カンプ指定と同名） ---
     Zen Kaku Gothic Antique（本文・見出し）／Outfit（英字: MVキャッチ・PICK UP・NEWS・TEL・CONTACT透かし・ラベル）
     小塚ゴシック Pr6N はフォーム（AB3）のチェックボックス行のみで TOP では未使用（確認事項参照） */
  --font-base: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Outfit", "Zen Kaku Gothic Antique", sans-serif;
  /* TOPICS 帯（見出し ja・カードタイトル・他のTOPICSを見る）だけカンプが Zen Kaku Gothic New Bold（text_styles.md #29/#68/#83）。
     Google Fonts の同名書体を 700 のみ追加読み込み（2026-09-21 TOPICS 復活）。Antique に統一してよければ削除して --font-base に寄せる（確認事項参照） */
  --font-gothic-new: "Zen Kaku Gothic New", "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  /* --- 本文の既定（base/_reset.scss の body / 見出しが参照） --- */
  --font-heading: var(--font-base);
  --fs-base: 1rem;
  --lh-base: 2; /* 本文 16px/32px（売却・CONTACT本文） */
  --lh-tight: 1.2;
  --ls-base: 0.1em;
  /* --- SP（<768）の文字サイズ基準（2026-09-22 社長チェック第6弾・SP フォント監査 review/sp_font_audit_2026-09-22.md）
     基準: 本文 14〜16／注記・キャプション 最小 12／ボタン 14〜16／h1 26〜32／h2 22〜28／ラベル 10〜15。
     SP は PC カンプ値をそのまま置いた仮組みで、ボタン 18〜19.65・見出し 36〜40 などが混在していた。
     この帯で使う値をトークンで持ち、各モジュールの基本値（SP）に当てる。PC は @include mq(md) がカンプ値で上書きする（PC 不変）。
     SP デザインが支給されたら、ここを差し替える --- */
  --fs-sp-h1: 2rem; /* 一覧見出し（賃貸物件 等） */
  --fs-sp-h1-mv: 2.25rem; /* FV タイトル「TWO PLACES, ONE LIFE.」だけ 36（2026-09-22 第7弾・社長確定。第6弾の 32 は見せ場として小さい） */
  --fs-sp-h2-min: 1.375rem; /* h2 の下限（エリア別に表示） */
  --fs-sp-body: 1rem; /* 本文・リスト・フォーム（入力欄 16 以上で iOS の自動ズームも回避） */
  --fs-sp-button: 1rem; /* 全ボタン（塗り・枠・フォーム・ページ送り・エリア・ドロワー・固定バー） */
  --fs-sp-label: 0.9375rem; /* カテゴリラベル（標準 15 と同値。--large も SP はこれに揃える） */
  --fs-sp-caption: 0.75rem; /* キャプションの最小（特集バナーの学校名） */
  --fs-sp-agree: 0.9375rem; /* フォーム同意行「個人情報の取り扱いについて同意します」（18 文字を 375 で 1 行に収める幅計算。本文 14〜16 の範囲内。2026-09-22 第8弾） */
  --fs-sp-label-min: 0.625rem; /* ラベルの最小（ハンバーガーの MENU） */
  --fs-sp-article-title: 1.625rem; /* お知らせ詳細の記事タイトル h1（h1 26〜32 の下限側。一覧の h1「お知らせ」は --fs-sp-h1 32。06_お知らせ設計 §4-2・2026-09-22） */
  /* --- 角丸（paths.json corner_radius_px。縮小時に丸みが潰れないよう生px固定） --- */
  --radius-button: 6.32px; /* 詳しく見る・一覧を見る・お知らせ一覧・入力内容の確認・ページ送り（カンプ 6.2）・CONTACT帯「お問い合わせフォーム」（効果 6.17 → 統一） */
  --radius-button-small: 4px; /* 「物件の売却相談」「お問い合わせ」191.5×44.4（ヘッダー／フッター／売却／SPドロワー・固定バー）。
   paths.json は 4点矩形だが「効果＞スタイライズ＞角を丸くする」4pt が掛かっている（2026-09-21 第3弾: OL PDF 4x 画素実測 ≈3.5 ＋ Illustrator で Expand Appearance → 8点・r=4.0 を確認） */
  --radius-field: 7.15px; /* フォーム 1行入力欄（右列は 7.61 → 統一） */
  --radius-textarea: 10.86px; /* フォーム メッセージ欄 */
  --radius-pill: 999px; /* エリアピル（半円。カンプ 13.51 = 高さの半分） */
  /* --- シャドウ（AI データからは取得不可 → カンプPNGの画素をガウス分布で最小二乗フィット。2026-09-21 社長チェック対応・影の全体監査。
     review/tools/shadow_scan.py で4アートボードを機械検出し、要素別に実測。確認事項参照）
     card: 物件カード・PICK UP（σ≈5.0px→blur 10px・端の暗さ≈10%→alpha 20%）
     soft: 選択肢カード・特集バナー・売却カード（σ≈4.7px→blur 10px・端の暗さ≈7%→alpha 15%）
     ヘッダー・各ボタン・フォーム欄・エリアピル・ページ送りはカンプに影なし（実測） --- */
  --shadow-card: 0 0 calc(10 * var(--rem)) rgb(0 0 0 / 20%);
  --shadow-soft: 0 0 calc(10 * var(--rem)) rgb(0 0 0 / 15%);
  /* --- z-index --- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100; /* 追従ヘッダー（PC）・画面下の固定CTAバー（SP） */
  --z-overlay: 200; /* SP ヘッダー（ドロワー・オーバーレイを内包する stacking context。固定バーより上） */
  /* --- SP ヘッダーまわりの寸法（2026-09-21 SPヘッダー・ドロワー・固定バー。確認事項参照）
     header-sp: ロゴ（マーク 92 幅＝高さ 36）が潰れず、375×667 の画面で 9% に収まる 60。ドロワー・オーバーレイの上端と [id] の scroll-margin が参照
     cta-bar : 画面下の固定CTAバー 56（ボタン高さ 48 相当＋上下 4）。body の下余白が参照（safe-area は各所で env() を加算） --- */
  --header-height-sp: 3.75rem;
  --cta-bar-height: 3.5rem;
  /* --- SP の FV（2026-09-22 第7弾。module/_mv.scss が参照）
     badge-size-sp : 掲載バッジの径。PC 249.5 は 375 幅で画面の 2/3 を占めるため 210（375 で 56%）。中の文字・きらめきは径に比例（calc）
     photo-h-sp    : 本文の下に露出する写真の高さ（375 幅で 260 → 横 61% のスライスに建物が丸ごと入る）。バッジは写真の下端にまたがる
     fade-sp       : 写真上端からの白フェード長（本文との境目を柔らかくする） --- */
  --mv-badge-size-sp: 13.125rem;
  --mv-photo-h-sp: 16.25rem;
  --mv-fade-sp: 3.75rem;
  /* --- トランジション（2026-09-21 社長チェック対応: 旧 expo-out 0.2s は変化の7割が最初の40msで終わり瞬間切替に見えた（カクカク）。
     cubic ease-out 0.3s に変更し、全 hover は --transition-base か --dur-base/--ease-out を使う） --- */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --transition-base: all var(--dur-base) var(--ease-out);
  /* --- hover の量（2026-09-22 社長チェック第4弾）
     opacity-hover-logo : ヘッダー／フッターのロゴ <a>。カード類（写真入り）は 0.85 で見えるが、ロゴは白地に線画＋細い文字で 0.85 では変化が読めない
                          （特集バナーで 0.9 が目視不可だった #131 と同じ理由）ので 0.7
     scale-hover-image  : 選択肢カードの写真拡大。1.05〜1.08 の中庸。figure（220／385 幅）で 13〜23px 分が外へ出て clip される --- */
  --opacity-hover-logo: 0.7;
  --scale-hover-image: 1.06;
  /* --- チェックマークのトークンは廃止（2026-09-24）。
     旧 --check-mark は 14×11 のポリラインを data: URI の SVG で持ち mask で敷く方式だったが、
     CSP の img-src に data: が含まれない環境（MT.net フォーム）では画像の読み込みが拒否されマークが出ない。
     → module/_form.scss・mtform.scss とも「枠線 2 辺＋rotate(45deg)」の純 CSS に置換した（確認事項 #201） --- */
  /* --- .inner の左右余白（必ず rem。帯②で本文と同じ比率で縮む） --- */
  --padding-pc: 2.5rem; /* 40px相当。$scale-base に含めているため帯②で rem(1600) = 100vw − 余白×2 に一致 */
  --padding-sp: calc(20 * var(--rem));
}

/* =============================================================================
   ルートremスケーリング方式（comp-to-code 既定・2026-09-16 改訂版）
   ①1680px超: 固定16px（本文1600を中央寄せ、余白が広がる）
   ②768〜1680px: 比例縮小（本文・余白・中身が同率で縮む。左右余白は最低 40×(幅/1680) px）
   ③376〜767px: 固定16px ／ ④375px以下: 縮小のみ
   ============================================================================= */
html {
  font-size: 16px;
}
@media (max-width: 1680px) {
  html {
    font-size: calc(16 / 1680 * 100vw);
  }
}
@media (max-width: 767px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* --- ボックスモデルの統一 --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- 余白リセット --- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: unset;
}

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

/* --- 文書のベース --- */
html {
  /* 日本語の読みやすさ・レイアウト事故防止 */
  overflow-wrap: anywhere;
  line-break: strict;
  /* 2026-10-08 孤立文字対策: 段落末尾に1〜2文字だけ落ちる行（例: 375px の「㎡」・475px の見出し「入」）をブラウザの折返し調整で防ぐ。
     text-wrap-style（longhand）だけを指定し、white-space / nowrap の指定には触れない。PC/TB の改行が変わるのは孤立文字が出ていた段落だけ
     （全20ページ×8幅の行分割を前後比較して確認・review/2026-10-08_実装チェックループ/）。未対応ブラウザ（Safari 25 以前）は従来の折返しのまま */
  text-wrap-style: pretty;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

/* ページ内アンカー（section id="tenant" 等）へ遷移したとき、追従ヘッダー（SP 60／PC 76）の下に見出しが隠れないようにする（2026-09-21 sticky 化に伴う。SP は同日ハンバーガー化で追加） */
[id] {
  scroll-margin-block-start: var(--header-height-sp);
}
@media screen and (min-width: 768px) {
  [id] {
    scroll-margin-block-start: 4.75rem;
  }
}

body {
  min-block-size: 100dvb;
  /* SP（<768）: 画面下の固定CTAバー（.cta-bar）の分だけ下余白を足し、フッター最終行がバーに隠れないようにする（2026-09-21 SPヘッダー） */
  padding-block-end: calc(var(--cta-bar-height) + env(safe-area-inset-bottom));
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  body {
    padding-block-end: 0;
  }
}

/* --- 見出し（サイズはmodule側でトークンから指定する） --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
}

/* --- メディア（リキッドレイアウトの基本。§4-6） --- */
img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- フォーム部品はフォントを継承 --- */
button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
}

button {
  padding: unset;
  border: none;
  background: none;
  cursor: pointer;
}

/* --- リンク --- */
a {
  color: inherit;
  text-decoration: none;
}

/* --- フォーカスリング（a11y） --- */
:where(:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* 本文幅コンテナ。PC本文幅 1600px（カンプ x160〜1760）。
   帯①（1680px超）: rem(1600) が勝ち中央寄せ。帯②（768〜1680px）: 100% − 余白×2 が勝ち、
   余白 --padding-pc（rem(40)）が本文と同率で縮む（$scale-base に余白を含めているので両者は一致する）。
   100% を上限に入れているのはスクロールバー分（15px）で横スクロールが出ないようにするため。
   ※ `min(100%, rem(1600))` のように余白を落とした式は禁止（基準幅以下で余白ゼロになる） */
.inner {
  inline-size: min(100% - var(--padding-sp) * 2, 40rem);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    inline-size: min(100% - var(--padding-pc) * 2, 100rem);
  }
}

/* =============================================================================
   header ― サイトヘッダー（MT: 共通モジュール・4アートボード共通）
   カンプ: 高さ76 / ロゴ x10.3 / ナビ18px 間隔≒55 / ボタン2個 191.5×44.4（紫・ティール）間6 右余白15.4

   SP（<768・2026-09-21 SPヘッダー。SP デザイン未支給のため PC カンプのトンマナから設計・確認事項参照）:
     - ロゴ＋ハンバーガー（.header__menu）だけの追従ヘッダー。高さ --header-height-sp（60）・白地・影なし（PC と同じ）
     - ナビ・ボタン・TEL は .header__drawer に入れ、右からスライドインするドロワー（幅 min(100%−56, 360)・ヘッダーの下から画面下端まで）
       白地＋黒文字（PC ナビと同じ）。メニューの下の CTA ブロック（.header__buttons）はフッターと同じ #edeadb 地にボタン2個（紫／ティール）＋ TEL（メニュー直下に通常配置・第3弾で下固定をやめた）
       ※ ティール地にすると「お問い合わせ」ボタン（ティール塗り）が沈むため白地を採用
     - オーバーレイ（.header__overlay 黒 50%）はヘッダーの下から。ヘッダーはオーバーレイの上に残り、ハンバーガーが × に変わる
     - 開閉状態は .header.is-open（assets/js/header.js が付与。aria-expanded／inert／スクロールロック html.is-drawer-locked も JS）
     - 主要 CTA は画面下の固定バー（layouts/_cta-bar.scss）に置く。ドロワーが開いている間はオーバーレイの下（暗転）
   PC（768px〜）: .header__drawer は display: contents で中身（nav／buttons）がそのまま .header__inner の flex アイテムになる（DOM は 1 つ・値は従来どおり）
   ============================================================================= */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-overlay); /* SP: ドロワー・オーバーレイ（ヘッダー内の fixed 要素）ごと固定CTAバー（--z-sticky）の上に置く */
  background-color: var(--color-bg);
  /* スクロール追従（2026-09-21 社長チェック第2弾）: sticky はフロー内に残るため本文の上余白は不変。見た目（白地・高さ76・影なし）も不変 */
}
@media screen and (min-width: 768px) {
  .header {
    z-index: var(--z-sticky);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-height-sp);
  padding-inline: var(--padding-sp) 0.5rem; /* 右はハンバーガー（48 幅・中の線 24）の余白込みで線の右端が 20 に揃う */
}
@media screen and (min-width: 768px) {
  .header__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    block-size: 4.75rem;
    padding-block: 0;
    /* ヘッダーは画面端基準（.inner 非使用）。左右余白はカンプ値（ロゴ x10.3・ボタン右余白15.4）を rem で持つ（確認事項 #28） */
    padding-inline: 0.64375rem 0.9625rem;
  }
}

/* クリック領域（2026-09-21 第3弾・指示1）: ナビ同様、<a> をヘッダーの高さいっぱい（SP 60／PC 76）にする。
   中身（マーク＋文字群）は grid の align-content: center で従来と同じ位置に置く（flex 時代は a の高さ＝中身で .header__inner が中央揃えしていた）。
   PC の旧 margin-block-start 5.4 は flex 中央揃えの margin box に効いていたので実際の移動量は 2.7（= 5.4/2）。上 padding 5.4 で同じ 2.7 を再現
   （修正前後のヘッダー領域の画素比較で差分ゼロを確認・review/logo_hitarea_2026-09-21.md） */
.header__logo {
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  align-items: start;
  justify-content: start;
  align-self: stretch;
  flex-shrink: 0; /* 帯②でナビに押されてロゴが潰れないようにする（2026-09-21 レビュー P1-1） */
  column-gap: 0.5375rem; /* デザイン8: マーク右端 127.7 → 表記 136.2（字面実測で −5。D6 は KARUIZAWA 141.2 に合わせた 13.6） */
  color: var(--color-text);
  transition: opacity var(--dur-base) var(--ease-out);
}
@media screen and (min-width: 768px) {
  .header__logo {
    padding-block-start: 0.3375rem; /* 実測補正（＝旧 margin 5.4 の実効移動量 2.7）: ロゴ群の文字中心をカンプ（KARUIZAWA y15.1〜50.1）へ */
  }
}
.header__logo {
  /* hover は opacity --opacity-hover-logo（0.7。2026-09-22 第4弾・指示2）。SP ヘッダーのロゴも同じ <a> なので共通 */
}
@media (any-hover: hover) {
  .header__logo:hover {
    opacity: var(--opacity-hover-logo);
  }
}

.header__mark {
  inline-size: 5.75rem;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .header__mark {
    inline-size: 7.33125rem;
  }
}

/* ロゴ横の表記（デザイン8・2026-10-06）: 「KARUIZAWA REAL ESTATE／by エイブルネットワーク センデン」→
   「エイブルネットワーク佐久店」（17.83px Medium・字間0・黒）＋「KARUIZAWA」（15.3px Medium・字間0.1em・K だけ #215662）の2段。
   カンプ t176 x136.2 y23.1（em box 21.7）／t002 x139.0 y42.1（em box 18.6）。行の高さ＝em box（1.219em）で積み、2段目を −2.7 重ねる */
.header__brand {
  display: grid;
  justify-items: start;
  align-content: center;
}
@media screen and (min-width: 768px) {
  .header__brand {
    position: relative;
    inset-block-start: 0.1875rem; /* 支給PDFの字面実測で 2 段とも 3px 上だったぶん */
  }
}

.header__name {
  font-size: 0.84375rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.219;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .header__name {
    font-size: 1.114375rem;
  }
}

.header__title {
  margin-block-start: -0.125rem;
  margin-inline-start: 0.13125rem; /* K の字面が 2 段目の左端より 2.8 右（カンプ x139.0 − 136.2）。K の左サイドベアリング 0.7 を差し引く */
  font-size: 0.725rem;
  font-weight: var(--fw-medium);
  line-height: 1.219;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .header__title {
    margin-block-start: -0.16875rem;
    font-size: 0.95625rem;
  }
}

.header__title-accent {
  color: var(--color-brand);
}

/* ---------------------------------------------------------------------------
   ハンバーガー（SP のみ）: 48×48 のタップ領域。3 本線（24×2px・間 5）→ × のアニメーション（0.3s・--ease-out）。
   線は機能的 UI 記号のため CSS で描く（comp-to-code の例外）。下に「MENU」（Outfit・PC の英字ラベルと同じ書体）
   --------------------------------------------------------------------------- */
.header__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  flex-shrink: 0;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-brand);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .header__menu {
    display: none;
  }
}

.header__menu-icon {
  position: relative;
  display: block;
  inline-size: 1.5rem;
  block-size: 1rem;
}

.header__menu-bar {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background-color: currentcolor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.header__menu-bar:nth-child(1) {
  inset-block-start: 0;
}

.header__menu-bar:nth-child(2) {
  inset-block-start: calc(50% - 1px);
}

.header__menu-bar:nth-child(3) {
  inset-block-end: 0;
}

.header.is-open .header__menu-bar:nth-child(1) {
  transform: translateY(calc(0.5rem - 1px)) rotate(45deg);
}

.header.is-open .header__menu-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header.is-open .header__menu-bar:nth-child(3) {
  transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg);
}

.header__menu-label {
  font-family: var(--font-en);
  font-size: var(--fs-sp-label-min); /* 10（第6弾: ラベルの最小。旧 9） */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
   ドロワー（SP）／ display: contents（PC）
   --------------------------------------------------------------------------- */
.header__drawer {
  position: fixed;
  inset-block: var(--header-height-sp) 0;
  inset-inline-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  inline-size: min(100% - 3.5rem, 22.5rem); /* 375px で 319・414px で 358・それ以上は 360。左に本文が見える帯を残す */
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-bg);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
@media screen and (min-width: 768px) {
  .header__drawer {
    display: contents; /* 中身（nav・buttons）が .header__inner の flex アイテムになる。visibility は子に継承されるため戻す */
    visibility: visible;
  }
}

.header.is-open .header__drawer {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}

.header__overlay {
  position: fixed;
  inset: var(--header-height-sp) 0 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  touch-action: none; /* オーバーレイ上のタッチで背面がスクロールしないように */
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
@media screen and (min-width: 768px) {
  .header__overlay {
    display: none;
  }
}

.header.is-open .header__overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

/* スクロールロック（JS が html に付与）。html だけに掛ける: body にも overflow を掛けると body が独立したスクロールコンテナになり、
   sticky ヘッダーの基準が viewport から body に移って画面外へ消える（2026-09-21 実測）。scrollbar-gutter: stable（reset）なのでレイアウトは動かない。
   ヘッダー面（オーバーレイに覆われない唯一の領域）からのタッチスクロールは touch-action で止める */
html.is-drawer-locked {
  overflow: hidden;
}

.header.is-open {
  touch-action: none;
}

.header__nav {
  inline-size: 100%;
}
@media screen and (min-width: 768px) {
  .header__nav {
    inline-size: auto;
    margin-inline-start: auto;
  }
}

/* クリック領域（2026-09-21 社長チェック対応）: PC のメニュー間隔は ul の gap ではなく a の左右 padding（間隔の半分ずつ）で作り、
   ul に同量の負マージンを与えて文字位置を不変に保つ。PC は a をヘッダー高さ 76 いっぱいに、SP はドロワーの行全体（56 高・全幅）をタップ領域にする。
   → 隣のメニューとの中間点まで・ヘッダーの上下端までが a の領域（review/nav_hitarea_2026-09-21.md） */
.header__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media screen and (min-width: 768px) {
  .header__list {
    /* カンプ間隔（D5 実測の平均 48.72）− ブラウザの字幅差を吸収して両端をカンプ位置に（1920px で 44.1）。
       2026-09-25 デザイン5 対応で再実測: 「テナント物件」→「店舗・事業用物件」で 1 項目だけ文字が 2 字増え、
       ブラウザのナビ文字幅の合計が 574.23（カンプ 546.39）になった。カンプのナビ両端（x638.27〜1476.96＝幅838.69）に
       合わせるには 6 つの間隔の合計を 264.46 ＝ 1 つ 44.08 にする必要がある（D3 は 51）。
       ヘッダーはカンプ 1920px 幅前提の並びで、リキッド基準幅 1680px では空きが少ないため
       1920→1680 で 44.1→36 に直線で縮め、帯②では rem(36) で本文と同率に縮む */
    --nav-gap-x: clamp(2.25rem, calc(100vw * 0.03375 - 20.7px), 2.75625rem);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-inline: calc(var(--nav-gap-x) / -2);
  }
}

.header__item {
  display: flex; /* li の行ボックス（本文 line-height 2 の strut 32px）を無くし、a の高さ＝行の高さにする */
}

.header__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  block-size: 3.5rem; /* SP: 行全体がタップ領域（48 以上） */
  padding-inline: var(--padding-sp);
  border-block-end: 1px solid var(--color-border-choice);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.375rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .header__link {
    display: inline-flex;
    justify-content: flex-start;
    inline-size: auto;
    block-size: 4.75rem; /* ヘッダー高さいっぱい */
    /* ナビ文字を旧実装と同じ y（a 上端 28.25・文字矩形 26.25）に置く。旧 .header__list の padding-block-start 4.5 は
       li の strut 内ベースライン揃えで実質 1px 上がっていたため、strut を無くした新構造では 2.5 が同位置（nav_hitarea で再計測） */
    padding-block: 0.15625rem 0;
    padding-inline: calc(var(--nav-gap-x) / 2);
    border-block-end: 0;
    font-size: 1.125rem;
  }
}

/* SP の行末チェブロン（機能的 UI 記号・遷移の示唆）。PC は出さない */
.header__link::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-start: 0.75rem;
  border-block-start: 1.5px solid var(--color-brand);
  border-inline-end: 1.5px solid var(--color-brand);
  transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
  .header__link::after {
    content: none;
  }
}

/* ホバー: 文字の下に線が左→右へ伸びる（色は変えない）。線は文字幅に限定するため、クリック領域を広げた a ではなく内側の span に持たせる。
   末尾の字間 0.1em ぶんは線から除く。キーボードフォーカス時も同じ線を出す。
   線（2026-09-21 社長チェック第2弾）: 太さ 2px・色 --color-nav-hover（第2弾はロゴ緑の暫定 → 2026-09-22 第4弾で FV タイトルと同じ #215662＝--color-brand に確定）・位置は字面の下端から 4.5px 下（旧: 1px・--color-brand・字面下端に接する）。
   字面下端 ＝ 行ボックス下端（18px・lh22 で実測一致）なので inset-block-end: −(4.5＋2) */
.header__link-text {
  position: relative;
  inset-block-start: -0.165em;
  /* 字面補正（0.165em＝3px 上へ。線は span 基準なので一緒に動く） */
  display: inline-block;
}

.header__link-text::after {
  content: "";
  position: absolute;
  inset-inline: 0 0.1em;
  inset-block-end: -0.40625rem;
  block-size: 2px;
  background-color: var(--color-nav-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (any-hover: hover) {
  .header__link:hover .header__link-text::after {
    transform: scaleX(1);
  }
}
.header__link:focus-visible .header__link-text::after {
  transform: scaleX(1);
}

/* CTA ブロック（SP: ドロワー下部・フッターと同じ #edeadb 地に縦積み。PC: ヘッダー右のボタン2個の横並び） */
.header__buttons {
  --button-w: 100%;
  --button-h: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* メニューリストの直下に通常配置（スクロールで一緒に流れる。2026-09-21 第3弾・指示6: 旧 margin-block-start: auto でドロワー下端に寄せていたのをやめる） */
  margin-block-start: 0;
  padding: 1.5rem var(--padding-sp) calc(1.5rem + env(safe-area-inset-bottom));
  background-color: var(--color-brand-soft);
}
@media screen and (min-width: 768px) {
  .header__buttons {
    --button-w: initial; /* → _button.scss のフォールバック（カンプ値 191.5×44.4）に戻す */
    --button-h: initial;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.375rem;
    margin-inline-start: 2.30625rem; /* ナビ末尾(1476.9) → 紫ボタン(1515.6) 38.7 − 末尾字間1.8 */
    margin-block-start: 0.04375rem;
    padding: 0;
    background-color: transparent;
  }
}

/* TEL（SP のドロワーのみ。書体・比率は CONTACT 帯の TEL に揃える: Outfit 600・「TEL. 」0.7em） */
.header__tel {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-block-start: 0.5rem;
}
@media screen and (min-width: 768px) {
  .header__tel {
    display: none;
  }
}

.header__tel-link {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--color-brand);
}

.header__tel-prefix {
  font-size: 0.7em;
}

.header__tel-note {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* =============================================================================
   footer ― サイトフッター（MT: 共通モジュール・4アートボード共通）
   カンプ: 背景 #edeadb 高さ409.5 / 左: ロゴ(縦積み)・KARUIZAWA・住所 / 右: ナビ2列(列幅259.8・行送り41.6)・ボタン2個・サブリンク
   ============================================================================= */
.footer {
  background-color: var(--color-brand-soft);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 2.5rem;
}
@media screen and (min-width: 768px) {
  .footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 27.875rem; /* 右カラム x1314〜1760 */
    gap: 0;
    block-size: 25.59375rem;
    padding-block: 0;
  }
}

@media screen and (min-width: 768px) {
  .footer__company {
    padding-block-start: 2.90625rem;
    padding-inline-start: 0.66875rem;
  }
}

.footer__logo {
  display: block;
  inline-size: fit-content; /* <a> をロゴ群（マーク＋KARUIZAWA REAL ESTATE＋by）の幅だけにする（2026-09-21 第3弾: block のままだと左カラム幅いっぱいがリンク領域だった） */
  color: var(--color-text);
  transition: opacity var(--dur-base) var(--ease-out);
  /* hover は opacity --opacity-hover-logo（0.7・ヘッダーロゴと同値。2026-09-22 第4弾・指示2） */
}
@media (any-hover: hover) {
  .footer__logo:hover {
    opacity: var(--opacity-hover-logo);
  }
}

.footer__mark {
  inline-size: 11.4875rem;
}

/* ロゴ下の表記（デザイン8・2026-10-06）: 「KARUIZAWA REAL ESTATE／by …」→「エイブルネットワーク佐久店」（30.14px・字間0）＋「KARUIZAWA」（25.88px・字間0.1em）。
   カンプ t001 x175.7 y8058.6（em box 36.8）／t000 x180.4 y8090.7（em box 31.5）。マーク下端 y8024.4 */
.footer__brand {
  display: grid;
  justify-items: start;
  margin-block-start: 1.5rem;
}
@media screen and (min-width: 768px) {
  .footer__brand {
    margin-block-start: 1.8875rem; /* マーク下端 8024.4 → 1段目 em box 上端 8058.6。支給PDFの字面実測で 4 下だったぶん −4 */
    margin-inline-start: 0.26875rem; /* t001 x175.7 − マーク左端 171.4 */
  }
}

.footer__name {
  font-size: 1.375rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.219;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .footer__name {
    font-size: 1.88375rem;
  }
}

.footer__title {
  margin-block-start: -0.1875rem;
  margin-inline-start: 0.2125rem;
  font-size: 1.1875rem;
  font-weight: var(--fw-medium);
  line-height: 1.219;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .footer__title {
    margin-block-start: -0.290625rem; /* 2段目 em box 上端 8090.7 − 1段目下端（8058.6 + 36.74） */
    margin-inline-start: 0.40625rem; /* x180.4 − 175.7 − K の左サイドベアリング。字面実測で 3 左だったぶん +3 */
    font-size: 1.6175rem;
  }
}

.footer__title-accent {
  color: var(--color-brand);
}

.footer__address {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 2.19375rem; /* ロゴ文字群の下からの距離（デザイン8 でも住所の位置 y8157.6 は不変） */
  margin-inline-start: 0.1875rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1.875rem;
  letter-spacing: 0.07em;
}

/* デザイン8: 住所の2・3行目が半角スペース3つぶん字下げ（t036「\n   〒…\n   TEL.」）。支給PDFの字面で 〒 +15・TEL +17（D6 比）→ 15.4 */
.footer__address-line {
  display: block;
}

.footer__address-line.footer__address-line--indent {
  padding-inline-start: 0.9625rem;
}

@media screen and (min-width: 768px) {
  .footer__menu {
    padding-block-start: 4.13125rem;
  }
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}
@media screen and (min-width: 768px) {
  .footer__nav {
    display: grid;
    grid-template-columns: 16.2375rem auto;
    gap: 0;
  }
}

.footer__item {
  position: relative;
  inset-block-start: -0.165em;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 2.6rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.footer__link {
  transition: var(--transition-base);
}
@media (any-hover: hover) {
  .footer__link:hover {
    color: var(--color-brand);
  }
}

.footer__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38125rem;
  margin-block-start: 1.5rem;
}
@media screen and (min-width: 768px) {
  .footer__buttons {
    flex-wrap: nowrap;
    margin-block-start: 1.9rem; /* 3行目ボックス下端(8624.6) → ボタン上端(8655) */
    margin-inline-start: -0.275rem; /* ボタン x1309.6（ナビ x1314 より 4.4 左） */
  }
}

.footer__sublist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.875rem;
  margin-block-start: 1.5rem;
}
@media screen and (min-width: 768px) {
  .footer__sublist {
    flex-wrap: nowrap;
    gap: 1.91875rem; /* 全角スペース2つ分（16px×0.07字間込み）をgapで再現 */
    margin-block-start: 4.896875rem; /* 字面補正後も OL 実測で +2 残ったぶん（推奨④） */
    margin-inline-start: 0.15rem;
  }
}

.footer__subitem {
  position: relative;
  inset-block-start: -0.165em;
  inset-block-start: calc(-1 * 0.165em + 0.0625rem); /* OL 実測で ink-shift 後も 1〜2px 上に残る（TOP −2／rent −0.9／contact −2）→ 1px 戻す（2026-09-22） */
  white-space: nowrap;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.25rem;
  letter-spacing: 0.07em;
}

.footer__sublink {
  transition: var(--transition-base);
}
@media (any-hover: hover) {
  .footer__sublink:hover {
    color: var(--color-brand);
  }
}

/* =============================================================================
   cta-bar ― 画面下の固定CTAバー（SP のみ・2026-09-21 SPヘッダー。全テンプレート共通＝header モジュール内で出力）
   「物件の売却相談」（紫）＋「お問い合わせ」（ティール）をヘッダー／フッターと同じ .button 部品で横並びに固定。
   高さ --cta-bar-height（56）＋ env(safe-area-inset-bottom)。本文側の下余白は base/_reset.scss の body が持つ。
   ドロワーが開いている間はヘッダー（--z-overlay）内のオーバーレイの下に入り暗転する（重複する CTA はドロワー下部にもある）。
   PC（768px〜）は出さない（ヘッダーのボタンが常時見えているため）
   ============================================================================= */
.cta-bar {
  --button-w: auto;
  --button-h: 100%;
  --button-fs: 1rem; /* 375px で片側 187px。18px だと余白が左右 10px しか残らないため 1 段下げる */
  --radius-button-small: 0; /* バー内のボタンは角丸なし（フラット）。バー自体も角丸なし（2026-09-22 社長チェック第5弾・指示3）。ヘッダー／フッター／ドロワーの 4px は不変 */
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  block-size: calc(var(--cta-bar-height) + env(safe-area-inset-bottom));
  padding-block-end: env(safe-area-inset-bottom);
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  .cta-bar {
    display: none;
  }
}

.cta-bar__button {
  flex: 1 1 0;
  min-inline-size: 0;
}

/* =============================================================================
   button ― ボタン群（4アートボード共通）
   --fill         : ティール塗り 215.2×46.5 r6.32 白文字18px（物件カード「詳しく見る」）
   --outline      : 白地 1px枠 min320.1×70.7 r6.32 文字18px 枠色=カテゴリ色（--button-color）。文字が長い場合は左右43.85で伸びる（別荘=455.4）
   --news         : outline の 215.2×46.5 版（お知らせ一覧を見る・下層ページ送り）
   --contact      : ティール塗り 191.5×44.4 角丸なし 白文字18px＋メールアイコン（ヘッダー／フッター「お問い合わせ」）
   --sell-contact : 紫塗り 191.5×44.4（「物件の売却相談」ヘッダー／フッター／売却カード）
   --form         : 白地 312.9×64.6 角丸なし ティール文字19.65px＋メールアイコン（CONTACT）
   角丸: --fill／--outline／--news（一覧・ページ送り・入力内容の確認）は角丸 6.32（paths.json rounded-rect 8点）。
   --contact／--sell-contact（ヘッダー・フッター・売却カード）と --form（CONTACT帯）は paths.json では 4点の矩形だが、
   「効果＞スタイライズ＞角を丸くする」（アピアランス効果＝パス座標に出ない）が掛かっている（2026-09-21 第3弾: OL PDF を 4x で画素実測 ≈3.5／≈5.8
   ＋ Illustrator で Expand Appearance → 8点・角 4.0pt／6.17pt を確認。review/corner_radius_2026-09-21.md）→ --contact／--sell-contact 4px（--radius-button-small）、--form 6.32（--radius-button に統一）
   末尾字間（2026-09-21 推奨⑤）: CSS の letter-spacing は最後の文字の後ろにも付き、flex 中央揃えでは字面が 0.05em 左に寄るため
   padding-inline-start: 0.1em（= 字間 1 文字分）で相殺する（--outline／--news は左右 padding の式に含める）
   hover: カード全体が <a> のとき中のボタンは <span>（物件カード「詳しく見る」）。span には hover を付けない（二重 hover 防止・規約 §6-2）
   ============================================================================= */
.button {
  --button-color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.475rem;
  padding-inline-start: 0.1em;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: var(--transition-base);
}

.button__icon {
  inline-size: 1.11875rem;
  flex-shrink: 0;
}

.button.button--fill {
  inline-size: 13.45rem;
  block-size: 2.90625rem;
  border-radius: var(--radius-button);
  color: var(--color-text-inverse);
  background-color: var(--button-color); /* デザイン5: 「詳しく見る」をカテゴリ色に（T-22）。既定は --color-brand ＝ PICK UP（カテゴリ混在）はこのまま */
  font-size: var(--fs-sp-button); /* SP 16（第6弾 フォント監査: ボタン 14〜16）。PC はカンプ 18 */
}
@media screen and (min-width: 768px) {
  .button.button--fill {
    font-size: 1.125rem;
    padding-block-end: 0.25rem; /* OL 実測: 文字の字面がボタン中心より 2px 上（TOP +2.4／一覧 +1.4〜2.0 下にずれていた）→ 下パディングで字面を 2px 上げる。SP（仮組み）は中央のまま（2026-09-22 下層精密合わせ） */
  }
}
@media (any-hover: hover) {
  .button.button--fill:is(a, button):hover {
    opacity: 0.8;
  }
}

.button.button--outline {
  min-inline-size: 20.00625rem;
  max-inline-size: 100%;
  /* SP（<768）: 長文（別荘・セカンドハウス購入物件の一覧を見る）がはみ出していたため折返し＋高さ auto（2026-09-21 レビュー P1-3）。PC はカンプの固定高さ・1行 */
  min-block-size: 4.41875rem;
  padding-block: 0.875rem;
  padding-inline: calc(1.5rem + 0.1em) 1.5rem;
  border: 1px solid var(--button-color);
  border-radius: var(--radius-button);
  color: var(--button-color);
  background-color: var(--color-bg);
  font-size: var(--fs-sp-button); /* SP 16（第6弾）。PC はカンプ 18 */
  line-height: 1.4;
  white-space: normal;
}
@media screen and (min-width: 768px) {
  .button.button--outline {
    block-size: 4.41875rem;
    font-size: 1.125rem;
    padding-block: 0 0.125rem; /* OL 実測: 字面が中心より約 1px 上（TOP 一覧を見る +0.8／入力内容の確認 +1.9 下）→ 下パディング 2 で 1px 上げる（2026-09-22） */
    padding-inline: calc(2.5rem + 0.1em) 2.5rem; /* カンプ 43.85 だがブラウザの字幅が広いぶん縮め、3本を 320.1 に収める。＋0.1em は末尾字間の相殺 */
    line-height: 1;
    white-space: nowrap;
  }
}
@media (any-hover: hover) {
  .button.button--outline:hover {
    color: var(--color-text-inverse);
    background-color: var(--button-color);
  }
}

.button.button--news {
  min-inline-size: 13.45rem;
  min-block-size: 2.90625rem;
  padding-block: 0.5rem;
  padding-inline: calc(1.25rem + 0.1em) 1.25rem;
}
@media screen and (min-width: 768px) {
  .button.button--news {
    block-size: 2.90625rem;
    padding-block: 0 0.125rem; /* --outline と同じ字面補正（OL 実測 +1.8 下） */
    padding-inline: calc(1.25rem + 0.1em) 1.25rem;
  }
}

.button.button--contact,
.button.button--sell-contact {
  /* 寸法・文字サイズは変数のフォールバック値がカンプ値（既定＝ヘッダー／フッター／売却カード）。
     SP のドロワー（.header__buttons）と画面下固定バー（.cta-bar）だけが --button-w/--button-h/--button-fs を上書きする（2026-09-21 SPヘッダー） */
  inline-size: var(--button-w, 11.96875rem);
  block-size: var(--button-h, 2.775rem);
  border-radius: var(--radius-button-small);
  color: var(--color-text-inverse);
  background-color: var(--color-brand);
  font-size: var(--button-fs, var(--fs-sp-button)); /* SP の既定（売却カード・ドロワー）は 16（第6弾）。固定バーは --button-fs 16 を自前で持つ */
}
@media screen and (min-width: 768px) {
  .button.button--contact,
  .button.button--sell-contact {
    font-size: var(--button-fs, 1.125rem); /* PC はカンプ 18 */
    padding-block-end: 0.3125rem; /* OL 実測: 文字の字面がボタン中心より 2px 上・アイコンは 1px 上（ヘッダー +1.6／フッター +2.5〜3.6／売却カード −1.1 の実装ずれの中庸）→ 下パディング 5 で中身を 2.5 上げ、アイコンは margin で 1.5 戻す。SP のドロワー・固定バー（仮組み）は中央のまま（2026-09-22） */
  }
}
@media (any-hover: hover) {
  .button.button--contact:hover,
  .button.button--sell-contact:hover {
    opacity: 0.8;
  }
}

.button.button--sell-contact {
  background-color: var(--color-sell);
}

@media screen and (min-width: 768px) {
  .button.button--contact .button__icon,
  .button.button--sell-contact .button__icon {
    margin-block-start: 0.1875rem; /* flex 中央揃えの margin は実効 1/2 → アイコンを 1.5 下げ、文字（−2.5）との差 1px を OL どおりに */
  }
}

.button.button--form {
  inline-size: 19.55625rem;
  max-inline-size: 100%;
  block-size: 4.0375rem;
  gap: 0.575rem;
  border-radius: var(--radius-button);
  color: var(--color-brand);
  background-color: var(--color-bg);
  font-size: var(--fs-sp-button); /* SP 16（第6弾）。PC はカンプ 19.65 */
}
@media screen and (min-width: 768px) {
  .button.button--form {
    font-size: 1.228125rem;
  }
}
@media (any-hover: hover) {
  .button.button--form:hover {
    opacity: 0.85;
  }
}

.button.button--form .button__icon {
  inline-size: 1.225rem;
}

/* カテゴリ色（--fill の塗り／--outline の枠・文字色） */
.button.button--tenant {
  --button-color: var(--color-tenant);
}

.button.button--rent {
  --button-color: var(--color-rent);
}

.button.button--buy {
  --button-color: var(--color-buy);
}

.button.button--land {
  --button-color: var(--color-land);
} /* デザイン5 で新設（T-23） */
.button.button--sell {
  --button-color: var(--color-sell);
}

/* =============================================================================
   label ― カテゴリラベル（TENANT / RENT / BUY / SELL）Outfit SemiBold 白
   標準: 高さ19.3 文字15px（見出しは固定幅83.4＝.heading__label、カード内は文字幅可変 48.7〜58）
   --large: 高さ23.2 文字18px（選択肢カード。幅可変 58.4〜100.1 → 左右パディングで統一）
   箱の幅はアウトライン版（字面の"正"）で確認（2026-09-21 推奨⑥。旧コメント「ブラウザの Outfit は字幅が広い」は本機の代替描画との比較で誤り）:
     標準 BUY 48.66／RENT 58.02 ＝ 字面の左右 8.5／8.1 → padding 8 (末尾字間 1.5 を右から引く) で 48.9／59.3 に一致
     --large TENANT 100.1／RENT 69.63／BUY 58.39／SELL 66.29 ＝ 字面の左右 9.7〜10.3（下段 BUY だけ 66.29＝14.2 でカンプ内で不揃い）
       → 字面 10px を目安に padding 9.6 / 7.8（旧 13.5 / 11.7 は 8〜9px 広かった）
   --hero : 141.8×32.8 文字25.49px（下層一覧ページの見出し上。AB2 p0414 / t250）
   ============================================================================= */
.label {
  --label-color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 1.20625rem;
  padding-inline: 0.5rem 0.40625rem; /* BUY 48.7 / RENT 58（OL の箱と一致・末尾字間 1.5 を右から引く） */
  color: var(--color-text-inverse);
  background-color: var(--label-color);
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

.label.label--large {
  /* SP は標準ラベルと同じ 15／19.3（第6弾 フォント監査: 選択肢カードの見出しが SP 20px なので 18 のラベルは見出しと同格に見えた。PC 比 18/30 → SP 20 に対して 12〜15）。PC はカンプ 18／23.2 */
}
@media screen and (min-width: 768px) {
  .label.label--large {
    block-size: 1.45rem;
    padding-inline: 0.6rem 0.4875rem; /* 字面の左右 10px（OL: TENANT 100.1・RENT 69.6・BUY 58.4・SELL 66.3）。末尾字間 1.8 を右から引く */
    font-size: 1.125rem;
  }
}

.label.label--tenant {
  --label-color: var(--color-tenant);
}

.label.label--rent {
  --label-color: var(--color-rent);
}

.label.label--buy {
  --label-color: var(--color-buy);
}

.label.label--land {
  --label-color: var(--color-land);
} /* デザイン5 で土地購入を独立（#5685b8。T-23） */
.label.label--sell {
  --label-color: var(--color-sell);
}

.label.label--hero {
  min-inline-size: 8.8625rem; /* デザイン支給は rent（AB2）のみ。BUSINESS は文字が長いので padding で伸びる（当社判断・確認事項参照） */
  block-size: 2.05rem;
  padding-inline: 0.75rem 0.59375rem;
  font-size: 1.593125rem;
}

/* =============================================================================
   heading ― セクション見出し（ラベル or 英字 ＋ 日本語 37px Bold 字間0.2）
   カンプ: ラベル(19.3) → 19.35 → 見出し行ボックス(44.4)  ／ 英字 PICK UP(25px Outfit lh30) → 16.65 → 見出し
   --large  : 下層一覧ページ（AB2）。ラベル --hero(32.8) → 26.1 → 見出し 60px
   --feature: 特集ページ（AB1）。赤リード(__lead 25.93px) → 16.85 → ラベル → 16.7 → 見出し 40px
   ============================================================================= */
.heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heading.heading--center {
  align-items: center;
  text-align: center;
}

/* 中央揃えの見出しは末尾の字間（CSS は最後の文字の後ろにも letter-spacing が付く）で字面が 字間/2 左に寄るため、
   末尾 1 文字分を負マージンで打ち消す（2026-09-21 推奨⑤。flex 中央の子は外側の幅が縮み、字面が中央に来る）。
   PC（1行・nowrap 相当）のみ。SP は折返す見出しがあり、負マージンぶん親からはみ出す（overlap_check ③）ため付けない */
@media screen and (min-width: 768px) {
  .heading.heading--center .heading__title {
    margin-inline-end: -0.2em;
  }
}

@media screen and (min-width: 768px) {
  .heading.heading--center .heading__en {
    margin-inline-end: -0.15em;
  }
}

.heading__label {
  inline-size: 5.2125rem; /* 見出しラベルは文字量に関係なく固定幅（p0595/p0651/p0622/p0650） */
  padding-inline: 0;
  margin-block-end: 1.209375rem;
}

/* デザイン5: 店舗・事業用（BUSINESS）だけ文字が長く、カンプでも帯が 99.18 と広い（p0677）。他4本は 83.42 のまま */
.property--tenant .heading__label {
  inline-size: 6.19875rem;
}

.heading__en {
  position: relative;
  inset-block-start: -0.077em;
  margin-block-end: 1.040625rem;
  color: var(--color-brand);
  font-family: var(--font-en);
  font-size: 1.5625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.2;
}

.heading__title {
  position: relative;
  inset-block-start: -0.165em;
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .heading__title {
    font-size: 2.3125rem;
  }
}

/* デザイン6（2026-09-25・D-15）: PICK UP の「おすすめ物件情報」だけ Bold(700) → Black(900)。
   先方赤字「文字太くしました」。サイズ・字間・行送り・色・座標は不変で、ウェイトのみ */
.heading__title.heading__title--black {
  font-weight: var(--fw-black);
}

/* 下層一覧ページ（AB2 t252: 60px Bold 字間0.1） */
.heading.heading--large .heading__label {
  margin-block-end: 1.63125rem;
}

.heading.heading--large .heading__title {
  font-size: var(--fs-sp-h1); /* SP 32（第6弾: h1 26〜32。旧 36）。PC はカンプ 60 */
}
@media screen and (min-width: 768px) {
  .heading.heading--large .heading__title {
    font-size: 3.75rem;
    letter-spacing: 0.1em;
    margin-inline-end: -0.1em; /* 字間 0.1em に合わせて末尾字間の打ち消しも 0.1em（共通の −0.2em のままだと字面が 3px 右に寄る。2026-09-22 下層精密合わせ） */
  }
}

/* 特集ページ（AB1 t300/t369: リード 25.93px Bold 字間0 #c1272d ／ 見出し 40px Bold 字間0.1） */
.heading__lead {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-end: 1.053125rem;
  color: var(--color-accent-red);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .heading__lead {
    font-size: 1.620625rem;
  }
}

.heading.heading--feature .heading__label {
  margin-block-end: 1.04375rem;
}

/* 赤リード→ラベルの余白はカンプで 48.2／56.3／58.7 とセクションごとに違う（ページ位置に影響するためカンプ通り。確認事項参照） */
.feature-section--buy .heading__lead {
  margin-block-end: 1.559375rem;
}

.feature-section--land .heading__lead {
  margin-block-end: 1.528125rem; /* 27.35 − 2.9（土地だけラベル→見出しが 14.3 とさらに狭いぶんをここで吸収） */
}

@media screen and (min-width: 768px) {
  .heading.heading--feature .heading__title {
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    margin-inline-end: -0.1em; /* 同上 */
  }
}

/* お知らせ カテゴリ別一覧（/news/<category>/）: h1「お知らせ」の下に現在のカテゴリ名（06_お知らせ設計 §4-1）。
   特集の赤リードと同じ部品を、位置（h1 の後）と色（ティール＝NEWS ラベルと同色）だけ変える。MT では <$mt:CategoryLabel$>（2026-09-22） */
.heading__lead.heading__lead--news {
  margin-block: 1rem 0;
  color: var(--color-brand);
}
@media screen and (min-width: 768px) {
  .heading__lead.heading__lead--news {
    margin-block-start: 1.25rem;
  }
}

/* =============================================================================
   mv ― メインビジュアル（写真 1920×807 @y76 全幅・下端フェード焼き込み／左に白グラデ（0〜997px・68%まで白・93%）
   見出し Outfit SemiBold 99px/lh107.62 ／ 37px Medium ／ リード 22px/lh43.77 ／ 右の掲載バッジ（円249.5・金環・きらめき2）
   写真は選択肢カード（次セクション）の背面へ続く（カードが y549 から写真に重なる）ため、セクション高さ 473（549−76）で写真をはみ出させる
   ============================================================================= */
.mv {
  position: relative;
  /* バッジ径（中の文字・きらめきの位置と大きさは全てこの径に比例させる）。SP は _setting の --mv-badge-size-sp、PC はカンプ 249.5 */
  --mv-badge-size: var(--mv-badge-size-sp);
  /* SP の写真上端（セクション上端基準）＝ 下端 − 下余白 24 − バッジ半径 − 写真高さ。::after のフェード開始点と .mv__image が共有 */
  --mv-photo-top-sp: calc(100% - 1.5rem - var(--mv-badge-size) / 2 - var(--mv-photo-h-sp));
}
@media screen and (min-width: 768px) {
  .mv {
    --mv-badge-size: 15.59375rem;
    block-size: 29.985625rem; /* デザイン8: 入口カードの写真上端 556 − 写真上端 76.23（写真は 465.56 に縮み、カードは写真に重ならず白地の上に並ぶ） */
  }
}
.mv {
  /* 左の白グラデ（p1894: x0〜997 / 白→68.4%まで不透明→100%で透明 / 不透明度93%）。高さは写真の実高さ（100vw比）に追従
     重なり順: 写真(z-1・先) → 白グラデ(z-1・後=::after) → 本文（通常フロー）。z-index を正にすると .mv__inner に stacking context が要り、
     きらめきの mix-blend-mode が写真に届かなくなるため負の z-index で下に敷く */
}
.mv::after {
  content: "";
  position: absolute;
  inset-block-start: 0; /* カンプの白グラデは y−1.25（D5）／−9.97（D3）＝どちらもアートボード上端より上。実装は写真上端に合わせて 0 のまま（上も下も地が白なので T-06 の +8.72 は見た目に出ない。確認事項参照） */
  inset-inline-start: 0;
  z-index: -1;
  /* 1920px超（帯①）は inner が中央に寄るぶん文字が右へ動くので、白グラデも inner 基準で追従させる:
     (100% − 1600) / 2 + 837.4 ＝ 1920px でちょうど 997.4。帯②（≤1680）は rem(997.4) の方が大きく現状維持（2026-09-21 レビュー P2-6） */
  inline-size: max(62.3375rem, (100% - 100rem) / 2 + 52.3375rem);
  max-inline-size: 100%;
  block-size: 42.0331429583vw;
  background: linear-gradient(to right, #fff 68.4%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.93;
  pointer-events: none;
  /* デザイン8: PC の白グラデは TOP左.png の下に入る重なり順のため、写真（image_mv.jpg）に焼き込んだ（review/tools/prep_images_d8.py）。PC では出さない */
}
@media screen and (min-width: 768px) {
  .mv::after {
    display: none;
  }
}
.mv::after {
  /* SP（2026-09-22 第7弾）: 旧「白 78% を全面」は写真がほぼ見えなかった。案①＝本文は白地、写真は本文の下に露出（セクション下端から
     --mv-photo-h-sp）、バッジは写真の下端にまたがる。白→透明のフェードは写真上端から --mv-fade-sp だけ（本文と写真の境目を柔らかくする） */
}
@media (max-width: 767px) {
  .mv::after {
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(to bottom, #fff var(--mv-photo-top-sp), rgba(255, 255, 255, 0) calc(var(--mv-photo-top-sp) + var(--mv-fade-sp)), rgba(255, 255, 255, 0) calc(var(--mv-photo-top-sp) + var(--mv-photo-h-sp) * 0.55), #fff calc(var(--mv-photo-top-sp) + var(--mv-photo-h-sp) * 0.8)); /* 下側のフェードは写真に焼き込まれた白フェード（写真の縦 62〜77% で芝→白。260 に縮めると 26px の急な段になる）を
   写真の縦 55〜80% で上書きして緩める。写真の下 20% は元から真っ白 */
    opacity: 1; /* PC の 0.93 のままだと写真上端の切れ目が 7% 透けて線に見える（実測）。SP は白 100% */
  }
}

.mv__image {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none;
  /* 2026-10-08 FVはみ出し対策: 写真の高さを本文と同じ rem（ルートremスケーリング）で持つ。
     旧: 幅100%・高さ auto（＝100vw/1920 比）。本文は帯②（768〜1680）で 100vw/1680 比に縮むため、1680 以下では写真だけが
     本文より速く縮み、リード下端が写真下端を 11〜19px はみ出していた（1440: +18.9／1280: +17.1／768: +11.3）。
     → 写真の高さ＝max(rem(465.56), 100vw/1920×465.56)。1920 以下は rem 側（1920px でカンプ 465.56 と一致）、
       1920 超は従来どおり幅比。object-fit: cover・中央基準（1440 で左右各 6% 切れる）。焼き込みの白グラデ（不透明〜透明＝写真幅の 35〜52%）が
       画面幅比でカンプとほぼ同じ位置（34〜53%）に来て、本文（右端＝画面幅の 46%）との関係がカンプどおりになる。左基準だと白が 59% まで広がり建物が右へ切れる */
}
@media screen and (min-width: 768px) {
  .mv__image {
    block-size: max(29.0975rem, 24.2479166667vw);
    object-fit: cover;
    object-position: 50% 50%;
  }
}
.mv__image {
  /* SP: バッジの上半分ぶんだけセクション下端から上げた位置に下端を置き、--mv-photo-h-sp の高さで露出（上端＝本文の直下＋16）。
     写真 3842×1614 を 375×260 で切ると横 61% のスライス。建物（写真の x46〜97%）が丸ごと入るよう横位置 100%（スライス x39〜100%）。
     建物は写真の縦 8〜55% にあり、バッジ上端（写真の 155）より上に収まる。下端の白フェード焼き込みがバッジの裏に来る */
}
@media (max-width: 767px) {
  .mv__image {
    inset-block-start: var(--mv-photo-top-sp);
    block-size: var(--mv-photo-h-sp);
    object-fit: cover;
    object-position: 100% 50%;
  }
}

.mv__inner {
  /* FV3行のぶら下げ量（2026-09-28 社長チェック）。カンプは3行が .inner より外へ出る（タイトル −23.85／キャッチ −16.27／リード −10.08）。
     この値を全幅でそのまま使うと、帯②（768〜1680）では .inner の左余白と同率で縮んで 768px でタイトルが画面左端から 7.39px（確認事項 #255）、
     SP（<768）では .inner 左余白 20px を超えて −3.84px ＝ 画面外に出ていた。
     → ぶら下げ量を1つの変数にまとめ、3行の相対差（カンプどおり 7.58／13.77）は保ったまま、狭い幅でだけ変数側を縮める:
       SP     … 0（＝他セクションと同じ .inner 左余白 20px に揃える）
       帯②    … max(カンプ値, min(0, 20px − .inner 左余白)) ＝ 画面左端から 20px（SP の --padding-sp と同値）を絶対値で担保。
                 min(0, …) は 768〜850px 付近で .inner 左余白が 20px を下回る帯に「右へ押し出す」正のぶら下げが出ないようにするためのもの（その帯は .inner に揃う）
       帯①(>1680・カンプの帯) … カンプ値そのまま（1920px の位置は不変） */
  --mv-hang: 0px;
  position: relative;
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
}
@media screen and (min-width: 768px) {
  .mv__inner {
    --mv-hang: max(-1.490625rem, min(0px, calc(20px - var(--padding-pc))));
    padding-block-start: 5.19rem; /* デザイン6 t078 bounds y149.93 − (lh101 − 1.088×110)/2 − 76.23（D5 は y154.91 ＝ 88.02。タイトルだけ 4.98 上がった） */
    padding-block-end: 0;
  }
}
@media screen and (min-width: 1681px) {
  .mv__inner {
    --mv-hang: -1.490625rem;
  }
}

.mv__title {
  position: relative;
  inset-block-start: -0.077em;
  margin-inline-start: var(--mv-hang, 0px); /* デザイン6: bounds x136.15 − inner 左端 160（D5 は x157.72 ＝ −2.3）。FV の3行が揃って 21.57px 左へ動いた。狭い幅の担保は .mv__inner の --mv-hang 参照 */
  color: var(--color-text); /* デザイン6: ティール #215662 → スミ #000000（渋谷氏メール・小林氏赤字「スミ文字」。text.json t078 color_hex #000000） */
  font-family: var(--font-en);
  font-size: var(--fs-sp-h1-mv); /* SP 36（第7弾で確定。第6弾の 32 → 36）。PC はカンプ 99 */
  font-weight: 900; /* デザイン5: Outfit Black（D3 は SemiBold 600）。Google Fonts に 900 を追加読み込み */
  letter-spacing: 0; /* デザイン5: 0.02em → 0 */
  line-height: 0.92;
}
@media screen and (min-width: 768px) {
  .mv__title {
    font-size: 6.875rem; /* デザイン5: 99 → 110 */
    line-height: 6.3125rem; /* デザイン5: 107.62 → 101 */
  }
}

.mv__copy {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.5rem;
  font-size: 1.25rem;
  font-weight: var(--fw-bold); /* デザイン5: Medium → Bold */
  letter-spacing: 0.1em;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .mv__copy {
    margin-block-start: 0.664375rem; /* デザイン8 t004 y373.66 − (lh45 − 1.219×34)/2 − タイトル行ボックス下端 361.27（D6 は1行・lh71.09） */
    margin-inline-start: calc(var(--mv-hang, 0px) + 0.47375rem); /* デザイン6: bounds x143.73 − inner 左端 160 ＝ −16.27（D5 は x165.30 ＝ +5.3）。タイトルとの差 7.58 を足して出す */
    font-size: 2.125rem; /* デザイン5: 37 → 34 */
    line-height: 2.8125rem; /* デザイン8: 2行（「ひとつの暮らしを、／ふたつの場所で。」） */
    white-space: nowrap;
  }
}

.mv__lead {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.5rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .mv__lead {
    margin-block-start: 0.738125rem; /* デザイン8 t005 y476.31 − (lh32 − 1.219×22)/2 − キャッチ行ボックス下端 461.9（D6 は2行 → 1行） */
    margin-inline-start: calc(var(--mv-hang, 0px) + 0.860625rem); /* デザイン6: bounds x149.92 − inner 左端 160 ＝ −10.08（D5 は x171.50 ＝ +11.5）。タイトルとの差 13.77 を足して出す */
    font-size: 1.375rem;
    line-height: 2rem; /* デザイン5: 43.77 → 32 */
    white-space: nowrap;
  }
}

.mv__badge {
  position: relative;
  inline-size: var(--mv-badge-size); /* PC 249.5／SP 210（第7弾。375 で画面幅の 56%） */
  block-size: var(--mv-badge-size);
  /* SP: 本文の直下 16 から写真が始まり、バッジは写真の下端にまたがる（上半分が写真・下半分が焼き込みの白フェード〜白地） */
  margin-block-start: calc(var(--mv-photo-h-sp) + 1rem - var(--mv-badge-size) / 2);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .mv__badge {
    position: absolute;
    inset-block-start: 11.40625rem; /* 円 y258.5 − 76 */
    /* カンプ: inner右端(1760)から 55.4px はみ出す（x1565.9〜1815.4）。帯②では画面右端から 20px 以上内側に留める */
    inset-inline-end: max(-3.4625rem, 1.25rem - (100vw - 100%) / 2);
    margin: 0;
  }
}

/* 2026-10-09 先方指摘①「後ろが透けないように」: 円の画像を不透明版（deco_badge_circle_solid.png）に差し替え。
   元画像は白塗り＋金の輪とも不透明度 86%（α219）→ αを 255/219 倍して不透明に（縁のアンチエイリアスは比率を維持）。色は同じ */
.mv__badge-circle {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.mv__badge-sparkle {
  position: absolute;
  inline-size: calc(var(--mv-badge-size) * 79.7 / 249.5); /* 径に比例（PC で rem(79.7) と同値） */
  mix-blend-mode: screen; /* AIデータの描画モード SCREEN（黒地が抜けて白い光だけ残る） */
  pointer-events: none;
}

.mv__badge-sparkle--a {
  inset-block-start: calc(var(--mv-badge-size) * 159 / 249.5);
  inset-inline-start: calc(var(--mv-badge-size) * -6.7 / 249.5);
}

.mv__badge-sparkle--b {
  inset-block-start: calc(var(--mv-badge-size) * -14.6 / 249.5);
  inset-inline-start: calc(var(--mv-badge-size) * 166.6 / 249.5);
}

.mv__badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: 3.875rem; /* SP: 文字塊 104（16＋10＋26＋8＋44）を径 210 の中央より 9 下（PC の比率 12.1/249.5 と同じ）に */
  font-weight: var(--fw-bold);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .mv__badge-text {
    padding-block-start: 4.34375rem;
  }
}

.mv__badge-label {
  position: relative;
  inset-block-start: -0.165em;
  margin-inline-end: -0.1em; /* 中央揃えの末尾字間打ち消し（推奨⑤） */
  font-size: 1rem; /* SP（第7弾: 径 210 に合わせて 20 → 16） */
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .mv__badge-label {
    font-size: 1.25rem;
  }
}

.mv__badge-strong {
  position: relative;
  inset-block-start: -0.165em;
  margin-inline-end: -0.1em; /* 中央揃えの末尾字間打ち消し（推奨⑤） */
  margin-block-start: 0.625rem;
  color: var(--color-brand);
  font-size: 1.625rem; /* SP（第7弾: 40 は 375 幅で大きすぎる → 26。目安 24〜28） */
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .mv__badge-strong {
    margin-block-start: 0.775rem;
    font-size: 2.5rem;
  }
}

.mv__badge-note {
  position: relative;
  inset-block-start: -0.165em;
  margin-inline-end: -0.1em; /* 中央揃えの末尾字間打ち消し（推奨⑤） */
  margin-block-start: 0.5rem;
  font-size: 0.9375rem; /* SP（第7弾: 19 → 15・行送り 22） */
  letter-spacing: 0.1em;
  line-height: 1.375rem;
}
@media screen and (min-width: 768px) {
  .mv__badge-note {
    margin-block-start: 0.64375rem;
    font-size: 1.1875rem;
    line-height: 1.625rem;
  }
}

/* 写真の注記（デザイン8 で追加。t177「※写真は、イメージです。」8px Regular #808080・x1772.7〜1861.2 y545.9＝写真の右下の外）。
   写真は全幅なので画面右端基準で置く。SP は 8px が読めないため 10px・写真の右上に置く（当社判断） */
.mv__note {
  position: absolute;
  inset-block-start: calc(var(--mv-photo-top-sp) - 0.9375rem); /* SP: 写真の下端はバッジが重なるので、写真の右上の外（白地）に置く */
  inset-inline-end: var(--padding-sp);
  color: var(--color-note);
  font-size: 0.625rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.219;
}
@media screen and (min-width: 768px) {
  .mv__note {
    inset-block-start: 29.354375rem; /* 545.9 − 76.23 */
    inset-inline-end: 3.0625vw; /* 1920 − 1861.2（写真と同じく画面幅比） */
    font-size: 0.5rem;
  }
}

/* =============================================================================
   choice ― 選択肢バナー（デザイン5・2026-09-25）
   カンプ: 1段4枚 384.38×306.71・間隔 20.83（158.21〜1758.21 ＝ inner 1600 ぴったり）
   デザイン8: カードは写真 384.38×238.68＋白地の導線（〜y866.4）。MV の写真には重ならない（写真下端 541.8・カード 556〜）
   SP（未支給＝当社設計）: 1列に縦積み。写真の比率（384.38:238.68）は保つ
   ============================================================================= */
.choice {
  position: relative;
  z-index: 1;
}

.choice__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  .choice__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: min(1.301875rem, 1.3%); /* 20.83 ÷ 1600。帯②でもカード幅と同率で縮む */
  }
}

/* =============================================================================
   choice-card ― 入口カード（デザイン8・2026-10-06 で4回目の作り直し）
   D6（写真全面 384.38×306.71＋カード内右下に白文字の「◯◯を見る」＋丸矢印）
   → D8（写真 384.38×238.68 の上に 英字・見出し・サブ（白）。グラデ乗算・白 1.5px 枠は D6 と同じ／
          写真の右下の外に「※写真は、イメージです。」8px #808080／写真の下の白地に「◯◯を見る」黒 18px Bold ＋カテゴリ色の丸矢印／
          カード下端に #cccccc 1px の下線）

   カンプ ai_export_8（RENT x158.21〜542.59）:
     写真        … y556〜794.68（img_003〜006・Links の RENT/BUY/BUSINESS/LAND.png）／グラデ p0034〜p0041／枠 p0014〜p0017
     英字ラベル   … 49px Outfit ExtraBold（D6 51px）bounds y655.2
     見出し      … 30px Bold 字間0.08 行送り42 bounds y708.6（RENT のみ 707.2 → 多数決 708.6）
     サブコピー   … 19px Bold 字間0.1 行送り25 bounds y749.5
     注記        … 8px Regular #808080 bounds y795.9・右端 540.9（写真右端 −1.7）
     導線        … 文字 18px Bold 字間0.08 黒 bounds y826.2（中心 835.9）／丸 40.3 y813.3〜853.6（中心 833.45）
                   丸の右（カード右端から）7.9 / 8.4 / 9.8 / 9.9 → 9.1（中央値）／文字と丸の間 11.3 / 10.2 / 6.9 / 4.9 → 10（RENT・BUY）
     下線        … #cccccc 1px y866.4（丸の下端から 12.8）

   ⚠️ 影は付けない（D5・D6 と同じ）
   SP（<768）は未支給＝当社設計（既存方針: 1列・写真の比率は保つ・注記は 10px）
   ============================================================================= */
.choice-card {
  border-block-end: 1px solid var(--color-line-choice); /* 1px は生px（UI 境界線） */
}

.choice-card__link {
  display: block;
  color: var(--color-text);
}

/* 写真＋重ねる文字。比率は写真の枠 384.38×238.68 */
.choice-card__visual {
  position: relative;
  display: block;
  aspect-ratio: 384.38/238.68;
  color: var(--color-text-inverse);
}

/* 白 1.5px の枠線（D6 から継続。p0014〜p0017）。写真・グラデ・文字の上に重ねるので擬似要素で持つ */
.choice-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1.5px solid var(--color-border-choice-card); /* 1.5px は生px固定（縮小しても線が消えないように） */
  pointer-events: none;
}

.choice-card__figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden; /* 写真の hover 拡大を枠で切る */
}

.choice-card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

/* 写真の上に乗せる #ffffff→#b3b3b3 のグラデ（乗算）。写真の上・文字の下 */
.choice-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--choice-overlay);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.choice-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  block-size: 100%;
  justify-content: flex-end;
  padding-block-end: 1.125rem;
  padding-inline: 1rem;
}
@media screen and (min-width: 768px) {
  .choice-card__body {
    justify-content: flex-start;
    padding-block: 6.376875rem 0; /* デザイン8: 英字ラベル bounds 655.2 − 写真上端 556 ＝ 99.2 ＋ 字面補正 2.83（D6 の 107.98 と同じ求め方） */
    padding-inline: 0.95rem;
  }
}

.choice-card__label {
  position: relative;
  inset-block-start: -0.077em;
  font-family: var(--font-en);
  font-size: 2rem; /* SP: 49 は 375 幅で見出しより強すぎる → 32（PC の 2/3） */
  font-weight: 800; /* Outfit ExtraBold */
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .choice-card__label {
    font-size: 3.0625rem; /* デザイン8: 51 → 49 */
  }
}

.choice-card__title {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.375rem;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .choice-card__title {
    margin-block-start: 0.00375rem; /* デザイン8: ラベル→見出しの bounds 差 53.4（D6 55.07）。ラベルが 2px 小さくなったぶんを差し引いた値 */
    font-size: 1.875rem;
    line-height: 2.625rem;
    white-space: nowrap;
  }
}

.choice-card__sub {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.25rem;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .choice-card__sub {
    margin-block-start: 0.06375rem; /* 見出し→サブの bounds 差 40.9（D6 と同じ） */
    font-size: 1.1875rem;
    line-height: 1.5625rem;
    white-space: nowrap;
  }
}

/* 注記（写真の右下の外）。SP は 8px が読めないため 10px（当社判断） */
.choice-card__note {
  position: absolute;
  inset-block-start: calc(100% + 0.075rem); /* 795.9 − 794.68 */
  inset-inline-end: 0.10625rem;
  color: var(--color-note);
  font-size: 0.625rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.219;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .choice-card__note {
    font-size: 0.5rem;
  }
}

/* 写真の下の導線（文字＋カテゴリ色の丸矢印）。丸矢印画像は四辺 4px の透明余白つき（96px＝表示48・円 40.26） */
.choice-card__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4375rem; /* 字面実測でカンプより 3 広かったぶん（10 → 7） */
  padding-block: 1.125rem 0.5rem;
  padding-inline-end: 0.31875rem;
}
@media screen and (min-width: 768px) {
  .choice-card__action {
    padding-block: 0.9125rem 0.55rem; /* 丸の上端＝写真下端 +18.6／丸の下端 → 下線 12.8 */
    padding-inline-end: 0.31875rem;
  }
}

.choice-card__more {
  font-size: var(--fs-sp-button);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .choice-card__more {
    /* 丸と中央揃え。カンプは文字の中心が丸の中心より 2.45 下（835.9 / 833.45） */
    position: relative;
    inset-block-start: 0.153125rem;
    font-size: 1.125rem;
  }
}

.choice-card__arrow {
  inline-size: 3rem;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

/* hover は D6 と同じ量（2026-09-22 社長チェック第4弾）: 丸矢印を右へ 4px・写真を scale(1.06) */
@media (any-hover: hover) {
  .choice-card__link:hover .choice-card__arrow {
    transform: translateX(0.25rem);
  }
  .choice-card__link:hover .choice-card__image {
    transform: scale(var(--scale-hover-image));
  }
}
/* =============================================================================
   feature ― TOP の特集（EDUCATION）帯。デザイン8（1005 確定デザイン・2026-10-06）で作り直し
   D6: 白い箱（inner 幅 1599.65×280.43）の右に写真1枚・左寄せ3行＋丸矢印
   D8: **横幅いっぱいの帯**（y902.35〜1228.95・高さ 326.6）。右に写真（img_007 x759.77〜画面右端・左端は写真自体の白フェード）、
       左上に葉のぼかし（img_008 x0〜877.26・乗算グラデ #ffffff→#8cc63f は画像に焼き込み）。
       英字の小見出し「INTERNATIONAL SCHOOL AREA PROPERTIES」（Outfit SemiBold 21.31px #215662）が追加。

   カンプ ai_export_8（帯上端 902.35・inner 左端 160）:
     EDUCATION … Outfit Black 75px #215662 bounds x172.6 y941.6
     見出し    … Zen Kaku Black 37px 1行 bounds x175.5 y1035.8
     サブ      … Zen Kaku Bold 24px 字間0.05em bounds x172.7 y1087.5
     英字小見出し … Outfit SemiBold 21.31px 字間0 bounds x179.6 y1130.6
     導線      … 「物件を見る」20.77px Bold #215662（右端 775.5）＋ ティール丸 46.5（x787.3 y1166.4）
   写真は「inner 左端 + 599.8 〜 画面右端」に置く（1920px でカンプの x759.8〜1920 と一致。帯②・帯①でも文字との位置関係を保つ）
   ⚠️ 影は付けない
   ============================================================================= */
.feature {
  margin-block-start: 2.5rem;
}
@media screen and (min-width: 768px) {
  .feature {
    margin-block-start: 2.184375rem; /* デザイン8: 入口カードの下線(866.4＋1) → 帯上端 902.35 */
  }
}

.feature__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg);
  transition: var(--transition-base);
}
@media screen and (min-width: 768px) {
  .feature__banner {
    display: block;
    block-size: 20.4125rem;
  }
}
@media (any-hover: hover) {
  .feature__banner:hover {
    opacity: 0.85; /* 帯全体（写真・文字を含む <a>）。物件カードと同じ値 */
  }
}

/* 左上の葉（乗算グラデ焼き込み済み・右と下は白へ溶ける） */
.feature__leaf {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 70%;
  block-size: auto;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .feature__leaf {
    inset-block-start: 0.055rem; /* 903.23 − 902.35 */
    inline-size: 54.82875rem;
    block-size: 20.15rem;
  }
}

/* 右の写真。SP は文字の下に 16:10 で置く */
.feature__image {
  order: 2;
  inline-size: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: 70% center;
}
@media screen and (min-width: 768px) {
  .feature__image {
    --edu-photo-x: calc((100% - min(100% - var(--padding-pc) * 2, 100rem)) / 2 + 37.4875rem);
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--edu-photo-x);
    inline-size: calc(100% - var(--edu-photo-x)); /* img は置換要素なので left/right 指定だけでは伸びない */
    block-size: 100%;
    aspect-ratio: auto;
    object-position: left center; /* 左端の白フェードを常に残す */
  }
}

.feature__inner {
  position: relative;
  display: block;
}

.feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 1.75rem 1.25rem;
}
@media screen and (min-width: 768px) {
  .feature__body {
    padding-block: 2.659375rem 0; /* 帯上端 902.35 → EDUCATION bounds 941.6（39.25）＋ D6 と同じ字面補正 3.3 */
  }
}

.feature__en {
  position: relative;
  inset-block-start: -0.077em;
  color: var(--color-brand);
  font-family: var(--font-en);
  font-size: 2.375rem; /* SP: PC 75 の約 1/2 */
  font-weight: var(--fw-black);
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .feature__en {
    margin-inline-start: 0.7875rem; /* bounds x172.6 − inner 160 */
    font-size: 4.6875rem;
  }
}

.feature__title {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.625rem;
  font-size: 1.375rem;
  font-weight: var(--fw-black);
  letter-spacing: 0;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .feature__title {
    margin-block-start: 1.110625rem; /* EDUCATION→見出しの bounds 差 94.2（D6 90.89・margin 14.46）。差 3.31 を足した値 */
    margin-inline-start: 0.96875rem; /* bounds x175.5 − 160 */
    font-size: 2.3125rem;
    line-height: 2.775rem;
    white-space: nowrap;
  }
}

.feature__sub {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.375rem;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .feature__sub {
    margin-block-start: 0.263125rem; /* 見出し→サブの bounds 差 51.7（D6 51.66 と同じ） */
    margin-inline-start: 0.79375rem; /* bounds x172.7 − 160 */
    font-size: 1.5rem;
    line-height: 2.165rem;
    white-space: nowrap;
  }
}

/* 英字の小見出し（デザイン8 で追加） */
.feature__en-sub {
  margin-block-start: 0.5rem;
  color: var(--color-brand);
  font-family: var(--font-en);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.088;
}
@media screen and (min-width: 768px) {
  .feature__en-sub {
    margin-block-start: 0.696875rem; /* サブの行ボックス下端 1119.45 → bounds 1130.6（行の高さ＝em box 1.088em） */
    margin-inline-start: 1.225rem; /* bounds x179.6 − 160 */
    font-size: 1.331875rem;
    white-space: nowrap;
  }
}

/* 「物件を見る」＋ティール丸矢印 */
.feature__action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.875rem;
}
@media screen and (min-width: 768px) {
  .feature__action {
    justify-content: flex-end; /* カンプは文字が右揃え（右端 775.5）。ブラウザの字幅が広くても丸の位置を固定する */
    min-inline-size: 10.54125rem; /* 文字の左端 669.1 → 丸画像の右端（787.3 − 4 + 54.46）。字幅が広い環境では右へ伸びる */
    gap: 0.4875rem; /* 文字右端 775.5 → 丸画像の左端（787.3 − 透明余白 4） */
    margin-block-start: 0.538125rem; /* 英字小見出しの行ボックス下端 1153.79 → 丸画像の上端（1166.4 − 4） */
    margin-inline-start: 31.81875rem; /* bounds x669.1 − 160（ここから inline-size の右端に丸を置く） */
  }
}

.feature__more {
  color: var(--color-brand);
  font-size: var(--fs-sp-button);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .feature__more {
    position: relative;
    inset-block-start: 0.129375rem; /* D6 と同じ補正（丸の中心より文字が 2.5px 下） */
    font-size: 1.298125rem;
  }
}

/* 円 46.46 の四辺に 4px の透明余白を付けて書き出した 1 枚画像（review/tools/export_vectors_d6.py） */
.feature__arrow {
  inline-size: 2.75rem;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
@media screen and (min-width: 768px) {
  .feature__arrow {
    inline-size: 3.40375rem;
  }
}

@media (any-hover: hover) {
  .feature__banner:hover .feature__arrow {
    transform: translateX(0.25rem);
  }
}
/* =============================================================================
   trust ― 信頼のエイブルネットワーク加盟店（背景 #edeadb 高さ266.3 / 月桂樹 202.2×188.7 / 3特徴＋縦罫 239.1幅×128）
   2026-09-21 TOP構成変更: 前が TOPICS に戻った（カンプどおりの隣接）。TOPICS「他のTOPICSを見る」の下線下端(1956.5) → 帯上端(2006.6) = 50.1
   （TOPICS 削除中は特集下端からカンプの「特集→TOPICS見出し」104 を当てていた）
   ============================================================================= */
/* デザイン8（2026-10-06）: 背景 #edeadb → **白＋影**（p0290 #ffffff 全幅 266.32）。月桂樹＋「全国816店舗 ※2026年現在」を削除し、
   **エイブルのロゴ（緑のグラデの弧つき）330.1×130.1**（x120.6 y6699.7・inner の左端より 39.4 外）に。文字列と3特徴は右へ 56.5。
   3特徴のアイコンが #215662 → **緑 #009063**（縦罫は #215662 のまま）。縦罫はカンプどおり 3 本（右端の罫なし） */
.trust {
  margin-block-start: 2.5rem;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-trust);
}
@media screen and (min-width: 768px) {
  .trust {
    margin-block-start: 4.716875rem; /* 売却カード下端 6561.70 → 加盟店帯上端 6637.17（D8 も同値） */
  }
}

.trust__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: 2.5rem;
}
@media screen and (min-width: 768px) {
  .trust__inner {
    display: block;
    block-size: 16.64375rem;
    padding-block: 0;
  }
}

.trust__emblem {
  inline-size: 13.75rem;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .trust__emblem {
    position: absolute;
    inset-block-start: 3.783125rem; /* ロゴ bounds y6699.7 − 帯上端 6637.17（画像は四辺 2px の余白つき） */
    inset-inline-start: max(-2.5875rem, 1.25rem - (100vw - 100%) / 2); /* bounds x120.6 − inner 160。帯②では画面左端から 20px 内側に留める */
    inline-size: 20.90625rem;
  }
}

.trust__logo {
  inline-size: 100%;
  block-size: auto;
}

.trust__text {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .trust__text {
    position: absolute;
    inset-block-start: 4.825rem;
    inset-inline-start: 21.4rem; /* デザイン8: t163 x502.4 − 160（D6 285.9 ＋ 56.5） */
    max-inline-size: 35.9375rem; /* 3特徴の縦罫（x880.9）まで 595。文字が縦罫に接触しない上限（2026-09-21 レビュー P2-5） */
    text-align: start;
  }
}

.trust__title {
  position: relative;
  inset-block-start: -0.165em;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.13em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .trust__title {
    font-size: 2rem;
    letter-spacing: 0.03em; /* カンプ 0.13em。ブラウザの字幅が広く 579px（カンプ 531）で縦罫に接触するため PC は 0.03em ＝ 527px（カンプ幅と一致。P2-5。palt は無効・実測） */
    white-space: nowrap;
  }
}

.trust__lead {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 1rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .trust__lead {
    margin-block-start: 1.25rem;
    font-size: 1.125rem;
    letter-spacing: 0.02em; /* カンプ 0.1em。同上（594→551px＝カンプ 548.5）。改行は <br class="u-pc-only"> のまま・幅が足りない環境では max-inline-size 内で折返す */
    line-height: 1.875rem;
  }
}

.trust__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
}
@media screen and (min-width: 768px) {
  .trust__features {
    position: absolute;
    inset-block-start: 4.7125rem;
    /* デザイン8: 縦罫 x1097.3（D6 880.9 ＋ 56.4）→ 3列の右端 1814.6 が inner 右端 1760 を 54.6 はみ出す。
       右端基準で置き、帯②では画面右端から 20px 内側に留める（1920px ではカンプ位置 x1097.3 と一致） */
    inset-inline-end: max(-3.4125rem, 1.25rem - (100vw - 100%) / 2);
    grid-template-columns: repeat(3, 14.94375rem);
    inline-size: auto;
    block-size: 8rem;
  }
}

.trust__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 1rem;
  border-block-start: 1px solid var(--color-brand);
  text-align: center;
}
.trust__feature:last-child {
  border-block-end: 1px solid var(--color-brand);
}
@media screen and (min-width: 768px) {
  .trust__feature {
    padding-block: 0.25rem 0;
    border-block: none;
    border-inline-start: 1px solid var(--color-brand);
  }
  .trust__feature:last-child {
    border-block-end: none; /* デザイン8: 右端の縦罫は無い（paths p0113〜p0115 の 3 本のみ。D6 から 3 本だったが実装に 4 本目が残っていた） */
  }
}

.trust__icon-frame {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  block-size: 2.925rem; /* 3アイコンの下端（y2131.3〜2132.8）を揃える枠。列上端 2082 から 4 下がった位置に置く */
}

.trust__icon {
  inline-size: auto;
  block-size: 2.7625rem; /* 握手 63.9×44.2 */
}

.trust__icon.trust__icon--people {
  block-size: 2.75625rem; /* 56.1×44.1 */
}

.trust__icon.trust__icon--online {
  block-size: 2.94375rem; /* 36.6×47.1 */
}

.trust__feature-text {
  position: relative;
  inset-block-start: -0.165em;
  margin-inline-end: -0.1em;
  margin-block-start: 1.228125rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.625rem;
}

/* =============================================================================
   pickup ― PICK UP おすすめ物件情報（背景写真 1927.3×892.8 @y2300.5・上端から下端へフェードイン、下端で白に切替）
   セクション: 加盟店下端(2272.9)〜写真下端(3193.3) 高さ920.4 ／ 見出し英字 y2348.6 ／ カード 506×642.4 ×3 gap38.7 ／ 下余白82.6
   2026-09-21 TOP構成変更（03_仕様確定 §14）: 順序が 特集 → PICK UP → TOPICS → 加盟店 になり、前が加盟店の帯ではなく特集バナーになった。
   特集下端(1346.4) → 見出し英字 bounds 上端 は、カンプの「特集の後ろの余白」104（特集→TOPICS 英字）を採用 → 帯基準の 77.1 との差 26.9 を margin で足す（確認事項参照）
   ============================================================================= */
.pickup {
  position: relative;
  margin-block-start: 2.5rem;
  padding-block: 2.9375rem 3.75rem;
  overflow: hidden;
  background-color: var(--color-bg);
}
@media screen and (min-width: 768px) {
  .pickup {
    margin-block-start: 0; /* デザイン6: EDUCATION バナー下端 1182.78 がそのままセクション上端（写真上端 1250.04 は __bg の inset で持つ） */
    padding-block: 4.325625rem 5.1625rem; /* デザイン8: EDUCATION 帯の下端が 1182.78 → 1228.95 に下がったぶん（46.17）上を詰める（英字 bounds 1299.58 は不変） */ /* 上: 英字 bounds 1299.58 − 1182.78 − 1.4（bounds→CSS 行ボックスの差）。D5 は 65.61 で、バナーが 49.79 低くなったぶん増える（D-14）／下: カード下端 2060.23 → 写真下端 2142.84 */
  }
}

.pickup__bg {
  position: absolute;
  inset-block-start: 1.318125rem; /* デザイン8: 写真上端 1250.04 − セクション上端 1228.95（D6 は 67.26） */
  inset-inline-start: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: calc(100% - 1.318125rem);
  object-fit: cover;
  object-position: center bottom; /* 上端は透明フェードなので、幅が広い場合は上を切る */
}

.pickup__inner {
  position: relative;
  z-index: 1;
}

.pickup__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 2.41875rem;
  margin-block-start: 1.790625rem;
}
@media screen and (min-width: 768px) {
  .pickup__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: min(100%, 99.7125rem);
    margin-inline-start: 0.178125rem;
  }
}

/* =============================================================================
   topics ― 軽井沢のライフステージ TOPICS（note記事×4。2026-09-21 復活・エンド要望→社長承認。03_仕様確定 §14）
   カンプ AB0（TOPICS 帯 y1450.4〜1956.5・text.json/paths.json/images.json）:
     見出し行: ja「軽井沢のライフステージ」27px ZenKakuGothicNew Bold 字間0.12 #000（t335 x160.6 y1461.0）
             ＋ en「TOPICS」41px Outfit SemiBold 字間0.13 #215662（t334 y1450.4。OL 字面 x505〜670）
             ＋ 右端 note ロゴ 111.9×35.1（img_013 x1645.1 y1468.1）
     カード: サムネ 365.44×211.63 ×4（x159.3 / 568.9 / 978.5 / 1388.1 → ピッチ 409.6・間 44.17）y1514.8
     リンク: 「他のTOPICSを見る」19px ZenKakuGothicNew Bold #215662（t314 x1589.7 y1928.8）＋ 下線 1px #808080（p0501 x1577.6〜1758.2 y1955.5）
   セクションの上余白 87.6 は順序変更で新しく隣接する PICK UP の「後ろの余白」（カンプの PICK UP 写真下端→テナントラベル 87.6）を採用（確認事項参照）
   フォント: TOPICS 帯だけカンプが Zen Kaku Gothic New Bold（他は Antique）。Google Fonts の同名書体を 700 のみ読み込み（--font-gothic-new）
   ============================================================================= */
.topics {
  margin-block-start: 3rem;
}
@media screen and (min-width: 768px) {
  .topics {
    margin-block-start: 3.75875rem; /* デザイン5: 土地購入「一覧を見る」枠下端 5468.42 → TOPICS 英字 bounds 上端 5528.56 */
  }
}

/* SP（<768）: 見出しは他セクション（.heading＝英字ラベル→日本語の縦並び）と同じく「TOPICS」（英字）を上・「軽井沢のライフステージ」を下に縦積み
   （2026-09-22 社長チェック第5弾・指示2。DOM は ja→en のまま column-reverse で見た目だけ入替＝読み上げ順は PC と同じ）。
   note ロゴは見出し行の右（幅が足りる 480px〜：inner 460 ≧ 見出し 271＋gap 16＋ロゴ 90）、足りない時は折返して見出しの下・右揃え（PC と同じ「行の右端」）。PC は不変 */
.topics__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
@media screen and (min-width: 768px) {
  .topics__heading {
    flex-wrap: nowrap;
    gap: 0;
  }
}

.topics__title {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.75rem; /* 英字 32px（行ボックス 38.4）→ 日本語 22px。.heading__en の 16.65 より詰めて 1 つの見出しに見せる */
}
@media screen and (min-width: 768px) {
  .topics__title {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
  }
}

.topics__title-ja {
  position: relative;
  inset-block-start: -0.165em;
  font-family: var(--font-gothic-new);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .topics__title-ja {
    /* en「TOPICS」の字面左端を OL の x505 に置く: ja の箱を x160.6 から 342.9 幅にする（文字幅 ≈333 より広いので min で固定・字幅差で en が動かない） */
    min-inline-size: 21.43125rem;
    margin-block-start: 0.6625rem; /* bounds y1461.0 − 1450.4 */
    font-size: 1.6875rem;
    line-height: 2.05625rem; /* em box（1.219×27）＝ bounds の高さ。行ボックス＝bounds にして ink-shift で字面を合わせる */
    white-space: nowrap;
  }
}

.topics__title-en {
  position: relative;
  inset-block-start: -0.077em;
  color: var(--color-brand);
  font-family: var(--font-en);
  font-size: 1.75rem; /* SP 28（第6弾: h2 帯の上限。他セクションの英字 25〜26 より一回り大きい PC の比率を残す。旧 32）。PC はカンプ 41 */
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .topics__title-en {
    font-size: 2.5625rem;
    line-height: 2.7875rem; /* em box（1.088×41）＝ bounds の高さ */
  }
}

.topics__note {
  flex-shrink: 0;
  inline-size: 5.625rem;
  margin-inline-start: auto; /* 折返して単独行になった時に右端へ（同じ行にある時は space-between で右端＝効果なし） */
}
@media screen and (min-width: 768px) {
  .topics__note {
    margin-inline-start: 0;
    inline-size: 6.99375rem;
    margin-block-start: 1.10625rem; /* img_013 y1468.1 − 1450.4 */
    margin-inline-end: 0.1875rem; /* ロゴ右端 1757.0（inner 右端 1760 − 3） */
  }
}

.topics__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 2.760625rem;
  margin-block-start: 1.25rem;
}
@media screen and (min-width: 768px) {
  .topics__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inline-size: min(100%, 99.64375rem); /* x159.3〜1753.6 */
    margin-block-start: 0.725rem; /* 見出し行の下端＝note ロゴ下端 1503.2 → サムネ 1514.8 */
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .topics__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 「他のTOPICSを見る」: 文字＋下線 1px #808080（テキストリンク。ボタン部品ではない） */
.topics__more {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 1.5rem;
}
@media screen and (min-width: 768px) {
  .topics__more {
    margin-block-start: 2.18125rem; /* 抜粋の行ボックス下端 1893.5 → リンク行ボックス上端 1928.4（bounds.y + 0.61em − lh/2） */
    padding-inline-end: 0.1125rem; /* 下線右端 1758.2（inner 右端 1760 − 1.8） */
  }
}

.topics__more-link {
  display: block;
  min-inline-size: 11.2875rem; /* 下線の長さ p0501（x1577.6〜1758.2）。文字はその中央（OL 字面 1590〜1747 も下線中央）。ブラウザの文字幅 161.4 に対し左右 9.6 */
  padding-block-end: 0.19375rem; /* 行ボックス下端 1952.4 → 下線 1955.5 */
  padding-inline: 0.6rem;
  text-align: center;
  border-block-end: 1px solid var(--color-border-topics);
  color: var(--color-brand);
  font-family: var(--font-gothic-new);
  font-size: var(--fs-sp-body); /* SP 16（第6弾: リンク文字は本文と同じ）。PC はカンプ 19 */
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.5rem;
  white-space: nowrap;
  transition: var(--transition-base);
}
@media screen and (min-width: 768px) {
  .topics__more-link {
    font-size: 1.1875rem;
  }
}
@media (any-hover: hover) {
  .topics__more-link:hover {
    opacity: 0.7;
  }
}

/* 字面補正は文字 span に持たせ、下線（a の border）はカンプ位置に残す（ヘッダーナビの .header__link-text と同じ構造） */
.topics__more-text {
  position: relative;
  inset-block-start: -0.165em;
  display: inline-block;
}

/* =============================================================================
   topics-card ― note記事カード（サムネ 365.44×211.63 ／ タイトル 20px ZenKakuGothicNew Bold 字間0.03 lh34 #4d4d4d ／
   抜粋 16px Antique Regular 字間0 lh24 #4d4d4d ／ カード地・影・枠なし）。カード全体が <a>（note へ新規タブ）
   カンプ（t322 / t321・1枚目）: サムネ下端 1726.4 → タイトル bounds 1748.3（2行 h58.4）→ 抜粋 bounds 1823.7（3行 h67.5・箱幅 370.5）
   MT の可変長に備え、タイトル 2 行・抜粋 3 行で line-clamp（カンプの行数＝上限。段が揃い「他のTOPICSを見る」の位置が動かない）
   ============================================================================= */
.topics-card__link {
  display: block;
  color: var(--color-text-topics);
  transition: var(--transition-base);
}
@media (any-hover: hover) {
  .topics-card__link:hover {
    opacity: 0.85; /* 物件カードと同じ値 */
  }
}

.topics-card__figure {
  aspect-ratio: 365.44/211.63;
  overflow: hidden;
}

.topics-card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.topics-card__title {
  position: relative;
  inset-block-start: -0.165em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block-start: 0.75rem;
  font-family: var(--font-gothic-new);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .topics-card__title {
    margin-block-start: 1.06875rem; /* サムネ下端 1726.4 → 行ボックス上端 1743.5（bounds.y 1748.3 + 0.61em − lh/2） */
    font-size: 1.25rem;
    line-height: 2.125rem;
  }
}

.topics-card__excerpt {
  position: relative;
  inset-block-start: -0.165em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-block-start: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .topics-card__excerpt {
    margin-block-start: 0.625rem; /* タイトル行ボックス下端 1811.5 → 抜粋 1821.5 */
    margin-inline-end: -0.31875rem; /* カンプの抜粋の箱 370.5 はサムネ幅 365.44 を 5.1 超える（隣カードまで 44 あり重ならない） */
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* =============================================================================
   property ― 物件セクション（デザイン5 の並び: 賃貸／物件購入／店舗・事業用／土地購入）。見出し＋カード4列＋一覧ボタン
   デザイン5（2026-09-25）:
     ①背景の木立グラデ装飾（deco_trees_*.png）を TOP の4セクションすべてから削除（T-21）
     ②その結果セクション間の余白が全区間で変わった（カンプ実測・前セクション下端 → ラベル帯上端）:
        賃貸 66.75（PICK UP 写真下端 2142.84 → 2209.59）／物件購入 58.32（2972.63 → 3030.95）
        店舗・事業用 77.83（3793.99 → 3871.82）／土地購入 65.57（4637.33 → 4702.90）
        D3 は 87.6 / 95.1 / 115.6 / 147.8 で、広かったのは木立（高さ590.18）の逃げ
     ③ラベル帯・「詳しく見る」塗り・「一覧を見る」枠はカテゴリ色（_label / _button の modifier）
   ============================================================================= */
.property {
  position: relative;
  padding-block-start: 4rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .property {
    padding-block-start: 4.171875rem;
  }
}

@media screen and (min-width: 768px) {
  .property.property--buy {
    padding-block-start: 3.645rem;
  }
}

@media screen and (min-width: 768px) {
  .property.property--tenant {
    padding-block-start: 4.864375rem;
  }
}

@media screen and (min-width: 768px) {
  .property.property--land {
    padding-block-start: 4.098125rem;
  }
}

/* rent・buy のカードはカンプで 2.5px 低い（537.3）。ページ位置に影響するためカンプ通り（値の信頼度マップ_デザイン3.md・D5 でも同じ） */
.property.property--rent .property-card__button,
.property.property--buy .property-card__button {
  margin-block-start: 1.625rem;
}

.property__inner {
  position: relative;
  z-index: 1;
}

.property__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 1.80625rem;
  margin-block-start: 1.484375rem;
}
@media screen and (min-width: 768px) {
  .property__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inline-size: min(100%, 99.36875rem); /* x162.8〜1752.7 */
    margin-inline-start: 0.175rem;
  }
}

.property__more {
  margin-block-start: 3.01875rem;
  text-align: center;
}

/* =============================================================================
   property-card ― 物件カード（MTループ1件。4アートボード共通）
   標準: 375.8×539.8・写真 375.8×278.3・罫線 x25.3〜354.4(329.1) ／ --pickup: 506×642.4・写真 506×354.9・ラベル付き・罫線 x23.4〜481(457.6)
   スペック表 dl: 1行36.09px・先頭実線(#999 1px) → 破線(#999) ／ 価格のみ 20.05px、他 16.04px
   カード全体が外部ポータルへのリンク（<a>）。「詳しく見る」は見た目のボタン（span）
   --feature（特集ページ AB1）: 学校名の色帯は 1005 確定デザインで削除（下記）。
     本体は 写真→物件名 14.6（一覧と同じ） ／ ボタン上余白 24 ／ 下余白 26.9（3セクションのばらつき 24.9/24.9/29.6・23.9/24/30・31.1/26.8/26.8 を多数決で統一。確認事項参照）
   カード高さ・ボタン上余白はカンプで 539.8/29.4（tenant・land）と 537.3/26.9（rent・buy）が2対2。以降のセクション位置に影響するため
   統一せずカンプ通り（rent・buy はボタン上余白を 2.5 縮める。_property.scss 側の modifier で指定）
   ============================================================================= */
.property-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.property-card__link {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  color: inherit;
  transition: var(--transition-base);
}
@media (any-hover: hover) {
  .property-card__link:hover {
    opacity: 0.85;
  }
}

.property-card__figure {
  aspect-ratio: 375.78/278.33;
  overflow: hidden;
}

.property-card.property-card--pickup .property-card__figure {
  aspect-ratio: 505.98/354.92;
}

.property-card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.property-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-block: 0.9125rem 1.68125rem;
  padding-inline: 1.58125rem 1.3375rem;
}

.property-card.property-card--pickup .property-card__body {
  padding-block: 1.6125rem 1.8625rem;
  padding-inline: 1.4625rem 1.5625rem;
}

.property-card__title {
  position: relative;
  inset-block-start: 0.0625rem; /* OL 実測: 物件名・スペックの字面が全ページで 0.4〜1.9px 上（bounds 由来の余白は触らず、字面だけ 1px 下げる。ボタン・カード高さは不変。2026-09-22 下層精密合わせ） */
  display: flex;
  align-items: center;
  gap: 0.78125rem;
  margin-inline-start: 0.19375rem;
  font-size: 1.253125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.property-card.property-card--pickup .property-card__title {
  margin-inline-start: 0.1rem;
}

.property-card__label {
  margin-block-end: 0.16875rem; /* ラベル中心は物件名の中心より 1.35 上（カンプ） */
}

.property-card__name {
  position: relative;
  inset-block-start: -0.165em;
  /* 物件名だけ字面補正（ラベルは箱＝flex 中央のため対象外） */
}

.property-card__spec {
  position: relative;
  inset-block-start: 0.0625rem; /* 物件名と同じ（罫線ごと 1px 下げる。OL 実測 −0.8〜−1.9） */
  margin-block-start: 0.73125rem;
  border-block-start: 1px solid var(--color-border);
}

.property-card.property-card--pickup .property-card__spec {
  margin-block-start: 1.24375rem;
}

.property-card__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* SP: 項目名は内容幅（「間取り/面積」が rem(100) を超えて折れ、値と重なっていた。2026-09-21 レビュー P1-2） */
  align-items: center;
  min-block-size: 2.255625rem;
  padding-block: 0.375rem;
  border-block-end: 1px dashed var(--color-border);
}
.property-card__row:last-child {
  border-block-end: none;
}
@media screen and (min-width: 768px) {
  .property-card__row {
    grid-template-columns: 8.36875rem minmax(0, 1fr);
    block-size: 2.255625rem;
    padding-block: 0;
  }
}

@media screen and (min-width: 768px) {
  .property-card.property-card--pickup .property-card__row {
    grid-template-columns: 9.9375rem minmax(0, 1fr);
  }
}

.property-card__term {
  position: relative;
  inset-block-start: -0.165em;
  padding-inline: 0.75rem;
}
@media screen and (min-width: 768px) {
  .property-card__term {
    padding-block-start: 0.2125rem; /* カンプでは項目名の中心が行中心より 1.7 下（値は 0.25 下）。中央揃えに上パディングで再現 */
    padding-inline: 1.34375rem 0;
  }
}
.property-card__term {
  font-size: 1.0025rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .property-card.property-card--pickup .property-card__term {
    padding-inline-start: 1.6625rem;
  }
}

.property-card__desc {
  position: relative;
  inset-block-start: -0.165em;
  font-size: 1.0025rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
  line-height: 1.3;
  overflow-wrap: anywhere; /* SP: 値は列内で自然折返し（P1-2） */
  word-break: auto-phrase; /* 2026-10-08: SP で折り返す時は語の切れ目で（「3LDK＋／書斎/142.35㎡」。旧: 375px で「㎡」1文字だけ次行）。未対応の Safari は html の text-wrap-style: pretty で孤立だけ防ぐ */
}
@media screen and (min-width: 768px) {
  .property-card__desc {
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.property-card__desc--price {
  font-size: 1.253125rem;
}

.property-card__button {
  align-self: center;
  margin-block-start: 1.78125rem;
  margin-inline-end: 0.5875rem; /* カンプのボタンはカード中心より 4.7 左（x240.3） */
}

.property-card.property-card--pickup .property-card__button {
  margin-block-start: 2.0125rem;
  margin-inline-end: 0;
}

/* ---- 特集ページ: 学校名の色帯（.property-card__school）は 1005 確定デザインの指示書 p2「写真下の学校名の枠は削除」で削除（2026-10-06・社長回答 Q6）。
   カスタムフィールド school は登録画面に残してある（削除は社長確認が要る操作のため。テンプレートからは出力しない） ---- */
/* 色帯が無くなったため、写真 → 物件名の余白は一覧のカードと同じ 14.6（旧: 色帯 → 物件名 25）。当社判断 */
.property-card.property-card--feature .property-card__button {
  margin-block-start: 1.5rem;
}

/* =============================================================================
   sell ― 物件の売却（白カード 1596.5×501.7 角丸なし・左に写真 1117.6×524.9（右フェード）・背面に木立装飾・右に見出し＋本文＋紫ボタン）
   ============================================================================= */
.sell {
  padding-block-start: 4rem;
}
@media screen and (min-width: 768px) {
  .sell {
    padding-block-start: 1.64625rem; /* デザイン5: TOPICS「他のTOPICSを見る」の下線 6033.68 → 売却カード上端 6060.02 */
  }
}

.sell__card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-soft); /* 実測 blur≈10px・端の暗さ≈7%（物件カードより薄い。2026-09-21 影の全体監査） */
}
@media screen and (min-width: 768px) {
  .sell__card {
    block-size: 31.35625rem;
  }
}

.sell__image {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  /* SP（2026-09-28 社長チェック）: 素材 image_sell.webp（2236×1050）は左 159px が白・右 111px が透明で、
     素の縦横比のまま置くと カード内の左右に白地が出る（375 で左 24px・右 14px）。
     → 枠（16:10）を object-fit: cover で満たし、写り込みが白に抜ける帯を外す。
     object-position 29% ＝ 横に見える源画像 1680px の左端が col 160（＝白地の直後）に来る値
     （見える範囲 col 160〜1840。並木・車道が左右とも断ち切りにならない位置を 375/390/414 で確認） */
}
@media (max-width: 767px) {
  .sell__image {
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: 29% 50%;
  }
}
@media screen and (min-width: 768px) {
  .sell__image {
    position: absolute;
    inset-block-start: -0.65rem;
    inset-inline-start: -5.8375rem;
    inline-size: 69.85rem;
    max-inline-size: none;
  }
}

.sell__deco {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -20%;
  z-index: 0;
  inline-size: 140%;
  max-inline-size: none;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .sell__deco {
    inset-block-start: 8.71875rem;
    inset-block-end: auto;
    inset-inline-start: -22.5rem;
    inline-size: 124.13125rem;
  }
}

.sell__body {
  position: relative;
  z-index: 2;
  padding-block: 1.5rem 2rem;
  padding-inline: var(--padding-sp);
}
@media screen and (min-width: 768px) {
  .sell__body {
    position: absolute;
    inset-block-start: 4.04375rem;
    inset-inline-start: 64.03125rem;
    inline-size: 35.875rem;
    padding: 0;
  }
}

.sell__text {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 1.025rem;
  margin-inline-start: 0.4rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 2rem;
}

.sell__more {
  margin-block-start: 1.728125rem;
  margin-inline-start: 0.38125rem;
}

/* =============================================================================
   news ― お知らせ（左: NEWS(Outfit 26px)／お知らせ(37px) 見出し＋一覧ボタン ／ 右: 5行リスト 982.5px）
   ============================================================================= */
.news {
  padding-block: 4rem;
}
@media screen and (min-width: 768px) {
  .news {
    padding-block: 7.033125rem 5.34rem; /* デザイン5: 加盟店帯下端(6903.49) → リスト上罫線(7016.02) ／ お知らせ下罫線(7365.56) → CONTACT帯上端(7451.00）。
※ お知らせ行は D3 から −501.83 なのに CONTACT 帯・フッターは −528.39 ＝ お知らせ→CONTACT の余白が 26.56 縮んでいる（当社発見。確認事項参照） */
  }
}

.news__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .news__inner {
    display: grid;
    grid-template-columns: 28.51875rem minmax(0, 61.40625rem);
    gap: 0;
  }
}

.news__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .news__side {
    padding-inline-start: 10.19375rem;
  }
}

.news__heading {
  display: flex;
  flex-direction: column;
  margin-block-start: -0.178125rem;
  margin-inline-start: 0.0875rem;
}

.news__heading-en {
  position: relative;
  inset-block-start: -0.077em;
  color: var(--color-brand);
  font-family: var(--font-en);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.2;
}

.news__heading-ja {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.6375rem;
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .news__heading-ja {
    font-size: 2.3125rem;
  }
}

@media screen and (min-width: 768px) {
  .news__more {
    margin-block-end: 0.1125rem;
  }
}

/* =============================================================================
   news-list ― お知らせ一覧（MTループ1件=li。行ピッチ69.9・罫線 #999 1px・カテゴリ枠 85.7×21.9 ティール1px）
   ※カンプの罫線間隔は 73.1/65/73.2/65/73.2 とばらつくため多数決で 69.9 に統一（確認事項 #10）
   ============================================================================= */
.news-list {
  border-block-start: 1px solid var(--color-border);
}

.news-list__item {
  border-block-end: 1px solid var(--color-border);
}

.news-list__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem 1rem;
  align-items: center;
  padding-block: 1rem;
  padding-inline: 0.25rem;
  transition: var(--transition-base);
}
@media screen and (min-width: 768px) {
  .news-list__link {
    grid-template-columns: 7.875rem 8.6rem minmax(0, 1fr);
    gap: 0;
    block-size: 4.30625rem; /* 罫線1px込みで行ピッチ69.9（5行＋上罫線＝カンプの349.5px） */
    padding-block: 0;
    padding-inline-start: 0.825rem;
  }
}
@media (any-hover: hover) {
  .news-list__link:hover {
    color: var(--color-brand);
  }
}

/* 行 hover でカテゴリタグを反転（枠色 #215662 の塗り＋白文字。2026-09-22 社長チェック第4弾・指示1: 文字色の変化だけでは分かりにくい）。
   行の色変化（上）は残す。タグ自身の transition で 0.3s（行の transition は継承されないため個別に持つ） */
@media (any-hover: hover) {
  .news-list__link:hover .news-list__category {
    color: var(--color-text-inverse);
    background-color: var(--color-brand);
  }
}
.news-list__date {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
}

.news-list__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start; /* grid 列（SP の 1fr・PC の 137.6）に引き伸ばさない（min-inline-size 化に伴い明示。旧 固定幅では伸びなかった） */
  min-inline-size: 5.35625rem; /* 固定幅 85.7 → 最小幅（「ピックアップ」6 文字＝14px×1.1×6＋余白 8×2 ≈ 108 が入るように。4 文字までは 85.7 のまま＝TOP 不変。お知らせ一覧 2026-09-22） */
  block-size: 1.36875rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.news-list__title {
  grid-column: 1/-1;
  font-size: var(--fs-sp-body); /* SP 16（第6弾: リストの本文）。PC はカンプ 18 */
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .news-list__title {
    grid-column: auto;
    font-size: 1.125rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --full: お知らせ一覧ページ（/news/・カテゴリ別）。TOP の 5 行と同じ行だが、タイトルの ellipsis を解除して PC も 2 行まで折り返す
   （06_お知らせ設計 §4-1。行高は 68.9 を最小にして 2 行のときだけ伸びる）。note記事の行は note へ新規タブ（2026-09-22） */
@media screen and (min-width: 768px) {
  .news-list.news-list--full .news-list__link {
    grid-template-columns: 7.875rem minmax(8.6rem, max-content) minmax(0, 1fr); /* タグ列は 137.6 を最小にし、長いタグ（ピックアップ 108＋余白 16）でもタイトルと接しない */
    block-size: auto;
    min-block-size: 4.30625rem;
    padding-block: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .news-list.news-list--full .news-list__category {
    margin-inline-end: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .news-list.news-list--full .news-list__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    white-space: normal;
    text-overflow: clip;
  }
}

/* =============================================================================
   contact ― お問い合わせ（デザイン8 で見出しの「運営会社」を削除。MT: 共通モジュール。ティール帯 高さ454.5（フッター重なり除く）・透かし CONTACT Outfit Bold 142.2px 13%・縦罫 x772.1・右カラム x844）
   ============================================================================= */
.contact {
  position: relative;
  padding-block: 3rem;
  overflow: hidden;
  color: var(--color-text-inverse);
  background-color: var(--color-brand);
  /* 直前セクションとの余白は前のセクション側が持つ（TOP: .news の padding-block-end。下層: 各ページの最終セクション）。2026-09-21 下層実装で移動 */
}
@media screen and (min-width: 768px) {
  .contact {
    block-size: 28.40625rem;
    padding-block: 0;
    overflow: visible;
  }
}

/* 透かし（2026-09-21 社長チェック第2弾・指示6）: カンプではセクション上端にもっと近い。OL 実測: 「O」の下端 y8087（帯上端 7979 から 108）に対し
   実装は 8099 で 12px 下がっていた。原因は Outfit の縦位置の系統誤差（推奨④・0.077em×142.2＝10.9px）→ ink-shift(en) で補正（残差 1px）。
   横位置: t341 bounds 中心 951.1 ＝ OL 字面中心 951.5（ページ中心 960 より 8.9 左）。絶対配置の translate −50% は末尾字間 0.2em を含む箱の中心なので
   0.1em（字間の半分）を右へ戻して字面中心を 951 に置く */
.contact__watermark {
  position: absolute;
  inset-block-start: -0.375rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  font-family: var(--font-en);
  font-size: 4.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .contact__watermark {
    inset-block-start: calc(-0.7625rem - 0.077em); /* t341 bounds y7966.7 − 帯 7979.4 − 字面補正。−12.7 → −12.2: OL 4枚の実測（TOP +0.1／rent −1.6／feature −0.8／contact −1.3）の中庸に 0.5 下げ（2026-09-22） */
    inset-inline-start: calc(50% - 0.55625rem + 0.1em);
    font-size: 8.888125rem;
    line-height: 1.088;
  }
}

.contact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .contact__inner {
    display: grid;
    grid-template-columns: 48.25625rem minmax(0, 1fr);
    gap: 0;
    block-size: 100%;
  }
  .contact__inner::after {
    content: "";
    position: absolute;
    inset-block-start: 4.55rem;
    inset-inline-start: 48.25625rem;
    inline-size: 1px;
    block-size: 20.7125rem;
    background-color: var(--color-text-inverse);
  }
}

.contact__title {
  position: relative;
  inset-block-start: -0.165em;
  inset-block-start: calc(-1 * 0.165em + 0.0625rem); /* OL 実測で ink-shift 後も 1.2〜1.7px 上に残る（TOP／rent／contact 共通）→ 1px 戻す（2026-09-22 下層精密合わせ） */
  align-self: start;
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contact__title {
    margin-block-start: 13.340625rem; /* デザイン8: 見出しが「運営会社お問い合わせ」→「お問い合わせ」・bounds y7651.6 → 7661.6（+10）。−1 は OL 実測の字面補正（D6 から継続） */
    margin-inline-start: 29.5875rem; /* デザイン8: bounds x633.4 − 160（D6 x448.3） */
    font-size: 2.1875rem;
    text-align: start;
    white-space: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .contact__body {
    padding-block-start: 4.371875rem;
    padding-inline-start: 4.49375rem;
  }
}

.contact__text {
  position: relative;
  inset-block-start: -0.165em;
  font-size: 1rem; /* 第5弾で SP のみ 15px にしていたが第6弾で 16 に戻した（SP は句点ごとの改行に変更し、PC の文中改行を SP で解除したため 15px にする理由が消えた） */
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 2rem;
}

.contact__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 3.79375rem;
  margin-block-start: 1.140625rem;
}

.contact__tel-link {
  position: relative;
  inset-block-start: -0.077em;
  inset-block-start: calc(-1 * 0.077em - 0.21875rem); /* 「TEL. 」0.7em と数字 41px の混在行。Outfit の系統誤差 0.077em に加え OL 実測で残るぶんを上乗せ（4.5 → 3.5。重心実測 TOP −1.7／rent −0.9／contact −0.7 で 1px 上げ過ぎだったため。2026-09-22） */
  font-family: var(--font-en);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .contact__tel-link {
    font-size: 2.5625rem; /* 数字は 41px（カンプ実測: キャップハイト27px≒41px）。AI の horizontal_scale 70% の反映先は「TEL.」の文字サイズ（下記） */
  }
}

.contact__tel-prefix {
  font-size: 0.7em; /* 「TEL. 」は数字の 0.7 倍（支給PDF p1 のスパン実測 28.7px = 41×0.7。確認事項 #49 を更新・2026-09-21 レビュー P2-3） */
}

.contact__store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 5.35625rem;
  block-size: 1.36875rem;
  border: 1px solid var(--color-text-inverse);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1;
}

.contact__form {
  margin-block-start: 1.61875rem;
}

/* =============================================================================
   list-hero ― 物件一覧ページ（AB2 流用×4種）の見出しエリア。見出し（label--hero＋60px）とエリアマップを含む（背面の木立は 1005 確定デザインで削除）
   カンプ: ラベル y123.4（ヘッダー下端76 → 47.4）／木立 x-39.2 y136.5 w1986.1 h590.2（TOP の deco_trees_* と同形・不透明度40%）
   ============================================================================= */
.list-hero {
  position: relative;
  padding-block-start: 2.5rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .list-hero {
    padding-block-start: 2.9625rem;
  }
}

/* .list-hero__deco（背景の木立）は 1005 確定デザインで削除（指示書 p3「背景樹木イラスト削除しました」・賃貸一覧の .ai でも木立の図形 178 → 0）。
   購入・店舗事業用・土地の一覧はデザイン未支給だが同じ部品の色違いなので 4 本とも削除（2026-10-06・社長回答 Q7） */
.list-hero__inner {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   area-map ― 軽井沢エリアマップ（AB2）。地図本体（道路・破線区画・地名・学校ピン）は Illustrator から完全形で書き出した
   画像（image_area_map.png 1322.09×907.32 @ x293.26 y299.83）。エリア名のピル9個だけを HTML の <button> として
   同じ座標（地図幅比 %）に重ね、絞り込みの操作要素にする（テキスト・hover・フォーカス・aria が持てるため。確認事項参照）
   ピル: 162.76×27.03 r13.51 #78a988 ／ 文字 17.3px Bold 白 字間0（南ケ丘・南原のみ 水平比率 83.4%）。サイズは地図幅基準（cqi）
   ============================================================================= */
.area-map {
  position: relative;
  inline-size: min(100%, 82.630625rem);
  margin-block-start: 2rem;
  margin-inline: auto;
  container-type: inline-size;
}
@media screen and (min-width: 768px) {
  .area-map {
    margin-block-start: 2.84375rem; /* 見出し行ボックス下端(254.3) → 地図上端(299.83) */
    margin-inline-start: 8.32875rem; /* x293.26 − inner 左端160 */
  }
}

.area-map__image {
  inline-size: 100%;
  aspect-ratio: 2644/1814;
}

.area-map__pin {
  --pin-x: 0;
  --pin-y: 0;
  --pin-w: 162.76;
  position: absolute;
  inset-block-start: calc(var(--pin-y) / 907.32 * 100%);
  inset-inline-start: calc(var(--pin-x) / 1322.09 * 100%);
  /* SP（<768）はピルを出さない（2026-09-22 第6弾 フォント監査）: 文字は地図幅比（cqi）で 375px では 4.2px＝判読不能。
     最小 10px にすると 9 個中 2 組（中軽井沢／旧軽井沢・南ケ丘・南原／新軽井沢）が同じ高さで重なるため、SP では地図を図版として置き、
     絞り込みは直下の「エリア別に表示」ボタン（同じ data-area・同じ JS 経路）に委ねる。地図に焼き込まれた地名も SP では判読不能＝SP 意匠支給時に見直し */
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--pin-w) / 1322.09 * 100%);
  block-size: 2.9791032932%;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0;
  color: var(--color-text-inverse);
  background-color: var(--color-area);
  font-family: inherit;
  font-size: 1.3085342148cqi;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-base);
}
@media (any-hover: hover) {
  .area-map__pin:hover {
    opacity: 0.8;
  }
}
.area-map__pin[aria-pressed=true] {
  background-color: var(--color-brand);
}
@media screen and (min-width: 768px) {
  .area-map__pin {
    display: inline-flex;
  }
}

/* ピル9個の座標（AB2 px。地図左上 x293.26 y299.83 基準に引いた値）。HTML 側は modifier だけ持つ（インラインスタイル禁止） */
.area-map__pin.area-map__pin--kita {
  --pin-x: 568.85;
  --pin-y: 103.93;
  --pin-w: 162.76;
}

.area-map__pin.area-map__pin--sengataki {
  --pin-x: 354.48;
  --pin-y: 278.32;
  --pin-w: 162.76;
}

.area-map__pin.area-map__pin--naka {
  --pin-x: 661.1;
  --pin-y: 371.2;
  --pin-w: 162.76;
}

.area-map__pin.area-map__pin--kyu {
  --pin-x: 936.5;
  --pin-y: 364.8;
  --pin-w: 162.76;
}

.area-map__pin.area-map__pin--nishi {
  --pin-x: 187.47;
  --pin-y: 480.74;
  --pin-w: 162.76;
}

.area-map__pin.area-map__pin--minamigaoka {
  --pin-x: 791.48;
  --pin-y: 610.23;
  --pin-w: 157.61;
}

.area-map__pin.area-map__pin--shin {
  --pin-x: 967.93;
  --pin-y: 604.27;
  --pin-w: 153.24;
}

.area-map__pin.area-map__pin--minami {
  --pin-x: 698.47;
  --pin-y: 742.85;
  --pin-w: 162.76;
}

.area-map__pin.area-map__pin--miyota {
  --pin-x: 103.16;
  --pin-y: 811.13;
  --pin-w: 250.13;
}

.area-map__pin-text {
  display: inline-block;
}

.area-map__pin-text--condensed {
  transform: scaleX(0.834); /* AI horizontal_scale 83.4%（南ケ丘・南原エリア） */
}

/* =============================================================================
   area-filter ― 「エリア別に表示」見出し＋エリアボタン（AB2 t251 / p0263〜p0272）
   見出し 25px Bold 字間0.1 中央（地図下端1207.15 → 1268.85）／ボタン 158.46×26.31 r13.16 #78a988（御代田・その他 243.52）
   文字 16.84px Bold 白 字間0（南ケ丘・南原のみ 水平比率83.4%）／横間隔 45.4・行間隔 22.05・中央揃え
   「すべて」ボタンはカンプに無い追加（絞り込み解除の手段。確認事項参照）
   ============================================================================= */
.area-filter {
  margin-block-start: 2.5rem;
}
@media screen and (min-width: 768px) {
  .area-filter {
    margin-block-start: 3.85625rem;
  }
}

.area-filter__title {
  position: relative;
  inset-block-start: -0.165em;
  padding-inline-start: 0.1em; /* text-align center の末尾字間打ち消し（推奨⑤） */
  font-size: var(--fs-sp-h2-min); /* SP 22（第6弾: h2 22〜28。旧 20）。PC はカンプ 25 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .area-filter__title {
    font-size: 1.5625rem;
  }
}

.area-filter__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-block-start: 1rem;
}
@media screen and (min-width: 768px) {
  .area-filter__list {
    gap: 1.378125rem 2.8375rem;
    inline-size: min(100%, 68.75rem); /* カンプの 5個＋4個 の折返しを再現（6個目が入らない幅） */
    margin-block-start: 1.46875rem;
    margin-inline: auto;
  }
}

.area-filter__item {
  display: flex; /* li の行ボックス（line-height 2）でボタンが下がらないように */
}

/* 絞り込み解除（カンプに無い追加要素。絞り込み中だけ表示し、既定の見た目はカンプと同一に保つ） */
.area-filter__reset {
  display: flex;
  justify-content: center;
  margin-block-start: 1.378125rem;
}
.area-filter__reset[hidden] {
  display: none;
}

.area-filter__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 9.90375rem;
  block-size: 1.644375rem;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0; /* 幅固定。文字は 117.9（南ケ丘・南原は 83.4% に縮めて 126.4） */
  color: var(--color-text-inverse);
  background-color: var(--color-area);
  font-family: inherit;
  font-size: var(--fs-sp-button); /* SP 16（第6弾）。PC はカンプ 16.84 */
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-base);
}
@media screen and (min-width: 768px) {
  .area-filter__button {
    font-size: 1.0525rem;
  }
}
@media (any-hover: hover) {
  .area-filter__button:hover {
    opacity: 0.8;
  }
}
.area-filter__button[aria-pressed=true] {
  background-color: var(--color-brand);
}

.area-filter__button.area-filter__button--wide {
  inline-size: 15.22rem;
}

.area-filter__reset .area-filter__button {
  inline-size: auto;
  padding-inline: 1.5rem;
}

.area-filter__button-text--condensed {
  display: inline-block;
  transform: scaleX(0.834);
}

/* =============================================================================
   property-list ― 物件カードのグリッド（一覧ページ 4列×N行／特集ページ 4列×1行）
   AB2: 列 x162.8/567.5/972.2/1376.9（間28.9）・行ピッチ 563.6（カード537.3＋26.3）
   一覧ページのカードは TOP の rent/buy と同じ 537.3（ボタン上余白 26）。絞り込みで非表示の item は hidden 属性
   ============================================================================= */
.property-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  .property-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.64375rem 1.80625rem;
    inline-size: min(100%, 99.36875rem); /* x162.8〜1752.7（TOP と同じ） */
    margin-inline-start: 0.175rem;
  }
}

.property-list__item[hidden] {
  display: none;
}

/* 絞り込みで0件のとき（area-filter.js が hidden を外す）。体裁は .news-archive__empty と同じ */
.property-list__empty {
  padding-block: 2.5rem;
  text-align: center;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-medium);
}
.property-list__empty[hidden] {
  display: none;
}

/* 一覧ページ: 前のセクション（エリアボタン下端1397.04）→ カード上端1468.9 */
.property-list.property-list--catalog {
  margin-block-start: 3rem;
}
@media screen and (min-width: 768px) {
  .property-list.property-list--catalog {
    margin-block-start: 4.49375rem;
  }
}

.property-list.property-list--catalog .property-card__button {
  margin-block-start: 1.625rem; /* カード高さ 537.3（TOP の rent/buy と同じ） */
}

/* 特集ページ: 見出し行ボックス下端 → カード上端 22.7。列は x158.1（賃貸・別荘。土地は162.8 → 多数決で 158.1 に統一） */
.property-list.property-list--feature {
  margin-block-start: 1.41875rem;
}
@media screen and (min-width: 768px) {
  .property-list.property-list--feature {
    margin-inline-start: -0.11875rem;
  }
}

/* 一覧セクション全体（カード＋ページ送り）。ページ送り下端(3236.4) → CONTACT帯(3323.1) */
.catalog {
  padding-block-end: 4rem;
}
@media screen and (min-width: 768px) {
  .catalog {
    padding-block-end: 5.41875rem;
  }
}

/* =============================================================================
   pager ― 一覧のページ送り（AB2 p0256/p0258: 211.2×45.6 白地 1px #215662 r6.2 ／ 文字 17.68px Medium 字間0.1 #215662 ／ 矢印 28.1×11.2）
   前に戻る: 矢印 x754.9（ボタン左端+29.2）→ 文字 x792.9 ／ 次を見る: 文字 x1041.2 → 矢印 x1141.9（右端−25.3）。2個の間 46.2・中央揃え
   JS が絞り込み後の件数から有効/無効を切り替える（disabled）。カンプ通りの見た目を保ちつつ、無効時は薄く
   ============================================================================= */
.pager {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-block-start: 2.5rem;
}
@media screen and (min-width: 768px) {
  .pager {
    gap: 2.8875rem;
    margin-block-start: 3.5875rem; /* 3行目カード下端(3133.4) → ボタン上端(3190.8) */
  }
}

.pager__button {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  inline-size: 13.2rem;
  block-size: 2.85rem;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-button);
  padding: 0;
  color: var(--color-brand);
  background-color: var(--color-bg);
  font-family: inherit;
  font-size: var(--fs-sp-button); /* SP 16（第6弾）。PC はカンプ 17.68 */
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-base);
}
@media screen and (min-width: 768px) {
  .pager__button {
    font-size: 1.105rem;
  }
}
@media (any-hover: hover) {
  .pager__button:hover:not(:disabled):not(.pager__button--disabled) {
    color: var(--color-text-inverse);
    background-color: var(--color-brand);
  }
}
.pager__button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* MT のページ送り（<a>／無い側は <span>）と記事の前後ナビ用: button:disabled と同じ見た目（06_お知らせ設計 §4-1・§4-2。2026-09-22） */
.pager__button.pager__button--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.pager__button.pager__button--prev {
  justify-content: flex-start;
  padding-inline-start: 1.75625rem;
}

.pager__button.pager__button--next {
  justify-content: flex-end;
  gap: 0.975rem;
  padding-inline-end: 1.58125rem;
}

.pager__icon {
  position: relative;
  inset-block-start: -0.1625rem; /* カンプの矢印中心はボタン中心より 2.6 上 */
  inline-size: 1.75875rem;
  flex-shrink: 0;
  transition: var(--transition-base);
}

@media (any-hover: hover) {
  .pager__button:hover:not(:disabled):not(.pager__button--disabled) .pager__icon {
    filter: brightness(0) invert(1);
  }
}
/* =============================================================================
   feature-hero ― 特集ページ（AB1）の見出しエリア。デザイン6（2026-09-25）で全面作り直し
   D5: 背景 #dbede8 全面（1918.75×657.28）＋ 右に写真（1039.04×657.28）＋ 左にテキスト5点（赤サブ／見出し53／ティール帯／本文）
   D6: **背景の色面を廃止（白地）**・**写真をほぼ全幅（1918.28×638.18・右が白へフェード）**・
       **テキスト4点を右側（x1024〜1030）に移動**し、TOP の EDUCATION バナーと同じ3行構成にそろえた
   先方指示: 渋谷氏 p2「この部分デザイン変更になっています。写真は前回までTOPページにあった写真です」／
             小林氏 p1「TOPの子供だけの写真に差替え」「グリーンではなく別の色で」

   カンプ AB1 実測（ai_export_6。セクション上端 76.23・下端＝写真下端 714.41 ＝ 高さ 638.18）:
     写真   … img_002（インターナショナルスクールイメージ1.psd＝D5 で TOP の EDUCATION バナー左にあった教室写真）
              枠 x1.68 y76.23 1918.28×638.18・右が白へフェード
     EDUCATION … Outfit Black 63.6534px #215662・字間0（bounds x1027.44 y222.65）
     見出し … Zen Kaku Black 34.5885px #000・字間0（bounds x1026.65 y299.44）
     サブ   … Zen Kaku Bold 22.4357px #000・字間0.05em（bounds x1024.04 y347.73・行送り32.38）
     本文   … 18px Medium・字間0.05em・行送り35・6行（bounds x1030.51 y435.48。D5 から x +872.23 / y −13.27。**サイズ・行送り・幅は不変**）
   ============================================================================= */
.feature-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg); /* デザイン6: #dbede8 の色面を廃止 */
}

.feature-hero__image {
  inline-size: 100%;
  aspect-ratio: 16/9; /* SP は全幅 3:1 だと帯が細すぎるため 16:9 に切って子どもが写る左側を見せる */
  object-fit: cover;
  object-position: left center;
}
@media screen and (min-width: 768px) {
  .feature-hero__image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    object-position: center;
  }
}

.feature-hero__inner {
  position: relative;
  padding-block: 2rem 2.5rem;
}
@media screen and (min-width: 768px) {
  .feature-hero__inner {
    /* 上: EDUCATION の CSS 行ボックス上端（bounds 222.65 + 0.544em − lh/2）− セクション上端 76.23
       下: 本文の行ボックス下端 638.96 → 写真下端 714.41（＝セクション高さ 638.18 に一致） */
    padding-block: 9.32625rem 2.528125rem; /* 1005 確定デザイン: 本文4行目が「エイブル」→「エイブルネットワーク佐久店」で長くなり、
   使える幅 729.49 に収まらないため4行目を「スタッフが、」の後で改行（6 → 7 行）。
   増えた 1 行（35）を下余白から引いてセクションの高さ 638.18 を保つ（カンプは文字枠を 860.9 に広げて 1 行に収めている） */
  }
}

.feature-hero__en {
  position: relative;
  inset-block-start: -0.077em;
  display: block;
  color: var(--color-brand);
  font-family: var(--font-en);
  font-size: 2.375rem; /* SP: PC 63.65 の約 2/3 */
  font-weight: var(--fw-black);
  letter-spacing: 0;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .feature-hero__en {
    margin-inline-start: 54.215rem; /* bounds x1027.44 − inner 左端 160 */
    font-size: 3.9783375rem;
  }
}

.feature-hero__title {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.625rem;
  font-size: 1.375rem;
  font-weight: var(--fw-black);
  letter-spacing: 0;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .feature-hero__title {
    margin-block-start: 0.6675rem; /* EDUCATION の行ボックス下端 289.10 → 見出しの行ボックス上端 299.79 */
    margin-inline-start: 54.165625rem; /* bounds x1026.65 − 160 */
    font-size: 2.16178125rem;
    line-height: 2.594375rem; /* 1.2。カンプの行送り 58.27 は 1 行見出しの箱を無駄に高くするため採らず、位置は margin で合わせる */
    white-space: nowrap;
  }
}

.feature-hero__sub {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.375rem;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .feature-hero__sub {
    margin-block-start: 0.245625rem; /* 見出しの行ボックス下端 341.30 → サブの行ボックス上端 345.23 */
    margin-inline-start: 54.0025rem; /* bounds x1024.04 − 160 */
    font-size: 1.40223125rem;
    line-height: 2.02375rem;
    white-space: nowrap;
  }
}

.feature-hero__text {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 1.5rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0; /* SP は 0（第6弾: 句点ごとの改行にした結果、字間 0.05em だと 375／390 で 2〜3 文字の行が出る）。PC はカンプ 0.05em */
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .feature-hero__text {
    margin-block-start: 3.209375rem; /* サブの行ボックス下端 377.61 → 本文の行ボックス上端 428.96 */
    margin-inline-start: 54.406875rem; /* bounds x1030.51 − 160 */
    /* ⚠️ カンプ値から外した2点（デザイン6・確認事項に記録）: font-size 18 → 17.5 ／ letter-spacing 0.05em → 0。
       理由: D6 で本文が inner の右半分（使える幅 729.49 ＝ カンプの右端 1740.70 まで）に移ったが、
       ブラウザの Zen Kaku（Google Fonts 版）はカンプより字幅が約9%広く、カンプ値（18px・0.05em）では
       最長の4行目が 774.9px になり 6 行の改行位置が崩れて 9 行に折り返す（＝ヒーローが +105px 高くなり以降が全部ずれる）。
       字間 0・17.5px で 717.5px となり、カンプどおりの 6 行・左位置・行送りを保てる。#48／#78／#79〜92 と同種の逸脱 */
    font-size: 1.09375rem;
    letter-spacing: 0;
    line-height: 2.1875rem;
  }
}

/* =============================================================================
   feature-section ― 特集ページの物件セクション×3（賃貸／別荘・セカンドハウス／土地）。見出し（heading--feature）＋カード4枚
   上余白（前ブロック下端→赤リード上端）: rent 86.3（hero 733.5→819.85）／buy 51.5（背景上端1687.7→1739.25）／land 92.2（2576.2→2668.45）
   下余白: rent 101（カード下端→次の背景上端1687.7。カードは統一で 612.2 のため）／buy 60.9／land 27.1（→写真帯 3470.5）
   buy の背景 #f2f6f5（スポット #578a83 tint 8%）
   ============================================================================= */
.feature-section {
  padding-block: 3.5rem 3.5rem;
}

@media screen and (min-width: 768px) {
  .feature-section.feature-section--rent {
    padding-block: 6.590625rem 6.3125rem; /* デザイン6: FV の高さが 657.28 → 638.18（−19.10）になったぶん上余白を増やし、赤リード上端 819.59 を保つ */
  }
}

.feature-section.feature-section--buy {
  background-color: var(--color-buy-tint);
}
@media screen and (min-width: 768px) {
  .feature-section.feature-section--buy {
    padding-block: 3.21875rem 3.80625rem;
  }
}

@media screen and (min-width: 768px) {
  .feature-section.feature-section--land {
    padding-block: 5.765625rem 1.63125rem; /* 27.1 → 26.1: 写真帯・CONTACT 帯・フッターが OL より +1.0〜1.3 下だったぶん（2026-09-22） */
  }
}

/* =============================================================================
   feature-photo ― 特集ページ下部の写真帯（img_046 1930.14×905.84 @ x−0.83 y3470.5。全体50%不透明＋上端の白フェードを焼き込み済み・白地に合成した JPEG）
   CONTACT 帯（y4366.9）が写真下端（4376.3）に 9.4px 重なる → margin-block-end で吸収
   ============================================================================= */
.feature-photo {
  overflow: hidden;
  margin-block-end: -0.5875rem;
}

.feature-photo__image {
  inline-size: 100.528125%;
  max-inline-size: none;
  margin-inline-start: -0.0432291667%;
  aspect-ratio: 3860/1812;
}

/* =============================================================================
   inquiry ― お問い合わせページ（AB3）の本文エリア: 右上のロゴ＋TEL ブロック／見出し／リード／赤注記／フォーム
   ロゴブロック: マーク 96.66×38.09 @ x1240.3 y158.8（ヘッダーの 82.4%）・KARUIZAWA 20.63px @ x1359.9 y163.1・REAL ESTATE 8.75px 行送り9.35・by 10.07px @ y187.7
              TEL 31.73px Bold 字間0.07 #009063 @ x1244.2 y213.6
   見出し「お問い合わせ」40px Bold 字間0.1 #009063 @ x377.5 y287.0 ／ リード 20px Medium 字間0.1 行送り34 @ y374.0 ／ 赤注記 18px #c1272d @ y448.7
   本文カラムは x379.3〜1529.3（1150。inner 左端 160 から 219.3）
   ============================================================================= */
.inquiry {
  padding-block-end: 4rem;
}
@media screen and (min-width: 768px) {
  .inquiry {
    padding-block-end: 7.0875rem; /* ボタン下端(2135.1) → CONTACT帯(2248.5) */
  }
}

.inquiry__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-inline-start: auto;
  padding-block-start: 1.5rem;
}
@media screen and (min-width: 768px) {
  .inquiry__head {
    margin-inline-start: 67.51875rem; /* マーク左端 x1240.3 − inner 左端160（右端基準だとブラウザの字幅差で左にずれるため左端基準） */
    padding-block-start: 5.175rem; /* ヘッダー下端76 → マーク上端158.8 */
  }
}

.inquiry__logo {
  display: flex;
  align-items: flex-start;
  gap: 1.43125rem;
  color: var(--color-text);
  transition: opacity var(--dur-base) var(--ease-out);
  /* hover はヘッダー／フッターのロゴ <a> と同じ opacity 0.7（第4弾 #148 の波及。2026-09-22 第7弾 C 監査で漏れを検出） */
}
@media (any-hover: hover) {
  .inquiry__logo:hover {
    opacity: var(--opacity-hover-logo);
  }
}

.inquiry__mark {
  inline-size: 6.04125rem;
  flex-shrink: 0;
}

/* ロゴ横の表記（デザイン8・2026-10-06）: フォーム面（D5 AB3）には新デザインが無いため、ヘッダーの新表記を
   マークの縮尺（96.66 / 117.3 ＝ 0.824）で縮めて同じ組みにした（当社判断） */
.inquiry__brand {
  display: grid;
  justify-items: start;
  align-self: center;
}

.inquiry__brand-name {
  font-size: 0.91875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.219;
  white-space: nowrap;
}

.inquiry__brand-title {
  margin-block-start: -0.1375rem;
  margin-inline-start: 0.10625rem;
  font-size: 0.7875rem;
  font-weight: var(--fw-medium);
  line-height: 1.219;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.inquiry__brand-accent {
  color: var(--color-brand);
}

.inquiry__tel {
  position: relative;
  inset-block-start: -0.077em;
  inset-block-start: calc(-1 * 0.077em - 0.1875rem); /* OL 実測で系統誤差 0.077em のほかに 3px 残るため上乗せ（CONTACT の TEL と同傾向） */
  margin-block-start: 1.0625rem; /* マーク下端196.9 → TEL 213.9 */
  margin-inline-start: 0.24375rem;
  color: var(--color-brand-logo);
  font-size: 1.983125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  line-height: 1.2;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .inquiry__body {
    inline-size: min(100%, 71.875rem);
    margin-inline-start: 13.70625rem;
  }
}

.inquiry__title {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 2rem;
  color: var(--color-brand-logo);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .inquiry__title {
    margin-block-start: 2.175rem; /* TEL 行ボックス下端(252) → 見出し上端(287.4) */
    margin-inline-start: -0.1125rem; /* x377.5 */
    font-size: 2.5rem;
  }
}

.inquiry__lead {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 1.5rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .inquiry__lead {
    margin-block-start: 2.1125rem;
    font-size: 1.25rem;
    line-height: 2.125rem;
  }
}

.inquiry__note {
  position: relative;
  inset-block-start: -0.165em;
  margin-block-start: 0.73125rem;
  color: var(--color-accent-red);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .inquiry__note {
    font-size: 1.125rem;
  }
}

/* =============================================================================
   form ― お問い合わせフォーム（AB3）静的版。送信は無効（見た目のみ）。本番は MT.net フォーム（iframe）＋ assets/css/mtform.css
   項目ラベル 20px Bold 字間0.1（※必須は #c1272d）。「お問い合わせ内容」「個人情報の取り扱いについて」のみ 19px Medium
   入力欄 550.7×51.1 r7.15 #f2f2f2（右列 581.1×54.8 r7.61 → 統一）・文字 20px Bold 左パディング22.6・placeholder #b3b3b3
   メッセージ 1150×402.8 r10.86 ／ チェックボックス ▢ 24.5px（小塚ゴシック字形）→ 20px の枠（1px #666）で置換
   縦位置: 赤注記下端(470.5) → 内容 524.1 ／ 内容 → 物件名ラベル 804.4 ／ ラベル → 入力欄 8.2（物件名のみ 22.9・カンプ通り） ／ 行ピッチ 118.2（行間 34.9）
   ============================================================================= */
.form {
  --form-field-max: 100%; /* 入力欄の外側の最大幅（右端）。SP（<768）は 1 列欄・姓名 2 列・メッセージ欄すべて本文カラムの 100% に揃える
   （旧 1 列欄 min(100%, 550.7) は 590px 超で右端がメッセージ欄より内側に止まり、幅がまちまちに見えた。2026-09-22 第8弾 #181）。
   PC はカンプどおり 1 列欄 550.7（2 列・メッセージ欄はカラム 1150）。mtform.scss にも同名トークン */
  margin-block-start: 2.5rem;
}
@media screen and (min-width: 768px) {
  .form {
    --form-field-max: 34.41875rem;
    margin-block-start: 3.35rem;
  }
}

.form__field {
  margin-block-start: 1.75rem;
}
@media screen and (min-width: 768px) {
  .form__field {
    margin-block-start: 2.18125rem;
  }
}

.form__field.form__field--first {
  margin-block-start: 0;
}

@media screen and (min-width: 768px) {
  .form__field.form__field--name {
    margin-block-start: 5.4rem; /* 内容の4行目下端 → 物件名ラベル(804.4)。選択肢の行ピッチを OL 実測 54.67 に直したぶん（+9.5）を引く（旧 95.9。2026-09-22） */
  }
}

@media screen and (min-width: 768px) {
  .form__field.form__field--after-name {
    margin-block-start: 2.5875rem; /* 物件名の欄下端(902.6) → お名前ラベル(943.6) */
  }
}

.form__field.form__field--agree {
  display: flex; /* 同意行（inline-flex の label）を行ボックスに乗せない（チェックボックスの baseline 揃えで行高さが 1px 変わり、ボタン位置が動くため。2026-09-22） */
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 768px) {
  .form__field.form__field--agree {
    margin-block-start: 3.4875rem;
  }
}

.form__label {
  position: relative;
  inset-block-start: -0.165em;
  display: block;
  margin-inline-start: -0.25625rem; /* x375.2（入力欄 379.3 より 4.1 左） */
  font-size: var(--fs-sp-body); /* SP 16（第6弾: フォームは本文と同じ 16 に統一。旧 17〜18）。PC はカンプ値 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .form__label {
    font-size: 1.25rem;
  }
}

.form__label.form__label--medium {
  margin-inline-start: 0;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-medium);
}
@media screen and (min-width: 768px) {
  .form__label.form__label--medium {
    font-size: 1.1875rem;
  }
}

.form__required {
  color: var(--color-accent-red);
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 768px) {
  .form__required {
    font-size: 1.25rem;
  }
}

.form__control {
  margin-block-start: 0.5rem;
}
@media screen and (min-width: 768px) {
  .form__control {
    margin-block-start: 0.5125rem;
  }
}

@media screen and (min-width: 768px) {
  .form__control.form__control--loose {
    margin-block-start: 1.43125rem; /* お問い合わせ物件名のみ（カンプ p0186 y851.5。他の行は 8.2） */
  }
}

.form__control.form__control--pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .form__control.form__control--pair {
    grid-template-columns: minmax(0, 550.7fr) minmax(0, 576.6fr);
    gap: 1.41875rem;
  }
}

/* お問い合わせ内容: ラベル列（x379.4）と選択肢列（x591.0）の2カラム。選択肢は4行・ピッチ51.5・ラベルは選択肢1行目より 4.2 下 */
@media screen and (min-width: 768px) {
  .form__field.form__field--choice {
    display: grid;
    grid-template-columns: 13.225rem minmax(0, 1fr);
    align-items: start;
  }
}

/* 売りたい方用フォーム（/sell/）: ラベル「売却をご検討の物件種別」（11 文字 ≈ 230px）が 211.6 の列に入らないため、ラベル列を内容幅＋余白にする。
   お問い合わせ（8 文字）は 211.6 のまま（2026-09-22 自前設計・確認事項参照） */
@media screen and (min-width: 768px) {
  .form__field.form__field--choice-wide {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2rem;
  }
}

@media screen and (min-width: 768px) {
  .form__field.form__field--choice .form__label {
    padding-block-start: 0.2625rem;
  }
}

.form__field.form__field--choice .form__control {
  margin-block-start: 0.75rem;
}
@media screen and (min-width: 768px) {
  .form__field.form__field--choice .form__control {
    margin-block-start: 0;
  }
}

.form__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .form__options {
    gap: 1.548125rem; /* OL 実測の行ピッチ 54.67 − 29.9（text.json の 51.5 は代替フォントの自動行送り。OL では 4行目が 9.7px 下。2026-09-22） */
  }
}

.form__option {
  position: relative;
  inset-block-start: -0.1875rem; /* OL 字面実測で文字が 3px 下（チェックボックスごと上げる）。2026-09-21 推奨④ */
  inset-inline-start: 0.0625rem; /* OL 実測: チェックボックス左端 x592（実装 591）。2026-09-22 */
  display: inline-flex;
  align-items: center;
  gap: 0.8125rem; /* OL 実測: 箱右端 614 → 文字字面 629（側bearing 2 を引いて 13）。2026-09-22 */
  min-block-size: 1.86875rem;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1.2;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .form__option {
    font-size: 1.254375rem;
  }
}

/* チェックボックス: カンプは ▢（小塚ゴシックの字形）だけで「チェック済み」の描写は無い（text.json t173/t175・注釈レイヤー t000 も別件）。
   チェック時は箱を塗りつぶさず、キーカラー #215662 の線のチェックマークを箱の中に描く（2026-09-22 第7弾）。
   マークは ::after の「枠線 2 辺＋rotate(45deg)」の純 CSS で描く（2026-09-24 に data: URI の SVG マスクから変更）。
   ★理由: CSP の img-src に data: が含まれない環境（MT.net フォーム form.movabletype.net は img-src *）では
     data: URI が画像として拒否され mask が空になり、チェックが一切表示されない（監査 2026-09-24 ①-2・確認事項 #201）。
     静的側も将来サイトに CSP を入れると同じ症状になるため、フォーム内のアイコンは data: URI を使わない。
     値は MT.net 本番で実測 OK の mt_repo/forms/mtform_applied.css と同一。
   input 自体は残す（Space で切替・:focus-visible は base/_reset の共通リング）。mtform.scss にも同じ見た目を持たせている（変える時は両方） */
.form__checkbox {
  position: relative;
  appearance: none;
  inline-size: 1.375rem; /* OL 画素実測 22×22（AI の ▢ 24.5px 字形の字面）。2026-09-22 20 → 22 */
  block-size: 1.375rem;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--color-text);
  border-radius: 2px;
  background-color: var(--color-bg);
  cursor: pointer;
}
.form__checkbox::after {
  content: "";
  position: absolute;
  inset: -0.1875rem 0 0 0; /* margin:auto と併せて箱の中央から 1.5px 上（レ点の重心を字面に合わせる） */
  margin: auto;
  inline-size: 0.5rem; /* 回転前の縦長矩形。rotate(45deg) で 8×13 の 2 辺がレ点になる */
  block-size: 0.8125rem;
  border: solid var(--color-brand);
  border-width: 0 2.2px 2.2px 0; /* 線の太さは旧 SVG の stroke-width と同値。1px 未満の描画差を避けるため生px */
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0;
}
.form__checkbox:checked::after {
  opacity: 1;
}

/* ラジオ（ご希望連絡方法・2026-09-28 追加。カンプに無い＝当方設計。確認事項 #266）
   チェックボックスと同じ 22×22・枠 1px・純 CSS のマーク（data: URI は CSP で弾かれる＝#201 の教訓）。
   ラジオの慣例どおり丸枠＋中央のキーカラーの丸。mtform.scss にも同じ見た目を持たせている（変える時は両方） */
.form__radio {
  position: relative;
  appearance: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  background-color: var(--color-bg);
  cursor: pointer;
}
.form__radio::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-brand);
  opacity: 0;
}
.form__radio:checked::after {
  opacity: 1;
}

.form__input,
.form__select,
.form__textarea {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--form-field-max); /* SP 100%／PC 550.7（.form のトークン） */
  block-size: 3.19375rem;
  border: 0;
  border-radius: var(--radius-field);
  padding-inline: 1.4125rem;
  color: var(--color-text);
  background-color: var(--color-field-bg);
  font-family: inherit;
  font-size: var(--fs-sp-body); /* 16 以上＝iOS Safari のフォーカス時自動ズームも防ぐ */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .form__input,
  .form__select,
  .form__textarea {
    font-size: 1.25rem;
  }
}
.form__input::placeholder,
.form__select::placeholder,
.form__textarea::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.form__control.form__control--pair .form__input {
  max-inline-size: none; /* 2 列欄はグリッド列（550.7fr／576.6fr）いっぱい */
}

/* ドロップダウン（ご職業・見学のご希望時間・2026-09-28 追加。カンプに無い＝当方設計。確認事項 #265・#296）
   ブラウザ既定の枠・背景・矢印を appearance: none で消し、上の .form__input と同じ箱にする。
   矢印は「機能的な UI 記号」なので純 CSS の三角（45deg / 135deg の 2 枚の背景グラデで ▼ を描く）。
   画像も data: URI も使わない（#201 の教訓。MT.net 側 .form-column-select select も同じ方式・値） */
.form__select {
  appearance: none;
  padding-inline-end: 3.25rem; /* 矢印（右 22.6 から 14 幅）に文字が重ならない逃げ */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-brand) 50%), linear-gradient(135deg, var(--color-brand) 50%, transparent 50%);
  background-position: right 1.85rem center, right 1.4125rem center;
  background-size: 0.4375rem 0.4375rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* 未選択（先頭の空 option）のときだけプレースホルダ色。選ぶと本文色に戻る */
.form__select:has(option[value=""]:checked) {
  color: var(--color-placeholder);
}

/* カレンダー（見学のご希望日）。2026-09-28 追加・当方設計（確認事項 #264）
   既定の枠と内側の余白を消して .form__input と同じ箱にする。ピッカーを開くアイコンはブラウザ描画の
   機能的 UI なので残し、右端 22.6 の内側に置く（これも画像ファイルではない）
   ※ `.form__input--time`（input[type=time]）は 2026-09-28 に <select>（.form__select）へ置き換えたため
     現在は未使用。時刻入力UIに戻す場合のために残置（確認事項 #296） */
.form__input--date,
.form__input--time {
  position: relative;
  appearance: none;
  cursor: pointer;
  padding-inline-end: 3.25rem;
  /* 2026-09-28 社長指摘（確認事項 #307）: カレンダーアイコンを押さないとピッカーが開かないので、
     ピッカーのアイコンを透明にして箱全面に広げ、どこを押しても開くようにする。
     アイコンが見えなくなるぶんの目印として、.form__select と同じブランド色の三角を右端に置く
     （純CSSのグラデ＝CSP環境で data: URI が使えない #201 の制約に適合）。
     キーボード入力（Tabで移動して数字を打つ）は従来どおり可能 */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-brand) 50%), linear-gradient(135deg, var(--color-brand) 50%, transparent 50%);
  background-position: right 1.85rem center, right 1.4125rem center;
  background-size: 0.4375rem 0.4375rem;
  background-repeat: no-repeat;
}
.form__input--date::-webkit-calendar-picker-indicator,
.form__input--time::-webkit-calendar-picker-indicator {
  /* ⚠ この擬似要素には論理プロパティ（inset／inline-size／block-size）が効かない。
     物理プロパティで書かないとクリックが年月日セグメントに入ってピッカーが開かない（実機で確認） */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.form__input--date::-webkit-date-and-time-value,
.form__input--time::-webkit-date-and-time-value {
  text-align: start; /* Safari は既定が中央寄せ */
}
.form__input--date::-webkit-datetime-edit,
.form__input--time::-webkit-datetime-edit {
  padding: 0;
}

.form__textarea {
  max-inline-size: none; /* メッセージ欄はカラム 1150 いっぱい */
  block-size: 15rem;
  border-radius: var(--radius-textarea);
  padding-block: 1rem;
  resize: none; /* 旧 resize: vertical（ブラウザ既定は both）。none 以外はブラウザが右下にリサイズグリップ（斜線 2〜3 本）を描く＝社長指摘の「斜線」の正体。カンプ p0214 はただの角丸矩形（2026-09-22 第7弾） */
}
@media screen and (min-width: 768px) {
  .form__textarea {
    block-size: 25.175rem;
  }
}

.form__agree {
  position: relative;
  inset-block-start: -0.1875rem; /* .form__option と同じ実測補正（推奨④） */
  display: inline-flex;
  align-items: center;
  gap: 0.8125rem; /* .form__option と同じ（2026-09-22） */
  min-block-size: 1.86875rem;
  margin-block-start: 1rem;
  margin-inline-start: 0.0125rem; /* OL 実測: チェックボックス左端 x380（旧 −0.8 は AI bounds 378.5 由来。2026-09-22） */
  font-size: var(--fs-sp-agree); /* SP 15（第8弾 #182: 「個人情報の取り扱いについて同意します」18 文字を 375px で 1 行に。
   文字域 = inner 320 − 箱 22 − gap 13 = 285。16px は字間 0 でも 288 で入らず、15px×(1+0.02)×18 = 275.4 で収まる。
   実機 375（inner 335・文字域 300）は 16px/字間 0 でも入るが headless（320）で判定する規則に合わせて 15）。PC はカンプ 20.07 */
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em; /* SP 0.02em（同上の幅計算）。PC はカンプ 0.1em */
  line-height: 1.5; /* SP は万一折り返しても行間が詰まらない値（1 行なら min-block-size 29.9 に収まり高さ不変）。PC はカンプの 1.2 */
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .form__agree {
    margin-block-start: 1.9875rem;
    font-size: 1.254375rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
  }
}

.form__link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: var(--transition-base);
}
@media (any-hover: hover) {
  .form__link:hover {
    opacity: 0.8;
  }
}

.form__submit {
  margin-block-start: 2.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .form__submit {
    margin-block-start: 4.48125rem; /* 同意行（flex item・29.9）下端 → ボタン上端 2064.4（カンプ 72.1 − 0.4。旧 67.7 は inline-flex の行ボックス 4.4 を差し引いた値。2026-09-22） */
    padding-inline-start: 0.7125rem; /* 本文カラム（x379.3〜1529.3）の中心 954.3 → ページ中心 960 に合わせる */
  }
}

.form__button {
  font-family: inherit;
  cursor: pointer;
}

/* =============================================================================
   tag ― お知らせのカテゴリタグ（ピックアップ／お知らせ／イベント／note記事）。
   TOP のお知らせ行 .news-list__category（85.7×21.9・ティール 1px 枠・14px Medium 字間0.1）と同じ見た目を、
   一覧行の外（詳細ページの見出しエリア）でも使えるように独立させた部品（06_お知らせ設計 §4-2。2026-09-22 自前設計）。
   色クラス --info／--event／--pickup／--note は TOP の行と同じく MT のカテゴリ判定フック（現状は 4 種とも同色）
   ============================================================================= */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 5.35625rem;
  block-size: 1.36875rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

/* =============================================================================
   news-tabs ― お知らせ一覧のカテゴリタブ（すべて／ピックアップ／お知らせ／イベント／note記事）。
   JS ではなく MT のカテゴリアーカイブへの <a> の列（06_お知らせ設計 §4-1）。現在ページは aria-current="page" で塗り。
   形は一覧ページの「エリア別に表示」ピル（.area-filter__button 158.46×26.31 r13.16・16.84px Bold 字間0）を流用し、
   色はエリア緑ではなくお知らせのカテゴリタグ（.tag）と同じティール 1px 枠＋白地、選択中＝ティール塗り（タグの hover と同じ反転）。
   SP はタップ領域のため高さ 36・内容幅（PC カンプ値は @include mq(md) で上書き）。2026-09-22 自前設計・確認事項参照
   ============================================================================= */
.news-tabs {
  margin-block-start: 2rem;
}
@media screen and (min-width: 768px) {
  .news-tabs {
    margin-block-start: 2.84375rem; /* 一覧ページの見出し → 地図と同じ余白（_area-map.scss） */
  }
}

.news-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .news-tabs__list {
    gap: 1.378125rem 2.8375rem; /* .area-filter__list と同値 */
  }
}

.news-tabs__item {
  display: flex; /* li の行ボックス（line-height 2）でピルが下がらないように（.area-filter__item と同じ） */
}

.news-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 6rem;
  block-size: 2.25rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  color: var(--color-brand);
  background-color: var(--color-bg);
  font-size: 0.875rem; /* SP 14（ボタン 14〜16）。PC はエリアピルと同じ 16.84 */
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: var(--transition-base);
}
@media screen and (min-width: 768px) {
  .news-tabs__link {
    inline-size: 9.90375rem;
    block-size: 1.644375rem;
    padding-inline: 0;
    font-size: 1.0525rem;
  }
}
@media (any-hover: hover) {
  .news-tabs__link:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-brand);
  }
}
.news-tabs__link[aria-current=page] {
  color: var(--color-text-inverse);
  background-color: var(--color-brand);
}

/* =============================================================================
   news-archive ― お知らせ一覧の本体（.news-list--full 10 行＋ .pager）。
   本文カラムはお問い合わせ（AB3）の 1150 を中央に置く（1600 いっぱいの 1 行テキストは読みにくいため。詳細ページの本文幅と同じ）。
   上下余白: タブ → 一覧 40／57.4（ページ送りの余白と同値）、一覧下端 → CONTACT 帯 64／112（TOP のお知らせ .news の下余白と同値）。2026-09-22 自前設計
   ============================================================================= */
.news-archive {
  padding-block: 2.5rem 4rem;
}
@media screen and (min-width: 768px) {
  .news-archive {
    padding-block: 3.5875rem 7rem;
  }
}

.news-archive__body {
  max-inline-size: 71.875rem;
  margin-inline: auto;
}

/* MT の 0 件表示（<mt:If tag="EntriesCount" …><mt:Else><p class="news-archive__empty">…）。静的 HTML には出ない */
.news-archive__empty {
  padding-block: 2.5rem;
  text-align: center;
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-medium);
}

/* =============================================================================
   article ― お知らせ詳細（記事アーカイブ）。見出しエリア（タグ＋日付／h1／罫線）→ アイキャッチ（任意）→ 本文 .entry-body →
   note記事の「noteで読む」→ 前後の記事ナビ（.pager 流用＋中央「お知らせ一覧へ戻る」）。06_お知らせ設計 §4-2。2026-09-22 自前設計
   本文カラム: AB3 の 1150 を中央に（.inquiry__body は x379.3 起点だが、ロゴ＋TEL を出さないので中央揃え。ページ中心との差 6px）
   上余白は一覧見出し（list-hero）と同じ 47.4、下余白はお問い合わせと同じ 113.4
   ============================================================================= */
.article {
  padding-block: 2.5rem 4rem;
}
@media screen and (min-width: 768px) {
  .article {
    padding-block: 2.9625rem 7.0875rem;
  }
}

.article__inner {
  max-inline-size: 71.875rem;
  margin-inline: auto;
}

.article__header {
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--color-border); /* お知らせ行の罫線と同じ */
}
@media screen and (min-width: 768px) {
  .article__header {
    padding-block-end: 1.75rem;
  }
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.article__date {
  font-size: 1rem; /* .news-list__date と同値 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
}

.article__title {
  margin-block-start: 1rem;
  font-size: var(--fs-sp-article-title); /* SP 26（h1 26〜32 の下限側）。PC 32 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .article__title {
    margin-block-start: 1.25rem;
    font-size: 2rem;
  }
}

/* アイキャッチ（カスタムフィールド thumbnail が登録されているときだけ出す）。物件カードの写真と同じく角丸・影なし・cover */
.article__eyecatch {
  margin-block-start: 2rem;
}
@media screen and (min-width: 768px) {
  .article__eyecatch {
    margin-block-start: 2.5rem;
  }
}

.article__image {
  inline-size: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.article__body {
  margin-block-start: 2rem;
}
@media screen and (min-width: 768px) {
  .article__body {
    margin-block-start: 3rem;
  }
}

/* note記事: 「noteで読む」（.button--fill 215.2×46.5・新規タブ）。本文が空でも成立させるため本文の外に置く */
.article__external {
  margin-block-start: 2.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .article__external {
    margin-block-start: 3.5rem;
  }
}

/* 前後の記事＋一覧へ戻る: .pager（211.2×45.6）の <a> 版を左右に、中央に .button--news（215.2×46.5）。
   SP は前後を半幅ずつ 1 行に並べ、「一覧へ戻る」をその下に全幅で（order で DOM 順＝前・一覧・次 を保つ） */
.article__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 0.75rem;
  margin-block-start: 3rem;
}
@media screen and (min-width: 768px) {
  .article__nav {
    flex-wrap: nowrap;
    gap: 2.8875rem; /* .pager の PC 間隔 */
    margin-block-start: 4.5rem;
  }
}

.article__nav .pager__button {
  flex: 1 1 0;
  inline-size: auto;
  min-inline-size: 0;
}
@media screen and (min-width: 768px) {
  .article__nav .pager__button {
    flex: 0 0 auto;
    inline-size: 13.2rem;
  }
}

.article__back {
  order: 3;
  flex-basis: 100%;
}
@media screen and (min-width: 768px) {
  .article__back {
    order: 0;
    flex-basis: auto;
  }
}

/* =============================================================================
   entry-body ― お知らせ詳細の本文（<$mt:EntryBody$>＋<$mt:EntryMore$>）。
   MT.net のブロックエディタ（クラス無しの <p><h2><table><hr>、画像 .asset-image＋インライン style、マルチカラム .mt-be-columns）と
   リッチテキスト（<div> 直書き・<br> 連打・<span style>）の両方の出力に効くよう、素の要素に当てる（06_お知らせ設計 §4-2 スタイル仕様表）。
   値は既存トークン準拠: 本文 16/lh2/字間0.1（売却本文・CONTACT 本文と同じ）、罫線 #999、見出しの縦線＝ティール、引用の地＝入力欄の #f2f2f2。
   このブロックだけは要素セレクタ（.entry-body h2 等）を使う＝MT の出力にクラスを付けられないため（規約 §4-3 の例外。理由はここに記す）。
   MT の「エディタCSS」（editor_css.mtml・外部CSS不可）には、コンパイル後の .entry-body ブロックを .entry に読み替えて貼る。2026-09-22 自前設計
   ============================================================================= */
.entry-body {
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .entry-body {
    font-size: 1rem;
  }
}

/* 子要素の余白は「上 0・下 1.5em」で統一。先頭は上 0・末尾は下 0 */
.entry-body > * {
  margin-block: 0 1.5em;
}

.entry-body > :last-child {
  margin-block-end: 0;
}

/* 段落。div はリッチテキストの <div> 直書き対策（既存サイトの実物 HTML）。空の p（TinyMCE）は消す */
.entry-body p,
.entry-body div {
  margin-block: 0 1.5em;
}

.entry-body p:empty {
  display: none;
}

/* 見出し。h1 はリッチテキストで選べてしまうため h2 と同スタイルに落とす（ページの h1 は記事タイトル） */
.entry-body h1,
.entry-body h2 {
  margin-block: 2.5em 1em;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--color-brand); /* サイト内に見出し装飾が無いため、ナビ hover の下線・ラベルと同系の「ティール 1 本線」を新設 */
  font-size: var(--fs-sp-h2-min); /* SP 22。PC 26 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .entry-body h1,
  .entry-body h2 {
    font-size: 1.625rem;
  }
}

.entry-body h3 {
  margin-block: 2em 0.8em;
  padding-block-end: 0.4em;
  border-block-end: 1px solid var(--color-border); /* お知らせ行の罫線と同じ色 */
  font-size: 1.1875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .entry-body h3 {
    font-size: 1.3125rem;
  }
}

.entry-body h4,
.entry-body h5,
.entry-body h6 {
  margin-block: 1.5em 0.6em;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.entry-body :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

.entry-body strong,
.entry-body b {
  font-weight: var(--fw-bold);
}

/* リンク（ボタン化した a を除く）。フォームの「個人情報の取り扱い」リンクと同色 */
.entry-body a:not(.button) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (any-hover: hover) {
  .entry-body a:not(.button):hover {
    opacity: 0.7;
  }
}

/* リスト（base/_reset で list-style が消えているので戻す） */
.entry-body ul,
.entry-body ol {
  padding-inline-start: 1.5em;
}

.entry-body ul {
  list-style: disc;
}

.entry-body ol {
  list-style: decimal;
}

.entry-body li + li {
  margin-block-start: 0.4em;
}

.entry-body li > ul,
.entry-body li > ol {
  margin-block: 0.4em 0;
}

/* 表（物件スペック・価格改定）。罫線は物件カードのスペック dl と同じ 1px #999。th の地は加盟店／フッターの #edeadb
   SP は table を block にして横スクロール可（列数を崩さない）。tbody を table 化して幅 100% を保つ */
.entry-body table {
  display: block;
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .entry-body table {
    display: table;
    overflow-x: visible;
  }
}

.entry-body tbody,
.entry-body thead,
.entry-body tfoot {
  display: table;
  inline-size: 100%;
  border-collapse: collapse;
}
@media screen and (min-width: 768px) {
  .entry-body tbody,
  .entry-body thead,
  .entry-body tfoot {
    display: table-row-group;
  }
}

@media screen and (min-width: 768px) {
  .entry-body thead {
    display: table-header-group;
  }
}

@media screen and (min-width: 768px) {
  .entry-body tfoot {
    display: table-footer-group;
  }
}

.entry-body th,
.entry-body td {
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  text-align: start;
  vertical-align: top;
}

.entry-body th {
  background-color: var(--color-brand-soft);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.entry-body td {
  background-color: var(--color-bg);
}

/* 引用・注意書き */
.entry-body blockquote {
  padding: 1em 1.5em;
  border-inline-start: 4px solid var(--color-border);
  color: var(--color-text-topics);
  background-color: var(--color-field-bg);
}

.entry-body blockquote > :last-child {
  margin-block-end: 0;
}

/* 画像（インライン style="max-width:100%;height:auto;display:block" と矛盾しない値。display:block なので margin で中央） */
.entry-body img,
.entry-body .asset-image {
  max-inline-size: 100%;
  block-size: auto;
  margin-inline: auto;
}

.entry-body figure {
  margin: 0 0 1.5em;
}

.entry-body figcaption {
  margin-block-start: 0.5em;
  color: var(--color-text-topics);
  font-size: var(--fs-sp-caption); /* 12 */
  line-height: 1.6;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .entry-body figcaption {
    font-size: 0.875rem;
  }
}

/* 罫線ブロック */
.entry-body hr {
  margin-block: 2.5em;
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

/* oEmbed（YouTube 等） */
.entry-body iframe {
  max-inline-size: 100%;
}

.entry-body iframe[src*=youtube] {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
}

/* マルチカラム（インライン display:flex はそのまま。SP は縦積み） */
.entry-body .mt-be-columns {
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .entry-body .mt-be-columns {
    flex-direction: row;
    gap: 2rem;
  }
}

.entry-body .mt-be-column {
  flex: 1 1 0;
  min-inline-size: 0;
}

.entry-body .mt-be-column > :last-child {
  margin-block-end: 0;
}

/* ファイルブロック（PDF 配布）: 枠ボタン風。ダウンロードアイコンは既存素材に無いため CSS の「↓」 */
.entry-body .mt-be-file a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-block-size: 2.90625rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-button);
  color: var(--color-brand);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.entry-body .mt-be-file a::before {
  content: "↓";
}
@media (any-hover: hover) {
  .entry-body .mt-be-file a:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-brand);
    opacity: 1;
  }
}

/* HTML ブロック（将来カスタムブロック A「リンクボタン」）: <p class="entry-button"><a class="button button--fill">…</a></p> */
.entry-body .entry-button {
  margin-block: 2em;
  text-align: center;
}

.entry-body .entry-button:last-child {
  margin-block-end: 0;
}

/* 注意書き（テキストブロックのクラス名指定）: ※ は本文側に含める */
.entry-body .entry-note {
  color: var(--color-text-topics);
  font-size: var(--fs-sp-caption); /* 12 */
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .entry-body .entry-note {
    font-size: 0.875rem;
  }
}

/* =============================================================================
   thanks ― フォーム送信完了ページ（/thanks/・お問い合わせ／売却の 2 フォーム共通・noindex）。
   ページ頭はお問い合わせ（AB3）の .inquiry（ロゴ＋TEL・見出し・リード・赤注記）を流用し、導線ボタンだけ本ブロック。
   ボタンは .button--outline（320.1×70.7・枠ティール）×2 を横並び（SP 縦積み）。06_お知らせ設計 §4-4。2026-09-22 自前設計
   ============================================================================= */
.thanks__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-block-start: 2.5rem;
}
@media screen and (min-width: 768px) {
  .thanks__actions {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
    margin-block-start: 4rem;
    padding-inline-start: 0.7125rem; /* 本文カラム（x379.3〜1529.3）の中心 → ページ中心（.form__submit と同じ） */
  }
}

.thanks__button {
  inline-size: 100%;
}
@media screen and (min-width: 768px) {
  .thanks__button {
    inline-size: auto;
  }
}

/* スクリーンリーダー専用テキスト */
.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* PCカンプの改行（<br>）を SP では無効化する（<br class="u-pc-only">）。
   2026-09-22 第6弾の規則: SP の本文系の段落は「句点（。）ごとに改行」。PC カンプの文中改行（句点でない位置の改行）は SP では本クラスで解除し、
   句点の改行は素の <br> で両方に残す。PC に無い改行を SP に足すときは utility/_sp-only.scss（<br class="u-sp-only">）。
   見出し・キャッチ・カードのサブ等（本文でない箇所）は PC の改行を SP でも維持（素の <br>） */
.u-pc-only {
  display: none;
}
@media screen and (min-width: 768px) {
  .u-pc-only {
    display: inline;
  }
}

/* SP（<768）だけの改行 <br class="u-sp-only">（2026-09-22 第6弾）: PC カンプに無い改行を SP の本文に入れる時に使う
   （例: 加盟店リードを社長指定の 4 行にする・特集の学校名を「・」の直後で 1 校 1 行にする）。PC では出さない（display: none の <br> は改行しない） */
.u-sp-only {
  display: inline;
}
@media screen and (min-width: 768px) {
  .u-sp-only {
    display: none;
  }
}

/* 語のかたまりを折り返さない <span class="u-nowrap">（2026-09-22 第8弾）: 「インターナショナル<span>スクール</span>」のように
   幅が足りれば 1 行・足りなければ「スクール」がかたまりで次行へ送られる（「スクー／ル」のような語中折れを防ぐ）。
   span の内側だけ折返しを禁止し、直前の文字との境界は親（white-space: normal）の判定なので通常どおり折り返せる。
   SP 専用 br（u-sp-only）と違い幅に応じて 1 行／2 行が切り替わる。全幅で効く（PC の nowrap 見出しでは無害） */
.u-nowrap {
  white-space: nowrap;
}

/* 電話番号リンク <a class="u-tel" href="tel:…">（2026-10-08 社長指示）: SP（<768）だけタップで発信。
   PC/TB（768 以上）はリンクとして働かせない（クリックしても何も起きない・カーソルも通常）。UA 判定はしない。
   見た目は変えない（色・下線は reset の a{color:inherit; text-decoration:none} のまま）。hover は付けない（社長判断） */
@media screen and (min-width: 768px) {
  .u-tel {
    pointer-events: none;
    cursor: default;
  }
}