/* Google Fonts */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

/* カスタム選択色 */
::selection {
    background-color: black;
    color: white;
}

/* ========================================== */
/* 言語切り替え用 CSS (JSを使わずCSSで出し分け) */
/* ========================================== */
:lang(ja) .lang-en { display: none !important; }
:lang(en) .lang-ja { display: none !important; }

/* 言語切り替えメニューのアクティブ状態のスタイル */
:lang(ja) #menu-btn-ja, :lang(ja) #footer-btn-ja { font-weight: 700; color: black; pointer-events: none; }
:lang(ja) #menu-btn-en, :lang(ja) #footer-btn-en { font-weight: 400; color: #9ca3af; }
:lang(ja) #menu-btn-en:hover, :lang(ja) #footer-btn-en:hover { color: black; }

:lang(en) #menu-btn-en, :lang(en) #footer-btn-en { font-weight: 700; color: black; pointer-events: none; }
:lang(en) #menu-btn-ja, :lang(en) #footer-btn-ja { font-weight: 400; color: #9ca3af; }
:lang(en) #menu-btn-ja:hover, :lang(en) #footer-btn-ja:hover { color: black; }
    
/* スクロールバー非表示 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;ｘ
}

/* wave animation delay classes */
.delay-0 { animation-delay: 0s; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

.animate-wave-bounce {
    animation-name: wave-bounce;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes wave-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(-15px);
    }
    30% {
        transform: translateY(0);
    }
}