@charset "utf-8";
/* ======================================================
 * ELEMENT **********************************************
 * Common Parts
 * Section Parts
 * COMPONENT ********************************************
 * RESPONSIVE *******************************************
 * - 769px <= width <= 1024px
 * Clearfix
====================================================== */
@media only screen and (min-width: 769px), print {
/********************************************************

  ELEMENT

********************************************************/
	.flexArea {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	.sec-lead {
		width: 100%;
		margin: 0 auto;
	}
	.sec-lead.flexArea {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	
	.sec-lead .sec-lead__img {
		width: 410px;
		margin-right: 30px;
	}
	.sec-lead .sec-lead__txt {
		flex: 1;
	}
	.sec-lead .sec-lead__txt p {
		margin-top: 0;
		font-size: 16px;
	}

	.section02 {
		border-radius: 5px;
		background: #eae4d4;
		margin-bottom: 40px;
		padding: 40px;
	}
	.section02:last-of-type {
		margin-bottom: 70px;
	}
	.section02 .flexArea {
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}
	
	.section02 .photo_area {
		width: 269px;
		margin-right: 30px;
	}
	.section02 .detail_area {
		flex: 1;
		margin-top: 10px;
	}
	.section02 .detail_area h2 {
		color: #24753b;
		font-size: 22px;
		font-weight: bold;
	}
	.section02 .detail_area p {
		font-size: 16px;
		line-height: 1.5;
		margin-top: 5px;
	}
	.section02 .detail_area .btn {
		margin-top: 35px;
	}
	.section02 .detail_area .btn a {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 17px 10px;
		border-radius: 5px;
		background-color: #027048;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		line-height: 1.25;
		text-align: center;
		width: 312px;
		height: 53px;
		position: relative;
	}

	.section02 .detail_area .btn a:before {
		content: "";
		position: absolute;
		left: 25px;
		top: 50%;
		display: inline-block;
		width: 0;
		height: 0;
		margin: -6px 0 0 0;
		border-width: 6px 10px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
	}

	.useful {
		min-width: 1080px;
		background-color: #e7f1d0;
	}
	.useful h3 {
		font-size: 24px;
		font-weight: bold;
		color: #24753b;
		text-align: center;
		padding: 20px 0 15px;
	}
	  
	.useful ul {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding-bottom: 25px;
	}
	.useful ul li {
		width: 238px;
		margin: 0 8px;
		position: relative;
	}
	.useful ul li a {
		position: relative;
		display: inline-block;
		width: 238px;
		padding: 17px 10px;
		border-radius: 5px;
		background-color: #027048;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.25;
		text-align: center;
	}

	.useful ul li a:before {
		content: "";
		position: absolute;
		left: 10px;
		top: 50%;
		display: inline-block;
		width: 0;
		height: 0;
		margin: -6px 0 0 0;
		border-width: 6px 10px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
	}
	.useful .btn_back {
		font-size: 18px;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding-bottom: 30px;
	}
	.useful .btn_back a {
		display: inline-block;
		color: #222;
		font-weight: bold;
		position: relative;
		min-height: 23px;
	}
	.useful .btn_back a:before {
		content: "";
		position: absolute;
		right: -30px;
		top: 50%;
		display: inline-block;
		width: 23px;
		height: 22px;
		background: url(/beginner/img/ico_back.png) no-repeat 0 0;
		background-size: cover;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
}