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

/*_________________________________________________________________ base __*/

html, body {
	background-color: #fbfaf5;
}

body {
	margin: 0;
}

p , li , footer {
	font-family: 'Noto Sans JP', sans-serif;
	color: #666;
	font-size: 16px;
	line-height: 20px;
}

body , #wrapper{
	display:-ms-flexbox;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-direction:column;
	-webkit-flex-direction:column;
	flex-direction:column;
	width:100%;
}

#wrapper {overflow:hidden;}/*右側 謎の余白対処用。消したらダメ！*/ 

a{
	display:inline-block;
	color:#404040;
	text-decoration:none;
   -webkit-transition:all 0.1s ease-out;
   -moz-transition:all 0.1s ease-out;
   -o-transition:all 0.1s ease-out;
   transition:all 0.1s ease-out;
	}
a:hover {
    transform:translateY(-3px);
    opacity:.6;
	}

h3 { margin: 0 auto; }

ul { padding-left: 0; }

.ft_sml { font-size: 0.7em; }

/* マーカー線・緑 */
.marker_gr {background: linear-gradient(transparent 50%, #bfff7f 50%);}
.marker_red {background: linear-gradient(transparent 50%, #ff6363 50%);}

@media screen and (max-width: 1000px) {
/* 1000pxまでの幅の場合に適応される */
	h3 {
		margin-top: 15px;
	}
	h3 img{
		max-width: 100%;
	}
}


/*____________________________________________________________________________ header*/
#header {
	position: relative;
	width: 100%;
	height: auto;
	background: url(../img/hd_bg.png?ver0.1) no-repeat;
	background-size: cover;
	background-position: top center;
	padding-bottom: 15px;
}
#header_u {
	position: relative;
	width: 100%;
	height: 10%;
	background: url(../img/hd_bg.png?ver0.1) no-repeat;
	background-size: cover;
	background-position: top center;
	padding-bottom: 15px;
	}

#titlelogo {
	max-width: 35%;
	margin: 20px auto 0;
	}
#titlelogo_u {
	max-width: 20%;
	margin: 20px auto 0;
	}
.topcast {
	margin: 0 auto;
	text-align: center;
	}
#onair {
	max-width: 35%;
	margin: -50px auto 15px;
	text-align: center;
	}
@media screen and (max-width: 1200px) {
	#header_u {height: auto;}
	#titlelogo_u {
    max-width: 100%;
		text-align: center;
		}
	#titlelogo_u img {
    width: 40%;
		margin: 1.5em auto;
		}
}
@media screen and (max-width: 1000px) {
/* 1000pxまでの幅の場合に適応される */
  #header {height: auto;}
  #titlelogo {max-width: 60%;}
  #titlelogo_u img {width: 50%;}
  #onair {
    max-width: 60%;
	  margin: 0 auto;
		}
	.topcast {
		max-width: 100%
		}
	.topcast img {
		width: 85%;
		height: auto;
		}
}

@media screen and (max-width: 600px) {
/* 600pxまでの幅の場合に適応される */
	#titlelogo_u img {
    width: 80%;
		}
  #onair {
    max-width: 100%;
	  margin: 0 auto;
  }
}

/*____________________________________________________________________*/
/* 大枠ボックス */
.lead {
  display: flex;
  justify-content: center;
  margin: 0 auto;
	font-family: 'Noto Sans JP', sans-serif;
}

/* 背景色の設定 */
.lead-bg{
	background-color: rgba(255,255,255,0.65);
	width: 75%;
	padding:  10px ;
	margin: 0 auto;
	border-top: solid 3px #009145;
  border-bottom: solid 3px #009145;
}
/* 重ねる文字の基本設定 */
.lead-txt{
	width: 100%;
	margin: 0 auto;
	color: #603813;
	line-height: 1.5em;
	text-align: center;
	font-size: 1.4rem;
	padding: 0 0;	
}
.lead-txt p {
	color: #603813;
	line-height: 1.5em;
	text-align: center;
	font-size: 1.4rem;
}
@media screen and (max-width: 1000px) {
  .lead-bg{
    width: 90%;
    padding:  10px ;
    margin: 0 auto 24px;
  }
  .lead-txt{
    padding: 2rem 1.5rem;
  }
  .lead-txt br {
	  display: none;
  }
}
/*____________________________________________________________________*/
.event_bg{
	width: 928px;
	margin: 64px auto;
	}
.event-txt{
	width: 100%;
	margin: 0 auto;
	color: #603813;
	text-align: center;
	font-size: 1.4rem;
	padding: 0 0;
}
.event-txt p {
	color: #603813;
	line-height: 1em;
	text-align: center;
	font-size: 1.4rem;
}
.event-title {
  position: relative;
	background: #f5dbac;
  line-height: 1.4;
  padding: 0.5em;
	margin: 0;
	font-size: 1.3em;
}
.event-title:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(164, 146, 113);
}
.notice-txt{
	width: 100%;
	margin: 0 auto;
  color: #603813;
  text-align: center;
	padding: 0 0;
  background-color: rgba(255,244,222,0.5);
}
.notice {
  color: #333333;
	padding: 24px 32px 0;
	line-height: 2em;
}
.txtL { text-align: left; }
.txtR { text-align: right; }
.txtC { text-align: center; }

#nav {
  list-style: none;
  display: flex;
	justify-content: center;
	flex-direction: row;
}
#nav img {
  margin: 16px;
	}

.btntypeP {
	width: 240px;
	margin: 16px;
  line-height: 2.5em;
  text-align: center;
  text-decoration: none;
  color: #e5007f;
  border: solid 3px #e5007f;
  transition: .4s;
	padding: 16px;
}
.btntypeP:hover {
  background: #e5007f;
  color: white;
}

.btntypeB {
	width: 240px;
	margin: 16px;
  line-height: 2.5em;
  text-align: center;
  text-decoration: none;
  color: #00a0ea;
  border: solid 3px #00a0ea;
  transition: .4s;
	padding: 16px;
}
.btntypeB:hover {
  background: #00a0ea;
  color: white;
}


@media screen and (max-width: 768px) {
  .event_bg{
    max-width: 95%;
    margin: 32px auto;
  }

	#nav {
		flex-direction: column;
		}
  #nav img {
    margin: 5px auto;
		max-width: 95%;
		}
		
	.btntypeB, .btntypeP {
		max-width: 95%;
		margin: 16px auto 8px;
		}
}

/*____________________________________________________________________*/





/*____________________________________________________________________________ main*/
.main {display: flex;}

.imagebox {
  display: flex;
  justify-content: center;
  margin: 40px auto;
	width: 95%;
	height: auto;
	padding: 40px 0 56px;
	text-align: center;
	}
.imagebox img{width:80%;}
@media screen and (max-width: 1000px) {
	.imagebox img , a {
    max-width: 100%;
    height: auto;
    }
	}

/* -------------- 作成中（スライド） -------------- */
.slideBox { 
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 900px;
  margin: 0 auto 5em;
	}
.slideBox img { display:inline-block;}
.slide_full img {width:900px; height:auto; margin-top: 3em;}
.slide_half img {width:442px; height:auto; margin:2em 0.5em 1em 0;}

@media screen and (max-width: 1000px) {
 .slideBox {max-width:100%;}
 .slide_full img {width:95%; height:auto; margin:1em;}
 .slide_half img {width:95%; height:auto; margin:1em;}
 }/* -------------- 作成中（スライド） -------------- */


/* -------------- News -------------- */
.news {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
.news-bg{
	background-color: rgba(255,255,255,0.65);
	width: 75%;
	margin: 40px auto 10px;
	border-top: solid 3px #FF0004;
  border-bottom: solid 3px #FF0004;
}
.newstxt {
	font-size: 1.8em;
	line-height: 1.5em;
	text-align: center;
	margin: 20px auto;
	color: #FF0004;
}
.newstxt a {
	color: #FF0004;
	font-weight: bolder;
}

@media screen and (max-width: 1000px) {
  .news-bg{
      width: 90%;
  }
}
/* -------------- News -------------- */

/*---------------- innerbox : start -------------- */

.innerbox {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 3%;
}

.box{
	width:100%;
	background-color:rgba(255, 255, 255, .5);
	box-shadow:4px 4px 0px 0px rgba(0, 0, 0, .1);
}



/*------------------ cast --------------------- */
.castbox {
	max-width: 100%;
	height: auto;
	/*width: 45%;*/
	padding-top: 30px;
	text-align: center;
	padding-bottom: 80px;
	margin: 0 auto;
	border: none;
}


.cast img {
	width: auto;
	height: 500px;
}


/*---------------- SNS ---------------- */
.sns {
	width: 35%;
	text-align: center;
	padding: 3em;
	margin: 0 auto;
}

.snsbox {
	overflow-y:auto;/*スクロール上下*/
	line-height:0;
	height:680px;
	padding:0;
	margin-bottom:0;
}

@media screen and (max-width: 1000px) {
/* 1000pxまでの幅の場合に適応される */	
.innerbox {
	flex-direction: column;
	justify-content: flex-start;	
}

.castbox {
	width: 100%;
	height: auto;
}

.cast img {
	width: 95%;
	height: auto;
}

.sns {
	margin: 20px auto;
	width: 85%;
}
.snsbox {
	max-width: 100%;
}
}

@media screen and (min-width:300px) and ( max-width:480px) {
.sns {
	padding: 3em 0;
	margin: 0 auto;
}
}

/*---------------- innerbox : end --------------- */


/*---------------- guestbox  -------------- */
.guestbox {
	max-width: 100%;
	height: auto;
	
	padding-top: 3%;
	padding-bottom: 30px;
	margin: 0 auto;
	text-align: center;
	border: none;
}

.guest {
	max-width: 75%;
	text-align: center;
	margin: 0 20px;
}

.date {
	font-size: 1.8em;
	text-align: center;
	margin: 20px auto;
}

.guestgroup ul li {
	display: inline-block;
  list-style: none;
}


@media screen and (min-width:601px) and ( max-width:950px) {
	/*　画面サイズが601pxから950pxまではここを読み込む　*/
	.guestgroup ul li {
		display: inline-block;
		list-style: none;
	}
	.guest{
		width: 300px;
		height: auto;
	}
	.guest img{
		max-width: 100%;
	}
}

/*@media screen and (max-width: 600px) {
	.guest  {
	max-width: 70%;
	}
}*/

/*_________________________________________________________　イベントページ　____________________________ */
.contArea {
	width: 1000px;
	margin: 80px auto;
	background: url("../img/bg_wood.png?ver2") repeat;
	padding: 2em 0;
}
.contBox {
	max-width: 90%;
	margin: 0 auto;
}
.contArea .title {
	font-size: 2em;
	line-height: 1.5em;
	color: #603813;
	text-align: center;
	margin: 10px 0;
	font-weight: bolder;
	border-bottom: solid 2px #603813;
}
.contText {
	font-size: 1em;
	line-height: 1.6em;
	color: #333;
	text-align: left;
	margin: 10px 0;
	padding: 0.5em 2em;
}
/*___________________________________________ 注意事項*/
.explainBox {
  padding: 0.5em 1em 2em;
  margin: 1em 0;
  background: #ffec49;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  color: #603813;
  font-size: 1.5em;
  line-height: 1.5em;
}
.explainBoxtitle {
  background-color: #603813;
  font-weight: bold;
  font-size: 1em!important;
  color: #FFF!important;
  margin-top: 0.5em!important;
  padding: 0.6em!important;
}
.explainBox p {
  color: #603813;
  margin: 0 10px;
  padding: 10px;
	line-height: 1.6em;
}
.explainBox ul, ol {
  padding: 0 1em 0 2.3em;
  color: #603813;
}
.explainBox ul li, ol li {
  line-height: 1.5em;
  padding: 0.2em 0;
  list-style-type: circle;
  color: #603813;
}

.note{
  color: #333;
  margin: 0.5em 2em;
  border: solid 1.5px #333;
  padding: 1em;
	}

/*___________________________________________ 動画枠*/
.movie-wrap {
    position: relative;
    margin:10px;
    padding-bottom: 56.25% !important; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
		}

.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*___________________________________________ 区切り線*/
.markoff {
	border-width: 1px 0 0 0;
	border-style: dotted;
	border-color: #20678F;
  }
.markoff-A {
	border-width: 2px 0 0 0;
	border-style: dotted;
	border-color: #603813;
  }	
  .pc { display:none; }
  .sp { display:block; }

@media screen and (max-width:767px) {
  .contArea { width:100%; margin:0 auto; }
  .contArea .title { text-align: center; }
	.explainBoxtitle {
    line-height: 1.5em;
		}
	.explainBox ul, ol { text-align: left; padding: 0 1em; }
  .pc { display:block; }
  .sp { display:none; }
	}
/*_________________________________________________________　//イベントページ　____________________________ */


/*__________________________________________________________ footer area */
footer {
	position: relative;
	background: url(../img/ft_bg.png) no-repeat;
	background-size: cover;
	background-position: center bottom;
	height: 500px;
/*	background: url(../img/ft_bg_bottom.png) no-repeat;
	background-position: center bottom;*/
}


.footLogo{
  position: absolute;
  bottom: 16px;
  padding-left: 32px;
  }

/*________________________________________ scrollbar */
.scrollarea{
  overflow-y:scroll;
  height:300px;
  }
.scrollarea::-webkit-scrollbar{
  width:5px;
  }
.scrollarea::-webkit-scrollbar-thumb{
  background:#603813;
  border-radius:50px;
  }
.scrollarea::-webkit-scrollbar-track{
  background:#CCC;
  }

/*________________________________________ jquery.layerBoard.js 設定用*/
.layer_board_bg,.layer_board{position:absolute}
.layer_board_bg{position:fixed;width:100%;height:100%;z-index:1000;top:0;left:0;display:none;cursor:pointer;background:#000}
.layer_board {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;z-index:2000;padding:3vw;width:90%;max-width:920px;height:94vh;max-height:768px;}
.layer_board .scrollarea{
	overflow-y:scroll;
	height:90vh;
	height:-webkit-calc(94vh - 6vw);
	height:calc(94vh - 6vw);
	max-height:970px;
	max-height:-webkit-calc(970px - 6vw);
	max-height:calc(970px - 6vw);
  /*padding:0 3vw 0 0*/}
.btn_close{margin:0 auto}
@media screen and (max-width:767px) {
.layer_board .scrollarea{
  padding:0 3vw 0 0}
}

/*__________________________________________________________ common */
.squarebtn {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #603813;
	background: #fff;
	border:2px solid #603813;
}
/*.squarebtn:hover {
	 background: #1B1B1B;
	 color: #fff;
	 cursor: pointer;
	 text-decoration: none;
}*/


.fontS{font-size:0.8em;}
.fontM{font-size:1.2em}
.fontMM{font-size:1.3em; line-height:1.6em;}
.fontL{font-size:1.5em;line-height:1.8}
.fontLL{font-size:2em}

.txtC{text-align:center!important}
.txtR{text-align:right!important}
.txtL{text-align:left!important}

.fontRed{
  font-weight: bolder;
	color: #FF0004;
	}