@charset "utf-8";
/* ===================================================
	Charm CSS
====================================================== */
/* ---------------------------------------------------
	Main title
------------------------------------------------------ */
.box_maintit{ background-image: url("../../img/charm/main_img.jpg");}
.box_maintit .tit{ width: 500px; height: 144px;}

@media screen and (max-width: 600px) {
.box_maintit .tit{ width: 300px; height: 86px; top: 74px; bottom: inherit;}
}


/* ---------------------------------------------------
	Section lead
------------------------------------------------------ */
#sec_lead{ background: url("../../img/charm/lead_bg1.jpg") no-repeat center top; background-size: 1400px; width: 100%; max-width: 1400px; margin: 50px auto 0;}
#sec_lead h2{ width: 500px; height: auto; margin: 0 auto; padding: 70px 0 390px; display: block;}
#sec_lead p{ text-align: center; font-size: 15px; line-height: 2;}
#sec_lead .img{ width: 100%; max-width: 1300px; margin: 60px auto 100px; display: block;}

@media screen and (max-width: 600px) {
#sec_lead{ background: url("../../img/charm/lead_bg1.jpg") no-repeat center top; background-size: 700px; width: 100%; max-width: 100%; margin: 0;}
#sec_lead h2{ width: 250px; height: auto; margin: 0 auto; padding: 40px 0 190px; display: block;}
#sec_lead p{ text-align: left; font-size: 14px; line-height: 1.7; padding: 0 4%;}
#sec_lead .img{ width: 100%; max-width: 100%; margin: 20px auto 40px;}
}


/* ---------------------------------------------------
	Common Section type1
------------------------------------------------------ */
.sec_type1{ padding: 80px 0; background: #fff; width: 100%; min-width: 1100px; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start;}
.sec_type1:nth-of-type(2n){ background: #faf7f7;}
.sec_type1 .box_txt{ width: 48%;}
.sec_type1 .box_txt .inner{ width: 520px; max-width: 520px; margin: 0 auto;}
.sec_type1 .box_txt h2{ border-bottom: solid 1px #ccc; display: flex; align-items: flex-end; padding: 0 0 40px; margin: 0 0 40px;}
.sec_type1 .box_txt h2 .tit1{ font-size: 22px; color: #529b44; line-height: 1; width: 115px;}
.sec_type1 .box_txt h2 .tit2{ display: flex; flex-direction: column; line-height: 1; letter-spacing: 0;}
.sec_type1 .box_txt h2 .num{ font-size: 90px;}
.sec_type1 .box_txt h2 .sub{ font-size: 18px; padding: 0 0 15px;}
.sec_type1 .box_txt h2 .main{ font-size: 32px; color: #286c35; padding: 0 0 5px;}
.sec_type1 .box_txt p{ font-size: 15px; line-height: 2;}
.sec_type1 .box_txt .cmn_btn1{ margin: 40px 0 0;}
.sec_type1 .box_img{ width: 52%; overflow: hidden;}

@media screen and (max-width: 600px) {
.sec_type1{ padding: 40px 0; background: #fff; width: 100%; min-width: 100%; flex-direction: column;}
.sec_type1:nth-of-type(2n){ background: #faf7f7;}
.sec_type1 .box_txt{ width: 92%; margin: 0 auto;}
.sec_type1 .box_txt .inner{ width: 100%; max-width: 100%; margin: 0 0 15px;}
.sec_type1 .box_txt h2{ border-bottom: solid 1px #ccc; display: flex; align-items: flex-end; padding: 0 0 20px; margin: 0 0 15px;}
.sec_type1 .box_txt h2 .tit1{ font-size: 16px; color: #529b44; line-height: 1; width: 75px;}
.sec_type1 .box_txt h2 .tit2{ display: flex; flex-direction: column; line-height: 1; letter-spacing: 0;}
.sec_type1 .box_txt h2 .num{ font-size: 50px;}
.sec_type1 .box_txt h2 .sub{ font-size: 15px; padding: 0 0 10px;}
.sec_type1 .box_txt h2 .main{ font-size: 21px; color: #286c35; padding: 0 0 2px;}
.sec_type1 .box_txt p{ font-size: 14px; line-height: 1.7;}
.sec_type1 .box_txt .cmn_btn1{ margin: 15px auto 0;}
.sec_type1 .box_img{ width: 92%; margin: 0 auto;}
}

@media screen and (max-width: 320px) {
.sec_type1 .box_txt h2 .tit1{ font-size: 14px; width: 65px;}
.sec_type1 .box_txt h2 .num{ font-size: 40px;}
.sec_type1 .box_txt h2 .sub{ font-size: 14px;}
.sec_type1 .box_txt h2 .main{ font-size: 18px;}
}