@charset 'UTF-8';

/*----------------------------------------

	- news_tab
	+ news_1column
		- news_date
		- news_label
		- news_tag
		- news_title

-----------------------------------------*/

/*----------------------------------------
	news_tab (切り替えボタン)
-----------------------------------------*/

.news_tab {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(3, 1fr);
	max-width: 700px;
	margin: auto;
}

.news_tab p {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 52px;
	border: 1px solid transparent;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.news_tab .news_all {
	border-color: var(--color_taupegray);
	color: var(--color_raisinblack);
}

.news_tab .news_all.current {
	background: var(--color_taupegray);
	color: var(--color_white);
}

.news_tab .news_notice {
	border-color: var(--color_basicblue);
	color: var(--color_basicblue);
}

.news_tab .news_notice.current {
	background: var(--color_basicblue);
	color: var(--color_white);
}

.news_tab .news_technology {
	border-color: var(--color_pointgold);
	color: var(--color_pointgold);
}

.news_tab .news_technology.current {
	background: var(--color_pointgold);
	color: var(--color_white);
}

/* hover */
@media (hover: hover) {
	.news_tab p.current {
		cursor: default;
	}

	.news_tab p:not(.current) {
		transition: color var(--transition02secEaseout), background  var(--transition02secEaseout);
	}

	.news_tab .news_all:not(.current):hover {
		background: var(--color_taupegray);
		color: var(--color_white);
	}

	.news_tab .news_notice:not(.current):hover {
		background: var(--color_basicblue);
		color: var(--color_white);
	}

	.news_tab .news_technology:not(.current):hover {
		background: var(--color_pointgold);
		color: var(--color_white);
	}
}

/* spサイズ */
@media screen and (max-width: 768px) {
	.news_tab {
		gap: 1.79vw;
		max-width: initial;
	}

	.news_tab p {
		height: 13.33vw;
	}
}

/*----------------------------------------
	news_1column
-----------------------------------------*/

/* 1列 */
.news_1column {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 900px;
	margin: 60px auto 0;
}

.news_1column .news {
	border-bottom: 1px solid var(--color_silver);
}

.news_1column .news li {
	padding: 24px 0 29.4px;
	border-top: 1px solid var(--color_silver);
}

.news_1column .news a {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-rows: auto 1fr;
	gap: 0 58.6px;
	grid-template-areas: 'date label new'
	'date label title';
	align-items: center;
}

/* hover */
@media (hover: hover) {
	.news_1column .news a:hover p {
		text-decoration: underline;
	}
}

.news_1column .news_date {
	display: flex;
	align-items: center;
	grid-area: date;
}

.news_1column .news a>div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	grid-area: label;
}

.news_1column:not(.news_all) .news_label {
	display: none;
}

.news_1column.news_all .news_label {
	display: flex;
}

.news_1column .news_tag {
	display: block;
}

.news_1column .news_new {
	grid-area: new;
}

.news_1column .news_title {
	grid-area: title;
}

.news_1column .news_new + .news_title {
	margin-top: 6px;
}

/* spサイズ */
@media screen and (max-width: 768px) {
	/* 1列 */
	.news_1column {
		max-width: initial;
		margin-top: 10.25vw;
	}

	.news_1column .news li {
		padding: 4.61vw 0 5.85vw;
	}

	.news_1column .news a {
		display: grid;
		gap: 0 4.16vw;
		grid-template-columns: auto 1fr;
		grid-template-areas: 'date label'
		'new new'
		'title title';
	}

	.news_1column .news a>div {
		display: flex;
		flex-direction: row;
		gap: 2.56vw;
		justify-content: flex-start;
		align-items: center;
	}

	.news_1column .news_new {
		margin-top: 3.84vw;
	}

	.news_1column .news a .news_new + .news_title {
		margin-top: 1.53vw;
	}

	.news_1column .news a>div + .news_title {
		margin-top: 3.84vw;
	}
}