.wrap {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.rel_img {
  position: relative;
}
.sp_only {
  display: none;
}


@media screen and (max-width:768px) {

}

/*--- CTA ---*/
.cta_btn_img {
  width: 86.6%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/*--- 単品 ---*/
.cta_area_button1{
  position: absolute;
  top: 73%;
  right: 0;
  left: 0;
  width: 100%;
}
/*--- 毎月お届け便 ---*/
.cta_area_button2{
  position: absolute;
  top: 87%;
  right: 0;
  left: 0;
  width: 100%;
}
/*--- CTAここまで ---*/
/*--- CTAボタンアニメーションここから ---*/
.keyframe {
  animation-name: anim_yoko;
}

@keyframes anim_yoko {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }

  75% {
    transform: translateX(-6px);
  }

  80% {
    transform: translateX(6px);
  }

  85% {
    transform: translateX(-4px);
  }

  90% {
    transform: translateX(4px);
  }

  95% {
    transform: translateX(0);
  }
}

.animation {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
/*--- CTAボタンアニメーションここまで ---*/

/* ここからアコーディオン */
.off-trigger {
  display: block;
  cursor: pointer;
}

.on-content {
  position: relative;
}

.close-trigger {
  display: block;
  cursor: pointer;
}

.off-trigger,
.on-trigger {
  display: block;
  cursor: pointer;
  margin: 20px 10px 20px;
}

/* closed */
.off .on-content {
  display: none;
}

/* opened */
.on .off-content {
  display: none;
}

/* ここまでアコーディオン */