.guide_bro_wrap {
    margin-top: 53px;
}
.process_box_wrap.guide_page01 .process_box figure img {
    object-fit: cover;
}

.guide_header_wrap {
    background: #1A1A1A 0% 0% no-repeat padding-box;
}

.guide_header_inner {
    background: url(/user/img/renewal/guide/guide_top_img_bg.png)no-repeat padding-box;
    min-height: 334px;
    background-size: cover;
    max-width: 1200px;
    padding: 0 40px;
    margin: 0 auto;
}

.guide_header_title {
    padding: 80px 0 15px 0;
    text-align: center;
    font: normal normal bold 34px/62px Raleway;
    color: #FFFFFF;
}
.guide_header_title_desc {
    text-align: center;
    line-height: 1.5;
    color: #fff;
    font-weight: 200;
}

.guide_title_wrap {
    text-align: center;
    font: normal normal bold 26px/37px Noto Sans JP;
}

.guide_title_wrap.guide_page01 {
    padding: 27px 0;
    color: #fff;
}

.guide_title_wrap.guide_page02 {
    padding: 60px 0 15px 0;
    }

.guide_title_wrap.guide_page03 {
    padding: 70px 0 15px 0;
    position: relative;
    z-index: 1;
    }

.guide_title_wrap.guide_page04 {
    padding: 70px 0 15px 0;
    position: relative;
    z-index: 1;
    }

.guide_page.guide_page01 {
    color: #ffffff;
    padding-bottom: 10px;
}

.guide_page.guide_page02 {
    background: #FCDEBC;
    position: relative;
}

.guide_page.guide_page03 {
    position: relative;
}

.guide_page.guide_page03 {
    position: relative;
}

.guide_page.guide_page03::before{
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    transform: skewY(10deg);
    transform-origin: bottom left;
    width: 100%;
    height: 100%;
    background: #fff;
}

.guide_page.guide_page03::after{
    content: '';
    position: absolute;
    left: 0;
    top: -40px;
    transform: skewY(-10deg);
    transform-origin: bottom left;
    width: 100%;
    height: 100%;
    background: #fff;
}

.guide_page.guide_page04 {
    background: #FCDED4;
}

.process_box_wrap.guide_page01 {
    padding: 40px;
    display: flex;
    justify-content: center;
}

.process_box_wrap.guide_page01 .process_box {
    z-index: 1;
    width: 33.333%;
}

process_box_wrap guide_page02 {
    padding: 40px;
}

.process_box_wrap.guide_page02.first-content {
    padding-bottom: 0;
}

.process_box_wrap.guide_page02 .first-line {
    display: flex;
    justify-content: center;
}

.process_box_wrap.guide_page02 .process_box_wrap {
    display: block;
}


.process_box_wrap.guide_page04{
    padding: 40px 40px 100px 40px;
    display: flex;
    justify-content: center;
}

.process_box.p-x {
    padding: 0 15px;
}

.process_box_img_area {
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

    .process_img_pc .non_arrow{
        display: none;
    }
    .process_img_pc .with_arrow{
        display: inline-block;
    }

.process_box_img_area .process_img_mobile {
    display: none;
}

.process_box_img_area.guide_page04, .process_box_img_area.guide_page03{
    width: 45%;
    z-index: 1;
}

.process_box.p-l {
    padding-left: 20px;
}

.process_text_area {
    padding: 0 20px;
}

.process_text_area.guide_page03, .process_text_area.guide_page04 {
    width: 42%;
}

.process_text_area .process_text_wrap {
    display: flex;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

    .process_box_wrap.guide_page02 .process_text_area .process_text_wrap {
        justify-content:center;
    }

.process_text {
    font: normal normal normal 18px/28px Noto Sans JP;
}

.process_text_text {
   margin-bottom: 10px;
}

.process_num {
position: relative;
margin-right: 5px;
}

.process_num_number {
    font: normal normal normal 21px/21px Gotu;
    position: absolute;
    color: #ffffff;
    top: 10px;
    left: 10px;
}



.process_text_annotation {
    font: normal normal normal 16px/24px Noto Sans JP;
}

.process_text_2-3_annotation_pc {
    padding-bottom: 40px;
    margin-left: 33%;
    margin-top: -60px;
    padding: 0 40px 40px;
    color: #F59121;
    font: normal normal normal 16px/24px Noto Sans JP;
}

.process_text_2-3_annotation_mobile {
    display: none;
    color: #F59121;
    font: normal normal normal 16px/24px Noto Sans JP;
}


.process_box.box-small {
    small:1;
}

.process_box.box-flex {
    display:flex;
    align-items: center;
    justify-content:center;
}

.border-box {
  display: flex;
}

.process_box_wrap.guide_page01 .process_box {
    width: 100%;
}

.border-box-left,.border-box-right {
    position: relative;
    overflow: hidden;
    width: 50%;
    background-color:#1A1A1A;
}

.border-box-left{
      padding-bottom: calc(10vw + 10px);
}
.border-box-right{
      padding-bottom: calc(10vw + 10px);
}

.border-box-left::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform: skewY(8deg);
    transform-origin: bottom left;
    width: 100%;
    height: 100%;
    background: #FCDEBC;
    border-top: 8px solid #F05A2B;
}

.border-box-right::after {
    content: '';
    position: absolute;
    right: 0;
    transform: skewY(-8deg);
    transform-origin: top right;
    border-top: 8px solid #F05A2B;
    width: 100%;
    height: 100%;
    background: #FCDEBC;
}

@media (max-width: 1280px) {
    .process_box_wrap {
    display:block
    padding: 20px;
    }

    .process_box_wrap.guide_page01 {
        display: block;
    }

      .process_box_wrap.guide_page01 .process_text_area {
          width: calc(50% - 20px);
      }

    .process_box {
        margin-bottom:  40px;
    }

    .process_box.p-x {
        padding: 0 ;
    }
    .process_text_area .process_text_wrap {
        margin-bottom: 20px;
    }

    .process_box_wrap.guide_page03 .process_text_area .process_text_wrap {
        justify-content:center;
    }
    .process_box_wrap.guide_page04.process_text_area .process_text_wrap {
        justify-content:center;
    }

    .process_text {
    position:static;
    z-index:1;
    }
    .process_box_wrap.guide_page01 .process_box {
        z-index: 1;
        display: flex;
        justify-content: space-between;
      }

    .process_box_wrap.guide_page02 .process_box {
        display: block;
      }

    .process_text_area {
     margin: auto 0;
     padding: 0;
    }

.process_box_wrap.guide_page02 .first-line {
    display: block;
}
.process_box_wrap.guide_page02  .process_box.p-l {
    padding-left: 0;
}


.process_box_img_area.guide_page04, .process_box_img_area.guide_page03 {
    width: 100%;
    position: relative;
    z-index: 1;
}

.process_box_wrap.guide_page01 .process_box_img_area {
    width: calc(50% - 20px);
}

.process_box_img_area figure {
    text-align:center;
}


.process_text_area.guide_page03, .process_text_area.guide_page04 {
    width: 100%;
    position: relative;
    z-index: 1;

}

.process_box.box-flex {
    display: block;
    width: 100%;
}

.guide_title_wrap guide_page04 {
    position: relative;
}

.process_img_pc .non_arrow{
        display: inline-block;
}

.process_img_pc .with_arrow{
        display: none;
}


.process_text_2-3_annotation_pc {
        display: none;
     }

.process_text_2-3_annotation_mobile {
        display: block;
}
}

@media (max-width: 835px) {
    .process_box_wrap {
    padding: 20px;
    display: block;
    justify-content: center;
}
.process_box_wrap.guide_page01 {
    padding: 20px;
}
.process_box_wrap.guide_page04 {
    padding: 40px 20px 100px 20px;
    display: block;
}
    .process_box_wrap.guide_page01 .process_box{
    display: block;

    }
    .process_box_wrap.guide_page01 .process_box_img_area {
        width: 100%;
        margin-bottom: 30px;
    }
    .process_box_wrap.guide_page01 .process_text_area {
        width: 100%;
    }
    .process_box_wrap.guide_page01 .process_text_area .process_text_wrap {
        justify-content: center;
    }
    .process_box_img_area {
        margin-bottom: 30px;
    }
    .process_box {
        margin-bottom: 40px;
    }
 }

@media (max-width: 768px) {
    .process_box_img_area .process_img_mobile {
        display: block;
    }
        .process_img_pc {
          display:none;
        }
        .process_img_pc .non_arrow{
          display: none;
        }
        .guide_process7_mobile {
        width: 335px;
        height: 415px;
        }
}


@media (max-width: 560px) {
    .guide_header_inner {
    min-height: auto;
    padding: 0 20px;
    }
    .guide_title_wrap.guide_page01 {
        padding: 27px 0 20px 0;
        font: normal normal bold 20px/29px Noto Sans JP;
    }
    .guide_title_wrap.guide_page02 {
        padding: 20px 0 15px 0;
        font-size: 18px;
    }
    .guide_title_wrap.guide_page03 {
        padding: 20px 0 15px 0;
        font-size: 18px;
    }
    .guide_title_wrap.guide_page04 {
        padding: 20px 0 15px 0;
        font-size: 18px;
    }
    .guide_header_title {
        padding: 40px 0 15px 0;
        font: normal normal 800 32px/46px Raleway;
    }
    .process_text {
        font: normal normal normal 16px/28px Noto Sans JP;
     }
     .process_text_annotation {
        font: normal normal normal 14px/24px Noto Sans JP;
     }

    .process_box_wrap.guide_page01 {
    padding: 0 20px
    }

    .process_box_wrap.guide_page01 .process_box_img_area {
        width: 100%;
    }
    .process_box_wrap.guide_page01 .process_text_area {
        width: 100%;
    }
    .process_box_wrap.guide_page04 {
        padding: 40px 20px 40px 20px;
    }

    @media (max-width: 374px) {
    .process_img_mobile img,.guide_process7_mobile  {
        width: 100%;
        height: auto;
    }
}

 }