@charset "utf-8";

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

    /*全て共通：hideエリアをはじめは非表示*/
    .hide-area {
        display: none;
    }

    .info-list {
        list-style: none;
        padding: 0;
    }

    .modaal-container {
        max-width: 400px;
    }

    .modaal-content-container {
        width: 100%;
    }

    .modaal-inner-wrapper {
        padding: 0;
    }

    /*全て共通：モーダルのボタンの色を変更したい場合*/
    .modaal-close:after,
    .modaal-close:before {
        background: #ccc;
    }

    .modaal-close:focus:after,
    .modaal-close:focus:before,
    .modaal-close:hover:after,
    .modaal-close:hover:before {
        background: #666;
    }

    /*確認を促すモーダル：タイトルの色を変更したい場合*/
    #modaal-title {
        font-size: 1.2rem;
        text-align: center;
        margin: 0 0 20px 0;
    }

    /*動画表示のモーダル：余白を変更したい場合*/
    .modaal-video .modaal-inner-wrapper {
        padding: 0;
    }
}

@media screen and (min-width: 901px) {

    /*全て共通：hideエリアをはじめは非表示*/
    .hide-area {
        display: none;
    }

    .info-list {
        list-style: none;
        padding: 0;
    }

    .modaal-container {
        max-width: 1500px;
    }

    .modaal-content-container {
        width: 100%;
    }

    /*全て共通：モーダルのボタンの色を変更したい場合*/
    .modaal-close:after,
    .modaal-close:before {
        background: #ccc;
    }

    .modaal-close:focus:after,
    .modaal-close:focus:before,
    .modaal-close:hover:after,
    .modaal-close:hover:before {
        background: #666;
    }

    /*確認を促すモーダル：タイトルの色を変更したい場合*/
    #modaal-title {
        font-size: 1.2rem;
        text-align: center;
        margin: 0 0 20px 0;
    }

    /*動画表示のモーダル：余白を変更したい場合*/
    .modaal-video .modaal-inner-wrapper {
        padding: 0;
    }
}