@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');
:root { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif; color: #382820; background: #fdf6e3; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #fdf6e3; }
body.menu-open { overflow: hidden; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; border-radius: 999px; background: #fff; color: #4b321f; text-decoration: none; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: absolute; top: 0; left: 0; z-index: 50; width: 100%; padding: 20px clamp(16px,4vw,54px); }
.nav-shell { display: flex; width: min(1180px,100%); margin: 0 auto; align-items: center; justify-content: space-between; gap: 20px; }
.mini-logo { display: inline-flex; color: #4b321f; font-size: clamp(.88rem,1.5vw,1.05rem); font-weight: 900; text-decoration: none; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
.nav-links { display: flex; align-items: center; gap: 4px; padding: 7px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(255,253,245,.78); box-shadow: 0 12px 30px rgba(80,55,30,.12); backdrop-filter: blur(16px); }
.nav-links a { padding: 9px 14px; border-radius: 999px; color: #4b321f; font-size: .88rem; font-weight: 800; text-decoration: none; transition: background 160ms ease,transform 160ms ease; }
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current="page"] { background: #fff6d9; transform: translateY(-1px); }
.menu-button { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,253,245,.88); box-shadow: 0 10px 28px rgba(80,55,30,.16); cursor: pointer; }
.menu-button span,.menu-button::before,.menu-button::after { display: block; width: 21px; height: 2px; margin: 5px auto; border-radius: 2px; background: #4b321f; content: ""; transition: transform 180ms ease,opacity 180ms ease; }
.menu-button[aria-expanded="true"] span { opacity: 0; }
.menu-button[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }
.menu-scrim { display: none; }
.page { position: relative; min-height: 100svh; height: 100svh; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fef8e8 0%, #fdf6e3 50%, #fbefd6 100%); }
.brand { position: absolute; z-index: 2; top: 28px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.brand p { margin: 0; color: #916c50; font-size: 12px; font-weight: 700; letter-spacing: .3em; }
.intro { position: absolute; z-index: 2; top: 72px; left: 50%; width: min(90vw, 620px); transform: translateX(-50%); text-align: center; pointer-events: none; }
.gaze-title { display: block; width: min(62vw, 410px); height: auto; margin: 0 auto 12px; }
.intro p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; }
.intro .instruction { color: #806552; font-size: 14px; line-height: 1.75; }
.character { position: absolute; z-index: 1; inset: 0; overflow: hidden; touch-action: pan-y; --image-size: min(86vw, 1020px); --image-left: calc((100% - var(--image-size)) / 2); --image-top: calc(342px - var(--image-size) * .105); }
.character canvas { position: absolute; width: 100%; height: 100%; display: block; opacity: 0; }
.fallback { position: absolute; max-width: none; width: var(--image-size); height: var(--image-size); left: var(--image-left); top: var(--image-top); }
footer { position: absolute; z-index: 2; bottom: 14px; width: 100%; color: #896e59; font-size: 12px; letter-spacing: .04em; text-align: center; }
footer span { margin-left: 14px; }
@media (max-width: 800px) { .page { min-height: 100svh; } .brand { top: 23px; } .intro { top: 62px; width: calc(100% - 40px); } .gaze-title { width: min(78vw, 300px); margin-bottom: 8px; } .intro p { margin-bottom: 8px; font-size: 16px; line-height: 1.65; } .intro .instruction { font-size: 14px; } .character { --image-size: min(145vw, 600px); --image-top: calc(280px - var(--image-size) * .105); } footer { display: none; } }
@media (min-width: 801px) and (max-height: 640px) { .brand { top: 14px; } .intro { top: 38px; } .gaze-title { width: min(45vw, 280px); margin-bottom: 4px; } .intro p { margin-bottom: 4px; font-size: 14px; line-height: 1.45; } .intro .instruction { font-size: 12px; } .character { --image-size: min(76vw, 720px); --image-top: calc(266px - var(--image-size) * .105); } }
@media (max-width: 820px) { .site-header { z-index: 95; padding: 12px; } .mini-logo span { display: none; } .menu-button { position: relative; z-index: 101; display: block; } .nav-links { position: fixed; top: 0; right: 0; z-index: 100; width: min(82vw,330px); height: 100dvh; padding: 100px 28px 40px; border: 0; border-radius: 40px 0 0 40px; background: rgba(255,250,235,.98); flex-direction: column; align-items: stretch; justify-content: flex-start; box-shadow: -18px 0 50px rgba(70,47,28,.18); transform: translateX(110%); transition: transform 220ms ease; } .nav-links::before { position: absolute; top: 32px; left: 30px; color: #b86b27; content: "MENU"; font-size: .8rem; font-weight: 900; letter-spacing: .18em; } .nav-links.is-open { transform: translateX(0); } .nav-links a { padding: 15px 10px; border-bottom: 1px dashed rgba(105,72,39,.18); border-radius: 0; font-size: 1rem; } .menu-scrim { position: fixed; inset: 0; z-index: 90; display: none; border: 0; background: rgba(49,36,25,.28); } .menu-scrim.is-open { display: block; } }