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

#contentWrap {

}
#contentWrap p,#contentWrap dd {
	font-size: 13px;
}

.secWrap {
	background-color: #fff;
	box-shadow: 2px 6px 6px rgba(0,0,0,0.2);
	padding: 30px;
	margin-bottom: 0px;
	position: relative;
	z-index: 1;
}
.secWrap > div, .secWrap > section {
	width: 94%;
	max-width: 1000px;
	margin: 0% auto;
}

.pTitBox {
	position: relative;
	
}
.pTitBox .pTit {
	position: absolute;
	width: 90%;
	max-width: 600px;
	text-align: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	container-type: inline-size;
}
.pTitBox .pTit h3 {
	width: 40%;
	margin: 0 auto;
}
.pTitBox .pTit dt {
	padding: 0.6em 0 0.3em;
	font-size: 3.6cqw!important;
	line-height: 1.5;
}
.pTitBox .pTit dd {
}
#sec01 {
	background-color: #f6f8d9;
}
#sec01 .sec01Box {
	width: 90%;
	max-width: 650px;
	margin: 0 auto;
	padding: 30px 0;
	container-type: inline-size;
}
#sec01 .h3Box {}
#sec01 .h3Box h3 {
	text-align: center;
	font-size: 3.8cqw;
	letter-spacing: 0.1em;
	position: relative;
	&::before,&::after {
		content: "";
		position: absolute;
		width: 18cqw;
		height: 1px;
		background-color: #000;
		left: 0;
		top: 50%;
	}
	&::after {
		left: auto;
		right: 0;
	}
}
#sec01 .h3Box .lead {
	font-size: 2.4cqw;
	text-align: center;
	line-height: 1.4;
	padding: 0.5em 0;
}
#sec01 .h5-01 {
	padding: 1em 0 0.5em;
	font-size: 3.3cqw;
	text-align: center;
}
#sec01 .figBox {}
#sec01 .h5-02 {
	font-size: 3.0cqw;
	padding: 1em 0;
	text-align: center;
	font-weight: 400;
	span {
		display: block;
		font-size: 10px;
	}
}
#sec01 .h4-01 {
	font-size: 3.2cqw;
	padding: 0 0 1em 0;
	text-align: center;
	color: #730027;
}

#sec01 .wBox {
	background-image: url("../images/bg-w.jpg");
	background-position: center center;
	background-size: cover;
}
#sec01 .wBox h3 {
	padding: 15px;
	text-align: center;
	img {
		max-width: 450px;
	}
}
#sec01 .wBox .bgW {
	position: relative;
	padding: 30px;

}
#sec01 .wBox .bgW::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #c3e0b9;
	mix-blend-mode:screen;
	opacity: 0.9;

}
#sec01 .wBox .bgW .flex {
	position: relative;
	z-index: 1;
	max-width: 550px;
	margin: 0 auto;
}
#sec01 .wBox .bgW .flex dl {
	width: 57%;
	container-type: inline-size;
}
#sec01 .wBox .bgW .flex dt {
	font-size: clamp(14px, 5.0cqw, 18px);
}
#sec01 .wBox .bgW .flex dd {
	font-size: clamp(12px, 4.1cqw, 16px);
	padding-top: 1em;
	line-height: 1.7;
}
#sec01 .wBox .bgW .flex .figBox {
	width: 38%;
}
#sec01 .wBox .bgW .line {
	margin: 15px 0;
	width: 100%;
	height: 1px;
	background-color: #000;
}
#sec01 .wBox .bgW .flex01 dt {
	max-width: 280px;
}
#sec01 p.caption {
	font-size: 10px;
	line-height: 1.3;
	padding: 1em 0;
}
#sec01 .meritBox {
	padding: 5% 0;
}
#sec01 .meritBox .flex {
	margin-top: 30px;
}
#sec01 .meritBox .flex .item {
	width: 30%;
	border-radius: 100%;
	overflow: hidden;
	position: relative;
	container-type: inline-size;
}
#sec01 .meritBox .flex .item p {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	color: #fff;
	font-size: 11.6cqw;
	line-height: 1.4;
}

#sec02,#sec03,#sec04 {
	background-color: #f6f8d9;
	padding-top: 30px;
	
}
#sec02 .imgBox,#sec03 .imgBox,#sec04 .imgBox {
	position: relative;
	container-type: inline-size;
}
#sec02 .imgBox .en,#sec03 .imgBox .en,#sec04 .imgBox .en{
	position: absolute;
	width: 20cqw;
	height: 20cqw;
	border-radius: 100%;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	background-color: #a8d7ca;
	mix-blend-mode: multiply;
	
}
#sec03 .imgBox .en{
	background-color: #f8c170;
}
#sec04 .imgBox .en{
	background-color: #85b1df;
}
#sec02 .imgBox h3,#sec03 .imgBox h3,#sec04 .imgBox h3 {
	position: absolute;
	width: 20cqw;
	height: 20cqw;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
justify-content: center;
align-items: center;
	text-align: center;
	color: #fff;
	font-size: 2.0cqw;
	mix-blend-mode: normal;
}


#sec02 .dlWrap,#sec03 .dlWrap,#sec04 .dlWrap {
	background: #006A42;
background: linear-gradient(90deg, rgba(0, 106, 66, 1) 0%, rgba(0, 80, 46, 1) 100%);
	padding: 30px 0;
}
#sec02 dl,#sec03 dl,#sec04 dl {
	width: 90%;
	margin: 0 auto;
	max-width: 640px;
	container-type: inline-size;
}
#sec02 dt,#sec03 dt,#sec04 dt {
	color: #fff000;
	text-align: center;
	font-size: clamp(14px, 3.8cqw, 36px);
	border-bottom: rgba(255,255,255,0.5) solid 1px;
	padding-bottom: 0.5em;
}
#sec02 dd,#sec03 dd,#sec04 dd {
	font-size: clamp(12px, 2.2cqw, 16px);
	color: #fff;
	text-align: center;
	padding: 1em 0;
}
#sec03 .figBox,#sec04 .figBox {
	width: 90%;
	margin: 0 auto;
	max-width: 640px;
}
#sec04 .caption {
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding-top: 1em;
}

#sec05 {
	padding: 5% 0 30px 0;
	max-width: 640px;
}
#sec05 .flex01 {
	padding: 0;
}
#sec05 .flex01 .imgBox {
	width: 40%;
}
#sec05 .flex01 .rightBox {
	width: 54%;
}

#sec05 .flex01 dt {
	font-size: 18px;
	
}
#sec05 .flex01  dd {
	padding: 0.5em 0;
}
#sec05 .flex01 .rightBox .caption {
	font-size: 10px;
	line-height: 1.3;
	padding-top: 1em;
}
#sec05 .line {
	width: 100%;
	height: 1px;
	border-top: #000 dotted 1px;
	margin: 30px 0;
}
#sec05 .flex2 .flex {
	width: 100%;
	padding-top: 20px;
}
#sec05 .flex2 .flex .fig01 {
	width: 51%;
} 
#sec05 .flex2 .flex .fig02 {
	width: 45%;
} 



@media screen and (max-width: 959px){
	h3.h3-02 .jp {
    position: static;
		padding-top: 0.5em;
	}
	#sec01 .titBox h3 {
    font-size: 18px;
	}
	
	.secWrap > div, .secWrap > section {
		width: 100%;
	}
	.pTitBox {
		height: 27cqw;
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
	.flex01 .itemWrap, .flex02 {
		width: 100%;
		gap:0 0;
		justify-content:space-between;
	}


	
}

@media screen and (max-width: 599px){
	h3.h3-02,#sec01 {
		width: 100%;
		line-height: 1.4;
	}
	.secWrap {
    padding: 0;
		width: 100%;
	}
	.pTitBox {
		height: 66cqw;
	}
	.pTitBox .pTit h3 {
    width: 70%;
	}
	.pTitBox .pTit dt {
		font-size: clamp(13px, 5.6cqw, 18px)!important;
    line-height: 1.5;
	}
	#sec01 .h3Box h3 {
		font-size: 5.8cqw;
		font-size: clamp(13px, 5.8cqw, 18px);
		&::before,&::after {
			display: none;
		}
	}
	
	#sec01 .h3Box .lead {
    font-size: clamp(13px, 4.4cqw, 15px);
	}
	#sec01 .h5-01 {
    font-size: clamp(13px, 5.6cqw, 18px)
	}
	#sec01 .h5-02 {
    font-size: 5.2cqw;
		font-size: clamp(13px, 5.2cqw, 18px)
	}
	#sec01 .figBox {
		max-width: 350px;
		margin: 0 auto;
}
	#sec01 .h4-01 {
    font-size: 5.2cqw;
		font-size: clamp(13px, 5.2cqw, 18px)
	}
	#sec01 .wBox .bgW .flex dl {
		width: 100%;
		container-type: inline-size;
	}
	#sec01 .wBox .bgW .flex dt {
		font-size: clamp(14px, 5.0cqw, 18px);
	}
	#sec01 .wBox .bgW .flex dd {
		font-size: clamp(12px, 4.1cqw, 14px);
		text-align: center;
	}
	#sec01 .wBox .bgW .flex01 dt {
		margin: 0 auto;
	}
	#sec01 .wBox .bgW .flex .figBox {
		width: 80%;
		max-width: 300px;
		margin: 15px auto;
	}
	#sec01 .wBox .bgW {
		padding-bottom: 0;
		padding: 15px;
	}
	#sec01 .meritBox .flex {
		margin-top: 15px;
	}
	#sec01 .sec01Box,#sec01 .meritBox {
		padding-bottom: 0;
	}
	#sec02 .imgBox, #sec03 .imgBox, #sec04 .imgBox {
		height: 40cqw;
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
	#sec02 dd, #sec03 dd, #sec04 dd {
    font-size: clamp(12px, 3.2cqw, 14px);
    color: #fff;
    text-align: center;
    padding: 1em 0;
}
	#contentWrap p, #contentWrap dd {
		font-size: clamp(12px, 3.2cqw, 14px);
	}
	#sec02 .imgBox .en, #sec03 .imgBox .en, #sec04 .imgBox .en,
	#sec02 .imgBox h3, #sec03 .imgBox h3, #sec04 .imgBox h3 {
    width: 33cqw;
    height: 33cqw;
		font-size: 3.8cqw;
	}
	#sec04 .caption {
    font-size: 10px;
    text-align: justify;
		width: 90%;
		margin: 0 auto;
		line-height: 1.3;
}
	#sec05 {
		width: 90%;
		max-width: 350px;
	}
	#sec05 .flex01 .imgBox {
		width: 70%;
		margin: 15px auto;
	}
	#sec05 .flex01 .rightBox {
		width: 100%;
	}
	#sec05 .flex01 dt {
    font-size:4.2cqw;
		font-size: clamp(13px, 4.2cqw, 16px);
		text-align: center;
}
	#sec05 .flex2 .flex .fig01 {
		width: 100%;
	} 
	#sec05 .flex2 .flex .fig02 {
		width: 100%;
		margin-top: 30px;
	} 

	
}