.list-news {margin-top: 2em;border-bottom: 1px solid var(--bdc-gray);}
.list-news-item {border-top: 1px solid var(--bdc-gray);display: block;}
.list-news-item-link {padding-block:1em ;display: grid;grid-template-columns: 33% auto;grid-template-rows: auto auto auto;gap:0 1em;align-items: start;}
.list-news-item-image {aspect-ratio: 1 / 1;grid-area: 1 / 1 / 4 / 2;width: 100%;max-width: unset;}
.list-news-item-category {grid-area: 1 / 2 / 2 / 3;color:var(--c-primary);background-color: var(--c-accent);line-height: 1;display: block;width: fit-content;font-size: 0.8em;padding: 0.1em 0.5em;}
.list-news-item-title {grid-area: 2 / 2 / 3 / 3;font-weight: bold;font-size: 0.9em;margin-top: 0.5em;color: var(--c-text);font-family: var(--ff-ja);}
.list-news-item-date {grid-area: 3 / 2 / 4 / 3;font-size: 0.8em;color: var(--c-text);margin-top: 0.5em;font-family: var(--ff-en);}

.list-news-item-link .list-news-item-title {transition: color .5s ease-out;}
.list-news-item-link:hover .list-news-item-title {color: var(--c-primary);}

/* .list-news .list-news-item:nth-of-type(1) .list-news-item-link{grid-template-columns: auto;grid-template-rows: auto auto auto auto;}
.list-news .list-news-item:nth-of-type(1) .list-news-item-image {aspect-ratio: 16 / 9;grid-area: 1 / 1 / 2 / 2}
.list-news .list-news-item:nth-of-type(1) .list-news-item-category {grid-area: 2 / 1 / 3 / 2;margin-top: 1em;}
.list-news .list-news-item:nth-of-type(1) .list-news-item-title {grid-area: 3 / 1 / 4 / 2;font-size: 1.2em;}
.list-news .list-news-item:nth-of-type(1) .list-news-item-date {grid-area: 4 / 1 / 5 / 2;margin-top: 0.5em;} */

/*詳細の最近お知らせ*/
.list-news-recent{}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-link {padding-block: 1em;display: grid;grid-template-columns: 33% auto;grid-template-rows: auto auto auto;gap: 0 1em;align-items: start;}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-image {aspect-ratio: 1 / 1;grid-area: 1 / 1 / 4 / 2;}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-category {grid-area: 1 / 2 / 2 / 3;color:var(--c-primary);background-color: var(--c-accent);line-height: 1;display: block;width: fit-content;font-size: 0.8em;padding: 0.1em 0.5em;}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-title {grid-area: 2 / 2 / 3 / 3;font-weight: bold;font-size: 0.9em;margin-top: 0.5em;color: var(--c-text);font-family: var(--ff-ja);}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-date {grid-area: 3 / 2 / 4 / 3;font-size: 0.8em;color: var(--c-text);margin-top: 0.5em;font-family: var(--ff-en);}

/*リスト間のナビ*/
.nav-news-list {display: flex;margin-top:4em;gap:1em;justify-content: center;flex-direction: row-reverse;font-family: var(--ff-en);}
.nav-news-list-item {}
.nav-news-list-item-link {min-width:9rem;font-size: 0.8em;letter-spacing: 0.1em;font-family: var(--ff-ja);}

/*詳細ページ*/
.article-news {margin-top: 2em;}
.article-news-category {background-color: var(--c-accent);line-height: 1;display: block;width: fit-content;font-size: 0.8em;padding: 0.1em 0.5em; margin-inline: auto;}
.article-news-headline {font-size: 1.2em;text-align: center;margin-top: 1em;text-wrap: pretty;}
.article-news-date {font-size: 0.8em;color: var(--c-text);margin-top: 1.4rem;font-family: var(--ff-en);text-align: center;}
.article-news-body {margin-top:2rem;}
.article-news-body hr{margin-block: 2em;}
.article-news-body img{margin-block: 1rem;shape-margin:1em; margin-inline: auto;}
.article-news-body p{margin-block: 1rem}
.article-news-body a{color: var(--c-primary);}
.article-news-body h1{font-size: 1.2em;}
.article-news-body h2{font-size: 1.16em;}
.article-news-body h3{font-size: 1.12em}
.article-news-body h4{font-size: 1.08em}
.article-news-body h5{font-size: 1.04em}
.article-news-body h6{font-size: 1.0em}
.article-news-body h1,
.article-news-body h2,
.article-news-body h3,
.article-news-body h4,
.article-news-body h5,
.article-news-body h6{margin-block: 2rem 1rem;}

@media (min-width: 500px) {

.list-news {display: grid; grid-template-columns: repeat(6, 1fr);grid-template-rows:auto;gap:3rem 2rem;padding-bottom: 3rem;}

.list-news-item {grid-column: span 2;border-top:none;}
.list-news-item-link {grid-template-columns: auto;grid-template-rows: auto auto auto auto;padding-block: 0;}
.list-news-item-image {aspect-ratio: 16 / 9;grid-area: 1 / 1 / 2 / 2}
.list-news-item-category {grid-area: 2 / 1 / 3 / 2;margin-top: 1em;}
.list-news-item-title {grid-area: 3 / 1 / 4 / 2}
.list-news-item-date {grid-area: 4 / 1 / 5 / 2;margin-top: 0.5em;}
/**/
/* .list-news .list-news-item:nth-of-type(1),
.list-news .list-news-item:nth-of-type(2){ grid-column: span 3;}

.list-news .list-news-item:nth-of-type(1) .list-news-item-link{margin-left: calc(50% - 27vw);}
.list-news .list-news-item:nth-of-type(2) .list-news-item-link{margin-right: calc(50% - 27vw);} */

.list-news .list-news-item:nth-of-type(1) .list-news-item-image {}
.list-news .list-news-item:nth-of-type(1) .list-news-item-category {}
.list-news .list-news-item:nth-of-type(1) .list-news-item-title {}
.list-news .list-news-item:nth-of-type(1) .list-news-item-date {}

.list-news .list-news-item:nth-of-type(1) .list-news-item-title,
.list-news .list-news-item:nth-of-type(2) .list-news-item-title {}


/*詳細の最近お知らせ*/
.list-news-recent{grid-template-columns: repeat(8, 1fr);}
.list-news-recent .list-news-item:nth-of-type(1),
.list-news-recent .list-news-item:nth-of-type(2) {grid-column: span 2}

.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-link {grid-template-columns: auto;grid-template-rows: auto auto auto auto;padding-block: 0;}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-image {aspect-ratio: 16 / 9;grid-area: 1 / 1 / 2 / 2}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-category {grid-area: 2 / 1 / 3 / 2;margin-top: 1em;}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-title {grid-area: 3 / 1 / 4 / 2}
.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-date {grid-area: 4 / 1 / 5 / 2;margin-top: 0.5em;}

.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-link{margin-left: 0;}
.list-news-recent .list-news-item:nth-of-type(2) .list-news-item-link{margin-right: 0;}

.list-news-recent .list-news-item:nth-of-type(1) .list-news-item-title,
.list-news-recent .list-news-item:nth-of-type(2) .list-news-item-title {font-size:0.9em;}


/*詳細ページ*/
.article-news-headline {font-size: 1.8em;}
.article-news-category {font-size: 0.9em;}
.article-news-date {font-size: 0.9em;}
.article-news-body {max-width: 40rem;margin-inline: auto;}


}