@charset 'UTF-8';

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

    .cp-main-area {
        width: 100%;
        background: rgba(128, 167, 196, 1)
    }

    .cp-main-inn {
        width: 100%;
    }

    .cp-contents-area {
        width: 100%;
        margin: 0 auto;
        font-size: calc(16px + 2 * (100vw - 360px)/474);
        background-color: rgba(256, 256, 256, 0.75);
    }

    .cp-contents-con {
        width: 90%;
        margin: 0 auto 0;
        padding: 1.5rem 0 1.5rem;
    }

    .cp-howto-step {
        width: 100%;
        margin: 0 auto 1.5rem;
    }

    .caution-text {
        font-weight: 500;
    }

}




@media screen and (min-width: 835px),
print {

    .cp-main-area {
        width: 100%;
        background: rgba(128, 167, 196, 1)
    }

    .cp-main-inn {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
    }

    .cp-contents-area {
        width: 100%;
        margin: 0 auto;
        font-size: calc(16px + 2 * (100vw - 835px)/587);
        background-color: rgba(256, 256, 256, 0.75);
    }

    @media screen and (min-width: 1423px) {
        .cp-contents-area {
            font-size: 18px;
        }
    }

    .cp-contents-con {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 2.5% 5% 5%;
    }

    .cp-howto {
        width: 100%;
        margin: 0 auto 0;
    }

    .cp-howto-step {
        width: 100%;
        margin: 0 auto 2rem;
    }

    .cp-howto map:hover {
        cursor: pointer;
    }

    .caution-text-area {
        padding-bottom: 0;
    }

    .caution-text {
        font-weight: 500;
    }

}