@CHARSET "UTF-8";

/* -------------------------------------- */
/* 見出し/コンテナ (h5m-box01, h5m-box02) */
/* -------------------------------------- */
.h5m-box01{
	width:100%;
	padding:2.0em 0 1.0em;
	margin:4.0em 0 0;
}
.h5m-box01 div{
	width:90%;
	margin:0 auto;
	text-align:center;
}
.h5m-box01 p{
	color:#202020;
	text-align:center;
	font-size:1.5em;
	border-bottom:3px solid #202020;
	line-height:2.5em;
}
.h5m-box02{
	width:100%;
	margin:2.0em 0;
}
.h5m-box02 > div{
	width:90%;
	margin:0 auto 0;
	text-align:center;
}
.h5m-box03{
	margin:0.5em 0 0;
	font-size:1.3em;
}
.h5m-box02_txt{
	text-align:left;
	font-weight:300;
	margin:0 0 1.5em;
}

/* -------------------------------------- */
/* タイトル・テキストスタイル */
/* -------------------------------------- */
.h5m-ttl01{
	color:#FFFFFF;
	background-color:#019F5E;
	border-radius:5px;
	padding:0.3em 0;
	font-size:1.2em;
}
.h5m-ttl02{
	color:#FFFFFF;
	background-color:#9DC513;
	padding:0.3em 0;
	font-size:1.2em;
	width:95%;
	margin:0 auto;
}
.h5m-ttl03{
	border:2px solid #009944;
	border-radius:10px;
	color:#009944;
	font-size:1.4em;
	padding:0.4em 0 0.2em;
}
.h5m-box03 span{
	font-size:1.5em;
	color:#009944;
}
.h5m-txt01{
	margin:2.0em 0;
}
.back_yellow{
	background:linear-gradient(transparent 30%, #FFF951 30%);
	padding:0 1.0em;
}
.h5m-txt02{
	width:95%;
	margin:2.0em auto;
	padding:1.5em 1.0em;
	background-color:rgba(194, 241, 31, 0.23);
	text-align:left;
}

/* -------------------------------------- */
/* 画像・動画要素 */
/* -------------------------------------- */
.h5m-img01{
	width:90%;
	margin:1.0em 0;
}
.h5m-box05 video{
	width:100%;
}
.h5m-img02{
	margin:3.0em 0;
}
.h5m-img02 img{
	width:10%;
}
.h5m-img03{
	background-color:rgba(194, 241, 31, 0.23);
	padding:1.0em 1.0em;
}
.h5m-box06-ttl-img{
	width:90%;
	display:block;
	margin:0 auto -1.0em;
}

/* -------------------------------------- */
/* Flex/グリッドレイアウト */
/* -------------------------------------- */
.h5m-flex01, .h5m-flex02{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	width:95%;
	margin:1.5em auto;
	text-align:left;
	font-weight:300;
}
.h5m-flex01 div:nth-child(1){
	padding:0 1.0em 0 0;
	order:2;
}
.h5m-flex01 div:nth-child(2){
	order:1;
}
.h5m-flex02 div:nth-child(1){
	padding:0 0 0 1.0em;
	width:50%;
	order:2;
}
.h5m-flex02 div:nth-child(2){
	width:50%;
	order:1;
}
.h5m-flex03{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	width:95%;
	margin:1.5em auto;
}
.h5m-flex03 div{
	width:50%;
	padding:1.0em;
}

/* -------------------------------------- */
/* アコーディオン (acd-box) */
/* -------------------------------------- */
.acd-box{
	width:80%;
	margin:0.5em auto;
	border:2px solid #009944;
	border-radius:40px;
	background-color:#FFF;
	box-shadow:3px 4px 0 #009944;
}
.acd-check{
	display:none;
}
.acd-label{
	display:block;
	padding:1.0em 0 0;
	position:relative;
	cursor:pointer;
}
.acd-label span{
	color:#009944;
	background-color:#fff;
	padding:0.3em 1.2em 0.1em;
	border-radius:40px;
	font-size:3.5vw;
}
.acd-label:after{
	box-sizing:border-box;
	content:'\f055';
	display:block;
	color:#009944;
	transition:.5s;
	font-family:"Font Awesome 5 Free";
	height:100%;
	position:absolute;
	right:1.0em;
	top:1.0em;
	font-size:1.2em;
}
.acd-content{
	border-radius:40px;
	background-color:#fff;
	display:block;
	height:0;
	opacity:0;
	padding:0.5em;
	transition:.5s;
	visibility:hidden;
}
.acd-content p{
	width:60%;
	margin:0 auto;
}
.acd-content div{
	font-size:2.5vw;
	font-weight:300;
}
.acd-check:checked + .acd-label span{
	color:#FFF;
	background-color:#009944;
}
.acd-check:checked + .acd-label:after{
	content:'\f057';
}
.acd-check:checked + .acd-label + .acd-content{
	height:100%;
	opacity:1;
	margin:0 0 1.0em;
	padding:10px;
	visibility:visible;
}

/* -------------------------------------- */
/* リンク・アンカー */
/* -------------------------------------- */
.h5m-box03 a{
	border-bottom:3px dotted #202020;
	line-height:2.5em;
	display:inline-block;
	width:12.0em;
	text-align:left;
	position:relative;
}
.h5m-box03 a:after{
	font-family:"Font Awesome 5 Free";
	content:'\f150';
	position:absolute;
	right:0;
	top:0;
	font-size:1.2em;
	color:#009944;
}
.h5m-link01{
	border:1px solid #374034;
	border-radius:40px;
	color:#374034;
	padding:0.3em 1.5em;
	display:block;
	margin:1.0em auto 0;
	width:18.0em;
	text-align:center;
}
#point01, #point02, #point03{
	display:block;
	position:relative;
	top:-80px;
	visibility:hidden;
}

/* -------------------------------------- */
/* h5m-box05 (動画/画像グリッド) */
/* -------------------------------------- */
.h5m-box05{
	margin:2.0em auto;
	padding:2.0em 0 5.0em;
	background-color:rgba(249, 241, 0, 0.23);
	border-top:3px dotted #9DC513;
	border-bottom:3px dotted #9DC513;
}
.h5m-box05 p{
	width:80%;
	margin:1.0em auto 0;
	padding:0.2em 0;
	background-color:#FFFFFF;
	text-align:center;
	box-shadow:0px 0px 5px 0px rgba(136, 136, 136, 0.5);
}
.h5m-box05 > div:nth-child(1){
	width:95%;
	margin:0 auto;
}
.h5m-box05 > div:nth-child(1) > div:nth-child(1) > img{
	width:60%;
}
.h5m-box05 > div:nth-child(1) > div:nth-child(2){
	display:flex;
	justify-content:stat;
	flex-wrap:wrap;
}
.h5m-box05 > div:nth-child(1) > div:nth-child(2) > div{
	width:50%;
	padding:5px;
}

/* -------------------------------------- */
/* h5m-box06 (キーポイント/画像) */
/* -------------------------------------- */
.h5m-box06{
	width:95%;
	margin:0 auto;
}
.h5m-box06 > div:nth-child(1){
	text-align:left;
	padding:1.0em 2.0em;
	font-weight:300;
}
.h5m-box06 > div:nth-child(1) > span{
	font-weight:600;
	color:#9DC513;
}
.h5m-box06 > div:nth-child(2){
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
.h5m-box06 > div:nth-child(2) > div{
	width:100%;
	margin:10px 1%;
	padding:1.0em 0.5em;
	background-color:#EDF5C6;
	border-radius:20px;
}
.h5m-box06 > div:nth-child(2) > div > img{
	width:100%;
	vertical-align:top;
}
.h5m-box06 > div:nth-child(2) > div > p{
	background-color:#fff;
	border-radius:0 0 10px 10px;
	padding:0.5em;
	font-weight:300;
	text-align:left;
}
.h5m-box06 > div:nth-child(2) > div > p > span{
	font-weight:600;
	margin:0 0 0.5em 0;
	display:block;
	text-align:center;
}
.h5m-box06 > div:nth-child(3){
	margin:2.0em 0;
	padding:0;
}
.h5m-box06 > div:nth-child(3) > div{
	border:2px solid #9DC513;
	border-radius:10px;
	padding:2.0em 1.5em;
	text-align:left;
}
.h5m-box06 > div:nth-child(3) > div > p{
	border-radius:10px;
	background-color:#EDF5C6;
	padding:0.5em;
	margin:10px 0;
	font-weight:300;
}
.h5m-box06 > div:nth-child(3) > div > p > span{
	font-weight:600;
}

/* ====================================== */
/* PC (Media Queries - min-width:900px) */
/* ====================================== */
@media only screen and (min-width:900px){
	/* 見出し/コンテナ */
	.h5m-box01{
		padding:0 0 1.0em;
		margin:8.0em 0 0;
	}
	.h5m-box01 div{
		width:800px;
	}
	.h5m-box02 > div{
		width:800px;
	}
	/* タイトル・テキストスタイル */
	.h5m-ttl01, .h5m-ttl02{
		font-size:1.4em;
	}
	.h5m-ttl03{
		font-size:1.4em;
	}
	/* 画像・動画要素 */
	.h5m-img01{
		width:60%;
	}
	.h5m-box06-ttl-img{
		width:60%;
		margin:0 auto -1.5em;
	}
	/* Flex/グリッドレイアウト */
	.h5m-flex01 div:nth-child(1), .h5m-flex02 div:nth-child(1){
		width:30%;
		order:1;
	}
	.h5m-flex01 div:nth-child(2), .h5m-flex02 div:nth-child(2){
		width:70%;
		order:2;
	}
	.h5m-flex02 div:nth-child(1){
		padding:0 1.0em 0 0;
	}
	.h5m-flex03 div{
		width:30%;
	}
	/* アコーディオン */
	.acd-box{
		width:22.0em;
	}
	.acd-label span{
		font-size:1.0em;
	}
	.acd-content div{
		font-size:0.8em;
	}
	/* リンク・アンカー */
	.h5m-link01{
		margin:1.0em auto 0 0;
	}
	/* h5m-box05 (動画/画像グリッド) */
	.h5m-box05 > div:nth-child(1){
		width:800px;
	}
	.h5m-box05 > div:nth-child(1) > div:nth-child(1) > img{
		width:50%;
	}
	.h5m-box05 > div:nth-child(1) > div:nth-child(2) > div{
		width:33%;
	}
	/* h5m-box06 (キーポイント/画像) */
	.h5m-box06 > div:nth-child(2) > div{
		width:30%;
	}
	.h5m-box06 > div:nth-child(3){
		padding:0 2.0em;
	}
	/* その他 */
	.h5m-img03{
		padding:1.0em 4.0em;
	}
}