/* ============================================
   ヘッダースタイル
   サイト共通のヘッダー部分のスタイル定義
   ============================================ */

/* ========================================
   ヘッダー基本設定
   ======================================== */

/* ヘッダー全体のスタイル */
.header {
  background: #fff; /* 白色背景 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 下側に影をつけて立体感を出す */
  position: fixed; /* 固定配置（常に画面上部に固定） */
  top: 0; /* 画面の一番上に固定 */
  left: 0; /* 左端から開始 */
  width: 100%; /* 幅を画面いっぱいに */
  height: 90px;
  z-index: 1001; /* 他の要素より前面に表示 */
}

/* ヘッダー内のコンテナ */
.header .container {
  display: flex; /* フレックスボックスで横並び */
  justify-content: space-between; /* 左右の要素を両端に配置 */
  align-items: center; /* 上下中央揃え */
  height: 100%;
}

/* ========================================
   ロゴエリア
   ======================================== */

/* ロゴの余白設定 */
.header .logo {
  padding-left: 20px; /* 左側に20pxの余白 */
}

/* ========================================
   ナビゲーションメニュー
   ======================================== */

/* ナビゲーション全体 */
.header nav {
  display: flex; /* フレックスボックスで横並び */
  height: 100%;
}

/* ナビゲーション内のリスト */
.header nav ul {
  display: flex; /* フレックスボックスで横並び */
  align-items: center; /* 上下中央揃え */
  list-style: none; /* リストマーカー（・）を消す */
}

/* グローバルメニュー（HOME〜会社概要） */
.header .globalMenu {
  gap: 40px; /* メニュー項目間の間隔 */
  padding-right: 40px; /* 右側の余白を多めに */
  padding-left: 20px;
  flex-wrap: wrap;
  align-content: center;
}

/* グローバルメニューのリンク */
.header .globalMenu > li > a {
  position: relative; /* 疑似要素の位置基準 */
  transition: color 0.3s ease; /* 色変化のアニメーション */
}

/* ホバー時の下線アニメーション用の疑似要素 */
.header .globalMenu > li > a::after {
  content: "";
  position: absolute; /* 絶対配置 */
  bottom: 0; /* 下端に配置 */
  left: 0; 
  width: 0; /* 初期幅0 */
  height: 2px; /* 下線の高さ */
  background: #007acc; /* 青色 */
  transition: width 0.3s ease, left 0.3s ease; /* 幅と位置のアニメーション */
}

/* ホバー時の文字色変更 */
.header .globalMenu > li > a:hover {
  color: #007acc; /* 青色 */
}

/* リニューアル工事メニューの下矢印（疑似要素） */
/* ホバー時に下線を中央から広げる */
.header .globalMenu > li > a span {
  position: relative;
  display: inline-block;
}

.header .globalMenu .header-menu-arrow {
  padding-right: 10px;
}

.header .globalMenu .header-menu-arrow span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-left: 1px solid #333;
  border-top: 1px solid #333;
  position: absolute;
  left: calc(100% + 5px);
  top: calc(50% - 2px);
  transform: translateY(-50%) rotate(225deg);
  transition: all 0.3s ease;
}
@media screen and (max-width: 1780px) {
  .header .globalMenu .header-menu-arrow span::before {
    width: 6px;
    height: 6px;
  }
}

.header .globalMenu .header-menu-arrow:hover span::before {
  border-left: 1px solid #007acc;
  border-top: 1px solid #007acc;
  top: calc(50% + 2px);
  transform: translateY(-50%) rotate(45deg);
}

/* ========================================
   サブメニュー（ドロップダウン）
   ======================================== */

/* サブメニューを持つ親要素 */
.header .globalMenu .has-submenu {
  position: relative; /* サブメニューの位置基準 */
}

/* サブメニュー本体（初期状態は非表示） */
.header .globalMenu .submenu {
  display: block;
  position: absolute; /* 親要素を基準に絶対配置 */
  top: 100%; /* 親メニューの直下に配置 */
  left: 50%; /* 左から50% */
  transform: translateX(-50%); /* 中央揃え */
  background: #fff; /* 白色背景 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 下に影をつけて浮き上がり効果 */
  min-width: 200px; /* 最小幅 */
  flex-direction: column; /* 縦並び */
  padding: 10px 0; /* 上下の内側余白 */
  border-radius: 4px; /* 角を少し丸く */
  z-index: 100; /* 前面に表示 */
  opacity: 0; /* 透明 */
  visibility: hidden; /* 非表示 */
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease; /* アニメーション */
}

/* ホバー時にサブメニューを表示 */
.header .globalMenu .has-submenu:hover .submenu {
  opacity: 1; /* 不透明に */
  visibility: visible; /* 表示 */
}

/* サブメニューのリスト項目 */
.header .globalMenu .submenu li {
  width: 100%;
}

/* サブメニューのリンク */
.header .globalMenu .submenu a {
  display: block; /* ブロック要素（クリック範囲を広く） */
  padding: 12px 20px; /* 内側の余白 */
  color: #333; /* 濃いグレー文字 */
  white-space: nowrap; /* 改行しない */
  transition: background 0.2s ease; /* ホバーアニメーション */
}

/* サブメニューリンクのホバー時 */
.header .globalMenu .submenu a:hover {
  background: #f5f5f5; /* 薄いグレー背景 */
  color: #007acc; /* 青色文字 */
}

/* ========================================
   ヘッダーボタン（資料請求・お問い合わせ）
   ======================================== */

/* ボタン共通のスタイル */
.header .buttonWrapper {
  height: 100%;
}

.header .buttonWrapper li {
  height: 100%;
}

.header .buttonWrapper .tell-button,
.header .buttonWrapper .contact-button {
  display: flex; /* フレックスボックスで配置 */
  flex-direction: column; /* 縦方向に並べる */
  align-items: center; /* 中央揃え */
  justify-content: center;
  width: 130px; /* ボタンの幅 */
  height: 100%; /* 高さを親要素に合わせる */
  color: white; /* 文字色を白に */
  padding: 3px 0; /* 上下の内側余白 */
}

.header .buttonWrapper .contact-button img {
  width: 52px;
  height: 52px;
}

/* 資料請求ボタン */
.header .buttonWrapper .tell-button {
  background: #ff7f32;
  border: 1px solid #ff7f32;
}

/* お問い合わせボタン */
.header .buttonWrapper .contact-button {
  background: #007acc;
  border: 1px solid #007acc;
}

/* 共通のトランジション */
.header .buttonWrapper .tell-button,
.header .buttonWrapper .contact-button {
  transition: background 0.3s ease, color 0.3s ease;
}

/* ホバー用アイコンの初期状態（非表示） */
.header .buttonWrapper .icon-hover {
  display: none;
}

/* 資料請求ボタンのホバー */
.header .buttonWrapper .tell-button:hover {
  background: #fff;
  color: #ff7f32;
}

.header .buttonWrapper .tell-button:hover .icon-white {
  display: none;
}

.header .buttonWrapper .tell-button:hover .icon-hover {
  display: block;
}

/* お問い合わせボタンのホバー */
.header .buttonWrapper .contact-button:hover {
  background: #fff;
  color: #007acc;
}

.header .buttonWrapper .contact-button:hover .icon-white {
  display: none;
}

.header .buttonWrapper .contact-button:hover .icon-hover {
  display: block;
}

/* ========================================
   ハンバーガーメニューボタン（スマホ用）
   ======================================== */

/* ハンバーガーメニューボタン本体 */
.header__menu-button {
  display: none; /* 初期状態では非表示 */
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  background: none; /* 背景なし */
  border: none; /* 枠線なし */
  cursor: pointer; /* クリック可能（指マーク） */
  position: relative; /* 子要素の位置基準 */
  z-index: 1002; /* 他の要素より前面に */
}

/* ハンバーガーメニューの3本線 */
.header__menu-button-line {
  display: block; /* ブロック要素として表示 */
  width: 25px; /* 線の幅 */
  height: 2px; /* 線の高さ */
  background: #333; /* 濃いグレー色 */
  margin: 0 auto; /* 左右中央配置 */
  position: absolute; /* 絶対位置指定 */
  left: 50%; /* 左から50% */
  transform: translateX(-50%); /* 中央配置の調整 */
  transition: all 0.3s ease; /* アニメーション効果 */
}

/* 1本目の線（上） */
.header__menu-button-line:nth-child(1) {
  top: 10px; /* 上から10px */
}

/* 2本目の線（中央） */
.header__menu-button-line:nth-child(2) {
  top: 50%; /* 上から50% */
  transform: translateX(-50%) translateY(-50%); /* 完全中央配置 */
}

/* 3本目の線（下） */
.header__menu-button-line:nth-child(3) {
  bottom: 10px; /* 下から10px */
}

/* メニューが開いた時の×マークアニメーション */
/* 1本目の線を斜めに */
.header__menu-button[aria-expanded="true"] .header__menu-button-line:nth-child(1) {
  top: 50%; /* 中央に移動 */
  transform: translateX(-50%) translateY(-50%) rotate(45deg); /* 45度回転 */
}

/* 2本目の線を消す */
.header__menu-button[aria-expanded="true"] .header__menu-button-line:nth-child(2) {
  opacity: 0; /* 透明にして見えなくする */
}

/* 3本目の線を逆斜めに */
.header__menu-button[aria-expanded="true"] .header__menu-button-line:nth-child(3) {
  bottom: 50%; /* 中央に移動 */
  transform: translateX(-50%) translateY(50%) rotate(-45deg); /* -45度回転 */
}

/* ========================================
   モバイルメニュー（スマホ用スライドメニュー）
   ======================================== */

/* モバイルメニュー全体 */
.mobile-menu {
  display: none; /* 初期状態は非表示 */
}

/* メニューが開いている時は表示 */
.mobile-menu[aria-hidden="false"] {
  display: block; /* ブロック表示 */
}

/* 背景の黒い半透明オーバーレイ */
.mobile-menu__overlay {
  position: fixed; /* 画面に固定 */
  top: 0; /* 上端から */
  left: 0; /* 左端から */
  width: 100%; /* 画面幅いっぱい */
  height: 100%; /* 画面高さいっぱい */
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  z-index: 998; /* メニュー本体より後ろに */
}

/* モバイルメニュー本体 */
.mobile-menu__content {
  position: fixed; /* 画面に固定 */
  top: 0; /* 上端から */
  right: 0; /* 右端から */
  width: 85%; /* 画面の85% */
  max-width: 300px; /* 最大幅300px */
  height: 100%; /* 画面高さいっぱい */
  background: #fff; /* 白色背景 */
  overflow-y: auto; /* 縦スクロール可能 */
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2); /* 左側に影 */
  z-index: 999; /* オーバーレイより前面に */
}

/* モバイルメニューの閉じるボタン */
.mobile-menu__close {
  position: absolute; /* 絶対位置指定 */
  top: 20px; /* 上から20px */
  right: 20px; /* 右から20px */
  width: 30px; /* ボタンの幅 */
  height: 30px; /* ボタンの高さ */
  background: none; /* 背景なし */
  border: none; /* 枠線なし */
  cursor: pointer; /* クリック可能 */
  z-index: 1; /* 前面に表示 */
}

/* 閉じるボタンの×マーク */
.mobile-menu__close-line {
  display: block; /* ブロック要素 */
  width: 25px; /* 線の幅 */
  height: 2px; /* 線の高さ */
  background: #333; /* 濃いグレー色 */
  position: absolute; /* 絶対位置指定 */
  left: 50%; /* 左から50% */
  top: 50%; /* 上から50% */
  transform-origin: center; /* 変形の中心点 */
}

/* ×マークの1本目（斜め） */
.mobile-menu__close-line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg); /* 45度回転 */
}

/* ×マークの2本目（逆斜め） */
.mobile-menu__close-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg); /* -45度回転 */
}

/* モバイルメニューのリスト */
.mobile-menu__list {
  padding: 80px 20px 20px; /* 上部に余白（閉じるボタンを避ける） */
}

/* リスト項目の下線 */
.mobile-menu__list li {
  border-bottom: 1px solid #eee; /* 薄いグレーの下線 */
}

/* リンクのスタイル */
.mobile-menu__list a {
  display: block; /* ブロック要素（クリック範囲を広く） */
  padding: 15px 10px; /* 内側の余白 */
  color: #333; /* 濃いグレー文字色 */
  font-size: 1.9rem;; /* 19px相当 */
  text-decoration: none; /* 下線なし */
}

/* リンクにマウスを乗せた時 */
.mobile-menu__list a:hover {
  background: #f5f5f5; /* 薄いグレー背景 */
}

/* ========================================
   モバイルサブメニュー（常に表示）
   ======================================== */

/* サブメニューを持つ親要素 */
.mobile-menu__list .has-submenu {
  border-bottom: none; /* 親の下線を消す */
}

/* サブメニューを持つ親のリンク */
.mobile-menu__list .has-submenu > a {
  border-bottom: 1px solid #eee; /* 親リンクに下線 */
}

/* モバイルサブメニュー本体（常に表示） */
.mobile-submenu {
  display: block; /* 常に表示 */
  padding-left: 15px; /* 左にインデント */
  background: #f9f9f9; /* 薄いグレー背景で区別 */
  border-bottom: 1px solid #eee; /* 下線 */
}

/* サブメニューのリスト項目 */
.mobile-submenu li {
  border-bottom: 1px solid #eee; /* 下線 */
}

/* サブメニューの最後の項目 */
.mobile-submenu li:last-child {
  border-bottom: none; /* 最後の項目は下線なし */
}

/* サブメニューのリンク */
.mobile-submenu a {
  display: block; /* ブロック要素 */
  padding: 12px 10px; /* 内側の余白 */
  color: #555; /* 少し薄いグレー文字 */
  font-size: 1.9rem; /* 19px相当（親より少し小さく） */
  text-decoration: none; /* 下線なし */
}

/* サブメニューリンクのホバー時 */
.mobile-submenu a:hover {
  background: #f0f0f0; /* 少し濃いグレー背景 */
  color: #007acc; /* 青色文字 */
}

/* モバイルメニュー内のボタンエリア */
.mobile-menu__buttons {
  padding: 20px; /* 内側の余白 */
  display: flex; /* フレックスボックス */
  flex-direction: column; /* 縦並び */
  gap: 15px; /* ボタン間の間隔 */
}

/* モバイルメニュー内のボタン共通 */
.mobile-menu__button {
  display: flex; /* フレックスボックス */
  align-items: center; /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え */
  gap: 10px; /* アイコンと文字の間隔 */
  padding: 15px; /* 内側の余白 */
  color: #fff; /* 白色文字 */
  text-decoration: none; /* 下線なし */
  border-radius: 5px; /* 角を少し丸く */
  font-size: 1.6rem; /* 16px相当 */
  font-weight: bold; /* 太字 */
}

/* ボタン内のアイコンサイズ */
.mobile-menu__button img {
  width: 25px; /* アイコン幅 */
  height: 25px; /* アイコン高さ */
}

/* 資料請求ボタン */
.mobile-menu__button--contact {
  background: #007acc; /* 青色背景 */
}

/* お問い合わせボタン */
.mobile-menu__button--tell {
  background: #ff7f32; /* オレンジ色背景 */
}

/* メニューが開いている時のスクロール防止 */
body.menu-open {
  overflow: hidden; /* スクロール無効化 */
}

/* ========================================
   レスポンシブデザイン（画面サイズ別の調整）
   ======================================== */

@media screen and (max-width: 1780px) {
  .header .globalMenu {
    gap: 10px 20px;
    justify-content: flex-end;
  }

  .header .globalMenu a {
    font-size: 1.4rem;
  }
}

/* デスクトップ小サイズ向け (1221px〜1500px) */
@media screen and (max-width: 1500px) and (min-width: 1221px) {
  /* ロゴを少し小さく */
  .header .logo img {
    max-width: 300px;
  }

  /* メニュー間隔を調整 */
  .header .globalMenu {
    padding-right: 30px;
    padding-left: 18px;
    font-size: 1.5rem; /* 15px相当 */
  }

  /* ボタンサイズを調整 */
  .header .buttonWrapper .tell-button,
  .header .buttonWrapper .contact-button {
    width: 120px;
    font-size: 1.4rem; /* 14px相当 */
  }
}

/* タブレット・スマートフォン向け (1220px以下) */
@media screen and (max-width: 1220px) {
  .header {
    height: 80px;
  }

  /* ヘッダーレイアウト調整 */
  .header .container {
    flex-direction: row; /* 横並びを維持 */
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* 内側の余白 */
  }

  .header .logo {
    padding: 0;
    flex: 1;
  }

  /* ロゴサイズ調整 */
  .header .logo img {
    max-width: 290px;
  }

  /* ハンバーガーメニューボタンを表示 */
  .header__menu-button {
    display: block;
  }

  /* 通常のナビゲーションを非表示 */
  .header .globalMenu {
    display: none;
  }

  .header .buttonWrapper {
    margin-right: 0;
    margin-left: 15px;
  }

  .header .buttonWrapper .contact-button,
  .header .buttonWrapper .tell-button {
    width: 110px;
  }

  .header .buttonWrapper .contact-button img,
  .header .buttonWrapper .tell-button img {
    width: 40px;
    height: 40px;
  }

  @media screen and (max-width: 768px) {
    .header {
      height: 70px;
    }

    .header .container {
      padding: 0 0 0 10px;
    }

    .header .logo img {
      width: 200px;
    }

    .header .buttonWrapper {
      margin-left: 10px;
    }

    .header .buttonWrapper .contact-button,
    .header .buttonWrapper .tell-button {
      width: 80px;
    }

    .header__menu-button {
      width: 50px;
      margin-left: 5px;
      padding: 0 15px;
    }

    .header__menu-button .header__menu-button-line {
      width: 20px;
    }
  }
  @media screen and (max-width: 480px) {
    .header .logo img {
      width: 150px;
    }

    .header .buttonWrapper .tell-button {
      width: 60px;
    }

    .header .buttonWrapper li:first-child {
      display: none;
    }
  }
}