@charset "UTF-8";
/* =====================================
	workstyle
===================================== */

.visual{
    width: 100%;
    height: 42.1875vw;
    background: url("../img/workstyle/visual01.jpg") center no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 6.533vw 9.33vw;
}

.visual h1{
    font-size: 13.0rem;
    color: #fff;
    line-height: 1;
}

.visual h1 small{
    font-size: 2.0rem;
    display: block;
    margin-top: -4px;
}

.numbers{
    width: 100%;
    background: #d5dde7;
    padding: 53px 40px 198px;
}

.numbers .wrap{
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

.numbers .wrap h2{
    width: 100%;
    font-size: 9.0rem;
    line-height: 1;
    color: #08476e;
    margin-bottom: 66px;
}

.numbers .wrap h2 small{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: 1px;
}

.numbers .wrap ul{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.numbers .wrap ul li{
    width: calc((100% - 30px) / 3);
    text-align: center;
    color: #fff;
}

.numbers .wrap ul li:nth-child(1){
    background: #08476e url("../img/workstyle/icon01.png") no-repeat center top 72px;
    padding: 238px 30px 37px;
}

.numbers .wrap ul li:nth-child(2){
    background: #08476e url("../img/workstyle/icon02.png") no-repeat center top 72px;
    padding: 224px 30px 37px;
}

.numbers .wrap ul li:nth-child(3){
    background: #08476e url("../img/workstyle/icon03.png") no-repeat center top 72px;
    padding: 224px 30px 37px;
}

.numbers .wrap ul li:nth-child(4){
    background: #08476e url("../img/workstyle/icon04.png") no-repeat center top 72px;
    padding: 224px 30px 37px;
}

.numbers .wrap ul li:nth-child(5){
    background: #08476e url("../img/workstyle/icon01.png") no-repeat center top 72px;
    padding: 224px 30px 37px;
}

.numbers .wrap ul li:nth-child(6){
    background: #08476e url("../img/workstyle/icon02.png") no-repeat center top 72px;
    padding: 238px 30px 37px;
}

.numbers .wrap ul li:nth-child(7){
    background: #08476e url("../img/workstyle/icon01.png") no-repeat center top 43px;
    padding: 204px 30px 26px;
}

.numbers .wrap ul li:nth-child(8){
    background: #08476e url("../img/workstyle/icon02.png") no-repeat center top 72px;
    padding: 224px 30px 37px;
}

.numbers .wrap ul li:nth-child(9){
    background: #08476e url("../img/workstyle/icon03.png") no-repeat center top 72px;
    padding: 224px 30px 37px;
}

.numbers .wrap ul li small{
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4722;
    display: block;
}

.numbers .wrap ul li span{
    font-size: 4.95rem;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-top: 6px;
}

.numbers .wrap ul li:nth-child(7) span{
    font-size: 2.5rem;
    line-height: 1.32;
}

.numbers .wrap ul li:nth-child(8) span{
    font-size: 2.5rem;
    line-height: 1.32;
}

.numbers .wrap ul li span small{
    font-size: 3.15rem;
    font-weight: 500;
    line-height: 1;
    display: inline;
}

.numbers .wrap ul li:nth-child(4) span small{
    font-size: 4.5rem;
}

.numbers .wrap ul li .note{
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: 11px;
}

.numbers .wrap p{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    font-size: 1.6rem;
    margin-top: .5em;
    text-align: right;
}

.flow{
    width: 100%;
    background: #f2f5f8;
    padding: 122px 40px 144px;
}

.flow .wrap{
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

.flow .wrap h2{
    width: 100%;
    font-size: 9.0rem;
    line-height: 1;
    color: #08476e;
    margin-bottom: 54px;
}

.flow .wrap h2 small{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: 1px;
}

.flow .wrap p{
    font-size: 1.6rem;
    line-height: 2.0875;
    padding: 0 50px;
    margin-bottom: 72px;
}

.flow .wrap img{
    margin: 0 50px;
}

.system{
    width: 100%;
    background: #08476e;
    padding: 78px 40px 144px;
}

.system .wrap{
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

.system .wrap h2{
    width: 100%;
    font-size: 9.0rem;
    line-height: 1;
    color: #fff;
    margin-bottom: 54px;
}

.system .wrap h2 small{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    display: block;
    margin-top: 13px;
}

.system .wrap p{
    font-size: 1.6rem;
    line-height: 2.0875;
    color: #fff;
    padding: 0 50px;
    margin-bottom: 72px;
}

.system .wrap ul{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    row-gap: 20px;
}

.system .wrap ul li{
    width: calc((100% - 22px) / 3);
    width: 366px;
    padding: 48px 30px 35px 90px;
    background-repeat: no-repeat;
    background-position: bottom right, top left;
    background-color: #d4dde7;
}

.system .wrap ul li:nth-child(1){
    background-image: url("../img/workstyle/bg01.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(2){
    background-image: url("../img/workstyle/bg02.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(3){
    background-image: url("../img/workstyle/bg03.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(4){
    background-image: url("../img/workstyle/bg04.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(5){
    background-image: url("../img/workstyle/bg05.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(6){
    background-image: url("../img/workstyle/bg06.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(7){
    background-image: url("../img/workstyle/bg07.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li:nth-child(8){
    background-image: url("../img/workstyle/bg08.png"), url("../img/workstyle/bg09.png");
}

.system .wrap ul li h3{
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1;
    color: #08476e;
    margin-bottom: 17px;
    letter-spacing: 0.15em;
}

.system .wrap ul li p{
    font-size: 1.6rem;
    line-height: 1.75;
    color: #000;
    padding: 0;
    margin-bottom: 0;
    letter-spacing: 0.1em;
}



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

.visual{
    height: 67.83854167vw;
    background: #96aac3 url("../img/bussiness/sp/visual01.jpg") center bottom no-repeat;
    background-size: 100% auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 1.3vw 5.2vw;
    margin-top: 15.625vw;
}

.visual h1{
    font-size: 16.927vw;
}

.visual h1 small{
    font-size: 3.2552vw;
    margin-top: -0.52vw;
}

.numbers{
    padding: 5.9895833vw 5.2vw 20.18229167vw;
}

.numbers .wrap h2{
    font-size: 11.71875vw;
    margin-bottom: 12.2395833vw;
}

.numbers .wrap h2 small{
    font-size: 3.25520833vw;
    margin-top: 2vw;
}

.numbers .wrap ul{
    gap: 1.953125vw;
}

.numbers .wrap ul li{
    width: calc((100% - 1.953125vw) / 2);
}

.numbers .wrap ul li:nth-child(1){
    background: #08476e url("../img/workstyle/icon01.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 28.90625vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(2){
    background: #08476e url("../img/workstyle/icon02.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 27.21354167vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(3){
    background: #08476e url("../img/workstyle/icon03.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 27.21354167vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(4){
    background: #08476e url("../img/workstyle/icon04.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 27.21354167vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(5){
    background: #08476e url("../img/workstyle/icon01.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 27.21354167vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(6){
    background: #08476e url("../img/workstyle/icon02.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 28.90625vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(7){
    background: #08476e url("../img/workstyle/icon01.png") no-repeat center top 5.33854vw;
    background-size: 18.61979167vw auto;
    padding: 24.86979167vw 0 3.125vw;
}

.numbers .wrap ul li:nth-child(8){
    background: #08476e url("../img/workstyle/icon02.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 27.21354167vw 0 4.6875vw;
}

.numbers .wrap ul li:nth-child(9){
    background: #08476e url("../img/workstyle/icon03.png") no-repeat center top 8.59375vw;
    background-size: 18.61979167vw auto;
    padding: 27.21354167vw 0 4.6875vw;
}

.numbers .wrap ul li small{
    font-size: 2.18229167vw;
}

.numbers .wrap ul li span{
    font-size: 6vw;
    margin-top: 1.171875vw;
}

.numbers .wrap ul li:nth-child(7) span{
    font-size: 3.03125vw;
}

.numbers .wrap ul li:nth-child(8) span{
    font-size: 3.03125vw;
}

.numbers .wrap ul li span small{
    font-size: 3.645833vw;
}

.numbers .wrap ul li:nth-child(4) span small{
    font-size: 5.455729167vw;
}

.numbers .wrap ul li .note{
    font-size: 1.819vw;
    margin-top: 1.3vw;
}

.numbers .wrap p{
    font-size: 3.3854167vw;
}

.flow{
    padding: 16.9270833vw 5.2vw 25.520833vw;
}

.flow .wrap h2{
    font-size: 11.71875vw;
    margin-bottom: 6.25vw;
}

.flow .wrap h2 small{
    font-size: 3.25520833vw;
    margin-top: 2vw;
}

.flow .wrap p{
    font-size: 3.3854167vw;
    padding: 0;
    margin-bottom: 9.5052vw;
}

.flow .wrap img{
    margin: 0;
}

.system{
    padding: 17.578125vw 5.2vw 25.520833vw;
}

.system .wrap h2{
    font-size: 11.71875vw;
    margin-bottom: 7.8125vw;
}

.system .wrap h2 small{
    font-size: 3.25520833vw;
    margin-top: 2vw;
}

.system .wrap p{
    font-size: 3.3854167vw;
    padding: 0;
    margin-bottom: 12.7604167vw;
}

.system .wrap ul{
    gap: 1.6927vw;
    row-gap: 2.34375vw;
}

.system .wrap ul li{
    width: 43.88020833vw;
    padding: 5.2vw 3.90625vw 3.125vw 10.4167vw;
}

.system .wrap ul li:nth-child(1){
    background-size: 22.126784vw, contain;
}

.system .wrap ul li:nth-child(2){
    background-size: 25.28775vw, contain;
}

.system .wrap ul li:nth-child(3){
    background-size: 25.28775vw, contain;
}

.system .wrap ul li:nth-child(4){
    background-size: 22.2483598vw, contain;
}

.system .wrap ul li:nth-child(5){
    background-size: 25.28775vw, contain;
}

.system .wrap ul li:nth-child(6){
    background-size: 25.166vw, contain;
}

.system .wrap ul li:nth-child(7){
    background-size: 22.2483598vw, contain;
}

.system .wrap ul li:nth-child(8){
    background-size: 25.28775vw, contain;
}

.system .wrap ul li h3{
    font-size: 3.2552vw;
    margin-bottom: 1.953125vw;
}

.system .wrap ul li p{
    font-size: 2.34375vw;
    line-height: 1.5;
}

}