@charset "utf-8";

:root {

}


/* ーーーーーーーーーーーーーーーーーーーー
	ベース
ーーーーーーーーーーーーーーーーーーーー */

body#Top {
	& header {
		& #top {
			& em {
			}
		}
	}
}








body#Top {
	& main {
		flex: 1;
		display: flex;
		gap: calc( var(--BaseSize) * 2 );
		padding: calc( var(--BaseSize) * 2 );
		& section {
			flex-basis: calc( calc( 100vw - calc( var(--BaseSize) * 6 ) ) / 4 );
			display: flex;
			flex-direction: column;
			gap: calc( var(--BaseSize) * 2 );
			padding: calc( var(--BaseSize) * 2 );
			background: var(--Color_K100);
			border-radius: var(--Border-radius_S);
			& figure {
				display: flex;
				justify-content: center;
				width: 100%;
				aspect-ratio: 4 / 3;
				& img {
					width: 60%;
				}
			}
			& a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: var(--BaseSize);
				padding: 1vw 0;
				background: var(--Color_K100);
				border-radius: var(--Border-radius_S);
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
				& em {
					font-size: 1.6vw;
				}
			}
			& a:before {
				position: absolute;
				top: var(--BaseSize);
				left: var(--BaseSize);
				display: inline-flex;
				padding: .2vw .6vw;
				font-size: .8vw;
				font-weight: 600;
				line-height: 1.1;
				border-radius: var(--Border-radius_L);
			}
			& a.BASE:before {
				content: '通常';
				color: var(--Color_FF100);
				background: var(--Color_CV100);
			}
			& a.BASE_2:before {
				content: '16日まで';
				color: var(--Color_1D100);
				background: var(--Color_FF100);
			}
			& a.TEST:before {
				content: 'TEST';
				color: var(--Color_1D100);
				background: var(--Color_FF100);
			}
		}
		& section.CV {
			background: linear-gradient( 0deg, var(--Color_CV000), var(--Color_CV040));
			border: 1px var(--Color_CV100) solid;
			& a:hover {
				background: var(--Color_CV100);
			}
		}
		& section.CX {
			background: linear-gradient( 0deg, var(--Color_CX000), var(--Color_CX040));
			border: 1px var(--Color_CX100) solid;
			& a:hover {
				background: var(--Color_CX100);
			}
		}
	}
}








body#Top {
	& footer {
		& #top {
			& em {
			}
		}
	}
}