@charset='utf-8';

#mainVisual{margin-top: 65px; padding: 50px 0 80px;}
#mainVisual .tit{display: block; text-indent: -9999px; width: 425px; background: url(../img/main_tit.png) no-repeat center/ 430px; height: 120px; margin: 25px 0 15px;}
#mainVisual .des{font-size: 1.125rem; color: #666; margin-bottom: 30px;}

#mainVisual .swiper-slide{width: 100%; height: 550px; border-radius: 10px; overflow: hidden; position: relative;}
#mainVisual .swiper-slide img{width: 100%;}
#mainVisual .swiper-pagination.size {width: 450px; position: absolute; top: auto; bottom: 55px; left: 50%; transform: translateX(-50%);}
#mainVisual .request{display: block; background-color: #0055ff; color: #fff; width: 1100px; text-align: center; font-size: 1.125rem; padding: 20px 0; border-radius: 10px; margin: 40px auto 0;}

#container{}
#container .tit{display: block; text-indent: -9999px; background-repeat: no-repeat; background-size: cover; background-position: center; height: 100px;  margin-bottom: 20px; float: left;}
#container .des{font-size: 1.125rem; font-weight: 500; position: absolute;}
#container hr{border: none; width: 100%; height: 20px; background-color: #f3f3f3;}
#container .picture{width: 350px; position: relative; float: left; margin: 0 0 0 25px;}
#container .picture img{width: 350px;}
#container .picture .blue{position: absolute; top: 25px; left: 25px; 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; }

#cont1{}
#container #cont1 .tit{text-indent: 0; font-size: 1.75rem; margin-bottom: 35px; color: #333; float: none; height: auto;}
#cont1 .box{background-color: #f3f3f3; width: 100%; height: 240px; padding: 60px 45px; box-sizing: border-box; position: relative;}
#cont1 .box .blue{background-color: #cfddf5; padding: 10px; display: inline-block; font-size: 1.375rem; margin-bottom: 25px;}
#cont1 .box .blue strong{color: #0055ff}
#container #cont1 .des{font-size: 1.125rem; font-weight: 400; line-height: 1.5em;}
#cont1 .month{width: 440px; position: absolute; bottom: 0; right: 60px;}
#cont1 .month img{width:100%;}

#cont2{}
#container #cont2 .picture.first img{width: 410px;}
#container #cont2 .picture.first .blue{left: 80px;}
#container #cont2 .tit{background-image: url(../img/service_tit.png); width: 185px; margin:0 105px 0 0;}
#container #cont2 .des{top: 135px; left: 0px;}
#container #cont2 .txt{width: 300px; float: right; margin: 85px 0 0;}
#container #cont2 .txt2{width: 725px; float: right; margin: 35px 0 0; font-size: 0.925rem; line-height: 2em; background-color: #f6f6f6; padding: 50px 50px; box-sizing: border-box;}
#container #cont2 .txt2 strong{font-size: 1.125rem; display: inline-block; margin-bottom: 10px; color: #111;}

#container #cont3{margin-top: 50px;}
#container #cont3 .tit{background-image: url(../img/care_tit.png); width: 265px;  margin:0 60px 0 0;}
#container #cont3 .des{top: 135px; left: 0px;}
#cont3 .academy{font-size: 1rem; font-weight: 700; text-decoration: underline; color: #005fff;}
#container #cont3 .picture.long{width: 730px; background: #f3f3f3; margin: 0 0 50px 40px; position: relative; box-sizing: border-box;}
#container #cont3 .picture.long .txt{position: absolute; z-index: 5; width: 300px; top: 100px; right: 65px}

#container #cont3 .picture{width: 350px; float: right;  margin: 0 0 0 25px;}
#container #cont3 .picture .txt{margin: 30px 0;}

#cont4{margin-top: 50px; height: 300px;}
#cont4 .inner{position: relative;}
#container #cont4 .tit{background-image: url(../img/product_tit.png); width: 180px; margin-bottom: 30px; height: 50px}
#cont4 .mySwiper2{width:725px; height: 350px; position:absolute; top: -20px; right: 0; padding: 0 20px}
#cont4 .mySwiper2 .swiper-button-next,
#cont4 .mySwiper2 .swiper-button-prev{top: 100px; width: 50px; height: 60px; background-image: url(../img/arrow_ico_grey.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}
#cont4 .mySwiper2 .swiper-button-prev{transform: rotate(180deg); left: -16px;}
#cont4 .mySwiper2 .swiper-button-next{right: -16px;}
#cont4 .mySwiper2 .swiper-button-next:after,
#cont4 .mySwiper2 .swiper-button-prev:after{display: none;}
#cont4 .swiper-slide{}
#cont4 .prd{width: 330px;}
#cont4 .prd img{width: 330px;}
#cont4 .prd .name{position: absolute; top: 40px; left: 40px; font-size: 1rem;}
#cont4 .prd ul{margin: 20px 0;}
#cont4 .prd ul li{width: 50%; display: block; font-size: 1rem; line-height: 2.5em;}
#cont4 .prd ul .left{float: left}
#cont4 .prd ul .right{float: right; text-align: right;}
#cont4 .prd ul .more{display: inline-block; background-color: #005fff; color: #fff; padding: 5px 20px; line-height: 1.125em; border-radius: 5px; }

#cont4 .inner>.more {position: relative; width: 170px;}
#cont4 .inner>.more .arr{display: block; background: url(../img/arrow_ico.svg) no-repeat center/ 25px; width:25px; height: 25px; position: absolute; right: 0; top: -2px;}

#cont4 .swiper-pagination{position: absolute; top: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 65%; max-width: 600px;}

#cont4 .inner>.more{display: block; font-size: 1.125rem; color: #0055ff; font-weight: 600; position: absolute; top: 100px; left: 10px;}

#container #cont5{background: #f3f3f3; padding: 60px 0; margin-bottom: 0; }
#cont5 .inner{padding-bottom: 80px;}
#container #cont5 .tit{background-image: url(../img/course_tit.png); width: 180px; margin: 65px auto 0; height: 120px}
#cont5 ul{position: relative; padding-top: 100px;}
#cont5 ul .line1{position: absolute; width: 750px; height: 2px; background-color: #ccc; top: 120px; right: 0;}
#cont5 ul .tab{}
#cont5 ul .tab h3{position: absolute; top: 65px;}
#cont5 ul li:nth-child(1) h3{left:340px;}
#cont5 ul li:nth-child(2) h3{left:495px; }
#cont5 ul .tab h3 a{display: block; text-align: center; padding: 10px 35px; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.5px;}
#cont5 ul .tab h3 a .line2{display: none; width: 140px; height: 2px; background-color: #333; position: absolute; top: 55px; z-index: 2;}
#cont5 ul .tab img{display: none; width: 750px; margin-top: 60px; float: right;}

#cont5 ul .on h3 a{font-weight: 600; color: #333;}
#cont5 ul .on h3 a .line2{display: block;}
#cont5 ul li:nth-child(1) h3 a .line2{left: 8px;}
#cont5 ul li:nth-child(2) h3 a .line2{left: 0px;}
#cont5 ul .on img{display: block;}

#cont6{background-color: #005fff; padding: 65px 0 120px;}
#container #cont6 .tit{background-image: url(../img/area_tit.png); width: 220px; height: 50px; margin: 30px auto 50px; float: none;}
#cont6 img{width: 90%; display: block; margin: 0 auto;}

#cont7{}
#container #cont7 .tit{background-image: url(../img/faq_tit.png); margin: 0 auto 20px; width: 100px; height: 60px; margin-bottom: 40px; float: none;}
#cont7 .inner>div{margin-bottom: 50px;}
#cont7 .que{font-size: 1.2rem; color: #333;}
#cont7 .ans{font-size: 1.125rem; color: #666; margin: 20px 30px; line-height: 1.5em;}
#cont7 .ans .blue{color: #005fff; display: block; font-size: 1rem; font-weight: 500; margin-top: 10px;}

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

.service_area{display: grid; justify-content: space-between; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.area_box {grid-template-rows: 80px 1fr 1fr;  display: grid; gap: 40px;}
.area_box.first {grid-template-rows: 210px 30px 1fr; gap: 40px;}
.area_box .area{color: #fff; display: flex;}
.area_box .area h5{font-size: 20px; width: 120px;}
.area_box .area div{width: calc(100% - 120px); margin-top: -3px;}
.area_box .area p{font-size: 17px; display: inline-block; line-height: 1.5; margin-right: 8px;}