@charset "utf-8";

/* 縦タイトル */

.block-top-vert-ttl-content {
  position: relative;
}

.block-top-vert-ttl-content h2 {
  margin: 0;
  padding: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
}

@media all and (min-width: 768px) {
  .block-top-vert-ttl-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .block-top-vert-ttl-content h2 {
    display: flex;
    align-items: flex-end;
    width: 100px;
    font-size: 2.8rem;
    line-height: 1;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .block-top-vert-ttl-content .block-top-vert-ttl-content-body + h2 {
    align-items: flex-start;
  }

  .block-top-vert-ttl-content-body {
    width: calc(100% - 100px);
    padding-top: 40px;
  }
}

@media all and (max-width: 767px) {
  .block-top-vert-ttl-content h2 {
    font-size: 2rem;
    text-align: center;
  }

  .block-top-vert-ttl-content-body {
    margin-top: 32px;
  }
}

/* FAQ */

.block-top-faq-list {
  border-top: 1px solid var(--cl-gr-1);
}

.block-top-faq-list-item {
  border-bottom: 1px solid var(--cl-gr-1);
}

.block-top-faq-list-item dt,
.block-top-faq-list-item dd > div {
  position: relative;
}

.block-top-faq-list-item dt {
  cursor: pointer;
}

.block-top-faq-list-item dd {
  display: none;
}

.block-top-faq-list-item dt::before,
.block-top-faq-list-item dd > div::before {
  display: block;
  position: absolute;
  font-family: var(--ff-num);
}

.block-top-faq-list-item dt::before {
  content: "Q.";
  color: var(--cl-gn);
}

.block-top-faq-list-item dd > div::before {
  content: "A.";
  color: var(--cl-rd);
}

.block-top-faq-list-item dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
}

.block-top-faq-list-item dd > div p + p {
  margin-top: 1.5em;
}

.block-top-faq-list-item dd > div a {
  text-decoration: underline;
}

.block-top-faq-list-item dd > div .annotation {
  font-size: 1.4rem;
  color: var(--cl-gr-txt);
}

.block-top-faq-list-item dd > div sup {
  font-size: 60%;
}

.block-top-faq-list-item dd > div .item-tag-list {
  display: flex;
  flex-wrap: wrap;
  margin: 14px -10px 0 0;

  li {
    margin: 10px 10px 0 0;

    > span {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 26px;
      padding: 0 10px;
      background-color: var(--cl-tag);
      font-size: 1.4rem;
      line-height: 1;
      letter-spacing: 0;
    }
  }
}

@media all and (min-width: 768px) {
  .block-top-faq {
    margin-top: 120px;
  }

  .block-top-faq-list-item {
    padding: 32px 0;
  }

  .block-top-faq-list-item dt {
    padding: 0 40px 0 72px;
    font-size: 1.8rem;
  }

  .block-top-faq-list-item dd {
    padding-top: 26px;
    font-size: 1.6rem;
    line-height: 1.571;
  }

  .block-top-faq-list-item dd > div {
    padding: 0 40px 0 72px;
  }

  .block-top-faq-list-item dt::before,
  .block-top-faq-list-item dd > div::before {
    left: 22px;
    font-size: 2.2rem;
  }

  .block-top-faq-list-item dt::before {
    top: 50%;
    transform: translate(0, -50%);
  }

  .block-top-faq-list-item dd > div::before {
    top: -5px;
  }

  .block-top-faq-list-item dt::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 11px;
    height: 7px;
    margin-top: -3px;
    background-image: url(../../../img/common/sp/arw_down.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.12s;
  }

  .block-top-faq-list-item dt.is-open::after {
    transform: rotate(180deg);
  }

  .block-top-faq-list-item dd > div a[href^="tel:"] {
    text-decoration: none;
  }
}

@media all and (max-width: 767px) {
  .block-top-faq {
    margin-top: 80px;
  }

  .block-top-faq-list-item {
    padding: 16px 0;
  }

  .block-top-faq-list-item dt {
    padding: 0 36px 0 42px;
    font-size: 1.6rem;
  }

  .block-top-faq-list-item dd {
    padding-top: 20px;
    font-size: 1.4rem;
    line-height: 1.571;
  }

  .block-top-faq-list-item dd > div {
    padding: 0 10px 0 42px;
  }

  .block-top-faq-list-item dt::before,
  .block-top-faq-list-item dd > div::before {
    left: 10px;
    font-size: 2rem;
  }

  .block-top-faq-list-item dt::before {
    top: 50%;
    transform: translate(0, -50%);
  }

  .block-top-faq-list-item dd > div::before {
    top: -2px;
  }

  .block-top-faq-list-item dt::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 11px;
    height: 7px;
    margin-top: -3px;
    background-image: url(../../../img/common/sp/arw_down.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.12s;
  }

  .block-top-faq-list-item dt.is-open::after {
    transform: rotate(180deg);
  }

  .block-top-faq-list-item dd > div .annotation {
    font-size: 1.2rem;
  }
}

/* メリット */

.block-teiki_merit {
  .cl-rd {
    color: var(--cl-rd);
  }
}

.block-teiki_merit-anker {
  ul {
    display: flex;
    flex-wrap: wrap;

    a {
      display: block;
      position: relative;
      width: 100%;
      padding-top: 10px;
      background-color: #fef5f5;
      text-align: center;

      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        width: 16px;
        height: 8px;
        margin-left: -8px;
        background-image: url(../../../img/s/teiki/arw_anker.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .list-no {
        font-weight: 700;

        .ff-num {
          margin-left: 8px;
          font-weight: 600;
        }
      }
    }
  }
}

@media all and (min-width: 768px) {
  .block-teiki_merit {
    margin-top: 112px;
  }

  .block-teiki_merit-anker {
    li {
      width: 248px;

      &.list-full {
        width: 506px;
      }

      &:not(:nth-child(5n)):not(:last-child) {
        margin-right: 10px;
      }

      &:not(:nth-child(-n + 5)) {
        margin-top: 10px;
      }

      a {
        height: 120px;

        .list-comment {
          margin-top: 3px;
          font-size: 1.8rem;
          line-height: 1.2;
          letter-spacing: 0;

          > .ff-num {
            font-size: 2rem;
          }

          .txt-s {
            font-size: 1.2rem;
          }

          b,
          > b.ff-num {
            font-size: 2.4rem;
            font-weight: 600;
          }
        }
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-teiki_merit {
    margin-top: 40px;

    .ttl-h1 {
      margin-bottom: 48px;
    }
  }

  .block-teiki_merit-anker {
    ul {
      justify-content: space-between;

      li {
        width: calc((100% - 10px) / 2);

        &.list-full {
          width: 100%;
        }

        &:not(:nth-child(-n + 2)) {
          margin-top: 10px;
        }

        a {
          padding-top: 8px;
          height: 100px;

          .list-no {
            font-size: 1.4rem;
          }

          .list-comment {
            line-height: 1.2;
            letter-spacing: 0;

            > .txt-s {
              font-size: 1.2rem;
            }

            b {
              font-size: 2rem;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}

.block-teiki_merit-list-item {
  position: relative;
  border: 1px solid var(--cl-gr-1);

  .list-no {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -1px;
    background-color: #ffffff;
    font-family: var(--ff-serif);
    font-weight: 500;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .list-example {
    background-color: var(--cl-gn-bg);
  }
}

@media all and (min-width: 768px) {
  .block-teiki_merit-list {
    margin-top: 80px;
    padding-left: 24px;
  }

  .block-teiki_merit-list-item {
    padding: 39px 39px 39px 71px;

    & + .block-teiki_merit-list-item {
      margin-top: 40px;
    }

    .list-no {
      left: -14px;
      width: 28px;
      padding: 20px 0;
      font-size: 2.8rem;
      letter-spacing: 0.3em;
    }

    .list-top {
      display: flex;
    }

    .list-ttl {
      position: relative;
      min-height: 100px;
      padding-left: 124px;

      &.align-mid {
        display: flex;
        align-items: center;
        height: 100px;
      }

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      &.icon-off::before {
        background-image: url(../../../img/s/teiki/merit_off.png);
      }

      &.icon-point::before {
        background-image: url(../../../img/s/teiki/merit_point.png);
      }

      &.icon-shipping::before {
        background-image: url(../../../img/s/teiki/merit_shipping.png);
      }

      &.icon-campaign::before {
        background-image: url(../../../img/s/teiki/merit_campaign.png);
      }

      &.icon-priority::before {
        background-image: url(../../../img/s/teiki/merit_priority.png);
      }

      .list-ttl-main {
        display: flex;
        align-items: baseline;
        line-height: 1.3;

        > p {
          font-size: 2rem;
          font-weight: 700;
          letter-spacing: 0.04em;
        }

        > div {
          display: flex;
          align-items: baseline;
          margin-left: 4px;
          font-weight: 500;
          letter-spacing: 0.04em;

          span + span {
            margin-left: 4px;
          }
        }

        .fs-52 {
          font-size: 5.2rem;
        }

        .fs-40 {
          font-size: 4rem;
        }

        .fs-36 {
          font-size: 3.6rem;
        }

        .fs-34 {
          font-size: 3.4rem;
        }

        .fs-30 {
          font-size: 3rem;
        }

        .fs-24 {
          font-size: 2.4rem;
        }

        .fs-20 {
          font-size: 2rem;
        }

        .fs-12 {
          font-size: 1.2rem;
        }
      }

      .list-ttl-sub {
        margin-top: 3px;
        font-size: 1.8rem;
        line-height: 1.444;
        letter-spacing: 0.04em;
      }
    }

    .list-btn {
      display: flex;
      align-items: center;
      height: 100px;
      margin-left: auto;

      a {
        width: 300px;
        height: 50px;
        font-size: 1.6rem;
      }
    }

    .list-annotation {
      margin-top: 16px;
      color: var(--cl-gr-txt);
      font-size: 1.2rem;
    }

    .list-example {
      margin-top: 24px;
      padding: 24px 24px 24px 37px;

      .list-example-ttl {
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 0.04em;
      }

      .list-example-body {
        display: flex;
        align-items: center;
        height: 110px;
        margin-top: 24px;
      }

      .list-example-prod {
        display: flex;
        align-items: center;

        .prod-img {
          width: 110px;

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }

        .prod-detail {
          margin-left: 24px;

          .prod-name {
            font-size: 1.8rem;
            letter-spacing: 0.04em;
          }

          .prod-contents {
            margin-top: 8px;
            color: var(--cl-gr-txt);
            font-size: 1.3rem;
            font-family: var(--ff-num);
          }
        }
      }

      .list-example-price {
        display: flex;
        align-items: center;
        margin: 20px 0 0 auto;
        font-family: var(--ff-num);

        .price-default,
        .price-off-teiki {
          line-height: 1.333;

          &.price-off-teiki {
            margin-left: 10px;
            color: var(--cl-rd);
          }

          dt {
            /* 早原追加分 */
            /* padding-left: 59px; */
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 0.04em;
          }

          dd {
            display: flex;
            align-items: center;

            .price-default-circle,
            .price-off-teiki-circle {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 50px;
              height: 50px;
              margin-right: 9px;
              border-radius: 50px;
              background-color: #ffffff;
              font-size: 1.8rem;
              font-weight: 600;
              letter-spacing: 0.04em;
            }

            .price-default-price,
            .price-off-teiki-price {
              font-size: 3.6rem;
              font-weight: 500;
              letter-spacing: 0.04em;

              .tax {
                margin-left: -2px;
                font-size: 1.4rem;
                font-weight: 700;
                letter-spacing: 0.1em;
              }
            }
          }
        }

        .price-off {
          display: flex;
          align-items: center;
          margin-left: 12px;

          .price-off-arw {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 140px;
            height: 80px;
            margin-right: 17px;
            padding-top: 4px;
            background-color: var(--cl-rd);
            color: #ffffff;
            line-height: 1.2;

            dt {
              font-size: 1.8rem;
              font-weight: 700;
              letter-spacing: 0.04em;
            }

            dd {
              font-weight: 500;

              .no {
                font-size: 3.4rem;
              }

              .percent {
                font-size: 2.8rem;
              }

              .off {
                margin-left: 3px;
                font-size: 2.4rem;
              }
            }

            &::after {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              right: -17px;
              width: 17px;
              height: 80px;
              background-color: var(--cl-rd);
              clip-path: polygon(17px 50%, 0% 0%, 0% 80px);
            }
          }
        }

        .price-present {
          position: relative;
          margin-left: 24px;

          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: -25px;
            width: 15px;
            height: 15px;
            margin-top: -8px;
            background-image: url(../../../img/s/teiki/icon_merit_plus.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }

          .price-present-img {
            img {
              display: block;
              width: 64px;
              height: 64px;
              margin: 0 auto;
              border-radius: 64px;
            }
          }

          .price-present-comment {
            margin-top: 7px;
            color: var(--cl-gn);
            font-size: 1.4rem;
            font-weight: 700;
            text-align: center;
            line-height: 1.428;
            letter-spacing: 0;
          }
        }
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-teiki_merit-list {
    margin-top: 64px;
    padding-left: 16px;
  }

  .block-teiki_merit-list-item {
    padding: 23px 15px 15px;

    & + .block-teiki_merit-list-item {
      margin-top: 24px;
    }

    .list-no {
      left: -10px;
      width: 20px;
      padding: 16px 0;
      font-size: 2rem;
      letter-spacing: 0.3em;
    }

    .list-top {
      padding-left: 20px;
    }

    .list-ttl {
      display: flex;
      flex-wrap: wrap;

      .list-ttl-icon {
        width: 70px;
        height: 70px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      &.icon-off .list-ttl-icon {
        background-image: url(../../../img/s/teiki/sp/merit_off.png);
      }

      &.icon-point .list-ttl-icon {
        background-image: url(../../../img/s/teiki/sp/merit_point.png);
      }

      &.icon-shipping .list-ttl-icon {
        background-image: url(../../../img/s/teiki/sp/merit_shipping.png);
      }

      &.icon-campaign .list-ttl-icon {
        background-image: url(../../../img/s/teiki/sp/merit_campaign.png);
      }

      &.icon-priority .list-ttl-icon {
        background-image: url(../../../img/s/teiki/sp/merit_priority.png);
      }

      .list-ttl-main,
      .list-tt-main-2 {
        &.list-ttl-main {
          width: calc(100% - 70px);
          padding-left: 19px;
        }

        > p {
          font-size: 1.8rem;
          font-weight: 700;
          line-height: 1.333;
          letter-spacing: 0.04em;
        }

        > div {
          display: flex;
          align-items: baseline;
          margin-top: 0;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.04em;

          span + span {
            margin-left: 4px;
          }
        }

        .fs-52 {
          font-size: 4.8rem;
          font-weight: 500;
        }

        .fs-40 {
          font-size: 3rem;
        }

        .fs-36 {
          font-size: 3.6rem;
        }

        .fs-34 {
          font-size: 3rem;
        }

        .fs-30 {
          font-size: 1.8rem;
        }

        .fs-24 {
          font-size: 1.8rem;
        }

        .fs-20 {
          font-size: 1.8rem;
        }

        .fs-12 {
          font-size: 1.2rem;
        }
      }

      .list-ttl-sub {
        margin-top: 10px;
        letter-spacing: 0.04em;
      }
    }

    .list-btn {
      margin-top: 16px;

      a {
        height: 50px;
        font-size: 1.6rem;
      }
    }

    .list-annotation {
      margin-top: 14px;
      color: var(--cl-gr-txt);
      font-size: 1.2rem;

      &.sp-only {
        padding-left: 20px;
      }
    }

    .list-example {
      margin-top: 14px;
      padding: 16px;

      .list-example-ttl {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.625;
        letter-spacing: 0.04em;
      }

      .list-example-body {
        margin-top: 14px;
      }

      .list-example-prod {
        display: flex;
        align-items: center;

        .prod-img {
          width: 80px;

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }

        .prod-detail {
          width: calc(100% - 80px);
          padding-left: 16px;

          .prod-name {
            letter-spacing: 0.04em;
          }

          .prod-contents {
            margin-top: 7px;
            color: var(--cl-gr-txt);
            font-size: 1.3rem;
            font-family: var(--ff-num);
          }
        }
      }

      .list-example-price {
        margin-top: 16px;
        font-family: var(--ff-num);

        .price-default,
        .price-off-teiki {
          line-height: 1.333;

          &.price-default {
            display: flex;
            align-items: center;
          }

          &.price-off-teiki {
            color: var(--cl-rd);
          }

          dt {
            font-size: 1.3rem;
            font-weight: 700;
            letter-spacing: 0.04em;
          }

          &.price-default dt {
            display: flex;
            align-items: center;
            margin-right: 9px;

            .price-default-circle {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 36px;
              height: 36px;
              margin-left: 6px;
              border-radius: 36px;
              background-color: #ffffff;
              font-size: 1.2rem;
              font-weight: 600;
              letter-spacing: 0.04em;
            }
          }

          &.price-off-teiki dt {
            padding-left: 40px;
          }

          dd {
            display: flex;
            align-items: center;

            .price-off-teiki-circle {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 36px;
              height: 36px;
              margin-right: 4px;
              border-radius: 36px;
              background-color: #ffffff;
              font-size: 1.2rem;
              font-weight: 600;
              letter-spacing: 0.04em;
            }

            .price-default-price,
            .price-off-teiki-price {
              font-size: 2.4rem;
              font-weight: 500;
              letter-spacing: 0.04em;

              .tax {
                margin-left: -2px;
                font-size: 0.9rem;
                font-weight: 700;
                letter-spacing: 0.1em;
              }
            }
          }
        }

        .price-off {
          display: flex;
          align-items: center;
          height: 57px;
          margin-top: 8px;

          .price-off-arw {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 89px;
            height: 57px;
            margin-right: 23px;
            padding: 4px 0 0 4px;
            background-color: var(--cl-rd);
            color: #ffffff;
            line-height: 1.25;

            dt {
              font-size: 1.2rem;
              font-weight: 700;
              letter-spacing: 0.04em;
            }

            dd {
              font-weight: 500;

              .no {
                font-size: 2.4rem;
              }

              .percent {
                font-size: 2rem;
              }

              .off {
                margin-left: 3px;
                font-size: 1.6rem;
              }
            }

            &::after {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              right: -13px;
              width: 13px;
              height: 57px;
              background-color: var(--cl-rd);
              clip-path: polygon(13px 50%, 0% 0%, 0% 57px);
            }
          }
        }

        .price-present {
          display: flex;
          align-items: center;
          position: relative;
          height: 46px;
          margin-top: 10px;
          padding-left: 31px;

          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            width: 15px;
            height: 15px;
            margin-top: -8px;
            background-image: url(../../../img/s/teiki/icon_merit_plus.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }

          .price-present-img {
            img {
              display: block;
              width: 47px;
              height: 47px;
              margin: 0 auto;
              border-radius: 47px;
              object-fit: cover;
            }
          }

          .price-present-comment {
            margin-left: 10px;
            color: var(--cl-gn);
            font-size: 1.3rem;
            font-weight: 700;
            line-height: 1.461;
            letter-spacing: 0;
          }
        }
      }
    }
  }
}

.block-teiki_merit-anshin-list-item {
  border: 1px solid var(--cl-gn);
  background-color: var(--cl-gn-bg);

  .list-ttl {
    display: flex;
  }
}

@media all and (min-width: 768px) {
  .block-teiki_merit-anshin {
    margin-top: 120px;

    .ttl-h2 {
      margin-bottom: 44px;
    }
  }

  .block-teiki_merit-anshin-list-items {
    display: flex;
  }

  .block-teiki_merit-anshin-list-item {
    width: calc((100% - 80px) / 3);
    padding: 29px 0 23px 39px;

    &:not(:nth-child(3n)) {
      margin-right: 40px;
    }

    .list-ttl {
      height: 80px;

      .no {
        color: var(--cl-gn);
        font-size: 4.8rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0;
      }

      .txt {
        position: relative;
        margin-left: 46px;
        padding-top: 12px;
        font-size: 2.4rem;
        font-family: var(--ff-num);
        font-weight: 700;
        line-height: 1.416;
        letter-spacing: 0.04em;

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 11px;
          left: -22px;
          width: 1px;
          height: 40px;
          background-color: var(--cl-gn);
          transform: rotate(30deg);
        }
      }
    }

    .list-comment {
      margin-top: 18px;
      padding-right: 39px;
      font-size: 1.8rem;
      line-height: 1.444;
      letter-spacing: 0.04em;
    }
  }

  .block-teiki_merit-anshin-comment {
    margin-top: 40px;
    font-size: 1.8rem;
    text-align: center;
  }
}

@media all and (max-width: 767px) {
  .block-teiki_merit-anshin {
    margin-top: 80px;

    .ttl-h2 {
      margin-bottom: 30px;
    }
  }

  .block-teiki_merit-anshin-list-item {
    padding: 23px;

    + .block-teiki_merit-anshin-list-item {
      margin-top: 10px;
    }

    .list-ttl {
      min-height: 52px;

      .no {
        color: var(--cl-gn);
        font-size: 4rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0;
      }

      .txt {
        display: flex;
        align-items: center;
        min-height: 52px;
        position: relative;
        margin-left: 40px;
        padding-top: 2px;
        font-size: 2.4rem;
        font-family: var(--ff-num);
        font-weight: 700;
        line-height: 1.416;
        letter-spacing: 0.04em;

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 8px;
          left: -22px;
          width: 1px;
          height: 38px;
          background-color: var(--cl-gn);
          transform: rotate(30deg);
        }
      }
    }

    .list-comment {
      margin-top: 13px;
      font-size: 1.8rem;
      line-height: 1.444;
      letter-spacing: 0.04em;
    }
  }

  .block-teiki_merit-anshin-comment {
    margin-top: 24px;
  }
}

.block-teiki_merit-prod-body {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.block-teiki_merit-prod--box {
  background-color: #ffffff;

  .item-ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 30px;
    background-color: var(--cl-lgn);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;

    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -8px;
      left: 50%;
      width: 13px;
      height: 11px;
      margin-left: -7px;
      background-color: var(--cl-lgn);
      clip-path: polygon(50% 11px, 0% 0%, 13px 0%);
    }
  }

  .item-off {
    margin-top: 7px;
  }

  .item-off-item {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    font-family: var(--ff-num);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.04em;

    dt {
      font-size: 1.8rem;
    }

    dd {
      margin-left: 15px;
      font-weight: 500;

      .no {
        font-size: 5.2rem;
        letter-spacing: 0;

        .percent {
          font-size: 3.6rem;
        }
      }

      .off {
        margin-left: 4px;
        font-size: 3.4rem;
      }
    }
  }

  .item-btn {
    margin-top: auto;

    a {
      width: 100%;
      height: 50px;
      font-size: 1.6rem;
    }
  }
}

@media all and (min-width: 768px) {
  .block-teiki_merit-prod {
    margin-top: 120px;

    .ttl-h2 {
      margin-bottom: 44px;
    }
  }

  .block-teiki_merit-prod-body {
    width: 1200px;
    height: 370px;
    margin: 0 auto;
    padding: 40px;
    background-image: url(../../../img/s/teiki/prod_bg.jpg);
  }

  .block-teiki_merit-prod--box {
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 100%;
    padding: 40px;
  }
}

@media all and (max-width: 767px) {
  .block-teiki_merit-prod {
    margin-top: 80px;

    .ttl-h2 {
      margin-bottom: 30px;
    }
  }

  .block-teiki_merit-prod-body {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 108.71vw;
    margin: 0 auto;
    padding: 24px;
    background-image: url(../../../img/s/teiki/sp/prod_bg.jpg);
  }

  .block-teiki_merit-prod--box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;

    .item-off {
      margin-top: 8px;
    }

    .item-btn {
      margin-top: 12px;
    }
  }
}

@media all and (min-width: 768px) {
  .block-teiki_merit-faq {
    margin-top: 120px;
  }
}

@media all and (max-width: 767px) {
  .block-teiki_merit-faq {
    margin-top: 80px;
  }
}