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


/* -- Reset -- */
#contentsArea {background:#fff;}
#contentsArea .hotels a:visited:hover,#contentsArea .hotels a:link:hover,#contentsArea .hotels a:visited:active,#contentsArea .hotels a:link:active{text-decoration:none;}
#contentsArea #contents{margin:20px 0 0;padding:0;background:none;color:#333;}
#mainContents{ overflow:hidden;}
#contentsArea .pc,.grpLocationTABI,.gotop{display:none;}
*[class*="btn"]{text-align:center; line-height:0;}
*[class*="btn"] a:hover,*[class*="btn"] a:active{opacity:0.7;filter:alpha(opacity=70); text-decoration:none !important;}
a img{width:100%;}

.gotop{ display:none !important;}

/* -- contentsArea -- */
.grp,.photo{ text-align:center; line-height:0;}
.grp img,.photo img{ width:100%;}
.bnr01{clear:both;overflow:hidden;text-align:center;margin:15px 10px 10px;}
.bnr01 img{padding-bottom:8px;}
.btn{ margin:30px auto 10px;overflow:hidden; clear:both;}
.btn1{margin:20px 10px;overflow:hidden; clear:both;}



/* -- Top -- */
#keyVisual{ margin:0; line-height:0;}
#keyVisual h1 img{ width:100%;}

nav{ clear:both; overflow:hidden; margin-top:20px;}
nav ul{ overflow:hidden; clear:both;}
nav ul li{ float:left; text-align:center; width:50%; }
nav ul li img{ max-width:175px;}
nav ul li a{ display:block; font-size:18px;}
@media (min-width:350px){
	nav ul li{ width:25%; }
	}

/* -- Contents -- */
.widebox{ width:100%; clear:both; overflow:hidden;}
.sbox{  clear:both; overflow:hidden;}
.tpr{ margin:0 0 20px; font-size:14px; line-height:1.5; text-align:center;}
.tpr small{ font-size:12px;}
.tpr b{ color:#00a0e9; font-size:16px;}
.atn{margin:0 0 40px; font-size:12px; line-height:1.5; /*text-shadow:1px 1px #000;*/ color:#fff;}
.ttl{ background:#000; color:#fff; font-size:20px; text-align:center; padding:8px 0;}
.ttl2{ text-align:center; line-height:0;}
.ttl2 img{ width:100%;}

#PART1 .service{ overflow:hidden; margin:20px 8px 0;}
#PART1 .service li{ width:33.33%; float:left; padding:0 5px 20px; font-size:12px; text-align:center; line-height:1.5; box-sizing:border-box;}
#PART1 .service li img{ width:100%; max-width:170px;}
#PART1 .service li:nth-child(3n){ margin-right:0;}
#PART1 .service li span{ display:block; padding:5px 0 0;}
#PART1 .tokuten{ background:#FFFAE8; clear:both; overflow:hidden; margin:10px 0 0; padding:0 8px;}
#PART1 .tokuten .ttl2{ margin-top:20px;}
#PART1 .tokuten .tpr{margin:20px auto 0; text-align:left;}
#PART1 .tokuten .photo{margin:20px auto 0;}
#PART1 .tokuten .photo img{ width:100%;}
#PART1 .tokuten .shop{margin:20px auto; overflow:hidden; padding:15px; box-sizing:border-box; background:#fff;}
#PART1 .tokuten .shop dt{ padding-bottom:20px;}
#PART1 .tokuten .shop dd{ text-align:center;}
#PART1 .tokuten .shop dd img{ width:100%;}

#PART2 .sbox{ margin:0 8px;}
#PART2 .tpr{ margin:20px 0 0;text-align:left;}
#PART2 .mapbox{ margin-top:20px;}
#PART2 .mapbox .map2{ margin:10px 0 0 0;}
#PART2 .mapbox .map2 iframe{ width:100%; height:250px;}
#PART2 .mapbox .map3{  margin:10px 0 0 0;}
#PART2 .mapbox .wn{ clear:both; overflow:hidden; line-height:1; font-size:13px; padding-top:5px; display:block; text-align:left;}
#PART2 .rsp{ border:10px solid #000; margin-top:30px; padding:20px;}
#PART2 .rsp dt{ text-align:center; font-size:20px; font-weight:bold; background:#fff; margin:-40px auto 0; }
#PART2 .rsp dd{ margin-top:10px; font-size:14px; line-height:1.5;}
#PART2 .rsp dd b{ display:block; font-size:16px; margin-bottom:10px;}
#PART2 .rsp .photo{ line-height:0;}
#PART2 .rsp .photo img{ width:100%;}

#PART2 .viber{ clear:both; overflow:hidden; margin:30px 0 0; background:#DDF5FF; padding:10px;}
#PART2 .viber .tpr{ margin:0 0 20px;}
#PART2 .viber .photo{ margin:0 auto;}
#PART2 .viber .photo a:hover{ opacity:.7;}

#PART3{ margin-top:30px;}
#PART3 .sptbox{margin:10px 8px 0;}
#PART3 .sptbox .spt3{ border:1px solid #000; padding:1px; box-sizing:border-box; padding-bottom:20px; margin:0 0 20px; overflow:hidden;}
#PART3 .sptbox .spt3 .area{ padding:5px 8px; color:#fff; background:#4ACC00; font-size:15px;}
#PART3 .sptbox .spt3 h3{ padding:5px; font-size:15px; height:auto !important;}
#PART3 .sptbox .spt3 .photo{ margin:0 8px 8px;}
#PART3 .sptbox .spt3 .explain{ font-size:13px; margin:0 8px 8px; height:auto !important; text-align: left;}
#PART3 .sptbox .spt3 .icon{ float:right; display:table; border-radius:5px; padding:5px; margin:0 8px; font-size:12px; color:#fff; background:#B20000;}
#PART3 .viber dl {padding: 10px; box-sizing: border-box; font-size:12px;  text-align:left;}

#contentsArea .hotels{ margin:10px 8px 0; color:#000;}
#contentsArea .htlBox{ border:1px solid #000; padding:1px; box-sizing:border-box; margin:0 0 20px; overflow:hidden; border-radius:0;}
#contentsArea .htlBox .area{ padding:5px 8px; background:#000; color:#fff; font-size:14px;}
#contentsArea .htlBox h3{ font-size:15px;margin:8px; height:auto !important;}
#contentsArea .htlBox .explain{ font-size:13px; line-height:1.2; margin:0 8px 8px; height:auto !important; clear:both; overflow:hidden; width:auto; float:none;}
#contentsArea .htlBox .photo{margin:0 10px; padding:0; line-height:0; float:none; width:auto;}
#contentsArea .htlBox .photo li:hover{ opacity:.7; cursor:pointer;}
#contentsArea .htlBox .rank{  border-radius:5px; border:1px solid #999; padding:5px 15px; display:table; margin:10px auto; position:inherit;}
#contentsArea .htlBox .rank span{ vertical-align: 2px;}
#contentsArea .htlBox .plan li a{ padding:0; border-radius:0;border:none; background:#F1FBEB; height:auto !important;}
#contentsArea .htlBox .plan li a .pttl{ background:#4ACC00; color:#fff; text-align:center; padding:5px 0; font-size:14px;}
#contentsArea .htlBox .plan li a .chara{ overflow:hidden;}
#contentsArea .htlBox .plan li a .chara li{ background:none; color:#000; border:1px solid #000; margin:3px 0 0 3px; padding:3px; font-size:12px;}
#contentsArea .htlBox .plan li a .planName{ text-decoration:underline; font-size:14px; margin:5px; height:auto !important;}
#contentsArea .htlBox .plan li a .price{ text-align:center; font-size:12px; padding:0 0 10px; font-weight:normal;}
#contentsArea .htlBox .plan li a .price span{ color:#e92a25; padding-left:10px;}
#contentsArea .htlBox .plan li a .price .foreign{ display:block;}
#contentsArea .htlBox .btn{ margin:0;}
#contentsArea .htlBox .btn a{ display:block; padding:12px 0; margin:0 10px 10px; border-radius:50px; background:#000; font-size:18px; font-weight:bold;line-height:1;color:#fff !important;}
#contentsArea .htlBox .btn a:hover{ text-decoration:none !important;}

#PART5 .hbnr{  margin:20px auto 0; overflow:hidden;}
#PART5 .hbnr li{ font-size:13px; text-align:center; margin:0 15px 20px;}
#PART5 .hbnr li img{ padding-bottom:5px; max-width:220px; display:block; margin:0 auto;}
#PART5 .hbtn{ margin:0 8px; overflow:hidden;}
#PART5 .hbtn li{ margin:0 0 10px;}
#PART5 .hbtn li img{ width:100%;}
#PART5 a:hover{ opacity:.7;}

#PART6{ margin-top:30px;}
#PART6 .ttl{ background:none; color:#000; margin:30px 0 0;}
#PART6 .ttl span{ color:#BF0000;}
#PART6 .photo img{ width:100%; padding-right:5px;}
#PART6 .graybox{ border:10px solid #D5D5D5; box-sizing:border-box; padding:10px; margin-top:10px;}
#PART6 .graybox .ttl2{ padding-bottom:20px; border-bottom:1px solid #D5D5D5;}
#PART6 .graybox ul{ overflow:hidden;margin:20px 8px 0;}
#PART6 .graybox ul li{ width:33.33%; float:left; padding:0 5px 20px; font-size:12px; text-align:center; line-height:1.5; box-sizing:border-box;}
#PART6 .graybox ul li img{ width:100%; max-width:170px;}
#PART6 .graybox ul li:nth-child(3n){ margin-right:0;}
#PART6 .graybox ul li small{ display:block; font-size:12px;}
#PART6 .graybox ul li img{ padding-bottom:3px;}
#PART6 .graybox .wn{ font-size:12px; margin:20px 0 0 10px; clear:both;}
#PART6 .graybox dl{ background:url(https://img.travel.rakuten.co.jp/kaigai/special/hawaii/desk/images/img5_3.gif) 7px 13px no-repeat #e5f8fd; background-size:20px; padding:10px 10px 0 30px; box-sizing:border-box; margin:20px 0 0;}
#PART6 .graybox dl dt{ font-size:20px; font-weight:bold; padding-bottom:10px;}
#PART6 .graybox dl dd{ font-size:14px; line-height:1.5; padding-bottom:30px;}
#PART6 .graybox dl dd a{ color:#0dbbe8 !important; text-decoration:underline !important;}
#PART6 .graybox dl dd a:hover{ text-decoration:none !important;}

/* -- search -- */
#contentsArea #search-box{ box-sizing:border-box; margin:20px 0; border:none; border-radius:0;}
#contentsArea #search-box h1{ margin:0;font-size: 20px; color:#fff;}
#search-box h1.open::after{border:1px solid #fff !important;}
#search-box h1.close::after{border:1px solid #fff !important;}
#search-box-body{ margin:0; border-radius:0;}


#BNR ul{ overflow:hidden; clear:both; padding:5px;}
#BNR ul li{ margin:0 0 5px; text-align:center;}
#BNR ul li img{ max-width:300px;}


/*0901天本追加*/
.atn {
    color: #000;
    font-size: 12px;
    line-height: 1.5;
    margin: 10px;
}
/*add*/

#PART0 .sbox{ clear:both; overflow:hidden; margin:0 8px;}
#PART0 	.tpr{ text-align:left; margin:0 0 10px; font-size:14px; line-height:1.5;}
#PART0 small{ font-size:12px; line-height:1.5;}
#PART0 b{text-align: center; display: block;}

#PART5 .lounge { overflow: hidden; margin: 20px auto;}
#PART5 .lounge dt{width:100%; text-align: center; font-size: 14px; padding:0 0 20px;}
#PART5 .lounge dd{width:100%; font-size: 12px; padding:0 0 20px;}
#PART5 .lounge dd ul {  display: flex; justify-content: center;}
#PART5 .lounge dd ul li { margin: 0 10px;}
#PART5 .lounge dd ul li img { width: 100%;}
#PART5 .lounge dd .loungeinfo p { overflow: hidden; margin-top: 20px; padding: 20px 20px 0; border-top: 1px solid #666;}
#PART5 .lounge dd .loungeinfo p span { display:block; width: 30%; float: left; font-weight: bold;}
#PART5 .lounge dd .loungeinfo p span.info { width: 60%; font-weight:normal;}