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

body:before {
     /*opacity: 0; */
}
.notes-area {
    margin: 0 auto 0;
}

#pageWrap {
	background-color: rgba(215,183,130,0.5);
	padding: 0;
	text-align: left;
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#pageWrap .boxWidth {
	max-width: 1000px;
	container-type: inline-size;
}

.btns {
	padding: 5% 0 8%;
}
.btns li {
	width: 32%;
	container-type: inline-size;
}
.btns li a {
	font-size: 5cqw;
	line-height: 1.4;
	text-align: center;
	display: flex;
justify-content: center;
align-items: center;
	height: 4.5em;
	background-color: #888888;
	color: #fff;
	position: relative;
}
.btns li a::before {
	content: "";
	position: absolute;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	left: 3px;
	top:3px;
	border: #fff solid 2px;
	pointer-events: none;
}
.btns li a:hover,
.btns01 li:nth-child(1) a,
.btns02 li:nth-child(2) a,
.btns03 li:nth-child(3) a {
	background-color: #4d7535;
	opacity: 1!important;
}
.btns li a:hover::after,
.btns01 li:nth-child(1) a::after,
.btns02 li:nth-child(2) a::after,
.btns03 li:nth-child(3) a::after {
	content: "▼";
	position: absolute;
	font-size: 1em;
	left: calc(50% - 0.5em);
	top: 100%;
	color: #4d7535;
}

#pageTit {
	background-color: #c6bf8a;
	color: #000;
	padding: 0.5em;
}


.h4Box {
	position: relative;
}
.h4Box span {
	display: inline-block;
	width: 4.6cqw;
	margin-right: 1em;
}
.h4Box h4 {
	font-family: 'YakuHanMP','Noto Serif JP', serif;
	display: inline-block;
	font-size: 3cqw;
	position: relative;
	top: -0.1em;
}
.h4Box::after {
	
	position: absolute;
	content: "";
	display: block;
	background-color: #000;
	width: 100%;
	height: 3px;
	left: 0;
	bottom: 5px;
}
p.lead {
	padding: 1em 0;
	font-size: 2.2cqw;
}
.uLine {
	font-weight: 500;
	position: relative;
	background: #FCCF00;
background: linear-gradient(0deg,rgba(252, 207, 0, 1) 30%, rgba(252, 207, 0, 0) 30%);
	background-size: 0%;
	background-repeat: no-repeat;

}
.active .uLine {
	background-size: 100%;
	transition: 0.6s ease-out 1s;
}

#sec01 .point02 {
	padding: 5% 0;
}
#sec01 .point02 .flex {
	align-items: flex-end;
}
#sec01 .point02 .flex .img01,
#sec01 .point02 .flex .img03{
	width: 37%;
}
#sec01 .point02 .flex .img02 {
	width: 23%;
}

#sec02 {}
#sec02 .point01 {
	padding-bottom: 5%;
}
#sec02 .point01 .h4-01 .fig {
	margin-left: 10px;
	display: inline-block;
}
#sec02 .point01 ol {
	margin-left: 6%;
}
#sec02 .point01 ol li {
	list-style: none;
	font-size: 2.3cqw;
	padding: 0.5em 0;
	position: relative;
	padding-left: 1%;
}
#sec02 .point01 ol li::before {
	content: "";
	position: absolute;
	right: 100%;
	width: 6%;
	height: 100%;
	background-image: url("../images/num01.svg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}
#sec02 .point01 ol li:nth-of-type(2)::before {
	background-image: url("../images/num02.svg");
}
#sec02 .point01 ol li:nth-of-type(3)::before {
	background-image: url("../images/num03.svg");
}
#sec02 .point01 ol li:nth-of-type(4)::before {
	background-image: url("../images/num04.svg");
}
#sec02 .point01 ol li:nth-of-type(5)::before {
	background-image: url("../images/num05.svg");
}
#sec02 .point01 ol li:nth-of-type(6)::before {
	background-image: url("../images/num06.svg");
}
#sec02 .point01 .img01 {
	position: relative;
}
#sec02 .point01 .img01 .fig02-2 {
	position: absolute;
	width: 11%;
	right: -3%;
	bottom: 103%;
}
#sec02 .point01 .flex {
	padding-top: 5%;
}
#sec02 .point01 .flex .txtBox {
	width: 40%;
	background-image: url("../images/line.svg");
	background-position: left top;
	background-size: 8px;
	background-repeat: repeat-y;
	padding-left: 1em;
	font-size: 1.7cqw;
}
#sec02 .point01 .flex .txtBox p {
	margin-left: 1em;
	
}
#sec02 .point01 .flex .txtBox .eki {
	float: left;
	width: 15%;
	margin-right: 1em;
}
#sec02 .point01 .flex .imgBox {
	width: 58%;
}
#sec02 .point02 {
	padding-bottom: 5%;
}
#sec02 .point02 .flex {}
#sec02 .point02 .flex .imgBox {
	width: 48%;
}
#sec02 .point02 .flex .figBox {
	width: 49%;
}
#sec02 .point03 {
	padding-bottom: 5%;
}
#sec02 .point03 .flex {
	padding: 20px 0 0;
}
#sec02 .point03 .flex .txtBox {
	width: 50%;
}
#sec02 .point03 .flex .imgBox {
	width: 46%;
}

#sec03 {
	padding-bottom: 5%;
}
#sec03 .point01 {}
#sec03 .point01 .flex {
	padding-bottom: 5%; 
}
#sec03 .point01 .flex .fig01 {
	width: 45%;
}
#sec03 .point01 .flex .fig02 {
	width: 49%;
}
#sec03 .point02 {
	padding-bottom: 5%;
}
#sec03 .point02 h4 {}
#sec03 .point02 h4::after {
	content: "";
	display: inline-block;
	width: 3.6em;
	height: 50px;
	background-image: url("../images/fig03-3.svg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100%;
	transform: translate(-78%,-66%);
}
#sec03 .point02 .lead {
	padding-left: 15%;
}
#sec03 .point02 .flex {
	padding-top: 2%;
}
#sec03 .point02 .flex .fig01 {
	position: relative;
	width: 48%;
}
#sec03 .point02 .flex .fig01 .kiku {
	position: absolute;
	width: 25%;
	left: -3%;
	bottom: 96%;
	
}
#sec03 .point02 .flex .fig02 {
	width: 46%;
}

#sec03 .point02 p.cap {
	font-size: 15px;
	padding-top: 1em;
}
#sec03 .point03 .flex {

}
#sec03 .point03 .flex .fig01 {
	width: 53%;
}
#sec03 .point03 .flex .fig02 {
	width: 45%;
}
#sec03 .point03 .flex .fig02 .lead {
	font-size: 2cqw;
	line-height: 1.5;
	padding: 0 0 0.4em;
}
.capR {
	text-align: right;
}
#sec03 .point04 {
	padding-bottom: 3%;
	padding-top: 6%;
}
#sec03 .point04 .flex {
	max-width: 840px;
	margin: 0 auto;
	padding-bottom: 3%;
}
#sec03 .point04 .flex h5 {
	width: 100%;
	padding-bottom: 20px;
}
#sec03 .point04 .flex dl {
	width: 46%;
	container-type: inline-size;
}
#sec03 .point04 .flex dd {
	font-size: 3.9cqw;
}
#sec03 .point04 .sisan {
		max-width: 840px;
	margin: 0 auto;
	background-color: #fff;
	padding-bottom: 30px;
}
#sec03 .point04 .sisan dl {
	padding: 0 30px 20px;
	container-type: inline-size;
}
#sec03 .point04 .sisan dt {
	font-size: 2.6cqw;
	font-weight: 500;
	background-image: url("../images/boder.svg");
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 5%;
	padding-bottom: 0.3em;
}
#sec03 .point04 .sisan dd {
	font-size: 2cqw;
	padding: 0.3 0 2em 0;
}


@media screen and (max-width: 959px) {}
@media screen and (max-width: 599px) {
	#pageWrap .boxWidth {
		width: 90%;
	}
	#pageTit h2 {
        font-size: 4.8vw;
        font-size: clamp(14px, 4.0vw, 19px);
    }
	.btns li {
		width: 33%;
	}
	.btns li a {
    font-size: 9cqw;
    line-height: 1.3;
    height: 6em;
	}
	.btns li a::before {
    border: #fff solid 1px;
	}
	.h4Box span {
		width: 8cqw;
	}
	.h4Box h4 {
		font-family: 'YakuHanMP','Noto Serif JP', serif;
		display: inline-block;
		font-size: 5.2cqw;
		position: relative;
		top: -0.1em;
	}
	.h4Box::after {
		height: 3px;
		left: 0;
		bottom: 0px;
	}
	p.lead {
    padding: 1em 0;
    font-size: 4.2cqw;
	}
	#sec01 .point02 .flex .img01,
	#sec01 .point02 .flex .img03{
		width: 80%;
		margin: 0 auto;
	}
	#sec01 .point02 .flex .img02 {
		width: 70%;
		margin: 0 auto 20px;
}
	#sec02 .point01 ol li {
		font-size: 4.2cqw;
		width: 95%;
		margin-left: 5%;
	}
	#sec02 .point01 ol li br {
		display: none;
	}
	#sec02 .point01 ol li::before {
	width: 12%;
	}
	#sec02 .point01 .flex .txtBox {
		width: 100%;
		background-image: url("../images/line.svg");
		background-position: left top;
		background-size: 8px;
		background-repeat: repeat-y;
		padding-left: 1em;
		font-size: 4.2cqw;
		padding-bottom: 1em;

	}
	#sec02 .point01 .flex .txtBox .eki {
		float: left;
		width: 15%;
		margin-right: 1em;
	}
	#sec02 .point01 .flex .imgBox {
		width: 100%;
	}
	#sec02 .point02 .flex .imgBox {
		width: 100%;
	}
	#sec02 .point02 .flex .figBox {
		width: 100%;
		padding-top: 10px;
	}
	#sec02 .point03 .flex .txtBox {
		width: 100%;
	}
	#sec02 .point03 .flex .imgBox {
		width: 100%;
	}
	#sec02 .point03 .flex {
		padding: 0px 0 0;
	}
	#sec03 .point01 .flex .fig01 {
		width: 100%;
	}
	#sec03 .point01 .flex .fig02 {
		width: 100%;
	}
	#sec03 .point02 h4::after {
position: absolute;
		width: 3.6em;
		height: 50px;
		right: -4%;
		bottom: 100%;

		transform: translate(0%,0%);
	}
	#sec03 .point02 .lead {
		padding-left: 0;
	}
	#sec03 .point02 .flex .fig01 {
		position: relative;
		width: 100%;
		margin-top: 8%;
		padding: 5%;
	}
	#sec03 .point02 .flex .fig01 .kiku {
		position: absolute;
		width: 23%;
		left: -1%;
		bottom: 90%;

	}
	#sec03 .point02 .flex .fig02 {
		width: 100%;
	}
	#sec03 .point02 p.cap {
	font-size: 3.8cqw;
	}
	#sec03 .point03 .flex .fig01 {
		width: 100%;
		padding-top: 3%;
	}
	#sec03 .point03 .flex .fig02 {
		width: 100%;
	}
	#sec03 .point03 .flex .fig02 .lead {
		font-size: 4.4cqw;
		line-height: 1.6;
		padding: 1em 0;
	}
	#sec03 .point04 {
		padding-top: 6%;
	}
	#sec03 .point04 .flex dl {
	width: 100%;
		padding-bottom: 3%;
	}
	#sec03 .point04 .sisan dl {
	padding: 0 15px 15px;
	}
	#sec03 .point04 .sisan dt {
		font-size: 5cqw;
	}
	#sec03 .point04 .sisan dd {
		font-size: 4.4cqw;
		padding: 0.3 0 2em 0;
	}
	
}