/**
 * ウィンドウ型モーダル
 */
@media screen and (min-width: 740px) {
    .modal-window {
        display: block;
        width: 100vw;
        height: 1000vh; /* モーダルの背景が切れないように大きめに設定 */
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 9999;
        .overlay {
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        };
        .modal-box {
            display: block;
            box-sizing: border-box;
            width: auto; /* ボックスの縦横幅はコンテンツの縦横幅に追従する */
            max-width: calc(100vw - 60px);
            border: 1px solid #cccccc;
            border-radius: 12px;
            background-color: #FFF;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .modal-box .x-button {
            display: flex;
            width: 36px;
            height: 36px;
            border: 3px solid #ffffff;
            border-radius: 100%;
            background-color: #333333;
            justify-content: center;
            align-items: center;
            cursor:pointer;
            position: absolute;
            top: -18px;
            right: -18px;
            img{
                width: 20px;
                height: 20px;
            }
        }
    }
}
@media screen and (max-width: 739px) {
    .modal-window {
        display: block;
        width: 100vw;
        height: 1000vh; /* モーダルの背景が切れないように大きめに設定 */
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 9999;
        .overlay {
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        };
        .modal-box {
            display: block;
            box-sizing: border-box;
            width: auto; /* ボックスの縦横幅はコンテンツの縦横幅に追従する */
            max-width: calc(100vw - 40px);
            border: 1px solid #cccccc;
            border-radius: 12px;
            background-color: #FFF;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .modal-box .x-button {
            display: flex;
            width: 36px;
            height: 36px;
            border: 3px solid #ffffff;
            border-radius: 100%;
            background-color: #333333;
            justify-content: center;
            align-items: center;
            cursor:pointer;
            position: absolute;
            top: -18px;
            right: -18px;
            img{
                width: 20px;
                height: 20px;
            }
        }
    }
}