/**
 * WORKS（2026-09-16、「LIBRE TOPページ / WORKSセクション 最終修正指示書」）。
 *
 * ナラティブ上の位置づけ：FV（天空）→ABOUT（Libreを知る）→SERVICE（5つの力）→
 * WORKS（王都=works-world.webpへ到着し、これまで獲得した実績カードを見る）。SERVICEの
 * 終端色（service-draw.cssの背景フォールバック色 #a5a8a1、雲海のトーン）から自然に受け渡す
 * グラデーション（.libre-works__blend）で継ぎ目を隠す（別ページへ切り替わったような白フェード
 * は使わない）。既存WORKS背景画像（works-world.webp）は変更しない。
 *
 * 背景（.libre-works__world）はテキスト・カードとは別レイヤーに分離している。works.js側の
 * GSAP入場演出（scale/opacity）を背景だけに適用するため（.libre-worksごとtransform: scale()
 * すると文字・カードまで一緒に動いてしまうのを避ける）。
 *
 * 「すべての制作実績を見る」CTAはTOPページには設置しない（doc第0・21項）。WORKS固定ページへの
 * 導線はグローバルヘッダーの「Works」から確保する。CTA関連のHTML/CSS/JS/画像読み込みは存在しない。
 *
 * このファイルの主要な名前空間は .libre-works__*（セクション全体のレイアウト・見出し・
 * フィルター）、.works-slider__*（左右ナビ＋スクロールする実績カード列）、.works-card__*
 * （実績カード本体）の3つ。SERVICE（.service-draw__*）や汎用セレクタ（.cards/.card/.section/img）
 * には一切触れない。
 *
 * works-card-frame.webp / works-nav-prev.webp / works-nav-next.webpは、いずれもプロジェクト
 * ルートのステージング用フォルダ（assets/imeages/）から本テーマのassets/images/へ圧縮コピー
 * 済み（get_template_directory()基準でfile_exists()チェックした上でLIBRE_THEME_URI経由の
 * URLを出力、front-page.php側）。works-card-frame.webpの実寸は1024×1536（2:3）のため、
 * .works-cardのaspect-ratioをこれに合わせている（フレームを歪めて引き伸ばさない）。
 */

.libre-works {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* works-world.webp下端（石畳・地面）に近い色。画像読み込み前/失敗時のフォールバック。 */
	background-color: #c9d3df;
	color: var(--color-ink);
	padding-block: clamp(48px, 8vh, 96px) clamp(64px, 9vh, 104px);
}

.libre-works__world {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transform-origin: center center;
	will-change: transform;
}

/* SERVICE→WORKSの継ぎ目を、SERVICE側の雲海トーンからの縦グラデーションで自然に受け渡す。
   ユーザー指示：巨大な白フェードは禁止＝色はservice-draw.cssの背景フォールバック色に揃える。 */
.libre-works__blend {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1;
	height: clamp(96px, 16vh, 220px);
	background: linear-gradient(to bottom,
		rgba(165, 168, 161, 0.85) 0%,
		rgba(165, 168, 161, 0.4) 45%,
		rgba(165, 168, 161, 0) 100%);
	pointer-events: none;
}

.libre-works__inner {
	position: relative;
	z-index: 2;
}

/* ============================== 見出し ==============================
   ユーザー指示（2026-09-16、最終修正）：「WORKS」は単純な小さいラベルではなく、大きめの
   セリフ系英字。濃紺・白・ごく薄い金・text-shadowを重ね、背景の王都に負けない存在感を
   持たせる（画像化は禁止、HTMLテキストのまま）。 */
.libre-works__header {
	position: relative;
	max-width: 720px;
	margin: 0 auto clamp(18px, 2.6vh, 28px);
	padding: 0 var(--container-pad);
	text-align: center;
}

/* 文字の可読性確保のための柔らかい光。四角い白幕・ハードエッジにはしない
   （ユーザー指示の記載どおりの radial-gradient を使用）。 */
.libre-works__header::before {
	content: '';
	position: absolute;
	inset: -20% -40%;
	z-index: -1;
	background: radial-gradient(ellipse at center,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.20) 45%,
		rgba(255, 255, 255, 0) 75%);
	pointer-events: none;
}

/* ユーザー指示（2026-09-19、TOPタイポグラフィ統一 TYPE B）：WORKS/BLOGは「ギャラリーの
   章タイトル」として大型英字セリフ・中央配置を維持しつつ、weight/letter-spacing/文字色を
   BLOG（front-page.cssの.libre-blog__eyebrow）と共通化する。従来weight700で太く見えていた
   ものをweight400へ。サイズはtokens.cssの--libre-gallery-title-sizeへ統一（旧58px上限→72px）。 */
.libre-works__eyebrow {
	margin: 0 0 clamp(8px, 1.2vw, 14px);
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--libre-gallery-title-size);
	letter-spacing: 0.16em;
	color: var(--libre-color-navy);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6),
		0 2px 8px rgba(10, 30, 60, 0.32),
		0 0 20px rgba(255, 226, 150, 0.28);
}

/* ユーザー指示（2026-09-17）：キャッチコピー「つくったのは、未来への入り口。」を削除し、
   説明文をeyebrowの直下に見やすく配置する。キャッチが無くなった分、説明文の存在感を
   少し高める（フォントサイズ・行間・最大幅を調整し、読みやすい一段落として見せる）。
   2026-09-19追記（TOPタイポグラフィ統一）：weight/font-size/line-height/色を補助コピーの
   基本仕様（15〜17px、line-height1.8、weight400、濃紺）へ合わせた。 */
.libre-works__description {
	margin: 0 auto;
	max-width: 46em;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(15px, 0.5vw + 0.8rem, 17px);
	line-height: 1.8;
	color: var(--libre-color-navy);
}

/* ============================== カテゴリーフィルター（ファンタジーRPGの選択プレート） ==============================
   ユーザー指示（2026-09-16、最終修正）：通常のborder-radiusピル型ボタンは禁止。左右端が
   斜めに切れた多角形（clip-path）にする。clip-pathは通常のborderを角に沿って描画できないため、
   一回り大きい「縁」レイヤー（__filter-edge）の上に、一回り小さい「面」レイヤー（__filter-face）を
   重ねる二重clip-path構成で疑似ボーダーを作る（縁の色がボーダーとして見える）。 */
.libre-works__filters {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(6px, 0.9vw, 14px);
	margin: 0 auto clamp(18px, 2.6vh, 28px);
	padding: 0 var(--container-pad);
	max-width: min(96vw, 1760px);
}

.libre-works__filter {
	position: relative;
	display: block;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(11px, 0.8vw, 13px);
	letter-spacing: 0.08em;
	transition: transform 0.25s ease;
}

.libre-works__filter:hover,
.libre-works__filter:focus-visible {
	transform: translateY(-2px);
}

/* 縁（疑似ボーダー）。非選択＝白銀〜薄いゴールド〜薄いブルー、選択＝発光する金属リング。 */
.libre-works__filter-edge {
	position: absolute;
	inset: 0;
	clip-path: polygon(9% 0, 91% 0, 100% 30%, 100% 70%, 91% 100%, 9% 100%, 0 70%, 0 30%);
	background: linear-gradient(180deg, #ffffff 0%, #cfe0f5 35%, #e7d9a6 55%, #ffffff 100%);
	filter: drop-shadow(0 2px 4px rgba(20, 40, 70, 0.15));
}

/* 面（塗り）。縁より一回り小さく、同じ多角形をmarginで内側に寄せることで一定幅の縁を見せる。 */
.libre-works__filter-face {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1.5px;
	padding: clamp(9px, 1vw, 12px) clamp(20px, 2.2vw, 30px);
	clip-path: polygon(9% 0, 91% 0, 100% 30%, 100% 70%, 91% 100%, 9% 100%, 0 70%, 0 30%);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(214, 230, 248, 0.78) 100%);
	color: #16324f;
	overflow: hidden;
}

.libre-works__filter-label {
	position: relative;
	z-index: 1;
}

/* hover：少し明るくなる＋外周にごく弱い青白い発光＋translateY(-2px)（transformはボタン本体側）。 */
.libre-works__filter:hover .libre-works__filter-face,
.libre-works__filter:focus-visible .libre-works__filter-face {
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(224, 238, 252, 0.9) 100%);
}

.libre-works__filter:hover .libre-works__filter-edge,
.libre-works__filter:focus-visible .libre-works__filter-edge {
	filter: drop-shadow(0 0 6px rgba(120, 190, 255, 0.55)) drop-shadow(0 2px 4px rgba(20, 40, 70, 0.15));
}

/* 選択中：中央=深いネイビー、外側=少し明るいブルーのradial/linear-gradient。 */
.libre-works__filter.is-active .libre-works__filter-edge {
	background: linear-gradient(180deg, #e7d9a6 0%, #cfe0f5 40%, #bcd6f7 60%, #e7d9a6 100%);
}

.libre-works__filter.is-active .libre-works__filter-face {
	background:
		radial-gradient(circle at center, #123a72 0%, #0a2050 65%, #06153a 100%);
	color: #eaf6ff;
}

/* 発光は最低3段階（内側=白〜アイスブルー、中間=シアン、外側=ブルーグロー）。clip-pathで
   切り抜いた形状に沿わせるため、box-shadowではなくfilter: drop-shadow()を重ねる。 */
.libre-works__filter.is-active .libre-works__filter-edge {
	filter:
		drop-shadow(0 0 4px rgba(255, 255, 255, 0.9))
		drop-shadow(0 0 8px rgba(60, 200, 255, 0.85))
		drop-shadow(0 0 16px rgba(0, 140, 255, 0.6));
}

/* ユーザー指示（2026-09-16、STEP10）：ALLは「選択されて魔力が宿っている」ように、他の選択中
   カテゴリーよりさらに強い3段階発光（白→シアン→ブルー）にする。 */
.libre-works__filter[data-works-filter="all"].is-active .libre-works__filter-edge {
	filter:
		drop-shadow(0 0 6px rgba(255, 255, 255, 1))
		drop-shadow(0 0 14px rgba(70, 210, 255, 0.95))
		drop-shadow(0 0 26px rgba(0, 140, 255, 0.85))
		drop-shadow(0 0 42px rgba(0, 110, 255, 0.5));
}

/* プレート下中央の光源：小さな横方向の光＋中央の強い光（疑似要素）。 */
.libre-works__filter-glow {
	position: absolute;
	left: 50%;
	bottom: -6%;
	width: 70%;
	height: 46%;
	background: radial-gradient(ellipse at center, rgba(160, 220, 255, 0.85) 0%, rgba(80, 180, 255, 0.35) 45%, transparent 75%);
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.libre-works__filter.is-active .libre-works__filter-glow {
	opacity: 1;
}

.libre-works__filter[data-works-filter="all"].is-active .libre-works__filter-glow {
	width: 90%;
	height: 60%;
	background: radial-gradient(ellipse at center, rgba(200, 235, 255, 0.95) 0%, rgba(90, 190, 255, 0.5) 45%, transparent 78%);
}

/* 選択中のみ：外周発光が約2.5〜3秒でゆっくり呼吸する（100%→115〜120%→100%）。ボタン本体は
   動かさない。点滅（opacityの明滅）ではなく、transform: scale()のみのアニメーションにする
   （transform/opacity中心＝パフォーマンス指示に準拠）。 */
.libre-works__filter.is-active .libre-works__filter-edge::after {
	content: '';
	position: absolute;
	inset: -35%;
	z-index: -1;
	background: radial-gradient(circle, rgba(80, 180, 255, 0.5), transparent 70%);
	filter: blur(6px);
	animation: libre-works-filter-breathe 2.8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes libre-works-filter-breathe {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50%      { transform: scale(1.18); opacity: 1; }
}

/* クリック時に一瞬だけ発光を強めてから、is-activeの通常表示へ戻る（works.js側で.is-flashingを
   一時的に付与/解除）。 */
.libre-works__filter.is-flashing .libre-works__filter-edge {
	animation: libre-works-filter-flash 0.32s ease;
}

@keyframes libre-works-filter-flash {
	0%   { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(60, 200, 255, 0.85)) drop-shadow(0 0 16px rgba(0, 140, 255, 0.6)); }
	45%  { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) drop-shadow(0 0 18px rgba(90, 210, 255, 1)) drop-shadow(0 0 34px rgba(20, 160, 255, 0.9)); }
	100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(60, 200, 255, 0.85)) drop-shadow(0 0 16px rgba(0, 140, 255, 0.6)); }
}

@media (prefers-reduced-motion: reduce) {
	.libre-works__filter.is-active .libre-works__filter-edge::after {
		animation: none;
	}
}

/* ============================== カードスライダー ==============================
   ユーザー指示（2026-09-16、STEP3・4）：nav画像はCSS Gridで「← [5枚] →」の外側に配置する。
   .works-slider = grid(auto minmax(0,1fr) auto)。中央の.works-slider__viewportがスクロール
   コンテナ（overflow-x:auto）、その中の.works-slider__trackが実際に伸び縮みするflex行。
   viewport（＝スクロール量の基準）にdata-works-trackを付与し、works.js側はこの要素の
   scrollWidth/scrollLeftを操作する。 */
.works-slider {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(10px, 1.6vw, 20px);
	max-width: min(94vw, 1760px);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.works-slider__viewport {
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.works-slider__viewport::-webkit-scrollbar {
	display: none;
}

.works-slider__track {
	--works-gap: clamp(10px, 0.9vw, 18px);
	display: flex;
	gap: var(--works-gap);
	margin: 0;
	padding: 4px 0 8px;
	list-style: none;
}

/* 1440px以上＝5枚（既定）。1024〜1439px＝3枚程度／768〜1023px＝2枚程度／767px以下＝1枚
   （下のレスポンシブブロックで上書き）。 */
.works-card {
	position: relative;
	isolation: isolate;
	flex: 0 0 calc((100% - (4 * var(--works-gap))) / 5);
	min-width: 0;
	/* ユーザー指示（2026-09-16、透過フレーム最終版）：「フレームにカードを合わせる」。
	   新しいworks-card-frame.webp（透過版）の実画像比率＝1024×1536＝2:3にカード外形を
	   固定する。.works-card__innerをposition:absoluteでフローから外しているため、中の
	   文章量でこのaspect-ratioが押し崩されることはない（flexアイテムのmin-height:autoが
	   contentのmin-contentサイズを採用してaspect-ratioを上書きしてしまう、というのが
	   以前「カードが巨大化して縦長に伸びる」不具合の実際の原因だった）。 */
	aspect-ratio: 1024 / 1536;
	min-height: 0;
	scroll-snap-align: start;
	list-style: none;
}

/* カテゴリーフィルターで非該当になったカードを隠す（works.js側でトグル）。 */
.works-card.is-filtered-out {
	display: none;
}

/* ============================== 実績カード本体 ==============================
   ユーザー指示（2026-09-16、works-card-frame.webp再差し替え）：4レイヤー構造を厳守する。
     LEVEL 1: 王都背景（.libre-works__world、このファイルの対象外）
     LEVEL 2: カード内部＝.works-card__inner（サムネイル＋文章）— z-index:1
     LEVEL 3: .works-card__frame（最新の透過版works-card-frame.webp）— z-index:20
   .works-card__inner自体には背景色を敷かない（カード外周・フレームの透過部分から王都背景が
   そのまま透けて見える状態を保つ）。白いパネルが必要なのは情報エリアのみのため、背景色は
   .works-card__content側にだけ付与する（STEP16）。
   .works-card__inner はフレームの装飾（金の細線）に絶対に重ならないよう、最新のworks-card-frame.webp
   のalphaチャンネルを実測して算出したSAFE AREAとして配置する（今回の素材は角丸の細い金ライン
   のみで縁の太さが薄く、実測値：top 3.65%・right 5.47%・bottom 3.71%・left 5.47%）。
   ユーザー指示（2026-09-16）：枠線と中身（サムネイル/情報パネル）の間の余白が広すぎたため、
   実測値ぎりぎりまで詰める（従来の5%/7%/5%/7%は安全マージンを取りすぎていた）。
   position:absolute化により、中の文章量が.works-cardのaspect-ratioを押し崩すことも防いでいる。 */
.works-card__inner {
	position: absolute;
	z-index: 1;
	inset: 3.7% 5.5% 3.7% 5.5%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ユーザー指示（STEP2・4）：object-fit: fillは禁止。.works-cardの比率をフレーム実寸に
   一致させた上で、それでも万一ずれがあった場合の保険としてcontainを使う
   （歪み・引き伸ばしを起こさない）。 */
.works-card__frame {
	position: absolute;
	inset: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* ユーザー指示（2026-09-16）：hover時に中身（サムネイル/情報）だけが浮いて、フレームが
   その場に取り残されて見える不具合を修正。translateY(-6〜-8px) scale(1.01〜1.015)は
   .works-card__innerだけでなく.works-card自体（フレーム込みのカード全体）へ適用し、
   枠と中身が1枚のカードとして一緒に浮くようにする。 */
.works-card {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.works-card:hover,
.works-card:focus-within {
	transform: translateY(-7px) scale(1.012);
}

.works-card:hover .works-card__frame,
.works-card:focus-within .works-card__frame {
	filter: drop-shadow(0 0 10px rgba(110, 190, 255, 0.35));
}

.works-card__thumbnail {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, #dfe6ee, #c7d2e0);
}

.works-card__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.works-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

/* カード下部の情報パネル：ここだけアイボリー背景を敷く（STEP6・16）。背景画像に
   文字が埋もれないことを最優先。 */
.works-card__content {
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
	flex-direction: column;
	gap: clamp(3px, 0.4vw, 5px);
	padding: clamp(10px, 0.85vw, 15px) clamp(12px, 1vw, 18px) clamp(12px, 0.9vw, 17px);
	background: rgba(255, 253, 246, 0.94);
	box-sizing: border-box;
}

.works-card__category {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(9px, 0.6vw, 11px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.works-card__title {
	flex-shrink: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(14px, 1vw, 18px);
	line-height: 1.4;
	color: #1c2430;
}

.works-card__description {
	flex-shrink: 0;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(13px, 0.9vw, 16px);
	line-height: 1.6;
	white-space: pre-line;
	color: rgba(28, 36, 48, 0.68);
}

/* ユーザー指示（STEP7）：「詳しく見る」はカード下部へ安定配置。実際のリンク（<a>）は
   このラベルだけだが、::afterでSAFE AREA全体（.works-card__inner）へ引き伸ばし、
   カードのどこをクリックしても遷移する「stretched link」にする（作業指示の
   markup例＝.works-card__innerは非リンクdiv、という構造をそのまま守りつつ、
   実用上はカード全体をクリック可能にするため）。 */
.works-card__detail {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: clamp(3px, 0.5vw, 6px);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(10px, 0.68vw, 12px);
	letter-spacing: 0.06em;
	color: #075e96;
	text-decoration: none;
	transition: color 0.25s ease, text-shadow 0.25s ease;
}

.works-card__detail::after {
	content: '';
	position: absolute;
	inset: 0;
}

.works-card__detail span {
	transition: transform 0.3s ease;
}

/* hover：文字が少し青白く発光（可読性優先、過剰な発光にしない）。 */
.works-card:hover .works-card__detail,
.works-card:focus-within .works-card__detail {
	color: #0c7dc9;
	text-shadow: 0 0 8px rgba(90, 190, 255, 0.45);
}

.works-card:hover .works-card__detail span,
.works-card:focus-within .works-card__detail span {
	transform: translateX(5px);
}

/* ============================== 左右ナビゲーション ==============================
   ユーザー指示（STEP10〜13）：works-nav-prev.webp / works-nav-next.webpを必ず使用し、
   矢印はCSSで別途追加しない（画像そのものに矢印を含む）。カードより前面（z-index:40）、
   背景の裏へ入れない。通常時はごく弱い青い発光のみ（ボタン本体は動かさない）。
   hoverでbrightness(1.2)＋2段階drop-shadow。PREVはtranslateX(-4px) scale(1.08)、
   NEXTはtranslateX(4px) scale(1.08)。クリックでscale(.94)。transition .25〜.3秒。 */
.works-slider__prev,
.works-slider__next {
	position: relative;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(58px, 4.5vw, 84px);
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	filter: drop-shadow(0 0 6px rgba(0, 170, 255, 0.55));
	transition: transform 0.28s ease, filter 0.28s ease;
}

.works-slider__prev img,
.works-slider__next img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.works-slider__prev:hover,
.works-slider__prev:focus-visible,
.works-slider__next:hover,
.works-slider__next:focus-visible {
	filter:
		brightness(1.2)
		drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
		drop-shadow(0 0 20px rgba(0, 150, 255, 0.95));
}

.works-slider__prev:hover,
.works-slider__prev:focus-visible {
	transform: translateX(-4px) scale(1.08);
}

.works-slider__next:hover,
.works-slider__next:focus-visible {
	transform: translateX(4px) scale(1.08);
}

/* クリック時：scale(.94)（works.js側で.is-pressedを一時的に付与）。 */
.works-slider__prev.is-pressed,
.works-slider__next.is-pressed {
	animation: works-nav-press 0.3s ease;
}

@keyframes works-nav-press {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(0.94); }
	100% { transform: scale(1); }
}

/* 素材未着手時のSVG矢印フォールバック（円形・濃紺、works-nav-*.webp未検出時のみ使用）。 */
.works-slider__nav--fallback {
	width: clamp(40px, 3.8vw, 52px);
	height: clamp(40px, 3.8vw, 52px);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #1c4a86 0%, #071a38 72%);
	color: #f5f7fa;
}

.works-slider__nav--fallback svg {
	width: 40%;
	height: 40%;
}

/* ユーザー指示（STEP7）：デザイン確認段階ではナビ素材そのものを消さない。5件以下で
   スライドの必要がない場合も、opacityを少し下げるだけにとどめ、常に視認できる状態を保つ
   （display:none/visibility:hidden/opacity:0による完全非表示は行わない）。 */
.works-slider__prev[disabled],
.works-slider__next[disabled] {
	opacity: 0.55;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.works-slider__prev,
	.works-slider__next {
		transition: none;
	}
}

/* ============================== レスポンシブ ==============================
   ユーザー指示（2026-09-16、最終修正）：1440px以上＝5枚、1024〜1439px＝3枚程度、
   768〜1023px＝2枚程度、767px以下＝1〜1.15枚（横スワイプ対応）。左右ナビは非表示にせず、
   狭い画面でもgrid(auto minmax(0,1fr) auto)によりカードへ被らずに縮小する。 */
@media (max-width: 1439px) {
	.works-card {
		flex-basis: calc((100% - (2 * var(--works-gap))) / 3);
	}
}

@media (max-width: 1023px) {
	.works-card {
		flex-basis: calc((100% - var(--works-gap)) / 2);
	}

	.works-slider__prev,
	.works-slider__next {
		width: clamp(44px, 6vw, 60px);
	}
}

@media (max-width: 767px) {
	.libre-works__header {
		padding: 0 6vw;
	}

	.libre-works__filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding: 0 6vw;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.libre-works__filters::-webkit-scrollbar {
		display: none;
	}

	.works-slider {
		gap: 6px;
		padding: 0 3vw;
	}

	.works-slider__viewport {
		scroll-snap-type: x mandatory;
	}

	.works-card {
		flex: 0 0 86%;
	}

	.works-slider__prev,
	.works-slider__next {
		width: clamp(32px, 9vw, 44px);
	}
}

/* 2026-09-24 レスポンシブ総点検：カード内「詳しく見る →」の実タップ高さが21pxだった。
   レイアウトは動かさず、既存の透明::afterのヒット領域だけ上下左右へ広げる（スマホのみ）。 */
@media (max-width: 767px) {
	.works-card__detail::after { inset: -14px -10px; }
}