.js-fade {
  -webkit-transition: all ease 3s;
  transition: all ease 3s;
  opacity: 0;
}
.js-fade.active {
  opacity: 1;
}

.js-scroll {
  -webkit-transition: all ease 2.5s;
  transition: all ease 2.5s;
  opacity: 0;
}
.js-scroll.active {
  opacity: 1;
}

.mb-bg {
  background-image: url(../jpg/bg_mahounobathoil.jpg);
  background-size: cover;
  background-position: center;
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

.mb-hero-top {
  position: relative;
  overflow: hidden;
}

.mb-hero-image {
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  -webkit-animation-name: yurayura;
          animation-name: yurayura;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes yurayura {
  0% {
    -webkit-transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
            transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
  }
  50% {
    -webkit-transform: scale(1.1) skew(-1deg) translateY(-5%) rotate(0);
            transform: scale(1.1) skew(-1deg) translateY(-5%) rotate(0);
  }
  100% {
    -webkit-transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
            transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
  }
}

@keyframes yurayura {
  0% {
    -webkit-transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
            transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
  }
  50% {
    -webkit-transform: scale(1.1) skew(-1deg) translateY(-5%) rotate(0);
            transform: scale(1.1) skew(-1deg) translateY(-5%) rotate(0);
  }
  100% {
    -webkit-transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
            transform: scale(1.1) skew(1deg) translateY(-5%) rotate(1deg);
  }
}
.mb-hero-top__catch {
  position: absolute;
  width: 89%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  top: 9%;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

.mb-hero-bottom {
  margin-top: -12%;
  line-height: 0;
}

.mb-about {
  background-image: url(../png/bg_mb_about.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
  padding: 18% 0 75%;
}

.mb-about__towel {
  position: absolute;
  width: 41%;
  top: -2%;
  right: 0;
  z-index: 1;
}

.mb-about__text {
  position: relative;
  z-index: 10;
  margin: auto;
  width: 58%;
}

.mb-about__duck {
  position: absolute;
  width: 27.4%;
  left: 1%;
  top: 45%;
}

.mb-about__products {
  position: absolute;
  width: 80%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 20;
  bottom: -11%;
}

.mb-products {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  margin-top: -5%;
  position: relative;
  z-index: 10;
  padding: 34% 0 18%;
}
.mb-products--01 {
  background-image: url(../png/bg_mb_products01-2.png);
  color: #E60000;
}
.mb-products--02 {
  background-image: url(../png/bg_mb_products02-2.png);
  color: #0A2B3C;
}

.mb-products__headline {
  margin: 0 auto;
  width: 74%;
}

.mb-products__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mb-products__item {
  line-height: 0;
}

.slick-dots li {
  margin: 0;
}

.mb-products__price {
  width: 34%;
  margin: 12% auto 6.8%;
}

.mb-products__btn {
  display: block;
  width: 72%;
  margin: 0 auto 10%;
}

.mb-products__efficacy {
  width: 73%;
  line-height: 0;
  margin: 0 auto 6.5%;
}

.mb-products__heading {
  text-align: center;
  margin: 0 0 3%;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}

.mb-products__spec {
  width: 73%;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: 700;
}

.mb-shop {
  background-image: url(../png/bg_mb_shop.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
  padding: 16% 0 13%;
}

.mb-shop__title {
  margin: 0 auto 15%;
  width: 33%;
}

.mb-shop__headline {
  width: 31%;
  margin: 0 auto 11.6%;
}

.mb-shop__btn {
  width: 72%;
  margin: 0 auto 5.5%;
  line-height: 1;
  display: block;
}

.mb-shop__heading {
  width: 55%;
  margin: 19% auto 14%;
}

.mb-shop__text {
  width: 72%;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: 700;
}