body {
    font-family: 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
    text-align: justify;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

.disp-sp {
    display: none;
}

.sans_txt {
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Arial', sans-serif;
}

a:hover {
    opacity: 0.7;
}

.hero_bottom {
    text-align: center;
    color: #fff;
    background-color: #150201;
    font-size: clamp(17px, 2vw, 24px);
    padding: 20px 0;
    letter-spacing: 0.15em;
}

.browser {
    background-color: #213043;
    padding: 40px 0;
}

.browser_inner {
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

.browser_inner .box {
    background-color: #150201;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 5%;
    padding: 30px;
}

.browser_inner .box .image {
    width: 35%;
}

.browser_inner .box .txt {
    width: auto;
    font-size: clamp(12px, 1.4vw, 17px);
    line-height: 2;
}

.browser_inner .note {
    font-size: 10px;
    color: #fff;
    margin-top: 10px;
}

.bg {
    background-color: #f8f3f4;
    padding: 50px 0;
}

.bg_inner {
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

.bg_inner .map_ttl {
    color: #700b2b;
    font-size: clamp(16px, 2vw, 22px);
}

.bg_inner .image {
    position: relative;
    overflow-y: scroll;
    text-align: center;
}

.bg_inner .image::-webkit-scrollbar {
    display: none;
}

.bg_inner .grab {
    cursor: grab;
}

.bg_inner .image .map {
    max-width: none;
    width: auto;
}

.bg_inner .image .vr_icon {
    position: absolute;
    width: 45px;
    filter: drop-shadow(3px 3px 3px #00000054);
}

.bg_inner .image .room_link {
    position: absolute;
    width: 100px;
    filter: drop-shadow(3px 3px 3px #00000054);
}


@keyframes move-y {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(5px);
    }
}



.bg_inner .list_ttl {
    color: #666666;
    font-size: clamp(16px, 2vw, 22px);
    margin-bottom: 10px;
}

.list_contents {
    display: flex;
    flex-direction: column;
    gap: 50px 0;
    margin: 80px auto 0;
}

.list_table {
    display: grid;
    grid-template-columns: 40% 1fr 1fr 1fr 1fr;
    font-size: clamp(11px, 1.5vw, 17px);
}

.list_table .head,
.list_table .name,
.list_table .cell,
.list_table .btn {
    border: 1px solid #b3b3b3;
    padding: 5px 20px;
    display: flex;
    align-items: center;
}

.list_table .col {
    margin-left: -1px;
}

.list_table .head {
    background-color: #666666;
    color: #fff;
    grid-row: 1;
    text-align: center;
    justify-content: center;
}

.list_table .name {
    color: #fff;
    background-color: #013366;
    grid-column: 1/2;
}

.list_table .cell {
    background-color: #fff;
    color: #666666;
    justify-content: center;
    text-align: center;
    padding: 5px;
}

.list_table .btn {
    background-color: #fff;
}

.list_table a {
    display: block;
    max-width: 50px;
    width: 45%;
    margin: 0 auto;
}

.list_table .name,
.list_table .cell,
.list_table .btn {
    margin-top: -1px;
}




.map_contents {
    display: flex;
    flex-direction: column;
    gap: 40px 0;
}

.map01 .map_img {
    margin-top: 10px;
}

.map01 .map {
    height: 732px;
}

.map01 .vr_icon {
    top: 270px;
    left: 600px;
    animation: move-y .6s infinite alternate ease-in-out;
}

.map02 .map {
    height: 571px;
}

.map02 .map_img {
    margin-top: 20px;
}

.map02 .vr_icon {
    top: 315px;
    left: 612px;
    animation: move-y .6s infinite alternate ease-in-out;
}

.map02 .icon01 {
    top: 400px;
    left: 265px;
    animation: move-y .6s infinite alternate ease-in-out;
}

.map03 .map_img {
    margin-top: 20px;
}

.map03 .map {
    height: 456px;
}

.map03 .vr_icon {
    top: 148px;
    left: 728px;
    animation: move-y .6s infinite alternate ease-in-out;
}

.map04 .map_img {
    margin-top: 10px;
}

.map04 .map {
    height: 428px;
}

.map04 .vr_icon {
    top: 143px;
    left: 691px;
    animation: move-y .6s infinite alternate ease-in-out;
}

.map04 .icon01 {
    top: 250px;
    left: 330px;
    animation: move-y .6s infinite alternate ease-in-out;
}

.map04 .icon02 {
    top: 300px;
    left: 550px;
    animation: move-y .8s infinite alternate ease-in-out;
}

.map04 .icon03 {
    top: 230px;
    left: 780px;
    animation: move-y .6s infinite alternate ease-in-out;
}







.tel_wrap {
    background: #FEF8EA;
    border: 2px solid #DBD5C7;
    max-width: 870px;
    width: 90%;
    margin: 5% auto;
    padding: 20px;
}

.tel_wrap .ttl {
    text-align: center;
    font-size: clamp(14px, 1.6vw, 18px);
}

.tel_wrap .lead {
    font-size: clamp(13px, 1.4vw, 15px);
}

.tel_wrap .txt {
    font-size: clamp(12px, 1.4vw, 15px);
}

.tel_wrap .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 10px;
}

.tel_wrap .flex .btn {
    width: 25%;
    margin: 0 auto;
}

.tel_wrap .flex .tel_img_wrap {
    width: 50%;
    border-left: 1px solid #150201;
    padding-left: 20px;
}

.tel_wrap .flex .tel_img_wrap .tokyo_tel {
    margin: 5px 0 10px;
}

.tel_wrap .flex .tel_img_wrap a {
    display: block;
    width: 75%;
    margin-bottom: 5px;
}

.bottom_note {
    color: #999999;
    font-size: 10px;
    max-width: 1054px;
    width: 90%;
    margin: 0 auto 50px;
}

/* SPのみ */
@media screen and (max-width:730px) {
    .disp-sp {
        display: block;
    }

    .disp-pc {
        display: none !important;
    }

    .browser {
        padding: 20px 0;
    }

    .browser_inner .box {
        flex-direction: column;
        gap: 25px 0;
        padding: 20px 10px;
    }

    .browser_inner .box .image {
        width: 70%;
    }

    .browser_inner .box .txt {
        text-align: center;
    }

    .bg {
        padding: 40px 0;
    }

    .bg_inner {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .bg_inner .image .vr_icon {
        width: 40px;
    }

    .bg_inner .image .room_link {
        width: 75px;
    }

    .bg_inner .map_ttl {
        width: 95%;
        margin: 0 auto;
    }

    .bg_inner .scroll_icon {
        width: 90%;
        margin: 20px auto 0;
    }

    .map_contents {
        gap: 80px 0;
    }

    .map01 .map {
        height: 632px;
    }

    .map01 .vr_icon {
        top: 234px;
        left: 507px;
    }

    .map02 .map {
        height: 471px;
    }

    .map02 .vr_icon {
        top: 257px;
        left: 503px;
    }

    .map02 .icon01 {
        top: 320px;
        left: 221px;
    }
    
    .map03 .map {
        height: 356px;
    }

    .map03 .vr_icon {
        top: 114px;
        left: 559px;
    }
    
    .map04 .map {
        height: 328px;
    }

    .map04 .vr_icon {
        top: 108px;
        left: 499px;
    }

    .map04 .icon01 {
        top: 190px;
        left: 220px;
    }

    .map04 .icon02 {
        top: 225px;
        left: 398px;
    }

    .map04 .icon03 {
        top: 174px;
        left: 576px;
    }

    .list_table {
        font-size: 13px;
    }

    .list_table .head,
    .list_table .name,
    .list_table .btn {
        padding: 5px;
    }

    .list_table .cell {
        padding: 5px 0;
    }

    .list_contents {
        width: 90%;
        gap: 30px;
        margin-top: 50px;
    }

    .list_wrap .list_table {
        grid-template-columns: 1fr 25%;
    }

    .list_table {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .list_table .name {
        grid-column: 1/8;
    }

    .list_table .col {
        margin-left: 0;
    }

    .list_table .col_sp {
        margin-left: -1px;
    }


    #common_areas .list_table .name {
        grid-column: 1;
    }


    .tel_wrap {
        margin: 30px auto;
    }

    .tel_wrap .ttl {
        font-size: 16px;
    }

    .tel_wrap .flex {
        flex-direction: column;
        gap: 20px 0;
    }

    .tel_wrap .flex .btn {
        width: 60%;
    }

    .tel_wrap .flex .tel_img_wrap {
        width: 100%;
        padding: 0;
        border: none;
    }

    .tel_wrap .flex .tel_img_wrap a {
        width: 80%;
    }

    .bottom_note {
        margin-bottom: 30px;
    }
}