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

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

/*==========================================
 LEAD
===========================================*/
.lead-block {
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(80px, 10vw, 100px); }
  @media screen and (max-width: 960px) {
    .lead-block {
      flex-direction: column; } }
  .lead-block .block-head {
    width: 50%;
    background: url("../img/purchase-flow/mainimg.jpg") no-repeat center right/cover; }
    @media screen and (max-width: 960px) {
      .lead-block .block-head {
        width: 100%;
        height: 60vw; } }
  .lead-block .block-body {
    width: 50%;
    padding: clamp(80px, 15vw, 150px) 0;
    background: linear-gradient(90deg, #fff, var(--brand-primary)); }
    @media screen and (max-width: 960px) {
      .lead-block .block-body {
        width: 100%;
        background: linear-gradient(180deg, #fff, var(--brand-primary)); } }
    .lead-block .block-body .wrapW {
      max-width: 550px; }

/*==========================================
 FLOW
===========================================*/
.sec-flow .flow-list .flow-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 0 clamp(60px, 10vw, 100px); }
  .sec-flow .flow-list .flow-item:not(:last-child)::before {
    z-index: -1;
    content: "";
    display: block;
    width: 5px;
    height: 100%;
    background: var(--brand-primary);
    position: absolute;
    top: 0px;
    left: clamp(27.5px, 6vw, 61.5px); }
  @media screen and (max-width: 767px) {
    .sec-flow .flow-list .flow-item {
      flex-direction: column; } }
  .sec-flow .flow-list .flow-item .item-head {
    width: 27%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media screen and (max-width: 767px) {
      .sec-flow .flow-list .flow-item .item-head {
        width: 100%;
        justify-content: flex-start; } }
  .sec-flow .flow-list .flow-item .item-body {
    width: 65%; }
    @media screen and (max-width: 767px) {
      .sec-flow .flow-list .flow-item .item-body {
        width: 100%;
        padding: 25px 0 0 calc(clamp(60px, 12vw, 126px) + 20px ); } }
  .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;
    background: #fff;
    border: 1px solid var(--text-primary);
    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; }
    .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-img {
    padding: 0 0 0 20px;
    width: fit-content; }
  .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.8vw, 1.8rem);
    margin-top: 1em; }
  .sec-flow .flow-list .flow-item .item-btn {
    margin-top: clamp(25px, 4vw, 40px);
    font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    letter-spacing: 0.1em; }
    .sec-flow .flow-list .flow-item .item-btn a {
      display: block;
      background: var(--brand-primary);
      color: #fff;
      max-width: 254px;
      text-align: center;
      padding: 0.5em 1em;
      border-radius: 100vmax; }
      @media (hover: hover) {
        .sec-flow .flow-list .flow-item .item-btn a:hover {
          background: var(--text-primary2); } }
  @media screen and (min-width: 768px) {
    .sec-flow .flow-list .flow-item.item06 .item-img {
      width: 40%;
      padding-right: 16%; } }
  .sec-flow .flow-list .flow-item.active .item-num {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff; }

/*==========================================
 BOTTOM
===========================================*/
.sec-bottomBlock {
  margin-top: clamp(80px, 10vw, 100px);
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center; }
  @media screen and (max-width: 960px) {
    .sec-bottomBlock {
      flex-direction: column; } }
  .sec-bottomBlock .block-head {
    width: 50%;
    background: url("../img/purchase-flow/img-bottom.jpg") no-repeat center/cover;
    height: min(60vw, 636px); }
    @media screen and (min-width: 961px) {
      .sec-bottomBlock .block-head {
        flex: 1;
        margin-right: calc(50% - 50vw);
        margin-left: 5%; } }
    @media screen and (max-width: 960px) {
      .sec-bottomBlock .block-head {
        width: 100vw;
        margin: 0 calc(50% - 50vw) 40px; } }
  .sec-bottomBlock .block-body {
    width: 45%; }
    @media screen and (max-width: 960px) {
      .sec-bottomBlock .block-body {
        width: 100%; } }

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