@charset "UTF-8";

/* ==========================================================
	共通 utility class
========================================================== */
#main div:before,
#main div:after,
ul:before,
ul:after,
ol:before,
ol:after,
dl:before,
dl:after {
	display: none;
}

.flexbox figure img {
	width: 100%;
	height: auto;
}

.flexBtn {
	display: flex;
	justify-content: space-between;
}

.flexBtn .link {
	width: 48%;
	margin-bottom: 25px;
}

.flexBtn .link a {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 10px 0;
	background-color: #06c;
	border: 2px solid #06c;
	color: #fff;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
}

.flexBtn .link a:hover,
.flexBtn .link a:active {
	background-color: #fff;
	color: #06c;
	text-decoration: none;
}


/* ==========================================================
	PC閲覧用 769px以上
========================================================== */

@media print,
screen and (min-width: 769px) {


	/*----------------------------------------
	box1
-----------------------------------------*/
	#box1 figure {
		float: right;
		width: 40%;
		margin: 0 0 15px 15px;
	}

	#box1 figure img {
		max-width: 100%;
	}

	#box1 .clear {
		clear: both;
	}

	/*----------------------------------------
	box2
-----------------------------------------*/
	#box2 table {
		margin: 30px auto;
		border: 1px solid #24936E;
		border-collapse: collapse;
	}

	#box2 th {
		width: 20%;
		border: 1px solid #24936E;
		background-color: #42602D;
		padding: 10px;
		text-align: center;
		vertical-align: middle;
		font-weight: bold;
		color: white;
	}

	#box2 td {
		/*		width: 70%;*/
		border: 1px solid #24936E;
		padding: 10px;
	}

	#box2 .flexbox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row
	}

	#box2 .flexbox figure {
		width: 48%;
		height: auto;
		margin-bottom: 15px;
	}

	#box2 .flexbox figure img {
		width: 100%;
	}

	#box2 .flexbox figure figcaption {
		margin-top: 10px;
	}
}

/* ==========================================================
	SP閲覧用 768px以下
========================================================== */

@media screen and (max-width: 768px) {

	#box1 img,
	#box3 img {
		display: block;
		width: 100%;
		margin: 15px auto;
	}

	#box1 .inner,
	#box3 .inner {
		margin-top: 30px;
	}

	#box2 table {
		box-sizing: border-box;
		margin: 20px auto;
		width: 100%;
		border: 1px solid #24936E;
		border-collapse: collapse;
	}

	#box2 td {
		box-sizing: border-box;
		padding: 5px;
		border: 1px solid #ddd;
		font-size: small;
		vertical-align: middle;
	}

	#box2 th {
		box-sizing: border-box;
		padding: 5px;
		width: 30%;
		border: 1px solid #24936E;
		background-color: #42602D;
		text-align: center;
		vertical-align: middle;
		font-weight: bold;
		color: white;
	}

	#box2 .flexbox figure {
		margin-bottom: 15px;
	}

	#box2 .reco_class {
		margin-bottom: 50px;
	}

	#box2 .flexbox {
		display: block;
	}

	#box2 .flexbox figure {
		width: 100%;
		height: auto;
		margin-bottom: 15px;
	}

	#box2 .flexbox figure img {
		width: 100%;
	}

	#box2 .flexbox figure figcaption {
		margin-top: 10px;
	}

}

.black {
	color: black;
}

.white {
	color: whitesmoke;
}

.pink {
	color: hotpink;
}