@charset "utf-8";

header {  /* common.cssの打消し */
    position: static;
    border-bottom: 0;
}
h1 {
    margin-right: 0;
}
h3 { /* common.cssの打ち消し */
    font-size: inherit;
    font-weight: 500;
    border-left: 0;
    padding: 0;
}
section { /* common.cssの打ち消し */
    padding-bottom: 0;
}
@media print , screen and (min-width: 1200px){
    main > section{
        padding-bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    br.sp {
        display: inline;
    }
}

/* 〜 767px / 768px 〜 1600px / 1601px 〜 */
/*
--------------------------------------------------
    ヘッダー
--------------------------------------------------
*/
.bpo_header_bar {
    padding: calc(20 / 1920 * 100%) calc(40 / 1920 * 100%) calc(25 / 1920 * 100%);
    background: #065AAA;
}
.bpo_header_bar img {
    width: calc(160 / 1840 * 100%);
    vertical-align: top;
}
@media screen and (max-width: 768px) {
    .bpo_header_bar {
        padding: 10px 20px 12px;
    }
    .bpo_header_bar img {
        width: 80px;
    }
}

.bpo_header_kv {
    width: 100%;
    padding: calc(561 / 1920 * 100%) calc(689 / 1920 * 100%) calc(107 / 1920 * 100%) calc(689 / 1920 * 100%);
    background: url("../img/bg-hero.png") no-repeat 50% 0 / 100% auto;
}
.bpo_header_logo img {
    vertical-align: top;
}
.bpo_header_link {
    margin-top: calc(-47 / 1920 * 100vw);
}
.bpo_header_link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(534 / 1920 * 100vw);
    height: calc(94 / 1920 * 100vw);
    margin: 0 auto;
    background: #FFDA65 url("../img/icon-arrow-right.svg") no-repeat right calc(38 / 1920 * 100vw) top 50% / calc(11 / 1920 * 100vw) auto;
    border-radius: calc(94 / 1920 * 100vw);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);
    line-height: 1;
    font-weight: bold;
    font-size: calc(30 / 1920 * 100vw);
}
.bpo_header_link a:hover {
    opacity: 1;
}
.bpo_header_link a:hover span {
    opacity: .7;
}
@media screen and (max-width: 768px) {
    .bpo_header_kv {
        height: calc(903 / 750 * 100vw);
        padding: calc(550 / 750 * 100vw) 0 0;
        background: url("../img/bg-hero-sp.jpg") no-repeat 50% 0 / 100% auto;
    }
    .bpo_header_logo {
        width: calc(496 / 750 * 100vw);
        margin: 0 auto;
    }
    .bpo_header_link {
        margin-top: calc(-47 / 750 * 100vw);
    }
    .bpo_header_link a {
        width: calc(534 / 750 * 100vw);
        height: calc(94 / 750 * 100vw);
        background-position: right calc(38 / 750 * 100vw) top 50%;
        background-size: calc(11 / 750 * 100vw) auto;
        border-radius: calc(94 / 750 * 100vw);
        font-size: calc(30 / 750 * 100vw);
    }
    .bpo_header_link a:hover span {
        opacity: 1;
    }
}

/*
------------------------------------------------------------
    忙しすぎて、もう手一杯…こんなお悩み、ありませんか？
------------------------------------------------------------
*/
.bpo_problem {
    position: relative;
    font-size: calc(10 / 1600 * 100vw);
}
@media screen and (min-width: 1601px) {
    .bpo_problem {
        font-size: 1rem;
    }
}
@media screen and (max-width: 768px) {
    .bpo_problem {
        font-size: calc(10 / 750 * 100vw);
    }
}

.bpo_problem_head {
    margin: calc(6 / 5.5 * 1em) 0 calc(3.2 / 5.5 * 1em);
    line-height: 1.3636em;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_problem_head span {
    display: inline-block;
    padding: 0 calc(6.4 / 4 * 1em);
    background:
        url("../img/obj-rollup-line.svg") no-repeat right center / calc(5 / 4 * 1em) auto,
        url("../img/obj-rollup-line.svg") no-repeat left center / calc(5 / 4 * 1em) auto;
    font-size: calc(4 / 5.5 * 1em);
}
@media screen and (max-width: 768px) {
    .bpo_problem_head {
        margin: calc(5 / 5.5 * 1em) 0 calc(3 / 5.5 * 1em);
    }
}

.bpo_problem_container {
    width: calc(1300 / 1600 * 100vw);
    margin: 0 auto;
}
@media screen and (min-width: 1601px) {
    .bpo_problem_container {
        width: 1300px;
    }
}
@media screen and (max-width: 768px) {
    .bpo_problem_container {
        width: calc(700 / 750 * 100vw);
    }
}

.bpo_problem_container h3 {
    margin-bottom: calc(2.7 / 2.5 * 1em);
    background: #4483BF;
    line-height: 2;
    color: #FFF;
    font-weight: bold;
    font-size: 2.5em;
    text-align: center;
}
.bpo_problem_container dl {
    display: flex;
    justify-content: space-between;
}
.bpo_problem_container .bpo_problem_pm {
    position: relative;
    margin-bottom: 7em;
}
.bpo_problem_container .bpo_problem_pm::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: -.8em;
    left: -11.4em;
    width: 36.6em;
    margin: auto 0;
    background: url("../img/obj-person-01.png") no-repeat left bottom / 100% auto;
}
.bpo_problem_container .bpo_problem_pm dl {
    padding-left: 27.5em;
}
.bpo_problem_container .bpo_problem_bp::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: -.8em;
    right: 0;
    width: 24.1em;
    margin: auto 0;
    background: url("../img/obj-person-02.png") no-repeat left bottom / 100% auto;
}
.bpo_problem_container .bpo_problem_bp dl {
    padding-right: 27.5em;
}
.bpo_problem_container dl > div {
    width: 32em;
    padding: 7.4em 0 5.8em;
    background: #ECECEC url("../img/obj-rollup-line.svg") no-repeat right 2.2em top 1.1em / 4.8em auto;
    border-radius: 2em;
}
.bpo_problem_container dl dt {
    margin-bottom: calc(12 / 320 * 100%);
    line-height: 1.25;
    color: #065AAA;
    font-size: 3.2em;
    font-weight: bold;
    text-align: center;
}
.bpo_problem_container dl dd {
    line-height: 1.5;
    color: #4C4C4C;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .bpo_problem_container dl {
        flex-wrap: wrap;
    }
    .bpo_problem_container .bpo_problem_pm::after {
        top: calc(70 / 750 * 100vw);
        bottom: auto;
        left: calc(12 / 750 * 100vw);
        width: calc(310 / 750 * 100vw);
        height: calc(300 / 750 * 100vw);
        margin: 0;
        background-size: contain;
    }
    .bpo_problem_container .bpo_problem_pm dl {
        padding-left: 0;
    }
    .bpo_problem_container .bpo_problem_bp::after {
        top: auto;
        bottom: 0;
        right: calc(67 / 750 * 100vw);
        width: calc(196 / 750 * 100vw);
        height: calc(282 / 750 * 100vw);
        margin: 0;
        background-size: contain;
    }
    .bpo_problem_container .bpo_problem_bp dl {
        padding-right: 0;
    }
    .bpo_problem_container dl > div {
        width: calc(330 / 750 * 100vw);
    }
    .bpo_problem_container .bpo_problem_pm dl > div:first-child {
        margin-bottom: calc(40 / 750 * 100vw);
        margin-left: calc(100% - 330 / 750 * 100vw);
    }
    .bpo_problem_container .bpo_problem_bp dl > div:nth-child(-n + 2) {
        margin-bottom: calc(40 / 750 * 100vw);
    }
    .bpo_problem_container dl dd {
        line-height: 1.4166;
        font-size: 2.4em;
    }
}

/*
------------------------------------------------------------
    そのお悩み、まるっと君でまるごと解決！
------------------------------------------------------------
*/

.bpo_problem_solution h3 {
    padding-top: calc(19 / 5.5 * 1em);
    margin-bottom: calc(7 / 5.5 * 1em);
    background: url("../img/icon-arrow-down-02.svg") no-repeat left 50% top calc(6.7 / 5.5 * 1em) / calc(18.8 / 5.5 * 1em) auto;
    line-height: 1.1;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_problem_solution h3 strong {
    display: inline-block;
    border-bottom: 7px solid #FFDA65;
}
.bpo_problem_solution h3 b {
    font-size: calc(7.2 / 5.5 * 1em);
}
@media screen and (max-width: 768px) {
    .bpo_problem_solution h3 {
        margin-bottom: calc(9 / 5.5 * 1em);
    }
    .bpo_problem_solution h3 strong {
        display: inline;
        border-bottom: 0;
    }
    .bpo_problem_solution h3 strong span {
        display: inline-block;
        border-bottom: calc(7 / 750 * 100vw) solid #FFDA65;
    }
    .bpo_problem_solution h3 strong span:last-child {
        margin-top: calc(1.5 / 5.5 * 1em);
    }
}

.bpo_problem_solution {
    padding-bottom: 35.8em;
    background: url("../img/obj-person-03.png") no-repeat left 50% bottom 0 / 108em auto;
    text-align: center;
}
.bpo_problem_solution h4 {
    margin-bottom: calc(3.4 / 4 * 1em);
    line-height: 1;
    color: #065AAA;
    font-weight: bold;
    font-size: 4em;
    text-align: center;
}
.bpo_problem_solution p {
    display: inline-block;
    position: relative;
    padding: 0 calc(11 / 3 * 1em);
    line-height: 1.8333;
    font-weight: bold;
    font-size: 3em;
}
.bpo_problem_solution p::before,
.bpo_problem_solution p::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(.5 / 3 * 1em);
    height: calc(22 / 3 * 1em);
    background: #707070;
    margin: auto 0;
}
.bpo_problem_solution p::before {
    left: calc(5.1 / 3 * 1em);
    transform: rotate(-30deg);
}
.bpo_problem_solution p::after {
    right: calc(5.1 / 3 * 1em);
    transform: rotate(30deg);
}
@media screen and (max-width: 768px) {
    .bpo_problem_solution {
        padding-bottom: 32.6em;
        background: url("../img/obj-person-03-sp.png") no-repeat left 50% bottom 0 / 100% auto;
        text-align: center;
    }
    .bpo_problem_solution h4 {
        margin-bottom: calc(4 / 4 * 1em);
        line-height: 1.375;
    }
    .bpo_problem_solution p {
        width: calc(700 / 750 * 100vw);
        padding: 0;
        line-height: 1.9642;
        font-weight: bold;
        font-size: 2.8em;
    }
    .bpo_problem_solution p::before,
    .bpo_problem_solution p::after {
        height: calc(41.5 / 3 * 1em);
    }
    .bpo_problem_solution p::before {
        left: calc(4.8 / 3 * 1em);
        transform: rotate(-12.5deg);
    }
    .bpo_problem_solution p::after {
        right: calc(4.8 / 3 * 1em);
        transform: rotate(12.5deg);
    }
}

/*
------------------------------------------------------------
    お問い合わせはこちら
------------------------------------------------------------
*/

.bpo_contact_link {
    width: calc(1300 / 1600 * 100vw);
    margin: 0 auto;
    font-size: calc(10 / 1600 * 100vw);
}
@media screen and (min-width: 1601px) {
    .bpo_contact_link {
        width: 1300px;
        font-size: 1rem;
    }
}
@media screen and (max-width: 768px) {
    .bpo_contact_link {
        width: auto;
        font-size: calc(10 / 750 * 100vw);
    }
}
.bpo_contact_link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(534 / 1300 * 100%);
    margin: 0 auto;
    padding: calc(3.2 / 3 * 1em) 0;
    background: #FFDA65 url("../img/icon-arrow-right.svg") no-repeat right calc(3.8 / 3 * 1em) top 50% / calc(1.1 / 3 * 1em) auto;
    border-radius: calc(9.4 / 3 * 1em);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);
    line-height: 1;
    font-weight: bold;
    font-size: 3em;
}
.bpo_contact_link a:hover {
    opacity: 1;
}
.bpo_contact_link a:hover span {
    opacity: .7;
}
@media screen and (max-width: 768px) {
    .bpo_contact_link a {
        width: calc(698 / 750 * 100%);
    }
    .bpo_contact_link a:hover span {
        opacity: 1;
    }
}

/*
------------------------------------------------------------
    多くの企業様で導⼊いただいています
------------------------------------------------------------
*/

.bpo_content1 {
    padding: 11.3em 0 15.7em;
    background: #E5EEF6;
    font-size: calc(10 / 1600 * 100vw);
}
.bpo_casestudies {
    width: calc(1300 / 1600 * 100vw);
    margin: 0 auto;
}
@media screen and (min-width: 1601px) {
    .bpo_content1 {
        font-size: 1rem;
    }
    .bpo_casestudies {
        width: 1300px;
    }
}
@media screen and (max-width: 768px) {
    .bpo_content1 {
        padding: 5em 0 8em;
        font-size: calc(10 / 750 * 100vw);
    }
    .bpo_content1 .bpo_contact_link {
        margin-bottom: 11em;
    }
    .bpo_casestudies {
        width: calc(700 / 750 * 100vw);
    }
}
.bpo_casestudies h2 {
    text-align: center;
}
.bpo_casestudies span {
    display: inline-block;
    padding: 1em calc(15 / 5.5 * 1em) calc(3 / 5.5 * 1em);
    background: url("../img/icon-mag.svg") no-repeat right calc(3.6 / 5.5 * 1em) top 0 / calc(10.4 / 5.5 * 1em) auto;
    line-height: 1;
    font-weight: bold;
    font-size: 5.5em;
}
.bpo_casestudies_case {
    width: calc(1236 / 1300 * 100%);
    margin: 0 auto;
}
.bpo_casestudies_case > li {
    display: flex;
    border: 3px solid #065AAA;
    background: #FFF;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .16);
}
.bpo_casestudies_case > li:not(:last-child) {
    margin-bottom: 4.4em;
}
.bpo_casestudies_case > li h3 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: calc(355 / 1230 * 100%);
    padding: 1em 0 0 4.5em;
    background: #065AAA no-repeat;
}
.bpo_casestudies_case > li h3 img {
    width: 7.3em;
}

.bpo_casestudies_case > li:nth-child(1) h3 {
    background-image: url("../img/bg-title-bpo-case1.png");
    background-position: right 1.1em top calc(50% + 1em);
    background-size: 22.2em auto;
}
.bpo_casestudies_case > li:nth-child(2) h3 {
    background-image: url("../img/bg-title-bpo-case2.png");
    background-position: right 3.3em top calc(50% + .3em);
    background-size: 17.8em auto;
}
.bpo_casestudies_case > li:nth-child(3) h3 {
    background-image: url("../img/bg-title-bpo-case3.png");
    background-position: right 1.2em top calc(50% + 1em);
    background-size: 22.1em auto;
}
.bpo_casestudies_case > li:nth-child(4) h3 {
    background-image: url("../img/bg-title-bpo-case4.png");
    background-position: right 1.9em top calc(50% + 1em);
    background-size: 20.5em auto;
}

.bpo_casestudies_case > li > div {
    flex: 1 0 auto;
    padding: 3em 0 2em 4.7em;
}
.bpo_casestudies_case > li h4 {
    margin-bottom: calc(.3 / 3.2 * 1em);
    line-height: 1.3333;
    color: #065AAA;
    font-weight: bold;
    font-size: 3.2em;
}
.bpo_casestudies_case > li h5 {
    margin-bottom: calc(2.5 / 2.8 * 1em);
    line-height: 1.2;
    font-size: 2.8em;
}
.bpo_casestudies_case > li p {
    margin-bottom: 1em;
    line-height: 1.3333;
    color: rgba(0, 0, 0, .7);
    font-weight: bold;
    font-size: 2em;
}
.bpo_casestudies_case_matter {
    display: flex;
    margin-bottom: 2em;
}
.bpo_casestudies_case_matter > li {
    min-width: calc(18 / 1.8 * 1em);
    padding: 0 calc(1.2 / 1.8 * 1em);
    background: #9FA0A0;
    border-radius: calc(.5 / 1.8 * 1em);
    line-height: 2.2222;
    color: #FFF;
    font-weight: bold;
    font-size: 1.8em;
    text-align: center;
}
.bpo_casestudies_case_matter > li.marutto {
    position: relative;
    background: #4483BF;
}
.bpo_casestudies_case_matter > li.marutto::before {
    content: "";
    display: block;
    position: absolute;
    top: -1em;
    right: 0;
    width: 100%;
    height: .9em;
    background: url("../img/icon-marutto.png") no-repeat right center / auto 100%;
}
.bpo_casestudies_case_matter > li:not(:last-child) {
    margin-right: calc(1 / 1.8 * 1em);
}
.bpo_casestudies_case_link {
    padding-right: 4.7em;
    text-align: center;
}
.bpo_casestudies_case_link a {
    display: inline-block;
    padding: 0 calc(4.3 / 2 * 1em) 0 calc(2 / 2 * 1em);
    background: #065AAA url("../img/icon-arrow-right-04.svg") no-repeat right calc(2 / 2 * 1em) top 50% / calc(1.3 / 2 * 1em) auto;
    border-radius: calc(3 / 2 * 1em);
    line-height: 1.5;
    color: #FFF;
    font-weight: bold;
    font-size: 2em;
}
@media screen and (max-width: 768px) {
    .bpo_casestudies h2 {
        margin: 0 auto calc(30 / 750 * 100vw);
    }
    .bpo_casestudies span {
        padding: 0 calc(90 / 750 * 100vw) 0 0;
        background-position: right 0 top calc(10 / 750 * 100vw);
        background-size: calc(87 / 750 * 100vw) auto;
        line-height: 1.4545;
        text-align: left;
    }
    .bpo_casestudies_case {
        width: 100%;
    }
    .bpo_casestudies_case > li {
        min-height: calc(554 / 750 * 100vw);
        border-width: 2px;
    }
    .bpo_casestudies_case > li:not(:last-child) {
        margin-bottom: calc(30 / 750 * 100vw);
    }
    .bpo_casestudies_case > li h3 {
        align-items: flex-start;
        justify-content: center;
        width: calc(238 / 750 * 100vw);
        padding: calc(120 / 750 * 100vw) 0 0;
    }
    .bpo_casestudies_case > li:nth-child(1) h3,
    .bpo_casestudies_case > li:nth-child(2) h3,
    .bpo_casestudies_case > li:nth-child(3) h3,
    .bpo_casestudies_case > li:nth-child(4) h3 {
        background-position: right 50% top calc(250 / 750 * 100vw);
    }

    .bpo_casestudies_case > li > div {
        position: relative;
        flex: 1 1 auto;
        padding: calc(18 / 750 * 100vw) calc(20 / 750 * 100vw) calc(78 / 750 * 100vw);
    }
    .bpo_casestudies_case > li h4 {
        margin-bottom: calc(6 / 750 * 100vw);
        font-size: 3.4em;
    }
    .bpo_casestudies_case > li h5 {
        margin-bottom: calc(25 / 750 * 100vw);
        font-size: 3em;
    }
    .bpo_casestudies_case > li p {
        margin-bottom: 0;
        font-size: 2.4em;
    }
    .bpo_casestudies_case_matter {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: calc(30 / 750 * 100vw);
    }
    .bpo_casestudies_case_matter > li {
        width: calc(200 / 750 * 100vw);
        min-width: 0;
        padding: calc(7 / 750 * 100vw) 0;
        line-height: 1.08;
        font-size: 2.4em;
    }
    .bpo_casestudies_case_matter > li.marutto {
        margin-top: calc(36 / 750 * 100vw);
    }
    .bpo_casestudies_case_matter > li.marutto:nth-child(-n + 2) {
        margin-top: calc(10 / 750 * 100vw);
    }
    .bpo_casestudies_case_matter > li:not(:last-child) {
        margin-right: 0;
    }
    .bpo_casestudies_case_link {
        position: absolute;
        right: 0;
        bottom: calc(18 / 750 * 100vw);
        left: 0;
        margin: 0 auto;
        padding-right: 0;
    }
    .bpo_casestudies_case_link a {
        padding: 0 calc(90 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
        background-position: right calc(52 / 750 * 100vw) top 50%;
        background-size: calc(20 / 750 * 100vw) auto;
        border-radius: calc(50 / 750 * 100vw);
        line-height: 2.0833;
        font-size: 2.4em;
    }
}

/*
------------------------------------------------------------
    気になることは何でもコーディネーターにご相談ください
------------------------------------------------------------
*/
.bpo_cv {
    padding: 13.6em 0 12.4em;
    font-size: calc(10 / 1600 * 100vw);
}
@media screen and (min-width: 1601px) {
    .bpo_cv {
        font-size: 1rem;
    }
}
@media screen and (max-width: 768px) {
    .bpo_cv {
        padding: calc(100 / 750 * 100vw) 0 calc(88 / 750 * 100vw);
        font-size: calc(10 / 750 * 100vw);
    }
}
.bpo_cv h2 {
    margin-bottom: calc(1.5 / 5.5 * 1em);
    line-height: 1.3333;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_cv_phone {
    width: calc(1040 / 1600 * 100%);
    margin: 0 auto;
    border: 5px solid #065AAA;
    border-radius: 2em;
    text-align: center;
    overflow: hidden;
}
.bpo_cv_phone h3 {
    padding: calc(3.2 / 3.2 * 1em) 0 calc(1.8 / 3.2 * 1em);
    background: #065AAA;
    line-height: 1;
    color: #FFF;
    font-weight: bold;
    font-size: 3.2em;
}
.bpo_cv_phone p {
    display: inline-block;
    margin: calc(2.7 / 5.5 * 1em) 0 calc(2 / 5.5 * 1em);
    padding-left: calc(6.5 / 5.5 * 1em);
    background: url("../img/icon-phone.svg") no-repeat left center / auto 100%;
    line-height: 1.1818;
    color: #4C4C4C;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_cv_text {
    margin-top: calc(4 / 2.5 * 1em);
    margin-bottom: calc(1 / 2.5 * 1em);
    line-height: 1;
    font-size: 2.5em;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .bpo_cv h2 {
        margin-bottom: calc(30 / 750 * 100vw);
    }
    .bpo_cv_phone {
        width: calc(700 / 750 * 100vw);
        border-width: calc(5 / 750 * 100vw);
    }
}

/*
------------------------------------------------------------
    5つの強みで業務を改善
------------------------------------------------------------
*/
.bpo_content2 {
    padding: 8em 0 12em;
    background: #E5EEF6;
    font-size: calc(10 / 1600 * 100vw);
}
.bpo_strength {
    width: calc(1300 / 1600 * 100vw);
    margin: 0 auto;
}
@media screen and (min-width: 1601px) {
    .bpo_content2 {
        font-size: 1rem;
    }
    .bpo_strength {
        width: 1300px;
    }
}
@media screen and (max-width: 768px) {
    .bpo_content2 {
        padding: calc(34 / 750 * 100vw) 0 calc(54 / 750 * 100vw);
        font-size: calc(10 / 750 * 100vw);
    }
    .bpo_strength {
        width: calc(660 / 750 * 100vw);
    }
}
.bpo_content2 h2 {
    margin-bottom: 1em;
    line-height: 1em;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_content2 h2 img {
    vertical-align: middle;
    width: calc(25 / 5.5 * 1em);
    margin-bottom: calc(2 / 5.5 * 1em);
    margin-left: calc(1.5 / 5.5 * 1em);
}
.bpo_content2 h2 b {
    display: inline-block;
    padding-bottom: calc(1 / 7.2 * 1em);
    border-bottom: 7px solid #FFDA65;
    font-size: calc(7.2 / 5.5 * 1em);
}
.bpo_strength > li h3 {
    margin-bottom: calc(2 / 3.5 * 1em);
    line-height: 1.3333;
    color: #065AAA; 
    font-weight: bold;
    font-size: 3.5em;
} 
.bpo_strength > li h3 img {
    display: block;
    width: auto;
    height: calc(8.7 / 3.5 * 1em);
    margin-bottom: calc(4.6 / 3.5 * 1em);
}
.bpo_strength > li p {
    line-height: 1.75;
    font-size: 2em;
}

.bpo_strength > li:nth-child(1) {
    min-height: 39.8em;
    margin-bottom: 8em;
    padding-top: 2.5em;
    background: url("../img/bg-str-01.png") no-repeat right 1.7em top 0 / auto 39.8em;
}
.bpo_strength > li:nth-child(2) {
    min-height: 35.8em;
    margin-bottom: 7em;
    padding-top: 1.4em;
    background: url("../img/bg-str-02.png") no-repeat right 5em top 0 / auto 35.8em;
}
.bpo_strength > li:nth-child(3) {
    min-height: 36.3em;
    margin-bottom: 7.7em;
    padding-top: 3.7em;
    background: url("../img/bg-str-03.png") no-repeat right 0 top 0 / auto 36.3em;
}
.bpo_strength > li:nth-child(4) {
    min-height: 41.8em;
    margin-bottom: 8.2em;
    padding-top: 4.9em;
    background: url("../img/bg-str-04.png") no-repeat right 4.6em top 0 / auto 41.8em;
}
.bpo_strength > li:nth-child(5) {
    min-height: 36.2em;
    margin-bottom: 4.8em;
    background: url("../img/bg-str-05.png") no-repeat right 2.8em top 0 / auto 36.2em;
}
@media screen and (max-width: 768px) {
    .bpo_strength > li p {
        line-height: 1.5833;
        font-size: 2.4em;
    }
    .bpo_strength > li:nth-child(1),
    .bpo_strength > li:nth-child(2),
    .bpo_strength > li:nth-child(3),
    .bpo_strength > li:nth-child(4),
    .bpo_strength > li:nth-child(5) {
        min-height: 0;
        margin-bottom: calc(100 / 750 * 100vw);
        padding-top: 0;
        background-position: center bottom;
    }
    .bpo_strength > li:nth-child(1) {
        padding-bottom: calc(30 / 750 * 100vw + 39.8em);
    }
    .bpo_strength > li:nth-child(2) {
        padding-bottom: calc(30 / 750 * 100vw + 35.8em);
    }
    .bpo_strength > li:nth-child(3) {
        padding-bottom: calc(30 / 750 * 100vw + 36.3em);
    }
    .bpo_strength > li:nth-child(4) {
        padding-bottom: calc(30 / 750 * 100vw + 41.8em);
    }
    .bpo_strength > li:nth-child(5) {
        padding-bottom: calc(30 / 750 * 100vw + 36.2em);
    }
}

.product_sever {
    padding-top: 5rem;
}
.product_sever .listbox {
    padding-bottom: 0;
}
@media screen and (max-width: 768px) {
    .product_sever {
        padding-top: .45rem;
    }
    .product_sever .listbox {
        padding-bottom: 2.2rem;
    }
}

/*
------------------------------------------------------------
    下層ヘッダー
------------------------------------------------------------
*/
.bpo_sub_header_kv {
    display: flex;
    align-items: center;
    height: calc(980 / 1920 * 100vw);
    padding-left: calc(120 / 1920 * 100%);
    border-top: 8px solid #FFF;
    font-size: calc(10 / 1920 * 100vw);
}
.bpo_sub_header_kv.case1 {
    background: #065AAA url("../img/bg-title-bpo-case1.png") no-repeat right calc(73 / 1920 * 100%) top 50% / calc(908 / 1920 * 100%) auto;
}
.bpo_sub_header_kv.case2 {
    background: #065AAA url("../img/bg-title-bpo-case2.png") no-repeat right calc(187 / 1920 * 100%) top 50% / calc(680 / 1920 * 100%) auto;
}
.bpo_sub_header_kv.case3 {
    background: #065AAA url("../img/bg-title-bpo-case3.png") no-repeat right calc(114 / 1920 * 100%) top 50% / calc(904 / 1920 * 100%) auto;
}
.bpo_sub_header_kv.case4 {
    background: #065AAA url("../img/bg-title-bpo-case4.png") no-repeat right calc(116 / 1920 * 100%) top 50% / calc(888 / 1920 * 100%) auto;
}
@media screen and (max-width: 768px) {
    .bpo_sub_header_kv {
        display: block;
        height: calc(1430 / 750 * 100vw);
        padding-left: 0;
        border-top-width: 4px;
        font-size: calc(10 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case1 {
        background-position: right calc(40 / 750 * 100vw) top calc(555 / 750 * 100vw);
        background-size: calc(693 / 750 * 100vw) auto;
    }
    .bpo_sub_header_kv.case2 {
        background-position: right 50% top calc(504 / 750 * 100vw);
        background-size: calc(560 / 750 * 100vw) auto;
    }
    .bpo_sub_header_kv.case3 {
        background-position: right 50% top calc(540 / 750 * 100vw);
        background-size: calc(690 / 750 * 100vw) auto;
    }
    .bpo_sub_header_kv.case4 {
        background-position: right 50% top calc(540 / 750 * 100vw);
        background-size: calc(686 / 750 * 100vw) auto;
    }
}

.bpo_sub_header_kv > div {
    width: 100%;
}
.bpo_sub_header_title {
    color: #FFF;
    font-weight: bold;
}
.bpo_sub_header_title_line1,
.bpo_sub_header_title_line2,
.bpo_sub_header_title_line3 {
    display: block;
    font-feature-settings: "palt";
}
.bpo_sub_header_title_line1 {
    margin-bottom: 7em;
}
.bpo_sub_header_title_line2 {
    margin-left: calc(2 / 3 * 1em);
    margin-bottom: calc(3.6 / 3 * 1em);
    line-height: 1;
    font-size: 3em;
}
.bpo_sub_header_title_line3 {
    margin-bottom: calc(12 / 5.5 * 1em);
    line-height: 1.4545;
    font-size: 5.5em;
}
.bpo_sub_header_kv.case3 .bpo_sub_header_title_line3 {
    margin-bottom: calc(4 / 5.5 * 1em);
}
.bpo_sub_header_kv.case1 .bpo_sub_header_title_line1 img {
    width: calc(410 / (1920 - 120) * 100%);
}
.bpo_sub_header_kv.case2 .bpo_sub_header_title_line1 img {
    width: calc(424 / (1920 - 120) * 100%);
}
.bpo_sub_header_kv.case3 .bpo_sub_header_title_line1 img {
    width: calc(424 / (1920 - 120) * 100%);
}
.bpo_sub_header_kv.case4 .bpo_sub_header_title_line1 img {
    width: calc(426 / (1920 - 120) * 100%);
}
.bpo_sub_header_matter {
    display: flex;
}
.bpo_sub_header_kv.case3 .bpo_sub_header_matter,
.bpo_sub_header_kv.case4 .bpo_sub_header_matter {
    width: calc(687 / (1920 - 120) * 100%);
}
.bpo_sub_header_matter > li {
    min-width: calc(21.1 / 1.8 * 1em);
    padding: 0;
    background: #9FA0A0;
    border-radius: calc(.5 / 1.8 * 1em);
    line-height: 2.2222;
    color: #FFF;
    font-weight: bold;
    font-size: 1.8em;
    text-align: center;
}
.bpo_sub_header_kv.case3 .bpo_sub_header_matter > li,
.bpo_sub_header_kv.case4 .bpo_sub_header_matter > li {
    flex: 1 0 auto;
}
.bpo_sub_header_matter > li.marutto {
    position: relative;
    background: #FFF;
    color: #065AAA;
}
.bpo_sub_header_matter > li.marutto::before {
    content: "";
    display: block;
    position: absolute;
    top: -1em;
    right: 0;
    width: 100%;
    height: .9em;
    background: url("../img/icon-marutto-white.png") no-repeat right center / auto 100%;
} 
.bpo_sub_header_matter > li:not(:last-child) {
    margin-right: calc(1.2 / 1.8 * 1em);
}
@media screen and (max-width: 768px) {
    .bpo_sub_header_title {
        padding-top: calc(60 / 750 * 100vw);
        padding-left: calc(56 / 750 * 100vw);
    }
    .bpo_sub_header_title_line1,
    .bpo_sub_header_title_line2,
    .bpo_sub_header_title_line3 {
        display: block;
    }
    .bpo_sub_header_kv.case4 .bpo_sub_header_title_line2 {
        line-height: 1.0714;
        font-size: 2.8em;
    }
    .bpo_sub_header_title_line3,
    .bpo_sub_header_title_line4 {
        margin-bottom: 0;
    }
    .bpo_sub_header_kv.case3 .bpo_sub_header_title_line3,
    .bpo_sub_header_kv.case4 .bpo_sub_header_title_line3 {
        margin-bottom: 0;
    }
    .bpo_sub_header_kv.case1 .bpo_sub_header_title_line1 img {
        width: calc(410 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case2 .bpo_sub_header_title_line1 img {
        width: calc(424 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case3 .bpo_sub_header_title_line1 img {
        width: calc(424 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case4 .bpo_sub_header_title_line1 img {
        width: calc(426 / 750 * 100vw);
    }
    .bpo_sub_header_matter {
        flex-wrap: wrap;
        justify-content: space-between;
        margin: calc(734 / 750 * 100vw) auto 0;
    }
    .bpo_sub_header_kv.case1 .bpo_sub_header_matter {
        width: calc(418 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case2 .bpo_sub_header_matter {
        width: calc(578 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case3 .bpo_sub_header_matter {
        justify-content: center;
        width: calc(570 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case4 .bpo_sub_header_matter {
        flex-wrap: nowrap;
        width: calc(636 / 750 * 100vw);
        margin: calc(830 / 750 * 100vw) auto 0;
    }
    .bpo_sub_header_matter > li {
        margin: 1.5em 0 0;
        min-width: calc(200 / 750 * 100vw);
        line-height: 2.0888;
        font-size: 2.4em;
    }
    .bpo_sub_header_kv.case2 .bpo_sub_header_matter > li {
        min-width: calc(280 / 750 * 100vw);
    }
    .bpo_sub_header_kv.case3 .bpo_sub_header_matter > li:nth-child(2) {
        flex: 0 0 auto;
    }
    .bpo_sub_header_kv.case4 .bpo_sub_header_matter > li {
        flex: 0 0 auto;
    }
    .bpo_sub_header_matter > li:not(:last-child) {
        margin-right: 0;
    }
}

/*
------------------------------------------------------------
    下層
------------------------------------------------------------
*/
.bpo_sub_contents {
    width: calc(1370 / 1600 * 100vw);
    margin: 0 auto;
    padding: 12em 0 0;
    font-size: calc(10 / 1600 * 100vw);
}
@media screen and (min-width: 1601px) {
    .bpo_sub_contents {
        width: 1370px;
        font-size: 1rem;
    }
}
@media screen and (max-width: 768px) {
    .bpo_sub_contents {
        width: calc(700 / 750 * 100vw);
        font-size: calc(10 / 750 * 100vw);
    }
}

.bpo_sub_contents_header h2 {
    margin-bottom: calc(3 / 5.5 * 1em);
    line-height: 1.4545;
    color: #065AAA;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_sub_contents_header p {
    margin-bottom: calc(10 / 4 * 1em);
    line-height: 1.25;
    font-weight: bold;
    font-size: 4em;
    text-align: center;
}

.bpo_sub_contents_reduction h3 {
    margin-bottom: calc(3.4 / 3.2 * 1em);
    padding-bottom: .5em;
    border-bottom: 1px solid currentColor;
    line-height: 1;
    color: #4483BF;
    font-weight: bold;
    font-size: 3.2em;
    text-align: center;
}
.bpo_sub_contents_reduction ul {
    display: flex;
    justify-content: center;
    margin-bottom: 11em;
}
.bpo_sub_contents_reduction ul li {
    width: calc(400 / 1370 * 100%);
    padding: calc(2 / 2.8 * 1em) 0;
    line-height: 1.0714;
    background: #ECECEC;
    border-radius: calc(1 / 2.8 * 1em);
    color: #4C4C4C;
    font-weight: bold;
    font-size: 2.8em;
    text-align: center;
}
.bpo_sub_contents_reduction ul li:not(:last-child) {
    margin-right: calc(5 / 2.8 * 1em);
}
.bpo_sub_contents_reduction.case3 ul,
.bpo_sub_contents_reduction.case4 ul {
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(850 / 1370 * 100%);
    margin-right: auto;
    margin-left: auto;
}
.bpo_sub_contents_reduction.case3 ul li,
.bpo_sub_contents_reduction.case4 ul li {
    width: calc(400 / 850 * 100%);
}
.bpo_sub_contents_reduction.case3 ul li:not(:last-child),
.bpo_sub_contents_reduction.case4 ul li:not(:last-child) {
    margin-right: 0;
}
.bpo_sub_contents_reduction.case3 ul li:nth-child(n + 3),
.bpo_sub_contents_reduction.case4 ul li:nth-child(n + 3) {
    margin-top: calc(4 / 2.8 * 1em);
}
@media screen and (max-width: 768px) {
    .bpo_sub_contents_reduction ul {
        display: block;
        margin-bottom: calc(80 / 750 * 100vw);
    }
    .bpo_sub_contents_reduction ul li {
        width: calc(400 / 750 * 100vw);
        margin: 0 auto;
    }
    .bpo_sub_contents_reduction ul li:not(:last-child) {
        margin-right: auto;
        margin-bottom: calc(20 / 750 * 100vw);
    }
    .bpo_sub_contents_reduction.case3 ul,
    .bpo_sub_contents_reduction.case4 ul {
        width: auto;
    }
    .bpo_sub_contents_reduction.case3 ul li,
    .bpo_sub_contents_reduction.case4 ul li {
        width: calc(544 / 750 * 100vw);
    }
    .bpo_sub_contents_reduction.case3 ul li:not(:last-child),
    .bpo_sub_contents_reduction.case4 ul li:not(:last-child) {
        margin-right: auto;
        margin-bottom: calc(20 / 750 * 100vw);
    }
    .bpo_sub_contents_reduction.case3 ul li:nth-child(n + 3),
    .bpo_sub_contents_reduction.case4 ul li:nth-child(n + 3) {
        margin-top: 0;
    }
}

.bpo_sub_contents_text.p1 {
    margin-bottom: 6em;
}
.bpo_sub_contents_text.p2 {
    margin-bottom: 12em;
}
.bpo_sub_contents_text h3 {
    margin-bottom: calc(2 / 3 * 1em);
    padding: calc(2.3 / 3 * 1em) 0;
    background: #4483BF;
    line-height: 1.3333;
    color: #FFF;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}
.bpo_sub_contents_text p {
    line-height: 1.6;
    font-size: 2.8em;
}
@media screen and (max-width: 768px) {
    .bpo_sub_contents_text.p2 {
        margin-bottom: calc(80 / 750 * 100vw);
    }
    .bpo_sub_contents_text h3 {
        margin-bottom: calc(30 / 750 * 100vw);
    }
}

.bpo_sub_contents_flow ol {
    display: flex;
    justify-content: space-between;
}
.bpo_sub_contents_flow ol li {
    position: relative;
    width: calc(430 / 1370 * 100%);
    border: 3px solid #065AAA;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .16);
}
.bpo_sub_contents_flow ol li h4 {
    padding: calc(2 / 5.5 * 1em) 0 calc(.6 / 5.5 * 1em);
    background: #065AAA;
    line-height: 1.4545;
    color: #FFF;
    font-weight: bold;
    font-size: 5.5em;
    text-align: center;
}
.bpo_sub_contents_flow ol li:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    right: -5em;
    bottom: 9.5em;
    z-index: 2;
    width: 5.6em;
    height: 11.4em;
    background: url("../img/icon-arrow-right-02.svg") no-repeat 50% 50% / contain;
}
.bpo_sub_contents_flow dl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 29.4em;
}
.bpo_sub_contents_flow dt {
    line-height: 1.25;
    color: #065AAA;
    font-weight: bold;
    font-size: 3.2em;
    text-align: center;
}
.bpo_sub_contents_flow dt + dt {
    margin-top: calc(40 / 32 * 1em);
}
.bpo_sub_contents_flow.case3 li:nth-child(3) dt + dt {
    margin-top: calc(10 / 32 * 1em);
}
.bpo_sub_contents_flow.case4 li dt {
    line-height: 1.125;
}
.bpo_sub_contents_flow.case4 li dt + dt {
    margin-top: calc(10 / 32 * 1em);
}
.bpo_sub_contents_flow dd + dt {
    margin-top: calc(2.7 / 3.2 * 1em);
}
.bpo_sub_contents_flow dd {
    line-height: 1.5;
    color: #4C4C4C;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .bpo_sub_contents_flow ol {
        display: block;
    }
    .bpo_sub_contents_flow ol li {
        width: calc(600 / 750 * 100vw);
        margin: 0 auto;
        border-width: 2px;
    }
    .bpo_sub_contents_flow ol li:not(:last-child) {
        margin-bottom: calc(30 / 750 * 100vw);
    }
    .bpo_sub_contents_flow ol li:not(:last-child)::after {
        right: 0;
        bottom: calc(-42 / 750 * 100vw);
        left: 0;
        margin: 0 auto;
        width: calc(114 / 750 * 100vw);
        height: calc(56 / 750 * 100vw);
        background: url("../img/icon-arrow-down.svg") no-repeat 50% 50% / contain;
    }
    .bpo_sub_contents_flow.case4 li dt + dt {
        margin-top: calc(20 / 32 * 1em);
    }
}

.bpo_sub_contents + .bpo_cv {
    padding: 11.5em 0 10em;
}
@media screen and (max-width: 768px) {
    .bpo_sub_contents + .bpo_cv {
        padding: calc(160 / 750 * 100vw) 0 calc(100 / 750 * 100vw);
    }
}

.bpo_sub_link {
    margin: 0 6em 8em;
    font-size: calc(10 / 1600 * 100vw);
}
@media screen and (min-width: 1601px) {
    .bpo_sub_link {
        font-size: 1rem;
    }
}
@media screen and (max-width: 768px) {
    .bpo_sub_link {
        padding: 0 calc(20 / 750 * 100vw) calc(80 / 750 * 100vw);
        font-size: calc(10 / 750 * 100vw);
    }
}
.bpo_sub_link ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4em;
}
.bpo_sub_link ul li {
    width: calc(580 / 1800 * 100%);
}
.bpo_sub_link ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 24em;
    padding: 0 0 0 calc(38 / 580 * 100%);
    border-radius: 1em;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, .16);
}
.bpo_sub_link_case1 a {
    background: 
        url("../img/icon-arrow-right-05.svg") no-repeat right calc(23 / 580 * 100%) top 50% / calc(21 / 580 * 100%) auto,
        #065AAA url("../img/bg-title-case-case1.png") no-repeat right calc(50 / 580 * 100%) top 50% / calc(222 / 580 * 100%) auto;
}
.bpo_sub_link_case2 a {
    background: 
        url("../img/icon-arrow-right-05.svg") no-repeat right calc(23 / 580 * 100%) top 50% / calc(21 / 580 * 100%) auto,
        #065AAA url("../img/bg-title-case-case2.png") no-repeat right calc(78 / 580 * 100%) top 50% / calc(178 / 580 * 100%) auto;
}
.bpo_sub_link_case3 a {
    background: 
        url("../img/icon-arrow-right-05.svg") no-repeat right calc(23 / 580 * 100%) top 50% / calc(21 / 580 * 100%) auto,
        #065AAA url("../img/bg-title-case-case3.png") no-repeat right calc(50 / 580 * 100%) top 50% / calc(220 / 580 * 100%) auto;
}
.bpo_sub_link_case4 a {
    background: 
        url("../img/icon-arrow-right-05.svg") no-repeat right calc(23 / 580 * 100%) top 50% / calc(21 / 580 * 100%) auto,
        #065AAA url("../img/bg-title-case-case4.png") no-repeat right calc(78 / 580 * 100%) top 50% / calc(206 / 580 * 100%) auto;
}
.bpo_sub_link_case_head img {
    display: block;
    width: auto;
    height: 5em;
    margin-bottom: 2.4em;
}
.bpo_sub_link_case_text {
    line-height: 1.5454;
    color: #FFF;
    font-weight: bold;
    font-size: 2.2em;
}
.bpo_sub_link_close {
    line-height: 1.5666;
    color: #065AAA;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .bpo_sub_link ul {
        display: block;
        width: calc(580 / 750 * 100vw);
        margin: 0 auto calc(50 / 750 * 100vw);
    }
    .bpo_sub_link ul li {
        width: 100%;
    }
    .bpo_sub_link ul li:not(:last-child) {
        margin-bottom: calc(30 / 750 * 100vw);
    }
    .bpo_sub_link_case_text {
        line-height: 1.2142;
        font-size: 2.8em;
    }
}

.inview {
    transition: transform 1s, opacity 1s;
    transition-delay: 0s;
    opacity: 0;
    transform: translateY(30px);
}
.inview.on {
    opacity: 1;
    transform: translateY(0);
}