@charset "UTF-8";

.visual{height: 960px; background: url("../img/visual.png") no-repeat; background-size: cover; background-position: center bottom;}
.visual .width{display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; height: 100%; padding-bottom: 100px; position: relative;}
.visual h2{margin-top: 38px; line-height: 135%; font-weight: 600; font-size: 5.8rem; color: #333;}
.visual p{font-size: 2.8rem; font-weight: 400; color: #333; margin-top: 30px; line-height: 130%;}
.visual .down{position: absolute; bottom: 40px; left: 0; right: 0; margin: 0 auto;}

.txt h6{font-size: 2.0rem; font-weight: bold;}
.txt h2{font-size: 4.2rem; font-weight: 700; color: #333;}

.p1 .txt{text-align: center; margin-bottom: 80px;}
.p1 .txt h6{margin-bottom: 23px; color: #999;}
.p1 .txt h2 b{color: var(--color); font-weight: 700; margin-bottom: 12px; display: block;}
.p1 .box_wrap{display: flex; gap: 45px 2%; max-width: 1200px; margin: 0 auto;}
.p1 .box_wrap .box{width: 50%;}
.p1 .box_wrap .box .tbox{border: 3px dashed #3ea2c4; border-radius: 34px; box-shadow: 7px 8px 0 rgba(28,151,205,0.2); padding: 0px 5px 40px 5px; text-align: center; margin-bottom: 70px;}
.p1 .box_wrap .box .tbox span{margin-top: -17px; display: block;}
.p1 .box_wrap .box .tbox h2{font-weight: 700; font-size: 5.0rem; line-height: 40%; border-bottom: 18px solid #a7d7ec; display: inline-block; padding: 0px 20px; color: var(--color); margin-top: 52px; margin-bottom: 43px;}
.p1 .box_wrap .box .tbox p{font-size: 2.2rem; font-weight: 500; color: #333; line-height: 135%; letter-spacing: -0.03em}
.p1 .box_wrap .box a{width: 96%; background: var(--color); border-radius: 15px; box-shadow: 5px 5px 1px rgba(7,64,112,1); display: flex; align-items: center; justify-content: center; gap: 0px 5%; height: 124px; margin: 0 auto;}
.p1 .box_wrap .box a span{font-weight: 800; font-size: 6.0rem; color: #6ecbf4;}

.p2{background: url("../img/p2-bg.png")no-repeat; background-size: cover; background-position: top;}
.p2 .txt{text-align: center; margin-bottom: 80px;}
.p2 .txt h6{color: #fff; margin-bottom: 23px;}
.p2 .txt h2{color: #fff;}
.p2 .box_area{position: relative;}
.p2 .box_area .text_wrap{position: absolute; width: 45%; z-index: 9; top: 8%; }
.p2 .box_area .text_area{ width: 100%; background: #fff; padding: 50px 40px 40px 45px; margin-bottom: 25px;}
.p2 .box_area .text_area .text_top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.p2 .box_area .text_area .text_top h2{font-size: 4.2rem; font-weight: 700; color: #333;}
.p2 .box_area .text_area .text_top ul{display: flex; }
.p2 .box_area .text_area .text_top ul li{margin-left: -3px;}
.p2 .box_area .text_area dl{display: flex; align-items: center; gap: 0px 15px; margin-bottom: 12px;}
.p2 .box_area .text_area dl dd{font-size: 2.3rem; color: #666; font-weight: 500;}
.p2 .box_area .text_area p{font-size: 2.2rem; font-weight: 400; color: #666; line-height: 145%; margin-top:30px;}
.p2 .box_area1 .swiper{width: 72%; margin: 0 0 0 auto;}
.p2 .box_area2 .swiper{width: 72%; margin: auto 0 0 0;}
.p2 .box_area .swiper img{width: 100%;}
.p2 .pa_btn{border: 1px solid #cacaca; width: 112px; background: #fff; display: flex;}
.p2 .pa_btn span{width: 56px; height: 56px; font-family: 'SUIT-Light'; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 2.4rem; color: #999;}
.p2 .pa_btn .pa-prev1{border-right: 1px solid #cacaca;}
.p2 .box_area1{margin-bottom: 150px;}
.p2 .box_area2{margin-bottom: 155px;}
.p2 .box_area2 .text_wrap{right: 0;}
.p2 .box_area2 .pa_btn{margin: 0 0 0 auto;}
.p2 .box_area2 .pa_btn .pb-prev{border-right: 1px solid #cacaca;}
.p2 .box_area3 .text_wrap{ top: 12%; }
.p2 .box_area4{margin-bottom: 0px;}
.p2 .box_area4 .swiper{margin:  auto 0 0 0;}
.p2 .box_area4 .text_wrap{right: 0;}

.p3 .txt{text-align: center; margin-bottom: 105px;}
.p3 .txt h3{font-size: 4.2rem; font-weight: bold; color: var(--color); margin-bottom: 12px;}
.p3 .txt h2{font-size: 5.5rem;}
.p3 .box_wrap{display: flex; align-items: center; gap: 25px 6%;}
.p3 .box_wrap .box{width: 50%; }
.p3 .box_wrap .box img{width: 100%; border-top: 5px solid #1c97cd;}
.p3 .box_wrap .box p{border: 1px solid #c4c4c4; padding: 22px; font-size: 2.4rem; font-weight: 600; color: #333;}

.p4 .txt{text-align: center; margin-bottom: 70px;}
.p4 .txt h6{font-size: 2.8rem; font-weight: bold; color: var(--color); margin-bottom: 12px;}
.p4 .txt h2{font-size: 5.5rem; color: #121212; font-weight: 600;}
.p4 .box_area{margin-top: 75px;}
.p4 .box_area h2{text-align: center; font-size: 2.4rem; font-weight: bold; color: #666; margin-bottom: 40px;}
.p4 .box_area .box_wrap{display: flex; gap: 30px 3%; flex-wrap: wrap;}
.p4 .box_area .box{width: 31%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.p4 .box_area .box .img img{width: 100%; transition: 0.3s all;}
.p4 .box_area .box .text{position: absolute; text-align: center; background: rgba(0,0,0,0.4); padding: 25px 0; width: 100%; color: #fff; }
.p4 .box_area .box .text h3{font-size: 3.2rem; font-weight: bold; margin-bottom: 10px;}
.p4 .box_area .box15 .text{padding: 20px 0;}
.p4 .box_area .box15 .text h3{font-size: 2.2rem; font-weight: bold; margin-bottom: 10px;}
.p4 .box_area .box .text a{font-size: 2.2rem; font-weight: 400; }
.p4 .box_area .box .text span{margin-left: 5px; font-family: 'SUIT-Regular';}
.p4 .box_area .box:hover img{transform: scale(1.1)}

.p5{background: url("../img/p5-bg.png") no-repeat; background-size: cover;}
.p5 .txt{text-align: center; margin-bottom: 45px;}
.p5 .txt h3{font-size: 2.4rem; font-weight: 500; color: #9dcbf2; margin-bottom: 10px;}
.p5 .txt h2{font-size: 4.2rem; font-weight: 600; color: #fff;}

#ft{background: #222;}
#ft .foot_logo{display: inline-block; margin-bottom: 22px;}
#ft .foot_info{display: flex; flex-wrap: wrap; gap: 0px 1%; justify-content: center;}
#ft .foot_info p{font-size: 1.8rem; color: #a3a3a3; letter-spacing: -0.05em; line-height: 140%;}
#ft .foot_info a{font-size: 1.8rem; color: #a3a3a3; letter-spacing: -0.05em; line-height: 140%;}
#ft .foot_info span{font-size: 1.8rem; color: #a3a3a3; line-height: 140%;}
#ft .copyright{ margin-top: 25px;}
#ft .copyright span{font-size: 1.5rem; color: #666;}

.quick{position: fixed; right: 30px; top: 35%; display: flex; flex-direction: column; gap: 10px 0; z-index: 10;}
.quick button{background: none; border: none;}


@media all and (max-width: 1400px){
    .visual .img img{width: 300px;}
    .visual h2{font-size: 4.2rem; margin-top: 25px;}
    .visual p{font-size: 2.2rem; margin-top: 20px;}
    .visual{height: 850px;}
}
@media all and (max-width: 1200px){
    .txt h6{font-size: 1.8rem;}
    .p1 .txt h6{margin-bottom: 15px;}
    .txt h2{font-size: 3.4rem;}
    .p1 .box_wrap .box .tbox h2{font-size: 4.0rem; border-bottom: 12px solid #a7d7ec; padding: 0px 10px; margin-top: 40px; margin-bottom: 30px;}
    .p1 .box_wrap .box .tbox p{font-size: 1.8rem;}
    .p1 .box_wrap .box .tbox span img{width: 90px;}
    .p1 .box_wrap .box .tbox span{margin-top: -14px;}
    .p1 .box_wrap .box a span{font-size: 4.0rem;}
    .p1 .box_wrap .box .p1-a1 {height: 40px;}
    .p1 .box_wrap .box .p1-a2 {height: 55px;}
    .p2 .box_area .text_area .text_top ul li img{width: 36px;}
    .p2 .box_area .text_area{padding: 30px 25px 25px 30px;}
    .p2 .box_area .text_area .text_top h2{font-size: 3.2rem;}
    .p2 .box_area .text_area dl dd{font-size: 2.0rem;}
    .p2 .box_area .text_area p{font-size: 1.8rem; margin-top: 15px;}
    .p2 .pa_btn span{width: 40px; height: 40px;}
    .p2 .pa_btn{width: 80px;}
    .p3 .txt h3{font-size: 3.4rem;}
    .p3 .txt h2{font-size: 4.2rem;}
    .p3 .box_wrap .box p{font-size: 2.0rem; padding: 20px 15px;}
    .p4 .txt h6{font-size: 2.4rem; margin-bottom: 8px;}
    .p4 .txt h2{font-size: 4.2rem;}
}
@media all and (max-width: 1024px){
    .mobile_btn{display: flex; align-items: center; gap: 0px 2%;}
    .head_btn a:first-child{padding: 0px 10px; height: 36px; font-size: 1.3rem;}
    .head_btn a:first-child img{width: 15px;}
    .head_btn a:last-child{padding: 0 10px; height: 36px; margin-left: 8px; font-size: 1.3rem;}
    .head_btn a:last-child img{width: 16px;}
    .head_btn{margin-left: 0px;}
    .p1 .box_wrap .box a{height: 90px;}
    .mobile_head .mobile_logo{width: 130px;}
    .p2 .box_area .text_wrap{position: initial; width: 100%;}
    .p2 .box_area{display: flex; flex-direction: column-reverse;}
    .p2 .box_area .text_area{margin-bottom: 10px;}
    .p2 .box_area .swiper{width: 100%;}
    .p3 .txt{margin-bottom: 60px;}
    .p4 .box_area .box .text h3{font-size: 2.4rem;}
    .p4 .box_area .box15 .text h3{font-size: 1.9rem;}
    .p4 .box_area .box .text a{font-size: 1.8rem;}
    .p4 .box_area h2{font-size: 2.2rem;}
}
@media all and (max-width: 900px){}
@media all and (max-width: 850px){
    .p1 .box_wrap .box .tbox{margin-bottom: 35px;}
    .p1 .box_wrap{flex-direction: column; gap: 75px 0;}
    .p1 .box_wrap .box{width: 100%}
    .txt h2{font-size: 2.5rem;}
    .p3 .txt h3{font-size: 2.4rem;}
    .p3 .txt h2{font-size: 3.4rem;}
    .p5 .txt h3{font-size: 2.0rem; margin-bottom: 5px;}
    .p5 .txt h2{font-size: 2.8rem;}
    .quick{right: 10px; }
    .quick li img{width: 45px;}
}
@media all and (max-width: 768px){
    .visual{height: 620px; margin-top: 58px;}
    .visual .img img{width: 180px;}
    .visual h2{font-size: 3.4rem;}
    .visual p{font-size: 1.8rem;}
    .visual .down img{width: 36px;}
    .p3 .box_wrap{flex-direction: column;}
    .p3 .box_wrap .box{width: 100%;}
    .p4 .box_area .box{width: 48.5%;}
    .p4 .box_area .box .text{padding: 15px 0;}
    .p4 .box_area .box15 .text{padding: 10px 0;}
    .p4 .box_area .box .text h3{font-size: 2.1rem;}
    .p4 .box_area .box15 .text h3{font-size: 1.7rem;}
    .p4 .box_area .box .text a{font-size: 1.5rem;}
    #formmail-write{padding: 15px 0 0 0;}
    #formmail-write .form-body{padding: 0 15px 0 15px;}
    #formmail-write .form-footer{margin-top: 25px;}
    #formmail-write .privacy-of-use-check{padding: 0 15px;}
    #formmail-write .form-group input[type=text]{height: 42px;}
    .p2 .box_area .text_area p{font-size: 1.5rem;}
    .p2 .box_area .text_area dl{margin-bottom: 6px;}
    .p2 .box_area .text_area dl img{width: 22px;}
    .p2 .box_area .text_area .text_top h2{font-size: 2.8rem;}
    .p1 .box_wrap{gap: 35px 0;}
}
@media all and (max-width: 650px){}