@charset "utf-8";

/**************** FONT ****************/

@font-face {
	font-family: 'shippori';
	src: url('fonts/shippori.eot'); /* IE9 Compat Modes */
	src: url('fonts/shippori.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */
	     url('fonts/shippori.woff') format('woff'), /* woff - Modern Browsers */
	     url('fonts/shippori.ttf')  format('truetype'), /* ttf - Safari, Android, iOS */
	     url('fonts/shippori.svg#svgFontName') format('svg'); /* svg - Legacy iOS */
}
/**************** FONT ****************/
.foot{
 text-align: center;
 width:100%;
}

body {
	z-index: 1;
	height: 100%;
	overflow: scroll;
	background: #000;
	}
body img{vertical-align:center;}
.main{
 text-align:center;
 display:block; /* IE対策に追加 */
  clear: both;
}
a{
 text-decoration: none;
}
.title{
 font-family: "shippori";
 font-weight: bold;
 font-size: 2em;
}
/*タブ*/

.slick-dots li.slick-active button:before{
opacity: .75;
color: #fff;
}

.tab-box dt{
    font-family: "shippori";
    font-size: 25px;
    font-weight: bold;
    padding-bottom:20px;
    color: #fff;
    margin: 0 auto;
    float:center;
    text-align: center;
    }
.tab-box p{
 color: #fff;
}
.tab-wrap{
 padding-bottom:100px;
 width: 100%;
}


.tab-box dd{
    font-family: 'shippori';
    font-size: 1.2em;
    color: #fff;
    margin: 0 auto;
}

.tab-content {
  width: 100%;
  text-align: center;
  margin-top:50px;
  }

.tab-content input[type="radio"] {
  display: none;
}

.tab-content input[type=radio]:checked + label {
  opacity: 0.5;
  }


.tab-content > .tab-box > div {
  display: none;
}

label.tab_item{
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:2px;
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 2px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
  background: #696969;
  }
  
  
  
label.tab_item:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
#tab1:checked ~ .tab-box > #tabView1 { display: block; }
#tab2:checked ~ .tab-box > #tabView2 { display: block; }
#tab3:checked ~ .tab-box > #tabView3 { display: block; }
#tab4:checked ~ .tab-box > #tabView4 { display: block; }
#tab5:checked ~ .tab-box > #tabView5 { display: block; }
#tab6:checked ~ .tab-box > #tabView6 { display: block; }
#tab7:checked ~ .tab-box > #tabView7 { display: block; }
#tab8:checked ~ .tab-box > #tabView8 { display: block; }
#tab9:checked ~ .tab-box > #tabView9 { display: block; }
#tab10:checked ~ .tab-box > #tabView10 { display: block; }
#tab11:checked ~ .tab-box > #tabView11 { display: block; }
#tab12:checked ~ .tab-box > #tabView12 { display: block; }
#tab13:checked ~ .tab-box > #tabView13 { display: block; }
#tab14:checked ~ .tab-box > #tabView14 { display: block; }
#tab15:checked ~ .tab-box > #tabView15 { display: block; }
#tab16:checked ~ .tab-box > #tabView16 { display: block; }
#tab17:checked ~ .tab-box > #tabView17 { display: block; }
#tab18:checked ~ .tab-box > #tabView18 { display: block; }
#tab19:checked ~ .tab-box > #tabView19 { display: block; }
#tab20:checked ~ .tab-box > #tabView20 { display: block; }
/*タブ*/
.slider img {
  transform: scale(0.8);
  opacity: 0.3;
  transition: 0.5s;
}

.slider .slick-center img {
  transform: scale(1);
  opacity: 1;
}
.setsumei{
 color: #fff;
 text-align: center;
}
/*************** 動画 ***************/
.douga{
height: 0;
overflow: hidden;
padding-bottom: calc(315 / 560 * 100%);
position: relative;
}


.douga iframe{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
  }
/***************レイアウト***************/
.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/***************レイアウト***************/
/*************** ポップアップ ***************/

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right:-400px;
  top: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  cursor: pointer !important;
}
.close-btn i {
  font-size: 20px;
  color: #ff0000;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

/*************** ポップアップ ***************/


.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #3d3d3d;
  background: #ECECEC;
  transition: .4s;
}

.btn-flat-simple:hover {
  background: #00bcd4;
  color: #000;
}
/**************** PC ****************/

/* PC用 */


@media screen and (min-width:768px){    
.wrap{
 width: 1200px;
 padding: 30px;
 margin:0 auto;
}
.bg{
 min-width:1200px;
 background: url(../img/bg.png);
 background-position: right 18px top 150px;
 background-repeat: no-repeat;
}

.bg2{
 min-width:1200px;
 background: url(../img/bg.png);
 background-position: right 100px top 150px;
 background-repeat: no-repeat; 
 background-attachment: fixed;
 background-size: contain;
}
/**************** LEFT ****************/
.leftpart{
 max-width: 350px;
 float: left;
 }
.logo{
 margin-bottom: 20px;
}
.time{
 width: 350px;
 margin-left:55px;
}
.sp{
 display: none;
}
.leftpart2{
 max-width: 350px !important;
 float: left;
 }
 
.logo2 img{
 width: 350px;
 margin-bottom: 20px;
}
.time2 img{
 width: 250px;
 margin-left:55px;
}

.navibase{
 width:100%;
 bottom:0;
 margin-left: 45px;
}
.navi{
 margin-top: 50px;
 width: 200px;
 text-align:left;
 float: left;
}
.twitter{
 display: inline-block;
 margin-top: 180px;
 margin-left: 45px;
}

.twitter a{
 position: relative;
}


.button1{
  width: 100%;
  position: relative;
  display: inline-block;
  text-align: left;
  font-family: "shippori";
  font-size: 23px;
  letter-spacing: 3px;
  text-decoration: none;
  transition: .3s;
  padding:5px 10px;
  margin-bottom: 5px;
}
.button1 a{
  color: #fff !important;
  position: relative;
  z-index: 4;

}
.button1 :hover {
  color: #000 !important;
}
.button1::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background: rgba(255,255,255,0.8); 
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button1:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/**************** LEFT ****************/




.maincontents{
 padding: 30px; 
 width: 100%;
 display:inline-block;
 width: 850px;
}
.maincontents img{
 width: 1200px;
 margin-left: -300px;
}
.title{
 font-weight: bold;
 font-size: 30px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
 letter-spacing: 8px;
}

.subtitle{
 margin-top: 30px;
 font-weight: medium;
 font-size: 25px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
}

.cast01{
 width:100%;
}
.cast01 img{
 width:100%;
 display: inline-block;
 margin:5px;

}

.cast02{
 width:100%;
}
.cast02 img{
 display: inline-block;
 width: 48%;
 margin: 5px;
}
.sub{
 font-size: 15px;
 font-weight: medium;
 color: #fff;
 display: inline-block;
}
.name{
 display: inline-block;
 font-size: 25px;
 font-weight: bold;
 color: #fff;
 font-family:"shippori";
}

.boldtext{
 font-weight: bold;
 font-size: 22px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
 margin: 20px auto;
}
.midtext{
 font-size: 16px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
 margin: 0 auto;
 margin-bottom: 135px;
}
.introimg{
 width: 100%;
 margin: 0 auto;
}
.introimg img{
 display: inline-block;
 width: 48%;
 margin:1%;
 float: left;
}
.imgone img{
 display: block;
 width: 100%;
 margin: 30px auto;
}
.chart img{
 display: block;
 width: 100%;
 margin: 0 auto;
}

/****************スライダー****************/
.slider img{
 width :100%;
 margin: 0;
}

.banner{
 width: 60%;
 margin:0 auto;
}
.banner img{
 width: 48%;
 margin:5px;
}


}
/****************スマホ****************/

@media screen and (max-width:767px), print{
.wrap{
/* padding-top: 126px; アップしてみたらいらない…*/
 padding-bottom: 50px;
}


.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  width: 120%;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 10%;
  top: -30px;
  z-index: 2;
}
.close-btn i {
  font-size: 20px;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}


div#js-show-popup{
 width: 100%;
 height: auto;
}
div#js-show-popup img{
 width: 80%;
 margin: 0 auto;
}




.bg2{
 width:100%;
 background: url(../img/bg.png);
 background-position: right 0px top 200px;
 background-repeat: no-repeat; 
 background-attachment: fixed;
 background-size: contain;
}

.pc{
 display: none;
}
.logo img{
 width: 100%;
}
.time img{
 width: 90%;
 display: block;
 margin: 0 auto;
}

.logo2 img{
 width: 100%;
}
.time2 img{
 width: 90%;
 display: block;
 margin: 0 auto;
}
.sp{
 width: 100%;
}
.navibase{
 margin-top: 30px;
}
.button1{
  width: 48%;
  position: relative;
  display: inline-block;
  text-align: left;
  font-family: "shippori";
  font-size: 18px;
  letter-spacing: 3px;
  text-decoration: none;
  transition: .3s;
  padding:5px 10px;
  margin-bottom: 5px;
  border: solid 1px #fff;
}
.button1 a{
  color: #fff !important;
  position: relative;
  z-index: 4;
}
.button1 :hover {
  color: #000 !important;
}
.button1::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background: rgba(255,255,255,0.8); 
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button1:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.twitter img{
 width: 100%;
}


a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
/************スライダー　***********/
.title{
 font-weight: bold;
 font-size: 30px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
 letter-spacing: 8px;
}

.subtitle{
 margin-top: 30px;
 font-weight: medium;
 font-size: 25px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
}

.sub{
 font-size: 14px;
 font-weight: medium;
 color: #fff;
 display: inline-block;
 padding: 0 20px 30px 20px;
}
.name{
 display: inline-block;
 font-size: 25px;
 font-weight: bold;
 color: #fff;
 font-family:"shippori";
  padding: 0px 20px;
}

.boldtext{
 font-weight: bold;
 font-size: 18px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
 margin: 20px auto;
 padding: 20px;
}
.midtext{
 font-size: 14px;
 text-align: center;
 color: #fff;
 font-family:"shippori";
 margin: 0 auto;
 margin-bottom: 45px;
 padding:20px;
}
.introimg{
 width: 100%;
 margin: 0 auto;
}
.introimg img{
 display: inline-block;
 width: 48%;
 margin:1%;
 float: left;
}
.imgone img{
 display: block;
 width: 100%;
 margin: 30px auto;
}


.slider img{
 width :100%;
 margin: 0;
}
.tab-box dt{
    font-family: "shippori";
    font-size: 20px;
    font-weight: bold;
    padding-bottom:10px;
    color: #fff;
    margin: 0 20px;
    float:center;
    text-align: center;
    }
    
    
.tab-box dd{
    font-family: "shippori";
    font-size: 15px;
    padding-bottom:10px;
    color: #fff;
    margin: 0 20px;
    float:center;
    text-align: center;
    }
    
.chart img{
 display: block;
 width: 80%;
 margin: 0 auto;
}
.cast01{
 width:100%;
}
.cast01 img{
 width: 100%;
 display: inline-block;
 margin:10px auto;

}
   
.cast02{
 width:100%;
}
.cast02 img{
 width: 100%;
 display: inline-block;
 margin:10px auto;

}
       
.banner{
 width:100%;
 margin:0 auto;
}
.banner img{
 width: 90%;
 margin:5px  auto;
}    







    
}  

