@charset "utf-8";
/*@charset "UTF-8";     コメント */
/*css初期設定 start*/
html {
  font-size: 62.5%; /*文字標準*/
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
}
a {
  text-decoration: none; /*リンクデコレーションリセット*/
}
/*大きさの計算*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  width: 100%;
  margin: 0 auto;
  line-height: 1.7;
  /*文字詰め*/
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  /*スマホ横向き時のフォントサイズリセット*/
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: visible;
  font-size: 1.4rem;
  color: #000;
}
a:hover {
  text-decoration: none;
}
.eng {
  font-family: 'Archivo Narrow', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}
/*画像の調整*/
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
span {
  display: inline-block;
}
@media only screen and (max-width: 1279px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .br-sp {
    display: block;
  }
  .br-pc {
    display: none;
  }
}
/* 1024px */
@media only screen and (min-width: 1280px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
  .br-sp {
    display: none;
  }
  .br-pc {
    display: block;
  }
}
#copyright {
  font-size: 1.2rem;
}
#main-footer a {
  font-size: 1.2rem;
}
/*css初期設定 end*/
/*main start*/
h1 {
  font-size: clamp(41px, 10.93vw, 50px);
  margin: 0;
}
h2 {
  font-size: clamp(17px, 4.53vw, 34px);
  margin: 0;
  font-weight: 600;
}
h3 {
  font-size: clamp(16px, 4.26vw, 23px);
  margin: 0;
  font-weight: 600;
}
h4 {
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.1;
  margin: 0;
  font-weight: 600;
}
p {
  font-size: clamp(13px, 3.46vw, 18px);
}
.mainWrap {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.topSec {
  width: 100%;
  height: 0;
  margin: 0 auto;
  position: relative;
  padding-top: 110%;
  background: linear-gradient(101deg, #a0cbbf, #c2dbe3, #85bdce);
  background-size: 600% 600%;
  animation: GradientBackground 9s ease infinite;
}
@keyframes GradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
.topSec .title {
  position: absolute;
  width: 72%;
  top: 1.6%;
  left: 50%;
  transform: translate(-50%, 0);
}

.topSec .img01 {
  position: absolute;
  width: 19.46%;
  top: 13.33%;
  left: 24.53%;
}
.topSec .img02 {
  position: absolute;
  width: 18.66%;
  top: 13.33%;
  right: 24%;
}
.topSec .img03 {
  position: absolute;
  width: 18.13%;
  bottom: 1%;
  left: 8%;
}
.topSec .img04 {
  position: absolute;
  width: 20.8%;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, 0);
}
.topSec .img05 {
  position: absolute;
  width: 20.86%;
  bottom: 1%;
  right: 10.66%;
}
.leadSec {
  width: 100%;
  margin: 18% auto 0;
  padding: 0 5% 8%;
  box-sizing: border-box;
}

.leadSec h2 {
  margin: 0 0 5%;
}
.couponSec {
  margin: 18% auto 0;
  padding: 0 5% 18%;
  flex-direction: column;
  margin: 0 auto;
  border-bottom: 3px solid #41b3c7;
}
.couponSec .img01 {
  width: 90%;
  padding: 5% 0;
  margin: 0 auto;
}

span.txtDeco {
  text-decoration: underline;
  font-weight: 600;
}
.couponSec .note h3 {
  text-align: center;
}
.couponSec .note p {
  font-size: clamp(12px, 3.2vw, 14px);
}
.productsSec {
  width: 100%;
  margin: 0 auto;
}
.productsSec .title_sans {
  width: 100%;
  margin: 0 0 5%;
}
.itemBox {
  padding: 15% 0;
}
.productsSec .boxBG {
  background-color: #e9f5f6;
}
.productsSec .title_sans .img01 {
  display: block;
  width: auto;
  height: 12vw;
  margin-bottom: 1%;
}
.productsSec .title_sans .img02 {
  display: block;
  width: auto;
  height: 12vw;
  margin: 0 0 0 auto;
}
.productsSec .mainImgOuter {
  width: 100%;
  margin: 0 auto;
  height: 0;
  padding-bottom: 10%;
  position: relative;
  padding-top: 87%;
  overflow: hidden;
}
.productsSec .mainImgOuter .swiper {
  width: 100%;
  margin-inline: auto;
  padding: 0 15%;

  position: absolute;
  top: 0;
  left: 0;
}
.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper img {
  max-width: 100%;
  height: auto;
}
/* 矢印 */
.swiper-button-prev,
.swiper-button-next {
  width: 70px;
  height: 30px;
}
.swiper-button-prev {
  left: 10px;
}
.swiper-button-next {
  right: -40px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.swiper-button-prev::after {
  background-image: url(../images/svg/left_arrow.svg);
}

.swiper-button-next::after {
  background-image: url(../images/svg/right_arrow.svg);
}
.productsSec .mainImgOuter .title_cursive {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  left: 0;
  bottom: 3%;
  z-index: 5;
}
.productsSec .itemTxt {
  width: 100%;
  margin: 5% 0;
  padding: 0 2.5%;
}
.productsSec .itemTxt hr {
  border-bottom: #000 solid 2px;
}
hr.lightGrayLine {
  width: 50%;
  border-bottom: #ccc solid 2px;
  margin: 5% auto 1%;
}
.productsSec .itemsFlex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 2.5%;
}
.productsSec .itemsFlex .skuTxt {
  width: 100%;
}
.productsSec .itemsFlex .skuTxt hr {
  border-bottom: #000 solid 2px;
}
.productsSec .itemsFlex .skuTxt h4 {
  margin-bottom: 1%;
}
.productsSec .itemsFlex .skuTxt p {
  font-size: 12px;
}
.productsSec .itemsFlex .skuDescBox {
  width: calc((100vw - 31px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.productsSec .itemsFlex .multiplied_by {
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
}
a.cvBtn {
  display: block;
  width: 80%;
  max-width: 470px;
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  padding: 2% 0;
  font-size: clamp(14px, 3.73vw, 23px);
  text-align: center;
  margin: 12% auto 5%;
}
a.buyBtn {
  display: block;
  width: 100%;
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  letter-spacing: 1px;
  padding: 1% 0;
  font-size: clamp(13px, 3.46vw, 16px);
  font-weight: 600;
  text-align: center;
  margin: 5% 0 5%;
}
/* inview */
.js-fade {
  transform: scale(1.3); /* 初期設定：1.5倍にしておく */
  transition: transform 0.6s;
  transition-delay: 0.25s;
}

.inview {
  transform: scale(1); /* 初期設定：1.5倍にしておく */
}
/* タブレット版 */
@media only screen and (min-width: 768px) {
}

/*PC版*/
@media only screen and (min-width: 1280px) {
  .topSec {
    padding-top: 43.12%;
  }
  .topSec .title {
    position: absolute;
    width: 48.98%;
    top: auto;
    bottom: 0;
    z-index: 50;
  }

  .topSec .img01 {
    width: 11.5%;
    top: 6.15%;
    left: 25.26%;
  }
  .topSec .img02 {
    width: 10.88%;
    top: 6.15%;
    right: 26.96%;
  }
  .topSec .img03 {
    width: 10.9%;
    bottom: auto;
    top: 6.15%;
    left: 8.07%;
  }
  .topSec .img04 {
    width: 12.08%;
    bottom: auto;
    top: 6.15%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .topSec .img05 {
    width: 12.5%;
    bottom: auto;
    top: 6.15%;
    right: 8.8%;
  }

  .leadSec {
    margin: 6.4% auto 0;
    padding: 0 0 6.4%;
    text-align: center;
  }
  .leadSec h2 {
    margin: 0 0 2%;
  }
  .couponSec {
    margin: 0 auto;
    width: 60%;
    padding: 0 5% 7%;
  }
  .couponSec .text01 {
    text-align: center;
  }
  .couponSec .img01 {
    width: 65%;
    margin: 0 auto;
  }
  .couponSec .note {
    width: 65%;
    margin: 0 auto;
  }
  .productsSec .itemBox {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
  }
  .productsSec .itemBox.itemBoxpc02 {
    flex-direction: row-reverse;
  }
  .productsSec .itemBox .itemBox-f1 {
    width: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .productsSec .itemBox .itemBox-f2 {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .productsSec .title_sans {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .productsSec .itemTxt {
    margin-top: 0;
    padding: 0;
  }
  .productsSec .itemsFlex .skuTxt {
    width: 100%;
  }
  .productsSec .itemTxt p {
    font-size: 13px;
  }
  .productsSec .title_sans .img01 {
    height: 3vw;
  }
  .productsSec .title_sans .img02 {
    height: 3vw;
    margin: 0 0 0 5%;
  }
  .productsSec .mainImgOuter .title_cursive {
    bottom: 0;
    width: 80%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .productsSec .itemBoxpc02 .title_sans .img01 {
    height: 3vw;
    margin: 0 10% 0 auto;
  }
  .productsSec .itemBoxpc02 .title_sans .img02 {
    height: 3vw;
    margin: 1% 5% 0 auto;
  }
  .productsSec .mainImgOuter .swiper {
    top: 3%;
  }

  .productsSec .itemBox .itemBox-f1 .itemRight {
    width: 80%;
    display: flex;
    flex-direction: column;
  }
  .productsSec .itemBox .itemBox-f2 .itemRight {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .productsSec .itemsFlex {
    padding: 0;
  }
  .productsSec .itemsFlex .skuDescBox {
    width: calc((100% - 38px) / 2);
  }
  .productsSec .itemsFlex .multiplied_by {
    width: 38px;
  }
  .productsSec .itemsFlex .itemsImg {
    width: 80%;
    margin: 0 auto;
  }
  a.buyBtn {
    transition: 0.3s;
  }
  a.buyBtn:hover {
    background-color: #e9f5f6;
    color: #000;
  }
  a.cvBtn {
    padding: 0.5% 0;
    font-size: clamp(14px, 3.73vw, 16px);
    margin: 3% auto 0;
    transition: 0.3s;
  }
  a.cvBtn:hover {
    background-color: #fff;
    color: #000000;
  }
  /* inview */
  .js-fade2 {
    transform: scale(1.3); /* 初期設定：1.5倍にしておく */
    transition: transform 0.6s;
    transition-delay: 1s;
  }
  .inview2 {
    transform: scale(1); /* 初期設定：1.5倍にしておく */
  }
}
