/* サイト全体で使うテーマカラーや背景をCSS変数として整理 */
:root {
    color-scheme: light;
    --bg-gradient: linear-gradient(135deg, #f7fbff 0%, #eef5ff 45%, #ffffff 100%);
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: #ffffff;
    --surface-soft: rgba(240, 244, 255, 0.88);
    --card-shadow: 0 18px 36px rgba(29, 78, 216, 0.14);
    --card-shadow-hover: 0 26px 46px rgba(29, 78, 216, 0.22);
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.2);
    --accent-muted: rgba(59, 130, 246, 0.12);
    --text-primary: #0f1d40;
    --text-secondary: #4f6c97;
    --text-muted: #7f92b1;
    font-family: 'Montserrat', 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* 欧文と日本語の両方に対応した読みやすいフォント構成 */
}

/* すべての要素で箱の計算方法を統一し、レイアウト崩れを防ぐ */
* {
    box-sizing: border-box;
}

/* 擬似要素で装飾背景を重ねるため、土台を相対配置にする */
html {
    position: relative;
    /* 横方向のはみ出しはここ（唯一のスクロールコンテナ）でクリップする。
       body 側に overflow-x:hidden を置くと overflow-y が auto に昇格し、
       html のスクロールバーと二重表示になる（フッタースライドショーで顕在化）ため。 */
    overflow-x: hidden;
}

/* 画面いっぱいに柔らかな光を映す共通設定 */
html::before,
/* 左下・右上に別色の光を重ねて奥行きをつくる */
html::after {
    content: "";
    position: fixed;
    inset: -25%;
    pointer-events: none;
    z-index: -1;
    background-repeat: no-repeat;
    filter: blur(30px);
    opacity: 0.55;
    transform-origin: center;
    animation-timing-function: ease-in-out;
}

/* 左上・右下に青系の光を配置して世界観を演出 */
html::before {
    background-image: radial-gradient(circle at 28% 30%, rgba(38, 56, 210, 0.92) 0%, rgba(38, 56, 210, 0.38) 28%, rgba(38, 56, 210, 0) 48%),
                      radial-gradient(circle at 72% 70%, rgba(14, 165, 233, 0.72) 0%, rgba(14, 165, 233, 0.22) 38%, rgba(14, 165, 233, 0) 58%);
    background-size: 95% 95%, 82% 82%;
    animation: gridAuroraA 12s infinite;
}

/* 左下・右上に別色の光を重ねて奥行きをつくる */
html::after {
    background-image: radial-gradient(circle at 22% 74%, rgba(16, 185, 129, 0.6) 0%, rgba(16, 185, 129, 0.22) 42%, rgba(16, 185, 129, 0) 62%),
                      radial-gradient(circle at 84% 26%, rgba(109, 120, 248, 0.82) 0%, rgba(109, 120, 248, 0.28) 44%, rgba(109, 120, 248, 0) 64%);
    background-size: 100% 100%, 88% 88%;
    animation: gridAuroraB 16s infinite reverse;
}
/* ページ全体の基本スタイルと背景グラデーションを設定 */
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-gradient);
    color: var(--text-primary);
    font-family: inherit;
    letter-spacing: 0.01em;
}

/* HTMLのhidden属性が付いた画像は完全に非表示に */
img[hidden] {
    display: none;
}