@charset "utf-8";

body {
	line-height:initial;
}
/*----------------------------------------------
	全体
------------------------------------------------*/
.contents {
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:14px;
}
.breadcrumb {
    width: 100%;
}
/*----------------------------------------------
	メインビジュアルトップ
------------------------------------------------*/
#mainVisual {
	width: 100vw;
	height: 120vw;
}
#mainVisual .bg-slider {
	width: 100vw;
	height: 120vw;
}
#mainVisual .logo {
	padding-top: 34vw;
	text-align:center;
}
#mainVisual .logo img {
	width: 58vw;
}

@media (orientation: landscape){
	#mainVisual {
		width: 100vw;
		height: 100vh;
	}
	#mainVisual .bg-slider {
		width: 100vw;
		height: 100vh;
	}
	#mainVisual .logo {
		padding-top: 7vw;
		text-align:center;
	}
	#mainVisual .logo img {
		width:40vw;
	} 
}
/*----------------------------------------------
	メインビジュアル下層
------------------------------------------------*/
#mainVisualLower {
	width: 100vw;
	height: 34vw;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

.hawaii #mainVisualLower {background-image: url("../img/main-hawaii-bg.jpg");}
.abeach #mainVisualLower {background-image: url("../img/main-abeach-bg.jpg");}
.acity #mainVisualLower {background-image: url("../img/main-acity-bg.jpg");}
.oceania #mainVisualLower {background-image: url("../img/main-oceania-bg.jpg");}
.europe #mainVisualLower {background-image: url("../img/main-europe-bg.jpg");}
.kokunai #mainVisualLower {background-image: url("../img/main-kokunai-bg.jpg");}
.kaigai #mainVisualLower {background-image: url("../img/main-kaigai-bg.jpg");}
.oka #mainVisualLower {background-image: url("../img/main-oka-bg.jpg");}
.rito #mainVisualLower {background-image: url("../img/main-rito-bg.jpg");}
.hok #mainVisualLower {background-image: url("../img/main-hok-bg.jpg");}
.kyu #mainVisualLower {background-image: url("../img/main-kyu-bg.jpg");}
.kix #mainVisualLower {background-image: url("../img/main-kix-bg.jpg");}
.thu #mainVisualLower {background-image: url("../img/main-thu-bg.jpg");}
.tyo #mainVisualLower {background-image: url("../img/main-tyo-bg.jpg");}

#mainVisualLower .logo {
	padding-top: 8vw;
	text-align:center;
}
#mainVisualLower .logo img {
	width: 62vw;
}

/*----------------------------------------------
	ナビ
------------------------------------------------*/
.main.top h2{
	background-color: #000;
	color: #fff;
	font-size: 4.0vw;
	line-height: 2.6em;
	text-align: center;	
	border: none;
}
.main.top h2:before {
	content: "▼▼▼";
	font-size: 3.5vw;
	margin-right: 5px;
}
.main.top h2:after {
	content: "▼▼▼";
	font-size: 3.5vw;
	margin-left: 5px;
}
#navi {
	width: 100%;
	background-color: #f5f5f5;
	padding: 8vw 0;
}
#navi ul {
	width: 84vw;
	margin: 0 auto;
}
#navi ul li {
	width: 84vw;
	height: 50vw;
	margin-bottom: 4vw;
}
#navi ul li span:nth-child(1) {
	font-size: 5.4vw;
	font-weight: bold;
}
#navi ul li span:nth-child(2)  {
	font-size: 3.6vw;
	line-height: 1.5em;
	margin-top: 2vw;
    text-align: center;
}
#navi ul li#hawaii {background: url("../img/navi-hawaii-bg.jpg") center center /cover no-repeat;}
#navi ul li#abeach {background: url("../img/navi-abeach-bg.jpg") center center /cover no-repeat;}
#navi ul li#acity {background: url("../img/navi-acity-bg.jpg") center center /cover no-repeat;}
#navi ul li#oceania {background: url("../img/navi-oceania-bg.jpg") center center /cover no-repeat;}
#navi ul li#europe {background: url("../img/navi-europe-bg.jpg") center center /cover no-repeat;}
#navi ul li#kaigai {background: url("../img/navi-kaigai-bg.jpg") center center /cover no-repeat;}
#navi ul li#kokunai {background: url("../img/navi-kokunai-bg.jpg") center center /cover no-repeat;}
#navi ul li#oka {background: url("../img/navi-oka-bg.jpg") center center /cover no-repeat;}
#navi ul li#rito {background: url("../img/navi-rito-bg.jpg") center center /cover no-repeat;}
#navi ul li#hok {background: url("../img/navi-hok-bg.jpg") center center /cover no-repeat;}
#navi ul li#kyu {background: url("../img/navi-kyu-bg.jpg") center center /cover no-repeat;}
#navi ul li#kix {background: url("../img/navi-kix-bg.jpg") center center /cover no-repeat;}
#navi ul li#thu {background: url("../img/navi-thu-bg.jpg") center center /cover no-repeat;}
#navi ul li#tyo {background: url("../img/navi-tyo-bg.jpg") center center /cover no-repeat;}

#navi ul li a {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0 5vw;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
	text-decoration: none;
	position: relative;
}
#navi ul li a:after {
	font-family: FontAwesome;
	content: "\f101";
	font-size: 5.4vw;
	font-weight: normal;
	position: absolute;
	right: 2vw;
}


/*----------------------------------------------
	エリア　タイトル
------------------------------------------------*/
.area-title {
	width: 100%;
	padding: 15px 0;
	text-align: center;
}
.area-title h2 {
	height: 20vw;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-align: center;
	font-size: 5.8vw;
	font-weight: bold;
	color: #a68943;
	background: url("../img/area-title-bg.png") no-repeat top center;
	background-size: 52vw;
	padding-top: 9vw;
	margin-bottom: 7vw;
}
.area-btn {
	width: 92vw;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
}
.area-btn li {
	padding: 10px 5px 10px 8px;
	border: 1px solid #a68943;
    border-radius: 5px;
	font-size: 13px;
	color: #a68943;
	margin: 0 2px 4px;
	transition: .6s;
    position: relative;
}
.area-btn li:after {
    font-family: FontAwesome;
    content: "\f0d7";
    margin-left: 5px;
    font-size: 15px;
}
.kokunai .area-btn li {padding: 10px 15px;}

.area-btn li.select {
	color: #fff;
	background-color: #a68943;
}
.area-btn:before {
	content: "▼方面から探す▼";
	font-size: 14px;
	position: absolute;
	top: -23px;
}

.area-btn.btm{
	margin: 10vw auto;
}
.area-btn.btm li:after{
    content: "\f0d8";
}

/*----------------------------------------------
	ホテル　枠
------------------------------------------------*/
.hotel-wrap {
	width: 94vw;
	margin: 0 auto 15px;
	background-color: #f5f5f5;
	padding-bottom: 30px;
}

.hotel-wrap .more-btn {
	width: 74vw;
	margin: 20px auto 0;
	font-size: 12px;
	text-align: center;
	background-color: #000;
    border-radius: 50vw;
}
.hotel-wrap .more-btn a {
	display: block;
	padding: 13px 0;
	color: #fff;
	text-decoration: none;
}
.hotel-wrap .more-btn a:after {
	font-family: FontAwesome;
	content: "\f105";
	margin-left: 10px;
}

/*----------------------------------------------
	ホテル　タイトル
------------------------------------------------*/
.hotel-title {
	width: 100%;
	padding: 15px 15px 20px 15px;
	border-top: solid 3px #a68943;
}
.hotel-title .area {
	display: inline-block;
	font-size: 11px;
	background-color: #a68943;
	color: #fff;
	line-height: 1.6em;
	border-radius: 0.8em;
	padding: 0 10px;
	margin: 0 0 5px 0;
}
.hotel-title h3 {
	font-size: 16px;
	line-height: 1.5em;
	font-weight: bold;
	margin-bottom: 3px;
}
.hotel-title .alpha {
	font-family: Verdana, Geneva, "sans-serif";
	font-size: 12px;
	line-height: 1.3em;
	color: #999;
	padding: 0 0 5px 0;
}
.hotel-title .icon {
	border-top: solid 1px #000;
    padding: 5px 0 0 0;
}
.hotel-title .icon span {
	font-size: 12px;
	color: #fff;
	padding: 3px 5px;
	margin: 0 5px 5px 0;
	display: none;
}
.hotel-title .icon span.show {
	display: inline-block!important;
}

.hotel-title .icon span.cpn {background-color: #ec4e4e;}
.hotel-title .icon span.zekkei {background-color: #254985;}
.hotel-title .icon span.condo {background-color: #795516;}
.hotel-title .icon span.familly {background-color: #e79d30;}
.hotel-title .icon span.jyoshi {background-color: #e6537f;}
.hotel-title .icon span.senior {background-color: #4c2673;}
.hotel-title .icon span.couple {background-color: #168180;}

.hotel-title .grade {
	font-size: 12px;
}
.hotel-title .grade span {
	color: #a68943;
	letter-spacing: 0.1em;
}

/*----------------------------------------------
	ホテル　スライダー
------------------------------------------------*/
.hotel-slider {
	width: 76vw;
	margin: 0 auto 30px;
}
.hotel-slider p img {
	width: 100%;
}
.hotel-slider .slick-dots {
	position: absolute;
	bottom: -22px;
}
/*スライダー写真4枚しかない対応*/
#icninsp .slick-dots li:nth-child(5){
	display: none;
}
/*----------------------------------------------
	ホテル　説明
------------------------------------------------*/
.hotel-info {
	width: 88vw;
	margin: 0 auto;
}
.hotel-info .text {
	font-size: 14px;
	line-height: 1.5em;
}
.hotel-info .more {
	font-size: 13px;
	text-align: right;
}
.hotel-info .more a {
	display: inline-block;
	border-bottom: double 3px #333;
	color: #333;
	text-decoration: none;
	padding: 5px;
}
/*ホテルリンクが空なら非表示*/
.hotel-info .more:has(a[href=""]) {
	display: none;
}
/**/
.hotel-info .more a:after {
	font-family: FontAwesome;
	content: "\f18e";
	font-size: 16px;
	margin-left: 5px;
}
.hotel-info .point-ttl {
	margin-top: 15px;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
	font-size: 16px;
	line-height: 1.5;
	font-weight: bold;
	color: #a68943;
}
.hotel-info .point-ttl::before {
    background: url(../../img/point-title.png) center center / cover no-repeat;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: baseline;
}
.hotel-info .point {
	font-size: 12px;
	line-height: 1.5em;
	background-color: #fff;
	padding: 5px;
	position: relative;
}
.hotel-info .tour-ttl::before {
    background: url(../../img/tour-title.png) center center / cover no-repeat;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: baseline;
    color: #fff;
}
.hotel-info .tour-ttl {
	margin-top: 10px;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
	font-size: 16px;
	line-height: 1.5;
	font-weight: bold;
	color: #a68943;
}
.hotel-info .tour {
	position: relative;
}
.hotel-info .tour a {
	display: block;
	background-color: #fff;
	color: #333;
	text-decoration: none;
}
.hotel-info .item-box {
	width: 100%;
	border: solid 2px #a68943;
	padding: 8px;
}
.hotel-info .item-box:after {
    content: "";
    bottom: 0;
    right: 0;
    border-top: 0.8em solid transparent;
    border-right: 0.8em solid #a68943;
    position: absolute;
    z-index: 100;
}
.hotel-info .item-box .item-ttl {
	font-size: 15px;
	line-height: 1.3em;
	font-weight: bold;
	margin-bottom: 5px;
}
.hotel-info .item-box .item-copy {
	font-size: 12px;
    line-height: 1.3em;
	margin-bottom: 5px;
}
.hotel-info .item-box .item-price {
	font-size: 14px;
	font-weight: bold;
	color: #BD0000;
	text-align: right;
	margin-bottom: 5px;
}
.hotel-info .item-box .item-room {
	font-size: 10px;
	text-align: right;
}
.hotel-info .item-box .item-departure {
	font-size: 10px;
	text-align: right;
}
.hotel-info .item-box .item-comment{
	font-size: 10px;
	text-align: right;
}
.hotel-info .item-box .item-fuel {
	font-size: 10px;
	text-align: right;
}

/*----------------------------------------------
	スライドナビ
------------------------------------------------*/
#slideNavi .nav-btn {
	position: absolute;
	top: 67vw;
	right: 0;
	z-index: 100;
}
@media (orientation: landscape){
	#slideNavi .nav-btn {
		position: absolute;
		top: 54vw;
	}
}
#slideNavi .nav-btn img {
	width: 47px;
	height: 47px;
}

#slideNavi .menu-ttl {
	margin: 30px 0 20px 20px;
	font-weight: bold;
	font-size: 16px;
	color: #fff;
}
#slideNavi .sb-close {
	position: absolute;
	top: 20px;
	right: 4%;
}
#slideNavi .sb-close img {
	width: 25px;
	height: 25px;
}
#slideNavi ul {
	font-size: 14px;
	line-height: 1.5em;
	margin: 0 0 20px 20px;
	border-top: dotted 1px #fff;
}
#slideNavi ul li {
	padding: 12px 5px 12px 17px;
	border-bottom: dotted 1px #fff;
	position: relative;
}
#slideNavi ul li:before {
	position: absolute;
	top:11px;
	left: 0;
    content: "\f101";
    font-family: FontAwesome;
    margin-right: .5em;
	color: #fff;
}
#slideNavi a {
	color: #fff;
	display: block;
	text-decoration: none;
}

#slideNavi .toplink {
	text-align: right;
	padding-right: 10px;
}
#slideNavi .toplink a:after {
	font-family: FontAwesome;
	content: "\f0a9";
	margin-left: 5px;
}

/*------------------------------------------------
新旧上下限js混在応急処置
(①新上下限②旧上下限③手書き の順番で優先表示)
--------------------------------------------------*/
.item-price .minmax-new:not(:empty) + .minmax-old,
.item-departure .js-split-departure:not(:empty) + span{
  display: none;
}
.js-split-departure::after,
span[id*="dep_"]::after{
  content: "出発"
}
.js-split-departure:empty::after,
span[id*="dep_"]:empty::after{
  display: none;
}

/*----------------------------------------------
	サイドボタン
------------------------------------------------*/
.side-btn {
    position: fixed;
    bottom: 20vw;
    right: 0;
    writing-mode: vertical-rl;
	font-size: 13px;
    line-height: 2.6em;
    padding: 10px 0;
	background-color: #a68943;
    opacity: 0.9;
    z-index: 1000;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.side-btn a {
	display: block;
	color: #fff;
	text-decoration: none;
}

/*-----------------------------------------------
バケーションページがないホテルのリンク非表示
------------------------------------------------*/
#dxbpj .more a {
    display: none;
}