@charset "UTF-8";
/* CSS Document */
#pageWrap {
    padding: 0 0;
}
#pageTit h2 {
	letter-spacing: 0.1em;
    }
#mainWrap {
	position: relative;
}
#mainWrap .h2Box {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 50%;
	color: #fff;
	transform: translate(-50%,-50%);
}
#mainWrap .h2Box h2 {
	text-align: center;
	font-size: clamp(20px, 4cqw, 48px);
	padding-bottom: 0.6em;
}
#mainWrap .h2Box .lead {
	text-align: center;
	font-size: 24px;
	font-size: clamp(13px, 2cqw, 24px);
	letter-spacing: 0.1em;
}
.bgBox {
	background-color: #eeeeef;
	position: relative;
}
.bgBox::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/bg-01.png"),url("../images/bg-02.png");
	background-position: right top,left bottom;
	background-repeat:no-repeat,no-repeat;
	background-size: 60%,60%;
}
.boxWidth {
	max-width: 1000px;
	container-type: inline-size;
}
#sec01 {
	padding: 6% 0 3%;
}
#sec01 h3 {
	width: 100%;
	font-size: 30px;
	font-size: clamp(20px, 4cqw, 30px);
	
	position: relative;
	background-image: url("../images/kei.svg"),url("../images/kei02.svg");
	background-position: left top,left bottom;
	background-size: 100%,100%;
	background-repeat: no-repeat,no-repeat;
	padding: 2em 0;
}
 {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 100%;
	background-image: url("../images/kei.svg");
	background-position: left top;
	background-size: 100%;
	background-repeat: no-repeat;
}
#sec01 h3::after {
	bottom: auto;
	top: 100%;
}
#sec01 h4 {
	position: relative;
	z-index: 2;
	margin-top: 50px;
	font-size: clamp(13px, 1.7cqw, 16px);
	font-size: 3.5cqw;
	background-color: #ded8ac;
	padding: 0.2em 0;
	box-shadow: 2px 4px 6px rgba(0,0,0,0.7);
	text-align: left;
	padding-left: 4em;
	
}
#sec01 h4::before {
	position: absolute;
	content: "　";
	width: 3.5em;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #475a9f;
	background-image: url("../images/num-01.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
}
#sec01 .h4-02::before {
	background-image: url("../images/num-02.svg")
}
#sec01 .h4-03::before {
	background-image: url("../images/num-03.svg")
}
#sec01 .h4-04::before {
	background-image: url("../images/num-04.svg")
}
#sec01 .h4-05::before {
	background-image: url("../images/num-05.svg")
}
#sec01 .h4-06::before {
	background-image: url("../images/num-06.svg")
}
#sec01 h4 span {
	font-size: 50%;
	margin-left: 1em;
}
#sec01 .flex {
	margin-top: 50px;
}
#sec01 .flex dl {
	width: 38%;
	container-type: inline-size;
}
#sec01 .flex dt {
	font-size: 8cqw;
	text-align: left;
}
#sec01 .flex dd {
	font-size: 5cqw;
	text-align: left;
	padding-top: 1em;
}
#sec01 .flex .imgWrap {
	width: 60%;
	align-items: center;
}
#sec01 .flex .imgWrap .imgBox {
	width: calc(50% - 25px);
	position: relative;
}
#sec01 .flex .imgWrap .imgBox p {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 16px;
	left: 0%;
	top: 100%;
	color: #41538f;
}
#sec01 .flex .imgWrap .img02 p {
	color: #b90007;
}
#sec01 .flex .imgWrap .sankaku {
	width: 30px;
	height: 30px;
	border-left: #767575 solid 30px;
	border-top: transparent solid 15px;
	border-bottom: transparent solid 15px;
}
#sec01 .captionBox {
	padding-top: 8%;
}

#sec02 {
	background-color: #475a9f;
	padding: 3% 0;
}
#sec02 h4 {
	color: #fff;
	font-size: 28px;
	font-size: clamp(16px, 3cqw, 28px);
	letter-spacing: 0.1em;
	text-align: center;
}

@media screen and (max-width: 959px) {}

@media screen and (max-width: 599px) {
	#mainWrap .h2Box .lead {
		letter-spacing: 0em;
	}
	#sec01 h4 {
		font-size: 5.7cqw;
		line-height: 1.4;
		padding: 0.4em 0;
		padding-left: 3.5em;

	}
	#sec01 h4::before {
		width: 3em;
	}
		
	#sec01 h4 span {
		font-size: 70%;
		letter-spacing: 0;
		display: block;
		margin-left: 0;
	}
	#sec02 {
    padding: 6% 0;
}
	#sec01 .flex {
		width: 90%;
		margin: 30px auto;
	}
	#sec01 .flex dt {
    font-size: 7.4cqw;
    text-align: center;
	}
	#sec01 .flex dd {
		font-size: clamp(13px, 1.7cqw, 15px);
		padding-bottom: 1em;
	}
	#sec01 .flex dl, #sec01 .flex .imgWrap{
		width: 100%;
	}

	#sec01 .flex .imgWrap .imgBox {
		width: 100%;
		position: relative;
	}
	#sec01 .flex .imgWrap .imgBox p {
		position: absolute;
		width: 100%;
		text-align: center;
		font-size: 16px;
		left: 0%;
		top: 100%;
		color: #41538f;
	}
	#sec01 .flex .imgWrap .img02 p {
		color: #b90007;
	}
	#sec01 .flex .imgWrap .sankaku {
		width: 30px;
		height: 30px;
		margin: 30px auto 15px;
		transform: rotateZ(90deg) scale(0.8);
	}
	
}