@charset "utf-8";

/*-----------------------------------------
上部ページナビ
-----------------------------------------*/
#pageNavi {
	background-color: #ecf4ff;
}
#pageNavi .main_ttl {
	color: #013781;
	border-bottom: dotted 1px #99bbe8;
}
#pageNavi ul li {
    width: 25%;
	border-right: dotted 1px #99bbe8;
}

#pageNavi ul li a:before {
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	margin: auto;
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
}
#pageNavi ul li.about a:before {background: url("/kaigai/kansai/common/img/icon/blue/navi-map.svg") center center / contain no-repeat;}
#pageNavi ul li.tour a:before {background: url("/kaigai/kansai/common/img/icon/blue/navi-tour.svg") center center / contain no-repeat;}
#pageNavi ul li.special a:before {background: url("/kaigai/kansai/common/img/icon/blue/navi-special.svg") center center / contain no-repeat;}
#pageNavi ul li.airhotel a:before {background: url("/kaigai/kansai/common/img/icon/blue/navi-airhotel.svg") center center / contain no-repeat;}
#pageNavi ul li.air a:before {background: url("/kaigai/kansai/common/img/icon/blue/navi-air.svg") center center / contain no-repeat;}

#pageNavi ul li a:after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	font-family: FontAwesome;
	content: "\f107";
	color: #013781;
}

/*------------------------------------------------------
   スライダー　[共通の内容はowl.carousel.cssに記載]
------------------------------------------------------*/
#mainSlider {
	width: 100%;
}
#mainSlider #sync2 .current .item {
	background: #013781;
}
.owl-carousel .owl-item img{
	height: 100%;
}
/*---------------------------------------------
    マップ
---------------------------------------------*/
#mapWrap {
    width: 100%;
    background: url(../../img/map-bg.jpg);
    background-size: 241px 241px;
    padding: 0 0 5vw;
    position: relative;
}
#mapWrap h2 img {
	width: 100%;
	height: 100%;
}
#mapWrap .map-spot p {
	position: absolute;
}
#mapWrap .map-spot p {
	display: inline-block;
	background-color: #868f0b;
	font-size: 3.3vw;
	line-height: 1.2em;
	color: #fff;
	text-decoration: none;
	padding: 1vw;
}
#mapWrap .map-spot p a:after {
	font-family: FontAwesome;
	content: "\f101";
	margin-left: 3px;
}
#mapWrap .map-spot p.spot1 {left: 12vw;	top:60vw;}
#mapWrap .map-spot p.spot2 {left: 2.5vw; top:50.2vw;}
#mapWrap .map-spot p.spot3 {left: 2vw; top:40vw;}
#mapWrap .map-spot p.spot4 {left: 43vw; top:56vw;}
#mapWrap .map-spot p.spot5 {left: 42vw; top:66vw;}
#mapWrap .map-spot p.spot6 {left: 70.4vw; top:55vw;}
#mapWrap .map-spot p.spot7 {left: 59vw; top:35vw;}
#mapWrap .map-spot p.spot8 {left: 40vw; top:25vw;}
#mapWrap .map-spot p.spot9 {left: 15vw; top:16vw;}
#mapWrap .intro {
	width: 86%;
	margin: 0 auto 3vw;
	font-size: 14px;
	color: #663f14;
	line-height: 1.5em;
	text-align: justify;
}
.map-info {
	width: 90vw;
	margin: 0 auto;
	border: solid 5px #fbdbb2;
	background-color: #fff;
}
.map-info h3 {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	padding: 10px 15px;
	background-color: #fdf6ee;
	position: relative;
	border-bottom: dashed 1px #fbdbb2;
}
.map-info h3 span {
	font-size: 12px;
}
.map-info h3:after {
	content: "";
	position: absolute;
	right: 10px;
	top: 30%;
	transition: all 0.2s ease-in-out;
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 2px #e0b379;
	border-right: solid 2px #e0b379;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.map-info h3.open:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 45%;
}
.map-info .content {
	display: none;
	padding: 10px 15px;
	font-size: 13px;
	line-height: 1.4em;
	border-bottom: solid 1px #fbdbb2;
}
.map-info .content img {
	margin-top: 5px;
	width: 100%;
	height: 100%;
}
.map-info .btn {
	width: 200px;
	text-align: center;
	margin: 5px auto;
}
.map-info .btn a {
	display: block;
	background-color: #013781;
	padding: 0 15px;
	color: #fff;
	font-size: 13px;
	line-height: 2.0em;
	border-radius: 1.0em;
	text-decoration: none;
}
.map-info .btn a:after {
	font-family: FontAwesome;
	content: "\f101";
	margin-left: 5px;
}

/*-----------------------------------------
最新のお知らせ
-----------------------------------------*/
#newsWrap h2:before {
	background: url("/kaigai/kansai/common/img/icon/blue/icon-news.svg") no-repeat;
	background-size: contain;
}
/*---------------------------------------------
おすすめツアー
---------------------------------------------*/
#tourWrap h2:before {
	background: url("/kaigai/kansai/common/img/icon/blue/navi-tour.svg") no-repeat;
	background-size: contain;
}
#tourWrap > h3,
#tourWrap .tour-box-wrap h3 {
	color: #013781;
	background-color: #ecf4ff;
    border-left: 5px solid #013781;
}
#tourWrap .area{
	color: #fff;
	background-color: #013781;
	font-size: 15px;
	padding: 5px 15px;
	margin-bottom: 15px;
}
#tourWrap .area img{
	position: absolute;
	top: -15px;
	left: 8px;
	width: 48px;
 }

/*---------------------------------------------
	商品下部バナー
---------------------------------------------*/
#tourWrap .bnr_area {
	width: 94%;
	margin: 0 auto 5%;
}
#tourWrap .bnr_area li {
	margin: 3% 0;
}
#tourWrap .bnr_area li a {
	display: block;
}
#tourWrap .bnr_area li img {
	width: 100%;
	vertical-align: middle;
	height: 100%;
}

/*---------------------------------------------
  おすすめ特集
---------------------------------------------*/
#specialWrap h2:before {
	background: url("/kaigai/kansai/common/img/icon/blue/navi-special.svg") no-repeat;
	background-size: contain;
}


/*---------------------------------------------
  航空券+ホテル
---------------------------------------------*/
#airhotelWrap h2:before {
	background: url("/kaigai/kansai/common/img/icon/blue/navi-airhotel.svg") no-repeat;
	background-size: contain;
}

/*---------------------------------------------
  航空券
---------------------------------------------*/
#airWrap h2:before {
	background: url("/kaigai/kansai/common/img/icon/blue/navi-air.svg") no-repeat;
	background-size: contain;
}
#airWrap h3 {
	color: #013781;
	background-color: #ecf4ff;
    border-left: 5px solid #013781;
}
.air-box .air-img img {
    height: auto;
}

/*---------------------------------------------
もっと見るボタン
---------------------------------------------*/
#tourWrap .btn-more,
#airhotelWrap .btn-more,
#airWrap .btn-more,
#specialWrap .btn-more{
	background-color: #013781;
}

/*-----------------------------------------
基本情報
-----------------------------------------*/
#infoWrap h2:before {
	background: url("/kaigai/kansai/common/img/icon/blue/icon-info.svg") no-repeat;
	background-size: contain;
}
#infoBox dl.country {background-image: url("../../img/icon-flag.png") ;}

/*---------------------------------------------
フッター検索ナビ
---------------------------------------------*/
#footSearchNavi ul {
	background-color: #ecf4ff;
}
#footSearchNavi ul li:nth-child(1) {width: 28%; background: url(/kaigai/kansai/common/img/icon/blue/search-tour.svg) no-repeat top 4px center;background-size: 26px auto;}
#footSearchNavi ul li:nth-child(2) {width: 28%; background: url(/kaigai/kansai/common/img/icon/blue/search-airhotel.svg) no-repeat top 4px center;background-size: 26px auto;}
#footSearchNavi ul li:nth-child(3) {width: 28%; background: url(/kaigai/kansai/common/img/icon/blue/search-air.svg) no-repeat top 4px center;background-size: 26px auto;}


/*---------------------------------------------
  現地支店
---------------------------------------------*/
#branchWrap {
    width: 100%;
    padding: 70px 5% 5vw; 
    background: #f5f9ff;
}
#branchWrap h2 {
    position: relative;    
	font-size: 18px;
	font-weight: bold;
	text-align: center;
    color: #000;
    margin-bottom: 15px;
}
#branchWrap h2::before,#facebookWrap h2::before {
    position: absolute;    
    content: " ";
    background: url("../../img/title_icon.png") no-repeat;
    background-size: 100%;
    display: block;
    width: 40px;
    height: 40px;
    left: 0;
    right: 0;
    margin: auto;
    top: -50px;
}

.branchBox {
    margin: 0 auto 10px;
    position: relative;
}
.branchBox img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    vertical-align: bottom;
    bottom: 0;
}
.branchBox span {
    position: absolute;
    display: block;
    padding: 8px 5px;
    font-size: 15px;
    width: 100%;
    bottom: 0;
    color: #fff;
    text-align: center;
    font-weight: bold;
    background: rgba(0,0,0,0.8);
}