/*
 * tsk-v2 / layout.css
 *
 * ヘッダー・フッター・セクションの器・ナビ・パンくず。
 *
 * セクションはすべて同じ幅・同じ左位置から始めない。
 * .wrap--wide / --main / --text / --narrow を使い分けて紙面にリズムを作る。
 */

/* ==========================================================================
   ページの器
   ========================================================================== */

.site-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.site-main {
	flex: 1 0 auto;
}

/* ---- コンテナ ---- */

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

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

.wrap--main {
	max-width: var(--w-main);
}

.wrap--text {
	max-width: var(--w-text);
}

.wrap--narrow {
	max-width: var(--w-narrow);
}

/* 下層ページ本文の既定幅 */
.content-area {
	width: 100%;
	max-width: var(--w-text);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---- セクション ---- */

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

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

/* 面の切り替え。白／薄灰の2種だけにしない */

.section--paper {
	background-color: var(--paper-100);
}

.section--tinted {
	background-color: var(--paper-200);
}

.section--plain {
	background-color: var(--paper-000);
}

.section--dark {
	background-color: var(--navy-800);
	color: var(--ink-000);
}

.section--dark .section-head__title,
.section--dark h2,
.section--dark h3 {
	color: var(--ink-000);
}

/*
 * PHASE 3-G3: 濃紺セクションの上下に入れていたブロンズの罫線を外した。
 * 面が濃紺に切り替わること自体が章の切れ目として十分に働くため、
 * 追加の装飾線を重ねない。
 */

/* ---- 実写を敷いた濃紺セクション（PHASE 3-G4） ---- */

/*
 * 写真は背景として全面に敷き、濃紺のベールで存在感を抑える。
 * カード化せず、角丸も枠線も付けない。
 */
.section--media {
	overflow: hidden;
	isolation: isolate;
}

.section__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* PHASE 3-I-C4: 写真に scale(1.03) を掛けたため、この器で切る（SP の帯からはみ出させない） */
	overflow: hidden;
}

/*
 * 拡大して寄せる案（transform: scale）は採用しない。
 * この写真は明るい情報が正面のモニタ周辺に集中しており、そこを画面外へ逃がすと
 * ベールと合わさって画面がほぼ真っ黒になり、写真を置く意味が無くなるため。
 */
.section__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	/*
	 * PHASE 3-I-C4
	 *
	 * ベールを薄くして写真を見せる方針へ変更したため、写真側を整える。
	 *  - brightness を少し上げ、セクション全体の圧迫感を減らす
	 *  - blur 3px で細部のノイズを落とす。会議・セミナーの場面は分かるまま、
	 *    スライドの文言・数値は判読できない状態を維持する（ベールを薄くしたため、
	 *    ここは 1.5px では文字が読めてしまい不足だった）
	 *  - blur は縁が透けるため scale(1.05) で外へ逃がす（構図の寄せ目的ではない）
	 */
	filter: saturate(0.9) contrast(1.02) brightness(1.08) blur(3px);
	transform: scale(1.05);
}

/*
 * ベールの濃さ。
 *
 * 狙いは「人が集まって資料を見ながら話している」ことが分かる程度で、
 * 資料の中身（数値表）が読めない濃さ。写真から数値を読み取らせない。
 * 0.76 まで薄くするとモニタの表が判読でき、本文の可読性も落ちたため戻した。
 */
/*
 * PHASE 3-I-C4: 全面ほぼ均一（0.86〜0.93）だったベールを、
 * 「文字が載る中央は守る／写真を見せたい上下端と左右端は抜く」設計に変えた。
 * 合成後の不透明度は中央帯で約 0.69、左右端で約 0.5（従来は全面 0.86〜0.9）。
 */
.section__media-veil {
	position: absolute;
	inset: 0;
	background:
		/*
		 * 1層目: モニタのある領域だけを追加で落とす。
		 * ベール全体を薄くしたぶん、ここは従来より強くする
		 *（スライドの文言・数値を判読させないため。blur とあわせて担保する）。
		 */
		radial-gradient(34% 30% at 64% 22%, rgba(0, 23, 42, 0.62), transparent 72%),
		/* 2層目: 全体。見出しが載る上端と、次セクションへ繋ぐ下端だけ濃く */
		linear-gradient(
			180deg,
			rgba(0, 23, 42, 0.68) 0%,
			rgba(0, 23, 42, 0.52) 30%,
			rgba(0, 23, 42, 0.52) 70%,
			rgba(0, 23, 42, 0.66) 100%
		);
}

/* 本文は写真より前面に置く */
.section--media > .wrap {
	position: relative;
	z-index: 1;
}

/*
 * 成長ロードマップ用のベール。
 *
 * ここは数字が主役なので、一貫支援より濃くする（80〜90%）。
 * スクリーンの位置がこの写真では中央やや左のため、
 * 追加で落とす radial の中心も専用に指定する。
 * スライドの文言が読めない濃さにする。
 */
.section__media--roadmap .section__media-veil {
	background:
		radial-gradient(42% 34% at 50% 38%, rgba(0, 23, 42, 0.7), transparent 78%),
		linear-gradient(
			180deg,
			rgba(0, 23, 42, 0.72) 0%,
			rgba(0, 23, 42, 0.56) 30%,
			rgba(0, 23, 42, 0.56) 74%,
			rgba(0, 23, 42, 0.7) 100%
		);
}

.section__media--roadmap .section__media-img {
	object-position: 50% 46%;
}

/*
 * PHASE 3-I-C4: 薄くしたベールの下で可読性を担保する仕上げ。
 * 帯を増やさず、次の 3 点だけで補正する。この 2 セクション（.section--media）限定。
 */

/* 1) 文字の輪郭をわずかに締める。面を足さないので「帯が増えた」見え方にならない */
.section--media > .wrap {
	text-shadow: 0 1px 10px rgba(0, 16, 28, 0.55);
}

/* 2) 写真の上で細い罫線が消えないよう、線だけコントラストを上げる */
.section--media .layer {
	border-bottom-color: rgba(255, 255, 255, 0.24);
}

.section--media .roadmap__step::before {
	background-color: rgba(255, 255, 255, 0.3);
}

.section--media .roadmap__step {
	border-bottom-color: rgba(255, 255, 255, 0.24);
}

/* 3) 補助文だけ明度を少し上げる（見出し・数字は変更しない） */
.section--media .layer__body,
.section--media .roadmap__focus {
	color: rgba(255, 255, 255, 0.86);
}

/*
 * PC は本文の器（wrap 1180px）の外側に余白があるため、
 * 左右端のベールを抜いて写真をいちばん見せる。
 * 1280px 未満では器がほぼ画面幅になり、この抜きが文字の背後に入ってしまうので効かせない。
 */
@media (min-width: 1400px) {

	.section__media-veil::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(
			90deg,
			rgba(0, 23, 42, 0.08) 0%,
			rgba(0, 23, 42, 0.34) 12%,
			rgba(0, 23, 42, 0.34) 88%,
			rgba(0, 23, 42, 0.08) 100%
		);
	}
}

/*
 * SP では写真を「上部の帯」にする。
 *
 * 縦長のセクション（390x1167 等）へ横位置の写真を cover で敷くと、
 * 写真の左右が大きく切られて縦の細い断片しか見えなくなるため。
 * 帯は 16:10 で切り、下端を濃紺へ溶かしてセクションと繋げる。
 */
@media (max-width: 899px) {

	.section__media {
		bottom: auto;
		height: auto;
		aspect-ratio: 16 / 10;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
	}
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */

/*
 * PHASE 3-I-C14: 追従（position: sticky / top: 0）をやめ、通常のページフロー内に戻した。
 * スクロールするとヘッダーも一緒に画面外へ流れる。
 *
 * position 自体は relative で残す。ドロップダウン（.sub-menu / z-index: 70）を
 * 後続セクションより前面に出すための重ね順を維持するため。
 * static にすると z-index が効かず、ドロップダウンが FV の下へ潜る。
 *
 * 追従をやめたので背景の半透明＋backdrop-filter（下の内容を透かす処理）も不要になり、
 * 不透明の白にした。高さ・余白・罫線は変更していない。
 */
.site-header {
	position: relative;
	z-index: 60;
	background-color: var(--paper-000);
	border-bottom: 1px solid var(--line);
}

/*
 * PHASE 3-G3: ヘッダーの品質感を上げる。
 * SP は 64px、PC は 84px を目安にする（巨大化はさせない）。
 */
/*
 * PHASE 3-I-C17
 *
 * SP でナビを開くと、.site-nav が3つ目の flex アイテムとして
 * ロゴ・トグルと同じ行に並び、幅 197px の細い列になっていた。
 * その結果、閉じるボタン（×）が行の中央に浮き、
 * ドロワー内の日本語が2〜3文字で折り返っていた。
 * flex-wrap: wrap にして .site-nav（width: 100%）を次の行へ送り、
 *   1行目 = ロゴ ／ 閉じるボタン
 *   2行目 = ドロワー本体（全幅）
 * という構造にする。PC はナビが常時表示で width: auto のため折り返らない。
 */
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-sm);
	width: 100%;
	min-height: 64px;
	max-width: var(--w-wide);
	margin-inline: auto;
	padding: var(--sp-2xs) var(--gutter);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2xs);
	color: var(--color-brand);
	text-decoration: none;
}

.site-brand__logo {
	display: block;
	width: auto;
	height: 34px;
}

.site-brand__text {
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: var(--ls-normal);
	line-height: var(--lh-tight);
}

.site-brand__tag {
	display: none;
}

/* ---- ハンバーガー ---- */

/*
 * 閉じる／開くボタン。ヘッダー1行目の右端に置き、
 * 46x46 のタップ領域（44px 以上）を確保する。
 * 開いているときは白背景＋ごく淡いブルーの枠にして、
 * 「押せる×」だと分かるようにする。角丸は既存トークン（--r-sm）。
 */
.site-header__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: none;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background-color: var(--paper-000);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] {
	background-color: #f2f7fc;
	border-color: rgba(10, 95, 150, 0.38);
}

.site-header__toggle:focus-visible {
	outline: 2px solid var(--accent-500);
	outline-offset: 2px;
}

.site-header__toggle-bar {
	display: block;
	height: 1.5px;
	background-color: var(--color-brand);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- ナビ（SP は初期非表示） ---- */

.site-nav {
	display: none;
	width: 100%;
	max-height: calc(100vh - 58px);
	overflow-y: auto;
	padding: var(--sp-sm) var(--gutter) var(--sp-xl);
	border-top: 1px solid var(--line);
	background-color: var(--paper-100);
}

.site-nav.is-open {
	display: block;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* ---- SP ドロワーの階層タイポグラフィ（PHASE 3-I-C17） ----
 *
 * フォントは既存スタック（--font-sans）のまま。
 * 文字サイズ・太さ・行間・字間・色・余白・インデントだけで
 *   トップレベル ＞ 中分類 ＞ 個別サービス
 * の3段階を作る。SP 幅（max-width: 1059.98px）にスコープしており、
 * PC ナビ（min-width: 1060px）には一切影響しない。
 */

/*
 * 共通（PC / SP）のリンク基本形。
 * PC ナビ（min-width: 1060px）は padding / font-size / white-space だけを
 * 上書きし、色・太さ・下線の有無はここに依存している。
 * SP ドロワーの階層指定は下の max-width ブロックで上書きする。
 */
.site-nav__list > li {
	border-bottom: 1px solid var(--line);
}

.site-nav__list li > a,
.site-nav__link {
	display: block;
	padding: var(--sp-xs) 0;
	color: var(--ink-900);
	font-size: var(--fs-base);
	font-weight: 700;
	text-decoration: none;
}

.site-nav__list li > a:hover,
.site-nav__list li > a:focus-visible,
.site-nav__link:hover,
.site-nav__link:focus-visible {
	color: var(--accent-500);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-color: var(--accent-500);
	text-decoration-thickness: 2px;
}

.site-nav__list .sub-menu {
	margin: 0 0 var(--sp-2xs) var(--sp-xs);
	padding-left: var(--sp-xs);
	border-left: 1px solid var(--line-strong);
}

.site-nav__list .sub-menu li {
	border-bottom: 0;
}

.site-nav__list .sub-menu li > a {
	padding: var(--sp-3xs) 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ink-700);
}

/*
 * SP ドロワー専用。PC ナビ（min-width: 1060px）と重ならないよう
 * 幅で明示的に分けており、PC 側の指定には一切影響しない。
 */
@media (max-width: 1059.98px) {

	/* ---- トップレベル（サービス / TSK総研について / 導入事例 / 料金 / FAQ） ---- */

	.site-nav__list > li {
		border-bottom: 1px solid var(--line);
	}

	.site-nav__list > li > a,
	.site-nav__list > li > .menu-item-heading__label {
		display: flex;
		align-items: center;
		/* スマホで押しやすい高さを確保する */
		min-height: 54px;
		padding: var(--sp-2xs) 0;
		color: var(--color-brand);
		font-size: 1.0625rem;
		font-weight: 800;
		line-height: 1.5;
		letter-spacing: 0.03em;
		text-decoration: none;
	}

	/* 見出し（サービス）はリンクではないので、色だけ揃えて余白を詰める */
	.site-nav__list > li > .menu-item-heading__label {
		min-height: 0;
		padding: var(--sp-sm) 0 var(--sp-2xs);
	}

	.site-nav__list li > a:hover,
	.site-nav__list li > a:focus-visible,
	.site-nav__link:hover,
	.site-nav__link:focus-visible {
		color: var(--accent-500);
	}

	.site-nav__list .current-menu-item > a,
	.site-nav__list .current-menu-ancestor > a {
		color: var(--color-brand);
		text-decoration: underline;
		text-decoration-color: var(--accent-500);
		text-decoration-thickness: 2px;
	}

	/* ---- 第2階層（サービス配下）：縦罫線でぶら下がりを示す ---- */

	.site-nav__list .sub-menu {
		margin: 0 0 var(--sp-sm);
		padding-left: var(--sp-sm);
		border-left: 2px solid rgba(10, 95, 150, 0.18);
	}

	.site-nav__list .sub-menu li {
		border-bottom: 0;
	}

	/*
	 * 経営コンサルティング / HP制作・WEB改善 / 外部COO・経営実行支援 / 研修。
	 * 個別サービスより少し強い程度に留める。
	 */
	.site-nav__list .sub-menu li > a {
		display: block;
		min-height: 0;
		padding: var(--sp-2xs) 0;
		/* 下層リンクにも既定の下線を出さない（従来の見え方を維持） */
		text-decoration: none;
		color: var(--ink-900);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.6;
		letter-spacing: 0.01em;
	}

	/* ---- 中分類（集客支援）：子を持つ見出し ---- */

	.site-nav__list .sub-menu .menu-item-heading__label {
		position: relative;
		padding: var(--sp-xs) 0 var(--sp-3xs);
		padding-left: var(--sp-sm);
		color: var(--accent-500);
		font-family: var(--font-sans);
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.02em;
		text-transform: none;
	}

	/* 見出しの左に短いブルーライン（装飾は最小限） */
	.site-nav__list .sub-menu .menu-item-heading__label::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 0.75rem;
		height: 2px;
		background-color: var(--accent-400);
		transform: translateY(-50%);
	}

	/* ---- 第3階層（個別サービス）：さらにインデントして本文寄りに ---- */

	.site-nav__list .sub-menu .sub-menu {
		margin: 0 0 var(--sp-2xs);
		padding-left: var(--sp-sm);
		border-left-width: 1px;
		border-left-color: var(--line-strong);
	}

	.site-nav__list .sub-menu .sub-menu li > a {
		padding: var(--sp-3xs) 0;
		color: var(--ink-700);
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 1.7;
	}

	/* ---- 「サービス一覧」は一覧ページへの導線として見せる ---- */

	/*
	 * 第2階層の最後の項目（＝サービス一覧）だけを対象にする。
	 * `.sub-menu > li:last-child` だと、集客支援配下の最後の項目
	 *（チラシ・DM・紙媒体）にも当たってしまうため、
	 * トップレベル直下の sub-menu に限定する。
	 */
	.site-nav__list > li > .sub-menu > li:last-child > a {
		margin-top: var(--sp-2xs);
		padding-top: var(--sp-2xs);
		border-top: 1px solid var(--line);
		color: var(--accent-500);
		font-weight: 600;
	}

	.site-nav__list > li > .sub-menu > li:last-child > a::after {
		content: "";
		display: inline-block;
		width: 0.36em;
		height: 0.36em;
		margin-left: 0.5em;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: translateY(-0.1em) rotate(45deg);
	}
}

/* グループ見出し（既定。PC の英字ラベル用途は下で上書きする） */
.menu-item-heading__label {
	display: block;
	padding: var(--sp-xs) 0 var(--sp-3xs);
	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;
}

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

.site-nav__cta .cta {
	flex: 1 1 12rem;
}

/* ---- PC ナビ ---- */

@media (min-width: 1060px) {

	.site-header__toggle {
		display: none;
	}

	.site-header__inner {
		gap: var(--sp-lg);
		min-height: 84px;
		padding-block: var(--sp-2xs);
	}

	/* ロゴを SP より約 18% 大きくする */
	.site-brand__logo {
		height: 40px;
	}

	.site-brand__text {
		font-size: var(--fs-md);
	}

	.site-brand__tag {
		display: block;
		padding-left: var(--sp-xs);
		margin-left: var(--sp-xs);
		border-left: 1px solid var(--line-strong);
		color: var(--ink-500);
		font-size: var(--fs-2xs);
		font-weight: 400;
		letter-spacing: 0.02em;
		line-height: 1.45;
	}

	.site-nav {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		/*
		 * PHASE 3-I-C14: 左＝ロゴ／右＝ナビ を明示する。
		 * .site-header__inner は space-between なので現状でも右端に付くが、
		 * 将来ヘッダーに要素が増えても右寄せが崩れないよう auto マージンで固定する。
		 * 項目数が減っても間隔を広げて幅を埋めることはしない（右寄せを優先）。
		 */
		margin-left: auto;
		gap: var(--sp-lg);
		width: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
		border-top: 0;
		background: none;
	}

	.site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: var(--sp-md);
	}

	.site-nav__list > li {
		position: relative;
		border-bottom: 0;
	}

	/* ナビ文字は 13px → 15px */
	.site-nav__list li > a,
	.site-nav__link {
		padding: var(--sp-2xs) 0;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	/* 無料相談ボタンをナビ項目と分けて見せる */
	.site-nav__cta {
		padding-left: var(--sp-lg);
		border-left: 1px solid var(--line);
	}

	.site-nav__cta .cta {
		min-height: 48px;
		padding-inline: var(--sp-md);
	}

	/* ドロップダウン */
	.site-nav__list .sub-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: -1rem;
		z-index: 70;
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-4px);
		min-width: 19rem;
		margin: 0;
		padding: var(--sp-2xs) 0;
		background-color: var(--paper-000);
		border: 1px solid var(--line);
		border-top: 2px solid var(--color-brand);
		border-radius: 0 0 var(--r) var(--r);
		box-shadow: var(--shadow-lg);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	.site-nav__list > li:hover > .sub-menu,
	.site-nav__list > li:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.site-nav__list .sub-menu li > a {
		padding: var(--sp-2xs) var(--sp-md);
		font-size: var(--fs-sm);
		font-weight: 700;
		white-space: normal;
	}

	.site-nav__list .sub-menu .menu-item-heading__label {
		padding: var(--sp-2xs) var(--sp-md) 0;
	}

	.site-nav__list .sub-menu .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		min-width: 0;
		margin: 0 var(--sp-md) var(--sp-2xs);
		padding: 0 0 0 var(--sp-xs);
		border: 0;
		border-left: 1px solid var(--accent-400);
		border-radius: 0;
		box-shadow: none;
	}

	.site-nav__list .sub-menu .sub-menu li > a {
		padding: var(--sp-3xs) 0;
		font-weight: 400;
	}

	/* トップレベルのグループ見出しはナビ項目と同じ見え方にする */
	.site-nav__list > .menu-item > .menu-item-heading__label {
		padding: var(--sp-2xs) 0;
		color: var(--ink-900);
		font-family: var(--font-sans);
		font-size: 0.9375rem;
		font-weight: 700;
		letter-spacing: var(--ls-normal);
		text-transform: none;
		white-space: nowrap;
		cursor: default;
	}

	.site-nav__list > .menu-item > .menu-item-heading__label::after {
		content: "";
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 0.5em;
		border-right: 1.5px solid var(--accent-500);
		border-bottom: 1.5px solid var(--accent-500);
		transform: translateY(-0.15em) rotate(45deg);
	}

	.site-nav__cta {
		margin-top: 0;
	}

	.site-nav__cta .cta {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   パンくず
   ========================================================================== */

.breadcrumb {
	width: 100%;
	max-width: var(--w-wide);
	margin-inline: auto;
	padding: var(--sp-xs) var(--gutter) 0;
	font-size: var(--fs-2xs);
	color: var(--ink-500);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3xs) var(--sp-2xs);
	margin: 0;
}

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

.breadcrumb__item + .breadcrumb__item::before {
	content: "";
	width: 0.32em;
	height: 0.32em;
	border-right: 1px solid var(--line-strong);
	border-bottom: 1px solid var(--line-strong);
	transform: rotate(-45deg);
}

.breadcrumb__link {
	color: var(--ink-500);
	text-decoration: none;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
	color: var(--accent-500);
	text-decoration: underline;
}

.breadcrumb__item--current {
	color: var(--ink-900);
}

/* ==========================================================================
   下層ページのヘッダー
   ========================================================================== */

.page-header {
	position: relative;
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding: var(--sp-lg) var(--gutter) var(--sp-lg);
}

.page-header::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: var(--sp-md);
	background-color: var(--accent-500);
}

.page-title {
	font-size: var(--fs-2xl);
	color: var(--color-brand);
	text-wrap: balance; /* 末尾 1 文字だけの孤立行を防ぐ */
}

.page-lead {
	max-width: var(--w-text);
	margin-top: var(--sp-md);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

@media (min-width: 768px) {

	.page-header {
		padding-top: var(--sp-xl);
		padding-bottom: var(--sp-xl);
	}
}

/* ==========================================================================
   フッター
   ========================================================================== */

.site-footer {
	flex-shrink: 0;
	position: relative;
	padding: var(--sp-2xl) 0 var(--sp-lg);
	background-color: var(--paper-200);
	color: var(--ink-700);
	font-size: var(--fs-sm);
}

/*
 * 最終CTA（濃紺）とフッター（明るい面）の境目。
 * 面が切り替わること自体が区切りになるので、太い帯は置かない。
 */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--color-brand);
}

.site-footer__inner {
	width: 100%;
	max-width: var(--w-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-footer__top {
	display: grid;
	gap: var(--sp-xl);
	padding-bottom: var(--sp-xl);
	border-bottom: 1px solid var(--line);
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
}

/*
 * PHASE 3-I-C15: フッターのロゴを TOP へのリンクにした（div → a）。
 * 見た目は変えないので、a 化で付く下線と既定色だけ打ち消す。
 * ロゴ画像・サイズ・配置は変更していない。
 */
a.site-footer__brand {
	text-decoration: none;
	color: inherit;
}

a.site-footer__brand:hover .site-footer__brand-text,
a.site-footer__brand:focus-visible .site-footer__brand-text {
	color: var(--accent-500);
}

a.site-footer__brand:focus-visible {
	outline: 2px solid var(--accent-500);
	outline-offset: 4px;
}

/*
 * フッターを明るい面にしたため（PHASE 3-G5）、
 * 通常のカラーロゴをそのまま置ける。
 *
 * G3 で入れていた白プレート（logo.png の地が不透明な白のため
 * 濃紺の上で白い長方形になる問題への対処）は不要になったので外した。
 * 白ロゴ素材を用意する必要も無くなっている。
 *
 * ヘッダー（40px）ほど大きくはしないが、
 * 一目で TSK総研 と分かるサイズにする（34px → 44px）。
 */
.site-footer__logo {
	display: block;
	width: auto;
	height: 44px;
	/*
	 * logo.png の地は不透明な白のため、薄いグレーの面の上では
	 * ロゴの周りに白い長方形が薄く見える。
	 * multiply で白を透過させて面に馴染ませる（明るい面でのみ成立する手法）。
	 */
	mix-blend-mode: multiply;
}

.site-footer__brand-text {
	color: var(--color-brand);
	font-size: var(--fs-md);
	font-weight: 700;
}

.site-footer__tag {
	margin-top: var(--sp-sm);
	max-width: 26em;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

/* フッター内の区分見出し */
.site-footer__heading {
	margin-top: var(--sp-lg);
	padding-bottom: var(--sp-2xs);
	margin-bottom: var(--sp-sm);
	border-bottom: 1px solid var(--line-strong);
	color: var(--color-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.site-footer__heading--offices {
	margin-top: var(--sp-xl);
}

/*
 * CTA は1列に積み、全件を同じ幅に揃える（文字数で幅を変えない。
 * 追加する CTA も同じ幅になる）。SP・タブレットはエリアの幅いっぱい、
 * PC は下の @media で元の「資料ダウンロード」相当の幅に固定して左揃えにする。
 */
.site-footer__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2xs);
}

/*
 * 電話でのお問い合わせ。番号は大きく・太く、注記は小さく既定の色で。
 * カード・枠・アイコンは付けない。
 */
.site-footer__phone {
	margin-top: var(--sp-md);
}

.site-footer__phone-label {
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.site-footer__phone-number {
	display: inline-block;
	/* SP でタップしやすい高さ（44px 以上）を確保する */
	padding-block: var(--sp-2xs);
	color: var(--color-brand);
	font-size: var(--fs-xl);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.site-footer__phone-number:hover,
.site-footer__phone-number:focus-visible {
	color: var(--accent-500);
}

.site-footer__phone-note {
	margin-top: var(--sp-2xs);
	max-width: 26em;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

/* フッターナビ */

.footer-nav__list {
	display: grid;
	gap: var(--sp-lg);
	margin: 0;
}

.footer-nav__list > li > a,
.footer-nav__link {
	color: var(--ink-700);
	text-decoration: none;
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible,
.footer-nav__link:hover,
.footer-nav__link:focus-visible {
	color: var(--accent-500);
	text-decoration: underline;
}

/*
 * グループ見出しは、リンクと文字サイズ・ウェイトで明確に差を付ける
 *（PHASE 3-G5）。英字ラベル用の字間・大文字化は解除する。
 */
.footer-nav__list .menu-item-heading__label {
	padding: 0 0 var(--sp-2xs);
	margin-bottom: var(--sp-sm);
	border-bottom: 1px solid var(--line-strong);
	color: var(--color-brand);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: none;
}

.footer-nav__list .sub-menu {
	display: grid;
	gap: var(--sp-2xs);
	margin: 0;
}

/*
 * 「ホーム」は3分類（サービス / 判断材料 / 会社案内）とは別のトップレベルリンク。
 * サイトマップの先頭で1行を占め、下の区切り線で3列と分ける。
 */
.footer-nav__list > .footer-nav__home {
	grid-column: 1 / -1;
	padding-bottom: var(--sp-sm);
	border-bottom: 1px solid var(--line-strong);
}

.footer-nav__list > .footer-nav__home > a {
	color: var(--color-brand);
	font-weight: 700;
}

/* リンクは薄いグレーにしない（本文と同じインク色） */
.footer-nav__list .sub-menu li > a {
	font-size: var(--fs-sm);
	color: var(--ink-700);
}

/* 拠点 */

.site-footer__offices {
	display: grid;
	gap: var(--sp-md);
}

.site-footer__office-name {
	color: var(--color-brand);
	font-weight: 700;
}

.site-footer__office-line {
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2xs);
	padding-top: var(--sp-md);
}

.site-footer__copyright {
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

@media (min-width: 768px) {

	.footer-nav__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-footer__offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {

	.site-footer__top {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: var(--sp-3xl);
	}

	/* 元の「資料ダウンロード」ボタンの幅（1280px 時 223px）に揃える */
	.site-footer__cta {
		grid-template-columns: minmax(0, 14rem);
	}

	/*
	 * 幅を固定したので左右の余白は文字を中央に置くためだけのもの。
	 * 既定（--sp-lg）のままだと「提携・協業のご相談」が2行に折れるため詰める。
	 */
	.site-footer__cta .cta {
		padding-inline: var(--sp-sm);
	}
}