/* DN Core — 表の横スクロール案内（scrollhint） */

/* 枠が無い表だけ包む横スクロールの枠 */
.dn-sh-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* 横スクロールの枠の中で、見えている範囲に貼り付く高さ0の層（表の上に重ねる） */
.dn-sh-host {
	position: relative;
}
.dn-sh {
	position: sticky;
	left: 0;
	display: block;
	width: 100%;
	height: 0;
	z-index: 5;
	pointer-events: none;
}

/* 右端の影（続きがある合図）。いちばん右まで動かすと消える */
.dn-sh__edge {
	position: absolute;
	top: 0;
	right: 0;
	width: 26px;
	height: var(--dn-sh-h, 0);
	background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .16));
	opacity: 0;
	transition: opacity .3s ease;
}
.dn-sh-on > .dn-sh .dn-sh__edge {
	opacity: 1;
}
.dn-sh-on.dn-sh-end > .dn-sh .dn-sh__edge {
	opacity: 0;
}

/* 指の案内 */
.dn-sh__hint {
	position: absolute;
	left: 50%;
	top: var(--dn-sh-top, 60px);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}
.dn-sh-hinting > .dn-sh .dn-sh__hint {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s;
}
.dn-sh__circle {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: rgba(22, 32, 54, .74);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	color: #fff;
}
.dn-sh__hand {
	width: 34px;
	height: 34px;
	transform: translateX(8px);
}
.dn-sh-hinting > .dn-sh .dn-sh__hand {
	animation: dn-sh-swipe 1.5s ease-in-out .15s 2;
}
@keyframes dn-sh-swipe {
	0%, 100% { transform: translateX(8px); }
	50% { transform: translateX(-11px); }
}
.dn-sh__label {
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(22, 32, 54, .74);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.dn-sh-hinting > .dn-sh .dn-sh__hand {
		animation: none;
	}
}

/* 印刷では出さない */
@media print {
	.dn-sh { display: none; }
}