@charset "UTF-8";
/*
Theme Name: kingo-modern
Theme URI: https://www.kingo.co.jp/
Author: レボネット株式会社
Author URI: https://plus.revonet.co.jp
Description: きんご工務店 モダンテーマ - レスポンシブ対応WordPressテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kingo-modern
*/

.mt20 {
	margin-top: 20px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}

/* ==========================================================================
   CSS変数定義
   ========================================================================== */
:root {
  /* カラーパレット */
  --color-primary: #605a56;
  --color-primary-light: #d7cbbe;
  --color-primary-dark: #4a4541;
  --color-accent: #800000;
  --color-accent-light: #a00000;
  --color-orange: #eba00b;
  --color-bg-light: #f1ece4;
  --color-bg-cream: #ece7e3;
  --color-bg-gray: #f4f4f4;
  --color-white: #fff;
  --color-text: #605a56;
  --color-text-light: #888;

  /* フォント */
  --font-family-base: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --line-height-base: 1.8;
  --letter-spacing-base: 0.1rem;

  /* スペーシング */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;

  /* コンテナ */
  --container-max: 1200px;
  --container-padding: 20px;

  /* トランジション */
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ボーダー */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 12px;
  --border-radius-xl: 30px;
}

/* スマホ用CSS変数の上書き */
@media (max-width: 767px) {
  :root {
    --container-padding: 15px;
  }
}

/* ==========================================================================
   リセット & ベース
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  font-weight: 400;
  font-style: normal;
  scroll-behavior: smooth;
  margin-top: 0 !important;
}

/* WordPress管理バー対応 */
html.admin-bar #header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  html.admin-bar #header {
    top: 46px;
  }
}

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  background-color: var(--color-white);
}

@media screen and (max-width: 767px) {
  body {
    font-size: var(--font-size-base);
    letter-spacing: 0;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

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

a:hover {
  opacity: 0.8;
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .flex {
    flex-direction: column;
  }
}

.hidden-xs {
  display: block;
}

@media screen and (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

.visible-xs {
  display: none;
}

@media screen and (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}

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

.btn {
  display: inline-block;
  padding: 14px 40px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-weight: bold;
  transition: var(--transition-base);
}

.btn:hover {
  background-color: var(--color-primary-dark);
  opacity: 1;
}

.btn i {
  margin-left: 10px;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
#header {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  background-color: transparent;
  z-index: 99;
  padding: 20px;
  transition: var(--transition-slow);
}

@media screen and (max-width: 767px) {
  #header {
    padding: 10px;
  }
}

#header.scrolled {
  background-color: rgba(96, 90, 86, 0.95);
}

/* 下層ページ用ヘッダー（背景色付き） */
body.not_home #header {
  background-color: var(--color-primary);
}

#header .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 767px) {
  #header .container {
    max-width: none;
    width: 100%;
  }
}

#header h1,
#header #site_description {
  display: none;
}

/* ロゴ */
#header #header_box {
  gap: 20px;
}

@media screen and (max-width: 767px) {
  #header #header_box {
    flex-direction: row;
    align-items: center;
  }
}

#header #logo {
  line-height: 100%;
}

#header #logo img {
  max-height: 60px;
}

@media screen and (max-width: 767px) {
  #header #logo img {
    max-width: 180px;
  }
}

/* ヘッダー右エリア */
#header #header_box > li:nth-of-type(2) {
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  #header #header_box > li:nth-of-type(2) {
    display: none;
  }
}

/* 電話番号・SNS */
#header .telWrap {
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  color: var(--color-white);
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 6px;
  margin-right: 10px;
}

#header .telWrap li:nth-of-type(1) i {
  margin-right: 10px;
}

/* グローバルナビ */
#header .gNav {
  background-color: transparent;
  font-size: var(--font-size-sm);
}

@media screen and (max-width: 767px) {
  #header .gNav {
    display: none;
  }
}

#header .gNav .container {
  position: relative;
  padding: 0;
  width: 100%;
}

#header .gNav .container > ul {
  margin: 0;
  display: flex;
  color: var(--color-white);
  justify-content: flex-end;
  gap: 0;
}

#header .gNav .container > ul > li {
  flex-grow: 1;
  text-align: center;
}

#header .gNav .container > ul > li > a {
  color: var(--color-white);
  display: block;
  transition: var(--transition-slow);
  padding: 4px 10px;
}

#header .gNav .container > ul > li > a:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
}

/* ドロップダウンメニュー */
#header .gNav .container > ul > li {
  position: relative;
}

#header .gNav .container > ul > li .navInner {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 200px;
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: 0;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#header .gNav .container > ul > li .navInner::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-white);
}

#header .gNav .container > ul > li .navInner ul {
  margin: 0;
  padding: 8px 0;
}

#header .gNav .container > ul > li .navInner ul li {
  font-size: var(--font-size-sm);
  font-weight: normal;
  text-align: left;
}

#header .gNav .container > ul > li .navInner ul li a {
  padding: 12px 20px;
  color: var(--color-text);
  line-height: 1.4;
  display: block;
  position: relative;
  transition: all 0.2s ease;
}

#header .gNav .container > ul > li .navInner ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

#header .gNav .container > ul > li:hover > .navInner {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* スクロール時のヘッダー */
#header.scrolled .gNav .container > ul > li > a {
  color: var(--color-white);
}

#header.scrolled .gNav .container > ul > li > a:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
}

#header.scrolled .gNav .container > ul > li .navInner {
  background-color: var(--color-white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

#header.scrolled .gNav .container > ul > li .navInner::before {
  border-bottom-color: var(--color-white);
}

#header.scrolled .gNav .container > ul > li .navInner ul li a {
  color: var(--color-text);
}

#header.scrolled .gNav .container > ul > li .navInner ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ハンバーガーメニュー - モダンデザイン */
#header .hamburgerWrap {
  display: none;
  align-items: center;
  gap: 30px;
}

@media screen and (max-width: 767px) {
  #header .hamburgerWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 60px;
    width: 60px;
  }
}

.drawer-hamburger {
  position: relative;
  width: 60px;
  height: 60px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* メニュー開いた時にボタンを固定位置に */
body.drawer-open .drawer-hamburger {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999 !important;
}

.drawer-hamburger-icon {
  position: relative;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

/* 上線 */
.drawer-hamburger-icon::before {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  top: -8px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              top 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.3s ease;
}

/* 下線 */
.drawer-hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  top: 8px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              top 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.3s ease;
}

/* オープン時のアニメーション（×に変形） */
body.drawer-open .drawer-hamburger-icon {
  background-color: transparent !important;
}

body.drawer-open .drawer-hamburger-icon::before {
  top: 0 !important;
  transform: rotate(45deg);
  background-color: var(--color-text);
}

body.drawer-open .drawer-hamburger-icon::after {
  top: 0 !important;
  transform: rotate(-45deg);
  background-color: var(--color-text);
}

/* ==========================================================================
   モバイルナビゲーション - モダンデザイン
   ========================================================================== */
#nav-xs.drawer-nav {
  position: fixed;
  width: 100%;
  right: -100%;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 88;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}

#nav-xs.drawer-nav .nav-xs-inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 24px 20px 100px;
}

/* CTAボタンエリア */
#nav-xs.drawer-nav .gnavi-xs .btnsWrap {
  width: 100%;
  background: transparent;
  padding: 0;
  margin-bottom: 16px;
  margin-top: 0;
}

#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* お問い合わせボタン */
#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaMail {
  background: linear-gradient(135deg, var(--color-orange) 0%, #e67e22 100%);
  color: var(--color-white);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(235, 160, 11, 0.3);
}

#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaMail a {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
}

#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaMail i {
  font-size: 1rem;
}

/* 電話番号ボタン */
#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaTel {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 12px 20px;
}

#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaTel .telTtl {
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 4px;
  opacity: 0.9;
}

#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaTel a.ctaPhone {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#nav-xs.drawer-nav .gnavi-xs .btnsWrap ul .ctaTel a.ctaPhone i {
  font-size: 1rem;
}

/* ページリンク */
#nav-xs.drawer-nav .gnavi-xs .pageLinks {
  margin-top: 10px;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks > ul {
  margin: 0;
  padding: 0;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks ul li a.single {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  border-bottom: 1px solid #e8e8e8;
  padding: 16px 0;
  transition: all 0.2s ease;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks ul li a.single:hover {
  color: var(--color-orange);
  padding-left: 8px;
}

/* SNSボタン */
#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns {
  margin-top: 20px;
  padding-top: 10px;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns ul {
  display: flex;
  justify-content: center;
  gap: 16px;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f0f0;
  color: var(--color-text);
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns ul li a:hover {
  transform: translateY(-2px);
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns ul li a[aria-label="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns ul li a[aria-label="YouTube"]:hover {
  background: #ff0000;
  color: #fff;
}

#nav-xs.drawer-nav .gnavi-xs .pageLinks .sns ul li a[aria-label="LINE"]:hover {
  background: #06c755;
  color: #fff;
}

/* ナビアイテム（新構造） */
.navItem {
  position: relative;
  border-bottom: 1px solid #e8e8e8;
}

.navItem__link {
  display: block;
  padding: 14px 0;
  padding-right: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.navItem__link:hover {
  color: var(--color-orange);
}

/* トグルボタン（+/-） */
.navItem__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navItem__toggle span {
  position: relative;
  width: 14px;
  height: 14px;
}

.navItem__toggle span::before,
.navItem__toggle span::after {
  content: '';
  position: absolute;
  background-color: var(--color-orange);
  border-radius: 2px;
  transition: transform 0.3s ease;
}

.navItem__toggle span::before {
  width: 14px;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.navItem__toggle span::after {
  width: 2px;
  height: 14px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* オープン時 */
.navItem__toggle[aria-expanded="true"] span::after {
  transform: translateX(-50%) rotate(90deg);
}

/* サブメニュー */
.navItem__sub {
  display: none;
  padding: 0 0 12px 0;
}

.navItem__sub.is-open {
  display: block;
}

.navItem__sub ul {
  padding-left: 16px;
}

.navItem__sub ul li a {
  display: block;
  padding: 10px 0;
  font-size: 0.9rem;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.navItem__sub ul li a:hover {
  color: var(--color-orange);
  padding-left: 8px;
}

.navItem__sub ul li:last-child a {
  border-bottom: none;
}

body.drawer-open .drawer-nav {
  right: 0 !important;
}

body.drawer-open .drawer-overlay {
  display: block !important;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background: rgba(0, 0, 0, 0.4);
  z-index: 87;
}

/* アコーディオン - モダンデザイン */
details {
  border-bottom: 1px solid #e8e8e8;
}

details summary {
  display: flex;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 18px 0;
  padding-right: 30px;
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: color 0.2s ease;
}

details summary:hover {
  color: var(--color-orange);
}

details summary::before,
details summary::after {
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--color-orange);
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

details summary::before {
  transform: translateY(-50%) rotate(90deg);
}

details summary::after {
  transform: translateY(-50%) rotate(0deg);
}

details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

details[open] summary {
  color: var(--color-orange);
}

/* アコーディオン内のリンク */
details .pageLinks__sub {
  padding: 0 0 15px 15px;
}

details .pageLinks__sub li {
  margin-bottom: 0;
}

details .pageLinks__sub li a {
  display: block;
  padding: 12px 0;
  font-size: 0.9rem;
  color: var(--color-text-light);
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

details .pageLinks__sub li a:hover {
  color: var(--color-orange);
  padding-left: 8px;
}

details .pageLinks__sub li:last-child a {
  border-bottom: none;
}

/* アコーディオン内 - navInner用 */
details .navInner {
  padding: 0 0 12px 0;
}

details .navInner .innerWrap ul {
  padding-left: 16px;
}

details .navInner .innerWrap ul li a {
  display: block;
  padding: 10px 0;
  font-size: 0.9rem;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

details .navInner .innerWrap ul li a:hover {
  color: var(--color-orange);
  padding-left: 8px;
}

details .navInner .innerWrap ul li:last-child a {
  border-bottom: none;
}

/* ==========================================================================
   メインビジュアル
   ========================================================================== */
#mainImg {
  margin: 0;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#mainImg .mainText {
  font-size: 2.4rem;
  font-weight: normal;
  color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  #mainImg .mainText {
    font-size: 1.8rem;
  }
}

#mainImg #slickWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#mainImg #slickWrap .slick-list,
#mainImg #slickWrap .slick-track {
  height: 100%;
}

#mainImg .slick-dotted.slick-slider {
  margin-bottom: 0 !important;
  height: 100%;
}

#mainImg .item {
  height: 100vh;
}

#mainImg .item .imgbox {
  height: 100%;
}

#mainImg .item img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.slick-dots {
  position: absolute !important;
  bottom: 20px !important;
  background-color: transparent;
}

/* ==========================================================================
   コンテンツエリア
   ========================================================================== */
#contentWrap .container {
  max-width: var(--container-max);
  margin: 0 auto;
}

#contentWrap #content h2:not(.serviceCard__ttl):not(.secTtl):not(.pamphletPromo__ttl):not(.companyMessage__ttl) {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: var(--spacing-md);
}

@media screen and (max-width: 767px) {
  #contentWrap #content h2:not(.serviceCard__ttl):not(.secTtl):not(.pamphletPromo__ttl):not(.companyMessage__ttl) {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
  }
}

#contentWrap #content h2 strong {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 3rem;
  display: inline-block;
  padding: 0 6px;
}

@media screen and (max-width: 767px) {
  #contentWrap #content h2 strong {
    font-size: 1.8rem;
  }
}

/* セクション共通 */
.sec {
  padding: var(--spacing-2xl) 0;
}

@media screen and (max-width: 767px) {
  .sec {
    padding: var(--spacing-xl) 0;
  }
}

/* ==========================================================================
   セクション01: メッセージ
   ========================================================================== */
.sec01 {
  background: var(--color-bg-cream);
}

.sec01 > .container > ul {
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .sec01 > .container > ul {
    flex-direction: column;
    gap: 30px;
  }
}

.sec01 .sec01-img {
  flex: 0 0 45%;
  max-width: 45%;
}

@media screen and (max-width: 767px) {
  .sec01 .sec01-img {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.sec01 .sec01-img img {
  width: 100%;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.sec01 .sec01-text {
  flex: 1;
  text-align: left;
}

.sec01 .sec01-text h2 {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 25px;
  text-align: left !important;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .sec01 .sec01-text h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
}

.sec01 .sec01-text p {
  font-size: 0.95rem;
  line-height: 2;
  margin-bottom: 8px;
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .sec01 .sec01-text p {
    font-size: 0.85rem;
  }
}

.sec01 .sec01-text .services {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  letter-spacing: 0.15em;
  margin-left: -1px;
}

@media screen and (max-width: 767px) {
  .sec01 .sec01-text .services {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   セクション: 画像バナー
   ========================================================================== */
.imagesWrap {
  margin: 0;
  position: relative;
}

.imagesWrap .ttl-lg {
  position: absolute;
  color: var(--color-white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 767px) {
  .imagesWrap .ttl-lg {
    font-size: 1.1rem;
    font-weight: bold;
  }
}

.imagesWrap ul {
  display: flex;
  max-width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
}

.imagesWrap ul li {
  width: 100%;
}

.imagesWrap ul li img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* ==========================================================================
   セクション: 特徴
   ========================================================================== */
.featuresWrap {
  background-color: var(--color-bg-light);
}

@media screen and (max-width: 767px) {
  .featuresWrap {
    background-image: none;
  }
}

.featureWrap ul {
  display: flex;
  gap: 100px 40px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (max-width: 767px) {
  .featureWrap ul {
    flex-direction: column;
    gap: 20px 10px;
  }
}

.featureWrap ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: calc((100% - 80px) / 3);
  text-align: center;
  filter: drop-shadow(8px 4px 4px #eee);
}

@media screen and (max-width: 767px) {
  .featureWrap ul li {
    width: 100%;
    padding: 10px 0;
    gap: 0;
    background-color: var(--color-white);
  }
}

.featureWrap ul li .featureTtl {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .featureWrap ul li .featureTtl {
    font-size: 1.1rem;
    margin: 10px 0;
  }
}

.featureWrap ul li img {
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .featureWrap ul li img {
    width: 100%;
    max-width: 300px;
  }
}

.featureWrap ul li .featureDesc {
  letter-spacing: 0;
  line-height: 1.8;
  text-align: left;
}

.featureWrap ul li .featureDesc p {
  margin-bottom: 1em;
}

.featureWrap ul li .featureDesc p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .featureWrap ul li .featureDesc {
    width: 100%;
    font-size: var(--font-size-sm);
    padding: 10px;
  }
}

/* ==========================================================================
   セクション02: 施工事例
   ========================================================================== */
.sec02 {
  background-color: var(--color-white);
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  .sec02 {
    padding-top: 40px;
    padding-bottom: 0;
  }
}

.sec02 .caseSliderWrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.sec02 .caseSlider {
  max-width: 900px;
  margin: 0 auto;
}

.sec02 .caseSlider .slick-slide {
  padding: 0 15px;
}

.sec02 .caseSlider .slick-prev,
.sec02 .caseSlider .slick-next {
  width: 44px;
  height: 44px;
  z-index: 10;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sec02 .caseSlider .slick-prev:hover,
.sec02 .caseSlider .slick-next:hover {
  background: var(--color-primary);
}

.sec02 .caseSlider .slick-prev:hover span,
.sec02 .caseSlider .slick-next:hover span {
  color: var(--color-white);
}

.sec02 .caseSlider .slick-prev span,
.sec02 .caseSlider .slick-next span {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-primary);
  line-height: 1;
}

.sec02 .caseSlider .slick-prev {
  left: -60px;
}

.sec02 .caseSlider .slick-next {
  right: -60px;
}

.sec02 .caseSlider .slick-prev:before,
.sec02 .caseSlider .slick-next:before {
  display: none;
}

.sec02 .caseSlider .slick-dots {
  bottom: -30px !important;
}

.sec02 .caseSlider .slick-dots li button:before {
  font-size: 12px;
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .sec02 .caseSlider .slick-slide {
    padding: 0 5px;
  }
}

.sec02 ul li {
  outline: none;
}

.sec02 ul li a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.sec02 ul li a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .sec02 ul li {
    background-color: var(--color-white);
  }
}

.sec02 ul li .caseImg img {
  width: 100%;
  border-radius: var(--border-radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sec02 ul li .caseText {
  padding: 20px 0;
}

@media screen and (max-width: 767px) {
  .sec02 ul li .caseText {
    padding: 10px;
  }
}

.sec02 ul li .caseText .caseTtl {
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.sec02 ul li .caseText p {
  padding: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.sec02 .caseSliderWrap .en {
  position: absolute;
  top: 0;
  left: -130px;
  font-size: 2.4rem;
  color: var(--color-primary);
  transform: rotate(-90deg);
  text-transform: uppercase;
  z-index: 9;
  filter: drop-shadow(-2px 3px 0 var(--color-white));
}

@media screen and (max-width: 767px) {
  .sec02 .caseSliderWrap .en {
    display: none;
  }
}

/* ==========================================================================
   セクション03: ポイント
   ========================================================================== */
.sec03 {
  background-color: var(--color-white);
  padding-top: 0;
}

.sec03 .pointsWrap {
  background-color: #f5f1ea;
  text-align: center;
  border: 10px solid var(--color-bg-light);
  padding: 40px 60px;
  border-radius: var(--border-radius-xl);
  position: relative;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.4rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap {
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 20px;
    margin-bottom: 20px;
  }
}

.sec03 .pointsWrap p {
  margin-bottom: 20px;
}

.sec03 .pointsWrap p strong {
  font-size: var(--font-size-3xl);
  font-weight: bold;
  display: inline-block;
  border-bottom: 4px solid var(--color-primary);
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap p strong {
    font-size: 1.4rem;
  }
}

.sec03 .pointsWrap .pointWrap {
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-primary-light);
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap .pointWrap {
    flex-direction: column;
    gap: 20px;
  }
}

.sec03 .pointsWrap .pointWrap .pointNum {
  width: 18%;
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap .pointWrap .pointNum {
    width: 60%;
  }
}

.sec03 .pointsWrap .pointWrap .pointTtl {
  text-align: left;
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap .pointWrap .pointTtl {
    font-size: 1.2rem;
    text-align: center;
  }
}

.sec03 .pointsWrap .pointWrap .point {
  width: 80%;
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap .pointWrap .point {
    width: 100%;
  }
}

.sec03 .pointsWrap .pointWrap:nth-of-type(even) {
  flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .sec03 .pointsWrap .pointWrap:nth-of-type(even) {
    flex-direction: column;
  }
}

.sec03 .pointsWrap .pointWrap:last-of-type {
  border: none;
}

.sec03 .pointsWrap .pointWrap p {
  font-size: 1rem;
  font-weight: normal;
  text-align: left;
  margin-bottom: 0;
}

/* ==========================================================================
   セクション04: スケジュール
   ========================================================================== */
.sec04 {
  background-color: var(--color-bg-cream);
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  .sec04 {
    padding-bottom: 40px;
  }
}

.sec04 h3 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.3em;
}

@media screen and (max-width: 767px) {
  .sec04 h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
}

.sec04 .container {
  position: relative;
}

@media screen and (max-width: 767px) {
  .sec04 .container {
    padding: 0 20px;
  }
}

.sec04 ul {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 80px auto;
  flex-direction: column;
  max-width: 400px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .sec04 ul {
    gap: 10px;
    margin: 20px 0;
    max-width: none;
  }
}

.sec04 ul li {
  white-space: nowrap;
  background-color: var(--color-white);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: var(--border-radius-lg);
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  position: relative;
}

@media screen and (max-width: 767px) {
  .sec04 ul li {
    font-size: 1rem;
    padding: 14px 18px;
  }
}

.sec04 ul li .label {
  background-color: var(--color-orange);
  color: var(--color-white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  right: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  padding-left: 0.3rem;
}

@media screen and (max-width: 767px) {
  .sec04 ul li .label {
    font-size: 0.75rem;
    width: 40px;
    height: 40px;
    right: -12px;
    top: -12px;
    padding: 0;
    justify-content: center;
    align-items: center;
  }
}

.sec04 ul li:nth-of-type(even) {
  background-color: transparent;
  border: 2px solid var(--color-primary);
}

.sec04 .en {
  position: absolute;
  top: 0;
  right: 60px;
  font-size: 2.4rem;
  color: var(--color-primary);
  transform: rotate(-90deg);
  text-transform: uppercase;
  z-index: 9;
  filter: drop-shadow(-2px 3px 0 var(--color-bg-cream));
}

@media screen and (max-width: 767px) {
  .sec04 .en {
    display: none;
  }
}

.sec04 .scheduleBg {
  position: absolute;
}

.sec04 .lt {
  top: 100px;
  left: -300px;
}

.sec04 .rt {
  top: -50px;
  right: -300px;
}

.sec04 .lb {
  bottom: 0;
  left: -300px;
}

.sec04 .rb {
  bottom: 100px;
  right: -300px;
}

@media screen and (max-width: 767px) {
  .sec04 .scheduleBg {
    display: none;
  }
}

/* ==========================================================================
   ボタンラッパー
   ========================================================================== */
.btnWrap {
  text-align: center;
  margin: var(--spacing-xl) auto var(--spacing-lg) auto;
}

@media screen and (max-width: 767px) {
  .btnWrap {
    margin: var(--spacing-lg) 0 0 0;
  }
}

.btnWrap a.btn {
  font-size: 1.2rem;
  position: relative;
  display: inline-block;
  padding: 20px 60px;
  min-width: 400px;
  background-color: var(--color-primary);
  letter-spacing: 0.2rem;
}

@media screen and (max-width: 767px) {
  .btnWrap a.btn {
    min-width: auto;
    width: 100%;
    font-size: 1rem;
    padding: 20px;
  }
}

.btnWrap a.btn i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   フッター
   ========================================================================== */
#footer {
  background-color: var(--color-bg-gray);
}

#footer .container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* CTA */
#footer .ctaWrap {
  padding: 0 0 100px 0;
  /*background: linear-gradient(180deg, var(--color-bg-cream) 20%, white 20%);*/
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap {
    padding: 0;
  }
}

#footer .ctaWrap .container {
  display: flex;
  justify-content: center;
  background-image: url("assets/images/footCta.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#footer .ctaWrap .container .ctaInner {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 60px 40px;
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner {
    padding: 40px 20px;
  }
}

#footer .ctaWrap .container .ctaInner .ctaText {
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner .ctaText {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
}

#footer .ctaWrap .container .ctaInner .linkWrap {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner .linkWrap {
    gap: 14px;
    justify-content: space-between;
  }
}

#footer .ctaWrap .container .ctaInner .linkWrap li {
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner .linkWrap li {
    width: 100%;
  }
}

#footer .ctaWrap .container .ctaInner .linkWrap li i {
  font-size: 1.4rem;
}

#footer .ctaWrap .container .ctaInner .linkWrap li a {
  background-color: var(--color-white);
  padding: 10px 40px;
  border-radius: var(--border-radius-xl);
  display: flex;
  gap: 10px;
  align-items: center;
  filter: drop-shadow(0 0 1px #ddd);
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner .linkWrap li a {
    width: 100%;
    padding: 10px;
    flex-direction: column;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
  }

  #footer .ctaWrap .container .ctaInner .linkWrap li a i {
    font-size: 1.2rem;
  }
}

#footer .ctaWrap .container .ctaInner .telWrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner .telWrap {
    max-width: none;
  }
}

#footer .ctaWrap .container .ctaInner .telWrap li:nth-of-type(1) .telText {
  text-align: center;
  font-size: 2.8rem;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  #footer .ctaWrap .container .ctaInner .telWrap li:nth-of-type(1) .telText {
    font-size: 1.8rem;
  }
}

#footer .ctaWrap .container .ctaInner .telWrap li:nth-of-type(1) i {
  margin-right: 10px;
}

#footer .ctaWrap .container .ctaInner .telWrap li:nth-of-type(2) {
  font-size: var(--font-size-sm);
  font-weight: bold;
  text-align: center;
}

/* ロゴエリア */
#footer .logoWrap {
  background-color: var(--color-primary);
  padding: 0;
  color: var(--color-white);
}

#footer .logoWrap ul {
  display: flex;
  gap: 60px;
  margin-bottom: 0;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 767px) {
  #footer .logoWrap .container {
    padding-top: var(--spacing-lg);
  }

  #footer .logoWrap ul {
    flex-direction: column-reverse;
    gap: 20px;
  }
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li {
    letter-spacing: 0;
    padding: 10px;
  }
}

#footer .logoWrap ul li .leftWrap {
  position: relative;
}

#footer .logoWrap ul li .footName {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

#footer .logoWrap ul li .footAddr {
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li .footAddr {
    line-height: 1.6;
  }
}

#footer .logoWrap ul li .footSnsWrap {
  position: absolute;
  top: 0;
  right: 0;
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li .footSnsWrap {
    position: static;
    margin-top: 10px;
  }
}

#footer .logoWrap ul li .footSnsWrap ul {
  display: flex;
  gap: 10px;
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li .footSnsWrap ul {
    flex-direction: row;
    gap: 14px;
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li .footSnsWrap ul li {
    padding: 0;
  }
}

#footer .logoWrap ul li .footSnsWrap ul li i {
  font-size: 2rem;
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li .footSnsWrap ul li i {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  #footer .logoWrap ul li.comImg {
    width: 100%;
    padding: 0;
  }

  #footer .logoWrap ul li.comImg img {
    max-width: none;
    width: 100%;
    height: 240px;
    object-fit: cover;
  }
}

/* コピーライト */
#copy {
  text-align: left;
  font-size: 0.7rem;
  line-height: 1.6;
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  #copy {
    padding: 0;
    font-size: 0.7rem;
    margin-top: 20px;
  }
}

#copy .revonet {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.6rem;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  #copy .revonet {
    font-size: 0.6rem;
    justify-content: flex-end;
  }
}

#copy .revonet a {
  display: inline-block;
}

#copy .revonet a img {
  vertical-align: middle;
}

/* ページトップ */
#page-top {
  position: fixed;
  bottom: 50px;
  right: 0;
  font-size: 12px;
  z-index: 9;
}

#page-top a {
  background-color: var(--color-primary);
  text-decoration: none;
  color: var(--color-white);
  width: 40px;
  padding: 10px;
  text-align: center;
  display: block;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

#page-top a:hover {
  background-color: var(--color-primary-dark);
  opacity: 1;
}

/* reCAPTCHA非表示 */
.grecaptcha-badge {
  display: none;
}

/* ==========================================================================
   パンくず
   ========================================================================== */
#bread {
  margin: 0;
  padding: var(--spacing-sm) 0;
  background: var(--color-bg-gray);
  font-size: 0.75rem;
}

#bread .container {
  padding: 0 var(--spacing-md);
  max-width: var(--container-width);
  margin: 0 auto;
  color: var(--color-text-light);
}

#bread .container a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

#bread .container a:hover {
  color: var(--color-primary);
}

#bread .container span.current-item {
  display: none;
}

@media screen and (max-width: 767px) {
  #bread {
    font-size: 0.7rem;
  }
  #bread .container {
    padding: 0 var(--spacing-sm);
  }
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */
.not_home #contentWrap #content a {
  color: #173a90;
  text-decoration: underline;
}

.not_home #contentWrap #content a:hover {
  color: darkcyan;
}

/* サービスカード・ボタン類のリンクは下線なし */
.not_home #contentWrap #content .serviceCard a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.not_home #contentWrap #content .btn,
.not_home #contentWrap #content .pageCta a {
  text-decoration: none;
  color: inherit;
}

.not_home #contentWrap #content h1 {
  margin-bottom: 60px;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .not_home #contentWrap #content h1 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: left;
    padding: 0 10px;
  }
}

.not_home #contentWrap #content h1 a {
  color: #000;
  text-decoration: none;
}

.not_home #contentWrap #content h2:not(.serviceCard__ttl):not(.secTtl):not(.contactIntro__ttl):not(.pamphletPromo__ttl):not(.companyMessage__ttl) {
  margin-bottom: 40px;
  font-size: 1.4rem;
  font-weight: bold;
  background-color: var(--color-primary);
  padding: 20px;
  color: var(--color-white);
  text-align: left;
}

@media screen and (max-width: 767px) {
  .not_home #contentWrap #content h2:not(.serviceCard__ttl):not(.secTtl):not(.contactIntro__ttl):not(.pamphletPromo__ttl):not(.companyMessage__ttl) {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
}

.not_home #contentWrap #content h3:not(.serviceCard__ttl):not(.reformFeatures__ttl):not(.worksShowcase__ttl):not(.conceptCard__ttl):not(.flowTimeline__ttl):not(.companyAccess__cardTtl):not(.historyTimeline__ttl):not(.serviceCases__ttl) {
  margin-bottom: 40px;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #eee;
  padding: 20px 30px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .not_home #contentWrap #content h3:not(.serviceCard__ttl):not(.reformFeatures__ttl):not(.worksShowcase__ttl):not(.conceptCard__ttl):not(.flowTimeline__ttl):not(.companyAccess__cardTtl):not(.historyTimeline__ttl):not(.serviceCases__ttl) {
    padding: 20px 10px;
    margin: 0 0 20px 0;
    font-size: 1.1rem;
  }
}

.not_home #contentWrap #content h4 {
  font-weight: bold;
  margin: 20px auto;
}

.not_home #contentWrap #content p {
  margin-bottom: 20px;
}

.not_home #contentWrap #content .sec {
  padding: 60px 0;
}

@media screen and (max-width: 767px) {
  .not_home #contentWrap #content .sec {
    padding: 30px 10px;
  }
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

/* ページヘッダー */
.pageHeader {
  background: linear-gradient(rgba(96, 90, 86, 0.7), rgba(74, 69, 65, 0.8)),
              url('assets/images/reform-hero.webp') center center / cover no-repeat;
  padding: 100px 0 80px;
  text-align: center;
  color: var(--color-white);
  position: relative;
}

.pageTtl {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
}

.pageHeader__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0;
}

.pageDesc {
  font-size: var(--font-size-base);
  opacity: 0.9;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .pageHeader {
    padding: 80px var(--spacing-sm) 60px;
  }
  .pageHeader .pageTtl,
  .pageHeader__title {
    font-size: var(--font-size-xl);
    text-align: center;
  }
  .pageHeader .pageDesc {
    font-size: var(--font-size-sm);
    text-align: center;
  }
}

/* サービスカード一覧 */
.serviceCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 1024px) {
  .serviceCards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .serviceCards {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

.serviceCard {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.serviceCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(96, 90, 86, 0.2);
}

.serviceCard a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.serviceCard a * {
  text-decoration: none;
}

.serviceCard__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-gray);
  position: relative;
}

.serviceCard__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(96, 90, 86, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.serviceCard:hover .serviceCard__img::after {
  opacity: 1;
}

.serviceCard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.serviceCard:hover .serviceCard__img img {
  transform: scale(1.08);
}

.serviceCard__body {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  position: relative;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 180px;
  flex-grow: 1;
}

/* serviceCard__ttl - 高い詳細度で定義（h2, h3両対応） */
#contentWrap #content h2.serviceCard__ttl,
#contentWrap #content h3.serviceCard__ttl,
.serviceCard__ttl {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent !important;
  padding: 0 0 0 0.8rem !important;
  margin: 0 0 0.8rem 0 !important;
  text-decoration: none;
  display: block;
  border-left: 3px solid var(--color-orange);
  border-bottom: none !important;
  letter-spacing: 0.05em;
  text-align: left !important;
}

.serviceCard__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--spacing-xs);
  text-decoration: none;
  flex: 1;
}

.serviceCard__btn,
#contentWrap #content .serviceCard__btn,
.not_home #contentWrap #content .serviceCard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-primary) !important;
  font-weight: bold;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-xl);
  transition: all 0.3s ease;
  background: transparent;
  margin-top: auto;
  align-self: flex-start;
}

.serviceCard:hover .serviceCard__btn,
#contentWrap #content .serviceCard:hover .serviceCard__btn,
.not_home #contentWrap #content .serviceCard:hover .serviceCard__btn {
  background: var(--color-primary);
  color: var(--color-white) !important;
}

.serviceCard__btn i {
  transition: transform 0.3s ease;
}

.serviceCard:hover .serviceCard__btn i {
  transform: translateX(4px);
}

/* リフォームページ イントロ */
.reformIntro {
  background: var(--color-bg-cream);
}

.reformIntro__wrap {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
}

.reformIntro__img {
  flex: 0 0 270px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: 4px solid var(--color-white);
}

.reformIntro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reformIntro__body {
  flex: 1;
}

.reformIntro__lead {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-dark);
}

.reformIntro__lead strong {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 700;
}

.reformIntro__text {
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: var(--spacing-sm);
}

.reformIntro__text:last-child {
  margin-bottom: 0;
}

.reformIntro__text strong {
  color: var(--color-orange);
  font-weight: bold;
  font-size: 1.2rem;
}

.reformIntro__text em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary);
}

.reformIntro__text--sub {
  font-size: 0.95rem;
  color: var(--color-text-light);
}

@media screen and (max-width: 767px) {
  .reformIntro__wrap {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .reformIntro__img {
    flex: none;
    width: 180px;
    height: 180px;
    order: -1;
  }

  .reformIntro__lead {
    font-size: 1.1rem;
    text-align: center;
  }

  .reformIntro__lead strong {
    font-size: 1.25rem;
  }

  .reformIntro__text {
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .reformIntro__text strong {
    font-size: 1.1rem;
  }

  .reformIntro__text--sub {
    font-size: 0.9rem;
  }
}

/* リフォームページ 3つの特徴 */
.reformFeatures {
  background: var(--color-white);
}

.reformFeatures__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

@media screen and (max-width: 767px) {
  .reformFeatures__list {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

.reformFeatures__item {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-bg-gray);
  border-radius: var(--border-radius-lg);
}

.reformFeatures__icon {
  width: 70px;
  height: 70px;
  margin: 0 auto var(--spacing-md);
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reformFeatures__icon i {
  font-size: 1.8rem;
  color: var(--color-white);
}

.reformFeatures__ttl {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.reformFeatures__desc {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text);
}

/* ページCTA */
.pageCta {
  background: var(--color-bg-cream);
}

.pageCta__inner {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.pageCta__text {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.pageCta__btns {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--border-radius-md);
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn--primary,
.not_home #contentWrap #content .btn--primary,
#contentWrap #content .btn--primary {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.btn--primary:hover,
.not_home #contentWrap #content .btn--primary:hover,
#contentWrap #content .btn--primary:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

.btn--secondary,
.not_home #contentWrap #content .btn--secondary,
#contentWrap #content .btn--secondary {
  background: var(--color-white) !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary);
}

.btn--secondary:hover,
.not_home #contentWrap #content .btn--secondary:hover,
#contentWrap #content .btn--secondary:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* SP表示切り替え */
.sp-only {
  display: none;
}

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

/* ==========================================================================
   下層ページ詳細（全面リフォーム等）
   ========================================================================== */

/* セクションタイトル */
.secTtl {
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xl);
}

.secTtl__en {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: normal;
  letter-spacing: 0.2em;
  margin-bottom: var(--spacing-xs);
}

/* お悩みセクション */
.troubleSection {
  background: var(--color-bg-cream);
}

.troubleList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .troubleList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .troubleList {
    grid-template-columns: 1fr;
  }
}

.troubleItem {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.troubleItem i {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.troubleItem p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* 解決策セクション */
.solutionSection {
  background: var(--color-white);
}

.solutionContent {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
}

@media screen and (max-width: 767px) {
  .solutionContent {
    flex-direction: column;
  }
}

.solutionText {
  flex: 1;
}

.solutionText p {
  margin-bottom: var(--spacing-sm);
}

.solutionText strong {
  color: var(--color-primary);
}

.solutionPoints {
  list-style: none;
  margin: var(--spacing-md) 0 0;
  padding: 0;
}

.solutionPoints li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.solutionPoints li i {
  color: var(--color-primary);
}

.solutionImg {
  flex: 1;
  max-width: 450px;
}

.solutionImg img {
  width: 100%;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 特徴セクション */
.featureSection {
  background: var(--color-bg-light);
}

.featureList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.featureItem {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.featureItem:last-child {
  margin-bottom: 0;
}

.featureItem__num {
  font-size: var(--font-size-3xl);
  font-weight: bold;
  color: var(--color-primary-light);
  line-height: 1;
  min-width: 60px;
}

.featureItem__content {
  flex: 1;
}

.featureItem__ttl {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.featureItem__content p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .featureItem {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }
  .featureItem__num {
    font-size: var(--font-size-2xl);
  }
}

/* 施工事例セクション */
.caseSection {
  background: var(--color-white);
}

.caseList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
}

@media screen and (max-width: 767px) {
  .caseList {
    grid-template-columns: 1fr;
  }
}

.caseItem {
  background: var(--color-bg-cream);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.caseItem__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.caseItem__body {
  padding: var(--spacing-md);
}

.caseItem__ttl {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.caseItem__desc {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.caseItem__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-sm);
}

.caseItem__info dt {
  color: var(--color-text-light);
}

.caseItem__info dd {
  margin: 0 var(--spacing-sm) 0 0;
  font-weight: bold;
}

/* ボタンラップ中央 */
.caseSection .btnWrap {
  text-align: center;
}

/* ==========================================================================
   水回りリフォームページ（タブレイアウト）
   ========================================================================== */

/* 水回りページ専用ヘッダー */
.pageHeader--water {
  background: linear-gradient(rgba(50, 50, 50, 0.5), rgba(30, 30, 30, 0.6)),
              url('assets/images/water-hero.webp') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 300px;
}

.pageHeader--water .pageTtl {
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pageHeader--water .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--water {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 250px;
  }
  .pageHeader--water .pageTtl,
  .pageHeader--water .pageDesc {
    text-align: center;
  }
}

/* イントロ - インパクト重視 */
.waterIntro {
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,248,255,0.9) 100%),
    url('assets/images/water-hero.webp') center center / cover no-repeat;
  position: relative;
  padding: var(--spacing-2xl) 0;
  overflow: hidden;
}

.waterIntro::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.waterIntro::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(96, 90, 86, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.waterIntro .container {
  position: relative;
  z-index: 1;
}

.waterIntro__catch {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  line-height: 2;
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
}

.waterIntro__accent {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.2em;
  position: relative;
}

.waterIntro__accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
  z-index: -1;
}

.waterIntro__highlight {
  background: linear-gradient(transparent 60%, rgba(255, 193, 7, 0.3) 60%);
  font-weight: 600;
}

.waterIntro__emphasis {
  color: var(--color-orange);
  font-weight: 700;
  font-size: 1.15em;
}

/* 丸画像ギャラリー */
.waterIntro__circles {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.waterIntro__circleItem {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.waterIntro__circleItem:hover {
  transform: translateY(-3px);
}

.waterIntro__circleImg {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 3px solid var(--color-white);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.waterIntro__circleItem:hover .waterIntro__circleImg {
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.3);
  border-color: var(--color-primary);
}

.waterIntro__circleImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.waterIntro__circleItem:hover .waterIntro__circleImg img {
  transform: scale(1.1);
}

.waterIntro__circleItem span {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
}

@media (max-width: 768px) {
  .waterIntro__circles {
    gap: var(--spacing-sm);
  }

  .waterIntro__circleImg {
    width: 75px;
    height: 75px;
  }

  .waterIntro__circleItem span {
    font-size: 0.7rem;
  }
}

.waterIntro__divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-orange));
  margin: var(--spacing-lg) auto;
  border-radius: 2px;
}

.waterIntro__text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 2;
  margin-bottom: var(--spacing-lg);
}

.waterIntro__text strong {
  color: var(--color-primary);
  font-weight: 600;
}

.waterIntro__company {
  font-weight: 700;
  color: var(--color-text-dark);
}

.waterIntro__points {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.waterIntro__points li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  background: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.waterIntro__points li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.waterIntro__points li i {
  color: var(--color-primary);
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .waterIntro {
    padding: var(--spacing-xl) 0;
  }

  .waterIntro__catch {
    line-height: 1.8;
  }

  .waterIntro__points {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .waterIntro__points li {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
}

/* タブナビ */
.waterTabs__nav {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 0;
  max-width: 800px;
}

.waterTabs__navItem {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-sm);
  text-align: center;
  cursor: pointer;
  background: var(--color-bg-gray);
  border: none;
  transition: all 0.3s ease;
  font-weight: bold;
  color: var(--color-text-light);
  position: relative;
}

.waterTabs__navItem:first-child {
  border-radius: var(--border-radius-lg) 0 0 0;
}

.waterTabs__navItem:last-child {
  border-radius: 0 var(--border-radius-lg) 0 0;
}

.waterTabs__navItem:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.waterTabs__navItem.is-active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.waterTabs__navItem i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
  transition: transform 0.3s ease;
}

.waterTabs__navItem.is-active i {
  color: var(--color-orange);
  transform: scale(1.1);
}

.waterTabs__navItem span {
  display: block;
  font-size: var(--font-size-sm);
}

/* タブコンテンツ */
.waterTabs__content {
  display: none;
  animation: fadeIn 0.3s ease;
  background: var(--color-white);
  padding: var(--spacing-xl);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.waterTabs__content.is-active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* サービス詳細 */
.waterService {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.waterService__img img {
  width: 100%;
  border-radius: var(--radius-md);
}

.waterService__ttl {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary-light);
}

.waterService__desc {
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

.waterService__points {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.waterService__points li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-gray);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  transition: all 0.3s ease;
}

.waterService__points li:hover {
  background: var(--color-primary-light);
  transform: translateX(5px);
}

.waterService__points li i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.waterService__price {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--border-radius-md);
  color: var(--color-white);
}

.waterService__price .label {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-sm);
  font-weight: 500;
}

.waterService__price .price {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.waterService__list {
  background: var(--color-bg-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.waterService__list li {
  padding: var(--spacing-xs) 0;
  padding-left: 1.5em;
  position: relative;
}

.waterService__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

/* 選ばれる理由 */
.waterReasons {
  background: var(--color-bg-cream);
}

.reasonCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.reasonCard {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
  text-align: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.reasonCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-orange));
}

.reasonCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.reasonCard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: var(--spacing-sm);
  position: relative;
  box-shadow: 0 4px 15px rgba(96, 90, 86, 0.3);
}

.reasonCard__num::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed var(--color-primary-light);
  border-radius: 50%;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.reasonCard__ttl {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  text-align: center;
}

.reasonCard__desc {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text);
  text-align: left;
}

/* 保証制度セクション */
.warrantySection {
  background: var(--color-white);
}

.warrantyIntro {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.warrantyIntro__ttl {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.warrantyIntro__ttl span {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-orange);
  margin-left: var(--spacing-xs);
}

.warrantyIntro__desc {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
  line-height: 1.8;
}

.warrantyIntro__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

.warrantyList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.warrantyList__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--color-bg-gray);
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.warrantyList__item:hover {
  background: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.warrantyList__item i {
  font-size: 2rem;
  color: var(--color-primary);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.warrantyList__item span {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.5;
}

/* 施工事例ギャラリー */
.waterGallery {
  background: var(--color-bg-light);
}

.waterGallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.waterGallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.waterGallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.waterGallery__item:hover img {
  transform: scale(1.08);
}

.waterGallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.waterGallery__item:hover::after {
  opacity: 1;
}

/* 4列グリッド */
.waterGallery__grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .waterGallery__grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .waterGallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .warrantyIntro__ttl {
    font-size: 1.1rem;
  }

  .warrantyIntro__ttl span {
    display: block;
    margin-left: 0;
    margin-top: var(--spacing-xs);
  }

  .warrantyList {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .warrantyList__item {
    padding: var(--spacing-md);
  }

  .warrantyList__item i {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .waterTabs__nav {
    flex-wrap: wrap;
  }

  .waterTabs__navItem {
    flex: 1 1 50%;
    border-radius: 0;
  }

  .waterTabs__navItem:first-child {
    border-radius: var(--border-radius-lg) 0 0 0;
  }

  .waterTabs__navItem:nth-child(2) {
    border-radius: 0 var(--border-radius-lg) 0 0;
  }

  .waterTabs__content {
    padding: var(--spacing-md);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  }

  .waterService {
    grid-template-columns: 1fr;
  }

  .waterIntro__catch {
    font-size: var(--font-size-xl);
  }

  .waterService__price {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .waterService__price .price {
    font-size: 1.3rem;
  }

  .reasonCards {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .reasonCard {
    padding: var(--spacing-md);
  }

  .reasonCard__num {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .reasonCard__num::after {
    inset: -3px;
  }
}

/* ==========================================================================
   内装リフォームページ（ジグザグレイアウト）
   ========================================================================== */

/* イントロ */
.interiorIntro {
  text-align: center;
}

.interiorIntro__catch {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.interiorIntro__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

/* 見出しのみセクション（余白調整） */
.sec--titleOnly {
  padding-bottom: 0;
}

.sec--titleOnly .secTtl {
  margin-bottom: 0;
}

/* ジグザグアイテム - 全幅背景交互デザイン */
.zigzagSection {
  padding: var(--spacing-2xl) 0;
}

.zigzagSection:first-child {
  padding-top: 0;
}

.zigzagSection:nth-child(odd) {
  background: var(--color-white);
}

.zigzagSection:nth-child(even) {
  background: linear-gradient(135deg, #f8f7f5 0%, #f3f1ee 100%);
}

.zigzagItem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.zigzagItem--reverse {
  direction: rtl;
}

.zigzagItem--reverse > * {
  direction: ltr;
}

.zigzagItem__img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.zigzagItem__img img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.zigzagItem__img:hover img {
  transform: scale(1.05);
}

.zigzagItem__label {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary) 0%, #5a4a3a 100%);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 30px;
  margin-bottom: var(--spacing-md);
}

.zigzagItem__ttl {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.zigzagItem__ttl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--color-orange);
  border-radius: 2px;
}

.zigzagItem__desc {
  margin-bottom: var(--spacing-lg);
  line-height: 2;
  color: var(--color-text);
}

.zigzagItem__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.zigzagItem__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-gray);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  transition: all 0.3s ease;
}

.zigzagItem__list li:hover {
  background: var(--color-primary-light);
  transform: translateX(5px);
}

.zigzagItem__list li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* 偶数セクション（背景色あり）のスタイル調整 */
.zigzagSection:nth-child(even) .zigzagItem__body {
  background: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.zigzagSection:nth-child(even) .zigzagItem__list li {
  background: #f5f4f2;
}

.zigzagSection:nth-child(even) .zigzagItem__list li:hover {
  background: #ebe9e6;
}

/* おすすめリスト */
.recommendList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.recommendList__item {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.recommendList__item i {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.recommendList__item p {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .zigzagSection {
    padding: var(--spacing-xl) 0;
  }

  .zigzagItem {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .zigzagItem--reverse {
    direction: ltr;
  }

  .zigzagItem__ttl {
    font-size: 1.3rem;
  }

  .interiorIntro__catch {
    font-size: var(--font-size-xl);
  }

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

/* ==========================================================================
   外回りリフォームページ（フルワイドカード）
   ========================================================================== */

/* イントロ */
.exteriorIntro {
  text-align: center;
}

.exteriorIntro__catch {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.exteriorIntro__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

/* フルワイドカード */
.fullWidthCard {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.fullWidthCard__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 背景位置のバリエーション */
.fullWidthCard--bgRight .fullWidthCard__bg {
  background-position: right center;
}

.fullWidthCard--bgLeft .fullWidthCard__bg {
  background-position: left center;
}

/* 背景なしバージョン（濃い背景） */
.fullWidthCard--noBg {
  background: var(--color-primary);
}

.fullWidthCard--noBg .fullWidthCard__content {
  color: var(--color-white);
}

.fullWidthCard--noBg .fullWidthCard__ttl {
  color: var(--color-white);
}

.fullWidthCard--noBg .fullWidthCard__label {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

.fullWidthCard--noBg .fullWidthCard__desc {
  opacity: 0.95;
}

.fullWidthCard--noBg .fullWidthCard__list li i {
  color: var(--color-orange);
}

.fullWidthCard__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 2;
}

.fullWidthCard--right .fullWidthCard__overlay {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

/* 背景左寄せ時のオーバーレイ（右から暗くなる） */
.fullWidthCard__overlay--right {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

.fullWidthCard--bgLeft .fullWidthCard__content > * {
  margin-left: auto;
}

.fullWidthCard--bgLeft .fullWidthCard__content {
  text-align: right;
}

.fullWidthCard--bgLeft .fullWidthCard__list {
  align-items: flex-end;
}

.fullWidthCard__content {
  position: relative;
  z-index: 3;
  color: var(--color-white);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.fullWidthCard__content > * {
  max-width: 600px;
}

.fullWidthCard--right .fullWidthCard__content {
  text-align: right;
}

.fullWidthCard--right .fullWidthCard__content > * {
  margin-left: auto;
}

.fullWidthCard__label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  backdrop-filter: blur(4px);
}

.fullWidthCard__ttl {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-white);
}

.fullWidthCard__desc {
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
  opacity: 0.95;
}

.fullWidthCard__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.fullWidthCard__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.fullWidthCard--right .fullWidthCard__list {
  align-items: flex-end;
}

.fullWidthCard__list li i {
  color: var(--color-orange);
}

/* メンテナンス時期テーブル */
.timingTable {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.timingTable__item {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.timingTable__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-sm);
  background: var(--color-bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timingTable__icon i {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.timingTable__ttl {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xs);
}

.timingTable__years {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}

.timingTable__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* レスポンシブ */
@media (max-width: 768px) {
  .fullWidthCard {
    min-height: 300px;
  }

  .fullWidthCard__overlay {
    background: rgba(0, 0, 0, 0.6);
  }

  .fullWidthCard--right .fullWidthCard__overlay {
    background: rgba(0, 0, 0, 0.6);
  }

  .fullWidthCard__content,
  .fullWidthCard--right .fullWidthCard__content {
    padding: var(--spacing-md);
    margin: 0;
    text-align: left;
  }

  .fullWidthCard--right .fullWidthCard__list {
    align-items: flex-start;
  }

  .fullWidthCard__ttl {
    font-size: var(--font-size-xl);
  }

  .exteriorIntro__catch {
    font-size: var(--font-size-xl);
  }

  .timingTable {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   かんたんリフォームページ（料金表）
   ========================================================================== */

/* イントロ */
.simpleIntro {
  text-align: center;
}

.simpleIntro__catch {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.simpleIntro__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

/* 料金表 */
.simplePricing__note {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
}

.priceCategory {
  margin-bottom: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.priceCategory__ttl {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: bold;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, #5a4a3a 100%);
  color: var(--color-white);
}

.priceCategory__ttl i {
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.priceList {
  border: none;
}

.priceList__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid #e8e5e1;
  background: var(--color-white);
  transition: background 0.2s ease;
}

.priceList__item:hover {
  background: #faf9f7;
}

.priceList__item:last-child {
  border-bottom: none;
}

.priceList__item:nth-child(even) {
  background: #f8f7f5;
}

.priceList__item:nth-child(even):hover {
  background: #f3f1ee;
}

.priceList__name {
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
}

.priceList__price {
  font-weight: bold;
  color: var(--color-accent);
  font-size: 1.25rem;
  white-space: nowrap;
}

/* ご依頼の流れ */
.flowSteps {
  display: flex;
  gap: var(--spacing-md);
  counter-reset: none;
}

.flowSteps__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.flowSteps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-primary-light);
  z-index: 0;
}

.flowSteps__num {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

.flowSteps__ttl {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
}

.flowSteps__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* FAQ */
.faqList__item {
  margin-bottom: var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.faqList__q {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-bg-light);
  font-weight: bold;
}

.faqList__q span {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

.faqList__a {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  line-height: 1.8;
}

.faqList__a span {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

/* レスポンシブ */
@media (max-width: 768px) {
  .simpleIntro__catch {
    font-size: var(--font-size-xl);
  }

  .priceList__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .flowSteps {
    flex-direction: column;
  }

  .flowSteps__item {
    flex-direction: row;
    text-align: left;
    gap: var(--spacing-md);
  }

  .flowSteps__item:not(:last-child)::after {
    top: 50px;
    right: auto;
    left: 24px;
    width: 2px;
    height: calc(100% + var(--spacing-md));
  }

  .flowSteps__body {
    flex: 1;
  }
}

/* ==========================================================================
   全面リフォームページ（斬新なレイアウト）
   ========================================================================== */

/* 全面リフォームページ専用ヘッダー */
.pageHeader--reformAll {
  background: linear-gradient(rgba(40, 35, 30, 0.55), rgba(30, 25, 20, 0.65)),
              url('assets/images/reform-all-hero.webp') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 320px;
}

.pageHeader--reformAll .pageTtl {
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.pageHeader--reformAll .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--reformAll {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 260px;
  }
  .pageHeader--reformAll .pageTtl,
  .pageHeader--reformAll .pageDesc {
    text-align: center;
  }
}

/* 内装リフォームページヘッダー */
.pageHeader--interior {
  background: linear-gradient(rgba(40, 35, 30, 0.55), rgba(30, 25, 20, 0.65)),
              url('assets/images/service-interior.webp') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 320px;
}

.pageHeader--interior .pageTtl {
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.pageHeader--interior .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--interior {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 260px;
  }
  .pageHeader--interior .pageTtl,
  .pageHeader--interior .pageDesc {
    text-align: center;
  }
}

/* 外回りリフォームページヘッダー */
.pageHeader--exterior {
  background: linear-gradient(rgba(40, 35, 30, 0.55), rgba(30, 25, 20, 0.65)),
              url('assets/images/exterior-hero.webp') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 320px;
}

.pageHeader--exterior .pageTtl {
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.pageHeader--exterior .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--exterior {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 260px;
  }
  .pageHeader--exterior .pageTtl,
  .pageHeader--exterior .pageDesc {
    text-align: center;
  }
}

/* かんたんリフォームページヘッダー */
.pageHeader--simple {
  background: linear-gradient(rgba(40, 35, 30, 0.55), rgba(30, 25, 20, 0.65)),
              url('assets/images/service-simple.webp') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 320px;
}

.pageHeader--simple .pageTtl {
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.pageHeader--simple .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--simple {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 260px;
  }
  .pageHeader--simple .pageTtl,
  .pageHeader--simple .pageDesc {
    text-align: center;
  }
}

/* 全面リフォームイントロ - 斜めグリッドレイアウト */
.reformAllIntro {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
  position: relative;
  overflow: hidden;
}

.reformAllIntro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.reformAllIntro__text {
  position: relative;
  z-index: 2;
}

.reformAllIntro__catch {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.reformAllIntro__catch .highlight {
  background: linear-gradient(transparent 60%, rgba(235, 160, 11, 0.3) 60%);
  padding: 0 0.2em;
}

.reformAllIntro__catch .accent {
  color: var(--color-orange);
  font-size: 1.2em;
}

.reformAllIntro__desc {
  font-size: var(--font-size-lg);
  line-height: 2;
  color: var(--color-text);
}

/* 斜めの画像コラージュ */
.reformAllIntro__images {
  position: relative;
  height: 450px;
}

.reformAllIntro__imgWrap {
  position: absolute;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-base);
}

.reformAllIntro__imgWrap:hover {
  transform: scale(1.03);
  z-index: 10;
}

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

.reformAllIntro__imgWrap--1 {
  top: 0;
  left: 0;
  width: 220px;
  height: 280px;
  transform: rotate(-3deg);
}

.reformAllIntro__imgWrap--2 {
  top: 30px;
  right: 20px;
  width: 200px;
  height: 250px;
  transform: rotate(4deg);
}

.reformAllIntro__imgWrap--3 {
  bottom: 20px;
  left: 60px;
  width: 180px;
  height: 200px;
  transform: rotate(2deg);
}

.reformAllIntro__imgWrap--4 {
  bottom: 0;
  right: 0;
  width: 170px;
  height: 180px;
  transform: rotate(-4deg);
}

/* リフォームポイントバッジ */
.reformAllIntro__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.reformAllIntro__point {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  background: var(--color-white);
  border: 2px solid var(--color-primary-light);
  border-radius: var(--border-radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.reformAllIntro__point:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.reformAllIntro__point i {
  color: var(--color-orange);
}

.reformAllIntro__point:hover i {
  color: var(--color-white);
}

@media screen and (max-width: 991px) {
  .reformAllIntro__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .reformAllIntro__images {
    height: 350px;
    order: -1;
  }

  .reformAllIntro__imgWrap--1 {
    width: 160px;
    height: 200px;
  }

  .reformAllIntro__imgWrap--2 {
    width: 150px;
    height: 180px;
  }

  .reformAllIntro__imgWrap--3 {
    width: 140px;
    height: 160px;
  }

  .reformAllIntro__imgWrap--4 {
    width: 130px;
    height: 150px;
  }
}

@media screen and (max-width: 575px) {
  .reformAllIntro__images {
    height: 280px;
  }

  .reformAllIntro__imgWrap--1 {
    width: 130px;
    height: 160px;
  }

  .reformAllIntro__imgWrap--2 {
    width: 120px;
    height: 150px;
    right: 10px;
  }

  .reformAllIntro__imgWrap--3 {
    width: 110px;
    height: 130px;
    left: 30px;
  }

  .reformAllIntro__imgWrap--4 {
    width: 100px;
    height: 120px;
  }

  .reformAllIntro__catch {
    font-size: 1.3rem;
    text-align: center;
  }

  .reformAllIntro__desc {
    font-size: var(--font-size-base);
  }

  .reformAllIntro__points {
    justify-content: center;
  }
}

/* ビフォーアフターセクション */
.beforeAfterSection {
  padding: var(--spacing-2xl) 0;
  background: var(--color-white);
}

.beforeAfterGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.beforeAfterCard {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.beforeAfterCard__img {
  position: relative;
  height: 280px;
}

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

.beforeAfterCard__label {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 0.4em 1em;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
}

.beforeAfterCard__label--before {
  background: var(--color-text-light);
}

.beforeAfterCard__label--after {
  background: var(--color-accent);
}

.beforeAfterCard__body {
  padding: var(--spacing-md);
  background: var(--color-white);
}

.beforeAfterCard__ttl {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.beforeAfterCard__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

@media screen and (max-width: 767px) {
  .beforeAfterGrid {
    grid-template-columns: 1fr;
  }

  .beforeAfterCard__img {
    height: 220px;
  }
}

/* 施工事例 - 全面リフォーム用カードスタイル */
.reformAllCase {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-light);
}

.reformAllCase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.reformAllCase__card,
.not_home #contentWrap #content a.reformAllCase__card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-base);
}

.reformAllCase__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.reformAllCase__img {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.reformAllCase__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.reformAllCase__card:hover .reformAllCase__img img {
  transform: scale(1.05);
}

.reformAllCase__badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 0.4em 1em;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--border-radius-sm);
}

.reformAllCase__body {
  padding: var(--spacing-md);
}

.reformAllCase__ttl {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
  text-decoration: none;
}

.reformAllCase__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
  line-height: 1.7;
  text-decoration: none;
}

.reformAllCase__meta,
.reformAllCase__meta * {
  text-decoration: none;
}

.reformAllCase__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-bg-gray);
}

.reformAllCase__metaItem {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--font-size-sm);
}

.reformAllCase__metaItem dt {
  color: var(--color-text-light);
}

.reformAllCase__metaItem dd {
  font-weight: 600;
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .reformAllCase__grid {
    grid-template-columns: 1fr;
  }

  .reformAllCase__img {
    height: 200px;
  }
}

/* 特徴カード - 横並び画像付き */
.featureCards {
  padding: var(--spacing-2xl) 0;
  background: var(--color-white);
}

.featureCards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.featureCard {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-base);
}

.featureCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.featureCard__img {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.featureCard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.featureCard:hover .featureCard__img img {
  transform: scale(1.08);
}

.featureCard__img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

.featureCard__num {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50%;
  z-index: 2;
}

.featureCard__body {
  padding: var(--spacing-md);
}

.featureCard__ttl {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.featureCard__ttl i {
  color: var(--color-orange);
  font-size: 1.2em;
}

.featureCard__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.8;
}

@media screen and (max-width: 991px) {
  .featureCards__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .featureCard {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

  .featureCard__img {
    height: 100%;
    min-height: 180px;
  }

  .featureCard__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 575px) {
  .featureCard {
    grid-template-columns: 1fr;
  }

  .featureCard__img {
    height: 180px;
  }
}

/* 解決策バッジ - 水回りと同じスタイル */
.solutionBadges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.solutionBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  background: var(--color-white);
  border: 2px solid var(--color-primary-light);
  border-radius: var(--border-radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.solutionBadge:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.solutionBadge i {
  color: var(--color-orange);
}

.solutionBadge:hover i {
  color: var(--color-white);
}

/* ==========================================================================
   注文住宅ページ
   ========================================================================== */

/* ページヘッダー */
.pageHeader--newbuild {
  background: linear-gradient(rgba(30, 25, 20, 0.5), rgba(20, 15, 10, 0.6)),
              url('assets/images/newbuild-hero.webp') center center / cover no-repeat;
  padding: 130px 0 110px;
  min-height: 350px;
}

.pageHeader--newbuild .pageTtl {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}

.pageHeader--newbuild .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--newbuild {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 280px;
  }
  .pageHeader--newbuild .pageTtl,
  .pageHeader--newbuild .pageDesc {
    text-align: center;
  }
}

/* イントロセクション - 左右分割 */
.newbuildIntro {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #faf9f7 0%, #f0eeeb 100%);
}

.newbuildIntro__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

/* ビジュアルエリア - グリッドレイアウト */
.newbuildIntro__visual {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--spacing-sm);
}

.newbuildIntro__mainImg {
  grid-row: 1 / 3;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.newbuildIntro__mainImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

.newbuildIntro__subImgs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.newbuildIntro__subImg {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-base);
}

.newbuildIntro__subImg:hover {
  transform: scale(1.03);
}

.newbuildIntro__subImg img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

/* テキストエリア */
.newbuildIntro__text {
  padding: var(--spacing-md);
}

.newbuildIntro__catch {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.newbuildIntro__large {
  font-size: 1.3em;
  color: var(--color-primary-dark);
}

.newbuildIntro__highlight {
  background: linear-gradient(transparent 60%, rgba(235, 160, 11, 0.35) 60%);
  padding: 0 0.15em;
}

.newbuildIntro__accent {
  color: var(--color-orange);
  font-size: 1.2em;
}

.newbuildIntro__desc {
  font-size: var(--font-size-base);
  line-height: 2;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.newbuildIntro__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.newbuildIntro__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.3em;
  background: var(--color-white);
  border: 2px solid var(--color-primary-light);
  border-radius: var(--border-radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.newbuildIntro__badge:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.newbuildIntro__badge i {
  color: var(--color-orange);
}

.newbuildIntro__badge:hover i {
  color: var(--color-white);
}

@media screen and (max-width: 991px) {
  .newbuildIntro__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .newbuildIntro__visual {
    order: -1;
  }

  .newbuildIntro__mainImg img {
    min-height: 300px;
  }

  .newbuildIntro__text {
    text-align: center;
    padding: 0;
  }

  .newbuildIntro__badges {
    justify-content: center;
  }
}

@media screen and (max-width: 575px) {
  .newbuildIntro__visual {
    grid-template-columns: 1fr;
  }

  .newbuildIntro__mainImg {
    grid-row: auto;
  }

  .newbuildIntro__subImgs {
    flex-direction: row;
  }

  .newbuildIntro__subImg img {
    height: 80px;
  }
}

/* コンセプトグリッド */
.newbuildConcept {
  padding: var(--spacing-2xl) 0;
  background: var(--color-white);
}

.conceptGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.conceptCard {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  text-align: left;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--color-orange);
}

.conceptCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.conceptCard--large {
  grid-column: 1 / -1;
  background: linear-gradient(rgba(96, 90, 86, 0.85), rgba(74, 69, 65, 0.9)),
              url('https://www.kingo.co.jp/wp-content/themes/child/images/company-slide-2.jpg') center center / cover no-repeat;
  border-left: none;
  min-height: 180px;
  padding: var(--spacing-xl);
}

.conceptCard--large .conceptCard__icon {
  background: rgba(255, 255, 255, 0.15);
}

.conceptCard--large .conceptCard__icon i {
  color: var(--color-white);
}

.conceptCard--large .conceptCard__ttl {
  color: var(--color-white);
  font-size: 1.3rem;
}

.conceptCard--large .conceptCard__desc {
  color: rgba(255, 255, 255, 0.9);
}

.conceptCard__icon {
  grid-row: 1 / 3;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 50%;
  font-size: 1.5rem;
  align-self: start;
}

.conceptCard__icon i {
  color: var(--color-orange);
}

.conceptCard__ttl {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  align-self: end;
}

.conceptCard__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  align-self: start;
}

@media screen and (max-width: 767px) {
  .conceptGrid {
    grid-template-columns: 1fr;
  }

  .conceptCard--large {
    grid-column: 1;
  }
}

/* WBハウスセクション */
.wbHouse {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e8f4e8 100%);
}

.wbHouse__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.wbHouse__img {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.wbHouse__img img {
  width: 100%;
  height: auto;
  display: block;
}

.wbHouse__catch {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.wbHouse__accent {
  color: #4CAF50;
  position: relative;
}

.wbHouse__accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #4CAF50;
}

.wbHouse__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.wbHouse__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.wbHouse__features li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.wbHouse__features li i {
  color: #4CAF50;
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  .wbHouse__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .wbHouse__catch {
    font-size: 1.4rem;
  }

  .wbHouse__features {
    grid-template-columns: 1fr;
  }
}

/* フロータイムライン */
.newbuildFlow {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-light);
}

.flowTimeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.flowTimeline__item {
  position: relative;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-base);
}

.flowTimeline__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.flowTimeline__num {
  position: absolute;
  top: -15px;
  left: 20px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50%;
}

.flowTimeline__content {
  padding-top: var(--spacing-md);
}

.flowTimeline__ttl {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.flowTimeline__ttl i {
  color: var(--color-orange);
}

.flowTimeline__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.7;
}

@media screen and (max-width: 991px) {
  .flowTimeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 575px) {
  .flowTimeline {
    grid-template-columns: 1fr;
  }
}

/* 施工事例ショーケース */
.newbuildWorks {
  padding: var(--spacing-2xl) 0;
  background: var(--color-white);
}

.worksShowcase {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-md);
}

.worksShowcase__main,
.worksShowcase__item {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.worksShowcase__main {
  height: 450px;
}

.worksShowcase__main img,
.worksShowcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.worksShowcase__main:hover img,
.worksShowcase__item:hover img {
  transform: scale(1.05);
}

.worksShowcase__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--color-white);
}

.worksShowcase__tag {
  display: inline-block;
  padding: 0.3em 0.8em;
  background: var(--color-orange);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-xs);
}

.worksShowcase__ttl {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.worksShowcase__side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.worksShowcase__item {
  flex: 1;
}

.worksShowcase__item .worksShowcase__ttl {
  font-size: var(--font-size-base);
}

@media screen and (max-width: 767px) {
  .worksShowcase {
    grid-template-columns: 1fr;
  }

  .worksShowcase__main {
    height: 300px;
  }

  .worksShowcase__side {
    flex-direction: row;
  }

  .worksShowcase__item {
    height: 200px;
  }
}

/* ==========================================================================
   会社概要ページ
   ========================================================================== */

/* ページヘッダー */
.pageHeader--company {
  background: linear-gradient(rgba(60, 55, 50, 0.5), rgba(40, 35, 30, 0.6)),
              url('https://www.kingo.co.jp/wp-content/themes/kingo-modern/assets/images/company-main.jpg') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 300px;
}

@media screen and (max-width: 767px) {
  .pageHeader--company {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 250px;
  }
  .pageHeader--company .pageTtl,
  .pageHeader--company .pageDesc {
    text-align: center;
  }
}

/* メッセージセクション */
.companyMessage {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
}

.companyMessage__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

/* 画像付きレイアウト */
.companyMessage__inner--withImage {
  grid-template-columns: 320px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

/* 代表者写真 */
.companyMessage__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.companyMessage__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.companyMessage__photoOverlay {
  position: absolute;
  bottom: 60px;
  left: -40px;
  padding: 0;
}

.companyMessage__numBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 50%;
  color: var(--color-white);
  text-align: center;
  box-shadow: 0 10px 30px rgba(96, 90, 86, 0.4);
}

.companyMessage__numBadge .companyMessage__numValue {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.companyMessage__numBadge .companyMessage__numUnit {
  font-size: 0.9rem;
  font-weight: 600;
}

.companyMessage__numBadge .companyMessage__numLabel {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* メッセージコンテンツ */
.companyMessage__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.companyMessage__ttl {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
}

.companyMessage__sub {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-orange);
  letter-spacing: 0.2em;
  margin-bottom: var(--spacing-xs);
}

.companyMessage__accent {
  background: linear-gradient(transparent 60%, rgba(235, 160, 11, 0.5) 60%);
  padding: 0 0.1em;
}

.companyMessage__body {
  padding: var(--spacing-md) 0;
}

.companyMessage__text {
  font-size: var(--font-size-base);
  line-height: 2;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.companyMessage__text:last-child {
  margin-bottom: 0;
}

.companyMessage__sign {
  margin-top: var(--spacing-md);
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.companyMessage__signTitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.companyMessage__signName {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-md);
}

/* 数字ビジュアル（旧レイアウト用） */
.companyMessage__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.companyMessage__num {
  width: 250px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 50%;
  color: var(--color-white);
  text-align: center;
  box-shadow: 0 20px 60px rgba(96, 90, 86, 0.3);
}

.companyMessage__numValue {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
}

.companyMessage__numUnit {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.companyMessage__numLabel {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  margin-top: var(--spacing-xs);
}

@media screen and (max-width: 991px) {
  .companyMessage__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .companyMessage__inner--withImage {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .companyMessage__photo {
    max-width: 300px;
    margin: 0 auto;
    overflow: visible;
  }

  .companyMessage__photo img {
    display: block;
  }

  .companyMessage__photoOverlay {
    bottom: auto;
    top: 10px;
    left: -30px;
  }

  .companyMessage__numBadge {
    width: 70px;
    height: 70px;
    padding: 8px;
  }

  .companyMessage__numValue {
    font-size: 1.8rem;
  }

  .companyMessage__numUnit {
    font-size: 0.7rem;
  }

  .companyMessage__numLabel {
    font-size: 0.6rem;
  }

  .companyMessage__ttl {
    text-align: left;
  }

  .companyMessage__body {
    text-align: left;
  }

  .companyMessage__sign {
    align-items: center;
    margin-top: var(--spacing-sm);
  }

  .companyMessage__visual {
    order: -1;
  }

  .companyMessage__num {
    width: 200px;
    height: 200px;
  }

  .companyMessage__numValue {
    font-size: 4rem;
  }
}

/* 企業理念 */
.companyPhilosophy {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-light);
}

.companyPhilosophy__list {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.companyPhilosophy__item {
  background: var(--color-white);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.companyPhilosophy__ttl {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.companyPhilosophy__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.companyPhilosophy__text {
  line-height: 1.8;
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .companyPhilosophy__item {
    padding: var(--spacing-sm);
  }

  .companyPhilosophy__ttl {
    font-size: 1.125rem;
  }

  .companyPhilosophy__num {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
}

/* 会社情報テーブル */
.companyInfo {
  padding: var(--spacing-2xl) 0;
  background: var(--color-white);
}

.companyInfo__table {
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.companyInfo__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.companyInfo__row:last-child {
  border-bottom: none;
}

.companyInfo__row dt {
  padding: var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.companyInfo__row dd {
  padding: var(--spacing-md);
  background: var(--color-white);
}

.companyInfo__row dd a {
  color: var(--color-primary);
  text-decoration: none;
}

.companyInfo__row dd a:hover {
  text-decoration: underline;
}

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

.companyInfo__row dd ul li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.3em;
}

.companyInfo__row dd ul li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--color-orange);
}

.companyInfo__row dd ul li:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 575px) {
  .companyInfo__row {
    grid-template-columns: 1fr;
  }

  .companyInfo__row dt {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* 沿革タイムライン */
.companyHistory {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-light);
}

.historyTimeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.historyTimeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 80px;
  width: 3px;
  height: 100%;
  background: var(--color-primary-light);
}

.historyTimeline__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.historyTimeline__item:last-child {
  margin-bottom: 0;
}

.historyTimeline__year {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-orange);
  text-align: center;
  position: relative;
}

.historyTimeline__year::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -22px;
  width: 15px;
  height: 15px;
  background: var(--color-orange);
  border-radius: 50%;
  transform: translateY(-50%);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--color-orange);
}

.historyTimeline__content {
  background: var(--color-white);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.historyTimeline__ttl {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.historyTimeline__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

@media screen and (max-width: 575px) {
  .historyTimeline::before {
    left: 50px;
  }

  .historyTimeline__item {
    grid-template-columns: 70px 1fr;
    gap: var(--spacing-md);
  }

  .historyTimeline__year {
    font-size: var(--font-size-base);
  }

  .historyTimeline__year::after {
    right: -16px;
    width: 12px;
    height: 12px;
  }
}

/* アクセスマップ */
.companyAccess {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-light);
}

.companyAccess__mapWrap {
  margin-bottom: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.companyAccess__mapWrap iframe {
  display: block;
  width: 100%;
}

.companyAccess__table {
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.companyAccess__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.companyAccess__row:last-child {
  border-bottom: none;
}

.companyAccess__row dt {
  padding: var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  display: flex;
  align-items: center;
}

.companyAccess__row dd {
  padding: var(--spacing-md);
  background: var(--color-white);
  display: flex;
  align-items: center;
}

@media screen and (max-width: 575px) {
  .companyAccess__row {
    grid-template-columns: 1fr;
  }

  .companyAccess__row dt {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .companyAccess__mapWrap iframe {
    height: 300px;
  }
}

/* バナーセクション */
.companyBanners {
  padding: var(--spacing-xl) 0;
  background: var(--color-white);
}

.companyBanners__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 900px;
  margin: 0 auto;
}

.companyBanners__item {
  display: block;
}

.companyBanners__item:hover {
  opacity: 0.8;
}

.companyBanners__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   お問い合わせページ
   ========================================================================== */

/* ページヘッダー */
.pageHeader--contact {
  background: linear-gradient(rgba(96, 90, 86, 0.85), rgba(74, 69, 65, 0.9)),
              url('assets/images/newbuild-hero.webp') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 280px;
}

@media screen and (max-width: 767px) {
  .pageHeader--contact {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 220px;
  }
  .pageHeader--contact .pageTtl,
  .pageHeader--contact .pageDesc {
    text-align: center;
  }
}

/* 導入セクション */
.contactIntro {
  padding: var(--spacing-xl) 0;
  background: #ffffff !important;
}

.contactIntro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: stretch;
}

/* 縦配置バリアント（テキスト上、連絡方法下） */
.contactIntro__inner--vertical {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.contactIntro__text {
  padding: var(--spacing-md) 0;
}

.contactIntro__ttl {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  letter-spacing: 0.08em;
  text-align: center;
}

.contactIntro__accent {
  font-weight: 600;
}

.contactIntro__desc {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
}

.contactIntro__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.contactIntro__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.contactIntro__badge i {
  color: var(--color-primary);
  font-size: 1.1em;
}

/* 大きいバッジ - シンプルなテキストスタイル */
.contactIntro__badges--large {
  gap: 2rem;
  margin-top: var(--spacing-sm);
}

.contactIntro__badge--large {
  padding: 0;
  font-size: 1.1rem;
  font-weight: 600;
  background: none;
  color: var(--color-text);
  box-shadow: none;
  position: relative;
  padding-left: 1.8em;
}

.contactIntro__badge--large::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}

.contactIntro__badge--large:hover {
  transform: none;
  box-shadow: none;
}

.contactIntro__badge--large i {
  color: var(--color-primary);
  font-size: 1em;
}

/* 縦配置用のテキストスタイル */
.contactIntro__inner--vertical .contactIntro__text {
  text-align: center;
}

.contactIntro__inner--vertical .contactIntro__badges {
  justify-content: center;
}

.contactIntro__inner--vertical .contactIntro__badge--large::before {
  display: none;
}

.contactIntro__inner--vertical .contactIntro__badge--large {
  padding-left: 0;
}

/* 連絡方法カード */
.contactIntro__methods {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 横並びバリアント */
.contactIntro__methods--horizontal {
  flex-direction: row;
  gap: var(--spacing-lg);
}

.contactIntro__methods--horizontal .contactMethod {
  flex: 1;
}

.contactMethod {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 電話リンクの下線を削除 */
a.contactMethod {
  text-decoration: none !important;
}

a.contactMethod:hover,
a.contactMethod:focus,
a.contactMethod:active {
  text-decoration: none !important;
}

.contactMethod:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(58, 140, 92, 0.12);
}

.contactMethod--phone {
  background: var(--color-white);
  border-left: 4px solid var(--color-primary);
}

.contactMethod--phone:hover {
  background: linear-gradient(135deg, #f8fdf9 0%, #f0f9f4 100%);
}

.contactMethod__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2d7a53 100%);
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--color-white);
  flex-shrink: 0;
}

.contactMethod--form .contactMethod__icon {
  background: linear-gradient(135deg, var(--color-orange) 0%, #d97706 100%);
}

.contactMethod__body {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.contactMethod__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-light);
}

.contactMethod__value {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
}

/* 電話番号を大きく目立たせる */
.contactMethod__value--large {
  font-size: clamp(1.8rem, 3.5vw, 2.2rem);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.contactMethod__note {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.contactMethod--form {
  border-left: 4px solid var(--color-orange);
  cursor: pointer;
}

.contactMethod--form:hover {
  background: linear-gradient(135deg, #fffbf5 0%, #fff5e6 100%);
  border-color: var(--color-orange);
}

@media screen and (max-width: 991px) {
  .contactIntro__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .contactIntro__text {
    text-align: center;
  }

  .contactIntro__badges {
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  /* 横並びを縦に戻す */
  .contactIntro__methods--horizontal {
    flex-direction: column;
  }
}

@media screen and (max-width: 575px) {
  .contactIntro__text {
    padding: var(--spacing-lg);
  }

  .contactMethod {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg);
  }
}

/* フォームセクション */
.contactForm {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #f8f7f5 0%, #f3f1ee 100%);
}

.contactForm__card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.contactForm__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, #5a4a3a 100%);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.contactForm__header i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 0.9rem;
}

.contactForm__intro {
  padding: var(--spacing-lg) var(--spacing-lg) 0;
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text);
}

.contactForm__intro p {
  margin-bottom: var(--spacing-sm);
}

/* 地域限定注意書き - 赤枠強調 */
.contactForm__areaNotice {
  border: 2px solid #c41e3a;
  background: rgba(196, 30, 58, 0.05);
  padding: var(--spacing-md);
  border-radius: 6px;
  margin-bottom: var(--spacing-md) !important;
}

.contactForm__areaNotice strong {
  color: #c41e3a;
}

.contactForm__form {
  padding: var(--spacing-lg);
}

/* フォーム行 - テーブル風レイアウト */
.formRow {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid #e8e5e1;
  min-height: 60px;
}

.formRow:last-of-type {
  border-bottom: none;
}

.formRow__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: #faf9f7;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}

.formRow__labelText {
  color: var(--color-text);
}

.formRow__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.6em;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.formRow__badge--required {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: var(--color-white);
}

.formRow__badge--optional {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: var(--color-white);
}

.formRow__input {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.formRow__input input,
.formRow__input textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.6em 0.8em;
  border: 2px solid #e0ddd8;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  background: var(--color-white);
  transition: all 0.2s ease;
}

.formRow__input input:focus,
.formRow__input textarea:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 4px rgba(235, 160, 11, 0.15);
}

.formRow__input input::placeholder,
.formRow__input textarea::placeholder {
  color: #aaa;
}

.formRow__input textarea {
  resize: vertical;
  min-height: 120px;
  max-width: 100%;
}

/* エラー表示 */
.formRow__error {
  display: none;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--spacing-xs);
  padding: 0.5em 0.8em;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: #dc2626;
}

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

.formRow.has-error .formRow__error {
  display: flex;
}

.formRow.has-error .formRow__input input,
.formRow.has-error .formRow__input textarea {
  border-color: #dc2626;
  background: #fef7f7;
}

/* テキストエリア行 */
.formRow--textarea {
  grid-template-columns: 180px 1fr;
}

.formRow--textarea .formRow__label {
  align-items: flex-start;
  padding-top: var(--spacing-md);
}

/* チェックボックス行 */
.formRow--checkbox {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: none;
}

.formCheckbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.formCheckbox input {
  display: none;
}

.formCheckbox__box {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d0ccc6;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  transition: all 0.2s ease;
  color: transparent;
}

.formCheckbox input:checked + .formCheckbox__box {
  background: linear-gradient(135deg, var(--color-orange) 0%, #d97706 100%);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.formCheckbox__box i {
  font-size: 0.8rem;
}

.formCheckbox__text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.formCheckbox__text a {
  color: #2563eb;
  text-decoration: underline;
}

.formCheckbox__text a:hover {
  text-decoration: none;
}

.formRow--checkbox .formRow__error {
  margin-top: var(--spacing-sm);
  margin-left: 36px;
}

/* 送信ボタン */
.formRow--submit {
  display: flex;
  justify-content: center;
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: none;
}

.formSubmitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-width: 280px;
  padding: 1.1em 2.5em;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.formSubmitBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);
}

.formSubmitBtn:active {
  transform: translateY(0);
}

.formSubmitBtn i {
  transition: transform 0.3s ease;
}

.formSubmitBtn:hover i {
  transform: translateX(4px);
}

/* 送信完了メッセージ */
.contactForm__success {
  padding: var(--spacing-2xl);
  text-align: center;
}

.contactForm__successIcon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 2.5rem;
}

.contactForm__successTtl {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.contactForm__successText {
  color: var(--color-text-light);
  line-height: 1.8;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  .formRow {
    grid-template-columns: 1fr;
  }

  .formRow__label {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid #f0ede8;
  }

  .formRow__input {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }

  .formRow--textarea .formRow__label {
    align-items: center;
  }

  .contactForm__header {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  .contactForm__intro {
    padding: var(--spacing-md) var(--spacing-md) 0;
  }

  .contactForm__form {
    padding: var(--spacing-md);
  }

  .formSubmitBtn {
    width: 100%;
    min-width: auto;
  }
}

/* ========================================
   Contact Form 7 カスタムスタイル
======================================== */
.wpcf7 {
  width: 100%;
}

.wpcf7-form {
  display: flex;
  flex-direction: column;
}

/* フォーム行 */
.wpcf7-form .formRow {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid #e8e5e1;
  align-items: stretch;
}

.wpcf7-form .formRow:last-of-type {
  border-bottom: none;
}

.wpcf7-form .formRow__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.2em;
  background: #faf9f7;
  font-weight: 500;
  font-size: 0.9rem;
}

/* 必須・任意ラベル */
.formRow__required,
.formRow__optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: 3px;
  flex-shrink: 0;
}

.formRow__required {
  background: #dc2626;
  color: #fff;
}

.formRow__optional {
  background: #9ca3af;
  color: #fff;
}

.wpcf7-form .formRow__input {
  padding: 0.8em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* CF7の入力フィールド */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.6em 0.8em;
  border: 2px solid #e0ddd8;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: inherit;
  background: var(--color-white);
  transition: all 0.2s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 4px rgba(235, 160, 11, 0.15);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #aaa;
}

.wpcf7-form textarea {
  resize: vertical;
  min-height: 120px;
  max-width: 100%;
}

/* テキストエリア行 */
.wpcf7-form .formRow--textarea .formRow__label {
  align-items: flex-start;
  padding-top: var(--spacing-md);
}

/* CF7バリデーションエラー */
.wpcf7-form .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--spacing-xs);
  padding: 0.5em 0.8em;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: #dc2626;
}

.wpcf7-form .wpcf7-not-valid-tip::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9em;
}

.wpcf7-form .wpcf7-not-valid {
  border-color: #dc2626 !important;
  background: #fef7f7 !important;
}

/* CF7送信ボタン */
.wpcf7-form .formRow--submit {
  display: block;
  text-align: center;
  padding: 1em 0 0;
  border-bottom: none;
  background: transparent;
}

.wpcf7-form input[type="submit"] {
  display: inline-block;
  min-width: 240px;
  padding: 0.9em 2em;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  text-align: center;
}

.wpcf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);
}

.wpcf7-form input[type="submit"]:active {
  transform: translateY(0);
}

/* CF7スピナー */
.wpcf7-spinner {
  margin-left: var(--spacing-sm);
}

/* CF7レスポンスメッセージ */
.wpcf7-response-output {
  margin: var(--spacing-md) 0 0 !important;
  padding: var(--spacing-md) !important;
  border-radius: var(--radius-md) !important;
  text-align: center;
  font-weight: 500;
}

.wpcf7-form.sent .wpcf7-response-output {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: none !important;
  color: #065f46 !important;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border: none !important;
  color: #dc2626 !important;
}

/* チェックボックス（プライバシーポリシー） */
.wpcf7-form .formRow--checkbox {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: none;
  background: transparent;
}

.wpcf7-form .wpcf7-acceptance {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-orange);
  cursor: pointer;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.wpcf7-form .wpcf7-acceptance a {
  color: #2563eb;
  text-decoration: underline;
}

.wpcf7-form .wpcf7-acceptance a:hover {
  text-decoration: none;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  .wpcf7-form .formRow {
    grid-template-columns: 1fr;
  }

  .wpcf7-form .formRow__label {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid #f0ede8;
  }

  .wpcf7-form .formRow__input {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }

  .wpcf7-form .formRow--textarea .formRow__label {
    align-items: center;
  }

  .wpcf7-form input[type="submit"] {
    width: 100%;
    min-width: auto;
  }
}

/* FAQ */
.contactFaq {
  padding: var(--spacing-2xl) 0;
  background: var(--color-bg-light);
}

.faqList {
  max-width: 900px;
  margin: 0 auto;
}

.faqItem {
  margin-bottom: var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.faqItem__q,
.faqItem__a {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.faqItem__q {
  background: var(--color-primary);
  color: var(--color-white);
}

.faqItem__icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

.faqItem__a .faqItem__icon {
  background: var(--color-orange);
  color: var(--color-white);
}

.faqItem__text {
  font-size: var(--font-size-base);
  line-height: 1.7;
  padding-top: 0.3em;
}

.faqItem__a .faqItem__text {
  color: var(--color-text);
}

/* ==========================================================================
   パンフレット紹介セクション（画像中心デザイン）
   ========================================================================== */
.pamphletPromo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  background: linear-gradient(135deg, #3a5f3a 0%, #2d4a2d 100%);
  padding: var(--spacing-lg) var(--spacing-xl);
  position: relative;
  overflow: visible;
  min-height: auto;
}

.pamphletPromo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
  pointer-events: none;
}

/* 画像エリア */
.pamphletPromo__visual {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.pamphletPromo__imageStack {
  position: relative;
  width: 480px;
  height: 300px;
}

.pamphletPromo__img {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 280px;
  height: auto;
}

.pamphletPromo__img--1 {
  top: 10px;
  left: 0;
  transform: rotate(-5deg);
  z-index: 2;
}

.pamphletPromo__img--2 {
  top: 40px;
  right: 0;
  transform: rotate(5deg);
  z-index: 1;
}

.pamphletPromo__imageStack:hover .pamphletPromo__img--1 {
  transform: rotate(-8deg) translate(-15px, -10px) scale(1.5);
  z-index: 4;
}

.pamphletPromo__imageStack:hover .pamphletPromo__img--2 {
  transform: rotate(8deg) translate(15px, 10px) scale(1.5);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

/* コンテンツエリア */
.pamphletPromo__content {
  background: transparent;
  padding: var(--spacing-md) 0;
  max-width: 50%;
  width: 380px;
  position: relative;
  z-index: 1;
}

.pamphletPromo__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  background: linear-gradient(135deg, var(--color-orange) 0%, #e67e22 100%);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-sm);
  width: fit-content;
}

.pamphletPromo h2.pamphletPromo__ttl {
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
  background: none;
  padding: 0;
  border-radius: 0;
  text-align: left;
}

.pamphletPromo__desc {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
}

.pamphletPromo__new {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  padding: 0.4em 0.8em;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  width: fit-content;
}

.pamphletPromo__new i {
  color: #fbbf24;
}

.pamphletPromo__cta {
  margin-top: auto;
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--color-border);
}

.pamphletPromo__ctaText {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

.pamphletPromo__ctaText i {
  color: var(--color-primary);
  margin-top: 0.2em;
  animation: bounceUp 1.5s ease-in-out infinite;
}

@keyframes bounceUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* レスポンシブ */
@media (max-width: 900px) {
  .pamphletPromo {
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .pamphletPromo__imageStack {
    width: 320px;
    height: 240px;
  }

  .pamphletPromo__img {
    max-width: 200px;
  }

  .pamphletPromo__content {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  .pamphletPromo__badge,
  .pamphletPromo__new {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   アーカイブ・カテゴリ一覧
   ========================================================================== */

/* 施工事例用シンプルヘッダー */
.archiveHeader {
  padding: var(--spacing-lg) 0;
  background: var(--color-bg-light);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.archiveHeader__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .archiveHeader {
    padding: var(--spacing-md) 0;
  }

  .archiveHeader__title {
    font-size: var(--font-size-xl);
  }
}

.archiveContent {
  padding: var(--spacing-xl) 0;
}

/* 子カテゴリナビ - 全幅パネル形式 */
.childCategoryNav {
  margin-bottom: var(--spacing-lg);
}

.childCategoryNav ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .childCategoryNav ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .childCategoryNav ul {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
  }
}

@media screen and (max-width: 480px) {
  .childCategoryNav ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.childCategoryNav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-sm);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  transition: var(--transition-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  min-height: 90px;
}

@media screen and (max-width: 768px) {
  .childCategoryNav li a {
    padding: var(--spacing-sm);
    font-size: 0.75rem;
    min-height: 70px;
  }
}

.childCategoryNav li a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Font Awesomeアイコン */
.childCategoryNav li a i {
  font-size: 1.75rem;
  color: var(--color-primary);
  margin-bottom: 0.5em;
  transition: var(--transition-base);
}

@media screen and (max-width: 768px) {
  .childCategoryNav li a i {
    font-size: 1.4rem;
  }
}

.childCategoryNav li a:hover i {
  color: var(--color-white);
}

.childCategoryNav li a span {
  display: block;
  font-size: 0.85rem;
}

@media screen and (max-width: 768px) {
  .childCategoryNav li a span {
    font-size: 0.7rem;
  }
}

/* カテゴリ切り替えボタン（固定） */
.caseCategoryToggle {
  position: fixed;
  top: 150px;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1em;
  background: var(--color-orange);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
  transition: var(--transition-base);
}

.caseCategoryToggle:hover {
  background: #d4820a;
  color: var(--color-white);
  padding-right: 1.25em;
}

.caseCategoryToggle i {
  font-size: 1.1em;
}

@media screen and (max-width: 768px) {
  .caseCategoryToggle {
    top: 120px;
    padding: 0.5em 0.75em;
    font-size: 0.75rem;
  }
  .caseCategoryToggle span {
    display: none;
  }
}

/* カテゴリモーダル */
.caseCategoryModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.caseCategoryModal.is-open {
  visibility: visible;
  opacity: 1;
}

.caseCategoryModal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.caseCategoryModal__content {
  position: relative;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.caseCategoryModal.is-open .caseCategoryModal__content {
  transform: translateY(0);
}

.caseCategoryModal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.25em;
  background: var(--color-orange);
  color: var(--color-white);
}

.caseCategoryModal__header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.caseCategoryModal__close {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25em;
  line-height: 1;
}

.caseCategoryModal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.caseCategoryModal__list li a {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 1em 1.25em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition-base);
}

.caseCategoryModal__list li a:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
}

.caseCategoryModal__list li.is-current a {
  background: var(--color-primary);
  color: var(--color-white);
}

.caseCategoryModal__list li a i {
  width: 1.5em;
  text-align: center;
  color: var(--color-primary);
}

.caseCategoryModal__list li.is-current a i {
  color: var(--color-white);
}

.caseCategoryModal__allLink {
  display: block;
  padding: 1em 1.25em;
  text-align: center;
  background: var(--color-bg-light);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-base);
}

.caseCategoryModal__allLink:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* 施工事例グリッド - PC3列/スマホ2列 */
.caseGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

@media screen and (max-width: 768px) {
  .caseGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
}

/* 施工事例カード */
.caseCard {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: var(--transition-base);
}

.caseCard:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.caseCard__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.caseCard__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-gray);
}

.caseCard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.caseCard:hover .caseCard__thumb img {
  transform: scale(1.05);
}

.caseCard__body {
  padding: var(--spacing-sm);
}

.caseCard__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .caseCard__title {
    font-size: var(--font-size-sm);
  }
}

.caseCard__area {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0;
}

.caseCard__area i {
  margin-right: 0.3em;
  color: var(--color-accent);
}

/* 通常投稿リスト */
.postList {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 通常投稿カード */
.postCard {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: var(--transition-base);
}

.postCard:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.postCard__link {
  display: flex;
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 768px) {
  .postCard__link {
    flex-direction: column;
  }
}

.postCard__thumb {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-gray);
}

@media screen and (max-width: 768px) {
  .postCard__thumb {
    width: 100%;
  }
}

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

.postCard__body {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.postCard__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: 0.5em;
}

.postCard__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5em;
}

.postCard__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 1em;
}

.postCard__more {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: 600;
}

.postCard__more::after {
  content: " →";
}

/* ページネーション */
.pagination {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.8em;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
}

.pagination a {
  background: var(--color-bg-light);
  color: var(--color-text);
}

.pagination a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.pagination .current {
  background: var(--color-primary);
  color: var(--color-white);
}

/* 記事なしメッセージ */
.noPost {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-light);
}

/* ==========================================================================
   施工事例詳細ページ
   ========================================================================== */

/* 詳細ページ全体 */
.caseDetail {
  padding: var(--spacing-lg) 0;
}

/* 記事タイトル */
.caseDetail__title {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  line-height: 1.4;
}

/* メインスライダー */
.caseDetail__slider {
  margin-bottom: var(--spacing-xl);
}

.caseSlider {
  max-width: 640px;
  margin: 0 auto var(--spacing-sm);
}

.caseSlider__item {
  position: relative;
}

.caseSlider__item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
}

.caseSlider__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  margin: 0;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  font-size: var(--font-size-sm);
}

/* スライダーナビゲーション（サムネイル） */
.caseSlider__nav {
  padding: 0 var(--spacing-xs);
}

.caseSlider__nav .slick-track {
  margin: 0 auto;
}

/* サムネイル5枚以下の場合、トラック移動を無効化 */
.caseSlider__nav--few .slick-track {
  transform: translate3d(0, 0, 0) !important;
}

.caseSlider__nav .slick-slide {
  padding: 0 4px;
}

.caseSlider__navItem {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.caseSlider__navItem:hover,
.slick-current .caseSlider__navItem {
  opacity: 1;
}

.caseSlider__navItem img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-gray);
}

/* Slickの矢印 */
.caseSlider .slick-prev,
.caseSlider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: var(--transition-base);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slickデフォルトの矢印テキストを非表示 */
.caseSlider .slick-prev::before,
.caseSlider .slick-next::before {
  display: none;
}

.caseSlider .slick-prev:hover,
.caseSlider .slick-next:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.caseSlider .slick-prev {
  left: 20px;
}

.caseSlider .slick-next {
  right: 20px;
}

@media screen and (max-width: 767px) {
  .caseSlider .slick-prev,
  .caseSlider .slick-next {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .caseSlider .slick-prev {
    left: 10px;
  }

  .caseSlider .slick-next {
    right: 10px;
  }
}

/* 施工情報 */
.caseDetail__info {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.caseDetail__title {
  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-bg-cream);
}

.caseDetail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: 0.8rem;
}

.caseDetail__metaItem {
  display: flex;
  align-items: center;
  padding: 0.5em 0;
}

.caseDetail__metaItem:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background: var(--color-border);
  margin: 0 1em;
}

.caseDetail__metaItem dt {
  color: var(--color-text-light);
  white-space: nowrap;
  margin-right: 0.5em;
}

.caseDetail__metaItem dt i {
  margin-right: 0.3em;
  color: var(--color-primary);
}

.caseDetail__metaItem dd {
  margin: 0;
  font-weight: 600;
}

.caseDetail__metaItem dd a {
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.caseDetail__metaItem dd a:not(:last-child)::after {
  content: "･";
  margin: 0 0.3em;
  color: var(--color-text-light);
}

.caseDetail__metaItem dd a:hover {
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .caseDetail__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .caseDetail__metaItem:not(:last-child)::after {
    display: none;
  }

  .caseDetail__metaItem {
    width: 100%;
    border-bottom: 1px solid var(--color-bg-cream);
  }

  .caseDetail__metaItem:last-child {
    border-bottom: none;
  }
}

/* 本文 */
.caseDetail__content {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  line-height: 1.8;
}

/* セクションタイトル（共通） */
.caseDetail__sectionTitle {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-primary);
  text-align: center;
  margin: 0 0 var(--spacing-lg);
}

.caseDetail__sectionTitleEn {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: normal;
  letter-spacing: 0.2em;
  margin-bottom: var(--spacing-xs);
}

/* ビフォーアフター */
.caseDetail__beforeAfter {
  background: var(--color-bg-cream);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.beforeAfterGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

@media screen and (max-width: 767px) {
  .beforeAfterGrid {
    grid-template-columns: 1fr;
  }
}

.beforeAfterItem {
  position: relative;
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* After画像（大きく表示） */
.beforeAfterItem__after {
  position: relative;
  cursor: pointer;
}

.beforeAfterItem__after:hover img {
  opacity: 0.9;
}

.beforeAfterItem__after img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--color-bg-gray);
}

.beforeAfterItem__comment {
  padding: var(--spacing-sm) var(--spacing-md);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-white);
}

/* Before画像（右上にオーバーレイ） */
.beforeAfterItem__before {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 35%;
  max-width: 150px;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--color-white);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.beforeAfterItem__before:hover {
  transform: scale(1.05);
}

.beforeAfterItem__before img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--color-white);
}

/* Before / After ラベル */
.beforeAfterItem__label {
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  padding: 0.3em 0.8em;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  z-index: 2;
}

.beforeAfterItem__label--after {
  background: var(--color-orange);
}

.beforeAfterItem__label--before {
  background: var(--color-text-light);
  font-size: 0.65rem;
  padding: 0.2em 0.5em;
}

/* 担当者コメント */
.caseDetail__staffComment {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.staffCommentBox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: #faf9f7;
  border-radius: var(--border-radius-md);
  border-left: 5px solid var(--color-orange);
}

@media screen and (max-width: 767px) {
  .staffCommentBox {
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }
}

/* モバイル用コンパクト調整 */
@media screen and (max-width: 767px) {
  .caseDetail__slider {
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__info {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }

  .caseDetail__content {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__beforeAfter {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__sectionTitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__sectionTitleEn {
    font-size: var(--font-size-xs);
    margin-bottom: 2px;
  }

  .caseDetail__staffComment {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .beforeAfterGrid {
    gap: var(--spacing-md);
  }

  .beforeAfterItem__comment {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

.staffCommentBox__text {
  flex: 1;
  line-height: 1.8;
  position: relative;
}

.staffCommentBox__quote {
  color: var(--color-orange);
  opacity: 0.3;
  font-size: 2rem;
  position: absolute;
  top: -10px;
  left: -10px;
}

.staffCommentBox__staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.staffCommentBox__photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

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

.staffCommentBox__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.staffCommentBox__icon i {
  font-size: 28px;
  color: var(--color-white);
}

.staffCommentBox__name {
  font-weight: 600;
  text-align: center;
}

.staffCommentBox__position {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: normal;
  color: var(--color-text-light);
}

/* 前後ナビゲーション */
.caseDetail__nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-bg-cream);
}

.caseDetail__navItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-md);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
  transition: var(--transition-base);
}

.caseDetail__navItem:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.caseDetail__navItem--prev {
  text-align: left;
}

.caseDetail__navItem--next {
  text-align: right;
}

.caseDetail__navItem--list {
  flex: 0 0 auto;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-white);
}

.caseDetail__navItem--list:hover {
  background: var(--color-primary-dark);
}

.caseDetail__navItem--list i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.3em;
}

.caseDetail__navItem--disabled {
  visibility: hidden;
}

.caseDetail__navLabel {
  font-size: var(--font-size-sm);
  color: inherit;
  opacity: 0.7;
  margin-bottom: 0.3em;
}

.caseDetail__navTitle {
  font-weight: 600;
  font-size: var(--font-size-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .caseDetail__nav {
    flex-direction: column;
  }

  .caseDetail__navItem--prev,
  .caseDetail__navItem--next {
    text-align: center;
  }
}

/* ==========================================================================
   ビフォーアフターモーダル
   ========================================================================== */

.baModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.baModal.is-open {
  opacity: 1;
  visibility: visible;
}

.baModal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.baModal__inner {
  position: relative;
  width: 90%;
  max-width: 800px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.baModal__slider {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

.baModal__slide {
  position: relative;
  outline: none;
}

.baModal__slide img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--border-radius-md);
}

.baModal__label {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  padding: 0.4em 1em;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  z-index: 2;
}

.baModal__label--before {
  background: var(--color-text-light);
}

.baModal__label--after {
  background: var(--color-orange);
}

/* モーダル内Slick矢印 */
.baModal__slider .slick-prev,
.baModal__slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.baModal__slider .slick-prev::before,
.baModal__slider .slick-next::before {
  display: none;
}

.baModal__slider .slick-prev:hover,
.baModal__slider .slick-next:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.baModal__slider .slick-prev {
  left: -60px;
}

.baModal__slider .slick-next {
  right: -60px;
}

@media screen and (max-width: 900px) {
  .baModal__slider .slick-prev {
    left: 10px;
  }
  .baModal__slider .slick-next {
    right: 10px;
  }
}

/* モーダル内ドット */
.baModal__dots {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.baModal__dots .slick-dots {
  position: static !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.baModal__dots .slick-dots li {
  margin: 0;
}

.baModal__dots .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  font-size: 0;
  cursor: pointer;
  transition: var(--transition-base);
}

.baModal__dots .slick-dots li button::before {
  display: none;
}

.baModal__dots .slick-dots li.slick-active button {
  background: var(--color-orange);
}

/* 閉じるボタン */
.baModal__close {
  display: block;
  max-width: 300px;
  margin-top: var(--spacing-sm);
  padding: 1em 2em;
  background: var(--color-orange);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-md);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-base);
}

.baModal__close:hover {
  background: #d85a00;
}

/* ===================================
   前後ナビゲーション（リニューアル）
=================================== */
.caseNavSection {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.caseNavSection__title {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-orange);
}

.caseNavSection__title i {
  color: var(--color-orange);
  margin-right: 0.5em;
}

.caseNavSection__posts {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-md);
  align-items: start;
}

@media screen and (max-width: 767px) {
  .caseNavSection {
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
  }

  .caseNavSection__title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
  }

  .caseNavSection__posts {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-sm);
  }

  .caseNavSection__links {
    grid-column: 1 / -1;
    order: 3;
  }

  .caseNavPost {
    padding: 0;
  }

  .caseNavPost__label {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-xs) 0;
  }

  .caseNavPost__title {
    font-size: var(--font-size-sm);
  }
}

/* 前後の記事カード */
.caseNavPost {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 0;
  overflow: hidden;
  transition: var(--transition-base);
}

.caseNavPost:hover {
  border-color: var(--color-orange);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.caseNavPost--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.caseNavPost__label {
  display: block;
  text-align: center;
  font-weight: bold;
  color: var(--color-orange);
  padding: var(--spacing-xs) var(--spacing-sm) 0;
}

.caseNavPost__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
  background: var(--color-bg-gray);
}

.caseNavPost__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.caseNavPost__title {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* 一覧へ戻るリンク */
.caseNavSection__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: center;
  align-self: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 1px dashed var(--color-border);
  border-right: 1px dashed var(--color-border);
}

@media screen and (max-width: 767px) {
  .caseNavSection__links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-left: none;
    border-right: none;
    border-top: 1px dashed var(--color-border);
    padding: var(--spacing-sm) 0;
    margin-top: var(--spacing-xs);
    gap: var(--spacing-sm);
  }

  .caseNavLink {
    flex-direction: row;
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    gap: 0.3em;
  }

  .caseNavLink:last-child {
    border-bottom: 1px solid var(--color-border);
  }

  .caseNavLink i {
    font-size: 1rem;
  }
}

.caseNavLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px dashed var(--color-border);
  width: 100%;
  text-align: center;
}

.caseNavLink:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.caseNavLink:hover {
  color: var(--color-orange);
}

.caseNavLink i {
  font-size: 1.8rem;
  color: var(--color-orange);
}

/* ===================================
   関連記事
=================================== */
.caseRelated {
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.caseRelated__title {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-orange);
  margin-bottom: var(--spacing-md);
}

.caseRelated__title i {
  margin-right: 0.5em;
}

.caseRelated__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

@media screen and (max-width: 991px) {
  .caseRelated__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .caseRelated {
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
  }

  .caseRelated__title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }

  .caseRelated__grid {
    gap: var(--spacing-sm);
  }

  .caseRelated__itemTitle {
    font-size: var(--font-size-xs);
  }
}

.caseRelated__item {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition-base);
}

.caseRelated__item:hover {
  opacity: 0.8;
}

.caseRelated__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-xs);
  background: var(--color-bg-gray);
}

.caseRelated__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.caseRelated__noImage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: 2rem;
}

.caseRelated__itemTitle {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* ==========================================================================
   サービスページ共通 - 施工事例セクション
   ========================================================================== */
.serviceCases {
  padding: var(--spacing-xl) 0;
  background: var(--color-bg);
}

.serviceCases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.serviceCases__card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: var(--transition-base);
}

.serviceCases__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.serviceCases__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.serviceCases__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.serviceCases__card:hover .serviceCases__img img {
  transform: scale(1.05);
}

.serviceCases__body {
  padding: var(--spacing-md);
}

.serviceCases__ttl {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.serviceCases__info {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.serviceCases__infoRow {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.serviceCases__infoRow dt {
  color: var(--color-text-light);
  font-weight: 500;
}

.serviceCases__infoRow dd {
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .serviceCases__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .serviceCases__ttl {
    font-size: 1rem;
  }

  .serviceCases__body {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .serviceCases__infoRow {
    grid-template-columns: 70px 1fr;
  }
}

/* ==========================================================================
   WBページ（通気断熱WB工法）
   ========================================================================== */

/* ページヘッダー */
.pageHeader--wb {
  background: linear-gradient(rgba(30, 25, 20, 0.5), rgba(20, 15, 10, 0.6)),
              url('assets/images/wb-hero.webp') center center / cover no-repeat;
  padding: 130px 0 110px;
  min-height: 350px;
}

.pageHeader--wb .pageTtl {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}

.pageHeader--wb .pageDesc {
  font-size: var(--font-size-lg);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 767px) {
  .pageHeader--wb {
    padding: 100px var(--spacing-sm) 80px;
    min-height: 280px;
  }
  .pageHeader--wb .pageTtl,
  .pageHeader--wb .pageDesc {
    text-align: center;
  }
}

/* WBイントロ */
.wbIntro {
  padding: var(--spacing-2xl) 0;
}

.wbIntro__visual {
  margin-bottom: var(--spacing-lg);
}

.wbIntro__visual img {
  width: 100%;
  height: auto;
}

.wbIntro__body {
  margin: 0 auto var(--spacing-lg);
}

.wbIntro__ttl {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.wbIntro__ttlEn {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-orange);
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
}

.wbIntro__text {
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.wbIntro__text strong {
  color: var(--color-orange);
}

.wbIntro__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.wbIntro__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.wbIntro__badge i {
  font-size: 1.2em;
}

.wbIntro__images {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: 0 auto;
}

.wbIntro__images img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

/* WB特徴セクション */
.wbFeatures {
  background-color: var(--color-bg-gray);
  padding: var(--spacing-2xl) 0;
}

.wbFeatures__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.wbFeature {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto;
  gap: var(--spacing-lg);
  align-items: start;
  background: #fff;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.wbFeature__num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
  grid-row: span 2;
  align-self: center;
}

.wbFeature__img {
  grid-column: 2;
}

.wbFeature__img img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.wbFeature__body {
  grid-column: 3;
}

.wbFeature__ttl {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.wbFeature__ttl i {
  color: var(--color-orange);
}

.wbFeature__desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.wbFeature__desc:last-child {
  margin-bottom: 0;
}

/* WB流れセクション（画像付きバージョン） */
.wbFlow {
  padding: var(--spacing-2xl) 0;
}

.flowTimeline--wb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

@media (max-width: 767px) {
  .flowTimeline--wb {
    grid-template-columns: repeat(2, 1fr);
  }
}

.flowTimeline--wb .flowTimeline__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.flowTimeline--wb .flowTimeline__num {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  width: 40px;
  height: 40px;
  background: var(--color-orange);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  z-index: 2;
}

.flowTimeline--wb .flowTimeline__img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.flowTimeline--wb .flowTimeline__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flowTimeline--wb .flowTimeline__content {
  padding: var(--spacing-sm);
  flex: 1;
}

.flowTimeline--wb .flowTimeline__ttl {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.95rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.flowTimeline--wb .flowTimeline__ttl i {
  color: var(--color-orange);
  font-size: 0.9em;
}

.flowTimeline--wb .flowTimeline__desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* WB保証制度セクション */
.wbGuarantee {
  background-color: var(--color-bg-gray);
  padding: var(--spacing-2xl) 0;
}

.wbGuarantee__intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
}

.wbGuarantee__lead {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.wbGuarantee__text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.wbGuarantee__highlight {
  color: var(--color-orange);
  font-weight: 700;
}

.wbGuarantee__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.wbGuarantee__card {
  background: #fff;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wbGuarantee__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.wbGuarantee__icon {
  width: 130px;
  height: 130px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-primary-light);
}

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

.wbGuarantee__iconText {
  width: 130px;
  height: 130px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.wbGuarantee__ttl {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.wbGuarantee__desc {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-light);
}

/* WB資料請求セクション */
.wbCatalog {
  padding: var(--spacing-2xl) 0;
}

.wbCatalog__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  color: #fff;
}

.wbCatalog__img {
  flex: 0 0 250px;
}

.wbCatalog__img img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
}

.wbCatalog__body {
  flex: 1;
}

.wbCatalog__ttl {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-sm);
}

.wbCatalog__text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
  opacity: 0.95;
}

/* レスポンシブ：WBページ */
@media screen and (max-width: 1024px) {
  .wbFeature {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .wbFeature__num {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
  }

  .wbFeature__img {
    grid-column: 2;
    grid-row: 1;
  }

  .wbFeature__body {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media screen and (max-width: 767px) {
  .wbIntro__badges {
    flex-direction: column;
    align-items: center;
  }

  .wbFeature {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
  }

  .wbFeature__num {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    font-size: 2rem;
    background: var(--color-orange);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wbFeature__img {
    margin-top: var(--spacing-xl);
  }

  .wbFeature__ttl {
    font-size: 1.1rem;
  }

  .flowTimeline--wb {
    grid-template-columns: 1fr;
  }

  .flowTimeline--wb .flowTimeline__item {
    padding: var(--spacing-sm);
  }

  .flowTimeline--wb .flowTimeline__img {
    aspect-ratio: unset;
    overflow: visible;
  }

  .flowTimeline--wb .flowTimeline__img img {
    max-width: 120px;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .flowTimeline--wb .flowTimeline__content {
    padding: var(--spacing-xs);
  }

  .wbGuarantee__grid {
    grid-template-columns: 1fr;
  }

  .wbCatalog__inner {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg);
  }

  .wbCatalog__img {
    flex: none;
    max-width: 200px;
  }

  .wbCatalog__ttl {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   2026-07-22 会社概要ページ 資格リストスタイル
   ========================================================================== */
.companyInfo__row--qualification dd {
  padding-top: var(--spacing-sm);
}

.qualificationList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.qualificationList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-white);
  border-radius: var(--border-radius-sm);
  border: 1px solid #ddd;
  border-left: 3px solid var(--color-orange);
}

.qualificationList__name {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.qualificationList__num {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-orange);
  white-space: nowrap;
  margin-left: var(--spacing-sm);
}

@media screen and (max-width: 768px) {
  .qualificationList {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   2026-07-22 スタッフ紹介ページ
   ========================================================================== */
.pageHeader--staff {
  background: linear-gradient(rgba(50, 50, 50, 0.5), rgba(30, 30, 30, 0.6)),
              url('https://www.kingo.co.jp/wp-content/uploads/2026/08/all-2026-2.jpg') center center / cover no-repeat;
  padding: 120px 0 100px;
  min-height: 300px;
}

.staffList__groupTtl {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-orange);
  margin-bottom: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.staffList__groupTtl:first-child {
  margin-top: 0;
}

.staffList__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.staffCard {
  display: flex;
  gap: var(--spacing-md);
  background: var(--color-white);
  border: 1px solid #ddd;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
}

.staffCard__img {
  flex-shrink: 0;
  width: 160px;
}

.staffCard__img img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-sm);
}

.staffCard__body {
  flex: 1;
  min-width: 0;
}

.staffCard__position {
  font-size: var(--font-size-sm);
  color: var(--color-orange);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.staffCard__name {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.staffCard__info {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.staffCard__info dt {
  color: var(--color-primary);
  font-weight: 600;
  margin-top: var(--spacing-xs);
}

.staffCard__info dt:first-child {
  margin-top: 0;
}

.staffCard__info dt i {
  color: var(--color-orange);
  margin-right: 0.3rem;
}

.staffCard__info dd {
  color: var(--color-text);
  margin-left: 0;
}

.staffRecruit.sec {
  text-align: center;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.staffRecruit__banner {
  display: inline-block;
  max-width: 900px;
}

.staffRecruit__banner img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
  transition: opacity var(--transition-base);
}

.staffRecruit__banner:hover img {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .staffList__grid {
    grid-template-columns: 1fr;
  }

  .staffCard {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .staffCard__img {
    width: 150px;
  }

  .staffCard__body {
    width: 100%;
  }

  h3.staffCard__name {
    text-align: center !important;
  }

  .staffCard__info {
    text-align: left;
  }
}

/* ==========================================================================
   スマホ用パディング統一（40px → 16px）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* リフォーム特徴カード */
  .reformFeatures__item {
    padding: var(--spacing-sm);
  }

  /* ページCTA */
  .pageCta__inner {
    padding: var(--spacing-sm);
  }

  /* 保証リスト */
  .warrantyList__item {
    padding: var(--spacing-sm);
  }

  /* おすすめリスト */
  .recommendList__item {
    padding: var(--spacing-sm);
  }

  /* コンセプトカード */
  .conceptCard {
    padding: var(--spacing-sm);
  }

  /* タイミングテーブル */
  .timingTable__item {
    padding: var(--spacing-sm);
  }

  /* 料金リスト（左右のみ調整） */
  .priceList__item {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  /* フロータイムライン（通常版） */
  .flowTimeline__item {
    padding: var(--spacing-sm);
  }

  /* WB保証カード */
  .wbGuarantee__card {
    padding: var(--spacing-sm);
  }

  /* ==========================================================================
     縦余白（gap/margin）の調整（60px → 24px）
     ========================================================================== */

  /* gap調整 */
  .companyPhilosophy__list {
    gap: var(--spacing-md);
  }

  .wbFeatures__grid {
    gap: var(--spacing-md);
  }

  .wbHouse__inner {
    gap: var(--spacing-md);
  }

  .newbuildIntro__inner {
    gap: var(--spacing-md);
  }

  .wbGuarantee__grid {
    gap: var(--spacing-md);
  }

  /* margin-bottom調整 */
  .secTtl {
    margin-bottom: var(--spacing-md);
  }

  .caseSlider {
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__info {
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__body {
    margin-bottom: var(--spacing-md);
  }

  .caseDetail__photos {
    margin-bottom: var(--spacing-md);
  }
}