.jumbotron {
    /* height: 750px; */
}

.page-top main {
    padding-top: 0;
}



.catch-slider img {
    width: auto;
}

.swiper.catch-slider {
    margin-top: 186px;
}

.jumbotron.jumbotron-common {
    position: relative;
}






.bg-common.vertical {
    background-color: #f6f9ff;
}


@media screen and (min-width: 768px) and (max-width: 991px) {
    .set {
        display: flex;
        justify-content: space-between;
    }

    .bg-common.product .img-text {
        text-align: left;
        margin-top: 35px;
        margin-left: -84px;
        position: relative;
        z-index: 9;
    }

    .bg-common.vertical .container-fluid {
        margin-top: 25px;
    }

    .catch-text {
        position: absolute;
        z-index: 9;
        top: 400px;
        left: 36px;
        width: 42%;
    }

    .bg-common.vertical .metabox {
        writing-mode: vertical-rl;
        text-orientation: upright;
        margin: auto;
        line-height: 40px;
        color: #14307e;
        font-weight: 400;
        font-size: 18px;
    }
}


.catch-text-right {
    position: absolute;
    z-index: 0;
    top: 180px;
    right: 118px;
}

.catch-text {
    position: absolute;
    z-index: 9;
    top: 400px;
    left: 36px;
}


@media screen and (min-width: 768px) {
    .bg-common.product .row-base.mirror .item:nth-child(2) {
        padding-left: 0;
    }

    .bg-common.flow .row-flow .item:nth-child(2) {
        padding-right: 0;
    }

    .bg-common.flow h2 .ttl-jpn,
    .bg-common.product h2 .ttl-jpn,
    .bg-common.service h2 .ttl-jpn {
        writing-mode: tb-rl;
        color: #14307e;

    }

    /* .swiper.swiper-slider {
        width: 71%;
    } */

    .catch-slider {
        width: 62%;
    }

    .bg-common.reason .ttl.ttl-01 .ttl-jpn {
        margin-top: -36px;
        display: block;
    }

    .bg-common.reason .metabox {
        color: #fff;
        margin-top: 40px;
        margin-bottom: 20px;
    }




    .bg-common.service .img-text {
        text-align: end;
        margin-top: 35px;
        margin-right: -85px;
        position: relative;
        z-index: 9;
    }


    .bg-common.product h2 .ttl-eng {
        text-align: left;
        margin-top: -20px;
        margin-left: 20px;
    }

    .bg-common.product h2 .ttl-jpn {
        display: block;
        margin-left: 106px;
        margin-top: 80px !important;
    }

    .bg-common.flow .set .metabox,
    .bg-common.product .set .metabox,
    .bg-common.service .set .metabox {
        max-width: 45%;
        flex: 0 0 45%;
        font-size: 15px;
    }




    .bg-common.flow h2 .ttl-eng {
        text-align: end;
        margin-top: -35px;
        margin-right: 53px;
    }

    .bg-common.service h2 .ttl-eng {
        text-align: end;
        margin-top: -20px;
        margin-left: 20px;
    }

    .bg-common.flow h2 .ttl-jpn,
    .bg-common.service h2 .ttl-jpn {
        display: block;
        margin-left: auto;
        margin-right: 77px;
        margin-top: 80px !important;
    }

    .bg-common h2 .ttl-eng {

        text-transform: capitalize;
        display: block;
        color: #fff;
        opacity: .5;
        font-weight: 300;
        font-size: 72px;
    }

    .bg-common.recruit .metabox,
    .bg-common.company .metabox {
        width: 28%;
        margin: auto;
        margin-top: 32px;
        margin-bottom: 32px;
    }


}

.bg-common h2 .ttl-eng {
    font-family: Shadows Into Light;

}

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




    .img-text {
        margin-top: 10px;
        text-align: center;
    }


    .catch-text-right {
        position: absolute;
        z-index: 9;
        top: 71px;
        right: 14px;
    }
}

.bg-common h2::after {
    display: none !important;
}



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

    .row-flow .item h2 span {
        text-align: center !important;
    }

    .bg-common.flow h2 .ttl-jpn,
    .bg-common.product h2 .ttl-jpn,
    .bg-common.service h2 .ttl-jpn {
        color: #14307e;

    }

    .catch-slider {
        width: 85%;
        margin: revert;
    }

    .catch-text {
        position: absolute;
        z-index: 9;
        top: 100px;
        left: 36px;
        width: 42%;
    }

    .bg-common.reason .metabox {
        color: #fff;
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: initial;
    }

    .bg-common.flow .set .metabox,
    .bg-common.product .set .metabox,
    .bg-common.service .set .metabox {
        text-align: initial;
    }

    .set {
        text-align: center;
    }



    .bg-common.flow h2 .ttl-eng,
    .bg-common.product h2 .ttl-eng,
    .bg-common.service h2 .ttl-eng {
        margin-top: -15px;
    }

    .bg-common.flow h2 .ttl-jpn,
    .bg-common.product h2 .ttl-jpn,
    .bg-common.service h2 .ttl-jpn {
        display: block;
        margin: auto;
        margin-top: 10px !important;
    }

    .bg-common h2 .ttl-eng {
        text-transform: capitalize;
        display: block;
        color: #fff;
        opacity: .5;
        font-weight: 300;
        font-size: 50px;
    }

    .bg-common.recruit .metabox,
    .bg-common.company .metabox {
        width: 60%;
        margin: auto;
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .bg-common.vertical .container-fluid {
        /* margin-top: 8px; */
    }

    .bg-common.vertical .metabox {
        /* margin: auto;
        line-height: 40px;
        color: #14307e;
        opacity: .5;
        font-weight: 400;
        font-size: 18px;
        text-align: center; */
        margin: auto;
        line-height: 40px;
        color: #14307e;
        font-weight: 400;
        font-size: 18px;
        text-align: center;
    }
}




.bg-common h2 .ttl-jpn {

    color: #fff;

}


.bg-common .ttl.ttl-01 .ttl-jpn {
    margin-top: -15px;
    display: block;
}

.bg-common.recruit .metabox p,
.bg-common.company .metabox p {
    line-height: 35px;
}

.bg-common.company:hover .button-area .btn-light {
    color: #fff;
    background-color: #14307e;
    border-color: #14307e;
}

.bg-common.recruit:hover .button-area .btn-light {
    color: #fff;
    background-color: #14307e;
    border-color: #14307e;
}

.bg-common.recruit:hover .button-area .btn-light svg {
    fill: #fff
}

.bg-common.company:hover .button-area .btn-light svg {
    fill: #fff
}

.bg-common.recruit {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
}


.flow-slider img {
    width: 100%;
}

.flow-slider .swiper-wrapper {
    transition-timing-function: linear;
}


.bg-common.flow .button-area.blue .text,
.bg-common.product .button-area.blue .text,
.bg-common.service .button-area.blue .text {
    color: #000;
    margin-right: 20px;
    font-weight: 400;
}



.bg-common.flow h2 .ttl-eng,
.bg-common.product h2 .ttl-eng,
.bg-common.service h2 .ttl-eng {
    color: #14307e;
    opacity: .5;
}

.bg-common.flow .set,
.bg-common.product .set,
.bg-common.service .set {
    color: #000;
}



.bg-common.flow h2 .ttl-jpn span,
.bg-common.product h2 .ttl-jpn span,
.bg-common.service h2 .ttl-jpn span {
    display: block;
    text-align: initial;
}



.row-flow .button-area.blue,
.row-base .button-area.blue {
    flex: 0 0 48%;
    max-width: 48%;
}

.img-reason {
    text-align: center;
}



.bg-common.reason .btn.btn-outline-primary {
    background-color: transparent;
    border-color: #fff;
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 41px;
    padding: 0;
    border-radius: 30px;
}

.bg-common.reason .btn.btn-outline-primary:hover {
    background-color: #fff;
    border-color: #fff;
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 41px;
    padding: 0;
    border-radius: 30px;
}

.bg-common.reason .btn.btn-outline-primary:hover svg {
    fill: #273e68;
}

@media screen and (min-width: 1196px) {
    .bg-common.reason a {
        position: absolute;
        right: 31%;
        bottom: 8%;
    }
}

@media screen and (max-width: 1195px) {
    .bg-common.reason a {
        margin-top: 30px;
    }
}

@media screen and (min-width: 1312px) {
    .page-top .jumbotron {
        height: 750px;
    }
}



@media screen and (min-width: 1313px) {
    .bg-common.vertical .container-fluid {
        margin-top: 130px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1312px) {
    .bg-common.vertical .container-fluid {
        margin-top: 25px;
    }
}

.set-center {
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 992px) {
    .bg-common.product .img-text {
        text-align: left;
        margin-top: 35px;
        margin-left: -84px;
        position: relative;
        z-index: 9;
    }

    .set {
        display: flex;
        /* justify-content: space-evenly; */
        justify-content: space-between;

        align-items: center;
    }

    .img-text {
        text-align: end;
        margin-top: 35px;
        margin-right: -25px;

    }

    .bg-common.vertical .metabox {
        writing-mode: vertical-rl;
        text-orientation: upright;
        margin: auto;
        line-height: 50px;
        color: #14307e;
        font-weight: 400;
        font-size: 18px;
        text-orientation: mixed;
    }

}