@charset "utf-8";
/* ------- Reset ------- */
html{font-size: 62.5%;}
body{color: #000; line-height: 2; word-spacing: 0; font-size: 1.6rem; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-family: "游ゴシック体", "YuGothic", "游ゴシック Regular", "Yu Gothic Regular", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; font-weight: 400; font-feature-settings: "palt";}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
th{text-align: left; font-weight: normal;}
a{color: inherit; text-decoration: none;}
img{vertical-align: bottom; max-width: 100%;}

#wrapper{max-width: 2560px; margin: 0 auto; overflow-x: hidden;}
.container{max-width: 1160px; width: 92%; margin: 0 auto;}
.pink{color: #e4007f;}

h1{font-size: 1.2rem; font-weight: normal; line-height: 1.5; color: #959595; position: absolute; top: 10px; left: 0; right: 0; max-width: 1336px; width: 96%; margin: 0 auto;}

h2{text-align: center; margin: 0 0 0.83em; font-size: 3.6rem; line-height: 1.4;}
h2 span{font-size: 2.4rem; color: #00a6ea; display: block; margin: 0 0 0.83em;}
h2.titImg{margin: 0 0 60px; line-height: 1;}

.bnr-contact a:hover{opacity: .8;}

.btn-more{max-width: 300px; width: 100%; border: 1px solid #000; font-size: 1.8rem; font-weight: bold; height: 60px; display: flex; justify-content: center; align-items: center; position: relative; background: #fff; z-index: 10; box-shadow: 4px 4px 0px 0px #7fd4f6; transition: 0.25s;}
.btn-more:after{content: ''; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin: 0 0 0 10px;}
.btn-more:hover{box-shadow: 0px 0px 0px 0px #015487, inset 300px 60px 0 0 #015487; border: 1px solid #015487; color: #fff;}
.btn-more:hover:after{border: solid white; border-width: 0 2px 2px 0;}

@media only screen and (min-width: 768px){
    a[href^="tel:"]{pointer-events: none;}
    .onlySp{display: none;}
}

@media only screen and (max-width: 767px){
    a[href^="tel:"]{pointer-events: auto;}    
    .onlyPc{display: none;}
    
    h2{font-size: 2.4rem;}
    h2 span{font-size: 1.8rem;}
    h2.titImg{margin: 0 0 40px;}
}

@media print{
    body{color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}


/* mv */
#mv{position: relative; background: url("../img/mv.jpg") no-repeat top center; height: 730px;}
#mv .logoBox {max-width: 1336px; width: 96%; margin: 0 auto; padding: 40px 0 0 0; display: block;}
@media only screen and (max-width: 1366px){
    #mv{height: 53.44vw; background-size: auto 100%;}
}

@media only screen and (max-width: 767px){
    #mv{height: auto; background: none;}
  #mv .logoBox { width: 248px; position: absolute; left: 10px; top:10px;}
}


/* gnav */
#gnav{background: linear-gradient(to right, #fff 0%, #fff 80%, #fff45c 100%); display: flex; position: absolute; bottom: -50px; left: 0; right: 0; z-index: 100;}
#gnav a{padding: 30px 0 19px; line-height: 1; display: block;}
#gnav a:hover{background-color: rgba(0,0,0,.04);}

#gnav li{position: relative; text-align: center;}
#gnav li:nth-of-type(1){width: 15.95%;}
#gnav li:nth-of-type(2){width: 16.64%;}
#gnav li:nth-of-type(3){width: 15%;}
#gnav li:nth-of-type(4){width: 16.90%;}
#gnav li:nth-of-type(5){width: 15.34%;}
#gnav li:nth-of-type(6){width: 20.17%; background: #fff45c;}

#gnav li:nth-of-type(1):after,
#gnav li:nth-of-type(2):after,
#gnav li:nth-of-type(3):after,
#gnav li:nth-of-type(4):after{content: ''; position: absolute; top: 50%; right: 0; margin-top: -20px; width: 1px; height: 40px; background: #c9c9c9; display: block;}

@media only screen and (max-width: 1023px){
    #gnav{bottom: -5.5vw;}
    #gnav a{padding: 4vw 0 2vw;}
    #gnav img{height: 5vw;}
    #gnav li:nth-of-type(1):after,
    #gnav li:nth-of-type(2):after,
    #gnav li:nth-of-type(3):after,
    #gnav li:nth-of-type(4):after{height: 4vw; margin-top: -2vw;}
}


/* home */
#home{background: #ebf3f6; padding: 165px 0 90px; position: relative; z-index: 10;}
#home:before{content: ''; background: url("../img/bg_01.png") no-repeat top left; width: 1280px; height: 945px; position: absolute; top: 0; left: 50%; z-index: -1; margin-left: -1280px;}
#home:after{content: ''; background: url("../img/bg_02.png") no-repeat top right; width: 1280px; height: 1703px; position: absolute; top: 0; right: 50%; z-index: -1; margin-right: -1280px;}

#home h2{text-align: left;}
#home-txt{max-width: 660px; margin: 0 0 50px;}
#home-tit{max-width: 660px; font-size: 2.4rem; background: #009ee2; color: #fff; letter-spacing: 0.1em; line-height: 1.2; text-align: center; padding: 5px;}
#home-img{max-width: 660px; display: flex; flex-wrap: wrap;}
#home-img li{width: 21.22%; margin: 5.04% 5.04% 0 0;}
#home-img li:nth-of-type(4n){margin: 5.04% 0 0 0;}

@media only screen and (max-width: 1366px){
    #home:before{width: 25.5vw; height: 100%; margin-left: 0; left: 0; background-size: 100% auto;}
}

@media only screen and (max-width: 1199px) and (min-width: 768px){
    #home-txt{width: 50vw;}
}

@media only screen and (max-width: 767px){
    #home{padding: 80px 0;}
    #home:before{width: 32.13vw; height: 44vw; background-size: 100% 100%;}
    #home:after{display: none;}
    #home-txt{max-width: 767px;}
    #home-tit{max-width: 767px; font-size: 1.8rem;}
    #home-img{max-width: 767px;}
    #home-img img{width: 100%;}
}


/* point */
#point{padding: 70px 0 525px; position: relative;}
#point:after{content: ''; background: url("../img/bg_03.png") no-repeat bottom left/100% auto; width: 53.2%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: -1;}

#point-txt{text-align: center; margin: 0 0 35px;}
#point-txt span{text-decoration: underline;}
#point-box{display: flex; flex-wrap: wrap;}
.point-item{width: 31.04%; margin: 0 3.44% 40px 0; font-size: 1.2rem;}
.point-item:nth-of-type(3n){margin: 0 0 40px;}
.point-item .tit{font-size: 1.8rem; line-height: 1.5; font-weight: bold; text-align: center; padding: 12px 0 8px;}

@media only screen and (max-width: 767px){
    #point{padding: 70px 0 270px;}
    #point:after{width: 65%; left: -11%;}
    .point-item{width: 48%; margin: 0 4% 30px 0;}
    .point-item:nth-of-type(2n){margin: 0 0 30px 0;}
}

@media only screen and (max-width: 480px){
    .point-item{width: 100%; margin: 0 0 30px 0 !important;}
    .point-item img{width: 100%;}
}


/* advantages */
#advantages{padding: 0 0 85px; position: relative;}
#advantages:before{content: ''; position: absolute; top: 365px; bottom: 0; left: 0; width: 100%; background: #273b44; z-index: -1;}
#advantages .container{margin-top: -365px;}
#advantages h3{font-size: 3.6rem; line-height: 1.4; margin: 15px 0 25px;}
#advantages .btn-more{margin: 25px 0 0 0;}

.advantages-box{display: flex; flex-wrap: wrap; margin: 0 0 30px; background: #fff;}
.advantages-boxtxt{width: 50%; padding: 4%;}
.advantages-boxtxt .note{display: flex; flex-wrap: wrap;}
.advantages-boxtxt .note li{font-size: 1.8rem; line-height: 1; padding: 5px 8px 4px; color: #fff; background: #00a6ea; font-weight: bold; margin: 0 5px 5px 0;}

.advantages-boximg{width: 50%; position: relative;}
.advantages-boximg p{position: absolute; bottom: 10px; left: 10px; line-height: 1;}
.advantages-boximg p.white{color: #fff;}
.advantages-boximg p.right{right: 10px; left: auto;}

@media only screen and (min-width: 1200px){
    .advantages-box{align-items: center;}
}

@media only screen and (max-width: 1199px) and (min-width: 1024px){
    .advantages-boximg img{object-fit: cover; height: 100%;}
}

@media only screen and (max-width: 1023px){
    #advantages .btn-more{margin: 25px auto 0;}
    
    .advantages-box{max-width: 767px; margin: 0 auto 30px;}
    .advantages-boxtxt{width: 100%;}
    .advantages-boximg{width: 100%; order: -1;}
    .advantages-boximg .onlyPc{display: none;}
    .advantages-boximg .onlySp{display: block;}
}

@media only screen and (max-width: 767px){
    #advantages{padding: 0 0 50px;}
    #advantages:before{top: 180px;}
    #advantages .container{margin-top: -180px;}
    #advantages h2 img{width: 290px;}
    #advantages h3{font-size: 2.4rem;}
    
    .advantages-boxtxt{padding: 25px 20px 30px;}
    .advantages-boxtxt .note li{font-size: 1.6rem;}    
}


/* price */
#price{background: #ebf3f6; padding: 120px 0;}
#price h3{margin: 0 0 17px 13px; line-height: 1;}
#price .btn-more{margin: 0 auto 50px;}
.price-box{max-width: 808px; margin: 0 auto 50px;}
.price-list{display: flex;}
.price-list li{width: 24.753%; margin: 0 0.3293% 0 0;}
.price-list li:nth-of-type(4n){margin: 0;}

@media only screen and (max-width: 767px){ 
    #price{padding: 80px 0;}
    #price h2 img{width: 141px;}
    
    #price-box1 h3 img{max-width: 300px; width: 67%;}
    #price-box2 h3 img{max-width: 349px; width: 78%;}
    #price-box3 h3 img{max-width: 448px; width: 100%;}
}

@media only screen and (max-width: 480px){ 
    .price-list{flex-wrap: wrap;}
    .price-list li{width: 49%; margin: 0 2% 2% 0;}
    .price-list li:nth-of-type(2n){margin: 0 0 2%;}
    .price-list img{width: 100%;}
}


/* topics */
#topics{background: #e6e6e6; padding: 120px 0 100px;}
.topics-box{margin: 0 0 60px;}
.topics-box:last-of-type{margin: 0;}

.topics-list{display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 0 30px;}
.topics-list li{width: 31.035%; margin: 0 3.4475% 0 0;}
.topics-list li:last-of-type{margin: 0;}

.topics-list2{display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 0 30px;}
.topics-list2 li{width: 48.276%; margin: 0 3.448% 0 0;}
.topics-list2 li:last-of-type{margin: 0;}

.topics-txt{font-size: 3.6rem; font-weight: bold; text-align: center;}
.topics-txt .line{display: inline-block; position: relative;}
.topics-txt .line:after{content: ''; width: 100%; height: 2px; background: #e4007f; position: absolute; bottom: 0.3em; left: 0;}

.topics-txt big{font-size: 6rem; line-height: 1;}

@media only screen and (max-width: 767px){ 
    #topics{padding: 80px 0;}
    #topics h2 img{width: 212px;}
    
    .topics-txt{font-size: 2.4rem;}
    .topics-txt big{font-size: 4rem;}
    
    /* .topics-list li{width: 80%; margin: 0 auto 20px; text-align: center;}
    .topics-list li:last-of-type{margin: 0 auto;} */
    .topics-list2 li{width: 100%; margin: 0 0 20px; text-align: center;}
}


/* type */
#type{background: #ebf3f6; padding: 150px 0 190px;}
#type-box{position: relative; display: flex;}

#type #txt-top{position: absolute; top: -55px; left: 0;}
#type #txt-bot{position: absolute; bottom: -70px; left: 0;}

#type-chart{width: 60px; margin: 0 20px 0 70px; position: relative; background: #fff;}
#type-chart:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-image: linear-gradient(to top, #fff100 0%, #fff100 35%, #fff 65%, #fff 100%); transition: height 1s 1s;}
#type-chart.is-view:before{height: 100%;}

#type-list{max-width: 860px;}
.type-item{margin: 0 0 30px;}
.type-item:last-of-type{margin: 0;}
.type-tit{font-size: 2.4rem; line-height: 1.4; font-weight: bold; background: #b2e4f9; padding: 13px 40px;}
.type-txt{background: #fff; padding: 20px 40px;}

@media only screen and (max-width: 767px){ 
    #type{padding: 80px 0 120px;}
    #type h2{margin: 0 0 70px;}
    #type h2 img{width: 101px;}
    .type-tit{font-size: 1.8rem; padding: 10px 15px;}
    .type-txt{padding: 15px;}
    
    #type #txt-top{width: 142px; top: -50px; left: -5px;}
    #type #txt-bot{width: 142px; bottom: -50px;}
    
    #type-chart{margin: 0 10px 0 15px; width: 15px;}
    #type-list{width: calc(100% - 40px);}
}


/* works */
#works{padding: 150px 0;}
#works-box{display: flex; flex-wrap: wrap;}
.works-item{width: 22.42%; margin: 0 3.44% 0 0; font-size: 1.2rem;}
.works-item:last-of-type{margin: 0;}
.works-item .tit{font-size: 1.8rem; line-height: 1.6; font-weight: bold; padding: 25px 0 10px;}

@media only screen and (max-width: 767px){ 
    #works{padding: 80px 0 50px;}
    #works h2 img{width: 176px;}
    
    .works-item{width: 48%; margin: 0 4% 30px 0;}
    .works-item:nth-of-type(2n){margin: 0 0 30px;}
    .works-item img{width: 100%;}
    .works-item .tit{font-size: 1.6rem; padding: 20px 0 10px;}
}


/* area */
#area{max-width: 1350px; margin: 0 auto 160px; display: flex; flex-wrap: wrap; align-items: center; background: #01578e; color: #fff;}
#area-left{width: 50%; font-size: 1.8rem; line-height: 1.7; padding: 2% 4%;}
#area-right{width: 50%;}
#area h2{text-align: left;}
#area h2 span{color: #fff100;}
#area-list{display: flex; flex-wrap: wrap; padding: 15px 0 10px 0;}
#area-list li{font-size: 2.4rem; background: #fff; color: #000; line-height: 1.4; padding: 0.4em 0.9em; margin: 0 16px 27px 0;}
#area-list li:nth-of-type(3){margin-right: 10%;}

@media only screen and (max-width: 1480px) and (min-width: 1024px){ 
    #area-list li {font-size: 1.7vw; margin: 0 2% 3% 0;}
    #area-list li:nth-of-type(3){margin-right: 18%;}
}

@media only screen and (max-width: 1023px){ 
    #area{max-width: 675px;}
    #area-left{width: 100%; padding: 7%;}
    #area-right{width: 100%;}
}

@media only screen and (max-width: 767px){
    #area{margin: 0 auto 80px;}
    #area-left{padding: 30px 20px; font-size: 1.6rem;}
    #area-list{padding: 10px 0;}
    #area-list li{font-size: 3.6vw; margin: 0 2% 3% 0;}    
}


/* schedule */
#schedule{margin: 0 auto 140px;}
#schedule h2{margin: 0 0 40px;}
#schedule-txt{text-align: center; margin: 0 0 35px;}
#schedule-img{margin: 0 0 80px; display: block;}

@media only screen and (max-width: 767px){ 
    #schedule{margin: 0 auto 80px;}
    #schedule h2 img{width: 270px;}
    #schedule-img{margin: 0 0 50px;}
}


/* footer */
footer{background: #01578e; color: #fff; padding: 30px 0; font-weight: bold;}
footer .container{max-width: 1300px; display: flex; justify-content: space-between; align-items: center;}
footer p{font-size: 1.4rem; width: 420px;}
footer a{max-width: 300px; width: 100%; height: 60px; border: 1px solid #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 0;}
footer a:before,
footer a:after{content: ''; position: absolute; width: 0; height: 30px; background: #fff; transition: width 0.25s; z-index: -1;}
footer a:before{top: 0; right: 0;}
footer a:after{bottom: 0; left: 0;}
footer a:hover{color: #01578e;}
footer a:hover:before,
footer a:hover:after{width: 100%;}

@media only screen and (max-width: 767px){ 
    footer .container{flex-wrap: wrap; justify-content: center;}
    footer a{order: -1; margin: 0 auto 20px;}    
}

@media only screen and (max-width: 480px){ 
    footer p{font-size: 3.2vw; width: 100%; text-align: center;}
}


/* ---------- Effect ---------- */
.fadeIn{opacity: 0; transition: all .8s;}
.fadeIn.is-view{opacity: 1;}

.fadeUp{opacity: 0; transform: translateY(80px); -webkit-transform: translateY(80px); transition: all .8s;}
.fadeUp.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fadeRight{opacity: 0; transform: translateX(-80px); -webkit-transform: translateX(-80px); transition: all .8s;}
.fadeRight.is-view{opacity: 1; transform: translateX(0); -webkit-transform: translateX(0);}

.fadeLeft{opacity: 0; transform: translateX(80px); -webkit-transform: translateX(80px); transition: all .8s;}
.fadeLeft.is-view{opacity: 1; transform: translateX(0); -webkit-transform: translateX(0);}

.zoomIn{opacity: 0; transform: scale(1.1); -webkit-transform: scale(1.1); transition: all .8s;}
.zoomIn.is-view{opacity: 1; transform: scale(1); -webkit-transform: scale(1);}

.slideRight{
transition: -webkit-clip-path 1s cubic-bezier(.19,1,.22,1) .1s;
transition: clip-path 1s cubic-bezier(.19,1,.22,1) .1s;
transition: clip-path 1s cubic-bezier(.19,1,.22,1) .1s,-webkit-clip-path 1s cubic-bezier(.19,1,.22,1) .1s;
transition-delay: 0.1s, 0.1s;
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);}
.slideRight.is-view{-webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);}

.delay1{transition-delay: .1s;}
.delay2{transition-delay: .2s;}
.delay3{transition-delay: .3s;}
.delay4{transition-delay: .4s;}
.delay5{transition-delay: .5s;}