@charset "utf-8";

:root {
}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {

		/* ヘッダー */
		--Header_padding: var(--padding);
		--Header_Figure_width: var(--Size_22);

		--Header_Nav_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_10);
		--Header_Checklabel_Span_Position: 4px;
	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {

		/* ヘッダー */
		--Header_padding: var(--padding);
		--Header_Figure_width: var(--Size_24);

		--Header_Nav_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_12);
		--Header_Checklabel_Span_Position: 5px;
	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		/* ヘッダー */
		--Header_padding: var(--padding);
		--Header_Figure_width: var(--Size_34);

		--Header_Nav_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_14);
		--Header_Checklabel_Span_Position: 6px;
	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		/* ヘッダー */
		--Header_padding: var(--Size_12) var(--padding);
		--Header_Figure_width: var(--Size_34);

		--Header_Nav_display: flex;
		--Header_Checklabel_display: none;
	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

		/* ヘッダー */
		--Header_padding: var(--Size_12) var(--padding);
		--Header_Figure_width: var(--Size_34);

		--Header_Nav_display: flex;
		--Header_Checklabel_display: none;
	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {

		/* ヘッダー */
		--Header_padding: var(--Size_12) var(--padding);
		--Header_Figure_width: var(--Size_34);

		--Header_Nav_display: flex;
		--Header_Checklabel_display: none;
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   ヘッダー 
ーーーーーーーーーーーーーーーーーーーー */

header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--Size_12);
	padding: var(--Header_padding);
	width: 100%;
	height: var(--Size_36);
	background: var(--Color_FF080);
	border-bottom: 1px var(--Color_1D020) solid;
	z-index: 10;
	backdrop-filter: var(--Backdrop-filter_blur_on);
	-o-backdrop-filter: var(--Backdrop-filter_blur_on);
	-moz-backdrop-filter: var(--Backdrop-filter_blur_on);
	-webkit-backdrop-filter: var(--Backdrop-filter_blur_on);
	& h1 {
		display: none;
	}
	& figure {
		width: var(--Header_Figure_width);
		& a {
			display: flex;
			& img {
				aspect-ratio: 300 / 107;
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	ヘッダー
	ナビ
ーーーーーーーーーーーーーーーーーーーー */


header {
	& > nav {
		flex: 1;
		display: var(--Header_Nav_display);
		justify-content: flex-start;
		gap: var(--Size_08);
		& a {
			display: flex;
			align-items: center;
			font-size: var(--Size_08);
			color: var(--Color_1D060);
			font-weight: 600;
			line-height: 1;
		}
		& a:hover {
			color: var(--Color_1D100);
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   ヘッダー
	予約
ーーーーーーーーーーーーーーーーーーーー */

header {
	& #reservations {
		display: flex;
		justify-content: center;
		& a {
			display: flex;
			justify-content: center;
			padding: var(--Size_03) var(--Size_06);
			color: var(--Color_FF100);
			font-size: var(--Size_08);
			line-height: 1;
			background: var(--Color_A100);
			border-radius: var(--Border-radius_L);
		}
		& a:hover {
			color: var(--Color_FF100);
			background: var(--Color_1D100);
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
	ヘッダー
	ハンバーガー
ーーーーーーーーーーーーーーーーーーーー */

/* チェックボックス */

.checkbox {
	display: none;
}

.checkbox:checked ~ #menu {
	transform: scale(1, 1);
	transform-origin: top;
	transition: var(--Transition_04s);
}

.checkbox:checked ~ #menu a,
.checkbox:checked ~ #menu li {
	opacity: 1;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}

.checklabel {
	position: relative;

	display: var(--Header_Checklabel_display);
	align-items: center;
	padding: 0;
	width: var(--Header_Checklabel_Size);
	height: var(--Header_Checklabel_Size);
	z-index: 1;
	cursor: pointer;
	& .checklabel span {
    	position: relative;
	}
}
.checklabel span,
.checklabel span:before,
.checklabel span:after {
	content: '';
	position: absolute;
	display: block;
	width: var(--Header_Checklabel_Size);
	height: 2px;
	background: var(--Color_1D100);
	border-radius: var(--Border-radius_S);
	transition: 0.2s;
}

/* 三本線の一番上の棒の位置調整 */
.checklabel span:before {
	bottom: var(--Header_Checklabel_Span_Position);
}

/* 三本線の真ん中の棒の位置調整 */
.checklabel span {
	background: rgba(255, 255, 255, 0);
}

/* 三本線の一番下の棒の位置調整 */
.checklabel span:after {
	top: var(--Header_Checklabel_Span_Position);
}

/* アイコンがクリックされたら真ん中の線を透明にする */
.checkbox:checked ~ .checklabel span {
	background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
.checkbox:checked ~ .checklabel span:before {
	bottom: 0;
	transform: rotate(45deg);
}

.checkbox:checked ~ .checklabel span:after {
	top: 0;
	transform: rotate(-45deg);
}


/* メニュー */

header {
	& #menu {
		position: absolute;
		top: var(--Size_28);
		right: var(--Size_06);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--Size_04);
		padding: var(--Size_12) var(--Size_12) var(--Size_12) var(--Size_12);
		background: var(--Color_3D100);
		border-radius: var(--Border-radius_S);
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		transform: scale( 1, 0 );
		transform-origin: top;
		z-index: 90;
		& nav {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: var(--Size_10);
			& a {
				display: flex;
				color: var(--Color_FF100);
				font-size: var(--Size_10);
				line-height: 1;
			}
		}
	}
}