@charset "UTF-8";

:root {
    --colorBl: #032a4d;
    --colorbl2: #004bc1;
    --colorSb: #2e86d5;
    --colorYw: #fbc11c;
    --colorGr: #ebeff5;
    --garadientB: linear-gradient(90deg, #0b6bbf, #40ecff);
    --garadient-flow: linear-gradient(to bottom, #73e0e7, #26b57d);
}

body {
    min-width: 0;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

p {
    font-size: 1.6rem;
    line-height: 1.6;
}

h1:not(.site-title):before,
h2:before {
    display: none;
}

section:not(#footer section, #header section, .eccube_bpo section) {
    margin: 250px 0;
}

.flex {
    display: flex;
}

h2 {
    font-size: 3rem;
    letter-spacing: 0.1rem;
    margin-bottom: 20px;
}

.viewMore {
    font-size: 1.4rem;
    color: var(--colorSb);
    text-align: right;
    font-weight: 600;
    width: fit-content;
    margin: 10px 0 0 auto;
}

.viewMore span {
    display: inline-block;
    background-color: var(--colorSb);
    width: 25px;
    height: 2px;
    margin: 0 5px;
    position: relative;
}

.viewMore span::after {
    display: inline-block;
    content: "";
    background-color: var(--colorSb);
    width: 10px;
    height: 2px;
    position: absolute;
    top: -3px;
    right: -1px;
    transform: rotate(45deg);
}

.wrapper {
    max-width: 1280px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.eccube_bpo .inner:not(#header > .inner),
.maintenance .inner:not(#header > .inner),
.inner:not(#header .inner) {
    max-width: 1280px;
    margin: 0 auto;
}

@media screen and (max-width: 1280px) {
    .eccube_bpo .inner:not(#header > .inner),
    .maintenance .inner:not(#header > .inner),
    .inner:not(#header .inner) {
        padding: 0 20px;
    }
}

/* メインビジュアル */

.mainVisual {
    position: relative;
    background-image: url(/wp-content/themes/twentynineteen/img/top/mv_2026.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 550px;
    background-position: bottom;
    margin: 120px calc(50% - 50vw) 0;
}

.mainVisual::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(/wp-content/themes/twentynineteen/img/top/mv_circle01.png), url(/wp-content/themes/twentynineteen/img/top/mv_circle02.png), url(/wp-content/themes/twentynineteen/img/top/mv_circle03.png);
    background-repeat: no-repeat;
    background-size: 140px, 150px, 170px;
    animation-name: mv_move;
    animation-duration: 6s;
    animation-delay: 0, 0, 0.3s, 0;
    animation-iteration-count: infinite;
    will-change: background-position;
    max-width: 1280px;
    top: -100px;
    right: 0;
    left: 0;
    margin: 60px auto 0;
    pointer-events: none;
}

@keyframes mv_move {
    0% {
        background-position:
            98% 34%,
            86% calc(10% + 6px),
            68% calc(4% - 6px),
            top center;
    }

    25% {
        background-position:
            98% calc(34% + 6px),
            86% 9%,
            68% calc(4% - 6px),
            top center;
    }

    50% {
        background-position:
            98% 34%,
            86% calc(10% + 6px),
            68% calc(4% + 6px),
            top center;
    }

    75% {
        background-position:
            98% calc(34% + 6px),
            86% 9%,
            68% calc(4% + 6px),
            top center;
    }

    100% {
        background-position:
            98% 34%,
            86% calc(10% + 6px),
            68% calc(4% - 6px),
            top center;
    }
}

a.button {
    background: #fff02e;
    color: #333333;
    border-radius: 50px;
    padding: 15px 60px;
    font-size: 1.6rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
    transition: 0.3s;
}

a.button:hover {
    background: var(--colorYw);
    filter: drop-shadow(0 3px 6px rgb(251, 193, 28, 0.2));
}

a.button:visited {
    color: inherit;
}

.mainVisual .mini {
    font-size: 2rem;
    margin-left: 4px;
}

.mainVisual h1 {
    font-size: 3.5rem;
    margin-bottom: 50px;
    line-height: 1.3;
}

.mainText {
    color: var(--colorBl);
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 140px;
}

span.mv_sb {
    color: var(--colorSb);
}

.intro {
    text-align: center;
}

.intro p:first-of-type {
    font-weight: 600;
    color: var(--colorSb);
    font-size: 4rem;
    line-height: 1.2;
}

/* セクション #Strengths */
#Strengths h2 {
    position: relative;
    height: 2.5em;
}

#Strengths .flex:first-of-type h2::before {
    display: block;
    width: 500px;
    height: 130px;
    background: var(--garadientB);
    border-radius: 65px;
    transform: rotate(40deg);
    position: absolute;
    z-index: -1;
    top: -300%;
    left: -85%;
}

.subTitle {
    font-size: 2rem;
}

.subTitle:first-letter {
    color: var(--colorSb);
}

#Strengths .flex:first-of-type {
    margin-bottom: 50px;
}

#Strengths .flex {
    justify-content: space-between;
}

#Strengths .flex .imgBox {
    width: 45%;
}

#Strengths .flex:nth-of-type(2) > div {
    width: calc(100% / 3 - 25px);
    border-right: 1px solid #333;
    padding-right: 40px;
    margin-right: 40px;
}

#Strengths .flex:nth-of-type(2) > div:last-of-type {
    border: none;
    padding: 0;
    margin: 0;
}

.viewMore {
    position: relative;
}

.viewMore a {
    color: var(--colorSb);
    padding-left: 20px;
}

.viewMore::before {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--colorSb);
    position: absolute;
    top: calc(100% - 18px);
    border-radius: 5px;
    opacity: 0;
    transition: 0.3s;
}

.viewMore:hover::before,
a:hover {
    opacity: 1;
}

/* セクション #Service */

.grArea {
    background-color: var(--colorGr);
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

#Service {
    position: relative;
    margin: 0;
}

#Service::before {
    display: block;
    content: "";
    background-image: var(--garadientB);
    width: 65vw;
    height: 65vw;
    border-radius: 33vw;
    position: absolute;
    z-index: 0;
    top: 0;
    left: -600px;
    transform: rotate(270deg);
    max-width: 950px;
    max-height: 950px;
}

#Service .inner {
    position: relative;
    padding-top: 20%;
}

#Service .flex {
    justify-content: flex-start;
    align-items: center;
}

#Service h2 {
    color: #fff;
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
}

#Service h2::before {
    display: block;
    content: "Service";
    background: none;
    color: var(--colorBl);
    font-size: 8rem;
    width: fit-content;
    height: fit-content;
    position: absolute;
    z-index: -1;
    top: -81px;
}

.serviceBox {
    margin-right: 200px;
}

.serviceBox p {
    color: #fff;
}

.serviceBox p:first-of-type {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.serviceList ul {
    font-size: 2rem;
}

.serviceList ul li {
    display: flex;
    align-items: center;
}

.serviceList ul li:not(li:last-of-type) {
    margin-bottom: 50px;
}

.serviceList ul li:before {
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--colorSb);
    border-top: 2px solid var(--colorSb);
    transform: rotate(45deg);
    margin-right: 20px;
}

.serviceList ul li:hover a {
    color: var(--colorSb);
}

.serviceList ul li:nth-child(2),
.serviceList ul li:nth-child(5) {
    margin-left: 20px;
}

.serviceList ul li:nth-child(3),
.serviceList ul li:nth-child(4) {
    margin-left: 40px;
}

.serviceList ul li a {
    color: #333;
}

/* セクション #Work */

#Work {
    margin: 300px 0 0;
    padding-bottom: 200px;
}

#Work h3 {
    font-size: 1.6rem;
}

#Work .inner > div {
    margin-bottom: 60px;
}

#Work .viewMore {
    margin: 5px 0 0 auto;
}

#Work .inner .text {
    margin-bottom: 50px;
    width: fit-content;
}

.workimg {
    margin: 10px 20px 10px 0;
}

.workimg img {
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.3));
    border-radius: 10px;
}

.slider {
    overflow: visible;
}

.slider {
    margin: 0 calc(50% - 50vw) 0 0;
}

.slick-prev,
.slick-next {
    opacity: 1;
    top: -30px !important;
    right: 0 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 25px;
    border: 1px solid var(--colorSb) !important;
    border-radius: 25px;
}

.slick-prev {
    left: 1140px !important;
}

.slick-next {
    left: 1200px !important;
}

.slick-next:before,
.slick-prev:before {
    font-family: "Noto Sans JP" !important;
    opacity: 1 !important;
    color: var(--colorSb) !important;
    font-size: 18px !important;
}

.slick-arrow.slick-disabled {
    border: solid 1px #ccc !important;
    cursor: inherit;
}

.slick-arrow.slick-disabled::before {
    color: #ccc !important;
}

.slider-slide::before {
    content: "";
    color: var(--colorSb);
    font-size: 2rem;
    position: absolute;
    z-index: 1;
    top: -10px;
}

.slider-slide:nth-child(1)::before {
    content: "01";
}

.slider-slide:nth-child(2)::before {
    content: "02";
}

.slider-slide:nth-child(3)::before {
    content: "03";
}

.slider-slide:nth-child(4)::before {
    content: "04";
}

.slider-slide:nth-child(5)::before {
    content: "05";
}
.slider-slide:nth-child(6)::before {
    content: "06";
}
.slider-slide:nth-child(7)::before {
    content: "07";
}

#Onestop h2,
#Partner h2 {
    position: relative;
}

#Onestop .flex,
#Partner .flex {
    gap: 100px;
}
#Onestop .flex > div:first-child {
    max-width: 450px;
}
@media screen and (max-width: 767px) {
    #Onestop .flex > div:first-child {
        max-width: none;
    }
}

/* #News */

#News .flex > div:first-of-type {
    width: 200px;
    margin-right: 180px;
}

#News .flex > div:last-of-type {
    width: calc(100% - 200px);
}

#News li {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

#News li:last-of-type {
    border-bottom: none;
}

#News li a {
    color: #333;
}

@media screen and (max-width: 1280px) {
    .c-header {
        width: 100%;
    }

    .wrapper {
        padding: 0;
    }

    .inner:not(#header .inner) {
        padding: 0 20px;
    }

    .mainVisual {
        margin: 120px 0;
        padding: 0 20px;
    }

    #Strengths .flex:first-of-type h2::before {
        top: -200px;
        left: -350px;
    }

    .grArea {
        margin: 0;
    }

    #Service .inner {
        padding-top: 15%;
    }

    #Service::before {
        left: -300px;
        width: 700px;
        height: 700px;
        border-radius: 350px;
    }

    #Work .inner {
        padding: 0 0 0 20px;
    }

    .slider {
        margin: 0 0 60px 0;
    }

    .slick-prev {
        left: auto !important;
        right: 160px !important;
    }

    .slick-next {
        left: auto !important;
        right: 100px !important;
    }
}

@media screen and (min-width: 1281px) {
    body.home .slider-slide {
        width: fit-content !important;
    }
}

@media screen and (max-width: 767px) {
    .mainVisual {
        background-size: cover;
        padding: 0 20px;
        margin: 90px 0;
        background-position-x: right;
        height: 300px;
        top: 0;
    }

    .mainVisual::after {
        background-image: none;
    }

    .mainVisual h1 {
        font-size: 5.2vw;
    }

    .mainVisual .mini {
        font-size: 4vw;
        margin-left: 1px;
    }

    .mainText {
        padding: 0;
    }

    a.button {
        position: absolute;
        bottom: -20px;
    }

    section {
        margin: 100px 0;
    }

    h2 {
        font-size: 2.5rem;
    }

    .subTitle {
        font-size: 1.6rem;
    }

    .flex {
        /* 
        display: block;
        */
    }

    .intro {
        padding: 0 20px;
    }

    .intro br {
        display: none;
    }

    .intro p:first-of-type {
        font-size: 2rem;
        margin-bottom: 5px;
    }

    #Strengths h2 {
        height: auto;
    }

    #Strengths .flex .imgBox {
        width: 100%;
        margin-top: 20px;
    }

    #Strengths .flex:nth-of-type(2) > div {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #333;
        padding: 0 0 20px 0;
        margin: 0 0 20px 0;
    }

    .grArea {
        overflow-y: hidden;
    }

    #Service .inner {
        padding-top: 100px;
    }

    #Service h2 {
        font-size: 1.6rem;
    }

    #Service h2::before {
        top: -63px;
        font-size: 6rem;
    }

    #Service::before {
        width: 150vw;
        height: 150vw;
        border-radius: 100vw;
        left: -50vw;
        top: -70vw;
        transform: rotate(90deg);
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    }

    .serviceBox {
        margin: 0 0 30px 0;
    }

    .serviceBox p {
        filter: drop-shadow(1px 1px 1px rgba(3, 42, 77, 0.4));
    }

    .serviceBox p:first-of-type {
        font-size: 2.5rem;
    }

    .serviceList {
        margin-top: 50px;
    }

    .serviceList ul li,
    .serviceList ul li:nth-child(2),
    .serviceList ul li:nth-child(3),
    .serviceList ul li:nth-child(4),
    .serviceList ul li:nth-child(5) {
        margin-left: 0;
    }

    .serviceList ul li:not(li:last-of-type) {
        margin-bottom: 30px;
    }

    .serviceList ul li:before {
        opacity: 1;
        order: 1;
        margin: 0 0 0 10px;
    }
    .slick-next {
        right: 10px !important;
    }

    .slick-prev {
        right: 70px !important;
    }

    #Work {
        margin: 100px 0 0 0;
        padding-bottom: 50px;
    }

    #Work .inner .text {
        margin-bottom: 30px;
    }

    #Partner .flex {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
    }

    #Partner .flex div:first-child {
        order: 2;
    }

    #News .flex > div:last-of-type {
        width: 100%;
    }

    #News .flex > div:first-of-type {
        width: 100%;
        margin: 0;
    }

    #News .viewMore {
        margin: 0;
        width: 100%;
    }
}

/* ************************************************************

versionup ,maintenance

************************************************************ */

/*----------------------------

ページ基本設定

----------------------------*/

.servicepage {
    margin-top: 90px;
}

.servicepage p {
    text-align: justify;
}

.servicepage section {
    margin: 150px 0;
}

@media screen and (max-width: 767px) {
    .servicepage {
        margin-top: 65px;
    }
    .servicepage section {
        margin: 100px 0;
    }
}

/*----------------------------

MVエリア
.mv

----------------------------*/

/*///////////////
MV　基本レイアウト
///////////////*/
.servicepage#update .mv {
    background: url(../img/update/back_blue.jpg);
    /* 
    margin: 0 calc(50% - 50vw);
    padding: 100px calc(50vw - 50%);
    */
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}
.servicepage#maintenance .mv {
    background: url(../img/maintenance/securityMV.png) center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

@media screen and (max-width: 767px) {
    .servicepage .mv {
        padding: 50px 0;
    }
    .servicepage#maintenance .mv {
        background: url(../img/maintenance/securityMV_SP.png) center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 50px 0 50%;
    }
}

.servicepage .mv > .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.servicepage .mv > .flex > .box1 {
    flex: calc(100% - 570px) 0 1;
}

@media screen and (max-width: 1280px) {
    .servicepage .mv > .flex > .box1 {
        flex: 48% 0 1;
    }
}

@media screen and (max-width: 767px) {
    .servicepage .mv > .flex > .box1 {
        flex: 100% 0 1;
        margin-bottom: 20px;
    }
}

.servicepage .mv > .flex > .img {
    flex: 530px 0 1;
}

@media screen and (max-width: 1280px) {
    .servicepage .mv > .flex > .img {
        flex: 48% 0 1;
    }
}

@media screen and (max-width: 767px) {
    .servicepage .mv > .flex > .img {
        flex: 100% 0 1;
    }
}

/*///////////////
MV　左側　文言エリア
///////////////*/

.servicepage .mv h1 {
    line-height: 1;
    color: #fff;
}

.servicepage .mv h1 {
    font-size: 3.6rem;
}

@media screen and (max-width: 767px) {
    .servicepage .mv h1 {
        font-size: 7vw;
    }
}

.servicepage .mv h1 span {
    font-size: 2.4rem;
}

.servicepage .mv .flex.title {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.servicepage .mv .flex.pointbox {
    display: flex;
    align-items: center;
}
.flex.pointbox div:nth-of-type(2) {
    margin-right: 10px;
}

.servicepage .mv .flex.pointbox .point img {
    width: 150px;
}

.servicepage .flex.pointbox {
    margin: 20px 0;
}

.servicepage .flex.pointbox img {
    width: 100px;
}

.servicepage .mv .point .comment {
    position: static;
    background: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 10px 0 -10px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 400px) {
    .servicepage .mv .point .comment {
        font-size: 2.5vw;
        padding: 5px;
        text-align: center;
        margin-bottom: 5px;
    }
}

.servicepage .mv .point .flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.servicepage .mv .point .big {
    font-size: 3.5rem;
    font-weight: 600;
    padding-bottom: 6px;
    margin-right: 5px;
}

@media screen and (max-width: 400px) {
    .servicepage .mv .point .big {
        font-size: 7vw;
        padding: 0;
        line-height: 1;
    }
}

.servicepage .mv .point .small {
    font-weight: 600;
    line-height: 1.1;
    font-size: 1.4rem;
}

.servicepage .box1 p {
    margin: 20px 0;
    color: #fff;
}

.servicepage .btn.tel {
    margin-left: 10px;
}

.servicepage .btn.tel a {
    line-height: 1;
    text-align: center;
    background: #fff;
    flex-direction: column;
    position: relative;
    padding-left: 15px;
}
.servicepage .btn.tel a::before {
    display: inline-block;
    background: url(../img/update/icon_tel.png) center center;
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    background-size: contain;
    left: 10px;
}

.servicepage .btn.tel a span {
    font-size: 1.2rem;
}

.servicepage .btn a {
    display: inline-block;
    background: #fff02e;
    color: #333;
    font-weight: 600;
    font-size: 1.6rem;
    border: 4px solid #fff;
    border-radius: 100px;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.7));
    width: 200px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.servicepage .btn.tel a span:last-of-type {
    font-size: 2rem;
    margin-top: 3px;
}

@media screen and (max-width: 767px) {
    .servicepage .btn {
        text-align: center;
    }
    .servicepage .flex.btnarea,
    .servicepage .btn a {
        display: flex;
        width: 100%;
    }
    .servicepage .mv .flex.pointbox .point img,
    .servicepage .flex.pointbox img {
        max-width: auto;
    }
    .servicepage .flex.btnarea .btn {
        width: 100%;
    }
}

/*///////////////
MV　右側　画像エリア
///////////////*/
.servicepage .mv > .flex > .img img {
    width: 100%;
    max-width: 100%;
}

/*----------------------------

カスタマイズ機能もバージョンアップ
#problem

----------------------------*/
.servicepage #problem {
    background: #f4f4f4;
    /* 
    margin: 0 calc(50% - 50vw);
    padding: 120px calc(50vw - 50%) 30px;
    */
    margin: 0;
    padding: 120px 0 30px;
    text-align: center;
}

.servicepage #problem h2 {
    margin-bottom: 5px;
    color: #1639ac;
}

@media screen and (max-width: 767px) {
    .servicepage #problem h2 {
        text-align: justify;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
}

.servicepage #problem h2::before {
    display: block;
    content: "";
    width: 50px;
    height: 50px;
    background: url(../img/update/icon_01.png) center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto 10px;
}

@media screen and (max-width: 767px) {
    .servicepage #problem h2::before {
        position: absolute;
        top: -40px;
        left: calc(50% - 15px);
        width: 30px;
        height: 30px;
    }
}

.servicepage #problem .subTitle {
    text-align: center;
    font-weight: 600;
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    .servicepage #problem .subTitle {
        text-align: justify;
    }
}

.servicepage #problem .subTitle:first-letter {
    color: inherit;
}

.servicepage #problem p {
    max-width: 800px;
    margin: 10px auto;
}

.servicepage #problem .problemList.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;
}

.servicepage #problem .problemList.flex .problemItem {
    flex: calc(100% / 4 - 30px) 0 1;
    margin: 0 0 10px;
    text-align: left;
    background: #fff;
    padding: 30px 20px 60px;
    border-radius: 10px;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
    position: relative;
}
.servicepage#maintenance #problem .problemList.flex .problemItem {
    flex: calc(100% / 3 - 30px) 0 1;
    margin: 0 0 10px;
    text-align: left;
    background: #fff;
    padding: 30px 20px 60px;
    border-radius: 10px;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
    position: relative;
}

.servicepage #problem .problemItem p.genre {
    background: #000;
    color: #fff;
    text-align: center;
    position: absolute;
    padding: 5px 10px;
    top: 0;
    left: 0;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .servicepage #problem .problemList.flex .problemItem {
        flex: calc(100% / 2 - 20px) 0 1;
        margin: 0 0 40px;
    }
}

@media screen and (max-width: 767px) {
    .servicepage #problem .problemList.flex .problemItem {
        flex: calc(100% / 2 - 10px) 0 1;
        margin: 0 0 20px;
        padding: 30px 20px;
    }
    .servicepage #problem .problemList.flex {
        flex-direction: column;
    }
}

@media screen and (max-width: 599px) {
    .servicepage #problem .problemList.flex .problemItem {
        flex: 100% 0 1;
        padding: 30px 20px;
    }
}

.servicepage .problemItem div {
    margin-bottom: 20px;
    text-align: center;
}

.servicepage .problemItem div:first-of-type {
    height: 100px;
    margin: 20px 0 0 0;
}

.servicepage .problemItem .text {
    text-align: left;
}

.servicepage #problem .problemList.flex .problemItem li {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    line-height: 1.6;
    margin: 0 auto 15px;
    position: relative;
    padding-left: 25px;
    max-width: 240px;
}

.servicepage .problemItem .text li::before {
    display: inline-block;
    content: "";
    width: 10px;
    height: 15px;
    border-bottom: 3px solid #ef5661;
    border-right: 3px solid #ef5661;
    transform: rotate(45deg);
    position: absolute;
    left: 0;
}

.servicepage #problem .line {
    width: 1px;
    background: #333;
    height: 200px;
    margin: 50px auto 0;
}

.servicepage #problem .line + p {
    margin-top: calc(-100px - 1em);
    max-width: none;
    background: #f4f4f4;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

/*----------------------------

構築から運用サポートまで、最適な解決策を。
#solution

----------------------------*/
.servicepage #solution > .inner.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.servicepage #solution > .inner.flex + .inner.flex {
    margin-top: 70px;
}

.servicepage #solution .text {
    flex: calc(100% - 650px) 0 1;
}

@media screen and (max-width: 1024px) {
    .servicepage #solution .text {
        flex: 100% 0 1;
        margin-bottom: 65px;
    }
}

.servicepage #solution h2 {
    line-height: 1.6;
}
@media screen and (max-width: 767px) {
    .servicepage #solution h2 br {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    .servicepage #solution h2 {
        text-align: justify;
    }
}

.servicepage #solution h2 span {
    background: var(--colorbl2);
    color: #ffffff;
    color: var(--colorYw);
    color: #fff02e;
    padding: 0 10px;
    letter-spacing: 0.5rem;
}

.servicepage #solution .text .sub {
    color: #032a4d;
    color: var(--colorbl2);
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.servicepage #solution .ver4 {
    flex: 490px 0 0;
    /* 
    background: url(../img/update/back.png) no-repeat;
    background-size: 100% 100%;
    */
    background: #eee;
    border-radius: 10px;
    border: solid 1px #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    padding: 0 30px 50px;
}

@media screen and (max-width: 1024px) {
    .servicepage #solution .ver4 {
        flex: 100% 0 1;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
}

@media screen and (max-width: 767px) {
    .servicepage #solution .ver4 {
        padding: 0 10px 50px;
    }
}

.servicepage .ver4 h3 {
    font-size: 2rem;
    background: var(--garadientB);
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    border-radius: 50px;
    letter-spacing: 0.1rem;
    margin: 0 auto;
    transform: translate(0px, -25px);
    max-width: 300px;
}

.servicepage .ver4 ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    margin: 15px 0 -30px;
    font-size: 1.4rem;
}

@media screen and (max-width: 1024px) {
    .servicepage .ver4 ul {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .servicepage .ver4 ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 599px) {
    .servicepage .ver4 ul {
        grid-template-columns: 1fr 1fr;
    }
}

.servicepage .ver4 li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 15px;
    margin: 0 0 30px;
    font-weight: 600;
    line-height: 1.6;
}

.servicepage .ver4 li img {
    margin-bottom: 5px;
}

/*----------------------------

開発/支援事例
#Work

----------------------------*/
.servicepage #Work {
    padding-bottom: 0;
}

.servicepage #Work > .inner {
}

@media screen and (max-width: 1280px) {
    .servicepage #Work > .inner {
        padding: 0 20px 0;
    }
}

/*///////////////
スライダー設定
///////////////*/

@media screen and (min-width: 1281px) {
    .servicepage #Work .slider-slide {
        width: fit-content !important;
    }
}

@media screen and (max-width: 1280px) {
    .servicepage #Work .slider-slide {
        width: auto;
    }
}

.servicepage #Work .slider-slide::before {
    content: "" !important;
}

.servicepage #Work .slider .slick-prev,
.servicepage #Work .slider .slick-next {
    border: 1px solid var(--colorSb) !important;
}

.servicepage #Work .slick-arrow.slick-disabled {
    border: solid 1px #ccc !important;
    cursor: inherit;
}

.servicepage #Work .slick-arrow.slick-disabled::before {
    color: #ccc !important;
}

@media screen and (max-width: 1280px) {
    .servicepage #Work .slider {
        margin-left: calc(((100vw - 100%) / 2) * -1);
        margin-right: calc(((100vw - 100%) / 2) * -1);
    }
}

@media screen and (max-width: 1280px) {
    .servicepage #Work .slick-list {
        padding-left: 20px;
    }
}

/*----------------------------

バージョンアップの流れ
#flow

----------------------------*/

.servicepage #flow h2 {
    font-size: 3rem;
    font-weight: 900;
    position: relative;
    text-shadow: 0 -2px 0 #fff;
    margin-bottom: 20px;
}

.servicepage #flow h2::before {
    content: "FLOW";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: #9cd3f1;
    font-size: 5rem;
    background: none;
    width: auto;
    height: auto;
    line-height: 1;
    transform: translate(0, -50%);
    margin: 0;
}

/*///////////////
フローチャート
縦のバー
///////////////*/
.servicepage #flow .flowMain {
    position: relative;
    padding-left: 80px;
}

@media screen and (max-width: 767px) {
    .servicepage #flow .flowMain {
        padding-left: 30px;
    }
}

.servicepage #flow .flowMain::before {
    content: "";
    width: 60px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--garadient-flow);
    border-radius: 0 0 50px 50px;
}

@media screen and (max-width: 767px) {
    .servicepage #flow .flowMain::before {
        width: 10px;
    }
}

/*///////////////
フローチャート
基本レイアウト
///////////////*/
.servicepage #flow .flowMain > ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
    .servicepage #flow .flowMain > ul > li {
        align-items: inherit;
    }
}

.servicepage #flow .flowMain > ul > li:last-child {
    margin-bottom: 0;
}

/*///////////////
フローチャート
h3　左　見出し
///////////////*/
.servicepage #flow .flowMain > ul > li h3 {
    flex: 135px 0 0;
    border: solid 2px #73e0e7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.6rem;
    border-radius: 5px;
    padding: 10px;
    min-height: 130px;
}

@media screen and (max-width: 767px) {
    .servicepage #flow .flowMain > ul > li h3 {
        flex: 100% 0 1;
        margin-bottom: 20px;
    }
}

.servicepage #flow .flowMain > ul > li h3 span.line {
    display: block;
    width: 100%;
    height: 1px;
    background: #a0a0a0;
    margin: 10px 0;
}

.servicepage #flow .flowMain > ul > li:nth-child(2) h3 {
    border: solid 2px #6ad8e5;
}

.servicepage #flow .flowMain > ul > li:nth-child(3) h3 {
    border: solid 2px #63d4da;
}

.servicepage #flow .flowMain > ul > li:nth-child(4) h3 {
    border: solid 2px #59d1c7;
}

.servicepage #flow .flowMain > ul > li:nth-child(5) h3 {
    border: solid 2px #4ec6ab;
}

.servicepage #flow .flowMain > ul > li:nth-child(6) h3 {
    border: solid 2px #26b57d;
}

/*///////////////
フローチャート
中央の線
///////////////*/
.servicepage #flow .flowMain > ul > li .flowbar {
    flex: 115px 0 1;
    position: relative;
}

@media screen and (max-width: 1024px) {
    .servicepage #flow .flowMain > ul > li .flowbar {
        flex: 5% 0 1;
    }
}

@media screen and (max-width: 767px) {
    .servicepage #flow .flowMain > ul > li .flowbar {
        display: none;
    }
}

.servicepage #flow .flowMain > ul > li .flowbar::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #a0a0a0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.servicepage #flow .flowMain > ul > li .flowbar::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #a0a0a0;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translate(0, -50%);
}

/*///////////////
フローチャート
右　テキストエリア
///////////////*/
.servicepage #flow .flowMain > ul > li .text {
    flex: calc(100% - 300px) 0 1;
}

@media screen and (max-width: 1024px) {
    .servicepage #flow .flowMain > ul > li .text {
        flex: calc(100% - 5% - 155px) 0 1;
    }
}

@media screen and (max-width: 767px) {
    .servicepage #flow .flowMain > ul > li .text {
        flex: 100% 0 1;
    }
}

.servicepage #flow .flowMain > ul > li .text h4 {
    font-size: 2rem;
    color: var(--colorbl2);
}

/*----------------------------

EC-CUBEのバージョンアップならお任せください
#Versionup

----------------------------*/
.servicepage #Versionup {
    background: url(../img/update/back_green.jpg) no-repeat;
    background-size: cover;
    padding: 100px 0;
}

.servicepage #Versionup h2 {
    text-align: center;
    font-weight: 600;
}

@media screen and (max-width: 599px) {
    .servicepage #Versionup h2 {
        margin-bottom: 50px;
    }

    .servicepage #Versionup h2 br {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    .servicepage #Versionup h2 {
        text-align: justify;
    }
}
.servicepage #Versionup .slider .slick-prev,
.servicepage #Versionup .slider .slick-next {
    border: 1px solid #333 !important;
}

.servicepage #Versionup .slider .slick-next:before,
.servicepage #Versionup .slider .slick-prev:before {
    color: #333 !important;
}

/*///////////////
CSSの競合対策
///////////////*/
.servicepage #Versionup .slider-slide::before {
    content: "" !important;
}

/*///////////////
スライダー設定
///////////////*/
.servicepage #Versionup .slider {
    margin: 0 calc(((100vw - 100%) / 2) * -1);
    margin-bottom: 30px;
}

.servicepage #Versionup .slider .slider-slide {
    margin: 20px;
}

@media screen and (max-width: 599px) {
    .servicepage #Versionup .slider .slider-slide {
        margin: 20px 10px;
    }
}

.servicepage #Versionup .slider .slider-slide > p {
    margin: auto;
}

.servicepage #Versionup .slider .slider-slide .workimg {
    margin: 0 0 10px;
    text-align: center;
}

.servicepage #Versionup .slider .slider-slide .workimg img {
    margin: auto;
    border: solid 3px #fff;
    border-radius: 3px;
    width: 100%;
    max-width: 450px;
}

/*///////////////
CVボタン
///////////////*/
.servicepage #Versionup .btn {
    max-width: 360px;
    margin: auto;
}

.servicepage #Versionup .btn a {
    text-align: center;
    width: 100%;
}

/*----------------------------

よくある質問
#qa

----------------------------*/
.servicepage #qa {
}

.servicepage #qa > .inner.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.servicepage #qa > .inner.flex > .qaTitle {
    flex: 200px 0 0;
}

@media screen and (max-width: 767px) {
    .servicepage #qa > .inner.flex > .qaTitle {
        flex: 100% 0 0;
        text-align: center;
    }
}

.servicepage #qa > .inner.flex > .qaMain {
    flex: calc(100% - 240px) 0 1;
}

@media screen and (max-width: 767px) {
    .servicepage #qa > .inner.flex > .qaMain {
        flex: 100% 0 1;
    }
}

/*///////////////
FAQ　基本レイアウト
///////////////*/
.servicepage #qa .cp_qa .cp_actab input[type="checkbox"] + label::after {
    content: "";
}

.servicepage #qa .cp_qa {
    font-size: 1.6rem;
    text-align: justify;
    border: none;
    margin-top: -20px;
}

.servicepage #qa .cp_qa .question {
    position: relative;
    margin: 20px 0;
}

/*///////////////
質問　レイアウト
///////////////*/
.servicepage #qa .cp_qa .question label {
    padding: 15px 70px 15px 40px;
    position: relative;
    border-top: none;
}

@media screen and (max-width: 599px) {
    .servicepage #qa .cp_qa .question label {
        padding: 15px 50px 15px 0;
        text-indent: 35px;
    }
}

.servicepage #qa .cp_qa .cp_actab input:checked ~ label {
    color: inherit;
}

.servicepage #qa .cp_qa .question label:hover {
    color: inherit;
}

/*---
Qアイコン
---*/
.servicepage #qa .cp_qa .question label span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    color: var(--colorbl2);
    font-size: 30px;
    font-weight: 600;
}

@media screen and (max-width: 599px) {
    .servicepage #qa .cp_qa .question label span {
        top: 20px;
        text-indent: 0;
    }
}

/*---
矢印アイコン
---*/
/* .servicepage #qa .cp_qa .question label::before {
    content: "";
    width: 30px;
    height: 30px;
    background: #eee;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* @media screen and (max-width:599px) {
    .servicepage #qa .cp_qa .question label::before {
        right: 3px;
    }
} */

.servicepage #qa .cp_qa .question label::after {
    content: "";
    position: absolute;
    right: 29px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-bottom: solid 2px #666;
    border-right: solid 2px #666;
    transform: translate(0, 50%) rotate(45deg);
}

@media screen and (max-width: 599px) {
    .servicepage #qa .cp_qa .question label::after {
        right: 12px;
    }
}

.servicepage #qa .cp_qa .question input[type="checkbox"]:checked ~ label::after {
    transform: translate(0, 100%) rotate(-135deg);
}

/*///////////////
回答　レイアウト
///////////////*/
.servicepage #qa .cp_qa .question .cp_actab-content {
    background: #fff;
    color: inherit;
    opacity: 0;
    transition: 0.3s;
    padding: 0 70px 0 40px;
    height: 0;
    overflow: hidden;
}

@media screen and (max-width: 599px) {
    .servicepage #qa .cp_qa .question .cp_actab-content {
        padding: 0;
    }
}

.servicepage #qa .cp_qa .question input[type="checkbox"]:checked ~ .cp_actab-content {
    opacity: 1;
    padding: 15px 70px 30px 40px;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 30px;
    border-bottom: dotted 1px #aaa;
    height: auto;
}

@media screen and (max-width: 599px) {
    .servicepage #qa .cp_qa .question input[type="checkbox"]:checked ~ .cp_actab-content {
        padding: 0;
    }
}

.servicepage #qa .cp_qa .question .cp_actab-content p {
}

@media screen and (max-width: 599px) {
    .servicepage #qa .cp_qa .question .cp_actab-content p {
        margin: 10px 0;
    }
}
/*----------------------------

保守ページ
#maintenance

----------------------------*/
#maintenance .subTitle {
    font-weight: bold;
}
#maintenance h4 {
    font-size: 1.8rem;
}

/*---------
 対応事例 
 ----------*/

#maintenance #casestudy .casestudy_list li {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    align-items: center;
    border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
}
#maintenance #casestudy .casestudy_list li h3,
#maintenance #casestudy .casestudy_list li p {
    width: calc(100% / 2);
    position: relative;
    padding-left: 35px;
    font-size: 1.6rem;
}
#maintenance #casestudy .casestudy_list li p::before {
    display: inline-block;
    content: "";
    width: 10px;
    height: 15px;
    border-bottom: 3px solid #20bb66;
    border-right: 3px solid #20bb66;
    transform: rotate(45deg);
    position: absolute;
    left: 0;
    top: calc(50% - 9px);
}
#maintenance #casestudy .casestudy_list li h3::before {
    display: inline-block;
    content: "";
    background: url(/wp-content/themes/twentynineteen/img/maintenance/icon_attention.png) no-repeat center center;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: -4px;
}

#maintenance #casestudy .casestudy_list li .arrow {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 1em;
    height: 1em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(-25%) rotate(45deg);
    margin: 0 50px;
}
@media screen and (max-width: 767px) {
    #maintenance #casestudy .casestudy_list li {
        flex-direction: column;
    }
    #maintenance #casestudy .casestudy_list li h3 {
        margin-bottom: 10px;
    }
    #maintenance #casestudy .casestudy_list li h3,
    #maintenance #casestudy .casestudy_list li p {
        width: 100%;
    }
    #maintenance #casestudy .casestudy_list li .arrow {
        display: none;
    }
    #maintenance #casestudy .casestudy_list li p::before {
        left: 8px;
    }
}

/* --------
#reason .inner
-----------*/
#maintenance #reason .inner {
    max-width: 1000px;
}
#maintenance #reason .img {
    margin: 20px auto;
    /* 
    width: 80%;
    */
    text-align: center;
}
#maintenance #reason .img div {
    margin-bottom: 10px;
}
#maintenance #reason .mini {
    font-size: 1.2rem;
    text-align: end;
}
@media screen and (max-width: 767px) {
    #maintenance #reason .img {
        margin: 10px 0 0 0;
        width: 100%;
    }
}

/*---------
 プラン
 ----------*/
#maintenance #plan .inner {
    max-width: 1000px;
}

#maintenance #plan h3 {
    background: var(--colorbl2);
    color: #fff;
    padding: 20px;
    font-weight: normal;
    width: 40%;
    border-radius: 5px 10px 0 0;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
#maintenance #plan .planlist ul {
    border-radius: 0 10px 2px;
    margin-bottom: 50px;
    padding: 50px;
    border: 2px solid var(--colorbl2);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#maintenance #plan .planlist ul li {
    display: flex;
    flex-direction: column;
    margin: 10px 0 20px;
    width: calc(50% - 30px);
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

#maintenance #plan .planlist ul li h4 {
    margin-bottom: 5px;
    color: #0b3373;
}
#maintenance #plan .planlist ul li h4::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(/wp-content/themes/twentynineteen/img/maintenance/icon_security.png) no-repeat center center;
    background-size: contain;
    vertical-align: bottom;
    margin-right: 10px;
}
#maintenance #plan .planlist ul li p {
    padding-left: 35px;
}
@media screen and (max-width: 767px) {
    #maintenance #plan h3 {
        width: 100%;
        border-radius: 10px 10px 0 0;
    }
    #maintenance #plan .planlist ul {
        border-radius: 0 0 10px 10px;
    }
    #maintenance #plan .planlist ul li {
        width: 100%;
    }
    #maintenance #plan .planlist ul li:last-of-type {
        border-bottom: none;
    }
}
/*----------------------------

運用アウトソースページ
#bpo

----------------------------*/
#bpo .mv {
    background: url(../img/bpo/bpo_mv_pc.jpg) 65% 35%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    min-height: 492px;
    height: 30vw;
}
@media screen and (max-width: 915px) {
    #bpo .mv {
        background: url(../img/bpo/bpo_mv_sp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 40px 0;
        min-height: 350px;
        height: 100vw;
        background-position: top center;
    }
}
#bpo h1 {
    color: #111;
    line-height: 1.3;
}
#bpo .box1 {
    padding: 6.5vw 7px 0;
}
@media screen and (max-width: 470px) {
    #bpo .box1 {
        padding: 0;
    }
}

#bpo div.flex.title {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}
#bpo .box1 .flex.title h1 {
    text-align: center;
    font-size: 2.2vw;
}
@media screen and (max-width: 1280px) {
    #bpo .box1 .flex.title {
        align-items: center;
        justify-content: center;
    }
}
@media screen and (max-width: 915px) {
    #bpo .box1 .flex.title h1 {
        font-size: 4.3vw;
    }
    #bpo .box1 div.flex.title {
        margin-bottom: 2.5vw;
        display: flex;
        gap: 15px;
    }
    #bpo div.inner.flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media screen and (max-width: 767px) {
    #bpo .box1 div.flex.title {
        flex-direction: row;
    }
}
@media screen and (max-width: 550px) {
    #bpo .box1 div.title_img {
        width: 10%;
    }
}
#bpo .box1 .flex ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95%;
}
@media screen and (max-width: 1280px) {
    #bpo .box1 .flex ul {
        width: 100%;
    }
}
#bpo .box1 .flex ul li {
    width: calc(100% / 2 - 10px);
    text-align: center;
    background: var(--colorbl2);
    color: #fff;
    font-size: 1.8rem;
    margin: 5px;
    padding: 10px 0;
    border-radius: 10px;
}
@media screen and (max-width: 767px) {
    #bpo .box1 .flex ul li {
        font-size: 2.9vw;
    }
}

#bpo #intro ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 6%;
}
#bpo #intro ul li {
    width: calc(100% / 3 - 10px);
    text-align: center;
    color: #1c9a6f;
}
@media screen and (max-width: 1070px) {
    #bpo #intro ul li {
        width: calc(100% / 2 - 10px);
    }
}
@media screen and (max-width: 695px) {
    #bpo #intro ul li {
        width: 100%;
    }
}
@media screen and (max-width: 836px) {
    #bpo #intro ul li h2 {
        font-size: 24px;
    }
}

#bpo #intro p.bold {
    font-size: 22px;
    text-align: center;
}
@media screen and (max-width: 809px) {
    #bpo #intro p.bold br {
        display: none;
        font-size: 18px;
    }
}
@media screen and (max-width: 631px) {
    #bpo #intro p.bold br {
        font-size: 18px;
    }
}
#bpo #intro p {
    max-width: 773px;
    margin: 28px auto;
    font-size: 15px;
    font-weight: bolder;
}
@media screen and (max-width: 631px) {
    #bpo #intro p {
        font-size: 14px;
    }
}
#bpo #problem .problemList.flex .problemItem {
    flex: calc(100% / 3 - 30px) 0 1;
}
#bpo #problem .inner h2 {
    text-align: center;
}
#bpo.servicepage #solution h2 br {
    display: block;
}

#bpo #problem .inner h2 br {
    display: none;
}
@media screen and (max-width: 809px) {
    #bpo #problem .inner h2 br {
        display: block;
    }
}
#bpo .inner {
    margin: 0 auto;
}

#bpo #solution h2.linetitle {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: fit-content;
}

#bpo .bpolist.flex {
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
}
#bpo .bpolist.flex div {
    flex: 0 1 calc(100% / 3 - 20px);
    position: relative;
    margin: 20px 9px;
    border: 1px solid #ffff72;
    min-width: 262px;
    min-height: 333px;
    border-width: medium;
}

@media screen and (max-width: 1024px) {
    #bpo .bpolist.flex div {
        flex: 0 1 calc(100% / 2 - 20px);
    }
}

@media screen and (max-width: 599px) {
    #bpo .bpolist.flex div {
        flex: 0 1 100%;
    }
}

#bpo .bpolist.flex h3 {
    padding: 0 20px;
    background-color: white;
    margin-top: -42px;
}

#bpo .bpolist.flex div {
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
#bpo .bpolist.flex img {
}
#bpo .bpolist.flex li {
    position: relative;
}
#bpo .bpolist.flex li::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.5em;
    left: -1.5em;
    width: 10px;
    height: 5px;
    border-left: 2px solid #25af01;
    border-bottom: 2px solid #25af01;
    transform: rotate(-45deg);
}
#bpo .bpolist.flex h3 {
    font-size: 20px;
    font-weight: bold;
}
#bpo .bpolist.flex li {
    font-size: 14px;
    font-weight: bold;
}
@media screen and (max-width: 840px) {
    #bpo .bpolist.flex div {
        min-width: 236px;
    }
    #bpo .bpolist.flex li {
        font-size: 12.4px;
    }
}
#bpo #solution .inner .solution_text {
    font-size: 14px;
    max-width: 820px;
    padding: 25px 0;
    margin: 0 auto;
}

#bpo #casestudy .inner {
    margin: 0 auto;
    max-width: 1000px;
}

#bpo #casestudy h2 {
    color: #1639ac;
}
#bpo .casestudy_list li {
    max-width: 1000px;
}
#bpo .casestudy_list li {
    position: relative;

    margin-top: 1em;
    border: 1px solid lightgray;
    margin-bottom: 20px;
    border-width: medium;
}
#bpo .casestudy_list h3 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1em;
    padding: 0 1em;
    margin: 0;
    background-color: white;
    transform: translateY(-50%) translateX(1em);
}
#bpo .casestudy_list li {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
}
#bpo .casestudy_list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#bpo .casestudy_list h3 {
    font-size: 22px;
}
#bpo .casestudy_list p {
    font-weight: bold;
    margin: auto 10%;
    padding: 3% 0;
    font-size: 15px;
    max-width: 800px;
}
#bpo .casestudy_list img {
    width: 250px;
    height: auto;
}
@media screen and (max-width: 767px) {
    #bpo #solution .inner {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #bpo .casestudy_list img {
        width: 330px;
        height: auto;
        margin-top: 20px;
    }
    #bpo .casestudy_list div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 10px 10px;
    }
    #bpo .casestudy_list h3 {
        padding: 10px;
        font-size: 19px;
    }
}