@charset "UTF-8";
:root {
  --media_sp: 768; /* VW計算用 calc(vw / var(--media_sp)) */
}
@media screen and (max-width: 768px) {
  .fixBtn {
    opacity: 0;
  }
}

#header .head-logo {
  display: none;
}
#header .head-logo.wh {
  display: block;
}
.head-menu__line.wh {
  background-color: #fff;
}

.kv_wrap {
  position: relative;
  display: block;
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}
.kv_bg-wrap,.kv_bg-swiper,.kv_bg-swiper-wrapper {
  width: 100%;
  height: 100%;
}
/* .kv_bg-swiper-slide {
  width: 100%;
  height: 100%;
} */
.kv_bg-swiper-slide-inner {
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
}
.kv_bg-swiper_txt {
  position: absolute;
}
.kv_bg-swiper_txt.kv_slide02{color: #000;}
.kv_bg-swiper_txt.kv_slide03{color: #fff;}

.kv_cap {
  position: absolute;
  margin: 5px;
  bottom: 0;
  right: 0;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}
.kv_cap.kv_cap-wh {color: #fff;}
.kv_cap.kv_cap-bk {color: #000;}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction.kv_bg-swiper-pagination {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: fit-content;
  height: fit-content;
}
.kv_bg-swiper .swiper-pagination-bullet {
  display: block;
  background-color: #fff;
  transition: background-color .4s;
  aspect-ratio: 1 / 1;
  border-radius: 100vmax;
  opacity: 1;
}
.kv_bg-swiper .swiper-pagination-bullet-active {
  background-color: #9d7d48;
}
/* .kv_wrap .wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.kv_wrap .wrap > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kv_wrap .wrap .sc01 {
  width: 100%;
  height: 100%;
}

.kv_wrap .wrap .sc01_pc .bg {
  font-size: 0;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-transition: all 3s 0s cubic-bezier(0.65, 0, 0.35, 1);
  transition: all 3s 0s cubic-bezier(0.65, 0, 0.35, 1);
}
.kv_wrap .wrap .sc01_pc .bg img {
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}

.kv_wrap .wrap .sc01_pc.move .bg {
  -webkit-transform: translateY(calc(-100% + 100vh));
          transform: translateY(calc(-100% + 100vh));
}

.kv_wrap .wrap .sc01_pc.end .bg {
  -webkit-transform: translateY(calc(-100% + 100vh));
          transform: translateY(calc(-100% + 100vh));
}

.kv_wrap .wrap .sc02 {
  display: grid;
  place-content: center;
}
.kv_wrap .wrap .sc02 .copy {
  width: 88px;
}

.kv_wrap .wrap .sc02_pc .copy {
  width: 88px;
}

.kv_wrap .wrap .sc04 .copy {
  position: absolute;
  top: 3.75vw;
  left: 0;
  right: 0;
  z-index: 2;
}

.kv_wrap .wrap .sc04_pc .copy {
  width: 503px;
} */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #282837;
  z-index: 99999;
}

.loading .logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333346;
  width: 42.202%;
  height: 0;
  padding-bottom: 4.11%;
  margin: auto;
  -webkit-mask-image: url(../img/top/kv/loading.svg);
          mask-image: url(../img/top/kv/loading.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

.loading .logo .loadingTransform {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6a6a9e;
  width: 0;
  height: 100%;
  -webkit-transition: width 1s;
  transition: width 1s;
}

.loading .logo.is-loaded .loadingTransform {
  width: 100%;
}
@media screen and (min-width:769px) {
  .kv_wrap {
    aspect-ratio: 1 / 0.53571;
  }
  .kv_bg-swiper_txt {
    font-size: max( calc((( 30 / 1680) * 100) * var(--vw)), 24.39px);
    line-height: 1.833;
  }
  .kv_bg-swiper_txt.kv_slide02 {
    /* letter-spacing: 0.14em; */
    font-size: 0;
    width: max(calc((( 555 / 1680) * 100) * var(--vw)), 451.125px);
    top: 50.6%;
    right: 5.3%;
  }
  .kv_bg-swiper_txt.kv_slide03 {
    letter-spacing: 0.165em;
    bottom: 10.8%;
    left: 6.4%;
  }
  .kv_bg-swiper .kv_bg-swiper-pagination {
    bottom: 20px;
    gap: 20px
  }
  .kv_bg-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}
@media screen and (max-width: 768px) {
  .kv_wrap {
    /* height: 100svh; */
    aspect-ratio: 1 / 1.05468;
  }
  .kv_bg-swiper_txt {
    font-size: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1.666;
  }
  .kv_bg-swiper_txt.kv_slide02 {
    font-size: 0;
    width: calc((( 26.7 / var(--media_sp)) * 100) * var(--vw));
    top: calc((( 135 / var(--media_sp)) * 100) * var(--vw));
    right: calc((( 55 / var(--media_sp)) * 100) * var(--vw));
  }
  .kv_bg-swiper_txt.kv_slide03 {
    letter-spacing: 0.165em;
    bottom: calc((( 75 / var(--media_sp)) * 100) * var(--vw));
    left: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
  }
  .kv_cap {
    font-size: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
  }
  .kv_bg-swiper .kv_bg-swiper-pagination {
    bottom: calc((( 32 / var(--media_sp)) * 100) * var(--vw));
    gap: calc((( 30 / var(--media_sp)) * 100) * var(--vw))
  }
  .kv_bg-swiper .swiper-pagination-bullet {
    width: calc((( 12 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 12 / var(--media_sp)) * 100) * var(--vw));
  }
  /* .kv_wrap .wrap.sp {
    display: block;
  }
  .kv_wrap .wrap .sc01_sp {
    height: 100%;
  }
  .kv_wrap .wrap .sc01_sp .bg {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.7s 0s ease;
    transition: all 0.7s 0s ease;
  }
  .kv_wrap .wrap .sc01_sp .bg img {
    width: 100vw;
    height: 100%;
    -o-object-position: center;
       object-position: center;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .kv_wrap .wrap .sc02_sp .copy {
    width: calc(117 / var(--media_sp) * 100vw);
  }
  .kv_wrap .wrap .sc03_sp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .kv_wrap .wrap .sc03_sp .bg {
    width: 100%;
    height: 100%;
  }
  .kv_wrap .wrap .sc03_sp .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  .kv_wrap .wrap .sc03_sp.end .bg {
    position: absolute;
    bottom: 0;
  }
  .kv_wrap .wrap .sc04_sp .copy {
    top: calc(77.4 / var(--media_sp) * 100vw);
    left: 51.2%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: calc(590 / var(--media_sp) * 100vw);
  } */
  .loading .logo {
    width: 78.125%;
    padding-bottom: 7.554%;
  }
}