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

body,html,#app { height:100%; }
body { background-color:#fff; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-image: url("../img/bg.png"); background-size: 100px; background-position: 50% center;  
 -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;
	 }
body { animation: bg 1.4s linear 0s infinite alternate;}
.intro body { animation: none;}

body:before { }

@keyframes bg {
0% { background-position: 0% center;   }
100% { background-position: 100% center; }
}

@keyframes after {
0% { opacity: 1; }

100% { opacity: 0; }
}

.intro body {  }

.intro body:before { animation: none; }
body:after { }
.intro body:after { display:none; }

.intros body { opacity:0; }

#angel { width: 60vw; position: fixed; top:7vw; left: 50%; transform: translate(-50%,0); /*display: none;*/ animation: angel 1.4s ease 0s infinite alternate; display: none; }
#angel img { width: 100%; height: auto; }
.bg #angel { display: block;}

#focus { width: 100%; height: 100%; position: fixed; top:0; left:0; background-image: url("../img/focus.svg"); background-position: center; background-size: 40% auto; background-repeat: no-repeat; }
.intro #focus { display: none;}
#focus:after { content: ""; display: block; width: 100%; height: 100%; background-color: #FFF; opacity: 0;}
.focus #focus:after {animation: focus .4s ease 0s 1; }

#left { width: 50vw; position: fixed; top:30vw; left: -20%; transform: translate(0%,0); display: none; }
#left img { width: 100%; height: auto; }
.bg #left { display: block;}

@keyframes focus  {
0% { opacity: 1; }

100% { opacity: 0; }
}

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,.img { width:auto; height:80%; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; display:block;
transition: transform .5s ease 0s;
	 }
.img { width:70%; height:auto; }
.intro video,.intro.img { opacity:0; }
video.show,.img.show { opacity:1; /*animation: love3 1.4s ease 0s infinite;*/transform:translate(-50%,-50%);}
video.black {transition: none; }
.gray video {  }
#telop.blur { animation: love3 1.4s ease 0s 1; }
video { border-top:1vw solid #000; border-bottom:1vw solid #000;}

@keyframes love3 {
0% { transform:translate(-50%,0%);}
19% { transform:translate(-50%,0%);}

20% {transform:translate(-50%,-5%);}
21% { transform:translate(-50%,0%);}
22% { transform:translate(-50%,5%);}
23% { transform:translate(-50%,0%);  }

24% {transform:translate(-50%,-5%);}
25% { transform:translate(-50%,0%);}
26% { transform:translate(-50%,5%);}
27% { transform:translate(-50%,0%);  }

100% { transform:translate(-50%,0%);  }
}
#telop span { display:inline-block; background-color:#111; color:#FFF; padding:.4em 1em; font-size:60%; margin-bottom:.7em; border-radius:.5em; text-shadow: none; }
#telop { width:100%; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:0vw 2vw; box-sizing:border-box; color:#fff; font-size:8vw; font-family: 'Noto Serif JP', serif; line-height:1.4; letter-spacing:.1em; z-index:9; 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; bottom:0; left:0; padding:2vw; box-sizing:border-box; color:#111; text-align:center; font-weight:bold; font-size:4vw; line-height:1.4; transform:translateY(0%); background-color:rgba(252, 198, 0, .7);

-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;
	}
#telop2:empty { opacity: 0;}
#telop img { height:75vh; 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; z-index:2; }
.intro #close { display:none; }

#telop3 {  position:fixed; top:3vw; left:3vw;font-size:18vw; 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:#000; 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; bottom:4vh; left:0; width:100%;
-webkit-transform:translateY(0%) scale(1);
-moz-transform:translateY(0%) scale(1);
-o-transform:translateY(0%) scale(1);
-ms-transform:translateY(0%) scale(1);
transform:translateY(0%) scale(1);

-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:160px; opacity:1;  }}
@keyframes OK4 { to {  transform:translateY(10px); height:160px; 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;
 }
 
 
.focus #NI li:nth-child(1){ 
animation: OK4 .8s ease 0s both infinite alternate;
}
.focus #NI li:nth-child(2){ 
animation: OK4 .8s ease .2s both infinite alternate;
 }
.focus #NI li:nth-child(3){
animation: OK4 .8s ease .4s both infinite alternate;
}
.focus #NI li:nth-child(4){ 
animation: OK4 .8s ease .6s both infinite alternate;
 }


 
#title { position:fixed; top:0; left:0; font-family: 'Noto Serif JP', serif; padding:2vw; z-index:9; color:#111; font-size:5vw; line-height:1.3;
writing-mode: vertical-rl; background-color: #FFF;}
#title img { width:80vw; height:auto; }
#title:empty { display: none;}

h1 { text-align: center;font-family: 'Noto Serif JP', serif; font-size: 16vw; margin-bottom: .7em;line-height: 1.4; color: #FFF;
}

@media (orientation: landscape){video { border:1vw solid #000;}
	
	.intro h2 img.v { display:none; }
	.intro h2 img.l { display:inline; }
	video { width:auto; height:90%; }
	img.img { width: auto; height: 100%;}
	#telop { font-size:5vw; padding:0vw;}
	#telop2 { font-size:2vw; padding:1.5vw;}
	h3 { bottom:2%; left:50%; height:32%; width:auto;

	}
	h1 { font-size: 8vw;}
	#modal {padding:2.5vw; }
	#telop2 br { display: none;}
	#telop br { }
	#play { font-size:2vw; }
	#start:before { font-size:18vw;}
	#title { font-size:2.2vw;  }
	
	#telop img { height:95vh; width:auto; }
	#title img { width:50vw; height:auto; }
	
	body { 
	 }
	 body:after { }
	
	#angel { width: 30vw; top:-.5vw; animation: angel2 1.4s ease 0s infinite alternate;}
	#video5 { height: 60%; width: auto;}
	
	#focus {  background-size: 20% auto;  }
}

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