@charset "UTF-8";

.front-page__cta__pc {
  display: none;

  @media (min-width: 768px) {
    display: flex;
    width: calc(150 / 16 * 1rem);
    height: auto;
    aspect-ratio: 1;
    border-radius: 100vmax;
    background-color: var(--primary);
    color: var(--primary-foreground);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    text-align: center;
    gap: calc(8 / 16 * 1rem);
    position: fixed;
    bottom: 24px;
    right: 40px;
    z-index: 50;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: 0.3s ease;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);

    &.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
  }

  @media (hover: hover) {
    &:hover {
      transform: translateY(-4px);
      background-color: #0d3e76;
    }
  }
}

.front-page__cta__sp {
  display: flex;
  position: fixed;
  bottom: 8px;
  inset-inline: 8px;
  z-index: 50;
  justify-content: center;
  align-items: center;
  font-size: calc(14 / 16 * 1rem);
  color: var(--primary-foreground);
  background: linear-gradient(120deg, #1259a8 0%, #a8dbf4 100%);
  min-height: calc(56 / 16 * 1rem);
  padding: 1rem;
  gap: 8px;
  border-radius: 3px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: 0.3s ease;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);

  &.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  @media (min-width: 768px) {
    display: none;
  }

  @media (hover: hover) {
    &:hover {
      transform: translateY(-4px);
    }
  }
}

.front-page__hero {
  position: relative;

  .front-page__hero__content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding-inline: clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
    padding-bottom: clamp(3rem, 2.296rem + 3vw, 5rem);
  }

  .front-page__hero__content__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: clamp(1.5rem, 1.324rem + 0.75vw, 2rem);
    color: var(--primary-foreground);

    .front-page__hero__content__title {
      margin: 0;
      width: calc(100% - 2rem);

      .front-page__hero__content__title__sub {
        font-size: clamp(1.125rem, 0.993rem + 0.56vw, 1.5rem);
        font-weight: 500;
        display: block;
        text-decoration: underline;
        text-underline-offset: 0.5rem;
        text-decoration-thickness: 1px;
      }

      .front-page__hero__content__title__main {
        display: block;
        font-size: calc(32 / 16 * 1rem);
        font-weight: 500;
        line-height: 1.3;
        margin-top: clamp(0.5rem, 0.324rem + 0.75vw, 1rem);
      }
    }
  }

  .front-page__hero__content__open-date {
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: clamp(0.656rem, 0.535rem + 0.52vw, 1rem);
    width: clamp(6.25rem, 5.15rem + 4.69vw, 9.375rem);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;

    span {
      font-size: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
    }
  }

  .front-page__hero__scroll {
    position: absolute;
    right: clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
    bottom: clamp(2rem, 1.648rem + 1.5vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    color: var(--primary-foreground);
  }

  .front-page__hero__scroll__text {
    writing-mode: vertical-rl;
    font-size: clamp(0.75rem, 0.706rem + 0.19vw, 0.875rem);
    letter-spacing: 0.1em;
    font-family: var(--font-english);
  }

  .front-page__hero__sentinel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  .front-page__hero__scroll__arrow {
    display: block;
    width: clamp(0.75rem, 0.706rem + 0.19vw, 0.875rem);
    height: clamp(2.5rem, 2.324rem + 0.75vw, 3rem);
    position: relative;
  }

  .front-page__hero__scroll__arrow::before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background-color: var(--primary-foreground);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollArrowBar 1.5s ease-in-out infinite;
    border-radius: 100vmax;
  }

  .front-page__hero__scroll__arrow::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-bottom: 2px solid var(--primary-foreground);
    border-right: 2px solid var(--primary-foreground);
    transform: rotate(45deg);
    position: absolute;
    bottom: 0;
    left: 0;
    animation: scrollArrow 1.5s ease-in-out infinite;
  }


  /* Hero Slider
       -------------------------------------------------------------------------- */
  .front-page__slide .splide__track {
    height: 100svh;
  }

  .front-page__slide .splide__slide picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .front-page__slide .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure images start at scale 1.1 for the animation */
    transform: scale(1.1);
  }

  /* Apply animations when the slide is active */
  .front-page__slide .splide__slide.is-active.p-home-hero__slide--1 img {
    animation: slideRightToLeft 8s linear;
  }

  .front-page__slide .splide__slide.is-active.p-home-hero__slide--2 img {
    animation: slideLeftToRight 8s linear;
  }

  .front-page__slide .splide__slide.is-active.p-home-hero__slide--3 img {
    animation: slideBottomToTop 8s linear;
  }
}

@keyframes scrollArrowBar {
  0% {
    height: 2px;
    opacity: 0;
  }

  70% {
    height: calc(100% + 2px);
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes scrollArrow {
  0% {
    transform: translateY(calc(-1 * clamp(2.5rem, 2.324rem + 0.75vw, 3rem))) rotate(45deg);
    opacity: 0;
  }

  70% {
    opacity: 1;
    transform: translateY(0) rotate(45deg);
  }

  100% {
    opacity: 0;
  }
}

/* Animations */
/* Slide 1: Right to Left (translateX 2% -> -2%) */
@keyframes slideRightToLeft {
  0% {
    transform: scale(1.1) translateX(2%);
  }

  100% {
    transform: scale(1.1) translateX(-2%);
  }
}

/* Slide 2: Left to Right (translateX -2% -> 2%) */
@keyframes slideLeftToRight {
  0% {
    transform: scale(1.1) translateX(-2%);
  }

  100% {
    transform: scale(1.1) translateX(2%);
  }
}

/* Slide 3: Bottom to Top (translateY 2% -> -2%) */
@keyframes slideBottomToTop {
  0% {
    transform: scale(1.1) translateY(2%);
  }

  100% {
    transform: scale(1.1) translateY(-2%);
  }
}

/* Interior Slider
       -------------------------------------------------------------------------- */
.front-page__interior {
  margin-top: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
  overflow-x: hidden;
}

.front-page__interior-slider .splide__track {
  overflow: visible;
  /* To ensure smooth infinite scroll if needed, though usually hidden is default */
}

.front-page__interior-slider .splide__list {
  gap: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

.front-page__interior-slider .splide__slide {
  width: clamp(20.438rem, 17.775rem + 11.36vw, 28rem);
  height: auto;
  /* Maintain aspect ratio */
}

.front-page__interior-slider .splide__slide img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
}

.front-page__interior-note {
  margin-top: clamp(0.5rem, 0.324rem + 0.75vw, 1rem);
  margin-right: clamp(0.5rem, -0.028rem + 2.25vw, 2rem);
  font-size: clamp(0.75rem, 0.728rem + 0.09vw, 0.813rem);
  text-align: right;
  color: var(--foreground-light);
}

.front-page__about {
  padding-top: clamp(2.75rem, 1.738rem + 4.32vw, 5.625rem);
  padding-bottom: clamp(4rem, 3.472rem + 2.25vw, 5.5rem);
  padding-inline: clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
  position: relative;

  .front-page__about__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 1.62rem + 3.76vw, 5rem);

    @media (min-width: 1024px) {
      align-items: center;
      flex-direction: row-reverse;
    }
  }

  .front-page__about__content__text {
    margin-top: clamp(2rem, 1.824rem + 0.75vw, 2.5rem);
    font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
    line-height: 1.8;
    max-width: 80ch;
  }

  .front-page__about__content__button {
    margin-top: clamp(3rem, 2.186rem + 3.47vw, 5.313rem);
  }

  .front-page__about__image {
    display: grid;
    gap: 8px;
    grid-template-columns: 56% 1fr;

    @media (min-width: 1024px) {
      width: 45.15625%;
    }
  }

  .front-page__about__image__item {
    img {
      border-radius: 5px;
      width: 100%;
      height: auto;
    }
  }

  .front-page__about__image__item--1 {
    grid-column: 1;
    grid-row: 1;
  }

  .front-page__about__image__item--2 {
    grid-column: 1;
    grid-row: 2;
    margin-left: auto;
    width: 75.38%;
  }

  .front-page__about__image__item--3 {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: span 2;
    align-self: center;
  }

  .front-page__about__deco {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: auto;
    bottom: 92px;
    inset-inline: 0;
    opacity: 0.3;

    @media (min-width: 1024px) {
      bottom: 48px;
    }
  }
}

.front-page__features {
  padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
  background-color: var(--secondary);
  position: relative;
  overflow: hidden;

  .front-page__features__deco img {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(8rem, 5.535rem + 10.52vw, 15rem);
    height: auto;
  }

  .front-page__features__deco--bottom img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(7.375rem, 5.152rem + 9.48vw, 13.688rem);
    height: auto;
  }

  .front-page__features__inner {
    width: 100%;
    max-width: 80rem;
    position: relative;
    z-index: 1;
    margin-inline: auto;
  }

  .front-page__features__content {
    margin-top: clamp(2.5rem, 2.324rem + 0.75vw, 3rem);
  }

  .front-page__features__button {
    margin-top: clamp(3rem, 2.824rem + 0.75vw, 3.5rem);
    margin-inline: auto;
  }
}

.front-page__plan {
  padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) clamp(1.5rem, 0.268rem + 5.26vw, 5rem);

  .front-page__plan__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
  }

  .front-page__plan__campaign {
    margin-top: clamp(2.5rem, 2.324rem + 0.75vw, 3rem);
  }

  .front-page__plan__joining__title {
    margin-top: clamp(3rem, 2.824rem + 0.75vw, 3.5rem);
  }

  .front-page__plan__joining__joining-costs {
    margin-top: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
  }

  .front-page__plan__plan-option__title {
    margin-top: clamp(3rem, 2.648rem + 1.5vw, 4rem);
  }

  .front-page__plan__plan-option__content {
    margin-top: clamp(2.5rem, 2.324rem + 0.75vw, 3rem);
  }

  .front-page__plan__equipment__title {
    margin-top: clamp(3rem, 2.648rem + 1.5vw, 4rem);
  }

  .front-page__plan__equipment__content {
    margin-top: clamp(2.5rem, 2.324rem + 0.75vw, 3rem);
  }

  .front-page__plan__button {
    margin-top: clamp(3rem, 2.824rem + 0.75vw, 3.5rem);
    margin-inline: auto;
  }
}

.front-page__flow {
  padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) 0;
  background-color: var(--secondary);

  .front-page__flow__flow-compact {
    margin-top: clamp(2.5rem, 2.324rem + 0.75vw, 3rem);
  }

  .front-page__flow__button {
    margin-top: clamp(3rem, 2.824rem + 0.75vw, 3.5rem);
    margin-inline: auto;
  }
}

.front-page__news {
  padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
  position: relative;
  overflow: hidden;

  .front-page__news__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    display: grid;
    gap: clamp(3rem, 1.415rem + 6.76vw, 7.5rem);
    position: relative;
    z-index: 1;

    @media (min-width: 1024px) {
      grid-template-columns: auto 1fr;

      .c-news-item {
        padding-inline: clamp(0rem, -0.88rem + 3.76vw, 2.5rem);
      }
    }
  }

  .front-page__news__deco--top img {
    position: absolute;
    top: clamp(-1.688rem, -3.448rem + 7.51vw, 3.313rem);
    left: 0;
    width: clamp(9.5rem, 7.783rem + 7.32vw, 14.375rem);
    height: auto;
  }

  .front-page__news__deco--bottom img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(6.563rem, 4.032rem + 10.8vw, 13.75rem);
    height: auto;
  }
}

.front-page__faq {
  padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
  background-color: var(--secondary);

  .front-page__faq__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
  }

  .front-page__faq__content {
    margin-top: calc(48 / 16 * 1rem);
  }
}

.front-page__access {
  padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) clamp(1.5rem, 0.268rem + 5.26vw, 5rem);

  .front-page__access__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
  }

  .front-page__access__content {
    margin-top: calc(48 / 16 * 1rem);
  }
}