.p-media-archive {
padding: 72px 0 0;
background: #fff;
}
@media screen and (max-width: 768px) {
.p-media-archive {
padding: 0 0 0;
background: #fff;
}
} .p-media-archive .m-breadcrumb {
max-width: 1360px;
margin: 0 auto;
padding: 40px 40px 0;
box-sizing: border-box;
} .p-media-archive .p-event-archive-head {
max-width: 1360px;
margin: 0 auto;
padding: 40px 40px 45px;
box-sizing: border-box;
}
.p-media-archive .p-event-archive-head-ja {
margin: 0 0 6px;
color: #666;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
}
.p-media-archive .p-event-archive-head-en {
display: flex;
align-items: center;
gap: 30px;
margin: 0;
color: #111;
font-family: "Roboto", sans-serif;
font-size: 4rem;
font-weight: 700;
line-height: 1;
}
.p-media-archive .p-event-archive-head-en::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: #bbb;
} .p-media-archive-main {
max-width: 1360px;
margin: 0 auto;
padding: 40px 40px 120px;
box-sizing: border-box;
}
.p-media-archive-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 30px 26px;
margin: 0;
padding: 0;
list-style: none;
}
.p-media-archive-item {
min-width: 0;
}
.p-media-archive-link {
display: block;
color: inherit;
text-decoration: none;
transition: .3s;
}
.p-media-archive-image {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1 / 1.4;
background: #eee;
}
.p-media-archive-image img {
display: block;
width: 100%;
height: 100%;
transition: .3s;
} .p-media-archive-image img.is-portrait {
object-fit: cover;
} .p-media-archive-image img.is-landscape {
object-fit: contain;
}
.p-media-archive-body {
padding-top: 14px;
}
.p-media-archive-date {
display: block;
margin-bottom: 8px;
color: #999;
font-size: 1.4rem;
line-height: 1.5;
}
.p-media-archive-title {
display: -webkit-box;
overflow: hidden;
margin: 0;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
} .p-media-archive-more {
display: flex;
justify-content: center;
margin-top: 54px;
}
.p-media-archive-more-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 174px;
min-height: 46px;
padding: 8px 24px;
border: 1px solid #111;
border-radius: 999px;
background: #fff;
color: #111;
font: inherit;
font-size: 1.2rem;
cursor: pointer;
box-sizing: border-box;
}
.p-media-archive-more-button:disabled {
opacity: .5;
cursor: default;
}
.p-media-archive-more-icon {
font-size: 2rem;
font-weight: 300;
line-height: 1;
}
.p-media-archive-empty {
margin: 0;
text-align: center;
font-size: 1.4rem;
}  @media screen and (max-width: 768px) {
.p-media-archive .m-breadcrumb {
padding: 20px 20px 0;
}
.p-media-archive .p-event-archive-head {
padding: 30px 20px 35px;
}
.p-media-archive .p-event-archive-head-ja {
margin-bottom: 6px;
font-size: 1.2rem;
}
.p-media-archive .p-event-archive-head-en {
gap: 20px;
font-size: 2.8rem;
}
.p-media-archive-main {
padding: 10px 20px 80px;
}
.p-media-archive-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 16px;
}
.p-media-archive-body {
padding-top: 10px;
}
.p-media-archive-date {
margin-bottom: 6px;
font-size: 1.2rem;
}
.p-media-archive-title {
font-size: 1.4rem;
line-height: 1.5;
}
.p-media-archive-more {
margin-top: 40px;
}
}