@charset "UTF-8";
/* CSS Document */
.notes-area {
margin: 0% auto 0;
}
#pageWrap {
padding: 0px 0 0;
	text-align: justify;
}
#pageWrap .engTxtDin {
	font-size: 30px;
	letter-spacing: 0.2em;
}
#pageWrap h3 {
	font-size: 24px;
	padding: 0.5em 0;
}

#mainWrap {
	position: relative;
}
#mainWrap .txtBox {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

#accessWrap {
	background-color: #003542;
	color: #fff;
}
#accessWrap #accessBox {
	padding: 5% 0;
}
#accessWrap #accessBox .leftBox {
	width: 40%;
}

#accessWrap #accessBox .leftBox p.lead {
	font-size: 15px;
	padding: 1em 0;
}
#accessWrap #accessBox .leftBox p.caption {
	font-size: 10px;
}
#accessWrap #accessBox .rightBox {
	width: 57%;
	max-width: 680px;
	
}


#imgWrap {
	padding: 5% 0;
}
#imgWrap .flex1 {
	padding: 20px 0;
}
#imgWrap .flex1 .itemBox {
	width: 48%;
	display: flex;
	justify-content: center;
}
#imgWrap .flex1 .itemBox .imgBox {
	width: 63%;
	max-width: 362px;
}
#imgWrap .flex1 .itemBox .txtBox {
	flex: 1;
	background: rgb(75,68,42);
background: linear-gradient(129deg, rgba(75,68,42,1) 0%, rgba(181,170,120,1) 100%);
	color: #fff;
	padding: 2% 3% 0;
	margin-left: 1px;
}
#imgWrap .flex1 .itemBox .txtBox p {
	border-top: #fff solid 1px;
	padding-top: 1em;
	line-height: 1.4;
}
#imgWrap .flex2 {
	padding-top: 10px;
	gap:30px 2%;
}
#imgWrap .flex2 .itemBox {
	width: 32%;
	display: flex;
	justify-content: center;
}
#imgWrap .flex2 .itemBox .imgBox {
	width: 63%;
	max-width: 214px;
}
#imgWrap .flex2 .itemBox .txtBox {
	flex: 1;
	background-color: #003542;
	color: #fff;
	padding: 2% 3% 0;
	margin-left: 1px;
}

#mapWrap {}

#phWrap {
	padding: 50px 0 0;
}
#phWrap .imgBox {
	width: 20%;
}

#infoWrap {
	background-color: #003542;
	padding: 50px 0;
	color: #fff;
}
#infoWrap h4.engTxtDin {
	text-align: center;
	max-width: 1500px;
	margin: 0 auto;
	border-top: #fff solid 1px;
	position: relative;
	font-size: 20px;
	letter-spacing: 1em;
	padding: 0.3em;
	position: relative;
}
#infoWrap h4.engTxtDin::after {
	content: "";
	position: absolute;
	width: 100%;
	max-width: 1400px;
	height: 1px;
	background-color: #fff;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
#infoWrap #infoBox {
	padding: 30px 0;
	max-width: 1400px;
}
#infoWrap .tableBox {
	width: 32%;
}
#infoWrap table {
	width: 100%;
	margin-bottom: 20px;
}
#infoWrap table th.category {
	background: rgb(75,68,42);
background: linear-gradient(270deg, rgba(75,68,42,1) 0%, rgba(181,170,120,1) 100%);
	text-align: center;
	font-size: 16px;
	padding: 0.2em 0;
}

#infoWrap table th,#infoWrap table td {
	font-weight: 300;
	padding: 0.5em 0;
	line-height: 1.2;
	font-size: 14px;
}
#infoWrap table td {
	text-align: right;
}
#infoWrap table td:nth-child(2) {
	width: 3.3em;
}
#infoWrap table td:nth-child(3) {
	width: 2.3em;
}
#infoWrap table td:nth-child(4) {
	width: 1.8em;
}
#infoWrap table td:nth-child(5) {
	width: 4.3em;
}
#infoWrap {}


@media screen and (max-width: 959px){
	#pageWrap .engTxtDin {
		font-size: clamp(22px, 3.0vw, 24px);
	}
	#pageWrap h3 {
		font-size: clamp(22px, 3.0vw, 24px);
		padding: 0.5em 0;
	}
	#accessWrap #accessBox {
		max-width: 600px;
	}
	#accessWrap #accessBox .leftBox {
		width: 100%;
	}
	#accessWrap #accessBox .rightBox {
		width: 100%;
		padding-top: 30px;

	}
	#imgWrap .flex1 .itemBox {
		flex-wrap: wrap;
	}
	#imgWrap .flex1 .itemBox .imgBox {
		width: 100%;
		max-width: 362px;
	}
	#imgWrap .flex1 .itemBox .txtBox {
		width: 100%;
		flex: none;
		padding: 0 6% 6%;
		margin-left: 0px;
		text-align: center;
	}
	#imgWrap .flex1 .itemBox .txtBox img {
		max-width: 200px;
	}
	#imgWrap .flex2 .itemBox {
		width: 48%;
		display: flex;
		justify-content: center;
	}
	#imgWrap .flex2 .itemBox .imgBox {
		width: 63%;
		max-width: 214px;
	}
	#imgWrap .flex2 .itemBox .txtBox {
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;

	}
	#infoWrap h4.engTxtDin {
		font-size: clamp(18px, 2.5vw, 20px);
	}
	#infoWrap #infoBox {
		max-width: 500px;
	}
	#infoWrap .tableBox {
		width: 95%;
		margin: 0 auto;
	}
	#infoWrap table th,#infoWrap table td {
	font-size: clamp(13px, 1.9vw, 15px);
	}
}

@media screen and (max-width: 599px){
	#pageWrap .engTxtDin {
		font-size: 5vw;
		font-size: clamp(18px, 5vw, 20px);
		text-align: center;
	}
	#pageWrap h3 {
		font-size: 5vw;
		font-size: clamp(18px, 5vw, 25px);
		text-align: center;
		padding: 0.5em 0;
	}
	#accessWrap #accessBox {
		max-width: 600px;
	}
	#accessWrap #accessBox .leftBox {
		width: 95%;
		margin: 0 auto;
	}
	#accessWrap #accessBox .leftBox p.lead {
		font-size: 3.7vw;
		font-size: clamp(13px, 3.7vw, 15px);
		line-height: 2;
	}
	#accessWrap #accessBox .leftBox p.caption {
		font-size: 10px;
	}
	#accessWrap #accessBox .leftBox p.lead br {
		display: none;
		
	}
	#accessWrap #accessBox .rightBox {
		width: 95%;
		margin: 0 auto;
		padding-top: 30px;

	}
	#imgWrap .flex1 .itemBox {
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
	}
	#imgWrap .flex1 .itemBox .txtBox p {
		border-top: #fff solid 1px;
		font-size: clamp(12px, 3.5vw, 14px);
		padding-top: 1em;
		line-height: 1.4;
		text-align: justify;
	}
	#imgWrap .flex2 {
		gap:5px 0;
	}
	#imgWrap .flex2 .itemBox {
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	#imgWrap .flex2 .itemBox .txtBox {
		margin-bottom: 0;
	}
	#infoWrap table th,#infoWrap table td {
	font-size: 3.5vw;
		font-size: clamp(12px, 3.5vw, 14px);
	}
	#infoWrap {
		padding: 50px 0 0;
	}
	#infoWrap h4.engTxtDin {
		font-size: 4vw;
		font-size: clamp(14px, 4vw, 16px);
		letter-spacing: 0.6em;
	}
	#phWrap .imgBox:nth-child(1),#phWrap .imgBox:nth-child(2){
		width: 50%;
	}
	#phWrap .imgBox:nth-child(3),#phWrap .imgBox:nth-child(4),#phWrap .imgBox:nth-child(5){
		width: calc(100% / 3);
	}
}