@charset "UTF-8";
/**
 * company.css — /company（会社概要）
 *
 * 一次資料:
 *   1. 設計ツリー specs/pageviews/a9176228-ea97-4390-ba22-fed5d81f293e.json
 *   2. 現行サイト https://lgbtqordinary.com/company の computed 値
 *      （1440x900 で採寸・2026-09-13。設計ツリーと食い違う場合はこちらを採用した）
 *
 * ★ 設計ツリーより現行の computed を優先した箇所（いずれも実測で確かめたもの）
 *   - ヒーローは 100vh ではない。1920x1080 のキービジュアルが素のまま流れており、
 *     高さ = 幅 x 9/16。1425px 幅で 801.56px。
 *   - セクションの padding は 0 ではない。#company-1 と #company-2 が 100px 100px 80px、
 *     concept が 100px 0。セクション間の余白は 0（枠どうしが直接積まれている）。
 *   - アコーディオンは閉じた状態が既定。1件 151px。
 *   - 色帯は絶対配置の背面装飾で、フローの高さに寄与しない。
 *   - concept の本文は 20px/1.8、見出しは 36px/1.8。
 *
 * ★ 現行サイトとの高さ実測（1440x900）
 *   header 80 ／ hero 802 ／ #company-1 693 ／ concept 2722 ／ #company-2 521 ／ footer 400
 *   = 合計 5,218px
 *
 * ★ 2026-09-14 表示品質の精査で直した箇所（いずれも現行の computed / 設計ツリーを再計測して確認）
 *   - アコーディオン: 閉＝▼（rotate 180deg）・開＝▲。当初は逆だった
 *   - アコーディオン: 罫線は「残りを埋める」伸縮要素（現行 160/176/216px）、罫線と▼は上下中央
 *   - 会社概要の見出し 28px / 字間 -0.01em、ラベルに下線 1px
 *   - タブレット(≤840): 和文見出しの折り返し許可（nowrap のままだと 541〜614px で罫線に食い込んでいた）
 *   - スマホ(≤540): ヒーローは縦型動画のみ・コピー群/KV非表示（設計ツリー @mobile）、
 *     アコーディオンは縦積み＋▼中央、会社概要はラベル/値を縦積み（メールアドレスが右端で切れていた）
 *   - アコーディオン和文見出し: 2行に折れたときの末尾1〜2文字落ちを text-wrap:balance（≤840）と
 *     <br class="o-br-sp">（≤540・pmv.php）で解消
 *   - 色帯の高さを欧文見出しの縮小に追従（@small 76px / @tablet 64px）。
 *     92px 固定のままだと 541〜1140px で帯の下端が和文見出しを横切っていた
 *   - @tablet 以下の --o-header-h を 80px に上書き（S-02 ヘッダーは全幅 80px 固定）。
 *     60px のままだとコンテンツが y=60 から始まり、ヘッダーがヒーロー上端 20px を覆っていた
 *
 * ブレークポイント（全ページ共通）: small ~1140 / tablet ~840 / mobile ~540 / mini ~320
 */

/* ============================================================
 * 0. 土台と PC/SP 出し分け
 * ============================================================ */

/*
 * セクション間に余白を入れない。
 * 現行サイトはセクション枠どうしが直接積まれており、余白は各セクションの
 * padding（100px 100px 80px など）で持っている。
 * 当初 main に gap:100px を入れていたが、それだと 3か所ぶん +300px 余分になる。
 */
.co-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* セクションは画面いっぱい。中身を 1080px に収めるのは各セクション側で行う。 */
.co-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/*
 * PC版 / モバイル版テキストの切り替え。
 * 設計ツリー実測:
 *   PC版     … @mobile / @mini で none
 *   モバイル版 … base / @small / @tablet で none、@mobile / @mini で表示
 * 中身は同じで <br> の位置だけが違う。
 */
.co-sp {
	display: none;
}

/* ============================================================
 * 1. ヒーロー（Movie）
 *    現行実測: 高さ 802px（= 幅1425px x 9/16）。100vh ではない。
 * ============================================================ */

.co-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* キービジュアルをフローに置き、これが高さを決める。 */
.co-hero__media {
	position: relative;
	z-index: 0;
	width: 100%;
}

/* 1920x1080 の素材。width:100% / height:auto なので 16:9 で伸びる。 */
.co-hero__kv {
	display: block;
	width: 100%;
	height: auto;
}

/* 背景動画はキービジュアルに重ねる（設計ツリー: Iframe は height:100% / width:100%）。 */
.co-hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.co-hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 56.25vw; /* 16:9 */
	min-width: 100%;
	min-height: 100%;
	border: 0;
	transform: translate(-50%, -50%);
}

.co-hero__video--portrait {
	display: none;
}

/* コピーはキービジュアルの上に重ねて中央寄せ（現行は height:609px の絶対配置）。 */
.co-hero__copy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
}

/* 16px / 500 / #14314a */
.co-hero__lead {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 設計ツリー: width:110%（親の110%＝画面幅より広く出る想定） */
.co-hero__logo {
	width: 110%;
	max-width: 100%;
	height: auto;
	transition: opacity 900ms ease, visibility 0s linear 900ms;
}

/*
 * 動画が始まったらフェードアウト（2026-09-17 CEO指示
 * 「会社紹介ページのロゴ、動画が始まったらフェードアウトで消して欲しい」）。
 *
 * クラスを付けるのは assets/js/company-hero.js。Vimeo の play イベントを
 * postMessage で受け取ってから付ける（時間で決め打ちしていない）。
 *
 * opacity だけでなく visibility も落とすのは、消えたロゴが
 * 動画の上でクリック／読み上げの対象に残らないようにするため。
 * visibility の遅延（900ms）で、フェードが終わってから消える。
 */
.co-hero__logo.is-video-playing {
	opacity: 0;
	visibility: hidden;
}

/* 動きを減らす設定では即時に切り替える。 */
@media (prefers-reduced-motion: reduce) {

	.co-hero__logo {
		transition: none;
	}
}

/* 20px / 500 / #14314a */
.co-hero__tagline {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* ============================================================
 * 2. philosophy / mission / vision（#company-1）
 *    現行実測: 693px = padding 100/100/80 + 中身 513px
 *              中身 513 = アコーディオン151px x 3 + gap 30px x 2
 * ============================================================ */

.co-pmv {
	gap: 30px;
	padding: 100px 100px 80px;
}

/*
 * 色帯を背面に敷くための基準枠。
 * <details> は閉じているあいだ <summary> 以外の子を描画しないため、
 * 帯は <details> の外（この枠の直下）に置いている。
 */
.co-pmv__item {
	position: relative;
	width: 100%;
	max-width: 1080px;
}

/*
 * summary = 現行の <button>。実測 151px / padding 12px。
 * 子は 見出し群824px + 罫線160px + アイコン72px = 1056px（= 1080 - padding 24）で、
 * 隙間（gap）は入っていない。
 * 上下方向は中央揃え（現行 button の align-items:center。罫線 y=+75・▼中心 y=+75 で
 * 151px の真ん中。flex-end だと罫線が +102 まで下がり和文見出しの高さに来ていた。2026-09-14）
 */
.co-pmv__summary {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	padding: 12px;
	list-style: none;
	cursor: pointer;
}

.co-pmv__summary::-webkit-details-marker {
	display: none;
}

/*
 * 現行実測: 127px（72 + gap15 + 40）。
 * 幅は中身なり（設計ツリーの <group> に flex 指定なし）。残りを埋めるのは罫線のほう。
 * 当初 flex:1 1 auto で見出し群を伸ばしていたため、罫線が 3件とも 160px 固定になり
 * 現行（160 / 176 / 216px）とずれていた。2026-09-14 修正。
 */
.co-pmv__heads {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 15px;
	min-width: 0;
}

/*
 * 72px / 700 / line-height 72px / letter-spacing 0.72px(=0.01em) / #14314a
 * 字間は現行の computed 実測。設計ツリーから 0.02em と読んでいたのは誤り。
 */
.co-pmv__en {
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 72px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

/*
 * 40px / 700 / line-height 40px / letter-spacing 0.4px(=0.01em) / #14314a
 * 現行では 824px 幅に1行で収まっている（高さ40px）。字間を 0.06em と読んでいたため
 * ローカルでは2行になり、1件あたり +40px ずれていた。
 * 和文が折り返すと段組みが崩れるので、念のため折り返しを禁止する。
 */
.co-pmv__ja {
	color: #14314a;
	white-space: nowrap;
	font-family: var(--s-font-f88553ee);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

/*
 * 罫線: 見出し群とアイコンの間を埋める伸縮要素（設計ツリー Box: flex:1 / width:auto）。
 * 現行 1440 の実測は philosophy 160 / mission 176 / vision 216px で、和文の長さぶん変わる。
 * 「160px 固定」と読んでいたのは1件目だけを測った誤り。2026-09-14 修正。
 * 上下位置は summary の align-items:center に任せる（margin-bottom 不要）。
 */
.co-pmv__rule {
	flex: 1 1 0;
	width: auto;
	height: 1px;
	margin-bottom: 0;
	background: #14314a;
}

/*
 * Icon arrow_drop_up 72px / #14314a。
 * 閉じているときは 180° 回して ▼、開いたら ▲（現行の computed: 閉 rotate:180deg → 開 none。
 * 設計ツリー Icon の _isClose も rotate:180deg）。当初は逆に組んでいたので 2026-09-14 修正。
 */
.co-pmv__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: #14314a;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.co-pmv__icon-glyph {
	font-size: 72px;
	line-height: 1;
}

.co-pmv__disclosure[open] .co-pmv__icon {
	transform: none;
}

/* 20px / 500 */
.co-pmv__body {
	position: relative;
	z-index: 1;
	padding: 12px;
}

.co-pmv__body p {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.08em;
}

/*
 * 色帯。現行の computed は position:absolute / top:0 / height:92px / width:100% / z-index:-1。
 * アコーディオン(151px)の上端に重なる背面装飾で、フローの高さには寄与しない。
 * 本テーマは z-index:-1 の代わりに「帯 0 / 中身 1」で同じ重なりを作る
 * （親に背景色が付いても帯が消えないようにするため）。
 * 色は tokens.css のパステル3色:
 *   philosophy #ffb1b1 / mission #cbe9ef / vision #caffc6（現行の computed で確認）
 */
/*
 * ★ 2026-09-17 修正 — 現行サイトは「常時表示」ではなく「ホバーで左から入る」だった。
 *
 * それまでの実装は left:0 / width:100% で帯を出しっぱなしにしていた。
 * 現行サイトの実CSSを取得したところ（2026-09-17・ブラウザでルールを直接読取）、
 * 素の状態は画面外に逃がしてあり、行をホバーしたときだけ右へスライドしてくる作りだった。
 *
 * 取得した現行の宣言（逐語）:
 *   素   .sd[data-s-5990edd7…] {
 *          background: var(--s-color-1ea1af29); inset: 0 auto auto -1621px;
 *          height: 92px; position: absolute; transition-duration: 1200ms;
 *          width: 1184px; z-index: -1; max-width: 100%; }
 *   ホバー .sd[data-s-960fd09e…]:hover .sd[data-s-5990edd7…] {
 *          transform: skew(-18deg, 0deg); transition-duration: 800ms;
 *          translate: 900px; z-index: -1; }
 *   3行とも同型（mission=3555fe61 / vision=cc52eed3）。色だけ違う。
 *
 * 数値はこの取得値そのまま。left/width/skew/translate/duration を1つも作っていない。
 * z-index だけは本テーマの方針（親に背景が付いても消えないよう「帯0 / 中身1」）に合わせ、
 * -1 ではなく 0 を使う。重なり順の結果は同じ。
 *
 * タッチ端末には :hover が無いので、hover を持つ環境だけに限定する。
 * 限定しないと、タップ後に帯が出たまま残る端末が出る。
 */
.co-pmv__band {
	position: absolute;
	top: 0;
	left: -1621px;
	z-index: 0;
	display: block;
	width: 1184px;
	max-width: 100%;
	height: 92px;
	background: var(--co-band);
	transition: translate 1200ms ease, transform 1200ms ease;
}

@media (hover: hover) and (pointer: fine) {

	.co-pmv__item:hover .co-pmv__band,
	.co-pmv__item:focus-within .co-pmv__band {
		transform: skew(-18deg, 0deg);
		translate: 900px;
		transition-duration: 800ms;
	}
}

/*
 * ホバーできない環境（タッチ・キーボードのみ等）では出しっぱなしにする。
 * 何も出ないと3行が白地のテキストだけになり、色で区切っている情報設計が失われるため。
 */
@media not all and (hover: hover) {

	.co-pmv__band {
		left: 0;
		width: 100%;
		translate: none;
		transform: none;
	}
}

/* 動きを減らす設定では滑らせない（最終状態で静止）。 */
@media (prefers-reduced-motion: reduce) {

	.co-pmv__band {
		transition: none;
	}
}

/* ============================================================
 * 3. concept（長文4本）
 *    現行実測: 2722px = padding 100px 0 + 中身 2523px（gap 20px）
 * ============================================================ */

.co-concept {
	gap: 20px;
	width: 1080px;
	max-width: 100%;
	padding: 100px 0;
}

/*
 * 現行サイトの先頭にある 700x130px の空ボックス。
 * 中身は <style></style> だけで何も描画されないが、リードの上の余白として効いている。
 */
.co-concept__embed {
	flex: none;
	width: 700px;
	max-width: 100%;
	height: 130px;
}

/*
 * リードと見出しは同じ書式。現行実測: 36px / 700 / line-height 64.8px / letter-spacing 5.04px。
 * 当初リード36px・見出し28px・行間1.8で組んでいたが、見出しも36pxだった。
 */
.co-concept__lead,
.co-concept__head {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.14em;
	text-align: center;
}

/*
 * 本文。現行実測: 20px / 500 / line-height 36px / letter-spacing 2px。
 * 当初 18px / 行間1.9 で組んでいた。修正後は行数と高さが現行と一致する
 * （10/14/14/15行 → 360/504/504/540px）。
 */
.co-concept__body {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* ============================================================
 * 4. 会社概要テーブル（#company-2）
 *    現行実測: 521px = padding 100/100/80 + 中身 341px
 *              中身 341 = 見出し枠91px + gap 21px + 表 230px
 * ============================================================ */

.co-outline {
	padding: 100px 100px 80px;
}

/* 現行実測: 幅1080px / padding-left 20px / gap 21px */
.co-outline__inner {
	display: flex;
	flex-direction: column;
	gap: 21px;
	width: 100%;
	max-width: 1080px;
	padding-left: 20px;
}

/*
 * 28px / 700 / letter-spacing -0.28px(=-0.01em)。行ボックス41px、その下に50pxの余白で枠91px。
 * 現行の computed（1440・2026-09-14 再計測）。24px / 0.08em と読んでいたのは @mobile の値。
 * 設計ツリー: base 28px / @mobile 24px / letterSpacing -0.01em。
 */
.co-outline__head {
	flex: none;
	height: 91px;
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 28px;
	font-weight: 700;
	line-height: 41px;
	letter-spacing: -0.01em;
	text-align: left;
}

.co-outline__list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	margin: 0;
}

/* 1段 = 左右2カラム。カラムの間隔は実測 530px ピッチ。 */
.co-outline__group {
	display: flex;
	flex-direction: row;
	gap: 0;
}

/*
 * 上揃え（設計ツリー <group> alignItems:flex-start）。既定の stretch だと所在地の段で
 * ラベルが 114px に伸び、下線が文字のはるか下（段の底）に引かれる。現行はラベル 40px。2026-09-14
 */
.co-outline__pair {
	display: flex;
	flex: none;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	width: 530px;
	max-width: 100%;
}

/*
 * 20px / 600 / line-height 38.6px。幅120px固定。
 * 下線 1px #14314a（現行の computed border-bottom: 1px solid rgb(20,49,74)・全幅で確認、
 * 設計ツリー Text の borderBottom も同値）。抜けていたので 2026-09-14 追加。
 */
.co-outline__label {
	flex: none;
	width: 120px;
	margin: 0;
	border-bottom: 1px solid #14314a;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 600;
	line-height: 38.6px;
	letter-spacing: 0.08em;
}

/* 20px / 500 / line-height 38px */
.co-outline__value {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 38px;
	letter-spacing: 0.08em;
}

/* ============================================================
 * 5. レスポンシブ
 * ============================================================ */

@media (max-width: 1140px) {

	.co-pmv,
	.co-outline {
		padding-right: 24px;
		padding-left: 24px;
	}

	.co-concept {
		padding-right: 24px;
		padding-left: 24px;
	}

	.co-pmv__en {
		font-size: 56px;
	}

	.co-pmv__ja {
		font-size: 30px;
	}

	/*
	 * 色帯は欧文見出し（en）の行に合わせて縮める。
	 * base は padding12 + en72 = 84px に対し帯 92px（= en の 8px 下で止まる）。
	 * 欧文を 56px に落としたのに帯を 92px のまま置いていたため、
	 * 和文見出し（開始 = 12 + 56 + gap15 = 83px）を帯の下端が 9px 分横切っていた
	 * （実測 1000px 幅: 帯の下端 835 / 和文 826–856）。
	 * 12 + 56 + 8 = 76px にすると base と同じ 7px の余白で和文の手前で止まる。2026-09-14
	 */
	.co-pmv__band {
		height: 76px;
	}

	/* 2カラムが入らなくなるので均等割りにする。 */
	.co-outline__pair {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

@media (max-width: 840px) {

	/*
	 * S-02（コーポレートヘッダー）は 840px 以下でも高さ 80px 固定（parts.css）。
	 * 一方 base.css のトークン --o-header-h は @tablet 以下で 60px になるため、
	 * .o-has-fixed-header の上マージンと html の scroll-padding-top が 20px 足りず、
	 * 768px では不透明なヘッダー（#fbf8f5）がヒーローの上端 20px を隠し、
	 * 540px 以下では透明ヘッダーのロゴ／ハンバーガーがヒーローに重なっていた。
	 * 現行サイトは全幅でコンテンツが y=80 から始まる（実測 768: #company-1 y=512 = 80 + ヒーロー432）。
	 * base.css の注記「80px 固定のヘッダー（S-02 等）は各コンポーネント側で
	 * --o-header-h を上書きすること」に従う。このファイルは /company だけで読み込まれる
	 * （inc/enqueue.php の $map）ので、上書きの影響はこのページに閉じる。
	 * ※ ヘッダー自身の高さは parts.css で 80px と明示されているので変わらない。2026-09-14
	 */
	:root {
		--o-header-h: 80px;
	}

	.co-pmv,
	.co-outline {
		padding-top: 72px;
		padding-bottom: 56px;
	}

	.co-concept {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.co-concept__embed {
		height: 60px;
	}

	.co-pmv__en {
		font-size: 44px;
	}

	/*
	 * 24px のまま nowrap だと、541〜614px で「配慮から一歩先へ。“価値”としてのLGBTQ。」(495px)
	 * が入り切らず罫線の下に潜っていた（744px でも 31px 分はみ出し）。折り返しを許可し、
	 * 折り返したときに行が密着しないよう行間 1.3 にする（1行のときは 24→31px、1件あたり +7px）。
	 * 2026-09-14
	 *
	 * 2行に折れたとき末尾の1〜2文字だけが落ちる（audit orphans: 600px で「…同時に育て／る。」、
	 * 430px で「…あたりまえの幸せ」／を。」）。text-wrap:balance で2行を均等に割る。
	 * 箱の幅（intrinsic size）は変わらないので罫線の長さに影響しない。未対応ブラウザは無視するだけ。2026-09-14
	 */
	.co-pmv__ja {
		font-size: 24px;
		white-space: normal;
		line-height: 1.3;
		text-wrap: balance;
	}

	.co-pmv__icon {
		width: 48px;
		height: 48px;
	}

	.co-pmv__icon-glyph {
		font-size: 48px;
	}

	/*
	 * 欧文見出しが 44px になるので帯も 12 + 44 + 8 = 64px に縮める（@small と同じ考え方）。
	 * 92px のままだと帯の下端が和文見出し（開始 = 12 + 44 + gap15 = 71px）を 21px 分横切り、
	 * 文字の下1/3だけが白地に出ていた（実測 768px 幅: 帯の下端 656 / 和文 635–666）。
	 * 現行サイトは同じ幅で欧文 72px・和文 32px のまま帯 92px なので重なりは起きていない。2026-09-14
	 */
	.co-pmv__band {
		height: 64px;
	}

	.co-concept__lead,
	.co-concept__head {
		font-size: 28px;
	}

	.co-outline__head {
		height: auto;
		margin-bottom: 20px;
	}

	/* 1段の中の2組を縦に積む。 */
	.co-outline__group {
		flex-direction: column;
		gap: 12px;
	}
}

@media (max-width: 540px) {

	/* 設計ツリー @mobile: PC版を隠してモバイル版を出す */
	.co-pc {
		display: none;
	}

	.co-sp {
		display: block;
	}

	.co-hero__video--wide {
		display: none;
	}

	.co-hero__video--portrait {
		display: block;
	}

	/*
	 * スマホのヒーローは縦型動画だけを 148.15vw（= 幅 x 40/27）で見せる。
	 * 設計ツリー @mobile: キービジュアル display:none / コピー群 <group> display:none /
	 * Box（縦型 Iframe, padding:148.15%）display:flex。現行実測 375: iframe 556px・コピー非表示。
	 * 当初は KV(16:9=211px) の帯の中にコピー3点を押し込んでいて、リードが「…プロジェク／ト。」と
	 * 2文字落ち、ロゴが動画の字幕帯と重なって読めなかった。2026-09-14 修正。
	 */
	.co-hero__media {
		aspect-ratio: 27 / 40;
	}

	.co-hero__kv,
	.co-hero__copy {
		display: none;
	}

	.co-hero__video--portrait iframe {
		width: 100%;
		height: 100%;
		min-width: 100%;
		min-height: 100%;
	}

	.co-concept__embed {
		height: 32px;
	}

	/*
	 * アコーディオン見出しを縦積みにする（設計ツリー input @mobile flexDirection:column）。
	 * 現行実測 375: 罫線なし（Box は width:auto で幅0）・▼ 32px が中央（x=172）。
	 * 当初は flex-wrap で折り返していたため、幅100%の罫線が文字の直下に引かれ、
	 * 48px の▲が左端に落ちていた。2026-09-14 修正。
	 */
	.co-pmv__summary {
		flex-direction: column;
		align-items: stretch;
	}

	.co-pmv__rule {
		display: none;
	}

	/* 設計ツリー Icon @mobile: fontSize 32px。auto マージンで左右中央。 */
	.co-pmv__icon {
		width: 32px;
		height: 32px;
		margin: 6px auto 0;
	}

	.co-pmv__icon-glyph {
		font-size: 32px;
	}

	/*
	 * 色帯は en の行までで止める。padding 12 + en 36 = 48px の下、ja（63px〜）の手前。
	 * 92px のままだと 2行に折れた和文見出しの 2行目を帯の下端が横切っていた。
	 */
	.co-pmv__band {
		height: 60px;
	}

	.co-pmv__en {
		font-size: 36px;
	}

	.co-pmv__ja {
		font-size: 20px;
		white-space: normal;
	}

	.co-pmv__body p,
	.co-concept__body,
	.co-outline__label,
	.co-outline__value {
		font-size: 16px;
		line-height: 1.8;
		text-align: left;
	}

	/*
	 * 会社概要: ラベルと値を縦に積む。
	 * ラベル96px + gap16px の横並びだと値カラムが 375 で 215px・430 で 270px しかなく、
	 * メールアドレス（1語・281px）が右端で切れて末尾が読めなかった（現行は語の途中で
	 * 「sakoda001@lg／btqordinary.co／m」と3行に折れる）。縦積みなら 327px 幅に1行で収まり、
	 * 所在地「東京都新宿区西新宿三丁目3番13号」も1行になる。
	 * ラベル幅は文字なり（設計ツリー @mobile width:auto。下線も文字幅だけ）。2026-09-14
	 */
	.co-outline__pair {
		flex-direction: column;
		gap: 0;
	}

	/*
	 * 縦積みにすると PC の「2組で1段」に意味がなくなるので、組どうしの間隔を一定にする。
	 * 段の間 30px / 組の間 12px のままだと 12・30・12・30 と不揃いになる。
	 * 現行スマホは組の間 10px（gap）・段の間 13px（margin）でほぼ一定。既存の 12px に揃える。
	 */
	.co-outline__list {
		gap: 12px;
	}

	.co-outline__label {
		align-self: flex-start;
		width: auto;
	}

	/* 保険: それでも入らない長い1語は途中で折る（現行の computed: overflow-wrap:anywhere） */
	.co-outline__value {
		overflow-wrap: anywhere;
	}

	/*
	 * 設計ツリー #company-2 > <group> @mobile: padding 0（PCの左20px字下げを外す）、
	 * 見出し<group> @mobile: alignItems center、Text @mobile: 24px。
	 * 現行実測 375: 見出し x=140（中央）・ラベル x=20。当初はスマホでも 20px 字下げされ、
	 * 上の concept 本文（x=24）より内側から始まって揃っていなかった。2026-09-14
	 */
	.co-outline__inner {
		padding-left: 0;
	}

	.co-outline__head {
		font-size: 24px;
		text-align: center;
	}

	/* 設計ツリー concept/Text @mobile: 20px。22px だと 375 で「く、」「る。」が1行に落ちていた。 */
	.co-concept__lead,
	.co-concept__head {
		font-size: 20px;
	}

	/*
	 * 見出し（<br> を含まない1文）だけ text-wrap:balance。@mini(320) で
	 * 「当事者だからできるこ／と。」→「当事者だから／できること。」になる。未対応ブラウザは無視するだけ。
	 * リードは <br> 入りなので対象外（balance を効かせると 320 で「配／慮」と語の途中で割れた）。
	 */
	.co-concept__head {
		text-wrap: balance;
	}
}

@media (max-width: 320px) {

	/*
	 * @mini: 縦積みの和文見出し1行目「個人の幸せと企業の価値を、」（20px で 263px）が
	 * 248px 幅（320 − 24×2 − 12×2）に入らず3行になり「企／業」で割れていた。
	 * 18px なら 237px で2行に収まる（他2件は 207 / 218px）。335px 以上では 20px のまま2行。2026-09-14
	 */
	.co-pmv__ja {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.co-pmv__icon {
		transition: none;
	}
}