@charset "UTF-8";
/*------------------------------------------------------------Content*/
/*-----------room*/
#room {
    text-align: center;
}

.list_room {
	display: flex;
    flex-direction: column;
    max-width: var(--ctr-max);
    margin: 0 auto;
    gap: var(--ctr-td);
    & > li {
        padding-bottom: var(--ctr-inpd);
        background: var(--bg-wood);
        & > div {
        display: flex;
        flex-direction: column;
            & > div {
                text-align: left;
                padding: var(--ctr-inpd);
                & h4 {
                    margin-bottom: 0.6em;
                    line-height: 1.3;
                    font-family: var(--font-serif);
                    font-size: clamp(1.5rem, 0.864rem + 3.18vw, 3.25rem);/*24px - 52px*/
                    font-weight: 700;
                    word-break: keep-all;
                    & span {
                        display: block;
                        margin-top: 0.2em;
                        font-size: var(--font-l);
                        word-break: break-all;
                    }
                }
                & .btn_icon {
                    margin-top: var(--ctr-inpd);
                }
            }
            & > figure {
                & img {
                    width: 100%;
                    height: auto;
                }
            }
        }
        & > ul  {
            display: flex;
            flex-wrap: wrap;
            margin-top: var(--ctr-inpd);
            gap: var(--ctr-inpd);
            & li {
            width: calc((100% - (var(--ctr-inpd) * 2)) / 3);
                & a {
                    display: block;
                    width: 100%;
                    aspect-ratio: 8 / 5;
                    transition: all 0.5s;
                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }
}
@media print, screen and (min-width:768px) {
.list_room {
    & > li {
        & > div {
        flex-direction: row;
            & > div {
                position: relative;
                width: 50%;
                padding-bottom: calc((var(--ctr-inpd) * 2) + 48px);
                & .btn_icon {
                    position: absolute;
                    right: var(--ctr-inpd);
                    bottom: var(--ctr-inpd);
                    margin-top: 0;
                }
            }
            & > figure {
                width: 50%;
                & img {
                    width: 100%;
                    height: 100%;
                    min-height: 560px;
                    object-fit: cover;
                }
            }
        }
        & > ul  {
            & li {
                & a:hover {
                    opacity: 0.6;
                }
            }
        }
    }
    & > li:nth-child(2n) {
        & > div {
            flex-direction: row-reverse;
        }
    }
    
}
}