/**
 * microCMS用追加CSS
 * NEWSセクションの動的表示に関するスタイル
 */

/* ローディング状態 */
#news table.loading {
  opacity: 0.7;
}

#news table .loading-item th,
#news table .loading-item td {
  color: #999;
  font-style: italic;
}

#news table .loading-item td::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid #999;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: microcms-loading 1s linear infinite;
}

@keyframes microcms-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* エラー状態 */
#news table.error {
  opacity: 0.8;
}

#news table .error-item th,
#news table .error-item td {
  color: #d32f2f;
}

#news table .error-item td::before {
  content: "⚠ ";
  color: #d32f2f;
}

/* ニュースなし状態 */
#news table .no-news th,
#news table .no-news td {
  color: #666;
  font-style: italic;
}

/* ニュース項目のホバー効果（JSで制御されるが、CSSでも定義） */
#news table tr.news-item {
  transition: background-color 0.2s ease;
}

#news table tr.news-item:hover {
  background-color: #f5f5f5;
}

#news table tr.news-item[data-href] {
  cursor: pointer;
}

/* ニュース項目内のリンク */
#news table tr.news-item td a {
  color: inherit;
  text-decoration: none;
  display: inline;
  transition: color 0.2s ease;
}

#news table tr.news-item td a:hover {
  opacity: 1;
  color: #036EB7;
  text-decoration: none;
}

/* 行全体のホバー時はリンクの色も変更 */
#news table tr.news-item:hover td a {
  color: #036EB7;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  #news table .loading-item td::after,
  #news table .error-item td::before {
    margin-left: 4px;
  }
  
  #news table th,
  #news table td {
    padding: 1rem 0 1rem 1rem;
  }
}

/* フェードイン効果 */
.microcms-fade-in {
  animation: microcms-fade-in 0.5s ease-in-out;
}

@keyframes microcms-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}