/* ファンズナビ 土台（担当B）
 * 色・文字・余白は :root の変数（--fn-）だけを使う。他の担当も生の色を書かずに変数を使う。
 * スマホ優先。PC は最大幅 --fn-maxw。
 */

:root {
	/* 色: 黒地×白×ピンク（アクセントはピンク1色） */
	--fn-bg: #0b0b0d;          /* ページの地 */
	--fn-surface: #16161a;     /* カード・帯 */
	--fn-surface-2: #222228;   /* 押せる面の hover・チップ */
	--fn-border: #2c2c34;      /* 区切り線 */
	--fn-text: #f5f5f7;        /* 本文 */
	--fn-text-sub: #a9a9b4;    /* 補足 */
	--fn-text-mute: #74747f;   /* さらに弱い補足 */
	--fn-accent: #ff3d7f;      /* ピンク（ボタン・強調） */
	--fn-accent-hover: #ff5c94;
	--fn-on-accent: #ffffff;   /* ピンクの上の文字 */
	--fn-overlay: rgba(0, 0, 0, 0.62);    /* 画像の上の小札 */
	--fn-backdrop: rgba(0, 0, 0, 0.92);   /* 再生画面などの全面の幕 */
	/* 別名（player.css が使っている名前に合わせる） */
	--fn-muted: var(--fn-text-sub);
	--fn-accent-text: var(--fn-on-accent);
	--fn-player-bg: #000000;
	--fn-player-text: var(--fn-text);

	/* 文字 */
	--fn-font: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
	--fn-fs-xs: 0.75rem;     /* 12px */
	--fn-fs-sm: 0.8125rem;   /* 13px */
	--fn-fs-base: 0.9375rem; /* 15px */
	--fn-fs-md: 1.0625rem;   /* 17px */
	--fn-fs-lg: 1.25rem;     /* 20px */
	--fn-fs-xl: 1.5rem;      /* 24px */
	--fn-lh: 1.6;
	--fn-lh-tight: 1.35;
	--fn-fw-bold: 700;

	/* 余白 */
	--fn-sp-1: 4px;
	--fn-sp-2: 8px;
	--fn-sp-3: 12px;
	--fn-sp-4: 16px;
	--fn-sp-5: 24px;
	--fn-sp-6: 32px;
	--fn-gap: 10px;          /* カードどうしの間 */

	/* 形 */
	--fn-radius: 10px;
	--fn-radius-sm: 6px;
	--fn-radius-pill: 999px;
	--fn-maxw: 1100px;
	--fn-header-h: 52px;
	--fn-z-header: 50;
	--fn-z-modal: 1000;
}

@media (min-width: 900px) {
	:root {
		--fn-gap: 14px;
		--fn-fs-xl: 1.625rem;
	}
}

/* ---------- 下地 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.fn-body {
	margin: 0;
	background: var(--fn-bg);
	color: var(--fn-text);
	font-family: var(--fn-font);
	font-size: var(--fn-fs-base);
	line-height: var(--fn-lh);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fn-accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.fn-wrap {
	width: 100%;
	max-width: var(--fn-maxw);
	margin: 0 auto;
	padding: 0 var(--fn-sp-3);
}
@media (min-width: 900px) {
	.fn-wrap { padding: 0 var(--fn-sp-5); }
}

.fn-main { padding-top: var(--fn-sp-4); padding-bottom: var(--fn-sp-6); }

/* トップ以外のページは views が main を持たないので、一番外の要素に同じ枠を付ける */
.fn-creator,
.fn-work,
.fn-free,
.fn-page {
	width: 100%;
	max-width: var(--fn-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--fn-sp-3);
	padding-right: var(--fn-sp-3);
	padding-top: var(--fn-sp-4);
	padding-bottom: var(--fn-sp-6);
}
@media (min-width: 900px) {
	.fn-creator, .fn-work, .fn-free, .fn-page { padding-left: var(--fn-sp-5); padding-right: var(--fn-sp-5); }
}

/* ---------- 頭 ---------- */
.fn-header {
	position: sticky;
	top: 0;
	z-index: var(--fn-z-header);
	background: var(--fn-bg);
	border-bottom: 1px solid var(--fn-border);
}
.fn-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--fn-sp-4);
	min-height: var(--fn-header-h);
}
.fn-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--fn-sp-2);
	height: var(--fn-header-h);
	font-weight: var(--fn-fw-bold);
	font-size: var(--fn-fs-md);
	color: var(--fn-text);
}
.fn-logo:hover { color: var(--fn-text); }
.fn-logo-icon { width: 32px; height: 32px; border-radius: var(--fn-radius-sm); }

.fn-nav { width: calc(100% + var(--fn-sp-3) * 2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--fn-sp-3) * -1); padding: 0 var(--fn-sp-3); }
.fn-nav::-webkit-scrollbar { display: none; }
.fn-nav-list { display: flex; gap: var(--fn-sp-1); white-space: nowrap; padding-bottom: var(--fn-sp-2); }
.fn-nav-link {
	display: block;
	padding: var(--fn-sp-1) var(--fn-sp-3);
	border-radius: var(--fn-radius-pill);
	font-size: var(--fn-fs-sm);
	font-weight: var(--fn-fw-bold);
	color: var(--fn-text-sub);
}
.fn-nav-link:hover { color: var(--fn-text); background: var(--fn-surface-2); }
.fn-nav-link[aria-current="page"] { color: var(--fn-text); background: var(--fn-surface-2); }

@media (min-width: 900px) {
	.fn-header-inner { flex-wrap: nowrap; }
	.fn-nav { width: auto; margin: 0 0 0 auto; padding: 0; overflow: visible; }
	.fn-nav-list { padding-bottom: 0; gap: var(--fn-sp-2); }
	.fn-nav-link { font-size: var(--fn-fs-base); }
}

/* ---------- 文字 ---------- */
.fn-h1 {
	font-size: var(--fn-fs-lg);
	line-height: var(--fn-lh-tight);
	font-weight: var(--fn-fw-bold);
}
@media (min-width: 900px) {
	.fn-h1 { font-size: var(--fn-fs-xl); }
}
.fn-lead { margin-top: var(--fn-sp-2); color: var(--fn-text-sub); font-size: var(--fn-fs-sm); }
@media (min-width: 900px) {
	.fn-lead { font-size: var(--fn-fs-base); }
}
.fn-intro { margin-bottom: var(--fn-sp-4); }

.fn-prose { margin-top: var(--fn-sp-4); }
.fn-prose p, .fn-prose ul, .fn-prose ol { margin-bottom: var(--fn-sp-4); }
.fn-prose ul { list-style: disc; padding-left: 1.4em; }
.fn-prose ol { list-style: decimal; padding-left: 1.4em; }
.fn-prose a { color: var(--fn-accent); text-decoration: underline; }
.fn-prose h2 { font-size: var(--fn-fs-md); margin: var(--fn-sp-5) 0 var(--fn-sp-2); }

/* ---------- 節 ---------- */
.fn-section { margin-top: var(--fn-sp-5); }
.fn-section-title {
	font-size: var(--fn-fs-md);
	line-height: var(--fn-lh-tight);
	font-weight: var(--fn-fw-bold);
	margin-bottom: var(--fn-sp-3);
}
@media (min-width: 900px) {
	.fn-section { margin-top: var(--fn-sp-6); }
	.fn-section-title { font-size: var(--fn-fs-lg); }
}
.fn-section-lead { margin: calc(var(--fn-sp-2) * -1) 0 var(--fn-sp-3); color: var(--fn-text-sub); font-size: var(--fn-fs-sm); }
.fn-more { margin-top: var(--fn-sp-3); text-align: center; }

/* ---------- ボタン ---------- */
.fn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--fn-sp-2) var(--fn-sp-5);
	border-radius: var(--fn-radius-pill);
	font-weight: var(--fn-fw-bold);
	font-size: var(--fn-fs-base);
	line-height: var(--fn-lh-tight);
	text-align: center;
	cursor: pointer;
	border: 0;
}
/* 「無料で見る」: ピンク地で大きく */
.fn-btn--cta {
	width: 100%;
	max-width: 360px;
	min-height: 56px;
	font-size: var(--fn-fs-md);
	background: var(--fn-accent);
	color: var(--fn-on-accent);
}
.fn-btn--cta:hover { background: var(--fn-accent-hover); color: var(--fn-on-accent); }
/* 「もっと見る」など、店へ行かないボタン: 枠線だけ */
.fn-btn--more {
	min-width: 200px;
	background: transparent;
	color: var(--fn-text);
	border: 1px solid var(--fn-border);
}
.fn-btn--more:hover { color: var(--fn-text); background: var(--fn-surface-2); }

.fn-cta { display: flex; justify-content: center; margin: var(--fn-sp-4) 0; }

/* ---------- カードのグリッド（スマホ2列・PC4〜5列） ---------- */
.fn-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fn-gap);
	align-items: start;
}
@media (min-width: 600px) {
	.fn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.fn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fn-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- 無料動画カード ---------- */
.fn-clip {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}
.fn-clip-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--fn-radius);
	background: var(--fn-surface);
}
/* 一覧では縦横を混ぜても段がそろうよう、枠は 3:4 にそろえて中央で切り抜く（再生画面では元の向きで流す） */
.fn-clip--v .fn-clip-media,
.fn-clip--h .fn-clip-media { aspect-ratio: 3 / 4; }
.fn-clip-poster { width: 100%; height: 100%; object-fit: cover; }
.fn-clip:hover .fn-clip-poster { opacity: 0.85; }
.fn-clip-rank {
	position: absolute;
	top: var(--fn-sp-1);
	left: var(--fn-sp-1);
	min-width: 26px;
	height: 26px;
	padding: 0 var(--fn-sp-1);
	border-radius: var(--fn-radius-sm);
	background: var(--fn-accent);
	color: var(--fn-on-accent);
	font-size: var(--fn-fs-sm);
	font-weight: var(--fn-fw-bold);
	line-height: 26px;
	text-align: center;
}
.fn-clip-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	background: var(--fn-overlay);
}
.fn-clip-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -5px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--fn-text);
}
.fn-clip-time {
	position: absolute;
	right: var(--fn-sp-1);
	bottom: var(--fn-sp-1);
	padding: 1px var(--fn-sp-1);
	border-radius: var(--fn-radius-sm);
	background: var(--fn-overlay);
	color: var(--fn-text);
	font-size: var(--fn-fs-xs);
	font-variant-numeric: tabular-nums;
}
.fn-clip-meta { display: block; padding: var(--fn-sp-1) 2px 0; line-height: var(--fn-lh-tight); }
.fn-clip-views { display: block; font-size: var(--fn-fs-sm); font-weight: var(--fn-fw-bold); color: var(--fn-text); }
.fn-clip-name {
	display: block;
	margin-top: 2px;
	font-size: var(--fn-fs-xs);
	color: var(--fn-text-sub);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- クリエイターカード ---------- */
.fn-ccard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	height: 100%;
	padding: var(--fn-sp-3) var(--fn-sp-2);
	border-radius: var(--fn-radius);
	background: var(--fn-surface);
	text-align: center;
	line-height: var(--fn-lh-tight);
}
a.fn-ccard:hover { background: var(--fn-surface-2); color: var(--fn-text); }
.fn-grid--creators { align-items: stretch; }
.fn-ccard-rank {
	position: absolute;
	top: var(--fn-sp-2);
	left: var(--fn-sp-2);
	min-width: 24px;
	height: 24px;
	padding: 0 var(--fn-sp-1);
	border-radius: var(--fn-radius-sm);
	background: var(--fn-accent);
	color: var(--fn-on-accent);
	font-size: var(--fn-fs-xs);
	font-weight: var(--fn-fw-bold);
	line-height: 24px;
}
.fn-ccard-icon {
	width: 72px;
	height: 72px;
	margin-bottom: var(--fn-sp-2);
	border-radius: 50%;
	object-fit: cover;
}
.fn-ccard-name {
	font-weight: var(--fn-fw-bold);
	font-size: var(--fn-fs-base);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-all;
}
.fn-ccard-sub { font-size: var(--fn-fs-xs); color: var(--fn-text-sub); }
.fn-ccard-price { margin: 2px 0; font-size: var(--fn-fs-sm); font-weight: var(--fn-fw-bold); }
.fn-ccard-price.is-free { color: var(--fn-accent); }

/* ---------- 作品カード ---------- */
.fn-wcard { display: block; line-height: var(--fn-lh-tight); }
.fn-wcard-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--fn-radius);
	background: var(--fn-surface);
}
.fn-wcard-thumb { width: 100%; height: 100%; object-fit: cover; }
a.fn-wcard:hover .fn-wcard-thumb { opacity: 0.85; }
.fn-wcard-time {
	position: absolute;
	right: var(--fn-sp-1);
	bottom: var(--fn-sp-1);
	padding: 1px var(--fn-sp-1);
	border-radius: var(--fn-radius-sm);
	background: var(--fn-overlay);
	font-size: var(--fn-fs-xs);
}
.fn-wcard-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: var(--fn-sp-1);
	font-size: var(--fn-fs-sm);
	font-weight: var(--fn-fw-bold);
}
.fn-wcard-sub { display: block; margin-top: 2px; font-size: var(--fn-fs-xs); color: var(--fn-text-sub); }
.fn-wcard-len { margin-left: var(--fn-sp-2); }

/* ---------- ジャンルのボタン ---------- */
.fn-chips { display: flex; flex-wrap: wrap; gap: var(--fn-sp-2); }
.fn-chip {
	display: inline-block;
	padding: var(--fn-sp-2) var(--fn-sp-4);
	border-radius: var(--fn-radius-pill);
	background: var(--fn-surface-2);
	font-size: var(--fn-fs-sm);
	font-weight: var(--fn-fw-bold);
}
.fn-chip:hover { background: var(--fn-accent); color: var(--fn-on-accent); }

/* ---------- パンくず ---------- */
.fn-bc { margin-bottom: var(--fn-sp-3); font-size: var(--fn-fs-xs); color: var(--fn-text-mute); overflow-x: auto; }
.fn-bc-list { display: flex; white-space: nowrap; }
.fn-bc-item + .fn-bc-item::before { content: "›"; margin: 0 var(--fn-sp-2); color: var(--fn-text-mute); }
.fn-bc a { color: var(--fn-text-sub); }
.fn-bc a:hover { color: var(--fn-accent); }

/* ---------- 0件 ---------- */
.fn-empty {
	padding: var(--fn-sp-5) var(--fn-sp-3);
	border-radius: var(--fn-radius);
	background: var(--fn-surface);
	color: var(--fn-text-sub);
	text-align: center;
	font-size: var(--fn-fs-sm);
}

/* ---------- 404 ---------- */
.fn-notfound { padding: var(--fn-sp-6) 0; text-align: center; }
.fn-notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fn-sp-3); margin-top: var(--fn-sp-5); }

/* ---------- 足 ---------- */
.fn-footer {
	margin-top: var(--fn-sp-6);
	padding: var(--fn-sp-5) 0 var(--fn-sp-6);
	border-top: 1px solid var(--fn-border);
	color: var(--fn-text-sub);
	font-size: var(--fn-fs-xs);
	text-align: center;
}
.fn-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--fn-sp-1) var(--fn-sp-5); margin-bottom: var(--fn-sp-3); font-size: var(--fn-fs-sm); }
.fn-footer-links a { color: var(--fn-text); }
.fn-footer-note + .fn-footer-note { margin-top: 2px; }
.fn-footer-copy { margin-top: var(--fn-sp-3); color: var(--fn-text-mute); }

.fn-ccard-intro {
	display: block;
	max-width: 100%;
	margin: 2px 0;
	overflow: hidden;
	color: var(--fn-text-sub);
	font-size: var(--fn-fs-xs);
	text-overflow: ellipsis;
	white-space: nowrap;
}