@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------------------------------------------

   特定箇所指定

--------------------------------------------------------------------------------------------- */

#nagomi{
	margin-bottom: 75px;
}

@media screen and (max-width:550px) {

#nagomi{
	margin-bottom: 50px;
}
	
}

.fa-spa{
	color: #a8bf93;
	font-size: clamp(20px, 2vw, 24px);
}


/* 文様背景
------------------------------------------------------------*/
#chikurin{
	position: relative;
}
#sohi{
	position: relative;
}
#keiryu{
	position: relative;
}
#yutaki{
	position: relative;
}
#jusai{
	position: relative;
}
#sugi{
	position: relative;
}
#nagomi{
	position: relative;
}

.monyo{
	position: absolute;
	top: 25px;
	left: 0;
	width: 480px;
	height: 329px;
	background: url(../onsen-images/monyo.png) no-repeat 0 0;
}

@media screen and (max-width:950px) {

.monyo{
	left: -240px;
}
	
}

@media screen and (max-width:550px) {

.monyo{
	left: -125px;
	width: 320px;
	height: 319px;
	background: url(../onsen-images/monyo2.png) no-repeat 0 0;
}
	
}

@media screen and (max-width:400px) {

.monyo{
	left: -150px;
}
	
}

@media screen and (max-width:350px) {

.monyo{
	left: -175px;
}
	
}



/* ---------------------------------------------------------------------------------------------

   温泉動画

--------------------------------------------------------------------------------------------- */
.onsen-image{
	width: 100%;
	height: 100%;
}



/* ---------------------------------------------------------------------------------------------

   温泉基本情報

--------------------------------------------------------------------------------------------- */
.basic-info{
	width: 100%;
	padding: 50px 0;
	background: url(../onsen-images/japanese-paper_146.jpg) repeat 0 0;
}

.info{
	border-top: 0.5px solid #ccc;
}

.info th,.info td{
	vertical-align: middle;
	background: #fff;
}

.info th{
	padding: 15px;
	font-weight: normal;
	width: 25%;
	font-size: clamp(14px, 2vw, 16px);
	background: #ede4cd;
	border-top: 0.5px solid #ccc;
	border-left: 0.5px solid #ccc;
	border-bottom: 0.5px solid #ccc;
}

.info td{
	padding: 15px;
	font-size: clamp(13px, 2vw, 15px);
	border-right: 0.5px solid #ccc;
	border-bottom: 0.5px solid #ccc;
}

@media screen and (max-width:750px) {
	
.info{
	border-top: 0;
	border-bottom: 0.5px solid #ccc;
	border-left: 0.5px solid #ccc;
	border-right: 0.5px solid #ccc;
}

.info th{
	display: block;
	width: 100%;
	padding: 5px 15px;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
	
.info td{
	display: block;
	width: 100%;
	border-right: 0;
	border-bottom: 0;
}
	
}



/* ---------------------------------------------------------------------------------------------

   各7つ温泉メインビジュアル

--------------------------------------------------------------------------------------------- */
.each-main{
	width: 100%;
	height: 800px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 75px; 
}

@media screen and (max-width:1250px) {
	
.each-main{
	height: 600px;
}
	
}

@media screen and (max-width:750px) {
	
.each-main{
	height: 400px;
	margin-bottom: 50px;
}
	
}

@media screen and (max-width:500px) {
	
.each-main{
	height: 350px;
}
	
}



/* 竹林の湯
------------------------------------------------------------*/
.chikurin-main{
	background-image: url(../onsen-images/chikurin-main.png);
}


/* 双檜の湯
------------------------------------------------------------*/
.sohi-main{
	background-image: url(../onsen-images/sohi-main.png);
}


/* 渓流の湯
------------------------------------------------------------*/
.keiryu-main{
	background-image: url(../onsen-images/keiryu-main.png);
}


/* 湯滝の湯
------------------------------------------------------------*/
.yutaki-main{
	background-image: url(../onsen-images/yutaki-main.png);
}


/* 樹彩の湯
------------------------------------------------------------*/
.jusai-main{
	background-image: url(../onsen-images/jusai-main.png);
}


/* 杉の湯
------------------------------------------------------------*/
.sugi-main{
	background-image: url(../onsen-images/sugi-main.png);
}


/* なごみの湯
------------------------------------------------------------*/
.nagomi-main{
	background-image: url(../onsen-images/nagomi-main.png);
}




/* ---------------------------------------------------------------------------------------------

   About ※全共通

--------------------------------------------------------------------------------------------- */
.about-leftBox{
	float: left;
	width: 45%;
}

.about-rightBox{
	float: right;
	width: 45%;
}

.meal-about th,.meal-about td.re-td{
	font-size: clamp(14px, 2vw, 16px);
	border-bottom: 0.5px solid #ccc;
	padding: 10px 5px;
}

.meal-about th{
	font-weight: normal;
	text-align: left;
	width: 40%;
}

@media screen and (max-width:1050px) {

.about-leftBox{
	float: none;
	width: 100%;
}
.about-rightBox{
	float: none;
	width: 100%;
}
	
.meal-about{
	margin-top: 50px;
}
	
}




/* Slider ※全共通
------------------------------------------------------------*/

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:90%;
    margin:0 auto 75px auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 45%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 1px solid #666;/*矢印の色*/
    border-right: 1px solid #666;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

.slick-slider div{/*[slick.js] 最後のスライドまでいったら逆戻りしてしまうの対処法！*/
	transition: none;
}





/* 
------------------------------------------------------------*/

.dondokoyu-link {
	display: block;
	width: 100%;
	text-align: center;
	background-color: #C7B370;
	padding: 13px;
	box-sizing: border-box;
	color: #333;
}