@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

/*---Custom---*/
.modaal-inner-wrapper{
  display:block;
  padding:100px 0 50px !important;
}
.modaal-container{
  max-width:100% !important;
  box-shadow:none !important;
  background:none !important;
  pointer-events:none;
}

.modaal-content-container>*,
#modaal-close{
  pointer-events:auto;
}

.slick-list{
  overflow:visible !important;
}
.slick-dots{
  bottom:-85px !important;
}
.slick-dots li button{
  background-color:#FFF !important;
}
.slick-dots li button:before{
  color:transparent !important;
}
.slick-dots li.slick-active button{
  background-color:#F00 !important;
}

/*---Language---*/
*.jp{display:block;}
*.tw{display:none;}
*.en{display:none;}

/*---Common---*/
*{box-sizing: border-box;}
.sub{
  display: inline-block;
  font-size:80%;
  opacity:0.9;
  text-indent:-1em;
  margin-left:1em;
}

.clearfix:after{
  content:"";
  display:block;
  width:100%;
  height:0px;
  clear:both;
}

span.oneword{
  display:inline-block;
}

@keyframes blink{
  0%{opacity:1;}
  100%{opacity:0.5;}
}
/*---preset----*/
a.btn_floating{
  position:fixed;
  right:2%;
  bottom:2%;
  width:120px;
  padding:18px;
  z-index:99;
  text-align:center;
}
a#btn_twitter{
  bottom:150px;
  /*right:200px;*/
}
a.btn_floating .btn_outer{
  display:block;
  position:absolute;
  width:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  /*opacity:0.9;*/
  z-index:1;
  animation: btnlive 5s linear 0s infinite normal;
  transition: 0.3s;
}
a.btn_floating:hover .btn_outer{
  width:110%;
  transition: 0.3s;
}
a.btn_floating .btn_inner{
  display:block;
  width:100%;
  position:relative;
  z-index:2;
}

@keyframes btnlive {
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(-360deg);}
}
.whatsnews{
  width:100%;
  max-width:800px;
  margin:1% auto;
}
.whatsnews dl{
  display:flex;
  flex-flow:nowrap;
  color:#FFF;
  font-size:90%;
}
.whatsnews dt,
.whatsnews dd{
  padding:1%;
}
.whatsnews dt{
  width:12%;
  min-width:72px;
  background-color:#E00;
  text-align:center;
  white-space:nowrap;
}
.whatsnews dd{
  margin-left:0.5%;
  width:88%;
}
.whatsnews dd a{
  color:#F00;
  font-weight:bold;
}

.whatsnews .btn_news_log{
  background-color:#F00;
  padding:0.5% 1em;
  width:5em;
  text-align:center;
  color:#FFF;
  text-decoration:none;
  float:right;
  border-radius:20px;
}
.whatsnews .news_log{
  display:none;
}

/*----Main Banner (Carousel) ---*/
#main_banner{
  margin:10% 0;
  position:relative;
}

#main_banner img{
  display:block;
  width:100%;
  margin:0 auto;
  border:1px #333 solid;
  border-radius:5px;

  transform:translate(0,0);
  opacity:0.3;
  transition: transform 1s,opacity 0.5s;
}

#main_banner .slider-item{
  transform:scale(1,1);
  transition:transform 0.5s;
  position:relative;
  z-index:0;
  filter:blur(3px);

  /*--3D--*/
  perspective: 300px;
  transform-style: preserve-3d;
}
#main_banner .slider-item>div{transform:rotateX(0deg);background-color: rgba(0,0,0,1);  transition: 1s;}

#main_banner .slick-center{
  transform:scale(1.2,1.12);
  position:relative;
  z-index:2;
  opacity:1;
  filter:blur(0);
  transition:transform 2s;
}
#main_banner .slick-center>div{
  box-shadow: 0 0 100px rgba(0,0,0,1);

  /*--3D--*/
  transform:rotateX(10deg);
}
#main_banner .slick-center>div img{
  transform:translate(0,-8%);
  opacity:1;
  transition: transform 3s,opacity 0.5s;
}

/*#main_banner .slick-next>div{
  transform:rotateX(10deg) rotateY(10deg);
}
#main_banner .slick-prev>div{
  transform:rotateX(10deg) rotateY(-10deg);
}*/


/*---Base--*/
body{
  margin:0;
  font-size: 16px;
  background-color:#000 !important;
  background-image:url(../images/common/header_texture.jpg);
  background-repeat:no-repeat;
  background-size:100% auto;
  background-attachment: fixed;
  font-family: Lato, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#wrapper{
  width:100%;
  min-width:1280px;
  overflow-x:hidden;
}

.wrap_filter{
  filter:blur(7px);
}
/*--Header---*/
header{
  width:100%;
  padding-top:1px;
  height:330px;
  position:relative;
}
header>div{
  width:100%;
}
header #kt_tgs2018{
  display: block;
  width:60%;
  max-width:522px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-75%);
}

header #header_bar{
  width:100%;
  display: flex;
  flex-flow: nowrap;
  border:1px #444 solid;
  border-width:0 0 1px;
  position:absolute;
  top:auto;bottom:0;left:0;
}
header #header_bar #header_info{
  width:85%;
  background-color: rgba(0, 0, 0, 0.8);
  transition:background-color 0.3s;
}
header #header_bar #btn_menu{
  display:block;
  width:15%;
  background-color: rgba(194, 1, 1, 0.8);
  position:relative;
  transition:background-color 0.3s;
}
header #header_bar #header_info img,
header #header_bar #btn_menu img{
  width:80%;
  display: block;
  margin:1% auto;
  padding:0;
}
header #header_bar #header_info img{max-width:784px;}
header #header_bar #btn_menu img{
  max-width:169px;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
header .fix{
  position:fixed !important;
  top:0 !important;
  bottom:auto !important;
  z-index:99;
}

header .fix #header_info{
  background-color: rgba(0, 0, 0, 1) !important;
}
header .fix #btn_menu{
  background-color: rgba(240, 0, 0, 1) !important;
}


/*---Footer--*/

footer {
	text-align: left;
	background: #2d2d2d;
	position: relative;
	z-index: 51;
  width: 100%;
  color: #fff;
}
.footer-wrap {
  padding-top: 40px;
  line-height: 1.8;
}

.footer-ttl {
  font-size: 4em;
  font-weight: bold;
  line-height: 1.4;
}

footer #tgs2018_info dl{
  display:flex;
  flex-flow: wrap row;
  margin:1.5% 0;
  padding:1.5% 0;
  border:1px #666 dotted;
  border-width:0 0 1px;
}
footer #tgs2018_info dl dt{
  width:15%;
  white-space: nowrap;
}
footer #tgs2018_info dl dd{
  margin:0;
  width:85%;
}



.footer-link {
  display:block;
  padding:1% 20px;
  width:10em;
  text-align: center;
  background: #C00;
  color: #fff;
}

.footer-link:hover {
  background: #fff;
  color: #c00;
  text-decoration: none;
}

.footer-tgs {
  padding: 20px;
  border-bottom: #666 solid 1px;
}

.footer-sns {
  text-align: center;
  padding: 20px 0 20px;
}

.footer-sns img {
  margin: 0 10px;
}

.footer-copy {
  text-align: center;
  background: #FFF;
  padding: 20px 0 20px;
  font-size: 10px;
  width: 100%;
  margin: 0 auto;
  color: #888;
}
.footer-copy p{
  width:60%;
  margin:0 auto;
}

footer a.open_booth_detail{
  display:block;
  width:80%;
  font-size:80%;
  max-width:400px;
  margin:5% auto 1%;
  background-color:rgba(255, 255, 255, 0.2);
  color:#FFF;
  border:1px rgba(255,255,255,0.2) solid;
  border-radius:2px;
  text-align:center;
  padding:1%;
  text-decoration:none;
}

/*---Boothmap Route----*/
img#booth_detail_image{
  display:block;
  width:100%;
  max-width:800px;
  margin:0 auto;
}
#route{
  width:98%;
  max-width:750px;
  margin:0 auto;
  margin-top:5%;
}
#route h4{
  margin:0;
  padding:0;
  color:#FFF;
  text-align:left;
  border:1px #444 dotted;
  border-width:0 0 1px;
  padding:2px 7px;
  margin-bottom:2px;
  margin-left:1em;
  text-indent:-1em;
  font-size:120%;
  line-height: 1.2;
}
#route #routemap{
  display:flex;
  flex-flow: row wrap;
}
#route #routemap>div{
  width:48%;
  margin:1%;
  background-color:rgba(255,255,255,0.9);
  color:#000;
  padding:4px;
  border-radius:4px;
  position:relative;
}
#route #routemap>div img{
  display:block;
  width:100%;
  margin-bottom:5px;
}
#route #routemap>div .number{
  position:absolute;
  top:6px;
  left:6px;
  font-size:14px;
  font-weight:bold;
  border-radius:100px;
  background-color:rgba(255,255,255,1);
  text-align:center;
  width:30px;
  height:30px;
  line-height: 30px;
}


/*--Global Menus---*/
nav#global-menu{
  width:20em;
  color:#FFF;
  font-size:180%;
  text-align: center;
  margin:0 auto;
}
nav#global-menu a{
  display: block;
  margin:10% auto;
  text-decoration:none;
  color:#FFF;
}
nav#global-menu a b{
  display: inline-block;
  border:1px #333 solid;
  border-width:0 0 1px;
  padding-left:2em;
  padding-right:2em;
  font-weight:bold;
}
nav#global-menu a span{
  display:block;
  padding-top:0.2%;
  font-size:40%;
  opacity:0.8;
}
nav#global-menu a.current{
  color:#E00;
  cursor:default;
}
nav#global-menu a.current b{
  border-color:#800;
}


/*---LIVE Channels---*/
#channels{
  width:100%;
  max-width:900px;
  margin:0 auto;
  color:#FFF;
}
#channels #channel_list{
  margin:5% 0;
  padding:2%;
  background-color:rgba(255,255,255,0.3);
  border-radius:5px;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
}
#channels h4{
  margin:0;
  padding:0;
  font-size:200%;
  font-weight:bold;
  text-align: center;
}
#channels h4 .subtitle{
  display:block;
  margin:0.2%;
  font-size:50%;
  color:#888;
}

#channels h5{
  font-size:120%;
  text-align: center;
  border:1px rgba(255,255,255,0.3) solid;
  border-width:0 0 1px;
  margin:0 0 5%;
  padding-bottom:2%;
}
#channels b{
  font-size:150%;
  text-align: center;
  display:block;
  margin-bottom:1%;
}

#channels .ch{
  display:flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
#channels #channel_list>div{
  margin:5% 0;
}
#channels .ch a,
#channels .ch span{
  display:block;
  width:24%;
  margin:1% 0;
  font-size:120%;
  font-weight:bold;
  text-align:center;
  background-color:#DDD;
  border:1px #AAA solid;
  box-shadow:0 0 3px #FFF inset;
  border-radius:5px;
  text-decoration:none;
  color:rgba(0,0,0,0);
  background-position:center;
  background-size:95% auto;
  background-repeat: no-repeat;
}
#channels .ch a:before,#channels .ch span:before,
#channels .ch a:after,#channels .ch span:after{
  content:"";
  display:block;
  padding:0 1%;
}
#channels .ch a:before,#channels .ch span:before{padding-top:7%;}
#channels .ch a:after,#channels .ch span:after{padding-bottom:7%;}

#channels .ch span{
  /*color:#BBB;*/
  opacity:0.2;
}

#channels .ch .link_niconama{background-image:url(../images/common/ch_logo_niconama.png);}
#channels .ch .link_youtube{background-image:url(../images/common/ch_logo_youtube.png);}
#channels .ch .link_fresh{background-image:url(../images/common/ch_logo_fresh.png);}
#channels .ch .link_openrec{background-image:url(../images/common/ch_logo_openrec.png);}

#channels #btn_live_title,
#channels #btn_live_schedule{
  display: inline-block;
  margin:0 1.8% 2%;
  border:2px rgba(255,255,255,0.3) solid;
  color:#FFF;
  text-decoration: none;
  text-align:center;
  padding:2%;
  font-size:100%;
  border-radius:50px;
  width:46%;
  max-width:500px;
}
#channels #btn_live_title{margin-top:1.5%;}

#ch0920,#ch0922,#ch0923{display:none;}
.day1 #ch0920,
.day3 #ch0922,
.day4 #ch0923{display:block;}
.target b{display:none !important;}

body#titles #channels #btn_live_title,
body#schedule #channels #btn_live_schedule{display:none;}
body#titles #channels #btn_live_schedule,
body#schedule #channels #btn_live_title{display:block;margin:0 auto;}


/*--Contents---*/
#contents{
  background-color:rgba(0,0,0,0.9);
  color:#DEDEDE;
  padding-top:1px;
  padding-bottom:7%;
}
.inner-content{
  max-width:1280px;
  margin: 0 auto;
}

h2{
  display:block;
  width:25em;
  margin:7% auto;
}
h2 b{
  display:block;
  padding:0 1.5em;
  font-size:200%;
  font-weight:bold;
  text-align:center;
  color:#FFF;
  border:1px #777 solid;
  border-width:0 0 1px;
  margin-bottom:1%;
  padding-bottom:1%;
}
h2 b:first-letter{color:#E00;}
h2 .subtitle{
  display:block;
  font-size:80%;
  color:#999;
  text-align:center;
  font-weight:normal;
}

.box-list{
  display:flex;
  flex-flow: wrap row;
}
.box-list .box{
  width:24%;
  margin:0.5%;
  background-image:url(../images/common/bg_stripe.gif);
  color:#111;
}
.box-list .box h3{
  margin:0;
  padding:0;
  font-weight:bold;
  width:100%;
  border:1px #AAA dotted;
  border-width:0 0 1px;
  padding-bottom:0.5%;
  margin-bottom:0.5%;
}
.box-list .box figure{
  margin:0;
  padding:0;
  width:100%;
}
.box-list .box figure>img{
  width:100%;
  display:block;
}
.box-list .box .info{
  font-size:100%;
  margin:0.5em;
}

.column2{
  display:flex;
  flex-flow: nowrap row;
  margin-top:3%;
}
.column2_left{
  width:70%;
  margin-right:1%;
}
.column2_right{
  width:30%;
  overflow:hidden;
  position:relative;
  border:3px rgba(255,255,255,0.2) solid;
}


/*---Media Query---*/
@media screen and (max-width:1024px){
  #wrapper{min-width:100%;}
  .inner-content{
    width:98%;
    margin:0 auto;
  }
  .box-list .box{width:32%;}
}
@media screen and (max-width:768px){
  /*---Custom---*/
  .modaal-inner-wrapper{padding-top:50px !important;}
  /*---Custom---*/

  header{height:280px;}
  header #kt_tgs2018{
    width:50%;
    transform:translate(-50%,-80%);
  }

  header #header_bar #header_info{width:152%;}
  header #header_bar #btn_menu{width:20%;}
  header #header_bar #header_info img,
  header #header_bar #btn_menu img{width:90%;margin:3% auto;top:48%;}
  header #header_bar #btn_menu img{width:200%;margin-left:64%;}

  h2{width:95%;}
  h2 b{font-size:6vw !important;padding:0;}
  h2 .subtitle{font-size:3vw;}

  .footer-wrap{padding-top:2%;}
  .footer-ttl{font-size:2em;}
  nav#global-menu{width:100%;font-size:5.5vw;}
  nav#global-menu a{margin:0 auto 10%;}
  nav#global-menu a:active{color:#F00;}

  #channels{width:98%;font-size:3vw;}
  #channels .ch a,
  #channels .ch span{
    width:49%;
    font-size:40%;
    background-size:75% auto;
  }
  #channels #btn_live_title,
  #channels #btn_live_schedule{
    display: block;
    margin:0 auto 2%;
    width:90%;
  }

  a.btn_floating{
    width:100px;
    padding:15px;
  }
  a#btn_twitter{
    right:130px;
    bottom:2%;
  }

  footer {
    font-size:80%;
  }
  footer #tgs2018_info dl dt{
    width:100%;
  }
  footer #tgs2018_info dl dd{
    width:100%;
  }

  .footer-copy {
    padding-bottom:130px;
  }
  .footer-copy p{
    width:90%;
  }

  .box-list .box{width:49%;}
}

@media screen and (max-width:480px){
  header{height:170px;}
  /*header #header_bar #header_info img,
  header #header_bar #btn_menu img{margin:5% auto;}*/

  a.btn_floating{
    width:80px;
    padding:13px;
  }
  a#btn_twitter{
    right:100px;
  }
  .footer-copy {
    padding-bottom:100px;
  }
  footer a.open_booth_detail{font-size:3vw;}
  #route #routemap>div{font-size:80%;}

  .box-list .box{width:100%;margin-top:3%;border-radius:10px;overflow:hidden;}

  .column2{display:block;}
  .column2_left{
    width:98%;
    margin:1% auto;
  }
  .column2_right{
    width:98%;
    margin:3% auto;
    border-radius:5px;
    border-color:#1daef5;
  }
}



/*---SHOP CUSTOM----*/
.tabcontent_area #contents{
  background:none;
}
.subtokuten{
  color:#FFF !important;
}

.inner-content .taball_area .tab_area{
  width:100%;
  display:flex;
  flex-flow: nowrap;
  padding:0 0.2%;
}
.inner-content .taball_area .tab_area li{
  width:17%;
  background-color:rgba(255,255,255,0.7);
  color:#111;
  margin:0 0.2%;
  transition:0.5s;
  display:block;
}
.inner-content .taball_area .tab_area li:before,
.inner-content .taball_area .tab_area li:after{
  content:"";
  display:block;
}
.inner-content .taball_area .tab_area li:before{padding-top:4%;}
.inner-content .taball_area .tab_area li:after{padding-bottom:4%;}

.inner-content .taball_area .tab_area li.select{
  background-color:#FFF;
  color:#F00;
}

@media screen and (max-width:480px){
  .inner-content .taball_area .tab_area{
    width:100%;
    flex-flow: wrap row;
  }
  .inner-content .taball_area .tab_area li{
    width:49%;
    padding:1%;
    margin:0.2%;
  }
}