@charset "UTF-8";

main .inner {
  width: 1000px;
  padding: 0;
}

@media screen and (max-width: 750px) {
  main .inner {
    width: 100%;
    padding: 0 0;
  }
}

main .inner img {
  display: block;
  line-height: 1;
}

.content h2 {
  margin-bottom: 0;
}

#page-funwarishorts-specialsale .page-contents {
  max-width: 1000px;
  margin: 0 auto;
}


@media screen and (max-width: 750px) {
  #page-funwarishorts-specialsale .cv-btn {
    width: 90%;
    margin: 0 auto;
  }
}

#page-funwarishorts-specialsale .cv-btn.btn1 {
  margin-top: 100px;
}

@media screen and (max-width: 750px) {
  #page-funwarishorts-specialsale .cv-btn.btn1 {
    margin-top: 13.33333vw;
  }
}

#page-funwarishorts-specialsale .cv-btn.btn2 {
  margin-top: 80px;
  margin-bottom: 20px;
}

@media screen and (max-width: 750px) {
  #page-funwarishorts-specialsale .cv-btn.btn2 {
    margin-top: 10.66667vw;
    margin-bottom: 2.66667vw;
  }
}

#page-funwarishorts-specialsale .cv-btn.btn3 {
  margin: 100px 0;
}

@media screen and (max-width: 750px) {
  #page-funwarishorts-specialsale .cv-btn.btn3 {
    margin: 13.33333vw auto;
  }
}

#page-funwarishorts-specialsale .cv-btn.btn4 {
  margin-top: 100px;
}

@media screen and (max-width: 750px) {
  #page-funwarishorts-specialsale .cv-btn.btn4 {
    margin-top: 13.33333vw;
  }
}


/*-------------------------------------------
動画
-----------------------------------------------*/
.l-video {
  position: relative;
}
.video_wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.comfort .video_wrapper {
  bottom: 400px;
  max-width: 840px;
}
.detail .video_wrapper {
  bottom: 60px;
  max-width: 600px;
}
.video_wrapper video {
  width:100%;
  height:100%;
}
@media (width < 768px) {
  .comfort .video_wrapper {
    bottom: 37.333vw;
    max-width: 85.333vw;
  }
  .detail .video_wrapper {
    bottom: 9.333vw;
    max-width: 58%;
  }
}


/*-------------------------------------------
タブ切り替え
-----------------------------------------------*/
.l-cta {
  position: relative;
}
.tabCTA {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tabCTA > label {
  order: -1;
  min-width: 1px;
  cursor: pointer;
}
.tabCTA input {
  display: none;
}
.tabCTA > div {
  display: none;
}
.tabCTA label:has(:checked) + div {
  display: block;
}

/* ボタン */
.cta {
  position: relative;
}
.cta__btn {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 898px;
  cursor: pointer;
}

@media (width < 768px) {
  .cta__btn {
    bottom: 10.667vw; /*40px*/
    width: 90%;
  }
  .tabCTA > label {
    width: 28%;
  }
  .tabCTA > label:nth-of-type(3),
  .tabCTA > label:last-of-type {
    width: 22%;
  }
}

/*------------------------------------------------------
  スライダー共通
------------------------------------------------------*/
.slider {
  position: relative;
}
.slider-wrap {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.slider .swiper-slide {
  text-align: center;
}
.slider .swiper-button-next,
.slider .swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 160px;
  background-size: 110px 160px;
}
.slider .swiper-button-next {
  right: 0;
}
.slider .swiper-button-prev {
  left: 0;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

@media (width < 768px) {
  .slider .slider-wrap {
    bottom: 4%;
  }
  .slider .swiper-button-next,
  .slider .swiper-button-prev {
    width: 40px;
    height: 90px;
    background-size: 40px 90px;
  }
}


/*------------------------------------------------------
  POINT
------------------------------------------------------*/
.point {
  position: relative;
}
.point-wrap {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
}
.point .swiper-button-next {
  right: 25px;
  background-image: url(../img/point/icon-next-arrow.png);
}
.point .swiper-button-prev {
  left: 25px;
  background-image: url(../img/point/icon-prev-arrow.png);
}
.pointSlider {
  margin: 0 70px;
}
@media (width < 768px) {
  .point-wrap {
    top: 39.467vw;
  }
  .point .swiper-button-next {
    right: 2.667vw;
  }
  .point .swiper-button-prev {
    left: 2.667vw;
  }
  .pointSlider {
    margin: 0 6.667vw;
  }
}

/*------------------------------------------------------
  COLOR
------------------------------------------------------*/
.color {
  position: relative;
}
.color .color-wrap {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.color .swiper-slide {
  text-align: center;
}
.color .swiper-slide img {
  margin: 0 auto;
  max-width: 750px;
}
.color .swiper-button-next-color,
.color .swiper-button-prev-color {
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 160px;
  background-size: 110px 160px;
}
.color .swiper-button-next-color {
  right: 46px;
  background-image: url(../img/color/icon-next-arrow.png);
}
 .swiper-button-prev-color {
  left: 46px;
  background-image: url(../img/color/icon-prev-arrow.png);
}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

@media (width < 768px) {
  .color .color-wrap {
    bottom: 16vw; /* 60px */
  }
  .color .swiper-container {
    margin: 0 12.533vw; /* 47px */
  }
  .color .swiper-button-next-color,
  .color .swiper-button-prev-color {
    width: 10.667vw; /* 40px */
    height: 24vw; /* 90px */
    background-size: 10.667vw 24vw;
  }
  .color .swiper-button-next-color {
    right: 4.533vw; /* 17px */
  }
  .color .swiper-button-prev-color {
    left: 4.533vw; /* 17px */
  }
}

/*------------------------------------------------------
  注意事項
------------------------------------------------------*/
.attention {
  border: 1px solid #333333;
  margin-top: 40px;
  padding: 40px;
}
.attention__heading {
  margin: 0 0 1em;
  font-size: 3.0rem;
  font-weight: 700;
  text-align: center;
}
.attention__text {
  line-height: 1.7;
}
.attention__text a {
  color: #B9647B;
}
.attention__text p {
  margin-top: 1em;
}
.attention__text ul {
  margin: 1em 0 0 1em;
}
.attention__text li::before {
  content: "・";
  display: inline-block;
  text-indent: -1em;
}

@media screen and (max-width: 820px) {
  /* 注意事項 */
  .attention {
    padding: 30px 20px;
    margin: 40px 20px;
  }
  .attention__heading {
    margin: 0 0 0.5em;
    font-size: 2.4rem;
  }
}