@charset "UTF-8";
/* CSS Document */
.notes-area {
    margin: 0% auto 0;
}
#contentWrap {
	background-color: #edeae8;
	color: #000;
}
h3.h3-01 {
	color: #706b42;
	border-bottom: #847f4d solid 1px;
	}
#sec01 {
	padding-bottom: 3%;
	border-bottom: #777 solid 1px;
}
#sec01 .h3-02 {
	font-size: 18px;
	padding: 1em 0;
}
#sec01 .flex {
}
#sec01 .flex .box01 {
	width: 30%;
}
#sec01 .flex .box01 .itemBox {
	flex-direction: row-reverse;
	align-items: flex-start;
	margin-bottom: 20px;
}
#sec01 .flex .box01 .itemBox .imgBox {
	width: 34%;
	max-width: 124px;
}
#sec01 .flex .box01 .itemBox p {
	width: 62%;
	line-height: 1.4;
	font-size: 13px;
}
#sec01 .flex .box02 {
	width: 27%;
}
#sec01 .flex .box02 .itemBox {}
#sec01 .flex .box02 .item01 {
	margin-bottom: 20px;
}
#sec01 .flex .box02 .itemBox .imgBox {
	width: 57%;
	max-width: 180px;
}
#sec01 .flex .box02 .itemBox p {
	width: 40%;
	line-height: 1.4;
	font-size: 13px;
}
#sec01 .flex .box03,#sec01 .flex .box04 {
	width: 18%;
	background-color: #fff;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	padding: 10px 20px;
}
#sec01 dt,#sec02 dt {
	text-align: center;
	padding: 0.3em 0;
	border-bottom: #777 solid 1px;
	font-size: 14px;
}
#sec01 .flex .box03 dd,#sec01 .flex .box04 dd {
	line-height: 1.4;
	padding-top: 0.5em;
}


#sec02 {
	padding: 3% 0 0;
}
#sec02 .itemBox {
	width: 30%;
	align-items: center;
}
#sec02 .itemBox .imgBox {
	width: 55%;
	max-width: 200px;
}
#sec02 .itemBox dl {
	width: 42%;
}
#sec02 .itemBox dt {
	font-size: 1.2vw;
		font-size: clamp(12px, 1.2vw, 14px);
}
#sec02 .itemBox dd {
}
#sec02 .lineBox {
	width: 1px;
	background-color: #777;
}



@media screen and (max-width: 959px){
	#sec01 .flex {
		max-width: 660px;
		margin: 0 auto;
	}
	#sec01 .flex .box01 {
		width: 48%;
	}
	#sec01 .flex .box02 {
		width: 48%;
	}
	#sec01 .flex .box03,#sec01 .flex .box04 {
		width: 48%;
		margin-top: 30px;
	}
	#sec02 {
		max-width: 660px;
	}
	#sec02 .itemBox .imgBox {
		width: 100%;
		max-width: 200px;
		margin: 0 auto;
	}
	#sec02 .itemBox dl {
		width: 100%;
	}
	#sec02 .itemBox dt {
	font-size: 14px;
}

	
}

@media screen and (max-width: 599px){
	#sec01 .h3-02 {
		 font-size: 16px;
    font-size: clamp(15px, 2.1vw, 17px);
		text-align: center;
		width: 100%;
	}
	#sec01 ,#sec02 {
		max-width: 350px;
	} 
	#sec01 .flex .box01 .itemBox .imgBox {
		width: 50%;
		margin: 0 auto;
	}
	
	#sec01 .flex .box01 .itemBox p {
		width: 100%;
	}
	#sec01 .flex .box01,#sec01 .flex .box02,
	#sec01 .flex .box03,#sec01 .flex .box04
	{
		width: 94%;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	#sec02 .itemBox {
		width: 90%;
		margin: 0 auto;
		margin-top: 30px;
	}
	#sec02 .lineBox {
		display: none;
	}
	

}