/* ============================================================
 * Legal Pages Common Styles
 * /privacy-policy/ /tokushoho/ /company/ で共通使用。
 *
 * 法的開示書類としての可読性最優先（行間広め・段落間隔ゆったり）。
 * Arkhe親テーマの :root --arkc-* カラートークンを参照。
 *
 * コンテナ幅は Arkhe テーマカスタマイザの「サイト幅 1200px」設定に従う。
 * 独自 max-width/margin/padding は持たず、Arkhe デフォルトラッパに委譲。
 * 各ルールは body.page-template-page-{slug} で対象ページに限定する。
 * ============================================================ */

/* ==========
 * ページ上部の余白確保（ヘッダー被り対策）
 * Arkhe 固定ヘッダー（--ark-header_height--fixed: 64px）に対して、
 * ページタイトル/最初のh2 が確実に視認できる余白を確保する。
 * .l-mainContent / main の両方を併記してテーマ変更にも防御的。
 * ========== */
body.page-template-page-tokushoho .l-mainContent,
body.page-template-page-privacy-policy .l-mainContent,
body.page-template-page-company .l-mainContent,
body.page-template-page-tokushoho main,
body.page-template-page-privacy-policy main,
body.page-template-page-company main {
	padding-top: 3rem;
}

@media screen and (min-width: 1000px) {
	body.page-template-page-tokushoho .l-mainContent,
	body.page-template-page-privacy-policy .l-mainContent,
	body.page-template-page-company .l-mainContent,
	body.page-template-page-tokushoho main,
	body.page-template-page-privacy-policy main,
	body.page-template-page-company main {
		padding-top: 4rem;
	}
}

body.page-template-page-tokushoho p,
body.page-template-page-privacy-policy p,
body.page-template-page-company p {
	line-height: 1.9;
	margin: 0 0 1.25rem;
}

/* ページタイトル（h1）：page-privacy-policy.php 等で使用。
 * page-tokushoho.php は既存の <h1> 直書きを維持しているため、当クラスは
 * 任意装飾として併用可能。
 * 下線は廃止し、サイズと余白でメリハリ。 */
.sba-legal-page__title {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0 0 2rem;
	padding: 0;
	border: none;
	letter-spacing: 0.05em;
}

@media screen and (min-width: 1000px) {
	.sba-legal-page__title {
		font-size: 2rem;
		margin-bottom: 2.5rem;
	}
}

/* h2：下線廃止、サイズと太字でメリハリ。前後の余白で空気感を確保 */
body.page-template-page-tokushoho h2,
body.page-template-page-privacy-policy h2,
body.page-template-page-company h2 {
	margin-top: 4rem;
	margin-bottom: 1rem;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	border: none;
	padding: 0;
}

body.page-template-page-tokushoho h2:first-of-type,
body.page-template-page-privacy-policy h2:first-of-type,
body.page-template-page-company h2:first-of-type {
	margin-top: 2rem;
}

body.page-template-page-tokushoho h3,
body.page-template-page-privacy-policy h3,
body.page-template-page-company h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	font-size: 1.1rem;
	font-weight: 600;
}

body.page-template-page-tokushoho ul,
body.page-template-page-tokushoho ol,
body.page-template-page-privacy-policy ul,
body.page-template-page-privacy-policy ol,
body.page-template-page-company ul,
body.page-template-page-company ol {
	padding-left: 1.5rem;
	margin: 0 0 1.25rem;
}

body.page-template-page-tokushoho li,
body.page-template-page-privacy-policy li,
body.page-template-page-company li {
	margin: 0.5rem 0;
	line-height: 1.85;
}

/* 最終更新日 */
.sba-legal-revision {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--arkc-light-gray, #e5e5e5);
	font-size: 0.9rem;
	color: var(--arkc-txt-color);
	text-align: right;
}

@media screen and (min-width: 1000px) {
	body.page-template-page-tokushoho h2,
	body.page-template-page-privacy-policy h2,
	body.page-template-page-company h2 {
		font-size: 1.6rem;
		margin-top: 5rem;
		margin-bottom: 1.25rem;
	}

	body.page-template-page-tokushoho h2:first-of-type,
	body.page-template-page-privacy-policy h2:first-of-type,
	body.page-template-page-company h2:first-of-type {
		margin-top: 2.5rem;
	}

	body.page-template-page-tokushoho h3,
	body.page-template-page-privacy-policy h3,
	body.page-template-page-company h3 {
		font-size: 1.2rem;
		margin-top: 2.5rem;
	}
}

/* ==========
 * Legal Page Table（subaco独自・フラットタイプ）
 * arkc-table-company の Arkhe CSS Editor 依存を排除。
 *
 * v4：行間ボーダー（tr の border）を完全廃止。空白で区切り、ラベル下の
 *     ティール下線で行を「開始」する設計に。PC行高を 1.25rem → 2rem に
 *     拡大して窮屈感を解消。
 * ========== */

.sba-legal-table {
	margin: 1.5rem 0 2rem;
}

.sba-legal-table table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	border: none;
}

/* 行間ボーダーは削除（空白で区切る） */
.sba-legal-table tr {
	border: none;
}

.sba-legal-table td {
	padding: 1rem 0;
	vertical-align: top;
	word-break: break-word;
	overflow-wrap: anywhere;
	border: none;
	background: transparent;
}

/* PC：ラベル列・値列 */
@media screen and (min-width: 1000px) {
	.sba-legal-table td {
		padding: 2rem 0;
	}

	.sba-legal-table td:first-child {
		width: 28%;
		padding-right: 2.5rem;
		padding-bottom: 1rem;
		font-weight: 600;
		color: var(--arkc-main-color);
		letter-spacing: 0.05em;
		white-space: nowrap;
		border-bottom: 2px solid var(--arkc-main-color);
		align-self: flex-start;
	}

	.sba-legal-table td:last-child {
		width: 72%;
		color: var(--arkc-txt-color);
	}

	.sba-legal-table tr {
		transition: background-color 0.25s ease;
	}

	.sba-legal-table tr:hover {
		background-color: rgba(64, 132, 167, 0.04);
	}
}

/* SP：行を縦並びに */
@media screen and (max-width: 999px) {
	.sba-legal-table table,
	.sba-legal-table tbody,
	.sba-legal-table tr,
	.sba-legal-table td {
		display: block;
		width: 100%;
	}

	.sba-legal-table tr {
		padding: 1.5rem 0;
		border: none;
	}

	.sba-legal-table td {
		padding: 0;
		white-space: normal;
		border: none;
	}

	.sba-legal-table td:first-child {
		width: 100%;
		padding-bottom: 0.5rem;
		margin-bottom: 0.75rem;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--arkc-main-color);
		letter-spacing: 0.1em;
		border-bottom: 1px solid var(--arkc-main-color);
	}

	.sba-legal-table td:last-child {
		width: 100%;
		font-size: 1rem;
		line-height: 1.6;
	}
}

/* テーブル内のリンク */
.sba-legal-table a {
	color: var(--arkc-link-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sba-legal-table a:hover {
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.sba-legal-table tr {
		transition: none;
	}
}

/* ==========
 * Info List（dl/dt/dd 構造、英語ラベル+日本語サブ）
 * /company/ の事業者情報マークアップとして導入。
 * 「ラベル→値」を意味的に正しい dl で表現し、英語ラベル+日本語サブの
 * 二段ラベルで subaco/mitsuhiroyamamoto.com の英日併記トンマナを継承。
 * /tokushoho/ では .sba-info-list--jp-only バリアントで日本語ラベル
 * 単独表示も可能（後段ルール参照）。
 * ========== */

.sba-info-list {
	margin: 1.5rem 0 3rem;
	padding: 0;
	border-top: 1px solid var(--arkc-light-gray);
}

.sba-info-list__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--arkc-light-gray);
	transition: background-color 0.3s ease;
}

.sba-info-list__label {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sba-info-list__label-en {
	display: inline-flex;
	align-items: center;
	font-family: 'Outfit', 'Inter', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--arkc-txt-color);
	text-transform: uppercase;
}

.sba-info-list__label-en::before {
	content: "";
	width: 26px;
	height: 1px;
	margin-right: 12px;
	background: var(--arkc-main-color);
	opacity: 0.6;
	display: inline-block;
	vertical-align: middle;
}

.sba-info-list__label-jp {
	font-size: 0.85rem;
	color: var(--arkc-txt-color);
	opacity: 0.65;
	letter-spacing: 0.05em;
	padding-left: 38px;
}

.sba-info-list__value {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--arkc-txt-color);
	word-break: break-word;
}

/* PC：ラベル列固定幅、値列フレックス
 * ラベル幅は「適格請求書発行事業者登録番号」（14文字 + padding-left 38px）が
 * 1行に収まる幅を確保。260px は font-size 0.8rem + letter-spacing 0.05em
 * 計算で約 226px 必要 + 余裕を持たせた値。 */
@media screen and (min-width: 1000px) {
	.sba-info-list__row {
		grid-template-columns: 260px 1fr;
		gap: 48px;
		padding: 1.25rem 0;
		align-items: center;
	}

	.sba-info-list__row:hover {
		background-color: rgba(64, 132, 167, 0.04);
	}

	.sba-info-list__label {
		justify-content: center;
	}

	.sba-info-list__label-en {
		font-size: 0.85rem;
	}

	.sba-info-list__label-jp {
		font-size: 0.8rem;
	}

	.sba-info-list__value {
		font-size: 1.05rem;
	}
}

/* SP：縦並び、値の左パディングをラベル横線位置に揃える */
@media screen and (max-width: 999px) {
	.sba-info-list__value {
		padding-left: 38px;
		font-size: 0.95rem;
		line-height: 1.8;
	}
}

/* prefers-reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
	.sba-info-list__row {
		transition: none;
	}
}

/* ==========
 * Info List：jp-only バリアント
 * 特商法ページ用。英語ラベルがないので、日本語ラベル自体に
 * 横線アクセントを付与し、可読性を確保する。
 * ========== */
.sba-info-list--jp-only .sba-info-list__label-jp {
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	font-weight: 600;
	color: var(--arkc-txt-color);
	letter-spacing: 0.05em;
	opacity: 1;          /* デフォルトの opacity 0.65 を上書き */
	padding-left: 0;     /* デフォルトの padding-left 38px を上書き */
}

.sba-info-list--jp-only .sba-info-list__label-jp::before {
	content: "";
	width: 26px;
	height: 1px;
	margin-right: 12px;
	background: var(--arkc-main-color);
	opacity: 0.6;
	display: inline-block;
	vertical-align: middle;
}

/* SP：jp-only モードでも値の左パディングを横線位置に揃える */
@media screen and (max-width: 999px) {
	.sba-info-list--jp-only .sba-info-list__value {
		padding-left: 38px;
	}
}

/* PC：jp-only バリアントは label-jp が font-size 1rem + ::before 26px line +
 * 12px gap で構成されるため、company（0.8rem サブラベル）より広い列幅が必要。
 * 「適格請求書発行事業者登録番号」14文字を1行に収めるため 300px に拡張。 */
@media screen and (min-width: 1000px) {
	.sba-info-list--jp-only .sba-info-list__row {
		grid-template-columns: 300px 1fr;
	}
}

/* ==========
 * Legal Pages 共通：セクション見出しのジャンプ率向上
 * Arkhe Blocks の heading-catch-copy / heading-sub-copy をオーバーライド。
 * 英語見出し（Company / Access / Message from the CEO 等）を伸びやかに、
 * サブテキスト（会社情報・アクセス・代表取締役社長 挨拶 等）も letter-spacing
 * を拡大して整列感を出す。
 * ========== */
body.page-template-page-company .heading-catch-copy .ark-block-heading__main,
body.page-template-page-company .heading-sub-copy .ark-block-heading__main,
body.page-template-page-tokushoho .heading-catch-copy .ark-block-heading__main,
body.page-template-page-tokushoho .heading-sub-copy .ark-block-heading__main,
body.page-template-page-privacy-policy .heading-catch-copy .ark-block-heading__main,
body.page-template-page-privacy-policy .heading-sub-copy .ark-block-heading__main {
	font-size: 2.2rem;
	letter-spacing: 0.15em;
	font-weight: 700;
}

@media screen and (min-width: 1000px) {
	body.page-template-page-company .heading-catch-copy .ark-block-heading__main,
	body.page-template-page-company .heading-sub-copy .ark-block-heading__main,
	body.page-template-page-tokushoho .heading-catch-copy .ark-block-heading__main,
	body.page-template-page-tokushoho .heading-sub-copy .ark-block-heading__main,
	body.page-template-page-privacy-policy .heading-catch-copy .ark-block-heading__main,
	body.page-template-page-privacy-policy .heading-sub-copy .ark-block-heading__main {
		font-size: 3.2rem;
		letter-spacing: 0.18em;
	}
}

/* セクション見出しの下のサブテキスト（会社情報 / アクセス / 代表取締役社長 挨拶 等） */
body.page-template-page-company .ark-block-heading__sub,
body.page-template-page-tokushoho .ark-block-heading__sub,
body.page-template-page-privacy-policy .ark-block-heading__sub {
	font-size: 0.85rem;
	letter-spacing: 0.25em;
}

@media screen and (min-width: 1000px) {
	body.page-template-page-company .ark-block-heading__sub,
	body.page-template-page-tokushoho .ark-block-heading__sub,
	body.page-template-page-privacy-policy .ark-block-heading__sub {
		font-size: 1rem;
		letter-spacing: 0.3em;
	}
}

/* ==========
 * Heading セット感の調整
 * main（英語）→ line → sub（日本語）の3要素を密な塊として見せ、
 * 一方でその「塊」と次のコンテンツの間には広めの余白を取って、
 * セクション境界と heading の所属関係を明確にする。
 * Arkhe Blocks のデフォルトマージンを上書きする。
 * ========== */
body.page-template-page-company .ark-block-heading__main,
body.page-template-page-tokushoho .ark-block-heading__main,
body.page-template-page-privacy-policy .ark-block-heading__main {
	margin-bottom: 0.3rem;
}

body.page-template-page-company .ark-block-heading__line,
body.page-template-page-tokushoho .ark-block-heading__line,
body.page-template-page-privacy-policy .ark-block-heading__line {
	margin-top: 0.2rem;
	margin-bottom: 0.5rem;
}

body.page-template-page-company .ark-block-heading__sub,
body.page-template-page-tokushoho .ark-block-heading__sub,
body.page-template-page-privacy-policy .ark-block-heading__sub {
	margin-top: 0;
}

body.page-template-page-company .ark-block-heading,
body.page-template-page-tokushoho .ark-block-heading,
body.page-template-page-privacy-policy .ark-block-heading {
	margin-bottom: 3rem;
}

@media screen and (min-width: 1000px) {
	body.page-template-page-company .ark-block-heading__main,
	body.page-template-page-tokushoho .ark-block-heading__main,
	body.page-template-page-privacy-policy .ark-block-heading__main {
		margin-bottom: 0.5rem;
	}

	body.page-template-page-company .ark-block-heading__line,
	body.page-template-page-tokushoho .ark-block-heading__line,
	body.page-template-page-privacy-policy .ark-block-heading__line {
		margin-top: 0.3rem;
		margin-bottom: 0.7rem;
	}

	body.page-template-page-company .ark-block-heading,
	body.page-template-page-tokushoho .ark-block-heading,
	body.page-template-page-privacy-policy .ark-block-heading {
		margin-bottom: 4.5rem;
	}
}