/* element/parenting/agreement.php, Pages/agreement.php */
.margin-bottom-0 {
    margin-bottom: 0;
}

/* Pages/home.php */
.width-60 {
    width: 60%;
}

/* 背景を覆うレイヤー */
.modal {
    display: none;               /* 最初は非表示 */
    position: fixed;
    inset: 0;                    /* top/left/right/bottom:0 の省略形 */
    background: rgba(0,0,0,.5);  /* 半透明の黒 */
    overflow-y: auto;            /* 本文が長いときスクロール */
    z-index: 1000;
}

.display-block {
    display: block ;
}

/* ダイアログ本体を中央寄せ */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px 10px 10px -5px;
}

@media (max-width: 767px) {
    .modal-dialog {
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10%;
        top: 5%;
        bottom: 10%;
    }
}

@media (max-width: 480px) {
    .modal-dialog {
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10%;
        top: 5%;
        bottom: 10%;
    }
    .modal-body {
        height: 180px;
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 80%;
        position: absolute;
        left: 10%;
        right: 10%;
        top: 8%;
        bottom: 10%;
    }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-body {
        height: 400px;
    }
}

.modal-body.height-auto {
    height: auto;
}

/* モーダル表示時に背景のスクロールを止める */
body.modal-open {
    overflow: hidden;
    padding-right: 15px;
}