@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Header_padding: var(--padding);
		--Header_Figure_width: calc( var(--Size_10) * 10 );
		--Header_Nav_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_10);
		--Header_Checklabel_Span_Position: 4px;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Header_padding: var(--padding);
		--Header_Figure_width: calc( var(--Size_10) * 10 );
		--Header_Nav_display: none;
		--Header_Checklabel_display: flex;
		--Header_Checklabel_Size: var(--Size_14);
		--Header_Checklabel_Span_Position: 6px;
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Header_padding: var(--Size_12) var(--padding);
		--Header_Figure_width: calc( var(--Size_10) * 10 );
		--Header_Nav_display: flex;
		--Header_Checklabel_display: none;
	}
}

header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--Size_24);
	padding: var(--Header_padding);
	width: 100%;
	z-index: 9999;
	& h1 {
		display: none;
	}
	& figure {
		& a {
			display: flex;
			& svg {
				width: auto;
				height: 32px;
				& .st0 {
					fill: var(--Color_FF);
				}
			}
		}
	}
	& > nav {
		flex: 1;
		display: var(--Header_Nav_display);
		justify-content: flex-start;
		gap: var(--Margin_S);
		& div {
			display: flex;
			align-items: center;
			& em {
				display: inline-flex;
				align-items: center;
				font-size: var(--Size_08);
				color: var(--Color_FF);
			}
		}
		& a {
			display: inline-flex;
			align-items: center;
			font-size: var(--Size_08);
			color: var(--Color_FF);
			& img {
				width: auto;
				height: 22px;
			}
		}
		& a.out:after {
			content: "\f08e";
			padding: 0 0 0 var(--Size_04);
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
		}
		& .has-sub-menu {
			transition: var(--Transition);
			-o-transition: var(--Transition);
			-moz-transition: var(--Transition);
			-webkit-transition: var(--Transition);
			& .sub-menu-content {
				visibility: hidden;
				position: absolute;
				top: -10px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: var(--Gap_M);
				padding: var(--Gap_M);
				background: var(--Color_R100);
				z-index: 2;
				opacity: 0;
				transition: var(--Transition);
				-o-transition: var(--Transition);
				-moz-transition: var(--Transition);
				-webkit-transition: var(--Transition);
				& a {
					white-space: nowrap;
				}
			}
		}
		& .has-sub-menu:nth-of-type(1) {
			& .sub-menu-content {
				left: -10px;
			}
		}
		& .has-sub-menu:nth-of-type(2) {
			& .sub-menu-content {
				left: -10px;
			}
		}
		& .has-sub-menu:hover {
			& .sub-menu-content {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

body#Teppen_Dash_Company {
	& header {
		background: var(--Color_K);
		& figure {
			& a {
				& svg {
					& .st0 {
						fill: var(--Color_FF);
					}
				}
				& #teppen_dash_company {
					aspect-ratio: 300 / 59;
				}
			}
			& a:hover {
				& svg {
					& .st0 {
						fill: var(--Color_R);
					}
				}
			}
		}
		& > nav {
			& a {
				& svg {
					& .st0 {
						fill: var(--Color_FF);
					}
				}
				& #teppen_japan {
					height: var(--Size_12);
					aspect-ratio: 112 / 22;
				}
			}
			& a:hover {
				color: var(--Color_R);
				& svg {
					& .st0 {
						fill: var(--Color_R);
					}
				}
			}
		}
	}
}

body#Teppen_Japan {
	& header {
		background: var(--Color_R);
		& figure {
			& a {
				& svg {
					& .st0 {
						fill: var(--Color_FF);
					}
				}
				& #teppen_japan {
					aspect-ratio: 112 / 22;
				}
			}
			& a:hover {
				& svg {
					& .st0 {
						fill: var(--Color_K);
					}
				}
			}
		}
		& > nav {
			& a {
				& svg {
					& .st0 {
						fill: var(--Color_FF);
					}
				}
				& #teppen_dash_company {
					height: var(--Size_12);
					aspect-ratio: 300 / 59;
				}
			}
			& a:hover {
				color: var(--Color_K);
				& svg {
					& .st0 {
						fill: var(--Color_K);
					}
				}
			}
		}
	}
}

.checkbox {
	display: none;
}

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

.checkbox:checked ~ .checklabel {
	& span {
		background: var(--Color_FF000);
	}
	& span:before {
		bottom: 0;
		transform: rotate(45deg);
	}
	& span:after {
		top: 0;
		transform: rotate(-45deg);
	}
}

.checkbox:checked ~ #menu {
	transform: scale(1, 1);
	transform-origin: top;
	transition: var(--Transition);
	& a,
	& li {
		opacity: 1;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
	}
}

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_18);
		background: var(--Color_1D100);
		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: 9999;
		& nav {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			gap: var(--Gap_L);
			& a {
				display: flex;
				align-items: center;
				font-size: var(--Size_10);
				color: var(--Color_FF);
				& svg {
					& .st0 {
						fill: var(--Color_FF);
					}
				}
				& #teppen_japan {
					height: var(--Size_12);
					aspect-ratio: 112 / 22;
				}
				& #teppen_dash_company {
					height: var(--Size_12);
					aspect-ratio: 300 / 59;
				}
			}
			& a.out:after {
				content: "\f08e";
				padding: 0 0 0 var(--Size_04);
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
			}
			& a:hover {
				color: var(--Color_R);
				& svg {
					& .st0 {
						fill: var(--Color_R);
					}
				}
			}
			& details {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				& summary {
					font-size: var(--Size_10);
					color: var(--Color_FF);
					cursor: pointer;
				}
				& div {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					gap: var(--Gap_L);
					padding: var(--Gap_L) 0 0;
				}
			}
			& details[open] {
				animation: details-fadeIn 0.5s ease;
			}
			& em {
				font-size: var(--Size_10);
				color: var(--Color_FF);
			}
		}
	}
}

details {
	& summary::-webkit-details-marker,
	& summary::marker {
		display: none;
	}
}

@keyframes details-fadeIn {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}