@charset "utf-8";

/* Spa */

/* メイン画像
---------------------------------------------------------------------------*/
.block-mainimg {
	background-image: url(../img/spa/fig-mainimg.jpg);
}
@media screen and (max-width: 768px){
	.block-mainimg {
		background-image: url(../img/spa/fig-mainimg-sp.jpg);
	}
}

/* アンカー背景位置
---------------------------------------------------------------------------*/
.block-anchor.bg-uroko {
	background-position: center -40px;
}
@media screen and (max-width: 768px){
	.block-anchor.bg-uroko {
		background-position: center top;
	}
}

/* 共通
---------------------------------------------------------------------------*/
.inner-spa {
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	padding-top: 60px;
}
.fig-spa {
	width: 50%;
}
.fig-spa img {
	width: 100%;
	height: 451px;
	object-fit: cover;
	object-position: right center;
	font-family: "object-fit: cover; object-position: right center;";
}
.f-reverse .fig-spa img {
	object-fit: cover;
	object-position: left center;
	font-family: "object-fit: cover; object-position: left center;";
}
.tx-spa {
	width: 50%;
}
.tx-spa > * {
	max-width: 470px;
	width: 100%;
	margin-right: auto;
	margin-left: 40px;
}
.f-reverse .tx-spa > * {
	margin-right: 40px;
	margin-left: auto;
}
@media screen and (max-width: 768px){
	.inner-spa {
		padding-top: 8vw;
		padding-left: 3vw;
		padding-right: 3vw;
	}
	.tx-spa,
	.f-reverse .tx-spa {
		margin: 3vw 0 0 0;
		color: #000000;
	}
	.f-reverse .tx-spa > *,
	.tx-spa > * {
		margin-left: 0;
		margin-right: 0;
	}
	.fig-spa img {
		height: auto;
	}
}


/* Bathhouse and open-air bath
---------------------------------------------------------------------------*/
.cnts-openair .bg-upperdeepest {
	background: linear-gradient(180deg,#000000 0%,#000000 650px,#FFFFFF 650px,#FFFFFF 100%);
	color: #FFFFFF;
}
.box-figs-openair {
	padding-top: 60px;
	padding-bottom: 60px;
}
@media screen and (max-width: 768px){
	.cnts-openair .bg-upperdeepest {
		background: linear-gradient(180deg,#000000 0%,#000000 126vw,#FFFFFF 126vw,#FFFFFF 100%);
	}
	.cnts-openair .tx-spa, .f-reverse .tx-spa {
		color: #FFFFFF;
	}
	.box-figs-openair {
		padding-top: 5vw;
		padding-bottom: 8vw;
	}
}

/* Private bath
---------------------------------------------------------------------------*/
.cnts-private .inner-spa {
	padding-bottom: 60px;
}
@media screen and (max-width: 768px){
	.cnts-private .bg-upperdeepest {
		background: linear-gradient(180deg,#000000 0%,#000000 120vw,#FFFFFF 120vw,#FFFFFF 100%);
	}
	.cnts-private .inner-spa {
		padding-bottom: 8vw;
	}
	.cnts-private .tx-spa .lead {
		color: #FFFFFF;
	}
	.fig-mini-private {
		margin-top: 3vw;
	}
}

/* 客室露天風呂
---------------------------------------------------------------------------*/
.cnts-roten {
	padding-bottom: 60px;
}
.cnts-roten .lead {
	margin-top: 40px;
}
@media screen and (max-width: 768px){
	.cnts-roten {
		padding-bottom: 8vw;
	}
	.cnts-roten .lead {
		margin-top: 5vw;
	}
}

/* Bathing procedure
---------------------------------------------------------------------------*/
.cnts-bathing .bg {
	padding-bottom: 50px;
}
.cnts-bathing .bg-uroko {
	padding-top: 50px;
	padding-bottom: 35px;
	margin-bottom: 40px;
}
.block-bathing {
	position: relative;
	padding-bottom: 50px;
}
.block-bathing::after {
	position: absolute;
	left: calc(50% - 80px);
	bottom: -29px;
	content: "";
	border-top: 30px solid transparent;
	border-bottom: 0 solid transparent;
	border-right: 80px solid transparent;
	border-left: 80px solid transparent;
	z-index: 90;
}
.block-bathing:last-of-type::after {
	display: none;
}
.bg-thinest.block-bathing::after {
	border-top-color: #FFFFFF;
}
.bg-thin.block-bathing::after {
	border-top-color: #EDEDED;
}
.ttl-bathing p {
	margin-right: 10px;
	font-size: .25rem;
	line-height: 120%;
	font-weight: 700;
}
.ttl-bathing strong {
	font-size: .6rem;
	line-height: 120%;
	font-weight: 700;
}
.tx-bathing {
	width: 305px;
	margin-right: 30px;
}
.fuki-bathing {
	width: 186px;
	margin-right: 40px;
	padding: 30px;
	position: relative;
	background-color: #84762F;
	color: #FFFFFF;
}
.fuki-bathing::after {
	position: absolute;
	right: -19px;
	top: calc(50% - 19px);
	content: "";
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-right: 0 solid transparent;
	border-left: 20px solid #84762F;
}
.box-bathing01 .fuki-bathing {
	width: 280px;
}
.box-bathing04 .fuki-bathing {
	margin-right: 0;
	margin-left: 40px;
}
.box-bathing04 .fuki-bathing::after {
	right: auto;
	left: -19px;
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-left: 0 solid transparent;
	border-right: 20px solid #84762F;
}
@media screen and (max-width: 768px){
	.cnts-bathing .bg {
		padding-bottom: 5vw;
	}
	.cnts-bathing .bg-uroko {
		margin-bottom: 5vw;
		padding-top: 5vw;
		padding-bottom: 4vw;
	}
	.block-bathing {
		padding-bottom: 8vw;
	}
	.ttl-bathing p {
		margin-right: 3vw;
		font-size: 4.5vw;
	}
	.ttl-bathing strong {
		font-size: 8vw;
	}
	.tx-bathing,
	.fuki-bathing,
	.box-bathing04 .fuki-bathing {
		margin-bottom: 3vw;
		margin-right: 0;
		margin-left: 0;
	}
	.fuki-bathing {
		margin-top: 3vw;
		margin-right: 0;
		padding: 3vw;
		text-align: center;
	}
	.fuki-bathing::after,
	.box-bathing04 .fuki-bathing::after {
		right: calc(50% - 4vw);
		left: auto;
		top: auto;
		bottom: -2.9vw;
		border-bottom: 0px solid transparent;
		border-top: 3vw solid #84762F;
		border-right: 4vw solid transparent;
		border-left: 4vw solid transparent;
	}
	.box-bathing04 .fuki-bathing {
		margin-top: 6vw;
	}
	.box-bathing04 .fuki-bathing::after {
		bottom: auto;
		top: -2.9vw;
		border-top: 0px solid transparent;
		border-bottom: 3vw solid #84762F;
	}
	.fig-bathing {
		text-align: center;
	}
	.block-bathing::after {
		position: absolute;
		left: calc(50% - 8vw);
		bottom: -4.8vw;
		content: "";
		border-top: 5vw solid transparent;
		border-bottom: 0 solid transparent;
		border-right: 8vw solid transparent;
		border-left: 8vw solid transparent;
		z-index: 90;
	}
}

/* Basic Information
---------------------------------------------------------------------------*/
.cnts-basice {
	padding-top: 60px;
	padding-bottom: 60px;
}
@media screen and (max-width: 768px){
	.cnts-basice {
		padding-top: 8vw;
		padding-bottom: 8vw;
	}
}