@charset "utf-8";

/*
 * CSS for SmartPhone
 * @date     2017.03.21
 * @author   Sungjoon Park
 */


/* ------------------------------------------

------------------------------------------ */
#keyVisual { width:100%; margin-bottom:0;}
#keyVisual img { width:100%; display:block;}

#keyVisual h1.page_logo { position:absolute; z-index:100; background:none; width:300px; text-align:center; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#ffffff; font-size:16px; top:30%; left:50%; margin-left:-150px;}
h1.page_logo img { width:100%; display:block; margin-bottom:8px;}
h1.page_logo span { letter-spacing:1px;}

.pc { display:none;}

.#contents .pagetop { z-index:500;}

/* ----- main_nav -----*/

.main_nav { width:100%; background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/page_bg.gif) repeat; padding:10px 0 0 0;}
.main_nav ul li { width:23.8%; float:left; margin-left:1%; margin-bottom:6px;}
.main_nav ul li a { display:block;}
.main_nav ul li img { display:block; width:100%;}
#contentsArea .main_nav ul li a:hover { text-decoration:none;}
#contentsArea .main_nav ul li span { text-align:center; font-size:12px; color:#ffffff; padding:5px 0; background:#7cbfbf; display:block; transition-duration: 0.1s }
#contentsArea .main_nav ul li.top_nav_o span { background:#f0388b; color:#ffffff; font-size:12px;}
#contentsArea .main_nav ul li a:hover span { background:#f0388b; text-decoration:none; transition-duration: 0.3s }
#contentsArea .main_nav ul li a:hover img { opacity:0.8;}

p.lead { text-align:center; font-size:12px; line-height:1.3; padding:10px 10px 15px 10px; }


/* ----- mainContents -----*/

#contents.column2R { background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/page_bg.gif) repeat; padding:0;}
/*
.top_page { padding:url(https://travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/
*/
.top_page .page_h2 { font-size:20px; color:#4ca9a8; font-weight:bold; border-bottom:2px solid #4ca9a8; padding-bottom:8px; margin-bottom:4px;}
.page_h2 big { font-size:26px;}


/* ----- sub_nav -----*/

.sub_nav { margin-bottom:15px;}
.sub_nav li { float:left; width:31.5%; margin:4px 0 4px 1.5%}
#contentsArea .sub_nav li a { display:block; color:#4ca9a8; font-size:13px; position:relative; transition:0.2s; border:1px solid #4ca9a8; padding:6px 0; text-align:center;}
#contentsArea .sub_nav li a:before {  
            content: '';  
            display: block;  
            width: 5px;  
            height: 5px;  
            border-right: 1px solid #4ca9a8;  
            border-top: 1px solid #4ca9a8;  
            -webkit-transform: rotate(135deg); 
            transform: rotate(135deg); position:absolute; right:4px; top:32%;   } 
#contentsArea .sub_nav li a:hover { color:#f1388c; text-decoration:none; border:1px solid #f1388c;}
#contentsArea .sub_nav li a:hover:before {  
            content: '';  
            display: block;  
            width: 5px;  
            height: 5px;  
            border-right: 1px solid #f1388c;  
            border-top: 1px solid #f1388c;  
            -webkit-transform: rotate(135deg); 
            transform: rotate(135deg); position:absolute; right:4px; top:32%;   } 
			
.page_h3 { font-size:18px; color:#4ca9a8; font-weight:bold; border-bottom:1px solid #4ca9a8; border-left:3px solid #4ca9a8; padding-left:6px; padding-bottom:2px; margin-bottom:10px;}
.page_h3 big { font-size:21px;}
.page_h3 small { font-size:15px;}

.top_page_map { width:100%; margin:auto auto 15px auto;}
.top_page_map img { width:100%;}

/* ----- season_table -----*/

.season_table { margin-bottom:15px;}
.season_color { font-size:12px; text-align:right;}
.season_pink { background:#f06aa7; margin-right:8px; color:#f06aa7; padding:0 5px;}
.season_blue { background:#4acac9; margin-right:8px; color:#4acac9; padding:0 5px; margin-left:15px;}

.country_name { display:none;  }
.area_name { font-size:12px; text-align:left; width:10%; min-width:76px; padding:0;}
.season_month { background:#e9e9e9; width:6%;}

.season_fine { background:#f06aa7;}
.season_rain { background:#4acac9;}

.vacant { background:none; text-align:center; color:#3dc0bb; font-weight:bold; font-size:12px;}

.height20 { height:10px;} 
.height12 { height:5px;}

.price_pink { text-align:center; font-size:12px; color:#ffffff; background:#f06aa7; padding:3px 0;}
.price_blue { text-align:center; font-size:12px; color:#ffffff; background:#4acac9; padding:3px 0;}
.price_pink big, .price_blue big { font-size:14px; font-weight:bold;}

.font_pink { font-size:12px; color:#f06aa7; text-align:center;}
.font_blue { font-size:12px; color:#4acac9; text-align:center;}

.price_table { margin-bottom:15px;}


/* ----- top_page_hotel -----*/

.top_page_hotel { width:100%; margin-bottom:10px;}
.top_hotel { width:100%; margin-bottom:10px;}
.top_hotel h4 { color:#5dafae; text-align:center; margin-bottom:5px; border-bottom:1px solid #5dafae; padding-bottom:3px; font-size:14px;}
.hotel_photo { width:48%; float:left}
.hotel_photo img { width:100%; display:block;}
.hotel_exp { font-size:12px; line-height:1.4; padding:4px 2%; background:#ffffff; width:45%; float:right;}
#contentsArea .top_hotel_box a { color:#000000; text-decoration:none; border:6px solid #cae5e4; background:#cae5e4; display:block; transition-duration:0.2s; position:relative;}
.hotel_point { font-size:12px; padding:6px 0; line-height:1.3; width:49%; float:right }
#contentsArea .top_hotel_box a:hover { text-decoration:none; border:6px solid #f0378b; background:#f0378b; opacity:0.8;  }
#contentsArea .top_hotel_box a:hover .hotel_point { color:#ffffff;}


/* ----- resort_box -----*/

.resort_box { margin-bottom:15px;}
.resort_box li { float:left; width:48%; margin:1%;}
.resort_box li img { width:100%; display:block;}
.resort_box li p { font-size:12px; line-height:1.3; color:#ffffff; background: #666; padding:4px 8px;}
#contentsArea .htlBox .chara li { background:#d5bb92; border:none; color:#ffffff;}
#contentsArea .resort_box li a:hover { opacity:0.8; text-decoration:none;}


/* ----- 下層ページ -----*/

.hotel_sub_tlt { color:#4ca9a8; font-size:15px; font-weight:bold; margin-bottom:8px;}
#contentsArea .htlBox .area { background:#76bfbe; font-size:13px; margin-bottom:8px;}
#contentsArea .htlBox { border-color:#76bfbe; }
#contentsArea .htlBox h4 { color:#76bfbe; padding:0 8px 8px 8px; font-size:14px;}
.htlBox3 .photo { width:94%; float:none; margin:8px auto;}
.htlBox3 .photo .thumPhotos li { float:left; width:32%;}
#contentsArea .htlBox { margin: auto auto 10px auto;}
#contentsArea .htlBox .plan li a { border:none; background:#fffcb3;}
.htlBox3 .plan li a .planName { color:#0a55bb; font-size:14px; font-weight:normal;}
.htlBox .plan li a .price { text-align:center;}
.htlBox .btn li { float:none; width:98%; margin:auto auto 10px auto;}
#contentsArea .htlBox .btn li a, #contentsArea .htlBox .btn li a:visited, #contentsArea .spotBox .btn li a, #contentsArea .spotBox .btn li a:visited { background:#f24c97;}
#contentsArea .htlBox .btn li a:hover { background:#4ca9a8; text-decoration:none;}

#contentsArea .htlBox_ov a .plan li {
    background-color: #fffbce;
    border: #feac6b 1px solid; border-radius:5px; padding:8px;
}

.htlBox_ov a .plan li .planName { color:#f0378b; font-size:14px; font-weight:normal;}
.htlBox_ov a:hover .plan li .planName { text-decoration:underline;}
.htlBox_ov a .plan li .price { text-align:center; font-size:82%;}
.htlBox_ov a .plan li .price span {
    color: #cc0000;
}
.htlBox_ov a .plan li .price span em  {
    font-size: 140%;
    font-style: normal;
    font-weight: bold;
}


.htlBox .rate .hide, .htlBox .rank .hide { display: inline;}

.htlBox .basic::before, .htlBox .rate a::before, .htlBox .rank a::before, .htlBox .plan li a::before{ display:none;}

.hotel_link { width:96%; text-align:center; border-radius:5px; margin:auto auto 15px auto;}
#contentsArea .hotel_link a { display:block; padding:8px 4px; background:#f24c97; position:relative; color:#ffffff; font-size:16px; border-radius:5px; }
#contentsArea .hotel_link a:hover { background:#4ca9a8; text-decoration:none; color:#ffffff;}


/* -----  -----*/

#search-box { border:2px solid #51a9a8;}
#search-box h1 { color:#51a9a8;}

.pagetop { display:none;}
.cp_left { display:none;}
.fixBnr3 {
    position: fixed;
	display:block;
    width:70px; text-align:center;
	right:0;
	bottom:0;
}
.fixBnr3 img { width:70px;}
.fixBnr3 a { margin-top:10px;}

ul.atn {
    padding: 0 5px 10px 0;
    background-color: white;
	font-size:82%;
}

#contentsArea .htlBox.ss .chara li{background: none; width: 23%; padding: 0;}
#contentsArea .htlBox.ss .chara li:last-child{margin-right: 0;}
#contentsArea .htlBox.ss .chara li img{width: 100%;}
#contentsArea .htlBox.ss .plan li a{background: #fff;}