@charset "UTF-8";

:root {
--font-base: clamp(1px, 1.8vw, 18px);
--font-middle: clamp(1px, 2.2vw, 24px);
--font-large: clamp(1px, 3.2vw, 36px);
--space-sm: clamp(12px, 1.5vw, 16px);
--space-md: clamp(24px, 3vw, 32px);
--space-lg: clamp(60px, 4vw, 80px);
--space-mlg: clamp(60px, 5vw, 100px);
--grid-gap: clamp(16px, 2vw, 32px);
--card-padding: clamp(16px, 2vw, 24px);
--font-jp: "Yu Gothic medium", "Noto Sans JP", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
--font-en: 'Frank Ruhl Libre', serif;
--color: #000;
--accent-color: #c3c3c3;
--border-blk: 1px solid #000;
}

body {
font-family: var(--font-jp);
font-size: var(--font-base);
line-height: 220%;
color: var(--color);
background: url(../images/bg.avif) repeat top center;
background-size: 300px auto;
word-break: break-all;
}
img, video, iframe {
inline-size:100%; max-inline-size: 100%; block-size: auto; vertical-align: bottom;
}
a, a:hover {
text-decoration: none; color: #555;
}
i {
font-size: 0.8em; padding-right: 5px;
}
h2 {
text-align: center;
font-size: var(--font-large);
font-weight: 500;
letter-spacing: 0.1em;
padding-bottom: var(--space-sm);
}

.scroll-up {
opacity: 0; transform: translateY(70px);transition: all 1.2s;
}
.scroll-up.done {
opacity : 1; transform: translateY(0);
}
.w1280 {
inline-size: 90%; max-inline-size: 1280px; margin-inline: auto;
}

#header {
position: sticky;
top: 0;left: 0;z-index: 10;inline-size: 100%;
padding: var(--space-sm) 0;
background: #423000;border-bottom: solid 1px #fff;
	a.logo{
	display: block;
	inline-size: 20%;
	padding-left: 5%;
	}
	a.reserve-btn{
	position: absolute; top: 50%; right: 5%;
	transform: translate(0%,-50%);
	color: #423000; background: #ebebeb;
	inline-size: 10%;
	padding: 5px;
	border-radius: 10px;
	text-align: center; font-family: 'Frank Ruhl Libre', serif; font-weight: bold;
	}
}
#footer{ text-align: center; background: #423000; color: #fff; font-size: 14px; padding-block:: var(--space-sm); }

@media (max-width: 560px){
body {
font-size: 3.8vw;
}
h2 {
font-size: 5.5vw;
}
#header { a.logo {inline-size: 50%;} a.reserve-btn { inline-size: 110px;} }
#footer{ font-size: 12px;}
}

@media (min-width: 561px) and (max-width: 1024px){
#header { a.logo { inline-size: 30%;} a.reserve-btn { inline-size: 12%; } }
}