@charset "utf-8";
/* CSS Document */

:root { --screen-width: 1920px; --screen-height: 1080px;}

html {margin: 0; padding: 0; overflow-x: hidden; overflow-y: hidden;}
body {margin: 0; padding: 0; overflow-x: hidden; font-size: 80%; width: var(--screen-width); height: var(--screen-height);}

body > video {width: 110vw; z-index: 0; position: absolute;}
body > section {width: 100vw; height: 100vh; margin: 0; background: url("../img/28484828_l.jpg") no-repeat center center / 100%;}
body > section h1 {margin: 0; position: absolute; top: 30%; left: 50%; z-index: 100; color: #fff; transform: translate(-50%, -70%); letter-spacing: 0.3em; font-weight: 100; text-shadow: 0px 0px 10px #000; font-size: 50px; font-size: 30px; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal;}
body > section > article.bg {width: 100vw; height: 100vh; background: url("../img/29351739_s.png") no-repeat center center / 100%; position: absolute;}
body > section > article > ul {display: flex; margin: 0; padding: 0; position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%); width: 90%; justify-content: space-between;}
.fadeIn {opacity: 0; animation-name: fadeIn; animation-fill-mode: forwards;}
.fadeIn.delay01 {animation-duration: 1s;}
.fadeIn.delay02 {animation-duration: 2s;}
.fadeIn.delay03 {animation-duration: 3s;}
.fadeIn.delay04 {animation-duration: 4s;}
.fadeIn.delay05 {animation-duration: 5s;}
.fadeIn.delay06 {animation-duration: 6s;}
.fadeIn.delay07 {animation-duration: 7s;}
.fadeIn.delay08 {animation-duration: 8s;}
.fadeIn.delay09 {animation-duration: 9s;}
.fadeIn.delay10 {animation-duration: 10s;}
/* フェードインアニメーション */
@keyframes fadeIn {0% {} 100% {opacity: 1;}}

body > section > article > ul li {flex-basis: calc(100% / 4 - 1%); list-style-type: none;}
body > section > article > ul li a {display: block; line-height: 1em;}
body > section > article > ul li a img {width: 100%; outline: 0; border: 2px solid #4e91be; box-sizing: border-box;}
body > section > article > ul li:focus-within a img {border: 2px solid #8fd621;}
body > section > article > ul li:focus-within, ul li a:focus-within {outline: 0;}

body > section > article > video {width: auto; height: 110vh; z-index: 1; position: absolute; left: -70%; top: 0;}
body > section > article > video.player {width: 400px; z-index: 1; position: absolute; left: 30px; top: unset; bottom: 30px; height: auto;}

body > section > article > div.message {width: 700px; position: absolute; color: #fff; font-size: 18px; z-index: 10; top: 100px; right: 100px;}
body > section > article > div.message p {text-shadow: 0 0 11px #1b1a14; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-size: 1.2em; letter-spacing: 0.1em; line-height: 1.6em; font-size: 14px;}
body div.button {position: absolute; bottom: 20px; right: 20px; border: 1px solid; width: fit-content; background: #fff;}
body div.button a {text-decoration: none; color: #000; padding: 10px 20px; display: block;}

body div.button.player {position: absolute; bottom: 20px; left: 20px; border: 1px solid; width: fit-content; background: #fff;}
body div.button.start {position: absolute; bottom: 20px; left: 50%; border: 1px solid; width: fit-content; background: #fff; transform: translate(-50%, -10%);}
body div.button.end {position: absolute; bottom: 20px; left: 50%; border: 1px solid; width: fit-content; background: #fff; transform: translate(-50%, -10%);}

html.lity-active body div.button.stop {position: absolute; top: 10px; right: 10px; bottom: unset; z-index: 10000;}
html.lity-active body div.button.stop {display: block; transition-duration: 1s;}
html body div.button.stop {display: none;}