@charset "utf-8";
/* CSS Document */
html { overflow:hidden;}
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;
	 }
.red body { background-color: #000;}
.intro body {  }
.intro body:before { content:""; display:block; width:100%; height:100%; position:fixed; top:0; left:0; background-repeat:no-repeat; background-size:cover; background-position:center bottom; background-color:#000; }

#end { width: 100%; height: 100%; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.7); z-index: 9; transform: scale(0);}
.end #end { transform: scale(1);}
#end p { width: 100%; text-align: center; position: absolute; top:50%; left: 0; transform: translateY(-50%); color: #FFF;font-family: 'Noto Sans JP', sans-serif; font-size: 8vw;transform: scale(6);
-moz-transition: all .4s ease 0s;
    -webkit-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    -ms-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.end #end p {transform: scale(1);}
#endLink { background-color: #FFF; width: 100%; padding: 2vw 0; position: absolute; bottom: 0; left: 0; box-shadow: 0 -1vw 10vw #000;}
#endLink a { display: block; font-size:5vw; color: #000; text-decoration: none; padding: 2em 0;font-family: 'Noto Sans JP', sans-serif;}

body:after,.intro.buffer body:after { content: ""; width: 50px; height: 50px; display: block; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; display: none;}
.buffer body:after { display: block;}

.intros body { opacity:0; }

#bokashi { width: 120vw; height: 120vw; background-image: url("../img/bokashi2.png"); background-repeat: no-repeat; background-size: contain; position: fixed; top:-50vw; left: 50%; transform: translateX(-50%);}
.intro #bokashi { display: none;}
#video2.show~#bokashi {background-image: url("../img/bokashi.png"); }

h1 img { width: 50vw; height: auto; } 
h1 { text-align: center; font-size: 11vw;font-family: 'Noto Sans JP', sans-serif; margin-bottom: .5em; padding: 0 3vw; color: #FFF;
	}
h1 span { display: block;font-size: 40%; margin-top: .5em;}
.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:70%; width:90%; overflow: hidden;position:fixed; top:50%; left:50%;transform:translate3d(-50%,-50%,0); border-radius: .6em;perspective: 1000;-webkit-backface-visibility:hidden;backface-visibility:hidden;
-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;
}
#flower { width:90%;content: ""; display: block; width: 105%; height: 80%; position: fixed; top:50%; left: 50%; transform:translate3d(-50%,-50%,0); background-image:url("../img/flower.png"),url("../img/flower2.png"); background-repeat: no-repeat; background-position:top left, bottom right; background-size: contain;}
.intro #flower,.red #flower { display: none;}

.red #video { height:100%; width:100%; border-radius: 0;}
video { height:100%; width:auto; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); 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 video { opacity:0; }
video.show { opacity:1; }
.gray video { filter:grayscale(100%) contrast(200%); }
#video1 { filter:grayscale(100%) contrast(200%);}

#video10.show { filter:grayscale(100%) contrast(200%); 
-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;}
.guns #video9,.guns #video8 {/*animation: videos .1s ease 0s both infinite alternate;*/}

@keyframes videos { to {  transform:translate(-50%,-47%);}}




#telop { width:100%; position:fixed; bottom:0; left:0%; padding:7vw 3vw; box-sizing:border-box; color:#FFF; text-align:center; font-weight:bold; font-size:9vw; font-family: 'Noto Sans JP', sans-serif; line-height:1!important; transform: translate(0%,0%);

-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;
	}
#video2.show~#telop { color:#FF32A9;}
.intro #telop { display: none;}
.telop #telop { font-size: 6vw; line-height: 1.5!important;}
.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; }
#telop span {font-size:15vw; display: block; text-shadow: 0 0 10px #000; }

#start { position:fixed; width:100%; top:50%; left:0; transform:translateY(-50%); display:none; }
.intro #start { display:block; }
#play {  box-sizing:border-box; width:100%; font-family: 'Noto Sans JP', sans-serif; font-size:4vw; 
    
	
    cursor: pointer;
	margin: 0 auto; 
	
	display:block; color:#131D3D; text-decoration:none; text-align:center; font-weight:bold; line-height:1; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffdf92+0,e1ad2f+100 */
 /* Old browsers */

	}
#play span { display: inline-block; height: 100%; padding: .8em 1.4em; background-color:rgba(255,26,29,1.00); border-radius: .4em;}
.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; }

#j1 { width: 20vw; height: 20vw; position: fixed; top:20vh; left: 10vw; background-image: url("../img/k0100_1.svg"); background-repeat: no-repeat; background-size: contain; display: none;}
#j2 { width: 40vw; height: 40vw; position: fixed; top:50vh; left: 40vw; background-image: url("../img/k0100_1.svg"); background-repeat: no-repeat; background-size: contain; display: none;}
#j3 { width: 30vw; height: 30vw; position: fixed; top:40vh; left: 60vw; background-image: url("../img/k0100_1.svg"); background-repeat: no-repeat; background-size: contain; display: none;}
#j4 { width: 20vw; height: 20vw; position: fixed; top:60vh; left: 20vw; background-image: url("../img/k0100_1.svg"); background-repeat: no-repeat; background-size: contain; display: none;}
#j5 { width: 50vw; height: 50vw; position: fixed; top:70vh; left: 80vw; background-image: url("../img/k0100_1.svg"); background-repeat: no-repeat; background-size: contain; display: none;}
.j1 #j1,.j1 #j2,.j1 #j3,.j1 #j4,.j1 #j5 { display: block;}
 
 
 @-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 Sans JP', sans-serif; padding:3vw 0; z-index:2; color:#FFF; font-size:6vw; line-height:0; box-sizing: border-box; }
#title img { width: 80vw; height: auto;}
#profile { position: fixed; top:30vw; right:3vw; z-index:1;}
#profile img { width: 10vw; height: auto;}
.intro #profile { display: none;}

.marquee { width: 100%; position: fixed; top:0; left:0; overflow: hidden;}
.intro .marquee,.nofire .marquee { display: none;}
.marquee p { width: 300%; color: #FFF; font-size:5vh; line-height: 1.4;}


#black { width: 100%; height: 100%; position: fixed; top:0; left:0; background-color:rgba(255,255,255,.71); animation: black .1s ease 0s both infinite alternate;}

#black{ opacity: 0; animation: none;}
.red #black { background-color: #D70000;animation: black .05s ease 0s both infinite alternate; opacity: 1;}
.guns #black { animation: black .1s ease 0s both infinite alternate;opacity: 1;}
.guns body { background-color: #000;}
.white body { background-color: #FFF;}

@keyframes black { to { opacity: 0;}}

@keyframes marquee { 
	to {  transform: translateX(-100%);}
}

@media (orientation: landscape){
	
	.intro h2 img.v { display:none; }
	.intro h2 img.l { display:inline; }
	video { width:100%; height:auto; }
	#telop { font-size:5vw;padding:3vw 3vw;}
    #end { font-size: 3vw;}
	h3 { bottom:2%; left:50%; height:32%; width:auto;

	}
	
	#modal {padding:2.5vw; }
	#video { height:70%; width:60%; }
	
	#play { font-size:2.5vw; }
	#start:before { font-size:6vw;}
	#title { font-size:5.5vw; }
	#telop span {font-size:7vw; }
    h1 { font-size: 5vw;}
    
    #bokashi {
    width: 50vw;
    height: 50vw;
    
    top: -20vw;
    
}
}

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

footer { width: 100%; position: fixed; bottom: 0; left: 0; text-align: center; font-size: 3vw; padding: 3vw ; margin-top: 10em; display: none; box-sizing: border-box;}
footer a {font-size: 3vw; color: #777; text-decoration: none; text-align: left;}
#start { text-align: center;}
.intro footer { display: block;}
a.footera { margin-bottom: 1em; display: block; text-align: center;}


/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container { z-index: -1;
  position: relative;
  height: 100%; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
}
.intro .cherry-blossom-container { z-index: 0;}

/* 桜の花びらのスタイル */
.petal { opacity: .6;
  position: absolute;
  background-color: rgba(0,81,216,0.1); /* 花びらの色 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,81,216,0.1);
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(1000deg);
  }
}

#hukidashi { width: 37.5vw; height: 29.6vw; background-image: url("../img/hukidashi.svg"); background-repeat: no-repeat; z-index: 9;  background-size: contain; text-align: center; position: fixed; top:55vh; right: 5vw;font-family: 'Noto Sans JP', sans-serif;
-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; }
.right #hukidashi {top:10vw; left: 50vw;}
#hukidashi p { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 80%; font-size: 4vw; line-height: 1.4; letter-spacing: .2em;}
#hukidashi:empty { transform: scale(0);}

footer ul { margin-bottom: 1em;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}
@media (orientation: landscape){
    #hukidashi { width: 23vw; height: 19vw;}  
    .right #hukidashi { left: 70vw;}
    #hukidashi p {font-size: 2vw; }
    #title img { width: 45vw;}
h1 img { width: 38vw; height: auto; } 
    #profile img {
    width: 5vw;
}
    #profile {
    top: 15vw;
}
    
    footer { font-size: 1.5vw; }
footer a {font-size: 1.5vw;}
    
 
#end p { font-size: 4vw;
}

#endLink { padding: 1vw 0;}
#endLink a { font-size:2.5vw; padding: 1em 0;}

}

@media (orientation: landscape) and (min-width: 737px) {
	footer { font-size: 10px; }
footer a {font-size: 10px; }
}

#bN015htcoyT__google-cache-hdr{background-color: rgba(255,255,255,.4);
position: relative;
    z-index: 1;
    }
.intro #bN015htcoyT__google-cache-hdr { position: static; }