/* ─────────────────────────────────────────────────────────
   mobile — 880px以下

   PC版の縮小ではない（指示書§25・2026-08-24-mobile-design.md）。
   シールはフィルタに徹し、作品を2列で見せる。

   このファイルの中身はすべて @media (max-width: 880px) の中に置く。
   外に書くとPC版に漏れる。

   注意: responsive.css の @media (max-width: 1024px) は下限が無いので、
   ここでも生きている。--yt-unit・--yt-side・.yt-works の padding-right の
   3つはまだ responsive.css 側の値のまま乗っている（.yt-side の padding は
   このファイルで上書き済み）。ファイルを分けた今は隣に見えないので、
   ここで困る値は「無い」と思い込まず、このファイル側で明示的に
   上書きすること。
   ───────────────────────────────────────────────────────── */

@media (max-width: 880px) {
	/* ─── 縦積み ───────────────────────────────────────
	   PC版のグリッドを解いて、ヘッダー → 帯 → 作品 → ナビ の順に積む。
	   .yt-stage（シール）を order で上へ、.yt-side（署名・作品・ナビ）を下へ。 */

	.yt-toolbox {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 100svh;

		/* ヘッダーの高さ。帯（.yt-stage）が sticky で止まる位置でもある。
		   別々に書くと1〜3pxずれ、固定したときに隙間から作品が覗く。
		   .yt-signature 側で height を固定してあるので、この値が実寸。 */
		--yt-header-h: 47px;
	}

	/* .yt-side はPCの左カラム。モバイルでは箱として要らないので
	   display: contents で解き、中の署名・作品・ナビを .yt-toolbox の
	   直接の子として並べ直す。

	   ただの見た目の都合ではない。解かないと署名の「自然位置」が帯より
	   下（DOM上 .yt-side は帯より前だが order で帯を上へ出すため）になり、
	   sticky top:0 の署名は最上部で y=73 に居座る。一方 sticky top:47px の
	   帯は上限まで押し下げられて y=47。結果、最上部で両者が47px重なり、
	   ヘッダー(z 60)が帯の下半分を覆ってシールが押せなくなる。 */
	.yt-side {
		display: contents;
	}

	.yt-signature {
		order: -2;
	}

	.yt-stage {
		order: -1;
	}

	/* ─── ヘッダー ─────────────────────────────────────
	   署名を画面上端に貼り付ける。作品を見ている間も名前が残る。 */

	/* ─── z-index の体系 ───────────────────────────────
	   999 .yt-skip-link / 90 .yt-tooltip / 60 .yt-signature /
	   55+ シール（bringToFront が上限なく増やす。インライン指定） /
	   auto .yt-stage / 40 .yt-detail。
	   シールは際限なく積み上がりヘッダーの60を数値上は超えるが、
	   .yt-stage の overflow: hidden がクリップするので実際には超えない。
	   この clip を外す時は .yt-stage 自体にも z-index を与えて閉じ込め直すこと。 */

	.yt-signature {
		position: sticky;
		top: 0;
		z-index: 60;
		margin: 0;
		/* 高さは中の署名画像で決まるので放っておくと動く。帯の top と
		   合わせる必要があるため固定し、上下の余白は中央揃えで作る。 */
		box-sizing: border-box;
		height: var(--yt-header-h);
		display: flex;
		align-items: center;
		padding: 0 5vw;
		background: var(--yt-white);
		border-bottom: 1px solid var(--yt-line);
	}

	.yt-signature__name {
		font-size: 15px;
		letter-spacing: 0.16em;
	}

	.yt-signature__mark {
		width: 22px;
	}

	/* ─── 末尾のナビ ───────────────────────────────────
	   同じ項目を右上のメニューからも開ける。29件スクロールした先まで
	   行かないと辿り着けないため（本人の指定・2026-08-24）。 */

	.yt-nav {
		padding: 34px 5vw 46px;
		border-top: 1px solid var(--yt-line);
	}

	.yt-nav__list {
		flex-wrap: wrap;
		gap: 18px 22px;
	}

	.yt-nav__link {
		font-size: 12px;
		letter-spacing: 0.16em;
	}

	/* hover前提の機能は使わない */
	.yt-tooltip {
		display: none;
	}

	/* ─── 作品カード ───────────────────────────────────
	   年ごとの <section> と <ul> を display: contents で透過させ、
	   <li> を .yt-works の2列グリッドへ直接参加させる。
	   PC版のDOM構造を変えずに済む。 */

	.yt-works {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 4vw;
		overflow: visible;
		padding: 22px 5vw 10px;
	}

	.yt-works__year,
	.yt-works__list {
		display: contents;
	}

	/* 年の見出しは出さない。2列のリズムを繰り返し切ると
	   29件のスクロールが実際より長く感じる。年はカード側に出す。 */
	.yt-works__heading {
		display: none;
	}

	/* 段差をつけて、机に広げたように見せる。行の高さが揃うグリッドでも
	   これで整列して見えなくなる。

	   display: contents はDOMを変えないので、:nth-child は年ごとの <ul> の
	   中で数え直される。グリッド上の左右の列とは対応しない。それでよい。
	   狙いは規則正しい交互ではなく、不揃いに見えることなので。 */
	.yt-works__item:nth-child(even) {
		margin-top: 26px;
	}

	.yt-works__link {
		display: block;
		width: 100%;
		padding: 0;
		background: var(--yt-white);
		box-shadow: var(--yt-shadow);
		/* ポラロイドの白フチ。4辺とも同じ太さで、下が広く見えるのは
		   フチの内側に .yt-works__label（作品名と年）が入るから。 */
		border: 7px solid var(--yt-white);
		rotate: -0.8deg;
	}

	/* PC版は下辺の2pxを下線として使い、hover・絞り込み該当・展開中に
	   オレンジへ変える（base.css）。その3つは特異度が (0,2,0)〜(0,4,0) あり、
	   上の (0,1,0) に勝つ。同じ組み合わせで白へ描き直しておかないと、
	   絞り込んだ瞬間にカードの下フチだけ 2px のオレンジ帯に化ける。
	   モバイルで「選ばれている」ことは他のカードが薄くなることで分かる。 */
	.yt-works__link:hover,
	.yt-works.is-filtering .is-match .yt-works__link,
	.yt-works__item.is-open .yt-works__link {
		border: 7px solid var(--yt-white);
	}

	.yt-works__item:nth-child(even) .yt-works__link {
		rotate: 0.9deg;
	}

	.yt-works__item:nth-child(3n) .yt-works__link {
		rotate: 0.5deg;
	}

	.yt-works__shot {
		display: block;
		width: 100%;
		/* 写真の実寸から出した縦横比。読み込み前に高さが決まる。 */
		aspect-ratio: 1 / var(--ratio, 0.75);
		background: var(--yt-line);
		overflow: hidden;
	}

	/* <picture> は既定で inline。高さを持たないと、中の img の height:100% が
	   解決できず object-fit が効かない。 */
	.yt-works__shot picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	.yt-works__shot img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.yt-works__label {
		display: block;
		padding: 8px 2px 2px;
		font-size: 11px;
		line-height: 1.4;
		font-weight: 500;
		color: var(--yt-ink);
	}

	/* 代表作。並び順は既に order:-2 で先頭へ出しているので、
	   ここでも太さだけにとどめる。 */
	.yt-works__item[data-priority='high'] .yt-works__label {
		font-weight: 700;
	}

	.yt-works__year-label {
		display: block;
		font-size: 9px;
		font-weight: 300;
		letter-spacing: 0.12em;
		color: var(--yt-ink-soft);
		margin-top: 2px;
	}

	/* 写真の無い作品はフチだけの白い紙にする。潰れて見えないよう高さを持たせる。 */
	.yt-works__item:not(:has(.yt-works__shot)) .yt-works__link {
		min-height: 88px;
	}

	/* ─── 顔カード ─────────────────────────────────────
	   一覧の1枚目を本人にする。作品と同じ見た目・同じ操作なので
	   説明なしで押せる。スクロールし始めた瞬間に必ず目に入る。
	   写真とラベルは作品カードと同じクラスなので見た目は上の規則が効く。 */

	.yt-works__profile {
		display: block;
		width: 100%;
		padding: 0;
		border: 7px solid var(--yt-white);
		background: var(--yt-white);
		box-shadow: var(--yt-shadow);
		text-align: left;
		cursor: pointer;
		rotate: -1.2deg;
		order: -3;
	}

	/* 写真だけだと本人なのか作品なのか一瞬迷う。1行だけ添える。
	   肩書きを並べず PROFILE の一語にしてあるのは本人の指定（2026-08-24）。
	   カードの年ラベルと同じ体裁なので、作品の並びの中で浮かない。 */
	.yt-works__role {
		display: block;
		margin-top: 2px;
		font-size: 9px;
		font-weight: 300;
		line-height: 1.5;
		letter-spacing: 0.12em;
		color: var(--yt-ink-soft);
	}

	/* ─── 区切り ───────────────────────────────────────
	   主力とそれ以外の境目。2列ぶち抜き。 */

	.yt-works__all {
		/* base.css がPC用に display:none を掛けている。同じ特異度なので
		   ここで戻さないと出ない（.yt-works__profile も同じ理由で block）。 */
		display: block;
		grid-column: 1 / -1;
		order: -1;
		margin: 18px 0 0;
		font-size: 10px;
		font-weight: 300;
		letter-spacing: 0.2em;
		color: var(--yt-ink-soft);
		text-align: center;
	}

	.yt-works__all::before,
	.yt-works__all::after {
		content: '';
		display: inline-block;
		width: 28px;
		height: 1px;
		vertical-align: middle;
		margin: 0 10px;
		background: var(--yt-line);
	}

	/* ─── 主力を先に出す ───────────────────────────────
	   顔カード(-3) → 主力(-2) → 区切り(-1) → 残り(0・年の新しい順)。
	   数十秒しかいない人が最初のスクロールで主力に触れられるようにする。 */

	.yt-works__item[data-priority='high'] {
		order: -2;
	}

	/* 絞り込み中は分割をやめて1本の一覧にする。
	   分けたままだと主力の作品が2回出る。顔カードも一緒に引く。
	   本人は道具でも活動でもなく、どのシールにも該当しないため。 */
	.yt-works.is-filtering .yt-works__item[data-priority='high'] {
		order: 0;
	}

	.yt-works.is-filtering .yt-works__all,
	.yt-works.is-filtering .yt-works__profile {
		display: none;
	}

	/* ─── シールの帯 ───────────────────────────────────
	   PC版の散らばった机をやめ、1段の横スクロールにする。
	   stickers.json の座標は使わない（PC専用の値）。 */

	.yt-stage {
		position: sticky;
		top: var(--yt-header-h);
		z-index: 50;
		height: auto;
		/* はみ出した行をここで隠す。流れは中の .yt-stage__inner を
		   translate で動かして作るので、切り取り役が要る。 */
		overflow: hidden;
		background: var(--yt-white);
		border-bottom: 1px solid var(--yt-line);
		/* 方眼紙はPCの机の見立て。帯には敷かない。 */
		background-image: none;
		transition: translate 0.28s var(--yt-ease);
	}

	/* 下へスクロール中は上へ逃がす。iPhoneの縦は貴重で、
	   帯を常に置くと画面の1割強がずっと潰れる。
	   -100% で帯の高さぶん上がり、ちょうどヘッダー（z-index 60）の
	   裏に完全に隠れる。sticky の top がヘッダー高さと一致しているため。 */
	.yt-toolbox.is-strip-hidden .yt-stage {
		translate: 0 -100%;
	}

	/* 絞り込み中は隠さない。解除する手段（×）が画面から消えると、
	   なぜ件数が少ないのか分からなくなる。
	   applyFilter() が既に付けている is-filtering をそのまま使う。 */
	.yt-stage.is-filtering {
		translate: none;
	}

	/* 1段のまま、ずっと横に流れ続ける（本人の指定・2026-08-24）。
	   流れは toolbox.js が translate を進めて作る。指で触っている間と
	   絞り込み中・シートが出ている間は止まるので、押したいシールが
	   逃げることはない。横に払って手繰ることもできる。

	   scrollLeft でやると滑らかにならない。書き戻すときに整数へ丸められ、
	   22px/秒では45msごとに1pxずつ飛んで見える。translate なら
	   小数のまま動かせる。 */
	.yt-stage__inner {
		position: static;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 5vw;
		/* 画面幅で折り返さない。はみ出したぶんは .yt-stage が隠す。 */
		width: max-content;
		overflow: visible;
		will-change: translate;
		/* 横の払いは自分で拾い、縦のページスクロールはブラウザに渡す。 */
		touch-action: pan-y;
	}

	.yt-sticker {
		/* PC版の absolute を解いて帯の流れに戻す。static ではなく relative
		   なのは、下の ::after（押し面）の基準にするため。
		   .yt-stage が z-index 50 でスタッキングコンテキストを作るので、
		   ここで z-index が効き出してもヘッダー(60)を越えることはない。 */
		position: relative;
		/* stickers.css の left/top は散らばりの座標（--x/--y）。static なら
		   無視されるが relative では効いてしまい、シールが重なって
		   下敷きになった枚が押せなくなる。ここで必ず殺す。 */
		inset: auto;
		flex: none;
		translate: none;
		width: auto;
		height: 52px;
		/* 貼られた向きのばらつきだけ残す */
		rotate: calc(var(--r) * 0.5deg);
		transition: opacity 0.24s var(--yt-ease), scale 0.24s var(--yt-ease);
	}

	/* 押し面を44px確保する。シールは絵の形がまちまちで、3Dプリントは
	   横幅が40pxしかない。帯を厚くして揃える手もあるが、iPhoneの縦は
	   貴重なので、見た目は変えずに当たり判定だけ広げる。
	   ::after はボタン自身の一部なので、そのままボタンが押せる。 */
	.yt-sticker--filter::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		/* 46pxにしてあるのは、シールが少し傾いていて、44pxちょうどだと
		   回転した角のぶん実測が43〜44pxに落ちるため。 */
		width: max(100%, 46px);
		height: max(100%, 46px);
		translate: -50% -50%;
	}

	.yt-sticker img {
		width: auto;
		height: 100%;
	}

	/* プロフィールのシールは帯に置かない。顔カードが担う。 */
	.yt-sticker--profile {
		display: none;
	}

	/* PC版は詳細を開くとシールを2列に整列させ、--ox/--oy/--os で
	   位置と大きさを差し替える（stickers.css）。帯にその整列は要らない。
	   has-detail 側は特異度 (0,2,0) で上の .yt-sticker (0,1,0) に勝つので、
	   同じ組み合わせで打ち消す。放っておくと作品を開いた瞬間に
	   シールが --yt-open-unit（64svh）の幅になり、帯が6段に膨らむ。 */
	.yt-toolbox.has-detail .yt-sticker {
		left: auto;
		top: auto;
		width: auto;
		rotate: calc(var(--r) * 0.5deg);
		transition-delay: 0s;
	}

	.yt-toolbox.has-detail .yt-sticker--filter[aria-pressed='true'] {
		rotate: calc(var(--r) * 0.5deg);
	}

	/* 並びは 道具 → 活動（設計書§3.1）。stickers.json のDOM順は
	   PCの重なり順で決まっていて、意味の順ではない。order で並べ直す。 */
	.yt-sticker[data-sticker='3d-print']  { order: 1; }
	.yt-sticker[data-sticker='electric']  { order: 2; }
	.yt-sticker[data-sticker='graphic']   { order: 3; }
	.yt-sticker[data-sticker='app']       { order: 4; }
	.yt-sticker[data-sticker='illust']    { order: 5; }
	.yt-sticker[data-sticker='hosei']     { order: 6; }
	.yt-sticker[data-sticker='adl']       { order: 7; }
	.yt-sticker[data-sticker='sekiso']    { order: 8; }
	.yt-sticker[data-sticker='ctrl-plus'] { order: 9; }
	.yt-sticker[data-sticker='akai']      { order: 10; }

	/* 選んだ1枚は起き、他は寝る */
	.yt-stage.is-filtering .yt-sticker--filter {
		opacity: 0.32;
	}

	.yt-stage.is-filtering .yt-sticker--filter[aria-pressed='true'] {
		opacity: 1;
		scale: 1.08;
	}

	/* 該当0件は押せない見た目にする */
	.yt-sticker--filter.is-empty {
		opacity: 0.28;
	}

	/* ─── 作品を開いている間の帯 ───────────────────────
	   その作品で使った道具とコミュニティだけを残す。PC版は関係ない
	   シールを薄くして机の散らかりを保つが、帯は1段しかないので、
	   消してしまったほうが「これで作った」が読み取れる。
	   複製も引く。流れは止まっているので、2組並ぶと同じ絵が重複して見える。 */
	.yt-stage.is-relating .yt-sticker:not(.is-related),
	.yt-stage.is-relating [data-sticker-clone] {
		display: none;
	}

	/* PC版は関連シールを16px浮かせて前に出す。その translate は
	   散らばりの座標（--ox/--oy）を基準にした -50% 込みの値なので、
	   基準の違う帯でそのまま効くと、残った数枚だけ上にずれる。 */
	.yt-stage .yt-sticker.is-related {
		translate: none;
		scale: 1;
		transition-delay: 0s;
	}

	/* ─── 右上のメニュー ───────────────────────────────
	   ナビは末尾にもあるが、29件スクロールしないと辿り着けない。
	   ヘッダーと同じ高さに重ねて置く。 */

	.yt-menu-btn {
		/* base.css がPC用に display:none を掛けている。 */
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		/* ヘッダー(60)より上。シートを開いている間はシート(90)が上に来る。 */
		z-index: 61;
		width: var(--yt-header-h);
		height: var(--yt-header-h);
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	/* 3本線。中央の1本を要素で描き、上下を擬似要素で足す。 */
	.yt-menu-btn__bars,
	.yt-menu-btn__bars::before,
	.yt-menu-btn__bars::after {
		display: block;
		width: 18px;
		height: 1.5px;
		background: var(--yt-ink);
		transition: translate 0.2s var(--yt-ease), rotate 0.2s var(--yt-ease),
			opacity 0.2s var(--yt-ease);
	}

	.yt-menu-btn__bars {
		position: relative;
		margin: 0 auto;
	}

	.yt-menu-btn__bars::before,
	.yt-menu-btn__bars::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.yt-menu-btn__bars::before {
		translate: 0 -6px;
	}

	.yt-menu-btn__bars::after {
		translate: 0 6px;
	}

	/* 開いている間は×にする。閉じ方を探させない。 */
	.yt-menu-btn[aria-expanded='true'] .yt-menu-btn__bars {
		background: transparent;
	}

	.yt-menu-btn[aria-expanded='true'] .yt-menu-btn__bars::before {
		translate: 0 0;
		rotate: 45deg;
	}

	.yt-menu-btn[aria-expanded='true'] .yt-menu-btn__bars::after {
		translate: 0 0;
		rotate: -45deg;
	}

	.yt-menu {
		/* base.css がPC用に display:none を掛けている。 */
		display: block;
		position: fixed;
		top: var(--yt-header-h);
		right: 0;
		z-index: 61;
		min-width: 46vw;
		padding: 6px 0;
		background: var(--yt-white);
		border-left: 1px solid var(--yt-line);
		border-bottom: 1px solid var(--yt-line);
		box-shadow: 0 10px 24px -14px rgba(32, 29, 25, 0.5);
	}

	.yt-menu[hidden] {
		display: none;
	}

	/* 中身は末尾のナビと同じ template-parts/navigation。
	   横並びの指定を縦に組み直す。 */
	.yt-menu .yt-nav {
		padding: 0;
		border-top: 0;
	}

	.yt-menu .yt-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.yt-menu .yt-nav__link {
		/* 押し面を44pxにする。文字だけだと指の当たりが小さい。 */
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 26px 0 22px;
	}

	/* ─── 絞り込みのピル ───────────────────────────────
	   帯と一緒に固定する。× がここにあるので、ピルだけ流れて
	   消えると帯を固定した意味がない。

	   DOM上は .yt-detail の後ろにあるので order で帯の直下へ回す。
	   -1 は .yt-stage と同じ値だが、同順ならDOM順なので帯が先に来る。 */

	.yt-pill {
		/* base.css がPC用に display:none を掛けている。 */
		display: block;
		order: -1;
		position: sticky;
		/* 帯の高さは1段と2段で変わる（73px / 109px）。決め打ちにすると
		   展開したときに帯と重なるので、実寸を toolbox.js が入れている。 */
		top: calc(var(--yt-header-h) + var(--yt-strip-h, 73px));
		z-index: 49;
		padding: 10px 5vw 12px;
		background: var(--yt-white);
		border-bottom: 1px solid var(--yt-line);
	}

	.yt-pill[hidden] {
		display: none;
	}

	.yt-pill__clear {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border: 1px solid var(--yt-ink);
		border-radius: 999px;
		background: var(--yt-white);
		padding: 6px 12px;
		font-size: 12px;
		cursor: pointer;
	}

	.yt-pill__x {
		font-size: 14px;
		line-height: 1;
	}

	.yt-pill__lead {
		margin: 8px 0 0;
		font-size: 11px;
		line-height: 1.7;
		color: var(--yt-ink-soft);
	}

	.yt-pill__lead:empty {
		display: none;
	}

	/* 絞り込み中は非該当を消す。PC版は薄くするだけだが、
	   モバイルでは2列のカードなので消さないと絞った実感が出ない。 */
	.yt-works.is-filtering .yt-works__item:not(.is-match) {
		display: none;
	}

	/* ─── 詳細シート ───────────────────────────────────
	   下から7割せり上がる。背後に一覧が透けて「一覧の中にいる」
	   感覚を切らない。上へ引くと全画面まで伸びる。 */

	.yt-detail {
		position: fixed;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		height: 70svh;
		max-height: none;
		border-right: 0;
		border-top: 1px solid var(--yt-line);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(32, 29, 25, 0.24);
		padding: 22px 6vw 40px;
		translate: 0 100%;
		z-index: 90;
		overscroll-behavior: contain;
		transition: translate 0.3s var(--yt-ease), height 0.3s var(--yt-ease);
	}

	.yt-toolbox.has-detail .yt-detail {
		translate: 0 0;
	}

	.yt-toolbox.is-sheet-full .yt-detail {
		height: 100svh;
		border-radius: 0;
	}

	/* 左の罫線はPC版で作品リストと隣り合うためのもの。シートには要らない。 */
	.yt-detail::before {
		display: none;
	}

	/* つまみ。引き上げられることを見た目で示す。 */
	.yt-detail::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 8px;
		translate: -50% 0;
		width: 34px;
		height: 4px;
		border-radius: 999px;
		background: var(--yt-line);
	}

	.yt-detail__close {
		top: 14px;
		right: 5vw;
	}

	/* 背景。押すと閉じる。 */
	.yt-scrim {
		/* base.css がPC用に display:none を掛けている。 */
		display: block;
		position: fixed;
		inset: 0;
		z-index: 85;
		background: rgba(32, 29, 25, 0.34);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s var(--yt-ease);
	}

	.yt-toolbox.has-detail .yt-scrim {
		opacity: 1;
		pointer-events: auto;
	}

	/* シートが出ている間は後ろを固定する。二重スクロールを防ぐ。
	   .yt-toolbox に overflow: hidden を掛けても効かない。ページを
	   スクロールしているのは <main> ではなくビューポートなので、
	   body 側で止める。スクロール位置は toolbox.js が覚えて戻す。 */
	body:has(.yt-toolbox.has-detail) {
		overflow: hidden;
	}
}

/* ─────────────────────────────────────────────────────────
   動きを減らす設定のとき。
   帯の出し入れ・シートのせり上がり・背景の暗転・矢印の回転を止める。
   横スクロールの合図（toolbox.js の hintScrollable）は
   JS側で reduceMotion を見て走らせないので、ここには要らない。
   ───────────────────────────────────────────────────────── */

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
	.yt-stage,
	.yt-detail,
	.yt-scrim,
	.yt-menu-btn__bars,
	.yt-menu-btn__bars::before,
	.yt-menu-btn__bars::after {
		transition-duration: 0.01ms !important;
	}
}