@charset "UTF-8";

.mv {
	background: var(--white) url('https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/news/mv_img.svg') no-repeat right bottom -98% / 40.5%;
}

.mv-tag {
	background: var(--cyanTeal);
}

@media (max-width: 768px) {
	.mv {
		background: var(--white) url('https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/news/mv_img.svg') no-repeat right bottom 2% / 33%;
	}
}

.news {
	padding-top: 140px;
}

.news__filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.news__wrap {
	padding-bottom: 140px;
	border-bottom: 1px solid var(--border-grey);
}

.news__categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.news__category {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	background: var(--white);
	border: 1px solid var(--color-category);
	border-radius: 100vmax;
	color: var(--color-category);
	font-size: 1rem;
	padding-inline: 30px;
	min-height: 42px;
	min-width: 140px;
	transition: transform .2s ease;
}

a.is-active .news__category {
	background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
	a:hover .news__category {
		border: none;
		background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
		color: var(--white);
	}
}

.news__year-select {
	flex-shrink: 0;
}

.news__year-inner {
	position: relative;
	display: inline-flex;
	align-items: center;
	border-bottom: 2px solid var(--black);
}

.news__year-current {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: block;
	width: 197px;
	min-width: 197px;
	margin: 0;
	padding: 0 5px 15px;
	border: 0;
	outline: 0;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: var(--font-basic);
	line-height: 1;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.news__year-current:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.news__year-arrow {
	position: absolute;
	top: 15%;
	right: 5px;
	width: 0.75em;
	height: 0.375em;
	color: var(--black);
	pointer-events: none;
}

.news__year-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.news__year-list {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	z-index: 10;
	width: 100%;
	margin: 0;
	padding-block: 20px;
	font-size: var(--font-14);
	background: var(--white);
	display: none;
	box-shadow: 0px 0px 15px rgba(45, 91, 110, 0.1);
}

.news__year-inner.is-open .news__year-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.news__year-link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 15px;
}

.news__year-link::before {
	content: "";
	display: block;
	transform: translateY(+0.1em);
	width: 0.25em;
	height: 0.25em;
	flex-shrink: 0;
	background-color: transparent;
	border-radius: 50%;
}

.news__year-link:hover {
	background: #e9f3f6;
}

.news__year-item.is-active .news__year-link::before {
	background-color: var(--cyanTeal);
}

@media (max-width: 768px) {
	.news {
		padding-top: 100px;
	}

	.news__filter {
		flex-direction: column;
		gap: 20px;
	}

	.news__wrap {

		padding-bottom: 100px;
	}

	.news__categories {
		gap: 10px;
	}

	.news__categories .news__category {
		font-size: var(--font-15);
		padding-inline: 10px;
		min-height: 29px;
		min-width: 80px;
	}

	.news__year-select select {
		font-size: 0.9375rem;
	}
}

.news__content {
	background-image: var(--bg-dot);
	background-repeat: repeat;
	padding: var(--content-inner-gutter);
}

.news__list {
	flex: 1;
	min-width: 0;
	background: var(--white);
	border-top: 3px solid var(--black);
	border-bottom: 3px solid var(--black);
}

.news__link {
	display: flex;
	align-items: center;
	gap: 50px;
	padding: 35px 20px;
}

.news__item {
	min-height: 108px;
	border-bottom: 1px solid var(--border-grey);
}

.news__item:last-child {
	border-bottom: none;
}

.news__item .news__category {
	display: grid;
	place-items: center;
	background: var(--white);
	border: 1px solid var(--color-category);
	border-radius: 100vmax;
	color: var(--color-category);
	font-size: var(--font-12);
	padding-inline: 0;
	min-height: 29px;
	min-width: 90px;
}

.news__meta {
	display: flex;
	align-items: center;
	gap: 50px;
	flex-shrink: 0;
}

.news__date {
	font-family: var(--font-heading);
	font-size: var(--font-15);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.02em;
}

.news__body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.news__body .cta__link-icon {
	width: 2.375em;
	height: 2.375em;
	border-radius: 2.42px;
	border: 1px solid #000000B3;
	background: var(--white);
	color: var(--black);
}

.news__title {

	font-size: var(--font-18);
	font-weight: 400;
	line-height: 1.6;
}

.news__title.link-pdf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.news__title.link-pdf::after {
	content: "";
	width: 2.25em;
	height: 1.25em;
	display: inline-block;
	transform: translateY(0.1em);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 20' fill='none'%3E%3Crect x='.5' y='.5' width='35' height='19' rx='2.5' stroke='%23CF3737'/%3E%3Cpath d='M9.786 10.686h.0c.296 0 .554-.036.774-.108.22-.076.402-.182.546-.318.148-.14.258-.308.33-.504.072-.2.108-.422.108-.666 0-.232-.036-.442-.108-.63-.072-.188-.18-.348-.324-.48-.144-.132-.326-.232-.546-.3-.22-.072-.48-.108-.78-.108H8.58v3.114h1.206ZM9.786 6.324c.58 0 1.082.068 1.506.204.424.136.774.326 1.05.57.276.244.48.536.612.876.136.34.204.712.204 1.116 0 .42-.07.806-.21 1.158-.14.348-.35.648-.63.9-.28.252-.632.448-1.056.588-.42.14-.912.21-1.476.21H8.58V15H6.966V6.324h2.82ZM22.34 10.662c0 .636-.106 1.22-.318 1.752-.212.532-.51.99-.894 1.374-.384.384-.846.682-1.386.894-.54.212-1.14.318-1.8.318h-3.306V6.324h3.306c.66 0 1.26.108 1.8.324.54.212 1.002.51 1.386.894.384.38.682.836.894 1.368.212.532.318 1.116.318 1.752Zm-1.656 0c0-.476-.064-.902-.192-1.278-.124-.38-.306-.7-.546-.96-.236-.264-.524-.466-.864-.606-.336-.14-.716-.21-1.14-.21h-1.686v6.108h1.686c.424 0 .804-.07 1.14-.21.34-.14.628-.34.864-.6.24-.264.422-.584.546-.96.128-.38.192-.808.192-1.284ZM25.625 7.608v2.568h3.252v1.29h-3.252V15h-1.62V6.324h5.472v1.284h-3.852Z' fill='%23CF3737'/%3E%3C/svg%3E") center / contain no-repeat;
}

.news__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	margin-top: 90px;
}

.news__pagination-prev,
.news__pagination-next,
.news__pagination-prev.is-disabled,
.news__pagination-next.is-disabled {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 14px;
	color: var(--black);
	text-decoration: none;
}

.news__pagination-prev.is-disabled,
.news__pagination-next.is-disabled {
	opacity: 0.3;
}

.news__pagination-prev svg,
.news__pagination-next svg {
	display: block;
	width: 18px;
	height: 12px;
}

.news__pagination-numbers {
	display: flex;
	align-items: center;
	gap: 40px;
}

.news__pagination-numbers a, .news__pagination-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: var(--font-18);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.11em;
}

.news__pagination-numbers .is-current {
	position: relative;
}

.news__pagination-numbers .is-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background-color: var(--black);
}

@media (hover: hover) and (pointer: fine) {
	.news__pagination-numbers a:hover {
		opacity: 0.3;
	}
}

@media (hover: hover) and (pointer: fine) {
	.news__pagination-prev:hover {
		opacity: 0.3;
	}

	.news__pagination-next:hover {
		opacity: 0.3;
	}
}

.news__pagination-dots {
	min-width: auto !important;
	color: var(--black);
}

@media (max-width: 768px) {
	.news__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 20px 10px;
	}

	.news__meta {
		gap: 10px;
	}

	.news__date {
		font-size: 0.875rem;
	}

	.news__item .news__category {
		font-size: 0.9375rem;
		padding-inline: 10px;
		min-width: 80px;
	}

	.news__body {
		padding: 0;
		gap: 10px;
	}

	.news__body .cta__link-icon {
		width: 1.5em;
		height: 1.5em;
	}

	.news__body .cta__link-icon svg {
		width: 50%;
		height: 50%;
	}

	.news__title {
		font-size: 1rem;
	}

	.news__pagination {
		gap: 20px;
		margin-top: 70px;
	}

	.news__pagination-numbers {
		gap: 20px;
	}

	.news__pagination-numbers a, .news__pagination-numbers span {
		font-size: 1rem;
	}
}