/* :rootでカラー変数を定義 */
:root {
    --primary-color: #00bfff; /* アクセントカラー: 水色 */
    --primary-color-alpha-10: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --primary-color-alpha-20: color-mix(in srgb, var(--primary-color) 20%, transparent);
    --primary-color-alpha-30: color-mix(in srgb, var(--primary-color) 30%, transparent);

    --background-color: #0a0f1a; /* 背景色: 深い紺色 */
    --background-image: url('../image/wallpaper_lightblue.png'); /* デフォルト背景画像 */
    --background-color-alpha-80: rgba(var(--background-color), 0.8);
    --background-color-alpha-70: rgba(var(--background-color), 0.7);
    --background-color-alpha-30: rgba(var(--background-color), 0.3);

    --text-color: #e0e0e0; /* テキストカラー: 明るいグレー (JSで上書きされます) */

    /* テキストシャドウ (白背景のときはJSでなしに上書きされます) */
    --text-shadow-5px: 0 0 5px var(--primary-color);
    --text-shadow-8px: 0 0 8px var(--primary-color);
    --text-shadow-8px-70: 0 0 8px rgba(var(--primary-color), 0.7);
    --text-shadow-10px: 0 0 10px var(--primary-color);  
    
    --header-height: 60px;  /* モバイル */
    --nav-height: 60px;     /* モバイル */

}