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

#pageWrap {
    padding: 0px 0 0;
    /*font-family: 'YakuHanMP', 'Noto Serif JP', serif;*/
	text-align: left;
}
.notes-area {
    margin: 0 auto 0;
}
.boxWidth {
	max-width: 1000px;
	container-type: inline-size;
}
#sec01 {
	background-image: url("../images/bg-01.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-image: url("../images/bg-02.jpg");
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: 100%;
		mix-blend-mode:multiply;
		pointer-events: none;
	}
}
#sec01 .sikichi {
	padding-top: 4%;
}
#sec01 .figBox {
	position: absolute;
	width: 24%;
	left: 0%;
	bottom: 20%;
}
#sec01 .houi {
	position: absolute;
	width: 6%;
	right: 2%;
	bottom: 13%;
}
#sec01 .h2Box {
	position: absolute;
	width: 100%;
	left: 0;
	top: 5%;
	h2 {
		font-size: clamp(13px, 2.8cqw, 28px);
		font-weight: 400;
		letter-spacing: 0.1em;
		text-align: center;
	}
}


#sec02 {
	background-color: #572e32;
	padding: 30px;
	margin-top: 30px;
	box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
}
#sec02 .flex01 {}
#sec02 .flex01 .leftBox {
	width: 67%;
	border-top: #fff solid 1px;
	border-bottom: #fff solid 1px;
}
#sec02 .flex01 .leftBox h3 {
	padding: 10px 10%;
}
#sec02 .flex01 .imgBox {
	width: 30%;
	max-width: 280px;
}
#sec02 p {
	color: #fff;
	padding: 1em 0;
	font-size: 18px;
	text-align: center;
}
#sec02 .box02 {
	background-color: #fff;
}
#sec02 .box02 h4 {
	background: #E3D988;
background: radial-gradient(circle, rgba(227, 217, 136, 1) 0%, rgba(102, 94, 48, 1) 100%);
	width: 100%;
	font-size: 21px;
	padding: 0.2em;
	text-align: center;
}
#sec02 .box02 .flex02 {
	padding: 15px;
}
#sec02 .box02 .flex02 .imgBox {
	width: 24.2%;
	max-width: 220px;
}
#sec02 .box02 .flex02 .rightBox {
	width: 74%;
	container-type: inline-size;
	align-items: center;
}
#sec02 .box02 .flex02 .rightBox dl {
	position: relative;
	margin-left: 6cqw;
}
#sec02 .box02 .flex02 .rightBox .dl01,
#sec02 .box02 .flex02 .rightBox .dl03 {
	width: calc(55% - 6cqw);
}
#sec02 .box02 .flex02 .rightBox .dl02,
#sec02 .box02 .flex02 .rightBox .dl04 {
	width: calc(44% - 6cqw);
}
#sec02 .box02 .flex02 .rightBox dl::before {
	content: "1";
	position: absolute;
	right: 102%;
	background: radial-gradient(circle, rgba(227, 217, 136, 1) 0%, rgba(102, 94, 48, 1) 100%);
	color: #fff;
	font-size: 5cqw;
	line-height: 1;
	width: 5.8cqw;
	height: 5.8cqw;
	display: flex;
justify-content: center;
align-items: center;
}
#sec02 .box02 .flex02 .rightBox .dl02::before {
	content: "2";
}
#sec02 .box02 .flex02 .rightBox .dl03::before {
	content: "3";
}
#sec02 .box02 .flex02 .rightBox .dl04::before {
	content: "4";
}
#sec02 .box02 .flex02 .rightBox dt {
	text-align: left;
	font-size: 2.2cqw;
	line-height: 1.4;
}
#sec02 .box02 .flex02 .rightBox dd {
	text-align: left;
	font-size: 1.8cqw;
	line-height: 1.4;
}

#sec03 {
	padding: 0 0;
	background: #FFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%);
}
#sec03 .flex01 {
	padding: 5% 0;
}
#sec03 .flex01 .itemBox {
	width: 30%;
}
#sec03 .flex01 .item01 .imgBox.sanko::after {
content: "Tebraキー（参考写真）";
}
#sec03 .flex01 .itemBox dt {
	text-align: left;
	color: #1c6078;
	font-size: 18px;
	padding: 0.5em 0;
}
#sec03 .flex01 .itemBox dd {
	text-align: justify;
	font-size: 14px;
}
#sec03 .flex01 .itemBox dd .cap {
	font-size: 10px;
	display: block;
}
#sec03 .flex01 .item03 ul {
	border: #000 solid 1px;
	padding: 5px;
	line-height: 1.3;
	text-align: left;
}
#sec03 .flex01 .item03 li {
	display: inline-block;
	font-size: 11px;
}

#sec03 .box02 {
	background-color: #fff;
	box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
	padding: 30px;
}
#sec03 .box02 .flex {
	padding-bottom: 20px;
}
#sec03 .box02 .leftBox {
	width: 45%;
	container-type: inline-size;
}
#sec03 .box02 .leftBox h4 {
	text-align: center;
	font-size: 4.4cqw;
}
#sec03 .box02 .leftBox .flex01 {
	padding: 15px 0;
}
#sec03 .box02 .leftBox .flex01 .imgBox {
	width: 45%;
}
#sec03 .box02 .leftBox .flex01 h3 {
	width: 52%;
}
#sec03 .box02 .leftBox p {
	text-align: center;
	font-size: 3cqw;
}

#sec03 .box02 .rightBox {
	width: 52%;
}
#sec03 .box02 .rightBox .flex02 {
	padding-top: 10px;
}
#sec03 .box02 .rightBox .flex02 .leftBox {
	width: 67%;
	container-type: inline-size;

}
#sec03 .box02 .rightBox .flex02 .leftBox li {
	line-height: 1.3;
	font-size: 3.8cqw;
	padding: 0.3em 0;
	text-indent: -1em;
	padding-left: 1em;
	span {
		color: #409fbd;
	}
	
}
#sec03 .box02 .rightBox .flex02 .leftBox .caption {
	text-align: left;
	line-height: 1.4;
	padding-top: 1em;
	font-size: 10px;
}
#sec03 .box02 .rightBox .flex02 .rightBox {
	width: 30%;
}
#sec03 .box02 a {
	display: block;
	background-color: #409fbd;
	color: #fff;
	font-size: 16px;
	width: 20em;
	margin: 0 auto;
	line-height: 1.3;
	padding:0.5em 1em;
	text-align: center;
	border-radius: 7px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
	span {
		display: block;
		i {
			font-size: 60%;
			font-style: normal;
		}
	}
}
#sec03 .box02 a::after {
	content: "▼";
	display: inline-block;
	transform: rotateZ(-90deg);
	font-size: 70%;
	margin-left: 0.3em;
}

@media screen and (max-width: 959px){
	#sec03 .box02 {
		max-width: 600px;
	}
	#sec03 .box02 .leftBox {
		width: 100%;
		max-width: 460px;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	#sec03 .box02 .rightBox {
		width: 100%;
	}
}
@media screen and (max-width: 599px){
	#sec01 {
		
	}
	#sec01 .sikichi {
    padding-top: 17%;
		padding-bottom: 20%;
	}
	#sec01 .h2Box h2 {
		font-size: clamp(13px, 4.5cqw, 18px);
	}
	#sec01 .figBox {
		width: 44%;
		left: 3%;
		bottom: 3%;
	}
	#sec01 .houi {
		width: 10%;
		right: 2%;
		bottom: 3%;
	}
	#sec02 {
    padding: 20px;
    margin-top: 0px;
		width: 100%;
	}
	#sec03 .flex01 .itemBox dt {
		text-align: center;
	}
	#sec02 .flex01 .leftBox {
    width: 100%;
		padding: 5px 0;
	}
	#sec02 .flex01 .leftBox h3 {
    padding: 5px 5%;
	}
	#sec02 .flex01 .imgBox {
    width: 60%;
    max-width: 280px;
		margin: 20px auto 0;
}
	#sec02 p {
    font-size: 15px;
		text-align: center;
	}
	#sec02 .box02 {
		max-width: 400px;
		margin: 0 auto;
	}
	#sec02 .box02 .flex02 .imgBox {
    width: 70%;
    max-width: 300px;
		margin: 0 auto 20px;
	}
	#sec02 .box02 .flex02 .rightBox {
		width: 95%;
		margin-left: 5%;
	}
	#sec02 .box02 .flex02 .rightBox dl {
		width: 100%!important;
		padding: 0.5em 0;
		
	}
	#sec02 .box02 .flex02 .rightBox dt {
		font-size: 5.6cqw;
		font-size: clamp(13px, 5.6cqw, 18px);
		line-height: 1.3;
	}
	#sec02 .box02 .flex02 .rightBox dd {
		font-size: 4.7cqw;
		font-size: clamp(12px, 4.7cqw, 15px);
		line-height: 1.3;
		padding-top: 0.3em;
	}
	#sec02 .box02 .flex02 .rightBox dl::before {
    font-size: 7cqw;
    width: 10cqw;
    height: 10cqw;
}
	#sec03 .flex01 {
		padding: 5% 0;
		max-width: 350px;
	}
	#sec03 .flex01 .itemBox {
		width: 100%;
		padding: 15px 0;
	}
	#sec03 .flex01 .itemBox .imgBox {
		widows: 80%;
		max-width: 300px;
		margin: 0 auto;
	}
	#sec03 .box02 .leftBox p {
    text-align: center;
		font-size: clamp(11px, 4.6cqw, 14px);
	}
	#sec03 .box02 .rightBox .flex02 {
		padding-top: 10px;
		flex-direction: column-reverse;
	}
	#sec03 .box02 .rightBox .flex02 .leftBox {
		width: 100%;

	}
	#sec03 .box02 .rightBox .flex02 .rightBox {
    width: 60%;
		margin: 10px auto;
	}
	#sec03 .box02 .rightBox .flex02 .leftBox li {
		width: 100%!important;
		font-size: clamp(11px, 4.6cqw, 14px);
		br {
			display: none;
		}
	}


}