/* Nettoge Anim Fig — 動く図（2026-11-04）。
   図の中の色は紙・インク・赤と、別々の物を見分ける 4 色だけ（依頼主の指摘 S734）。ライト・ダークは下の変数で切り替わるので図は 1 枚で済む。
   枠・ボタン・文はサイトの --ntg2-*。字はサイトの字（SVG に埋め込まない）。 */
.ntg-anim {
	--af-paper: #f1ead8;
	--af-ink: #3b2f22;
	--af-soft: #6e5c46;
	--af-red: #a12a1c;
	--af-c1: #205c8a;
	--af-c2: #2e7048;
	--af-c3: #b07610;
	--af-c4: #704284;
	--af-flash: #fff;
	--af-panel: color-mix(in srgb, var(--af-ink) 7%, var(--af-paper));
	--af-mute: color-mix(in srgb, var(--af-ink) 22%, var(--af-paper));
	background: var(--ntg2-surface, #fff);
	border: 1px solid var(--ntg2-line, #e3e0dc);
	border-radius: 10px;
	margin: 1.6em 0 2em;
	padding: 12px 12px 14px;
}

html[data-nettoge-theme="dark"] .ntg-anim {
	--af-paper: #2b2117;
	--af-ink: #e0d3b8;
	--af-soft: #aa9a80;
	--af-red: #e87054;
	--af-c1: #76b2e4;
	--af-c2: #88c88c;
	--af-c3: #e8ba5c;
	--af-c4: #be96e4;
	--af-flash: #fff3d6;
}

.ntg-anim__title {
	color: var(--ntg2-text, #1a1714);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 10px;
}

.ntg-anim__stage {
	background: var(--af-paper);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}

.ntg-anim.is-ready:not(.is-reduced) .ntg-anim__stage {
	cursor: pointer;
}

.ntg-anim__svg {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.ntg-anim__svg text {
	font-family: inherit;
	font-weight: 700;
}

.ntg-anim__svg .af-thin {
	font-weight: 500;
}

/* 図の色 */
.af-f-ink { fill: var(--af-ink); }
.af-f-soft { fill: var(--af-soft); }
.af-f-red { fill: var(--af-red); }
.af-f-paper { fill: var(--af-paper); }
.af-f-panel { fill: var(--af-panel); }
.af-f-mute { fill: var(--af-mute); }
.af-f-c1 { fill: var(--af-c1); }
.af-f-c2 { fill: var(--af-c2); }
.af-f-c3 { fill: var(--af-c3); }
.af-f-c4 { fill: var(--af-c4); }
.af-f-flash { fill: var(--af-flash); }
/* 地図の上の印。地図はテーマで変わらないので、どちらのテーマでも同じ色 */
.af-f-cream { fill: #fff6df; }
.af-s-cream { fill: none; stroke: #fff6df; }
.af-f-night { fill: #2a1d12; }
.af-s-night { fill: none; stroke: #2a1d12; }
.af-f-maphot { fill: #d8301e; }
.af-s-maphot { fill: none; stroke: #ff5a3c; }
.af-s-ink { fill: none; stroke: var(--af-ink); }
.af-s-soft { fill: none; stroke: var(--af-soft); }
.af-s-red { fill: none; stroke: var(--af-red); }
.af-s-mute { fill: none; stroke: var(--af-mute); }
.af-s-c1 { fill: none; stroke: var(--af-c1); }
.af-s-c2 { fill: none; stroke: var(--af-c2); }
.af-s-c3 { fill: none; stroke: var(--af-c3); }
.af-s-c4 { fill: none; stroke: var(--af-c4); }

/* 真ん中の再生ボタン（再生の前と、終わったあと） */
.ntg-anim__big {
	align-items: center;
	background: color-mix(in srgb, var(--af-red) 92%, transparent);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
	color: #fff;
	cursor: pointer;
	display: none;
	height: 72px;
	justify-content: center;
	left: 50%;
	margin: -36px 0 0 -36px;
	padding: 0;
	position: absolute;
	top: 50%;
	transition: transform .15s ease;
	width: 72px;
}

html[data-nettoge-theme="dark"] .ntg-anim__big {
	color: #2b2117;
}

.ntg-anim__big:hover {
	transform: scale(1.08);
}

.ntg-anim__big svg {
	display: block;
	fill: currentColor;
	height: 38px;
	width: 38px;
}

.ntg-anim.is-ready.is-fresh .ntg-anim__big,
.ntg-anim.is-ready.is-ended .ntg-anim__big {
	display: flex;
}

.ntg-anim.is-ready.is-reduced .ntg-anim__big {
	display: none;
}

/* 操作の帯 */
.ntg-anim__bar {
	align-items: center;
	display: flex;
	gap: 6px;
	margin-top: 10px;
}

.ntg-anim__btn {
	align-items: center;
	background: var(--ntg2-paper, #f6f5f3);
	border: 1px solid var(--ntg2-line, #e3e0dc);
	border-radius: 6px;
	color: var(--ntg2-text, #1a1714);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: 13px;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	line-height: 1;
	min-width: 36px;
	padding: 0 6px;
}

.ntg-anim__btn svg {
	display: block;
	fill: currentColor;
	height: 18px;
	width: 18px;
}

.ntg-anim__btn.is-main {
	background: var(--af-red);
	border-color: var(--af-red);
	color: #fff;
	min-width: 44px;
}

html[data-nettoge-theme="dark"] .ntg-anim__btn.is-main {
	color: #2b2117;
}

.ntg-anim__seek {
	flex: 1 1 auto;
	height: 36px;
	min-width: 40px;
	position: relative;
}

.ntg-anim__seek input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	height: 36px;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.ntg-anim__seek input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--af-red) var(--p, 0%), var(--ntg2-line, #e3e0dc) var(--p, 0%));
	border-radius: 3px;
	height: 6px;
}

.ntg-anim__seek input[type="range"]::-moz-range-track {
	background: var(--ntg2-line, #e3e0dc);
	border-radius: 3px;
	height: 6px;
}

.ntg-anim__seek input[type="range"]::-moz-range-progress {
	background: var(--af-red);
	border-radius: 3px;
	height: 6px;
}

.ntg-anim__seek input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--af-red);
	border: 2px solid var(--ntg2-surface, #fff);
	border-radius: 50%;
	height: 18px;
	margin-top: -6px;
	width: 18px;
}

.ntg-anim__seek input[type="range"]::-moz-range-thumb {
	background: var(--af-red);
	border: 2px solid var(--ntg2-surface, #fff);
	border-radius: 50%;
	box-sizing: border-box;
	height: 18px;
	width: 18px;
}

/* 場面の区切りの目盛り */
.ntg-anim__marks {
	bottom: 4px;
	left: 8px;
	pointer-events: none;
	position: absolute;
	right: 8px;
	top: auto;
	height: 5px;
}

.ntg-anim__marks i {
	background: color-mix(in srgb, var(--ntg2-text, #1a1714) 40%, transparent);
	display: block;
	height: 5px;
	margin-left: -1px;
	position: absolute;
	top: 0;
	width: 2px;
}

.ntg-anim__count {
	color: color-mix(in srgb, var(--ntg2-text, #1a1714) 70%, transparent);
	flex: none;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	min-width: 3.2em;
	text-align: right;
}

/* 場面の説明。JS があるときは動画の枠の中の下部に大きな字幕で出す。時間が進むと消えず、上へ薄くスクロールして 1 つ前まで残る（11-04 依頼主）。
   今の字幕は下の段、1 つ前は上の段。段ごとに全部の場面を同じ升に重ねるので、字幕が変わっても枠の高さが変わらない。JS が無いときは図の下の番号つきの一覧 */
.ntg-anim__screen {
	background: var(--af-paper);
	border-radius: 6px;
	overflow: hidden;
}

.ntg-anim__screen .ntg-anim__stage {
	border-radius: 0;
}

.ntg-anim__cap {
	color: var(--af-ink);
	display: grid;
	font-size: 22px;
	font-weight: 700;
	grid-template-rows: auto auto;
	line-height: 1.5;
	overflow: hidden;
	padding: 4px 22px 16px;
	text-align: center;
}

.ntg-anim__cap > .ntg-anim__prev {
	font-size: 15px;
	font-weight: 500;
	grid-row: 1;
}

.ntg-anim__cap > .ntg-anim__hint,
.ntg-anim__cap > .ntg-anim__steps:not(.ntg-anim__prev) {
	align-self: center;
	grid-column: 1;
	grid-row: 2;
}

.ntg-anim__hint {
	color: var(--af-soft);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	visibility: hidden;
}

.ntg-anim.is-ready.is-fresh .ntg-anim__hint {
	visibility: visible;
}

@keyframes ntg-anim-new {
	from { opacity: 0; transform: translateY(45%); }
	to { opacity: 1; transform: none; }
}

@keyframes ntg-anim-rise {
	from { opacity: 1; transform: translateY(110%); }
	to { opacity: .5; transform: none; }
}

body :is(.post_content, .entry-content, .wp-block-post-content) ol.ntg-anim__steps {
	counter-reset: none;
	font-size: 15px;
	line-height: 1.7;
	margin: 10px 0 0;
	padding: 0 0 0 1.5em;
}

body :is(.post_content, .entry-content, .wp-block-post-content) ol.ntg-anim__steps > li {
	margin: 0 0 .3em;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__steps {
	display: grid;
	font-size: inherit;
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__steps > li {
	align-self: center;
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	visibility: hidden;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__steps > li::before,
body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__steps > li::marker {
	content: none;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__steps > li.is-on {
	animation: ntg-anim-new .4s ease both;
	visibility: visible;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__prev {
	font-size: 15px;
	pointer-events: none;
}

body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__prev > li.is-on {
	animation: ntg-anim-rise .4s ease both;
	opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
	body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__steps > li.is-on {
		animation: none;
	}
}

.ntg-anim.is-reduced .ntg-anim__btn.is-main,
.ntg-anim.is-reduced .ntg-anim__seek,
.ntg-anim.is-reduced .ntg-anim__btn.is-speed {
	display: none;
}

.ntg-anim.is-reduced .ntg-anim__bar {
	justify-content: flex-start;
}

@media (max-width: 480px) {
	.ntg-anim {
		padding: 8px 8px 12px;
	}

	.ntg-anim__big {
		height: 60px;
		margin: -30px 0 0 -30px;
		width: 60px;
	}

	.ntg-anim__big svg {
		height: 32px;
		width: 32px;
	}

	.ntg-anim__count {
		display: none;
	}

	.ntg-anim__cap {
		font-size: 17px;
		line-height: 1.5;
		padding: 2px 12px 12px;
	}

	body :is(.post_content, .entry-content, .wp-block-post-content) .ntg-anim.is-ready ol.ntg-anim__prev {
		font-size: 13px;
	}

	.ntg-anim__hint {
		font-size: 15px;
	}
}

@media print {
	.ntg-anim__bar,
	.ntg-anim__big,
	.ntg-anim__hint {
		display: none;
	}
}