@charset "UTF-8";

.mobile-header,
.mobile-strategy {
    display: none;
}

footer .company-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
}

footer .company-info span {
    font-size: 1em;
    white-space: nowrap;
}

footer .company-info span + span::before {
    margin: 0 12px;
    content: "|";
}

footer .copyright {
    margin-top: 4px;
    font-size: 0.8em;
}

@media (max-width: 768px) {
    html,
    body {
        height: 100%;
    }

    .desktop-header,
    .marketing {
        display: none;
    }

    .mobile-header,
    .mobile-strategy {
        display: block;
    }

    .mobile-header .mob_nav {
        display: flex;
    }

    .mobile-header .mob_nav a {
        color: #007cb7;
        font-weight: 700;
    }

    .mobile-header .mob_btn {
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
    }

    .intro {
        height: 100%;
    }

    .intro .slide {
        top: 35%;
        transform: none;
    }

    .intro .slide .tt {
        display: none;
    }

    .intro .slide p {
        font-size: 30px;
    }

    .intro .slide i:before {
        height: 15px;
    }

    .intro .logo3 {
        top: 0;
        left: 3%;
        right: auto;
        width: 50%;
    }

    .intro .logo2 {
        top: 45%;
        right: 3%;
        left: auto;
        width: 40%;
    }

    .mobile-strategy .roll_ban img {
        width: 100%;
    }

    .partner {
        padding: 15% 20px;
        overflow: hidden;
    }

    .partner h1 {
        padding-top: 0;
        font-size: 2em;
    }

    .partner p {
        padding: 5% 0;
        font-size: 1em;
    }

    .partner div {
        padding: 0;
    }

    .qanda {
        padding: 10% 20px;
        overflow: hidden;
        color: #fff;
        background: url(../img/qna_bg.png) center / cover;
    }

    .qanda .bg {
        height: auto;
        background: transparent;
    }

    .qanda .inner {
        padding-top: 0;
    }

    .qanda .inner > div {
        max-width: none;
    }

    .qanda .inner > div > div:first-child {
        width: auto;
        height: 22px;
        padding: 3px 10px;
        font-size: 1em;
        line-height: 16px;
    }

    .qanda .inner > div > div:first-child:before {
        right: -22px;
        border-right-width: 22px;
        border-bottom-width: 22px;
    }

    .qanda .inner > div > p {
        padding: 10px 0;
        font-size: 0.875em;
    }

    .qanda .inner > div > p > span {
        font-size: 1.6em;
    }

    .qanda .qa {
        top: 20px;
        right: 0;
        width: 110px;
    }

    .question {
        padding-top: 30px;
    }

    .q_left,
    .q_right {
        float: none;
        padding-top: 25px;
    }

    .gray1,
    .gray2 {
        width: auto;
        height: auto;
        margin: 0;
        padding: 6px 14px;
        font-size: 0.95em;
        line-height: 1.5;
    }

    .white,
    .white2 {
        width: auto;
        height: auto;
        margin: 10px 0 0 30px;
        padding: 10px 16px;
        font-size: 0.9em;
        line-height: 1.6;
        border-radius: 30px;
    }

    .proc {
        padding: 15% 20px 5%;
        text-align: center;
    }

    .proc .inner {
        height: auto;
    }

    .proc h1 {
        padding-top: 0;
        font-size: 2em;
    }

    .proc p {
        padding-top: 5px;
        font-size: 1em;
    }

    .proc .logo4,
    .proc .logo5 {
        display: none;
    }

    .step .bg {
        padding: 5% 20px 15%;
        background: #fff;
    }

    .step ul {
        margin: 0;
    }

    .step ul li.col-xs-2 {
        width: 50%;
        padding-top: 15px;
    }

    .step ul li p {
        color: #fff;
        background: #5cbdd2;
    }

    .step ul li p:before {
        border-bottom-color: #5cbdd2;
    }

    .step ul li h4 {
        padding: 3px 0 10px;
        font-size: 1em;
    }

    .survey {
        padding: 10% 20px 15%;
        overflow: hidden;
    }

    .survey .tt img {
        width: 80px;
    }

    .survey h4 {
        padding: 20px 0;
        font-size: 1.25em;
    }

    .survey p {
        padding-bottom: 20px;
        font-size: 1em;
    }

    .survey .logo6,
    .survey .logo7,
    .survey .logo8 {
        display: none;
    }

    #mainForm .cover {
        font-size: 18px;
    }

    footer {
        padding: 20px;
    }

    footer .inner {
        max-width: 420px;
    }

    footer .company-info {
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    footer .company-info span + span::before {
        display: none;
    }

    footer .copyright {
        margin-top: 10px;
    }
}

@media (max-width: 420px) {
    .intro .slide p {
        font-size: 26px;
    }

    .qanda {
        padding-right: 14px;
        padding-left: 14px;
    }

    footer .company-address {
        max-width: 100%;
        white-space: normal;
    }
}