@charset "shift_jis";

:root {
  --main-color: #2c2c2c;
  --btn-color: #2c2c2c;
}

@media screen and (min-width: 769px) {

  /*--- reasonここから ---*/
  .sale_reason_wrap {

    /* メイン画像 */
    .sa_main {
      background: url(../img/main_bg.webp);
      background-size: cover;
      background-repeat: no-repeat;
      height: 100%;
      padding: 0;

      .sa_main_inner {
        width: 1000px;
        height: 283px;
        margin: 0 auto;
        box-sizing: border-box;
        padding-top: 40px;
      }

      .sa_main_tit {
        font-size: 70px;
        line-height: 70px;
        font-weight: bold;
        text-align: center;
        margin: 0;
        color: #fff;
        border: none;
        padding: 0;

        >span {
          display: inline-block;
          font-size: 25px;
          font-weight: bold;
          line-height: 30px;
          color: #fff;
          margin-bottom: 30px;
          padding-bottom: 10px;
          border-bottom: 1px solid #fff;
        }
      }
    }

    /* menu */
    .reason_menu_wrap {
      width: 900px;
      margin: 80px auto;

      ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        li {
          a {
            display: block;
            width: 250px;
            height: 130px;
            background: #fff;
            border: 3px solid #ebe9e9;
            border-radius: 5px;
            margin-right: 10px;
            margin-bottom: 10px;
            font-size: 21px;
            font-weight: bold;
            line-height: 25px;
            letter-spacing: 0.01em;
            position: relative;
            text-align: center;
            box-sizing: border-box;
            padding: 13px 0;
            transition: .3s;

            .svg_wrap {
              width: 90px;
              padding-bottom: 5px;
            }

            span {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 52px;
            }

            &::after {
              content: "";
              width: 10px;
              height: 10px;
              border-top: 3px solid var(--main-color);
              border-right: 3px solid var(--main-color);
              -webkit-transform: rotate(45deg);
              transform: rotate(135deg);
              position: absolute;
              bottom: 13px;
              left: 97px;
            }
          }
        }
      }
    }

    /* svg */
    .svg_wrap {
      margin: 0 auto;

      svg {
        margin: 0 auto;
        display: block;
        height: auto;
        overflow: visible;
        width: 100%;

        .cls-1 {
          fill: var(--main-color);
        }
      }
    }

    /* poin共通 */
    .reason_point_wrap {
      width: 1100px;
      margin: 0 auto;
      padding: 80px 0;

      .svg_wrap {
        width: 230px;
      }

      h2 {
        font-size: 45px;
        line-height: 55px;
        text-align: center;
        letter-spacing: 0.1em;
        color: var(--main-color);
        padding: 30px 0;
        border-top: 3px solid #f6f6f6;
        border-bottom: 3px solid #f6f6f6;
        margin: 15px 0 50px;
        position: relative;
      }

      p {
        font-size: 17px;
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 0.1em;
        color: #000;
        margin-bottom: 50px;

        span {
          background: linear-gradient(transparent 60%, #ffdbde 60%);
        }
      }

      .reason_flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
      }

      .reason_hs_img {
        margin-top: 50px;
        background: #f6f6f6;
        border-radius: 5px;
        padding: 40px 70px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
      }

      .reason_point_con {
        p {
          margin-bottom: 50px;
        }
      }

      &.reason_point02 {
        p {
          text-align: left;
          letter-spacing: 0.05em;
          margin: 0;
        }
      }

      &.reason_point04,
            &.reason_point05,
      &.reason_point06 {
        p {
          margin: 30px auto;
        }

        img {
          display: block;
          margin: 0 auto 50px;
        }
      }
    }

    /* btn */
    .btn_link {
      display: block;
      width: 80%;
      line-height: 60px;
      background-color: var(--btn-color);
      color: #fff;
      text-align: center;
      position: relative;
      margin: 0 auto 00px;
      border-radius: 5px;
      font-weight: bold;
      font-size: 18px;

      &:hover {
        opacity: .8;
      }
    }

    /* fadein（下から上） */
    .fadein {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;

      &.sale_show {
        opacity: 1;
        transform: translateY(0);
      }

      &.fadein-1 {
        transition-delay: 0.2s;
      }

      &.fadein-2 {
        transition-delay: 0.4s;
      }

      &.fadein-3 {
        transition-delay: 0.6s;
      }

      &.fadein-4 {
        transition-delay: 0.8s;
      }

      &.fadein-5 {
        transition-delay: 1.0s;
      }

      &.fadein-6 {
        transition-delay: 1.2s;
      }
    }
  }

  /*--- reasonここまで ---*/
}




/*-------------------------------
sp
--------------------------------*/


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

  /*--- reasonここから ---*/
  .sale_reason_wrap {

    /* メイン画像 */
    .sa_main {
      background: url(../img/main_bg.webp);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      padding: 0;

      .sa_main_inner {
        width: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 60px 0;
      }

      .sa_main_tit {
        font-size: clamp(22px, 6.5vw, 28px);
        line-height: 40px;
        font-weight: bold;
        text-align: center;
        margin: 0;
        color: #fff;
        border: none;
        padding: 0;

        >span {
          display: inline;
          font-size: clamp(15px, 4.7vw, 18px);
          font-weight: bold;
          line-height: 36px;
          color: #fff;
          border-bottom: 1px solid #fff;
        }
      }
    }

    /* menu */
    .reason_menu_wrap {
      width: 90%;
      margin: 60px auto;

      ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        li {
          width: 47%;
          margin-right: 2%;
          margin-bottom: 2%;

          a {
            display: block;
            background: #fff;
            border: 2px solid #ebe9e9;
            border-radius: 5px;
            font-size: clamp(12px, 3.5vw, 14px);
            font-weight: bold;
            line-height: 20px;
            letter-spacing: 0.01em;
            position: relative;
            text-align: center;
            box-sizing: border-box;
            padding: 10px 0 20px;

            .svg_wrap {
              width: 70px;
              padding-bottom: 7px;
            }

            span {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 32px;
              font-size: clamp(12px, 3.5vw, 14px);
              font-weight: bold;
              line-height: 17px;
              letter-spacing: 0.01em;
              text-align: center;
            }

            &::after {
              content: "";
              width: 8px;
              height: 8px;
              border-top: 1px solid var(--main-color);
              border-right: 1px solid var(--main-color);
              -webkit-transform: rotate(45deg);
              transform: rotate(135deg);
              position: absolute;
              bottom: 8px;
              left: 47%;
            }

            .icon_svg .cls-1 {
              fill: var(--main-color);
            }
          }
        }
      }
    }

    /* svg */
    .svg_wrap {
      margin: 0 auto;

      svg {
        margin: 0 auto;
        display: block;
        height: auto;
        overflow: visible;
        width: 100%;

        .cls-1 {
          fill: var(--main-color);
        }
      }
    }

    /* poin共通 */
    .reason_point_wrap {
      width: 90%;
      margin: 0 auto;
      padding: 60px 0;

      .reason_point_ttl_img {
        display: block;
        width: 180px;
        margin: 0 auto 0 !important;
      }

      img {
        display: block;
        max-width: 100%;
      }

      h2 {
        font-size: clamp(18px, 7vw, 20px);
        line-height: 1.5;
        text-align: center;
        letter-spacing: 0.1em;
        color: var(--main-color);
        padding: 15px 0;
        border-top: 3px solid #f6f6f6;
        border-bottom: 3px solid #f6f6f6;
        margin: 7px 0 30px;
        position: relative;
        font-weight: bold;
      }

      p {
        font-size: clamp(14px, 4.2vw, 16px);
        line-height: 30px;
        letter-spacing: 0.05em;
        text-align: left;
        color: #000;
        margin-bottom: 40px;

        span {
          background: linear-gradient(transparent 60%, #ffdbde 60%);
                  font-weight: 500;
        }
      }

      .reason_flex {
        img {
          margin: 0 auto 10px;
        }
      }

      .reason_hs_img {
        margin-top: 50px;
        background: #f6f6f6;
        border-radius: 5px;
        padding: 30px 8% 15px;

        img {
          display: inline-block;
          margin-bottom: 15px;
        }
      }

      .reason_point_con {
        margin: 40px auto;

        p {
          text-align: left;
        }
      }

      &.reason_point03 {
        p {
          text-align: left;
          letter-spacing: 0.05em;
          margin: 0;
        }
      }

      &.reason_point04,
      &.reason_point05,
      &.reason_point06 {
        p {
          margin: 0;
        }

        img {
          display: block;
          margin: 50px auto;
        }
      }
    }

    /* btn */
    .btn_link {
      display: block;
      width: 80%;
      line-height: 60px;
      background-color: var(--btn-color);
      color: #fff;
      text-align: center;
      position: relative;
      margin: 30px auto;
      border-radius: 5px;
      font-weight: bold;
      font-size: clamp(15px, 4.7vw, 18px);

      &:hover {
        opacity: .8;
      }
    }

    /* fadein（下から上） */
    .fadein {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;

      &.sale_show {
        opacity: 1;
        transform: translateY(0);
      }

      &.fadein-1 {
        transition-delay: 0.2s;
      }

      &.fadein-2 {
        transition-delay: 0.4s;
      }

      &.fadein-3 {
        transition-delay: 0.6s;
      }

      &.fadein-4 {
        transition-delay: 0.8s;
      }

      &.fadein-5 {
        transition-delay: 1.0s;
      }

      &.fadein-6 {
        transition-delay: 1.2s;
      }
    }
  }

  /*--- reasonここまで ---*/
}