@import './common/reset.css';
@import './common/pc-sp.css';
@import './common/font.css';

:root {
  --font-regular: "TsukuGoPr5N-R";
  --font-medium: "TsukuGoPr5N-M";
}

html {
  overflow-x: hidden;
  width: 100vw;
}

body {
  background: #FBFBFB;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  font-family: 'Awai', var(--font-regular), sans-serif;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  &.is-menu-open {
    overflow: hidden;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Awai', var(--font-medium), sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.5s ease;
  &:hover {
    opacity: 0.7;
  }
}

button {
  &:hover {
    cursor: pointer;
  }
}

img {
  width: 100%;
  height: auto;
}

/* ヘッダー */
.site-header {
  position: relative;
  z-index: 3;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 40px;
  }

  .site-title {
    width: 224px;
    margin-top: 4px;
    line-height: 0;
    a {
      display: inline-block;
    }
  }

  .right-group {
    display: flex;
    align-items: center;
    gap: 46px;
  }

  .global-nav {
    margin-top: 7px;
    ul {
      display: flex;
      align-items: center;
      gap: 46.5px;
      margin: 0;
      padding: 0;
      list-style: none;
      a {
        font-family: 'Awai', sans-serif;
        font-size: 1.4rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        position: relative;

        &:hover {
          opacity: 1;
        }

        &::before {
          content: '';
          position: absolute;
          bottom: -18px;
          left: -1px;
          width: 100%;
          height: 1px;
          background: rgb(0 0 0 / 15%);
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 1s ease;
        }

        &:hover::before {
          transform: scaleX(1);
          transform-origin: left;
        }

        &.is-active {
          &::after {
            content: '';
            position: absolute;
            bottom: -18px;
            left: -1px;
            width: 100%;
            height: 1px;
            background: rgb(0 0 0 / 15%);
          }
        }
      }
    }
  }

  .logo-mark {
    display: flex;
    align-items: center;
  }
}

/* ハンバーガーメニューボタン */
.menu-toggle {
  display: none;
  width: 120px;
  height: 50px;
  border: none;
  border-radius: 50px;
  background-color: #000;
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  span {
    transition: opacity 0.25s ease;
  }
}

/* フッター */
.site-footer {
  .container {
    margin: 0 auto;
    padding: 30px 40px 35px;
    border-top: 1px solid rgb(0 0 0 / 15%);
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 62px;
  }

  .footer-logo-mark {
    margin: 0 0 8px auto;
    img {
      width: auto;
      height: 55px;
    }
  }
  .footer-logo {
    width: 168px;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-nav {
    ul {
      display: flex;
      gap: 47px;
    }
    a {
      font-weight: 300;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }

  .copyright {
    text-align: right;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: #A7AEBF;
  }
}

/* 下層共通パーツ */
.page-title {
  width: 100%;
  max-width: 200px;
  padding: 136px 40px 58px;
  font-family: Awai;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.slider-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.about-slider {
  position: relative;
  width: 20.6%;
  margin: 0;
  padding: 0;
  aspect-ratio: 223/334;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.25s;
}

/* スクロール時に発動するアニメーション */
.about-slider.scroll-animate:nth-child(1) {
  animation: slideInTop 1.25s forwards;
}

.about-slider.scroll-animate:nth-child(2) {
  animation: slideInBottom 1.25s 0.3s forwards;
}

.about-slider.scroll-animate:nth-child(3) {
  animation: slideInTop 1.25s 0.6s forwards;
}

.about-slider.scroll-animate:nth-child(4) {
  animation: slideInBottom 1.25s 0.9s forwards;
}

.about-slider:nth-child(1),
.about-slider:nth-child(3) {
  margin-top: 10%;
}

.slide-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 0 center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 64%, transparent 100%);
  -webkit-mask-size: 100% 350%;
  mask-size: 100% 350%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: -webkit-mask-position 9s cubic-bezier(0.37, 0, 0.63, 1), mask-position 9s cubic-bezier(0.37, 0, 0.63, 1);
}

.slide-item::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  transform: scale(1.1) translateY(5%);
  transition: transform 46s cubic-bezier(0.37, 0, 0.63, 1);
}

.slide-item.active {
  z-index: 2;
  opacity: 1;
}

.slide-item.next {
  z-index: 1;
  opacity: 1;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}

.slide-item.active::before {
  transform: scale(1.1) translateY(-5%);
}

.slide-item.next::before {
  transform: scale(1.1) translateY(5%);
}

.slide-item.next.animating::before {
  transform: scale(1.1) translateY(-5%);
}

.slide-item.active.transitioning {
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}

.slide-item.next.animating {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* 画像をCSS変数なしで直接指定 */
.slide1-1::before { background-image: url('/assets/images/slide/slide1-1.jpg'); }
.slide1-2::before { background-image: url('/assets/images/slide/slide1-2.jpg'); }
.slide1-3::before { background-image: url('/assets/images/slide/slide1-3.jpg'); }
.slide2-1::before { background-image: url('/assets/images/slide/slide2-1.jpg'); }
.slide2-2::before { background-image: url('/assets/images/slide/slide2-2.jpg'); }
.slide2-3::before { background-image: url('/assets/images/slide/slide2-3.jpg'); }
.slide3-1::before { background-image: url('/assets/images/slide/slide3-1.jpg'); }
.slide3-2::before { background-image: url('/assets/images/slide/slide3-2.jpg'); }
.slide3-3::before { background-image: url('/assets/images/slide/slide3-3.jpg'); }
.slide4-1::before { background-image: url('/assets/images/slide/slide4-1.jpg'); }
.slide4-2::before { background-image: url('/assets/images/slide/slide4-2.jpg'); }
.slide4-3::before { background-image: url('/assets/images/slide/slide4-3.jpg'); }

@media screen and (max-width: 999px) {
  body {
    font-size: 1.3rem;
    letter-spacing: 0.1em;
  }

  /* ヘッダー（ハンバーガーメニュー） */
  .menu-toggle {
    display: block;
  }

  .site-header {
    .container {
      height: 35px;
      justify-content: center;
      align-items: self-end;
      padding: 0 30px 23px;
      border-bottom: 1px solid rgb(0 0 0 / 15%);
    }

    .site-title {
      width: 169px;
      margin-top: 0;
    }

    &.is-top {
      .site-title {
        position: relative;
        margin: 0 0 36px;

        a {
          display: block;
          position: relative;
          z-index: 1;

          &::before {
            content: '';
            position: absolute;
            top: -89px;
            left: 50%;
            transform: translateX(-50%);
            width: 36.05px;
            height: 58px;
            background-image: url('/assets/images/logo-mark.svg');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 0;
          }
        }
      }
    }

    .right-group {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh; /* フォールバック */
      height: 100dvh;
      background-color: #fff;
      flex-direction: column;
      justify-content: center;
      gap: 40px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.6s ease, visibility 0.6s ease;
      z-index: 90;

      &.is-active {
        opacity: 1;
        visibility: visible;
      }
    }

    .global-nav {
      margin-top: 0;
      ul {
        flex-direction: column;
        gap: 30px;
        text-align: center;

        a {
          font-size: 1.6rem;
          &::after {
            display: none;
          }
          &::before {
            bottom: -10px;
          }
        }
      }
    }

    .logo-mark {
      display: none;
    }
  }

  /* フッター */
  .site-footer {

    .container {
      padding: 29px 30px;
    }

    .footer-content {
      align-items: flex-start;
      gap: 34px;
    }

    .footer-logo-mark {
      margin-bottom: 0;
    }

    .footer-logo {
      margin-bottom: 13px;
    }

    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 62px;
    }

    .footer-nav {
      ul {
        flex-direction: column;
        gap: 32px;
      }
      a {
        font-size: 1.3rem;
        letter-spacing: 0.18em;
      }
    }

    .copyright {
      font-size: 1rem;
      letter-spacing: 0.188em;
    }
  }

  .about-slider-content,
  .about-mv-slider {
    max-width: none;
    width: calc(100vw - var(--scrollbar-width));
    overflow: hidden;
  }

  .slider-container {
    &.pc {
      display: none;
    }
    &.sp {
      display: flex;
      width: 202.935%;
      margin-left: -51.5%;
    }
  }
  .about-slider {
    width: 30.881%;
    aspect-ratio: 1/1;
  }

  .about-slider:nth-child(1) {
    margin-top: 7.4%; /* 下に配置するための余白 */
  }
  .about-slider:nth-child(2) {
    margin-top: 3.7%; /* 下に配置するための余白 */
  }
  .about-slider:nth-child(3) {
    margin-top: 0; /* 下に配置するための余白 */
  }

  .slide-item::before {
    transform-origin: center center;
    transform: scale(1.1);
    transition: transform 30s linear;
  }

  .slide-item.active {
    z-index: 2;
    opacity: 1;
  }

  .slide-item.next {
    z-index: 1;
    opacity: 1;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  .slide-item.active::before {
    transform: scale(1);
  }

  .slide-item.next::before {
    transform: scale(1.1);
  }

  .slide-item.next.animating::before {
    transform: scale(1);
  }

  .slide-item.active.transitioning {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  .slide1-1::before { background-image: url('/assets/images/slide/sp-slide1-1.jpg'); }
  .slide1-2::before { background-image: url('/assets/images/slide/sp-slide1-2.jpg'); }
  .slide1-3::before { background-image: url('/assets/images/slide/sp-slide1-3.jpg'); }
  .slide2-1::before { background-image: url('/assets/images/slide/sp-slide2-1.jpg'); }
  .slide2-2::before { background-image: url('/assets/images/slide/sp-slide2-2.jpg'); }
  .slide2-3::before { background-image: url('/assets/images/slide/sp-slide2-3.jpg'); }
  .slide3-1::before { background-image: url('/assets/images/slide/sp-slide3-1.jpg'); }
  .slide3-2::before { background-image: url('/assets/images/slide/sp-slide3-2.jpg'); }
  .slide3-3::before { background-image: url('/assets/images/slide/sp-slide3-3.jpg'); }
  .slide4-1::before { background-image: url('/assets/images/slide/sp-slide4-1.jpg'); }
  .slide4-2::before { background-image: url('/assets/images/slide/sp-slide4-2.jpg'); }
  .slide4-3::before { background-image: url('/assets/images/slide/sp-slide4-3.jpg'); }

  .page-title {
    margin: 0 auto;
    padding: 54px 30px 53px;
    text-align: center;
    font-size: 1.6rem;
  }
}

/* slide-reveal アニメーション（左から右に表示） */
@keyframes slideMask {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

.slide-reveal {
  position: relative;
  transition: opacity 0.6s ease-out;
  will-change: opacity;
  overflow: hidden;
}

.slide-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 260%;
  height: 100%;
  background: linear-gradient(325deg, #fbfbfb 0%, #fbfbfb 50%, rgba(251, 251, 251, 0) 80%);
  transform: translateX(-60%);
  transition: transform var(--animation-duration, 2s) linear;
  z-index: 1;
}

.slide-reveal.is-visible {
  opacity: 1;
}

.slide-reveal.is-visible::before {
  transform: translateX(50%);
}

@keyframes slideInTop {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes slideInBottom {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

hr.slide-reveal {
  width: 100%;
  height: 1px;
  border: none;
  background: rgb(0 0 0 / 15%);
  margin: 0;
}