@charset "utf-8";

:root {

}

/* モバイル */
@media screen and (max-width: 1024px) {
	:root {
		--Header_height: calc( 6 * var(--BaseSize) );
		--Header_justify-content: center;
		--Header_Div_flex: none;
	}
}

/* PC */
@media screen and (min-width: 1025px) {
	:root {
		--Header_height: calc( 6 * var(--BaseSize) );
		--Header_justify-content: space-between;
		--Header_Div_flex: 1;
	}
}





/**
 * ヘッダー
 */


article#app {
	& header {
		display: flex;
		flex-direction: var(--Flex-direction_CCRRRR);
		justify-content: var(--Header_justify-content);
		align-items: flex-end;
		gap: calc( .5 * var(--BaseSize) );
		padding: calc( 1 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
		width: 100vw;
		height: var(--Header_height);
		background: var(--Theme-100);
		& div {
			display: flex;
			gap: calc( .5 * var(--BaseSize) );
			& h1 {
				margin: 0;
				padding: 0;
				font-size: calc( 1 * var(--BaseSize) );
				font-weight: 400;
				line-height: 1;
				color: var(--Color_FF100);
			}
		}
		& div:nth-of-type(1) {
			flex: var(--Header_Div_flex);
		}
		& button.active {
			color: var(--Color_FF);
			background-color: var(--Theme-040);
		}
	}
}