@charset "utf-8";

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


/**************** FONT ****************/
body {
	z-index: 999;
	height: 100%;
	overflow: scroll;
/*	background-size: auto 15.7%;*/
/*	background-image:url(../images/main/bg_top.png);*/
	}


/**************** PC ****************/

/* PC用 */


@media screen and (min-width:769px){

/**************** BACKGROUND ****************/
.bg{
padding-top: 125px;
min-width:1200px;
background-color: #ddd3af;
background-image: url(../img/index.png);
background-position: center top;
background-repeat: no-repeat;
}
/**************** BACKGROUND ****************/

/**************** HEADER ****************/
#header{
 text-align:center;
 height: 900px;
 position: relative;
 overflow: hidden;
 
 }
.main{
 position:absolute; 
 margin:0 auto;
 transform-origin:center top;
 animation:show01 3s both;
 }
.main img{
  display: inline-block;
  margin: 0 auto;
}
.headerinner{
 width:45%;
 margin: 0 auto;
}
.copy01{
 transform-origin:center top;
 animation:show02 7s both;
}
.copy02{
 padding-top: 50px;
 transform-origin:center top;
 animation:show02 4s both;
}
.copy03{
 padding-top: 220px;
  padding-left: 480px;
 width:5px;
 transform-origin:center top;
 animation:show02 5s both;
}
.catchcopy{
 position:absolute;
 padding-top:10px;
 padding-left:20px;
 text-align:left;
 z-index:2;
 width:100%;
}
.catchcopy div{
 margin: 20px 0;
}
@keyframes show01 {
	0% {
		transform:translate(0,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}
@keyframes show02 {
	0% {
		transform:translate(0,0);
		opacity:0;
	}
	60% {
		transform:translate(0,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

@keyframes showimg {
	0% {
		transform:translate(0,0);
		opacity:0;
	}
		40% {
		transform:translate(0,0);
		opacity:0;
	}

	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

.logo{
 float:left;
}
.notop{
 width: 1200px;
 margin: 0 auto;
 height:191px;
}
.schedule{
 text-align:right;
 padding-top:90px;
 }
.sp{
 display: none;
}
/**************** HEADER ****************/

/**************** MENU ****************/
.navbase{
 background: #505c40;
 min-width: 1200px;
 text-align: center;
}
.nav{
 width: 1200px;
 text-align: center;
 margin: 0 auto;
 position: relative;
 z-index: 999;
}

.navbutton{
 display: inline-block;
 text-align: center;
 font-size: 18px;
font-family: 'PT Serif', serif;
 font-weight: bold;
letter-spacing: 3px;
 color: #fff !important;
}
.navbutton a{
 text-decoration: none;
 display: block;
 margin:5px 40px;
 color: #fff;
 }
.navbutton a:hover{
 color: #004270;
 }
.navbutton span{
 display: block;
 font-size: 12px;
 } 
 .fixed {
    position: fixed;
    top: 56px;
    width: 100%;
    z-index: 10;
}
/**************** MENU ****************/

/**************** CONTAINTS ****************/
.wrap{
 min-width: 1200px;
 margin: 0 auto;
 text-align: center;
 background-image: url(../img/footer.png);
 background-position: center bottom;
 background-repeat: no-repeat;
 }
.container{
 width: 80% ;
 margin: 0 auto;
 padding: 50px 0;
 }
 
 .youtube iframe{
 width: 40%;
 height: 280px;
 margin: 0 20px;
 display: inline-block;
}
.container .title{
 line-height: 1.3;
 font-size: 35px;
font-family: 'PT Serif', serif;
 font-weight: bold;
text-shadow: 
    #d0c096 2px 0px 2px, #d0c096 -2px 0px 2px,
    #d0c096 0px -2px 2px, #d0c096 -2px 0px 2px,
    #d0c096 2px 2px 2px, #d0c096 -2px 2px 2px,
    #d0c096 2px -2px 2px, #d0c096 -2px -2px 2px,
    #d0c096 1px 2px 2px, #d0c096 -1px 2px 2px,
    #d0c096 1px -2px 2px, #d0c096 -1px -2px 2px,
    #d0c096 2px 1px 2px, #d0c096 -2px 1px 2px,
    #d0c096 2px -1px 2px, #d0c096 -2px -1px 2px,
    #d0c096 1px 1px 2px, #d0c096 -1px 1px 2px,
    #d0c096 1px -1px 2px, #d0c096 -1px -1px 2px;
 color: #505c40;
 margin:20px auto;
}

.container p{
 font-size: 15px;
 font-family: 'PT Serif', serif;
 color: #000;
 font-weight: bold;
}
.text{
 font-size: 20px;
 color: #505c40;
 font-family: 'Noto Serif JP', serif;
 font-weight: bold;
}

.intro01{
 width:1000px;
 margin: 30px auto;
 padding: 30px 0;
 height:350px;
 margin-bottom: 50px;
}
.intro01 img{
 float: right;
 width:50%;
}
.intro01 p{
 line-height: 1.5;
 display:inline-block;
 width: 45%;
 margin: 0 0 0 20px;
 font-size: 15px;
 color: #000;
 text-align: center;
 float: left;
font-family: 'PT Serif', serif;
  font-weight: bold;
}

.intro02{
 width:1000px;
 margin: 30px auto;
 padding: 30px 0;
 height:350px;
 margin-bottom: 180px;
}
.intro02 img{
 float: left;
 width:50%;
}
.intro02 p{
 line-height: 1.5;
 display:inline-block;
 width: 45%;
 margin: 0 0 0 20px;
 font-size: 15px;
 color: #000;
 text-align: center;
 float: right;
font-family: 'PT Serif', serif;
 font-weight: bold;
}
/**************** キャスト ****************/
.cast01{
 font-size:15px;
 font-family: 'PT Serif', serif;
 color: #505c40;
 margin-bottom: 20px;
}
.cast02{
 display: inline;
 font-size:15px;
 font-family: 'PT Serif', serif;
 color: #505c40;
}

.btn{
margin: 20px auto;
}

#map:hover{
 color: rgba(255,255,255,0.5);
}
/**************** キャスト ****************/
/**************** STORY ****************/

/* commonBox ------ */
.tab-box dt{
    font-family: 'PT Serif', serif;
    font-size: 25px;
    font-weight: bold;
    text-shadow:
    #d0c096 2px 0px 2px, #d0c096 -2px 0px 2px,
    #d0c096 0px -2px 2px, #d0c096 -2px 0px 2px,
    #d0c096 2px 2px 2px, #d0c096 -2px 2px 2px,
    #d0c096 2px -2px 2px, #d0c096 -2px -2px 2px,
    #d0c096 1px 2px 2px, #d0c096 -1px 2px 2px,
    #d0c096 1px -2px 2px, #d0c096 -1px -2px 2px,
    #d0c096 2px 1px 2px, #d0c096 -2px 1px 2px,
    #d0c096 2px -1px 2px, #d0c096 -2px -1px 2px,
    #d0c096 1px 1px 2px, #d0c096 -1px 1px 2px,
    #d0c096 1px -1px 2px, #d0c096 -1px -1px 2px;
    padding-bottom:20px;
     color: #56503b;//非対応のブラウザでの文字色を設定
 margin:20px auto;
    }
.tab-box dd{
    font-family: 'PT Serif', serif;
    font-size: 20px;
    font-weight: bold;    
    color: #000;
}

.tab-box dd{
    font-family: 'PT Serif', serif;
    font-size: 18px;
    margin: 20px 0;
 }
.tab-content.buttonarea{
 width:1000px;
 padding:0 20px;
 margin:0 auto;
 
}
.tab-wrap{
 padding-bottom:200px;
 text-align: center;
 }
.tab-box {
  clear:both;
  padding-top:30px;
  }


.tab-content {
  width: 80%;
  }

.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{
    padding: 5px 20px;
    border: double 5px #c1b081;
    background: rgba(80,92,64,0.8);
    color: #FFF;
    display: inline-block;
    margin:5px 0;
}

#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; }

.storyimg img{
 width: 32%;
 margin: 5px;
 display: inline-block;
}

/**************** STORY ****************/
/**************** CHART ****************/
.chartimg{
 width: 98%;
}
/**************** CHART ****************/

/**************** CAST&STAFF ****************/



.foot{
text-align: center;
}

}



/**************** PC ****************/

/**************** MOBILE ****************/

/* モニター幅768px以下 */

/**************** MOBILE ****************/

@media screen and (max-width:768px), print{

/**************** BACKGROUND ****************/
.bg{
background-color: #ddd3af;
background-image: url(../img/index.png);
background-position: center top;
background-repeat: no-repeat;
}
 
.bar img{
 width:100%;
}
.headerinner{
 display: none;
}
.sp{
 display:block;
 margin: 0 auto;
 text-align: center;
}
.sp img{
 width:100%;
}

/**************** BACKGROUND ****************/
.container .title{
 line-height: 1.3;
 font-size: 35px;
font-family: 'PT Serif', serif;
 font-weight: bold;
text-shadow: 
    #d0c096 2px 0px 2px, #d0c096 -2px 0px 2px,
    #d0c096 0px -2px 2px, #d0c096 -2px 0px 2px,
    #d0c096 2px 2px 2px, #d0c096 -2px 2px 2px,
    #d0c096 2px -2px 2px, #d0c096 -2px -2px 2px,
    #d0c096 1px 2px 2px, #d0c096 -1px 2px 2px,
    #d0c096 1px -2px 2px, #d0c096 -1px -2px 2px,
    #d0c096 2px 1px 2px, #d0c096 -2px 1px 2px,
    #d0c096 2px -1px 2px, #d0c096 -2px -1px 2px,
    #d0c096 1px 1px 2px, #d0c096 -1px 1px 2px,
    #d0c096 1px -1px 2px, #d0c096 -1px -1px 2px;
 color: #505c40;
 margin:20px auto;
}
/**************** HEADER ****************/
header{
top: 0;

}

.text{
 font-size: 18px;
 color: #505c40;
 font-family: 'Noto Serif JP', serif;
 font-weight: bold;
}

#header{
position: relative;
 text-align:center;
 width: 100%;
 overflow: hidden;
 top: 70px;
 }
.main{
 width: 100%;
 position: absolute;
 }
.main img{
 width: 120%;
 bottom: 0;
 
}
.notop img{
 width:100%;
 }


.logo{
 float:center;
 width:90%;
 display:block;
 margin: 0 auto;
}
.notop{
 width: 100%;
 margin: 20px auto 0 auto;
}
.schedule{
 width: 90%;
  display:block;
 margin: 0 auto;

 }
#header #sns { position:absolute; padding:0; margin-top:-65.5em; right: 35.2em; z-index:999;}
#header #sns p { float:none;  left:1.6em;}

/**************** HEADER ****************/
/**************** MENU ****************/
.navbase{
 background: #505c40;
 width: 100%;
 text-align: center;
}
.nav{
 width: 100%;
 text-align: center;
 margin: 0 auto;
}

.navbutton{
 width: 100%;
 text-align: center;
  margin: 0 auto;
 display: inline-block;
 text-align: center;
 font-size: 18px;
font-family: 'PT Serif', serif;
 font-weight: bold;
 border-bottom: solid 1px #fff;
}

.navbutton a{
 text-decoration: none;
 display: block;
 margin:5px 40px;
 color: #fff;
 }
.navbutton a:visited{
 color: #fff;
}
.navbutton a:hover{
 color: #004270;
 }
.navbutton span{
 display: block;
 font-size: 12px;
 } 
/**************** MENU ****************/

  
/**************** CONTAINTS ****************/

.wrap{
 width: 100%;
 margin: 0 auto;
 text-align: center;
 background-image: url(../img/footer.png);
 background-position: center bottom;
 background-repeat: no-repeat;
 }
.container{
 width:  95%;
 margin: 0 auto;
 padding: 50px 0;
 }
.chartimg img{
 width: 100% ;
}
 
#twitter{
 width: 100%;
 margin-top: -40px;

}
.intro01{
 width:100%;
 margin: 0 auto;
 padding: 30px 0;
}
.intro01 img{
 width:100%;
}
.intro01 p{
 width: 90%;
 margin: 0 auto;
 font-size: 14px;
 color: #000;
 text-align: center;
 font-family: 'PT Serif', serif;
 font-weight: bold; 
}
.intro02{
 width:100%;
 margin: 0 auto;
 padding: 30px 0;
}
.intro02 img{
 width:100%;
}
.intro02 p{
 width: 90%;
 margin: 0 auto;
 font-size: 14px;
 color: #000;
 text-align: center;
font-family: 'PT Serif', serif;
  font-weight: bold; 

 
}

/**************** STORY ****************/

/* commonBox ------ */
.tab-box dt{
    font-family: 'PT Serif', serif;
    font-size: 16px;
    font-weight: bold;
    text-shadow:
    #d0c096 2px 0px 2px, #d0c096 -2px 0px 2px,
    #d0c096 0px -2px 2px, #d0c096 -2px 0px 2px,
    #d0c096 2px 2px 2px, #d0c096 -2px 2px 2px,
    #d0c096 2px -2px 2px, #d0c096 -2px -2px 2px,
    #d0c096 1px 2px 2px, #d0c096 -1px 2px 2px,
    #d0c096 1px -2px 2px, #d0c096 -1px -2px 2px,
    #d0c096 2px 1px 2px, #d0c096 -2px 1px 2px,
    #d0c096 2px -1px 2px, #d0c096 -2px -1px 2px,
    #d0c096 1px 1px 2px, #d0c096 -1px 1px 2px,
    #d0c096 1px -1px 2px, #d0c096 -1px -1px 2px;
    padding-bottom:20px;
     color: #56503b;//非対応のブラウザでの文字色を設定
    }
.tab-box dd{
    font-family: 'PT Serif', serif;
    font-size: 14px;
    margin: 10 auto;
 }
.tab-content.buttonarea{
 width:100%;
 margin:0 auto;
}
.tab-wrap{
 padding-bottom:100px;
 width: 100%;

}
.tab-box {
  clear:both;
  padding-top:30px;
  }

.tab-box dd{
    font-family: 'PT Serif', serif;
    font-size: 16px;
    font-weight: bold;    
    color: #000;
}

.tab-content {
  width: 100%;
  }

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

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


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

#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; }



.storyimg {
width: 100%;
text-align: center;
padding:5px;
}
.storyimg img{
 width: 90%;
 display: inline-block;
 margin: 5px auto;
}
.tab-wrap{
  width: 100%;
  margin: 0 auto;
}
.tab-box dl{
  width: 90%;
  margin:20px auto 20px auto ;
}



.swiper-wrapper{
  width: 100%;
}
label.tab_item{
    padding: 5px 20px;
    border: double 5px #c1b081;
    background: rgba(80,92,64,0.8);
    color: #FFF;
    display: inline-block;
    margin:5px 0;
}

/**************** STORY ****************/

/**************** CHART ****************/
/**************** CHART ****************/

/**************** CAST&STAFF ****************/

.cast01{
 font-size:15px;
 font-family: 'PT Serif', serif;
 color: #505c40;
 margin-bottom: 20px;
}

.cast02{
 display: inline;
 font-size:15px;
 font-family: 'PT Serif', serif;
 color: #505c40;
 margin-bottom: 20px;
}

.btn{
margin: 20px auto;
}
.youtube{
 width: 100%;
}
.youtube iframe{
 display: block;
 margin: 20px auto;
}
.container img{
 width: 100%;
}
/**************** CAST&STAFF ****************/
}