@charset "UTF-8";
/* ===================================================================
CSS information

 file name  : hotspring.css
 author     : Ability Consultant
 style info : 温泉
=================================================================== */
.con_outlook, .box_hour, .con_faci {
	max-width: 1200px;
	margin: auto;
}
@media only screen and (max-width: 1024px) {
  .con_outlook, .box_hour, .con_faci {
		width: 95%;
  }
}

.con_outlook:after, .box_hour:after, .con_faci:after {
	content: "";
	display: table;
	clear: both;
}

/* Hover animation */
.box_slide {
	width: 100%;
	float: left;
}
.box_slide * {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_slide {
		width: 54%;
  }
}
@media only screen and (max-width: 767px) {
  .box_slide {
		width: 100%;
		float: none;
  }
}
@media only screen and (max-width: 767px) {
  .box_slide .slide li img {
		width: 100%;
  }
}
.box_slide .thumb {
	text-align: center;
	margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .box_slide .thumb {
		margin-top: 4%;
  }
}
.box_slide .thumb li {
	display: inline-block;
	margin: 0 7px;
}
@media only screen and (max-width: 767px) {
  .box_slide .thumb li {
		width: 20%;
		margin: 0 1%;
  }
}
.box_slide .thumb li a {
	display: block;
	border: 4px solid #676767;
}
.box_slide .thumb li a.active {
	border-color: #676767;
}
@media only screen and (max-width: 767px) {
  .box_slide .thumb li a img {
		width: 100%;
  }
}

/* -----------------------------------------------------------
	main image
----------------------------------------------------------- */
#contents:before {
	background-image: url(../hotspring/images/img_main.jpg);
}

/* -----------------------------------------------------------
	con_outlook
----------------------------------------------------------- */
.con_outlook .box_desc {
	margin-bottom: 60px;
}
.con_outlook .box_desc .txt {
	text-align: center;
	margin-bottom: 20px;
}
.con_outlook .box_desc .att {
	margin: 0 auto;
	text-align: center;
	color: #fff;
	background: #676767;
	padding: 20px;
	width: 80%;
}
.con_outlook .box_price {
	background: #ebebeb;
	padding: 20px;
	width: 80%;
	text-align: center;
	margin: 0 auto 50px;
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_price {
		width: 100%;
  }
}
.con_outlook .box_price p span {
	font-size: 124%;
}
.con_outlook .box_slide {
	width: 100%;
	margin-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_outlook .box_slide {
		margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_slide {
		margin-bottom: 50px;
  }
}
.con_outlook .box_slide * {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_outlook .box_slide {
		width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_slide {
		width: 100%;
		float: none;
  }
}
.con_outlook .box_slide .slick-dots {
	text-align: center;
	padding-top: 20px;
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_slide .slick-dots {
		padding-top: 5px;
		overflow: hidden;
		*zoom: 1;
  }
}
.con_outlook .box_slide .slick-dots li {
	display: inline-block;
	margin: 0 10px;
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_slide .slick-dots li {
		width: 30%;
		margin: 0 1.5%;
		background: none;
  }
}
.con_outlook .box_slide .slick-dots li button {
	display: block;
	width: 118px;
	height: 0;
	margin-bottom: 0;
	padding: 0;
	padding-top: 62px;
	overflow: hidden;
	border: none;
	background-repeat: no-repeat;
	background-size: 100%;
}
@media only screen and (min-width: 1025px) {
  .con_outlook .box_slide .slick-dots li button:hover {
		cursor: pointer;
  }
}
@media print {
  .con_outlook .box_slide .slick-dots li button:hover {
		cursor: pointer;
  }
}
.ie8 .con_outlook .box_slide .slick-dots li button:hover {
	cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_slide .slick-dots li button {
		margin: 0;
		width: 100%;
		padding-top: 53%;
		background-size: contain;
  }
}
.con_outlook .box_slide .slick-dots li button:focus {
	outline: none;
}
.con_outlook .box_slide .slick-dots li.slick-active button {
	border: 5px solid #676767;
	background-color: #676767;
}
@media only screen and (max-width: 767px) {
  .con_outlook .box_slide .slick-dots li.slick-active button {
		border: 2px solid #676767;
  }
}
.con_outlook .box_slide .slick-dots li#slick-slide00 button {
	background-image: url(../hotspring/images/thumb_sld1_1.jpg);
}
.con_outlook .box_slide .slick-dots li#slick-slide01 button {
	background-image: url(../hotspring/images/thumb_sld1_2.jpg);
}
.con_outlook .box_slide .slick-dots li#slick-slide10 button {
	background-image: url(../hotspring/images/thumb_sld2_1.jpg);
}
.con_outlook .box_slide .slick-dots li#slick-slide11 button {
	background-image: url(../hotspring/images/thumb_sld2_2.jpg);
}

/* -----------------------------------------------------------
	box_hour
----------------------------------------------------------- */
.box_hour {
	margin-bottom: 80px;
	border: 1px solid #4d5489;
	padding: 1% 2%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_hour {
		margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .box_hour {
		margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .box_hour {
		padding: 3%;
  }
}
.box_hour .box_l {
	float: left;
	width: 70%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_hour .box_l {
		width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  .box_hour .box_l {
		width: 100%;
  }
}
.box_hour .box_l .st_line {
	position: relative;
	margin-bottom: 10px;
	font-size: 154%;
}
.box_hour .box_l .st_line:before {
	content: '';
	position: absolute;
	top: 50%;
	left: -40px;
	width: 15px;
	height: 2px;
	background: #676767;
}
.box_hour .box_l .txt {
	line-height: 1.8em;
}
.box_hour .box_r {
	float: left;
	width: 30%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_hour .box_r {
		width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  .box_hour .box_r {
		width: 100%;
  }
}
.box_hour .box_r .btn_02 {
	margin-top: 15px;
}
.box_hour .box_r .btn_02 a {
	width: 350px;
	padding: 2%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_hour .box_r .btn_02 a {
		width: 280px;
  }
}
@media only screen and (max-width: 767px) {
  .box_hour .box_r .btn_02 a {
		max-width: 280px;
  }
}

/* -----------------------------------------------------------
	con_faci
----------------------------------------------------------- */
.con_faci {
	margin-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_faci {
		margin-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .con_faci {
		margin-bottom: 70px;
  }
}

@media only screen and (max-width: 767px) {
  #move_element_01 {
		display: none;
  }
}

#move_element_cloned_01 {
	margin-bottom: 0.5em;
}
@media only screen and (min-width: 768px) {
  #move_element_cloned_01 {
		display: none;
  }
}
@media print {
  #move_element_cloned_01 {
		display: none;
  }
}
.ie8 #move_element_cloned_01 {
	display: none;
}