@charset "UTF-8";

/* ==================================================
   1. ヘッダー全体 (PC・スマホ共通)
================================================== */
.header {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 40px !important;
  height: 100px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  z-index: 1000 !important;
}

/* 既存のボタン風の枠や背景を完全にリセット */
.header_nav ul,
.header_nav li,
.header_nav a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* アイコンメニューのレイアウト */
.header-icon-menu {
  display: flex;
  gap: 35px; /* メニュー同士のゆったりした間隔 */
  list-style: none;
  align-items: center;
}

/* リンク要素（縦並び） */
.header-icon-menu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #333 !important; /* テキストはダークグレー */
  font-size: 11px !important;
  font-weight: bold;
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif;
  transition: opacity 0.3s;
  height: auto !important; /* 既存の高さ制限を解除 */
}

/* アイコンのスタイル（大きく、色を統一） */
.header-icon-menu li a i {
  font-size: 28px !important; /* アイコンを大きく */
  color: #0056b3 !important; /* ジュートピア風の青・あるいはお好みのブランドカラー */
  margin-bottom: 8px !important;
  transition: transform 0.3s;
}

/* ホバー時のアクション */
.header-icon-menu li a:hover {
  opacity: 0.7;
}

.header-icon-menu li a:hover i {
  transform: translateY(-3px); /* アイコンだけ少し浮き上がる */
}

/* スマホ表示ではヘッダー内のPC用メニューを消す */
@media screen and (max-width: 900px) {
  .header_nav {
    display: none !important;
  }
  .header {
    padding: 10px 20px;
  }
}

/* =========================================
   ヘッダー アイコンナビゲーション (ジュートピア風・最新版)
========================================= */
.header {
  display: flex;
  justify-content: space-between; /* 両端配置 */
  align-items: center;
  padding: 10px 40px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* ナビゲーションエリアを中央に広げる */
.header_nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
/* 超強力なリセット */
.header_nav ul.header-icon-menu,
.header_nav ul.header-icon-menu li,
.header_nav ul.header-icon-menu li a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* アイコンメニューのレイアウト*/
ul.header-icon-menu {
  display: flex !important;
  gap: 50px !important;
  list-style: none !important;
  align-items: center !important;
}

/* リンク要素（縦並び） */
ul.header-icon-menu li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #333 !important; /* テキストはダークグレー */
  font-size: 11px !important;
  font-weight: bold !important;
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif !important;
  transition: opacity 0.3s !important;
  height: auto !important; /* 既存の高さ制限を解除 */
  min-width: 60px !important; /* テキストが折り返さないための最低幅 */
}

/* アイコンのスタイル（大きく、色を統一） */
ul.header-icon-menu li a i {
  font-size: 28px !important; /* アイコンを大きく */
  color: #0056b3 !important; /* ジュートピア風の青・あるいはお好みのブランドカラー */
  margin-bottom: 8px !important;
  transition: transform 0.3s !important;
}

/* ホバー時のアクション */
ul.header-icon-menu li a:hover {
  opacity: 0.7 !important;
}

ul.header-icon-menu li a:hover i {
  transform: translateY(-3px) !important; /* アイコンだけ少し浮き上がる */
}

/* ログイン/登録ボタンを少し目立たせる場合（任意） */
ul.header-icon-menu li.menu-item-login a i {
  color: #e74c3c !important; /* ログインは赤色など */
}

/* スマホ表示ではヘッダー内のPC用メニューを消す */
@media screen and (max-width: 900px) {
  .header_nav {
    display: none !important;
  }
  .header {
    padding: 10px 20px;
  }
}

/* ----------------------------------------------------------- */
/* header.php ススマホ用ユーザーアクション（ログインボタン等） */
/* ----------------------------------------------------------- */
.header_user_actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  position: relative;
  display: none; /* 基本は非表示（スマホ時のみ表示） */
}

.user-action-button.sp-only {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 5px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  font-size: 1.15rem;
}
.user-action-button.sp-only .dashicons {
  font-size: 18px;
}

/* スマホ用マイページドロップダウン */
.user-menu-sp {
  position: relative;
}
.user-menu-sp-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
}
.user-menu-sp-toggle .dashicons {
  font-size: 28px;
}
.user-menu-sp-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 200px;
  z-index: 1001;
}
.user-menu-sp.is-active .user-menu-sp-dropdown {
  display: block;
}
.user-menu-sp-dropdown ul {
  list-style: none;
  padding: 10px 0;
  margin: 0;
}
.user-menu-sp-dropdown ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.user-menu-sp-dropdown ul li a:hover {
  background-color: #f5f5f5;
}

/* =========================================
   ヘッダー アイコンナビゲーション
========================================= */
.header {
  display: flex;
  justify-content: space-between; /* 両端配置 */
  align-items: center;
  padding: 10px 40px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ナビゲーションエリアを中央に広げる */
.header_nav {
  flex-grow: 1; /* 残りの幅をすべて使う */
  display: flex;
  justify-content: center; /* メニュー全体を中央に配置 */
}

/* 超強力なリセット（過去の緑枠などを完全に消去） */
.header_nav ul.header-icon-menu,
.header_nav ul.header-icon-menu li,
.header_nav ul.header-icon-menu li a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* アイコンメニューのレイアウト（等間隔に） */
ul.header-icon-menu {
  display: flex !important;
  gap: 50px !important; /* メニュー項目の間隔 */
  list-style: none !important;
  align-items: center !important;
  justify-content: center !important;
}

/* リンク要素（縦並び） */
ul.header-icon-menu li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #333 !important; /* テキストはダークグレー */
  font-size: 11px !important;
  font-weight: bold !important;
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif !important;
  transition: opacity 0.3s !important;
  height: auto !important; /* 既存の高さ制限を解除 */
  min-width: 60px !important; /* テキストが折り返さないための最低幅 */
}

/* アイコンのスタイル（大きく、色を統一） */
ul.header-icon-menu li a i {
  font-size: 28px !important; /* アイコンを大きく */
  color: #0056b3 !important; /* ジュートピア風のブランドカラー */
  margin-bottom: 8px !important;
  transition: transform 0.3s !important;
}

/* ホバー時のアクション */
ul.header-icon-menu li a:hover {
  opacity: 0.7 !important;
}
ul.header-icon-menu li a:hover i {
  transform: translateY(-3px) !important; /* アイコンだけ少し浮き上がる */
}

/* ログイン/登録ボタンを少し目立たせる場合（任意） */
ul.header-icon-menu li.menu-item-login a i {
  color: #e74c3c !important; /* ログインは赤色に */
}

/* =======================================
 フローティングバナー（右端追従）
======================================= */
.floating-banner {
  position: fixed;
  z-index: 998;
  transition: transform 0.4s ease-in-out;
}
.floating-banner a {
  display: block;
}
.floating-banner img,
.floating-banner picture {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 801px) {
  .floating-banner {
    top: 75%;
    right: 0;
    transform: translateY(-50%);
    width: 100px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
  }
  .floating-banner:hover {
    transform: translateY(-50%) scale(1.05);
  }
}

/* =========================================
   スマホ・タブレット表示 (1024px以下) の調整
========================================= */
@media screen and (max-width: 1024px) {
  /* PC用ナビを非表示にする */
  .header_nav {
    display: none !important;
  }

  /* スマホ用アクションボタンを表示 */
  .header_user_actions {
    display: block !important;
    margin-right: -50px;
  }

  /* ハンバーガーメニューの表示 */
  .btn_nav.pc_off {
    display: flex !important;
  }

  .header {
    padding: 10px 20px;
  }

  /* フローティングバナーをスマホ用に下部へ */
  .floating-banner {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  .floating-banner a {
    display: block;
    max-width: 400px;
    margin: 0 auto;
  }
  body {
    padding-bottom: 90px !important;
  }
  .floating-banner img,
  .floating-banner picture {
    box-shadow: none;
  }
}

/* =========================================
   1. ヘッダー全体 (PC)
========================================= */
.header {
  display: flex !important;
  /* ★修正：メニュー(左)とロゴ(右)の並び順を変えるため、通常はそのまま。
     今回はHTML構造が「ロゴが先、メニューが後」なので flex-direction で逆転させます */
  flex-direction: row-reverse !important;
  justify-content: space-between !important; /* 両端に配置 */
  align-items: center !important; /* 縦方向の中央揃え */
  padding: 0 40px !important; /* 左右の余白 */
  height: 90px !important; /* ヘッダーの高さを固定 */
  background-color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* ==================================================
   ロゴ配置 (右側)
================================================== */
.header_logo {
  /* orderの指定は不要になったため削除 */
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;

  /* 古い絶対配置の呪縛を無効化 */
  position: static !important;
  translate: none !important;
  top: auto !important;
  left: auto !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
}

.header_logo a {
  display: block !important;
  width: auto !important;
}

.header_logo img {
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}

/* もしPCでヘッダーが狭く見えたら高さを少し広げる */
.header {
  height: 100px !important; /* 90pxから100pxにするとロゴがより際立ちます */
}

/* ==================================================
   スマホ表示時の調整 (max-width: 900px)
================================================== */
@media screen and (max-width: 900px) {
  .header {
    height: 70px !important;
    padding: 0 15px !important;
    justify-content: space-between !important;
  }

  .header_nav {
    display: none !important;
  }

  /* ★ スマホ用のロゴサイズと配置の適正化 */
  .header_logo {
    order: 1 !important; /* スマホではロゴを左寄りに配置するのが一般的ですが、今のまま中央・右でもOK */
    width: 150px !important; /* スマホでの最大幅を固定 */
  }

  .header_logo img {
    height: auto !important; /* ★スマホでは高さをautoに戻す（これが超重要） */
    width: 100% !important; /* 親の幅(150px)に合わせて綺麗に縮小させる */
  }

  .header_user_actions {
    order: 2 !important;
    display: flex !important;
    margin-left: auto !important;
    margin-right: 15px !important;
  }

  .btn_nav.pc_off {
    order: 3 !important;
    display: flex !important;
    margin-right: 0 !important;
  }
}

/* ==================================================
   ナビゲーション配置 (左側)
================================================== */
.header_nav {
  /* orderの指定は不要になったため削除、flex-direction: row-reverseにより自動的に左に行きます */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* メニューを左から並べる */
  flex-grow: 1;
  padding-left: 0; /* 左寄せなので不要 */
}

/* 既存のリセット */
.header_nav ul.header-icon-menu,
.header_nav ul.header-icon-menu li,
.header_nav ul.header-icon-menu li a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* アイコンメニューのレイアウト */
ul.header-icon-menu {
  display: flex !important;
  gap: 35px !important; /* ★左からバランスよく並べるための隙間 */
  list-style: none !important;
  align-items: center !important;
  height: 100%;
}

/* リンク要素（縦並び） */
ul.header-icon-menu li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #333 !important;
  font-size: 13px !important; /* 文字サイズを大きく */
  font-weight: bold !important;
  font-family: "Montserrat", "Zen Kaku Gothic Antique", sans-serif !important;
  transition: opacity 0.3s !important;
  min-width: 70px !important;
}

/* アイコンのスタイル */
ul.header-icon-menu li a i {
  font-size: 32px !important; /* アイコンを大きく */
  color: #0056b3 !important;
  margin-bottom: 6px !important;
  transition: transform 0.3s !important;
}

ul.header-icon-menu li a:hover {
  opacity: 0.7 !important;
}
ul.header-icon-menu li a:hover i {
  transform: translateY(-3px) !important;
}

/* ログイン/登録ボタンを目立たせる */
ul.header-icon-menu li.menu-item-login a i {
  color: #e74c3c !important; /* ログインは目立つ色に */
}
/* =========================================
   ヘッダー アイコンの個別カラー設定
========================================= */

/* ベースの文字色は共通でダークグレー */
ul.header-icon-menu li a {
  color: #333 !important;
}

/* 1. モデルハウス (温かみのあるオレンジ/テラコッタ) */
ul.header-icon-menu li a i.fa-home {
  color: #e67e22 !important;
}

/* 2. イベント情報 (活気あるレッド/ピンク系) */
ul.header-icon-menu li a i.fa-calendar-alt {
  color: #e74c3c !important;
}

/* 3. 建築実例 (洗練されたネイビー/インディゴ) */
ul.header-icon-menu li a i.fa-hammer {
  color: #2c3e50 !important;
}

/* 4. 建売・中古物件 (信頼感のあるブルー) */
ul.header-icon-menu li a i.fa-key {
  color: #3498db !important;
}

/* 5. 工務店を探す (安心感のあるグリーン) */
ul.header-icon-menu li a i.fa-building {
  color: #27ae60 !important;
}

/* 6. 一括資料請求 (少し目立たせるゴールド/イエロー系) */
ul.header-icon-menu li a i.fa-file-alt {
  color: #f39c12 !important;
}

/* 7. ログイン/マイページ関連 (落ち着いたグレーまたはアクションカラー) */
ul.header-icon-menu li.menu-item-login a i,
ul.header-icon-menu li.menu-item-account a i {
  color: #8e44ad !important; /* パープル系で他と差別化 */
}
ul.header-icon-menu li.menu-item-logout a i {
  color: #95a5a6 !important; /* ログアウトは控えめなグレー */
}

/* ホバー時のアクション（アイコンの色を少し濃くする・または透過させる） */
ul.header-icon-menu li a:hover i {
  opacity: 0.7 !important;
}

/* スマホメニューのアイコン色もPCと統一 */
.header_sitemap_cont_item .fa-home {
  color: #e67e22 !important;
}
.header_sitemap_cont_item .fa-calendar-alt {
  color: #e74c3c !important;
}
.header_sitemap_cont_item .fa-hammer {
  color: #2c3e50 !important;
}
.header_sitemap_cont_item .fa-key {
  color: #3498db !important;
}
.header_sitemap_cont_item .fa-search {
  color: #9b59b6 !important;
} /* シーン検索 */
.header_sitemap_cont_item .fa-building {
  color: #27ae60 !important;
}
.header_sitemap_cont_item .fa-file-alt {
  color: #f39c12 !important;
}

/* PC表示（901px以上）のときのみ表示する設定 */
@media screen and (min-width: 901px) {
  .header_nav {
    display: flex !important;
  }
}
/* スマホ表示時はPC用メニューを強制的に消去 */
@media screen and (max-width: 900px) {
  .header_nav {
    display: none !important;
  }

  /* スマホ用のアクションボタンは表示 */
  .header_user_actions {
    display: flex !important;
  }

  .header {
    padding: 10px 20px !important;
  }
}
@media screen and (max-width: 900px) {
  .header {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 15px !important;
    height: 70px !important;
  }
  .header_logo {
    position: static !important; /* 絶対配置を解除 */
    translate: none !important;
    width: 140px !important;
  }
  .header_user_actions {
    margin-left: auto; /* ログインボタンをハンバーガーの左に寄せる */
    margin-right: 15px;
    display: flex !important;
  }
  .btn_nav.pc_off {
    margin-right: 0 !important;
  }
}

/* ==================================================
   【完全修正】ロゴを右、メニューを左、iPad横はPC表示にする
   ================================================== */

/* 1. PC/タブレット横向き（1024px以上）: ロゴは右、メニューは左 */
@media screen and (min-width: 1024px) {
  .header {
    display: flex !important;
    flex-direction: row !important; /* 左から右への順序に戻す */
    justify-content: space-between !important;
    padding: 0 40px !important;
  }

  .header_nav {
    display: flex !important;
    order: 1 !important; /* メニューを左へ */
    justify-content: flex-start !important;
    margin-left: 20px !important;
  }

  .header_logo {
    order: 2 !important; /* ロゴを右へ */
    margin-left: auto !important;
    position: static !important;
    translate: none !important;
    width: auto !important;
  }

  /* タブレット横向きでハンバーガーメニューが消えるようにする */
  .btn_nav.pc_off {
    display: none !important;
  }
}

/* 2. スマホ・タブレット縦向き（1023px以下）: ハンバーガーメニュー */
@media screen and (max-width: 1023px) {
  .header_nav {
    display: none !important; /* アイコンメニューを消す */
  }

  .btn_nav.pc_off {
    display: flex !important;
    order: 3 !important;
  }

  .header_user_actions {
    display: flex !important;
    order: 2 !important;
    margin-left: auto !important;
  }
}

/* タブレット (768px 〜 1024px) 専用のロゴ調整 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .header_logo img {
    height: 23px !important; /* タブレットの時はこのサイズ */
    width: auto !important;
  }

  /* タブレットでのメニュー余白調整（ロゴを小さくした分、余裕を持たせる） */
  .header {
    padding: 0 20px !important;
  }
}

/* ==================================================
   タブレット・iPad横向き補正パッチ (1025px - 1200px)
   重なりを解消し、ロゴとメニューの配置を安定させる
================================================== */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  /* メニューの間隔を少し詰めて、重なりを防ぐ */
  ul.header-icon-menu {
    gap: 20px !important;
  }

  /* 文字サイズをわずかに小さくして、1行に収まるようにする */
  ul.header-icon-menu li a {
    font-size: 10px !important;
    min-width: 50px !important;
  }

  /* ロゴのサイズを調整 */
  .header_logo img {
    height: 50px !important;
  }
}