@charset "UTF-8";
/* ===================================================
	Access CSS
====================================================== */
#content #main_img { background:url(../../content/img/tit.jpg) no-repeat center bottom; background-size: -webkit-calc(100% - 80px) auto ; background-size: calc(100% - 80px) auto ; }
#content #main_img h2 { font-size:36px;}

@media screen and (max-width: 1100px) {
            #content #main_img { background-size: cover;}
}
@media screen and (max-width: 600px) {
            #content #main_img h2 { font-size:30px; top: 12%;}
}
@media screen and (max-width: 400px) {
            #content #main_img h2 { font-size:28px; top: 20px;}
}

/* ---------------------------------------------------
Section
------------------------------------------------------ */
#content section {font-family: Georgia, "Times New Roman", Times, "serif"; margin-bottom:0; border-bottom:10px solid #000;}
#content section h2 { color:#713201; font-size:50px; padding-top:170px; position: relative;}
#content section h2::before { content:""; display: block; height:250px; position: absolute; left:50%; top:0; width:180px; margin-left:-90px; }

#content #sec1 h2::before { background:url(../../img/01_icon.png) no-repeat ;}
#content #sec1 .inner { background:#000; color:#edecea; margin-top:40px; padding-bottom:10px; text-align: left; }
#content #sec1 .inner>div { margin:0 auto; min-width:1100px; max-width:1400px; box-sizing: border-box; overflow: hidden;}
#content #sec1 .box1 {padding:20px; }
#content #sec1 .box1 h3 { color:#ebacbb; font-size:40px; font-weight: bold; padding:50px 0; }
#content #sec1 .box1 span:first-of-type { float:left; width:56%; position: relative;}
#content #sec1 .box1 span:first-of-type p img { display: block; margin:100px 0 20px; width:80%;}
#content #sec1 .c_img { position: absolute; bottom:200px; right:-100px; z-index: 100; width:250px;}
#content #sec1 .box1 span:last-of-type { float:right; width:40%;}
#content #sec1 .box1 span:last-of-type img { display: block; margin-bottom:60px;}
#content #sec1 .box2 { background:url("../../content/img/01_bg.png"); padding:15px 15px 15px 60px; }
#content #sec1 .box2 span { float:left; width:-webkit-calc(100% - 650px); width:calc(100% - 650px); }
#content #sec1 .box2 h3 { color:#c1d59b; font-size:45px; padding:50px 0; }
#content #sec1 .box2 figure {float:right; width:600px;}

@media screen and (max-width: 1100px) {
  #content #sec1 .inner>div { min-width: 100%;}
}
@media screen and (max-width: 800px) {
            #content section h2 { font-size:36px; padding-top:100px;}
            #content section h2::before { height:100px; left:50%; margin-left:-90px; }

            #content #sec1 h2::before { background-position: center top; background-size: 100px auto;}
            #content #sec1 .inner>div { min-width:100%; max-width:100%;}
            #content #sec1 .box1 h3 { font-size:30px; padding:25px 0; }
            #content #sec1 .box1 {padding:20px 5%; }
            #content #sec1 .box1 span:first-of-type,
            #content #sec1 .box1 span:last-of-type { float:none; width:100%; display: block; }
            #content #sec1 .box1 span:first-of-type p img { margin:20px 0 20px; width:70%; }
            #content #sec1 .c_img { position:absolute; bottom:20px; right:0; z-index: 100; width:32%; }
            #content #sec1 .box1 span:last-of-type img { margin-bottom:20px;}
            #content #sec1 .box2 {padding:15px 3%;}
            #content #sec1 .box2 span { float:none; width:-webkit-calc(100%); width:calc(100%); }
            #content #sec1 .box2 h3 { font-size:30px; padding:25px;}
            #content #sec1 .box2 figure { float:none; width:90%; margin:20px auto;}
}



#content #sec2 h2::before { background:url(../../img/02_icon.png) no-repeat center top ;}
#content #sec2 ul { display: flex; flex-wrap: wrap; margin:50px auto; min-width:0; max-width:1400px;}
#content #sec2 ul li { margin:0 2% 70px 2%; width:46%; box-sizing: border-box;}
#content #sec2 ul li img {margin-bottom:20px; }

@media screen and (max-width: 800px) {
            #content #sec2 h2::before { background-position: center top; background-size: auto 100px ;}
            #content #sec2 ul { max-width:100%;}
}
@media screen and (max-width: 600px) {
            #content #sec2 ul { flex-direction: column;}
            #content #sec2 ul li { margin:0 5% 30px 5%; width:90%;}
            #content #sec2 ul li img {margin-bottom:5px; }
}



#content #sec3 h2 { font-size:42px;}
#content #sec3 h2::before { background:url(../../img/03_icon.png) no-repeat center 50px ;}
#content #sec3 h3 { margin:50px 0 20px; font-size:30px;}
#content #sec3 h3 span { font-size:20px; display: block; }
#content #sec3 h3 i { font-style: normal; position: relative;}
#content #sec3 h3 i::before,
#content #sec3 h3 i::after { content:""; display: block; background: #555; height:1px; position: absolute; width:100px; }
#content #sec3 h3 i::before { left: -140px; top:10px;}
#content #sec3 h3 i::after { right: -140px; top:10px;}
#content #sec3 .inner h3 + figure { margin:10px auto 40px; min-width:1100px; max-width:1400px;}
#content #sec3 .inner h3 + figure img:first-of-type { width:48.4%;}
#content #sec3 .inner h3 + figure img:last-of-type { width:51.4%;}
#content #sec3 p { margin:10px auto; text-align: left; width:800px;}
#content #sec3 .slick-slider + p { margin:50px auto 80px auto;}

@media screen and (max-width: 1100px) {
  #content #sec3 .inner h3 + figure { min-width: 100%;}
}

@media screen and (max-width: 800px) {
            #content #sec3 h2::before { background-position: center center; background-size: 100px auto ;}
            #content #sec3 h2 { font-size:32px;}
            #content #sec3 h3 { font-size:24px;}
            #content #sec3 .inner h3 + figure { margin:10px auto 40px; max-width:100%;}
            #content #sec3 p { width:90%;}
            #content #sec3 h3 i::before,
            #content #sec3 h3 i::after { content:none;}
}
@media screen and (max-width: 600px) {
            #content #sec3 .inner h3 + figure img:first-of-type,
            #content #sec3 .inner h3 + figure img:last-of-type { margin:2px auto;width:90%;}
}

/* ---------------------------------------------------
	clear
------------------------------------------------------ */
#content section::after,
#content #sec1 .inner>div::after { content:"."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}

/* ---------------------------------------------------

------------------------------------------------------ */