.title {
    font-size: 40px;
    font-weight: 700;
    margin: 20px 0 50px 20px;
}
.damy {
    height: 500px;
    border: solid 1px;
    background-color: #f5fae0;
    margin: 20px;
}
.damy p {
    font-size: 50px;
}
.comment {
    padding: 0 20px;
    line-height: 1.5;
    font-size: 14px;
}




/* 開くボタン（当初の表示画面） */
.button-open {
    display: block;
    margin: 0 auto;
    width: 20rem;
    padding: 1em;
    background-color: #3140c9;
    color: #eaeaea;
    border-radius: 20rem;
    cursor: pointer;
}



/* オーバーレイ（黒い膜） */
.overlay {
    /* 「開く」ボタンを囲むdiv。クリックされるまで非表示 */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: hsla(0, 0%, 0%, 0.502);

    /* 画面領域いっぱいを確保 */
    width: 100%;
    height: 100%;

    z-index: 10;
}


/* モーダルウィンドウ */
/* 「閉じる」ボタンを囲むdiv。開くをクリックされるまで非表示 */
.modal-window {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-color: #dfdddd;
    border-radius: 5px;
    z-index: 11;
    padding: 2rem;
}

/* 閉じるボタン */
.button-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    padding: 1em;
    background-color: #c96931;
    color: #eaeaea;
    border-radius: 20rem;
    cursor: pointer;
}

/* モーダル表示中は背景画面をスクロールさせない。htmlには記述せずjQueryでつけ外し */
.no_scroll {
    overflow: hidden;
}