@charset "UTF-8";
/* ============================================================
   ベース設定（2025-11-12 Final / Sticky安定版）
   作者：住宅展示場ネット
   目的：全体の初期化と sticky の安定動作を両立
============================================================ */


/* ------------------------------
   共通リセット＆ボックスモデル統一
--------------------------------*/
* {
  box-sizing: border-box;
}

/* ------------------------------
   HTML・BODYの基本設定
--------------------------------*/
html, body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: #3e3a35;
  background: #fcfbf9;
  scroll-behavior: smooth;
  height: auto;
  min-height: 100%;
}

/* ------------------------------
   スクロール挙動とsticky安定化
--------------------------------*/
/*
  stickyが効かなくなる要因：
  ・親要素に overflow: hidden / auto / scroll
  ・transform / filter / backdrop-filter の指定
  ここではそれらを解除して、stickyを安定動作させる
*/
html {
  overflow-x: hidden; /* 横スクロール防止（安全） */
}

body {
  overflow-x: visible; /* sticky維持のため visible */
}

/*:root {
 --accent: #B86E2D; //* 焼きオレンジ（上品寄り） */
 /*--accent-dark: #965722; /* hover / 1段濃くした影色 */
/*}*/

:root{
 --accent: #9C3B3B;     /* 深みのあるワイン系 */
 --accent-dark: #7A2E2E;  /* hover用：少し沈める */
 --accent-hover: #C1902F;  /* 背景色（濃）hover用：ゴールド系 */
}


 h1, h2, h3 {
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 16px;
}

a {
    text-decoration: none;
}


/* 改行の定義　初期は全部非表示にしておく */
br.pc { display:none; }
br.sp { display:none; }

/* PC */
@media (min-width:1025px){
  br.pc { display:inline; }
}

/* SP */
@media (max-width:1024.98px){
  br.sp { display:inline; }
}

/* -----------------------------------------
   HEADER+Global Navi
--------------------------------------------*/
.main-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #1e3a5f; 
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
 transform: translateZ(0); /* GPU競合回避 */
}
.header-inner {
  max-width: 1600px;
  margin: 0;
  padding: 0px 60px 0px 30px;  /* ←右側だけ増やす */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo {
  transform: translateX(-10px); /* ← 左に寄せる */
  transform: translatey(10px); /* ← 追加 */
}
.site-logo a {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* =========================================
   PC専用  global-nav定義
========================================= */
  .global-nav{
    position: sticky;
    top: 70px; /* ← 上段headerの高さ分を指定（例：70px前後で調整） */
    z-index: 9998;
    border-top: 1px solid #1e3a5f;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    width: 100%;
  }
  .global-nav ul{
    max-width: 1600px;
    margin: 0 auto;
    padding: 0px 40px 20px 30px;
    display:flex;
    justify-content:flex-end;
    gap: 24px;
    list-style:none;
  }
  .global-nav a{
    color:#fff;
    font-weight: 500;
    font-size: 1.3rem!important;
    padding: 4px 16px 6px;
    border-radius: 8px;
    transition: 0.3s;
  }
  .global-nav a:hover{
    background: #9C3B3B;
    color:#fff;
  }
@media (min-width: 1025px) {
  .global-nav {
    margin-top: 8px;
    }
  .global-nav ul {
    padding-top: 14px;   /* ← 今 0 に近い。ここが一番重要 */
    padding-bottom: 14px; /* 下も合わせると縦中央揃いが綺麗 */
  }
  .global-nav {
    margin-top: 6px;       /* ヘッダーと少し離す */
  }
.global-nav a {
    white-space: nowrap; /* ← 折り返し禁止 */
  }

  .global-nav ul {
    flex-wrap: nowrap;   /* ← UL の折り返しも禁止 */
  }
}



/* =========================================
   ドロワーメニュー（バーガーメニュー開閉）
========================================= */
.drawer-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: rgba(30,58,95,0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  z-index: 10001;
  padding: 80px 24px 40px;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
  transition: right 0.4s ease-in-out;
}
.drawer-menu.open {
  right: 0;
}
.drawer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-menu li {
  margin-bottom: 24px;
}
.drawer-menu a {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.03em;
  display: block;
  transition: color 0.3s;
}
.drawer-menu a:hover {
  color: #a98545; /* ゴールドアクセント */
}

/* 閉じるボタン */
.drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 1.8rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.drawer-close:hover {
  transform: rotate(90deg);
}

/* バーガーアイコン（画面右端に固定） */
.main-header .header-inner .burger {
  position: absolute;   
  right: 24px;  /* ← 追加（調整可能） */
  top: 30%;  /* ← トップからの位置 */
  transform: translateY(-50%); /* ← 中央揃え */
  z-index: 2000;  /* ← ヘッダーより前に */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
}
/* 3本線 */
.main-header .header-inner .burger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}
@media (max-width: 767px){
  .main-header .header-inner .burger  {
    top: 20%;
    transform: translateY(-50%);
    right: 16px;
  }
}
/* 線部分は現状維持でOK */
.main-header .header-inner .burger  span {
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

/* メニュー背景フェード */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9998;
}
.drawer-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* TOPボタン表示制御 */
.scroll-top-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.scroll-top-btn.show {
  opacity: 1;
  pointer-events: auto;
}



/* ===============================
   スマホ用　bottom に固定のnav
   =============================== */
.sp-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: #ffffffF2; /* ←ほんのり透明 */
  border-top: 1px solid rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-around;
  padding: 6px 0;
  z-index: 900;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.08);
  width: 100vw;
  overflow: hidden;
}
.sp-bottom-nav .nav-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #333;
  text-decoration: none;
}
.sp-bottom-nav .nav-item i {
  font-size: 20px;
  display: block;
  margin-bottom: 2px;
}

/* PCでは非表示 */
@media(min-width:1025px){
  .sp-bottom-nav {display:none !important;}
}

/* ======================================
   GLOBAL RESPONSIVE BASE
   (2025-11-07)
====================================== */
/* 0) 共通：横ずれ対策 */
html, body {
  overflow-x: hidden;
}

/* 1) SP base 〜767px */
@media (max-width:767px){
  body{
    font-size:16px;
    line-height:1.7;
    padding-bottom: 56px; /* ← SP固定フッターナビの高さ確保 */
  }
}
 

/* 2) Tablet = 768〜1024 */
@media (min-width:768px) and (max-width:1024px){
  body{
    font-size:16px;
    line-height:1.65;
    padding-bottom:0;  /* ←タブレットはフッターバー非表示 */
  }
}

/* 3) PC = 1025〜 */
@media (min-width:1025px){
  body{
    font-size:17px;
    line-height:1.55;
  }

  /* SP bottom nav hide */
  .sp-bottom-nav{ display:none !important; }
}


/* =========================================
   SP/TB（〜1024px） global-nav
========================================= */
@media (max-width:1024.98px){
.header-inner{
    padding: 0 60px 0 30px;
    display: flex;
    align-items: center;  
  }
  /* ロゴは左寄せ（translate で高さ調整） */
  .site-logo{
    transform: translateY(6px);
  }
/* --- header ロゴサイズ調整 --- */
.site-logo a{
  font-size: 1.2rem;
  line-height: 1;
}
  /* SPは nav を白帯で独立 sticky */
  .global-nav{
    /*position: sticky;*/
    top: 86px; /* ← header高さ分　微調整 */
    z-index: 9998;
    background: #fff;
    border-top: 1px solid #1e3a5f;
    padding: 8px 14px 16px;
    margin-bottom: 2px;
  }
  .global-nav ul{
    display:flex;
    flex-wrap:wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style:none;
    justify-content: flex-start;
  }
  .global-nav li{
    margin:0;
  }
  .global-nav a{
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.8rem;
    color: #1e3a5f;
    border: 1px solid #1e3a5f;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
    transition: 0.3s;
  }
  .global-nav a:hover{
    border-color: var(--accent-dark); /* ← accent-dark */
  }
}

.main-header,
.global-nav {
  will-change: transform;
  contain: layout paint style;
}


/* =========================================
   Footer (2025-11-12 Final統合版)
   PC：3カラム
   Tablet：同構成でgap縮小
   SP：上2列＋運営会社センター寄せ
========================================= */
footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}

.site-footer {
  background: #1e3a5f;
  color: #fff;
  padding: 80px 40px 40px;
  font-size: 0.95rem;
}

/* --- グリッド構造 (PC) --- */
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.footer-column {
  flex: 1;
  min-width: 220px;
}

/* --- 見出し --- */
.footer-column h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #fff;
  border-bottom: 2px solid var(--accent); /* エンジ */
  display: inline-block;
  padding-bottom: 4px;
}

/* --- リストリンク --- */
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-column li {
  margin-bottom: 10px;
}
.footer-column a {
  color: #f0f0f0;
  text-decoration: none;
  opacity: 0.9;
  transition: all 0.3s;
}
.footer-column a:hover {
  color: var(--accent-hover);
  opacity: 1;
}

/* --- 運営会社住所など --- */
.footer-column .address {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 10px;
  opacity: 0.9;
}

/* --- SNSアイコン --- */
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.footer-social a {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s, transform 0.3s;
}
.footer-social a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

/* --- コピーライト --- */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  padding-top: 20px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

/* =========================================
   Tablet（768〜1024px）
========================================= */
@media (max-width: 1024px) {
  .site-footer {
    padding: 60px 24px 30px;
  }
  .footer-inner {
    gap: 32px;
  }
  .footer-column h4 {
    font-size: 1rem;
  }
}

/* =========================================
   スマホ（〜767.98px）
========================================= */
@media (max-width: 767.98px) {
  .site-footer {
    padding: 48px 24px 20px;
    text-align: center;
  }

  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 20px;
  }

  /* 上段2カラム */
  .footer-column:nth-child(1),
  .footer-column:nth-child(2) {
    flex: 1 1 calc(50% - 20px);
    min-width: 150px;
    text-align: left;
  }

  /* 下段 運営会社（センター寄せ） */
  .footer-column:nth-child(3) {
    flex: 1 1 100%;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 12px;
    padding-top: 18px;
  }

  .footer-column h4 {
    font-size: 1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px;
  }

  .footer-column a {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .footer-social {
    justify-content: center;
    margin-top: 10px;
    gap: 18px;
  }

  .footer-bottom {
    margin-top: 32px;
    font-size: 0.8rem;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
}

/* ===========================================================
   Sticky安定化ブロック（外注用ドキュメントコメント付）
   -----------------------------------------------------------
   このブロックは、ヘッダーやナビゲーション（.main-header / .global-nav）
   の「position: sticky」が機能しなくなる現象を防ぐための
   “最終防衛ライン”です。

   ■ なぜ必要か：
   親要素（html, body, main など）に以下の指定があると、
   sticky が効かなくなります。
     - overflow: hidden / auto / scroll
     - transform / filter / backdrop-filter

   ■ 対策方針：
   1. body の overflow-x は visible に戻す（stickyの計算が通るように）
   2. main 要素の transform / overflow をリセット（描画コンテキスト解除）
   3. !important を明示して、上書き防止

   ※ このブロックを削除すると header の sticky が無効化されます。
=========================================================== */

body {
  overflow-x: visible;  /* stickyを有効化（横スクロール防止はhtml側で実施） */
}

main {
  transform: none !important;   /* transform指定を無効化（stickyの座標計算を維持） */
  overflow: visible !important; /* overflowの独立スクロールを無効化 */
}

/* ===============================
   G案ヘッダーのフォントサイズ調整（親テーマに勝つため）
   =============================== */

/* PC */
.main-header .global-nav a {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
}

/* SP（小さくしすぎない） */
@media (max-width: 1024px) {
    .main-header .global-nav a {
      font-size: 13px;
      font-weight: 400;
      color: #003049; 
      padding: 6px 12px;
      white-space: nowrap;
    }
}

/* ===============================
   G案ヘッダー ロゴ（サイトタイトル）調整（親テーマに勝つため）
   =============================== */
/* ロゴ（サイトタイトル） */
.main-header .site-logo a,
.main-header .site-logo {
    font-size: 24px; /* サイズ調整*/
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
}

@media (max-width: 767px){
  .main-header .header-inner .burger  {
    top: 15%;
    transform: translateY(-50%);
    right: 16px;
  }
}

/* ===============================
   G案ヘッダー全体の高さ調整（親テーマに勝つため）
   =============================== */

/* ヘッダー内のレイアウト（行揃え） */
.main-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;  /* ← これが効く！ */
}

/* スマホでは少し低めに */
@media (max-width: 767px) {
    .main-header .header-inner {
        min-height: 50px;
    }
}

/* ===============================
   G案 フッター調整（WordPress 親テーマに勝つ）
================================= */

.site-footer {
    background: #0e2f47; /* ネイビー */
    color: #ffffff;
    padding: 60px 0 30px;
    font-size: 15px;
}

.site-footer a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 15px;
}

.site-footer h4 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 400;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 0 20px;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column p {
    margin-bottom: 12px;
    line-height: 1.6;
}

/* SNSアイコン */
.footer-social a {
    font-size: 20px;
    margin-right: 15px;
}

/* コピーライト */
.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.footer-bottom p {
    font-size: 14px;
    opacity: 0.8;
}

/* ===============================
   スマホ最適化
================================= */
@media (max-width: 767px) {
    .footer-inner {
        flex-direction: column;
        text-align: left;
        gap: 40px;
        padding: 0 30px;
    }

    .site-footer {
        padding: 40px 0;
    }

    .site-footer h4 {
        font-size: 17px;
    }

    .site-footer a,
    .site-footer p,
    .site-footer li {
        font-size: 15px;
    }

    .footer-bottom p {
        font-size: 13px;
    }
}

/* 旧フローティングボタン（VRページ）を非表示にする */
@media (max-width: 1024px) {
  .floating-btn,
  .floating_btn_wrapper,
  .floating_btn,
  .float_1 {
      display: none !important;
  }
}

/* single-landing-page の不要余白を削除（親テーマの上書き） */
@media (max-width: 767px) {
  .single-landing-page footer {
    margin-bottom: 0 !important;
  }
}

/* ================================
   SP ロゴ（団体名 / 都道府県名）表示サイズ最適化
   ================================ */
@media (max-width: 767.98px) {
  .main-header .site-logo a {
    font-size: 18px;        /* 小さめ */
    line-height: 1.3;       /* 行間を少し詰める */
    display: inline-block;
    max-width: 80%;         /* 長い名前でも収まる */
    word-break: keep-all;   /* 不自然な途中改行を防ぐ */
    white-space: normal;    /* 改行を許可 */
  }

  /* ロゴ全体の余白調整 */
  .main-header .header-inner {
    padding: 10px 12px;
  }
}

/* ========== LPページ系（single-landing-page） ========== */

/* --------------------------------------------------------------
 * 「ハイスペック動画に切り替える →」ボタンを右寄せにする
 * 親テーマ main.css の .h-btn-box を上書きするための定義
 * -------------------------------------------------------------- */
.single-landing-page .h-btn-box {
  text-align: right !important; /* ボックス自体を右寄せ */
}

.single-landing-page .h-btn-box .h-btn {
  display: inline-block; /* ボタンが中央に広がらず右寄せされる */
}

/* --------------------------------------------------------------
 * ハイスペック動画切替ボタンの位置調整
 * 親テーマ main.css の .h-btn-box の上書き → 子テーマで調整
 * -------------------------------------------------------------- */

/* ボタンの親（.h-btn-box）を右寄せしつつ余白バランスを最適化 */
.single-landing-page .h-btn-box {
    text-align: right !important; /* ボタンを右寄せ */
    padding-right: 12px !important; /* ← 右の余白（スマホ向けに程よく） */
    margin-top: 20px !important; /* ← 上に少し余白つける（詰まり防止） */
    margin-bottom: 16px !important; /* ← 次のブロックとの適度な間隔 */
}

/* ボタン自体のサイズ/余白微調整 */
.single-landing-page .h-btn-box .h-btn {
    padding: 12px 18px !important; /* ← ボタンのサイズ感最適化 */
    display: inline-block;
}

/* =========================================================
   Single VRページ（single-vr.php）ボタン調整（SP専用）
   @sonobe 2025-11-19
   ========================================================= */
@media (max-width: 767px) {

  /* ボタンの親ボックスの上下余白 */
  body.single-vr .h-btn-box {
    margin-top: 30px !important;   /* 上余白 */
    margin-bottom: 40px !important; /* 下余白 */
    text-align: right !important;   /* ← スマホ時も右寄せ */
  }

  /* ボタン自体が100%幅にならないように保険 */
  body.single-vr .h-btn-box .h-btn {
    display: inline-block;
  }
}