.line {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* メニューが開いた時のアニメーション */
.hamburger-button.open .line:nth-child(1) {
    background-color: black;
    transform: translateY(6px) rotate(45deg);
}

.hamburger-button.open .line:nth-child(2) {
    background-color: black;
    opacity: 0;
}

.hamburger-button.open .line:nth-child(3) {
    background-color: black;
    transform: translateY(-5px) rotate(-45deg);
}

.mobile-menu {
    position: fixed; /* 画面全体に固定 */
    top: 0;
    right: 0;
    width: 100%; /* メニューの幅 (調整可能) */
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 20; /* ヘッダーより奥に配置 */
    transform: translateX(100%); /* 初期状態では右に隠しておく */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0; /* 初期状態では透明 */
}

.mobile-menu.open {
    transform: translateX(0); /* 表示 */
    opacity: 1;
}

/* スクロールロック用のCSS */
body.no-scroll {
    overflow: hidden; /* スクロールバーを非表示にし、スクロールを無効にする */
    position: fixed; /* iOSでoverflow: hiddenが効かない場合への対応策（任意） */
    width: 100%; /* position: fixed; と合わせて幅が崩れないようにする */
    height: 100vh; /* position: fixed; と合わせて高さをビューポートに合わせる */
}