/* =========================================================
   top_news.css（レスポンシブ：5列→4列、スマホは2列固定）
   要点：
     - PC広幅：5列
     - 中幅（<=1400px）：4列
     - タブレット（<=1200px）：3列、スマホ（<=768px）：2列固定
     - スマホではJS側で「最新4件のみカード」、5件目以降は下の行リストへ
     - NEW：下段リスト(.news-list)に「区分チップ」を挿入＆カードと同デザイン
            （行内では小ぶり＆横並び向けにサイズ/余白を最適化）
     - NEW（本修正）：NEWSの「VIEW ALL」を BLOG と同等の
       “塗りスライド＋矢印スワップ”アニメへ統一（A11y/低モーション対応）
     - NEW（今回追加）：SP時、下段リストの並びを
       「1行目：日付＋区分」「2行目：区分の下にタイトル」に変更（PCは現状維持）
   ========================================================= */

#top_news{
  position: relative;
  width: 100%;
  background: #fdfdfd;
  overflow: hidden;
  z-index: 10;
  min-height: 100svh;

  /* テーマ変数（NEWSセクション内で使用） */
  --news-accent: #333;          /* アクセント色（塗り・文字・枠に使用） */
  --news-cta-bg: #333;          /* カード下部CTAの平常色 */
  --news-cta-bg-hover: #333;    /* カード下部CTAのホバー色（濃度同一でも可） */
  --news-cta-height: 56px;      /* カード下部CTAの高さ */
  --news-card-radius: 16px;     /* カード角丸 */

  /* 下段リストの最大幅（PC時はカードより少し細めに） */
  --news-list-max: 960px;
}
@supports (height: 100svh){ #top_news{ min-height: 100svh; } }

.top_news-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 50px 40px 50px;
  box-sizing: border-box;
  text-align: left;
}

/* 見出し */
.top_news-title{
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: -10px;
  margin-bottom: 5px;
  color: #333;
  line-height: 1.2;
  width: 100%;
}
.top_news-sub{
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  margin-top: 5px;
  letter-spacing: .03em;
}

/* 互換用変数（他所と統一するためのフォールバック） */
:root{ --card-radius: 16px; --card-border: #ddd; }

/* =============================
   上段：カードグリッド
   ============================= */
.news-cards{
  width: 100%;
  max-width: 1200px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr)); /* PC広幅：5列 */
  gap: 24px;
}

/* カード（絶対配置の基準） */
.news-card{
  position: relative;
  isolation: isolate; /* 擬似要素やオーバーレイの積層事故を防止 */
  border: 1px solid var(--card-border);
  border-radius: var(--news-card-radius, var(--card-radius));
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(12px); /* 初期フェードインのための軽いYオフセット */
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.news-card.news-animate{ opacity: 1; transform: translateY(0); }

/* 全体リンク（カード全体を3行グリッド：chip / thumb / meta[可変]）
   ★修正A：1fr を「メタ」に割当てるため、行配列を auto auto 1fr に変更。
            これによりサムネ行が“残り高さ分”で不自然に伸びることを防ぐ。 */
.news-card__link{
  position: static !important; z-index: auto !important;
  display: grid;
  grid-template-rows: auto auto 1fr; /* ★修正A：auto 1fr auto → auto auto 1fr */
  gap: 10px; height: 100%;
  color: inherit; text-decoration: none; box-sizing: border-box;
  padding-bottom: var(--news-cta-height) !important; /* 下部CTAぶんの余白 */
}

/* 区分チップ（カード内・前面） */
.news-chip{
  justify-self: center;                 /* カード内では中央寄せ */
  margin-top: 12px; padding: 6px 12px;
  font-size: clamp(.70rem, 1.8vw, .85rem);
  color: #fff; background: var(--news-accent);
  border-radius: 999px; letter-spacing: .03em;
  position: relative; z-index: 1;
  white-space: nowrap;                  /* ラベルの折返し防止 */
}

/* サムネイル（枠固定・中だけ拡大）
   ★修正B：枠そのものに aspect-ratio を“常時”付与し、align-self で
            グリッドの縦伸張を拒否。これでブラウザ差異でも安定。 */
.news-card__thumb{
  margin: 0 16px; border-radius: 10px; overflow: hidden;
  background: #eee; position: relative; z-index: 1;
  aspect-ratio: 16 / 9;           /* ★修正B：比率は枠側で常時保持 */
  align-self: start;              /* ★修正B：1fr による縦伸びを拒否 */
}
.news-card__thumb img{
  width:100%; height:100%; display:block; /* ★修正C：高さは枠いっぱいに */
  /* aspect-ratio は“枠”で担保するため img 側では付与しない */
  object-fit:cover;
  transform: scale(1); transform-origin: center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1); will-change: transform;
}
.news-card:hover .news-card__thumb img{ transform: scale(1.08); }

/* NO IMAGE（中央＆淡色） */
.news-card__thumb--noimg{
  width:100%; aspect-ratio:16/9; display:grid; place-items:center;
  color: rgba(0,0,0,.35); font-size:.95rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; user-select:none;
}
.news-card__thumb:not(:has(img)){
  display:grid; place-items:center; aspect-ratio:16/9;
  color: rgba(0,0,0,.35); font-size:.95rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; user-select:none;
}

/* メタ情報（前面） */
.news-card__meta{ padding:0 16px; display:grid; gap:6px; position:relative; z-index:1; }
.news-card__date{ font-size:clamp(.80rem,1.6vw,.90rem); color:#666; transition:color .25s ease; }
.news-card__title{ font-size:clamp(.95rem,2.3vw,1.10rem); font-weight:600; color:#111; line-height:1.5; transition:color .25s ease; }

/* CTA（黒の塗りつぶし） */
.news-card__cta{
  position:absolute; left:0; right:0; bottom:0;
  height:var(--news-cta-height); display:grid; place-items:center;
  background:var(--news-cta-bg); color:#fff; font-size:clamp(.85rem,2vw,.95rem);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:0 0 var(--news-card-radius, var(--card-radius)) var(--news-card-radius, var(--card-radius));
  border:none; z-index:2; margin:0 !important; pointer-events:auto;
}
.news-card:hover .news-card__cta{ background:var(--news-cta-bg-hover); }

/* ホバー用オーバーレイ（背面：メタやチップの下に敷く） */
.news-card__hoverbg{
  position:absolute; inset:0; background:var(--news-accent);
  transform:translateY(100%); transition:transform .45s cubic-bezier(.22,.61,.36,1);
  z-index:0; pointer-events:none;
}

/* ホバー効果（カード） */
.news-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.10); }
.news-card:hover .news-card__hoverbg{ transform:translateY(0); }
.news-card:hover .news-card__date,
.news-card:hover .news-card__title{ color:#fff; }
.news-card:hover .news-chip{ background:#fff; color:var(--news-accent); }

/* フォーカス（キーボード操作の視認性） */
.news-card__link:focus-visible{
  outline:2px solid var(--news-accent); outline-offset:-2px;
  border-radius:var(--news-card-radius, var(--card-radius));
}

/* =============================
   下段：6件目以降の行リスト
   ============================= */
.news-list{
  width:100%;
  max-width: var(--news-list-max);
  margin:26px auto 0;
  list-style:none;
  padding:0;
}
.news-row{
  border-bottom:1px solid #ccc; padding:16px 0;
  opacity:0; transform:translateY(12px);
  transition:transform .25s ease, opacity .25s ease;
}
.news-row.news-animate{ opacity:1; transform:translateY(0); }

/* 行リンク：日付 → 区分 → タイトル */
.news-row__link{
  display:flex; align-items:center; gap:18px;
  text-decoration:none; color:inherit;
}

/* 日付ブロック */
.news-date{
  width:80px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.news-year-month{ font-size:1rem; font-weight:300; color:#888; }
.news-day{ font-size:2.5rem; font-weight:400; color:#333; line-height:1; }

/* NEW：行リスト内の区分チップ（カードと同デザイン + 行向け調整）
   - index.php は行でも .news-chip を使うため、ここでサイズ/余白を上書き
   - 互換：.news-row__chip という別名クラスでも同じ見た目にしておく */
.news-row .news-chip,
.news-row__chip{
  align-self: center;              /* 行の高さ中央に */
  display: inline-block;
  padding: 4px 10px;               /* カードより少し小さめ */
  font-size: .80rem;
  line-height: 1;
  background: var(--news-accent);
  color: #fff;
  border-radius: 999px;
  letter-spacing: .03em;
  white-space: nowrap;             /* 折返し防止 */
  margin-right: 2px;               /* タイトルとの詰め感を微調整（gapと相乗） */
}

/* タイトル側（可変領域／長文はみ出し防止） */
.news-content{
  display:flex; flex-direction:column;
  min-width: 0;
}

/* ----------------------------------------------------------
   ★今回の本命修正（原因対処）
   - .news-content が flex だと、その直下の .news-title は flex item になり
     レイアウト上 “ブロック化（blockified）” される。
   - ブロック化された要素は、自動改行しても「行断片（line fragment）」として
     分割されないため、背景下線方式でも “最下段だけ” になりやすい。
   - そこで、下段リスト（.news-list）に限って .news-content を通常フローへ戻し、
     .news-title を「インライン断片に追従できる状態」にする。
   ※ 上段カード等への影響を避けるため、スコープは .news-list に限定する。
   ---------------------------------------------------------- */
.news-list .news-content{
  display: block; /* ★修正：flex解除（下線を複数行へ追従させるための前提づくり） */
}

/* ----------------------------------------------------------
   追加：下段リストのタイトル下線アニメーション（行ホバーで発火）

   ★今回の改修（タイトル下線表示方法変更）
   - 旧方式：.news-title::after で「要素の最下端」に1本だけ線を固定
     → 自動改行で2行になると「最下段（2行目）だけ」に下線が出てしまう。
   - 新方式：指定サイトと同系統の「背景（linear-gradient）を下線として伸ばす」方式へ置換
     → DOMは1要素のままでも、表示上の複数行（自動改行）に対して
        “タイトルの先頭→末尾まで”下線が伸びる見え方になる。

   設計上の要点：
   - display:inline-block をやめ、inline として line-fragment への追従性を確保
   - ★重要：box-decoration-break: clone は「行ごとに同時に下線が伸びる」原因となるため使わない
   - :hover / :focus-visible で background-size を 0 → 100% に遷移
   ---------------------------------------------------------- */
.news-list .news-title{
  /* 自動改行でもインライン断片として扱わせる（= 1要素のまま折返し） */
  display: inline;
  position: relative;

  /* 下線を“背景”として用意（指定サイト方式） */
  background-image: linear-gradient(var(--news-accent), var(--news-accent));
  background-repeat: no-repeat;
  background-position: left bottom; /* 線の起点を左・下に設定 */
  background-size: 0 1px;           /* 初期：線の横幅0、縦幅1px */

  /* 下線と文字の干渉を避けるための最低限の余白（旧 bottom:-2px 相当） */
  padding-bottom: 2px;

  /* ★重要：複数行で「同時に2本伸びる」原因になるため clone は採用しない */
  /* -webkit-box-decoration-break: clone; */
  /* box-decoration-break: clone; */

  /* アニメ時間は既存体感（.28s）を維持 */
  transition: background-size .28s ease;
}

/* 行ホバー／キーボードフォーカスで下線を伸ばす */
.news-row__link:hover .news-title,
.news-row__link:focus-visible .news-title{
  background-size: 100% 1px;
}

/* 0件時（見た目を下段幅に合わせる） */
.news-empty{
  width:100%;
  max-width: var(--news-list-max);
  margin:28px auto 0;
  padding:24px 16px; border:1px dashed #ccc; border-radius:12px;
  color:#666; background:#fff;
}

/* =============================
   もっと見る（VIEW ALL）— BLOGと同等の演出に統一
   - ポイント：
     1) 背景は linear-gradient を高さ0%→100%で“下からスライド塗り”
     2) 矢印は ::after（右へ抜ける）と ::before（左から入る）の2枚で入替
     3) A11y：:focus-visible の視認と、低モーション設定でアニメ停止
   ============================= */
.news-more{
  margin-top:22px;
  display:flex;
  justify-content:center;
}

/* ボタン本体 */
.news-more a{
  /* -------- 見た目の基本 -------- */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 56px 14px 42px;     /* 右は矢印ぶん少し広め */
  border:1px solid var(--news-accent);
  border-radius:30px;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  color:#333;
  text-decoration:none;
  cursor:pointer;

  /* -------- アニメのための下地 -------- */
  position:relative;
  overflow:hidden;
  isolation:isolate;               /* 擬似要素の積層をローカルに閉じる */

  /* カスタムプロパティ（BLOG相当） */
  --newsViewFill: var(--news-accent); /* 塗り色 */
  --newsViewText: #333;               /* 通常文字色 */
  --newsViewTextHover: #fff;          /* 塗り時の文字色 */
  --newsViewArrowDist: .7em;          /* 矢印の入/抜け距離 */
  --newsViewMs: 320ms;                /* アニメ時間 */

  /* 背景塗り：高さ0%から100%へ伸ばす（下から上へ“せり上がり”） */
  background-image: linear-gradient(var(--newsViewFill), var(--newsViewFill));
  background-repeat: no-repeat;
  background-position: left bottom;   /* 下辺から */
  background-size: 100% 0%;           /* 初期：塗りゼロ */
  transition:
    background-size var(--newsViewMs) ease,
    color var(--newsViewMs) ease,
    border-color var(--newsViewMs) ease;
}

/* 矢印：既存（右へ抜けて消える） */
.news-more a::after{
  content: "➡";
  position:absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  color: currentColor;
  transition:
    transform var(--newsViewMs) ease,
    opacity var(--newsViewMs) ease;
}

/* 矢印：新規（左から入ってくる） */
.news-more a::before{
  content: "➡";
  position:absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(calc(-1 * var(--newsViewArrowDist)));
  opacity: 0;
  color: currentColor;
  transition:
    transform var(--newsViewMs) ease,
    opacity var(--newsViewMs) ease;
}

/* ホバー／フォーカス時のアニメ挙動（BLOG相当） */
.news-more a:hover,
.news-more a:focus-visible{
  color: var(--newsViewTextHover);
  border-color: var(--newsViewFill);
  background-size: 100% calc(100% + 5px); /* 下から全面塗りへ */
}

/* 矢印の“入れ替わり” */
.news-more a:hover::after,
.news-more a:focus-visible::after{
  transform: translateY(-50%) translateX(var(--newsViewArrowDist));
  opacity: 0; /* 右へ抜けて消える */
}
.news-more a:hover::before,
.news-more a:focus-visible::before{
  transform: translateY(-50%) translateX(0);
  opacity: 1; /* 左から入ってくる */
}

/* キーボード操作の視認性 */
.news-more a:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
  /* 背景塗りと矢印のアニメは上の :focus-visible と共通で発火 */
}

/* 低モーション環境では即時反転＆矢印固定（アニメ停止） */
@media (prefers-reduced-motion: reduce){
  .news-more a{
    transition: none;
    background-image: none;
    background-color: transparent;
  }
  .news-more a:hover,
  .news-more a:focus-visible{
    background-color: var(--newsViewFill);
    color: var(--newsViewTextHover);
  }
  .news-more a::before,
  .news-more a::after{
    transition: none;
    transform: translateY(-50%) translateX(0);
    opacity: 1; /* 2枚とも同位置・同表示（入替演出を解除） */
  }
}

/* =============================
   背景：波
   ============================= */
.wave-container{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; overflow: hidden;
}
.wave-svg{ width: 200%; height: 100%; display: block; animation: waveMove 10s linear infinite; }
.wave-fill{ fill: rgba(195,192,178,.4); }

/* ========== レスポンシブ ========== */
/* 中幅は 4 列（5→4） */
@media (max-width: 1400px){
  .news-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #top_news{ --news-list-max: 880px; }
}
/* <=1200px は 3 列 */
@media (max-width: 1200px){
  .news-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #top_news{ --news-list-max: 760px; }
}
/* スマホ：2列固定 + CTAを少し低く、リストはフル幅 */
@media (max-width: 768px){
  #top_news{ --news-cta-height: 48px; --news-list-max: 100%; }
  .news-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
  .news-card__thumb{ margin: 0 12px; border-radius: 8px; }

  /* 行のチップはさらに小ぶりに */
  .news-row .news-chip,
  .news-row__chip{
    font-size:.75rem; padding:3px 8px;
  }

  /* -----------------------------------------
     NEW（本修正）：
     NEWS の SP 見出しサイズを GALLERY と同じに統一
     - タイトル：3.6rem（GALLERY のタイトルと同寸）
     - サブタイトル：1rem（GALLERY のリードと同寸）
     ※ 「大きさ」のみ上書き。他のプロパティは既存維持
     ----------------------------------------- */
  .top_news-title{ font-size: 3.6rem; }
  .top_news-sub  { font-size: 1rem; }

  /* -----------------------------------------
     NEW（今回の修正）：
     下段リスト（.news-list）のSPレイアウトを再構成
     目的：
       - 1行目：日付（左） + 区分（右）
       - 2行目：区分の下にタイトル（右列の開始位置を揃える）
     方針：
       - PCは現状の flex（横並び）を維持
       - SPのみ .news-row__link を grid に切替えて配置制御
     備考：
       - DOMは index.php の既存構造（.news-date/.news-chip/.news-content）を前提にする
     ----------------------------------------- */

  /* 行リンクを grid 化して2段レイアウトにする */
  .news-list .news-row__link{
    display: grid;
    grid-template-columns: 80px 1fr; /* 左：日付固定（既存 .news-date width と整合） / 右：テキスト領域 */
    grid-template-rows: auto auto;   /* 1行目（chip）/ 2行目（title） */
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  /* 日付は左列（2段分の高さを使う） */
  .news-list .news-date{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto; /* grid側で列幅を支配するため（既存 width:80px 依存を緩和） */
  }

  /* 区分チップは右列1行目 */
  .news-list .news-chip,
  .news-list .news-row__chip{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: center;
  }

  /* タイトルは右列2行目（= chip の真下） */
  .news-list .news-content{
    grid-column: 2;
    grid-row: 2;
    min-width: 0; /* 既存維持：長文でもはみ出しにくい */
  }

  /* -----------------------------------------
     ★今回の改修に伴う調整（SP）
     - 旧実装は .news-title を block にしていたが、block だと
       下線背景が “行断片” に追従せず、複数行時に意図が崩れやすい。
     - そのため SP でも inline を維持し、背景下線方式の恩恵を保つ。
     - 折返しは inline でも自然に起きる（=表示上は2行以上になる）。
     ----------------------------------------- */
  .news-list .news-title{
    display: inline; /* ★修正：block → inline（下線背景の多段対応を維持） */
  }
}
/* 超小幅でも2列維持・余白調整 */
@media (max-width: 480px){
  #top_news{ --news-cta-height: 44px; }
  .news-cards{ gap:12px; }
  .news-card__thumb{ margin: 0 10px; }
}

/* 動きが苦手な環境では画像拡大アニメを抑止 */
@media (prefers-reduced-motion: reduce){
  .news-card__thumb img{ transition: none; transform: none; }
}