/* 役：右端の上下移動の帯（全ページ）。手本＝V9.6 のトップとコラムの右端の帯（.scroll-control）。帯は assets/js/rail.js が作って body の終わりに足す（SWELL の部品の外）。
   上から「ページの上へ」「ひと画面上へ」「進み具合（つまんで動かせる）」「ひと画面下へ」。横の位置は rail.js が本文の右の余白の中に決める（--tdr-rail-left）。
   SWELL の「ページの上へ戻る」の丸い釦が出ているときは、その上に重ならないように rail.js が下の位置を上げる（--tdr-rail-bottom）。
   スマホ幅（900px 以下）は、本番と同じく帯の分（36px）を本文の右に空ける（トップは lp.css の .wrap で同じ幅を空ける）。 */
.tdr-rail {
	position: fixed;
	left: var(--tdr-rail-left, calc(100% - 52px));
	bottom: var(--tdr-rail-bottom, 24px);
	z-index: 20;
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 5px;
	background: color-mix(in srgb, var(--tdr-paper) 95%, transparent);
	border: 1px solid color-mix(in srgb, var(--tdr-ink) 22%, var(--tdr-paper));
}
.tdr-rail[hidden] { display: none; }
/* スマホの開閉メニューを開いている間は出さない（SWELL は開くと html に data-spmenu="opened" を付ける。帯がメニューの「エントリー」の釦に重ならないように） */
[data-spmenu="opened"] .tdr-rail { display: none; }
.tdr-rail button {
	display: grid;
	place-items: center;
	width: 30px;
	height: 34px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: color-mix(in srgb, var(--tdr-ink) 80%, var(--tdr-paper));
	cursor: pointer;
}
.tdr-rail button:hover { background: color-mix(in srgb, var(--tdr-ink) 10%, var(--tdr-paper)); }
.tdr-rail button[hidden] { display: none; }
.tdr-rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tdr-rail input {
	writing-mode: vertical-lr;
	direction: ltr;
	width: 22px;
	height: 110px;
	margin: 0;
	accent-color: var(--tdr-pink);
	cursor: ns-resize;
}
.tdr-rail :focus-visible { outline: 3px solid var(--tdr-pink); outline-offset: 1px; }
@media (max-width: 900px) {
	.tdr-rail { bottom: var(--tdr-rail-bottom, 14px); width: 32px; gap: 4px; padding: 2px; border: 0; }
	.tdr-rail button { width: 28px; height: 32px; }
	.tdr-rail svg { width: 17px; height: 17px; }
	.tdr-rail input { width: 20px; height: 82px; }
	.tdr-rail:not(:hover):not(:focus-within) { opacity: .85; }
	/* 帯の分の右の余白（トップ以外。トップは lp.css） */
	#body_wrap:not(.tdr-lp) #content.l-container { padding-right: calc(var(--swl-pad_container, 4vw) + 36px); }
}
/* 足元とスタジオの場所も、帯の分を右に空ける（幅1319px以下は、帯が本文の右の余白に入りきらず、足元のリンクや住所の字に重なるか、くっつくため） */
@media (max-width: 1319px) {
	.tdr-studios { padding-right: 36px; }
	.l-footer__inner { padding-right: calc(var(--swl-pad_container, 32px) + 36px); }
}
@media (max-width: 959px) {
	.l-footer__inner { padding-right: calc(var(--swl-pad_container, 16px) + 36px); }
}
@media (prefers-reduced-motion: reduce) {
	.tdr-rail { transition: none; }
}