@charset "utf-8";

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


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

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

#widewrapper { width:100%;}
#keyVisual { width:100%; margin-bottom:0; overflow:hidden; height:auto; margin-bottom:20px; overflow:hidden; max-height:640px;}
#keyVisual img { width:100%; display:block;}

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

#keyVisual ul.rslides li { width:100%; overflow:hidden;} 

#keyVisual a.prev { width:26px; height:45px; background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/arrow_pre.png) no-repeat left top; position:absolute; left:5%; top:48%; z-index:110;}
#keyVisual a.next { width:26px; height:45px; background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/arrow_next.png) no-repeat left top; position:absolute; right:5%; top:48%; z-index:120;}
#keyVisual a.prev:hover { opacity:0.8}
#keyVisual a.next:hover { opacity:0.8}

.sp { display:none;}

#contentsArea { background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/page_bg.gif) repeat; width:100%;}

#contents.column2R { width:1190px; margin:auto; background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/page_bg.gif) repeat; padding:0;}


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

.main_nav_hight { height:125px; padding:0px 0 0 0; }
.main_nav { width:100%; background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/page_bg.gif) repeat; margin:auto; }
.main_nav ul { width:858px; margin:auto;}
.main_nav ul li { width:140px; float:left; margin-left:3px;}
.main_nav ul li a { display:block;}
.main_nav ul li img { display:block; width:140px;}
#contentsArea .main_nav ul li a:hover { text-decoration:none;}
#contentsArea .main_nav ul li span { text-align:center; font-size:16px; color:#ffffff; padding:5px; background:#7cbfbf; display:block; font-weight:bold; transition-duration: 0.1s }
#contentsArea .main_nav ul li.top_nav_o span { background:#f0388b;}
#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:13px; line-height:1.5; margin-bottom:35px;}


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

.column2R #mainContents { float:left; margin-left:40px; width:880px;}

.top_page .page_h2 { font-size:35px; color:#4ca9a8; font-weight:bold; border-bottom:2px solid #4ca9a8; padding-bottom:8px; margin-bottom:5px;}
.page_h2 big { font-size:45px;}

/* ----- sub_nav -----*/
.sub_nav { border-left:1px solid #4ca9a8; margin-bottom:35px;}
.sub_nav li { padding:8px 30px 8px 25px; float:left; border-right:1px solid #4ca9a8;}
#contentsArea .sub_nav li a { display:block; color:#4ca9a8; font-size:19px; position:relative; transition:0.2s}
#contentsArea .sub_nav li a:before {  
            content: '';  
            display: block;  
            width: 6px;  
            height: 6px;  
            border-right: 1px solid #4ca9a8;  
            border-top: 1px solid #4ca9a8;  
            -webkit-transform: rotate(135deg); 
            transform: rotate(135deg); position:absolute; right:-22px; top:32%;   } 
#contentsArea .sub_nav li a:hover { color:#f1388c; text-decoration:none;}
#contentsArea .sub_nav li a:hover:before {  
            content: '';  
            display: block;  
            width: 6px;  
            height: 6px;  
            border-right: 1px solid #f1388c;  
            border-top: 1px solid #f1388c;  
            -webkit-transform: rotate(135deg); 
            transform: rotate(135deg); position:absolute; right:-22px; top:32%;   } 
			
.page_h3 { font-size:25px; color:#4ca9a8; font-weight:bold; border-bottom:1px solid #4ca9a8; border-left:3px solid #4ca9a8; padding-left:12px; padding-bottom:10px; margin-bottom:25px;}
.page_h3 big { font-size:32px;}
.page_h3 small { font-size:21px;}

.top_page_map { width:766px; margin:auto auto 25px auto;}
.top_page_map img { width:766px;}

.line_hight1 { margin-bottom:25px;}



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

.season_table { margin-bottom:30px;}
.season_color { font-size:14px; text-align:right; margin-right:15px;}
.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 { background:#f3f3f3; font-size:14px; width:116px; text-align:center;  }
.area_name { font-size:14px; text-align:left; width:94px; padding:1px 15px;}
.season_month { width:53px; background:#e9e9e9;}

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

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

.height20 { height:20px;}
.height12 { height:12px;}

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

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

.price_table { margin-bottom:30px;}


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

.top_page_hotel { margin-bottom:25px;}
.top_hotel { width:200px; float:left; margin-right:20px; margin-bottom:20px;}
.top_hotel h4 { color:#5dafae; text-align:center; margin-bottom:7px; border-bottom:1px solid #5dafae; padding-bottom:5px; font-size:16px;}
.hotel_photo { width:100%;}
.hotel_photo img { width:100%; display:block;}
.hotel_exp { font-size:12px; line-height:1.4; padding:4px 10px; background:#ffffff;}
#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 28px 0 6px; line-height:1.4; }
#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;}
#contentsArea .top_hotel_box a:before { width:17px; height:17px; background:#ffffff; content:""; position:absolute; bottom:24px; right:6px; border-radius:17px; }
#contentsArea .top_hotel_box a.clearfix:after { border-left:7px solid #5dafae; border-top:6px transparent solid; border-bottom:6px transparent solid; position:absolute; bottom:26px; right:10px; content:""; visibility:visible !important ;}
#contentsArea .top_hotel_box a:hover:after { content:""; border-left:7px solid #f0378b; border-top:6px transparent solid; border-bottom:6px transparent solid; position:absolute; bottom:26px; right:10px;}


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

.resort_box { margin-bottom:35px;}
.resort_box li { float:left; width:210px; margin-right:10px; }
.resort_box li img { width:100%; display:block;}
.resort_box li p { font-size:13px; line-height:1.4; color:#ffffff; background: #666; padding:4px 8px;}
#contentsArea .resort_box li a:hover { opacity:0.8; text-decoration:none;}

.hotel_sub_tlt { color:#4ca9a8; font-size:20px; font-weight:bold; margin-bottom:20px;}



/* ----- navi_right -----*/

.navi_right { width:154px; float:right; }
.side_nav { width:154px; z-index:1000;}
.side_nav li { margin-bottom:12px;}
#contentsArea .side_nav a { display:block; color:#ffffff; background:#4ca9a8; padding-bottom:20px; text-align:center; position:relative; transition-duration:0.2s;}
#contentsArea .side_nav a span { background:#76bfbe; display:block; padding:12px 0; line-height:1.5; font-size:16px; font-weight:bold; transition-duration:0.2s;}
#contentsArea .side_nav a:before { border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #ffffff; position:absolute; content:""; left:47%; bottom:6px; }
#contentsArea .side_nav a:hover { color:#ffffff; text-decoration:none; background:#f0378b; } 
#contentsArea .side_nav a:hover span { background:#ed599c;}

.main_nav.alwaysFix.navi { position: fixed; background:#fff;padding: 0 0 10px 0; z-index:999; background:url(https://img.travel.rakuten.co.jp/kaigai/special/southeast-asia/resort/1708/images/page_bg.gif) repeat;}
.side_nav.alwaysFix{ position:fixed; right:50%; margin-right:-675px;  top:0; z-index:1000;}



/* ----- search-box -----*/

.column2R #search-box { width:230px; border:none;}
#search-box-body { border:3px solid #5bbdbc;}
#search-box h1 { text-align:center; color:#ffffff; background:#5dc1c1; border-radius:5px 5px 0 0; margin:0; padding:10px 0; font-size:18px; }



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

#keyVisual h1.page_logo .top_img_area { font-size:40px; padding:0 10px;} 

.column2R .hotels { width:100%; margin-bottom:10px;}
#contentsArea .htlBox .area { background:#76bfbe; font-size:13px;}
#contentsArea .htlBox { border-color:#76bfbe; width:272px; margin-right:18px; margin-bottom:20px;}
#contentsArea .htlBox h4 { color:#76bfbe; padding:0 10px 10px 10px; font-size:15px;}
#contentsArea .htlBox .chara li { background:#d5bb92; border:none; color:#ffffff; float:right;}
#contentsArea .htlBox a:hover { text-decoration:none; opacity:0.8;}
.htlBox .photo .thumPhotos li { width:32.3%;}
#contentsArea .htlBox a .plan li  { border:none; background:#fffcb3;}
.htlBox3 .plan li a .planName { color:#f0378b; font-size:14px; font-weight:normal;}
.htlBox3 .plan li a:hover .planName { text-decoration:underline;}
.htlBox .plan li a .price { text-align:center;}
#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 em, .htlBox .rank em { padding-top:16px; }

.hotel_link { width:530px; text-align:center; border-radius:5px; margin:auto auto 30px auto;}
#contentsArea .hotel_link a { display:block; padding:20px 0; background:#f24c97; position:relative; color:#ffffff; font-size:23px; border-radius:5px;}
#contentsArea .hotel_link a:hover { background:#4ca9a8; text-decoration:none; color:#ffffff;}

#contentsArea .hotel_link a:before { width:17px; height:17px; background:#ffffff; content:""; position:absolute; bottom:24px; right:8px; border-radius:17px; }
#contentsArea .hotel_link a:after { border-left:7px solid #f24c97; border-top:6px transparent solid; border-bottom:6px transparent solid; position:absolute; bottom:26px; right:12px; content:""; }
#contentsArea .hotel_link a:hover:after { content:""; border-left:7px solid #4ca9a8; border-top:6px transparent solid; border-bottom:6px transparent solid; position:absolute; bottom:26px; right:12px;}


.cp_right {
	display:none;
}

.fixBnr {
    position: fixed;
	display:block;
    right: 30px; bottom:30px;
}

.cp_left {
	display:none;
}

.fixBnr2 {
    position: fixed;
	display:block;
    width:230px; text-align:center;
	left:50%;
	top:130px;
	margin-left:-595px;
}


.cp_right:hover, .cp_left:hover { opacity:0.8;}

.gosearch {
    background-color: #5dc1c1;
}

.arr-up-white a img { display:block;}
#contentsArea .gosearch a { color:#ffffff; padding-bottom:10px; display:block;}
#contentsArea .gosearch a:hover { color:#ffffff; text-decoration:none;} 

.navi_right { display:none;}
.cp_right2 { display:none;}

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

#contentsArea .htlBox.ss .chara li{background: none;float: left; padding: 0; width: 23.5%;}
#contentsArea .htlBox.ss .chara li img{width: 100%;}
#contentsArea .htlBox.ss .chara li:last-child{margin-right: 0;}
#contentsArea .htlBox.ss .plan li a{border-color: #fff;background-color: #fff; }
.htlBox.ss .plan li a .price small{text-align: left;}