@charset "utf-8";

:root {

}

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

	}
}

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

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {
	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
	}
}

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

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

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








/* ーーーーーーーーーーーーーーーーーーーー
	Why_Avenue
ーーーーーーーーーーーーーーーーーーーー */

#contents.why_avenue {
	& > div#why {
		display: flex;
		flex-direction: column;
		gap: var(--Gap);
		margin: var(--Card_margin);
		& > div {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--Size_06);
			padding: var(--Size_12);
			background: var(--Color_FF100);
			border-radius: var(--Border-radius_S);
			& h3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: var(--Size_06);
				font-size: var(--Size_12);
				color: var(--Color_B100);
				& i {
					display: flex;
					justify-content: center;
					align-items: center;
					width: var(--Size_24);
					font-size: var(--Size_14);
					color: var(--Color_FF100);
					background: var(--Color_B100);
					border-radius: var(--Border-radius_L);
					aspect-ratio: 1 / 1;
				}
			}
			& p {
				& em {
					color: var(--Color_B100);
					font-style: italic;
				}
			}
		}
	}
}