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

#sec01 {
	margin-top: 200vh;
	color: #fff;
	position: relative;
	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: 30%;
	top: 10%;
	right: 55%;
	letter-spacing: 0.1em;
	container-type: inline-size;
}
#sec01 .h2Box h2 {
	font-size: clamp(13px, 5.5cqw, 46px);
	color: #000;
	line-height: 2;
	letter-spacing: 0em;
}

#sec02 {
	background-color: #fff;
	padding: 5% 0;
	
}
#sec02 .h3Box {
	padding-bottom: 30px;
	letter-spacing: 0.1em;
}
#sec02 .h3Box .engTxt {
	font-size: 28px;
}
#sec02 .h3Box  h3 {
	font-size: 32px;
	padding: 0.6em 0;
}
#sec02 .h3Box  h4 {
	font-size: 20px;
	padding: 0.6em 0;
}
#sec02 .h3Box  .lead {
	font-size: 14px;
	line-height: 2.0;
}

#sec02 #parking {
	border: #000 solid 1px;
	padding: 30px;
	padding-left: 0;
	align-items: center;
	margin-top: 50px;
	align-items: stretch;
}
#sec02 #parking .leftBox {
	width: 38%;
	position: relative;
}
#sec02 #parking .leftBox .car {
	position: absolute;
	width: 90%;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
}
#sec02 #parking .leftBox .kyaku {
	position: absolute;
	width: 30%;
	right: 0;
	bottom: 0;
	transform: translate(0) scale(2);
	transition-duration: 1s;
	transition-delay: 0.5s;
}
#sec02 #parking .leftBox .kyaku.active {
	transform: translate(0) scale(1);
}
#sec02 #parking .centerBox {
	width: 24%;
}
#sec02 #parking .rightBox {
	width: 34%;
	container-type: inline-size;
}
#sec02 #parking .rightBox dt {
	background-color: #8a1a1f;
	color: #fff;
	font-size: 4.2cqw;
	text-align: center;
	padding: 0.2em;
}
#sec02 #parking .rightBox dd {
	font-size: 3.6cqw;
	padding-top: 0.5em;
	text-align: justify;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#sec02 #parking .rightBox dd .cap {
	font-size: 75%;
}
#sec03 {
	background-color: #fff;
	padding: 0% 0;

}
#sec03  {
	padding-bottom: 5%;
}
#sec03 .sikichiBox {
	position: relative;
}
#sec03 .sikichiBox .sikichi {
	width: 85%;
	max-width: 1015px;
	margin-left: 15%;
}
#sec03 .sikichiBox .plot {
	position: absolute;
	width: 18%;
	left: 0;
	top:50%;
	transform: translateY(-50%);
}

#sec04 {
	background-color: #bcceca;
	padding: 3% 0 4%;
}
#sec04 h3 {
	font-size: 24px;
	padding-bottom: 1em;
}
#sec04 .itemBox {
	width: 25%;
	padding: 0 2%;
	border-right: #647f6b solid 1px;
	container-type: inline-size;
}
#sec04 .itemBox:nth-child(1) {
	border-left: #647f6b solid 1px;
}
#sec04 .itemBox .imgBox {}
#sec04 .itemBox dl {}
#sec04 .itemBox dt {
	font-size: 6.8cqw;
	padding: 1em 0 0.5em;
}
#sec04 .itemBox dd {
	font-size: 5.6cqw;
	text-align: justify;
}

@media screen and (max-width: 959px) {
	.sec .engTxt {
		font-size:20px!important;
	}
	.sec h2,.sec h3 {
		font-size:20px!important;
	}
	.sec h4 {
		font-size:16px!important;
	}
	.sec .lead {
		font-size:13px!important;
		letter-spacing: 0em;
	}
	#sec01 .h2Box h2 {
    font-size: clamp(13px, 6.8cqw, 46px)!important;
    color: #000;
    line-height: 2;
	}
	#sec02 #parking {
		max-width: 500px;
		padding: 0;
		
	}
	#sec02 #parking .leftBox {
		width: 50%;
		position: relative;
	}
	#sec02 #parking .leftBox .car {
		position: absolute;
		width: 90%;
		left: -1px;
		top: 50%;
		transform: translateY(-50%);
	}
	#sec02 #parking .leftBox .kyaku {
		width: 40%;
	}

	#sec02 #parking .centerBox {
		width: 50%;
		padding-right: 30px;
		padding-top: 20px;
	}
	#sec02 #parking .rightBox {
		width: 100%;
		padding: 20px;
	}
	#sec02 #parking .rightBox dt {
		font-size: 4.2cqw;
	}
	#sec02 #parking .rightBox dd {
		font-size: 3.0cqw;
		letter-spacing: 0em;
	}
	#sec02 #parking .rightBox dd .cap {
		font-size: 75%;
	}
	#sec04 .flex-container {
	max-width: 600px;
		gap:20px 0;
	}
	#sec04 h3 {
		text-align: center;
	}
	#sec04 .itemBox {
    width: 50%;
    padding: 0 5%;
}
	#sec04 .itemBox:nth-child(3) {
		border-left: #647f6b solid 1px;
	}
	
}

@media screen and (max-width: 599px) {
	.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 h4 {
		font-size: clamp(13px, 3.7vw, 15px)!important;
		letter-spacing: 0em;
	}

	.sec .lead br {
		display: none !important;
	}
	#sec01 {
		
	}
	#sec01 .imgBox {
		height: calc(100vh - 50px);
		min-height: calc(100vh - 50px);
	}
	#sec01 .imgBox img {
		width:100%;
	height:100%;
	object-fit:cover;
	}
	#sec01 .h2Box {
    width: 80%;
    top: 12%;
    right: 15%;
	}
	#sec01 .h2Box h2 {
		color: #fff;
		font-size: clamp(13px, 5.8cqw, 26px) !important;
	}
	#sec02 .h3Box {
    padding-top: 30px;
    letter-spacing: 0em;
		width: 90%;
	}
	#sec02 #parking .rightBox dt {
		font-size: 4.8cqw;
	}
	#sec02 #parking .rightBox dd {
		font-size: 4.0cqw;
		letter-spacing: 0em;
	}
	    #sec02 #parking {
				margin-top: 10px;
    }
	#sec03 .sikichiBox .sikichi {
    width: 100%;
    margin-left: 0%;
	}
	#sec03 .sikichiBox .plot {
    position: static;
    width: 100%;

    transform: translateY(0%);
	}
	#sec04 {
    padding: 30px;
}
	#sec04 .itemBox {
		width: 100%;
		border: #647f6b solid 1px;
		padding: 30px;
		background-color: rgba(255,255,255,0.5);
	}

}