@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   Utility
   ========================================= */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

h1 {
    line-height: 1.3 !important;
}

.p-lr {
    padding: 0.3rem 1.2rem !important;
}

/* =========================================
   Logo & Credits
   ========================================= */
.logo {
    max-width: 50%;
    text-align: center;
    margin: 0 auto;
}

.f-logo {
    max-width: 40%;
}

.credit {
    max-width: 80%;
}

/* =========================================
   Menu Styles & Animations
   ========================================= */
/* 共通のメニュースタイル */
.menu-content {
    background-color: rgba(255, 167, 95, 0.95); /* 通常モード: 明るいオレンジ */
    backdrop-filter: blur(8px);
    /* background-colorのトランジションを追加してスムーズに切り替える */
    transition: clip-path 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.5s, background-color 0.3s, opacity 0.4s;
    visibility: hidden;
    opacity: 0;
}

/* ダークモード時のメニュー背景色 (#ea8600 = 234, 134, 0) */
html.dark .menu-content {
    background-color: rgba(234, 134, 0, 0.95);
}

/* 背景の透明な膜 (オーバーレイ) */
#mobile-menu-overlay {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s, background-color 0.3s;
    background-color: rgba(255, 167, 95, 0.3); /* 通常モード */
    backdrop-filter: blur(4px);
}

/* ダークモード時のオーバーレイ */
html.dark #mobile-menu-overlay {
    background-color: rgba(234, 134, 0, 0.4);
}

#mobile-menu-overlay.is-open {
    visibility: visible;
    opacity: 1;
}

/* スマホ用アニメーション: 右下から全画面へ広がる */
#mobile-menu-content {
    /* 閉じた状態: 右下ボタンの位置を中心に円形で隠す */
    clip-path: inset(calc(100% - 80px) 20px 20px calc(100% - 80px) round 50px);
}
#mobile-menu-content.is-open {
    visibility: visible;
    opacity: 1;
    /* 開いた状態: 画面いっぱい */
    clip-path: inset(0 0 0 0 round 24px);
}

/* PC用アニメーション: 右上からカード型展開 */
#menu-pc {
    clip-path: inset(0 0 100% 100% round 24px); /* 右上隅から */
}
#menu-pc.is-open {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0 round 24px);
}