@charset "utf-8";
body,html { height:100%; }
body { background-color:#222; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
 body.android { font-family:'Noto Sans JP'; }
nav { position:fixed; left:0; bottom:0; width:100%; background-color:#222; border-top:1px solid #666; }
nav li { cursor:pointer; height:44px; line-height:44px; width:calc( ( 100% - 44px ) / 3 ); display:inline-block; text-align:center; color:#ccc; font-size:90%; position:relative; vertical-align:top;}
nav li.selected { color:#FFF; font-weight:bold; }
nav li.selected:after { content:""; display:block; background-color:#FF0000; width:100%; height:2px; position:absolute; top:0; left:0; }
nav li#home { width:44px; background-image:url(../img/home.svg); background-repeat:no-repeat; background-size:20px; background-position:center; }

#display { width:100%; height:calc(100% - 44px ); position:fixed; top:0; left:0; }
.program { display:none; }
.program h1 { opacity:0; }
.program .telop { position:absolute; left:0; bottom:0; width:100%; text-align:center; color:#FFF; font-weight:bold; padding:1em 0; }


.varietys.program h1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0) rotate(720deg); }
.varietys.program h1 img { width:70vw; height:auto; }
.variety .varietys.program h1 { opacity:1; animation: logos 6s linear 0s both;} 


.documents.program h1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.documents.program h1 img { width:70vw; height:auto; }
.document .documents.program h1 { opacity:1; animation: document_h1 6s ease 0s both;} 
.documents.program h2,.varietys.program h2 { position:absolute; top:4vw; right:4vw; opacity:0; }
.sportss.program h2 { position:absolute; top:4vw; left:4vw; opacity:1; color:#FFF;text-shadow: 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000; font-size:6vw; }

.document .documents.program h2,.variety .varietys.program h2 { opacity:1; animation: document_h2 1s ease 6s both;}
.documents.program h2 img,.varietys.program h2 img { width:36vw; height:auto; }
.varietys.program h2 img { width:50vw; height:auto;}
.document.p1 .documents.program .telop:after { content:"容疑者は普段どんな人?"; font-size:8vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}
.document.p1 .documents.program .telop:before,.document.p2 .documents.program .telop:before,.document.p3 .documents.program .telop:before,.document.p4 .documents.program .telop:before
,.document.p5 .documents.program .telop:before,.document.p6 .documents.program .telop:before,.document.p7 .documents.program .telop:before { content:""; display:block; width:100%; height:.4em; position:absolute; top:50%; left:0; transform:translateY(-50%); background-color:#F8AC58; }
.document.p2 .documents.program .telop:after { content:"「ピアノが上手かった」"; font-size:9vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}
.document.p3 .documents.program .telop:after { content:"「リフティングが5回できる」"; font-size:7vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}
.document.p4 .documents.program .telop:after { content:"「鍋の残りを雑炊にしていた」"; font-size:7vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}
.document.p5 .documents.program .telop:after { content:"「居酒屋でポテトサラダ」"; font-size:8vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}
.document.p6 .documents.program .telop:after { content:"「お尻にホクロがあった」"; font-size:8vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}
.document.p7 .documents.program .telop:after { content:"「出禁にした」"; font-size:14vw;text-shadow: 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019, 0 0 0.8vw #AB2019; position:relative;}

.document.p1 .documents.program .telop:before,.document.p2 .documents.program .telop:before,.document.p3 .documents.program .telop:before,.document.p4 .documents.program .telop:before,.document.p5 .documents.program .telop:before,.document.p6 .documents.program .telop:before,.document.p７ .documents.program .telop:before { content:""; display:block; width:100%; height:.4em; position:absolute; top:50%; left:0; transform:translateY(-50%); background-color:#F8AC58; }
.document.p1 .documents.program .name,.document.p2 .documents.program .name,.document.p3 .documents.program .name,.document.p4 .documents.program .name,.document.p5 .documents.program .name
,.document.p6 .documents.program .name,.document.p7 .documents.program .name { background-color:#FFF; border-radius:.4em; color:#111; padding:.4em; position:absolute; top:12vh; right:4vw; font-size:5vw;
-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
		   }
.document.p1 .documents.program .name:before { content:"容疑者をよく知る住民"; font-weight:bold; }
.document.p2 .documents.program .name:before { content:"容疑者の中学の同級生"; font-weight:bold; }
.document.p3 .documents.program .name:before { content:"容疑者の元恋人"; font-weight:bold; }
.document.p4 .documents.program .name:before { content:"容疑者の元ルームメイト"; font-weight:bold; }
.document.p5 .documents.program .name:before { content:"容疑者の元勤務先の上司"; font-weight:bold; }
.document.p6 .documents.program .name:before { content:"容疑者の行きつけの散髪屋"; font-weight:bold; }
.document.p7 .documents.program .name:before { content:"お気に入りだった性サービス嬢"; font-weight:bold; }

.documents.program h3 { opacity:0; }
.document .documents.program h3 { position:absolute; top:4vw; left:4vw; background-color:#FFF; border-radius:5vw; border-top-right-radius:.4em; border-bottom-right-radius:.4em; height:10vw; line-height:10vw; font-size:5vw; padding-right:.5em;animation: document_h2 1s ease 6s both; opacity:1; }
.document .documents.program h3 span { width:10vw; height:10vw; border-radius:50%; background-color:#AC060A; display:inline-block; text-align:center; font-size:3vw; line-height:10vw; color:#FFEF33; vertical-align:top; margin-right:.4em; }
.sportss.program h3 { opacity:1; position:absolute; bottom:4vw; right:4vw;}
.sportss.program h3 img { width:36vw; height:auto; }

.variety .varietys.program .telop { color:#FFF200; }
.varietys.program h3 { opacity:0; }
.variety .varietys.program h3 { position:absolute; top:4vw; left:4vw; font-size:6vw; animation: document_h2 1s ease 6s both; opacity:1; color:#4D47DD;text-shadow: 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF, 0 0 0.8vw #FFF;　}
.variety .varietys.program h3 span { display:block; color:#F1100C; margin-top:.2em;font-size:7vw; }

.variety.p1 .varietys.program .telop:after { content:"変顔「ぬらりひょん」"; font-size:9vw;text-shadow: 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000; position:relative;}

.variety.p2 .varietys.program .telop:after { content:"変顔「トロンボーン」"; font-size:9vw;text-shadow: 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000; position:relative;}
.variety.p3 .varietys.program .telop:after { content:"変顔「ミイラ少年」"; font-size:9vw;text-shadow: 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000; position:relative;}
.variety.p4 .varietys.program .telop:after { content:"変顔「ピーターパン」"; font-size:9vw;text-shadow: 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000; position:relative;}
.variety.p5 .varietys.program .telop:after { content:"変顔って言うか\A素のお前やん";white-space: pre; font-size:12vw;text-shadow: 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000, 0 0 0.8vw #000; position:relative; color:#FE0002;}




@keyframes document_h1 {
0% {opacity:0;}
30% {opacity:1;}
70% {opacity:1;}
100% {opacity:0;}
}
@keyframes document_h2 {
0% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
}

@keyframes logos {
0% {transform:translate(-50%,-50%) scale(0) rotate(720deg); opacity:1;}
5% {transform:translate(-50%,-50%) scale(.7) rotate(0deg); opacity:1;}
10% {transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1;}
95% {transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1;}
100% {transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:0;}
}

#start { width:100%; height:100%; background-color:#474A43; position:fixed; top:0; left:0; transform:translateX(-100%); opacity:0; background-image:url(../img/bg.jpg); background-repeat:no-repeat; background-position:center top; background-size:cover;
-moz-transition: all 0.4s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: all 0.4s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: all 0.4s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: all 0.4s cubic-bezier(.07,.91,.14,.84) 0s;
transition: all 0.4s cubic-bezier(.07,.91,.14,.84) 0s;
 }
.stop #start { transform:translateX(0); opacity:1; }
#start .start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
#play { width:60px; height:60px; box-sizing:border-box; border-radius:50%; border:4px solid #FFF; cursor:pointer; background-image:url(../img/play.svg); background-repeat:no-repeat; background-position:center; background-size:30px; display:inline-block; }
#play+p { color:#FFF; font-size:10px; margin-top:1em; opacity:0; }
#play.loading+p { opacity:1; }

@media (orientation: landscape){
	.document .documents.program h3 span {
		width: 5vw;
    height: 5vw; 
    font-size: 1.5vw;
    line-height: 5vw;
    
	 }
	 
	 .document .documents.program h3 {
  top:2vw; left:2vw;
    border-radius: 2.5vw;
    height: 5vw;
    line-height: 5vw;
    font-size: 2.5vw;
}
.documents.program h2, .varietys.program h2 { top:2vw; right:2vw; }
.documents.program h2 img, .varietys.program h2 img {
    width: 18vw;
}
.varietys.program h2 img { width:25vw; height:auto;} 
.documents.program h1 img {
    width: 35vw;
}
.document.p1 .documents.program .name, .document.p2 .documents.program .name, .document.p3 .documents.program .name, .document.p4 .documents.program .name, .document.p5 .documents.program .name, .document.p6 .documents.program .name, .document.p7 .documents.program .name {
    top: 20vh;
    right: 2vw;
    font-size: 2.5vw;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}
.document .documents.program .telop:after { font-size:5vw!important; }

.varietys.program h1 img {
    width: 35vw;
}
.variety .varietys.program h3 {
top:2vw; left:2vw;
    font-size: 2.5vw;
  
}
.variety .varietys.program h3 span {

    font-size: 3vw;
}
.variety .varietys.program .telop:after { font-size:5vw!important; }

.sportss.program h2 { line-height:1.4;
top:2vw; left:2vw;
    font-size: 3vw;
}
.sportss.program h3 img {
    width: 18vw;
}
.sportss.program h3 { bottom:2vw; right:2vw; }
}

#camera {
	 position: fixed; left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    width: auto; z-index: -100;
}

#video { transform-origin:50% 50%;
 width:100%; height:100%; position:fixed; top:0; left:0;
}

.va #camera  {
	animation: video 3.5s linear 0s both;
}

@media (orientation: landscape){
 
 #camera {
		width: 100%;
    
    min-width:100%;
    min-height:100%;
	height:auto;
	}
 
}

@keyframes video {
0% { transform:scale(1) translate(-50%,-50%);}
10% {transform:scale(1.2) translate(-50%,-50%);}
20% { transform:scale(1) translate(-50%,-50%);}
30% {transform:scale(1.2) translate(-50%,-50%);}
40% { transform:scale(1) translate(-50%,-50%);}
50% {transform:scale(1.2) translate(-50%,-50%);}
60% { transform:scale(1) translate(-50%,-50%);}
70% {transform:scale(1.2) translate(-50%,-50%);}
80% { transform:scale(1) translate(-50%,-50%);}
90% {transform:scale(1.2) translate(-50%,-50%);}
100% { transform:scale(1) translate(-50%,-50%);}
}