/*
Theme Name: jigsaw
Theme URI: https://jigsaw-house.jp/
Author: jigsaw
Description: jigsaw 住宅サイト カスタムテーマ
Version: 2.1.22
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: jigsaw
*/

/* ------------ Reset / Base ------------ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.7;
  letter-spacing: 0.04em;
  font-size: 15px;
  overflow-x: hidden; /* 全幅タイトルのvw計算による横はみ出しを抑止 */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:root {
  /* テーマカラー: カードのワイプアニメーションと同じ青 */
  --navy: #162789;
  --navy-deep: #101d66;
  --navy-light: #3245b0;
  --beige: #f4f2ec;
  --ink: #222;
  --ink-soft: #555;
  --line: #e5e3dc;
  --accent: #c53d43;
}

.container { max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* ------------ Section Title ------------ */
.sec-title {
  display: flex;
  /* 英字が長いページ(CONTACT THANKS 等)で日本語サブが画面右にはみ出すため、収まらなければ折り返す */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  /* 英語タイトルをコンテナから飛び出して画面左端へ寄せる */
  margin: 0 0 36px calc(50% - 50vw);
  padding-left: clamp(24px, 4vw, 56px);
}
.sec-title__en {
  font-family: "Jost",sans-serif; /* 英語タイトルはJostに戻す */
  font-weight: 600;
  /* 長い英字タイトル(HOUSE RENOVATION等)がワイド画面で右に余白を残さないよう上限を引き上げる */
  font-size: clamp(80px, 10vw, 150px);
  letter-spacing: 0.06em;
  color: var(--navy);
  line-height: 1;
  /* Jost のキャップハイト上の内部余白(実測0.105em)を打ち消して
     ブロック最上部に合わせ、さらに5px上へ */
  margin-top: calc(-0.105em - 5px);
}
.sec-title__ja {
  flex: 0 0 auto;   /* 押し潰されて文字が枠からはみ出すのを防ぐ */
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
}
.sec-title__amp { font-size: 0.55em; margin: 0 0.12em; vertical-align: 0.08em; }
.sec-title__br { display: none; } /* PCでは改行しない(スマホのみ) */
.sec--dark .sec-title__en { color: #fff; }
.sec--dark .sec-title__ja { color: rgba(255,255,255,.7); }

/* ------------ Buttons ------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 34px 13px 24px;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
/* 右向きの三角形を、ボタン右端寄り・フォントより小さく配置 */
.btn::after {
  content: "▶";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}
/* 「一覧」系ボタン: 薄い背景セクション上なので青(紺)ボタン */
.btn--block {
  display: flex;
  width: 100%;
  max-width: 320px;
  margin: 36px auto 0;
}
.btn--filled { min-width: 220px; }
.btn--ghost-white { color: #fff; }

/* ------------ Header ------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background .3s;
}
.site-header.is-scrolled {
  background: rgba(22,39,137,.92); /* --navy #162789 の透過 */
  backdrop-filter: blur(6px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}
.site-header__logo { display: block; line-height: 0; transform: translateY(-3px); } /* 視覚的に中央よりやや上へ */
.site-header__logo img { height: 37.4px; width: auto; } /* 34px + 10% */
.site-header__right { display: flex; align-items: center; gap: 24px; }
.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav__list { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; font-family: "Noto Sans JP","Hiragino Sans","Meiryo",sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.04em; }
.site-nav__list a { color: #fff; }
.site-nav__cta {
  background: #fff;
  color: var(--navy);
  padding: 9px 20px;
  font-family: "Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
}
/* ホバー: 日本語が上へずれ、下から英語がフェードで出現（両方表示） */
.site-nav__list a,
.site-nav__cta {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  line-height: 1.15;
}
.site-nav__list a { height: 46px; }
.site-nav__cta { height: 46px; box-sizing: border-box; }
.site-nav__ja { display: block; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.site-nav__en {
  position: absolute; left: 0; right: 0; bottom: 7px;
  text-align: center; white-space: nowrap;
  font-family: "Jost","Noto Sans",sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .16em;
  opacity: 0; transform: translateY(9px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.site-nav__list a:hover .site-nav__ja,
.site-nav__cta:hover .site-nav__ja { transform: translateY(-9px); }
.site-nav__list a:hover .site-nav__en,
.site-nav__cta:hover .site-nav__en { opacity: 1; transform: translateY(0); }
/* ハンバーガー */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 30px;
  height: 22px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform .3s, opacity .3s, top .3s;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 10px; }
.nav-toggle__bars span:nth-child(3) { top: 20px; }
.nav-toggle.is-active .nav-toggle__bars span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle__bars span:nth-child(3) { top: 10px; transform: rotate(-45deg); }
.nav-toggle__label {
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #fff;
}
/* ドロワー */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(22,39,137,.97);
  backdrop-filter: blur(4px);
  display: flex;
  /* 項目数が多く画面より高くなる場合があるため center にしない
     （center + はみ出しは上端が切れて操作不能になる）。
     flex-start ＋ 子の margin:auto で「収まる時は中央／溢れる時は先頭から」にする。 */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;              /* 溢れたらドロワー内でスクロール */
  overscroll-behavior: contain;  /* 背面ページへスクロールを伝播させない */
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; }
.nav-drawer__nav {
  width: 100%;
  max-width: 560px;
  padding: clamp(86px, 11vh, 110px) clamp(24px, 4vw, 48px) 48px;
  margin: auto;                  /* 収まる時だけ上下中央に */
  column-gap: 48px;
}
/* 幅に余裕がある画面はカテゴリー(グループ)を2〜3カラムに流し込む（読み順は縦）*/
@media (min-width: 720px)  { .nav-drawer__nav { columns: 2; max-width: 860px; } }
@media (min-width: 1120px) { .nav-drawer__nav { columns: 3; max-width: 1160px; } }

.nav-drawer__group {
  break-inside: avoid;
  margin-bottom: 30px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.nav-drawer.is-open .nav-drawer__group { opacity: 1; transform: none; }
.nav-drawer.is-open .nav-drawer__group:nth-child(1) { transition-delay: .06s; }
.nav-drawer.is-open .nav-drawer__group:nth-child(2) { transition-delay: .12s; }
.nav-drawer.is-open .nav-drawer__group:nth-child(3) { transition-delay: .18s; }
.nav-drawer.is-open .nav-drawer__group:nth-child(4) { transition-delay: .24s; }
.nav-drawer.is-open .nav-drawer__group:nth-child(5) { transition-delay: .30s; }

/* カテゴリー見出し */
.nav-drawer__head {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.28);
}
.nav-drawer__head-en {
  font-family: "Jost","Noto Sans",sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: .12em; color: #fff;
}
.nav-drawer__head-ja { font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .06em; }

/* サブリンク */
.nav-drawer__sub { list-style: none; margin: 0; padding: 0; }
.nav-drawer__link {
  display: inline-flex; align-items: center;
  padding: 8px 2px; color: rgba(255,255,255,.86);
  font-size: 14px; letter-spacing: .02em; text-decoration: none;
  transition: color .2s, padding-left .2s;
}
.nav-drawer__link::before {
  content: ""; width: 5px; height: 1px; margin-right: 10px; flex: 0 0 auto;
  background: rgba(255,255,255,.5); transition: width .2s, background-color .2s;
}
.nav-drawer__link:hover { color: #fff; padding-left: 4px; }
.nav-drawer__link:hover::before { width: 12px; background: #fff; }
/* メニューの王冠マーク（未来基準の性能・安心の保証体制） */
.nav-drawer__crown { width: 18px; height: 14px; margin-left: 8px; flex: 0 0 auto; }

/* お問い合わせ CTA（全カラム幅で下部に）*/
.nav-drawer__contact {
  column-span: all;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 420px; margin: 6px auto 0; padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.55); color: #fff; text-decoration: none;
  transition: background-color .2s, color .2s;
  opacity: 0; transition: opacity .5s ease .34s, background-color .2s, color .2s;
}
.nav-drawer.is-open .nav-drawer__contact { opacity: 1; }
.nav-drawer__contact:hover { background: #fff; color: var(--navy); border-color: #fff; }
.nav-drawer__contact-ja { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.nav-drawer__contact-en { font-family: "Jost","Noto Sans",sans-serif; font-size: 12px; letter-spacing: .14em; opacity: .8; }
/* ドロワー展開中はページスクロールを固定し、上部ナビ(3項目)とCTAを隠す */
body.nav-open { overflow: hidden; }
body.nav-open .site-nav,
body.nav-open .site-nav__cta { opacity: 0; visibility: hidden; }

/* ------------ Hero ------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  background: var(--navy-deep, #101d66);
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ロゴ+コピーを「画面上部〜カテゴリボード上端」の縦中央に置く:
   ボードが動画に重なる分(=18.75%+10.5px)を下パディングで確保して上へ寄せる */
.hero .container { position: relative; z-index: 1; width: 100%; padding-bottom: calc(18.75% - 24px); }
.hero__logo {
  height: clamp(88px, 10vw, 128px);
  width: auto;
  margin-bottom: 24px;
  /* 見出しのtext-shadowと同じ3層の黒い光彩 */
  filter: drop-shadow(0 0 12px rgba(0,0,0,.6))
          drop-shadow(0 0 32px rgba(0,0,0,.4))
          drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transform: translate(3px, -10px); /* 位置の微調整 */
}
.hero__scroll {
  position: absolute;
  left: 34px;
  bottom: 36px;
  z-index: 3; /* カテゴリカード(z-index:2)より手前 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.hero__scroll-text {
  writing-mode: vertical-rl;
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-shadow: 0 0 10px rgba(0,0,0,.55);
}
.hero__scroll-line {
  width: 2px;
  height: 96px;
  background: rgba(255,255,255,.55); /* ベースは白のライン */
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--navy-light); /* 流れるハイライトは青 */
  transform: translateY(-100%);
  /* 白→青(0-32%)→白(32-64%)まで流れ、その後 約1秒(64-100%)休止 */
  animation: hero-scroll-flow 2.8s linear infinite;
}
@keyframes hero-scroll-flow {
  0%   { transform: translateY(-100%); } /* 白 */
  32%  { transform: translateY(0); }     /* 白→青 完了(全面青) */
  64%  { transform: translateY(100%); }  /* 青→白 完了(全面白) */
  100% { transform: translateY(100%); }  /* 約1秒の休止 */
}
/* カテゴリボードがFVに食い込む幅(≒901〜1320px)では、左下のSCROLLが
   1枚目の「注文住宅」に重なる。この範囲だけ画面右＝4枚目「マンションリノベ」の
   上へ逃がす。食い込み量 = 18.75% × コンテナ幅 − 13.5px + 24px（.cats__grid の margin-top）。 */
@media (min-width: 901px) and (max-width: 1320px) {
  .hero__scroll {
    left: auto;
    right: 34px;
    bottom: calc(0.1875 * min(1200px, 100vw - 48px) + 30px);
  }
}
.hero__title {
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  text-shadow: 0 0 12px rgba(0,0,0,.6), 0 0 32px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
}
.hero__title em {
  font-style: normal;
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
}
.hero__num {
  font-family: "Jost","Noto Sans",sans-serif; /* タイトルと同じ英数字フォント */
  font-size: 1.3em;
  line-height: 1; /* 行の高さを変えずに数字だけ大きく */
}

/* ------------ 3カテゴリカード ------------ */
.cats {
  background: #fff;
  padding: 0 0 130px;
  color: var(--ink);
}
.cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  /* 画像の高さ + 下余白24px ぶんだけFV(100svh)の動画に重ねる:
     画像高 = (コンテナ幅 - gap*3) / 4 * 3/4 = 18.75% - 13.5px */
  margin-top: calc(-18.75% + 13.5px - 24px);
}
.cat-card {
  color: var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  container-type: inline-size; /* cqwで画像高さ(=75cqw)を参照できるように */
}
.cat-card__img {
  position: relative;
  aspect-ratio: 4/3;
  background: #ddd center/cover no-repeat;
  border: 4px solid #fff;
}
/* アニメーション前は画像に薄い青のオーバーレイ。展開時にフェードアウト */
.cat-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22,39,137,.28);
  transition: opacity .6s ease;
}
.cats__grid.is-open .cat-card__img::after { opacity: 0; }
/* 本文ブロック(灰色背景の領域)。overflow:visibleでキャプションが画像上に出られる */
.cat-card__body {
  background: transparent; /* 初期は透明(動画が覗く) */
  padding-bottom: 22px;
  flex: 1;
  position: relative;
  overflow: visible;
}
.cats__grid.is-open .cat-card__body {
  background: #f2f2f2;
  transition: background 0s linear .63s;
}
/* 青ワイプ層: 灰色背景「全体」を覆う。body内にクリップ */
.cat-card__wipe {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.cat-card__wipe::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: var(--navy);
  transform: translate(-80%, 80%) rotate(45deg);
}
.cats__grid.is-open .cat-card__wipe::before {
  animation: cat-card-sweep 1.4s ease-in-out forwards;
}
/* コンテンツはワイプの上に重ねる */
.cat-card__caption,
.cat-card__desc,
.cat-card__more { position: relative; z-index: 1; }
/* EN/JAキャプション: 初期は画像の縦中央に重なり、他アニメ完了後に本文位置へ移動 */
.cat-card__caption {
  padding: 16px 12px 8px;
  /* 画像高さ(75cqw)の半分だけ余分に持ち上げて画像中央に配置 */
  transform: translateY(calc(-50% - 37.5cqw));
  /* transition は base に置かない。
     base に置くと cqw(コンテナクエリ単位)が初期描画後に解決される瞬間に
     transition が誤発火し、読み込み時に「文字が下から上がる」アニメが出てしまう。
     展開(.is-open)側にだけ定義すれば、初期表示は一発で配置され、
     展開操作したときだけ本文位置へ降りる。 */
}
.cats__grid.is-open .cat-card__caption {
  transform: translateY(0);
  /* ワイプ等(1.4s)完了後に、速く動き出してゆっくり止まる(強めのease-out) */
  transition: transform .85s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}
/* desc/button: 青いワイプ(1.4s)が終わってから、文字移動と同時にフェード表示 */
.cat-card__desc,
.cat-card__more { opacity: 0; }
.cats__grid.is-open .cat-card__desc { opacity: 1; transition: opacity .5s ease 1.4s; }
.cats__grid.is-open .cat-card__more { opacity: 1; transition: opacity .5s ease 1.4s; }
/* 左下から入り、右上へ抜ける */
@keyframes cat-card-sweep {
  0%   { transform: translate(-80%, 80%) rotate(45deg); }
  45%  { transform: translate(0, 0) rotate(45deg); }
  55%  { transform: translate(0, 0) rotate(45deg); }
  100% { transform: translate(80%, -80%) rotate(45deg); }
}
.cat-card__en {
  font-family: "Jost","Noto Sans",sans-serif; /* タイトルと同じ英語フォント */
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: #fff; /* 初期は画像の上=白文字 */
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  margin: 0 0 2px;
  /* transition は base に置かない(読み込み時に色が誤アニメして
     白になる前に暗色で表示される不具合を防ぐ)。展開側にのみ定義。 */
}
.cat-card__ja {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
  margin: 0;
}
/* 展開後は本文位置に収まり、濃色にフェード */
.cats__grid.is-open .cat-card__en {
  color: var(--ink-soft);
  text-shadow: none;
  transition: color .3s ease 1.9s, text-shadow .3s ease 1.9s;
}
.cats__grid.is-open .cat-card__ja {
  color: var(--navy);
  text-shadow: none;
  transition: color .3s ease 1.9s, text-shadow .3s ease 1.9s;
}
.cat-card__desc {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 0 22px;
  margin: 0 0 16px;
  text-align: center;
}
/* カテゴリカードの「詳しくはこちら」もボタン化 */
.cat-card__more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82%;
  max-width: 220px;
  margin: 4px auto 0;
  padding: 11px 30px 11px 18px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cat-card__more::after {
  content: "▶";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}

/* カテゴリーボード: ホバーで青(ネイビー)に反転し、ボタンもホバー状態(白反転)にする。
   展開演出の完了後(.is-ready)にだけ効かせ、演出の遅延トランジションと干渉させない。
   PC(展開あり)のみ。タッチ端末はホバーしないため対象外。 */
@media (min-width: 901px) {
  /* .is-ready の間だけ、ホバー用に速いトランジションへ上書き（is-open より後段=同詳細度で勝つ）*/
  .cats__grid.is-ready .cat-card__body { transition: background .3s ease; }
  .cats__grid.is-ready .cat-card__en,
  .cats__grid.is-ready .cat-card__ja,
  .cats__grid.is-ready .cat-card__desc { transition: color .25s ease; }
  .cats__grid.is-ready .cat-card__img::after { transition: opacity .3s ease; }

  .cats__grid.is-ready .cat-card:hover .cat-card__body { background: var(--navy); }
  .cats__grid.is-ready .cat-card:hover .cat-card__en   { color: rgba(255,255,255,.85); text-shadow: none; }
  .cats__grid.is-ready .cat-card:hover .cat-card__ja   { color: #fff; text-shadow: none; }
  .cats__grid.is-ready .cat-card:hover .cat-card__desc { color: rgba(255,255,255,.92); }
  .cats__grid.is-ready .cat-card:hover .cat-card__img::after { opacity: .16; }
  /* 「詳しくはこちら」ボタンもホバー状態（白地・紺文字へ斜め反転）にする */
  .cats__grid.is-ready .cat-card:hover .cat-card__more .jg-flip {
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% + 48px) 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, calc(100% + 48px) 100%, 0 100%);
  }
}

/* ------------ Section common ------------ */
.section { padding: 0 0 140px; } /* 見出しをブロック上端につけるため上パディングなし */
.section--beige { background: var(--beige); }
.section--bluegray { background: #d5deea; }
.section--navy { background: var(--navy); color: #fff; }

/* ------------ カード共通: ラベル付きスペック表 ------------ */
.card-specs { margin: 0; }
.card-specs__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  transition: border-color .3s ease; /* カード反転と同時に枠線も反転 */
}
.card-specs__row dt {
  flex: 0 0 4.5em;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--navy);
  transition: color .3s ease; /* カード反転と同時に見出し色も反転 */
}
.card-specs__row dd { flex: 1; margin: 0; transition: color .3s ease; }

/* ------------ EVENT ------------ */
.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.event-card {
  background: #fff;
  padding: 14px 14px 22px;
  position: relative;
  transition: background .3s, color .3s;
}
.event-card__cat {
  position: absolute;
  top: 0;  /* 白カードの左上角に余白なしで配置 */
  left: 0;
  z-index: 1;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 7px 14px;
}
.event-card__img { display: block;
  aspect-ratio: 4/3;
  background: #ddd center/cover no-repeat;
  margin-bottom: 18px;
}
.event-card__title {
  font-size: 17px; /* 指摘: タイトルをもう少し大きく */
  font-weight: 700;
  line-height: 1.7;
  min-height: calc(1.7em * 2); /* タイトルは常に2行分の高さを確保 */
  margin: 0 0 16px;
}
.event-card__format {
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 7px 0;
  margin: 0 0 12px;
  transition: background .3s, color .3s;
}
/* ホバーで青背景・白文字に反転、写真がやや大きく */
.event-card:hover {
  background: var(--navy);
  color: #fff;
}
.event-card:hover .event-card__format { background: #fff; color: var(--navy); }
.event-card:hover .card-specs__row { border-color: rgba(255,255,255,.35); }
.event-card:hover .card-specs__row dt { color: #fff; }

/* ------------ WORKS ------------ */
.works-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.works-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  /* ラベル幅に合わせた1行チップにし、多い/長い時はコンテナ側(flex-wrap)で
     複数行に折り返す（COLUMN等はカテゴリ名が長く3行程度になる）。
     white-space:nowrap でボタン内での文字折返しを防ぐ。 */
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  border-radius: 0;
  text-align: center;
  /* カテゴリーボード同様、ナナメのラインが入りながら背景＋文字が反転（.jg-flip 方式）*/
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .4s ease;
}
.works-tab .jg-flip { background: var(--navy); color: #fff; } /* 反転色（薄背景セクション用）*/
.works-tab:hover { border-color: var(--navy); }
.works-tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.works-tab.is-active .jg-flip { display: none; } /* 選択中は反転演出しない */
/* 規格住宅は <button>。他のタブ(<a>)と同じく .works-tab の罫線を残す（border:0 だと規格住宅だけ枠が無かった） */
.works-tab--has-sub { cursor: pointer; }
.works-tab--has-sub::after { content: "＋"; margin-left: 8px; font-size: .82em; line-height: 1; opacity: .7; }
.works-tab--has-sub[aria-expanded="true"]::after { content: "−"; }
/* スタッフブログの絞込み: 顔写真アイコン＋氏名（アイコンはボタン左） */
.works-tab--staff { justify-content: flex-start; gap: 8px; padding-left: 6px; padding-right: 18px; letter-spacing: .06em; }
.works-tab--staff .jg-flip { justify-content: flex-start; gap: 8px; }
.works-tab__avatar { width: 24px; height: 24px; border-radius: 50%; background: #dfe2ea center / cover no-repeat; flex: 0 0 auto; }
.works-tab__avatar.is-empty { background: var(--navy); }
/* 規格住宅の下に出る 規格商品(workcat) 絞り込み。多段の登場アニメ:
   (1) grid-template-rows: 0fr→1fr で縦の表示スペースを作る
   (2) グレー枠(__pad::before)が中央から左右へ広がる（背景だけ拡大＝ボタンは歪めない）
   (3) 各ボタン/ラベルがグレー枠の下端から少し持ち上がり、順に表示される */
.works-subtabs {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 900px;
  margin: -14px auto 0;
  visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.22, .61, .36, 1),
              margin-bottom .28s cubic-bezier(.22, .61, .36, 1),
              visibility .28s;
}
.works-subtabs.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  margin-bottom: 34px;
}
.works-subtabs__inner {
  overflow: hidden; /* (3)下端からの登場をクリップ + grid行を0へ折りたたむ */
  min-height: 0;
}
.works-subtabs__pad {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 18px;
}
/* (2) グレー枠: 中央から左右へ広がる。背景だけを scaleX するのでボタンは歪まない。
   ディレイを確実に効かせるため @keyframes を使用（開く=演出／閉じる=即座に戻る）。 */
.works-subtabs__pad::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: rgba(22,39,137,.06);
  transform: scaleX(0);
  transform-origin: center;
}
.works-subtabs.is-open .works-subtabs__pad::before {
  animation: works-sub-frame .26s cubic-bezier(.2, .7, .2, 1) .1s forwards;
}
@keyframes works-sub-frame { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* (3) 各ボタン/ラベル: 枠の下端から持ち上がって順に登場（frame展開後に開始・スタッガ）*/
.works-subtabs__pad > * {
  position: relative; z-index: 1;
  opacity: 0;
  transform: translateY(20px);
}
.works-subtabs.is-open .works-subtabs__pad > * {
  animation: works-sub-rise .3s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: .1s; /* 枠の展開開始(.1s)とほぼ同時 */
}
@keyframes works-sub-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.works-subtabs.is-open .works-subtabs__pad > :nth-child(2) { animation-delay: .14s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(3) { animation-delay: .18s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(4) { animation-delay: .22s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(5) { animation-delay: .26s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(6) { animation-delay: .30s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(7) { animation-delay: .34s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(8) { animation-delay: .38s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(9) { animation-delay: .42s; }
.works-subtabs.is-open .works-subtabs__pad > :nth-child(n+10) { animation-delay: .46s; }
.works-subtabs__label {
  width: 100%; text-align: center; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--navy);
}
.works-tab--sub { padding: 6px 16px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .works-subtabs { transition-duration: .2s; }
  .works-subtabs.is-open .works-subtabs__pad::before,
  .works-subtabs.is-open .works-subtabs__pad > * { animation-duration: .2s; animation-delay: 0s; }
}
[hidden] { display: none !important; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work-card {
  background: #fff;
  position: relative;
  overflow: hidden; /* ホバー時の写真拡大をカード内にクリップ */
  transition: background .3s, color .3s;
}
.work-card__cats {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  gap: 6px;
}
.work-card__cat {
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 6px 12px;
}
.work-card__cat--sub { background: #fff; color: var(--ink); }
.work-card__img { display: block;
  aspect-ratio: 4/3;
  background: #ddd center/cover no-repeat;
  transition: transform .35s ease;
}
.work-card__body { padding: 18px 20px 24px; }
.work-card__title {
  font-size: 17px; /* 指摘: タイトルをもう少し大きく */
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 12px;
}
/* ホバーで青背景・白文字に反転、写真がやや大きく */
.work-card:hover {
  background: var(--navy);
  color: #fff;
}
.work-card:hover .work-card__img { transform: scale(1.04); }
.work-card:hover .card-specs__row { border-color: rgba(255,255,255,.35); }
.work-card:hover .card-specs__row dt { color: #fff; }

/* ------------ VOICE ------------ */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.voice-card {
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: background .3s, color .3s;
}
/* 指摘: スクエアだと写真のトリミングが厳しいため 4:3 に変更 */
.voice-card__img { display: block; aspect-ratio: 4/3; background: #ccd center/cover no-repeat; margin-bottom: 0; transition: transform .35s ease; }
.voice-card:hover .voice-card__img { transform: scale(1.04); }
.voice-card__body { padding: 14px 16px 18px; }
.voice-card__title { font-size: 15px; font-weight: 700; margin: 0; }
.voice-card__sub { font-size: 14px; color: var(--ink-soft); margin: 4px 0 12px; transition: color .3s ease; }
/* ホバーで青背景・白文字に反転（EVENT/WORKSと同様のアクション）*/
.voice-card:hover { background: var(--navy); color: #fff; }
.voice-card:hover .voice-card__sub { color: rgba(255,255,255,.85); }
.voice-card:hover .card-specs__row { border-color: rgba(255,255,255,.35); }
.voice-card:hover .card-specs__row dt { color: #fff; }

/* ホバーで色反転するカード(EVENT/WORKS/VOICE)は、項目内全体をクリック可能にする。
   タイトルのリンクを stretched-link 化し、::after をカード全面へ広げる（HTMLは既存のまま）。
   カードは position:relative、間に positioned 要素が無いので ::after はカードに広がる。 */
.event-card__title a::after,
.work-card__title a::after,
.voice-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3; /* カテゴリタグ(z-index:1)や画像リンクより前面 */
}
/* 全面がリンクになるので、カードのどこでもポインタを手の形に */
.event-card, .work-card, .voice-card { cursor: pointer; }

/* ------------ CONCEPT (アコーディオン) ------------ */
.concept { padding: 0 0 140px; }
.concept-acc { border-top: 1px solid rgba(255,255,255,.6); }
.concept-acc__item { border-bottom: 1px solid rgba(255,255,255,.6); }
.concept-acc__head {
  display: flex;
  align-items: center;
  gap: 20px;              /* 指摘: 閉じた時の間延びを解消 */
  width: 100%;
  /* 左右余白を拡大（罫線は .concept-acc__item 側なので位置は不変）。
     本文(.concept-acc__inner)と同じ水平値にして番号と画像左端を揃える。 */
  padding: 15px clamp(20px, 3.5vw, 48px);
  background: none;
  border: 0;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.concept-acc__num {
  font-family: "Jost","Noto Sans",sans-serif; /* CONCEPT見出しと同じ英数字フォント */
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.04em;
}
.concept-acc__title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.concept-acc__toggle {
  flex: 0 0 auto;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  transition: transform .3s;
}
.concept-acc__item.is-open .concept-acc__toggle { transform: rotate(180deg); }
/* 開閉アニメーション: grid-template-rows 0fr <-> 1fr */
.concept-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s ease;
}
.concept-acc__item.is-open .concept-acc__body { grid-template-rows: 1fr; }
.concept-acc__inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* 画像側を約110%幅に */
  gap: 44px;
  align-items: center; /* 右カラムのテキスト・ボタンを画像に対し上下中央に */
  /* 左右余白は開閉に関わらず常時適用（開いた時だけ付けると、クリック時に内側の
     実効幅→画像/列幅が瞬間的に変わってしまうため）。縦余白のみ .is-open で付ける
     （縦を常時入れると閉じても高さが残り 0fr に畳めない）。 */
  padding: 0 clamp(20px, 3.5vw, 48px);
  /* 縦余白(.is-open で 0↔8/44px)を高さアニメと同速でトランジションし、
     クリック時に画像が一瞬上下にずれるのを防ぐ。 */
  transition: padding .5s ease;
}
.concept-acc__item.is-open .concept-acc__inner { padding-top: 8px; padding-bottom: 44px; }
.concept-acc__img {
  /* 幅110%・高さ75%相当の横長比率(旧4:3比 → 約1.96:1) */
  aspect-ratio: 1.96;
  background: #fff center/cover no-repeat;
}
.concept-acc__text p {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2.1;
}
.concept-acc__btn {
  position: relative;
  display: block;
  background: #fff;
  color: var(--navy);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 10px 36px;
}
.concept-acc__btn-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}

/* ------------ OUR TEAM ------------ */
.team-marquee { overflow: hidden; margin-bottom: 64px; }
.team-track {
  display: flex;
  width: max-content;
  /* 連続でなく数秒おきに1枚ずつ動く(ステップ式・左から右へ) */
  animation: team-step 44s ease-in-out infinite;
}
.team-track:hover { animation-play-state: paused; }
/* 11枚=1セット分(-50%)を11ステップで移動。各ステップ約4s(ホールド→スライド) */
@keyframes team-step {
  0%,    6.4% { transform: translateX(-50%); }
  9.1%, 15.5% { transform: translateX(-45.455%); }
  18.2%, 24.6% { transform: translateX(-40.909%); }
  27.3%, 33.7% { transform: translateX(-36.364%); }
  36.4%, 42.8% { transform: translateX(-31.818%); }
  45.5%, 51.9% { transform: translateX(-27.273%); }
  54.5%, 60.9% { transform: translateX(-22.727%); }
  63.6%, 70%   { transform: translateX(-18.182%); }
  72.7%, 79.1% { transform: translateX(-13.636%); }
  81.8%, 88.2% { transform: translateX(-9.091%); }
  90.9%, 97.3% { transform: translateX(-4.545%); }
  100% { transform: translateX(0); }
}
.team-card {
  /* 同時に見える枚数を約4枚に（旧220pxは約6枚）。画面幅に応じて拡縮 */
  width: clamp(280px, 21vw, 360px);
  flex: 0 0 auto;
  margin-right: clamp(32px, 3vw, 52px);
}
.team-card__img { display: block;
  aspect-ratio: 1/1;
  background: #ccc center/cover no-repeat;
  margin-bottom: 12px;
}
.team-card__role {
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}
.team-card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.team-card__link {
  position: relative;
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 20px;
  border-bottom: 1px solid #fff;
}
.team-card__link + .team-card__link { margin-top: 10px; }
.team-card__arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}
.team-btn {
  position: relative;
  display: block;
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  color: var(--navy);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 10px 36px;
}
.team-btn__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}

/* ------------ MEDIA & COLUM ------------ */
.sec-title--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 80px;
}
.media-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.media-head__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--navy);
}
.media-head__icon svg { width: 100%; height: 100%; display: block; }
.media-head__title {
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.media-more {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 7px 30px 7px 18px;
  transition: opacity .2s;
}
.media-more:hover { opacity: .82; }
.media-more__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}
/* YouTube メイン動画 */
/* MEDIAセクション: 背景に淡い色を敷き、ブロックは白で区別(境界線なし) */
.media { background: #d5deea; }
.yt-main {
  display: block;
  background: #fff;
  margin-bottom: 18px;
  transition: background .3s, color .3s;
}
.yt-main__thumb { aspect-ratio: 16/9; background: #ddd center/cover no-repeat; }
.yt-main__body { padding: 12px 14px 16px; }
.yt-main__new {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1;
  padding: 5px 16px;
  margin-bottom: 8px;
  transition: background .3s, color .3s;
}
.yt-main__title { margin: 0; font-size: 14px; font-weight: 700; }
.yt-main:hover { background: var(--navy); color: #fff; }
.yt-main:hover .yt-main__new { background: #fff; color: var(--navy); }
/* YouTube サブ動画 (サムネ左) */
.yt-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: center;
  background: #fff;
  padding: 10px;
  margin-bottom: 14px;
  transition: background .3s, color .3s;
}
.yt-item__thumb { aspect-ratio: 16/9; background: #ddd center/cover no-repeat; }
/* グリッド子の既定 min-width:auto でタイトルが縮まず、360px幅でMEDIAが横にあふれる。
   ※タイトルは word-break:auto-phrase のため min-content が文節単位＝広くなる。 */
.yt-item > *, .column-item > * { min-width: 0; }
.yt-item__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.8; }
.yt-item:hover { background: var(--navy); color: #fff; }
/* コラムカード */
.column-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  padding: 10px 14px 10px 10px;
  margin-bottom: 18px;
  transition: background .3s, color .3s;
}
.column-item__thumb { aspect-ratio: 3/2; background: #ddd center/cover no-repeat; }
.column-item__date { display: block; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 4px; }
.column-item__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.8; }
.column-item:hover { background: var(--navy); color: #fff; }
/* 2カラム(YouTube / コラム)の最終カード下端を揃える。
   grid で等高になったセル内でリストを縦フレックス配分し、末尾を底に合わせる。 */
/* グリッドアイテムの既定 min-width:auto のままだと .media-head の中身が
   トラック幅を超え、375px以下でページ全体に横スクロールが出る（8px）。 */
.media-col { display: flex; flex-direction: column; min-width: 0; }
.media-col .media-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.media-col .media-list > :last-child { margin-bottom: 0; }
/* 1カラムにスタッフブログ＋家づくりコラムの2ブロック。
   下端揃えのための伸長(space-between)を掛けると、下段だけ投稿の間隔が広がってしまう。
   両リストとも伸ばさず、投稿の間隔を .column-item の margin(18px) に揃える。
   ブログの最後の投稿と「家づくりコラム」見出しの間は大きめに空けて区切りを明確にする。 */
.media-head--sub { margin-top: clamp(44px, 5vw, 64px); }
.media-col--feeds .media-list { flex: 0 0 auto; }
/* Instagram */
.insta__lead { flex: 1; margin: 0; font-size: 14px; font-weight: 700; }
.insta .media-head__title { flex: 0 0 auto; }
.insta__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.insta__item {
  display: block;
  aspect-ratio: 1/1;
  background: #ddd center/cover no-repeat;
  transition: opacity .3s;
}
.insta__item:hover { opacity: .8; }

/* ------------ NEWS ------------ */
.news-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  border-top: 1px solid var(--navy-light);
}
.news-list__item { border-bottom: 1px solid var(--navy-light); }
.news-list__link {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 16px 18px 44px;
  /* ホバー時: 左から右へテーマカラーで塗られる(ボタンと同じ0.3s) */
  background: linear-gradient(var(--navy), var(--navy)) left center / 0% 100% no-repeat;
  transition: background-size .3s, color .3s;
}
.news-list__link:hover { background-size: 100% 100%; color: #fff; }
.news-list__date {
  flex: 0 0 auto;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: color .3s;
}
.news-list__link:hover .news-list__date { color: #fff; }
.news-list__cat {
  flex: 0 0 5em;
  text-align: center;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 0;
  transition: background .3s, color .3s;
}
.news-list__link:hover .news-list__cat { background: #fff; color: var(--navy); }
.news-list__title { font-size: 14px; font-weight: 500; }
.news-btn {
  position: relative;
  display: block;
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 12px 36px;
  transition: opacity .2s;
}
.news-btn:hover { opacity: .82; }
.news-btn__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}

/* ------------ CONTACT ------------ */
.contact {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}
.contact__bg {
  position: absolute;
  inset: 0;
  background: #333 center/cover no-repeat;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(16,29,102,.72), rgba(16,29,102,.82));
}
.contact > .container { position: relative; z-index: 1; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.contact-card {
  background: #fff;
  color: var(--ink);
  padding: 20px 20px 24px;
  transition: transform .3s ease, background .3s, color .3s;
}
.contact-card__img {
  aspect-ratio: 4/3;
  background: #ddd center/cover no-repeat;
  margin-bottom: 20px;
}
.contact-card__label { text-align: center; font-size: 14px; margin: 0 0 6px; }
.contact-card__title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}
.contact-card__text {
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 22px;
}
.contact-card__btn {
  position: relative;
  display: block;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy); /* 常時 青枠。反転(白地)しても border は残る */
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 13px 34px;
  transition: background .3s, color .3s;
}
.contact-card__btn::after {
  content: "▶";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
}
/* ホバー: 色反転＋拡大 */
.contact-card:hover {
  transform: scale(1.05);
  background: var(--navy);
  color: #fff;
}

/* ------------ SERVICE ------------ */
.service { background: var(--beige); padding: 0 0 140px; }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}
.service-row:nth-child(even) { direction: rtl; }
.service-row:nth-child(even) > * { direction: ltr; }
/* 注文住宅(1行目)は画像を右・テキストを左に反転 */
.service-row:first-child { direction: rtl; }
.service-row:first-child > * { direction: ltr; }
.service-row__img {
  aspect-ratio: 4/3;
  background: #d8d4c8 center/cover no-repeat;
}
.service-row__title-en {
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.service-row__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
}
.service-row__body { font-size: 14px; color: var(--ink-soft); margin: 0 0 22px; }

/* ------------ MODEL HOUSE ------------ */
.modelhouse-list { display: grid; gap: 32px; }
.modelhouse-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
}
.modelhouse-card__img { display: block; aspect-ratio: 4/3; background: #ddd center/cover no-repeat; }
.modelhouse-card__body { padding: 30px 36px; }
.modelhouse-card__en { font-family: "Noto Sans","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif; font-weight: 700; color: var(--navy); font-size: 14px; letter-spacing: 0.18em; margin-bottom: 6px; }
.modelhouse-card__title { font-size: 22px; font-weight: 700; line-height: 1.5; margin: 0 0 14px; color: var(--navy); word-break: break-word; }
.modelhouse-card__meta { font-size: 14px; color: var(--ink-soft); line-height: 2; margin: 0 0 20px; }

/* ------------ Footer ------------ */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.9);
  padding: 80px 0 28px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 56px;
  align-items: start;
}
/* --- 会社情報 --- */
.site-footer__info { max-width: 340px; } /* 左列コンテンツをCTAボタン幅に統一 */
.site-footer__logo { height: 80px; width: auto; display: block; margin-bottom: 18px; }
.site-footer__company { font-size: 15px; letter-spacing: 0.18em; margin: 0 0 28px; }
.site-footer__meta { margin: 0 0 28px; }
.site-footer__meta-row {
  display: flex;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
  line-height: 1.7;
}
.site-footer__meta-row dt { flex: 0 0 5em; margin: 0; letter-spacing: 0.08em; white-space: nowrap; } /* ラベルを折り返さない */
.site-footer__meta-row dd { margin: 0; white-space: nowrap; } /* 営業時間などを折り返さない */
.site-footer__tel {
  border: 1px solid rgba(255,255,255,.5);
  padding: 18px 24px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.site-footer__tel-lead { font-size: 14px; margin: 0 0 4px; }
.site-footer__tel-num {
  display: block;
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.site-footer__tel-hours { font-size: 14px; margin: 6px 0 0; }
.site-footer__cta {
  position: relative;
  display: block;
  max-width: 340px;
  background: #fff;
  color: var(--navy);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 13px 36px;
  margin-bottom: 34px;
  transition: opacity .2s;
}
.site-footer__cta:hover { opacity: .8; }
.site-footer__cta-arrow {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 0.7em;
}
.site-footer__sns { display: flex; gap: 22px; align-items: center; }
.site-footer__sns a { display: block; color: #fff; transition: opacity .2s; }
.site-footer__sns a:hover { opacity: .65; }
.site-footer__sns svg { width: 26px; height: 26px; display: block; }
/* --- サイトマップ --- */
.site-footer__sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer-group { margin-bottom: 30px; }
.footer-group__head { display: inline-block; }
.footer-group__en {
  display: inline-block;
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #fff;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.footer-group__ja { display: block; font-size: 14px; margin-top: 10px; color: rgba(255,255,255,.85); }
.footer-sub { list-style: none; margin: 16px 0 0; padding: 0; }
.footer-sub li { position: relative; padding: 0 0 0 16px; margin-bottom: 10px; }
.footer-sub li::before { content: "–"; position: absolute; left: 0; opacity: .8; }
.footer-sub a { color: rgba(255,255,255,.85); transition: opacity .2s; }
.footer-sub a:hover { opacity: .6; }
/* --- ボトム --- */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}
.site-footer__copy { font-size: 12px; opacity: .55; letter-spacing: 0.06em; }
.site-footer__totop {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #fff;
}
.site-footer__totop-icon { font-size: 10px; line-height: 1; }
.site-footer__totop { transition: opacity .2s; }
.site-footer__totop:hover { opacity: .6; }
/* 下部バーのポリシー系リンク（個人情報/コンプラ/サイトマップ）*/
.site-footer__policy { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__policy a { font-size: 12px; letter-spacing: .04em; color: #fff; opacity: .7; text-decoration: none; }
.site-footer__policy a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 640px) { .site-footer__policy { gap: 6px 16px; } }

/* 日本語テキストをスマホでも自然な文節で改行(未対応ブラウザは通常改行) */
.hero__title,
.cat-card__ja, .cat-card__desc,
.work-card__title, .event-card__title,
.modelhouse-card__title, .modelhouse-card__meta,
.voice-card__title, .voice-card__sub,
.concept-acc__title, .concept-acc__text p,
.service-row__title, .service-row__body,
.contact-card__title, .contact-card__text,
.news-list__title,
.yt-main__title, .yt-item__title, .column-item__title {
  word-break: auto-phrase;
  line-break: strict;
}

/* ------------ ボタン共通ホバー: 左下→右上へナナメに色反転（背景＋文字が同時に反転）------------
   実装: 反転後の「背景＋複製した文字」を持つオーバーレイ(.jg-flip / JSが複製)を、
   45°のグラデーションマスクで斜めに出現させる。背景と文字が同じレイヤーなので、
   背景が反転した部分から文字も反転する。マスク位置のアニメで開始も即時。 */
.btn--filled, .btn--block, .news-btn, .media-more, .cat-card__more,
.team-btn, .site-footer__cta, .concept-acc__btn,
.btn--block-invert, .btn--outline, .contact-card__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.jg-flip {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  pointer-events: none;
  /* 斜めワイプ: 対角の水平オフセットを rest/hover とも 48px で一定にし、
     角度を変えずに（ワイパーのように角度が変化しない）左下→右上へ平行移動して覆う。
     rest は前縁を左外(上頂点 -48px)に置いて非表示。hover は右下を +48px オーバーシュート
     して全面を覆うため覆い残しも出ない。上頂点/下頂点とも移動量が等しい(100%+48px)ので
     対角オフセットは常に 48px = 角度固定。 */
  -webkit-clip-path: polygon(0 0, -48px 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, -48px 0, 0 100%, 0 100%);
  transition: -webkit-clip-path 0.38s cubic-bezier(.12,.62,.24,1),
                      clip-path 0.38s cubic-bezier(.12,.62,.24,1);
}
/* hoverで左下→右上へ斜めに全面反転（下辺が先行して左下から覆う）*/
.btn--filled:hover .jg-flip, .btn--block:hover .jg-flip, .news-btn:hover .jg-flip,
.media-more:hover .jg-flip, .cat-card__more:hover .jg-flip,
.team-btn:hover .jg-flip, .site-footer__cta:hover .jg-flip, .concept-acc__btn:hover .jg-flip,
.btn--block-invert:hover .jg-flip, .btn--outline:hover .jg-flip,
.contact-card:hover .contact-card__btn .jg-flip {
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% + 48px) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% + 48px) 100%, 0 100%);
}
/* 反転色（グループ別）*/
.btn--filled .jg-flip, .btn--block .jg-flip, .news-btn .jg-flip,
.media-more .jg-flip, .cat-card__more .jg-flip, .contact-card__btn .jg-flip {
  background: #fff; color: var(--navy);
}
.team-btn .jg-flip, .site-footer__cta .jg-flip, .concept-acc__btn .jg-flip,
.btn--block-invert .jg-flip, .btn--outline .jg-flip {
  background: var(--navy); color: #fff;
}
/* ::after で矢印を出すボタンは複製に矢印が無いので、オーバーレイにも同じ矢印を付ける */
.btn--filled .jg-flip::after, .btn--block .jg-flip::after,
.btn--outline .jg-flip::after, .btn--block-invert .jg-flip::after,
.cat-card__more .jg-flip::after {
  content: "\25B6"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 0.7em;
}
.contact-card__btn .jg-flip::after {
  content: "\25B6"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 0.7em;
}

/* 薄い背景の青ボタン（反転で白地）。常時 青枠(border)を付ける。
   jg-flip は inset:0(=padding box＝borderの内側)を覆うので、ホバーで白反転しても
   実borderは覆われず枠が残る。box-sizingはborder-box(reset)なので外寸は不変。 */
.btn--filled, .btn--block, .news-btn, .media-more, .cat-card__more {
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
}
/* 濃い背景(青)の白ボタン（反転で紺地）。常時 白枠(border)を付ける。
   jg-flip は inset:0(=borderの内側)を覆うので、ホバーで紺反転しても白borderは残り、
   青背景でもボタンの輪郭が視認できる。box-sizingはborder-box(reset)なので外寸は不変。 */
.team-btn, .site-footer__cta, .concept-acc__btn, .btn--block-invert {
  background: #fff;
  color: var(--navy);
  border: 2px solid #fff;
}
/* cat-card__more は表示ディレイ(opacity)を維持 */
.cats__grid.is-open .cat-card__more {
  transition: opacity .5s ease 1.4s;
}

/* ------------ Responsive ------------ */
@media (max-width: 900px) {
  /* スマホ/タブレット: 大タイトルは英字の下に日本語を並べる（横幅不足で日本語が1文字ずつ縦積みになるのを防ぐ） */
  .sec-title { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* 日本語サブは基本1行。長いページ名（サンクスページ等）は画面からはみ出すので文節で折り返す */
  .sec-title__ja { white-space: normal; word-break: auto-phrase; max-width: 100%; }
  .cats__grid,
  .event-grid,
  .works-grid { grid-template-columns: 1fr 1fr; }
  .cats { padding-top: 60px; }
  .cats__grid { margin-top: 0; }
  .cat-card__img { margin-bottom: 0; }
  /* ボードが重ならないので中央寄せ用の下パディングは不要 */
  .hero .container { padding-bottom: 0; }
  .hero__scroll { bottom: 24px; }
  .cat-card__body > * { opacity: 1; }
  .cat-card__body { background: #f2f2f2; }
  .cat-card__body::before { display: none; }
  /* モバイルはアニメ無し: ワイプ非表示・キャプションは通常位置・濃色 */
  .cat-card__wipe { display: none; }
  .cat-card__caption { transform: none; }
  .cat-card__en { color: var(--ink-soft); text-shadow: none; }
  .cat-card__ja { color: var(--navy); text-shadow: none; }
  .voice-grid { grid-template-columns: 1fr 1fr; }
  .concept-acc__inner,
  .service-row,
  .modelhouse-card { grid-template-columns: 1fr; }
  .concept-acc__inner { gap: 24px; }
  .media-grid { grid-template-columns: 1fr; gap: 48px; }
  .insta__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  /* Instagram: 見出し・説明・ボタンを縦に並べる（横並びのままだと説明が3〜4文字で折り返す） */
  .insta .media-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .insta__lead { flex: 0 0 auto; }
  .news-list__link { flex-wrap: wrap; gap: 10px 14px; padding: 14px 8px; }
  .news-list__title { flex: 1 1 100%; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-card:hover, .contact-card--feature:hover { transform: none; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 48px; }
  .site-footer__sitemap { gap: 32px 24px; }
  .site-nav__list { display: none; }
}
@media (max-width: 560px) {
  .cats__grid,
  .event-grid,
  .works-grid,
  .voice-grid { grid-template-columns: 1fr; }
  .hero { min-height: 100svh; padding: 100px 0 60px; }
  /* スマホは縦型(9:16)の動画を読み込むので、中央配置でほぼ全体が入る */
  .hero__video { object-position: center; }
  /* 写真と「CUSTOM ORDER／注文住宅」の間が空いて見えるので詰める */
  .cat-card__caption { padding-top: 6px; }
  .section { padding: 0 0 96px; }
  .sec-title__en { font-size: clamp(40px, 15vw, 64px); } /* CONCEPT等がはみ出さない上限 */
  .sec-title__br { display: block; } /* MEDIA & COLUMN をスマホで改行 */
  /* サイトマップ: 2段組みに自動で振り分ける（3カラム分を2列に割ると左側だけ極端に長くなるため） */
  .site-footer__sitemap { display: block; columns: 2; column-gap: 24px; }
  .footer-col { display: contents; }
  .footer-group { break-inside: avoid; margin-bottom: 26px; }
  .site-footer__bottom { flex-direction: column; gap: 20px; align-items: flex-start; }
  /* モバイルはコンテナ左端に合わせる(画面端の飛び出しは解除) */
  .sec-title { margin-left: 0; padding-left: 0; }
  /* モバイルは上部3項目とCTAを隠し、ハンバーガーのみ表示 */
  .site-nav, .site-nav__cta { display: none; }
  .nav-drawer__nav { padding: 88px 22px 40px; }
  .nav-drawer__group { margin-bottom: 24px; }
}

/* =====================================================================
   注文住宅 固定ページ (page-custom-order.php)
   ヘッダー/フッター/sec-title はトップページ踏襲、本文は参考デザイン準拠
   ===================================================================== */

/* これらのページはヒーローが明るい背景なので、白ロゴが見えるよう常時ネイビーヘッダー */
body.subpage-header .site-header { background: rgba(22,39,137,.92); backdrop-filter: blur(6px); }

/* ゆっくりフェードイン（デザイン注記）*/
.co-fade { opacity: 0; transform: translateY(26px); transition: opacity 1.2s ease, transform 1.2s ease; }
.co-fade.is-in { opacity: 1; transform: none; }

/* ---- PAGE HERO ---- */
.co-hero { background: #eaf0fa; padding: clamp(24px, 3vw, 42px) 0 0; }   /* ヘッダー回避はパンくずが担うため圧縮 */
.co-hero__title { margin-bottom: clamp(30px, 4vw, 54px); }
.co-hero__en {
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--navy);
  font-size: clamp(15px, 1.4vw, 20px);
  margin-bottom: 12px;
}
.co-hero__ja {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 66px);
  letter-spacing: 0.1em;
  line-height: 1.1;
}
.co-hero__img { aspect-ratio: 16 / 7; background: #dfe4ee center/cover no-repeat; }

/* ---- INTRO（散らし配置 + フェードイン）---- */
.co-intro { background: #eaf0fa; padding: clamp(56px, 8vw, 120px) 0 clamp(80px, 10vw, 150px); }
.co-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 5vw, 80px);
  align-items: start;
}
.co-intro__col { display: flex; flex-direction: column; }
.co-intro__col--l { gap: clamp(60px, 10vw, 150px); }
.co-intro__col--r { gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 12vw, 210px); }
.co-intro__head {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.co-intro__body {
  margin: auto 0 0;
  color: var(--navy);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.05em;
}
.co-intro__img { background: #dfe4ee center/cover no-repeat; }
.co-intro__img--a { aspect-ratio: 4 / 3; }
.co-intro__img--b { aspect-ratio: 4 / 3; width: 92%; margin-left: auto; }
.co-intro__img--c { aspect-ratio: 3 / 4; width: 88%; }

/* ============================================================
   建築スタイル詳細ページ（tmp-style.php / /style/<slug>/）
   本番 jigsaw-house.co.jp/style/* と同等以上の情報量・意匠にする
   ============================================================ */
.style-hero { background: #eaf0fa; padding: clamp(24px, 3vw, 42px) 0 clamp(40px, 5vw, 72px); }
.style-hero__title { text-align: center; margin-bottom: clamp(26px, 3.6vw, 48px); }
.style-hero__en {
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--navy);
  font-size: clamp(26px, 4vw, 54px);
  line-height: 1.2;
}
.style-hero__ja {
  margin: clamp(8px, 1.2vw, 14px) 0 0;
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.14em;
}
.style-hero__catch {
  margin: clamp(14px, 2vw, 24px) auto 0;
  max-width: 40em;
  color: var(--navy);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 2;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}

/* ---- 外観スライダー ---- */
.style-slider { position: relative; }
.style-slider__viewport { overflow: hidden; }
.style-slider__track { display: flex; transition: transform .7s cubic-bezier(.6, 0, .2, 1); }
.style-slider__slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  background: #dfe4ee center / cover no-repeat;
}
/* 背景透過の商品カット: cover だと建物が切れるので contain。
   下地はヒーローと同色にして、家だけが浮いて見えるようにする。 */
.style-slider__slide--cutout { background-color: #eaf0fa; background-size: contain; }
.style-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: clamp(38px, 3.4vw, 48px); height: clamp(38px, 3.4vw, 48px);
  border: 0; border-radius: 50%;
  background: rgba(22, 39, 137, .78);
  color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.style-slider__arrow:hover { background: var(--navy); }
.style-slider__arrow--prev { left: clamp(8px, 1.4vw, 18px); }
.style-slider__arrow--next { right: clamp(8px, 1.4vw, 18px); }
.style-slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(14px, 1.8vw, 20px); }
.style-slider__dot {
  width: 9px; height: 9px; padding: 0;
  border: 1px solid var(--navy); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background .2s ease;
}
.style-slider__dot.is-active { background: var(--navy); }

/* ---- 価格 ---- */
.style-spec { padding-top: clamp(56px, 7vw, 96px); }
.style-price {
  display: flex; flex-wrap: wrap;
  gap: clamp(18px, 3vw, 64px);
  align-items: flex-end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.style-price__item { display: flex; align-items: flex-end; gap: clamp(10px, 1.4vw, 18px); margin: 0; color: var(--navy); }
.style-price__label {
  background: var(--navy); color: #fff;
  font-size: clamp(12px, 1vw, 14px); font-weight: 700; letter-spacing: 0.06em;
  padding: 7px 14px; margin-bottom: 6px; white-space: nowrap;
}
.style-price__num {
  font-family: "Jost", "Noto Sans", sans-serif; font-weight: 600;
  font-size: clamp(34px, 4.4vw, 58px); line-height: .95; letter-spacing: 0.01em;
}
.style-price__unit { font-size: clamp(14px, 1.3vw, 18px); font-weight: 700; padding-bottom: 4px; }
.style-price__tax { font-size: .8em; font-weight: 500; }

/* ---- スペック表・融資条件 ---- */
.style-table { margin: 0 0 clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.style-table__row { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--line); }
.style-table dt {
  background: var(--navy); color: #fff;
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 22px);
  font-size: clamp(12px, 1vw, 14px); font-weight: 700; letter-spacing: 0.06em;
}
.style-table dd {
  margin: 0;
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.8vw, 26px);
  color: var(--navy);
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.9; letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.style-table--loan { margin-bottom: 0; }

/* ---- 見出し ---- */
.style-h2 {
  position: relative;
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding-bottom: 14px;
  color: var(--navy);
  font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.style-h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--navy); }

/* ---- 設備タグ ---- */
.style-tags { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.style-tags__item {
  border: 1px solid rgba(22, 39, 137, .25);
  background: #fff;
  color: var(--navy);
  padding: 7px 14px;
  font-size: clamp(11.5px, .95vw, 13px);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ---- 間取り図 ---- */
.style-rooms { padding-top: clamp(70px, 9vw, 120px); }
.style-rooms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.style-rooms__item { background: #fff; padding: clamp(14px, 2vw, 26px); width: 100%; }
.style-rooms__item img { display: block; width: 100%; height: auto; }
.style-note {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(11.5px, .95vw, 13px); line-height: 1.9; letter-spacing: 0.04em;
}

/* ---- Room Tour ---- */
.style-movies { padding-top: clamp(70px, 9vw, 120px); }
.style-movies__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.style-movie { min-width: 0; }
.style-movie__thumb,
.style-movie__iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.style-movie__thumb {
  position: relative; padding: 0; cursor: pointer;
  background: #16213f center / cover no-repeat;
  transition: opacity .2s ease;
}
.style-movie__thumb:hover { opacity: .9; }
.style-movie__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 44px; border-radius: 10px;
  background: rgba(22, 39, 137, .88);
  transition: background .2s ease, transform .2s ease;
}
.style-movie__play::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-42%, -50%);
  border: 9px solid transparent; border-left: 15px solid #fff; border-right: 0;
}
.style-movie__thumb:hover .style-movie__play { background: var(--navy); transform: translate(-50%, -50%) scale(1.06); }
.style-movie__ttl {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  color: var(--navy);
  font-size: clamp(12px, 1vw, 13.5px); line-height: 1.8; letter-spacing: 0.03em;
  word-break: auto-phrase;
}

/* ---- CTA ---- */
.style-cta { padding: clamp(56px, 7vw, 96px) 0 0; }
.style-cta__btn { display: flex; margin: 0 auto; min-width: min(420px, 90%); }

/* ---- 前後のスタイル ---- */
.style-nav { padding: clamp(56px, 7vw, 96px) 0 clamp(70px, 9vw, 120px); }
.style-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.style-nav__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label img" "body body";
  align-items: center;
  background: #eaf0fa;
  color: var(--navy);
  transition: background .25s ease;
}
.style-nav__item:hover { background: #dbe5f6; }
.style-nav__item--next { grid-template-columns: 1fr auto; grid-template-areas: "img label" "body body"; }
.style-nav__label {
  grid-area: label;
  font-family: "Jost", sans-serif; font-weight: 600; letter-spacing: 0.12em;
  font-size: clamp(15px, 1.4vw, 20px);
  padding: 0 clamp(16px, 2.4vw, 34px);
}
.style-nav__img { grid-area: img; display: block; aspect-ratio: 16 / 9; background: #cbd6ea center / cover no-repeat; }
.style-nav__body { grid-area: body; padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px); background: var(--navy); color: #fff; }
.style-nav__ttl { display: block; font-weight: 700; font-size: clamp(13px, 1.15vw, 16px); letter-spacing: 0.04em; }
.style-nav__catch { display: block; margin-top: 4px; font-size: clamp(11.5px, .95vw, 13px); line-height: 1.7; color: rgba(255, 255, 255, .85); }
.style-nav__all { margin: clamp(22px, 3vw, 34px) 0 0; text-align: center; }
.style-nav__all a {
  color: var(--navy); font-size: clamp(12.5px, 1.05vw, 14px); letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(22, 39, 137, .4); padding-bottom: 2px;
}

@media (max-width: 900px) {
  .style-table__row { grid-template-columns: 130px 1fr; }
  .style-movies__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .style-slider__slide { aspect-ratio: 4 / 3; }
  .style-table__row { grid-template-columns: 1fr; }
  .style-table dt { padding: 10px 14px; }
  .style-rooms__grid { grid-template-columns: 1fr; }
  .style-movies__grid { grid-template-columns: 1fr; }
  .style-price { gap: 18px 24px; }
  .style-nav__grid { grid-template-columns: 1fr; }
  .style-cta__btn { min-width: 0; width: 100%; }
}

/* ============================================================
   マンションリノベーション「Puzzle」（page-mansion-renovation.php）
   受領パンフレット(_imports/マンションリノベパンフレット_2026-09-08.pdf)の構成に対応
   ============================================================ */
/* ---- INTRO（P2-3）---- */
.pz-intro { padding: clamp(56px, 8vw, 110px) 0 clamp(70px, 9vw, 120px); }
.pz-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.pz-intro__fig { aspect-ratio: 16 / 10; background: #dfe4ee center/cover no-repeat; }
.pz-intro__head {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.8;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.pz-intro__body p {
  margin: 0 0 1.2em;
  color: var(--navy);
  font-size: clamp(13.5px, 1.02vw, 15px);
  line-height: 2.1;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
p.pz-intro__lead { font-weight: 700; font-size: clamp(15px, 1.3vw, 19px); margin-bottom: 0; }

/* ---- 各トピック共通（耐久/スケルトン/気密断熱/間取り/照明）---- */
.pz-topic { padding-top: clamp(70px, 9vw, 120px); }
.pz-topic__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.pz-topic__photo { aspect-ratio: 4 / 3; background: #dfe4ee center/cover no-repeat; }
.pz-topic__head {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(19px, 1.95vw, 28px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.pz-topic__txt p,
.pz-col p {
  margin: 0 0 1.1em;
  color: var(--navy);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 2;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.pz-topic__txt p:last-child,
.pz-col p:last-child { margin-bottom: 0; }
p.pz-note { font-size: clamp(11px, 0.85vw, 12px); line-height: 1.8; color: var(--ink-soft); }

/* ---- カラム（2列 / 3列）---- */
.pz-cols { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.6vw, 40px); }
.pz-cols--2 { grid-template-columns: 1fr 1fr; }
.pz-cols--3 { grid-template-columns: repeat(3, 1fr); }
.pz-col { min-width: 0; }
.pz-col--card { background: #fff; padding: clamp(20px, 2.2vw, 32px); }
.pz-col__head {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.pz-col__num { margin-right: 0.4em; }
.pz-col__head--accent { margin-top: clamp(20px, 2.4vw, 30px); }
/* 画像はライトボックス用に button で包む。ボタン既定の見た目を消し、画像の実寸に合わせる。
   （包まないと .jg-slide::after の拡大バッジが img には描画されない）*/
.pz-zoom { display: block; width: fit-content; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; }
.pz-zoom > img { display: block; width: 100%; height: auto; }
/* 図版は原寸を超えて拡大しない（小さな断面図がぼやけるのを防ぐ） */
.pz-col__fig { margin: clamp(16px, 2vw, 26px) auto 0; }
/* 断熱性能の壁断面／窓断面は横2列に並べる */
.pz-figpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.6vw, 22px);
  align-items: end;
  justify-items: center;
  margin: clamp(16px, 2vw, 26px) 0 0;
}
.pz-figpair .pz-zoom { width: 100%; }

/* 年代別の断熱仕様 */
.pz-era { margin: clamp(14px, 1.8vw, 22px) 0 0; }
.pz-era__row { margin-bottom: 10px; }
.pz-era dt { color: var(--navy); font-weight: 700; font-size: clamp(12px, 0.95vw, 13px); letter-spacing: 0.04em; }
.pz-era dd {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: clamp(12px, 0.95vw, 13.5px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}

/* column!（P5 のコラム枠）*/
.pz-column {
  margin-top: clamp(24px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 30px);
  background: #f7f5e9;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(14px, 2vw, 26px);
  align-items: center;
}
.pz-column__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--navy);
  font-family: "Jost", "Noto Sans", sans-serif;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0.06em;
}
.pz-column__head { margin: 0 0 8px; color: var(--navy); font-size: clamp(13px, 1.05vw, 15px); letter-spacing: 0.04em; }
.pz-column__body p { margin: 0; color: var(--navy); font-size: clamp(12px, 0.95vw, 13px); line-height: 1.9; letter-spacing: 0.04em; word-break: auto-phrase; }
.pz-column__fig { width: clamp(84px, 9vw, 130px); }

/* ---- 照明計画: 4シーン + 24時間図 ---- */
.pz-clock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.pz-scenes { list-style: none; margin: 0; padding: 0; display: contents; }
.pz-scene { display: flex; flex-direction: column; min-width: 0; }
.pz-scene:nth-child(1) { grid-column: 3; grid-row: 1; }
.pz-scene:nth-child(2) { grid-column: 3; grid-row: 2; }
.pz-scene:nth-child(3) { grid-column: 1; grid-row: 2; }
.pz-scene:nth-child(4) { grid-column: 1; grid-row: 1; }
.pz-scene__img { width: 100%; }
.pz-scene__ttl { margin: 10px 0 6px; color: var(--navy); font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; letter-spacing: 0.06em; }
.pz-scene__body {
  margin: 0;
  color: var(--navy);
  font-size: clamp(11.5px, 0.88vw, 12.5px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.pz-clock__fig { grid-column: 2; grid-row: 1 / span 2; width: clamp(220px, 26vw, 380px); }

/* ---- WORKS 比島の家 ---- */
.pz-case__gallery {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(30px, 4vw, 52px);
}
.pz-case__ph { aspect-ratio: 1 / 1; background: #dfe4ee center/cover no-repeat; }
.pz-case__ph--wide { aspect-ratio: 2 / 1; }
.pz-case__grid,
.pz-case__update {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.pz-case__grid { margin-bottom: clamp(40px, 6vw, 80px); }
.pz-case__txt p {
  margin: 0 0 1.1em;
  color: var(--navy);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 2;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.pz-case__txt p:last-child { margin-bottom: 0; }
.pz-spec { margin: 0 0 clamp(18px, 2.2vw, 28px); }
.pz-spec__row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(22, 39, 137, .18); }
.pz-spec dt { flex: 0 0 6.5em; color: var(--navy); font-weight: 700; font-size: clamp(12px, 0.95vw, 13px); letter-spacing: 0.04em; }
.pz-spec dd { margin: 0; color: var(--navy); font-size: clamp(12px, 0.95vw, 13.5px); letter-spacing: 0.04em; }
.pz-case__before,
.pz-plan { margin: 0; position: relative; }
.pz-case__before .pz-zoom,
.pz-plan .pz-zoom { width: 100%; }
.pz-case__before figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 10px;
  background: rgba(22, 39, 137, .85);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.pz-plan { background: #fff; padding: clamp(12px, 1.6vw, 20px); }
.pz-plan figcaption { margin-top: 8px; text-align: center; color: var(--navy); font-size: 12px; letter-spacing: 0.14em; }
.pz-plans { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(10px, 1.6vw, 20px); align-items: center; }
.pz-plans__arrow { color: var(--navy); font-size: 13px; }

/* ---- FLOW（幅の広い工程図は自身の枠内で横スクロール）---- */
.pz-flow__lead {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  color: var(--navy);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 2;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.pz-flow .pz-note { margin: clamp(14px, 1.8vw, 20px) 0 0; }
.pz-legend { list-style: none; margin: 0 0 clamp(14px, 1.8vw, 22px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pz-legend li { color: var(--navy); font-size: clamp(12px, 0.95vw, 13px); letter-spacing: 0.04em; }
.pz-legend__mark { margin-right: 8px; letter-spacing: 0.1em; }
.pz-flow__viewport { position: relative; }
.pz-flow__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pz-flow__scroll img { display: block; width: 100%; min-width: 900px; height: auto; }
.pz-flow__scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* 右端のフェード: まだ続きがあることを示す。スクロールしきったら消す */
.pz-flow__viewport::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(28px, 6vw, 56px);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.pz-flow__block.is-scrollable:not(.is-end) .pz-flow__viewport::after { opacity: 1; }

/* 「横にスクロールできます」の案内。スクロール可能なときだけ出し、
   一度スクロールしたら消す。セクションが見えた瞬間に矢印を数回往復させる。 */
.pz-flow__hint {
  display: none;               /* あふれている時だけ .is-scrollable で出す */
  align-items: center;
  justify-content: flex-end;   /* 図の右上＝スクロールする向きに置く */
  gap: 8px;
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(11.5px, 0.9vw, 13px);
  letter-spacing: 0.04em;
  transition: opacity .35s ease;
}
.pz-flow__block.is-scrollable .pz-flow__hint { display: flex; }
.pz-flow__block.is-done .pz-flow__hint { opacity: 0; }
.pz-flow__hint-ico {
  width: 30px; height: 16px; flex: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16' fill='none' stroke='%23162789' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='8' x2='26' y2='8'/%3E%3Cpolyline points='20,3 26,8 20,13'/%3E%3C/svg%3E");
}
.pz-flow__block.is-hinting .pz-flow__hint-ico { animation: pz-nudge 1.15s ease-in-out 3; }
@keyframes pz-nudge {
  0%, 100% { transform: translateX(0); }
  45%      { transform: translateX(7px); }
  70%      { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  /* 動きは止めるが「横に動かせる」という案内自体は残す */
  .pz-flow__block.is-hinting .pz-flow__hint-ico { animation: none; }
}

@media (max-width: 900px) {
  .pz-intro__grid,
  .pz-topic__hero,
  .pz-case__grid,
  .pz-case__update { grid-template-columns: 1fr; }
  .pz-cols--2,
  .pz-cols--3 { grid-template-columns: 1fr; }
  .pz-case__gallery { grid-template-columns: 1fr 1fr; }
  .pz-case__ph--wide { grid-column: 1 / -1; }
  /* 照明: 24時間図を上、4シーンを2列に */
  .pz-clock { grid-template-columns: 1fr 1fr; }
  .pz-scene:nth-child(1) { grid-column: 1; grid-row: 2; }
  .pz-scene:nth-child(2) { grid-column: 2; grid-row: 2; }
  .pz-scene:nth-child(3) { grid-column: 1; grid-row: 3; }
  .pz-scene:nth-child(4) { grid-column: 2; grid-row: 3; }
  .pz-clock__fig { grid-column: 1 / -1; grid-row: 1; width: min(340px, 80%); margin: 0 auto; }
}
@media (max-width: 560px) {
  .pz-column { grid-template-columns: 1fr; }
  .pz-column__fig { width: 110px; }
  .pz-case__gallery { grid-template-columns: 1fr; }
  .pz-plans { grid-template-columns: 1fr; }
  .pz-plans__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---- CONCEPT（家づくりの考え方 / 注文住宅ページ）---- */
.co-concept { background: #d5deea; padding-top: clamp(70px, 9vw, 120px); }
.co-concept__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.co-concept__head {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(19px, 1.95vw, 28px);
  line-height: 1.8;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.co-concept__lead {
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.1;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.co-concept__body {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  color: var(--navy);
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 2.1;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.co-concept__body:last-child { margin-bottom: 0; }
.co-concept__fig img { display: block; width: 100%; height: auto; }

/* ---- オーダースーツにたとえると（4段階スケール）---- */
.co-suits { background: #fff; padding: clamp(26px, 3.6vw, 48px) clamp(18px, 3vw, 44px); }
.co-suits__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3.6vw, 56px);
  align-items: center;
  margin-bottom: clamp(28px, 4.2vw, 52px);
}
.co-suits__head {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(18px, 1.85vw, 26px);
  line-height: 1.7;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.co-suits__icon { flex: none; width: clamp(48px, 4.6vw, 68px); height: auto; display: block; }
.co-suits__txt p {
  margin: 0 0 1em;
  color: var(--navy);
  font-size: clamp(13.5px, 1.02vw, 15px);
  line-height: 2.1;
  letter-spacing: 0.05em;
  word-break: auto-phrase;
}
.co-suits__txt p:last-child { margin-bottom: 0; }

.co-suits__scale {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}
.co-step {
  background: #fff;
  border: 1px solid #dde3ee;
  padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.2vw, 16px);
}
.co-step--current { background: #f5f8fc; border: 2px solid var(--navy); }
.co-step__label {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(10px, 1.2vw, 14px);
}
.co-step__num {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--navy);
  color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.co-step--current .co-step__num { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.co-step__name { color: var(--navy); letter-spacing: 0.04em; }
.co-step__ttl { display: block; font-weight: 700; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; }
.co-step__sub { display: block; font-size: clamp(12px, 0.95vw, 13px); line-height: 1.6; }
.co-step__img { display: block; width: 100%; height: auto; }
.co-step__cap {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  color: var(--navy);
  font-size: clamp(11.5px, 0.9vw, 13px);
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-align: center;
  word-break: auto-phrase;
}
.co-step--current .co-step__cap { font-weight: 700; }

@media (max-width: 900px) {
  .co-concept__top { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .co-suits__intro { grid-template-columns: 1fr; gap: 18px; }
  .co-suits__head { white-space: normal; }
  .co-suits__scale { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .co-suits { padding: 22px 16px; }
  .co-suits__scale { grid-template-columns: 1fr; gap: 12px; }
  .co-step__label { justify-content: flex-start; }
  .co-step__img { max-width: 260px; margin: 0 auto; }
}

/* ---- WORKS（特集レイアウト）---- */
.co-works { padding-top: clamp(70px, 9vw, 120px); }
.co-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(56px, 8vw, 104px);
}
.co-feature__img { aspect-ratio: 4 / 3; background: #dcdce4 center/cover no-repeat; }
.co-feature--flip .co-feature__img { order: 2; }
.co-feature__title {
  margin: 0 0 clamp(20px, 3vw, 34px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.co-feature__text {
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: var(--navy);
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 2.1;
  letter-spacing: 0.05em;
}
/* WORKS特集1のアウトラインボタン: ホバーでナナメに紺が満ちて白文字 */
.btn--outline {
  min-width: 220px;
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}

/* ---- VOICE（4枚 + 疑似カルーセルUI）---- */
.co-voice__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.co-voice__card { background: var(--navy); }
.co-voice__img { display: block; aspect-ratio: 4 / 3; background: #ccd4e2 center/cover no-repeat; }
.co-voice__txt {
  margin: 0;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  transition: background .3s ease, color .3s ease;
}
.co-voice__card:hover .co-voice__txt { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.co-voice__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(22px, 3vw, 32px); }
.co-voice__arrow {
  width: 40px; height: 24px;
  border: 0; border-radius: 20px;
  background: var(--navy); color: #fff;
  font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.co-voice__dots { display: inline-flex; gap: 10px; }
.co-voice__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--navy); }
.co-voice__dot.is-active { background: var(--navy); }

/* ---- MODEL HOUSE（特集1枚）---- */
.co-mh__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  background: #eaf0fa;
}
.co-mh__img { aspect-ratio: 4 / 3; background: #dfe4ee center/cover no-repeat; height: 100%; }
.co-mh__body { padding: clamp(26px, 3vw, 46px) clamp(26px, 3vw, 54px) clamp(26px, 3vw, 46px) 0; }
.co-mh__title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.co-mh__specs { margin: 0 0 clamp(16px, 2vw, 22px); }
.co-mh__row { display: flex; gap: 22px; padding: 10px 2px; border-bottom: 1px solid rgba(22,39,137,.28); }
.co-mh__row dt { flex: 0 0 4em; color: var(--navy); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; }
.co-mh__row dd { margin: 0; color: var(--ink); font-size: 14px; }
.co-mh__text {
  margin: 0 0 clamp(22px, 3vw, 30px);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
  word-break: auto-phrase;
}

/* ---- 注文住宅ページ レスポンシブ ---- */
@media (max-width: 900px) {
  .co-intro__grid { grid-template-columns: 1fr; gap: 0; }
  .co-intro__col--r { margin-top: clamp(28px, 6vw, 48px); }
  .co-intro__col { gap: clamp(28px, 6vw, 48px); }
  .co-intro__img--b, .co-intro__img--c { width: 100%; margin: 0; }
  .co-feature, .co-feature--flip { grid-template-columns: 1fr; gap: 22px; }
  .co-feature--flip .co-feature__img { order: 0; }
  .co-voice__grid { grid-template-columns: 1fr 1fr; }
  .co-mh__card { grid-template-columns: 1fr; }
  .co-mh__body { padding: clamp(22px, 5vw, 32px) clamp(22px, 5vw, 32px) clamp(28px, 6vw, 40px); }
}
@media (max-width: 560px) {
  .co-voice__grid { grid-template-columns: 1fr; }
  .co-hero__img { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   規格住宅 固定ページ (page-product-house.php)
   ===================================================================== */

/* ---- ヒーロー スライドショー ---- */
/* ---- STYLE ---- */
.ph-style { background: #eaf0fa; padding-top: clamp(22px, 3vw, 40px); }   /* ヘッダー回避はパンくずが担うため圧縮 */
.ph-style__lead {
  margin: 0 0 clamp(40px, 6vw, 72px);
  color: var(--navy);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.05em;
}
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }
.style-card {
  background: #d9e4f8;
  padding: clamp(24px, 2.6vw, 38px) clamp(22px, 2.4vw, 36px) clamp(26px, 2.8vw, 40px);
}
.style-card__catch {
  margin: 0 0 6px;
  text-align: center;
  color: var(--navy);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
}
.style-card__name {
  margin: 0 0 clamp(18px, 2vw, 26px);
  text-align: center;
  color: var(--navy);
  line-height: 1;
  white-space: nowrap;
}
.style-card__en {
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: 0.02em;
}
.style-card__ja {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  margin-left: 0.6em;
  letter-spacing: 0.08em;
}
/* キャッチ → タイトル → 画像 → 坪数/間取り → 金額 を上から縦一列に並べる */
.style-card { display: flex; flex-direction: column; }
/* 商品画像は背景透過。cover だと建物が切れるので contain で全体を見せ、
   下地はカード地色のまま（＝家が浮いて見える） */
.style-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent center/contain no-repeat;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.style-card__specrow { margin: 0 0 10px; text-align: center; }
.style-card__spec {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  margin-bottom: 8px;
}
.style-card__yen { margin: auto 0 0; color: var(--navy); display: flex; align-items: flex-end; justify-content: center; gap: 2px; line-height: 1; }
.style-card__num { font-family: "Jost","Noto Sans",sans-serif; font-weight: 600; font-size: clamp(34px, 4vw, 54px); letter-spacing: 0.01em; }
.style-card__unit { display: inline-flex; flex-direction: column; align-items: flex-start; font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; padding-bottom: 3px; }
.style-card__tax { font-size: 0.62em; font-weight: 500; line-height: 1; margin-bottom: 1px; white-space: nowrap; }
.style-card__tilde { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; padding-bottom: 3px; }
/* カード下端の「詳しくはこちら」。金額の下に一定の間隔で、カード高さが揃うよう最下部へ */
.style-card__btn { margin: clamp(18px, 2.2vw, 28px) auto 0; }
/* FLAT: ネイビー反転カード */
.style-card--dark { background: var(--navy); }
/* 紺カードでは紺ボタンが埋もれるため白地に反転（.btn--block-invert と同じ考え方） */
.style-card--dark .style-card__btn { background: #fff; color: var(--navy); border-color: #fff; }
.style-card--dark .style-card__btn .jg-flip { background: var(--navy); color: #fff; }
.style-card--dark .style-card__catch,
.style-card--dark .style-card__name,
.style-card--dark .style-card__yen { color: #fff; }
.style-card--dark .style-card__spec { background: #fff; color: var(--navy); }

/* ---- WORKS（ネイビー背景でのタブ反転）---- */
.ph-works .works-tab {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
  line-height: 1.35;
}
/* 濃紺背景では白でナナメ反転（文字は紺に）*/
.ph-works .works-tab .jg-flip { background: #fff; color: var(--navy); }
.ph-works .works-tab:hover { border-color: #fff; }
.ph-works .works-tab.is-active { background: #fff; color: var(--navy); border-color: #fff; }
/* section--navy の白文字継承を打ち消す（白カード上は濃色に）。ホバー時のみ白へ */
.ph-works .work-card { color: var(--ink); }
.ph-works .work-card:hover { color: #fff; outline: 1px solid rgba(255,255,255,.5); }
/* 濃色セクション用の白ブロックボタン（ホバーで青反転）: 反転はボタン共通のナナメ塗りで実装 */

/* ---- MODEL HOUSE（枠線の特集カード）---- */
.ph-mh .co-mh__card { background: #fff; border: 1px solid var(--navy); }
.co-mh__en {
  margin: 0 0 12px;
  color: var(--navy);
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 0.06em;
}
.co-mh__en span {
  font-family: "Noto Sans","Noto Sans JP","Hiragino Sans",sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-left: 0.5em;
  letter-spacing: 0.08em;
}

/* ---- 規格住宅ページ レスポンシブ ---- */
@media (max-width: 900px) {
  .style-grid { grid-template-columns: 1fr; }
  .ph-mh .co-mh__card { grid-template-columns: 1fr; }
  .ph-mh .co-mh__body { padding: clamp(22px, 5vw, 32px) clamp(22px, 5vw, 32px) clamp(28px, 6vw, 40px); }
}
@media (max-width: 560px) {
  .style-card__name { white-space: normal; }
}


/* =====================================================================
   アーカイブ / 詳細ページ共通
   ===================================================================== */
.arc, .sng { padding-top: clamp(20px, 2.5vw, 34px); }   /* 固定ヘッダー回避はパンくずが担うため圧縮 */
.arc-empty { color: var(--ink-soft); }

/* ============ パンくずリスト（トップ以外・全ページ共通）============ */
.breadcrumb {
  padding-top: clamp(80px, 8vw, 92px);   /* 固定ヘッダー(≈74px)直下に配置 */
  padding-bottom: 2px;
}
/* パンくずの左位置を、各ページの大きな英語タイトル(.sec-title__en)と揃える。
   .sec-title は margin-left: calc(50% - 50vw) + padding-left で画面左端から clamp(24px,4vw,56px) の位置。
   パンくずも中央寄せ container をやめ、同じ左オフセットにする。 */
.breadcrumb .container {
  max-width: none; margin-left: 0; margin-right: 0;
  padding-left: clamp(24px, 4vw, 56px);
}
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.breadcrumb__item {
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: .06em; line-height: 1.5;
  color: var(--ink-soft);
}
/* 区切り: 細く上品なシェブロン */
.breadcrumb__item:not(:first-child)::before {
  content: ""; width: 6px; height: 6px; margin: 0 13px; flex: 0 0 auto;
  border-top: 1px solid #c4cbdd; border-right: 1px solid #c4cbdd;
  transform: rotate(45deg);
}
.breadcrumb__item a { color: var(--ink-soft); text-decoration: none; transition: color .18s; }
.breadcrumb__item a:hover {
  color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.breadcrumb__item.is-current { color: var(--navy); font-weight: 600; }
/* 現在ページのみ長い時に省略。直下spanだけを block 化し他項目と縦位置を揃える
   （入れ子spanへの inline-block 適用はベースラインがずれるため使わない）*/
.breadcrumb__item.is-current > span { display: block; max-width: min(52vw, 460px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .breadcrumb__item:not(:first-child)::before { margin: 0 9px; }
  .breadcrumb__item.is-current > span { max-width: 62vw; }
}

/* ---- 外部リンク（新しいタブで開く）アイコン ---- */
.ext-icon {
  display: inline-block; width: 1em; height: 1em;
  margin-left: .4em; vertical-align: -0.12em; flex: 0 0 auto;
}
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- FAQ アコーディオン（faq アーカイブ）---- */
.faq-group + .faq-group { margin-top: clamp(36px, 4.5vw, 60px); }
.faq-group__title {
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; color: var(--navy);
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--navy);
}
.faq-acc { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; padding: 16px 8px; background: none; border: 0;
  text-align: left; cursor: pointer; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.7;
}
.faq-item__q:hover { color: var(--navy); }
.faq-item__mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Jost","Noto Sans",sans-serif; font-weight: 600; font-size: 14px; line-height: 1;
  background: var(--navy); color: #fff;
}
.faq-item__mark--a { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
/* FAQ の NEW バッジ（faq_new メタで表示） */
.faq-item__new {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  background: #d63638; color: #fff;
  font-family: "Jost","Noto Sans",sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .08em; line-height: 1.4;
  padding: 2px 7px; border-radius: 3px;
}
.faq-item__text { flex: 1; }
.faq-item__toggle { flex: 0 0 auto; font-size: 12px; color: var(--ink-soft); transition: transform .3s; margin-top: 6px; }
.faq-item.is-open .faq-item__toggle { transform: rotate(180deg); }
/* 開閉: grid-template-rows 0fr<->1fr。左右余白は常時／縦余白のみ開時に付け、
   どちらも同速でトランジションしてクリック時のガタつきを防ぐ（CONCEPTと同方式）*/
.faq-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__inner {
  overflow: hidden;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 8px;
  transition: padding .4s ease;
}
.faq-item.is-open .faq-item__inner { padding-top: 2px; padding-bottom: 20px; }
.faq-item__a { flex: 1; font-size: 15px; line-height: 2; color: var(--ink-soft); }
.faq-item__a p { margin: 0 0 1em; }
.faq-item__a p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .faq-item__q { font-size: 14px; gap: 10px; padding: 14px 4px; }
  .faq-item__inner { gap: 10px; padding-left: 4px; padding-right: 4px; }
  .faq-item__a { font-size: 14px; }
}
/* Ajax絞り込み: 読込中は一覧をフェード＋操作不可に（レイアウトは維持）*/
.arc-results { transition: opacity .18s ease; min-height: 120px; }
.arc-results.is-loading { opacity: .4; pointer-events: none; }

.arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.arc-grid--4 { grid-template-columns: repeat(4, 1fr); }

.arc-card {
  position: relative;
  background: #fff;
  overflow: hidden;
  color: var(--ink);
  transition: background .3s ease, color .3s ease;
}
.arc-card__cat {
  position: absolute;
  top: 0; left: 0; z-index: 1;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 13px;
}
.arc-card__img {
  display: block;
  background: #dfe2ea center/cover no-repeat;
  transition: transform .35s ease;
}
.arc-card:hover { background: var(--navy); color: #fff; }
.arc-card:hover .arc-card__img { transform: scale(1.04); }
.arc-card:hover .card-specs__row { border-color: rgba(255,255,255,.35); }
.arc-card:hover .card-specs__row dt,
.arc-card:hover .arc-card__date,
.arc-card:hover .arc-card__sub { color: #fff; }
.arc-card__body { padding: 16px 18px 22px; }
.arc-card__date { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; transition: color .3s ease; }
.arc-card__title { font-size: 16px; font-weight: 700; line-height: 1.7; margin: 0 0 8px; word-break: auto-phrase; }
.arc-card__sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; transition: color .3s ease; }

/* ページャー */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font-size: 14px;
}
.pager .page-numbers.current,
.pager .page-numbers:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- 詳細 ---- */
.sng__meta { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.sng__cat { background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; }
.sng__date { font-size: 14px; color: var(--ink-soft); }
.sng__badge { display: inline-block; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; }
.sng__title {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700; line-height: 1.6; color: var(--navy);
  margin: 0 0 clamp(20px, 3vw, 32px); word-break: auto-phrase;
}
.sng__hero { margin-bottom: clamp(24px, 3vw, 40px); }
.sng__hero img { width: 100%; height: auto; }
.sng__lead { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--navy); line-height: 1.9; margin: 0 0 18px; }
.sng__text { font-size: 15px; line-height: 2.1; margin: 0 0 22px; word-break: auto-phrase; }
.sng__note { font-size: 13px; color: var(--ink-soft); line-height: 1.9; }
.sng__subhead {
  font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--navy);
  margin: clamp(34px, 4vw, 52px) 0 18px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sng__specs { max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.sng__content { font-size: 15px; line-height: 2.1; }
/* 旧サイトから引き継いだ記事に「――――」のような区切り線やURLの長い連続があり、
   折り返せずに横スクロールが出ることがあるため、収まらない語は途中で折り返す */
.sng__content, .pg__content { overflow-wrap: break-word; }
/* 同じく旧記事対策: 画像枠(wp-caption)や埋め込み(iframe/Instagram)に固定幅が入っていて
   スマホで横スクロールが出るため、幅を画面に合わせる */
.sng__content .wp-caption, .pg__content .wp-caption { width: auto !important; max-width: 100% !important; }
.sng__content iframe, .pg__content iframe { max-width: 100%; }
.sng__content .instagram-media, .pg__content .instagram-media { min-width: 0 !important; max-width: 100% !important; }
/* Instagram の埋め込みは position:absolute で挿入されるため、本文を基準にして幅を決めさせる */
.sng__content, .pg__content { position: relative; }
.sng__content img { height: auto; }
/* 記事本文の写真はクリックで拡大（the_content フィルタで .sng-zoom.jg-slide のボタンに包む）。
   画像の大きさは元のまま（width属性）にしたいので、共通の .pz-zoom とは別クラスにしている */
.sng__content .sng-zoom {
  display: inline-block; max-width: 100%; vertical-align: top;
  margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.sng__content .sng-zoom > img { display: block; }
.sng__content a.jg-slide { display: inline-block; cursor: zoom-in; }
/* 性能系の固定ページ: 図版(.pg-fig)と項目の写真(.perf-feature__media)も同じ拡大ボタンで包む。
   枠の大きさは今までどおりなので、見た目は変えずにクリックできるようにする */
.pg__content .sng-zoom {
  display: block; width: fit-content; max-width: 100%;
  margin: 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.pg__content .perf-feature__media .sng-zoom { width: 100%; }
.pg__content .sng-zoom > img { display: block; }
.sng__content p { margin: 0 0 1.4em; }
/* 記事本文（コラム/ブログ/お知らせ/イベント）の見出し。下層ページ(.pg__content)と同じ意匠で統一する。
   h2=2トーン下線, h3=左の縦バー, h4=左の短ダッシュ。インラインstyle付きの取込本文はそのまま優先される。 */
.sng__content h2 {
  position: relative;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--navy);
  margin: clamp(40px, 4.6vw, 60px) 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.sng__content h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--navy); }
.sng__content > h2:first-child { margin-top: 0; }
.sng__content h3 {
  position: relative;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700; line-height: 1.55; color: var(--navy);
  margin: clamp(34px, 3.6vw, 48px) 0 12px; padding-left: 18px;
}
.sng__content h3::before { content: ""; position: absolute; left: 0; top: .18em; width: 5px; height: 1.05em; background: var(--navy); border-radius: 1px; }
.sng__content h4 {
  position: relative;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700; line-height: 1.6; color: var(--ink);
  margin: 24px 0 10px; padding-left: 18px;
}
.sng__content h4::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--navy); }
/* h2直下にh3が続くときは余白を詰める */
.sng__content h2 + h3 { margin-top: clamp(14px, 1.6vw, 20px); }
.sng__form { margin-top: 32px; }

/* ポイント（画像＋テキストの左右交互） */
.sng-point {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px); align-items: center;
  margin: clamp(30px, 4vw, 56px) 0;
}
.sng-point--flip .sng-point__img { order: 2; }
.sng-point__img { aspect-ratio: 4/3; background: #dfe2ea center/cover no-repeat; }
.sng-point__ttl { font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: var(--navy); line-height: 1.7; margin: 0 0 14px; }
.sng-point__text { font-size: 15px; line-height: 2.1; margin: 0; }

/* Q&A / 特典 */
.sng-qa { border-bottom: 1px solid var(--line); padding: 18px 0; }
.sng-qa__q { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.sng-qa__a { font-size: 15px; line-height: 2; margin: 0; }

/* ギャラリー */
.sng-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.sng-gallery__item { display: block; aspect-ratio: 4/3; background: #dfe2ea center/cover no-repeat; cursor: zoom-in; transition: opacity .2s; }
.sng-gallery__item:hover { opacity: .9; }
/* ページ内の全画像スライドショー対象（施工事例/お客様の声のヒーロー・ポイント画像等） */
.jg-slide { cursor: zoom-in; }
.sng__hero.jg-slide, .sng-point__img.jg-slide { transition: opacity .2s; }
.sng__hero.jg-slide:hover, .sng-point__img.jg-slide:hover { opacity: .92; }
/* スライドショーで開ける画像に「拡大」アイコン（虫めがね＋）を重ねる。CSR大画像の「拡大」バッジと同じ意匠。 */
.jg-slide, .sng-gallery__item { position: relative; }
.jg-slide::after,
.sng-gallery__item::after {
  content: "";
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(22,39,137,.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3Cline x1='10.5' y1='7.5' x2='10.5' y2='13.5'/%3E%3Cline x1='7.5' y1='10.5' x2='13.5' y2='10.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: .9; transform: scale(.94);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
  pointer-events: none;
}
.jg-slide:hover::after,
.sng-gallery__item:hover::after { opacity: 1; transform: none; background-color: var(--navy); }
.sng-gallery__fig { margin: 0; }
.sng-gallery__fig.is-vertical .sng-gallery__item { aspect-ratio: 3/4; }
.sng-gallery__fig figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.7; }

/* 動画 */
.sng-video { position: relative; aspect-ratio: 16/9; margin-bottom: clamp(24px, 3vw, 40px); }
.sng-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* スタッフ */
.sng-staff, .sng-episode {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px); align-items: start;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.sng-staff__photo, .sng-episode__img { aspect-ratio: 3/4; background: #dfe2ea center/cover no-repeat; }
.sng-episode__img { aspect-ratio: 4/3; background-position: center top; } /* 人物写真は上寄せにして顔を切らない */
.sng-staff__role { font-size: 14px; letter-spacing: .12em; color: var(--navy); font-weight: 700; margin: 0 0 4px; }
.sng-staff__en { font-family: "Jost","Noto Sans",sans-serif; font-size: 22px; color: var(--ink-soft); margin: 0 0 20px; }
.sng-staff__mttl { font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: var(--navy); line-height: 1.7; margin: 0 0 14px; }

/* 前後ナビ */
.sng-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-top: clamp(40px, 5vw, 70px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 700;
}
.sng-nav__index { color: var(--navy); white-space: nowrap; text-align: center; }
.sng-nav a:hover { opacity: .8; }
.sng-nav__link { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.sng-nav__prev { justify-self: start; }
.sng-nav__next { justify-self: end; }
.sng-nav__link--empty { min-height: 1px; }
.sng-nav__arrow { flex: 0 0 auto; color: var(--navy); font-size: 12px; }
.sng-nav__thumb { flex: 0 0 auto; width: 64px; height: 48px; border-radius: 4px; background: #eef1f7 center/cover no-repeat; }
.sng-nav__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sng-nav__next .sng-nav__meta { align-items: flex-end; text-align: right; }
.sng-nav__label { font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); font-family: "Jost",sans-serif; }
.sng-nav__ttl { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .sng-nav { gap: 10px; }
  .sng-nav__thumb { width: 46px; height: 36px; }
  .sng-nav__label { font-size: 10px; }
  .sng-nav__ttl { font-size: 12px; }
  .sng-nav__index { font-size: 12px; }
}
/* 詳細ヒーローのフォールバック（紺＋白ロゴ） */
.sng__hero--placeholder { background: var(--navy); }
.sng__hero--placeholder img { display: block; width: 100%; height: auto; }
/* 取込WYSIWYG本文（estate等）: 埋め込みiframe(地図等)を横はみ出しさせない */
.sng__richtext p { margin: 0 0 1.4em; }
.sng__richtext iframe { max-width: 100%; border: 0; }
.sng__richtext img { max-width: 100%; height: auto; }

/* イベント詳細 冒頭の開催情報パネル */
.sng-eventinfo { margin: 20px 0 clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 12px; padding: clamp(6px, 1vw, 10px) clamp(18px, 2.6vw, 30px); background: #f7f9fc; }
.sng-eventinfo__row { display: grid; grid-template-columns: 140px 1fr; gap: 8px 18px; align-items: start; padding: 13px 0; }
.sng-eventinfo__row + .sng-eventinfo__row { border-top: 1px solid var(--line); }
.sng-eventinfo dt { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); font-size: 14px; margin: 0; }
.sng-eventinfo dt .jigsaw-evt-ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--navy); }
.sng-eventinfo dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink); }
.sng-eventinfo__dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sng-eventinfo__dates li { font-weight: 600; }
.sng-eventinfo__dates li.is-past { opacity: .55; }
.sng-eventinfo__wd { margin-left: 2px; }
.sng-eventinfo__wd.is-sat { color: #2271b1; }
.sng-eventinfo__wd.is-sun { color: #d63638; }
.sng-eventinfo__past { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: #fff; background: #9aa0b0; border-radius: 3px; padding: 1px 7px; vertical-align: 1px; }
.sng-eventinfo__map { color: var(--navy); text-decoration: underline; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.sng-eventinfo__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sng-eventinfo__tag { font-size: 12px; background: #e8ebf5; color: var(--navy); border-radius: 999px; padding: 3px 11px; }
@media (max-width: 560px) {
  .sng-eventinfo__row { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; }
  .sng-eventinfo dt { font-size: 13px; }
}

/* estate 設備・仕様 */
.estate-funcs { list-style: none; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 20px; }
.estate-funcs li { position: relative; padding-left: 19px; font-size: 14px; line-height: 1.7; }
.estate-funcs li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--navy); }
/* estate 周辺環境（画像＋施設名＋アクセス、4カラム） */
.estate-surr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: clamp(24px, 3vw, 40px); }
.estate-surr__item { margin: 0; }
.estate-surr__img { display: block; aspect-ratio: 4 / 3; border-radius: 6px; background: #eef1f7 center/cover no-repeat; }
.estate-surr__img.is-empty { background: var(--navy); }
.estate-surr__cap { display: flex; flex-direction: column; gap: 2px; margin-top: 9px; }
.estate-surr__name { font-weight: 700; color: var(--navy); font-size: 14px; line-height: 1.5; }
.estate-surr__access { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 767px) { .estate-surr { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ===== スタッフ詳細（ヘッダ／2列／WORKS・LOVE・EPISODE） ===== */
.staff-head { text-align: center; margin: 0 0 clamp(28px, 4vw, 44px); }
.staff-head__role { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: .08em; margin: 0 0 8px; }
.staff-head__name { font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0; }
.staff-head__en { font-family: "Jost", sans-serif; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 8px 0 0; }
.staff-intro { display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: clamp(24px, 3.5vw, 52px); align-items: center; margin: 0 0 clamp(40px, 5.5vw, 72px); }
.staff-intro__photo { aspect-ratio: 3/4; border-radius: 8px; background: #dfe2ea center/cover no-repeat; }
.staff-intro__photo.is-empty { background: var(--navy); }
.staff-intro__mttl { font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; color: var(--navy); line-height: 1.6; margin: 0 0 16px; }
.staff-intro__mtext { font-size: 15px; line-height: 2; margin: 0; }
.staff-sec { margin: 0 0 clamp(40px, 5.5vw, 72px); }
.staff-sec__head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin: 0 0 clamp(20px, 3vw, 32px); }
.staff-sec__en { font-family: "Jost", sans-serif; font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; letter-spacing: .06em; color: var(--navy); line-height: 1; }
.staff-sec__ja { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: .04em; }
.staff-recom-feature { display: grid; grid-template-columns: minmax(0, 52%) 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.staff-recom-feature__img { display: block; aspect-ratio: 4/3; border-radius: 8px; background: #dfe2ea center/cover no-repeat; }
.staff-recom-feature__ttl { font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--navy); line-height: 1.5; margin: 0 0 14px; }
.staff-recom-feature__more, .staff-card__more { margin: 16px 0 0; }
.btn-more--sm { padding: 9px 20px; font-size: 13px; }
.staff-episode { background: #eef1f7; border-radius: 14px; padding: clamp(24px, 3.6vw, 48px); margin: 0 0 clamp(40px, 5.5vw, 72px); }
.staff-episode .staff-sec__head { margin-bottom: clamp(18px, 2.6vw, 28px); }
.staff-episode .sng-episode { margin-bottom: 0; grid-template-columns: 1fr; }   /* EPISODE は写真を出さず文章のみ（1列） */
@media (max-width: 767px) {
  .staff-intro { grid-template-columns: 1fr; gap: 20px; }
  .staff-intro__photo { width: 100%; max-width: 320px; margin: 0 auto; }
  .staff-recom-feature { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 900px) {
  .arc-grid, .arc-grid--4 { grid-template-columns: 1fr 1fr; }
  .sng-point, .sng-staff, .sng-episode { grid-template-columns: 1fr; }
  .sng-point--flip .sng-point__img { order: 0; }
  .sng-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .arc-grid, .arc-grid--4 { grid-template-columns: 1fr; }
}


/* ---- 汎用 固定ページ ---- */
.pg { padding-top: clamp(20px, 2.5vw, 34px); }   /* 固定ヘッダー回避はパンくずが担うため圧縮 */
.pg__hero { margin-bottom: clamp(24px, 3vw, 40px); }
.pg__hero img { width: 100%; height: auto; }
.pg__content { font-size: 15px; line-height: 2.1; }
.pg__content img { height: auto; max-width: 100%; }
.pg__content p { margin: 0 0 1.5em; }
/* ============================================================
   下層ページ見出し（.pg__content h2/h3/h4）— 全ページ共通デザイン
   h2: 全幅の細い罫線に、左端だけ太いネイビーの短バーを重ねた2トーン下線。
       直下に英字キャプション(.pg-en)を置ける。
   h3: 左に細いネイビーの縦バー。
   h4: 左に短いネイビーの横ダッシュ。
   ============================================================ */
.pg__content h2 {
  position: relative;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--navy);
  margin: clamp(52px, 6vw, 78px) 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.pg__content h2::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 64px; height: 3px; background: var(--navy);
}
.pg__content > h2:first-child { margin-top: 0; }
/* h2直下の英字キャプション（例: Personal Information Protection Policy）*/
.pg__content .pg-en {
  margin: -18px 0 30px;
  font-family: "Jost","Noto Sans",sans-serif;
  font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pg__content h3 {
  position: relative;
  font-size: clamp(16px, 1.75vw, 20px);
  font-weight: 700; line-height: 1.55;
  color: var(--navy);
  /* 既定: 他ブロック（画像・段落・表等）の後に来るh3は区切りを明確にするため大きめの余白 */
  margin: clamp(56px, 6vw, 88px) 0 12px;
  padding-left: 18px;
}
/* h3がh2セクション見出しの直後（h2直下・英字キャプション直後）のときは余白を詰める */
.pg__content h2 + h3,
.pg__content h2 + .pg-en + h3,
.pg__content .pg-en + h3 { margin-top: clamp(16px, 1.8vw, 24px); }
/* 品質管理と保証／性能ページ等の feature ブロックは「項目カードの一覧」なので、
   先頭見出し(h3)に既定の大余白(最大88px)は空きすぎ。中程度の間隔に詰める。
   直前が節見出し(h3)・英字キャプション(pg-en)・前ブロックのいずれでも一定にする。 */
.pg__content .performance-item--feature > h3:first-child { margin-top: clamp(34px, 3.4vw, 48px); }
.pg__content h3::before {
  content: "";
  position: absolute; left: 0; top: .18em;
  width: 5px; height: 1.05em; background: var(--navy); border-radius: 1px;
}
.pg__content h4 {
  position: relative;
  font-size: clamp(15px, 1.5vw, 16px);
  font-weight: 700; line-height: 1.6;
  color: var(--ink);
  margin: 26px 0 10px;
  padding-left: 18px;
}
.pg__content h4::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--navy);
}
/* h3セクションの説明文（h3直後の段落）は、続く項目(h4など)との間に余白を取る。全ページ共通。 */
.pg__content h3 + p:not(.pg-en) { margin-bottom: clamp(30px, 3.2vw, 44px); }
.pg__content ul, .pg__content ol { margin: 0 0 1.5em 1.4em; }
.pg__content li { margin-bottom: .5em; }
.pg__content a { color: var(--navy); text-decoration: underline; }
.pg__content a.btn { text-decoration: none; }   /* 本文中のボタンリンクは下線を出さない */
/* 本文リンク色(紺)が紺地ボタンの文字にも効いて、文字が消えて紺の帯だけに見えていた */
.pg__content a.btn--block, .pg__content a.btn--filled { color: #fff; }
.pg__content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
.pg__content th, .pg__content td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; font-size: 14px; }
.pg__content th { background: #f4f6fb; color: var(--navy); white-space: nowrap; text-align: center; }
.pg__children { margin-top: clamp(32px, 4vw, 56px); }
/* 地図の埋め込み（会社概要のアクセスマップ等）*/
.pg__map { margin: 0 0 1.5em; }
.pg__map iframe { display: block; width: 100%; height: clamp(280px, 42vw, 460px); border: 0; }

/* CSR項目: PCでは画像を右に回り込ませ、モバイルは縦積み（見出し＋本文→画像の順）。
   DOM順は「画像→本文」（回り込みのため画像を先に置く）。モバイルはflex orderで本文を先に。 */
.pg__content .csr-item { margin: 0 0 2.4em; }
@media (max-width: 767px) {
  .pg__content .csr-item { display: flex; flex-direction: column; }
  .pg__content .csr-item__body  { order: 1; }
  .pg__content .csr-item__media { order: 2; margin-top: 6px; }
}
@media (min-width: 768px) {
  /* 画像は4:3のまま右へ回り込ませ、余った文章が画像の下に回り込む（マガジン風）。
     短い項目は2カラム風に、長い項目は画像下に文章が続き上下の空白が出ない。 */
  .pg__content .csr-item::after { content: ""; display: block; clear: both; }
  .pg__content .csr-item__media { float: right; width: 46%; margin: 4px 0 18px 40px; }
  .pg__content .csr-item .csr-gallery { margin: 0; }
  .pg__content .csr-item__body > :first-child { margin-top: 0; }
}

/* マーカー・ハイライト（強調語句）: 画面内に入るとJSが .is-shown を付与し、
   下地の帯（文字の下40%）が左から右へ引かれる。全ページ共通で利用可能。 */
.jg-marker {
  background-image: linear-gradient(transparent 58%, rgba(255, 197, 64, .72) 58%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  padding: 0 .08em;
  font-weight: 700;
  color: var(--navy);
  transition: background-size 1s cubic-bezier(.22, .61, .36, 1);
}
.jg-marker.is-shown { background-size: 100% 100%; }
/* 動きを抑える設定でも、ごく小さな下地の描画なので短め(0.5s)で再生する。 */
@media (prefers-reduced-motion: reduce) {
  .jg-marker { transition-duration: .5s; }
}
/* 濃色背景の中での強調（青背景など）は文字を白のままにする */
.section--navy .jg-marker,
.jg-marker--onDark { color: #fff; }

/* 性能ページ 導入文: モバイルは文ごとの改行(br)を残し、PC(=768px以上)では改行を無効化して自然に折り返す */
@media (min-width: 768px) {
  .perf-lead br { display: none; }
}

/* 性能ページ 月桂樹エンブレム: 画面内に入るとつるが下から伸び・葉が下から順に出て、全て出そろってから王冠が出る */
.pg-emblem { max-width: 210px; }
/* 3つ横並びで合計100%幅（各1/3・等分） */
.pg-emblem-row { display: flex; gap: 3%; align-items: flex-start; width: 100%; margin: 1.2em 0 1.8em; }
.pg-emblem-row .pg-emblem { flex: 1 1 0; max-width: none; min-width: 0; margin: 0; }
.pg-emblem .emb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-emblem .emb-leaf,
.pg-emblem .emb-crown { transform-box: fill-box; opacity: 0; }
.pg-emblem .emb-leaf  { transform-origin: 50% 50%; }
.pg-emblem .emb-crown { transform-origin: 50% 100%; }
/* 中央ラベル(耐震等級３/標準 等)は輪・王冠が組み上がった後にフェードで出す */
.pg-emblem .emb-label { opacity: 0; }
.pg-emblem .emb-label__sub { letter-spacing: .04em; }
/* つるは下端(交差点)から上へ、先端を後から描くように伸びる（クリップで下→上へ開帳） */
.pg-emblem .emb-stem  { clip-path: inset(100% 0 0 0); }
/* 発火前は非表示のまま。is-shown で つる伸長 → 葉(下から) → 王冠 の順に再生。 */
.pg-emblem.is-shown .emb-stem  { animation: emb-vine 1s cubic-bezier(.4, .12, .22, 1) forwards; }
.pg-emblem.is-shown .emb-leaf  { animation: emb-leaf .42s cubic-bezier(.2, .7, .3, 1.2) both; }
/* 葉が出そろった直後(約1.25s)に、王冠と中央テキストを同時に表示する */
.pg-emblem.is-shown .emb-crown { animation: emb-crown .6s cubic-bezier(.2, .7, .2, 1.1) 1.25s forwards; }
.pg-emblem.is-shown .emb-label { animation: emb-fade .5s ease 1.25s forwards; }
@keyframes emb-vine  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes emb-leaf  { 0% { opacity: 0; transform: scale(.15); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes emb-crown { 0% { opacity: 0; transform: translateY(-12px) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes emb-fade { from { opacity: 0; } to { opacity: 1; } }
/* 動きを抑える設定でも、要望の演出（つる伸長→葉が下から小さく発生して拡大→王冠は最後）は保持する。
   王冠の上からの落下だけは控えめにフェードにする。 */
@media (prefers-reduced-motion: reduce) {
  .pg-emblem.is-shown .emb-stem  { animation: emb-vine .8s ease forwards; }
  .pg-emblem.is-shown .emb-leaf  { animation: emb-leaf .4s cubic-bezier(.2, .7, .3, 1.15) both; }
  .pg-emblem.is-shown .emb-crown { animation: emb-fade .4s ease 1.25s forwards; }
}

/* ===== 性能ページ 機能ブロック（テキスト左＋画像右＋詳しく見るボタン） ===== */
/* テキスト左・画像右。画像は右にフロートさせ、テキストは画像の下へ回り込む */
.performance-item--feature .perf-feature { display: block; margin-top: 10px; }
.performance-item--feature .perf-feature::after { content: ""; display: block; clear: both; }
.perf-feature__lead { font-size: clamp(20px, 2.3vw, 27px); font-weight: 700; color: var(--navy); line-height: 1.55; margin: 0 0 20px; }
.perf-feature__text { line-height: 2; margin: 0 0 28px; }
.perf-feature__more { margin: 0; }
.perf-feature__media { float: right; width: 42%; margin: 4px 0 22px 36px; }
.perf-feature__media img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; background: #eef1f7; }
/* 縦長の資料写真（建設住宅性能評価書など）は切り抜かず全体を見せる */
.perf-feature__media--tall { width: 32%; }
.perf-feature__media--tall img { aspect-ratio: auto; object-fit: contain; background: none; }
.btn-more {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff;
  padding: 13px 30px; border-radius: 2px;
  font-family: "Noto Sans JP","Hiragino Sans","Meiryo",sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .06em;
  transition: opacity .2s ease;
}
.btn-more::after { content: ""; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.btn-more:hover { opacity: .85; }
/* 本文リンク色(.pg__content a=紺・下線)より優先して白文字・下線なしにする */
.pg__content a.btn-more, .pg__content a.btn-more:hover { color: #fff; text-decoration: none; }
@media (max-width: 768px) {
  /* スマホは回り込みを解除して縦積み（画像→テキスト） */
  .perf-feature__media { float: none; width: 100%; margin: 0 0 16px; }
  .perf-feature__media--tall { width: 62%; margin-left: auto; margin-right: auto; }
}

/* ===== 家づくりの流れ FLOW（番号付きタイムライン） ===== */
.flow-intro { margin: 0 0 2.4em; line-height: 2; }
.flow__list { list-style: none; margin: 0; padding: 0; }
.flow-step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding-bottom: 30px; }
.flow-step::before { content: ""; position: absolute; left: 31px; top: 8px; height: 100%; width: 2px; background: #d7dcea; z-index: 0; }
.flow-step:last-child::before { height: 56px; }
.flow-step__numwrap { position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.flow-step__num {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Jost", sans-serif; font-weight: 600; font-size: 27px; letter-spacing: .02em;
}
.flow-step__free {
  background: #f5ca25; color: var(--navy);
  font-weight: 700; font-size: 15px; letter-spacing: .12em; line-height: 1.35;
  padding: 4px 13px; border-radius: 999px; white-space: nowrap;
}
/* 本文(STEP・見出し・説明)を左の画像に対して上下中央に配置 */
.flow-step__card { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: center; }
.flow-step__media { margin: 0; }
.flow-step__media img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: #eef1f7; }
.flow-step__label { font-family: "Jost","Noto Sans",sans-serif; color: #4d92aa; font-weight: 600; font-size: 13px; letter-spacing: .14em; margin: 0 0 2px; }
.flow-step__title { font-size: clamp(19px, 2.1vw, 24px); color: var(--navy); margin: 0 0 12px; line-height: 1.4; }
.flow-step__text { line-height: 1.95; margin: 0; }
/* 本文共通の .pg__content h3（上余白 最大86px）/ p（下余白）が上の指定より強く、STEP XX の後が大きく空いていたので打ち消す */
.pg__content .flow-step__label { margin: 0 0 4px; }
.pg__content .flow-step__title { margin: 0 0 12px; }
/* 「ここまで無料」: 04と05の間に上下中央でボックス配置。縦のタイムライン線は途切れず連続させる */
.flow-free { position: relative; list-style: none; min-height: 120px; display: flex; align-items: center; padding-left: 90px; margin: 0; }
/* 上下に少し延ばして前後(04・05)の線と重ね、途切れないようにする */
.flow-free::before { content: ""; position: absolute; left: 31px; top: -16px; height: calc(100% + 36px); width: 2px; background: #d7dcea; z-index: 0; }
.flow-free span {
  position: relative; z-index: 1;
  background: #f5ca25; color: var(--navy);
  font-weight: 700; letter-spacing: .16em; font-size: 14px;
  padding: 9px 26px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 0 0 14px #fff;   /* 下の太線をボックスの周りだけ白で抜き、左右に少し隙間をあける */
}
/* 左右の黄色い太線: ボックスを中央に置き、タイムラインの右から端まで1本引く →「━━ ここまで無料 ━━」 */
.flow-free { justify-content: center; }
.flow-free::after { content: ""; position: absolute; left: 90px; right: 0; top: 50%; height: 4px; margin-top: -2px; background: #f5ca25; border-radius: 2px; z-index: 0; }
@media (max-width: 768px) {
  .flow-step { grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 24px; }
  .flow-step::before { left: 22px; }
  .flow-step:last-child::before { height: 46px; }
  .flow-step__num { width: 46px; height: 46px; font-size: 19px; }
  .flow-step__numwrap { gap: 6px; }
  .flow-step__free { font-size: 13px; padding: 3px 11px; letter-spacing: .08em; }
  .flow-step__card { grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
  .flow-step__media img { aspect-ratio: 16 / 10; }
  .flow-free { min-height: 92px; padding-left: 62px; }
  .flow-free::before { left: 22px; }
  .flow-free::after { left: 62px; }
}

/* 画像ギャラリー（CSR等）: 1枚だけ大きく表示。クリックでモーダル・スライドショー。
   2枚目以降は並べず、スライドショー用に非表示で保持する。 */
.csr-gallery { margin: 1.4em 0 2.2em; }
.csr-gallery__main { position: relative; display: block; cursor: zoom-in; }
.csr-gallery__main img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; background: #eef1f7; transition: opacity .2s; }
.csr-gallery__main:hover img { opacity: .9; }
/* 「拡大」バッジ（虫めがね＋）を画像右下に重ねる */
.csr-gallery__main::after {
  content: "拡大";
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center;
  padding: 6px 13px 6px 31px; border-radius: 999px;
  background: rgba(22,39,137,.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3Cline x1='10.5' y1='7.5' x2='10.5' y2='13.5'/%3E%3Cline x1='7.5' y1='10.5' x2='13.5' y2='10.5'/%3E%3C/svg%3E") 9px center / 15px no-repeat;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; pointer-events: none;
}
.csr-gallery__main:hover::after { background-color: var(--navy); }
/* 2枚目以降は並べない（スライドショー用にDOM保持のみ）*/
.csr-gallery__thumbs { display: none; }

/* ライトボックス（モーダル・スライドショー）*/
/* ライトボックス（スライドショー）: 項目名(h2)→セクション名(h3)→画像→画像説明→サムネ の縦構成パネル */
/* 表示/非表示は visibility+opacity で切り替え、開閉をアニメーションさせる */
/* ===== お問い合わせ 4タブ + EFO最適フォーム ===== */
.ct { max-width: 760px; margin: 0 auto; line-height: 1.65; }
.ct p { margin: 0; }
.ct .ct-input br { display: none; }
.ct-types .wpcf7-radio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ct-types .wpcf7-list-item { margin: 0; display: block; }
.ct-types .wpcf7-list-item > label { display: block; cursor: pointer; margin: 0; }
.ct-types input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-types .wpcf7-list-item-label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 62px; padding: 8px 6px;
  border: 1.5px solid #d3d8e6; border-radius: 10px;
  font-weight: 700; font-size: clamp(12px, 1.35vw, 15px); line-height: 1.35; color: var(--navy);
  background: #fff; transition: background .2s, color .2s, border-color .2s;
}
.ct-types label:hover .wpcf7-list-item-label { border-color: var(--navy); }
.ct-types input[type="radio"]:checked + .wpcf7-list-item-label { background: var(--navy); color: #fff; border-color: var(--navy); }
/* リード文はボタン群の上に配置。控えめな見出し風（線なし）＋ボタンとの余白 */
/* 詳細度を .ct p (margin:0) より上げないと下余白が効かない（既知の落とし穴） */
.ct .ct-lead { text-align: center; color: var(--navy); font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); letter-spacing: .06em; margin: 0 0 32px; }
/* 種別ボタン(.ct-types)と入力フォーム(.ct-fields)の間に余白を確保 */
.ct-fields { margin-top: clamp(36px, 4.5vw, 56px); }
.ct-row { margin-bottom: 20px; }
/* 必須／任意マークは項目名の前。折返し時はマークの下に入れず、テキスト部分の下で折返す(ぶら下げ) */
.ct .ct-label { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; color: var(--navy); font-size: 14px; line-height: 1.55; margin: 0 0 2px; }
.ct-req, .ct-any { flex: 0 0 auto; margin-top: 1px; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 3px; }
.ct-req { background: #d63638; color: #fff; }
.ct-any { background: #e7eaf2; color: #5b6274; }
/* PC: 項目名（左・固定幅）＋入力欄（右）。入力欄の左位置を揃え、縦位置も入力欄に合わせる */
@media (min-width: 768px) {
  .ct-row { display: grid; grid-template-columns: 232px 1fr; align-items: start; column-gap: 24px; }
  .ct .ct-label { align-self: start; padding-top: 13px; }
  .ct-row--agree, .ct-submit { display: block; }
}
.ct input[type="text"], .ct input[type="email"], .ct input[type="tel"], .ct textarea, .ct select {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid #d3d8e6; border-radius: 10px;
  padding: 13px 15px; font-size: 16px; color: var(--ink, #2a2f3a); background: #fff;
  /* フォーム部品はfont-familyを継承しない（既定Arial/textareaはmonospace）ため明示的に本文フォント(Noto Sans)にする */
  font-family: "Noto Sans", "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.ct input:focus, .ct textarea:focus, .ct select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,39,137,.12); }
.ct textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
/* 選択式（法人様のお問い合わせ内容）: 入力欄と同じ枠＋紺の矢印 */
.ct select {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23162789' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
}
/* 選択式（現在ご検討中の内容=チェック／お問合せ内容=ラジオ）: 1行に1項目、色は紺 */
.ct-checks .wpcf7-checkbox, .ct-checks .wpcf7-radio { display: grid; gap: 10px; padding-top: 11px; }
.ct .ct-checks .wpcf7-list-item { display: block; margin: 0; }   /* 後方の .wpcf7 .wpcf7-list-item（右16px・下6px）より優先させる */
/* 共通の .wpcf7 label（項目名用: 太字・紺・上下余白16px）が選択肢にも効いて間延びするため打ち消す */
.ct-checks .wpcf7-list-item > label { display: inline-flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink, #2a2f3a); }
.ct-checks input[type="checkbox"], .ct-checks input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.ct-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--ink-soft, #5b6274); }
/* 種別ボタンの下に、選んだ種別の紹介を出す（.ct-intro[data-for]: 来場予約=ショールーム、資料請求=カタログ）。本文共通の h3 上余白・p 下余白は詰める */
.ct-intro { margin-top: clamp(36px, 4.5vw, 52px); }
.pg__content .ct-intro h3 { margin-top: 0; }
.pg__content .ct-intro p { line-height: 1.95; }
.pg__content .ct-intro h3 + p { margin-bottom: 0; line-height: 1.95; }
.pg__content .ct-intro .pg-photos { margin: 20px 0 0; }
/* ご相談についてページに置いたフォームでは、本文に同じショールーム紹介・写真があるので来場予約の紹介は出さない
   （JS は style.display を切り替えるだけなので !important で抑える） */
.ct-preset--no-visit-intro .ct-intro[data-for="来場予約"] { display: none !important; }
/* 写真はクリックで拡大（ボタン .pz-zoom.jg-slide で包む）。ボタンは写真の枠いっぱいに */
.pg__content .pg-photos .pz-zoom { width: 100%; cursor: zoom-in; }
/* 来場予約・資料請求ページ: 案内文とフォーム、フォームと施工エリアの間をあける */
.pg__content .ct-preset { margin: clamp(44px, 5.5vw, 72px) 0; }
.pg__content .pg-catalog__lead { text-align: center; color: var(--navy); font-weight: 700; font-size: clamp(18px, 2vw, 22px); letter-spacing: .06em; margin: 0 0 22px; }
.pg__content .pg-catalog__img { max-width: 640px; margin: 0 auto 30px; }
.pg__content .pg-catalog__img img { display: block; width: 100%; height: auto; }
/* 表の中のリンク（フリーペーパー設置店の店名など）: 本文リンクと同じ紺＋下線 */
.pg__content td a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pg__content td a:hover { opacity: .75; }
.ct-addr { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ct-zip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-weight: 700; color: var(--navy); }
.ct-zip input { width: 130px; }
.ct-addr > input { flex: 1 1 240px; }
.ct-row--agree { text-align: center; margin: 30px 0 26px; font-size: 14px; }
.ct-row--agree a { color: var(--navy); text-decoration: underline; }
.ct-row--agree .wpcf7-list-item { margin: 0; }
/* 送信ボタン上の注釈（自動メール・暗黙同意） */
.ct-note { margin: 34px 0 14px; }
/* 注記ボックス背景: ブランド紺(補色=暖色)側の淡いゴールドで、紺の文字/リンクを引き立てる */
.ct-note__box { background: #fdf3d6; border: 1px solid #ecd9a2; border-radius: 10px; padding: 20px 24px; text-align: center; font-size: 13px; line-height: 1.95; color: var(--ink, #2a2f3a); }
.ct-note__box p { margin: 0 0 8px; }
.ct-note__box p:last-child { margin: 0; }
.ct-note__ttl { font-weight: 700; }
.ct-note__box a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.ct-note__agree { text-align: center; font-size: 13px; line-height: 1.7; margin: 18px 0 0; color: var(--ink-soft, #5b6274); }
.ct-note__agree a { color: var(--navy); text-decoration: underline; }
/* 同意文: ボックス直後は上余白をしっかり、2文の間は詰める（下は .ct-note の margin-bottom で調整） */
.ct .ct-note__box + .ct-note__agree { margin-top: 24px; }
.ct .ct-note__agree + .ct-note__agree { margin-top: 3px; }
.ct-submit { text-align: center; }
.ct-submit .wpcf7-submit {
  background: var(--navy); color: #fff; border: 0; border-radius: 999px;
  padding: 16px 64px; font-size: 16px; font-weight: 700; letter-spacing: .1em; cursor: pointer;
  transition: opacity .2s;
}
.ct-submit .wpcf7-submit:hover { opacity: .88; }
.ct .wpcf7-not-valid-tip { color: #d63638; font-size: 12px; margin-top: 5px; display: block; }
.ct .wpcf7-not-valid { border-color: #d63638 !important; }
.ct .wpcf7-response-output { border-radius: 8px; margin: 24px 0 0; padding: 14px 18px; font-size: 14px; }
/* 入力チェック中(validating)などメッセージの無い状態で、空の青枠だけが送信ボタンの下に出ないようにする */
.wpcf7 form .wpcf7-response-output:empty { display: none; }
@media (max-width: 560px) {
  .ct-types .wpcf7-radio { grid-template-columns: 1fr 1fr; }
}
/* 送信ボタンは中央。CF7スピナーはレイアウト幅を食って中央がずれるため、フローから外して右端へ */
.ct-submit { position: relative; }
.ct-submit .wpcf7-spinner { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }

/* ===== 来場予約 日付/時刻ピッカー（フロント） ===== */
.jgv-display {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  border: 1.5px solid #d3d8e6; border-radius: 10px; padding: 13px 15px; font-size: 16px;
  color: var(--ink, #2a2f3a); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.jgv-display:hover { border-color: var(--navy); }
.jgv-display.is-ph { color: #9aa0b0; }
.jgv-display .wsat { color: #2271b1; }
.jgv-display .wsun { color: #d63638; }
.jgv-clickable { cursor: pointer; background: #fff !important; }
body.jgv-lock { overflow: hidden; }
.jgv-modal { position: fixed; inset: 0; z-index: 100100; display: none; align-items: center; justify-content: center; background: rgba(18,22,40,.5); padding: 20px; }
.jgv-modal.is-open { display: flex; }
.jgv-modal__box { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.32); padding: 22px 24px; max-width: calc(100vw - 32px); }
.jgv-modal__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.jgv-modal__close:hover { opacity: .9; }
.jgv-modal__body { max-height: 82vh; overflow: auto; }
.jgv-dp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.jgv-dp__title { font-weight: 700; color: var(--navy); font-size: 15px; text-align: center; flex: 1; }
.jgv-dp__nav { width: 34px; height: 34px; border: 1px solid #dcdce4; background: #fff; border-radius: 6px; cursor: pointer; color: var(--navy); font-size: 18px; line-height: 1; padding: 0; flex: 0 0 auto; }
.jgv-dp__nav:hover { background: #eef1fb; border-color: var(--navy); }
.jgv-dp__nav.is-off { opacity: .35; cursor: not-allowed; }
.jgv-dp__panels { display: flex; }
.jgv-dp__panel { padding: 0 18px; }
.jgv-dp__panel + .jgv-dp__panel { border-left: 1px solid #e4e6ee; }
.jgv-dp__cap { text-align: center; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.jgv-dp__grid { display: grid; grid-template-columns: repeat(7, 38px); gap: 2px; }
.jgv-dp__wd { text-align: center; font-size: 12px; color: #787c82; padding: 3px 0; }
.jgv-dp__wd.is-sun { color: #d63638; }
.jgv-dp__wd.is-sat { color: #2271b1; }
.jgv-dp__day { height: 36px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink, #2a2f3a); font-size: 13px; padding: 0; }
.jgv-dp__day.is-empty { pointer-events: none; }
.jgv-dp__day:not(.is-disabled):not(.is-empty):hover { background: #eef1fb; }
.jgv-dp__day.is-sun { color: #d63638; }
.jgv-dp__day.is-sat { color: #2271b1; }
.jgv-dp__day.is-today { box-shadow: inset 0 0 0 1px var(--navy); }
.jgv-dp__day.is-sel { background: var(--navy) !important; color: #fff !important; }
.jgv-dp__day.is-disabled { color: #c7cad3; cursor: not-allowed; text-decoration: line-through; }
.jgv-tp__title { margin-bottom: 16px; }
.jgv-tp__box { display: flex; flex-direction: column; gap: 14px; }
.jgv-tp__ampm { display: flex; align-items: center; gap: 12px; }
.jgv-tp__label { width: 30px; flex: 0 0 auto; font-weight: 700; color: #8a8d93; font-size: 12px; }
.jgv-tp__grid { display: grid; grid-template-columns: repeat(6, minmax(54px, 1fr)); gap: 8px; flex: 1; }
.jgv-tp__opt { height: 40px; border: 1px solid #e6e6ea; background: #fff; border-radius: 8px; cursor: pointer; color: var(--ink, #2a2f3a); font-size: 14px; }
.jgv-tp__opt:hover { background: #eef1fb; border-color: #c9d0ea; }
.jgv-tp__opt.is-sel { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 600px) {
  .jgv-dp__panels { flex-direction: column; }
  .jgv-dp__panel { padding: 0; }
  .jgv-dp__panel + .jgv-dp__panel { border-left: 0; border-top: 1px solid #e4e6ee; margin-top: 16px; padding-top: 16px; }
  .jgv-dp__grid { grid-template-columns: repeat(7, 1fr); }
  .jgv-tp__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== ページ読み込み ロゴ・プリローダー（全ページ・CSSのみ） =====
   ロゴがフェードイン → ゴールドのバーが左から伸びる → 紺のカーテンが上へめくれてページを見せる */
/* トップ読み込みプリローダー: 紺地＋白ロゴ＋白青の進捗バー → 紺カーテンめくり。
   reduced-motion でも再生する。保険として 2.4s で必ず消える pl-safe を併走。 */
.site-preloader {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  animation: pl-curtain .55s cubic-bezier(.76, 0, .24, 1) 1.15s forwards, pl-safe 0s linear 2.4s forwards;
}
.site-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* 2回目以降の表示（header.php の sessionStorage 判定）では出さない */
.is-preloaded .site-preloader { display: none; }
.site-preloader__logo {
  width: min(210px, 52vw); height: auto;
  opacity: 0; transform: translateY(12px) scale(.94);
  animation: pl-logo .6s cubic-bezier(.2, .7, .3, 1.05) .1s forwards;
}
/* 白青のローディングバー: 紺(青)地に半透明トラック＋白いフィルが左から伸びる */
.site-preloader__bar {
  width: min(240px, 62vw); height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.site-preloader__barfill {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #bcd0ff);
  transform: scaleX(0); transform-origin: left center;
  animation: pl-bar .85s cubic-bezier(.4, .1, .2, 1) .2s forwards;
}
@keyframes pl-logo { 0% { opacity: 0; transform: translateY(12px) scale(.94); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pl-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pl-curtain { to { transform: translateY(-100%); } }
@keyframes pl-safe { to { visibility: hidden; opacity: 0; pointer-events: none; } }

.jg-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,40,.92); padding: 28px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}
.jg-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.jg-lightbox__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(80vw, 1400px); max-height: 80vh; /* 上下左右に10%以上の余白 */
  background: #fff; /* 角丸なし */
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  /* 閉じるボタンを右上にはみ出させるため overflow はクリップしない（スクロールは内側__scrollで） */
  opacity: 0; transform: translateY(18px) scale(.975);
  transition: opacity .34s cubic-bezier(.2, .8, .2, 1), transform .34s cubic-bezier(.2, .8, .2, 1);
}
.jg-lightbox.is-open .jg-lightbox__panel { opacity: 1; transform: none; }
.jg-lightbox__scroll { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 0; overflow: hidden; }
.jg-lightbox__head { width: 100%; padding: 16px 48px 11px; text-align: center; border-bottom: 1px solid var(--line, #e7eaf2); }
.jg-lightbox__title { font-size: clamp(16px, 1.9vw, 21px); font-weight: 700; color: var(--navy); margin: 0; line-height: 1.4; }
.jg-lightbox__sub { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft, #5b6274); margin: 4px 0 0; }
.jg-lightbox__stage { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; background: #0e0f16; touch-action: pan-y; user-select: none; }
.jg-lightbox__img { display: block; max-width: 100%; max-height: calc(80vh - 240px); object-fit: contain; transition: opacity .3s ease, transform .42s ease; }
/* 切替の瞬間だけトランジション無しで即座に隠し（opacity0）、外すとフェードインする */
.jg-lightbox__img.is-switching { opacity: 0; transform: scale(1.02); transition: none; }
.jg-lightbox__caption { width: 100%; padding: 11px 32px; margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink, #2a2f3a); text-align: center; }
.jg-lightbox__thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 10px 20px 4px; }
.jg-lightbox__thumb { flex: 0 0 auto; width: 76px; height: 57px; border: 2px solid transparent; border-radius: 6px; background: #dfe2ea center/cover no-repeat; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; padding: 0; }
.jg-lightbox__thumb:hover { opacity: 1; }
.jg-lightbox__thumb.is-active { opacity: 1; border-color: var(--navy); }
.jg-lightbox__count { color: var(--ink-soft, #5b6274); font-size: 12px; letter-spacing: .12em; padding: 5px 0 10px; }
.jg-lightbox__btn { background: none; border: 0; cursor: pointer; line-height: 1; }
/* 閉じる: 右上にはみ出した青丸ボタン */
.jg-lightbox__close {
  position: absolute; top: -20px; right: -20px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-size: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: background .2s, transform .2s;
}
.jg-lightbox__close:hover { background: var(--navy-deep, #101d66); transform: scale(1.06); }
/* 画像の左半分クリック=前へ / 右半分クリック=次へ。ナビは半面の透明ゾーン、矢印は端に表示 */
.jg-lightbox__nav {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: 50%; display: flex; align-items: center;
  background: none; padding: 0 clamp(12px, 3vw, 26px);
  font-size: clamp(34px, 4.5vw, 52px); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.8);
  opacity: .45; transition: opacity .2s ease;
}
.jg-lightbox__prev { left: 0; justify-content: flex-start; cursor: pointer; }
.jg-lightbox__next { right: 0; justify-content: flex-end; cursor: pointer; }
.jg-lightbox__nav:hover { opacity: .95; }
@media (hover: none) { .jg-lightbox__nav { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .jg-lightbox, .jg-lightbox__panel, .jg-lightbox__img { transition-duration: .16s; }
}

/* 補足を囲むコールアウト（原稿の「囲むデザイン」指定箇所など）*/
.pg__content .pg-callout {
  margin: 1.8em 0; padding: 18px 22px;
  background: #f4f6fb; border-left: 3px solid var(--navy);
  font-size: 14px; line-height: 1.95;
}
.pg__content .pg-callout > :last-child { margin-bottom: 0; }
.pg__content .pg-callout__title { display:block; font-weight: 700; color: var(--navy); margin-bottom: .4em; }
/* 強調ポイント（＊で始まる小見出し等）*/
.pg__content .pg-point { font-weight: 700; color: var(--navy); margin: 1.6em 0 .4em; }

/* 図版プレースホルダ: 本番で画像内にあった情報をテキストとして温存した注記
   （デザイン工程で実画像に差し替える箇所の目印）*/
.pg-note {
  margin: 0 0 1.5em; padding: 10px 14px;
  background: #f4f6fb; border-left: 3px solid var(--line);
  font-size: 13px; line-height: 1.9; color: var(--ink-soft);
}

/* ---- サイトマップ（page-sitemap.php）---- */
.sitemap { margin-top: clamp(28px, 4vw, 48px); }
.sitemap__block + .sitemap__block { margin-top: clamp(40px, 5vw, 64px); }
.sitemap__head {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--navy);
  padding-bottom: 12px; margin: 0 0 20px; border-bottom: 2px solid var(--navy);
}
.sitemap__head .sitemap__en {
  font-family: "Jost","Noto Sans",sans-serif; font-weight: 600;
  letter-spacing: .12em; font-size: 12px; color: var(--ink-soft);
}
.sitemap__list { list-style: none; margin: 0; padding: 0; }
.sitemap__list > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sitemap__list > li > a {
  display: inline-block; font-size: 15px; font-weight: 700;
  color: var(--navy); text-decoration: none;
}
.sitemap__list > li > a::before { content: "―"; color: var(--ink-soft); margin-right: 10px; }
.sitemap__list > li > a:hover { text-decoration: underline; }
.sitemap__sub { list-style: none; margin: 8px 0 2px; padding: 0 0 0 28px; }
.sitemap__sub li { padding: 5px 0; }
.sitemap__sub a { font-size: 14px; font-weight: 400; color: var(--ink); text-decoration: none; }
.sitemap__sub a::before { content: "└ "; color: var(--line); }
.sitemap__sub a:hover { color: var(--navy); text-decoration: underline; }
/* アーカイブは2カラムのカード風 */
.sitemap__list--cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px;
}
.sitemap__list--cols > li > a { display: flex; align-items: baseline; gap: 10px; }
.sitemap__list--cols .sitemap__en {
  font-family: "Jost","Noto Sans",sans-serif; font-weight: 600;
  letter-spacing: .1em; font-size: 11px; color: var(--ink-soft);
  min-width: 96px;
}
@media (max-width: 640px) {
  .sitemap__list--cols { grid-template-columns: 1fr; }
}


/* ---- ブログ 執筆スタッフ絞り込み ---- */

/* ---- 記事の執筆スタッフ ---- */
.sng-author { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; text-decoration: none; color: inherit; }
.sng-author__img { width: 52px; height: 52px; border-radius: 50%; background: #dfe2ea center/cover no-repeat; flex: 0 0 auto; }
.sng-author__body { display: flex; flex-direction: column; line-height: 1.4; }
.sng-author__role { font-size: 12px; color: var(--ink-soft); }
.sng-author__name { font-size: 15px; font-weight: 700; color: var(--navy); }
.sng-author:hover .sng-author__name { text-decoration: underline; }

/* ---- SNSシェア ---- */
.sng-share { display: flex; align-items: center; gap: 10px; margin-top: clamp(30px, 4vw, 48px); }
.sng-share__label { font-family: "Jost","Noto Sans",sans-serif; font-weight: 600; letter-spacing: .1em; font-size: 13px; color: var(--ink-soft); }
.sng-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 36px; padding: 0 12px;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 700;
  text-decoration: none; letter-spacing: .04em;
}
.sng-share__btn:hover { opacity: .82; }

.sng__morelink { margin-top: 18px; }
.sng__morelink .btn--outline { min-width: 0; padding: 12px 26px; }

/* CF7 フォーム 最低限の体裁 */
.wpcf7 { margin-top: 8px; }
.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.wpcf7 textarea, .wpcf7 select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  font-size: 15px; background: #fff; box-sizing: border-box;
}
.wpcf7 textarea { min-height: 140px; }
.wpcf7 label { display: block; font-weight: 700; margin: 16px 0 6px; color: var(--navy); }
.wpcf7 .wpcf7-list-item { display: inline-block; margin: 0 16px 6px 0; }
.wpcf7 .wpcf7-submit {
  margin-top: 20px; min-width: 240px; padding: 14px 30px; border: 0;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .08em; cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { opacity: .85; }
.wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 16px; font-size: 14px; }
.sng__form { margin-top: clamp(30px, 4vw, 48px); }


/* ---- 下層ページ（一覧 / 詳細 / 汎用固定ページ）のコンテンツ幅を 1000px 上限に ---- */
/* 一覧(.arc)はトップページと同じ既定幅(1248px)。
   詳細(.sng)と汎用固定ページ(.pg)は可読性優先で1000px。
   FAQ一覧はQ&Aの読みやすさを優先し従来どおり1000pxのまま。 */
.sng > .container,
.pg  > .container { max-width: 1000px; }
.post-type-archive-faq .arc > .container { max-width: 1000px; }

/* ===== 上部ヒーロー: パンくず〜導入文をブラウザ幅100%の背景画像で覆う（page-house-renovation.php 等） ===== */
.pg-herotop { position: relative; background: #e8ebf5 center / cover no-repeat; padding: 0 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.pg-herotop .breadcrumb,
.pg-herotop > .container { position: relative; z-index: 1; }
.pg-herotop > .container { padding-top: clamp(10px, 2.4vw, 28px); }
.pg-herotop__content > h2:first-child { margin-top: clamp(18px, 3vw, 30px); }
/* ヒーロー内のページ見出しは h1（注文住宅/規格住宅）。体裁は .pg__content h2 と同一にする。
   .pg__content h2 側を書き換えると本文中のh1にも波及するため、ヒーロー内に限定して定義する。 */
.pg-herotop__content h1 {
  position: relative;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--navy);
  margin: clamp(18px, 3vw, 30px) 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.pg-herotop__content h1::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 64px; height: 3px; background: var(--navy);
}
.pg-herotop:not(.pg-herotop--placeholder) .pg-herotop__content h1 { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.pg-herotop:not(.pg-herotop--placeholder) .pg-herotop__content h1::after { background: #fff; }
.pg-herotop__content > p:last-child { margin-bottom: 0; }
/* ヒーロー直後の本文セクション: 最初の見出しの上余白を詰める */
.pg--after-hero { padding-top: clamp(40px, 6vw, 72px); }
.pg--after-hero .pg__content > h3:first-child { margin-top: 0; }

/* 写真背景のヒーロー: 暗い紺オーバーレイ＋文字白抜きで可読性を確保 */
.pg-herotop { background-position: center; }
.pg-herotop:not(.pg-herotop--placeholder)::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(14,22,64,.66) 0%, rgba(16,26,80,.5) 100%);
}
.pg-herotop:not(.pg-herotop--placeholder) .sec-title__en { color: #fff; }
.pg-herotop:not(.pg-herotop--placeholder) .pg__content h2 { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.pg-herotop:not(.pg-herotop--placeholder) .pg__content h2::after { background: #fff; }
.pg-herotop:not(.pg-herotop--placeholder) .pg-en { color: rgba(255,255,255,.82); }
.pg-herotop:not(.pg-herotop--placeholder) .pg__content p { color: #fff; }
.pg-herotop:not(.pg-herotop--placeholder) .breadcrumb__list,
.pg-herotop:not(.pg-herotop--placeholder) .breadcrumb a,
.pg-herotop:not(.pg-herotop--placeholder) .breadcrumb span { color: rgba(255,255,255,.9); }
.pg-herotop:not(.pg-herotop--placeholder) .breadcrumb a:hover { color: #fff; }


/* ============================================================
   一覧カードの状態表示（イベント 受付中/終了・モデルハウス 見学可/販売中/販売済み・分譲 ご成約済み）
   ============================================================ */
.arc-card { position: relative; }
.arc-card__badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.5;
  color: #fff; background: var(--navy);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.arc-card__badge--open   { background: #c53d43; }        /* 受付中: 目に留まる赤 */
.arc-card__badge--visit  { background: var(--navy); }    /* 見学可 */
.arc-card__badge--sale   { background: #2e7d5b; }        /* 販売中 */
.arc-card__badge--closed { background: #8a8f9c; }        /* 終了・販売済み: 落ち着いたグレー */
/* ご成約済み: 画像の上に帯で表示し、写真を少し沈める */
.arc-card.is-sold .arc-card__img { position: relative; }
.arc-card.is-sold .arc-card__img::before {
  content: ""; position: absolute; inset: 0; background: rgba(16, 26, 80, .45);
}
.arc-card__sold {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
  padding: 10px 0; text-align: center;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: 15px; font-weight: 700; letter-spacing: .24em;
}


/* ============================================================
   サイト修正0910: 品質保証のグループ見出し／図版の仮置き／ショールーム写真／スタッフブログのバナー
   ============================================================ */
/* P13 「安心の検査・工事体制」: 項目見出し(1.〜8.)と区別できるよう、中央寄せの区切り見出しにする */
.pg__content h3.pg-group {
  text-align: center; padding-left: 0;
  margin: clamp(64px, 7vw, 96px) 0 clamp(4px, .8vw, 10px);
  font-size: clamp(19px, 2vw, 25px); letter-spacing: .08em;
}
.pg__content h3.pg-group::before { display: none; }
.pg__content h3.pg-group::after {
  content: ""; display: block; width: 48px; height: 2px; margin: 16px auto 0; background: var(--navy);
}
.pg__content h3.pg-group + .performance-item--feature > h3:first-child { margin-top: clamp(28px, 3vw, 40px); }

/* P14 「［図版：…］」の注記: 文字だけの帯ではなく、画像の仮置き枠として見せる（何の図かは枠の下部に小さく）。
   本物の注記(.pg-note)はそのまま。図版の注記にだけ本文側で pg-note--fig を付けている */
.pg__content .pg-note--fig {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 16 / 9; max-width: 640px; margin: 1.8em auto 2.2em;
  padding: 16px 24px; border: 1px dashed #b9c0d3; border-left-width: 1px; border-radius: 0;
  background: #eef1f7; color: var(--ink-soft); font-size: 12px; line-height: 1.7; text-align: center;
}
/* 本文中の図版（本番サイトから取り込んだ説明図・写真）。仮置き枠と同じ幅・位置に中央で置く */
.pg__content .pg-fig { margin: 1.8em auto 2.2em; max-width: 640px; }
.pg__content .pg-fig img { margin-inline: auto; }
.pg__content .pg-note--fig::before {
  content: "画像を配置"; display: block;
  font-size: 13px; font-weight: 700; letter-spacing: .2em; color: #8a93ab;
}

/* P15 ショールーム写真: PCは横3枚、スマホは1列 */
.pg__content .pg-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.8em 0; }
.pg__content .pg-photos figure { margin: 0; }
.pg__content .pg-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 640px) { .pg__content .pg-photos { grid-template-columns: 1fr; } }

/* P18 スタッフ紹介の下のスタッフブログ・バナー */
.staff-blogbnr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  margin-top: clamp(48px, 6vw, 80px); background: var(--navy); color: #fff; text-decoration: none;
  overflow: hidden; transition: opacity .3s ease;
}
.staff-blogbnr:hover { opacity: .9; }
.staff-blogbnr__img { display: block; min-height: 220px; background: #dfe2ea center / cover no-repeat; }
.staff-blogbnr__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(24px, 3.4vw, 48px); }
.staff-blogbnr__en { font-family: "Jost", "Noto Sans", sans-serif; font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: .04em; line-height: 1.1; }
.staff-blogbnr__ja { font-size: 14px; font-weight: 700; letter-spacing: .12em; opacity: .9; }
.staff-blogbnr__text { margin-top: 6px; font-size: 14px; line-height: 1.9; opacity: .9; }
.staff-blogbnr__more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 10px; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, .7); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.staff-blogbnr__more span { font-size: .7em; }
@media (max-width: 640px) {
  .staff-blogbnr { grid-template-columns: 1fr; }
  .staff-blogbnr__img { min-height: 180px; }
}

/* ============================================================
   HP文章修正(3): jigsawの家づくりについて の考え方／フッターのキッズマネースクール認定校
   ============================================================ */
/* 「規格化しているのは、品質を守るためのルール」を二重枠で強調（参考画像の囲み） */
.pg__content .pg-concept__box {
  margin: 1.8em 0; padding: 22px 24px;
  border: 1px solid var(--navy); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--navy);
  text-align: center; color: var(--navy); font-weight: 700;
  font-size: clamp(16px, 1.8vw, 19px); line-height: 1.9; letter-spacing: .04em;
}
/* 固定ヘッダーに見出しが隠れないように（フッター等からの #id リンク） */
.pg__content [id] { scroll-margin-top: 110px; }
/* フッター: キッズマネースクール jigsaw校（認定校）→ CSR活動の該当項目へ */
.site-footer__kms {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; padding: 12px 14px;   /* 下の電話ボックスと離す */
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; color: #fff; text-decoration: none;
  transition: background-color .2s;
}
.site-footer__kms:hover { background-color: rgba(255, 255, 255, .08); }
.site-footer__kms-badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 4px; background: #f5ca25; color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
.site-footer__kms-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-footer__kms-name { font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.site-footer__kms-note { font-size: 11px; line-height: 1.5; opacity: .8; }
.site-footer__kms-arrow { margin-left: auto; font-size: 10px; }

/* ============================================================
   サイト修正 9/11: 性能下層の見出し／間取り図の白枠／モデルハウスの来場予約フォーム
   ============================================================ */
/* 性能の下層ページ: 「jigsawの家づくり」を小見出しにして、性能名（耐震性能 等）を大きく見せる */
.pg__content h2 .pg-h2-pre { display: block; margin: 0 0 6px; font-size: clamp(13px, 1.3vw, 15px); font-weight: 700; letter-spacing: .14em; color: #4d92aa; }
/* 間取り図: 白いカード＋余白に戻す（共通 .pz-zoom の padding:0 / background:none に負けて、画像の透過部分で白が途切れていた） */
.pz-zoom.style-rooms__item { background: #fff; padding: clamp(14px, 2vw, 26px); }
/* モデルハウス詳細の来場予約フォーム（見学可のみ） */
.sng-mhform { margin-top: clamp(48px, 6vw, 80px); }
.sng-mhform__lead { margin: 0 0 clamp(20px, 2.6vw, 32px); line-height: 1.9; }
.ct--mh .ct-fields { margin-top: 0; }

/* 本文中の表: 画面に収まらない時は横スクロール（列を潰して読めなくしない） */
.pg__content .pg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; }
.pg__content .pg-table-scroll > table { margin-bottom: 0; }
@media (max-width: 767px) {
  .pg__content .pg-table-scroll--wide > table { min-width: 560px; }   /* 4列の表でも各列が読める幅を保つ */
  .pg__content .pg-table-scroll { position: relative; }
}