/* ===========================
   ハンバーガー（SP用）
=========================== */
.sp-menu-btn {
    display: none; /* SPで表示 */
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 9999;
}

/* 金色 or 朱色を選択 */
:root {
    --accent: #d4af37; /* 金色 */
    /* --accent: #d9534f; 朱色にしたい場合はこっち */
}

.sp-menu-btn span {
    width: 28px;
    height: 3px;
    background: var(--accent);
    border-radius: 3px;
    transition: 0.4s;
}

/* ハンバーガー → × に変形 */
.sp-menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.sp-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.sp-menu-btn.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ===========================
   スマホメニュー（右からスライドイン）
=========================== */
.sp-nav {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    width: 70%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    padding: 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transform: translateX(100%);
    transition: 0.4s ease;
}

.sp-nav.open {
    display: block;
    transform: translateX(0);
}

.sp-nav ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sp-nav a {
    color: var(--accent);
    font-size: 1.2rem;
}