@charset "UTF-8";
/* ==========================================================================
   株式会社FEA ホームページ
   body ほかの指定
   --------------------------------------------------------------------------
   もとは news.html の <head> に直接書かれていたスタイルです。
   CSP から style-src 'unsafe-inline' を外すため、2026-09 に外部ファイル化しました。
   修正するときは、HTML ではなくこのファイルを編集してください。
   ========================================================================== */
body {
      font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
      background: #ffffff;
      color: #1a1a1a;
      overflow-x: hidden;
    }
/* ===== ヒーロー〜記事一覧：固定背景画像（フッターの不透明背景で自然に隠れる） ===== */
.news-bg-img {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 0;
    }
.news-bg-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(255,255,255,0.35);
      z-index: 0;
    }
.page-hero {
      margin-top: 0;
      padding: 160px 8vw 48px;
      background: transparent;
      position: relative;
      z-index: 1;
    }
.hero-label {
      font-size: 0.72rem; letter-spacing: 0.36em; color: #b8860a;
      text-transform: uppercase; margin-top: 12px; display: block;
    }
.page-hero h1 {
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 300; letter-spacing: 0.16em; color: #1a1a1a;
      line-height: 1.2;
    }
.hero-filters {
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
.hero-filters.is-fixed {
      position: fixed;
      left: 0; right: 0;
      z-index: 1100;
    }
/* ヘッダーの下に固定していないときは、位置をずらさない。
   （固定をやめた後に top の指定が残ってしまっても、下の見出しと重ならないようにするため） */
.hero-filters:not(.is-fixed) { top: auto; }
.hero-filters.nav-menu-open { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.hero-filters-spacer { display: none; }
.hero-filters-spacer.active { display: block; }

.filter-btn {
      padding: 14px 22px;
      border: none; border-bottom: 3px solid transparent;
      background: transparent; color: #666666;
      font-family: inherit; font-size: 0.82rem; letter-spacing: 0.10em;
      cursor: pointer; transition: all 0.20s; font-weight: 500; white-space: nowrap;
      margin-bottom: -2px;
    }
.filter-btn:hover { color: #111; }
.filter-btn.active { color: #111; border-bottom-color: #c8960a; font-weight: 700; }
@media (max-width: 640px) {

  .filter-btn { padding: 12px 16px; font-size: 0.78rem; flex-shrink: 0; }
}
.news-item.hidden { display: none; }
.news-year-block.hidden { display: none; }
.page-content {
      position: relative;
      z-index: 1;
      max-width: 1000px; margin: 0 auto;
      padding: 56px 5vw 120px;
      background: transparent;
    }
.news-year-block { margin-bottom: 64px; }
.news-year-title {
      font-size: 1.8rem; font-weight: 700;
      color: #1a3a6e; letter-spacing: 0.04em;
      margin-bottom: 24px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(0,0,0,0.12);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
.news-year-title.visible { opacity: 1; transform: translateY(0); }
.news-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
.news-item {
      display: flex; flex-direction: column;
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow:
        0 1px 3px rgba(0,0,0,0.06),
        0 4px 16px rgba(0,0,0,0.08);
      overflow: hidden;
      cursor: default;
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    }
.news-item.visible {
      opacity: 1;
      transform: translateY(0);
    }
.news-item:hover {
      box-shadow:
        0 2px 8px rgba(0,0,0,0.08),
        0 14px 34px rgba(0,0,0,0.14);
      border-color: rgba(200,150,10,0.4);
      transform: translateY(-5px);
    }
.news-item::before {
      content: "";
      display: block;
      height: 4px;
      width: 100%;
      flex-shrink: 0;
    }
.news-item[data-tag="重要"]::before { background: #e05252; }
.news-item[data-tag="プレスリリース"]::before { background: #e8c96a; }
.news-item[data-tag="拠点情報"]::before { background: #3aac9a; }
.news-item[data-tag="お知らせ"]::before { background: #8fb0d8; }
.news-card-inner {
      display: flex; flex-direction: column;
      gap: 12px;
      padding: 20px 20px 22px;
      flex: 1;
    }
.news-meta {
      display: flex; flex-direction: row;
      align-items: center; gap: 10px;
    }
.news-date {
      font-size: 0.74rem; color: #888;
      letter-spacing: 0.06em;
      font-variant-numeric: tabular-nums;
      font-weight: 500;
      white-space: nowrap;
    }
.news-tag {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 3px 9px; border-radius: 4px;
      font-size: 0.62rem; letter-spacing: 0.07em; font-weight: 700;
      white-space: nowrap;
    }
.news-tag.tag-重要 { background: rgba(224,82,82,0.14); color: #d13c3c; }
.news-tag.tag-プレスリリース { background: rgba(200,150,10,0.16); color: #a67c0a; }
.news-tag.tag-拠点情報 { background: rgba(58,172,154,0.16); color: #2a8f7e; }
.news-tag.tag-お知らせ { background: rgba(74,110,168,0.14); color: #4a6ea8; }
.news-divider { display: none; }
.news-title {
      font-size: 0.92rem; color: #1a1a1a;
      line-height: 1.75; font-weight: 500;
      flex: 1;
    }
.news-title a {
      color: #1a1a1a; text-decoration: none;
      transition: color 0.2s;
    }
.news-title a:hover { color: #a67c0a; }

.news-arrow {
      font-size: 0.75rem; color: rgba(0,0,0,0.4);
      text-align: right;
      transition: color 0.2s, transform 0.2s;
      display: block;
      margin-top: auto;
      padding-top: 10px;
    }
.news-arrow::before { content: "詳しく見る ›"; }
.news-item.has-link:hover .news-arrow { color: #a67c0a; }
.news-item:not(.has-link) .news-arrow { display: none; }
@media (max-width: 860px) {
  .news-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 861px) {
  .page-content { max-width: 1280px; }
  .news-year-title { font-size: 2.3rem; margin-bottom: 32px; padding-bottom: 18px; }
  .news-list { gap: 32px; }
  .news-item { border-radius: 16px; }
  .news-card-inner { gap: 16px; padding: 30px 30px 32px; }
  .news-date { font-size: 0.92rem; }
  .news-tag { font-size: 0.76rem; padding: 5px 14px; border-radius: 6px; }
  .news-title { font-size: 1.18rem; line-height: 1.8; }
  .news-arrow { font-size: 0.92rem; padding-top: 16px; }
}
@media (max-width: 560px) {
  .news-list { grid-template-columns: 1fr; }
}
/* ※ 以前ここに「@media (max-width: 768px) { .hero-filters { top: 103px } }」が
      ありましたが、削除しました。
      当時のタブは位置指定なし（static）だったため top は効きませんでしたが、
      現在は共通ファイル（css/section-nav.css）で位置指定あり（relative）に
      なったため、スマートフォンでタブだけが103px下にずれて表示され、
      年の見出し（2026 など）と重なっていました。 */
@media (max-width: 480px) {
  body { overflow-x: hidden; }
}
  
footer { position: relative; z-index: 1; }