@charset "utf-8";
/* ===================================================
	Charm CSS
====================================================== */
/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#header { background: url("../../charm/img/main_bg.jpg") no-repeat center center; background-size: cover; height: 300px;}
#header #hd_h1 { margin: -23px 0 0 -176px; width: 352px;}

@media screen and (max-width: 600px) {
#header { height: 150px;}
#header #hd_h1 { margin: -12px 0 0 -88px; width: 176px;}
}


/* ---------------------------------------------------
Section lead
------------------------------------------------------ */
#sec_lead{ text-align: center; padding: 50px 0 0;}
#sec_lead h2{ font-size: 26px; line-height: 1.8;}
#sec_lead p{ font-size: 15px; line-height: 2; padding: 30px 0 100px; box-sizing: border-box;}

@media screen and (max-width: 600px) {
#sec_lead{ padding: 30px 0 0;}
#sec_lead h2{ font-size: 22px; line-height: 1.6; width: 92%; margin: 0 auto; padding: 0 0 30px;}
#sec_lead p{ width: 92%; line-height: 1.8; margin: 0 auto; padding: 0 0 30px; text-align: left;}
}
@media screen and (max-width: 320px) {
#sec_lead h2{ font-size: 20px;}
}


/* ---------------------------------------------------
Section 1
------------------------------------------------------ */
#sec1{ background: url("../img/bg_pattern1.jpg"); background-size: 100px; padding: 0 0 100px;}
#sec1 .inner{ width: 1100px; margin: 0 auto;}
#sec1 .box1{ display: flex; justify-content: space-between; margin: 0 0 50px;}
#sec1 .box1 .box_txt{ width: 400px; padding: 50px 0 0 50px; box-sizing: content-box; order: 2;}
#sec1 .box1 .box_txt p{ font-size: 15px; line-height: 2.1;}
#sec1 .box1 .img{ width: 650px; height: auto; order: 1;}
#sec1_1 h3,
#sec1_2 h3{ font-size: 26px; line-height: 1.7; padding: 0 0 10px;}
#sec1_1 p,
#sec1_2 p{ font-size: 15px; line-height: 2.1;}
#sec1_1{ display: flex; justify-content: space-between; margin: 0 0 50px;}
#sec1_1 .box_txt{ width: 410px; padding: 30px 0 0;}
#sec1_1 .img{ width: 650px;}
#sec1_2{ display: flex;}
#sec1_2 .box_txt{ width: 410px; margin: 0 0 0 40px; padding: 30px 0 0; order: 2}
#sec1_2 .img{ width: 500px; order: 1}

@media screen and (max-width: 600px) {
#sec1{ padding: 0 0 50px;}
#sec1 .inner{ width: 92%;}
#sec1 .box1{ flex-direction: column; margin: 0 0 30px;}
#sec1 .box1 .box_txt{ width: 100%; padding: 0 0 10px; order: 1;}
#sec1 .box1 .box_txt p{ font-size: 15px; line-height: 2;}
#sec1 .box1 .img{ width: 100%; order: 2;}
#sec1_1 h3,
#sec1_2 h3{ font-size: 22px; line-height: 1.6; padding: 0 0 10px;}
#sec1_1 p,
#sec1_2 p{ font-size: 15px; line-height: 1.8;}
#sec1_1{ flex-direction: column; margin: 0 0 30px;}
#sec1_1 .box_txt{ width: 100%; padding: 0 0 10px; box-sizing: border-box;}
#sec1_1 .img{ width: 100%; min-height: 0%;}
#sec1_2{ flex-direction: column;}
#sec1_2 .box_txt{ width: 100%; margin: 0; padding: 0 0 10px; order: 1}
#sec1_2 .img{ width: 100%; order: 2}
}


/* ---------------------------------------------------
Section 2
------------------------------------------------------ */
#sec2{ padding: 0 0 100px;}
#sec2 .box1{ max-width: 1400px; width: 100%; margin: 0 auto 30px; position: relative; z-index: 1}
#sec2 p.copy{ position: absolute; top: 60px; left: 50%; margin: 0 0 0 180px; font-size: 36px; line-height: 1.5; color: #fff; z-index: 2;}
#sec2 .box2{ width: 1100px; margin: 0 auto; display: flex;}
#sec2 .box2 p{ width: 390px; margin: 0 0 0 40px; padding: 15px 0 0; font-size: 15px; line-height: 2.1; order: 2;}
#sec2 .box2 .img2{ width: 670px; height: 250px; order: 1;}

@media screen and (max-width: 600px) {
#sec2{ padding: 0 0 50px;}
#sec2 .box1{ max-width: 92%; width: 92%; margin: 0 auto 20px;}
#sec2 p.copy{ position: static; margin: 0 0 20px; font-size: 18px; letter-spacing: 0; line-height: 1.5; color: #000; width: auto; height: auto; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; text-align: center;}
#sec2 .box2{ width: 92%; margin: 0 auto; flex-direction: column;}
#sec2 .box2 p{ width: 100%; margin: 0; padding: 0 0 10px; font-size: 15px; line-height: 1.8; order: 1;}
#sec2 .box2 .img2{ width: 100%; height: auto; order: 2; min-height: 0%;}
}


/* ---------------------------------------------------
Section 3
------------------------------------------------------ */
#sec3{ background: url("../img/bg_pattern1.jpg"); background-size: 100px; padding: 0 0 100px;}
#sec3 ul{ width: 100%; max-width: 1390px; margin: 0 auto; display: flex; flex-wrap: wrap;}
#sec3 ul li{ width: calc( 25% - 10px ); margin: 0 5px 10px;}

@media screen and (max-width: 600px) {
#sec3{ padding: 0 0 50px;}
#sec3 ul{ width: 92%; max-width: 92%; justify-content: space-between;}
#sec3 ul li{ width: 48%; margin: 0 0 4%;}
}