@charset "UTF-8";

/* ============================================================
   hiraya.css
   PRODUCTS / 平屋（HOKUSHU HIRAYA）ページ専用スタイル
   - フレームワーク非依存（Tailwind 廃止後）
   - 依存：Swiper 11 系 CSS
   - フォントは共通ヘッダー（header.php）が読み込む
     Open Sans / Shippori Mincho / EB Garamond のみ使用
   - アイコンはインラインSVG（.icon クラス）で実装
   ============================================================ */


/* ============================================================
   1. デザイントークン & ベース
   - カラー・フォント・レイアウト基準値をカスタムプロパティに集約
   - 旧 Tailwind config の theme.extend.colors と互換
   ============================================================ */
:root {
  /* カラー（style.css のブランドパレットに準拠して統一） */
  --c-primary-container:        #112D12;  /* メインブランド（暗緑）— style.cssの最多色 */
  --c-on-primary-container:     #BFA679;  /* 暗緑背景上の文字（ゴールド）*/
  --c-on-primary-fixed-variant: #0F3523;  /* 暗緑の中間 */
  --c-secondary:                #BFA679;  /* アクセント（ゴールド）*/
  --c-secondary-fixed-dim:      #A28D5E;  /* ゴールド暗トーン */
  --c-on-secondary-fixed-var:   #0F3523;  /* ゴールド背景上の文字 */
  --c-surface:                  #F5F5F5;  /* 基本サーフェス */
  --c-surface-container-lowest: #ffffff;  /* 最明面（白）*/
  --c-surface-container-low:    #E2E7E8;  /* 薄いブルーグレー面 */
  --c-on-surface:               #121212;  /* 面上の主要テキスト */
  --c-on-surface-variant:       #455a64;  /* 副次テキスト／ダークグレー */
  --c-on-background:            #121212;  /* 本文テキスト */
  --c-outline:                  #6b7280;  /* 強めの枠線 */
  --c-outline-variant:          #cfd8dc;  /* 薄い枠線・区切り */

  /* フォント（北州ハウジング www.hokushuhousing.co.jp / style.css に準拠）
     - 和文見出し：Shippori Mincho（Webフォント）→ Yu Mincho 等の OSフォントへフォールバック
     - 本文・ラベル：Open Sans（欧文）→ 游ゴシック体系の OSフォント
     - 欧文専用ラベル：Open Sans のみ
     - header.php で Shippori Mincho / Open Sans の Webフォントが読み込まれている前提 */
  --ff-headline: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --ff-body:     "Open Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  --ff-label:    "Open Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;

  /* レイアウト最大幅 */
  --w-wide:    1536px;
  --w-base:    1280px;
  --w-narrow:  1024px;
  --w-mid:     896px;
  --w-prose:   768px;
  --w-text:    640px;
  --w-xs:      320px;

  /* ヘッダー高さ
     - FV画像の高さ計算（calc(100vh - var(...))）でのみ使用。
     - 共通ヘッダー（WordPressテーマの header.php）の実高さに合わせて要調整。 */
  --h-header-sp: 64px;
  --h-header-pc: 80px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-on-background);
  background-color: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease;
}

button {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.4;
}

p { margin: 0; }

/* SVGアイコン共通スタイル
   - インラインSVGで使用：<svg class="icon" viewBox="0 0 24 24">...</svg>
   - サイズは width/height: 1em で親要素の font-size に追従
   - currentColor で色を継承、stroke ベース */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}


/* ============================================================
   2. 共通レイアウト & ユーティリティ
   - 全セクションで横断的に使用する小さな部品群
   ============================================================ */

/* 中央寄せコンテナ（用途別 max-width バリアント） */
.l-container {
  width: 100%;
  max-width: var(--w-base);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.l-container--wide   { max-width: var(--w-wide);   }
.l-container--narrow { max-width: var(--w-narrow); }
.l-container--prose  { max-width: var(--w-prose);  }
.l-container--text   { max-width: var(--w-text);   }

@media (min-width: 768px) {
  .l-container {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* セクション共通の上下パディング */
.section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .section-padding {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

/* 各セクション英字ラベル（Plan / Case Studies / Concept 等） */
.eyebrow {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 24px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-secondary);
  font-weight: 500;
}
@media (min-width: 768px) {
  .eyebrow {
    font-size: 28px;
  }
}

/* 大見出し共通（各セクション H2 が継承） */
.section-title {
  margin: 0;
  font-family: var(--ff-headline);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-on-background);
}

/* PC のみ <br> を有効化（SP では非表示） */
.br-pc { display: none; }
@media (min-width: 768px) { .br-pc { display: inline; } }

/* SP のみ <br> を有効化 */
.br-sp { display: inline; }
@media (min-width: 640px) { .br-sp { display: none; } }

/* 画像ホバーズーム
   - ラッパに .img-hover、対象画像は <img> 直下 */
.img-hover {
  overflow: hidden;
}
.img-hover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}

/* アスペクト比ボックス（中に <img> を配置） */
.ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ratio > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ratio--4x3    { aspect-ratio: 4 / 3; }
.ratio--3x2    { aspect-ratio: 3 / 2; }
.ratio--5x4    { aspect-ratio: 5 / 4; }
.ratio--3x4    { aspect-ratio: 3 / 4; }
.ratio--16x9,
.ratio--video  { aspect-ratio: 16 / 9; }
.ratio--square { aspect-ratio: 1 / 1; }

/* Life カルーセル メイン：3:2 で統一 */
.ratio--life-main { aspect-ratio: 3 / 2; }

/* ============================================================
   5. ページタイトル H1 + FV（section-fv / hero-over-image）
   - 旧 page-hero ブロックは廃止。
     画像（section-fv__image）の上に H1 を絶対配置で重ねる構造。
   - PC/SP は <picture> + <source media> で出し分け。
   ============================================================ */

/* セクションコンテナ */
.section-fv {
  position: relative;
  background-color: var(--c-surface);
}

/* 画像領域：SP/PC ともにヘッダー差し引きの大きな高さを取る */
.section-fv__media {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--h-header-sp));
  min-height: 520px;
  overflow: hidden;
  background-color: #000; /* 画像読込前の保険 */
}
@media (min-width: 768px) {
  .section-fv__media {
    height: calc(100vh - var(--h-header-pc));
    min-height: 640px;
  }
}

/* 静的FV画像コンテナ（PC/SP切替用 picture）：親要素いっぱい */
.section-fv__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.section-fv__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像の上に敷くオーバーレイ：文字の可読性確保 */
.section-fv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

/* ヒーロー（H1）：画像中央に配置 */
.section-fv__hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 24px 20px;
  color: #fff;
  pointer-events: none; /* スワイプ操作を妨げない */
}

.section-fv__hero-eyebrow {
  display: block;
  font-family: var(--ff-label);
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin-bottom: 28px;
  opacity: 0.95;
}
@media (min-width: 768px) {
  .section-fv__hero-eyebrow {
    font-size: 0.75rem;
    margin-bottom: 36px;
  }
}

.section-fv__hero-main {
  display: block;
  font-family: var(--ff-headline);
  font-size: 4.5rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #fff;
  /* 字間調整のため、最後の文字の右マージン分を相殺 */
  text-indent: 0.18em;
}
@media (min-width: 768px) {
  .section-fv__hero-main { font-size: 6rem; }
}
@media (min-width: 1280px) {
  .section-fv__hero-main { font-size: 7rem; }
}

.section-fv__hero-divider {
  display: block;
  width: 1px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 32px 0;
}
@media (min-width: 768px) {
  .section-fv__hero-divider {
    height: 72px;
    margin: 40px 0;
  }
}

.section-fv__hero-tagline {
  display: block;
  font-family: var(--ff-headline);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 2;
  color: #fff;
}
@media (min-width: 768px) {
  .section-fv__hero-tagline {
    line-height: 1.667;
  }
}

/* リードコピー（"ワンフロアで完結する..."）：FV画像の直下に独立配置 */
.section-fv__lead {
  background-color: var(--c-surface-container-low);
  padding: 80px 20px;
  text-align: center;
}
@media (min-width: 768px) { .section-fv__lead { padding: 112px 24px; } }

.section-fv__lead-inner {
  max-width: var(--w-prose);
  margin: 0 auto;
}
.section-fv__lead-eyebrow { margin-bottom: 24px; }

.section-fv__lead-text {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 2.2;
  letter-spacing: 0.08em;
  text-align: justify;
  color: var(--c-on-background);
}
@media (min-width: 768px) {
  .section-fv__lead-text {
    line-height: 2.6;
    text-align: center;
  }
}


/* ============================================================
   7. 参考プラン（section-plan）
   ============================================================ */
.section-plan {
  background-color: var(--c-surface-container-lowest);
}

.section-plan__head {
  text-align: center;
  margin-bottom: 56px;
}
.section-plan__head .eyebrow { margin-bottom: 12px; }
@media (min-width: 768px) { .section-plan__head { margin-bottom: 80px; } }

.section-plan__subhead {
  text-align: center;
  margin-bottom: 48px;
}
@media (min-width: 768px) { .section-plan__subhead { margin-bottom: 64px; } }

.section-plan__subtitle {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-on-background);
  padding-bottom: 20px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--c-outline-variant);
}
@media (min-width: 768px) { .section-plan__subtitle { font-size: 1.875rem; } }

.section-plan__specs {
  max-width: 640px;
  margin: 0 auto;
  background-color: #F5F5F5;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .section-plan__specs {
    flex-direction: row;
    justify-content: center;
  }
  .section-plan__spec + .section-plan__spec {
    border-left: 1px solid rgba(207, 216, 220, 0.6);
  }
}
.section-plan__spec {
  padding: 8px 24px;
  width: 100%;
  font-size: 1rem;
  text-align: center;
}
.section-plan__spec-label {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--c-secondary);
  margin-bottom: 4px;
}
.section-plan__spec-value {
  font-family: var(--ff-body);
  color: var(--c-on-background);
}

/* 各階の床面積：背景・罫線なしの小さめテキストで、specs の補足として表示 */
.section-plan__floor-specs {
  max-width: 640px;
  margin: 18px auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.section-plan__floor-spec {
  font-family: var(--ff-body);
  font-size: 1rem;
}
@media (min-width: 640px) {
  /* 2〜3項目のいずれでも中央揃えで横並び。項目は内容にフィットさせ、
     項目内のテキスト改行は禁止。間隔は gap で確保し、幅が足りない場合のみ
     項目単位で折り返す（テキストの途中改行は起こさない）。 */
  .section-plan__floor-specs {
    max-width: none;
    margin: 24px auto 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
  }
  .section-plan__floor-spec {
    width: auto;
    padding: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

.section-plan__floor {
  position: relative;
  max-width: var(--w-narrow);
  margin: 0 auto 80px;
}
@media (min-width: 768px) { .section-plan__floor { margin-bottom: 112px; } }

/* 間取り図画像ラッパ：縦長／横長／正方形のどの形状でも違和感なく中央配置
   - 強制 aspect-ratio をやめて画像本来の縦横比を維持
   - flex 中央寄せ + 背景色で「フレーム」のような視覚的まとまりを確保
   - min-height で極端に小さな画像が来た場合の最低高を担保
   - max-height で極端に縦長な画像が画面を支配しないように制限 */
.section-plan__floor-image {
  background-color: var(--c-surface-container-low);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  min-height: 360px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .section-plan__floor-image {
    flex-direction: row;
    gap: 40px;
    padding: 48px;
    min-height: 480px;
  }
}
/* 間取り図を picture で出し分ける場合（1枚構成）。max-width で枠内に収める */
.section-plan__floor-image > picture {
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
}
.section-plan__floor-image > img,
.section-plan__floor-image > picture img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  cursor: zoom-in; /* クリックで拡大できることを示す */
}
@media (min-width: 768px) {
  .section-plan__floor-image > img,
  .section-plan__floor-image > picture img {
    max-height: 72vh;
  }
  /* 複数枚（2枚・3枚…）のときは横並びで自動的に均等縮小して必ず枠内に収める。
     min-width:0 で画像が本来の幅より縮む余地を作り、flex-shrink により
     枚数に応じて幅が按分される。1枚（:only-child）は従来どおり中央に原寸表示。 */
  .section-plan__floor-image > img:not(:only-child) {
    min-width: 0;
    flex-shrink: 1;
  }
}

/* 間取り図ライトボックス（クリックで拡大表示）
   .section-plan__floor-image 内の画像をクリックすると JS でオープンする。
   画像が小さく表示される場合でも、フルスクリーンで原寸（srcset最大解像度）を確認できる。 */
.plan-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.95);
  cursor: zoom-out;
}
.plan-lightbox.is-open {
  display: flex;
}
.plan-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}
.plan-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 32px;
  line-height: 1;
  color: #333;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.plan-lightbox__close:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .plan-lightbox { padding: 48px; }
  .plan-lightbox__close { top: 24px; right: 32px; }
}

.section-plan__floor-badge {
  position: absolute;
  bottom: -48px;
  left: -12px;
  background-color: var(--c-primary-container);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--ff-body);
}
@media (min-width: 768px) {
  .section-plan__floor-badge {
    bottom: -48px;
    left: -28px;
    padding: 20px 28px;
  }
}
.section-plan__floor-badge-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 4px;
  opacity: 0.7;
}
@media (min-width: 768px) {
  .section-plan__floor-badge-label { font-size: 10px; }
}
.section-plan__floor-badge-text {
  font-size: 1rem;
  letter-spacing: 0.15em;
  margin: 0;
}
@media (min-width: 768px) {
  .section-plan__floor-badge-text { font-size: 1.25rem; }
}

/* 参考プランから分離した「プランニングのポイント」セクション
   （ポイント内容が間取り図と必ずしも一致しないため独立） */
.section-plan-points {
  background-color: var(--c-surface-container-lowest);
  padding-top: 0; /* 参考プランと連続した見た目を保つ */
}
.section-plan-points .section-plan__head { margin-bottom: 48px; }
@media (min-width: 768px) {
  .section-plan-points .section-plan__head { margin-bottom: 64px; }
}

.section-plan__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .section-plan__points {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

.plan-point {
  display: flex;
  flex-direction: column;
}
.plan-point__image { margin-bottom: 24px; }
.plan-point__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.plan-point__num {
  font-family: var(--ff-body);
  font-size: 1.5rem;
  color: var(--c-secondary);
}
.plan-point__title {
  font-family: var(--ff-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-on-background);
}
@media (min-width: 768px) {
  .plan-point__title {
    font-size: 24px;
  }
}
.plan-point__desc {
  font-size: 1rem;
  line-height: 1.9;
  margin: 0;
}

/* ------------------------------------------------------------
   7-2. 参考プラン 階ごとの構成（2026-09-25 追加）
   HTMLワイヤー（hiraya / oyane / two-story / three-story）に合わせた構成。
   - 平屋：間取り図1枚 ＋ 階ラベル ＋ 写真つきポイント3枚（横並び）
   - 2階建・大屋根：階ごとに「階名＋床面積」→「間取り図｜文字のみポイント」
   - 3階建：階ごとに「階名＋床面積」→「間取り図｜写真つきポイント」
   間取り図の枠（.section-plan__floor-image）とライトボックスは従来のまま。
   ------------------------------------------------------------ */

/* 平屋：1枚構成。バッジの代わりに階ラベルを図の下に置く */
.section-plan__floor--single {
  margin-bottom: 64px;
}
@media (min-width: 768px) { .section-plan__floor--single { margin-bottom: 80px; } }
.section-plan__floor-label {
  font-family: var(--ff-headline);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--c-on-background);
  margin: 20px 0 0;
}
@media (min-width: 768px) { .section-plan__floor-label { font-size: 1.75rem; } }

/* 階ブロック：上罫線で区切る */
.section-plan__floor-block {
  border-top: 1px solid var(--c-outline-variant);
  padding-top: 32px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  .section-plan__floor-block {
    padding-top: 40px;
    margin-top: 64px;
  }
}

/* 階名（左）と床面積（右） */
.section-plan__floor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
@media (min-width: 768px) { .section-plan__floor-head { margin-bottom: 32px; } }
.section-plan__floor-name {
  font-family: var(--ff-headline);
  font-size: 1.75rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--c-on-background);
  margin: 0;
}
@media (min-width: 768px) { .section-plan__floor-name { font-size: 2.125rem; } }
.section-plan__floor-area {
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  line-height: 1.8;
  text-align: right;
  color: var(--c-on-surface-variant);
  margin: 0;
}
.section-plan__floor-area-label {
  display: block;
  letter-spacing: 0.1em;
}

/* 間取り図（左）｜ポイント（右） */
.section-plan__floor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 768px) {
  .section-plan__floor-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
  }
}
/* 階ブロック内の間取り図は従来の余白・最低高を詰めて、右のポイントと高さを揃える */
.section-plan__floor-layout .section-plan__floor-image {
  padding: 20px;
  min-height: 0;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .section-plan__floor-layout .section-plan__floor-image {
    padding: 32px;
    max-width: none;
    margin: 0;
  }
}

/* 文字のみポイント：縦に並べ、罫線で区切る */
.section-plan__floor-points--text {
  display: grid;
  gap: 24px;
}
.section-plan__floor-points--text .plan-point {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-outline-variant);
}
.section-plan__floor-points--text .plan-point:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* 写真つきポイント：2列。1件のときは1列で幅を絞る */
.section-plan__floor-points--photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .section-plan__floor-points--photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .section-plan__floor-points--photos.count-1 {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
}
.section-plan__floor-points--photos .plan-point__image { margin-bottom: 18px; }

/* 階ブロック内のポイント見出しは、番号を上・見出しを下に積む */
.section-plan__floor-points .plan-point__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.section-plan__floor-points .plan-point__num {
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
}
.section-plan__floor-points .plan-point__title { font-size: 18px; }
@media (min-width: 768px) {
  .section-plan__floor-points .plan-point__title { font-size: 20px; }
}


/* ============================================================
   8. 建築実例（section-cases / case-card）
   ============================================================ */
.section-cases {
  background-color: var(--c-surface);
}

.section-cases__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.section-cases__head .eyebrow { margin-bottom: 12px; }
@media (min-width: 768px) {
  .section-cases__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 64px;
  }
}

.section-cases__view-all {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-on-surface-variant);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-outline-variant);
}
.section-cases__view-all:hover { color: var(--c-on-background); }
.section-cases__view-all .icon { font-size: 1rem; }
@media (min-width: 768px) { .section-cases__view-all { display: inline-flex; } }

.section-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .section-cases__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  /* PC（768px以上）では4件目以降を非表示にし、3件のみ表示。
     .swiper-wrapper を display:contents で透過させているため、
     グリッドの直接の子は .swiper-slide。
     スマホ（768px未満）では Swiper でカルーセル表示する。 */
  .section-cases__grid > .swiper-wrapper > .swiper-slide:nth-child(n+4) {
    display: none;
  }
}

/* ------------------------------------------------------------
   建築実例カルーセル（スマホのみ）
   - 768px未満：Swiper としてセンタリング・loop表示
   - 768px以上：通常のCSSグリッドに戻す（Swiperインスタンスは JS で破棄）
   ------------------------------------------------------------ */

/* PC（768px以上）では Swiper のクラスが付いていてもグリッドとして振る舞わせる */
@media (min-width: 768px) {
  .cases-swiper {
    /* Swiper の transform / overflow を打ち消し、グリッドレイアウトを維持 */
    overflow: visible;
  }
  .cases-swiper .swiper-wrapper {
    display: contents; /* wrapper を透過させて .section-cases__grid のグリッドに子要素を流す */
  }
  .cases-swiper .swiper-slide {
    width: auto !important; /* Swiper destroy 後の残留 width を打ち消す保険 */
    height: auto;
  }
  /* PCでは矢印を非表示 */
  .cases-swiper__prev,
  .cases-swiper__next {
    display: none;
  }
}

/* スマホ（767px以下）：Swiper として動作 */
@media (max-width: 767px) {
  /* カルーセル化時は下に矢印スペースを取るため、grid の margin-bottom を相殺 */
  .section-cases__grid.cases-swiper {
    margin: 0 -20px 40px;
  }
  /* 端のスライドが見切れるよう、コンテナ側の左右余白を相殺してビューポート幅で見せる */
  .cases-swiper {
    padding-bottom: 80px; /* 矢印スペース確保 */
    --swiper-navigation-color: #121212;
  }
  .cases-swiper .swiper-slide {
    height: auto;
  }
  /* 矢印（features-swiper と同じデザイン） */
  .cases-swiper .swiper-button-prev,
  .cases-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--c-on-background);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --swiper-navigation-size: 16px;
    transition: background-color 0.3s ease;
    /* スライド領域の下中央に配置（画像と被らない位置） */
    top: auto;
    bottom: 0;
    margin-top: 0;
  }
  .cases-swiper .swiper-button-prev { left: calc(50% - 56px); }
  .cases-swiper .swiper-button-next { right: calc(50% - 56px); }
  .cases-swiper .swiper-button-prev:hover,
  .cases-swiper .swiper-button-next:hover {
    background-color: #fff;
  }
}

.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.case-card__image {
  position: relative;
  margin-bottom: 24px;
}
.case-card__video-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  pointer-events: none;
}
.case-card__video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  background-color: var(--c-primary-container);
  color: #fff;
  padding: 6px 12px;
  font-family: var(--ff-label);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.case-card__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}
.case-card__play-icon .icon {
  width: 64px;
  height: 64px;
  color: #fff;
  stroke-width: 1.2;
}

.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* タグピル（共通） */
.tag-pill {
  display: inline-block;
  font-family: var(--ff-label);
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid var(--c-outline-variant);
  padding: 4px 8px;
  color: var(--c-on-surface-variant);
  white-space: nowrap;
}

.case-card__title {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--c-on-background);
  margin: 0 0 12px;
}
@media (min-width: 768px) { .case-card__title { font-size: 1.25rem; } }

.case-card__foot {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.case-card__view-more {
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-on-background);
  border-bottom: 1px solid var(--c-on-background);
}
.case-card__view-more:hover {
  color: var(--c-secondary);
  border-bottom-color: var(--c-secondary);
}
.case-card__view-more::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 10px;
  margin-bottom: 1px;
}

.section-cases__foot { text-align: center; }

/* アウトライン型ボタン（一覧へ） */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  border: 1px solid var(--c-outline-variant);
  color: var(--c-on-background);
  padding: 20px 40px;
  font-family: var(--ff-label);
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.btn-outline:hover {
  background-color: var(--c-primary-container);
  border-color: var(--c-primary-container);
  color: #fff;
}
.btn-outline .icon { font-size: 1rem; }


/* ============================================================
   9. カタログ請求 CTA バナー（section-cta）
   - 構成：バナー画像（リンク） + 下に「カタログを請求する」ボタン
   ============================================================ */
.section-cta {
  padding: 80px 0;
  background-color: var(--c-surface-container-low);
}
@media (min-width: 768px) { .section-cta { padding: 112px 0; } }

/* バナー画像（リンク） */
.section-cta__banner-link {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(.2, .6, .2, 1);
}
.section-cta__banner-link:hover { opacity: 0.92; }
@media (min-width: 768px) {
  .section-cta__banner-link {
    max-width: 880px;
  }
}

.section-cta__banner-image {
  display: block;
  width: 100%;
  height: auto;
}

/* バナーの下に続く要素（テキスト／ボタン）の余白。
   余白を「バナーの下」ではなく「後続要素の上」に持たせることで、
   テキストとボタンのどちらを隠しても（display:none でもPHPで非出力でも）
   余白が二重になったり消えたりせず、常に1つ分の余白になる。 */
.section-cta__text,
.section-cta__btn-wrap {
  margin-top: 32px;
}
@media (min-width: 768px) {
  .section-cta__text,
  .section-cta__btn-wrap {
    margin-top: 40px;
  }
}

/* バナーとボタンの間に入るテキスト */
.section-cta__text {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: var(--ff-body);
  line-height: 1.9;
  color: var(--c-on-background);
}
@media (min-width: 768px) {
  .section-cta__text { max-width: 880px; }
}

/* ボタン位置：常に中央寄せ */
.section-cta__btn-wrap { text-align: center; }

/* プライマリボタン（カタログ請求） */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--c-primary-container);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 20px 32px;
  min-width: 280px;
  justify-content: center;
}
.btn-primary:hover { background-color: var(--c-on-primary-fixed-variant); }
.btn-primary .icon { transition: transform 0.3s ease; }
.btn-primary:hover .icon { transform: translateX(4px); }
@media (min-width: 768px) {
  .btn-primary {
    font-size: 20px;
    padding: 22px 48px;
    min-width: 360px;
  }
}


/* ============================================================
   10. 平屋の魅力（section-concept）
   - 背景画像 + 緑のグラデーション overlay 上に
     白文字で本文を配置
   ============================================================ */
.section-concept {
  position: relative;
  overflow: hidden;
  background-color: var(--c-primary-container);
  color: #fff;
}
.section-concept__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.section-concept__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17, 45, 18, 0.85),
    rgba(17, 45, 18, 0.7),
    rgba(17, 45, 18, 0.95)
  );
  pointer-events: none;
}

.section-concept__inner {
  position: relative;
  z-index: 10;
  text-align: center;
}

/* eyebrow の色をベージュ系に上書き */
.section-concept__eyebrow {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 24px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-secondary-fixed-dim);
  font-weight: 500;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .section-concept__eyebrow  {
    font-size: 28px;
  }
}

.section-concept__title {
  font-family: var(--ff-headline);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .section-concept__title {
    font-size: 2.25rem;
    margin-bottom: 56px;
  }
}

.section-concept__subtitle {
  font-family: var(--ff-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 48px;
}
@media (min-width: 768px) {
  .section-concept__subtitle {
    font-size: 1.75rem;
    margin-bottom: 48px;
  }
}

.section-concept__image {
  position: relative;
  max-width: var(--w-prose);
  margin: 0 auto 56px;
}
@media (min-width: 768px) { .section-concept__image { margin-bottom: 64px; } }

.section-concept__body {
  max-width: var(--w-prose);
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: #fff;
}
@media (min-width: 768px) {
  .section-concept__body {
    text-align: center;
  }
}
.section-concept__body p { margin: 0; }


/* ============================================================
   11. 外観・暮らし（section-feature / feature-item）
   - 画像左右交互の特集レイアウト
   - 末尾に Life カルーセル（メイン + サムネ連動）
   ============================================================ */
.section-feature {
  background-color: var(--c-surface);
}

.section-feature__block {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .section-feature__block {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

.section-feature__head {
  text-align: center;
  margin-bottom: 64px;
}
.section-feature__head .eyebrow { margin-bottom: 12px; }
@media (min-width: 768px) { .section-feature__head { margin-bottom: 96px; } }

.section-feature__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media (min-width: 768px) { .section-feature__list { gap: 128px; } }

/* 各アイテム（画像 + テキスト） */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 1024px) {
  .feature-item {
    flex-direction: row;
    gap: 80px;
  }
  /* 画像右配置のバリアント */
  .feature-item--reverse { flex-direction: row-reverse; }
}

.feature-item__image { width: 100%; }
@media (min-width: 1024px) { .feature-item__image { width: 60%; } }

.feature-item__body { width: 100%; }
@media (min-width: 1024px) { .feature-item__body { width: 40%; } }

.feature-item__eyebrow {
  display: block;
  font-family: var(--ff-label);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}

.feature-item__title {
  font-family: var(--ff-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-on-background);
  margin: 0 0 24px;
}
@media (min-width: 768px) { .feature-item__title { font-size: 1.875rem; } }

.feature-item__desc {
  font-size: 1rem;
  line-height: 2;
  margin: 0;
}

/* 外観 / 暮らし 間のセパレータ */
.section-feature__divider {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .section-feature__divider { padding: 0 48px; } }

.section-feature__divider-line {
  height: 1px;
  max-width: var(--w-mid);
  margin: 0 auto;
  background-color: rgba(207, 216, 220, 0.5);
}

/* --- Life カルーセル --- */
.life-carousel {
  border-top: 1px solid rgba(207, 216, 220, 0.5);
  margin-top: 64px;
  padding-top: 64px;
  max-width: var(--w-narrow);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .life-carousel {
    margin-top: 96px;
    padding-top: 96px;
  }
}

.life-carousel__head {
  text-align: center;
  margin-bottom: 40px;
}
.life-carousel__head .eyebrow { margin-bottom: 12px; }
@media (min-width: 768px) { .life-carousel__head { margin-bottom: 48px; } }

.life-carousel__subtitle {
  font-family: var(--ff-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-on-background);
  margin: 0;
}
@media (min-width: 768px) { .life-carousel__subtitle { font-size: 2.25rem; } }

.life-main-swiper {
  position: relative;
  margin-bottom: 24px;
}
.life-main-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
}
.life-carousel__main-image { margin-bottom: 20px; }

.life-carousel__caption {
  font-family: var(--ff-body);
  font-size: 12px;
  text-align: center;
  padding: 0 16px;
  margin: 0;
  line-height: 1.7;
  color: var(--c-on-background);
}
@media (min-width: 768px) { .life-carousel__caption { font-size: 0.875rem; } }

/* メインスライダのナビ：白丸ボタン */
.life-main-swiper .swiper-button-prev,
.life-main-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--c-on-background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --swiper-navigation-size: 16px;
  transition: background-color 0.3s ease;
}
.life-main-swiper .swiper-button-prev:hover,
.life-main-swiper .swiper-button-next:hover {
  background-color: #fff;
}
@media (min-width: 768px) {
  .life-main-swiper .swiper-button-prev,
  .life-main-swiper .swiper-button-next {
    width: 48px;
    height: 48px;
  }
}

/* サムネ一覧：CSS Grid（SP 4列 / PC 8列）
   - Swiper の横スクロール仕様を廃止し、改行表示に。
   - メインスライダとは JS で双方向に連動（クリックで切替、
     スライド変更で .is-active を付与）。 */
.life-thumb-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
  .life-thumb-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
  }
}

/* 各サムネ（<button>） */
.life-thumb {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.life-thumb:hover { opacity: 0.75; }
.life-thumb.is-active { opacity: 1; }

/* アクティブサムネの枠線
   - box-shadow: inset は子要素 <img> の背面に隠れて見えないため、
     擬似要素 ::after を画像の前面（z-index 上）に重ねて描画する。
   - border + inset shadow の 2 重リングで、枠と画像の間に
     わずかな余白がある outline-offset の見た目を再現。 */
.life-thumb.is-active .life-thumb-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-primary-container);
  pointer-events: none;
  z-index: 2;
}

.life-thumb-frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.life-thumb-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   12. グッドエイジング（section-tech / Features Swiper）
   - 中央寄せ＋両脇に前後カードがチラ見えする可変カラム表示
   - スライド枚数はブレークポイント別に JS（index.html）で制御
   ============================================================ */
.section-tech {
  overflow: hidden;
  background-color: var(--c-surface);
}

.section-tech__head {
  text-align: center;
  max-width: var(--w-prose);
  margin: 0 auto 48px;
}
.section-tech__head .eyebrow { margin-bottom: 12px; }
@media (min-width: 768px) { .section-tech__head { margin-bottom: 64px; } }

.section-tech__subtitle {
  font-family: var(--ff-headline);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-on-background);
  margin: 0 0 32px;
}
@media (min-width: 768px) { .section-tech__subtitle { font-size: 2.25rem; } }

.section-tech__desc {
  font-size: 1rem;
  line-height: 2;
  margin: 0;
  text-align: left;
}
@media (min-width: 768px) { .section-tech__desc { text-align: center; } }

.features-swiper {
  padding-bottom: 64px;
  --swiper-pagination-color: #112D12;
  --swiper-navigation-color: #121212;
}
/* PC：矢印を画面端から内側へずらす（フルワイドカルーセル用） */
@media (min-width: 1280px) {
  .features-swiper {
    --swiper-navigation-sides-offset: 5%;
  }
}
.features-swiper .swiper-slide { height: auto; }
.features-swiper .swiper-pagination { bottom: 16px; }
.features-swiper .swiper-button-prev,
.features-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--c-on-background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --swiper-navigation-size: 16px;
  transition: background-color 0.3s ease;
}
.features-swiper .swiper-button-prev:hover,
.features-swiper .swiper-button-next:hover {
  background-color: #fff;
}
@media (min-width: 768px) {
  .features-swiper .swiper-button-prev,
  .features-swiper .swiper-button-next {
    width: 48px;
    height: 48px;
  }
}

/* テクノロジーカード */
.tech-card {
  height: 100%;
  background-color: #fff;
  padding: 32px;
  border: 1px solid rgba(207, 216, 220, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .tech-card { padding: 40px; } }

.tech-card__image { margin-bottom: 24px; }
.tech-card__icon {
  display: inline-block;
  color: var(--c-secondary);
  margin-bottom: 16px;
}
.tech-card__icon .icon { width: 36px; height: 36px; stroke-width: 1.25; }
.tech-card__label {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin: 0 0 12px;
}
.tech-card__title {
  font-family: var(--ff-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-on-background);
  margin: 0 0 16px;
}
@media (min-width: 768px) { .tech-card__title { font-size: 1.25rem; } }

.tech-card__desc {
  font-size: 12px;
  line-height: 1.9;
  margin: 0;
}
@media (min-width: 768px) {
  .tech-card__desc {
    font-size: 0.875rem;
  }
}

/* ============================================================
   建築実例カード：リンク化に伴う追加調整
   page-hiraya.php の case-card セクションで
   サムネ / タイトル / タグを <a> 化したことに対する装飾リセット
   ============================================================ */

/* 画像ラッパ：.case-card__image (.ratio) を内包する <a>
   .case-card が flex column のため block 化を明示 */
.case-card__image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* タイトル内のリンク：ブラウザデフォルトの青字・下線を解除 */
.case-card__title a {
  color: inherit;
  text-decoration: none;
}

/* タグピル：<span> → <a> 化に伴う下線解除 */
.tag-pill {
  text-decoration: none;
}


/* ============================================================
   14. モデルハウス誘導（section-models / model-card）
   - 商品ページ末尾。section-tech（surface）の後に続くため白背景で切り替える
   - カード：県名タグ＋展示場名（罫線付き見出し）／画像 3:2／詳細・来場予約の2連ボタン
   - 県名タグは一覧ページの .exhibition__link-area と同値。ボタンは詳細（暗緑）／来場予約（#fad674）の横並び
   - PC：1件＝中央1列（最大640px）／2件＝中央2列（最大1024px）／3件以上＝3列
   - SP（767px以下）：Swiper カルーセル（models-swiper）。初期化はページ末尾のスクリプト
   ============================================================ */
.section-models {
  background-color: var(--c-surface-container-lowest);
}

.section-models__head {
  text-align: center;
  max-width: var(--w-prose);
  margin: 0 auto 48px;
}
.section-models__head .eyebrow { margin-bottom: 12px; }
@media (min-width: 768px) { .section-models__head { margin-bottom: 64px; } }

.section-models__lead {
  margin: 24px 0 0;
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--c-on-surface-variant);
}

/* PC（768px以上）：CSSグリッド。.swiper-wrapper は display:contents で透過 */
@media (min-width: 768px) {
  .section-models__grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    overflow: visible;
  }
  .section-models__grid .swiper-wrapper { display: contents; }
  .section-models__grid .swiper-slide { width: auto !important; height: auto; }
  .models-swiper__prev,
  .models-swiper__next,
  .models-swiper__pagination { display: none; }
  /* 件数が少ない商品（2階建：2件／3階建：1件）は中央寄せで列数を抑える */
  .section-models__grid--pair   { max-width: var(--w-narrow); }
  .section-models__grid--single { max-width: var(--w-text); grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .section-models__grid { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
  .section-models__grid--pair   { grid-template-columns: repeat(2, 1fr); }
  .section-models__grid--single { grid-template-columns: 1fr; }
}

/* スマホ（767px以下）：Swiper カルーセル（models-swiper）
   - スライド幅：画面幅 − 左右48px（左右に24pxの余白＋隣のスライドが16px見える）
   - 矢印：左右の白い余白、アクティブスライドのサムネイル上下中央（JSが --models-arrow-top を更新）
   - 先頭／末尾では該当方向の矢印を非表示（loop なし・swiper-button-disabled）
   - ドット：カルーセル直下 */
@media (max-width: 767px) {
  .section-models__grid.models-swiper {
    margin: 0 -20px;
    --swiper-navigation-color: #121212;
    --swiper-pagination-color: var(--c-primary-container);
    --swiper-pagination-bullet-inactive-color: var(--c-outline-variant);
    --swiper-pagination-bullet-inactive-opacity: 1;
  }
  .models-swiper .swiper-slide {
    width: calc(100% - 96px);
    height: auto;
  }
  .models-swiper .swiper-button-prev,
  .models-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    margin-top: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--c-on-background);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    --swiper-navigation-size: 14px;
    top: var(--models-arrow-top, 40%);
    transform: translateY(-50%);
    z-index: 11;
  }
  .models-swiper .swiper-button-prev { left: 6px; }
  .models-swiper .swiper-button-next { right: 6px; }
  .models-swiper .swiper-button-disabled { display: none; }
  .models-swiper .swiper-pagination {
    position: static;
    margin-top: 24px;
    line-height: 0;
  }
  .models-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 5px !important;
  }
  /* 1件のみ（3階建）は矢印・ドットを出さない */
  .section-models__grid--single .swiper-button-prev,
  .section-models__grid--single .swiper-button-next,
  .section-models__grid--single .swiper-pagination { display: none; }
}

.model-card {
  display: flex;
  flex-direction: column;
}

/* 見出し行：県名タグ＋展示場名、下に細い罫線 */
.model-card__head {
  display: flex;
  align-items: flex-start;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-outline-variant);
}
@media screen and (max-width: 767px) {
  .model-card__head { flex-direction: column; }
}

/* 県名タグ：モデルハウス一覧の .exhibition__link-area と同値 */
.model-card__pref {
  width: 90px;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
  margin-right: 20px;
  margin-top: 4px;
  text-align: center;
  background: #112D12;
  color: #ffffff;
  border-radius: 5px;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .model-card__pref {
    border-radius: 3px;
    font-size: 10px;
    margin: 0 0 6px;
    width: auto;
    min-width: 50px;
    padding: 3px 4px 2px;
  }
}

.model-card__name {
  margin: 0;
  font-family: var(--ff-headline);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-on-background);
}
@media (min-width: 768px) { .model-card__name { font-size: 1.375rem; } }

.model-card__image { display: block; margin-bottom: 20px; }
.model-card__image:hover > img { transform: scale(1.04); }

/* ボタン行：詳細（暗緑）と来場予約（黄）を横並び・同形 */
.model-card__btns {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.model-card__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
.model-card__btn .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.model-card__btn:hover .icon { transform: translateX(4px); }
@media (max-width: 767px) {
  .model-card__btn { font-size: 12px; padding: 10px 8px; gap: 6px; letter-spacing: 0; }
}

.model-card__btn--detail {
  background-color: var(--c-primary-container);
  color: #fff;
}
.model-card__btn--detail:hover { background-color: var(--c-on-primary-fixed-variant); }

.model-card__btn--reserve {
  background-color: #fad674;
  color: #121212;
}
.model-card__btn--reserve:hover { background-color: #f3c84f; }

.section-models__foot {
  text-align: center;
  margin-top: 56px;
}
@media (min-width: 768px) { .section-models__foot { margin-top: 72px; } }