@charset "UTF-8";
h2 {
	border-bottom: solid 10px #000;
	position: relative;
	background: none;
	line-height: 2.2;
	margin: 6% auto 60px;;
	display: inline-block;
	padding: 0 0 1rem 0;
	font-size: 220%;
	font-weight: bold;
}
 
h2:after,h2:before {
	content: "";
	display: block;
	line-height: 0;
	overflow: hidden;
	position: absolute;
	bottom: -10px;
	width: 30%;
	border-bottom: 10px solid #fff;
}

h2:after {
	left: 0;
}

h2:before {
	right: 0;
}

.topText {
	font-size: 110%;
	line-height: 2.5;
	margin-bottom: 6%;
}

#town section .contentsBox,#town section .performance {
	text-align: left;
}

	
.performance.bgGray {
	background: #eeeeee;
} 

p.btn a {
	background: #333233;
}

.bukkenBnr div.kansai {
	background: url("../image/town/kansai_bnr.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.bukkenBnr div.kanto {
	background: url("../image/town/kanto_bnr.jpg") no-repeat 50% 50%;
	background-size: cover;
}

.bukkenBnr div p{
	text-shadow:#fff 3px 0px 3px,#fff -3px 0px 3px,#fff 0px -3px 3px,#fff 0px 3px 3px,#fff 3px 3px 3px,#fff -3px 3px 3px,#fff 3px -3px 3px,#fff -3px -3px 3px,#fff 1px 3px 3px,#fff -1px 3px 3px,#fff 1px -3px 3px,#fff -1px -3px 3px,#fff 3px 1px 3px,#fff -3px 1px 3px,#fff 3px -1px 3px,#fff -3px -1px 3px;
	font-size: 26px;
	line-height: 1.4;
	padding: 68px 0;
	font-weight: bold;
}

.bukkenBnr div p span {
	font-size: 13px;
	display: block;
	font-weight: bold;
}

.bukkenBnr div.kansai p span {
	color: #973333;
}

.bukkenBnr div.kanto p span {
	color: #003366;
}




@media screen and (min-width:320px) and ( max-width:767px) { 
	h2 {
		font-size: 100%;
		margin: 8% auto;
		border-bottom: solid 6px #000;
	}
	 
	h2:after,h2:before {
		bottom: -6px;
		border-bottom: 6px solid #fff;
	}
	
	h2.title {
		font-size: 24px;
		padding: 0;
		margin: 0 auto 30px;
	}
	
	.topText {
		line-height: 1.6;
		margin-bottom: 8%;
		font-size: 90%;
	}
	
	.contentsBox {
		margin-bottom: 12%;
	}
	
	.contentsBox figure {
		margin-bottom: 50px;
	}
	
	h3 {
		font-size: 32px;
		text-align: left;
		margin-bottom: 40px;
		color:#000;
		position: relative;
	}
	
	h3 span {
		font-size: 35px;
		font-weight: bold;
		position: absolute;
		width: 80%;
		top: 15px;
		left: 50px;
		color: rgb(238 238 238 / 90%);
		z-index: -1;
	}
	
	h3 span:after {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 1;
		content: '';
		display: block;
		width: 120px;
		height: 2px;
		background: rgb(238 238 238 / 90%);
	}
	
	.kaiteki h3 span:after {
		display: none;
	}
	
	h4 {
		font-size: 21px;
		margin-bottom: 20px;
		line-height: 1.4;
	}
	
	.contentsBox {
		margin-bottom: 50px;
	}
	
	.contentsBox.kaiteki {
		margin-bottom: 0;
	}
	
	.contentsBox p.mainText {
		margin-bottom: 30px;
		font-size: 14px;
	}
	
	.contentsBox p {
		margin-bottom: 20px;
		font-size: 14px;
	}
	
	.contentsBox .bigPhoto {
		width: 100%;
		margin: 0 auto 50px;
	}
	
	.contentsBox .flexBox {
		justify-content: space-between;
	}
	
	.contentsBox .flexBox div {
		width: 100%;
		display: flex;
		flex-direction: column;
	}	
	
	.contentsBox .flexBox div figure {
		margin-top: auto;
	}	
	
	.performance {
		padding: 40px 20px;
		margin-bottom: 40px;
	}
	
	.performance h5 {
		font-size: 16px;
	} 	
	
	.performance h3 {
		font-size: 20px;
		margin-bottom: 5px;
	} 	
	
	.performance .date {
		margin-bottom: 20px;
		font-size: 14px;
	} 
	
	.performance .bigPhoto {
		margin-bottom: 20px;
	} 
	
	.performance h4 {
		font-size: 20px;
		margin-bottom: 20px;
	} 	
	
	.performance .text {
		margin-bottom: 20px;
		font-size: 14px;
	} 	
	
	.performance .flexBox.alignCenter {
		align-items: center;
	}
	
	.performance .flexBox div {
		width: 100%;
	}
	
	.performance .flexBox div.textBox {
		margin-bottom: 20px;
	}
	
	.performance .flexBox div.textBox p {
		font-size: 14px;
	}
	
	.performance .flexBox div.photoBox {
		margin-bottom: 20px;
	}
	
	.btn {
		margin: 0 auto 50px;
	}
	
	.bukkenBnr {
		margin: 20px auto 50px;
	}
	
	.bukkenBnr div {
		width:100%;
		margin-bottom: 30px;
	}
	
	.bukkenBnr div p{
		font-size: 22px;
		line-height: 1.4;
		padding: 50px 0;
		font-weight: bold;
	}

	p.btn a {
		font-size: 16px;
	}	
	
	
	
}

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

	h3 {
		font-size: 48px;
		text-align: left;
		margin-bottom: 60px;
		color:#000;
		position: relative;
	}
	
	h3 span {
		font-size: 70px;
		font-weight: bold;
		position: absolute;
		display: block;
		top: 16px;
		left: 71px;
		color: rgb(238 238 238 / 90%);
		z-index: -1;
	}
	
	h3 span:after {
		position: absolute;
		top: 50%;
		right: -225px;
		z-index: 1;
		content: '';
		display: block;
		width: 200px;
		height: 2px;
		background: rgb(238 238 238 / 90%);
	}
	
	h4 {
		font-size: 26px;
		margin-bottom: 20px;
	}
	
	.contentsBox {
		margin-bottom: 100px;
	}
	
	.contentsBox.kaiteki {
		margin-bottom: 33px;
	}
	
	.contentsBox p.mainText {
		margin-bottom: 60px;
	}
	
	.contentsBox p {
		margin-bottom: 30px;
	}
	
	.contentsBox .bigPhoto {
		width: 100%;
		max-width: 900px;
		margin: 0 auto 60px;
	}
	
	.contentsBox .flexBox {
		justify-content: space-between;
	}
	
	.contentsBox .flexBox div {
		width: 48%;
		display: flex;
		flex-direction: column;
	}	
	
	.contentsBox .flexBox div figure {
		margin-top: auto;
	}	
	
	.performance {
		padding: 40px;
		margin-bottom: 100px;
	} 
	
	.performance h5 {
		font-size: 22px;
	} 	
	
	.performance h3 {
		font-size: 32px;
		margin-bottom: 5px;
	} 	
	
	.performance .date {
		margin-bottom: 40px;
	} 
	
	.performance .bigPhoto {
		margin-bottom: 40px;
	} 
	
	.performance h4 {
		font-size: 26px;
		margin-bottom: 20px;
	} 	
	
	.performance .text {
		margin-bottom: 40px;
	} 	
	
	.performance .flexBox.alignCenter {
		align-items: center;
	}
	
	.performance .flexBox div {
		width: 48%;
	}
	
	.btn {
		margin: 0 auto 33px;
	}
	
	
	.bukkenBnr {
		margin: 20px auto 100px;
	}
	
	.bukkenBnr div {
		width: 48%;
	}
		
	.bukkenBnr div p{
		font-size: 26px;
		line-height: 1.4;
		padding: 68px 0;
		font-weight: bold;
	}
	
	.bukkenBnr div p span {
		font-size: 13px;
		display: block;
		font-weight: bold;
	}
	
	
	
}