@charset "UTF-8";
/* =========================================================
   プライムス  お知らせ  news.css
   一覧: news-archive.html (Figma PC 293:4478 / SP 446:3483)
   詳細: news-single.html  (Figma PC 293:4669 / SP 446:3573)
   基準幅 PC=1920 / SP=375。style.css の後に読み込む。
   ========================================================= */

/* ---------- 下層共通ヒーロー (mv 1920x430) ---------- */
/* 背景=空調写真 + #333 重ね / 中央に Poppins64 英名 + Noto20 和名(白) */
.page-mv{
  position:relative;
  width:100%;
  height:430px;
  overflow:hidden;
  background:#333333;
}
.page-mv::before{
  content:"";
  position:absolute;inset:0;
  background:url(../img/news/hero.png) center/cover no-repeat;
  opacity:.55;                       /* #333 ベースに写真を乗せた見え方 */
}
.page-mv__inner{
  position:relative;z-index:1;
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;
  text-align:center;
}
.page-mv__en{
  font:500 64px/64px var(--f-en);
  color:#fff;
  /* lh64 leading-trim: cap分のみ残す */
  margin-top:-9px;margin-bottom:-10px;
}
.page-mv__jp{
  font:500 20px/24px var(--f-jp);
  color:#fff;
}

/* =========================================================
   お知らせ 本文ラッパ (bg #f0f6ff)
   ========================================================= */
.news-page{
  position:relative;
  background:var(--c-bg-blue);
  overflow:hidden;
}
/* 薄い青ぼかしブロブ (Figma 4-7-8… LAYER_BLUR r30 ≒ 装飾) */
.news-page__blob{
  position:absolute;
  right:-340px;top:120px;
  width:1200px;height:1200px;
  z-index:0;
  background:url(../img/top/business-texture.png) center/cover no-repeat;
  background-color:rgba(86,137,213,.10);
  border-radius:50%;
  filter:blur(50px);
  opacity:.5;
  pointer-events:none;
}
.news-page__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
}

/* ---- 一覧用ラッパ余白 (pad-top100 / pad-bottom150) ---- */
.news-archive__inner{
  padding:100px 0 150px;
  gap:80px;
}

/* =========================================================
   一覧: お知らせカード (1200x88 r30 / pad30-50)
   ========================================================= */
.news-arc-list{
  width:1200px;
  display:flex;flex-direction:column;
  gap:30px;
}
.na-card{
  width:1200px;
  background:#fff;
  border-radius:30px;
  transition:box-shadow var(--dur-hover) var(--ease-gentle),
             transform var(--dur-hover) var(--ease-gentle);
}
.na-card__row{
  display:flex;align-items:center;
  gap:20px;
  padding:30px 50px;
}
.na-card__meta{display:contents}   /* PC: date/pill を行内に直接並べる */
.na-card__date{
  flex-shrink:0;
  font:500 14px/28px var(--f-en);
  color:var(--c-blue-400);
  white-space:nowrap;
}
.na-card__cat{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 20px;
  border-radius:50px;
  background:var(--c-blue-400);
  color:#fff;
  font:600 12px/24px var(--f-en);   /* Figma: お知らせ=Poppins600 12 */
  white-space:nowrap;
}
.na-card__title{
  font:500 14px/28px var(--f-jp);
  color:var(--c-navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.na-card:hover{
  box-shadow:0 10px 30px rgba(28,55,90,.12);
  transform:translateY(-2px);
}

/* =========================================================
   ページネーション (32x32 r50 ×3, gap10)
   ========================================================= */
.news-pager{
  display:flex;align-items:center;
  gap:10px;
}
.news-pager__item{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:50px;
  background:#fff;
  border:1px solid var(--c-blue-400);
  color:var(--c-blue-400);
  font:600 16px/24px var(--f-en);
  transition:background var(--dur-hover) var(--ease-gentle),
             color var(--dur-hover) var(--ease-gentle);
}
.news-pager__item.is-current{
  background:var(--c-blue-400);
  border-color:var(--c-blue-400);
  color:#fff;
}
.news-pager__item:not(.is-current):hover{
  background:var(--c-blue-400);
  color:#fff;
}

/* =========================================================
   詳細: 記事カード
   外枠1200 r30 / 横pad100 → 内側1000 / 縦pad 50-100 / gap50
   ========================================================= */
.news-single__inner{
  padding:100px 0 150px;
  gap:80px;
}
.ns-article{
  width:1200px;
  background:#fff;
  border-radius:30px;
  padding:0 100px;
}
.ns-article__inner{
  display:flex;flex-direction:column;
  gap:50px;
  padding:50px 0 100px;
}
/* 記事ヘッダー(日付+カテゴリ → タイトル) / 下に薄線 */
.ns-head{
  display:flex;flex-direction:column;
  gap:20px;
  padding-bottom:30px;
  border-bottom:1px solid var(--c-bg-blue);
}
.ns-head__meta{
  display:flex;align-items:center;
  gap:20px;
}
.ns-head__date{
  font:500 14px/28px var(--f-en);
  color:var(--c-blue-400);
  white-space:nowrap;
}
.ns-head__cat{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 20px;
  border-radius:50px;
  background:var(--c-blue-400);
  color:#fff;
  font:600 12px/24px var(--f-en);
  white-space:nowrap;
}
.ns-head__title{
  font:500 24px/48px var(--f-jp);
  color:var(--c-navy);
  /* lh48/24px leading-trim */
  margin-top:-12px;margin-bottom:-12px;
}

/* 画像グリッド 2×2 (485x323 gap30) — プレースホルダ #d9d9d9 */
.ns-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}
.ns-gallery__item{
  width:100%;
  aspect-ratio:485 / 323;
  background:#d9d9d9;
  overflow:hidden;
  border-radius:0;
}
.ns-gallery__item img{width:100%;height:100%;object-fit:cover}

/* 本文 */
.ns-body{
  font:500 14px/28px var(--f-jp);
  color:var(--c-text);
}
.ns-body p+p{margin-top:28px}   /* 段落間 = 1行分 */

/* 一覧にもどるボタン (200x56 白pill / 矢印を左に・180度) */
.ns-back{
  display:inline-flex;align-items:center;
  gap:20px;
  width:200px;height:56px;
  padding:0 30px;
  border:1px solid #9795b5;border-radius:50px;
  background:#fff;
  font:500 16px/1 var(--f-jp);color:var(--c-black);
  transition:background var(--dur-hover) var(--ease-gentle),
             color var(--dur-hover) var(--ease-gentle),
             border-color var(--dur-hover) var(--ease-gentle);
}
.ns-back__arw{
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--grad-blue);
  transform:rotate(180deg);          /* ← 戻る向き */
  transition:transform var(--dur-hover) var(--ease-gentle),background var(--dur-hover) var(--ease-gentle);
}
.ns-back__arw svg{display:block}
.ns-back:hover{background:var(--grad-blue);color:#fff;border-color:transparent}
.ns-back:hover .ns-back__arw{background:#fff;transform:rotate(180deg) translateX(3px)}
.ns-back:hover .ns-back__arw svg path{stroke:#3268b8}

/* =========================================================
   @media SP (max-width:768px)  ※375専用フレーム準拠
   ========================================================= */
@media (max-width:768px){
  /* ---- 下層ヒーロー SP (375x280) ---- */
  .page-mv{height:280px}
  .page-mv__inner{gap:16px}
  .page-mv__en{font-size:36px;line-height:36px;margin-top:-5px;margin-bottom:-6px}
  .page-mv__jp{font-size:14px;line-height:20.272px}

  /* ---- 本文ラッパ SP (pad80/20) ---- */
  .news-page__blob{right:auto;left:50%;transform:translateX(-50%);top:0;width:750px;height:750px}
  .news-archive__inner,
  .news-single__inner{padding:80px 20px;gap:80px}

  /* ---- 一覧カード SP (335x110 r20 pad30) ---- */
  .news-arc-list{width:auto;max-width:335px;gap:10px}
  .na-card{width:auto}
  .na-card__row{
    flex-direction:column;align-items:flex-start;
    gap:12px;
    padding:30px;
  }
  .na-card__meta{display:flex !important;align-items:center;gap:10px}  /* SP: date+pill を1行に */
  /* SP: 縦積みで1行タイトルの上下leadingをトリム → card高=Figma110に揃える */
  .na-card__title{width:100%;margin-top:-7px;margin-bottom:-11px}

  /* ---- ページネーション SP (同寸) ---- */

  /* ---- 詳細記事 SP ---- */
  .ns-article{width:auto;max-width:335px;padding:0 20px}
  .ns-article__inner{gap:30px;padding:50px 0 80px}
  .ns-head{gap:20px;padding-bottom:20px;border-bottom-color:var(--c-blue-400)}
  /* SP は 日付 → タイトル → カテゴリ の縦並び */
  .ns-head{flex-direction:column}
  .ns-head__meta{display:contents}
  .ns-head__date{order:1}
  .ns-head__title{order:2;font-size:20px;line-height:30px;color:var(--c-text);margin-top:-9px;margin-bottom:-9px}
  .ns-head__cat{order:3;align-self:flex-start}

  /* 画像グリッド SP 1列 (295x196) */
  .ns-gallery{grid-template-columns:1fr;gap:30px}

  .ns-back{align-self:center}
}