@charset "UTF-8";

/* ====================================
	共通スタイル
===================================== */

.second_pagettl small span {
	display: inline-block;
	margin-inline-end: .5rem;
	color: var(--color-notes);
}

.second_pagettl {
	margin-block: 10rem;
}

.voice_list_ttl h3 {
	margin-block: 5rem 1em;
	font-size: 2.4rem;
	font-weight: 700;
}

.voice_list_item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 3%;
	align-items: center;
	padding-block: 1rem;
	padding-inline: 3%;
	border-bottom: 1px solid #959595;
}

.voice_list_item:nth-of-type(1) {
	border-top: 1px solid #959595;
}

.voice_list_item > div {
	display: grid;
	grid-template-columns: auto 20% 30%;
	gap: 3%;
	place-items: center;
  grid-auto-flow: column;
}

.voice_list_item > img {
	width: 80px;
	margin-inline: auto;
}

.voice_list_item h4 {
	width: 100%;
	text-align: left;
	font-size: 2rem;
	font-weight: 700;
}

.voice_list_item .voice_sample {
	width: 100%;
}

.voice_list_item .voice_list_item_audio {
	display: grid;
  place-content: center;
  place-items: center;
  grid-auto-flow: column;
	width: 100%;
	padding-block: 1rem;
	padding-inline: 2rem;
	border-radius: 20px;
	align-items: center;
	line-height: 1.2;
	background: #D9D9D9;
}

.voice_list_item .voice_list_item_audio span {
  display: grid;
  place-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	margin-inline-start: .8rem;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%2285%22%20viewBox%3D%220%200%2085%2085%22%20fill%3D%22none%22%3E%0D%0A%20%20%3Cg%20clip-path%3D%22url%28%23clip0_8365_7069%29%22%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M42.09%200C18.85%200%200%2018.84%200%2042.09C0%2065.34%2018.85%2084.19%2042.09%2084.19C65.33%2084.19%2084.19%2065.34%2084.19%2042.09C84.19%2018.84%2065.34%200%2042.09%200ZM59.49%2043.95L46.3%2051.57L33.11%2059.18C31.34%2060.21%2029.9%2059.37%2029.9%2057.32V26.86C29.9%2024.81%2031.34%2023.98%2033.11%2025L46.3%2032.62L59.49%2040.24C61.27%2041.27%2061.27%2042.93%2059.49%2043.95Z%22%20fill%3D%22black%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M59.4904%2043.9505L46.3004%2051.5705L33.1104%2059.1805C31.3404%2060.2105%2029.9004%2059.3705%2029.9004%2057.3205V26.8605C29.9004%2024.8105%2031.3404%2023.9805%2033.1104%2025.0005L46.3004%2032.6205L59.4904%2040.2405C61.2704%2041.2705%2061.2704%2042.9305%2059.4904%2043.9505Z%22%20fill%3D%22white%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%20%20%3Cdefs%3E%0D%0A%20%20%20%20%3CclipPath%20id%3D%22clip0_8365_7069%22%3E%0D%0A%20%20%20%20%20%20%3Crect%20width%3D%2284.19%22%20height%3D%2284.19%22%20fill%3D%22white%22%2F%3E%0D%0A%20%20%20%20%3C%2FclipPath%3E%0D%0A%20%20%3C%2Fdefs%3E%0D%0A%3C%2Fsvg%3E");
	background-size: contain;
}

.voice_list_item .voice_list_item_audio.playing span {
	background-image: url("data:image/svg+xml;charset=utf8,%3csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%2285%22%20viewBox%3D%220%200%2085%2085%22%20fill%3D%22none%22%3E%0D%0A%3Cg%20clip-path%3D%22url%28%23clip0_8365_7070%29%22%3E%0D%0A%3Cpath%20d%3D%22M42.09%200C18.85%200%200%2018.84%200%2042.09C0%2065.34%2018.85%2084.18%2042.09%2084.18C65.33%2084.18%2084.19%2065.33%2084.19%2042.09C84.19%2018.85%2065.34%200%2042.09%200ZM39.01%2054.91C39.01%2056.55%2037.68%2057.88%2036.04%2057.88H31.46C29.82%2057.88%2028.49%2056.55%2028.49%2054.91V29.28C28.49%2027.64%2029.82%2026.31%2031.46%2026.31H36.04C37.68%2026.31%2039.01%2027.64%2039.01%2029.28V54.91ZM55.7%2054.91C55.7%2056.55%2054.37%2057.88%2052.73%2057.88H48.15C46.51%2057.88%2045.18%2056.55%2045.18%2054.91V29.28C45.18%2027.64%2046.51%2026.31%2048.15%2026.31H52.73C54.37%2026.31%2055.7%2027.64%2055.7%2029.28V54.91Z%22%20fill%3D%22black%22%2F%3E%0D%0A%3Cpath%20d%3D%22M36.0402%2057.8796C37.6802%2057.8796%2039.0102%2056.5496%2039.0102%2054.9096V29.2796C39.0102%2027.6396%2037.6802%2026.3096%2036.0402%2026.3096H31.4602C29.8202%2026.3096%2028.4902%2027.6396%2028.4902%2029.2796V54.9096C28.4902%2056.5496%2029.8202%2057.8796%2031.4602%2057.8796H36.0402Z%22%20fill%3D%22white%22%2F%3E%0D%0A%3Cpath%20d%3D%22M52.7302%2057.8796C54.3702%2057.8796%2055.7002%2056.5496%2055.7002%2054.9096V29.2796C55.7002%2027.6396%2054.3702%2026.3096%2052.7302%2026.3096H48.1502C46.5102%2026.3096%2045.1802%2027.6396%2045.1802%2029.2796V54.9096C45.1802%2056.5496%2046.5102%2057.8796%2048.1502%2057.8796H52.7302Z%22%20fill%3D%22white%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cdefs%3E%0D%0A%3CclipPath%20id%3D%22clip0_8365_7070%22%3E%0D%0A%3Crect%20width%3D%2284.19%22%20height%3D%2284.19%22%20fill%3D%22white%22%2F%3E%0D%0A%3C%2FclipPath%3E%0D%0A%3C%2Fdefs%3E%0D%0A%3C%2Fsvg%3E");
}

.voice_list_item_dl {
	width: 100%;
}

.voice_list_item_dl a {
	display: grid;
  place-content: center;
  place-items: center;
  grid-auto-flow: column;
	width: 100%;
	padding-inline: 2rem;
	padding-block: 1rem;
	line-height: 1.2;
	border: 1px solid #A5287A;
	background: #A5287A;
	color: #fff;
}

.voice_list_item_dl a svg {
	width: 1.6rem;
	height: 1.7rem;
	margin-inline-start: .5rem;
	fill: #fff;
}

/* 注釈 */
.list_caption_kome {
	margin-block-start: 5rem;
}

.link_btn {
	margin-block: 10rem;
}
.list_caption_kome a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sales-end {
	display: block;
	margin-top: .5em;
	font-size: 1.2rem;
	font-weight: 400;
}

.sales-end span {
	padding-right: 0.5em;
	color: var(--color-notes);
}


/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {

	.voice_list_item .voice_list_item_audio,
	.voice_list_item .voice_list_item_audio * {
		transition: all .4s;
	}

	.voice_list_item .voice_list_item_audio:hover {
		background: #333333;
		color: #fff;
	}

	.voice_list_item_dl a:hover {
		text-decoration: none;
		background: #fff;
		color: #A5287A;
	}

	.voice_list_item_dl a:hover svg {
		transform: translateX(5px);
		fill: #A5287A;
	}

	.list_caption_kome a:hover {
		opacity: 0.7;
		text-decoration: none;
	}

}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	.second_pagettl {
		margin-block: 5rem;
	}
	
	.voice_list_ttl h3 {
		margin-block: 3rem 1em;
		font-size: 1.6rem;
		font-weight: 700;
	}
	
	.voice_list_item {
		grid-template-columns: 60px 1fr;
		gap: 5%;
		padding-block: 1.5rem;
		padding-inline: 0;
	}
	
	.voice_list_item > div {
		display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
	}
		
	.voice_list_item > img {
		width: 60px;
	}
		
	.voice_list_item h4 {
		grid-column: span 2 / span 2;
		padding-inline-start: 0;
		padding-block-end: 1rem;
		font-size: 1.5rem;
		border-bottom: 1px dotted #959595;
	}
	
	.voice_list_item .voice_list_item_audio {
		padding-inline: .5rem;
		font-size: 1.2rem;
		border-radius: 10px;
	}
	
	.voice_list_item .voice_list_item_audio span {
		width: 1.8rem;
		height: 1.8rem;
		margin-inline-start: .5rem;
	}
	
	.voice_list_item .voice_list_item_audio span svg {
		width: .6rem;
		height: .7rem;
	}
	
	.voice_list_item_dl a {
		padding-inline: .3rem;
		padding-block: .2rem;
		font-size: 1.2rem;
		min-height: 3.8rem;
	}
	
	.voice_list_item_dl a svg {
		height: 1.5rem;
		width: 1rem;
		margin-inline-start: .3rem;
	}
	
	/* 注釈 */
	.list_caption_kome {
		margin-block-start: 3rem;
	}
	
	.link_btn {
		margin-block: 5rem;
	}
	
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

}

/* ====================================
	タブレット専用スタイル（768px～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {

}

/* ====================================
	PC専用スタイル（1024px～）
===================================== */
@media print,
screen and (1024px <=width) {}