@charset "UTF-8";

/* ---------------------------------------------------------
	スキー場情報
--------------------------------------------------------- */
article#hotel_wrapper{
	width: 100%;
	overflow: hidden;
}
#hotel_wrapper h1{
	font-size: 24px;
	font-size: 24rem;
	text-align: center;
	color: #FF871B;
	padding: 12px 0;
	border-top: solid 3px #FF871B;
	border-bottom: solid 3px #FF871B;
	text-shadow:rgba(0,0,0,0.8);
	background: repeating-linear-gradient(-45deg, #FFF3E7, #FFF3E7 6px,#FFE7D1 0px, #FFE7D1 12px);
}
.mainvisual-inner{
	position: relative;
	max-width: 600px;
	margin: 20px auto 0;
}
.swiper-container{
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: 1;
}
.swiper-slide{
	opacity: 0.6;
	transform: scale(0.9);
	-webkit-transition: 300ms;
	transition: 300ms;
}
.swiper-slide span{
	display: none;
}
.swiper-slide.swiper-slide-active{
	opacity: 1;
	transform: scale(1.00);
}
.swiper-slide.swiper-slide-active span{
	position: absolute;
	width: 100%;
	bottom: 0;
	display: block;
	padding: 3px 0;
	font-size: 12px;
	font-size: 12rem;
	text-align: center;
	color: #FFF;
	background: rgba(0,0,0,0.6);
}
.swiper-slide img{
	max-height: 400px;
}
.swiper-container .swiper-button-next,
.swiper-container .swiper-container-rtl .swiper-button-prev{
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fsvg%3E");
}
.swiper-container .swiper-button-prev,
.swiper-container .swiper-container-rtl .swiper-button-next{
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fsvg%3E");
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction{
	bottom: -25px;
}
.swiper-container .swiper-pagination-bullet{
	background: #999;
	opacity: 1.0;
	margin: 0 6px !important;
}
.swiper-container .swiper-pagination-bullet:hover{
	background: #999;
}

.swiper-container .swiper-pagination-bullet-active{
	background: #007aff;
	transform: scale(1.5);
}
#hotel_wrapper #hotel_detail{
	margin-top: 40px;
}
#hotel_detail #hotel_info{
	width: 35%;
	margin-right: 30px;
	font-size: 16px;
	font-size: 16rem;
}
#hotel_detail #hotel_data{
	width: calc(65% - 30px);
}
#hotel_data > table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
}
#hotel_data > table > caption{
	margin-top: 10px;
	padding: 5px 0;
	color: #FFF;
	text-align: center;
	background: #1592E6;
}
#hotel_data > table tr th{
	position: relative;
	width: 80px;
	padding: 5px;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	overflow: visible;
	font-size: 12px;
	font-size: 12rem;
	font-weight: bold;
	color: #FFF;
	background: #78C7E7;
	border-radius: 5px;
}
#hotel_data > table tr th:after{
	position: absolute;
	content: "";
	height: 0;
	width: 0;
	left: 100%;
	top: 50%;
	margin-top: -10px;
	border: solid transparent;
	border-left-color: #78C7E7;
	border-width: 10px;
	pointer-events: none;
}
#hotel_data > table tr th span{
	display: block;
	font-weight: normal;
}
#hotel_data > table tr td{
	padding-left: 10px;
	vertical-align: middle;
}
#hotel_data > table tr td:nth-of-type(2n-1){
	padding-right: 20px;
}
#hotel_data > table tr td p#equipcap{
	margin-top: 3px;
	padding-top: 3px;
	border-top: 1px dotted #999;
}
#hotel_data > table tr td p#equipcap::before{
	content: "※";
}
ul.freetxt li{
	text-indent: -1em;
	margin: 5px 0 0 1em;
	font-size: 12px;
	font-size: 12rem;
	line-height: 1.2;
}
ul.freetxt li::before{
	content: '※';
	color: #F00;
	display: inline-block;
	margin-left: 1em;
}
ul#amenity li{
	width: 35px;
	height: 38px;
	margin-top: 10px;
	margin-right: 10px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../__common/pct_sprite.png) no-repeat 0 -100px;
}
ul#amenity li:nth-of-type(2){ background-position-x: -40px; }
ul#amenity li:nth-of-type(3){ background-position-x: -80px }
ul#amenity li:nth-of-type(4){ background-position-x: -120px; }
ul#amenity li:nth-of-type(5){ background-position-x: -160px; }
ul#amenity li:nth-of-type(6){ background-position-x: -200px; }
ul#amenity li:nth-of-type(7){ background-position-x: -240px; }
ul#amenity li:nth-of-type(8){ background-position-x: -280px; }
ul#amenity li:nth-of-type(9){ background-position-x: -320px; }
ul#amenity li:nth-of-type(10){ background-position-x: -360px; }
ul#amenity li:nth-of-type(11){ background-position-x: -400px; }
ul#amenity li:nth-of-type(12){ background-position-x: -440px; }
ul#amenity li.pctOff{ background-position-y: -150px; }
#hotel_data > table table td{
	width: auto;
	padding: 3px 20px 3px 0 !important;
}
ul#room li{
	display: inline-block;
	margin-right: 2em;
}
ul#room li:last-of-type{
	margin-right: 0;
}

/* ---------------------------------------------------------
	申込みボタン
--------------------------------------------------------- */
.order_wrapper{
	width: 100%;
	margin-top: 20px;
	padding: 20px;
	background: #FFE7D1;
	/* border: 5px solid #FF871B; */
	border-radius: 5px;
}
.order_wrapper .order_outline ul{
	margin: 0 auto;
	width: 100%;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.order_outline ul li{
	position: relative;
	width: 30%;
	margin-left: 5%;
	line-height: 1.2;
	font-weight: bold;
	text-align: center;
	color: #FF871B;
}
.order_outline ul li:first-of-type{
	margin-left: 0;
}
.order_outline ul li::before{
	display: block;
	font-family: "Font Awesome 5 Free";
	font-size: 24px;
	font-size: 24rem;
	font-weight: 900;
	padding-right: 3px;
}
.order_outline ul li:nth-of-type(1)::before{
	content: '\f236';
}
.order_outline ul li:nth-of-type(2)::before{
	content: '\f2e7';
}
.order_outline ul li:nth-of-type(3)::before{
	content: '\f3ff';
}
.order_outline ul li:not(:last-of-type)::after{
	position: absolute;
	content: "\f067";
	font-family: "Font Awesome 5 Free";
	top: 50%;
	right: 0;
  transform: translateY(-50%) translateX(50%);
	font-size: 24px;
	font-size: 24rem;
	font-weight: 900;
	color: #FF871B;
}
.order_wrapper .order_outline dl{
	margin: 20px auto 0;
	padding: 10px;
	background: #FFF;
	border-radius: 3px;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.order_outline dl dt{
	/* width: 50px; */
	font-size: 12px;
	font-size: 12rem;
	line-height: 1.2;
	color: #000;
}
.order_outline dl dd{
	/* width: calc(100% - 50px); */
	font-size: 24px;
	font-size: 24rem;
	font-weight: bold;
	color: #F00;
}
.order_outline dl dd.caption{
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-size: 14rem;
	font-weight: normal;
	color: #16160E;
}
.order_wrapper button.ordbtn{
	margin: 20px auto 0;
  display: block;
	width: 100%;
	padding: 10px 15px;
	line-height: 1.3;
  font-size: 18px;
  font-size: 18rem;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	background: #FF871B;
	border: 1px solid #FFF;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 3px 1px;
}
.order_wrapper button.ordbtn:hover{
  background: #1592E6;
	cursor: pointer;
}

/* ---------------------------------------------------------
  宿泊施設リスト
--------------------------------------------------------- */
#hotellist_wrapper{
	margin-top: 50px;
}
#hotellist_wrapper > .hotellist{
	width: calc((100% - 60px) / 3);
	margin-top: 30px;
	margin-left: 30px;
}
#hotellist_wrapper > .hotellist:nth-of-type(3n+1){
	margin-left: 0;
}
#hotellist_wrapper > .hotellist:not(:nth-of-type(-n+3)){
	margin-top: 50px;
}
.hotellist a:link{
	padding: 10px;
	background: #FFF;
	text-decoration: none;
}
.hotellist a:hover{
	background: #FDF9ED;
}
.hotellist a h2{
	width: 100%;
	margin-bottom: 10px;
	text-indent: -14px;
  padding: 5px 0 5px 21px;
	font-size: 14px;
	font-size: 14rem;
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
}
.hotellist a h2::before{
	content: "\f138";
  font-family: "Font Awesome 5 Free";
	font-size: 12px;
	font-size: 12rem;
	font-weight: 900;
	padding-right: 3px;
}
.hotellist a:hover h2::before{
	color: #1592E6;
}
.hotellist a h3{
	width: 100%;
	margin-bottom: 10px;
	padding: 3px 0;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	background: #1592E6;
	border-radius: 5px;
}
.hotellist a:hover h3{
	background: #FF871B;
}
.hotellist a figure{
	width: 120px;
	margin-right: 10px;
}
.hotellist a:hover figure{
	opacity: 0.6;
}
.hotellist a figure figcaption{
	margin-top: 5px;
	padding: 2px;
	font-size: 10px;
	font-size: 10rem;
	text-align: center;
	color: #FFF;
	background: #78C7E7;
	border-radius: 3px;
}
.hotellist a dl{
	width: calc(100% - 130px);
	padding-bottom: 5px;
	text-align: center;
	border-bottom: 1px dotted #CCC;
}
.hotellist a dl dt{
  position: relative;
	width: 120px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	font-size: 12px;
	font-size: 12rem;
	line-height: 1.2;
	font-weight: bold;
	color: #FFF;
	background: #F00;
	border-radius: 5px;
}
.hotellist a dl dt::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
	border-top: 5px solid #F00;
}
.hotellist a dl dd{
	margin-top: 10px;
	font-size: 16px;
	font-size: 16rem;
	font-weight: bold;
	color: #F00;
}
.hotellist a  dl dd span{
	display: block;
	font-size: 12px;
	font-size: 12rem;
	font-weight: normal;
	color: #000;
}
.hotellist a ul{
	width: 100%;
	margin: 0 auto;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.hotellist a ul li{
	margin-top: 10px;
	padding: 3px 5px;
	font-size: 12px;
	font-size: 12rem;
	color: #FFF;
	background: #78C7E7;
	border-radius: 5px;
}
.hotellist a:hover ul li{
	background: rgba(120,199,231,0.6);
}
.hotellist a ul li:first-of-type{
	margin-left: 0;
}
.hotellist a ul li::before{
  font-family: "Font Awesome 5 Free";
	font-size: 14px;
	font-size: 14rem;
	font-weight: 900;
	padding-right: 3px;
}
.hotellist a ul li.li_card01::before{
	content: "\f3ff";
}
.hotellist a ul li.li_card02::before{
	content: "\f7c9";
}
.hotellist a ul li.li_card03::before{
	content: "\f236";
}
.hotellist a ul li.li_card04::before{
	content: "\f2e7";
}

/* ---------------------------------------------------------
	レスポンシブ
--------------------------------------------------------- */
@media screen and (max-width: 768px){
	#hotel_detail #hotel_info{
		width: 100%;
		margin-right: 0;
	}
	#hotel_detail #hotel_text{
		width: calc(100% - 370px);
	}
	.order_wrapper{
		width: 350px;
		margin-top: 0;
		margin-left: 20px;
		padding: 10px;
	}
	.order_outline ul li{
		font-size: 14px;
		font-size: 14rem;
	}
	.order_wrapper .order_outline dl{
		margin-top: 10px;
		padding: 10px 0;
	}
	.order_outline dl dt{
		width: 100%;
		text-align: center;
	}
	.order_outline dl dt br{
		display: none;
	}
	.order_wrapper button.ordbtn{
		margin-top: 10px;
	}
	#hotel_detail #hotel_data{
		margin-top: 20px;
		width: 100%;
	}
	#hotellist_wrapper > .hotellist{
		width: calc((100% - 40px) / 2);
	}
	#hotellist_wrapper > .hotellist:not(:nth-of-type(-n+2)){
		margin-top: 50px;
	}
	#hotellist_wrapper > .hotellist:nth-of-type(3n-2){
		margin-left: 30px;
	}
	#hotellist_wrapper > .hotellist:nth-of-type(2n+1){
		margin-left: 0;
	}
}
@media screen and (max-width: 568px){
	#hotel_detail #hotel_text{
		width: calc(100% - 300px);
		font-size: 14px;
		font-size: 14rem;
	}
	.order_wrapper{
		width: 280px;
	}
	.order_outline dl dd{
		font-size: 21px;
		font-size: 21rem;
	}
	.order_outline ul li,
	.order_outline dl dd.caption{
		font-size: 12px;
		font-size: 12rem;
	}
	.order_wrapper button.ordbtn{
		font-size: 16px;
		font-size: 16rem;
	}
	.hotellist a figure{
		width: 100px;
	}
	.hotellist a dl{
		width: calc(100% - 110px);
	}
}
@media screen and (max-width: 567px){
	#hotel_detail #hotel_text{
		width: 100%;
	}
	.order_wrapper{
		width: 100%;
		margin: 10px 0 0 0;
	}
	#hotellist_wrapper > .hotellist{
		width: 100%;
		margin-left: 0 !important;
	}
	#hotel_data > table{
		border-spacing: 0;
	}
	#hotel_data > table tr{
		-js-display: flex;
		display: -ms-flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#hotel_data > table tr th{
		width: 30%;
		margin-top: 5px;
		font-size: 10px;
		font-size: 10rem;
		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;
	}
	#hotel_data > table tr th br{
		display: none;
	}
	#hotel_data > table tr td{
		margin-top: 5px;
	}
	#hotel_data > table > tbody > tr > td{
		padding: 0 0 0 15px !important;
		width: 70%;
		border-bottom: 1px solid #CCC;

	}
}
@media screen and (max-width: 567px){
	#hotel_data > table tr th{
		white-space: normal;
	}
	#hotel_data > table tr th br{
		display: block;
	}
}