@charset "UTF-8";
.product-contents-body {
  background: url("/geruma/images/winterspecial/bg.png") repeat 0 0;
  background-size: 100% auto;
  -webkit-padding-after: 40px;
          padding-block-end: 40px;
}

/* メインビジュアル
----------------------------------------------------*/
#mv .mv_wrap {
  position: relative;
}
#mv .mv_txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(100% - var(--gutter-inline) * 2);
  max-width: 620px;
  margin-inline: auto;
  padding-block: 20px;
  position: relative;
  container-type: inline-size;
}
#mv .mv_txt01 {
  /* 元の実寸(幅284px)を620px基準の比率に換算 */
  width: 45.8%;
}
#mv .lineup_list_item {
  position: relative;
  display: block;
  width: 51.8%;
  aspect-ratio: 1/1;
}
#mv .lineup_list_item_cover {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-animation: flipOver 5s linear infinite;
          animation: flipOver 5s linear infinite;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
#mv .lineup_list_item_back {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: flipUnder 5s linear infinite;
          animation: flipUnder 5s linear infinite;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
#mv li.lineup_list_item_cover {
  width: 100%;
  height: 100%;
}
#mv {
  /* 揺れる飾り: 元の実寸(幅・位置)を回転する画像321px基準の比率に換算 */
}
#mv .animation01 {
  /* 幅74px / top -38px / right 0 */
  width: 23.1%;
  top: -11.8%;
  right: 0;
  bottom: auto;
  -webkit-animation: yureru-j 2s infinite;
          animation: yureru-j 2s infinite;
}
#mv .animation02 {
  /* 幅76px / right 246px / bottom -32px */
  width: 23.7%;
  right: 76.6%;
  bottom: -10%;
  -webkit-animation: yureru-j 2s infinite;
          animation: yureru-j 2s infinite;
}
#mv .animation03 {
  /* 幅40px / top -50px / right 0 */
  width: 12.5%;
  top: -15.6%;
  right: 0;
  bottom: auto;
  -webkit-animation: yureru-j 2s infinite;
          animation: yureru-j 2s infinite;
}
#mv .animation04 {
  /* 幅39px / right 287px / bottom -50px */
  width: 12.1%;
  right: 89.4%;
  bottom: -15.6%;
  -webkit-animation: yureru-j 2s infinite;
          animation: yureru-j 2s infinite;
}

@-webkit-keyframes yureru-j {
  0% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  5% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  10% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  15% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  20% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  25% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  30% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}

@keyframes yureru-j {
  0% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  5% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  10% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  15% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  20% {
    -webkit-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
  }
  25% {
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }
  30% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@-webkit-keyframes flipOver {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  6% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  56% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes flipOver {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  6% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  56% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes flipUnder {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
  6% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  56% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes flipUnder {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
  6% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  56% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
/* 調べてみました
----------------------------------------------------*/
#sec01 {
  position: relative;
  width: calc(100% - var(--gutter-inline) * 2);
  max-width: 620px;
  margin-inline: auto;
  background: #fff;
  border-radius: 10px;
}
#sec01 h2 {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 80%;
  max-width: 294px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#sec01 .survey {
  -webkit-padding-before: 60px;
          padding-block-start: 60px;
  padding-inline: 30px;
}
@media screen and (width <= 750px) {
  #sec01 .survey {
    padding-inline: 20px;
  }
}
#sec01 .red_dod {
  border-bottom: dotted 6px #c6161e;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
  -webkit-padding-after: 40px;
          padding-block-end: 40px;
}
#sec01 .attention {
  text-align: center;
  padding: 30px;
}
@media screen and (width <= 750px) {
  #sec01 .attention {
    padding-inline: 20px;
  }
}

/* 冷えた体も…(赤帯の見出し)
----------------------------------------------------*/
#sec02 {
  width: calc(100% - var(--gutter-inline) * 2);
  max-width: 620px;
  margin-inline: auto;
  border-radius: 10px;
  background: #fff;
}
#sec02 h2 {
  background: #c6161e;
  text-align: center;
  padding: 16px;
  position: relative;
  container-type: inline-size;
}
#sec02 h2 span {
  position: absolute;
  /* 620px基準の比率に換算 */
  width: 26.8cqw;
  top: -7.3cqw;
  left: 4.8cqw;
}
#sec02 h2 {
  border-radius: 10px 10px 0 0;
}
#sec02 .sec02_img01 {
  margin-block: 40px;
  padding-inline: 30px;
}
#sec02 .monitor {
  background: #f3f2a3;
  border-radius: 10px;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
}
#sec02 .monitor_images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  -webkit-margin-before: 30px;
          margin-block-start: 30px;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
}
#sec02 .monitor_images p {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}
#sec02 h4 {
  text-align: center;
  font-weight: bold;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}
#sec02 .monitor p {
  line-height: 2.2;
}
#sec02 p span {
  font-weight: bold;
  color: #c6161e;
}
#sec02 p.caption {
  text-align: right;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
}
#sec02 .geruma_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 13px;
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
#sec02 .geruma_wrap .monitor_images {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* 元の実寸(幅137px)を560px基準の比率に換算 */
  width: 24.5%;
  margin: 0;
}

/* スライダー(モニター・口コミ)
----------------------------------------------------*/
.swiper-parent {
  position: relative;
}
@media screen and (width > 750px) {
  .swiper-parent {
    padding-inline: 50px;
  }
}
@media screen and (width <= 750px) {
  .swiper-parent {
    padding-inline: 36px;
  }
}

.swiper-container,
.swiper-container02 {
  -webkit-padding-after: 50px;
          padding-block-end: 50px;
}

.swiper-button-prev,
.swiper-button-next {
  top: calc((100% - 50px) * 0.5);
  -webkit-margin-before: -17px;
          margin-block-start: -17px;
  width: 35px;
  height: 35px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (width <= 750px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 28px;
    height: 28px;
  }
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-next {
  background-image: url("/geruma/images/winterspecial/red_arrow01.png");
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  right: 8px;
}

.swiper-button-prev {
  background-image: url("/geruma/images/winterspecial/red_arrow02.png");
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  left: 8px;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}

.swiper-pagination-bullet-active {
  background: #595757;
}

/* ボタン画像
----------------------------------------------------*/
.sec_btn {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
  padding-inline: var(--gutter-inline);
}
.sec_btn a {
  display: block;
  max-width: 620px;
  margin-inline: auto;
}
@media (any-hover: hover) {
  .sec_btn a:hover {
    opacity: 0.7;
  }
}

/* 誕生秘話
----------------------------------------------------*/
#sec03 {
  width: calc(100% - var(--gutter-inline) * 2);
  max-width: 620px;
  margin-inline: auto;
  margin-block: 40px;
  background: url("/geruma/images/winterspecial/sec03_bg.png") no-repeat top left;
  background-size: 100% 100%;
}
#sec03 h2 {
  -webkit-padding-before: 80px;
          padding-block-start: 80px;
  padding-inline: 20px;
}
#sec03 .history {
  /* 元の実寸(幅500px)を620px基準の比率に換算 */
  width: 80.6%;
  margin-inline: auto;
  -webkit-padding-after: 100px;
          padding-block-end: 100px;
}
#sec03 .history h3 {
  -webkit-margin-after: 30px;
          margin-block-end: 30px;
}
#sec03 .history p span {
  font-weight: bold;
  color: #c6161e;
}
#sec03 .history_dod {
  border-bottom: dotted 6px #c6161e;
  /* 元は左 70px(中央より少し右寄せ) */
  -webkit-margin-start: 11.3%;
          margin-inline-start: 11.3%;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
  -webkit-padding-after: 40px;
          padding-block-end: 40px;
}

/* 累計1600万包
----------------------------------------------------*/
#sec04 {
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  container-type: inline-size;
}
#sec04 .zoom {
  position: absolute;
  /* 元の実寸(幅236px / top 143px / left 12px)を660px基準の比率に換算 */
  width: 35.8cqw;
  top: 21.7cqw;
  left: 1.8cqw;
}

/* 拡大して表示(旧 ScrollReveal の scale: 0.3 / 1.6s を IntersectionObserver で再現)
----------------------------------------------------*/
.zoom {
  opacity: 0;
  scale: 0.3;
  -webkit-transition: opacity 1.6s, scale 1.6s;
  transition: opacity 1.6s, scale 1.6s;
}
.zoom.is-shown {
  opacity: 1;
  scale: 1;
}

#mv {
  -webkit-padding-before: 30px;
          padding-block-start: 30px;
}
#mv .mv_txt::before {
  content: "";
  background: url(/geruma/images/common/tvpop.png) no-repeat;
  background-size: contain;
  /* 元の実寸(幅230px / bottom -22px / left 21px)を620px基準の比率に換算 */
  width: 37.1cqw;
  height: auto;
  aspect-ratio: 230/210;
  position: absolute;
  bottom: -3.5cqw;
  left: 3.4cqw;
  z-index: 3;
}

#sec01 {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
#sec01 .attention {
  background: #fff;
  padding-block: 40px;
  border-radius: 10px 10px 0 0;
}

#sec01b {
  width: calc(100% - var(--gutter-inline) * 2);
  max-width: 620px;
  margin-inline: auto;
  background: #fff;
}
#sec01b h2 {
  background: #c6161e;
  text-align: center;
  padding: 16px;
  position: relative;
  container-type: inline-size;
}
#sec01b h2 span {
  position: absolute;
  /* 620px基準の比率に換算 */
  width: 26.8cqw;
  top: -7.3cqw;
  left: 4.8cqw;
}
#sec01b .sec02_img01 {
  margin-block: 40px;
  padding-inline: 30px;
  -webkit-padding-after: 40px;
          padding-block-end: 40px;
}

#sec02 {
  border-radius: 0;
}
#sec02 h2 {
  border-radius: 0;
}
#sec02 .monitor {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}

/* 商品(カート)
----------------------------------------------------*/
#cnt-main {
  width: calc(100% - var(--gutter-inline) * 2);
  max-width: 620px;
  margin-inline: auto;
  -webkit-padding-after: 20px;
          padding-block-end: 20px;
  background: #fff;
  border-radius: 10px;
}
#cnt-main h2 {
  -webkit-margin-after: 10px;
          margin-block-end: 10px;
}
#cnt-main .p-product {
  padding-inline: 20px;
}

#item02 {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}

.review-wrap {
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}
/*# sourceMappingURL=winterspecial.css.map */