/* ── ひるのステージ / DAYTIME STAGE ── 公式LP FONTS event/heading: Shippori Mincho | jp-section: Zen Kaku Gothic New en/number/label: Archivo (tabular) | body: Noto Sans JP COLORS paper #FAF8F4 | ink #16181D | grey #8A8578 (rules/labels) accent(only) navy #1B2A5B — CTA・重要マーク・半券のみ小面積 SPACE 8/16/24/32/48/64/96 RADIUS 4px（角丸は端正に、ピル不使用） */ :root{ --paper:#FAF8F4; --ink:#16181D; --grey:#8A8578; --accent:#1B2A5B; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --radius:4px; --font-min:'Shippori Mincho',serif; --font-jp:'Zen Kaku Gothic New',sans-serif; --font-en:'Archivo',sans-serif; --font-body:'Noto Sans JP',sans-serif; --pad-y:80px; --pad-x:32px; --nav-display:flex; } @media (max-width:720px){ :root{ --pad-y:56px; --pad-x:20px; --nav-display:none; } } @media (max-width:400px){ .brand-tag{display:none;} .brand-title{font-size:19px!important;} } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.85;-webkit-font-smoothing:antialiased;} a{color:var(--ink);text-decoration:none;transition:color .15s;} a:hover{color:var(--accent);} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} h1,h2,h3{margin:0;line-height:1.18;text-wrap:balance;} p{text-wrap:pretty;} section[id]{scroll-margin-top:96px;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} } /* ── hover 挙動（元 prototype の style-hover を CSS 化）── */ .btn-nav{display:inline-flex;align-items:center;background:var(--accent);color:var(--paper);border-radius:var(--radius);padding:10px 22px;font-family:var(--font-jp);font-weight:700;font-size:14px;transition:.15s;} .btn-nav:hover{background:var(--ink);color:var(--paper);} .btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--paper);border-radius:var(--radius);padding:16px 44px;font-family:var(--font-jp);font-weight:700;font-size:17px;transition:.15s;} .btn-primary.on-dark:hover{background:var(--paper);color:var(--ink);} .btn-primary.on-paper:hover{background:var(--ink);color:var(--paper);} .btn-ghost{display:inline-flex;align-items:center;background:transparent;color:var(--paper);border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);padding:15px 32px;font-family:var(--font-jp);font-weight:700;font-size:16px;transition:.15s;} .btn-ghost:hover{background:var(--paper);color:var(--ink);} /* ── チケット半券カード（元 prototype の style-before / style-after を CSS 化）── */ .ticket-card{position:relative;border:1px solid var(--grey);border-top:2px solid var(--accent);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr 82px;background:var(--paper);} .ticket-card::before,.ticket-card::after{content:'';position:absolute;right:82px;transform:translateX(50%);width:16px;height:16px;border-radius:50%;background:var(--paper);border:1px solid var(--grey);} .ticket-card::before{top:-8px;} .ticket-card::after{bottom:-8px;} /* =================================================================== MOTION ── app.js が に .animate-ready を付けたときだけ発火。 JS が無い場合や prefers-reduced-motion では要素は自然な状態のまま （opacity:1・変形なし）で表示され、閲覧を妨げない。 =================================================================== */ @media (prefers-reduced-motion:no-preference){ /* スクロール／ロード連動リビール（フェード＋せり上がり） */ .animate-ready .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .animate-ready .reveal.is-visible{opacity:1;transform:none;} /* ヒーロー背景：昼の時間がゆっくり流れるような超低速ズーム */ .animate-ready .hero-img{animation:kenburns 26s ease-in-out 1s infinite alternate;} @keyframes kenburns{ from{transform:scale(1.0);} to{transform:scale(1.07);} } /* 巨大な年号ウォーターマーク：わずかに呼吸する */ .animate-ready #year-2026{animation:yearfloat 18s ease-in-out infinite alternate;} @keyframes yearfloat{ from{transform:translate(0,-50%);} to{transform:translate(-1.6%,-52%);} } /* ヘッダー：少しスクロールすると影で着地する */ header{transition:box-shadow .3s ease,background .3s ease;} header.scrolled{box-shadow:0 1px 0 rgba(22,24,29,.06),0 12px 30px -24px rgba(22,24,29,.55);} } /* ナビ下線の伸長（reduced-motion 下では瞬時に切り替わるだけで実害なし） */ header nav a{position:relative;} header nav a::after{ content:'';position:absolute;left:0;bottom:-4px;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:left center; transition:transform .28s cubic-bezier(.22,.61,.36,1); } header nav a:hover::after{transform:scaleX(1);}