@charset "UTF-8";
/* =========================================================
   TOP お知らせ欄 ティッカー（企業情報TOP準拠）CSSのみ版
   - HTML・JSの変更なし（既存マークアップのまま）
       .top-news-block > ul.news-items > li.news-item × n件
                       > .block-category-event--all
   - 表示は常に1件・1行（はみ出しは「…」）
   - 5秒表示 → 0.8秒で左へスライド → 次のお知らせ … をループ
   - 件数は自動判定（1〜10件対応）。1件のときは動かない
   - 「NEWS」見出しは ::before で表示
   - 「一覧へ」は既存の見た目のまま（位置だけ調整）
   - SP:max-width 768px / PC:min-width 769px（既存に合わせる）
   ========================================================= */

/* ---------- 共通 ---------- */
.top-news-block {
  display: grid;
  align-items: center;
}

/* 見出し「NEWS」 */
.top-news-block::before {
  content: "NEWS";
  grid-area: head;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
}

/* 表示窓 */
.top-news-block .news-items {
  grid-area: slide;
  position: relative;
  width: auto;             /* SP の width:80% を打ち消し */
  min-width: 0;
  height: 19.5px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.top-news-block .news-item {
  position: absolute;
  inset: 0;
  margin: 0;
  transform: translateX(100%);   /* 出番以外は右側の見えない位置で待機 */
}
.top-news-block .news-item + .news-item {
  margin-top: 0;           /* 既存 margin-top:8px を打ち消し */
}

/* 1件のときは動かさず表示 */
.top-news-block .news-item:only-child {
  transform: none;
}

/* PC：マウスを乗せている間は止める */
.top-news-block .news-items:hover .news-item {
  animation-play-state: paused;
}

/* 1行＋はみ出し「…」 */
.top-news-block .news-item--link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.5;
  color: #222;
  text-decoration: none;
}

/* カテゴリラベル：黒地・白文字・角丸なし */
.top-news-block .news-item-type {
  display: inline;
  margin: 0 6px 0 0;
  padding: 0 6px 2px;
  border: none;
  border-radius: 0;
  background-color: #222;
  color: #fff;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  vertical-align: 1px;
}

/* タイトル：既存の line-clamp（共通3行 / SP2行）を解除 */
.top-news-block .news-items .news-item-title {
  display: inline;
  margin: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

.top-news-block .block-category-event--all {
  grid-area: all;
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
  .top-news-block {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head  all"
      "slide slide";
    row-gap: 16px;
    padding: 20px 24px 25px;
  }

  .top-news-block::before {
    font-size: 11px;
  }

  .top-news-block .block-category-event--all {
    margin-top: 0;         /* 既存 margin-top:auto を打ち消し */
  }
}

/* ---------- PC ---------- */
@media screen and (min-width: 769px) {
  .top-news-block {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head slide all";
    column-gap: 40px;
    padding-block: 13px;   /* 既存 34px → 帯の高さ 約120px → 約61px */
    /* max-width:1600px / margin:auto / padding-inline:40px は既存のまま */
  }

  .top-news-block::before {
    font-size: 16px;
  }
}

/* =========================================================
   スライドアニメーション
   1件あたり 5.8s（登場0.8s → 表示5s → 退場0.8s、退場と次の登場は同時）
   周期 = 5.8s × 件数
   ---------------------------------------------------------
   ▼ 各お知らせの開始タイミング（件数に関係なく共通）
   ========================================================= */
.top-news-block .news-item:nth-child(1) { animation-delay: -0.8s; }
.top-news-block .news-item:nth-child(2) { animation-delay: 5s; }
.top-news-block .news-item:nth-child(3) { animation-delay: 10.8s; }
.top-news-block .news-item:nth-child(4) { animation-delay: 16.6s; }
.top-news-block .news-item:nth-child(5) { animation-delay: 22.4s; }
.top-news-block .news-item:nth-child(6) { animation-delay: 28.2s; }
.top-news-block .news-item:nth-child(7) { animation-delay: 34s; }
.top-news-block .news-item:nth-child(8) { animation-delay: 39.8s; }
.top-news-block .news-item:nth-child(9) { animation-delay: 45.6s; }
.top-news-block .news-item:nth-child(10) { animation-delay: 51.4s; }

/* ▼ 件数ごとの周期とキーフレーム
   （例：3件 → 1件目が「最後から3番目」のとき 3件用を適用） */

/* 2件 */
.top-news-block .news-item:first-child:nth-last-child(2),
.top-news-block .news-item:first-child:nth-last-child(2) ~ .news-item {
  animation-name: top-news-ticker-2;
  animation-duration: 11.6s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-2 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  6.897% { transform: translateX(0); }
  50%    { transform: translateX(0);     animation-timing-function: ease; }
  56.897% { transform: translateX(-100%); }
  56.907% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 3件 */
.top-news-block .news-item:first-child:nth-last-child(3),
.top-news-block .news-item:first-child:nth-last-child(3) ~ .news-item {
  animation-name: top-news-ticker-3;
  animation-duration: 17.4s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-3 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  4.598% { transform: translateX(0); }
  33.333% { transform: translateX(0);     animation-timing-function: ease; }
  37.931% { transform: translateX(-100%); }
  37.941% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 4件 */
.top-news-block .news-item:first-child:nth-last-child(4),
.top-news-block .news-item:first-child:nth-last-child(4) ~ .news-item {
  animation-name: top-news-ticker-4;
  animation-duration: 23.2s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-4 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  3.448% { transform: translateX(0); }
  25%    { transform: translateX(0);     animation-timing-function: ease; }
  28.448% { transform: translateX(-100%); }
  28.458% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 5件 */
.top-news-block .news-item:first-child:nth-last-child(5),
.top-news-block .news-item:first-child:nth-last-child(5) ~ .news-item {
  animation-name: top-news-ticker-5;
  animation-duration: 29s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-5 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  2.759% { transform: translateX(0); }
  20%    { transform: translateX(0);     animation-timing-function: ease; }
  22.759% { transform: translateX(-100%); }
  22.769% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 6件 */
.top-news-block .news-item:first-child:nth-last-child(6),
.top-news-block .news-item:first-child:nth-last-child(6) ~ .news-item {
  animation-name: top-news-ticker-6;
  animation-duration: 34.8s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-6 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  2.299% { transform: translateX(0); }
  16.667% { transform: translateX(0);     animation-timing-function: ease; }
  18.966% { transform: translateX(-100%); }
  18.976% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 7件 */
.top-news-block .news-item:first-child:nth-last-child(7),
.top-news-block .news-item:first-child:nth-last-child(7) ~ .news-item {
  animation-name: top-news-ticker-7;
  animation-duration: 40.6s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-7 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  1.97%  { transform: translateX(0); }
  14.286% { transform: translateX(0);     animation-timing-function: ease; }
  16.256% { transform: translateX(-100%); }
  16.266% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 8件 */
.top-news-block .news-item:first-child:nth-last-child(8),
.top-news-block .news-item:first-child:nth-last-child(8) ~ .news-item {
  animation-name: top-news-ticker-8;
  animation-duration: 46.4s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-8 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  1.724% { transform: translateX(0); }
  12.5%  { transform: translateX(0);     animation-timing-function: ease; }
  14.224% { transform: translateX(-100%); }
  14.234% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 9件 */
.top-news-block .news-item:first-child:nth-last-child(9),
.top-news-block .news-item:first-child:nth-last-child(9) ~ .news-item {
  animation-name: top-news-ticker-9;
  animation-duration: 52.2s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-9 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  1.533% { transform: translateX(0); }
  11.111% { transform: translateX(0);     animation-timing-function: ease; }
  12.644% { transform: translateX(-100%); }
  12.654% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 10件 */
.top-news-block .news-item:first-child:nth-last-child(10),
.top-news-block .news-item:first-child:nth-last-child(10) ~ .news-item {
  animation-name: top-news-ticker-10;
  animation-duration: 58s;
  animation-iteration-count: infinite;
}
@keyframes top-news-ticker-10 {
  0%     { transform: translateX(100%);  animation-timing-function: ease; }
  1.379% { transform: translateX(0); }
  10%    { transform: translateX(0);     animation-timing-function: ease; }
  11.379% { transform: translateX(-100%); }
  11.389% { transform: translateX(100%); }
  100%   { transform: translateX(100%); }
}

/* 動きを減らす設定の端末では1件目だけ固定表示 */
@media (prefers-reduced-motion: reduce) {
  .top-news-block .news-item { animation: none !important; }
  .top-news-block .news-item:first-child { transform: none; }
}

/* ※10件を超える場合は、nth-child のdelay と 件数別ブロックを同じ規則で追加してください
     delay = 5.8s × (n-1) − 0.8s ／ 周期 = 5.8s × 件数
     keyframes：0%右 → (0.8/周期)%表示 → (5.8/周期)%表示 → (6.6/周期)%左 → 直後に右へ戻して待機 */

/* =========================================================
   JS（top-news-ticker.js）併用時：Swiper 版
   - JS が動くと .top-news-block に .is-swiper が付き、
     ul が div.top-news-slide.swiper で包まれる
   - 上の CSS アニメーションは止めて Swiper に任せる
     （JS が読み込まれなかった場合は CSS アニメーションで動く）
   ========================================================= */
.top-news-block.is-swiper .top-news-slide {
  grid-area: slide;
  width: 100%;
  min-width: 0;
  contain: inline-size;    /* Swiper の幅計算でグリッドが広がるのを防ぐ */
  height: 19.5px;
  overflow: hidden;
}

.top-news-block.is-swiper .news-items {
  display: flex;
  height: 100%;
  overflow: visible;
}

.top-news-block.is-swiper .news-item {
  position: relative;
  inset: auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transform: none;
  animation: none !important;
}