@charset "utf-8";

/*------------------------------------------



-------------------------------------------*/

:root {
--icon: "Font Awesome 6 Pro";
}

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.pc {
display: block;
}

.sp {
display: none;
}

html {
font-size: 62.5%;
/*10px*/
width: 100%;
height: 100%;
}

body {
background-color: #000;
color: #fff;
overflow-x: hidden;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
position: relative;
}

body {
height: 100%;
width: 100%;
}

body.fixed {
position: fixed;
width: 100%;
height: 100%;
}

#wrap {
width: 100%;
height: 100%;
position: relative;
}

#main {
height: 600px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 800px;
}

#contents {
background-image: url(../img/bg_menu.jpg);
background-repeat: no-repeat;
background-position: center center;
display: flex;
flex-direction: row-reverse;
height: 100%;
padding: 0 100px;
position: relative;
overflow: hidden;
}

#contents_footer {
align-items: flex-end;
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: -28px;
z-index: 10;
}

#contents_footer>a {
display: block;
vertical-align: bottom;
}

#contents_footer>a img {
height: 20px;
opacity: 0.5;
vertical-align: bottom;
width: auto;
}

#contents_footer p {
font-size: 0.9rem;
opacity: 0.5;
}

#contents_footer button {
align-items: center;
background-color: #999;
display: flex;
flex: 0 0 36px;
justify-content: start;
line-height: 1;
padding: 2px 3px;
}

#contents_footer button:hover {
cursor: pointer;
}


/*------------------------------------------
 menu
 -------------------------------------------*/

#contents #menu {
display: flex;
flex: 1;
flex-direction: row-reverse;
}

#contents #menu h1 {
flex: 0 0 23px;
padding: 70px 0 70px 0;
position: relative;
}

#contents #menu h1 img {
height: auto;
width: 23px;
}

#contents #menu h1 span {
display: none;
}

#contents #menu #contents_menu {
display: flex;
padding-right: 90px;
flex: 1;
position: relative;
}

#contents #menu #contents_menu:before {
background-color: rgba(255, 255, 255, 0.5);
content: " ";
position: absolute;
right: 50px;
animation: line 1.5s linear forwards;
top: 70px;
width: 2px;
}

@keyframes line {
0% {
height: 0;
}
100% {
height: calc(100% - 140px);
}
}

#contents #menu #contents_menu ol {
display: flex;
flex: 1;
flex-direction: row-reverse;
}

#contents #menu #contents_menu ol li {
flex: 0 0 62px;
}

#contents #menu #contents_menu ol li a {
display: block;
flex: 1;
height: 100%;
padding: 70px 0 70px 0;
position: relative;
}

#contents #menu #contents_menu ol.selected li a {
opacity: 0.5;
}

#contents #menu #contents_menu ol.selected li a.selected {
opacity: 1.0;
}

#contents #menu #contents_menu ol li a.selected:hover {
opacity: 1.0;
}

#contents #menu #contents_menu ol li a:hover:before {
background-color: rgba(0, 0, 0, 0.5);
content: " ";
height: 100%;
width: 62px;
left: 0;
top: 0;
position: absolute;
}

#contents #menu #contents_menu ol li a dl {
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px 0 0;
position: relative;
}

#contents #menu #contents_menu ol li a dl:before {
background-color: rgba(255, 255, 255, 0.5);
content: " ";
height: 7px;
left: 50%;
margin-left: -1px;
position: absolute;
top: 5px;
width: 2px;
}

#contents #menu #contents_menu ol li a dl dt {
align-items: flex-start;
display: flex;
min-height: 83px;
justify-content: center;
}

#contents #menu #contents_menu ol li a dl dd {
align-items: center;
display: flex;
font-size: 1.5rem;
justify-content: center;
letter-spacing: 0.2rem;
padding-top: 15px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}


/*------------------------------------------
 scene
 -------------------------------------------*/

#scene {
flex: 1;
}

#scene_menu {
background-color: rgba(0, 0, 0, 0.7);
height: 415px;
margin-top: -212px;
position: absolute;
right: -42px;
top: 50%;
z-index: 100;
animation: menu_slide_out 0.5s ease forwards;
}

#scene_menu:hover {
animation: menu_slide_in 0.5s ease forwards;
}

@keyframes menu_slide_in {
0% {
right: -42px;
}
100% {
right: 0;
}
}

@keyframes menu_slide_out {
0% {
right: 0;
}
100% {
right: -42px;
}
}

#scene_menu dl {
padding: 10px 0;
overflow: hidden;
}

#scene_menu dl dt {
padding: 0 11px 7px;
}

#scene_menu dl dt a img {
opacity: 1.0;
}

#scene_menu dl dt a img:hover {
opacity: 0.7;
}

#scene_menu dl dd ol {
display: flex;
flex-direction: column;
position: relative;
}

#scene_menu dl dd ol:before {
background-color: rgba(255, 255, 255, 0.5);
content: " ";
height: 1px;
left: 0;
position: absolute;
top: 0;
width: 6px;
}

#scene_menu dl dd ol li {
height: 34px;
padding: 0;
position: relative;
}

#scene_menu dl dd ol li:before {
background-color: rgba(255, 255, 255, 0.5);
content: " ";
height: 1px;
left: 0;
position: absolute;
bottom: 0;
width: 6px;
}

#scene_menu dl dd ol li a {
display: flex;
padding: 0 10px;
position: relative;
}

#scene_menu dl dd ol li a span {
display: none;
}

#scene_menu dl dd ol li a img {
opacity: 0.6;
}

#scene_menu dl dd ol li a:hover img {
opacity: 1.0;
}

#scene_menu dl dd ol li a:hover:before {
background-color: rgba(255, 255, 255, 0.3);
content: " ";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

#scene_menu dl dd ol li img {
height: 34px;
width: 57px;
}

#next_page_link {
position: absolute;
top: 410px;
left: 50px;
}


/*------------------------------------------
 scene05
 -------------------------------------------*/

#contents.scene05 {
background-image: url(../img/scene05_bg01.jpg);
}

#scene #scene05_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 50px;
left: 90px;
}

#scene #scene05_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 200px;
left: 210px;
}

#scene #scene05_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 220px;
left: 90px;
}

#scene #scene05_txt {
position: absolute;
top: 140px;
right: 236px;
z-index: 5;
}

#scene #scene05_txt img {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
}

#scene #scene05_bg img:first-child {
transform-origin: center bottom;
animation: yurayura 5s linear infinite;
position: absolute;
right: 140px;
bottom: 120px;
z-index: 3;
}

@keyframes yurayura {
0% {
transform: translateX(0) rotate(0deg) translateY(0);
}
25% {
transform: translateX(20px) rotate(0deg) translateY(-15px);
}
50% {
transform: translateX(-25px) rotate(0deg) translateY(15px);
}
75% {
transform: translateX(-20px) rotate(0deg) translateY(-20px);
}
100% {
transform: translateX(0) rotate(0deg) translateY(0);
}
}

#scene #scene05_bg img:nth-child(2) {
transform-origin: center bottom;
animation: yurayura 6s linear infinite;
position: absolute;
right: 120px;
bottom: 130px;
z-index: 2;
}

@keyframes yurayura {
0% {
transform: translateX(0) rotate(0deg) translateY(0);
}
25% {
transform: translateX(20px) rotate(0deg) translateY(-15px);
}
50% {
transform: translateX(-25px) rotate(0deg) translateY(15px);
}
75% {
transform: translateX(-20px) rotate(0deg) translateY(-20px);
}
100% {
transform: translateX(0) rotate(0deg) translateY(0);
}
}

#scene #scene05_bg img:nth-child(3) {
transform-origin: center bottom;
animation: yurayura 7s linear infinite;
position: absolute;
right: 90px;
bottom: 100px;
z-index: 1;
}

@keyframes yurayura {
0% {
transform: translateX(0) rotate(0deg) translateY(0);
}
25% {
transform: translateX(20px) rotate(0deg) translateY(-15px);
}
50% {
transform: translateX(-25px) rotate(0deg) translateY(15px);
}
75% {
transform: translateX(-20px) rotate(0deg) translateY(-20px);
}
100% {
transform: translateX(0) rotate(0deg) translateY(0);
}
}


/*------------------------------------------
　scene06
　-------------------------------------------*/

#contents.scene06 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene06_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
margin-left: -78px;
opacity: 0;
position: absolute;
top: 40px;
left: 50%;
z-index: 1;
}

#scene #scene06_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 205px;
left: 270px;
z-index: 1;
}

#scene #scene06_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 205px;
left: 370px;
z-index: 1;
}

#scene #scene06_bg {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}

#scene #scene06_bg img:first-child {
width: 50%;
height: 100%;
position: absolute;
left: 0;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
}

#scene #scene06_bg img:nth-child(2) {
width: 50%;
height: 100%;
position: absolute;
right: 0;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
}


/*------------------------------------------
　scene07
　-------------------------------------------*/

#contents.scene07 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene07_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 50px;
right: 100px;
z-index: 1;
}

#scene #scene07_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 210px;
right: 80px;
z-index: 1;
}

#scene #scene07_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 220px;
right: 150px;
z-index: 1;
}

#scene #scene07_bg img:first-child {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_Out;
animation-delay: 2.5s;
animation-duration: 5.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
}

#scene #scene07_bg .bg2 {
background-image: url(../img/scene07_bg02.jpg);
background-repeat: no-repeat;
background-position: center bottom;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_move;
animation-delay: 7.0s;
animation-duration: 2.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
width: 800px;
height: 600px;
}

@keyframes fadeIn_move {
100% {
background-position: center top;
opacity: 1;
filter: blur(0);
}
}


/*------------------------------------------
 scene08
 -------------------------------------------*/

#contents.scene08 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene08_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 50px;
left: 100px;
z-index: 1;
}

#scene #scene08_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 170px;
left: 250px;
z-index: 1;
}

#scene #scene08_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 230px;
left: 100px;
z-index: 1;
}

#scene #scene08_bg {
position: relative;
height: 600px;
width: 800px;
}

#scene #scene08_bg .bg1 {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
}

#scene #scene08_bg .bg1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_scale_up_fade_out;
animation-delay: 2.5s;
animation-duration: 7.0s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
transform: scale(1.0, 1.0);
}

@keyframes fadeIn_scale_up_fade_out {
100% {
opacity: 1;
filter: blur(0);
transform: scale(1.2, 1.2);
}
}

#scene #scene08_bg .bg2 {
background-image: url(../img/scene08_bg02.jpg);
background-repeat: no-repeat;
background-position: center bottom;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_move;
animation-delay: 7.0s;
animation-duration: 2.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
width: 800px;
height: 600px;
}

@keyframes fadeIn_move {
0% {}
100% {
background-position: center center;
opacity: 1;
filter: blur(0);
}
}


/*------------------------------------------
 scene09
 -------------------------------------------*/

#contents.scene09 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene09_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 50px;
right: 100px;
z-index: 1;
}

#scene #scene09_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 220px;
right: 220px;
z-index: 1;
}

#scene #scene09_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 220px;
right: 100px;
z-index: 1;
}

#scene #scene09_bg img:first-child {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeOut;
animation-delay: 5.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 1;
}

#scene #scene09_bg img:nth-child(2) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn;
animation-delay: 5.0s;
animation-duration: 1.0s;
animation-fill-mode: forwards;
filter: blur(10px);
opacity: 0;
}

#scene #scene09_bg img:nth-child(3) {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn;
animation-delay: 5.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}


/*------------------------------------------
 scene10
 -------------------------------------------*/

#contents.scene10 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene10_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 50px;
left: 95px;
z-index: 1;
}

#scene #scene10_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 190px;
left: 240px;
z-index: 1;
}

#scene #scene10_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 230px;
left: 100px;
z-index: 1;
}

#scene #scene10_bg .bg1 {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
}

#scene #scene10_bg .bg1 img {
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_Out_move_top_down;
animation-delay: 2.5s;
animation-duration: 6.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateY(-50px);
}

@keyframes fadeIn_Out_move_top_down {
0% {
opacity: 0;
filter: blur(0);
}
50% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 0;
filter: blur(0);
transform: translateY(0);
}
}

#scene #scene10_bg .bg2 {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
}

#scene #scene10_bg .bg2 img {
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_Out_move_right_left;
animation-delay: 7.5s;
animation-duration: 6.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateX(50px);
}

@keyframes fadeIn_Out_move_right_left {
0% {
opacity: 0;
filter: blur(0);
}
50% {
background-position: center 30%;
opacity: 1;
filter: blur(0);
}
100% {
background-position: center 30%;
opacity: 0;
filter: blur(0);
transform: translateX(0);
}
}

#scene #scene10_bg .bg3 img {
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_move_bottom_top;
animation-delay: 10.5s;
animation-duration: 8.0s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateY(80px);
}

@keyframes fadeIn_move_bottom_top {
0% {
opacity: 0;
filter: blur(0);
}
100% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}


/*------------------------------------------
 scene11
 -------------------------------------------*/

#contents.scene11 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene11_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 50px;
right: 100px;
z-index: 1;
}

#scene #scene11_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 220px;
right: 240px;
z-index: 1;
}

#scene #scene11_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 230px;
right: 100px;
z-index: 1;
}

#scene #scene11_bg {
position: relative;
height: 600px;
width: 800px;
}

#scene #scene11_bg .bg1 {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
}

#scene #scene11_bg .bg1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_scale_down_fade_out;
animation-delay: 2.5s;
animation-duration: 7.0s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
transform: scale(1.1, 1.1);
}

@keyframes fadeIn_scale_down_fade_out {
100% {
opacity: 1;
filter: blur(0);
transform: scale(1.0, 1.0);
}
}

#scene #scene11_bg .bg2 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_scale_up_fade_out;
animation-delay: 6.0s;
animation-duration: 7.0s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
transform: scale(1.0, 1.0);
}

@keyframes fadeIn_scale_up_fade_out {
100% {
opacity: 1;
filter: blur(0);
transform: scale(1.1, 1.1);
}
}

#scene #scene11_bg .bg3 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn_scale_down_fade_out;
animation-delay: 10.0s;
animation-duration: 7.0s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
transform: scale(1.1, 1.1);
}

@keyframes fadeIn_scale_down_fade_out {
100% {
opacity: 1;
filter: blur(0);
transform: scale(1.0, 1.0);
}
}


/*------------------------------------------
 scene12
 -------------------------------------------*/

#contents.scene12 {
background-image: none;
background-color: #000;
padding: 0;
}

#scene #scene12_title img:first-child {
animation-name: fadeIn;
animation-delay: 0.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
margin-left: -80px;
opacity: 0;
position: absolute;
top: 40px;
left: 50%;
z-index: 1;
}

#scene #scene12_title img:nth-child(2) {
animation-name: fadeIn;
animation-delay: 1.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 205px;
left: 300px;
z-index: 1;
}

#scene #scene12_title img:nth-child(3) {
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
position: absolute;
top: 210px;
left: 375px;
z-index: 1;
}

#scene #scene12_bg .bg1 {
position: absolute;
height: 30%;
top: 0;
left: 0;
width: 284px;
}

#scene #scene12_bg .bg1 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn;
animation-delay: 2.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
object-fit: cover;
}

#scene #scene12_bg .bg2 {
position: absolute;
height: 70%;
bottom: 0;
left: 0;
width: 284px;
}

#scene #scene12_bg .bg2 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn;
animation-delay: 3.0s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
object-fit: cover;
}

#scene #scene12_bg .bg3 {
position: absolute;
height: 70%;
top: 0;
right: 0;
width: 284px;
}

#scene #scene12_bg .bg3 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn;
animation-delay: 3.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
object-fit: cover;
}

#scene #scene12_bg .bg4 {
position: absolute;
height: 30%;
bottom: 0;
right: 0;
width: 284px;
}

#scene #scene12_bg .bg4 img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
filter: blur(2px);
opacity: 0;
object-fit: cover;
}


/*------------------------------------------
 animation(common)
 -------------------------------------------*/

@keyframes fadeIn {
0% {}
100% {
opacity: 1;
filter: blur(0);
}
}

@keyframes fadeOut {
0% {}
100% {
opacity: 0;
filter: blur(0);
}
}

@keyframes fadeIn_Out {
0% {
opacity: 0;
filter: blur(0);
}
25% {
opacity: 1;
filter: blur(0);
}
75% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 0;
filter: blur(0);
}
}


/*------------------------------------------
opning
-------------------------------------------*/

#poster {
width: 1280px;
height: 720px;
position: absolute;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

#poster:after {
background-image:url(../img/t_thumb.png);
background-size:274px 362px;
background-repeat:no-repeat;
content: " ";
right:100px;
top:80px;
position:absolute;
z-index:12;
width:274px;
height:362px;
}
#poster.di_none {
display: none;
}

#poster > img {
width: 100%;
height: auto;
}

#poster #skip {
align-items:center;
background-color:#fff;
border-radius:21px;
color:#333;
display:flex;
justify-content:center;
font-size:1rem;
position:absolute;
z-index: 10;
top:300px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height:42px;
text-align:center;
width:160px;
}
#poster #skip:hover {
cursor: pointer;
opacity: 0.9;
}

#poster #skip span {
line-height:1;
font-size:1.6rem;
}

#video-btn {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 90px;
height: 90px;
border-radius: 50%;
background-color:transparent;
border:6px solid #fff;
text-align: center;
vertical-align: middle;
z-index: 11;
opacity:0.7;
}

#video-btn span {
color:#fff;
opacity:0.7;
}

#video-btn i {
font-size: 2.6rem;
margin-right: -5px;
margin-bottom: -5px;
}

#video-btn:hover {
border:6px solid #82ae46;
cursor: pointer;
opacity: 0.9;
}
#video-btn:hover span {
color:#82ae46;
opacity: 0.9;
}

#opening {
display: none;
animation: fadeIn 1.5s ease;
}

#opening.playStart {
display: block;
animation: fadeIn 1.5s ease;
}

#opening.playEnd {
animation: fadeOut 1.0s ease;
}

video#movie {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
width: 100vw;
height: auto;
vertical-align: bottom;
}

#main {
display:none;
}

#main.startView {
display: block;
animation: fadeIn 1.5s ease;
}

#mv {
height: 100vh;
background-color: rgb(216, 251, 254);
display: flex;
justify-content: center;
align-items: center;
}