/*
-----------------
homemain @PC
-----------------
*/
#homemain{
    width: 100%;
    position: relative;
}
#homemain img{
    width: 100%;
    height: 762px;
    object-fit: cover;
    line-height: 0;
    opacity: 1;
}
#homemain > div{
    position: absolute;
    width: 90vw;
    padding: 0 0 0 5vw;
    bottom: 124px;
    text-align: left;
}
#homemain > div h1{
    font-size: 25px;
    color: #fff;
    letter-spacing: 0.7em;
}
#homemain > div span{
    font-size: 14px;
    color: #fff;
    display: block;
    padding: 15px 0 0 0;
    font-family: 'Comfortaa', cursive;
}
@media screen and (max-width: 480px) {
    #homemain img{
        width: 100%;
        height: 100vh;
        object-fit: cover;
        line-height: 0;
        opacity: 1;
    }
}
/*
-----------------
reservation @PC
-----------------
*/
#reservation{
    background: rgba(150,124,108,0.8);
    margin: -81px 0 0 0;
    z-index: 10;
    position: relative;
}
#reservation > div{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 32px 0 32px 0;
    display: flex;
    justify-content: space-between;
}
#reservation > div > div:nth-child(1) p a{
    color: #fff;
    padding: 0;
}
#reservation > div > div:nth-child(1) p a i{
    padding: 0 5px 0 0;
}
#reservation > div > div:nth-child(2) p a{
    color: #fff;
    padding: 5px 120px 5px 40px;
    background: url(../../img/link.png) 97% 12px no-repeat;
}
#reservation > div > div:nth-child(2) p a:hover{
    color: #eee;
    background: url(../../img/link.png) 100% 12px no-repeat;
}
@media screen and (max-width: 780px) {
    #reservation{
        display: none;
    }
}
/*
-----------------
slogan @PC
-----------------
*/

#slogan{
    width: 100%;
    text-align: center;
    padding: 114px 0 104px 0;
}
.slogan h1{
    font-size: 22px;
    letter-spacing: 0.78em;
    font-weight: 300;
    line-height: 1.8em;
    display: inline;
    color: #af3d3d;
}
.slogan p{
    font-size: 14px;
    letter-spacing: 0.58em;
    font-weight: 400;
    line-height: 2.2em;
    padding: 22px 0 0 0;
    color: #000;
}
.slogan ul{
    max-width: 980px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 40px 0 0 0;
    flex-wrap: wrap;
}
.slogan ul.limitedplan li{
    width: 26%;
    margin: 0 2% 0 2%;
}
.slogan ul.limitedplan li a{
    display: block;
    background: #af3d3d;
    color: #fff;
    padding: 20px 20px 20px 0;
    font-size: 15px;
    border-radius: 1px;
    position :relative;
}
.slogan ul.limitedplan li a i{
    font-size: 12px;
    color: #fff;
    position: absolute;
    right: 20px;
    top: 50%;
    margin: -5px 0 0 0;
}
.slogan ul.limitedplan li a:hover{
    background: #434036;
}


.slogan ul.standardplan li{
    width: 41%;
    margin: 0 2% 0 2%;
}
.slogan ul.standardplan li a{
    display: block;
    border: 1px solid #af3d3d;
    color: #af3d3d;
    padding: 20px 20px 20px 0;
    font-size: 15px;
    border-radius: 1px;
    position :relative;
}
.slogan ul.standardplan li a i{
    font-size: 12px;
    color: #af3d3d;
    position: absolute;
    right: 20px;
    top: 50%;
    margin: -5px 0 0 0;
}
.slogan ul.standardplan li a:hover{
    background: #af3d3d;
    color: #fff;
}
.slogan ul.standardplan li a:hover i{
    color: #fff;
}
@media screen and (max-width: 780px) {
    #slogan{
        width: 90vw;
        text-align: center;
        padding: 114px 5vw 90px 5vw;
    }
    .slogan h1{
        font-size: 20px;
        letter-spacing: 0.65em;
        font-weight: 300;
        line-height: 1.8em;
        display: inline;
        color: #af3d3d;
    }
    .slogan h1 br{
        display: none;
    }
    .slogan p br{
        display: none;
    }
    .slogan ul{
        max-width: 980px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        padding: 10px 0 0 0;
        flex-wrap: wrap;
    }
    .slogan ul.standardplan li{
    width: 90%;
    margin: 20px 5% 0 5%;
}
        .slogan ul.limitedplan li{
        width: 90%;
        margin: 20px 5% 0 5%;
    }
}
/*
-----------------
room @PC
-----------------
*/
#room{
    width: 100%;
    background: #fff;
    padding: 0 0 80px 0;
}
#room > div{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#room > div > div > h1{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    position: relative;
    padding: 82px 0 0 12px;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.48em;
}
#room > div > div > h1:before{
    content:"";
    width: 1px;
    height: 60px;
    background: #af3d3d;
    position: absolute;
    top: 0;
    left: 50%;
}
.roomcontent{
    width: 100%;
    padding: 56px 0 0 0;
    height: 412px;
    position: relative;
}
.room100_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room100_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room100_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
.roomcontent .photos_content_description{
    max-width: 617px;
    max-height: 411px;
    position: absolute;
    top: 0;
    left: 0;
}


@media screen and (max-width: 1220px) {
    .roomcontent .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: 76vw;
    }
    .roomcontent .photos_content_description{
        width: 78vw;
        height: 52vw;
        max-width: 78vw;
        max-height: 52vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
@media screen and (max-width: 980px) {
    .roomcontent .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: 76vw;
    }
    .roomcontent .photos_content_description{
        max-width: 72vw;
        max-height: 48vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .roomcontent .photos_item span{
        width: 102px;
        height: 72px;
        display: block;
    }
    .roomcontent .photos_item img{
        width: 18vw;
        height: 12vw;
        padding: 6px;
    }
}
@media screen and (max-width: 750px) {
    .roomcontent .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: calc(100vw + 180px);
    }
    .roomcontent .photos_content_description{
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .roomcontent .photos_content_description{
        width: 90vw;
        height: 60vw;
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
@media screen and (max-width: 550px) {
    .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: calc(100vw + 180px);
    }
    .roomcontent .photos_content_description{
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .roomcontent .photos_content_description{
        width: 90vw;
        height: 60vw;
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}


input[name="room100_item"] {
    display: none;
}
.photos input:checked + .room100_item span {
  background: #af3d3d!important;
}
#room100_content > div{
    background: #fff;
}
#room100-01 ~ #room100-01_content{
    display: block;
}
#room100-01:checked ~ #room100-01_content,
#room100-02:checked ~ #room100-02_content,
#room100-03:checked ~ #room100-03_content,
#room100-04:checked ~ #room100-04_content,
#room100-05:checked ~ #room100-05_content
{
  display: block;
}
.room100-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room100-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room100-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room100-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room100-05{
    position: absolute;
    top: 312px;
    left: 658px;
}


@media screen and (max-width: 1220px) {
    .room100-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room100-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room100-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room100-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room100-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room100-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room100-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room100-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room100-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room100-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room100_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room100_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}


.room200_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room200_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room200_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
input[name="room200_item"] {
    display: none;
}
.photos input:checked + .room200_item span {
  background: #af3d3d!important;
}
#room200_content > div{
    background: #fff;
}
#room200-01 ~ #room200-01_content{
    display: block;
}
#room200-01:checked ~ #room200-01_content,
#room200-02:checked ~ #room200-02_content,
#room200-03:checked ~ #room200-03_content,
#room200-04:checked ~ #room200-04_content,
#room200-05:checked ~ #room200-05_content
{
  display: block;
}
.room200-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room200-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room200-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room200-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room200-05{
    position: absolute;
    top: 312px;
    left: 658px;
}

@media screen and (max-width: 1220px) {
    .room200-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room200-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room200-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room200-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room200-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room200-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room200-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room200-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room200-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room200-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room200_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room200_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}


.room201_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room201_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room201_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}



input[name="room201_item"] {
    display: none;
}
.photos input:checked + .room201_item span {
  background: #af3d3d!important;
}
#room201_content > div{
    background: #fff;
}
#room201-01 ~ #room201-01_content{
    display: block;
}
#room201-01:checked ~ #room201-01_content,
#room201-02:checked ~ #room201-02_content,
#room201-03:checked ~ #room201-03_content,
#room201-04:checked ~ #room201-04_content,
#room201-05:checked ~ #room201-05_content
{
  display: block;
}
.room201-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room201-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room201-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room201-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room201-05{
    position: absolute;
    top: 312px;
    left: 658px;
}


@media screen and (max-width: 1220px) {
    .room201-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room201-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room201-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room201-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room201-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room201-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room201-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room201-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room201-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room201-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room201_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room201_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}

.room205_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room205_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room205_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
input[name="room205_item"] {
    display: none;
}
.photos input:checked + .room205_item span {
  background: #af3d3d!important;
}
#room205_content > div{
    background: #fff;
}
#room205-01 ~ #room205-01_content{
    display: block;
}
#room205-01:checked ~ #room205-01_content,
#room205-02:checked ~ #room205-02_content,
#room205-03:checked ~ #room205-03_content,
#room205-04:checked ~ #room205-04_content,
#room205-05:checked ~ #room205-05_content
{
  display: block;
}
.room205-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room205-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room205-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room205-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room205-05{
    position: absolute;
    top: 312px;
    left: 658px;
}


@media screen and (max-width: 1220px) {
    .room205-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room205-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room205-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room205-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room205-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room205-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room205-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room205-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room205-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room205-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room205_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room205_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}


.room210_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room210_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room210_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
input[name="room210_item"] {
    display: none;
}
.photos input:checked + .room210_item span {
  background: #af3d3d!important;
}
#room210_content > div{
    background: #fff;
}
#room210-01 ~ #room210-01_content{
    display: block;
}
#room210-01:checked ~ #room210-01_content,
#room210-02:checked ~ #room210-02_content,
#room210-03:checked ~ #room210-03_content,
#room210-04:checked ~ #room210-04_content,
#room210-05:checked ~ #room210-05_content
{
  display: block;
}
.room210-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room210-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room210-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room210-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room210-05{
    position: absolute;
    top: 312px;
    left: 658px;
}

@media screen and (max-width: 1220px) {
    .room210-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room210-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room210-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room210-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room210-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room210-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room210-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room210-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room210-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room210-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room210_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room210_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}

.room211_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room211_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room211_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
input[name="room211_item"] {
    display: none;
}
.photos input:checked + .room211_item span {
  background: #af3d3d!important;
}
#room211_content > div{
    background: #fff;
}
#room211-01 ~ #room211-01_content{
    display: block;
}
#room211-01:checked ~ #room211-01_content,
#room211-02:checked ~ #room211-02_content,
#room211-03:checked ~ #room211-03_content,
#room211-04:checked ~ #room211-04_content,
#room211-05:checked ~ #room211-05_content
{
  display: block;
}
.room211-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room211-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room211-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room211-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room211-05{
    position: absolute;
    top: 312px;
    left: 658px;
}

@media screen and (max-width: 1220px) {
    .room211-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room211-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room211-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room211-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room211-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room211-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room211-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room211-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room211-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room211-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room211_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room211_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}

.room212_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.room212_item span{
    width: 102px;
    height: 72px;
    display: block;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
.room212_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
input[name="room212_item"] {
    display: none;
}
.photos input:checked + .room212_item span {
  background: #af3d3d!important;
}
#room212_content > div{
    background: #fff;
}
#room212-01 ~ #room212-01_content{
    display: block;
}
#room212-01:checked ~ #room212-01_content,
#room212-02:checked ~ #room212-02_content,
#room212-03:checked ~ #room212-03_content,
#room212-04:checked ~ #room212-04_content,
#room212-05:checked ~ #room212-05_content
{
  display: block;
}
.room212-01{
    position: absolute;
    top: 0;
    left: 658px;
}
.room212-02{
    position: absolute;
    top: 78px;
    left: 658px;
}
.room212-03{
    position: absolute;
    top: 156px;
    left: 658px;
}
.room212-04{
    position: absolute;
    top: 234px;
    left: 658px;
}
.room212-05{
    position: absolute;
    top: 312px;
    left: 658px;
}



@media screen and (max-width: 1220px) {
    .room212-01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .room212-02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .room212-03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .room212-04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .room212-05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .room212-01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .room212-02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .room212-03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .room212-04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .room212-05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .room212_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .room212_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}













/*roomcaption*/
.roomcaption{
    width: 340px;
    position: absolute;
    top: 20%;
    right: -78px;
    text-align:right;
}
.roomcaption h4{
    font-family: 'EB Garamond', serif;
    font-weight: 200;
    font-size: 33px;
    letter-spacing: 0.035em;
    color: #af3d3d;
}
.roomcaption h4 span{
    font-size: 12px;
    font-style: italic;
    color: #000;
    font-weight: 300;
    font-family: 'Comfortaa', cursive;
    padding: 0 5px 0 0;
}
.roomcaption p{
    font-size: 14px;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.22em;
    padding: 10px 0 0 0;
}
.roomcaption ul{
    padding: 20px 0 0 0;
}
.roomcaption ul li{
    text-align: right;
    font-size: 13px;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.42em;
}
.roomcaption ul li a{
    letter-spacing: 0.035em;
    background: #af3d3d;
    color: #fff;
    font-size: 11px;
    padding: 0 15px 1px 18px;
    display: inline-block;
    margin: 15px 0 0 0;
    letter-spacing: 0.22em;
}
.roomcaption ul li a:hover{
    background: #434036;
}


@media screen and (max-width: 1220px) {
    .roomcontent{
        width: 100%;
        padding: 56px 0 0 0;
        height: calc(60vw + 280px);
        position: relative;
    }
    .roomcaption{
        width: 100%;
        position: absolute;
        top: calc(100% - 180px);
        bottom: 50px;
        right: 2px;
        text-align:right;
    }
}
@media screen and (max-width: 880px) {
    .roomcontent{
        width: 100%;
        padding: 56px 0 0 0;
        height: calc(100vw + 280px);
        position: relative;
    }
    .roomcaption{
        width: 100%;
        position: absolute;
        top: calc(100% - 240px);
        bottom: 50px;
        right: 2px;
        text-align:right;
    }
}
@media screen and (max-width: 480px) {
    .roomcontent{
        width: 100%;
        padding: 56px 0 0 0;
        height: calc(100vw + 320px);
        position: relative;
    }
    .roomcaption{
        width: 100%;
        position: absolute;
        top: calc(100% - 200px);
        bottom: 50px;
        right: 2px;
        text-align:right;
    }
}
/*
-----------------
outline @PC
-----------------
*/
#outline{
    padding: 0 0 100px 0;
}
#outline > div{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    padding: 54px 0 90px 0;
}
.outline{
    width: 90vw;
    max-width: 1080px;
}
.outline_item{
    width: 32%;
    text-align: center;
    color: #010101;
    background: #fff;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.outline_item span{
    display: block;
    padding: 11px 0 11px 0;
}
.pool{
    margin: 0 0 0 2%;
}
.services{
    margin: 0 0 0 2%;
}




.outline_item span{
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
input[name="outline_item"] {
  display: none;
}
.outline_content {
  display: none;
  clear: both;
  overflow: hidden;
}
#oceanview:checked ~ #oceanview_content,
#pool:checked ~ #pool_content,
#services:checked ~ #services_content,
#access:checked ~ #access_content
{
  display: block;
}
.outline input:checked + .outline_item span{
  background: #af3d3d;
  color: #fff;
  display: block;
  position: relative;
}
.outline input:checked + .outline_item span:after{
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 6px 0 6px;
  border-color: #af3d3d transparent transparent transparent;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin: 0 0 0 -6px;
}
.outline input:checked + .outline_item span{
  border-bottom: none;
}
.outline_content_description{
    margin: 40px 0 0 0;
}

/*services_content*/
#services_content > div{
    background: #fff;
}

/*oceanview_content*/
.oceanview_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.oceanview_item span{
    width: 102px;
    height: 72px;
    display: block;
}
.oceanview_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
.oceanview_item span{
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
#oceanview_content .photos_content_description{
    left: 40px!important;
    top: 40px!important;
}
input[name="oceanview_item"] {
  display: none;
}
.photos input:checked + .oceanview_item span {
  background: #af3d3d;
}
#oceanview_content > div{
    background: #fff;
}


#oceanview01 ~ #oceanview01_content{
    display: block;
}
#oceanview01:checked ~ #oceanview01_content,
#oceanview02:checked ~ #oceanview02_content,
#oceanview03:checked ~ #oceanview03_content,
#oceanview04:checked ~ #oceanview04_content,
#oceanview05:checked ~ #oceanview05_content
{
  display: block;
}


@media screen and (max-width: 860px) {
    #outline > div > div > div{
    }
    .outline_item {
        width: 42vw;
        text-align: center;
        color: #010101;
        background: #fff;
        float: none;
        text-align: center;
        transition: all 0.2s ease;
        margin: 0 0 0 0;
        display: block;
    }
    .outline{
        width: 100%;
        position: relative;
        padding: 100px 0 0 0;
    }
    .oceanview{
        margin:0 0 0 0;
        float: none;
        position: absolute;
        left: 0;
        top: 0;
    }
    .pool{
        margin:0 0 0 0;
        position: absolute;
        left: 48vw;
        top: 0;
    }
    .services{
        margin:0 0 0 0;
        position: absolute;
        left: 0;
        top: 60px;
    }
    .access{
        margin:0 0 0 0;
        position: absolute;
        left: 48vw;
        top: 60px;
    }
}

@media screen and (max-width: 480px) {
    .outline_item span{
        font-size: 13px;
    }
}


.oceanview01{
    position: absolute;
    top: 40px;
    left: 680px;
}
.oceanview02{
    position: absolute;
    top: 118px;
    left: 680px;
}
.oceanview03{
    position: absolute;
    top: 196px;
    left: 680px;
}
.oceanview04{
    position: absolute;
    top: 274px;
    left: 680px;
}
.oceanview05{
    position: absolute;
    top: 352px;
    left: 680px;
}
.oceanviewcaption{
    width: 360px;
    position: absolute;
    top: 0;
    right: 0;
    text-align:right;
}
.oceanviewcaption{
    width: 230px;
    position: absolute;
    top: 50%;
    right: 40px;
    text-align:right;
}
.oceanviewcaption h4{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.42em;
    padding: 0 0 20px 0;
}
.oceanviewcaption p{
    font-size: 12px;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.42em;
}


@media screen and (max-width: 1220px) {
     .outline_content_description .photos{
        height: calc(50vw + 220px);
    }
    #oceanview_content .photos_content_description{
        left: 0!important;
        top: 0!important;
    }
    #oceanview_content > div{
        background: none;
    }
    .oceanview01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .oceanview02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .oceanview03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .oceanview04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .oceanview05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
    .oceanviewcaption{
        width: 100%;
        position: absolute;
        top: 100%;
        bottom: auto;
        right: 0;
        text-align:right;
        margin: -140px 0 0 0;
    }
}

@media screen and (max-width: 750px) {
     .outline_content_description .photos{
        height: calc(70vw + 220px);
    }
    #oceanview_content .photos_content_description{
        left: 0!important;
        top: 0!important;
    }
    #oceanview_content > div{
        background: none;
    }
    .oceanview01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .oceanview02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .oceanview03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .oceanview04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .oceanview05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .oceanview_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .oceanview_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
    .oceanviewcaption{
        width: 100%;
        position: absolute;
        top: 100%;
        bottom: auto;
        right: 0;
        text-align:right;
        margin: -140px 0 0 0;
    }
}

/*pool_content*/
.pool_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.pool_item span{
    width: 102px;
    height: 72px;
    display: block;
}
.pool_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
.pool_item span{
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
input[name="pool_item"] {
    display: none;
}
#pool_content .photos_content_description{
    left: 40px;
    top: 40px;
}
.photos input:checked + .pool_item span {
  background: #af3d3d;
}
#pool_content > div{
    background: #fff;
}
#pool_content .photos_content_description{
    left: 40px;
    top: 40px;
}
#pool01:checked ~ #pool01_content,
#pool02:checked ~ #pool02_content,
#pool03:checked ~ #pool03_content,
#pool04:checked ~ #pool04_content,
#pool05:checked ~ #pool05_content
{
  display: block;
}
.pool01{
    position: absolute;
    top: 40px;
    left: 680px;
}
.pool02{
    position: absolute;
    top: 118px;
    left: 680px;
}
.pool03{
    position: absolute;
    top: 196px;
    left: 680px;
}
.pool04{
    position: absolute;
    top: 274px;
    left: 680px;
}
.pool05{
    position: absolute;
    top: 352px;
    left: 680px;
}
.poolcaption{
    width: 360px;
    position: absolute;
    top: 0;
    right: 0;
    text-align:right;
}
.poolcaption{
    width: 230px;
    position: absolute;
    top: 50%;
    right: 40px;
    text-align:right;
}
.poolcaption h4{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.42em;
    padding: 0 0 20px 0;
}
.poolcaption p{
    font-size: 12px;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.42em;
}

@media screen and (max-width: 1220px) {
     .outline_content_description .photos{
        height: calc(50vw + 220px);
    }
    #pool_content .photos_content_description{
        left: 0!important;
        top: 0!important;
    }
    #pool_content > div{
        background: none;
    }
    .pool01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .pool02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .pool03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .pool04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .pool05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
    .poolcaption{
        width: 100%;
        position: absolute;
        top: 100%;
        bottom: auto;
        right: 0;
        text-align:right;
        margin: -140px 0 0 0;
    }
}

@media screen and (max-width: 750px) {
     .outline_content_description .photos{
        height: calc(70vw + 220px);
    }
    #pool_content .photos_content_description{
        left: 0!important;
        top: 0!important;
    }
    #pool_content > div{
        background: none;
    }
    .pool01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .pool02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .pool03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .pool04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .pool05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .pool_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .pool_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
    .poolcaption{
        width: 100%;
        position: absolute;
        top: 100%;
        bottom: auto;
        right: 0;
        text-align:right;
        margin: -140px 0 0 0;
    }
}

/*services_content*/
.services_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.services_item span{
    width: 102px;
    height: 72px;
    display: block;
}
.services_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
.services_item span{
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
input[name="services_item"] {
  display: none;
}
.photos input:checked + .services_item span {
  background: #af3d3d;
}
#services_content > div{
    background: #fff;
}
#services_content .photos_content_description{
    left: 40px;
    top: 40px;
}
.photos_content_description img{
    width: 100%;
}
#services01:checked ~ #services01_content,
#services02:checked ~ #services02_content,
#services03:checked ~ #services03_content,
#services04:checked ~ #services04_content,
#services05:checked ~ #services05_content
{
    display: block;
}
.services01{
    position: absolute;
    top: 40px;
    left: 680px;
}
.services02{
    position: absolute;
    top: 118px;
    left: 680px;
}
.services03{
    position: absolute;
    top: 196px;
    left: 680px;
}
.services04{
    position: absolute;
    top: 274px;
    left: 680px;
}
.services05{
    position: absolute;
    top: 352px;
    left: 680px;
}
.servicescaption{
    width: 230px;
    position: absolute;
    top: 50%;
    right: 40px;
    text-align:right;
}
.servicescaption h4{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.42em;
    padding: 0 0 20px 0;
}
.servicescaption p{
    font-size: 12px;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.42em;
}

@media screen and (max-width: 1220px) {
     .outline_content_description .photos{
        height: calc(50vw + 220px);
    }
    #services_content .photos_content_description{
        left: 0!important;
        top: 0!important;
    }
    #services_content > div{
        background: none;
    }
    .services01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .services02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .services03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .services04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .services05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
    .servicescaption{
        width: 100%;
        position: absolute;
        top: 100%;
        bottom: auto;
        right: 0;
        text-align:right;
        margin: -140px 0 0 0;
    }
}

@media screen and (max-width: 750px) {
     .outline_content_description .photos{
        height: calc(70vw + 220px);
    }
    #services_content .photos_content_description{
        left: 0!important;
        top: 0!important;
    }
    #services_content > div{
        background: none;
    }
    .services01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .services02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .services03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .services04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .services05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .services_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .services_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
    .servicescaption{
        width: 100%;
        position: absolute;
        top: 100%;
        bottom: auto;
        right: 0;
        text-align:right;
        margin: -140px 0 0 0;
    }
}

/*access_content*/
#access_content > div{
    display: flex;
    height: 420px;
    justify-content: space-between;
    background: #fff;
    align-items: end;
}
#access_content > div > div:nth-child(1) > address{
    margin: 0 0 24px 32px;
}
#access_content > div > div:nth-child(1) > address p{
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6em;
}
#access_content > div > div:nth-child(1) > div{
    margin: 0 0 34px 32px;
}
#access_content > div > div:nth-child(1) > div p{
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6em;
}
#access_content > div > div:nth-child(1) > ul{
    padding: 0 0 40px 0;
    display: flex;
}
#access_content > div > div:nth-child(1) > ul li{
    margin: 0 0 0 32px;
}
#access_content > div > div:nth-child(1) > ul li a{
    padding: 3px 0 3px 24px;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.16em;
    color: #010101;
}
#access_content > div > div:nth-child(1) > ul li a:hover{
    color: #96948e;
}
#access_content > div > div:nth-child(1) > ul li:nth-child(1) a{
    background: url(../../img/contact.png) 0 7px no-repeat;
}
#access_content > div > div:nth-child(1) > ul li:nth-child(2) a{
    background: url(../../img/booking.png) 0 7px no-repeat;
}
#access_content > div > div:nth-child(2){
    width: 50%;
}
#access_content > div > div:nth-child(2) iframe{
    width: 100%;
    height: 420px;
}

@media screen and (max-width: 1024px) {
    #access_content > div{
        display: flex;
        height: 620px;
        justify-content: space-between;
        background: #fff;
        align-items: normal;
        flex-wrap: wrap;
    }
    #access_content > div > div:nth-child(1){
        order: 2;
    }
    #access_content > div > div:nth-child(2){
        width: 100%;
        height: 320px;
        order: 1;
    }
    #access_content > div > div:nth-child(2) iframe{
        width: 100%;
        height: 320px;
    }
}
@media screen and (max-width: 480px) {
    #access_content > div{
        height: 600px;
        background: #fff;
    }
    #access_content > div > div:nth-child(1) > address{
        margin: 30px 5vw 24px 5vw;
    }
    #access_content > div > div:nth-child(1) > div{
        margin: 0 5vw 34px 5vw;
    }
    #access_content > div > div:nth-child(1) > ul{
        padding: 0 0 40px 0;
        display: none;
        justify-content: space-between;
    }
}

/*
-----------------
restaurant @PC
-----------------
*/
#restaurant{
    background: #faf9f5;
}
#restaurant > div{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 0 0 0;
}
#restaurant > div > div > h1{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    position: relative;
    padding: 82px 0 0 0;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.48em;
}
#restaurant > div > div > h1:before{
    content:"";
    width: 1px;
    height: 60px;
    background: #af3d3d;
    position: absolute;
    top: 0;
    left: 50%;
}
.restaurant{
    padding: 56px 0 0 0;
}
.restaurant_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.restaurant_item span{
    width: 102px;
    height: 72px;
    display: block;
}
.restaurant_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}
.restaurant_item span{
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
input[name="restaurant_item"] {
  display: none;
}
.restaurantcontent input:checked + .restaurant_item span {
  background: #af3d3d;
}
#restaurant01:checked ~ #restaurant01_content,
#restaurant02:checked ~ #restaurant02_content,
#restaurant03:checked ~ #restaurant03_content,
#restaurant04:checked ~ #restaurant04_content,
#restaurant05:checked ~ #restaurant05_content
{
  display: block;
}
.restaurant01{
    position: absolute;
    top: 0;
    left: 580px;
}
.restaurant02{
    position: absolute;
    top: 78px;
    left: 580px;
}
.restaurant03{
    position: absolute;
    top: 156px;
    left: 580px;
}
.restaurant04{
    position: absolute;
    top: 234px;
    left: 580px;
}
.restaurant05{
    position: absolute;
    top: 312px;
    left: 580px;
}
@media screen and (max-width: 1220px) {
    .restaurant01{
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .restaurant02{
        position: absolute;
        top: 78px;
        left: auto;
        right: 0;
    }
    .restaurant03{
        position: absolute;
        top: 156px;
        left: auto;
        right: 0;
    }
    .restaurant04{
        position: absolute;
        top: 234px;
        left: auto;
        right: 0;
    }
    .restaurant05{
        position: absolute;
        top: 312px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 750px) {
    .restaurant01{
        position: absolute;
        top: 66vw;
        left: 0;
        right: auto;
    }
    .restaurant02{
        position: absolute;
        top: 66vw;
        left: 18.75vw;
        right: auto;
    }
    .restaurant03{
        position: absolute;
        top: 66vw;
        left: 37.5vw;
        right: auto;
    }
    .restaurant04{
        position: absolute;
        top: 66vw;
        left: 56vw;
        right: auto;
    }
    .restaurant05{
        position: absolute;
        top: 66vw;
        left: auto;
        right: 0;
    }
    .restaurant_item span{
        width: calc(15vw + 6px);
        height: calc(10vw + 6px);
        display: block;
    }
    .restaurant_item img{
        width: 15vw;
        height: 10vw;
        padding: 3px;
    }
}

.restaurantcaption{
    width: 320px;
    position: absolute;
    bottom: 80px;
    right: 0;
    text-align:right;
}
.restaurantcaption h4{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.42em;
    padding: 0 0 20px 0;
}
.restaurantcaption p{
    font-size: 12px;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.7em;
}

/*
-----------------
access @PC
-----------------
*/

#access{
    background: #fff;
    padding: 0 0 0 0;
    margin: -114px 0 0 0;
}
#access > div{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 0 88px 0;
}
#access > div > div:nth-child(1) > h1{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    position: relative;
    padding: 82px 0 0 0;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.48em;
    margin: 0 0 44px 0;
}
#access > div > div:nth-child(1) > h1:before{
    content:"";
    width: 1px;
    height: 60px;
    background: #af3d3d;
    position: absolute;
    top: 0;
    left: 50%;
}


/*access_content*/
#access > div > div:nth-child(2){
    display: flex;
    height: 420px;
    justify-content: space-between;
    background: #faf9f5;
    align-items: end;
}
#access > div > div:nth-child(2) > div:nth-child(1) > address{
    margin: 0 0 24px 32px;
}
#access > div > div:nth-child(2) > div:nth-child(1) > address p{
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6em;
}
#access > div > div:nth-child(2) > div:nth-child(1) > div{
    margin: 0 0 34px 32px;
}
#access > div > div:nth-child(2) > div:nth-child(1) > div p{
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6em;
}
#access > div > div:nth-child(2) > div:nth-child(1) > ul{
    padding: 0 0 40px 0;
    display: flex;
}
#access > div > div:nth-child(2) > div:nth-child(1) > ul li{
    margin: 0 0 0 32px;
}
#access > div > div:nth-child(2) > div:nth-child(1) > ul li a{
    padding: 3px 0 3px 24px;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.16em;
    color: #010101;
}
#access > div > div:nth-child(2) > div:nth-child(1) > ul li a:hover{
    color: #96948e;
}
#access > div > div:nth-child(2) > div:nth-child(1) > ul li:nth-child(1) a{
    background: url(../../img/contact.png) 0 7px no-repeat;
}
#access > div > div:nth-child(2) > div:nth-child(1) > ul li:nth-child(2) a{
    background: url(../../img/booking.png) 0 7px no-repeat;
}
#access > div > div:nth-child(2) > div:nth-child(2){
    width: 50%;
}
#access > div > div:nth-child(2) > div:nth-child(2) iframe{
    width: 100%;
    height: 420px;
}

@media screen and (max-width: 1024px) {
    #access > div > div:nth-child(2){
        display: flex;
        height: 620px;
        justify-content: space-between;
        background: #fff;
        align-items: normal;
        flex-wrap: wrap;
    }
    #access > div > div:nth-child(2) > div:nth-child(1){
        order: 2;
    }
    #access > div > div:nth-child(2) > div:nth-child(2){
        width: 100%;
        height: 320px;
        order: 1;
    }
    #access > div > div:nth-child(2) > div:nth-child(2) iframe{
        width: 100%;
        height: 320px;
    }
}
@media screen and (max-width: 480px) {
    #access > div > div:nth-child(2){
        height: 600px;
        background: #fff;
    }
    #access > div > div:nth-child(2) > div:nth-child(1) > address{
        margin: 30px 5vw 24px 5vw;
    }
    #access > div > div:nth-child(2) > div:nth-child(1) > div{
        margin: 0 5vw 34px 5vw;
    }
    #access > div > div:nth-child(2) > div:nth-child(1) > ul{
        padding: 0 0 40px 0;
        display: none;
        justify-content: space-between;
    }
}




/*
-----------------
pressnews @PC
-----------------
*/
#pressnews > div{
    width: 90vw;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 0 255px 0;
}
#pressnews > div > div > h1{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    position: relative;
    padding: 82px 0 0 0;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.48em;
}
#pressnews > div > div > h1:before{
    content:"";
    width: 1px;
    height: 60px;
    background: #af3d3d;
    position: absolute;
    top: 0;
    left: 50%;
}
#pressnews > div > div > ul{
    display: flex;
    padding: 58px 0 0 0;
    flex-wrap: wrap;
}
#pressnews > div > div > ul > li{
    width: 22%;
    padding: 0 1.5% 0 1.5%;
}
#pressnews > div > div > ul > li div{
    width: 100%;
    text-align: center;
}
#pressnews > div > div > ul > li div img{
    object-fit: cover;
    height: 180px;
    max-width: 100%;
    line-height: 0;
    margin: 0 auto;
}
#pressnews > div > div > ul > li time{
    color: #af3d3d;
    font-size: 12px;
    display: block;
    padding: 24px 0 8px 0;
    font-family: 'Comfortaa', cursive;
}
#pressnews > div > div > ul > li p{
    font-size: 13px;
    color: #010101;
    line-height: 1.4em;
    font-weight: 300;
    text-align: justify;
}
#pressnews > div > div > p{
    text-align: center;
    padding: 68px 0 0 0;
}

#pressnews > div > div > p a{
    font-family: 'Comfortaa', cursive;
    border: 1px solid #af3d3d;
    color: #af3d3d;
    font-size: 11px;
    padding: 11px 22px 9px 24px;
}
#pressnews > div > div > p a:hover{
    border: 1px solid #af3d3d;
    background: #af3d3d;
    color: #fff;
}

@media screen and (max-width: 780px) {
    #pressnews > div > div > ul > li{
        width: 47%;
        padding: 0 1.5% 0 1.5%;
    }
}
@media screen and (max-width: 480px) {
    #pressnews > div > div > ul > li{
        width: 97%;
        padding: 0 1.5% 0 1.5%;
        margin: 0 0 80px 0;
    }
}

/*
-----------------
photos @PC
-----------------
*/
.photos{
    width: 90vw;
    max-width: 1080px;
    position: relative;
    height: 490px;
}
.photos_item {
    text-align: center;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}
.photos_item span{
    width: 102px;
    height: 72px;
    display: block;
}
.photos_item img{
    width: 90px;
    height: 60px;
    padding: 6px;
}

.photos_item span{
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.33em;
}
input[name="photos_item"] {
  display: none;
}
.photos_content {
    display: none;
    clear: both;
    overflow: hidden;
}

.photos input:checked + .photos_item span {
    background: #af3d3d;
}
.photos_content_description{
    max-width: 617px;
    max-height: 411px;
    position: absolute;
    top: 0;
    left: -78px;
}
@media screen and (max-width: 1220px) {
    .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: 76vw;
    }
    .photos_content_description{
        width: 78vw;
        height: 52vw;
        max-width: 78vw;
        max-height: 52vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
@media screen and (max-width: 980px) {
    .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: 76vw;
    }
    .photos_content_description{
        max-width: 72vw;
        max-height: 48vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .photos_item span{
        width: 102px;
        height: 72px;
        display: block;
    }
    .photos_item img{
        width: 18vw;
        height: 12vw;
        padding: 6px;
    }
}
@media screen and (max-width: 750px) {
    .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: calc(100vw + 180px);
    }
    .photos_content_description{
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .photos_content_description{
        width: 90vw;
        height: 60vw;
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
@media screen and (max-width: 550px) {
    .photos{
        width: 90vw;
        max-width: 1080px;
        position: relative;
        height: calc(100vw + 180px);
    }
    .photos_content_description{
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
    .photos_content_description{
        width: 90vw;
        height: 60vw;
        max-width: 90vw;
        max-height: 60vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
.photos_content_description img{
    width: 100%!important;
}

/*
-----------------
slider @PC
-----------------
*/
.slider {
    width: calc(100% + 78px);
    margin: 0 auto 0 -78px;
}
.slick-prev:before,.slick-next:before {
    color: black;
}
.slick-slide {
    transition: all ease-in-out 1s;
}
@media screen and (max-width: 1220px) {
    .slider {
        width: 90vw;
        margin: 0 auto 0 auto;
    }
}