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

#sec01 {
	margin-top: 200vh;
	color: #fff;
	position: relative;
	container-type: inline-size;
	overflow: hidden;
}
#sec01 .imgBox {
	transform: translate(0) scale(1.1);
	opacity: 1;
}
#sec01 .imgBox.active {
	transition: 5s 1s;
	transform: translate(0) scale(1);
}
#sec01 .h2Box {
	position: absolute;
	display: block;
	width: 100%;
	top: 13%;
	text-align: center;
	letter-spacing: 0.1em;
}
#sec01 .h2Box .engTxt {
	font-size: clamp(13px, 1.8cqw, 26px);
}
#sec01 .h2Box h2 {
	font-size: clamp(13px, 2.6cqw, 46px);
	padding: 0.5em 0;
}
#sec01 .h2Box .lead {
	font-size: clamp(13px, 1.2cqw, 18px);
	line-height: 2.4;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
#sec02 {
	background-color: #fff;
	padding: 6% 0;
}
#sec02 .img02-1 {
	padding: 30px 0;
}
#sec02 .flex {
	padding: 30px 0;
}
#sec02 .flex .imgBox {
	width: 52.5%;
}
#sec02 .flex .txtBox {
	width: 44%;
	container-type: inline-size;
}
#sec02 .flex .txtBox .engTxt {
	font-size: 21px;
}
#sec02 .flex .txtBox h3 {
	font-size: 4.4cqw;
	padding: 0.6em 0;
}
#sec02 .flex .txtBox .lead {
	font-size: clamp(13px, 2.8cqw, 16px);
	line-height: 2.0;
}
#sec02 .accessBox {
	padding: 3% 0;
	background-color: #efeeea;
}
#sec02 .accessBox .flex01 {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 15px 0;
}
#sec02 .accessBox .flex01 .itemBox {
	width: 30%;
}
#sec02 .accessBox .flex01 .itemBox p {
	font-size: 13px;
}
#sec02 .accessBox .flex02 {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 15px 0;
}
#sec02 .accessBox .flex02 .figBox {
	width: 76%;
}
#sec02 .accessBox .flex02 p.cap {
	width: 21%;
	font-size: 12px;
}

#sec03 {
	position: relative;
	background-color: #fff;
}
#sec03 .h3Box {
	position: absolute;
	top: 0;
	right: 56%;
	width: 40%;
	max-width: 700px;
	container-type: inline-size;
	letter-spacing: 0.1em;
	z-index: 1;
}
#sec03 .h3Box .engTxt {
	font-size:4cqw;
}
#sec03 .h3Box h3 {
	font-size:5.2cqw;
	padding: 0.5em 0;
}
#sec03 .h3Box .lead {
	font-size:2.6cqw;
	line-height: 2;
}
#sec03 dl {
	position: absolute;
	top: 60%;
	left: 55%;
	width: 30%;
	container-type: inline-size;
	color: #fff;
}
#sec03 dt {
	font-size:3.2cqw;
	padding: 2em 0 0.5em 0;
}
#sec03 dd {
	font-size:2.4cqw;
	font-size: clamp(12px, 2.7cqw, 14px);
}
#sec04 {
	background-color: #fff;
	padding: 5% 0;
	letter-spacing: 0.1em;
}
#sec04 .h3Box .engTxt {
	font-size: 28px;
}
#sec04 .h3Box  h3 {
	font-size: 32px;
	padding: 0.6em 0;
}
#sec04 .h3Box  .lead {
	font-size: 14px;
	line-height: 2.0;
}
#mapBox {
	padding: 30px 0;
}
#infoWrap h3 {
	text-align: center;
	font-size: 28px;
	letter-spacing: 0.4em;
	padding-left: 0.4em;
	color: #a18e71;
	/*border-bottom: #a18e71 solid 1px;*/
	padding: 2em 0;
}
#infoWrap .infoBox {
	max-width: 1200px;
}
#infoWrap  .tableBox {
	width: 48%;
}
#infoWrap  table {
	width: 100%;
	margin-bottom: 30px;
	/*box-shadow: 0px 1px 10px rgba(161,142,113,0.3);
	background-color: rgba(255,255,255,0.6);
	padding: 20px;*/
	container-type: inline-size;
}
#infoWrap  table th,#infoWrap  table td {
	text-align: left;
	font-size: 16px;
	font-size: clamp(13px, 1.3cqw, 16px);
	padding: 0.5em 0;
	border-bottom: rgba(228,226,226,1.00) dotted 1px;
	letter-spacing: 0em;
}

#infoWrap table th {
	padding-left: 0.5em;
}
#infoWrap table th.category {
	background-color: rgb(251 251 249);
	border-bottom: rgba(161,142,113,0.5) solid 1px;
	border-left: rgba(161,142,113,0.8) solid 3px;
	border-right: rgba(161,142,113,0.8) solid 3px;
	color: #a18e71;
	font-size: 16px;
	text-align: center;
	/*box-shadow: 0px 1px 5px rgba(161,142,113,0.5);*/
	background: #A18E71;
background: linear-gradient(130deg, rgba(161, 142, 113, 0.14) 0%, rgba(161, 142, 113, 0.42) 25%, rgba(255, 255, 255, 1) 25%);
}
#infoWrap table td {
	text-align: right;
}
#infoWrap table td:nth-child(2) {
	width: 1.4em;
}
#infoWrap table td:nth-child(3) {
	width: 3.6em;
}
#infoWrap table td:nth-child(4) {
	width: 2.4em;
}
#infoWrap table td:nth-child(5) {
	width: 2.7em;
	padding-right: 0.5em;
}
#infoWrap .tableBox .cap {
	font-size: 12px;
}

#sec05 {
	background-color: #000;
	padding: 5% 0;
	color: #fff;
}
#sec05 .flex01 {
	max-width: 1280px;
	padding: 20px 0;
}
#sec05 .flex01 .itemBox {
	width: 48%;
}
#sec05 .flex01 .imgBox {
	position: relative;
}
#sec05 .flex01 .imgBox p {
	position: absolute;
	right: 7%;
	bottom: 0;
	color: #fff;
	font-size: 13px;
}
#sec05 .flex01 .itemBox dl {
	width: 100%;
	padding: 0 6%;
	
}
#sec05 .flex01 .itemBox dt {
	padding: 0.5em 0;
	font-size: 18px;
}
#sec05 .flex01 .itemBox dd {
	font-size: 14px;
}
#sec05 .box01 {
max-width: 700px;
	padding: 30px 0 0;
	
}
#sec05 .flex02 {
	padding: 20px 0;
	gap:20px 3%;
}
#sec05 .flex02 .itemBox {
	width: 17.5%;
	max-width: 210px;
}
#sec05 .box01 p,
#sec05 .flex02 .itemBox p,
#sec05 .flex03 .itemBox p{
	font-size: 13px;
	padding: 0.3em 0;
}

#sec05 .flex03 {
	padding-top: 30px;
}
#sec05 .flex03 h3 {
	width: 100%;
	padding: 0.5em 0;
	font-size: 24px;
}
#sec05 .flex03 .leftBox {
	width: 47.5%;
	max-width: 570px;
}
#sec05 .flex03 .rightBox {
	width: 48%;
}
#sec05 .flex03 .rightBox .itemBox {
	width: 48%;
}
#sec05 .flex03 .rightBox p {
	width: 100%;
	font-size: 14px;
	line-height: 2em;
}

@media screen and (max-width: 959px) {
	.sec .engTxt {
		font-size:20px!important;
	}
	.sec h2,.sec h3 {
		font-size:20px!important;
	}
	.sec .lead {
		font-size:13px!important;
		letter-spacing: 0em;
	}
	#sec01 .h2Box {
		top: 8%;
	}
	#sec01 .h2Box h2 {
		font-size: 21px;
	}
	#sec01 .h2Box .lead {
    line-height: 1.8;
}
	#sec02 .img02-1,#sec02 .flex {
   padding: 10px 0;
}
	#sec02 .flex .imgBox,#sec02 .flex .txtBox {
		width: 75%;
		margin: 0 auto;
	}
	#sec02 .flex .txtBox {
		padding: 30px 0;
	}
	#sec02 .accessBox .flex02 .figBox {
		width: 100%;
	}
	#sec02 .accessBox .flex02 p.cap {
		width: 100%;
		font-size: 10px;
		padding-top: 1em;
	}
	#sec03 .h3Box {
		position: static;
		width: 75%;
    margin: 0 auto;
	}
	#sec03 .imgBox {
		padding-top: 30px;
	}
	#sec03 dl {
		position: static;
		width: 100%;
		container-type: inline-size;
		background-color: #a38a77;
		padding-bottom: 30px;

	}
	#sec03 dt {
		font-size:16px;
		padding: 2em 0 0.5em 0;
		width: 80%;
		margin: 0 auto;
	}
	#sec03 dd {
		font-size:13px;
		width: 80%;
		margin: 0 auto;
	}
	#infoWrap {
		max-width: 460px;
		margin: 0 auto;
	}
	#infoWrap .tableBox {
    width: 100%;
	}
	#sec05 .flex01 {
		max-width: 480px;
	}
	#sec05 .flex01 .itemBox {
		width: 100%;
		padding: 20px 0;
	}
	#sec05 .flex01 .itemBox dt {
		font-size:16px;
	}
	#sec05 .flex01 .itemBox dd {
		font-size:13px;
	}
	#sec05 .box01 {
		width: 80%;
    max-width: 440px;
    padding: 30px 0 0;
	}
	#sec05 .flex02 {
    width: 80%;
    max-width: 440px;
	}
	#sec05 .flex02 .itemBox {
    width: 46%;
    max-width: 210px;
	}
	#sec05 .flex03 {
		width: 80%;
    max-width: 440px;
		margin: 0 auto;
	}
	#sec05 .flex03 .leftBox {
		width: 100%;
		max-width: 570px;
	}
	#sec05 .flex03 .rightBox {
		width: 100%;
	}
	#sec05 .flex03 .rightBox .itemBox {
		width: 46%;
	}


}

@media screen and (max-width: 599px) {
	#sec01 {
		/*margin-top: 100vh;*/
	}
	#sec01 .imgBox {
		transform: translate(0) scale(1.1);
		opacity: 1;
	}
	#sec01 .h2Box {
		width: 90%;
		max-width: 350px;
		left: 50%;
		transform: translateX(-50%);
		top:15%;
		container-type: inline-size;
	}
	.sec .engTxt {
		font-size: clamp(17px, 4.8vw, 19px)!important;
		letter-spacing: 0em;
		font-weight: 500;
	}
	.sec .engTxt,.sec h2,.sec h3 {
		font-size: clamp(18px, 5.1vw, 20px)!important;
		letter-spacing: 0em;
	}
	.sec .lead {
		font-size: clamp(12px, 3.5vw, 14px)!important;
		letter-spacing: 0em;
		text-align: justify;
	}
	.sec .lead br {
		display: none !important;
	}
	#sec02 .flex .imgBox {
		width: 100%;
	}
	#sec02 .flex .txtBox {
		width: 90%;
		max-width: 350px;
		container-type: inline-size;
		padding: 10% 0;
		margin: 0 auto;
	}
	
	#sec02 .img02-1,#sec02 .flex {
		padding: 3px 0;
	}
	#sec02 .accessBox .flex01 .itemBox {
		width: 80%;
		max-width: 300px;
		margin: 0 auto 15px;
	}
	#sec02 .accessBox .flex01 .itemBox p {
		font-size: 12px;
	}
	#sec02 .accessBox .flex02 {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 0 15px 0;
	}
	
	#sec03 .h3Box,#sec04 .h3Box,#sec05 .flex03 {
		position: static;
		width: 90%;
		max-width: 350px;
		margin: 0 auto;
		padding: 10% 0 5%;
	}
	#sec03 .imgBox {
		padding-top: 30px;
	}
	#sec03 dt {
		font-size:15px;
		padding: 2em 0 0.5em 0;
		width: 90%;
		margin: 0 auto;
	}
	#sec03 dd {
		font-size:12px;
		width: 90%;
		margin: 0 auto;
	}
	#infoWrap h3 {
    padding: 1em 0;
	}
	#infoWrap .tableBox .cap {
    font-size: 10px;
		text-align: justify;
		letter-spacing: 0em;
	}
	#infoWrap table th.category {
    font-size: 14px;
	}
	#sec05 .box01,#sec05 .flex02 {
		width: 90%;
	}
	#sec05 .flex02,#sec05 .flex03 .rightBox {
    gap: 15px 5%;
}
	#sec05 .flex01 .imgBox p,
	#sec05 .flex03 .rightBox p,
	#sec05 .box01 p, #sec05 .flex02 .itemBox p, #sec05 .flex03 .itemBox p{
    font-size: 12px;
		line-height: 1.3;
}
	#sec05 .flex01 .itemBox dt {
		font-size:15px;
	}
	#sec05 .flex01 .itemBox dd {
		font-size:12px;
	}
	#sec05 .flex02 .itemBox,#sec05 .flex03 .rightBox .itemBox {
		width: 47.5%;
    max-width: 210px;
		margin: 0 auto;
  }

	
	
}