@charset "UTF-8";

/*root関数-------------------------------------*/
:root {
	/* root関数：color */
	--color-main1: #FF8808;
	--color-main2: #01FCF5;
	--color-main3: #457E7E;
	--color-main4: #003231;
	--color-dark: #000;
	--color-light: #fff;
	--color-link: #FF8808;
	--color-ssp: #847F4F;
	--color-thirteen: #4C3C3C;
	--color-thirteen-L: #755C5C;
	--color-stellea: #00956E;
	--color-stellea-L: #A5E6DA;
	--color-Adam: #32B9FF;
	--color-Adam-L: #99DDFF;
	--color-Jeanne: #FFE050;
	--color-Jeanne-L: #FFEC99;



	/* root関数：fonts */
	--font-main: "Local Noto Sans JP", "Noto Sans JP", 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: "Chakra Petch", sans-serif;

}


/*共通要素*/
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, #01FCF5 94%, #0000),
		radial-gradient(farthest-side, #94e9e6 94%, #0000),
		#01FCF5;
	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-Jeanne-L);
}

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

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

/* .ff-deco {
	font-family: var(--font-deco);
} */

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

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

a:hover {
	color: var(--color-link);
	text-decoration: underline;
	/* 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:834px) {
	.notes {
		box-sizing: initial;
		/*padding分を初期化*/
		margin: 30px auto 0 auto;
		max-width: 700px;
	}
}

ul.notes li {
	font-size: 1.4rem;
	font-weight: 400;
	margin: 0.5em auto 0 auto;
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	text-align: justify;
}

@media (min-width:834px) {

	ul.notes li {
		font-size: 1.4rem;
	}
}

#page-top img {
	position: fixed;
	width: 45px;
	bottom: 20px;
	right: 10px;
	z-index: 99999;
	transition: .3s;
}

@media (min-width:834px) {
	#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));
}

.img-radius {
	border-radius: clamp(20px, 12.958px + 1.878vw, 40px);
}

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

.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;
	margin: 40px auto 0 auto;
	font-family: var(--font-main);
	margin: 2em auto;
	color: var(--color-blk);
}

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

	}
}

.btn-nyukai a {
	display: block;
	font-family: var(--font-main);
	font-size: 1.8rem;
	text-align: center;
	text-decoration: none;
	width: 70vw;
	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: 600;
}

@media (min-width:834px) {
	.btn-nyukai a {
		max-width: 320px;
		padding: 1.2em 0;
	}
}

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

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

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


/*sec共通-------------------------------------*/
.sec-container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 20px 40px;
	text-align: center;
}

@media (min-width:834px) {
	.sec-container {
		padding: 0 0 80px;
	}
}


/*sec-intro-------------------------------------*/
#sec-intro {
	background: url(../img/bg_intro.webp);
	background-repeat: repeat;
}

#sec-intro .sec-container {
		margin: 0 auto;
	padding: 60px 20px;
	text-align: center;
}
@media (min-width:834px){
	#sec-intro .sec-container {
			padding: 80px 0;
	}
}

.main-copy {
	background-image: url(../img/bg_logo_.webp);
	background-repeat: no-repeat;
	background-size: 300px;
	background-position: center center;
}

/*sec-main-------------------------------------*/
#sec-main {
	background-image: url(../img/bg_main.webp);
	background-repeat: repeat-y;
	background-size: contain;
}

.ttl-main {
	margin-inline: calc(50% - 50vw);
	background-image: url(../img/bg_ttl-sec.webp);
	background-repeat: repeat;
	color: var(--color-light);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	padding: clamp(1rem, 0.296rem + 3.005vw, 3rem);
	border-bottom: 4px solid var(--color-dark);
	position: relative;
	margin-bottom: clamp(30px, 12.394px + 4.695vw, 80px);
}

.ttl-main::after {
	position: absolute;
	content: "";
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top: clamp(24px, 17.662px + 1.69vw, 42px) solid var(--color-dark);
	border-right: clamp(24px, 17.662px + 1.69vw, 42px) solid transparent;
	border-left: clamp(24px, 17.662px + 1.69vw, 42px) solid transparent;
}


.ttl-main p {
	font-size: clamp(3rem, 2.296rem + 3.005vw, 5rem);
	text-transform: uppercase;
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: .2em;
}


.ttl-main h2 {
	font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem);
	font-weight: 700;
	margin-bottom: .5em;
}

.sub-ttl {
	background-image: url(../img/bg_ttl.webp);
	background-repeat: no-repeat;
	background-size: clamp(300px, 236.620px + 16.901vw, 480px);
	background-position: center center;
	padding: 2em 1em;
	margin-block: 2em 0;
}

.sub-ttl p {
	font-size: clamp(2.8rem, 2.166rem + 2.704vw, 4.6rem);
	text-transform: uppercase;
	font-family: var(--font-en);
	font-weight: 700;
	line-height: 1.2;
}

.sub-ttl h3 {
	font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem);
	font-weight: 700;
	margin-bottom: .5em;
}

.period {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(2rem, 1.437rem + 2.404vw, 3.6rem);
	color: var(--color-main1);
	text-transform: capitalize;
}

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

.ttl-shubetsu1,
.ttl-shubetsu2 {
	background: var(--color-dark);
	color: var(--color-light);
	font-weight: 600;
	font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem);
	padding: .4em;
	border-left: 8px solid;
	border-right: 8px solid;
	margin: 1em 0 .5em;
}

.ttl-shubetsu1 {
	border-color: var(--color-main2);
}

.ttl-shubetsu2 {
	border-color: var(--color-main1);
	margin-top: 3em;
}

.number-price {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(2.8rem, 2.307rem + 2.103vw, 4.2rem);
	color: var(--color-main1);
}

.btn-block {
	margin: 1em auto;
}

.btn-block img {
	width: 80vw;
	max-width: 360px;
	margin-bottom: .5em;
}


.bf-tokuten {
	padding: 1em;
	border: 2px solid var(--color-main3);
	background: var(--color-light);
	max-width: 700px;
	margin: 2em auto;
}


.item-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	justify-content: center;
	margin: 2em auto;
}

@media (min-width:834px) {
	.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 {
	/* 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-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;
}

@media (min-width:834px) {}


.notice-wrapper {
	max-width: 1000px;
	background: #E0F5FF;
	padding: 0 1em 1em;
	box-shadow: 0px 0px 8px rgba(3, 117, 175, 0.4);
	margin: 3em auto;
}

@media (min-width:834px) {
	.notice-wrapper {
		padding: .5em 2em 2em;
	}
}


.cafe-notice{
	background: var(--color-light);
	padding: 1em;
	border: 3px solid var(--color-main3);
	width: fit-content;
	margin-inline: auto;
	border-radius: 1em;
}

@media (min-width:768px){
	.cafe-notice{
	padding: 1.5em 3em;

}
}



.drink-cate {
	color: var(--color-main3);
	padding: .5em;
	margin-top: 3em;
	line-height: 1.2;
}

.drink-cate-name {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(2.6rem, 1.825rem + 3.305vw, 4.8rem);
	text-align: center;
	text-transform: uppercase;
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 700;
}

.drink-cate-name::before,
.drink-cate-name::after {
	content: '';
	width: 30px;
	height: 4px;
	background-color: var(--color-main1);
}

.drink-cate-name::before {
	margin-right: 15px;
}

.drink-cate-name::after {
	margin-left: 15px;
}

.drink-wrapper {
	margin: 0 calc(50% - 50vw);
}

@media (min-width:640px) {
	.drink-wrapper {
		margin: 0 auto 40px;
		max-width: 800px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		justify-content: center;
	}
}


.drink-inner {
	padding: 20px;
	background-repeat: repeat;
	background-size: clamp(6px, 5.296px + 0.188vw, 8px);
}

.jeanne {
	background-color: var(--color-Jeanne);
	background-image: url(../img/bg_dot_70.webp);
}

.adam {
	background-color: var(--color-Adam);
	background-image: url(../img/bg_dot_30.webp);
}

.thirteen {
	background-color: var(--color-thirteen);
	background-image: url(../img/bg_dot_20.webp);
}

.stellea {
	background-color: var(--color-stellea);
	background-image: url(../img/bg_dot_20.webp);
}



.novelty-wrapper {
	margin: 1em auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	justify-content: space-between;
}

@media (min-width:640px) {
	.novelty-wrapper {
		grid-template-columns: repeat(4, 1fr);

	}
}


/*版権表記-------------------------------------*/
#publisher {
	color: var(--color-light);
	padding: 2em 0 1em;
	background: url(../img/bg_copyright.webp);
	background-repeat: repeat;
}

#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-light);
	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-main4);
	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:834px) {
	.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:834px) {
	.sns-nameE {
		font-size: 3rem;
	}
}

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

@media (min-width:834px) {
	.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:834px) {
	.sns-ico-set {
		gap: 30px;
	}
}

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

@media (min-width:834px) {
	.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-main1);
}

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

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