/* =========================================
   Variables
   ========================================= */
:root {
  /* Layout/Anim */
  --logo-icon-offset-vh: -4.5dvh;
  --close-anim-dist: 141.5%;
 
  /* Colors/Z-Index */
  --c-black: #000;
  --c-white: #fff;
  --c-text-gray: #8fa8cc;
 
  /* Z-Index Hierarchy */
  --z-video: 1;
  --z-fade: 2;
  --z-bg: 3;
  --z-tile: 4;
  --z-hint: 5;
  --z-marquee: 10;
  --z-section3: 15;
  --z-corners: 20;
  --z-diamond: 30;
  --z-boss: 40;
  --z-logo: 50;
  --z-info: 60;
 
  /* UI Elements (Sec 1) */
  --z-ui: 70;
  --z-overlay: 200;
  --z-modal: 210;
  --z-close: 220;
 
  /* Cursor Hotspot (for custom pointer.svg, adjustable) */
  --cursor-hotspot-x: 9;
  --cursor-hotspot-y: 3;
 
  /* Modal */
  --z-modal-bg: 90;
  --z-active-popup: 101;
  --z-modal-content: 101;
}

/* Orientation Change Overlay */
.orientation-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--c-black); z-index:9999; display:none; opacity:0; pointer-events:none; will-change:opacity; isolation:isolate; }
.orientation-overlay.active { display:block; opacity:1; pointer-events:auto; transform:translate3d(0,0,0); backface-visibility:hidden; }
.orientation-overlay.fade-out { animation:orientationFadeOut 1s ease forwards; }

.orientation-logo { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:250px; height:250px; display:flex; justify-content:center; align-items:center; opacity:1; will-change:transform,opacity; }
@media (max-width:500px), (max-height:500px) { .orientation-logo { width:150px; height:150px; } }
.orientation-overlay.fade-out .orientation-logo { animation:logoFadeOut 1s ease forwards; }
.orientation-logo svg { width:100%; height:100%; object-fit:contain; }

@keyframes orientationFadeOut { from{opacity:1} to{opacity:0} }
@keyframes logoFadeOut { from{opacity:1} to{opacity:0} }

/* =========================================
   Base Setup
   ========================================= */
html, body { background:var(--c-black); margin:0; padding:0; width:100%; height:100%; overflow-x:hidden; }
a { color:#0066cc; text-decoration:none; }
img:not(.mail-image):not(.modal-open-button img):not(.close-button img):not(#lang-toggle img):not(.corner-item):not(.app-icon):not(.modal-header img):not(.modal-app-icon) { display:block; width:100%; height:auto; border:0; }

/* Main Scroll Container */
.scroll-container { width:100%; height:100dvh; overflow-y:scroll; overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }

/* Common Section */
.section { width:100%; position:relative; background:var(--c-black); scroll-snap-align:start; }

/* =========================================
   Section 1: Intro
   ========================================= */
.section-1 { height:100dvh; width:100%; overflow:hidden; position:relative; z-index:1; }

/* Anim Definitions */
@keyframes float { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-2.526%)} }
@keyframes flash { 0%,100%{opacity:1} 50%{opacity:.8} }
@keyframes arrowFloatAnim {
  0%, 100% { transform: translateX(-50%) translateY(-10px); }
  50% { transform: translateX(-50%) translateY(20px); }
}
@keyframes slideUp { from{transform:translate(-50%,calc(-50% + 6%))} to{transform:translate(-50%,-50%)} }
@keyframes appIconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8%)} }
@keyframes fadeInFull { from{opacity:0} to{opacity:1} }
@keyframes fadeInMail { from{opacity:0} to{opacity:1} }
@keyframes slashIn { 0%{transform:translate(-50%,-50%) rotate(45deg)} 50%{transform:translate(-50%,-50%) rotate(45deg) translate(var(--close-anim-dist),0)} 50.01%{transform:translate(-50%,-50%) rotate(45deg) translate(calc(var(--close-anim-dist)*-1),0)} 100%{transform:translate(-50%,-50%) rotate(45deg)} }
@keyframes backslashIn { 0%{transform:translate(-50%,-50%) rotate(-45deg)} 50%{transform:translate(-50%,-50%) rotate(-45deg) translate(var(--close-anim-dist),0)} 50.01%{transform:translate(-50%,-50%) rotate(-45deg) translate(calc(var(--close-anim-dist)*-1),0)} 100%{transform:translate(-50%,-50%) rotate(-45deg)} }
@keyframes slashOut { 0%{transform:translate(-50%,-50%) rotate(45deg)} 50%{transform:translate(-50%,-50%) rotate(45deg) translate(calc(var(--close-anim-dist)*-1),0)} 50.01%{transform:translate(-50%,-50%) rotate(45deg) translate(var(--close-anim-dist),0)} 100%{transform:translate(-50%,-50%) rotate(45deg)} }
@keyframes backslashOut { 0%{transform:translate(-50%,-50%) rotate(-45deg)} 50%{transform:translate(-50%,-50%) rotate(-45deg) translate(calc(var(--close-anim-dist)*-1),0)} 50.01%{transform:translate(-50%,-50%) rotate(-45deg) translate(var(--close-anim-dist),0)} 100%{transform:translate(-50%,-50%) rotate(-45deg)} }

/* Main Wrapper */
#ui-wrapper { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 2s ease-out; z-index:1; }
#ui-wrapper.ready { opacity:1; }

/* Logo Display */
.logo-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; transition:filter .3s ease; }
.logo-icon { position:absolute; top:calc(50% + var(--logo-icon-offset-vh)); left:50%; width:min(90dvmin,562.5px); height:min(90dvmin,593.75px); animation:float 4s ease-in-out infinite; transform:translate(-50%,-50%); display:none; }
.logo-icon.active { display:block; }
.logo-icon svg { height:100%; width:100%; filter:url(#glitch-icon); }
.logo-icon.transition-boost svg { filter:url(#glitch-icon-heavy); }

.logo-title { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:768px; max-width:90vw; color:#fff; }
.logo-title svg { width:100%; height:100%; }
.logo-title.glitching svg { filter:url(#glitch-title-heavy); animation:flash .1s infinite; }
.logo-title.active { top:20px; left:20px; transform:none; animation:none; line-height:0; display:block; position:absolute; }
.logo-title.active svg { filter:none; height:22px; width:auto; }

.arrow-container {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(-10px);
  width: 175px;
  height: 105px;
  max-width: 40vw;
  max-height: 20vh;
  z-index: 20;
  opacity: 0;
  transition: opacity 2s ease-out;
  pointer-events: none;
}
.arrow-container.show {
  opacity: 1;
  animation: arrowFloatAnim 2s ease-in-out infinite;
}
.arrow-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Canvas Prevention */
.section-1 canvas { pointer-events:none!important; z-index:0!important; }

/* UI Buttons (Common) */
.modal-open-button { position:absolute; top:17px; background:0 0; border:none; cursor:pointer; cursor: url('image/pointer.svg') var(--cursor-hotspot-x) var(--cursor-hotspot-y), pointer; z-index:var(--z-ui); display:inline-flex; justify-content:center; align-items:center; overflow:hidden; padding:6px 12px; transition:opacity .2s ease; pointer-events:auto; }
.modal-open-button img { height:10px; width:auto; position:relative; z-index:1; transition:filter .3s ease; display:block; }
.modal-open-button::after { position:absolute; content:""; width:0; height:100%; top:0; right:0; z-index:0; background:#fff; transition:width .3s ease; }
.modal-open-button.active-hover img { filter:invert(1); }
.modal-open-button.active-hover::after { width:100%; left:0; right:auto; }

@media (hover: hover) {
  .modal-open-button:hover img { filter:invert(1); }
  .modal-open-button:hover::after { width:100%; left:0; right:auto; }
}

#contact-button { right:164px; }
#privacy-button { right:56px; }

/* Lang Toggle */
#lang-toggle { right:8px; }
#lang-toggle img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:opacity .3s ease; }
#lang-toggle .lang-jp { opacity:1; }
#lang-toggle .lang-en { opacity:0; }

/* Touch Interaction (JS controlled) & Active State */
#lang-toggle.active-hover .lang-jp, #lang-toggle.en-active .lang-jp { opacity:0; }
#lang-toggle.active-hover .lang-en, #lang-toggle.en-active .lang-en { opacity:1; }
#lang-toggle.en-active.active-hover .lang-jp { opacity:1; }
#lang-toggle.en-active.active-hover .lang-en { opacity:0; }

/* Mouse Hover Interaction */
@media (hover: hover) {
  #lang-toggle:hover .lang-jp { opacity:0; }
  #lang-toggle:hover .lang-en { opacity:1; }
  #lang-toggle.en-active:hover .lang-jp { opacity:1; }
  #lang-toggle.en-active:hover .lang-en { opacity:0; }
}
.lang-hover-area { height:9px; opacity:0; }

/* Info Display */
#info-display { position:absolute; top:50px; right:20px; max-width:350px; text-align:right; z-index:10; pointer-events:none; }
#info-display .csv-info-text { color:var(--c-white); text-shadow:0 1px 0 rgba(0,0,0,1); margin:6px 0; line-height:1.4; }
html[lang="ja"] #info-display .csv-info-text { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; font-size:11px; }
html[lang="en"] #info-display .csv-info-text { font-family: "Chakra Petch", "Arial", sans-serif; font-size:12px; }

/* Modal (Contact/Privacy) */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:0 0; z-index:var(--z-overlay); animation:fadeInFull .2s forwards; }
.modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:92%; height:80%; background:#333; clip-path:polygon(0 0,calc(100% - 30px) 0,calc(100% - 30px) 30px,100% 30px,100% 100%,0 100%,0 0); z-index:var(--z-modal); flex-direction:column; overflow:visible; animation:fadeInFull 1s forwards,slideUp 2s cubic-bezier(0,.5,.5,1) forwards; }

.modal-header, .modal-footer { background:#000; flex-shrink:0; position:relative; display:flex; align-items:center; }
.modal-header { padding:15px 15px 18px; }
.modal-header img { width:580px; height:auto; max-width:75vw; }
.modal-footer { padding:10px; justify-content:center; }

.header-fade, .footer-fade { position:absolute; left:0; width:100%; height:30px; z-index:1; pointer-events:none; }
.header-fade { bottom:-30px; background:linear-gradient(to bottom,#000 0,transparent 100%); }
.footer-fade { top:-30px; background:linear-gradient(to top,#000 0,transparent 100%); }

.modal-content { flex:1; overflow-y:auto; overflow-x:hidden; padding:15px; background:#13151a; word-wrap:break-word; position:relative; z-index:0; transform:translate3d(0,0,0); will-change:scroll-position; }
.modal-content::-webkit-scrollbar { width:8px; }
.modal-content::-webkit-scrollbar-track { background:#555; }
.modal-content::-webkit-scrollbar-thumb { background:#888; border-radius:4px; }
.modal-content::-webkit-scrollbar-thumb:hover { background:#bbb; }

/* Close Button (Inner) */
.close-button { background:0 0; border:none; cursor:pointer; cursor: url('image/pointer.svg') var(--cursor-hotspot-x) var(--cursor-hotspot-y), pointer; display:inline-flex; justify-content:center; align-items:center; position:relative; overflow:hidden; padding:10px 20px; }
.close-button img { height:15px; width:auto; position:relative; z-index:1; transition:filter .3s ease; display:block; }
.close-button::after { position:absolute; content:""; width:0; height:100%; top:0; right:0; z-index:0; background:#fff; transition:width .3s ease; }
.close-button:hover img, .close-button.active-hover img { filter:invert(1); }
.close-button:hover::after, .close-button.active-hover::after { width:100%; left:0; right:auto; }

/* Close X (Outer) */
.close-x { position:fixed; width:33px; height:33px; background:#000; border:none; cursor:pointer; cursor: url('image/pointer.svg') var(--cursor-hotspot-x) var(--cursor-hotspot-y), pointer; z-index:var(--z-close); display:none; padding:0; margin:0; pointer-events:auto; overflow:hidden; opacity:0; transition:opacity .3s ease; }
.modal-overlay .close-x { display:block; }
.close-x::before, .close-x::after { content:''; position:absolute; top:50%; left:50%; width:60%; height:2.5px; background:#fff; transform-origin:center center; }
.close-x::before { transform:translate(-50%,-50%) rotate(45deg); }
.close-x::after { transform:translate(-50%,-50%) rotate(-45deg); }
.close-x:hover::before, .close-x.active-hover::before { animation:slashIn .3s cubic-bezier(.5,0,0,1) .05s forwards; }
.close-x:hover::after, .close-x.active-hover::after { animation:backslashIn .3s cubic-bezier(.5,0,0,1) forwards; }
.close-x.reset-anim::before, .close-x.reset-anim::after { animation: none !important; }

/* Utility & Invert */
body.no-scroll, body.no-scroll .scroll-container { overflow:hidden; overscroll-behavior:none; scroll-snap-type:none; touch-action:none; }
body.no-scroll .modal-content { touch-action:pan-y; overscroll-behavior:contain; }
.text-1 { color:var(--c-white); text-align:left; margin:0 0 10px; padding:0; }
html[lang="ja"] .text-1 { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; font-size:12px; }
html[lang="en"] .text-1 { font-family: "Chakra Petch", "Arial", sans-serif; font-size:14px; }
.text-2 { color:var(--c-white); font-weight:700; }
html[lang="ja"] .text-2 { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; font-size:13px; }
html[lang="en"] .text-2 { font-family: "Chakra Petch", "Arial", sans-serif; font-size:15px; }
.text-3 { color:var(--c-white); font-weight:700; }
html[lang="ja"] .text-3 { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; font-size:15px; }
html[lang="en"] .text-3 { font-family: "Chakra Petch", "Arial", sans-serif; font-size:17px; }
.divider-1 { border-top:1px dashed #fff; width:60%; margin:30px auto; opacity:.25; }
.divider-2 { border-top:1px dashed #fff; width:96%; margin:50px auto; }
.mail-image { display:block; margin:13px 0; padding:0; max-width:none; width:auto!important; height:17px!important; opacity:0; animation:fadeInMail 2s 2s forwards; }

/* Invert & Intro Control */
body.inverted .section-1 { background:#fff; }
body.inverted .logo-container { filter:invert(1); }
body.inverted .modal-open-button { opacity:0; pointer-events:none; }
body.inverted #info-display { opacity:0; }
body.inverted .section-1 canvas { opacity:.1; transition:opacity .5s ease; }
body.orientation-changing * { z-index:auto!important; }
body.orientation-changing .orientation-overlay { z-index:9999!important; }
.intro-fade { opacity:0; pointer-events:none; }
.intro-fade.show { opacity:1; pointer-events:auto; transition:opacity 2s ease-out; }
.intro-fade.interaction-active { transition:opacity .2s ease; }

/* =========================================
   Section 2: Visuals
   ========================================= */
.section-2 { height:min(200vh,300vw); }

.video-background { position:absolute; top:0; left:0; width:100%; height:100%; z-index:var(--z-video); pointer-events:none; }
.video-background iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-height:100vh; min-width:177.77vh; }
.sticky-wrapper { position:sticky; top:0; left:0; width:100%; height:100vh; overflow:hidden; }

.fade-top, .fade-bottom { position:absolute; left:0; width:100%; z-index:var(--z-fade); pointer-events:none; transform:translateZ(0); }
.fade-top { top:0; height:20vh; background:linear-gradient(180deg,#000 0,transparent); }
.fade-bottom { bottom:0; height:40vh; background:linear-gradient(0deg,#000 0,transparent); }

/* Tiles */
.tiles-layer { position:absolute; top:50%; left:50%; z-index:var(--z-tile); pointer-events:none; will-change:transform; opacity:.25; }
.tile { position:absolute; width:34px; height:34px; background-size:contain; background-repeat:no-repeat; transition:none; }

/* Marquee & Corners */
.marquee-container { position:absolute; left:0; width:100%; height:700px; z-index:var(--z-marquee); overflow:hidden; pointer-events:none; top:100vh; will-change:top; }
.marquee-item { position:absolute; top:0; left:0; transform:translate3d(var(--x13,130vw),0,0) translateX(-50%); width:500px; height:460px; will-change:transform,filter; overflow:visible; animation-name:marqueeAnim; animation-duration:var(--duration); animation-timing-function:linear; animation-iteration-count:infinite; animation-fill-mode:both; }
.marquee-item img { width:100%; height:100%; object-fit:cover; }
.marquee-shadow { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; z-index:-1; pointer-events:none; }
.marquee-corners { position:absolute; left:0; width:100%; z-index:var(--z-corners); pointer-events:none; top:100vh; will-change:top; }
.corner-item { position:absolute; width:10px!important; height:10px!important; animation-duration:1.5s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; }
.corner-tl { top:-6px; left:5px; animation-name:cornerAnimTL; }
.corner-tr { top:-6px; right:5px; animation-name:cornerAnimTR; }
.corner-bl { bottom:-6px; left:5px; animation-name:cornerAnimBL; }
.corner-br { bottom:-6px; right:5px; animation-name:cornerAnimBR; }

/* App Logo & Info */
.app-logo { position:absolute; left:50%; transform:translateX(-50%); width:min(80vmin,600px); z-index:var(--z-logo); pointer-events:none; opacity:0; transition:opacity .5s ease; will-change:top,opacity; }
.app-logo.visible { opacity:1; }
.app-logo img { width:100%; height:100%; object-fit:contain; }

.app-info, .app-info-layer { position:absolute; top:40%; left:50%; width:min(85vmin,500px); height:min(85vmin,500px); --content-y:-50%; transform:translate(-50%,var(--content-y)); will-change:transform; }
.app-info { z-index:var(--z-info); opacity:0; }
.app-info-layer { z-index:var(--z-diamond); opacity:0; pointer-events:none; }
.app-info.zoom-out .app-info-container, .app-info-layer.zoom-out .app-info-container { animation:contentZoomOutAnim 5s cubic-bezier(.65,0,.35,1) forwards; transform-origin:center; }
.app-info-container { width:100%; height:100%; display:flex; justify-content:center; align-items:center; }

.app-info-bg-1, .app-info-bg-2, .app-info-bg-3, .app-info-bg-4 { position:absolute; background:var(--c-black); transform:rotate(45deg); }
.app-info-bg-1 { top:0; left:0; width:100%; height:100%; z-index:var(--z-bg); clip-path:polygon(0% 0%,0% 100%,21% 100%,21% 21%,79% 21%,79% 79%,21% 79%,21% 100%,100% 100%,100% 0%); }
.app-info-bg-2 { width:54%; height:54%; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); z-index:2; background:var(--c-black); }
.app-info-bg-3 { width:54.62%; height:54.62%; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); z-index:1; background:#fff; box-shadow:0 0 3px 1px #fff; }
.app-info-bg-4 { width:57%; height:57%; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); z-index:0; opacity:.3; background:#fff; mix-blend-mode:color-dodge; }
.app-info-bg-5 { position:absolute; width:2%; height:2%; background:hsl(0,100%,60%); left:50%; transform:translateX(-50%); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); z-index:4; pointer-events:none; opacity:0; }
.app-info-bg-5.animating { animation: bg5FadeInOut 7s ease forwards; }
.app-info-bg-5.top { top:-18.2%; width:2.2%; height:2.2%; }
.app-info-bg-5.bottom { top:116.2%; width:2.2%; height:2.2%; }

.app-info-inner { position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--c-white); width:100%; padding:5%; }
.app-icon { width:36%; height:auto; aspect-ratio:1/1; object-fit:contain; margin-top:-5.75%; margin-bottom:1%; animation:appIconFloat 8s ease-in-out infinite; }
.app-catch-copy { font-size:min(2.3vmin,17.5px); line-height:1.2; margin-bottom:-2.6%; font-weight:400; color:var(--c-text-gray); }
html[lang="ja"] .app-catch-copy { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; }
html[lang="en"] .app-catch-copy { font-family: "Chakra Petch", "Arial", sans-serif; }
.app-title { font-size:min(5.7vmin,37.5px); line-height:1.2; margin-bottom:1.25%; font-weight:800; text-shadow:0 -0.1em var(--c-black); white-space:nowrap; transform:scale(1); }
html[lang="ja"] .app-title { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; }
html[lang="en"] .app-title { font-family: "Chakra Petch", "Arial", sans-serif; }
.app-title.animating { animation:titleScaleAnim 5s ease forwards; }
.app-subtitle { font-size:min(4.3vmin,25px); line-height:1.3; margin-bottom:19%; font-weight:800; text-shadow:0 -0.1em var(--c-black); white-space:nowrap; transform:scale(1) rotate3d(1,0,0,0deg); opacity:1; }
html[lang="ja"] .app-subtitle { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; }
html[lang="en"] .app-subtitle { font-family: "Chakra Petch", "Arial", sans-serif; }
.app-subtitle.animating { animation:subtitleBlurOpacityAnim 2s ease forwards,subtitleScaleRotateAnim 5s ease forwards; }
.store-buttons { display:flex; gap:1.5%; justify-content:center; align-items:center; width:100%; }
.store-link { display:block; height:10vmin; transition:opacity .3s; }
.store-link:hover { opacity:.5; cursor: url('image/pointer.svg') var(--cursor-hotspot-x) var(--cursor-hotspot-y), pointer; }
.store-link img { height:100%; width:auto; }

/* Boss Image */
.boss-image { --boss-width:min(70vmin,400px); --boss-slide-start:calc(var(--boss-width)*.5 + 45vw); right:45%; margin-right:calc(var(--boss-width)*-.5); position:absolute; z-index:var(--z-boss); pointer-events:none; width:var(--boss-width); transform:translateX(var(--boss-slide-start)); opacity:0; will-change:transform,top,opacity; }
.boss-image.animate { animation:bossSlideIn 7.5s cubic-bezier(0,1,0,1) 3.3s forwards; }
.boss-image.visible { opacity:1; }
.boss-image > video { width:100%; height:100%; object-fit:contain; display:block; }
.boss-shadow { position:absolute; left:-57.216%; margin-top:11.34%; width:250.515%; height:auto; z-index:-1; pointer-events:none; opacity:0.75; }
.boss-shadow video { width:100%; height:100%; object-fit:contain; display:block; }

/* =========================================
   Section 3: App List
   ========================================= */
.section-3 { min-height:90px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--c-white); scroll-snap-align:end; z-index:var(--z-section3); position:relative; }
.section-3.modal-active { z-index:100; }

.app-grid { display:flex; gap:0 18px; justify-content:center; align-items:center; flex-wrap:wrap; padding:0 30px; width:100%; box-sizing:border-box; }
.app-item { position:relative; width:70px; display:flex; flex-direction:column; align-items:center; }
.app-item-icon { width:70px; height:70px; border-radius:14px; display:block; transition:mask-image .3s; cursor:default; margin-top:-35px; margin-bottom:70px; mask-image:linear-gradient(180deg,#000 0,transparent); -webkit-mask-image:linear-gradient(180deg,#000 0,transparent); }
.app-item-icon.hovered { mask-image:linear-gradient(180deg,#000 100%,transparent); -webkit-mask-image:linear-gradient(180deg,#000 100%,transparent); }
.dropdown-menu { position:absolute; bottom:140px; left:50%; transform:translateX(-50%); width:150px; display:none; flex-direction:column; background:0 0; }
.dropdown-menu.show { display:flex; }
.dropdown-link { display:block; width:150px; margin-bottom:7px; transition:opacity .3s; cursor:pointer; cursor: url('image/pointer.svg') var(--cursor-hotspot-x) var(--cursor-hotspot-y), pointer; }
.dropdown-link:hover { opacity:.5; }
.app-name { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); color:var(--c-white); font-size:11px; white-space:nowrap; opacity:0; transition:opacity 1s; pointer-events:none; }
html[lang="ja"] .app-name { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; }
html[lang="en"] .app-name { font-family: "Chakra Petch", "Arial", sans-serif; }
.app-name.show { opacity:1; }
.copyright { color:var(--c-text-gray); font-size:12px; font-family: "Chakra Petch", "Arial", sans-serif; text-align:center; margin-top:-30px; }

/* Modal (Mobile) */
.modal-backdrop { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:var(--z-modal-bg); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.modal-backdrop.show { opacity:1; pointer-events:auto; }
.modal-app { position:fixed; top:0; left:0; width:100%; height:100%; z-index:var(--z-modal-content); display:none; justify-content:center; align-items:center; pointer-events:auto; box-sizing:border-box; }
.modal-app.show { display:flex; pointer-events:auto; }
.modal-app-content { background:var(--c-black); width:95%; padding:13px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:15px; pointer-events:auto; position:relative; z-index:1; }
.modal-app-icon { width:80px; height:80px; border-radius:16px; flex-shrink:0; }
.modal-app-name { font-size:11px; color:var(--c-white); text-align:center; word-wrap:break-word; white-space:normal; max-width:100%; margin-top:-5px; }
html[lang="ja"] .modal-app-name { font-family: "Meiryo", "メイリオ", "M PLUS 1p", sans-serif; }
html[lang="en"] .modal-app-name { font-family: "Chakra Petch", "Arial", sans-serif; }
.modal-app-buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.modal-app-buttons .store-link { height:48px; }

/* Dimmed State */
.app-grid.dimmed { position:relative; z-index:var(--z-active-popup); }
.app-grid.dimmed .app-item:not(.active-popup) { opacity:.2; transition:opacity .3s; pointer-events:none; }
.app-grid.dimmed .app-item:not(.active-popup) .dropdown-menu, .app-grid.dimmed .app-item:not(.active-popup) .app-name { display:none; }
.app-grid.dimmed .app-item:not(.active-popup) .app-item-icon { mask-image:linear-gradient(180deg,#000 0,transparent); -webkit-mask-image:linear-gradient(180deg,#000 0,transparent); }
.app-grid.dimmed .app-item.active-popup { opacity:1; pointer-events:auto; z-index:var(--z-active-popup); }
.app-item.active-popup .dropdown-menu { display:flex; position:relative; z-index:1; }
.app-item.active-popup .app-name { opacity:1; position:relative; z-index:1; }
.app-item.active-popup .app-item-icon { mask-image:linear-gradient(180deg,#000 100%,transparent); -webkit-mask-image:linear-gradient(180deg,#000 100%,transparent); position:relative; z-index:1; }

/* Anim Definitions */
@keyframes contentFadeInAnim { from{opacity:0} to{opacity:1} }
@keyframes contentZoomOutAnim { from{transform:scale(1.15)} to{transform:scale(1)} }
@keyframes titleScaleAnim { from{transform:scale(1.35)} to{transform:scale(1)} }
@keyframes subtitleBlurOpacityAnim { from{filter:blur(30px);opacity:0} to{filter:blur(0);opacity:1} }
@keyframes subtitleScaleRotateAnim { from{transform:scale(2.5) rotate3d(1,0,0,-90deg)} to{transform:scale(1) rotate3d(1,0,0,0deg)} }
@keyframes cornerAnimTL { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5px,-5px)} }
@keyframes cornerAnimTR { 0%,100%{transform:rotate(90deg) translate(0,0)} 50%{transform:rotate(90deg) translate(-5px,-5px)} }
@keyframes cornerAnimBR { 0%,100%{transform:rotate(180deg) translate(0,0)} 50%{transform:rotate(180deg) translate(-5px,-5px)} }
@keyframes cornerAnimBL { 0%,100%{transform:rotate(270deg) translate(0,0)} 50%{transform:rotate(270deg) translate(-5px,-5px)} }
@keyframes bossSlideIn { from{transform:translateX(var(--boss-slide-start))} to{transform:translateX(0)} }
@keyframes bg5FadeInOut { 0% { opacity: 0; } 40% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* =========================================
   Media Queries
   ========================================= */
@media (orientation:landscape) {
  .app-info, .app-info-layer { top:46%;}
  .boss-image { --boss-width:min(77dvh,388px); right:calc(var(--boss-width)*-.1); --boss-slide-start:calc(var(--boss-width)*.9); margin-right:0; }
  .boss-image.animate { animation:bossSlideIn 7.5s cubic-bezier(0,1,0,1) 3.3s forwards; }
  .app-logo { left:-5px; width:190px; max-height:50px; transform:none; }
}

@media (max-height:500px) and (orientation:landscape) {
  :root { --logo-icon-offset-vh:-.5vh; }
  .logo-title.active svg { height:16px; }
  .modal { width:95%; max-width:750px; height:90%; }
  .modal-header img { width:auto; height:40px; max-height:10vh; }
  .modal-backdrop.show { z-index:var(--z-modal-bg); }
  .app-grid.dimmed { z-index:calc(var(--z-modal-bg) + 1); }
  .app-grid.dimmed .app-item.active-popup { z-index:calc(var(--z-modal-bg) + 2); }
  .modal-app { align-items:flex-start; }
  .modal-app-content { margin-top:0; padding-top:13px; }
  .app-info, .app-info-layer { width:84dvh; height:84dvh; left:50%; bottom:auto; }
  .app-info-inner { width:100%; height:100%; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .app-icon { margin-top:-1%; margin-bottom:-1%; flex-shrink:0; }
  .app-catch-copy { font-size:2.9dvh; margin-bottom:-4%; flex-shrink:0; }
  .app-title { font-size:6.4dvh; margin-bottom:-3%; flex-shrink:0; line-height:normal; }
  .app-subtitle { font-size:4.5dvh; margin-bottom:0%; flex-shrink:0; line-height:normal; }
  .store-buttons { height:20%; width:auto; flex-shrink:0; margin-top:auto; margin-bottom:5%; }
}

@media (min-width:1000px) and (orientation:landscape) {
  .logo-title { width:960px; max-width:90vw; }
  .modal { width:95%; max-width:750px; height:90%; }
  .modal-header img { width:580px; height:auto; max-width:75vw; }
  .modal-header { padding:16px 20px 24px; }
  .modal-content { padding:20px; }
  #info-display { top:60px; }
  #info-display .csv-info-text { margin:15px 0; }
  html[lang="ja"] .text-1 { font-size:13px; }
  html[lang="en"] .text-1 { font-size:15px; }
  html[lang="ja"] .text-2 { font-size:14px; }
  html[lang="en"] .text-2 { font-size:16px; }
  html[lang="ja"] .text-3 { font-size:16px; }
  html[lang="en"] .text-3 { font-size:18px; }
  .mail-image { margin:14px 0; height:18px!important; }
  .app-logo { left:-6.25px; width:25.7vw; height:auto; transform:none; }
  .boss-image.animate { animation:bossSlideIn 7.5s cubic-bezier(0,1,0,1.25) 3.3s forwards; }
  .boss-shadow { opacity:1; }
  .section-3 { min-height:112.5px; }
  .app-grid { gap:0 22.5px; }
  .app-item { width:87.5px; }
  .app-item-icon { width:87.5px; height:87.5px; border-radius:17.5px; margin-top:-43.75px; margin-bottom:87.5px; }
  .dropdown-menu { bottom:175px; width:187.5px; }
  .dropdown-link { width:187.5px; margin-bottom:8.75px; }
  .app-name { bottom:50px; font-size:13.75px; }
  .copyright { font-size:15px; margin-top:-37.5px; }
  .modal-app-content { padding:16.25px; gap:18.75px; }
  .modal-app-icon { width:100px; height:100px; border-radius:20px; }
  .modal-app-name { font-size:13.75px; margin-top:-6.25px; }
  .modal-app-buttons { gap:12.5px; }
  .modal-app-buttons .store-link { height:60px; }
}

@media (min-width:700px) and (min-height:500px) {
  .app-icon { margin-top:0; margin-bottom:3.52%; }
  .app-catch-copy { margin-bottom:-2.6%; }
  .app-title { margin-bottom:1.25%; }
  .app-subtitle { margin-bottom:14.6%; }
  @keyframes subtitleBlurOpacityAnim { from{filter:blur(37.5px);opacity:0} to{filter:blur(0);opacity:1} }
}

@media (min-width:700px) and (min-height:900px) {
  .tile { width:42.5px; height:42.5px; }
  .marquee-container { height:900px; }
  .marquee-item { width:625px; height:575px; }
  .corner-item { width:12.5px; height:12.5px; }
  .corner-tl { top:-7.5px; left:11.25px; }
  .corner-tr { top:-7.5px; right:11.25px; }
  .corner-br { bottom:-7.5px; right:11.25px; }
  .corner-bl { bottom:-7.5px; left:11.25px; }
  @keyframes cornerAnimTL { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6.25px,-6.25px)} }
  @keyframes cornerAnimTR { 0%,100%{transform:rotate(90deg) translate(0,0)} 50%{transform:rotate(90deg) translate(-6.25px,-6.25px)} }
  @keyframes cornerAnimBR { 0%,100%{transform:rotate(180deg) translate(0,0)} 50%{transform:rotate(180deg) translate(-6.25px,-6.25px)} }
  @keyframes cornerAnimBL { 0%,100%{transform:rotate(270deg) translate(0,0)} 50%{transform:rotate(270deg) translate(-6.25px,-6.25px)} }
}

@media (max-width:700px) and (orientation:portrait) {
  .logo-title.active { left:14px; }
  .logo-title.active svg { height:14px; }
  .scroll_down { left:14px; }
  .modal { width:92%; height:80%; }
  .modal-open-button { padding:6px; }
  #contact-button { right:144px; }
  #privacy-button { right:46px; }
  #info-display { right:14px; }
}

@media (max-width:400px) and (orientation:portrait) {
  .modal { width:94%; height:80%; }
  .modal-header { padding:10px 10px 12px; }
  .modal-content { padding:10px; }
}

@media (max-width:350px) and (orientation:portrait) {
  .logo-title.active { left:10px; }
  .logo-title.active svg { height:12px; }
  .scroll_down { left:8px; }
  .scroll_down a, .scroll_down a:before, .scroll_down a:after, .scroll_down .scroll-icon { width:8px; }
  .modal-open-button { top:17px; padding:6px; }
  .modal-open-button img { height:8px; }
  #contact-button { right:124px; }
  #privacy-button { right:36px; }
  #lang-toggle { right:4px; }
  #info-display { right:10px; }
  #info-display .csv-info-text { font-size:10px; }
}