@charset "UTF-8";
/* ジャーナル 一覧・共通（10/28 追加。デザインデータ style.css / style-sp.css より） */
/* ----------------------------------
   ジャーナル（journal）
---------------------------------- */
body.journal {
	background-color: #eff3f4;
}

.journal-page {
	padding-bottom: 100px;
	color: #171717;
	font-family: 'Noto Sans JP', sans-serif;
}

/* タイトル */
.journal-page .section-title {
	margin-bottom: 100px;
}

/* 絞り込み */
.journal-page .journal-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 65px;
}

.journal-page .journal-filter__button {
	--bg-color: var(--color-dark-gray);
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 15px;
	border: 0;
	border-radius: 5px;
	background-color: #fff;
	color: #171717;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0;
	transition: color 0.2s;
}

.journal-page .journal-filter__button:not(.is-current):hover {
	cursor: pointer;
}

.journal-page .journal-filter__button.is-current {
	background-color: #484848;
	color: #fff;
}

.journal-page .journal-filter__button span {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: currentColor;
	transition:
		background-color 0.2s,
		transform 0.2s;
}

@media (hover: hover) {
	.journal-page .journal-filter__button:not(.is-current):hover {
		color: var(--bg-color);
	}

	.journal-page .journal-filter__button:not(.is-current):hover span {
		transform: scale(1.4);
	}
}
/* 記事一覧 */
.journal-page .journal-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(24px, 4vw, 53.333px);
	row-gap: 100px;
}

:is(.journal-page, .journal-single) .journal-card {
	position: relative;
	min-width: 0;
}

:is(.journal-page, .journal-single) .journal-card__image-link {
	display: block;
	width: 84.615385%;
	aspect-ratio: 220 / 138;
	margin-left: 15.384615%;
	background-color: #d4dfe2;
	transition: transform 0.25s;
}

:is(.journal-page, .journal-single) .journal-card__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 220 / 138;
	border-radius: 5px;
	object-fit: cover;
}

:is(.journal-page, .journal-single) .journal-card__title a,
:is(.journal-page, .journal-single) .journal-card__category {
	color: inherit;
	text-decoration: none;
}
:is(.journal-page, .journal-single) .journal-card__date {
	color: #484848;
	position: absolute;
	top: 0;
	left: 0;
	writing-mode: vertical-rl;
	font-family: 'Urbanist', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

:is(.journal-page, .journal-single) .journal-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow-wrap: anywhere;
	margin: 20px 0 15px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.79;
	letter-spacing: 0;
}

:is(.journal-page, .journal-single) .journal-card__category {
	display: table;
	padding: 2px 15px;
	border-radius: 5px;
	background-color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
}

/* 記事のホバー */
@media (hover: hover) {
	.journal-card {
		cursor: pointer;
	}
	:is(.journal-page, .journal-single) .journal-card:hover .journal-card__image-link {
		transform: scale(0.97);
	}

	:is(.journal-page, .journal-single) .journal-card:hover .journal-card__title a {
		text-decoration: underline;
	}
}

/* ページネーション */
.journal-page .journal-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 205px;
	font-family: 'Urbanist', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 0;
}

.journal-page .journal-pagination__item {
	display: grid;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 10px;
	background-color: #a6adaf;
	color: #fff;
	text-decoration: none;
}

.journal-page .journal-pagination__item.is-current {
	background-color: #333;
}

.journal-page .journal-pagination__ellipsis {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: 13px;
	height: 36px;
}

.journal-page .journal-pagination__ellipsis img {
	display: block;
	width: 13px;
	height: 3px;
	object-fit: cover;
}

.journal-page .journal-pagination__prev,
.journal-page .journal-pagination__next {
	display: block;
	flex-shrink: 0;
	width: 13px;
	height: 10px;
}

.journal-page .journal-pagination__prev {
	margin-right: 7px;
}

.journal-page .journal-pagination__next {
	margin-left: 7px;
}

.journal-page .journal-pagination__prev img,
.journal-page .journal-pagination__next img {
	display: block;
	width: 13px;
	height: 10px;
	object-fit: cover;
}

.journal-page .journal-pagination__prev img {
	transform: rotate(180deg);
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	.journal-page .journal-list {
		column-gap: 24px;
		row-gap: 64px;
	}
}

/* ---- SP ---- */
@media (max-width: 767px) {
	/* タイトル */
	.journal-page .section-title {
		margin-bottom: 50px;
	}

	/* 絞り込み */
	.journal-page .journal-filter {
		gap: 6px 12px;
		margin-bottom: 30px;
	}

	.journal-page .journal-filter::before {
		content: '';
		order: 1;
		flex-basis: 100%;
		height: 0;
	}

	.journal-page .journal-filter__button {
		gap: 10px;
		padding: 3.5px 15px;
		font-size: 13px;
		line-height: 1.77;
		white-space: nowrap;
	}

	.journal-page .journal-filter__button:nth-child(n + 3) {
		order: 2;
	}

	/* 記事一覧 */
	.journal-page .journal-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	:is(.journal-page, .journal-single) .journal-card {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 18px auto 1fr;
		column-gap: 10px;
		align-content: start;
	}

	:is(.journal-page, .journal-single) .journal-card__image-link {
		grid-column: 1;
		grid-row: 1 / 4;
		align-self: start;
		width: 100%;
		aspect-ratio: 170 / 106;
		margin: 0;
	}

	:is(.journal-page, .journal-single) .journal-card__image {
		aspect-ratio: 170 / 106;
	}

	:is(.journal-page, .journal-single) .journal-card__date {
		position: static;
		grid-column: 2;
		grid-row: 1;
		writing-mode: horizontal-tb;
		font-size: 12px;
		line-height: 1.5;
	}

	:is(.journal-page, .journal-single) .journal-card__title {
		grid-column: 2;
		grid-row: 2;
		margin: 0 0 10px;
	}

	:is(.journal-page, .journal-single) .journal-card__category {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		justify-self: start;
	}

	/* ページネーション */
	.journal-page .journal-pagination {
		gap: 15px;
		margin-top: 100px;
		font-size: 16px;
	}
}
.journal-page .journal-empty { padding: 60px 0; text-align: center; }