﻿@charset "UTF-8";
section {
    width: 87%;
    max-width: 1638px;
    margin: auto;
}
section h1 {
    font-size: 2em;
    margin-bottom: 1em;
    line-height: 1.5;
    text-align: center;
}
section h1 span.PageTitle {
    background: #F3D013;
    padding: 0.5em 1em;
    display: inline-block;
    margin: auto;
    border-radius: 1.5em;
}
section p.PageDiscription {
    width: 100%;
    max-width: 980px;
}

/*Facilitys*/
section#Facilitys ul {
    display: flex;
    flex-wrap: wrap;
}
section#Facilitys ul li:nth-last-of-type(1) {
    margin-bottom: 0;
}
section#Facilitys ul li figure {
    position: relative;
}
section#Facilitys ul li figure figcaption {
    font-size: 1.25em;
    position: absolute;
    font-weight: 700;
    padding: 0.5em;
    background: #F5F4F2;
    right: 0;
    bottom: -1em;
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
    line-height: 1;
}

/*Rentalroom*/
section#Rentalroom ul.RentalroomList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
section#Rentalroom ul.RentalroomList li {
    display: flex;
    flex-wrap: wrap;
}
section#Rentalroom ul.RentalroomList li:nth-last-of-type(1) {
    margin-bottom: 0;
}
section#Rentalroom ul.RentalroomList li dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
section#Rentalroom ul.RentalroomList li dl dt {
    border: solid 1px #707070;
    padding: 0 0.8em;
    border-radius: 0.25em;
    font-weight: 700;
    margin-right: 1em;
    margin-bottom: 1em;
    text-align: center;
}
section#Rentalroom ul.RentalroomList li dl dd {
    margin-right: 1em;
    margin-bottom: 1em;
}
section#Rentalroom ul.RentalroomList li dl dt:nth-of-type(3),
section#Rentalroom ul.RentalroomList li dl dd:nth-of-type(3) {
    width: 100%;
    margin-bottom: 0
}
section#Rentalroom ul.RentalroomList li dl dd table {
    width: 100%;
}
section#Rentalroom ul.RentalroomList li dl dd table th,
section#Rentalroom ul.RentalroomList li dl dd table td {
    padding: 0.5em;
    border-bottom: solid 1px #707070;
}
section#Rentalroom ul.RentalroomList li dl dd table th,
section#Rentalroom ul.RentalroomList li dl dd table td:nth-of-type(2) {
    text-align: center;
    font-weight: 700;
}

/* -------------------------------------------
SmartPhone
------------------------------------------- */
@media screen and (max-width:767px) {
    section {
        padding: 24px 0;
    }
    section h1 {
        font-size: 1.75em;
    }
    section p.PageDiscription {
        margin: 0 auto 2.5em;
    }
    
    /*Facilitys*/
    section#Facilitys ul li {
        margin-bottom: 3rem;
    }
    section#Facilitys ul li figure img {
        border-radius: 32px;
    }
    
    /*Rentalroom*/
    section#Rentalroom ul.RentalroomList li {
        flex-direction: column-reverse;
        margin-bottom: 4rem;
    }
    section#Rentalroom ul.RentalroomList li h2 {
        font-size: 1.5rem;
        margin: 0.5em 0;
    }
    section#Rentalroom ul.RentalroomList li img {
        border-radius: 32px;
    }

}

/* -------------------------------------------
Tablet and Desktop
------------------------------------------- */
@media screen and (min-width:768px) {
    #TopTopics h1 span {
        margin-left: 0.5em;
    }
}

/* -------------------------------------------
Tablet
------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1439px) {
    section {
        padding: 32px 0;
    }
    section p.PageDiscription {
        margin: 0 auto 2.5em;
    }
    /*Facilitys*/
    section#Facilitys ul {
        justify-content: space-between;
    }
    section#Facilitys ul li:nth-of-type(2),
    section#Facilitys ul li:nth-of-type(3) {
        width: 46%;
    }
    section#Facilitys ul li {
        margin-bottom: 3rem;
    }
    section#Facilitys ul li figure img {
        border-radius: 32px;
    }
    
    /*Rentalroom*/
    section#Rentalroom ul.RentalroomList li {
        flex-direction: column-reverse;
        margin-bottom: 4rem;
    }
    section#Rentalroom ul.RentalroomList li h2 {
        font-size: 1.5rem;
        margin: 0.5em 0;
    }
    section#Rentalroom ul.RentalroomList li img {
        border-radius: 32px;
    }
    
}

/* -------------------------------------------
Desktop
------------------------------------------- */
@media screen and (min-width:1440px) {
    section {
        padding: 48px 0;
    }
    section p.PageDiscription {
        margin: 0 auto 3.5em;
    }
    /*Facilitys*/
    section#Facilitys ul {
        justify-content: space-between;
    }
    section#Facilitys ul li:nth-of-type(2),
    section#Facilitys ul li:nth-of-type(3) {
        width: 47%;
    }
    section#Facilitys ul li {
        margin-bottom: 5rem;
    }
    section#Facilitys ul li figure img {
        border-radius: 64px;
    }
    
    /*Rentalroom*/
    section#Rentalroom ul.RentalroomList li {
        flex-direction: row-reverse;
        margin-bottom: 4rem;
        justify-content: space-between;
    }
    section#Rentalroom ul.RentalroomList li .RoomDetail {
        width: 38%;
    }
    section#Rentalroom ul.RentalroomList li figure {
        width: 57%;
    }
    section#Rentalroom ul.RentalroomList li h2 {
        font-size: 1.5rem;
        margin: 0.5em 0;
    }
    section#Rentalroom ul.RentalroomList li img {
        border-radius: 32px;
    }

}

