@charset "UTF-8";

/* ==============================================
   共通変数・リセット
   ============================================== */

:root {
	--color-base: #000000;
	--color-white: #ffffff;
	--color-hover-bg: #cccccc;
	--color-sub-hover-bg: #dedede;
	--transition-base: 0.5s;
}

header img,
footer img {
	vertical-align: middle;
}


/* ==============================================
   ロゴボックス（共通）
   ============================================== */

.LogoBox {
	top: 50%;
	transform: translateY(-50%);
	line-height: 1em;
}

.LogoBox img {
	width: 70px;
	width: auto;
	margin: 0 10px 0 0;
}

.LogoBox .headerTxt {
	font-size: 90%;
	display: inline-block;
	vertical-align: middle;
	color: var(--color-base);
	line-height: 1.5em;
}


/* ==============================================
   ヘッダー全体
   ============================================== */

.headerLogoBox {
	height: 80px;
	left: 20px;
	position: fixed;
	z-index: 8889;
}

header nav {
	position: relative;
	height: 100%;
    padding: 0 20px;
}

header nav .LogoBox {
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	position: absolute;
	z-index: 10000;
}

header nav .g-nav {
	display: inline-block;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	text-align: right;
}

header nav .upBox {
	text-align: right;
	display: block !important;
	margin: 0 0 4px 0;
}

header nav .upBox .snsBox img {
	width: 30px;
	vertical-align: middle;
	margin: 0 0 0 10px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}

header nav .upBox .snsBox img:hover {
	transform: scale(1.4);
	opacity: 0.5;
}

header nav .navitem {
	display: inline-block;
	line-height: 1em;
}

header nav .tel {
	display: inline-block;
	font-size: 20px;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

header nav .tel_num {
	display: inline-block;
	font-size: 40px;
	vertical-align: middle;
	transition: color var(--transition-base);
    color: #000000;
}

header nav .tel_num:hover {
	color: #008aff;
}


/* ==============================================
   PCナビゲーション（共通リンクスタイル）
   ============================================== */

.pc_menu {
	margin: 0;
	padding: 0;
	bottom: 0;
	display: inline-block;
	line-height: 1;
    text-align: right;
}

br.menu_br,
.sp_menu br.menu_br,
footer nav ul br.menu_br {
    display: none;
}

.pc_menu li {
	display: inline-block;
	position: relative;
	line-height: 1;
}

.pc_menu li a,
nav li a {
	display: inline-block;
	text-decoration: none;
	padding: 2px 0 0 0;
	margin: 0 0 0 20px;
	color: var(--color-base);
	line-height: 1.5;
	transition: color var(--transition-base);
}

.pc_menu li a:hover {
	cursor: pointer;
}

/* g-nav・フッターのアンダーラインアニメーション */
.g-nav a,
ul.pc_menu li a,
footer nav ul li a {
	outline: none;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	padding: 2px 0;
	transition: color var(--color-base);
}
.g-nav a {
}

footer nav ul li a {
	color: var(--color-white);
}

.g-nav a.menu_txt::after,
ul.pc_menu li a::after,
footer nav ul li a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	transform: translateX(0%) scale(0.1);
	transition: transform var(--transition-base) ease;
}

.g-nav a.menu_txt::after,
footer nav ul li a::after {
    background: var(--color-white);
}

ul.pc_menu li a:hover::after {
    background: var(--color-base);
}

.g-nav a.menu_txt:hover::after,
ul.pc_menu li a:hover::after,
footer nav ul li a:hover::after {
	transform: translateX(0);
	width: 100%;
}


/* ==============================================
   矢印アイコン（フィルター制御）
   ============================================== */

/* PCナビ内：白抜き */
nav li a .header_menu_arrow,
.pc_menu li a .header_menu_arrow {
	margin: 0 5px 1px 0;
/*	filter: brightness(0) invert(1);
	transition: transform 0.4s, filter 0.4s;*/
}

/* フッター・汎用 */
footer nav li a .header_menu_arrow {
	filter: brightness(0) invert(1);
}

/* ホバー時：カラーに戻す */
/*nav li a:hover .header_menu_arrow {
	filter: brightness(100%) grayscale(0%) invert(0%);
}*/

a .header_submenu_arrow {
	margin: 0 5px 1px 0;
}

/* サブメニューが存在する場合のみ矢印を回転 */
.pc_menu li:hover > a:not(:only-child) .header_menu_arrow,
.pc_menu li:hover > a:not(:only-child) + ul.sub_menu:hover .header_menu_arrow {
	transform: rotate(90deg);
}


/* ==============================================
   PCサブメニュー
   ============================================== */

.pc_menu .sub_menu {
	display: none;
	padding: 0;
	margin: 0;
	width: auto;
	text-align: left;
	position: absolute;
	border: var(--color-base) solid;
	border-width: 1px 0 0 1px;
	background-color: var(--color-white);
}

.pc_menu li .sub_menu li,
.sub_menu li {
	display: block;
	text-align: left;
	width: auto;
	padding: 0;
	margin: 0;
	border: var(--color-base) solid;
	border-width: 0 1px 1px 0;
}

.sub_menu li a {
	display: block;
	white-space: nowrap;
	padding: 5px 20px;
	margin: 0;
	color: var(--color-base);
}

.sub_menu li a:hover {
	background: var(--color-sub-hover-bg);
	color: var(--color-base);
	transition: background 0.2s;
}

.end_sub_menu {
	right: 10px;
	left: auto !important;
}


/* ==============================================
   フッター
   ============================================== */

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: 90%;
	line-height: 1.5em;
}

footer .LogoBox {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

footer .LogoBox .foot_txt {
	display: inline-block;
	vertical-align: middle;
	font-size: 90%;
    color: var(--color-white);
	line-height: 1.5em;
}

footer .LogoBox .foot_txt a {
    color: var(--color-white);
}

footer .LogoBox .foot_txt .companyName {
	margin: 0 0 5px 0;
}

footer nav {
	display: inline-block;
	right: 80px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

footer nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

footer nav ul li {
	height: 1.5em;
}

footer nav ul .sub_menu,
footer nav ul li br {
	display: none;
}

footer nav ul li a {
	padding: 0 !important;
}

footer nav li a {
	padding: 5px 10px;
	display: inline-block;
	color: var(--color-base);
	transition: color var(--transition-base);
}


/* ==============================================
   SPナビゲーション（スライスナブ）
   ============================================== */

.slicknav_menu {
	display: none;
	top: 10px;
	right: -10px;
}

li.sp_menu_list,
li.sp_menu_top {
	display: none;
}

/* ハンバーガーボタン */
.slicknav_btn {
	background-color: var(--color-base);
	width: 40px;
	height: 40px;
	float: right;
	padding: 8px 5px;
	border-radius: 5px;
	margin: 0;
	text-decoration: none;
	position: relative;
	display: block;
	cursor: pointer;
}

.slicknav_menu .slicknav_icon {
	width: 30px;
	height: 24px;
}

.slicknav_icon,
.slicknav_icon span {
	display: inline-block;
	transition: all 0.4s;
	box-sizing: border-box;
}

.slicknav_menu .slicknav_icon {
	position: relative;
	float: left;
	margin: 0;
}

.slicknav_menu .slicknav_icon-bar {
	background-color: var(--color-white);
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
}

/* バーの位置 */
.slicknav_icon span:nth-of-type(1) { top: 2px; }
.slicknav_icon span:nth-of-type(2),
.slicknav_icon span:nth-of-type(3) { top: 11px; }
.slicknav_icon span:nth-of-type(4) { bottom: 2px; }

/* アクティブ時アニメーション */
.active .slicknav_icon-bar:nth-of-type(1),
.active .slicknav_icon-bar:nth-of-type(4) { opacity: 0; }
.active .slicknav_icon-bar:nth-of-type(2) { transform: rotate(-45deg); }
.active .slicknav_icon-bar:nth-of-type(3) { transform: rotate(45deg); }

/* アコーディオン */
.slicknav_nav {
	/*レイアウト調整用*/
/*	display: block!important;*/
	border: var(--color-base) solid;
	border-width: 1px 0 0 0;
	background: rgba(0, 0, 0, 0.8);
	top: 10px !important;
	right: -20px;
	width: auto;
	height: auto;
	max-height: calc(100vh - 75px);/*navの高さ*/
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
	position: relative;
}

.slicknav_nav ul {
	display: block;
}

.slicknav_nav li {
	border: var(--color-base) solid;
	border-width: 0 1px 1px 1px;
	background-color: var(--color-white);
}

/* SPサブメニュー */
.slicknav_nav .sub_menu {
	padding: 0;
	margin: 0;
}

.slicknav_nav .sub_menu li {
	display: block;
	border: var(--color-base) solid;
	border-width: 1px 0 0 0;
}

.slicknav_nav .sub_menu a {
	padding: 10px 10px 10px 40px;
}

/* SPリンク共通 */
.slicknav_nav a {
	padding: 10px 20px;
	color: var(--color-base);
	text-decoration: none;
	position: relative !important;
	display: block;
	margin: 0;
    line-height: 1.5em;
}

.slicknav_nav a:hover {
	background: var(--color-hover-bg);
	color: var(--color-base);
}

.slicknav_nav a.insta_icon {
	display: inline-block;
}

/* SP矢印・アイコン制御 */
.slicknav_nav a .header_menu_arrow { display: none; }
.slicknav_nav .slicknav_arrow { display: none; }

.slicknav_nav a .sub_icon {
	width: 20px;
	height: 20px;
	right: 0;
	position: absolute;
	display: none;
}

.slicknav_nav .slicknav_parent a .sub_icon {
	display: inline-block;
}

/* +-アイコン */
.slicknav_nav li a .sub_icon div {
	background-color: var(--color-base);
	display: inline-block !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.2s;
}

.slicknav_nav li a .sub_icon .opcl_y {
	width: 16px !important;
	height: 2px;
}

.slicknav_nav li.slicknav_collapsed a .sub_icon .opcl_x {
	width: 2px;
	height: 16px;
}

.slicknav_nav li.slicknav_open a .sub_icon .opcl_x {
	width: 0;
	height: 2px;
}

.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 100%;
}
    
br.head_name {
	display: none!important;
}


/* ==============================================
   メディアクエリ
   ============================================== */

/* ------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
/* ------------------------------------------------------ */
br.menu_br {
    display: inline;
}

.g-nav a, ul.pc_menu li a, footer nav ul li a {
    padding: 0;
    line-height: 1.3;
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width: 1440px) {
/* ------------------------------------------------------ */
	nav li a {
		padding: 27px 20px 27px 0;
	}
}

/* ------------------------------------------------------ */
@media only screen and (max-width: 1336px) {
/* ------------------------------------------------------ */
header nav .LogoBox .headerTxt,
footer {
	font-size: 90%;
}

header nav .tel_num {
	font-size: 30px;
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width: 1100px) {
/* ------------------------------------------------------ */
    header nav .LogoBox .headerTxt {
        font-size: 70%;
    }
}

/* ------------------------------------------------------ */
@media only screen and (max-width: 1024px) {
/* ------------------------------------------------------ */
	.headerLogoBox {
		height: 60px;
	}

	header nav .g-nav,
	footer nav,
	.pc_menu_list {
		display: none;
	}

	header nav .tel {
		margin: 0;
        font-size: 24px;
	}

	header nav .LogoBox .headerTxt {
		font-size: 80%;
		line-height: 1.3em;
	}

	footer .LogoBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}

	.slicknav_menu {
		display: block;
		position: absolute;
		left: auto;
		z-index: 9999;
	}

	.slicknav_nav {
		overflow: auto;
	}

	.sp_menu li.sp_menu_list {
		display: block;
		text-align: center;
		padding: 10px 0;
		line-height: 1em;
	}
    
    li.sp_menu_top {
        display: block;
    }

	.sp_menu li.sp_menu_list.tel_reserv {
		padding: 0;
        text-align: center;
	}

	.sp_menu li.sp_menu_list.flagsBox {
		padding: 10px;
	}

	.sp_menu li.sp_menu_list a:hover {
		background-color: var(--color-white);
	}

	.qrCode a {
		padding: 20px;
	}
}

/* ------------------------------------------------------ */
@media only screen and (max-width: 810px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
@media only screen and (max-width: 600px) {
/* ------------------------------------------------------ */
	.LogoBox .headerTxt br,
	.catch {
		display: none;
	}
    
	br.head_name {
		display: inline!important;
	}

	.LogoBox .headerTxt br.mo_br {
		display: inline-block;
	}

	.slicknav_menu {
		width: calc(100% + 40px);
	}

	.slicknav_nav {
		width: 100%;
		left: 10px;
	}

	footer .LogoBox {
		text-align: center;
	}

	footer .LogoBox .foot_txt .companyName {
		margin: 5px 10px;
	}
}