@charset "UTF-8";

/* =============================================================
   Server agreement page (business/agreement/server/)
   Shared parts (#breadcrumb / #page-hero / .section-ttl) come
   from common.css. This file only holds the chapter nav and
   the article/clause typography for the terms of service body.
   ============================================================= */

main section#agreement {
  padding-top: 30px;
}

/* .agreement-lead: intro paragraph above the chapter nav */
.agreement-lead {
	max-width: 1000px;
	margin: 0 auto 32px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--col-text);
}

/* .agreement-nav: anchor jump list to each chapter (sizing/layout match colorfulbox.jp's .pageMenu pill: display:table + floated li so the pill hugs its content instead of stretching) */
.agreement-nav {
	display: table;
	margin: 0 auto 48px;
	padding: 8px 6px 7px;
	background: #EDF9F3;
	border-radius: 30px;
	overflow: hidden;
	& li {
		float: left;
		font-size: 13px;
		line-height: 1.2;
		border-right: 1px solid #d2d2d2;
		&:last-child {
			border-right: none;
		}
	}
	& a {
		display: block;
		padding: 6px 26px;
		color: var(--col-text);
		&:hover {
			text-decoration: underline;
		}
	}
}

/* .agreement-chapter: one 章 block */
.agreement-chapter {
	max-width: 1000px;
	margin: 0 auto;
	& + .agreement-chapter {
		margin-top: 56px;
	}
}
/* colors match colorfulbox.jp's .leftTit (blue left rule, near-black text) */
.agreement-chapter__ttl {
	padding-left: 18px;
	margin-bottom: 24px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	color: var(--col-text);
	border-left: 4px solid var(--col-primary);
}

/* .agreement-article: one 条 block */
.agreement-article + .agreement-article {
	margin-top: 28px;
}
/* colors match colorfulbox.jp's h3.font20.bold.navy */
.agreement-article__ttl {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--col-text);
	margin-bottom: 10px;
}

/* .agreement-body: plain prose paragraph */
.agreement-body {
	font-size: 14px;
	line-height: 1.8;
	color: var(--col-text);
	& + & {
		margin-top: 8px;
	}
}

/* .agreement-clause-ttl: 項 sub-heading, used inside SLA article (第27条) */
.agreement-clause-ttl {
	margin-top: 20px;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--col-primary-dk);
}
.agreement-article__ttl + .agreement-clause-ttl {
	margin-top: 0;
}

/* .agreement-clause-list: numbered clause list (1、2、3…), same absolute-number technique as colorfulbox.jp's .numberList */
.agreement-body + .agreement-clause-list {
	margin-top: 12px;
}
.agreement-clause-list {
	& > li {
		position: relative;
		padding-left: 1.6em;
		font-size: 14px;
		line-height: 1.8;
		color: var(--col-text);
		& + li {
			margin-top: 8px;
		}
	}
	& .agreement-clause-num {
		position: absolute;
		top: 0;
		left: 0;
		color: var(--col-text);
	}
	&:not(.agreement-clause-list--sub) > li > .agreement-clause-num::after {
		content: ".";
	}
}

/* .agreement-clause-list--sub: nested sub-list, e.g. （1）（2）…, same as colorfulbox.jp's .numberList02 */
.agreement-clause-list--sub {
	margin: 8px 0;
	& > li {
		padding-left: 3.4em;
	}
	/* fixed width + right-align so double-digit numbers, e.g. （10）〜（27）, don't collide with the body text */
	& .agreement-clause-num {
		width: 3em;
		text-align: right;
	}
}

/* .agreement-table: key/value & spec tables (colors match commercial-table / colorfulbox.jp's table01.thGray) */
.agreement-table {
	width: 100%;
	max-width: 1000px;
	margin: 16px auto;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.6;
	& th,
	& td {
		padding: 12px 20px;
		border: 1px solid #d6d6d6;
		text-align: left;
		vertical-align: middle;
	}
	& th {
		background: #ededed;
		color: var(--col-text);
		font-weight: 700;
	}
	& td {
		background: var(--col-white);
		color: var(--col-text);
	}
}

/* .agreement-formula: highlighted calculation line */
.agreement-formula {
	max-width: 1000px;
	margin: 16px auto;
	padding: 16px 24px;
	background: #f7fbfc;
	border: 1px solid #d6d6d6;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	letter-spacing: .02em;
	color: var(--col-text);
}

/* .agreement-supplementary: 附則 block at the end */
.agreement-supplementary {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--col-border);
	& .agreement-supplementary__ttl {
		font-size: 15px;
		font-weight: 700;
		margin-bottom: 8px;
	}
}

/* ---------- sp ---------- */
@media screen and (max-width: 640px) {
  main section#agreement {
    padding-top: 16px;
  }
	.agreement-lead {
		font-size: 13px;
	}
	.agreement-nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		padding: 8px 10px 7px;
		border-radius: 10px;
    margin-bottom: 36px;
		& li {
			float: none;
			text-align: center;
			border-right: 1px solid #d2d2d2;
		}
		& li:nth-child(3n) {
			border-right: none;
		}
		& li:nth-child(n+4) {
			border-top: 1px solid #d2d2d2;
		}
		& a {
			padding: 6px 4px;
		}
		& li:nth-child(n+4) a {
			padding-top: 12px;
		}
	}
	.agreement-chapter__ttl {
		font-size: 17px;
	}
	.agreement-article__ttl {
		font-size: 17px;
	}
	.agreement-body,
	.agreement-clause-list li,
	.agreement-clause-ttl {
		font-size: 13px;
	}
	.agreement-table {
		font-size: 13px;
		& th,
		& td {
			padding: 10px 12px;
		}
	}
	.agreement-formula {
		padding: 14px 16px;
		font-size: 13px;
	}
}