/**
 * ABOUT（Ver.5、ユーザー指示 2026-09-16、全面書き換え：背景1枚化）。
 *
 * 新しいabout-world.webp（縦長・1024×1536）は「ABOUTメイン→01/02/03→下部キャッチ」までを
 * 1枚で表現する世界観キャンバスとして作成された。そのため前フェーズにあった
 * 「ABOUTメイン＝about-world.webp／01〜03＝about-values-world.webp」という背景の二重構造を
 * 廃止し、.about-world（親セクション）1つだけに背景を設定する。子要素（.about-world__main／
 * __items／__closing）は一切background-imageを持たない。
 *
 * 背景の敷き方：background-size:100% auto／background-position:center top／
 * background-repeat:no-repeat。画像を伸縮させない。コンテナ幅に対して画像の自然な高さ
 * （幅×1.5）を超えてページの内容がさらに長くなった場合は、画像下端付近のトーンに合わせた
 * background-color（薄い青灰色）へ自然に受け渡す（新しい画像・グラデーション幕は使わない。
 * 画像そのものが常に「背後に見えている」状態を保つ）。
 *
 * 01/02/03の可読性は、四角いカードや巨大な白い長方形ではなく、ごく薄いrgba(255,255,255,…)の
 * 縦方向グラデーションのみで確保する（.about-world__items-overlay）。クロージングには
 * 追加の背景処理をしない（画像下部の雲海がそのまま十分に明るいため）。
 *
 * スクロール中に背景がジャンプする／切り替わるように見えるのを避けるため、背景へのJS
 * パララックスは行わない（about.js参照）。タイポグラフィ：メインコピー
 * （.about-world__lead／.about-world__closing-text）は--font-serif、導入・本文・UI・
 * 英字装飾は--font-display/--font-body（ゴシック）。
 */

.about-world {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* background-imageはfront-page.php側でインラインstyleとして設定している
	   （PHPのLIBRE_THEME_URIから組み立てたURLをesc_url()経由で出力するため）。 */
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	/* about-world.webp下端付近（雲海）のトーンに近い色。画像が尽きた場合のフォールバックが
	   不自然な境界線に見えないようにするための色で、新しい画像やグラデーション幕は使わない。 */
	background-color: #a9b7d6;
	color: var(--color-ink);
}

/* ============================== ABOUTメイン（左：世界観／右：テキスト） ==============================
   画像は.about-worldの背景をそのまま透かして見せる（このブロック自体は背景を持たない）。
   PC（1024px以上）では.about-world__heroを右側へ絶対配置し、左側で世界観をはっきり見せる。
   中央寄せには戻さない。 */
.about-world__main {
	position: relative;
	min-height: clamp(560px, 86vh, 900px);
}

/* ユーザー指示（2026-09-17、SERVICE/CONTACT/ABOUT 3カラムで採用した環境光方式のABOUT
   メインコピーへの適用）：diagonal（100deg）のlinear-gradientは、右へ向かって直線的に
   白くなっていく帯自体が「白く見える線」として知覚されていた（矩形パネルと同根の問題）。
   .about-world__hero（実測left56〜88.5%・top17.6〜82.4%）の周辺だけに効く巨大な
   radial-gradientへ置き換え、テキスト左端（＝世界観が見えるエリアとの境目）の直線的な
   境界を消す。about-world.webpを実際にCanvasへ描画しhero全域をグリッド実測した結果
   （中心58%,40%・半径40%,46%・peak alpha .85）、最低コントラスト比5.79・平均9.93を確認
   （元のraw最低値は3.22）。ellipseサイズは明示指定し、上端（前セクションとの継ぎ目）で
   alpha比0.87、他辺は1.05〜1.45を確保しfarthest-corner起因の残留alpha線を防いでいる。 */
.about-world__main-gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 40% 46% at 58% 40%,
		rgba(253,254,255,.85) 0%,
		rgba(253,254,255,.61) 28%,
		rgba(253,254,255,.32) 50%,
		rgba(253,254,255,.12) 68%,
		rgba(253,254,255,0) 86%);
	filter: blur(30px);
}

.about-world__hero {
	position: relative;
	container-type: inline-size;
	z-index: 2;
	padding: clamp(48px, 10vw, 88px) var(--container-pad);
}

/* NEWSフローティングバー通過後に空と雲を見せるため、ABOUT本文ブロックを下げる */
@media (min-width:768px){.about-world__hero{padding-top:clamp(168px,16vw,220px)}}

/* ユーザー指示（2026-09-19、TOPタイポグラフィ統一 TYPE A）：ABOUT/SERVICEを同じタイポ
   グラフィシステムに統一する。ABOUTを基準とし、英字ラベル・日本語見出し・本文それぞれの
   font-size/weight/letter-spacing/colorをtokens.css側の共通値（--libre-label-size等）へ
   揃える（service-draw.cssの.service-draw__eyebrow/__catch/__descriptionと対になる）。 */
/* ユーザー指示（2026-09-19再指示）：ABOUTの英字ラベルはWORKS（works.cssの
   .libre-works__eyebrow）と同じ書体・文字色にする。サイズはこのセクション独自の
   --libre-label-sizeのまま変更しない（WORKSの72pxへは揃えない）。 */
.about-world__eyebrow {
	margin: 0 0 clamp(24px, 2vw, 34px);
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--libre-label-size);
	line-height: 1;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--libre-color-navy);
}

/* メインコピー：明朝（--font-serif）。太字ゴシックから、上品で余白のあるタイポグラフィへ。 */
.about-world__lead {
	margin: 0 0 clamp(20px, 2.6vw, 32px);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: min(var(--libre-heading-size), 9cqi);
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--libre-color-navy);
}

.about-world__intro {
	margin: 0 0 clamp(14px, 1.8vw, 22px);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(19px, 0.4vw + 1.05rem, 24px);
	line-height: 1.9;
	color: #12324c;
}

.about-world__body {
	margin: 0 0 clamp(26px, 3.2vw, 38px);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--libre-body-size);
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: rgba(18, 50, 76, 0.72);
}

/* ボタン：白／半透明背景＋細いネイビーborder＋pill型。過度なカードUIにはしない。 */
.about-world__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: clamp(13px, 1.4vw, 17px) clamp(24px, 2.8vw, 32px);
	border: 1px solid rgba(15, 58, 92, 0.55);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.08em;
	color: #0f3a5c;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.about-world__cta:hover,
.about-world__cta:focus-visible {
	background: #0f3a5c;
	color: #fff;
	border-color: #0f3a5c;
	transform: translateY(-1px);
}

.about-world__cta-arrow {
	transition: transform 0.25s ease;
}

.about-world__cta:hover .about-world__cta-arrow,
.about-world__cta:focus-visible .about-world__cta-arrow {
	transform: translateX(3px);
}

/* ============================== 01 / 02 / 03 ==============================
   ユーザー指示（2026-09-17、SERVICE/CONTACTで採用した環境光方式のABOUTへの適用）：
   3カラム全体を覆っていた横長のlinear-gradient（.about-world__items-overlay、
   中央帯で最大62%まで白くなる矩形）と、各カラム個別のradial-gradient白霧
   （.about-world__item::before、中心82%という強い白）の二層構成を廃止した。
   「3カラムの背景を白くする」のではなく、背景世界の中央付近に巨大な雲・霞・逆光が
   元から存在しているように見せる単一のATMOSPHERIC LIGHTへ置き換える
   （z-index: 0 背景画像 → 1 environment light → 2 鳥等 → 3 TEXT）。 */
.about-world__items {
	position: relative;
	background: transparent;
}

/* ATMOSPHERIC LIGHT：3カラムの箱と同じサイズにしない。items自身の幅・高さに対し
   112%×170%まで大きく広げ、明示的なellipseサイズで四辺すべてが概ねtransparentへ
   減衰するようにする（サイズキーワード省略時のデフォルト`farthest-corner`が残留alphaを
   残すこのセッションで既知のバグを回避）。
   2026-09-19再指示：「02〜03が見にくい」というフィードバックを受け、about-world.webpを
   Canvasへ実際に描画し01/02/03それぞれのtitle/text/numberバッジを実測し直した。
   title/textは02/03とも元々明るく（無加工でコントラスト比11〜13）問題なかったが、
   02バッジ（実測alpha .18〜.38）・03バッジ（実測alpha 0＝光が全く届いていない）は
   旧設定（中心24%,50%・半径45%,60%）だと光の範囲外だった。中心を34%,46%・半径を
   88%,65%へ広げ、02バッジの実測コントラストを4.89→4.97、03バッジを4.76→4.88へ改善した
   （01バッジは元の背景が暗すぎるためteal文字の理論上限に近い3.3〜3.4止まりだが、
   無加工の1.35からは大きく改善している）。 */
.about-world__items-overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 112%;
	height: 170%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 88% 65% at 34% 46%,
		rgba(255,255,250,.88) 0%,
		rgba(255,255,250,.63) 28%,
		rgba(255,255,250,.33) 50%,
		rgba(255,255,250,.12) 68%,
		rgba(255,255,250,0) 88%);
	filter: blur(34px);
}

/* ユーザー指示（2026-09-17）：01〜03のカードをもう少し横に広げて見やすくする。
   サイト共通の--container-max（1280px）は他セクションと共有のため変更せず、ABOUTの
   この行だけ幅を広げ（min(1440px,94vw)）、gapを少し詰めて各itemの実幅を増やす。 */
.about-world__items-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(20px, 3vw, 56px);
	width: 100%;
	max-width: min(1440px, 94vw);
	margin: 0 auto;
	padding: clamp(72px, 11vh, 140px) var(--container-pad) clamp(56px, 9vh, 108px);
	box-sizing: border-box;
}

.about-world__item {
	position: relative;
	z-index: 3;
	flex: 1 1 0;
	min-width: 0;
	text-align: left;
	/* ユーザー指示：01〜03それぞれの文字周囲の余白を増やす。 */
	padding: clamp(30px, 4.2vw, 48px) clamp(22px, 3.2vw, 34px);
	/* ユーザー指示（絶対禁止セクション）：各カラム個別の白背景・radial-gradientは
	   入れない。3つを一つの巨大な環境光（.about-world__items-overlay）で包む。 */
	background: transparent;
}

.about-world__item-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 clamp(12px, 1.8vw, 20px);
}

.about-world__item-number {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(26px, 2.4vw, 36px);
	letter-spacing: -0.01em;
	color: var(--color-accent);
}

.about-world__item-label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(13px, 0.3vw + 0.75rem, 15px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	/* ユーザー指示：CREATIVE/STRATEGY/PARTNERSHIPを現在より少し濃くする。 */
	color: #33475a;
}

/* ユーザー指示（2026-09-17、環境光方式への統一指示）：見出しはABOUTメインコピーと同じ
   明朝系（--font-serif）のまま、文字色をSERVICE/CONTACTと同じ#082d4aへ統一し、
   font-weightは400へ。可読性は白パネルではなく環境光＋ごく弱いtext-shadowで確保する。 */
/* ユーザー指示（2026-09-17）：「成果につながる設計を」（末尾の「。」削除後も10文字）が
   02列で2行に折り返していた。旧clamp(24px,1.4vw+1.1rem,32px)は1029px以上でほぼ32px固定に
   なる一方、3カラム構成のitem実幅は1024〜1920pxの間で大きく変動する（1920px:利用可能幅
   322px／1280px:275px／1024px:207px、実測）ため、広い画面のflat上限のまま幅だけ狭くなる
   1024〜1440px帯で確実にはみ出していた。Canvas measureTextで各幅の「1行に収まる最大
   font-size」を実測し（1920px:32px以上／1440px:31px／1280px:26.5px／1024px:20px）、
   全域で安全マージンを取った線形のclamp(19px, 1.23vw + 6.4px, 30px)へ変更し、
   1024/1280/1440/1920pxいずれも1行に収まることを確認した。 */
.about-world__item-title {
	margin: 0 0 clamp(10px, 1.6vw, 16px);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(19px, 1.23vw + 6.4px, 30px);
	line-height: var(--lh-snug);
	letter-spacing: 0.03em;
	color: #082d4a;
	text-shadow: 0 1px 2px rgba(255,255,255,.22);
	white-space: nowrap;
}

/* ユーザー指示（2026-09-17、環境光方式への統一指示）：本文もSERVICE/CONTACTと同じ
   #082d4a・font-weight 500へ統一し、ごく弱いtext-shadowを補助として使う。 */
.about-world__item-text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(16px, 0.25vw + 0.9rem, 18px);
	line-height: var(--lh-relaxed);
	color: #082d4a;
	text-shadow: 0 1px 1px rgba(255,255,255,.55), 0 0 5px rgba(255,255,255,.15);
}

/* ============================== クロージング ==============================
   画像下部の雲海がそのまま背景になる。追加の背景処理はしない。十分な余白を取る。 */
.about-world__closing {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: clamp(64px, 12vh, 140px) var(--container-pad) clamp(96px, 16vh, 190px);
}

.about-world__closing-text {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(26px, 1.8vw + 1.2rem, 44px);
	line-height: 1.55;
	letter-spacing: 0.04em;
	color: #123a5c;
}

/* ============================== PC：ABOUTメインを2カラムへ ============================== */
@media (min-width: 1024px) {
	.about-world__hero {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 55%;
		width: clamp(340px, 36vw, 600px);
		padding: 0 clamp(20px, 3vw, 40px) 0 0;
		transform: translateY(-50%);
	}
}

@media (min-width: 1440px) {
	.about-world__hero {
		left: 56%;
		width: clamp(400px, 34vw, 620px);
	}
}

@media (max-width: 1023px) {
	.about-world__hero {
		/* inline-size containment requires an explicit width inside the flex parent. */
		width: 100%;
		min-width: 0;
		flex: 0 0 100%;
		box-sizing: border-box;
		padding-top: 160px;
	}
	.about-world__items-inner {
		gap: clamp(24px, 3.6vw, 40px);
	}

	/* モバイルではPCの2カラム構図を縮小せず、画像の上に直接テキストを重ねた縦積みになる。
	   旧・垂直linear-gradientは38%付近から白くなり始める帯が「線」として見えていたため
	   （PC側の100deg版と同根の問題）、同じradial-gradient環境光方式へ統一する。
	   about-world.webpを実際にCanvasへ描画しeyebrow/lead/intro/bodyの各要素を実測した結果
	   （中心30%,38%・半径55%,58%・peak alpha .75）、最低コントラスト比7.99（旧linear-gradient
	   では4.56）を確認した。 */
	.about-world__main-gradient {
		background: radial-gradient(ellipse 55% 58% at 30% 38%,
			rgba(253,254,255,.75) 0%,
			rgba(253,254,255,.54) 28%,
			rgba(253,254,255,.29) 50%,
			rgba(253,254,255,.11) 68%,
			rgba(253,254,255,0) 86%);
		filter: blur(26px);
	}

	.about-world__main {
		display: flex;
		align-items: flex-end;
	}
}

@media (max-width: 767px) {
	.about-world {
		background-size: auto max(720px, 180vw);
	}

	.about-world__cta {
		display: flex;
		justify-content: space-between;
		width: min(100%, 320px);
		margin-inline: auto;
		box-sizing: border-box;
	}

	/* ユーザー指示（2026-09-19、TOPタイポグラフィ統一）：var(--libre-heading-size)（下限42px）を
	   共通トークン化した際、ABOUT側は1024px未満で.about-world__heroが絶対配置を外れ
	   section全padding幅いっぱいまで縮む（SERVICEの.service-draw__intro程幅の余裕がない）ため、
	   320〜767px帯で「まだない景色をつくる。」がコンテナ幅を超え3行目へ折り返ってしまうことを
	   Canvas measureTextで実測確認した。ABOUT専用の安全なclamp（320〜767px全域でoverflowCount:0
	   を確認済み）へこのブレイクポイントでのみ上書きする。 */
	.about-world__lead {
		font-size: min(clamp(22px, 6.5vw, 44px), 9cqi);
	}

	.about-world__items-inner {
		flex-direction: column;
		gap: clamp(36px, 9vw, 52px);
		padding-top: clamp(56px, 12vw, 84px);
	}

	.about-world__item {
		text-align: center;
	}

	.about-world__item-head {
		justify-content: center;
	}

	/* ユーザー指示（セクション10）：Mobileは3カラムが縦積みになり全体が縦長になるため、
	   環境光も縦長（幅を広げ、高さは積み上がった全カード分をカバーする程度に短縮）へ
	   切り替える。中心位置もテキスト群（縦方向の中央）に合わせて再調整する。
	   2026-09-19再指示：Mobileでは about-world.webp が積み上げ後のセクション高さより先に
	   尽きてしまい、01〜03はいずれもフォールバック背景色（#a9b7d6）の上に乗っている
	   （実測確認済み）。旧設定（130%×112%、中心50%,50%、peak .58）だと中央の02列だけに
	   光が寄り、01・03（特にバッジ）が実測コントラスト比2.5〜3.5まで下がっていた。
	   ボックスを150%×150%・楕円半径85%,95%・peak .90へ広げ、3項目とも均等にカバーする
	   よう改善した（title実測11.7〜13.2、number実測4.0〜4.5）。 */
	.about-world__items-overlay {
		width: 150%;
		height: 150%;
		background: radial-gradient(ellipse 85% 95% at 50% 50%,
			rgba(255,255,250,.90) 0%,
			rgba(255,255,250,.65) 28%,
			rgba(255,255,250,.34) 50%,
			rgba(255,255,250,.13) 68%,
			rgba(255,255,250,0) 88%);
	}
}