@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

/* CSS Document */

/*====================================

	root

====================================*/

:root {
	--text-color: #333;
	--z-header: 100;
	--z-nav: 110;
	--z-nav-toggle: 120;
	--z-loading: 9999;
	--z-modal: 9000;
}

/*====================================

	img（iOSの長押し「画像を保存」メニューを無効化）

====================================*/

img {
	-webkit-touch-callout: none;
}

/*====================================

	html / body

====================================*/

html {
	scroll-behavior: smooth;
}
body {
	font-family: "Noto Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-size: 16px;
	line-height: 1.85em;
	font-feature-settings: 'palt';
	margin: 0 auto;
	position: relative;
	color: var(--text-color);
    background: url(/common/images/bg.webp);
    background-size: 300px;
}

/*====================================

	loading

====================================*/

#loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background: url(/common/images/bg.webp);
	background-size: 300px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-loading);
	display: grid;
	place-items: center;
}
.loaded {
	opacity: 0;
	visibility: hidden;
}

/*====================================

	#fv logo fade in

====================================*/

#fv .inner {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1.2s ease .3s, transform 1.2s ease .3s;
}
body.is-loading #fv .inner {
	opacity: 0;
	transform: translateY(24px);
}

/*====================================

	fork hover（常時表示、ホバー中は左へループスライド）

====================================*/

@keyframes fork-slide-left {
	0% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
	40% {
		opacity: 1;
		transform: translate(calc(-50% - var(--fork-travel)), 0);
	}
	55% {
		opacity: 0;
		transform: translate(calc(-50% - var(--fork-travel) * 1.6), 0);
	}
	60% {
		opacity: 0;
		transform: translate(calc(-50% + var(--fork-travel) * 1.6), 0);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/*====================================

	kanban（フッターが画面に入ったら下から生える）

====================================*/

#wp_reservation .kanban {
	transform: translateY(70%);
	opacity: 0;
	transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .5s, opacity .3s ease .5s;
}
#wp_reservation .kanban.is-inview {
	transform: translateY(0);
	opacity: 1;
}

/*====================================

	scroll reveal

====================================*/

[data-reveal] {
	opacity: 0;
	transition: opacity .8s ease .5s, transform .8s ease .5s;
}
[data-reveal="right"] {
	transform: translateX(20px);
}
[data-reveal="left"] {
	transform: translateX(-20px);
}
[data-reveal="up"] {
	transform: translateY(20px);
}
[data-reveal="down"] {
	transform: translateY(-20px);
}
[data-reveal].is-inview {
	opacity: var(--reveal-opacity, 1);
	transform: none;
}

/*====================================

	modal

====================================*/

body.is-modal-open {
	overflow: hidden;
}
.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal.is-open {
	display: flex;
}
.modal_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}
.modal_body {
	position: relative;
	width: 640px;
	max-width: 100%;
	background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(/images/bg_blue.webp) center / cover;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	border-radius: 4px;
	padding: 50px 40px 40px;
}
.modal_scroll {
	max-height: 70vh;
	overflow-y: auto;
}
.modal_close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.modal_hero {
	text-align: center;
}
.modal_hero_photo {
	width: 200px;
	border-radius: 4px;
	margin: 0 auto 20px;
}
.modal_hero_label {
	margin: 0;
    font-family: "Fredericka the Great", serif;
    font-style: italic;
    text-shadow: none;
    font-size: 75%;
}
.modal_hero h3 {
	font-size: 130%;
	margin: 5px 0 25px;
}
.modal_hero_lead {
	line-height: 1.9em;
	margin: 0 0 30px;
}
.modal_profile {
	margin-top: 30px;
}
.modal_profile_group {
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .3);
}
.modal_profile_group:first-child {
	border-top: none;
	padding-top: 0;
}
.modal_profile_group h4 {
	margin: 0 0 10px;
}
.modal_profile_group p {
	line-height: 1.8em;
}
/* SP側の `* { display: none; }` に負けないよう、モーダル内は常に表示を明示する */
.modal :where(div, p, h2, h3, h4, button) {
	display: block;
}
.modal br {
	display: inline;
}