.as-intro {
	background-color: var(--contrast-3);
	padding: 60px 0;
	color: var(--as-color-navy);
	@media (min-width: 769px) {
		padding: 60px 0 124px;
	}

	.as-intro__text {
		margin: 24px 0 40px;
		font-size: var(--as-font-size-base);
		font-style: normal;
		font-weight: var(--as-font-weight-regular);
		line-height: var(--as-line-height-double);
		letter-spacing: var(--as-letter-spacing-sm);
		@media (min-width: 769px) {
			margin: 23px 0 42px;
			font-size: var(--as-font-size-lg);
			text-align: center;
		}
	}

	.as-intro__button {
		margin: 40px auto 0;
		max-width: 320px;
	}
}

.as-intro__top {
	padding-inline: var(--as-gutter);
	max-width: 882px;
	margin: 0 auto;
	font-family: var(--as-font-ja-serif);
}

.as-intro__bottom {
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin-top: 80px;

	@media (min-width: 769px) {
		gap: 120px;
		margin-top: 120px;
	}
}

/* EN: text column is centered */
.as-intro--en {
	.as-intro__text {
		text-align: center;
	}
}

/* JA: only logo and heading are centered, text is default */
.as-intro--ja {
	.as-intro__logo {
		text-align: center;
	}
}