/**
 * TOPページ Ver.2（PHASE17: TOP Integration）。
 * 各セクションの詳細な設計根拠はdocs/PHASES_V2.md（PHASE8-16）と対応するPrototypeページの
 * CSS（fv/about/create/grow/works/contact-prototype.css）を参照。ここではそれらを
 * 実データ・実DOM向けのクラス名に合わせて移植している。
 */

/* ==============================================================
   FV（Ver.5：最終版、2026-09-15）
   ユーザー指示：既存FVの基本デザイン・キャッチコピー・レイアウトは維持。今回作り直したのは
   「イントロ動画の読み込み」「動画開始前の表示」「動画終了から静止FVへの移行」。

   レイヤー構成：.fv-video__stage内に intro-bg（濃紺単色）→ intro（動画）→ world-day
   （world-day.webp、videoより上のz-indexに置きopacityだけで重なりを制御）。
   .fv-video__overlay（可読性スクリム）とcontent/scrollはさらに上。

   【最重要】FOUC対策：header.phpの<head>内で同期実行されるinline scriptが初回ペイントより
   前に<html>へ.js（常時）と.js-fv-skip-intro（再訪/reduced-motionのみ）を付与する。
   このファイルはそのクラスの有無だけを見て初期opacityを決める（JSの実行完了を待って
   opacity:0にする方式は「動画開始前に完成後FVが一瞬見える」原因になるため廃止した）。
   .js が無い（JS無効）環境ではデフォルトの表示のままで、world-day.webp＋コピーが常に
   読める（WebGL Fallback原則）。
   ============================================================== */
.fv-video {
	position: relative;
	width: 100%;
	/* ユーザー指示（2026-09-17、「HEADER 最終実装指示書」セクション2）：HEADERはFVへ
	   overlayする透明HEADERになり、#main-contentのpadding-topでFVを押し下げなくなった
	   （body:not(.home) #main-contentにのみpadding-topを適用、base.css参照）ため、
	   FVは単純にビューポート全高から開始してよい。 */
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: #020817;
	color: #fff;
}

.fv-video__stage {
	position: absolute;
	inset: 0;
}

.fv-video__intro-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* ユーザー指示：「background: #020817; 程度の、動画冒頭の夜空に近い濃紺背景」。 */
	background: #020817;
}

.fv-video__intro {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 画面比率によって青い鳥・FRAMEが不自然に切れないよう、object-positionをCSS変数化。
	   PC/SPそれぞれ下のブレークポイントで個別に調整できる構造にしてある。 */
	--fv-video-object-position: 50% 58%;
	object-position: var(--fv-video-object-position);
	background: #020817;
}

/* 2026-09-17追記（ユーザー指示）：静止画(world-day.webp)ではなくworld-day.mp4（8秒ループ）を
   再生する<video>要素に変更。opacity/scaleをgsapで操作するクロスフェードの仕組みは
   要素の種別（div/video）に依存しないため、intro.js側のロジックはそのまま流用できる。
   poster属性に元のwebpを指定し、video読み込み前の初期表示・動画非対応環境のフォールバックに使う。 */
.fv-video__world-day {
	position: absolute;
	inset: 0;
	/* 動画→world-dayのクロスフェードでworld-dayが動画の上に重なる必要があるため、
	   videoより高いz-indexに置きopacityだけで表示/非表示を切り替える
	   （常時DOM上に存在＝クロスフェード直前に慌てて描画されることがない）。 */
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	--fv-world-day-position: 50% 55%;
	object-position: var(--fv-world-day-position);
	transform-origin: 50% 50%;
	background: #020817;
}

/* コピーの可読性を確保するための最小限のスクリム。実要素として分離し、動画・world-day.webpの
   大部分はそのまま見せる（巨大グラデーション・カード状の装飾にはしない）。 */
.fv-video__world-clip {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fv-world-day-position, 50% 55%);
	opacity: 0;
	visibility: hidden;
}

.fv-video__world-clip:first-child {
	/* 先頭動画を直接表示し、廃止済みの静止画へ戻らないようにする。 */
	opacity: 1;
	visibility: visible;
}

/* 現在の先頭動画から抽出したフレームを、デコード待ち中も表示する。 */
.fv-video__world-day {
	background: #020817 url('../../images/world-video-poster.webp') var(--fv-world-day-position, 50% 55%) / cover no-repeat;
}

.fv-video__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	height: 40%;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(6, 12, 26, 0.5) 0%, rgba(6, 12, 26, 0.18) 55%, rgba(6, 12, 26, 0) 100%);
}

.fv-video__skip {
	position: absolute;
	z-index: 5;
	top: clamp(20px, 3vw, 40px);
	right: clamp(20px, 3vw, 40px);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background: rgba(8, 12, 24, 0.32);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: var(--font-display, sans-serif);
	font-size: clamp(10px, 0.85vw, 12px);
	font-weight: 700;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: opacity 0.3s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.fv-video__skip:hover,
.fv-video__skip:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	transform: translateY(-1px);
}

.fv-video__skip.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.fv-video__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	width: min(92vw, 1100px);
	margin: 0 auto;
	padding-bottom: clamp(70px, 10vh, 120px);
	box-sizing: border-box;
	text-align: center;
}

.fv-video__content::before{content:"";position:absolute;inset:28% 18% 22%;z-index:-1;background:radial-gradient(ellipse,rgba(7,23,48,.16),transparent 70%);pointer-events:none}

/* ユーザー指示（2026-09-16）：「上質な和文明朝×モダンな英字」統一の一環で、FVメインコピーは
   --font-serif（Noto Serif JP）へ。太字ゴシック（800）から軽いウェイト（600）へ変更し、
   letter-spacingを開けて（0.03〜0.08em）line-heightにも余白を持たせ、高級感・ゲーム世界の
   壮大さを出す。サブコピーは引き続きゴシックの細字（「メインコピー＝明朝、説明・UI＝ゴシック」）。 */
.fv-video__title {
	margin: 0;
	font-family: var(--font-serif, serif);
	font-weight: 600;
	font-size: clamp(34px, 5.2vw, 78px);
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-shadow: 0 4px 24px rgba(6, 12, 26, 0.45);
}

.fv-video__line {
	display: block;
}

.fv-video__sub {
	margin: clamp(16px, 1.8vw, 26px) 0 0;
	font-family: var(--font-body, sans-serif);
	font-weight: 400;
	font-size: clamp(13px, 1.1vw, 18px);
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 2px 14px rgba(6, 12, 26, 0.4);
}

.fv-video__title{font-size:clamp(32px,4.6vw,68px);text-shadow:0 2px 16px rgba(5,18,38,.52)}

.fv-video__scroll {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: clamp(22px, 3vh, 38px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.fv-video__scroll-label {
	font-family: var(--font-display, sans-serif);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.78);
}

.fv-video__scroll-line {
	position: relative;
	display: block;
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.fv-video__scroll-dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: #fff;
	animation: fvVideoScrollDot 1.8s ease-in-out infinite;
}

@keyframes fvVideoScrollDot {
	0% { transform: translateY(-4px); opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translateY(40px); opacity: 0; }
}

/* ==============================================================
   FOUC対策の本体：.js（JS有効、常時）/.js-fv-skip-intro（再訪・reduced-motionのみ）の
   有無だけで初期opacityを決める。header.php側のinline scriptが初回ペイントより前に
   付与するため、ここに書いたopacityはJSの実行を待たずに最初から適用される。
   ============================================================== */

/* 通常の初回訪問パス：intro-bgだけを見せ、動画・world-day・コピーは隠す。 */
.js .fv-video__intro { opacity: 0; }
.js .fv-video__world-day { opacity: 0; }
.js .fv-video__line,
.js .fv-video__sub,
.js .fv-video__scroll { opacity: 0; }

/* 再訪問・reduced-motionパス：動画・intro-bgを見せず、world-day＋コピーを最初から表示。 */
.js.js-fv-skip-intro .fv-video__intro-bg { opacity: 0; }
.js.js-fv-skip-intro .fv-video__intro { opacity: 0; }
.js.js-fv-skip-intro .fv-video__world-day { opacity: 1; }
.js.js-fv-skip-intro .fv-video__line,
.js.js-fv-skip-intro .fv-video__sub,
.js.js-fv-skip-intro .fv-video__scroll { opacity: 1; }
.js.js-fv-skip-intro .fv-video__skip { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
	.fv-video__intro {
		--fv-video-object-position: 50% 42%;
	}

	.fv-video__world-day {
		--fv-world-day-position: 50% 40%;
	}

	.fv-video__skip {
		top: 16px;
		right: 16px;
	}

	.fv-video__content {
		width: 88vw;
		padding-bottom: clamp(54px, 9vh, 86px);
	}

	.fv-video__overlay {
		height: 52%;
	}

	.fv-video__title {
		font-size: clamp(30px, 9vw, 44px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv-video__scroll-dot {
		animation: none;
		opacity: 1;
		transform: translateY(18px);
	}
}

/* ============================== CREATE / GROW（共通構造） ============================== */
/* ユーザー指示（2026-08-20）：追従する鳥はFVのみで完結させ、Service(CREATE/GROW)以降には
   出さない。旧`.service-bird__canvas`（CREATE〜GROWをまたぐBird用canvas）は撤去した。 */

/**
 * LIGコーポレートサイト（liginc.co.jp）のTECHNOLOGY以下を参考にした仕様（ユーザー指示、2026-08-20）：
 * その場にとどまる（Pin）、左に大見出し＋タグ、右にメディア、メディア下に番号ナビ、右端に次へ矢印。
 * CREATE/GROWで左右の役割・色トーンは共通、差し色（アクセント）のみ--v2-color-create-*/--v2-color-grow-*
 * を参照して出し分ける。
 */
.service-panel {
	position: relative;
}

.service-panel--create,
.service-panel--grow {
	background: var(--v2-color-service-panel-dark);
}

.service-panel__pin {
	position: relative;
	z-index: 13; /* CREATE=13, GROW=12（front-page.css内で個別指定、後続セクションに対して降順） */
	height: auto;
}

.service-panel--grow .service-panel__pin { z-index: 12; }

.service-panel__stage {
	position: relative;
	background: var(--v2-color-service-panel-dark);
}

/* --- Mobile（デフォルト）：Pinを使わず通常の縦スタック。各スライドが自身のタイトル/タグを持つ --- */
.service-panel__left {
	display: none; /* Mobileでは各スライド内のservice-panel__slide-metaで代替表示 */
}

.service-panel__media {
	position: relative;
	display: flex;
	flex-direction: column;
}

.service-panel__slide {
	position: relative;
	display: block;
	min-height: 60vh;
	color: inherit;
	text-decoration: none;
}

.service-panel--create .service-panel__slide { background: var(--v2-color-create-bg, #123a73); }
.service-panel--grow .service-panel__slide { background: var(--v2-color-grow-bg, #145c3a); }

.service-panel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-panel__slide-meta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	height: 100%;
	justify-content: center;
	padding: var(--space-8) var(--container-pad);
	color: var(--v2-color-service-panel-ink);
}

.service-panel__slide-index {
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
	opacity: 0.7;
}

.service-panel__slide-title {
	font-size: var(--fs-h2);
	font-weight: 700;
}

.service-panel__slide-tag {
	max-width: 40ch;
	opacity: 0.85;
}

.service-panel__arrow,
.service-panel__nav {
	display: none; /* Mobileでは番号ナビ・矢印は使わず、通常スクロールで全件見せる */
}

/* --- Desktop/Tablet：その場にとどまるPin + 左右分割レイアウト --- */
[data-mode="horizontal"] .service-panel__pin {
	/* ユーザーFB「スクロールが早すぎて各サービスのセクションが見えなくなる」を受け、
	   4 Beat x 70vh(280vh)から1itemあたりの距離を伸ばして360vhへ（scrubの数値スムージングは
	   pinそのものに遅延を生む副作用があったため不採用、距離を伸ばす方式に変更） */
	height: 360vh;
}

[data-mode="horizontal"] .service-panel__stage {
	height: 100vh;
	overflow: hidden;
	display: flex;
}

[data-mode="horizontal"] .service-panel__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-4);
	width: 38%;
	flex-shrink: 0;
	padding: var(--space-8) var(--space-7);
	color: var(--v2-color-service-panel-ink);
}

.service-panel__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	opacity: 0.7;
}

.service-panel--create .service-panel__eyebrow { color: var(--v2-color-create-accent, #14c8e8); }
.service-panel--grow .service-panel__eyebrow { color: var(--v2-color-grow-accent, #7be0a8); }

/* 不具合修正：以前はこの.is-active規則がcolorも背景色と同じアクセント色に上書きしてしまい、
   数字の文字色と背景色が同一色になって「塗りつぶされて番号が読めない」状態になっていた。
   背景色はグループのアクセント色、文字色は常に暗色で固定し、確実にコントラストを確保する。 */
.service-panel--create .service-panel__nav .service-panel__dot.is-active { background: var(--v2-color-create-accent, #14c8e8); color: #0b1626; }
.service-panel--grow .service-panel__nav .service-panel__dot.is-active { background: var(--v2-color-grow-accent, #7be0a8); color: #0b1626; }

.service-panel__title {
	/* ユーザーFB「左の枠に1行で収まるギリギリの大きさまで大きく」を受け、前回の縮小しすぎな
	   クランプ（1.5rem止まり）から、最長見出し（"Application / System"）が左カラム幅(38%)で
	   折り返さない範囲まで再拡大した。 */
	font-size: clamp(1.5rem, 0.6rem + 2.35vw, 2.8rem);
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}

.service-panel__tag {
	max-width: 32ch;
	opacity: 0.8;
}

[data-mode="horizontal"] .service-panel__media {
	position: relative;
	width: 62%;
	height: 100%;
	overflow: hidden;
}

[data-mode="horizontal"] .service-panel__slide {
	position: absolute;
	inset: 0;
	min-height: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-slow) var(--ease-standard);
}

[data-mode="horizontal"] .service-panel__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

[data-mode="horizontal"] .service-panel__slide-meta {
	display: none; /* Desktopではservice-panel__left側のタイトル/タグで代替表示 */
}

/* ユーザー指示：矢印は右端固定ではなく、見出し・説明文の下（左カラム内）に置く */
[data-mode="horizontal"] .service-panel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	margin-top: var(--space-2);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--v2-color-service-panel-ink);
}

.service-panel__arrow-ring {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-pill);
	transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.service-panel__arrow:hover .service-panel__arrow-ring {
	transform: scale(1.08);
	border-color: rgba(255, 255, 255, 0.9);
}

.service-panel__arrow-icon {
	position: relative;
	font-size: var(--fs-lead);
}

/* ユーザー指示（2026-08-20）：番号ナビを「時計の文字盤」から「半円」に変更。右端に半円の弧
   （__nav-arc、円をmediaのoverflow:hiddenで半分だけ見せている）を描き、現在アクティブな番号
   "だけ"をスクロールに応じて弧の上端→真ん中（頂点）→下端へ滑らせる（front-page.jsの
   updateDial()）。真ん中（頂点）に来た瞬間がそのitemが最もアクティブな状態。サイズは旧デザイン
   （2.25rem角・fs-eyebrow）のおよそ4倍に拡大した。 */
[data-mode="horizontal"] .service-panel__nav {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 22rem;
	height: 22rem;
	transform: translateY(-50%);
	z-index: 2;
}

.service-panel__nav-arc {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	transform: translateX(50%);
	border-radius: 50%;
	/* ユーザーFB「番号が乗っている線も大きく」を受け、線自体も太く・はっきり見えるようにした */
	border: 2px solid rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

.service-panel__dot {
	/* 基準位置は .service-panel__nav-arc の円の中心（＝mediaの右端、nav自身の右端）と厳密に
	   一致させる必要がある。transformで中央寄せするとJS側のgsap.set(x,y)（＝transform）と
	   競合して上書きされてしまうため、left:100%+負のmarginのみで中央寄せする（transformは
	   JSの円周移動専用に空けておく）。 */
	position: absolute;
	top: 50%;
	left: 100%;
	margin: -5.5rem 0 0 -5.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11rem;
	height: 11rem;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, 0.4);
	border: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 4rem;
	color: rgba(255, 255, 255, 0.85);
	opacity: 0;
}

/* 弧の上での位置（translate x,y）と表示/非表示はfront-page.jsのupdateDial()が
   毎スクロール更新時にgsap.setで直接指定する（GSAPのtweenと衝突しないようtransitionは使わない）。 */

.service-panel__dot.is-active {
	color: #0b1626;
	font-weight: 700;
}

/* ============================== PROJECTS（Simple 3 Column） ==============================
   ユーザー指示（2026-08-22、docs/projects-simple-implementation.md）：同ファイルのCSSを
   実装ベースとしてそのまま組み込む（従来の.libre-projects__*実装＝暗い展示空間・
   sticky/ScrollTrigger pin・横スクロール・3D scene・floating UIを全面撤去）。
   旧classとは完全に分離した新class（.libre-projects-simple）を使用し、旧CSSとの
   競合を避ける。角丸・shadow・borderは意図的に使わない（doc第13章のデザインルール）。 */
.libre-projects-simple {
	position: relative;
	width: 100%;
	overflow: hidden;

	padding: clamp(110px, 10vw, 190px) 0 clamp(120px, 11vw, 210px);

	color: #101114;

	background: linear-gradient(180deg, #f6f6f3 0%, #f1f1ee 100%);
}

.libre-projects-simple__inner {
	width: min(90vw, 1680px);
	margin: 0 auto;
}

/* -------------------------
   HEADER
------------------------- */

.libre-projects-simple__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 40px;

	margin-bottom: clamp(58px, 6vw, 100px);
}

.libre-projects-simple__heading h2 {
	margin: 0;

	font-size: clamp(62px, 7.2vw, 138px);

	line-height: .82;

	font-weight: 400;

	letter-spacing: -.065em;

	color: #101114;
}

.libre-projects-simple__heading p {
	margin: clamp(18px, 2vw, 28px) 0 0;

	font-size: 12px;

	line-height: 1.6;

	letter-spacing: .04em;

	color: rgba(16, 17, 20, .54);
}

/* -------------------------
   VIEW ALL
------------------------- */

.libre-projects-simple__view-all {
	display: inline-flex;
	align-items: center;

	gap: 24px;

	padding-bottom: 7px;

	color: #101114;

	text-decoration: none;

	font-size: 11px;

	font-weight: 500;

	letter-spacing: .10em;

	border-bottom: 1px solid rgba(16, 17, 20, .22);

	transition: border-color .3s ease;
}

.libre-projects-simple__view-all-arrow {
	display: inline-block;

	font-size: 18px;

	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

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

	.libre-projects-simple__view-all:hover {
		border-color: rgba(16,17,20,.70);
	}

	.libre-projects-simple__view-all:hover .libre-projects-simple__view-all-arrow {
		transform: translateX(6px);
	}

}

/* -------------------------
   GRID
------------------------- */

.libre-projects-simple__grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: clamp(18px, 2vw, 38px);

	align-items: start;
}

/* -------------------------
   ITEM
------------------------- */

.libre-projects-simple__item {
	min-width: 0;
}

.libre-projects-simple__link {
	display: block;

	color: inherit;

	text-decoration: none;
}

/* -------------------------
   VISUAL
------------------------- */

.libre-projects-simple__visual {
	position: relative;

	width: 100%;

	aspect-ratio: 4 / 5;

	overflow: hidden;

	background: #e8e8e4;
}

/*
 * 重要：
 * 画像はPROJECTS用にGPT等で加工した専用キービジュアルをアイキャッチとして設定する。
 * Web制作案件でもPCモックアップ固定にはしない。
 * Web / App / SEO / MEO / Advertising / SNSなど、案件に応じたPROJECTビジュアルを
 * 1枚の画像として作る（doc第9章）。
 */

.libre-projects-simple__visual img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1.001);

	transition: transform .75s cubic-bezier(.2,.7,.2,1);

	will-change: transform;
}

/* -------------------------
   NUMBER
------------------------- */

.libre-projects-simple__number {
	position: absolute;

	top: clamp(16px, 1.5vw, 26px);

	left: clamp(16px, 1.5vw, 26px);

	z-index: 3;

	display: block;

	font-family: Arial, Helvetica, sans-serif;

	font-size: clamp(22px, 2vw, 34px);

	line-height: 1;

	font-weight: 400;

	letter-spacing: -.04em;

	color: rgba(255,255,255,.96);

	mix-blend-mode: difference;

	pointer-events: none;
}

/* -------------------------
   META
------------------------- */

.libre-projects-simple__meta {
	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: 24px;

	padding-top: clamp(20px, 2vw, 30px);
}

.libre-projects-simple__meta h3 {
	margin: 0;

	font-size: clamp(20px, 1.65vw, 30px);

	line-height: 1.2;

	font-weight: 500;

	letter-spacing: -.035em;

	color: #101114;
}

.libre-projects-simple__meta p {
	margin: 9px 0 0;

	font-size: 10px;

	line-height: 1.5;

	letter-spacing: .08em;

	text-transform: uppercase;

	color: rgba(16,17,20,.48);
}

/* -------------------------
   ARROW
------------------------- */

.libre-projects-simple__arrow {
	display: inline-block;

	margin-top: 2px;

	font-size: 22px;

	line-height: 1;

	font-weight: 300;

	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

/* -------------------------
   HOVER
------------------------- */

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

	.libre-projects-simple__link:hover .libre-projects-simple__visual img {
		transform: scale(1.04);
	}

	.libre-projects-simple__link:hover .libre-projects-simple__arrow {
		transform: translateX(7px);
	}

}

/* -------------------------
   PLACEHOLDER
------------------------- */

.libre-projects-simple__placeholder {
	width: 100%;
	height: 100%;

	background: linear-gradient(135deg, #e4e4df, #d8d8d2);
}

/* -------------------------
   MOBILE VIEW ALL
------------------------- */

.libre-projects-simple__mobile-footer {
	display: none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.libre-projects-simple__grid {
		gap: 18px;
	}

	.libre-projects-simple__visual {
		aspect-ratio: 4 / 5.3;
	}

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.libre-projects-simple {
		padding: 100px 0 120px;
	}

	.libre-projects-simple__inner {
		width: 88vw;
	}

	.libre-projects-simple__header {
		display: block;

		margin-bottom: 54px;
	}

	.libre-projects-simple__heading h2 {
		font-size: clamp(62px, 20vw, 96px);
	}

	.libre-projects-simple__heading p {
		margin-top: 18px;
	}

	/* PC右上VIEW ALLはMobileで非表示 */
	.libre-projects-simple__view-all {
		display: none;
	}

	/* Mobileは1列 */
	.libre-projects-simple__grid {
		grid-template-columns: 1fr;

		gap: 64px;
	}

	.libre-projects-simple__visual {
		aspect-ratio: 4 / 5;
	}

	.libre-projects-simple__number {
		top: 18px;
		left: 18px;

		font-size: 26px;
	}

	.libre-projects-simple__meta {
		padding-top: 18px;
	}

	.libre-projects-simple__meta h3 {
		font-size: 24px;
	}

	.libre-projects-simple__arrow {
		font-size: 20px;
	}

	/* Mobile最下部VIEW ALL */
	.libre-projects-simple__mobile-footer {
		display: flex;

		justify-content: flex-end;

		margin-top: 72px;
	}

	.libre-projects-simple__mobile-view-all {
		display: inline-flex;

		align-items: center;

		gap: 24px;

		padding-bottom: 8px;

		color: #101114;

		text-decoration: none;

		font-size: 11px;

		font-weight: 500;

		letter-spacing: .10em;

		border-bottom: 1px solid rgba(16,17,20,.25);
	}

	.libre-projects-simple__mobile-view-all span {
		font-size: 18px;
	}

}


/* ============================== BLOG（旧COLUMN、2026-09-16 背景統一修正） ==============================
   ユーザー指示：BLOGセクションの背景が「図書館→白い巨大パネル→グレーの空間」のように
   領域ごとに分断されて見える問題を修正する。原因は、(1) .libre-blog__worldがbackground-size:
   100% auto（横幅基準）だったため、セクションが記事量で縦に伸びるほど画像が届かない下部が
   増え、そこをフォールバック色(#817772)でグラデーション処理していたのが「グレーの帯」として
   見えていたこと、(2) Featured記事の右側パネルがrgba(252,250,245,.86)という別の白系背景＋
   backdrop-filterを持ち、世界観の背景から浮いた「白い巨大パネル」に見えていたこと、
   (3) overlay（.libre-blog__overlay）とblend-top/bottomなど複数の半透明レイヤーが場所によって
   異なる濃度で重なり、上・中央・下で背景の印象が変わって見えていたこと、の3点。
   今回、background-size:100% auto→coverへ変更し画像が必ずセクション全高を覆うようにして
   フォールバック色・グラデーション処理（旧.libre-blog__world::after）を完全に撤去、
   overlayは.libre-blog__overlayの1枚のみに統一し、上部のblend-top（WORKS→BLOGの継ぎ目専用
   グラデーション）も「セクション途中で濃度を切り替えない」というユーザー指示に従い撤去した
   （画像の左右が狭い画面幅でcoverにより多少トリミングされる点は、このユーザー指示の優先度が
   「左右を絶対に切らない」という旧方針より高いため許容する）。 */

.libre-blog {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: clamp(100px,8vw,120px) 0 clamp(80px,6vw,100px);
	color: #1c2430;
	/* column-world.webp読み込み前/失敗時のみのフォールバック。background-size:coverにより
	   通常時はセクション全高を画像が覆うため、実運用でこの色が見えることはない。 */
	background-color: #817772;
}

/* セクション全体を1枚のcolum-world.webpで覆う。coverにより上端から下端まで画像が途切れず
   連続して見える（ユーザー指示セクション1）。 */
.libre-blog__world {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* background-imageの実URLはfront-page.php側のインラインstyleで指定（既存の仕組みを維持）。 */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* BLOGセクション全体に重ねる、統一された薄いoverlayはこの1枚のみ（ユーザー指示セクション3・12：
   場所によって濃度を変えない、記事wrapperやREAD ALL wrapperごとに個別のoverlayを作らない）。
   2026-09-16追記（「BLOGセクション修正指示書」セクション3）：rgba(248,246,240,.68)は
   column-world.webpの青・金・本棚・床・空・建築が視認できないほど白く飛んでしまっていたため、
   可読性確保のための最小限（.12）まで弱める。 */
.libre-blog__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255,255,255,.12);
	pointer-events: none;
}

/* BLOG最下部→CONTACTへの受け渡しのみ、最後100〜140pxだけ自然にfadeさせる
   （ユーザー指示セクション10。これ以外の場所でoverlay濃度を切り替えない）。 */
.libre-blog__blend--bottom {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	height: clamp(100px,10vw,140px);
	background: linear-gradient(to bottom, transparent 0%, #FCFBF7 100%);
	pointer-events: none;
}

/* ユーザー指示（セクション4）：desktop 1440px基準、max-width:1280px、padding-inline:40〜64px。
   画面幅が狭くなっても左右paddingは40px未満にならない（＝余白が不自然に増加しない）。 */
.libre-blog__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(40px,4vw,64px);
}

/* ユーザー指示（2026-09-17）：見出しをWORKSと同じく中央揃えにする。右上のISSUE表記は
   削除したため、eyebrowだけを中央に置くシンプルな構成へ変更。 */
.libre-blog__header {
	max-width: 720px;
	margin: 0 auto clamp(32px,3.5vw,48px);
	text-align: center;
}

.libre-blog__heading {
	position: relative;
}

/* ユーザー指示：文字の背後にある白い枠（矩形の光幕）は使わない。文字そのものへ白いグロウ
   （text-shadow）を重ねて視認性を確保する。
   2026-09-19追記（TOPタイポグラフィ統一 TYPE B）：WORKS（works.cssの.libre-works__eyebrow）
   と「同じシリーズの章タイトル」に見えるよう、weight/letter-spacing/文字色を共通化し、
   サイズもtokens.cssの--libre-gallery-title-sizeへ統一する（旧44px上限→72px。BLOGだけ
   小さく見えていた問題の修正）。 */
.libre-blog__eyebrow {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--libre-gallery-title-size);
	letter-spacing: .16em;
	color: var(--libre-color-navy);
	text-shadow:
		0 1px 3px rgba(255,255,255,.9),
		0 2px 10px rgba(255,255,255,.65),
		0 0 22px rgba(255,255,255,.55);
}

/* ============================== FEATURED ARTICLE ==============================
   ユーザー指示（セクション6・7）：最新/PICK UP記事を1件大きく表示。「カード一覧」ではなく
   Editorial的な見せ方にするため、box-shadow・強い角丸・不透明な白いカード背景は使わない
   （紙面に記事が配置されている見せ方）。 */
.libre-blog__featured {
	position: relative;
}

.libre-blog__featured > a {
	display: grid;
	grid-template-columns: 1.35fr .8fr;
	min-height: clamp(380px,32vw,480px);
	color: inherit;
	text-decoration: none;
}

/* ユーザー指示（セクション5）：アイキャッチが存在する場合は必ず表示（front-page.php側で
   <img>を出し分け）。存在しない場合のみ、完成デザインに見える灰色矩形を置かず、
   column-world.webpの一部＋薄いoverlayをfallbackにする（<img>が読み込まれればobject-fit:cover
   で完全に覆われるため、このfallbackが実際に見えるのは画像未設定の記事のみ）。 */
.libre-blog__featured-media {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(rgba(248,246,240,.55), rgba(248,246,240,.55)),
		url('../../images/column-world.webp') center / cover no-repeat;
	border: none;
}

.libre-blog__featured-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

/* ユーザー指示（「BLOGセクション修正指示書」セクション6）：不透明な白いカードにしない。
   「図書館の中に置かれた紙面」程度に留める（rgba(250,248,242,.76) + blur(5px)、borderなし）。 */
.libre-blog__featured-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(36px,4vw,64px);
	background: rgba(250,248,242,.76);
	border: none;
	box-shadow: none;
	border-radius: 0;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.libre-blog__meta {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* ユーザー指示（2026-09-17）：カテゴリー・日付をもう少し大きく読みやすくする。 */
.libre-blog__category {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.libre-blog__meta time {
	display: block;
	font-size: 12px;
	letter-spacing: .06em;
	color: rgba(28,36,48,.6);
}

.libre-blog__featured-title {
	margin: 18px 0 0;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(26px,2.4vw,40px);
	line-height: 1.45;
	letter-spacing: -.005em;
	color: #16233a;
	/* 最大2〜3行に収め、記事タイトルが極端に長い場合でもFeatured全体の高さが暴れないようにする */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.libre-blog__featured-excerpt {
	margin: 18px 0 0;
	max-width: 46em;
	font-size: 15px;
	line-height: 1.8;
	color: #5b6066;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.libre-blog__read {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
	font-size: 13px;
	letter-spacing: .08em;
	color: #0c5a86;
}

.libre-blog__read span {
	transition: transform .3s ease;
}

@media (hover:hover) and (pointer:fine) {
	.libre-blog__featured:hover .libre-blog__featured-media img {
		transform: scale(1.025);
	}

	.libre-blog__featured:hover .libre-blog__featured-title {
		color: var(--color-accent);
	}

	.libre-blog__featured:hover .libre-blog__read span {
		transform: translateX(5px);
	}
}

/* ============================== SUB ARTICLES CAROUSEL ==============================
   ユーザー指示（「BLOGセクション修正指示書」セクション8〜17）：下段記事一覧を静的3カラム
   グリッドから2枚表示カルーセルへ変更。記事間の縦線（border-left）・カードのborder・
   box-shadowは完全撤去し、カードは常にtransparent。Swiper等の新規ライブラリは追加せず、
   既存GSAPでtranslateXアニメーションのみを行う軽量実装（front-page.js: setupBlogCarousel()）。
   スライド1枚あたりの幅はここではbreakpointごとの目安（flex-basis）のみを与え、実際の
   ページング幅はJS側でgetBoundingClientRect()により実測する（pxのハードコード無し）。 */
.libre-blog__carousel {
	position: relative;
	margin-top: clamp(48px,5vw,64px);
}

.libre-blog__carousel-viewport {
	overflow: hidden;
}

.libre-blog__carousel-track {
	display: flex;
	gap: clamp(32px,3vw,40px);
	cursor: grab;
	touch-action: pan-y;
	/* GSAP未読み込み時のみ効く素のCSS transitionフォールバック。GSAP使用時はJS側の
	   gsap.to()がtransformを直接アニメーションするため、このtransitionは実質発火しない。 */
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

.libre-blog__carousel.is-dragging .libre-blog__carousel-track {
	cursor: grabbing;
	transition: none;
}

.libre-blog__sub-article {
	position: relative;
	flex: 0 0 calc((100% - 80px) / 3);
	min-width: 0;
}

.libre-blog__sub-article > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ユーザー指示（セクション6・11）：下の記事は白いカード背景を使わない。画像が無い場合も、
   完成デザインに見える不透明な灰色矩形にはせず、背後のBLOG世界観背景がうっすら透けて見える
   半透明washのみにする（<img>があればobject-fit:coverで完全に覆われる）。 */
.libre-blog__sub-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: rgba(248,246,240,.45);
	border: none;
}

.libre-blog__sub-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
	-webkit-user-drag: none;
	user-select: none;
}

/* ユーザー指示（2026-09-17）：下段カルーセル記事のタイトル・導入文が背景（column-world.webp）に
   埋もれて見にくいため、FEATURED（.libre-blog__featured-content）と同じ白系の半透明背景＋
   blurを使ってよい、との指示に従い適用する。 */
.libre-blog__sub-content {
	padding: clamp(20px,2vw,28px);
	background: rgba(250,248,242,.76);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* ユーザー指示（2026-09-17）：下段カルーセル記事のタイトル・導入文・READをもう少し大きく
   見やすくする。 */
.libre-blog__sub-title {
	margin: 14px 0 0;
	font-weight: 600;
	font-size: 21px;
	line-height: 1.5;
	letter-spacing: -.005em;
	color: #16233a;
	text-shadow: 0 1px 8px rgba(255,255,255,.5);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.libre-blog__sub-excerpt {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.8;
	color: #43494f;
	text-shadow: 0 1px 8px rgba(255,255,255,.5);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.libre-blog__sub-article .libre-blog__read {
	margin-top: 14px;
	font-size: 13px;
}

@media (hover:hover) and (pointer:fine) {
	.libre-blog__sub-article:hover .libre-blog__sub-media img {
		transform: scale(1.025);
	}

	.libre-blog__sub-article:hover .libre-blog__sub-title {
		color: var(--color-accent);
	}

	.libre-blog__sub-article:hover .libre-blog__read span {
		transform: translateX(5px);
	}
}

.libre-blog__carousel.is-dragging .libre-blog__sub-article > a {
	pointer-events: none;
}

/* ユーザー指示（セクション12・13）：左右ナビゲーション。円形、上品に（WORKSのようなゲーム風
   演出にはしない）。JS側でページングが不要な場合（スライドが表示件数以下）は.is-hiddenを付与
   して非表示にする。 */
.libre-blog__carousel-arrow {
	position: absolute;
	top: 32%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	background: rgba(250,248,242,.78);
	border: 1px solid rgba(16,42,67,.28);
	color: #102A43;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.libre-blog__carousel-arrow span {
	display: block;
	transition: transform .3s ease;
}

.libre-blog__carousel-arrow--prev {
	left: -60px;
}

.libre-blog__carousel-arrow--next {
	right: -60px;
}

.libre-blog__carousel-arrow[disabled] {
	opacity: .35;
	pointer-events: none;
}

.libre-blog__carousel-arrow.is-hidden {
	display: none;
}

@media (hover:hover) and (pointer:fine) {
	.libre-blog__carousel-arrow:not([disabled]):hover {
		transform: scale(1.07);
		background: rgba(255,255,255,.94);
		box-shadow: 0 0 20px rgba(60,170,220,.20);
	}

	.libre-blog__carousel-arrow--prev:not([disabled]):hover span {
		transform: translateX(-3px);
	}

	.libre-blog__carousel-arrow--next:not([disabled]):hover span {
		transform: translateX(3px);
	}
}

/* ユーザー指示（セクション17）：小さなpagination。BLOGの雰囲気を壊さない。 */
.libre-blog__carousel-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: clamp(28px,3vw,36px);
}

.libre-blog__carousel-pagination.is-hidden {
	display: none;
}

.libre-blog__carousel-dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(16,42,67,.22);
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
}

.libre-blog__carousel-dot.is-active {
	background: #0B6F92;
	transform: scale(1.25);
}

/* ============================== READ ALL ==============================
   ユーザー指示（セクション12）：position:absolute禁止。記事一覧の下、右揃えで配置。
   ゲームボタン化しない（下線＋矢印のみ）。 */
.libre-blog__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 48px;
}

.libre-blog__read-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
	padding-bottom: 3px;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: .10em;
	border-bottom: 1px solid rgba(16,42,67,.4);
}

@media (max-width: 767px) {
	.libre-blog__footer {
		justify-content: center;
		margin-top: 36px;
	}

	.libre-blog__read-all {
		justify-content: space-between;
		width: min(100%, 300px);
		min-height: 52px;
		padding: 0 22px;
		box-sizing: border-box;
		border: 1px solid rgba(16,42,67,.55);
		border-radius: 999px;
		background: rgba(255,255,255,.9);
		color: #102a43;
		font-weight: 600;
		box-shadow: 0 8px 24px rgba(16,42,67,.1);
	}
}

.libre-blog__read-all i {
	font-style: normal;
	font-size: 16px;
	transition: transform .3s ease;
}

@media (hover:hover) and (pointer:fine) {
	.libre-blog__read-all:hover {
		border-color: var(--color-accent);
	}

	.libre-blog__read-all:hover i {
		transform: translateX(6px);
	}
}

/* ユーザー指示（セクション12：「ただしviewportからはみ出さない」）：矢印を外側(-60px)に置くには
   .libre-blog__inner（max-width:1280px）の外側に十分な余白が要る。実測すると、viewport幅が
   おおよそ1300px以下ではouter margin＋padding-inlineの合計が60pxに届かず、矢印が画面外へ
   はみ出してしまうため、1300px未満は常にカルーセル内側（8px）へ矢印を寄せる。 */
@media (max-width:1299px) {
	.libre-blog__carousel-arrow--prev {
		left: 8px;
	}

	.libre-blog__carousel-arrow--next {
		right: 8px;
	}
}

/* =========================================================
   TABLET（768〜1024px）
   ユーザー指示（「BLOGセクション修正指示書」セクション19）：次の記事が少し見えることで
   「横へスライドできる」ことが視覚的に伝わるよう、1スライドあたりの幅を約1.6件分にする。
========================================================= */

@media (max-width:1024px) {
	.libre-blog__featured > a {
		grid-template-columns: 55% 45%;
		min-height: 0;
		height: auto;
	}

	.libre-blog__featured-media {
		min-height: 320px;
	}

	.libre-blog__featured-title {
		font-size: clamp(24px,3vw,32px);
	}

	.libre-blog__sub-article {
		flex-basis: calc((100% - 32px) / 2);
	}

	.libre-blog__carousel-arrow {
		width: 44px;
		height: 44px;
		font-size: 16px;
	}
}

/* =========================================================
   MOBILE（〜767px）
   ユーザー指示（セクション17）：画面幅が小さくなるほどセクション下の余白が大きくなる現象を
   完全に解消する。viewport heightに依存させず、余白は固定値で管理する。
========================================================= */

@media (max-width:767px) {
	.libre-blog {
		padding: 72px 20px;
	}

	.libre-blog__inner {
		padding-inline: 0;
	}

	.libre-blog__featured > a {
		display: block;
	}

	.libre-blog__featured-media {
		aspect-ratio: 16 / 10;
	}

	.libre-blog__featured-content {
		padding: 28px 0 16px;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.libre-blog__featured-title {
		font-size: clamp(26px,7vw,30px);
	}

	.libre-blog__carousel {
		margin-top: 40px;
	}

	.libre-blog__carousel-track {
		gap: 20px;
	}

	.libre-blog__sub-article {
		flex-basis: 100%;
	}

	.libre-blog__carousel-arrow {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.libre-blog__carousel-arrow--prev {
		left: 4px;
	}

	.libre-blog__carousel-arrow--next {
		right: 4px;
	}

	.libre-blog__footer {
		margin-top: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.libre-blog__featured-media img,
	.libre-blog__sub-media img,
	.libre-blog__read span,
	.libre-blog__read-all i,
	.libre-blog__carousel-arrow,
	.libre-blog__carousel-arrow span,
	.libre-blog__carousel-dot,
	.libre-blog__carousel-track {
		transition: none;
	}
}

/* =========================================================
   LIBRE CONTACT（2026-09-16、「TOPページCONTACTセクション 新規デザイン指示書」）
   ユーザー指示：LIBRE WORLDの物語の終端＝「図書館の最奥にある扉から次の世界へ」。
   contact-world.webp（中央の巨大な扉、王都の空、左右の本棚・旗・螺旋階段、扉へ向かう
   青い鳥）を世界観の主役にする。旧.contact06trace/reference-reproduction実装（LET'S TALK.を
   巨大メイン文字として使用、右に手描き扉イラスト＋別レイヤーの鳥画像）は全面撤去。
   背景は豪華・UIはシンプル・CTAは明確、という役割分担を守る（宝石・魔法陣・極太金枠・
   RPGボタン・大量の発光などのゲームUIは追加しない）。
========================================================= */

/* ユーザー指示（2026-09-17、「CONTACTセクション最終ブラッシュアップ実装指示書」セクション3）：
   100svh固定（常にビューポート全高）から、背景世界を十分見せつつも間延びしない高さへ変更。
   1440px幅で約800〜860px程度になるよう、min-height/heightの両方を指定する。 */
.libre-contact {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	width: 100%;
	min-height: 800px;
	height: min(900px, 100vh);
	color: #102d4b;
	/* contact-world.webp下端（大理石の床）の実測に近い暖色。画像読み込み前/失敗時のフォールバック。 */
	background-color: #cdd0c8;
}

/* 背景レイヤーをテキスト・CTAとは分離する。JS側の入場スケール（1.025→1）とごく弱い
   パララックス（最大20〜30px）をこのレイヤーだけへ適用するため（.libre-contactごと動かすと
   文字・CTA・transition-lightまで一緒に動いてしまう）。 */
.libre-contact__world {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* ユーザー指示（doc第10項）：背景を暗くする全面オーバーレイは禁止。明るい図書館・扉を維持。 */
.libre-contact__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255,255,255,.06);
	pointer-events: none;
}

/* ============================== ATMOSPHERIC LIGHT ==============================
   ユーザー指示（2026-09-17、「LIBRE実装指示書」完成見本の再現指示）：contact-world.webpを
   複製してfilterで加工する「local-light-layer」方式を廃止した。「背景を明るく加工する」の
   ではなく「背景の上に巨大で非常に柔らかい光・霞を追加する」表現へ変更する。完成見本では
   左下から中央左にかけて「室内へ差し込む暖かい光＋空気中の霞」があるため、暖色
   （#FFFAEB系）の巨大なradial-gradient＋blurを左下に配置する。矩形gradient・白パネル・
   backdrop-filterは使用しない。 */
.libre-contact__ambient-light {
	position: absolute;
	left: -10%;
	bottom: -12%;
	width: 68%;
	/* ユーザー指示（2026-09-17、数値調整指示 セクション7）：CONTACT/見出し/本文/ボタンの
	   文字ブロック全体を最低120〜180px上回る範囲まで光が広がるよう、88%→92%へ拡張
	   （実測で上側マージンが118px→やや不足していたため）。 */
	height: 92%;
	z-index: 1;
	pointer-events: none;
	/* 2026-09-17再指示：「CONTACT／見出し（次の景色を、一緒につくりませんか。）／下の文字
	   （説明文・ボタン）が見にくい」。実際のcontact-world.webpをCanvasへ描画し、eyebrow/
	   catch/description/buttonの4要素を実測した結果、旧設定（中心32%,60%・半径36%,46%・
	   peak alpha .78）ではdescription/buttonは十分だったが、光の中心が下寄りすぎてeyebrow
	   （実測コントラスト比3.99）・catch（4.25）に光がほぼ届いていなかった（alpha 0〜.04）。
	   中心を上へ（35%,38%）、半径を拡大（45%,58%）、ピーク強度を.78→.85へ引き上げ、
	   4要素すべての実測最低コントラスト比が6.11（旧は3.99）まで改善することを確認した。 */
	background: radial-gradient(ellipse 45% 58% at 35% 38%,
		rgba(255,250,235,.85) 0%,
		rgba(255,250,235,.63) 25%,
		rgba(255,250,235,.33) 48%,
		rgba(255,250,235,.11) 68%,
		rgba(255,250,235,0) 84%);
	filter: blur(32px);
}

/* COLUMN（大図書館）→CONTACT（同じ図書館の最奥）の継ぎ目。完全に別の世界へ切り替わった
   ように見せず「少し光量が上がる」程度の表現にとどめる（doc第22項）。 */
.libre-contact__blend {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1;
	height: clamp(60px,10vh,140px);
	background: linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}

/* ユーザー指示（2026-09-17、扉位置ズレ修正）：left:50%/top:42%は絵の中の実際の扉（開いた
   扉の隙間から空が見えている部分）よりも左寄りだった。contact-world.webpをCanvasへ描画し、
   上部65%範囲の列ごとの輝度を実測して最も明るい帯（x=1028〜1268px、1624px中）を扉の隙間と
   特定。background-size:coverのスケール／オフセット計算式で1920/1440/1280/1024幅における
   実際の画面上の位置を算出した結果、中心はleft 70.7〜74.4%・top 27.5〜32.3%で推移していた
   （1920px幅では扉上端が画面外へクロップされる関係で中心が上寄りになる）。中間値の
   left:72%・top:30%へ変更する。 */
.libre-contact__door-glow {
	position: absolute;
	left: 72%;
	top: 30%;
	z-index: 1;
	width: 30vw;
	height: 70%;
	transform: translate(-50%,-50%);
	background: radial-gradient(ellipse at center,
		rgba(255,255,255,.20) 0%,
		rgba(210,240,255,.08) 35%,
		rgba(255,255,255,0) 72%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease;
}

.libre-contact:has(.libre-contact__button:hover) .libre-contact__door-glow,
.libre-contact:has(.libre-contact__button:focus-visible) .libre-contact__door-glow {
	opacity: 1;
}

/* ============================== 微演出＋扉遷移（2026-09-16） ==============================
   ユーザー指示：「派手なゲーム演出」ではなく「気づくか気づかないか程度の上質な演出」。
   contact-world.webp自体は静止画として扱い、ここに追加するのは(1)ごく小さい光の粒子2〜4個、
   (2)青い鳥の後方に重ねる非常に薄い光の軌跡、(3)クリック時だけ扉中心が少し強く光る演出のみ。
   z-indexは指示書セクション26に準拠：background(world)=0 / ambient particles=1 /
   door light=2 / content=3。 */

.libre-contact__ambient {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* ごく小さい青白い光の粒子。2〜4px、opacity 0〜.45、blur 2〜5px、移動距離20〜50px、
   4〜8秒でランダムに漂う（セクション7）。「particle effect」と分かるほど増やさない。 */
.libre-contact__particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(120,210,255,.9);
	filter: blur(3px);
	opacity: 0;
	animation: libreContactDrift 6s ease-in-out infinite;
}

.libre-contact__particle:nth-child(1) {
	left: 22%;
	top: 30%;
	width: 3px;
	height: 3px;
	--drift-x: 24px;
	--drift-y: -30px;
	animation-duration: 6.5s;
	animation-delay: 0s;
}

.libre-contact__particle:nth-child(2) {
	left: 68%;
	top: 22%;
	width: 2px;
	height: 2px;
	--drift-x: -20px;
	--drift-y: 26px;
	animation-duration: 7.5s;
	animation-delay: 1.4s;
}

.libre-contact__particle:nth-child(3) {
	left: 38%;
	top: 58%;
	width: 4px;
	height: 4px;
	--drift-x: 30px;
	--drift-y: 18px;
	animation-duration: 8s;
	animation-delay: 2.8s;
}

.libre-contact__particle:nth-child(4) {
	left: 78%;
	top: 48%;
	width: 3px;
	height: 3px;
	--drift-x: -26px;
	--drift-y: -20px;
	animation-duration: 5.5s;
	animation-delay: 4s;
}

@keyframes libreContactDrift {
	0% { opacity: 0; transform: translate(0,0); }
	15% { opacity: .45; }
	50% { opacity: .25; transform: translate(calc(var(--drift-x) * .5), calc(var(--drift-y) * .5)); }
	85% { opacity: .4; }
	100% { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)); }
}

/* 青い鳥（contact-world.webp内、扉の手前・彫像の右上あたり）の後方へ重ねる非常に薄い光の
   軌跡（セクション8）。鳥そのものは切り抜いて動かさず、近くにごく弱いglowを置くだけに
   とどめる。background-size:coverは画面幅によって左右のトリミング量が変わるため、鳥の実測
   位置（元画像1672×941中、約42%,47%）を基準に、トリミングが大きくなるモバイルほど中央へ
   寄せたleft値をbreakpointごとに指定する（top位置は高さ方向がほぼトリミングされないため
   共通）。 */
.libre-contact__bird-trail {
	position: absolute;
	left: 42%;
	top: 47%;
	width: 110px;
	height: 40px;
	transform: translate(-50%,-50%) rotate(-10deg);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(60,190,255,.25), transparent 72%);
	filter: blur(9px);
	opacity: .15;
	animation: libreContactBirdTrail 4s ease-in-out infinite;
}

@keyframes libreContactBirdTrail {
	0%, 100% { opacity: .15; }
	50% { opacity: .35; }
}

/* クリック時だけ扉中央から強くなる光（セクション16）。画像そのものは加工せず、専用overlayで
   表現する。通常時はopacity:0で完全に不可視。 */
/* ユーザー指示（2026-09-17、扉位置ズレ修正）：door-glowと同じ理由で、実際の扉の隙間の位置
   （実測left 70.7〜74.4%・top 27.5〜32.3%）へ合わせる。 */
.libre-contact__door-light {
	position: absolute;
	left: 72%;
	top: 30%;
	z-index: 2;
	width: 20vw;
	height: 55vh;
	max-width: 380px;
	transform: translate(-50%,-50%) scale(1);
	background: radial-gradient(ellipse,
		rgba(255,255,255,.72) 0%,
		rgba(235,248,255,.34) 32%,
		rgba(255,255,255,0) 72%);
	filter: blur(12px);
	opacity: 0;
	pointer-events: none;
}

/* ユーザー指示（doc第20項）：旧CONTACT案のLET'S TALK.タイポをアクセントとして復活。
   ただし主役にはせず、画面の空いている場所へごく薄く（opacity .035〜.07）背景装飾として
   配置する。CONTACTコピーより目立たせない。 */
.libre-contact__bigtype {
	position: absolute;
	right: clamp(16px,4vw,64px);
	bottom: clamp(8px,2vh,32px);
	z-index: 1;
	margin: 0;
	font-family: Impact,"Arial Narrow","Arial Black",sans-serif;
	font-size: clamp(88px,11vw,196px);
	font-weight: 900;
	line-height: .82;
	letter-spacing: -.04em;
	color: #0a1f38;
	opacity: .05;
	pointer-events: none;
	user-select: none;
	text-align: right;
	white-space: nowrap;
}

.libre-contact__bigtype span {
	display: block;
}

/* ユーザー指示（2026-09-17、「SERVICE/CONTACTテキスト可読性改善（新contact-world.webp対応）」）：
   本棚・旗・本などの装飾と文字が重ならない、左下〜中央左の自然光が広がるエリアへ縦中央寄せで
   配置する（bottom固定から縦センタリングへ変更）。画面中央の巨大な扉には文字を置かない。 */
.libre-contact__content {
	position: absolute;
	/* ユーザー指示（2026-09-17、数値調整指示 セクション5・6）：見出し右側がsection外へ
	   はみ出していたため幅を600px→720pxへ拡張。位置は左clamp(70px,7.5vw,145px)・上58%へ
	   微調整（本棚・本の少ない左下の柔らかい光の領域に収まるよう再確認済み）。 */
	left: clamp(70px, 7.5vw, 145px);
	top: 58%;
	transform: translateY(-50%);
	width: min(720px, 72vw);
	max-width: 720px;
	/* .libre-contact__inner撤去に伴い、z-indexはcontent自身で持つ（TEXT z-index 3）。 */
	z-index: 3;
}

/* ユーザー指示（2026-09-17、「LIBRE実装指示書」完成見本の再現指示）：完成見本と同程度まで
   小さくする（約22〜26px）。
   2026-09-19追記（TOPタイポグラフィ統一 TYPE C）：CONTACTはABOUT/SERVICEにもWORKS/BLOGにも
   完全統一しない独立したCTA。英字はセリフ体を維持しつつ、サイト最後のフィナーレとして
   少し存在感を持たせる（22-26px→24-40px）。文字色は他セクションと共通の濃紺トークンへ。 */
.libre-contact__eyebrow {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 40px);
	letter-spacing: .16em;
	color: var(--libre-color-navy);
}

.libre-contact__eyebrow-line {
	display: block;
	width: clamp(50px, 5vw, 70px);
	height: 1px;
	margin-top: 12px;
	background: rgba(16,42,67,.55);
}

/* ユーザー指示（セクション6）：「次の景色を、／一緒につくりませんか。」を必ずこの位置で
   改行させる（nl2br()）。フォントサイズ上限は実測（Canvas measureText）に基づき、
   .libre-contact__content の max-width:600px内に確実に収まる値へ調整している。 */
/* 2026-09-17再検証：56px上限は狭い画面のみで検証されており、実際は1663px以上の広い
   デスクトップ幅（vw*3.2%が56px上限へ到達した後もmax-width:600pxは変わらないため、
   フォントだけが上限まで伸びきる帯）で「一緒につくりませんか。」がcontainer幅を超え、
   3行目へ折り返っていた（NG7）。Canvas measureTextで768〜1920px全域を再実測し、
   overflowが発生しない安全な上限＝52pxへ変更（768〜1920px、overflowCount:0を確認済み）。 */
/* 2026-09-19追記（TOPタイポグラフィ統一 TYPE C）：ABOUT/SERVICEと同じ明朝系フォント
   ファミリーのまま、CTAらしく少し大きく。指示書の目安clamp(42px,4vw,70px)をそのまま
   適用すると、.libre-contact__content（width:min(720px,72vw)）内で「一緒につくりませんか。」
   がCanvas measureTextの実測で1650px以上のデスクトップ幅においてコンテナ幅を超え、
   意図した2行を超えて3行目へ折り返ることを確認したため、実測で安全な上限（60px、
   1025〜2400px全域でmargin 51px以上を確認）まで抑えている。tablet(@1024px)・
   mobile(@767px)側の改行位置を守るための個別clamp（下部メディアクエリ）は既存の実測済み
   安全値のため、このデスクトップ専用の変更では触らない。 */
.libre-contact__catch {
	margin: 12px 0 0;
	max-width: 100%;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(40px, 3.2vw, 60px);
	line-height: 1.42;
	letter-spacing: .015em;
	color: var(--libre-color-navy);
	/* ユーザー指示（2026-09-17、「LIBRE実装指示書」完成見本の再現指示）：強いtext-shadowは
	   使用しない。コントラストはATMOSPHERIC LIGHT（.libre-contact__ambient-light）で作る。 */
	text-shadow: 0 1px 1px rgba(255,255,255,.18), 0 1px 8px rgba(255,255,255,.10);
}

/* ユーザー指示（2026-09-17、数値調整指示 セクション8）：本文の可読性を文字色統一＋
   ごく弱いtext-shadowで補強する。 */
.libre-contact__description {
	margin: clamp(20px,2.2vw,26px) 0 0;
	max-width: 520px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(15px,1vw,17px);
	line-height: 1.9;
	letter-spacing: .04em;
	color: #082d4a;
	text-shadow: 0 1px 1px rgba(255,255,255,.55), 0 0 5px rgba(255,255,255,.16);
}

/* ユーザー指示（セクション9〜11）：ゲームボタンにしない。白系背景＋濃紺文字＋丸型ピル。
   矢印を右端へ寄せるためjustify-content:space-betweenにし、幅も固定値化する。 */
.libre-contact__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* ユーザー指示（2026-09-17、数値調整指示 セクション9）：完成見本よりまだ少し大きく
	   見えたため260×60px程度へ再縮小。見出し＞本文＞ボタンの順に視線が流れるよう、
	   ボタンを主役にしない。 */
	width: clamp(290px,18vw,320px);
	height: clamp(54px,5.5vh,60px);
	margin-top: clamp(28px,3vw,36px);
	padding: 0 clamp(28px,2.4vw,32px);
	border: 1px solid rgba(16,42,67,.35);
	border-radius: 999px;
	background: rgba(255,255,255,.90);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #102A43;
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(14px,.95vw,15px);
	letter-spacing: .10em;
	white-space: nowrap;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s cubic-bezier(.22,.61,.36,1), background-color .4s cubic-bezier(.22,.61,.36,1), border-color .4s cubic-bezier(.22,.61,.36,1);
}

.libre-contact__button--line {
	margin-top: 12px;
	border-color: rgba(35, 150, 92, .45);
	color: #167548;
}

.libre-contact__button-arrow {
	opacity: .8;
	transition: transform .35s ease, opacity .35s ease;
}

/* 微演出＋扉遷移指示書セクション12：hover時だけ1本走る非常に薄いshine。常時ループ禁止。 */
.libre-contact__button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
	transform: translateX(-150%);
	pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
	.libre-contact__button:hover,
	.libre-contact__button:focus-visible {
		transform: translateY(-2px);
		background: rgba(255,255,255,.96);
		border-color: rgba(45,170,220,.65);
		box-shadow: 0 0 0 1px rgba(80,190,230,.12), 0 0 24px rgba(60,180,230,.22), 0 8px 30px rgba(16,42,67,.10);
	}

	.libre-contact__button--line:hover,
	.libre-contact__button--line:focus-visible {
		background: rgba(238, 255, 246, .96);
		border-color: rgba(35, 150, 92, .75);
		box-shadow: 0 0 0 1px rgba(35, 150, 92, .12), 0 0 24px rgba(35, 180, 110, .22), 0 8px 30px rgba(16, 80, 45, .10);
	}

	.libre-contact__button:hover .libre-contact__button-arrow,
	.libre-contact__button:focus-visible .libre-contact__button-arrow {
		transform: translateX(5px);
		opacity: 1;
	}

	.libre-contact__button:hover::before,
	.libre-contact__button:focus-visible::before {
		transition: transform .8s ease;
		transform: translateX(350%);
	}
}

.libre-contact__button:focus-visible {
	outline: 2px solid rgba(22,119,168,.7);
	outline-offset: 4px;
}

/* ユーザー指示（セクション17・18）：クリック後、扉の光が強まってから画面全体を白でつなぎ
   CONTACT固定ページへ遷移する（合計800ms以内）。.libre-contactにtransformを与えていない
   ため、fixedはビューポート基準のまま機能する。 */
.libre-contact__transition-light {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
	.libre-contact {
		min-height: 680px;
	}

	.libre-contact__content {
		max-width: min(560px, 60vw);
	}

	/* Canvas measureTextで実測：コンテナ幅560pxに対し「一緒につくりませんか。」は
	   48px付近が上限（50px以上で3行目へ折り返す）。改行位置を必ず守るため上限を46pxへ。 */
	.libre-contact__catch {
		font-size: clamp(30px,4.6vw,46px);
	}

	.libre-contact__bigtype {
		font-size: clamp(64px,14vw,120px);
		opacity: .045;
	}

	.libre-contact__bird-trail {
		left: 33%;
	}
}

/* =========================================================
   MOBILE
   ユーザー指示（doc第24項）：PC構図をそのまま縮小しない。中央の扉が見えることを最優先し、
   左右の本棚・旗が多少切れるのは許容。文字はCONTACT→メインコピー→説明→CTAの順で
   中央配置でもよい。
========================================================= */

@media (max-width: 767px) {
	/* ユーザー指示（セクション3・22）：Mobileはheight:autoにしてコンテンツ量で高さを決め、
	   PCの絶対配置（left/bottom）ではなくCONTACT→コピー→説明→CTA→servicesの縦積み・
	   中央配置に戻す。左右paddingは24px。 */
	.libre-contact {
		min-height: 720px;
		height: auto;
	}

	.libre-contact__world {
		background-position: center center;
	}

	/* .libre-contact__inner撤去に伴い、Mobile中央寄せflexは.libre-contact自体へ付与する
	   （position:absoluteの背景/光レイヤーは通常フローから外れるため影響を受けない）。 */
	.libre-contact {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: clamp(132px,18vh,170px) 24px clamp(42px,7vh,64px);
		box-sizing: border-box;
	}

	/* ユーザー指示（2026-09-19、TOPタイポグラフィ統一の確認中に発見・修正）：.libre-contactが
	   flex-direction:column／align-items:centerのため、widthを明示していないflex item
	   （.libre-contact__content）はストレッチされず「内容に合わせて縮む」サイズになり、
	   実測で利用可能幅342px前後に対し281px程度まで縮んでいた。この状態だと「一緒に
	   つくりませんか。」が本来収まるはずの幅の中で途中から3行目（「か。」だけ）へ
	   折り返ってしまう。width:100%を明示し、align-items:centerのまま横幅だけは
	   親の利用可能幅いっぱいまで使うようにして解消した（テキスト自体はtext-align:centerの
	   ため見た目は変わらない）。 */
	.libre-contact__content {
		position: static;
		width: 100%;
		max-width: 100%;
		text-align: center;
		z-index: auto;
		transform: none;
	}

	.libre-contact__eyebrow {
		font-weight: 500;
		color: #082d4a;
		text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.75);
	}

	/* ユーザー指示（セクション15の考え方を踏襲）：光の位置は文字位置に追従。Mobileはコンテンツが
	   中央揃え・縦積みになるため、ATMOSPHERIC LIGHTも中央寄り・より広い楕円へ切り替える。 */
	.libre-contact__ambient-light {
		left: -20%;
		bottom: -8%;
		width: 140%;
		height: 70%;
		background: radial-gradient(ellipse 57% 51% at 50% 55%,
			rgba(255,250,235,.75) 0%,
			rgba(255,250,235,.52) 28%,
			rgba(255,250,235,.26) 50%,
			rgba(255,250,235,.08) 70%,
			rgba(255,250,235,0) 86%);
	}

	.libre-contact__eyebrow-line {
		margin-inline: auto;
	}

	/* ユーザー指示のclamp(34px,9vw,48px)だと、新しいコピー「一緒につくりませんか。」
	   （11文字）がMobile幅（320〜430px）でmax-width:100%のコンテナに収まらず、意図した
	   2行（「次の景色を、／一緒につくりませんか。」）を超えて3行目へ折り返してしまうことを
	   Canvas measureTextで実測確認した。改行位置を必ず守る指示を優先し、上限を26pxへ調整する。 */
	/* 2026-09-17再検証：下限22pxもさらに極端に狭い幅（300〜320px、iPhone SE(第1世代)等）で
	   font-sizeが22pxの床に張り付いたままコンテナ幅（.libre-contact__inner の92vw基準、
	   24px固定paddingを差し引いた実効幅）を追い越しオーバーフローすることをCanvas
	   measureTextで実測確認。下限を20pxへ引き下げ、300〜767px全域でoverflowCount:0を確認済み。 */
	.libre-contact__catch {
		font-size: clamp(20px,6.5vw,26px);
	}

	.libre-contact__description {
		max-width: 100%;
		margin-inline: auto;
	}

	.libre-contact__button {
		width: 100%;
		max-width: 360px;
		height: 60px;
		margin-inline: auto;
	}

	.libre-contact__bigtype {
		display: none;
	}

	/* 微演出＋扉遷移指示書セクション23：モバイルは粒子を最大2個までにする。 */
	.libre-contact__particle:nth-child(3),
	.libre-contact__particle:nth-child(4) {
		display: none;
	}

	.libre-contact__bird-trail {
		left: 21%;
	}
}

/* 微演出＋扉遷移指示書セクション22：粒子・鳥trail・button shine・扉zoomを停止する。
   クリック時の遷移演出もJS側でスキップし、通常のリンク遷移に委ねる。 */
@media (prefers-reduced-motion: reduce) {
	.libre-contact__door-glow {
		transition: none;
	}

	.libre-contact__button {
		transition: none;
	}

	.libre-contact__button::before {
		display: none;
	}

	/* ユーザー指示（セクション21）：CTA hoverのtransform自体を無効化する（transitionを
	   noneにするだけでは瞬間的にでもtranslateYが適用されてしまうため）。 */
	.libre-contact__button:hover,
	.libre-contact__button:focus-visible {
		transform: none;
	}

	.libre-contact__particle,
	.libre-contact__bird-trail {
		animation: none;
		opacity: 0;
	}
}

/* 2026-09-24 レスポンシブ総点検：スマホ横向き（高さ≈375px）ではFVのmin-height:560pxが画面高を
   超え、キャッチコピーが初期表示の外（y339〜451／画面高375）へ落ちていた。低い横向き画面だけ
   min-height:560pxの下限を外し、FVをビューポート内（100svh）に収める。縦向き・PCは従来のまま。 */
@media (orientation: landscape) and (max-height: 520px) {
	.fv-video {
		min-height: 0;
	}
}

/* 2026-09-24 レスポンシブ総点検：BLOGカルーセルのドット（6px）はスマホで実質タップ不能だった。
   見た目のドットは変えず、::afterの透明なヒット領域を24pxへ広げ、隣のヒット領域と重ならない
   よう間隔を広げる（タッチ端末＝hover:noneのときだけ）。 */
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
	.libre-blog__carousel-pagination { gap: 18px; }
	.libre-blog__carousel-dot { position: relative; }
	.libre-blog__carousel-dot::after { content: ''; position: absolute; inset: -9px; }
}

/* 320px級の端末でもCTA文言を1行で収める。 */
@media (max-width: 340px) {
	.libre-contact__button {
		padding-inline: 20px;
		font-size: 13px;
		letter-spacing: .06em;
	}
}