@charset "shift_jis";

:root {
  /*
  --main-color: red;
  --btn-color: pink;
  --bg-blue-color: green;
*/
  --main-color: #333;
  --btn-color: #ff9c00;
  --bg-blue-color: #f5f5f5;
  --font_fami: "Shippori Mincho",
    serif;
  --font-we: 700;
  --font-we02: 600;
  --font-st: normal;
}

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

  /*--- leasebackここから ---*/
  .sale_leaseback_wrap {

    /* メイン画像 */
    .lb_main_wrap {
      background: url(../../../img/category/leaseback_bg.webp) no-repeat;
      box-sizing: border-box;
      padding: 80px 0 40px;
      background-size: cover;
    }

    .lb_main_inner {
      width: 1200px;
      margin: 0 auto;

      & h2 {
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 25px 0;

        & .tl_s {
          display: inline-block;
          border-bottom: 1px solid #d3c0b5;
          color: #FFF;
          font-weight: 600;
          letter-spacing: 0.05em;
          font-size: 34px;
          line-height: 60px;
          font-family: var(--font_fami);
          font-weight: var(--font-we);
          font-style: var(--font-st);
          margin: 0 auto;
        }

        & .tl_b {
          font-size: 48px;
          line-height: 63px;
          font-family: var(--font_fami);
          font-weight: var(--font-we);
          font-style: var(--font-st);
          display: inline-block;
          margin: 0 auto;
        }

      }
    }

    .cate_main_box {
      display: flex;
      justify-content: center;
      gap: 5px;
      align-items: center;
      margin-bottom: 20px;

      & li {
        padding: 5px 10px;
        background: #FFF;
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 0.05em;
        font-family: var(--font_fami);
        font-weight: var(--font-we);
        font-style: var(--font-st);
      }
    }

    .cate_main_box02 {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      gap: 17px;
    }

    /* リースバックで解決！ */
    .lb_st_wrap {
      width: 1180px;
      margin: 80px auto;
      text-align: center;

      h2 {
        font-size: 30px;
        line-height: 70px;
        font-family: var(--font_fami);
        font-weight: var(--font-we02);
        font-style: var(--font-st);

        b {
          display: block;
          font-size: 50px;
        }
      }

      p {
        font-size: 22px;
        line-height: 35px;
        text-align: center;
        margin: 40px 0;

        b {
          font-weight: bold;
          color: #df0707;
        }
      }
    }

    /* こんなお悩みの方におすすめ */
    .lb_nayami_wrap {
      background: var(--bg-blue-color);
      padding: 80px 0;

      .lb_nayami_inner {
        width: 1100px;
        margin: 0 auto;

        h2 {
          &::before {
            content: "";
            display: block;
            background: url(../img/n_ti_be.webp);
            width: 514px;
            height: 36px;
            margin: 0 auto 15px;
          }

          &::after {
            content: "";
            display: block;
            width: 70px;
            height: 5px;
            background-color: #333;
            margin: 30px auto 0;
          }
        }

        .lb_nayami_txt {
          background: #fff;
          padding: 40px 40px 0;
          margin-bottom: 20px;
          border-radius: 5px;

          h3 {
            font-size: 25px;
            line-height: 30px;
            font-weight: bold;
            color: #333;
            letter-spacing: 0.1em;
            padding-left: 50px;
            position: relative;
            margin: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;

            &::before {
              content: "";
              display: block;
              background: url(../img/ti_icon.webp);
              width: 38px;
              height: 57px;
              position: absolute;
              left: -4px;
              top: -18px;
            }
          }

          .lb_nayami_top {
            height: 110px;
            box-sizing: border-box;
          }

          .lb_nayami_bottom {
            height: 255px;
            box-sizing: border-box;
          }

          ul {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            padding: 20px 10px 25px;

            li {
              width: 50%;
              font-size: 16px;
              font-weight: bold;
              line-height: 30px;
              letter-spacing: 0.1em;
              color: #222;
              list-style: disc;

              b {
                color: #df0707;
              }
            }
          }
        }

        .lb_nayami_flex {
          display: flex;
          justify-content: space-between;

          .lb_nayami_txt {
            width: 540px;
            box-sizing: border-box;

            ul {
              display: block;

              li {
                width: auto;
              }
            }
          }
        }
      }
    }

    /* 6つのメリット */
    .lb_nayami_about {
      width: 1100px;
      margin: 80px auto 60px;

      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
          width: 340px;
          margin-bottom: 40px;

          h3 {
            font-size: 20px;
            font-weight: bold;
            color: #d3c0b5;
            letter-spacing: 0.05em;
            line-height: 30px;
            margin: 20px 0 10px;
          }

          p {
            font-size: 16px;
            font-weight: 500;
            line-height: 28px;
            color: #666;
            margin: 0;
          }
        }
      }
    }

    /* リースバックを活用した事例 */
    .lb_result_wrap {
      background-color: var(--bg-blue-color);
      padding: 110px 0 80px;

      ul {
        width: 1100px;
        margin: 0 auto;

        li {
          list-style-type: none;
          background-color: #fff;
          border: 3px solid #307fa9;
          border-radius: 5px;
          box-sizing: border-box;
          padding: 40px;
          margin-bottom: 30px;

          .lb_result_subti {
            display: flex;
            align-items: center;
            margin-bottom: 30px;

            .lb_result_tag {
              width: 200px;
              background-color: #307fa9;
              color: #fff;
              margin-right: 20px;
              font-size: 18px;
              text-align: center;
              font-weight: bold;
              line-height: 28px;
              padding: 6px 0;
            }

            h3 {
              font-size: 23px;
              color: #307fa9;
              font-weight: bold;
              margin: 0;
              letter-spacing: 0.1em;

              span {
                font-size: 18px;
              }
            }
          }

          .lb_result_con {
            display: flex;
            align-items: center;

            img {
              margin-right: 30px;
            }

            p {
              font-size: 16px;
              line-height: 28px;
              margin: 0;
              letter-spacing: 0.1em;
              width: 650px;
            }
          }
        }
      }
    }

    /* リバースモーゲージとの違い */
    .lb_diff_wrap {
      width: 1150px;
      margin: 110px auto;

      .lb_diff_inner {
        background: var(--bg-blue-color);
        padding: 50px 20px;
        margin-top: 60px;

        p {
          text-align: center;
          font-size: 19px;
          font-weight: 500;
          line-height: 30px;
          margin: 0 0 50px;

          b {
            color: #df0707;
            font-weight: bold;
          }
        }

        .lb_diff_img {
          width: 1000px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
        }
      }

      .lb_diff_con {
        width: 980px;
        margin: 80px auto;

        h3 {
          color: #000;
          font-size: 25px;
          line-height: 33px;
          letter-spacing: 0.05em;
          margin: 0 0 40px;
          padding-left: 15px;
          border-left: 5px solid #333;
        }

        .lb_diff_flex {
          display: flex;
          justify-content: space-between;

          .lb_diff_table {
            width: 510px;
            height: 530px;
            background: #fbe6e4;

            h4 {
              text-align: center;
              line-height: 60px;
              background: #b24138;
              color: #fff;
              font-size: 28px;
              margin: 0;
            }

            .lb_diff_md {
              padding: 30px;

              span {
                display: block;
                width: 145px;
                text-align: center;
                color: #000;
                font-size: 18px;
                font-weight: bold;
                line-height: 40px;
                letter-spacing: 0.02em;
                border-radius: 5px;
                margin-bottom: 10px;
                background: #fff;
              }

              ul {
                margin-bottom: 30px;

                li {
                  font-size: 18px;
                  font-weight: 500;
                  line-height: 30px;
                  letter-spacing: 0.02em;
                  list-style: disc;
                  margin-left: 20px;

                  b {
                    color: #e81100;
                  }
                }
              }
            }

            .lb_diff_merit {
              li {
                font-size: 23px !important;
                line-height: 42px !important;
                font-weight: bold !important;
              }
            }
          }

          .lb_diff_table_lm {
            width: 440px;
            background: #e9e9e9;

            h4 {
              background: #9b9a9a;
            }
          }
        }
      }
    }

    /* よくある質問 */
    #sa_qa {
      padding: 0;

      .lb_qa_wrap {
        padding: 110px 0 80px;
      }
    }

    /* title */
    h2 {
      font-size: 40px;
      line-height: 40px;
      font-weight: bold;
      text-align: center;
      color: #000;
      margin: 0 0 40px;
      display: block;
      font-family: var(--font_fami);
      font-weight: var(--font-we02);
      font-style: var(--font-st);

      &.sa_conts_tit_line::after {
        content: "";
        display: block;
        width: 70px;
        height: 5px;
        background-color: #333;
        margin: 30px auto 0;
      }
    }

    /* svg */
    svg {
      margin: 0 auto;
      display: block;

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

    /* 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;
      }
    }
  }

  /*--- leasebackここまで ---*/
}


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


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

  /*--- leasebackここから ---*/
  .sale_leaseback_wrap {

    /* メイン画像 */
    .lb_main_wrap {
      background: url(../../../img/category/leaseback_bg_sp.webp) no-repeat;
      box-sizing: border-box;
      padding: 80px 0 40px;
      background-size: cover;
    }

    .lb_main_inner {
      width: 90%;
      margin: 0 auto;

      & h2 {
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 25px 0;
        font-family: var(--font_fami);
        font-weight: var(--font-we02);
        font-style: var(--font-st);

        & .tl_s {
          display: inline-block;
          border-bottom: 1px solid #d3c0b5;
          color: #FFF;
          font-weight: 600;
          letter-spacing: 0.05em;
          font-size: clamp(15px, 4vw, 17px);
          line-height: 28px;
          font-family: var(--font_fami);
          font-weight: var(--font-we);
          font-style: var(--font-st);
          margin: 0 auto;
        }

        & .tl_b {
          font-size: clamp(24px, 6.4vw, 26px);
          line-height: 40px;
          font-family: var(--font_fami);
          font-weight: var(--font-we);
          font-style: var(--font-st);
          display: inline-block;
          margin: 0 auto;
        }

      }
    }

    .cate_main_box {
      display: flex;
      justify-content: center;
      gap: 5px;
      align-items: center;
      margin-bottom: 10px;

      & li {
        padding: 5px 10px;
        background: #FFF;
        font-size: 11px;
        line-height: 16px;
        letter-spacing: 0.05em;
        font-family: var(--font_fami);
        font-weight: var(--font-we);
        font-style: var(--font-st);
      }
    }

    .cate_main_box02 {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      gap: 10px;
    }

    /* リースバックで解決！ */
    .lb_st_wrap {
      width: 90%;
      margin: 60px auto;
      text-align: center;

      h2 {
        font-size: clamp(18px, 5.3vw, 20px);
        line-height: 50px;
        font-family: var(--font_fami);
        font-weight: var(--font-we02);
        font-style: var(--font-st);

        b {
          display: block;
          font-size: clamp(28px, 8vw, 30px)
        }
      }

      p {
        font-size: clamp(15px, 4.7vw, 18px);
        line-height: 30px;
        text-align: left;
        margin: 40px 0;

        b {
          font-weight: bold;
          color: #df0707;
        }
      }

      img {
        width: 80%;
      }
    }

    /* こんなお悩みの方におすすめ */
    .lb_nayami_wrap {
      background: var(--bg-blue-color);
      padding: 40px 0;

      .lb_nayami_inner {
        width: 90%;
        margin: 0 auto;

        h2 {
          font-family: var(--font_fami);
          font-weight: var(--font-we02);
          font-style: var(--font-st);

          &::before {
            content: "";
            display: block;
            background: url(../img/n_ti_be.webp);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 20px;
            margin: 0 auto 10px;
          }
        }

        .lb_nayami_txt {
          background: #fff;
          padding: 20px 5% 0;
          margin-bottom: 15px;

          h3 {
            font-size: clamp(19px, 5.4vw, 22px);
            line-height: 30px;
            font-weight: bold;
            color: #333;
            letter-spacing: 0.1em;
            padding-left: 40px;
            position: relative;
            margin: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;

            &::before {
              content: "";
              display: block;
              background: url(../img/ti_icon.webp);
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 28px;
              height: 42px;
              position: absolute;
              left: 0px;
              top: -9px;
            }
          }

          ul {
            padding: 20px 15px 25px;

            li {
              font-size: clamp(14px, 4.2vw, 16px);
              font-weight: bold;
              line-height: 30px;
              color: #222;
              list-style: disc;
              margin-left: 10px;

              b {
                color: #df0707;
              }
            }
          }
        }

        .lb_nayami_flex {
          .lb_nayami_txt {
            background: #fff;
            padding: 20px 5% 0;
            margin-bottom: 15px;

            ul {
              display: block;

              li {
                width: auto;
              }
            }
          }
        }
      }
    }

    /* 6つのメリット */
    .lb_nayami_about {
      width: 90%;
      margin: 40px auto;

      ul {
        li {
          width: 340px;
          margin: 0 auto 40px;

          h3 {
            font-size: clamp(18px, 5.3vw, 20px);
            font-weight: bold;
            color: #df0707;
            letter-spacing: 0.05em;
            line-height: 30px;
            margin: 20px 0 10px;
          }

          p {
            font-size: clamp(14px, 4.2vw, 16px);
            font-weight: 500;
            line-height: 28px;
            color: #666;
            margin: 0;
          }
        }
      }
    }

    /* リースバックを活用した事例 */
    .lb_result_wrap {
      background-color: var(--bg-blue-color);
      padding: 40px 0;

      ul {
        width: 90%;
        margin: 0 auto;

        li {
          list-style-type: none;
          background-color: #fff;
          border: 3px solid #307fa9;
          border-radius: 5px;
          box-sizing: border-box;
          padding: 30px 5%;
          margin-bottom: 30px;

          .lb_result_subti {
            margin-bottom: 20px;

            .lb_result_tag {
              width: 200px;
              background-color: #307fa9;
              color: #fff;
              margin: 0 auto 10px;
              font-size: clamp(15px, 4.7vw, 18px);
              text-align: center;
              font-weight: bold;
              line-height: 28px;
              padding: 6px 0;
            }

            h3 {
              font-size: clamp(20px, 5.6vw, 23px);
              color: #307fa9;
              font-weight: bold;
              margin: 0;
              letter-spacing: 0.1em;
              line-height: normal;

              span {
                font-size: clamp(15px, 4.7vw, 18px);
              }
            }
          }

          .lb_result_con {
            img {
              display: block;
              margin: 0 auto 20px;
            }

            p {
              font-size: clamp(14px, 4.2vw, 16px);
              line-height: 28px;
              margin: 0;
              letter-spacing: 0.1em;
            }
          }
        }
      }
    }

    /* リバースモーゲージとの違い */
    .lb_diff_wrap {
      width: 90%;
      margin: 60px auto;

      .lb_diff_inner {
        background: var(--bg-blue-color);
        padding: 30px 5%;

        p {
          text-align: left;
          font-size: clamp(14px, 4.2vw, 16px);
          font-weight: 500;
          line-height: 30px;
          margin: 0 0 30px;

          b {
            color: #df0707;
            font-weight: bold;
          }
        }

        .lb_diff_img {
          img {
            width: 100%;
            margin-top: 20px;
          }
        }
      }

      .lb_diff_con {
        margin: 60px auto;

        h3 {
          color: #000;
          font-size: clamp(18px, 5.3vw, 20px);
          line-height: 33px;
          letter-spacing: 0.05em;
          margin: 0 0 40px;
          padding-left: 15px;
          border-left: 5px solid #333;
        }

        .lb_diff_flex {
          .lb_diff_table {
            background: #fbe6e4;
            margin-bottom: 20px;

            h4 {
              text-align: center;
              line-height: 55px;
              background: #b24138;
              color: #fff;
              font-size: clamp(18px, 5.3vw, 20px);
              margin: 0;
            }

            .lb_diff_md {
              padding: 30px 5%;

              span {
                display: block;
                width: 120px;
                text-align: center;
                color: #000;
                font-size: clamp(13px, 3.8vw, 15px);
                font-weight: bold;
                line-height: 40px;
                letter-spacing: 0.02em;
                border-radius: 5px;
                margin-bottom: 10px;
                background: #fff;
              }

              ul {
                &:nth-child(2) {
                  margin-bottom: 30px;
                }

                li {
                  font-size: clamp(14px, 4.2vw, 16px);
                  font-weight: 500;
                  line-height: 30px;
                  letter-spacing: 0.02em;
                  list-style: disc;
                  margin-left: 20px;

                  b {
                    color: #e81100;
                  }
                }
              }
            }

            .lb_diff_merit {
              li {
                font-weight: bold !important;
              }
            }
          }

          .lb_diff_table_lm {
            background: #e9e9e9;

            h4 {
              background: #9b9a9a;
            }
          }
        }
      }
    }

    /* よくある質問 */
    #sa_qa {
      padding: 0;

      .lb_qa_wrap {
        padding: 110px 0 80px;
      }
    }

    /* CV */
    #sa_inq {
      .sa_inq_txt {
        width: 96%;
        margin: 0 auto;
        letter-spacing: normal !important;
        font-size: clamp(13px, 3.8vw, 15px);
        font-weight: normal;
      }

      h2 {
        margin: 10px auto 30px;
        line-height: 1.3;
        font-size: clamp(18px, 5.3vw, 20px);
        font-family: var(--font_fami);
        font-weight: var(--font-we02);
        font-style: var(--font-st);
      }
    }

    /* title */
    h2 {
      font-size: clamp(14px, 6vw, 24px);
      line-height: 1.8;
      font-weight: bold;
      text-align: center;
      color: #000;
      margin: 0 0 30px;
      font-family: var(--font_fami);
      font-weight: var(--font-we02);
      font-style: var(--font-st);

      &.sa_conts_tit_line::after {
        content: "";
        display: block;
        width: 70px;
        height: 5px;
        background-color: #333;
        margin: 20px auto 0;
      }
    }

    /* svg */
    svg {
      margin: 0 auto;
      display: block;

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

    /* 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: 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;
      }
    }
  }

  /*--- leasebackここまで ---*/
}