.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__sub{
	color: color-mix(in srgb, var(--gim-ink) 70%, transparent);
	display: block;
	font-size: .82em;
	font-weight: 400;
}
.ntg-gim__stage{
	position: relative;
}
.ntg-gim__svg{
	aspect-ratio: 100 / 108.5; /* 上の帯は詠唱バー（2026-09-28） */
	block-size: auto;
	display: block;
	inline-size: 100%;
}
.ntg-gim__body{
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
}
.ntg-gim__rail{
	min-inline-size: 0;
}
.ntg-gim__stage{
	inline-size: 100%;
	justify-self: center;
	max-inline-size: 520px;
	min-inline-size: 0;
}
@container (min-width: 560px){
.ntg-gim__body{
		gap: 18px;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
.ntg-gim__rail{
		contain: size;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: relative;
		scrollbar-width: thin;
	}
}
.ntg-gim__floor{
	fill: var(--gim-floor);
	stroke: var(--gim-floor-2);
	stroke-width: 1;
}
.ntg-gim__grid{
	stroke: var(--gim-floor-2);
	stroke-width: .35;
}
.ntg-gim__north{
	fill: color-mix(in srgb, var(--gim-ink) 60%, transparent);
	font-size: 3.4px;
	font-weight: 700;
	text-anchor: middle;
}
.ntg-gim [data-on]:not(.is-on){
	opacity: 0;
}
.ntg-gim [data-on]{
	transition: opacity calc(.44s / var(--gim-speed, 1)) ease;
}
.ntg-gim__aoe{
	fill: color-mix(in srgb, var(--gim-aoe) 30%, transparent);
	stroke: var(--gim-aoe);
	stroke-width: .7;
}
.ntg-gim .is-cast .ntg-gim__aoe,
.ntg-gim .ntg-gim__aoe.is-cast{
	animation: ntg-gim-cast calc(1.12s / var(--gim-speed, 1)) ease-in-out infinite alternate;
}
.ntg-gim .is-hit .ntg-gim__aoe,
.ntg-gim .ntg-gim__aoe.is-hit{
	animation: ntg-gim-hit calc(.69s / var(--gim-speed, 1)) ease-out 1 both;
	fill: color-mix(in srgb, var(--gim-aoe) 72%, #ff2a00);
}
@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__safe{
	fill: color-mix(in srgb, var(--gim-safe) 16%, transparent);
	stroke: var(--gim-safe);
	stroke-dasharray: 2 1.4;
	stroke-width: .7;
}
.ntg-gim__path{
	fill: none;
	stroke: var(--gim-me);
	stroke-dasharray: 1.6 1.2;
	stroke-linecap: round;
	stroke-width: .8;
}
.ntg-gim__beam{
	stroke: var(--gim-foe);
	stroke-dasharray: 2.2 1.2;
	stroke-linecap: round;
	stroke-width: 1.6;
}
.ntg-gim__beam.is-far{
	stroke: #b98af0;
	stroke-dasharray: none;
	stroke-width: .9;
}
.ntg-gim__orb{
	fill: color-mix(in srgb, #8b3fd9 55%, transparent);
	stroke: #b98af0;
	stroke-width: .6;
}
.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;
}
.ntg-gim__unit circle{
	stroke: #fff;
	stroke-width: .8;
}
.ntg-gim__unit.is-me circle{ fill: var(--gim-me); }
.ntg-gim__unit.is-pet circle{ fill: var(--gim-pet); }
.ntg-gim__unit.is-foe circle{ fill: var(--gim-foe); }
.ntg-gim__unit.is-add circle{ fill: var(--gim-add); }
.ntg-gim__unit text{
	fill: #fff;
	font-size: 3px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
}
.ntg-gim__unit .ntg-gim__tag{
	fill: var(--gim-ink);
	font-size: 3px;
	paint-order: stroke;
	stroke: var(--gim-floor);
	stroke-width: .8px;
}
.ntg-gim__head .ntg-gim__headbg{
	stroke: #fff;
	stroke-width: .5;
}
.ntg-gim__head.is-target .ntg-gim__headbg{ fill: #d8409a; }
.ntg-gim__head.is-target .ntg-gim__headtip{ fill: #f07cc0; stroke: #fff; stroke-width: .3; }
.ntg-gim__head.is-buster .ntg-gim__headbg{ fill: #c9201c; }
.ntg-gim__head.is-flame .ntg-gim__headbg{ fill: #a3121a; stroke: #f0b64a; }
.ntg-gim__head.is-march .ntg-gim__headbg{ fill: #2f7fe0; }
.ntg-gim__head.is-count .ntg-gim__headbg{ fill: #e8a020; }
.ntg-gim__head .ntg-gim__headdot{ fill: #fff; }
.ntg-gim__knock path{
	fill: none;
	stroke: var(--gim-ink);
	stroke-width: .7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .5;
}
.ntg-gim__knock.is-on .ntg-gim__knockflow{
	animation: ntg-gim-knock 1.1s ease-out infinite;
}
@keyframes ntg-gim-knock{
	from { transform: translateY(1.5px); opacity: 0; }
	40% { opacity: .6; }
	to { transform: translateY(-2.5px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.ntg-gim__knock.is-on .ntg-gim__knockflow{
		animation: none;
	}
}
.ntg-gim__face{
	fill: #fff;
}
.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 .is-cast .ntg-gim__aoe,
	.ntg-gim .is-hit .ntg-gim__aoe,
	.ntg-gim .ntg-gim__aoe.is-cast,
	.ntg-gim .ntg-gim__aoe.is-hit{
		animation: none;
	}
}
.ntg-gim__ground{
	fill: color-mix(in srgb, #c2261a 42%, transparent);
	stroke: #ff5a3c;
	stroke-width: .6;
}
.ntg-gim__speedbox{
	align-items: center;
	display: inline-flex;
	gap: 4px;
	margin-inline-start: 8px;
}
.ntg-gim__speedbox button{
	min-inline-size: 2.2em;
	padding: .5em .5em;
}
.ntg-gim__speed{
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	min-inline-size: 3.6em;
	text-align: center;
}
.ntg-gim__speedlabel{
	color: color-mix(in srgb, var(--gim-ink) 70%, transparent);
	font-size: .8em;
}
.ntg-gim__path.is-foe{
	stroke: var(--gim-add);
}
@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;
	}
}
.ntg-gim__act image{
	transform-box: fill-box;
	transform-origin: center;
}
.ntg-gim__act.is-on image{
	animation: ntg-gim-pop calc(.45s / var(--gim-speed, 1)) cubic-bezier(.2, 1.6, .4, 1) 1 both;
}
.ntg-gim__act rect{
	fill: color-mix(in srgb, var(--gim-me) 22%, var(--gim-floor));
	stroke: var(--gim-me);
	stroke-width: .6;
}
@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;
	}
}
.ntg-gim__castbg{
	fill: rgba(20, 16, 12, .72);
	stroke: #c9a55a;
	stroke-width: .4;
}
.ntg-gim__castfill{
	fill: #f2c14e;
	transform: scaleX(1);
	transform-box: fill-box;
	transform-origin: left center;
}
.ntg-gim__cast.is-on .ntg-gim__castfill{
	animation: ntg-gim-castbar calc(var(--gim-step, 2375ms) * var(--n, 1)) linear 1 both;
}
.ntg-gim__castname{
	fill: #fff;
	font-size: 3.1px;
	font-weight: 700;
	text-anchor: middle;
}
@keyframes ntg-gim-castbar{
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce){
.ntg-gim__cast.is-on .ntg-gim__castfill{
		animation: none;
	}
}
.ntg-gim__unit.is-bomb circle{
	fill: #1d1d1f;
	stroke: #ffb14a;
	stroke-width: .5;
}
.ntg-gim__path.is-pet{
	stroke: var(--gim-pet);
}
.ntg-gim__orb.is-glow{
	fill: #ffe066;
	stroke: #fff6c2;
	stroke-width: .7;
	filter: drop-shadow(0 0 1.2px #ffd000);
}
.ntg-gim__orb.is-red{
	fill: #ff4a3d;
	stroke: #ffc2bb;
	stroke-width: .7;
	filter: drop-shadow(0 0 1.2px #ff2a1a);
}
.ntg-gim__unit.is-wind circle{
	fill: color-mix(in srgb, #3fd49a 45%, transparent);
	stroke: #bff5dc;
	stroke-dasharray: 1.2 .8;
	stroke-width: .6;
}
.ntg-gim__orb.is-wind{
	fill: #3fd49a;
	stroke: #d6fff0;
	stroke-width: .6;
	filter: drop-shadow(0 0 1.2px #2bd08c);
}
.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; }