@charset "utf-8";
/* =============================================================
   南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
   pages/news.css ─ お知らせ一覧ページ固有

   1. ページヒーロー（左＝テキスト／右＝イラスト）
   2. Latest News（最新1件を大きく）
   3. Archive List（一覧＋補助イラスト）
   4. レスポンシブ

   1件の見た目（.news-list / .news-item）と0件状態（.news-empty）は
   TOPの最新分と共用のため components.css 8章にある。
   海の写真・人物写真は使わない。イラストは「格を上げる補助」にとどめ、主役にしない。
   個別記事ページは pages/news-single.css。
   ============================================================= */

/* -------------------------------------------------------------
   1. ページヒーロー（お知らせの変形）
   共通の .page-hero（components.css）を、このページだけ上書きする。
   PC ：左＝ラベル・ページ名・リード、右＝イラストを細い枠に収めて置く。
   SP ：768px以下はテキスト → イラスト の縦積み。
   ------------------------------------------------------------- */
.page-hero-news{
  padding:calc(var(--header-h) + clamp(36px,4.6vw,64px)) 0 clamp(40px,4.8vw,68px);
}
.page-hero-news .page-hero-flow{bottom:-16%;height:88%}
.page-hero-news .page-hero-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
  gap:clamp(32px,5vw,96px);align-items:center;
}
.page-hero-news .page-hero-lead{max-width:30em}
/* イラストの枠。比率は16:10に固定し、画像の比率が違っても中央で切り抜く */
.page-hero-visual{
  position:relative;overflow:hidden;margin:0;aspect-ratio:16 / 10;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
}
.page-hero-visual img{width:100%;height:100%;object-fit:cover}
/* 読み込み後、イラストがわずかに寄りを戻しながら現れる（JSが動く環境のみ） */
.js-motion .page-hero-visual img{
  opacity:0;transform:scale(1.03);
  transition:opacity 1.2s var(--ease) .15s,transform 1.8s var(--ease) .15s;
}
.js-motion.is-ready .page-hero-visual img{opacity:1;transform:none}

/* -------------------------------------------------------------
   2. Latest News
   最新1件だけを、画像と本文の横組みで少し格上に見せる。
   カードにせず、上下の細い罫線と余白で区切る。
   ------------------------------------------------------------- */
.news-latest{
  background:var(--paper);
  padding-block:clamp(48px,6vw,88px) clamp(60px,7.4vw,112px);
}
.news-latest-head{margin-bottom:clamp(20px,2.4vw,30px)}
.news-latest-head .eyebrow{margin-bottom:0}
.latest-post{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(26px,4.4vw,68px);align-items:center;
  padding-block:clamp(30px,3.6vw,48px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* アイキャッチ。16:9に固定し、未設定の投稿では news-placeholder.svg を同じ枠に出す */
.latest-media{
  display:block;overflow:hidden;aspect-ratio:16 / 9;
  border:1px solid var(--line);background:var(--tint);
}
.latest-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.latest-post:hover .latest-media img{transform:scale(1.03)}
.latest-meta{display:flex;align-items:center;gap:14px}
.latest-title{
  margin-top:clamp(14px,1.8vw,22px);
  font-size:clamp(21px,2.5vw,31px);line-height:1.7;letter-spacing:.07em;
}
/* タイトルのリンク。触れると細い金の下線が現れる */
.latest-title a{
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:7px;text-decoration-thickness:1px;
  transition:text-decoration-color .45s var(--ease),color .45s var(--ease);
}
.latest-title a:is(:hover,:focus-visible){text-decoration-color:var(--gold);color:var(--blue)}
.latest-excerpt{
  margin-top:clamp(14px,1.8vw,22px);max-width:34em;
  font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft);
  text-wrap:pretty; /* 最終行に1〜2文字だけ残る折り返しを避ける（対応ブラウザのみ） */
}
.latest-post .text-link{margin-top:clamp(16px,2vw,26px)}

/* -------------------------------------------------------------
   3. Archive List
   PC ：左＝ラベルと小さな補助イラスト（スクロールに追従）、右＝一覧。
   SP ：ラベルとイラストを横に並べ、その下に一覧（1024px以下）。
   ------------------------------------------------------------- */
.news-archive{
  background:var(--white);
  padding-block:clamp(56px,6.6vw,96px) var(--section-pad);
}
.news-archive-grid{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(28px,4.6vw,72px);align-items:start;
}
.news-archive-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.news-archive-aside .eyebrow{margin-bottom:0}
/* 補助イラスト。小さく、細い枠に収める（主役にしない） */
.archive-illustration{
  max-width:260px;margin:clamp(24px,3vw,36px) 0 0;overflow:hidden;aspect-ratio:4 / 3;
  border:1px solid var(--line);background:var(--tint);
}
.archive-illustration img{width:100%;height:100%;object-fit:cover}
/* 一覧ページでは、0件の文の上下に少し広めの余白を取る（将来0件になった場合） */
.news-archive .news-empty{padding-block:clamp(44px,5.6vw,80px)}

/* -------------------------------------------------------------
   4. レスポンシブ
   ------------------------------------------------------------- */
@media (max-width:1180px){
  .page-hero-news .page-hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)}
}
@media (max-width:1024px){
  .latest-post{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.4vw,40px)}
  /* 一覧は1カラムへ。ラベルとイラストを横に並べ、その下に一覧 */
  .news-archive-grid{grid-template-columns:1fr;gap:clamp(24px,3.4vw,36px)}
  .news-archive-aside{
    position:static;
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  }
  .archive-illustration{width:200px;margin:0}
}
@media (max-width:768px){
  /* SP：テキスト → イラスト の縦積み */
  .page-hero-news{padding:calc(var(--header-h) + clamp(44px,7vw,72px)) 0 clamp(40px,6vw,56px)}
  .page-hero-news .page-hero-flow{bottom:-10%;height:78%}
  .page-hero-news .page-hero-inner{display:block}
  .page-hero-visual{max-width:600px;margin-top:clamp(28px,5vw,40px)}
  .latest-post{grid-template-columns:1fr;gap:22px;padding-block:clamp(24px,4vw,34px)}
}
@media (max-width:600px){
  .news-latest{padding-block:clamp(40px,6vw,56px) clamp(48px,8vw,64px)}
  .latest-title{font-size:clamp(19px,5.4vw,23px)}
  .latest-excerpt{font-size:14px}
  .news-archive{padding-block:clamp(44px,6vw,64px) var(--section-pad-sm)}
  .archive-illustration{width:140px}
  .news-archive .news-empty{padding-block:clamp(36px,9vw,48px)}
}