@charset "UTF-8";

:root {
    --kingdom-red: #6d0d09;
    --kingdom-red-dark: #4f0906;
    --paper: #fffaf8;
    --ink: #2f2220;
    --muted: #7b6864;
    --line: rgba(109, 13, 9, 0.18);
    --magic-pink: #ff66ff;
    --magic-glow: #ffb3ff;
    --header-h: 108px;
    --footer-h: 72px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    color: var(--ink);
    background: var(--paper);
    font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.site-header {
    min-height: var(--header-h);
    padding: 14px 26px;
    background: var(--kingdom-red);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
    z-index: 100;
    flex: 0 0 auto;
}
.brand-link { display: inline-flex; align-items: center; }
.brand-logo { width: min(350px, 37vw); height: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
    color: rgba(255,255,255,.70);
    font-size: 1.16rem;
    letter-spacing: .04em;
    padding: 10px 0;
    transition: color .18s ease, opacity .18s ease;
}
.site-nav a:hover { color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 0; width: 46px; height: 42px; padding: 8px; }
.nav-toggle span { display: block; height: 2px; margin: 6px 0; background: #fff; }

.site-main { flex: 1 0 auto; min-height: 0; }
.site-footer {
    min-height: var(--footer-h);
    background: var(--kingdom-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px max(18px, env(safe-area-inset-bottom));
    text-align: center;
    flex: 0 0 auto;
}
.site-footer small { font-size: .95rem; font-weight: 600; letter-spacing: .02em; }

/* ===== TOP / SUMMON ===== */
.home-page { overflow: hidden; }
.home-page .site-main { display: flex; }
.summon-stage {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: #1b120f;
    background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08));
    background-size: cover;
    background-position: center 52%;
    perspective: 1800px;
    isolation: isolate;
}
.x-link {
    position: absolute;
    z-index: 30;
    right: clamp(10px, 1.8vw, 24px);
    top: clamp(10px, 1.8vw, 24px);
    width: clamp(56px, 5.5vw, 82px);
    aspect-ratio: 1;
    display: block;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.x-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.notice-launcher {
    position: absolute;
    z-index: 72;
    left: clamp(12px, 2vw, 26px);
    top: clamp(12px, 2vw, 26px);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 13px 8px 11px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 999px;
    background: rgba(42, 13, 34, .82);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.30), 0 0 22px rgba(255,102,255,.10);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.notice-launcher:hover { transform: translateY(-1px); background: rgba(55, 16, 45, .92); }
.notice-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.notice-envelope { font-size: 1.18rem; line-height: 1; }
.notice-launcher-label { font-weight: 800; letter-spacing: .08em; font-size: .88rem; }
.notice-seal {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: #7d1a18;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.07);
}
.notice-launcher.has-unread .notice-seal {
    background: #ff75ff;
    box-shadow: 0 0 0 3px rgba(255,117,255,.16), 0 0 18px rgba(255,117,255,.95);
    animation: notice-seal-pulse 1.8s ease-in-out infinite;
}
@keyframes notice-seal-pulse {
    0%, 100% { transform: scale(.92); filter: brightness(.92); }
    50% { transform: scale(1.13); filter: brightness(1.35); }
}
.notice-panel {
    position: absolute;
    z-index: 73;
    left: clamp(12px, 2vw, 26px);
    top: clamp(68px, calc(2vw + 58px), 86px);
    width: min(440px, calc(100% - 24px));
    max-height: min(64vh, 560px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(39,13,32,.97), rgba(69,18,54,.94));
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.48), 0 0 32px rgba(255,102,255,.15);
    backdrop-filter: blur(10px);
}
.notice-panel[hidden] { display: none; }
.notice-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.notice-panel-kicker { display: block; color: #e6bde5; font-size: .66rem; letter-spacing: .19em; font-weight: 700; }
.notice-panel h2 { margin: 4px 0 0; font-size: 1.22rem; letter-spacing: .08em; }
.notice-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.notice-close:hover { background: rgba(255,255,255,.14); }
.notice-list {
    max-height: calc(min(64vh, 560px) - 76px);
    overflow-y: auto;
    padding: 4px 18px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 185, 245, .78) rgba(255, 255, 255, .06);
}
.notice-list::-webkit-scrollbar { width: 10px; }
.notice-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.045);
    border-radius: 999px;
    margin-block: 6px;
}
.notice-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,205,251,.88), rgba(201,111,190,.78));
    border: 2px solid rgba(54,13,43,.92);
    border-radius: 999px;
}
.notice-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255,225,253,.98), rgba(225,139,217,.9));
}

.notice-item { padding: 16px 2px 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.notice-item:last-child { border-bottom: 0; }
.notice-date { display: block; margin-bottom: 4px; color: #e8c9e7; font-size: .74rem; letter-spacing: .06em; }
.notice-item h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; }
.notice-body { color: rgba(255,255,255,.88); font-size: .88rem; line-height: 1.7; white-space: pre-line; }
.notice-panel .inline-text-link { color: #ffd6ff; }
.notice-panel .inline-text-link:hover { color: #fff; }
.white-out {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    z-index: 80;
    pointer-events: none;
}
.flash-active { animation: flash-anim 1.5s ease-out; }
@keyframes flash-anim { 0% { opacity: 1; } 100% { opacity: 0; } }

.magic-system {
    --scene-size: min(78vw, 108vh, 1020px);
    position: absolute;
    left: 50%;
    top: 79%;
    width: var(--scene-size);
    height: var(--scene-size);
    transform: translate(-50%, -50%);
    /* iOS/Safariを含め、召喚エフェクトとキャラクターの前後関係は
       3D深度ではなく明示的なz-indexで固定する。 */
    transform-style: flat;
    pointer-events: none;
}
.light-pillar {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 82%;
    height: 0;
    background: linear-gradient(to top, #fff 0%, var(--magic-pink) 15%, transparent 100%);
    filter: blur(40px);
    opacity: 0;
    transform: translateX(-50%);
    transform-origin: bottom center;
    transition: height 1.8s ease-in, opacity 1s;
    z-index: 20;
}
.magic-system.burst .light-pillar { height: 260vh; opacity: .85; }
.summon-char {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: clamp(210px, calc(var(--scene-size) * .39), 430px);
    max-height: min(78vh, 720px);
    object-fit: contain;
    z-index: 30;
    opacity: 0;
    transform: translateX(-50%) translateY(30px) scale(.82);
    --char-active-scale: 1.44;
    --char-float-scale: 1.46;
    transform-origin: 50% 100%;
    filter: brightness(20) blur(30px);
    pointer-events: none;
    transition: transform 4s cubic-bezier(.1,.7,.3,1), opacity 2s, filter 4s;
}
.summon-char.active { pointer-events: auto; cursor: pointer; }
.summon-char:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 10px; }
.summon-tooltip {
    position: absolute;
    z-index: 60;
    max-width: min(420px, calc(100% - 28px));
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 12px;
    background: rgba(36, 12, 30, .92);
    color: #fff;
    font-size: clamp(.82rem, 1.2vw, 1rem);
    line-height: 1.55;
    white-space: normal;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.38), 0 0 20px rgba(255,102,255,.18);
    backdrop-filter: blur(5px);
    pointer-events: auto;
    max-height: calc(100% - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 156, 222, .78) rgba(39, 12, 32, .45);
}
.summon-tooltip::-webkit-scrollbar { width: 7px; }
.summon-tooltip::-webkit-scrollbar-track { background: rgba(39, 12, 32, .45); border-radius: 999px; }
.summon-tooltip::-webkit-scrollbar-thumb { background: rgba(239, 156, 222, .78); border-radius: 999px; }
.summon-tooltip::-webkit-scrollbar-thumb:hover { background: rgba(255, 190, 238, .92); }
.summon-tooltip, .summon-tooltip * {
    -webkit-user-select: none;
    user-select: none;
}
.summon-tooltip-text { white-space:pre-line; }
.summon-tooltip a { color:#ffd6ff; text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.summon-tooltip a:hover { color:#fff; }
.summon-fortune {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.18);
}
.summon-fortune-button {
    border: 1px solid rgba(255,214,255,.55);
    border-radius: 999px;
    padding: 7px 14px;
    background: linear-gradient(180deg, rgba(150,35,117,.56), rgba(77,18,63,.72));
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 0 12px rgba(255,190,246,.08);
}
.summon-fortune-button:hover {
    background: linear-gradient(180deg, rgba(177,47,142,.68), rgba(92,21,76,.82));
}
.summon-fortune-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.summon-tooltip[hidden] { display: none; }

/* お告げは画像説明ツールチップから切り離し、画面中央の固定カードで表示する。 */
.fortune-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(12, 4, 10, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.fortune-result-overlay[hidden] { display: none; }
.fortune-result-card {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    height: 220px;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 24px 26px 22px;
    border: 1px solid rgba(255, 215, 250, .48);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 115%, rgba(220, 54, 177, .22), transparent 52%),
        linear-gradient(180deg, rgba(69, 16, 55, .98), rgba(34, 9, 28, .98));
    color: #fff;
    text-align: center;
    box-shadow: 0 22px 60px rgba(0,0,0,.52), inset 0 0 28px rgba(255, 190, 238, .05);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
.fortune-result-kicker {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 207, 244, .72);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
}
.fortune-result-card h2 {
    margin: 0 32px 14px;
    font-size: 1.12rem;
    line-height: 1.35;
}
.fortune-result-message {
    height: 116px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.15);
    color: #ffe8fb;
    font-weight: 700;
    line-height: 1.65;
    white-space: pre-line;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 156, 222, .78) rgba(39, 12, 32, .45);
}
.fortune-result-message::-webkit-scrollbar { width: 6px; }
.fortune-result-message::-webkit-scrollbar-track { background: rgba(39, 12, 32, .45); border-radius: 999px; }
.fortune-result-message::-webkit-scrollbar-thumb { background: rgba(239, 156, 222, .78); border-radius: 999px; }
.fortune-result-close {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.fortune-result-close:hover { background: rgba(255,255,255,.12); }
.fortune-result-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.summon-char.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(var(--char-active-scale));
    filter: brightness(1) blur(0);
}
.summon-char.floating { animation: float-anime 3.6s ease-in-out infinite alternate; }
@keyframes float-anime {
    from { transform: translateX(-50%) translateY(0) scale(var(--char-active-scale)); }
    to   { transform: translateX(-50%) translateY(-2.2%) scale(var(--char-float-scale)); }
}
.magic-platform {
    position: absolute;
    inset: 0;
    transform: rotateX(81.5deg);
    transform-style: preserve-3d;
    cursor: pointer;
    pointer-events: auto;
    background: radial-gradient(circle, rgba(10,0,10,.9) 40%, rgba(30,0,30,.3) 65%, transparent 75%);
    border-radius: 50%;
    transition: filter .1s ease-out;
    outline: none;
    z-index: 10;
}
.magic-platform:focus-visible { filter: brightness(1.4) drop-shadow(0 0 28px #fff); }
.magic-system.burst .magic-platform { filter: brightness(3) drop-shadow(0 0 100px var(--magic-pink)) !important; }
.part {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid var(--magic-glow);
    box-shadow: 0 0 15px var(--magic-pink), inset 0 0 15px var(--magic-pink);
}
.layer-outer { position:absolute; inset:0; animation:rot-plus 40s linear infinite; }
.circle-heavy { width:100%; height:100%; border-radius:50%; border-width:10px; border-style:double; }
.circle-thin { width:95%; height:95%; border-radius:50%; border-width:2px; }
.layer-middle { position:absolute; width:85%; height:85%; top:7.5%; left:7.5%; animation:rotate-minus 15s linear infinite; transform-style:preserve-3d; }
.triangle { width:90%; height:90%; clip-path:polygon(50% 0%,0% 100%,100% 100%); background:var(--magic-pink); opacity:.3; border:none; }
.tri-1 { transform:translate(-50%,-50%) rotate(0); }
.tri-2 { transform:translate(-50%,-50%) rotate(180deg); }
.runes-container { position:absolute; inset:0; color:var(--magic-glow); font-family:serif; font-weight:bold; font-size:clamp(24px, calc(var(--scene-size) * .049), 44px); text-shadow:0 0 20px var(--magic-pink); }
.rune { position:absolute; inset:0; text-align:center; transform:rotate(calc(var(--i) * 30deg)); }
.layer-inner { position:absolute; width:55%; height:55%; top:22.5%; left:22.5%; animation:rot-plus 10s linear infinite; }
.square { width:100%; height:100%; }
.sq-1 { transform:translate(-50%,-50%) rotate(22.5deg); }
.sq-2 { transform:translate(-50%,-50%) rotate(67.5deg); }
.circle-dashed { width:80%; height:80%; border-radius:50%; border-style:dashed; border-width:5px; }
.core { width:25%; height:25%; background:#fff; border-radius:50%; filter:blur(15px); opacity:1; box-shadow:0 0 60px 20px #fff; }
@keyframes rot-plus { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes rotate-minus { from { transform:rotate(360deg); } to { transform:rotate(0); } }
@keyframes screen-shake {
    0% { transform:translate(2px,1px); }
    20% { transform:translate(-3px,-2px) rotate(-.4deg); }
    40% { transform:translate(-1px,2px) rotate(.4deg); }
    100% { transform:translate(1px,2px) rotate(-.4deg); }
}
.shaking { animation: screen-shake .15s infinite; }

/* ===== CONTENT PAGES ===== */
.content-page { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:56px 0 88px; }
.page-heading { margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.page-heading .eyebrow { color:var(--kingdom-red); font-weight:800; font-size:.78rem; letter-spacing:.2em; }
.page-heading h1 { margin:8px 0 0; font-size:clamp(2rem,4vw,3.25rem); font-weight:800; }
.empty-message { color:var(--muted); }
.company-list { margin:0; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 18px 45px rgba(77,33,25,.06); }
.company-row { display:grid; grid-template-columns:minmax(160px, 28%) 1fr; border-bottom:1px solid var(--line); }
.company-row:last-child { border-bottom:0; }
.company-row dt, .company-row dd { margin:0; padding:22px 26px; }
.company-row dt { background:rgba(109,13,9,.055); color:var(--kingdom-red); font-weight:800; }
.company-row dd { line-height:1.8; }
.linked-text { white-space:pre-line; }
.inline-text-link { color:var(--kingdom-red); text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.inline-text-link:hover { color:var(--kingdom-red-dark); }

.product-card { background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 20px 55px rgba(77,33,25,.08); margin-bottom:42px; }
.product-header { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; padding:34px; background:linear-gradient(135deg, rgba(109,13,9,.055), rgba(255,102,255,.035)); }
.product-thumbnail { width:160px; aspect-ratio:1; border-radius:18px; object-fit:cover; }
.product-header h2 { font-size:clamp(1.65rem,3vw,2.55rem); margin:0 0 6px; }
.product-catch { margin:0 0 12px; color:var(--kingdom-red); font-size:1.1rem; font-weight:800; white-space:pre-line; }
.product-summary { margin:0; line-height:1.8; color:#51413d; white-space:pre-line; }
.product-blocks { padding:8px 34px 34px; }
.product-block { margin-top:30px; }
.product-block h3 { margin:0 0 12px; font-size:1.26rem; }
.product-block p { margin:0; line-height:1.9; white-space:pre-line; }
.feature-block { display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:16px; background:#fff8fc; }
.feature-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--kingdom-red); color:#fff; font-size:1.25rem; }
.note-block { padding:18px 20px; border-left:4px solid var(--kingdom-red); background:#f8f2ef; color:#594742; }
.note-block strong { display:block; margin-bottom:6px; color:var(--kingdom-red); }
.product-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px; }
.product-gallery[data-count="1"] { grid-template-columns:minmax(0, 860px); justify-content:center; }
.product-gallery figure { margin:0; }
.gallery-button { width:100%; padding:0; border:0; background:#eee; border-radius:14px; overflow:hidden; cursor:zoom-in; display:block; }
.gallery-button img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .2s ease; }
.gallery-button:hover img { transform:scale(1.02); }
.product-gallery figcaption { margin-top:7px; color:var(--muted); font-size:.86rem; white-space:pre-line; }
.link-block { text-align:center; }
.action-link { display:inline-flex; justify-content:center; min-width:220px; padding:14px 24px; border-radius:999px; background:var(--kingdom-red); color:#fff; font-weight:800; box-shadow:0 10px 25px rgba(109,13,9,.18); }
.action-link:hover { background:var(--kingdom-red-dark); }
.image-modal[hidden] { display:none; }
.image-modal { position:fixed; inset:0; z-index:1000; background:rgba(20,10,8,.9); display:grid; place-items:center; padding:50px 24px 24px; }
.image-modal img { max-width:min(1200px,96vw); max-height:88vh; object-fit:contain; }
.image-modal-close { position:absolute; top:14px; right:18px; border:0; background:transparent; color:#fff; font-size:2.6rem; line-height:1; cursor:pointer; }
.modal-open { overflow:hidden; }

@media (max-width: 820px) {
    .notice-launcher { min-height: 42px; padding: 7px 11px 7px 10px; }
    .notice-launcher-label { font-size: .80rem; }
    .notice-panel { top: 64px; max-height: min(68vh, 520px); }
    .notice-list { max-height: calc(min(68vh, 520px) - 74px); }

    :root { --header-h: 82px; --footer-h: 60px; }
    .site-header { min-height:var(--header-h); padding:10px 14px; gap:12px; }
    .brand-logo { width:min(285px, 68vw); }
    .nav-toggle { display:block; }
    .site-nav {
        position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0;
        background:var(--kingdom-red-dark); box-shadow:0 12px 30px rgba(0,0,0,.25);
    }
    .site-nav.open { display:flex; }
    .site-nav a { padding:15px 20px; border-top:1px solid rgba(255,255,255,.12); }
    .site-footer { min-height:var(--footer-h); padding:14px 12px max(14px, env(safe-area-inset-bottom)); }
    .site-footer small { font-size:.78rem; }
    .magic-system { --scene-size:min(96vw, 82vh, 760px); top:80%; }
    .content-page { width:min(100% - 28px, 1180px); padding:38px 0 64px; }
    .company-row { grid-template-columns:1fr; }
    .company-row dt { padding-bottom:8px; }
    .company-row dd { padding-top:8px; }
    .product-header { grid-template-columns:1fr; padding:24px; }
    .product-thumbnail { width:120px; }
    .product-blocks { padding:4px 22px 26px; }
}

@media (orientation: portrait) and (max-width: 820px) {
    .summon-stage { background-position:center center; }
    .magic-system { --scene-size:min(112vw, 68vh, 680px); top:80%; }
    .summon-char { width:clamp(175px, calc(var(--scene-size) * .38), 290px); max-height:58vh; }
    .x-link { width:54px; }
}

@media (max-height: 700px) and (orientation: landscape) {
    :root { --header-h:72px; --footer-h:52px; }
    .site-header { min-height:var(--header-h); padding:8px 18px; }
    .brand-logo { width:min(300px,32vw); }
    .site-footer { min-height:var(--footer-h); padding:10px 16px; }
    .magic-system { --scene-size:min(74vw, 118vh, 860px); top:79%; }
    .summon-char { width:clamp(190px, calc(var(--scene-size) * .37), 350px); max-height:69vh; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ===== 2026-09-07 maintenance update ===== */
@media (min-width: 821px) {
    .site-header { align-items: stretch; }
    .brand-link { align-items: center; }
    .site-nav { align-items: flex-end; padding-bottom: 8px; }
    .site-nav a { padding-bottom: 0; }
}

.product-list { display:grid; gap:26px; }
.product-list-card {
    display:grid;
    grid-template-columns:minmax(220px, 34%) 1fr;
    min-height:220px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 18px 46px rgba(77,33,25,.07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-list-card:hover {
    transform:translateY(-2px);
    box-shadow:0 24px 58px rgba(77,33,25,.12);
    border-color:rgba(109,13,9,.32);
}
.product-list-image-wrap { min-height:220px; background:#f2e9e6; overflow:hidden; }
.product-list-image { width:100%; height:100%; min-height:220px; object-fit:cover; display:block; }
.product-list-image-placeholder { width:100%; height:100%; min-height:220px; display:grid; place-items:center; font-size:4rem; color:rgba(109,13,9,.28); background:linear-gradient(135deg,#f8eeee,#fff8fc); }
.product-list-body { padding:30px 34px; display:flex; flex-direction:column; justify-content:center; }
.product-list-body h2 { margin:0 0 8px; font-size:clamp(1.55rem,3vw,2.25rem); }
.product-more { margin-top:20px; color:var(--kingdom-red); font-weight:800; }
.product-detail-back { margin-bottom:18px; color:var(--kingdom-red); font-weight:700; }
.product-detail-back a:hover { text-decoration:underline; }
.product-detail-card { margin-bottom:0; }
.product-detail-card .product-header h1 { font-size:clamp(1.8rem,4vw,3rem); margin:4px 0 8px; }
.product-detail-card .product-block h2 { margin:0 0 12px; font-size:1.26rem; }

@media (max-width: 820px) {
    .product-list-card { grid-template-columns:1fr; }
    .product-list-image-wrap, .product-list-image, .product-list-image-placeholder { min-height:190px; }
    .product-list-image { aspect-ratio:16/9; }
    .product-list-body { padding:24px; }
}