@charset "UTF-8";

/* =============================================================
   SLA page (business/sla/)
   Shared parts (#breadcrumb / #page-hero / #func-nav / #faq /
   #news / .func-table__promo* / .section-ttl / .badge-float /
   btn-*) come from common.css. This file only holds the
   SLA-specific intro band, spec tables and prose blocks.
   ============================================================= */

/* page-wide background (SLA only): #page-hero/#breadcrumb/#news stay
   white (.bgwhite, common.css) — everything else reads as #f7fbfc */
body {
	background: #f7fbfc;
}

/* #sla-intro: green statement band above the anchor nav (.intro-band is shared with feature #intro) */
#sla-intro {
	& .sla-intro__ttl-accent {
		color: #ff5874;
    font-weight: 700;
	}
	& .sla-intro__lead {
		margin-top: 20px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.75;
		letter-spacing: .04em;
		color: var(--col-text);
	}
}

/* #func-nav override (SLA only): sits directly on the green intro band */
#func-nav {
	background: none;
	margin-top: -30px;
}

/* shared section scaffolding (.section-ttl--heavy is shared, see common.css) */
.sla-section {
	--sla-bg: #f7fbfc;
	background: var(--sla-bg);
	& .sla-section__ttl {
		margin-bottom: 44px;
	}
}
.sla-section--tint {
	--sla-bg: #f7fbfc;
}
#apply {
	background: #e9f8ef;
}

/* .sla-block: a titled sub-section (green rule heading + body) */
.sla-block {
	max-width: 1000px;
	margin: 0 auto;
	& + .sla-block {
		margin-top: 56px;
	}
}
.sla-block__ttl {
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--col-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	letter-spacing: .02em;
	color: var(--col-primary);
}
.sla-block__ttl + * {
	margin-top: 24px;
}
.sla-note + .sla-block {
	margin-top: 48px;
}

/* body copy / notes */
.sla-body {
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: .04em;
	color: var(--col-text);
	& p + p {
		margin-top: 4px;
	}
}
.sla-body--center {
	text-align: center;
}
.sla-note {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.7;
}
.sla-note--center {
	text-align: center;
	font-size: 13px;
}
/* .sla-note--marked: pins a leading "※" so wrapped lines indent past it instead of tucking underneath */
.sla-note--marked {
	position: relative;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.2em;
	text-align: left;
	&::before {
		content: "※";
		position: absolute;
		top: 0;
		left: 0;
	}
}
.sla-body + .sla-table,
.sla-table + .sla-note,
.sla-formula + .sla-note {
	margin-top: 16px;
}
.sla-note + .sla-table {
	margin-top: 24px;
}

/* .sla-table: teal-label spec table */
.sla-table {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .04em;
	& th,
	& td {
		padding: 13px 20px;
		border: 1px solid var(--col-border);
		text-align: left;
		vertical-align: top;
	}
	& th {
		background: var(--col-teal);
		color: var(--col-white);
		font-weight: 700;
	}
	& td {
		background: var(--col-white);
		color: var(--col-text);
	}
}
/* key/value rows: narrow teal label column */
.sla-table--kv th[scope="row"] {
	width: 300px;
}
/* two even columns with a teal header row */
.sla-table--split th,
.sla-table--split td {
	width: 50%;
}

/* .sla-formula: highlighted calculation line */
.sla-formula {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px 24px;
	background: #edf9f3;
	border: 1px solid var(--col-border);
	border-radius: 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
	text-align: center;
	color: var(--col-primary);
}

/* .sla-card: white bordered card wrapping a bullet list */
.sla-card {
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 40px;
	background: var(--col-white);
	border: 1px solid var(--col-border);
	border-radius: 10px;
}
.sla-body + .sla-card,
.sla-lead + .sla-card {
	margin-top: 24px;
}

/* .sla-list: green-dot bullet list */
.sla-list {
	& li {
		position: relative;
		padding-left: 20px;
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: .04em;
		color: var(--col-text);
	}
	& li + li {
		margin-top: 7px;
	}
	& li::before {
		content: "";
		position: absolute;
		left: 0;
		top: .55em;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--col-logo-green);
	}
}

/* centered lead paragraph under a section title */
.sla-lead {
	max-width: 1000px;
	margin: 0 auto 24px;
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: .04em;
	text-align: center;
	color: var(--col-text);
}

/* #confirm: status-page button row */
#confirm {
	text-align: center;
	& .sla-confirm__btn {
		margin: 28px auto 0;
	}
}

/* ---------- tablet ---------- */
@media screen and (max-width: 1024px) {
	.sla-card {
		padding: 32px;
	}
}

/* ---------- sp ---------- */
@media screen and (max-width: 640px) {
	#func-nav {
		padding-bottom: 0;
	}
	#sla-intro .sla-intro__ttl {
		font-size: 22px;
	}
	#sla-intro .sla-intro__lead {
		font-size: 14px;
	}
	.sla-block + .sla-block {
		margin-top: 40px;
	}
	.sla-section .sla-section__ttl {
		margin-bottom: 32px;
	}
	.sla-block__ttl {
    margin-bottom: 14px;
    padding-bottom: 10px;
		font-size: 18px;
	}
	.sla-table {
		font-size: 13px;
		& th,
		& td {
			padding: 10px 12px;
			white-space: normal;
		}
	}
	.sla-table--kv th[scope="row"] {
		width: 38%;
	}
	.sla-table--split th {
		width: 80%;
	}
	.sla-formula {
		padding: 16px;
		font-size: 14px;
	}
	.sla-card {
		padding: 24px 20px;
	}
	.sla-list li,
	.sla-body,
	.sla-lead {
		font-size: 13px;
	}
}