/* ==========================================================
   01. PCナビゲーション
========================================================== */
#top #container {
	margin-top: 0;
}

#container {
	margin-top: var(--nav-height-xl);
}

.nav_trigger,
.sp_nav {
	display: none;
}

.nav_header ul li a.reserve_btn,
.footer ul li a.reserve_btn {
	display: inline-block;
	padding: .5rem var(--space-20);
	border-width: 1px;
	border-style: solid;
	border-radius: 9999px;
}

.nav_header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: var(--nav-height-xl);
	padding: 0 6.4rem;
	background: rgba(var(--color-wh), 1);
	opacity: 1;
	transition: var(--transition);
	z-index: 9999;
	box-sizing: border-box;
}
.nav_header:after {
	content: '';
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .1rem;
	background: rgba(var(--color-wh), .12);
	transition: var(--transition);
}
.open .nav_header:after,
.glonav.nav_header:after {
	background: rgb(var(--color-wh-hover));
}

#top .nav_header.hide {
	top: calc(var(--nav-height-xl) * -1);
	opacity: 0;
}
.nav_logo {
	display: block;
	width: auto;
	height: 40px;
	margin-right: 4.8rem;
}
.nav_logo svg {
	width: auto;
	height: 100%;
}
.nav_logo svg .st0 {
	fill: rgb(var(--color-bk));
}

.nav_header ul:first-of-type {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.nav_header ul:last-of-type {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.nav_header ul li {
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: -.02em;
	padding-inline: 1rem;
}
.nav_header .sns_icon,
.footer .sns_icon {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
}
.nav_header ul:last-of-type li:last-of-type {
	padding-right: 0;
}
.nav_header ul li a.reserve_btn {
	background: rgba(var(--color-bk), 0);
	border-color: rgb(var(--color-bk));
}
.nav_header ul li a.reserve_btn:hover {
	color: rgb(var(--color-wh));
	background: rgba(var(--color-bk), 1);
}

#top_head .nav_header {
	position: absolute;
	background: rgba(var(--color-wh), 0);
	z-index: 9998;
}
#top_head .nav_header .nav_logo svg .st0 {
	fill: rgb(var(--color-wh));
	transition: var(--transition);
}
#top_head .nav_header {
	position: absolute;
	background: rgba(var(--color-wh), 0);
	z-index: 9998;
}
#top_head .nav_header ul li a {
	color: rgb(var(--color-wh));
	transition: var(--transition);
}
#top_head .nav_header ul li a.reserve_btn {
	border-color: rgb(var(--color-wh));
}

#top_head .nav_header:hover {
	background: rgba(var(--color-wh), 1);
}
#top_head .nav_header:hover .nav_logo svg .st0 {
	fill: rgb(var(--color-bk));
}
#top_head .nav_header:hover ul li a {
	color: rgb(var(--color-bk));
}
#top_head .nav_header:hover ul li a.reserve_btn {
	border-color: rgb(var(--color-bk));
}
#top_head .nav_header:hover ul li a.reserve_btn:hover {
	color: rgb(var(--color-wh));
}

#footer ul li a.reserve_btn:hover {
	background: rgb(var(--color-wh)) !important;
	color: rgb(var(--color-bk)) !important;
}

/* ---------- Bogo言語切り替え ---------- */
ul.bogo-language-switcher {
	display: flex;
	justify-content: flex-end !important;
}
ul.bogo-language-switcher li {
	font-weight: 400;
	padding-inline: 0 !important;
}
ul.bogo-language-switcher li.current {
	font-weight: 500;
}
ul.bogo-language-switcher li:after {
	content: "/";
	color: rgb(var(--color-wh));
	font-weight: 300;
	padding-inline: .5rem;
	transition: var(--transition);
}
ul.bogo-language-switcher li:last-child:after {
	display: none;
}

#top_head .nav_header:hover ul.bogo-language-switcher li:after,
.glonav ul.bogo-language-switcher li:after,
.sp_nav ul.bogo-language-switcher li:after {
	color: rgb(var(--color-bk));
}


/* ==========================================================
   02. レスポンシブ: PC大
========================================================== */

@media screen and (max-width: 1600px)
{
	
#container {
	margin-top: var(--nav-height-lg);
}

.nav_header {
	height: var(--nav-height-lg);
}

.nav_header .sns_icon,
.footer .sns_icon {
	width: 1.8rem;
	height: 1.8rem;
}
	
}

/* ==========================================================
   03. レスポンシブ: PC中
========================================================== */

@media screen and (max-width: 1360px)
{

#container {
	margin-top: var(--nav-height-md);
}

.nav_header {
	height: var(--nav-height-md);
}
.nav_logo {
	margin-right: 2.4rem;
}

}

/* ==========================================================
   04. レスポンシブ: PC
========================================================== */

@media screen and (max-width: 1200px)
{

#container {
	margin-top: var(--nav-height-sm);
}

.nav_header {
	height: var(--nav-height-sm);
	padding: 0 2rem;
}

}


/* ==========================================================
   05. レスポンシブ: タブレット
========================================================== */

@media screen and (max-width: 1100px)
{

.nav_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	flex: initial;
	min-width: 0;
	width: min(58vw, 52rem);
	height: clamp(2.8rem, 7vw, 4rem);
	margin-right: 0;
	transform: translate(-50%, -50%);
}
.nav_logo a {
	display: inline-block;
	max-width: 100%;
	height: 100%;
}
.nav_logo svg {
	max-width: 100%;
	height: 100%;
}
.nav_header > ul:first-of-type {
	display: none;
}
.nav_header ul li {
	padding-inline: 0;
}
.nav_header .nav_sns,
.nav_header .reserve {
	display: none;
}

#top_head .nav_header:hover {
	background: rgba(var(--color-wh), 0);
}
#top_head .nav_header:hover .nav_logo svg .st0 {
	fill: rgb(var(--color-wh));
}
#top_head .nav_header:hover ul li a {
	color: rgb(var(--color-wh));
}

#top_head .nav.open .nav_header {
	background: rgba(var(--color-wh), 1);
}
#top_head .nav.open .nav_header .nav_logo svg .st0 {
	fill: rgb(var(--color-bk));
}
#top_head .nav.open .nav_header ul li a {
	color: rgb(var(--color-bk));
}

.nav_trigger {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0 .8rem;
	margin-left: -.8rem;
	margin-right: 1.2rem;
	box-sizing: border-box;
	cursor: pointer;
}
.nav_trigger rect {
	fill: rgb(var(--color-wh));
}
.glonav .nav_trigger rect {
	fill: rgb(var(--color-bk));
}
.nav_trigger span {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	box-sizing: border-box;
}

.menu_open_btn {
	visibility: visible;
	opacity: 1;
	transition: var(--transition);
}
.nav.open .menu_open_btn {
	visibility: hidden;
	opacity: 0;
}
.menu_open_btn svg {
	width: 1.8rem;
	height: .8rem;
}

.menu_close_btn {
	border: 1px solid rgb(var(--color-wh-hover));
	border-radius: 9999px;
	visibility: hidden;
	opacity: 0;
	transition: var(--transition);
}
.nav.open .menu_close_btn {
	visibility: visible;
	opacity: 1;
}
.menu_close_btn svg {
	width: 1.6rem;
	height: 1.6rem;
}

.sp_nav {
	position: fixed;
	top: var(--sp-nav-top);
	left: -100vw;
	display: block;
	width: 100vw;
	height: calc(100vh - var(--sp-nav-top));
	width: 100dvw;
	height: calc(100dvh - var(--sp-nav-top));
	padding-top: 1.2rem;
	background: rgba(var(--color-wh), 1);
	visibility: hidden;
	opacity: 0;
	box-sizing: border-box;
	transition: var(--transition);
	z-index: 9000;
}
.nav.open .sp_nav {
	left: 0;
	visibility: visible;
	opacity: 1;
}

.sp_nav > ul:first-of-type li {
	font-size: 1.5rem;
	padding: 1rem 2rem;
}
.sp_nav > ul:first-of-type li a {
	display: block;
	width: 100%;
}
.sp_nav > ul:last-of-type {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	width: 100vw;
	height: 6.2rem;
	border-top: .1rem solid rgb(var(--color-wh-hover));
	box-sizing: border-box;
}
.sp_nav > ul:last-of-type > li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	font-size: 1.8rem;
	line-height: 1em;
}

.sp_nav .nav_sns {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgb(var(--color-wh-hover));
}
.sp_nav .nav_sns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgb(var(--color-bk));
}
.sp_nav .nav_sns .sns_icon {
	display: block;
	width: 2.2rem;
	height: 2.2rem;
}
.sp_nav .reserve {
	padding: 0;
	background: rgb(var(--color-bk));
}
.sp_nav .reserve a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 1rem;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: rgb(var(--color-wh));
}
	
}

/* ==========================================================
   06. レスポンシブ: スマホ
========================================================== */

@media screen and (max-width: 750px)
{

.sp_nav > ul:first-of-type li {
	font-size: 1.4rem;
}

}