@charset "utf-8";

.kv {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  & .kv-back {
    position: relative;
    z-index: 1;
    padding-top: 14.7em;
    width: 100%;
    aspect-ratio: 375/636;
    background-image: url(../img/index/kv-bg.jpg);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    & .fuji {
      width: 77.3em;
      aspect-ratio: 773/317;
      position: relative;
      z-index: 2;
      margin-left: -2.2em;
    }
    & .mt {
      margin-top: -23.3em;
      margin-left: -19.3em;
      width: 80.6em;
      aspect-ratio: 806/141;
      position: relative;
      z-index: 3;
    }
    & .clouds {
      position: absolute;
      top: -1.5em;
      left: 0;
      width: 100%;
      aspect-ratio: 375/346;
      z-index: 4;
      & .clouds-group {
        position: relative;
        width: 100%;
        height: 100%;
        & .cloud {
          height: auto;
          aspect-ratio: 120/51;
          position: absolute;
        }
        & .cloud-01 {
          top: 1.8em;
          right: -0.4em;
          width: 11.9em;
          mix-blend-mode: luminosity;
          opacity: 0.5;
        }
        & .cloud-02 {
          top: 23.4em;
          left: -2.2em;
          width: 12.3em;
          mix-blend-mode: luminosity;
          opacity: 0.5;
        }
        & .cloud-03 {
          top: 26.2em;
          right: -2em;
          width: 14em;
        }
        & .cloud-04 {
          top: 30.9em;
          left: 5.4em;
          width: 12.3em;
          mix-blend-mode: luminosity;
          opacity: 0.8;
        }
      }
    }
    & .track {
      margin-top: -7.5em;
      width: 100%;
      aspect-ratio: 375/346;
      position: relative;
      z-index: 5;
    }
    & .front {
      margin-top: -26.1em;
      width: 100%;
      position: relative;
      z-index: 6;
    }
  }
  & .kv-main {
    position: absolute;
    top: -0.5em;
    width: 100%;
    z-index: 2;
    & .kikyuu {
      margin: 0 auto;
      width: 26.5em;
      aspect-ratio: 265/292;
    }
    & .gold {
      position: absolute;
      top: 3em;
      width: 100%;
    }
    & .horse {
      position: absolute;
      top: 1.5em;
      left: 2.2em;
      width: 33em;
      aspect-ratio: 330/294;
    }
    & .logo {
      position: absolute;
      bottom: -15.3em;
      left: 1.5em;
      width: 34em;
      aspect-ratio: 342/195;
    }
  }
}

.lead {
  position: relative;
  margin-top: -14.5em;
  & .leaf {
    width: 100%;
  }
  & .text-area {
    margin-top: -0.2em;
    padding-top: 2em;
    padding-bottom: 4.3em;
    background: url(../img/index/lead-bg.jpg) no-repeat center center/cover;
    & .inner {
      display: flex;
      flex-direction: column;
      row-gap: 3.5em;
    }
    & .text {
      color: #fff;
      font-size: 1.6em;
      line-height: 2;
      letter-spacing: 0.1em;
      text-align: center;
      font-family: var(--font-mincho);
      & span {
        font-weight: 700;
      }
    }
  }
}

.ready {
  margin-top: -41em;
  padding-top: 41em;
  padding-bottom: 1.6em;
  background: url(../img/index/ready-bg.jpg) no-repeat top center/cover;
  & .gradient {
    position: relative;
    width: 100%;
    aspect-ratio: 375/319;
    background: linear-gradient(
      180deg,
      #000000 11.73%,
      rgba(255, 255, 255, 0) 88.34%
    );
    & .inner {
      position: sticky;
      top: 20em;
      padding-bottom: 2.5em;
      mix-blend-mode: difference;
      & .text {
        color: #fff;
        font-size: 2em;
        letter-spacing: 0.2em;
        text-align: center;
        font-family: var(--font-gothic);
        font-weight: 700;
      }
    }
  }
  & .sansen {
    overflow: hidden;
    position: relative;
    padding-top: 2em;
    padding-bottom: 1.9em;
    & .horse-bg {
      /* position: absolute;
      top: 0;
      left: 0; */
      width: 100%;
      aspect-ratio: 375/242;
    }
    & .horses-group {
      position: absolute;
      top: 2em;
      left: 0;
      width: 100%;
      aspect-ratio: 375/242;
    }
    & .text {
      position: absolute;
      top: 16em;
      right: -1em;
      & .text-bg {
        width: 28.8em;
        aspect-ratio: 288/103;
      }
      & .text-wrapper {
        position: absolute;
        top: -1.4em;
        left: -0.8em;
        width: 25.4em;
        aspect-ratio: 264/120;
      }
    }
    & .ready-text {
      margin-top: 1.9em;
      font-size: 1.8em;
      line-height: 2;
      text-align: center;
      font-family: var(--font-gothic);
      font-weight: 700;
    }
    & .btn-start {
      margin-top: 2.3em;
    }
  }
}

.intro {
  /* margin-top: 1.1em; */
  padding-bottom: 8.7em;
  background-color: #1b1c35;
  background-image: url(../img/index/intro-bg.png);
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  & .head-area {
    margin-inline: auto;
    padding-top: 3.2em;
    padding-bottom: 2.2em;
    text-align: center;
    width: 34.3em;
    border-bottom: 0.1em solid #fff;
    & .head-group {
      display: inline-flex;
      column-gap: 0.8em;
      align-items: center;
      & .head {
        color: #fff;
        font-size: 2.4em;
        font-weight: 900;
        letter-spacing: 0.05em;
      }
      & .head-icon {
        width: 3.2em;
        aspect-ratio: 1;
      }
    }
    & .text {
      margin-top: 1.4em;
      color: #fff;
      font-size: 1.6em;
      line-height: 1.7;
      font-weight: 700;
      letter-spacing: 0.1em;
      font-family: var(--font-gothic);
      text-align: center;
    }
  }
  & .horses {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    margin-top: 1.2em;
    & .side {
      flex-shrink: 0;
      position: sticky;
      top: 9em;
      left: 0;
      margin-top: 9em;
      width: 3.1em;
      aspect-ratio: 31/132;
    }
    & .list {
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;
      & .item {
        width: 23.7em;
        aspect-ratio: 237/148;
        &:nth-child(even) {
          margin-left: 12.4em;
          margin-top: -6.3em;
        }
        &:not(:first-child):nth-child(odd) {
          margin-top: -4.1em;
        }
      }
    }
  }
}

#main .sinsotsu {
  overflow: hidden;
  margin-top: -5.6em;
  padding-bottom: 3em;
  /* background: url(../img/index/ready-bg.jpg) no-repeat center center/cover; */
  & .btn-start {
    margin-top: 1.5em;
  }
}



/* --------------------------------------------------------------- */
/*  animation */
/* --------------------------------------------------------------- */

.js-clip-item {
  /* 初期状態：右端から100%の位置までクリッピング（＝完全に隠す） */
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  
  /* GSAPで表示制御するため、初期は非表示にしておく */
  visibility: hidden;
  opacity: 0;

  /* パフォーマンス向上のおまじない */
  will-change: clip-path;
}