@charset "utf-8";

:root {

}

/* モバイル */
@media screen and (max-width: 1024px) {
	:root {
		--Header_Flex-direction: column;
		--Header_justify-content: flex-end;
		--Header_align-items: flex-start;
		--Header_padding: 0 calc( 1 * var(--BaseSize) ) calc( .5 * var(--BaseSize) );
		--Header_height: calc( 6 * var(--BaseSize) );
		--Header_Div_flex: none;
		--Header_Div1_height: auto;
		--Header_Div2_width: 100%;
	}
}

/* PC */
@media screen and (min-width: 1025px) {
	:root {
		--Header_Flex-direction: row;
		--Header_justify-content: space-between;
		--Header_align-items: flex-end;
		--Header_padding: 0 calc( 1 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
		--Header_height: calc( 6 * var(--BaseSize) );
		--Header_Div_flex: 1;
		--Header_Div1_height: 100%;
		--Header_Div2_width: auto;
	}
}





/**
 * ヘッダー
 */


section#Admin {
	& div#app {
		& header {
			display: flex;
			flex-direction: var(--Header_Flex-direction);
			justify-content: var(--Header_justify-content);
			align-items: var(--Header_align-items);
			gap: calc( .5 * var(--BaseSize) );
			padding: var(--Header_padding);
			width: 100vw;
			height: var(--Header_height);
			overflow: clip;
			backdrop-filter: var(--backdrop-filter_blur);
			& div {
				display: flex;
				gap: calc( .5 * var(--BaseSize) );
				& h1 {
					margin: 0;
					padding: 0;
					font-size: calc( 1.6 * var(--BaseSize) );
					font-weight: 600;
					line-height: 1;
					color: var(--Theme-100);
				}
			}
			& div:nth-of-type(1) {
				flex: var(--Header_Div_flex);
				align-items: center;
				height: var(--Header_Div1_height);
			}
			& div:nth-of-type(2) {
				justify-content: flex-end;
				align-items: flex-end;
				width: var(--Header_Div2_width);
			}
			& button.active {
				color: var(--Color_FF);
				background-color: var(--Theme-040);
			}
		}
	}
}