@media screen and (max-width: 767px) {
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
}
body {
    background-image: url(../image/room/room_background.png);
}

/*====================動画の箇所====================*/

.head_space {
    padding: 0;
}


@media screen and (max-width: 767px) {
    .head_space {
        padding: 70px;
        background-size: cover;
    }
}

/*====================動画の箇所====================*/

.oheya_video {
    margin: 0 auto;
    position: relative;
    width: 100%;
    margin-top: 0%;
    height: 100vh;
}

/*
.oheya_video iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: -1;
}*/

@media screen and (max-width:480px) {
    .oheya_video {
        display: none;
    }
}

/*
@media screen and (max-width:480px) {
    #js-kuoritei-youtube {
        display: none;
    }
}
*/

/*====================play movie====================*/

.kado_img {
    position: absolute;
    bottom: 0;
    left: 35%;
    right: 35%;
}

/*
.PlayMovie {
text-align: center;
margin: 200px 0 0 0;
left: 50%;
bottom: 50px;
}*/

.PlayMovie p {
    color: #FFF;
    font-size: 15px;
    margin: 0 0 5px 0px;
}

.play {
    margin: auto;
    font-size: 30px;
    position: relative;
    width: 1.4em;
    height: 1.4em;
    border: 0.1em solid #FFF;
    border-radius: 100%;
    z-index: 1;
}

.play::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0.5em;
    width: 0;
    height: 0;
    border-top: 0.4em solid transparent;
    border-left: 0.6em solid #FFF;
    border-bottom: 0.4em solid transparent;
}

.movie_btn a {
    padding: 5px 13px 25px 15px;
}

/*video*/
/*
#video iframe {
position: fixed;
z-index: -999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
*/

/*====================main====================*/

.fadeInUp {
    opacity: 0;
    transform: translateY(40px);
    transition: 3s;
}

.topContent {
    height: 600px;
    margin: 25px 0 0px 0;
    text-align: center;
}

.topImage {
    position: relative;
}

.topImage img {
    width: 100%;
    height: 600px;
    max-width: 800px;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .topContent {
        height: 250px;
        margin: 0px 0 100px 0;
        margin: 0px 0 0px 0;
    }

    .topImage {
        padding-top: 180px;
        padding-top: 20px;
    }
    
    .topImage img {
        width: 100%;
        height: auto;
        padding: 2% 0;
        max-width: 320px;
    }
}

@media screen and (min-width:481px) {

    .topContent {
        display: none;
    }
}

/*====================playmovie sp====================*/


@media screen and (max-width:480px) {

    .PlayMovie_sp {
        text-align: center;
        position: relative;
        margin-top: 10px;
    }

    .PlayMovie_sp p {
        color: #111;
        font-size: 15px;
    }

    .play_sp {
        margin: auto;
        font-size: 30px;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 1.4em;
        height: 1.4em;
        border: 0.1em solid #111;
        border-radius: 100%;
        z-index: 1;
    }

    .play_sp::before {
        z-index: -1;
        content: "";
        position: absolute;
        top: 0.3em;
        left: 0.5em;
        width: 0;
        height: 0;
        border-top: 0.4em solid transparent;
        border-left: 0.6em solid #111;
        border-bottom: 0.4em solid transparent;
    }

    .movie_btn_sp a {
        padding: 5px 13px 25px 15px;
    }

    .play_sp_p {
        position: absolute;
        top: 67%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .play_sp_p p {
        font-size: 10px !important;
    }

    .play_sp_p2 {
        position: absolute;
        top: 74%;
        left: calc(50% - -47px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        box-shadow: 1px 0 5px 1px #999 inset;
        padding: 3px 6px;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .play_sp_p2 p {
        color: #fff !important;
    }

    /*.PlayMovie_sp p.introduction_movie {
        font-weight: bold;
        font-size: 12px;
        margin-top: -5px;
    }*/
}

@media screen and (min-width:481px) {
    .PlayMovie_sp {
        display: none;
    }
}

/*====================別荘スタイルの露天付き一棟を独占。====================*/

.topTextTitle {
    text-align: center;
    font-size: 30px;
    margin: 30px auto;
    line-height: 60px;
    letter-spacing: 2px;
}

.mainText p {
    text-align: center;
    line-height: 45px;
}


/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .topTextTitle {
        font-size: 20px;
        margin: 4% auto;
        font-size: 15px;
        line-height: 35px;
    }

    .mainText p {
        font-size: 14px;
        line-height: 30px;
        letter-spacing: 1.5px;
        padding: 15px;
    }
}

/*====================お部屋一覧 文章====================*/

.itiran {
    text-align: center;
    padding: 165px 0 0 0;
}

.itiran p {
    font-size: 30px;
    margin: 0px 0 10px 0;
    letter-spacing: 2px;
}

.itiran table {
    border: 0;
    margin: 30px auto;
}

.itiran td {
    padding: 14px;
}

.itiran td a {
    position: relative;
    display: block;
}

.itiran td a p {
    position: absolute;
    top: 0;
    font-size: 40px;
    margin: 5px 0px 0 15px;
}


.id_zone {
    text-align: center;
    padding: 220px 0 0 0;
}

.id_zone p {
    font-size: 25px;
}

.id_zone a {
    color: #000;
    font-size: 20px;
    padding: 30px 17px 0px 17px;
    position: relative;
    display: inline-block;
    transition: .3s;
}

.id_zone .id-table-ul a {
    width: 50px;
}

.btn-border-bottom,
.id-cancell,
.id_zone_link a {
    position: relative;
    font-weight: bold;
    text-decoration: none;
}

.btn-border-bottom:before,
.id-cancell:before,
.id_zone_link a:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    top: 100%;
    left: 0;
    border-radius: 5px;
    background: rgba(95, 54, 61, 1);
    transition: .2s;
}

.btn-border-bottom:hover:before,
.id-cancell:hover:before,
.id_zone_link a:hover:before {
    top: -webkit-calc(100% + 4px);
    top: calc(100% + 4px);
}

.id_zone_link a {
    color: #000;
    letter-spacing: 1px;
}

.id_zone_link {
    margin: 25px 0 0 0px;
}

/* パソコン対応 レスポンシブ */
@media screen and (min-width: 768px) {

    .itiran_SP {
        display: none;
    }

}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .itiran {
        text-align: center;
        padding: 10px;
    }

    .itiran p {
        font-size: 20px;
        margin: 0px 0 10px 0;
    }

    .itiran table {
        border: 0;
        margin: 0 auto;
    }

    .itiran td {
        padding: 7px;
    }

    .itiran td a p {
        font-size: 30px;
        margin: 5px 0px 0 10px;
    }
}


/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .oheyaichiran {
        font-size: 18px !important;
        font-weight: bold;
        margin-top: 30px !important;
    }
}


.font18 {
    font-size: 18px !important;
}

.font15 {
    font-size: 15px !important;
}

.font12 {
    font-size: 12px !important;
}

/*====================お部屋一覧 画像====================*/

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .itiran_web {
        display: none;
    }
}

/*====================お部屋一覧 茜====================*/

.itiran_web .main_te01 {
    font-size: 10px;
}

.itiran_web .main_tn01 {
    margin-top: 10px;
}

/*====================お部屋一覧 縹====================*/

.itiran_web .main_te02 {
    font-size: 10px;
}

.itiran_web .main_tn02 {
    margin-top: 10px;
    margin-left: 20px;
}

/*====================お部屋一覧 黄檗====================*/

.itiran_web .main_te03 {
    font-size: 10px;
    margin-left: 30px;
}

.itiran_web .main_tn03 {
    margin-top: 10px;
}

/*====================お部屋一覧 琥珀====================*/

.itiran_web .main_te04 {
    font-size: 10px;
    margin-left: 26px;
}

.itiran_web .main_tn04 {
    margin-top: 10px;
}

/*====================お部屋一覧 山葵====================*/

.itiran_web .main_te05 {
    font-size: 10px;
    margin-left: 30px;
}

.itiran_web .main_tn05 {
    margin-top: 10px;
}

/*====================お部屋一覧 白群====================*/

.itiran_web .main_te06 {
    font-size: 10px;
    margin-left: 20px;
}

.itiran_web .main_tn06 {
    margin-top: 10px;
}

/*====================お部屋一覧 鴇====================*/

.itiran_web .main_te07 {
    font-size: 10px;
}

.itiran_web .main_tn07 {
    margin-top: 10px;
}

/*====================お部屋一覧 紫苑====================*/

.itiran_web .main_te08 {
    font-size: 10px;
    margin-left: 34px;
}

.itiran_web .main_tn08 {
    margin-top: 10px;
}

.teiin {
    font-size: 18px !important;
    right: 15px !important;
    margin-top: 25px !important;
}

.linkdownbtn {
    width: 30px;
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.roomImage {
    max-width: 200px;
    width: 100%;
    transition-duration: 0.3s;
}

.roomImage:hover {
    opacity: 0.6;
    transition-duration: 0.3s;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .roomImage {
        width: 100%;
    }
}

@media screen and (min-width:481px) and (max-width:999px) {
    .teiin {
        left: 0;
        bottom: 15px;
        margin: 0 15px 0 0 !important;
    }
}

@media screen and (min-width:481px) {

    .roomImage {
        max-width: 300px;
    }
}

@media screen and (max-width:480px) {

    .teiin {
        font-size: 10px !important;
        right: 10px !important;
        margin-top: 15px !important;
    }
}

/*====================お部屋一覧 スマホ版====================*/


@media screen and (max-width: 767px) {
    .itiran td a .main_te_sp {
        /*margin-top: 15px !important;*/
        font-size: 10px !important;
    }

    .itiran td a .main_tn01_sp {
        margin-top: 25px !important;
        font-size: 20px;
    }

    .itiran td a .main_tn03_sp {
        margin-top: 25px;
        margin-left: 5px !important;
        font-size: 20px;
    }

    /*.itiran td a .teiin{
        margin: 5px 0px 0 10px !important;
    }*/
}


@media screen and (max-width:480px) {

    .linkdownbtn {
        width: 30px !important;
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}

/*====================久織亭の語り部====================*/

.comment {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: 100px auto -70px;
    background: rgba(255, 255, 255, 0.6);
    padding: 50px 30px 15px 60px;
    border-radius: 6px;
}

.comment h2 {
    margin: 0px 19px 0px 45px;
    letter-spacing: 5px;
}

.comment h4 {
    margin: 0px 45px 23px 0px;
    text-align: end;
}

.comment p {
    color: #666;
    height: 586px;
    line-height: 55px;
    letter-spacing: 2px;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .comment {
        writing-mode: unset;
        margin: 45px auto 50px;
        padding: 15px;
        width: 85%;
        max-width: 25em;
    }

    .comment h2 {
        text-align: center;
        font-size: 20px;
        margin: auto;
        padding: 0 0 10px 0;
    }

    .comment h4 {
        margin: 52px 20px 0px 0px;
        text-align: end;
        font-size: 12px;
    }

    .comment p {
        font-size: 15px;
        height: auto;
        line-height: 25px;
        letter-spacing: 1px;
    }
}

/*====================部屋紹介まとめ====================*/

.fadeIn {
    opacity: 0;
    transform: translateY(0px);
    transition: 3s;
}

.room {
    display: flex;
    flex-wrap: wrap;
    margin: 150px auto 20px;
    padding: 0 0 0 1%;
    max-width: 62em;
}

.room_text {
    margin: 35px 3% 0px;
    text-align: center;
    flex-basis: 305px;
    max-width: 20em;
    margin: 15px auto 0;
}

.room_text h1 {
    letter-spacing: 1px;
}

.room_text p {
    margin-bottom: 25px;
    font-size: 13px;
    text-align: left;
    line-height: 30px;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .room {
        margin: 15% auto 8%;
        display: block;
        min-width: 360px;
        min-width: 320px;
        width: 100%;
        padding: 0 0 0 0%;
    }

    .room_text {
        margin: 100px auto 0px;
    }

    .room_text h1 {
        font-size: 30px;
    }

    .room_text h1 br {
        display: none;
    }

    .room_text p {
        font-size: 15px;
        margin: 20px auto 35px;
        width: 100%;
        max-width: 265px;
    }
}

/*===================アコーディオン画像===================*/

.accordian {
    margin: 14px auto 0px;
    height: 380px;
    overflow: hidden;

    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    flex-basis: 600px;
    max-width: 38em;
    position: relative;
}

.accordian ul {
    width: 1000px;
    margin: 0 0 0 0;
}

.accordian li {
    position: relative;
    display: block;
    width: 120px;
    float: left;
    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.accordian ul:hover li {
    width: 30px;
}

.accordian ul li:hover {
    width: 510px;
}

.accordian li img {
    display: block;
    width: auto;
    height: 380px;
}

.cliktext-area-pc {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.cliktext-area-pc p {
    color: #fff;
    margin: 0 0 5px 0;
}

.clickText {
    text-align: center;
    margin: 0 0 25px 0px;
    font-size: 14px;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .accordian {
        display: none;
    }

    .clickText {
        text-align: center;
        font-size: 12px;
        margin: -20px 0 20px 0;
    }
}

/*====================お部屋 スマホ版 スライドショー====================*/

/* パソコン対応 レスポンシブ */
@media screen and (min-width: 768px) {
    .SP_slidShow_room {
        display: none;
    }
}

@media screen and (max-width: 767px) {

/*====================お部屋 茜====================*/

/* akane start */
.cp_cssslider_akane {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_akane > img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transition: all 0.5s;

    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 30em;
    height: auto;
}

.cp_cssslider_akane input[name='cp_switch_akane'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_akane label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_akane label:hover {
    opacity: 0.9;
}

.cp_cssslider_akane label img {
    display: block;
    width: 40px;
}

.cp_cssslider_akane input[name='cp_switch_akane']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_akane input[name='cp_switch_akane'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_akane input[name='cp_switch_akane']:checked + label + img {
    opacity: 1;
}

/* akane end */

/*====================お部屋 縹====================*/
/* hanada start */
.cp_cssslider_hanada {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_hanada > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 30em;
    height: auto;
}

.cp_cssslider_hanada input[name='cp_switch_hanada'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_hanada label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_hanada label:hover {
    opacity: 0.9;
}

.cp_cssslider_hanada label img {
    display: block;
    width: 40px;
}

.cp_cssslider_hanada input[name='cp_switch_hanada']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_hanada input[name='cp_switch_hanada'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_hanada input[name='cp_switch_hanada']:checked + label + img {
    opacity: 1;
}

/* hanada end */

/*====================お部屋 黄檗====================*/
/* kihada start */
.cp_cssslider_kihada {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_kihada > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 30em;
    height: auto;
}

.cp_cssslider_kihada input[name='cp_switch_kihada'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_kihada label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_kihada label:hover {
    opacity: 0.9;
}

.cp_cssslider_kihada label img {
    display: block;
    width: 40px;
}

.cp_cssslider_kihada input[name='cp_switch_kihada']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_kihada input[name='cp_switch_kihada'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_kihada input[name='cp_switch_kihada']:checked + label + img {
    opacity: 1;
}

/* kihada end */

/*====================お部屋 琥珀====================*/
/* kohaku start */
.cp_cssslider_kohaku {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_kohaku > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 30em;
    height: auto;
}

.cp_cssslider_kohaku input[name='cp_switch_kohaku'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_kohaku label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_kohaku label:hover {
    opacity: 0.9;
}

.cp_cssslider_kohaku label img {
    display: block;
    width: 40px;
}

.cp_cssslider_kohaku input[name='cp_switch_kohaku']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_kohaku input[name='cp_switch_kohaku'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_kohaku input[name='cp_switch_kohaku']:checked + label + img {
    opacity: 1;
}

/* kohaku end */

/*====================お部屋 山葵====================*/
/* wasabi start */
.cp_cssslider_wasabi {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_wasabi > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 30em;
    height: auto;
}

.cp_cssslider_wasabi input[name='cp_switch_wasabi'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_wasabi label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_wasabi label:hover {
    opacity: 0.9;
}

.cp_cssslider_wasabi label img {
    display: block;
    width: 40px;
}

.cp_cssslider_wasabi input[name='cp_switch_wasabi']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_wasabi input[name='cp_switch_wasabi'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_wasabi input[name='cp_switch_wasabi']:checked + label + img {
    opacity: 1;
}

/* wasabi end */

/*====================お部屋 白群====================*/
/* byakugun start */

.cp_cssslider_byakugun {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_byakugun > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 30em;
    height: auto;
}

.cp_cssslider_byakugun input[name='cp_switch_byakugun'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_byakugun label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_byakugun label:hover {
    opacity: 0.9;
}

.cp_cssslider_byakugun label img {
    display: block;
    width: 40px;
}

.cp_cssslider_byakugun input[name='cp_switch_byakugun']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_byakugun input[name='cp_switch_byakugun'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_byakugun input[name='cp_switch_byakugun']:checked + label + img {
    opacity: 1;
}

/* byakugun end */

/*====================お部屋 鴇====================*/

/* toki start */
.cp_cssslider_toki {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_toki > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: auto;
    max-width: 30em;
}

.cp_cssslider_toki input[name='cp_switch_toki'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_toki label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_toki label:hover {
    opacity: 0.9;
}

.cp_cssslider_toki label img {
    display: block;
    width: 40px;
}

.cp_cssslider_toki input[name='cp_switch_toki']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_toki input[name='cp_switch_toki'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_toki input[name='cp_switch_toki']:checked + label + img {
    opacity: 1;
}

/* toki end */

/*====================お部屋 紫苑====================*/

/* sion start */
.cp_cssslider_sion {
    padding-top: 240px;
    position: relative;
    margin: 1em auto;
    text-align: center;
    max-width: 30em;
}

.cp_cssslider_sion > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: auto;
    max-width: 30em;
}

.cp_cssslider_sion input[name='cp_switch_sion'] {
    display: none;
}

/* サムネイル */
.cp_cssslider_sion label {
    margin: 15px 5px 0 5px;
    border: 2px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.cp_cssslider_sion label:hover {
    opacity: 0.9;
}

.cp_cssslider_sion label img {
    display: block;
    width: 40px;
}

.cp_cssslider_sion input[name='cp_switch_sion']:checked + label {
    border: 2px solid #FF7043;
    opacity: 1;
}

.cp_cssslider_sion input[name='cp_switch_sion'] ~ img {
    opacity: 0;
    max-height: 240px;
}

.cp_cssslider_sion input[name='cp_switch_sion']:checked + label + img {
    opacity: 1;
}

/* sion end */
}

/*==================== ボタンエフェクト ====================*/

.cp_button03 {
    position: relative;
    z-index: 1;
    display: inline-block;
    box-sizing: border-box;
    width: 160px;
    padding: 1em;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #fff;
    border: 1px solid #008054;
    border-radius: 0;
    background: transparent;
    background-color: #D93A26;
}

.cp_button03:hover {
    color: #ffffff;
    border: 1px solid #5F363D;
}

.cp_button03:before,
.cp_button03:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: block;
    width: 99%;
    height: 98%;
    content: '';
}

.cp_button03:before {
    transition: transform cubic-bezier(1, 0, 0, 1) 0.4s;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    transform-origin: top center;
    background-color: #5F363D;
}

.cp_button03:after {
    top: -6px;
    left: -6px;
    transition: transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.7s;
    border: 1px solid #5F363D;
}

.cp_button03:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    border: 1px solid #5F363D;
}

.cp_button03:hover:after {
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
    border: 1px solid #5F363D;
}

.cp_button03:active {
    transition-duration: 0.05s;
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
}

.cp_button03:active:after {
    transition-duration: 0.05s;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.cp_button03:focus {
    color: #5F363D;
    border: 1px solid #5F363D;
}

.cp_button03:focus:hover {
    color: #ffffff;
}

.cp_button03:focus:before {
    background-color: #5F363D;
}



/*====================スマホサイズ用 スライドショー====================*/

.blankSpace {
    flex-basis: 0%;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .blankSpace {
        display: none;
    }
}

/*====================お部屋詳細====================*/

.roomDetailsTopTitle {
    text-align: center;
    font-size: 20px;
    margin: 0px 0px 10px 0;
    letter-spacing: 1px;
}

.roomDetails {
    display: flex;
    flex-wrap: wrap;
    max-width: 925px;
    margin: 0px auto 150px;
    font-size: 15px;
    padding: 0 2%;
}

.roomDetailsTitle {
    margin: auto;
}

.DetailsTable {
    width: 560px;
    border-collapse: collapse;
}

.DetailsTable tr {
    border-top: 1px solid rgb(200, 200, 200);
    border-bottom: 1px solid rgb(200, 200, 200);
}

.Details_tdRight {
    background-color: #dcdcdc;
    text-align: center;
    font-size: 16px;
}

.Details_tdLeft {
    background-color: #FFF;
    text-align: center;
    font-size: 16px;
}

.roomZu {
    margin: auto;
}

.roomZu img {
    height: 250px;
    max-width: 188px;
    margin: 10px 0 0 0;
}


/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {
    .roomDetailsTopTitle {
        font-size: 15px;
        margin: 0 0 5px 0;
    }

    .roomDetails {
        display: block;
        max-width: 365px;
        margin: 0px auto 120px;
        font-size: 13px;
        padding: 0 0 0 0%;
    }



    .roomDetailsTitle {
        margin: auto;
        display: table;
    }

    .DetailsTable {
        width: 320px;
        border-collapse: collapse;
        font-size: 12px;
    }

    .DetailsTable td {
        font-size: 14px;
    }

    .roomZu {
        text-align: center;
        margin: 15px auto;
    }

    .roomZu img {
        max-height: 360px;
    }
}

/* パソコン対応 レスポンシブ */
@media screen and (min-width: 768px) {

    .SP_br {
        display: none;
    }
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .PC_br {
        display: none;
    }
}


/*====================キャンセルポリシー====================*/

.cancellationPolicy {
    text-align: center;
    padding: 50px 0 100px 0;
    margin: -130px 0 0px 0;
}

.cancellationPolicy img {
    max-width: 100%;
}

.cancellationPolicyColorBox {
    margin: auto;
    max-width: 505px;
}

.cancellationPolicyColorBox h3 {
    text-align: center;
    background-color: #ddd;
    padding: 20px 0 0 0;
    font-size: 20px;
}

.cancellationPolicyColorBox p {
    text-align: left;
    font-size: 15px;
    background-color: #ddd;
    padding: 15px 35px 35px 35px;
}

/* パソコン対応レスポンシブ ここまで */
/* スマホ対応レスポンシブ */
@media screen and (max-width: 767px) {

    .cancellationPolicy {
        margin: -40px 0 0px 0;
    }

    .cancellationPolicyColorBox h3 {
        padding: 20px 0 0 0;
        font-size: 18px;
        margin: 0px 0 -1px 0;
    }

    .cancellationPolicyColorBox p {
        font-size: 10px;
        font-size: 13px;
        padding: 15px 35px 35px 35px;
    }
}