/* ===== News（Figma 14511:47946）1440×816 / base3 / px120 py160 / gap100 ===== */
.news{display:flex;align-items:flex-start;gap:100px;width:100%;padding:var(--sp-section-gap) var(--pad-side);background:var(--c-base3);overflow:hidden}
.news__side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-btn);flex:none}
.news__list{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:1px}
.news-item{display:flex;align-items:center;gap:24px;width:885px;max-width:100%;padding:32px 16px;border-top:1px solid var(--c-border);color:inherit;text-decoration:none}
.news-item:last-child{border-bottom:1px solid var(--c-border)}
.news-item__body{display:flex;align-items:flex-start;gap:32px;flex:1 0 0;min-width:1px}
.news-item__meta{display:flex;align-items:center;gap:16px;flex:none}
.news-item__date{font-family:var(--font-en);font-weight:600;font-size:14px;line-height:1;color:var(--c-gray);white-space:nowrap;font-feature-settings:normal}
.news-item__tag{display:flex;align-items:center;justify-content:center;width:75px;padding:0 16px 1px;border:1px solid var(--c-border-sub);border-radius:var(--r-s);font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.14px;color:var(--c-text-sub);text-align:center;white-space:nowrap}
.news-item__title{flex:1 0 0;min-width:1px;font-size:var(--fs-body-m);font-weight:500;line-height:1.6;letter-spacing:.16px}
.news-item__arrow{display:flex;align-items:center;justify-content:center;flex:none;padding:10px;background:var(--c-main);border-radius:3px}
.news-item__arrow img{display:block;width:14px;height:14px}

/* ===== SP（Figma SP-TOP News 14600:69544）375×945 / px24 py80 / 見出し→記事5件→「一覧を見る」の縦積み =====
   .news__side を display:contents にして見出し・一覧・ボタンを order で並べ替える（PCの2カラム構造はそのまま） */
@media (max-width:768px){
  .news{flex-direction:column;gap:40px}
  .news__side{display:contents}
  /* display:contents はボックスを作らないので IntersectionObserver が発火せず is-inview が付かない。
     opacity/transform も効かないため見た目は問題ないが、状態を残さないよう明示的に初期値へ戻す */
  .js .news__side.js-reveal{opacity:1;transform:none;transition:none}
  .news .sec-title{order:1;gap:4px}
  .news .sec-title__label{gap:6px}
  .news .sec-title__label img{width:13px;height:9px}
  .news__list{order:2;width:100%}
  .news__side > .btn{order:3}
  /* 記事行: 上罫線 / pt14 pb16 px4 / gap16 / 本文は縦積み（日付＋タグ → タイトル） */
  .news-item{width:100%;gap:16px;padding:14px 4px 16px}
  .news-item__body{flex-direction:column;gap:8px}
  .news-item__meta{gap:8px}
  .news-item__tag{width:auto;padding:0 8px 2px;font-size:12px;letter-spacing:.12px}
  .news-item__title{flex:none;width:100%;font-size:var(--fs-body-m);letter-spacing:.15px}
  .news-item__arrow{width:28px;height:28px;padding:0}
  .news-item__arrow img{width:12px;height:12px}
}