/*
 * tsk-v2 / components.css
 *
 * 再利用する部品。ページごとに同じ CSS を複製しない。
 * セクション固有の図解・レイアウトは sections.css に置く。
 */

/* ==========================================================================
   セクション見出し
   ========================================================================== */

.section-head {
	position: relative;
	margin-bottom: var(--sp-xl);
}

/*
 * PHASE 3-G3: 英字ラベルはブロンズからアクセントブルーへ。
 * 字間は広げすぎない（0.18em → --ls-label 0.1em）。
 */
.section-head__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	margin-bottom: var(--sp-sm);
	color: var(--accent-500);
	font-family: var(--font-num);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.section-head__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background-color: var(--accent-500);
}

.section--dark .section-head__eyebrow {
	color: var(--accent-300);
}

.section--dark .section-head__eyebrow::before {
	background-color: var(--accent-300);
}

.section-head__title {
	max-width: 24em;
	font-size: var(--fs-2xl);
	font-weight: 800;
	line-height: 1.34;
	color: var(--color-brand);
}

/*
 * 日本語の改行制御（PHASE 3-G5）
 *
 * 各単位を inline-block にすることで、単位の内部では折り返さず、
 * 単位と単位の間でだけ折り返す。white-space: nowrap と違い、
 * 幅が足りなければ単位ごとに素直に改行するため SP で横に溢れない。
 */
.section-head__line {
	display: inline-block;
}

/* 常に単位ごとに改行する見出し */
.section-head__title--stacked .section-head__line {
	display: block;
}

/*
 * 入れ子の単位。
 * 親 .section-head__line が block のとき、その中で幅が足りなければ
 * この単位の境目だけで折り返る（PC は1行、SP は2行になる）。
 */
.section-head__unit {
	display: inline-block;
}

.section-head__lead {
	max-width: var(--w-text);
	margin-top: var(--sp-md);
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-normal);
	color: var(--ink-700);
}

.section--dark .section-head__lead {
	color: rgba(255, 255, 255, 0.78);
}

/* 見出しと本文を左右に置く（PC のみ） */

@media (min-width: 1060px) {

	.section-head--split {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: var(--sp-2xl);
		align-items: end;
	}

	/*
	 * リードを1行に収めたいセクション（4つの支援領域）用。
	 * font-size を下げて解決せず、段の比率で解決する。
	 */
	.section-head--lead-wide {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	}

	.section-head--split .section-head__lead {
		margin-top: 0;
		padding-bottom: 0.35em;
	}
}

/* 下層ページのセクション */

.detail-section {
	margin-top: var(--sp-2xl);
}

.detail-section:first-child {
	margin-top: 0;
}

.detail-section__title {
	position: relative;
	padding-left: var(--sp-md);
	margin-bottom: var(--sp-md);
	font-size: var(--fs-lg);
	color: var(--color-brand);
}

.detail-section__title::before {
	content: "";
	position: absolute;
	top: 0.12em;
	bottom: 0.12em;
	left: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--color-brand), var(--accent-400));
}

.detail-section__subtitle {
	margin-top: var(--sp-lg);
	margin-bottom: var(--sp-2xs);
	font-size: var(--fs-base);
	color: var(--color-brand);
}

.detail-section__body {
	max-width: var(--w-text);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.detail-section__body + .check-list,
.detail-section__body + .table-scroll {
	margin-top: var(--sp-md);
}

.detail-section__more,
.detail-section__note {
	margin-top: var(--sp-md);
}

.detail-section__note {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   ボタン / リンク
   ========================================================================== */

.cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2xs);
	min-height: 52px;
	padding: var(--sp-2xs) var(--sp-lg);
	border-radius: var(--r-sm);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-snug);
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta::after {
	content: "";
	flex-shrink: 0;
	width: 0.42em;
	height: 0.42em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.cta:hover::after,
.cta:focus-visible::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

.cta--primary {
	background-color: var(--accent-500);
	color: var(--ink-000);
	box-shadow: 0 6px 18px -8px rgba(10, 95, 150, 0.7);
}

.cta--primary:hover,
.cta--primary:focus-visible {
	background-color: var(--navy-600);
	color: var(--ink-000);
	transform: translateY(-1px);
}

.cta--secondary {
	background-color: transparent;
	color: var(--color-brand);
	border: 1px solid var(--color-border-strong);
}

.cta--secondary:hover,
.cta--secondary:focus-visible {
	background-color: var(--paper-000);
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.cta--lg {
	min-height: 60px;
	padding-inline: var(--sp-xl);
	font-size: var(--fs-md);
}

/* 濃紺の面に載る CTA */

/*
 * PHASE 3-G5 でフッターを明るい面へ変えたため、
 * G3 で入れていた .site-footer の反転指定は外した
 *（明るい面では既定の濃紺文字が正しい）。
 */
.on-dark-cta .cta--secondary,
.section--dark .cta--secondary,
.cta-final .cta--secondary {
	color: var(--ink-000);
	border-color: var(--line-on-dark-strong);
}

.on-dark-cta .cta--secondary:hover,
.section--dark .cta--secondary:hover,
.cta-final .cta--secondary:hover,
.on-dark-cta .cta--secondary:focus-visible,
.section--dark .cta--secondary:focus-visible,
.cta-final .cta--secondary:focus-visible {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--ink-000);
	color: var(--ink-000);
}

/*
 * 枠付きの補助ボタン（PHASE 3-G5）
 *
 * CTA ほど強くないが、クリックできることが一瞬で分かる必要がある導線に使う。
 * 代表者セクションの「TSK総研について見る」「会社概要を見る」等。
 */
.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-md);
	min-height: 50px;
	padding: var(--sp-2xs) var(--sp-md);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--r-sm);
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-outline::after {
	content: "";
	flex-shrink: 0;
	width: 0.42em;
	height: 0.42em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background-color: var(--paper-000);
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.btn-outline:hover::after,
.btn-outline:focus-visible::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

/* 矢印付きテキストリンク */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2xs);
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.link-arrow::after {
	content: "";
	width: 1.5rem;
	height: 1px;
	background-color: currentColor;
	transition: width 0.2s ease;
}

.link-arrow:hover,
.link-arrow:focus-visible {
	color: var(--color-brand);
	text-decoration: none;
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
	width: 2.5rem;
}

.link-arrow--sm {
	font-size: var(--fs-xs);
	font-weight: 400;
}

.link-arrow--sm::after {
	width: 1rem;
}

.section--dark .link-arrow,
.on-dark .link-arrow {
	color: var(--accent-300);
}

.section--dark .link-arrow:hover,
.on-dark .link-arrow:hover {
	color: var(--ink-000);
}

.link-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2xs);
	margin-top: var(--sp-md);
}

/* ==========================================================================
   チェックリスト / 表
   ========================================================================== */

.check-list {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

.check-list li {
	position: relative;
	padding-left: 1.75em;
}

.check-list li + li {
	margin-top: var(--sp-2xs);
}

.check-list li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0.15em;
	width: 0.55em;
	height: 0.28em;
	border-left: 2px solid var(--accent-500);
	border-bottom: 2px solid var(--accent-500);
	transform: rotate(-45deg);
}

.section--dark .check-list li::before {
	border-color: var(--accent-300);
}

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background-color: var(--paper-000);
}

.data-table {
	min-width: 36rem;
	font-size: var(--fs-sm);
}

.data-table th,
.data-table td {
	padding: var(--sp-xs) var(--sp-sm);
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

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

.data-table thead th {
	background-color: var(--navy-700);
	color: var(--ink-000);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	white-space: nowrap;
	border-bottom: 0;
}

.data-table tbody th {
	width: 12rem;
	background-color: var(--paper-200);
	color: var(--color-brand);
	white-space: nowrap;
}

.data-table--profile {
	min-width: 26rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
	display: grid;
	gap: var(--sp-2xs);
}

.faq__item {
	background-color: var(--paper-000);
	border: 1px solid var(--line);
	border-left: 3px solid var(--color-brand);
	border-radius: 0 var(--r) var(--r) 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq__item[open] {
	border-left-color: var(--accent-500);
	box-shadow: var(--shadow);
}

.faq__question {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-sm);
	padding: var(--sp-md);
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__q,
.faq__a {
	flex-shrink: 0;
	width: 1.6rem;
	font-family: var(--font-num);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.35;
}

.faq__q {
	color: var(--accent-500);
}

.faq__a {
	color: var(--color-brand);
}

.faq__question-text {
	flex: 1;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--color-brand);
}

.faq__question::after {
	content: "";
	flex-shrink: 0;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 0.3em;
	background:
		linear-gradient(var(--accent-500), var(--accent-500)) center / 100% 1.5px no-repeat,
		linear-gradient(var(--accent-500), var(--accent-500)) center / 1.5px 100% no-repeat;
	transition: transform 0.2s ease;
}

.faq__item[open] .faq__question::after {
	background: linear-gradient(var(--accent-500), var(--accent-500)) center / 100% 1.5px no-repeat;
	transform: rotate(180deg);
}

.faq__answer {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-sm);
	padding: 0 var(--sp-md) var(--sp-md);
}

.faq__answer-text {
	flex: 1;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.faq__answer-text > * + * {
	margin-top: var(--sp-2xs);
}

/* ==========================================================================
   最終CTA
   ========================================================================== */

.cta-final {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-y-lg);
	background-color: var(--navy-800);
	color: var(--ink-000);
	isolation: isolate;
}

/* 斜めのラインで面を作る。画像を使わない */
.cta-final::before {
	content: "";
	position: absolute;
	inset: -20% -10%;
	z-index: -1;
	background:
		radial-gradient(60% 90% at 82% 8%, rgba(26, 127, 193, 0.3), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 46px);
}

/* ---- 実写を背景に敷いた最終CTA（PHASE 3-I-C6・TOP のみ） ----
 *
 * 背景写真は呼び出し側が 'background' を渡したときだけ出る（.cta-final--photo）。
 * 他ページの CTA は従来どおり濃紺＋斜線のままで、この節の指定は一切かからない。
 *
 * 濃度設計：中央は文字を守るため濃く、周辺は写真を見せるため薄くする。
 * 一色ベタには戻さない。写真（1対1の相談風景）にはスライド等の文字が無いため、
 * 過剰なぼかしはかけず「何の写真か分かる」状態を保つ。
 */
.cta-final__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.cta-final__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 人物の顔が上寄りにあるため、やや上を見せる */
	object-position: 50% 34%;
	/* 白文字を載せるため、明度は少しだけ落として色味を落ち着かせる */
	filter: saturate(0.88) contrast(1.02) brightness(0.94);
}

.cta-final__veil {
	position: absolute;
	inset: 0;
	background:
		/* 1層目: 中央の文字帯を守る */
		radial-gradient(72% 82% at 50% 50%, rgba(0, 23, 42, 0.72), rgba(0, 23, 42, 0.34) 68%, rgba(0, 23, 42, 0.22) 100%),
		/* 2層目: 上下端を締めて前後のセクションと繋ぐ */
		linear-gradient(
			180deg,
			rgba(0, 23, 42, 0.5) 0%,
			rgba(0, 23, 42, 0.3) 42%,
			rgba(0, 23, 42, 0.3) 58%,
			rgba(0, 23, 42, 0.52) 100%
		);
}

/* 斜線は残すが、写真と重なってごちゃつかない濃度まで落とす */
.cta-final--photo::before {
	opacity: 0.35;
}

/* 文字は面を足さず、輪郭をわずかに締めるだけで可読性を確保する */
.cta-final--photo .cta-final__inner {
	text-shadow: 0 1px 12px rgba(0, 16, 28, 0.6);
}

@media (max-width: 899px) {

	/* SP は縦に長くなるため、顔が切れない位置へ寄せる */
	.cta-final--photo .cta-final__img {
		object-position: 42% 30%;
	}
}

/*
 * PHASE 3-G5: 最終的な行動を迷わせないため、すべて中央揃えにする。
 * 左右へ視線を散らさず、中央のボタン2つへ集める。
 */
.cta-final__inner {
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
}

.cta-final__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2xs);
	margin-bottom: var(--sp-md);
	color: var(--accent-300);
	font-family: var(--font-num);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.cta-final__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background-color: var(--accent-300);
}

.cta-final__heading {
	max-width: 20em;
	margin-inline: auto;
	font-size: var(--fs-3xl);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-wrap: balance; /* 末尾 1〜2 文字だけの孤立行を防ぐ */
}

/*
 * PHASE 3-I-C12: 見出しを意味の単位で改行する。
 * この span と --lines 修飾子は heading_lines を渡したテンプレート（現状 /about/ のみ）にしか
 * 存在しないため、TOP と他5テンプレートの CTA 見出しは従来のまま。
 *
 * 意味単位（「考え方が合いそうであれば、」= 13 文字）を語中で分断しないよう、
 * 各単位を inline-block にし、SP では 13 文字が本文幅に収まる大きさまでだけ縮める。
 * 768px 以上では min() が --fs-3xl 側を選ぶため、従来のサイズと変わらない。
 */
.cta-final__heading--lines {
	font-size: min(var(--fs-3xl), (100vw - 2 * var(--gutter)) / 13);
}

.cta-final__heading-line {
	display: inline-block;
}

@media (min-width: 900px) {

	.cta-final__heading-line {
		display: block;
	}
}

.cta-final__lead {
	max-width: 34em;
	margin-top: var(--sp-md);
	margin-inline: auto;
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-normal);
	color: rgba(255, 255, 255, 0.82);
}

/*
 * ボタンは同じ幅にして中央へ横並び。
 * 幅が揃っていないと、どちらが主かの判断に一瞬迷うため。
 */
.cta-final__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-sm);
	margin-top: var(--sp-xl);
}

.cta-final__buttons .cta {
	flex: 0 0 auto;
	width: min(100%, 280px);
	min-height: 60px;
	padding-inline: var(--sp-md);
}

/* 1行の注記。箇条書きのグリッドは使わない */
.cta-final__note {
	margin-top: var(--sp-md);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.62);
}

.cta-final__points {
	display: grid;
	gap: var(--sp-2xs);
	margin-top: var(--sp-lg);
	padding-top: var(--sp-lg);
	border-top: 1px solid var(--line-on-dark);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.72);
}

.cta-final__point {
	position: relative;
	padding-left: 1.5em;
}

.cta-final__point::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0.1em;
	width: 0.5em;
	height: 0.26em;
	border-left: 2px solid var(--accent-300);
	border-bottom: 2px solid var(--accent-300);
	transform: rotate(-45deg);
}

@media (min-width: 768px) {

	.cta-final__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-md);
	}
}

/* ==========================================================================
   一覧（お知らせ）
   ========================================================================== */

.news-list {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--line-strong);
}

.news-item {
	border-bottom: 1px solid var(--line);
}

.news-item__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3xs);
	padding: var(--sp-md) 0;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.news-item__link:hover,
.news-item__link:focus-visible {
	padding-left: var(--sp-2xs);
	background-color: var(--paper-000);
}

.news-item__link:hover .news-item__title,
.news-item__link:focus-visible .news-item__title {
	color: var(--accent-500);
}

.news-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs) var(--sp-sm);
}

.news-item__date {
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink-500);
}

.news-item__category {
	padding: 0.15em var(--sp-2xs);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
	color: var(--ink-500);
	font-size: var(--fs-2xs);
	letter-spacing: 0.04em;
}

.news-item__title {
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	transition: color 0.2s ease;
}

@media (min-width: 768px) {

	.news-item__link {
		grid-template-columns: 12rem minmax(0, 1fr);
		gap: var(--sp-md);
		align-items: baseline;
	}
}

/* ---- TOP の編集レイアウト（最新1件を大きく、残りを小さく） ---- */

/*
 * 件数が1件でも4件でも崩れないよう、大きい1件は「左段の全高」を占める形にする。
 * 画像は扱わないため、余白と文字サイズだけで主従を作る。
 */
@media (min-width: 900px) {

	.news-list--editorial {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: var(--sp-3xl);
		border-top: 0;
	}

	.news-list--editorial .news-item {
		border-bottom: 1px solid var(--line);
	}

	/*
	 * TOP の取得件数は4件（front-page.php）。大きい1件が左段、残り3件が右段。
	 * 行数は暗黙グリッドのため -1 は使えない。span で残り件数分を確保する。
	 * 件数が減っても余白が残るだけで崩れない。
	 */
	.news-list--editorial .news-item--featured {
		grid-row: span 3;
		padding-top: var(--sp-sm);
		border-top: 2px solid var(--color-brand);
		border-bottom: 0;
	}

	.news-list--editorial .news-item--featured .news-item__link {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-sm);
		align-items: start;
		padding-top: var(--sp-md);
	}

	.news-list--editorial .news-item--featured .news-item__title {
		font-size: var(--fs-xl);
		font-weight: 800;
		line-height: 1.42;
		letter-spacing: -0.02em;
		color: var(--color-brand);
		text-wrap: balance; /* 大きい見出しなので末尾の孤立行を防ぐ */
	}

	/* 閉じ括弧＋助詞（「…」で）を結合し、助詞だけが行頭に来ないようにする（注目 1 件のみ） */
	.news-list--editorial .news-item--featured .news-item__title-nobr {
		white-space: nowrap;
	}

	.news-list--editorial .news-item:not(.news-item--featured) .news-item__link {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-3xs);
		padding-block: var(--sp-md);
	}

	.news-list--editorial .news-item:not(.news-item--featured) .news-item__title {
		font-size: var(--fs-base);
	}
}

.section--dark .news-list {
	border-top-color: var(--line-on-dark-strong);
}

.section--dark .news-item {
	border-bottom-color: var(--line-on-dark);
}

.section--dark .news-item__title {
	color: var(--ink-000);
}

.section--dark .news-item__date {
	color: rgba(255, 255, 255, 0.6);
}

.section--dark .news-item__link:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.section--dark .news-item__link:hover .news-item__title {
	color: var(--accent-300);
}


/* ==========================================================================
   一覧（導入事例）
   PHASE NEXT-16: 小さなカードの 3 列グリッドをやめ、「事例記事の一覧」として
   横長 1 列（PC: 左に画像・右に本文 / SP: 画像→本文の縦積み）にした。
   白面＋罫線区切り。大きな影・角丸の強調・浮き上がりの動きは使わない。
   ========================================================================== */

.case-wrap {
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-bottom: var(--sp-2xl);
}

.case-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-strong);
}

.case-card {
	min-width: 0;
	border-bottom: 1px solid var(--line);
}

.case-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-sm);
	padding: var(--sp-lg) 0;
	color: inherit;
	text-decoration: none;
}

@media (min-width: 700px) {

	.case-card__link {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: var(--sp-xl);
		align-items: start;
	}

	.case-card--no-media .case-card__link {
		grid-template-columns: minmax(0, 1fr);
	}
}

.case-card__thumb {
	aspect-ratio: 16 / 10;
	background-color: var(--paper-200);
	border: 1px solid var(--line);
	border-radius: var(--r-xs);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.case-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-card__link:hover .case-card__thumb,
.case-card__link:focus-visible .case-card__thumb {
	border-color: var(--color-brand);
}

.case-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.case-card__category {
	align-self: flex-start;
	margin-bottom: var(--sp-2xs);
	padding: 0.15em 0.6em;
	border-left: 3px solid var(--accent-500);
	background-color: var(--paper-200);
	color: var(--accent-500);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

.case-card__title {
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	color: var(--color-brand);
	word-break: auto-phrase;
	transition: color 0.2s ease;
}

.case-card__link:hover .case-card__title,
.case-card__link:focus-visible .case-card__title {
	color: var(--accent-500);
}

.case-card__excerpt {
	margin-top: var(--sp-xs);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--ink-700);
}

.case-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2xs);
	margin-top: var(--sp-sm);
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.case-card__more::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.case-card__link:hover .case-card__more::after,
.case-card__link:focus-visible .case-card__more::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

/* 汎用一覧 */

.entry-list {
	margin: 0;
	border-top: 1px solid var(--line-strong);
}

.entry-list__item {
	border-bottom: 1px solid var(--line);
}

.entry-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2xs) var(--sp-sm);
	padding: var(--sp-sm) 0;
	color: inherit;
	text-decoration: none;
}

.entry-list__link:hover .entry-list__title,
.entry-list__link:focus-visible .entry-list__title {
	color: var(--accent-500);
}

.entry-list__date,
.entry-list__type {
	font-family: var(--font-num);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.entry-list__title {
	font-weight: 700;
}

/* ==========================================================================
   タクソノミー絞り込み
   ========================================================================== */

.term-filter {
	margin-bottom: var(--sp-lg);
}

.term-filter__heading {
	margin-bottom: var(--sp-2xs);
	color: var(--ink-500);
	font-family: var(--font-num);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.term-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2xs);
	margin: 0;
}

.term-filter__link {
	display: inline-block;
	padding: var(--sp-3xs) var(--sp-sm);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
	font-size: var(--fs-xs);
	text-decoration: none;
	color: var(--ink-700);
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.term-filter__link:hover,
.term-filter__link:focus-visible {
	border-color: var(--accent-500);
	color: var(--accent-500);
}

.term-filter__item--current .term-filter__link {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--ink-000);
}

.term-description {
	max-width: var(--w-text);
	margin-bottom: var(--sp-lg);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   ページャ
   ========================================================================== */

.pagination {
	margin-top: var(--sp-xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.9rem;
	min-height: 2.9rem;
	padding: 0 var(--sp-2xs);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--ink-000);
}

/* ==========================================================================
   検索フォーム / 主要導線
   ========================================================================== */

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2xs);
	align-items: center;
}

.search-form__label {
	width: 100%;
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

.search-form__input {
	flex: 1 1 12rem;
	min-height: 48px;
	padding: var(--sp-2xs) var(--sp-sm);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
}

.search-form__submit {
	min-height: 48px;
	padding: 0 var(--sp-lg);
	background-color: var(--accent-500);
	border-radius: var(--r-sm);
	color: var(--ink-000);
	font-weight: 700;
}

.search-again {
	margin-bottom: var(--sp-lg);
}

.search-summary,
.search-empty,
.archive-empty,
.notfound-text {
	margin-bottom: var(--sp-md);
	font-size: var(--fs-md);
	color: var(--ink-700);
}

.guide-links {
	margin-top: var(--sp-lg);
	padding: var(--sp-md);
	background-color: var(--paper-200);
	border-left: 3px solid var(--accent-500);
	border-radius: 0 var(--r) var(--r) 0;
}

.guide-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2xs) var(--sp-md);
	margin: 0;
}

.guide-links__link {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.guide-links__link:hover,
.guide-links__link:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   投稿本文
   ========================================================================== */

.entry-content {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.entry-content > * + * {
	margin-top: var(--sp-sm);
}

.entry-content h2 {
	margin-top: var(--sp-xl);
	font-size: var(--fs-lg);
	color: var(--color-brand);
}

.entry-content h3 {
	margin-top: var(--sp-lg);
	font-size: var(--fs-base);
	color: var(--color-brand);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: var(--sp-3xs);
}

.entry-content table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.entry-content th,
.entry-content td {
	padding: var(--sp-2xs) var(--sp-sm);
	border: 1px solid var(--line);
	text-align: left;
}

.entry-content th {
	background-color: var(--paper-200);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs) var(--sp-sm);
	width: 100%;
	max-width: var(--w-text);
	margin-inline: auto;
	padding: 0 var(--gutter) var(--sp-md);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.entry-meta__date {
	font-family: var(--font-num);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.entry-meta__term {
	padding: 0.15em var(--sp-2xs);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
	color: var(--ink-500);
	text-decoration: none;
}

.entry-thumb {
	width: 100%;
	max-width: var(--w-text);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.entry-back {
	margin-top: var(--sp-xl);
}

/* ==========================================================================
   フォームページ（Contact Form 7）
   ========================================================================== */

.form-page .wpcf7-form p {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3xs);
	margin-top: var(--sp-md);
}

.form-page input[type="text"],
.form-page input[type="email"],
.form-page input[type="tel"],
.form-page input[type="url"],
.form-page input[type="number"],
.form-page select,
.form-page textarea {
	width: 100%;
	min-height: 50px;
	padding: var(--sp-2xs) var(--sp-sm);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-page input:focus,
.form-page select:focus,
.form-page textarea:focus {
	border-color: var(--accent-500);
	box-shadow: 0 0 0 3px rgba(26, 127, 193, 0.14);
	outline: none;
}

.form-page textarea {
	min-height: 11rem;
}

.form-page input[type="submit"],
.form-page .wpcf7-submit {
	min-height: 60px;
	padding: 0 var(--sp-2xl);
	background-color: var(--accent-500);
	border: 0;
	border-radius: var(--r-sm);
	color: var(--ink-000);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.form-page input[type="submit"]:hover,
.form-page .wpcf7-submit:hover {
	background-color: var(--navy-600);
}

/* 同意チェックボックス：CF7 の acceptance（ラベル内包）をチェックと文言 1 行で揃える */
.form-page .wpcf7-acceptance .wpcf7-list-item {
	margin-left: 0;
}

.form-page .wpcf7-acceptance .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3xs);
}

/*
 * 営業目的の連絡をお断りする注記（CF7 フォーム内の p.form-attention）。
 * 本文より少しだけ目立たせる（太字・通常の文字色）。赤字・枠・アイコンは使わない。
 * 先頭の <br> は CF7 の自動整形が入れるもので、上に空行ができるため消す。
 */
.form-page .wpcf7-form .form-attention {
	display: block;
	color: var(--ink-700);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.form-page .form-attention > br:first-child {
	display: none;
}

.form-page .wpcf7-not-valid-tip {
	font-size: var(--fs-xs);
	color: #b3261e;
}

.form-page .wpcf7-response-output {
	margin-top: var(--sp-md);
	padding: var(--sp-2xs) var(--sp-sm);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   お問い合わせ（/contact/）2026-09-24 UX 改修
   ==========================================================================
 *
 * コンパクトなヒーロー → すぐフォーム。フォームがページの主役。
 * フォームの HTML（.contact-form__grid / __field / __notice / __privacy / __submit）は
 * CF7 の定義（tools/migrations/extend-contact-form-type.php）が出す。
 * 共有の .form-page（/request/ 等でも使用）の指定はここで上書きするだけで変更しない。
 * すべて .contact-hero / .page-article--contact 配下に限定する。
 */

/* ---- ヒーロー（実写＋濃紺ベール。/about/ と同じ作り方をコンパクトに） ---- */

.contact-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: var(--sp-xs);
	padding-block: var(--sp-xl);
	background-color: var(--navy-800);
	color: var(--ink-000);
}

.contact-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.contact-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
	filter: saturate(0.92) blur(1.5px);
	transform: scale(1.04);
}

.contact-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 23, 42, 0.86) 0%, rgba(0, 23, 42, 0.76) 55%, rgba(0, 23, 42, 0.45) 100%);
}

.contact-hero__inner {
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-shadow: 0 1px 12px rgba(0, 16, 28, 0.5);
}

.contact-hero__label {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	color: var(--accent-300);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
}

.contact-hero__label::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background-color: var(--accent-300);
}

.contact-hero .contact-hero__title {
	margin-top: var(--sp-xs);
	color: var(--ink-000);
	font-size: var(--fs-2xl);
}

.contact-hero__copy {
	margin-top: var(--sp-sm);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.contact-hero__lead {
	margin-top: var(--sp-2xs);
	max-width: 42em;
	/* 語の途中（「構いませ／ん」）で折り返さない（対応ブラウザのみ。未対応でも通常の折り返し） */
	word-break: auto-phrase;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

/* 安心材料は1行の区切り表示だけ（カードにしない） */
.contact-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3xs) 0;
	margin: var(--sp-md) 0 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.contact-hero__points li + li::before {
	content: "｜";
	margin-inline: var(--sp-2xs);
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

/* ---- フォーム ---- */

.contact-body {
	padding: var(--sp-lg) var(--gutter) var(--sp-2xl);
}

.page-article--contact .contact-form {
	width: 100%;
	max-width: 52rem; /* 832px。2カラムが無理なく成立し、左右の余白が大きすぎない幅 */
	margin-inline: auto;
	padding: var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

/* 固定ページ本文の空段落（ブロックエディタの残り）は出さない */
.page-article--contact .contact-form > p:empty {
	display: none;
}

/* 共有 .form-page の段落の余白（上 24px）をこのフォームでは使わない */
.page-article--contact .contact-form .wpcf7-form p {
	margin-top: 0;
}

.page-article--contact .contact-form .wpcf7-form .contact-form__notice {
	padding-bottom: var(--sp-sm);
	margin-bottom: var(--sp-md);
	border-bottom: 1px solid var(--line);
	color: var(--ink-700);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: var(--lh-snug);
}

/* 共有 .form-page は段落を縦 flex にするため、文章だけの段落は通常の block に戻す */
.page-article--contact .contact-form .wpcf7-form .contact-form__notice,
.page-article--contact .contact-form .wpcf7-form .contact-form__privacy {
	display: block;
}

.page-article--contact .contact-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-sm) var(--sp-md);
}

.page-article--contact .contact-form__field {
	min-width: 0;
}

.page-article--contact .contact-form__field label {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.page-article--contact .contact-form__label {
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.page-article--contact .contact-form__label .required {
	margin-left: 2px;
	color: var(--accent-500);
}

/* 入力欄は 46px（共有の .form-page は 50px＋行間で約 55px になるため、高さを明示する） */
.page-article--contact .contact-form input[type="text"],
.page-article--contact .contact-form input[type="email"],
.page-article--contact .contact-form select {
	height: 46px;
	min-height: 46px;
	padding-block: 0;
	line-height: 1.4;
}

.page-article--contact .contact-form textarea {
	min-height: 150px;
	height: 150px;
	resize: vertical;
}

.page-article--contact .contact-form .wpcf7-form .contact-form__privacy {
	margin-top: var(--sp-md);
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	text-align: center;
}

.page-article--contact .contact-form .wpcf7-form .contact-form__submit {
	align-items: center;
	margin-top: var(--sp-sm);
}

/* 共有の送信ボタンは左右 80px の余白で、SP の全幅ボタンでは文字がはみ出して中心がずれるため詰める */
.page-article--contact .contact-form .wpcf7-submit {
	width: 100%;
	min-height: 56px;
	padding-inline: var(--sp-md);
}

@media (min-width: 768px) {

	.page-article--contact .contact-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-article--contact .contact-form__field--full {
		grid-column: 1 / -1;
	}

	.page-article--contact .contact-form .wpcf7-submit {
		width: auto;
		min-width: 20rem;
	}
}

@media (min-width: 900px) {

	.contact-hero {
		padding-block: var(--sp-xl) calc(var(--sp-xl) + var(--sp-2xs));
	}

	.contact-body {
		padding-top: var(--sp-xl);
	}

	.page-article--contact .contact-form {
		padding: var(--sp-lg) var(--sp-xl);
	}
}

/* ==========================================================================
   法務ページ
   ========================================================================== */

.legal__section {
	margin-top: var(--sp-xl);
}

.legal__heading {
	margin-bottom: var(--sp-2xs);
	font-size: var(--fs-base);
	color: var(--color-brand);
}

.legal {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.legal__section p + p,
.legal__section p + ul,
.legal__section ul + p {
	margin-top: var(--sp-2xs);
}

.legal__section ul {
	padding-left: 1.4em;
	list-style: disc;
	font-size: var(--fs-sm);
}

/* ==========================================================================
   /about/（TSK総研について）専用（PHASE 3-I-C7）
   ==========================================================================

   TOP と同じデザイン言語（英字ラベル・実写＋濃紺ベール・端正なカード・細い罫線・
   セクションごとの明暗差）へ揃える。すべて .page-article--about 配下、または
   .about-* の専用クラスに限定しており、TOP と他ページには影響しない。
   共有クラス（.detail-section / .stance-card / .check-list / .page-header 等）の
   定義は変更していない。
   ========================================================================== */

/* 本文の器を広く使う。1行の文字数は各ブロック側で --w-text に抑える */
.page-article--about .content-area {
	max-width: var(--w-main);
}

.about-wrap {
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * PHASE 3-I-C10: WHY SPECIALIZED だけ TOP（wrap--wide）と同じ器幅にする。
 * .editorial は 1280px 以上で主張側を 46rem 固定にするため、
 * 1180px の器では説明文側が狭くなりすぎる。
 */
.about-wrap--wide {
	max-width: var(--w-wide);
}

/*
 * 見出しと本文の間隔を TOP と合わせる。
 * TOP は .section-head の margin-bottom（--sp-xl）で間隔を作っているため、
 * /about/ の見出し（.about-section__title）直後の共有ブロックにも同じ間隔を与える。
 */
.about-section__title + .editorial {
	margin-top: var(--sp-xl);
}

/* 英字ラベル。TOP の section-head と同じ見え方に揃える */
.about-label {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	margin-bottom: var(--sp-xs);
	color: var(--accent-500);
	font-family: var(--font-num);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.about-label::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background-color: var(--accent-400);
}

.about-label--accent {
	color: var(--accent-500);
}

.about-label--muted {
	color: var(--ink-300);
}

.about-label--muted::before {
	background-color: var(--line-strong);
}

/* ---- セクションのリズム（白 → 淡いブルー → 白 → ごく淡い面 → 濃紺CTA） ---- */

.about-section {
	padding-block: var(--section-y);
}

.about-section--tint {
	background-image: linear-gradient(180deg, var(--paper-000) 0%, #f2f6fb 100%);
}

.about-section--tint-soft {
	background-color: #f7f9fc;
}

.about-section__title {
	font-size: var(--fs-2xl);
	font-weight: 800;
	line-height: 1.34;
	letter-spacing: -0.025em;
	color: var(--color-brand);
}

.about-section__title--sm {
	font-size: var(--fs-lg);
}

/* ---- ページヘッダー（実写＋濃紺ベール） ---- */

.about-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--sp-2xl);
	background-color: var(--navy-800);
	color: var(--ink-000);
}

.about-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.about-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	filter: saturate(0.92) contrast(1.02) blur(1.5px);
	transform: scale(1.04);
}

/*
 * TOP の FV ほど主張させない。左（文字が載る側）は濃く、右は写真を見せる。
 * 合成後の不透明度は文字側で約 0.78、右端で約 0.51（写真の見え方 約 0.49）。
 */
.about-hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(0, 23, 42, 0.78) 0%, rgba(0, 23, 42, 0.7) 52%, rgba(0, 23, 42, 0.3) 100%),
		linear-gradient(180deg, rgba(0, 23, 42, 0.2) 0%, rgba(0, 23, 42, 0.1) 45%, rgba(0, 23, 42, 0.3) 100%);
}

.about-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	/* h1 は page-header パーツが出す。左右の padding は同パーツ側で付く */
	text-shadow: 0 1px 12px rgba(0, 16, 28, 0.55);
}

.about-hero__label {
	padding-inline: var(--gutter);
	color: var(--accent-300);
}

.about-hero__label::before {
	background-color: var(--accent-300);
}

/* ---- 日本語の改行制御（PHASE 3-I-C12） ----
 *
 * 語の途中（「まと／めました」「そしてそ／れを回す」）で切れないようにする。
 * markup 側は span で意味の単位を包むだけで、block / inline-block にするのは
 * ここ（/about/ にスコープした指定）だけ。SP は素の inline のままなので
 * 従来どおり画面幅に合わせて自然に折り返る。
 */

@media (min-width: 900px) {

	/* ヒーローのリード文は PC で必ず意味の単位で2行にする */
	.about-hero .page-lead__line {
		display: block;
	}

	/*
	 * WHY SPECIALIZED の本文。TOP と共有しているパーツのため、
	 * inline-block にするのは /about/ 配下だけに限定する（TOP の折り返しは変えない）。
	 * 単位が段の幅に収まらないときは単位の内部で折り返るので、
	 * 幅が狭くなっても崩れない。
	 */
	.page-article--about .editorial__seg {
		display: inline-block;
	}
}

/* ヒーロー内の h1 / リード文の配色だけ差し替える（共有クラスの定義は変更しない） */
.about-hero .page-header {
	padding-top: 0;
	padding-bottom: 0;
}

.about-hero .page-title,
.about-hero h1 {
	color: var(--ink-000);
}

.about-hero .page-lead {
	max-width: 40em;
	color: rgba(255, 255, 255, 0.88);
}

/* ---- 支援のスタンス（2×2 カード） ---- */

.about-stance {
	display: grid;
	gap: var(--sp-md);
	margin: var(--sp-xl) 0 0;
	padding: 0;
	list-style: none;
}

.about-stance__item {
	position: relative;
	padding: var(--sp-lg) var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid rgba(10, 95, 150, 0.14);
	border-radius: 10px;
	/* 影はごく薄く。カードを浮かせすぎない */
	box-shadow: 0 1px 4px rgba(0, 44, 93, 0.04);
}

.about-stance__no {
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 800;
	letter-spacing: var(--ls-label);
	color: rgba(10, 95, 150, 0.45);
}

.about-stance__icon {
	position: absolute;
	top: var(--sp-lg);
	right: var(--sp-md);
	display: block;
	width: 2.5rem;
	color: var(--navy-600);
	opacity: 0.42;
}

.about-stance__svg {
	display: block;
	width: 100%;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.about-stance__dot {
	fill: currentColor;
	stroke: none;
}

.about-stance__title {
	margin-top: var(--sp-2xs);
	padding-top: var(--sp-2xs);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.45;
	color: var(--color-brand);
}

.about-stance__body {
	margin-top: var(--sp-xs);
	/*
	 * PHASE 3-I-C12: 2文が1つの塊に見えて読みづらかったため、
	 * 文字サイズ・行間・1行の長さを最小限だけ広げる（文言・カード構成は変更なし）。
	 * --fs-sm（14px）と --lh-snug（1.6）では詰まって見えるので 15px / 1.8 にする。
	 */
	max-width: 34em;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--ink-700);
}

/* 1文目＝考え方・方針 ／ 2文目＝その理由・補足。境界を余白で示す */
.about-stance__sentence {
	display: block;
}

.about-stance__sentence + .about-stance__sentence {
	margin-top: 0.45em;
}

/* ---- 向いている / 向いていない（左右2枚のカード・PHASE 3-I-C11） ----
 *
 * フレーム画像（tsk_needscatch_banner）は1枚の中に左右2つの枠が描かれた素材で、
 * チェック位置・罫線・見出し位置まで固定されている。枠ごと背景に敷くと
 * HTML テキストと位置が合わず可読性が落ちるため、**人物イラストの領域だけ**を
 * 切り出してカード下部の装飾に使う。カードの面・角丸・チェック・罫線は CSS で作るので、
 * 画像が読み込めない環境でもレイアウトは崩れない。
 *
 * すべて .about-fit* のスコープに閉じている（共有クラスの定義は変更していない）。
 */

.about-fit {
	display: grid;
	gap: var(--sp-md);
}

/*
 * 角丸はトークン（--r-lg: 10px）より大きい 16px を使う。
 * 大きな面のカードとして扱うブロックで、10px では枠が硬く見えるため。
 * 使用箇所はこのセクションだけ。
 */
.about-fit__col {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: var(--sp-lg) var(--sp-md);
	border-radius: 16px;
}

/* 役割差は「上端の帯・面の色み・バッジ・チェック」の4点で出す */
.about-fit__col::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
}

/* 背景装飾（左＝ドット / 右＝斜線）。フレーム画像の装飾に合わせた控えめな量 */
.about-fit__col::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: clamp(6rem, 26%, 9.5rem);
	aspect-ratio: 1;
	pointer-events: none;
}

.about-fit__col--yes {
	/*
	 * 下端をフレーム画像の余白色（#f9fbfe）に合わせる。
	 * 画像から切り出した装飾の背景がカードの面と同じになり、
	 * 切り出し窓の輪郭が出ない（合成モードに頼らずに済む）。
	 */
	background-image: linear-gradient(180deg, #e9f2fb 0%, #f2f8fd 38%, #f9fbfe 72%);
	border: 1px solid rgba(10, 95, 150, 0.18);
	box-shadow: 0 10px 30px -22px rgba(0, 44, 93, 0.45);
}

.about-fit__col--yes::after {
	background-image: linear-gradient(90deg, var(--accent-500) 0%, var(--accent-300) 100%);
}

.about-fit__col--yes::before {
	background-image: radial-gradient(rgba(26, 127, 193, 0.28) 1.4px, transparent 1.5px);
	background-size: 10px 10px;
	-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 72%);
	mask-image: linear-gradient(225deg, #000 0%, transparent 72%);
}

/* 「向いていない」側は控えめに。赤系の警告色は使わない */
.about-fit__col--no {
	/* 左と同じ考え方で、下端をフレーム画像の余白色（#fdfdfd）に合わせる */
	background-image: linear-gradient(180deg, #e8ebef 0%, #f5f8fa 38%, #fdfdfd 68%);
	border: 1px solid var(--line-strong);
}

.about-fit__col--no::after {
	background-color: var(--line-strong);
}

.about-fit__col--no::before {
	background-image: repeating-linear-gradient(115deg, rgba(93, 102, 112, 0.22) 0 2px, transparent 2px 9px);
	-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 72%);
	mask-image: linear-gradient(225deg, #000 0%, transparent 72%);
}

/* ---- 見出しまわり（バッジ＋英字ラベル） ---- */

.about-fit__head {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
}

.about-fit__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--ink-000);
}

.about-fit__col--yes .about-fit__badge {
	background-color: var(--accent-500);
}

.about-fit__col--no .about-fit__badge {
	background-color: var(--ink-300);
}

.about-fit__badge-svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

/* ラベルは about-label の見え方を保ったまま、上下の余白だけ整える */
.about-fit__label {
	margin-bottom: 0;
}

.about-fit__title {
	margin-top: var(--sp-sm);
}

/*
 * 完成イメージのマーカー線。文字の下 1/3 だけを塗る。
 * 折り返しても両端が切れないよう box-decoration-break を clone にする。
 */
.about-fit__mark {
	background-image: linear-gradient(180deg, transparent 72%, rgba(88, 174, 230, 0.34) 72%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.about-fit__mark--muted {
	background-image: linear-gradient(180deg, transparent 72%, rgba(141, 148, 156, 0.3) 72%);
}

/* ---- 左：チェックリスト ---- */

.about-fit__list {
	margin: var(--sp-md) 0 0;
	padding: 0;
	list-style: none;
}

.about-fit__list li {
	position: relative;
	padding: 0.7rem 0 0.7rem 2.25rem;
	border-bottom: 1px dashed rgba(10, 95, 150, 0.24);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--ink-900);
}

/* チェックの丸 */
.about-fit__list li::before {
	content: "";
	position: absolute;
	top: 0.95rem;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background-color: var(--accent-500);
}

/* 丸の中のチェック */
.about-fit__list li::after {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: 0.44rem;
	width: 0.62rem;
	height: 0.3rem;
	border-left: 2px solid var(--ink-000);
	border-bottom: 2px solid var(--ink-000);
	transform: rotate(-45deg);
}

/* ---- 右：本文を内側の白パネルへ入れて可読性を確保する ---- */

.about-fit__panel {
	margin-top: var(--sp-md);
	padding: var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	box-shadow: 0 2px 10px -6px rgba(0, 16, 28, 0.18);
}

.about-fit__body {
	max-width: var(--w-text);
	font-size: var(--fs-base);
	color: var(--ink-700);
}

/* ---- カード下部の装飾（フレーム画像から人物だけを切り出す） ----
 *
 * .about-fit__crop は切り出し窓。中の img を窓幅の何倍かに拡大して
 * 位置をずらすことで、原画の一部だけを見せる。窓と img が同じ比率で
 * 拡大縮小するため、どの画面幅でも切り出す領域は変わらない。
 *
 * 原画（1510x1041）に対する切り出し範囲
 *   左（賛意）  X 31.8% - 48.4% / Y 72.0% - 90.5%
 *   右（思案）  X 79.8% - 93.5% / Y 59.6% - 85.5%
 */

.about-fit__deco {
	display: flex;
	justify-content: flex-end;
	/* 内容が短いカードでも下端へ寄せる（2段組で高さが揃うため） */
	margin-top: auto;
	padding-top: var(--sp-md);
	/* カードの下端・右端まで届かせる */
	margin-right: calc(var(--sp-md) * -0.5);
	margin-bottom: calc(var(--sp-lg) * -1);
}

.about-fit__crop {
	position: relative;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

.about-fit__crop--yes {
	width: clamp(7rem, 32%, 10.5rem);
	aspect-ratio: 250 / 192;
}

.about-fit__crop--no {
	width: clamp(6.5rem, 31%, 10rem);
	aspect-ratio: 206 / 269;
}

.about-fit__crop-img {
	position: absolute;
	max-width: none;
}

/* 幅 100 / 0.166 = 602.41% 、 左 -(0.318 / 0.166) = -191.57% など */
.about-fit__crop-img--yes {
	width: 602.41%;
	height: 540.54%;
	left: -191.57%;
	top: -389.19%;
}

/* 幅 100 / 0.137 = 729.93% 、 左 -(0.798 / 0.137) = -582.48% など */
.about-fit__crop-img--no {
	width: 729.93%;
	height: 386.10%;
	left: -582.48%;
	top: -230.12%;
}

/* ---- 対応エリア（コンパクトな地図＋説明） ---- */

.about-area {
	display: grid;
	gap: var(--sp-lg);
	margin-top: var(--sp-lg);
	align-items: center;
}

.about-area__body .prose {
	max-width: var(--w-text);
}

.about-area__action {
	margin-top: var(--sp-lg);
}

.about-area__action .cta {
	width: min(100%, 320px);
}

/*
 * 地図は TOP のパーツを再利用。原画は見出し・凡例入りの横長バナー（SP は正方形）のため、
 * 本文の下に本文幅いっぱいで置く（2026-09-25。右列に小さく置くと焼き込みの文字が読めない）。
 */

@media (min-width: 900px) {

	.about-hero {
		padding-block: var(--sp-3xl);
	}

	.about-stance {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-lg);
	}

	.about-fit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-lg);
	}

	.about-fit__col {
		padding: var(--sp-xl) var(--sp-lg);
	}

	.about-fit__deco {
		margin-right: calc(var(--sp-lg) * -0.5);
		margin-bottom: calc(var(--sp-xl) * -1);
	}

	.about-area {
		/*
		 * PHASE 3-I-C12: 見出しと本文＋地図の間を PC だけ詰める。
		 * --sp-lg（2.25rem＝36px）→ 1.95rem（31.2px）で約 13% 減。
		 * 2026-09-25: 地図は本文の下に置くため、PC も 1 段（地図の有無で段組は変わらない）。
		 */
		margin-top: 1.95rem;
	}
}

@media (min-width: 1060px) {

}

/* ---- 会社情報（COMPANY・PHASE 3-I-C8） ----
 *
 * 値は tsk_v2_company_profile() から受ける。表計算シートのような table 見た目にせず、
 * 「ラベル ＋ 値」を細い罫線で区切る定義リストとして組む。
 * 背景は白のままにして、直前の対応エリア（ごく淡い面）と明暗差をつける。
 */

.about-company {
	display: grid;
	gap: var(--sp-lg);
}

.about-company__lead {
	margin-top: var(--sp-md);
	max-width: 28em;
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
	color: var(--ink-700);
}

/* 経営参画先の見出し下のテキストリンク（導入事例へ）。大きな CTA にはしない */
.about-company__more {
	margin-top: var(--sp-sm);
	font-size: var(--fs-sm);
}

/* ---- 強みを見つけて伸ばす（「なぜ塗装会社専門なのか」の冒頭。/about/ のみ） ---- */

.about-strength {
	margin-top: var(--sp-xl);
	max-width: var(--w-text);
}

.about-strength__title {
	font-size: var(--fs-lg);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--color-brand);
}

.about-strength__body {
	margin-top: var(--sp-md);
}

/* 直後の共有パーツ（TOP と同じ主張と図）との間を区切る */
.about-strength + .editorial {
	margin-top: var(--sp-2xl);
	padding-top: var(--sp-2xl);
	border-top: 1px solid rgba(10, 95, 150, 0.14);
}

.about-company__list {
	margin: 0;
	border-top: 1px solid rgba(10, 95, 150, 0.22);
}

.about-company__row {
	display: grid;
	gap: var(--sp-3xs);
	padding-block: var(--sp-md);
	border-bottom: 1px solid var(--color-border);
}

.about-company__label {
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--accent-500);
}

.about-company__value {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
	color: var(--color-brand);
}

/*
 * 経営参画先（/about/）。会社情報と同じ細い罫線の一覧にし、
 * カード・ロゴ枠・数字の装飾は付けない。企業が増えても同じ形で縦に並ぶ。
 */
.about-partner {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(10, 95, 150, 0.22);
}

.about-partner__item {
	padding-block: var(--sp-md);
	border-bottom: 1px solid var(--color-border);
}

.about-partner__name {
	color: var(--color-brand);
	font-size: var(--fs-md);
	font-weight: 700;
}

.about-partner__body {
	margin-top: var(--sp-2xs);
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
}

.about-partner__link {
	margin-top: var(--sp-xs);
	font-size: var(--fs-sm);
}

/* 沿革の小見出し（会社概要の一覧と同じ部品を続けて使う。装飾は付けない） */
.about-company__subtitle {
	margin-top: var(--sp-xl);
	margin-bottom: var(--sp-sm);
	color: var(--color-brand);
	font-size: var(--fs-md);
	font-weight: 700;
}


@media (min-width: 900px) {

	/* PC は 左：見出しと導入 ／ 右：情報一覧 の 2 段組 */
	.about-company {
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
		column-gap: var(--sp-2xl);
		align-items: start;
	}

	/* ラベルと値を横並びにして、細い罫線で整然と見せる */
	.about-company__row {
		grid-template-columns: 11rem minmax(0, 1fr);
		column-gap: var(--sp-md);
		align-items: baseline;
	}
}

/* ---- 資格・専門性（QUALIFICATION・PHASE 3-I-C9） ----
 *
 * 資格証は信頼証明として端正に見せる。切り抜かず、縦横比を保ち、
 * 原寸（1174x744）を超えて拡大しない（PC 上限 500px）。
 * 装飾は白背景・薄い枠・ごく軽い影までにとどめる。
 * 直前の COMPANY（白）と差をつけるため、セクションはごく淡いブルー面に置く。
 */

/*
 * PHASE 3-I-C12: 資格証を縮めた分、セクションの上下と段の間隔も詰める。
 * 画像だけ小さくして大きな空白が残る状態にしない。
 */
.about-section--qual {
	padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
}

.about-qual {
	display: grid;
	gap: var(--sp-lg);
	align-items: start;
}

.about-qual__name {
	margin-top: var(--sp-lg);
	font-size: var(--fs-lg);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-brand);
}

.about-qual__note {
	margin-top: var(--sp-sm);
	max-width: var(--w-text);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.about-qual__figure {
	margin: 0;
}

/*
 * 白地の枠は img ではなくリンク側（器）に付ける。
 * box-sizing: border-box の環境で img に padding / border を付けると
 * height: auto の計算とずれて縦横比が崩れるため。
 */
.about-qual__link {
	display: block;
	/*
	 * PHASE 3-I-C12: 他の写真と比べて大きすぎたため 500px → 272px（約54%）にする。
	 * 縦横比は img 側の height:auto で維持し、トリミングはしない。
	 * SP は max-width より画面幅が優先されるので、はみ出さない。
	 */
	max-width: 17rem;
	padding: var(--sp-xs);
	background-color: var(--paper-000);
	border: 1px solid rgba(10, 95, 150, 0.18);
	box-shadow: 0 2px 8px rgba(0, 44, 93, 0.06);
}

.about-qual__link:focus-visible {
	outline: 2px solid var(--accent-500);
	outline-offset: 3px;
}

.about-qual__img {
	display: block;
	width: 100%;
	height: auto;
}


@media (min-width: 900px) {

	/* PC は 左：ラベル・見出し・資格名・説明 ／ 右：資格証 の 2 カラム */
	.about-qual {
		/*
		 * PHASE 3-I-C12: 資格証を縮めたので、右段も比率固定（0.9fr）をやめて
		 * 画像の実サイズに合わせる。段だけが広く残って空白になるのを防ぐ。
		 */
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--sp-2xl);
		align-items: center;
	}

	.about-qual__figure {
		justify-self: end;
		max-width: 17rem;
	}
}

/* ==========================================================================
   お問い合わせ完了（/contact-thanks/ ・ template-parts/page/contact-thanks.php）2026-09-25
   ==========================================================================
 *
 * 1 つのまとまったセクションで「受け付けた」「今後の流れ」を伝える。
 * PC は左右 2 カラム（細い縦罫線で区切る。カードにはしない）、SP は 1 カラム。
 * 本文が短いページでも本文の下に意味のない空白が残らないよう、
 * このページだけ main を縦に伸ばし、白いセクションがフッターまで続くようにする（:has で限定）。
 * 影・角丸・グラデーション・番号・英字の演出は使わない。チェックの印は 1 個だけ。
 */

.site-main:has(.thanks-contact) {
	display: flex;
	flex-direction: column;
}

.site-main:has(.thanks-contact) > .page-article {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.thanks-contact {
	flex: 1 0 auto;
	margin-top: var(--sp-sm);
	padding-block: clamp(3rem, 1.6rem + 3.6vw, 5.5rem);
	background-color: var(--paper-000);
	border-top: 1px solid var(--line);
}

.thanks-contact__inner,
.thanks-contact__back {
	width: 100%;
	max-width: calc(var(--w-main) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.thanks-contact__inner {
	display: grid;
	gap: var(--sp-xl);
}

.thanks-contact__status {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.thanks-contact__mark {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
}

.thanks-contact__title {
	margin-top: var(--sp-sm);
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
	line-height: 1.4;
	word-break: auto-phrase;
}

.thanks-contact__lead {
	margin-top: var(--sp-md);
	color: var(--ink-900);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.thanks-contact__text {
	margin-top: var(--sp-sm);
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: 1.9;
}

.thanks-contact__flow-title {
	color: var(--color-brand);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 今後の流れ：2 段階を細い縦線でつなぐ（番号・アイコンは付けない） */
.thanks-contact__steps {
	margin: var(--sp-sm) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.thanks-contact__step {
	position: relative;
	padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
	border-bottom: 1px solid var(--line);
}

.thanks-contact__step::before {
	content: "";
	position: absolute;
	top: calc(var(--sp-sm) + 0.35em);
	bottom: calc(var(--sp-sm) + 0.2em);
	left: 0;
	width: 2px;
	background-color: var(--line-strong);
}

.thanks-contact__step.is-done::before {
	background-color: var(--accent-500);
}

.thanks-contact__step-title {
	color: var(--ink-900);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.thanks-contact__step-text {
	margin-top: var(--sp-3xs);
	color: var(--ink-700);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.thanks-contact__mail {
	margin-top: var(--sp-sm);
	color: var(--ink-700);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.thanks-contact__back {
	margin-top: var(--sp-xl);
}

/* お問い合わせ後動画（管理画面で ON のときだけ）。上の受付完了と細い罫線で区切り、左に見出し・説明、右に 16:9 の動画 */
.thanks-contact__video {
	display: grid;
	gap: var(--sp-md);
	width: 100%;
	max-width: calc(var(--w-main) + 2 * var(--gutter));
	margin: var(--sp-xl) auto 0;
	padding: var(--sp-xl) var(--gutter) 0;
}

.thanks-contact__video-text {
	padding-top: var(--sp-md);
	border-top: 1px solid var(--line);
}

.thanks-contact__video-title {
	color: var(--color-brand);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
	word-break: auto-phrase;
}

.thanks-contact__video-desc {
	margin-top: var(--sp-sm);
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: 1.9;
}

.thanks-contact__video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--paper-200);
}

.thanks-contact__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* トップへ戻る：控えめな枠線ボタン（塗りの営業ボタンにしない） */
.thanks-contact__home {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--sp-md);
	border: 1px solid var(--line-strong);
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.thanks-contact__home:hover,
.thanks-contact__home:focus-visible {
	border-color: var(--color-brand);
	text-decoration: underline;
}

@media (min-width: 900px) {

	.thanks-contact__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: 0;
		align-items: start;
	}

	.thanks-contact__main {
		padding-right: clamp(2.5rem, 1rem + 4vw, 4.5rem);
	}

	.thanks-contact__flow {
		padding-left: clamp(2.5rem, 1rem + 4vw, 4.5rem);
		border-left: 1px solid var(--line);
	}

	.thanks-contact__video {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
		align-items: start;
	}
}

/* ==========================================================================
   相談準備ページ（/consultation/{token}/ ・ template-parts/consultation/*.php）PHASE 1B 2026-09-25
   ==========================================================================
 *
 * お問い合わせ完了ページと同じ考え方（白いセクション・細い罫線・カードにしない）。
 * PC は左に受付完了、右に今後の流れ。SP は 1 カラム。動画は ON のときだけ下に出す。
 * このページは固定ページではないため、main の中に直接セクションを置く（:has で main を縦に伸ばす）。
 * 影・角丸・グラデーション・番号・英字の演出は使わない。
 */

.site-main:has(.consult-page) {
	display: flex;
	flex-direction: column;
}

.consult-page {
	flex: 1 0 auto;
	padding-block: clamp(3rem, 1.6rem + 3.6vw, 5.5rem);
	background-color: var(--paper-000);
	border-top: 1px solid var(--line);
}

.consult-page__inner {
	display: grid;
	gap: var(--sp-xl);
	width: 100%;
	max-width: calc(var(--w-main) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.consult-page__label {
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.consult-page__title {
	margin-top: var(--sp-sm);
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
	line-height: 1.4;
	word-break: auto-phrase;
}

.consult-page__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.5em;
	margin-top: var(--sp-md);
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.consult-page__mark {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
}

.consult-page__date {
	color: var(--ink-700);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.consult-page__text {
	margin-top: var(--sp-sm);
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: 1.9;
}

.consult-page__flow-title {
	color: var(--color-brand);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 今後の流れ：細い縦線でつなぐ（番号・アイコンは付けない） */
.consult-page__steps {
	margin: var(--sp-sm) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.consult-page__step {
	position: relative;
	padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
	border-bottom: 1px solid var(--line);
}

.consult-page__step::before {
	content: "";
	position: absolute;
	top: calc(var(--sp-sm) + 0.35em);
	bottom: calc(var(--sp-sm) + 0.2em);
	left: 0;
	width: 2px;
	background-color: var(--line-strong);
}

.consult-page__step.is-done::before {
	background-color: var(--accent-500);
}

.consult-page__step-title {
	color: var(--ink-900);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.consult-page__step-text {
	margin-top: var(--sp-3xs);
	color: var(--ink-700);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

/* お問い合わせ後動画（ON のときだけ） */
.consult-page__video {
	display: grid;
	gap: var(--sp-md);
	width: 100%;
	max-width: calc(var(--w-main) + 2 * var(--gutter));
	margin: var(--sp-xl) auto 0;
	padding: var(--sp-xl) var(--gutter) 0;
}

.consult-page__video-text {
	padding-top: var(--sp-md);
	border-top: 1px solid var(--line);
}

.consult-page__video-title {
	color: var(--color-brand);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
	word-break: auto-phrase;
}

.consult-page__video-desc {
	margin-top: var(--sp-sm);
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: 1.9;
}

.consult-page__video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--paper-200);
}

.consult-page__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
}

/* 無効な URL：お問い合わせへの控えめな枠線ボタン */
.consult-page__back {
	margin-top: var(--sp-lg);
}

.consult-page__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--sp-md);
	border: 1px solid var(--line-strong);
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.consult-page__link:hover,
.consult-page__link:focus-visible {
	border-color: var(--color-brand);
	text-decoration: underline;
}

@media (min-width: 900px) {

	.consult-page__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		column-gap: 0;
		align-items: start;
	}

	.consult-page--invalid .consult-page__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.consult-page__main {
		padding-right: clamp(2.5rem, 1rem + 4vw, 4.5rem);
	}

	.consult-page__flow {
		padding-left: clamp(2.5rem, 1rem + 4vw, 4.5rem);
		border-left: 1px solid var(--line);
	}

	.consult-page__video {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
		align-items: start;
	}
}

/* ==========================================================================
   相談準備ページの事前ヒアリング（template-parts/consultation/hearing.php）PHASE 2 2026-09-25
   ==========================================================================
 *
 * /contact/ のフォームの見た目（入力欄の高さ・枠線・ラベルの色）を参考に、このページ専用のクラスで作る
 *（/contact/ の CSS は共有しない）。1 ページのフォーム。ステップ・進捗表示・カード・影は使わない。
 */

.consult-hearing {
	width: 100%;
	max-width: calc(var(--w-main) + 2 * var(--gutter));
	margin: var(--sp-xl) auto 0;
	padding: var(--sp-xl) var(--gutter) 0;
}

/* フォームの幅はサイト共通の本文幅（--w-text: 780px）。左端はページの他の要素とそろえる */
.consult-hearing__inner {
	max-width: var(--w-text);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--line);
}

.consult-hearing__title {
	color: var(--color-brand);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.consult-hearing__text {
	margin-top: var(--sp-sm);
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: 1.9;
}

.consult-hearing__done {
	margin-top: var(--sp-sm);
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.consult-form {
	margin-top: var(--sp-md);
}

.consult-form__notice {
	margin-top: var(--sp-sm);
	padding: var(--sp-2xs) var(--sp-sm);
	border-left: 3px solid #b32d2e;
	color: #8a1f1f;
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

.consult-form__field {
	padding-block: var(--sp-sm);
	border-bottom: 1px solid var(--line);
}

.consult-form__field:first-child {
	padding-top: 0;
}

.consult-form__field[hidden] {
	display: none;
}

.consult-form__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.consult-form__label {
	display: block;
	padding: 0;
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.consult-form__required {
	margin-left: 0.4em;
	color: var(--accent-500);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.consult-form__note {
	margin-top: var(--sp-3xs);
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

.consult-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2xs) var(--sp-md);
	margin-top: var(--sp-2xs);
}

.consult-form__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var(--ink-900);
	font-size: var(--fs-sm);
	line-height: 1.6;
	cursor: pointer;
}

.consult-form__choice input {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--accent-500);
}

.consult-form textarea,
.consult-form input[type="tel"] {
	display: block;
	width: 100%;
	margin-top: var(--sp-2xs);
	padding: var(--sp-2xs) var(--sp-sm);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	color: var(--ink-900);
	font-size: 1rem;
	line-height: 1.7;
}

.consult-form input[type="tel"] {
	max-width: 20rem;
	height: 46px;
	padding-block: 0;
}

.consult-form textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.consult-form textarea:focus,
.consult-form input[type="tel"]:focus {
	border-color: var(--accent-500);
	outline: 2px solid transparent;
}

.consult-form__field.has-error .consult-form__label {
	color: #8a1f1f;
}

.consult-form__field.has-error textarea,
.consult-form__field.has-error input[type="tel"] {
	border-color: #b32d2e;
}

.consult-form__error {
	margin-top: var(--sp-3xs);
	color: #8a1f1f;
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

.consult-form__submit {
	margin-top: var(--sp-md);
}

.consult-form__button {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--sp-lg);
	background-color: var(--accent-500);
	border: 0;
	border-radius: var(--r-sm);
	color: var(--ink-000);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.consult-form__button:hover,
.consult-form__button:focus-visible {
	background-color: var(--navy-600);
}

@media (min-width: 768px) {

	.consult-form__button {
		width: auto;
		min-width: 16rem;
	}
}