@charset "utf-8";
/* Reset */
html{font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;}
body{color: #333333; line-height: 1.5; word-spacing: 0; font-size: 1.6rem; font-weight: 700; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-family: 'Noto Sans JP', sans-serif;}

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

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

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

/* Alert Sp*/
.spAlert{display: none;}

@media (max-width: 1023px) and (orientation: landscape) {
    .spAlert{background-color: rgba(0,0,0,.8); display: flex; justify-content: center; align-items: center; text-align: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: #fff;}
    .spAlert-img{width: 120px; margin: 0 auto 30px;}
    .spAlert-message{font-size: 1.8rem;}
}

/* Header */
header{position: fixed; top: 0; left: 0; width: 100%; height: 56px; background-color: rgba(250,249,250,.55); z-index: 1000;}
h1{margin: 11px 0 0 16px;}

#btn-menu{position: fixed; top: 10px; right: 16px; width: 38px; height: 38px; z-index: 1000; cursor: pointer;}
#btn-menu span{position: absolute; left: 0; width: 100%; height: 2px; background: #000; transition: .3s;}
#btn-menu span:nth-of-type(1){top: 5px;}
#btn-menu span:nth-of-type(2){top: 18px;}
#btn-menu span:nth-of-type(3){top: 31px;}
#btn-menu.is-open span:nth-of-type(1){top: 18px; transform: rotate(45deg);}
#btn-menu.is-open span:nth-of-type(2){display: none;}
#btn-menu.is-open span:nth-of-type(3){top: 18px; transform: rotate(-45deg);}

#menu{background-color: rgba(240,240,240,1); position: fixed; top: 0; right: 0; width: 360px; z-index: -1; opacity: 0;
transition: 0.5s; -webkit-transition: 0.5s;}
#menu ul{padding: 6% 8%;}
#menu li{font-size: 2rem; margin: 0 0 5%;
transform-origin: left bottom;
transform: scaleY(0); -webkit-transform: scaleY(0);
transition: transform .9s cubic-bezier(.19,1,.22,1) .5s;
-webkit-transition: transform .9s cubic-bezier(.19,1,.22,1) .5s;}
#menu li:last-of-type{margin: 0;}

#menu li a{position: relative; pointer-events: none; display: inline-block;}
#menu li.active a,
#menu li a:hover{color: #0099b1;}
#menu.is-open{opacity: 1; z-index: 999;}
#menu.is-open li{opacity: 1; transform: scaleY(1); -webkit-transform: scaleY(1);}
#menu.is-open li a{pointer-events: auto;}

/* Main */
h2{font-size: 1.5rem;}
h2 span{font-size: 2.8rem; line-height: 1.1; font-weight: 900; color: #0099b1; display: block;}

.section-wrap{max-width: 1020px; width: calc(100% - 30px); margin: 0 auto; padding: 85px 0 0 0;}

@media (max-width: 767px){  
    h2 span{font-size: 2.4rem;}
    #menu{width: 320px;}
    #menu li{font-size: 1.7rem;}
}

@media (min-height: 570px) and (min-width: 768px){
    .section-outer{display: flex; justify-content: center; align-items: center; height: calc(100vh - 180px);}
    .section-inner{width: 100%;}    
}

@media (max-width: 767px) and (max-height: 667px) and (orientation: portrait){
    .section-wrap{padding: 65px 0 0 0;}
}

/* Mv-Pc & Mv-Sp Landscape */
.mv{background: url("../img/mv_bg.jpg") no-repeat center center/cover; height: 100vh !important; overflow: hidden !important; display: block !important;}
.mv .fp-scroller{position: relative; overflow: hidden;}

[class*="mv-img"]{position: absolute; z-index: 5; text-align: center;}
[class*="mv-img"] img{width: 100%;}

.mv-img_top1{top: 0; left: 0; width: 10%; text-align: left;}
.mv-img_top2{top: 0; left: 10%; width: 30%;}
.mv-img_top3{top: 0; left: 40%; width: 30%;}
.mv-img_top4{top: 0; left: 70%; width: 30%; text-align: right;}

.mv-img_bot1{bottom: 0; left: 0; width: 40%; text-align: left;}
.mv-img_bot2{bottom: 0; left: 40%; width: 30%;}
.mv-img_bot3{bottom: 0; left: 70%; width: 30%; text-align: right;}

[class*="mv-txt"]{position: absolute; z-index: 10; text-align: center;}
[class*="mv-txt"] img{width: 100%;}

.mv-txt_jp{width: 100%; left: 0; top: 50%; transform: translateY(-50%);}
.mv-txt_top{top: 0;}
.mv-txt_top1{left: 4.58%; width: 10.36%;}
.mv-txt_top2{left: 35.94%; width: 9.01%;}
.mv-txt_top3{left: 69.22%; width: 9.58%;}
.mv-txt_cen{width: 100%; left: 0; top: 50%; transform: translateY(-50%);}
.mv-txt_bot{bottom: 0;}
.mv-txt_bot1{left: 27.03%; width: 16.51%;}
.mv-txt_bot2{left: 63.44%; width: 11.04%;}

[class*="step"]{opacity: 0; transition: 1.2s ease;}
.is-show[class*="step"]{opacity: 1;}

.step1{transition: 1.5s ease;}
.step2{transition: 2s ease;}

.step3{margin-left: -50px;}
.step3.is-show{margin-left: 0;}

.step4{margin-left: 50px;}
.step4.is-show{margin-left: 0;}

.step6{margin-left: -50px;}
.step6.is-show{margin-left: 0;}

.step7{margin-top: -50px;}
.step7.is-show{margin-top: 0;}

.step8{margin-bottom: -50px;}
.step8.is-show{margin-bottom: 0;}

.step9{margin-bottom: -50px;}
.step9.is-show{margin-bottom: 0;}

.step10{margin-top: -50px;}
.step10.is-show{margin-top: 0;}

.step11{margin-top: -50px;}
.step11.is-show{margin-top: 0;}

@media (max-height: 56.25vw) and (min-width: 768px){
    [class*="mv-img"] img,
    [class*="mv-txt"] img{height: 100vh; width: auto;}
}

@media (max-width: 767px) and (orientation: landscape){
    .mvSp{background: url("../img/mvsp_bg.jpg") no-repeat center center/cover; height: 100vh !important; overflow: hidden !important; display: block !important;}
    .mvSp .fp-scroller{position: relative; overflow: hidden;}
    
    [class*="mvSp-img"],
    [class*="mvSp-txt"]{display: none !important;}
}

/* Mv Sp Portrait */
@media (max-width: 767px) and (orientation: portrait){
    .mvSp{background: url("../img/mvsp_bg.jpg") no-repeat center center/cover; height: 100vh !important; overflow: hidden !important; display: block !important;}
    .mvSp .fp-scroller{position: relative; overflow: hidden;}
    
    [class*="mv-img"],
    [class*="mv-txt"]{display: none !important;}
    
    [class*="mvSp-img"]{position: absolute; z-index: 5; width: 100%;}
    [class*="mvSp-img"] img{width: 100%;}
    
    .mvSp-img_topright{top: 0; right: 0; text-align: right;}    
    .mvSp-img_cenleft{top: 50%; left: 0; transform: translateY(-50%);}
    .mvSp-img_cenright{top: 50%; right: 0; text-align: right; transform: translateY(-50%);}
    .mvSp-img_botleft{bottom: 0; left: 0;}
    .mvSp-img_botright{bottom: 0; right: 0; text-align: right;}
    
    [class*="mvSp-txt"]{position: absolute; z-index: 10; text-align: center; width: 100%; top: 50%; transform: translateY(-50%); display: none;}
    [class*="mvSp-txt"] img{width: 100%;}
    
    .mvSp-txt_jp{left: 0;}
    .mvSp-txt_top{right: 0; text-align: right;}    
    .mvSp-txt_cen{left: 0;}
    .mvSp-txt_bot{left: 0; text-align: left;}
}

@media (max-height: 193vw) and (max-width: 767px){
    [class*="mvSp-img"] img{height: 100vh; width: auto;}
    [class*="mvSp-txt"] img{height: 90vh; width: auto;}
}


/* Business */
.business-img{text-align: center; padding: 60px 0;}

@media (max-width: 767px){
    .business h2{padding: 0 15px;}
    .business .section-wrap{width: 100%;}
    .business-img{padding: 20px 0 0 0; max-width: 480px; margin: 0 auto;}
}

@media (max-width: 767px) and (max-height: 736px) and (orientation: portrait){
    .business-img{width: 75%;}
}
    
/* Marketing */
.marketing-head{display: flex; flex-wrap: wrap;}
.marketing-head h2{margin: 0 30px 0 0;}
.marketing-cont{padding: 20px 0;}
.marketing-note{text-align: right; font-size: 1.1rem; line-height: 1.3; font-weight: 500;}
.marketing-note p{display: inline-block; text-align: left;}

.goals{width: 1030px; margin: 0 -5px;}
.goals-tbl{width: 1020px; font-size: 1.2rem; font-weight: 500; border-spacing: 5px;}
[class*="goals-tit_"]{font-size: 1.3rem; line-height: 1.3; font-weight: 700; text-align: center; border: 2px solid #000; background: #fff;}
.goals-tit_none{border: none;}
.goals-tit_top{padding: 3px 0;}
.goals-tit_top span{display: block;}
.goals-tit_left{width: 105px; position: relative;}
.goals-tit_left p{position: relative; z-index: 10; height: 118px; display: flex; justify-content: center; align-items: center;}
.goals-tit_left p:after{content: ''; position: absolute; bottom: -19px; left: 38px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 28px solid #251e1c;}

.goals-tit_left.row2{z-index: 10;}
.goals-tit_left.row3{z-index: 9;}
.goals-tit_left.row4{z-index: 8;}

.goals-list li{position: relative; padding: 0 0 0 1em;}
.goals-list li:before{content: '・'; position: absolute; top: 0; left: 0;}

[class*="goals-bg"]{width: 178px; padding: 5px 4px 5px 5px; height: 118px;}
.goals-bg1{background: linear-gradient(to right, #ffffff, #d9ebef);}
.goals-bg2{background: linear-gradient(to right, #d9ebef, #b2d7df);}
.goals-bg3{background: linear-gradient(to right, #e8f2f5, #a3cfda);}
.goals-bg4{background: linear-gradient(to right, #c3dfe5, #82bfcd);}
.goals-bg5{background: linear-gradient(to right, #b2d7df, #239ab0);}

.goals tr:nth-of-type(2) td,
.goals tr:nth-of-type(3) td{vertical-align: top;}
.goals tr:nth-of-type(4) td{text-align: center;}

@media (max-width: 1080px){
    .goals{width: 100%; padding-bottom: 6px; margin-bottom: 10px; overflow: auto; -webkit-overflow-scrolling: touch;}
    .sticky{left: 0; z-index: 1;}
}

@media (max-width: 767px){
    .marketing-head{display: block; margin: 0 0 15px;}
    .marketing-head h2{margin: 0 0 5px;}
    .marketing-scroll{line-height: 0;}
    .marketing-cont{padding: 15px 0 10px;}
    .marketing-note{text-align: left;}
}

@media (max-width: 767px) and (max-height: 667px) and (orientation: portrait){
    .marketing-head{margin: 0 0 10px; font-size: 1.5rem;}
    .marketing-head h2{margin: 0 0 10px;}
    
    .marketing-cont{padding: 0;}
    .goals-tit_left{height: 75px;}
    .goals-tit_left p{height: 75px;}
    [class*="goals-bg"]{height: 75px;}
    .goals{margin-bottom: 5px;}
    .goals-tbl{font-size: 1.1rem;}
}

/* Profile - Contact */
.profile-box{width: 670px; margin: 0 auto; display: flex; justify-content: space-between; padding: 50px 0;}
.profile-item{margin: 0 0 5px; min-height: 72px;}
.profile-tit{color: #0099b1;}

.profile-officer{display: flex;}
.profile-officer dt{width: 100px;}
.profile-add{display: flex;}
.profile-add dt{width: 105px;}

.profile-content li{position: relative; padding: 0 0 0 1em;}
.profile-content li:before{content: '●'; position: absolute; top: 0; left: 0;}

.contact .fp-tableCell{vertical-align: middle;}
.gmap{width: 400px; margin: 0 auto 40px; text-align: center;}
.gmap iframe{width: 100%; height: 310px;}
.btn-contact{background: #239ab0; color: #fff; display: block; text-align: center; padding: 9px 0;}
.btn-contact span{display: block; font-size: 2.2rem; line-height: 1.3;}
.btn-contact p{position: relative; display: inline-block;}
.btn-contact p:before{content: ''; background: url("../img/ic_mail.svg") no-repeat; width: 37px; height: 29px; display: block; position: absolute; top: 50%; left: -64px; margin-top: -15px;}
.btn-contact:hover{background: #0099b1;}

.copyright{text-align: center; font-size: 1rem; padding: 30px 0; font-weight: 500;}

@media (max-width: 767px){
    .profile .section-wrap{width: 100%;}
    .profile h2{padding: 0 15px;}
    
    .profile-box{width: 100%; display: block; padding: 5px 15px 40px;}
    .profile-item{margin: 0 5px; min-height: 1px;}
    
    .gmap{width: 100%; max-width: 480px; padding: 0 15px; margin: 0 auto 60px;}
    .gmap iframe{height: 240px;}
    
    .btn-contact p:before{left: -55px;}
}


.arrow-down {position: absolute; bottom: 23px; left: 0; right: 0; margin: 0 auto; width: 50px; height: 28px; background: url(../img/ic_down.png) no-repeat top left; background-size: cover; cursor: pointer; animation: bounce 3s infinite; transition: opacity 1.3s ease; opacity: 1; z-index: 99;}
.arrow-down a {width: 100%; height: 100%; display: block;}
@media (max-width: 767px){
    .arrow-down {bottom: 90px;}
}
@keyframes bounce {
    0%,
    20%,
    60%,
    80%,
    to {
        transform:translateY(0)
    }
    40% {
        transform:translateY(-10px)
    }
    50% {
        transform:translateY(5px)
    }
}

/* Animated */
.fade-in{opacity: 0; transition: opacity 1.5s;}
.section.active .fade-in{opacity: 1;}
.delay1{transition-delay: .5s;}