@charset "utf-8";

:root {
}

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

		/* ヘッダー */
		--Header_margin: 0;
		--Header_padding: var(--Size_06) var(--Size_06) var(--Size_06) calc( var(--Header_Figure_width) + var(--Size_06) );
		--Header_width: 100%;

		--Header_Figure_width: var(--Size_36);
		--Header_MenuPc_Nav_A_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_10);
		--Header_Checklabel_Span_Position: 4px;
		--Header_Lang_display: none;

		/* リンク */
		--Link_display: none;

	}
}

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

		/* ヘッダー */
		--Header_margin: 0;
		--Header_padding: var(--Size_06) var(--Size_06) var(--Size_06) calc( var(--Header_Figure_width) + var(--Size_06) );
		--Header_width: 100%;

		--Header_Figure_width: var(--Size_36);
		--Header_MenuPc_Nav_A_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_12);
		--Header_Checklabel_Span_Position: 5px;
		--Header_Lang_display: none;

		/* リンク */
		--Link_display: none;

	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
		
		/* ヘッダー */
		--Header_margin: 0;
		--Header_padding: var(--Size_08) var(--Size_12) var(--Size_08) calc( var(--Header_Figure_width) + var(--Size_08) );
		--Header_width: 100%;

		--Header_Figure_width: var(--Size_36);
		--Header_MenuPc_Nav_A_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_14);
		--Header_Checklabel_Span_Position: 6px;
		--Header_Lang_display: none;

		/* リンク */
		--Link_display: none;

	}
}

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

		/* ヘッダー */
		--Header_margin: 0 calc( calc( 100% - var(--Width) ) / 2 );
		--Header_padding: var(--Size_08) var(--Size_12) var(--Size_08) calc( var(--Header_Figure_width) + var(--Size_08) );
		--Header_width: var(--Width);

		--Header_Figure_width: var(--Size_36);
		--Header_MenuPc_Nav_A_display: flex;
		--Header_Checklabel_display: none;
		--Header_Lang_display: flex;

		/* リンク */
		--Link_display: flex;

	}
}

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

		/* ヘッダー */
		--Header_margin: 0 calc( calc( 100% - var(--Width) ) / 2 );
		--Header_padding: var(--Size_08) var(--Size_12) var(--Size_08) calc( var(--Header_Figure_width) + var(--Size_08) );
		--Header_width: var(--Width);

		--Header_Figure_width: var(--Size_36);
		--Header_MenuPc_Nav_A_display: flex;
		--Header_Checklabel_display: none;
		--Header_Lang_display: flex;

		/* リンク */
		--Link_display: flex;

	}
}

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

		/* ヘッダー */
		--Header_margin: 0 calc( calc( 100% - var(--Width) ) / 2 );
		--Header_padding: var(--Size_08) var(--Size_12) var(--Size_08) calc( var(--Header_Figure_width) + var(--Size_08) );
		--Header_width: var(--Width);

		--Header_Figure_width: var(--Size_36);
		--Header_MenuPc_Nav_A_display: flex;
		--Header_Checklabel_display: none;
		--Header_Lang_display: flex;

		/* リンク */
		--Link_display: flex;

	}
}








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

header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin: var(--Header_margin);
	padding: var(--Header_padding);
	width: var(--Header_width);
	background: var(--Color_1D080);
	border-bottom: 1px var(--Color_A100) solid;
	border-radius: 0 0 var(--Size_04) var(--Size_04);
	z-index: 2000;
	backdrop-filter: var(--backdrop-filter_blur);
	-o-backdrop-filter: var(--backdrop-filter_blur);
	-moz-backdrop-filter: var(--backdrop-filter_blur);
	-webkit-backdrop-filter: var(--backdrop-filter_blur);
	& figure {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		width: var(--Header_Figure_width);
		& a {
			display: flex;
			padding: var(--Size_08);
			background: var(--Color_A100);
			background-size: 400% 200%;
			border-radius: 0 0 var(--Size_04) var(--Size_04);
			animation: BGAnimation 10s ease infinite;
			& img {
				width: 100%;
				transform: rotate( 0 );
				transition: var(--Transition_04s);
			}
		}
		& a:hover {
			& img {
				opacity: 1;
				transform: rotate( -8deg );
			}
		}
	}
}

.kanda {
	& header {
		border-bottom: 1px var(--Color_A100) solid;
		& figure {
			& a {
				background: var(--Color_K100);
			}
		}
	}
}

.osaka {
	& header {
		border-bottom: 1px var(--Color_A100) solid;
		& figure {
			& a {
				background: var(--Color_O100);
			}
		}
	}
}

.naha {
	& header {
		border-bottom: 1px var(--Color_N100) solid;
		& figure { 
			& a {
				background: var(--Color_N100);
			}
		}
	}
}

@keyframes BGAnimation {
	  0% { background-position:   0% 50%; }
	 50% { background-position: 100% 50%; }
	100% { background-position:   0% 50%; }
}








/* ーーーーーーーーーーーーーーーーーーーー
	ヘッダー
	PC メニュー
ーーーーーーーーーーーーーーーーーーーー */

header {
	& #menu_pc {
		flex: 1;
		display: flex;
		justify-content: space-between;
		gap: var(--Size_12);
		& nav {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			gap: var(--Size_08);
			& img {
				width: var(--Header_Figure_width);
			}
			& a {
				display: var(--Header_MenuPc_Nav_A_display);
				align-items: center;
				font-size: var(--Size_08);
				color: var(--Color_FF100);
				font-weight: 600;
				line-height: 1;
				& span {
					display: flex;
					align-items: center;
					gap: var(--Size_02);
					& img {
						width: var(--Size_10);
					}
				}
			}
			& a:hover {
				color: var(--Color_A100);
			}
		}
	}
}

.kanda header #menu_pc nav a:hover {
	color: var(--Color_K100);
}

.osaka header #menu_pc nav a:hover {
	color: var(--Color_O100);
}

.naha header #menu_pc nav a:hover {
	color: var(--Color_N100);
}








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

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

.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: 1px;
    background: var(--Color_FF100);
    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 div#menu {
	position: absolute;
	top: var(--Size_28);
	right: var(--Size_06);
	display: flex;
	flex-direction: column;
	gap: var(--Size_04);
	padding: var(--Size_12) var(--Size_24) 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: 0;
}

header div#menu nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--Size_08);
}

header div#menu nav a {
	display: flex;
	font-size: var(--Size_10);
	line-height: 1;
}

header div#menu nav a span {
	display: flex;
	align-items: center;
	gap: var(--Size_02);
	font-size: var(--Size_10);
}

header div#menu nav a span img {
	width: var(--Size_10);
}

header div#menu nav:nth-of-type(2) a {
	font-size: var(--Size_08);
}

header div#menu div {
	margin: var(--Size_08) 0 var(--Size_04);
	padding: var(--Size_02) var(--Size_04);
	font-size: var(--Size_06);
	color: var(--Color_FF100);
	line-height: 1;
	background: var(--Color_A100);
	border-radius: var(--Border-radius_S);
}

.kanda header div#menu div {
	background: var(--Color_K100);
}

.osaka header div#menu div {
	background: var(--Color_O100);
}

.naha header div#menu div {
	background: var(--Color_N100);
}







/* ーーーーーーーーーーーーーーーーーーーー
	ヘッダー
	多国語
ーーーーーーーーーーーーーーーーーーーー */

div#lang {
	position: relative;
	display: var(--Header_Lang_display);
	justify-content: center;
	& .language {
		display: none;
	}
}

.language:checked ~ .language_menu {
	transform: scale(1, 1);
	transform-origin: top;
	transition: var(--Transition_02s);
}

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

.language_icon {
	position: relative;
	display: flex;
	gap: var(--Size_04);
	cursor: pointer;
	padding: var(--Size_04) var(--Size_06) var(--Size_04);
	color: var(--Color_FF100);
	font-size: var(--Size_08);
	line-height: 1;
	background: var(--Color_A100);
	border-radius: var(--Border-radius_S);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	z-index: 1;
	transition: var(--Transition_02s);
}

.kanda .language_icon {
	background: var(--Color_K100);
}

.osaka .language_icon {
	background: var(--Color_O100);
}

.naha .language_icon {
	background: var(--Color_N100);
}

.language_icon em {
	display: flex;
}

.language_icon:hover {
	color: var(--Color_1D100);
	background: var(--Color_FF100);
}

.language_menu {
	position: absolute;
	top: var(--Size_10);
	right: var(--Size_04);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--Size_06);
	margin: 0;
	padding: var(--Size_14) var(--Size_08) var(--Size_08);
	width: calc( 100% - var(--Size_08) );
	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: 0;
}

.language_menu li {
	padding: 0;
	opacity: 0;
	transition: var(--Transition_02s);
}

.language_menu a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: capitalize;
	color: var(--Color_FF080);
	font-size: var(--Size_08);
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transition: var(--Transition_02s);
}

.language_menu a:hover {
	color: var(--Color_FF100);
	opacity: 1;
}