@charset "UTF-8";
/* ------------------------------
   concept.css
------------------------------ */
.page-ttl .ttl_inner{
    bottom: 25px;
}
.sec-ttl.heading-a{
    text-align: center;
    font-size: 4.4rem;
    margin-bottom: 10px;
}
.ttl_wrap .en-ttl{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .1em;
    color: #bc121a;
}

@media screen and (max-width: 767px) {
    .page-ttl .ttl_inner{
        bottom:-34px;
        padding: 10px 20px;
    }

    .sec-ttl.heading-a{
        font-size: 2.8rem;
        margin-bottom: 1rem;
    }
    .ttl_wrap .en-ttl{
        font-size: 1.1rem;
    }
}

/*sec01*/
.sec01{
    position: relative;
    padding: 57px 0 65px 0;
    box-sizing: border-box;
}
.sec01.inner{
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
}
.sec01 .sec-ttl{
    font-size: 3.5rem;
    color: #bc121a;
    margin-bottom: 15px;
}
.sec01 .lead,
.sec02 .lead{
    font-size: 2.4rem;
    line-height: calc(30 / 24);
    letter-spacing: -.01em;
    margin-bottom: 90px;
}
.sec01 .flex.-reverse{
    flex-direction: row-reverse;
}
.sec01 .box:not(:last-of-type) {
    padding-bottom: 60px;
    border-bottom: 1px solid #f5f5f5;
}
.sec01 .box+.box{ margin-top: 85px;}

.sec01 .box .txt{
    width: 52%;
    padding-right: 5%;
    box-sizing: border-box;
}
.sec01 .box.-reverse .txt{
    padding-right: 0;
    padding-left: 5%;
}

.sec01 .box .txt .box-ttl{
    font-size: 3.0rem;
    font-weight: 700;
    color: #bc121a;
    line-height: calc(40 / 30);
    letter-spacing: .05em;
    margin-bottom: 18px;
}
.sec01 .box .txt p{
    font-size: 1.8rem;
    line-height: calc(36 / 18);
    letter-spacing: .05em;
}
.sec01 .box .txt .btn_wrap{
    margin-top: 35px;
}
.sec01 .box .txt .btn{
    max-width: 312px;
    margin: 0 auto;
}
.sec01 .box .txt .btn_wrap .btn.arrow:after{ right: 15px;}

.sec01 .box .img{
    width: 48%;
    max-width: 527px;
}


@media screen and (max-width: 767px) {
    .sec01{
        padding: 18% 0 10% 0;
        display: block;
    }
    .sec01.inner{
        padding-left: 0;
        padding-right: 0;
    }
    .sec01 .sec-ttl{
        font-size: 2.6rem;
        margin-bottom: 3%;
    }
    .sec01 .lead,
    .sec02 .lead{
        font-size: 1.5rem;
        margin-bottom: 12%;
    }
    .sec01 .flex,
    .sec01 .flex.-reverse{
        flex-direction: column-reverse;
    }
    .sec01 .box:not(:last-of-type) {
        padding-bottom: 12%;
    }
    .sec01 .box+.box{ margin-top: 12%;}

    .sec01 .box .txt{
        width: 100%;
        padding-right: 0;
    }
    .sec01 .box.-reverse .txt{
        padding-left: 0;
    }

    .sec01 .box .txt .box-ttl{
        font-size: 2rem;
        margin-bottom: 2%;
    }
    .sec01 .box .txt p{
        font-size: 1.4rem;
    }
    .sec01 .box .txt .btn_wrap{
        margin-top: 8%;
    }
    .sec01 .box .txt .btn{
        width: 82%;
        max-width: inherit;
        margin: 0 auto;
    }

    .sec01 .box .img{
        width: 100%;
        max-width: 527px;
        margin: 0 auto 4% auto;
    }

}

/*sec02*/
.sec02{
    padding: 50px 0 260px 0;
    box-sizing: border-box;
}
.sec02 .ttl_wrap{ margin-bottom: 40px;}
.sec02 .lead{ margin-bottom: 40px;}

.flow_wrap{
    padding: 0 60px;
    box-sizing: border-box;
}
.flow_wrap .flow_list{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flow_wrap .flow_list:after{
    position: relative;
    display: block;
    content: '';
    width: 28%;
    max-width: 295px;
}
.flow_wrap .flow_list li{
    position: relative;
    width: 28%;
    max-width: 295px;
    margin-bottom: 45px;
    display: flex;
    flex-direction: column;
}
.flow_wrap .flow_list li:after{
    position: absolute;
    right: -60px;
    top: 96px;
    display: block;
    content: '';
    background: url("../img/support/arrow.png") no-repeat center center;
    background-size: 100% auto;
    width: 23px;
    height: 23px;
}
.flow_wrap .flow_list li:nth-of-type(3n):after{ display: none;}
.flow_wrap .flow_list li a{
	color: #3366cc;
}
.flow_wrap h3{
    order: 2;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: calc(24 / 18);
    color: #bc121a;
    margin-bottom: 14px;
}
.flow_wrap p{
    order: 3;
    font-size: 1.6rem;
    line-height: calc(24 / 16);
    letter-spacing: .01em;
    padding-right: 5px;
    box-sizing: border-box;
}
.flow_wrap .img{
    order: 1;
    margin-bottom: 15px;
}

.sec02 .btn_wrap{ margin-top: 70px;}
.sec02 .btn_wrap .btn{
    max-width: 366px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .sec02{
        padding: 10% 0 22% 0;
    }
    .sec02 .ttl_wrap{ margin-bottom: 4%;}
    .sec02 .lead{ margin-bottom: 12%;}

    .flow_wrap{
        padding: 0 0;
    }
    .flow_wrap .flow_list{
        display: block;
    }
    .flow_wrap .flow_list:after{
        display: none;
    }
    .flow_wrap .flow_list li{
        position: relative;
        width: 100%;
        max-width: inherit;
        margin-bottom: 0;
    }
    .flow_wrap .flow_list li+li{ margin-top: 22%;}
    .flow_wrap .flow_list li:after{
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: auto;
        bottom: -15%;
        transform: rotate(90deg);

        width: 23px;
        height: 23px;
    }
    .flow_wrap .flow_list li:nth-of-type(3n):after{ display: block;}
    .flow_wrap .flow_list li:last-of-type:after{ display: none;}

    .flow_wrap h3{
        font-size: 1.8rem;
        margin-bottom: 2%;
    }
    .flow_wrap p{
        font-size: 1.4rem;
        padding-right: 0;
    }
    .flow_wrap .img{
        max-width: 295px;
        margin: 0 auto 4% auto;
    }

    .sec02 .btn_wrap{ margin-top: 12%;}
    .sec02 .btn_wrap .btn{
        max-width: inherit;
        margin: 0 auto;
    }
}