/************************************************************
 *   ウォータースライダー人気ランキングCSS
 ************************************************************/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	overflow: hidden; /*デザイン時のみ使用 */
	display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
li {
	list-style-type: none;
}
h1, h2, h3, h4, h5 {
	font-size: 100%;
}
/*
#container {
	width: 960px;
	margin: 0px auto;
}
*/
#main {
	color: #000000;
	width: 960px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#main img {
	vertical-align: bottom;
}
#main_head_grp {
	width: 960px;
	height: 450px;
	background-image: url(../../image/water_slider/main_bg.jpg);
	background-repeat: no-repeat;
	padding-top: 20px;
}
#main_head_grp h2 {
	padding: 0px;
	margin: 0px;
	text-align: center;
}
#main_head_grp .catch {
	font-size: 1.3em;
	line-height: 1.35em;
	font-weight: bold;
	width: 560px;
	letter-spacing: 0.01em;
	margin: 0 0 0 140px;
}
#main_content {
	width: 960px;
	margin: 0px auto;
	background-color: #FFF;
	font-size: 12px;
	line-height: 1.35em;
}
#main_content h3 {
	height: 126px;
	padding-left: 5px;
	background-image: none;
	position: absolute;
	z-index: 90;
	width: 859px;
}
#main_content h3 a {
	position: absolute;
	right: 10px;
	top: 45px;
	z-index: 100;
}
#main_content h3 a:hover img {
	-ms-filter: "alpha( opacity=70 )";
	filter: alpha( opacity=70 );
	opacity: 0.7;
}
#main_content #water {
	width: 900px;
	background-image: url(../../image/water_slider/middle_bg.png);
	background-repeat: repeat;
	padding: 0 30px 50px;
}
#main_content #water .box {
	overflow: hidden;
	width: 889px;
/*	height: 543px;*/
	position: relative;
	margin: 0 auto;
	clear: both;
    border-radius: 15px;
    border: 5px solid ;
}
#main_content #water .box .box_left {
	padding-top: 135px;
	padding-left: 30px;
	float: left;
	width: 368px;
}
#main_content #water .box .box_left p {
	padding-top: 10px;
	width: 260px;
}
#main_content #water .box .box_right {
	float: right;
	padding-top: 130px;
	width: 336px;
}
#main_content #water .box .box_right p {
	font-size: 13.5px;
	line-height: 120%;
	font-weight: bold;
	width: 315px;
}
#main_content #water #back_01{
border-color:#99e5ff;
background-color: #d4f3ff;
}
#main_content #water #back_01 .center_photo {
	position: absolute;
	left: 280px;
	top: 130px;
	z-index: 100;
}
#main_content #water #back_02 {
border-color:#ffb9e9;
background-color: #ffeaf8;
}
#main_content #water #back_02 .center_photo {
	position: absolute;
	left: 280px;
	top: 130px;
	z-index: 100;
}
#main_content #water #back_03 {
border-color:#ffc399;
background-color: #ffe9d9;
}
#main_content #water #back_03 .center_photo {
	position: absolute;
	left: 280px;
	top: 130px;
	z-index: 100;
}
#main_content #water #back_04 {
border-color:#b9eb99;
background-color: #e5f7d9;
}
#main_content #water #back_04 .center_photo {
	position: absolute;
	left: 280px;
	top: 130px;
	z-index: 100;
}
#main_content #water #back_05 {
border-color:#cdc1f9;
background-color: #ece8fd;
}
#main_content #water #back_05 .center_photo {
	position: absolute;
	left: 280px;
	top: 130px;
	z-index: 100;
}
#main_content #water .box .btn_list {
	overflow: hidden;
	clear: both;
	float: right;
	margin: 10px 20px 0 0;
}
#main_content #water .box .btn_list li {
	display: inline-block;
	margin-right: 4px;
}
#main_content #water .box .btn_list li a:hover img, .page_top a:hover img {
	-ms-filter: "alpha( opacity=70 )";
	filter: alpha( opacity=70 );
	opacity: 0.7;
}
.page_top a {
	text-align: right;
	float: right;
	margin-bottom: 10px;
}
/*--------------------------------------------------*
 *   160128追加
 *--------------------------------------------------*/
#main_head_grp_2 {
	width: 960px;
	height: 411px;
	background-image: url(../../image/water_slider/main_bg2.jpg);
	background-repeat: no-repeat;
	padding-top: 60px;
}
#main_head_grp_2 h2 {
	padding: 0px;
	margin: 0px;
	text-align: center;
}
#main_head_grp_2 .catch {
	font-size: 1.3em;
	line-height: 1.35em;
	font-weight: bold;
	width: 560px;
	letter-spacing: 0.01em;
	margin: 0 0 0 140px;
}
#main_content #water #back_06 {
	background: url(../../image/water_slider/middle_bg_06.png) no-repeat center;
}
#main_content #water #back_06 .center_photo {
	position: absolute;
	left: 280px;
	top: 100px;
	z-index: 100;
}
/*--------------------------------------------------*
 *   ページトップへ
 *--------------------------------------------------*/
p.bt_pagetop {
	width: 180px;
	height: 40px;
	padding: 10px 0px;
	float: right;
}
p.bt_pagetop a {
	width: 180px;
	height: 40px;
	display: block;
	background: url(../../image/padma_family/bt_pagetop.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
p.bt_pagetop a:hover {
	background-position: left bottom;
}
p.bt_pagetop a span {
	position: absolute;
	left: -7650px;
}
/*2017/08/03追加*/

#panlist_bali {
	font-weight: normal;
	margin-left: 5px;
}
/*メダルアイコン追加*/
.medal_icon {
	position: absolute;
top: 41px;
right: 279px;
}
/*3位グランド ハイアット バリ　ヌサドゥア地区*/
.medal_icon_2 {
	position: absolute;
top: 41px;
	right: 288px;
}
/*5位リンバ ジンバラン バリ byアヤナ　ジンバラン地区*/
.medal_icon_3 {
	position: absolute;
top: 41px;
	right: 296px;
}
/*20221124*/
.kutikomi_meyasu_box .price,.kutikomi_meyasu_box .kuchikomi{
z-index: 91;  
}
.kutikomi_meyasu_box{
    position: relative;
}
.kutikomi_meyasu_box::before{
    content: "";
    position: absolute;
    background-color: #fff;
width: 794px;
top: 80px;
left: 70px;
    height: 47px;
}

.kutikomi_meyasu_box .price{
position: absolute;
top: 100px;
left:190px;
font-size: 23px;
font-weight: bold;
}
.kutikomi_meyasu_box .kuchikomi{
  position: absolute;
left:490px;
  top: 100px;
    font-size: 15px;
font-weight: bold;
}
.overflow{
overflow: hidden;
}
.kutikomi_meyasu_box .price .tour,.kutikomi_meyasu_box .kuchikomi .kuchikomi-text{
font-size: 14px;
background-color: #0ac0ff;
color: #fff;
border-radius: 5px;
padding: 2px 5px;
    vertical-align: middle;
margin-right: 5px;
}

#back_02 .price .tour,#back_02 .kutikomi_meyasu_box .kuchikomi .kuchikomi-text{
background-color: #ff57cb;  
}
#back_03 .price .tour,#back_03 .kutikomi_meyasu_box .kuchikomi .kuchikomi-text{
background-color:#ff781a;  
}
#back_04 .price .tour,#back_04 .kutikomi_meyasu_box .kuchikomi .kuchikomi-text{
background-color: #65d21e;  
}
#back_05 .price .tour,#back_05 .kutikomi_meyasu_box .kuchikomi .kuchikomi-text{
background-color: #8367f0;  
}
.kutikomi_meyasu_box .kuchikomi .star-area img {
  margin-right: 2px;
}
#water .course_box{
display: block;
background-color: #fff;
width: 820px;
margin: 20px auto;
}
#water .course_box .course_box_ttl{
background-color: #0040cf;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 20px;
padding: 10px;
    	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
#water .course_box ul{
    display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
#water .course_box ul li {
width: 23%;
    text-align: center;
}
#water .course_box ul li a{
    text-decoration: none;
}
#water .course_box ul li a .area{
font-size: 16px;
padding: 5px;
    font-weight: bold;
}
#water .course_box ul li a .price{
    font-size: 20px;
font-weight: bold;
color: #f03;
padding: 10px;
}
#water .course_box ul li:nth-child(1){
    border: solid #e63232
}
#water .course_box ul li:nth-child(1) .area{
    background: #e63232;
    color: #FFF;
}
#water .course_box ul li:nth-child(2){
    border: solid #1aa6a6;
}
#water .course_box ul li:nth-child(2) .area{
    background: #1aa6a6;
    color: #FFF;
}
#water .course_box ul li:nth-child(3){
    border: solid #f3802d;
}
#water .course_box ul li:nth-child(3) .area{
    background: #f3802d;
    color: #FFF;
}
#water .course_box ul li:nth-child(4){
    border: solid #00b4ff;
    margin-right: 0;
}
#water .course_box ul li:nth-child(4) .area{
    background: #00b4ff;
    color: #FFF;
}

.family_box{
    display: block;
background-color: #fff;
width: 820px;
margin: 20px auto;
}

.family_box .family_box_ttl{
    background-color: #0040cf;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 20px;
padding: 10px;
font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.family_box ul{
display: flex;
justify-content: center;
  padding: 10px;
}
#water .course_box ul li a:hover,#water .family_box ul li a:hover{opacity: 0.8;}
/*240618*/
.kutikomi_meyasu_box .hotel_rank{
background-color: #a48700;
color: #fff;
border-radius: 5px;
padding: 4px 5px;
margin-right: 5px;
position: absolute;
top: 99px;
left: 100px;
font-size: 14px;
font-weight: bold;
}
.kutikomi_meyasu_box .hotel_rank.low{
background: #213264;
}


/* PCレイアウト */
@media (min-width: 640px) {
/*--------------------------------------------------*
 *   PCでは無効/表示されない
 *--------------------------------------------------*/
.pc_none {
	display: none !important;
}
#back_04 .kutikomi_meyasu_box .price{
left: 215px;
}
#back_04 .kutikomi_meyasu_box .kuchikomi{
left: 505px;
}




}

/* スマホレイアウト */
@media (max-width: 639px) {
/*--------------------------------------------------*
 *   SPでは無効/表示されない
 *--------------------------------------------------*/
.sp_none {
	display: none !important;
}
ol#panlist_bali {
	margin: 0;
	background: #a00105;
	color: #fff;
	overflow: hidden;
	padding: 7px;
	list-style: none;
	font-size: 12px;
}
#panlist_bali li a {
	color: #ffcc00;
}
body {
	-webkit-text-size-adjust: 100%;
/*	padding: 0px;*/
}
.bottom img {
	width: 100%;
}
.img_bottom img {
	width: 100%;
}
#container {
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-image: none;
}
#main {
	width: 100%;
	float: none;
	font-size: 14px;
	line-height: 1.6;
	padding-bottom: 0px;
	overflow: visible;
	background-color: #FFF;
}
#main * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#main img {
	border: 0px;
	vertical-align: top;
	max-width: 100%;
	height: auto;
	width /***/: auto;
}
#main h3 {
	background: none !important;
	height: auto !important;
	margin-top: 0px !important;
}
#main_head_grp, #main_content, #main_content #water, #main_content #water .box {
	width: 100%;
}
#main_content #water {
	padding-top: 15px;
}
#main_head_grp {
	background-image: url(none);
	background-color: #feec02;
	height: auto;
}
#main_head_grp h2 {
	padding-left: 15px;
	padding-right: 15px;
}
#main_head_grp .catch {
	width: 100%;
	margin-left: 0;
	padding: 15px;
	font-size: 13px;
	font-weight: normal;
}
#main_content #water {
	background-image: url(none);
	padding-left: 15px;
	padding-right: 15px;
}
#main_content #water .box, #main_content #water #back_02, #main_content #water #back_03, #main_content #water #back_04 {
	height: auto;
}
#main_content h3 {
	width: 100%;
	padding-left: 0;
	text-align: center;
}
#main_content #water #back_01 {
	background-image: url(none);
	background-color: #d4f3ff;
	border: 3px solid #99e5ff;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}
#main_content #water #back_02 {
	background-image: url(none);
	background-color: #ffeaf8;
	border: 3px solid #ffb9e9;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}
#main_content #water #back_03 {
	background-image: url(none);
	background-color: #ffe9d9;
	border: 3px solid #ffc399;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}
#main_content #water #back_04 {
	background-image: url(none);
	background-color: #e7f8db;
	border: 3px solid #b9eb99;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}
#main_content #water #back_05 {
	background-image: url(none);
	background-color: #f1eefe;
	border: 3px solid #cdc1f9;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}
#main_content #water #back_01 .center_photo, #main_content #water #back_02 .center_photo, #main_content #water #back_03 .center_photo, #main_content #water #back_04 .center_photo, #main_content #water #back_05 .center_photo {
	position: static;
	text-align: center;
}
#main_content #water .box .box_left p {
	width: 100%;
	padding: 20px 10px;
	box-sizing: border-box;
}
#main_content #water .box .box_left {
	float: none;
	padding-left: 0;
	width: 100%;
}
#main_content #water .box .box_right {
	float: none;
	padding-top: 0;
	width: 100%;
	text-align: center;
}
#main_content #water .box .box_right p {
	width: 100%;
	padding: 20px 10px;
	box-sizing: border-box;
}
#main_content #water .box .btn_list {
	float: none;
	margin: 0 auto;
	text-align: center;
}
#main_content #water .box .btn_list li {
	margin-right: 0;
	margin-bottom: 20px;
}
/*メダルアイコン追加*/
.medal_icon, .medal_icon_2, .medal_icon_3 {
	position: absolute;
top: 3.8vw;
	right: 0;
width: 19% !important;
}
    .bst5{
text-align: center;
background-color: #e51d37;
color: #fff;
font-size: 5vw;
width: 50%;
margin: 10px auto 0;
padding: 3px;
border-radius: 5px;
font-weight: bold;
    }    
    
    .family_box,#water .course_box{
width: auto;   
    }
    .kutikomi_meyasu_box .price {
        margin: auto;
        right: 0;
        left: 0;
        top: 50px;
        text-align: center;
    }
    .kutikomi_meyasu_box .price .tour, .kutikomi_meyasu_box .kuchikomi .kuchikomi-text{
font-size: 3.3vw;   
    }
    
    .kutikomi_meyasu_box .kuchikomi{
        left: 0;
        right: 0;
text-align: right;
        top: 80px;
    }
    .kutikomi_meyasu_box::before{
width: 100vw;
top: 20px;
left: -30px;
height: 90px;
    }
    #main_content h3 a{
right: 0;
left: 0;
top: 118px;   
    }
    #main_content #water .box .box_left{
padding-top: 160px;
    }
    #water .course_box,.family_box{
        margin: 0;
    }
    #water .course_box .course_box_ttl,
    .family_box .family_box_ttl {
        font-size: 4.5vw;
        line-height: 1.3;
    }
    #water .course_box .course_box_ttl{
font-size: 4vw;
padding: 10px 0; 
        letter-spacing: -0.05em;
    }
    
    
#water .course_box ul ,.family_box ul{
    display: block;}
    
    #water .course_box ul li{
width: 100%;
margin-bottom: 8px;
    }
    /*240618*/
.kutikomi_meyasu_box .hotel_rank{
font-size: 3.3vw;
position: absolute;
  top: 80px;
  left: 5px;
  padding: 2px 5px;
}
    
    
}
@media (max-width: 320px) {
  #main_content #water .box .box_left {
    padding-top: 200px;
  }
  #main_content h3 a{
top: 154px;
  }
    .kutikomi_meyasu_box::before {
    height: 120px;
    }
  
  .kutikomi_meyasu_box .kuchikomi{
  text-align: center;
  }
  .kutikomi_meyasu_box .hotel_rank{
  right: 0;
    left: 0;
    margin: auto;
    display: inline-block;
    width: 150px;
    top: 110px;
    text-align: center;
  }
  
}