@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
/*==========================================
変数 fonts.scss
===========================================*/
/*===================================
userSS 追加
=====================================*/
.SFblock-ttl {
  font-size: clamp(2rem, 2.6vw, 3rem);
  letter-spacing: 0.08em;
  margin-bottom: 1em; }

.SFblock-txt {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  letter-spacing: 0.08em;
  line-height: 2; }
  @media screen and (max-width: 767px) {
    .SFblock-txt {
      line-height: 1.75; } }

/*==========================================
 LEAD
===========================================*/
.lead-block {
  background: url("../img/sale/flow/mainimg.jpg") no-repeat center bottom/cover;
  padding: clamp(60px, 10vw, 100px) 0; }
  .lead-block .block-inner {
    background: rgba(255, 255, 255, 0.6);
    width: 48%;
    max-width: 704px;
    padding: clamp(40px, 10vw, 100px) min(4%, 100px); }
    @media screen and (max-width: 960px) {
      .lead-block .block-inner {
        width: 100%;
        background: rgba(255, 255, 255, 0.8); } }

/*==========================================
 FLOW
===========================================*/
.sec-flow {
  margin-top: clamp(60px, 10vw, 100px); }
  .sec-flow .flow-list .flow-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(40px, 5vw, 50px) min(4%, 100px); }
    @media screen and (max-width: 960px) {
      .sec-flow .flow-list .flow-item {
        flex-direction: column;
        align-items: flex-start; } }
    .sec-flow .flow-list .flow-item .item-head {
      width: 22%;
      max-width: 365px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      @media screen and (max-width: 1360px) {
        .sec-flow .flow-list .flow-item .item-head {
          width: 30%; } }
      @media screen and (max-width: 960px) {
        .sec-flow .flow-list .flow-item .item-head {
          width: 100%;
          justify-content: flex-start; } }
    .sec-flow .flow-list .flow-item .item-body {
      width: 75%; }
      @media screen and (max-width: 1360px) {
        .sec-flow .flow-list .flow-item .item-body {
          width: 67%; } }
      @media screen and (max-width: 960px) {
        .sec-flow .flow-list .flow-item .item-body {
          width: 100%;
          padding: 25px 0 0; } }
    .sec-flow .flow-list .flow-item .item-num {
      width: clamp(60px, 12vw, 126px);
      min-width: clamp(60px, 12vw, 126px);
      text-align: center;
      aspect-ratio: 1/1;
      border-radius: 100vmax;
      color: var(--text-primary);
      font-size: clamp(1.4rem, 2vw, 2.4rem);
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      transition: 0.3s ease-in-out;
      margin-right: 20px; }
      .sec-flow .flow-list .flow-item .item-num .txt .num {
        display: block;
        font-size: clamp(2rem, 3.3vw, 3.8rem); }
    .sec-flow .flow-list .flow-item .item-ttl {
      font-size: clamp(1.8rem, 2vw, 2.4rem);
      font-weight: 500; }
    .sec-flow .flow-list .flow-item .item-txt {
      font-size: clamp(1.4rem, 1.6vw, 1.6rem);
      margin-top: 1em; }
    .sec-flow .flow-list .flow-item:nth-of-type(2n+1) {
      background: var(--brand-primary);
      color: #fff; }
      .sec-flow .flow-list .flow-item:nth-of-type(2n+1) .item-num {
        background: #fff;
        color: var(--brand-primary); }
    .sec-flow .flow-list .flow-item:nth-of-type(2n) {
      color: var(--brand-primary); }
      .sec-flow .flow-list .flow-item:nth-of-type(2n) .item-num {
        background: var(--brand-primary);
        color: #fff; }

/*==========================================
 CONTACT
===========================================*/
.sec-contact {
  margin-top: clamp(40px, 10vw, 100px); }
  .sec-contact::before {
    content: "";
    display: block;
    background: var(--brand-primary);
    width: clamp(40px, 7vw, 70px);
    aspect-ratio: 72/35;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    margin: 0 auto clamp(30px, 6vw, 60px); }
  .sec-contact .sale-typeBlock {
    margin-top: clamp(40px, 8vw, 80px); }
  .sec-contact .bottom-lead {
    margin-top: clamp(25px, 6vw, 60px);
    padding: 1em 0;
    background: var(--brand-primary);
    color: #fff; }
    .sec-contact .bottom-lead .SFblock-ttl {
      margin-bottom: 0; }

/*# sourceMappingURL=sale-flow.css.map */