/* ==========================================================================
   会社サイト主要ページ 共通スタイル（スコープ .skc）
   ==========================================================================

   本文に class="skc… を含むページでのみ読み込まれる（inc/scoped-css.php）。
   セレクタはすべて .skc 配下に閉じること。
   .skc を含まないページのHTMLには1つもマッチしないため、既存ページの表示は変わらない。

   ■ 方向性（2026-09-28 決定）
     ・Sourvane（.svn）と同じ世界観に寄せる。色・グラデーション・寸法の考え方を共有する
     ・欧文は既存テーマの Oswald を流用（追加の読み込みを増やさない）
     ・情報密度は Sourvane より高め。表を主役にする
     ・写真はヒーロー1枚＋章の区切り

   ■ 寸法の考え方（Sourvane と共通。重要）
     すべての寸法を基準単位 --s の倍数で組む。
     --s は 1920px までは 16px、それ以上は画面幅の 1/120（上限24px）。
     これにより、大きなモニターでは本文・見出し・表・余白が「まとめて比例拡大」する。
     px の直書きは、罫線など1px前後のものを除いて行わないこと。

   ■ 詳細度の設計
     テーマ（style.css）は .wp__single_content h2 / .page table など 0-1-1〜0-1-2 の
     ルールで見出し・表・リンクを装飾している。
     打ち消し用の土台を「.skc.skc :where(タグ)」＝ 0-2-0 とし、
     部品側は「.skc .skc-xxx」＝ 0-2-0（土台より後に記述）としている。
     これで「テーマ ＜ 土台 ＜ 部品」の順に確実に上書きされる。
   ========================================================================== */

/* --- 1. トークン ---------------------------------------------------------- */
.skc {
	/* 色（Sourvane と共通の系統） */
	--skc-base: #FBF8F3;
	--skc-base-alt: #F4EDE2;
	--skc-surface: #FFFFFF;
	--skc-surface-2: #FCFAF6;
	--skc-line: #E2D6C3;
	--skc-line-strong: #CDBCA3;
	--skc-ink: #241812;
	--skc-muted: #6B5A4C;
	--skc-brand: #3A251A;
	--skc-brand-ink: #2A1A12;
	--skc-link: #8A6420;
	--skc-gold: #C9A96A;
	--skc-gold-light: #FFF3D2;
	--skc-zebra: #FAF6EF;
	--skc-hover: #F3EADC;
	--skc-dark-ink: #F4EBDD;

	/* グラデーション（Sourvane と同一） */
	--skc-grad-brand: linear-gradient(135deg, #2A1A12 0%, #4A2F20 55%, #5E3E2A 100%);
	--skc-grad-brand-hover: linear-gradient(135deg, #4A2F20 0%, #6B4830 55%, #7A5436 100%);
	--skc-grad-gold: linear-gradient(100deg, #D9B87A 0%, #FFF3D2 26%, #F5E3B4 50%, #E6C98F 74%, #FFF6DC 100%);
	--skc-grad-gold-hover: linear-gradient(100deg, #FFF6DC 0%, #FFFDF2 50%, #F5E3B4 100%);
	--skc-veil: linear-gradient(90deg, rgba(10, 7, 5, .93) 0%, rgba(14, 10, 7, .78) 46%, rgba(14, 10, 7, .40) 100%);

	--skc-r: 4px;
	--skc-r-card: 8px;
	--skc-shadow: 0 1px 2px rgba(42, 26, 18, .06), 0 calc(.5 * var(--s)) calc(1.5 * var(--s)) rgba(42, 26, 18, .06);

	--skc-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
	--skc-serif: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--skc-latin: "Oswald", sans-serif;

	/* 基準単位。1920px までは 16px、それ以上は画面幅の 1/120（上限24px）。
	   sourvane.jp の html{font-size:min(0.833333vw,24px)} と同じ曲線。 */
	--s: clamp(1rem, 0.833333vw, 1.5rem);
	--skc-w: min(94vw, calc(100 * var(--s)));
	--skc-w-wide: min(96vw, calc(112.5 * var(--s)));

	font-family: var(--skc-font);
	font-size: var(--s);
	color: var(--skc-ink);
	line-height: 1.85;
	background: var(--skc-base);
}

/* --- 2. 土台：テーマの装飾を打ち消す --------------------------------------- */
.skc.skc :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd,
	table, thead, tbody, tr, th, td, figure, figcaption, img, svg, a, hr, section, div, span) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	list-style: none;
	box-sizing: border-box;
}

.skc.skc :where(a) {
	/* テーマは .page table td a に display:block を当てている。
	   打ち消さないと、表のセルの中のリンクが単独の行になり、
	   前後の文が不自然な位置で改行される（実測：空きが316pxあるのに改行されていた）。 */
	display: inline;
	float: none;
	width: auto;
	color: var(--skc-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.skc.skc :where(a:hover) {
	text-decoration: none;
}

.skc.skc :where(img) {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --- 3. 器の解放（画面幅いっぱいに広げる） ----------------------------------
   親テーマの .grid-1600（max-width:1600px ＋ 左右padding）を、
   「.skc を含むコンテナ」に限って外す。:has() を使うため他ページには一切マッチしない。
   100vw を使わないので、縦スクロールバーぶんの横ずれも起きない。
   ※ Sourvane（.svn）と同じ手当て。これが無いと、大きなモニターで
     --s による比例拡大が効いても、テーマの器の中で頭打ちになり はみ出す。 */
.grid-1600:has(.skc) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

@supports not selector(:has(*)) {
	.skc {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* --- 4. 幅とセクション ----------------------------------------------------- */
.skc .skc-wrap {
	width: var(--skc-w);
	margin-inline: auto;
}

.skc .skc-wrap--wide {
	width: var(--skc-w-wide);
}

.skc .skc-sec {
	padding-block: calc(3 * var(--s));
}

.skc .skc-sec--alt {
	background: var(--skc-base-alt);
}

.skc .skc-sec--dark {
	background: var(--skc-grad-brand);
	color: var(--skc-dark-ink);
}

.skc .skc-sec + .skc-sec {
	border-top: 1px solid var(--skc-line);
}

.skc .skc-sec--dark + .skc-sec,
.skc .skc-sec + .skc-sec--dark {
	border-top: 0;
}

/* --- 5. ヒーロー ----------------------------------------------------------- */
.skc .skc-hero {
	position: relative;
	overflow: hidden;
	background: var(--skc-brand-ink);
}

.skc .skc-hero__bg,
.skc .skc-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	object-fit: cover;
	object-position: center;
}

.skc .skc-hero::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	inset: 0;
	background: var(--skc-veil);
}

.skc .skc-hero__in {
	position: relative;
	z-index: 1;
	width: var(--skc-w);
	margin-inline: auto;
	/* 迫力を出すため縦に厚く取る */
	padding-block: clamp(calc(5 * var(--s)), 9vw, calc(10.5 * var(--s)));
	padding-inline: clamp(calc(1 * var(--s)), 3vw, calc(2.5 * var(--s)));
	color: var(--skc-dark-ink);
}

.skc .skc-eyebrow {
	font-family: var(--skc-latin);
	font-size: calc(.8125 * var(--s));
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--skc-gold);
	line-height: 1.6;
}

/* 金のグラデーションの罫（Sourvane と共通の意匠） */
.skc .skc-rule {
	display: block;
	width: calc(8.25 * var(--s));
	height: 3px;
	background: var(--skc-grad-gold);
	margin: calc(.875 * var(--s)) 0 calc(1.25 * var(--s));
	border: 0;
}

.skc .skc-hero__title {
	display: block;
	font-family: var(--skc-serif);
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.5;
	font-size: clamp(calc(1.75 * var(--s)), 3.6vw, calc(3.25 * var(--s)));
	max-width: 20em;
	color: var(--skc-dark-ink);
}

.skc .skc-hero__lead {
	margin-top: calc(1.25 * var(--s));
	font-size: calc(1 * var(--s));
	line-height: 2;
	color: #E4D8C6;
	max-width: 44em;
}

.skc .skc-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: calc(.5 * var(--s));
	margin-top: calc(1.5 * var(--s));
}

.skc .skc-badge {
	display: inline-flex;
	align-items: center;
	padding: calc(.3125 * var(--s)) calc(.875 * var(--s));
	border: 1px solid var(--skc-gold);
	border-radius: 999px;
	font-size: calc(.75 * var(--s));
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	color: var(--skc-gold-light);
	white-space: nowrap;
}

/* --- 6. 見出し ------------------------------------------------------------- */
.skc .skc-h2 {
	font-family: var(--skc-serif);
	font-size: clamp(calc(1.25 * var(--s)), 2.4vw, calc(1.875 * var(--s)));
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .03em;
	color: var(--skc-brand);
	padding-bottom: calc(.5 * var(--s));
	margin-bottom: calc(1.25 * var(--s));
	position: relative;
}

.skc .skc-h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--skc-grad-gold);
}

.skc .skc-sec--dark .skc-h2 {
	color: var(--skc-dark-ink);
}

.skc .skc-h2__en {
	display: block;
	font-family: var(--skc-latin);
	font-size: calc(.6875 * var(--s));
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--skc-muted);
	margin-bottom: calc(.125 * var(--s));
	font-weight: 400;
}

.skc .skc-sec--dark .skc-h2__en {
	color: var(--skc-gold);
}

.skc .skc-h3 {
	font-size: calc(1.0625 * var(--s));
	font-weight: 700;
	color: var(--skc-brand);
	margin-bottom: calc(.375 * var(--s));
	line-height: 1.6;
}

/* 節の変わり目には、本文中の行間より明らかに広い余白を置く。
   そうしないと、どこで話が変わったのかが読み取れない。 */
.skc .skc-p + .skc-h3,
.skc .skc-note + .skc-h3,
.skc .skc-table-wrap + .skc-h3,
.skc .skc-grid + .skc-h3,
.skc .skc-links + .skc-h3 {
	margin-top: calc(2 * var(--s));
	padding-top: calc(1 * var(--s));
	border-top: 1px solid var(--skc-line);
}

/* 見出し直後の本文は詰める */
.skc .skc-h3 + .skc-p {
	margin-top: 0;
}

.skc .skc-p {
	font-size: calc(.9375 * var(--s));
}

.skc .skc-note {
	font-size: calc(.8125 * var(--s));
	color: var(--skc-muted);
	line-height: 1.8;
}

.skc .skc-p + .skc-p,
.skc .skc-p + .skc-table-wrap,
.skc .skc-p + .skc-scroll-hint,
.skc .skc-table-wrap + .skc-p,
.skc .skc-table-wrap + .skc-note {
	margin-top: calc(.75 * var(--s));
}

/* --- 7. 表（このページ群の主役） -------------------------------------------- */
/* 横スクロールの案内。既定では隠し、狭い画面でだけ出す（下のメディアクエリ）。
   既定を先に書くこと。後ろに置くと、同じ詳細度のメディアクエリ側を打ち消してしまう。 */
.skc .skc-scroll-hint {
	display: none;
}

.skc .skc-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--skc-line);
	border-radius: var(--skc-r);
	background: var(--skc-surface);
	box-shadow: var(--skc-shadow);
}

/* 表の幅は内容にあわせる。画面幅いっぱいに広げたい表にだけ --full を付ける。
   列幅の比率は、各表の <colgroup> で指定する。 */
.skc .skc-table {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border-collapse: collapse;
	font-size: calc(.875 * var(--s));
	line-height: 1.75;
}

.skc .skc-table--full {
	width: 100%;
	/* colgroup で指定した列幅をそのとおりに適用する。
	   既定（table-layout:auto）では列幅は「目安」として扱われ、
	   中身の文字数によって勝手に配分されてしまう。
	   実際、4つの契約の形の比較表では、文章が最も長い「先読コンサル」の列が
	   いちばん狭く（122px）なっていた。 */
	table-layout: fixed;
}

/* 表の器そのものを狭くしたいとき */
.skc .skc-table-wrap--narrow {
	max-width: calc(58 * var(--s));
	margin-inline: auto;
}

.skc .skc-table-wrap--mid {
	max-width: calc(76 * var(--s));
	margin-inline: auto;
}

/* セルの配置：左右・上下とも中央が原則。
   ある程度の分量がある文章のセルには .skc-al を付けて左寄せにする。 */
.skc .skc-table th,
.skc .skc-table td {
	padding: calc(.5625 * var(--s)) calc(.75 * var(--s));
	border-bottom: 1px solid var(--skc-line);
	border-right: 1px solid var(--skc-line);
	text-align: center;
	vertical-align: middle;
}

.skc .skc-table .skc-al {
	text-align: left;
}

.skc .skc-table th:last-child,
.skc .skc-table td:last-child {
	border-right: 0;
}

.skc .skc-table tr:last-child th,
.skc .skc-table tr:last-child td {
	border-bottom: 0;
}

/* 列見出し（上端） */
.skc .skc-table thead th {
	background: var(--skc-grad-brand);
	color: #F6EFE4;
	font-weight: 700;
	font-size: calc(.8125 * var(--s));
	border-right-color: rgba(255, 255, 255, .18);
	border-bottom: 0;
	text-align: center;
}

/* 行見出し（左端） */
.skc .skc-table tbody th {
	background: var(--skc-base-alt);
	font-weight: 700;
	color: var(--skc-brand);
}

/* 比較表は行見出しが短い（「ひとことで」等）ので、折り返さず最小幅にする。
   行見出しが長い表（業務シーン等）に nowrap を掛けると、
   1列目が幅を占有して他の列が1文字ずつに潰れるため、ここだけに限定する。 */
.skc .skc-table--compare tbody th {
	white-space: nowrap;
	width: 1%;
}

.skc .skc-table tbody tr:nth-child(2n) td {
	background: var(--skc-zebra);
}

.skc .skc-table tbody tr:hover td {
	background: var(--skc-hover);
}

/* --- 8. カード ------------------------------------------------------------- */
.skc .skc-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(1 * var(--s));
	margin-top: calc(1.5 * var(--s));
}

.skc .skc-card {
	background: var(--skc-surface);
	border: 1px solid var(--skc-line);
	border-radius: var(--skc-r-card);
	box-shadow: var(--skc-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* カード上部の図版（インラインSVG） */
.skc .skc-card__fig {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	background: var(--skc-grad-brand);
	border-bottom: 3px solid transparent;
	border-image: var(--skc-grad-gold) 1;
}

.skc .skc-card__fig svg {
	display: block;
	width: 100%;
	height: 100%;
}

.skc .skc-card__in {
	padding: calc(1 * var(--s));
	display: flex;
	flex-direction: column;
	flex: 1;
}

.skc .skc-card__body {
	font-size: calc(.8125 * var(--s));
	line-height: 1.85;
	color: var(--skc-muted);
	flex: 1;
}

.skc .skc-card__link {
	margin-top: calc(.75 * var(--s));
	font-size: calc(.8125 * var(--s));
	font-weight: 700;
}

.skc .skc-card__link::after {
	content: " →";
	font-family: var(--skc-latin);
}

/* --- 9. ボタン ------------------------------------------------------------- */
.skc .skc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: calc(.75 * var(--s)) calc(1.75 * var(--s));
	border-radius: var(--skc-r);
	font-weight: 700;
	font-size: calc(.9375 * var(--s));
	text-decoration: none !important;
	border: 1px solid transparent;
	line-height: 1.5;
}

.skc .skc-btn--gold {
	background: var(--skc-grad-gold);
	color: #2A1A12 !important;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.skc .skc-btn--gold:hover {
	background: var(--skc-grad-gold-hover);
}

.skc .skc-btn--brand {
	background: var(--skc-grad-brand);
	color: #F6EFE4 !important;
	border-color: #2A1A12;
}

.skc .skc-btn--brand:hover {
	background: var(--skc-grad-brand-hover);
}

/* --- 10. 番号（業務シーン等） ------------------------------------------------ */
.skc .skc-num {
	display: inline-block;
	min-width: 2em;
	font-family: var(--skc-latin);
	font-size: calc(.8125 * var(--s));
	color: var(--skc-gold);
	font-weight: 500;
}

/* --- 11. 画面が狭いとき ----------------------------------------------------- */
@media (max-width: 1100px) {
	.skc .skc-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 狭い画面では、列を潰さずに横スクロールで見せる。
   セルが1文字ずつに折り返されると読めなくなるため。 */
@media (max-width: 760px) {
	.skc .skc-table {
		min-width: 600px;
	}
	.skc .skc-table--compare {
		min-width: 860px;
	}
	.skc .skc-table-wrap {
		background-image: linear-gradient(to left, rgba(36, 24, 18, .10), rgba(36, 24, 18, 0) 28px);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 28px 100%;
	}
	.skc .skc-scroll-hint {
		display: block;
		font-size: calc(.75 * var(--s));
		color: var(--skc-muted);
		margin-bottom: calc(.375 * var(--s));
	}
	.skc .skc-hero::after {
		background: linear-gradient(180deg, rgba(8, 6, 4, .92) 0%, rgba(10, 7, 5, .86) 55%, rgba(14, 10, 7, .80) 100%);
	}
}

@media (max-width: 560px) {
	.skc .skc-cards {
		grid-template-columns: 1fr;
	}
	.skc .skc-sec {
		padding-block: calc(2 * var(--s));
	}
}


/* --- 12. 追加の部品 --------------------------------------------------------- */

/* 章のリード文（h2 の直後に置き、AIが引用する単位にする） */
.skc .skc-lead {
	font-size: calc(1 * var(--s));
	line-height: 1.95;
	margin-bottom: calc(1 * var(--s));
	max-width: 56em;
}

/* 日本語の折り返しを文節単位にする。
   既定では文字単位で折り返すため、「対応でき／ます」のような
   不自然な位置で行が変わってしまう。
   word-break:auto-phrase は対応していないブラウザでは無視される（従来どおりの折り返し）。
   text-wrap:pretty は最終行が1語だけになるのを防ぐ。 */
.skc .skc-lead,
.skc .skc-p,
.skc .skc-note,
.skc .skc-hero__lead,
.skc .skc-card__body,
.skc .skc-box__d,
.skc .skc-faq__q,
.skc .skc-faq__a,
.skc .skc-step {
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
}

/* 表のセルも本文と同じく文節単位で折り返す。
   ※ 当初、セルで不自然な改行が起きていたのは折り返し方式のせいではなく、
     テーマの .page table td a{display:block} によってリンクが
     単独の行になっていたためだった（上の :where(a) で打ち消し済み）。 */
.skc .skc-table td,
.skc .skc-table th {
	word-break: auto-phrase;
	line-break: strict;
}

/* 2〜3列の並び */
.skc .skc-grid {
	display: grid;
	gap: calc(1 * var(--s));
}
.skc .skc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.skc .skc-grid--3 { grid-template-columns: repeat(3, 1fr); }

.skc .skc-box {
	background: var(--skc-surface);
	border: 1px solid var(--skc-line);
	border-left: 3px solid var(--skc-gold);
	border-radius: var(--skc-r);
	padding: calc(.875 * var(--s)) calc(1 * var(--s));
}
.skc .skc-box__t {
	font-weight: 700;
	color: var(--skc-brand);
	font-size: calc(.9375 * var(--s));
	margin-bottom: calc(.25 * var(--s));
}
.skc .skc-box__d {
	font-size: calc(.8125 * var(--s));
	color: var(--skc-muted);
	line-height: 1.8;
}

/* 国名などの一覧（読点区切りの塊） */
.skc .skc-chips {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: calc(.375 * var(--s)) calc(1 * var(--s));
	align-items: baseline;
}
.skc .skc-chips dt {
	font-weight: 700;
	color: var(--skc-brand);
	font-size: calc(.875 * var(--s));
	white-space: nowrap;
}
.skc .skc-chips dd {
	font-size: calc(.875 * var(--s));
	line-height: 1.85;
}

/* 手順（番号つきの流れ） */
.skc .skc-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(.75 * var(--s));
	counter-reset: skcstep;
}
.skc .skc-step {
	position: relative;
	background: var(--skc-surface);
	border: 1px solid var(--skc-line);
	border-radius: var(--skc-r);
	padding: calc(.75 * var(--s)) calc(.875 * var(--s)) calc(.75 * var(--s)) calc(2.75 * var(--s));
	font-size: calc(.875 * var(--s));
	line-height: 1.7;
}
.skc .skc-step::before {
	counter-increment: skcstep;
	content: counter(skcstep, decimal-leading-zero);
	position: absolute;
	left: calc(.75 * var(--s));
	top: calc(.7 * var(--s));
	font-family: var(--skc-latin);
	font-size: calc(1 * var(--s));
	font-weight: 500;
	color: var(--skc-gold);
	line-height: 1;
}
.skc .skc-step__d {
	display: block;
	font-size: calc(.75 * var(--s));
	color: var(--skc-muted);
	margin-top: calc(.125 * var(--s));
}

/* よくある質問 */
.skc .skc-faq {
	border: 1px solid var(--skc-line);
	border-radius: var(--skc-r);
	background: var(--skc-surface);
	overflow: hidden;
}
.skc .skc-faq__q {
	font-weight: 700;
	color: var(--skc-brand);
	font-size: calc(.9375 * var(--s));
	padding: calc(.75 * var(--s)) calc(1 * var(--s)) calc(.25 * var(--s));
	position: relative;
	padding-left: calc(2.5 * var(--s));
}
.skc .skc-faq__q::before {
	content: "Q";
	position: absolute;
	left: calc(1 * var(--s));
	font-family: var(--skc-latin);
	color: var(--skc-gold);
	font-weight: 500;
}
.skc .skc-faq__a {
	font-size: calc(.875 * var(--s));
	color: var(--skc-muted);
	line-height: 1.85;
	padding: 0 calc(1 * var(--s)) calc(.875 * var(--s)) calc(2.5 * var(--s));
	position: relative;
}
.skc .skc-faq__a::before {
	content: "A";
	position: absolute;
	left: calc(1 * var(--s));
	font-family: var(--skc-latin);
	color: var(--skc-line-strong);
	font-weight: 500;
}
.skc .skc-faq > div + div {
	border-top: 1px solid var(--skc-line);
}

/* 締めの行動喚起 */
.skc .skc-cta {
	text-align: center;
}
.skc .skc-cta .skc-h2 {
	text-align: center;
}
.skc .skc-cta .skc-h2::after {
	left: 50%;
	transform: translateX(-50%);
	width: calc(8.25 * var(--s));
}
.skc .skc-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: calc(.75 * var(--s));
	justify-content: center;
	margin-top: calc(1.25 * var(--s));
}

/* 関連リンク */
.skc .skc-links {
	display: flex;
	flex-wrap: wrap;
	gap: calc(.5 * var(--s)) calc(1.25 * var(--s));
	font-size: calc(.875 * var(--s));
	margin-top: calc(1 * var(--s));
}

@media (max-width: 900px) {
	.skc .skc-grid--3,
	.skc .skc-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.skc .skc-grid--2,
	.skc .skc-grid--3,
	.skc .skc-steps { grid-template-columns: 1fr; }
	.skc .skc-chips { grid-template-columns: 1fr; gap: calc(.125 * var(--s)); }
	.skc .skc-chips dd { margin-bottom: calc(.5 * var(--s)); }
}


/* --- 13. 表ごとの配置 -------------------------------------------------------
   列幅は各表の <colgroup> で指定する。
   ここでは「どの列を左寄せにするか」だけを表ごとに決める。
   原則は中央寄せで、ある程度の分量がある文章の列だけ左寄せにする。 */

/* こんなときにご相談ください：シーン名と問いは左、契約の形は中央（折り返さない） */
.skc .skc-table--scene tbody th,
.skc .skc-table--scene td:nth-child(2) { text-align: left; }
.skc .skc-table--scene td:nth-child(3) { white-space: nowrap; }

/* 4つの契約の形：行見出しは中央、各列の説明は左 */
.skc .skc-table--compare td { text-align: left; }
.skc .skc-table--compare tbody th { text-align: center; }

/* 調査対象とする情報の種類：種類は中央、内容は左 */
.skc .skc-table--info td { text-align: left; }

/* 世界各国の調査対応実績：地域は中央、国名の並びは左 */
.skc .skc-table--countries td { text-align: left; }

/* 様々な規制分野：区分と分野は中央、調査の例は左 */
.skc .skc-table--topics td:last-child { text-align: left; }

/* 料金を左右する要素：要素は中央、影響のしかたは左 */
.skc .skc-table--price td { text-align: left; }

/* 他の手段との使い分け：目的は左、向いている先は中央 */
.skc .skc-table--choose tbody th { text-align: left; }

/* 狭い画面では、幅を絞った器も画面いっぱいに使う */
@media (max-width: 760px) {
	.skc .skc-table-wrap--narrow,
	.skc .skc-table-wrap--mid { max-width: none; }
	.skc .skc-table--scene td:nth-child(3) { white-space: normal; }
}


/* --- 14. 単独の図版（インラインSVG） -----------------------------------------
   カードの中ではなく、本文の流れに置く図。
   製品ライフサイクル・施設の段階・報告サイクル・AI活用の度合いで使う。 */
.skc .skc-fig {
	display: block;
	margin: calc(1.5 * var(--s)) 0;
	padding: calc(1 * var(--s));
	background: var(--skc-grad-brand);
	border-top: 3px solid transparent;
	border-image: var(--skc-grad-gold) 1;
}

.skc .skc-fig svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* 円環の図は横に広がりすぎないよう、器の幅を絞る */
.skc .skc-fig--ring svg {
	max-width: calc(62 * var(--s));
	margin-inline: auto;
}

/* 見出しへのページ内リンクで、見出しが画面の上端に貼りつかないようにする */
.skc .skc-h2[id],
.skc .skc-h3[id],
.skc .skc-sec[id] {
	scroll-margin-top: calc(4 * var(--s));
}

/* 表ごとの配置（2ページ目で追加）
   --text：行見出しも本文も分量があるため、両方とも左寄せにする
   --menu：行見出しは中央、その次の説明の列だけ左寄せにする

   ※ 当初 td:first-child と書いていたが、各行の最初の子は <th> であるため
     この指定は一度も効いていなかった。td:nth-child(2) が正しい。 */
.skc .skc-table--text tbody th,
.skc .skc-table--text td { text-align: left; }

.skc .skc-table--menu td:nth-child(2) { text-align: left; }

/* 狭い画面では、図版も表と同じく横スクロールにする。
   幅に合わせて縮めてしまうと、図の中の文字が読めなくなるため。 */
@media (max-width: 760px) {
	.skc .skc-fig {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.skc .skc-fig svg {
		min-width: calc(58 * var(--s));
	}
	.skc .skc-fig--ring svg {
		min-width: calc(44 * var(--s));
	}
}