@charset "UTF-8";
/* CSS Document */
#pageWrap {
    padding:  0;
}
#bgWrap {
	background-color: #000;
}
#secMain {
	background-image: url("../images/main_bg.jpg");
	background-position: center center;
	background-size: cover;
}
.sec {
	background: #FFF;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(234, 229, 211, 1) 100%);
	position: relative;
	margin-bottom: 5%;
	padding: 50px 0;
}
.sec h3 {
	position: absolute;
	left: 0;
	top: 0;
	width: 40%;
	max-width: 373px;
	transform: translate(-7%,-45%);
}
.sec .flex {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	align-items: center;
	container-type: inline-size;
}
.sec dl {}
.sec dt {
	text-align: left;
	color: #730027;
	font-size: 3.2cqw;
	line-height: 1.5;
	padding-bottom: 1em;
}
.sec dd {
	text-align: justify;
	font-size: clamp(13px, 1.7cqw, 16px);
}
#sec01 {}
#sec01 .flex dl {
	width: 45%;
}
#sec01 .flex .imgBox {
	width: 50%;
	position: relative;
}
#sec01 .flex .imgBox p {
	position: absolute;
	font-size: 10px;
	text-align: right;
	top: 102%;
	right: 0;
}
#sec02 .flex dl {
	width: 41%;
}
#sec02 .flex .imgBox {
	width: 54%;
	mix-blend-mode: multiply;
}
#sec02 .flex .imgBox img {
}
#sec02 .img02 {
	width: 100%;
	
}
#sec02 .viewWrap {
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
#sec02 .viewWrap p {
	position: absolute;
	left: 0;
	top: 0;
	line-height: 2em;
	height: 2em;
	padding: 0 2em;
	background-color: #9D0002;
	color: #fff;
	font-size: 20px;
}

#sec03 .txtBox {
	width: 90%;
	max-width: 820px;
	margin: 0 auto;
}
#sec03 .txtBox dt {
	padding-bottom: 10px;
}
#sec03 .flex {
	padding-top: 30px;
}
#sec03 .flex .leftBox {
	width: 45%;
}
#sec03 .flex .rightBox {
	width: 52%;
}

#sec04 .flex {
	align-items: flex-end;
}
#sec04  .imgBox {
	position: relative;
}
#sec04  .imgBox p {
	position: absolute;
	width: 12em;
	left: 0;
	bottom: 0;
	background: #000;
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	padding: 0.3em 1.0em;
	text-align: left;
}
#sec04  .imgBox .min {
	position: absolute;
	width: 30%;
	right: 0;
	top: 0;
	transform: translate(15%, -24%);
}
#sec04 .flex .leftBox {
	width: 62%;
}
#sec04 .flex .leftBox dt {
	padding: 0.8em 0 0;
}
#sec04 .flex .leftBox dd {
	padding: 1em 0 2em 0;
}
#sec04 .flex .leftBox .imgBox {
	width: 48%;
}
#sec04 .flex .rightBox {
	width: 34%;
}

#sec05 {
	background-image: url("../images/bg05_1.jpg");
	background-position: center center;
	background-size: cover;
	padding: 5% 0;
}
#sec05 > div {
	background-color: rgba(255,255,255,0.7);
	padding: 30px 0;
	container-type: inline-size;
}
#sec05 h3 {
	font-size: clamp(15px, 2.8cqw, 36px);
	border-bottom: #000 solid 1px;
	display: inline-block;
	width: 66%;
	padding-bottom: 0.3em;

}
#sec05 p {
	font-size: clamp(13px, 1.8cqw, 20px);
padding: 1em 0;
}
#sec05 .mark {
	width: 25%;
	max-width: 164px;
	margin: 0 auto;
}

@media screen and (max-width: 599px){
	.sec {
		margin-bottom: 8%;
		padding-bottom: 30px;
	}
	.sec h3 {
		width: 70%;
		transform: translate(-2%,-45%);
	}
	.sec dt {
		text-align: center;
		font-size: 6.2cqw;
	}
	.sec dd,#sec03 dd {
		text-align: justify;
		font-size: 4.0cqw;
	}
	#sec01 {}
	#sec01 .flex dl,
	#sec02 .flex dl {
		width: 100%;
		padding-bottom: 20px;
	}
	#sec01 .flex .imgBox,
	#sec02 .flex .imgBox {
		width: 100%;
	}
	#sec02 .viewWrap p {
		font-size: 4vw;
	}
	#sec02 .img02 img {
		width: 250%;
	}
	#sec03 .txtBox {
		container-type: inline-size;
	}
	#sec03 .txtBox dt {
		width: 85%;
		margin: 0 auto;
	}
	#sec03 .flex {
		padding-top: 0;
	}
	#sec03 .flex .leftBox,
	#sec03 .flex .rightBox {
		width: 100%;
		padding: 10px 0;
	}
	#sec04 .flex .leftBox,
	#sec04 .flex .rightBox {
		width: 100%;
	}

	#sec04 .flex .leftBox .imgBox,
	#sec04 .flex .rightBox .imgBox {
		width: 80%;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	#sec05 {
		padding: 10% 5%;
	}
	#sec05 h3 {
	font-size: 6.2cqw;
		width: 90%;
		line-height: 1.4;
		letter-spacing: 0.1em;

}
#sec05 p {
	font-size: clamp(13px, 1.8cqw, 20px);
	font-size: 4.4cqw;
	line-height: 2;
padding: 1em ;
}
.scroll-hint-icon {
    left: calc(120% - 60px)!important;
	opacity: 0.8!important;
	}
	#sec02:hover .scroll-hint-icon {
		opacity: 0!important;
		transition: 0.6s;
	}
	

}