/*
Theme Name: Fabo 2026
Version: 1.0.0
Text Domain: fabo-2026
*/

/* =====================================================================
   目次
   01. 変数
   02. ベース（リセット・リンク・共通ユーティリティ）
   03. 背景（オーロラ・ネットワーク）
   04. ヘッダー・メニュー
   05. フッター
   06. 共通レイアウト（セクション・固定ページ本文）
   07. 共通アニメーション（スクロールで出現）
   08. トップ：オープニング
   09. トップ：ヒーロー
   10. トップ：キャッチコピー
   11. トップ：セクション見出し
   12. トップ：お知らせ（NEWS）
   13. トップ：事業内容（カード一覧）
   14. トップ：ビジョン
   15. トップ：プロジェクト
   16. トップ：詳細ボックス（事業内容・プロジェクト共通）
   17. トップ：パートナー企業
   18. トップ：ショートフィルム（現在非表示）
   19. お問い合わせ（トップ・会社概要・キャンペーン共通）
   20. 会社概要ページ
   21. お知らせ一覧ページ・カテゴリタグ
   22. 投稿ページ
   23. プライバシーポリシーページ
   24. スクロール連動の配色（ビジョン・会社概要ヒーロー・ヘッダー）
   ===================================================================== */

/* 使用フォント：Noto Sans JP（本文）／Noto Serif JP（明朝の演出テキスト）／Outfit（ヒーロー）／Poppins（オープニング・会社概要ヒーロー） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400&family=Outfit:wght@300;400;500&family=Poppins:wght@300;400;500;600;700&display=swap");


/* =====================================================================
   01. 変数
   ===================================================================== */
:root {
	color-scheme: light;
	--color-blue: #00A0C8;
	--color-blue-deep: #007896;
	--color-blue-bright: #4DC3E0;
	--color-blue-pale: #BFE9F4;
	--color-dark: #0A2533;
	--color-footer: #061821;
	--color-text: #0A2533;
	--color-text-muted: #C9D6DC;
	--page-gutter: max(5vw, 40px);
	--header-height: 72px;
	--content-max: 1440px;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--transition-fast: .25s var(--ease-out);
	--transition-color: .7s var(--ease-out);
}

@media (max-width: 767px) {
	:root {
		--page-gutter: 20px;
		--header-height: 60px;
		--sp-panel-h: min(680px, calc(100svh - var(--header-height) - 40px)); /* スマホ：プロジェクトと詳細ボックスで共通の高さ */
	}
}


/* =====================================================================
   02. ベース
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--admin-bar-h, 0px)); /* セクションに移動したとき、固定ヘッダーに隠れないようにする */
	scrollbar-gutter: stable; /* 詳細ボックスを開いてスクロールバーが消えても、ページの幅が変わらないようにする */
}
html.skip-opening { scroll-behavior: auto; } /* 「#」付きのリンクで他のページから来たときは、滑らせずにその場所を表示 */
html:has(.detail-modal:not([hidden])) { overflow: hidden; } /* 詳細ボックスを開いている間は、後ろのページをスクロールさせない */

body {
	margin: 0;
	padding-top: var(--header-height);
	background-color: #F4F8FA;
	background-image:
		radial-gradient(at 0% 0%, rgba(77, 195, 224, 0.25) 0px, transparent 50%),
		radial-gradient(at 100% 0%, rgba(191, 233, 244, 0.4) 0px, transparent 50%),
		radial-gradient(at 20% 50%, rgba(0, 160, 200, 0.15) 0px, transparent 40%),
		radial-gradient(at 80% 80%, rgba(220, 240, 255, 0.5) 0px, transparent 50%);
	background-attachment: fixed;
	color: var(--color-text);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

body, button, a { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
a { color: var(--color-blue-deep); text-decoration-thickness: .07em; text-underline-offset: .2em; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--color-blue-bright); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 16px; transform: translateY(-150%); background: #fff; color: var(--color-dark); }
.skip-link:focus { transform: translateY(0); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.nowrap { white-space: nowrap; }

@media (max-width: 767px) {
	body { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}


/* =====================================================================
   03. 背景
   ===================================================================== */
/* オーロラ（まだら模様）の2層 */
html::before, html::after { content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none; }
html::before {
	background:
		radial-gradient(40% 36% at 20% 28%, rgba(110, 212, 240, .55), transparent 70%),
		radial-gradient(34% 40% at 78% 22%, rgba(255, 255, 255, .95), transparent 70%),
		radial-gradient(40% 40% at 66% 76%, rgba(198, 178, 255, .45), transparent 70%);
}
html::after {
	background:
		radial-gradient(36% 38% at 82% 62%, rgba(150, 225, 245, .45), transparent 70%),
		radial-gradient(34% 34% at 16% 80%, rgba(255, 255, 255, .9), transparent 70%),
		radial-gradient(30% 34% at 45% 12%, rgba(214, 196, 255, .4), transparent 70%);
}

/* 有機的ネットワーク（JSが canvas を追加） */
.site-network { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.site-main, .site-footer { position: relative; z-index: 1; }
.site-main { min-height: 52vh; }


/* =====================================================================
   04. ヘッダー・メニュー
   ===================================================================== */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-height);
	padding: 0 var(--page-gutter);
	background: rgba(255, 255, 255, .5);
	color: var(--color-dark);
	transition: background-color .4s var(--ease-out), color .4s var(--ease-out), opacity .4s var(--ease-out), visibility .4s var(--ease-out);
}
.site-header.is-dark { background: rgba(10, 37, 51, .5); color: #fff; }
/* オープニング中は隠す */
body.is-opening .site-header { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-opening.is-opening-complete .site-header { opacity: 1; visibility: visible; pointer-events: auto; }

.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.site-brand img { display: block; width: auto; height: 32px; }

/* PCのナビゲーション */
.desktop-nav { display: flex; align-items: center; gap: 12px; }
.pill-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 9px 26px;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.pill-button--primary { background: var(--color-dark); color: #FFFFFF; } /* 濃いボタン（キャンペーンの投稿本文などで使用） */
.pill-button--light { background: #E6F0F5; color: var(--color-dark); } /* 薄いボタン（ヘッダー） */
.pill-button--primary:hover, .pill-button--light:hover { background: var(--color-blue); color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 160, 200, .38); } /* マウスを乗せると、水色に変わって浮き上がる */
.pill-button:active { transform: translateY(0) scale(.95); box-shadow: none; transition-duration: .08s; } /* クリックで押している間：少し縮んで沈む（押した瞬間に反応するよう、この動きだけ速く） */
.pill-button:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-blue-bright); } /* キーボード操作時だけ見えるフォーカス表示 */
/* ヘッダーが濃い背景に切り替わった時は配色を反転 */
.site-header.is-dark .pill-button--light { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.site-header.is-dark .pill-button--light:hover { background: var(--color-blue-bright); color: var(--color-dark); box-shadow: 0 12px 28px rgba(77, 195, 224, .4); }

/* スマホのメニュー（PCでは非表示） */
.menu-toggle {
	display: none;
	transition: transform .25s var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.menu-toggle:active { transform: scale(.88); transition-duration: .08s; } /* タップで押している間：少し縮む */
.mobile-menu { display: none; }

.lite .site-header, .lite .pill-button, .lite .menu-toggle__line, .lite .mobile-menu, .lite .footer-nav a { transition-duration: .2s; }

@media (min-width: 768px) {
	.site-header { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
}

@media (max-width: 767px) {
	.site-brand img { height: 28px; }
	.desktop-nav { display: none; }

	.menu-toggle {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--color-dark);
		color: #fff;
		cursor: pointer;
	}
	.menu-toggle__line { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition-fast); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { transform: translateY(4px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { transform: translateY(-4px) rotate(-45deg); }

	.mobile-menu {
		position: fixed;
		inset: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 88px 28px 40px;
		background: var(--color-dark);
		color: #fff;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-fast), visibility var(--transition-fast);
	}
	.mobile-menu.is-open { opacity: 1; visibility: visible; }
	.mobile-menu ul { width: min(100%, 480px); margin: 0; padding: 0; list-style: none; }
	.mobile-menu li { border-bottom: 1px solid rgba(255, 255, 255, .18); }
	.mobile-menu a { display: flex; align-items: center; min-height: 64px; color: #fff; font-size: 20px; font-weight: 500; text-decoration: none; }

	/* JSが動かない環境：メニューをヘッダーの下に常に表示 */
	.no-js .site-header { flex-wrap: wrap; height: auto; padding-block: 8px; }
	.no-js .menu-toggle { display: none; }
	.no-js .mobile-menu { position: static; z-index: auto; flex: 1 0 100%; display: block; padding: 8px 0 4px; background: var(--color-dark); opacity: 1; visibility: visible; }
	.no-js .mobile-menu ul { width: 100%; }
	.no-js .mobile-menu a { padding-inline: 4px; }
}


/* =====================================================================
   05. フッター
   ===================================================================== */
.site-footer { background: var(--color-footer); color: #fff; }
.site-footer__inner { display: grid; grid-template-columns: minmax(220px, 1fr) 1.3fr; gap: 48px 80px; width: min(100%, var(--content-max)); margin-inline: auto; padding: 72px var(--page-gutter) 24px; }
.site-footer__contact { align-self: start; }
.site-footer address { margin-top: 0; color: var(--color-text-muted); font-size: 16px; font-style: normal; line-height: 1.8; }
.site-footer address .footer-company-name { display: block; margin-bottom: 4px; }
.site-footer address .footer-address-text { display: block; }

.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; justify-self: end; width: min(100%, 520px); }
.footer-nav__column { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; text-align: right; }
.footer-nav a, .site-footer__bottom a { color: #fff; text-decoration: none; transition: color var(--transition-fast); }
.footer-nav a:hover, .site-footer__bottom a:hover { color: var(--color-blue-bright); }

.site-footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); color: var(--color-text-muted); font-size: 12px; }
.site-footer__bottom p { margin: 0; }

@media (max-width: 767px) {
	.site-footer__inner { grid-template-columns: 1fr; gap: 36px; padding: 52px 20px 20px; }
	/* 2つの列を解体して、2列のグリッドに並べ直す */
	.footer-nav { gap: 0 16px; justify-self: stretch; width: 100%; }
	.footer-nav__column { display: contents; }
	.footer-nav__column li { padding: 8px 0; text-align: left; }
	.footer-nav__column:nth-child(2) li:nth-child(1) { order: 1; } /* 会社概要 */
	.footer-nav__column:nth-child(1) li:nth-child(1) { order: 2; } /* 事業内容 */
	.footer-nav__column:nth-child(2) li:nth-child(2) { order: 3; } /* お知らせ */
	.footer-nav__column:nth-child(1) li:nth-child(2) { order: 4; } /* プロジェクト */
	.footer-nav__column:nth-child(2) li:nth-child(3) { order: 5; } /* お問い合わせ */
	.site-footer__bottom { grid-column: auto; align-items: flex-start; flex-direction: column; gap: 8px; }
}


/* =====================================================================
   06. 共通レイアウト
   ===================================================================== */
.site-section { width: 100%; padding: clamp(120px, 10vw, 160px) var(--page-gutter); }
.site-section__inner { width: min(100%, var(--content-max)); margin-inline: auto; }
.section-label { margin: 0 0 16px; font-size: 12px; letter-spacing: .12em; }

/* 固定ページ・投稿・404 の本文 */
.content-page { position: relative; z-index: 1; width: min(100%, var(--content-max)); margin-inline: auto; padding: 80px var(--page-gutter) 128px; }
.content-page__header { margin-bottom: 40px; }
.content-page__title { margin: 0; font-size: clamp(40px, 7vw, 112px); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; }
.entry-content { font-size: 16px; line-height: 1.9; }
.entry-content > * { max-width: 100%; }
.entry-content h2, .entry-content h3 { line-height: 1.25; letter-spacing: -.035em; }
.entry-content h2 { margin-block: 2.5em 1em; font-size: clamp(32px, 5vw, 64px); }
.entry-content h3 { margin-block: 2em .8em; font-size: clamp(24px, 3.5vw, 40px); }
.entry-content img { height: auto; }

@media (max-width: 767px) {
	.site-section { padding-block: clamp(72px, 20vw, 96px); }
	.section-label { margin-bottom: 10px; }
	.content-page { padding: 64px 20px 88px; }
	.content-page__title { font-size: clamp(36px, 10vw, 44px); }
	.entry-content { font-size: 15px; }
	.entry-content h2 { font-size: clamp(30px, 8vw, 42px); }
}


/* =====================================================================
   07. 共通アニメーション
   ===================================================================== */
/* data-entrance：スクロールで画面に入るとフェードイン（JSが is-visible を付ける） */
.js [data-entrance] { opacity: 0; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-entrance].is-visible { opacity: 1; transform: translateX(0); }
.lite [data-entrance] { opacity: 1; transform: none; transition-duration: .2s; }

/* js-char-fade：見出しを1文字ずつ、ぼやけた状態からくっきりフェードイン（全体で約0.9秒＝1文字0.4秒＋時間差0.5秒） */
h2.js-char-fade { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; } /* 親要素のアニメーションの干渉をリセット */
.js-char-fade .char-fade-item { display: inline-block; opacity: 0; transform: translate(-6px, -6px); filter: blur(8px); will-change: opacity, transform, filter; }
.js-char-fade.is-visible .char-fade-item {
	animation: char-fade-in-blur .4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
	animation-delay: calc(var(--char-index) * (0.5s / var(--total-chars))) !important;
}
.lite .js-char-fade .char-fade-item { opacity: 1; transform: none; filter: none; animation: none !important; }
@keyframes char-fade-in-blur {
	0%   { opacity: 0; transform: translate(-6px, -6px); filter: blur(8px); }
	100% { opacity: 1; transform: translate(0, 0); filter: blur(0); }
}

/* 共通のキーフレーム（初期状態は各要素で指定） */
@keyframes blur-fade-in { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } } /* ぼやけた状態からくっきり：トップのヒーロー・キャッチコピー */
@keyframes char-rise-in { to { opacity: 1; filter: blur(0); transform: translateY(0); } }               /* 少し下からくっきり上がる：会社概要「about Fabo」・トップのキャッチコピー */

/* js-blur-fade-fast：ぼやけながら素早くフェードイン（0.7秒） */
.js-blur-fade-fast { opacity: 0; filter: blur(12px); transform: translateY(12px); }
.js-blur-fade-fast.is-visible { animation: partner-blur-fade-fast 0.7s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes partner-blur-fade-fast {
	0%   { opacity: 0; filter: blur(12px); transform: translateY(12px); }
	100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}


/* =====================================================================
   08. トップ：オープニング
   ===================================================================== */
.home-main { overflow: clip; }
.fabo-opening {
	position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; width: 100%; height: 100vh; height: 100svh; padding: 0;
	border: 0; background: var(--color-dark); color: #fff; cursor: pointer; overflow: hidden;
}
.no-js .fabo-opening, .skip-opening .fabo-opening { display: none; } /* 「#」付きのリンクで来たときも省く */

/* 文字：ヒーローのタイトルと同じ大きさ（正確な値はJSが上書き）。色はヒーローの「Fab」「O」と同じ */
.fabo-opening__letters {
	position: absolute; inset: 0; pointer-events: none;
	color: var(--color-blue);
	font-family: "Poppins", sans-serif;
	font-size: clamp(40px, 7vw, 100px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1;
}
/* 各文字は左上に置き、JSが計算した移動量（--sx/--sy＝中央に重ねる位置、--tx/--ty＝ヒーロー内の位置）で動かす */
.fabo-opening__letters span { position: absolute; top: 0; left: 0; display: block; white-space: nowrap; opacity: 0; }

/* 0-1.2秒：中央で重なりながら1文字ずつフェードイン ／ 1.3-1.8秒：ヒーローの文字の位置へ展開 ／ 終了時：本物の文字に引き継ぐ（下記） */
.fabo-opening.is-playing .fabo-opening__letters span {
	animation:
		fabo-letter-in .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .18s) both,
		fabo-letter-expand .5s cubic-bezier(.65, 0, .35, 1) 1.3s both;
}
/* 1.9-2.9秒：黒い幕が薄くなり、裏の画面がぼやけた状態からはっきりしていく */
.fabo-opening.is-playing { animation: fabo-reveal 1s ease-in-out 1.9s forwards; }
.fabo-opening.is-skipping { animation: fabo-overlay-skip .25s ease forwards; pointer-events: none; } /* クリックでスキップ */
.fabo-opening.is-done { display: none; }

@keyframes fabo-letter-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes fabo-letter-expand { from { translate: var(--sx, 0px) var(--sy, 0px); } to { translate: var(--tx, 0px) var(--ty, 0px); } }
@keyframes fabo-reveal {
	from { background-color: rgba(10, 37, 51, 1); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
	to   { background-color: rgba(10, 37, 51, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
}
@keyframes fabo-overlay-skip { to { opacity: 0; } }
/* スマホ：最後の「幕が薄くなる」演出を軽くする。画面全体のぼかし（backdrop-filter）は使わず、紺色の幕（::before）の透明度だけを下げる
   （透明度の変化はブラウザが描画の処理とは別に動かせるので、ほかの処理が重いときでも止まらずなめらかに進む。文字は幕の上にあるので、薄くならない） */
@media (max-width: 767px) {
	.fabo-opening { background: transparent; }
	.fabo-opening::before { position: absolute; inset: 0; content: ""; background: var(--color-dark); }
	.fabo-opening.is-playing:not(.is-skipping) { animation: none; } /* スキップしたときは、通常どおり全体をフェードアウト */
	.fabo-opening.is-playing::before { animation: fabo-reveal-sp 1s ease-in-out 1.9s forwards; will-change: opacity; }
}
@keyframes fabo-reveal-sp { to { opacity: 0; } }

/* オープニング中は、ヒーローの本物の「Fab」「O」を隠しておく。オープニングが終わった瞬間（JSが is-done を付ける）に、
   オープニングの文字と入れ替わりで表示する（同じ位置なので、文字が消えたり2重になったりしない）。スキップした時はすぐ表示 */
.fabo-opening.is-playing:not(.is-done):not(.is-skipping) ~ .home-hero .hero-highlight { opacity: 0; }


/* =====================================================================
   09. トップ：ヒーロー
   中央寄せ。「Fab」「O」以外は、オープニング終了後に同時にフェードイン
   ===================================================================== */
/* ログイン中（WordPressの管理バーあり）は、管理バーの高さぶん画面の中央がずれるので補正する */
.admin-bar .home-hero { --admin-offset: 32px; }
@media (max-width: 782px) { .admin-bar .home-hero { --admin-offset: 46px; } }

.home-hero__inner { position: relative; width: 100%; text-align: center; }
.home-hero__title {
	max-width: none;
	margin: 0 auto;
	font-family: "Outfit", sans-serif;
	font-size: clamp(40px, 7vw, 100px);
	font-weight: 400;
	letter-spacing: -.01em; /* 字間（PC・スマホ共通。オープニングの「FabO」もJSがこの値に合わせる） */
	line-height: 1.1;
}
.home-hero__title .hero-highlight { color: var(--color-blue); } /* 「Fab」と「O」を強調 */
.home-hero__title .hero-fade { display: inline-block; }
.skip-opening .home-hero__title { visibility: hidden; } /* 「#」付きのリンクで来たとき：目的の場所へ移動する前の一瞬、ページ上部の「Fab」「O」が見えないようにする（JSが2.5秒後に skip-opening を外すと表示） */
.hero-word { display: inline-block; white-space: nowrap; }

/* 0.6秒：ぼやけながらだんだんはっきり */
.hero-fade { opacity: 0; }
.no-js .hero-fade { opacity: 1; }
body.is-opening-complete .hero-fade { animation: blur-fade-in .6s ease-out both; }

/* PC：ヒーローを画面の最上部（ヘッダーの裏）から画面の高さぶん取り、3段（上の余白／タイトル／下の余白）で
   上下の余白を同じ高さにする → タイトルの中心＝画面の中心（オープニングの「FabO」と同じ位置） */
@media (min-width: 768px) {
	.home-hero { display: block; min-height: 100svh; margin-top: calc(-1 * (var(--header-height) + var(--admin-offset, 0px))); padding-block: 0; }
	.home-hero__inner { display: grid; grid-template-rows: minmax(var(--header-height), 1fr) auto minmax(0, 1fr); min-height: 100svh; }
	.home-hero__title { grid-row: 2; position: relative; top: calc(var(--header-height) / 2 + 3svh); } /* ヘッダーの下に見えている範囲の中央より、少しだけ下に置く（オープニングの「FabO」もこの高さに出る） */
}

@media (max-width: 767px) {
	.home-hero { --hero-h: min(740px, calc(92svh - var(--header-height))); display: flex; align-items: center; min-height: var(--hero-h); padding-block: 96px; }
	/* 「Fab」「O」の行の高さを、オープニングの「FabO」と同じ画面の上下中央にそろえる
	   （ヒーローの中央 → 画面の中央へずらし、さらにタイトル2行のうち2行目が中央に来るよう、半行ぶん上げる） */
	.home-hero__title { position: relative; top: calc(50svh - var(--admin-offset, 0px) - var(--header-height) - var(--hero-h) / 2 - .6em + var(--header-height) / 2 + 1.5svh); font-size: clamp(40px, 12vw, 60px); letter-spacing: .015em; line-height: 1.2; }
	.home-hero__title > .hero-fade { display: block; }
}


/* =====================================================================
   10. トップ：キャッチコピー（#intro）
   左上＝メインコピー＋サブコピー／右下＝本文（会社概要ページのヒーローの切り替わり後の配置がベース）
   画面に入ると（JSが is-visible を付ける）① メインコピー → ② サブコピー → ③ 本文 の順に現れる
   ===================================================================== */
.home-intro {
	--intro-sub-delay: 1.3s;     /* ② サブコピーが現れ始めるまでの時間 */
	--intro-body-delay: 1.8s;    /* ③ 本文が現れ始めるまでの時間 */
	--intro-body-spread: .6s;    /* ③ 本文の文字ごとの出現タイミングのばらつき（まだらの度合い） */
	--intro-body-duration: .8s;  /* ③ 本文の1文字が現れるのにかかる時間 */
	margin-top: -25svh;          /* ヒーローの下側の余白に重ねて、上に詰める（ヒーローのタイトルが画面から消える頃に、メインコピーが画面の上の方に来る） */
}
.home-intro__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: 5vw; min-height: clamp(240px, 22vw, 320px); } /* 左：右＝4：3。高さを確保して、コピーを左上・本文を右下に置く */
.home-intro__statement { align-self: start; margin: 0; font-size: clamp(32px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
.home-intro__main, .home-intro__sub { display: block; white-space: nowrap; }
.home-intro__sub { margin-top: .5em; font-size: clamp(18px, 2.9vw, 41px); } /* メインコピーとの間隔は margin-top で調整 */
.home-intro__body { align-self: end; max-width: 34em; margin: 0; font-size: clamp(15px, 1.35vw, 18px); line-height: 2; }
.home-intro__line { display: block; } /* 本文は「。」ごとに改行 */

/* 出現前の状態（JSが動く環境のみ） */
.js .home-intro__main > span { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(20px); }
.js .home-intro__sub, .js .home-intro__line > span { opacity: 0; }
/* ① メインコピー：1文字ずつ、左から順にぼやけた状態から現れる（会社概要の「about Fabo」と同じ速さ） */
.home-intro.is-visible .home-intro__main > span { animation: char-rise-in 1.2s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i) * .15s) forwards; }
/* ② サブコピー：全体がぼやけた状態から現れる（ヒーローのタイトルと同じ速さ） */
.home-intro.is-visible .home-intro__sub { animation: blur-fade-in .6s ease-out var(--intro-sub-delay) both; }
/* ③ 本文：文字ごとにランダムなタイミングで、ぼやけた状態から現れる（②より少しゆっくり） */
.home-intro.is-visible .home-intro__line > span { animation: blur-fade-in var(--intro-body-duration) ease-out calc(var(--intro-body-delay) + var(--r) * var(--intro-body-spread)) both; }
/* 動きを減らす設定の利用者には、アニメーションなしで表示 */
.lite .home-intro .home-intro__main > span, .lite .home-intro .home-intro__sub, .lite .home-intro .home-intro__line > span { opacity: 1; filter: none; transform: none; animation: none; }

@media (max-width: 767px) {
	.home-intro { padding-top: 240px; padding-bottom: 40px; } /* 下の余白：お知らせとの間（ほかのセクションは72〜96px） */ /* スマホ：ヒーローとの間（数値を大きくすると、キャッチコピー以下がまとめて下がる） */
	.home-intro { --intro-sub-delay: .5s; --intro-body-delay: .7s; --intro-body-spread: .3s; --intro-body-duration: .4s; } /* スマホ：サブコピー・本文を早めに、短い時間で表示（PCは上の値）。全部出そろうまで約1.5秒 */
	.home-intro.is-visible .home-intro__main > span { animation-duration: .8s; animation-delay: calc(.1s + var(--i) * .07s); } /* スマホ：メインコピーも速く（1文字ずつ0.07秒間隔・0.8秒） */
	.home-intro.is-visible .home-intro__sub { animation-duration: .4s; }
	.home-intro__inner { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
	.home-intro__statement { font-size: clamp(28px, calc((100vw - 40px) / 10.4), 56px); } /* メインコピー（10文字）が1行に収まる大きさ */
	.home-intro__sub { font-size: calc((100vw - 40px) / 17); }
	.home-intro__body { max-width: 100%; font-size: 14px; line-height: 1.9; }
}


/* =====================================================================
   11. トップ：セクション見出し（事業内容・プロジェクト・会社概要で共通）
   ===================================================================== */
.home-section-heading { margin-bottom: 44px; }
.home-section-heading .section-label { margin-bottom: 18px; color: var(--color-blue-deep); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.home-section-heading h2 {
	margin: 0;
	font-size: clamp(28px, 5.2vw, 78px);
	font-weight: 500;
	font-feature-settings: "palt" 1;
	letter-spacing: -.02em;
	line-height: 1.38;
}
.home-section-heading__lead { max-width: 46em; margin: 28px 0 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 2; }

@media (max-width: 767px) {
	.home-section-heading .section-label { margin-bottom: 10px; }
	.home-section-heading h2 { font-size: clamp(32px, 9.2vw, 42px); line-height: 1.6; }
	.home-section-heading__lead { margin-top: 20px; font-size: 14px; }
}


/* =====================================================================
   12. トップ：お知らせ（NEWS）
   件数ごとに段組みが変わる（template-parts/news-section.php）
   ===================================================================== */
.home-news { padding-block: clamp(32px, 4vw, 56px); }
.news-row { display: grid; align-items: stretch; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(16px, 2vw, 24px); }
.news-row:last-child { margin-bottom: 0; }
.news-row--title-wide { grid-template-columns: 9fr 16fr; }
.news-row--title-split { grid-template-columns: 9fr 8fr 8fr; }
.news-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.news-title { align-self: start; }
.news-title h2 { margin: 0; font-size: clamp(40px, 5.6vw, 80px); /* PC（スマホは下の @media で別に指定） */ font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
@media (min-width: 768px) { .news-title__line { display: block; } } /* PC：「Pick Up」と「情報」で改行（スマホは1行） */

/* ボックス（すりガラス） */
.news-box {
	overflow: hidden; border-radius: 20px; color: var(--color-dark);
	background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 8px 32px rgba(10, 37, 51, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.news-box:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10, 37, 51, .14), inset 0 1px 0 rgba(255, 255, 255, .9); }
.news-box__link { display: grid; width: 100%; height: 100%; color: inherit; text-decoration: none; }

/* 中の並び：h＝左画像4：右テキスト3／v55＝上画像5：下テキスト5／v43＝上画像4：下テキスト3 */
.news-box--h { height: 320px; }
.news-box--h .news-box__link { grid-template-columns: 4fr 3fr; }
.news-box--v55 { height: 420px; }
.news-box--v55 .news-box__link { grid-template-rows: 1fr 1fr; }
.news-box--v43 { height: 420px; }
.news-box--v43 .news-box__link { grid-template-rows: 4fr 3fr; }

.news-box__image { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(135deg, var(--color-blue-pale), #e6e0ff); }
.news-box__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.news-box:hover .news-box__image img { transform: scale(1.04); }

/* テキスト：カテゴリのタグ → タイトル → （横長のみ抜粋）→ 日付（下） */
.news-box__text { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; padding: clamp(16px, 1.8vw, 24px); }
.news-box__tag { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.news-box__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
.news-box__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.7; }
.news-box__date { margin-top: auto; color: #526975; font-size: 13px; letter-spacing: .06em; }

/* スクロールで現れる */
.js .news-box { opacity: 0; transform: translateY(24px); }
.js .news-box.is-visible { opacity: 1; transform: translateY(0); }
.js .news-box.is-visible:hover { transform: translateY(-4px); }

/* introの本文が表示し終わるまで隠しておき、タイトル → 中身の順に表示する
   （JSが is-sequenced を付け、表示してよくなったら is-visible を付ける） */
.home-news { --news-box-delay: .15s; } /* タイトルから中身が現れるまでの時差（PCは横並びなので短め。スマホは下の @media で指定） */
.home-news.is-sequenced:not(.is-visible) .news-title,
.home-news.is-sequenced:not(.is-visible) .news-box { opacity: 0; }
.home-news.is-sequenced.is-visible .news-title { animation: blur-fade-in .6s ease-out both; }
.home-news.is-sequenced.is-visible .news-box.is-visible { animation: news-box-in .7s var(--ease-out) var(--news-box-delay) backwards; }
@keyframes news-box-in { from { opacity: 0; transform: translateY(24px); } }

/* スマホ：1列の縦並び（ボックスは上が画像・下がテキスト） */
@media (max-width: 767px) {
	.home-news { --news-box-delay: .2s; padding-block: 40px; } /* スマホは縦並びなので、タイトルのあと少し間をあける */
	.news-row, .news-row--title-wide, .news-row--title-split, .news-row--2, .news-row--3 { grid-template-columns: 1fr; }
	.news-title h2 { margin-bottom: 18px; font-size: clamp(32px, 8vw, 46px); }
	.news-box, .news-box--h, .news-box--v55, .news-box--v43 { height: auto; }
	.news-box .news-box__link { display: flex; flex-direction: column; }
	.news-box__image { flex: none; aspect-ratio: 16 / 9; }
	.news-box__text { min-height: 120px; }
}


/* =====================================================================
   13. トップ：事業内容（#business）
   2列のカード一覧 →「詳細を見る」で詳細ボックス（16.）
   ===================================================================== */
.home-cases { padding-top: clamp(36px, 4.6vw, 56px); padding-bottom: clamp(40px, 4vw, 64px); }
@media (min-width: 768px) { #business.home-cases { padding-top: clamp(120px, 10vw, 160px); } }
/* お知らせが0件のとき（キャッチコピーのすぐ下に事業内容が来るとき）は、間を少し詰める */
#intro + #business.home-cases { padding-top: clamp(40px, 4vw, 64px); }
@media (max-width: 767px) { #intro + #business.home-cases { padding-top: 12px; } }
/* プロジェクト：中にパートナー企業（17.）を含むので、下の余白は通常のセクションと同じ */
#projects.home-cases { padding-bottom: clamp(120px, 10vw, 160px); }
@media (max-width: 767px) { #projects.home-cases { padding-bottom: clamp(72px, 20vw, 96px); } }

.business-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 16px; } /* 縦・横のボックス間は同じ24px（上下の16pxは、一覧の外側の余白） */
.business-item { position: relative; display: flex; flex-direction: column; height: 100%; scroll-margin-top: calc(var(--header-height) + 16px); }

/* カード：背景画像＋透過の黒＋白文字。分類（1段目）→ 見出し（2段目）→ 詳細ボタン（3段目） */
.business-item__card {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: 1fr; align-content: center; align-items: center; gap: 10px 20px;
	min-height: 330px; padding: 28px clamp(20px, 4vw, 60px);
}
.business-item__card::before, .business-item__card::after {
	position: absolute; z-index: -1; inset: 0; border-radius: 20px; content: "";
	transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.business-item__card::before { background: var(--card-image) center / cover; filter: brightness(1.02) contrast(.98); }
.business-item__card::after { background: rgba(0, 0, 0, .5); pointer-events: none; } /* 透過の黒（濃さはここで調整） */
.business-item:hover .business-item__card::before { opacity: .86; }
.business-item:hover .business-item__card::before, .business-item:hover .business-item__card::after { transform: scale(1.03); }

/* 英字の分類（事業内容カード・プロジェクト・詳細ボックスで共通の文字設定） */
.business-item__category, .works-text__category, .detail-modal__category { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.business-item__category { position: relative; z-index: 1; grid-column: 1; grid-row: 1; margin: 0; color: rgba(255, 255, 255, .85); }

.business-item__title {
	grid-column: 1; grid-row: 2; width: 100%; margin: 0;
	color: #fff; font-size: clamp(24px, 3.4vw, 48px); font-weight: 500; letter-spacing: .04em; line-height: 1.25; text-align: left;
}
.business-item__open {
	grid-column: 1; grid-row: 3; justify-self: start;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; margin-top: 12px; padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
	background-color: rgba(255, 255, 255, .12); color: #fff; font-size: 14px; cursor: pointer;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.business-item__open:hover { border-color: #fff; background-color: #fff; color: var(--color-dark); }

@media (max-width: 767px) {
	.home-cases { padding-top: 40px; }
	.business-list { grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); margin-block: 0; }
	.business-item__card { gap: 10px 14px; min-height: 156px; padding: 20px 16px; }
	.business-item__card::before, .business-item__card::after { border-radius: 16px; }
	.business-item__title { font-size: clamp(22px, 6vw, 30px); letter-spacing: .01em; }
	.business-item__open { min-height: 44px; }
}


/* =====================================================================
   14. トップ：ビジョン（#vision）
   背景色・文字色のスクロール連動は 24. を参照
   ===================================================================== */
.home-vision {
	--vision-fade-top: clamp(80px, 9vw, 140px);      /* 上端：暗くなっていく帯の長さ */
	--vision-solid-after: clamp(80px, 9vw, 140px);   /* 本文の最後の行のあとに確保する暗い帯 */
	--vision-fade-bottom: clamp(120px, 12vw, 200px); /* 下端：明るく戻っていく帯の長さ */
	padding-block: clamp(140px, 17vw, 220px) calc(var(--vision-solid-after) + var(--vision-fade-bottom));
}
.home-vision__title { max-width: 12em; margin: 0; font-size: clamp(44px, 8vw, 112px); font-weight: 700; letter-spacing: -.05em; line-height: 1.25; }
.home-vision__copy { max-width: 920px; margin: 64px 0 0 auto; }
.home-vision__copy p { margin: 0 0 1.5em; color: var(--color-text); transition: color .7s var(--ease-out); }
.home-vision__copy p:last-child { margin-bottom: 0; }
.home-vision.is-theme-dark .home-vision__copy p { color: var(--color-text-muted); }
/* 暗い背景の上のネットワーク（ビジョン・会社概要のヒーロー。JSが canvas を入れる）。暗くなるほど濃く見え、セクションの上下の端では背景と同じようにぼかす */
.home-vision.theme-switch, .about-hero.theme-switch { position: relative; isolation: isolate; }
.theme-network {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	opacity: var(--theme-p, 0);
	clip-path: inset(0); /* 画面に固定した canvas を、セクションの範囲だけに切り抜く */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--vision-fade-top, 100px), #000 calc(100% - var(--vision-fade-bottom, 160px)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--vision-fade-top, 100px), #000 calc(100% - var(--vision-fade-bottom, 160px)), transparent 100%);
}
.theme-network canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.about-hero .theme-network { -webkit-mask-image: none; mask-image: none; } /* 会社概要のヒーロー：ページの最上部から暗いので、上下をぼかさない */

@media (max-width: 767px) {
	.home-vision { --vision-fade-top: 64px; --vision-solid-after: 56px; --vision-fade-bottom: 96px; padding-top: 96px; }
	.home-vision__title { font-size: clamp(42px, 10vw, 54px); }
	.home-vision__copy { margin-top: 40px; }
}


/* =====================================================================
   15. トップ：プロジェクト（#projects）
   PC：左＝テキスト／右＝画像を縦に1枚ずつループ送り
   スマホ：上＝テキスト／下＝画像を横にスライド
   ===================================================================== */
.works-stage {
	--stage-h: clamp(440px, calc(100svh - var(--header-height) - 140px), 640px);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); /* 左テキスト：右画像＝4：3 */
	gap: clamp(28px, 4vw, 56px);
	align-items: stretch;
	min-height: var(--stage-h);
	padding: 0 clamp(20px, 3vw, 40px) 0 clamp(28px, 5vw, 72px);
	border-radius: 28px;
	background: rgba(10, 37, 51, .82);
	box-shadow: 0 24px 64px rgba(10, 37, 51, .22);
}

/* テキスト：同じ場所に重ねて、表示中の1件だけを切り替える */
.works-text { display: grid; }
.works-text__item {
	grid-area: 1 / 1;
	display: flex; flex-direction: column; justify-content: center; /* ボックスの上下中央 */
	padding-block: clamp(40px, 6vh, 64px);
	opacity: 0; visibility: hidden; filter: blur(10px); transform: translateY(10px);
	transition: opacity .15s ease, filter .15s ease, transform .15s ease, visibility 0s .15s;
}
.works-text__item.is-active {
	opacity: 1; visibility: visible; filter: none; transform: none;
	transition: opacity .3s .1s ease, filter .3s .1s ease, transform .3s .1s ease, visibility 0s; /* ぼやけながら0.3秒でフェードイン */
}
.works-text__category { color: rgba(255, 255, 255, .85); }
.works-text__title { margin: 0 0 32px; color: #fff; font-size: clamp(24px, 3.4vw, 48px); font-weight: 700; line-height: 1.3; } /* 事業内容のカードタイトルと同じ文字サイズ */
.works-text__body { margin: 0; color: rgba(255, 255, 255, .6); line-height: 1.9; }
.works-text__body a { color: rgba(77, 195, 224, .9); text-decoration: none; text-underline-offset: 3px; transition: color .25s var(--ease-out); } /* 本文中のリンク：下線なしの水色（本文より少しだけ目立つ程度） */
.works-text__body a:hover, .works-text__body a:focus-visible { color: #8fdcef; text-decoration: underline; text-decoration-thickness: 1px; } /* マウスを乗せると、少し明るくなって下線が出る */

/* 画像（4:3）：ホイール／スワイプ／矢印で1枚ずつ動き、最後まで行くと最初に戻る（JSが --pos と --pitch をセット） */
.works-scroller { --pitch: 460px; position: relative; min-height: var(--stage-h); overflow: hidden; touch-action: none; }
.works-card { position: absolute; inset: 0; pointer-events: none; }
.works-card__text { display: none; } /* テキストは .works-text 側で表示 */
.works-card__open {
	position: absolute; left: 0; right: 0; top: 50%; margin-inline: auto;
	width: min(100%, calc(var(--stage-h) * .65 * 4 / 3)); /* 高さ＝ボックスの約65%（前後の画像が上下にのぞく大きさ） */
	aspect-ratio: 4 / 3;
	border-radius: 18px; overflow: hidden; background: #0b2a3a; cursor: default;
	pointer-events: auto;
	opacity: .4;
	transform: translateY(calc(-50% + var(--pos, 0) * var(--pitch)));
	transition: transform .7s var(--ease-out), opacity .5s ease;
}
.works-card.is-current .works-card__open { opacity: 1; }
.works-card__open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lite .works-card__open { transition-duration: .2s; }

/* 矢印（JSが追加。PC＝上下／スマホ＝左右）。押すと前／次へ */
.works-arrow {
	position: absolute; left: calc(50% - 22px); z-index: 2;
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
	transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.works-arrow--up { top: 8px; }
.works-arrow--down { bottom: 8px; }
.works-arrow:hover { background: #fff; color: var(--color-dark); }
.works-arrow--up:hover { transform: translateY(-3px); }
.works-arrow--down:hover { transform: translateY(3px); }
.works-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 767px) {
	/* 高さは事業内容の詳細ボックスと共通。文章と画像をひとまとまりにして上下中央へ */
	.works-stage { display: flex; flex-direction: column; justify-content: center; gap: 28px; height: auto; min-height: var(--sp-panel-h); padding: 40px 20px; border-radius: 20px; } /* 高さは最低限 --sp-panel-h。文章が長いときや画面が低いときは、ボックスの方が伸びる（はみ出さない） */
	.works-text__item { justify-content: flex-start; gap: 20px; padding-block: 0; }
	.works-text__category { margin-bottom: 10px; }
	.works-text__title { margin-bottom: 16px; font-size: 26px; } /* 詳細ボックスのタイトルと同じ */
	.works-text__body { font-size: 15px; }                        /* 詳細ボックスの本文と同じ */

	.works-scroller { flex: none; height: auto; min-height: 0; aspect-ratio: 100 / 70; touch-action: pan-y; }
	.works-card__open {
		left: 50%; right: auto; margin-inline: 0; width: 88%; border-radius: 14px;
		transform: translate(calc(-50% + var(--pos, 0) * var(--pitch)), -50%);
	}

	.works-arrow { top: calc(50% - 22px); bottom: auto; background: rgba(10, 37, 51, .6); }
	.works-arrow svg { transform: rotate(-90deg); }
	.works-arrow--up { left: 6px; }
	.works-arrow--down { left: auto; right: 6px; }
	.works-arrow--up:hover { transform: translateX(-3px); }
	.works-arrow--down:hover { transform: translateX(3px); }
}


/* =====================================================================
   16. トップ：詳細ボックス（template-parts/detail-modal.php）
   画面の中央に開く。事業内容（--business）とプロジェクト（--works）で共通
   ===================================================================== */
.detail-modal {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center;
	padding-top: calc(var(--header-height) + clamp(16px, 3vw, 32px));
	padding-bottom: clamp(16px, 3vw, 32px);
	overflow-y: auto; pointer-events: auto;
	background: rgba(10, 37, 51, .58);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	animation: modal-fade .35s ease both;
}
.detail-modal[hidden] { display: none; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: none; } }

/* 前後の事例への切り替え（JSが、新しいボックスに is-switching、閉じる側に is-leaving を付ける）
   背景はそのままにして、ボックスだけが矢印の方向へスライドしながら入れ替わる（--switch-dir：次＝1／前＝-1） */
.detail-modal { --switch-x: 48px; --switch-y: 0px; } /* 切り替え時に動く距離（PC＝左右。スマホは下の @media で上下） */
.detail-modal.is-switching, .detail-modal.is-leaving { animation: none; }
.detail-modal.is-leaving { z-index: 301; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; } /* 閉じる側は、背景を消して新しいボックスの手前で消えていく */
/* 消える側：矢印と反対方向へ少し動きながら、小さく・ぼやけて消える（0.3秒。JSの leaveDetail の 300 と同じ） */
/* 現れる側：少し遅れて（0.15秒後）、矢印の方向から、ぼやけた状態からくっきり現れる */
/* ※ ぼかし（filter）はボックスではなく中身にかける（ボックスにかけると、すりガラスの効果が切れて一瞬透けてしまうため） */
.detail-modal.is-switching .detail-modal__box, .detail-modal.is-leaving .detail-modal__box { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; } /* 切り替え中はすりガラスを使わない（透明度を動かすと、すりガラスが一瞬切れて透けて見えるブラウザがあるため。代わりに背景を濃いめに） */
.detail-modal.is-leaving .detail-modal__box { animation: detail-switch-out .3s ease-in both; }
.detail-modal.is-leaving .detail-modal__body { animation: detail-switch-blur-out .3s ease-in both; }
.detail-modal.is-switching .detail-modal__box { animation: detail-switch-in .55s var(--ease-out) .15s both; }
.detail-modal.is-switching .detail-modal__body { animation: detail-switch-blur-in .55s var(--ease-out) .15s both; }
@keyframes detail-switch-out { to { opacity: 0; transform: translate(calc(var(--switch-dir, 1) * var(--switch-x) * -1), calc(var(--switch-dir, 1) * var(--switch-y) * -1)) scale(.97); } }
@keyframes detail-switch-in { from { opacity: 0; transform: translate(calc(var(--switch-dir, 1) * var(--switch-x)), calc(var(--switch-dir, 1) * var(--switch-y))) scale(.97); } }
@keyframes detail-switch-blur-out { to { filter: blur(8px); } }
@keyframes detail-switch-blur-in { from { filter: blur(8px); } }

.detail-modal__box {
	position: relative; display: flex; flex-direction: column; justify-content: center;
	width: min(1100px, 100%);
	min-height: clamp(440px, 62vh, 600px);
	max-height: calc(100vh - var(--header-height) - clamp(32px, 6vw, 64px));
	max-height: calc(100svh - var(--header-height) - clamp(32px, 6vw, 64px));
	padding: clamp(56px, 6vw, 72px) clamp(80px, 8vw, 104px);
	overflow-y: auto; clip-path: inset(0 round 24px);
	border: 1px solid rgba(255, 255, 255, .85); border-radius: 24px;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: 0 24px 80px rgba(10, 37, 51, .35);
	animation: modal-pop .55s var(--ease-out) both;
}
.detail-modal__body { display: grid; align-items: center; gap: clamp(28px, 4vw, 56px); }
.detail-modal__visual { position: relative; overflow: hidden; border-radius: 20px; background: var(--color-blue-pale); }
.detail-modal__visual::after { position: absolute; inset: 0; background: rgba(0, 160, 200, .25); content: ""; pointer-events: none; }
.detail-modal__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-modal__category { color: var(--color-blue-deep); }
.detail-modal__text h4 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 42px); line-height: 1.3; }
.detail-modal__text p { margin: 0; }

/* 前後の事例へのボタンと、閉じるボタン */
.detail-modal__nav, .detail-modal__close {
	position: absolute; display: grid; place-items: center; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(10, 37, 51, .07); color: var(--color-dark); cursor: pointer;
	transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.detail-modal__nav { width: 48px; height: 48px; }
.detail-modal__close { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 24px; line-height: 1; }
.detail-modal__nav:hover, .detail-modal__close:hover { background: var(--color-dark); color: #fff; box-shadow: 0 8px 20px rgba(10, 37, 51, .25); }
.detail-modal__nav:focus-visible, .detail-modal__close:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }

/* 事業内容：左＝画像（4:3）／右上＝タイトル／右下＝本文（タイトルと本文のまとまりは画像の上下中央）。前後ボタンは左右の中央（＜ ＞） */
.detail-modal--business .detail-modal__category { display: none; } /* 分類はカード側に表示済み */
.detail-modal--business .detail-modal__body {
	grid-template-columns: 3fr 4fr;
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas: "visual ." "visual title" "visual text" "visual .";
	align-items: start;
	row-gap: 0;
}
.detail-modal--business .detail-modal__visual { grid-area: visual; align-self: center; aspect-ratio: 4 / 3; }
.detail-modal--business .detail-modal__visual::after { display: none; } /* 青い膜を消して、画像を元の色で表示 */
.detail-modal--business .detail-modal__text { display: contents; }
.detail-modal--business .detail-modal__text h4 { grid-area: title; margin: 0 0 20px; }
.detail-modal--business .detail-modal__text p { grid-area: text; }
.detail-modal--business .detail-modal__nav { top: calc(50% - 24px); }
.detail-modal--business .detail-modal__nav--prev { left: 16px; }
.detail-modal--business .detail-modal__nav--next { right: 16px; }
.detail-modal--business .detail-modal__nav--prev:hover { transform: translateX(-3px); }
.detail-modal--business .detail-modal__nav--next:hover { transform: translateX(3px); }

/* プロジェクト：左＝テキスト／右＝画像。前後ボタンは上下の中央（︿ ﹀） */
.detail-modal--works .detail-modal__body { grid-template-columns: 4fr 3fr; }
.detail-modal--works .detail-modal__text { order: -1; }
.detail-modal--works .detail-modal__visual { aspect-ratio: 4 / 3; }
.detail-modal--works .detail-modal__nav { left: calc(50% - 24px); }
.detail-modal--works .detail-modal__nav--prev { top: 14px; }
.detail-modal--works .detail-modal__nav--next { bottom: 14px; }
.detail-modal--works .detail-modal__nav--prev:hover { transform: translateY(-3px); }
.detail-modal--works .detail-modal__nav--next:hover { transform: translateY(3px); }

@media (max-width: 767px) {
	.detail-modal { --switch-x: 0px; --switch-y: 40px; padding: calc(var(--header-height) + 24px) 12px 16px; } /* 前後の切り替えは上下に動く（矢印が上下のため） */
	.detail-modal__box { min-height: 0; max-height: calc(100svh - var(--header-height) - 40px); clip-path: inset(0 round 20px); padding: 64px 20px 88px; border-radius: 20px; }
	.detail-modal__body { gap: 24px; }
	.detail-modal__visual { border-radius: 16px; }
	.detail-modal__category { margin-bottom: 10px; }
	.detail-modal__text h4 { font-size: 26px; }

	/* 事業内容：高さを固定（前後の事例に切り替えても大きさが変わらない）。
	   中身（画像〜本文）だけをスクロールさせ、上下の矢印は常に枠の上下に固定 */
	.detail-modal--business { padding-top: calc(var(--header-height) + 12px); padding-bottom: 12px; } /* ボックスの上下の余白を詰める */
	.detail-modal--business .detail-modal__box { justify-content: flex-start; height: calc(100svh - var(--header-height) - 24px); max-height: none; overflow: hidden; padding-top: 76px; padding-bottom: 80px; } /* 高さ：ヘッダーの下に見えている範囲いっぱい（上下12pxずつ空ける） */
	@supports (height: 100dvh) { .detail-modal--business .detail-modal__box { height: calc(100dvh - var(--header-height) - 24px); } } /* iPhone などで、ツールバーが隠れているときは、その分も使う */
	.detail-modal--business .detail-modal__body { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* 縦に積むだけなので通常の並びに */
	.detail-modal--business .detail-modal__visual { margin-bottom: 24px; aspect-ratio: 16 / 9; }
	.detail-modal--business .detail-modal__text h4 { margin-bottom: 16px; }
	.detail-modal--business .detail-modal__nav { left: calc(50% - 24px); right: auto; }
	.detail-modal--business .detail-modal__nav--prev { top: 14px; bottom: auto; }
	.detail-modal--business .detail-modal__nav--next { top: auto; bottom: 14px; }
	.detail-modal--business .detail-modal__nav svg { transform: rotate(90deg); } /* ＜ → ︿ ／ ＞ → ﹀ */
	.detail-modal--business .detail-modal__nav--prev:hover { transform: translateY(-3px); }
	.detail-modal--business .detail-modal__nav--next:hover { transform: translateY(3px); }

	/* プロジェクト：テキスト → 画像の縦1列 */
	.detail-modal--works .detail-modal__body { grid-template-columns: 1fr; }
	.detail-modal--works .detail-modal__text { order: 0; }
	.detail-modal--works .detail-modal__visual { aspect-ratio: 16 / 9; }
}


/* =====================================================================
   17. トップ：パートナー企業（#partners）
   プロジェクト（#projects）の中の1パート
   ===================================================================== */
.home-partners { margin-top: calc(clamp(40px, 4vw, 64px) + clamp(32px, 3.5vw, 48px)); } /* プロジェクトのボックスとの間（別セクションだったときの「プロジェクトの下の余白＋パートナーの上の余白」と同じ） */


/* ボックス（白・淡い影） */
.partner-box {
	position: relative; overflow: hidden;
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid rgba(10, 37, 51, .06);
	border-radius: clamp(20px, 2.4vw, 32px);
	background: #fff;
	box-shadow: 0 12px 40px rgba(10, 37, 51, .07);
}
.partner-box__title { margin: 0 0 clamp(20px, 3vw, 36px); font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: .06em; text-align: center; }

/* ロゴ一覧（グレー表示） */
.partner-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); }
.partner-cell {
	--x: 50%; --y: 50%;
	position: relative; display: grid; place-items: center; overflow: hidden;
	min-height: clamp(88px, 8vw, 104px); padding: clamp(10px, 1.4vw, 18px);
}
.partner-cell img { display: block; width: 100%; max-height: 56px; height: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(150%); }
.partner-cell:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 8px; } /* ロゴはリンク：キーボードで選んだときだけ枠を出す */

/* 虫眼鏡：ホバーした場所が丸く拡大され、その中だけカラーで表示される（JSがレンズの中身と --x/--y を用意） */
.partner-lens { position: absolute; inset: 0; padding: inherit; background: #fff; opacity: 0; pointer-events: none; clip-path: circle(42px at var(--x) var(--y)); transition: opacity .2s ease; }
.partner-lens__inner { position: absolute; inset: 0; display: grid; place-items: center; padding: inherit; transform: scale(1.4); transform-origin: var(--x) var(--y); }
.partner-lens img { filter: none; }
.partner-cell.is-lens .partner-lens { opacity: 1; }

@media (max-width: 1023px) {
	.partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.home-partners { margin-top: 80px; } /* プロジェクトのボックスとの間 */
	.partner-box { container-type: inline-size; padding: 20px 12px; }
	.partner-box__title { font-size: min(22px, 100cqw / 14.6); letter-spacing: .01em; white-space: nowrap; } /* 見出しは1行に収める（字間を詰め、画面が狭いほど小さく。最大22px） */
	.partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
	.partner-cell { min-height: 52px; padding: 6px 8px; }
	.partner-cell img { max-height: 32px; }
}


/* =====================================================================
   18. トップ：ショートフィルム（#short-film）
   ※ front-page.php で一時的に非表示中。再表示する場合のために残している
   テキストが拡大しながら消え、動画がぼやけからくっきり現れる
   ===================================================================== */
.home-film { padding-block: 0; }
.film-stage { position: relative; display: grid; min-height: 100vh; min-height: 100svh; place-items: center; overflow: hidden; }
.film-stage__marker { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* 中央のテキスト（明朝体・文字間隔は広め）。padding-left は、文字間隔ぶんの右寄りを補正 */
.film-stage__text {
	grid-area: 1 / 1; margin: 0; padding-left: .12em; text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: clamp(28px, 5.2vw, 78px);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.38;
	will-change: transform, opacity;
}
/* 動画：最初は透明でぼやけている */
.film-frame {
	grid-area: 1 / 1; position: relative; width: min(100%, 1120px); overflow: hidden; aspect-ratio: 16/9;
	border-radius: 24px; background: var(--color-blue-pale);
	opacity: 0; filter: blur(24px); pointer-events: none;
	transition: opacity 1s ease-in-out, filter 1s ease-in-out;
}
.film-frame__poster, .film-frame__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.film-frame__video { z-index: 1; }
/* 切り替え（JSが is-played を付ける） */
.film-stage.is-played .film-stage__text { animation: film-text-zoom 1s cubic-bezier(.7, 0, .3, 1) forwards; pointer-events: none; }
.film-stage.is-played .film-frame { opacity: 1; filter: blur(0); pointer-events: auto; }
@keyframes film-text-zoom {
	from { opacity: 1; transform: scale(1); }
	70%  { opacity: 1; }
	to   { opacity: 0; transform: scale(16); }
}
/* JSが動かない環境では、最初から動画（画像）だけ表示 */
.no-js .film-stage__text { display: none; }
.no-js .film-frame { opacity: 1; filter: none; }

@media (max-width: 767px) {
	.film-stage__text { padding-left: .1em; font-size: clamp(26px, 7.4vw, 34px); letter-spacing: .1em; line-height: 1.6; }
	.film-frame {
		width: min(100%, calc(82vh * 9 / 16));
		width: min(100%, calc(82svh * 9 / 16));
		aspect-ratio: 9 / 16;
		border-radius: 16px;
	}
}


/* =====================================================================
   19. お問い合わせ（template-parts/contact-section.php ほか）
   ===================================================================== */
.home-contact__inner { max-width: 960px; }
.home-contact__title { margin: 0 auto 40px; font-size: clamp(28px, 5.2vw, 56px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center; }
.home-contact__lead { max-width: 40em; margin: -16px auto 36px; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.9; text-align: center; }

/* トップページのみ：中央のテキストが拡大しながら消え、タイトルとフォームがぼやけから現れる */
.home-contact.has-intro { padding-block: 0; }
.contact-stage { position: relative; display: grid; min-height: 100vh; min-height: 100svh; place-items: center; overflow: hidden; }
.contact-stage__marker { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; pointer-events: none; }
.contact-stage__text { /* 明朝体・文字間隔は広め */
	grid-area: 1 / 1; margin: 0; padding-left: .12em; text-align: center;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: clamp(28px, 5.2vw, 78px);
	font-weight: 400;
	letter-spacing: .12em;
	line-height: 1.38;
	will-change: transform, opacity;
}
.contact-stage__content { /* 最初は透明でぼやけている */
	grid-area: 1 / 1; width: 100%; padding-block: clamp(48px, 6vw, 80px);
	opacity: 0; filter: blur(24px); pointer-events: none;
	transition: opacity 1s ease-in-out .7s, filter 1s ease-in-out .7s;
}
/* 切り替え（JSが is-played を付ける） */
.contact-stage.is-played .contact-stage__text { animation: contact-text-zoom 1s cubic-bezier(.7, 0, .3, 1) forwards; pointer-events: none; }
.contact-stage.is-played .contact-stage__content { opacity: 1; filter: blur(0); pointer-events: auto; }
@keyframes contact-text-zoom {
	from { opacity: 1; transform: scale(1); }
	70%  { opacity: 1; }
	to   { opacity: 0; transform: scale(16); }
}
/* 「#」付きのリンクで来たとき（JSが is-instant を付ける）／JSが動かない環境：テキストの切り替えを省く */
.contact-stage.is-instant .contact-stage__text { display: none; }
.contact-stage.is-instant .contact-stage__content { transition: none; }
.no-js .contact-stage__text { display: none; }
.no-js .contact-stage__content { opacity: 1; filter: none; pointer-events: auto; }
/* スマホ（トップページ）：「アイデアが動き出す」の切り替えは使わず、会社概要ページと同じく、はじめからタイトル・本文・フォームを表示 */
@media (max-width: 767px) {
	.home-contact.has-intro { padding-block: clamp(72px, 20vw, 96px); } /* ほかのセクションと同じ上下の余白 */
	.contact-stage { display: block; min-height: 0; overflow: visible; }
	.contact-stage__text { display: none; }
	.contact-stage__content { padding-block: 0; opacity: 1; filter: none; pointer-events: auto; transition: none; }
}

/* フォーム：名前とメールアドレスは横並び／項目名はプレースホルダー */
.contact-preview__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-preview__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-preview__field--message { margin-top: 16px; }
.contact-preview input, .contact-preview textarea {
	width: 100%; min-height: 56px; padding: 14px 18px;
	border: 1px solid rgba(10, 37, 51, .18); border-radius: 12px; outline: 0;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	color: var(--color-dark); font: inherit;
	transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s var(--ease-out);
}
.contact-preview ::placeholder { color: rgba(10, 37, 51, .5); opacity: 1; }
.contact-preview input:focus, .contact-preview textarea:focus { border-color: var(--color-blue); background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 3px rgba(0, 160, 200, .18); }
.contact-preview textarea { min-height: 160px; resize: vertical; }

/* 送信ボタン：ホバーで色が反転し、浮き上がる */
.contact-preview__submit {
	display: block; min-width: 220px; min-height: 56px; margin: 32px auto 0; padding: 12px 36px;
	border: 0; border-radius: 999px; background: var(--color-blue); color: #fff;
	font: inherit; font-weight: 700; letter-spacing: .08em; cursor: pointer;
	transition: background-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.contact-preview__submit:hover { background: var(--color-dark); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10, 37, 51, .3); }
.contact-preview__submit:active { transform: translateY(0); box-shadow: none; }
.contact-preview__submit:focus-visible { outline: 3px solid var(--color-blue-bright); outline-offset: 3px; }

/* 送信結果のメッセージ（ボタンの下。JSが is-visible／is-error を付ける） */
.contact-preview__status { min-height: 1.6em; margin: 18px 0 0; color: var(--color-blue-deep); font-size: 15px; font-weight: 700; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.contact-preview__status.is-visible { opacity: 1; transform: none; }
.contact-preview__status.is-error { color: #C23B47; }

.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* スパム対策の見えない欄 */
.form-required { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: #D64550; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; vertical-align: middle; } /* 必須マーク（キャンペーンのフォーム） */

@media (max-width: 767px) {
	.home-contact__title { margin-bottom: 36px; font-size: clamp(22px, 7.2vw, 30px); line-height: 1.45; } /* 2行になるので行間を少し広げる（PCは1.2） */
	.home-contact__lead { margin: -12px auto 28px; text-align: left; }
	.contact-preview__row { grid-template-columns: 1fr; }
}


/* =====================================================================
   20. 会社概要ページ（page-about.php）
   ===================================================================== */
.about-main { overflow: clip; }

/* ---------- ヒーロー：「about Fabo」→ スクロールでキャッチコピーに切り替え ---------- */
.about-hero { position: relative; min-height: 160svh; padding: 0; overflow: clip; background: var(--color-dark); color: #fff; }
/* 背景はセクション全体で濃いネイビー（「24. スクロール連動の配色」の、端が薄くなるグラデーションを打ち消す）。
   iPhone などでは、ツールバーが隠れると画面が下の枠（.about-hero__stage）より高くなり、その下に薄い色の帯が見えていたため */
.about-main .about-hero.theme-switch { background: var(--color-dark); }
.about-hero__stage { position: sticky; top: var(--header-height); display: flex; min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); align-items: center; width: 100%; overflow: hidden; isolation: isolate; background: transparent; /* 背景はセクション（.about-hero）側 */ }
.about-hero__glow { position: absolute; z-index: -1; inset: 8% 10% 6%; background: radial-gradient(ellipse at 54% 48%, rgba(0, 160, 200, .16), rgba(10, 37, 51, 0) 58%); pointer-events: none; }
.about-hero__trigger { position: absolute; top: 100svh; left: 0; width: 1px; height: 1px; pointer-events: none; } /* JSが切り替えのタイミングを測る目印 */

/* 背景のネットワーク：トップのビジョンと同じ（JSが .theme-network を入れる。CSSは「14. トップ：ビジョン」） */

/* 「about Fabo」 */
.about-hero__word {
	position: absolute;
	z-index: 2;
	left: 5%;
	bottom: 7%;
	width: max-content;
	max-width: 90%;
	margin: 0;
	color: #fff;
	font-family: "Outfit", sans-serif;
	font-size: min(22vw, 32vh, 320px);
	letter-spacing: -.02em;
	line-height: .9;
	white-space: nowrap;
}
.about-hero__word-sub { margin-right: 0.2em; font-size: 0.5em; font-weight: 300; opacity: 0.85; } /* 「about」：細字・小さめ */
.about-hero__word-main { font-weight: 400; } /* 「Fabo」 */
/* 1文字ずつ、左から順に、ぼやけた状態から少し下から上がってくる（文字ごとに0.15秒ずつ遅らせる） */
.about-hero__word span {
	display: inline-block;
	opacity: 0;
	filter: blur(10px);
	transform: translateY(20px);
	animation: char-rise-in 1.2s cubic-bezier(.16, 1, .3, 1) forwards;
	animation-delay: calc(.2s + var(--i) * .15s);
	transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out), filter 1s var(--ease-out); /* スクロールで消える時用 */
}
/* スクロールで切り替わると上へ消える（フェードインのアニメーションより優先させるため !important） */
.about-hero.is-copy .about-hero__word span {
	animation: none !important;
	opacity: 0 !important;
	transform: translateY(-55vh) !important;
	filter: blur(10px) !important;
	transition-delay: calc(var(--i) * .1s);
}

/* 右下の「↓」：下へスクロールできることを示す（JSが入れる）。
   外側＝「about Fabo」が出そろった頃（2.2秒後）にぼやけから現れる／中＝「会社概要」の見出しが画面に入ると、ぼやけながら消える（JSが is-hidden）／矢印（縦長）＝上下にゆっくり動く */
.about-hero__scroll {
	position: absolute; z-index: 3; right: var(--page-gutter); bottom: clamp(24px, 4vh, 40px); pointer-events: none;
	opacity: 0; filter: blur(8px); transform: translateY(10px);
	animation: about-scroll-in .8s var(--ease-out) 2.2s forwards;
}
.about-hero__scroll-icon {
	display: block; color: #fff; /* 枠は付けず、矢印だけ（ボタンと間違えられないように） */
	transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
.about-hero__scroll.is-hidden .about-hero__scroll-icon { opacity: 0; filter: blur(12px); }
.about-hero__scroll svg { animation: about-scroll-bob 1.6s ease-in-out infinite; }
@keyframes about-scroll-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes about-scroll-bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .about-hero__scroll svg { animation: none; } }
.lite .about-hero__scroll svg { animation: none; }
@media (max-width: 767px) { .about-hero__scroll { right: 20px; bottom: 20px; } .about-hero__scroll svg { width: 27px; height: 40.5px; } } /* スマホはPCの0.75倍（縦横の比率 36：54 はそのまま） */

/* トップページのヒーローにも同じ「↓」を出す（JSが入れる。大きさ・動きは会社概要と同じ）。
   画面の下・左右中央に固定／タイトルのアニメーション（オープニング終了後0.6秒）が終わったらぼやけから現れる／キャッチコピーのアニメーションが始まったら、ぼやけながら消える（JSが is-hidden） */
.home-hero__scroll {
	position: fixed; z-index: 50; left: 0; right: 0; bottom: calc(clamp(24px, 4vh, 40px) + env(safe-area-inset-bottom, 0px)); width: max-content; margin-inline: auto; pointer-events: none;
	opacity: 0; filter: blur(8px); transform: translateY(10px);
}
.home-hero__scroll.is-ready { animation: about-scroll-in .8s var(--ease-out) forwards; } /* タイトルのアニメーションが終わったら、JSが is-ready を付ける */
.home-hero__scroll-icon {
	display: block; color: rgba(10, 37, 51, .4); /* 明るい背景でも見える紺色を、少し薄く（数値を上げると濃くなる） */
	transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
.home-hero__scroll.is-hidden .home-hero__scroll-icon { opacity: 0; filter: blur(12px); }
.home-hero__scroll svg { animation: about-scroll-bob 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .home-hero__scroll svg { animation: none; } }
.lite .home-hero__scroll svg { animation: none; }
@media (max-width: 767px) { .home-hero__scroll { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .home-hero__scroll svg { width: 27px; height: 40.5px; } }

/* キャッチコピーと本文：切り替わるとぼやけから現れる */
.about-hero__intro { position: absolute; z-index: 2; inset: 13% var(--page-gutter) 14%; display: flex; align-items: flex-start; justify-content: space-between; gap: 8vw; }
.about-hero__statement, .about-hero__description { margin: 0; opacity: 0; transform: translateY(40px); filter: blur(10px); transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out), filter 1s var(--ease-out); }
.about-hero__statement { max-width: 10em; color: #fff; font-size: clamp(36px, 5.8vw, 82px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
.about-hero__description { align-self: flex-end; max-width: 34em; color: var(--color-text-muted); font-size: clamp(15px, 1.35vw, 18px); line-height: 2; }
.about-hero__para { display: block; }
.about-hero__para + .about-hero__para { margin-top: .8em; }
.about-hero.is-copy .about-hero__statement, .about-hero.is-copy .about-hero__description { opacity: 1; transform: translateY(0); filter: blur(0); }
.about-hero.is-copy .about-hero__statement { transition-delay: .2s; }
.about-hero.is-copy .about-hero__description { transition-delay: .4s; }
.no-js .about-hero__statement, .no-js .about-hero__description { opacity: 1; transform: none; filter: none; }

/* ---------- セクション見出し（役員紹介・事業内容） ---------- */
.about-section-heading { margin-bottom: clamp(40px, 6vw, 72px); text-align: center; }
.about-section-heading h3 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: .04em; line-height: 1.4; }

/* ---------- 会社概要（#company） ---------- */
.about-company { padding-bottom: clamp(120px, 10vw, 160px); } /* 中に役員紹介・事業内容を含むので、下の余白は通常のセクションと同じ（もとの事業内容セクションの下の余白） */
/* ヒーロー（濃いネイビー）からのつなぎ：セクションの上端に、ネイビー → 透明のグラデーションを敷く */
.about-company { position: relative; isolation: isolate; }
.about-company::before {
	position: absolute; z-index: -1; top: -2px; left: 0; right: 0; height: clamp(96px, 12vw, 180px); content: ""; pointer-events: none; /* 上へ2pxはみ出させて、ヒーローとの間にすき間（明るい線）が出ないようにする */
	background: linear-gradient(to bottom, rgb(10, 37, 51) 0%, rgba(10, 37, 51, .74) 22%, rgba(10, 37, 51, .42) 48%, rgba(10, 37, 51, .16) 74%, rgba(10, 37, 51, 0) 100%); /* 途中の段階を細かく指定して、帯の境目が見えないようにする */
}
.about-company .home-section-heading { margin-bottom: clamp(40px, 5vw, 64px); }
.about-company .home-section-heading h2 { font-size: clamp(28px, 4.5vw, 56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.about-company__list { margin: 0; border-top: 1px solid rgba(10, 37, 51, .2); }
.about-company__row { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.8fr); gap: 32px; align-items: center; min-height: 104px; padding: 24px 8px; border-bottom: 1px solid rgba(10, 37, 51, .2); }
.js .about-company__row { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .about-company__row.is-visible { opacity: 1; transform: none; }
.lite .about-company__row { opacity: 1; transform: none; transition: none; }
.about-company__row dt { display: flex; align-items: center; gap: 16px; color: var(--color-dark); font-weight: 700; }
.about-company__row dd { margin: 0; color: var(--color-dark); }
.about-company__icon { display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid rgba(0, 160, 200, .32); border-radius: 50%; color: var(--color-blue-deep); }
.about-company__icon svg { width: 20px; height: 20px; }
/* 固定ページの本文（ブロックエディタ）に入力した場合 */
.about-company__blocks { max-width: 980px; }
.about-company__blocks .wp-block-table { margin-block: 0; }
.about-company__blocks table { width: 100%; border-collapse: collapse; }
.about-company__blocks td, .about-company__blocks th { padding: 22px 16px; border-color: rgba(10, 37, 51, .2); text-align: left; }

/* ---------- 役員紹介（#officers）：会社概要（#company）の中の1パート ---------- */
.about-officers {
	margin-top: calc(clamp(56px, 5vw, 80px) + clamp(40px, 4vw, 64px)); /* 会社概要の表との間（別セクションだったときの「会社概要の下の余白＋役員紹介の上の余白」と同じ） */
	margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); /* はみ出し防止の切り抜き範囲を、別セクションだったときと同じ（画面の左右の余白まで）にして、カードの影が切れないようにする */
	overflow: hidden;
}
/* 上段＝代表取締役（横長）／下段＝4名を横並び。全体の幅は最大960px。サイズはこの幅（cqw）に対する割合で決めている
   はじめは5枚とも中央に重なっていて（代表取締役が一番上）、画面に届くと各位置へ整列する。代表取締役は整列しながら拡大する */
.about-officer-cards {
	--g: 2cqw;                                       /* カードの間隔 */
	--lh: 32cqw;                                     /* 上段（代表取締役）のカードの最低限の高さ */
	--lead-h: var(--lh);                             /* 上段のカードの高さ（JSが紹介文の量に合わせて上書きする） */
	--n: 4;                                          /* 下段の枚数（page-about.php が人数に合わせて上書きする） */
	--cw: calc((100cqw - var(--g) * (var(--n) - 1)) / var(--n)); /* 下段のカードの幅（下段全体の幅が、上段のカードと同じになるように枚数で割る） */
	--row-x: calc((100cqw - var(--cw) * var(--n) - var(--g) * (var(--n) - 1)) / 2); /* 下段の左端（今は下段が全幅なので 0。カードの幅を固定に戻したときも中央にそろうように残している） */
	--ch: calc(var(--cw) * .8 + 11cqw);              /* 下段のカードの高さ（写真＋テキスト） */
	--h: calc(var(--lead-h) + var(--g) + var(--ch)); /* 全体の高さ */
	container-type: inline-size;
	position: relative;
	width: min(100%, 960px);
	margin-inline: auto;
}
.about-officer-cards::before { content: ""; display: block; height: var(--h); } /* 全体の高さを確保（カードはすべて絶対配置） */
.about-officer-card {
	position: absolute; z-index: 1; display: flex; flex-direction: column; overflow: hidden;
	left: calc(50cqw - var(--cw) / 2); top: calc((var(--h) - var(--ch)) / 2); width: var(--cw); height: var(--ch); /* はじめは全員が中央に重なっている */
	border-radius: 20px; background: #fff; color: var(--color-dark); box-shadow: 0 16px 40px rgba(10, 37, 51, .12);
	opacity: 0;
	transition: left 1.1s cubic-bezier(.22, 1, .36, 1), top 1.1s cubic-bezier(.22, 1, .36, 1), width 1.1s cubic-bezier(.22, 1, .36, 1), height 1.1s cubic-bezier(.22, 1, .36, 1), opacity .8s ease;
}
/* はじめは代表取締役の1枚だけ表示（他のカードは同じ位置に隠れている） */
.about-officer-card:nth-child(1) { z-index: 5; opacity: 1; }
.about-officer-card:nth-child(2) { z-index: 4; transition-delay: .1s; }
.about-officer-card:nth-child(3) { z-index: 3; transition-delay: .2s; }
.about-officer-card:nth-child(4) { z-index: 2; transition-delay: .3s; }
.about-officer-card:nth-child(5) { z-index: 1; transition-delay: .4s; }

/* 画面に届くと整列（JSが is-spread を付ける）：上段＝代表取締役（拡大）／下段＝残りの人（左から順に、全体を左右中央に） */
.about-officer-cards.is-spread .about-officer-card, .about-officer-cards:focus-within .about-officer-card { opacity: 1; }
.about-officer-cards.is-spread .about-officer-card:nth-child(1), .about-officer-cards:focus-within .about-officer-card:nth-child(1) { left: 0; top: 0; width: 100cqw; height: var(--lead-h); }
.about-officer-cards.is-spread .about-officer-card:nth-child(n+2), .about-officer-cards:focus-within .about-officer-card:nth-child(n+2) { top: calc(var(--lead-h) + var(--g)); }
.about-officer-cards.is-spread .about-officer-card:nth-child(2), .about-officer-cards:focus-within .about-officer-card:nth-child(2) { left: var(--row-x); }
.about-officer-cards.is-spread .about-officer-card:nth-child(3), .about-officer-cards:focus-within .about-officer-card:nth-child(3) { left: calc(var(--row-x) + var(--cw) + var(--g)); }
.about-officer-cards.is-spread .about-officer-card:nth-child(4), .about-officer-cards:focus-within .about-officer-card:nth-child(4) { left: calc(var(--row-x) + (var(--cw) + var(--g)) * 2); }
.about-officer-cards.is-spread .about-officer-card:nth-child(5), .about-officer-cards:focus-within .about-officer-card:nth-child(5) { left: calc(var(--row-x) + (var(--cw) + var(--g)) * 3); }
.about-officer-cards:focus-within .about-officer-card:focus { outline: 3px solid var(--color-blue-bright); outline-offset: -3px; }

.about-officer-card__photo { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--color-blue-pale); }
.about-officer-card__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-officer-card__text { flex: none; height: 11cqw; padding: 1.2cqw 1.8cqw; overflow: hidden; }
.about-officer-card__text p { margin: 0 0 .4cqw; color: var(--color-blue-deep); font-size: clamp(11px, 1.2cqw, 14px); letter-spacing: .08em; } /* 役職 */
.about-officer-card__text h4 { margin: 0; font-size: clamp(15px, 2.2cqw, 28px); line-height: 1.4; } /* 名前 */
.about-officer-card__text > span { display: block; margin-top: .5cqw; color: var(--color-dark-muted); font-size: clamp(10px, 1.1cqw, 13px); letter-spacing: .04em; } /* 英字の名前 */
.about-officer-card__intro { margin: 0; line-height: 1.9; } /* 紹介文（代表取締役のみ） */

/* 代表取締役のカード（PC）：整列前は他の役員と同じ見た目（写真が上／テキストが下）。
   整列すると写真が左（左：右＝9：16）へ縮み、右上に役職・氏名・英字氏名、右下に紹介文が現れる */
@media (min-width: 768px) and (hover: hover), (min-width: 768px) and (pointer: fine) {
	.about-officer-card--lead .about-officer-card__photo { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 11cqw); transition: width 1.1s cubic-bezier(.22, 1, .36, 1), height 1.1s cubic-bezier(.22, 1, .36, 1); }
	.about-officer-card--lead .about-officer-card__text { position: absolute; left: 0; bottom: 0; width: 100%; }
	.about-officer-card__intro { position: absolute; left: 36cqw; bottom: 0; width: 64cqw; padding: 0 3.6cqw 3.2cqw; font-size: clamp(14px, 1.7cqw, 18px); opacity: 0; }
	/* 整列後（JSが高さを測る間＝is-measuring も同じ配置） */
	.about-officer-cards:is(.is-spread, :focus-within, .is-measuring) .about-officer-card--lead .about-officer-card__photo { width: 36%; height: 100%; } /* 9 ÷ (9 + 16) ＝ 36% */
	.about-officer-cards:is(.is-spread, :focus-within, .is-measuring) .about-officer-card--lead .about-officer-card__text { left: 36cqw; top: 0; bottom: auto; width: 64cqw; height: auto; padding: 3.2cqw 3.6cqw 0; }
	.about-officer-cards:is(.is-spread, :focus-within, .is-measuring) .about-officer-card--lead .about-officer-card__text p { margin-bottom: .6cqw; font-size: clamp(12px, 1.4cqw, 16px); }
	.about-officer-cards:is(.is-spread, :focus-within, .is-measuring) .about-officer-card--lead .about-officer-card__text h4 { font-size: clamp(22px, 3.4cqw, 40px); }
	.about-officer-cards:is(.is-spread, :focus-within, .is-measuring) .about-officer-card--lead .about-officer-card__text > span { margin-top: .6cqw; font-size: clamp(11px, 1.3cqw, 15px); }
	/* 右側の文字は、配置が切り替わる間は隠しておき、拡大が終わる頃にフェードイン */
	.about-officer-cards:is(.is-spread, :focus-within) .about-officer-card--lead .about-officer-card__text,
	.about-officer-cards:is(.is-spread, :focus-within) .about-officer-card__intro { animation: officer-lead-text-in 1.4s ease both; }
	.about-officer-cards.is-measuring .about-officer-card--lead, .about-officer-cards.is-measuring .about-officer-card--lead * { transition: none !important; animation: none !important; }
}
@keyframes officer-lead-text-in { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- 事業内容・プロジェクト（#services）：会社概要（#company）の中の1パート。模様の面 → 詳細の面に切り替わるカード ---------- */
.home-business {
	margin-top: calc(clamp(60px, 5vw, 80px) + clamp(60px, 5vw, 80px)); /* 役員紹介との間（別セクションだったときの「役員紹介の下の余白＋事業内容の上の余白」と同じ） */
	margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); /* はみ出し防止の切り抜き範囲を、別セクションだったときと同じ（画面の左右の余白まで）にして、カードの影が切れないようにする */
	overflow: hidden;
}
.business-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.business-card { display: grid; min-width: 0; min-height: 380px; }
.business-card:nth-child(2) { --n: 1; }
.business-card:nth-child(3) { --n: 2; }
.business-card__inner { position: relative; display: grid; width: 100%; } /* 2つの面を同じマスに重ね、中身が多い方の高さに合わせる */
.business-card__face { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 52px); border-radius: 20px; }

/* 模様の面（最初に見える面）：切り替え時にぼやけながら消える（全体で約1.3秒） */
.business-card__back { align-items: center; overflow: hidden; background-color: var(--color-blue); background-image: url("assets/images/business_f_pattern.svg"); background-repeat: repeat; background-size: 360px 240px; color: #fff; transition: opacity .8s ease, filter .8s ease; transition-delay: calc(var(--n, 0) * .25s); }
.business-card__back::before, .business-card__back::after { position: absolute; inset: 16px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 12px; content: ""; }
.business-card__back::after { inset: 32px; border-color: rgba(255, 255, 255, .35); }
.business-card__f-mark { z-index: 1; display: grid; width: 116px; height: 116px; place-items: center; border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; font-family: "Playfair Display", serif; font-size: 72px; font-weight: 700; line-height: 1; }
.business-card__number { position: absolute; right: 32px; bottom: 24px; color: #fff; font-size: 13px; letter-spacing: .16em; }

/* 詳細の面（すりガラス）：切り替え時にぼやけた状態からくっきり現れる */
.business-card__front {
	isolation: isolate; overflow: hidden; color: var(--color-dark);
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .75);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 12px 32px rgba(10, 37, 51, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
	opacity: 0; transition: opacity .8s ease; transition-delay: calc(var(--n, 0) * .25s);
}
.business-card__front > * { filter: blur(14px); transition: filter .8s ease; transition-delay: calc(var(--n, 0) * .25s); }
.business-card__front::before { position: absolute; z-index: -1; top: -110px; right: -105px; width: 280px; height: 280px; border: 1px solid rgba(0, 160, 200, .22); border-radius: 50%; box-shadow: 0 0 0 24px rgba(191, 233, 244, .24), 0 0 0 48px rgba(191, 233, 244, .14); content: ""; }
.business-card__front::after { position: absolute; top: 30px; left: 0; width: 6px; height: 72px; border-radius: 0 99px 99px 0; background: var(--color-blue); content: ""; }
.business-card__eyebrow { margin: 0 0 28px; color: var(--color-blue-deep); font-size: 13px; font-weight: 500; letter-spacing: .16em; }
.business-card__front .info-entry__more { align-self: flex-start; margin-top: 16px; } /* 「詳細を見る」：本文の下、左寄せ */
.business-card__front h4 { max-width: 10em; margin: 0 0 20px; font-size: clamp(28px, 3vw, 42px); line-height: 1.3; letter-spacing: -.04em; }
.business-card__front p:last-child { margin: 0; font-size: 15px; line-height: 1.9; }

/* 切り替え後（JSが is-switched を付ける） */
.business-cards.is-switched .business-card__back { opacity: 0; filter: blur(14px); pointer-events: none; }
.business-cards.is-switched .business-card__front { opacity: 1; }
.business-cards.is-switched .business-card__front > * { filter: blur(0); }

/* JSが動かない環境では、最初から詳細の面を表示 */
.no-js .business-card__back { display: none; }
.no-js .business-card__front { opacity: 1; }
.no-js .business-card__front > * { filter: none; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
	.about-hero__statement { max-width: 9em; }
	.about-company { padding-bottom: clamp(72px, 20vw, 96px); } /* もとの事業内容セクションの下の余白 */
	.about-company .home-section-heading h2 { font-size: clamp(26px, 7.5vw, 36px); }
	.about-section-heading h3 { font-size: clamp(24px, 6.8vw, 28px); } /* 役員紹介・事業内容・実績の見出し（どの画面幅でも、会社概要の見出し h2 より一回り小さく） */
	.about-officers { margin-top: 88px; } /* 会社概要の表との間 */
	.home-business { margin-top: calc(clamp(36px, 10vw, 48px) * 2); } /* 役員紹介との間（役員紹介の下の余白＋事業内容の上の余白） */
	.business-cards { grid-template-columns: 1fr; gap: 20px; }
	.business-card { min-height: 330px; }
	.business-card__face { padding: 28px; border-radius: 18px; }
	.business-card__eyebrow { margin-bottom: 10px; }
}

/* ---------- スマホ・タッチ操作のタブレット ---------- */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	/* 指のスクロール向け：少しスクロールしただけ（画面の高さの約15%）でキャッチコピーに切り替え、切り替え後も画面1つ分はその場にとどまる */
	.about-hero { min-height: 160svh; } /* 長さ：キャッチコピーに切り替わった後、画面の約0.6枚分スクロールすると、会社概要へ進む（長くするほど、切り替え後の画面にとどまる） */
	.about-hero__trigger { top: 100svh; }
	.about-hero__intro { inset: 12% 20px 17%; flex-direction: column; justify-content: space-between; gap: 24px; }
	.about-hero__statement { font-size: clamp(30px, calc((100vw - 40px) / 8.2), 56px); }
	.about-hero__description { align-self: flex-end; max-width: 100%; font-size: 14px; line-height: 1.9; }
	.about-hero__word { left: 20px; bottom: 9%; white-space: normal; }
	.about-hero__word-sub { display: block; margin-right: 0; margin-bottom: 0.3em; }
	.about-company__row { grid-template-columns: 1fr; gap: 8px; min-height: auto; padding: 20px 0; }
	.about-company__row dt { gap: 12px; }
	.about-company__row dd { padding-left: 48px; }
	/* 役員紹介：展開の動きはなしで、縦1列に並べる */
	.about-officer-cards { container-type: normal; display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; }
	.about-officer-cards::before { display: none; }
	.about-officer-card, .about-officer-card:nth-child(n) { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; margin-inline: auto !important; opacity: 1 !important; transition: none !important; }
	.about-officer-card__photo { flex: none; aspect-ratio: 4 / 3; }
	.about-officer-card__text { height: auto; min-height: 112px; padding: 20px 24px 24px; }
	.about-officer-card__text p { margin-bottom: 4px; font-size: 13px; }
	.about-officer-card__text h4 { font-size: 24px; }
	.about-officer-card__text > span { margin-top: 5px; font-size: 12px; }
	.about-officer-card--lead .about-officer-card__text { padding: 20px 24px 0; }
	.about-officer-card--lead .about-officer-card__text p { margin-bottom: 4px; font-size: 13px; }
	.about-officer-card--lead .about-officer-card__text h4 { font-size: 24px; }
	.about-officer-card--lead .about-officer-card__text > span { margin-top: 5px; font-size: 12px; }
	.about-officer-card__intro { padding: 12px 24px 24px; font-size: 14px; }
	/* 代表取締役以外：左＝写真（幅45%。高さは幅38%・4:5だったときと同じ）／右＝役職・氏名・英字氏名（上下中央） */
	.about-officer-card:not(.about-officer-card--lead) { flex-direction: row; align-items: center; }
	.about-officer-card:not(.about-officer-card--lead) .about-officer-card__photo { width: 45%; aspect-ratio: 18 / 19; } /* 高さ＝ボックス幅の47.5%（38% × 5/4）で、写真は大きくしない */
	.about-officer-card:not(.about-officer-card--lead) .about-officer-card__text { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 16px 18px; }
	.about-officer-card:not(.about-officer-card--lead) .about-officer-card__text h4 { font-size: 22px; }
}


/* =====================================================================
   21. お知らせ一覧ページ（page-info.php）・カテゴリタグ
   左の画像は固定、右の一覧だけスクロール
   ===================================================================== */
.info-page { --info-pad-top: clamp(48px, 6vw, 96px); padding-block: var(--info-pad-top) clamp(48px, 6vw, 96px); }
.info-page__inner { display: grid; grid-template-columns: 9fr 16fr; gap: clamp(32px, 5vw, 80px); align-items: start; }

/* 左：スクロールしても固定される画像 */
.info-page__visual {
	--visual-h: calc(100svh - var(--header-height) - var(--admin-bar-h, 0px) - var(--info-pad-top) - 24px); /* 枠の高さ：最初の位置（ヘッダー＋上の余白）から、画面の下端の24px手前まで */
	position: sticky; top: calc(var(--header-height) + var(--admin-bar-h, 0px) + var(--info-pad-top)); /* 最初の位置のまま固定（スクロールしても動かない） */
	display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; overflow: hidden; /* 行の高さを枠に固定（画像が枠より大きいときも、上下中央でそろえる） */
	height: var(--visual-h);
	border-radius: 24px;
}
.info-page__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.info-page__visual img.info-page__logo { width: auto; height: auto; max-width: 100%; max-height: calc(var(--visual-h) * 1.15); object-fit: contain; } /* 画像を置いていないときの画像（info.png）：幅・高さの両方に上限を付けて枠に収める。画像の上下には透明な余白があるので、高さは枠の1.15倍まで許す（はみ出すのは透明な余白だけで、人物は見切れない） */ /* 画像を置いていないときの画像（info.png）：縦長でも枠に収まるように、幅・高さの両方に上限（高さ＝枠の高さ − 浮く動きのぶんの余裕40px） */
/* スクロールしている間だけ、画像がプカプカ浮くように動く（JSがスクロール中に is-scrolling を付ける。止まると、その位置で一時停止） */
/* ※ transform だけを動かすので、ブラウザの負荷はほとんどかからない */
.info-page__visual img { animation: info-visual-float 2.6s ease-in-out infinite paused; }
.info-page__visual.is-scrolling img { animation-play-state: running; }
.lite .info-page__visual img { animation: none; }
@keyframes info-visual-float {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* 右：タイトルと一覧 */
@media (min-width: 768px) { .info-page__main { margin-top: calc(32px - var(--info-pad-top)); } } /* PC：右側だけ上に詰めて、タイトルをヘッダーのすぐ下（32px）に置く（左の画像の位置は変えない） */
.info-page__header { margin-bottom: clamp(28px, 4vw, 48px); }
.info-page__header h1 { margin: 0; font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: .04em; line-height: 1.2; }
.info-entries { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(10, 37, 51, .12); }
.info-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; padding: 28px 0; border-bottom: 1px solid rgba(10, 37, 51, .12); }
.info-entry__meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } /* 投稿ページでも使用 */
.info-entry__date { color: #526975; font-size: 14px; letter-spacing: .06em; }
.info-entry__title { grid-column: 1; margin: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; }
.info-empty { margin: 0; padding: 48px 0; color: #526975; text-align: center; }

/* 「詳細を見る」などの枠線ボタン（お知らせ一覧・投稿・404・会社概要のカードでも使用） */
.info-entry__more {
	grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 10px 18px; border: 1px solid rgba(10, 37, 51, .35); border-radius: 999px;
	background: transparent; color: var(--color-dark); font-size: 14px; text-decoration: none; white-space: nowrap;
	transition: color .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.info-entry__more:hover { border-color: var(--color-dark); background: var(--color-dark); color: #fff; }

/* ページ送り（1ページ10件。WordPressの paginate_links が出力） */
.info-pagination { margin-top: clamp(32px, 4vw, 56px); }
.info-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.info-pagination ul.page-numbers li .page-numbers { display: grid; min-width: 44px; height: 44px; place-items: center; padding: 0 12px; border-radius: 999px; color: var(--color-dark); font-size: 15px; text-decoration: none; transition: background-color .25s var(--ease-out), color .25s var(--ease-out); }
.info-pagination ul.page-numbers li a.page-numbers:hover { background: rgba(10, 37, 51, .08); }
.info-pagination ul.page-numbers li .page-numbers.current { background: var(--color-dark); color: #fff; }
.info-pagination ul.page-numbers li .page-numbers.dots { min-width: 0; padding: 0 4px; background: transparent; }

/* カテゴリタグ：種類ごとに薄い色（色の割り当ては functions.php の fabo_2026_post_tags） */
.info-tag { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.info-tag--orange { background: rgba(245, 150, 50, .2); color: #a8570a; }
.info-tag--blue { background: rgba(0, 160, 200, .15); color: #00698f; }
.info-tag--purple { background: rgba(140, 120, 255, .2); color: #5a46c8; }
.info-tag--gray { background: rgba(10, 37, 51, .08); color: #526975; }

/* スマホ：左の画像は隠して、一覧だけ表示 */
@media (max-width: 767px) {
	.info-page { padding-top: 32px; } /* スマホ：ヘッダーとタイトルの間 */
	.info-page__inner { grid-template-columns: 1fr; }
	.info-page__visual { display: none; }
	.info-entry { grid-template-columns: 1fr; padding: 24px 0; }
	.info-entry__more { grid-column: 1; grid-row: auto; justify-self: start; min-height: 44px; margin-top: 4px; }
}


/* =====================================================================
   22. 投稿ページ（single.php）：見出し・本文の文字サイズ
   ===================================================================== */
/* 通常の投稿（single.php。キャンペーンのテンプレートには適用しない） */
.content-page--post { padding-top: 16px; } /* ヘッダーと公開日・タグの間を詰める */
.content-page__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } /* タイトル上のカテゴリタグ */
.content-page--post .info-entry__meta { margin-top: 16px; } /* タイトル下の公開日・更新日 */
.entry-thumbnail img { display: block; height: auto; margin-inline: auto; } /* アイキャッチ画像は左右中央 */
.entry-thumbnail { margin-bottom: clamp(32px, 4vw, 56px); } /* アイキャッチ画像と本文の間 */
.content-page__footer { margin-top: clamp(64px, 8vw, 112px); } /* 本文と「お知らせ一覧へ戻る」の間を広く */
.single-post .content-page__title { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .01em; line-height: 1.4; }
.single-post .entry-content { font-size: 17px; line-height: 2; }
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 { letter-spacing: .02em; line-height: 1.5; } /* 詰めた字間を、日本語向けに戻す */
.single-post .entry-content h2 { margin-block: 2.6em 1em; font-size: clamp(24px, 2.4vw, 30px); }
.single-post .entry-content h3 { margin-block: 2.2em .8em; font-size: clamp(20px, 2vw, 24px); }
.single-post .entry-content h4 { margin-block: 2em .6em; font-size: 18px; }
.single-post .entry-content p,
.single-post .entry-content li { font-size: inherit; }

@media (max-width: 767px) {
	.content-page--post { padding-top: 32px; } /* スマホ：ヘッダーとタグ・タイトルの間 */
	.content-page--post .info-entry__meta { margin-top: 12px; }
	.content-page__tags { margin-bottom: 10px; }
	.single-post .content-page__title { font-size: 26px; }
	.single-post .entry-content { font-size: 15px; line-height: 1.9; }
	.single-post .entry-content h2 { font-size: 21px; }
	.single-post .entry-content h3 { font-size: 18px; }
	.single-post .entry-content h4 { font-size: 16px; }
}


/* =====================================================================
   23. プライバシーポリシーページ（page-privacy.php）
   ===================================================================== */
.privacy-main .content-page { padding-top: 56px; }
.privacy-main .content-page__title { margin-bottom: 1.5em; font-size: clamp(26px, 4.2vw, 52px); font-weight: 500; }
.privacy-main .entry-content h2 { margin-top: 2em; margin-bottom: 1em; padding-bottom: 12px; border-bottom: 1px solid rgba(10, 37, 51, .15); font-size: clamp(22px, 3.5vw, 32px); font-weight: 500; }
.privacy-main .entry-content h2:first-child { margin-top: 0; }
.privacy-main .entry-content p { margin-bottom: 1.5em; }
.privacy-main .entry-content ol { margin-bottom: 1.5em; padding-left: 1.5em; }
.privacy-main .entry-content ol li { margin-bottom: 0.5em; }

/* 事業者情報のボックス */
.privacy-company-info { margin-top: 24px; padding: 32px; border: 1px solid rgba(10, 37, 51, .08); border-radius: 20px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.privacy-company-info dl { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; margin: 0; }
.privacy-company-info dt { font-weight: 700; }
.privacy-company-info dd { margin: 0; }

@media (max-width: 767px) {
	.privacy-main .content-page { padding-top: 32px; } /* スマホ：ヘッダーとタイトルの間 */
	.privacy-main .content-page__title { font-size: clamp(26px, 8.4vw, 32px); } /* タイトル（1行に収まる範囲で大きく） */
	.privacy-company-info { padding: 24px 20px; }
	.privacy-company-info dl { grid-template-columns: 1fr; gap: 8px 16px; }
	.privacy-company-info dt { margin-top: 12px; }
	.privacy-company-info dt:first-child { margin-top: 0; }
}


/* =====================================================================
   24. スクロール連動の配色（.theme-switch＝ビジョン・会社概要ヒーロー／ヘッダー）
   JSがスクロール量に合わせて --theme-p（背景の進み具合 0〜1）と --theme-fg（文字色の進み具合 0〜1）をセットし、
   なめらかに暗転する。color-mix() に対応していないブラウザでは、is-theme-dark／is-dark で2段階に切り替える
   ※ 各セクションの背景・文字色より後に書く必要がある（同じ詳細度で上書きするため）
   ===================================================================== */
.theme-switch { color: var(--color-text); background-color: rgba(238, 246, 250, 0); transition: color var(--transition-color), background-color var(--transition-color); }
.theme-switch.is-theme-dark { color: var(--color-blue); background-color: rgba(10, 37, 51, .9); }
.lite .theme-switch { transition-duration: .25s; }

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.theme-switch, .theme-switch.is-theme-dark {
		color: color-mix(in srgb, var(--color-blue) calc(var(--theme-fg, 0) * 100%), var(--color-text));
		background-color: transparent;
		background-image: linear-gradient(
			to bottom,
			rgba(10, 37, 51, 0) 0,
			rgba(10, 37, 51, calc(var(--theme-p, 0) * .95)) var(--vision-fade-top, 100px),
			rgba(10, 37, 51, calc(var(--theme-p, 0) * .95)) calc(100% - var(--vision-fade-bottom, 160px)),
			rgba(10, 37, 51, 0) 100%
		);
		transition: none;
	}
	.home-vision__copy p, .home-vision.is-theme-dark .home-vision__copy p {
		color: color-mix(in srgb, var(--color-blue-pale) calc(var(--theme-fg, 0) * 100%), var(--color-text));
		transition: none;
	}
	.site-header, .site-header.is-dark {
		background: color-mix(in srgb, rgba(10, 37, 51, .5) calc(var(--theme-p, 0) * 100%), rgba(255, 255, 255, .5));
		transition: opacity .4s var(--ease-out), visibility .4s;
	}
}