@charset "utf-8";
/*
 * CSS for PC
 * @date     2020.7
 * @author   Zhang Ting
 */


/* ------------------------------------------
   Common Setting
------------------------------------------ */
.sp {
	display: none !important;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
#widewrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	color: #333;
}

#contents.column1 {
	width: 100%;
	padding: 0 0 40px 0;
}
#contents {
	background: #ffffff;
	overflow: hidden;
}
h2.title { text-align: center; padding: 70px 0 40px; font-size: 36px; letter-spacing: 10px;}
h2.title span{position: relative;}
h2.title span:after{position: absolute; top: 40%; left: -130px; content: ""; background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/Line1.png) no-repeat; width: 76px; height: 1px;}
h2.title span:before{position: absolute; top: 40%; right: -105px; content: ""; background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/Line1.png) no-repeat; width: 76px; height: 1px;}
h2.title span i{font-size: 36px; font-style: normal;}

h2.tit_w {color: #fff;}
h2.tit_w span:after{background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/Line2.png) no-repeat;}
h2.tit_w span:before{background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/Line2.png) no-repeat;}
/* ------------------------------------------
   Main CSS start
------------------------------------------ */
#keyVisual{position: relative; width: 100%; margin-bottom: 0; overflow: hidden; background: #F4F2ED;}
#keyVisual h1{position: absolute; top: 0; left: 0; height: 100%; z-index: 9; text-indent: inherit; width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
#keyVisual h1 img{width: 100%; max-width: 28%;}
.pr_absolute:before{z-index: 9;}
#keyVisual .jdsSlides li{width: 100%;}
#keyVisual .jdsSlides li img{width: 100%;}
#keyVisual .rslides_tabs { position: absolute; z-index: 3; bottom: 10px; right: 50%;}
#keyVisual .rslides_tabs li a {
	display: table-cell;
	width: 8px;
	height: 8px;
	vertical-align: middle;
	background-color: #ccc;
	border: none;
	border-radius: 5px;
	text-align: center;
	font-size: 0;
	opacity: 0.3;
  }
#keyVisual .rslides_tabs li.rslides_here a{ opacity: 1;}

.pr_main{ background: #F4F2ED; font-size: 16px; line-height: 180%; text-align: center; padding: 40px 0 36px;}
.pr_main b{font-size: 26px; display: block; margin: 18px 0 0; line-height: 150%; letter-spacing: 5px;}

#PickUP{ margin-bottom: 30px;}
#PickUP dl{background: #F4F2ED; display: block; width: 1280px; margin: 0 auto 48px; max-height: 395px; overflow: hidden; }
#PickUP dl dd{padding: 60px 40px 0 50px; width: 360px; font-size: 16px; line-height: 180%; float: left;}
#PickUP dl dd h3{ font-size: 20px; margin: 0 0 20px 0; letter-spacing: 2px;}
#PickUP dl dt{ float: left;}
#PickUP dl:nth-child(2n) dt{ float: right;}




#hotelList { width: 100%; background: #F4F2ED; padding-bottom: 60px;}

.innerContent{ width: 1304px; margin: 0 auto;}

.hotelBox {
	width: 100%;
	float: left;
	background: #ffffff;
	margin: 0 11px 28px;
}
.hotelBox .rtBox{float: right; width: 47.8%;}
.hotelBox .areaName {
	padding: 50px 50px 10px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
}
.hotelBox .hotelName {
	font-size: 20px;
	letter-spacing: 2px;
	padding: 0 50px 15px;
	line-height: 160%;
	font-weight: bold;
}
.hotelBox .streetName{font-size: 84%; line-height: 160%; padding: 0 20px 10px; text-align: center;}
.hotelBox .streetName span{display: inline-block; background: #D9EDF9; padding: 3px 15px 1px; border-radius: 3px;}
.hotelBox .exptxt { font-size: 16px; line-height: 160%; padding: 0 50px 25px;}
.hotelBox .hotelPht { padding: 0; font-size: 0; float: left;}
.hotelBox .hotelPht img { width: 100%;}
.hotelBox .rtBox span{display: block; border-radius: 5px; background: #fef2f2; padding: 15px 20px; margin: 0 50px 20px; font-size: 14px; line-height: 140%;}
/* ------------------------------------------
.hotelBox a.plan{display: block; border-radius: 5px; border: 1px solid #DF8080; padding: 20px; margin: 0 50px 20px;}
.hotelBox a.plan .planName{ font-size: 14px; line-height: 140%; margin-bottom: 5px;}
.hotelBox a.plan .price{ font-size: 13px; text-align: center; line-height: 140%;}
.hotelBox a.plan .price span{ color: #BF0000;}
.hotelBox a.plan .price span em{font-style: normal; font-size: 18px; font-weight: bold;}
------------------------------------------ */
.hotelBox .bottomBtn { padding: 0 50px 24px;}
.hotelBox .bottomBtn li {
	position: relative;
	text-align: center;
	width: 48.5%;
}
.hotelBox .bottomBtn li:after {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
	top: 48%;
	margin-top: -3px;
	right: 10px;
}
.hotelBox .bottomBtn li a {
	display: block;
	color: #ffffff !important;
	padding: 14px 0 12px;
	font-size: 16px;
	letter-spacing: 2px;
	background: #BF0000;
	border-radius: 5px;
}
.hotelBox .bottomBtn li:nth-child(1) {
	float: left;
}
.hotelBox .bottomBtn li:nth-child(2) {
	float: right;
}
#contentsArea .hotelBox .bottomBtn li a:hover{ text-decoration: none !important; opacity: 0.7;}
#contentsArea .btnGroup{ display: block; width: 700px; margin: 20px auto 40px; background: #BF0000; color: #ffffff !important; font-size: 24px; letter-spacing: 5px; font-weight: bold; border-radius: 15px; text-align: center; padding: 30px 0 25px; position: relative;}
#contentsArea .btnGroup:after {
	position: absolute;
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	top: 46%;
	margin-top: -3px;
	right: 30px;
}
#contentsArea .btnGroup:hover{ text-decoration: none !important; opacity: 0.7;}

.condInfo {
	width: 1280px;
	clear: both;
	margin: 0 auto;
	font-size: 84%;
	line-height: 170%;
}
#contentsArea .condInfo a{text-decoration: underline;}
#contentsArea .condInfo a:hover{text-decoration: none;}



.column1 #search-box { width: 100%; border: none; padding: 0 0 70px;}
#search-box-title {text-align: center; padding: 60px 0 30px; font-size: 40px; letter-spacing: 15px;}
#search-box-title span{position: relative;}
#search-box-title span:after{position: absolute; top: 40%; left: -130px; content: ""; background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/Line1.png) no-repeat; width: 76px; height: 1px;}
#search-box-title span:before{position: absolute; top: 40%; right: -105px; content: ""; background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/Line1.png) no-repeat; width: 76px; height: 1px;}
#search-box-title span i{font-size: 36px; font-style: normal;}

#search-box-body{border: 1px solid #ccc; width: 1280px; margin: 0 auto; background: #fff;}
.column1 #search-box #domestic-search-box { padding:40px 0 40px 40px; }

#contents .pagetop {
	width: 58px;
	height: 59px;
	text-indent: -9999px;
	font-size: 0;
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#contents .pagetop a {
	width: 58px;
	height: 59px;
	display: block;
	background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/pagetop.png) no-repeat;
}
#contents .pagetop a:hover{opacity: 0.7;}

#contentsArea .hotelBox a:hover{ text-decoration: none; opacity: 0.7;}
#contentsArea .hotelBox .bottomBtn a:hover{text-decoration: underline; opacity: 1;}

@media screen and (min-width:768px) and (max-width:1024px){
	h2.title{ padding: 60px 0 40px;}
	#PickUP dl{ width: 1280px  background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/triangle1.png) no-repeat #F4F2ED bottom left; }
	#PickUP dl:nth-child(odd) { background: url(https://img.travel.rakuten.co.jp/select/rakutenstay/202206plan/images/triangle2.png) no-repeat #F4F2ED bottom right;}
	#PickUP dl dt {width: 60%;}
	#PickUP dl dt img{width: 100%; display: block;}
	#PickUP dl dd {width: 32%; padding-top: 4%; background: none;}
	#PickUP dl:nth-child(odd) dd{background: none;}
	#PickUP dl dd h3{ letter-spacing: 0; height: auto;}
	.jdsTab .jdsTabNav { width: 100%; }
	.jdsTabMain { width: 100%; }
	.jdsTab .jdsTabNav li{ padding: 18px 70px 14px;}
	.condInfo{width: 100%;}
	.column1 #search-box{width: 100%;}
	#FunBox div { width: 95%;}
	#FunBox ul li img {width: 55%;}
	#FunBox ul li p {width: calc(45% - 50px); padding: 40px 25px 0; font-size: 16px; line-height: 160%; letter-spacing: 1px;}
	#search-box-body{width: calc(100% - 40px);}
	}