/* ==========================================================================
   クリスマス仕様（2026-11-09〜12-25）
   inc/seasonal-xmas.php が期間中だけ読み込む。外すときは読み込みを止めるだけ。
   ========================================================================== */
:root {
    /* 背景を少し暗く（元: F8F5F0 / F2EBDF / F5F2ED / EBE3D4） */
    --paper-base: #ECE6DC;
    --paper-warm: #E4DACA;
    --paper-cool: #E7E3DC;
    --paper-deep: #DCD1BF;
    --border: #D3CCBE;
    --xmas-night: #1F2C42;
    --xmas-night-2: #2A3A55;
    --xmas-pine: #2F4A3C;
    --xmas-berry: #B8483E;
    --xmas-gold: #E7C46C;
}

/* ---------- ヘッダー：夜空＋雪の軒＋電飾 ---------- */
.site-header {
    background-color: rgba(31, 44, 66, 0.96);
    background-image:
        radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,.8) 50%, transparent 51%),
        radial-gradient(1px 1px at 37% 70%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 58% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 83% 64%, rgba(255,255,255,.6) 50%, transparent 51%),
        linear-gradient(180deg, var(--xmas-night) 0%, var(--xmas-night-2) 100%);
    border-bottom: 0;
}
.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 24px;
    background: url("eave.svg") repeat-x left top / 240px 24px;
    pointer-events: none;
}
.site-header .global-nav a { color: #F3EEE6; }
.site-header .global-nav a:hover { color: var(--xmas-gold); }
.site-header .global-nav .meta-link { color: #C9C2B6; }
.site-header .menu-toggle { color: #F3EEE6; }

/* ---------- 見出しの小さなひいらぎ ---------- */
.eyebrow::before,
.cat-en::before {
    content: "";
    display: inline-block;
    width: 22px; height: 16px;
    margin-right: 8px;
    vertical-align: -2px;
    background: url("holly.svg") no-repeat center / contain;
}

/* ---------- フッター：雪の夜の町 ---------- */
.site-footer {
    position: relative;
    background-color: var(--xmas-night);
    background-image:
        url("sky.svg"),
        radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
        radial-gradient(1px 1px at 26% 40%, rgba(255,255,255,.55) 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 44% 14%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 62% 34%, rgba(255,255,255,.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 91% 52%, rgba(255,255,255,.6) 50%, transparent 51%),
        linear-gradient(180deg, var(--xmas-night) 0%, var(--xmas-night-2) 100%);
    background-repeat: no-repeat;
    background-position: right 4% top 34px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-size: 260px auto, auto, auto, auto, auto, auto, auto;
    border-top: 0;
    padding-top: 64px;
    padding-bottom: 120px;
}
.site-footer::before {           /* 上の縁に積もった雪とつらら（CEO支給の積雪素材から作成 2026-11-09） */
    content: "";
    position: absolute;
    left: 0; right: 0; top: -20px;
    height: 101px;
    background: url("footer-snow.svg") repeat-x left top / 1277px 101px;
    pointer-events: none;
    z-index: 1;
}
.home .site-footer { margin-top: 44px; }   /* トップは上の文章が近いので、積もった雪がかからないように */
@media (max-width: 767px) {
    .site-footer::before { top: -14px; height: 71px; background-size: 894px 71px; }
    .home .site-footer { margin-top: 32px; }
}
.site-footer::after {            /* 下の雪の町 */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 96px;
    background: url("town.svg") repeat-x left bottom / 720px 96px;
    pointer-events: none;
}
.site-footer .footer-bottom { position: relative; z-index: 1; }
.site-footer .footer-logo { content: url("logo-xmas.svg"); filter: none; height: 54px; width: auto; }
@media (max-width: 767px) {
    .site-footer { background-position: right 2% top 24px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-size: 170px auto, auto, auto, auto, auto, auto, auto; }
}

/* ---------- 降る雪 ---------- */
.km-snow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 120;
}
@media (prefers-reduced-motion: reduce) {
    .km-snow { display: none; }
}