@charset "UTF-8";
*,*::before,*::after {box-sizing: border-box;background-repeat: no-repeat;padding: 0;margin: 0;letter-spacing: inherit;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: "";content: none;}
a {font-size: 100%;vertical-align: baseline;background: transparent;color: inherit;text-decoration: none;display: block;}
img{max-width:100%;}
button {background-color: transparent;border: none;outline: none;padding: 0;border:none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
table {border-collapse: collapse;border-spacing: 0;}



/* root
---------------------------------------------------------*/
:root {
  --clr-wh:#FFFFFF;
  --clr-bk:#333333;
  --clr-dnv:#3C4858;
  --clr-gy:#A4A8AD;
  --clr-lgy:#D1D5DB;
  --clr-bl:#2F5A99;
  --clr-lbl:#65C0C7;
  --clr-red:#E60B10;
  --bg-clr-lbl:#F2F4FB;
  --bg-clr-lgy:rgb(209, 213, 219,0.4);
  --bg-grd-bl:linear-gradient(145deg, rgba(101,192,199,1) 0%, rgba(76,145,178,1) 70%, rgba(46,90,153,1) 100%);
  --bg-grd-bl2:linear-gradient(90deg, rgba(101,192,199,1) 0%, rgba(76,145,178,1) 70%, rgba(46,90,153,1) 100%);
  --clr-overlay:rgb(60, 72, 88 , 0.5);
  --clr-overlay-link:rgb(60, 72, 88 , 0.7);
  --clr-overlay-grd:rgb(60, 72, 88 , 0.5);
  --shadow:3px 3px 6px rgb(0, 0, 0, 0.15);
  --svg-arrow-wh:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.641 12.081"><path fill="%23FFF" d="m9.711 12.081-.791-.819 4.568-4.653H0V5.471h13.488L8.92.818l.791-.819 5.93 6.041Z" /></svg>') no-repeat center center/contain;
  --svg-arrow-bl:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.641 12.081"><path fill="%232F5A99" d="m9.711 12.081-.791-.819 4.568-4.653H0V5.471h13.488L8.92.818l.791-.819 5.93 6.041Z" /></svg>') no-repeat center center/contain;
  --cont-max:1556px;
--lh: calc((1em - 1lh) / 2);
--lh1:1.5;
--lh2:1.7;
--lh3:2.2;

/*font-size*/
--fs-heading110:clamp(3rem, 8.97vw, 3.5rem);
--fs-heading80:clamp(2.8rem, 8.97vw, 3.5rem);
--fs-l-sub-heading:clamp(2.5rem, 7.17vw, 3.2rem);
--fs-l-sub-heading-jp:clamp(1.0rem, 2.82vw, 1.2rem);
--fs-txt25:clamp(1.6rem, 4.61vw, 1.8rem);
--fs-txt20:clamp(1.4rem, 3.84vw, 1.5rem);
--fs-txt18:clamp(1.3rem, 3.58vw, 1.4rem);
--fs-txt16:clamp(1.2rem, 3.33vw, 1.3rem);
--fs-txt14:clamp(1.1rem, 3.07vw, 1.2rem);
--fs-st-txt64:clamp(2rem, 6.15vw, 2.4rem);
--fs-st-txt48: clamp(1.8rem, 5.64vw ,2.2rem);
--fs-st-txt36:clamp(1.8rem, 5.38vw , 2.1rem);
--fs-st-txt30:clamp(1.8rem, 5.12vw , 2rem);
--fs-st-txt20:clamp(1.1rem, 3.33vw, 1.3rem);

  /*font-weight*/
  --fw-bl:900;
  --fw-b:700;
  --fw-sb:600;
  --fw-m:500;
  --fw-r:400;
  --ff-en: "Raleway", sans-serif;
  --ff-fig: "Poppins", sans-serif;

  /*各セクション・コンテンツの余白*/
  --sec-pd:24.61vw;
  --c-mg96:24.61vw;
  --c-mg80:20.51vw;
  --c-mg64:16.41vw;
  --c-mg56:14.35vw;
  --c-mg48:12.30vw;
  --c-mg40:10.25vw;
  --c-mg32:8.20vw;
  --c-mg24:6.15vw;
  --c-mg16:4.10vw;
  --c-mg12:3.07vw;
  --c-mg8:2.05vw;
  --c-mg4:1.02vw;
  --common-pd-w:3.07vw;
  --cont-pd-w:6.15vw;
  --cont-pd-w2:12.3vw;
}

@media screen and (min-width: 768px) {
:root {

/*font-size*/
--fs-heading80:clamp(3.5rem, 4.16vw, 8rem);
--fs-heading110:clamp(3.5rem, 5.72vw, 11rem);
--fs-l-sub-heading:clamp(3.2rem, 3.33vw, 6.4rem);
--fs-l-sub-heading-jp:clamp(1.2rem, 1.041vw, 2rem);
--fs-txt25:clamp(1.8rem, 1.30vw, 2.5rem);
--fs-txt20:clamp(1.5rem, 1.04vw, 2rem);
--fs-txt18:clamp(1.4rem, 0.93vw, 1.8rem);
--fs-txt16:clamp(1.3rem, 0.83vw, 1.6rem);
--fs-txt14:clamp(1.2rem, 0.78vw, 1.4rem);
--fs-st-txt64:clamp(2.4rem, 3.33vw, 6.4rem);
--fs-st-txt48: clamp(2.2rem, 2.5vw ,4.8rem);
--fs-st-txt36:clamp(2.1rem, 1.875vw, 3.6rem);
--fs-st-txt30:clamp(2rem, 1.56vw ,3rem);
--fs-st-txt20:clamp(1.3rem, 1.04vw, 2rem);

--cont-pd-w:5vw;
--cont-pd-w2:10vw;
--sec-pd:8.33vw;
--c-mg160:8.33vw;
--c-mg120:6.25vw;
--c-mg96:5vw;
--c-mg80:4.16vw;
--c-mg64:3.33vw;
--c-mg56:2.91vw;
--c-mg40:2.08vw;
--c-mg32:1.66vw;
--c-mg24:1.25vw;
--c-mg16:0.83vw;
--c-mg12:0.62vw;
--c-mg8:0.41vw;

--lh1:1.6;
--lh2:2;
--lh3:2.2;

}
}


@media screen and (min-width: 1920px) {
  :root {
    --cont-pd-w:9.47vw;
    --cont-pd-w2:18.94vw;
  }
}


/* common
---------------------------------------------------------*/

html {
font-size: 62.5%;
}

body {
font-feature-settings: "palt";
line-height: 1;
font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "メイリオ", "Meiryo", sans-serif;
font-style: normal;
font-weight: var(--fw-r);
color:var(--clr-bk);
background:var(--clr-wh);
letter-spacing: 0.1em !important;
}


.ff-en{
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 0.05em;
}

.ff-fig{
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.of-img img{
  width:100%;
  height:100%;
  object-fit: cover;
}

section {
  padding:var(--sec-pd) 0 0;
}

section.pd{
  padding:var(--sec-pd) 0 ;
} 

section.n-pd{
  padding: 0;
}

.contents-inner {
  padding: 0 var(--cont-pd-w);
}


.c-txt,.c-sub-txt{
  line-height:var(--lh2);
  margin-block: var(--lh);
}

.c-txt__wrapper{
  display: flex;
  flex-direction: column;
  gap:var(--c-mg16);
}

.c-txt{
  font-size:var(--fs-txt18);
}

.c-sub-txt{
  font-size:var(--fs-txt16);
}

.pc{
  display: none;
}



@media screen and (min-width: 768px) {


  .c-txt__wrapper{
    gap:var(--c-mg24);
  }

  .pc{
    display: block;
  }

  .sp{
    display: none;
  }


}



@media (min-width: 1280px) {

}

/* link,button,arrow 
---------------------------------------------------------*/

.arrow{
  display: block;
  width:15px;
  height:12px;
  background:var(--svg-arrow-wh);
}

.btn, .l-more{
  width:fit-content;
  font-family: var(--ff-en);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
}

.btn{
  /* min-width:280px; */
  height:50px;
  padding:0 40px;
  border:2px solid var(--clr-dnv);
  background:var(--clr-dnv);
  color:var(--clr-wh);
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  justify-content: center;
}

.btn.lbl{
  background:var(--clr-lbl);
  border:2px solid var(--clr-lbl);
  color:var(--clr-wh);
}

.btn span:first-of-type{
  font-size:var(--fs-txt18);
  margin-right:8px;
}

.l-more{
  background:var(--clr-dnv);
  color:var(--clr-wh);
  height:28px;
  padding:0 16px;
  position: absolute;
  right:0;
  bottom:0;
}


.l-more span:first-of-type{
  font-size:var(--fs-txt16);
  margin-right:8px;
  position: relative;
}

.l-more::before{
  content:"";
  display: block;
  border: 14px solid var(--clr-dnv);
  border-left-color: transparent;
  border-top-color: transparent; 
  height: 0;
  width: 0;
  position: absolute;
  transform: scaleX(0.5);
  left:-21px;
}

@media screen and (min-width: 768px) {
  .btn{
    min-width:280px;
    height:64px;
  }

  .btn span:first-of-type{
    margin-right:16px;
  }

}

@media screen and (min-width: 1920px) {
  .btn{
    min-width:320px;
    height:70px;
  }

}


/* header
---------------------------------------------------------*/
.header {
  position: fixed;
  width: 100%;
  background:var(--clr-wh);
  top: 0;
  z-index: 9000;
  box-shadow: var(--shadow);
}

.header__txt{
  display: none;
}

.header-inner{
  padding: 0 var(--common-pd-w);
  height:55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.g-nav__logo a {
  max-width:128px;
  background:url(../img/common/logo.svg) no-repeat center left/contain;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.g-nav {
  position: relative;
}

.menu-toggle,.close-btn {
  width:fit-content;
  height:45px;
  display: flex;
  align-items: center;
  font-size:1.5rem;
  gap:8px;
}

.menu-toggle{
  position: fixed;
  right: var(--common-pd-w);
	top: 7px;
}

.close-btn {
  color:var(--clr-wh);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  position: absolute;
  top: 7px;
  right: var(--common-pd-w);
  z-index: 3000;
}

.menu-toggle span:first-child,.close-btn span:first-child{
  display: block;
  width:25px;
  height:25px;
}

.menu-toggle span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='8' height='8' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(0 16)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(0 32)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(16)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(16 16)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(16 32)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(32)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(32 16)' fill='%23333'/%3E%3Crect width='8' height='8' transform='translate(32 32)' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:contain;
}


.close-btn span:first-child{
  background:var(--clr-wh);
  display: grid;
  place-items: center;
}

.close-btn span:first-child::before{
  display: inline-block;
  content:"";
  width:12px;
  height:12px;
  background:url(../img/common/i-close.svg) no-repeat center center;
}

.g-nav__list__wrapper {
  position: fixed;
  top: 0;
  right: -80%; 
  height: 100vh;
  width: 80%;
  background:var(--clr-bk);
  transition: right 0.3s ease;
  overflow-y: scroll;
}

.g-nav__list__wrapper.active {
  right: 0; 
  /* overflow-y: scroll; */
}


.g-nav__list__wrapper.active .close-btn {
  opacity: 1;
  visibility: visible;
  position: fixed;
  top: 7px;
  right: var(--common-pd-w);
  z-index: 3000;
}

.g-nav__lists{
  display: flex;
  flex-direction: column;
  padding:var(--c-mg80) var(--c-mg40) var(--c-mg64);
}
.g-nav__list__link{
  color:var(--clr-wh);
  padding:var(--c-mg16) 0;
  margin:var(--c-mg4) 0;
}

.g-nav__list__link span{
  display: block;
}

.g-nav__list__link span:first-child{
  font-size:var(--fs-st-txt36);
  font-weight: var(--fw-b);
}

.g-nav__list__link span:last-child{
  font-size:var(--fs-txt14);
  margin-top:var(--c-mg8);
}


.g-nav__list__wrapper.active + .menu-toggle {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.g-nav__list__wrapper:not(.active) + .menu-toggle {
  opacity: 1;
  visibility: visible;
}



@media (min-width: 768px) {

  .header-inner{
    height:90px;
    display: grid;
    grid-template-columns: 180px auto 180px;
  }


  .header__txt{
    display: block;
    font-size: var(--fs-st-txt20);
    letter-spacing: 0.1em;
  }

  .g-nav__logo a {
    max-width:180px;
  }

  .menu-toggle,.close-btn {
    font-size:2rem;
    gap:16px;
    width:180px;
    display: flex;
    justify-content: flex-end;
	top: 24px;
  }

  .menu-toggle span:first-child,.close-btn span:first-child{
    width:40px;
    height:40px;
  }


  .close-btn span:first-child::before{
    width:15px;
    height:15px;
  }

  .g-nav__list__wrapper {
    right: -33%; 
    width: 33%;
  }

  .g-nav__lists{
    padding:var(--c-mg160) var(--c-mg96) var(--c-mg64);
  }

  .g-nav__list__link{
    /* padding:var(--c-mg24) 0; */
    margin:var(--c-mg8) 0;
    transition: 0.2s;
  }

  .g-nav__list__link:hover{
    color:var(--clr-lbl);
  }

  .g-nav__list__link span:last-child{
    margin-top:var(--c-mg12);
  }

  .close-btn,.g-nav__list__wrapper.active .close-btn {
    top: 20px;
  }



}

/* bommon contact
---------------------------------------------------------*/
.btm-contact__wrapper{
  width:90%;
  display: grid;
  gap:var(--c-mg16);
  margin:0 auto;
}

.btm-contact__item{
  width:100%;
  height:180px;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  border:1px solid var(--clr-dnv);
}

.btm-contact__item div p:first-child,.btm-contact__item div p:last-child{
  font-size:var(--fs-txt18);
}

.btm-contact__item div p:first-child{
  font-weight: var(--fw-r);
  margin-bottom:var(--c-mg24);
}

.btm-contact__item div p:last-child{
  font-weight: var(--fw-sb);
  margin-top:var(--c-mg12);
}

.btm-contact__item.mail div p:nth-child(2){
  font-size:var(--fs-st-txt30);
}

.btm-contact__item.tel div p:nth-child(2){
  font-size:var(--fs-st-txt20);
}

.btm-contact__item.tel div p:nth-child(2) span:last-child{
  font-size:var(--fs-st-txt48);
}

.btm-contact__item::before{
  display: block;
  content:"";
  width:100%;
  height:100%;
  background:var(--clr-overlay-link);
  position: absolute;
  top:0;
  left: 0;
  mix-blend-mode: multiply;
  z-index:1;
}

.btm-contact__item div{
  position: relative;
  z-index:10;
  color:var(--clr-wh);
  letter-spacing: 0.1em;
}

.btm-contact__item.tel{
  background:url(../img/common/tel-image.jpg) no-repeat center center/cover;
}

.btm-contact__item.mail{
  background:url(../img/common/mail-image.jpg) no-repeat center center/cover;
}


.btm-contact__loop-txt{
  align-items: center;
  display: flex;
  overflow:hidden;
  width: 100%;
  white-space:nowrap;
  z-index: 1;
  padding:var(--c-mg40) 0 var(--c-mg64);
}
.btm-contact__loop-txt div {
  animation: flowing 20s linear infinite;
  transform:translateX(100%);
  font-size: 18vw;
  font-family: var(--ff-en);
  letter-spacing: 0.1em;
  color:#CFD0D1;
}

.btm-contact__loop-txt div::after {
  content: "";
  display: inline-block;
  width: 60px;
}

@keyframes flowing {
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}


@media screen and (min-width: 768px) {


  .btm-contact__wrapper{
    width:100%;
    max-width: var(--cont-max);
    grid-template-columns:  1fr 1fr;
    gap:var(--cont-pd-w);
    padding:0 var(--common-pd-w);
  }

    
  .btm-contact__item{
    height:17.18vw;
  }

  .btm-contact__item div p:first-child{
    margin-bottom:var(--c-mg32);
  }

  .btm-contact__item div p:last-child{
    margin-top:var(--c-mg24);
  }



  .btm-contact__loop-txt {
    padding:var(--c-mg64) 0 var(--c-mg120);
    
  }

    
  .btm-contact__loop-txt div {
    font-size: 6.97vw;
  }

  .btm-contact__loop-txt div::after {
    width: 100px;
  }


  .btm-contact__item.mail::before{
    transition: 0.4s;
}

.btm-contact__item.mail:hover::before{
  background:var(--clr-lbl);
  mix-blend-mode:multiply ;
  
}

}

/* footer
---------------------------------------------------------*/

.footer {
  width: 100%;
  background:#F0F1F3;
  position: relative;
  z-index: 1000;
  border-top:1px solid var(--clr-dnv);
  border-bottom:8px solid var(--clr-dnv);
  padding:var(--c-mg64) 0 var(--c-mg24);
}

.footer__inner{
  padding:0 calc(var(--common-pd-w)*2);

}

.footer__logo{
  width:20vw;
}

.footer__name{
  font-weight: var(--fw-b);
  margin:var(--c-mg24) 0 var(--c-mg8);
}


.footer__cont-r{
  display: grid;
  grid-template-columns: auto auto;
  gap:var(--c-mg24);
  width:90%;
  margin-top:var(--c-mg32);
}

.footer__nav{
  display: grid;
  gap:var(--c-mg8);
}

.footer__nav li a{
  padding:var(--c-mg8) 0;
}

.footer__nav li a span{
  display: block;
  font-weight: var(--fw-sb);
  letter-spacing: 0.1em;
}


.footer__nav li a span:first-child{
  font-family: var(--ff-en);
  font-size:var(--fs-st-txt36);
}

.footer__nav li a span:last-child{
  font-size:var(--fs-txt14);
  margin-top:var(--c-mg4);
}


.footer__btm{
  width:100%;
  padding:var(--c-mg16) var(--common-pd-w) 0;
  border-top:1px solid var(--clr-lgy);
  font-size:var(--fs-txt14);
  margin-top:var(--c-mg24);
}

.footer__btm a{
  font-size:var(--fs-txt16);
  font-weight: var(--fw-sb);
  padding:var(--c-mg8) 0;
}


@media (min-width: 768px) {

  .footer {
    padding:var(--c-mg160) 0 var(--c-mg80);
    border-bottom:12px solid var(--clr-dnv);
  }

  .footer__inner{
    display: grid;
    grid-template-columns: auto 1fr;

  }

  .footer__logo{
    width:6.25vw;
    max-width:120px;
  }

  .footer__name{
    margin:var(--c-mg40) 0 var(--c-mg16);
  }

  .footer__cont-r{
    gap:var(--cont-pd-w);
    width:fit-content;
    margin:0 0 0 auto;
    padding-right:var(--cont-pd-w);
  }


.footer__nav{
  display: grid;
  gap:var(--c-mg40);
}

.footer__btm{
  padding:var(--c-mg24) calc(var(--common-pd-w)*2) 0;
  margin-top:var(--c-mg96);
  display: flex;
  align-items: center;
}

.footer__btm p{
  margin-left:var(--c-mg40);
  padding:4px 0 4px var(--c-mg40);
  border-left:1px solid var(--clr-dnv);
}


}


/* カーソルカスタマイズ
---------------------------------------------------------*/

@media (min-width: 768px) {
  html, body {
    cursor: auto;
  }
  
  
  .cursor {
    border: 2px solid var(--clr-wh);
    position: fixed;
    width: 0;
    height: 0;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: 0.4s;
    mix-blend-mode: difference;
  }
  
  .cursor.cursor--hover {
    top: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
  
    background: transparent;
    mix-blend-mode: difference;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: 1s;
    transition: 0.4s;
  }
  
  .cursor.cursor--hover::before {
    content: "MORE";
    color: var(--clr-wh);
    font-family: var(--ff-en);
    font-size:1.7rem;
  }

}


@media (min-width: 1920px) {

  .cursor.cursor--hover {
    width: 180px;
    height: 180px;
  }

  .cursor.cursor--hover::before {
    font-size:2.6rem;
  }

}

/* コンテンツアニメーション
---------------------------------------------------------*/

.js-heading {
  overflow: hidden;
}

.js-split p {
  display: block;
  overflow: hidden;
}

.js-split p span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  will-change: transform;
}

.js-split-jp{
  opacity: 0;
  transform: translateX(-5px);
  will-change: transform;
}

.js-fade-in {
  opacity: 0;
  transform: translateY(10px);
  will-change: transform;
}

.js-clip-anime{
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}