.ntg-gim{
	--gim-floor: color-mix(in srgb, var(--ntg2-surface, #fff) 82%, var(--ntg2-text, #1a1714) 18%);
	--gim-floor-2: color-mix(in srgb, var(--ntg2-surface, #fff) 70%, var(--ntg2-text, #1a1714) 30%);
	--gim-ink: var(--ntg2-text, #1a1714);
	--gim-aoe: #ff7a18;
	--gim-safe: #22b573;
	--gim-me: #2f7df6;
	--gim-pet: #1fae63;
	--gim-foe: #d8352a;
	--gim-add: #9b4dd8;
	border: 1px solid var(--ntg2-line, #e3e0dc);
	border-radius: 8px;
	gap: 10px 18px;
	/* 並び方は図の枠の幅で決める（コンテナクエリ）。どの図も同じ幅で縦並びに切り替わる（2026-09-28 依頼主） */
	container-type: inline-size;
	margin: 1.2em 0 1.6em;
	padding: 12px 14px;
}
.ntg-gim__title{
	font-weight: 700;
	margin-block-end: 8px;
	line-height: 1.5;
}
.ntg-gim.is-full{
	border: 2px solid var(--gim-foe);
}
.ntg-gim.is-full .ntg-gim__title{
	color: var(--gim-ink);
	font-size: 1.2em;
	font-weight: 800;
}
.ntg-gim.is-full .ntg-gim__kicker{
	color: var(--gim-foe);
	display: block;
	font-size: 2em;
	font-weight: 900;
	letter-spacing: .06em;
	line-height: 1.3;
}
.ntg-gim.is-full .ntg-gim__name{
	display: block;
	font-size: 1.3em;
	font-weight: 800;
	margin-block-start: 2px;
}
.ntg-gim__svg{
	aspect-ratio: 100 / 108.5; /* 上の帯は詠唱バー（2026-09-28） */
	block-size: auto;
	display: block;
	inline-size: 100%;
}
.ntg-gim__rail{
	min-inline-size: 0;
}
@container (min-width: 560px){
.ntg-gim__rail{
		contain: size;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: relative;
		scrollbar-width: thin;
	}
}
.ntg-gim [data-on]:not(.is-on){
	opacity: 0;
}
.ntg-gim [data-on]{
	transition: opacity calc(.44s / var(--gim-speed, 1)) ease;
}
@keyframes ntg-gim-cast{
	from { fill-opacity: .45; }
	to { fill-opacity: 1; }
}
@keyframes ntg-gim-hit{
	0% { fill-opacity: 1; stroke-width: 2.2; }
	100% { fill-opacity: .8; stroke-width: .7; }
}
.ntg-gim [data-at],
.ntg-gim [data-rot]{
	/* 1.0× は最初の版の 0.8 倍の速さ（2026-09-27 依頼主「デフォは今の0.8にして、それを1として」） */
	transition: transform calc(.94s / var(--gim-speed, 1)) cubic-bezier(.4, 0, .2, 1);
}
.ntg-gim.is-instant [data-at],
.ntg-gim.is-instant [data-rot],
.ntg-gim.is-instant [data-on]{
	transition: none;
}
@keyframes ntg-gim-knock{
	from { transform: translateY(1.5px); opacity: 0; }
	40% { opacity: .6; }
	to { transform: translateY(-2.5px); opacity: 0; }
}
.ntg-gim .ntg-gim__steps{
	counter-reset: gim;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ntg-gim__steps > li{
	border-inline-start: 3px solid transparent;
	counter-increment: gim;
	line-height: 1.6;
	margin: 0 0 .35em;
	padding: .3em .5em .3em 2.1em;
	position: relative;
}
.ntg-gim__steps > li::before{
	background: var(--ntg2-line-2, #d3cec7);
	border-radius: 50%;
	color: var(--gim-ink);
	content: counter(gim);
	font-size: .78em;
	font-weight: 700;
	inline-size: 1.55em;
	block-size: 1.55em;
	inset-block-start: .45em;
	inset-inline-start: .45em;
	line-height: 1.55em;
	position: absolute;
	text-align: center;
}
.ntg-gim.is-js .ntg-gim__steps > li{
	cursor: pointer;
	opacity: .62;
	transition: opacity .2s;
}
.ntg-gim.is-js .ntg-gim__steps > li.is-current{
	background: color-mix(in srgb, var(--ntg2-accent, #b72305) 8%, transparent);
	border-inline-start-color: var(--ntg2-accent, #b72305);
	opacity: 1;
}
.ntg-gim.is-js .ntg-gim__steps > li.is-current::before{
	background: var(--ntg2-accent, #b72305);
	color: #fff;
}
.ntg-gim__steps b{
	margin-inline-end: .35em;
}
.ntg-gim__ctrl{
	align-items: center;
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-block-start: 8px;
}
.ntg-gim.is-js .ntg-gim__ctrl{
	display: flex;
}
.ntg-gim__ctrl button{
	background: var(--ntg2-surface, #fff);
	border: 1px solid var(--ntg2-line-2, #d3cec7);
	border-radius: 6px;
	color: var(--gim-ink);
	cursor: pointer;
	font-size: .85em;
	line-height: 1;
	min-inline-size: 3.2em;
	padding: .5em .7em;
}
.ntg-gim__ctrl button:focus-visible,
.ntg-gim__steps > li:focus-visible{
	outline: 2px solid var(--ntg2-accent, #b72305);
	outline-offset: 2px;
}
.ntg-gim__ctrl [data-act="play"]::before{ content: "❚❚ 一時停止"; }
.ntg-gim.is-paused .ntg-gim__ctrl [data-act="play"]::before{ content: "▶ 再生"; }
@media (prefers-reduced-motion: reduce){
.ntg-gim [data-at],
	.ntg-gim [data-rot],
	.ntg-gim [data-on]{
		transition: none;
	}
}
.ntg-gim__speed{
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	min-inline-size: 3.6em;
	text-align: center;
}
@container (max-width: 559.98px){
.ntg-gim.is-js .ntg-gim__rail{
		overflow: clip;
		overflow-clip-margin: 0;
	}
.ntg-gim.is-js .ntg-gim__steps{
		--gim-w: 78%;
		display: flex;
		gap: 8px;
		transform: translateX(calc((100% - var(--gim-w)) / 2 - (var(--gim-cur, 1) - 1) * (var(--gim-w) + 8px)));
		transition: transform calc(.5s / var(--gim-speed, 1)) ease;
	}
.ntg-gim.is-js .ntg-gim__steps > li{
		border: 1px solid var(--ntg2-line, #e3e0dc);
		border-inline-start-width: 3px;
		border-radius: 6px;
		box-sizing: border-box;
		flex: 0 0 var(--gim-w);
		margin: 0;
	}
.ntg-gim.is-instant .ntg-gim__steps{
		transition: none;
	}
}
@keyframes ntg-gim-pop{
	from { transform: scale(.3); }
	to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
.ntg-gim.is-js .ntg-gim__steps,
	.ntg-gim__act.is-on image{
		animation: none;
		transition: none;
	}
}
@keyframes ntg-gim-castbar{
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
.ntg-clip{ margin: 1.2em auto; max-width: 480px; }
.ntg-clip video{ display: block; width: 100%; height: auto; background: transparent; cursor: pointer; }
.ntg-clip figcaption{ font-size: 0.85em; color: var(--color_text_sub, #666); text-align: center; margin-top: 0.4em; }