@charset "utf-8";
/* KV
=================================*/
.front__top {
  margin-bottom: min(10.46vw, 113px);
}
.slider_KV {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
}
.kvbox {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
.front_kv_logo {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* Safari 15.4以降 / Chrome 108以降 / Firefox 101以降 / Edge 108以降 */
  display: flex;
  justify-content: center;
  align-items: center;
}
@supports (-webkit-touch-callout: none) {
  /** iOS **/
  .front_kv_logo {
    height: -webkit-fill-available; /* Safari 15.4以前用 他ブラウザはNG **/
    height: 100svh; /* Safari 15.4以降 / Chrome 108以降 / Firefox 101以降 / Edge 108以降 */
  }
}
.kv_logo {
  width: min(51.2vw, 553px);
}
.kv_logo img.pc__view {
  display: block;
  margin: 0 auto min(14.81vw, 160px);
}
.kv_read {
  position: absolute;
  left: 11.4%;
  top: 30.5%;
}
.kv_read h2 {
  font-size: min(3.15vw, 34px);
  letter-spacing: 0.18rem;
  line-height: 1.6;
  margin-bottom: min(3.24vw, 35px);
}
.kv_read p {
  letter-spacing: 0.08rem;
  line-height: 1.9;
  font-size: min(1.48vw, 16px);
}
.kv_logo-top {
  position: fixed;
  left: min(1.88vw, 24px);
  top: min(1.64vw, 21px);
  width: min(25.78vw, 330px);
}
.kv_logo-top img {
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.3));
}
.kv_logo-top-none {
  display: none;
}

.kv_copy {
  text-align: center;
  color: #fff;
}
.kv_copy_box {
  margin: min(21.95vw, 237px) 0 min(28.4vw, 307px);
}
.top_title01 {
  font-size: min(3.15vw, 34px);
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.kv_copy .copy_txt {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 2;
  margin-top: min(5.93vw, 64px);
  margin-left: auto;
  margin-right: auto;
  width: min(49.3vw, 532px);
}
.copy_txt2 {
  margin-top: min(8.52vw, 92px);
  font-size: min(1.11vw, 12px);
  letter-spacing: 0.06em;
}
.copy_txt2 span {
  font-size: min(2.22vw, 24px);
  display: inline-block;
  padding-left: 8px;
  letter-spacing: 0.06em;
}

.arrows_srd {
  width: 16px;
}
.scroll {
  text-align: center;
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: auto;
}
.scroll p {
  font-size: 13px;
  letter-spacing: 0.04em;
}

@media (max-width: 1279px) {
  .kv_logo-top {
    left: calc(min(7.41vw, 80px) + min(2.31vw, 25px));
    top: min(1.85vw, 20px);
    width: min(30.83vw, 333px);
  }
}

@media (max-width: 767px) {
  .front__top {
    margin-bottom: 48px;
  }
  .kv_logo {
    width: fit-content;
  }
  .kv_logo img.pc__view {
    display: none;
  }
  .kv_logo img {
    height: 226px;
    width: auto;
  }
  .kv_read {
    left: 32px;
    top: 185px;
  }
  .kv_read h2 {
    font-size: 24px;
    letter-spacing: 0.03rem;
    margin-bottom: 16px;
  }
  .kv_read p {
    letter-spacing: 0.01rem;
    line-height: 1.7;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: var(--f_weight-400);
    font-size: 12px;
  }
  .kv_logo-top {
    width: 172px;
    left: 49px;
    top: 18px;
  }
  .top_title01 {
    font-size: 22px;
  }
  .kv_copy .copy_txt {
    width: 85vw;
    font-size: 13px;
    letter-spacing: 0.04em;
    margin-top: 57px;
  }
  .copy_txt2 {
    font-size: 8px;
    margin-top: 47px;
  }
  .copy_txt2 span {
    font-size: 16px;
  }
  .scroll {
    bottom: 16px;
  }
}

/* アニメーション
=================================*/
/* 背景画像のスライド */
.kvbox > div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: kv-slider 25s 0s infinite;
  z-index: 0;
  opacity: 0;
}
.kvbox > div.KV01 {
  background-image: url(../images/top/kv/KV01.jpg);
}
.kvbox > div.KV02.lazyloaded {
  background-image: url(../images/top/kv/KV02.jpg);
  animation-delay: 5s;
}
.kvbox > div.KV03.lazyloaded {
  background-image: url(../images/top/kv/KV03.jpg);
  animation-delay: 10s;
}
.kvbox > div.KV04.lazyloaded {
  background-image: url(../images/top/kv/KV04.jpg);
  animation-delay: 15s;
}
.kvbox > div.KV05.lazyloaded {
  background-image: url(../images/top/kv/KV05.jpg);
  animation-delay: 20s;
}
@media (max-width: 767px) {
  .kvbox > div.KV01 {
    background-image: url(../images/top/kv/KV01_sp.jpg);
  }
  .kvbox > div.KV02.lazyloaded {
    background-image: url(../images/top/kv/KV02_sp.jpg);
  }
  .kvbox > div.KV03.lazyloaded {
    background-image: url(../images/top/kv/KV03_sp.jpg);
  }
  .kvbox > div.KV04.lazyloaded {
    background-image: url(../images/top/kv/KV04_sp.jpg);
  }
  .kvbox > div.KV05.lazyloaded {
    background-image: url(../images/top/kv/KV05_sp.jpg);
  }
}
@keyframes kv-slider {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
    z-index: 10;
  }
  100% {
    opacity: 0;
  }
}

/* 中央のロゴの表示 */
.kv_logo {
  animation-name: kv-logo;
  animation-duration: 5s;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  opacity: 0;
}
@keyframes kv-logo {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 左上のロゴの表示 */
.kv_logo-top {
  animation-name: kv-logo-top;
  animation-duration: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes kv-logo-top {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* リードテキストの表示 */
.kv_read h2 span {
	opacity: 0;
  animation: onetxtanime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.kv_read h2 span:nth-child(1){animation-delay: 5.1s}
.kv_read h2 span:nth-child(2){animation-delay: 5.2s}
.kv_read h2 span:nth-child(3){animation-delay: 5.3s}
.kv_read h2 span:nth-child(4){animation-delay: 5.4s}
.kv_read h2 span:nth-child(5){animation-delay: 5.5s}
.kv_read h2 span:nth-child(6){animation-delay: 5.6s}
.kv_read h2 span:nth-child(7){animation-delay: 5.7s}
.kv_read h2 span:nth-child(8){animation-delay: 5.8s}
@keyframes onetxtanime{
	from { opacity: 0 }
	to { opacity: 1 }
}
.kv_read p span {
	opacity: 0;
  animation: onetxtanime2;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.kv_read p span:nth-child(1) {animation-delay: 5.6s;}
.kv_read p span:nth-child(2) {animation-delay: 5.7s;}
.kv_read p span:nth-child(3) {animation-delay: 5.8s;}
.kv_read p span:nth-child(4) {animation-delay: 5.9s;}
.kv_read p span:nth-child(5) {animation-delay: 6s;}
.kv_read p span:nth-child(6) {animation-delay: 6.1s;}
.kv_read p span:nth-child(7) {animation-delay: 6.2s;}
.kv_read p span:nth-child(8) {animation-delay: 6.3s;}

@keyframes onetxtanime2{
	from { opacity: 0 }
	to { opacity: 1 }
}

/* リードテキストの文字色変更 */
.kv_read h2,
.kv_read p {
  animation: read-color;
  animation-duration: 25s;
  animation-iteration-count: infinite;
  animation-delay: 10s;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  color: var(--white);
}
@media (max-width: 767px) {
  .kv_read h2,
  .kv_read p {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
}
@keyframes read-color {
  0% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  10% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  20% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  30% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  40% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  50% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  60% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  70% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  80% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  90% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
  100% {
    color: var(--white);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  }
}
@media (max-width: 767px) {
  @keyframes read-color {
    0% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    10% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    20% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    30% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    40% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    50% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    60% {
      color: var(--gray02);
      text-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    }
    70% {
      color: var(--gray02);
      text-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    }
    80% {
      color: var(--gray02);
      text-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    }
    90% {
      color: var(--gray02);
      text-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
    }
    100% {
      color: var(--white);
      text-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
  }
}