@charset "utf-8";

@media (max-width: 1230px) and (min-width: 769px) {

    html, body {
        width: 1230px;
    }

}

.inner {
    width: 1088px;
    margin:  auto;
}

.roomWrap  { }
.roomWrap .roomPicture { position: relative;}
.roomWrap .roomPicture ul:after { display: block; content: ""; clear: both;}
.roomWrap .roomPicture ul li { float: left; width: 20%; line-height: 0;}
.roomWrap .roomPicture ul li:nth-child(n + 6) { display: none;}
.roomWrap .roomPicture ul li:nth-child(1) { width: 60%;}
.roomWrap .roomPicture ul li a { display: block; position: relative; line-height: 0;}
.roomWrap .roomPicture ul li a:after { display: block; width: 20px; height: 20px; content: ""; background-size: 100% 100%; position: absolute; right: 0; bottom: 0;}
.roomWrap .roomPicture ul li a > img { width: 100%; height: 250px; object-fit: cover; font-family: 'object-fit: cover;';}
.roomWrap .roomPicture ul li:nth-child(1) a img { height: 500px;}
.roomWrap .roomPicture ul li a:hover img { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
.roomWrap .roomPicture ul li a .logo { display: block; position: absolute; top: 100px; width: 100%; height: auto; text-align: center;}
.roomWrap .roomPicture ul li a .logo img { width: auto; height: auto; max-height: 300px; max-width: 50%;}
.roomWrap .roomPicture ul li a:hover .logo img { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1;}

.roomWrap .detainSec1 { padding: 50px 0; position: relative;}
.roomWrap .detainSec1 .inner:after { display: block; content: ""; clear: both;}
.roomWrap .detainSec1 .inner .boxL { width: 100%; }
.roomWrap .detainSec1 .inner .boxL h2 { font-size: 28px; font-weight: normal; line-height: 1; letter-spacing: 0.05em; padding-bottom: 20px; border-bottom: 1px solid #d3d3d6;}
.roomWrap .detainSec1 .inner .boxL h2 span { position: relative; display: table; font-size: 18px; line-height: 1; display: block; margin-top: 15px;}
.roomWrap .detainSec1 .inner .boxL h2 span strong { display: table-cell; letter-spacing: -0.4em; vertical-align: top; font-weight: normal;}
.roomWrap .detainSec1 .inner .boxL h2 span strong:nth-child(1) { white-space: nowrap; letter-spacing: normal;}
.roomWrap .detainSec1 .inner .boxL h2 span address { font-size: 15px; font-weight: normal;padding-top: 10px; }
.roomWrap .detainSec1 .inner .boxL h2 span phone { font-size: 15px; font-weight: normal;padding-top: 5px; }

.roomWrap .detainSec2 { padding: 50px 0; position: relative; }
.roomWrap .detainSec2 .inner:after { display: block; content: ""; clear: both;}
.roomWrap .detainSec2 .inner .boxL { width: 100%; border: 1px solid #d3d3d6;padding: 20px 0  20px  20px;}

.roomWrap .amenityBox { padding: 30px 30px 20px 30px; border-left: 1px solid #d3d3d6; border-right: 1px solid #d3d3d6; border-bottom: 1px solid #d3d3d6;}
.roomWrap .amenityBox ul:nth-child(1) { width: 100%; letter-spacing: -0.4em; border-bottom: 1px dotted #c7c8cb; padding-bottom: 30px;}
.roomWrap .amenityBox ul:nth-child(1) li { display: inline-block; width: 14.2857143%; letter-spacing: normal; position: relative; vertical-align: middle; text-align: center; line-height: 1; font-size: 12px;}
.roomWrap .amenityBox ul:nth-child(1) li:after { position: absolute; right: 0; top: 50%; margin-top: -10px; display: block; content: ""; width: 0px; height: 20px; border-left: 1px dotted #c7c8cb;}
.roomWrap .amenityBox ul:nth-child(1) li:last-child:after { display: none;}
.roomWrap .amenityBox ul:nth-child(1) li img { display: block; margin: 10px auto 10px; width: 40px; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
.roomWrap .amenityBox ul:nth-child(2) { padding-top: 25px; letter-spacing: -0.4em; margin-left: -21px;}
.roomWrap .amenityBox ul:nth-child(2) li { filter:alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; position: relative; display: inline-block; margin-bottom: 10px; letter-spacing: normal; margin-left: 21px; line-height: 20px; font-size: 13px;}
.roomWrap .amenityBox ul:nth-child(2) li img { width: 20px; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; margin-right: 5px;}
.roomWrap .amenityBox ul:nth-child(2) li:after { display: block; content: ""; width: 100%; height: 1px; background: #000; position: absolute; left: 0; top: 50%;}
.roomWrap .amenityBox ul:nth-child(2) li.active { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1;}
.roomWrap .amenityBox ul:nth-child(2) li.active:after { display: none;}
.roomWrap .amenityBox .caution { background: #f7f7f7; text-align: center; padding: 5px; line-height: 1; font-size: 11px;}

@media (max-width: 768px) {
.inner {
    width: 100%;
    margin: 0 auto;
}
    .roomWrap .roomPicture ul li { float: left; width: 25%; line-height: 0;}
    .roomWrap .roomPicture ul li:nth-child(1) { width: 100%;}
    .roomWrap .roomPicture ul li a > img { height: 100px;}
    .roomWrap .roomPicture ul li:nth-child(1) a > img { height: 300px;}
    .roomWrap .roomPicture ul li a .logo { top: 50px;}
    .roomWrap .roomPicture ul li a .logo img { max-height: 200px!important;}
    .roomWrap .caution { padding: 0 0 20px;}

    .roomWrap .detainSec1 { padding: 30px 0 50px 0;}
    .roomWrap .detainSec1 .inner .boxL { width: 100%; float: none;}
    .roomWrap .detainSec1 .inner .boxL h2 { font-size: 24px; line-height: 1.618; padding-bottom: 20px;}
    .roomWrap .detainSec1 .inner .boxL h2 span { display: block; font-size: 14px; line-height: 20px;}
    .roomWrap .detainSec1 .inner .boxL h2 span em { font-size: 10px;}
    .roomWrap .detainSec1 .inner .boxL .amenityLink { display: none;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt { margin-top: 15px;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt p { position: relative; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; letter-spacing: 0.05em; line-height: 2; margin-top: 0; text-align: justify; height: 6em; overflow: hidden;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt p:after { display: block; content: "…"; background: #fff;display: block; position: absolute; right: 0; bottom: 0;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt p.active { height: auto;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt p.active:after { display: none;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt .moreBtn { text-align: center; line-height: 1; margin-top: 15px; position: relative; border-top: 1px solid #bcbdc0; padding-top: 15px;}
    .roomWrap .detainSec1 .inner .boxL .mainTxt .moreBtn:after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; left: 0; box-sizing: border-box; width: 10px; border: 10px solid transparent; border-top: 10px solid #bcbdc0;}
    .roomWrap .detainSec1 .inner .boxR { display: none;}
    .roomWrap .amenityBox { padding: 0 20px; border: none; margin-bottom: 50px;border-left: 1px solid #d3d3d6; border-right: 1px solid #d3d3d6; border-bottom: 1px solid #d3d3d6;}
    .roomWrap .amenityBox ul:nth-child(1) { text-align: center; padding-bottom: 15px;}
    .roomWrap .amenityBox ul:nth-child(1) li { width: 25%; margin-bottom: 5px;}
    .roomWrap .amenityBox ul:nth-child(1) li:nth-child(4):after { display: none;}
    .roomWrap .amenityBox ul:nth-child(2) { padding-top: 20px;}

	.roomWrap .detainSec2 { padding: 50px 0; position: relative; }
	.roomWrap .detainSec2 .inner:after { display: block; content: ""; clear: both;}
	.roomWrap .detainSec2 .inner .boxL { width: 100%; border: 1px solid #d3d3d6;padding: 20px 0  20px  20px;}

}


img {
    max-width: 100%;
    vertical-align: top;
}

ul {
    list-style: none;
}

ul {
    margin: 0;
}

ul {
    padding: 0;
}