@charset "UTF-8";
/* CSS Document */
@import "reset5.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');

body { color: #fff; margin: 0; padding: 0; font-family: UniversNextPro-Regular, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; font-size: 15px; letter-spacing: 0.088em; line-height: 0; font-weight: 400; -webkit-font-smoothing: antialiased; background: #111 }
html { min-height: 100%; }

h1,h2,h3,h4 { letter-spacing: 0.24em; line-height: 1.66em; font-weight: 500; font-feature-settings: "palt" 1 }
p, li { font-size: 14px; letter-spacing: 0.088em; line-height: 2em; font-weight: normal; font-feature-settings: "palt" 1 }

a {}
a:link { color: #fff; text-decoration: none }
a:visited { color: #fff; text-decoration: none }
a:hover { color: #666; }

a.pj { display: block }
.txtl { /*opacity: 0*/ display: inline-block }

/*#wrapper { position: relative; width: 100%; z-index: 10; }*/
#wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  top: 0;
  left: 0;
  overflow: auto;
}

.fd { opacity: 0; transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.active { opacity: 1; }
.sec, .std { position: relative; width: 100%; font-size: 12px; }
.handoff-sentinel{
        height: 1px;     /* 末尾に極小の当たり判定 */
    }

#loader { position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -16px; z-index: 1001 }
.loader svg {
	fill: none;
	stroke: #b5b5b6;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

.sec { position: relative }
.sec h1 { position: absolute; left: 0; top: 4vw; z-index: 10; width: 100%; font-size: 64px; line-height: 1.12em; font-family: UniversNextPro-BoldCond, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; text-align: center }
.sec h1 i { font-size: 48px }
.sec h2 { position: absolute; left: 0; top: 8.8vw; z-index: 10; width: 100%; font-size: 32px; line-height: 1.6em; font-family: UniversNextPro-BoldCond, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; text-align: center }
.sec p.cap { margin: 1em }
.mov { position: relative; background: #000; }
.std { height: auto; }

.big-title { padding: 12vw 8vw }
.big-title h2 { font-size: 36px; line-height: 1.72em; text-align: center }

.portrait { text-align: center }
.portrait h2 { font-size: 24px; line-height: 1.6em; font-family: UniversNextPro-BoldCond, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; text-align: center; }
.portrait .pic { width: 33.33%; margin: 6vw auto }
.portrait h1 { font-size: 64px; line-height: 1.12em; font-family: UniversNextPro-BoldCond, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; text-align: center; }
.portrait h1 i { font-size: 42px }
.portrait h1 abbr { display: inline-block; font-size: 32px; padding-top: 1em }

#footer { padding: 6vw 4vw 4vw; text-align: center }
#footer .lang {}
#footer .lang li { display: inline-block; font-size: 18px; font-family: UniversNextPro-Bold, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; }
#footer .lang li:nth-child(1)::after { content: "|" }
#footer .lang li a { display: block; font-family: UniversNextPro-Regular, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; }
#footer .hi-links { margin: 3em }
#footer .hi-links li { display: inline-block; }
#footer .hi-links li a { display: block; padding: 0 1em }

#lay { position: fixed; width: 100%; height: 100vh; left: 0; bottom: 0; background: #000; z-index: 100 }

.pt-0 { padding-top: 0 !important }
.mb-1 { margin-bottom: 1em !important }
.mt-3 { margin-top: 3em !important }
.mt-6 { margin-top: 6em !important }
.lh-1 { line-height: 1em !important }
.pc-none { display: none !important }
.sp-none { display: block !important }


@media screen and (max-width: 780px) {
    body { font-size: 12px; letter-spacing: 0.088em; }
    h2,h3,h4 { letter-spacing: 0.124em; line-height: 1.66em; }
    p { font-size: 12px; letter-spacing: 0.088em; line-height: 1.9em; }
    
    .std{
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
        /* 高さ指定はケースに応じて：
        1) セクション全体を自然高さにしたい → 高さ指定しない（setHeights:false前提）
        2) 画面内に収めて中身だけスクロール → height: 100vh; を付与 */
    }
    .handoff-sentinel{
        height: 1px;/* 末尾に極小の当たり判定 */
    }
    #wrapper { scroll-snap-type: y proximity; }

    
    #lay { position: fixed; width: 100%; height: 100vh; left: 0; bottom: -100vh; background: #000; display: none; z-index: 100 }
    #lower #lay { bottom: 0; display: block; }

	.pc-none { display: block !important }
	.sp-none { display: none !important }
    
}

@media screen and (max-width: 440px) {

}