@charset "utf-8";
body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 16px;
    color: #333;
    letter-spacing: 0.1em;
}


/*------------------------------------
共通部分
------------------------------------*/


/* お問い合わせバナー

.contact_banner {
    width: 1000px;
    height: 150px;
    margin: 0 auto;
} */

.contact_box {
    width: 240px;
    padding-top: 10px;
    text-align: center;
}

.contact_box img {}

.contact_banner {
    width: 1000px;
    height: 150px;
    margin: 0 auto 60px;
    text-align: right;
    background-image: url(../img/contact_banner_bg.png);
}

.contact_banner img {
    margin: 70px 90px 0 0;
}


/* webアイコン表示 */

.fa-window-restore:before {
    content: "";
    margin: 0;
    padding: 0 8px 2px 16px;
    ;
    background: url(../img/window-restore.png) no-repeat right center;
    background-size: 16px;
}


/* ページトップボタン */

.info {
    background-color: #addcf7;
    text-align: center;
    margin: 0 auto;
    padding: 20px 80px;
    font-size: 24px;
    line-height: 1.5em;
    color: #1d5db3
}

.info span {
    font-size: 16px;
}

.info a {
    text-decoration: none;
    color: #fff;
}

.info a:hover {
    text-decoration: none;
    color: #fff;
}

.info p {
    font-size: 14px;
    color: #000;
    line-height: 1.8em;
}

.info_btn {
    width: 290px;
    height: auto;
    padding: 15px 0;
    border-radius: 40px;
    background-color: #3f72b7;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
}

.info_btn:hover {
    width: 290px;
    height: auto;
    padding: 15px 0;
    border-radius: 40px;
    background-color: #39649e;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
}

.webinarbox img {
    width: 100%;
    max-width: 820px;
    margin: 10px auto;
}

.btn a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #;
}

.page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #3f72b7;
    border-radius: 10px 0 0 10px;
    opacity: 0.7;
    margin-bottom: 20px;
    z-index: 5;
}

.page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    border-radius: 10px 0 0 10px;
    text-align: center;
}

.page_top a:hover {
    background: #ff8800;
}

.page_top a:before {
    content: "";
    margin: 0;
    padding: 0px 10px 25px 10px;
    background-color: #fcc;
    background: url(../img/angle-up.png) no-repeat center center;
    background-size: 17px;
}


/*ページ内リンクボタン*/

.white_btn_area {
    width: 540px;
    height: 70px;
    padding: 50px 0 0 0;
    text-align: center;
    margin: 4px auto;
}

.white_btn_area_feature {
    width: 810px;
    height: 70px;
    padding: 50px 0 0 0;
    text-align: center;
    margin: 4px auto;
}

.white_btn {
    width: 240px;
    height: auto;
    padding: 25px 0;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 15px;
    float: left;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
}

a .white_btn {
    text-decoration: none;
    font-family: "Noto Sans Japanese";
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

a .white_btn:hover {
    box-shadow: none;
    margin-top: 4px;
}


/*ページ内リンクボタンここまで*/

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.price_container {
    margin: 0 auto;
    padding: 0 10px;
}

.pcnone {
    display: none;
}

.spnone {
    display: block;
}

.coming {
    padding: 30px;
    margin: -10px auto 0;
}

.midashi {
    font-family: "Noto Sans Japanese";
    font-size: 28px;
    padding: 50px 0 30px 0;
    border-bottom: solid 2px #3f72b7;
    font-weight: bold;
}

.whitearea {
    width: auto;
    background-color: #fff;
    margin: 40px 0 0 0;
    padding: 50px;
}

.whitearea h1 {
    margin-top: 30px;
    font-size: 18px;
    font-family: 'Noto Sans Japanese';
    /*padding-top: 60px;*/
}

.whitearea h2 {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.8em;
    text-align: left;
    padding-top: 0;
}

.whitearea h2 span {
    font-size: 14px;
    letter-spacing: .07em;
}

.priceimg img {
    max-width: 900px;
    /* 最大幅 */
    width: 100%;
}

.blue_midashi {
    background-color: #3f72b7;
    height: auto;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 20px;
}

.blue_midashi span {
    padding: 0 0 0 15px;
    font-family: "Noto Sans Japanese";
    font-weight: bold;
}

.darkgray_midashi {
    background-color: #738f9d;
    height: auto;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 20px;
}

.darkgray_midashi span {
    padding: 0 0 0 15px;
    font-family: "Noto Sans Japanese";
    font-weight: bold;
}

.gray_midashi {
    background-color: #ededed;
    height: auto;
    color: #333;
    padding: 10px 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

.gray_midashi span {
    padding: 0 0 0 15px;
    font-family: "Noto Sans Japanese";
    font-weight: bold;
}


/*外のボックス*/

.featurebox {
    width: 100%;
    height: auto;
    padding-bottom: 10px;
    display: block;
    clear: both;
}


/*中のボックス*/

.featurebox_s {
    width: 48%;
    float: left;
    margin-bottom: 30px;
}

.featurebox_s h2 {
    line-height: 2.0em;
}

.orange {
    color: #ed6d00;
    display: inline;
}


/*ボックスの最後*/

.last .featurebox_s {
    float: right;
}

.featureimg img {
    /* 最大幅 */
    width: 100%;
    margin-bottom: 10px;
}


/* 横幅start SP用 */

@media screen and (max-width:750px) {
    .container {
        width: 96%;
        max-width: 720px;
        margin: 0;
        /*スマホで横ずれがおきるのでぜろ
    margin: 0 2%;
    */
    }
    /*ANDO*/
    /*ページ内リンクボタン*/
    .info {
        background-color: #addcf7;
        text-align: center;
        margin: 0 auto;
        padding: 20px 20px;
        font-size: 18px;
        line-height: 1.5em;
    }
    .info p {
        /* display: none;*/
    }
    .white_btn_area {
        width: 100%;
        height: auto;
        padding: 30px 0 0 0;
        text-align: center;
        margin: 0;
    }
    .white_btn_area_feature {
        width: 100%;
        height: auto;
        padding: 30px 15px 0 0;
        text-align: center;
        margin: 0 auto;
    }
    .white_btn {
        width: 100%;
        height: auto;
        padding: 20px 0;
        border-radius: 10px;
        background-color: #fff;
        margin: 0 0 15px;
        float: none;
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
        text-decoration: none;
    }
    a {
        text-decoration: none;
    }
    a .white_btn {
        text-decoration: none;
        font-family: "Noto Sans Japanese";
        font-size: 18px;
        color: #333;
        font-weight: bold;
    }
    a .white_btn:hover {
        margin-top: 0;
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
    }
    .price_container {
        max-width: 720px;
    }
    .pcnone {
        display: block;
    }
    .spnone {
        display: none;
    }
    .midashi {
        font-size: 18px;
        padding: 30px 0 10px 0;
    }
    .whitearea {
        padding: 20px 20px 20px 20px;
        margin: 20px 0 0 0;
    }
    .whitearea h1 {
        font-size: 14px;
        font-family: 'Noto Sans Japanese';
        letter-spacing: 0.1em;
    }
    .whitearea h2 {
        font-size: 14px;
        font-weight: normal;
        line-height: 1.8em;
        text-align: left;
        padding-top: 0;
    }
    .whitearea h2 span {
        font-size: 14px;
        letter-spacing: .07em;
    }
    .coming img {
        width: 100%;
    }
}


/* 横幅 PC用 */

@media screen and (min-width:751px) {
    .container {
        width: 92%;
        max-width: 1100px;
        margin: 0 auto;
    }
    .price_container {
        max-width: 1000px;
    }
    .container-pc {
        width: 92%;
        max-width: 1002px;
        margin: 0 auto;
    }
}


/* 横幅end */


/* 非表示start SP用 */

@media screen and (max-width:750px) {
    .pc-only {
        display: none;
    }
    .featurebox {
        width: 100%;
        height: auto;
    }
    /*中のボックス*/
    .featurebox_s {
        width: 100%;
        float: none;
    }
    /*ボックスの最後*/
    .last .featurebox_s {
        float: none;
    }
}


/* 非表示 PC用 */

@media screen and (min-width:751px) {
    .sp-only {
        display: none;
    }
    .sp-nav-only {
        visibility: hidden;
        display: none;
    }
}


/* 非表示end */


/* ボタンstart */

.btn {
    margin: 20px auto 0;
    box-shadow: 15px 15px 25px -5px rgba(0, 0, 0, 0.1);
    font-family: "Noto Sans Japanese";
    font-weight: bold;
}

.btn a {
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}


/* ボタンサイズ */

@media screen and (max-width:400px) {
    .size-365 {
        width: 60%;
        height: 50px;
        border-radius: 25px;
    }
    .size-365 a {
        line-height: 50px;
        border-radius: 25px;
        font-size: 3.5vw;
    }
    .size-365_60 {
        width: 90%;
        height: 50px;
        border-radius: 25px;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .size-365_60 a {
        line-height: 50px;
        border-radius: 25px;
        font-size: 3.5vw;
    }
    .size-623 {
        width: 80%;
        height: 80px;
        border-radius: 40px;
    }
    .size-623 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 3.5vw;
        margin-top: 40px;
    }
    .size-478 {
        width: 75%;
        height: 80px;
        border-radius: 40px;
        margin-top: 20px;
    }
    .size-478 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 3.5vw;
    }
    .size-300 {
        width: 70%;
        height: 60px;
        border-radius: 30px;
    }
    .size-300 a {
        line-height: 60px;
        border-radius: 30px;
        font-size: 3.8vw;
    }
    .size-258 {
        width: 70%;
        height: 60px;
        border-radius: 30px;
    }
    .size-258 a {
        line-height: 60px;
        border-radius: 30px;
        font-size: 3.8vw;
    }
    .size-368 {
        width: 65%;
        height: 60px;
        border-radius: 30px;
    }
    .size-368 a {
        line-height: 60px;
        border-radius: 30px;
        font-size: 3.5vw;
    }
    .size-720 {
        width: 65%;
        height: 80px;
        border-radius: 40px;
    }
    .size-720 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 3.5vw;
        padding-left: 30px;
    }
}

@media screen and (min-width:401px) and (max-width:550px) {
    .size-365 {
        width: 50%;
        height: 60px;
        border-radius: 40px;
    }
    .size-365 a {
        line-height: 60px;
        border-radius: 30px;
        font-size: 3.2vw;
    }
    .size-365_60 {
        width: 365px;
        height: 60px;
        border-radius: 40px;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .size-365_60 a {
        line-height: 60px;
        border-radius: 40px;
        font-size: 20px;
    }
    .size-623 {
        width: 80%;
        height: 80px;
        border-radius: 40px;
        margin-top: 40px;
    }
    .size-623 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 3.5vw;
    }
    .size-478 {
        width: 75%;
        height: 80px;
        border-radius: 40px;
        margin-top: 30px;
    }
    .size-478 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 3.5vw;
    }
    .size-300 {
        width: 70%;
        height: 70px;
        border-radius: 35px;
    }
    .size-300 a {
        line-height: 70px;
        border-radius: 35px;
        font-size: 3.8vw;
    }
    .size-258 {
        width: 70%;
        height: 70px;
        border-radius: 35px;
    }
    .size-258 a {
        line-height: 70px;
        border-radius: 35px;
        font-size: 3.8vw;
    }
    .size-368 {
        width: 65%;
        height: 70px;
        border-radius: 35px;
    }
    .size-368 a {
        line-height: 70px;
        border-radius: 35px;
        font-size: 3.5vw;
    }
    .size-720 {
        width: 65%;
        height: 80px;
        border-radius: 40px;
    }
    .size-720 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 3.5vw;
        padding-left: 30px;
    }
}

@media screen and (min-width:551px) and (max-width:750px) {
    .size-365 {
        width: 340px;
        height: 80px;
        border-radius: 40px;
    }
    .size-365 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 22px;
    }
    .size-365_60 {
        width: 365px;
        height: 60px;
        border-radius: 40px;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .size-365_60 a {
        line-height: 60px;
        border-radius: 40px;
        font-size: 20px;
    }
    @media screen and (min-width:651px) and (max-width:750px) {
        .size-365 {
            width: 416px;
            height: 100px;
            border-radius: 50px;
        }
        .size-365 a {
            line-height: 100px;
            border-radius: 50px;
            font-size: 28px;
        }
        .size-365_60 {
            width: 365px;
            height: 60px;
            border-radius: 40px;
            margin-top: 30px;
            margin-bottom: 10px;
        }
        .size-365_60 a {
            line-height: 60px;
            border-radius: 40px;
            font-size: 20px;
        }
    }
    .size-623 {
        width: 500px;
        height: 100px;
        border-radius: 50px;
        margin-top: 50px;
    }
    .size-623 a {
        line-height: 100px;
        border-radius: 50px;
        font-size: 30px;
    }
    .size-478 {
        width: 478px;
        height: 100px;
        border-radius: 50px;
        margin-top: 30px;
    }
    .size-478 a {
        line-height: 100px;
        border-radius: 50px;
        font-size: 28px;
    }
    .size-300 {
        width: 428px;
        height: 100px;
        border-radius: 50px;
    }
    .size-300 a {
        line-height: 100px;
        border-radius: 50px;
        font-size: 28px;
    }
    .size-258 {
        width: 428px;
        height: 100px;
        border-radius: 50px;
    }
    .size-258 a {
        line-height: 100px;
        border-radius: 50px;
        font-size: 28px;
    }
    .size-368 {
        width: 378px;
        height: 96px;
        border-radius: 48px;
    }
    .size-368 a {
        line-height: 96px;
        border-radius: 48px;
        font-size: 24px;
    }
    .size-720 {
        width: 360px;
        height: 100px;
        border-radius: 50px;
    }
    .size-720 a {
        line-height: 100px;
        border-radius: 50px;
        font-size: 20px;
        padding-left: 30px;
    }
}

@media screen and (min-width:751px) {
    .size-365 {
        width: 365px;
        height: 80px;
        border-radius: 40px;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .size-365 a {
        line-height: 80px;
        border-radius: 40px;
        font-size: 20px;
    }
    .size-365_60 {
        width: 365px;
        height: 60px;
        border-radius: 40px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .size-365_60 a {
        line-height: 60px;
        border-radius: 40px;
        font-size: 20px;
    }
    .size-623 {
        width: 623px;
        height: 130px;
        border-radius: 65px;
        margin-top: 50px;
    }
    .size-623 a {
        line-height: 130px;
        border-radius: 65px;
        font-size: 29px;
    }
    .size-478 {
        width: 320px;
        height: 90px;
        border-radius: 45px;
        margin-top: 40px;
    }
    .size-478 a {
        line-height: 90px;
        border-radius: 45px;
        font-size: 20px;
    }
    .size-300 {
        width: 230px;
        height: 60px;
        border-radius: 30px;
    }
    .size-300 a {
        line-height: 60px;
        border-radius: 30px;
        font-size: 20px;
    }
    .size-258 {
        width: 210px;
        height: 58px;
        border-radius: 29px;
        margin-bottom: 20px;
    }
    .size-258 a {
        line-height: 58px;
        border-radius: 29px;
        font-size: 18px;
    }
    .size-368 {
        width: 368px;
        height: 68px;
        border-radius: 34px;
    }
    .size-368 a {
        line-height: 68px;
        border-radius: 34px;
        font-size: 20px;
    }
    .size-720 {
        width: 460px;
        height: 110px;
        border-radius: 55px;
    }
    .size-720 a {
        line-height: 110px;
        border-radius: 55px;
        font-size: 24px;
        padding-left: 30px;
    }
    @media screen and (min-width:901px) {
        .size-478 {
            width: 478px;
            height: 120px;
            border-radius: 60px;
            margin-top: 40px;
        }
        .size-478 a {
            line-height: 120px;
            border-radius: 60px;
            font-size: 25px;
        }
        .size-300 {
            width: 300px;
            height: 70px;
            border-radius: 35px;
            margin-bottom: 10px;
        }
        .size-300 a {
            line-height: 70px;
            border-radius: 35px;
            font-size: 22px;
            margin: 20px 0 0 0;
        }
        .size-258 {
            width: 258px;
            height: 58px;
            border-radius: 29px;
        }
        .size-258 a {
            line-height: 58px;
            border-radius: 29px;
            font-size: 18px;
        }
        .size-720 {
            width: 620px;
            height: 130px;
            border-radius: 65px;
        }
        .size-720 a {
            line-height: 130px;
            border-radius: 65px;
            font-size: 34px;
            padding-left: 30px;
        }
        @media screen and (min-width:1101px) {
            .size-720 {
                width: 720px;
                height: 150px;
                border-radius: 75px;
            }
            .size-720 a {
                line-height: 150px;
                border-radius: 75px;
                font-size: 38px;
                padding-left: 30px;
            }
        }
    }
}


/* ボタン 背景アイテム */

@media screen and (max-width:550px) {
    .arrow-white {
        background: url(../img/arrow-white.png) no-repeat right 9% center;
        background-size: 15px 15px;
    }
    .logo-blue_arrow-white {
        background: url(../img/xc-blue.png) no-repeat left 9% center, url(../img/arrow-white.png) no-repeat right 9% center;
        background-size: 25px 20px, 20px 20px;
    }
    .seminar {
        background: url(../img/icon-seminar.png) no-repeat left 12% center;
        background-size: 25px 20px;
    }
    .logo-orange {
        background: url(../img/xc-orange.png) no-repeat left 12% center;
        background-size: 20px 15px;
    }
    .logo-white_arrow-blue {
        background: url(../img/xc-white.png) no-repeat left 9% center, url(../img/arrow-blue.png) no-repeat right 9% center;
        background-size: 25px 20px, 20px 20px;
    }
    .logo-blue {
        background: url(../img/xc-blue.png) no-repeat left 15% center;
        background-size: 25px 20px;
    }
}


/* ボタン背景アイテム TL用 */

@media screen and (min-width:551px) and (max-width:750px) {
    .arrow-white {
        background: url(../img/arrow-white.png) no-repeat right 9% center;
        background-size: 20px 20px;
    }
    .logo-blue_arrow-white {
        background: url(../img/xc-blue.png) no-repeat left 9% center, url(../img/arrow-white.png) no-repeat right 9% center;
        background-size: 30px 25px, 25px 25px;
    }
    .seminar {
        background: url(../img/icon-seminar.png) no-repeat left 12% center;
        background-size: 30px 25px;
    }
    .logo-orange {
        background: url(../img/xc-orange.png) no-repeat left 12% center;
        background-size: 25px 20px;
    }
    .logo-white_arrow-blue {
        background: url(../img/xc-white.png) no-repeat left 9% center, url(../img/arrow-blue.png) no-repeat right 9% center;
        background-size: 30px 25px, 25px 25px;
    }
    .logo-blue {
        background: url(../img/xc-blue.png) no-repeat left 15% center;
        background-size: 30px 24px;
    }
}


/* ボタン背景アイテム TL用2 */

@media screen and (min-width:751px) and (max-width:900px) {
    .arrow-white {
        background: url(../img/arrow-white.png) no-repeat right 12% center;
        background-size: 20px 20px;
    }
    .logo-blue_arrow-white {
        background: url(../img/xc-blue.png) no-repeat left 12% center, url(../img/arrow-white.png) no-repeat right 12% center;
        background-size: 30px 25px, 30px 30px;
    }
    .seminar {
        background: url(../img/icon-seminar.png) no-repeat left 9% center;
        background-size: 30px 25px;
    }
    .logo-orange {
        background: url(../img/xc-orange.png) no-repeat left 9% center;
        background-size: 30px 25px;
    }
    .logo-white_arrow-blue {
        background: url(../img/xc-white.png) no-repeat left 12% center, url(../img/arrow-blue.png) no-repeat right 12% center;
        background-size: 30px 25px, 30px 30px;
    }
    .logo-blue {
        background: url(../img/xc-blue.png) no-repeat left 15% center;
        background-size: 37px 30px;
    }
}


/* ボタン背景アイテム PC用 */

@media screen and (min-width:901px) {
    .arrow-white {
        background: url(../img/arrow-white.png) no-repeat right 12% center;
        background-size: 20px 20px;
    }
    .logo-blue_arrow-white {
        background: url(../img/xc-blue.png) no-repeat left 12% center, url(../img/arrow-white.png) no-repeat right 12% center;
        background-size: 30px 25px, 30px 30px;
    }
    .seminar {
        background: url(../img/icon-seminar.png) no-repeat left 9% center;
        background-size: 37px 30px;
    }
    .logo-orange {
        background: url(../img/xc-orange.png) no-repeat left 12% center;
        background-size: 37px 30px;
    }
    .logo-white_arrow-blue {
        background: url(../img/xc-white.png) no-repeat left 12% center, url(../img/arrow-blue.png) no-repeat right 12% center;
        background-size: 30px 25px, 30px 30px;
    }
    .logo-blue {
        background: url(../img/xc-blue.png) no-repeat left 15% center;
        background-size: 45px 36px;
    }
}


/* ボタン 背景カラー */

.color-green {
    background-color: #0ac0a8;
}

.color-green a {
    color: #fff;
}

.color-blue {
    background-color: #3f72b7;
}

.color-blue a {
    color: #fff;
}

.color-yellow {
    background-color: #f7de0f;
}

.color-yellow a {
    color: #333;
}

.color-orange {
    background-color: #ff8800;
}

.color-orange a {
    color: #fff;
}

.color-white_border {
    background-color: #fff;
    border: 2px solid #3f72b7;
}

.color-white_border a {
    color: #3f72b7;
}

.color-white {
    background-color: #fff;
}

.color-white a {
    color: #3f72b7;
}


/* テキスト寄せ */

@media screen and (max-width:750px) {
    .pd-lt-15 {
        padding-left: 5px;
        box-sizing: border-box;
    }
    .pd-lt-25 {
        padding-left: 25px;
        box-sizing: border-box;
    }
    .pd-lt-30 {
        padding-left: 10px;
        box-sizing: border-box;
    }
}

@media screen and (min-width:751px) {
    .pd-lt-15 {
        padding-left: 15px;
        box-sizing: border-box;
    }
    .pd-lt-25 {
        padding-left: 25px;
        box-sizing: border-box;
    }
    .pd-lt-30 {
        padding-left: 30px;
        box-sizing: border-box;
    }
}


/* マージン */

@media screen and (max-width:750px) {
    .mg-lt {
        margin: 0 10% 15% 25%;
    }
}

@media screen and (min-width:751px) {
    .mg-lt {
        margin: 30px 0 0 0;
    }
}


/* ボタン end */


/* テキストstart SP用 */

@media screen and (max-width:550px) {
    .tx {
        margin-left: 4%;
        margin-right: 4%;
        line-height: 2em;
        letter-spacing: 0.1em;
        font-weight: bold;
        font-size: 3.5vw;
    }
    @media screen and (max-width:400px) {
        .tx {
            line-height: 1.6em;
            font-size: 3.5vw;
        }
    }
}


/* テキスト TL用 */

@media screen and (min-width:551px) and (max-width:750px) {
    .tx {
        margin-left: 4%;
        margin-right: 4%;
        line-height: 2em;
        letter-spacing: 0.1em;
        font-size: 20px;
    }
}


/* テキスト PC用 */

@media screen and (min-width:751px) {
    .tx {
        margin-left: 0;
        margin-right: 0;
        line-height: 1.5em;
        letter-spacing: 0.1em;
        font-size: 16px;
    }
}


/* テキスト end */


/* 改行start SP用*/

@media screen and (max-width:550px) {
    .pc-br {
        display: none;
    }
}


/* 改行 TL用 */

@media screen and (min-width:551px) and (max-width:900px) {
    .pc-br {
        display: none;
    }
}


/* 改行 PC用 */

@media screen and (min-width:901px) {
    .sp-br {
        display: none;
    }
}


/* 改行2 TL用*/

@media screen and (max-width:960px) {
    .pc-br2 {
        display: none;
    }
}


/* 改行2 PC用*/

@media screen and (min-width:961px) {
    .sp-br2 {
        display: none;
    }
}


/* 改行end */


/* 中見出しstart */

h2 {
    margin-top: 0;
    padding-top: 68px;
    text-align: center;
    font-size: 5vw;
    line-height: 1.5em;
    color: #333;
}

h2 img {
    vertical-align: middle;
    padding: 0 10px 10px 0;
    width: 50%;
}

.heading-color-white h2 {
    color: #fff;
}

.heading-border {
    text-align: center;
    margin: 0 auto;
}

.heading-border h2 {
    position: relative;
    display: inline-block;
}

.heading-border h2:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -28px;
    display: inline-block;
    width: 160px;
    height: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #3f72b7;
}

.heading-border-white h2 {
    color: #fff;
}

.heading-border-white h2:after {
    background-color: #fff;
}


/* 中見出し SP用 */

@media screen and (max-width:550px) {
    h2 {
        font-size: 5.5vw;
        padding-top: 30px;
    }
    .heading-border h2:after {
        width: 100px;
    }
}


/* 中見出し PC用 */

@media screen and (min-width:751px) {
    h2 {
        font-size: 40px;
    }
    h2 img {
        width: 375px;
    }
}


/* 中見出し end */


/*------------------------------------
基本設定
------------------------------------*/


/* ヘッダー start */

header {
    height: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header__logo {
    width: 30%;
    padding: 25px 4% 15px;
}

.header__logo img {
    width: 150px;
}


/* ヘッダー PC用 */

@media screen and (min-width:751px) {
    header {
        height: 90px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .header__logo {
        width: 25%;
        padding: 20px 10px 15px 0;
    }
    .header__logo img {
        width: 190px;
    }
    .header__nav {
        width: 110%;
        letter-spacing: 0.02em;
        padding-top: 5px;
    }
    .header__nav ul {
        margin: 0;
        padding: 20px 5px 0 20px;
        max-width: 800px;
        display: flex;
        flex-direction: row;
    }
    .header__nav li {
        list-style-type: none;
        padding: 0 3%;
        border-left: 2px solid #dde5f2;
        text-align: center;
    }
    .header__nav li:last-child {
        border-right: 2px solid #dde5f2;
    }
    .header__nav a {
        display: block;
        line-height: 40px;
        text-decoration: none;
        color: #333;
        font-size: 2vw;
    }
    @media screen and (min-width:990px) {
        .header__nav li {
            padding: 0 1.8em;
        }
        .header__nav a {
            font-size: 18px;
        }
    }
}


/* ハンバーガーメニュー */

.nav_contact {
    text-align: center;
    padding-top: -30px;
}

.nav_contact img {
    margin: 5px;
}

nav.globalMenuSp {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: all 0.8s;
    background: #fff;
    width: 326px;
    height: 100%;
}

nav.globalMenuSp.active {
    transform: translateX(0%);
}

.navToggle {
    display: block;
    position: absolute;
    right: 24px;
    top: 18px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 11;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #231815;
    left: 6px;
}

.navToggle span:nth-child(1) {
    top: 10px;
}

.navToggle span:nth-child(2) {
    top: 20px;
}

.navToggle span:nth-child(3) {
    top: 30px;
}

.navToggle.active span:nth-child(1) {
    top: 20px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.menu {
    margin: 80px 28px -60px;
    padding: 0;
}

.menu li {
    list-style-type: none;
    border-top: 2px solid #dde5f2;
    height: 60px;
}

.menu li:last-child {
    border-bottom: 2px solid #dde5f2;
}

.menu li a {
    display: block;
    line-height: 60px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.menu-btn {
    margin: 20px 28px;
    padding: 0;
}

.menu-btn li {
    display: block;
    width: 270px;
    height: 60px;
    margin-top: 20px;
    border-radius: 12px;
    list-style-type: none;
}

.menu-btn a {
    display: block;
    line-height: 60px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    padding-left: 70px;
}

.btn-menu-mail {
    background: url(../img/icon-mail.png) no-repeat left 10% center #3f72b7;
    background-size: 26px 21px;
    box-shadow: 0px 3px 0px 0px #255595;
}

.btn-menu-seminar {
    background: url(../img/icon-seminar.png) no-repeat left 10% center #f7de0f;
    background-size: 29px 24px;
    box-shadow: 0px 3px 0px 0px #d9c203;
}

.btn-menu-seminar a {
    color: #333;
}

.btn-menu-trial {
    background: url(../img/xc-orange.png) no-repeat left 10% center #ff8800;
    background-size: 25px 20px;
    box-shadow: 0px 3px 0px 0px #d37407;
}


/* サイドメニュー */

.side-menu {
    position: fixed;
    top: 15px;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}

.side-menu li {
    list-style-type: none;
    margin-bottom: 10px;
    border-radius: 12px 0 0 12px;
    width: 60px;
    height: 168px;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    line-height: 60px;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

@media all and (-ms-high-contrast: none) {
    *::-ms-backdrop,
    .side-menu li {
        /* IE11のみ適用 */
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.side-menu li:last-child {
    height: 220px;
}

.side-menu a {
    display: block;
    padding-top: 45px;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}

.btn-side-menu-mail {
    background: url(../img/icon-mail.png) no-repeat top 13% center #3f72b7;
    background-size: 26px 21px;
}

.btn-side-menu-seminar {
    background: url(../img/icon-seminar.png) no-repeat top 25% center #f7de0f;
    background-size: 29px 24px;
    padding-top: 30px;
}

.btn-side-menu-seminar a {
    color: #333;
}

.btn-side-menu-trial {
    background: url(../img/xc-orange.png) no-repeat top 10% center #ff8800;
    background-size: 25px 20px;
}


/* TL用 */

@media screen and (min-width:750px) and (max-width:900px) {
    .side-menu li {
        width: 40px;
        line-height: 40px;
    }
}


/* PC用 */

@media screen and (min-width:901px) and (max-width:1100px) {
    .side-menu li {
        width: 50px;
        line-height: 50px;
    }
}


/* ヘッダー end */


/* カンタンぺーバーレス start */

.paperless {
    background: url(../img/paperless-bg-sp.gif) no-repeat;
    background-size: cover;
    position: relative;
}

.paperless__inner {
    text-align: center;
}

.paperless__inner h1 {
    margin: 0;
    padding: 60px 0 0;
}

.paperless__inner h1 img {
    width: 100%;
}


/* カンタンぺーバーレス SP用 */

@media screen and (max-width:550px) {
    .paperless {
        height: 630px;
    }
    .paperless__inner h1 {
        padding: 15% 5% 0 5%;
    }
    .paperless__tablet--sp {
        position: absolute;
        left: 4%;
        bottom: 0;
        text-align: left;
    }
    .paperless__tablet--sp img {
        width: 60%;
        vertical-align: bottom;
    }
    .paperless__inner p {
        white-space: nowrap;
        letter-spacing: 0.05em;
    }
    @media screen and (max-width:480px) {
        .paperless {
            height: 560px
        }
        .paperless__tablet--sp img {
            width: 50%;
        }
    }
    @media screen and (max-width:440px) {
        .paperless {
            height: 520px
        }
        .paperless__tablet--sp img {
            width: 45%;
        }
    }
    @media screen and (max-width:400px) {
        .paperless {
            height: 460px
        }
        .paperless__tablet--sp img {
            width: 45%;
        }
    }
    @media screen and (max-width:360px) {
        .paperless {
            height: 400px
        }
        .paperless__tablet--sp img {
            width: 40%;
        }
    }
}


/* カンタンぺーバーレス TL用 */

@media screen and (min-width:551px) and (max-width:750px) {
    .paperless {
        height: 700px;
    }
    .paperless__tablet--sp {
        position: absolute;
        left: 4%;
        bottom: 0;
    }
    .paperless__tablet--sp img {
        width: 75%;
        vertical-align: bottom;
        text-align: left;
    }
    .paperless__inner p {
        white-space: nowrap;
    }
}


/* カンタンぺーバーレス PC用 */

@media screen and (min-width:751px) {
    .paperless {
        height: 600px;
        background: url(../img/paperless-bg-pc.gif) no-repeat;
        background-size: cover;
    }
    .paperless__inner h1 {
        padding-right: 30px;
    }
    .paperless__flex {
        height: 600px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .paperless__ipad--pc {
        margin-top: 50px;
        position: relative;
        width: 38%;
    }
    .paperless__ipad--pc img {
        /*width: 100%;*/
    }
    .paperless__tablet {
        position: absolute;
        left: -30px;
        bottom: 0;
    }
    @media screen and (min-width:951px) and (max-width:1150px) {
        .paperless {
            height: 600px;
        }
        .paperless__flex {
            height: 600px;
        }
        .paperless__tablet {
            left: -40px;
        }
    }
    @media screen and (min-width:1151px) {
        .paperless {
            height: 600px;
        }
        .paperless__flex {
            height: 600px;
        }
        .paperless__tablet {
            left: -80px;
        }
    }
    .paperless__tablet img {
        display: none;
        width: 100%;
        vertical-align: bottom;
        margin-left: 1%;
    }
    .paperless__inner {
        width: 59%;
    }
    .paperless__inner img {
        width: 90%;
    }
    .paperless__inner p {
        white-space: nowrap;
        letter-spacing: 0.05em;
    }
}


/* カンタンぺーバーレス end */

/* 企業ロゴ掲載　START */
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、最初と最後のアイテムを端に寄せます。*/


.logo {
    height: 70px;
    margin-top: 0;
}
    
.logo p {
    font-size: 28px;
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
    line-height: 1.5em;
}

.cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 0 auto 2em ;
    max-width: 1050px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
.cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    /*margin: 0.6em 0 0;
    color: #333;
    text-align: center;
    font-size: 1.8em;*/
    display: none;
}

.card-list {
    /*width: calc(96% / 3);*/ /* 96%幅を3で割るという指定 */
    margin: 1em 0;
}
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
/*.cardlayout-wrap::after{
    content: "";
    display: block;
    width: calc(96% / 3);
}*/

img.img100{
    width: 100%;
}

/* スマホ向け */
@media screen and ( max-width: 767px ) {   /* ウィンドウサイズが 767px 以下の場合有効 */
    
.logo p {
    font-size: 18px;
    padding-top: 20px;
    line-height: 1.4em;
}

.card-list {
        margin: 1em 0;
        /*width: calc(96% / 2);*/ /* 96%幅を2で割るという指定 */
}

.cardlayout-wrap {
    width: 94%;
}
}
/* 企業ロゴ掲載　END */

/* 帳票業務で困りごと start */

.trouble__inner {
    width: 100vw;
    height: 100vw;
    position: relative;
}

.trouble__box {
    background-color: #fff;
    border-radius: 50%;
}

.box1 {
    width: 32%;
    height: 32%;
    max-width: 240px;
    max-height: 240px;
    position: absolute;
    top: 170px;
    left: 2%;
    z-index: 4;
    box-shadow: 3px 5px 30px -5px rgba(0, 0, 0, 0.2);
}

.box2 {
    width: 30%;
    height: 30%;
    max-width: 226px;
    max-height: 226px;
    position: absolute;
    top: 10px;
    left: 17%;
    z-index: 5;
    box-shadow: 3px 5px 30px -5px rgba(0, 0, 0, 0.2);
}

.box3 {
    width: 36%;
    height: 36%;
    max-width: 270px;
    max-height: 270px;
    position: absolute;
    top: 125px;
    left: 33%;
    z-index: 3;
    box-shadow: 3px 5px 30px -5px rgba(0, 0, 0, 0.2);
}

.box4 {
    width: 29%;
    height: 29%;
    max-width: 218px;
    max-height: 218px;
    position: absolute;
    top: 0px;
    left: 53%;
    z-index: 2;
    box-shadow: 3px 5px 30px -5px rgba(0, 0, 0, 0.2);
}

.box5 {
    width: 27%;
    height: 27%;
    max-width: 204px;
    max-height: 204px;
    position: absolute;
    top: 180px;
    left: 67%;
    z-index: 1;
    box-shadow: 3px 5px 30px -5px rgba(0, 0, 0, 0.2);
}

.trouble__box p {
    text-align: center;
    font-size: 2.8vw;
    line-height: 1.7em;
    margin: 35% 0;
}

.trouble__box:nth-of-type(3) p {
    margin: 32% 0;
}

.trouble__box strong {
    color: #3f72b7;
    font-size: 2.8vw;
    line-height: 1.7em;
    font-family: 'Noto Sans Japanese';
}

.trouble__bothered {
    width: 90%;
    max-width: 784px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.trouble__bothered img {
    vertical-align: bottom;
    margin: 0;
    padding: 0;
}


/* 帳票業務で困りごと SP・TL用 */

@media screen and (max-width:751px) {
    .trouble__bothered img {
        width: 96%;
        margin: 0 2%;
    }
}


/* 帳票業務で困りごと SP用 */

@media screen and (max-width:550px) {
    .trouble {
        height: 500px;
        background: url(../img/trouble-bg-sp.png) no-repeat left bottom #3f72b7;
        background-size: 75%;
        position: relative;
    }
    .box1 {
        width: 34%;
        height: 34%;
        top: 140px;
        left: 2%;
    }
    .box2 {
        width: 32%;
        height: 32%;
        top: 5px;
        left: 18%;
    }
    .box3 {
        width: 38%;
        height: 38%;
        top: 120px;
        left: 31%;
    }
    .box4 {
        width: 31%;
        height: 31%;
        top: 0px;
        left: 52%;
    }
    .box5 {
        width: 29%;
        height: 29%;
        top: 155px;
        left: 64%;
    }
    @media screen and (max-width:500px) {
        .trouble {
            height: 620px;
        }
    }
    @media screen and (max-width:450px) {
        .trouble {
            height: 570px;
        }
        .box1 {
            width: 33%;
            height: 33%;
            top: 100px;
            left: 2%;
        }
        .box2 {
            width: 31%;
            height: 31%;
            top: 5px;
            left: 16%;
        }
        .box3 {
            width: 37%;
            height: 37%;
            top: 80px;
            left: 32%;
        }
        .box4 {
            width: 30%;
            height: 30%;
            top: 0px;
            left: 53%;
        }
        .box5 {
            width: 28%;
            height: 28%;
            top: 100px;
            left: 66%;
        }
    }
    @media screen and (max-width:400px) {
        .trouble {
            height: 500px;
        }
    }
    @media screen and (max-width:340px) {
        .trouble {
            height: 440px;
        }
    }
}


/* 帳票業務で困りごと TL用 */

@media screen and (min-width:551px) and (max-width:650px) {
    .trouble {
        height: 750px;
        background: url(../img/trouble-bg-sp.png) no-repeat left bottom #3f72b7;
        background-size: 75%;
        position: relative;
    }
}

@media screen and (min-width:651px) and (max-width:750px) {
    .trouble {
        height: 900px;
        background: url(../img/trouble-bg-sp.png) no-repeat left bottom #3f72b7;
        background-size: 75%;
        position: relative;
    }
}


/* 帳票業務で困りごと PC用 */

@media screen and (min-width:751px) {
    .trouble {
        height: 920px;
        background: url(../img/trouble-bg-pc.png) no-repeat left bottom #3f72b7;
        background-size: 27%;
        position: relative;
    }
    .trouble__box p {
        text-align: center;
        font-size: 18px;
        line-height: 1.7em;
        margin: 34% 0;
    }
    .trouble__box:nth-of-type(3) p {
        margin: 32% 0;
    }
    .trouble__box strong {
        color: #3f72b7;
        font-size: 24px;
        line-height: 1.7em;
    }
    @media screen and (min-width:900px) {
        .trouble {
            height: 880px;
        }
    }
    @media screen and (min-width:1050px) {
        .trouble {
            height: 750px;
        }
        .box1 {
            position: absolute;
            top: 107px;
            left: 10px;
        }
        .box2 {
            position: absolute;
            top: 0;
            left: 190px;
        }
        .box3 {
            position: absolute;
            top: 63px;
            left: 400px;
        }
        .box4 {
            position: absolute;
            top: 6px;
            left: 632px;
        }
        .box5 {
            position: absolute;
            top: 116px;
            left: 789px;
        }
    }
}


/* 帳票業務で困りごと end */


/* XC-INOが解決します start */

.resolution {
    background-color: #e3ecf8;
    padding-bottom: 80px;
}

.resolution__flex {
    display: flex;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.1));
}


/* XC-INOが解決します SP用・TL用 */

@media screen and (max-width:750px) {
    .resolution__flex {
        flex-direction: column;
        position: relative;
        margin: 60px 6.5%;
    }
    .resolution__head {
        border-radius: 15px 15px 0 0;
        background: url(../img/xc-bg-blue.png) no-repeat left top 30px #3f72b7;
        background-size: 150px 136px;
        text-align: center;
    }
    @media screen and (max-width:550px) {
        .resolution__head {
            background-size: 100px 91px;
        }
        .resolution__flex {
            margin: 30px 6.5%;
        }
    }
    .resolution__body {
        background-color: #fff;
        border-radius: 0 0 15px 15px;
    }
    .resolution__head h3 {
        margin: 0;
        padding: 5% 6% 0;
        color: #fff;
        font-size: 5.5vw;
        line-height: 1.8em;
        letter-spacing: 0.1em;
        font-family: "Noto Sans Japanese";
    }
    .resolution__head p {
        margin: 0;
        padding: 3% 6% 6%;
        color: #fff;
        font-weight: normal;
    }
    .resolution__body h4 {
        margin: 0;
        padding: 8% 6% 0;
        font-size: 5.5vw;
        line-height: 1.5em;
        text-align: center;
    }
    .resolution__body p {
        margin: 0;
        padding: 3% 6% 0;
        font-weight: normal;
    }
    .resolution__body img {
        display: block;
        padding: 6%;
        width: 88%;
    }
    .resolution__body small {
        display: block;
        text-align: right;
        margin-top: -25px;
        padding: 5px 6% 6% 0;
    }
    .resolution__bg-triangle--bottom {
        position: relative;
    }
    .resolution__bg-triangle--bottom:after {
        content: "";
        position: absolute;
        top: 99%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #3f72b7;
    }
    /* SP用 */
    @media screen and (max-width:550px) {
        .resolution__head {
            border-radius: 10px 10px 0 0;
        }
        .resolution__body {
            border-radius: 0 0 10px 10px;
        }
    }
}


/* XC-INOが解決します PC用 */

@media screen and (min-width:751px) {
    .resolution__flex {
        margin: 76px auto;
        flex-direction: row;
    }
    .resolution__head {
        border-radius: 15px 0 0 15px;
        background: url(../img/xc-bg-blue.png) no-repeat left top 30px #3f72b7;
        background-size: 198px 180px;
        width: 30%;
    }
    .resolution__body {
        background-color: #fff;
        border-radius: 0 15px 15px 0;
        width: 70%;
        text-align: center;
    }
    .resolution__flex:nth-child(odd) .resolution__head {
        border-radius: 0 15px 15px 0;
        order: 2;
        background-position: right top 30px;
    }
    .resolution__flex:nth-child(odd) .resolution__body {
        border-radius: 15px 0 0 15px;
        order: 1;
    }
    .resolution__head h3 {
        margin: 0;
        padding: 30% 6% 0;
        color: #fff;
        line-height: 1.8em;
        text-align: center;
        font-size: 20px;
        letter-spacing: 0.1em;
        font-family: "Noto Sans Japanese";
    }
    .resolution__head p {
        padding: 8%;
        color: #fff;
    }
    .resolution__body h4 {
        margin: 0;
        padding: 30px 6% 0;
        line-height: 1.5em;
        font-size: 26px;
        font-family: "Noto Sans Japanese";
    }
    .resolution__body p {
        padding: 0 6%;
    }
    .resolution__body img {
        display: block;
        padding: 10px 6% 20px;
        width: 88%;
    }
    .resolution__body small {
        display: block;
        text-align: right;
        margin-top: -20px;
        padding: 0 6% 20px;
    }
    .resolution__bg-triangle--left {
        position: relative;
    }
    .resolution__bg-triangle--left:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 99%;
        margin-top: -22px;
        border: 22px solid transparent;
        border-left: 22px solid #3f72b7;
    }
    .resolution__bg-triangle--right {
        position: relative;
    }
    .resolution__bg-triangle--right:after {
        content: "";
        position: absolute;
        top: 50%;
        left: -43px;
        margin-top: -22px;
        border: 22px solid transparent;
        border-right: 22px solid #3f72b7;
    }
}


/* XC-INOが解決します end */


/* XC-INOの特長 start */

.features {
    background: url(../img/gray-bg.gif) repeat;
    padding-bottom: 40px;
}

.features__flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.1))
}

.features__head {
    background-color: #3f72b7;
    border-radius: 10px 10px 0 0;
}

.features__head h3 {
    margin: 0;
    padding: 10% 10px;
    color: #fff;
    line-height: 1.25em;
    text-align: center;
    font-family: 'Noto Sans Japanese';
}

.features__body {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
}

.features__body p {
    margin: 0;
    padding: 10% 10px;
}

.features_tx {
    margin: 56px auto 20px;
    text-align: center;
    font-size: 24px;
    line-height: 1.75em;
    font-weight: bold;
}

.features__flex2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 40px;
}


/* XC-INOの特長 SP・TL用 */

@media screen and (max-width:750px) {
    .features__box {
        width: 70%;
        margin: 56px 15% 0;
        text-align: center;
    }
    .features__head h3 {
        font-size: 6vw;
        font-family: 'Noto Sans Japanese';
    }
    /* SP用 */
    @media screen and (max-width:550px) {
        .features__box:nth-child(1) {
            margin: 40px 15% 0;
        }
        .features__box:nth-child(2),
        .features__box:nth-child(3) {
            margin: 30px 15% 0;
        }
        .features_tx {
            margin: 30px auto 20px;
            font-size: 20px;
        }
    }
}


/* XC-INOの特長 PC用 */

@media screen and (min-width:751px) {
    .features__flex {
        flex-direction: row;
    }
    .features__box {
        width: 32%;
        margin: 56px 2.5% 0 0;
        text-align: center;
    }
    .features__head {
        border-radius: 15px 15px 0 0;
    }
    .features__head h3 {
        font-size: 34px;
        white-space: nowrap;
        font-family: 'Noto Sans Japanese';
    }
    .features__body p {
        font-size: 15px;
        letter-spacing: 0;
        white-space: nowrap;
    }
    @media screen and (min-width:901px) {
        .features__head h3 {
            font-size: 34px;
        }
        .features__body p {
            font-size: 18px;
        }
    }
    .features__box:last-child {
        margin-right: 0;
    }
    .features__flex2 {
        flex-direction: row;
    }
    .features__flex2 .btn {
        width: 47%;
    }
}


/* XC-INOの特長 end */


/* 利用シーン start */

.scene {
    padding-bottom: 0;
}

.tabs {
    margin: 40px auto 0;
}

.tabs label {
    display: block;
    float: left;
    width: 35%;
    border-radius: 15px 15px 0 0;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.tabs label:nth-of-type(1) {
    margin: 0 2% 0 13%;
    background-color: #e3edfa;
    margin-right: 15px;
}

.tabs label:nth-of-type(2) {
    margin: 0 2% 0 13%;
    background-color: #bfd3f0;
    margin-left: 15px;
}

.tabs input[name="tab_item"] {
    display: none;
}

.tab_content {
    display: none;
    clear: both;
    overflow: hidden;
}

#tab01:checked~#tab01_content,
#tab02:checked~#tab02_content {
    display: block;
}

#tab01_content {
    background-color: #e3edfa;
}

#tab02_content {
    background-color: #bfd3f0;
}

.card {
    display: block;
    margin-top: 70px;
    margin-bottom: 70px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
}

.card p {
    margin: 25px 0 10px;
    font-size: 26px;
    font-weight: bold;
    white-space: nowrap;
}

.card img {
    margin: 0 auto;
    width: 200px;
}

.card ul {
    height: 70px;
    margin: 15px 5px 15px 15px;
    padding: 0;
    text-align: left;
    position: relative;
}

.card ul li {
    list-style-type: none;
    width: 70%;
}

.card .shorten {
    letter-spacing: -0.25em;
}

.card ul li:before {
    content: "・";
}

.card ul li:nth-child(4) {
    position: absolute;
    right: 10px;
    top: 0;
    width: 45%;
}

.card ul li:nth-child(5) {
    position: absolute;
    right: 10px;
    top: 24px;
    width: 45%;
}

.card ul li:nth-child(6) {
    position: absolute;
    right: 10px;
    top: 48px;
    width: 45%;
}

.swiper-button-prev,
.swiper-button-next {
    outline: 0;
}


/* 利用シーン SP用 */

@media screen and (max-width:550px) {
    .tabs label {
        height: 60px;
        line-height: 60px;
        font-size: 4vw;
    }
    .tabs label:nth-of-type(1) {
        margin-right: 10px;
    }
    .tabs label:nth-of-type(2) {
        margin-left: 10px;
    }
    .card {
        display: block;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .card p {
        margin: 25px 0 10px;
        font-size: 24px;
    }
    .card li {
        font-size: 0.9em;
    }
    @media screen and (max-width:320px) {
        .card img {
            width: 60%;
        }
    }
}


/* 利用シーン TL用 */

@media screen and (min-width:551px) and (max-width:750px) {
    .tabs {
        margin: 50px auto 0;
    }
    .tabs label {
        height: 70px;
        line-height: 70px;
        font-size: 20px;
    }
}


/* 利用シーン PC用 */

@media screen and (min-width:751px) {
    .tabs {
        margin: 60px auto 0;
    }
    .tabs label {
        height: 78px;
        line-height: 78px;
        font-size: 26px;
    }
}

@media screen and (min-width:751px) and (max-width:900px) {
    .swiper-button-next {
        right: 45px !important;
    }
}


/* PC用 */

@media screen and (min-width:901px) and (max-width:1100px) {
    .swiper-button-next {
        right: 55px !important;
    }
}

@media screen and (min-width:1101px) {
    .swiper-button-next {
        right: 65px !important;
    }
}


/* 利用シーン end */


/* XCシリーズのご利用料金 start */

.price {
    background-color: #3f72b7;
    padding-bottom: 60px;
}

.price__text {
    margin: 0 10%;
    color: #fff;
    text-align: center;
}

.price__text h3 {
    font-size: 38px;
    line-height: 1.5em;
}

.price__text span {
    color: #f6ff00;
    padding-left: 5px;
}

.price__text p {
    font-size: 18px;
    line-height: 2em;
}

.price__comment {
    /*
text-indent: -1em;
padding-left: 1em
*/
}

.price__comment p {
    padding: 0 1em;
    ;
    font-size: 16px;
    color: #fff;
}

.price__comment a {
    color: #fff;
}


/* XCシリーズのご利用料金 SP・TL用 */

@media screen and (max-width:750px) {
    .price__box {
        width: 92%;
        margin: 46px 4% 0;
    }
    .price__text h3 {
        padding-top: 10px;
        font-size: 6vw;
    }
    .price__text p {
        font-size: 4vw;
        white-space: nowrap;
    }
    .price__head {
        background-color: #e3edfa;
        border-radius: 15px 15px 0 0;
    }
    .price__body {
        background-color: #fff;
        border-radius: 0 0 15px 15px;
        text-align: center;
        padding-bottom: 40px;
    }
    .price__head h3 {
        margin: 0;
        padding: 5%;
        font-size: 5vw;
        text-align: center;
    }
    .price__head h3 img {
        width: 40%;
        vertical-align: bottom;
    }
    .price__charge {
        margin-top: 0;
        padding-top: 30px;
        color: #3f72b7;
        font-size: 24px;
        font-weight: bold;
    }
    .price__charge span {
        font-size: 14px;
    }
    .price__month {
        font-size: 24px;
        font-weight: bold;
    }
    .price__month span {
        font-size: 38px;
    }
    .price__explanation {
        font-size: 20px;
    }
    .price__table--sp {
        margin: 5%;
        width: 90%;
        font-size: 24px;
    }
    .price__table--sp tr:nth-child(odd) {
        background-color: #f1f3f6;
    }
    .price__table--sp th {
        color: #3c6cae;
        border-right: 2px dashed #3c6cae;
        width: 50%;
        padding: 20px 0;
    }
    .price__table--sp td {
        text-align: center;
        width: 50%;
        padding: 20px 0;
    }
    /* SP用 */
    @media screen and (max-width:500px) {
        .price__month {
            font-size: 3.5vw;
        }
        .price__month span {
            font-size: 30px;
        }
        .price__explanation {
            font-size: 3.4vw;
        }
        .price__table--sp th {
            font-size: 4vw;
            border-right: 1px dashed #3c6cae;
        }
        .price__table--sp td {
            font-size: 4vw;
        }
    }
}


/* XCシリーズのご利用料金 PC用 */

@media screen and (min-width:751px) {
    .price__text h3 {
        font-size: 34px;
    }
    .price__month {
        font-size: 22px;
        font-weight: bold;
        margin: 0.5em auto;
    }
    .price__month span {
        font-size: 28px;
    }
    .price__explanation {
        font-size: 14px;
        line-height: 1.8em;
    }
    .price__table--pc {
        margin-top: 40px;
        border-collapse: collapse;
    }
    .price__table--pc tr:nth-child(even) {
        background-color: #fff;
    }
    .price__table--pc tr:nth-child(odd) {
        background-color: #f2f3f7;
    }
    .price__table--pc tr:first-child {
        background-color: #e4eefa;
    }
    .price__table--pc tr:nth-child(even) th:first-child {
        background-color: #c0d4ed;
    }
    .price__table--pc tr:nth-child(odd) th:first-child {
        background-color: #b0c5e2;
    }
    .price__table--pc tr:first-child th:first-child {
        border-radius: 15px 0 0 0;
    }
    .price__table--pc tr:first-child th:last-child {
        border-radius: 0 15px 0 0;
    }
    .price__table--pc tr:last-child th:first-child {
        border-radius: 0 0 0 15px;
    }
    .price__table--pc tr:last-child td:last-child {
        border-radius: 0 0 15px 0;
    }
    .price__table--pc tr:first-child img {
        width: 150px;
        padding-top: 10px;
    }
    .price__table--pc tr:nth-of-type(1) th:nth-of-type(2) {
        background: url(../img/dashed-1.gif) no-repeat right top;
        background-size: 2px;
    }
    .price__table--pc tr:nth-of-type(2) td:nth-of-type(1) {
        background: url(../img/dashed-2.gif) no-repeat right top, url(../img/spacer.gif) repeat-y left center;
        background-size: 2px, 20px;
    }
    .price__table--pc tr:nth-of-type(3) td:nth-of-type(1),
    .price__table--pc tr:nth-of-type(5) td:nth-of-type(1),
    .price__table--pc tr:nth-of-type(7) td:nth-of-type(1) {
        background: url(../img/dashed-3.gif) no-repeat right top, url(../img/spacer.gif) repeat-y left center;
        background-size: 2px, 20px;
    }
    .price__table--pc tr:nth-of-type(4) td:nth-of-type(1),
    .price__table--pc tr:nth-of-type(6) td:nth-of-type(1) {
        background: url(../img/dashed-4.gif) no-repeat right top, url(../img/spacer.gif) repeat-y left center;
        background-size: 2px, 20px;
    }
    .price__table--pc tr:nth-of-type(8) td:nth-of-type(1) {
        background: url(../img/dashed-8.gif) no-repeat right top, url(../img/spacer.gif) repeat-y left center;
        background-size: 2px, 20px;
    }
    .price__table--pc tr td:nth-of-type(2) {
        background: url(../img/spacer.gif) repeat-y right center;
        background-size: 20px;
    }
    .price__table--pc tr th:first-child {
        width: 22px;
        padding: 20px;
    }
    .price__table--pc td {
        text-align: center;
        width: 38%;
        padding: 20px 0;
    }
    /* Firefox only */
    @-moz-document url-prefix() {
        .price__table--pc tr:first-child {
            background-color: #3f72b7;
        }
        .price__table--pc tr:last-child {
            background-color: #3f72b7;
        }
        .price__table--pc tr:first-child th:nth-of-type(n+2) {
            background-color: #e4eefa;
        }
        .price__table--pc tr:last-child td:nth-of-type(n+1) {
            background-color: #fff;
        }
    }
}


/* XCシリーズのご利用料金 end */


/* 導入までの流れ start */

.flow {
    background: url(../img/gray-bg.gif) repeat;
    padding-bottom: 60px;
}

.flow__comment {
    text-indent: -1em;
    padding-left: 1em;
}

.flow__comment p {
    padding: 0 1em;
    font-size: 12px;
    line-height: 1.5em;
}


/* 導入までの流れ SP・TL用 */

@media screen and (max-width:750px) {
    .flow__flex {
        width: 92%;
        margin: 40px 4%;
        padding: 5px 0 30px;
        background-color: #fff;
    }
    .flow__box1 {
        height: 360px;
        background: url(../img/flow-sp_01.gif) no-repeat left 8% top 80px;
        background-size: 60px;
        margin-top: 20px;
    }
    .flow__box2 {
        height: 480px;
        background: url(../img/flow-sp_02.gif) no-repeat left 8% top 80px;
        background-size: 60px;
    }
    .flow__box3 {
        height: 360px;
        background: url(../img/flow-sp_03.gif) no-repeat left 8% top 80px;
        background-size: 60px;
    }
    .flow__box4 {
        height: 360px;
        background: url(../img/flow-sp_04.gif) no-repeat left 8% top 80px;
        background-size: 60px;
    }
    .flow__box5 .flow__line {
        width: 92%;
        margin: 20px auto;
    }
    .flow__pentagon {
        width: 92%;
        height: 150px;
        margin: 0 4%;
        text-align: center;
    }
    .flow__pentagon h3 {
        margin: 0;
        padding-top: 25px;
        color: #fff;
        line-height: 1.5em;
        font-size: 4.6vw;
    }
    .flow__line {
        width: 73%;
        margin: 15px 0 30px 22%;
        background: url(../img/dashed-h.gif) repeat-x center, url(../img/dashed-h.gif) repeat-x bottom;
    }
    .flow__text p {
        line-height: 2.8em;
        font-size: 3.5vw;
        letter-spacing: 0;
    }
    /* SP用 */
    @media screen and (max-width:550px) {
        .flow__pentagon {
            height: 120px;
        }
        .flow__pentagon h3 {
            padding-top: 20px;
        }
        .flow__box1 {
            height: 280px;
            background: url(../img/flow-sp_01.gif) no-repeat left 8% top 80px;
            background-size: 45px;
            margin-top: 20px;
        }
        .flow__box2 {
            height: 400px;
            background: url(../img/flow-sp_02.gif) no-repeat left 8% top 80px;
            background-size: 45px;
        }
        .flow__box3 {
            height: 280px;
            background: url(../img/flow-sp_03.gif) no-repeat left 8% top 80px;
            background-size: 45px;
        }
        .flow__box4 {
            height: 280px;
            background: url(../img/flow-sp_04.gif) no-repeat left 8% top 80px;
            background-size: 45px;
        }
        .flow__comment p {
            padding-right: 2em;
        }
    }
    @media screen and (max-width:460px) {
        .flow__pentagon {
            height: 100px;
        }
        .flow__pentagon h3 {
            padding-top: 20px;
        }
        .flow__box1 {
            height: 260px;
            background: url(../img/flow-sp_01.gif) no-repeat left 8% top 60px;
            background-size: 40px;
            margin-top: 20px;
        }
        .flow__box2 {
            height: 380px;
            background: url(../img/flow-sp_02.gif) no-repeat left 8% top 60px;
            background-size: 40px;
        }
        .flow__box3 {
            height: 260px;
            background: url(../img/flow-sp_03.gif) no-repeat left 8% top 60px;
            background-size: 40px;
        }
        .flow__box4 {
            height: 260px;
            background: url(../img/flow-sp_04.gif) no-repeat left 8% top 60px;
            background-size: 40px;
        }
    }
    @media screen and (max-width:380px) {
        .flow__pentagon {
            min-height: 80px;
        }
        .flow__pentagon h3 {
            padding-top: 15px;
        }
        .flow__box1 {
            height: 220px;
            background: url(../img/flow-sp_01.gif) no-repeat left 8% top 40px;
            background-size: 35px;
            margin-top: 20px;
        }
        .flow__box2 {
            height: 330px;
            background: url(../img/flow-sp_02.gif) no-repeat left 8% top 40px;
            background-size: 35px;
        }
        .flow__box3 {
            height: 230px;
            background: url(../img/flow-sp_03.gif) no-repeat left 8% top 40px;
            background-size: 35px;
        }
        .flow__box4 {
            height: 220px;
            background: url(../img/flow-sp_04.gif) no-repeat left 8% top 40px;
            background-size: 35px;
        }
    }
    .color1 {
        background: url(../img/flow-bg-color1.gif) no-repeat;
        background-size: 100% 100%;
    }
    .color2 {
        background: url(../img/flow-bg-color2.gif) no-repeat;
        background-size: 100% 100%;
    }
    .color3 {
        background: url(../img/flow-bg-color3.gif) no-repeat;
        background-size: 100% 100%;
    }
    .color4 {
        background: url(../img/flow-bg-color4.gif) no-repeat;
        background-size: 100% 100%;
    }
    .color5 {
        background: url(../img/flow-bg-color5.gif) no-repeat;
        background-size: 100% 100%;
    }
}


/* 導入までの流れ PC用 */

@media screen and (min-width:751px) {
    .flow__pentagon {
        display: none;
    }
    .flow__flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #fff;
        margin: 60px auto 20px;
    }
    .flow__image {
        padding: 30px;
    }
    .flow__box1 {
        height: 170px;
    }
    .flow__box2 {
        height: 250px;
    }
    .flow__box3 {
        height: 140px;
    }
    .flow__box4 {
        height: 160px;
    }
    .flow__box5 {
        height: 120px;
    }
    .flow__text {
        margin-top: 22px;
        width: 70%;
        letter-spacing: .05em;
    }
    .flow__line {
        margin: 0 30px 0 0;
        background: url(../img/dashed-h.gif) repeat-x center, url(../img/dashed-h.gif) repeat-x bottom;
    }
    .flow__line p {
        margin: 0;
        line-height: 3em;
    }
}


/* 導入までの流れ end */


/* フッター start */

.inquiry {
    margin-top: 60px;
    position: relative;
}

.inquiry p {
    text-align: center;
    font-size: 4.5vw;
    font-weight: bold;
    line-height: 1.5em;
}

.company__flex {
    display: flex;
    /* margin-top: 50px; 20210912変更 */
    margin-top: 0;
}

@media screen and (max-width:750px) {
    .company__text {
        margin-top: 15vw;
    }
}

@media screen and (max-width:550px) {
    .company__text {
        margin-top: 20vw;
    }
}

@media screen and (max-width:400px) {
    .company__text {
        margin-top: 25vw;
    }
}

.company__text h2 {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 3.5vw;
}

.company__text img {
    width: 50%;
}

.company__text p {
    font-size: 3.6vw;
    line-height: 2em;
}

.company__text p a {
    text-decoration: none;
    color: #3f72b7;
    margin-bottom: -10px;
    display: block;
}

.company__table {
    width: 100%;
    border-top: 1px #ccc solid;
    border-left: 1px #ccc solid;
    border-collapse: collapse;
    margin-top: 20px;
}

.company__table th {
    background-color: #f4f4f4;
    border-right: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    padding: 10px;
    width: 30%;
    text-align: left;
    font-size: 3vw;
}

.company__table td {
    border-right: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    width: 70%;
    padding: 15px;
    font-size: 3vw;
}


/* フッター SP用 */

@media screen and (max-width:550px) {
    .contact_bannersp {
        width: 350px;
        margin: 120px auto 0px;
        padding: 75px 0 0;
        text-align: center;
        background-image: url(../img/contact_bg_sp.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .contact_bannersp img {
        width: auto;
        margin-bottom: 15px;
    }
    .inquiry {
        height: 220px;
        margin: 0 2%;
    }
    .inquiry__woman {
        position: absolute;
        left: 0;
        top: 20px;
        width: 120px;
    }
    .inquiry__man {
        position: absolute;
        right: 0;
        top: 20px;
        width: 120px;
    }
    .company__flex {
        flex-direction: column;
        margin: 0 6.5%;
        width: 87%;
    }
    .copyright {
        border-top: 1px solid #ccc;
        margin: 40px 40px 20px 40px;
    }
    .copyright p {
        text-align: center;
        font-size: 12px;
    }
    @media screen and (max-width:450px) {
        .contact_bannersp {
            width: 295px;
            margin: 90px 30px 0px;
            padding: 65px 10px 0;
            text-align: center;
            background-image: url(../img/contact_bg_sp.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .contact_bannersp img {
            width: 280px;
            margin-bottom: 15px;
        }
        .inquiry {
            height: 160px;
        }
        .inquiry__woman {
            position: absolute;
            left: 0;
            top: 20px;
            width: 100px;
        }
        .inquiry__man {
            position: absolute;
            right: 0;
            top: 20px;
            width: 100px;
        }
    }
    @media screen and (max-width:350px) {
        .contact_bannersp {
            width: 245px;
            margin: 90px 20px 0px;
            padding: 60px 20px 0 20px;
            text-align: center;
            background-image: url(../img/contact_bg_sp.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .contact_bannersp img {
            width: 230px;
            margin-bottom: 15px;
        }
        .inquiry {
            height: 160px;
        }
    }
    .inquiry__woman {
        position: absolute;
        left: 0;
        top: 20px;
        width: 80px;
    }
    .inquiry__man {
        position: absolute;
        right: 0;
        top: 20px;
        width: 80px;
    }
}


}

/* フッター TL用 */
@media screen and (min-width:551px) and (max-width:750px) {
    .inquiry {
        height: 250px;
        margin: 0 2%;
    }
    
    .inquiry__woman {
        position: absolute;
        left: 0;
        top: 30px;
        width: 160px;
    }
    
    .inquiry__man {
        position: absolute;
        right: 0;
        top: 30px;
        width: 160px;
    }
    
    .company__flex {
        flex-direction: column;
        margin: 40px 6.5%;
        width: 87%;
    }
    
    .copyright {
        border-top: 1px solid #ccc;
        margin: 40px 40px 20px 40px;
    }
    
    .copyright p {
        text-align: center;
        font-size: 12px;
    }
}

/* フッター PC用 */
@media screen and (min-width:751px) {
    .inquiry {
        height: 250px;
    }
    
    .inquiry p {
        font-size: 28px;
        padding-top: 30px;
    }
    
    .inquiry__woman {
        position: absolute;
        left: 0;
        top: 60px;
        width: 170px;
    }
    
    .inquiry__man {
        position: absolute;
        right: 0;
        top: 60px;
        width: 170px;
    }
    
    .company__flex {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .company__text {
        width: 48%;
    }
    
    .company__text img {
        width: 40%;
    }
    
    .company__text h2 {
        font-size: 25px;
    }
    
    .company__text p {
        font-size: 12px;
        line-height: 2em;
    }
    
    .company__text p a {
        margin-bottom: -10px;
        display: block;
    }
    
    .company__table {
        width: 48%;
        margin-top: 0;
        margin-right: 20px;
    }
    
    .company__table th {
        font-size: 14px;
    }
    
    .company__table td {
        font-size: 14px;
    }
    
    .copyright {
        border-top: 1px solid #ccc;
        margin: 40px 62px 20px 40px;
    }
    
    .copyright p {
        text-align: center;
        font-size: 12px;
    }
    
    @media screen and (min-width:901px) {
        .inquiry__woman {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
        }
        .inquiry__man {
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
        }
    }
    
    @media screen and (min-width:1180px) {
        .company__table {
            margin-right: 0px;
        }
    }
}

/* フッター end */

/* オンライン相談のウィンドウ SP用 */
@media screen and (max-width: 660px) {
    .online-pc-only {
        display: none;
    }
    
    .online-window {
        position: fixed;
        bottom: 20px;
        right: 60px;
        z-index: 20;
        background-color: #fff;
    }
    
    .online-window .online-close {
        position: absolute;
        top: 6px;
        right: 10px;
        font-weight: bold;
        font-size: 26px;
        color: #000;
        z-index: 30;
        cursor: pointer;
    }
    
    .online-window img {
        vertical-align: top;
    }
    
    .online-window a:hover {
        opacity: 0.8;
    }
    
    @media screen and (max-width: 360px) {
        .online-window {
            right: 0;
            margin-left: 2%;
        }
        .online-window .online-close {
            top: 10px;
            right: 18px;
        }
        .online-window img {
            width: 98%;
            height: 98%;
        }
    }
}

/* オンライン相談のウィンドウ TL・PC用 */
@media screen and (min-width: 661px) {
    .online-sp-only {
        display: none;
    }
    
    .online-window {
        position: fixed;
        bottom: 20px;
        right: 70px;
        z-index: 20;
    }
    
    .online-window .online-close {
        position: absolute;
        top: 6px;
        right: 10px;
        font-weight: bold;
        font-size: 26px;
        color: #000;
        z-index: 30;
        cursor: pointer;
    }
    
    .online-window img {
        vertical-align: top;
    }
    
    .online-window a:hover {
        opacity: 0.93;
    }
}

/* オンライン相談のウィンドウ end */

/* 以降20210408追加 */

/* 導入の流れ ガイド箇所 sp start */
@media screen and (max-width:900px) {
    .sub-flow__guide {
        background-color: #fff;
        padding: 20px;
        margin: 20px 0 0 0;
    }
    
    .sub-flow__guide--area {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .sub-flow__guide--seminar {
        width: 100%;
        background: url(../img/guide-01_sp.png) no-repeat;
        background-size: 100%;
        height: 35vw;
        position: relative;
        margin-bottom: 4%;
    }
    
    .sub-flow__guide--cnsultation {
        width: 100%;
        background: url(../img/guide-02_sp.png) no-repeat;
        background-size: 100%;
        height: 35vw;
        position: relative;
        margin-bottom: 4%;
    }
    
    .sub-flow__guide--e-learning {
        width: 100%;
        background: url(../img/guide-03_sp.png) no-repeat;
        background-size: 100%;
        height: 35vw;
        position: relative;
    }
    
    .sub-flow__guide--link {
        position: absolute;
        bottom: 6%;
        right: 0%;
        margin: auto;
    }
    
    .sub-flow__guide--link a {
        text-decoration: none;
        font-size: 2.6vw;
        font-weight: bold;
        color: #333;
    }
    
    .sub-flow__guide--link a:hover {
        opacity: 0.75;
    }
}

/* 導入の流れ ガイドの箇所 pc start */
@media screen and (min-width:901px) {
    .sub-flow__guide {
        width: auto;
        background-color: #fff;
        margin: 40px 0 0 0;
        padding: 50px;
    }
    
    .sub-flow__guide--area {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .sub-flow__guide--seminar {
        width: 33.33%;
        max-width: 300px;
        background: url(../img/guide-01_pc.png) no-repeat;
        background-size: 100%;
        height: 36.5vw;
        max-height: 390px;
        position: relative;
    }
    
    .sub-flow__guide--cnsultation {
        width: 33.33%;
        max-width: 300px;
        background: url(../img/guide-02_pc.png) no-repeat;
        background-size: 100%;
        height: 36.5vw;
        max-height: 390px;
        position: relative;
    }
    
    .sub-flow__guide--e-learning {
        width: 33.34%;
        max-width: 300px;
        background: url(../img/guide-03_pc.png) no-repeat;
        background-size: 100%;
        height: 36.5vw;
        max-height: 390px;
        position: relative;
    }
    
    .sub-flow__guide--link {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
    }
    
    .sub-flow__guide--link a {
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
    
    .sub-flow__guide--link a:hover {
        opacity: 0.75;
    }
    
    @media screen and (min-width:1035px) {
        .sub-flow__guide--seminar,
        .sub-flow__guide--cnsultation,
        .sub-flow__guide--e-learning {
            height: 390px;
        }
    }
}

/* 導入の流れ sp start */
@media screen and (max-width:750px) {
    .sub-flow {
        background-color: #E3ECF8;
        padding: 0 10px 30px;
    }
    
    .sub-flow--container {
        max-width: 720px;
    }
    
    .sub-flow--container h2 {
        margin: 0;
        font-size: 18px;
        padding: 30px 0 10px 0;
        text-align: left;
        font-weight: normal;
    }
    
    .sub-flow__solution {
        margin-top: 70px;
    }
    
    .sub-flow__solution--area {
        position: relative;
    }
    
    .sub-flow__solution--area img {
        position: absolute;
        top: -4.5vw;
        left: 2vw;
        width: 16vw;
    }
    
    .sub-flow__solution--area h3 {
        height: 8vw;
        line-height: 8vw;
        padding-left: 20vw;
        margin-top: 27px;
        font-size: 4vw;
        background-color: #DAE3F2;
    }
    
    .sub-flow__solution--area p {
        margin-top: 1.5em;
    }
    
    .sub-flow__solution--area .btn-green {
        clear: both;
        margin: 1.5em auto 2.5em;
        text-align: center;
        width: 85%;
        height: 7vw;
        line-height: 7vw;
        border-radius: 3.5vw;
        letter-spacing: 0;
        background-color: #0AC0A8;
    }
    
    .sub-flow__solution--area .btn-green a {
        display: block;
        color: #fff;
        text-decoration: none;
        font-size: 3.2vw;
    }
    
    .sub-flow__solution--area .btn-green:hover {
        opacity: 0.75;
    }
    
    @media screen and (max-width:500px) {
        .sub-flow__solution--area .btn-green {
            width: 90%;
            height: 9vw;
            line-height: 9vw;
            border-radius: 4.5vw;
        }
        .sub-flow__solution--area .btn-green a {
            white-space: nowrap;
        }
    }
    
    @media screen and (max-width:350px) {
        .sub-flow__solution--area .btn-green a {
            font-size: 2.4vw;
        }
    }
    
    .sub-flow__flow {
        background-color: #fff;
        margin: 20px 0;
        padding: 20px;
    }
    
    .sub-flow__flow .btn-orange {
        background-color: #F39800;
        width: 25vw;
        height: 7vw;
        line-height: 7vw;
        border-radius: 1.725vw;
        text-align: center;
        color: #fff;
    }
    
    .sub-flow__step {
        margin: 10px auto 30px;
        background-color: #E3ECF8;
        padding: 1.5em;
    }
    
    .sub-flow__step h3 {
        margin: 0 0 0.5em;
    }
    
    .sub-flow__step img {
        float: right;
        width: 33%;
        margin: 0.5em 0 0.5em 0.5em;
    }
    
    .sub-flow__step .text-height140 {
        min-height: 140px;
    }
    
    @media screen and (max-width:500px) {
        .sub-flow__step img {
            float: none;
            width: 100%;
            margin: 0;
        }
    }
    
    .sub-flow__step .btn-blue {
        margin: 1.5em auto 2em;
        text-align: center;
        width: 80%;
        height: 7vw;
        line-height: 7vw;
        border-radius: 3.5vw;
        letter-spacing: 0;
        background-color: #3F72B6;
    }
    
    .sub-flow__step .btn-blue a {
        display: block;
        color: #fff;
        text-decoration: none;
        font-size: 3.2vw;
    }
    
    .sub-flow__step .btn-blue:hover {
        opacity: 0.75;
    }
    
    .sub-flow__step .step5-btn {
        height: 8vw;
        border-radius: 4vw;
        padding: 1% 0;
        box-sizing: border-box;
    }
    
    .sub-flow__step .step5-btn a {
        line-height: 110%;
    }
    
    @media screen and (max-width:500px) {
        .sub-flow__step .btn-blue {
            width: 90%;
            height: 9vw;
            line-height: 9vw;
            border-radius: 4.5vw;
        }
        .sub-flow__step .btn-blue a {
            white-space: nowrap;
        }
        .sub-flow__step .step5-btn {
            padding: 1.5vw 0;
            height: 10vw;
            line-height: 10vw;
            border-radius: 5vw;
            box-sizing: border-box;
        }
        .sub-flow__step .step5-btn a {
            line-height: 120%;
        }
    }
    
    @media screen and (max-width:350px) {
        .sub-flow__step .btn-blue a {
            font-size: 2.4vw;
        }
    }
}

/* 導入の流れ pc start */
@media screen and (min-width:751px) {
    .sub-flow {
        background-color: #E3ECF8;
        padding-bottom: 40px;
    }
    
    .sub-flow--container {
        max-width: 1000px;
        padding: 0 10px;
        margin: 0 auto;
    }
    
    .sub-flow--container h2 {
        margin: 20px 0;
        font-size: 28px;
        padding: 20px 0;
        text-align: left;
        font-weight: normal;
    }
    
    .sub-flow__solution {
        margin-top: 70px;
    }
    
    .sub-flow__solution--area {
        position: relative;
    }
    
    .sub-flow__solution--area h3 {
        height: 50px;
        line-height: 50px;
        padding-left: 152px;
        margin-top: 27px;
        background-color: #DAE3F2;
    }
    
    .sub-flow__solution--area img {
        position: absolute;
        top: -36px;
        left: 16px;
        width: 120px;
    }
    
    .sub-flow__solution--area p {
        padding-left: 152px;
    }
    
    .sub-flow__solution--area .btn-green {
        clear: both;
        margin: 1.5em auto 2.5em;
        text-align: center;
        width: 380px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        letter-spacing: 0;
        background-color: #0AC0A8;
    }
    
    .sub-flow__solution--area .btn-green a {
        display: block;
        color: #fff;
        text-decoration: none;
    }
    
    .sub-flow__solution--area .btn-green:hover {
        opacity: 0.75;
    }
    
    .sub-flow__flow {
        width: auto;
        background-color: #fff;
        margin: 40px 0 0 0;
        padding: 50px;
    }
    
    .sub-flow__flow .btn-orange {
        background-color: #F39800;
        width: 150px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        text-align: center;
        color: #fff;
    }
    
    .sub-flow__step {
        margin: 10px auto 30px;
        background-color: #E3ECF8;
        padding: 1.5em;
    }
    
    .sub-flow__step h3 {
        margin: 0;
    }
    
    .sub-flow__step img {
        float: right;
        width: 201px;
        margin: 1em 0 1em 1em;
    }
    
    .sub-flow__step .text-height140 {
        min-height: 140px;
    }
    
    .sub-flow__step .btn-blue {
        margin: 1.5em auto;
        text-align: center;
        width: 320px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        letter-spacing: 0;
        background-color: #3F72B6;
    }
    
    .sub-flow__step .btn-blue a {
        display: block;
        color: #fff;
        text-decoration: none;
    }
    
    .sub-flow__step .hover:hover {
        opacity: 0.75;
    }
    
    .sub-flow__step5 .step5-btn {
        line-height: 100%;
        padding: 5px;
        box-sizing: border-box;
    }
    
    .sub-flow__step .step5-btn {
        height: 50px;
        line-height: 110%;
        border-radius: 25px;
        padding: 8px;
        box-sizing: border-box;
    }
}

/* ステップのcoming Soon ここから リンク設置後削除予定*/
.step4-btn,
.step5-btn {
    position: relative
}
.step4-btn a,
.step5-btn a {
    cursor: default;
}
.step4-btn .coming-soon-blue:after {
    content: "Coming soon";
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 16px;
    color: #3F72B6;
}
.step5-btn .coming-soon-blue:after {
    content: "Coming soon";
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 16px;
    color: #3F72B6;
}
@media screen and (max-width:750px) {
    .step5-btn .coming-soon-blue:after {
        top: 55px;
    }
}
@media screen and (max-width:500px) {
    .step4-btn .coming-soon-blue:after {
        top: 30px;
    }
    
    .step5-btn .coming-soon-blue:after {
        top: 50px;
    }
}

/* ステップのcoming Soon ここまで*/

/* FAQ sp start */
@media screen and (max-width:750px) {
    .faq {
        background-color: #E3ECF8;
        padding: 20px 0;
    }
    
    .faq__container {
        max-width: 720px;
        padding: 0 10px;
        margin: 0 auto;
    }
    
    .faq__container h2 {
        margin: 20px 0;
        font-size: 28px;
        padding: 20px 0;
        text-align: left;
        font-weight: normal;
    }
    
    .faq__area {
        background-color: #fff;
        margin-top: 30px;
        padding: 20px;
    }
    
    .faq__search {
        margin: 0 auto;
        background-color: #E3ECF8;
        padding: 0.5em 10%;
        box-sizing: border-box;
    }
    
    .faq__search--keyworrd {
        text-align: center;
        font-weight: bold;
        margin: 1em 0;
    }
    
    .faq__search form {
        width: 100%;
        display: flex;
    }
    
    .faq__search input[type="text"] {
        width: 85%;
        height: 25px;
        margin-right: 10px;
        border-radius: 0;
    }
    
    .faq__search input[type="button"] {
        width: 77px;
        height: 30px;
        line-height: 30px;
        background-color: #3f72b7;
        color: #fff;
        border-style: none;
        -webkit-appearance: none;
        border-radius: 0;
    }
    /* サファリ用 */
    
    _::-webkit-full-page-media,
    _:future,
     :root .faq__search input[type="text"] {
        height: 30px;
    }
    
    _::-webkit-full-page-media,
    _:future,
     :root .faq__search input[type="button"] {
        height: 34px;
        font-size: 16px;
    }
    
    @media screen and (max-width:750px) {
        .faq__search input[type="button"] {
            margin-top: 1px;
        }
    }
    
    .faq__search p {
        font-size: 2.5vw;
        letter-spacing: 0;
    }
    
    .faq__category {
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    
    .faq__category--all,
    .faq__category--service,
    .faq__category--procedure {
        width: 100%;
        height: 48px;
        margin-top: 3%;
        line-height: 48px;
        color: #fff;
        background-color: #3f72b7;
        text-align: center;
        letter-spacing: 0;
        cursor: pointer;
        position: relative;
    }
    
    .faq__category--active {
        background-color: #09c1a8;
    }
    
    #faq__area dl {
        margin-top: 25px;
    }
    
    #faq__area dt {
        display: block;
        padding: 1em 40px 1em 55px;
        margin-top: 15px;
        cursor: pointer;
        background-color: #E3ECF8;
        position: relative;
    }
    
    #faq__area dt:before {
        position: absolute;
        content: "Q";
        left: 13px;
        top: 13px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        padding-left: 8px;
        box-sizing: border-box;
        background-color: #3f72b7;
        color: #fff;
        font-weight: bold;
    }
    
    #faq__area dt:after {
        position: absolute;
        content: "＋";
        right: 13px;
        top: 13px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 20px;
    }
    
    #faq__area .question-active {
        background-color: #3f72b7;
        color: #fff;
    }
    
    #faq__area .question-active:before {
        background-color: #E3ECF8;
        color: #3f72b7;
    }
    
    #faq__area .question-active:after {
        position: absolute;
        content: "ー";
        right: 14px;
        top: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 18px;
    }
    
    #faq__area dd {
        margin: 0;
        padding: 1em 0.5em 1em 1em;
        background-color: #E3ECF8;
        display: none;
    }
    
    #faq__area dd a {
        line-height: 2.5em;
        text-decoration: underline;
    }
    
    #faq__area dd .answer03 {
        margin: 1em 0;
        padding: 0;
    }
    
    #faq__area dd .answer03 li {
        margin: 0;
        list-style-type: none;
        text-indent: -5.5em;
        padding-left: 5.5em;
    }
    
    #faq__area dd .answer12 {
        margin: 1em 0;
        padding: 0;
    }
    
    #faq__area dd .answer12 li {
        margin: 0;
        list-style-type: none;
        text-indent: -1em;
        padding-left: 1em;
    }
    
    #faq__area dt .highlight {
        background-color: yellow;
        color: #333;
    }
    
    #faq__area dd .highlight {
        background-color: yellow;
    }
}

/* FAQ pc start */
@media screen and (min-width:751px) {
    .faq {
        background-color: #E3ECF8;
        padding: 40px 0;
    }
    
    .faq__container {
        max-width: 1000px;
        padding: 0 10px;
        margin: 0 auto;
    }
    
    .faq__container h2 {
        margin: 20px 0;
        font-size: 28px;
        padding: 20px 0;
        text-align: left;
        font-weight: normal;
    }
    
    @media screen and (max-width:1080px) {
        .faq__description {
            margin-right: 40px;
        }
    }
    
    .faq__area {
        background-color: #fff;
        margin-top: 30px;
        padding: 50px 50px 30px;
    }
    
    .faq__search {
        margin: 0 auto;
        background-color: #E3ECF8;
        max-width: 790px;
        padding: 0.5em 100px;
        box-sizing: border-box;
    }
    
    .faq__search--keyworrd {
        text-align: center;
        font-weight: bold;
        margin: 1em 0;
    }
    
    .faq__search form {
        width: 100%;
        display: flex;
    }
    
    .faq__search input[type="text"] {
        width: 85%;
        height: 24px;
        margin-right: 10px;
    }
    
    .faq__search input[type="button"] {
        width: 77px;
        height: 30px;
        line-height: 30px;
        background-color: #3f72b7;
        color: #fff;
        border-style: none;
        -webkit-appearance: none;
        border-radius: 0;
    }
    /* サファリ用 */
    
    _::-webkit-full-page-media,
    _:future,
     :root .faq__search input[type="text"] {
        height: 30px;
    }
    
    _::-webkit-full-page-media,
    _:future,
     :root .faq__search input[type="button"] {
        height: 34px;
        font-size: 16px;
    }
    
    .faq__search p {
        font-size: 90%;
        letter-spacing: 0;
    }
    
    .faq__category {
        margin: 35px auto 20px;
        max-width: 790px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .faq__category--all,
    .faq__category--service,
    .faq__category--procedure {
        width: 32.5%;
        height: 48px;
        line-height: 48px;
        color: #fff;
        background-color: #3f72b7;
        text-align: center;
        font-size: 15px;
        letter-spacing: 0;
        cursor: pointer;
        position: relative;
    }
    
    @media screen and (max-width:900px) {
        .faq__category--all,
        .faq__category--service,
        .faq__category--procedure {
            font-size: 1.6vw;
        }
    }
    
    .faq__category--active {
        background-color: #09c1a8;
    }
    
    .faq__category--active:after {
        position: absolute;
        display: block;
        content: "";
        width: 0;
        height: 0;
        bottom: -8px;
        left: 50%;
        margin-left: -8px;
        border-width: 8px 8px 0 8px;
        border-style: solid;
        border-color: #09c1a8 transparent transparent transparent;
    }
    
    #faq__area dl {
        margin-top: 25px;
    }
    
    #faq__area dt {
        display: block;
        padding: 1em 40px 1em 55px;
        margin-top: 15px;
        cursor: pointer;
        background-color: #E3ECF8;
        position: relative;
    }
    
    #faq__area dt:before {
        position: absolute;
        content: "Q";
        left: 13px;
        top: 13px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        padding-left: 8px;
        box-sizing: border-box;
        background-color: #3f72b7;
        color: #fff;
        font-weight: bold;
    }
    
    #faq__area dt:after {
        position: absolute;
        content: "＋";
        right: 13px;
        top: 13px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 20px;
    }
    
    #faq__area .question-active {
        background-color: #3f72b7;
        color: #fff;
    }
    
    #faq__area .question-active:before {
        background-color: #E3ECF8;
        color: #3f72b7;
    }
    
    #faq__area .question-active:after {
        position: absolute;
        content: "ー";
        right: 14px;
        top: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        font-size: 18px;
    }
    
    #faq__area dd {
        margin: 0;
        padding: 1em 1em 1em 55px;
        background-color: #E3ECF8;
        display: none;
    }
    
    #faq__area dd a {
        line-height: 2em;
    }
    
    #faq__area dd .answer03 {
        margin: 1em 0;
        padding: 0;
    }
    
    #faq__area dd .answer03 li {
        margin: 0;
        list-style-type: none;
        text-indent: -5.5em;
        padding-left: 5.5em;
    }
    
    #faq__area dd .answer12 {
        margin: 1em 0;
        padding: 0;
    }
    
    #faq__area dd .answer12 li {
        margin: 0;
        list-style-type: none;
        text-indent: -1em;
        padding-left: 1em;
    }
    
    #faq__area dt .highlight {
        background-color: yellow;
        color: #333;
    }
    
    #faq__area dd .highlight {
        background-color: yellow;
    }
}

/* 20210912追加 */

/* 無料ダウンロードボタン sp start */
@media screen and (max-width:750px) {
    .download__area {
        margin-top: 4vw;
    }
    
    .download__area p {
        text-align: center;
        font-size: 3vw;
        line-height: 1.8em;
    }
    
    .download__area p strong {
        font-size: 3.4vw;
    }
    
    @media screen and (max-width:500px) {
        .download__area p strong {
            font-size: 3.25vw;
        }
    }
}

/* 無料ダウンロードボタン pc start */
@media screen and (min-width:751px) {
    .download__area {
        margin-top: 40px;
    }
    
    .download__area p {
        text-align: center;
        font-size: 18px;
        line-height: 1.8em;
    }
    
    .download__area p strong {
        font-size: 20px;
    }
}

/* FAQ（トップ） start */
.top-faq {}
.top-faq__area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.top-faq__area--first {
    margin-top: 60px;
}
.top-faq__area--box {
    width: 49%;
    margin-bottom: 2%;
}
.top-faq__area--box dl {
    margin: 0;
    padding: 0;
}
.top-faq__area--box dt {
    margin: 0;
    padding: 15px 3px 15px 50px;
    position: relative;
    color: #3f72b7;
    font-weight: bold;
}
.top-faq__area--box dt:before {
    position: absolute;
    content: "Q";
    left: 13px;
    top: 13px;
    width: 30px;
    height: 30px;
    line-height: 27px;
    border-radius: 15px;
    padding-left: 8px;
    box-sizing: border-box;
    background-color: #3f72b7;
    color: #fff;
    font-weight: bold;
}
.top-faq__area--box dd {
    margin: 0;
    padding: 15px 3px 15px 50px;
    position: relative;
    color: #333;
}
.top-faq__area--box dd span {
    letter-spacing: 0;
}
.top-faq__area--box dd:before {
    position: absolute;
    content: "A";
    left: 13px;
    top: 13px;
    width: 30px;
    height: 30px;
    line-height: 27px;
    border-radius: 15px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: #e3ecf8;
    color: #3f72b7;
    font-weight: bold;
}

/* FAQ（トップ） sp start */
@media screen and (max-width:750px) {
    .top-faq__area {
        display: flex;
        flex-direction: column;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    
    .top-faq__area--box {
        width: 100%;
    }
}

/* XCシリーズとは start */
.xc-series {
    margin-top: 60px;
    background-color: #3f72b7;
}
.xc-series__area {
    padding: 30px 0 40px;
    width: 600px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}
.top-faq__area--first {
    margin-top: 40px;
}
.xc-series__area p {
    color: #fff;
}

/* XCシリーズとは sp start */
@media screen and (max-width:750px) {
    .xc-series {
        margin-top: 40px;
    }
    
    .xc-series__area {
        width: auto;
        margin: 0 4%;
    }
}

/* 20211027 ---------------------------------------------------*/

/* 活用事例 start */
.casestudies {
    background-color: #e3ecf8;
    padding-bottom: 80px;
}
.casestudies span {
    color: #3f72b7;
}
.casestudies__blue_midashi {
    background-color: #3f72b7;
    height: auto;
    color: #fff;
    padding: 10px;
}
.casestudies__flex {
    display: flex;
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.1));
}
.casestudies__flex_noshadow {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
    justify-content: space-between;
}
.casestudies--tab-hr {
    margin-top: -24px;
    height: 2px;
    background-color: #3f72b7;
    border: none;
}
.casestudies--container-hr {
    height: 2px;
    background-color: #3f72b7;
    border: none;
}
.casestudies__benefits--hr {
    border-top: 1px dashed #3f72b7;
    border-right: none;
    border-bottom: none;
    border-left: none;
    height: 2px;
}
.casestudies__box--40per {
    margin: 0 0 0 auto;
}
.casestudies__reportlink {
    margin-top: 35px;
    padding: 10px 1%;
    background-color: #E3ECF8;
    border: 1px solid #3f72b7;
    text-align: center;
}
.casestudies__reportlink h3 {
    color: #3f72b7;
    text-align: center;
    height: 40px;
    margin: 0;
    padding: 0px 3% 0px;
    line-height: 3.5em;
    font-size: 22px;
    font-family: "Noto Sans Japanese";
}
.casestudies__reportlink h4 {
    color: #3f72b7;
    text-align: center;
    margin: 0;
    padding: 0px 3% 0px;
    line-height: 3.5em;
    font-size: 26px;
    font-family: "Noto Sans Japanese";
}
.casestudies__reportlink_white_btn_area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.casestudies__reportlink_white_btn {
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
    width: 62%;
    top: 0;
    bottom: 0;
    margin: 10px;
}
.casestudies__reportlink_white_btn h4 {
    color: black;
    font-size: 16px;
    font-family: "Noto Sans Japanese";
    text-align: center;
    line-height: 50px;
}
.casestudies__benefits--imgbox {
    background-color: #e4e9ef;
}
.casestudies__benefits--flex--food-sc01 {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    flex-direction: column;
}

/* 活用事例 SP用・TL用 */
@media screen and (max-width:750px) {
    .casestudies {
        margin: 0 auto;
        padding: 0 10px 10px;
    }
    
    .casestudies__reportlink_white_btn_area {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .casestudies__reportlink_white_btn {
        width: 80%;
    }
    
    .casestudies__flex {
        flex-direction: column;
        position: relative;
        /*margin: 6.5%;*/
    }
    /*iPhone Safariびよーん問題対策*/
    
    .casestudies__flex_img img {
        width: 100%;
    }
    
    .casestudies__head {
        border-radius: 15px 15px 0 0;
        background: url(../img/xc-bg-blue.png) no-repeat left top 30px #3f72b7;
        background-size: 150px 136px;
        text-align: center;
    }
    
    @media screen and (max-width:550px) {
        .casestudies__head {
            background-size: 100px 91px;
        }
    }
    
    .casestudies__benefits--box {
        margin: 10px;
    }
    
    .casestudies__benefits--box--one-thirds {
        margin: 10px 5px;
        padding: 0 10px;
    }
    
    .casestudies__benefits--box--one-thirds img {
        width: 100%;
        margin: 0 5px;
    }
    
    .casestudies__body:nth-child(even) {
        background-color: #fff;
        border-radius: 0 0 15px 15px;
        margin-bottom: 15px;
    }
    
    .casestudies__head h3 {
        margin: 0;
        padding: 5% 6% 0;
        color: #fff;
        font-size: 5.5vw;
        line-height: 1.8em;
        letter-spacing: 0.1em;
        font-family: "Noto Sans Japanese";
    }
    
    .casestudies__head p {
        margin: 0;
        padding: 3% 6% 6%;
        color: #fff;
        font-weight: normal;
    }
    
    .casestudies__body h4 {
        margin: 0;
        padding: 8% 6% 0;
        font-size: 5.5vw;
        line-height: 1.5em;
        text-align: center;
    }
    
    .casestudies__body p {
        margin: 0;
        padding: 3% 6% 0;
        font-weight: normal;
    }
    
    .casestudies__body img {
        display: block;
        padding: 6%;
        width: 88%;
    }
    
    .casestudies__body small {
        display: block;
        text-align: right;
        margin-top: -25px;
        padding: 5px 6% 6% 0;
    }
    
    .casestudies__bg-triangle--bottom {
        position: relative;
    }
    
    .casestudies__bg-triangle--bottom:after {
        content: "";
        position: absolute;
        top: 99%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #3f72b7;
    }
    
    .casestudies__benefits--box--no3b img {
        display: none;
    }
    
    .casestudies__benefits--box--no3b_sp img {
        display: block;
        margin: 0 auto;
        width: 50% !important;
    }
    /*---SP TL--------------------------------------------------*/
    /*------------------ SP TL Section-A Start --------------------------*/
    
    .casestudies__section-a-c_sp {
        display: block !important;
        margin: 0 auto;
    }
    
    .casestudies__section-a-c img {
        display: none !important;
    }
    
    .casestudies__section-a-l img {
        width: 100%;
    }
    
    .casestudies__section-a-r img {
        width: 100%;
    }
    
    .casestudies__flex_noshadow {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
        flex-direction: column;
    }
    
    .casestudies__benefits--box img {
        width: 100%;
    }
    /*------------------ SP TL Section-C Start --------------------------*/
    
    .casestudies__benefits {
        background: #fff;
        padding: 10px 10px 10px;
    }
    
    .casestudies__handyterm--float img {
        padding: 0 10px 0 10px;
    }
    
    .casestudies__handyterm--float img {
        display: none;
    }
    
    .casestudies__handyterm--float_sp {
        padding: 2px;
        margin: 0 auto;
    }
    
    .casestudies__box--40per img {
        width: 100%;
    }
    
    .casestudies__handyterm--float_sp img {
        width: 100%;
    }
    
    .casestudies__box_handyterm--image-c06 {
        display: none;
    }
    
    .casestudies__benefits--box--two-thirds-white {
        width: 96%;
        padding: 0 10px 0 10px;
    }
    
    .casestudies__benefits--box--two-thirds-white img {
        width: 100%;
    }
    
    .casestudies__benefits--box--40percent img {
        width: 100%;
    }
    
    .casestudies__benefits--box--no3a {
        margin: 0px auto;
    }
    
    .casestudies__benefits--box--no3b {
        margin: 0px 30px 0px 0px;
        padding: 2px;
        width: 20%;
    }
    
    .casestudies__benefits--box--no3b_sp img {
        display: block;
    }
    /*------------------ SP TL Section-C  End --------------------------*/
    /*------------------ SP Tab Start ------------------------*/
    
    .tab {
        width: 100%;
        height: auto;
        padding: 5px 5px 0 5px;
        border-radius: 10px 10px 0px 0px;
        margin: 0 auto;
        justify-content: center;
        display: flex;
    }
    
    .tab li {
        background-color: #8fa7c7;
        color: #fff;
        font-size: 20px;
        width: 160px;
        height: auto;
        padding: 15px 0;
        border-radius: 10px 10px 0px 0px;
        margin: 0 10px;
        list-style: none;
    }
    
    .tab li.active {
        background-color: #3f72b7;
        color: #fff;
        font-size: 20px;
        width: 180px;
        height: auto;
        padding: 15px 0;
        border-radius: 10px 10px 0px 0px;
        margin: 0 10px;
        list-style: none;
    }
    
    .area ul.show {
        display: block !important;
        ;
        list-style: none;
        padding-left: 0;
        display: flex;
    }
    
    .area ul {
        display: none !important;
        list-style: none;
        padding-left: 0;
    }
    
    .blue_btn_area {
        width: 100%;
        padding: 20px 0 20px 0;
        text-align: center;
        margin: 4px auto;
        display: flex;
        justify-content: center;
    }
    /*------------------ SP Tab End ------------------------*/
    /*------------------ SP Under the tab Start --------------------------*/
    
    .undertab__nav {
        width: 100%;
        margin: 0 auto;
        letter-spacing: 0.02em;
    }
    
    .undertab__nav ul {
        flex-direction: row;
    }
    
    .undertab__nav li {
        list-style-type: none;
        padding: 0 3%;
        border-left: 2px solid #dde5f2;
        text-align: center;
    }
    
    .undertab__nav li:last-child {
        border-right: 2px solid #dde5f2;
    }
    
    .undertab__nav a {
        display: block;
        line-height: 40px;
        font-size: 20px;
        text-decoration: none;
        color: #333;
        /*font-size: 2vw;*/
    }
    /*------------------ SP Under the tab End --------------------------*/
    /* SP用 */
    
    @media screen and (max-width:550px) {
        .casestudies__head {
            border-radius: 10px 10px 0 0;
        }
        .casestudies__body {
            border-radius: 0 0 10px 10px;
        }
    }
}
.casestudies__reportlink_white_btn {}

/* 活用事例 PC用 */
@media screen and (min-width:751px) {
    /*用途業界ボタン*/
    
    .blue_btn_area {
        width: 100%;
        padding: 20px 0 20px 0;
        text-align: center;
        margin: 4px auto;
        display: flex;
        justify-content: center;
    }
    
    .blue_btn {
        width: 300px;
        height: auto;
        padding: 15px 0;
        border-radius: 10px 10px 0px 0px;
        background-color: #8fa7c7;
        margin: 0 10px;
        float: left;
    }
    
    a .blue_btn {
        text-decoration: none;
        font-family: "Noto Sans Japanese";
        font-size: 20px;
        color: #fff;
        font-weight: bold;
    }
    
    a .blue_btn:hover {
        box-shadow: none;
        margin-top: 2px;
    }
    
    .blue_solid {
        padding: 0px 0 30px 0;
        border-bottom: solid 2px #8fa7c7;
    }
    
    .b_btn_under {
        text-decoration: none;
        font-family: "Noto Sans Japanese";
        font-size: 18px;
        color: #c8d6eb;
        text-align: center;
        margin: 15px 0 30px 0;
    }
    
    .b_btn_under_text {
        margin: 0px 4%;
    }
    
    .blue {
        color: #3F72B6;
        font-weight: bold;
    }
    
    .black {
        color: #333;
    }
    /*用途業界ボタンここまで*/
    /*------------------ PC Under the tab Start --------------------------*/
    
    .undertab__nav {
        text-align: center;
        width: 100%;
        letter-spacing: 0.02em;
        position: relative;
    }
    
    .undertab__nav ul {
        padding: 20px 5px 0 20px;
        display: flex;
        flex-direction: row;
    }
    
    .undertab__nav li {
        list-style-type: none;
        padding: 0 3%;
        border-left: 2px solid #dde5f2;
        text-align: center;
    }
    
    .undertab__nav li:last-child {
        border-right: 2px solid #dde5f2;
    }
    
    .undertab__nav a {
        display: block;
        line-height: 40px;
        font-size: 20px;
        text-decoration: none;
        color: #333;
        /*font-size: 2vw;*/
    }
    /*------------------ PC Under the tab End --------------------------*/
    
    .casestudies--container {
        max-width: 1000px;
        padding: 0 10px;
        margin: 0 auto;
    }
    
    .casestudies--tab-hr {
        height: 2px;
        background-color: #3f72b7;
        border: none;
    }
    
    .casestudies__benefits {
        width: auto;
        background-color: #fff;
        padding: 40px 50px 50px 50px;
    }
    
    .casestudies__flex {
        margin: 20px auto;
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .casestudies__flex--column {
        margin: 10px auto;
        width: 45%;
        flex-direction: column;
        display: flex;
        flex-wrap: wrap;
    }
    
    .casestudies__flex--column_l {
        padding-right: 2%;
    }
    
    .casestudies__flex--column_r {
        padding-left: 2%;
    }
    
    .casestudies__benefits--box {
        margin: 5px auto 5px;
    }
    
    .casestudies__benefits--box img {
        width: 100%;
    }
    /*------------------ PC Section-A Start --------------------------*/
    
    .casestudies__section-a-l {
        width: 40%;
        display: flex;
    }
    
    .casestudies__section-a-l img {
        width: 100%;
    }
    
    .casestudies__section-a-c {
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .casestudies__section-a-c img {
        width: 120%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .casestudies__section-a-r {
        width: 40%;
        display: flex;
    }
    
    .casestudies__section-a-r img {
        width: 100%;
    }
    
    .casestudies__section-a-c_sp img {
        display: none !important;
    }
    /*------------------ PC Section-A End --------------------------*/
    /*------------------ PC Section-B Start --------------------------*/
    
    .casestudies__head {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px 15px 0 0;
        background: url(../img/xc-bg-blue.png) no-repeat left top 30px #3f72b7;
        background-size: 198px 180px;
        padding-right: 5%;
        height: 120px;
        text-align: center;
    }
    
    .casestudies__body {
        background-color: #fff;
        border-radius: 0 0 15px 15px;
        padding-right: 3%;
        height: 250px;
        text-align: center;
        margin-bottom: 10%;
    }
    
    .casestudies__head h3 {
        margin: 0;
        padding: 3% 3% 0;
        color: #fff;
        line-height: 1em;
        text-align: center;
        font-size: 20px;
        letter-spacing: 0.1em;
        font-family: "Noto Sans Japanese";
    }
    
    .casestudies__head p {
        padding: 0 6%;
        color: #fff;
    }
    
    .casestudies__body h4 {
        margin: 0;
        padding: 0px 8% 0;
        height: 50px;
        line-height: 3.5em;
        font-size: 26px;
        font-family: "Noto Sans Japanese";
    }
    
    .casestudies__body p {
        padding: 0 3%;
        display: block;
    }
    
    .casestudies__body_bigimage {
        padding: 0 5%;
        width: 350px;
    }
    
    .casestudies__body img {
        display: block;
        padding: 10px 6% 20px;
        width: 88%;
    }
    
    .casestudies__body small {
        display: block;
        text-align: right;
        margin-top: -20px;
        padding: 0 6% 20px;
    }
    
    .casestudies__bg-triangle--left {
        position: relative;
    }
    
    .casestudies__bg-triangle--left:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 99%;
        margin-top: -22px;
        border: 22px solid transparent;
        border-left: 22px solid #3f72b7;
    }
    
    .casestudies__bg-triangle--right {
        position: relative;
    }
    
    .casestudies__bg-triangle--right:after {
        content: "";
        position: absolute;
        top: 50%;
        left: -43px;
        margin-top: -22px;
        border: 22px solid transparent;
        border-right: 22px solid #3f72b7;
    }
    
    .casestudies__bg-triangle--bottom {
        position: relative;
    }
    
    .casestudies__bg-triangle--bottom:after {
        content: "";
        position: absolute;
        top: 99%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #3f72b7;
    }
    /*------------------ PC Section-B End --------------------------*/
    /*------------------ PC Section-C Start ------------------------*/
    
    .casestudies__benefits--box--two-thirds {
        background-color: #E4e9ef;
        width: 60%;
    }
    
    .casestudies__benefits--box--two-thirds-white {
        width: 58%;
        padding: 0 5px 0 5px;
    }
    
    .casestudies__benefits--box--two-thirds p {
        margin: 0 0 0 auto;
    }
    
    .casestudies__benefits--box--one-thirds {
        width: 34%;
    }
    
    .casestudies__benefits--box--one-thirds img {
        width: 100%;
    }
    
    .casestudies__benefits img {
        margin: 0 0 0 auto;
        width: 100%;
    }
    
    .casestudies__benefits--box--no3a {
        margin: 0px auto;
        width: 38%;
    }
    
    .casestudies__benefits--box--no3b {
        margin: 0px 30px 0px 0px;
        padding: 2px;
        width: 20%;
    }
    
    .casestudies__benefits--box--no3b img {
        max-width: 200px;
        height: auto;
        margin-top: 30px;
    }
    
    .casestudies__benefits--box--no3b_sp img {
        display: none;
    }
    /*boxの反転配置*/
    /*
    .casestudies__flex:nth-child(even) .casestudies__head {
        border-radius: 0 15px 15px 0;
        order: 2;
        background-position: right top 30px;
    }
    .casestudies__flex:nth-child(even) .casestudies__body {
        border-radius: 15px 0 0 15px;
        order: 1;
    }
    */
    
    .casestudies__handyterm--float {
        padding: 58px 10px;
        width: 680px;
        float: right;
    }
    
    .casestudies__handyterm--float img {
        width: initial;
    }
    
    .casestudies__handyterm--float h3 {
        text-align: start;
    }
    
    .casestudies__box_handyterm--image-c06 {
        width: 190px;
        margin-top: 29px;
    }
    
    .casestudies__handyterm--float_sp {
        display: none;
    }
    
    .casestudies__tab_contents {
        display: none;
        padding: 40px 40px 0;
        clear: both;
        overflow: hidden;
    }
    /*------------------ TAB Start PC------------------------*/
    
    .tab {
        float: left;
        display: flex;
        position: relative;
        width: 750px;
        height: auto;
        padding: 5px 25px 0 25px;
        border-radius: 10px 10px 0px 0px;
        margin: 0 10px;
        justify-content: center;
    }
    
    .tab li {
        background-color: #8fa7c7;
        color: #fff;
        font-size: 20px;
        width: 300px;
        height: auto;
        padding: 15px 0;
        border-radius: 10px 10px 0px 0px;
        margin: 0 10px;
        float: left;
        list-style: none;
        padding-left: 0;
    }
    
    .tab li.active {
        background-color: #3f72b7;
        color: #fff;
        font-size: 20px;
        width: 300px;
        height: auto;
        padding: 15px 0;
        border-radius: 10px 10px 0px 0px;
        margin: 0 10px;
        float: left;
        list-style: none;
        padding-left: 0;
    }
    
    .area ul {
        margin: 0 auto;
        display: none;
        list-style: none;
        padding-left: 0;
    }
    
    .area ul.show {
        display: block;
        list-style: none;
        padding-left: 0;
        display: flex;
        position: relative;
        justify-content: center;
    }
    /*------------------ TAB下のリンク先取得 ------------------------*/
    
    #industry:checked~#industry_contents,
    #apprication:checked~#apprication_contens {
        display: block;
    }
    /*------------------ TAB End ------------------------*/
}

/* 活用事例 end */