/* --- ハンバーガーの配置 --- */
.menu-header {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
}

.menu-toggle {
    display: none;
}

.hamburger {
    display: inline-block;
    cursor: pointer;
    width: 40px;
    height: 32px;
    position: relative;
    z-index: 10000;
    
    /* 背景をタワレコカラーの黄色/金に */
    background-color: var(--tawareco-yellow);
    
    border-radius: 5px;
    padding: 10px 10px;
    
    /* 枠線を太い黒に変更 */
    border: 3px solid var(--tawareco-black);
    
    /* 影を黒と赤のオフセットシャドウに */
    box-shadow: 4px 4px 0px var(--tawareco-red);
    
    transition: all 0.2s ease-out;
}

.hamburger:hover {
    /* ホバーで色を反転 */
    background-color: var(--tawareco-red); 
    /* 影と位置を調整して「押された」感を出す */
    box-shadow: 2px 2px 0px var(--tawareco-black);
    transform: translate(2px, 2px);
}

.hamburger .bar {
    display: block;
    width: 100%;
    height: 4px; /* バーを太く */
    margin: 5px 0; /* マージンを調整 */
    
    /* バーの色を黒に */
    background-color: var(--tawareco-black);
    
    border-radius: 3px;
    transition: 0.3s;
}

/* --- アニメーション時のバーの色はそのまま（黒）を維持 --- */
.menu-toggle:checked + .hamburger .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle:checked + .hamburger .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle:checked + .hamburger .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* --- メニューパネル --- */
.menu-panel {
    position: fixed;
    top: 60px;
    right: 16px;
    
    /* 背景を白の単色に */
    background: var(--tawareco-white);
    /* ブラーを削除 */
    backdrop-filter: none;
    
    border-radius: 8px;
    
    /* 太い赤のボーダー */
    border: 3px solid var(--tawareco-red);
    
    /* 影をシンプルに */
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    
    padding: 12px 0;
    width: 220px; /* 幅を少し広げる */
    
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    pointer-events: none;
    transition: all 0.3s ease-out; /* トランジションをシンプルに */
    
    font-family: 'Luckiest Guy', 'Arial Black', 'Impact', sans-serif;
}

.menu-toggle:checked ~ .menu-panel {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.menu-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-panel li {
    /* 区切り線を細い黒に */
    border-bottom: 1px solid var(--tawareco-black);
}

.menu-panel li:last-child {
    border-bottom: none;
}

.menu-panel a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text-color); /* 文字色を黒に */
    transition: 0.2s;
    position: relative;
    overflow: hidden;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ホバー時の背景グラデーションを削除 */
.menu-panel a::before {
    content: none;
}

.menu-panel a:hover {
    /* ホバーで色を反転（赤背景に黄色文字） */
    background: var(--tawareco-red);
    color: var(--tawareco-yellow);
    /* translateXを削除し、シンプルに */
    transform: none; 
}

/* --- モバイル対応 --- */
@media (max-width: 600px) {
    .menu-header {
        top: 12px;
        right: 12px;
    }

    .hamburger {
        width: 36px;
        height: 28px;
        border-width: 2px;
    }

    .hamburger .bar {
        height: 3px;
        margin: 4px 0;
    }

    .menu-panel {
        top: 55px;
        right: 12px;
        width: 180px;
        font-size: 0.9rem;
    }
}