.body {
  font-family: 'Zen Maru Gothic', sans-serif;
}
.back_ground_area {
    /* 画像ファイルの指定 */
    background: url(../../layout/new-layout.png) center / cover;
    background-color: white;
    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;
    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    /* background-size: cover; */
    margin-left: auto;
    margin-right: auto;
    width: 480px !important;
    min-height: 100vh;
}

.button_area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.registerBtnArea {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.registerBtn {
    cursor: pointer;
    text-align: center;
    width: 300px;
    height: 60px;
    color: black;
    background-color: white;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 35%);
    font-size: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.loginBtn {
    cursor: pointer;
    text-align: center;
    width: 300px;
    height: 60px;
    color: black;
    background-color: white;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 35%);
    font-size: 20px;
    margin-bottom: 30px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.invisible {
    height: 40rem;
}

@media (max-aspect-ratio: 10/9) {
    .back_ground_area {
        width: 100% !important;
    }

    .invisible {
        height: 32rem;
    }

}

@media screen and (max-width: 375px) {
    .back_ground_area {
        width: 100% !important;
    }

    .invisible {
        height: 25rem;
    }
}

@media only screen and (max-width: 1000px) and (min-width: 768px) {
    .back_ground_area {
        width: 100% !important;
    }

    .invisible {
        height: 40rem;
    }
}