/* ============================================================
   AVChecker ページ共通（checker.css を前提にした追加分）

   ★ h1〜h6 は使わない。見出しは .avc-h / .avc-page__title /
     .avc-profile__name / .avc-archhead__name に太さとサイズを持たせている。
   ============================================================ */
.avc-page {
	--avc-accent: #d6336c;
	--avc-hit: #157f3c;
	--avc-line: #e4e6e9;
	--avc-soft: #f7f8fa;
	--avc-dim: #8b929e;
	--avc-ink: #1d2327;
	max-width: 980px;
	margin: 0 auto;
}

/*
 * 日本語の折り返し
 *
 * 既定だと「絡ん / だ日が」のように語の途中で折れる。
 * line-break:strict で句読点や小書き文字の前で折れないようにし、
 * 対応ブラウザでは word-break:auto-phrase で文節単位に折る。
 */
.avc-jp,
.avc-page__sub,
.avc-hero__lead,
.avc-checker__lead,
.avc-unpaired__lead,
.avc-coverage__text,
.avc-filter__legend em,
.avc-filter__hint,
.avc-homelink__desc,
.avc-matrix__note,
.avc-rankcards__note,
.avc-h__sub {
	line-break: strict;
	overflow-wrap: anywhere;
	word-break: auto-phrase;
}

/*
 * 句読点で区切った塊を inline-block にして、塊の途中では折れないようにする。
 * avc_jp() が出力する span がこれ。
 */
.avc-jp span {
	display: inline-block;
}

/* 途中で切りたくないまとまり */
.avc-nobr {
	display: inline-block;
}

/* ============================================================
   2ページ目以降の折りたたみ
   ============================================================ */
.avc-fold {
	margin: 0 0 24px;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	background: var(--avc-soft);
	overflow: hidden;
}
.avc-fold__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	font-size: 13px;
	font-weight: 700;
	color: #58606b;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.avc-fold__summary::-webkit-details-marker {
	display: none;
}
.avc-fold__summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-right: 2px solid #a8afb8;
	border-bottom: 2px solid #a8afb8;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s;
}
.avc-fold[open] .avc-fold__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.avc-fold__summary:hover {
	color: var(--avc-accent);
}
.avc-fold__body {
	padding: 0 16px 8px;
	background: #fff;
	border-top: 1px solid var(--avc-line);
}
.avc-fold__body > .avc-section:first-child {
	margin-top: 22px;
}

/* --- 上位だけ出しているときの補足 --- */
.avc-cta__lead {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.85;
	color: #58606b;
}

/* --- 疑似見出し --- */
.avc-h {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--avc-ink);
}
.avc-h--2 {
	font-size: 1.08rem;
	padding-left: 12px;
	border-left: 4px solid var(--avc-accent);
}
.avc-h--3 {
	font-size: .95rem;
}
.avc-h__sub {
	font-size: 12px;
	font-weight: 600;
	color: var(--avc-dim);
}

.avc-page__title {
	margin: 0 0 20px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.45;
}
.avc-page__x {
	color: var(--avc-dim);
	margin: 0 .3em;
	font-weight: 400;
}
.avc-page__sub {
	display: block;
	font-size: .84rem;
	font-weight: 600;
	color: var(--avc-dim);
	margin-top: 5px;
}

.avc-section {
	margin: 38px 0;
}
.avc-empty {
	font-size: 13px;
	color: var(--avc-dim);
	margin: 0;
}
/* --- 「◯◯へ」のリンクはボタン風に --- */
.avc-more {
	margin: 16px 0 0;
	text-align: right;
}
/* 行き先が2つ並ぶことがあるので、くっつかないようにする */
.avc-more a + a { margin-left: 8px; }
.avc-more a,
.avc-widget__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	color: var(--avc-accent);
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	transition: all .15s;
}
.avc-more a::after,
.avc-widget__more a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s;
}
.avc-more a:hover,
.avc-widget__more a:hover {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}
.avc-more a:hover::after,
.avc-widget__more a:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

/* --- パンくず --- */
.avc-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 12px;
	color: var(--avc-dim);
	margin-bottom: 14px;
}
.avc-crumb a {
	color: inherit;
}
.avc-crumb em {
	font-style: normal;
	color: #58606b;
}

/* ============================================================
   チェッカーを置くための帯
   ページ下部にフォームが素で置かれると雑に見えるので、
   カードにして「次の行き先」として見せる。
   ============================================================ */
.avc-cta {
	position: relative;
	margin: 40px 0;
	padding: 22px 24px;
	border-radius: 16px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(214, 51, 108, .10) 0%, rgba(214, 51, 108, 0) 55%),
		var(--avc-soft);
	border: 1px solid var(--avc-line);
}
.avc-cta::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 16px 0 0 16px;
	background: linear-gradient(180deg, var(--avc-accent), #8e3fb0);
}
.avc-cta--inline {
	margin: 18px 0 34px;
	padding: 18px 20px;
}
@media (max-width: 600px) {
	.avc-cta {
		padding: 18px 16px;
	}
}

/* ============================================================
   人物プロフィール
   ============================================================ */
.avc-profile {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	padding: 22px;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
	border-radius: 14px;
}
@media (max-width: 600px) {
	.avc-profile {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}
.avc-profile__body {
	flex: 1;
	min-width: 0;
}
.avc-profile__role {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
	border-radius: 3px;
	padding: 2px 9px;
	background: #b6bcc4;
}
.avc-profile--actress .avc-profile__role {
	background: #d78bb4;
}
.avc-profile--actor .avc-profile__role {
	background: #6f9bd1;
}
.avc-profile__name {
	margin: 9px 0 2px;
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.3;
}
.avc-profile__reading {
	margin: 0;
	font-size: 12px;
	color: var(--avc-dim);
}
.avc-profile__reading span {
	margin-left: 8px;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.avc-profile__stats {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #58606b;
}
.avc-profile__stats > li > span {
	font-size: 21px;
	font-weight: 800;
	color: var(--avc-ink);
	margin-right: 4px;
}
.avc-profile__stats-wide {
	width: 100%;
	font-size: 12px;
}
.avc-profile__partner {
	font-size: 14px !important;
	font-weight: 700;
	color: var(--avc-accent) !important;
}
.avc-profile .avc-coverage {
	margin: 15px 0 0;
	max-width: 100%;
}
.avc-profile .avc-coverage__text {
	text-align: left;
}
@media (max-width: 600px) {
	.avc-profile .avc-coverage__text {
		text-align: center;
	}
}

/* ============================================================
   共演相手ランキング
   ============================================================ */
.avc-rank {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 2px 26px;
}
.avc-rank__item {
	border-bottom: 1px solid var(--avc-line);
}
.avc-rank__link {
	display: grid;
	grid-template-columns: 22px auto minmax(0, 1fr) 52px;
	align-items: center;
	gap: 10px;
	padding: 9px 2px;
	text-decoration: none;
	color: inherit;
}
.avc-rank__link:hover .avc-rank__name {
	color: var(--avc-accent);
}
.avc-rank__no {
	font-size: 11px;
	font-weight: 700;
	color: #b9bfc7;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.avc-rank__body {
	min-width: 0;
}
.avc-rank__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avc-rank__years {
	display: block;
	font-size: 10px;
	color: #b3b9c1;
	margin-bottom: 3px;
}
.avc-rank__bar {
	display: block;
	height: 5px;
	background: #eceef1;
	border-radius: 3px;
	overflow: hidden;
}
.avc-rank__bar span {
	display: block;
	height: 100%;
	background: var(--avc-accent);
	opacity: .72;
}
.avc-rank__n {
	font-size: 16px;
	font-weight: 800;
	text-align: right;
	color: #4a525c;
	font-variant-numeric: tabular-nums;
}
.avc-rank__n small {
	font-size: 10px;
	font-weight: 600;
	color: var(--avc-dim);
	margin-left: 1px;
}

/* --- 未共演 --- */
.avc-unpaired__lead {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.75;
	color: #58606b;
}
.avc-unpaired__lead.is-warn {
	padding: 10px 14px;
	border-radius: 8px;
	background: #fdf6e3;
	color: #7a5a06;
}

/* ============================================================
   チップ（人物以外）
   ============================================================ */
.avc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-chips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 13px;
	font-size: 13px;
	text-decoration: none;
	color: inherit;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
	border-radius: 16px;
}
.avc-chips a:hover {
	border-color: var(--avc-accent);
	color: var(--avc-accent);
}

/* ============================================================
   汎用アーカイブ
   ============================================================ */
.avc-archhead {
	padding: 24px 26px;
	border-radius: 14px;
	background:
		radial-gradient(110% 130% at 0% 0%, rgba(214, 51, 108, .09) 0%, rgba(214, 51, 108, 0) 60%),
		var(--avc-soft);
	border: 1px solid var(--avc-line);
}
.avc-archhead__kind {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	color: #fff;
	background: var(--avc-accent);
	border-radius: 3px;
	padding: 3px 10px;
}
.avc-archhead__name {
	margin: 10px 0 0;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.35;
}
.avc-archhead__count {
	margin: 6px 0 0;
	font-size: 12px;
	color: #58606b;
}
.avc-archhead__count span {
	font-size: 20px;
	font-weight: 800;
	color: var(--avc-ink);
	margin-right: 3px;
}
.avc-archhead__desc {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: #58606b;
}

.avc-facepanel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

/* ============================================================
   作品ページ
   ============================================================ */
.avc-workhead {
	display: flex;
	gap: 26px;
	align-items: flex-start;
}
@media (max-width: 700px) {
	.avc-workhead {
		flex-direction: column;
	}
}
.avc-workhead__thumb {
	width: 330px;
	max-width: 100%;
	flex: none;
	border-radius: 12px;
	overflow: hidden;
	background: #f1f3f5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.avc-workhead__thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.avc-workhead__body {
	flex: 1;
	min-width: 0;
}
.avc-workhead__hinban {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--avc-accent);
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 2px 8px;
}
.avc-workhead__title {
	margin: 11px 0 6px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
}
.avc-workhead__cast {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--avc-accent);
}
.avc-spec {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.95;
}
.avc-spec li {
	display: flex;
	gap: 12px;
}
.avc-spec span {
	flex: none;
	width: 6em;
	color: var(--avc-dim);
	font-size: 12px;
}

/* --- 出演 --- */
.avc-cast {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
/*
 * 出演欄は2段組みの中にあるので、.avc-ptiles の既定（6列固定）だと
 * 1マスが50px程度になり、男優名のように長い名前がほぼ必ず折り返す。
 * 幅に合わせて詰め、1マスを名前が収まる大きさにする。
 */
.avc-cast .avc-ptiles {
	grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
	gap: 14px 8px;
}

.avc-cast__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--avc-dim);
	margin-bottom: 10px;
}

.avc-note {
	margin: 16px 0 0;
	padding: 10px 14px;
	font-size: 12.5px;
	line-height: 1.75;
	border-radius: 8px;
	background: var(--avc-soft);
	color: #58606b;
}
.avc-note.is-warn {
	background: #fdf6e3;
	color: #7a5a06;
}

/* ============================================================
   /kyoen/ の入口
   ============================================================ */
/* チェッカーの真上に出す。枠の外に出すと、どの欄の話か分からない */
.avc-kyhub__miss {
	margin: 0 0 14px;
	text-align: left;
}
/*
 * 手がかりは番号付きで。
 * 上から順に試せば、たいてい解ける並びにしてある。
 */
.avc-kyhub__tips {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-kyhub__tips li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.75;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: #fff;
}
.avc-kyhub__tipno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	color: var(--avc-accent);
	background: rgba(214, 51, 108, .1);
	border-radius: 50%;
}

/* --- この組み合わせの共演 --- */
.avc-pairlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-pairlist a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	transition: border-color .15s, box-shadow .15s;
}
.avc-pairlist a:hover {
	border-color: var(--avc-accent);
	box-shadow: 0 4px 14px rgba(214, 51, 108, .12);
}
/* 2つの顔を少し重ねて「組」に見せる */
.avc-pairlist__faces {
	display: flex;
	flex: none;
}
.avc-pairlist__faces .avc-av {
	border: 2px solid #fff;
	box-sizing: content-box;
}
.avc-pairlist__faces .avc-av + .avc-av {
	margin-left: -14px;
}
.avc-pairlist__body {
	min-width: 0;
}
.avc-pairlist__names {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}
.avc-pairlist__names em {
	font-style: normal;
	font-weight: 400;
	color: #c3c9d1;
	margin: 0 3px;
}
.avc-pairlist__note {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--avc-dim);
}
.avc-pairlist__count {
	flex: none;
	display: flex;
	align-items: baseline;
	gap: 1px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--avc-soft);
	color: var(--avc-accent);
}
.avc-pairlist__count strong {
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.avc-pairlist__count small {
	font-size: 10px;
	font-weight: 700;
}

/* --- サンプル動画 --- */
/*
 * DMM の litevideo は「16:9 の動画」ではなく「プレイヤーのページ」を読み込む。
 * 動画の上下にタイトルバーとコントロールが入るぶん、16:9 では見切れる。
 * 4:3（padding-top:75%）が実測で過不足ない。
 */
.avc-video {
	position: relative;
	width: 100%;
	padding-top: 75%;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
}
.avc-video iframe,
.avc-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.avc-video video {
	object-fit: contain;
}
/* MGS は自前のサイズで差し込まれるので枠を固定しない */
.avc-video--mgs {
	padding-top: 0;
	height: auto;
	background: none;
}
.avc-video--mgs iframe {
	position: static;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

/* --- サンプル画像 --- */
/* Masonry（CSS multi-column）。画像の縦横比がまちまちでも隙間が出ない */
.avc-samples {
	column-width: 180px;
	column-count: 4;
	column-gap: 8px;
}
.avc-samples a {
	position: relative;
	display: block;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 8px;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
}
.avc-samples img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity .15s, transform .3s ease;
}
.avc-samples a:hover img {
	opacity: .82;
	transform: scale(1.03);
}
/* 押せば大きく見られると分かるように、虫めがねを重ねる */
.avc-samples__zoom {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.avc-samples__zoom svg {
	width: 15px;
	height: 15px;
}
.avc-samples a:hover .avc-samples__zoom,
.avc-samples a:focus-visible .avc-samples__zoom {
	opacity: 1;
	transform: translateY(0);
}
/* 触る端末はホバーが無いので常に出す */
@media (hover: none) {
	.avc-samples__zoom {
		opacity: .85;
		transform: none;
	}
}

/* ============================================================
   画像モーダル（js/front.js が body 直下に作る）
   ============================================================ */
.avc-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 16px;
	background: rgba(12, 12, 16, .9);
	opacity: 0;
	transition: opacity .2s ease;
}
.avc-lb.is-open {
	opacity: 1;
}
.avc-lb[hidden] {
	display: none !important;
}
.avc-lb__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.avc-lb__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .2s ease;
}
.avc-lb__img.is-ready {
	opacity: 1;
}

.avc-lb__close,
.avc-lb__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}
.avc-lb__close:hover,
.avc-lb__nav:hover {
	background: rgba(255, 255, 255, .28);
}
.avc-lb__close {
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
}
.avc-lb__close svg {
	width: 20px;
	height: 20px;
}
.avc-lb__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
}
.avc-lb__nav svg {
	width: 24px;
	height: 24px;
}
.avc-lb__nav--prev { left: 10px; }
.avc-lb__nav--next { right: 10px; }
.avc-lb__nav[hidden] { display: none; }

.avc-lb__count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	margin: 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .78);
}

@media (max-width: 700px) {
	.avc-lb {
		padding: 52px 8px 40px;
	}
	.avc-lb__nav {
		width: 40px;
		height: 40px;
	}
	.avc-lb__nav--prev { left: 4px; }
	.avc-lb__nav--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.avc-lb,
	.avc-lb__img {
		transition: none;
	}
}

/* ============================================================
   配信リンクボタン
   ============================================================ */

/*
 * ボタンの字はケイフォント。
 *
 * 【使う字だけ切り出してある】
 * 元の keifont.ttf は 4.3MB。出るのは「FANZA」「MGS」「ソクミル」だけなので、
 * 英数とカナに絞って woff2 にした（7KB）。
 * ボタン3つのために4.3MB を読ませる理由が無い。
 *
 * font-display: swap。字が出るのを待たせない
 * （読めるものを先に出して、届いたら差し替える）。
 */
@font-face {
	font-family: "KeiFont";
	src: url("../fonts/keifont-aff.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.avc-affs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 20px 0;
}
@media (max-width: 560px) {
	.avc-affs {
		grid-template-columns: repeat(2, 1fr);
	}
}
.avc-aff {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 6px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .14);
	transition: transform .18s, box-shadow .18s, opacity .18s;
}
/*
 * 【DUGA には当てない】
 * あちらはロゴのSVGで、そもそも字が無い。
 * 当てる先を .avc-aff ではなく .avc-aff__label にしてあるので、
 * ロゴだけのボタンには初めから掛からない。
 * 「DUGA以外」と書き分けるより、掛かりようが無い形にするほうが確か。
 */
.avc-aff__label {
	position: relative;
	z-index: 2;
	font-family: "KeiFont", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* FANZA */
.avc-aff--fanza {
	background: #d10000;
}
.avc-aff--fanza:hover:not(.is-off) {
	opacity: .78;
	color: #fff;
}

/* MGS：黒地に斜めの赤 */
.avc-aff--mgs {
	background: #000;
}
.avc-aff--mgs::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 100%;
	background: #d10000;
	clip-path: polygon(0 23%, 0 100%, 74% 100%);
	z-index: 1;
}
.avc-aff--mgs:hover:not(.is-off) {
	opacity: .78;
	color: #fff;
}

/* ソクミル */
.avc-aff--sokmil {
	background: #fff;
	border: 1px solid #dcdfe3;
}
.avc-aff__label--sokmil {
	color: #e60012;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0;
}
.avc-aff--sokmil:hover:not(.is-off),
.avc-aff--duga:hover:not(.is-off) {
	transform: translateY(-2px);
	box-shadow: 0 7px 16px rgba(0, 0, 0, .16);
	border-color: #c9ced4;
}

/* DUGA */
.avc-aff--duga {
	background: #fff;
	border: 1px solid #dcdfe3;
	color: #111;
}
.avc-aff__duga {
	display: inline-flex;
	align-items: center;
}
.avc-aff__duga svg {
	width: 92px;
	height: auto;
	display: block;
}

/* 未登録 */
.avc-aff.is-off {
	background: #d7dade !important;
	border-color: #d7dade !important;
	color: #f2f3f5 !important;
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}
.avc-aff.is-off::before {
	display: none;
}
.avc-aff.is-off .avc-aff__label--sokmil {
	color: #f2f3f5;
}
.avc-aff.is-off .avc-aff__duga svg {
	filter: grayscale(1);
	opacity: .45;
}

@media (max-width: 560px) {
	.avc-aff {
		font-size: 14px;
		padding: 12px 4px;
	}
	.avc-aff__label--sokmil {
		font-size: 16px;
	}
	.avc-aff__duga svg {
		width: 74px;
	}
}

/*
 * 作品画面の下部固定。
 * 本体より下へ行き、かつ本体が見えなくなったときだけ出す（js/front.js）。
 *
 * 【スマホの固定フッターの上に載せる】
 * SWELL の #fix_bottom_menu は高さ約50px。
 * 重なるとどちらも押せなくなるので、bottom は JS がメニューの実寸ぶん上げる。
 * メニューが隠れる途中の位置は追わない（追うと帯が先に降りて重なる）。
 * こちらはメニューより手前に出さない（z-index は 99、メニューは 100）。
 */
.avc-affpin {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	padding: 6px 10px;
	background: rgba(255, 255, 255, .94);
	border-top: 1px solid var(--avc-line);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
	transform: translate3d(0, 110%, 0);
	pointer-events: none;
	transition: transform .2s ease;
}
.avc-affpin.is-on {
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}
.avc-affpin .avc-affs {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0 auto;
	max-width: 640px;
}
.avc-affpin .avc-aff {
	flex: 1 1 0;
	min-width: 0;
	max-width: 160px;
	padding: 8px 4px;
	font-size: 13px;
	border-radius: 6px;
	box-shadow: none;
}
.avc-affpin .avc-aff__label--sokmil { font-size: 14px; }
.avc-affpin .avc-aff__duga svg { width: 62px; }
.avc-affpin .avc-aff--mgs::before { width: 52px; }

/*
 * 出ているあいだ、一番下の文が帯の下に隠れないようにする。
 * body には足さない。padding を body に付けると、スマホで
 * position:fixed の基準がずれ、帯がページと一緒に上がって
 * メニューに重なり、本体が見えても translateY では消えなくなる。
 */
body.is-avc-affpin .avc-page {
	padding-bottom: var(--avc-affpin-space, 52px);
}

/* ページトップボタンを帯のぶんだけ上げる */
body.is-avc-affpin .p-fixBtnWrap {
	transform: translateY(calc(-1 * var(--avc-affpin-space, 52px)));
	transition: transform .2s ease;
}

@media (max-width: 560px) {
	.avc-affpin { padding: 5px 8px; }
	.avc-affpin .avc-affs { gap: 5px; }
	.avc-affpin .avc-aff {
		padding: 7px 2px;
		font-size: 11.5px;
	}
	.avc-affpin .avc-aff__label--sokmil { font-size: 12.5px; }
	.avc-affpin .avc-aff__duga svg { width: 50px; }
}

@media (prefers-reduced-motion: reduce) {
	.avc-affpin,
	body.is-avc-affpin .p-fixBtnWrap {
		transition: none;
	}
}

/* ============================================================
   トップページ
   ============================================================ */
.avc-hero {
	margin: 0 0 34px;
	padding: 30px 26px 26px;
	border-radius: 18px;
	background:
		radial-gradient(90% 120% at 15% 0%, rgba(214, 51, 108, .12) 0%, rgba(214, 51, 108, 0) 55%),
		radial-gradient(80% 120% at 100% 10%, rgba(142, 63, 176, .12) 0%, rgba(142, 63, 176, 0) 55%),
		var(--avc-soft);
	border: 1px solid var(--avc-line);
	text-align: center;
}
/*
 * ヒーローは道具の名前として読ませる。
 * 「女優 × 男優」を小さな冠に、「共演チェッカー」を主役に置く。
 */
.avc-hero__catch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	line-height: 1.3;
}
.avc-hero__catch-sub {
	font-size: clamp(11px, 2.6vw, 13px);
	font-weight: 700;
	letter-spacing: .22em;
	text-indent: .22em; /* letter-spacing で右にずれるぶんを戻す */
	color: #9b8ea6;
}
.avc-hero__catch-main {
	font-size: clamp(1.6rem, 5.4vw, 2.3rem);
	font-weight: 900;
	letter-spacing: .02em;
	background: linear-gradient(135deg, #e0457a, #a52a86);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.avc-hero__lead {
	margin: 0 auto 22px;
	max-width: 620px;
	font-size: 13.5px;
	line-height: 1.9;
	color: #626a75;
}
.avc-hero .avc-checker {
	max-width: 640px;
	margin: 0 auto;
}
.avc-hero__stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	color: #7a828d;
}
.avc-hero__stats > li > span {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--avc-ink);
	font-variant-numeric: tabular-nums;
}
.avc-hero__stats--plain {
	justify-content: flex-start;
	gap: 12px 30px;
}

/* --- 導線カード --- */
.avc-homelinks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 38px;
}
@media (max-width: 900px) {
	.avc-homelinks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.avc-homelink {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.avc-homelink__arrow {
	display: none;
	flex: none;
	width: 7px;
	height: 7px;
	margin-left: auto;
	align-self: center;
	border-top: 2px solid #c3c9d1;
	border-right: 2px solid #c3c9d1;
	transform: rotate(45deg);
}
.avc-homelink:hover {
	border-color: var(--avc-accent);
	box-shadow: 0 6px 18px rgba(214, 51, 108, .12);
	transform: translateY(-2px);
}
.avc-homelink__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(214, 51, 108, .1);
	color: var(--avc-accent);
}
.avc-homelink__icon svg {
	width: 20px;
	height: 20px;
}
.avc-homelink__body {
	min-width: 0;
}
.avc-homelink__label {
	display: block;
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 3px;
}
.avc-homelink__desc {
	display: block;
	font-size: 11.5px;
	line-height: 1.6;
	color: #7a828d;
}

/* --- 但し書き --- */
/* ============================================================
   ウィジェット
   ============================================================ */
.avc-widget__more {
	margin: 12px 0 0;
	text-align: right;
}
.avc-widget__more a {
	padding: 6px 13px;
	font-size: 11.5px;
	--avc-accent: #d6336c;
	--avc-line: #e4e6e9;
}
.avc-rank__gap {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	color: #7a5a06;
	background: #fdf0cf;
	border-radius: 999px;
	vertical-align: middle;
}
.avc-rank__item.is-stale .avc-rank__bar span {
	background: #d9a441;
	opacity: .8;
}

/* --- コンビ --- */
.avc-pairwidget {
	list-style: none;
	margin: 0;
	padding: 0;
}
.avc-pairwidget li {
	margin: 0 0 6px;
}
.avc-pairwidget a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 8px;
	border-radius: 9px;
	text-decoration: none;
	color: inherit;
	transition: background .12s;
}
.avc-pairwidget a:hover {
	background: var(--avc-soft, #f7f8fa);
}
.avc-pairwidget__faces {
	display: flex;
	flex: none;
}
.avc-pairwidget__faces .avc-av {
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	box-sizing: content-box;
}
.avc-pairwidget__faces .avc-av + .avc-av {
	margin-left: -12px;
}
.avc-pairwidget__name {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.avc-pairwidget__name em {
	font-style: normal;
	font-weight: 400;
	color: #c3c9d1;
	margin: 0 2px;
}
.avc-pairwidget__n {
	flex: none;
	font-size: 13px;
	font-weight: 800;
	color: var(--avc-accent, #d6336c);
	font-variant-numeric: tabular-nums;
}

/* --- 作品リスト --- */
.avc-worklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.avc-worklist__item {
	margin: 0 0 10px;
}
.avc-worklist__item a {
	display: flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.avc-worklist__thumb {
	position: relative;
	flex: none;
	width: 78px;
	height: 52px;
	border-radius: 6px;
	overflow: hidden;
	background: #f1f3f5;
}
.avc-worklist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.avc-worklist__thumb .avc-badges {
	top: 3px;
	left: 3px;
	gap: 2px;
}
.avc-worklist__thumb .avc-badge2 {
	font-size: 8.5px;
	padding: 1px 5px;
}
.avc-worklist__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.avc-worklist__hinban {
	font-size: 9.5px;
	font-weight: 700;
	color: var(--avc-accent, #d6336c);
}
.avc-worklist__title {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avc-worklist__item a:hover .avc-worklist__title {
	color: var(--avc-accent, #d6336c);
}

/* ============================================================
   セール
   ============================================================ */
.avc-sale {
	margin: 0 0 16px;
	border: 2px solid #ff3d6e;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 14px rgba(255, 61, 110, .18);
}
.avc-sale__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px;
	background: linear-gradient(135deg, #ff5e5e, #ff2d55);
	color: #fff;
}
.avc-sale__name {
	font-size: 13.5px;
	font-weight: 800;
}
.avc-sale__count {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	background: rgba(255, 255, 255, .24);
	padding: 2px 10px;
	border-radius: 999px;
}
.avc-sale__count strong {
	font-size: 1.15em;
	margin: 0 2px;
}
.avc-sale__body {
	padding: 11px 14px;
}
.avc-sale__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}
.avc-sale__now {
	font-size: 26px;
	font-weight: 900;
	color: #ff2d55;
	line-height: 1;
}
.avc-sale__now small {
	font-size: 14px;
}
.avc-sale__was {
	font-size: 14px;
	color: #9aa1ab;
	text-decoration: line-through;
}
.avc-sale__off {
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	background: #ff2d55;
	border-radius: 5px;
	padding: 2px 9px;
}
.avc-sale__end {
	margin: 7px 0 0;
	font-size: 11.5px;
	color: #8a8189;
}

/* --- セールウィジェット --- */
.avc-salelist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.avc-salelist__item {
	margin: 0 0 10px;
}
.avc-salelist__item a {
	display: flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.avc-salelist__thumb {
	position: relative;
	flex: none;
	width: 76px;
	height: 50px;
	border-radius: 6px;
	overflow: hidden;
	background: #f1f3f5;
}
.avc-salelist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.avc-salelist__off {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 9.5px;
	font-weight: 800;
	color: #fff;
	background: #ff2d55;
	padding: 1px 5px;
	border-radius: 0 5px 0 0;
}
.avc-salelist__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.avc-salelist__title {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avc-salelist__item a:hover .avc-salelist__title {
	color: #ff2d55;
}
.avc-salelist__price {
	font-size: 13px;
	font-weight: 900;
	color: #ff2d55;
}
.avc-salelist__days {
	font-size: 10px;
	color: var(--avc-dim, #8b929e);
}

/* ============================================================
   人物一覧
   ============================================================ */
.avc-filter {
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 14px;
	margin-bottom: 16px;
	overflow: hidden;
	transition: opacity .15s;
}
.avc-filter.is-busy {
	opacity: .55;
	pointer-events: none;
}
/* JS が動いていればボタンは押さなくてよい */
.avc-filter.is-live .avc-filter__submit {
	display: none;
}

.avc-filter__main {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 14px 16px;
	background: var(--avc-soft);
	border-bottom: 1px solid var(--avc-line);
}
.avc-filter__search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.avc-filter__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #a8afb8;
	line-height: 0;
}
.avc-filter__icon svg {
	width: 17px;
	height: 17px;
}
.avc-filter__search input {
	width: 100%;
	padding: 11px 13px 11px 36px;
	font-size: 15px;
	border: 1px solid #d3d7dd;
	border-radius: 9px;
	background: #fff;
	box-sizing: border-box;
}
.avc-filter__search input:focus {
	outline: none;
	border-color: var(--avc-accent);
	box-shadow: 0 0 0 3px rgba(214, 51, 108, .12);
}
.avc-filter__submit {
	flex: none;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--avc-accent);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}
.avc-filter__submit:hover {
	filter: brightness(1.06);
}

/* --- ブロック --- */
.avc-filter__block {
	padding: 14px 16px;
	border-bottom: 1px solid var(--avc-line);
}
.avc-filter__block:last-child {
	border-bottom: 0;
}
.avc-filter__block--split {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.avc-filter__col {
	min-width: 0;
}
.avc-filter__col--order {
	margin-left: auto;
}
.avc-filter__legend {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #7a828d;
}
.avc-filter__legend em {
	font-style: normal;
	font-weight: 500;
	color: #a8afb8;
	margin-left: 8px;
}
.avc-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.avc-filter__hint {
	margin: 10px 0 0;
	font-size: 11.5px;
	color: #7a828d;
}
.avc-filter__select {
	padding: 8px 10px;
	font-size: 13px;
	border: 1px solid #d3d7dd;
	border-radius: 8px;
	background: #fff;
}

/* --- 五十音 --- */
.avc-rowbtn {
	min-width: 36px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 700;
	color: #58606b;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 8px;
	cursor: pointer;
	transition: all .12s;
}
.avc-rowbtn:hover {
	border-color: var(--avc-accent);
	color: var(--avc-accent);
}
.avc-rowbtn.is-on {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}

/* --- 特徴タグ --- */
.avc-tagbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px 6px 9px;
	font-size: 13px;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: all .12s;
}
.avc-tagbtn input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.avc-tagbtn__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid #cfd4da;
	background: #fff;
	color: transparent;
}
.avc-tagbtn__check svg {
	width: 10px;
	height: 10px;
}
.avc-tagbtn__label {
	font-weight: 600;
}
.avc-tagbtn__n {
	font-size: 10px;
	color: #a8afb8;
}
.avc-tagbtn:hover {
	border-color: var(--avc-accent);
}
.avc-tagbtn:focus-within {
	box-shadow: 0 0 0 3px rgba(214, 51, 108, .18);
}
.avc-tagbtn.is-on {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}
.avc-tagbtn.is-on .avc-tagbtn__check {
	background: #fff;
	border-color: #fff;
	color: var(--avc-accent);
}
.avc-tagbtn.is-on .avc-tagbtn__n {
	color: rgba(255, 255, 255, .78);
}

/* --- 結果の件数 --- */
.avc-filter__result {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}
.avc-filter__count {
	margin: 0;
	font-size: 13px;
	color: #58606b;
}
.avc-filter__count strong {
	font-size: 19px;
	font-weight: 800;
	color: var(--avc-ink);
	margin-right: 2px;
}
/* 絞っていることの断り書き。数字の横に、数字より弱く置く */
.avc-filter__note {
	margin-left: 6px;
	font-size: 12px;
	color: var(--avc-dim);
}
.avc-filter__active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.avc-activechip {
	font-size: 11.5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
	color: #58606b;
}
.avc-filter__clear {
	font-size: 12px;
}

.avc-peoplegrid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px 10px;
}
@media (max-width: 900px) {
	.avc-peoplegrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.avc-pcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.avc-pcard:hover .avc-pcard__name {
	color: var(--avc-accent);
}
.avc-pcard__name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}
.avc-pcard__stat {
	font-size: 10.5px;
	color: var(--avc-dim);
}
.avc-pcard__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
}
.avc-pcard__tags span {
	font-size: 9.5px;
	line-height: 1.6;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
	color: #6b7280;
}

/* ============================================================
   マトリクス
   ============================================================ */
.avc-matrix-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 12px;
	font-size: 11px;
	color: var(--avc-dim);
}
.avc-matrix-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.avc-matrix-legend i {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	display: block;
}
.avc-matrix-legend .is-zero { background: #f1f3f5; border: 1px solid #e2e5e9; }
.avc-matrix-legend .is-low  { background: #f7d3e0; }
.avc-matrix-legend .is-mid  { background: #e88bb1; }
.avc-matrix-legend .is-high { background: #d6336c; }

.avc-matrix-scroll {
	overflow: auto;
	max-height: 78vh;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}
.avc-matrix {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12px;
}
.avc-matrix th,
.avc-matrix td {
	border-right: 1px solid #eef0f2;
	border-bottom: 1px solid #eef0f2;
	padding: 0;
}

/* 行と列の見出しを固定して迷子にならないようにする */
.avc-matrix__corner {
	position: sticky;
	left: 0;
	top: 0;
	z-index: 3;
	background: #f7f8fa;
	min-width: 150px;
	padding: 8px 10px !important;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--avc-dim);
	text-align: left;
	white-space: nowrap;
	vertical-align: bottom;
}
.avc-matrix__corner span {
	display: block;
	line-height: 1.6;
}
.avc-matrix__corner-col {
	color: #6f9bd1;
}
.avc-matrix__corner-row {
	color: #d78bb4;
}
.avc-matrix__colhead {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f7f8fa;
	height: 152px;
	width: 44px;
	min-width: 44px;
	vertical-align: bottom;
}
.avc-matrix__colhead a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	height: 100%;
	padding: 6px 0;
	text-decoration: none;
	color: #4a525c;
	box-sizing: border-box;
}
.avc-matrix__colhead .avc-av--sm {
	width: 30px;
	height: 30px;
	order: 1; /* 顔を名前の上に */
}
.avc-matrix__colname {
	order: 2;
	display: block;
	writing-mode: vertical-rl;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 600;
	max-height: 104px;
	overflow: hidden;
	margin: 0 auto;
}
.avc-matrix__colhead a:hover .avc-matrix__colname {
	color: var(--avc-accent);
}
.avc-matrix__rowhead {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #fff;
	min-width: 150px;
	text-align: left;
}
.avc-matrix__rowhead a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	text-decoration: none;
	color: inherit;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}
.avc-matrix__rowhead a:hover {
	color: var(--avc-accent);
}
.avc-matrix__rowhead .avc-av--sm {
	width: 30px;
	height: 30px;
}

.avc-matrix__cell a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: filter .12s;
}
.avc-matrix__cell a:hover {
	filter: brightness(.92);
	outline: 2px solid var(--avc-accent);
	outline-offset: -2px;
}
.avc-matrix__cell.is-zero a { background: #f8f9fa; color: #cbd0d6; }
.avc-matrix__cell.is-low  a { background: #f9dde7; color: #a03a63; }
.avc-matrix__cell.is-mid  a { background: #e88bb1; color: #fff; }
.avc-matrix__cell.is-high a { background: #d6336c; color: #fff; }

.avc-matrix__note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--avc-dim);
	line-height: 1.7;
}

/* ============================================================
   ランキング
   ============================================================ */
.avc-rankcards {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 8px;
	counter-reset: none;
}
.avc-rankcard a {
	display: grid;
	grid-template-columns: 26px auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 11px;
	transition: border-color .15s, box-shadow .15s;
}
.avc-rankcard a:hover {
	border-color: var(--avc-accent);
	box-shadow: 0 4px 14px rgba(214, 51, 108, .12);
}
.avc-rankcard__no {
	font-size: 13px;
	font-weight: 800;
	color: #c3c9d1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.avc-rankcard:nth-child(1) .avc-rankcard__no { color: #d4a017; }
.avc-rankcard:nth-child(2) .avc-rankcard__no { color: #9aa3ad; }
.avc-rankcard:nth-child(3) .avc-rankcard__no { color: #b0764a; }
.avc-rankcard__body {
	min-width: 0;
}
.avc-rankcard__name {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avc-rankcard__name em {
	font-style: normal;
	font-weight: 400;
	color: #c3c9d1;
	margin: 0 3px;
}
.avc-rankcard__bar {
	display: block;
	height: 4px;
	margin: 4px 0 3px;
	background: #eceef1;
	border-radius: 2px;
	overflow: hidden;
}
.avc-rankcard__bar span {
	display: block;
	height: 100%;
	background: var(--avc-accent);
	opacity: .7;
}
.avc-rankcard__meta {
	display: block;
	font-size: 10.5px;
	color: var(--avc-dim);
}
.avc-rankcards__note {
	margin: 10px 0 0;
	font-size: 11px;
	color: var(--avc-dim);
}

/* ============================================================
   ページャー
   ============================================================ */
.avc-pager {
	margin: 28px 0 0;
	text-align: center;
}
.avc-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-pager__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #58606b;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 9px;
	transition: border-color .15s, color .15s, background .15s;
	box-sizing: border-box;
}
.avc-pager a.page-numbers:hover {
	border-color: var(--avc-accent);
	color: var(--avc-accent);
}
.avc-pager .page-numbers.current {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}
.avc-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 24px;
	padding: 0 2px;
	color: #b3b9c1;
}
.avc-pager__status {
	margin: 12px 0 0;
	font-size: 11px;
	color: var(--avc-dim);
}
@media (max-width: 600px) {
	.avc-pager .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 9px;
		font-size: 13px;
	}
	.avc-pager__label {
		display: none;
	}
}

/* ============================================================
   常設チェッカー（左端の小さなボタン → モーダル）
   ============================================================ */
.avc-dock {
	--avc-accent: #d6336c;
	--avc-line: #e4e6e9;
}

/* --- 開くボタン（丸アイコンだけ。画面を占有しない） --- */
.avc-dock__btn {
	position: fixed;
	z-index: 9990;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(150deg, #e0457a, #a52a86);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(165, 42, 134, .38);
	transition: transform .18s, box-shadow .18s;
}
.avc-dock__btn:hover {
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 8px 22px rgba(165, 42, 134, .5);
}
.avc-dock__icon svg {
	width: 23px;
	height: 23px;
	display: block;
}

/* ホバーで出る小さなラベル */
.avc-dock__tip {
	position: absolute;
	left: calc(100% + 10px);
	white-space: nowrap;
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #2b303a;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-4px);
	transition: opacity .15s, transform .15s;
}
.avc-dock__tip::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-right-color: #2b303a;
}
.avc-dock__btn:hover .avc-dock__tip,
.avc-dock__btn:focus-visible .avc-dock__tip {
	opacity: 1;
	transform: translateX(0);
}
.avc-dock.is-open .avc-dock__btn {
	opacity: 0;
	pointer-events: none;
}

/* display を指定した要素は hidden 属性が効かなくなるので明示的に消す */
.avc-dock__modal[hidden],
.avc-dock__backdrop[hidden] {
	display: none !important;
}

/* --- 背景 --- */
.avc-dock__backdrop {
	position: fixed;
	inset: 0;
	z-index: 9991;
	background: rgba(15, 18, 22, .55);
	backdrop-filter: blur(3px);
	animation: avc-fade-in .16s ease;
}
@keyframes avc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- モーダル --- */
.avc-dock__modal {
	position: fixed;
	z-index: 9992;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(680px, calc(100vw - 32px));
	max-height: min(84vh, 780px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
	animation: avc-modal-in .18s ease;
}
@keyframes avc-modal-in {
	from { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.avc-dock__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--avc-line);
}
.avc-dock__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
}
.avc-dock__close {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #f1f3f5;
	color: #58606b;
	cursor: pointer;
}
.avc-dock__close:hover {
	background: #e6e9ec;
}
.avc-dock__close svg {
	width: 17px;
	height: 17px;
}
.avc-dock__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	-webkit-overflow-scrolling: touch;
}
.avc-dock__body .avc-checker {
	margin-bottom: 0;
}
/* モーダルの幅では横並びが窮屈なので縦に積む */
.avc-dock__body .avc-checker__form {
	grid-template-columns: 1fr;
	gap: 10px;
}
.avc-dock__body .avc-checker__x {
	justify-self: center;
	padding: 0;
	font-size: 13px;
}
.avc-dock__body .avc-checker__submit {
	width: 100%;
}
.avc-dock__body .avc-result {
	padding: 16px;
}
.avc-dock__body .avc-works {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

/* --- スマホ --- */
@media (max-width: 782px) {
	.avc-dock__btn {
		left: 14px;
		top: auto;
		bottom: 82px;
		width: 46px;
		height: 46px;
		transform: none;
	}
	.avc-dock__btn:hover {
		transform: scale(1.06);
	}
	.avc-dock__tip {
		display: none;
	}
	.avc-dock__modal {
		width: calc(100vw - 20px);
		max-height: 88vh;
	}
	.avc-dock__body {
		padding: 14px;
	}
}

/* ============================================================
   スマホ調整
   ============================================================ */
@media (max-width: 600px) {
	.avc-page {
		font-size: 15px;
	}
	.avc-section {
		margin: 28px 0;
	}
	.avc-page__title {
		font-size: 1.24rem;
	}
	.avc-h--2 {
		font-size: 1rem;
		padding-left: 10px;
		border-left-width: 3px;
	}
	.avc-h {
		flex-wrap: wrap;
		gap: 6px;
	}

	/* プロフィール */
	.avc-profile {
		padding: 18px 16px;
		gap: 14px;
	}
	.avc-profile__name {
		font-size: 1.3rem;
	}
	.avc-profile__stats {
		justify-content: center;
		gap: 18px;
	}
	.avc-profile__stats > li > span {
		font-size: 18px;
	}

	/* 共演ランキングは1列 */
	.avc-rank {
		grid-template-columns: 1fr;
	}
	.avc-rank__link {
		grid-template-columns: 18px auto minmax(0, 1fr) 46px;
		gap: 8px;
	}

	/* 作品グリッドは2列固定 */
	.avc-works {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.avc-work__title {
		font-size: 11.5px;
	}

	/* 人物タイル */
	.avc-ptiles {
		gap: 14px 8px;
	}
	.avc-peoplegrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 8px;
	}
	.avc-ptiles--sm {
		grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
	}

	/* 作品ページ */
	.avc-workhead {
		gap: 18px;
	}
	.avc-workhead__thumb {
		width: 100%;
	}
	.avc-workhead__title {
		font-size: 1.1rem;
	}
	.avc-spec {
		font-size: 12.5px;
	}
	.avc-spec span {
		width: 5.4em;
	}
	.avc-cast {
		gap: 18px;
	}
	.avc-pairlist {
		grid-template-columns: 1fr;
	}
	.avc-samples {
		column-width: 110px;
		column-count: 3;
		column-gap: 6px;
	}
	.avc-samples a {
		margin-bottom: 6px;
	}

	/* アーカイブ */
	.avc-archhead {
		padding: 18px 16px;
	}
	.avc-archhead__name {
		font-size: 1.3rem;
	}
	.avc-facepanel {
		gap: 22px;
	}

	/* CTA */
	.avc-cta,
	.avc-cta--inline {
		margin: 26px 0;
		padding: 16px 14px;
	}

	/* トップ */
	.avc-hero {
		padding: 22px 15px 20px;
		border-radius: 14px;
	}
	.avc-hero__lead {
		font-size: 12.5px;
		margin-bottom: 18px;
	}
	.avc-hero__stats {
		gap: 8px 18px;
	}
	.avc-hero__stats > li > span {
		font-size: 18px;
	}
	/* 2列に小さく並べるより、説明つきの1列のほうが読める */
	.avc-homelinks {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 28px;
	}
	.avc-homelink {
		align-items: center;
		gap: 13px;
		padding: 13px 14px;
	}
	.avc-homelink__icon {
		width: 42px;
		height: 42px;
	}
	.avc-homelink__body {
		flex: 1;
	}
	.avc-homelink__label {
		font-size: 15px;
	}
	.avc-homelink__desc {
		font-size: 11.5px;
		line-height: 1.65;
	}
	.avc-homelink__arrow {
		display: block;
	}

	/* ランキング・マトリクス */
	.avc-rankcards {
		grid-template-columns: 1fr;
	}
	.avc-matrix__corner,
	.avc-matrix__rowhead {
		min-width: 118px;
	}
	.avc-matrix__rowhead a {
		font-size: 11.5px;
		gap: 6px;
		padding: 4px 7px;
	}
	.avc-matrix__rowhead .avc-av--sm {
		width: 24px;
		height: 24px;
	}
	.avc-matrix__colhead {
		height: 124px;
		width: 36px;
		min-width: 36px;
	}
	.avc-matrix__colhead .avc-av--sm {
		width: 24px;
		height: 24px;
	}
	.avc-matrix__colname {
		font-size: 10.5px;
		max-height: 84px;
	}

	/* 人物一覧 */
	.avc-filter__main,
	.avc-filter__block {
		padding: 12px 13px;
	}
	.avc-filter__search input {
		font-size: 16px;
	}
	.avc-filter__search input::placeholder {
		font-size: 13.5px;
	}
	.avc-filter__block--split {
		flex-direction: column;
		gap: 14px;
	}
	.avc-filter__col--order {
		margin-left: 0;
		width: 100%;
	}
	.avc-filter__select {
		width: 100%;
	}
	.avc-tagbtn {
		font-size: 12.5px;
		padding: 6px 11px 6px 8px;
	}
	.avc-peoplegrid {
		grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
		gap: 14px 8px;
	}
	.avc-pcard__name {
		font-size: 12px;
	}
	.avc-matrix__cell a {
		height: 34px;
		font-size: 11px;
	}
}

/* 極小画面 */
@media (max-width: 360px) {
	.avc-works {
		grid-template-columns: 1fr;
	}
	.avc-affs {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   新着コメントウィジェット

   コメント欄本体（css/comments.css）とは別にここへ置く。
   ウィジェットはコメント欄が無いページのサイドバーにも出るので、
   全ページで読み込まれる front.css に無いと一瞬だけ素のままになる。
   ============================================================ */
.avc-cmtfeed {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-cmtfeed a {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 0 9px;
	padding: 9px 8px;
	border-radius: 9px;
	text-decoration: none;
	color: inherit;
	transition: background .13s;
}
.avc-cmtfeed a:hover {
	background: #f7f8fa;
}

/*
 * トップに置くときは、横幅がある。
 * 1列のままだと1件が細長く伸びて、字だけが並んで見える。
 */
.avc-cmtfeed--wide {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 14px;
}
.avc-cmtfeed--wide a { border: 1px solid transparent; }
.avc-cmtfeed--wide a:hover { border-color: var(--avc-line); }
@media (max-width: 700px) {
	.avc-cmtfeed--wide { grid-template-columns: 1fr; }
}
.avc-cmtfeed__av {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.avc-cmtfeed__body {
	min-width: 0;
}
.avc-cmtfeed__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.6;
	color: #33383f;
}
.avc-cmtfeed__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 10.5px;
	color: #8b929e;
}
.avc-cmtfeed__kind {
	flex: none;
	padding: 1px 6px;
	border-radius: 3px;
	background: #eef0f3;
	font-weight: 700;
}
.avc-cmtfeed__where {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
   お気に入り

   ボタンは女優・男優・共演ページ、一覧は /favorites/、
   コンパクト版はサイドバーウィジェット。
   押下状態は js/favorites.js が塗る（端末ごとに違うため）。
   ============================================================ */
/*
 * プロフィールや判定パネルの直後に置くので、
 * 負のマージンで詰めると上のブロックの角に食い込む。素直に間隔を空ける。
 */
.avc-actbar {
	display: flex;
	justify-content: flex-end;
	margin: 14px 0 4px;
}

.avc-fav {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #6b727c;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, color .15s, background .15s;
}
.avc-fav:hover {
	border-color: #f0b6cd;
	color: var(--avc-accent);
}
.avc-fav:disabled {
	opacity: .55;
	cursor: default;
}
.avc-fav__icon {
	display: flex;
	flex: none;
}
.avc-fav__icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	transition: transform .2s;
}
.avc-fav__n {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: #9aa1ab;
}
.avc-fav__n:empty {
	display: none;
}

.avc-fav.is-on {
	border-color: var(--avc-accent);
	background: var(--avc-accent-soft);
	color: var(--avc-accent);
}
.avc-fav.is-on .avc-fav__icon svg {
	fill: currentColor;
}
.avc-fav.is-on .avc-fav__n {
	color: var(--avc-accent);
}
.avc-fav.is-pop .avc-fav__icon svg {
	transform: scale(1.32);
}

/* --- /favorites/ --- */
.avc-favload {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 46px 10px;
	font-size: 13px;
	color: var(--avc-dim);
}
.avc-favload__spinner {
	width: 15px;
	height: 15px;
	border: 2px solid #dcdfe4;
	border-top-color: var(--avc-accent);
	border-radius: 50%;
	animation: avc-fav-spin .7s linear infinite;
}
@keyframes avc-fav-spin {
	to { transform: rotate(360deg); }
}

.avc-favempty {
	padding: 40px 22px 34px;
	border: 1px solid var(--avc-line);
	border-radius: 16px;
	background: var(--avc-soft);
	text-align: center;
}
.avc-favempty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #fff;
	color: #e3a7c1;
}
.avc-favempty__icon svg {
	width: 26px;
	height: 26px;
}
.avc-favempty__text {
	margin: 0 auto;
	max-width: 460px;
	font-size: 14px;
	line-height: 1.9;
	color: #4d545e;
}
.avc-favempty__note {
	margin: 10px 0 0;
	font-size: 11.5px;
	color: #98a0ab;
}
.avc-favempty__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
}

/* 汎用の小さめボタン（お気に入り空状態・検索結果などで使う） */
.avc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #4d545e;
	text-decoration: none;
	transition: border-color .15s, color .15s, transform .12s;
}
.avc-btn:hover {
	border-color: var(--avc-accent);
	color: var(--avc-accent);
	transform: translateY(-1px);
}
.avc-btn--primary {
	border-color: transparent;
	background: linear-gradient(135deg, #e0457a, #b52d78);
	color: #fff;
}
.avc-btn--primary:hover {
	color: #fff;
}

/* 共演のタイルは顔が2つ並ぶ */
.avc-ptile__pair {
	display: flex;
	justify-content: center;
	margin-bottom: 2px;
}
.avc-ptile__pair .avc-av + .avc-av {
	margin-left: -10px;
	border: 2px solid #fff;
	box-sizing: content-box;
}

/* 新着作品に「誰が出ているから出てきたか」を添える */
.avc-work__who {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--avc-accent);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- サイドバーウィジェット --- */
.avc-favwidget {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.avc-favwidget__item {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: 0 10px;
	padding: 7px 8px;
	border-radius: 9px;
	text-decoration: none;
	color: inherit;
	transition: background .13s;
}
.avc-favwidget__item:hover {
	background: #f7f8fa;
}
.avc-favwidget__face {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: #eceef1;
	line-height: 0;
}
.avc-favwidget__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.avc-favwidget__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: linear-gradient(135deg, #c9ced6, #aab1bb);
}
.avc-favwidget__body {
	min-width: 0;
}
.avc-favwidget__name {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.avc-favwidget__kind {
	display: block;
	font-size: 10px;
	color: #8b929e;
}

@media (max-width: 700px) {
	.avc-actbar {
		justify-content: stretch;
		margin: 12px 0 4px;
	}
	/* スマホでは押しやすいよう横いっぱいに */
	.avc-fav {
		flex: 1;
		justify-content: center;
		padding: 12px 16px;
		font-size: 14px;
	}
	.avc-favempty {
		padding: 32px 16px 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.avc-fav__icon svg {
		transition: none;
	}
	.avc-favload__spinner {
		animation-duration: 2s;
	}
}

/* お気に入りの読み込みに失敗したとき（「まだ無い」とは別物として出す） */
.avc-favfail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 30px 20px;
	border: 1px solid #f0d5d5;
	border-radius: 14px;
	background: #fdf7f7;
	text-align: center;
}
.avc-favfail__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: #8a4a4a;
}

/* ============================================================
   検索結果
   ============================================================ */
.avc-searchhead {
	margin: 0 0 28px;
	padding: 22px 22px 20px;
	border: 1px solid var(--avc-line);
	border-radius: 16px;
	background:
		radial-gradient(90% 130% at 12% 0%, rgba(214, 51, 108, .08) 0%, rgba(214, 51, 108, 0) 60%),
		var(--avc-soft);
}
.avc-searchhead__kind {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid var(--avc-line);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--avc-dim);
}
.avc-searchhead__q {
	margin: 10px 0 16px;
	font-size: clamp(1.25rem, 4vw, 1.6rem);
	font-weight: 800;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.avc-searchhead__hint {
	margin: 10px 2px 0;
	font-size: 11.5px;
	line-height: 1.8;
	color: #8b929e;
}
.avc-searchhead__hint code {
	padding: 1px 5px;
	border-radius: 3px;
	background: #fff;
	border: 1px solid var(--avc-line);
	font-size: 11px;
}

.avc-searchbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.avc-searchbox:focus-within {
	border-color: var(--avc-accent);
	box-shadow: 0 0 0 3px var(--avc-accent-soft);
}
.avc-searchbox__icon {
	display: flex;
	flex: none;
	color: #b0b7c0;
}
.avc-searchbox__icon svg {
	width: 17px;
	height: 17px;
}
.avc-searchbox input {
	flex: 1;
	min-width: 0;
	padding: 9px 0;
	border: none;
	background: none;
	font-size: 15px;
	color: var(--avc-ink);
	font-family: inherit;
}
.avc-searchbox input:focus {
	outline: none;
}
.avc-searchbox button {
	flex: none;
	padding: 10px 22px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #e0457a, #b52d78);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

/* 品番が一致したときの一枚だけのカード */
.avc-hitcard {
	margin: 0 0 26px;
	padding: 16px;
	border: 1px solid #f0c9da;
	border-radius: 14px;
	background: #fff8fb;
}
.avc-hitcard__tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 2px 10px;
	border-radius: 4px;
	background: var(--avc-accent);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
}
.avc-works--one {
	grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
}

/* 女優と男優が1人ずつ当たったときの導線 */
.avc-pairhint {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	padding: 14px 18px;
	border: 1px solid var(--avc-line);
	border-radius: 14px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .12s, box-shadow .15s;
}
.avc-pairhint:hover {
	border-color: var(--avc-accent);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(214, 51, 108, .12);
}
.avc-pairhint__faces {
	display: flex;
	flex: none;
}
.avc-pairhint__faces .avc-av + .avc-av {
	margin-left: -12px;
	border: 2px solid #fff;
	box-sizing: content-box;
}
.avc-pairhint__body {
	flex: 1;
	min-width: 0;
}
.avc-pairhint__names {
	display: block;
	font-size: 15px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.avc-pairhint__names em {
	margin: 0 6px;
	font-style: normal;
	color: #c3c9d1;
}
.avc-pairhint__note {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--avc-accent);
}
.avc-pairhint__arrow {
	flex: none;
	font-size: 22px;
	color: #c3c9d1;
}

.avc-searchempty {
	padding: 40px 22px;
	border: 1px solid var(--avc-line);
	border-radius: 16px;
	background: var(--avc-soft);
	text-align: center;
}
.avc-searchempty__text {
	margin: 0 auto;
	max-width: 460px;
	font-size: 14px;
	line-height: 1.9;
	color: #4d545e;
}
.avc-searchempty__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
}

.avc-artlist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--avc-line);
}
.avc-artlist li {
	border-bottom: 1px solid var(--avc-line);
}
.avc-artlist a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 6px;
	text-decoration: none;
	color: inherit;
	transition: background .13s;
}
.avc-artlist a:hover {
	background: var(--avc-soft);
}
.avc-artlist__title {
	font-size: 14px;
	font-weight: 600;
}
.avc-artlist__date {
	flex: none;
	font-size: 11px;
	color: var(--avc-dim);
}

@media (max-width: 700px) {
	.avc-searchhead {
		padding: 16px 15px 15px;
	}
	.avc-searchbox {
		padding: 5px 5px 5px 12px;
	}
	.avc-searchbox input {
		/* 16px 未満だと iOS が自動ズームする */
		font-size: 16px;
	}
	.avc-searchbox input::placeholder {
		font-size: 13.5px;
	}
	.avc-searchbox button {
		padding: 9px 16px;
		font-size: 13px;
	}
	.avc-pairhint {
		padding: 12px 14px;
		gap: 11px;
	}
	.avc-pairhint__names {
		font-size: 14px;
	}
	.avc-searchempty {
		padding: 30px 16px;
	}
}

/* ============================================================
   週ナビ（作品一覧）

   haramase の週別新作画面と同じ操作感。
   独立した帯にして、左に「いつを見ているか」、右に移動を置く。
   絞り込みカードに混ぜると、ただの条件のひとつに見えて弱くなる。
   ============================================================ */
.avc-weeknav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	background: var(--avc-soft);
}
.avc-weeknav.is-on {
	border-color: #f0c9da;
	background:
		radial-gradient(90% 140% at 8% 0%, rgba(214, 51, 108, .09) 0%, rgba(214, 51, 108, 0) 60%),
		#fff;
}

/* 日付入力を重ねるので、位置の基準にする */
.avc-weeknav__pick {
	position: relative;
}
.avc-weeknav__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	font-weight: 800;
	color: var(--avc-ink);
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: border-color .15s, background .15s;
}
.avc-weeknav__btn:hover {
	border-color: var(--avc-accent);
}
.avc-weeknav__icon {
	display: flex;
	flex: none;
	color: var(--avc-accent);
}
.avc-weeknav__icon svg {
	width: 17px;
	height: 17px;
}
.avc-weeknav__range {
	font-variant-numeric: tabular-nums;
}
.avc-weeknav__now {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--avc-accent);
	font-size: 10.5px;
	font-weight: 700;
	color: #fff;
}

/*
 * 入力欄はボタンの上に完全に重ねて透明にする。
 * クリックを受けるのはこちら側なので、カレンダーがその場で開く。
 */
.avc-weeknav__date {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.avc-weeknav__arrows {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.avc-weeknav__off {
	margin-left: 4px;
	font-size: 11.5px;
	color: #98a0ab;
	text-decoration: underline;
	white-space: nowrap;
}
.avc-weeknav__off:hover {
	color: var(--avc-accent);
}

/* --- 丸いボタン（週の移動と、出演者の絞り込みで共通） --- */
.avc-weeknav__arrow,
.avc-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 15px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #5c636d;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, color .15s, transform .12s;
}
.avc-weeknav__arrow:hover,
.avc-pill:hover {
	border-color: var(--avc-accent);
	color: var(--avc-accent);
	transform: translateY(-1px);
}
.avc-weeknav__arrow.is-today,
.avc-pill.is-on {
	border-color: transparent;
	background: linear-gradient(135deg, #e0457a, #b52d78);
	color: #fff;
}
.avc-weeknav__arrow.is-today:hover,
.avc-pill.is-on:hover {
	color: #fff;
}

@media (max-width: 700px) {
	.avc-weeknav {
		flex-direction: column;
		align-items: stretch;
		padding: 11px 12px;
	}
	.avc-weeknav__btn {
		width: 100%;
		justify-content: center;
	}
	.avc-weeknav__arrows {
		width: 100%;
	}
	/* 前の週・次の週で横幅を分け合う。「今週」と解除は自然幅のまま */
	.avc-weeknav__arrow:not(.is-today) {
		flex: 1;
		justify-content: center;
		padding: 9px 8px;
	}
	.avc-weeknav__off {
		flex: 1 0 100%;
		margin: 2px 0 0;
		text-align: center;
	}
	.avc-pill {
		padding: 9px 14px;
		font-size: 13px;
	}
}

/* ============================================================
   絞り込みカードの「年 × 並び順」の行

   どちらも一覧の出しかたを決めるものなので横に並べる。
   片方だけ右端に寄せると、関係のないものが浮いて見える。
   ============================================================ */
.avc-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 20px;
}
.avc-filter__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.avc-filter__field .avc-filter__legend {
	margin: 0;
}
.avc-filter__field .avc-filter__select {
	min-width: 190px;
}
/* 注記は行を折り返して下に回す */
.avc-filter__row .avc-filter__hint {
	flex: 1 0 100%;
	margin: 0;
}

@media (max-width: 700px) {
	.avc-filter__row {
		gap: 12px;
	}
	.avc-filter__field {
		flex: 1 0 100%;
	}
	.avc-filter__field .avc-filter__select {
		width: 100%;
		min-width: 0;
		/* 16px 未満だと iOS が自動ズームする */
		font-size: 16px;
	}
}

/* ============================================================
   別名義（女優名の末尾のカッコ書き）

   ターム名は「深田えいみ（旧名義）」のまま持っておき、
   表示のときだけ本体と別名義に分ける（avc_person_name_html）。
   本体はそのままの大きさ、別名義は下に小さく薄く。
   ============================================================ */
.avc-name {
	display: block;
	min-width: 0;
}
.avc-name__base {
	display: block;
}
.avc-name__alias {
	display: block;
	margin-top: 2px;
	font-size: 0.78em;
	font-weight: 400;
	line-height: 1.3;
	color: var(--avc-dim);
	/* 別名義が長くても、本体の行数を押し出さない */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * 人物タイル（checker.css の .avc-ptile__name が2行で切っている）。
 * そのままだと本体と別名義を合わせて2行に切られ、別名義が消える。
 * 切るのは本体だけにする。
 */
.avc-ptile__name {
	display: block;
	-webkit-line-clamp: none;
}
.avc-ptile__name .avc-name__base {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: auto-phrase;
	line-break: strict;
}
.avc-ptile__name .avc-name__alias {
	font-size: 10px;
}

/* 一覧カード */
.avc-pcard__name .avc-name__alias {
	font-size: 10px;
}

/* ランキングのカード（1行に収める作り） */
.avc-rankcard__name {
	white-space: normal;
}
.avc-rankcard__name .avc-name__base {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avc-rankcard__name .avc-name__alias {
	font-size: 10.5px;
}

/*
 * 大きな見出しは em だと別名義まで大きくなるので固定にする。
 *
 * 女優ページの見出しはすぐ下にふりがな行が続く。
 * 別名義がふりがなと同じ見た目で並ぶと、どちらが読みなのか分からないので、
 * ここだけ「別名義」と添えて区別する。
 */
.avc-profile__name .avc-name__alias,
.avc-archhead__name .avc-name__alias {
	margin-top: 5px;
	font-size: 12.5px;
	letter-spacing: 0.02em;
}
.avc-profile__name .avc-name__alias::before,
.avc-archhead__name .avc-name__alias::before {
	content: "別名義";
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 10px;
	line-height: 1.4;
	vertical-align: 1px;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.avc-profile__name .avc-name__alias,
	.avc-archhead__name .avc-name__alias {
		font-size: 12px;
	}
}

/* ============================================================
   長い一覧を畳む（もっと見る）

   【隠すだけで、消さない】
   中身は最初から書き出してある。読み込み直しも問い合わせも起きないし、
   検索する側からは全部見えている。
   ============================================================ */
.avc-fold2 { position: relative; }

/*
 * 直下の入れ物（グリッドや一覧）の、何番目から先を隠すか。
 * nth-child に変数は使えないので、使う数だけ用意する。
 */
.avc-fold2--6:not(.is-open) > :first-child > *:nth-child(n+7),
.avc-fold2--10:not(.is-open) > :first-child > *:nth-child(n+11),
.avc-fold2--12:not(.is-open) > :first-child > *:nth-child(n+13),
.avc-fold2--18:not(.is-open) > :first-child > *:nth-child(n+19),
.avc-fold2--24:not(.is-open) > :first-child > *:nth-child(n+25) {
	display: none;
}

/* 開いたら、ボタンは用済み */
.avc-fold2.is-open .avc-fold2__more { display: none; }

.avc-fold2__more {
	margin: 14px 0 0;
	text-align: center;
}

/* 「◯◯へ」のボタン（.avc-more）と同じ手ざわりにする */
.avc-fold2__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 22px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--avc-accent);
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s;
}
.avc-fold2__btn:hover {
	background: var(--avc-accent);
	border-color: var(--avc-accent);
	color: #fff;
}
.avc-fold2__btn i { font-size: 10px; }

/* ------------------------------------------------------------
   新作が途切れている女優

   並びは人物タイルに合わせる（他の画面と同じ見え方にする）。
   足すのは「どのくらい出ていないか」と、分かっている場合の印だけ。
   ------------------------------------------------------------ */
.avc-tglist {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px 10px;
}
@media (max-width: 900px) {
	.avc-tglist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.avc-tglist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.avc-tgcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
.avc-tgcard .avc-ptile { width: 100%; }

/* どのくらい出ていないか。数字が主役なので、名前より小さく */
.avc-tgcard__span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--avc-accent);
}

/*
 * 印は分かっているものだけ。
 *
 * 【色で種類を分けない】
 * 5種類を5色にすると、色の意味を覚えないと読めない表になる。
 * 何が起きたかは字がそのまま言っているので、形は1つでいい。
 */
.avc-tgbadge {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: var(--avc-soft);
	font-size: 10.5px;
	line-height: 1.7;
	color: #555;
	white-space: nowrap;
}

/* 印の凡例 */
.avc-tglegend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 18px;
}
.avc-tglegend__note {
	font-size: 11.5px;
	color: var(--avc-dim);
	margin-left: 4px;
}

/* トップに置くときは1行に収める */
.avc-tglist--home {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 600px) {
	.avc-tglist--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   この組み合わせのほかの共演作

   組ごとに、誰と誰かを先に見せてから作品を並べる。
   誰の作品なのか分からないまま並んでいても、押す気にならない。
   ------------------------------------------------------------ */
.avc-samepair__group + .avc-samepair__group {
	margin-top: 26px;
}

.avc-samepair__pair {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 6px 14px 6px 8px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s;
}
.avc-samepair__pair:hover { border-color: var(--avc-accent); }

.avc-samepair__faces { display: flex; flex: 0 0 auto; }
.avc-samepair__faces .avc-av + .avc-av {
	margin-left: -10px;
	border: 2px solid #fff;
	box-sizing: content-box;
}

.avc-samepair__name {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}
.avc-samepair__name em {
	font-style: normal;
	margin: 0 3px;
	color: var(--avc-dim);
}
.avc-samepair__pair:hover .avc-samepair__name { color: var(--avc-accent); }

.avc-samepair__n {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--avc-accent);
}
.avc-samepair__n small {
	font-size: 10.5px;
	font-weight: 400;
	margin-left: 1px;
	color: var(--avc-dim);
}

@media (max-width: 600px) {
	.avc-samepair__pair {
		display: flex;
		width: 100%;
		box-sizing: border-box;
	}
	.avc-samepair__name { min-width: 0; flex: 1 1 auto; font-size: 12.5px; }
}
/* ------------------------------------------------------------
   組み合わせの名前を、名前の途中で折り返さない

   日本語はどこでも改行できるのが既定なので、
   枠に収まらないと男優名が途中で割れて、2行目が女優名の真下から始まる。
   **男優名のはみ出しが女優名にかかっている**ように見えて、座りが悪い。

       吉沢明歩 × セツネヒ
       デユキ

   keep-all にすると割れるのは空白のところだけになる。
   このサイトの表記は「名前␣×␣名前」なので、自然と × で折り返す。

       吉沢明歩 ×
       セツネヒデユキ

   overflow-wrap: anywhere は、1つの名前が枠より長いときの逃げ道。
   ほかに切れるところが無いときだけ効くので、上の並びは崩さない。
   ------------------------------------------------------------ */
.avc-rankcard__name,
.avc-pairlist__names,
.avc-pairhint__names,
.avc-pairwidget__name,
.avc-samepair__name {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
/* ------------------------------------------------------------
   作品カードの出演者

   【高さを固定する】
   出演者の分からない作品だけ行が足りないと、カードの高さがそろわず
   並びががたつく。「出演情報なし」も同じ高さで置く。

   【重ねて置く】
   1人ずつ入れ替えるので、全員を重ねて透明度だけ変える。
   横に並べて動かすと、幅で位置が変わって落ち着かない。
   ------------------------------------------------------------ */
.avc-wcast {
	position: relative;
	display: block;
	height: 22px;
	margin: 4px 0 2px;
	overflow: hidden;
}
.avc-wcast.is-none {
	display: flex;
	align-items: center;
	font-size: 11px;
	color: var(--avc-dim);
}

.avc-wcast__i {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
/* 1人だけのときは重ねない（動かないので、そのまま置けばいい） */
.avc-wcast.is-slide .avc-wcast__i {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.avc-wcast.is-slide .avc-wcast__i.is-on { opacity: 1; }

.avc-wcast__n {
	font-size: 11.5px;
	line-height: 1.2;
	color: var(--avc-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 動きを嫌う設定なら、溶暗もしない（JS 側で入れ替えも止めている） */
@media ( prefers-reduced-motion: reduce ) {
	.avc-wcast.is-slide .avc-wcast__i { transition: none; }
}
/* ------------------------------------------------------------
   男の娘・ニューハーフ女優

   扱いは女優のままなので、色や形で「別のもの」に見せない。
   肩書きは長くなるぶんだけ字を詰め、出演欄は区切り線で分ける。
   ------------------------------------------------------------ */
.avc-profile__role.is-trans,
.avc-person__role.is-trans {
	letter-spacing: 0;
	font-size: 10.5px;
}

/* 出演欄：分けたほうは、区切りが分かる程度に */
.avc-cast__col.is-trans {
	border-top: 1px dashed var(--avc-line);
	padding-top: 12px;
}
.avc-cast__col.is-trans .avc-cast__label i {
	margin-right: 4px;
	font-size: 10px;
	opacity: .65;
}

@media (min-width: 768px) {
	/* 横並びのときは、線を左に置いて列の区切りにする */
	.avc-cast__col.is-trans {
		border-top: 0;
		padding-top: 0;
	}
}
/* 絞り込みのアイコン（選ぶ前から見える） */
.avc-tagbtn__icon {
	flex: none;
	font-size: 12px;
	color: var(--avc-dim);
	margin-right: -1px;
}
.avc-tagbtn.is-on .avc-tagbtn__icon { color: inherit; }
/* 入口のページの見出しアイコン（主張させない） */
.avc-page__icon {
	margin-right: 8px;
	font-size: .8em;
	color: var(--avc-accent);
	opacity: .8;
}
/*
 * 一覧の上に置く絞り込み帯（作品・動画）
 *
 * 【帯を足したら、必ずここにも足す】
 * この帯の中身はリンクなので、打ち消さないとテーマの青字と下線が出る。
 * 隣の帯と色が違うと、同じ働きのものに見えない。
 */
.avc-transfilter,
.avc-amafilter {
	margin: 0 0 16px;
}
/*
 * リンクの色と下線を打ち消すのは、**選ばれていないほうだけ**。
 * 全部に掛けると .avc-tagbtn.is-on の白字を潰してしまい、
 * 濃い背景の上に黒い字が残る（詳細度が同じで、こちらが後ろにある）。
 */
.avc-transfilter .avc-tagbtn,
.avc-amafilter .avc-tagbtn {
	text-decoration: none;
}
.avc-transfilter .avc-tagbtn:not(.is-on),
.avc-amafilter .avc-tagbtn:not(.is-on) {
	color: inherit;
}

/* 入口へ送るボタンは、共演の一覧より前に置くので少し空ける */
.avc-more--lead {
	margin: 0 0 18px;
}
/* 共演相手を分けて並べるときの、後ろ側の見出し */
.avc-castsplit {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed var(--avc-line);
}
.avc-castsplit .avc-cast__label i {
	margin-right: 4px;
	font-size: 10px;
	opacity: .65;
}
/* 2人ぶんの行き先を並べる */
.avc-more--both {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
/*
 * 共演相手の札に付ける「レズあり」
 *
 * この2人で一緒に出た作品にレズものがある、という印。
 * 名前と本数の下に小さく。主張させると、共演本数のほうが読めなくなる。
 */
.avc-lezbadge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	/*
	 * ここだけ淡い色を置く。
	 * 共演相手が何十人も並ぶ中で「これ」と見つけてもらう印なので、
	 * 枠だけだと埋もれる。ただしサイトの accent（濃いピンク）は
	 * 見出しやボタンで使っているので、そちらとは違う淡さにする。
	 */
	background: #fdeef5;
	color: #c2185b;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}
.avc-lezbadge i { font-size: 9.5px; }

/* --- 出演情報ファクトチェック ------------------------------------ */
/*
 * 出演の欄のすぐ下。
 * 「間違っているかも」と思ったその場で押せる位置に置く。
 *
 * 目立たせすぎない。ここは作品を見に来た人の導線ではなく、
 * 気づいた人だけが使う出口なので、出演者の表示より前に出てはいけない。
 */
.avc-factcheck {
	margin: 14px 0 0;
}
.avc-factcheck__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	color: #3c4450;
	transition: border-color .15s, background .15s;
}
.avc-factcheck__btn:hover {
	border-color: #c9ced6;
	background: var(--avc-soft);
	text-decoration: none;
}
/*
 * Google のマークは4色そのまま。
 * ボタン全体を塗ると広告に見えるので、色はマークだけに乗せる。
 * 大きさは文字に合わせる（拡大しても字とずれない）。
 */
.avc-factcheck__btn .avc-gicon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}
.avc-factcheck__note {
	margin: 7px 0 0;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--avc-dim);
}

/* --- 言葉で探す（作品一覧・セール） --------------------------- */
/*
 * 絞り込みの中に置く。
 * 独立した検索窓にすると、いま何で絞っているのかが2か所に散る。
 */
.avc-filter__field--kw { flex: 1 1 100%; }
.avc-kwbox {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.avc-kwbox .avc-filter__text {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--avc-line);
	border-radius: 8px;
	background: #fff;
	color: var(--avc-ink);
}
.avc-kwbox .avc-filter__text:focus {
	outline: none;
	border-color: var(--avc-accent);
}
.avc-kwbox__go {
	flex: 0 0 auto;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var(--avc-accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.avc-kwbox__go:hover { opacity: .88; }

/*
 * 仮表示の帯（管理画面から「本番の見え方を見る」で開いたとき）
 *
 * 本物と同じ画面に出すので、そのままだと本物と見分けが付かない。
 * 保存済みだと思って閉じられるのがいちばん困るので、上に断りを置く。
 */
.avc-nfprev {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.6;
	color: #6b4a00;
	background: #fff6da;
	border: 1px solid #f0d795;
	border-radius: 8px;
}
.avc-nfprev__tag {
	flex: none;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: #c08a00;
	border-radius: 999px;
}
.avc-nfprev__x {
	margin-left: auto;
	padding: 4px 14px;
	font-size: 12px;
	font-weight: 700;
	color: #6b4a00;
	background: #fff;
	border: 1px solid #e2cb8e;
	border-radius: 999px;
	cursor: pointer;
}
.avc-nfprev__x:hover { background: #fdf2d6; }

/* --- 注目の新人女優 ------------------------------------------- */
/*
 * 【1枚絵は、画像を焼かずに重ねる】
 * 横長の背景の左右どちらかに縦長の人物写真を置き、
 * 内側へ向かって溶かして混ぜる。
 * 空いた側が、そのまま文字を置く場所になる。
 *
 * サーバで画像を焼くと、背景を変えるたびに全員ぶん焼き直すことになる。
 * 重ねるだけなら、背景を差し替えた瞬間に全員へ効く。
 *
 * 色はプリセットから --nf-back / --nf-fore / --nf-mix で渡ってくる。
 * ここに全プリセットぶんの規則を書くと、増やすたびに2か所を直すことになる。
 */
.avc-nflist {
	display: grid;
	gap: 22px;
	margin: 22px 0 0;
}

.avc-nf {
	position: relative;
	display: grid;
	min-height: 300px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--nf-back, #222);
	isolation: isolate;   /* 混ぜる層を、この枠の外へ効かせない */
}

/*
 * 人物を左に置くなら、文字は右。逆も同じ。
 * 幅は女優ごとに決められる（--nf-split）。
 * 写真の寄り方は1枚ずつ違うので、一律の数字では必ずどこかで顔が切れる。
 */
.avc-nf--left  { grid-template-columns: var(--nf-split, 46%) 1fr; }
.avc-nf--right { grid-template-columns: 1fr var(--nf-split, 46%); }
.avc-nf--left  .avc-nf__figure { grid-column: 1; }
.avc-nf--left  .avc-nf__body   { grid-column: 2; }
.avc-nf--right .avc-nf__figure { grid-column: 2; }
.avc-nf--right .avc-nf__body   { grid-column: 1; }

/* 奥の背景。枠いっぱいに敷く */
.avc-nf__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(80% 120% at 15% 100%, var(--nf-fore, #666) 0%, transparent 62%),
		radial-gradient(70% 90% at 95% 0%, var(--nf-mix, #999) 0%, transparent 58%),
		linear-gradient(115deg, var(--nf-back, #222) 0%, var(--nf-fore, #666) 130%);
}

/*
 * 【マスクは枠に掛ける】
 * 拡大を写真に掛けるので、マスクまで写真に掛けると
 * 溶けた縁ごと拡大され、境目が枠の外へ出て切れて見える。
 * 枠を溶かし、中の写真だけを動かす。
 */
.avc-nf__figure {
	position: relative;
	z-index: 1;
	display: block;
	align-self: stretch;
	overflow: hidden;
	-webkit-mask-image:
		linear-gradient(90deg, #000 0%, #000 calc(100% - var(--nf-feather, 44%)), transparent 100%),
		linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
	mask-image:
		linear-gradient(90deg, #000 0%, #000 calc(100% - var(--nf-feather, 44%)), transparent 100%),
		linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.avc-nf--right .avc-nf__figure {
	-webkit-mask-image:
		linear-gradient(270deg, #000 0%, #000 calc(100% - var(--nf-feather, 44%)), transparent 100%),
		linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
	mask-image:
		linear-gradient(270deg, #000 0%, #000 calc(100% - var(--nf-feather, 44%)), transparent 100%),
		linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
}

/*
 * 人物。
 * 内側の縁をいちばん強く溶かす（そこで背景と出会うため）。
 * 外側・上下も少し溶かすと、貼り付けたようには見えなくなる。
 */
.avc-nf__main {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* どこを見せるか・どこまで寄るかは女優ごと（管理画面でドラッグして決める） */
	object-position: var(--nf-x, 50%) var(--nf-y, 15%);
	transform: scale(var(--nf-zoom, 1));
	transform-origin: var(--nf-x, 50%) var(--nf-y, 15%);
}

/*
 * 混ぜる層。
 * 背景の色を人物の上に薄く乗せて、同じ絵の具で描いたように見せる。
 * soft-light は明暗を残したまま色だけを寄せるので、顔が潰れない。
 */
.avc-nf__wash {
	position: absolute;
	inset: 0;
	mix-blend-mode: soft-light;
	opacity: .8;
	background:
		linear-gradient(90deg, transparent 30%, var(--nf-fore, #666) 100%),
		linear-gradient(180deg, var(--nf-mix, #999) 0%, transparent 55%);
}
.avc-nf--right .avc-nf__wash {
	background:
		linear-gradient(270deg, transparent 30%, var(--nf-fore, #666) 100%),
		linear-gradient(180deg, var(--nf-mix, #999) 0%, transparent 55%);
}

/* --- 文字の側 --- */
.avc-nf__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	padding: 26px 28px;
	color: #fff;
}
.avc-nf__name {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.avc-nf__name a { color: inherit; text-decoration: none; }
.avc-nf__name a:hover { text-decoration: underline; }

.avc-nf__catch {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* 事実は小さく、対で並べる */
.avc-nf__facts { display: flex; gap: 18px; margin: 2px 0 0; flex-wrap: wrap; }
.avc-nf__fact { display: flex; flex-direction: column; gap: 1px; }
.avc-nf__factlabel {
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .62);
}
.avc-nf__factvalue { font-size: 13.5px; font-weight: 700; }

/*
 * デビュー作。
 * ただのリンクにせず、小さな画面を置く。
 * 見えている間だけ、静かに流れる。
 */
.avc-nf__debut {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 8px;
	text-decoration: none;
	color: #fff;
	background: rgba(0, 0, 0, .26);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	backdrop-filter: blur(6px);
	transition: background .18s, border-color .18s;
}
.avc-nf__debut:hover {
	background: rgba(0, 0, 0, .4);
	border-color: rgba(255, 255, 255, .3);
	text-decoration: none;
}
.avc-nf__screen {
	position: relative;
	flex: 0 0 auto;
	width: 108px;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(0, 0, 0, .45);
}
.avc-nf__clip {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 動いている間は、再生の印を消す */
.avc-nf__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: rgba(255, 255, 255, .9);
	background: rgba(0, 0, 0, .3);
	transition: opacity .25s;
}
.avc-nf__debut.is-playing .avc-nf__play { opacity: 0; }
.avc-nf__debut:not(.has-clip) .avc-nf__play { font-size: 13px; }

.avc-nf__debutbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avc-nf__debutlabel {
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .62);
}
.avc-nf__debutname {
	font-size: 12.5px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.avc-nf__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 2px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nf-back, #222);
	background: rgba(255, 255, 255, .94);
	border-radius: 999px;
	text-decoration: none;
	transition: transform .18s, background .18s;
}
.avc-nf__go:hover {
	background: #fff;
	transform: translateX(3px);
	text-decoration: none;
}

/*
 * 【狭いときは縦に積む】
 * 46% の列に文字を入れると、スマホでは1行2文字になる。
 * 人物を上、文字を下にして、溶かす向きも縦へ変える。
 */
@media (max-width: 700px) {
	.avc-nf--left,
	.avc-nf--right {
		grid-template-columns: 1fr;
		/* 縦に積むので、決めるのは高さ。PCの幅とは別に持つ */
		grid-template-rows: var(--nf-split-sp, 220px) auto;
	}
	.avc-nf--left .avc-nf__figure,
	.avc-nf--right .avc-nf__figure { grid-column: 1; grid-row: 1; }
	.avc-nf--left .avc-nf__body,
	.avc-nf--right .avc-nf__body { grid-column: 1; grid-row: 2; }

	.avc-nf--left .avc-nf__main,
	.avc-nf--right .avc-nf__main {
		object-position: var(--nf-x-sp, 50%) var(--nf-y-sp, 20%);
		transform: scale(var(--nf-zoom-sp, 1));
		transform-origin: var(--nf-x-sp, 50%) var(--nf-y-sp, 20%);
	}
	/* 縦に積むので、溶かす向きも縦へ変える */
	.avc-nf--left .avc-nf__figure,
	.avc-nf--right .avc-nf__figure {
		-webkit-mask-image:
			linear-gradient(180deg, #000 0%, #000 calc(100% - var(--nf-feather-sp, 45%)), transparent 100%);
		mask-image:
			linear-gradient(180deg, #000 0%, #000 calc(100% - var(--nf-feather-sp, 45%)), transparent 100%);
	}
	.avc-nf--left .avc-nf__wash,
	.avc-nf--right .avc-nf__wash {
		background: linear-gradient(180deg, transparent 20%, var(--nf-fore, #666) 100%);
	}
	.avc-nf__body { padding: 18px 20px 22px; }
	.avc-nf__name { font-size: 20px; }
}

/*
 * mask に対応していないときは、溶かさず素直に出す。
 * 溶けないだけで、絵が消えるよりはるかにいい。
 */
@supports not (mask-image: linear-gradient(#000, #000)) {
	.avc-nf__figure { -webkit-mask-image: none; mask-image: none; }
	.avc-nf__wash { opacity: .5; }
}

/* --- 新人カード：メーカー・ほかの画像 ------------------------- */
/*
 * メーカーは、名前だけよりロゴが1つあるほうが早く伝わる。
 * ロゴは縦横の比がばらばらなので、枠を決めて contain で収める
 * （cover にすると、横長のロゴが左右を切られて読めなくなる）。
 */
.avc-nf__fact--maker .avc-nf__factvalue {
	display: flex;
	align-items: center;
	gap: 7px;
}
.avc-makerlogo {
	width: auto;
	height: 20px;
	max-width: 67px;
	object-fit: contain;
	/*
	 * 暗い背景に白抜きでないロゴを置くと沈む。
	 * 薄い下地を敷いて、どのロゴでも読めるようにする。
	 */
	padding: 2px 4px;
	background: rgba(255, 255, 255, .9);
	border-radius: 3px;
}
.avc-nf__makername {
	font-size: 13px;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.avc-nf__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.avc-nf__go { margin-top: 0; }

/* ほかの画像を開くボタン。文字を置かず、枚数だけ添える */
.avc-nf__shots {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: rgba(0, 0, 0, .26);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background .18s, border-color .18s;
}
.avc-nf__shots:hover {
	background: rgba(0, 0, 0, .42);
	border-color: rgba(255, 255, 255, .38);
}

/* --- ほかの画像のモーダル --- */
.avc-nfdlg {
	width: min(880px, 92vw);
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: var(--avc-ink);
	overflow: hidden;
}
.avc-nfdlg::backdrop { background: rgba(0, 0, 0, .72); }
.avc-nfdlg__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--avc-line);
}
.avc-nfdlg__title { font-size: 15px; font-weight: 700; }
.avc-nfdlg__close {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--avc-dim);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.avc-nfdlg__close:hover { background: var(--avc-soft); color: var(--avc-ink); }
.avc-nfdlg__body {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	padding: 14px 16px 18px;
	max-height: calc(88vh - 60px);
	overflow-y: auto;
}
/*
 * 縦長の写真をそのまま並べる。
 * ここは「もっと見たい」で開く場所なので、切らずに全体を見せる。
 */
.avc-nfdlg__body img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
	background: var(--avc-soft);
	display: block;
}

/* --- 新人カード：ふりがな --- */
.avc-nf__kana {
	margin: 0 0 -6px;
	font-size: 11px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .7);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* --- ほかの画像：1枚ずつ見る --- */
/*
 * 【画面の真ん中に出す】
 * dialog は既定で上寄りに出る。
 * 大きな絵を見せる場所なので、真ん中に置いて、周りを暗くする。
 */
.avc-nfdlg {
	width: min(560px, 94vw);
	max-width: none;
	max-height: 92vh;
	margin: auto;          /* 上下左右とも中央へ */
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #14161a;
	color: #fff;
	overflow: hidden;
}
.avc-nfdlg::backdrop { background: rgba(0, 0, 0, .82); }

.avc-nfdlg__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px 11px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.avc-nfdlg__title { font-size: 14px; font-weight: 700; }
.avc-nfdlg__count {
	margin-left: auto;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .6);
	font-variant-numeric: tabular-nums;
}
.avc-nfdlg__close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: rgba(255, 255, 255, .7);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.avc-nfdlg__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/*
 * 1枚だけ見せる。
 * 全部を置いたまま表示を切り替えるので、送った瞬間に出る。
 */
.avc-nfdlg__stage {
	position: relative;
	aspect-ratio: 3 / 4;
	max-height: calc(92vh - 54px);
	background: #000;
}
.avc-nfdlg__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;   /* 切らずに全体を見せる */
	display: none;
}
.avc-nfdlg__shot.is-on { display: block; }

.avc-nfdlg__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	cursor: pointer;
	transition: background .18s;
}
.avc-nfdlg__nav:hover { background: rgba(0, 0, 0, .72); }
.avc-nfdlg__nav.is-prev { left: 10px; }
.avc-nfdlg__nav.is-next { right: 10px; }

/* --- 買う場所へ進んだ数 --------------------------------------- */
/*
 * 【NEW やセールとは意味が違う】
 * あちらは作品そのものの状態、こちらは**人の動き**。
 * 同じ列に混ぜると、どれが作品の性質でどれが反応なのか読めなくなる。
 * 上の帯とぶつからないよう、絵の右下に置く。
 *
 * 数字は控えめに。ここは主役ではなく、並んだ中での手がかり。
 */
.avc-hits {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	background: rgba(0, 0, 0, .58);
	border-radius: 999px;
	backdrop-filter: blur(4px);
	pointer-events: none;   /* 絵ごと押せる場所なので、邪魔をしない */
}
.avc-hits i {
	font-size: 9.5px;
	/* 星だけ色を付ける。全部を黄色にすると、警告のように見える */
	color: #ffc93c;
}
.avc-hits__n { font-variant-numeric: tabular-nums; }

/* 動画のサムネは角が丸いので、少し内側へ寄せる */
.avc-vcard__thumb .avc-hits { right: 8px; bottom: 8px; }

/* --- 活躍の推移 ----------------------------------------------- */
/*
 * 【文字は SVG の外に置く】
 * 横幅をいつも一杯にするため、絵（SVG）は伸縮させる。
 * 中に文字を書くと、伸ばしたときに文字まで伸びて、
 * 広い画面では大きすぎ、狭い画面では読めなくなる。
 *
 * 絵だけを SVG に置き、目盛りと年とメーカー名は HTML で重ねる。
 * 場所は両方とも % で決めてあるので、どんな幅でも揃う。
 * 線の太さは vector-effect で戻す。
 *
 * これで横に送る必要が無い（年が多ければ目盛りを間引く）。
 */
.avc-act {
	margin: 4px 0 0;
	padding: 18px 18px 14px;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 14px;
}

.avc-act__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.avc-act__sum { display: flex; align-items: baseline; gap: 6px; }
.avc-act__big {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--avc-ink);
}
.avc-act__unit { font-size: 13px; font-weight: 700; color: var(--avc-ink); }
.avc-act__span {
	margin-left: 6px;
	font-size: 11.5px;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}

.avc-act__keys { display: flex; gap: 14px; }
.avc-act__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--avc-dim);
}
.avc-act__key::before {
	content: "";
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--avc-accent);
}
.avc-act__key.is-solo::before {
	background: none;
	border-top: 2px dashed #9aa3ad;
	height: 0;
}

/*
 * 目盛りのぶんだけ、左右に場所を空ける。
 * 単体率を出すときだけ右も空ける。
 */
.avc-act__frame { position: relative; padding-left: 30px; }
.avc-act__frame.has-right { padding-right: 34px; }

.avc-act__yl,
.avc-act__yr {
	position: absolute;
	top: 0;
	height: 150px;
	width: 30px;
	pointer-events: none;
}
.avc-act__yl { left: 0; }
.avc-act__yr { right: 0; width: 34px; }

.avc-act__yl span,
.avc-act__yr span {
	position: absolute;
	transform: translateY(50%);
	font-size: 10px;
	line-height: 1;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}
.avc-act__yl span { right: 8px; }
.avc-act__yr span { left: 8px; }

/* --- 絵 --- */
.avc-act__plot { position: relative; height: 150px; }
.avc-act__svg { display: block; width: 100%; height: 100%; overflow: visible; }

.avc-act__grid {
	stroke: var(--avc-line);
	stroke-width: 1;
	stroke-dasharray: 2 5;
}
.avc-act__grid.is-edge { stroke-dasharray: none; opacity: .9; }

.avc-act__line {
	fill: none;
	stroke: var(--avc-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.avc-act__area { stroke: none; }

.avc-act__solo {
	fill: none;
	stroke: #9aa3ad;
	stroke-width: 1.6;
	stroke-dasharray: 4 4;
	stroke-linecap: round;
}

/* 年が飛んでいる印。直線で切ると「0本」と読まれる */
.avc-act__wave {
	fill: none;
	stroke: #c8cdd4;
	stroke-width: 1.5;
	stroke-linecap: round;
}
/*
 * 【たたんだ区間の 0 の線】
 * 線がその年の高さのまま切れていたので、
 * 省略した期間も同じくらい出ていたように見えていた。
 *
 * 前後で 0 まで下ろしたうえで、そのあいだも 0 のまま続いていると引く。
 * 波線は「長さを切り詰めた」としか言っておらず、
 * **「0が続いた」ことは誰も言っていなかった。**
 *
 * 本数の線と同じ色にはしない。実際に数えた線と、
 * 省いたところを埋めている線は、別のものなので。
 */
.avc-act__zero {
	stroke: #c8cdd4;
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
	stroke-linecap: round;
}

/* --- 年の目盛り --- */
.avc-act__xaxis { position: relative; height: 18px; margin-top: 4px; }
.avc-act__xaxis span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 10px;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}
/* 飛んでいる年は薄く。並びの中で区別できるように */
.avc-act__xaxis span.is-gap { color: #b9bec6; font-size: 9px; }

/*
 * 【年別ランキングの順位】
 *
 * 図の外に並べると、どの年の話なのかを目で辿ることになり、
 * ただ下にくっついている飾りに見える。
 * **その年の点のそばに置く。** 山の上に出れば、
 * 「この山は3位だった」として読める。
 *
 * 当たり判定は持たせない。持たせると、
 * 順位の付いた年だけ触れなくなる。
 */
.avc-act__rk {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, -100%);
	margin-top: -10px;
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	color: #5b636d;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	pointer-events: none;
}
/* 「位」は添えもの。数字を読ませたいので小さく */
.avc-act__rk small {
	font-size: 8.5px;
	font-weight: 700;
	opacity: .75;
}
/* 点が上すぎる年は、下へ回す（上に出すと図からはみ出す） */
.avc-act__rk.is-below {
	transform: translate(-50%, 0);
	margin-top: 10px;
}
/*
 * 1〜3位は色を変える。
 * 影も艶も付けない。小さい札にそれをやると、
 * **中の数字より枠のほうが目に入る。**
 */
.avc-act__rk.is-m1 { color: #7a5a05; background: #fdf0cd; border-color: #e8ca7a; }
.avc-act__rk.is-m2 { color: #56606b; background: #eef1f4; border-color: #cfd6dd; }
.avc-act__rk.is-m3 { color: #7d4f28; background: #f8e6d6; border-color: #e5c3a5; }

/*
 * 【引退・休止・復帰の印】
 *
 * これは「その年の数字」ではなく、時のほうの話。
 * 点や山と同じ形にすると、値として読まれてしまうので、
 * **縦の線＋上の札**という別の形にする。
 *
 * 線は破線。実線にすると、目盛りの線と見分けが付かない。
 * 色は引退・復帰の一覧と揃えてある（同じ言葉が同じ色で出る）。
 */
.avc-act__evs {
	position: absolute;
	inset: 0;
	z-index: 3;
	/* 線の上でも年に触れたい。札だけ拾う */
	pointer-events: none;
}
.avc-act__ev {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	--evc: #8b929e;
	--evbg: #f2f4f6;
	--evb: #d8dde3;
}
.avc-act__ev.is-retire { --evc: #8a2b3a; --evbg: #f6e5e9; --evb: #e3bfc9; }
.avc-act__ev.is-return { --evc: #1f6b36; --evbg: #e2f1e7; --evb: #b6d9c3; }
.avc-act__ev.is-pause  { --evc: #8a5a1b; --evbg: #fbeedd; --evb: #eccea6; }

.avc-act__evline {
	position: absolute;
	top: 19px;
	bottom: 0;
	left: 0;
	border-left: 1px dashed var(--evc);
	opacity: .55;
}
.avc-act__evtag {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	padding: 1px 8px;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: 999px;
	color: var(--evc);
	background: var(--evbg);
	border: 1px solid var(--evb);
	/* 置いた年が表明日と違う理由は title に入れてある */
	cursor: help;
	pointer-events: auto;
}
/*
 * 隣り合う年に印が並ぶと札どうしが重なる。
 * 片方を1段落として、どちらも読めるようにする。
 */
.avc-act__ev.is-low .avc-act__evtag { top: 21px; }
.avc-act__ev.is-low .avc-act__evline { top: 40px; }

/* --- 触れる場所 --- */
.avc-act__hits { position: absolute; inset: 0; }
.avc-act__hit { position: absolute; top: 0; bottom: 0; }
.avc-act__hit.is-gap { pointer-events: none; }
.avc-act__hit::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 50%;
	width: 1px;
	background: var(--avc-accent);
	opacity: 0;
	transition: opacity .12s;
}
.avc-act__hit.is-on::before { opacity: .22; }

.avc-act__dot {
	position: absolute;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: #fff;
	border: 2.4px solid var(--avc-accent);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .12s, transform .12s;
}
.avc-act__hit.is-on .avc-act__dot { opacity: 1; transform: scale(1); }

/* --- 触れたときの数字 --- */
/*
 * 既定は点の上。
 * 【高い年は下に出す】上に出すと、枠の外へ切れてしまう。
 * どちらに出すかは、置く直前に測って決める（JS が is-below を付ける）。
 */
/*
 * 【狭い画面でも収まるようにする】
 * ひと続きの1行にしていたので、
 * 中身が増えると図からはみ出して**端が読めなくなっていた**。
 * スマホではほぼ毎回そうなる。
 *
 * 折り返しを許して、図の幅を超えないようにする。
 * ひとつひとつの言葉は折らない（「2020年」が2行に割れると読めない）。
 */
.avc-act__tip {
	position: absolute;
	z-index: 3;
	transform: translate(-50%, -100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px 8px;
	max-width: 100%;
	padding: 7px 11px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #fff;
	background: rgba(24, 27, 32, .95);
	border-radius: 8px;
	box-sizing: border-box;
	/*
	 * 詳細そのものは当たり判定を持たない。
	 * 持たせると、下にある年をなぞれなくなる。
	 * 押せる必要があるのはボタンだけなので、そこにだけ付ける。
	 */
	pointer-events: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.avc-act__tipbit { white-space: nowrap; }
.avc-act__tip.is-below { transform: translate(-50%, 0); }
/*
 * 【行き先は、触れた時点から押せる】
 * 留めてからでないと出ないようにしていたが、
 * 留められること自体に気づかれない。
 * 触る画面では、触れると押すが同じ操作なのでなおさら。
 */
.avc-act__tipgo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	color: #181b20;
	background: #fff;
	border-radius: 999px;
	white-space: nowrap;
	/* 詳細は素通しにしてあるので、ここだけ受ける */
	pointer-events: auto;
}
.avc-act__tipgo::after {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
/* 留めているあいだは、そのまま居続けると分かるようにする */
.avc-act__tip.is-pinned { box-shadow: 0 0 0 2px var(--avc-accent), 0 6px 20px rgba(0, 0, 0, .2); }
.avc-act__tipgo:hover { background: var(--avc-accent); color: #fff; }
/* 留めているあいだは、押せる場所だと分かるようにする */
.avc-act__hit { cursor: pointer; }
.avc-act__tip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.avc-act__tipsep {
	display: inline-block;
	width: 1px;
	height: 10px;
	background: rgba(255, 255, 255, .28);
}

/* --- メーカーの帯 --- */
.avc-act__band { position: relative; height: 34px; margin-top: 8px; }
/* 札がはみ出すので、帯の行だけは切らない */
.avc-act__frame { overflow: visible; }
/*
 * 【札は区間からはみ出してよい】
 * 幅に収めようとすると、1年だけの専属が読めなくなる。
 * どの区間に出すかは PHP 側で決めていて、重ならないことは見てある。
 */
.avc-act__seg {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
/*
 * 【--segbg があればそれを地にする】
 * メーカーに色を2つ以上決めてあると、その色を繰り返す模様になる。
 * 1色目が主で、2つめ3つめは細い差し色。
 * 境目は馴染ませてあるので、縞ではなく帯として読める。
 */
.avc-act__segbar {
	position: relative;
	display: block;
	width: calc(100% - 3px);
	height: 7px;
	border-radius: 3.5px;
	background: var(--segbg, var(--seg, #999));
	overflow: hidden;
	box-shadow: var(--seglift);
}

/*
 * 【帯を少し浮かせる】
 * 差し色に白を入れると、その部分が地の白と同じ色になり、
 * **帯がそこで途切れているように見える。**
 * 模様は斜めに走るので、白い筋が帯の上下の端まで届き、
 * 輪郭が欠けたように読める。
 *
 * 内側に薄い枠を回して、輪郭だけは途切れないようにする。
 * 外側の影は、地から少し浮かせるため。
 * どちらも薄くする。濃くすると、色そのものより枠が目立つ。
 */
.avc-act__band {
	--seglift:
		inset 0 0 0 1px rgba(0, 0, 0, .10),
		0 1px 2px rgba(0, 0, 0, .13);
}

/*
 * 【1つに決まらない年】
 *
 * これで3つめの作り。前の2つがなぜ駄目だったかを書いておく。
 *
 * 1. 白い斜めの縞を重ねた
 *    → メーカーの色そのものも斜めの模様なので、
 *      どちらの縞を見ているのか分からなくなった。
 * 2. 帯を縦に切って、色をロゴと一緒に入れ替えた
 *    → **動きは、いつでも1つしか見せられない。**
 *      開いた瞬間はどの年も1色に見え、待ってやっと替わる。
 *      「何社かにまたがっている」が最初のひと目で伝わらない。
 *      刻みが細かいとちらついて、見ていて疲れる。
 *
 * だから **2本を上下に束ねて、同時に見せる。**
 *   1本の帯 … その年はそこ1社
 *   2本の帯 … その年は何社かにまたがる
 * 動かさなくても、見た瞬間に「1本ではない」と分かる。
 * 上の本が1社目で、札のロゴの並びと同じ順。
 *
 * 高さは1本のときと同じ 7px に収める（3+1+3）。
 * ここが変わると、年ごとに帯の位置が上下してしまう。
 */
/*
 * 束ねるときは、入れ物には何も描かない。
 * 枠と影は、中の2本それぞれに付ける。
 */
.avc-act__seg.is-bundle .avc-act__segbar {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
.avc-act__ribbon {
	display: block;
	height: 3px;
	border-radius: 1.5px;
	box-shadow: var(--seglift);
}
.avc-act__ribbon.is-a { background: var(--segbg, var(--seg, #999)); }
.avc-act__ribbon.is-b { background: var(--segbg2, #b9bfc7); }

/*
 * 2社目が分からない年（札を出していない区間など）は、
 * 束ねようがないので1本のまま薄くする。
 */
.avc-act__seg.is-mixed:not(.is-bundle) .avc-act__segbar { opacity: .55; }

/*
 * 【変わり目に切れ目を入れる】
 *
 * 同じところが続いた年は、ひと続きの帯になる。
 * 専属だったことが、そのまま長さで伝わる。
 * **だからこそ、変わったところは変わったと言う必要がある。**
 * ひと続きに見える帯が、実は途中で別のメーカーだった、では困る。
 *
 * 名前を is-cut にしてあるのは、is-edge が
 * すでに図の上下の罫線で使われているため。
 * 同じ名前を別の意味に使うと、探すときに引っかかる。
 *
 * 帯の上下にはみ出す短い縦線にする。
 * 帯の中で切ると「その年は何か違う」の意味と紛れる。
 * 外に出しておけば、区間と区間のあいだの印だと分かる。
 */
.avc-act__seg.is-cut::before {
	content: "";
	position: absolute;
	left: -3px;
	top: -3px;
	width: 2px;
	height: 13px;
	border-radius: 1px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .13);
}

.avc-act__seglabel {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding-left: 1px;
}
.avc-act__seglabel img {
	height: 15px;
	width: auto;
	max-width: 46px;
	object-fit: contain;
	display: block;
}
.avc-act__segname {
	font-size: 10px;
	line-height: 1.4;
	color: var(--avc-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
 * 【2社ぶんを、同じ場所で入れ替える】
 * 1社だけ出すと、その年もそこの人だったように読める。
 * かといって横に並べる幅は無い。
 */
.avc-act__shots {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 15px;
}
.avc-act__shot { display: inline-flex; align-items: center; }
.is-multi .avc-act__shot {
	animation: avc-actshot 7s var(--d, 0s) infinite;
}
/* 2枚目は、1枚目の場所に重ねる（幅は1枚目が決める） */
.is-multi .avc-act__shot.is-b {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	animation-delay: calc( var(--d, 0s) + 3.5s );
	opacity: 0;
}
@keyframes avc-actshot {
	0%, 44%  { opacity: 1; }
	50%, 94% { opacity: 0; }
	100%     { opacity: 1; }
}

/*
 * 【＋はロゴの右下に重ねる】
 * 横に並べると、区間が狭いときにロゴに押し出されて見えなくなる。
 * 重ねておけば、幅がいくつでも必ず出る。
 *
 * 白い縁を回して、ロゴの色に沈まないようにする
 * （ロゴは白地のことも黒地のこともある）。
 */
.avc-act__plus {
	position: absolute;
	right: -5px;
	/* ロゴに少しだけかける（隠すほど重ねない） */
	bottom: -8px;
	z-index: 2;
	padding: 1px 3px;
	font-size: 8px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: #fff;
	background: #8b929e;
	border: 1.5px solid #fff;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
/* 名前だけのときは、字にかぶらないよう場所を空ける */
.is-multi .avc-act__segname { padding-right: 12px; }

/*
 * 動きを減らす設定の人にはロゴを入れ替えない。
 * 止めたぶん2社目のロゴは出せなくなるが、
 * **帯は2本のままなので「1社ではない」ことは伝わる。**
 * 何社あるかは ＋ が言う。
 */
@media (prefers-reduced-motion: reduce) {
	.is-multi .avc-act__shot { animation: none; }
	.is-multi .avc-act__shot.is-b { display: none; }
}

/*
 * 札の位置。
 * 区間が広ければ左端に、狭ければ中央に寄せて、両側へはみ出させる。
 */
.avc-act__seglabel { position: relative; }
.avc-act__seg.has-label { z-index: 1; }
.avc-act__segname { max-width: 92px; }

.avc-act__foot {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--avc-dim);
}
.avc-act__note { display: inline-flex; align-items: center; gap: 6px; }
.avc-act__wavemark {
	flex: 0 0 auto;
	width: 9px;
	height: 14px;
	background: no-repeat center/9px 14px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='14'%3E%3Cpath d='M4.5 1 Q7 3.5 4.5 6 Q2 8.5 4.5 11 Q7 12.5 4.5 13' fill='none' stroke='%23c8cdd4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	.avc-act { padding: 14px 14px 12px; border-radius: 12px; }
	.avc-act__big { font-size: 26px; }
	.avc-act__plot { height: 128px; }
	.avc-act__yl, .avc-act__yr { height: 128px; }
	.avc-act__frame { padding-left: 26px; }
	.avc-act__yl { width: 26px; }
	.avc-act__yl span { right: 6px; }
}

/* --- メーカー一覧 / ロゴ入りの見出し --------------------------- */
/*
 * 【ロゴで探せるようにする】
 * メーカー名は正確に覚えていないことが多い。
 * 名前を読むより、ロゴを見て「これだ」と分かることのほうが多いので、
 * ロゴを主役にして、名前と本数を添える。
 */
.avc-mkgrid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	margin: 14px 0 0;
}

.avc-mk {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--avc-ink);
	transition: border-color .16s, transform .16s, box-shadow .16s;
}
.avc-mk:hover {
	border-color: #c9ced6;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	text-decoration: none;
}

/*
 * ロゴの枠は、あってもなくても同じ大きさにする。
 * 揃っていないと、一覧が階段状に見える。
 */
.avc-mk__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 67px;
	height: 40px;
	background: var(--avc-soft);
	border-radius: 6px;
	overflow: hidden;
}
.avc-mk.has-logo .avc-mk__logo { background: #fff; }
.avc-mk__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	/* ロゴは縦横の比がばらばら。切らずに収める */
	object-fit: contain;
	display: block;
}
/* ロゴが無いところは頭文字。空の枠が並ぶより読める */
.avc-mk__initial {
	font-size: 17px;
	font-weight: 700;
	color: #b9bec6;
	line-height: 1;
}

.avc-mk__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avc-mk__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	word-break: keep-all;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avc-mk__count {
	font-size: 11px;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}

/* --- アーカイブの見出しにロゴを置く --- */
.avc-archhead.has-logo {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}
.avc-archhead__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 50px;
	padding: 5px;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 8px;
}
.avc-archhead__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/*
 * ロゴの右に、種類・名前・本数を縦に積む。
 *
 * 横並びにするのはロゴと文字側の2つだけ。
 * 種類の札まで横並びの一員にすると、伸ばされて帯になる。
 * 札は文字側の中に入れて、そこは元どおり縦に積む。
 */
.avc-archhead.has-logo > .avc-archhead__body { flex: 1 1 200px; min-width: 0; }
.avc-archhead__body > :first-child { margin-top: 0; }

@media (max-width: 600px) {
	.avc-mkgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
	.avc-mk { padding: 10px; gap: 10px; }
	.avc-mk__logo { width: 54px; height: 33px; }
	.avc-archhead__logo { width: 68px; height: 42px; }
}

/* ------------------------------------------------------------
   一覧どうしの行き来（メーカー／監督／ジャンル）
   ------------------------------------------------------------ */
.avc-tlnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}
.avc-tlnav__item {
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: #58606b;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	transition: all .15s;
}
.avc-tlnav__item:hover {
	color: var(--avc-accent);
	border-color: var(--avc-accent);
}
/*
 * いま見ているものは押せないようにする。
 * 押せそうに見えるのに何も起きないのが、いちばん困る。
 */
.avc-tlnav__item.is-current {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
	cursor: default;
}

/* ------------------------------------------------------------
   出演したメーカー・出演作品の監督

   共演した男優と同じ並び（.avc-rank）を使い回す。
   同じ「本数の多い順に並んだもの」なので、
   別の見た目を作る理由が無い。読み方を1つ覚えれば済む。

   違うのは、顔写真の代わりにロゴが入るところだけ。
   ------------------------------------------------------------ */
.avc-rank--term .avc-rank__link {
	/* ロゴは横長なので、顔写真の枠より幅を取る */
	grid-template-columns: 22px 52px minmax(0, 1fr) 52px;
}
.avc-rank__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 32px;
	padding: 3px;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 6px;
	box-sizing: border-box;
}
.avc-rank__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/*
 * ロゴが無いところ（監督は全部）は頭文字。
 * 空の枠が並ぶより、何かが入っているほうが並びとして読める。
 */
.avc-rank__initial {
	font-size: 14px;
	font-weight: 700;
	color: var(--avc-dim);
	line-height: 1;
}
.avc-rank__link:hover .avc-rank__logo {
	border-color: var(--avc-accent);
}

@media (max-width: 600px) {
	.avc-rank--term .avc-rank__link {
		grid-template-columns: 20px 44px minmax(0, 1fr) 46px;
	}
	.avc-rank__logo { width: 44px; height: 28px; }
}

/* ------------------------------------------------------------
   出演者で絞っているときの帯

   誰で絞っているかを、いちばん上に出す。
   解除できる口を必ず添える。絞ったまま戻れないと、
   全体を見たい人が行き止まりになる。
   ------------------------------------------------------------ */
.avc-tfnote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
	padding: 10px 14px;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
	border-radius: 10px;
}
.avc-tfnote__body {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
/* 年で絞っているときの、年の丸 */
.avc-tfnote__year {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 30px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--avc-accent);
}
.avc-tfnote__text {
	font-size: 13px;
	line-height: 1.6;
	color: #58606b;
}
/* 行き先が2つ並ぶ（その人のページ／絞り込み解除） */
.avc-tfnote__acts {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.avc-tfnote__go,
.avc-tfnote__clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	color: var(--avc-accent);
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	transition: all .15s;
}
.avc-tfnote__go:hover,
.avc-tfnote__clear:hover {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}
/* 解除より、その人のページのほうを主にする */
.avc-tfnote__go {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}
.avc-tfnote__go:hover { opacity: .88; }
.avc-tfnote__text a { color: inherit; }

/*
 * トップの「急上昇の女優」で、伸びだけ少し立てる。
 *
 * 目を引きたいのは「どれだけ伸びたか」。
 * 本数と同じ字で並べると、ただの補足に見えて素通りされる。
 * ただし名前より目立たせない。主役は誰かのほうなので。
 */
.avc-ptile__rise {
	display: inline-block;
	margin-top: 1px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.6;
	color: #1f9254;
	background: rgba(31, 146, 84, .1);
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.avc-ptile__rise.is-new {
	color: #fff;
	background: #1f9254;
}

/* ------------------------------------------------------------
   出演者ランキング（/trend/）

   選ぶところが2段ある。
     上 … 何を見るか（急上昇 / 月別 / 年別）
     下 … 誰を見るか（女優 / 男優）
   同じ形で並べると、どちらが上位の選択なのか分からない。
   上は下線の付いた大きめの見出し、下は小さい丸にして、
   段になっていることを見た目で言う。
   ------------------------------------------------------------ */
.avc-vtab {
	display: flex;
	gap: 2px;
	margin: 0 0 12px;
	border-bottom: 1px solid var(--avc-line);
}
.avc-vtab__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	padding: 11px 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--avc-dim);
	background: none;
	border: 0;
	white-space: nowrap;
}
.avc-vtab__item:hover { color: var(--avc-accent); }
.avc-vtab__item.is-current { color: var(--avc-ink); }
/* いま見ているところに、太い下線を1本 */
.avc-vtab__item.is-current::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -1px;
	height: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--avc-accent);
}

.avc-rtab {
	display: flex;
	gap: 6px;
	margin: 0 0 18px;
}
.avc-rtab__item {
	display: inline-flex;
	align-items: center;
	padding: 5px 16px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	color: #58606b;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
}
.avc-rtab__item:hover { color: var(--avc-accent); border-color: var(--avc-accent); }
.avc-rtab__item.is-current {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}

/* ------------------------------------------------------------
   期間を選ぶ

   12か月を横一列に並べると、どこを見ているのか分からなくなる。
   送るのを主にして、飛ぶのは年ごとにまとめた小さい数字で。
   ------------------------------------------------------------ */
.avc-pnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
	padding: 8px 10px;
	background: var(--avc-soft);
	border: 1px solid var(--avc-line);
	border-radius: 10px;
}
.avc-pnav__now {
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.avc-pnav__go {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: var(--avc-accent);
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	white-space: nowrap;
}
.avc-pnav__go:hover {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}
/* 端まで来たら、押せないと分かるようにする（消すと位置がずれる） */
.avc-pnav__go.is-off {
	color: #c3c7cd;
	background: #fff;
	cursor: default;
}

.avc-pgrid { margin: 0 0 18px; }
.avc-pgrid__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}
.avc-pgrid__y {
	flex: none;
	width: 36px;
	font-size: 11px;
	font-weight: 700;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}
.avc-pgrid__ms {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.avc-pgrid__m {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 3px 6px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: #58606b;
	background: #fff;
	border: 1px solid var(--avc-line);
	border-radius: 6px;
	font-variant-numeric: tabular-nums;
}
.avc-pgrid__m.is-wide { min-width: 54px; }
.avc-pgrid__m:hover { color: var(--avc-accent); border-color: var(--avc-accent); }
.avc-pgrid__m.is-on {
	color: #fff;
	background: var(--avc-accent);
	border-color: var(--avc-accent);
}

/* ------------------------------------------------------------
   並び本体
   ------------------------------------------------------------ */
.avc-trank {
	margin: 0;
	padding: 0;
	list-style: none;
}
.avc-trank__item { border-bottom: 1px solid var(--avc-line); }
.avc-trank__link {
	display: grid;
	grid-template-columns: 30px auto minmax(0, 1fr) 84px;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	text-decoration: none;
	color: inherit;
}
.avc-trank__link:hover .avc-trank__name { color: var(--avc-accent); }

.avc-trank__no {
	font-size: 13px;
	font-weight: 800;
	color: #b9bfc7;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
/*
 * 【1〜3位は金銀銅】
 * 順位そのものを読ませたい並びなので、上位だけ地の色を変える。
 * 文字だけ色を変えると、背景が白いぶん金色は読めない。
 */
.avc-trank__item.is-medal .avc-trank__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0 auto;
	border-radius: 50%;
	color: #fff;
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .18);
}
.avc-trank__item.is-m1 .avc-trank__no { background: linear-gradient(160deg, #f5c956, #d19b1b); }
.avc-trank__item.is-m2 .avc-trank__no { background: linear-gradient(160deg, #d3d8de, #a3abb5); }
.avc-trank__item.is-m3 .avc-trank__no { background: linear-gradient(160deg, #dda471, #b57741); }
/* 上位3人は少し背を高くして、まとまりとして見せる */
.avc-trank__item.is-medal .avc-trank__link { padding: 13px 4px; }

.avc-trank__body { min-width: 0; }
.avc-trank__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avc-trank__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	color: #a9afb7;
	margin: 1px 0 3px;
	font-variant-numeric: tabular-nums;
}
.avc-trank__bar {
	display: block;
	height: 5px;
	background: #eceef1;
	border-radius: 3px;
	overflow: hidden;
}
.avc-trank__bar span {
	display: block;
	height: 100%;
	background: var(--avc-accent);
	opacity: .7;
}

/* 右端の数字 */
.avc-trank__val {
	text-align: right;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.avc-trank__val small {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: var(--avc-dim);
}
.avc-trank__n { font-size: 17px; font-weight: 800; color: #4a525c; }

/*
 * 【急上昇は伸びを主にする】
 * この画面で読みたいのは本数ではなく、どれだけ伸びたか。
 * 数字を大きく、色を付けて、本数は下に小さく添える。
 */
.avc-trank__up {
	font-size: 17px;
	font-weight: 800;
	color: #1f9254;
}
.avc-trank__new {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: #1f9254;
	border-radius: 999px;
}

/* 前の期間からの順位の動き */
.avc-trank__mv {
	font-weight: 800;
	font-size: 11px;
}
.avc-trank__mv.is-up { color: #1f9254; }
.avc-trank__mv.is-down { color: #b06a6a; }
.avc-trank__mv.is-same { color: #c3c7cd; }
/*
 * 前の期間に居なかった人。
 * 「初」とは書かない（もっと前には入っていたかもしれない）。
 * 言葉が長くなるので、文字は小さめに。
 */
.avc-trank__mv.is-in {
	padding: 0 6px;
	font-size: 10px;
	color: #fff;
	background: var(--avc-accent);
	border-radius: 999px;
	white-space: nowrap;
}
.avc-trank__was { color: #c3c7cd; }

@media (max-width: 600px) {
	.avc-vtab__item { font-size: 13px; padding: 10px 4px; }
	.avc-trank__link { grid-template-columns: 26px auto minmax(0, 1fr) 68px; gap: 8px; }
	.avc-trank__n, .avc-trank__up { font-size: 15px; }
	.avc-pnav__now { font-size: 14px; }
	.avc-pgrid__m { min-width: 27px; padding: 3px 4px; font-size: 11.5px; }
}

/* ------------------------------------------------------------
   X と Instagram のボタン

   新人はこちらの持っている情報が少ない。
   本人が出しているものを見るのが、いちばん早い。
   ------------------------------------------------------------ */
.avc-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}
.avc-sns__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	transition: opacity .15s;
}
.avc-sns__btn:hover { opacity: .82; }
.avc-sns__btn svg { width: 14px; height: 14px; display: block; }
/*
 * それぞれの色をそのまま使う。
 * 見慣れた色でないと、何のボタンか分からない。
 */
.avc-sns__btn.is-x {
	color: #fff;
	background: #14171a;
}
.avc-sns__btn.is-ig {
	color: #fff;
	background: linear-gradient(115deg, #f9a03f 0%, #d92e7f 48%, #7638cc 100%);
}

/* ------------------------------------------------------------
   引退・復帰の表明（/retire/ ・ /comeback/）

   1件が1つの出来事。誰が・いつ・どこで言ったのかを1かたまりで出す。

   【PCと携帯で組み替える】
   PC は左に人、右に出どころ。横に広いので、並べたほうが目が動かない。
   携帯は上に人、下に出どころ。横に並べると、どちらも潰れて読めない。
   ------------------------------------------------------------ */
.avc-crlist {
	display: grid;
	gap: 16px;
}
.avc-crrow {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 16px;
	border: 1px solid var(--avc-line);
	border-radius: 12px;
	background: #fff;
}

/* --- 誰が --- */
.avc-crrow__who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.avc-crrow__face { display: block; line-height: 0; }
.avc-crrow__name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--avc-ink);
	text-decoration: none;
	word-break: auto-phrase;
}
.avc-crrow__name:hover { color: var(--avc-accent); }
.avc-crrow__meta { min-width: 0; }
.avc-crrow__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}

/*
 * 引退と復帰は、色で読み分けられるようにする。
 * 一覧では同じ種類しか並ばないが、トップや女優ページでは混ざる。
 */
.avc-crrow__kind {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
}
.avc-crrow__kind.is-retire { background: #f6e5e9; color: #8a2b3a; }
.avc-crrow__kind.is-return { background: #e2f1e7; color: #1f6b36; }
/* 休止は、辞めたのでも戻ったのでもない。どちらの色でもない色にする */
.avc-crrow__kind.is-pause  { background: #fbeedd; color: #8a5a1b; }

/* --- どこで --- */
.avc-crrow__src { min-width: 0; }

/*
 * 本人のページに出すとき。
 * すぐ上に顔と名前が出ているので、誰のぶんかは出さない。
 * 1列にして、日付を見出しのように上へ置く。
 */
.avc-crrow--solo {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
.avc-crrow--solo .avc-crrow__when {
	justify-content: flex-start;
	margin: 0;
	font-size: 12.5px;
}

/*
 * 出どころの枠は3通りとも同じ。
 * 枠ごとに形が違うと、並べたときに何を見ればいいのか分からなくなる。
 */
.avc-crsrc {
	position: relative;
	margin: 0;
	padding: 14px 16px 12px 44px;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: #fcfcfd;
}
.avc-crsrc__mark {
	position: absolute;
	left: 14px;
	top: 14px;
	display: flex;
	opacity: .85;
}
.avc-crsrc__mark svg { display: block; }
/* しるしの色だけ、その場のものに寄せる */
.avc-crsrc--x .avc-crsrc__mark { color: #0f1419; }
.avc-crsrc--insta .avc-crsrc__mark { color: #c13584; }
.avc-crsrc__body { margin: 0; }
.avc-crsrc__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
}
.avc-crsrc__foot {
	margin-top: 10px;
	font-size: 12px;
}
.avc-crsrc__foot a { color: var(--avc-dim); }
.avc-crsrc__foot a:hover { color: var(--avc-accent); }

/* --- 出どころが作品のとき --- */
/*
 * 【絵が主役】
 * 作品で引退や復帰を言ったのなら、見せたいのは**その作品の絵**。
 * 小さく添えると、何の作品なのかが分からないまま素通りされる。
 * 枠いっぱいに置いて、題と品番はその下に短く添える。
 *
 * 【切らない】
 * パッケージには題や惹句が刷り込んである。
 * 枠に合わせて切ると、その文字ごと切れる。
 * 幅だけ決めて、高さは絵に合わせる。
 */
.avc-crsrc--work { padding: 10px; }
.avc-crwork {
	display: block;
	text-decoration: none;
	color: inherit;
}
.avc-crwork__thumb {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: #f0f0f1;
	/*
	 * 元の絵は 800px ほど。枠が広い画面でそれ以上に引き伸ばすと、
	 * 大きくはなるが**眠い絵**になる。伸ばさないところで止める。
	 */
	max-width: 640px;
}
.avc-crwork__thumb img {
	display: block;
	width: 100%;
	height: auto;
}
.avc-crwork__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* 絵が無いときだけ、箱の高さを決める（比はパッケージに寄せる） */
	aspect-ratio: 3 / 2;
	font-size: 12px;
	font-weight: 700;
	color: var(--avc-dim);
}
.avc-crwork__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	margin-top: 8px;
}
.avc-crwork__hinban {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--avc-dim);
}
.avc-crwork__title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avc-crwork:hover .avc-crwork__title { color: var(--avc-accent); }
.avc-crwork__date {
	font-size: 11.5px;
	color: var(--avc-dim);
	font-variant-numeric: tabular-nums;
}

/*
 * 引用に添えた画像。
 *
 * 【枚数で組み方を変える】
 * いつも同じ枠に押し込むと、1枚のときに切れて、4枚のときに縦へ伸びきる。
 * 1枚は大きく、2枚以上は並べる。
 */
.avc-crpics {
	display: grid;
	gap: 4px;
	margin-top: 10px;
	border-radius: 8px;
	overflow: hidden;
}
.avc-crpics img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #f0f0f1;
}
.avc-crpics.is-n1 { grid-template-columns: 1fr; }
.avc-crpics.is-n1 img { max-height: 420px; object-fit: contain; }
.avc-crpics.is-n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
.avc-crpics.is-n3,
.avc-crpics.is-n4 { grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------
   携帯

   顔・名前・日付を、1本の見出しの行にまとめる。
   顔を中央に置いて名前を下に敷くと、**顔だけが大きく浮いて**
   何の話なのかが伝わるまでに目が2回止まる。
   ------------------------------------------------------------ */
@media (max-width: 600px) {
	.avc-crrow {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding: 14px;
	}
	.avc-crrow__who {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		text-align: left;
	}
	.avc-crrow__face .avc-av { width: 46px; height: 46px; }
	.avc-crrow__name { font-size: 14px; }
	.avc-crrow__when {
		justify-content: flex-start;
		margin-top: 3px;
	}
	.avc-crsrc { padding: 12px 14px 10px 40px; }
	.avc-crsrc--work { padding: 8px; }
}

/* ============================================================
   フェチプレイ

   【絵を重ねて、順に入れ替える】
   横に並べると1枚が小さくなり、何をしているのか分からなくなる。
   重ねれば、枠の大きさを変えずに何枚でも見せられる。

   動かすのは CSS だけ。一覧には何十枚と並ぶので、
   1枚ごとに JS を動かすと見ている間じゅう計算が走り続ける。
   ============================================================ */
.avc-fslide {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #eceef1;
}
.avc-fslide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	animation-name: avc-fslide2;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: calc( var(--i, 0) * var(--step, 4s) * -1 );
}
.avc-fslide[data-avc-slide] img {
	animation: none;
	opacity: 0;
	z-index: 0;
	transition: opacity .6s ease;
}
.avc-fslide[data-avc-slide] img.is-on { opacity: 1; z-index: 1; }
.avc-fslide[data-avc-slide] img.is-leave { opacity: 1; z-index: 0; }
/* 1枚のときは動かさない（動かすものが無い） */
.avc-fslide.is-n1 img { opacity: 1; animation: none; }

/*
 * 【枚数ごとに見え方を分ける】
 * 「何割のあいだ見せるか」は枚数で変わる。
 * CSS の keyframes に割合を変数で持たせられないので、枚数ぶん書く。
 * 選べるのは4枚まで（AVC_FETISH_SHOW）。
 */
.avc-fslide.is-n2 img { --step: 4s; animation-duration: 8s; animation-name: avc-fslide2; }
.avc-fslide.is-n3 img { --step: 3.6s; animation-duration: 10.8s; animation-name: avc-fslide3; }
.avc-fslide.is-n4 img { --step: 3.2s; animation-duration: 12.8s; animation-name: avc-fslide4; }

/*
 * JS で入れ替えるカードは、枚数用の keyframes を上書きで止める。
 * is-n2〜4 は animation: none より後にあり、同じ強さなので残ってしまう。
 * 残ると最初の一周だけ全枚が透明になり、枠の地色が出る。一周で終わるので、
 * 2回目以降は JS の切り替えだけになり、白くならない。
 */
.avc-fslide[data-avc-slide].is-n2 img,
.avc-fslide[data-avc-slide].is-n3 img,
.avc-fslide[data-avc-slide].is-n4 img {
	animation: none;
}

@keyframes avc-fslide2 {
	0%, 42% { opacity: 1; }
	50%, 92% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes avc-fslide3 {
	0%, 27% { opacity: 1; }
	33%, 94% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes avc-fslide4 {
	0%, 20% { opacity: 1; }
	25%, 95% { opacity: 0; }
	100% { opacity: 1; }
}

/*
 * 動きを減らす設定の人には、1枚目だけを出す。
 * 黙って動き続けるものは、その設定がいちばん避けたいもの。
 */
@media (prefers-reduced-motion: reduce) {
	.avc-fslide img { animation: none; opacity: 0; }
	.avc-fslide img:first-child { opacity: 1; }
	.avc-fslide[data-avc-slide] img.is-on { opacity: 1; }
}

.opw-home { margin: 0 0 44px; }
.opw-home__head {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ffe3ec;
}
.opw-home__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 64px;
	height: 2px;
	background: #ff6699;
}
.opw-home .of-sec__ttl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opw-home .of-sec__sub {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	color: #ff6699;
}
.opw-home .of-sec__title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.35;
	color: #2b2b33;
}
.opw-home .of-sec__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff0f5;
	color: #e04f83;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.opw-home .of-sec__more:hover { background: #ffe0eb; color: #e04f83; }

.opw-playpick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.opw-playpick__a {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--avc-line, #e4e6e9);
	background: #fff;
	color: #3c434a;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.3;
}
.opw-playpick__a:hover { border-color: #ff6699; color: #e04f83; }
.opw-playpick__a.is-on {
	background: #ff6699;
	border-color: #ff6699;
	color: #fff;
}
.opw-home .avc-works {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
	.opw-home .avc-works { grid-template-columns: 1fr; }
}

/* --- フェチプレイの札 --- */
.avc-fgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 12px;
}
.avc-fgrid--page { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.avc-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.avc-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.avc-fcard {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--avc-line);
	transition: box-shadow .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
.avc-fcard__pic {
	position: relative;
	display: block;
	/* 場面の絵は横長。作品カードと同じ比にして、並べたときに揃える */
	aspect-ratio: 16 / 10;
}
.avc-fcard__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f2f3f5 0 8px, #e9eaee 8px 16px);
}
.avc-fcard__body {
	display: block;
	padding: 9px 10px 11px;
}
.avc-fcard__name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	word-break: auto-phrase;
	line-break: strict;
}
.avc-fcard__meta {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	color: var(--avc-dim);
}
@media (hover: hover) {
	.avc-fcard:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45);
	}
	.avc-fcard:hover .avc-fcard__name { color: var(--avc-accent); }
}
.avc-fcard:focus-visible {
	outline: 3px solid var(--avc-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.avc-fcard { transition: none; }
	.avc-fcard:hover { transform: none; }
}

/* --- 作品ページのフェチプレイ --- */
/*
 * ほかの節と同じ「見出し＋中身」の形にしてある。
 * 帯を1本置くだけだと、貼り忘れた注記のように浮く。
 */
.avc-fwork__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 10px;
}
@media (max-width: 640px) {
	.avc-fwork__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.avc-fwork__item {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--avc-line);
	background: #fff;
	transition: box-shadow .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
.avc-fwork__pic {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
}
.avc-fwork__name {
	display: block;
	padding: 8px 10px 10px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	word-break: auto-phrase;
	line-break: strict;
}
@media (hover: hover) {
	.avc-fwork__item:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45);
	}
	.avc-fwork__item:hover .avc-fwork__name { color: var(--avc-accent); }
}
.avc-fwork__item:focus-visible {
	outline: 3px solid var(--avc-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.avc-fwork__item { transition: none; }
	.avc-fwork__item:hover { transform: none; }
}

/* 作品カードの中でスライドさせるときは、枠に合わせる */
.avc-work__thumb .avc-fslide { position: absolute; inset: 0; }

.opw-cast {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 640px) {
	.opw-cast { grid-template-columns: 1fr; }
}
.opw-cast__card { text-decoration: none; color: inherit; display: block; }

.opw-aworks { margin: 1.8em 0; }
.opw-aworks .avc-works {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 640px) {
	.opw-aworks .avc-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.opw-aworks .oppai-mtabs { margin: 0; }
.opw-aworks__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.opw-aworks__tab {
	appearance: none;
	border: 1px solid #e4e6e9;
	background: #fff;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	color: #58606b;
}
.opw-aworks__tab.is-on {
	background: #d6336c;
	border-color: #d6336c;
	color: #fff;
}
.opw-aworks__n {
	margin-left: 4px;
	font-weight: 600;
	opacity: .8;
}
.opw-aworks__pane[hidden] { display: none !important; }