@charset "UTF-8";

/* ========== ARTICLE ========== */
/* ----- COMMON ----- */
/*h2 { font-weight: bold; text-align: center; display: block; border-top: 3px solid #264993; border-bottom: 3px solid #264993; }
.catch { font-weight: bold; }
.catch font { color: #f36e00; }
.cap { font-weight: bold; text-align: center; }*/
/* BLK LIST */
.blk_list { display: flex; flex-flow: wrap; }
.blk_list div h4 { color: #ffffff; font-weight: bold; text-align: center; background: #264993; }
/* HD */
#hd { background: #e8e8e8; }
/* SEC1 */
#sec1 .catch font { color: #264993; }
/* SEC2 */
#sec2, #sec4 { background: #f0f0f0; }
#sec2 h3 { color: #ffffff; background: #00aecb url("images/icn_hd3.png") no-repeat left top; font-weight: bold; display: inline-block; text-align: center; }
#sec2 .hd4 { display: block; text-align: center; position: relative; }
#sec2 .hd4 h4 { color: #264993; font-weight: bold; }
#sec2 .hd4 p { font-weight: bold; }
#sec2 .hd4 p font { color: #f36e00; font-weight: bold; }
#sec2 .blk_features div { color: #ffffff; position: relative; }
#sec2 .blk_features div.f1 { background: #00aecb; }
#sec2 .blk_features div.f2 { background: #6c8ac9; }
#sec2 .blk_features div.f3 { background: #264993; }
#sec2 .blk_features div.f4 { background: #66cee0; }
#sec2 .blk_features div font { font-family: Arial; font-weight: bold; line-height: 1; border: 3px solid #ffffff; border-radius: 100%; text-align: center; vertical-align: middle; display: grid; align-items: center; }
#sec2 .blk_features div h5 { font-weight: bold; line-height: 1.3; }
#sec2 .img_cap li { text-align: center; }
#sec2 .img_left .txt ul li { color: #264993; font-weight: bold; }

@media screen and (max-width:768px) {
	
	/* ========== ARTICLE ========== */
	/* COMMON */
	/*h2 { font-size: 1.8rem; padding: 5px 0; margin-bottom: 20px; }
	.img_right, .img_left { margin-bottom: 20px; }
	.img_right .txt p, .img_left .txt p { margin-bottom: 10px; }*/
	#sec1, #sec2, #sec3, #sec4 { padding: 20px 0; }
	/* BLK LIST */
	.blk_list div { margin-bottom: 15px; }
	.blk_list div img { width: 100%; height: auto; }
	.blk_list div h4 { font-size: 1.6rem; padding: 10px 0; }
	/* SEC1 */
	#sec1 .catch { font-size: 1.7rem; text-align: center; margin-bottom: 20px; }
	#sec1 .catch font { font-size: 1.5rem; }
	#sec1 .lead { margin: 0 0 20px; }
	#sec1 .cap { font-size: 1.2rem; }
	/* SEC2 */
	#sec2 h3 { background-size: 20px auto; font-size: 18px; padding: 5px 30px; margin-bottom: 10px; }
	#sec2 .catch { font-size: 1.6rem; margin-bottom: 10px; }
	#sec2 .txt { margin-bottom: 20px; }
	#sec2 .img_right { margin-bottom: 30px; }
	#sec2 .hd4 { margin-bottom: 15px; }
	#sec2 .hd4 h4 { font-size: 2.0rem; line-height: 1; }
	#sec2 .hd4 p { font-size: 1.6rem; }
	#sec2 .hd4 p font { font-size: 2.5rem; padding: 0 3px; }
	#sec2 .hd4 .img { margin-bottom: 5px; }
	#sec2 .hd4 .img img { width: 100px; height: auto; }
	#sec2 .blk_features { margin-bottom: 20px; }
	#sec2 .blk_features div { padding: 15px; margin-bottom: 10px; border-radius: 5px; }
	#sec2 .blk_features div font { font-size: 3.0rem; width: 40px; height: 40px; position: absolute; left: 15px; top: 15px; }
	#sec2 .blk_features div h5 { font-size: 2.0rem; margin: 0 0 10px 60px; }
	#sec2 .img_cap { margin-bottom: 20px; }
	#sec2 .img_cap li { margin-bottom: 20px; }
	#sec2 .img_cap .cap { font-size: 1.2rem; }
	#sec2 .img_left .txt ul { margin: 0 0 10px 10px; }
	
}

@media screen and (min-width:769px) {
	
	/* ========== ARTICLE ========== */
	/* ----- COMMON ----- */
	/*h2 { font-size: 3.4rem; width: 580px; padding: 15px 0; margin: 0 auto 50px; }*/
	.inner_wrap { width: 1100px; margin: 0 auto; }
	/*.img_right, .img_left { position: relative; }
	.img_right .txt, .img_left .txt { width: 560px; }
	.img_right .txt p, .img_left .txt p { margin-bottom: 15px; }*/
	/* BLK LIST */
	.blk_list { width: 990px; margin: 0 auto; }
	.blk_list div { width: 445px; margin: 0 25px 30px; }
	.blk_list div h4 { font-size: 2.8rem; padding: 15px 0; }
	.blk_list div p { font-size: 1.6rem; }
	/* SEC1 */
	#sec1 { padding: 20px 0 70px; }
	#sec1 .catch { font-size: 3.6rem; text-align: center; margin-bottom: 40px; }
	#sec1 .catch font { font-size: 3.0rem; }
	#sec1 .lead { font-size: 1.6rem; display: block; width: 1000px; margin: 0 auto 40px; }
	#sec1 .img { text-align: center; }
	#sec1 .cap { font-size: 1.7rem; }
	/* SEC2 */
	#sec2 { padding: 100px 0 70px;}
	#sec2 h3 { font-size: 30px; width: 280px; margin-bottom: 30px; }
	#sec2 .catch { font-size: 3.6rem; margin-bottom: 30px; }
	#sec2 .img_right { margin-bottom: 50px; }
	#sec2 .img_right .txt { position: absolute; left: 0; top: 0; }
	#sec2 .img_right .img { text-align: right; }
	#sec2 .hd4 { margin-bottom: 25px; }
	#sec2 .hd4 h4 { font-size: 3.6rem; line-height: 1; margin-bottom: 20px; }
	#sec2 .hd4 p { font-size: 2.4rem; line-height: 1; }
	#sec2 .hd4 p font { font-size: 3.3rem; }
	#sec2 .hd4 .img { position: absolute; top: 0; left: 0; }
	#sec2 .narrow { width: 1000px; margin: 0 auto; }
	#sec2 .blk_features { margin-bottom: 30px; display: flex; flex-flow: wrap; justify-content: space-between; }
	#sec2 .blk_features div { width: 420px; padding: 25px 35px; margin-bottom: 20px; border-radius: 10px; }
	#sec2 .blk_features div font { font-size: 4.5rem; width: 55px; height: 55px; position: absolute; left: 30px; top: 10px; }
	#sec2 .blk_features div h5 { font-size: 3.4rem; margin: 0 0 20px 80px; }
	#sec2 .img_cap { display: flex; justify-content: space-between; margin-bottom: 50px; }
	#sec2 .img_cap .cap { font-size: 1.6rem; }
	#sec2 .img_left { margin-bottom: 50px; }
	#sec2 .img_left .img { position: absolute; left: 0; top: 0; }
	#sec2 .img_left .txt { margin-left: 535px; }
	#sec2 .img_left .txt ul { margin: 0 0 15px 15px; }
	#sec2 .img_left .txt ul li { font-size: 2.0rem; }
	#sec2 .blk_list { width: 1125px; margin: 0 auto; }
	#sec2 .blk_list div { width: 345px; margin: 0 15px 0; }
	#sec2 .blk_list div h4 { font-size: 2.4rem; line-height: 1.3; vertical-align: middle; height: 80px; padding: 0; display: grid; align-items: center; }
	/* SEC3 */
	#sec3, #sec4 { padding: 100px 0 80px; }
	#sec3 .catch, #sec4 .catch { font-size: 3.6rem; margin-bottom: 30px; }
	#sec3 .img_right { margin-bottom: 60px; }
	#sec3 .img_right .txt { width: 580px;  position: absolute; left: 0; top: 0; }
	#sec3 .img_right .txt .lead { display: block; width: 560px; }
	#sec3 .img_right .img { text-align: right; }
	/* SEC4 */
	#sec4 .img_left { margin-bottom: 50px; }
	#sec4 .img_left .img {}
	#sec4 .img_left .txt { position: absolute; right: 0; top: 0; }
	
}