@charset "utf-8";
 .roomContent{
background:url(//phoenix-hotel.jp/wp-content/themes/phoenixhotel/lib/images/common/bg02.png) no-repeat center top;
padding-top: 58px;
border-bottom:50px solid #FFFFFF;
}
.room_floor{
display: block;
margin:0 auto 35px;
text-align:center;
background-color:#872226;
font-size: 150%;
color:#FFFFFF;
width: 320px;
height: 35px;
line-height: 35px;
}
.pageNav02 ul li,
.pageNav02 ul li a{
height: 116px;
}
.pageNav li{
width: 240px;
height: 108px;
}
#room03 .pageNav02 ul li div.mincho{
font-size: 110%;
}
#room01 .roomList3092 h3 span,
#room03 .roomList3100 h3 span{
font-size: 135%;
}
.pageNav02{
margin: 0 auto 45px;
}
.roomMadori{
margin:45px auto;
}
.roomList_item{
position:relative;
height: 480px;
overflow:hidden;
margin-bottom: 22px;
background-position:center top;
background-repeat:no-repeat;
padding-top: 30px;
}
.roomList_image{
height: 480px;
position:absolute;
left:50%;
margin-left: -116px;
top:0;
}
.roomList_image_inner{
position:relative;
overflow:hidden;
height: 480px;
}
.roomList_image_thumb{
height: 54px;
left:20px;
bottom:20px;
overflow:visible;
z-index: 2;
}
.roomList_image_thumb .slick-list{
overflow:visible;
}
.roomList_image_thumb li{
width: 104px !important;
height: 54px;
margin-right: 10px;
border:1px solid #DDC490;
cursor:pointer;
}
.roomList_image_thumb li img{
width: 100%;
height: 100%;
}
.roomList_image_thumb .slick-current{
opacity:0.5 !important;
}
.roomList_item h3{
font-size: 150%;
width: 320px;
padding-top: 20px;
border-top:1px dotted #D0B98D;
}
.roomList_item h3 span{
font-size: 165%;
margin-bottom: 15px;
line-height: 1.2;
}
.room_description{
font-size: 106.25%;
margin:20px 0;
}
.room_detail{
border-left:1px solid #D0B98D;
}
.room_detail th{
padding:8px 45px 8px 30px;
}
.roomList li.roomList_item:nth-of-type(even) .roomList_image{
left:auto;
margin-left: 0;
right:50%;
margin-right: -116px;
}
.roomList li.roomList_item:nth-of-type(even) .container{
padding-left: 630px;
}
.roomList li.roomList_item:last-child{
margin-bottom: 0;
}
.roomList_yoyaku{
padding:10px 0;
}
#room05{
border-bottom:none;
}
#room05 .pageNav02{
display: none;
}
#room05 .lead_description{
padding-bottom: 0;
}
#room06{
background-color:#FFFFFF;
color:#000000;
position:relative;
overflow:hidden;
padding-bottom: 100px;
padding-top: 50px;
}
.lead_description02{
width: 950px;
margin:0 auto 30px;
border-bottom:1px dotted #D0B98D;
border-top:1px dotted #D0B98D;
color:#D0B98D;
padding:15px 50px;
}
.room_floor span{
font-size: 14px;
}
.room_special{
height: 640px;
padding-top: 80px;
margin-bottom: 35px;
}
.room_special h3{
text-align:center;
font-size: 310%;
}
.room_special p{
text-align:center;
font-size: 125%;
line-height: 2;
margin:40px 0;
}
.room_special_images{
width: 860px;
margin:0 auto;
}
.room_special_images img{
width: 240px;
height: 240px;
}
#room01 .room_special{
background:url(//phoenix-hotel.jp/wp-content/themes/phoenixhotel/lib/images/room/room01_special.jpg) no-repeat center top;
}
#room01 .room_special h3{
color:rgba(255,255,255,0.50);
}
#room02 .room_special{
background:url(//phoenix-hotel.jp/wp-content/themes/phoenixhotel/lib/images/room/room02_special.jpg) no-repeat center top;
}
#room02 .room_special h3{
color:rgba(135,34,38,0.50);
}
#room02 .room_special p{
color:#872226;
} .modal-001__wrap {
display: inline-block;
}
.modal-001__wrap input {
display: none;
}
.modal-001__open-label,
.modal-001__close-label {
cursor: pointer;
}
.modal-001__open-label {
background: #e3d5bb;
padding: 15px 20px;
color: #241611;
display: block;
width: 100%;
position: relative;
border-radius: 5px;
min-width: 280px;
text-align: center;
margin-top: 20px;
}
.modal-001__open-label:hover {
opacity: 0.7;
}
.modal-001__open-label:after {
font-family: FontAwesome;
content: "\f105";
position: absolute;
right: 8px;
}
.modal-001 {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999999;
display: none;
}
.modal-001__open-input:checked + label + input + .modal-001 {
display: block;
animation: modal-001-animation .6s;
}
.modal-001__content-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 1000px;
background:rgba(255,255,255,0.9);
z-index: 2;
border-radius: 5px;
}
.modal-001__close-label {
background-color: #d0b98d;
color: #fff;
border: 2px solid #fff;
border-radius: 20px;
width: 36px;
height: 36px;
line-height: 1.5;
text-align: center;
display: table-cell;
position: fixed;
top: -15px;
right: -2%;
z-index: 99999;
font-size: 1.4em;
}
.modal-001__content {
max-height: 80vh;
overflow-y: auto;
padding: 39px 45px 40px;
}
.modal-001__background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .45);
z-index: 1;
}
.modal-001__content h4{
color: #872226;
font-size: 30px;
font-family: 'Noto Serif', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
text-align: center;
display: flex;
align-items: center; justify-content: center;
}
.modal-001__content h4:before, .modal-001__content h4:after {
border-top: 1px solid;
content: "";
width: 7em; }
.modal-001__content .h4_ti{
position: relative;
padding-top: 50px;
}
.modal-001__content .h4_ti::before{
content: '';
display: inline-block;
width: 28px;
height: 37px;
background-image: url(https://phoenix-hotel.jp/wp-content/themes/phoenixhotel/lib/images/room/icon_dentou.png);
background-size: contain;
vertical-align: middle;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.modal-001__content h4:before {
margin-right: 0.5em; 
}
.modal-001__content h4:after {
margin-left: 0.5em; 
}
.modal-001__content ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.modal-001__content ul li{
width: 50%;
margin-top: 40px;
}
.modal-001__content ul li dl{
display: flex;
}
.modal-001__content ul li dl dt img{
border:solid 1px #872226;
}
.modal-001__content ul li dl dd h5{
font-size: 20px;
padding-bottom: 15px;
display: block;
color: #872226;
}
.modal-001__content ul li dl dd{
color: #000;
padding-left: 25px;
padding-right: 50px;
}
.modal-001__content ul li dl dd p{
line-height: 1.4em;
}
.modal-001__content ul li dl dd h5 span{
font-size: 14px;
}
@keyframes modal-001-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media only screen and (max-width: 520px) {
.modal-001__open-label {
max-width: 90%;
padding: .94em 2.1em .94em 2.6em;
}
.modal-001__close-label {
top: -17px;
right: -4%;
}
.modal-001__content-wrap {
width: 90vw;
}
.modal-001__content {
padding: 33px 21px 35px;
max-width: 100%;
}
.modal-001__wrap{
display: block;
}
.modal-001__open-label{
width: 100%;
max-width: 100%;
}
.modal-001__content h4{
font-size: 25px;
}
.modal-001__content h4:before, .modal-001__content h4:after{
width: 2em;
}
.modal-001__content ul li{
width: 100%;
}
.modal-001__content ul li dl dd{
padding-right: 0;
padding-left: 0;
padding-top: 20px;
}
.modal-001__content ul li dl{
display: block;
}
.modal-001__content ul li dl dt img{
width: 70%;
}
.modal-001__content ul li dl dt,
.modal-001__content ul li dl dd h5{
text-align: center;
}
}