/* 新しいホテルのNewマーク */
/* 表示 */
/*  Hotel 1 Bab Al Shams Desert Resort & Spa */
li.hotelList:nth-child(1)  .new,
/*  Hotel 2 Al Maha, a Luxury Collection Desert Resort & Spa */
li.hotelList:nth-child(2)  .new,
/*  Hotel 3 The Ritz-Carlton Ras Al Khaimah, Al Wadi Desert */
li.hotelList:nth-child(3)  .new{ 
    display: block;
}
/* 非表示 */
/*  Hotel 1 Bab Al Shams Desert Resort & Spa */
li.hotelList:nth-child(1)  .new,
/*  Hotel 2 Al Maha, a Luxury Collection Desert Resort & Spa */
li.hotelList:nth-child(2)  .new,
/*  Hotel 3 The Ritz-Carlton Ras Al Khaimah, Al Wadi Desert */
li.hotelList:nth-child(3)  .new{ 
    display: none;
}

/* 

Category Selected
部屋詳細スライド下のカテゴリーの選択

========================================
.cate-luxury => ラグジュアリー
.cate-luxury svg  => ラグジュアリーのアイコン

.cate-fountain => ファウンテンビュー
.cate-fountain svg => ファウンテンビューのアイコン

.cate-pool => プール付き
.cate-pool svg => プール付きのアイコン

.cate-pop => 有名・話題
.cate-pop svg => 有名・話題のアイコン

.cate-beach-pj => ビーチエリア/パームジュメイラ
.cate-beach-pj svg => ビーチエリア/パームジュメイラのアイコン

.cate-beach-etc => ビーチエリア/その他
.cate-beach-etc svg => ビーチエリア/その他のアイコン

.cate-airport => 空港内・周辺
.cate-airport svg => 空港内・周辺のアイコン

.cate-24h => 24時間滞在
.cate-24h svg => 24時間滞在のアイコン

========================================

 */

 /*  Hotel 1 Bab Al Shams Desert Resort & Spa */
#desertHotel ul li:nth-child(1) .cate-pool p,
#desertHotel ul li:nth-child(1) .cate-pop p,

#desertHotel ul li:nth-child(1) .cate-pool svg,
#desertHotel ul li:nth-child(1) .cate-pop svg,

 /*  Hotel 2 Al Maha, a Luxury Collection Desert Resort & Spa */
#desertHotel ul li:nth-child(2) .cate-luxury p,
#desertHotel ul li:nth-child(2) .cate-pool p,
#desertHotel ul li:nth-child(2) .cate-pop p,

#desertHotel ul li:nth-child(2) .cate-luxury svg,
#desertHotel ul li:nth-child(2) .cate-pool svg,
#desertHotel ul li:nth-child(2) .cate-pop svg,

 /*  Hotel 3 The Ritz-Carlton Ras Al Khaimah, Al Wadi Desert */
#desertHotel ul li:nth-child(3) .cate-luxury p,
#desertHotel ul li:nth-child(3) .cate-pool p,

#desertHotel ul li:nth-child(3) .cate-luxury svg,
#desertHotel ul li:nth-child(3) .cate-pool svg{
    color: #807352;
    fill: #807352;
}

/*  周辺スポットの非表示  */
.h3-spot,
ul#spot{
    display: none;
}

/*  その他のホテル  */
/*  title */
#otherHotel h2 {
    width: 16em; /*  タイトルの文字数+3  */
    background-image: url(../images/icon/icon-camel.svg), url(../images/icon/icon-camel.svg);
}
/*  Hotel ４ Qasr Al Sarab Desert Resort */
/*#otherHotel li .other-hotel-img{
    background-image: url(../images/desert/qasr-al-sarab-desert-resort@2x.jpg);
}*/



 /*  分泊ホテル一覧  */
 /*  title */
 #anotherHotel{
    background-color: #F0EDE5;
}
 #anotherHotel h2 {
    width: 15em; /*  タイトルの文字数+4  */
    background-image: url(../images/icon/icon-camel.svg), url(../images/icon/icon-camel.svg);
    color: #333;
}

#anotherHotel li{
    list-style: none;
    margin: 0;
    position: relative;
}
#anotherHotel .hotel-img {
    background-size: cover;
}
/*  ホテルのイメージ */
/*#anotherHotel li:nth-child(1) .hotel-img {
    background-image: url(../images/desert/another/1-jw-marriott-marque@2x.jpg);
}
#anotherHotel li:nth-child(2) .hotel-img {
    background-image: url(../images/desert/another/2-the-palace-downtown@2x.jpg);
}
#anotherHotel li:nth-child(3) .hotel-img {
    background-image: url(../images/desert/another/3-atlantis-the-palm@2x.jpg);
}
#anotherHotel li:nth-child(4) .hotel-img {
    background-image: url(../images/desert/another/4-rove-downtown-dubai@2x.jpg);
}
#anotherHotel li:nth-child(5) .hotel-img {
    background-image: url(../images/desert/another/5-jumeirah-al-qasr@2x.jpg);
}*/
#anotherHotel h4{
    font-weight: bold;
    margin: 4px 0 0 0;
    letter-spacing: -1px;
}
#anotherHotel p{
    margin: 0;
}
#anotherHotel a {
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    bottom: 0;
    right: 0;
}
#anotherHotel a p {
    color: #333;
    margin: 0;
    background-image: url(../images/parts/txt-link-arrow-gry.png);
    background-repeat: no-repeat;
    background-position: right;
}
#anotherHotel a:hover {
    opacity: 0.7;
}
#anotherHotel svg {
    padding-top: 5px;
}
#anotherHotel svg .a{
    fill:#333;
}
#anotherHotel svg .b{
    fill:#fff;
}


/*  分泊ホテル  */
#anotherHotel{
    padding: 24px 16px;
}
#anotherHotel h2 {
    margin: 0 auto 24px;
}
#anotherHotel ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#anotherHotel li{
    width: 31%;
    margin: 1%;
    height: 230px;
    padding: 0;
}
#anotherHotel .hotel-img {
    padding: 0;
}
#anotherHotel h4{
    font-size: 13px;
}
#anotherHotel p{
    font-size: 11px;
}
#anotherHotel a p {
    font-size: 10px;
    padding: 0 18px 0 0;
}
#anotherHotel a p span{
    display: none;
}

@media screen and (max-width: 374px){
    #anotherHotel li{
        height: 280px;
    }
}


@media screen and (min-width: 769px){
/*  Page Main Image このページのメインビジュアル */
.mv{
    background: -webkit-gradient(linear, 
    left bottom, left top, 
    color-stop(5%, rgba(0, 0, 0, 0.9)), 
    color-stop(120%, rgba(0, 0, 0, 0))), 
    url(../images/desert/desert@2x.jpg);
    background: -o-linear-gradient(bottom, 
    rgba(0, 0, 0, 0.9)5%, 
    rgba(0, 0, 0, 0)120%), 
    url(../images/desert/desert@2x.jpg);
    background: linear-gradient(0deg, 
    rgba(0, 0, 0, 0.9)5%, 
    rgba(0, 0, 0, 0)120%), 
    url(../images/desert/desert@2x.jpg);
    background-position: center;
    background-size: cover;
}




/*  その他のホテル  */
/*  Hotel ４ Qasr Al Sarab Desert Resort */
#otherHotel li .other-hotel-img{
    background-image: url(../images/desert/qasr-al-sarab-desert-resort@2x.jpg);
}



/*  分泊ホテル  */
#anotherHotel h2 {
    margin: 0 auto 48px;
}
#anotherHotel ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#anotherHotel ul li{
    width: 18%;
    margin: 1%;
}
#anotherHotel .hotel-img {
    padding: 0;
}
#anotherHotel h4{
    font-size: 12px;
}
#anotherHotel p{
    font-size: 12px;
    margin: 0 0 30px 0;
}
#anotherHotel a p {
    font-size: 12px;
    letter-spacing: 1px;
}
}



@media screen and (min-width: 768px){
#anotherHotel .hotel-img {
    padding: 120px 0 0 0;
}
#anotherHotel ul {
    width: 96%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#anotherHotel li {
    width: 18%;
}
}



@media screen and (min-width: 961px){
#anotherHotel .hotel-img {
    padding: 0;
}
#anotherHotel ul {
    max-width: 960px;
    margin: 0 auto;
}
#anotherHotel li {
    height: 240px;
}
}