@charset "UTF-8";
body {
  overflow-x: hidden;
}

.wave img {
  position: absolute;
  text-align: left;
}
@media print, screen and (min-width: 768px) {
  .wave img {
    width: 100%;
    max-width: 1400px;
  }
}
@media only screen and (max-width: 767px) {
  .wave img {
    width: 88.8vw;
    max-width: 333px;
  }
}

#mv {
  background-image: url(../images/bg_mv.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  #mv {
    height: 670px;
  }
}
@media only screen and (max-width: 767px) {
  #mv {
    height: 114.4vw;
  }
}
@media print, screen and (min-width: 768px) {
  #mv img {
    margin-top: 183px;
    width: 522px;
    height: 225px;
  }
}
@media only screen and (max-width: 767px) {
  #mv img {
    margin-top: 27.7333333333vw;
    width: 88.8vw;
    height: 36vw;
  }
}
#mv a:hover img {
  opacity: 0.7;
}
#mv .campaign_popup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media print, screen and (min-width: 768px) {
  #mv .campaign_popup {
    position: absolute;
    right: 9.1%;
    gap: min(1vw, 20px);
  }
}
@media only screen and (max-width: 767px) {
  #mv .campaign_popup {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 6.4vw;
  }
}
#mv .campaign_popup > a {
  display: block;
}
@media print, screen and (min-width: 768px) {
  #mv .campaign_popup > a {
    max-width: 240px;
    width: 16.6089965398vw;
  }
}
@media only screen and (max-width: 767px) {
  #mv .campaign_popup > a {
    width: 80.2666666667vw;
    height: 21.6vw;
  }
}
#mv .campaign_popup > a .campaign_popup {
  width: 100%;
}
#mv .campaign_popup img {
  margin-top: 0;
  width: 100%;
  height: 100%;
}

.wrapper-contents {
  text-align: center;
}
.wrapper-contents p,
.wrapper-contents a {
  font-family: "sans-serif", "ヒラギノ角ゴシック";
  letter-spacing: 0.01em;
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents {
    margin-top: -196px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents {
    margin-top: -13.3333333333vw;
  }
}
.wrapper-contents a img {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.wrapper-contents a:hover img {
  opacity: 0.7;
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .lineup {
    background: linear-gradient(rgba(0, 0, 0, 0) 0% 40px, rgb(247, 207, 175) 150px 100%);
    padding-bottom: 61px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .lineup {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(13.3333333333vw, rgb(247, 207, 175)));
    background: linear-gradient(rgba(0, 0, 0, 0) 0% 8vw, rgb(247, 207, 175) 13.3333333333vw 100%);
    padding-bottom: 14.6666666667vw;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .lineup img {
    width: 413px;
    height: 213px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .lineup img {
    width: 86.6666666667vw;
    height: 52.5333333333vw;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .lineup p {
    margin-top: -25px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .lineup p {
    width: 86.6666666667vw;
    margin: 0 auto;
    line-height: 1.55;
    margin-top: -6.6666666667vw;
    font-size: 4vw;
  }
  .wrapper-contents .lineup p span {
    display: block;
  }
}
.wrapper-contents .lineup .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .lineup .product {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 25px auto 0 auto;
    gap: 32px 32px;
    max-width: 1110px;
    width: 90%;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .lineup .product {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto 0 auto;
    margin-top: 7.2vw;
    gap: 5.3333333333vw 0px;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .lineup .product li {
    width: calc((100% - 32px) / 2);
    max-width: 538px;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .lineup .product img {
    width: 100%;
    height: auto;
    max-width: 538px;
    max-height: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .lineup .product img {
    width: 89.3333333333vw;
    height: 77.3333333333vw;
  }
}
.wrapper-contents a.otherLink {
  width: calc((90% - 32px) / 2);
  max-width: 538px;
  margin: 32px auto 0;
  display: block;
  font-size: 16px;
  border: 2px solid #e60012;
  border-radius: 8px;
  padding: 15px;
  color: #e60012;
  text-decoration: none;
  position: relative;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: 0.3s ease-out background-color;
  transition: 0.3s ease-out background-color;
}
@media only screen and (max-width: 767px) {
  .wrapper-contents a.otherLink {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents a.otherLink {
    width: 89.3333333333vw;
    font-size: 4.2666666667vw;
    margin-left: auto;
    margin-right: auto;
  }
}
.wrapper-contents a.otherLink:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.wrapper-contents a.otherLink::after {
  content: " ";
  display: block;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #e60012;
  position: absolute;
  top: calc(50% - 8px);
  right: 15px;
}
.wrapper-contents .campaign {
  background-image: url(../images/bg_campaign.png);
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .campaign {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .campaign {
    padding-bottom: 16vw;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .campaign img {
    margin-top: 59px;
    width: 260px;
    height: 125px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .campaign img {
    margin-top: 13.8666666667vw;
    margin-bottom: 10.6666666667vw;
    width: 69.3333333333vw;
    height: 29.3333333333vw;
  }
}
.wrapper-contents .campaign .campaign_banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .campaign .campaign_banner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px 32px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .campaign .campaign_banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5.3333333333vw 0px;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .campaign .campaign_banner li {
    width: 46.3667820069vw;
    max-width: 670px;
  }
}
@media print, screen and (min-width: 768px) {
  .wrapper-contents .campaign .campaign_banner img {
    margin-top: 27px;
    width: 100%;
    height: auto;
    max-width: 670px;
    max-height: 320px;
  }
}
@media only screen and (max-width: 767px) {
  .wrapper-contents .campaign .campaign_banner img {
    margin: 0px;
    width: 89.3333333333vw;
    height: 42.6666666667vw;
  }
}