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

body,html,#app { height:100%; }
body { background-color:#000;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
 -moz-transition: opacity 2s ease 0s;
    -webkit-transition: opacity 2s ease 0s;
    -o-transition: opacity 2s ease 0s;
    -ms-transition: opacity 2s ease 0s;
    transition: opacity 2s ease 0s;
	 }
.intro body {  }
.intro body:before { content:""; display:block; width:100%; height:100%; position:fixed; top:0; left:0; background-image:url(../img/start.jpg); background-repeat:no-repeat; background-size:cover; background-position:center bottom; }

.intros body { opacity:0; }

h1 img { height:100%; width:auto;  } 
h1 { position:fixed; top:1%; right:1%; height:68%; width:auto; opacity:0; 
 -moz-transition: opacity 2s ease 0s;
    -webkit-transition: opacity 2s ease 0s;
    -o-transition: opacity 2s ease 0s;
    -ms-transition: opacity 2s ease 0s;
    transition: opacity 2s ease 0s;
	}
.intro h1 { opacity:1; }
h2 img { height:100%; width:auto;  } 
h2 img.v { display:inline; }
h2 img.l { display:none; }
h2 { position:fixed; top:2%; left:2%; height:68%; width:auto; opacity:0;
 -moz-transition: opacity 2s ease 0s;
    -webkit-transition: opacity 2s ease 0s;
    -o-transition: opacity 2s ease 0s;
    -ms-transition: opacity 2s ease 0s;
    transition: opacity 2s ease 0s;
	 }
.intro h2 { opacity:1; }

h3 img { height:100%; width:auto;  } 
h3 { position:fixed; bottom:1%; left:50%; height:18%; width:auto; opacity:0; transform:translateX(-50%); 
 -moz-transition: opacity 2s ease 0s;
    -webkit-transition: opacity 2s ease 0s;
    -o-transition: opacity 2s ease 0s;
    -ms-transition: opacity 2s ease 0s;
    transition: opacity 2s ease 0s;
	}
.intro h3 { opacity:1; }

video { height:100%; width:auto; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0;
 /*-moz-transition: all 2s ease 0s;
    -webkit-transition: all 2s ease 0s;
    -o-transition: all 2s ease 0s;
    -ms-transition: all 2s ease 0s;
    transition: all 2s ease 0s;*/
	 }
.intro video { opacity:0; }
video.show { opacity:1; /*animation: love3 1.4s ease 0s infinite;*/}
video.black {transition: none; }
.gray video {  }
video.blur { animation: scale .2s ease 0s infinite;}
#video3,#video6 { filter: grayscale(70%); }
#video6 { filter: grayscale(100%) contrast(200%); }
video.blur2 { animation: love3 .1s ease 0s infinite;}
video.blur3 { animation: love4 .1s ease 0s infinite;}

#flash { width:100%; height:100%; background-color:#FFF; position:fixed; to:0; left:0; opacity:0; }
.flash2 #flash { background-color:#EF191C; }
.flash #flash {animation: flash .4s ease 0s infinite; }
.flash2 #flash {animation: flash .2s ease 0s infinite; }

@keyframes scale {
0% { transform:scale(1) translate(-50%,-50%);}
25% {transform:scale(1.1) translate(-50%,-50%);}
50% { transform:scale(1) translate(-50%,-50%);}
75% { transform:scale(1.1) translate(-50%,-50%);}
100% { transform:scale(1) translate(-50%,-50%);}
}

@keyframes love3 {
0% { transform:translate(-50%,-50%);}
25% {transform:translate(-50%,-45%);}
50% { transform:translate(-50%,-50%);}
75% { transform:translate(-50%,-55%);}
100% { transform:translate(-50%,-50%);}
}

@keyframes love4 {
0% { transform:translate(-50%,-50%) scale(1);}
25% {transform:translate(-50%,-45%) scale(1.1);}
50% { transform:translate(-50%,-50%) scale(1);}
75% { transform:translate(-50%,-55%) scale(1.1);}
100% { transform:translate(-50%,-50%) scale(1);}
}

@keyframes flash {
0% { opacity:1;}
100% { opacity:0;  }
}


#telop { width:100%; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:0vw; box-sizing:border-box; color:#fff; font-size:14vw; font-family: 'Noto Serif JP', serif; line-height:1; letter-spacing:-.1em; text-align:center;


-moz-transition: opacity .8s ease 0s;
    -webkit-transition: opacity .8s ease 0s;
    -o-transition: opacity .8s ease 0s;
    -ms-transition: opacity .8s ease 0s;
    transition: opacity .8s ease 0s;
	}
.height #telop { height:80%; line-height:1.8; }
#telop2 { width:100%; position:fixed; top:50%; left:0; padding:3vw; box-sizing:border-box; color:#fff; text-align:center; font-weight:bold; font-size:8vw; line-height:1.4; transform:translateY(-50%);

-moz-transition: opacity .3s ease 0s;
    -webkit-transition: opacity .3s ease 0s;
    -o-transition: opacity .3s ease 0s;
    -ms-transition: opacity .3s ease 0s;
    transition: opacity .3s ease 0s;
	}
#telop img { height:45vh; width:auto; }
#telop2 strong { font-size:80%; margin-bottom:.4em; display:block; }
.gray #telop { top:50%;transform:translateY(-50%);padding:0vw 3vw; bottom:auto;font-size:10vw; color:rgba(255,17,21,1.00); font-weight:900;
 }
#telop:empty { opacity:0; }
#telop strong { color:#E1181C; font-size:150%; }
#close { width:60px; height:60px; position:fixed; top:0; right:0; cursor:pointer; background-image:url(../img/stop.svg); background-repeat:no-repeat;background-size: 25px; background-position:center; }
.intro #close { display:none; }

#telop3 {  position:fixed; top:3vw; left:3vw; font-family: 'Noto Serif JP', serif; color:#FFF; text-align:center; }
#telop3 img { width:8vw; height:auto; }

#start { position:fixed; width:100%; top:50%; left:0; transform:translateY(-50%); display:none; }
.intro #start { display:block; }
#play {  box-sizing:border-box; width:10em; font-family: 'Noto Serif JP', serif; font-size:5vw; 
    
	
    cursor: pointer;
	margin: 0 auto; 
	
	display:block; padding:.5em 2em;  text-decoration:none; text-align:center; border-radius:.3em; font-weight:bold; line-height:1; background-color:#E71519; color:#FFF; 

	}
.load #play { transform:scale(0); }	
#load {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-image: url(../img/Spinner-1s-200px.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(0) translateX(-50%);
    position: absolute;
    bottom: 0;
    left: 50%;
    -moz-transition: all .5 ease 0s;
    -webkit-transition: all .5 ease 0s;
    -o-transition: all .5 ease 0s;
    -ms-transition: all .5 ease 0s;
    transition: all .5 ease 0s;
}
.load #load {
    transform: scale(1) translateX(-50%);
}

#modal { width:80%; max-width:300px; background-color:#FFF; border-radius:.3em; box-shadow:0 1px 20px #000; padding:5vw; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); box-sizing:border-box;
-moz-transition: all .5s ease 0s;
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
	 }
#modal:empty { opacity:0; transform:translate(-50%,-40%); z-index:-1; }
#modal h6 a { color:#0000FF; }
#modal a.bt { display:block; padding:.5em 2em; color:#111; text-decoration:none; border:1px solid #111; text-align:center; border-radius:.3em; font-weight:bold; margin-top:1em;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffdf92+0,e1ad2f+100 */
background: #ffdf92; /* Old browsers */
background: -moz-linear-gradient(top,  #ffdf92 0%, #e1ad2f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffdf92 0%,#e1ad2f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffdf92 0%,#e1ad2f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf92', endColorstr='#e1ad2f',GradientType=0 ); /* IE6-9 */
 }
#modal figure img { width:100%; height:auto; }
#modal figure { margin-bottom:.5em; }

#NI { text-align:center; position:fixed; top:50%; left:0; width:100%;
-webkit-transform:translateY(-50%) scale(1.5);
-moz-transform:translateY(-50%) scale(1.5);
-o-transform:translateY(-50%) scale(1.5);
-ms-transform:translateY(-50%) scale(1.5);
transform:translateY(-50%) scale(1.5);

-moz-transition: all .5s ease 0s;
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
    transition: all .5s ease 0s;

}
.intro #NI { opacity:0; }

.mod #NI { transform:scale(5) translateY(-50%); opacity:0; 

	}

#NI li { display:inline-block; width:15px; height:15px; border-radius:7.5px; margin:0 10px; }
#NI li:nth-child(1),.error.first #NI li:nth-child(1) { background-color:#4B90F5; 
-webkit-animation: OK3 .8s ease 0s both infinite alternate;
animation: OK3 .8s ease 0s both infinite alternate;
}
#NI li:nth-child(2),.error.first #NI li:nth-child(2) { background-color:#ED4D3D;
-webkit-animation: OK3 .8s ease .2s both infinite alternate;
animation: OK3 .8s ease .2s both infinite alternate;
 }
#NI li:nth-child(3),.error.first #NI li:nth-child(3) { background-color:#FAC306; 
-webkit-animation: OK3 .8s ease .4s both infinite alternate;
animation: OK3 .8s ease .4s both infinite alternate;
}
#NI li:nth-child(4),.error.first #NI li:nth-child(4) { background-color:#3BB15B;
-webkit-animation: OK3 .8s ease .6s both infinite alternate;
animation: OK3 .8s ease .6s both infinite alternate;
 }
#NI li:nth-child(5) { display:block; width:100%; text-align:center; color:#FFF; font-size:10px; margin:0; margin-top:2em; }
 
 
 @-webkit-keyframes OK3 { to { -webkit-transform:translateY(10px);  height:15px; }}
@keyframes OK3 { to {  transform:translateY(10px); height:15px;}}

@-webkit-keyframes OK4 { to { -webkit-transform:translateY(10px); height:60px; opacity:1;  }}
@keyframes OK4 { to {  transform:translateY(10px); height:60px; opacity:1;  }}


.first #NI li:nth-child(1) ,.second #NI li:nth-child(1),.third #NI li:nth-child(1),.forth #NI li:nth-child(1),.five #NI li:nth-child(1),.six #NI li:nth-child(1){ background-color:#4B90F5; 
animation: OK4 .8s ease 0s both infinite alternate;
}
.first #NI li:nth-child(2),.second #NI li:nth-child(2),.third #NI li:nth-child(2),.forth #NI li:nth-child(2),.five #NI li:nth-child(2),.six #NI li:nth-child(2) { background-color:#ED4D3D;
animation: OK4 .8s ease .2s both infinite alternate;
 }
.first #NI li:nth-child(3),.second #NI li:nth-child(3),.third #NI li:nth-child(3),.forth #NI li:nth-child(3),.five #NI li:nth-child(3),.six #NI li:nth-child(3) { background-color:#FAC306; 
animation: OK4 .8s ease .4s both infinite alternate;
}
.first #NI li:nth-child(4),.second #NI li:nth-child(4),.third #NI li:nth-child(4),.forth #NI li:nth-child(4),.five #NI li:nth-child(4),.six #NI li:nth-child(4) { background-color:#3BB15B;
animation: OK4 .8s ease .6s both infinite alternate;
 }
 
 
 .play #NI li:nth-child(1),.error.first #NI li:nth-child(1),.error.third #NI li:nth-child(1),.error.five #NI li:nth-child(1) { 
animation: OK3 .8s ease 0s both infinite alternate;
}
.play #NI li:nth-child(2),.error.first #NI li:nth-child(2),.error.third #NI li:nth-child(2),.error.five #NI li:nth-child(2){ 
animation: OK3 .8s ease .2s both infinite alternate;
 }
.play #NI li:nth-child(3),.error.first #NI li:nth-child(3) ,.error.third #NI li:nth-child(3),.error.five #NI li:nth-child(3){
animation: OK3 .8s ease .4s both infinite alternate;
}
.play #NI li:nth-child(4),.error.first #NI li:nth-child(4) ,.error.third #NI li:nth-child(4),.error.five #NI li:nth-child(4){ 
animation: OK3 .8s ease .6s both infinite alternate;
 }
 
#title { position:fixed; top:0; left:0; font-family: 'Noto Serif JP', serif; padding:0vw; z-index:2; color:#FFF; font-size:4vw; line-height:1.3; color:rgba(255,17,21,1.00);}
#title img { width:80vw; height:auto; }

@media (orientation: landscape){
	.intro h1 { position:fixed; top:1%; right:1%; height:96%; width:auto; }
	.intro h2 img.v { display:none; }
	.intro h2 img.l { display:inline; }
	video { width:100%; height:auto; }
	#telop { font-size:6.5vw; padding:0vw;}
	#telop2 { font-size:5vw; padding:1.5vw;}
	h3 { bottom:2%; left:50%; height:32%; width:auto;

	}
	
	#modal {padding:2.5vw; }
	
	#telop br { }
	#play { font-size:2vw; }
	#start:before { font-size:18vw;}
	#title { font-size:2.5vw; padding:0vw; }
	
	#telop img { height:60vh; width:auto; }
	#title img { width:50vw; height:auto; }
	
	body {  background-position:right -1vw bottom -1vw,left -5vw top -5vw; background-size:40vw auto,30vw auto;
 
	 }
	 #telop3 img { width:4vw; height:auto; }
	 #telop3 { top:1.5vw; left:1.5vw; }
}

@media (orientation: landscape) and (min-width: 737px) {
	#modal {padding:1.5vw; max-width:400px; }
}