@charset "utf-8";

/*-----------
 reset
-----------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
li { list-style: none; }

/* Lenis smooth scroll (required setup) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
img { height: auto; max-width: 100%; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }

/*-----------
 theme tokens
-----------*/
:root {
	--cream: #eeece9;
	--taupe: #736357;
	--taupe-soft: #9a8c7e;
	--sky: #bcebff;
	--pink: #f4d6e1;
	--coral: #ef8585;
	--white: #fff;
	--maxw: 1680px;
	--serif-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
	--serif-en: "Palatino Linotype", "Book Antiqua", Palatino, "Hiragino Mincho ProN", serif;
}

body {
	font-family: var(--serif-jp);
	font-weight: 500;
	color: var(--taupe);
	background: var(--cream);
	line-height: 1.8;
	overflow-x: clip;
	position: relative;
}

/* page-wide watercolor background — pinned, zoomed in, gently parallaxed on scroll */
#page-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.page-bg-layer {
	position: absolute;
	left: 0;
	top: -42%;
	width: 100%;
	height: 184%;
	background: url(../images/bg.jpg) center / cover no-repeat;
	opacity: 0.3;
	will-change: transform;
}
/* soft beige veil over the watercolor to calm its paper texture */
#page-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cream);
	opacity: 0.4;
}

/*-----------
 utilities
-----------*/
.inner { width: 92%; max-width: var(--maxw); margin: 0 auto; }
.en { font-family: var(--serif-en); }
.nowrap { white-space: nowrap; }
.pc { display: block; }
.sp { display: none; }
@media screen and (max-width: 768px) {
	.pc { display: none; }
	.sp { display: block; }
}

/*-----------
 scroll fade-in
-----------*/
.fadein {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fadein.scrollin { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fadein { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/*-----------
 pill buttons
-----------*/
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	border-radius: 100px;
	font-weight: 900;
	transition: transform 0.25s ease, filter 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn .chev {
	width: 0.5em;
	height: 0.5em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	flex: none;
}

/* solid taupe pill (会員登録 etc.) */
.btn-taupe {
	background: var(--taupe);
	color: var(--white);
	padding: 0.7em 2.4em;
	border: 1px solid var(--taupe);
}
.btn-taupe:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* outline pill (header reserve) */
.btn-outline {
	background: var(--white);
	color: var(--taupe);
	border: 1px solid var(--taupe);
	padding: 0.6em 1.8em;
}
.btn-outline:hover { background: var(--taupe); color: var(--white); transform: translateY(-2px); }