/* スムーズスクロールの設定 */
html {
  scroll-behavior: smooth;
}

/* ヘッダーの高さ分、ページ内リンクのジャンプ位置をずらす */
#instructors,
#schedule {
  scroll-margin-top: 80px; 
}

/* カスタムスクロールバー（お好みで） */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f7f7f7; 
}
::-webkit-scrollbar-thumb {
  background: #14c3dc; 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0097ad; 
}

/* =========================================
   スマホ専用ハンバーガー ＆ ドロワーメニュー（ピンクエフェクト）
========================================= */
/* スマホ専用のハンバーガーボタン */
.hamburger {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 20px; position: relative; z-index: 2001; 
  outline: none; margin-left: auto;
}

/* 通常時はグラデーションのキラキラ美しいピンク */
.hamburger span {
  position: absolute; right: 0; width: 100%; height: 3px; border-radius: 3px;
  /* 美しいピンクのグラデーション */
  background: linear-gradient(135deg, #ff7eb3 0%, #fff0f5 40%, #ff65a3 60%, #ff1493 100%);
  background-size: 200% auto;
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.6); 
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  animation: shinePink 3s linear infinite; 
}
@keyframes shinePink { to { background-position: 200% center; } }

.hamburger span:nth-child(1) { top: 0; width: 100%; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 75%; }
.hamburger span:nth-child(3) { bottom: 0; width: 100%; }

/* メニューが開いた時のバツ印（視認性の高い単色ピンクへ） */
.hamburger.is-active span {
  background: #ff65a3; box-shadow: none; animation: none;
}
.hamburger.is-active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); width: 100%; }
.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.hamburger.is-active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); width: 100%; }

/* スマホ専用 ドロワーメニュー（ベージュのすりガラス背景） */
.drawer {
  display: flex; flex-direction: column; position: fixed; inset: 0;
  background: rgba(253, 248, 237, 0.9); /* 肌なじみの良いベージュの半透過 */
  backdrop-filter: blur(12px); /* 背景を美しくぼかす */
  z-index: 2000; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
}

/* 背景に浮かぶピンクの光のエフェクト */
.drawer::before, .drawer::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(60px); z-index: -1; opacity: 0;
  transition: opacity 1s ease 0.5s;
}
.drawer::before {
  width: 250px; height: 250px; background: rgba(255, 105, 180, 0.2); 
  top: -50px; left: -50px; animation: floatPink1 8s infinite alternate ease-in-out;
}
.drawer::after {
  width: 200px; height: 200px; background: rgba(255, 20, 147, 0.15); 
  bottom: 0px; right: -50px; animation: floatPink2 10s infinite alternate ease-in-out;
}
.drawer.is-active::before, .drawer.is-active::after { opacity: 1; }

@keyframes floatPink1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 40px) scale(1.1); } }
@keyframes floatPink2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, -40px) scale(1.2); } }

.drawer.is-active { opacity: 1; visibility: visible; }

.drawer__list { text-align: center; width: 100%; padding: 0; margin: 0; list-style: none; }
.drawer__list li {
  margin-bottom: 30px; opacity: 0; transform: translateY(20px);
  transition: all 0.5s ease;
}
/* 順番に浮かび上がる演出 */
.drawer.is-active .drawer__list li { opacity: 1; transform: translateY(0); }
.drawer.is-active .drawer__list li:nth-child(1) { transition-delay: 0.2s; }
.drawer.is-active .drawer__list li:nth-child(2) { transition-delay: 0.3s; }
.drawer.is-active .drawer__list li:nth-child(3) { transition-delay: 0.4s; }

/* リンク文字 */
.drawer__list a {
  font-size: 1.4rem; font-weight: bold; color: #373e42;
  text-decoration: none; display: block; padding: 10px;
}

/* 閉じるボタン */
.drawer__close-btn {
  font-size: 1rem; color: #ff65a3; font-weight: bold;
  border: 2px solid #ff65a3; padding: 12px 40px;
  border-radius: 50px; background: #ffffff;
  margin-top: 20px; cursor: pointer; transition: 0.3s;
}

    /* =========================================
       スマホ専用ハンバーガー ＆ ドロワーメニュー（ピンクエフェクト）
    ========================================= */
    /* スマホ専用のハンバーガーボタン */
    .hamburger {
      background: transparent; border: none; cursor: pointer;
      width: 32px; height: 20px; position: relative; z-index: 2001; 
      outline: none; margin-left: auto;
    }

    /* 通常時はグラデーションのキラキラ美しいピンク */
    .hamburger span {
      position: absolute; right: 0; width: 100%; height: 3px; border-radius: 3px;
      /* 美しいピンクのグラデーション */
      background: linear-gradient(135deg, #ff7eb3 0%, #fff0f5 40%, #ff65a3 60%, #ff1493 100%);
      background-size: 200% auto;
      box-shadow: 0 0 6px rgba(255, 105, 180, 0.6); 
      transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      animation: shinePink 3s linear infinite; 
    }
    @keyframes shinePink { to { background-position: 200% center; } }

    .hamburger span:nth-child(1) { top: 0; width: 100%; }
    .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 75%; }
    .hamburger span:nth-child(3) { bottom: 0; width: 100%; }

    /* メニューが開いた時のバツ印（視認性の高い単色ピンクへ） */
    .hamburger.is-active span {
      background: #ff65a3; box-shadow: none; animation: none;
    }
    .hamburger.is-active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); width: 100%; }
    .hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
    .hamburger.is-active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); width: 100%; }

    /* スマホ専用 ドロワーメニュー（ベージュのすりガラス背景） */
    .drawer {
      display: flex; flex-direction: column; position: fixed; inset: 0;
      background: rgba(253, 248, 237, 0.9); /* 肌なじみの良いベージュの半透過 */
      backdrop-filter: blur(12px); /* 背景を美しくぼかす */
      z-index: 2000; justify-content: center; align-items: center;
      opacity: 0; visibility: hidden;
      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      overflow: hidden;
    }

    /* 背景に浮かぶピンクの光のエフェクト */
    .drawer::before, .drawer::after {
      content: ''; position: absolute; border-radius: 50%;
      filter: blur(60px); z-index: -1; opacity: 0;
      transition: opacity 1s ease 0.5s;
    }
    .drawer::before {
      width: 250px; height: 250px; background: rgba(255, 105, 180, 0.2); 
      top: -50px; left: -50px; animation: floatPink1 8s infinite alternate ease-in-out;
    }
    .drawer::after {
      width: 200px; height: 200px; background: rgba(255, 20, 147, 0.15); 
      bottom: 0px; right: -50px; animation: floatPink2 10s infinite alternate ease-in-out;
    }
    .drawer.is-active::before, .drawer.is-active::after { opacity: 1; }

    @keyframes floatPink1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 40px) scale(1.1); } }
    @keyframes floatPink2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, -40px) scale(1.2); } }

    .drawer.is-active { opacity: 1; visibility: visible; }

    .drawer__list { text-align: center; width: 100%; padding: 0; margin: 0; list-style: none; }
    .drawer__list li {
      margin-bottom: 30px; opacity: 0; transform: translateY(20px);
      transition: all 0.5s ease;
    }
    /* 順番に浮かび上がる演出 */
    .drawer.is-active .drawer__list li { opacity: 1; transform: translateY(0); }
    .drawer.is-active .drawer__list li:nth-child(1) { transition-delay: 0.2s; }
    .drawer.is-active .drawer__list li:nth-child(2) { transition-delay: 0.3s; }
    .drawer.is-active .drawer__list li:nth-child(3) { transition-delay: 0.4s; }

    /* リンク文字 */
    .drawer__list a {
      font-size: 1.4rem; font-weight: bold; color: #373e42;
      text-decoration: none; display: block; padding: 10px;
    }

    /* 閉じるボタン */
    .drawer__close-btn {
      font-size: 1rem; color: #ff65a3; font-weight: bold;
      border: 2px solid #ff65a3; padding: 12px 40px;
      border-radius: 50px; background: #ffffff;
      margin-top: 20px; cursor: pointer; transition: 0.3s;
    }

 /* =========================================
       スマホ用ヘッダーのスクロール表示アニメーション
    ========================================= */
    @media (max-width: 639px) {
      #js-header {
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.5s ease, opacity 0.5s ease;
      }
      #js-header.is-scrolled {
        transform: translateY(0);
        opacity: 1;
      }
    }