@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

/*------------------------------------------------------------ 
    本日の公演情報
------------------------------------------------------------*/

#mainInfo{
	padding:80px 10px;
	background:url(../img/visual.png?ver=2) no-repeat 50% 0;
	background-size:cover;
}

#infoArea{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items:center;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	max-width:1024px;
	margin:0 auto;
	padding-bottom:20px;
	position:relative;
	background:rgba(27,61,176,.8);
	overflow:hidden;
	box-sizing:border-box;
	position:relative;
}

#infoHd{
	width:calc(100% - 458px);
	max-width:518px;
	padding:0 20px 0 34px;
	box-sizing:border-box;
}

#todayInfo{
	width:458px;
	overflow:hidden;
}

#todayEventList{
	width:100%;
	overflow:hidden;
}

.eventBox{
	padding:140px 0 0 10px;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
}

.eventBoxFlag{
	width:114px;
	height:114px;
	position:absolute;
	top:0;
	right:0;
	color:#fff;
	padding:10px;
	box-sizing:border-box;
	font-size:134%;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
	transform:rotate(45deg);
	box-sizing:border-box;
}

.eventBoxFlag:before{
	display:block;
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 114px 114px 0;
	position:absolute;
	top:0;
	right:0;
	transform:rotate(-45deg);
	z-index:-1;
}

.eventBoxFlag.style1{ text-shadow:1px 1px 2px #FC9316;}
.eventBoxFlag.style2{
	text-shadow:1px 1px 2px #B10000;
	padding-top:25px;
}

.eventBoxFlag.style3{ text-shadow:1px 1px 2px #7FBA12;}

.eventBoxFlag.style1:before{ border-color: transparent #FFB600 transparent transparent;}
.eventBoxFlag.style2:before{ border-color: transparent #B40000 transparent transparent;}
.eventBoxFlag.style3:before{ border-color: transparent #83CC00 transparent transparent;}

.thumb{
	width:180px;
	float:left;
}

.detail{
	width:calc(100% - 200px);
	float:right;
	position:relative;
}

.detail.wid{ width:100%;}

.eventBoxHd{
	color:#fff;
	font-size:150%;
	line-height:1.4;
	font-weight:bold;
	margin-bottom:5px;
}

.detail table{
	border-collapse: separate;
	border-spacing:0;
}

.detail th{
	width:46px;
	vertical-align:middle;
	padding-top:15px;
}

.detail th span{
	display:block;
	width:46px;
	text-align:center;
	line-height:24px;
	font-size:109%;
	background:#fff;
	border-radius:3px;
	color:#1B3DB0;
}

.detail td{
	vertical-align:middle;
	color:#fff;
	font-size:100%;
	font-size:117%;
	padding: 15px 15px 0;
}

.detail.wid .detailInner{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	align-items: flex-end;
}

.more{
	width:auto;
	padding-right:20px;
	text-align:right;
	height:36px;
	margin-top:15px;
}

.detail.wid .more{ width:190px;}

.more a{
	display:inline-block;
	vertical-align:top;
	width:100%;
	max-width:236px;
	height:100%;
	text-align:center;
	line-height:36px;
	background:#fff;
	color:#1B3DB0;
	font-size:134%;
	font-weight:bold;
	position:relative;
}

.more a:after{
	display:block;
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #1B3DB0;
	border-right: 2px solid #1B3DB0;
	position:absolute;
	right:15px;
	top:50%;
	transform:rotate(45deg) translateY(-50%);
}

#hdTel{
	position:absolute;
	left:20px;
	bottom:93px;
	line-height:36px;
	color:#fff;
	font-size:117%;
}

.buttonList{
	clear:both;
	padding:15px 20px 0 10px;
	overflow:hidden;
}

.buttonList li{
	width:calc(47% - 5px);
	height:43px;
	box-sizing:border-box;
}

.buttonList li.fl{ width:calc(53% - 5px);}

.buttonList a{
	display:block;
	width:100%;
	height:100%;
	text-indent:10px;
	line-height:43px;
	color:#fff;
	font-size:117%;
	font-weight:bold;
	border:1px solid #fff;
	box-sizing: border-box;
	position:relative;
	transition:all 0.2s ease-out;
}

.buttonList a:after{
	display:block;
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position:absolute;
	right:15px;
	top:50%;
	transform:rotate(45deg) translateY(-50%);
}

.buttonList a:hover{
	background:#fff;
	color:#1B3DB0;
}

.buttonList a:hover:after{
	border-top: 2px solid #1B3DB0;
	border-right: 2px solid #1B3DB0;
}

/*------------------------------------------------------------ 
	近日後援情報/ニュース＆トピックス	
------------------------------------------------------------*/  


/* 薄緑背景 */
.wrap01{
	background:#F7F8F8;
	padding:20px 0;
}

.wrap02{ padding:20px 0;}

.section{ width:calc(100% - 360px);}

.sectionHd{
	width:100%;
	height:40px;
	overflow:hidden;
	margin-bottom:30px;
}

.sectionHd h2{
	float:left;
	line-height:40px;
	padding-left:15px;
	border-left:5px solid #1B3DB0;
	font-size:150%;
	font-weight:bold;
}

.sectionHd p{
	width:210px;
	height:36px;
	float:right;
}

.sectionHd a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:34px;
	color:#1B3DB0;
	text-align:center;
	font-size:109%;
	border-radius:3px;
	transition:all 0.2s ease-out;
	border:1px solid #1B3DB0;
	box-sizing:border-box;
}

.sectionHd a:hover{
	color:#fff;
	background:#1B3DB0;
}

#eventList li{
	width:100%;
	padding-bottom:15px;
	overflow:hidden;
}

#eventList li:not(:last-child){
	margin-bottom:15px;
	border-bottom:1px solid #C9CACA;
}

#eventList a{
	display:block;
	color:#000;
}

.event-date{
	font-size:117%;
	font-weight:bold;
	line-height:18px;
}

.event-ttl{
	width:100%;
	margin:10px 0;
	overflow:hidden;
}

.event-ttl span{
	display:block;
	width:64px;
	height:23px;
	float:left;
	text-align:center;
	line-height:23px;
	border-radius:32px;
	color:#333;
	background:#FAD900;
	position:relative;
}

.event-ttl .flag1{
	color:#fff;
	background:#C1392B;
}

.event-ttl .flag2{
	background:#FAD900;
}

.event-ttl .flag3{
	background:#99CC00;
}

.event-ttl .flag4{
	background:#1A64FF;
	color:#fff;
}

.event-ttl p{
	display:block;
	width:calc(100% - 75px);
	float:right;
	font-size:134%;
	color:#1B3DB0;
	font-weight:bold;
	line-height:18px;
	margin-top:2px;
}

.event-txt{
	width:230px;
	float:left;
	font-size:117%;
}

.event-txt2{
	width:400px;
	float:right;
	margin-left:20px;
	float:left;
	font-size:117%;
}

.new{
	display:inline-block;
	vertical-align:middle;
	content:"NEW";
	width:40px;
	height:20px;
	text-align:center;
	line-height:20px;
	background:#C1392B;
	color:#fff;
	font-size:76%;
	margin-left:8px;
	font-family:Arial, Helvetica, sans-serif;
}

/* CALENDER */

.sideMenu{ width:320px;}

#calendarArea{
	width:auto;
	padding:0 16px 16px;
	background:#fff;
}

#calenderHd{
	text-align:center;
	padding:20px 0 10px;
	border-bottom:1px solid #ccc;
	color:#1B3DB0;
	font-weight:bold;
	font-size:134%;
}

#calender{
	width:100%;
	border-collapse: separate;
	border-spacing:1px;
}

#calender th{
	width:14.28571428571429%;
	height:40px;
	vertical-align:middle;
	font-size:134%;
	color:#333;
	font-weight:bold;
}

#calender .sun,
#calender .sun a{ color:#C1392B;} /* 赤字 */
#calender .sat,
#calender .sat a{ color:#0066CC;} /* 青字 */

#calender td{
	vertical-align:middle;
	text-align:center;
	font-size:134%;
	color:#333;
	font-weight:bold;
}
/*
.flag1{ background:#FFE5E5!important;} 
.flag2{ background:#FFE5B2!important;} 
.flag3{ background:#DDF3BC!important;} 
.flag4{ background:#D7EAFF!important;} 
*/

#calender .flag5{ background:#96A6A6; color:#fff;} /* 休館日 */

#calender a{
	display:block;
	color:#333;
	line-height:40px;
	font-weight:bold;
	background:#FFF2D8;
}

#calender .next-month{
	color:#ccc;
}

#calender .event{
	background:#FFCC66;
	color:#000;
}

#calenderMenu{
	width:100%;
	margin-top:10px;
	overflow:hidden;
	border-top:1px solid #ccc;
}

#calenderMenu li{
	line-height:14px;
	font-size:117%;
	float:left;
	margin-top:17px;
	width:33%;
}

#calenderMenu img{
	vetical-align:top;
	margin-right:6px;
}

.menu-more{
	width:100%;
	margin-top:15px;
	padding-top:15px;
	border-top:1px solid #ccc;
	text-align:right;
}

.menu-more a{
	display:inline-block;
	height:100%;
	line-height:20px;
	padding-right:25px;
	color:#000;
	font-size:117%;
	font-weight:bold;
	position:relative;
}

.menu-more a:after{
	display:block;
	content:"+";
	width:20px;
	height:20px;
	text-align:center;
	line-height:20px;
	color:#fff;
	background:#1B3DB0;
	position:absolute;
	right:0;
	top:0;
	border-radius:50%;
}

.to-rental{
	width:100%;
	height:50px;
}

.to-rental a{
	display:block;
	width:100%;
	height:100%;
	line-height:50px;
	color:#1B3DB0;
	font-weight:bold;
	font-size:134%;
	background:url(../img/button-rental.png) no-repeat right 50%;
}

/* NEWS */

#newsList li{
	width:100%;
	padding-bottom:15px;
	margin-bottom:15px;
	border-bottom:1px solid #ccc;
}

#newsList a{
	display:block;
	overflow:hidden;
}

.news-date{
	width:100px;
	float:left;
	color:#333;
	font-size:117%;
}

.news-ttl{
	width:calc(100% - 100px);
	float:left;
	font-size:134%;
	color:#1B3DB0;
	font-weight:bold;
}

.caution{
	width:100%;
	margin-top:20px;
}

.caution a{
	display:block;
	width:318px;
	padding:30px 0;
	text-align:center;
	background:#F3D7D5;
	border-radius:10px;
}

.caution h4{
	font-size:134%;
	color:#990000;
	font-weight:bold;
	line-height:1.5;
}

.caution p{
	color:#333;
	font-size:134%;
	font-weight:bold;
	margin-top:20px;
}

/* 工事中 */
.caution2{
	width:100%;
	margin-top:20px;
}

.caution2 a{
	display:block;
	width:318px;
	padding:30px 0;
	margin:100px auto 0;
	text-align:center;
	background:#fff;
	border-radius:10px;
}

.caution2 h4{
	font-size:134%;
	color:#990000;
	font-weight:bold;
	line-height:1.5;
}

.caution2 p{
	color:#333;
	font-size:134%;
	font-weight:bold;
	margin-top:20px;
}

#sideMenu-btn li:not(:last-child){ margin-bottom:20px;}



@media screen and (max-width: 788px){

#mainInfo{ padding:60px 10px;}

#infoArea{ display:block;}
#infoHd{ display:none;}

#todayInfo{
	width:auto;
	padding-left:10px;
}

.eventBox{ padding-top:120px;}

.buttonList{ max-width:460px;}

.section,
.sideMenu{ width:100%;}

.sideMenu{ margin-top:25px;}

#calendarArea{
	padding:0 15px 15px;
	border:1px solid #C9CACA;
}

/* NEWS */

#eventList li:last-child,
#newsList li:last-child,
#sideMenu-btn li:not(:last-child){ margin-bottom:0;}

/* CALENDAR */

#calender th{ height:50px;}
#calender a{ line-height:50px;}

/* banner */

#sideMenu-btn{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

#sideMenu-btn li{ width:calc(50% - 7px);}
#sideMenu-btn li:nth-child(n+3){ margin-top:14px;}

}


@media screen and (max-width: 560px){

#mainInfo{
	padding:54.6875% 10px 0;
	background:#F7F8F8;
	position:relative;
}

#mainInfo:before{
	display:block;
	content:"";
	width:100%;
	height:0;
	padding-top:88.4375%;
	background:url(../img/visual-sp.png?ver=2) no-repeat;
	background-size:cover;
	position:absolute;
	top:0;
	left:0;
}

#infoArea{ background:#1B3DB0;}

#todayInfo{ padding:20px 15px 0;}

.eventBox{ padding:0;}

.eventBoxFlag{
	width:100%;
	height:auto;
	position:static;
	padding:8px 10px;
	margin-bottom:12px;
	font-size:117%;
	transform:rotate(0deg);
}

.eventBoxFlag:before{
	display:none;
}

.eventBoxFlag.style1{ text-shadow:1px 1px 2px #FC9316;}
.eventBoxFlag.style2{
	text-shadow:1px 1px 2px #B10000;
	padding-top:25px;
}

.eventBoxFlag.style3{ text-shadow:1px 1px 2px #7FBA12;}

.eventBoxFlag.style1{ background-color:#FFB600;}
.eventBoxFlag.style2{
	background-color:#B40000;
	padding-top:8px;
}

.eventBoxFlag.style3{ background-color:#83CC00;}

.eventBoxHd{
	font-size:134%;
	text-align:center;
}

.detail.wid .detailInner{justify-content: center;}

.more,
.detail.wid .more{
	width:100%;
	padding:0 5px;
	margin-top:20px;
}

.more a{
	display:block;
	max-width:100%;
	font-size:117%;
}

.buttonList{
	width:100%;
	max-width:100%;
	padding:15px 0 0;
}

.buttonList li{ height:34px;}

.buttonList a{
	line-height:32px;
	font-size:100%;
	text-indent:0;
	text-align:center;
}

.more a:after,
.buttonList a:after{ display:none;}



/* EVENT */

#event{
	position:relative;
	padding-bottom:40px;
}

.sectionHd{
	height:36px;
	margin-bottom:20px;
}
.sectionHd h2{
	line-height:36px;
	font-size:134%;
	padding-left:12px;
}

.sectionHd p{
	width:100%;
	height:34px;
	padding:0 20px;
	box-sizing:border-box;
	position:absolute;
	left:0;
	bottom:0;
}

.sectionHd a{ line-height:32px;}

#eventList a{
	padding-left:75px;
	position:relative;
}

.event-ttl span{
	width:50px;
	height:50px;
	line-height:50px;
	border-radius:50%;
	position:absolute;
	left:10px;
	top:0;
	box-sizing:border-box;
}

.event-ttl .flag1,
.event-ttl .flag2{
	line-height:15px;
	padding:10px 0;
}

.event-date{
	font-size:100%;
	line-height:1.2;
}

.event-ttl{ margin:5px 0;}

.event-ttl p{
	width:100%;
	float:none;
	font-size:117%;
	line-height:1.2;
}

.event-txt{
	width:100%;
	font-size:100%;
	float:none;
}


/* CALENDAR */

#calendarArea{ padding-bottom:0;}

#calenderHd{
	padding-top:16px;
	margin:0 -15px;
	font-size:117%;
}

#calender th,
#calender td{ font-size:117%;}

#calender th{ height:40px;}
#calender a{ line-height:40px;}

.menu-more{
	width:auto;
	text-align:center;
	margin:10px -15px 0;
	padding:10px 0 10px 20px;
}

.menu-more a{ font-size:109%;}


/* NEWS */

#newsList li:last-child{
	padding-bottom:0;
	margin-bottom:0;
	border-bottom:none;
}

.news-date{
	float:none;
	font-size:100%;
}

.news-ttl{
	width:100%;
	float:none;
	font-size:117%;
	margin-top:5px;
}

.new{ font-size:84%;}

#sideMenu-btn{ display:block;}

#sideMenu-btn li{ width:100%;}

#sideMenu-btn li:nth-child(n+2){ margin-top: 15px;}


}