@charset "UTF-8";
/* Wakamatsu Preserve */



/* おまじない */

*{
	margin: 0;
	padding: 0;
}

body{
	background-color: #B8B278;
	min-height: 100vh;
	position: relative;
}

main{
	font-family: "秀英明朝 M";

}


/* トップ画像フェード */

.top {
  position: relative;
  width: 100%;
  height: 95vh;
  z-index: 0;
}

.topimg{
	position: absolute;
	width: 100%;
	height: 97vh;
	object-fit: cover;
	opacity: 0;
	animation: change-img-anim 18s infinite;
}

.topimg:nth-of-type(1) {
  animation: change-img-anim-first 18s infinite;
	animation-delay: 0s;
}
.topimg:nth-of-type(2) {
	animation-delay: 3s;
}
.topimg:nth-of-type(3) {
	animation-delay: 6s;
}
.topimg:nth-of-type(4) {
	animation-delay: 9s;
}

.topimg:nth-of-type(5) {
	animation-delay: 12s;
}

.topimg:nth-of-type(6) {
	animation-delay: 15s;
}

@keyframes change-img-anim-first {
	0%{ opacity: 1;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

/* タイトル */

.title {
	z-index: 99;
	color: #FFFFFF;
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
  	transform: translate(-50%, -50%);
	font-family: "秀英明朝 M";
}

.title img{
	width: 60%;
}

.title p{
	padding-top: 3%;
}

/* 全体まーじん */

.wrapper{
	text-align: center;
	margin-left: 2%;
	margin-right: 2%;
}


/* 導入 */

.dounyu{
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 20%;
	padding-bottom: 20%;
}

.dounyu p{
	color: #3E1600;
	font-size: 13px;
	line-height: 200%;
}


/* サウナ、お部屋 */

.contents{
	overflow: hidden;
	padding-top: 0px;
	padding-bottom: 20%;
}

.photo{
	float: left;
	padding-right: 10%;
}

.photo img{
	position: absolute;
	width: 40%;
	height: auto;
}

.item{
	float: left;
	text-align: left;
	padding-left: 60%;
}

.item img{
	width: 10%;
	height: auto;
	padding-bottom: 2%;
}

.item p{
	color: #FFFFFF;
	font-size: 13px;
	word-break: keep-all;
	line-height: 180%;
}


.table{
	font-size: 13px;
	color: #FFFFFF;
	padding-bottom: 50px;
	line-height: 180%;
}

.table th{
	font-weight: normal;
	font-size: 13px;
	color: #FFFFFF;
	width: 260px;
}

/* 写真スライダーの設定 */
.slider img{
	width: 100%;
	float: left;
}

.slider{
	position: absolute;
	width: 40%;
	visibility: hidden;
	float: left;
}

.slider.slick-initialized{
	visibility: visible;
}

.slick-prev, .slick-next{
	z-index: 10;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slick-dots{
	bottom:0.5px;
	text-align: left;
}

.slick-dots li {
  margin: 3px; 
  width: 5px;
　height: 0.5px;
}

button {
  content:'■';
  background: none;
  border: none;
  outline: none;
  padding: 1px 1px;
  background-color:#B8B278;
}

.slick-dots li button:before {
  content:'■';
  font-size: 10px;
  width: 15px;
　height: 5px;
  opacity: 1;
  color:#B8B278;
}
.slick-dots li.slick-active button:before{
  color: #ECB41D;
}





/* メール、インスタ */

.contents2{
	overflow: hidden;
	padding-top: 10%;
	padding-bottom: 10%;
	vertical-align: middle;
}

.icon{
	float: left;
	padding-right: 0%;
	width: 40%;
}

.icon img{
	position: absolute;
	padding-top: 20px;
	width: 4%;
	margin-left: 12%;
}


.item2{
	float: left;
	padding-left: 60%;
	line-height: 150%;
}

.contents2 p{
	color: #FFFFFF;
	text-align: left;
	font-size: 13px;
}

.item3{
	float: left;
	padding-left: 60%;
	padding-top: 10px;
	line-height: 150%;
}


/* map */

.contents3{
	overflow: hidden;
	padding-top: 100px;
	padding-bottom: 10px;
}

.contents3 p{
	color: #FFFFFF;
	text-align: left;
	font-size: 13px;
}


.map{
	float: left;
	padding-right: 0%;
	width: 40%;
}

.map img{
	position: absolute;
	padding-top: 12px;
	width: 20%;
	padding-left: 0%;
}

/* Googleマップ*/

.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;/* アスペクト16/9の指定数値 */
	position: relative;
	text-align: right;
}


.gmap iframe {
	position: absolute;
	left: 46%;
	top: 0;
	height: 50%;
	width: 50%;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}


/* フッター*/

footer{
	width: 100%;
	position: fixed;/*←絶対位置*/
    bottom: 0; /*下に固定*/
	text-align: center;
	color: #FFFFFF;
	font-size: 10px;
	font-family: "秀英明朝 M";
}

.f_img{
	width: 226px;
	
	
}

.f_img img{
	position: absolute;
	left: 47.5%;
	width: 5%;
	bottom: 170%;
	transition: 0.5s;
}

/* 基本濃ゆい方は消えている */
.f_img img:nth-of-type(1) {
	opacity: 0;
}



/* ホバーしたら薄いの消す、濃ゆいの出す。type1が濃ゆい2が薄い */
.f_img:hover img:nth-of-type(2) {
	opacity: 0;
}

.f_img:hover img:nth-of-type(1) {
	opacity: 1;
}

footer p{
	top: 0px;
	padding-bottom: 0.3%;
	background-color: #B8B278;
}


/****************************************
共通テーマ
****************************************/

/* ここに共通で使用する要素を定義 */
*{
	margin: 0;
	padding: 0;
}

body{
	background-color: #B8B278;
	min-height: 100vh;
	position: relative;
}

main{
	font-family: "DNPShueiMinPr6-M";

}



/****************************************
タブレット用
****************************************/
@media screen and (min-width:641px) and ( max-width:1254px){
	
	.br-sp{
		display: none;
	}
	
	
	.contents{
	overflow: hidden;
	padding-top: 100px;
	padding-bottom: 100px;
	}

	.photo{
	float: left;
	padding-right: 10%;
	}

	.photo img{
	position: absolute;
	width: 40%;
	height: auto;
	}

	.item{
	float: left;
	text-align: left;
	padding-left: 60%;
	}

	.item img{
	width: 10%;
	height: auto;
	padding-bottom: 2%;
	}

	.item p{
	color: #FFFFFF;
	font-size: 13px;
	word-break:normal;
	line-height: 180%;
	}
	
	.table{
		display: none;
	}

	.item-sp{
		font-size: 13px;
		text-align: left;
		color: #FFFFFF;
	}


	

}


/****************************************
スマホ用
****************************************/
@media screen and (max-width:640px){
	
	
	
	.title {
		z-index: 99;
		color: #FFFFFF;
		position: absolute;
		text-align: center;
		top: 50%;
		left: 40%;
		transform: translate(-50%, -50%);
		font-family: "DNPShueiMinPr6-M";
	}

	.title img{
	width: 130%;
	}
	
	.title p{
		padding-left: 80px;
		font-size: 12px;
	}

	
	.dounyu{
	padding-top: 50%;
	padding-bottom: 50%;
	margin-left: 5%;
	margin-right: 5%;
	}

	.dounyu p{
		color: #3E1600;
		font-size: 11px;
		word-break: keep-all;
	}

	
	.br-sp{
		display: block;
	}
	
	
	/* 全体まーじん */
	.wrapper{
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
	padding-bottom: 100px;
	}

	
	
	/* サウナ・お部屋 */
	
	.contents{
	padding-top: 8	0px;
	padding-bottom: 30%;
	text-align: center;
	}
	
	
	.photo{
	}

	.photo img{
		width: 90%;
		height: auto;
	}
	
	.item{
		float: none;
		padding-left: 0%;
		text-align: left;
		padding-top: 280px;
	}

	.item img{
		text-align: left;
		width: 10%;
		height: auto;
	}

	.item p{
		text-align: left;
		color: #FFFFFF;
		font-size: 11px;
		word-break: break-all;
	}
	
	.item a{
		color: #FFFFFF;
	}

	
	.table{
		display: none;
	}
	
	.item-sp{
		font-size: 12px;
		text-align: left;
		color: #FFFFFF;
	}
	

	/* 写真スライダーの設定 */
	.slider img{
		max-width: 100%;
	}

	.slider{
		width: 90%;
		visibility: hidden;
	}

	
	/* メール、インスタ */

	.contents2{
		padding-top: 60px;
		padding-bottom: 20%;
		vertical-align: inherit;
		text-align: center;
	}

	.icon{
		float: none;
		text-align: center;
		padding-right: 0%;
		width: 90%;
	}

	.icon img{
		padding-top: 0px;
		width: 10%;
		margin-left: 0%;
		margin-right: 0%;
	}


	.item2{
		float: none;
		padding-left: 0px;
	}

	.contents2 p{
		padding-top: 15%;
		color: #FFFFFF;
		text-align: center;
		font-size: 11px;
	}

	
	.item3{
		float: none;
		padding-left: 0px;
		padding-top: 0px;
		font-size: 11px;
	}


	/* map */

	.contents3{
		padding-top: 80px;
		padding-bottom: 10px;
	}

	.contents3 p{
		color: #FFFFFF;
		text-align: center;
		font-size: 11px;
		padding-top: 60%;
	}


	.map{
		float: none;
		text-align: left;
		width:90%;
	}

	.map img{
		padding-top: 12px;
		width: 60%;
	}

	/* Googleマップ*/

	.gmap {
		height: 0;
		padding-bottom: 56.25%;/* アスペクト16/9の指定数値 */
		position: relative;
		text-align: center;
	}


	.gmap iframe {
		position: absolute;
		left: 0%;
		top: 0;
		height: 100%;
		width: 100%;
	  -webkit-filter: grayscale(100%);
	  -moz-filter: grayscale(100%);
	  -ms-filter: grayscale(100%);
	  -o-filter: grayscale(100%);
	  filter: grayscale(100%);
	}

	
	footer{
	width: 100%;
	position: fixed;/*←絶対位置*/
    bottom: 0; /*下に固定*/
	text-align: center;
	color: #FFFFFF;
	font-size: 12px;
	font-family: "DNPShueiMinPr6-M";
	}

	.f_img{
		width: 226px;

	}

	.f_img img{
		position: absolute;
		left: 44.5%;
		width: 12%;
		bottom: 120%;
		transition: 0.5s;
	}
	
}



/****************************************
PC用
****************************************/
@media screen and (min-width: 1255px){
	
/* ここにPCで使用する要素を定義 */
	
	.item-sp{
		display: none;
	}	
	
	.br-sp{
		display: none;
	}
	
	
	
	
	
	
}