/* ========================================
RESET
======================================== */
*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html,body{
	width:100%;
	min-height:100%;
}
html{
	scroll-behavior:smooth;
}
body{
	color:#fff;
	background:#f5f3ee;
	font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
	font-feature-settings:"palt";
	-webkit-font-smoothing:antialiased;
	letter-spacing:.08em;
}
body.menu-open{
	overflow:hidden;
}
a{
	color:inherit;
	text-decoration:none;
}
ul{
	list-style:none;
}
img{
	max-width:100%;
	display:block;
}
button{
	font:inherit;
}

/* ========================================
LANGUAGE TYPOGRAPHY
======================================== */

/* 日本語 */
html[lang="ja"] body{
	font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
	letter-spacing:.12em;
}

/* English */
html[lang="en"] body{
	font-family:"Times New Roman","Times",serif;
	letter-spacing:.03em;
}

/* 한국어 */
html[lang="ko"] body{
	font-family:"Batang","AppleMyungjo","Noto Serif KR","Nanum Myeongjo",serif;
	letter-spacing:.02em;
}

/* 简体中文 */
html[lang="zh-CN"] body{
	font-family:"Songti SC","STSong","Noto Serif SC",serif;
	letter-spacing:.05em;
}

/* 繁體中文 */
html[lang="zh-TW"] body{
	font-family:"Songti TC","PMingLiU","Noto Serif TC",serif;
	letter-spacing:.05em;
}

/* ========================================
HEADER
======================================== */
.header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:96px;
	z-index:100;
	background:rgba(8,12,11,.8);
	border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
	width:100%;
	height:100%;
	padding:0 28px 0 38px;
	display:flex;
	align-items:center;
}
.logo{
	width:180px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	flex-shrink:0;
	position:relative;
	z-index:105;
}
.logo img{
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:72px;
	object-fit:contain;
}

/* ========================================
GLOBAL NAVIGATION
======================================== */
.gnav{
	height:100%;
	display:flex;
	align-items:center;
	margin-left:auto;
}
.gnav-inner{
	height:100%;
	display:flex;
	align-items:center;
}
.gnav-list{
	height:100%;
	display:flex;
	align-items:center;
}
.gnav-item{
	height:100%;
}
.gnav-item>a{
	height:100%;
	padding:0 23px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	font-size:18px;
	font-weight:400;
	white-space:nowrap;
	transition:opacity .3s;
}
.gnav-item>a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:20px;
	width:0;
	height:1px;
	background:#fff;
	transform:translateX(-50%);
	transition:width .3s;
}
.gnav-item>a:hover{
	opacity:.7;
}
.gnav-item>a:hover::after,
.gnav-item.active>a::after{
	width:28px;
}

/* PCではサブナビとSP予約を非表示 */
.gnav-sub,
.gnav-reservation{
	display:none;
}

/* ========================================
LANGUAGE
======================================== */
.lang{
	position:relative;
	height:100%;
	display:flex;
	align-items:center;
	margin-left:12px;
	flex-shrink:0;
	z-index:106;
}
.lang-current{
	height:100%;
	padding:0 13px;
	border:0;
	background:none;
	color:#fff;
	font-family:"Times New Roman","Times",serif;
	font-size:18px;
	font-weight:400;
	cursor:pointer;
	position:relative;
}
.lang-current::after{
	content:"";
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 0 3px 9px;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	transform:rotate(45deg);
	transition:transform .25s;
}
.lang.open .lang-current::after{
	transform:rotate(225deg);
	margin-bottom:0;
}
.lang-menu{
	position:absolute;
	top:76px;
	right:0;
	width:150px;
	padding:5px 0;
	background:rgba(7,10,9,.94);
	border:1px solid rgba(255,255,255,.08);
	opacity:0;
	visibility:hidden;
	transform:translateY(-7px);
	transition:opacity .25s,visibility .25s,transform .25s;
	box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.lang:hover .lang-menu,
.lang.open .lang-menu{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.lang-menu a{
	min-height:42px;
	padding:0 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	font-size:16px;
	border-bottom:1px solid rgba(255,255,255,.08);
	transition:background .2s,opacity .2s;
}
.lang-menu a:last-child{
	border-bottom:0;
}
.lang-menu a:hover{
	background:rgba(255,255,255,.08);
}
.lang-menu a.active{
	opacity:.72;
}
.lang-check{
	font-size:6px;
	opacity:.8;
}

/* ========================================
RESERVATION CTA
======================================== */
.header-reservation{
	height:100%;
	margin-left:12px;
	display:flex;
	align-items:stretch;
	flex-shrink:0;
}
.header-reservation>a{
	min-width:118px;
	height:100%;
	padding:0 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(130,32,32,.92);
	font-size:18px;
	font-weight:400;
	white-space:nowrap;
	transition:background .3s;
}
.header-reservation>a:hover{
	background:rgba(180,41,41,.98);
}

/* ========================================
MOBILE MENU BUTTON
======================================== */
.menu-btn{
	display:none;
	width:44px;
	height:44px;
	padding:0;
	border:0;
	background:none;
	position:relative;
	cursor:pointer;
	z-index:120;
	flex-shrink:0;
}
.menu-btn span{
	position:absolute;
	left:8px;
	width:28px;
	height:1px;
	background:#fff;
	transition:top .3s,transform .3s,opacity .3s;
}
.menu-btn span:nth-child(1){
	top:15px;
}
.menu-btn span:nth-child(2){
	top:22px;
}
.menu-btn span:nth-child(3){
	top:29px;
}
.menu-btn.open span:nth-child(1){
	top:22px;
	transform:rotate(45deg);
}
.menu-btn.open span:nth-child(2){
	opacity:0;
}
.menu-btn.open span:nth-child(3){
	top:22px;
	transform:rotate(-45deg);
}

/* ========================================
TABLET
======================================== */
@media(max-width:1280px){
	.header-inner{
		padding-left:25px;
		padding-right:20px;
	}
	.logo{
		width:145px;
	}
	.gnav-item>a{
		padding:0 14px;
		font-size:18px;
	}
	.lang{
		margin-left:6px;
	}
	.lang-current{
		padding:0 8px;
		font-size:16px;
	}
	.header-reservation{
		margin-left:7px;
	}
	.header-reservation>a{
		min-width:100px;
		padding:0 14px;
		font-size:18px;
		font-weight: bold;
	}
}

/* ========================================
SMALL TABLET
ナビが収まりにくくなる領域
======================================== */
@media(max-width:1000px){

	.header{
		height:76px;
	}
	.header-inner{
		padding:0 20px;
	}
	.logo{
		width:140px;
	}
	.gnav-item>a{
		padding:0 10px;
		font-size:15px;
	}
	.gnav-item>a::after{
		bottom:14px;
	}
	.lang-current{
		font-size:16px;
	}
	.header-reservation>a{
		min-width:88px;
		padding:0 10px;
		font-size:16px;
	}
	.lang-menu{
		top:66px;
	}

}

/* ========================================
MOBILE
======================================== */
@media(max-width:768px){
	.header{
		height:68px;
		background:rgba(8,12,11,.8);
	}
	.header-inner{
		padding:0 14px 0 18px;
		justify-content:flex-start;
	}
	.logo{
		width:130px;
		height:68px;
	}

	/* ----------------------------------------
	SP GLOBAL NAVIGATION
	---------------------------------------- */
	.gnav{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		height:100dvh;
		margin:0;
		padding:88px 24px 30px;
		background:rgba(9,13,12,.98);
		opacity:0;
		visibility:hidden;
		transform:translateY(-8px);
		transition:opacity .35s,visibility .35s,transform .35s;
		overflow-y:auto;
		z-index:100;
	}
	.gnav.open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}
	.gnav-inner{
		width:100%;
		height:auto;
		min-height:calc(100% - 20px);
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		padding:15px 0 35px;
	}
	.gnav-list{
		width:100%;
		height:auto;
		display:block;
	}
	.gnav-item{
		width:100%;
		height:auto;
		text-align:center;
	}
	.gnav-item>a{
		width:100%;
		height:auto;
		padding:12px 20px;
		display:block;
		font-size:20px;
		line-height:1.6;
	}
	.gnav-item>a::after{
		display:none;
	}
	.gnav-item.active>a{
		opacity:.65;
	}

	/* ----------------------------------------
	SP SUB NAVIGATION
	---------------------------------------- */
	.gnav-sub{
		width:100%;
		display:block;
		margin-top:18px;
		padding-top:18px;
		border-top:1px solid rgba(255,255,255,.16);
		text-align:center;
	}
	.gnav-sub li>a{
		display:block;
		padding:10px 20px;
		font-size:20px;
		line-height:1.6;
		opacity:.78;
	}
	.gnav-sub li.active>a{
		opacity:.5;
	}

	/* ----------------------------------------
	SP RESERVATION
	---------------------------------------- */
	.gnav-reservation{
		width:100%;
		max-width:280px;
		display:block;
		margin-top:25px;
	}
	.gnav-reservation>a{
		width:100%;
		min-height:54px;
		padding:12px 20px;
		display:flex;
		align-items:center;
		justify-content:center;
		background:rgba(130,32,32,.95);
		font-size:20px;
	}

	/* PC予約ボタン非表示 */
	.header-reservation{
		display:none;
	}

	/* ----------------------------------------
	LANGUAGE
	---------------------------------------- */
	.lang{
		position:relative;
		height:68px;
		margin:0 5px 0 auto;
		z-index:121;
	}
	.lang-current{
		height:68px;
		padding:0 7px;
		font-size:16px;
	}
	.lang-current::after{
		margin-left:7px;
	}
	.lang-menu{
		top:60px;
		right:0;
		width:145px;
	}
	.lang:hover .lang-menu{
		opacity:0;
		visibility:hidden;
		transform:translateY(-7px);
	}
	.lang.open .lang-menu{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}
	.lang-menu a{
		min-height:43px;
		padding:0 15px;
		font-size:16px;
	}

	/* ----------------------------------------
	MENU BUTTON
	---------------------------------------- */
	.menu-btn{
		display:block;
	}

}

/* ========================================
SMALL MOBILE
======================================== */
@media(max-width:380px){
	.header-inner{
		padding-left:15px;
		padding-right:10px;
	}
	.logo{
		width:112px;
	}
	.lang{
		margin-right:1px;
	}
	.lang-current{
		padding:0 4px;
		font-size:9px;
	}
	.lang-current::after{
		margin-left:5px;
	}
	.menu-btn{
		width:40px;
	}
	.menu-btn span{
		left:7px;
		width:26px;
	}
}

/* ========================================
SCROLL REVEAL
======================================== */

/* 通常は必ず表示 */
main>section:not(.mv):not(.sub-hero){
	opacity:0;
	transform:translateY(40px);
	transition:opacity 1.6s ease, transform 1.6s cubic-bezier(.22,1,.36,1);
}

main>section:not(.mv):not(.sub-hero).is-visible{
	opacity:1;
	transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
	main>section:not(.mv):not(.sub-hero){
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ========================================
FOOTER
======================================== */
.footer{
	position:relative;
	padding:60px 0 100px;
	background:#dedbd2;
	color:#282a27;
}
.footer-inner{
	width:calc(100% - 120px);
	max-width:1200px;
	margin:0 auto;
}

/* ========================================
MAIN
======================================== */
.footer-main{
	display:grid;
	grid-template-columns:38% 62%;
	padding-bottom:30px;
}

/* ----------------------------------------
BRAND
---------------------------------------- */
.footer-brand{
	padding-right:70px;
}
.footer-logo{
	display:block;
	width:220px;
	margin-bottom:20px;
}
.footer-logo img{
	display:block;
	width:100%;
	height:auto;
}
.footer-address{
	font-size:16px;
	line-height:180%;
}
.footer-name{
	margin-bottom:10px;
	font-size:20px;
}
.footer-tel{
	display:flex;
	align-items:baseline;
	gap:13px;
	margin-top:12px;
}
.footer-tel>span{
	font-family:"Times New Roman","Times",serif;
	font-size:18px;
	color:#444444;
}
.footer-tel a{
	font-family:"Times New Roman","Times",serif;
	font-size:20px;
}

/* ----------------------------------------
NAVIGATION
---------------------------------------- */
.footer-navigation{
	padding-left:70px;
	border-left:1px solid #cbc9c2;
}
.footer-nav{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	column-gap:55px;
}
.footer-nav>a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:57px;
	padding:0 3px;
	border-bottom:1px solid #cbc9c2;
	font-size:18px;
	transition:opacity .3s;
}
.footer-nav>a:nth-child(-n+2){
	border-top:1px solid #cbc9c2;
}
.footer-nav>a:hover{
	opacity:.55;
}

/* ----------------------------------------
NAV ARROW
---------------------------------------- */
.footer-nav-arrow{
	position:relative;
	display:block;
	width:20px;
	height:1px;
	margin-left:15px;
	background:#77776f;
	transition:width .3s,transform .3s;
}
.footer-nav-arrow::after{
	content:"";
	position:absolute;
	top:-3px;
	right:0;
	width:6px;
	height:6px;
	border-top:1px solid #77776f;
	border-right:1px solid #77776f;
	transform:rotate(45deg);
}
.footer-nav>a:hover .footer-nav-arrow{
	width:25px;
	transform:translateX(3px);
}

/* ----------------------------------------
RESERVATION
---------------------------------------- */
.footer-reservation{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	max-width:330px;
	min-height:58px;
	margin-top:35px;
	padding:0 23px;
	border:1px solid #5e5d58;
	font-size:20px;
	transition:
	background .3s,
	color .3s;
}
.footer-reservation:hover{
	background:#282a27;
	color:#fff;
}
.footer-reservation-arrow{
	position:relative;
	display:block;
	width:28px;
	height:1px;
	background:currentColor;
	transition:width .3s,transform .3s;
}
.footer-reservation-arrow::after{
	content:"";
	position:absolute;
	top:-3px;
	right:0;
	width:7px;
	height:7px;
	border-top:1px solid currentColor;
	border-right:1px solid currentColor;
	transform:rotate(45deg);
}
.footer-reservation:hover .footer-reservation-arrow{
	width:34px;
	transform:translateX(3px);
}

/* ========================================
LANGUAGE
======================================== */
.footer-language{
	display:flex;
	align-items:center;
	padding:20px 0;
	border-top:1px solid #cbc9c2;
	border-bottom:1px solid #cbc9c2;
}
.footer-language-title{
	width:150px;
	flex:none;
	font-family:"Times New Roman","Times",serif;
	font-size:14px;
	color:#444444;
}
.footer-language-list{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 0;
}
.footer-language-list a{
	position:relative;
	padding:0 15px;
	font-size:16px;
	line-height:1.4;
	color:#444444;
	transition:color .3s;
}
.footer-language-list a:first-child{
	padding-left:0;
}
.footer-language-list a:not(:last-child)::after{
	content:"";
	position:absolute;
	top:50%;
	right:0;
	width:1px;
	height:11px;
	background:#bbb9b2;
	transform:translateY(-50%);
}
.footer-language-list a:hover,
.footer-language-list a.is-current{
	color:#282a27;
}
.footer-language-list a.is-current{
	text-decoration:underline;
	text-underline-offset:5px;
}

/* ========================================
BOTTOM
======================================== */
.footer-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:27px;
}
.footer-copyright{
	font-family:"Times New Roman","Times",serif;
	font-size:14px;
	line-height:1.6;
	color:#444444;
}

/* ========================================
FOOTER / TABLET
======================================== */
@media(max-width:1100px){

	.footer{
		padding:60px 0 100px;
	}
	.footer-inner{
		width:calc(100% - 80px);
	}
	.footer-main{
		grid-template-columns:34% 66%;
		padding-bottom:35px;
	}
	.footer-brand{
		padding-right:45px;
	}
	.footer-logo{
		width:200px;
		margin-bottom:30px;
	}
	.footer-navigation{
		padding-left:45px;
	}
	.footer-nav{
		column-gap:35px;
	}
	.footer-nav>a{
		font-size:20px;
	}
	.footer-language-title{
		width:125px;
	}

}

/* ========================================
FOOTER / MOBILE
======================================== */
@media(max-width:768px){

	.footer{
		padding:40px 0 80px;
	}
	.footer-inner{
		width:calc(100% - 44px);
	}

	/* BRAND */
	.footer-main{
		display:block;
		padding-bottom:45px;
	}
	.footer-brand{
		padding:0;
	}
	.footer-logo{
		width:200px;
		margin-bottom:15px;
	}
	.footer-address{
		font-size:16px;
		line-height:1.5;
	}
	.footer-name{
		font-size:20px;
	}
	.footer-tel a{
		font-size:20px;
	}

	/* NAV */
	.footer-navigation{
		margin-top:40px;
		padding:0;
		border-left:0;
	}
	.footer-nav{
		grid-template-columns:1fr 1fr;
		column-gap:25px;
	}
	.footer-nav>a{
		min-height:52px;
		font-size:16px;
	}
	.footer-nav-arrow{
		width:16px;
	}
	.footer-nav>a:hover .footer-nav-arrow{
		width:16px;
		transform:none;
	}

	/* RESERVATION */
	.footer-reservation{
		max-width:none;
		min-height:56px;
		margin-top:30px;
		font-size:18px;
	}
	.footer-reservation:hover .footer-reservation-arrow{
		width:28px;
		transform:none;
	}

	/* LANGUAGE */
	.footer-language{
		display:block;
		padding:24px 0;
	}
	.footer-language-title{
		width:auto;
		margin-bottom:17px;
	}
	.footer-language-list{
		gap:12px 0;
	}
	.footer-language-list a{
		padding:0 13px;
		font-size:16px;
	}
	.footer-language-list a:first-child{
		padding-left:0;
	}

	/* BOTTOM */
	.footer-bottom{
		padding-top:23px;
	}
	.footer-copyright{
		font-size:12px;
	}

}

/* ========================================
FOOTER / SMALL MOBILE
======================================== */
@media(max-width:380px){

	.footer{
		padding-top:30px;
	}
	.footer-inner{
		width:calc(100% - 30px);
	}
	.footer-logo{
		width:200px;
	}
	.footer-nav{
		grid-template-columns:1fr;
		column-gap:0;
	}
	.footer-nav>a:nth-child(2){
		border-top:0;
	}
	.footer-language-list a{
		padding:0 10px;
	}

}

/* ----------------------------------------
SNS
---------------------------------------- */
.footer-sns{
	display:flex;
	align-items:center;
	gap:18px;
}
.footer-sns a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:25px;
	height:25px;
	opacity:.65;
	transition:opacity .3s;
}
.footer-sns a:hover{
	opacity:1;
}
.footer-sns img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

@media(max-width:768px){

	.footer-bottom{
		align-items:flex-end;
	}

	.footer-sns{
		gap:15px;
	}

	.footer-sns a{
		width:25px;
		height:25px;
	}

}

/* ========================================
FLOATING UI POSITION
後から489ban等を追加する場合はここだけ調整
======================================== */
:root{
	--floating-bottom:30px;
	--floating-right:30px;
}

/* ========================================
PAGE TOP
======================================== */
.page-top{
	position:fixed;
	right:var(--floating-right);
	bottom:var(--floating-bottom);
	z-index:80;

	display:flex;
	align-items:center;
	justify-content:center;

	width:50px;
	height:50px;
	padding:0;

	border:1px solid rgba(40,42,39,.45);
	border-radius:50%;
	background:rgba(255,255,255,.88);

	opacity:0;
	visibility:hidden;
	transform:translateY(12px);

	cursor:pointer;

	transition:
	opacity .35s,
	visibility .35s,
	transform .35s,
	background .3s,
	color .3s;

	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
}

.page-top.is-visible{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.page-top:hover{
	background:#282a27;
	color:#fff;
}

.page-top-arrow{
	position:relative;
	display:block;
	width:10px;
	height:10px;
	border-top:1px solid currentColor;
	border-left:1px solid currentColor;
	transform:translateY(3px) rotate(45deg);
}

@media(max-width:768px){

	:root{
		--floating-bottom:16px;
		--floating-right:16px;
	}

	.page-top{
		width:44px;
		height:44px;
	}

}

/* ========================================
SECTION DIVIDER
======================================== */
main>section:not(.mv)+section::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:1px;
	background:#c9c5ba;
}

/* ========================================
ENGLISH TYPOGRAPHY ADJUSTMENT
======================================== */

html[lang="en"] .gnav-list a{
	font-size:20px;
}

html[lang="en"] .greeting-title{
	font-size:28px;
}

html[lang="en"] .greeting-text{
	font-size:6px;
}

/* ========================================
PC / FIXED BOOKING BAR ADJUSTMENT
======================================== */
@media(min-width:1101px){

	/* 固定予約バーにフッター最下部が隠れないよう調整 */
	.footer{
		padding-bottom:150px;
	}

	/* 固定予約バーより上にページトップボタンを配置 */
	.page-top{
		bottom:70px;
	}

}