/* header.css（子テーマ） */

/* リセット系（必要に応じて調整） */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --primary-blue: #0c99ba;
  --primary-blue-lt: #66c2e0; /* #0c99ba を20～30%ほどライトニング */

  --bg: #FFFAE8; /* 使用中 */
  --timetable-item: #fff8e0; /* 使用中 */
  --tab-active: #FFF8E0; /* 使用中 */
  --tab-hi-active: #ffffff; /* 使用中 */
  --tab-active-kaso: #FFC400; /* 使用中 */
  --gradient-tabnaka: linear-gradient(to bottom, #FFF8E0 0%, #FFCA9D 100%); /* 使用中 */
  --gradient-tabnaka-kaso: linear-gradient(to bottom, #FFCE00 0%, #FF860D 100%); /* 使用中 */
  --gradient-syuzai-media: linear-gradient(to bottom, #FFCE00 0%, #FF860D 100%); /* 使用中 */
  --gradient-tabwaku: linear-gradient(to bottom, #FFCE00 0%, #FF860D 100%); /* 使用中 */
  --gradient-footer: linear-gradient(to bottom, #FFCE00 0%, #FF860D 100%); /* 使用中 */ 

  /* ヘッダーの高さを変数で持っておく */
  --header-height: 80px;
}  

.site-header {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  z-index:1100; /* メニューより上にしておく */
}

/* ロゴ */
.header-logos { 
  display:flex; align-items:center; gap:15px; 
}

.header-logo { 
  height: 95px; /* 例として高さを95pxに固定 */
  object-fit: contain; /* アスペクト比を維持しつつ要素内に収める */
}

/* 個別のロゴサイズ指定 */
.yogafest-logo {
  width: calc(95px * (196 / 190)); /* 高さに合わせて幅を計算 */
  object-fit: contain; /* アスペクト比を維持しつつ要素内に収める */
}

.genkifes-logo {
  width: calc(95px * (236 / 190)); /* 高さに合わせて幅を計算 */
  object-fit: contain; /* アスペクト比を維持しつつ要素内に収める */
}

/* ナビ（デスクトップ） */
.main-navigation {
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.main-navigation .main-menu {
  list-style:none;
  display:flex;
  gap:50px;
  margin-right: 50px;
}
.main-navigation .main-menu li a {
  color:#000;
  text-decoration:none;
  font-weight:bold;
  font-size:22px;
}

/* ヨガ予約ボタン */
.yoga-reserve-button {
  background:#fff;
  color:#000 !important;
  padding:5px 50px;
  border:4px solid #ff9900;
  border-radius:50px;
  text-decoration:none;
  font-weight:bold;
  font-size: 23px;
  margin-right: 40px;
}

.yoga-reserve-button:hover {
  background-color: #ff9900;
  color: #000;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}


/* ハンバーガー（基本は非表示）*/
.menu-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  margin-left:20px;
  z-index:1101; /* ヘッダーより上 */
}
.menu-toggle .burger-icon {
  display:block;
  width:30px;
  height:3px;
  background:#000;
  position:relative;
}
.menu-toggle .burger-icon::before,
.menu-toggle .burger-icon::after {
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:100%;
  background:#000;
}
.menu-toggle .burger-icon::before { top:-10px; }
.menu-toggle .burger-icon::after { top:10px; }

.menu-toggle[aria-expanded="true"] .burger-icon { background:transparent; }
.menu-toggle[aria-expanded="true"] .burger-icon::before { transform:rotate(45deg); top:0; }
.menu-toggle[aria-expanded="true"] .burger-icon::after  { transform:rotate(-45deg); top:0; }

/* --- モバイルのルール --- */
@media (max-width: 1024px) {
  .site-header { padding:15px 20px; }

  /* ハンバーガーを表示 */
  .menu-toggle { display:block; }

  /* オーバーレイ（初期は非表示） */
  .menu-overlay {
    display:none;
  }

  /* nav が .menu-open のときにオーバーレイとメニューを出す */
  .main-navigation.menu-open .menu-overlay {
    display:block;
    position:fixed;
    inset:0; /* top:0; left:0; right:0; bottom:0; */
    background: rgba(0,0,0,0.6);
    z-index:1090; /* ヘッダーより下に */
  }

  /* スライドメニュー（右側パネル） */
  .main-navigation .main-menu-container .main-menu {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    right:0;
    width:280px;
    height:100vh;
    background:#fff;
    padding:80px 20px 20px;
    gap:20px;
    transform: translateX(100%); /* 初期は画面外 */
    transition: transform 0.32s ease;
    z-index:1091;
    box-shadow: -4px 0 12px rgba(0,0,0,0.12);
    margin-right: 0;
  }

  /* open状態でスライドイン */
  .main-navigation.menu-open .main-menu-container .main-menu {
    transform: translateX(0);
  }

  /* メニュー内のリンク */
  .main-navigation .main-menu-container .main-menu li a {
    font-size:18px;
    color:#000;
    display:block;
    padding:8px 0;
  }

  /* menu-open 時にヨガ予約ボタンもメニュー内表示 */
  .main-navigation.menu-open .main-menu-extra .yoga-reserve-button {
    display:block;
    margin-top:20px;
    width:100%;
    text-align:center;
    background:#ff9900;
    color:#fff;
    border:none;
    padding:14px 0;
  }

  /* 背景スクロール防止のユーティリティ */
  body.no-scroll {
    /* overflow: hidden; */
    touch-action: none;
  }
}

@media (max-width: 414px) {
  /* モバイルでのロゴの高さも個別に調整 */
  .yogafest-logo,
  .genkifes-logo { 
    height: 60px; /* モバイルでの共通の高さ */
    width: auto; /* 幅は自動調整 */
  }
  .yogafest-logo {
    width: calc(60px * (196 / 190)); /* 高さ60pxに合わせた幅 */
  }
  .genkifes-logo {
    width: calc(60px * (236 / 190)); /* 高さ60pxに合わせた幅 */
  }
  
  .yoga-reserve-button {
    padding:5px 40px;
    border:2px solid #ff9900;
    font-size: 12px;
    margin-right: 5px;
  }  
}

@media (max-width: 375px) {
  .yoga-reserve-button {
    padding:2px 25px;
    border:2px solid #ff9900;
    font-size: 11px;
    margin-right: 0px;
  }  
}


/* スクロール時のヘッダーのスタイル */
.site-header.scrolled-header {
  background-color: rgba(255, 255, 255, 0.95); /* 白色の背景（透過度95%） */
  position: fixed; /* スクロール時に固定 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 軽い影を追加 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* スムーズな変化 */
}

/* モバイルメニューが開いている時に背景色が重なるのを防ぐ */
@media (max-width: 1024px) {
  .main-navigation.menu-open .main-menu-container .main-menu {
    background: #fff; /* モバイルメニューの背景色は常に白に保つ */
  }
}