@charset "utf-8";

/* ---------- NOMON Audio Player ---------- */

.nomon-audio-player {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 16px 20px;
	margin: 16px 0 8px;
	background: #fff;
}

.nomon-audio-player__disclaimer {
	font-size: 1.1rem;
	color: #999;
	margin-bottom: 12px;
	letter-spacing: 0.02em;
}

.nomon-audio-player__controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* 再生ボタン */
.nomon-audio-player__play-btn {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #D9A877;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.nomon-audio-player__play-btn:hover {
	background: #c89560;
}
.nomon-audio-player__play-btn svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}
.nomon-audio-player__play-btn .icon-pause {
	display: none;
}
.nomon-audio-player.is-playing .nomon-audio-player__play-btn .icon-play {
	display: none;
}
.nomon-audio-player.is-playing .nomon-audio-player__play-btn .icon-pause {
	display: block;
}

/* プログレスバー */
.nomon-audio-player__progress-wrap {
	flex: 1;
	height: 6px;
	background: #eee;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
}
.nomon-audio-player__progress-bar {
	height: 100%;
	background: #D9A877;
	border-radius: 3px;
	width: 0%;
	transition: width 0.1s linear;
}

/* 時間表示 */
.nomon-audio-player__time {
	flex-shrink: 0;
	font-size: 1.2rem;
	color: #666;
	min-width: 90px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* 速度プルダウン */
.nomon-audio-player__speed-select {
	flex-shrink: 0;
	padding: 4px 8px;
	font-size: 1.2rem;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
	color: #666;
	cursor: pointer;
	appearance: auto;
}
.nomon-audio-player__speed-select:focus {
	outline: none;
	border-color: #D9A877;
}

/* ---------- SP対応 ---------- */

@media screen and (max-width: 767px) {
	.nomon-audio-player {
		padding: 12px 14px;
	}
	.nomon-audio-player__controls {
		flex-wrap: wrap;
		gap: 8px;
	}
	.nomon-audio-player__play-btn {
		width: 36px;
		height: 36px;
	}
	.nomon-audio-player__progress-wrap {
		flex: 1 1 calc(100% - 48px);
		order: 1;
	}
	.nomon-audio-player__play-btn {
		order: 0;
	}
	.nomon-audio-player__time {
		order: 2;
		font-size: 1.1rem;
		min-width: auto;
	}
	.nomon-audio-player__speed-select {
		order: 3;
	}
}