.p-news {
padding: 0 0 5.625rem;
& .c-category__title {
text-align: left;
}
& .category-filter {
display: flex;
align-items: center;
gap: 1.375rem;
margin-bottom: 2.25rem;
padding: 1.5rem 1.875rem;
border-radius: .625rem;
background: var(--color-main);
& .c-category__title {
font-size: 1rem;
font-weight: 700;
color: var(--color-wh);
}
}
& .c-category__list {
display: flex;
align-items: center;
gap: .625rem;
&::before {
content: none;
}
& .c-category__item {
border-radius: 1rem;
border: 1px solid var(--color-wh);
line-height: 1;
a {
display: block;
padding: .375rem 1rem;
font-size: .8125rem;
color: var(--color-wh);
vertical-align: middle;
}
&.active {
background: var(--color-wh);
a {
color: var(--color-main);
}
}
}
}
& .p-news__item {
border-bottom: 2px solid var(--color-bg02);
}
& .p-news__link {
display: flex;
align-items: center;
padding: 1.875rem 1.25rem;
color: var(--color-bk);
@media (768px > width) {
flex-wrap: wrap;
gap: .25rem .5rem;
padding: 1rem 0;
}
& .p-news__title {
font-size: 1rem;
font-weight: 500;
}
& .p-news__date {
font-size: .875rem;
font-weight: 700;
color: var(--color-main);
}
& .p-news__category {
margin: 0 1.25rem 0 1.125rem;
padding: .375rem 1rem;
border-radius: 1rem;
font-size: .8125rem;
font-weight: 700;
line-height: 1;
border: 1px solid var(--color-main);
color: var(--color-main);
}
}
}