@charset='utf-8';
#header{height: 70px; border-bottom: 1px solid #eee;}

#mainVisual{margin-top: 65px; padding: 35px 0;}
#mainVisual .tit{display: block; text-indent: -9999px; width: 320px; background: url(../img/main_tit.png) no-repeat center/ 320px; height: 80px; margin: 20px 0 15px;}
#mainVisual .des{font-size: 0.925rem; color: #666; margin-bottom: 20px; line-height: 1.2em;}

#mainVisual .swiper-slide{width: 100%; border-radius: 10px; overflow: hidden; position: relative;}
#mainVisual .swiper-slide img{width: 100%;}
#mainVisual .swiper-pagination.size {width: 250px; position: absolute; top: auto; bottom: 25px; left: 50%; transform: translateX(-50%);}
#mainVisual .request{display: block; background-color: #ffcd00; color: #000; text-align: center; font-size: 1rem; padding: 15px 0; border-radius: 5px; margin: 25px auto; font-weight: 500;}

#container{}
#container>div{margin-bottom: 50px;}
#container .tit{display: block; text-indent: -9999px; background-repeat: no-repeat; background-size: cover; background-position: center; height: 30px;  margin-bottom: 20px;}
#container .des{font-size: 1.125rem; font-weight: 500;}
#container hr{border: none; width: 100%; height: 20px; background-color: #f3f3f3;}
#container .picture{margin: 30px 0 25px; position: relative;}
#container .picture img{width: 100%;}
#container .picture .blue{position: absolute; top: 20px; left: 20px; background-color: #005fff; color: #fff; padding: 5px 12px; border-radius: 50px; font-size: 0.925rem; font-weight: 500}
#container .txt{font-size: 1rem; line-height: 1.5em; font-weight: 400; margin-bottom: 20px;}

#cont1{}
#cont1 .tit{background-image: url(../img/service_tit.png); width: 205px;}

#cont2{margin-top: 50px;}
#cont2 .tit{background-image: url(../img/care_tit.png); width: 280px;}
#cont2 .academy{font-size: 1rem; font-weight: 700; text-decoration: underline; color: #005fff;}

#cont3{margin-top: 50px;}
#container #cont3 .tit{background-image: url(../img/product_tit.png); width: 130px;  margin-bottom: 40px;}
#cont3 .mySwiper2{position:static; width: 80%; margin: 0 auto;}
#cont3 .swiper-slide{}
#cont3 .prd{width: 100%;}
#cont3 .prd img{width: 95%; margin: 0 auto; display: block;}
#cont3 .prd .name{position: absolute; top: 18px; left: 25px; font-size: 1rem;}
#cont3 .prd ul{margin: 20px 0;}
#cont3 .prd ul li{width: 50%; display: block; font-size: 1rem; line-height: 2.5em;}
#cont3 .prd ul .left{float: left}
#cont3 .prd ul .right{float: right; text-align: right;}
#cont3 .prd ul .more{display: inline-block; background-color: #005fff; color: #fff; padding: 5px 20px; line-height: 1.125em; border-radius: 5px; }

#cont3 .mySwiper2 .swiper-button-next,
#cont3 .mySwiper2 .swiper-button-prev{top: 180px; width: 50px; height: 60px; background-image: url(../img/arrow_ico.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#cont3 .mySwiper2 .swiper-button-prev{transform: rotate(180deg); left: -16px;}
#cont3 .mySwiper2 .swiper-button-next{right: -16px;}
#cont3 .mySwiper2 .swiper-button-next:after,
#cont3 .mySwiper2 .swiper-button-prev:after{display: none;}

#cont3 .inner>.more{display: block; padding:12px 15px; margin: 0 auto 65px; text-align: center; font-size: 0.925rem; border: 1px solid #ccc; width: 150px;}

#container #cont4{background: #f3f3f3; padding-top: 80px; margin-bottom: 0;}
#cont4 .inner{padding-bottom: 80px;}
#cont4 .tit{background-image: url(../img/course_tit.png); width: 230px; margin: 0 auto;}
#cont4 ul{position: relative; padding-top: 150px;}
#cont4 ul .tab{}
#cont4 ul .tab h3{width: 32%;position: absolute;}

#cont4 ul li:nth-child(1) h3, #cont4 ul li:nth-child(2) h3{top: 30px;}
#cont4 ul li:nth-child(3) h3, #cont4 ul li:nth-child(4) h3{top: 75px;}

#cont4 ul li:nth-child(1) h3, #cont4 ul li:nth-child(3) h3{left: 16%;}
#cont4 ul li:nth-child(2) h3, #cont4 ul li:nth-child(4) h3{right:16%;}

#cont4 ul .tab h3 a{display: block; background-color: #ddd; text-align: center; padding: 8px; border-radius: 50px; font-weight: 500; font-size: 0.825rem; letter-spacing: -0.5px;}
#cont4 ul .tab img{display: none; width: 100%;}

#cont4 ul .on h3 a{background-color: #005fff; color: #fff; }
#cont4 ul .on img{display: block;}

#cont5{background-color: #ffcd00; padding: 65px 0 35px;}
#cont5 .tit{background-image: url(../img/area_tit.png); width: 160px; margin-bottom:20px;}
#cont5 img{width: 100%;}

#cont6{}
#container #cont6 .tit{background-image: url(../img/faq_tit.png); margin: 0 auto 20px; width: 85px; height: 45px; margin-bottom: 40px;}
#cont6 .inner>div{margin-bottom: 50px;}
#cont6 .que{font-size: 1.1rem; color: #333;}
#cont6 .ans{font-size: 1rem; color: #666; margin: 10px 30px; line-height: 1.5em;}
#cont6 .ans .blue{color: #005fff; display: block; font-size: 0.825rem; font-weight: 700; margin-top: 10px;}

#container .banner{display: block; width: 100%;}
#container .banner img{width: 100%;}

@media screen and (min-width:430px){
    #mainVisual .tit{width: 340px; background: url(../img/main_tit.png) no-repeat center/ 350px; height: 90px;}
    #mainVisual .des{font-size: 1rem; line-height: 1.25em;  letter-spacing: -0.5px;}
}