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

#contentWrap {

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

#sec01 {
	background-color: #fff;
	box-shadow: 2px 6px 6px rgba(0,0,0,0.2);
	padding: 30px;
	margin-bottom: 0px;
	position: relative;
	z-index: 1;
}
#sec01 .titBox {
	width: 100%;
	padding: 30px 0;
}
#sec01 .titBox .mark {
	width: 80%;
	max-width: 450px;
	margin: 0 auto;
}
#sec01 .titBox h3 {
	font-size: 21px;
	padding: 0.5em 0;
	width: 30em;
	text-align: center;
	margin: 0 auto;
	border-top: #14753a solid 1px;
}
#sec01 .flex {
	padding-bottom: 2%;
}
#sec01 .lineBox {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #999;
	margin: 30px 0;
}
#sec01 .flex > div {
	width: 48%;
	container-type: inline-size;
}
#sec01 h4 {
	background-color: #006934;
	color: #fff;
	letter-spacing: -0.03em;
	font-size: 3cqw;
	padding-left: 0.7em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 6cqw;
	position: relative;
	margin-bottom: 15px;
	span {
		position: absolute;
		width: calc(100% - 19em);
		top: 0;
		right: 0;
		background-color: #c79f62;
		font-size: 2.5cqw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 6cqw;
		&::after {
			content: "";
			position: absolute;
			right: 100%;
			top: 0;
			width: 4cqw;
			height: 6cqw;
			border-top: #c79f62 solid 3cqw;
			border-right: #c79f62 solid 2cqw;
			border-bottom: transparent solid 3cqw;
			border-left: transparent solid 2cqw;
		}
	}
}
#sec01 .flex p {
padding: 1em 0;
}
#sec01 .flex .leftBox .figBox {
	width: 70%;
}
#sec01 .flex .leftBox ul {
	display: flex;
	flex-wrap: wrap;
	width: 27%;
	container-type: inline-size;
	gap:5px 0;
	li {
		text-align: center;
		border: #006934 solid 1px;
		color: #006934;
		width: 100%;
		display: flex;
justify-content: center;
align-items: center;
		height: 3.5em;
		font-size: 8cqw;
	}
}

#sec01 .flex .rightBox .figBox {
	width: 100%;
	margin: 0 auto;
}
#sec01 .flex2 {}
#sec01 .h3-02 {
	text-align: center;
	padding-bottom: 1em;
	font-size: 21px;
}
#sec01 .flex2 {
	padding-bottom: 50px;
}
#sec01 .flex2 .leftBox {
	width: 42%;
	.figBox {
		width: 40%;
	}
	.txtBox {
		width: 57%;
		h5 {
			font-size: 15px;
		}
		p {
			padding: 0.5em 0;
			line-height: 1.3;
		}
		.caption {
			font-size: 10px;
			padding: 0.5em 0 0;
		}
	}
}
#sec01 .flex2 .dotline {
	width: 1px;
	border-left: #999 dotted 1px;
}
#sec01 .flex2 .rightBox {
	width: 54%;
	.txtBox {
		width: 30%;
		h5 {
			font-size: 15px;
			line-height: 1.3;
		}
		p {
			padding: 0.5em 0;
			line-height: 1.3;
		}
	}
	.fig01 {
		width: 35%;
	}
	.fig02 {
		width: 31%;
	}
		
}



#kanta {
	background-color: #efebe7;
	padding: 20px;
}
#kanta > .flex-container {
	max-width: 1000px;
	margin: 0 auto;
}
#kanta sup {
	position: relative;
	top: -0.3em;
}
#kanta .leftBox {
	width: 29%;
	h4 {
		background: none;
		height: auto;
		max-width: 200px;
		margin: 0 auto;
		padding: 0;
	}
	p {
		text-align: justify;
		padding: 1em 0;
	}
	.imgBox {
		
	}
}
#kanta .rightBox {
	gap:10px 0;
	width: 67%;
	.itemBox {
		width: 48%;
		h5 {
			background-color: #cab19a;
			color: #fff;
			text-align: center;
			font-size: 16px;
			padding: 0.2em;
		}
		p {
			line-height: 1.3;
			height: 3.3em;
			padding-top: 0.3em;
		}
		.figBox {
			background-color: #fff;
		}
		
	}
	.caption {
			font-size: 10px;
			line-height: 1.3;
		}
}



@media screen and (max-width: 959px){
	h3.h3-02 .jp {
    position: static;
		padding-top: 0.5em;
	}
	#sec01 .titBox h3 {
    font-size: 18px;
	}
	#sec01 .flex {
		max-width: 500px;
		margin: 0 auto;
	}
	#sec01 .flex > div {
		width: 100%;
		padding: 15px 0;
	}
	#sec01 .flex2 {
		max-width: 500px;
		margin: 0 auto;
		.leftBox {
			width: 100%;
			padding: 15px 0;
		}
		.dotLine {
			display: none;
		}
		.rightBox {
			width: 100%;
			padding: 15px 0;
			.txtBox {
				width: 100%;
				padding-bottom: 10px;
			}
			.fig01 {
				width: 50%;
			}
			.fig02 {
				width: 45%;
			}
		}
	}
	#kanta {
		max-width: 500px;
		margin: 0 auto;
	}
	#kanta .leftBox {
    width: 100%;
		padding-bottom: 15px;
		.imgBox {
			max-width: 300px;
			margin: 0 auto;
		}
	}
	#kanta .rightBox {
    width: 100%;
	}


	
}

@media screen and (max-width: 599px){
	h3.h3-02,#sec01 {
		width: 100%;
		line-height: 1.4;
	}
	#sec01 {
		padding: 15px;
		padding-bottom: 30px;
	}
	#sec01 .titBox h3 {
    font-size: 16px;
		width: 100%;
	}
	#sec01 h4 {
	letter-spacing: 0em;
	font-size: 4.6cqw;
	padding-left: 0em;
	display: block;
		text-align: center;
	height: auto;
		padding: 0.4em;
		
	span {
		position: static;
		width: 100%;
		font-size: 4.0cqw;
		display: flex;
		justify-content: center;
		align-items: center;
		height: auto;
		padding: 0.3em 0;
		margin-top: 0.2em;
		&::after {
			display: none;
		}
	}
}
	#sec01 .flex {
		max-width: 400px;
	}
	#sec01 .flex .leftBox .figBox {
    width: 100%;
		padding-bottom: 10px;
}
	#sec01 .flex .leftBox ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    container-type: inline-size;
    gap: 5px 2%;
		li {
			width: 49%;
			font-size: 3.6cqw;
		}
	}
	#sec01 .flex .rightBox .figBox {
		width: 80%;
		
	}
	#sec01 .lineBox {
    margin: 15px 0;
}
	#sec01 .flex2 {
		max-width: 400px;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	#sec01 .flex2 .leftBox {
		
    .figBox {
			width: 60%;
			max-width: 240px;
			margin: 0 auto;
    }
		.txtBox {
			width: 100%;
		}
	}
	 #sec01 .flex2 .rightBox {
		 .fig01 {
			 width: 100%;
			 padding: 15px 0;
		 }
		 .fig02 {
			 width: 100%;
		 }
	}
	#kanta {
		max-width: 400px;
	}
	#kanta .rightBox {
    .itemBox {
        width: 100%;
    }
}

	
}