@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: 40px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 三本線の各線 */
.hamburger-icon span {
  display: block;
  width: 100%;
  height: 3px;
  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(13px) rotate(45deg);
}
.menu-button.open .hamburger-icon span:nth-child(2) {
  opacity: 0; /* 真ん中の線を消す */
}
.menu-button.open .hamburger-icon span:nth-child(3) {
  transform: translateY(-12px) 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, 251, 220, 0.97);
  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: 18px;
  color: #333;
  font-weight: bold;
}


/* スクロール無効 */
body.no-scroll {
  overflow: hidden;
}
/* ドロワーの中身 */
.nav-wrap01{
  width: 95%;
  max-width: 600px;
  margin: auto;
}
.nav-wrap01 li{
  line-height: 3em;
  margin: 1em auto;
}
.nav-wrap01 li.totop-logo{
	max-width: 250px;
  width: 60vw;
	margin-top: 5em;
}
.nav-wrap01 li a{
  position: relative;
}
/* 下線の土台 */
.nav-wrap01 li a::after {
  content: '';
  position: absolute;
  left: -5%;
  bottom: -10px; /* 文字からの距離 */
  width: 110%;
  height: 3px;    /* 線の太さ */
  background-color: #f9c15f; /* 線の色 */
  
  /* アニメーションの設定 */
  transform: scaleX(0);      /* 最初は長さを0に */
  transform-origin: left;   /* 右端を起点にする */
  transition: transform 0.3s ease; /* 変化の速度 */
}

/* ホバー時の動き */
.nav-wrap01 li a:hover::after {
  transform: scaleX(1);      /* 長さを100%に伸ばす */
}

.nav-wrap01 li.totop-logo a:after{
	content: none;
}
@media screen and (max-width: 540px) {

/* 三本線の外枠 */
.hamburger-icon {
  width: 32px;
  height: 25px;
}
/* openクラスがついた時の三本線の動き */
.menu-button.open .hamburger-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.menu-button.open .hamburger-icon span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

}

/* //////////////////////////////////////////////////////////////////////////////// PC //////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 769px) {
  .nav-container a {
      font-size: 1.2rem;
    }
}
/* //////////////////////////////////////////////////////////////////////////////// PC 1280以上 //////////////////////////////////////////////////////////////////////////////// */