/**
 * OITOWA — main.css
 * PHASE 3A LOCAL VISUAL REVIEW BUILD
 *
 * 設計思想: docs/12-design-concept.md（BASELINE）
 * トークン仕様: docs/13-design-system.md
 *
 * 注意:
 *  - @layer は使用しない（SWELL 側が未使用のため。docs/05-design-tokens.md §7）
 *  - ビルドステップなし。このファイルをそのまま enqueue する
 *  - カラー実値・State 2 濃度・Display 書体は Visual Review Candidate
 *    （代表者の目視確認後に変更する前提。docs/13 §C-5, §B-3）
 */


/* ==========================================================================
   1. SWELL ルート文字サイズ修正
   ---------------------------------------------------------------------
   SWELL は html { font-size: var(--swl-fz--root) } とし、600px 未満では
   3.6vw を使う。これは 320px で 11.5px、375px で 13.5px になり、
   かつ vw 指定のためユーザーのブラウザ文字サイズ設定に追従しない。
   （docs/13-design-system.md 冒頭 参照。実機 grep で確認済み）

   対応: 下限 1rem（= ユーザー既定）・上限 1.25rem の clamp で正規化する。
   このファイルは main_style / child_style より後に読み込まれるため、
   同一詳細度（:root）の後勝ちでそのまま上書きできる。@layer 不要。

   ⚠️ Visual Review Candidate: 3 つの値は代表者の実機確認後に確定する。
   ========================================================================== */

:root {
	--oit-root-fz-min: 1rem;
	--oit-root-fz-vw:  3.6vw;
	--oit-root-fz-max: 1.25rem;

	--swl-fz--root: clamp(var(--oit-root-fz-min), var(--oit-root-fz-vw), var(--oit-root-fz-max));
}

@media (min-width: 600px) {
	:root {
		--swl-fz--root: var(--oit-root-fz-min);
	}
}


/* ==========================================================================
   2. Design Tokens（docs/13-design-system.md）
   ---------------------------------------------------------------------
   すべて --oit- 接頭辞。SWELL の --swl- / --the- と衝突しないことを
   実機確認済み。
   ========================================================================== */

:root {
	/* ---- Baseline / Spacing (§A) ---- */
	--oit-bu: 0.5rem;

	--oit-s-3xs: 0.25rem;
	--oit-s-2xs: 0.5rem;
	--oit-s-xs:  0.75rem;
	--oit-s-sm:  1rem;
	--oit-s-md:  1.5rem;
	--oit-s-lg:  2rem;
	--oit-s-xl:  3rem;
	--oit-s-2xl: 4rem;
	--oit-s-3xl: clamp(4rem, 8vw, 6rem);
	--oit-s-4xl: clamp(6rem, 12vw, 9rem);

	/* ---- Typography (§B) ---- */
	--oit-font-text:
		system-ui, -apple-system, "Segoe UI", Roboto,
		"Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;

	/* Display: Web フォント未導入（PHASE 3A は仮実装）。serif スタックのみ */
	--oit-font-display:
		"Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;

	--oit-font-latin: var(--oit-font-text);
	--oit-font-num:   var(--oit-font-text);

	--oit-fs-2xs:    clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
	--oit-fs-xs:     clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--oit-fs-sm:     clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
	--oit-fs-base:   clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
	--oit-fs-lg:     clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
	--oit-fs-xl:     clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--oit-fs-2xl:    clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--oit-fs-3xl:    clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
	--oit-fs-display: clamp(1.75rem, 1rem + 4vw, 3.5rem);

	--oit-fw-normal: 400;
	--oit-fw-medium: 500;
	--oit-fw-bold:   700;

	--oit-lh-tight:   1.4;
	--oit-lh-heading: 1.55;
	--oit-lh-display: 1.6;
	--oit-lh-body:    1.9;
	--oit-lh-ui:      1.7;

	--oit-ls-body:    0.02em;
	--oit-ls-heading: 0.01em;
	--oit-ls-display: 0.04em;
	--oit-ls-label:   0.08em;
	--oit-ls-latin:   0;

	/* ---- Color (§C) — Visual Review Candidate ---- */
	--oit-c-bg:            #FBFAF8;
	--oit-c-bg-subtle:     #F5F2ED;
	--oit-c-text:          #1A1918;
	--oit-c-text-2:        #5A5751;
	--oit-c-text-3:        #6E6A62;
	--oit-c-border:        #E6E2DB;
	--oit-c-border-strong: #8F8A80;

	/* PHASE 3B: 深緑Accentはいったん正式決定から外し、
	   ロゴ実測色（Brand Palette Candidate 直下）へ差し替える。
	   ブランド上の意味（Originality/Wisdom/Action等）は付与しない。単なるUI役割。 */
	--oit-c-accent:        var(--oit-brand-blue);
	--oit-c-accent-hover:  var(--oit-brand-navy);
	--oit-c-focus:         var(--oit-brand-blue);

	/* State 2（Overlay）候補 2（中）を既定採用。承認済みレンジ: 候補1〜3
	   ※ ORIGIN セクションの比較トグルで「候補A」として引き続き使用中。
	      FIRST VIEW では PHASE 3B よりロゴ Symbol 画像に置き換えたため不使用。 */
	--oit-c-plane-a:  #F5F2ED;
	--oit-c-plane-b:  #F5F2ED;
	--oit-c-plane-ab: #EDE9E1;

	/* ---- Brand Palette Candidate（PHASE 3B）----
	   oitowa-logo-original.png の実ピクセルから測定した代表色。
	   正式ブランドカラーではなく、画像解析による近似値（Web Palette Candidate）。
	   Originality / Wisdom / Action / Two Origins 等の意味は付与しない。
	   計測方法・生値は docs/14-brand-visual-integration.md 参照。 */
	--oit-brand-navy:      #022468; /* Deep Navy   — ワードマーク主色として実測 */
	--oit-brand-blue:      #0357B4; /* Blue        — リング/リボン上部帯で実測 */
	--oit-brand-cyan:      #1995BA; /* Cyan        — リボン中間帯で実測 */
	--oit-brand-aqua:      #88C8C9; /* Soft Aqua   — リボン中間帯（明部）で実測 */
	--oit-brand-gold:      #E8B658; /* Gold        — リボン下部/ドットで実測 */
	--oit-brand-gold-soft: #DBD29C; /* Soft Gold   — リボン下部（明部）で実測 */

	/* Signature Accent: Gold は極小面積のみで使用する（下記 §4/§7 参照） */

	/* ---- Container (§D) ---- */
	--oit-w-prose: 40rem;
	--oit-w-wide:  72rem;
	--oit-pad-x:   clamp(1.25rem, 4vw, 3rem);

	/* ---- Shape (§E) ---- */
	--oit-radius: 0;

	/* ---- Motion (§F) ---- */
	--oit-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--oit-dur-fast:      160ms;
	--oit-dur-base:      320ms;
	--oit-dur-slow:      640ms;
	--oit-dur-signature: 800ms;
}

/* prefers-reduced-motion: CSS 側で完全停止。JS 判定に依存しない。
   0ms ではなく 1ms — transitionend / animationend に依存する処理を壊さないため */
@media (prefers-reduced-motion: reduce) {
	:root {
		--oit-dur-fast: 1ms;
		--oit-dur-base: 1ms;
		--oit-dur-slow: 1ms;
		--oit-dur-signature: 1ms;
	}
}


/* ==========================================================================
   2.5. ヘッダー Wordmark（PHASE 3B・全ページ共通）
   ---------------------------------------------------------------------
   oitowa/inc/hooks.php の swell_parts_head_logo フィルターで差し替えた
   <img> の表示サイズのみを指定する。.oit-home の外（全ページ）に適用される。
   Full Logo を縮小して使うのではなく Wordmark Only 素材（508×86）を使用。
   ========================================================================== */

.oit-headerWordmark img {
	display: block;
	height: clamp(20px, 3vw, 28px);
	width: auto;
}


/* ==========================================================================
   3. ページ全体のレイアウト（Home / About 共通の Layout Primitive）
   ---------------------------------------------------------------------
   .oit-home は既存Home実装（front-page.php）との互換のため残す。
   .oit-page は同一ルールセットを持つ汎用名で、About以降の新規ページから
   使用する（大規模リファクタリングを避けるため、Homeのクラス名は変更しない）。
   ========================================================================== */

.oit-home,
.oit-page {
	--oit-container-pad: var(--oit-pad-x);

	font-family: var(--oit-font-text);
	font-size: var(--oit-fs-base);
	line-height: var(--oit-lh-body);
	letter-spacing: var(--oit-ls-body);
	color: var(--oit-c-text);
	background: var(--oit-c-bg);

	/* SWELL の container_size（既定1200px）で中央に box 化して見える問題への対処。
	   Paper 背景をビューポート全幅へ広げ、コンテンツ幅は各 __inner の
	   max-width で個別管理する（full-bleed section background の定石）。 */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.oit-home__section,
.oit-page__section {
	position: relative;
	padding-block: var(--oit-s-4xl);
	padding-inline: var(--oit-container-pad);
}

.oit-home__section + .oit-home__section,
.oit-page__section + .oit-page__section {
	border-top: 1px solid var(--oit-c-border);
}

.oit-home__inner,
.oit-page__inner {
	max-width: var(--oit-w-wide);
	margin-inline: auto;
}

.oit-home__inner--prose,
.oit-page__inner--prose {
	max-width: var(--oit-w-prose);
}

/* 左軸線: 全セクション共通。視線が縦に一本通るようにする */
.oit-home__axis,
.oit-page__axis {
	/* 縦の罫線は「箱に囲まれた」印象を強めるため撤去。
	   区切りはセクション間の水平Hairline（__section+__section）
	   とWhitespaceのみで表現し、左インデントだけを軸として残す。 */
	padding-left: var(--oit-s-lg);
}

@media (max-width: 599.98px) {
	.oit-home__axis,
	.oit-page__axis {
		padding-left: var(--oit-s-md);
	}
}

.oit-home h2,
.oit-page h2 {
	/* font-family は指定しない。親から継承させ、
	   個別セレクタ（.oit-origin__quote 等）が特異度の衝突なく上書きできるようにする */
	font-weight: var(--oit-fw-medium);
	font-size: var(--oit-fs-2xl);
	line-height: var(--oit-lh-heading);
	letter-spacing: var(--oit-ls-heading);
	margin: 0 0 var(--oit-s-lg);
}

.oit-home p,
.oit-page p {
	margin: 0 0 var(--oit-s-md);
}

.oit-home p:last-child,
.oit-page p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   4. FIRST VIEW
   ========================================================================== */

.oit-fv {
	/* PHASE 6.3: 左右のpaddingとaxis分の左インデントは、他Sectionと同じ
	   .oit-home__section / .oit-home__axis（HTML側で付与）から継承する。
	   ここでは上下paddingのみ、Wordmarkを外した分だけ短く上書きする。 */
	position: relative;
	overflow: hidden;
	padding-block: var(--oit-s-3xl);
}

.oit-fv__row {
	/* PHASE 6.3: .oit-home__inner を併用し、他Sectionと同じ72rem幅の
	   Gridへ接続する。Symbol/Contentの縦積み（<960px）はここで制御する。
	   position: relative — Desktop（960px以上）で.oit-fv__symbolの絶対配置の
	   基準をこの72rem幅コンテナ自身にするため（Hero距離調整）。指定がないと
	   基準が親の.oit-fv（100vw全幅のfull-bleed要素）になり、Symbolが
	   MESSAGEと共有すべき72rem幅の右端ではなくビューポート右端基準で配置され、
	   広いDesktop画面ほど2要素の距離が不自然に開いていた。 */
	position: relative;
	min-height: min(76vh, 46rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.oit-fv__content {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* PHASE 3B: Symbol の分だけテキスト列の幅を絞る。
   960px 未満では Symbol が通常フローの縦積みへ切り替わるため制約しない（下記メディアクエリ）。 */
@media (min-width: 960px) {
	.oit-fv__content {
		max-width: 40rem;
	}
}

.oit-fv__message {
	/* Wordmark を FV から外したため、MESSAGE がこのセクションの主役になる。
	   Display 書体を使う 2 箇所のうちの 1 つ（もう 1 つは ORIGIN の引用）。
	   このページの <h1>。ブラウザ既定の太字を打ち消す。 */
	font-family: var(--oit-font-display);
	font-weight: var(--oit-fw-normal);
	font-size: var(--oit-fs-3xl);
	line-height: var(--oit-lh-display);
	letter-spacing: var(--oit-ls-display);
	color: var(--oit-c-text);
	margin: 0 0 var(--oit-s-xl);
	max-width: 28em;
}

@media (max-width: 479.98px) {
	/* display:none の <br> は行分割を抑制しないブラウザがあるため採用しない。
	   代わりにフォントサイズを縮小し、手動改行の各行が折り返さず収まるようにする */
	.oit-fv__message {
		font-size: var(--oit-fs-2xl);
	}
}

/* PHASE: Home / About Role Separation — Descriptor（事業ブランド説明文）・
   PHILOSOPHY（Open Innovation Through...）はHomeから撤去（Aboutを正本とする）。
   .oit-fv__descriptor / .oit-fv__philosophy / .oit-nowrap は使用箇所が
   なくなったため削除した（Aboutの対応要素は別クラスで独立しており無関係）。 */

/* ---- Symbol（PHASE 3B: Signature Expression）----
   ロゴのシンボル＋外周軌道をそのまま使用する。新しいGlow/Shadow/Gradient/
   Particleは追加しない。文字を邪魔しないよう右側（960px以上）または
   縦積みの上部（960px未満）へ配置する。 */

.oit-fv__symbol {
	pointer-events: none;
}

.oit-fv__symbol img {
	display: block;
	width: 100%;
	height: auto;
	/* 初回表示のみ opacity + ごく小さい translate。prefers-reduced-motion で完全静止 */
	opacity: 0;
	transform: translateY(calc(-1 * var(--oit-bu) * 2));
	animation: oit-symbol-reveal var(--oit-dur-signature) var(--oit-ease) forwards;
}

@keyframes oit-symbol-reveal {
	from { opacity: 0; transform: translateY(calc(-1 * var(--oit-bu) * 2)); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.oit-fv__symbol img {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 960px) {
	.oit-fv__row {
		display: block; /* 縦積み flex を解除し、Symbol を絶対配置の基準にする */
	}
	.oit-fv__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-height: min(76vh, 46rem);
	}
	.oit-fv__symbol {
		position: absolute;
		z-index: 0;
		top: 50%;
		right: var(--oit-pad-x);
		transform: translateY(-50%);
		width: clamp(12rem, 22vw, 19rem);
	}
}

@media (max-width: 959.98px) {
	.oit-fv__symbol {
		max-width: 9rem;
		margin: 0 0 var(--oit-s-lg);
	}
}

@media (max-width: 599.98px) {
	.oit-fv__symbol {
		/* PHASE 6.3: Mobileで唯一の視覚要素のため、従来(6rem)よりやや存在感を持たせる */
		max-width: 7.5rem;
	}
}

@media (max-width: 599.98px) {
	.oit-fv__row {
		min-height: auto;
	}
}


/* ==========================================================================
   5. PHILOSOPHY（O-I-T-O-W-A）
   ========================================================================== */

.oit-philosophy__lead {
	font-family: var(--oit-font-latin);
	letter-spacing: var(--oit-ls-latin);
}

/* --large: About用。Homeより大きく提示し、扉としての役割を持たせる */
.oit-philosophy__lead--large {
	font-size: var(--oit-fs-3xl);
}

/* 対応関係は <dl> で表現する（意味を持つ構造。装飾のための表ではない）。
   O→Open, I→Innovation, T→Through, O→Originality, W→Wisdom, A→Action の
   6文字が連続した順番で読めることを最優先し、1列6行に統一する
   （以前の2列分割はOITOWAの文字列を視覚的に分断するため撤回）。
   Desktop横幅は無理に埋めず、意味構造をそのまま保つ。 */
.oit-owa-map {
	margin: var(--oit-s-xl) 0 0;
	max-width: var(--oit-w-prose);
}

.oit-owa-map__row {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	align-items: baseline;
	column-gap: var(--oit-s-md);
	padding-block: var(--oit-s-xs);
	border-top: 1px solid var(--oit-c-border);
}

.oit-owa-map__row:last-child {
	border-bottom: 1px solid var(--oit-c-border);
}

.oit-owa-map__letter {
	margin: 0;
	font-family: var(--oit-font-latin);
	font-size: var(--oit-fs-xl);
	font-weight: var(--oit-fw-medium);
	color: var(--oit-c-text);
}

.oit-owa-map__word {
	margin: 0;
	font-family: var(--oit-font-latin);
	font-size: var(--oit-fs-base);
	color: var(--oit-c-text-2);
	letter-spacing: var(--oit-ls-latin);
}

/* --spacious: About用。Homeよりゆっくり読ませるため行の余白を広げる
   （列構成・順序・意味は一切変更しない） */
.oit-owa-map--spacious .oit-owa-map__row {
	padding-block: var(--oit-s-md);
}

@media (min-width: 768px) {
	.oit-owa-map--spacious .oit-owa-map__row {
		padding-block: var(--oit-s-lg);
	}
	.oit-owa-map--spacious .oit-owa-map__letter {
		font-size: var(--oit-fs-2xl);
	}
	.oit-owa-map--spacious .oit-owa-map__word {
		font-size: var(--oit-fs-lg);
	}
}

@media (max-width: 599.98px) {
	.oit-owa-map__row {
		grid-template-columns: 2rem 1fr;
	}
}


/* ==========================================================================
   6. （PHASE: Home / About Role Separationで削除）
   ---------------------------------------------------------------------
   旧 ORIGINALITY / WISDOM / ACTION（Home — ラベルのみ）。O/W/Aの正本は
   Aboutの .oit-stack 系（oitowa/parts/about/owa.php）。Homeの
   owa.php はfront-page.phpから呼び出しを外したため、Home専用クラス
   （.oit-owa-list / .oit-owa-item / .oit-owa-cta 等）を削除した。
   About Philosophyの.oit-owa-map系（§5）とは無関係で影響しない。
   ========================================================================== */


/* ==========================================================================
   7. ORIGIN — Logo-derived Orbit Expression（採用版）
   ---------------------------------------------------------------------
   ロゴの Symbol 本体は FIRST VIEW で既に見せているため再掲しない。
   ロゴから抽出した造形DNA（Orbit / Line / Circle）を、より抽象化した
   線と点のみで表現する。到達時に一度だけ、2点がわずかに寄り添う。
   ========================================================================== */

.oit-origin {
	position: relative;
}

.oit-origin__stage {
	position: relative;
	min-height: 22rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--oit-s-2xl) var(--oit-pad-x);
}

.oit-origin__orbit {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Orbit: ロゴの外周軌道を思わせる、細い楕円の線のみ */
.oit-origin__ring {
	position: absolute;
	width: min(70%, 26rem);
	height: min(85%, 22rem);
	border: 1px solid var(--oit-c-border-strong);
	border-radius: 50%;
	opacity: 0.5;
}

/* Two Origins を思わせる2点。色相を分けるが意味は付与しない（装飾） */
.oit-origin__dot {
	position: absolute;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	transition: transform var(--oit-dur-signature) var(--oit-ease);
}

.oit-origin__dot--a {
	top: 8%;
	right: 24%;
	background: var(--oit-brand-blue);
	transform: translate(0, 0);
}

.oit-origin__dot--b {
	bottom: 10%;
	left: 24%;
	background: var(--oit-brand-gold);
	transform: translate(0, 0);
}

/* 到達時（.is-inview）に一度だけ、2点がわずかに寄り添う。周回はしない */
.oit-origin.is-inview .oit-origin__dot--a {
	transform: translate(-0.5rem, 0.35rem);
}

.oit-origin.is-inview .oit-origin__dot--b {
	transform: translate(0.5rem, -0.35rem);
}

@media (prefers-reduced-motion: reduce) {
	.oit-origin__dot {
		transition: none;
	}
	.oit-origin__dot--a { transform: translate(-0.5rem, 0.35rem); }
	.oit-origin__dot--b { transform: translate(0.5rem, -0.35rem); }
}

.oit-origin__content {
	position: relative;
	z-index: 1;
	max-width: var(--oit-w-prose);
	text-align: center;
}

.oit-origin__quote {
	font-family: var(--oit-font-display);
	font-size: var(--oit-fs-2xl);
	line-height: var(--oit-lh-display);
	letter-spacing: var(--oit-ls-display);
	margin: 0 0 var(--oit-s-lg);
}

.oit-origin__body {
	font-size: var(--oit-fs-base);
	color: var(--oit-c-text-2);
	margin: 0;
}

/* --large: About用の拡大版。Symbol画像は使わず、既存Orbitの抽象言語のまま
   リング・余白・引用の書体をひとまわり大きくする（新しい意味は追加しない）。 */
.oit-origin--large .oit-origin__stage {
	min-height: 30rem;
	padding: var(--oit-s-4xl) var(--oit-pad-x);
}

.oit-origin--large .oit-origin__ring {
	width: min(78%, 34rem);
	height: min(90%, 30rem);
}

.oit-origin--large .oit-origin__quote {
	font-size: var(--oit-fs-3xl);
	margin: 0 0 var(--oit-s-xl);
}


/* ==========================================================================
   8. アクセシビリティ — フォーカス表示
   ---------------------------------------------------------------------
   静かな意匠の中でもフォーカス位置を明確に可視化する。
   ========================================================================== */

.oit-home a:focus-visible,
.oit-home button:focus-visible,
.oit-page a:focus-visible,
.oit-page button:focus-visible,
.l-header a:focus-visible,
.l-header button:focus-visible,
.l-footer__foot a:focus-visible,
.l-footer__foot button:focus-visible,
#sp_menu a:focus-visible,
#sp_menu button:focus-visible {
	outline: 2px solid var(--oit-c-focus);
	outline-offset: 2px;
}


/* ==========================================================================
   9. （PHASE: Home / About Role Separationで削除）
   ---------------------------------------------------------------------
   旧 Business Fields（Home — WHAT WE CREATE）。正本はAboutの.oit-stack系
   （oitowa/parts/about/what-we-create.php）。Homeの business-fields.php は
   front-page.phpから呼び出しを外したため、Home専用クラス
   （.oit-fields-list / .oit-fields-item 等）を削除した。
   ========================================================================== */


/* ==========================================================================
   10. Projects（PHASE 6.3: Home — Zidly Teaser）
   ---------------------------------------------------------------------
   Type / Relationship / Visual Index / zidly.co直リンクはProjects
   （Canonical Record）側のみ。Home側はName・承認済み説明文・Statusのみ。
   Nameのサイズは意図的にMESSAGE（--oit-fs-display/3xl）より一段下げ、
   768px以上でも拡大しない（以前はここでMESSAGEと同格になっていた）。
   ========================================================================== */

.oit-projects-list {
	list-style: none;
	margin: var(--oit-s-xl) 0 0;
	padding: 0;
}

.oit-projects-item {
	padding-block: var(--oit-s-lg);
	border-top: 1px solid var(--oit-c-border);
}

.oit-projects-item:last-child {
	border-bottom: 1px solid var(--oit-c-border);
}

.oit-projects-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--oit-s-sm);
}

.oit-projects-item__name {
	font-size: var(--oit-fs-2xl);
	font-weight: var(--oit-fw-medium);
	color: var(--oit-c-text);
}

.oit-projects-item__desc {
	color: var(--oit-c-text-2);
	max-width: var(--oit-w-prose);
}

.oit-projects-item__status {
	font-family: var(--oit-font-num);
	font-size: var(--oit-fs-xs);
	letter-spacing: var(--oit-ls-label);
	text-transform: uppercase;
	color: var(--oit-c-text-3);
}

.oit-projects-cta {
	margin-top: var(--oit-s-lg);
}

.oit-projects-cta a {
	font-size: var(--oit-fs-sm);
	color: var(--oit-c-text-2);
	text-decoration: none;
	transition: color var(--oit-dur-fast) var(--oit-ease);
}

.oit-projects-cta a:hover,
.oit-projects-cta a:focus-visible {
	color: var(--oit-c-text);
}


/* ==========================================================================
   11. Latest / News
   ========================================================================== */

.oit-latest-list {
	list-style: none;
	margin: var(--oit-s-xl) 0 0;
	padding: 0;
}

.oit-latest-item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oit-s-sm);
	align-items: baseline;
	padding-block: var(--oit-s-sm);
	border-top: 1px solid var(--oit-c-border);
}

.oit-latest-item:last-child {
	border-bottom: 1px solid var(--oit-c-border);
}

.oit-latest-item__date {
	font-family: var(--oit-font-num);
	font-variant-numeric: tabular-nums;
	font-size: var(--oit-fs-xs);
	color: var(--oit-c-text-3);
	min-width: 6em;
}

.oit-latest-item__title {
	color: var(--oit-c-text);
	text-decoration: none;
}

.oit-latest-item__title:hover {
	color: var(--oit-brand-blue);
	text-decoration: underline;
}

.oit-latest-empty {
	margin: var(--oit-s-xl) 0 0;
	padding-top: var(--oit-s-md);
	border-top: 1px solid var(--oit-c-border);
	color: var(--oit-c-text-3);
}


/* ==========================================================================
   12. Contact（PHASE 6.3: Home終端）
   ---------------------------------------------------------------------
   Home終端はContactのみ。About/ProjectsへのCTAはPHASE 6.3で各セクション
   （O/W/A・Projects）内へ移設し、Footer Navigationとの重複を避けている。
   ========================================================================== */

.oit-contact__email {
	margin: 0;
}

.oit-contact__email a {
	display: inline-block;
	font-family: var(--oit-font-num);
	font-size: var(--oit-fs-lg);
	color: var(--oit-brand-blue);
	text-decoration: none;
}

.oit-contact__email a:hover,
.oit-contact__email a:focus-visible {
	text-decoration: underline;
}


/* ==========================================================================
   13. OITOWA Footer（swell_after_copyright フックへ挿入）
   ---------------------------------------------------------------------
   優先度2（Hook）。SWELL標準フッター（コピーライト行）の直後に追加する。
   ========================================================================== */

/* SWELL標準コピーライト行の直後に続く一体のフッターとして見せるため、
   区切り線（border-top）を置かず、背景色もSWELL既定（白系）に合わせる */
.oit-footer {
	padding: var(--oit-s-lg) var(--oit-pad-x) var(--oit-s-xl);
	text-align: center;
}

/* Wordmark → Tagline → Hairline → Nav（PHASE 5・セクション21で追加） → Copyright
   の順で「1つのFooter」に見せるため、共通の親要素
   （SWELL標準 .l-footer__foot .l-container）内で flex + order により
   視覚的な表示順のみ入れ替える。
   SWELL側テンプレート（親テーマ）は変更しない（優先度3: 子テーマCSS）。 */
.l-footer__foot .l-container {
	display: flex;
	flex-direction: column;
}

.l-footer__foot .copyright {
	order: 3;
	margin-top: var(--oit-s-2xs);
}

.oit-footer {
	order: 1;
}

.oit-footer__wordmark img {
	display: inline-block;
	height: 22px;
	width: auto;
	margin: 0 0 var(--oit-s-sm);
}

.oit-footer__tagline {
	font-size: var(--oit-fs-sm);
	color: var(--oit-c-text-3);
	margin: 0;
}


/* ==========================================================================
   13-1. SWELL 標準「ページ上部へ戻る」ボタン（#pagetop）意匠調整
   ---------------------------------------------------------------------
   優先度2（子テーマCSSでの上書き）。機能は変更せず、BASELINE
   （角丸ゼロ・影なし・低彩度）に合わせて色と形状のみ調整する。
   ========================================================================== */

#pagetop.c-fixBtn {
	border-color: var(--oit-c-border-strong);
	color: var(--oit-c-text);
	box-shadow: none;
	border-radius: 0;
}


/* ==========================================================================
   14. 番号ラベル（PROJECTS のみ使用）
   ---------------------------------------------------------------------
   docs/13-design-system.md §E-5 の意味論（装飾的 Visual Index・aria-hidden・
   <ul>）を適用済み。
   ========================================================================== */


/* ==========================================================================
   15. About Page（PHASE 4B）
   ---------------------------------------------------------------------
   .oit-page（§3）を土台に、About固有の共通コンポーネントのみここに追加する。
   Homeのクラスは変更しない。読み物ページのため Prose Width を基本とする。
   ========================================================================== */

/* ---- Eyebrow: 英語小ラベル。Homeの各所（label系クラス）と同じ見た目を
   汎用クラスとして提供する（Homeの既存クラスは変更せず併存させる） ---- */
.oit-eyebrow {
	display: block;
	font-family: var(--oit-font-latin);
	letter-spacing: var(--oit-ls-label);
	text-transform: uppercase;
	font-size: var(--oit-fs-xs);
	font-weight: var(--oit-fw-medium);
	color: var(--oit-brand-blue);
	margin: 0 0 var(--oit-s-2xs);
}

/* ---- About First View ---- */
.oit-about-fv {
	padding-block: var(--oit-s-4xl);
}

.oit-about-fv__title {
	font-size: var(--oit-fs-3xl);
	font-weight: var(--oit-fw-medium);
	margin: 0 0 var(--oit-s-lg);
}

.oit-about-fv__intro {
	max-width: var(--oit-w-prose);
	color: var(--oit-c-text-2);
}

/* ---- Message: IntroとPhilosophyの間の静かな中継点。
   HomeのH1のような主張はさせず、控えめな引用として扱う ---- */
.oit-about-message {
	padding-block: var(--oit-s-xl);
}

.oit-about-message__text {
	font-family: var(--oit-font-display);
	font-weight: var(--oit-fw-normal);
	font-size: var(--oit-fs-xl);
	line-height: var(--oit-lh-display);
	color: var(--oit-c-text-2);
	max-width: var(--oit-w-prose);
	margin: 0;
}

/* ---- Stack: Originality/Wisdom/Action と What We Create で共有する
   「縦方向の逐次展開」コンポーネント。Homeの横3カラム（.oit-owa-item /
   .oit-fields-item）とは別クラスにし、960px以上でも行にならないようにする ---- */
.oit-stack {
	list-style: none;
	margin: var(--oit-s-xl) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.oit-stack__item {
	padding-block: var(--oit-s-2xl);
	border-top: 1px solid var(--oit-c-border);
	max-width: var(--oit-w-prose);
}

.oit-stack__item:last-child {
	border-bottom: 1px solid var(--oit-c-border);
}

.oit-stack__item-title {
	font-size: var(--oit-fs-2xl);
	font-weight: var(--oit-fw-medium);
	margin: 0 0 var(--oit-s-md);
}

.oit-stack__item-desc {
	color: var(--oit-c-text-2);
	margin: 0;
}

/* ---- Projects Bridge ---- */
.oit-projects-bridge__lead {
	max-width: var(--oit-w-prose);
	color: var(--oit-c-text-2);
	margin: 0 0 var(--oit-s-lg);
}

.oit-projects-bridge__label {
	font-size: var(--oit-fs-xl);
	font-weight: var(--oit-fw-medium);
}

/* 未公開時: 非リンクのテキストとして表示（壊れたリンクを作らない） */
.oit-projects-bridge__label--pending {
	color: var(--oit-c-text-3);
}

.oit-projects-bridge__link {
	color: var(--oit-brand-blue);
	text-decoration: none;
}

.oit-projects-bridge__link:hover {
	text-decoration: underline;
}

/* ---- Reveal: Philosophy行の控えめな逐次表示（1回のみ・opacity+4px） ---- */
.oit-reveal-row {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--oit-dur-base) var(--oit-ease),
	            transform var(--oit-dur-base) var(--oit-ease);
}

.oit-reveal-group.is-inview .oit-reveal-row {
	opacity: 1;
	transform: none;
}

.oit-reveal-group.is-inview .oit-reveal-row:nth-child(1) { transition-delay: 0ms; }
.oit-reveal-group.is-inview .oit-reveal-row:nth-child(2) { transition-delay: 50ms; }
.oit-reveal-group.is-inview .oit-reveal-row:nth-child(3) { transition-delay: 100ms; }
.oit-reveal-group.is-inview .oit-reveal-row:nth-child(4) { transition-delay: 150ms; }
.oit-reveal-group.is-inview .oit-reveal-row:nth-child(5) { transition-delay: 200ms; }
.oit-reveal-group.is-inview .oit-reveal-row:nth-child(6) { transition-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
	.oit-reveal-row {
		transition: none;
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   16. Projects Page（PHASE 4C）
   ---------------------------------------------------------------------
   「Card in a gallery ではなく、Record in a register」。
   .oit-page / .oit-eyebrow 等の既存Layout Primitiveをそのまま使用する。
   カードUI・角丸・Shadow・Project別カラー・Badge/Pill型Statusは使わない。
   ========================================================================== */

.oit-projects-fv {
	padding-block: var(--oit-s-4xl);
}

.oit-projects-fv__title {
	font-size: var(--oit-fs-3xl);
	font-weight: var(--oit-fw-medium);
	margin: 0;
}

.oit-project-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oit-project-item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	column-gap: var(--oit-s-md);
	padding-block: var(--oit-s-2xl);
	border-top: 1px solid var(--oit-c-border);
}

.oit-project-item:last-child {
	border-bottom: 1px solid var(--oit-c-border);
}

.oit-project-item__num {
	font-family: var(--oit-font-num);
	font-variant-numeric: tabular-nums;
	font-size: var(--oit-fs-sm);
	color: var(--oit-c-border-strong);
}

.oit-project-item__name {
	font-size: var(--oit-fs-2xl);
	font-weight: var(--oit-fw-medium);
	margin: 0 0 var(--oit-s-md);
}

.oit-project-item__desc {
	max-width: var(--oit-w-prose);
	color: var(--oit-c-text-2);
	margin: 0 0 var(--oit-s-xl);
}

/* フィールド群: ラベル列＋値列。dtは通常のUIラベル（ブランドコピーではない）。
   Projectが増えてもラベル列が縦に揃い、登録簿として立ち上がる構造。 */
.oit-project-item__fields {
	margin: 0;
	max-width: var(--oit-w-prose);
	display: flex;
	flex-direction: column;
	gap: var(--oit-s-xs);
}

.oit-project-item__field {
	display: grid;
	grid-template-columns: 8rem 1fr;
	column-gap: var(--oit-s-md);
	align-items: baseline;
}

.oit-project-item__field dt {
	font-family: var(--oit-font-latin);
	font-size: var(--oit-fs-xs);
	letter-spacing: var(--oit-ls-label);
	text-transform: uppercase;
	color: var(--oit-c-text-3);
}

.oit-project-item__field dd {
	margin: 0;
	color: var(--oit-c-text);
}

/* Status はプレーンテキストのまま。Badge/Pill/色分けを一切使わない */

.oit-project-item__link {
	color: var(--oit-brand-blue);
	text-decoration: none;
}

.oit-project-item__link:hover {
	text-decoration: underline;
}

@media (max-width: 599.98px) {
	.oit-project-item {
		grid-template-columns: 2rem 1fr;
	}
	.oit-project-item__field {
		grid-template-columns: 1fr;
		row-gap: var(--oit-s-3xs);
	}
}


/* ==========================================================================
   17. About Vertical Spacing Polish（Visual Review後の調整）
   ---------------------------------------------------------------------
   .oit-about-page スコープのみで .oit-page__section 等の余白を
   概ね10〜15%締める。Home / Projects の共有Primitiveは変更しない
   （.oit-about-page 配下でのみ上書きされる）。
   Originのみ、ページの署名的瞬間として元の余白（--oit-s-4xl）を維持する。
   ========================================================================== */

.oit-about-page .oit-page__section {
	padding-block: clamp(5.25rem, 10vw, 7.75rem); /* was clamp(6rem,12vw,9rem) ≒13%減 */
}

.oit-about-page .oit-page__section.oit-origin {
	padding-block: var(--oit-s-4xl); /* Originは締めない。他セクションより余白を残す */
}

.oit-about-page .oit-about-message {
	padding-block: 2.75rem; /* was var(--oit-s-xl)=3rem */
}

.oit-about-page .oit-stack__item {
	padding-block: 3.5rem; /* was var(--oit-s-2xl)=4rem ≒12.5%減。O/W/A・Fields両方に適用 */
}


/* ==========================================================================
   18. Breadcrumb Policy — About / Projects
   ---------------------------------------------------------------------
   優先度1（SWELL標準設定/Hook/Filter）: ページ単位でパンくず表示可否を
   切り替えるSWELL標準設定は存在しない（parts/breadcrumb.php を実機確認済み。
   swell_breadcrumb_list_data フィルターはリスト内容のみが対象で、
   ラッパー自体の出力有無は制御できない）。
   代わりにWP標準の body_class フィルター（oitowa/inc/hooks.php）で
   About/Projectsのみ .oit-hide-breadcrumb クラスを付与し、
   このクラスを対象に子テーマCSSで #breadcrumb を視覚的に非表示にする
   （このテーマは body_class() の出力先が <body> ではなく #body_wrap で、
   かつ page-{slug} クラスを含まないため、ID/構造に依存しないこの方式を採用）。
   PHP側の実行（JSON-LD用 SWELL_Theme::$bread_json_data の設定）は
   このフィルターと無関係に常時実行されるため、構造化データは影響を受けない
   （見た目の非表示と構造化データは別物として扱う）。
   Homeには影響しない（フロントページは元々 is_top() で非表示済み。
   加えて body_class フィルターも about/projects スラッグのみを対象とする）。
   ========================================================================== */

.oit-hide-breadcrumb #breadcrumb {
	display: none;
}


/* ==========================================================================
   19. Global Navigation — Desktop Header（PHASE 5）
   ---------------------------------------------------------------------
   Menu Source: 管理画面メニュー「OITOWA Primary」（header_menuに割当）。
   Text only。背景・Pill・Button化・Dropdown・Mega Menuは持たない。
   優先度3（子テーマCSS）。項目の管理はWP標準Navigation Menuで行う。
   ========================================================================== */

/* SWELL既定のUnderline Hover演出（疑似要素によるwidth/transformアニメーション）
   を止める。Hover/Focusは色の変化のみに統一するため。 */
.l-header__gnav .c-gnav > .menu-item > a::after {
	content: none;
}

.l-header__gnav .c-gnav > .menu-item > a > .ttl {
	position: relative;
	color: var(--oit-c-text-2);
	font-size: var(--oit-fs-sm);
	font-weight: var(--oit-fw-normal);
	letter-spacing: var(--oit-ls-label);
	padding-bottom: var(--oit-s-3xs);
	border-bottom: 1px solid transparent; /* Current用の余白を常時確保し、状態間でLayout Shiftを起こさない */
	transition: color var(--oit-dur-fast) var(--oit-ease);
}

.l-header__gnav .c-gnav > .menu-item > a:hover > .ttl,
.l-header__gnav .c-gnav > .menu-item > a:focus-visible > .ttl {
	color: var(--oit-c-text);
}

/* Current Page — WordPress標準の current-menu-item / aria-current="page" を使用。
   色の変化 + 文字幅ぴったりの細いHairlineのみ。Pill・背景・太字化はしない
   （色だけに依存しないよう、Hairlineという「形」を併用する）。 */
.l-header__gnav .c-gnav > .current-menu-item > a > .ttl {
	color: var(--oit-c-text);
	border-bottom-color: var(--oit-brand-navy);
}


/* ==========================================================================
   20. Mobile Navigation — SWELL標準 Drawer（#sp_menu）の意匠のみ上書き（PHASE 5）
   ---------------------------------------------------------------------
   Drawer本体・開閉Motion・Overlay・Scroll LockはSWELL標準のまま変更しない。
   Paper / Ink / Hairline による配色と、Current表現・Touch Targetのみ調整する。
   a11y補完（aria-expanded 等）は oitowa/src/js/nav.js を参照。
   ========================================================================== */

.p-spMenu__inner {
	background-color: var(--oit-c-bg);
	color: var(--oit-c-text);
	box-shadow: none; /* Heavy Shadowを避け、Paper然とした見た目にする */
}

.p-spMenu .c-spnav .menu-item > a {
	min-height: 44px; /* Touch Target確保 */
	display: flex;
	align-items: center;
	border-left: 3px solid transparent; /* Current用の余白を常時確保 */
	padding-left: calc(.25em + 8px);
	color: var(--oit-c-text-2);
}

.p-spMenu .c-spnav .menu-item > a:focus-visible {
	color: var(--oit-c-text);
}

/* Current Page（Mobile）— 横罫（行区切り）と競合しないよう、縦罫で表現する */
.p-spMenu .c-spnav > .current-menu-item > a {
	border-left-color: var(--oit-brand-navy);
	color: var(--oit-c-text);
}


/* ==========================================================================
   21. Footer Navigation（PHASE 5）
   ---------------------------------------------------------------------
   Menu Source: Desktop / Mobileと同じ「OITOWA Primary」（footer_menuに割当）。
   Wordmark → Tagline → Hairline → Nav → Copyright の順で「1つのFooter」に
   見せるため、既存のflex + order構成（セクション13）に1項目追加する。
   Global Navより明確に軽い扱いとし、Current表現は行わない
   （Global Navとの二重表示を避けるため）。
   ========================================================================== */

.oit-footer-nav {
	order: 2; /* Wordmark/Tagline(.oit-footer: order 1) の直後、Copyright(order 3)の前 */
	border-top: 1px solid var(--oit-c-border);
	margin-top: var(--oit-s-lg);
	padding-top: var(--oit-s-md);
}

.l-footer__nav {
	display: flex;
	justify-content: center;
	gap: var(--oit-s-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.oit-footer-nav .l-footer__nav a {
	font-size: var(--oit-fs-xs);
	color: var(--oit-c-text-3);
	text-decoration: none;
}

.oit-footer-nav .l-footer__nav a:hover,
.oit-footer-nav .l-footer__nav a:focus-visible {
	color: var(--oit-c-text);
}


/* ==========================================================================
   21-1. Footer Utility Nav（PHASE 8.1: Contact / Privacy Policy）
   ---------------------------------------------------------------------
   footer_menu（Primary Navigationと共有・21）とは別枠。WP Navigation Menuへ
   項目追加せず子テーマのみで完結させるための、控えめな補助リンク。
   Primary Navより一段軽い扱い（Hairlineなし・小さいフォント）とし、
   Wordmark/Taglineのすぐ下、Primary Nav（Hairlineあり）の上に置く。
   ========================================================================== */

.oit-footer-utility {
	margin-top: var(--oit-s-sm);
}

.oit-footer-utility__list {
	display: flex;
	justify-content: center;
	gap: var(--oit-s-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.oit-footer-utility__list a {
	font-size: var(--oit-fs-xs);
	color: var(--oit-c-text-3);
	text-decoration: none;
}

.oit-footer-utility__list a:hover,
.oit-footer-utility__list a:focus-visible {
	color: var(--oit-c-text);
}


/* ==========================================================================
   22. Contact Page（PHASE 8.1）
   ---------------------------------------------------------------------
   .oit-page（§3）を土台に、Contact固有の最小限のコンポーネントのみ追加する。
   H1はProjectsと同じくEnglish-only・eyebrowなし。Contact Formは持たない
   （mailtoのみ）。
   ========================================================================== */

.oit-contact-fv {
	padding-block: var(--oit-s-4xl);
}

.oit-contact-fv__title {
	font-size: var(--oit-fs-3xl);
	font-weight: var(--oit-fw-medium);
	margin: 0 0 var(--oit-s-lg);
}

.oit-contact-fv__cta {
	margin-top: var(--oit-s-xl);
}

/* 静かな意匠を保つため、塗りボタンではなく罫線のみのボタンにする
   （Card UI・Shadow・角丸は使わない。--oit-radius: 0 を継承） */
.oit-contact-fv__button {
	display: inline-block;
	padding: var(--oit-s-sm) var(--oit-s-lg);
	border: 1px solid var(--oit-c-border-strong);
	color: var(--oit-c-text);
	text-decoration: none;
	transition: border-color var(--oit-dur-fast) var(--oit-ease),
	            color var(--oit-dur-fast) var(--oit-ease);
}

.oit-contact-fv__button:hover,
.oit-contact-fv__button:focus-visible {
	border-color: var(--oit-brand-navy);
	color: var(--oit-brand-navy);
}

/* Home終端 Contact セクションからの内部リンク（Projects/O-W-Aの
   *-cta と同じ控えめな表現に揃える） */
.oit-contact-cta {
	margin-top: var(--oit-s-sm);
}

.oit-contact-cta a {
	font-size: var(--oit-fs-sm);
	color: var(--oit-c-text-2);
	text-decoration: none;
	transition: color var(--oit-dur-fast) var(--oit-ease);
}

.oit-contact-cta a:hover,
.oit-contact-cta a:focus-visible {
	color: var(--oit-c-text);
}


/* ==========================================================================
   23. Privacy Policy Page（PHASE 8.1）
   ---------------------------------------------------------------------
   長文を1本のReading Column（Prose Width）で読ませる。9条をカード化・
   アコーディオン化せず、罫線と余白のみで区切る（.oit-stackと同じ語彙）。
   Privacyのため曖昧さより明確さを優先し、装飾は最小限に留める。
   ========================================================================== */

.oit-privacy-fv {
	padding-block: var(--oit-s-4xl);
}

.oit-privacy-fv__title {
	font-size: var(--oit-fs-3xl);
	font-weight: var(--oit-fw-medium);
	margin: 0 0 var(--oit-s-lg);
}

.oit-privacy-clauses {
	padding-top: 0;
}

.oit-privacy__clause {
	padding-block: var(--oit-s-xl);
	border-top: 1px solid var(--oit-c-border);
}

.oit-privacy__clause:last-of-type {
	border-bottom: 1px solid var(--oit-c-border);
}

.oit-privacy__clause-title {
	font-size: var(--oit-fs-lg);
	font-weight: var(--oit-fw-medium);
	margin: 0 0 var(--oit-s-md);
}

.oit-privacy__clause a {
	color: var(--oit-brand-blue);
	text-decoration: none;
}

.oit-privacy__clause a:hover,
.oit-privacy__clause a:focus-visible {
	text-decoration: underline;
}

/* 運営者情報（7条）: ラベル列＋値列。Projects (§16) の
   .oit-project-item__field と同じ語彙のグリッドを使う。 */
.oit-privacy__meta {
	margin: 0 0 var(--oit-s-md);
	display: flex;
	flex-direction: column;
	gap: var(--oit-s-xs);
}

.oit-privacy__meta-row {
	display: grid;
	grid-template-columns: 8rem 1fr;
	column-gap: var(--oit-s-md);
	align-items: baseline;
}

.oit-privacy__meta-row dt {
	font-family: var(--oit-font-latin);
	font-size: var(--oit-fs-xs);
	letter-spacing: var(--oit-ls-label);
	text-transform: uppercase;
	color: var(--oit-c-text-3);
}

.oit-privacy__meta-row dd {
	margin: 0;
	color: var(--oit-c-text);
}

@media (max-width: 599.98px) {
	.oit-privacy__meta-row {
		grid-template-columns: 1fr;
		row-gap: var(--oit-s-3xs);
	}
}

.oit-privacy__date {
	margin-top: var(--oit-s-xl);
	font-size: var(--oit-fs-sm);
	color: var(--oit-c-text-3);
}