@charset "UTF-8";
/*====================================
 * Hero Image
 =====================================*/
 .container {
  background: linear-gradient(270deg, #A8D8F6 0%, #6FBEF0 25.48%, #5CB6EE 45.67%, #6FBEF0 60.1%, #A8D8F6 100%);
}

.hero {
  position: relative;
  height: calc(100svh - 60px);
  min-height: 550px;
  z-index: 2;

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    max-height: 600px;
  }

  & .hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: right;
    width: 100%;
    height: 100%;
    padding-right: 4.5%;

    @media screen and (min-width: 768px) {
      padding-left: 6.4%;
    }

  }

  & .hero__catch {
    margin: 80px 0 0 0;
    color: #FFF;
    font-size: calc((32 / 375) * 100vw);
    font-weight: bold;
    text-align: right;
    line-height: 1.375;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;

    @media screen and (min-width: 768px) {
      margin: calc((70 / 1920) * 100vw) 0 0 0;
      font-size: max(48px, calc((96 / 1920) * 100vw));
      text-align: left;
      font-weight: 500;
    }
  }

  & .hero__catch-small {
    font-size: calc((28 / 375) * 100vw);

    @media screen and (min-width: 768px) {
      font-size: max(32px, calc((70 / 1920) * 100vw));
    }
  }

  & .hero__underline-image {
    background-image: url(../images/top/catch_underline.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    display: inline-block;
    padding: 0 0 12px 5px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.5s;

    @media screen and (min-width: 768px) {
      background-size: 95%;
      background-position: 8px bottom;
      padding: 0 0 20px 0;
    }
  }

  & .hero__lead {
    display: flex;
    justify-content: right;
    margin-top: 90px;

    @media screen and (min-width: 768px) {
      justify-content: left;
      margin-top: 50px;
    }
  }

  & .hero__lead-text {
    font-size: 0;
    text-align: right;

    @media screen and (min-width: 768px) {
      text-align: left;
    }
  }

  & .hero__lead-bg {
    display: inline-block;
    font-size: min(20px, calc((14.5 / 375) * 100vw));
    background: #FFF;
    padding: 2px 8px 2px;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;

    @media screen and (min-width: 768px) {
      font-size: max(14px, ((24 / 1920) * 100vw));
      letter-spacing: 0.1em;
      margin-bottom: 14px;
    }
  }

  & .hero__pc {
    display: none;

    @media screen and (min-width: 768px) {
      display: inline;
    }
  }

  & .hero__pc + .hero__lead-bg {
    padding-left: 0;
    margin-left: -0.04em;
  }

  & .hero__lead-bg:has(+ .hero__pc + .hero__lead-bg) {
    padding-right: 0;
  }

  @media screen and (min-width: 768px) {
    & .hero__sp {
      display: none;
    }

    & .hero__pc + .hero__lead-bg {
      padding-left: 8px;
    }

    & .hero__lead-bg:has(+ .hero__pc + .hero__lead-bg) {
      padding-right: 8px;
    }

    & .hero__sp + .hero__lead-bg {
      padding-left: 0;
      margin-left: -0.04em;
    }

    & .hero__lead-bg:has(+ .hero__sp + .hero__lead-bg) {
      padding-right: 0;
    }

    & .hero__pc + .hero__lead-bg {
      padding-right: 0;
    }
  }

  & .hero__person {
    position: absolute;
    content: "";
    display: block;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    aspect-ratio: var(--aspect-ratio);
    animation: hero-float 6s ease-in-out infinite;
  }

  & .hero__person--01 {
    --aspect-ratio: 68 / 150;
    background-image: url(../images/top/hero_person01.svg);
    width: 17.6vw;
    left: 5.3%;
    top: 30%;
    --base-transform: rotate(27.9deg);
    transform: var(--base-transform);
    animation-duration: 5s;
    animation-delay: 0s;

    @media screen and (min-width: 768px) {
      width: 12.8vw;
      left: 63%;
      top: 50%;
      --base-transform: rotate(-10.47deg);
    }
  }

  & .hero__person--02 {
    --aspect-ratio: 54 / 150;
    background-image: url(../images/top/hero_person02.svg);
    width: 21.37vw;
    left: 20%;
    top: calc((600 * 0.726) * 1px);
    --base-transform: rotate(-28.42deg);
    transform: var(--base-transform);
    animation-duration: 6.5s;
    animation-delay: -1.5s;

    @media screen and (min-width: 768px) {
      width: 5vw;
      left: 50.7%;
      top: 29%;
      --base-transform: rotate(-27.99deg);
    }
  }

  & .hero__person--03 {
    --aspect-ratio: 51 / 150;
    background-image: url(../images/top/hero_person03.svg);
    display: none;
    animation-duration: 5.8s;
    animation-delay: -3s;

    @media screen and (min-width: 768px) {
      display: block;
      width: 5.55vw;
      left: 8%;
      top: 68.1%;
      --base-transform: rotate(-18.32deg);
      transform: var(--base-transform);
    }
  }

  & .hero__person--04 {
    --aspect-ratio: 45 / 150;
    background-image: url(../images/top/hero_person04.svg);
    display: none;
    animation-duration: 7.2s;
    animation-delay: -4.5s;

    @media screen and (min-width: 768px) {
      display: block;
      width: 8vw;
      left: 28%;
      top: 66%;
      --base-transform: rotate(28.53deg);
      transform: var(--base-transform);
    }
  }

}

/*====================================
 * Hero Bg（スクロール固定の背景イラスト）
 * position: fixedで固定表示。
 =====================================*/
.hero__bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  & .hero__shape {
    position: absolute;
    content: "";
    display: block;
    opacity: 0;
    transform: scale(0.8) var(--local-transform, rotate(0deg));
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    aspect-ratio: var(--aspect-ratio);
    animation: hero-shape-fade-in 1.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;
  }

  & .hero__shape--circle01 {
    --aspect-ratio: 800 / 812;
    background-image: url(../images/top/hero_circle01.webp);
    width: 41.3vw;
    left: -13%;
    top: 4.8%;
    animation-delay: 0.1s;

    @media screen and (min-width: 768px) {
      width: 23.75vw;
      left: -8.85%;
      top: -3.1%;
    }
  }

  & .hero__shape--circle02 {
    --aspect-ratio: 729 / 729;
    background-image: url(../images/top/hero_circle02.webp);
    width: 72.2vw;
    left: 52.8%;
    top: calc((600 * 0.83) * 1px);
    animation-delay: 0.3s;

    @media screen and (min-width: 768px) {
      width: 35vw;
      left: 78%;
      top: -34.79px;
    }
  }

  & .hero__shape--circle03 {
    --aspect-ratio: 608 / 612;
    background-image: url(../images/top/hero_circle03.webp);
    display: none;
    animation-delay: 0.5s;

    @media screen and (min-width: 768px) {
      display: block;
      width: 14.6vw;
      left: 16%;
      top: 85%;
    }
  }

  & .hero__shape--circle04 {
    --aspect-ratio: 165 / 165;
    background-image: url(../images/top/hero_circle04.webp);
    width: 14.6vw;
    left: 55.4%;
    top: 43%;
    animation-delay: 0.2s;

    @media screen and (min-width: 768px) {
      width: 3.75vw;
      left: 58%;
      top: 13.6%;
    }
  }

  & .hero__shape--circle05 {
    --aspect-ratio: 269 / 277;
    background-image: url(../images/top/hero_circle05.webp);
    width: 6.5vw;
    left: 9%;
    top: 88%;
    animation-delay: 0.4s;

    @media screen and (min-width: 768px) {
      width: 5.6vw;
      left: 56%;
      top: 83.4%;
    }
  }

  & .hero__shape--square01 {
    --aspect-ratio: 161 / 161;
    background-image: url(../images/top/hero_square01.webp);
    width: 7.2vw;
    left: 41.6%;
    top: 104px;
    --local-transform: rotate(30deg);
    animation-delay: 0.6s;

    @media screen and (min-width: 768px) {
      width: 3.35vw;
      left: 24%;
      top: 70.7%;
      --local-transform: rotate(30deg);
    }
  }

  & .hero__shape--triangle01 {
    --aspect-ratio: 228 / 221;
    background-image: url(../images/top/hero_triangle01.webp);
    width: 10vw;
    left: 52%;
    top: calc((600 * 0.79) * 1px);
    --local-transform: rotate(-19.45deg);
    animation-delay: 0.7s;

    @media screen and (min-width: 768px) {
      width: 5vw;
      left: 66.5%;
      top: 44.6%;
      --local-transform: rotate(-80deg);
    }
  }
}


/*====================================
 * Hero Image Animations
 =====================================*/
body.is-loaded {
  & .hero__catch {
    opacity: 1;
    transform: translateY(0);
  }

  & .hero__underline-image {
    clip-path: inset(0 0 0 0);
  }

  & .hero__lead-bg {
    opacity: 1;
    transform: translateY(0);
  }

  /* Lead text lines animation delay (Smartphone: 5 lines) */
  & .hero__lead-bg:nth-of-type(1) { transition-delay: 1.0s; }
  & .hero__lead-bg:nth-of-type(2) { transition-delay: 1.15s; }
  & .hero__lead-bg:nth-of-type(3) { transition-delay: 1.3s; }
  & .hero__lead-bg:nth-of-type(4) { transition-delay: 1.3s; }
  & .hero__lead-bg:nth-of-type(5) { transition-delay: 1.45s; }
  & .hero__lead-bg:nth-of-type(6) { transition-delay: 1.6s; }

  /* Lead text lines animation delay (PC: 3 lines) */
  @media screen and (min-width: 768px) {
    & .hero__lead-bg:nth-of-type(1) { transition-delay: 1.0s; }
    & .hero__lead-bg:nth-of-type(2) { transition-delay: 1.15s; }
    & .hero__lead-bg:nth-of-type(3) { transition-delay: 1.15s; }
    & .hero__lead-bg:nth-of-type(4) { transition-delay: 1.3s; }
    & .hero__lead-bg:nth-of-type(5) { transition-delay: 1.3s; }
    & .hero__lead-bg:nth-of-type(6) { transition-delay: 1.3s; }
  }
}


/*====================================
 * Menu
=====================================*/
.menu {
  position: relative;
  z-index: 2;
  transform: translateZ(0);

  & .menu__list {
    display: grid;

    @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }

    & a.menu__list-item {
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: subgrid;
      min-height: 225px;
      justify-items: center;
      align-content: center;
      text-align: center;
      border-top: 1px solid rgba(255, 254, 254, 0.5);
      backdrop-filter: blur(12.5px);
      color: #FFF;
      text-decoration: none;
      font-weight: bold;
      transition: color 1.0s ease, border-color 1.0s ease, backdrop-filter 1.0s ease;

      @media screen and (min-width: 1281px) {
        padding: 150px 0;
      }

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(243, 250, 255, 0.85) 58.17%, rgba(207, 237, 255, 0.85) 100%);
        opacity: 0;
        z-index: -1;
        transition: opacity 1.0s ease;
      }

      &:nth-child(odd) {
        border-right: 1px solid rgba(255, 254, 254, 0.5);
      }

      & .menu__list-en {
        font-family: "Ubuntu Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        font-variation-settings: "wdth" 100;
        font-size: 14px;
        letter-spacing: 0.25em;

        @media screen and (min-width: 1281px) {
          font-size: 28px;
        }
      }

      & .menu__list-title {
        position: relative;
        font-size: 22px;
        letter-spacing: 0.1em;
        line-height: 1.36;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 18px 0 20px 0;

        @media screen and (min-width: 1281px) {
          font-size: min(3.125vw, 47px);
          line-height: 1.27;
          height: 180px;
          margin: 0;
        }
      }

      & .menu__list-title::after {
        opacity: 0;
        content: "";
        display: block;
        height: 0;
        width: 150px;
        transition: opacity 1.0s ease, height 1.0s ease;

        @media screen and (min-width: 1281px) {
          width: 342px;
        }
      }

      & .menu__list-detail {
        font-size: 15px;
        letter-spacing: 0.2em;
        text-decoration: underline;

        @media screen and (min-width: 768px) {
          font-size: 18px;
          letter-spacing: 0.25em;
        }
      }

      &:hover {
        color: #4DB0EE;
        border-color: transparent;
        backdrop-filter: blur(0px);

        &::before {
          opacity: 1.0;
        }

        & .menu__list-title::after {
          opacity: 1.0;
          content: url(../images/top/menu_hover.svg);
          display: block;
          height: 22px;
          width: 150px;

          @media screen and (min-width: 1281px) {
            height: 50px;
            width: 342px;
          }
        }

      }
    }
  }
}

/*====================================
 * News
=====================================*/
.news {
  & .news__wrap {
    position: relative;
    z-index: 2;
    transform: translateZ(0);
    background: linear-gradient(180deg, rgb(249, 253, 255) 61.06%, rgb(232, 246, 255) 100%);
    padding: 50px 20px;
  }

  & .news__inner {
    max-width: 850px;
    margin-inline: auto;

    & .news__title {
      text-align: center;
      color: #5CB6EE;
      font-family: "Ubuntu Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-variation-settings: "wdth" 100;
      font-size: 25px;
      line-height: 1.2;
      letter-spacing: 0.2em;
      margin-bottom: 24px;

      @media screen and (min-width: 768px) {
        font-size: 45px;
        letter-spacing: 0.25em;
        margin-bottom: 48px;
      }

      & span {
        display: block;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.25em;
        margin-bottom: 8px;

        @media screen and (min-width: 768px) {
          font-size: 18px;
          letter-spacing: 0.2em;
          margin-bottom: 16px;
        }
      }
    }

    & .news__list {
      & .news__list-item {
        display: grid;
        grid-template-columns: 6em 1fr;
        /* font-size: 15px; */
        font-size: 0.9375rem;
        line-height: 1.6;
        padding: 0 4px 6px 4px;
        margin-bottom: 16px;
        border-bottom: solid 1px #87CEFA;

        @media screen and (min-width: 768px) {
          padding: 0 0 16px 0;
          margin-bottom: 16px;
        }

        & .news__list-date {
          font-family: "Reddit Sans", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          letter-spacing: 0.1em;
        }
      }
    }

    & .news__more {
      font-family: "Ubuntu Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-variation-settings: "wdth" 100;
      font-size: 14px;
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-align: center;
      color: #5CB6EE;
      text-decoration: underline;
      text-underline-offset: 0.2em;
      display: flex;
      justify-content: center;

      @media screen and (min-width: 768px) {
        font-size: 18px;
        margin-top: 32px;
        justify-content: right;
      }

      &.active {
        display: none;
      }

      &.acd-trigger {
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }

      & + .news__list {
        display: none;

        & .news__list-item:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

@keyframes hero-float {
  0%, 100% {
    transform: var(--base-transform, rotate(0deg)) translateY(0);
  }
  50% {
    transform: var(--base-transform, rotate(0deg)) translateY(-12px);
  }
}

@keyframes hero-shape-fade-in {
  from {
    opacity: 0;
    transform: scale(0.8) var(--local-transform, rotate(0deg));
  }
  to {
    opacity: 1;
    transform: scale(1) var(--local-transform, rotate(0deg));
  }
}


/*====================================
 * ENTRY Button
 =====================================*/
.entry-btn {
  position: fixed;
  bottom: 30px;
  right: 10px;
  z-index: 100;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  @media screen and (min-width: 768px) {
    bottom: 116px;
    right: 40px;
  }
}

body.drawer-open .entry-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entry-btn__link {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 170px;
  height: 55px;
  padding: 0 0 0 10px;
  background: #F8EB76;
  border: 2px solid #E5F6FF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset -3px -5px 4px rgba(180, 178, 160, 0.7);
  border-radius: 16px;
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 21px;
  letter-spacing: 0.1em;
  color: #2E9CE0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;

  @media screen and (min-width: 768px) {
    gap: 16px;
    width: 280px;
    height: 100px;
    font-size: 32px;
  }

  &::after {
    position: relative;
    display: block;
    content: "";
    width: 16px;
    height: 17px;
    background-image: url(../images/top/btn_arrow.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    @media screen and (min-width: 768px) {
      width: 23px;
      height: 25px;
    }
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3), inset -3px -5px 4px rgba(180, 178, 160, 0.7);
    opacity: 1.0;
  }
}