@charset "UTF-8";

.grad-mv {
	background: linear-gradient(135deg, #FFE9C7 0%, #FFD9A0 100%);
	padding: 52px 32px 44px; text-align: center;
}
.grad-mv_en { font-size: .78rem; letter-spacing: .14em; color: #9C6B2E; font-weight: 700; text-transform: uppercase; }
.grad-mv_ttl { font-family: var(--sans); font-size: 1.7rem; margin: .5rem 0 0; color: #3E2E16; }
.grad-mv_lead { font-size: .92rem; color: #5B4526; margin-top: .7rem; max-width: 38em; margin-left: auto; margin-right: auto; }

.grad-section { max-width: 1200px; margin: 0 auto; padding: 8px 32px 64px; }
.grad-grid { display: flex; gap: 28px; flex-wrap: wrap; }
.grad-card {
	flex: 1; min-width: 320px;
	background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 2px 10px rgba(20, 20, 20, .03);
}
.grad-card_banner { display: block; }
.grad-card_banner img { width: 100%; height: auto; }
.grad-card_body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: .9rem; flex: 1; }

.grad-card_status {
	align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
	padding: .3rem .75rem; border-radius: 100px;
}
.grad-card-27 .grad-card_status { background: #FBF1DF; color: #9C6B2E; border: 1px solid #E9D3A6; }
.grad-card-28 .grad-card_status { background: #E4F1F1; color: #1E7A82; border: 1px solid #BFDEDF; }

.grad-card_headline { font-size: 1.05rem; font-weight: 700; line-height: 1.6; margin: 0; }
.grad-card_sub { font-size: .82rem; color: var(--ink-soft); margin: -.5rem 0 0; }
.grad-card_text { font-size: .88rem; color: var(--ink-soft); flex: 1; margin: 0; }

.grad-card_cta {
	align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
	margin-top: .3rem; padding: .65rem 1.3rem; border-radius: 100px;
	font-size: .84rem; font-weight: 700; color: #fff; transition: opacity .15s;
}
.grad-card_cta-27 { background: #9C6B2E; }
.grad-card_cta-28 { background: #1E7A82; }
.grad-card_cta:hover { opacity: .85; }
.grad-card_cta::after { content: '↗'; font-size: .9em; }

@media (max-width: 767px) {
	.grad-grid { flex-direction: column; }
}