@charset "UTF-8";

/*root関数-------------------------------------*/
:root {
	/* root関数：color */
	--color-main1: #E73562;
	--color-main1-L: #FFEFF3;
	--color-main2: #329E97;
	--color-main2-L: #DFF0EF;
	--color-main3: #FEF894;
	--color-main3-L: #FFFCCA;
	--color-main4: #BEA27A;
	--color-main5: #FFE3EB;
	--color-main6: #ffff00;
	--color-dark: #000;
	--color-light: #fff;
	--color-link: #E73562;
	--color-ssp: #847F4F;
	--color-ranma-otoko: #0081CC;
	--color-ranma-onna: #E60012;



	/* root関数：fonts */
	--font-main: "M PLUS Rounded 1c", sans-serif;
	/* --font-deco: "Kaisei Decol", serif; */
	--font-notes: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
	--font-gothic: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
	--font-en:"Coiny", system-ui;

}


/*共通要素*/
body {
	font-family: var(--font-main);
	font-weight: 500;
	font-style: normal;
	line-height: inherit;
	color: var(--color-dark);
	font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem);
	background: var(--color-light);
}

/*Loading ここから*/
/* Loading Block */
#loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: var(--color-dark);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	display: grid;
	place-content: center;
	place-items: center;
}

/* Hide Loading Block  */
.loaded {
	opacity: 0;
	visibility: hidden;
}

/* loading anime  クラスはloaderで*/
.loader {
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(farthest-side, #0081CC 94%, #0000),
		radial-gradient(farthest-side, #6cb6e1 94%, #0000),
		#0081CC;
	background-position: center;
	background-repeat: no-repeat;
	animation: l4 1.5s infinite;
}

@keyframes l4 {
	0% {
		background-size: 0 0, 0 0
	}

	30%,
	50% {
		background-size: 0 0, 120% 120%
	}

	80%,
	100% {
		background-size: 120% 120%, 120% 120%
	}
}

/*Loading ここまで*/


#container {
	margin-inline: auto;
}

.fc-key1 {
	color: var(--color-main1);
}

.fc-key2 {
	color: var(--color-main2);
}

.fc-key3 {
	color: var(--color-main3);
}

.fc-key4 {
	color: var(--color-main4);
}

.fc-key5 {
	color: var(--color-main5);
}

.fc-key6 {
	color: var(--color-main6);
}


.fc-hanten {
	color: var(--color-light);
}

.fc-hanten2 {
	color: var(--color-dark);
}


.ff-en {
	font-family: var(--font-en);
}

a {
	color: var(--color-link);
	text-decoration: underline;
	transition: .5s;
}

a:hover {
	color: var(--color-link);
	text-decoration: none;
	/* opacity: .7; */
}

a:hover img {
	box-shadow: none;
	filter: none;

}

.notes {
	text-align: justify;
	font-family: var(--font-notes);
	width: fit-content;
	padding: 0;
	margin: 0 auto;
}


@media (min-width:768px) {
	.notes {
		box-sizing: initial;
		/*padding分を初期化*/
		margin: 30px auto 0 auto;
		max-width: 800px;
	}
}

ul.notes li {
	font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
	font-weight: normal;
	margin: 0.5em auto 0 auto;
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	text-align: justify;
}


#page-top img {
	position: fixed;
	width: 45px;
	bottom: 20px;
	right: 10px;
	z-index: 99999;
	transition: .3s;
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
}

@media (min-width:768px) {
	#page-top img {
		width: 55px;
		bottom: 40px;
		right: 20px;
	}
}

#page-top a img:hover {
	transform: scale(1.1);
}

.img-box-shadow {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
	margin-bottom: 8px;
}

.img-filter-shadow {
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
}

.txt-shadow{
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);;
}

.img-radius {
	border-radius: clamp(12px, 7.775px + 1.127vw, 24px);
}

.wide-max400,
.wide-max500,
.wide-max600,
.wide-max700,
.wide-max800,
.wide-max900,
.wide-max1000 {
	margin-inline: auto;
}

.wide-max400 {
	max-width: 400px;
}

.wide-max500 {
	max-width: 500px;
}

.wide-max600 {
	max-width: 600px;
}

.wide-max700 {
	max-width: 700px;
}

.wide-max800 {
	max-width: 800px;
}

.wide-max900 {
	max-width: 900px;
}

.wide-max1000 {
	max-width: 1000px;
}

/*入会関連-------------------------------------*/
.nyukai {
	/* background: var(--color-light); */
	/* border: 2px solid var(--color-ssp); */
	/* padding: 1.5em; */
	font-family: var(--font-main);
	margin: 0 auto 1em;
	color: var(--color-dark);
}

@media (min-width:768px) {
	.nyukai {
		max-width: 700px;
		/* padding: 2em; */

	}
}

.btn-nyukai a {
	display: block;
	font-family: var(--font-main);
	font-size: 1.6rem;
	text-align: center;
	text-decoration: none;
	width: 60vw;
	max-width: 280px;
	margin: 0 auto;
	padding: 1em 0;
	background: var(--color-ssp);
	color: var(--color-light);
	border-radius: 100vmax;
	transition: 0.5s;
	/* font-weight: 500; */
}


.btn-nyukai a:hover {
	outline-offset: 0px;
	transform: scale(1.1);
}


/* アイテム紹介-------------------------------------*/
.item-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	justify-content: center;
	margin: 2em auto;
}

@media (min-width:768px) {
	.item-wrapper {
		max-width: 800px;
		gap: 40px;

	}
}

.item-name {
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	margin: .5em;
}

.item-price {
	font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
}

.item-size,.item-material {
	/* font-family: var(--font-gothic); */
	font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
	font-weight: 400;
	line-height: 1.2;
	margin-top: .5em;
}

.item-size::before {
	content: "［サイズ］";
	margin-right: .5em;
}

.item-material:before {
	content: "［素材］";
	margin-right: .5em;
}


.item-ingredients {
	/* font-family: var(--font-gothic); */
	font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem);
	font-weight: 400;
	line-height: 1.2;
		word-break: keep-all;
}

.item-ingredients::before {
	content: "〈使用材料〉";
	display: block;
	margin: 1em 0 .5em;
}




/* KV-------------------------------------*/
.img-kv {
	margin: 0 auto;
	width: 100vw;
}

.img-kv img {
	object-fit: contain;
}


/*sec共通-------------------------------------*/
.sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: clamp(40px, 3vw, 60px) clamp(15px, 6vw, 80px);
	text-align: center;
}

/*sec-intro------------------------------------*/
#sec-intro{
	background-image: url(../img/bg_dot_30.webp);
	background-repeat: repeat;
	background-color: var(--color-main4);
}



/*sec-room-------------------------------------*/
#sec-room {
	background: url(../img/bg_abstract_pink.webp);
	background-color: var(--color-main3);
	background-repeat: repeat-y;
	background-size: contain;
}

#sec-room .sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 15px 40px;
	text-align: center;
}

@media (min-width:768px) {
	#sec-room.sec-container {
		padding: 0 0 60px;
	}
}

.room_period {
	background: var(--color-main2);
	padding: clamp(30px, 3vw, 60px) clamp(20px, 6vw, 80px);
	margin: 0 calc(50% - 50vw)  clamp(30px, 3vw, 60px);
}

.period {
	font-family: var(--font-en);
	font-size: clamp(1.8rem, 1.166rem + 2.704vw, 3.6rem);
	color: var(--color-light);
	text-transform: capitalize;
}

.period span {
	font-size: 130%;
}

.btn-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	margin: 1em auto .5em;
}

@media (min-width:480px) {
.btn-wrapper  {
		display: flex;
		flex-direction: row;
		gap: 30px;
		margin: 2em auto .5em;
	}
}

.btn-wrapper  img {
	max-width: 70vw;
}

@media (min-width:768px) {
.btn-wrapper img {
		max-width: 360px;
	}
}

.btn-wrapper a img  {
		filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.4));
		transition: .2s ease-in;
}

.btn-wrapper a:hover img  {
		filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
		transform: scale(1) translate(3px, 3px);
}


.room_detail_wrapper{
	background: var(--color-light);
	border-radius: clamp(20px, 1.5vw, 30px);
	max-width: 1000px;
	position: relative;
	padding: clamp(40px, 2vw, 60px) clamp(15px, 6vw, 80px);
	/* ↓タイトル画像を上にはみ出し */
	margin-top: clamp(60px, 3vw, 90px);
}


/* メインタイトル */
.ttl-main{
	position: absolute;
	top: clamp(-40px, -2vw, -60px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	line-height: 1;
}

.ttl-main img{
	display: block;
	width: clamp(300px, 80vw, 900px);
	height: auto;
}

/* コンテンツ全体をタイトル画像の下まで下げる */
.room_detail_inner{
padding-top:clamp(50px, 6vw, 110px);
}

/* サブタイトル */
.sub-ttl, .sub-ttl2{
	text-align: center;
}

.sub-ttl img{
	width: 60vw;
	height: auto;
	max-width: 320px;
	margin-block: clamp(30px, 3vw, 60px);
}

.sub-ttl2 img{
	width: 75vw;
	height: auto;
	max-width: 650px;
	 	margin-block: clamp(40px, 4vw, 80px);
}


.refer_wrapper_member,
.refer_wrapper_ippan{
	padding: clamp(12px, 3vw, 40px);
	border-radius: 20px;
	margin: clamp(15px, 3vw, 40px) auto;
}

.refer_wrapper_member{
		border: 4px solid var(--color-main1);
		background: var(--color-main1-L);
}

.refer_wrapper_ippan{
		border: 4px solid var(--color-main2);
		background: var(--color-main2-L);
}

.room-price{
	font-family: var(--font-en);
	font-size: clamp(2.8rem, 2.518rem + 1.202vw, 3.6rem);
}

.amenity-wrapper{
	margin:clamp(30px, 3vw, 60px) auto;
	max-width: 800px;
	display: grid;
	gap: clamp(40px, 25.915px + 3.756vw, 80px);
	grid-template-columns: repeat(1, 1fr);
	justify-content: center;
}

@media (min-width:768px){
	.amenity-wrapper{
	display: grid;
		grid-template-columns: repeat(2, 1fr);
			justify-content: space-between;

	}
}


#sec-drink {
	background: url(../img/bg_abstract_blue.webp);
	background-color: var(--color-main5);
	background-repeat: repeat-y;
	background-size: contain;
	border-top: 8px solid var(--color-main4);
}

#sec-drink .sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 20px 15px 30px;
	text-align: center;
}

@media (min-width:768px) {
	#sec-drink .sec-container {
		padding: 60px 0;
	}
}










/*版権表記-------------------------------------*/
#publisher {
	/* color: var(--color-light); */
	padding: 2em 0 1em;
	background: var(--color-main3);
}

#publisher img {
	width: 70vw;
	max-width: 360px;
}


.publisher-site {
	font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem);
	margin: 2em 0;
}

.publisher-site a {
	color: var(--color-dark);
	text-decoration: underline;
}

.publisher-name {
	font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem);
}

/*footer-------------------------------------*/
footer {
	font-family: var(--font-main);
	color: var(--color-light);
	padding: 2em 1em;
	margin: 0 auto;
	text-align: center;
	background: var(--color-main2);
	/* border-top: 1px solid var(--color-light); */
}

.hotel-name {
	text-align: center;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.4;
}

@media (min-width:768px) {
	.hotel-name {
		font-size: 2.2rem;
	}
}

.sns-nameE {
	text-align: center;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1.4;
}

@media (min-width:768px) {
	.sns-nameE {
		font-size: 3rem;
	}
}

.sns-nameJ {
	text-align: center;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.4;
}

@media (min-width:768px) {
	.sns-nameJ {
		font-size: 2.2rem;
	}
}

.sns-ico-set {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin: 20px auto 30px auto;
}


.sns-ico-set>li>span {
	color: var(--color-light);
	display: block;
	font-family: var(--font-gothic);
	line-height: 1.2;
	font-weight: 400;
	font-size: clamp(1.1rem, 1.065rem + 0.15vw, 1.2rem);
	margin-top: .5em;
}

@media (min-width:768px) {
	.sns-ico-set {
		gap: 30px;
	}
}

.sns-ico-set img {
	width: calc(100vw / 10);
	max-width: 40px;
	height: auto;
}

@media (min-width:768px) {
	.sns-ico-set img {
		width: 50px;
	}
}

.notes-foot {
	font-size: 1.3rem;
	line-height: 1.6;
	margin: 0 auto;
	width: fit-content;
}

@media (min-width:768px) {
	.notes-foot {
		font-size: 1.4rem;
		max-width: 800px;
		text-align: center;
	}
}

.hotel-links {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: 20px 0 20px 0;
}

@media (min-width:768px) {
	.hotel-links {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
}

.hotel-links a {
	display: inline-block;
	padding: 0 1em;
	color: var(--color-light);
	text-decoration: none;
	transition: .3s ease-in-out;
	margin: 5px 0;
}

@media (min-width:768px) {
	.hotel-links a:first-of-type {
		margin: 0;
		border-left: 1px solid var(--color-light);
		border-right: 1px solid var(--color-light);
	}
}

.hotel-links a:hover {
	color: var(--color-main6);
}

.copyright {
	text-align: center;
	font-size: 1.2rem;
}

@media (min-width:768px) {
	.copyright {
		font-size: 1.4rem;
	}
}