@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Noto+Serif:wght@400;500&display=swap');
:root{color-scheme:dark;--pad:clamp(24px,5vw,92px);--sans:'Noto Sans JP',sans-serif;--serif:'Noto Serif',serif;--ease:cubic-bezier(.19,1,.22,1);--progress:0}
*{box-sizing:border-box}html{font-size:100%}body{margin:0;background:#080e18;color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased;min-width:280px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:8px}::selection{background:#fff;color:#101827}.skip{position:fixed;z-index:20;left:24px;top:-100px;background:white;color:#121a28;padding:14px 20px}.skip:focus{top:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.filter-definitions{position:absolute;width:0;height:0;overflow:hidden}
.portal{position:relative;min-height:52rem;height:100svh;isolation:isolate;overflow:hidden}.portal-header{position:absolute;z-index:6;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:26px var(--pad);gap:30px;background:linear-gradient(#0003,transparent)}.company-brand{display:flex;align-items:center;gap:25px}.page-label{font-size:.875rem;letter-spacing:.08em;border-left:1px solid #ffffff50;padding-left:25px}.header-tagline{font-size:.875rem;letter-spacing:.12em}
.logo-crop{position:relative;display:block;overflow:hidden;flex-shrink:0}.logo-crop>img{position:absolute;max-width:none;height:auto;display:block;filter:url(#logo-knockout)}.logo-japan{width:108px;aspect-ratio:3094/2270}.logo-japan>img{width:161.603103%;left:-30.801551%;top:-58.634361%}.logo-voice{width:100%;aspect-ratio:146/160}.logo-voice>img{width:200.684932%;left:-50%;top:-40.625%}.logo-news{width:85px;aspect-ratio:817/561}.logo-news>img{width:102.815177%;left:-2.325581%;top:-2.495544%}.logo-fx{width:54px;aspect-ratio:819/822}.logo-fx>img{width:153.113553%;left:-27.716728%;top:-26.277372%}.logo-cre{width:110px;aspect-ratio:522/133}.logo-cre>img{width:111.111111%;left:-7.471264%;top:-10.526316%}
.scene-deck{position:absolute;inset:0}.scene{position:absolute;inset:0;background:#080e18;opacity:0;visibility:hidden;pointer-events:none;z-index:0;transition:opacity 1s var(--ease),visibility 1s}.scene.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}.scene.was-active{visibility:visible;z-index:1}.scene-visual,.scene-shade{position:absolute;inset:0;overflow:hidden}.scene-image{height:100%;width:100%;object-fit:cover;display:block;transform:scale(1);transform-origin:54% 42%;will-change:transform}.scene.is-active .scene-image{animation:camera-push 20s linear both}.estate-image{object-position:50% 20%;transform-origin:50% 36%}.media-image{object-position:center 40%;transform-origin:72% 36%}.scene.is-active .scene-visual{animation:image-reveal 1.25s var(--ease) both}.scene-shade{background:linear-gradient(90deg,#020b1be0 0%,#020b1b88 29%,#020b1b0a 63%),linear-gradient(0deg,#020b1bf0 0%,#020b1b4d 27%,transparent 58%)}.scene-media .scene-shade{background:linear-gradient(90deg,#05142aee 0%,#07162b94 29%,#07162b00 61%),linear-gradient(0deg,#051226f0 0%,#05122633 40%,transparent 73%)}
.scene-copy{position:absolute;left:var(--pad);top:clamp(175px,23vh,320px);width:min(51%,760px)}.scene-kicker{font-size:.8125rem;letter-spacing:.18em;font-weight:400;margin:0 0 28px;overflow:hidden}.scene-copy h2{font-size:clamp(2.75rem,4.8vw,5.375rem);font-weight:400;letter-spacing:.045em;line-height:1.5;margin:0 0 27px}.copy-line{display:block;overflow:hidden}.copy-in{display:block}.scene.is-active .copy-in{animation:type-reveal 1.25s .08s var(--ease) both}.scene.is-active .copy-line:nth-child(1) .copy-in{animation-delay:.15s}.scene.is-active .copy-line:nth-child(2) .copy-in{animation-delay:.25s}.scene-description{font-size:1rem;line-height:2;letter-spacing:.065em;margin:0 0 27px}.scene.is-active .scene-description{animation:detail-reveal 1.1s .38s var(--ease) both}.scene-link{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:12px 26px;border:1px solid #ffffff80;font-size:.875rem;letter-spacing:.05em;background:#ffffff09;transition:background .3s,color .3s;position:relative;overflow:hidden}.scene-link>span{position:relative;z-index:1}.scene-link:before{content:'';position:absolute;inset:0;background:#fff;transform:translateY(103%);transition:transform .55s var(--ease)}.scene-link:hover{color:#121a28}.scene-link:hover:before{transform:none}.scene.is-active .scene-link{animation:detail-reveal 1.1s .46s var(--ease) both}.scene-side{position:absolute;right:var(--pad);top:43%;font-size:.75rem;letter-spacing:.15em;writing-mode:vertical-rl}.series-brands{display:flex;align-items:center;gap:23px;margin-top:30px;opacity:.88}.scene.is-active .series-brands{animation:detail-reveal 1.1s .52s var(--ease) both}
.scene-voice{background:#030304}.voice-visual{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 46%,#13151a 0%,#030304 49%)}.voice-symbol{position:absolute;left:72%;top:44%;width:clamp(235px,29vw,510px);transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px #ffffff09);opacity:0}.scene-voice.is-active .voice-symbol{animation:voice-emerge 2.6s .05s var(--ease) both}.voice-word{position:absolute;left:72%;top:73%;transform:translateX(-50%);font-family:var(--serif);font-size:clamp(1.375rem,2.2vw,2.5rem);letter-spacing:.32em;font-weight:400;color:#ffffffb0}.scene-voice.is-active .voice-word{animation:detail-reveal 2s .8s var(--ease) both}.scene-voice .scene-copy{width:min(52%,800px)}.scene-voice .scene-copy h2{font-size:clamp(2.625rem,4.3vw,4.875rem)}
.playback-control{position:absolute;right:var(--pad);bottom:190px;z-index:5;display:flex;align-items:center;gap:20px}.scene-count{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:.8125rem;letter-spacing:.05em}.count-rule{height:1px;width:33px;background:#ffffff60}.motion-control{height:38px;width:38px;display:grid;place-items:center;background:#0000001a;border:1px solid #ffffff50;border-radius:50%;transition:background .3s}.motion-control:hover{background:#ffffff20}.pause-icon{width:9px;height:12px;border-left:2px solid white;border-right:2px solid white}.motion-control[aria-pressed=true] .pause-icon{border:0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid white;margin-left:3px}
.destination-dock{position:absolute;left:var(--pad);right:var(--pad);bottom:69px;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.field-select{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:5px 13px;padding:21px 0 14px;text-align:left;background:none;border:0;color:#ffffffad;transition:color .4s}.field-number{font-family:var(--serif);font-size:.8125rem}.field-label{font-size:1.625rem;letter-spacing:.07em;font-weight:400;transition:transform .5s var(--ease)}.field-english{grid-column:2;font-size:.75rem;letter-spacing:.1em}.field-track{position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff50}.field-track>i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:opacity .5s;opacity:0}.field-select.is-active{color:#fff}.field-select.is-active .field-track{height:2px}.field-select.is-active .field-track>i{opacity:1;transform:scaleX(var(--progress))}.field-select:hover{color:#fff}.field-select:hover .field-label{transform:translateX(5px)}.motion-paused .field-select.is-active .field-track>i{transform:scaleX(1)}.portal-footer{position:absolute;bottom:0;left:var(--pad);right:var(--pad);padding:17px 0 24px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff20;font-size:.75rem;letter-spacing:.06em;color:#ffffffc2}.motion-paused .scene-image{animation-play-state:paused!important}.no-js .field-controls,.no-js .playback-control{display:none}.no-js .voice-symbol{opacity:1}
@keyframes camera-push{from{transform:scale(1)}to{transform:scale(1.11)}}@keyframes image-reveal{from{clip-path:polygon(0 0,0 0,-12% 100%,0 100%);filter:brightness(.75)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}}@keyframes type-reveal{from{transform:translateY(115%);opacity:0}to{transform:none;opacity:1}}@keyframes detail-reveal{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}@keyframes voice-emerge{0%{opacity:0;filter:blur(25px) brightness(.15);transform:translate(-50%,-44%) scale(.88)}38%{opacity:.3;filter:blur(8px) brightness(.6)}100%{opacity:1;filter:blur(0) drop-shadow(0 0 20px #ffffff09);transform:translate(-50%,-50%) scale(1)}}
@media(min-width:1600px){.scene-copy{top:21vh}}
@media(max-width:1100px){.scene-copy{width:57%}.scene-copy h2{font-size:clamp(2.75rem,5vw,3.625rem)}.scene-voice .scene-copy h2{font-size:clamp(2.25rem,4.5vw,3.25rem)}.voice-symbol{left:76%;width:28vw}.voice-word{left:76%;top:68%}}
@media(max-width:760px){.portal{min-height:51rem}.portal-header{padding-top:22px}.logo-japan{width:80px}.company-brand{gap:17px}.page-label{padding-left:17px}.header-tagline{display:none}.scene-copy{top:29%;width:calc(100% - var(--pad)*2)}.scene-copy h2{font-size:clamp(2.25rem,7.5vw,3.25rem);line-height:1.5;margin-bottom:23px;letter-spacing:.035em}.scene-kicker{margin-bottom:20px}.scene-description{font-size:1rem;margin-bottom:22px;letter-spacing:.035em}.destination-dock{gap:15px;bottom:73px}.field-select{grid-template-columns:1fr;gap:8px;padding:15px 0 8px}.field-number{font-size:.75rem}.field-label{font-size:1.125rem;letter-spacing:.02em}.field-english{grid-column:1;font-size:.75rem;letter-spacing:0}.portal-footer{font-size:.75rem;padding-bottom:20px;flex-wrap:wrap;gap:8px}.scene-side{display:none}.scene-shade{background:linear-gradient(0deg,#06101af2,#06101aa6 39%,#06101a22 83%)}.estate-image{object-position:42% center;transform-origin:72% 36%}.media-image{object-position:73% center;transform-origin:58% 36%}.scene-media .scene-shade{background:linear-gradient(0deg,#051226fb 0%,#051226a6 47%,#0512260a 79%)}.playback-control{bottom:205px;gap:15px}.scene-count{font-size:.75rem}.count-rule{width:22px}.motion-control{width:34px;height:34px}.series-brands{gap:18px;margin-top:24px}.logo-news{width:62px}.logo-fx{width:40px}.logo-cre{width:85px}.scene-voice .scene-copy{top:36%;width:calc(100% - var(--pad)*2)}.scene-voice .scene-copy h2{font-size:clamp(2rem,6.7vw,3rem)}.voice-symbol{left:72%;top:23%;width:clamp(130px,33vw,240px)}.voice-word{left:72%;top:35%;font-size:.8125rem;letter-spacing:.24em}}
@media(max-width:350px){:root{--pad:20px}.field-label{font-size:1rem}.field-english{font-size:.75rem}.destination-dock{gap:12px}.scene-copy h2{font-size:2rem}.scene-voice .scene-copy h2{font-size:1.75rem}.page-label{letter-spacing:0}.portal-footer>span:last-child{font-size:.75rem}.scene-count{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scene-image{transform:none}.scene-voice.is-active .voice-symbol{opacity:1;transform:translate(-50%,-50%);filter:none}}
.portal-footer{z-index:5}
@media(max-width:760px){.scene-copy{top:calc(10rem + 7vh)}.scene-voice .scene-copy{top:calc(14rem + 7vh)}.destination-dock{bottom:calc(4rem + 24px)}}
/* Reserve more vertical space as the user's default text size increases. */
@media(max-width:760px){.portal{min-height:max(51rem,calc(64rem - 208px))}}
.skip{top:16px;transform:translateY(calc(-100% - 32px))}.skip:focus{transform:none}
.motion-control:disabled{cursor:default;opacity:.55}
