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

h1 { color:#53D61B; font-family: 'Noto Serif JP', serif; font-size:200%; font-weight:normal; z-index:99; width:100%; text-align:center;
position: fixed;
top: 50%;
left: 50%;

transform: translate(-50%, -50%);


-moz-transition: opacity 1.5s ease 0s;
-webkit-transition: opacity 1.5s ease 0s;
-o-transition: opacity 1.5s ease 0s;
-ms-transition: opacity 1.5s ease 0s;
transition: opacity 1.5s ease 0s;

}
.start h1 { opacity:0; z-index:0; }

@media (orientation: landscape) and (min-width: 737px){
	h1 { 
font-size:300%;
}
}


#zoom {position:fixed; top:50%; left:5%; width:90vw; height:44vw; transform:translateY(-50%); opacity:0;
-moz-transition: opacity 1.5s ease 0s;
-webkit-transition: opacity 1.5s ease 0s;
-o-transition: opacity 1.5s ease 0s;
-ms-transition: opacity 1.5s ease 0s;
transition: opacity 1.5s ease 0s;
 }
.start #zoom { opacity:1; }
#zoom li { width:calc( 50% - 4px ); height:calc( 50% - 4px ); position:absolute; background-position:center; background-repeat:no-repeat; background-size:cover; }
#zoom li.talk:after { content:""; display:block; width:100%; height:100%; box-sizing:border-box; position:absolute; top:0; left:0; border:3px solid #53D61B; }
#zoom li.talk { animation: hurue3 .5s linear 0s alternate infinite;}

#orange { position:absolute; top:0; left:0; background-image:url(../img/orange.jpg); transform-origin:0 0; }
#owan { position:absolute; top:0; right:0; background-image:url(../img/owan.jpg); transform-origin:100% 0; }
#clock { position:absolute; bottom:0; left:0; background-image:url(../img/clock.jpg);  transform-origin:0 100%;}
#banana { position:absolute; bottom:0; right:0; background-image:url(../img/banana.jpg);  transform-origin:100% 100%;}
#zoom li span { display:inline-block; position:absolute; bottom:0; left:0; color:#FFF; background-color:rgba(0,0,0,.5); padding:.4em; line-height:1; font-size:80%; }

@media screen and (max-width: 736px) {
	#zoom {position:fixed; top:50%; left:0%; width:100vw; height:70vh; transform:translateY(-50%); }
	#zoom li { width:calc( 50% - 0px ); height:calc( 50% - 0px );}
}

@keyframes hurue3 {
0% { opacity:.5;}
100% { opacity:1; }
}

.love1 #zoom li,.love2 #zoom li,.love3 #zoom li,.love4 #zoom li { filter:grayscale(100%) contrast(300%); opacity:.3;  }
.love1 #zoom li#orange { background-image:url(../img/love1.jpg); /*animation: love 1s ease 0s both;*/ z-index:99; filter:none; opacity:1;animation: love2 .2s ease 0s alternate infinite; }
.love2 #zoom li#clock { background-image:url(../img/love2.jpg); /*animation: love 1s ease 0s both;*/ z-index:99; filter:none; opacity:1;animation: love2 .2s ease 0s alternate infinite; }
.love3 #zoom li#orange { background-image:url(../img/love3.jpg); /*animation: love 1s ease 0s both;*/ z-index:99; filter:none; opacity:1;animation: love2 .2s ease 0s alternate infinite; }
.love4 #zoom li#banana { background-image:url(../img/love4.jpg); /*animation: love 1s ease 0s both;*/ z-index:99; filter:none; opacity:1;animation: love2 .2s ease 0s alternate infinite; }

.love1 #zoom li#banana,.love2 #zoom li#owan,.love3 #zoom li#clock,.love4 #zoom li#clock { background-image:url(../img/camera.svg); background-size:15%; background-color:#666; filter:none; opacity:1;  }

 

@keyframes love {
0% { opacity:0;}
4% { opacity:1;}
8% { opacity:0;}
12% { opacity:1;}
16% { opacity:0;}
20% { opacity:1;}
24% { opacity:0;}
28% { opacity:1;}
32% { opacity:0;}
36% { opacity:1;}
100% { opacity:1;  }
}

@keyframes love2 {
0% { transform:scale(1);}

50% { transform:scale(1.02);}
100% { transform:scale(1); }
}

#loves { width:100%; position:fixed; top:50%; left:0; text-align:center; color:#FFF;  text-align:center; font-size:7vw; line-height:1; transform:translateY(-50%); font-weight:bold; opacity:0; font-family: 'Noto Serif JP', serif;}
.love1 #loves,.love2 #loves,.love3 #loves,.love4 #loves { opacity:1; }
/* CSS Document */

#play { width:60px; height:60px; cursor:pointer;  position:relative; text-indent:-9999px; margin:1em auto 0 auto; background-image:url(../img/play.svg); background-repeat:no-repeat; background-size:contain; background-position:center;
-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;
}
.load #play,.play #play,.intros #play { opacity:0; transform:scale(0); }
.load h1:after,.intros h1:after { content:""; width:60px; height:60px; display:block; position:fixed; bottom:0px; left:50%; transform:translateX(-50%); background-image:url(../img/Spinner-1s-200px.svg); background-size:contain; background-position:center; background-repeat:no-repeat; }

#stop { width:60px; height:60px; position:fixed; top:0; right:0; cursor:pointer; background-image:url(../img/stop.svg); background-repeat:no-repeat; background-size:20px; background-position:center; opacity:0; transform:scale(0);}
.play #stop { opacity:1; transform:scale(1); }