/*
 Theme Name:   Nekomaru Home
 Theme URI:    
 Description:  ねこまるホーム - 北九州の「ねこと暮らす」フィットな家づくり
 Author:       
 Author URI:   
 Template:     twentytwentyfive
 Version:      1.2.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  nekomaru-home
*/


/* =========================================================
   style.css – ねこまるホーム トップ
   カラー：鬼丸ホーム／鬼丸ハウス系ネイビー＋ゴールド
   画像：images/dummy.jpg
   ====================================================== */

/* ベース */
:root {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-primary: #234a74;
  --color-primary-light: #3f6b99;
  --color-accent: #c49a52;
  --color-text: #333333;
  --color-text-soft: #666666;
  --color-border: #e0e0e0;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  font-size: 16px;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.9;
}

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

/* レイアウト */
.l-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.l-flex {
  display: flex;
  gap: 32px;
}

.l-flex--middle {
  align-items: center;
}

.u-only-sp {
  display: none;
}

@media (max-width: 767px) {
  .u-only-sp {
    display: inline;
  }
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.6em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn i {
  font-size: 0.9em;
}

.btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn--outline {
  background-color: #fff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--ghost {
  background-color: transparent;
  border-color: #d0d5dd;
  color: var(--color-primary);
}

.btn--sm {
  padding: 0.4em 1.1em;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 0.8em 2.0em;
}

.btn--full {
  width: 100%;
}

.btn:hover {
  transform: translateY(-1px);
}

/* ガラス感のあるボタンスタイル */
.btn--primary {
  background: linear-gradient(
    135deg,
    rgba(35, 74, 116, 0.95),
    rgba(35, 74, 116, 0.75)
  );
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.hero .btn--primary {
  /* ヒーロー上では少しだけ明るめ＆透け感 */
  background: linear-gradient(
    135deg,
    rgba(18, 44, 80, 0.9),
    rgba(36, 77, 129, 0.7)
  );
  border-color: rgba(255, 255, 255, 0.28);
}

.hero .btn--outline {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.section--cta .btn--outline,
.fixed-cta .btn--outline {
  /* 暗色背景の上では白フチ＋半透明白 */
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.section--lineup .btn--ghost,
.section--spec .btn--ghost {
  /* 明るい背景の上では枠・文字をネイビーに */
  background: transparent;
  border-color: #d0d5dd;
  color: var(--color-primary);
  backdrop-filter: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* セクション共通 */
.section {
  padding: 100px 0;
}

/* section padding utilities（ページ固有padding削除のため） */
.section.section--pad-80{ padding: 80px 0; }
.section.section--pad-60{ padding: 60px 0; }
.section__head {
  text-align: center;
  margin-bottom: 36px;
}

.section__head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}

.section__title {
  font-size: 2rem;
  margin: 0 0 0.4em;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.section__lead {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

/* -------------------------------------------------------
   ヘッダー（スクロールで色反転）
------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  color: #ffffff;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 16px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__logo img {
  height: 40px;
  width: auto;
  object-fit: cover;
}

.site-header__tagline {
  font-size: 0.8rem;
}

/* ヘッダー文字色：初期は白、スクロール後は .site-header--solid で黒に切り替え */
.site-header {
  color: #ffffff;
}

.site-header a,
.site-header__tagline {
  color: inherit;
}

.global-nav__list {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.9rem;
}

.global-nav__item a {
  position: relative;
  padding-bottom: 4px;
}

.global-nav__item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.15s ease;
}

.global-nav__item a:hover::after {
  width: 100%;
}

.site-header__menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.site-header__menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 10px;
}

.site-header__menu-btn span + span {
  margin-top: 5px;
}

/* スクロール後（ヒーローを通り過ぎたら付与されるクラス） */
.site-header--solid {
  background-color: rgb(255 255 255 / 64%);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
  backdrop-filter: blur(14px);
}

@media (max-width: 959px) {
  .global-nav {
    display: none; /* main.jsで開閉予定 */
  }
  .site-header__menu-btn {
    display: block;
  }
}

/* -------------------------------------------------------
   ヒーロー（全画面・背景画像）
------------------------------------------------------- */
.hero {
  position: relative;
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background-color: #101827;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* スライド用レイヤー（2枚を使い回し） */
.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  will-change: opacity;
}

.hero-bg-slide.is-active {
  opacity: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: #00000017;
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: inherit;
  padding: 72px 16px;
}

.hero__content {
  max-width: 640px;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}

.hero__title {
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 0.5em;
  font-weight: 500;
}

.hero__lead {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

.hero__em {
  background-color: rgba(255, 255, 255, 0.16);
  padding: 0 0.2em;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
}

.hero-badges__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.35);
}

/* SP時は上下センター寄せ＋横幅調整 */
@media (max-width: 767px) {
  .hero__inner {
    justify-content: center;
    padding-top: 64px;
    padding-bottom: 40px;
  }

  .hero__title {
    font-size: 2.0rem;
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__content {
    max-width: 100%;
  }
}

/* ヒーロー内のキャッチ系装飾 */
.hero__kicker-en {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 6px;
}

.hero__price-catch {
  display: inline-block;
  margin-top: 0.6em;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.hero__price-main {
  font-size: 1.2rem;
  font-weight: 700;
}

/* SPで少しサイズ調整 */
@media (max-width: 767px) {
  .hero__kicker-en {
    font-size: 0.8rem;
  }
  .hero__price-main {
    font-size: 1.05rem;
  }
}
/* ヒーロー内キャッチ＆価格強調 */
.hero__kicker-en {
  font-size: 3.5rem;
  text-transform: uppercase;
  opacity: 0.9;
  margin: 0 0 4px;
  font-weight: bold;
}

.hero__price-block {
  margin: 0 0 1.4em;
  display: inline-block;
  align-items: flex-end;
  vertical-align: bottom;
}

.hero__price-main {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hero__price-unit {
  font-size: 1rem;
  margin: 14px 0;
}

.hero__price-tax {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* SPで若干縮小 */
@media (max-width: 767px) {
  .hero__kicker-en {
    font-size: 1.9rem;
  }

  .hero__price-main {
    font-size: 3.4rem;
  }

  .hero__price-unit {
    font-size: 0.9rem;
  }
}

/* -------------------------------------------------------
   コンセプト
------------------------------------------------------- */
.section--concept,
.section--logo-break,
.section--works,
.section--spec-detail{
  background-color: #ffffff;
}

.concept-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.concept-body__text p {
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

.concept-body__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------
   価格訴求セクション
------------------------------------------------------- */
.section--price {
  position: relative;
  padding: 80px 0;
  color: #fff;
}

.price-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/house_over.jpg");
  background-size: cover;
  background-position: center;
}

.price-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgb(77 92 128 / 0%), rgb(0 8 25));
}

.price-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.4fr) 1fr;
  gap: 32px;
  align-items: center;
}

.price-visual img {
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  object-fit: cover;
}

.price-main {
  text-align: center;
}

.price-copy-top {
  font-size: 0.9rem;
  color: #f5d58a;
  margin-bottom: 8px;
}

.price-title {
  font-size: 1.6rem;
  margin: 0 0 0.6em;
  font-weight: 500;
}

.price-sub {
  font-size: 0.9rem;
  margin: 0 0 1.2em;
  color: rgba(255, 255, 255, 0.9);
}

.price-box {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 20px 20px 16px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}

.price-label {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.price-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.price-number {
  font-size: 4.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.price-unit {
  font-size: 1rem;
}

.price-tax {
  font-size: 0.9rem;
}

.price-note {
  font-size: 0.8rem;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.price-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
}

.price-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------
   3つのスタイル – カード型
------------------------------------------------------- */
.section--lineup,
.section--modelhouse,
.section--news{
  background-color: #f7f7f7;
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* カード全体がリンク */
.lineup-card {
  display: block;
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.lineup-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lineup-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lineup-card__body {
  padding: 16px 16px 18px;
}

/* タイトル＋Styleバッジ */
.lineup-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

/* Style 1〜3 のバッジ */
.lineup-card__style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: rgba(255, 255, 255, 0.9);
}

/* 色分け（淡いトーン） */
.lineup-card__style--1 {
  color: #234a74;
  border-color: rgba(35, 74, 116, 0.35);
  background-color: rgba(35, 74, 116, 0.06);
}

.lineup-card__style--2 {
  color: #b8592c;
  border-color: rgba(184, 89, 44, 0.35);
  background-color: rgba(184, 89, 44, 0.06);
}

.lineup-card__style--3 {
  color: #2f7c4f;
  border-color: rgba(47, 124, 79, 0.35);
  background-color: rgba(47, 124, 79, 0.06);
}

/* タイトル本体 */
.lineup-card__title-text {
  font-size: 1.05rem;
  font-weight: 500;
}

/* スマホで詰まりすぎないよう調整 */
@media (max-width: 767px) {
  .lineup-card__title {
    flex-wrap: wrap;
    gap: 4px;
  }
}

.lineup-card__label {
  margin: 0 0 8px;
  font-size: 0.84rem;
  color: var(--color-text-soft);
}

.lineup-card__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

/* ホバー時の浮き上がり */
.lineup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

/* それぞれ少しだけトーンを変えてもいい場合 */

/* レスポンシブ */
@media (max-width: 1023px) {
  .lineup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .lineup-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------
   猫も、人も、心地よく…（70vh背景・あたたかいトーン）
------------------------------------------------------- */
.section--catlife {
  position: relative;
  min-height: 90vh;
  padding: 72px 0 96px;
  color: #3b2a23;
}

.catlife-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/cat.jpg");
  background-size: cover;
  background-position: center;
}

.catlife-overlay {
  position: absolute;
  inset: 0;
  /* 猫写真に乗せるあたたかいグラデーション */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 244, 230, 0.96)
  );
}

.catlife-inner {
  position: relative;
}

.catlife-inner .section__head {
  margin-bottom: 32px;
}

.catlife-inner .section__title {
  color: #2e1f18;
}

.catlife-inner .section__lead {
  color: #6b5041;
}

.catlife-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.catlife-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 179, 130, 0.55);
  padding: 0; /* 中身側で余白を付ける */
  font-size: 0.88rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* 画像部分 */
.catlife-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.catlife-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキスト部分 */
.catlife-card__body {
  padding: 12px 14px 14px;
}

.catlife-card__title {
  margin: 0 0 4px;
  font-size: 0.96rem;
  font-weight: 500;
  color: #3b2a23;
}

.catlife-card__text {
  margin: 0;
  color: #6b5041;
}

/* 足跡アニメーション（下部余白） */
.catlife-paws {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 28px;
  pointer-events: none;
}

.catlife-paw {
  opacity: 0;
  transform: translateY(8px);
  animation: paw-walk 3s linear infinite;
}

.catlife-paw i {
  color: rgba(88, 66, 55, 0.9);
  font-size: 1.1rem;
}

/* 足跡アニメーション（中央付近から右斜め上へ） */
.catlife-paws {
  position: absolute;
  bottom: 40px;      /* セクション下からの高さ */
  left: 50%;         /* 画面中央基準 */
  width: 0;          /* 各足跡は個別に位置指定するので0でOK */
  height: 0;
  pointer-events: none;
}

/* 各足跡：中央から右上に向かって配置していく */
.catlife-paw {
  position: absolute;
  opacity: 0;
  animation: paw-appear 7s ease-out forwards;
}

/* 足跡アイコンの向きと微妙な揺れ感 */
.catlife-paw i {
  color: rgba(88, 66, 55, 0.9);
  font-size: 1.1rem;
  transform-origin: 50% 50%;
}

/* 1つ目：少し左寄りのスタート */
.catlife-paw:nth-child(1) {
  left: -70px;
  bottom: 0;
  animation-delay: 0s;
}
.catlife-paw:nth-child(1) i {
  transform: rotate(27deg);
}

/* 2つ目：右上へ1ステップ */
.catlife-paw:nth-child(2) {
  left: -35px;
  bottom: 26px;
  animation-delay: 0.8s;
}
.catlife-paw:nth-child(2) i {
  transform: rotate(30deg);
}

/* 3つ目：中央付近 */
.catlife-paw:nth-child(3) {
  left: -25px;
  bottom: 68px;
  animation-delay: 1.6s;
}
.catlife-paw:nth-child(3) i {
  transform: rotate(27deg);
}

/* 4つ目：さらに右上 */
.catlife-paw:nth-child(4) {
  left: 14px;
  bottom: 82px;
  animation-delay: 2.4s;
}
.catlife-paw:nth-child(4) i {
  transform: rotate(30deg);
}

/* 5つ目：一番右上で少し開き気味に */
.catlife-paw:nth-child(5) {
  left: 14px;
  bottom: 125px;
  animation-delay: 3.2s;
}
.catlife-paw:nth-child(5) i {
  transform: rotate(27deg);
}

/* ゆっくり出て、そのまま止まるアニメーション */
@keyframes paw-appear {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(6px);
  }
  25% {
    opacity: 0;
    transform: scale(0.7) translateY(6px);
  }
  45% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 767px) {
  .section--catlife {
    min-height: 156vh;
  }

  /* セクション下に余白を追加して足跡用スペースを確保 */
  .section--catlife {
    padding-bottom: 130px;
  }

  .catlife-paws {
    bottom: 36px; /* すこし上げてもOKならここを微調整 */
  }

  .catlife-paw i {
    font-size: 1rem;
  }
}

/* -------------------------------------------------------
   ロゴブレイク（猫セクションと標準仕様の間）
------------------------------------------------------- */

.logo-break__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-break__image {
  max-width: 140px;
  width: 60%;
  height: auto;
}

/* SP で少し小さめに */
@media (max-width: 767px) {
  .section--logo-break {
    padding: 32px 0;
  }
  .logo-break__image {
    max-width: 180px;
    width: 70%;
  }
}

/* -------------------------------------------------------
   標準仕様
------------------------------------------------------- */
.section--spec {
  position: relative;
  padding: 64px 0;
  color: var(--color-text);
}

/* 背景画像＋薄いオーバーレイ */
.spec-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/dummy01.jpg");
  background-size: cover;
  background-position: center;
}

.spec-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255), rgb(243 245 249 / 23%), rgb(0 0 0 / 26%));
}

.section--spec > .l-container {
  position: relative;
}

.spec-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* カード全体がリンク（中央寄せ） */
.spec-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgb(255 255 255 / 59%);
  border-radius: var(--radius-lg);
  padding: 7px 14px 10px;
  font-size: 0.9rem;
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s 
  ease, box-shadow 0.15s 
  ease, border-color 0.15s 
  ease;
  backdrop-filter: blur(5px);
  border: 1px solid #fff;
}

/* アイコン：単色寄りで落ち着いたトーン */
.spec-feature__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.spec-feature__catch {
  margin: 0 0 4px;
  font-size: 0.78rem;
}

.spec-feature__title {
  margin: 0 0 4px;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-text);
}

.spec-feature__text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-text-soft);
}

/* ホバー時の強調 */
.spec-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  border-color: rgba(35, 74, 116, 0.4);
}

.section--spec .section__footer {
  text-align: center;
  margin-top: 28px;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .spec-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .spec-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------
   施工事例
------------------------------------------------------- */

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.work-card {
  background-color: #ffffff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* サムネイル枠：ホバー時拡大用に隠す */
.work-card__thumb {
  overflow: hidden;
}

/* 画像：ホバーでズーム */
.work-card__thumb img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* カードホバーで写真が拡大 */
.work-card:hover .work-card__thumb img {
  transform: scale(1.06);
}

.work-card__body {
  padding: 12px 12px 14px;
}

.work-card__title {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 500;
}

.work-card__meta {
  margin: 0 0 6px;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.work-card__tagline {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-text-soft);
}

/* 一覧ボタンを下部中央に */
.section__footer--works {
  text-align: center;
  margin-top: 28px;
}

/* 施工事例セクションの一覧ボタンを見えるように */
.section--works .section__footer--works .btn--outline {
  background-color: #ffffff;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

/* ホバー時は少しだけ塗りつぶし */
.section--works .section__footer--works .btn--outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* SP レイアウト調整（必要であれば） */
@media (max-width: 1023px) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .work-card__thumb img {
    height: 170px;
  }
}
@media (max-width: 767px) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------
   モデルハウス
------------------------------------------------------- */

/* 左右のバランス：画像側を少し絞る */
.section--modelhouse .section__body--visual {
  flex: 0 0 58%; /* 画像エリア */
}

.section--modelhouse .section__body--text {
  flex: 0 0 42%; /* テキストエリア */
}

/* 画像カードの見た目＆比率 */
.modelhouse-visual {
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  aspect-ratio: 16 / 9; /* 横長に少し絞る */
}

.modelhouse-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 情報テーブルはそのまま */
.modelhouse-info {
  font-size: 0.9rem;
}

.modelhouse-info__row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted #d4d4d4;
}

.modelhouse-info__row:last-child {
  border-bottom: none;
}

.modelhouse-info dt {
  color: var(--color-text-soft);
}

.modelhouse-info dd,
.flooring-room,
.flooring-sample,
.flooring-combi__image,
.water-washbasin-style-grid .water-item,
.form-input-wrap,
body.page-water .water-kitchen-design-item,
body.is-spec .spec-faq__a p{
  margin: 0;
}
/* モデルハウスセクションの「詳細を見る」ボタンを見えるように */
.section--modelhouse .section__footer .btn--outline {
  background-color: #ffffff;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

/* ホバー時はネイビー塗り＋白文字に */
.section--modelhouse .section__footer .btn--outline:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* タブレット以下は縦並びで全幅に */
@media (max-width: 959px) {
  .section--modelhouse .l-flex {
    flex-direction: column;
  }
  .section--modelhouse .section__body--visual,
  .section--modelhouse .section__body--text {
    flex: 1 1 auto;
  }
  .modelhouse-visual {
    max-width: 100%;
  }
}

/* -------------------------------------------------------
   家づくりの流れ（背景画像あり）
------------------------------------------------------- */
.section--flow {
  position: relative;
  color: #fff;
}

.flow-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/kitakyushu.jpg");
  background-size: cover;
  background-position: center;
}

.flow-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(15 23 42 / 17%), rgb(16 51 86 / 90%));
}

.section--flow > .l-container {
  position: relative;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.flow-step {
  border-radius: var(--radius-md);
  border: 1px solid rgb(255 255 255 / 36%);
  padding: 14px 12px 14px;
  font-size: 0.88rem;
  backdrop-filter: blur(11px);
}

.flow-step__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e5edf4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.flow-step__title {
  margin: 0 0 4px;
  font-size: 0.94rem;
  font-weight: 500;
}

.flow-step__text {
  margin: 0;
  color: rgba(226, 232, 240, 0.9);
}

/* -------------------------------------------------------
   お知らせ
------------------------------------------------------- */

.news-list {
  border-radius: var(--radius-md);
}

.news-item {
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.88rem;
}

.news-item__date {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  min-width: 80px;
}

.news-item__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #f3e7d3;
  color: var(--color-accent);
  min-width: 70px;
}

.news-item__title {
  flex: 1;
}

/* お知らせセクションの「一覧を見る」ボタンを見えるように */
.section--news .section__head .btn--ghost.btn--sm {
  background-color: #ffffff;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
  padding-inline: 1.4em;
}

/* ホバー時はネイビー塗りつぶし＋白文字 */
.section--news .section__head .btn--ghost.btn--sm:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* -------------------------------------------------------
   CTA
------------------------------------------------------- */
.section--cta {
  background-color: #111827;
  color: #ffffff;
}

.section--cta .section__lead {
  color: rgba(255, 255, 255, 0.85);
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.cta-card {
  background-color: #1f2937;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 14px 16px;
  font-size: 0.9rem;
}

.cta-card__title {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cta-card__title i {
  color: #facc15;
}

.cta-card__text {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.8);
}

/* -------------------------------------------------------
   メガフッター（背景画像あり）
------------------------------------------------------- */
.site-footer {
  position: relative;
  color: #f9fafb;
  margin-top: 0;
  padding-top: 50px;
}

.footer-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/dummy.jpg");
  background-size: cover;
  background-position: center;
}

.footer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgb(15 23 42 / 33%), rgb(1 11 34));
}

.site-footer__inner {
  position: relative;
  display: flex;
  gap: 40px;
  padding: 36px 16px 32px;
  min-height: 260px; /* 通常の約1.5倍イメージ */
}

.site-footer__brand {
  flex: 1.2;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.site-footer__logo img {
  height: 36px;
  object-fit: cover;
}

.site-footer__brand-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.site-footer__address {
  font-size: 0.82rem;
  color: rgba(249, 250, 251, 0.85);
  margin-bottom: 10px;
  line-height: 1.8;
}

.site-footer__copy {
  font-size: 0.86rem;
  color: rgba(249, 250, 251, 0.85);
  margin-bottom: 12px;
}

.site-footer__sns {
  display: flex;
  gap: 8px;
}

.sns-link {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(31, 41, 55, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.site-footer__nav {
  flex: 1.6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  font-size: 0.86rem;
}

.footer-nav__title {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 500;
}

.footer-nav__list li {
  margin-bottom: 4px;
  color: rgba(249, 250, 251, 0.86);
}

.footer-nav__list a {
  color: rgba(249, 250, 251, 0.9);
}

.group-banners {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-banner {
  display: block;
  font-size: 0.82rem;
  color: rgba(249, 250, 251, 0.85);
}

.group-banner__label {
  font-weight: 500;
}

.group-banner__note {
  display: block;
  font-size: 0.78rem;
  color: rgba(249, 250, 251, 0.7);
}

.site-footer__bottom {
  position: relative;
  padding: 12px 0 18px;
}

.site-footer__bottom-inner {
  text-align: center;
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(249, 250, 251, 0.7);
}

/* -------------------------------------------------------
   レスポンシブ
------------------------------------------------------- */
@media (max-width: 1023px) {
  

  .concept-body {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .price-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .price-visual--right {
    display: none;
  }

  .lineup-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catlife-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spec-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .section {
    padding: 44px 0;
  }

  .hero__inner {
    justify-content: center;
    padding-top: 56px;
    padding-bottom: 40px;
  }

  .hero__title {
    font-size: 1.7rem;
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .l-flex {
    flex-direction: column;
  }

  .concept-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-visual--left,
  .price-visual--right {
    display: none;
  }

  .lineup-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .catlife-grid,
  .spec-feature-grid,
  .works-grid,
  .flow-steps,
  .cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section__head--row {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__inner {
    flex-direction: column;
    min-height: auto;
  }

  .site-footer__nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------
   固定CTA
------------------------------------------------------- */
.fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.92),
    rgba(15, 23, 42, 0.88)
  );
  backdrop-filter: blur(14px);
  /* 最初は画面外に隠しておく */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

/* 表示状態：下からにゅっと出てくる */
.fixed-cta.fixed-cta--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.fixed-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  font-size: 0.86rem;
  color: #f9fafb;
}

.fixed-cta__label {
  margin: 0;
  white-space: nowrap;
}

.fixed-cta__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fixed-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fixed-cta__icon-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* メール／電話アイコンボタン */
.fixed-cta__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.4);
  color: #f9fafb;
  backdrop-filter: blur(10px);
  font-size: 0.95rem;
}

/* 固定CTAぶんの余白を下に確保（常時でOK） */
body {
  padding-bottom: 60px;
}

/* SP調整 */
@media (max-width: 767px) {
  .fixed-cta__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .fixed-cta__label {
    white-space: normal;
    text-align: center;
    display: none;
  }

  .fixed-cta__buttons {
    justify-content: space-between;
    width: 100%;
  }

  .fixed-cta__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .fixed-cta__icon-group {
    flex: 0 0 auto;
  }

  .fixed-cta .btn {
    justify-content: center;
  }

  body {
    padding-bottom: 88px;
  }
}

/* =========================================================
   下層ページ：地盤調査ページ
   ====================================================== */

/* サブMV */
.subhero {
  position: relative;
  min-height: 46vh;
  padding: 88px 0 40px;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  background-color: #111827;
  overflow: hidden;
}

.subhero__bg {
  position: absolute;
  inset: 0;
  background-image: url("images/dummy.jpg");
  background-size: cover;
  background-position: center;
}

.subhero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(15 23 42 / 30%), rgb(15 23 42 / 85%));
}

.subhero__inner {
  position: relative;
}

.subhero__breadcrumb {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: rgba(249, 250, 251, 0.8);
}

.subhero__breadcrumb a {
  text-decoration: underline;
}

.subhero__titles {
  max-width: 640px;
}

.subhero__eyebrow {
  margin: 0 0 4px;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.subhero__title-en {
  margin: 0 0 4px;
  font-size: 2.2rem;
  letter-spacing: 0.06em;
}

.subhero__title-ja {
  margin: 0;
  font-size: 1rem;
}

/* SP */
@media (max-width: 767px) {
  .subhero {
    padding-top: 72px;
    padding-bottom: 32px;
    min-height: 38vh;
  }
  .subhero__title-en {
    font-size: 1.9rem;
  }
}

/* 地盤調査本文 */

.spec-detail-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
}

.spec-detail-intro__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.spec-detail__title-en {
  font-size: 1.8rem;
  margin: 0 0 0.3em;
  letter-spacing: 0.05em;
}

.spec-detail__title-ja {
  margin: 0 0 1em;
  font-size: 1.02rem;
  font-weight: 500;
}

.section--spec-detail p {
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

.spec-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px;
}

.spec-section-head__icon {
  width: 22px;
  height: auto;
}

.spec-section-head__title {
  margin: 0;
  font-size: 1.3rem;
}

/* 横長画像：スマホで横スクロール */
.spec-horizontal-scroll {
  margin: 18px 0 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spec-horizontal-scroll__inner {
  display: inline-block;
}

.spec-horizontal-scroll img {
  display: block;
  max-width: none; /* コンテナ幅に縛られないように */
  height: auto;
}

/* スマホでは少しはみ出させてスワイプしやすく */
@media (max-width: 767px) {
  .spec-horizontal-scroll {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .spec-horizontal-scroll img {
    min-width: 300px; /* 画面幅より広くして横スクロール */
  }
}

/* =========================================================
   地盤調査：SWS 試験ブロック
   ====================================================== */
.spec-block--sws {
  max-width: 840px;
  margin: 64px auto 0;
}

/* タイトル・本文を中央寄せ */
.spec-block--sws .spec-block__lead {
  text-align: center;
}

.spec-block--sws .spec-section-head {
  justify-content: center;
}

/* SWS画像：PCは中央にちょうど良いサイズ、SPは画面幅で全体表示 */
.spec-image--sws {
  margin: 24px auto 32px;
  text-align: center;
}

.spec-image--sws img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 767px) {
  .spec-image--sws img {
    max-width: 100%;
  }
}

.spec-section-head{
      justify-content: center;

}

/* 工法のグリッド */
.spec-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 10px 0px 40px;
}

.spec-method {
  border-radius: var(--radius-lg);
  border: 1px solid #e5e7eb;
  padding: 14px 14px 16px;
  background-color: #ffffff;
  box-shadow: var(--shadow-card);
  font-size: 0.9rem;
}

.spec-method__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 500;
}

.spec-method__range {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.spec-method__text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .spec-detail-intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .spec-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .spec-detail-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .spec-methods {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   下層ページ共通：パンくず
   ====================================================== */
.breadcrumb-bar {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.breadcrumb-bar__inner {
  margin: 0;
  padding: 8px 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow-x: auto;
}

.breadcrumb-bar__inner a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* =========================================================
   地盤調査：SWSブロックの中央寄せ
   ====================================================== */
.spec-block__lead--center {
  text-align: center;
}

.spec-block__lead--center .spec-section-head {
  justify-content: center;
}

/* SWS画像：PCでは中央寄せ＋ちょうど良いサイズ、SPではスクロールなしで全体表示 */
.spec-image {
  margin: 24px auto 32px;    /* すこし余白を広めに */
  text-align: center;
}

.spec-image img {
  width: 100%;
  max-width: 1040px;         /* ← 800px → 1040px に拡大 */
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* SP では画面幅いっぱいにフィット */
@media (max-width: 767px) {
  .spec-image img {
    max-width: 100%;
  }
}

/* 地盤改良図など横長画像用：
   PCは画像を少し小さめ＆中央寄せ、SPだけ横スライド表示 */
.spec-horizontal-scroll--wide {
  margin: 18px 0 26px;
  overflow-x: visible;        /* PCではスクロールさせない */
}

.spec-horizontal-scroll--wide .spec-horizontal-scroll__inner {
  display: block;
  text-align: center;
}

.spec-horizontal-scroll--wide img {
  display: block;
  width: 100%;
  max-width: 880px;           /* ★PC時の画像の最大幅（大きさはここで調整） */
  margin: 0 auto;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* SPでは横スクロールして「スライド」表示＋画像も少し小さめ */
@media (max-width: 767px) {
  .spec-horizontal-scroll--wide {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: auto;               /* ★スマホだけ横スクロール */
    -webkit-overflow-scrolling: touch;
  }

  .spec-horizontal-scroll--wide .spec-horizontal-scroll__inner {
    display: inline-block;
  }

  .spec-horizontal-scroll--wide img {
    width: auto;
    max-width: none;
    min-width: 320px;               /* ★元の680pxより小さく：必要なら480〜560くらいで微調整 */
    height: auto;
  }
}

/* =========================================================
   構造躯体ページ：ハイブリッド・ビーム／国産杉・米松
   ====================================================== */

.spec-block--structure {
  max-width: 900px;
  margin: 64px auto 0;
}

/* 国産杉・米松の特徴ブロック */
.structure-materials {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 760px;
  margin: 24px auto 32px;
}

.structure-material {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}

.structure-material__image {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 10px;
  box-shadow: var(--shadow-card);
}

.structure-material__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.structure-material__name {
  margin: 0 0 4px;
  font-size: 0.96rem;
  font-weight: 500;
}

.structure-material__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* JAS制度説明テキスト */
.structure-jas-text {
  max-width: 820px;
  margin: 8px auto 0;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  text-align: left;
}

/* =========================================================
   面材（Sub structure）ページ用 追記スタイル
   ====================================================== */

.substructure-feature__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.substructure-feature__caption {
  margin: 0;
}

/* 振動実験写真＋グラフ：1カラムで少し小さめに表示 */
/* 振動実験写真＋グラフ：1カラムで大きめ表示 */
.substructure-image-pair {
  max-width: 700px;             /* 640px → 900px に拡大 */
  margin: 24px auto 32px;
}

.substructure-image-pair__main,
.substructure-image-pair__sub {
  max-width: 860px;             /* 520px → 860px に拡大 */
  margin: 0 auto 18px;          /* 中央寄せ＋上下に少し余白 */
}

.substructure-image-pair__main img,
.substructure-image-pair__sub img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* SPでも1カラムで画面幅にフィット */
@media (max-width: 767px) {
  .substructure-image-pair {
    max-width: 100%;
    padding: 0 8px;
  }

  .substructure-image-pair__main,
  .substructure-image-pair__sub {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .spec-horizontal-scroll--wide img {
    width: 80%;          /* コンテナ幅の80％くらいに */
    max-width: 880px;    /* 最大幅の上限 */
    margin-left: auto;   /* 中央寄せ */
    margin-right: auto;
  }
}

/* =========================================================
   面材ページ：スマホの横長画像を小さめ＋スライドありに調整
   対象：
   ・燃えにくいから火災に強い
   ・省令準耐火の住宅に対応
   ・湿気に強い理由
   ・住まいの大敵「壁内結露」の防止
   ====================================================== */
@media (max-width: 767px) {

  /* コンテナを少し細くして、その中だけ横スクロールにする */
  .spec-block--methods .spec-horizontal-scroll--wide {
    width: 80vw;                /* ← 画面幅の 8 割くらいに */
    margin: 0 auto;             /* 中央寄せ */
    padding-left: 0;
    padding-right: 0;
    overflow-x: auto;           /* スライド有効 */
    -webkit-overflow-scrolling: touch;
  }

  .spec-block--methods .spec-horizontal-scroll--wide .spec-horizontal-scroll__inner {
    display: inline-block;
  }

  .spec-block--methods .spec-horizontal-scroll--wide img {
    width: 120%;                /* コンテナより少し大きい → 横にスライドできる */
    max-width: none;
    min-width: 0;               /* 既存の min-width:300/320px を打ち消す */
    height: auto;
  }
}

/* =========================================================
   面材ページ：丸アイコン（ダイライト特長）SP時は3列2行レイアウト
   ====================================================== */

   @media (max-width: 767px) {

  /* セクション全体を中央寄せ（あれば） */
  .section--substructure .l-container {
    display: flex;
    justify-content: center;
  }

  /* =====================================================
     構造躯体ページ：国産杉・米松
     SP時も横並び＆中央配置（2列）
     ===================================================== */
  .spec-block--structure .structure-materials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 360px;
    margin: 24px auto 32px;
  }

  .spec-block--structure .structure-material {
    flex: 0 0 45%;      /* スマホで2列表示 */
    max-width: 150px;
    margin: 0 auto;
    text-align: center;
  }

  .spec-block--structure .structure-material__image {
    width: 120px;
    margin: 0 auto 10px;
  }
}

/* =========================================================
   面材ページ：丸アイコン（ダイライト特長）
   PC：今までどおり
   SP：3列2行＆中央寄せ
   ====================================================== */

/* PC / タブレット共通（元のまま） */
.substructure-feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 24px auto 8px;
  max-width: 880px;
}

.substructure-feature {
  width: 150px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--color-text-soft);
}

.substructure-feature__thumb {
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto 6px;
  box-shadow: var(--shadow-card);
  background-color: #fff;
}

.substructure-feature__caption {
  margin: 0;
}

/* SP：3列2行レイアウト＆中央配置 */
@media (max-width: 767px) {
  .substructure-feature-grid {
    display: grid;                                   /* グリッドに変更 */
    grid-template-columns: repeat(3, minmax(0, 1fr));/* 3列 */
    gap: 16px 12px;
    max-width: 330px;                                /* 画面より少し細く */
    margin: 24px auto 8px;                           /* ブロック自体を中央 */
    justify-items: center;                           /* 各アイコンも中央 */
    align-items: start;
  }

  .substructure-feature {
    width: auto;
    text-align: center;
    font-size: 0.78rem;
  }

  .substructure-feature__thumb {
    width: 90px;                                     /* 丸を少し小さく */
    aspect-ratio: 1 / 1;
    margin: 0 auto 6px;
  }
}

/* =========================================================
   構造躯体ページ：国産杉・米松
   PC：今までどおり
   SP：2列＆中央寄せ
   ====================================================== */

/* PC / タブレット用（元のまま） */
.structure-materials {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 760px;
  margin: 24px auto 32px;
}

/* SP 用 */
@media (max-width: 767px) {
  .spec-block--structure .structure-materials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;          /* 全体を中央寄せ */
    gap: 18px;
    max-width: 360px;
    margin: 24px auto 32px;           /* ブロックごと中央 */
  }

  .spec-block--structure .structure-material {
    flex: 0 0 50%;                    /* 2列表示 */
    max-width: 160px;
    margin: 0 auto;
    text-align: center;
  }

  .spec-block--structure .structure-material__image {
    width: 120px;
    margin: 0 auto 10px;
  }
}

/* =========================================================
   断熱材ページ専用スタイル
   spec-insulation.html
   ====================================================== */

/* サブMV：断熱材ページ用背景 */
.subhero--insulation .subhero__bg {
  background-image: url("images/spec-top-insulation.jpg");
}

/* アクアフォーム紹介ブロック */
.spec-block--insulation {
  max-width: 900px;
  margin: 64px auto 0;
  background-color: #ffffff; /* バックグラウンドは白 */
}

/* アクアフォームの特徴テーブル */
.insulation-feature-table-wrap {
  margin: 24px 0 32px;
}

.insulation-feature-table {
  margin: 0 auto;
  max-width: 840px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
}

.insulation-feature-table__cell {
  background-color: #f3f4f6;
  padding: 10px 12px;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.6;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.insulation-feature-table__cell--full {
  grid-column: 1 / -1;
  font-weight: 500;
}

/* ヒートショック対策ブロック */
.spec-block--heatshock {
  max-width: 960px;
  margin: 64px auto 0;
}

/* 断熱材イラスト・比較ブロック */
.insulation-comparison {
  max-width: 960px;
  margin: 32px auto 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: flex-start;
}

.insulation-comparison__item-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.insulation-comparison__lead {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--color-text-soft);
  text-align: left;
}

.insulation-comparison__illust {
  max-width: 260px;
  margin: 0 auto 12px;
}

.insulation-comparison__illust img {
  width: 100%;
  height: auto;
  display: block;
}

.insulation-comparison__thermo {
  margin-top: 6px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.insulation-comparison__thermo img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 4px;
}

/* SP 調整 */
@media (max-width: 767px) {

  .spec-block--insulation,
  .spec-block--heatshock {
    margin-top: 40px;
  }

  .insulation-feature-table {
    font-size: 0.84rem;
  }

  .insulation-comparison {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .insulation-comparison__illust {
    max-width: 220px;
  }
}

/* =========================================================
   断熱材ページ：アクアフォーム中央イラスト
   ====================================================== */
.insulation-illust {
  max-width: 420px;
  margin: 40px auto 32px;
  text-align: center;
}

.insulation-illust img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP 調整 */
@media (max-width: 767px) {
  .insulation-illust {
    max-width: 280px;
    margin: 32px auto 24px;
  }
}

/* =========================================================
   断熱窓ページ（spec-thermal_insulation.html）用スタイル
   ====================================================== */

/* サブMV背景 */
.subhero--thermal .subhero__bg {
  background-image: url("images/spec-top-thermal_insulation.jpg");
  background-size: cover;
  background-position: center;
}

/* 導入イメージ（レイアウトは既存 spec-detail-intro に準拠） */
@media (max-width: 767px) {
  .spec-detail-intro__image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* サーモス構造 図版（PC：3枚横並びで少し小さく表示） */
.thermal-structure {
  max-width: 960px;
  margin: 32px auto 32px;
  display: flex;
  justify-content: center;
  gap: 100px;
}

.thermal-structure__image {
  flex: 0 0 28%;      /* 3枚並ぶくらいの幅に */
  max-width: 260px;   /* 画像を少し小さめに */
}

.thermal-structure__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホでは縦並び・フル幅に戻す */
@media (max-width: 767px) {
  .thermal-structure {
    flex-direction: column;
    max-width: 840px;
  }

  .thermal-structure__image {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* 断熱シミュレーション */
.thermal-simulation {
  max-width: 840px;
  margin: 32px auto 0;
  display: flex;
  gap: 32px;
  justify-content: center;
}

.thermal-simulation__item {
  flex: 1 1 0;
  text-align: center;
}

.thermal-simulation__image img {
  width: 100%;
  height: auto;
  display: block;
}

.thermal-simulation__caption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.thermal-simulation__note {
  max-width: 840px;
  margin: 20px auto 0;
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: left;
  color: #555;
}

/* 窓の施工イメージ */
.thermal-window-gallery {
  max-width: 960px;
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.thermal-window-gallery__item {
  flex: 1 1 calc(33.333% - 24px);
}

.thermal-window-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ調整 */
@media (max-width: 767px) {
  .thermal-simulation {
    flex-direction: column;
    gap: 24px;
  }

  .thermal-window-gallery__item {
    flex: 1 1 100%;
  }

  .thermal-simulation__note {
    font-size: 0.78rem;
  }
}

/* =========================================================
   玄関ドアページ（spec-entrancedoor.html）用スタイル
   ====================================================== */

/* サブMV背景 */
.subhero--entrancedoor .subhero__bg {
  background-image: url("images/spec-top-entrancedoor.jpg");
  background-size: cover;
  background-position: center;
}

/* 導入イメージ：スマホで全幅表示 */
@media (max-width: 767px) {
  .spec-detail-intro__image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ---------------------------------------------------------
   採風・採光ギャラリー
   --------------------------------------------------------- */
.entrance-breeze-gallery {
  max-width: 960px;
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.entrance-breeze-item {
  flex: 1 1 calc(33.333% - 24px);
  max-width: calc(33.333% - 24px);
}

.entrance-breeze-item--wide {
  flex: 1 1 45%;
  max-width: 45%;
}

.entrance-breeze-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* SPでは縦一列に */
@media (max-width: 767px) {
  .entrance-breeze-gallery {
    flex-direction: column;
    gap: 16px;
  }

  .entrance-breeze-item,
  .entrance-breeze-item--wide {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   カギまわりの写真
   --------------------------------------------------------- */
.entrance-keys-grid {
  max-width: 840px;
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.entrance-keys-item {
  flex: 1 1 calc(25% - 24px);
  max-width: calc(25% - 24px);
}

.entrance-keys-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 大きいメイン写真 */
.entrance-keys-main {
  max-width: 480px;
  margin: 32px auto 0;
}

.entrance-keys-main img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP 調整 */
@media (max-width: 767px) {
  .entrance-keys-grid {
    flex-direction: column;
    gap: 16px;
  }

  .entrance-keys-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .entrance-keys-main {
    margin-top: 24px;
  }
}

/* ---------------------------------------------------------
   バリエーション（ドア7枚並び）
   --------------------------------------------------------- */
.entrance-variation-gallery {
  max-width: 960px;
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.entrance-variation-item {
  flex: 0 1 calc(14.285% - 16px); /* 7枚で一列イメージ */
  max-width: 100px;
}

.entrance-variation-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* SPでは2〜3列程度で折り返し */
@media (max-width: 767px) {
  .entrance-variation-item {
    flex: 1 1 30%;
    max-width: 30%;
  }
}

/* =========================================================
   玄関ドアページ（spec-entrancedoor.html）専用レイアウト調整
   ====================================================== */

/* -----------------------------
   採風・採光について
   PC: 上段3枚・下段2枚のグリッド
   SP: 1列で縦並び
----------------------------- */
.entrance-breeze-block {
  max-width: 960px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.entrance-breeze-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.entrance-breeze-item {
  flex: 1 1 0;
}

.entrance-breeze-row--bottom .entrance-breeze-item {
  flex: 0 0 45%; /* 下段は2枚なので少し広め */
}

.entrance-breeze-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP は縦並びにする（現在の表示を維持） */
@media (max-width: 767px) {
  .entrance-breeze-block {
    gap: 16px;
  }

  .entrance-breeze-row {
    flex-direction: column;
    gap: 16px;
  }

  .entrance-breeze-row--bottom .entrance-breeze-item {
    flex: 1 1 auto;
  }
}

/* -----------------------------
   使いやすいカギを家族一人ひとり
   PC: 4つのキーを横並び＋下に大画像
   SP: 4つは縦並び、その下に大画像
----------------------------- */

.entrance-key-block {
  max-width: 960px;
  margin: 40px auto 0;
}

.entrance-key-types {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.entrance-key-type {
  flex: 1 1 0;
  text-align: center;
}

.entrance-key-type__image img {
  display: block;
  width: 100%;
  height: auto;
}

.entrance-key-type__caption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.entrance-key-main {
  margin-top: 32px;
  text-align: center;
}

.entrance-key-main img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* SP 調整：4つのキーは縦並びに */
@media (max-width: 767px) {
  .entrance-key-block {
    margin-top: 32px;
  }

  .entrance-key-types {
    flex-direction: column;
    gap: 24px;
    max-width: 480px;
    margin: 0 auto;
  }

  .entrance-key-main {
    margin-top: 24px;
  }
}

/* -----------------------------
   暮らしの数だけ選べるバリエーション
   PCレイアウトをスマホでも維持
  （横一列＋スマホは横スクロール）
----------------------------- */

.entrance-variation-block {
  max-width: 960px;
  margin: 40px auto 0;
}

.entrance-variation-list {
  display: flex;
  justify-content: center;
  gap: 0px;
  flex-wrap: nowrap;
}

.entrance-variation-item {
  flex: 0 0 auto;
}

.entrance-variation-item img {
  display: block;
  height: 180px;
  width: auto;
}

/* スマホはPC同様横並びのまま、横スクロールを許可 */
@media (max-width: 767px) {
  .entrance-variation-block {
    margin-top: 32px;
  }

  /* スマホでは 4列＋3列の2行で全て表示 */
  .entrance-variation-list {
    display: grid;                             /* flex から上書き */
    grid-template-columns: repeat(4, 1fr);     /* 4列グリッド */
    gap: 0px;
    justify-content: center;
    overflow: visible;                         /* 横スクロールを解除 */
    padding: 0;
  }

  .entrance-variation-item {
    text-align: center;
  }

  .entrance-variation-item img {
    width: 100%;       /* セルの幅いっぱいに */
    height: auto;
    max-width: 200px;   /* 大きすぎないよう上限を調整 */
    margin: 0 auto;
  }
}

/* =========================================================
   換気システムページ（spec-ventilation.html）用スタイル
   ====================================================== */

/* サブMV背景 */
.subhero--ventilation .subhero__bg {
  background-image: url("images/spec-top-ventilation.jpg");
  background-size: cover;
  background-position: center;
}

/* 導入イメージ（スマホ時は横幅100％） */
@media (max-width: 767px) {
  .spec-detail-intro__image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 各セクションの図版 */
.ventilation-figure {
  max-width: 720px;
  margin: 32px auto 0;
}

.ventilation-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 換気ブロック共通余白微調整 */
.spec-block--vent,
.spec-block--water-kitchen-design,
.spec-block--after-long,
body.page-after .spec-block--after-long{
  margin-top: 64px;
}

/* 標準仕様ナビ：現在ページ強調（任意） */
.spec-feature--current {
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 0 0 2px #f39c12 inset;
}

/* =========================================================
   フローリング＆ドア レイアウト調整
   （部屋の質感～ / 表現豊かな～ / 組み合わせ例）
   ====================================================== */

/* --------------------------------
   部屋の質感をガラリと変える床
   2列レイアウト＋スキマを詰める
----------------------------------- */
.flooring-room-grid {
  max-width: 840px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
  column-gap: 14px;   /* 横のスキマを狭める */
  row-gap: 20px;      /* 縦のスキマも少し詰める */
}

.flooring-room img {
  display: block;
  width: 100%;
  height: auto;
}

.flooring-room__caption {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.6;
}

/* --------------------------------
   表現豊かなフローリング・ドア
   4列のサンプル画像のスキマ調整
----------------------------------- */
.flooring-sample-grid {
  max-width: 840px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列 */
  column-gap: 10px;   /* 横のスキマ */
  row-gap: 10px;      /* 縦のスキマ */
}

.flooring-sample img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------
   フローリングとドアの組み合わせ例
   室内＋ボード画像を縦並び・スキマ小さめ
----------------------------------- */
.flooring-combi-grid {
  max-width: 840px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px; /* 行と行の間を狭める */
}

.flooring-combi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
  column-gap: 14px;  /* 室内画像とボード画像の間を詰める */
}

.flooring-combi__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホでも基本レイアウトはPCと同じで、少しだけスキマを調整 */
@media (max-width: 767px) {
  .flooring-room-grid,
  .flooring-sample-grid,
  .flooring-combi-row {
    column-gap: 8px;
    row-gap: 12px;
  }

  .flooring-room__caption {
    font-size: 0.76rem;
  }
}

/* =========================================================
   その他内装ページ（spec-interior.html）用スタイル
   ====================================================== */

/* サブMV背景 */
.subhero--others .subhero__bg {
  background-image: url("images/spec-top-others.jpg");
  background-size: cover;
  background-position: center;
}

/* メインのコラージュ画像 */
.others-main-visual {
  max-width: 960px;
  margin: 32px auto 0;
}

.others-main-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ時の少しだけ余白調整 */
@media (max-width: 767px) {
  .others-main-visual {
    margin-top: 24px;
  }
}

/* =========================================================
   外壁ページ（spec-exterior.html）用スタイル
   ====================================================== */

/* サブMV背景 */
.subhero--wall .subhero__bg {
  background-image: url("images/spec-top-wall.jpg");
  background-size: cover;
  background-position: center;
}

/* ------------------------------
   見た目を大きく左右する外壁デザイン
   ------------------------------ */

.wall-design-grid {
  max-width: 880px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;               /* ← ここをグッと狭くしました */
}

.wall-design-grid__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP：3列×2行 → 2列×3行（すき間は少しだけ広め） */
@media (max-width: 767px) {
  .wall-design-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* --------------------------------
   横スライド用コンポーネント
   （カッコ付き画像の共通レイアウト）
   -------------------------------- */

/* ラッパー */
.wall-horizontal-scroll {
  max-width: 880px;
  margin: 24px auto 0;
  overflow: visible;              /* PCではスクロールさせない */
}

/* PC：縦に積む・中央揃え */
.wall-horizontal-scroll__inner {
  display: flex;
  flex-direction: column;         /* PCでは縦並び */
  align-items: center;
  gap: 20px;
}

/* 各画像のベースサイズ（PC） */
.wall-horizontal-scroll__item {
  width: 100%;
  max-width: 650px;               /* 標準サイズ */
}

.wall-horizontal-scroll__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 「塗膜の変色・褪色15年保証に対応」1枚目だけ少し小さく */
.wall-horizontal-scroll__item--narrow {
  max-width: 300px;               /* 1枚目専用（spec-wall_08.jpg） */
}

/* 1枚だけのセクション用（例：美しさが30年続く外壁材） */
.wall-horizontal-scroll--single .wall-horizontal-scroll__item {
  max-width: 360px;
}

/* ------------------------------
   SP時：画像そのものを横スクロール
   （レイアウトはPCと同じく縦並び）
   ------------------------------ */
@media (max-width: 767px) {

  /* セクション全体は画面幅いっぱい */
  .wall-horizontal-scroll {
    max-width: 100%;
    margin-top: 16px;
    padding: 0 0 0 0;
    overflow: visible;   /* 横スクロールは各画像側で行う */
  }

  /* PCと同じく縦に積む */
  .wall-horizontal-scroll__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* 各画像コンテナを横スクロール領域にする */
  .wall-horizontal-scroll__item {
    width: 100%;
    max-width: none;
    overflow-x: auto;                 /* ← ここで横スクロール */
    -webkit-overflow-scrolling: touch;
  }

  /* 画像を画面より少し大きくして、横にスライドして見られるように */
  .wall-horizontal-scroll__item img {
    width: 120%;                      /* 画面より大きく表示 */
    min-width: 600px;                 /* 小さい端末でもある程度の幅を確保 */
    display: block;
  }

  /* 「小さく見せたい1枚目」も同じ方式でOK
     ※特別なサイズを付けたい場合だけここを調整 */
  .wall-horizontal-scroll__item--small img {
    width: 110%;
    min-width: 360px;
  }

  /* 1枚だけのセクション（美しさが30年続く など） */
  .wall-horizontal-scroll--single .wall-horizontal-scroll__item img {
    width: 120%;
    min-width: 480px;
  }
}

/* =========================================================
   水まわり：キッチン（暮らしにフィットするデザイン）
   ====================================================== */

/* セクション全体の余白 */

/* 見出し・リードテキスト（中央） */
.spec-block--water-kitchen-design .spec-block__lead {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.spec-block--water-kitchen-design .spec-block__lead p {
  margin-top: 8px;
  line-height: 1.9;
}

/* 画像レイアウトエリア（PC） */
.water-kitchen-design {
  max-width: 1120px;
  margin: 40px auto 0;
}

/* 各行（PC：横並び） */
.water-kitchen-design__row {
  display: flex;
  justify-content: center;
  gap: 10px;                /* 画像と画像の横の隙間 10px */
}

/* 行と行の間隔 30px */
.water-kitchen-design__row + .water-kitchen-design__row {
  margin-top: 30px;
}

/* 各画像（サイズ統一用） */
.water-kitchen-design__item {
  flex: 0 0 calc((100% - 20px) / 3);  /* 3枚並び時の幅を統一（隙間10px×2=20px） */
  max-width: calc((100% - 20px) / 3);
  margin: 0;
  padding: 0;
}

.water-kitchen-design__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 下段の画像も同じサイズにする */
.water-kitchen-design__item--wide {
  flex: 0 0 calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  margin: 0;
  padding: 0;
}

/* ---------------------------------
   スマホ表示（2列グリッド：2・2・1）
   --------------------------------- */
@media (max-width: 767px) {
  .spec-block--water-kitchen-design {
    margin-top: 48px;
  }

  .water-kitchen-design {
    max-width: 520px;
    padding: 0 16px;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    column-gap: 10px;  /* 画像と画像の横の隙間 10px */
    row-gap: 30px;     /* 行の間隔 30px */
  }

  /* 行コンテナはレイアウト上消して、中の figure をグリッドに参加させる */
  .water-kitchen-design__row {
    display: contents;
    margin: 0;
  }

  .water-kitchen-design__row + .water-kitchen-design__row {
    margin-top: 0;
  }

  /* 各画像はグリッドのセルいっぱいに */
  .water-kitchen-design__item,
  .water-kitchen-design__item--wide {
    flex: none;
    max-width: 100%;
  }

  /* 5枚目だけ1列分を占有（下段1枚センター） */
  .water-kitchen-design__item:nth-of-type(5) {
    grid-column: 1 / -1;
  }
}

/* =================================================
   水まわり：キッチン（パーツご紹介）
   ================================================= */

.spec-block--water-kitchen-parts,
.spec-block--after-compare,
.spec-block--after-target,
.spec-block--after-build,
.spec-block--after-after,
.spec-block--after-equipment,
.spec-block--after-line,
body.page-after .spec-block--after-compare,
body.page-after .spec-block--after-target,
body.page-after .spec-block--after-build,
body.page-after .spec-block--after-after,
body.page-after .spec-block--after-equipment,
body.page-after .spec-block--after-line,
body.page-after .spec-block--after-faq{
  margin-top: 80px;
}

/* 見出し・リードテキスト（中央揃え） */
.spec-block--water-kitchen-parts .spec-block__lead {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

/* グリッド全体（PC：4列） */
.water-kitchen-parts-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
}

/* 各パーツカード */
.water-kitchen-parts-grid .water-item {
  margin: 0;                 /* figure のデフォルト余白を消す */
  text-align: center;
}

/* 画像サイズを統一（縦横比も揃える） */
.water-kitchen-parts-grid .water-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;       /* 横長 4:3 でトリミング */
  object-fit: cover;
}

/* キャプション */
.water-kitchen-parts-grid .water-item__caption {
  margin-top: 8px;
  font-size: 14px;
}

/* ----------------------------
   スマホ（2列に崩して見やすく）
   ---------------------------- */
@media (max-width: 767px) {
  .water-kitchen-parts-grid {
    max-width: 520px;
    padding: 0 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← 3列表示 */
    column-gap: 10px;   /* 画像同士の横のすき間 */
    row-gap: 20px;      /* 縦のすき間 */
  }

  .water-kitchen-parts-grid .water-item__caption {
    font-size: 12px;
  }
}

/* =================================================
   水まわり：バスルーム（選べる仕様のご紹介）
   ================================================= */

.spec-block--water-bath-spec,
.spec-block--water-bath-pickup,
.spec-block--water-washbasin-style,
.spec-block--water-washbasin-bowl,
.spec-block--water-toilet{
  margin-top: 96px;
}

/* 見出し・リード（中央揃え） */
.spec-block--water-bath-spec .spec-block__lead {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.spec-block--water-bath-spec .spec-block__lead p {
  margin-top: 8px;
  line-height: 1.9;
}

/* グリッド全体：PC 3列 */
.water-bath-spec-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 56px;
}

/* 各カード */
.water-bath-spec-grid .water-item {
  margin: 0;
  text-align: center;
}

/* 画像は比率をそろえて表示 */
.water-bath-spec-grid .water-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* キャプション（2行構成） */
.water-bath-spec-grid .water-item__caption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.water-bath-spec-grid .water-item__caption-main {
  display: block;
  font-weight: 700;
}

.water-bath-spec-grid .water-item__caption-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

/* ----------------------------
   スマホ：3列のまま縮小表示
   ---------------------------- */
@media (max-width: 767px) {
  .spec-block--water-bath-spec {
    margin-top: 72px;
  }

  .water-bath-spec-grid {
    max-width: 520px;
    padding: 0 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* スマホも3列 */
    column-gap: 10px;
    row-gap: 24px;
  }

  .water-bath-spec-grid .water-item__caption {
    margin-top: 6px;
    font-size: 12px;
  }

  .water-bath-spec-grid .water-item__caption-sub {
    font-size: 11px;
  }
}

/* =================================================
   水まわり：バスルーム（ピックアップアイテム）
   ================================================= */

/* 見出し・リード */
.spec-block--water-bath-pickup .spec-block__lead {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.spec-block--water-bath-pickup .spec-block__lead p {
  margin-top: 8px;
  line-height: 1.9;
}

/* グリッド全体：PC 4列（4-4-2レイアウト） */
.water-bath-pickup-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 48px;
}

/* カード */
.water-bath-pickup-grid .water-item {
  margin: 0;
  text-align: left;
}

/* 画像サイズ統一 */
.water-bath-pickup-grid .water-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* キャプション */
.water-item__caption--bath {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.water-item__caption--bath .water-item__caption-main {
  display: block;
  font-weight: 700;
}

.water-item__caption--bath .water-item__caption-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

/* 3行目の2つを中央寄せ（PC） */
.water-bath-pickup-grid .water-item:nth-child(9) {
  grid-column: 2 / 3;
}

.water-bath-pickup-grid .water-item:nth-child(10) {
  grid-column: 3 / 4;
}

/* ----------------------------
   スマホ：3列グリッド
   ---------------------------- */
@media (max-width: 767px) {
  .spec-block--water-bath-pickup {
    margin-top: 72px;
  }

  .water-bath-pickup-grid {
    max-width: 520px;
    padding: 0 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3列表示 */
    column-gap: 10px;
    row-gap: 24px;
  }

  .water-bath-pickup-grid .water-item {
    text-align: left;
  }

  .water-bath-pickup-grid .water-item img {
    aspect-ratio: 4 / 3;
  }

  .water-item__caption--bath {
    margin-top: 6px;
    font-size: 12px;
  }

  .water-item__caption--bath .water-item__caption-sub {
    font-size: 11px;
  }

  /* スマホでは中央寄せ用の指定を解除 */
  .water-bath-pickup-grid .water-item:nth-child(9),
  .water-bath-pickup-grid .water-item:nth-child(10) {
    grid-column: auto;
  }
}

/* =================================================
   水まわり：洗面（あなたらしさファーストに）
   ================================================= */

/* 見出し・リード（中央揃え） */
.spec-block--water-washbasin-style .spec-block__lead {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.spec-block--water-washbasin-style .spec-block__lead p {
  margin-top: 8px;
  line-height: 1.9;
}

/* グリッド全体：PC 2列×2段 */
.water-washbasin-style-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 56px;
}

/* 各カード */

/* 画像サイズ統一 */
.water-washbasin-style-grid .water-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* キャプション（タイトル＋本文） */
.water-item__caption--wash {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
}

.water-item__caption--wash .water-item__caption-main {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.water-item__caption--wash .water-item__caption-sub {
  display: block;
  font-size: 13px;
}

/* ----------------------------
   スマホ：PC と同じ 2列レイアウト
   ---------------------------- */
@media (max-width: 767px) {
  .spec-block--water-washbasin-style {
    margin-top: 72px;
  }

  .water-washbasin-style-grid {
    max-width: 520px;
    padding: 0 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列のまま */
    column-gap: 16px;
    row-gap: 32px;
  }

  .water-item__caption--wash {
    font-size: 12px;
  }

  .water-item__caption--wash .water-item__caption-sub {
    font-size: 11px;
  }
}

/* =================================================
   水まわり：洗面（ボウルパーツのご紹介）
   ================================================= */

/* 見出し・リード（中央揃え） */
.spec-block--water-washbasin-bowl .spec-block__lead {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.spec-block--water-washbasin-bowl .spec-block__lead p {
  margin-top: 8px;
  line-height: 1.9;
}

/* グリッド：PC 4列 */
.water-washbasin-bowl-grid {
  max-width: 1040px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}

/* 各カード */
.water-washbasin-bowl-grid .water-item {
  margin: 0;
  text-align: center;
}

/* 画像サイズ統一 */
.water-washbasin-bowl-grid .water-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* キャプション（英字＋和文） */
.water-item__caption--bowl {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}

.water-item__caption--bowl .water-item__caption-main {
  display: block;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.water-item__caption--bowl .water-item__caption-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

/* ----------------------------
   スマホ：3列表示
   ---------------------------- */
@media (max-width: 767px) {
  .spec-block--water-washbasin-bowl {
    margin-top: 72px;
  }

  .water-washbasin-bowl-grid {
    max-width: 520px;
    padding: 0 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3列に変更 */
    column-gap: 10px;
    row-gap: 24px;
  }

  .water-item__caption--bowl {
    font-size: 12px;
  }

  .water-item__caption--bowl .water-item__caption-sub {
    font-size: 11px;
  }
}

/* =================================================
   洗面：用途で選ぶミラー（画像サイズ調整）
   ================================================= */

/* グリッド自体の横幅を少し絞る */
.water-mirror-grid {
  max-width: 640px;   /* ← ここで全体の幅を小さく */
  margin: 0 auto;     /* 中央寄せ */
}

/* 画像コンテナ */
.water-mirror-grid .water-item--wide {
  margin: 0 auto;
}

/* 画像はコンテナいっぱいだが、コンテナ自体が640pxまでなので
   PC表示時の見た目が一回り小さくなります */
.water-mirror-grid .water-item--wide img {
  display: block;
  width: 100%;
  height: auto;
}
/* =================================================
   水まわり：トイレ（家族みんなが快適に）
   ================================================= */

/* 見出し・リード */
.spec-block--water-toilet .spec-block__lead {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.spec-block--water-toilet .spec-block__lead p {
  margin-top: 8px;
  line-height: 1.9;
}

/* グリッド：PC 4列 */
.water-toilet-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
}

/* 各カード */
.water-toilet-grid .water-item {
  margin: 0;
  text-align: center;
}

.water-toilet-grid .water-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* キャプション（タイトル＋説明文） */
.water-item__caption--toilet {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
}

.water-item__caption--toilet .water-item__caption-main {
  display: block;
  font-weight: 700;
}

.water-item__caption--toilet .water-item__caption-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

/* スマホ：3列表示 */
@media (max-width: 767px) {
  .spec-block--water-toilet {
    margin-top: 72px;
  }

  .water-toilet-grid {
    max-width: 520px;
    padding: 0 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3列 */
    column-gap: 10px;
    row-gap: 24px;
  }

  .water-item__caption--toilet {
    font-size: 12px;
  }

  .water-item__caption--toilet .water-item__caption-sub {
    font-size: 11px;
  }
}

/* =========================================================
   アフターサービスページ
   ====================================================== */

/* 導入ブロック（After service） */
.spec-detail-intro--after {
  align-items: center;
}

.after-hero__catch {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 20px 0 16px;
}

/* -----------------------------------------------------
   設備保証まで充実
   ----------------------------------------------------- */

/* 01〜05のポイント全体 */
.after-equipment-grid {
  max-width: 960px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}

/* 各項目 */
.after-equipment-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.after-equipment-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.after-equipment-body {
  flex: 1;
}

.after-equipment-heading {
  font-weight: 700;
  margin: 0 0 6px;
}

.after-equipment-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 注意書き */
.after-equipment-notes {
  max-width: 960px;
  margin: 24px auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
}

.after-equipment-notes p,
body.page-after .after-equipment-notes p{
  margin: 4px 0;
}

/* -----------------------------------------------------
   スマホ調整（画像を小さく）
   ----------------------------------------------------- */
@media (max-width: 767px) {

  /* 設備保証セクションの画像だけ小さくする */
  .after-scroll--equipment-image img {
    max-width: 100%;
    width: 100%;
  }

  /* ポイント一覧は1カラムで縦並びに */
  .after-equipment-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
  }

  .after-equipment-item {
    align-items: flex-start;
  }

  .after-equipment-num {
    min-width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .after-equipment-notes {
    padding: 0 16px;
  }
}

/* 共通スクロール画像ラッパー
   PC：中央寄せで通常表示
   SP：横スクロールで閲覧できるようにする
---------------------------------------- */
.after-scroll {
  margin-top: 28px;
  text-align: center;
}

.foundation-scroll-visual {
  text-align: center;
  margin-bottom: 40px;
}

.after-scroll img,
.foundation-scroll-visual img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* =========================================================
   共通：横スクロール（サムネイル／カードのストリップ）
   - PC：折り返しで整列
   - SP：横スワイプで閲覧
   ====================================================== */
.c-hscroll-thumbs,
body.page-door .door-variation-scroll {
  overflow: visible; /* PC */
}

.c-hscroll-thumbs__track,
body.page-door .door-variation-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap; /* PCは折り返し */
}

.c-hscroll-thumbs__item,
body.page-door .door-variation-item {
  flex: 0 0 120px;
  margin: 0;
}

.c-hscroll-thumbs__item img,
body.page-door .door-variation-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.2s;
}

.c-hscroll-thumbs__item img:hover,
body.page-door .door-variation-item img:hover {
  transform: scale(1.05);
}

/* =========================================================
   CAT LIFE HOUSE：空間別アイデア集（横スクロールカード）
   既存の c-hscroll-thumbs / catlife-card を流用して“楽しく”見せる
   ====================================================== */
.c-hscroll-thumbs--cards {
  overflow-x: auto;          /* PCでも横スクロール */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;       /* スクロールバー分の余白 */
}

.c-hscroll-thumbs--cards .c-hscroll-thumbs__track {
  flex-wrap: nowrap;         /* 折り返さない */
  justify-content: flex-start;
  width: max-content;        /* 内容幅で伸びる */
  gap: 18px;
}

.c-hscroll-thumbs--cards .c-hscroll-thumbs__item {
  flex: 0 0 280px;           /* カード幅 */
  scroll-snap-align: start;
}

.c-hscroll-thumbs--cards .c-hscroll-thumbs__item.catlife-card {
  background-color: #ffffff; /* 白でくっきり（のっぺり防止） */
}

@media (max-width: 767px) {
  .c-hscroll-thumbs--cards .c-hscroll-thumbs__item {
    flex-basis: 78vw;        /* SPは画面に合わせて“カード感” */
    max-width: 320px;
  }
}

@media (max-width: 767px) {
  .c-hscroll-thumbs,
  body.page-door .door-variation-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 8px;
  }

  .c-hscroll-thumbs__track,
  body.page-door .door-variation-list {
    flex-wrap: nowrap;          /* SPは横一列 */
    justify-content: flex-start;
    width: max-content;         /* 横幅を伸ばしてスクロール */
  }

  /* ドアのデザインバリエーションは、SPでもPC同様に折り返しで表示（横スワイプ化しない） */
  body.page-door .door-variation-scroll {
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  body.page-door .door-variation-list {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* =========================================================
   共通：SPの列数ユーティリティ（grid用）
   - 既存デザインを崩さないため「列数のみ」変更
   ====================================================== */
@media (max-width: 767px) {
  .u-grid-sp2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .u-grid-sp3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 建てる時の検査テーブル */
.after-table {
  max-width: 960px;
  margin: 32px auto 0;
}

.after-check-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.after-check-table th,
.after-check-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.after-check-table th {
  width: 32%;
  background: #f5f5f5;
  font-weight: 700;
}

/* 24時間365日セクションのポイント */
.spec-point--after {
  margin-top: 32px;
}

/* -----------------------------
   SP レイアウト
   ----------------------------- */
@media (max-width: 767px) {
  .after-hero__catch {
    font-size: 1.2rem;
  }

    /* 基本：スクロールさせる画像（図版系） */
  .after-scroll,
  .foundation-scroll-visual {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .after-scroll {
    padding-bottom: 8px; /* スクロールバー用余白 */
  }

  /* foundation は「フルブリード気味」にしてスワイプしやすく */
  .foundation-scroll-visual {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 16px;
  }

  .after-scroll img,
  .foundation-scroll-visual img {
    max-width: none;
    width: 600px; /* 画面より大きくしてスクロールさせる */
    height: auto;
  }

/* 安心の長期保証システムだけは PC と同じでスクロールなし */
  .spec-block--after-long .after-scroll {
    overflow-x: visible;
  }

  .spec-block--after-long .after-scroll img {
    max-width: 100%;
    width: 100%;
  }

  /* 設備保証イメージ（食洗機写真）もスクロールなし＆幅100% */
  .after-scroll--equipment-image {
    overflow-x: visible;
  }

  .after-scroll--equipment-image img {
    max-width: 100%;
    width: 100%;
  }

  /* LINE QR の図版は少しだけ広め（軽いスライド感） */
    /* 24時間365日アフターフォロー（LINE）の画像もスクロールなしで幅100％表示 */
  .after-scroll--line {
    overflow-x: visible;
  }

  .after-scroll--line img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* 検査テーブルは縦並びのまま */
  .after-table,
.after-equipment-notes{
    padding: 0 16px;
  }

  .after-check-table th,
  .after-check-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .after-check-table th {
    border-bottom: none;
  }

  /* 設備保証のテキストブロックなどは前回のままでOK */
  .after-equipment-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
  }

  
}

/* -----------------------------------------------------
   アフターサービス：セクション間の余白調整
   ----------------------------------------------------- */

/* 最初の「安心の長期保証システム」 */

/* 2つ目以降のセクション同士の間隔を広めに */

/* SP のときは少しだけ狭く */
@media (max-width: 767px) {
  .spec-block--after-long {
    margin-top: 48px;
  }

  .spec-block--after-compare,
  .spec-block--after-target,
  .spec-block--after-build,
  .spec-block--after-after,
  .spec-block--after-equipment,
  .spec-block--after-line {
    margin-top: 64px;
  }
}

/* =========================================================
   会社案内ページ (company.html)
   ====================================================== */

/* サブMV背景画像（会社案内・施工事例・フォーム共通） */
.subhero--company .subhero__bg,
.subhero--works .subhero__bg,
.subhero--contact .subhero__bg {
  background-image: url("images/dummy.jpg"); /* 適切な画像に変更してください */
  background-size: cover;
  background-position: center;
}

/* -------------------------------------
   会社概要：数字で見る (Stats)
   ------------------------------------- */
.company-stats-block {
  margin-bottom: 80px;
}

.company-heading {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 12px;
}

.company-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.company-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.company-stat {
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.company-stat__label {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin: 0 0 10px;
}

.company-stat__value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.company-stat__unit {
  font-size: 1rem;
  margin-left: 4px;
}

@media (max-width: 767px) {
  .company-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------
   会社概要：沿革 (History)
   ------------------------------------- */
.company-history-block {
  margin-bottom: 80px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.history-list {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid var(--color-border);
}

.history-item {
  position: relative;
  margin-bottom: 32px;
  padding-left: 24px;
}

.history-item::before {
  content: "";
  position: absolute;
  left: -27px; /* 線の位置に合わせて調整 */
  top: 6px;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary);
  border-radius: 50%;
  border: 2px solid #fff;
}

.history-item__date {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.history-item__text {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* -------------------------------------
   会社概要：概要DL (Overview)
   ------------------------------------- */
.company-overview-block {
  max-width: 800px;
  margin: 0 auto;
}

.company-dl {
  border-top: 1px solid var(--color-border);
}

.company-dl__row {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.company-dl dt {
  width: 30%;
  background-color: #f9fafb;
  padding: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.company-dl dd {
  width: 70%;
  margin: 0;
  padding: 16px;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .company-dl__row {
    flex-direction: column;
  }
  .company-dl dt, .company-dl dd {
    width: 100%;
  }
  .company-dl dt {
    border-bottom: 1px dashed #eee;
  }
}

/* =========================================================
   施工事例詳細ページ (work-detail.html)
   ====================================================== */
.section--work-detail {
  padding-top: 60px;
}

.work-detail-title {
  font-size: 1.8rem;
  margin: 0 0 16px;
}

.work-detail-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
}

.work-label {
  font-size: 0.85rem;
  background-color: #eee;
  padding: 4px 12px;
  border-radius: 4px;
}

.work-gallery,
body.is-spec .ground-cta__text,
.c-section-head--mb40{
  margin-bottom: 40px;
}

.work-gallery__main img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.work-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.work-gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.work-gallery__thumbs img:hover {
  opacity: 1;
}

.work-description {
  max-width: 800px;
  margin: 0 auto 60px;
  background: #f9fafb;
  padding: 32px;
  border-radius: var(--radius-lg);
}

.work-description__heading {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--color-primary);
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

.work-pagination {
  text-align: center;
}

/* =========================================================
   フォーム関連 (form-*.html)
   ====================================================== */
.form-container {
  max-width: 800px;
}

.form-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.form-lead {
  text-align: center;
  margin-bottom: 48px;
}

.main-form {
  background: #fff;
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.form-item {
  margin-bottom: 24px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 24px;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-required {
  background-color: #e74c3c;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fcfcfc;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  background-color: #fff;
}

.form-input--short {
  max-width: 150px;
}

.form-checkbox-group,
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.form-checkbox-group label,
.form-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.form-submit {
  text-align: center;
  margin-top: 40px;
}

.btn--form {
  min-width: 240px;
  height: 56px;
  font-size: 1.1rem;
}

@media (max-width: 767px) {
  .main-form {
    padding: 20px;
  }
  .form-checkbox-group {
    flex-direction: column;
    gap: 10px;
  }
}

/* =========================================================
   追加：地盤調査ページ専用の上書きスタイル（page-ground）
   ====================================================== */

/* =========================================================
   地盤調査ページ専用の上書きスタイル（page-ground）
   - メリハリ強化版 -
   ====================================================== */

/* --- サブMV調整 --- */

/* --- 標準仕様サブナビ（中央寄せ） --- */
/* =========================================================
   is-spec: Standard Spec Subnav (common)
   ====================================================== */
body.is-spec .spec-subnav {
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 60px; /* ヘッダー高さ分 */
  z-index: 40;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* 影を追加して浮き上がらせる */
}
body.is-spec .spec-subnav__list {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 24px;
  padding: 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
@media (min-width: 768px) {
  body.is-spec .spec-subnav__list {
    justify-content: center;
  }
}
body.is-spec .spec-subnav__list::-webkit-scrollbar {
  display: none;
}
body.is-spec .spec-subnav__item {
  display: inline-block;
  padding: 16px 0;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  position: relative;
  transition: color 0.2s;
  font-weight: 500;
}
body.is-spec .spec-subnav__item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
body.is-spec .spec-subnav__item:hover,
body.is-spec .spec-subnav__item.is-current {
  color: var(--color-primary);
  font-weight: 700;
}
body.is-spec .spec-subnav__item.is-current::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--color-primary);
}

/* --- Section 1: 概要 (Intro) --- */
/* --- Section 2: 流れ (Flow) --- */
body.page-ground .ground-flow,
body.page-foundation .foundation-base,
body.page-structure .structure-hybrid,
body.page-panel .panel-points{
  background-color: #eef4f8; /* 薄いブルーグレーでエリア区切り */
  padding: 80px 0;
}
@media (min-width: 768px) {
  body.page-ground .ground-flow-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
body.page-ground .ground-flow-card {
  padding: 28px 24px;
  position: relative;
}
/* ホバーで少し浮くアクション */
body.page-ground .ground-flow-card__step {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary); /* 濃紺に変更して引き締め */
  margin-bottom: 12px;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
}
body.page-ground .ground-flow-card__title {
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--color-text);
  font-weight: 700;
}
body.page-ground .ground-flow-card__text {
  font-size: 0.88rem;
  color: var(--color-text-soft);
  margin: 0;
  line-height: 1.6;
}

/* --- Section 3: SWS試験（★ここを濃色背景にしてメリハリ最大化） --- */
@media (min-width: 768px) {
/* 反転色用のタイトル設定 */
body.page-ground .ground-title--inverse {
  color: #fff;
  border-left-color: var(--color-accent);
  font-size: 1.8rem;
}
body.page-ground .ground-sws__content p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 1.5em;
}
body.page-ground .u-text-sm {
  font-size: 0.65em;
  font-weight: 400;
  opacity: 0.8;
  display: block;
  margin-top: 4px;
}
body.page-ground .ground-sws__visual img {
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* 濃い背景なので影も濃く */
  width: 100%;
  border: 4px solid rgba(255, 255, 255, 0.1); /* 枠線で締める */
}
}

/* --- Section 4: 工法比較 (Methods) --- */
body.page-ground .ground-methods,
body.page-foundation .foundation-methods,
body.page-foundation .foundation-inspection,
body.page-ant .ant-flow,
body.page-panel .panel-box-image,
body.page-insulation .insulation-heatshock,
body.page-window .window-simulation,
body.page-ventilation .ventilation-exchange,
body.page-ventilation .ventilation-comfort,
body.page-door .door-security,
body.page-exterior .exterior-durability,
body.page-water .water-bath,
body.page-water .water-toilet{
  background-color: #fff;
  padding: 80px 0;
}
/* ラッパーで画像とグリッドの幅を揃える */
body.page-ground .ground-methods-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
body.page-ground .ground-methods-visual {
  margin-bottom: 40px;
  text-align: center;
  width: 100%;
}
body.page-ground .ground-methods-visual img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  body.page-ground .ground-methods-visual {
    overflow-x: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
    width: auto;
  }
  body.page-ground .ground-methods-visual img {
    max-width: none;
    width: 600px;
  }
}
@media (min-width: 768px) {
  body.page-ground .ground-methods-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-ground .ground-method-card {
  border: 1px solid #e5e7eb;
  padding: 28px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  border-top: 4px solid var(--color-accent); /* カード上部にアクセント線 */
}
body.page-ground .ground-method-card__title {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin: 0 0 10px;
  font-weight: 700;
}
body.page-ground .ground-method-card__meta {
  font-size: 0.85rem;
  color: #fff;
  background-color: var(--color-accent);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 16px;
}
body.page-ground .ground-method-card__text {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin: 0;
  line-height: 1.7;
}

/* --- Section 5: ポイント (Point) --- */
body.page-ground .ground-point {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 80px;
}

/* =========================================================
   基礎工法ページ専用の上書きスタイル（page-foundation）
   ====================================================== */

/* --- サブMV & ナビ --- */
body.page-foundation .subhero {
  /* 基礎用の背景画像があればここに設定（今はダミー） */
  background-image: url("images/dummy.jpg"); 
}
/* サブナビ（中央寄せ・影付き） */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: ベタ基礎・比較表 (Base) --- */

body.page-foundation .foundation-base__visual {
  text-align: center;
  margin-bottom: 40px;
}
body.page-foundation .foundation-base__visual img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
body.page-foundation .foundation-base__desc {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 1.8;
}

/* 比較テーブル（RECOMMEND切れ修正） */
body.page-foundation .foundation-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 20px; /* バッジが見切れないように上部に余白確保 */
}
body.page-foundation .foundation-compare-table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: separate; /* collapseだと角丸が効きにくいのでseparate */
  border-spacing: 0;
  background: #fff;
  border-radius: 8px;
  /* overflow: hidden; ← これがあるとバッジが切れるので削除 */
  box-shadow: var(--shadow-card);
  min-width: 600px;
  border: 1px solid #e5e7eb;
}
body.page-foundation .foundation-compare-table th,
body.page-foundation .foundation-compare-table td {
  padding: 20px;
  text-align: center;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}
/* 右端と下端の線を調整 */
body.page-foundation .foundation-compare-table tr:last-child td {
  border-bottom: none;
}
body.page-foundation .foundation-compare-table tr th:last-child,
body.page-foundation .foundation-compare-table tr td:last-child {
  border-right: none;
}

/* ヘッダーデザイン */
body.page-foundation .foundation-compare-table thead th {
  background-color: #374151;
  color: #fff;
  font-weight: 700;
  position: relative;
}
/* 角丸の処理（overflow:hiddenを外したため手動設定） */
body.page-foundation .foundation-compare-table thead th:first-child {
  border-top-left-radius: 7px;
}
body.page-foundation .foundation-compare-table thead th:last-child {
  border-top-right-radius: 7px;
}

/* RECOMMENDバッジの表示 */
body.page-foundation .foundation-compare-table thead th.is-highlight {
  background-color: var(--color-primary);
  font-size: 1.1em;
  /* z-indexなどを設定して重なり順を保証 */
  z-index: 1; 
}
body.page-foundation .foundation-compare-table thead th.is-highlight::after {
  content: "RECOMMEND";
  position: absolute;
  top: -14px; /* 上にはみ出させる */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

body.page-foundation .foundation-compare-table tbody th {
  background-color: #f9fafb;
  font-weight: 700;
  width: 20%;
}
body.page-foundation .foundation-compare-table td.is-highlight {
  background-color: #fdfaf4;
  color: var(--color-primary);
  font-weight: 700;
}

/* --- Section 3: こだわりの仕様 (Points - 濃色背景) --- */
body.page-foundation .foundation-section-head--inverse .foundation-section-lead {
  color: rgba(255, 255, 255, 0.9);
}
body.page-foundation .foundation-points-grid {
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  body.page-foundation .foundation-points-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-foundation .foundation-point-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 24px;
  text-align: center;
}
body.page-foundation .foundation-point-card__icon {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 16px;
}
body.page-foundation .foundation-point-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}
body.page-foundation .foundation-point-card__text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

/* --- Section 4: Jotoキソパッキング (Methods) --- */

body.page-foundation .foundation-methods__desc {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.8;
}
body.page-foundation .foundation-merit-list {
  display: grid;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.page-foundation .foundation-merit-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-foundation .foundation-merit-item {
  text-align: center;
}
body.page-foundation .foundation-merit-item__title {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  font-weight: 700;
}
body.page-foundation .foundation-merit-item__text {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* --- Section 5: 工事の流れ (Flow) --- */
body.page-foundation .foundation-flow {
  background-color: #f3f7fa;
  padding: 80px 0;
}
body.page-foundation .foundation-flow-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  body.page-foundation .foundation-flow-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  body.page-foundation .foundation-flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
body.page-foundation .foundation-flow-item {
  background: #fff;
  padding: 24px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  position: relative;
  transition: transform 0.3s;
}
body.page-foundation .foundation-flow-item:hover {
  transform: translateY(-3px);
}
body.page-foundation .foundation-flow-item__num {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-accent);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  margin-bottom: 10px;
}
body.page-foundation .foundation-flow-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px;
}
body.page-foundation .foundation-flow-item__text {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* --- Section 6: 検査体制 (Inspection) デザイン強化 --- */

body.page-foundation .foundation-inspection__card {
  max-width: 860px;
  margin: 0 auto;
  border: 4px solid #eef2f6; /* 外枠 */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
/* ヘッダー部分 */
body.page-foundation .foundation-inspection__head {
  background-color: #eef4f8; /* 薄いブルー */
  padding: 32px 24px;
  text-align: center;
}
body.page-foundation .foundation-inspection__icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 12px;
}
body.page-foundation .foundation-inspection__title {
  font-size: 1.6rem;
  color: var(--color-primary);
  font-weight: 700;
  margin: 0;
}
/* ボディ部分 */
body.page-foundation .foundation-inspection__body {
  padding: 40px;
  background-color: #fff;
}
@media (max-width: 767px) {
  body.page-foundation .foundation-inspection__body {
    padding: 24px;
  }
}
body.page-foundation .foundation-inspection__lead {
  text-align: center;
  font-weight: 500;
  margin-bottom: 32px;
  line-height: 1.8;
}
/* リスト部分をカード風に */
body.page-foundation .foundation-inspection__list {
  display: grid;
  gap: 20px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  body.page-foundation .foundation-inspection__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-foundation .foundation-inspection__item {
  background: #fdfaf4;
  border: 2px solid #fceecf;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}
body.page-foundation .foundation-inspection__item-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #8c6a48;
  margin: 0 0 10px;
  border-bottom: 1px dotted #dcdcdc;
  padding-bottom: 8px;
}
body.page-foundation .foundation-inspection__item-text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
body.page-foundation .foundation-inspection__message {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 10px;
}

/* =========================================================
   防蟻保証ページ専用の上書きスタイル（page-ant）
   ====================================================== */

/* --- サブMV & ナビ --- */
body.page-ant .subhero {
  /* 基礎と同じ背景画像を使用（ご希望に合わせて変更可能） */
  background-image: url("images/dummy.jpg");
}
/* サブナビ（中央寄せ・影付き） */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 防蟻対策の基本 (Basic) --- */
body.page-ant .ant-basic,
body.page-insulation .insulation-features,
body.page-window .window-structure,
body.page-ventilation .ventilation-basic,
body.page-door .door-breeze,
body.page-floor .floor-lineup,
body.page-floor .floor-room,
body.page-exterior .exterior-maintenance,
body.page-water .water-kitchen,
body.page-water .water-wash,
body.is-spec .spec-faq{
  background-color: #f7f7f7;
  padding: 80px 0;
}
body.page-ant .ant-basic__card {
  padding: 40px;
  border: 1px solid #e5e7eb;
}
@media (max-width: 767px) {
  body.page-ant .ant-basic__card {
    padding: 24px;
  }
}
body.page-ant .ant-basic__title {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 24px;
  line-height: 1.4;
  font-weight: 700;
}
body.page-ant .ant-basic__list {
  padding-left: 0;
  list-style: none;
}
body.page-ant .ant-basic__list li {
  margin-bottom: 12px;
  padding-left: 1.5em;
  position: relative;
  font-weight: 700;
  color: var(--color-text);
}
body.page-ant .ant-basic__list li::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-accent);
}
body.page-ant .ant-basic__visual img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* --- Section 3: 保証 (Warranty - 濃色) --- */
/* 保証内容グリッド */
body.page-ant .ant-warranty-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  body.page-ant .ant-warranty-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  body.page-ant .ant-warranty-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
body.page-ant .ant-warranty-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
body.page-ant .ant-warranty-item__icon {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 16px;
}
body.page-ant .ant-warranty-item__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}
body.page-ant .ant-warranty-item__text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* --- Section 4: フロー (Flow) --- */

body.page-ant .ant-flow-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
@media (min-width: 768px) {
  body.page-ant .ant-flow-list {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-ant .ant-flow-step {
  background: #f9fafb;
  padding: 24px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}
body.page-ant .ant-flow-step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
body.page-ant .ant-flow-step__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary);
  padding: 2px 8px;
  border-radius: 4px;
}
body.page-ant .ant-flow-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
body.page-ant .ant-flow-step__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* =========================================================
   構造躯体ページ専用の上書きスタイル（page-structure）
   ====================================================== */

/* --- サブMV & ナビ --- */
body.page-structure .subhero {
  /* 基礎などと同じ画像を使用（ご希望に合わせて変更可能） */
  background-image: url("images/dummy.jpg");
}
/* サブナビ（中央寄せ・影付き） */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 国産杉×米松ハイブリッド (Hybrid) --- */

.structure-materials-grid {
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.page-structure .structure-materials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 材料カード */
body.page-structure .structure-material-card {
  padding: 32px 24px;
  text-align: center;
}
body.page-structure .structure-material-card__image {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-card);
}
body.page-structure .structure-material-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.page-structure .structure-material-card__title {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin: 0 0 4px;
  font-weight: 700;
}
body.page-structure .structure-material-card__role {
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 20px;
}
body.page-structure .structure-material-card__list {
  padding: 0;
  list-style: none;
  text-align: left;
  display: inline-block;
}
body.page-structure .structure-material-card__list li {
  margin-bottom: 8px;
  padding-left: 1.4em;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.6;
}
body.page-structure .structure-material-card__list li::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-accent);
}

/* --- Section 3: ハイブリッド梁とJAS (JAS - 濃色) --- */
@media (min-width: 768px) {
/* 反転色用のタイトル設定 */
body.page-structure .structure-title--inverse {
  color: #fff;
  border-left-color: var(--color-accent);
  font-size: 1.8rem;
}
body.page-structure .structure-jas__text p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 1.5em;
}
body.page-structure .structure-jas__list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 24px;
}
body.page-structure .structure-jas__list li {
  margin-bottom: 8px;
  padding-left: 1.4em;
  position: relative;
  font-weight: 700;
  color: #fff;
}
body.page-structure .structure-jas__list li::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-accent);
}
body.page-structure .structure-jas__note {
  font-size: 0.95rem;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 16px;
}
body.page-structure .structure-jas__visual img {
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
  width: 100%;
  border: 4px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}
body.page-structure .structure-jas__caption {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}
body.page-structure .structure-jas__caption strong {
  color: #fff;
  font-size: 1rem;
}
}

/* --- Section 4: ポイント (Point) --- */
body.page-structure .structure-point {
  background-color: #fff;
  padding-top: 80px;
  padding-bottom: 80px;
}
/* =========================================================
   面材ページ専用の上書きスタイル（page-panel）
   ====================================================== */

/* --- サブMV & ナビ --- */
body.page-panel .subhero {
  /* 基礎などと同じ画像を使用 */
  background-image: url("images/dummy.jpg");
}
/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 3つの安心 (Points) --- */

.panel-points-grid {
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  body.page-panel .panel-points-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 安心カード */
body.page-panel .panel-point-card {
  padding: 32px 24px;
  text-align: center;
}
body.page-panel .panel-point-card__icon {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 16px;
}
body.page-panel .panel-point-card__title {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin: 0 0 12px;
  font-weight: 700;
}
body.page-panel .panel-point-card__text {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}

/* --- Section 3: 特長 (Features - 濃色) --- */
body.page-panel .panel-features__content {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
}
body.page-panel .panel-features__content p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 1.5em;
}
body.page-panel .panel-features__list {
  padding-left: 0;
  list-style: none;
  margin: 0 auto 24px;
  display: inline-block;
  text-align: left;
}
body.page-panel .panel-features__list li {
  margin-bottom: 8px;
  padding-left: 1.4em;
  position: relative;
  font-weight: 700;
  color: #fff;
}
body.page-panel .panel-features__list li::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-accent);
}
body.page-panel .panel-features__note {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

/* 丸アイコン（サイズを拡大） */
body.page-panel .panel-features-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
body.page-panel .panel-feature-icon {
  width: 180px; /* 幅を拡大 */
  text-align: center;
  margin: 0;
}
body.page-panel .panel-feature-icon__thumb {
  width: 140px; /* 100pxから拡大 */
  height: 140px; /* 100pxから拡大 */
  border-radius: 50%;
  background: #fff;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
body.page-panel .panel-feature-icon__thumb img {
  width: 95%;
  height: auto;
}
body.page-panel .panel-feature-icon figcaption {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
@media (max-width: 767px) {
  body.page-panel .panel-features-icons {
    gap: 16px;
  }
  body.page-panel .panel-feature-icon {
    width: 45%; /* SPでも少し大きく */
  }
  body.page-panel .panel-feature-icon__thumb {
    width: 100px; /* SPでは少し抑えめに */
    height: 100px;
  }
}

/* --- Section 4: 箱のイメージ (Box Image) --- */

@media (min-width: 768px) {
body.page-panel .panel-box-image__text p {
  line-height: 1.8;
  margin-bottom: 24px;
}
/* 画像縦並びスタイル */
body.page-panel .panel-box-image__visual {
  display: grid;
  gap: 32px;
}
body.page-panel .panel-box-figure {
  margin: 0;
  text-align: center;
}
body.page-panel .panel-box-figure img {
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  width: 100%;
  height: auto;
}
body.page-panel .panel-box-figure figcaption {
  margin-top: 12px;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
}
}

/* --- Section 5: 安心ポイント (Point) --- */
body.page-panel .panel-point {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 80px;
}
body.page-panel .panel-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-panel .panel-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   断熱材ページ専用の上書きスタイル（page-insulation）
   - 白枠ゆったり修正版 -
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 特徴 (Features) - ここを修正 --- */

/* ★修正箇所：白枠を広げて余白を追加 */
body.page-insulation .spec-block--insulation {
  max-width: 1040px;       /* 枠の幅を広げる */
  margin: 0 auto;
  background-color: #ffffff;
  padding: 64px 56px;      /* 内側にたっぷりと余白をとる */
  border-radius: 20px;     /* 角丸 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.04); /* 浮き上がるような影 */
}

/* ★中のテキスト幅は広がりすぎないように制限 */
body.page-insulation .spec-block--insulation .spec-block__lead {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/* グリッドテーブル */
body.page-insulation .insulation-feature-table-wrap {
  margin: 48px auto 48px;
  max-width: 900px;
}
body.page-insulation .insulation-feature-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}
body.page-insulation .insulation-feature-table__cell {
  padding: 24px 20px;
  text-align: center;
  font-size: 0.9rem;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
body.page-insulation .insulation-feature-table__cell i {
  font-size: 1.8rem;
  color: var(--color-accent);
  margin-bottom: 4px;
}
body.page-insulation .insulation-feature-table__cell--full {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 1.1rem;
}
body.page-insulation .insulation-feature-table__cell--head {
  background-color: var(--color-primary);
  color: #fff;
  padding: 32px 24px;
}
body.page-insulation .insulation-feature-table__cell--foot {
  background-color: #fdfaf4;
  color: #8c6a48;
  padding: 32px 24px;
}

/* スマホ調整 */
@media (max-width: 767px) {
  body.page-insulation .spec-block--insulation {
    padding: 40px 20px; /* スマホでも余白確保 */
    border-radius: 12px;
  }
  body.page-insulation .insulation-feature-table {
    grid-template-columns: 1fr;
  }
  body.page-insulation .insulation-feature-table__cell {
    border-right: none;
    padding: 20px;
  }
}

/* 中央イラスト */
body.page-insulation .insulation-illust {
  text-align: center;
  margin-top: 40px;
}
body.page-insulation .insulation-illust img {
  display: inline-block;
  max-width: 480px;
  width: 100%;
  height: auto;
}

/* --- Section 3: ヒートショック対策 (Comparison) --- */

body.page-insulation .spec-section-head__en {
  display: block;
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
body.page-insulation .insulation-comparison {
  display: grid;
  gap: 40px;
  max-width: 960px;
  margin: 40px auto 0;
}
@media (min-width: 768px) {
  body.page-insulation .insulation-comparison {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-insulation .insulation-comparison__item {
  background: #f9fafb;
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  border: 1px solid #e5e7eb;
}
body.page-insulation .insulation-comparison__item--good {
  background: #fff;
  border: 4px solid #fceecf;
  box-shadow: 0 8px 24px rgba(196, 154, 82, 0.15);
  position: relative;
}
body.page-insulation .insulation-comparison__item--good::before {
  content: "POINT";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 99px;
  font-weight: 700;
}
body.page-insulation .insulation-comparison__item-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--color-primary);
}
body.page-insulation .insulation-comparison__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
body.page-insulation .insulation-comparison__caption {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
}
body.page-insulation .insulation-comparison__thermo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid #e5e7eb;
}

/* --- Section 4: 橋渡し (Bridge) --- */
body.page-insulation .insulation-bridge-box {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 40px;
  background: rgba(255, 255, 255, 0.1);
}
body.page-insulation .insulation-bridge-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.4;
}
body.page-insulation .insulation-bridge-text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* =========================================================
   【重要】レイアウト調整用・優先上書きスタイル
   （ここから下を style.css の末尾に追加してください）
   ====================================================== */

/* ---------------------------------------------------------
   1. 断熱材ページ（page-insulation）
   白枠を広げ、内側にたっぷりと余白を持たせる
   --------------------------------------------------------- */

/* 白枠本体：幅を広げて余白を追加 */
body.page-insulation .spec-block--insulation {
  max-width: 1040px;       /* 枠の最大幅を900pxから拡大 */
  margin: 64px auto 0;
  background-color: #ffffff;
  padding: 64px 48px;      /* ★上下左右に広い余白を追加 */
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* 内部のテキスト：幅が広がりすぎないように制限して中央寄せ */
body.page-insulation .spec-block--insulation .spec-block__lead {
  max-width: 840px;        /* テキストの読みやすい幅をキープ */
  margin-left: auto;
  margin-right: auto;
}

/* 内部のテーブル：幅制限と中央寄せ */
body.page-insulation .insulation-feature-table-wrap {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/* スマホ表示時の調整 */
@media (max-width: 767px) {
  body.page-insulation .spec-block--insulation {
    padding: 40px 20px;    /* スマホでも余白を確保 */
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ---------------------------------------------------------
   2. 基礎工法ページ（page-foundation）
   検査体制・比較表の窮屈さを解消
   --------------------------------------------------------- */

/* 検査体制の白枠：余白を広げる */
body.page-foundation .foundation-inspection__body {
  padding: 60px 48px;      /* ★内側の余白を増量 */
}

/* ヘッダー部分（アイコンがある帯）もバランス調整 */
body.page-foundation .foundation-inspection__head {
  padding: 32px 24px;
}

/* 比較表のセル：余白を広げる */
body.page-foundation .foundation-compare-table th, 
body.page-foundation .foundation-compare-table td {
  padding: 24px 16px;      /* ★文字周りの余白を増量 */
}

@media (max-width: 767px) {
  body.page-foundation .foundation-inspection__body {
    padding: 32px 20px;
  }
  body.page-foundation .foundation-compare-table th, 
  body.page-foundation .foundation-compare-table td {
    padding: 16px 10px;
  }
}

/* ---------------------------------------------------------
   3. 面材ページ（page-panel）
   3つの安心カードの余白調整
   --------------------------------------------------------- */

body.page-panel .panel-point-card {
  padding: 48px 32px;      /* ★カード内の余白を広げてゆったりさせる */
}

@media (max-width: 767px) {
  body.page-panel .panel-point-card {
    padding: 32px 24px;
  }
}

/* =========================================================
   断熱材ページ：ここがねこまるホームのポイント
   （追加セクション用スタイル）
   ====================================================== */

body.page-insulation .insulation-point {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 80px;
}

body.page-insulation .insulation-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* 箇条書きの黒丸 */
body.page-insulation .insulation-point-box__list li::before {
  font-size: 0.8em;
}
/* 見出し強調 */
body.page-insulation .insulation-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}

/* イラスト */
body.page-insulation .insulation-point-box__illust img {
  width: 150px;
  height: auto;
}

@media (max-width: 767px) {
  body.page-insulation .insulation-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   断熱窓ページ専用の上書きスタイル（page-window）
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 構造 (Structure) --- */

/* 説明テキストをカード化 */

@media (min-width: 768px) {
  body.page-window .window-structure__features {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-window .window-feature-card,
body.page-floor .floor-lineup-card__body{
  padding: 24px;
}
body.page-window .window-feature-card__title {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin: 0 0 12px;
  font-weight: 700;
  border-bottom: 2px solid #f3f4f6;
  padding-bottom: 8px;
}
body.page-window .window-feature-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Section 3: シミュレーション (Simulation) --- */

/* 既存の .thermal-simulation を流用しつつ微調整 */
body.page-window .thermal-simulation {
  gap: 40px;
}
body.page-window .thermal-simulation__item {
  background: #f9fafb;
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid #e5e7eb;
}
body.page-window .thermal-simulation__caption {
  text-align: left;
  margin-top: 16px;
}
body.page-window .thermal-simulation__caption strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 6px;
}

/* --- Section 4: 快適性 (Comfort) --- */

@media (min-width: 768px) {
body.page-window .window-comfort__list {
  padding-left: 0;
  list-style: none;
  margin-top: 24px;
}
body.page-window .window-comfort__list li {
  margin-bottom: 12px;
  padding-left: 1.6em;
  position: relative;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.05rem;
}
body.page-window .window-comfort__list li::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-accent);
}
}

/* --- Section 5: ポイント (Point) --- */
body.page-window .window-point {
  background-color: #fff;
  padding-top: 0;
  padding: 80px;
}
body.page-window .window-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

body.page-window .window-point-box__list li::before {
  font-size: 0.8em;
}
body.page-window .window-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}
body.page-window .window-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-window .window-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   換気システムページ専用の上書きスタイル（page-ventilation）
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 24時間計画換気のしくみ (Basic) --- */

body.page-ventilation .ventilation-figure-wrap {
  text-align: center;
  max-width: 720px;
  margin: 40px auto 0;
}
body.page-ventilation .ventilation-figure img {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  width: 100%;
  height: auto;
  background: #fff; /* 透過画像の背景確保 */
}
body.page-ventilation .ventilation-figure-caption {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin-top: 16px;
  line-height: 1.6;
}

/* --- Section 3: 熱交換型換気のメリット (Exchange) --- */

body.page-ventilation .ventilation-exchange-grid {
  max-width: 900px;
  margin: 40px auto;
}
@media (min-width: 768px) {
  body.page-ventilation .ventilation-exchange-grid {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-ventilation .ventilation-exchange-card {
  background: #fdfaf4;
  border: 2px solid #fceecf;
  padding: 32px;
  text-align: center;
}
body.page-ventilation .ventilation-exchange-card__title {
  font-size: 1.2rem;
  color: #8c6a48;
  margin: 0 0 16px;
  font-weight: 700;
}
body.page-ventilation .ventilation-exchange-card__text {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}
body.page-ventilation .ventilation-exchange-card__text strong {
  color: #c0392b;
  background: linear-gradient(transparent 70%, #ffdfba 70%);
}
/* 橋渡しメッセージ */
body.page-ventilation .ventilation-bridge-message {
  text-align: center;
  max-width: 800px;
  margin: 32px auto 48px;
  padding: 24px;
  background-color: #f0f4f8;
  border-radius: 12px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.8;
}
body.page-ventilation .ventilation-bridge-message i {
  margin-right: 8px;
  color: var(--color-accent);
}

/* --- Section 4: フィルター性能 (Filter) --- */

@media (min-width: 768px) {
body.page-ventilation .ventilation-content-row__visual img {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  width: 100%;
}
}

/* --- Section 5: 冬の過乾燥＆ニオイ対策 (Comfort) --- */

body.page-ventilation .ventilation-comfort-box {
  max-width: 900px;
  margin: 0 auto;
  border: 4px solid #eef2f6;
  border-radius: 20px;
  overflow: hidden;
}
body.page-ventilation .ventilation-comfort-box__inner {
  padding: 48px;
  text-align: center;
}
@media (max-width: 767px) {
  body.page-ventilation .ventilation-comfort-box__inner {
    padding: 32px 24px;
  }
}
body.page-ventilation .ventilation-comfort-box__footer {
  background-color: #eef4f8;
  padding: 32px 48px;
  text-align: center;
}
@media (max-width: 767px) {
  body.page-ventilation .ventilation-comfort-box__footer {
    padding: 32px 24px;
  }
}
body.page-ventilation .ventilation-comfort-box__sub-title {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin: 0 0 12px;
  font-weight: 700;
}

/* --- Section 6: ポイント (Point) --- */
body.page-ventilation .ventilation-point {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 80px;
}
body.page-ventilation .ventilation-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

body.page-ventilation .ventilation-point-box__list li::before {
  font-size: 0.8em;
}
body.page-ventilation .ventilation-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}
body.page-ventilation .ventilation-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-ventilation .ventilation-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   玄関ドアページ専用の上書きスタイル（page-door）
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 採風・採光 (Breeze) --- */

body.page-door .door-breeze-content {
  max-width: 900px;
  margin: 0 auto;
}
body.page-door .door-breeze-text-block {
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.8;
}
/* 画像グリッド（既存のリソースを活用） */
body.page-door .door-breeze-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
body.page-door .door-breeze-item {
  flex: 1 1 30%; /* 3枚並び */
  max-width: 32%;
  margin: 0;
}
body.page-door .door-breeze-item:nth-child(n/**/+4) {
  flex: 1 1 45%; /* 4,5枚目は2枚並び */
  max-width: 48%;
}
body.page-door .door-breeze-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
@media (max-width: 767px) {
  body.page-door .door-breeze-gallery {
    flex-direction: column;
  }
  body.page-door .door-breeze-item,
  body.page-door .door-breeze-item:nth-child(n/**/+4) {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* --- Section 3: 防犯・断熱・キー (Security) --- */

body.page-door .door-keys-block {
  max-width: 900px;
  margin: 0 auto;
}
body.page-door .door-keys-list {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
body.page-door .door-key-item {
  text-align: center;
  width: 140px;
}
body.page-door .door-key-item__img img {
  width: 100%;
  height: auto;
  border-radius: 10%;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
}
body.page-door .door-key-item__name {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}
body.page-door .door-keys-desc {
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.8;
}
body.page-door .door-keys-main-visual {
  text-align: center;
}
body.page-door .door-keys-main-visual img {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* --- Section 4: デザインバリエーション (Design) --- */

/* --- Section 5: ポイント (Point) --- */
body.page-door .door-point {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 80px;
}
body.page-door .door-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

body.page-door .door-point-box__list li::before {
  font-size: 0.8em;
}
body.page-door .door-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}
body.page-door .door-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-door .door-point-box__illust img {
    width: 100px;
  }
}

/* ★ 追加: スマホ・タブレット用レイアウト調整 
   （デザイン一覧：4列＋3列、キー：2列）
*/
@media (max-width: 1023px) {
  /* デザインバリエーション（全7枚） */
  body.page-door .door-variation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* これで最後の3枚も中央寄りになる */
    gap: 8px;
    padding: 0 8px;
  }
  body.page-door .door-variation-item {
    flex: 0 0 23%; /* 4列に収まるサイズ (25% - margin) */
    max-width: 23%;
    margin: 0;
  }
  /* 画像そのもののサイズ調整 */
  body.page-door .door-variation-item img {
    width: 100%;
    height: auto;
  }

  /* カギ（キーシステム）全4枚 */
  body.page-door .door-keys-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 24px 16px;
    max-width: 480px;
    margin: 0 auto 32px;
  }
  body.page-door .door-key-item {
    width: auto; /* グリッドに合わせる */
  }
}

/* =========================================================
   床材ページ専用の上書きスタイル（page-floor）
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 標準で選べる床材 (Lineup) --- */

/* グリッドレイアウト設定 */
body.page-floor .floor-lineup-grid {
  max-width: 1000px;
  margin: 0 auto;
}

/* PC・タブレット（768px以上）は「4列」表示 */
@media (min-width: 768px) {
  body.page-floor .floor-lineup-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* スマホ（767px以下）は「3列」表示 */
@media (max-width: 767px) {
  body.page-floor .floor-lineup-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px; /* 隙間を詰める */
  }
}

/* カードスタイル */
body.page-floor .floor-lineup-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
body.page-floor .floor-lineup-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-floor .floor-lineup-card__title {
  font-size: 1.1rem;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--color-primary);
}
body.page-floor .floor-lineup-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-soft);
}

/* ★タブレット以下（1023px以下）での表示調整：テキスト非表示・コンパクト化 */
@media (max-width: 1023px) {
  /* 説明文を非表示 */
  body.page-floor .floor-lineup-card__text {
    display: none;
  }
  
  /* カードの余白を詰める */
  body.page-floor .floor-lineup-card__body {
    padding: 10px 4px;
  }
  
  /* タイトルを小さく中央寄せ */
  body.page-floor .floor-lineup-card__title {
    font-size: 0.75rem; /* 小さめの文字 */
    margin: 0;
    text-align: center;
    line-height: 1.3;
  }
}
/* --- Section 3: 性能 (Features) --- */

body.page-floor .floor-features-grid {
  display: grid;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto 40px;
}
@media (min-width: 768px) {
  body.page-floor .floor-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-floor .floor-feature-item {
  text-align: center;
  padding: 32px 24px;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
}
body.page-floor .floor-feature-item__icon {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 16px;
}
body.page-floor .floor-feature-item__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
}
body.page-floor .floor-feature-item__text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
body.page-floor .floor-feature-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

/* --- Section 4: 部屋ごとのおすすめ (Room) - 画像サイズ調整 --- */

body.page-floor .floor-room-grid {
  max-width: 1000px;
  margin: 0 auto 40px;
}
@media (min-width: 768px) {
  body.page-floor .floor-room-grid {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-floor .floor-room-card {
  display: flex;
  flex-direction: column;
}
/* ★画像の高さを大きくして床を見やすく */
body.page-floor .floor-room-card__img {
  width: 100%;
  height: 350px; /* 240px → 350px に拡大 */
  object-fit: cover;
}
body.page-floor .floor-room-card__content {
  padding: 24px;
  flex: 1;
}
body.page-floor .floor-room-card__title {
  font-size: 1.1rem;
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid #f3f4f6;
  padding-bottom: 8px;
}
body.page-floor .floor-room-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
body.page-floor .floor-room-link {
  text-align: center;
  margin: 0;
}
body.page-floor .floor-room-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  transition: opacity 0.2s;
}
body.page-floor .floor-room-link a:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* --- Section 5: ポイント (Point) --- */
body.page-floor .floor-point {
  background-color: #fff;
  padding-top: 0;
  padding: 80px;
}
body.page-floor .floor-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

body.page-floor .floor-point-box__list li::before {
  font-size: 0.8em;
}
body.page-floor .floor-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}
body.page-floor .floor-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-floor .floor-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   外壁ページ専用の上書きスタイル（page-exterior）
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section 2: 外壁デザイン (Design) --- */

body.page-exterior .exterior-design-grid {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
/* PC (1024px~): 3列 */
@media (min-width: 1024px) {
  body.page-exterior .exterior-design-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Tablet/Mobile (~1023px): 折り返し（2列や4列など） */
@media (max-width: 1023px) {
  body.page-exterior .exterior-design-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  body.page-exterior .exterior-design-item {
    flex: 0 0 calc(25% - 8px); /* タブレット等は4列 */
    margin: 0;
  }
}
@media (max-width: 767px) {
  body.page-exterior .exterior-design-item {
    flex: 0 0 calc(50% - 8px); /* スマホは2列 */
  }
}
body.page-exterior .exterior-design-item {
  margin: 0;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  text-align: center;
}
body.page-exterior .exterior-design-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
  border: 1px solid #eee;
}
body.page-exterior .exterior-design-caption {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}
@media (max-width: 1023px) {
  body.page-exterior .exterior-design-caption {
    font-size: 0.75rem;
  }
}

/* --- Section 3: 耐候性・耐久性 (Durability) --- */

/* グラフ類（既存） */
body.page-exterior .exterior-chart-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
body.page-exterior .exterior-chart-item img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
body.page-exterior .exterior-chart-item--full {
  width: 100%;
  text-align: center;
}
body.page-exterior .exterior-chart-item--full img {
  max-width: 800px;
  width: 100%;
}

/* 新規：マイクロガード＆セルフクリーニング */
body.page-exterior .exterior-cleaning-block {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto 60px;
}
body.page-exterior .exterior-cleaning-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
/* マイクロガード（小さく） */
body.page-exterior .exterior-cleaning-item--micro {
  flex: 0 0 35%;
  max-width: 320px;
}
/* セルフクリーニング（大きく） */
body.page-exterior .exterior-cleaning-item--cycle {
  flex: 1;
  max-width: 600px;
}
/* スマホ・タブレットは縦並び */
@media (max-width: 959px) {
  body.page-exterior .exterior-cleaning-block {
    flex-direction: column;
    gap: 24px;
  }
  body.page-exterior .exterior-cleaning-item--micro,
  body.page-exterior .exterior-cleaning-item--cycle {
    flex: 1;
    max-width: 100%;
    width: 100%;
  }
}

/* 保証関連（既存） */
body.page-exterior .exterior-chart-grid--sub {
  margin-bottom: 60px;
}
body.page-exterior .exterior-chart-grid--sub .exterior-chart-item {
  flex: 1 1 300px;
  max-width: 480px;
}

/* 塗り替えサイクル */
body.page-exterior .exterior-cycle-block {
  background-color: #fdfaf4;
  border: 2px solid #fceecf;
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  margin-bottom: 60px;
}
body.page-exterior .exterior-block-title {
  font-size: 1.4rem;
  color: #8c6a48;
  margin-bottom: 32px;
  font-weight: 700;
}
body.page-exterior .exterior-cycle-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
body.page-exterior .exterior-cycle-item {
  flex: 1 1 300px;
  max-width: 480px;
}
body.page-exterior .exterior-cycle-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
body.page-exterior .exterior-note {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-top: 16px;
  text-align: right;
}

/* 構造ブロック（四方合いじゃぐり）：縦並び＆大きく */
body.page-exterior .exterior-structure-block {
  text-align: center;
}
body.page-exterior .exterior-block-text {
  max-width: 800px;
  margin: 0 auto 32px;
  line-height: 1.8;
}
body.page-exterior .exterior-structure-grid {
  display: flex;
  flex-direction: column; /* ★ PCで縦並び */
  align-items: center;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}
body.page-exterior .exterior-structure-item {
  width: 100%; /* ★ 大きく */
  max-width: 100%;
}
body.page-exterior .exterior-structure-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* --- Section 4: メンテナンス性 (Maintenance) --- */

body.page-exterior .exterior-cost-grid {
  display: flex;
  flex-direction: column; /* ★ PCで縦並び */
  align-items: center;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}
body.page-exterior .exterior-cost-item {
  width: 100%; /* ★ 大きく */
  max-width: 100%;
}
body.page-exterior .exterior-cost-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* --- Section 5: ポイント (Point) --- */
body.page-exterior .exterior-point {
  background-color: #fff;
  padding-top: 80px;
  padding-bottom: 80px;
}
body.page-exterior .exterior-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

body.page-exterior .exterior-point-box__list li::before {
  font-size: 0.8em;
}
body.page-exterior .exterior-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}
body.page-exterior .exterior-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-exterior .exterior-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   水まわりページ専用の上書きスタイル（page-water）
   ====================================================== */

/* --- サブMV & ナビ --- */

/* サブナビ */
/* --- Section 1: 導入 (Intro) --- */
/* --- Section: 共通見出し --- */
body.page-water .water-sub-head {
  margin: 60px auto 30px;
  text-align: center;
}
body.page-water .water-sub-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}
body.page-water .water-sub-text {
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

/* --- Section: キッチン (Kitchen) --- */

/* キッチンデザイン（5枚構成） */
body.page-water .water-kitchen-design-grid {
  display: grid;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto 40px;
}
@media (min-width: 768px) {
  body.page-water .water-kitchen-design-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  body.page-water .water-kitchen-design-item:nth-child(4) {
    grid-column: 1 / 2; /* 2段目左 */
    grid-row: 2;
  }
  body.page-water .water-kitchen-design-item:nth-child(5) {
    grid-column: 2 / 4; /* 2段目右（2マス分） */
    grid-row: 2;
  }
}

body.page-water .water-kitchen-design-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  min-height: 200px;
}

/* 共通アイテムグリッド (Kitchen, Toilet, Wash) */
body.page-water .water-item-grid {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
/* 4列表示 */
@media (min-width: 768px) {
  body.page-water .water-item-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  body.page-water .water-item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
body.page-water .water-item {
  background: #fff;
  margin: 0;
  text-align: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
body.page-water .water-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
body.page-water .water-item__name {
  padding: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  border-top: 1px solid #f0f0f0;
}

/* --- Section: バスルーム (Bath) --- */

/* バスルームプラン（3列） */
body.page-water .water-plan-grid {
  display: grid;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto 60px;
}
@media (min-width: 768px) {
  body.page-water .water-plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-water .water-plan-item {
  margin: 0;
  text-align: center;
}
body.page-water .water-plan-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
body.page-water .water-plan-caption {
  font-size: 0.9rem;
  color: var(--color-text);
}
body.page-water .water-plan-caption strong {
  display: block;
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* バスルームピックアップ（キャプション付き） */
body.page-water .water-item-grid--bath .water-item {
  text-align: left;
}
body.page-water .water-item__caption {
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
}
body.page-water .water-item__caption strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}
body.page-water .water-item__caption span {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  display: block;
}

/* --- Section: 洗面 (Wash) --- */

/* 洗面スタイル（2列） */
body.page-water .water-wash-grid {
  display: grid;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto 60px;
}
@media (min-width: 768px) {
  body.page-water .water-wash-grid {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-water .water-wash-item {
  margin: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
body.page-water .water-wash-item__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
body.page-water .water-wash-item__caption {
  padding: 24px;
  font-size: 0.95rem;
  line-height: 1.7;
}
body.page-water .water-wash-item__caption strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 8px;
  border-bottom: 2px solid #f3f4f6;
  padding-bottom: 8px;
}
/* ミラー画像 */
body.page-water .water-mirror-area {
  max-width: 800px;
  margin: 60px auto 0;
  text-align: center;
}
body.page-water .water-mirror-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* --- Section: トイレ (Toilet) --- */

/* --- Section: ポイント (Point) --- */
body.page-water .water-point {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 80px;
}
body.page-water .water-point-box__list li {
  margin-bottom: 18px;
  color: #6b523a;
  line-height: 1.7;
  font-size: 0.95rem;
}

body.page-water .water-point-box__list li::before {
  font-size: 0.8em;
}
body.page-water .water-point-box__list strong { /* display managed by unified CSS */
  color: #8c6a48;
  font-size: 1.05rem;
 
 
}
body.page-water .water-point-box__illust img {
  width: 150px;
  height: auto;
}
@media (max-width: 767px) {
  body.page-water .water-point-box__illust img {
    width: 100px;
  }
}

/* =========================================================
   アフターサービスページ専用の上書きスタイル（page-after）
   ====================================================== */

/* --- サブMV & ナビ --- */
body.page-after .subhero {
  /* 背景画像は subhero--after で指定（共通CSSにあると想定、なければ追加） */
  background-image: url("images/spec-top-afterservice.jpg"); /* 暫定 */
  background-size: cover;
  background-position: center;
}
/* サブナビ（中央寄せ・影付き） */
/* --- Section 1: 導入 (Intro) --- */
/* spec-detail-intro は共通クラスを利用、微調整 */
body.page-after .spec-detail-intro--after {
  align-items: center;
}
body.page-after .after-hero__catch {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 20px 0 16px;
  color: var(--color-primary);
}

/* --- 各セクションの間隔調整 --- */
/* 最初のセクション */

/* 以降のセクション間隔 */

@media (max-width: 767px) {
  body.page-after .spec-block--after-long {
    margin-top: 48px;
  }
  body.page-after .spec-block--after-compare,
  body.page-after .spec-block--after-target,
  body.page-after .spec-block--after-build,
  body.page-after .spec-block--after-after,
  body.page-after .spec-block--after-equipment,
  body.page-after .spec-block--after-line,
  body.page-after .spec-block--after-faq {
    margin-top: 64px;
  }
}

/* --- 検査体制テーブル (Table) --- */
body.page-after .after-table {
  max-width: 960px;
  margin: 32px auto 0;
}
body.page-after .after-check-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
body.page-after .after-check-table th,
body.page-after .after-check-table td {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
body.page-after .after-check-table th {
  width: 30%;
  background: #f5f5f5;
  font-weight: 700;
  color: var(--color-primary);
}
@media (max-width: 767px) {
  body.page-after .after-check-table th,
  body.page-after .after-check-table td {
    display: block;
    width: 100%;
  }
  body.page-after .after-check-table th {
    border-bottom: none;
    padding-bottom: 4px;
  }
  body.page-after .after-check-table td {
    padding-top: 4px;
  }
}

/* --- 設備保証 (Equipment) --- */
body.page-after .after-equipment-grid {
  max-width: 960px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}
body.page-after .after-equipment-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
body.page-after .after-equipment-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
body.page-after .after-equipment-body {
  flex: 1;
}
body.page-after .after-equipment-heading {
  font-weight: 700;
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--color-text);
}
body.page-after .after-equipment-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}
body.page-after .after-equipment-notes {
  max-width: 960px;
  margin: 24px auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

@media (max-width: 767px) {
  body.page-after .after-equipment-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* =========================================================
   アフター: ポイントセクション (apb = After Point Box)
   完全新規クラスで定義 - 他の CSS と一切干渉しない
   ========================================================= */
.apb-section {
  background-color: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
}

.apb-container {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.apb-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 48px 56px;
  border-radius: 24px;
  border: 2px solid rgba(196, 154, 82, .35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  background: repeating-linear-gradient(
    45deg,
    #fff7ee 0px,
    #fff7ee 14px,
    #fffdf9 14px,
    #fffdf9 28px
  );
}

.apb-body {
  flex: 1 1 520px;
  min-width: 0;
}

.apb-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  color: #5a3d26;
}

.apb-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.apb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.apb-list__item {
  position: relative;
  padding-left: 20px;
  line-height: 1.8;
  color: #333;
}

.apb-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c49a52;
}

.apb-illust {
  flex: 0 0 220px;
  max-width: 220px;
}

.apb-illust img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .apb-box {
    flex-direction: column;
    padding: 32px 20px;
    gap: 20px;
  }
  .apb-illust {
    flex-basis: auto;
    max-width: 160px;
    margin: 0 auto;
  }
}

/* --- ポイントBOX (Point) --- */

/* =========================================================
   共通：標準仕様ページ Subhero（下層MV）
   ※ 各ページの背景画像指定（subhero--xxx）は既存のまま
   ====================================================== */
body.is-spec .subhero{
  min-height: 40vh;
  align-items: center;
  padding-bottom: 0;
}

/* =========================================================
   共通：標準仕様ページ Intro（導入）
   ※ 既存の ○○-title / ○○-lead 等のタイポグラフィはそのまま
   ※ spec-detail-intro（アフター/内装など既存共通ブロック）は対象外
   ====================================================== */
body.is-spec section[class$="-intro"]:not(.spec-detail-intro){
  background-color: #fff;
  padding-bottom: 80px;
}
body.is-spec [class$="-intro__grid"]:not(.spec-detail-intro__grid){
  display: grid;
  gap: 32px;
}
@media (min-width: 768px){
  body.is-spec [class$="-intro__grid"]:not(.spec-detail-intro__grid){
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
  }
}
body.is-spec [class$="-intro__image"]:not(.spec-detail-intro__image) img{
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  width: 100%;
}

/* Center alignment utility for section heads */
body.is-spec .spec-section-head--center {
  text-align: center;
}

/* =========================================================
   Spec Common: FAQ Accordion
   ========================================================= */

/* FAQ section wrapper (pages that use <section class="...-faq">) */

/* FAQ list */
body.is-spec .spec-faq__list {
  max-width: 800px;
  margin: 0 auto;
}

/* Accordion item */
body.is-spec .spec-faq__item {
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  transition: box-shadow 0.3s;
}
body.is-spec .spec-faq__item[open] {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Question */
body.is-spec .spec-faq__q {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 24px;
  cursor: pointer;
  position: relative;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
body.is-spec .spec-faq__q::-webkit-details-marker {
  display: none;
}
body.is-spec .spec-faq__q::before {
  content: "Q.";
  color: var(--color-accent);
  flex-shrink: 0;
}
body.is-spec .spec-faq__q::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 24px;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1;
  transition: transform 0.2s ease;
}
body.is-spec .spec-faq__item[open] .spec-faq__q::after {
  content: "−";
  transform: rotate(0deg);
  color: var(--color-primary);
}

/* Answer */
body.is-spec .spec-faq__a {
  padding: 0 24px 24px 24px;
  padding-left: calc(24px + 1.5em);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
  border-top: 1px solid transparent;
}

@media (max-width: 767px) {
  body.is-spec .spec-faq__q {
    padding-right: 48px;
    font-size: 1rem;
  }
  body.is-spec .spec-faq__a {
    padding-left: 24px;
  }
}

/* =========================================================
   共通：下層ページの「ページ内CTA（次の仕様へ誘導）」 
   - 各 spec-*.html / ground_investigation.html の *-cta を共通化
   ====================================================== */

/* CTAセクション本体 */
body.is-spec .ground-cta,
body.is-spec .foundation-cta,
body.is-spec .ant-cta,
body.is-spec .structure-cta,
body.is-spec .panel-cta,
body.is-spec .insulation-cta,
body.is-spec .window-cta,
body.is-spec .ventilation-cta,
body.is-spec .door-cta,
body.is-spec .floor-cta,
body.is-spec .exterior-cta,
body.is-spec .water-cta,
body.is-spec .after-cta {
  background-color: #f0f4f8;
  text-align: center;
  padding: 100px 0;
}

/* 地盤調査CTAだけ、元の余白感を維持 */
body.is-spec .ground-cta {
  padding: 80px 0;
}

/* CTAテキスト */
body.is-spec .ground-cta__text,
body.is-spec .foundation-cta__text,
body.is-spec .ant-cta__text,
body.is-spec .structure-cta__text,
body.is-spec .panel-cta__text,
body.is-spec .insulation-cta__text,
body.is-spec .window-cta__text,
body.is-spec .ventilation-cta__text,
body.is-spec .door-cta__text,
body.is-spec .floor-cta__text,
body.is-spec .exterior-cta__text,
body.is-spec .water-cta__text,
body.is-spec .after-cta__text {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 56px;
  color: var(--color-primary);
  line-height: 1.6;
}

/* 地盤調査・基礎は元の行間を維持 */
body.is-spec .ground-cta__text,
body.is-spec .foundation-cta__text {
  line-height: 1.5;
}

/* 強調（構造/面材/断熱材/断熱窓 など） */
body.is-spec .structure-cta__text strong,
body.is-spec .panel-cta__text strong,
body.is-spec .insulation-cta__text strong,
body.is-spec .window-cta__text strong {
  color: var(--color-accent);
  font-size: 1.3rem;
}

/* ボタンエリア（共通） */
body.is-spec .foundation-cta__btn-area,
body.is-spec .ant-cta__btn-area,
body.is-spec .structure-cta__btn-area,
body.is-spec .panel-cta__btn-area,
body.is-spec .insulation-cta__btn-area,
body.is-spec .window-cta__btn-area,
body.is-spec .ventilation-cta__btn-area,
body.is-spec .door-cta__btn-area,
body.is-spec .floor-cta__btn-area,
body.is-spec .exterior-cta__btn-area,
body.is-spec .water-cta__btn-area,
body.is-spec .after-cta__btn-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* 地盤調査CTAはサブ導線が無いので、元の余白を維持 */
body.is-spec .ground-cta__btn-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* アウトラインボタンの見やすさを共通化 */
body.is-spec .ground-cta .btn--outline,
body.is-spec .foundation-cta .btn--outline,
body.is-spec .ant-cta .btn--outline,
body.is-spec .structure-cta .btn--outline,
body.is-spec .panel-cta .btn--outline,
body.is-spec .insulation-cta .btn--outline,
body.is-spec .window-cta .btn--outline,
body.is-spec .ventilation-cta .btn--outline,
body.is-spec .door-cta .btn--outline,
body.is-spec .floor-cta .btn--outline,
body.is-spec .exterior-cta .btn--outline,
body.is-spec .water-cta .btn--outline,
body.is-spec .after-cta .btn--outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: #fff;
}
body.is-spec .ground-cta .btn--outline:hover,
body.is-spec .foundation-cta .btn--outline:hover,
body.is-spec .ant-cta .btn--outline:hover,
body.is-spec .structure-cta .btn--outline:hover,
body.is-spec .panel-cta .btn--outline:hover,
body.is-spec .insulation-cta .btn--outline:hover,
body.is-spec .window-cta .btn--outline:hover,
body.is-spec .ventilation-cta .btn--outline:hover,
body.is-spec .door-cta .btn--outline:hover,
body.is-spec .floor-cta .btn--outline:hover,
body.is-spec .exterior-cta .btn--outline:hover,
body.is-spec .water-cta .btn--outline:hover,
body.is-spec .after-cta .btn--outline:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* サブ導線（共通） */
body.is-spec .foundation-cta__sub a,
body.is-spec .ant-cta__sub a,
body.is-spec .structure-cta__sub a,
body.is-spec .panel-cta__sub a,
body.is-spec .insulation-cta__sub a,
body.is-spec .window-cta__sub a,
body.is-spec .ventilation-cta__sub a,
body.is-spec .door-cta__sub a,
body.is-spec .floor-cta__sub a,
body.is-spec .exterior-cta__sub a,
body.is-spec .water-cta__sub a,
body.is-spec .after-cta__sub a {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  text-decoration: underline;
}
body.is-spec .foundation-cta__sub a:hover,
body.is-spec .ant-cta__sub a:hover,
body.is-spec .structure-cta__sub a:hover,
body.is-spec .panel-cta__sub a:hover,
body.is-spec .insulation-cta__sub a:hover,
body.is-spec .window-cta__sub a:hover,
body.is-spec .ventilation-cta__sub a:hover,
body.is-spec .door-cta__sub a:hover,
body.is-spec .floor-cta__sub a:hover,
body.is-spec .exterior-cta__sub a:hover,
body.is-spec .water-cta__sub a:hover,
body.is-spec .after-cta__sub a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* 元の見た目（アイコン＋テキストの並び）を維持していたページだけ */
body.is-spec .door-cta__sub a,
body.is-spec .floor-cta__sub a,
body.is-spec .exterior-cta__sub a,
body.is-spec .water-cta__sub a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* -------------------------------------------------------
   is-spec: Card / Grid utilities (cards & lists)
------------------------------------------------------- */
body.is-spec .c-grid{
  display: grid;
  gap: 24px;
}
body.is-spec .c-grid.gap-32{ gap: 32px; }
body.is-spec .c-grid.gap-20{ gap: 20px; }

body.is-spec .c-card{
  border-radius: var(--radius-lg);
}
body.is-spec .c-card.bg-white{ background: #fff; }
body.is-spec .c-card.clip{ overflow: hidden; }
body.is-spec .c-card.shadow-lg{ box-shadow: 0 8px 16px rgba(0,0,0,0.06); }
body.is-spec .c-card.shadow-md{ box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
body.is-spec .c-card.shadow-sm{ box-shadow: 0 4px 8px rgba(0,0,0,0.05); }

body.is-spec .c-card.hover-lift{
  transition: transform 0.2s;
}
body.is-spec .c-card.hover-lift:hover{
  transform: translateY(-3px);
}
body.is-spec .c-card.hover-lift-5{
  transition: transform 0.3s ease;
}
body.is-spec .c-card.hover-lift-5:hover{
  transform: translateY(-5px);
}

/* =========================================================
   Common Lists (Spec pages) – step: list commonization
   ====================================================== */
body.is-spec .c-point-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
body.is-spec .c-point-list > li {
  padding-left: 1.2em;
  position: relative;
}
body.is-spec .c-point-list > li::before {
  content: "●";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0.2em;
}

/* Boxed list (light gray background) */
body.is-spec .c-boxed-list {
  padding: 24px;
  margin: 0;
  list-style: none;
  background: #f9f9f9;
  border-radius: 8px;
}
body.is-spec .c-boxed-list--sm {
  padding: 20px;
}
body.is-spec .c-boxed-list > li {
  position: relative;
}
body.is-spec .c-boxed-list > li:last-child {
  margin-bottom: 0;
}

/* check icon list (Font Awesome) */
body.is-spec .c-boxed-list--check > li {
  padding-left: 1.8em;
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--color-text);
}
body.is-spec .c-boxed-list--check > li::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--color-accent);
  font-size: 1.1em;
}

/* dot bullet list */
body.is-spec .c-boxed-list--dot {
  margin-bottom: 24px;
}
body.is-spec .c-boxed-list--dot > li {
  padding-left: 1.2em;
  margin-bottom: 8px;
  line-height: 1.6;
}
body.is-spec .c-boxed-list--dot > li::before {
  content: "●";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  top: 0.2em;
  font-size: 0.8em;
}

/* =========================================================
   Component: section head (EN label + title + lead)
   Used by spec pages to reduce per-page duplication
   ====================================================== */
.c-section-head{
  text-align: center;
  margin-bottom: 50px;
}

.c-section-head__en{
  display: block;
  font-size: 0.9rem;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.c-section-head__title{
  font-size: 1.8rem;
  margin-bottom: 12px;
  color: var(--color-primary);
  font-weight: 700;
}

.c-section-head__lead{
  font-size: 1rem;
  line-height: 1.7;
}

.c-section-head__lead--narrow{
  max-width: 800px;
  margin: 0 auto;
}

.c-section-head--on-dark .c-section-head__title{
  color: #fff;
}

.c-section-head--on-dark .c-section-head__lead{
  color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
   c-media (2カラム：画像＋テキスト共通)
   - 既存デザインを崩さないため、レイアウト（grid/columns/gap）のみ共通化
   ====================================================== */

.c-media {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .c-media {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.c-media--gap32 {
  gap: 32px;
}

@media (min-width: 768px) {
  .c-media--gap60-md {
    gap: 60px;
  }
  .c-media--right-wide {
    grid-template-columns: 1fr 1.2fr;
  }
  /* gap32でもPCは60に寄せたい場合 */
  .c-media--gap32.c-media--gap60-md {
    gap: 60px;
  }
}

/* =========================================================
   SP / responsive hotfix (2025-12)
   - Unmatched @media braces were fixed upstream
   - Ensure inverse titles and key lists work on SP too
   - Stabilize "ここがねこまるホームのポイント" box on small screens
   ====================================================== */

/* Inverse titles should apply on SP as well */
body.page-ground .ground-title--inverse{
  color: #fff;
  border-left-color: var(--color-accent);
  font-size: 1.8rem;
}

body.page-structure .structure-title--inverse{
  color: #fff;
  border-left-color: var(--color-accent);
  font-size: 1.8rem;
}

/* Window comfort check-list: base style for all screens (desktop may override) */
body.page-window .window-comfort__list{
  padding-left: 0;
  list-style: none;
  margin-top: 24px;
}
body.page-window .window-comfort__list li{
  margin-bottom: 12px;
  padding-left: 1.6em;
  position: relative;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}
body.page-window .window-comfort__list li::before{
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-accent);
}

/* Ventilation visuals should keep radius/width on SP too */
body.page-ventilation .ventilation-content-row__visual img{
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  width: 100%;
  height: auto;
}

/* Point box: mobile stability (all spec pages) */
@media (max-width: 767px){
  body.is-spec [class$="-point-box"]{
    padding: 32px 20px;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.is-spec [class$="-point-box__body"]{
    width: 100%;
    min-width: 0;
  }
  body.is-spec [class$="-point-box__title"]{
    line-height: 1.35;
    flex-wrap: wrap;
  }
  body.is-spec [class$="-point-box__illust"]{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  body.is-spec [class$="-point-box__illust"] img{
    width: min(120px, 42vw);
    height: auto;
  }

  body.is-spec .c-point-list > li{
    padding-left: 1.4em;
  }
  body.is-spec .c-point-list > li + li{
    margin-top: 12px;
  }
}

/* =========================================================
   Common: Spec Intro Title & Lead (is-spec)
   - Consolidates duplicated {page}-title / {page}-lead styles
   ====================================================== */

body.is-spec :is(
  .ground-title,
  .foundation-title,
  .ant-title,
  .after-title,
  .structure-title,
  .panel-title,
  .insulation-title,
  .window-title,
  .ventilation-title,
  .door-title,
  .floor-title,
  .exterior-title,
  .water-title
) {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.4;
  color: var(--color-primary);
  border-left: 6px solid var(--color-accent);
  padding-left: 16px;
}

body.is-spec :is(
  .ground-lead,
  .foundation-lead,
  .ant-lead,
  .after-lead,
  .structure-lead,
  .panel-lead,
  .insulation-lead,
  .window-lead,
  .ventilation-lead,
  .door-lead,
  .floor-lead,
  .exterior-lead,
  .water-lead
) {
  margin-bottom: 24px;
  color: var(--color-text);
  line-height: 1.8;
}

/* =========================================================
   濃色セクション（共通）: section--primary
   - 背景: #234a74
   - 文字: 白（※淡色BOXの中は通常色に戻す）
   ====================================================== */
body.is-spec .section.section--primary{
  background-color: var(--color-primary) !important;
  color: #fff;
  padding: 80px 0;
}

/* 見出し・本文（濃色セクション内は白） */
body.is-spec .section.section--primary :is(.c-section-head__title, .section__title, h1, h2, h3){
  color: #fff;
}
body.is-spec .section.section--primary :is(.c-section-head__lead, .section__lead, p, li, dt, dd){
  color: rgba(255,255,255,.92);
}
body.is-spec .section.section--primary a{
  color: #fff;
}

/* 見出し装飾（線など） */
body.is-spec .section.section--primary :is(.section__title, .c-section-head__title)::after{
  background-color: rgba(255,255,255,.35);
}

/* 例外：淡色背景のBOX（ポイントBOX／カード／FAQなど）は“中身”を通常色へ戻す */
body.is-spec .section.section--primary :is(.ground-point__box, [class$="-point-box"], [class$="-point-box--bottom"], .faq, .faq-item){
  color: var(--color-text);
}

/* primary: light boxes text */
body.is-spec .section.section--primary :is(.ground-point__box, [class$="-point-box"], [class$="-point-box--bottom"], .faq, .faq-item) :is(p, li){
  color: var(--color-text);
}

/* primary 内ポイントBOXのタイトル（h3）を白から通常色に戻す */
body.is-spec .section.section--primary :is(.ground-point__title, [class$="-point-box__title"]) {
  color: #5a3d26 !important;
}

/* =========================================================
   仕様ページ：ここがねこまるホームのポイント（統一）
   対象: .ground-point__box / *-point-box クラス全ページ
   ====================================================== */

/* コンテナ（--bottom 修飾子も含む） */
body.is-spec :is(.ground-point__box, [class$="-point-box"], [class$="-point-box--bottom"]) {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 56px;
  border-radius: 24px;
  border: 2px solid rgba(196, 154, 82, .35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  background:
    repeating-linear-gradient(
      45deg,
      #fff7ee 0,
      #fff7ee 14px,
      #fffdf9 14px,
      #fffdf9 28px
    );
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

/* 2つ目のポイントボックス（ground-investigation-2 用） */
body.is-spec [class$="-point-box--bottom"] {
  margin-top: 40px;
}

/* 本文側 */
body.is-spec :is(.ground-point__body, [class$="-point-box__body"]) {
  flex: 1 1 520px;
  min-width: 0;
}

/* タイトル */
body.is-spec :is(.ground-point__title, [class$="-point-box__title"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  color: #5a3d26;
}

/* 肉球アイコン */
body.is-spec :is(.ground-point__icon, [class$="-point-box__icon"]) {
  width: 28px;
  height: auto;
  flex: 0 0 auto;
}

/* リスト */
body.is-spec .c-point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

body.is-spec .c-point-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.8;
  color: var(--color-text);
}

body.is-spec .c-point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: var(--color-accent);
}

body.is-spec .c-point-list strong {
  font-weight: 800;
}

/* strong を見出し風に使っているページ（br タグ併用）の強調スタイル */
/* display:inline にして <br> だけの自然な改行にし、heading と本文の間に余白を出さない */
body.is-spec .c-point-list li:has(br) strong {
  display: inline;
  color: #5a3d26;
}

/* br 付きリストは項目間（次の小見出し前）のギャップを大きめに */
body.is-spec .c-point-list:has(li > br) {
  gap: 22px;
}

/* panel ページ：リストではなく段落テキスト */
body.page-panel .panel-point-box__lead {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 1em;
}

/* 指差しイラスト */
body.is-spec :is(.ground-point__illust, [class$="-point-box__illust"]) {
  flex: 0 0 220px;
  max-width: 220px;
  display: grid;
  place-items: center;
}

body.is-spec :is(.ground-point__illust, [class$="-point-box__illust"]) img {
  width: 100%;
  height: auto;
}

/* レスポンシブ */
@media (max-width: 767px) {
  body.is-spec :is(.ground-point__box, [class$="-point-box"], [class$="-point-box--bottom"]) {
    flex-direction: column;
    padding: 32px 20px;
    gap: 20px;
  }

  body.is-spec :is(.ground-point__illust, [class$="-point-box__illust"]) {
    flex-basis: 100%;
    max-width: 160px;
    margin: 0 auto;
  }


}

/* =========================================================
   Fix: 濃色セクション内の地盤調査／構造躯体タイトルを必ず白にする（StepT基準）
   - 共通タイトル色（--color-primary）に上書きされる問題を確実に防ぐ
   ====================================================== */
.section.section--primary :is(
  .ground-title,
  .ground-title--inverse,
  .structure-title,
  .structure-title--inverse
){
  color:#fff !important;
  border-left-color: var(--color-accent) !important;
}
/* =========================================================
   CAT LIFE HOUSE：空間別アイデア集（自動 横スクロール）
   - 既存の .c-hscroll-thumbs--cards を流用しつつ、
     “自動でずっと流れる + 手動でも触れる” を実現
   ====================================================== */
.js-auto-hscroll{
  scroll-snap-type: none !important; /* 自動スクロールを優先（手動操作の引っ掛かり防止） */
  cursor: grab;
}
.js-auto-hscroll.is-dragging{
  cursor: grabbing;
}
.js-auto-hscroll::-webkit-scrollbar{
  height: 8px;
}


/* =========================================================
   CAT LIFE HOUSE：空間別アイデア集（自動/手動 横スクロール）
   - .js-auto-hscroll を付けたストリップで有効
   ====================================================== */
body.page-cat-house .section--primary .logo-break__inner--in-primary{
  margin-bottom: 18px;
}

.cta-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* PCでも横スクロールにして“楽しく”見せる（他ページには影響しない） */
body.page-cat-house .c-hscroll-thumbs.js-auto-hscroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-left: -16px;
  margin-right: -16px;
  padding: 0 16px 10px;
  scrollbar-gutter: stable both-edges;
}

body.page-cat-house .c-hscroll-thumbs.js-auto-hscroll .c-hscroll-thumbs__track{
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
}

body.page-cat-house .c-hscroll-thumbs.js-auto-hscroll .c-hscroll-thumbs__item{
  flex: 0 0 200px;
}

body.page-cat-house .c-hscroll-thumbs.js-auto-hscroll .c-hscroll-thumbs__item img{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

body.page-cat-house .c-hscroll-thumbs.js-auto-hscroll .c-hscroll-thumbs__cap{
  margin-top: 8px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
}

/* =========================================================
   FIX: 「間取りの考え方」タグ（枠が背景と同化） – CAT LIFE HOUSE / niko and...
========================================================= */
body.page-cat-house .spec-detail-intro .price-tags li,
body.page-edit-house .spec-detail-intro .price-tags li{
  border-color: rgba(35, 74, 116, 0.35);
  background: rgba(35, 74, 116, 0.06);
  color: #234a74;
}

/* =========================================================
   niko and... EDIT HOUSE：6 EDIT POINTS（左＝テキスト / 右＝ポイント）
   PC：2カラム、ポイントは2行3列（=3カラム）
========================================================= */
.section--editpoints .editpoints{
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.section--editpoints .editpoints__intro{
  flex: 0 0 42%;
  min-width: 320px;
}
.section--editpoints .editpoints__cards{
  flex: 1;
  min-width: 0;
}

/* 2行3列（6枚=2段） */
.section--editpoints .spec-feature-grid--editpoints{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* SP：縦積み＋2カラム */
@media (max-width: 767px){
  .section--editpoints .editpoints{
    flex-direction: column;
  }
  .section--editpoints .editpoints__intro{
    flex-basis: auto;
    min-width: 0;
  }
  .section--editpoints .spec-feature-grid--editpoints{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   CAT LIFE HOUSE：修正スタイル
   ========================================================= */

/* 1. チェックリストセクション内 btn--outline の文字色
      body.is-spec .section.section--primary a { color:#fff } (0,3,2) を上書き
      a タグを加えて詳細度を (0,3,2) に揃え、後方に置くことで勝つ */
body.page-cat-house .section--cat-checklist a.btn--outline {
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}
body.page-cat-house .section--cat-checklist a.btn--outline:hover {
  background-color: var(--color-primary);
  color: #fff !important;
}

/* 2. editpoints__cta ボタン並び */
.editpoints__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* 3. 空間別アイデア集：カード画像の高さを統一
      .c-hscroll-thumbs__item img の height:auto を上書き */
body.page-cat-house .c-hscroll-thumbs--cards .work-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
body.page-cat-house .c-hscroll-thumbs--cards .work-card__thumb img {
  height: 100%;
  object-fit: cover;
}

/* 4. チェックリストセクション：装飾背景ロゴ */
.section--cat-checklist {
  position: relative;
  overflow: hidden;
}
.cat-checklist__deco {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.cat-checklist__deco img {
  width: 100%;
  height: auto;
}
/* コンテンツが装飾より手前に来るよう z-index を設定 */
.section--cat-checklist .l-container {
  position: relative;
  z-index: 1;
}

/* 5. チェックリストセクション：左ブロックのテキストを左寄せ */
.section__head--left {
  text-align: left;
}
.section__head--left .section__title,
.section__head--left .section__lead {
  text-align: left;
}

/* 6. 間取りの考え方：price-tags タグを左寄せ */
body.page-cat-house .price-tags {
  justify-content: flex-start;
}

/* 7. ねこと暮らす家モデルハウス：背景を白に */
body.page-cat-house .section--modelhouse {
  background-color: #ffffff;
}

/* =========================================================
   アフターサービスページ：セクション別スタイル調整
   ========================================================= */

/* テーブル・設備グリッドを page-after に紐づけ直し（section--spec-detail 廃止後） */
body.page-after .after-long,
body.page-after .after-compare,
body.page-after .after-target,
body.page-after .after-build,
body.page-after .after-after,
body.page-after .after-equipment {
  background-color: #ffffff;
}

/* 安心の長期保証・一般的な保証期間の図版：PC で最大幅を抑える */
@media (min-width: 768px) {
  body.page-after .after-long .after-scroll img,
  body.page-after .after-compare .after-scroll img {
    max-width: 800px;
  }
}