/*
 * ヘッダー、ヒーロー、帯、導入ストーリー。
 * ページ上部の主要な見た目をまとめる。
 */
/* Header */
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; border-bottom: 2px solid transparent; }
.site-header.is-scrolled { border-color: var(--ink); background: rgba(255,246,231,.95); backdrop-filter: blur(10px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: var(--display); font-size: .92rem; line-height: 1.3; }
.brand-plate { width: 52px; height: 42px; flex: none; }
.brand-plate rect, .brand-plate path { fill: var(--paper-light); stroke: var(--ink); stroke-width: 2.5; }
.brand-plate .brand-star { fill: var(--yellow); }
.brand-plate text { fill: var(--ink); font-family: var(--latin); font-size: 16px; }
.desktop-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.desktop-nav a { position: relative; font-family: var(--latin); font-size: .68rem; letter-spacing: .08em; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 4px; background: var(--yellow); content: ""; transform: scaleX(0) rotate(-2deg); transform-origin: left; transition: transform .35s var(--ease); }
.desktop-nav a:hover::after { transform: scaleX(1) rotate(-2deg); }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { min-height: 44px; display: grid; padding-inline: 15px; place-items: center; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-family: var(--latin); font-size: .72rem; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu-panel { position: absolute; top: 54px; right: 0; width: min(270px, calc(100vw - 40px)); padding: 12px 18px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-light); box-shadow: 5px 5px 0 var(--ink); }
.mobile-menu-panel a { display: block; padding: 11px 4px; border-bottom: 1px dashed var(--line); font-weight: 700; }
.mobile-menu-panel a:last-child { border-bottom: 0; }

.stamp-bar { position: fixed; z-index: 110; top: 76px; left: 50%; display: none; min-height: 38px; padding: 7px 16px; align-items: center; gap: 9px; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 12px 12px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; line-height: 1; cursor: default; transform: translateX(-50%); }
html.js .stamp-bar { display: flex; }
.stamp-bar { transition: transform .5s var(--ease), opacity .25s ease; }
.stamp-bar.is-condensed { transform: translateX(calc(50vw - 100% - 16px)); }
.stamp-bar.is-condensed .stamp-count-label { display: none; }
.site-header:has(details[open]) ~ .stamp-bar { opacity: 0; pointer-events: none; }
.stamp-bar.is-complete { background: var(--red); color: var(--white); cursor: pointer; }
.nowrap { white-space: nowrap; }
.stamp-glyphs { font-family: var(--latin); letter-spacing: .06em; }
.stamp-count { font-size: .76rem; white-space: nowrap; }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; overflow: clip; padding: 112px 0 62px; align-items: center; background: var(--ink); }
.hero-media { position: absolute; z-index: -3; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::before { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(33,48,78,.9) 0%, rgba(33,48,78,.62) 50%, rgba(33,48,78,.18) 100%), linear-gradient(0deg, rgba(33,48,78,.52), transparent 46%); content: ""; }
.hero::after { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 28%, rgba(255,197,49,.13), transparent 26%), radial-gradient(circle at 78% 68%, rgba(255,78,62,.12), transparent 24%); content: ""; }
.hero-inner { position: relative; flex: 1 1 auto; }
.hero-poster { position: relative; max-width: 760px; padding: clamp(28px, 4vw, 52px); border: 4px solid var(--ink); border-radius: 12px; background: rgba(255,246,231,.96); box-shadow: 7px 7px 0 var(--red); transform: rotate(-.45deg); }
.hero-poster .tape:first-child { top: -15px; left: 10%; }
.hero-poster .tape:nth-child(2) { top: -12px; right: 8%; }
.intro-lockup { display: flex; align-items: center; gap: 18px; }
.intro-logo { width: 96px; height: 86px; flex: none; overflow: visible; }
.intro-logo .plate-fill { fill: var(--paper-light); }
.intro-logo .logo-outline, .intro-logo .logo-key { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.intro-logo .logo-star { fill: var(--yellow); stroke: var(--ink); stroke-width: 3; transform-origin: center; }
.intro-logo text { fill: var(--ink); font-family: var(--latin); font-size: 30px; }
.hero-eyebrow { display: inline-flex; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 999px; background: var(--red); color: var(--white); font-size: .75rem; font-weight: 700; line-height: 1.4; transform: rotate(-1.5deg); }
.hero h1 { max-width: 11em; margin-top: 20px; font-family: var(--display); font-size: clamp(42px, 5.4vw, 64px); font-weight: 400; line-height: 1.28; letter-spacing: .015em; text-wrap: balance; }
.hero-title-phrase { white-space: nowrap; }
.title-line { display: block !important; overflow: hidden; padding-bottom: .08em; }
.title-char { display: inline-block; }
.hero-catch { margin-top: 17px; color: var(--red); font-family: var(--display); font-size: clamp(19px, 2.2vw, 28px); line-height: 1.5; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.hero-chip { display: inline-flex; min-height: 40px; padding: 8px 14px; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-light); font-size: .86rem; font-weight: 700; line-height: 1.35; }
.hero-chip:nth-child(1) { background: var(--yellow); }
.hero-chip:nth-child(2) { color: var(--white); background: var(--blue); }
.hero-chip:nth-child(3) { color: var(--white); background: var(--red); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 54px; padding: 12px 22px; align-items: center; justify-content: center; gap: 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; line-height: 1.25; cursor: pointer; transition: transform .35s var(--pop); }
.button::after { font-family: var(--latin); content: "→"; }
.button:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }
.button--ghost { background: var(--paper-light); }
.hero-note { margin-top: 18px; color: var(--ink-soft); font-size: .75rem; }
.doodle { position: absolute; z-index: -1; pointer-events: none; color: var(--yellow); }
.doodle svg { width: 100%; height: 100%; }
.doodle path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.doodle--one { top: 20%; right: 2%; width: 170px; height: 150px; transform: rotate(9deg); }
.doodle--two { right: 22%; bottom: 5%; width: 120px; height: 80px; color: var(--red); transform: rotate(-6deg); }
.hidden-star { position: absolute; z-index: 8; width: 48px; height: 48px; display: none; place-items: center; padding: 0; background: transparent; cursor: pointer; }
html.js .hidden-star { display: grid; }
.hidden-star svg { width: 23px; height: 23px; overflow: visible; fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; opacity: .42; transition: opacity .3s var(--ease), transform .35s var(--pop); }
.hidden-star:hover svg, .hidden-star:focus-visible svg { opacity: 1; transform: rotate(10deg) scale(1.15); }
.hidden-star.is-found svg { fill: var(--red); opacity: 1; transform: rotate(-8deg) scale(1.08); }
.hidden-star::after { position: absolute; right: -17px; bottom: -11px; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper-light); font-family: var(--latin); font-size: .55rem; content: "FIND"; opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.hidden-star:hover::after, .hidden-star:focus-visible::after { opacity: 1; transform: translateY(0); }
.hero-star { top: 32%; right: 7%; }
html.js:not(.intro-done) .hero-poster, html.js:not(.intro-done) .hero-chips, html.js:not(.intro-done) .hero-actions, html.js:not(.intro-done) .hero-note { opacity: 0; }

/* Crossing marquee */
.marquee-zone { position: relative; z-index: 5; min-height: 142px; overflow: clip; padding-block: 34px; background: var(--paper); }
.tape-strip { position: absolute; left: -3%; width: 106%; overflow: hidden; border-block: 3px solid var(--ink); background: var(--red); color: var(--white); box-shadow: 0 4px 0 var(--ink); transform: rotate(-1.5deg); }
.tape-strip--second { top: 69px; background: var(--yellow); color: var(--ink); transform: rotate(1.5deg); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; flex: none; padding: 12px 0; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; font-family: var(--latin); font-size: clamp(.84rem, 1.4vw, 1.06rem); letter-spacing: .08em; }
.marquee-group i { width: 11px; height: 11px; flex: none; background: currentColor; clip-path: polygon(50% 0,61% 35%,98% 36%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 36%,39% 35%); }