/* --- 1. 定数・グローバル設定 & 共通アニメーション --- */
:root {
    --font-mincho: "UD Digi Kyokasho N-R", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --header-height: 120px;
    --accent-red: #d92c00;
    --accent-blue: #1f80c9;
    --accent-light-blue: #6ec1ff;
    --accent-gold: #1f80c9;
    --bg-white: #ffffff;
    --bg-theme: #1f80c9;
    /* サイト全体の基調色 */
    --text-black: #000000;
}

html {
    scroll-behavior: smooth;
    background-color: #1f80c9 !important;
    /* 最上部のオーバースクロール色をHeroの青（#1f80c9）に固定 */
    scrollbar-gutter: stable;
    /* メニュー開閉時のレイアウトシフトを防止 */
}

html.is-locked {
    overflow: hidden;
}

body {
    margin: 0;
    background-color: #1f80c9;
    /* オーバースクロールエリアをテーマカラーに統一 */
    color: var(--text-black);
    overflow-x: hidden;
    padding-top: var(--header-height);
    line-height: 1.6;
}

/* トップページのみテーマカラー（青）を維持（擬似要素がないのでそのまま青） */
body.home,
body.front-page {
    /* 以前のルールを残しつつ、baseが青になったため補完的意味合い */
    background-color: var(--bg-theme);
}

.admin-bar body {
    padding-top: calc(var(--header-height) + 32px);
}

/* 共通アニメーション（高品質・高パフォーマンス化） */
.js-animate,
.js-opening-el {
    will-change: opacity, filter, transform;
}

.js-animate {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(30px) translate3d(0, 0, 0);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, filter, transform;
    backface-visibility: hidden;
}

.js-animate.is-show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) translate3d(0, 0, 0);
}

/* モバイル版ではスクロールアニメーションを無効化 */
@media screen and (max-width: 768px) {
    .js-animate {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}