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

body,html,#app { height:100%; }
body { background-color:#000; 
 -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;
	 }

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



.intro body {  }
body:before { width: 100%; height: 30%; position: fixed; top:0; left: 0; background-color: #C01623; content: ""; display: block; z-index: 4; opacity: 0;
transform: scale(1,0); transform-origin: 50% 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c01623+0,c01623+100&1+0,1+78,0+100 */
background: -moz-linear-gradient(top,  rgba(192,22,35,1) 0%, rgba(192,22,35,1) 58%, rgba(192,22,35,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(192,22,35,1) 0%,rgba(192,22,35,1) 58%,rgba(192,22,35,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(192,22,35,1) 0%,rgba(192,22,35,1) 58%,rgba(192,22,35,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c01623', endColorstr='#00c01623',GradientType=0 ); /* IE6-9 */

-moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s;
    -ms-transition: all .6s ease 0s;
    transition: all .6s ease 0s;
}
body:after { width: 100%; height: 30%; position: fixed; bottom:0; left: 0; background-color: #224D20; content: ""; display: block; z-index: 4;transform: scale(1,0); transform-origin: 50% 100%; opacity: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#224d20+0,224d20+100&0+0,1+22,1+100 */
background: -moz-linear-gradient(top,  rgba(34,77,32,0) 0%, rgba(34,77,32,1) 42%, rgba(34,77,32,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(34,77,32,0) 0%,rgba(34,77,32,1) 42%,rgba(34,77,32,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(34,77,32,0) 0%,rgba(34,77,32,1) 42%,rgba(34,77,32,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00224d20', endColorstr='#224d20',GradientType=0 ); /* IE6-9 */

-moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s;
    -ms-transition: all .6s ease 0s;
    transition: all .6s ease 0s;
}
.xmas body:before { transform: scale(1,1); opacity: 1;}
.xmas body:after { transform: scale(1,1); opacity: 1;}

.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:1%; left:50%; height:auto; width:120%; opacity:0; background-color:#FAF601; transform:translateX(-50%) rotate(-6deg); text-align:center; font-family: 'Noto Sans JP', sans-serif; color:#DC0169; padding:1vw; font-size:7vw; box-sizing:border-box;
 -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 { position:fixed; top:30%; right:0%; height:auto; width:100%; opacity:0; transform:translateX(0%) rotate(0deg) scale(1); font-family: 'Libre Baskerville', serif;  color:#fff; font-weight: normal; font-size:14vw; line-height:1; text-align: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;
	}
h3 svg,h3 img { width:70%; height:auto; }



.intro h3 { opacity:1;transform:translateX(0%) rotate(0deg) scale(1); }
h3 span { display:block; font-size:18vw;  }

video { height:100%; width:auto;  opacity:0;
-moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
	 }
#video5,#video6 { position: fixed;  top:50%; left: 50%;transform: translate(-50%,-50%); filter: grayscale(100%); }

video.show { opacity:1; }
#video6.show { opacity: .6;}
.xmas video { /*height:70%;*/ z-index: 2; filter: sepia(30%) contrast(160%);}
.intro video,.end video { opacity:0; }
.guns video {animation: love3 .1s ease 0s infinite; }
.guns.replay video {animation: love3 .2s ease 0s infinite; }

#imageBox { width: 100%; height: 50%; position: fixed; top:0; left: 0;  background-repeat: no-repeat; background-position: center; background-size: cover; filter: grayscale(100%); opacity: 0;
overflow: hidden;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}
#imageBox.show { opacity: 1;}
.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 50vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 12s 0s infinite;
    animation: anime 12s 0s infinite; }

.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

@keyframes anime {
  0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        transform: scale(1.2) ;
         z-index:9;
    }
    100% { opacity: 0 }
}

#videoBox { width: 100%; height: 50%; position: fixed; top:50%; left: 0; opacity: 0; 
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}
#videoBox.show { opacity: 1;}
#videoBox div { overflow: hidden; height: 50%; position: relative;
    -ms-flex-preferred-size: 50%;
               flex-basis: 50%;
    max-width: 50%;
}
#videoBox video { height: 100%; width: auto; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);  filter: grayscale(100%);}

#videoBox div.zoom:after { content: ""; display: block; width: 100%; height: 100%; box-sizing: border-box; border:1vw solid #45C001; position: absolute; top:0; left: 0;}

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

@keyframes love2 {
0% { filter: grayscale(0%) contrast(0%);}
4% { filter: grayscale(100%) contrast(200%);}

100% { filter: grayscale(100%) contrast(200%); }
}



#video5.show+.after,#video6.show+.after,#video7.show+.after,#video8.show+.after,#video10.show+.after,#video11.show+.after,#video13.show+.after,#video14.show+.after,#video9.show+.after,#video12.show+.after { display:block; width:100%; height:100%; position:fixed; top:0; left:0; background-color:#FFF; animation: love .8s linear 0s both; opacity:1; }
#after {display:block; width:100%; height:100%; position:fixed; top:0; left:0; background-color:#000;  opacity:1;
-moz-transition: opacity 1s ease 0s;
    -webkit-transition: opacity 1s ease 0s;
    -o-transition: opacity 1s ease 0s;
    -ms-transition: opacity 1s ease 0s;
    transition: opacity 1s ease 0s;
	}
#after.show { opacity:1; }
.play #after { opacity: 0;}
@keyframes love {
0% { opacity:1;}
100% { opacity:0;  }
}

#title { position: fixed; top:0; left:0; padding: 2vw; font-size: 5vw; color: #FFF;font-family: 'Noto Serif JP', serif; writing-mode: vertical-rl; background-color: rgba(0,0,0,.7);}
#title2 { position: fixed; top:50%; left:50%; padding: 0vw; font-size: 12vw; color: #FFF;font-family: 'Noto Serif JP', serif; writing-mode: vertical-rl; transform: translate(-50%,-50%); height: 7em;}
#title:empty { opacity: 0;}

#telop { width:100%; position:fixed; bottom:0; left:50%; padding:3vw 2vw; box-sizing:border-box; color:#FFF; text-align:center; font-size:9vw; transform:translate(-50%,0%); z-index: 5; text-shadow: 1px 1px 0px #000;font-family: 'Noto Serif JP', serif; 
-webkit-transition: opacity 1s ease 0s;
    -o-transition: opacity 1s ease 0s;
    -ms-transition: opacity 1s ease 0s;
    transition: opacity 1s ease 0s;
}
#telop:empty{ opacity: 0; }
#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: 20px; background-position:center; z-index:99; }
.intro #close { display:none; }

#start { position:fixed; width:100%; top:50%; left:0; transform:translateY(-50%); display:none; }
.intro #start { display:block; }
#play { width: 22vw; box-sizing:border-box;
    height: 22vw;
	background-image: url(../img/play.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10vw auto;
    cursor: pointer;
	margin: 0 auto; border-radius:50%;
	}
.load #play { display:none; }	
#load {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-image: url(../img/Spinner-1s-200px.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transform: scaleY(0) translateX(-50%);
    position: absolute;
    bottom: 0;
    left: 50%;
    /*-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;*/
	transform-origin:50% 50%;
}
#load+#process { text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#fff; }
#load+#process:empty { transform: scale(0);}
.load #load {
    transform: scaleY(1) translateX(-50%);
}

#load2 {
    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) translate(-50%,-50%);
    position: fixed;
    top: 50%;
    left: 50%;
    /*-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;*/
	transform-origin:50% 50%; opacity:0;
}

.wait #load2 { opacity:1;transform: scale(1) translate(-50%,-50%); }

#profile { position:fixed; top:50%; left:50%; color:#fff; font-family: 'Noto Serif JP', serif; transform:translate(-50%,-50%); text-align:center; font-size:6vw; width:100%; height:100vh; line-height:1.1; background-color:#000;
-moz-transition: opacity 1s ease 0s;
    -webkit-transition: opacity 1s ease 0s;
    -o-transition: opacity 1s ease 0s;
    -ms-transition: opacity 1s ease 0s;
    transition: opacity 1s ease 0s;
	}
#profile span { display:block; width:100%; text-align:center; position:absolute; top:50%; left:0; transform:translateY(-50%) rotate(0deg) scale(1); opacity:0;

	}
.pro #profile span {transform:translateY(-50%) rotate(0deg) scale(1); opacity:1;
-moz-transition: all .4s cubic-bezier(0.250, 0.250, 0.945, 0) 0s;
    -webkit-transition: all .4s cubic-bezier(0.250, 0.250, 0.945, 0) 0s;
    -o-transition: all .4s cubic-bezier(0.250, 0.250, 0.945, 0) 0s;
    -ms-transition: all .4s cubic-bezier(0.250, 0.250, 0.945, 0) 0s;
    transition: all .4s cubic-bezier(0.250, 0.250, 0.945, 0) 0s;
	 }
#profile em { font-size:50%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; display:block; font-style:normal; margin-bottom:.5em; }
.intro #profile { opacity:0;}
#profile:empty { opacity:0; }
.play #profile { opacity:0;
-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;  }
	
h4 { position:fixed; top:0; left:0; font-size:4vw; font-family: 'Noto Serif JP', serif; padding:2vw; display:none; font-weight:normal; }
.play h4 { display:block; }

#timer { position:fixed; bottom:0; left:0; color:#FFF; font-family:Arial, Helvetica, sans-serif; opacity:0; width:100%; text-align:center; padding:3vw 0; font-size:8vw; }
.play #timer { opacity:.7; }
#timer:before { content:"REC"; color:#FF0004; }

.replay #replay { position:fixed; top:0; left:0; padding:3vw; box-sizing:border-box;}
.replay #replay:before { content:"REPLAY"; color:#FF0004; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:6vw;}

#once { width:100%; position:fixed; top:50%; left:0; text-align:center; color:#FFF;  font-family: 'Noto Serif JP', serif;font-size:6vw; transform:translateY(-50%); }

#confirm { background-color:#000; width:100%; position:fixed; bottom:0; left:0; padding:7vw; box-sizing:border-box; text-align:center; transform:translateY(100%); 
-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;
	}
#confirm h5 { color:#FFF; font-size:6vw;  font-family: 'Noto Serif JP', serif; margin-bottom:1em;}
#confirm #yes { display:inline-block; background-color:#FF0004; border-radius:.3em; padding:3vw; font-size:4vw; font-family: 'Noto Serif JP', serif; }

.confirm #confirm {  transform:translateY(0);}


/*動かす前段階のアニメーション*/
section .inner div {
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: Drop;
  animation-timing-function: linear;
  opacity: 0;
  transform-origin: 0px 0px;
  height: 100%;
}

/*背景の設定*/
section#snow { position: fixed; top:0; left:0; z-index: -1;
   
  overflow: hidden;
  width: 100%;
  height: 100%;
}
section#snow:before { content: ""; display: block; width:calc( 100% - 10px ); height:calc( 100% - 10px ); border:3px solid #FFF; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%) scale(1.2); box-sizing: border-box; opacity: 0;
-moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s;
    -ms-transition: all .6s ease 0s;
    transition: all .6s ease 0s;
}
section#snow:after { content: ""; display: block; width:calc( 100% - 22px ); height:calc( 100% - 22px ); border:1px solid #FFF; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%) scale(1.2); box-sizing: border-box; opacity: 0;
-moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s;
    -ms-transition: all .6s ease 0s;
    transition: all .6s ease 0s;
}
.xmas section#snow:before,.xmas section#snow:after {transform: translate(-50%,-50%) scale(1);opacity: .5; }
.xmas section#snow {  z-index: 5;}
#snow .inner {
  height: 100%;
  width: 100%;
}
/*雪の設定*/
#snow .inner div {
  background: #fff;
  border-radius: 50%;
  display: block;
  height: 3vw;
  position: absolute;
  width: 3vw; filter: blur(.6vw);
}

/*いくつかランダムに大きさを変える*/
#snow .inner div.snowflake1,

#snow .inner div.snowflake8 {
  height: 2vw; width: 2vw;
}
#snow .inner div.snowflake2,
#snow .inner div.snowflake5{
   height: 6vw; width: 6vw; 
}

/*雪をどの辺りに表示するか*/
.snowflake1 {
  animation-duration: 4.4s;
  left: 15%;
}

.snowflake2 {
  animation-delay: 0.3s;
  animation-duration: 3.7s;
  left: 19%;
}

.snowflake3 {
  animation-delay: 0.5s;
  animation-duration: 4.9s;
  left: 28%;
}

.snowflake4 {
  animation-delay: 0s;
  animation-duration: 3.6s;
  left: 38%;
}

.snowflake5 {
  animation-delay: 1s;
  animation-duration: 4.6s;
  left: 50%;
}

.snowflake6 {
  animation-delay: 1.2s;
  animation-duration: 4.2s;
  left: 60%;
}

.snowflake7 {
  animation-delay: 1.2s;
  animation-duration: 3.7s;
  left: 70%;
}

.snowflake8 {
  animation-delay: 1.4s;
  animation-duration: 4.9s;
  left: 85%;
}
.snowflake9 {
  animation-delay: 1.9s;
  animation-duration: 5.9s;
  left: 95%;
}

.snowflake10 {
  animation-delay: 1.2s;
  animation-duration: 2.9s;
  left: 10%;
}

.snowflake11 {
  animation-delay: 1.2s;
  animation-duration: 3.1s;
  left: 55%;
}

/*アニメーションの設定*/
@keyframes Drop {
  0% {
    opacity: .4;
    transform: translateY(-3vw);
  }

  50% {
    opacity: 1;
    transform: translateY(50vh);
  }

  100% {
    opacity: 0.6;
    transform: translateY(100vh);
  }
}


@media (orientation: landscape){
	#timer { font-size:4vw; }
	.replay #replay:before {  font-size:3vw;}
	.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:3.5vw;padding:1.5vw 1.5vw;}
    #telop br { display: none;}
#profile { font-size:5vw; }
.play #profile { }
	h3 { bottom:0%; left:0%; height:auto;
 font-size:8vw;
	}
	h3 span { display:block; font-size:10vw; }
	#play { width: 10vw;
    height: 10vw;
	
    background-size: 5vw auto;
    
	}
	h2 {  font-size:3.5vw; 
}

#confirm { padding:3.5vw;
	}
#confirm h5 { font-size:3vw;}
#confirm #yes { padding:1.5vw; font-size:2vw; }
h3 svg,h3 img { width:50%; height:auto; }
    
    #videoBox { width: 50vw; height: 100%;left:50vw; top:0;}
    #imageBox { width: 50vw; height: 100%; } 
    .main_img { height: 100%;}
    #videoBox div { height: 50%;}
    #title {
    
    padding: 1vw;
    font-size: 2.5vw;
    
}
    #title2 { height: auto;
   
    padding: 0vw;
    font-size: 6vw;
    
    writing-mode: horizontal-tb;
    
}
}