@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
   トップ
ーーーーーーーーーーーーーーーーーーーー */

body#top {
	& article {
		display: flex;
		flex-direction: column;
		gap: calc( 2 * var(--BaseSize) );
		padding: calc( 2 * var(--BaseSize) );
		height: 100vh;
		& aside {
			& div#h2 {
				flex-basis: 100%;
				font-size: calc( 6 * var(--BaseSize) );
				color: var(--Color_FF100);
			}
		}
		& main {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			gap: calc( 2 * var(--BaseSize) );
			width: 100%;
			& section {
				flex-basis: calc( calc( 100% - calc( 4 * var(--BaseSize) ) ) / 3 );
				display: flex;
				flex-direction: column;
				gap: calc( 1 * var(--BaseSize) );
				padding: calc( 2 * var(--BaseSize) );
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_S);
				& div#h3 {
					display: flex;
					gap: calc( 1 * var(--BaseSize) );
					padding: 0 0 calc( 2 * var(--BaseSize) );
					& figure {
						width: calc( 6 * var(--BaseSize) );
						border-radius: var(--Border-radius_L);
						aspect-raito: 1 / 1;
						overflow: clip;
						& img {
						}
					}
					& em {
						font-size: calc( 4 * var(--BaseSize) );
						color: var(--Color_FF100);
					}
				}
				& a {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: calc( 1.6 * var(--BaseSize) ) calc( 2 * var(--BaseSize) );
					font-size: calc( 4 * var(--BaseSize) );
					color: var(--Color_FF100);
					line-height: 1;
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
				}
				& a.kanda {
					background: var(--Color_K040);
					border: 2px var(--Color_K100) solid;
				}
				& a.kanda:hover {
					border: 1px var(--Color_K100) solid;
				}
				& a.osaka {
					background: var(--Color_O040);
					border: 2px var(--Color_O100) solid;
				}
				& a.naha {
					background: var(--Color_N040);
					border: 2px var(--Color_N100) solid;
				}
			}
		}
	}
}