/*------------------------------------------------------------------------------
 更新速報
 ------------------------------------------------------------------------------*/
.newsItemList {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px 8px;
	background: #F9FAFB;
}

/* item
 ------------------------------------------------------------------------------*/
.newsItem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px;
	text-decoration: none;
	color: #333;
	background: rgba(252,250,192,0.5);
	border: 1px solid #F9B56B;
	border-radius: 3px;

	&::after {
		position: absolute;
		top: 50%;
		right: 10px;
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		margin-top: -4px;
		border-style: solid solid none none;
		border-width: 2px;
		border-color: #F90;
		transform: rotate(45deg);
	}

	&[role="text"]::after {
		display: none;
	}

	/* photo
	 --------------------------------------------------------------------------*/
	.photo {
		flex: 0 0 80px;
		aspect-ratio: 4 / 5;
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	/* datas
	 --------------------------------------------------------------------------*/
	.datas {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 6px;
		min-height: 100px;
	}

	.subject {
		font-size: 14px;
		font-weight: bold;
		color: #80F;

		img.icon {
			display: inline-block;
			height: 28px;
		}
	}

	.shop {
		font-size: 14px;
		font-weight: bold;
		color: #F0A;
	}

	.topic {
		color: #096;

		small {
			font-size: 13px;
			color: red;
		}
	}

	.content {
		color: #8000FF;
	}

	&:not([role="text"]) :is(.topic, .content) {
		padding-right: 10px;
	}

	.date {
		font-size: 13px;
	}
}