@charset "UTF-8";
/* =============================================================================
   中野ハウジング — トップページ スタイルシート
   -----------------------------------------------------------------------------
   構成:
     1. デザイントークン（CSS カスタムプロパティ）
     2. リセット / ベース
     3. 汎用レイアウト（コンテナ・セクション）
     4. 再利用コンポーネント（ボタン・見出しラベル・マーク）
     5. ヘッダー
     6. 各セクション（hero / concept / about / event / works+news / cta）
     7. フッター
     8. レスポンシブ（タブレット・モバイル）

   命名は BEM（block__element--modifier）で統一。
   色・フォント・余白などはすべて §1 のトークンで一元管理しています。
   ========================================================================== */

/* =============================================================================
   1. デザイントークン
   ========================================================================== */
:root {
  /* --- カラー --------------------------------------------------------------- */
  --color-primary: #e54848;          /* ブランドレッド */
  --color-primary-dark: #d23a3a;     /* hover 用 */
  --color-primary-light: #eb7676;
  --color-cream: #f1ecda;            /* ABOUT 背景のベージュ */
  --color-cream-light: #f5f2e6;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f1f1;    /* WORKS / NEWS・スペック面（Dev Mode #f1f1f1） */
  --color-gray: #b3b2b2;             /* 補助グレー（Dev Mode） */
  --color-text: #3e3a39;             /* 基本テキスト */
  --color-text-muted: #6e6a68;       /* 補足テキスト */
  --color-text-invert: #ffffff;
  --color-border: #e2e0dc;
  --color-border-dashed: #cfcdc8;

  /* --- タイポグラフィ ------------------------------------------------------- */
  --font-base: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  /* 英字ラベル＝Inter（Figma Dev Mode 準拠）。大きなページ見出しのみ Inria Sans */
  --font-en: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Inria Sans", "Inter", sans-serif;

  --fs-2xs: 0.75rem;   /* 12px */
  --fs-xs: 0.8125rem;  /* 13px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 2.75rem;   /* 44px */

  --lh-tight: 1.4;
  --lh-base: 1.8;      /* 和文本文 */
  --lh-loose: 2;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* --- 余白スケール（8px ベース） ------------------------------------------ */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* --- レイアウト ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 1.25rem;
  --header-height: 85px;

  /* --- 装飾 ----------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 30px rgba(62, 58, 57, 0.08);
  --shadow-soft: 0 6px 18px rgba(62, 58, 57, 0.06);
  --transition: 0.25s ease;
}

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

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

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 画像プレースホルダ（実写真は後で差し替え）。
   data-label 属性のテキストを中央に表示します。 */
.placeholder {
  position: relative;
  background: repeating-linear-gradient(
      45deg,
      #e9e7e2,
      #e9e7e2 12px,
      #e2e0da 12px,
      #e2e0da 24px
    );
  color: var(--color-text-muted);
  overflow: hidden;
}
.placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0.5em;
}

/* =============================================================================
   3. 汎用レイアウト
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-2xl);
}

.section--cream { background-color: var(--color-cream); }
.section--muted { background-color: var(--color-surface-muted); }
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* アンカー遷移時に固定ヘッダーへ隠れないようにする */
[id] { scroll-margin-top: calc(var(--header-height) + 1rem); }

/* --- 角丸パネル型セクション（about / event / works+news） -------------------
   白いページ背景の上に、最大 1200px・四辺 border-radius 30px のパネルを置く。 */
.panel-section {
  padding-inline: var(--container-pad);
  margin-block: var(--space-xl);
}
/* WORKS/NEWS パネルと CTA の間に追加の余白（+40px） */
#works.panel-section { margin-bottom: calc(var(--space-xl) + 40px); }
/* spec 上部スライダーを画面全幅で表示 */
.photo-strip-full { width: 100%; overflow: hidden; }
.panel {
  max-width: var(--container-max);
  margin-inline: auto;
  border-radius: 30px;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
/* クリーム面は斜めストライプのクリームテクスチャ（Figma の地紋を CSS で再現）。
   ※ Figma 書き出しのテクスチャ画像があれば background-image に差し替え可 */
.panel--cream {
  background:
    repeating-linear-gradient(
      45deg,
      #f1ecda,
      #f1ecda 12px,
      #e8e1c8 12px,
      #e8e1c8 24px
    );
}
.panel--primary {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}
.panel--muted { background-color: var(--color-surface-muted); }

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   4. 再利用コンポーネント
   ========================================================================== */

/* --- セクション見出しラベル（英字 + 赤い小バー） ------------------------- */
.heading-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}
.heading-label__bars {
  display: flex;
  gap: 4px;
}
.heading-label__bars span {
  width: 14px;
  height: 3px;
  /* バーはラベル文字と同色（ABOUT=濃グレー / EVENT invert=白）*/
  background-color: currentColor;
  border-radius: var(--radius-pill);
}
.heading-label__en {
  font-family: var(--font-en);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1;
}

/* --- ボタン --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  max-width: 400px;
  min-width: 177px;
  padding: 0.9em 2em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}
.btn:hover { background: var(--color-text); color: #fff; }

/* 赤背景上の白縁ボタン */
.btn--ghost-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
}
.btn--ghost-light:hover { background: #fff; color: var(--color-primary); }

/* 白背景の塗りボタン（赤背景セクションの CTA） */
.btn--solid-light {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}
.btn--solid-light:hover {
  background: var(--color-primary-dark);
  color: #fff;
  border-color: #fff;
}

/* 赤い塗りボタン */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--sm { min-width: 0; padding: 0.55em 1.6em; font-size: var(--fs-xs); }
.btn--lg { padding: 0.7em 2.4em; font-size: var(--fs-lg); border-width: 2px; }

/* --- 4 分割マーク（ブランドの正方形マーク） ------------------------------ */
.brand-mark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 46px;
  aspect-ratio: 1;
}
.brand-mark span {
  background-color: var(--color-primary);
  border-radius: 3px;
}
.brand-mark--light span { background-color: #fff; }

/* --- 円形 SNS アイコンボタン --------------------------------------------- */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  flex: none;
}
.social-btn:hover { background-color: var(--color-primary-dark); }
.social-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* =============================================================================
   5. ヘッダー
   ========================================================================== */
/* ヘッダー本体は透明。白い角丸パネル（nav＋アイコン）とロゴを別々に配置する。
   ・パネル … 右寄せ・最大 851px・bottom-left のみ角丸・ドロップシャドウ
   ・ロゴ  … パネルに含まず左上に独立配置（パネルより背が高くせり出す） */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--header-height);
  /* ロゴ＝画面左端 / パネル＝画面右端（一番上・全幅） */
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* --- 左端の独立ロゴ（パネルより背が高くせり出す） --- */
.site-header__logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.site-header__logo-full { display: block; width: 126px; }
/* モバイル用ロゴ（ふくろう＋ワードマーク横組み）はデフォルト非表示 */
.site-header__logo-mobile { display: none; }

/* --- nav＋アイコンをまとめた白パネル --- */
.site-header__panel {
  margin-left: auto;
  width: 851px;   /* Top〜Blog(8項目) ＋ アイコン4個 */
  max-width: calc(100% - 110px); /* ロゴ分の余白を確保 */
  min-height: 85px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-md) 0 var(--space-lg);
  background: #fff;
  border-radius: 0 0 0 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
}
.site-nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
/* ホバー：テキストの5px下に #E54848 の下線が中央から両端へ伸びる */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transform: translateX(-50%);
  transition: width var(--transition);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  width: 100%;
}

.site-header__social {
  display: flex;
  gap: var(--space-xs);
  flex: none;
  margin-left: auto;
}

/* ドロワー内の追加要素（SNS＋宿泊体験）はデフォルト非表示。スマホのみ表示 */
.site-nav__extra { display: none; }

/* ハンバーガー（モバイルのみ表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================================
   6. セクション
   ========================================================================== */

/* --- 6.1 Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  /* 固定ヘッダー（パネル85px＋ロゴのせり出し）の下にギャラリーが来るよう確保 */
  padding-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: calc(var(--space-3xl) + 40px);
  overflow: hidden;
  /* 赤い部分は画面いっぱい（左右 40px の余白のみ残す） */
  max-width: none;
  margin: 0 40px;
}
/* 下端の白いシェブロン（山形の切り欠き） */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 70px;
  background-color: var(--color-surface);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.hero__gallery {
  display: flex;
  gap: var(--space-sm);
  /* スライダー（initMarquee）化。ヒーロー幅いっぱいに流す */
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  margin-bottom: var(--space-xl);
  overflow: hidden;
}
/* マーキー化したヒーローギャラリーの各カード */
.hero__gallery.marquee { overflow: hidden; }
.marquee .hero__gallery-item {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 280px);
  margin-right: var(--space-sm);
}
.hero__gallery-item {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border-radius: 140px 140px var(--radius-md) var(--radius-md);
  background-color: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
/* 各メディア枠に入れた写真を枠いっぱいにトリミング表示 */
.hero__gallery-item img,
.event__featured-media img,
.works__item img,
.flow-step__media img,
.spec-model__media img,
.photo-strip__item img,
.photo-band__item img,
.photo-grid__item img,
.post__thumb img,
.post__row-media img,
.post__gallery .placeholder img,
.post__figure img,
.ev-card__thumb img,
.concept-row__media img,
.perf-card__media img,
.profile-map img,
.message__rep-photo img,
.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 図表・イラスト・間取り図は切り取らず全体表示 */
.concept-figure img,
.showroom__plan img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
  max-width: 1200px;   /* .container と同値だが明示。中身は中央 1200px に収める */
  margin-inline: auto;
}
.hero__title {
  font-size: clamp(1.75rem, 3.4vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.hero__subtitle {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  opacity: 0.92;
}
.hero__brand {
  position: relative;
  padding-left: var(--space-xl);
  flex: 1 1 320px;
}
.hero__brand-en {
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 2.4vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  letter-spacing: 0.28em;
}
.hero__brand-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  margin-block: var(--space-sm);
}
.hero__brand-sub {
  font-size: var(--fs-sm);
  letter-spacing: 0.4em;
}

/* --- 6.2 Concept ---------------------------------------------------------- */
.concept {
  position: relative;
  padding-top: var(--space-xl);
  background-color: var(--color-surface);
  /* 街並みイラストをセクション背景として下端に底揃え（全幅）。
     画像 2560x1470（縦横比 0.5742）を全幅表示した高さ分を min-height で確保する。 */
  background-image: url(../img/front_top_bg.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  min-height: 57.42vw;
  overflow: hidden;
}
.concept__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  position: relative;
  z-index: 1;
}
.concept__title {
  font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}
.concept__text {
  max-width: 760px;
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}
.concept__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* --- 6.3 About ------------------------------------------------------------ */
.about__head { margin-bottom: var(--space-xl); }

/* 2 行を 1 つの白い角丸カードにまとめる（四辺 30px・行間なし） */
.about__group {
  background-color: var(--color-surface);
  border-radius: 30px;
  overflow: hidden;
}
.about__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* 画像がセル高いっぱいに伸びる */
}
.about__row--reverse .about__media { order: 2; } /* 画像を右に */
.about__media {
  min-height: 22rem;     /* カード内で十分な高さを確保 */
  overflow: hidden;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.about__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.04em;
}
.about__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* --- 6.4 Event ------------------------------------------------------------ */
.event__head { margin-bottom: var(--space-xl); }
/* TOPICS バッジ（右カラム上部・左寄せ／白ピル＋赤文字）*/
.event__topics {
  align-self: flex-start;
  display: inline-block;
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  border-radius: var(--radius-pill);
  padding: 0.4em 1.4em;
  margin-bottom: var(--space-md);
}
/* 特集：背景塗りなし・上下に白い区切り線 */
.event__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.event__featured-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1040 / 710; /* 宿泊体験バナー画像の比率に合わせ文字切れを防ぐ */
}
.event__featured-body { display: flex; flex-direction: column; align-items: flex-start; }
.event__featured-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-tight);
}
.event__featured-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-md);
  opacity: 0.95;
}
.event__past {
  margin-top: var(--space-xl);
}
.event__past-title {
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.06em;
}
.event__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
/* 過去のイベントカードはアーカイブと同じ .ev-card を流用（背景なし／画像下に終了バッジ）。
   赤パネル上では文字は白を継承。hover の赤字は見えないため白の薄色に上書き */
.event__cards .ev-card:hover .ev-card__name { color: rgba(255, 255, 255, 0.75); }
/* カード下の READ MORE（中央寄せ）*/
.event__more { margin-top: var(--space-lg); text-align: center; }

/* --- 6.5 Works + News ----------------------------------------------------- */
.works-news {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* works / news を半々 */
  gap: var(--space-xl);
  align-items: stretch;   /* 2カラムを同じ高さに揃える */
}
/* news カラムは縦フレックスにして news__list を works__grid と同じ高さまで伸ばす */
.news { display: flex; flex-direction: column; }
/* グリッド項目が min-content で広がり横スクロールするのを防ぐ */
.works-news > * { min-width: 0; }
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.block-head__en {
  font-family: var(--font-en);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.25em;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}
.works__item {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
/* ホバー：画像が少し暗くなり中央に「＋」が現れる（--more は焼き込み＋のため除外）*/
.works__item:not(.works__item--more)::before,
.works__item:not(.works__item--more)::after {
  position: absolute;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.works__item:not(.works__item--more)::before {
  content: "";
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.works__item:not(.works__item--more)::after {
  content: "+";
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1;
}
.works__item:not(.works__item--more):hover::before,
.works__item:not(.works__item--more):hover::after,
.works__item:not(.works__item--more):focus-visible::before,
.works__item:not(.works__item--more):focus-visible::after {
  opacity: 1;
}
/* 「もっと見る」タイル＝＋マークは書き出し画像（front_works2）に含まれる */

.news__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);              /* 最小間隔 */
  flex: 1 1 auto;                    /* works の高さまで縦に伸びる */
  justify-content: space-between;    /* 余白を均等配分して works__grid と同じ縦幅に */
}
.news-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.75em 1.25em;
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition);
}
.news-item:hover { background-color: #e4e4e4; }
.news-item__date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  flex: none;
}
.news-item__title {
  font-size: var(--fs-sm);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-item__cat {
  flex: none;
  width: 100px;             /* テキスト長によらず固定（Figma: 100px）*/
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #fff;
  background: #858585;      /* お知らせ（既定） */
  border-radius: var(--radius-pill);
  padding: 0.25em 0;
}
.news-item__cat--voice { background: #e54848; }  /* お客様の声 */
.news-item__cat--blog  { background: #3e3a39; }  /* ブログ */

/* --- 6.6 CTA -------------------------------------------------------------- */
.cta {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  text-align: center;
  padding-block: var(--space-2xl) var(--space-2xl);
  margin-top: 60px; /* 上の山形のための余白 */
}
/* 上端の家型（山形）— 背景色をそのまま三角形で上に伸ばす */
.cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -59px;
  height: 60px;
  background-color: var(--color-primary);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cta__mark { margin: 0 auto var(--space-lg); }
.cta__title {
  font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}
.cta__text {
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  opacity: 0.95;
  text-align: left;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}
.cta__actions .btn { min-width: 260px; }

/* =============================================================================
   7. フッター
   ========================================================================== */
.site-footer {
  background-color: var(--color-surface);
  padding-top: var(--space-2xl);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: var(--space-xl);
}
.footer-brand__logo { width: 110px; margin-bottom: var(--space-sm); }
.footer-brand__name {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}
.footer-brand__company { font-size: var(--fs-sm); }
.footer-brand__address {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.footer-brand__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-md);
}
.footer-brand__tel svg { width: 22px; height: 22px; fill: var(--color-primary); }
.footer-brand__social {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.footer-brand__partners { display: flex; align-items: center; gap: var(--space-md); flex-wrap: nowrap; }
.footer-brand__partners a { display: inline-flex; flex: 0 1 auto; min-width: 0; }
.footer-brand__partners img { width: auto; max-width: 150px; height: auto; display: block; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
}
.footer-nav__group-title {
  font-family: var(--font-en);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.footer-nav__list {
  display: flex;
  flex-direction: column;
}
.footer-nav__list li { border-bottom: 1px dashed var(--color-border-dashed); }
.footer-nav__link {
  display: block;
  padding: 0.6em 0;
  font-size: var(--fs-sm);
}
.footer-nav__link:hover { color: var(--color-primary); }

.site-footer__bottom {
  margin-top: var(--space-2xl);
  border-top: 1px dashed var(--color-border-dashed);
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* =============================================================================
   8. 下層ページ共通／個別
   -----------------------------------------------------------------------------
   .page-hero  … 下層ページ共通の見出し（赤帯＋白シェブロン＋英題＋和題）
   .lead       … リード文（中央寄せの導入見出し＋本文）
   .section-bar… アイコン付き赤見出しバー（spec/concept で共用）
   .photo-strip… 横並び写真ストリップ
   .page-body / .side-index … 左サイド目次＋本文の2カラム（concept / spec 共用）
   .spec-* / .perf-* … SPEC・性能と仕様
   .concept-* / .feature-* … CONCEPT ページ
   ========================================================================== */

/* --- 8.1 ページ見出し（page-hero） --------------------------------------- */
.page-hero__band {
  position: relative;
  background-color: var(--color-primary);
  height: calc(var(--header-height) + clamp(80px, 12vw, 150px));
}
.page-hero__band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 56px;
  background-color: var(--color-surface);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.page-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding-block: var(--space-lg) var(--space-md);
}
/* Figma Dev Mode 準拠: Inria Sans Bold / 40px / letter-spacing 8px / #3e3a39 */
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 40px);
  font-weight: var(--fw-bold);
  letter-spacing: 8px;
  text-indent: 8px;
  color: var(--color-text);
}
/* Inter Bold / 16px / letter-spacing 0.8px / #3e3a39 */
.page-hero__sub {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  color: var(--color-text);
}

/* --- 8.2 リード文（lead） ------------------------------------------------- */
.lead {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: center;
}
/* Dev Mode: Inter Bold / 36px / letter-spacing 1.8px、本文との間隔 60px */
.lead__title {
  font-size: clamp(1.5rem, 4vw, 36px);
  font-weight: var(--fw-bold);
  letter-spacing: 1.8px;
  margin-bottom: 60px;
}
.lead__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  text-align: left;   /* 見出しは中央、本文は左寄せ（Figma 準拠）*/
}

/* --- 8.3 セクション見出しバー（section-bar） ----------------------------- */
.section-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: 10px; /* Figma Dev Mode 準拠 */
  padding: 0.75rem 1.5rem;
  margin-bottom: var(--space-lg); /* 見出しバーと次要素の間隔 */
}
.section-bar__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;            /* 白丸は無し・白アイコンを赤バー上に直接 */
}
.section-bar__icon svg { width: 42px; height: 42px; fill: currentColor; }
.section-bar__icon img { width: 40px; height: 40px; display: block; }
/* Dev Mode: Inter Bold / 36px / letter-spacing 1.8px / 白 */
.section-bar__title {
  font-size: clamp(1.4rem, 3vw, 36px);
  font-weight: var(--fw-bold);
  letter-spacing: 1.8px;
}

/* --- 8.4 写真ストリップ（photo-strip） ----------------------------------- */
.photo-strip {
  display: flex;
  gap: var(--space-xs);
}
.photo-strip__item {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

/* --- 自動スクロールするスライダー（photo-strip / photo-band 共用）--------
   JS（initMarquee）が子要素を .marquee__track でラップし、シームレスループ用に
   一式を複製する。translateX(-50%) で 1 セット分ぴったり流れて繰り返す。 */
.photo-strip.marquee,
.photo-band.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee .photo-strip__item,
.marquee .photo-band__item {
  flex: 0 0 auto;
  width: clamp(180px, 24vw, 280px);
  margin-right: var(--space-xs);
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .photo-strip.marquee,
  .photo-band.marquee,
  .hero__gallery.marquee { overflow-x: auto; }
}

/* --- 8.5 SPEC ページ ----------------------------------------------------- */
.spec-model + .spec-model { margin-top: var(--space-2xl); }
.spec-model__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-lg);
}
.spec-model__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Dev Mode: Inter Bold / 20px */
.spec-model__subtitle {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.54;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
}
/* Dev Mode: 縦並び。坪単価＝白地・赤枠(角丸なし)のボックス(幅191px)、
   数字32px＋単位12px(黒)、注記は下に2行 */
.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 191px;
  max-width: 100%;
}
.price__label {
  width: 100%;
  text-align: center;
  background-color: #fff;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.8px;
  padding: 5px 0;
}
.price__amount { display: flex; align-items: center; gap: 7px; color: #000; }
.price__num {
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 1.54;
  letter-spacing: 1.6px;
}
.price__unit { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.6px; }
.price-note {
  font-size: var(--fs-2xs);
  line-height: 1.8;
  color: var(--color-text);
  margin-top: var(--space-md);
}
/* Dev Mode: 建築概要/オプション = Inter Bold 20px */
.spec-block__title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  background-color: var(--color-surface-muted);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  margin: var(--space-lg) 0 var(--space-sm);
}
/* Dev Mode: 行を縦に gap18 で並べる（区切り線なし）*/
.spec-table {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.spec-table__row {
  display: flex;
  gap: 10px;
  align-items: stretch; /* ラベル箱を値の高さに合わせる */
}
/* Dev Mode: 表ラベル = 赤枠 / Inter Black / #e54848 / 16px / 幅152px */
.spec-table__label {
  flex: none;
  width: 152px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: var(--fw-black);
  letter-spacing: 1.6px;
}
/* Dev Mode: 値 = #3e3a39 / 16px / 行高28px / padding20px */
.spec-table__value {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 1.6px;
  color: var(--color-text);
}
/* 「断熱：」「仕上：」のラベル＋値（継続行は値の左端で揃う）*/
.spec-spec { display: flex; }
.spec-spec__key { flex: none; }
.spec-spec__val { flex: 1 1 0; min-width: 0; }
/* Dev Mode: 背景なし。ロゴ(360x56)＋本文を gap 20px で横並び */
.spec-option {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.spec-option__logo { flex: none; width: 360px; max-width: 55%; }
.spec-option__text {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 1.6px;
  color: var(--color-text);
}

/* --- 8.6 CONCEPT ページ -------------------------------------------------- */
/* リード下のグレーカード（健康・エコロジー・長もち＋相関図）。Dev Mode: #f1f1f1 / radius20 / p40 / gap33 */
.concept-intro {
  max-width: 1040px;
  margin: var(--space-xl) auto 0;
  display: flex;
  align-items: center;
  gap: 33px;
  background: var(--color-surface-muted);
  border-radius: 20px;
  padding: 40px;
}
.concept-intro__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  color: var(--color-text);
}
.concept-intro__title {
  font-size: clamp(1.3rem, 2.5vw, 24px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.concept-intro__text { font-size: var(--fs-sm); line-height: 2; }
.concept-intro__figure { flex: none; width: 317px; }
.concept-intro__figure img { width: 100%; height: auto; display: block; }

.page-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
/* グリッド項目が min-content で広がり横スクロールするのを防ぐ */
.page-body > * { min-width: 0; }
.side-index {
  position: sticky;
  /* 左端固定ロゴ（高さ≒155px）に被らない位置まで下げる */
  top: calc(var(--header-height) + 90px);
}
.side-index__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.side-index__list { display: flex; flex-direction: column; }
.side-index__list a {
  display: block;
  padding: 0.55rem 0 0.55rem 0.85rem;
  border-left: 2px solid var(--color-border);
  font-size: var(--fs-sm);
}
.side-index__list a:hover,
.side-index__list a.is-active {
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}
.concept-block + .concept-block { margin-top: var(--space-2xl); }
/* Dev Mode: 小見出し＝グレーバー #f1f1f1 / Inter Bold 20px / padding 10px 20px */
.concept-block__lead {
  background-color: var(--color-surface-muted);
  padding: 10px 20px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  margin: var(--space-lg) 0 var(--space-md);
}
.concept-block__text {
  font-size: var(--fs-sm);
  line-height: 2;
  letter-spacing: 0.7px;
  margin-bottom: var(--space-md);
}
/* 箇条書き（背景なし）: Inter Bold 16px / 行高2 / 各項目改行 */
.concept-points {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 2;
  letter-spacing: 0.8px;
  margin-bottom: var(--space-md);
}

/* 小見出し下の2カラム（左テキスト 430 / 右画像 350 / gap 20px）*/
.concept-sub + .concept-sub { margin-top: var(--space-xl); }
.concept-row {
  display: grid;
  grid-template-columns: 430fr 350fr;
  gap: 20px;
  align-items: start;
  margin-top: var(--space-md);
}
.concept-row--reverse .concept-row__media { order: -1; }
.concept-row__text > :last-child { margin-bottom: 0; }
.concept-row__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 350 / 260;
}
.concept-row__media img { width: 100%; height: 100%; object-fit: cover; }
.concept-figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-md) 0;
}
.concept-figure.placeholder { aspect-ratio: 16 / 7; }
.concept-figure__title {
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: 16px;
  margin: var(--space-md) 0 var(--space-sm);
}
.concept-block__text--strong { font-weight: var(--fw-bold); }
/* 文中の強調見出し（グレーバーなしの太字＋大きめ）。Dev Mode: 20px / 24px Bold */
.concept-block__text--md {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  line-height: 1.8;
  margin-bottom: var(--space-2xs);
}
.concept-block__text--lg {
  font-size: clamp(1.25rem, 2.4vw, 24px);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  line-height: 1.8;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.feature-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feature-card__media { aspect-ratio: 4 / 3; }
.feature-card__body { padding: var(--space-md); }
.feature-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2xs);
}
.feature-card__text { font-size: var(--fs-xs); line-height: var(--lh-base); color: var(--color-text-muted); }

/* 性能と仕様: 横型カード（左 画像260px / 右 タイトル(グレーバー)＋リード＋本文）*/
.perf-card { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.perf-card + .perf-card { margin-top: var(--space-lg); }
.perf-card__media {
  aspect-ratio: 260 / 225;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.perf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.perf-card__title {
  background-color: var(--color-surface-muted);
  padding: 10px 20px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
}
.perf-card__lead { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: 1px; margin: var(--space-sm) 0; }
.perf-card__text { font-size: var(--fs-sm); line-height: 2; letter-spacing: 0.7px; }

/* --- 8.7 FLOW ページ ----------------------------------------------------- */
/* 赤い枠線ボタン（FLOW のステップ内ボタン） */
.btn--primary-line {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--primary-line:hover { background: var(--color-primary); color: #fff; }

.flow { max-width: 840px; margin-inline: auto; padding-inline: var(--container-pad); }
.flow-step + .flow-step { margin-top: var(--space-xl); }
/* 番号＋タイトルの赤バー（Dev Mode: 番号64px / タイトル36px / rounded 10px）*/
.flow-step__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: 10px;
  padding: 0.6rem 1.5rem;
}
.flow-step__num {
  font-family: var(--font-en);
  font-size: clamp(2.5rem, 6vw, 64px);
  font-weight: var(--fw-bold);
  letter-spacing: 3.2px;
  line-height: 1;
  flex: none;
}
.flow-step__title {
  font-size: clamp(1.3rem, 3vw, 36px);
  font-weight: var(--fw-bold);
  letter-spacing: 1.8px;
}
/* 画像(350)左 / 本文(430)右 */
.flow-step__body {
  display: grid;
  grid-template-columns: 350fr 430fr;
  gap: 20px;
  align-items: center;
  margin-top: var(--space-md);
}
.flow-step__media {
  aspect-ratio: 350 / 260;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.flow-step__media img { width: 100%; height: 100%; object-fit: cover; }
.flow-step__text {
  font-size: var(--fs-sm);
  line-height: 2;
  letter-spacing: 0.7px;
  margin-bottom: var(--space-md);
}
.flow-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); max-width: 172px; flex-direction: column; }
.flow-step__actions .btn { min-width: 172px; }

/* --- 8.8 Q&A（アコーディオン）------------------------------------------- */
.qa { max-width: 840px; margin-inline: auto; padding-inline: var(--container-pad); }
.qa-list { display: flex; flex-direction: column; gap: 12px; }
/* 質問バー（赤・クリックで開閉）: Dev Mode 20px */
.qa-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: clamp(1rem, 2vw, 20px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  line-height: 1.5;
  text-align: left;
}
/* トグルアイコン: 閉=下向きシェブロン → 開=180°回転（同一アイコンを回転で出し分け）*/
.qa-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transition: transform 0.35s ease;
}
.qa-item__icon svg { width: 22px; height: 22px; }
.qa-item.is-open .qa-item__icon { transform: rotate(180deg); }
/* 回答（高さアニメーション）*/
.qa-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.qa-item__a-inner {
  padding: var(--space-md) 1.5rem;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.5px;
}
.qa-item__a-inner strong { font-weight: var(--fw-bold); color: var(--color-primary); }

/* --- 8.9 COMPANY ページ -------------------------------------------------- */
.company { max-width: 880px; margin-inline: auto; padding-inline: var(--container-pad); }
.company-section + .company-section { margin-top: var(--space-2xl); }

/* セクション見出し（灰バー・左寄せ・英字）: Dev Mode #f1f1f1 / Inria Sans 32px / 左寄せ */
.section-label {
  background-color: var(--color-surface-muted);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 32px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3em;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}
/* 小サイズ・和文向け（プライバシーポリシー等の番号付き見出し）*/
.section-label--sm {
  font-family: var(--font-base);
  font-size: clamp(1.05rem, 2.4vw, 20px);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
}

/* プライバシーポリシー等の文書ページ */
.doc { max-width: 880px; margin-inline: auto; padding-inline: var(--container-pad); }
.doc__intro { font-size: var(--fs-sm); line-height: 2; margin-bottom: var(--space-xl); }
.doc-section + .doc-section { margin-top: var(--space-xl); }
.doc-section__body { font-size: var(--fs-sm); line-height: 2; }
.doc-section__body p { margin-bottom: 1em; }
.doc-section__body p:last-child { margin-bottom: 0; }
.doc-list { font-size: var(--fs-sm); line-height: 2; margin: 0 0 1em; }
.doc-contact {
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg)var(--space-md) 0;
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: var(--space-md);
}

/* PROFILE テーブル */
.profile-table { border-top: 1px solid var(--color-border); }
.profile-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.profile-row__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.profile-row__value { font-size: var(--fs-sm); line-height: 1.9; }
.profile-map { aspect-ratio: 16 / 7; border-radius: var(--radius-sm); margin-top: 0.5rem; }

/* MESSAGE */
.message__title { text-align: left; font-size: 24px; font-weight: var(--fw-bold); letter-spacing: 1px; }
.message__subtitle { text-align: left; font-size: 20px; font-weight: var(--fw-bold); margin: var(--space-xs) 0 var(--space-lg); }
.message__body p { font-size: var(--fs-sm); line-height: 2; margin-bottom: 1.2em; }
.message__body p.is-emph { font-size: 16px; font-weight: var(--fw-bold); }
.message__rep {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.message__rep-photo { flex: none; width: 200px; aspect-ratio: 200 / 256; border-radius: var(--radius-sm); }
.message__rep-role { font-size: var(--fs-xs); color: var(--color-text-muted); }
.message__rep-name { font-size: 18px; font-weight: var(--fw-bold); margin: 0.2rem 0; }
.message__rep-en { font-size: var(--fs-2xs); letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: var(--space-sm); }

/* SHOWROOM */
.showroom__plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg); }
.showroom__plan { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); margin-bottom: var(--space-lg); }
.photo-grid__item { aspect-ratio: 1; border-radius: var(--radius-sm); }
.showroom-item + .showroom-item { margin-top: var(--space-lg); }
.showroom-item__title { font-size: 18px; font-weight: var(--fw-bold); margin-bottom: var(--space-2xs); background-color: #F1F1F1; padding: 0.5rem 1rem; }
.showroom-item__text { font-size: var(--fs-sm); line-height: 2; }

/* 全幅の写真バンド（COMPANY 末尾） */
.photo-band { display: flex; gap: var(--space-xs); padding-inline: var(--container-pad); margin-block: var(--space-xl); }
.photo-band__item { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }

/* --- 8.10 CONTACT（WordPress Contact Form 7 想定）------------------------
   入力系は「ネイティブ要素」と「CF7 が生成する .wpcf7-* 要素」の両方に
   同じスタイルが当たるようセレクタを併記している。
   → WP では CF7 のショートカットを .form-field 内に置くだけで Figma のデザインが優先される。 */
.contact { max-width: 800px; margin-inline: auto; padding-inline: var(--container-pad); }
.form-field + .form-field { margin-top: var(--space-lg); }
.form-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.form-required {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: #fff;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.9em;
  letter-spacing: 0.1em;
}

/* 入力欄（ネイティブ＋CF7）: bg #f6f6f6 / border 1px #3e3a39 / 高さ50px */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form .wpcf7-form-control.wpcf7-text,
.contact-form .wpcf7-form-control.wpcf7-email,
.contact-form .wpcf7-form-control.wpcf7-tel {
  width: 100%;
  height: 50px;
  background-color: #f6f6f6;
  border: 1px solid var(--color-text);
  padding: 0 1rem;
  font: inherit;
  color: var(--color-text);
}
.contact-form textarea,
.contact-form .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  min-height: 180px;
  background-color: #f6f6f6;
  border: 1px solid var(--color-text);
  padding: 1rem;
  font: inherit;
  color: var(--color-text);
  resize: vertical;
}
.contact-form .wpcf7-form-control-wrap { display: block; } /* CF7 のラッパ span をブロック化 */
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* チェックボックス群（ネイティブ＋CF7）*/
.checkbox-list,
.contact-form .wpcf7-checkbox { display: flex; flex-direction: column; gap: var(--space-sm); }
.checkbox-list label,
.contact-form .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: 16px;
  cursor: pointer;
}
.contact-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex: none;
}

/* 送信ボタン（赤枠ピル / 20px）*/
.contact-submit { text-align: center; margin-top: var(--space-xl); }
.contact-submit p { position: relative; margin: 0; }
/* CF7 のスピナーは visibility:hidden でも領域を占有しボタンが左にずれるため、
   フローから外して（静的位置に絶対配置）ボタンを完全に中央へ */
.contact-submit .wpcf7-spinner { position: absolute; margin: 0 0 0 12px; }
.contact-form button[type="submit"],
.contact-form .wpcf7-submit {
  font: inherit;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  background-color: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 0.75em 3.5em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.contact-form button[type="submit"]:hover,
.contact-form .wpcf7-submit:hover { background-color: var(--color-primary); color: #fff; }

/* --- 8.11 EVENT アーカイブ（CMS 投稿ループ想定）------------------------- */
/* ※ WordPress はアーカイブページの <body> に class="archive" を付与するため、
   素の .archive だと body 全体が max-width で縮む。<div class="archive"> に限定する。 */
main .archive { max-width: 1040px; margin-inline: auto; padding-inline: var(--container-pad); }
/* カード grid（= WP の投稿ループ。1 アイテム = 1 投稿）*/
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md) clamp(1rem, 2vw, 1.5rem);
}
/* イベント/施工のカード。アーカイブとホームEVENT（赤パネル）で共用 */
.ev-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.ev-card__thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
}
.ev-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* バッジは画像の下・左寄せ（Dev Mode: #3e3a39 ピル / 白 / 12px）*/
.ev-card__badge {
  align-self: flex-start;
  width: 100px;             /* テキスト長によらず固定（Figma: 100px）*/
  text-align: center;
  margin-top: var(--space-sm);
  background-color: var(--color-text);
  color: #fff;
  font-size: 12px;
  border-radius: var(--radius-pill);
  padding: 0.3em 0;
}
.ev-card__badge--open { background-color: var(--color-primary); }
.ev-card__name {
  font-size: 16px;
  line-height: 1.6;
  margin-top: var(--space-xs);
}
.ev-card:hover .ev-card__name { color: var(--color-primary); }

/* ページネーション（WP: paginate_links 相当）*/
/* Dev Mode: 左寄せ / 角丸なしの四角 / 枠線 #3e3a39 / current 赤 / 14px */
.pagination {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: var(--space-2xl);
}
.pagination__item {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-text);
  font-size: 14px;
  color: var(--color-text);
}
.pagination__item:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__item.is-current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* --- 8.12 WORKS アーカイブ: カテゴリ絞り込みタブ -------------------------
   Dev Mode: ピル(50px) / 14px。すべて=塗り #3e3a39、他=白地・枠線。
   JS（initWorksFilter in main.js）で data-category により表示を絞り込み。
   ※ CMS ではタクソノミー（カテゴリ）アーカイブ or Ajax 絞り込みに対応。 */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.cat-filter__btn {
  font: inherit;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  background-color: #fff;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  padding: 0.65em 2.2em;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  width: 160px; /* テキスト長によらず固定（Figma: 120px）*/
  /* <a> でボタンと同じ見た目に */
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}
.cat-filter__btn:hover { background-color: var(--color-text); color: #fff; }
.cat-filter__btn.is-active { background-color: var(--color-text); color: #fff; }
/* 絞り込みで非表示にするカード */
.card-grid .ev-card[hidden] { display: none; }

/* --- 8.13 NEWS アーカイブ: 行リスト ------------------------------------- */
.news-archive { display: flex; flex-direction: column; gap: 12px; }
/* 行＝薄グレーのピル（Dev Mode: #f1f1f1 / rounded 50px）*/
.news-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  padding: 1rem 1.75rem;
  color: inherit;
}
.news-row[hidden] { display: none; }
.news-row__date { flex: none; font-size: 14px; color: var(--color-text-muted); }
.news-row__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* カテゴリバッジ: 既定=グレー #858585、ブログ=濃 #3e3a39、お客様の声=赤 */
.news-row__cat {
  flex: none;
  min-width: 96px;
  text-align: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: #fff;
  background-color: #858585;
  border-radius: var(--radius-pill);
  padding: 0.35em 1.1em;
}
.news-row__cat--blog { background-color: var(--color-text); }
.news-row__cat--voice { background-color: var(--color-primary); }

/* --- 8.14 投稿詳細（event single = 宿泊体験 など）----------------------- */
.post { max-width: 800px; margin-inline: auto; padding-inline: var(--container-pad); text-align: center; }
.post__title {
  font-size: clamp(1.4rem, 3vw, 28px);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.post__date { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-sm); }
.post__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-xl) 0;
}
.post__cta { margin: var(--space-lg) 0; }
.post__heading {
  font-size: clamp(1.3rem, 3vw, 28px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  margin: var(--space-xl) 0 var(--space-md);
}
.post__body{ text-align: left; }
/* news single: 見出し群と本文の間に余白（Figma ≒140px）。狭幅では縮小 */
.post__body--news { margin-top: clamp(56px, 11vw, 140px); }
.post__text { font-size: var(--fs-sm); line-height: 2; margin-bottom: var(--space-md); }
.post__list {
  display: inline-block;
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 2;
  margin: var(--space-sm) auto var(--space-md);
}
.post__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  margin: var(--space-lg) 0;
}
.post__gallery .placeholder { aspect-ratio: 1; border-radius: var(--radius-sm); }
.post__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* 投稿詳細: works single 拡張（カテゴリーバッジ・画像＋テキスト行・2列ギャラリー） */
.post__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  margin-top: var(--space-xs);
  padding: 5px 20px;
  background: var(--color-text);
  color: var(--color-text-invert);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xs);
  letter-spacing: 0.05em;
}
/* カテゴリー別のピル色（news アーカイブのバッジ配色に対応）*/
.post__cat--info { background: #858585; }                  /* お知らせ（既定グレー）*/
.post__cat--blog { background: var(--color-text); }        /* ブログ（濃）*/
.post__cat--voice { background: var(--color-primary); }    /* お客様の声（赤）*/
.post__intro { text-align: left; }
/* イベント詳細の太字情報ブロック（【要予約】開催日時／場所 など）*/
.post__info {
  font-size: clamp(1.2rem, 2.6vw, 28px);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  margin: var(--space-lg) 0 var(--space-md);
}
/* 単体画像（中央寄せ・角丸）。--portrait は縦長ポスター用 */
.post__figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-lg) auto;
}
.post__figure--portrait { max-width: 616px; aspect-ratio: 616 / 900; }
.post__thumb--43 { aspect-ratio: 4 / 3; }
.post__row {
  display: grid;
  grid-template-columns: 388px 1fr;
  gap: var(--space-lg);
  align-items: center;
  text-align: left;
  margin-bottom: var(--space-lg);
}
.post__row--reverse { grid-template-columns: 1fr 388px; }
.post__row--reverse .post__row-media { order: 1; }
.post__row .post__text { margin: 0; }
.post__row-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post__gallery--2 { grid-template-columns: repeat(2, 1fr); }
.post__gallery--2 .placeholder { aspect-ratio: 4 / 3; }

/* --- 8.15 宿泊体験フローティングボタン（追従・右端に固定）------------------
   JS（initStayFloat）が contact/stay 以外の全ページの body 末尾に挿入。
   通常は約80pxだけ見え、hover/フォーカスで全体がスライド表示される。 */
.stay-float {
  position: fixed;
  top: 55%;
  right: 0;
  z-index: 80;
  width: 190px;
  /* 右へ寄せて左の約80px（ふくろう）だけ見せる */
  transform: translate(calc(100% - 80px), -50%);
  transition: transform 0.35s ease;
  filter: drop-shadow(0 6px 14px rgba(62, 58, 57, 0.25));
}
.stay-float img { width: 100%; height: auto; display: block; }
.stay-float:hover,
.stay-float:focus-visible { transform: translate(0, -50%); }
@media (max-width: 768px) {
  .stay-float { display: none; }
}

/* =============================================================================
   9. レスポンシブ
   ========================================================================== */

/* --- タブレット ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  /* レスポンシブ時: footer-brand 内部を中央揃え */
  .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .works-news { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .hero__brand { padding-left: 0; }

  /* 下層ページ: 2カラム → 1カラム */
  .spec-model__top { grid-template-columns: 1fr; }
  .page-body { grid-template-columns: 1fr; }
  .concept-row { grid-template-columns: 1fr; }
  .concept-row--reverse .concept-row__media { order: 0; }
  .concept-intro { flex-direction: column; align-items: stretch; }
  .concept-intro__figure { width: 100%; max-width: 317px; margin-inline: auto; }
  .perf-card { grid-template-columns: 1fr; }
  .perf-card__media { aspect-ratio: 16 / 9; }
  .flow-step__body { grid-template-columns: 1fr; }
  .flow-step__media { aspect-ratio: 16 / 9; }
  .profile-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .showroom__plans { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .message__rep { flex-direction: column; align-items: flex-start; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .news-row { gap: var(--space-sm); padding: 0.85rem 1.1rem; }
  .news-row__cat { min-width: 0; }
  .post__gallery { grid-template-columns: repeat(2, 1fr); }
  .post__row,
  .post__row--reverse { grid-template-columns: 1fr; }
  .post__row--reverse .post__row-media { order: 0; }
  .side-index {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .side-index__list { flex-direction: row; flex-wrap: wrap; gap: var(--space-xs); }
  .side-index__list a { border-left: 0; padding: 0.4rem 0.8rem; background: var(--color-cream-light); border-radius: var(--radius-pill); }
  .side-index__list a.is-active { background: var(--color-primary); color: #fff; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- モバイル ------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-2xl: 4rem;
    --space-3xl: 5rem;
  }

  /* ヘッダー：白カード内に［ふくろう＋NAKANO HOUSING］と赤ハンバーガーを左右配置 */
  .site-header__inner { align-items: stretch; }
  .nav-toggle { display: flex; }

  /* 縦組みフルロゴは隠し、横組みモバイルロゴを表示 */
  .site-header__logo-full { display: none; }
  .site-header__logo {
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
  }
  .site-header__logo-mobile {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .site-header__logo-owl { display: block; width: 46px; height: 49px; }
  .site-header__wordmark {
    font-family: 'Inria Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
    color: #3e3a39;
    text-align: center;
    white-space: nowrap;
  }

  .site-header__panel {
    width: 100%;
    max-width: none;
    min-height: 77px;
    padding: 14px 20px;
    border-radius: 0;   /* スマホは左角の丸みなし */
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
    justify-content: flex-end;
    gap: 0;
  }
  .site-header__social { display: none; }

  /* ハンバーガーを赤・丸端に */
  .nav-toggle { width: 30px; height: 30px; gap: 5px; }
  .nav-toggle span {
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-primary);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .site-nav {
    position: fixed;
    inset: 77px 0 auto 0;
    margin: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transform: translateY(-120%);
    transition: transform var(--transition);
    max-height: calc(100vh - 77px);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--container-pad);
  }
  .site-nav__link {
    display: block;
    padding: 0.9em 0.25em;
    border-bottom: 1px solid var(--color-border);
  }

  /* ドロワー内: SNS ＋ 宿泊体験ボックス（スマホのみ） */
  .site-nav__extra {
    display: block;
    padding: var(--space-lg) var(--container-pad) var(--space-xl);
  }
  .site-nav__social {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  .site-nav__stay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: 0.9em 1.25em;
    border: 1.5px solid var(--color-primary);
    border-radius: 16px;
    text-decoration: none;
  }
  .site-nav__stay-owl { width: 56px; height: auto; flex: none; }
  .site-nav__stay-text {
    display: flex;
    flex-direction: column;
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    line-height: 1.2;
  }
  .site-nav__stay-sm { font-size: var(--fs-sm); }
  .site-nav__stay-lg { font-size: 1.6rem; letter-spacing: 0.08em; }

  /* スマホは左右余白なしで全幅に */
  .hero { margin: 0; }
  .hero__body { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  /* 縦並び時は flex-basis(320px) が「高さ」として効き余白が出るため内容なりに */
  .hero__brand { flex: 0 0 auto; }

  .about__row,
  .about__row--reverse .about__media,
  .event__featured {
    grid-template-columns: 1fr;
  }
  .about__row--reverse .about__media { order: 0; }

  .event__cards { grid-template-columns: 1fr; }
  /* WORKS/NEWS 見出しは中央寄せ＋READ MORE を下に（モバイルデザイン準拠）*/
  .block-head {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
  }
  /* WORKS は1カラムの全幅写真に */
  .works__grid { grid-template-columns: 1fr; gap: var(--space-sm); }
  .works__item { aspect-ratio: 16 / 10; }
  /* NEWS: 上段=日付+タイトル（広く）／下段=カテゴリバッジ中央 */
  .news-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "date title"
      "cat  cat";
    align-items: center;
    gap: 0.6em var(--space-sm);
  }
  .news-item__date { grid-area: date; }
  .news-item__title { grid-area: title; }
  .news-item__cat { grid-area: cat; justify-self: center; }
  /* SPEC オプションはロゴ→テキストの縦積み */
  .spec-option { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .spec-option__logo { width: 240px; max-width: 70%; }

  .cta__actions .btn,
  .concept__actions .btn { min-width: 337px; width: 100%; }
  .concept__actions { width: 100%; }
  /* モバイルでは街並み背景を小さくし、ボタンが建物に重ならないよう下に余白を確保 */
  .concept {
    min-height: 0;
    padding-bottom: 48vw;
    background-size: 150% auto;
  }

  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .site-footer__bottom-inner { flex-direction: column; gap: var(--space-xs); }

  /* 下層ページ（モバイル） */
  .feature-grid { grid-template-columns: 1fr; }
  .spec-table__label { width: 92px; }
  .spec-table__value { padding: 12px 14px; font-size: 15px; }
}

@media (max-width: 420px) {
  .footer-nav { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}