/**
 * ニュース
 *
 * 色・線・余白はサイト共通のもの（.avc-page の変数）をそのまま使う。
 * この画面のためだけの色は作らない。
 *
 * 一覧は**新聞の見出しのように**、絵を小さく、題名を主役にする。
 * 動画一覧が「絵で選ぶ」画面なのに対して、こちらは「読む」画面。
 */

/* ------------------------------------------------------------
   ジャンルの切り替え
   ------------------------------------------------------------ */
.avc-ngenres {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin: 0 0 18px;
	-webkit-overflow-scrolling: touch;
}
.avc-ngenres a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 15px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--avc-dim);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.avc-ngenres a:hover { border-color: var(--avc-accent); color: var(--avc-accent); }
.avc-ngenres a.is-on {
	background: var(--avc-accent);
	border-color: var(--avc-accent);
	color: #fff;
}
.avc-ngenres em {
	font-style: normal;
	font-size: 10px;
	opacity: .7;
}

/* ------------------------------------------------------------
   一覧
   ------------------------------------------------------------ */
.avc-nlist {
	border-top: 1px solid var(--avc-line);
}

.avc-nrow {
	border-bottom: 1px solid var(--avc-line);
}
.avc-nrow__link {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 4px;
	color: inherit;
	text-decoration: none;
}
.avc-nrow__link:hover .avc-nrow__title { color: var(--avc-accent); }

/*
 * 絵は**大きさ固定**。
 * 並んだときに行の高さが揃うほうが読みやすい。
 */
.avc-nrow__pic {
	position: relative;
	flex: 0 0 auto;
	width: 108px;
	height: 68px;
	border-radius: 6px;
	overflow: hidden;
	background: #f1f3f5;
}
.avc-nrow__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * 2枚以上あるときだけ、ゆっくり入れ替える。
 *
 * 【主張させない】
 * 動くものが目立つと題名を読む邪魔になる。
 * 重ねて置いて、透明度だけをゆっくり変える。
 */
.avc-nrow__pic.is-slide img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.avc-nrow__pic.is-slide img.is-on { opacity: 1; }

/* 何枚あるかを、そっと知らせる */
.avc-nrow__pic.is-slide::after {
	content: "";
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

/* 動きを嫌う設定なら、切り替えない */
@media ( prefers-reduced-motion: reduce ) {
	.avc-nrow__pic.is-slide img { transition: none; }
}

.avc-nrow__body {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* 題名が主役。3行まで見せる */
.avc-nrow__title {
	display: -webkit-box;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.55;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: auto-phrase;
	line-break: strict;
}

.avc-nrow__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11.5px;
	color: var(--avc-dim);
}

/*
 * NEW の札。
 * 速報らしさはここで出す。色はアクセントに合わせて、
 * この札のためだけの赤を持ち出さない。
 */
.avc-nrow__new {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 3px;
	background: var(--avc-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}

.avc-nrow__genre {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 9px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: var(--avc-soft);
}
.avc-nrow__genre i { font-size: 8.5px; opacity: .55; }

/* 記事の中に置くときは、線を上に持たない */
.avc-nlist--block { border-top: 0; }
.avc-nlist--block .avc-nrow__link { padding: 12px 2px; }
.avc-nlist--block .avc-nrow__pic { width: 92px; height: 58px; }
.avc-nlist--block .avc-nrow__title { font-size: 13.5px; -webkit-line-clamp: 2; }

/* ------------------------------------------------------------
   記事
   ------------------------------------------------------------ */
.avc-news__head { margin: 0 0 18px; }

/* 配信日は題名の下。ニュースはその並びになっている */
.avc-news__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--avc-dim);
}
.avc-news__genre {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 11px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: var(--avc-soft);
	color: inherit;
	text-decoration: none;
}
.avc-news__genre i { font-size: 9px; opacity: .6; }
.avc-news__genre:hover i { opacity: 1; }
.avc-news__genre:hover { border-color: var(--avc-accent); color: var(--avc-accent); }

.avc-news__title {
	margin: 0;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.5;
	color: var(--avc-ink);
	word-break: auto-phrase;
	line-break: strict;
}

.avc-news__hero {
	margin: 0 0 22px;
	border-radius: 10px;
	overflow: hidden;
}
.avc-news__hero img {
	width: 100%;
	height: auto;
	display: block;
}

.avc-news__body {
	font-size: 16px;
	line-height: 2;
}
.avc-news__body > p { margin: 0 0 1.6em; }
.avc-news__body img { max-width: 100%; height: auto; border-radius: 8px; }

/* ------------------------------------------------------------
   本文に置く部品
   ------------------------------------------------------------ */

/* サイト内のページへ送る帯 */
.avc-nlink {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 1.8em 0;
	padding: 12px 14px;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: var(--avc-soft);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}
.avc-nlink:hover { border-color: var(--avc-accent); background: #fff; }

.avc-nlink__pic {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: #eceef1;
}
.avc-nlink__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * 作品と動画の絵は横長（パッケージは表裏の見開き）。
 * 正方形に切ると**左右が落ちて、題字のあたりが消える**ので枠を横長にする。
 */
.avc-nlink--wide .avc-nlink__pic { width: 104px; height: 70px; }

.avc-nlink__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.avc-nlink__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avc-nlink__sub { font-size: 11.5px; color: var(--avc-dim); }
.avc-nlink__go { flex: 0 0 auto; color: var(--avc-dim); font-size: 13px; }
.avc-nlink:hover .avc-nlink__go { color: var(--avc-accent); }

/* X の引用 */
.avc-nx {
	position: relative;
	margin: 1.8em 0;
	padding: 16px 18px 12px 46px;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: #fff;
}
.avc-nx__mark {
	position: absolute;
	left: 16px;
	top: 16px;
	display: flex;
	color: var(--avc-ink);
	opacity: .75;
}
.avc-nx__mark svg { display: block; }
.avc-nx__body { margin: 0; }
.avc-nx__body p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.85;
}
.avc-nx__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--avc-dim);
}
.avc-nx__user { font-weight: 700; }
.avc-nx__foot a { color: var(--avc-accent); text-decoration: none; }

/* 人気作品の枠 */
.avc-nworks { margin: 2em 0; }

/* 共演の要約 */
.avc-nkyoen {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 1.8em 0;
	padding: 14px 16px;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: var(--avc-soft);
	color: inherit;
	text-decoration: none;
}
.avc-nkyoen:hover { border-color: var(--avc-accent); background: #fff; }
.avc-nkyoen__faces { flex: 0 0 auto; display: flex; }
.avc-nkyoen__faces .avc-av + .avc-av { margin-left: -12px; border: 2px solid #fff; box-sizing: content-box; }
.avc-nkyoen__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.avc-nkyoen__names { font-size: 15px; font-weight: 700; }
.avc-nkyoen__x { margin: 0 6px; color: var(--avc-dim); }
.avc-nkyoen__meta { font-size: 12px; color: var(--avc-dim); }
.avc-nkyoen__go { flex: 0 0 auto; color: var(--avc-dim); font-size: 13px; }

/* ------------------------------------------------------------
   この記事に出てくる
   ------------------------------------------------------------ */
.avc-nrels {
	margin: 34px 0;
	padding: 16px 18px;
	border: 1px solid var(--avc-line);
	border-radius: 10px;
	background: var(--avc-soft);
}
.avc-nrels__row {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 7px 0;
}
.avc-nrels__row + .avc-nrels__row { border-top: 1px dashed var(--avc-line); }
.avc-nrels__label {
	flex: 0 0 72px;
	font-size: 12px;
	font-weight: 700;
	color: var(--avc-dim);
}
.avc-nrels .avc-chips { flex: 1 1 auto; }
.avc-nrels .avc-chips a { background: #fff; }

/* ------------------------------------------------------------
   狭い画面
   ------------------------------------------------------------ */
@media (max-width: 782px) {
	.avc-nrow__link { gap: 11px; padding: 12px 2px; }
	.avc-nrow__pic { width: 92px; height: 58px; }
	.avc-nrow__title { font-size: 13.5px; -webkit-line-clamp: 3; }
	.avc-nrow__meta { font-size: 11px; gap: 6px; }

	.avc-news__title { font-size: 1.3rem; }
	.avc-news__body { font-size: 15px; line-height: 1.95; }

	.avc-nlink { gap: 11px; padding: 10px 12px; }
	.avc-nlink__pic { width: 54px; height: 54px; }
	.avc-nlink--wide .avc-nlink__pic { width: 86px; height: 58px; }
	.avc-nlink__title { font-size: 13.5px; }

	.avc-nx { padding: 14px 14px 10px 40px; }
	.avc-nx__mark { left: 14px; top: 14px; }

	/* ラベルを上に出して、幅を取り合わない */
	.avc-nrels { padding: 12px 14px; }
	.avc-nrels__row { flex-direction: column; gap: 6px; }
	.avc-nrels__label { flex: none; }
}


/* ------------------------------------------------------------
   本文の中身（貼り付けたものを生かす）

   書き起こした文章を貼ると、見出しや引用が付いてくる。
   それを消さずに受け取り、このサイトの見た目に寄せる。
   h1〜h6 は出さない決まりなので、出すときに書き換えている
   （inc/news-content.php）。
   ------------------------------------------------------------ */
.avc-news__body .avc-h {
	margin: 2em 0 .9em;
}
.avc-news__body .avc-h--2 {
	font-size: 1.15rem;
	padding-left: 12px;
	border-left: 4px solid var(--avc-accent);
}
.avc-news__body .avc-h--3 {
	font-size: 1.02rem;
}
.avc-news__body .avc-h--4,
.avc-news__body .avc-h--5,
.avc-news__body .avc-h--6 {
	font-size: .96rem;
	color: var(--avc-dim);
}

.avc-news__body blockquote {
	margin: 1.8em 0;
	padding: 2px 0 2px 16px;
	border-left: 3px solid var(--avc-line);
	color: #4b5158;
}
.avc-news__body blockquote p:last-child { margin-bottom: 0; }

.avc-news__body ul,
.avc-news__body ol {
	margin: 0 0 1.6em;
	padding-left: 1.4em;
}
.avc-news__body li { margin: 0 0 .4em; }

.avc-news__body hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--avc-line);
}

/* 本文の中のリンク（自動で付くものも、手で付けたものも） */
.avc-nword {
	color: var(--avc-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(214, 51, 108, .35);
}
.avc-nword:hover { border-bottom-color: var(--avc-accent); }

/* ------------------------------------------------------------
   記事の画像（回り込み）

   PCは本文の横に置いて、文章を回り込ませる。
   スマホは幅いっぱいに敷く（横に回すと文字が細くなりすぎる）。
   ------------------------------------------------------------ */
.avc-nfig {
	margin: 0 0 1.2em;
}
.avc-nfig picture,
.avc-nfig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.avc-nfig figcaption {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--avc-dim);
}
.avc-nfig__credit {
	display: block;
	font-size: 11px;
	opacity: .8;
}

.avc-nfig--full { margin: 1.8em 0; }

@media (min-width: 783px) {
	.avc-nfig--left,
	.avc-nfig--right {
		/*
		 * 幅は記事ごとに決める（--avc-figw）。高さは auto のままなので、
		 * どの幅にしても縦横比は元のまま。
		 * 上限を付けるのは、広げすぎると本文が細い帯になって読めないから。
		 */
		width: var(--avc-figw, 300px);
		max-width: 60%;
		margin-top: .4em;
	}
	.avc-nfig--left {
		float: left;
		margin-right: 24px;
	}
	.avc-nfig--right {
		float: right;
		margin-left: 24px;
	}
}

/*
 * PCだけの空白（回り込みの高さ稼ぎ）
 *
 * 回り込みの横に文章が足りないと、次のブロックが横に吸い込まれる。
 * ここで高さを稼いで押し下げる。
 *
 * BFC を作らないこと（overflow / display:flow-root を付けない）。
 * 付けると回り込みを避けて縮み、役目を果たさなくなる。
 */
.avc-ngap { display: none; }

@media (min-width: 783px) {
	.avc-ngap {
		display: block;
		height: var(--avc-gaph, 80px);
	}
}

/*
 * 回り込みを本文の外へ持ち出さない。
 * 出したままだと、次のブロック（この記事に出てくる・関連）に食い込む。
 */
.avc-news__body::after {
	content: "";
	display: block;
	clear: both;
}

/*
 * 【回り込みの横に来た箱を、画像に被せない】
 *
 * float は**行を短くするだけ**で、箱そのものは幅いっぱいのまま。
 * だから枠や地の付いたブロックが横に来ると、
 * 中の文字はよけるのに**枠だけ画像の下に潜り込む**。
 *
 * よけるのに要るのは BFC を作ること。**overflow だけで足りる。**
 *
 * 【display は書かない】
 * ここで display:flow-root と書くと、
 * flex で組んである部品（.avc-nlink など）の display を潰してしまう。
 * 記事の中でだけ縦積みになり、編集画面では .avc-news__body が無いので
 * 正しく見える——という一番気づきにくい壊れ方をする。
 */
.avc-news__body .avc-nx,
.avc-news__body .avc-nlink,
.avc-news__body .avc-nkyoen,
.avc-news__body .avc-nworks,
.avc-news__body .avc-nnote,
.avc-news__body blockquote,
.avc-news__body table,
.avc-news__body .wp-block-table,
.avc-news__body .wp-block-embed {
	overflow: hidden;
}

/* もともと display を持たない、ただの箱だけは flow-root で足す */
.avc-news__body blockquote,
.avc-news__body .wp-block-embed {
	display: flow-root;
}

/* 見出しも、画像の横では縮めて重ならないようにする */
.avc-news__body .avc-h {
	overflow: hidden;
}

/* 編集する人にだけ出る注記 */
.avc-nnote {
	margin: 1.4em 0;
	padding: 10px 14px;
	border: 1px dashed var(--avc-accent);
	border-radius: 8px;
	background: rgba(214, 51, 108, .05);
	color: var(--avc-accent);
	font-size: 13px;
}

/* ------------------------------------------------------------
   この記事に出てくる（人は顔で）
   ------------------------------------------------------------ */
.avc-nrels__faces {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	flex: 1 1 auto;
}
.avc-nrels__faces .avc-ptile { width: 74px; }
.avc-nrels__faces .avc-ptile__name { font-size: 11.5px; }

/* 2人ぶんを1つの札にする（共演） */
.avc-nrels__pair {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 8px;
	border: 1px solid var(--avc-line);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	text-decoration: none;
}
.avc-nrels__pair:hover { border-color: var(--avc-accent); }
.avc-nrels__pairfaces { display: flex; }
.avc-nrels__pairfaces .avc-av + .avc-av {
	margin-left: -10px;
	border: 2px solid #fff;
	box-sizing: content-box;
}
.avc-nrels__pairname { font-size: 13.5px; font-weight: 700; }

/* この記事に出てくる：作品 */
.avc-nrels__works {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.avc-nwk {
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 320px;
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--avc-line);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s;
}
.avc-nwk:hover { border-color: var(--avc-accent); }
.avc-nwk__pic {
	flex: 0 0 auto;
	width: 66px;
	height: 44px;
	border-radius: 4px;
	overflow: hidden;
	background: #eceef1;
}
.avc-nwk__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avc-nwk__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avc-nwk__title {
	font-size: 12.5px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avc-nwk:hover .avc-nwk__title { color: var(--avc-accent); }
.avc-nwk__hinban { font-size: 10.5px; color: var(--avc-dim); letter-spacing: .02em; }

@media (max-width: 767px) {
	.avc-nwk { max-width: 100%; width: 100%; }
}
.avc-nrels__x { margin: 0 5px; color: var(--avc-dim); font-weight: 400; }

/* 行の頭を、顔の高さに合わせる */
.avc-nrels__row { align-items: center; }

/* 画像に添えるリンク */
.avc-nfig__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	color: var(--avc-accent);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
.avc-nfig__link i { font-size: 9px; }
.avc-nfig__link:hover { text-decoration: underline; }

/* 記事のコメント欄は、ほかの画面と同じ間合いで置く */
.avc-news .avc-comments { margin-top: 40px; }

/* 紐づけ別の一覧から、元のページへ戻る */
.avc-nback {
	margin: -8px 0 16px;
	font-size: 12.5px;
}
.avc-nback a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--avc-dim);
	text-decoration: none;
}
.avc-nback a:hover { color: var(--avc-accent); }
.avc-nback i { font-size: 9px; }