/* --------------------------------------------------------------------------------------
  top
--------------------------------------------------------------------------------------- */
/*--- button ----------*/
.btn--black {
  position: relative;
  display: inline-block;
  border-radius: 0.5rem;
  width: 67%;
  margin: auto;
  margin-bottom: 0;
  padding: 2.5em 0;
  background-color: #000;
  border: 1px solid #000;
}
@media screen and (min-width: 751px) {
  .btn--black {
    padding: 1.5em 0;
    border: 1px solid #000;
  }
}
.btn--blackTxt {
  content: "";
  background-image: url(../img/common_btn-black.svg);
  background-repeat: no-repeat;
  width: 24.5333333333vw;
  height: 2.9333333333vw;
  position: absolute;
  top: 50%;
  left: 10%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 751px) {
  .btn--blackTxt {
    width: min(7.5904677846vw, 86px);
    height: min(0.8826125331vw, 10px);
  }
}
.btn--black:before {
  content: "";
  width: 4.9333333333vw;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 10%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 751px) {
  .btn--black:before {
    width: min(1.5887025596vw, 18px);
    height: 1px;
  }
}
.btn--black:after {
  content: "";
  width: 1.8666666667vw;
  height: 1.8666666667vw;
  border: 1px solid #fff;
  border-left: 0;
  border-bottom: 0;
  position: absolute;
  top: 50%;
  right: 10%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 751px) {
  .btn--black:after {
    width: min(0.6178287732vw, 7px);
    height: min(0.6178287732vw, 7px);
    border: 1px solid #fff;
    border-left: 0;
    border-bottom: 0;
  }
}
@media screen and (min-width: 751px) {
  .btn--black {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}

/*--- frame ----------*/
@media screen and (min-width: 751px) {
  .frame {
    content: "";
    width: 1px;
    height: 10px;
    background-color: #d9ffff;
    position: absolute;
  }
  .frame__product {
    width: 1px;
    height: 20px;
    background-color: #fff;
  }
  .frame--1 {
    top: 50px;
    left: -7px;
  }
  .frame--2 {
    top: 120px;
    right: -7px;
  }
  .frame--3 {
    top: 400px;
    right: -7px;
  }
  .frame--4 {
    top: 100px;
    left: -7px;
  }
  .frame--5 {
    top: 270px;
    right: -7px;
  }
  .frame--6 {
    top: 550px;
    left: -1px;
  }
  .frame--7 {
    bottom: -7px;
    left: 50px;
    width: 20px;
    height: 1px;
  }
  .frame--8 {
    top: -1px;
    left: 55px;
    width: 20px;
    height: 1px;
  }
  .frame--9 {
    top: -7px;
    right: 15px;
    width: 20px;
    height: 1px;
  }
  .frame--10 {
    top: 450px;
    left: -7px;
  }
  .frame--11 {
    top: 550px;
    right: -1px;
  }
  .frame--12 {
    top: -1px;
    left: 90px;
    width: 20px;
    height: 1px;
  }
  .frame--13 {
    top: -7px;
    right: 50px;
    width: 20px;
    height: 1px;
  }
  .frame--14 {
    top: 400px;
    left: -1px;
  }
  .frame--15 {
    top: 500px;
    right: -7px;
  }
  .frame--16 {
    bottom: -7px;
    right: 50px;
    width: 20px;
    height: 1px;
  }
}
/*--- topmv ----------*/
.topmv {
  width: 95%;
  background-color: #fff;
  padding: 32vw 0 13.3333333333vw;
  margin: 0 auto;
  border: 1px solid #8c8c8c;
  position: relative;
}
@media screen and (min-width: 751px) {
  .topmv {
    width: 450px;
    padding: 150px 0 70px;
    -webkit-box-shadow: 0 0 0 1px #8c8c8c, 0 0 0 6px #d9ffff, 0 0 0 7px #8c8c8c;
            box-shadow: 0 0 0 1px #8c8c8c, 0 0 0 6px #d9ffff, 0 0 0 7px #8c8c8c;
    border: none;
  }
}
.topmv__logo {
  width: 44vw;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 751px) {
  .topmv__logo {
    width: 223px;
  }
}
.topmv__muted {
  display: none;
}
.topmv__txt {
  width: 83%;
  margin: 4vw auto 0;
}
@media screen and (min-width: 751px) {
  .topmv__txt {
    margin: 20px auto 0;
  }
}
.topmv .mv__scroll {
  bottom: -4%;
  left: 50%;
}

.swiper {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  position: static;
}
@media screen and (min-width: 751px) {
  .swiper {
    margin: 0 auto;
    width: 100%;
  }
}
.swiper-wrapper {
  width: 100%;
  position: relative;
}
.swiper-slide {
  width: 70.6666666667vw;
  margin-right: 20px;
}
@media screen and (min-width: 751px) {
  .swiper-slide {
    width: 264.84px;
  }
}
.swiper-slide video {
  width: 100%;
  border-radius: 20px;
}
.swiper-slide-active {
  position: relative;
}
.swiper-slide-active:after {
  content: "";
  width: inherit;
  height: inherit;
  background-color: #ffee4e;
  border-radius: 20px;
  position: absolute;
  z-index: -1;
  top: 1%;
  left: 2%;
}
.swiper-slide-active .topmv__muted {
  display: block;
  width: 8.5333333333vw;
  position: absolute;
  z-index: 99;
  bottom: 10px;
  right: 10px;
}
@media screen and (min-width: 751px) {
  .swiper-slide-active .topmv__muted {
    width: 32px;
  }
}
.swiper-slide-prev video, .swiper-slide-next video, .swiper-slide-duplicate-prev video, .swiper-slide-duplicate-next video {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.swiper-pagination {
  position: static;
  margin-top: 1%;
}
@media screen and (min-width: 751px) {
  .swiper-pagination {
    margin-top: 0;
  }
}
.swiper-pagination-bullet {
  opacity: 1;
  width: min(4vw, 30px);
  height: 2px;
  border-radius: 0;
  position: relative;
}
.swiper-pagination-bullet .bullets-inner {
  content: "";
  width: 0%;
  height: 100%;
  background-color: #ffee4e;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active .bullets-inner {
  -webkit-animation: progress linear forwards;
          animation: progress linear forwards;
}
.swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active .bullets-inner {
  -webkit-animation: progress linear forwards;
          animation: progress linear forwards;
}
.swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active .bullets-inner {
  -webkit-animation: progress linear forwards;
          animation: progress linear forwards;
}
.swiper-button-next, .swiper-button-prev {
  display: none;
}
@media screen and (min-width: 751px) {
  .swiper-button-next, .swiper-button-prev {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000;
    border: 1px solid #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .swiper-button-next:before, .swiper-button-prev:before {
    content: "";
    width: 20px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .swiper-button-next:after, .swiper-button-prev:after {
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-left: 0;
    border-bottom: 0;
    position: absolute;
    top: 50%;
  }
  .swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: #fff;
    border: 1px solid #000;
  }
  .swiper-button-next:hover:before, .swiper-button-prev:hover:before {
    background-color: #000;
  }
  .swiper-button-next:hover:after, .swiper-button-prev:hover:after {
    border: 1px solid #000;
    border-left: 0;
    border-bottom: 0;
  }
  .swiper-button-next {
    -webkit-transform: translateX(60%);
            transform: translateX(60%);
    right: 0;
  }
  .swiper-button-next:after {
    right: 25%;
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
  .swiper-button-prev {
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%);
    left: 0;
  }
  .swiper-button-prev:after {
    left: 25%;
    -webkit-transform: translateY(-50%) rotate(225deg);
            transform: translateY(-50%) rotate(225deg);
  }
}

:root {
  --swiper-theme-color: #000;
}

@-webkit-keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
/*--- product ----------*/
@media screen and (min-width: 751px) {
  .inner {
    max-width: 1133px;
  }
}

.product {
  position: relative;
  width: 95%;
  margin: min(18.6666666667vw, 140px) auto 0;
}
@media screen and (min-width: 751px) {
  .product {
    width: 100%;
    max-width: 1133px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.product::before {
  content: "";
  background-image: url(../img/top_new.svg);
  background-repeat: no-repeat;
  width: min(56vw, 420px);
  height: min(27.2vw, 204px);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -88%);
          transform: translate(-50%, -88%);
}
.product__inner {
  border-left: 1px solid #8c8c8c;
  border-right: 1px solid #8c8c8c;
}
@media screen and (min-width: 751px) {
  .product__inner {
    width: 31%;
    border: none;
    -webkit-box-shadow: 0 0 0 1px #8c8c8c, 0 0 0 6px #fff, 0 0 0 7px #8c8c8c;
            box-shadow: 0 0 0 1px #8c8c8c, 0 0 0 6px #fff, 0 0 0 7px #8c8c8c;
    position: relative;
  }
}
@media screen and (min-width: 751px) {
  .product__inner:before {
    width: min(4.5013239188vw, 51px);
  }
}
@media screen and (min-width: 751px) {
  .product__inner:after {
    width: min(31.5092674316vw, 357px);
    height: min(9.6204766108vw, 109px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (min-width: 751px) {
  .product__inner:hover .btn--black {
    background-color: #fff;
    border: 1px solid #000;
  }
  .product__inner:hover .btn--blackTxt {
    background-image: url(../img/common_btn-black-hover.svg);
  }
  .product__inner:hover .btn--black:before {
    background-color: #000;
  }
  .product__inner:hover .btn--black:after {
    border: 1px solid #000;
    border-left: 0;
    border-bottom: 0;
  }
}
@media screen and (min-width: 751px) {
  .product__ttl {
    width: min(23.2127096205vw, 263px);
  }
  .product__img {
    width: min(27.360988526vw, 310px);
  }
  .product__txt {
    width: min(26.1253309797vw, 296px);
    margin: 0 auto 8%;
  }
}

/*--- loading ---------*/
#loading {
  width: 100vw;
  height: 100vh;
  background: url(../img/top_bg.png) repeat;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loading__logo {
  width: 32.4vw;
  position: absolute;
  top: 25%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 751px) {
  .loading__logo {
    top: 30%;
    width: 165px;
  }
}
.loading__txt {
  width: 82.2666666667vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (min-width: 751px) {
  .loading__txt {
    width: 420px;
  }
}
.loading__bar {
  width: 200px;
  height: 2px;
  background-color: #000;
  position: absolute;
  top: 70%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 751px) {
  .loading__bar {
    width: 180px;
    top: 60%;
  }
}
.loading__bar:before {
  content: "";
  width: 0%;
  height: 100%;
  background-color: #ffee4e;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: progress 3s linear forwards;
          animation: progress 3s linear forwards;
}