/**
 * お客様の声 — 横マーキー（CSS transform 無限ループ）
 * @package YaneCare
 */

:root {
	--yt-voice-bg: #f5f3ef;
	--yt-voice-card-bg: #ffffff;
	--yt-voice-border: #e0e0e0;
	--yt-voice-shadow: 0 1px 2px rgba(60, 64, 67, 0.28), 0 1px 3px rgba(60, 64, 67, 0.18);
	--yt-voice-text: #1a1510;
	--yt-voice-muted: #5f6368;
	--yt-voice-star: #fbbc04;
	--yt-voice-accent: #3983c7;
	--yt-voice-pad-x: 18px;
	--yt-voice-card-w: 300px;
	--yt-voice-gap: 20px;
	--yt-voice-duration: 55s;
}

@media (min-width: 960px) {
	:root {
		--yt-voice-pad-x: 80px;
		--yt-voice-gap: 24px;
	}
}

.yt-voice-section {
	background: var(--yt-voice-bg);
	padding: 48px 0 56px;
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--yt-voice-text);
}

.yt-voice-section__head {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--yt-voice-pad-x) 28px;
	text-align: center;
}

.yt-voice-section__label {
	font-family: 'Oswald', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yt-voice-accent);
	margin: 0 0 8px;
}

.yt-voice-section__title {
	font-size: clamp(1.35rem, 3.5vw, 1.75rem);
	font-weight: 700;
	margin: 0;
	line-height: 1.35;
}

/* ビューポート全幅ブレイクアウト */
.yt-voice-marquee-breakout {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: var(--yt-voice-pad-x);
	padding-right: var(--yt-voice-pad-x);
	box-sizing: border-box;
}

/* マーキー：通常は overflow 隠し、CSS アニメ。RM 時は横スクロール */
.yt-voice-marquee-viewport {
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}

.yt-voice-marquee-viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.yt-voice-marquee-viewport:focus-visible {
	outline: 2px solid var(--yt-voice-accent);
	outline-offset: 2px;
}

/* ユーザー操作による水平オフセット（ドラッグ） */
.yt-voice-marquee-pan {
	--ux: 0px;
	transform: translateX(var(--ux));
	will-change: transform;
}

/* 2セグメント同一内容 — JS（RAF）で translateX を直接制御 */
.yt-voice-marquee-loop {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.yt-voice-marquee-viewport {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
		cursor: default;
	}

	.yt-voice-marquee-viewport::-webkit-scrollbar {
		height: 6px;
	}

	.yt-voice-marquee-viewport::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 3px;
	}

	.yt-voice-marquee-pan {
		transform: none !important;
	}

	.yt-voice-marquee-loop {
		animation: none !important;
		transform: none !important;
	}
}

.yt-voice-marquee-segment {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--yt-voice-gap);
	padding: 8px 0 12px;
	flex: 0 0 auto;
	align-items: stretch;
}

/* カード（Googleレビュー風） */
.yt-voice-card {
	flex: 0 0 var(--yt-voice-card-w);
	width: var(--yt-voice-card-w);
	max-width: 85vw;
	box-sizing: border-box;
	background: var(--yt-voice-card-bg);
	border: 1px solid var(--yt-voice-border);
	border-radius: 10px;
	box-shadow: var(--yt-voice-shadow);
	padding: 16px 18px 14px;
	display: flex;
	flex-direction: column;
	min-height: 168px;
}

.yt-voice-card__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.yt-voice-card__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
	color: #1a73e8;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Oswald', sans-serif;
}

.yt-voice-card__meta {
	min-width: 0;
}

.yt-voice-card__name {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 2px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yt-voice-card__stars {
	display: flex;
	gap: 2px;
	align-items: center;
	color: var(--yt-voice-star);
	font-size: 13px;
	line-height: 1;
}

.yt-voice-card__stars .fa-regular {
	color: #dadce0;
}

.yt-voice-card__body-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
}

.yt-voice-card__body {
	font-size: 14px;
	line-height: 1.65;
	color: var(--yt-voice-text);
	margin: 0;
	word-break: break-word;
}

.yt-voice-card__body.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.yt-voice-card__toggle {
	margin-top: 8px;
	padding: 0;
	border: none;
	background: none;
	color: var(--yt-voice-accent);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	align-self: flex-start;
}

.yt-voice-card__toggle:hover {
	color: #2a5f9a;
}

.yt-voice-card__toggle:focus-visible {
	outline: 2px solid var(--yt-voice-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

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