@charset "utf-8";

/* ====================================
   ヘッダー全体の大枠
   ==================================== */
.header {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee; /* うっすら下線（不要なら削除OK） */
}

/* 左右に振り分ける魔法のコンテナ */
.header-container {
  display: flex;
  justify-content: space-between; /* ロゴは左端、メニュー群は右端に配置 */
  align-items: center;            /* 縦の高さを真ん中で揃える */
/*  padding: 10px 5%;               /* 上下10px、左右に5%の余白 */
  max-width: 1200px;              /* PCで広がりすぎないように制限 */
  margin: 0 auto;
}

/* ====================================
   左側：ロゴ（画像への対応）
   ==================================== */
/* ❌ 前回のテキスト用設定は削除 
.header-logo a {
  color: #000;
  text-decoration: none;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: 0.05em;
}
*/

/* ⭕️ 画像ロゴ用の設定を追加 */
.logo-image {
  /* 画像の高さで全体のサイズを調整するのがおすすめです */
  height: 20px;
  width: auto;   /* 横幅は自動計算で比率を保つ */
  display: block; /* 下にできる謎の隙間を防ぐ */
}

/* スマホなどでロゴを少し小さくしたい場合の調整（任意） */
@media screen and (min-width: 768px) {
  .logo-image {
    height: 40px; /* スマホでは少し小さく */
  }
}

/* ====================================
   右側全体のグループ（SNS群 ＋ ハンバーガー）
   ==================================== */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* ★右端にギュッと詰める */
/*  gap: 20px; /* ★SNSグループとハンバーガーの隙間*/
}

.header-sns-group {
  display: flex;
  align-items: center;
  gap: 10px; /* ★InstagramとXの間の隙間 */
}

/* ====================================
   新設：SNSアイコン専用のグループ
   ==================================== */
.header-sns-group {
  display: flex;
  align-items: center;
  gap: 12px; /* ★SNSアイコン同士の隙間（3つ4つと増えても、自動でこの間隔で横並びになります） */
}

/* SNSアイコン画像のサイズ設定（前回と同じ） */
.sns-icon {
  height: 50px; 
  width: auto; 
  object-fit: contain;
  transition: opacity 0.3s; /* おまけ：マウスを乗せた時にフワッとする準備 */
}

/* おまけ：マウスを乗せた時に少しだけ透明にして「押せる感」を出す */
.sns-icon:hover {
  opacity: 0.7;
}

/* ====================================
   ハンバーガーメニュー（CSSで描画）
   ==================================== */
.hamburger-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;    
  padding: 0;
  margin-left: 5px;       
  width: 50px;            /* ★追加：ボタン自体の幅をSNSアイコン(50px)に合わせる */
  position: relative;
  z-index: 10000; 
}

/* 三本線の設定 */
.hamburger-line {
  display: block;
  width: 44px;            /* ★線の長さをSNSの幅に近づけて力強く */
  height: 5px;            /* ★線の太さ */
  background-color: #000; 
  margin-bottom: 6px;     /* ★線と線の隙間 */
  border-radius: 2px;     /* ★おまけ：少し角を丸くするとSNSのアイコンと馴染みます */
  transition: all 0.3s ease; 
}

/* メニューという文字の設定 */
.hamburger-text {
  font-size: 11px;        /* ★44pxの幅に綺麗に収まるサイズに */
  font-weight: bold;
  color: #000;
}

/* ====================================
   ハンバーガーボタンの動き（✕に変化）
   ==================================== */
/* --- 線の隙間（margin）を変えたので、移動する距離（translateY）も再計算します --- */

/* 1本目の線：下に移動して45度回転 (高さ5px + 隙間6px = 11px移動) */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

/* 2本目の線：透明になって消える */
.hamburger-btn.is-active .hamburger-line:nth-child(2) {
  opacity: 0; 
}

/* 3本目の線：上に移動してマイナス45度回転 */
.hamburger-btn.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* 「メニュー」の文字も消す */
.hamburger-btn.is-active .hamburger-text {
  opacity: 0;
}


/* ====================================
   フルスクリーンメニュー（オーバーレイ）
   ==================================== */
.menu-overlay {
  position: fixed; /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(60, 60, 60, 0.9); /* ★薄い透過グレー */
  z-index: 9999; /* ヘッダーやボタンの下、コンテンツの上に配置 */
  
  /* 初期状態は「透明」で「非表示」 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease; /* ふわっと表示させる魔法 */
  
  /* 中身をど真ん中に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* メニューが開いた状態（.is-activeがつく） */
.menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* メニューの中身のデザイン */
.menu-inner {
  text-align: center;
}
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list li {
  margin-bottom: 30px; /* リンク同士の縦の隙間 */
}
.menu-list a {
  color: #fff; /* 背景がグレーなので白文字が見やすいです */
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: 0.3s;
}
.menu-list a:hover {
  color: #a5d6a7; /* マウスを乗せた時の色 */
}

/* 下部の「閉じる」ボタン */
.menu-close-btn {
  margin-top: 50px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 40px;
  border-radius: 30px; /* 角丸ボタン */
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}
.menu-close-btn:hover {
  background: #fff;
  color: #333;
}