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

#captionBox,#btnswrap {
	background-color: #404040;
	color: #fff;
}
.boxWidth {
	max-width: 1100px;
}

#pageTit {
	padding: 0;
	position: relative;
}
#pageTit h2 {
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	color: #fff;
}

#sec01 {
	background-color: #4d4951;
	
	padding: 5% 0;
	color: #fff;
}
#sec01 .h3Box {}
#sec01 .h3Box h3 {
	font-size: 32px;
	padding-bottom: 0.5em;
	
}
#sec01 .h3Box .lead {
	font-size: 21px;
	padding: 1em 0;
}
#sec01 .figBox {}
#sec01 .figBox h4,
#sec02 h4 {
	font-size: 26px;
	text-align: center;
	border-bottom: #777 solid 1px;
	padding: 1em 0 0.6em;
	margin-bottom: 1.5em;
}

#sec01 .phWrap {

}
#sec01 .phWrap p {
	padding: 0.6em 0;
	font-size: 20px;
	letter-spacing: 0em;
	padding-bottom: 3em;
}
#sec01 .phWrap p span {
	font-size: 70%;
	margin-left: 1em;
}
#sec01 .ph01 {
	padding-top: 8%;
}
#sec01 .ph01 .leftBox {
	width: 46%;
}
#sec01 .ph01 .rightBox {
	width: 53%;
}
#sec01 .ph01 .rightBox .box01 {
	width: 39.6%;
}
#sec01 .ph01 .rightBox .box02 {
	width: 58%;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

#sec01 .ph02 {}
#sec01 .ph02 .itemBox {
	width: 47%;
}
#sec01 .ph02 {}
#sec01 .ph03 .itemBox {
	width: 31%;
}

#sec01 .mapBox {
	padding: 3% 0 6%;
}


#sec02 {
	padding: 3% 0;
	background-color: #f2ede3;
}
#sec02 .tableBox {
	width: 47%;
	container-type: inline-size;
}
#sec02 table {
	width: 100%;
	padding: 1em 0;
	
}
#sec02 table th,#sec02 table td {
	text-align: left;
	font-weight: 300;
	letter-spacing: 0em;
	padding: 0.3em 0;
	/*font-size: clamp(13px, 1.2cqw, 16px);*/
	font-size: clamp(13px, 3.2cqw, 16px);
}
#sec02 table th {
	padding-left: 0.3em;
}
#sec02 table td {
	text-align: right;
}
#sec02 table td:nth-of-type(1) {
	width: 2.4em;

}
#sec02 table td:nth-of-type(2) {
	width: 2.4em;
}
#sec02 table td:nth-of-type(3) {
	width: 2.0em;
}
#sec02 table td:nth-of-type(4) {
	width: 4.2em;
}
#sec02 table th.category {
	font-size: clamp(15px, 3.6cqw, 20px);
	/*font-size: 3.6cqw;*/
	border-bottom: #777 solid 1px;
	padding-bottom: 0.5em;
	padding-left: 0;
}

@media screen and (max-width : 959px ){
	#sec01 .h3Box h3 {
	font-size: clamp(20px, 2.7vw, 22px);

	}
	#sec01 .h3Box .lead {
		font-size: clamp(14px, 2vw, 16px);
	}
	
	#sec01 .figBox h4, #sec02 h4 {
		font-size: clamp(20px, 2.7vw, 22px);
	}
	#sec01 .phWrap p {
		font-size: clamp(14px, 2vw, 16px);
		letter-spacing: 0em;
	}
	#sec01 .phWrap p span {
		font-size: 80%;
		display: block;
		margin-left: 0;
	}
	#sec02 .tableWrap {
		max-width: 500px;
		margin: 0 auto;
	}
	#sec02 .tableBox {
    width: 100%;
}	
}
@media screen and (max-width : 599px ){
	#sec01 .h3Box h3 {
	font-size: clamp(16px, 4.6vw, 18px);
		text-align: center;
		padding: 1.5em 0;

	}
	#sec01 .h3Box .lead {
		font-size: clamp(13px, 3.7vw, 15px);
		text-align: center;
	}
	
	#sec01 .figBox h4, #sec02 h4 {
		font-size: clamp(16px, 4.6vw, 18px);
	}
	#sec01 .phWrap p {
		font-size: clamp(13px, 3.7vw, 15px);
		padding-bottom: 1.5em;
	}
	#sec01 .phWrap p span {
		font-size: 90%;
	}
	#sec01 .ph01,#sec01 .ph02 {
		max-width: 360px;
		margin: 0 auto;
	}
	#sec01 .ph01 .leftBox,#sec01 .ph01 .rightBox {
    width: 100%;
		padding: 3px 0;
	}
	#sec01 .ph02 .itemBox {
    width: 100%;
	}
	#sec01 .ph03 .itemBox {
    width: 48%;
	}
		
}