@charset "UTF-8";

.contents {
  margin: 0 auto;
  max-width: 750px;
}

/*------------------------------------------------------
  光るボタン
------------------------------------------------------*/
@-webkit-keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

.shiny-btn {
  width: 416px;
  height: 84px;
  position: relative;
  overflow: hidden;
}

.shiny-btn.shiny-btn2 {
  width: 375px;
  height: 78px;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .shiny-btn {
    width: 55.46667vw;
    height: 11.2vw;
  }
  .shiny-btn.shiny-btn2 {
    width: 50vw;
    height: 10.4vw;
  }
}

.shiny-btn::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 84px;
  height: 100%;
  -webkit-transform: scale(2) rotate(20deg) translate3d(0, 0, 0);
  transform: scale(2) rotate(20deg) translate3d(0, 0, 0);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  /* アニメーション */
  -webkit-animation-name: shiny;
  animation-name: shiny;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@media screen and (max-width: 767px) {
  .shiny-btn::after {
    width: 11.2vw;
  }
}

.shiny-btn2::after {
  width: 78px;
}

@media screen and (max-width: 767px) {
  .shiny-btn2::after {
    width: 10.4vw;
  }
}

/*------------------------------------------------------
  フワフワボタン
------------------------------------------------------*/
.updown {
  -webkit-animation-name: updown1;
  animation-name: updown1;
  /* アニメーション名の指定 */
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  /* アニメーションの開始時間指定 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメーション動作時間の指定 */
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  /* アニメーションの動き指定（徐々に早く）*/
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes updown1 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes updown1 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*------------------------------------------------------
  CTA
------------------------------------------------------*/
.cta {
  position: relative;
}
.cta__btn {
  position: absolute;
  left: calc(50% - 208px);
  bottom: 60px;
  z-index: 1;
}
.bra-shorts-3set {
  background: #ffe5ea;
}
.bra-3set {
  background: #c7e5e6;
}

@media screen and (max-width: 767px) {
  .cta__btn {
    left: calc(50% - 27.733335vw);
    bottom: 5vw;
  }
}


/*------------------------------------------------------
swiper
------------------------------------------------------*/
.swiper-wrap {
  padding-bottom: 200px;
  position: relative;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none;
}

@media screen and (max-width: 767px) {
  .swiper-wrap {
    padding-bottom: 26.66667vw;
  }
}

.swiper-button-next {
  width: 98px;
  height: 22px;
  background: url("../img/arrow.png") no-repeat center top;
  background-size: 100% auto;
}

@media screen and (max-width: 767px) {
  .swiper-button-next {
    width: 13.06667vw;
    height: 2.93333vw;
  }
}

.swiper-button-prev {
  width: 98px;
  height: 22px;
  background: url("../img/arrow.png") no-repeat center top;
  background-size: 100% auto;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

@media screen and (max-width: 767px) {
  .swiper-button-prev {
    width: 13.06667vw;
    height: 2.93333vw;
  }
}

.swiper-wrap > .swiper-pagination-bullets {
  bottom: 16px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 35px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .swiper-wrap > .swiper-pagination-bullets {
    bottom: 2.13333vw;
    padding: 0 3.2vw;
  }
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 67px;
  height: 67px;
  border-radius: 20px;
  opacity: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: 16px;
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 8.93333vw;
    height: 8.93333vw;
    border-radius: 2.66667vw;
    margin-left: 0;
    margin-right: 1.6vw;
    margin-top: 1.6vw;
  }
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:first-of-type {
  background: #000;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(2) {
  background: #d0878e;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(2) {
  background: #d0878e;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(3) {
  background: #394867;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(4) {
  background: #596c8a;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(5) {
  background: #c3c2c7;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(6) {
  background: #d6d4e9;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(7) {
  background: #306479;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(8) {
  background: #a43556;
  margin-right: 0;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(9) {
  background: #f3dad6;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(10) {
  background: #9a3140;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(11) {
  background: #c0baa4;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(12) {
  background: #ffffff;
  border: 2px solid #e9edec;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(12).swiper-pagination-bullet-active {
  border: 4px solid #e5fe02;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(12).swiper-pagination-bullet-active {
    border: 0.53333vw solid #e5fe02;
  }
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(13) {
  background: #c6d6bc;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(14) {
  background: #a8d6e3;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(15) {
  background: #d9b964;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet:nth-of-type(16) {
  background: #ead21a;
  margin-right: 0;
}

.swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet-active {
  border: 4px solid #e5fe02;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .swiper-wrap > .swiper-pagination-bullets .swiper-pagination-bullet-active {
    border: 0.53333vw solid #e5fe02;
  }
}

/*===============================
　.media
================================*/
.media {
  margin: 0 auto;
  background: #ffe6e9;
}
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}