@charset "UTF-8";
/* reset */
html,body,div,span,h1,h2,h3,p,a,img,ul,li,dl,dt,dd,form,label,fieldset,legend,table,tr,th,td,header,footer,nav,main,section{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
header,footer,nav,main,section{display:block}
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%}
ul{list-style:none}
a{text-decoration:none;color:inherit}
img{vertical-align:top;max-width:100%}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit;border-radius:0;-webkit-appearance:none;appearance:none}
*:focus{outline:none}

/* variable */
:root{--main:#00aca9;--text:#231815;--gray:#9fa0a0;--line:#c8c8c8;--form:#efefed}

/* common */
body{background:#fff;color:var(--text);font-size:1.5rem;line-height:1.9;letter-spacing:.04em;font-family:"Yu Gothic","游ゴシック体",YuGothic,"游ゴシック","Hiragino Kaku Gothic ProN","Hiragino Sans","メイリオ",sans-serif}
body.open{overflow-y:hidden}
.body{overflow-x:hidden}
.con{width:90%;margin-left:auto;margin-right:auto}
.mw1200{max-width:1200px}
.mw900{max-width:900px}
.mw700{max-width:700px}
.m-c{margin-left:auto;margin-right:auto}
.flex{display:flex}
.al-c{align-items:center}
.j-b{justify-content:space-between}
.ta-c{text-align:center}
.fw-b{font-weight:bold}
.main-t{color:var(--main)}
.phone-on{display:none}
.hover-op{transition:.3s}
.hover-op:hover{opacity:.6}

/* header */
.header{padding-top:40px}
.ham-wr{position:fixed;top:30px;left:5%;width:30px;height:30px;z-index:6000}
.ham{position:relative;display:block;width:100%;height:100%;cursor:pointer}
.ham span{position:absolute;left:0;width:100%;height:3px;background:var(--main);transition:.3s}
.ham span:nth-child(1){top:0}
.ham span:nth-child(2){top:calc(50% - 1px)}
.ham span:nth-child(3){bottom:0}
.ham.open span{background:#fff}
.ham.open span:nth-child(1){top:calc(50% - 1px);transform:rotate(-45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){bottom:auto;top:calc(50% - 1px);transform:rotate(45deg)}
.h-wr{padding:55px 0 4px;border-bottom:3px solid var(--main)}
.logo{font-size:2.4rem;font-weight:bold;letter-spacing:.3em;line-height:1;color:var(--gray);white-space:nowrap}
.h-icon{display:flex;gap:28px;align-items:flex-end;padding-bottom:6px}
.h-icon a{display:block;width:34px;line-height:0}
.h-icon svg{width:100%;height:auto;fill:none;stroke:var(--gray);stroke-width:1.6}

.g-nav-wr{display:none;position:fixed;inset:0;overflow-y:auto;z-index:-10;opacity:0;background:rgba(0,172,169,.96);transition:.2s}
.g-nav-wr.open{display:block;z-index:5000;opacity:1}
.g-nav{position:absolute;top:50%;left:50%;transform:translate(-50%,-45%);opacity:0;transition:.5s;color:#fff}
.g-nav.open{opacity:1;transform:translate(-50%,-50%)}
.g-nav li{margin-bottom:28px;font-size:2rem;font-weight:bold;letter-spacing:.15em}
.g-nav li:last-child{margin-bottom:0}
.g-nav a{color:#fff;display:block;padding-left:1.4em;position:relative}
.g-nav a::before{content:"";position:absolute;left:0;top:.7em;width:.55em;height:.55em;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}

.backtop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:var(--main);z-index:3000;opacity:0;pointer-events:none;transition:.3s}
.backtop.active{opacity:1;pointer-events:auto}
.backtop::after{content:"";position:absolute;left:50%;top:55%;width:12px;height:12px;border-top:2px solid #fff;border-left:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}

/* footer */
.footer{margin-bottom:120px;}

/* aninmation */
.fadein {
  opacity : 0;
  visibility: hidden;
  transition: 1.5s;
  transform: translateY(30px);
}

.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0);
}


.opa0 {
  opacity: 0;
  transition: 1s;
}

.opa1 {
  opacity: 1;
}

/* textyle */

.textyle {
  opacity: 0;
}

.textyle span {
  position: relative;
/* topとleftの値を変えることで入ってくる位置を調整 */
  top: 0px;
  left: 0px;
  opacity: 0;
}