@charset "utf-8";

/* 変数 -----------------------------------------------------------------------------------------*/
:root {
	--family-min: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "游明朝体", "Yu Mincho", YuMincho, serif;
	--family-go: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, sans-serif;

	--wrapper: 84%;
	--wrapper-w: 94%;
	--wrapper-max: 1024px;
	--wrapper-max-s: 820px;

	--header-h: 60px;

	--color-main: #333;
	--color-black: #333;
	--color-white: #fff;
	--color-gray: #e8e8e8;
	--color-gray-d: #929292;

	--color-header: rgba(0, 0, 0, 0.84);
	--color-alpha: rgba(255, 255, 255, 0.84);
	--color-contact: #ddddd5;
	--color-error: #cd401a;

	--font-xl: 2.1rem;
	--font-ll: 1.9rem;
	--font-l: 1.8rem;
	--font-m: 1.6rem;
	--font-s: 1.4rem;
	--font-ss: 1.2rem;
	--font-xs: 1.1rem;

	--weight-r: 400;
	--weight-m: 500;
	--weight-b: 600;

	--line-ll: 3.0em;
	--line-l: 2.0em;
	--line-m: 1.75em;
	--line-s: 1.4em;

	--margin-ll: 120px;
	--margin-l: 90px;
	--margin-m: 60px;
	--margin-ms: 40px;
	--margin-s: 30px;
	--margin-ss: 20px;
	--margin-xs: 10px;
	--margin-xxs: 5px;
}
/*-----------------------------------------------------------------------------------------------*/


/*html, body { height: 100%; }*/
html { font-size: 62.5%; }
body {
	background-color: var(--color-white);
	color: var(--color-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*font-feature-settings: "palt";*/
	line-height: 1;
	overflow-x: hidden;
	min-width: 320px;
}
img/*,
svg*/ {
	height: auto;
	width: 100%;
	max-width: 100%;
}
a:link, a:visited, .hover {
	color: var(--color-black);
	transition: 0.2s ease-out;
	transition-property: background-color, color, opacity;
	text-decoration: none;
}
a[href*="tel:"] { text-decoration: underline; }
a:hover, a:active, .hover:hover {
	/*color: var(--color-active);
	opacity: 0.7;*/
	text-decoration: underline;
}
a:focus { outline: none; }

strong { font-weight: var(--weight-b); }

th,
dt { font-weight: var(--weight-r); }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*::selection {
	background-color: var(--color-black);
	color: var(--color-white);
}*/

.indent {
	padding-left: 1em;
	text-indent: -1em;
}



/* フォント -------------------------------------------------------------------------------------*/
body {
	font-family: var(--family-min);
	font-weight: var(--weight-r);
}

body { opacity: 0; }
.wf-active body,
.wfno-load body { opacity: 1; }
/*-----------------------------------------------------------------------------------------------*/


/* wrapper --------------------------------------------------------------------------------------*/
.wrapper {
	margin: 0 auto;
	width: var(--wrapper);
	max-width: var(--wrapper-max-s);/*var(--wrapper-max);*/
}
.footer .wrapper { max-width: var(--wrapper-max); }
#meals .image { max-width: var(--wrapper-max-s); }
/*#about .wrapper,
#room .wrapper,
#meals .wrapper,
#meals .image,
#contact .wrapper { max-width: var(--wrapper-max-s); }*/
/*-----------------------------------------------------------------------------------------------*/


/* lazy -----------------------------------------------------------------------------------------*/
.js-lazy {
	opacity: 0;
	transform: translateY(10%) scale(1);
	transition-duration: 0.8s;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1);/*cubic-bezier(0.5, 1, 0.89, 1);*/
}
/*-----------------------------------------------------------------------------------------------*/


/* swiper ---------------------------------------------------------------------------------------*/
.swiper-container { position: relative; }
.swiper { position: relative; }

.swiper-button-next,
.swiper-button-prev {
	cursor: pointer;
	height: 100%;
	position: absolute;
	top: 0;
	width: 20px;
	z-index: 1;
}
.swiper-button-next { right: 0; }
.swiper-button-prev { left: 0; }
.swiper-button-next::after,
.swiper-button-prev::after {
	border-top: var(--color-white) solid 1px;
	border-right: var(--color-white) solid 1px;
	content: "" !important;
	height: 18px;
	position: absolute;
	/*top: 50%;
	transform: translateY(-50%);*/
	transition: border-color 0.2s ease-out;
	width: 18px;
	z-index: 1;
}
.swiper-button-next::after { right: 7px; transform: rotate(45deg); }
.swiper-button-prev::after { left: 7px; transform: rotate(-135deg); }
/*.swiper-button-next:hover::after,
.swiper-button-prev:hover::after { border-color: var(--color-white); }*/

.swiper-pagination { bottom: -20px !important; }
.swiper-pagination-bullet {
	background-color: var(--color-gray);
	height: 6px;
	opacity: 1;
	margin: 0 4px !important;
	width: 6px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--color-black); }
/*-----------------------------------------------------------------------------------------------*/


/* ボタン ---------------------------------------------------------------------------------------*/
.button a,
.button .a,
.button input[type="submit"] {
	background-color: var(--color-white);
	border: var(--color-black) solid 2px;
	color: var(--color-black);
	display: block;
	/*font-family: var(--family-go);*/
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	margin: 0 auto;
	padding: 12px 0 14px;
	transition-property: background-color, color;
	text-align: center;
	text-decoration: none;
	width: 194px;/*230px;*/
}
	.mac .button a, .mac .button .a, .mac .button input[type="submit"] { padding-bottom: 11px; }
	.ipad .button a, .ipad .button .a, .ipad .button input[type="submit"],
	.iphone .button a, .iphone .button .a, .iphone .button input[type="submit"] { padding-bottom: 12px; }
.button a:hover {
	background-color: var(--color-black);
	color: var(--color-white);
	opacity: 1;
	text-decoration: none;
}
.button.off a,
.button.off .a,
.button.off input[type="submit"] {
	border-color: var(--color-gray-d);
	color: var(--color-gray-d);
}
#contact .button.off a,
#contact .button.off .a,
#contact .button.off input[type="submit"] { background-color: transparent; }

.button.b a,
.button.b .a,
.button.b input[type="submit"] {
	background-color: var(--color-black);
	color: var(--color-white);
}
.button.b a:hover {
	background-color: var(--color-white);
	color: var(--color-black);
	opacity: 1;
}
.button.b.off a,
.button.b.off .a,
.button.b.off input[type="submit"] {
	background-color: var(--color-gray);
	border-color: var(--color-gray-d);
	color: var(--color-gray-d);
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ヘッダー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.header {
	background-color: var(--color-header);
	height: var(--header-h);
	display: flex;
	align-items: center;
	padding-left: 15px;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 102;
}
.header img {
	height: 37px;
	width: auto;
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ナビ -----------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* ＝ -------------------------------------------------------------------------------------------*/
.nav {
	cursor: pointer;
	height: var(--header-h);
	position: fixed;
	top: 0;
	right: 0;
	transition: 0.2s ease-out;
	transition-property: color top transform;
	width: var(--header-h);
	z-index: 103;
}

.nav::before,
.nav::after {
	background-color: var(--color-white);
	content: "";
	height: 2px;
	position: absolute;
	left: 12px;
	transition: background-color 0.2s ease-out;
	width: calc(var(--header-h) - 32px);
}
.nav::before { top: 26px; }
.nav::after { bottom: 26px; }
.nav.actived::before { top: 29px; transform: rotate(45deg); }
.nav.actived::after { bottom: 29px; transform: rotate(-45deg); }

/*.nav:hover { color: var(--color-active); }
.nav:hover::before,
.nav:hover::after { background-color: var(--color-active); }*/

/* × */
@keyframes navt {
	0% { top: 26px; transform: rotate(0deg); }
	50% { top: 29px; transform: rotate(0deg); }
	100% { top: 29px; transform: rotate(45deg); }
}
.nav.active:before { animation: navt 0.2s linear forwards; }
.nav.reverse:before { animation: navt 0.2s linear reverse both; }
@keyframes navb {
	0% { bottom: 26px; transform: rotate(0deg); }
	50% { bottom: 29px; transform: rotate(0deg); }
	100% { bottom: 29px; transform: rotate(-45deg); }
}
.nav.active:after { animation: navb 0.2s linear forwards; }
.nav.reverse:after { animation: navb 0.2s linear reverse both; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* グローバル -----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.global {
	background-color: var(--color-header);
	height: calc(100svh - var(--header-h));
	overflow-y: auto;
	padding-top: 30px;
	position: fixed;
	top: var(--header-h);
	left: 0;
	transform: translateX(100%);
	/*transition: transform 0.2s ease-out;*/
	width: 100%;
	z-index: 100;
}
.global.ready { transition: transform 0.2s ease-out; }
.global.active { transform: translateX(0); }


/* メニュー -------------------------------------------------------------------------------------*/
.global .menu {
	display: flex;
	flex-direction: column;
}
.global .menu a {
	color: var(--color-white);
	display: flex;
	align-items: center;
	font-size: var(--font-m);/*var(--font-s);*/
	letter-spacing: 0.05em;
	padding: 17px 0 18px 8%;
}

.global .menu a span {
	font-size: var(--font-xs);
	padding-left: 1em;
}


/* ボタン ---------------------------------------------------------------------------------------*/
.global .reserve { margin-top: var(--margin-s); }

.global .reserve a,
.footer .reserve a {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-xxs);
	font-size: var(--font-s);
	letter-spacing: 0.05em;
	padding: 4px 0 6px;
}
	.mac .global .reserve a, .mac .footer .reserve a,
	.ipad .global .reserve a, .ipad .footer .reserve a,
	.iphone .global .reserve a, .iphone .footer .reserve a { padding-top: 6px; }
.global .reserve a {
	border: var(--color-white) solid 1px;
	background-color: transparent;
	color: var(--color-white);
}
.global .reserve a span,
.footer .reserve a span { font-size: var(--font-xs); }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* フッター -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.footer {
	background-color: var(--color-white);
	border-top: var(--color-black) solid 1px;
	font-size: var(--font-s);
	padding: var(--margin-m) 0 var(--margin-s);
	text-align: center;
}
.footer .wrapper { width: 100%; }


/* ロゴ -----------------------------------------------------------------------------------------*/
.footer .logo img { width: 64px;/*80px;*/ }


/* インフォメーション ---------------------------------------------------------------------------*/
.footer .information {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-xs);
	margin-top: var(--margin-m);
}
/* 名称 */
.footer .name {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	letter-spacing: 0.05em;
	padding-bottom: var(--margin-ss);
}
.footer .name span { font-size: var(--font-m); }
/* 住所 */
.footer .address .googlemap { font-size: var(--font-s); }
.footer .address a { text-decoration: underline; }


/* サイトマップ ---------------------------------------------------------------------------------*/
.footer .sitemap,
.footer .sitemap ul {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-ss);
}
.footer .sitemap {
	row-gap: var(--margin-xs);
	margin-top: var(--margin-m);
}

.footer .menu a {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-xxs);
	font-size: var(--font-m);
	letter-spacing: 0.05em;
	padding: 0 0 2px;
}
.footer .menu a span { font-size: var(--font-xs); }

/* 空室検索 */
.footer .reserve { margin-top: var(--margin-xs); }

/* お問い合わせ */
.footer .contact.button { margin-top: var(--margin-s); }


/* コピーライト ---------------------------------------------------------------------------------*/
.footer .copyright {
	font-size: var(--font-ss);
	margin-top: var(--margin-ms);
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ボディー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main {
	background-color: var(--color-white);
	padding-bottom: calc(var(--margin-ll) * 2);

	line-break: strict; /* 禁則処理を厳格に適用 */
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
}
#contact .main { background-color: var(--color-contact); }

/* コンテナー */
.main .container {
	margin-top: var(--margin-m);
	padding-top: var(--margin-m);
}
.main .container:first-of-type { margin-top: 0; }

/* 見出し */
.main .midashi { padding-top: var(--margin-l); }
.main h1 {
	font-size: var(--font-xl);
	font-weight: var(--weight-b);
}
.main h2 {
	font-size: var(--font-ll);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
}
.main h3 {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
}

/* リード */
.main .read {
	font-size: var(--font-ll);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: justify;
}
.main .read p:not(:first-of-type) { margin-top: 2em; }

.main .read.reads { font-size: var(--font-s); }

/* コメント */
.main .comment,
.main .notes {
	font-size: var(--font-m);
	line-height: var(--line-l);
	text-align: justify;
}
.main .comment p:not(:first-of-type) { margin-top: 2em; }

.main .notes {
	/*display: block;*/
	font-size: var(--font-s);
	margin-top: var(--margin-s);
	/*padding-left: 1em;
	text-indent: -1em;*/
}
.main .notes + .notes { margin-top: var(--margin-xs); }

/* アイコン */
.main a .win { position: relative; }
.main a .win::before,
.main a .win::after {
	background-color: var(--color-white);
	border: var(--color-black) solid 1px;
	content: "";
	height: 10px;
	position: absolute;
	width: 15px;
}
.main a .win::before { right: -21px; bottom: 4px; }
.main a .win::after { right: -25px; bottom: 8px; }


/* 404 Not Found --------------------------------------------------------------------------------*/
#n404 h1,
#n404 .comment {
	margin-top: var(--margin-m);
	text-align: center;
}
#n404 .comment a { text-decoration: underline; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* モーダル -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.modallayer {
	background-color: rgba(0, 0, 0, 0.4);
	display: none;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 200;
}
.modallayer.active { display: block; }

.modal {
	background-color: rgba(255, 255, 255, 0.9);
	border: var(--color-gray-d) solid 1px;
	display: none;
	padding: var(--margin-ms) var(--margin-s) var(--margin-ll);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--wrapper);
	max-width: 620px;
	z-index: 201;
}
.modal.active { display: block; }

.modal h1 {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	text-align: center;
}
.modal .comment {
	font-size: var(--font-m);
	line-height: var(--line-l);
	margin-top: var(--margin-s);
	text-align: justify;
}

.modal .close {
	cursor: pointer;
	height: 30px;
	position: absolute;
	bottom: var(--margin-m);
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
}
.modal .close::before,
.modal .close::after {
	background-color: var(--color-black);
	content: "";
	height: 1px;
	position: absolute;
	top: 15px;
	left: -5px;
	width: 40px;
}
.modal .close::before { transform: rotate(45deg); }
.modal .close::after { transform: rotate(-45deg); }
.modal .close span {
	font-size: var(--font-s);
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}
/*-----------------------------------------------------------------------------------------------*/





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



@media(min-width: 768px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none !important;
	}
	br.sp { display: none; }

	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main { padding-bottom: calc(var(--margin-ll) * 2); }
	/* コンテナー */
	.main .container {
		margin-top: var(--margin-l);
		padding-top: var(--margin-l);
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* モーダル -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.modal {
		padding-top: var(--margin-m);
		padding-right: var(--margin-m);
		padding-left: var(--margin-m);
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--header-h: 69px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.header { padding-left: 35px; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ナビ -----------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* ＝ -------------------------------------------------------------------------------------------*/
	.nav { display: none; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.global {
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: auto;
		overflow: visible;
		padding-top: 0 !important;
		pointer-events: none;
		top: 0;
		right: 0;
		left: auto;
		transform: translateX(0);
		z-index: 104;
	}
	.global a { pointer-events: auto; }
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu {
		flex-direction: row;
		column-gap: var(--margin-s);
		margin-right: var(--margin-s);
	}
	.global .menu a {
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--margin-xxs);
		padding-left: 0;
	}
	.global .menu a span { padding-left: 0; }
	/* ボタン ---------------------------------------------------------------------------------------*/
	.global .reserve {
		margin-top: 0;
		margin-right: var(--margin-s);
	}
	.global .reserve a,
	.footer .reserve a {
		padding-right: 20px;
		padding-left: 20px;
		width: auto;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.footer {
		padding-top: var(--margin-s);
		text-align: left;
	}
	.footer .wrapper {
		position: relative;
		width: var(--wrapper-w);
	}
	/* ロゴ -----------------------------------------------------------------------------------------*/
	.footer .logo {
		position: absolute;
		top: var(--margin-l);
		left: 0;
	}
	/* インフォメーション ---------------------------------------------------------------------------*/
	.footer .information {
		padding-top: var(--margin-l);
		margin-top: 0;
		margin-left: 120px;
	}
	/* サイトマップ ---------------------------------------------------------------------------------*/
	.footer .sitemap {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		column-gap: var(--margin-s);
		margin-top: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		right: 0;
	}
	.footer .sitemap ul {
		flex-direction: row;
		justify-content: flex-end;
		column-gap: var(--margin-s);
	}
	.footer .sitemap a { pointer-events: auto; }
	/* 空室検索 */
	.footer .reserve { margin-top: 0; }
	/* お問い合わせ */
	.footer .contact.button {
		position: absolute;
		right: 0;
		bottom: 25px;
		margin-top: 0;
	}
	/* コピーライト ---------------------------------------------------------------------------------*/
	.footer .copyright {
		margin-top: 0;
		text-align: right;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.header { padding-left: var(--margin-ms); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu {
		column-gap: var(--margin-ms);
		margin-right: var(--margin-ms);
	}
	/* ボタン ---------------------------------------------------------------------------------------*/
	.global .reserve { margin-right: var(--margin-ms); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* サイトマップ ---------------------------------------------------------------------------------*/
	.footer .sitemap { column-gap: var(--margin-ms); }
	.footer .sitemap ul { column-gap: var(--margin-ms); }
	.footer .sitemap a { pointer-events: auto; }
	/*-----------------------------------------------------------------------------------------------*/
}



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