@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

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

		/* ヘッダー */
		--Header_margin: var(--Size_12) var(--Size_06) 0;
		--Header_width: calc( 100% - calc( var(--Size_06) * 2 ) );
		--Header_Figure_width: calc( var(--Size_10) * 7 );
		--Header_P_padding: 0 var(--Size_10) 0;

		--Header_MenuPc_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_margin: var(--Size_12) var(--Size_12) 0;
		--Header_width: calc( 100% - calc( var(--Size_12) * 2 ) );
		--Header_Figure_width: calc( var(--Size_10) * 7 );
		--Header_P_padding: 0 var(--Size_10) 0;

		--Header_MenuPc_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_margin: var(--Size_12);
		--Header_width: calc( 100% - calc( var(--Size_12) * 2 ) );
		--Header_Figure_width: calc( var(--Size_10) * 7 );
		--Header_P_padding: 0;

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

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

		/* ヘッダー */
		--Header_margin: var(--Size_12) calc( calc( 100% - 1024px) / 2) 0;
		--Header_width: 1024px;
		--Header_Figure_width: calc( var(--Size_10) * 7 );
		--Header_P_padding: 0;

		--Header_MenuPc_display: flex;
		--Header_Checklabel_display: none;
	}
}

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

		/* ヘッダー */
		--Header_margin: var(--Size_12) calc( calc( 100% - 1024px) / 2) 0;
		--Header_width: 1024px;
		--Header_Figure_width: calc( var(--Size_10) * 7 );
		--Header_P_padding: 0;

		--Header_MenuPc_display: flex;
		--Header_Checklabel_display: none;
	}
}

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

		/* ヘッダー */
		--Header_margin: var(--Size_12) calc( calc( 100% - 1024px) / 2) 0;
		--Header_width: 1024px;
		--Header_Figure_width: calc( var(--Size_10) * 7 );
		--Header_P_padding: 0;

		--Header_MenuPc_display: flex;
		--Header_Checklabel_display: none;
	}
}










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



header {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	background: var(--Color_1D100);
	& div#time {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: var(--Size_04) var(--Padding_Side);
		background: var(--Color_1D100);
		& > div {
			display: flex;
			align-items: center;
			font-size: var(--Size_08);
			color: var(--Color_FF100);
			line-height: 1;
			& i {
				margin: var(--Size_02) var(--Size_03) 0 0;
			}
		}
		& ul {
			display: flex;
			gap: var(--Size_04);
			& li {
				& a {
					& i {
						font-size: var(--Size_10);
						color: var(--Color_FF100);
					}
				}
			}
		}

	}
	& #head {
		display: flex;
		flex-direction: column;
		padding: var(--Size_10) var(--Padding_Side);
		background: var(--Color_FF100);
		border-radius: var(--Border-radius_Top);
		& #head1 {
			display: flex;
			justify-content: space-between;
			& figure {
				padding: var(--Size_02);
				width: var(--Header_Figure_width);
				background: var(--Color_FF100);
				border-radius: var(--Border-radius_L);
				& a {
					& img {
					}
				}
			}
			& .title {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: var(--Size_02);
				& p {
					padding: var(--Header_P_padding);
					text-align: right;
					line-height: 1;
					font-size: var(--Size_08);
					font-weight: 600;
					& i {
						padding: 0 var(--Size_04) 0 0;
						font-size: var(--Size_06);
					}
					& a {
						color: var(--Color_1D100);
					}
				}
			}
		}
		& #menu_pc {
			flex: 1;
			display: var(--Header_MenuPc_display);
			justify-content: center;
			gap: var(--Gap);
			& nav {
				display: flex;
				justify-content: flex-start;
				gap: var(--Size_08);
				& ul {
					display: flex;
					justify-content: flex-start;
					gap: var(--Size_12);
					& li {
						& > a {
							display: flex;
							align-items: center;
							font-size: var(--Size_10);
							color: var(--Color_1D100);
							font-weight: 600;
							line-height: 1;
						}
						& > a:hover {
							color: var(--Color_B100);
						}
						& ul {
							position: absolute;
							top: 100%;
							left: 0;
							display: none;
							gap: var(--Size_06);
							padding: var(--Size_06) var(--Size_06);
							width: 200px;
							background: var(--Color_FF100);
							box-shadow: 0 4px 8px rgba(0,0,0,0.1);
							z-index: 1000;
							& li {
								position: relative;
								display: flex;
								& a {
									
								}
							}
						}
					}
					& li:hover {
						& ul {
							display: flex;
							flex-direction: column;
						}
					}
				}
			}
		}
	}
}








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

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

.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 div#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_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: 90;
	& nav {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: var(--Size_08);
		& a {
			display: flex;
			color: var(--Color_FF100);
			font-size: var(--Size_10);
			line-height: 1;
		}
	}
}