@charset "UTF-8";

/*---------------------------------
  Base Typography
---------------------------------*/
body.ksf{
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(20 * var(--pc));
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--textcolor);
}

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

  body.ksf{
    font-size: calc(15 * var(--sp));
  }

}

.ksf p,
.ksf h1,
.ksf h2,
.ksf h3,
.ksf h4,
.ksf h5,
.ksf h6,
.ksf li,
.ksf dt,
.ksf dd,
.ksf th,
.ksf td,
.ksf span{
  font-feature-settings: "palt";
}

.ksf input,
.ksf textarea,
.ksf select,
.ksf button{
  font-feature-settings: normal;
}

/*---------------------------------
  Link / Hover Motion
---------------------------------*/
.ksf a{
  color: #000;
  text-decoration: none;

  transition:
    color .25s ease,
    filter .3s ease;
}

.ksf a[href^="tel:"]{
  text-decoration: none;
}

.ksf-footer a{
  color: #fff;
}

.ksf-news__text,
.ksf-header__nav-item > a,
.ksf-header__subnav a{
  transition:
    color .25s ease,
    filter .3s ease,
    background-color .25s ease;
}

@media (hover:hover){

  .ksf-about__btn:hover,
  .ksf-greeting__btn:hover,
  .ksf-results__btn:hover,
  .ksf-faq-intro__btn:hover,
  .ksf-footer__privacy:hover,
  .ksf-news__archive:hover,
  .ksf-news__link:hover,
  .ksf-header__nav-item > a:hover,
  .ksf-header__subnav a:hover{

    filter:
      drop-shadow(
        0
        calc(4 * var(--pc))
        calc(10 * var(--pc))
        rgba(54,186,173,.22)
      )
      drop-shadow(
        0
        calc(2 * var(--pc))
        calc(4 * var(--pc))
        rgba(0,0,0,.06)
      );

  }

  .ksf-news__link:hover .ksf-news__text,
  .ksf-header__nav-item > a:hover,
  .ksf-header__subnav a:hover{
    color: #36baad;
  }

  .ksf-header__nav-item--contact > a:hover{
    color: #fff;
  }

}

/*---------------------------------
  Loading
---------------------------------*/
.ksf-loading{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  transition:
    opacity .7s ease,
    visibility .7s ease;
}

.ksf-loading.is-hide{
  opacity: 0;
  visibility: hidden;
}

.ksf-loading__deco{
  position: absolute;
  left: 50%;
  bottom: calc(120 * var(--pc));
  display: flex;
  gap: calc(38 * var(--pc));
  transform: translateX(-50%);
  pointer-events: none;
}

.ksf-loading__deco span{
  display: block;
  width: calc(120 * var(--pc));
  height: calc(180 * var(--pc));
  background: var(--grad-main);
  background-size: 200% 200%;
  transform: skewX(-20deg);
  animation: ksfGradMove 7s ease infinite;
}

.ksf-loading__deco span:last-child{
  width: calc(80 * var(--pc));
}

.ksf-loading__logo{
  position: relative;
  z-index: 2;
  text-align: center;
}

.ksf-loading__sub{
  display: block;
  margin-bottom: calc(4 * var(--pc));
  color: #000;
  font-size: calc(14 * var(--pc));
  font-weight: 500;
  letter-spacing: .08em;
}

.ksf-loading__main{
  display: block;
  color: #000;
  font-size: calc(28 * var(--pc));
  font-weight: 700;
  letter-spacing: .04em;
}

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

  .ksf-loading__deco{
    bottom: calc(80 * var(--sp));
    gap: calc(18 * var(--sp));
  }

  .ksf-loading__deco span{
    width: calc(58 * var(--sp));
    height: calc(90 * var(--sp));
  }

  .ksf-loading__deco span:last-child{
    width: calc(40 * var(--sp));
  }

  .ksf-loading__sub{
    font-size: calc(12 * var(--sp));
  }

  .ksf-loading__main{
    font-size: calc(22 * var(--sp));
  }

}

/*---------------------------------
  Section
---------------------------------*/
.ksf-section{
  position: relative;
  padding: 100px 0;
}

.ksf-section__inner{
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: var(--inner);

  margin: 0 auto;
}

.ksf-section__bg{
  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;
}

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

  .ksf-section{
    padding: calc(80 * var(--sp)) 0;
  }

  .ksf-section__inner{
    width: 96%;
  }

}

/*---------------------------------
  Heading
---------------------------------*/
.ksf-heading{
  text-align: center;
}

.ksf-heading__sub{
  display: block;

  font-size: 14px;

  letter-spacing: .1em;

  color: var(--maincolor);
}

.ksf-heading__main{
  margin-top: 10px;

  font-size: 32px;
  font-weight: 700;

  line-height: 1.4;
}

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

  .ksf-heading__main{
    font-size: calc(22 * var(--sp));
  }

}

/*---------------------------------
  Button
---------------------------------*/
.ksf-btn{
  display: inline-block;

  padding: 16px 32px;

  color: #fff;

  background: var(--grad-main);

  font-weight: 700;

  text-align: center;

  border-radius: 999px;
}

@media (hover:hover){

  .ksf-btn:hover{
    filter:
      drop-shadow(
        0
        calc(6 * var(--pc))
        calc(12 * var(--pc))
        rgba(54,186,173,.24)
      );
  }

}

/*---------------------------------
  Header
---------------------------------*/
.ksf-header{
  position: fixed;

  top: 0;
  left: calc(40 * var(--pc));
  right: calc(40 * var(--pc));

  z-index: 100;

  width: auto;

  margin-top: calc(40 * var(--pc));

  padding:
    calc(16 * var(--pc))
    calc(28 * var(--pc));

  background: #fff;

  border-radius: calc(20 * var(--pc));

  pointer-events: auto;

  box-sizing: border-box;

  transition:
    box-shadow .35s ease,
    backdrop-filter .35s ease;
}

.ksf-header.is-scrolled{
  box-shadow:
    0
    calc(6 * var(--pc))
    calc(20 * var(--pc))
    rgba(0,0,0,.08);
}

.ksf-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ksf-header__logo{
  margin:0;
  line-height:1.25;
  pointer-events:auto;
}

.ksf-header__logo-sub{
  display:block;
  font-size:calc(18 * var(--pc));
  font-weight:500;
}

.ksf-header__logo-main{
  display:block;
  margin-top:calc(2 * var(--pc));
  font-size:calc(28 * var(--pc));
  font-weight:700;
}

.ksf-header__nav{
  pointer-events:auto;
}

.ksf-header__nav-list{
  display:flex;
}

.ksf-header__nav-item{
  position:relative;
}

.ksf-header__nav-item > a{
  display:flex;
  align-items:center;

  min-height:calc(48 * var(--pc));

  padding:0 calc(18 * var(--pc));

  background:rgba(255,255,255,.84);

  white-space:nowrap;

  font-size:calc(18 * var(--pc));
  font-weight:700;
}

.ksf-header__nav-item:first-child > a{
  border-radius:
    calc(24 * var(--pc))
    0
    0
    calc(24 * var(--pc));
}

.ksf-header__nav-item:nth-last-child(2) > a{
  border-radius:
    0
    calc(24 * var(--pc))
    calc(24 * var(--pc))
    0;
}

.ksf-header__nav-item--contact{
  margin-left:calc(20 * var(--pc));
}

.ksf-header__nav-item--contact > a{
  min-width:calc(180 * var(--pc));

  justify-content:center;

  color:#fff;

  background:var(--grad-main);

  border-radius:calc(24 * var(--pc));
}

/* sub nav */
.ksf-header__subnav{
  position:absolute;

  top:calc(48 * var(--pc));
  left:0;

  width:calc(190 * var(--pc));

  padding-top:calc(10 * var(--pc));

  opacity:0;
  visibility:hidden;

  transform:translateY(6px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.ksf-header__nav-item--has-child:hover .ksf-header__subnav,
.ksf-header__nav-item--has-child:focus-within .ksf-header__subnav{
  opacity:1;
  visibility:visible;

  transform:translateY(0);
}

.ksf-header__subnav li + li{
  margin-top:calc(8 * var(--pc));
}

.ksf-header__subnav a{
  display:block;

  padding:
    calc(8 * var(--pc))
    calc(18 * var(--pc));

  background:rgba(255,255,255,.92);

  border-radius:calc(18 * var(--pc));

  font-size:calc(16 * var(--pc));
  font-weight:700;
}

.ksf-header__menu-btn{
  display:none;
}

/*---------------------------------
  SP Header
---------------------------------*/
@media screen and (max-width:768px){

  .ksf-header{
    width: 100%;

    margin: 0;
    padding:
      calc(12 * var(--sp))
      calc(15 * var(--sp));

    pointer-events:auto;
  
    border-radius: 0;
  }

  .ksf-header.is-scrolled{
    box-shadow:
      0
      calc(4 * var(--sp))
      calc(16 * var(--sp))
      rgba(0,0,0,.08);
  }

  .ksf-header__inner{
    align-items:center;
  }

  .ksf-header__logo-sub{
    font-size:calc(10 * var(--sp));
  }

  .ksf-header__logo-main{
    font-size:calc(18 * var(--sp));
  }

  .ksf-header__menu-btn{
    position:relative;
    z-index:102;

    display:block;

    width:calc(44 * var(--sp));
    height:calc(44 * var(--sp));

    background:rgba(255,255,255,.92);

    border-radius:50%;
  }

  .ksf-header__menu-btn span{
    position:absolute;

    left:50%;

    width:calc(20 * var(--sp));
    height:2px;

    background:var(--textcolor);

    border-radius:999px;

    transform:translateX(-50%);
  }

  .ksf-header__menu-btn span:nth-child(1){ top:calc(15 * var(--sp)); }
  .ksf-header__menu-btn span:nth-child(2){ top:calc(21 * var(--sp)); }
  .ksf-header__menu-btn span:nth-child(3){ top:calc(27 * var(--sp)); }

  .ksf-header__nav{
    position:fixed;

    top:0;
    right:0;

    z-index:101;

    width:min(86vw,360px);
    height:100vh;

    padding:
      calc(86 * var(--sp))
      calc(20 * var(--sp))
      calc(30 * var(--sp));

    background:rgba(255,255,255,.96);

    overflow-y:auto;

    transform:translateX(100%);
    transition:transform .3s ease;
  }

  .ksf-header.is-open .ksf-header__nav{
    transform:translateX(0);
  }

  .ksf-header__nav-list{
    display:block;
  }

  .ksf-header__nav-item + .ksf-header__nav-item{
    margin-top:calc(12 * var(--sp));
  }

  .ksf-header__nav-item > a{
    display:block;

    min-height:0;

    padding:
      calc(13 * var(--sp))
      calc(16 * var(--sp));

    font-size:calc(15 * var(--sp));

    line-height:1.5;

    background:transparent;

    border-bottom:1px solid var(--linecolor);

    border-radius:0 !important;
  }

  .ksf-header__nav-item--contact{
    margin:calc(22 * var(--sp)) 0 0;
  }

  .ksf-header__nav-item--contact > a{
    color:#fff;

    text-align:center;

    background:var(--grad-main);

    border-radius:
      calc(24 * var(--sp))
      !important;
  }

  .ksf-header__subnav{
    position:static;

    width:100%;

    margin-top:calc(8 * var(--sp));

    padding:0 0 0 calc(16 * var(--sp));

    opacity:1;
    visibility:visible;

    transform:none;
  }

  .ksf-header__subnav li + li{
    margin-top:calc(6 * var(--sp));
  }

  .ksf-header__subnav a{
    padding:
      calc(8 * var(--sp))
      calc(14 * var(--sp));

    font-size:calc(14 * var(--sp));

    background:rgba(0,167,200,.08);

    border-radius:calc(18 * var(--sp));
  }

}

/*---------------------------------
  Footer Banner
---------------------------------*/
.ksf-banner{
  padding:
    0
    0
    calc(80 * var(--pc));

  background: #fff;
}

.ksf-banner__inner{
  display: flex;
  justify-content: center;
}

.ksf-banner__link{
  display: block;

  width: calc(418 * var(--pc));

  transition: opacity .3s ease;
}

.ksf-banner__image{
  display: block;

  width: 100%;
  height: auto;
}

@media (hover:hover){

  .ksf-banner__link:hover{
    opacity: .8;
  }

}

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

  .ksf-banner{
    padding:
      0
      0
      calc(50 * var(--sp));
  }

  .ksf-banner__link{
    width: calc(280 * var(--sp));
  }

}

/*---------------------------------
  Footer
---------------------------------*/
.ksf-footer{
  background: #36baad;

  padding: calc(60 * var(--pc)) 0;

  font-size: calc(18 * var(--pc));
}

.ksf-footer__inner{
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: calc(1040 * var(--pc));

  margin: 0 auto;
}

.ksf-footer__privacy{
  display: inline-flex;

  gap: calc(8 * var(--pc));

  color: #fff;
}

.ksf-footer__copy{
  color: #fff;
}

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

  .ksf-footer__inner{
    flex-direction: column;

    gap: calc(18 * var(--sp));

    width: 96%;
  }

  .ksf-footer__privacy{
    display: inline-flex;

    gap: calc(12 * var(--sp));
    font-size: calc(12 * var(--sp));

    color: #fff;
  }

  .ksf-footer__copy{
    font-size: calc(12 * var(--sp));

    line-height: 1.8;

    text-align: center;

    white-space: nowrap;
  }

}