@charset "UTF-8";
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* スクロールを無効化 */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    scroll-behavior: smooth;
}

    /* カラーパレットを定義(ダークモード時) */
:root {
    --color-main: #292929;
    --color-sub: #178AB8;
    --color-accent: #F75F59;
    --color-text: #E0E0E0;
    --color-header: #202020;
    --color-header-text: #a8a8a8;
    --color-header-text-hover: #ffffff;
    }

    /* ライトテーマ時のパレット */
body.light-theme {
    --color-main: #DFE4EA;
    --color-header: #f0f0f0;
    --color-header-text: #616161;
    --color-header-text-hover: #000000;
    --color-text: #333333;
    }

body.light-theme .footer img {
    filter: invert(100%); /* ライトテーマ時にSNSアイコンをの色を反転 */
    }
    
body {
    background-color: var(--color-main);
    color: var(--color-text);
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.5s ease, color 0.5s ease;
    display: flex;
    flex-direction: column; /* ヘッダー、メイン、フッターを縦に並べる */
    min-height: 100vh; /* ビューポートの高さに合わせる */
    }