@charset "utf-8";
@media only screen and (max-width: 1025px) {
  .pcnavi dl.first dd {
    font-size: 1rem;
  }

  .pcnavi dl.second dd {
    font-size: 0.8rem;
    line-height: 1.4em;
    padding: 2px 0;
  }

}

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

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .btn-shop {
    width: 80%;
  }

  #back-top {
    display: none !important;
  }

  .yosyuu {
    margin-top: 50px;
    width: 90%;
  }

  .btn-other {
    width: auto;
    padding: 17px 25px;
    border: 3px solid #4E4B44;
    border-radius: 50px;
    transition: all 0.1s;
    margin: 20px auto 0;
    font-size: clamp(11px, 3vw, 19px);
    text-align: center;
    letter-spacing: 0.1em;
  }

  .bg__top {
    margin-top: 20px;
  }

  .bg__bottom {
    margin-bottom: 40px;
  }

  /* ======================================== */
  /* メリットここから */
  /* ======================================== */

  .merit {
    padding-bottom: 100px;
  }

  .merit__row {
    flex-direction: column;
  }

  .merit__header {
    flex-direction: column;
  }

  .merit__header-img {
    width: 80%;
  }

  video.vid_main {
    width: 100%;
    margin-top: 30px;
    position: relative;
    z-index: 2;
  }

  .merit__item--left,
  .merit__item--right {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 50px auto 0;
  }

  .merit__title::before {
    left: -70%;
    top: -40%;
  }

  .merit__text {
    margin-top: 10px;
    line-height: 1.4;
  }

  .gasfan__item,
  .gasfan__item:nth-child(2) {
    flex-direction: column;
  }

  .merit__item--right {
    position: relative;
  }

  .merit__deco--top {
    display: flex;
    position: absolute;
    width: 40%;
    min-width: 160px;
    z-index: 2;
    bottom: -31%;
    right: 0%;
  }

  .merit__item--left {
    position: relative;
  }

  .merit__deco--bottom {
    display: flex;
    position: absolute;
    width: 32%;
    min-width: 130px;
    z-index: 2;
    bottom: -22%;
    left: 10%;
  }

  /* ======================================== */
  /* メリットここまで */
  /* ======================================== */

  /* ======================================== */
  /* 商品紹介ここから */
  /* ======================================== */

  .gasfan__title {
    margin: auto;
    width: 100%;
  }

  .gasfan__desc {
    margin: auto;
  }

  .spec__img {
    width: 80%;
    margin-top: 100px;
  }

  .spec__img:first-child {
    margin-top: 0;
  }

  .spec__info {
    margin-top: 30px;
    font-size: 15px;
  }

  /* ======================================== */
  /* 商品紹介ここまで */
  /* ======================================== */


.picture-book__title {
    width: 50%;
    margin: 80px auto 20px;
}

.cleafix {
  display: none;
}

.main {
  display: none;
}
  /* ======================================== */
  /* 特典ここから */
  /* ======================================== */


  .bg--fan__bottom {
    margin-bottom: -8%;
    transform: translateY(-30%);
  }

  .bg--benefits__top {
    margin-top: -8%;
    transform: translateY(40%);
  }

  .manga {
    width: 100%;
  }

  .yaji {
    display: flex;
    position: absolute;
    bottom: -17%;
    left: 8%;
  }

  img.yaji {
    width: 28%;
  }

  .benefits__item {
    flex-direction: column;
    gap: 0;
    margin-top: 50px;
  }

  .benefits__item:first-child {
    margin-top: 0;
  }

  .benefits__toggle {
    width: 80%;
  }

  .benefits__title {
    margin: 0;
    /* 距離を短く調整 */
  }

  .benefits__name {
    width: 100%;
  }

  .benefits__detail {
    margin-top: 0;
    /* 詳細との距離を短く調整 */
  }

  .benefits__detail.active~.finger {
    opacity: 0;
    pointer-events: none;
    /* クリックを無効化 */
    transition: opacity 0.3s ease;
  }

  .benefits__item .benefits__detail.active+.finger {
    opacity: 0;
    pointer-events: none;
    /* クリックを無効化 */
    transition: opacity 0.3s ease;
  }

  .benefits__bg--lb {
    bottom: -100%;
  }

  .finger {
    top: 40%;
    left: 10%;
    width: 20%;
    opacity: 1;
    transition: all 1s ease, transform 0.5s ease;
    /* トランジションをスムーズに調整 */
  }

  /* merit背景装飾要素の調整 */
  .merit__bg--lb {
    width: 25%;
    bottom: -30%;
    left: -5%;
  }

  .merit__bg--rb {
    width: 35%;
    bottom: -60%;
    right: -5%;
  }

  /* fadeinアニメーションの強制表示 */
  .js-fadein,
  .js-fadeinR {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  /* btn-est内のarrowをモバイル用に調整 */
  .arrow {
    width: 20px;
    height: 2px;
    margin-left: 10px;
    margin-bottom: 1px;
  }

  .arrow::before {
    width: 8px;
    height: 2px;
    top: -3px;
    right: -2px;
  }

  .arrow::after {
    width: 8px;
    height: 2px;
    top: 3px;
    right: -2px;
  }

  .attakamenu01.menu01 li a {
    font-size: 15px !important;
  }

  .attakamenu02 li a {
    font-size: 11px !important
  }

  #copy {
    font-size: 12px !important;
  }

  .spnavi .accordion_one .accordion_header {
    color: #fff;
    font-size: 1rem !important;
    text-align: left;
    cursor: pointer;
  }

  @media screen and (max-width: 640px) {
    .merit__deco--top {
      width: 50%;
    }

    .merit__deco--bottom {
      width: 45%;
      bottom: -24%;
    }

  }


}