@charset "utf-8";
/* Reset */
html{font-size: 62.5%; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1;}
body{color: #330100; line-height: 1.7; word-spacing: 0; font-size: 1.6rem; font-weight: 300; font-family: 'Be Vietnam Pro', sans-serif;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%;}
html, body{overflow-x: hidden; width: 100%;}

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

input, 
textarea,
select,
option,
optgroup,
button{-webkit-appearance: none; border-radius: 0; outline: none; font-size: 1.6rem; line-height: 1.5; font-weight: 300; font-family: 'Be Vietnam Pro', sans-serif;}

.container{margin: 0 auto; max-width: 1310px; width: calc(100% - 40px);}
.w-full{width: 100%;}
.ex-link{text-decoration: underline; color: #18A5CE;}
.ex-link:hover{opacity: .8;}

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

@media (max-width: 767px){
    .only-pc{display: none !important;}
}

@media (max-width: 480px){
    body{font-size: 1.4rem;}
}

/* Header */
@media (min-width: 768px){
    header{background: #5FC5DE; position: relative; z-index: 992;}
    
    .logo{position: absolute; top: 95px; left: 0; right: 0; margin: 0 auto; max-width: 1310px; width: calc(100% - 20px); z-index: 500;}
    
    .menu{display: flex; font-size: 2rem; line-height: 1.2; color: #fff; text-align: center; margin: 0 auto; max-width: 1310px; width: calc(100% - 20px); z-index: 600;}
    .menu .parent{height: 70px; padding: 0 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative;}
    .menu .parent:after{content: ''; width: 0; height: 2px; background: #fff; display: block; position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); transition: .5s ease;}
    .menu .parent:hover:after{width: 100%;}
    
    .menu ul{position: absolute; top: 100%; left: 50%; right: 0; width: 100vw; height: 0; z-index: 600; transform: translateX(-50%);
    justify-content: center; display: flex; background: rgba(95,197,222,.8); overflow: hidden; visibility: hidden; transition: .5s ease;}
    .menu ul li{margin: 0 17px;}
    .menu ul figure{margin: 29px 0 12px; position: relative;}
    .menu li:hover ul{height: 200px; visibility: visible;}
    .menu li a.soon figure:after{content: "COMING SOON"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; background: rgba(0,0,0,.3); border-radius: 10px; font-size: 0.9em;}
}

@media (max-width: 1023px) and (min-width: 768px){
    .menu{font-size: 1.6rem;}
    .menu .parent{padding: 0 15px;}
    .menu ul li{margin: 0 12px; width: 160px;}
}

@media (max-width: 767px){
    .logo{position: absolute; top: 7.8vw; left: 36.8%; width: 26.4%; z-index: 500;}
    
    .menu{display: block; width: calc(100% - 65px); position: fixed; top: 0; left: 0; background: #5FC5DE; z-index: 992; color: #fff; padding: 20px 0 0 10px; transform: translateX(-100%); transition: .4s ease;}
    .menu > li:nth-of-type(1){margin-bottom: 10px;}
    .menu ul figure{display: none;}
    
    .menu .parent{background: rgba(255,255,255,.2); padding: 9px 0 7px 20px; display: block; font-size: min(4.8vw,2rem); line-height: 1.2;}
    .menu ul{padding: 8px 0 30px 0;}
    .menu ul a{display: block; font-size: min(3.84vw,1.6rem); line-height: 1.5; padding: 3px 0 3px 20px;}
    .menu ul a br{display: none;}
    
    .menu li a.soon p:after{content: "(Coming Soon)"; display: inline-block; margin-left: 0.5em;}
        
    header.is-show .menu{transform: translateX(0);}
}

/* Btn Menu */
@media (min-width: 768px){
    .btn-menu{display: none;}
}

@media (max-width: 767px){
    .btn-menu{width: 35px; height: 26px; position: fixed; top: 15px; right: 15px; z-index: 1000;}
    .btn-menu span{width: 100%; height: 2px; background: #18A5CE; display: block; position: absolute; left: 0; transition: .3s ease;}
    .btn-menu span:nth-of-type(1){top: 0;}
    .btn-menu span:nth-of-type(2){top: 12px;}
    .btn-menu span:nth-of-type(3){top: 24px;}

    header.is-show .btn-menu span:nth-of-type(1){top: 14px; transform: rotate(45deg);}
    header.is-show .btn-menu span:nth-of-type(2){opacity: 0;}
    header.is-show .btn-menu span:nth-of-type(3){top: 14px; transform: rotate(-45deg);}    
}

/* Float Btn Contact*/
.float-btn{position: fixed; right: 0; z-index: 995;}
.float-btn a{background: #EDAF07; color: #fff; text-align: center; font-size: 2.4rem; letter-spacing: 0.02em; line-height: 1; font-family: 'PT Sans Narrow', sans-serif;}
.float-btn a:before{content: ''; width: 42px; height: 37px; background: url("../img/common/ic_plane.svg") no-repeat top left/100% auto;}
.float-btn a:hover{background: #fcb804;}

@keyframes fly{
    0%{transform: translate(0,0);}
    50%{transform: translate(-50px,-50px);}
    55%{transform: translate(50px,50px); opacity: 0;}
    100%{transform: translate(0,0);}
}

@media (min-width: 768px){
    .float-btn{top: 0;}
    .float-btn a{height: 98px; width: 200px; border-radius: 0 0 20px 20px; padding: 55px 0 0 0; display: block; transition: .4s;}
    .float-btn a:before{display: block; position: absolute; top: 14px; left: 50%; margin-left: -21px; transition: .4s;}
    .float-btn a:hover:before{animation: fly .8s ease;}
    
    .float-btn.is-small a{width: 130px; height: 72px; border-radius: 0 0 10px 10px; padding: 40px 0 0 0; font-size: 2rem;}
    .float-btn.is-small a:before{top: 10px; width: 30px; height: 26px; margin-left: -14px;}
}

@media (max-width: 1023px) and (min-width: 768px){
    .float-btn a{width: 130px; font-size: 2rem;}
}

@media (max-width: 767px){
    .float-btn{width: 100%; bottom: 0;}
    .float-btn a{width: 100%; height: 60px; display: flex; justify-content: center; align-items: center;}
    .float-btn a:before{margin-right: 20px;}
}

/* Main */
.m-tit{font-size: min(4.2vw,5rem); line-height: 1.4; margin-bottom: 0.8em;}

.h-tit{max-width: 500px; width: 100%; margin: 0 auto; font-size: min(5vw,6rem); line-height: 1.2; font-weight: 300;}
.h-tit span{font-size: 39%; line-height: 1.2; border-bottom: 1px solid #330100; display: block; letter-spacing: 0.1em;}

@media (max-width: 767px){
    .m-tit{font-size: min(7vw,5rem);}
    
    .h-tit{width: 72%; text-align: center; font-size: 7.8vw;}    
}

/* Scroll Photo */
.js-photo{position: relative; width: 100%; overflow: hidden;}
.js-photo_scroll{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.js-photo_scroll img{width: 100%;}

/* Hero */
.hero{position: relative; z-index: 50;}
.hero-bg{overflow: hidden; position: relative; width: 100%; height: 56.25vw; z-index: -1;}
.hero-bg_scroll{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.hero-bg_scroll img{width: 100%;}

@media (max-width: 767px){
    .hero-bg{height:177vw;}
}

/* Pagetop */
#pagetop{width: 50px; height: 50px; background: #18A5CE; text-align: center; position: fixed; bottom: 10px; right: 10px; z-index: 500; display: none; cursor: pointer;}
#pagetop:after{content: ''; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 8px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: 20px;}
#pagetop:hover{background: #5FC5DE;}

@media (max-width: 767px){
    #pagetop{width: 40px; height: 40px; bottom: 70px;}
    #pagetop:after{padding: 6px; margin-top: 17px;}
}

/* Footer */
footer{background: #5FC5DE; color: #fff;}

.footer-wrap{padding: 40px 20px; display: flex; justify-content: center; align-items: center;}
.footer-nav{display: flex; justify-content: space-between; width: 750px; margin-right: 100px;}
.footer-nav .parent{font-size: 1.6rem; line-height: 1.6; font-weight: 400; padding: 0 0 5px; display: block;}
.footer-nav ul li{font-size: 1.5rem; line-height: 1.6;}
.footer-nav a[href]:hover{text-decoration: underline;}

.copyright{background: #18A5CE; font-size: 1.4rem; padding: 11px 0;}

@media (max-width: 1023px) and (min-width: 768px){
    .footer-nav{width: 79%; margin-right: 3%;}
    .footer-logo{width: 18%;}
}

@media (max-width: 767px){
    footer{padding-bottom: 60px;}
    .footer-wrap{flex-wrap: wrap; width: 100%; padding: 40px 20px 15px;}
    .footer-logo{order: -1; text-align: center; width: 36%; margin: 0 auto 30px;}
    .footer-nav{width: 100%; margin: 0; flex-wrap: wrap;}
    .footer-nav .parent{font-size: min(4.2vw,1.6rem);}
    .footer-nav li{width: 50%; margin: 0 0 25px;}
    .footer-nav li:last-of-type{width: 100%;}
    .footer-nav ul li{margin: 0; width: 100%; font-size: min(4vw,1.5rem);}
    
    .copyright{text-align: center; font-size: 1.2rem;}
    .copyright p{width: 100%;}
}

/* Animate */
.inView{}
.fade-in{opacity: 0; transition: opacity 1.5s ease;}
.fade-in.is-view{opacity: 1;}

.fade-up{opacity: 0; transform: translateY(60px); -webkit-transform: translateY(60px); transition: opacity 1.5s ease, transform 1.5s ease;}
.fade-up.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fade-down{opacity: 0; transform: translateY(-60px); -webkit-transform: translateY(-60px); transition: opacity 1.5s ease, transform 1.5s ease;}
.fade-down.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fade-left{opacity: 0; transform: translateX(-60px); -webkit-transform: translateX(-60px); transition: opacity 1.5s ease, transform 1.5s ease;}
.fade-left.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.fade-right{opacity: 0; transform: translateX(60px); -webkit-transform: translateX(60px); transition: opacity 1.5s ease, transform 1.5s ease;}
.fade-right.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}

.zoom-in{opacity: 0; overflow: hidden; transform: scale(0.7,0.7); -webkit-transform: scale(0.7,0.7); transition: opacity 1.5s ease, transform 1.5s ease;}
.zoom-in.is-view{opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1);}

.zoom-out{opacity: 0; overflow: hidden; transform: scale(1.3,1.3); -webkit-transform: scale(1.3,1.3); transition: opacity 1.5s ease, transform 1.5s ease;}
.zoom-out.is-view{opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1);}

@media (min-width: 768px){
    .delay1{transition-delay: .3s;}
    .delay2{transition-delay: .6s;}
    .delay3{transition-delay: .9s;}
}