@charset "utf-8";

/* =============================================================================
    page
============================================================================= */

/*  検索CSS打ち消し
============================================================================= */
dt{
	font-weight: normal;
}

/*  mv
============================================================================= */
@media screen and (min-width: 1280px){
	.mv-wrapper{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100%;
		height: 350px;
		background: url("/ovs_htl/assets/images/mainvis.jpg") no-repeat 0 0;
		background-size: cover;
	}
	.mv-wrapper-inner{
		width: 100%;
		max-width: 1266px;
		padding: 0 15px;
	}
	.top-search-box{
		background-color: rgba(255, 255, 255, 0.9);
	}
	.filter-hotel-search-bar-block .filter-search-bar-block .filter-search-bar{
		background: none;
	}
	
}
@media screen and (max-width: 1279px){
	.mv-wrapper-inner{
		margin: 0 15px;
	}
	.filter-hotel-search-bar-block .filter-search-bar-block{
		margin: 0;
	}
}

/*  人気都市から海外ホテルを探す
============================================================================= */
.popularcities-list{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 18px 0 0 -12px;
}
.popularcities-list li{
	display: none;
	margin: 12px 0 0 12px;
	width: calc(100% / 4 - 12px);
}
.popularcities-list li.js-defblock{
	display: block;
}
.popularcities-list li a{
	position: relative;
	overflow: hidden;
	display: block;
	padding-top: calc(300 / 300 * 100%);
	height: 0;
	text-align: center;
	
	background-repeat: no-repeat;
	background-position: center;
}
.popularcities-list li a:before{
	position: absolute;
	top: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.popularcities-list li.popularcities-sel a:before{ background: url(/ovs_htl/assets/images/popularcities/sel.jpg); background-size: cover; }
.popularcities-list li.popularcities-tpe a:before{ background: url(/ovs_htl/assets/images/popularcities/tpe.jpg); background-size: cover; }
.popularcities-list li.popularcities-bkk a:before{ background: url(/ovs_htl/assets/images/popularcities/bkk.jpg); background-size: cover; }
.popularcities-list li.popularcities-hnl a:before{ background: url(/ovs_htl/assets/images/popularcities/hnl.jpg); background-size: cover; }
.popularcities-list li.popularcities-sin a:before{ background: url(/ovs_htl/assets/images/popularcities/sin.jpg); background-size: cover; }
.popularcities-list li.popularcities-gum a:before{ background: url(/ovs_htl/assets/images/popularcities/gum.jpg); background-size: cover; }
.popularcities-list li.popularcities-par a:before{ background: url(/ovs_htl/assets/images/popularcities/par.jpg); background-size: cover; }
.popularcities-list li.popularcities-lon a:before{ background: url(/ovs_htl/assets/images/popularcities/lon.jpg); background-size: cover; }
.popularcities-list li.popularcities-pus a:before{ background: url(/ovs_htl/assets/images/popularcities/pus.jpg); background-size: cover; }
.popularcities-list li.popularcities-mnl a:before{ background: url(/ovs_htl/assets/images/popularcities/mnl.jpg); background-size: cover; }
.popularcities-list li.popularcities-nyc a:before{ background: url(/ovs_htl/assets/images/popularcities/nyc.jpg); background-size: cover; }
.popularcities-list li.popularcities-sgn a:before{ background: url(/ovs_htl/assets/images/popularcities/sgn.jpg); background-size: cover; }

.popularcities-list li a:hover{
	background-color: #000;
}
.popularcities-list li a:hover:before{
	opacity: .8;
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.popularcities-list li a{
}
.popularcities-list li a span{
	position: absolute;
	left: 50%;
	top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	margin: 0 auto;
	padding: 5px 10px;
	width: 80%;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 400;
	text-align: center;
	border-radius: 25px;
	background-color: rgba(0, 0, 0, 0.5);
}
.popularcities-more{
	margin-top: 30px;
	text-align: center;

}
.popularcities-more span{
	cursor: pointer;
	position: relative;
	padding-right: 30px;
	font-size: 1.8rem;
}
.popularcities-more span:hover{
	color: #3498DB;
}
.popularcities-more span:after{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	display: block;
	font-size: 2.4rem;
    color: #98A6B5;
	
	font-family: 'jtb-icon' !important;
	content: "\e90c";
	text-decoration: none;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;
}
.popularcities-more span.js-open:after{
	content: "\e90f";
}

/*  ランキング
============================================================================= */
.ranking-list.js-slider{
	margin: 30px auto 0;
	max-width: 960px;
}
.ranking-list:not(.js-slider){
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 30px;
}
.ranking-list li[class^="ranking-"]{
	padding: 0 6px;
}
.ranking-list:not(.js-slider) li[class^="ranking-"]{
	width: 100%;
	max-width: 320px;
}
.ranking-list li[class^="ranking-"] a{
	position: relative;
	overflow: hidden;
	display: block;
	padding-top: calc(300 / 300 * 100%);
	height: 0;
	text-align: center;
	
	background-repeat: no-repeat;
	background-position: center;
}
.ranking-list li[class^="ranking-"] a:before{
	position: absolute;
	top: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.ranking-list li.ranking-hwi a:before{ background: url(/ovs_htl/assets/images/ranking/osusume_hawai.jpg); background-size: cover; }
.ranking-list li.ranking-sin a:before{ background: url(/ovs_htl/assets/images/ranking/ranking_sin.jpg); background-size: cover; }
.ranking-list li.ranking-gum a:before{ background: url(/ovs_htl/assets/images/ranking/ranking_gum.jpg); background-size: cover; }
.ranking-list li.ranking-hkg a:before{ background: url(/ovs_htl/assets/images/ranking/ranking_hkg.jpg); background-size: cover; }

.ranking-list li[class^="ranking-"] a:hover{
	background-color: #000;
}
.ranking-list li[class^="ranking-"] a:hover:before{
	opacity: .8;
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.ranking-list li[class^="ranking-"] a span{
	position: absolute;
	left: 50%;
	top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	margin: 0 auto;
	padding: 10px;
	width: 80%;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 400;
	text-align: center;
	line-height: 1.2;
	border-radius: 40px;
	background-color: rgba(0, 0, 0, 0.5);
}
.ranking-list li[class^="ranking-"] a span em{
	display: block;
	font-size: 2.2rem;
}

@media screen and (max-width: 759px){
	
	/*  人気都市から海外ホテルを探す
	============================================================================= */
	.popularcities-list{
		margin: 17px 0 0 -1px;
	}
	.popularcities-list li{
		margin: 1px 0 0 1px;
		width: calc(100% / 2 - 1px);
	}
	.popularcities-list li a span{
		font-size: 1.6rem;
	}
	.popularcities-more span{
		font-size: 1.3rem;
	}
	
	/*  ランキング
	============================================================================= */
	.ranking-list{
		margin-left: auto!important;
		margin-right: auto!important;
		max-width: 300px!important;
	}
	.ranking-list:not(.js-slider) li[class^="ranking-"]{
		max-width: inherit;
	}
	.ranking-list li[class^="ranking-"] a span{
		font-size: 1.1rem;
	}
	.ranking-list li[class^="ranking-"] a span em{
		font-size: 1.6rem;
	}
}


/* おすすめ特集
	============================================================================= */

.campaign__title { font-size: 28px; margin-bottom: 1em;text-align: center;margin-top: 150px; }
.campaign__list { display: flex; justify-content: center; width: 100%; }
.campaign__item { width: 300px; }
.campaign__item + .campaign__item { margin-left: 56px; }
.campaign__item img { display: block; margin: 0 auto 1em; }
.campaign__item p { text-align: center; }
.campaign__item p strong { display: block; font-size: 14px; font-weight: bold; }

@media screen and (max-width:767px){
.l-inner { margin: 0 auto; padding: 0 4%; width: 100%; }
.campaign__title { font-size: 5.266667vw; margin-bottom: 1em; }
.campaign__list { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; }
.campaign__item { text-align: left; /*width: calc((100% - 10px) / 2);*/ margin-bottom: 10px; }
.campaign__item + .campaign__item { margin-left:0; }
.campaign__item img { display: block; margin: 0 auto .3em; padding: 1px;width:100%;}
.campaign__item p { font-size: 2.7vw; }
.campaign__item p strong { display: block; font-size: 3.0vw; font-weight: bold; }
}