@charset "UTF-8";

.common_fv {
  background-image: url(../img/sales/jg_registration/main_image.jpg);
}
@media screen and (min-width: 770px) {
  #jg_registration_conts {
    .auto {
      width: 1100px;
    }
    .overview_conts {
      .block {
        width: 618px;
        margin: 0 auto 210px 0;
        position: relative;
      }
      .block .text {
        line-height: 2.03;
        margin-bottom: 18px;
        width: 560px;
      }
      .block .text:last-of-type {
        margin-bottom: 0;
      }
      .block .img {
        position: absolute;
        width: 677px;
        top: 1px;
        right: -682px;
      }
      .block .block_title {
        width: 560px;
        font-size: 36px;
        padding-top: 40px;
        margin-bottom: 20px;
        line-height: 1.64;
      }

    }
    /* overview_conts */


    .flow_conts {
      padding: 90px 0 15px;
      background-color: #fcfaf8;


      .flow_title {
        text-align: center;
        font-size: 36px;
        line-height: 1.5;
        margin-bottom: 78px;
        font-weight: normal;
      }

      .flow_item {
        padding: 40px 0 32px 50px;
        border-bottom: 1px solid color-mix(in srgb, var(--color-thema), transparent 60%);
        position: relative;
        min-height: 178px;
        margin-bottom: 42px;
      }

      .flow_item:last-child {
        border-bottom: none;
      }

      .flow_step_box {
        width: 80px;
        color: var(--color-thema);
        position: absolute;
        top: 48px;
      }

      .step_label {
        display: block;
        font-size: 25px;
        font-weight: 400;
        letter-spacing: 0.1em;
        transform: translateX(7px);
      }
      .step_label.step_01 {
        transform: translateX(4px);
      }

      .step_num {
        display: block;
        font-size: 60px;
        line-height: 1;
      }
      .step_title {
        /* color: var(--color-thema); */
        font-size: 27px;
        /* line-height: 1.5; */
        margin-bottom: 8px;
        padding: 0 0 0 147px;
      }
      .step_desc {
        display: inline-block;
        width: 462px;
        line-height: 1.6;
        letter-spacing: .09rem;
        padding: 0 0 0 147px;
      }
      .flow_img_box {
        width: 350px;
        position: absolute;
        top: calc(50% - 21px);
        right: 0;
        transform: translateY(-50%);
      }
      .flow_img_box img {
        width: 100%;
        height: auto;
        display: block;
      }

    }
    /* flow_conts */

    .service_conts {
      padding: 94px 0 125px;

      .service_title {
        text-align: center;
        font-size: 36px;
        line-height: 1.5;
        margin-bottom: 14px;
      }

      .service_lead {
        text-align: center;
        margin-bottom: 38px;
      }

      .service_leadp {
        margin: 0;
      }

      .service_box {
        border: 1px solid color-mix(in srgb, var(--color-thema), transparent 60%);
        padding: 23px 20px;
      }

      .service_list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .service_item {
        width: 33.3%;
        text-align: center;
        color: var(--color-thema);
        margin-bottom: 14px;
        box-sizing: border-box;
      }


      .service_item:nth-last-child(-n+3) {
        margin-bottom: 0;
      }

    }
    /* service_conts */
  }
  /* #jg_registration_conts*/
}

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

  #jg_registration_conts {

    .overview_conts {
      .block {
        width: 100%;
        margin: 0 auto 60px 0;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .block .text {
        line-height: 2.03;
        margin-bottom: 18px;
      }
      .block .text:last-of-type {
        margin-bottom: 0;
        order: 3;
      }
      .block .img {
        width: 100%;
        order: 2;
        margin-bottom: 15px;
      }
      .block .block_title {
        font-size: 24px;
        text-align: center;
        line-height: 1.7;
        margin-bottom: 22px;
        order: 1;
      }

    }
    /* overview_conts */


    .flow_conts {
      padding: 60px 0 15px;
      background-color: #fcfaf8;





      .flow_title {
        font-size: 24px;
        text-align: center;
        line-height: 1.7;
        margin-bottom: 40px;
      }

      .flow_item {
        padding: 0 0 50px;
        border-bottom: 1px solid color-mix(in srgb, var(--color-thema), transparent 60%);
        margin-bottom: 42px;
        display: flex;
        flex-direction: column;
      }

      .flow_item:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .flow_step_box {
        width: 100%;
        color: var(--color-thema);
        order: 1;
        text-align: center;
        margin-bottom: 10px;
      }

      .step_label {
        display: block;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.1em;
      }
      .step_label.step_01 {
        transform: translateX(2px);
      }

      .step_num {
        display: block;
        font-size: 45px;
        line-height: 1;
      }
      .step_title {
        font-size: 22px;
        margin: 0px auto 14px;
        order: 2;
      }
      .step_desc {
        display: inline-block;
        width: 100%;
        line-height: 1.6;
        letter-spacing: .09rem;
        order: 4;
      }
      .flow_img_box {
        width: 100%;
        order: 3;
        margin-bottom: 15px;
      }
      .flow_img_box img {
        width: 100%;
        height: auto;
        display: block;
      }

    }
    /* flow_conts */

    .service_conts {
      padding: 65px 0 80px;

      .service_title {
        font-size: 24px;
        text-align: center;
        line-height: 1.7;
        margin-bottom: 40px;
      }

      .service_lead {
        text-align: center;
        margin-bottom: 38px;
      }
      .text {
        text-align: left;
      }

      .service_leadp {
        margin: 0;
      }

      .service_box {
        border: 1px solid color-mix(in srgb, var(--color-thema), transparent 60%);
        padding: 23px 6% 23px 11%;
        max-width: 300px;
        margin: 0 auto;
      }

      .service_list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .service_item {
        width: 100%;
        font-size: 15px;
        text-align: center;
        color: var(--color-thema);
        margin-bottom: 10px;
        box-sizing: border-box;
        text-align: left;
        list-style: disc;
        padding: 0 0 0 1%;
      }


      .service_item:last-of-type {
        margin-bottom: 0;
      }

    }
    /* service_conts */
  }
  /* #jg_registration_conts*/

}