:root { color-scheme: dark; background: #030b13; }
@font-face {
  font-family: 'Shippori Gothic B2';
  src: url('./assets/fonts/poincare-catchphrase.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
.scene { position: relative; width: 100%; height: 100svh; min-height: 280px; overflow: hidden; isolation: isolate; }
#landscape { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
.scene[data-ready="true"] #landscape { opacity: 1; }
.brand { position: absolute; z-index: 2; top: max(30px, env(safe-area-inset-top)); left: clamp(24px, 4.2vw, 80px); width: clamp(170px, 17vw, 252px); height: 44px; overflow: hidden; mix-blend-mode: screen; pointer-events: none; }
.brand img { position: absolute; top: 50%; left: 50%; width: 122%; height: auto; transform: translate(-50%, -50%); filter: invert(1) hue-rotate(180deg); }
.company-link { position: absolute; z-index: 3; top: max(30px, env(safe-area-inset-top)); right: clamp(24px, 4.2vw, 80px); display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, 'Yu Gothic', sans-serif; letter-spacing: 0.1em; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: #ffffff75; }
.company-link:hover { text-decoration-color: #fff; }
.company-link:focus-visible { outline: 2px solid #a9e9ee; outline-offset: 6px; border-radius: 3px; }
.catchphrase {
  position: absolute;
  z-index: 2;
  left: calc(var(--sphere-x, 70.5vw) + var(--sphere-diameter, 66svh) * 0.02);
  top: calc(var(--sphere-y, 59svh) + var(--sphere-diameter, 66svh) * 0.08);
  margin: 0;
  color: #fff;
  font-family: 'Shippori Gothic B2', 'しっぽり太ゴシックB2', sans-serif;
  font-size: clamp(10px, calc(var(--sphere-diameter, 66svh) * 0.047), 34px);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 9px rgb(0 18 27 / 32%);
  pointer-events: none;
}
.catchphrase span { display: block; white-space: nowrap; }
.products {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4.2vw, 80px);
  top: 30svh;
  width: min(43vw, 540px);
  display: grid;
  gap: clamp(55px, 14svh, 116px);
  font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic', sans-serif;
}
.product { display: grid; grid-template-columns: clamp(64px, 8.2vw, 106px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.product-icon { display: block; width: 100%; height: auto; border-radius: 23%; box-shadow: 0 10px 35px #0004; }
.product-content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.product-logo { display: block; width: min(100%, 340px); margin: 0; padding: 6px 0; border: 0; background: none; cursor: pointer; transition: opacity 180ms ease; }
.product-logo img { display: block; width: 100%; height: auto; }
.product-logo--shift img { filter: invert(1); }
.product-logo:hover { opacity: 0.78; }
.product-details { color: #fff; font-size: 14px; line-height: 1.7; letter-spacing: 0.06em; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: #ffffff75; }
.product-details span { display: inline-block; margin-left: 7px; text-decoration: none; }
.product-details:hover { text-decoration-color: #fff; }
.product-logo:focus-visible, .product-details:focus-visible { outline: 2px solid #a9e9ee; outline-offset: 7px; border-radius: 3px; }
.download-notice { color: #fff; background: #0c1b27; border: 1px solid #ffffff35; border-radius: 14px; padding: 30px; width: min(380px, calc(100% - 40px)); font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic', sans-serif; box-shadow: 0 20px 100px #0008; }
.download-notice::backdrop { background: #020b14a8; backdrop-filter: blur(5px); }
.download-notice p { margin: 0 0 24px; font-size: 15px; line-height: 1.8; }
.download-notice form { text-align: right; }
.download-notice button { color: #fff; background: #ffffff12; border: 1px solid #ffffff45; border-radius: 6px; padding: 9px 20px; cursor: pointer; font: inherit; }
.download-notice button:focus-visible { outline: 2px solid #a9e9ee; outline-offset: 3px; }
.fallback { position: absolute; inset: 0; background: linear-gradient(#02091066, #02091066), url('./assets/night-city.webp') center/cover; }
.fallback::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; background: linear-gradient(#24323a, #080e13); }
.fallback-ball { position: absolute; width: 68svh; height: 68svh; max-width: 78vw; max-height: 78vw; left: 70%; top: 58%; transform: translate(-50%, -50%) rotate(180deg); border-radius: 50%; background: url('./assets/sunset-matched.webp') center/cover; box-shadow: inset 0 0 25px 8px #031720, inset 0 0 3px 1px #b4edf0; }
@media (max-width: 640px) {
  .brand { top: max(25px, env(safe-area-inset-top)); left: 26px; width: 184px; height: 36px; }
  .company-link { top: max(25px, env(safe-area-inset-top)); right: 26px; min-height: 36px; font-size: 12px; }
  .fallback-ball { left: 54%; top: 64%; }
  .fallback::after { height: calc(36% - min(34svh, 39vw)); }
  .products { left: 26px; top: max(85px, 16svh); width: calc(100% - 52px); gap: clamp(18px, 3.2svh, 32px); }
  .product { grid-template-columns: clamp(42px, 7svh, 64px) minmax(0, 1fr); gap: 18px; }
  .product-content { gap: 8px; }
  .product-logo { width: min(100%, 230px); padding: 3px 0; }
  .product-details { font-size: 12px; line-height: 1.4; text-underline-offset: 4px; }
}
@media (max-width: 640px) and (max-height: 650px) {
  .products { gap: 16px; }
  .product-content { gap: 5px; }
  .product-logo { max-width: 184px; }
  .product-details { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { #landscape { transition: none; } }

/* 2026-10-27: 動く絵の準備ができるまで静止画を出さない */
.scene:not([data-ready]) .fallback { opacity: 0; animation: fallback-late 600ms ease 8s forwards; }
.fallback { transition: opacity 600ms ease; }
.scene[data-ready="true"] .fallback { opacity: 0; transition-delay: 900ms; }
@keyframes fallback-late { to { opacity: 1; } }