@charset "utf-8";

:root {

}

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

		--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_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:1024px) {
	:root {

		--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_Nav_display: flex;
		--Header_Checklabel_display: none;
	}
}

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

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

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

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

	}
}








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

header {
	position: fixed;
	padding: var(--Size_08) var(--Padding) 0;
	width: 100%;
	z-index: 999;
	& > div {
		display: flex;
		justify-content: space-between;
		padding: var(--Size_08);
		width: 100%;
		background: var(--Color_A100);
		border-radius: var(--Border-radius_S);
		& h1 {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 1px;
			font-size: 0.1em;
			color: var(--Color_FF000);
		}

		& > a {
			display: flex;
			& img {
				width: var(--Size_80);
			}
		}
		& > nav {
			display: var(--Header_Nav_display);
			gap: var(--Gap);
			& a {
				display: flex;
				align-items: center;
				padding: var(--Size_01) var(--Size_06);
				font-size: var(--Size_08);
				color: var(--Color_1D100);
				line-height: 1;
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_S);
			}
			& a.on {
				color: var(--Color_A100);
				background: var(--Color_1D100);
			}
			& a.off {
				color: var(--Color_1D100);
				background: var(--Color_1D000);
			}
			& a.on:hover {
				color: var(--Color_1D100);
				background: var(--Color_1D100);
			}
			& a.off:hover  {
				color: var(--Color_A100);
				background: var(--Color_1D100);
			}
		}

		& .wrap {
			display: var(--Header_Nav_display);
			align-items: center;
			gap: var(--Gap);
			& > a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: var(--Size_16);
				aspect-ratio: 1 / 1;
				& i {
					color: var(--Color_1D100);
					font-size: var(--Size_10);
				}
			}
			& input {
				display: none;
			}
			& label {
				display: flex;
				justify-content: center;
				align-items: center;
				width: var(--Size_16);
				color: var(--Color_1D100);
				font-size: var(--Size_10);
				aspect-ratio: 1 / 1;
				cursor: pointer;
			}
			& .world-content {
				position: absolute;
				top: var(--Size_20);
				right: 0;
				display: flex;
				flex-direction: row;
				gap: var(--Gap);
				padding: var(--Padding_S);
				visibility: hidden;
				opacity: 0;
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_S);
				z-index: 999;
				transition: var(--Transition);
				-o-transition: var(--Transition);
				-moz-transition: var(--Transition);
				-webkit-transition: var(--Transition);
				& a {
					font-size: var(--Size_08);
					white-space: nowrap;
				}
				& a:hover {
					color: var(--Color_FF100);
				}
			}
		}
	}
}

input:checked + .world-label + .world-content {
	opacity: 1;
	visibility: visible;
}



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

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

.checkbox {
	display: none;
}

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

.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);
	aspect-ratio: 1 / 1;
	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: var(--Color_FF000);
}

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

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

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
.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_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(--Margin_S);
			& 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);
					}
				}
			}
		}
	}
}