@charset "utf-8";
body,html { height:100%; font-family:  "Yu Gothic","Hiragino Kaku Gothic Pro", YuGothic, Meiryo, Osaka, "MS PGothic", sans-serif;

	}
	html { overflow:hidden; }
	
	body {
		-moz-transition: all 3s ease 0s;
    -webkit-transition: all 3s ease 0s;
    -o-transition: all 3s ease 0s;
    -ms-transition: all 3s ease 0s;
    transition: all 3s ease 0s;
	}
video { opacity:0; height:120%; width:auto; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);filter: grayscale(100%); 
 -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;
	}
.end video { filter:grayscale(0%);  }
.video1 #video1,.video2 #video2,.video3 #video3,.video4 #video4,.video5 #video5,.video6 #video6,.video7 #video7,.video8 #video8,.video9 #video9,.video10 #video10,.video11 video11 { opacity:1; }

.play body { background-color:#000; }

#play { position:relative; width:60px; height:60px; margin:0 auto; cursor:pointer; background-image:url(../img/play.svg); background-position:center; background-size:contain; }
#start { position:fixed; top:50%; left:0; width:100%; transform:translateY(-50%); text-align:center;font-family: 'Noto Serif JP', serif; font-size:6vw; }
.load #play,.play #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%); }

#start h1 { margin-bottom:1em;
 -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; }
.play #start h1 { margin-bottom:1em; }

/*.battle body:after { content:""; display:block; width:100%; height:100%; background-color:#000; position:fixed; top:0; left:0; animation: love .2s ease 0s infinite; opacity:0;}*/

@keyframes love {
0% { opacity:0;}
50% { opacity:0;}
51% { opacity:1;}
100% { opacity:1;  }
}

.battle body {  animation: love3 .3s ease 0s infinite;}

@keyframes love3 {
0% { transform:translateY(0); opacity:0;}
25% {transform:translateY(-4vw); opacity:1;}
50% { transform:translateY(0); opacity:0;}
75% { transform:translateY(4vw); opacity:1;}
100% { transform:translateY(0);  opacity:0; }
}

#telop { width:100%; position:fixed; bottom:0; left:0; padding:6vw 3vw; box-sizing:border-box; color:#111; text-align:center; font-weight:bold; font-size:5vw; font-family: 'Noto Sans JP', sans-serif;}



#close { width:60px; height:60px; position:fixed; top:0; right:0; cursor:pointer; display:none; background-image:url(../img/stop.svg); background-repeat:no-repeat; background-position:center; background-size:25px; z-index:99; }
.play #close { display:block; }

@media (orientation: landscape){
#telop { font-size:1.5vw;padding:3vw 3vw;}	
#start {  font-size:2vw; }
#close { background-image:url(../img/stop2.svg);}
}