.news-list {
width: min(100% - 40px, 1200px);
margin: 40px auto;
padding: 0;
list-style: none;
}

.news-item {
border-bottom: 1px dotted #777;
}

.news-item:first-child {
border-top: 1px dotted #777;
}

.news-link {
display: flex;
align-items: center;
gap: 28px;
min-height: 210px;
padding: 22px 14px;
color: inherit;
text-decoration: none;
}

/*
サムネイルの外枠を正方形に固定します。
縦横比の異なる画像も、object-fit: coverで同じ大きさに揃います。
*/
.news-thumbnail {
flex: 0 0 150px;
width: 150px;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #eee;
}

.news-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.news-content {
min-width: 0;
flex: 1;
}

.news-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 28px;
margin-bottom: 10px;
}

.news-list h2.news-title {
color: #333;
font-weight: bold;
font-size: unset;
border: none;
padding: 0;
margin: 0;
}

.news-link:hover .news-title,
.news-link:focus-visible .news-title {
color: #0062a5;
text-decoration: underline;
text-underline-offset: 5px;
}

.news-content p {
font-size: 90%;
}

.news-link:focus-visible {
outline: 3px solid #0062a5;
outline-offset: -3px;
}

@media (max-width: 768px) {
.news-list {
width: 100%;
margin: 20px auto;
padding-inline: 12px;
}

/* スマホでも画像左・文章右の並びを維持 */
.news-link {
align-items: flex-start;
gap: 14px;
min-height: auto;
padding: 18px 4px;
}

.news-thumbnail {
flex-basis: clamp(88px, 27vw, 120px);
width: clamp(88px, 27vw, 120px);
}

.news-meta {
display: flex;
gap: 6px 10px;
margin-bottom: 8px;
}

.news-date {
font-size: 13px;
}

.news-title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
}

.video-play {
display: block;
margin: 2em auto;
text-align: center;
}

@media (max-width: 768px) {

.video-play iframe{
max-width: 500px;
width: auto;
}

}