@charset "utf-8";

.voice_wrap {
	width: 100%;
}
.voice_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: var(--cont-margin40);
}
.voice_box {
	padding: var(--cont-margin20);
	background: #fff;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 16px;
	.comment_area {
		height: 10rem;
		overflow-y: hidden;
		position: relative;
	}
	.comment_area::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg,transparent 50%,#fff 100%);
	}
}

/*
個別詳細記事
*/
#detail .detail_wrap {
	background: #fff;
	padding: var(--cont-margin30);
	border-radius: 16px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.detail_img_wrap {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	gap: var(--cont-margin30);
	margin-top: var(--cont-margin30);
}

#detail .title_wrap {
	h2 {
		font-size: var(--font-l);
		text-align: left;
		line-height: 1.2;
	}
}
#detail .title_wrap::after {
	width: 100%;
	height: 2px;
	border-radius: 0;
	margin: var(--cont-margin20) auto var(--cont-margin30);
}

#detail .comment_area {
	margin-top: var(--cont-margin30);
}

.star span {
	color: transparent;
	-webkit-background-clip: text !important;
}