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

#pageWrap {

    padding: 0px 0 0;
    /*font-family: 'YakuHanMP', 'Noto Serif JP', serif;*/
	h2,h3,h4,h5 {
		font-weight: 400;
	}
}
.notes-area {
    margin: 0 auto 0;
	z-index: 2;
	position: relative;
}
#sec01 {
	position: relative;
	.sisetu {
		position: absolute;
	width: 100%;
		left: 0;
		top: 0;
	}
}
.boxWidth {
	container-type: inline-size;
}
h3.h3-tit {
	position: absolute;
	width: 100%;
	max-width: 100%;
	left: 0;
	top: 8%;
	text-align: center;
	color: #fff;
	font-size: 2.4cqw;
	font-size: clamp(16px, 2.6cqw, 46px);
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

#sec02 {
	padding-bottom: 3%;
}
#sec02 .h3Box {
	padding: 8% 0;
	h3 {
		font-size: 30px;
		text-align: center;
		letter-spacing: 0.1em;
		padding-left: 1em;
	}
}

.catWrap {
	padding: 3% 0;
	.flex01{
		align-items: center;
		.txtBox {
			width: 57.5%;
			background-color: rgba(238,238,238,0.8);
			padding: 50px 0;
			container-type: inline-size;
			text-align: left;
			position: relative;
			overflow: hidden;
			&::before {
				content: "";
				position: absolute;
				width: 45cqw;
				height: 45cqw;
				left: 0;
				top: 0;
				background-color: #fff000;
				border-radius: 100%;
				transform: translate(-20%,-20%) scale(0);
			}
			&::after {
				content: "";
				position: absolute;
				width: 30cqw;
				height: 30cqw;
				right: 0;
				bottom: 0;
				background-color: #fff000;
				border-radius: 100%;
				transform: translate(15%,30%) scale(0);
			}
			p.engTxt {
				font-size: 5.4cqw;
				padding-left: 2em;
				padding-bottom: 0.2em;
				position: relative;
				&::after {
					content: "";
					position: absolute;
					width: 40%;
					height: 2px;
					bottom: 0;
					left: 0;
					background-color: #000;
				}
			}
			h4 {
				font-size: 4.8cqw;
				padding: 1.5em 1em 1em 15cqw;
				letter-spacing: 0.2em;
				line-height: 2;
				position: relative;
				z-index: 1;
			}
			p.lead {
				font-size: 2.4cqw;
				padding: 0.5em 1em 0.5em 15cqw;
				line-height: 3;
				position: relative;
				z-index: 1;
			}
		}
		.imgWrap {
			width: 42.5%;
			position: relative;
			.imgBox {
				position: absolute;
				z-index: -1;
				width: 130%!important;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
		}
	}
	.flex01.active{
		.txtBox {
			&::before {
				transition: 0.8s ease-out;
				transform: translate(-20%,-20%) scale(1);
			}
			&::after {
				transition: 0.5s ease-out 0.5s;
				transform: translate(15%,30%) scale(1);
			}
		}
	}
				
	.flex02{
		padding-top: 30px;
		.leftBox {
			width: 48.4%;
			max-width: 580px;
			/*container-type: inline-size;*/
		}
		.rightBox {
			width: 48.4%;
			max-width: 580px;
			.itemBox {
				width: 46.6%;
			max-width: 270px;
				
			}
		}
		p {
					font-size: 1.1cqw;
					line-height: 1.3;
					padding: 0.5em 0 1.5em;
				}
	}
	.flex02.box4 .itemBox{
				width: 22.5%;
			max-width: 270px;
	}
	.flex02.box2 .itemBox{
				width: 48.2%;
			max-width: 580px;
	}
}
.catWrap:nth-child(2n-1) .flex01 {
	flex-direction: row-reverse;
}
.catWrap:nth-child(2n-1) .imgBox {
	right: auto;
	left: 0;
	&::after {
		right: auto;
		left: 1em;
	}
}
.access h4 {
	letter-spacing: 0.05em!important;
}

#sec03 {
	padding: 5% 0;
	background-color: #eeeeef;
	position: relative;
	container-type: inline-size;
	overflow-x: clip;

	.boxWidth {
		max-width: 940px;
		container-type: inline-size;
	}
	h3 {
		font-size: 4cqw;
		padding-bottom: 0.5em;
		position: relative;
		z-index: 1;
	}
	.en {
		position: absolute;
				background-color: #fff000;
				border-radius: 100%;
				transform: translate(-20%,-10%);
		opacity: 0;
		transition: 0.5s ease-out;
	}
	.en.active {
		opacity: 1;
	}
	.en01 {
		width: 40cqw;
		height: 40cqw;
		left: 0;
		top: 0;
		transform: translate(-20%,-10%) scale(0);
	}
	.en01.active {
		transform: translate(-20%,-10%) scale(1);
	}
	.en02 {
		width: 20cqw;
		height: 20cqw;
		left: 0;
		top: 50%;
		transform: translate(-20%,0%) scale(0);
	}
	.en02.active {
		transform: translate(-20%,0%) scale(1);
	}
	.en03 {
		width: 40cqw;
		height: 40cqw;
		right: 0;
		top: 25%;
		transform: translate(20%,0%) scale(0);
	}
	.en03.active {
		transform: translate(20%,0%) scale(1);
	}
	.en04 {
		width: 20cqw;
		height: 20cqw;
		right: 0;
		bottom: 0;
		transform: translate(20%,20%) scale(0);
	}
	.en04.active {
		transform: translate(20%,20%) scale(1);
	}
	h4 {
		font-size: 3.6cqw;
		writing-mode: vertical-rl;
		color: #000;
		
	}
	.tateL {
		position: absolute;
		display: block;
		right: calc((100% + 940px) / 1.9);
		bottom: 10%;
	}
	.tateR {
		position: absolute;
		display: block;
		left: calc((100% + 940px) / 1.9);
		top: 10%;
	}
	.mapBox {
		position: relative;
		z-index: 1;
	}
}

#infoWrap {
	position: relative;
	z-index: 1;
	padding-top: 30px;
	.tableBox {
		width: 48%;
	}
	table {
		width: 100%;
		container-type: inline-size;
		margin-top: 20px;
	}
	th,td {
		font-size: clamp(12px, 1.4cqw, 14px);
		padding: 0.5em 0;
		border-bottom: #ccc solid 1px;
		line-height: 1.3;
		
	}
	th {
		text-align: left;
		font-weight: normal;
		letter-spacing: -0.05em;
	}
	td {
		text-align: right;
		white-space: nowrap;
	}
	td:nth-child(2) {
		width: 3.6em;
	}
	td:nth-child(3) {
		width: 2.8em;
	}
	td:nth-child(4) {
		width: 1.8em;
	}
	td:nth-child(5) {
		width: 4em;
	}
	th.category {
		font-size: clamp(13px, 1.6cqw, 16px);
		background-color: #000;
		color: #fff000;
		text-align: center;
		padding: 0.2em;
	}
}
.pnch {
    display: none;
}

@media screen and (max-width: 959px) {
	h3.h3-tit {
		font-size: clamp(24px, 3.8vw, 30px);
	}
	#sec02 .h3Box h3 {
		font-size: clamp(24px, 2.8vw, 30px);
	}
	.catWrap .flex01 .txtBox p.lead {
    font-size: 3cqw;
	}
	.catWrap .flex02 p {
    font-size: 1.4cqw;
	}
	#sec03 h4 {
		font-size: 3.6cqw;
		writing-mode: horizontal-tb;
		position: relative;
		z-index: 2;
		padding-bottom: 1em;
	}
	#sec03 .tateR,#sec03 .tateL {
    position: static;
		color: #000;
		font-size: clamp(24px, 2.8vw, 30px);
	}
	#infoWrap {

	}
	#infoWrap .tableBox {
    width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	#infoWrap {
    th, td {
        font-size: clamp(13px, 3cqw, 15px);
    }
}



	
}
	
@media screen and (max-width: 599px) {
	h3.h3-tit {
		font-size: 5.1vw;
		font-size: clamp(16px, 5.1vw, 20px);
	}
	#sec02 .boxWidth {
		width: 100%;
	}
	#sec02 .h3Box h3 {
		font-size: clamp(14px, 4.8vw, 30px);
	}

	.catWrap .flex01 .txtBox {
		width: 100%;
		padding: 50px 0;
		overflow: hidden;
	}
	.catWrap .flex01 .txtBox p.engTxt {
		padding-left: 6cqw;
	}
	.catWrap .flex01 .txtBox h4 {
		 padding: 1.5em 6cqw; 1em 6cqw;
	}
	.catWrap .flex01 .txtBox p.lead {
		font-size: clamp(13px, 3vw, 15px);
		padding-left: 6cqw;
		padding-right: 6cqw;
		line-height: 2;
  }
	.catWrap .flex01 .imgWrap {
		width: 100%;
	}
	.catWrap .flex01 .imgWrap .imgBox {
		position: static;
		transform: translateY(0%);
		width: 100% !important;
	}
	.catWrap .flex02 {
		width: 80%;
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}
	.catWrap .flex02 .leftBox,
	.catWrap .flex02 .rightBox,
	.catWrap .flex02 .rightBox .itemBox,
	.catWrap .flex02.box4 .itemBox,
	.catWrap .flex02.box2 .itemBox {
		width: 100%;
		max-width: 100%;
	}

    #sec03 .tateR, #sec03 .tateL {
			font-size: clamp(10px, 4.4vw, 20px);
    }
	    .catWrap .flex02 p {
				font-size: clamp(13px, 3.2vw, 16px);
    }
	#sec03 {
    h3 {
        font-size: 4.6cqw;
		}
	 .pnch {
		 display: block;
     font-size: 14px;
     margin-bottom: 0.5em;
     color: #777;
		 &::before {
			content: "　";
			display: inline-block;
			width: 1.5em;
			height: 1.5em;
			background-image: url("../../images/common/icon_exp.svg");
			background-repeat: no-repeat;
			background-position: left top;
			background-size: 100%;
			margin-right: 0.5em;
		}
	 }


}