.news {
margin: 60px auto 120px;
display: grid;
grid-template-columns: 1fr 240px;
gap: 40px;
}
.news-cnt {
padding: 40px;
border-radius: 15px;
background-color: var(--color-white);
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
} .news-year-title {
text-align: center;
font-size: 18px;
font-weight: var(--font-weight-bold);
}
.news-year-list {
margin-top: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
.news-year-list li a {
padding: 8px;
display: block;
background-color: #FFEBE6;
border-radius: 5px;
text-align: center;
font-size: 14px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
} .newsArchive-title {
font-size: 28px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
}
.news-list {
margin-top: 25px;
display: flex;
flex-direction: column;
}
.news-list li {
border-top: 1px solid var(--color-border-beige);
}
.news-list li:last-of-type {
border-bottom: 1px solid var(--color-border-beige);
}
.news-list li a {
padding: 25px 60px 25px 0;
display: grid;
grid-template-columns: 70px 1fr;
align-items: center;
gap: 30px;
position: relative;
cursor: pointer;
}
.news-list li a::after {
content: "";
display: block;
width: 30px;
height: 30px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/news/icon-arrow.svg) center center / contain no-repeat;
position: absolute;
top: calc(50% - 15px);
left: auto;
right: 0;
}
.news-list li a:hover {
opacity: 0.5;
}
.news-list time {
font-size: 12px;
color: var(--text-sub-color);
}
.news-list span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
white-space: normal;
} .news-paginate {
margin-top: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}
.page-numbers:not(.next, .prev) {
display: grid;
align-items: center;
width: 40px;
aspect-ratio: 1;
background-color: #FFEBE6;
border-radius: 999px;
text-align: center;
font-size: 14px;
color: #99797C;
}
.page-numbers.current {
background-color: var(--color-main);
color: var(--color-white);
}
.page-numbers.next, .page-numbers.prev {
font-size: 0;
width: 40px;
aspect-ratio: 1;
position: relative;
}
.page-numbers.next::before, .page-numbers.prev::before {
content: "";
display: block;
width: 9px;
height: 15px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/news/icon-paginate-arrow.svg) center center / contain no-repeat;
position: absolute;
top: calc(50% - 7px);
left: calc(50% - 4px);
}
.page-numbers.next::before {
transform: scaleX(-1);
}
.page-numbers:not(.current) {
transition: transform 0.3s ease;
}
.page-numbers:not(.current):hover {
transform: scale(1.3);
}
.page-numbers.next,
.page-numbers.prev {
transition: transform 0.3s ease;
}
.page-numbers.next:hover,
.page-numbers.prev:hover {
transform: scale(1.3);
}
@media screen and (min-width: 768px) { .news-year {
padding: 24px 15px;
background-color: var(--color-white);
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
border-radius: 10px;
height: fit-content;
position: sticky;
top: 150px;
}
}
@media screen and (max-width: 1040px) { .news-list li a {
padding: 15px 45px 15px 0;
grid-template-columns: 1fr;
gap: 5px;
}
}
@media screen and (max-width: 767px) {
.news {
margin: 30px auto 60px;
grid-template-columns: 1fr;
}
.news-cnt {
padding: 30px 15px;
} .news-year-title {
font-size: 20px;
}
.news-year-list {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.news-year-list li a {
padding: 10px;
} .newsArchive-title {
font-size: 24px;
}
.news-list {
margin-top: 15px;
}
.news-list span {
-webkit-line-clamp: 2;
line-clamp: 2;
}
} .newsSingle-title {
font-size: 30px;
}
.newsSingle-date {
margin-top: 10px;
font-size: 14px;
color: var(--text-sub-color);
}
.newsSingle .entry-content {
margin-top: 30px;
font-weight: var(--font-weight-regular);
} .newsSingle-nav {
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 15px;
}
.newsSingle-navList {
position: relative;
overflow: hidden;
padding: 6px 10px;
width: 150px;
border-radius: 999px;
background-color: var(--color-main);
color: var(--color-white);
text-align: center;
font-size: 12px;
font-weight: var(--font-weight-bold);
isolation: isolate;
transition: transform 0.3s ease;
}
.newsSingle-navList::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--text-main-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
.newsSingle-navList:hover {
transform: scale(1.1);
}
.newsSingle-navList:hover::before {
transform: scaleX(1);
}
.newsSingle-navArrow {
display: inline-block;
width: 30px;
aspect-ratio: 1;
position: relative;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/news/icon-arrow.svg) center center / contain no-repeat;
transition: transform 0.3s ease;
}
.newsSingle-navArrow:hover {
transform: scale(1.3);
}
.newsSingle-navArrow.-prev {
transform: scaleX(-1);
}
.newsSingle-navArrow.-prev:hover {
transform: scaleX(-1) scale(1.3);
}
@media screen and (max-width: 767px) {
.newsSingle-title {
font-size: 20px;
}
.newsSingle-date {
font-size: 12px;
}
.newsSingle .entry-content {
margin-top: 20px;
}
}