@charset "utf-8";

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #000000;
}

/* 上部のグレーの帯 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #737373;
  color: white;
  padding: 0 40px;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
/* 左上会社ロゴ */
.logo img {
  height: 50px;
  display: block;
}
/* 右からスライドインするメニューのコンテナ */
.menu-container {
  display: flex;
  align-items: center;
  color: white;
}
/* 右上のメニューボタン(バーガーボタン) */
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
  background: none;
  color: #ffffff;
  border: none;
  right: 38px;
  cursor: pointer;
  padding: 0;
}
/* 右上のメニューとクローズボタンの文字 */
.menu-label,
.close-label {
  font-size: 0.5em;
  line-height: 1;
}
/* 右上のメニューボタン(バーガーボタン)クローズボタン(バツ印)のサイズ */
.menu-icon i,
.close-icon i {
  font-size: 1.5em;
}
/* 右からスライドインするメニューの背景 */
.nav {
  position: fixed;
  top: 0;
  right: -180px; /* 初期は画面外 */
  width: 180px;
  height: 100%;
  background: #737373;
  transition: right 0.3s ease;
  z-index: 999;
}
.nav.open {
  right: 0; /* スライドイン */
}
/* 右上のクローズボタン(バツ印) */
.close-btn {
  display: flex;
  font-size: 1.2em;
  position: absolute;
  top: 14px;
  right: 38px;
  cursor: pointer;
  color: white;
  flex-direction: column;
  align-items: center;
}
/* 右からスライドインするメニュー文字のサイズと位置 */
.nav ul {
  list-style: none;
  padding: 20px;
  margin-top: 40px;     /* 上から下げる */
  font-size: 0.9em;     /* 文字サイズを指定 */
  line-height: 1;  /* ← 行間をフォントサイズと同じに */
}

.nav li {
  margin: 14px 0;
}
/* 右からスライドインするメニュー文字のサイズと色 */
.nav a {
  text-decoration: none;
  color: #ffffff;
  font-size: 0.9em;
  transition: color 0.5s ease;
}
/* 右からスライドインするメニュー文字のマウスオン時の色 */
.nav a:hover {
  color: #312c8a;
}
nav ul li.thisPage a {
  pointer-events: none;
  color: #312c8a;
}
/* SNS アイコンエリアをナビのレイアウトから独立させる */
.social-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* ← 左側に揃える */
  gap: 14px;
  padding: 0 0 0 20px;      /* ← ul と位置合わせ */
  margin-top: -36px;         /* ← メニュー項目から少し下げる */
  width: auto;              /* ← ここが超重要 */
}

/* SNS アイコンの a の hover の反応範囲をアイコン部分だけにする */
.social-icons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;   /* ← 幅の強制解除（肝） */
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none;
  color: #ffffff;
  line-height: 1;
  cursor: pointer;
}

/* hover は i だけ変化 */
.social-icons a i {
  transition: color 0.3s ease;
}

.social-icons a:hover i {
  color: #312c8a;
}

/* 背景オーバーレイ（最初は非表示） */
#menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.55); /* 半透明黒 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 900; /* nav より下、header より上 */
}

/* メニューが開いたとき有効化 */
#menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* メニューの背後にくる透明クリック領域 */
#nav-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent; /* 透明 */
  pointer-events: none; /* クリック無効 → 初期状態 */
  z-index: 800; /* nav より低く、ヘッダーより上 */
}

/* メニューが開いたときだけクリック有効にする */
#nav.open + #nav-bg {
  pointer-events: auto;
}

/* レスポンシブ ------------------ */

@media screen and (max-width: 732px) {
.header {
  padding: 0 20px;
}

.close-btn {
  right: 20px;
}
}