@charset "UTF-8";
.menu-button {
  z-index: 1001; /* nav(999)より大きくして、常に一番上に */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;    /* 中央揃え */
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 10px 10px;
}
/* 三本線の外枠 */
.hamburger-icon {
  width: 34px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 三本線の各線 */
.hamburger-icon span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #333; /* 線の色 */
  margin-bottom: 2px;
}
/* 下の「MENU」テキスト */
.menu-text {
  font-size: 8px;       /* 小さめに設定 */
  font-weight: 900;
  color: #333;
}
/* openクラスがついた時の三本線の動き */
.menu-button.open .hamburger-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-button.open .hamburger-icon span:nth-child(2) {
  opacity: 0; /* 真ん中の線を消す */
}
.menu-button.open .hamburger-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
/* アニメーションを滑らかにする設定（spanに追加） */
.hamburger-icon span {
  transition: all 0.3s ease;
}
/* メニューの初期状態（右に隠す） */
.nav-container {
  position: fixed;
  top: 0;
  right: -100%; /* 画面の右端に完全に隠す */
  width: 100%;    /* メニューの幅 */
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  transition: right 0.4s ease; /* スライドのアニメーション */
  z-index: 999;  /* ボタンより下に、コンテンツより上に */
  padding-top: 100px;
}
/* ボタンが押された時の状態 */
.nav-container.open {
  right: 0; /* 画面内に戻す */
}
/* メニュー内のリストスタイル */
.nav-container ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
.nav-container a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
}
/* スクロール無効 */
body.no-scroll {
  overflow: hidden;
}


/* ドロワーの中身 */
.nav-wrap01{
  width: calc(668vw / 7.68);
  max-width: 334px;
  margin: auto;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav-wrap01 li{
  width: calc(320vw / 7.68);
  max-width: 160px;
  margin-bottom:min(calc(50vw / 7.68),50px);
  line-height: 1;
}
.nav-wrap02 {
  width: calc(600vw / 7.68);
  max-width: 300px;
  margin:min(25px,calc(50vw / 7.68)) auto min(20px,calc(40vw / 7.68)) ;
  line-height: 1;
}
.nav-wrap03{
    width: calc(600vw / 7.68);
    max-width: 300px;
  margin: auto;
}
.nav-wrap03 p{
  font-size:min(16px,calc(32vw / 7.68));
  color: #ff2e60;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.8em;
}
.nav-wrap03 .flex{
  justify-content: center;
  gap:min(18px,calc(36vw / 7.68));

}
.nav-wrapimg{
    width: calc(200vw / 7.68);
    max-width: 100px;
}
.nav-wraplink{
    width: calc(270vw / 7.68);
    max-width: 135px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
.nav-wraplink p {
  line-height: 1;
  margin-bottom: 0.5em;
  margin-top: 0.3em;
}

/* //////////////////////////////////////////////////////////////////////////////// PC //////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 769px) {
	#menu-btn{
    display: none;
  }
}
/* //////////////////////////////////////////////////////////////////////////////// PC 1280以上 //////////////////////////////////////////////////////////////////////////////// */