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

body,html { margin:0; height:100%; }
body { background-color:#000; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;font-family:  "Yu Gothic","Hiragino Kaku Gothic Pro", YuGothic, Meiryo, Osaka, "MS PGothic", sans-serif;
	-moz-transition: background-color 0.3s ease 0s,opacity 0.4s ease 0s;
-webkit-transition: background-color 0.3s ease 0s,opacity 0.4s ease 0s;
-o-transition: background-color 0.3s ease 0s,opacity 0.4s ease 0s;
-ms-transition: background-color 0.3s ease 0s,opacity 0.4s ease 0s;
transition: background-color 0.3s ease 0s,opacity 0.4s ease 0s;
}
.offline body { background-image:none;
/**webkit-animation: image3 2s ease 0s infinite alternate;
animation: image3 2s ease 0s infinite alternate;**/
}

.window body:before { content:""; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-image:url(../img/1.jpg);background-repeat:no-repeat; background-position:50% 50%; background-size:cover; z-index:-1; 
-webkit-animation: window .4s ease 0s both;
animation: window .4s ease 0s both;
}

.window body { -webkit-animation: hurue2_2 .2s ease 0s both;
animation: hurue2_2 .2s ease 0s both;}

@-webkit-keyframes window { from { -webkit-transform:scale(1.2); }}
@keyframes window { from {  transform:scale(1.2); }}

.window.dead body:before { display:none; }

body:after { content:""; display:block; width:100%; height:100%; background-color:#000; opacity:1; position:fixed; top:0; left:0; z-index:-1; opacity:.6; will-change:opacity;
-moz-transition: background-color 0.3s ease 0s,opacity 0.8s ease 0s;
-webkit-transition: background-color 0.3s ease 0s,opacity 0.8s ease 0s;
-o-transition: background-color 0.3s ease 0s,opacity 0.8s ease 0s;
-ms-transition: background-color 0.3s ease 0s,opacity 0.8s ease 0s;
transition: background-color 0.3s ease 0s,opacity 0.8s ease 0s;
}
.intro body:after { opacity:1; }

.on body:after { opacity:1; }
.offline body:after { 
background-color:#000;
	-webkit-animation: after .4s ease 0s forwards;
animation: after .4s ease 0s forwards;
}

@-webkit-keyframes image3 { from { background-position:50% 30%; }}
@keyframes image3 { from {  background-position:50% 30%; }}
@-webkit-keyframes image3_sp { from { background-position:50% 30px; }}
@keyframes image3_sp { from {  background-position:50% 30px; }}
@-webkit-keyframes image3_2 { from { background-position:50% 10%; }}
@keyframes image3_2 { from {  background-position:50% 10%; }}

@-webkit-keyframes after { from { background-color:#FFF; }}
@keyframes after { from {  background-color:#FFF; }}


.offline.dead body { background-image:none; }
p.text { position:fixed; top:50%; left:0; width:100%;  font-size:200%; margin:0; font-weight:lighter; opacity:0; color:#fff; color:#aaa;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);

-moz-transition: opacity 0.3s ease .8s,filter 0.3s ease .8s;
-webkit-transition: opacity 0.3s ease .8s,filter 0.3s ease .8s;
-o-transition: opacity 0.3s ease .8s,filter 0.3s ease .8s;
-ms-transition: opacity 0.3s ease .8s,filter 0.3s ease .8s;
transition: opacity 0.3s ease .8s,filter 0.3s ease .8s;


}
.offline.dead.show p.text { color:#aaa; font-size:150%; display:block; z-index:99;
-moz-transition: color 1s ease 0s;
-webkit-transition: color 1s ease 0s;
-o-transition: color 1s ease 0s;
-ms-transition: color 1s ease 0s;
transition: color 1s ease 0s;
 }
.online,.box { position:fixed; top:50%; left:50%;   display:inline-block;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.online { z-index:2; }
.offline .online,.offline .online2 { opacity:0; }
.offline body { background-color:#fff; }
.offline span.body,.offline body:before { will-change:opacity; content:""; width:100%; height:100%; position:absolute; top:0; left:0; /*background-color:#B50A0C;*/ display:block; opacity:0;
-moz-transition: opacity 0.4s ease 0s;
-webkit-transition: opacity 0.4s ease 0s;
-o-transition: opacity 0.4s ease 0s;
-ms-transition: opacity 0.4s ease 0s;
transition: opacity 0.4s ease 0s;
z-index:5;
 }
.offline.g1:not(.g4) span.body.red,.offline.g1:not(.g4) body.red:before { will-change:opacity; opacity:1; 
}

.offline:not(.g6) body:before { background: rgba(205,12,15,0.4);}


.offline.dead body { background-color:#fff;
-moz-transition: background-color 1s ease 0s;
-webkit-transition: background-color 1s ease 0s;
-o-transition: background-color 1s ease 0s;
-ms-transition: background-color 1s ease 0s;
transition: background-color 1s ease 0s;
 }
p.text:before {  content:""; display:block; text-align:center; opacity:0;white-space: pre; margin-bottom:1em;
transform:translateY(.5em); 
-moz-transition: transform 0.8s ease 0s,opacity 0.8s ease 0s;
-webkit-transition: transform 0.8s ease 0s,opacity 0.8s ease 0s;
-o-transition: transform 0.8s ease 0s,opacity 0.8s ease 0s;
-ms-transition: transform 0.8s ease 0s,opacity 0.8s ease 0s;
transition: transform 0.8s ease 0s,opacity 0.8s ease 0s;
}

p.text:after {  content:""; display:block; text-align:center; opacity:0;white-space: pre; margin-bottom:1em;
transform:translateY(.5em); 
-moz-transition: transform 0.8s ease .2s,opacity 0.8s ease .2s;
-webkit-transition: transform 0.8s ease .2s,opacity 0.8s ease .2s;
-o-transition: transform 0.8s ease .2s,opacity 0.8s ease .2s;
-ms-transition: transform 0.8s ease .2s,opacity 0.8s ease .2s;
transition: transform 0.8s ease .2s,opacity 0.8s ease .2s;
}
/*.offline.text2 p.text:before {  height:0; overflow:hidden;transform:translateY(-.5em); opacity:0; 
-moz-transition: transform 0.4s ease 0s,opacity 0.4s ease 0s,height 0s ease .4s;
-webkit-transition: transform 0.4s ease 0s,opacity 0.4s ease 0s,height 0s ease .4s;
-o-transition: transform 0.4s ease 0s,opacity 0.4s ease 0s,height 0s ease .4s;
-ms-transition: transform 0.4s ease 0s,opacity 0.4s ease 0s,height 0s ease .4s;
transition: transform 0.4s ease 0s,opacity 0.4s ease 0s,height 0s ease .4s;
 }
.offline p.text:after {  content:"輝かしい未来がある\A子供や若者が\A絶望的に憎たらしい。"; display:block; text-align:center;transform:translateY(0em);  opacity:0;white-space: pre; height:0; overflow:hidden;
-moz-transition: transform 0.8s ease .9s,opacity 0.8s ease .9s;
-webkit-transition: transform 0.8s ease .9s,opacity 0.8s ease .9s;
-o-transition: transform 0.8s ease .9s,opacity 0.8s ease .9s;
-ms-transition: transform 0.8s ease .9s,opacity 0.8s ease .9s;
transition: transform 0.8s ease .9s,opacity 0.8s ease .9s; }*/



.offline.dead p.text:before { content:"命が足りない。"; margin-bottom:0em; display:block;
transform: translateY(0em);
    opacity: 1;
	}
.offline.dead p.text:after { content:"夢は終わりだ。";display:block; text-align:center;
transform: translateY(0em);
    opacity: 1;
	}




.offline.show p.text { opacity:1; z-index:1; }

.sp { display:none; }

.box ul { padding:0; }
.box ul li {list-style: none; padding-left:0em;}
h1:after { /**content:"この先へ進むには通信の切断が必要です";*/ content:"全ての通信を切断して"; color:#ddd;}

.p1:before { content:"端末の設定で\A次の操作を行ってください";  color:#ddd;white-space: pre;}
li:before { content:"機内モードにする";  color:#ddd; background-image:url(../img/baseline-local_airport-24px.svg); background-repeat:no-repeat; background-position:left center; padding-left:25px;}
.p2:before { content:"ブラウザはリロードしないでください";  color:#ddd; display:block; font-size:80%; color:#aaa;}
/*.p2:after { content:"ヘッドホンを装着してください\A（iPhone7以降は白の変換プラグを装着）";  color:#ddd; display:block; font-size:80%; color:#aaa;white-space: pre;}*/
.p3:before { content:""; display:inline-block; height:16px; width:16px; background-image:url(../img/volume.svg); background-repeat:no-repeat; background-position:left center; background-size:contain; vertical-align:middle; margin-right:.5em;}
.p3:after { content:"ヘッドホンを装着してください";  color:#ddd; font-size:80%; color:#aaa;white-space: pre;}
.icon { width:100px; height:100px; background-image:url(../img/baseline-report_problem-24px.svg); background-position:center; background-repeat:no-repeat; background-size:contain; margin:0 auto 2em auto; 
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s,opacity 0.4s ease .1s;
 }

.p2 {margin-top:2em;}
.p3 {margin-top:1em; line-height:1.3;}

h1 { line-height:1.4;	
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s,opacity 0.4s ease .2s;
}

.p1 {	
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s,opacity 0.4s ease .3s;
}

.box ul {	
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
}

.p2 {	
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s,opacity 0.4s ease .5s;
}
.p3 {	
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s,opacity 0.4s ease .7s;
}

.icon,.box ul,.p1,.p2,.box h1,.p3 {opacity:0; transform:translate3d(0,20px,0); }
.on .icon,.on .box ul,.on .p1,.on .p2,.on .box h1,.on .p3 { opacity:1; transform:translate3d(0,0,0);}

.analyz { text-align:center; display:none; }
.analyz.start { display:block; }
.analyz p { font-size:160%; color:#aaa; margin-top:0;}
.analyz p:before { content:"";  white-space: pre;}
.analyz div { background-color:#eee; height:2px; width:100%; display:inline-block; }
.analyz.start div span { background-color:#666; display:block; height:100%; 
-webkit-transform:scaleX(1);
-moz-transform:scaleX(1);
-o-transform:scaleX(1);
-ms-transform:scaleX(1);
transform:scaleX(1);

-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;


-webkit-animation: image .5s linear 0s both;
animation: image .5s linear 0s both;

 }

.online2 { width:100%; height:100%; position:fixed; top:0; left:0; background-color:#000; color:#FFF;

-webkit-transform:translateY(150%);
-moz-transform:translateY(150%);
-o-transform:translateY(150%);
-ms-transform:translateY(150%);
transform:translateY(150%);

-moz-transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
-webkit-transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
-o-transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
-ms-transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;

 }
.on .online2 { z-index:3;
	-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
}
.box { display:inline-block; }

.primary { text-align:center; }
.intro .loading:before { content:"dead.mp3を読み込んでいます"; color:#FFF;white-space: pre;}
a.lightMode { display:none; }
 .intro a.lightMode { text-align:center; display:block; color:#FFF; text-decoration:underline; font-size:70%; margin-top:1em; color:rgba(255,255,255,.7);
 
 }


.primary p:before { /*content:"私があなたを信頼するまで\A私の指示に従ってください";*/ color:#fff; font-size:180%; display:block; white-space: pre; /*margin-bottom:1em;*/ }
.primary p:after { content:"下記フォームに\A「悲運と絶望と嫉妬」と入力して"; color:#fff; font-size:150%; display:block; white-space: pre; }
.primary p { margin-bottom:2em;
-moz-transition: transform 0.8s ease .4s,opacity 0.8s ease .4s;
-webkit-transition: transform 0.8s ease .4s,opacity 0.8s ease .4s;
-o-transition: transform 0.8s ease .4s,opacity 0.8s ease .4s;
-ms-transition: transform 0.8s ease .4s,opacity 0.8s ease .4s;
transition: transform 0.8s ease .4s,opacity 0.8s ease .4s;
 }
.intro .primary p { opacity:0; 
-webkit-transform:translateY(1em);
-moz-transform:translateY(1em);
-o-transform:translateY(1em);
-ms-transform:translateY(1em);
transform:translateY(1em);
}

#ana { width:5em; height:44px; padding:0 1em; background-color:rgba(255,255,255,.6); cursor:pointer; border-radius:.2em; margin:0em auto 0  auto; text-align:center; line-height:44px; font-size:90%; position:relative;
-moz-transition: transform 0.8s ease .6s,opacity 0.8s ease .8s;
-webkit-transition: transform 0.8s ease .6s,opacity 0.8s ease .8s;
-o-transition: transform 0.8s ease .6s,opacity 0.8s ease .8s;
-ms-transition: transform 0.8s ease .6s,opacity 0.8s ease .8s;
transition: transform 0.8s ease .6s,opacity 0.8s ease .8s;
}
#ana:before { content:"認証する"; }
.intro #ana {width:0; height:0; padding:0;
	opacity:0; 
-webkit-transform:translateY(1em);
-moz-transform:translateY(1em);
-o-transform:translateY(1em);
-ms-transform:translateY(1em);
transform:translateY(1em);
}

footer { position:fixed; bottom:0; left:0; padding:10px; font-size:11px; color:#999; width:100%; box-sizing:border-box; text-align:right; line-height:1; opacity:.8; }
footer span { display:inline-block; width:15px; height:15px; margin-right:.5em; background-image:url(../img/volume.svg); background-repeat:no-repeat; background-size:12px auto; vertical-align:middle; }
.on footer { display:none; }
footer em:before { content:"サウンドあり"; font-style:normal; }

.data { width:100%; text-overflow:ellipsis; display:block;white-space: nowrap;overflow: hidden; font-size:70%;
 }
 .data:before { content:"認証中"; font-size:80%; color:#aaa; }
 
 .online2 .box { max-width:23em; width:100%; text-align:center; }
 
 #pass { -webkit-appearance:none; appearance:none; border:none; border:0px solid #ddd; border-radius:.2em; background:none; max-width:20em; background-color:transparent; width:100%; height:44px; margin-bottom:1em; padding:0 1em; position:relative; font-size:100%; box-sizing:border-box; outline:none; background-color:rgba(255,255,255,.3); color:#111;
 -moz-transition: transform 0.8s ease .6s,opacity 0.8s ease .6s,background-color .3s ease 0s;
-webkit-transition: transform 0.8s ease .6s,opacity 0.8s ease .6s,background-color .3s ease 0s;
-o-transition: transform 0.8s ease .6s,opacity 0.8s ease .6s,background-color .3s ease 0s;
-ms-transition: transform 0.8s ease .6s,opacity 0.8s ease .6s,background-color .3s ease 0s;
transition: transform 0.8s ease .6s,opacity 0.8s ease .6s,background-color .3s ease 0s;
 }
 #pass:focus { border:0px solid #666; background-color:rgba(255,255,255,.6); }
 .intro #pass {  }
 .error #pass { background-color:rgba(201,10,13,1.00); border:0px solid rgba(201,10,13,1.00); }
 .error #pass+span:before { content:"入力に誤りがあります"; }
 #pass+span { display:none; }
 .error #pass+span { display:block; color:rgba(201,10,13,1.00); margin-bottom:1em; }
 #pass::selection { background-color:#000; }
 body.error:before { width:100%; height:100%; content:""; display:block; z-index:1; position:fixed; top:0; left:0;
 -webkit-animation: image2 .5s linear 0s infinite;
animation: image2 .5s linear 0s infinite;
 }
 body.focus:before { width:100%; height:100%; content:""; display:block; z-index:1; position:fixed; top:0; left:0;
 -webkit-animation: image3 .5s linear 0s infinite;
animation: image3 .5s linear 0s infinite;
 }
 
 
 
 .intro #pass{ width:0; height:0; padding:0;
	 opacity:0; 
-webkit-transform:translateY(1em);
-moz-transform:translateY(1em);
-o-transform:translateY(1em);
-ms-transform:translateY(1em);
transform:translateY(1em);
 }

 @-webkit-keyframes image { from { -webkit-transform:scaleX(0); }}
@keyframes image { from { -webkit-transform:scaleX(0);}}

@-webkit-keyframes image2 { from { background-color:rgba(195,1,5,0); }}
@keyframes image2 { from { background-color:rgba(195,1,5,.90); }}

@-webkit-keyframes image3 { from { background-color:rgba(255,255,255,.90); }}
@keyframes image3 { from { background-color:rgba(255,255,255,.90); }}

.offline span.body,.offline body:before {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b50a0c+0,000000+24&1+0,0+100 */
background: #FFF;


}
.offline.dead body:after { display:none; }

.nife,.offline.dead .nife { width:100%; height:100%; position:fixed; top:0; left:0; opacity:0; 
transform:translate3d(0,100%,0);
-moz-transform:translate3d(0,100%,0);
-o-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);

display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  
	   
   }
 .offline.dead .nife {
	 -moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
 }
 .nife .photo { background-repeat:no-repeat; background-position:center; background-size:cover; margin:5px; opacity:0; position:relative;
 
 -webkit-transform:scale(1) translate3d(0,50px,0);
 -moz-transform:scale(1) translate3d(0,50px,0);
 -o-transform:scale(1) translate3d(0,50px,0);
 -ms-transform:scale(1) translate3d(0,50px,0);
 transform:scale(1) translate3d(0,50px,0);
	 
	 ms-flex-preferred-size: calc( 50% - 10px );
               flex-basis: calc( 50% - 10px );
			   max-width:calc( 50% - 10px );
			   
			   height:calc( 33.333% - 10px );
			   }
			   
 .nife .photo div { height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;
	 
 }
			   
.offline .nife { background-color:#000;
	 opacity:1; 
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);

}

.offline .nife .photo {
	opacity:1;
-webkit-transform:scale(1) translate3d(0,0,0);
-moz-transform:scale(1) translate3d(0,0,0);
-o-transform:scale(1) translate3d(0,0,0);
-ms-transform:scale(1) translate3d(0,0,0);
transform:scale(1) translate3d(0,0,0);

-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;

}



.offline .nife .photo:nth-child(1) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
 }
 
 .offline .nife .photo:nth-child(2) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s,opacity 0.4s ease .1s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s,opacity 0.4s ease .1s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s,opacity 0.4s ease .1s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s,opacity 0.4s ease .1s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s,opacity 0.4s ease .1s;
 }
 
 .offline .nife .photo:nth-child(3) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s,opacity 0.4s ease .2s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s,opacity 0.4s ease .2s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s,opacity 0.4s ease .2s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s,opacity 0.4s ease .2s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s,opacity 0.4s ease .2s;
 }
 
  .offline .nife .photo:nth-child(4) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s,opacity 0.4s ease .3s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s,opacity 0.4s ease .3s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s,opacity 0.4s ease .3s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s,opacity 0.4s ease .3s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s,opacity 0.4s ease .3s;
 }
 
 .offline .nife .photo:nth-child(5) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
 }
 
 .offline .nife .photo:nth-child(6) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s,opacity 0.4s ease .5s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s,opacity 0.4s ease .5s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s,opacity 0.4s ease .5s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s,opacity 0.4s ease .5s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s,opacity 0.4s ease .5s;
 }
 
 .offline .nife .photo:nth-child(7) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .6s,opacity 0.4s ease .6s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .6s,opacity 0.4s ease .6s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .6s,opacity 0.4s ease .6s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .6s,opacity 0.4s ease .6s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .6s,opacity 0.4s ease .6s;
 }
 
 .offline .nife .photo:nth-child(8) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s,opacity 0.4s ease .7s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s,opacity 0.4s ease .7s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s,opacity 0.4s ease .7s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s,opacity 0.4s ease .7s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s,opacity 0.4s ease .7s;
 }
 
 .offline .nife .photo:nth-child(9) { 
-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .8s,opacity 0.4s ease .8s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .8s,opacity 0.4s ease .8s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .8s,opacity 0.4s ease .8s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .8s,opacity 0.4s ease .8s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .8s,opacity 0.4s ease .8s;
 }
 
.offline .red .nife .photo { 
	/*-webkit-transform:scale(.9) translate3d(0,0,0);
	-moz-transform:scale(.9) translate3d(0,0,0);
	-o-transform:scale(.9) translate3d(0,0,0);
	-ms-transform:scale(.9) translate3d(0,0,0);
	transform:scale(.9) translate3d(0,0,0);*/
	
	-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s,opacity 0.4s ease 0s;
	
}

.offline .red .nife .photo:nth-child(3) {
	-webkit-transform:scale(.85) translate3d(0,0,0);
	-moz-transform:scale(.85) translate3d(0,0,0);
	-o-transform:scale(.85) translate3d(0,0,0);
	-ms-transform:scale(.85) translate3d(0,0,0);
	transform:scale(.85) translate3d(0,0,0);
}

.offline .red .nife .photo:nth-child(6) {
	-webkit-transform:scale(.8) translate3d(0,0,0);
	-moz-transform:scale(.8) translate3d(0,0,0);
	-o-transform:scale(.8) translate3d(0,0,0);
	-ms-transform:scale(.8) translate3d(0,0,0);
	transform:scale(.8) translate3d(0,0,0);
}

.offline.g2 .red .nife .photo:nth-child(1) {
	-webkit-transform:scale(.82) translate3d(0,0,0);
	-moz-transform:scale(.82) translate3d(0,0,0);
	-o-transform:scale(.82) translate3d(0,0,0);
	-ms-transform:scale(.82) translate3d(0,0,0);
	transform:scale(.82) translate3d(0,0,0);
}

.offline.g3 .red .nife .photo:nth-child(2) {
	-webkit-transform:scale(.92) translate3d(0,0,0);
	-moz-transform:scale(.92) translate3d(0,0,0);
	-o-transform:scale(.92) translate3d(0,0,0);
	-ms-transform:scale(.92) translate3d(0,0,0);
	transform:scale(.92) translate3d(0,0,0);
}
.offline.g3 .red .nife .photo:nth-child(5) {
	-webkit-transform:scale(1.1) translate3d(0,0,0);
	-moz-transform:scale(1.1) translate3d(0,0,0);
	-o-transform:scale(1.1) translate3d(0,0,0);
	-ms-transform:scale(1.1) translate3d(0,0,0);
	transform:scale(1.1) translate3d(0,0,0);
}

.offline.g2 .red .nife .photo:nth-child(4) {
	-webkit-transform:scale(1.05) translate3d(0,0,0);
	-moz-transform:scale(1.05) translate3d(0,0,0);
	-o-transform:scale(1.05) translate3d(0,0,0);
	-ms-transform:scale(1.05) translate3d(0,0,0);
	transform:scale(1.05) translate3d(0,0,0);
}

.offline .red .nife .photo:nth-child(7) {
	-webkit-transform:scale(.9) translate3d(0,0,0);
	-moz-transform:scale(.9) translate3d(0,0,0);
	-o-transform:scale(.9) translate3d(0,0,0);
	-ms-transform:scale(.9) translate3d(0,0,0);
	transform:scale(.9) translate3d(0,0,0);
}

.offline .red .nife .photo:nth-child(8) {
	-webkit-transform:scale(.94) translate3d(0,0,0);
	-moz-transform:scale(.94) translate3d(0,0,0);
	-o-transform:scale(.94) translate3d(0,0,0);
	-ms-transform:scale(.94) translate3d(0,0,0);
	transform:scale(.94) translate3d(0,0,0);
}

.offline .red .nife .photo:nth-child(9) {
	-webkit-transform:scale(.84) translate3d(0,0,0);
	-moz-transform:scale(.84) translate3d(0,0,0);
	-o-transform:scale(.84) translate3d(0,0,0);
	-ms-transform:scale(.84) translate3d(0,0,0);
	transform:scale(.84) translate3d(0,0,0);
}




.offline.g2 .red .nife .photo:nth-child(1) div {
animation: hurue 0.2s ease 0s;	
}
.offline.g3 .red .nife .photo:nth-child(2) div {
animation: hurue 0.22s ease .04s ;	
}
.offline .red .nife .photo:nth-child(3) div {
animation: hurue 0.16s ease .11s;	
}
.offline.g2 .red .nife .photo:nth-child(4) div {
animation: hurue 0.28s ease .29s;	
}
.offline.g3 .red .nife .photo:nth-child(5) div {
animation: hurue 0.23s ease .18s;	
}
.offline .red .nife .photo:nth-child(6) div {
animation: hurue 0.1s ease .12s;	
}

.offline .nife .photo div:before { width:100%; height:100%; background-color:#FFF; opacity:0; content:""; display:block;

 }
.offline.g4 .red .nife .photo:nth-child(1) div:before,.offline.g5 .red .nife .photo:nth-child(1) div:before {
	animation: hurue3 0.2s ease 0s;	
}

.offline.g4 .red .nife .photo:nth-child(2) div:before,.offline.g5 .red .nife .photo:nth-child(2) div:before {
animation: hurue3 0.24s ease .04s;	
}

.offline.g4 .red .nife .photo:nth-child(3) div:before,.offline.g5 .red .nife .photo:nth-child(3) div:before {
animation: hurue3 0.12s ease .11s;
}

.offline.g4 .red .nife .photo:nth-child(4) div:before,.offline.g5 .red .nife .photo:nth-child(4) div:before {
animation: hurue3 0.36s ease .09s;	
}

.offline.g4 .red .nife .photo:nth-child(5) div:before,.offline.g5 .red .nife .photo:nth-child(5) div:before {
animation: hurue3 0.26s ease .18s;	
}

.offline.g4 .red .nife .photo:nth-child(6) div:before {
animation: hurue3 0.1s ease .02s;
}


@keyframes hurue {
0% { transform:scale(1); }
30% { transform:scale(1.3); }
60% { transform:scale(.7); }
100% { transform:scale(1); }
}

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

@keyframes hurue2 {
0% { transform:translate3d(0,0,0); }
10% { transform:translate3d(4px,0,0); }
20% { transform:translate3d(0px,4px,0); }
30% { transform:translate3d(-6px,0,0); }
40% { transform:translate3d(0px,-4px,0); }
50% { transform:translate3d(4px,0,0); }
60% { transform:translate3d(0px,4px,0); }
70% { transform:translate3d(-4px,0,0); }
80% { transform:translate3d(0px,-4px,0); }
90% { transform:translate3d(0px,4px,0); }
100% { transform:translate3d(0,0,0); }
}

@keyframes hurue2_2 {
0% { transform:translate3d(0,0,0);opacity:0; }
10% { transform:translate3d(4px,0,0);opacity:.5; }
20% { transform:translate3d(0px,4px,0);opacity:0; }
30% { transform:translate3d(-6px,0,0);opacity:.3; }
40% { transform:translate3d(0px,-4px,0);opacity:0; }
50% { transform:translate3d(4px,0,0);opacity:1; }
60% { transform:translate3d(0px,4px,0);opacity:0; }
70% { transform:translate3d(-4px,0,0);opacity:1; }
80% { transform:translate3d(0px,-4px,0);opacity:.7; }
90% { transform:translate3d(0px,4px,0);opacity:0; }
100% { transform:translate3d(0,0,0);opacity:1; }
}




@media screen and (min-width: 768px) {
.online { width:50%; }
.online2 .box { text-align:center; max-width:100%; }

.nife .photo { 
 
	 
	 ms-flex-preferred-size: calc( 33.333% - 10px );
               flex-basis: calc( 33.333% - 10px );
			   max-width:calc( 33.333% - 10px );
			   
			   height:calc( 50% - 10px );
			   }
			   
.window body:before { background-image:url(../img/3.jpg); }

}

 #video {
		position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  
  -webkit-animation: hurue2_3 3s ease 0s infinite;
animation: hurue2_3 3s ease 0s infinite;
    }
	
	
	@keyframes hurue2_3 {
0% { transform:translate3d(0,0,0);opacity:0; }
1% { transform:translate3d(4px,0,0);opacity:.5; }
2% { transform:translate3d(0px,4px,0);opacity:0; }
3% { transform:translate3d(-6px,0,0);opacity:.3; }
4% { transform:translate3d(0px,-4px,0);opacity:0; }
5% { transform:translate3d(4px,0,0);opacity:1; }
6% { transform:translate3d(0px,4px,0);opacity:0; }
7% { transform:translate3d(-4px,0,0);opacity:1; }
8% { transform:translate3d(0px,-4px,0);opacity:.7; }
100% { transform:translate3d(0,0,0);opacity:1; }
}




@media screen and (max-width: 767px) {
	.primary p:before { /*content:"私に気づいて";*/ font-size:150%; }
	.primary p:after { /**content:"「2019/5/28」と入力してください";**/ content:"下記フォームに\A「悲運と絶望と嫉妬」と入力して";  color:#fff; font-size:95%; display:block; white-space: pre; }
	.primary p { margin-bottom:1em;}
	body { }
	p.text { font-size:150%; }
	.online2 { width:100%; box-sizing:border-box; }
	.online2 .box { width:100%; padding:0 2em; box-sizing:border-box; max-width:370px;}
	h1 { font-size:140%; }
	.sp { display:block; }
	.icon { width:70px; height:70px; margin-bottom:1em; }
	.analyz p { font-size:120%;}
	.online { width:100%; padding:0 2em; box-sizing:border-box; }
	
	.offline.dead p.text { font-size:140%; }
	
	.offline body { 
webkit-animation: image3_sp 2s ease 0s infinite alternate;
animation: image3_sp 2s ease 0s infinite alternate;
}

.offline span.body,.offline body:before { 
 }
 
  #video {
		position: absolute; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%; max-width:200%; max-height:200%;
  width: auto; height: auto; z-index: -100;
    }

}



p.noSupport { display:none; margin:0; padding:20px; }
.no div,.no p,.no footer { display:none;  }
.no body {background-image:none; }
.no p.noSupport { display:block; }
.no p.noSupport:before { content:"Safariをお使いください"; display:block; color:#aaa; }

#cancel { height:37px; width:100%; cursor:pointer; position:absolute; bottom:0; left:0; line-height:37px; font-size:90%; text-align:center; color:#aaa; border-top:#333 1px solid ; }
#cancel:before { content:"キャンセル"; }

@media screen and (max-width: 767px) and (orientation: landscape)  {
	.online2 .box { position:static;
	-webkit-transform: translate(0%,0%);
    -moz-transform: translate(0%,0%);
    -o-transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
    transform: translate(0%,0%);
	display:block;
	margin:20px auto; }
	
	.on .online2 { overflow:auto; -webkit-overflow-scrolling: touch; }
	#cancel { position:static; }
}


   

 .offline #videoBox { display:none; }
 
 #exit { height:30px; background-color:rgba(0,0,0,0); color:rgba(255,255,255,.6); text-align:center; padding:0 1em; line-height:30px; font-size:70%; cursor:pointer; position:fixed; bottom:0; right:0; opacity:0; z-index:9999;
 -webkit-transform:translate3d(0,50px,0);
 -moz-transform:translate3d(0,50px,0);
 -o-transform:translate3d(0,50px,0);
 -ms-transform:translate3d(0,50px,0);
 transform:translate3d(0,50px,0);
 
 -moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s,opacity 0.4s ease .4s;
 }

 
 .offline:not(.dead) #exit {
	 opacity:1;
	 -webkit-transform:translate3d(0,0px,0);
 -moz-transform:translate3d(0,0px,0);
 -o-transform:translate3d(0,0px,0);
 -ms-transform:translate3d(0,0px,0);
 transform:translate3d(0,0px,0);  
 }

 #exit:before { content:"緊急脱出する"; }
 #videoBox { width:100%; height:100%; position:fixed; top:0; left:0;
 -moz-transition: opacity 0.4s ease 0s;
-webkit-transition: opacity 0.4s ease 0s;
-o-transition: opacity 0.4s ease 0s;
-ms-transition: opacity 0.4s ease 0s;
transition: opacity 0.4s ease 0s;
 }
 #videoBox:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+74,1+100 */
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 74%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 74%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 74%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


 }
 .window #videoBox { opacity:0; } 
 
 .offline .process { width:100%; height:4px; background-color:#333;
 position:fixed; top:50%; left:0; 
 margin-top:-2px;
  }
  .offline.dead .process { display:none; }
.offline .process span { display:block; width:0%; height:100%; background-color:rgba(205,12,15,1.00);
-webkit-animation: process 50s linear 0s both;
animation: process 50s linear 0s both;
 }
 .offline.dead .process { display:none; }
 
 @-webkit-keyframes process { from { width:100%; }}
@keyframes process { from { width:100%;  }}

#alert { opacity:0; width:90%; max-width:400px; max-height:70%; padding:20px; padding-bottom:10px; box-sizing:border-box; background-color:#FFF; border-radius:.2em; box-shadow:0px 4px 25px rgba(0,0,0,.4); position:fixed; top:50%; left:50%; text-align:right; z-index:-1; overflow:hidden;
-webkit-transform:translate(-50%,100%);
-moz-transform:translate(-50%,100%);
-o-transform:translate(-50%,100%);
-ms-transform:translate(-50%,100%);
transform:translate(-50%,100%);

-moz-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) -.2s,opacity 0.4s ease 0s;
-webkit-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) -.2s,opacity 0.4s ease 0s;
-o-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) -.2s,opacity 0.4s ease 0s;
-ms-transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) -.2s,opacity 0.4s ease 0s;
transition: transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) -.2s,opacity 0.4s ease 0s;

}
.offline #alert { z-index:99; }
#alert #ok { display:inline-block; padding:0 1em; height:44px; line-height:44px; cursor:pointer; font-size:90%; font-weight:bold; color:#0670EA; font-family:Arial, Helvetica, sans-serif; }
#alert #ok:before { content:"OK"; }
#alert p { text-align:left; margin-bottom:1em; margin-top:0; color:#666;word-wrap: break-word; font-family:Arial, Helvetica, sans-serif; overflow:auto; height:10em; }
#alert p span { display:block; }

.offline.alert1:not(.dead):not(.g6) #alert,.offline.alert2:not(.dead):not(.g6) #alert,.offline.alert3:not(.dead):not(.g6) #alert { opacity:1;  z-index:99;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
 }
 
 .alert1:not(.dead) #alert p:before { /*content:"輝かしい未来がある子供や若者が絶望的に憎たらしい。"; content:"undefined";*/ }
  .alert2:not(.dead) #alert p:before { /*content:"たった一度しかない人生を、私はものにできなかった。"; content:"undefined";*/}
  .alert3:not(.dead) #alert p:before { /*content:"私の人生は何だったのか。"; content:"undefined";*/}
  
  .alert1:not(.dead):not(.g6) #overlay,.alert2:not(.dead):not(.g6) #overlay,.alert3:not(.dead):not(.g6) #overlay { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0); z-index:99; }
  
 
.alert1:not(.dead):not(.g6) body,.alert2:not(.dead):not(.g6) body,.alert3:not(.dead):not(.g6) body	{animation: hurue2 0.2s ease 0s;}  

@media screen and (max-width: 767px) and (orientation: landscape)  {
	#alert p {  height:4em; }
}