@charset "utf-8";
/*
* ★★CSS for SP
*
* @date 2014.4.15
* @author HeChengHao
* @taiwan
*/



body #topBnr{ width:100%;  position:relative; margin:0 0 15px 0;}

body #topBnr div.sliders{ width:100%; position:relative; margin:0;padding:0;}
body #topBnr div.sliders div#imgs{ width:100%; position:relative; margin:0;}

body #topBnr #arrowL{display:block; width:25px; height:25px; top:35%; left:10px;position:absolute;}
body #topBnr #arrowR{display:block; width:25px; height:25x; top:35%; right:10px;position:absolute;}
#topBnr a#arrowL img,#topBnr a#arrowR img{opacity:0.7;-moz-opacity:0.7; -khtml-opacity:0.7; filter: alpha(opacity=70); -ms-filter:"alpha(opacity=70)"; width:100%;} 

body #topBnr div.sliders div#imgs{width:100%; overflow:hidden; margin:0; padding:0;}
body #topBnr div.sliders div#imgs span{display:inline; margin:0 auto; padding:0;width:100%;}
body #topBnr div.sliders div#imgs img.sp{ display:inline; margin:0; padding:0;width:100%;}

body #topBnr h1{ display:block;  width:100%; padding-top:8px; padding-bottom:8px; text-align:center; color:#a58700; font-size:17px; background:#232323;}
body #topBnr  span.date-sp{ display:block; width:95%; margin:5px auto 0 auto; color:#222222; font-size:12px; text-align:center; position:relative;}



/* -- Reset -- */
#contentsArea {font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif;background-color:#fff;}
#contentsArea .htlBox h1,#contentsArea .htlBox h1:visited{color:#313131;text-decoration:none;}
#contentsArea .htlBox h1:hover,#contentsArea .htlBox h1:active{color:#C00;text-decoration:underline;}
#contentsArea a:visited:hover,#contentsArea a:link:hover,#contentsArea a:visited:active,#contentsArea a:link:active{text-decoration:none;}
div.clear{clear:both;margin:0;padding:0;height: 1px;width: 1px;}
.pc{ display:none;}

/* -- contentsArea -- */
#contentsArea,#contentsArea #contents{background:url(https://img.ravel.rakuten.co.jp/kaigai/special/secret/images/bg.gif) repeat;}
#contentsArea #contents.column1{ padding:0;}
#mainContents{ padding-bottom:20px;}

/* -- top -- */
#keyVisual {padding:2px;text-align: center;}
#contents .nav_area{background: #FFFFFF;padding:5px 0 0 1%;margin:0 0 10px;font-size:100%;display:block;color:#a58700;
background-image: url(../images/arrow_c.png) ;
background-repeat: no-repeat;
background-position:right 50%;
}


#contents .btn li{ width:49%; margin:0 1% 1% 0; box-sizing:border-box;float: left;border:0;color:#f5f2e4;}
#contents .btn li.navi_right{ width:99%;}
#contents .btn li a{ color:#a58700; background-color: #FFFFFF; line-height:44px;display: block;text-align: center;
background-image: url(https://img.travel.rakuten.co.jp/kaigai/special/secret/images/arrow_c.png) ;
background-repeat: no-repeat;
background-position:right 50%;
border-bottom:2px solid #a58700; 
border-left:2px solid #a58700; 
border-top:2px solid #a58700; 
border-right:2px solid #a58700; 
}
#contents .btn li a:active{ color:#a58700;}
#contents .nav_area .btn li.on a {color: #a58700;background-color: #F9F4DB;pointer-events:none;}


/* 各ページのボタンを色変え　htmlのクラスの番号を合わせる　*/
#contents .nav_area .btn li a:hover,.btn li a:active{background-color:#f5f2e4; color:#a58700 !important;background-image: url(https://img.travel.rakuten.co.jp/kaigai/special/secret/images/arrow_c.png) ;
background-repeat: no-repeat;
background-position:right 50%;}


/* h1 */
#contentsArea h1.ttlhotel{ color:#a58700; background:#333; margin:1px 1px 0 ;padding:3px 0; text-align:center; font-size:22px;clear: both;}
#contentsArea #search-box h1.ttlhotel{ background:#e42987;}


/* hotel */
#contentsArea .htlBox {
	border: 1px solid #a58700;
	border-radius: 0;
    background-color: #fff;
    line-height: 1.4;
    margin-bottom: 15px;
}
#contentsArea .htlBox .areaNm {
    background-color: #a58700;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 8px;
    padding-left: 10px;
}
.htlBox .basic, .htlBox .sub {
	border: none;
    padding: 10px;
}


.spRight {padding-top: 0;
    width: 50%;
    float: left;
    padding-left: 10px;
	box-sizing: border-box;
}
.htlBox .basic::before { content: none;}
.htlBox .basic .photo .htlImg {
    width: 50%;
    float: left;
}
.htlBox .photo { width: 100%;}
#contentsArea .roomType {
    background: #fff;
    width: 39%;
    display: block;
    border-radius: 8px;
    float: left;
    margin: 1% 2%;
}
.htlBox .basic .htlNm {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    padding-bottom: 10px;
}
#contentsArea .price a {
	text-align: center;
    color: #000 !important;
    font-weight: normal;
}
.htlBox .price .present {
    color: #d00505;
    font-weight: 700;
    font-size: 25px;
}
.htlBox .price b.aboutP {
    font-size: 14px;
    font-weight: normal;
    color: #333333;
}
.hotelbox .price span em {
    font-style: normal;
    font-size: 16px;
    color: #ca0b1a;
}

#contentsArea .hotelbox .details {
	text-align: center;
    color: #000;
    font-size: 12px;
    margin: 0 10px;
}
.htlBox .btnbox li {
    margin-bottom: 5px;
    font-weight: 700;
}
.hotelbox .btnbox {
    overflow: hidden;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 8px;
    clear: both;
    margin-bottom: 8px;
}
.htlBox .btnbox li {
    margin-bottom: 5px;
    font-weight: 700;
}
#contentsArea .btnbox > li:nth-child(1) > a:nth-child(1) {
    border-width: 2px;
    background: #a58700;
    color: #fff;
    position: relative;
}
#contentsArea .btnbox li a {
    border-radius: 5px;
    border-style: solid;
    border-color: #a58700;
    display: block;
    font-size: 14px;
    text-align: center;
    padding: .8em 0 .7em 0;
        padding-right: 0px;
        padding-left: 0px;
    position: relative;
    cursor: pointer;
    padding-right: 15px;
    padding-left: 15px;
    font-weight: 400;
}
.btnbox > li:nth-child(1) > a:nth-child(1)::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}
/* search */
#search-box{ border:5px solid #fafb9d;padding:10px 10px 10px; background:none; margin:0 0 15px 0; border-radius:0;clear:both;}
#search-box h1{ color:#fff; background:#000; margin:0px 1px 0 ;padding:3px 0; text-align:center; font-size:22px;clear: both;}

#contentsArea #search-box-body{ background:#fff;}

#contentsArea #search-box p.searchSubmit a{ background:#f9d7d7; border:1px solid #fec6c6; color:#000; position:relative;}
#contentsArea #search-box p.searchSubmit a:active{ background:#feeeee; border:1px solid #fec6c6;}
#contentsArea #search-box p.searchSubmit a:after{ border:solid transparent;content:"";position:absolute;right:0;top:50%;margin-top:-5px;margin-right:5px;border-color:#f9d7d7 #f9d7d7 #f9d7d7 #bb0502;border-width:5px;z-index:1;}
#contentsArea #search-box p.searchSubmit a:active:after{ border:solid transparent;content:"";position:absolute;right:0;top:50%;margin-top:-5px;margin-right:5px;border-color:#feeeee #feeeee #feeeee #bb0502;border-width:5px;z-index:1;}




/*-- サーチselectboxを100％に --*/
#search-box select{width: 100%;}

/* day */
.txt_day{font-size:80%;padding:5px 10px;clear: both;}


.sp_no{display: none;}



/*--BTN COLOR--*/

#contentsArea .pageBtn a{
	line-height: 44px;
	color: #a58700;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:0;
	background-color: #232323; 
	background-image: url(https://img.travel.rakuten.co.jp/kaigai/special/secret/images/arrow_t.png) ;
	background-repeat: no-repeat;
	background-position:right 50%;}

#contentsArea #contents .pageBtn a:hover {
color: #a58700;
	text-decoration: underline;
	border:0;
	background-color: #232323; } 


 #contentsArea h1.ttlarea{
	margin:10px 0;
	margin: 0px 0 0 0\9; /* ie7 */
	padding: 10px 0px;
	 text-align:center;
	font-size:120%;
	 background:#232323;
	color: #a58700; 
	}

.htlBox3 .rate,
.htlBox3 .rank{
	position: absolute;
	top: 5px;
	right: 5px;
	margin: 0;
	padding: 0;
	border: none;
}
.htlBox3 .rate a,
.htlBox3 .rank{ border:1px solid #a58700;
	padding: 3px;
	background-color: #FFF;
	border-radius: 3px;
	line-height: 1.1;
}
.htlBox .area { font-size:100%;}        
    
.htlBox h1 {
    font-size: 130%;}
.htlBox3 .explain{
    float: left;
    margin: 0 7px 7px;
    position: relative;
    width: 100%;
}	


.bg{ background:url(https://img.travel.rakuten.co.jp/kaigai/special/secret/images/bg.gif) repeat; margin:0; padding:0;}