/**
 * 資料ビューア
 *
 * 色や角丸は style.css のトークンを使う。
 * 管理画面でも同じ CSS を読むため、トークンが無い場合の
 * 控えの値を :where() で持たせている。
 */

.convention-doc {
	--convention-doc-border: var(--convention-color-border, #e4e6e8);
	--convention-doc-surface: var(--convention-color-surface, #fff);
	--convention-doc-accent: var(--convention-color-accent, #2c5f8d);
	--convention-doc-muted: var(--convention-color-muted, #6a6d73);
	/* ビューアの操作部分の色。配色とは独立した中間色なので、ここで一度だけ決める */
	--convention-doc-toolbar-bg: #f7f8f9;
	--convention-doc-control-border: #b9bdc2;
	--convention-doc-stage: #52565a;
	--convention-doc-outline-border: #c3c4c7;
	--convention-doc-outline-bg: #fcfcfc;
	--convention-doc-panel-bg: #fbfbfc;
	--convention-doc-track: #e4e6e8;

	margin-block: 1.5rem;
	border: 1px solid var(--convention-doc-border);
	border-radius: var(--convention-radius, 6px);
	background: var(--convention-doc-surface);
	overflow: hidden;
}

/* ==========================================================================
   ツールバー
   ========================================================================== */

.convention-doc__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	padding: .5rem;
	border-bottom: 1px solid var(--convention-doc-border);
	background: var(--convention-doc-toolbar-bg);
}

/* 枠はトークンより濃くする。
   --convention-doc-border（var(--convention-doc-track)）は面を仕切るための色で、
   白地のボタンに使うとほとんど見えない。液晶では「淡い枠の
   ボタン」に見えていたが、**色の出ない画面（e-ink）では枠ごと
   消えて、ただの文字が散らばっているように見える。** */
.convention-doc__toolbar button,
.convention-doc__toolbar a {
	padding: .35rem .7rem;
	border: 1px solid var(--convention-doc-control-border);
	border-radius: var(--convention-radius, 6px);
	background: #fff;
	color: inherit;
	font-size: .875rem;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

/* e-ink など、色の出ない画面と、書き換えの遅い画面。
   灰色の濃淡は潰れるので、黒で描く。
   update を解釈しないブラウザは、その 1 つだけを捨てる
   （monochrome のほうは効く）。 */
@media (monochrome), (update: slow) {

	.convention-doc__toolbar button,
	.convention-doc__toolbar a {
		border-color: #000;
		color: #000;
	}

	.convention-doc__toolbar button[aria-pressed="true"] {
		border-color: #000;
		background: #000;
		color: #fff;
	}

	/* 選んでいる資料の印。色ではなく太さで示す */
	.convention-doc.is-keys {
		box-shadow: 0 0 0 3px #000;
	}
}

.convention-doc__toolbar button:hover,
.convention-doc__toolbar a:hover,
.convention-doc__toolbar button:focus,
.convention-doc__toolbar a:focus {
	border-color: var(--convention-doc-accent);
	/* ホバーで文字が背景に溶けないよう明示する */
	color: var(--convention-doc-accent);
}

.convention-doc__toolbar button[aria-pressed="true"] {
	border-color: var(--convention-doc-accent);
	background: var(--convention-doc-accent);
	color: #fff;
}

.convention-doc__page-label {
	min-width: 6em;
	color: var(--convention-doc-muted);
	font-size: .875rem;
	text-align: center;
}

/* 右端に寄せる区切り */
.convention-doc__spacer {
	flex: 1 1 auto;
}

/* ==========================================================================
   ページ
   ========================================================================== */

.convention-doc__pages {
	display: flex;
	/* 拡大したときは横にも動かせるようにする。
	   本文側に溢れさせない。 */
	overflow: auto;
	padding: 1rem;
	background: var(--convention-doc-stage);
	min-height: 12rem;
}

/* ページを並べる器。
 *
 * **真ん中寄せは margin: auto でやる。justify-content や
 * align-items の center を使わない。**
 * flex の中央寄せは、はみ出したぶんを枠の「手前」にも作る。
 * 拡大して資料が枠より大きくなると、上と左のはみ出しへは
 * スクロールで戻れず、そこが読めなくなる。全画面では
 * 資料の頭が操作の並びの下に潜って、出せなくなっていた。
 *
 * margin: auto なら、場所が余っているときだけ余白になり、
 * 足りなければ 0 になる。必ず端から始まるので、どこへでも戻れる。
 * safe center でも同じことができるが、**古いブラウザには無い**
 * （e-ink 端末の内蔵ブラウザなど）。こちらはどこでも効く。 */
.convention-doc__stage {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1rem;
	margin: auto;
}

/* 描いたページ（canvas / img）。
   **大きさは JS が px で入れる。ここで頭を押さえないこと。**
   max-width: 100% を掛けると、拡げたときに幅だけが枠で止まり、
   高さはそのまま伸びる。縦に潰れた資料になる。
   はみ出したぶんは .convention-doc__pages の overflow で動かす。 */
.convention-doc__page {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	background: #fff;
}

.convention-doc__status {
	padding: 1rem;
	color: var(--convention-doc-muted);
	font-size: .875rem;
	text-align: center;
}

/* JS が動く前は操作できないことを示す */
.convention-doc:not(.convention-doc--ready) .convention-doc__toolbar {
	opacity: .5;
	pointer-events: none;
}

/* 見せ方と出力のまとまり。広い画面では、包んでいないのと同じに扱う
   （display: contents）。ツールバーの並びは今までどおりになる。 */
.convention-doc__tools {
	display: contents;
}

/* 「操作」は狭い画面でだけ出す */
.convention-doc__toolbar .convention-doc__more {
	display: none;
}

/* 狭い画面。全部を並べるとツールバーが 3 段になり、
   資料より操作のほうが大きくなる。
   送りとページ番号だけを残し、あとは「操作」の中へたたむ。 */
@media (max-width: 600px) {
	.convention-doc__toolbar .convention-doc__more {
		display: inline-block;
		margin-left: auto;
	}

	.convention-doc__toolbar .convention-doc__more[aria-expanded="true"] {
		border-color: var(--convention-doc-accent);
		background: var(--convention-doc-accent);
		color: #fff;
	}

	.convention-doc__tools {
		display: none;
	}

	.convention-doc__toolbar.is-tools-open .convention-doc__tools {
		display: flex;
		flex-wrap: wrap;
		gap: .375rem;
		flex-basis: 100%;
		padding-top: .375rem;
		border-top: 1px solid var(--convention-doc-border);
	}

	/* 中で並べ替えるので、右寄せの区切りは要らない */
	.convention-doc__spacer {
		display: none;
	}
}

/* ==========================================================================
   全画面
   ========================================================================== */

/* 全画面の要素は既定で幅も高さも画面いっぱいになる。
   中のページ領域を伸ばして、余白が黒く残らないようにする。
   :fullscreen と :-webkit-full-screen は、片方でも解釈できない
   ブラウザがあるとセレクタ全体が捨てられるので、別々に書く。

   **JS が付ける is-fullscreen も同じに扱う。**
   e-ink タブレット（Android）のように、全画面にはなるのに
   :fullscreen を解釈しないブラウザがある。そこでは組み方が
   まるごと当たらず、操作の並びが資料の下に潜って見えなくなる。
   ただの class なら、どのブラウザでも当たる。 */

.convention-doc.is-fullscreen {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.convention-doc.is-fullscreen .convention-doc__pages {
	flex: 1 1 auto;
	min-height: 0;
}

/* **操作の並びを縮めない。**
   縦に積んだとき、既定では場所が足りなくなると縮む。古い
   Chromium（e-ink 端末に多い）は、中で折り返す並びの高さを
   測り損ねて 0 まで縮めることがある。そうなるとボタンは
   ページ領域の下に潜り、資料に隠れて押せなくなる。
   高さを譲らせず、重なっても上に出るようにしておく。 */
.convention-doc.is-fullscreen .convention-doc__toolbar {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.convention-doc:fullscreen .convention-doc__toolbar {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.convention-doc:-webkit-full-screen .convention-doc__toolbar {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.convention-doc:fullscreen {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.convention-doc:fullscreen .convention-doc__pages {
	flex: 1 1 auto;
	min-height: 0;
}

.convention-doc:-webkit-full-screen {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.convention-doc:-webkit-full-screen .convention-doc__pages {
	flex: 1 1 auto;
	min-height: 0;
}

/* ==========================================================================
   印刷
   ========================================================================== */

@media print {
	/* 印刷を許していない資料は、ブラウザの印刷機能でも出さない。
	   これは「うっかり印刷」を防ぐためのもので、
	   技術的に取得を禁じるものではない。 */
	.convention-doc--no-print .convention-doc__pages {
		display: none;
	}

	.convention-doc--no-print::after {
		content: 'この資料は印刷できません。';
		display: block;
		padding: 2rem;
		text-align: center;
	}

	/* ビューアの印刷ボタンから印刷したときは、
	   押されたときに body の直下へ作る差し込みだけを残す。

	   **もとは「body の子を全部隠して、ビューアだけ出し直す」と
	   書いていたが、これでは白紙になる。** ビューアは body の
	   直下ではなく、本文の中（さらにモーダルの中）にある。
	   途中の親を display:none にすると、その下は何をしても出ない。
	   **隠れた親は、子側から出し直せない。**

	   差し込みは body の直下に作るので、この形なら確実に残る。 */
	body.convention-doc-printing > * {
		display: none !important;
	}

	body.convention-doc-printing > .convention-doc-print {
		display: block !important;
	}

	/* 1 ページ 1 枚。用紙に収まるところまで縮める。
	   幅だけを見ると、縦長のページが 2 枚にまたがる。 */
	.convention-doc-print img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		max-height: 100vh;
		break-after: page;
		page-break-after: always;
	}

	.convention-doc-print img:last-child {
		break-after: auto;
		page-break-after: auto;
	}
}

/* 印刷用の差し込み。画面には出さない。 */
.convention-doc-print {
	display: none;
}

/* ==========================================================================
   小さく置く（押すと開く）

   既定の大きさだと、資料そのものより先にビューアが目に入る、という
   指摘があった。表紙だけを小さく置き、押されてから読み込む。
   ========================================================================== */

.convention-doc--thumb {
	max-width: 320px;
}

/* たたんでいる間は、表紙のほかは出さない */
.convention-doc.is-collapsed .convention-doc__toolbar,
.convention-doc.is-collapsed .convention-doc__status,
.convention-doc.is-collapsed .convention-doc__pages {
	display: none;
}

/* 開いたら表紙のボタンを隠す。消さずに残しておき、
   「小さくする」で元に戻せるようにする。 */
.convention-doc:not(.is-collapsed) .convention-doc__open {
	display: none;
}

/* テーマの button は濃い地に白文字。ここでは中身を見せる箱なので、
   素の見た目に戻してから組み直す。 */
.convention-doc .convention-doc__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.convention-doc__poster {
	display: block;
	background: var(--convention-doc-stage);
}

.convention-doc__poster-img {
	display: block;
	width: 100%;
	/* 枠より大きくならない。width だけだと、幅を測る場面で
	   元の画像の大きさが効いてしまう。 */
	max-width: 100%;
	height: auto;
}

.convention-doc__poster-icon {
	display: block;
	padding: 2rem 0;
	font-size: 2rem;
	text-align: center;
}

.convention-doc__open-label {
	display: block;
	padding: .6rem .8rem;
	border-top: 1px solid var(--convention-doc-border);
	font-size: .875rem;
	line-height: 1.5;
}

/* 種類と大きさ。押す前に見当が付くようにする。
   「小さく置く」は押されるまで読み込まないので、押した人が待つ。 */
.convention-doc__open-meta {
	display: block;
	color: var(--convention-doc-muted);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
}

.convention-doc__open-hint {
	display: block;
	color: var(--convention-doc-muted);
	font-size: .8125rem;
}

.convention-doc .convention-doc__open:hover .convention-doc__open-hint,
.convention-doc .convention-doc__open:focus .convention-doc__open-hint {
	color: var(--convention-doc-accent);
}

/* ==========================================================================
   見出し
   ========================================================================== */

/* figcaption は figure の最初か最後にしか置けない。見出しは先頭に置く。 */
.convention-doc__caption {
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--convention-doc-border);
	font-weight: 700;
}

/* ==========================================================================
   資料を複数置いたとき

   PDF は 1 つで 1 冊なので、2 つ以上選んだら並べて出す。
   「小さく置く」は横に並べ、それ以外は縦に積む。
   ========================================================================== */

.convention-doc-group {
	margin: 1.5rem 0;
}

.convention-doc-group__title {
	margin: 0 0 .5rem;
	font-weight: 700;
}

.convention-doc-group__items {
	display: grid;
	gap: 1.5rem;
}

/* **グリッドの子は、既定では中身より小さくならない。**
   表紙の画像は 300〜1024px あるので、そのままだと枠がその幅まで
   広がり、列が 1 本に潰れて全部が横いっぱいに並ぶ。
   （表紙をボタンで包んでいる「押すと開く」の箱では起きず、
   公開前の箱でだけ起きていた。ボタンは中身の幅を外へ伝えないため。）
   0 まで縮んでよいことを明示する。 */
.convention-doc-group__items > * {
	min-width: 0;
}

/* 束の中では、figure 自身の上下の余白は要らない（gap で取る） */
.convention-doc-group__items .convention-doc {
	margin-block: 0;
}

.convention-doc-group--thumb .convention-doc-group__items {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-items: start;
	gap: 1rem;
}

/* 並べたときは、枠の幅は列が決める */
.convention-doc-group--thumb .convention-doc--thumb {
	max-width: none;
}

/* 開いたものは 1 行を占める。列の幅のまま開くと、
   200px の中に資料を描くことになって読めない。

   **相手は「押すと開く」の箱だけに絞る。**
   `:not(.is-collapsed)` だけで書くと、たたむ仕組みを持たない箱
   （公開前の表紙だけの箱）にも当たる。その箱は is-collapsed を
   持たないので、置いた瞬間から 1 行を占め、
   「小さく置く」を選んでいるのに横いっぱいに広がっていた。

   --armed は JS が「押すと開く」の箱に付ける印で、開いても外れない。 */
.convention-doc-group--thumb .convention-doc--armed:not(.is-collapsed) {
	grid-column: 1 / -1;
}

/* ==========================================================================
   公開日時が来ていない資料

   表紙は見せて、中身は配らない。何が来るのかは伝わったうえで待ってもらう。
   ========================================================================== */

.convention-doc--pending {
	max-width: 320px;
}

/* 束に入れて横に並べるときは、幅は列が決める
   （「押すと開く」の箱と同じ扱い） */
.convention-doc-group--thumb .convention-doc--pending {
	max-width: none;
}

.convention-doc--pending .convention-doc__poster {
	display: block;
	background: var(--convention-doc-stage);
	/* 中身はまだ読ませない。表紙であることだけが伝わればよい。 */
	filter: grayscale(1);
	opacity: .75;
}

.convention-doc__pending {
	padding: .75rem .9rem;
	border-top: 1px solid var(--convention-doc-border);
	font-size: .875rem;
	line-height: 1.6;
}

.convention-doc__pending p {
	margin: 0;
}

.convention-doc__pending-lead {
	font-weight: 700;
}

.convention-doc__pending-when {
	margin-top: .25em !important;
}

.convention-doc__pending-note {
	margin-top: .25em !important;
	color: var(--convention-doc-muted);
}

/* 編集できる人にだけ出る帯。点線で、閲覧者に出るものではないと示す */
.convention-doc__pending-bar {
	margin: 0;
	padding: .6em .8em;
	border-bottom: 1px dashed var(--convention-doc-outline-border);
	background: var(--convention-doc-outline-bg);
	font-size: .8125rem;
	line-height: 1.6;
}

.convention-doc__pending-bar p {
	margin: 0;
}

.convention-doc__pending-bar p + p {
	margin-top: .2em;
	color: var(--convention-doc-muted);
}

/* ==========================================================================
   ページ番号の入力・目次

   30 ページの資料で 20 ページ目を開くのに、次へを 19 回押させない。
   ========================================================================== */

/* 入力欄と総ページ数で 1 つの部品にする。
   別々の箱にすると、間の詰まり具合が場所によって変わり、
   「/ 61」が枠に貼り付いて読みにくくなる。
   外側だけに枠と余白を持たせ、中の入力欄は素にする。
   高さと余白はツールバーのボタンに合わせる。 */
.convention-doc__pager {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .35rem .7rem;
	border: 1px solid var(--convention-doc-border);
	border-radius: var(--convention-radius, 6px);
	background: #fff;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--convention-doc-muted);
	/* 縮めない。ツールバーは flex なので、既定では場所が足りなく
	   なると縮み、「/ 61」が入力欄の陰に隠れて読めなくなる。 */
	flex: 0 0 auto;
	white-space: nowrap;
}

/* 入力しているあいだは、部品ごと光らせる */
.convention-doc__pager:focus-within {
	border-color: var(--convention-doc-accent);
}

/* テーマの input[type="number"] は width:100%。
   ツールバーの中では数字 3 桁ぶんあれば足りる。
   クラス 1 つでは素の指定に競り負けるので、外枠から書き始める。 */
.convention-doc .convention-doc__page-input {
	/* 3 桁ぶん。枠は外側の部品が持つので、ここは素に戻す。 */
	width: 2.75em;
	/* 上下の矢印は出さない。前へ・次へがあるので使い道が無く、
	   幅を食って数字が読みにくくなる。 */
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--convention-color-text, #1d1d1d);
	font-size: inherit;
	line-height: inherit;
	text-align: right;
}

.convention-doc .convention-doc__page-input::-webkit-outer-spin-button,
.convention-doc .convention-doc__page-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.convention-doc__page-total {
	white-space: nowrap;
}

/* 目次。長い資料では画面を覆うので、高さを決めて中で送る。 */
.convention-doc__outline-panel {
	max-height: 16rem;
	overflow-y: auto;
	padding: .5rem .75rem;
	border-bottom: 1px solid var(--convention-doc-border);
	background: var(--convention-doc-panel-bg);
	font-size: .875rem;
}

.convention-doc .convention-doc__outline-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 下の階層は字下げで示す。記号を足すと深いところで行頭が揃わない。 */
.convention-doc .convention-doc__outline-list .convention-doc__outline-list {
	margin: 0 0 0 1em;
	padding-left: .75em;
	border-left: 1px solid var(--convention-doc-border);
}

/* テーマの button は濃い地に白文字。目次は一覧なので素に戻す。 */
.convention-doc .convention-doc__outline-item {
	display: block;
	width: 100%;
	padding: .3em 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.convention-doc .convention-doc__outline-item:hover,
.convention-doc .convention-doc__outline-item:focus {
	color: var(--convention-doc-accent);
	text-decoration: underline;
}

/* 目次を開いているときのボタン。押されていることを示す */
.convention-doc__toolbar .convention-doc__outline[aria-expanded="true"] {
	border-color: var(--convention-doc-accent);
	background: var(--convention-doc-accent);
	color: #fff;
}

/* ==========================================================================
   キーボードで送る

   資料の枠を選べるようにしている（tabindex）。選ばれていることが
   見えないと、矢印キーが効く相手が分からない。
   ========================================================================== */

.convention-doc:focus {
	outline: none;
}

.convention-doc:focus-visible {
	outline: 2px solid var(--convention-doc-accent);
	outline-offset: 2px;
}

/* キーを受け取っている資料。
   矢印キーや、e-paper 端末のページ送りボタンが、この資料に効く。
   触って選んだときは :focus-visible が付かない端末が多いので、
   class を付けて自分で示す。
   e-paper では色が出ないため、太さで分かるようにしている。 */
.convention-doc.is-keys {
	box-shadow: 0 0 0 2px var(--convention-doc-accent);
}

/* 資料をなぞって送るとき、ブラウザの「引っぱって戻る」を止める。
   横になぞるたびに前のページへ戻ってしまう端末がある。

   **つまむ操作は JS が受け持つ**（pinch-zoom を渡さない）。
   ブラウザ任せのつまみ拡大は、全画面のあいだ効かない端末があり、
   全画面にした途端に拡げられなくなっていた。こちらで受ければ
   全画面でもふだんの表示でも同じように動き、拡げたあとは
   その大きさで描き直せるので字もぼやけない。

   **横方向はブラウザに渡さない**（pan-x を書かない）。
   渡すと、横になぞった時点でブラウザが「画面を動かす操作」として
   受け取ってしまい、こちらへは「取り消し」しか届かない。
   **拡げていないのに、なぞってページを送れない**という形で表に出た。
   拡げて横に動かせるようになったときだけ、JS が pan-x を足す。 */
.convention-doc__pages {
	overscroll-behavior-x: contain;
	touch-action: pan-y;
}

/* ==========================================================================
   読み込み中の案内

   大きな資料は読み終わるまで間がある。何も出ないと、壊れているのか
   待てばよいのかが分からない。すぐ開ける資料では出さない
   （JS が少し待ってから出す）。一瞬ちらつくほうが落ち着かない。
   ========================================================================== */

.convention-doc {
	/* 案内を重ねるための基準 */
	position: relative;
}

.convention-doc__loading {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(255, 255, 255, .92);
}

.convention-doc__loading[hidden] {
	display: none;
}

.convention-doc__loading-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	max-width: 22rem;
	text-align: center;
}

.convention-doc__loading-text {
	font-weight: 600;
}

.convention-doc__loading-count {
	color: var(--convention-doc-muted);
	font-size: .875rem;
	/* 数字が増えるたびに幅が変わって、まわりが揺れないようにする */
	font-variant-numeric: tabular-nums;
}

.convention-doc__loading-note {
	color: var(--convention-doc-muted);
	font-size: .8125rem;
	line-height: 1.5;
}

/* 目盛り */
.convention-doc__loading-bar {
	position: relative;
	overflow: hidden;
	width: min(18rem, 70vw);
	height: 6px;
	border-radius: 3px;
	background: var(--convention-doc-track);
}

.convention-doc__loading-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background: var(--convention-doc-accent);
	transition: width .2s ease-out;
}

/* 大きさが分からないときは、行ったり来たりさせる。
   進み具合を偽って出すと、止まっているのか進んでいるのかが
   かえって分からなくなる。 */
.convention-doc__loading-fill.is-unknown {
	position: absolute;
	width: 40%;
	animation: convention-doc-slide 1.2s ease-in-out infinite;
	transition: none;
}

@keyframes convention-doc-slide {

	0% {
		left: -40%;
	}

	100% {
		left: 100%;
	}
}

/* ぐるぐる */
.convention-doc__spinner {
	width: 1.75rem;
	height: 1.75rem;
	border: 3px solid var(--convention-doc-track);
	border-top-color: var(--convention-doc-accent);
	border-radius: 50%;
	animation: convention-doc-spin .8s linear infinite;
}

@keyframes convention-doc-spin {

	100% {
		transform: rotate(360deg);
	}
}

/* 動きを減らす設定の人には、動かさずに出す */
@media (prefers-reduced-motion: reduce) {

	.convention-doc__spinner,
	.convention-doc__loading-fill.is-unknown {
		animation: none;
	}

	.convention-doc__loading-fill.is-unknown {
		position: static;
		width: 100%;
		opacity: .4;
	}
}