/* ============================================
   🛡️ CLS（Cumulative Layout Shift）防止
   Google Lighthouse推奨のベストプラクティス
   参考: https://web.dev/cls/
   ============================================ */

/* 注意: .row や .card-style のmin-heightは各ページのHTMLで設定 */
/* ここでは全ページ共通のスタイルのみ定義 */

/* ランキングカードコンテナ */
.ranking-cards-container {
  contain: layout style;
}

/* 読み込み前のプレースホルダー用 */
#rankingSection {
  contain: layout style;
}

/* モバイル用ランキングカードの高さ（実測値） */
.ranking-card {
  min-height: 135px; /* モバイル実測値 */
  contain: layout style paint;
}

/* サムネイルのプレースホルダー - アスペクト比で高さ確保 */
.card-thumbnail {
  width: 80px;
  height: 45px;
  aspect-ratio: 16 / 9;
  background: #1a2a3a;
  border-radius: 4px;
}

/* 検索セクションの高さ予約 */
.search-section {
  min-height: 40px;
}

/* コントロールパネルの高さ予約 */
.control-panel,
.controls-grid {
  min-height: 50px;
}

/* モバイル用調整 */
@media (max-width: 768px) {
  .ranking-card {
    min-height: 70px;
  }
  
  .card-thumbnail {
    width: 60px;
    height: 34px;
  }
}

/* ============================================
   🔢 数字専用Orbitronフォント（軽量版）
   数字(0-9)のみをOrbitronで表示
   ============================================ */
@font-face {
  font-family: 'Orbitron';
  src: url('https://fonts.gstatic.com/s/orbitron/v31/yMJRMIlzdpvBhQQL_Qq7dy0.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0030-0039, U+002C, U+002E; /* 0-9, カンマ, ピリオド */
}

/* 数字にOrbitronを適用するクラス */
.views-main,
.card-rank,
.rating-score,
.comment-count-badge,
.metric-value,
.ranking-number {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
}

/* ============================================
   🎯 クリティカルCSS（最優先・最重要）
   PC表示時のサイドバー強制表示
   ============================================ */

/* 992px以上: サイドバー表示、ナビボタン非表示 */
@media screen and (min-width: 992px) {
  /* ナビボタンを絶対に非表示 */
  .anime-detail-nav-buttons {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
  
  /* サイドバーを強制表示 */
  .anime-sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* 右サイドバー（最後のサイドバー）を確実に表示 */
  .anime-sidebar:last-of-type {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 200px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
  }
  
  /* 1200px未満では左サイドバーを非表示 */
  .anime-sidebar:first-of-type {
    display: none !important;
  }
}

/* 1200px〜1499px: 両サイドバー小さめに表示 */
@media screen and (min-width: 1200px) and (max-width: 1499px) {
  .anime-sidebar:first-of-type {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 200px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  
  .anime-sidebar:last-of-type {
    width: 200px !important;
    min-width: 180px !important;
    overflow: visible !important;
  }
  
  .anime-detail-wrapper {
    gap: 1rem !important;
  }
  
  .main-card {
    flex: 1 !important;
    min-width: 500px !important;
    max-width: none !important;
  }
}

/* 1500px以上: 両サイドバー通常サイズ表示 */
@media screen and (min-width: 1500px) {
  .anime-sidebar:first-of-type {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 250px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
  }
  
  .anime-sidebar:last-of-type {
    width: 250px !important;
    min-width: 220px !important;
  }
  
  .main-card {
    flex: 1 !important;
    max-width: 900px !important;
  }
}

/* 991px以下: サイドバー非表示、ナビボタン表示 */
@media screen and (max-width: 991px) {
  .anime-sidebar {
    display: none !important;
  }
}

/* 768px〜991px: ナビボタン表示 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .anime-detail-nav-buttons {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ============================================
   🚀 パフォーマンス改善CSS（最優先で読み込み）
   ============================================ */

/* モバイル・タブレット（768px以下）でアニメーション停止 */
@media (max-width: 768px) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.1s !important;
  }
  
  /* フェードイン系は一度だけ実行 */
  .fade-in-button,
  .fade-in-card {
    animation: fadeInUp 0.3s ease forwards !important;
  }
}

/* ユーザーが「視覚効果を減らす」設定をしている場合 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 重いアニメーションをホバー時のみに変更 */
.ultra-glow {
  animation: none !important;
}

.mega-shine {
  animation: none !important;
}

.ultra-flashy {
  animation: none !important;
}

@media (min-width: 769px) {
  .ultra-glow:hover {
    animation: cyberGlow 2s ease-in-out infinite alternate !important;
  }
  
  .mega-shine:hover {
    animation: goldenGlow 2s ease-in-out infinite alternate !important;
  }
  
  .ultra-flashy:hover {
    animation: gradientShift 3s ease-in-out infinite !important;
  }
}

/* backdrop-filter削除（GPU負荷大幅軽減） */
.control-panel,
.chart-container,
.card-style,
table,
td,
#mobileMenu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 複雑なbox-shadowを簡素化 */
.control-panel,
.chart-container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* card-styleは枠なし */
.card-style {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.modern-btn,
.metric-pill,
.search-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.modern-btn:hover,
.metric-pill:hover,
.search-btn:hover {
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3) !important;
}

.modern-btn.active,
.metric-pill.active {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
}

td {
  box-shadow: none !important;
}

td:hover {
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
}

/* 疑似要素のアニメーション停止 */
.control-panel::after,
.panel-title::before,
.modern-btn::before,
.metric-pill::before {
  animation: none !important;
}

/* グリッドパターンの簡素化（::before疑似要素を非表示） */
.control-panel::before,
.chart-container::before,
.card-style::before {
  display: none !important;
}

/* hover時のtransform制限（リフロー軽減） */
thead th:hover,
td:hover {
  transform: none !important;
}

/* containプロパティで再計算範囲を制限 */
.control-panel {
  contain: layout style;
}

/* PC用インライン選択ボタン */
/* ★★★ 設定表示エリア（種類・指標・件数・期間） ★★★ */
/* PC表示時は非表示（左端のsetting-panel-inlineで代替） */
@media (min-width: 768px) {
  #rankingSection {
    display: none !important;
  }
}

#rankingSection {
  background: linear-gradient(180deg, rgba(15, 25, 45, 0.95) 0%, rgba(10, 20, 35, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 20px;
  padding: 15px 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #00ffff;
}

.heading-row:last-child {
  margin-bottom: 0;
}

.heading-label {
  font-weight: 600;
  min-width: 60px;
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.heading-value {
  color: #ffffff;
  font-weight: 500;
}

.inline-metric-buttons,
.inline-limit-buttons,
.inline-period-select {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.inline-btn {
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: #b0e0e6;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.inline-btn:hover {
  background: rgba(0, 255, 255, 0.15);
  border-color: rgba(0, 255, 255, 0.6);
  transform: translateY(-1px);
}

.inline-btn.active {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.9) 0%, rgba(0, 100, 130, 0.9) 100%);
  border-color: #00ffff;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  font-weight: 600;
}

.inline-date-select {
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 0.65rem;
  color: #00ffff;
  cursor: pointer;
  min-width: 150px;
  height: 18px !important;
  line-height: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ffff' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
}

.inline-date-select:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
}

.inline-date-select option {
  background: rgb(15, 25, 45) !important;
  color: #00ffff !important;
  padding: 8px 12px !important;
}

.inline-date-select option:hover,
.inline-date-select option:checked {
  background: rgb(0, 80, 100) !important;
  color: #ffffff !important;
}

/* PC用検索パネル（ランキング種類の横） */
.search-panel-inline {
  flex: 1 1 0;
  min-width: 120px;
  max-width: 200px;
}

.search-container-inline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.search-panel-inline .modern-search-input {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.55rem;
  box-sizing: border-box;
}

.search-panel-inline .search-btn {
  width: 100%;
  padding: 3px 6px;
  font-size: 0.55rem;
}

/* モバイル時は検索パネルを非表示（controls-grid-inline内に表示） */
@media (max-width: 767px) {
  .search-panel-inline {
    display: none !important;
  }
}

/* PC表示時（768px以上）はcontrols-grid-inlineを非表示 */
@media (min-width: 768px) {
  .controls-grid-inline,
  .controls-grid-inline.d-md-none,
  div.controls-grid-inline {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ranking-type-panelにcontrol-panelと同様のスタイル適用 */
.ranking-type-panel {
  contain: layout style;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ランキング種類コンテナ - 画面幅いっぱいに均等配置 */
.ranking-types-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 0 0 8px 0 !important;
  margin-left: 0 !important;
  overflow: visible;
  box-sizing: border-box;
  align-items: stretch;
  width: 100%;
  padding: 0 !important;
}

/* OP/ED系パネルを縦並びにするラッパー */
.ranking-type-vertical-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 3;
  min-width: 0;
}

.ranking-type-vertical-group > .ranking-type-panel {
  contain: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  padding: 6px 10px !important;
  min-height: 36px;
}

.ranking-type-vertical-group > .ranking-type-panel > .panel-title {
  white-space: nowrap;
  font-size: 0.58rem;
  min-width: 140px;
  max-width: 140px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-type-vertical-group > .ranking-type-panel > .button-grid {
  contain: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px;
  flex-wrap: nowrap !important;
  flex: 1;
}

.ranking-type-vertical-group > .ranking-type-panel > .button-grid > .modern-btn {
  padding: 3px 8px;
  font-size: 0.58rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: auto;
}

/* 設定パネル（種類・指標・件数・期間）- 他と同じ幅 */
.setting-panel-inline {
  flex-direction: column;
  padding: 8px 10px;
  gap: 5px;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 期間行は特にselectを広げる */
.setting-row:last-child {
  flex-wrap: nowrap;
}

.setting-row:last-child select {
  flex: 1;
  min-width: 0;
}

/* 種類行は横並びで省略表示 */
.setting-row-type {
  flex-direction: row;
  align-items: center;
}

.setting-value-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex: 1;
}

.setting-label {
  font-size: 0.7rem;
  color: #00ffff;
  font-weight: 600;
  white-space: nowrap;
  min-width: 38px;
  flex-shrink: 0;
}

.setting-value {
  font-size: 0.8rem;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.3;
}

.metric-pills-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.metric-pills-row .metric-pill {
  font-size: 0.65rem;
  padding: 4px 8px;
  border-radius: 15px;
  background: rgba(0, 40, 60, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.metric-pills-row .metric-pill:hover {
  background: rgba(0, 255, 255, 0.15);
  color: #00ffff;
}

.metric-pills-row .metric-pill.active {
  background: linear-gradient(135deg, rgba(0, 180, 200, 0.9), rgba(0, 120, 140, 0.9));
  border-color: #00ffff;
  color: #ffffff;
  font-weight: 600;
}

.modern-select-wide {
  font-size: 0.65rem !important;
  padding: 4px 6px !important;
  background: rgba(0, 20, 40, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 3px;
  color: #00ffff;
  flex: 1;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 1.2 !important;
}

/* 設定パネル内の期間プルダウン（最優先） */
#dateSelectInline,
.setting-panel-inline .modern-select-wide,
.setting-panel-inline .dateSelectBox,
.setting-row .modern-select-wide {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  font-size: 0.65rem !important;
  padding: 4px 6px !important;
  line-height: 1.2 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.modern-select-wide:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

/* 全パネルを均等幅に */
.ranking-types-container .ranking-type-panel {
  flex: 1 1 0;
  min-width: 140px;
  max-width: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* 設定パネルは他より広く */
.ranking-types-container .setting-panel-inline {
  flex: 1.5 1 0;
  min-width: 200px;
  max-width: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* パネルタイトル - 改行して全文表示、高さを固定 */
.ranking-types-container .panel-title {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
  min-height: 1.8em !important;
  height: auto !important;
  font-size: 0.7rem !important;
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px !important;
  color: #00ffff;
  font-weight: 600;
}

/* ボタンを横並びに */
.ranking-types-container .button-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 1;
}

/* ボタンのデザインを統一（横並び用・横書き） */
.ranking-types-container .modern-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  padding: 5px 4px !important;
  font-size: 0.6rem !important;
  margin: 0 !important;
  min-height: 24px !important;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  color: #b0e0e6 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* 特別企画ランキングは2行×2列のグリッド */
#typeGroup4.button-grid {
  flex-wrap: wrap !important;
}

#typeGroup4 .modern-btn {
  flex: 1 1 45% !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  min-height: 36px !important;
  height: auto !important;
  line-height: 1.2 !important;
}

.ranking-types-container .modern-btn:hover {
  background: rgba(0, 255, 255, 0.15) !important;
  border-color: rgba(0, 255, 255, 0.6) !important;
  transform: translateY(-1px) !important;
}

.ranking-types-container .modern-btn.active {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.9) 0%, rgba(0, 100, 130, 0.9) 100%) !important;
  border-color: #00ffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5) !important;
  font-weight: 600 !important;
}

.ranking-table tbody tr {
  contain: layout;
}

/* ============================================
   🎴 カード型ランキングデザイン
   ============================================ */

/* ランキングカードコンテナ */
.ranking-cards-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 !important;
  width: 100%;
  margin: 0 !important;
  margin-left: 0 !important;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
  border: none;
}

/* Spotify風リストアイテム - 4カラム */
.ranking-card {
  display: grid;
  grid-template-columns: 35px 110px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  margin: 0 !important;
  margin-left: 0 !important;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  cursor: default;
  min-height: 100px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* 10パターンのグラデーション背景（順位ごとに繰り返し） */
/* パターン1: シアン/ターコイズ系 */
.ranking-card:nth-child(10n+1) {
  background: linear-gradient(145deg, rgba(0, 80, 100, 0.9) 0%, rgba(0, 50, 70, 0.95) 40%, rgba(5, 25, 40, 0.98) 100%) !important;
  border-color: rgba(0, 220, 255, 0.4) !important;
}

/* パターン2: ブルー/インディゴ系 */
.ranking-card:nth-child(10n+2) {
  background: linear-gradient(145deg, rgba(30, 50, 100, 0.9) 0%, rgba(20, 35, 70, 0.95) 40%, rgba(10, 20, 45, 0.98) 100%) !important;
  border-color: rgba(80, 140, 255, 0.4) !important;
}

/* パターン3: パープル/バイオレット系 */
.ranking-card:nth-child(10n+3) {
  background: linear-gradient(145deg, rgba(60, 40, 100, 0.9) 0%, rgba(40, 25, 70, 0.95) 40%, rgba(20, 15, 45, 0.98) 100%) !important;
  border-color: rgba(160, 100, 255, 0.4) !important;
}

/* パターン4: ティール/エメラルド系 */
.ranking-card:nth-child(10n+4) {
  background: linear-gradient(145deg, rgba(0, 70, 70, 0.9) 0%, rgba(0, 45, 55, 0.95) 40%, rgba(5, 25, 35, 0.98) 100%) !important;
  border-color: rgba(0, 200, 180, 0.4) !important;
}

/* パターン5: ダークネイビー/ディープブルー系 */
.ranking-card:nth-child(10n+5) {
  background: linear-gradient(145deg, rgba(20, 40, 80, 0.9) 0%, rgba(15, 28, 55, 0.95) 40%, rgba(8, 18, 38, 0.98) 100%) !important;
  border-color: rgba(60, 120, 200, 0.4) !important;
}

/* パターン6: マゼンタ/ピンク系 */
.ranking-card:nth-child(10n+6) {
  background: linear-gradient(145deg, rgba(80, 30, 80, 0.9) 0%, rgba(50, 20, 55, 0.95) 40%, rgba(30, 12, 35, 0.98) 100%) !important;
  border-color: rgba(220, 80, 180, 0.4) !important;
}

/* パターン7: オーシャンブルー系 */
.ranking-card:nth-child(10n+7) {
  background: linear-gradient(145deg, rgba(10, 60, 90, 0.9) 0%, rgba(8, 40, 65, 0.95) 40%, rgba(5, 22, 40, 0.98) 100%) !important;
  border-color: rgba(40, 160, 220, 0.4) !important;
}

/* パターン8: ミッドナイトパープル系 */
.ranking-card:nth-child(10n+8) {
  background: linear-gradient(145deg, rgba(45, 30, 90, 0.9) 0%, rgba(30, 20, 60, 0.95) 40%, rgba(18, 12, 40, 0.98) 100%) !important;
  border-color: rgba(120, 80, 200, 0.4) !important;
}

/* パターン9: アクアマリン系 */
.ranking-card:nth-child(10n+9) {
  background: linear-gradient(145deg, rgba(0, 75, 85, 0.9) 0%, rgba(0, 50, 60, 0.95) 40%, rgba(0, 28, 38, 0.98) 100%) !important;
  border-color: rgba(0, 210, 200, 0.4) !important;
}

/* パターン10: スレートブルー系 */
.ranking-card:nth-child(10n) {
  background: linear-gradient(145deg, rgba(40, 50, 75, 0.9) 0%, rgba(28, 35, 55, 0.95) 40%, rgba(15, 20, 35, 0.98) 100%) !important;
  border-color: rgba(100, 130, 180, 0.4) !important;
}

.ranking-card:hover {
  border-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.15);
}

/* 順位に応じたグラデーション（JavaScriptで動的に設定） */
/* 上位はシアン系、下位になるにつれて暗くなる */

/* 順位 */
.card-rank {
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: #b3b3b3;
  text-align: left;
  min-width: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* サムネイル */
.card-thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #282828;
}

.card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

/* メイン情報エリア */
.card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 曲名（メイン） */
.card-song {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 曲名/歌手名行（PC・モバイル両方で表示） */
.card-title-artist-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.card-artist-inline {
  display: inline;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* 評価行（星 + スコア + コメントボタン） */
.card-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

/* 10段階星をコンパクトに */
.star-rating-compact {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.star-rating-compact .star {
  font-size: 0.75rem;
  color: #444;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.star-rating-compact .star:hover,
.star-rating-compact .star.hovered {
  color: #ffd700;
  transform: scale(1.15);
}

.star-rating-compact .star.selected {
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

/* スコアと件数（評価行用） */
.card-rating-row .rating-score {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffd700;
  margin-left: 4px;
}

.card-rating-row .rating-count {
  font-size: 0.7rem;
  color: #888;
}

.card-rating-row .rating-prompt {
  font-size: 0.65rem;
  color: #ffd700;
  margin-left: 6px;
  animation: pulse-prompt 2s ease-in-out infinite;
}

@keyframes pulse-prompt {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* コメントするボタン（評価行内） */
.comment-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #00ffff;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 6px;
  padding: 3px 8px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* コメント件数バッジ */
.comment-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 1px 5px;
  background: transparent;
  color: #00ffff;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 3px;
  margin-right: 3px;
}

.comment-btn-inline:hover {
  background: rgba(0, 255, 255, 0.25);
  border-color: rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* 再生数（曲情報内）- レスポンシブ対応 */
.card-views-inline {
  font-family: 'Orbitron', monospace !important;
  font-size: clamp(0.85rem, 2vw, 1.3rem) !important;
  font-weight: 700 !important;
  color: #00ffff !important;
  margin-top: 2px;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.card-views-inline .views-main {
  font-size: clamp(0.85rem, 2vw, 1.3rem);
  font-weight: 700;
  color: #00ffff;
}

.card-views-inline .views-detail {
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  font-weight: 400;
  color: #888;
  text-shadow: none;
}

/* メインコンテンツ（曲情報 + コメント横並び） */
.card-main-content {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.card-main-content .card-info {
  flex-shrink: 0;
  min-width: 200px;
  max-width: 350px;
}

/* コメントエリア（ボタン + 直近コメント縦並び） */
.card-comments-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.card-comments-area .comment-btn-inline {
  align-self: flex-start;
  margin-left: 0;
}

/* 直近コメント表示エリア */
.card-recent-comments {
  font-size: 0.62rem;
  color: #bbb;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #00bcd4;
  padding: 4px 8px;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.card-recent-comments:empty {
  display: none;
}

.card-recent-comments .recent-comment-item {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 0;
}

.card-recent-comments .recent-comment-item::before {
  content: "💬 ";
  font-size: 0.55rem;
}

.card-recent-comments .comment-nickname {
  color: #00bcd4;
  font-size: 0.6rem;
  font-weight: 600;
}

.card-recent-comments .comment-text {
  color: #ccc;
  font-size: 0.6rem;
}

/* アニメ・アーティスト（サブ） */
.card-sub-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.95rem;
  color: #b3b3b3;
}

.card-anime {
  font-size: 0.75rem;
  color: #a0a0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.card-artist {
  font-size: 0.7rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-sub-info .separator {
  color: #666;
}

/* アクションボタン（縦並び） */
.card-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 1;
}

.ranking-card:hover .card-action-buttons {
  opacity: 1;
}

.card-action-buttons .btn {
  padding: 5px 12px;
  font-size: 0.7rem;
  border-radius: 6px;
  font-weight: 600;
  background: rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #00ffff;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.card-action-buttons .btn:hover {
  background: rgba(0, 255, 255, 0.3);
  transform: scale(1.05);
  border-radius: 6px;
}

/* 評価・コメントミニ表示（モバイル専用） */
.card-stats-mini {
  display: none;  /* PCでは非表示（card-rating-badgeが表示される） */
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: #b3b3b3;
  min-width: 80px;
}

.card-stats-mini .rating-mini {
  display: flex;
  align-items: center;
  gap: 3px;
}

.card-stats-mini .rating-mini .star {
  color: #ffd700;
  font-size: 0.8rem;
}

.card-stats-mini .comment-mini {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 評価と再生数を横並びにする行 */
.card-metrics-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* 評価（インライン表示用） */
.card-rating-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  color: #ffd700;
}

.card-rating-inline .star {
  color: #ffd700;
  font-size: 0.8rem;
}

/* サムネイルラッパー（サムネ+いいねを縦に並べる） */
.card-thumbnail-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* サムネ下のいいね/ディスライクボタン */
.card-like-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.like-btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #ccc;
  background: rgba(0, 40, 60, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.like-btn-mini:hover {
  background: rgba(0, 255, 255, 0.15);
  border-color: rgba(0, 255, 255, 0.7);
  color: #00ffff;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.like-btn-mini[data-type="like"].active {
  color: #4CAF50;
  border-color: rgba(76, 175, 80, 0.6);
  background: rgba(76, 175, 80, 0.15);
}

.like-btn-mini[data-type="dislike"].active {
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.6);
  background: rgba(244, 67, 54, 0.15);
}

.like-btn-mini .count {
  font-family: 'Orbitron', monospace;
  font-size: 0.75rem;
  font-weight: 600;
}

/* サムネイル下の評価・コメント（モバイル用） */
.card-rating-under-thumb {
  display: none;
  font-size: 0.6rem;
  color: #ffd700;
  background: linear-gradient(135deg, rgba(0, 60, 80, 0.9), rgba(0, 40, 60, 0.9));
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid rgba(0, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: subtlePulse 2s ease-in-out infinite;
}

.card-rating-under-thumb:active {
  transform: scale(0.95);
}

@keyframes subtlePulse {
  0%, 100% { 
    box-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
  }
  50% { 
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  }
}

.card-rating-under-thumb .star {
  color: #ffd700;
}

.card-rating-under-thumb .comment-icon {
  margin-left: 4px;
  color: #00ffff;
}

/* 再生数（右端、モバイル用） */
.card-views {
  font-family: 'Orbitron', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: #00ffff;
  text-align: right;
  min-width: 90px;
  display: none;
}

/* 展開パネル（評価・コメント） */
.card-expand-panel {
  display: none;
  grid-column: 1 / -1;
  padding: 12px 16px 16px 73px;
  background: rgba(0, 40, 60, 0.5);
  border-top: 1px solid rgba(0, 255, 255, 0.1);
  animation: slideDown 0.2s ease;
}

.ranking-card.expanded .card-expand-panel {
  display: block;
}

/* インライン評価セクション（デフォルト表示） */
.card-inline-rating {
  grid-column: 1 / -1;
  padding: 12px 16px 12px 60px;
  background: rgba(0, 30, 50, 0.4);
  border-top: 1px solid rgba(0, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-rating-row {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.inline-stars {
  display: flex;
  gap: 2px;
}

.inline-stars .star {
  font-size: 1.3rem;
  color: #444;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inline-stars .star.selected {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.inline-stars .star:hover {
  color: #ffec8b;
  transform: scale(1.15);
}

.rating-stats-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
}

.rating-stats-inline .avg-score {
  color: #ffd700;
  font-weight: 600;
}

.rating-stats-inline .count {
  color: #888;
}

.like-buttons-inline {
  display: flex;
  gap: 8px;
}

.like-buttons-inline .like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  color: #ccc;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.like-buttons-inline .like-btn:hover {
  background: rgba(0, 255, 255, 0.15);
  border-color: rgba(0, 255, 255, 0.4);
}

.inline-comment-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.inline-comment-preview {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inline-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: #aaa;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.inline-comment-item .country-flag {
  font-size: 0.7rem;
  opacity: 0.7;
}

.inline-comment-item .nickname {
  color: #00d4aa;
  font-weight: 500;
}

.inline-comment-item .comment-text {
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.comment-expand-btn {
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(0, 100, 120, 0.8) 0%, rgba(0, 70, 90, 0.8) 100%);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 16px;
  color: #00ffff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.comment-expand-btn:hover {
  background: linear-gradient(180deg, rgba(0, 130, 150, 0.9) 0%, rgba(0, 90, 110, 0.9) 100%);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

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

/* 展開パネル内の評価 */
.card-expand-panel .rating-container,
.card-expand-panel .rating-container-mobile {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.card-expand-panel .star-rating {
  gap: 2px;
}

.card-expand-panel .star {
  font-size: 1.2rem;
}

.card-expand-panel .rating-stats {
  font-size: 0.9rem;
}

.card-expand-panel .like-buttons {
  gap: 8px;
}

.card-expand-panel .like-btn {
  padding: 5px 12px;
  font-size: 0.8rem;
}

.card-expand-panel .comment-section {
  background: transparent !important;
  border: none !important;
  margin-top: 10px;
}

/* コメント一覧エリア */
.comment-list-area {
  margin-bottom: 16px;
}

.comment-item {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.75rem;
}

.comment-country {
  font-size: 0.7rem;
  color: #888;
}

.comment-meta .nickname {
  color: #00bcd4;
  font-weight: 600;
}

.comment-meta .nickname.anonymous {
  color: #888;
}

.comment-date {
  color: #666;
  font-size: 0.7rem;
}

.comment-content {
  color: #ddd;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* 全て表示するボタン */
.show-all-comments-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  color: #00ffff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.show-all-comments-btn:hover {
  background: rgba(0, 255, 255, 0.2);
}

.card-expand-panel .comment-header-row {
  padding: 8px 12px;
  font-size: 0.85rem;
  background: rgba(0, 50, 70, 0.5);
  border-radius: 6px;
}

.card-expand-panel .comment-preview-item {
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* ============================================
   📱 モバイル用 Spotify風レスポンシブ
   ============================================ */

@media (max-width: 768px) {
  .ranking-cards-container {
    gap: 1px;
    border-radius: 20px;
  }
  
  .ranking-cards-container.mobile {
    padding: 0;
  }

  .ranking-card {
    grid-template-columns: 28px 70px 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "rank thumb info";
    gap: 10px;
    padding: 6px 10px;
    min-height: 80px;
  }

  .card-rank {
    grid-area: rank;
    font-size: 0.9rem;
    min-width: 24px;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    position: relative;
  }

  /* ランキング数字の下に「クリック☛」を表示 - 下部に配置 */
  .card-rank::after {
    content: "click☛";
    font-size: 0.4rem;
    color: #00ffff;
    font-family: sans-serif;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0.8;
    position: absolute;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* サムネイルラッパーをグリッドエリアに配置 */
  .card-thumbnail-wrapper {
    grid-area: thumb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .card-thumbnail {
    width: 65px;
    height: 65px;
    border-radius: 3px;
  }

  /* モバイル: メインコンテンツを縦並びに */
  .card-main-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .card-main-content .card-info {
    max-width: 100%;
  }

  /* モバイル: 直近コメントを非表示 */
  .card-recent-comments {
    display: none;
  }

  /* モバイル: サムネ下の評価・コメントを表示 */
  .card-rating-under-thumb {
    display: block;
    font-size: 0.55rem;
    text-align: left;
  }

  .card-info {
    grid-area: info;
    align-self: center;
  }

  /* モバイル: 評価行 */
  .card-rating-row {
    gap: 4px;
    margin: 1px 0;
  }

  .star-rating-compact .star {
    font-size: 0.55rem;
  }

  .card-rating-row .rating-score {
    font-size: 0.7rem;
  }

  .card-rating-row .rating-count {
    font-size: 0.55rem;
  }

  /* モバイル: いいねボタンを小さく */
  .like-btn-mini {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  .like-btn-mini .count {
    font-size: 0.65rem;
  }

  /* モバイル: 直近コメント */
  .card-recent-comments {
    font-size: 0.62rem;
  }

  .comment-btn-inline {
    font-size: 0.6rem;
    padding: 2px 6px;
    margin-left: 4px;
  }

  .card-song {
    font-size: 0.85rem;
  }

  .card-anime {
    font-size: 0.8rem;
  }

  .card-artist {
    font-size: 0.75rem;
  }

  .card-action-buttons {
    display: none;
  }

  /* モバイル: card-stats-miniを非表示 */
  .card-stats-mini {
    display: none;
  }

  /* モバイル: card-metrics-rowを非表示（使わない） */
  .card-metrics-row {
    display: none;
  }

  /* モバイル: 再生数は歌手名の下に表示 */
  .card-views-inline {
    display: block;
    font-size: 1rem !important;
    margin-top: 2px;
  }

  .card-views-inline .views-main {
    font-size: 1rem;
  }

  .card-views-inline .views-detail {
    font-size: 0.65rem;
  }

  .card-views {
    display: none;
  }
  }

  /* モバイル: 曲名下の再生数を表示、右端の再生数を非表示 */
  .card-views-inline {
    font-size: 1rem !important;
  }

  .card-views {
    display: none;
  }

  .card-expand-panel {
    padding: 10px 10px 14px 10px;
  }

  .card-expand-panel .star {
    font-size: 1rem;
  }

  .card-expand-panel .rating-stats {
    font-size: 0.8rem;
  }

  .card-expand-panel .like-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .card-expand-panel .comment-header-row {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .ranking-card {
    grid-template-columns: 22px 54px 1fr;
    grid-template-areas: "rank thumb info";
    gap: 6px;
    padding: 6px 4px 6px 6px;
    min-height: 68px;
  }

  .card-rank {
    grid-area: rank;
    font-size: 0.8rem;
    min-width: 18px;
    align-self: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 0;
  }

  /* 480px以下でも「クリック☛」を表示 */
  .card-rank::after {
    font-size: 0.35rem;
  }

  .card-thumbnail-wrapper {
    grid-area: thumb;
  }

  .card-thumbnail {
    width: 70px;
    height: 70px;
  }

  .card-rating-under-thumb {
    font-size: 0.5rem;
  }

  .card-info {
    grid-area: info;
  }

  /* 480px以下：評価行をコンパクトに */
  .card-rating-row {
    gap: 3px;
  }

  .star-rating-compact .star {
    font-size: 0.5rem;
  }

  .card-rating-row .rating-score {
    font-size: 0.6rem;
  }

  .card-rating-row .rating-count {
    font-size: 0.5rem;
  }

  /* 480px以下: いいねボタンを更にコンパクトに */
  .like-btn-mini {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  .like-btn-mini .count {
    font-size: 0.6rem;
  }

  /* 480px以下: 直近コメント */
  .card-recent-comments {
    font-size: 0.58rem;
  }

  .comment-btn-inline {
    font-size: 0.55rem;
    padding: 2px 5px;
    margin-left: 3px;
  }

  .card-song {
    font-size: 0.8rem;
  }

  .card-anime {
    font-size: 0.72rem;
  }

  .card-artist {
    font-size: 0.68rem;
  }

  .card-action-buttons {
    display: none;
  }

  .card-views {
    display: none;
  }

  .card-views-inline {
    font-size: 0.85rem !important;
  }

  .card-views-inline .views-main {
    font-size: 0.85rem;
  }

  .card-views-inline .views-detail {
    font-size: 0.55rem;
  }

  /* 480px以下: card-stats-miniを非表示 */
  .card-stats-mini {
    display: none;
  }

  /* 480px以下: 評価と再生数を横並び */
  .card-metrics-row {
    gap: 6px;
    margin-top: 2px;
  }

  .card-rating-inline {
    font-size: 0.65rem;
  }

  .card-rating-inline .star {
    font-size: 0.7rem;
  }
  
  /* 展開パネル内にボタンを表示 */
  .card-expand-panel .mobile-action-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .card-expand-panel .mobile-action-row .btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.8rem;
    text-align: center;
    background: rgba(0, 255, 255, 0.15);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 0;
    color: #00ffff;
    text-decoration: none;
  }
}

/* mobile-action-row グローバルスタイル（メディアクエリ外で確実に適用） */
.card-expand-panel .mobile-action-row {
  display: flex !important;
  gap: 8px;
  margin-bottom: 10px;
  justify-content: center;
}

.card-expand-panel .mobile-action-row .btn {
  flex: 0 0 auto;
  padding: 10px 20px !important;
  font-size: 0.85rem !important;
  text-align: center;
  background: rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 0;
  color: #00ffff;
  text-decoration: none;
  white-space: nowrap;
  min-width: 80px;
}

/* ========================================
   再生数横のアクションボタン（聴く・観る）
   モバイル表示用インラインボタン
   ======================================== */
.card-action-inline {
  display: none;  /* PCでは非表示 */
}

.card-action-inline .action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  background: rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
  color: #00ffff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.card-action-inline .action-link:hover {
  background: rgba(0, 255, 255, 0.3);
  transform: scale(1.1);
}

/* モバイル（768px以下）でインラインボタンを表示 */
@media (max-width: 768px) {
  .card-action-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
  }
}

/* 小さいモバイル（480px以下）でサイズ調整 */
@media (max-width: 480px) {
  .card-action-inline .action-link {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
}

/* ============================================
   🚀 パフォーマンス改善CSS ここまで
   ============================================ */

/* ============================================
  Google AdSense 広告対応（改善版）
  ============================================ */

/* 広告コンテナの基本スタイル */
.ad-container {
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
  padding: 0;
  overflow: hidden !important; /* 重要: はみ出し防止 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(15, 23, 42, 0.3);
  border-radius: 8px;
  min-height: 90px; /* 広告読み込み前のちらつき防止 */
  box-sizing: border-box !important;
}

/* 広告本体のスタイル制御 */
.ad-container .adsbygoogle,
.adsbygoogle {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ヘッダー下の広告 */
.ad-header {
  max-width: 970px;
  margin: 10px auto 20px;
}

/* コンテンツ内の広告 */
.ad-content {
  max-width: 728px;
  margin: 30px auto;
  padding: 10px;
}

/* サイドバー広告（PC表示のみ） */
.ad-sidebar {
  max-width: 336px;
  position: sticky;
  top: 20px;
  margin: 0 auto;
}

/* フッター上の広告 */
.ad-footer {
  max-width: 970px;
  margin: 30px auto 20px;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .ad-container {
    margin: 15px 5px !important; /* 左右に少しマージン */
    max-width: calc(100vw - 10px) !important;
    padding: 5px;
    min-height: 60px;
  }
  
  .ad-header,
  .ad-content,
  .ad-footer {
    max-width: 100% !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  
  /* モバイルで広告が画面外にはみ出すのを絶対に防ぐ */
  .ad-container,
  .ad-container .adsbygoogle,
  .ad-container ins,
  .adsbygoogle,
  ins.adsbygoogle {
    max-width: calc(100vw - 10px) !important;
    width: calc(100vw - 10px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: block !important;
  }
  
  /* 広告を含む親要素の制約 */
  .col-7,
  .col-5,
  .anime-detail-container,
  .main-card,
  .content-section,
  .control-panel,
  .controls-grid,
  .card-style,
  .button-grid,
  .metric-pills,
  .mobile-controls-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .container-fluid,
  main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 広告による横スクロール完全防止 */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* タブレット対応 */
@media (min-width: 768px) and (max-width: 991px) {
  .ad-container {
    max-width: 728px;
  }
  
  .ad-sidebar {
    display: none; /* タブレットではサイドバー広告を非表示 */
  }
}


  /* ============================================
    CSS Variables - 共通の色とサイズ定義
    ============================================ */
  :root {
    /* カラーパレット */
    --color-primary: #00ffff;
    --color-primary-dark: #008080;
    --color-bg-dark: #0f172a;
    --color-bg-mid: #1e293b;
    --color-bg-light: #334155;
    --color-text-light: #e2e8f0;
    --color-text-mid: #cbd5e1;
    --color-text-dark: #64748b;
    --color-dark-cyan: #005555;
    --color-mid-cyan: #003333;
    
    /* フォント */
    --font-primary: 'Orbitron', sans-serif;
    --font-mono: 'Courier New', monospace;
    
    /* サイズ */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    
    /* アニメーション */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
  }

  /* ============================================
    バナー横並びコンテナ - 番組表 & 新作アニメ紹介
    全幅100%で3:5の比率
    ============================================ */
  .banner-row-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin: 15px auto;
    padding: 0 15px;
    max-width: calc(100% - 30px);
    width: calc(100% - 30px);
    box-sizing: border-box;
    height: 52px;
    min-height: 52px; /* CLS防止 */
    contain: layout style; /* 再計算範囲制限 */
  }

  /* コンパクトバナー（5つ1行） */
  .banner-row-container.banner-row-compact {
    gap: 6px;
    margin: 8px auto;
    height: 36px;
    min-height: 36px; /* CLS防止 */
    max-width: 900px;
    align-items: stretch;
    contain: layout style; /* 再計算範囲制限 */
  }

  .banner-row-container.banner-row-compact .banner-item,
  .banner-row-container.banner-row-compact .anime-schedule-button.banner-item,
  .banner-row-container.banner-row-compact .new-anime-button.banner-item,
  .banner-row-container.banner-row-compact .ranking-2025-button.banner-item,
  .banner-row-container.banner-row-compact .ranking-recent-button.banner-item,
  .banner-row-container.banner-row-compact .comment-ranking-button.banner-item {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  .banner-row-container.banner-row-compact .banner-item .tv-icon,
  .banner-row-container.banner-row-compact .banner-item .trophy-icon,
  .banner-row-container.banner-row-compact .banner-item .new-icon,
  .banner-row-container.banner-row-compact .banner-item .clock-icon,
  .banner-row-container.banner-row-compact .banner-item .comment-icon {
    font-size: 0.9rem !important;
    margin-right: 4px !important;
  }

  .banner-row-container.banner-row-compact .banner-item:after {
    display: none !important;
  }

  .banner-row-container.banner-row-compact .banner-item .button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  .banner-row-container .banner-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
    border-radius: 8px !important;
    height: 52px;
  }

  /* 番組表: 3/8 = 37.5% */
  .banner-row-container .anime-schedule-button.banner-item {
    flex: 3 1 0;
    width: 37.5% !important;
    max-width: 37.5%;
    padding: 0 clamp(8px, 2vw, 30px);
    font-size: clamp(0.65rem, 2vw, 1.5rem);
  }

  .banner-row-container .anime-schedule-button.banner-item .tv-icon {
    font-size: clamp(0.7rem, 1.8vw, 1.5rem);
  }

  .banner-row-container .anime-schedule-button.banner-item:after {
    font-size: clamp(0.5rem, 1.2vw, 1rem);
    top: clamp(2px, 0.8vw, 8px);
    right: clamp(3px, 1vw, 12px);
  }

  /* 新作アニメ紹介: 5/8 = 62.5% */
  .banner-row-container .new-anime-button.banner-item {
    flex: 5 1 0;
    width: 62.5% !important;
    max-width: 62.5%;
    padding: 0 clamp(8px, 2vw, 30px);
    font-size: clamp(0.65rem, 2vw, 1.5rem);
  }

  .banner-row-container .new-anime-button.banner-item .new-icon {
    font-size: clamp(0.7rem, 1.8vw, 1.5rem);
  }

  .banner-row-container .new-anime-button.banner-item:after {
    font-size: clamp(0.5rem, 1.2vw, 1rem);
    top: clamp(2px, 0.8vw, 8px);
    right: clamp(3px, 1vw, 12px);
  }

  /* 2025年ランキングボタン - サイバーパンク風（左カラム用） */
  .ranking-2025-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 52px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #00d4ff, #0099ff, #6600ff, #cc00ff);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(0, 212, 255, 0.5),
      0 0 40px rgba(102, 0, 255, 0.3),
      0 0 60px rgba(204, 0, 255, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
  }

  /* コメントランキングボタン - グリーン/シアン系 */
  .comment-ranking-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 52px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff88, #00ccaa, #00aacc, #0088ff);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(0, 255, 136, 0.5),
      0 0 40px rgba(0, 170, 204, 0.3),
      0 0 60px rgba(0, 136, 255, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    animation: 
      commentShine 3s ease-in-out infinite,
      commentGlow 2s ease-in-out infinite alternate;
  }

  .comment-ranking-button:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transform: rotate(45deg);
    animation: shine 2.5s linear infinite;
  }

  .comment-ranking-button:hover {
    transform: scale(1.08) rotate(-1deg);
    box-shadow: 
      0 0 30px rgba(0, 255, 136, 0.8),
      0 0 60px rgba(0, 170, 204, 0.5),
      0 0 90px rgba(0, 136, 255, 0.3);
  }

  .comment-ranking-button:active {
    transform: scale(0.95);
  }

  .comment-ranking-button .comment-icon {
    font-size: 26px;
    margin-right: 8px;
    animation: commentBounce 1.5s ease-in-out infinite;
  }

  .comment-ranking-button .button-text {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  @keyframes commentShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes commentGlow {
    from {
      box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.5),
        0 0 40px rgba(0, 170, 204, 0.3),
        0 0 60px rgba(0, 136, 255, 0.2);
    }
    to {
      box-shadow: 
        0 0 35px rgba(0, 255, 136, 0.8),
        0 0 70px rgba(0, 170, 204, 0.5),
        0 0 100px rgba(0, 136, 255, 0.3);
    }
  }

  @keyframes commentBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  /* ユーザーランキングボタン - ゴールド/クラウン系 */
  .user-ranking-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 52px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ffd700, #ffb347, #ff8c00, #ffd700);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(255, 215, 0, 0.5),
      0 0 40px rgba(255, 179, 71, 0.3),
      0 0 60px rgba(255, 140, 0, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    animation: 
      userRankingShine 3s ease-in-out infinite,
      userRankingGlow 2s ease-in-out infinite alternate;
  }

  .user-ranking-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: userRankingShimmer 2s ease-in-out infinite;
  }

  .user-ranking-button:hover {
    transform: scale(1.05);
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.7),
      0 0 60px rgba(255, 179, 71, 0.5),
      0 0 90px rgba(255, 140, 0, 0.3);
  }

  .user-ranking-button:active {
    transform: scale(0.95);
  }

  .user-ranking-button .crown-icon {
    font-size: 16px;
    margin-right: 4px;
    animation: crownBounce 1.5s ease-in-out infinite;
  }

  .user-ranking-button .button-text {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  @keyframes userRankingShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes userRankingGlow {
    from {
      box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 179, 71, 0.3),
        0 0 60px rgba(255, 140, 0, 0.2);
    }
    to {
      box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 50px rgba(255, 179, 71, 0.4),
        0 0 70px rgba(255, 140, 0, 0.3);
    }
  }

  @keyframes userRankingShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
  }

  @keyframes crownBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  /* 直近X年ランキングボタン - オレンジ/イエロー系 */
  .ranking-recent-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 52px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ff9500, #ff6600, #ff3300, #ff0066);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(255, 149, 0, 0.5),
      0 0 40px rgba(255, 102, 0, 0.3),
      0 0 60px rgba(255, 0, 102, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    animation: 
      recentShine 3s ease-in-out infinite,
      recentGlow 2s ease-in-out infinite alternate;
  }

  .ranking-recent-button:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transform: rotate(45deg);
    animation: shine 2.5s linear infinite;
  }

  .ranking-recent-button:hover {
    transform: scale(1.08) rotate(1deg);
    box-shadow: 
      0 0 30px rgba(255, 149, 0, 0.8),
      0 0 60px rgba(255, 102, 0, 0.5),
      0 0 90px rgba(255, 0, 102, 0.3);
  }

  .ranking-recent-button:active {
    transform: scale(0.95);
  }

  .ranking-recent-button .clock-icon {
    font-size: 26px;
    margin-right: 8px;
    animation: clockPulse 1.5s ease-in-out infinite;
  }

  .ranking-recent-button .button-text {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  @keyframes recentShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes recentGlow {
    from {
      box-shadow: 
        0 0 20px rgba(255, 149, 0, 0.5),
        0 0 40px rgba(255, 102, 0, 0.3),
        0 0 60px rgba(255, 0, 102, 0.2);
    }
    to {
      box-shadow: 
        0 0 35px rgba(255, 149, 0, 0.8),
        0 0 70px rgba(255, 102, 0, 0.5),
        0 0 100px rgba(255, 0, 102, 0.3);
    }
  }

  @keyframes clockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

  /* バナー内のranking-recent-buttonとcomment-ranking-button */
  .banner-row-container .ranking-recent-button.banner-item,
  .banner-row-container .comment-ranking-button.banner-item {
    flex: 1 1 0;
    height: 52px;
    margin: 0 !important;
    padding: 0 clamp(8px, 2vw, 30px);
    font-size: clamp(0.65rem, 2vw, 1.2rem);
  }

  .banner-row-container .ranking-recent-button.banner-item .clock-icon,
  .banner-row-container .comment-ranking-button.banner-item .comment-icon {
    font-size: clamp(0.7rem, 1.8vw, 1.3rem);
    margin-right: 4px;
  }

  .banner-row-container .ranking-recent-button.banner-item:hover,
  .banner-row-container .comment-ranking-button.banner-item:hover {
    transform: scale(1.02);
  }

  /* controls-grid-inline: 右側カラムのバナー下に配置用 */
  .controls-grid-inline {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    flex-direction: unset !important;
    gap: 12px !important;
    margin: 15px 0 !important;
    padding: 0 !important;
  }

  .controls-grid-inline .control-panel {
    margin-bottom: 0 !important;
  }
  
  /* 期間と検索の横並びグループ（PC用） */
  .period-search-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
  }
  
  .period-search-row .period-section,
  .period-search-row .search-section {
    flex: 1 1 0;
  }
  
  .period-search-row .search-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  /* 指標と表示件数の横並びグループ（PC用） */
  .metric-count-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
  }
  
  .metric-count-row .metric-section,
  .metric-count-row .count-section {
    flex: 1 1 0;
  }
  
  .metric-count-row .metric-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .metric-count-row .mobile-limit-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
  }

  @media (max-width: 768px) {
    .controls-grid-inline {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
    
    .controls-grid-inline .control-panel {
      padding: 8px !important;
    }
    
    .controls-grid-inline .panel-title {
      font-size: 11px !important;
      margin-bottom: 6px !important;
    }
    
    .controls-grid-inline .modern-select {
      font-size: 11px !important;
      max-height: 60px !important;
      min-height: 50px !important;
    }
    
    .controls-grid-inline .metric-pill {
      padding: 4px 8px !important;
      font-size: 10px !important;
    }
    
    /* ★★★ ランキング種類パネルを横並び ★★★ */
    .ranking-types-container {
      display: flex !important;
      flex-direction: row !important;
      gap: 4px !important;
      overflow: visible !important;
      padding-bottom: 5px !important;
    }
    
    .ranking-types-container .ranking-type-panel {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 5px !important;
      overflow: visible !important;
    }
    
    .ranking-types-container .panel-title {
      font-size: 7px !important;
      margin-bottom: 4px !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      word-break: break-word !important;
      line-height: 1.2 !important;
      min-height: 2.4em !important;
    }
    
    /* ボタンを横並びに維持・横書き */
    .ranking-types-container .button-grid {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 2px !important;
      overflow: visible !important;
    }
    
    .ranking-types-container .modern-btn {
      padding: 3px 2px !important;
      font-size: 0.5rem !important;
      min-height: auto !important;
      flex: 1 1 0 !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
    }
    
    /* 特別企画は2×2グリッド（モバイル） */
    #typeGroup4.button-grid {
      flex-wrap: wrap !important;
    }
    
    #typeGroup4 .modern-btn {
      white-space: normal !important;
      word-break: keep-all !important;
      overflow-wrap: break-word !important;
      text-overflow: clip !important;
      min-height: 28px !important;
      flex: 1 1 45% !important;
      line-height: 1.1 !important;
    }
    
    /* 全コントロールを1つのパネルに */
    .all-controls-panel {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      padding: 6px !important;
    }
    
    /* 期間と検索の横並び */
    .period-search-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 8px !important;
    }
    
    .period-search-row .period-section {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }
    
    .period-search-row .search-section {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
    }
    
    /* 検索コンテナ - 横並びに変更 */
    .period-search-row .search-container {
      flex: 1 !important;
      display: flex !important;
      flex-direction: row !important;
      gap: 4px !important;
      align-items: center !important;
    }
    
    .period-search-row .modern-search-input {
      flex: 1 !important;
      min-width: 0 !important;
      font-size: 8px !important;
      padding: 4px 6px !important;
      box-sizing: border-box !important;
    }
    
    .period-search-row .search-btn {
      flex-shrink: 0 !important;
      padding: 4px 8px !important;
      font-size: 8px !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }
    
    /* 指標と表示件数の横並び */
    .metric-count-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 8px !important;
    }
    
    .metric-count-row .metric-section,
    .metric-count-row .count-section {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }
    
    .metric-count-row .panel-title {
      font-size: 7px !important;
      margin-bottom: 3px !important;
    }
    
    /* 指標ボタン - 横並び（再生数・GOOD数・コメント数） */
    .metric-count-row .metric-pills {
      display: flex !important;
      flex-direction: row !important;
      gap: 2px !important;
    }
    
    /* 表示件数ボタン - 横並び */
    .metric-count-row .mobile-limit-pills {
      display: flex !important;
      flex-direction: row !important;
      gap: 2px !important;
    }
    
    /* 指標・表示件数ボタンのスタイル - デイリー等と同じサイズ */
    .metric-count-row .metric-pill {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 3px 2px !important;
      font-size: 7px !important;
      text-align: center !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    .banner-row-container .ranking-recent-button.banner-item,
    .banner-row-container .comment-ranking-button.banner-item {
      height: 44px;
      font-size: clamp(0.55rem, 3vw, 0.9rem);
    }
    
    .banner-row-container .ranking-recent-button.banner-item .clock-icon,
    .banner-row-container .comment-ranking-button.banner-item .comment-icon {
      font-size: clamp(0.6rem, 3vw, 1rem);
    }
  }

  @media (max-width: 480px) {
    .controls-grid-inline {
      grid-template-columns: 1fr !important;
      gap: 6px !important;
    }
    
    /* ★★★ ランキング種類パネルを横並び（480px以下） ★★★ */
    .ranking-types-container {
      display: flex !important;
      flex-direction: row !important;
      gap: 3px !important;
      overflow: visible !important;
      padding-bottom: 5px !important;
    }
    
    .ranking-types-container .ranking-type-panel {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 4px !important;
      overflow: visible !important;
    }
    
    .ranking-types-container .panel-title {
      font-size: 6px !important;
      margin-bottom: 3px !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      word-break: break-word !important;
      line-height: 1.2 !important;
      min-height: 2.4em !important;
    }
    
    .ranking-types-container .modern-btn {
      padding: 2px 2px !important;
      font-size: 6px !important;
      overflow: visible !important;
      box-sizing: border-box !important;
    }
    
    /* 全コントロールを1つのパネルに */
    .all-controls-panel {
      display: flex !important;
      flex-direction: column !important;
      gap: 5px !important;
      padding: 5px !important;
    }
    
    /* 期間と検索の横並び */
    .period-search-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 6px !important;
    }
    
    .period-search-row .period-section,
    .period-search-row .search-section {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }
    
    .period-search-row .modern-select {
      font-size: 8px !important;
      max-height: 50px !important;
      min-height: 40px !important;
    }
    
    /* 検索コンテナ - 横並び */
    .period-search-row .search-container {
      display: flex !important;
      flex-direction: row !important;
      gap: 3px !important;
      align-items: center !important;
    }
    
    .period-search-row .modern-search-input {
      flex: 1 !important;
      min-width: 0 !important;
      font-size: 7px !important;
      padding: 3px 4px !important;
      box-sizing: border-box !important;
    }
    
    .period-search-row .search-btn {
      flex-shrink: 0 !important;
      font-size: 7px !important;
      padding: 3px 6px !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }
    
    /* 指標と表示件数の横並び */
    .metric-count-row {
      display: flex !important;
      flex-direction: row !important;
      gap: 6px !important;
    }
    
    .metric-count-row .metric-section,
    .metric-count-row .count-section {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }
    
    .metric-count-row .panel-title {
      font-size: 6px !important;
      margin-bottom: 2px !important;
    }
    
    /* 指標ボタン - 横並び */
    .metric-count-row .metric-pills {
      display: flex !important;
      flex-direction: row !important;
      gap: 2px !important;
    }
    
    /* 表示件数 - 横並び */
    .metric-count-row .mobile-limit-pills {
      display: flex !important;
      flex-direction: row !important;
      gap: 2px !important;
    }
    
    /* 指標・表示件数ボタンのスタイル - デイリー等と同じサイズ */
    .metric-count-row .metric-pill {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 2px 2px !important;
      font-size: 6px !important;
      text-align: center !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  /* PC表示時：バナー内の2025年ランキングボタン */
  .banner-row-container .ranking-2025-button.banner-item.banner-2025 {
    flex: 1 1 0;
    height: 52px;
    padding: 0 15px;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  
  .banner-row-container .ranking-2025-button.banner-item .ranking-text-2line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  
  .banner-row-container .ranking-2025-button.banner-item .ranking-text-2line .line1,
  .banner-row-container .ranking-2025-button.banner-item .ranking-text-2line .line2 {
    display: inline;
  }
  
  .banner-row-container .ranking-2025-button.banner-item .ranking-text-inline {
    display: inline;
    margin-left: 5px;
  }
  
  .banner-row-container .ranking-2025-button.banner-item .trophy-icon {
    font-size: 1.1rem;
  }
  
  /* PC表示時：3アイテムバナーは横並び */
  .banner-row-3items {
    display: flex;
    flex-direction: row;
  }

  .ranking-2025-button:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent
    );
    transform: rotate(45deg);
    animation: shine 3s linear infinite;
  }

  .ranking-2025-button:after {
    content: '✨';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    animation: sparkle 1.5s ease-in-out infinite;
  }

  .ranking-2025-button:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 
      0 0 30px rgba(0, 212, 255, 0.8),
      0 0 60px rgba(102, 0, 255, 0.5),
      0 0 90px rgba(204, 0, 255, 0.3);
  }

  .ranking-2025-button:active {
    transform: scale(0.95);
  }

  .trophy-icon {
    font-size: 28px;
    animation: trophyGlow 2s ease-in-out infinite alternate;
  }

  /* 2025年ランキングボタンのテキスト構造 */
  .ranking-2025-button .ranking-text {
    display: inline;
  }

  .ranking-2025-button .ranking-year,
  .ranking-2025-button .ranking-title,
  .ranking-2025-button .ranking-subtitle {
    display: inline;
  }

  .ranking-2025-button .ranking-year::after,
  .ranking-2025-button .ranking-title::after {
    content: ' ';
  }

  .ultra-glow {
    animation: 
      shineMove 3s ease-in-out infinite,
      cyberGlow 2s ease-in-out infinite alternate,
      wiggle 2.5s ease-in-out infinite;
  }

  @keyframes trophyGlow {
    from {
      filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
    }
    to {
      filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
    }
  }

  @keyframes cyberGlow {
    from {
      box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 40px rgba(102, 0, 255, 0.3),
        0 0 60px rgba(204, 0, 255, 0.2);
    }
    to {
      box-shadow: 
        0 0 35px rgba(0, 212, 255, 0.8),
        0 0 70px rgba(102, 0, 255, 0.5),
        0 0 100px rgba(204, 0, 255, 0.3);
    }
  }

  /* PC表示時のバナー調整（769px以上） */
  @media (min-width: 769px) {
    .banner-row-container {
      gap: 15px;
      margin: 15px auto 15px auto;
      padding: 0 15px;
      height: 56px;
    }

    .banner-row-container .banner-item {
      height: 56px !important;
    }

    .banner-row-container .anime-schedule-button.banner-item {
      padding: 0 25px;
      font-size: 1.3rem;
      height: 56px !important;
    }

    .banner-row-container .anime-schedule-button.banner-item .tv-icon {
      font-size: 1.3rem;
    }

    .banner-row-container .anime-schedule-button.banner-item:after {
      font-size: 1rem;
      top: 8px;
      right: 12px;
    }

    .banner-row-container .new-anime-button.banner-item {
      padding: 0 25px;
      font-size: 1.3rem;
      height: 56px !important;
    }

    .banner-row-container .new-anime-button.banner-item .new-icon {
      font-size: 1.3rem;
    }

    .banner-row-container .new-anime-button.banner-item:after {
      font-size: 1rem;
      top: 8px;
      right: 12px;
    }

    .ranking-2025-button {
      padding: 0 28px;
      font-size: 1.3rem;
      height: 56px !important;
    }

    .ranking-2025-button:after {
      font-size: 1.1rem;
      top: 8px;
      right: 12px;
    }

    .trophy-icon {
      font-size: 1.1rem;
    }
  }

  /* 大画面PC (1200px以上) */
  @media (min-width: 1200px) {
    .banner-row-container {
      gap: 20px;
      height: 60px;
    }

    .banner-row-container .banner-item {
      height: 60px !important;
    }

    .banner-row-container .anime-schedule-button.banner-item {
      padding: 0 35px;
      font-size: 1.5rem;
      height: 60px !important;
    }

    .banner-row-container .anime-schedule-button.banner-item .tv-icon {
      font-size: 1.5rem;
    }

    .banner-row-container .anime-schedule-button.banner-item:after {
      font-size: 1.1rem;
      top: 10px;
      right: 15px;
    }

    .banner-row-container .new-anime-button.banner-item {
      padding: 0 35px;
      font-size: 1.5rem;
      height: 60px !important;
    }

    .banner-row-container .new-anime-button.banner-item .new-icon {
      font-size: 1.5rem;
    }

    .banner-row-container .new-anime-button.banner-item:after {
      font-size: 1.1rem;
      top: 10px;
      right: 15px;
    }

    .ranking-2025-button {
      height: 60px !important;
    }
  }

  /* タブレット・モバイル（768px以下） */
  @media (max-width: 768px) {
    
    /* モバイル時：3アイテムバナー行も横並びを維持 */
    .banner-row-3items {
      flex-direction: row !important;
      gap: 4px !important;
    }
    
    .banner-row-3items .banner-item {
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }
    
    /* モバイル時：バナー内の2025年ランキングボタン */
    .banner-row-container .ranking-2025-button.banner-item.banner-2025 {
      padding: 6px 4px !important;
      font-size: 0.6rem !important;
      border-radius: 6px !important;
      height: auto !important;
      min-height: 40px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
    
    /* 2行表示用スタイル */
    .banner-row-container .ranking-2025-button.banner-item .ranking-text-2line {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      line-height: 1.2 !important;
    }
    
    .banner-row-container .ranking-2025-button.banner-item .ranking-text-2line .line1 {
      font-size: 0.6rem !important;
      font-weight: bold !important;
    }
    
    .banner-row-container .ranking-2025-button.banner-item .ranking-text-2line .line2 {
      font-size: 0.55rem !important;
    }
    
    .banner-row-container .ranking-2025-button.banner-item .ranking-text-inline {
      display: inline !important;
      font-size: 0.55rem !important;
    }
    
    .banner-row-container .ranking-2025-button.banner-item .trophy-icon {
      font-size: 0.7rem !important;
      margin-right: 2px !important;
    }
    
    .banner-row-container {
      gap: 6px;
      margin: 10px auto;
      padding: 0 5px;
    }

    .banner-row-container .anime-schedule-button.banner-item {
      padding: 8px 10px;
      font-size: 0.7rem;
      border-radius: 8px;
    }

    .banner-row-container .anime-schedule-button.banner-item .tv-icon {
      font-size: 0.8rem;
    }

    .banner-row-container .anime-schedule-button.banner-item:after {
      font-size: 0.55rem;
      top: 3px;
      right: 5px;
    }

    .banner-row-container .new-anime-button.banner-item {
      padding: 8px 10px !important;
      font-size: 0.7rem !important;
      border-radius: 8px !important;
    }

    .banner-row-container .new-anime-button.banner-item .new-icon {
      font-size: 0.8rem !important;
    }

    .banner-row-container .new-anime-button.banner-item:after {
      font-size: 0.55rem !important;
      top: 3px !important;
      right: 5px !important;
    }

    /* モバイル用 2025年ランキングボタン - 3行表示 */
    .ranking-2025-button {
      padding: 10px 15px;
      font-size: 0.75rem;
      border-radius: 8px;
      white-space: normal !important;
      line-height: 1.2;
    }

    .ranking-2025-button .button-text {
      flex-direction: row;
      align-items: center;
      gap: 5px;
    }

    .ranking-2025-button .ranking-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.1;
    }

    .ranking-2025-button .ranking-year,
    .ranking-2025-button .ranking-title,
    .ranking-2025-button .ranking-subtitle {
      display: block;
    }

    .ranking-2025-button .ranking-year::after,
    .ranking-2025-button .ranking-title::after {
      content: none;
    }

    .ranking-2025-button:after {
      font-size: 0.7rem;
      top: 3px;
      right: 5px;
    }

    .trophy-icon {
      font-size: 0.9rem;
    }
  }

  /* 小画面モバイル（480px以下） */
  @media (max-width: 480px) {
    .banner-row-container {
      gap: 5px;
      margin: 8px auto;
      padding: 0 3px;
    }

    .banner-row-container .anime-schedule-button.banner-item {
      padding: 6px 8px;
      font-size: 0.6rem;
      border-radius: 8px;
    }

    .banner-row-container .anime-schedule-button.banner-item .tv-icon {
      font-size: 0.7rem;
    }

    .banner-row-container .anime-schedule-button.banner-item:after {
      display: none;
    }

    .banner-row-container .new-anime-button.banner-item {
      padding: 6px 8px !important;
      font-size: 0.6rem !important;
      border-radius: 8px !important;
    }

    .banner-row-container .new-anime-button.banner-item .new-icon {
      font-size: 0.7rem !important;
    }

    .banner-row-container .new-anime-button.banner-item:after {
      display: none !important;
    }

    .ranking-2025-button {
      padding: 8px 12px;
      font-size: 0.6rem;
      border-radius: 8px;
    }

    .ranking-2025-button .ranking-text {
      font-size: 0.55rem;
    }

    .ranking-2025-button:after {
      display: none;
    }

    .trophy-icon {
      font-size: 0.7rem;
    }
  }

  /* 極小画面モバイル（360px以下） */
  @media (max-width: 360px) {
    .banner-row-container {
      gap: 3px;
      padding: 0 2px;
    }

    .banner-row-container .banner-item {
      white-space: normal !important;
    }

    .banner-row-container .anime-schedule-button.banner-item {
      padding: 4px 5px;
      font-size: 0.5rem;
      border-radius: 10px;
      min-width: 32% !important;
    }

    .banner-row-container .anime-schedule-button.banner-item .tv-icon {
      font-size: 0.55rem;
    }

    .banner-row-container .new-anime-button.banner-item {
      padding: 4px 5px !important;
      font-size: 0.5rem !important;
      border-radius: 10px !important;
      min-width: 58% !important;
    }

    .banner-row-container .new-anime-button.banner-item .new-icon {
      font-size: 0.55rem !important;
    }

    .ranking-2025-button {
      padding: 6px 10px;
      font-size: 0.5rem;
      border-radius: 8px;
    }

    .ranking-2025-button .ranking-text {
      font-size: 0.45rem;
    }

    .trophy-icon {
      font-size: 0.6rem;
    }
  }

  /* iPhone SE / iPhone 4 等の超小画面（320px以下） */
  @media (max-width: 320px) {
    .banner-row-container {
      gap: 2px;
      padding: 0 1px;
      flex-wrap: nowrap !important;
    }

    .banner-row-container .banner-item {
      min-width: 0 !important;
      flex-shrink: 1 !important;
      overflow: hidden;
    }

    .banner-row-container .anime-schedule-button.banner-item {
      flex: 3 1 30% !important;
      min-width: 30% !important;
      max-width: 38% !important;
      padding: 4px 3px;
      font-size: 0.4rem;
      border-radius: 8px;
    }

    .banner-row-container .anime-schedule-button.banner-item .tv-icon {
      font-size: 0.45rem;
    }

    .banner-row-container .anime-schedule-button.banner-item .button-text {
      gap: 1px;
    }

    .banner-row-container .new-anime-button.banner-item {
      flex: 5 1 55% !important;
      min-width: 55% !important;
      max-width: 68% !important;
      padding: 4px 3px !important;
      font-size: 0.4rem !important;
      border-radius: 8px !important;
    }

    .banner-row-container .new-anime-button.banner-item .new-icon {
      font-size: 0.45rem !important;
    }

    .banner-row-container .new-anime-button.banner-item .button-text {
      gap: 1px !important;
    }

    .ranking-2025-button {
      padding: 5px 8px;
      font-size: 0.45rem;
      border-radius: 12px;
    }

    .ranking-2025-button .ranking-text {
      font-size: 0.4rem;
    }

    .trophy-icon {
      font-size: 0.5rem;
    }
  }

  /* ============================================
    フェードインアニメーション（汎用）
    ============================================ */
  .fade-in-card {
    opacity: 1; /* 修正: opacity: 0は危険 */
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  
  .fade-in-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 既に表示されている要素（初期表示分）はアニメーション不要 */
  .point-card:nth-child(-n+0) {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* ============================================
    ベーススタイル
    ============================================ */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color: #e0e0e0;
    font-family: var(--font-primary);
    font-size: 0.7rem;
  }

  html, body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important;
    min-height: 100vh;
  }

  main, 
  main.container-fluid, 
  .container-fluid, 
  .container-fluid > .row,
  .row, 
  .col-5, 
  .col-7,
  #leftColumn1 {
    background: transparent !important;
  }

  /* 左カラムのz-index（カードコンテナより上に） */
  .col-5,
  #leftColumn1,
  #leftColumn2 {
    position: relative;
    z-index: 10;
  }

  /* ============================================
    PC表示時の全体0.9倍縮小（769px以上）
    ============================================ */
  @media (min-width: 769px) {
    html {
      font-size: 90% !important;
    }
    
    body {
      font-size: 0.63rem;
    }
    
    /* サイトタイトル */
    .site-title {
      font-size: clamp(1.08rem, 2.7vw, 2.7rem) !important;
    }
    
    /* 見出し */
    h2 {
      font-size: clamp(0.77rem, 1.8vw, 2.25rem) !important;
      margin-top: 1.35rem;
      margin-bottom: 0.9rem;
    }
    
    /* コントロールパネル */
    .control-panel {
      padding: 13.5px !important;
      margin-bottom: 13.5px !important;
    }
    
    .panel-title {
      font-size: 0.81rem !important;
      margin-bottom: 9px !important;
    }
    
    .panel-description {
      font-size: 0.68rem !important;
    }
    
    /* ボタン類 */
    .modern-btn {
      padding: 1px 4px !important;
      font-size: 0.6rem !important;
      line-height: 1.1 !important;
    }
    
    .button-grid {
      gap: 3px !important;
    }
    
    .metric-pill {
      padding: 1px 3px !important;
      font-size: 0.6rem !important;
      line-height: 1.1 !important;
      min-height: auto !important;
    }
    
    .metric-pills {
      gap: 2px !important;
    }
    
    /* 左カラムのボタン余白をさらに削減 */
    #leftColumn1 .metric-pill,
    #leftColumn2 .metric-pill,
    .col-5 .metric-pill {
      padding: 4px 6px !important;
      font-size: 0.6rem !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      line-height: 1.2 !important;
      min-height: auto !important;
      margin: 1px !important;
      flex: 1 1 auto !important;
      text-align: center !important;
    }
    
    #leftColumn1 .metric-pills,
    #leftColumn2 .metric-pills,
    .col-5 .metric-pills {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 2px !important;
      margin: 0 !important;
    }
    
    /* セレクトボックス */
    .modern-select {
      padding: 7px 11px !important;
      font-size: 0.68rem !important;
    }
    
    /* 検索 */
    .modern-search-input {
      padding: 7px 11px !important;
      font-size: 0.68rem !important;
    }
    
    .search-btn {
      padding: 7px 14px !important;
      font-size: 0.68rem !important;
    }
    
    /* 番組表・新作アニメボタン */
    .anime-schedule-button {
      padding: 13.5px 27px !important;
      font-size: 1.5rem !important;
    }
    
    .new-anime-button {
      padding: 13.5px 27px !important;
      font-size: 1.5rem !important;
    }
    
    .tv-icon,
    .new-icon {
      font-size: 1.24rem !important;
    }
    
    /* ランキングテーブル */
    .ranking-table th,
    .ranking-table td {
      padding: 7px 9px !important;
    }
    
    .ranking-table th {
      font-size: 14px !important;
    }
    
    .ranking-table td {
      font-size: 0.6rem !important;
    }
    
    .metric-number {
      font-size: 0.81rem !important;
    }
    
    /* チャートコンテナ */
    .chart-container {
      height: 360px !important;
      padding: 13.5px !important;
    }
    
    /* カードスタイル */
    .card-style {
      padding: 13.5px !important;
    }
    
    /* 左カラム */
    #leftColumn1,
    #leftColumn2 {
      padding: 9px !important;
    }
    
    /* サイドバー */
    .anime-sidebar {
      padding: 9px !important;
    }
    
    .sidebar-anime-card {
      margin-bottom: 11px !important;
    }
    
    .sidebar-anime-title {
      font-size: 0.63rem !important;
      padding: 7px !important;
    }
    
    .sidebar-anime-info {
      padding: 4.5px !important;
    }
    
    /* フッター */
    footer {
      padding: 18px 0 !important;
      font-size: 0.68rem !important;
    }
    
    footer p {
      font-size: 0.86rem !important;
    }
    
    footer a {
      font-size: 0.68rem !important;
    }
    
    /* ============================================
       アニメ詳細ページ PC用0.9倍縮小
       ============================================ */
    
    /* メインカード */
    .main-card {
      max-width: 1080px;
    }
    
    /* 画像オーバーレイ */
    .image-overlay {
      padding: 1.8rem;
    }
    
    .image-title {
      font-size: clamp(1.35rem, 3.6vw, 2.7rem) !important;
    }
    
    /* コンテンツセクション */
    .content-section {
      padding: 1.8rem;
    }
    
    .cyber-line {
      margin: 1.8rem 0;
    }
    
    /* セクションタイトル・説明文 */
    .section-title {
      font-size: clamp(1.08rem, 2.7vw, 1.62rem) !important;
      margin-bottom: 1.35rem;
    }
    
    .description-text {
      font-size: clamp(0.81rem, 1.8vw, 0.99rem) !important;
      line-height: 1.75;
      margin-bottom: 1.35rem;
    }
    
    /* ポイントグリッド */
    .points-grid {
      gap: 1.35rem;
      margin-bottom: 1.8rem;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    }
    
    /* ポイントカード */
    .point-card {
      padding: 1.35rem;
    }
    
    .point-title {
      font-size: clamp(0.9rem, 2.25vw, 1.17rem) !important;
      margin-bottom: 0.72rem;
    }
    
    .point-text {
      font-size: clamp(0.77rem, 1.62vw, 0.9rem) !important;
      line-height: 1.65;
    }
    
    /* ボタンセクション */
    .button-section h3,
    .schedule-section h3 {
      font-size: clamp(0.99rem, 2.25vw, 1.35rem) !important;
      margin-bottom: 1.35rem;
    }
    
    /* Amazonボタン */
    .amazon-btn {
      padding: 0.72rem 1.35rem;
      font-size: clamp(0.81rem, 1.8vw, 0.9rem) !important;
    }
    
    /* Amazonカード */
    .amazon-card {
      padding: 1.35rem !important;
      gap: 1.35rem !important;
    }
    
    .amazon-card .point-title {
      font-size: 0.9rem !important;
    }
    
    .amazon-card .point-text {
      font-size: 0.81rem !important;
    }
    
    .amazon-card img {
      max-width: 270px !important;
      max-height: 315px !important;
    }
    
    .amazon-icon {
      font-size: 1.8rem !important;
    }
    
    .amazon-link {
      padding: 0.63rem 1.08rem !important;
      font-size: 0.81rem !important;
    }
    
    /* スケジュールアイテム */
    .schedule-item {
      padding: 1.35rem;
    }
    
    .schedule-item h4 {
      font-size: 0.99rem !important;
      margin-bottom: 0.72rem;
    }
    
    .schedule-item p {
      font-size: 0.81rem !important;
      line-height: 1.55;
    }
    
    /* ============================================
       新作アニメ一覧ページ PC用0.9倍縮小
       ============================================ */
    
    .new-anime-container {
      padding: 1.35rem;
    }
    
    .anime-grid {
      gap: 1.35rem;
      grid-template-columns: repeat(5, 1fr); /* 5枚固定 */
      max-width: 1050px; /* 5カラム最大幅を制限 */
    }
    
    .anime-item {
      border-radius: 11px;
    }
    
    .anime-title-overlay {
      padding: 0.9rem;
    }
    
    .anime-title {
      font-size: 0.99rem !important;
    }
    
    .detail-link {
      font-size: 0.72rem !important;
      padding: 0.54rem 0.9rem;
    }
    
    /* ============================================
       番組表ページ PC用0.9倍縮小
       ============================================ */
    
    .schedule-container {
      padding: 1.35rem;
    }
    
    .schedule-header h1 {
      font-size: 1.62rem !important;
    }
    
    .schedule-grid {
      gap: 0.9rem;
    }
    
    .day-column {
      min-width: 180px;
    }
    
    .day-header {
      font-size: 0.81rem !important;
      padding: 0.72rem;
    }
    
    .program-item {
      padding: 0.72rem;
      font-size: 0.68rem !important;
    }
    
    .program-time {
      font-size: 0.63rem !important;
    }
    
    .program-title {
      font-size: 0.72rem !important;
    }
  }

  /* ============================================
    タイポグラフィ
    ============================================ */
  .site-title,
  h2 {
    font-family: var(--font-primary);
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8) !important;
    letter-spacing: 0.1em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
    display: block;
  }

  .site-title {
    font-size: clamp(1.2rem, 3vw, 3rem) !important;
  }

  h2 {
    font-size: clamp(0.85rem, 2vw, 2.5rem) !important;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }


  /* ============================================
    アニメ詳細ページ - 中央揃えレイアウト
    ============================================ */
  
  /* アニメ詳細ページ用にbodyとhtmlをリセット */
  body:has(.anime-detail-container),
  html:has(.anime-detail-container) {
    overflow-x: hidden !important;
  }
  
  /* アニメ詳細ページの親要素を全幅にリセット */
  main.container-fluid:has(.anime-detail-container),
  .container-fluid:has(.anime-detail-container) {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .row:has(.anime-detail-container) {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .col-7:has(.anime-detail-container) {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* アニメ詳細ページの左カラムを非表示 */
  .row:has(.anime-detail-container) .col-5,
  .row:has(.anime-detail-container) > .d-none.d-lg-block,
  .row:has(.anime-detail-container) > .col-5.d-lg-block {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
  }
  
  .anime-detail-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto !important;
    padding: 2rem 1rem;
    overflow: visible;
    box-sizing: border-box;
  }

  /* anime-detail-container内の広告対策 */
  .anime-detail-container .adsbygoogle,
  .anime-detail-container ins.adsbygoogle,
  .anime-detail-container .main-card {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .anime-detail-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 100%;
    /* ちらつき防止のための安定化 */
    min-height: 100vh;
  }

  /* ============================================
    アニメ詳細ページ - 左右サイドバー（レスポンシブ対応）
    ============================================ */
  .anime-sidebar {
    width: 280px;
    display: flex; /* PC表示時は最初から表示（ちらつき防止） */
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
    overflow: visible;
    /* ちらつき防止のための安定化 */
    flex-shrink: 0;
    min-width: 260px;
  }
  
  /* タブレット（768px〜991px）: サイドバー非表示 */
  @media (min-width: 768px) and (max-width: 991px) {
    .anime-sidebar {
      display: none !important;
    }
  }

  /* スクロールバーのスタイル */
  .anime-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .anime-sidebar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 3px;
  }

  .anime-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 3px;
  }

  .anime-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.5);
  }

  /* 超大画面（1900px以上）: 両サイドバーを最大サイズで表示 */
  @media (min-width: 1900px) {
    .anime-sidebar {
      display: flex !important;
      width: 350px !important;
    }
    
    .anime-detail-container {
      max-width: 1900px;
    }
  }

  /* 大画面（1700-1899px）: 両サイドバーを大きめに表示 */
  @media (min-width: 1700px) and (max-width: 1899px) {
    .anime-sidebar {
      display: flex !important;
      width: 320px !important;
    }
    
    .anime-detail-container {
      max-width: 1800px;
    }
  }

  /* 中大画面（1500-1699px）: 両サイドバーを標準サイズで表示 */
  @media (min-width: 1500px) and (max-width: 1699px) {
    .anime-sidebar {
      display: flex !important;
      width: 290px !important;
    }
  }

  /* 中画面（1300-1499px）: 両サイドバーを少し小さめに表示 */
  @media (min-width: 1300px) and (max-width: 1499px) {
    .anime-sidebar {
      display: flex !important;
      width: 260px !important;
    }
  }

  /* 小中画面（992-1299px）: 右サイドバーのみ表示 */
  @media (min-width: 992px) and (max-width: 1299px) {
    .anime-sidebar:first-of-type {
      display: none !important; /* 左サイドバーを非表示 */
    }
    
    .anime-sidebar:last-of-type {
      display: flex !important;
      width: 250px !important;
    }
  }

  .sidebar-anime-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    /* アニメーション・トランジションを完全無効化 */
    transition: none !important;
    transform: none !important;
    /* 高さの圧縮を防ぐ */
    flex-shrink: 0 !important;
  }

  .sidebar-anime-card:hover {
    border-color: var(--color-primary);
    box-shadow: 
      0 12px 35px rgba(0, 255, 255, 0.5),
      0 0 30px rgba(0, 255, 255, 0.3);
    /* ホバー時のtransformを無効化 */
    transform: none !important;
  }

  .sidebar-anime-thumbnail {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 177.78% !important; /* 9:16の縦長比率 (16/9 * 100%) */
    overflow: hidden !important;
    position: relative !important;
    background: rgba(0, 0, 0, 0.3);
  }

  .sidebar-anime-thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 画像のアニメーションを完全無効化 */
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  .sidebar-anime-card:hover .sidebar-anime-thumbnail img {
    /* ホバー時も画像は動かさない */
    transform: none !important;
  }

  .sidebar-anime-info {
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  }

  .sidebar-anime-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-normal);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }

  .sidebar-anime-card:hover .sidebar-anime-title {
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  }


  /* ============================================
    アニメ詳細ページ - サイドバー用ボタン
    ============================================ */
  
  /* ============================================
    アニメ詳細ページ - サイドバー用ボタン（TOPページと同じデザイン）
    ============================================ */
  
  /* サイドバー用番組表ボタン */
  .sidebar-schedule-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 15px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5);
    background-size: 400% 400%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(255, 0, 110, 0.5),
      0 0 40px rgba(131, 56, 236, 0.3),
      0 0 60px rgba(58, 134, 255, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 1.5rem;
  }

  .sidebar-schedule-button:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ff006e);
    background-size: 400% 400%;
    border-radius: 8px;
    z-index: -1;
    animation: gradientShift 3s ease-in-out infinite;
  }

  .sidebar-schedule-button:after {
    content: '✨';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 18px;
    animation: sparkle 1.5s ease-in-out infinite;
  }

  .sidebar-schedule-button:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: 
      0 0 30px rgba(255, 0, 110, 0.8),
      0 0 60px rgba(131, 56, 236, 0.5),
      0 0 90px rgba(58, 134, 255, 0.3);
  }

  .sidebar-schedule-button:active {
    transform: scale(0.95);
  }

  /* サイドバー用新作アニメボタン */
  .sidebar-new-anime-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 15px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ff4500, #ff1493);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 25px rgba(255, 215, 0, 0.6),
      0 0 50px rgba(255, 140, 0, 0.4),
      0 0 75px rgba(255, 69, 0, 0.3);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 1.5rem;
  }

  .sidebar-new-anime-button:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: rotate(45deg);
    animation: shine 3s linear infinite;
  }

  .sidebar-new-anime-button:after {
    content: '🎬';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 18px;
    animation: filmRoll 2s ease-in-out infinite;
  }

  .sidebar-new-anime-button:hover {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 
      0 0 35px rgba(255, 215, 0, 0.9),
      0 0 70px rgba(255, 140, 0, 0.6),
      0 0 105px rgba(255, 69, 0, 0.4);
  }

  .sidebar-new-anime-button:active {
    transform: scale(0.95);
  }

  /* PC表示のみ（1200px以上）でサイドバーボタンを表示 */
  @media (max-width: 1199px) {
    .sidebar-schedule-button,
    .sidebar-new-anime-button {
      display: none !important;
    }
  }

  /* ============================================
    サイドバー用のTOPページスタイルボタン（anime-schedule-button と new-anime-button のサイドバー版）
    ============================================ */
  
  /* サイドバー内での anime-schedule-button と new-anime-button のサイズ調整 */
  .anime-sidebar .sidebar-top-button {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
    white-space: nowrap;
    display: block;
    border-radius: 8px !important;
    box-sizing: border-box;
  }

  .anime-sidebar .sidebar-top-button .button-text {
    gap: 8px;
  }

  .anime-sidebar .sidebar-top-button .tv-icon,
  .anime-sidebar .sidebar-top-button .new-icon {
    font-size: 20px;
  }

  .anime-sidebar .sidebar-top-button:after {
    font-size: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* サイドバー幅に応じてフォントサイズを調整 */
  @media (min-width: 1900px) {
    .anime-sidebar .sidebar-top-button {
      padding: 14px 25px;
      font-size: 1.1rem;
    }
    
    .anime-sidebar .sidebar-top-button .tv-icon,
    .anime-sidebar .sidebar-top-button .new-icon {
      font-size: 22px;
    }
  }

  @media (min-width: 1300px) and (max-width: 1499px) {
    .anime-sidebar .sidebar-top-button {
      padding: 10px 18px;
      font-size: 0.95rem;
    }
    
    .anime-sidebar .sidebar-top-button .tv-icon,
    .anime-sidebar .sidebar-top-button .new-icon {
      font-size: 18px;
    }
  }

  /* ============================================
    アニメ詳細ページ - メインコンテンツ用ナビゲーションボタン（TOPページと同じデザイン）
    ============================================ */
  
  .anime-detail-nav-buttons {
    display: none; /* デフォルトは非表示 */
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
  }
  
  /* PC表示（992px以上）では絶対に非表示 */
  @media (min-width: 992px) {
    .anime-detail-nav-buttons {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
    }
  }

  /* 番組表ボタン */
  .anime-detail-nav-btn.schedule-btn {
    position: relative;
    flex: 1;
    display: block;
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5);
    background-size: 400% 400%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(255, 0, 110, 0.5),
      0 0 40px rgba(131, 56, 236, 0.3),
      0 0 60px rgba(58, 134, 255, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
  }

  .anime-detail-nav-btn.schedule-btn:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ff006e);
    background-size: 400% 400%;
    border-radius: 8px;
    z-index: -1;
    animation: gradientShift 3s ease-in-out infinite;
  }

  .anime-detail-nav-btn.schedule-btn:after {
    content: '✨';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    animation: sparkle 1.5s ease-in-out infinite;
  }

  .anime-detail-nav-btn.schedule-btn:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 
      0 0 30px rgba(255, 0, 110, 0.8),
      0 0 60px rgba(131, 56, 236, 0.5),
      0 0 90px rgba(58, 134, 255, 0.3);
  }

  .anime-detail-nav-btn.schedule-btn:active {
    transform: scale(0.95);
  }

  /* 新作アニメ一覧ボタン */
  .anime-detail-nav-btn.new-anime-btn {
    position: relative;
    flex: 1;
    display: block;
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ff4500, #ff1493);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 25px rgba(255, 215, 0, 0.6),
      0 0 50px rgba(255, 140, 0, 0.4),
      0 0 75px rgba(255, 69, 0, 0.3);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
  }

  .anime-detail-nav-btn.new-anime-btn:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: rotate(45deg);
    animation: shine 3s linear infinite;
  }

  .anime-detail-nav-btn.new-anime-btn:after {
    content: '🎬';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    animation: filmRoll 2s ease-in-out infinite;
  }

  .anime-detail-nav-btn.new-anime-btn:hover {
    transform: scale(1.15) rotate(-2deg);
    box-shadow: 
      0 0 35px rgba(255, 215, 0, 0.9),
      0 0 70px rgba(255, 140, 0, 0.6),
      0 0 105px rgba(255, 69, 0, 0.4);
  }

  .anime-detail-nav-btn.new-anime-btn:active {
    transform: scale(0.95);
  }

  /* タブレット表示（768px以上、991px以下）でメインコンテンツのボタンを表示 */
  @media (min-width: 768px) and (max-width: 991px) {
    .anime-detail-nav-buttons {
      display: flex;
    }
  }

  /* サイドバーが表示される（992px以上）ではメインコンテンツのボタンを非表示 */
  @media (min-width: 992px) {
    .anime-detail-nav-buttons {
      display: none !important;
    }
  }

  /* メインコンテンツ下部のサイドバー（小画面用） */
  .anime-sidebar-bottom {
    display: none;
    width: 100%;
    margin-top: 3rem;
  }

  /* 小中画面（992-1299px）: 右サイドバーのみ表示 */
  @media (min-width: 992px) and (max-width: 1299px) {
    .anime-sidebar:first-of-type {
      display: none !important; /* 左サイドバーを非表示 */
    }
    
    .anime-sidebar:last-of-type {
      display: flex !important; /* 右サイドバーを表示 */
      width: 250px !important;
    }
    
    .anime-sidebar-bottom {
      display: none !important;
    }
  }

  /* タブレット（768-991px）: すべて非表示 */
  @media (min-width: 768px) and (max-width: 991px) {
    .anime-sidebar {
      display: none !important;
    }
    
    .anime-sidebar-bottom {
      display: none !important;
    }
  }

  /* ============================================
     モバイル（767px以下）: 3カラムレイアウト
     左: 新作アニメ一覧ボタン + サムネイル
     中央: メインコンテンツ
     右: 番組表ボタン + サムネイル
     ============================================ */
  @media (max-width: 767px) {
    /* 3カラムレイアウトを有効化 */
    .anime-detail-wrapper {
      display: flex !important;
      flex-direction: row !important;
      gap: 0.3rem !important;
      align-items: flex-start !important;
      padding: 0 0.2rem !important;
    }
    
    /* 左右サイドバーを表示 */
    .anime-sidebar {
      display: flex !important;
      flex-direction: column !important;
      width: 75px !important;
      min-width: 75px !important;
      flex-shrink: 0 !important;
      gap: 0.4rem !important;
      position: static !important;
      top: auto !important;
      overflow: visible !important;
    }
    
    /* 元のleft_sidebar（番組表ボタン）を右に移動 */
    .anime-sidebar:first-of-type {
      order: 3 !important;
    }
    
    /* 元のright_sidebar（新作アニメ一覧ボタン）を左に移動 */
    .anime-sidebar:last-of-type {
      order: 1 !important;
    }
    
    /* メインコンテンツを中央に */
    .main-card {
      order: 2 !important;
      flex: 1 !important;
      min-width: 0 !important;
      max-width: none !important;
    }
    
    /* サイドバー上部ボタンのスタイル */
    .anime-sidebar .sidebar-top-button {
      width: 100% !important;
      padding: 0.3rem 0.15rem !important;
      font-size: 0.5rem !important;
      border-radius: 6px !important;
      min-height: 40px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1.2 !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
    
    /* ボタンの親要素も幅を確保 */
    .anime-sidebar > div[style*="margin-top"] {
      width: 100% !important;
    }
    
    .anime-sidebar .sidebar-top-button .button-text {
      flex-direction: column !important;
      gap: 2px !important;
      font-size: 0.45rem !important;
    }
    
    .anime-sidebar .sidebar-top-button .tv-icon,
    .anime-sidebar .sidebar-top-button .new-icon {
      font-size: 0.9rem !important;
    }
    
    /* サイドバーカードのスタイル */
    .anime-sidebar .sidebar-anime-card {
      border-radius: 6px !important;
      border-width: 1px !important;
    }
    
    .anime-sidebar .sidebar-anime-info {
      padding: 0.25rem !important;
    }
    
    .anime-sidebar .sidebar-anime-title {
      font-size: 0.45rem !important;
      line-height: 1.2 !important;
      -webkit-line-clamp: 2 !important;
    }
    
    /* 下部サイドバーは非表示 */
    .anime-sidebar-bottom {
      display: none !important;
    }
  }
  
  /* 極小画面（480px以下）: さらにコンパクトに */
  @media (max-width: 480px) {
    .anime-sidebar {
      width: 55px !important;
      min-width: 55px !important;
      gap: 0.3rem !important;
    }
    
    .anime-sidebar .sidebar-top-button {
      width: 100% !important;
      padding: 0.25rem 0.15rem !important;
      min-height: 35px !important;
      box-sizing: border-box !important;
    }
    
    .anime-sidebar .sidebar-top-button .button-text {
      font-size: 0.4rem !important;
    }
    
    .anime-sidebar .sidebar-top-button .tv-icon,
    .anime-sidebar .sidebar-top-button .new-icon {
      font-size: 0.75rem !important;
    }
    
    .anime-sidebar .sidebar-anime-card {
      border-radius: 5px !important;
    }
    
    .anime-sidebar .sidebar-anime-info {
      padding: 0.2rem !important;
    }
    
    .anime-sidebar .sidebar-anime-title {
      font-size: 0.4rem !important;
    }
  }
  
  /* モバイル用: サイドバーボタンのアニメーション無効化 */
  @media (max-width: 767px) {
    .anime-detail-container {
      padding: 65px 0.2rem 0.5rem 0.2rem !important; /* 上部はヘッダー60px + 5px余白 */
    }
    
    /* 番組表ボタン（ultra-flashy）のアニメーション無効化 */
    .anime-sidebar .anime-schedule-button.ultra-flashy {
      animation: none !important;
      background-size: 100% 100% !important;
    }
    
    /* 新作アニメ一覧ボタン（mega-shine）のアニメーション無効化 */
    .anime-sidebar .new-anime-button.mega-shine {
      animation: none !important;
      background-size: 100% 100% !important;
      border-radius: 8px !important;
    }
    
    .anime-sidebar .anime-schedule-button,
    .anime-sidebar .new-anime-button,
    .anime-sidebar .ranking-2025-button {
      border-radius: 8px !important;
    }
    
    .anime-sidebar .anime-schedule-button::before,
    .anime-sidebar .anime-schedule-button::after,
    .anime-sidebar .new-anime-button::before,
    .anime-sidebar .new-anime-button::after {
      display: none !important;
      animation: none !important;
    }
    
    /* ホバー効果も無効化 */
    .anime-sidebar .anime-schedule-button:hover,
    .anime-sidebar .new-anime-button:hover {
      transform: none !important;
    }
    
    /* ボタン親要素のマージン調整 */
    .anime-sidebar > div[style*="margin-top"] {
      margin-top: 0 !important;
      margin-bottom: 0.4rem !important;
    }
  }

  /* ============================================
    アニメ詳細ページ - 中央カラムを白い背景に変更
    ============================================ */
  
  /* メインカード - 白い背景 */
  .main-card {
    flex: 1;
    width: 100%;
    min-width: 400px;
    max-width: 1200px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.95) 100%);
    border: 2px solid rgba(0, 180, 180, 0.3);
    border-radius: var(--border-radius-lg);
    overflow: hidden !important;
    box-shadow: 
      0 0 20px rgba(0, 0, 0, 0.1),
      0 10px 40px rgba(0, 0, 0, 0.15);
  }

  /* main-card内の広告対策 */
  .main-card .adsbygoogle,
  .main-card ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .image-section {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .anime-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
  }

  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 2rem;
  }

  .image-title {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--color-primary);
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    margin: 0;
  }

  .content-section {
    padding: 2rem;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* content-section内の広告対策 */
  .content-section .adsbygoogle,
  .content-section ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .cyber-line {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 180, 0.5), transparent);
    margin: 2rem 0;
    box-shadow: 0 0 10px rgba(0, 180, 180, 0.3);
  }

  /* hrタグのスタイル - アニメ詳細ページ用 */
  .main-card hr,
  .content-section hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 180, 0.5), transparent);
    margin: 2rem 0;
    box-shadow: 0 0 5px rgba(0, 180, 180, 0.2);
  }

  /* セクションタイトル - 暗い色に変更 */
  .section-title {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #1e293b;
    text-shadow: none;
    margin-bottom: 1.5rem;
    font-weight: 700;
  }

  /* 説明文 - 暗い色に変更 */
  .description-text {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    line-height: 1.8;
    color: #334155;
    margin-bottom: 1.5rem;
  }

  .points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
  }

  /* points-grid内の広告対策 */
  .points-grid > * {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .points-grid .adsbygoogle,
  .points-grid ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* ポイントカード - 白っぽい背景に変更 */
  .point-card {
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(0, 180, 180, 0.3);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    transition: all var(--transition-normal);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden !important;
  }

  /* point-card内の広告対策 */
  .point-card .adsbygoogle,
  .point-card ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .point-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 180, 180, 0.5);
  }

  /* ============================================
     スタッフ情報リスト - シンプルなdivベース
     ============================================ */
  .staff-list {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(0, 180, 180, 0.3);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
  }

  .staff-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 180, 180, 0.15);
  }

  .staff-item:last-child {
    border-bottom: none;
  }

  .staff-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    flex-shrink: 0;
  }

  .staff-value {
    font-size: 0.9rem;
    color: #334155;
    text-align: right;
    margin-left: 1rem;
  }

  /* モバイル用 */
  @media (max-width: 768px) {
    .staff-list {
      background: linear-gradient(145deg, #0f172a, #1e293b);
      border: 1px solid rgba(0, 200, 200, 0.3);
      padding: 0.5rem;
    }

    .staff-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      margin-bottom: 0.5rem;
      padding: 0.625rem 0.75rem;
      border-bottom: none;
      border-left: 3px solid #00d4d4;
      gap: 0.5rem;
    }

    .staff-item:last-child {
      margin-bottom: 0;
    }

    .staff-label {
      font-size: 0.65rem;
      color: #00d4d4;
      font-weight: 600;
      flex-shrink: 0;
      min-width: 70px;
      white-space: nowrap;
    }

    .staff-value {
      font-size: 0.75rem;
      color: #f1f5f9;
      font-weight: 500;
      text-align: left;
      margin-left: 0;
      word-break: break-word;
      flex: 1;
    }
  }

  /* ============================================
     キャラクター背景画像付きカード（汎用）
     ============================================ */
  
  /* 基本スタイル - 全キャラクター共通 */
  .point-card.character-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  /* オーバーレイ - 全キャラクター共通（白い背景用に少し明るく調整） */
  .point-card.character-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(30, 41, 59, 0.85) 0%,
      rgba(51, 65, 85, 0.82) 50%,
      rgba(0, 128, 128, 0.80) 100%
    );
    z-index: 1;
    transition: all var(--transition-normal);
  }

  /* テキストスタイル - 全キャラクター共通 */
  .point-card.character-bg .point-title,
  .point-card.character-bg .point-text {
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .point-card.character-bg .point-title {
    color: #00ffff !important;
  }

  .point-card.character-bg .point-text {
    color: #e2e8f0 !important;
  }

  /* ホバー効果 - 全キャラクター共通 */
  .point-card.character-bg:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 180, 180, 0.4);
  }

  .point-card.character-bg:hover::before {
    background: linear-gradient(
      135deg,
      rgba(30, 41, 59, 0.80) 0%,
      rgba(51, 65, 85, 0.78) 50%,
      rgba(0, 128, 128, 0.75) 100%
    );
  }

  /* ポイントカード内のタイトルとテキスト - 暗い色に変更 */
  .point-title {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #0f766e;
    margin-bottom: 0.8rem;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .point-text {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    line-height: 1.7;
    color: #475569;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ボタンセクションとスケジュールセクションのタイトル - 暗い色に変更 */
  .button-section h3,
  .schedule-section h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: #1e293b;
    text-shadow: none;
    margin-bottom: 1.5rem;
  }

  /* アニメ詳細ページ内のテーブル - 白い背景用に調整 */
  .main-card .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 180, 180, 0.05);
    box-shadow: none;
  }

  .main-card .table-hover tbody tr:hover {
    background-color: rgba(0, 180, 180, 0.1);
    box-shadow: none;
  }

  .main-card td {
    background: rgba(248, 250, 252, 0.5);
    color: #334155;
  }

  .main-card th {
    color: #1e293b;
  }

  /* main-card内のリストやその他の要素 - 白い背景用に調整 */
  .main-card ul,
  .main-card ol {
    color: #334155;
  }

  .main-card ul li,
  .main-card ol li {
    color: #334155;
  }

  .main-card p {
    color: #334155;
  }

  .main-card a {
    color: #0f766e;
  }

  .main-card a:hover {
    color: #0d9488;
  }

  .main-card strong,
  .main-card b {
    color: #1e293b;
  }


  .amazon-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
  }

  .amazon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #FF9900, #FF6600);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    font-size: clamp(0.9rem, 2vw, 1rem);
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
  }

  .amazon-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.6);
    color: white;
  }


  /* ============================================
    Amazon カードスタイル - 元のHTML構造対応版
    ============================================ */
  .amazon-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    min-height: 400px;
  }

  .amazon-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 255, 255, 0.5);
    z-index: 5;
  }

  /* Amazon カード内の画像コンテナを背景化 */
  .amazon-card > div:has(img) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .amazon-card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* オーバーレイ */
  .amazon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.92) 0%,
      rgba(30, 41, 59, 0.90) 50%,
      rgba(0, 128, 128, 0.88) 100%
    );
    z-index: 2;
    transition: all var(--transition-normal);
  }

  .amazon-card:hover::before {
    background: linear-gradient(
      135deg,
      rgba(15, 23, 42, 0.88) 0%,
      rgba(30, 41, 59, 0.84) 50%,
      rgba(0, 128, 128, 0.80) 100%
    );
  }

  /* テキスト要素を前面に */
  .amazon-card > div:not(:has(img)) {
    position: relative !important;
    z-index: 3 !important;
  }

  .amazon-icon {
    font-size: 2.5rem;
    color: #00ffff;
    margin-bottom: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    pointer-events: none;
    position: relative;
    z-index: 3;
    text-shadow: 
      2px 2px 6px rgba(0, 0, 0, 0.95),
      0 0 10px rgba(0, 255, 255, 0.5);
  }

  .amazon-card:hover .amazon-icon {
    transform: scale(1.2) rotate(5deg);
    text-shadow: 
      2px 2px 6px rgba(0, 0, 0, 0.95),
      0 0 20px rgba(0, 255, 255, 0.9);
  }

  .amazon-card .point-title,
  .amazon-card .point-text {
    pointer-events: none;
    position: relative;
    z-index: 3;
    color: #e2e8f0 !important;
    text-shadow: 
      2px 2px 6px rgba(0, 0, 0, 0.95),
      0 0 10px rgba(0, 0, 0, 0.8);
  }

  .amazon-card .point-title {
    color: #00ffff !important;
  }

  .amazon-card .amazon-link {
    position: relative;
    z-index: 3;
  }

  .amazon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.85rem 1.5rem;
    background: linear-gradient(135deg, #FF9900, #FF6600);
    border: 2px solid #FF6600;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    width: auto;
  }


  .amazon-link:hover {
    background: linear-gradient(135deg, #FFB340, #FF8800);
    border-color: #FF8800;
    color: #ffffff;
    text-decoration: none;
    transform: translateX(5px);
    box-shadow: 0 6px 25px rgba(255, 153, 0, 0.6);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .amazon-link span {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  .amazon-link i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
  }

  .amazon-link:hover i {
    transform: translateX(5px);
  }
  .schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
  }

  .schedule-item {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    transition: all var(--transition-normal);
  }

  .schedule-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
    border-color: var(--color-primary);
  }

  .schedule-item h4 {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .schedule-item p {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    line-height: 1.7;
    color: var(--color-text-mid);
    margin-bottom: 0.5rem;
  }

  .schedule-item strong {
    color: var(--color-primary);
  }
  /* ============================================
    モバイル専用: フォントサイズ調整（PC表示には一切影響なし）
    ============================================ */
  @media (max-width: 767px) {
    /* ランキング情報ヘッディング（モバイル専用） */
    #rankingSectionMobile {
      font-size: 0.75rem !important;
      line-height: 1.5 !important;
    }
    
    /* 新作アニメページのオーバーレイ（モバイル専用） */
    .anime-overlay {
      padding: 1rem 0.75rem;
    }
    
    .anime-title {
      font-size: 1.1rem !important;
    }
    
    .anime-overlay .detail-intro-btn {
      font-size: 0.75rem !important;
      padding: 0.5rem 0.8rem !important;
      gap: 0.3rem !important;
    }
    
    .anime-overlay .detail-intro-btn .btn-text {
      display: none;
    }
    
    .anime-overlay .detail-intro-btn .btn-icon,
    .anime-overlay .detail-intro-btn .btn-arrow {
      font-size: 1rem !important;
    }
    
    /* パネルタイトル（モバイルのみ） */
    .panel-title {
      font-size: 0.75rem !important;
    }
    
    /* ボタン内のテキスト（モバイルのみ） */
    .modern-btn,
    .metric-pill,
    .search-btn {
      font-size: 0.75rem !important;
    }
    
    /* セレクトボックス（モバイルのみ） */
    .modern-select {
      font-size: 0.75rem !important;
    }
    
    /* 検索入力欄（モバイルのみ） */
    .modern-search-input {
      font-size: 0.75rem !important;
    }
    
    /* テーブルのテキスト（モバイルのみ） */
    .ranking-table th,
    .ranking-table td {
      font-size: 0.7rem !important;
    }
    
    /* アニメ詳細ページ モバイル調整 */
    .anime-detail-container {
      padding: 1rem 0.5rem;
      overflow-x: hidden !important; /* 広告による横スクロール防止 */
      max-width: 100vw !important;
    }

    .content-section {
      padding: 1.5rem 1rem;
      overflow-x: hidden !important; /* 広告による横スクロール防止 */
      max-width: 100% !important;
    }

    .points-grid {
      grid-template-columns: 1fr !important;
      gap: 1rem;
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important; /* 広告によるはみ出し防止 */
    }
    
    /* モバイルでのpoints-grid内広告対策 */
    .points-grid > *,
    .points-grid .adsbygoogle,
    .points-grid ins.adsbygoogle {
      max-width: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
    }

    .point-card {
      padding: 1rem;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
      overflow: hidden !important; /* 広告によるはみ出し防止 */
    }
    
    /* モバイルでのpoint-card内広告対策 */
    .point-card .adsbygoogle,
    .point-card ins.adsbygoogle {
      max-width: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
    }

    .schedule-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .schedule-item {
      padding: 1rem;
    }

    .button-section {
      padding: 0.4rem !important;
      margin: 0.8rem 0 !important;
    }

    .button-section h3 {
      margin-bottom: 0.4rem !important;
      font-size: 0.75rem !important;
      line-height: 1.3 !important;
    }

    .amazon-buttons {
      flex-direction: column;
      align-items: stretch;
      gap: 0.3rem !important;
    }

    .amazon-btn {
      justify-content: center;
      width: 100%;
      padding: 0.3rem 1rem !important;
      font-size: 0.8rem !important;
      line-height: 1.2 !important;
    }

    .amazon-card {
      padding: 1rem;
    }

    .amazon-icon {
      font-size: 2rem;
    }

    .amazon-link {
      padding: 0.65rem 0.9rem;
      font-size: 0.9rem;
      font-weight: 700;
      border-width: 2px;
    }

    .amazon-link span {
      font-size: 0.9rem;
      font-weight: 700;
    }

    .amazon-link i {
      font-size: 0.9rem;
    }

    .image-overlay {
      padding: 1rem;
    }

    .cyber-line {
      margin: 1.5rem 0;
    }
  }

  /* ランキング情報ヘッディングを小さく */
  #rankingSection,
  #rankingSectionMobile {
    font-size: clamp(0.6rem, 1.2vw, 1rem) !important;
    line-height: 1.5 !important;
    /* 枠デザイン - control-panelと統一 */
    background: linear-gradient(135deg, rgba(15, 35, 55, 0.95) 0%, rgba(20, 45, 65, 0.95) 100%);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 255, 255, 0.1);
    position: relative;
  }
  
  /* control-panelと同じ上部ライン */
  #rankingSection::before,
  #rankingSectionMobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 255, 255, 0.6) 50%, 
      transparent 100%);
  }

  /* ============================================
    ヘッダー
    ============================================ */
  header {
    position: relative;
    background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-mid));
    overflow: hidden;
    border-bottom: 1px solid #374151;
    padding: 1.5rem 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 25% 30%, rgba(0, 255, 255, 0.25) 0%, transparent 60%),
      radial-gradient(circle at 75% 65%, rgba(0, 255, 255, 0.2) 0%, transparent 60%),
      repeating-conic-gradient(from 45deg, rgba(0, 255, 255, 0.1) 0deg 10deg, transparent 10deg 20deg),
      repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.08) 0 1px, transparent 1px 10px);
    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
  }

  header > * {
    position: relative;
    z-index: 1;
  }

  /* ============================================
    共通パネルスタイル - グリッドパターン付き
    ============================================ */
  .control-panel,
  .chart-container,
  .card-style {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: none;
    box-shadow: none;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
  }

  /* card-styleは枠なし・背景なし */
  .card-style {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .control-panel::before,
  .chart-container::before,
  .card-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
  }

  /* ============================================
    コントロールパネル
    ============================================ */
  .control-panel {
    border-radius: var(--border-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* control-panel内の広告対策 */
  .control-panel .adsbygoogle,
  .control-panel ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .control-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 255, 255, 0.6) 50%, 
      transparent 100%);
    animation: scanlineTop 3s linear infinite;
  }

  .panel-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    margin-bottom: 15px;
    font-family: var(--font-primary);
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 12px;
    z-index: 1;
  }

  .panel-title::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    animation: blink 1.5s infinite;
  }

  .panel-description {
    color: var(--color-text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
  }

  /* ============================================
    ボタンスタイル - 共通
    ============================================ */
  .modern-btn,
  .metric-pill,
  .search-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.95) 100%);
    border: 2px solid rgba(0, 180, 180, 0.4);
    color: #003333;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .modern-btn::before,
  .metric-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 200, 200, 0.2) 50%, 
      transparent 100%);
    transition: left var(--transition-slow);
  }

  .modern-btn:hover::before,
  .metric-pill:hover::before {
    left: 100%;
  }

  .modern-btn:hover,
  .metric-pill:hover,
  .search-btn:hover {
    background: linear-gradient(135deg, rgba(230, 255, 255, 0.98) 0%, rgba(210, 250, 250, 0.98) 100%);
    border-color: #00b4b4;
    color: #004444;
    transform: translateY(-2px);
    box-shadow: 
      0 6px 20px rgba(0, 180, 180, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .modern-btn.active,
  .metric-pill.active {
    background: linear-gradient(135deg, rgba(180, 255, 255, 0.9) 0%, rgba(150, 240, 240, 0.9) 100%);
    border-color: #00a0a0;
    color: #003333;
    box-shadow: 
      0 0 15px rgba(0, 180, 180, 0.4),
      inset 0 0 10px rgba(0, 200, 200, 0.15);
    font-weight: 700;
  }

  /* ============================================
    ボタン個別スタイル
    ============================================ */
  .modern-btn {
    padding: 2px 6px;
    border-radius: var(--border-radius-md);
    font-size: 0.7rem;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
  }

  .metric-pill {
    padding: 1px 4px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    min-height: auto !important;
  }

  .search-btn {
    padding: 1px 5px !important;
    border-radius: var(--border-radius-md) !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  /* ============================================
    ランキングリスト用アクションボタン（聴く・観る）
    ============================================ */
  .btn-outline-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
    border: 2px solid #ffc107;
    color: #ffc107;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .btn-outline-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 193, 7, 0.4) 50%, transparent 100%);
    transition: left 0.5s ease;
  }

  .btn-outline-warning:hover::before {
    left: 100%;
  }

  .btn-outline-warning:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 152, 0, 0.3) 100%);
    border-color: #ffca28;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.8);
  }

  .btn-outline-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(255, 82, 82, 0.15) 100%);
    border: 2px solid #dc3545;
    color: #dc3545;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .btn-outline-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 53, 69, 0.4) 50%, transparent 100%);
    transition: left 0.5s ease;
  }

  .btn-outline-danger:hover::before {
    left: 100%;
  }

  .btn-outline-danger:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.3) 0%, rgba(255, 82, 82, 0.3) 100%);
    border-color: #ff5252;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.8);
  }

  /* ============================================
    PC表示用アクションボタン（聴く・観る）
    ============================================ */
  .pc-action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
  }

  .pc-action-buttons .pc-btn {
    flex: 1;
    text-align: center;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
  }

  /* ============================================
    レイアウトグリッド
    ============================================ */
  .button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
  }

  /* button-grid内の広告対策 */
  .button-grid .adsbygoogle,
  .button-grid ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .metric-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
  }

  /* metric-pills内の広告対策 */
  .metric-pills .adsbygoogle,
  .metric-pills ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .controls-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 100%;
    overflow: hidden;
  }

  /* controls-grid内の広告対策 */
  .controls-grid .adsbygoogle,
  .controls-grid ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* ============================================
    フォーム要素
    ============================================ */
  .modern-select,
  .modern-search-input {
    width: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--border-radius-md);
    color: var(--color-text-light);
    padding: 10px 15px;
    font-size: 0.95rem;
    transition: all var(--transition-normal);
    box-shadow: 
      inset 0 2px 10px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(0, 255, 255, 0.1);
  }

  .modern-select {
    cursor: pointer;
    position: relative;
    z-index: 1;
  }

  .modern-select:focus,
  .modern-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 
      0 0 25px rgba(0, 255, 255, 0.4),
      inset 0 2px 10px rgba(0, 0, 0, 0.4);
  }

  .modern-select option {
    background: var(--color-bg-mid);
    color: var(--color-text-light);
    padding: 10px;
  }

  .modern-select option:hover {
    background: var(--color-bg-light);
  }

  .modern-search-input::placeholder {
    color: var(--color-text-dark);
  }

  .search-container {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
  }

  /* search-container内の広告対策 */
  .search-container .adsbygoogle,
  .search-container ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .modern-search-input {
    flex: 1;
  }

  /* ============================================
    チャートとカード
    ============================================ */
  .chart-container {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    padding: 15px;
    margin: 15px auto;
    border-radius: var(--border-radius-xl);
    box-sizing: border-box;
  }

  /* chart-container内の広告対策 */
  .chart-container .adsbygoogle,
  .chart-container ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .card-style {
    border-radius: 0;
    padding: 0;
    z-index: 1;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent !important;
    border: none !important;
  }

  /* card-style内の広告対策 */
  .card-style .adsbygoogle,
  .card-style ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .card-style::before {
    display: none !important;
  }

  #rankingChart {
    width: 100% !important;
    height: 100% !important;
  }

  /* ============================================
    テーブルスタイル
    ============================================ */
  table {
    width: 100%;
    color: var(--color-dark-cyan);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 255, 255, 0.05));
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 255, 255, 0.3);
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* テーブル内の広告対策 */
  table .adsbygoogle,
  table ins.adsbygoogle,
  .ranking-table .adsbygoogle,
  .ranking-table ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  thead th {
    background: linear-gradient(90deg, #00aacc, #007799);
    color: #fff !important;
    font-weight: bold;
    font-size: 1.3rem;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.8), 0 0 8px rgba(0, 255, 255, 0.53);
    border-bottom: 2px solid rgba(0, 255, 255, 0.53);
    padding: 14px 12px;
    transition: all var(--transition-normal);
  }

  thead th:hover {
    background: linear-gradient(90deg, #00aacc, #0099bb);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    transform: scale(1.03);
    z-index: 1;
  }

  .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1);
  }

  .table-hover tbody tr:hover {
    background-color: rgba(15, 240, 255, 0.13);
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.53);
  }

  td {
    vertical-align: middle;
    background: radial-gradient(circle at center, rgba(0, 255, 255, 0.13), rgba(0, 51, 68, 0.33));
    border-radius: 8px;
    padding: 2px 6px;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-dark-cyan);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.67);
    box-shadow: inset 0 0 8px rgba(0,255,255,0.4), 0 0 8px rgba(0,255,255,0.2);
    backdrop-filter: blur(4px);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid rgba(0, 255, 255, 0.3);
  }

  td:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.4);
    border-color: rgba(0, 255, 255, 0.3);
    position: relative;
  }

  td:nth-child(1),
  td:nth-child(3),
  td:nth-child(4),
  th:nth-child(1),
  th:nth-child(3),
  th:nth-child(4) {
    text-align: left;
  }

  td:nth-child(3) {
    font-family: var(--font-primary);
    font-size: 0.8rem;
  }

  td:nth-child(1), 
  th:nth-child(1) {
    text-align: center;
  }

  /* PC表示: 順位列のスタイル（大きな黄色フォント） */
  td:nth-child(1) {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #FFFF00 !important;
    text-shadow: 
      0 0 10px rgba(255, 255, 0, 1),
      0 0 20px rgba(255, 255, 0, 0.8),
      2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    min-width: 60px;
    padding: 8px !important;
  }

  /* ============================================
    番組表ボタン
    ============================================ */
  .anime-schedule-button {
    position: relative;
    display: inline-block;
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5);
    background-size: 400% 400%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(255, 0, 110, 0.5),
      0 0 40px rgba(131, 56, 236, 0.3),
      0 0 60px rgba(58, 134, 255, 0.2);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
  }

  .anime-schedule-button:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ff006e);
    background-size: 400% 400%;
    border-radius: 8px;
    z-index: -1;
    animation: gradientShift 3s ease-in-out infinite;
  }

  .anime-schedule-button:after {
    content: '✨';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    animation: sparkle 1.5s ease-in-out infinite;
  }

  .anime-schedule-button:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 
      0 0 30px rgba(255, 0, 110, 0.8),
      0 0 60px rgba(131, 56, 236, 0.5),
      0 0 90px rgba(58, 134, 255, 0.3);
  }

  .anime-schedule-button:active {
    transform: scale(0.95);
  }

  .button-text {
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .tv-icon {
    font-size: 28px;
    animation: tvGlow 2s ease-in-out infinite alternate;
  }

  .ultra-flashy {
    animation: 
      gradientShift 2s ease-in-out infinite,
      glow 1.5s ease-in-out infinite alternate,
      bounce 1.8s ease-in-out infinite,
      pulse 1s ease-in-out infinite alternate;
  }

  /* ============================================
    メニュー - トグルボタン（モバイル用・シンプル3本線）
    ============================================ */
  #toggleMenu {
    position: fixed !important;
    top: 22px;
    right: 20px;
    z-index: 10001;
    background: transparent;
    border: none;
    color: #00ffff;
    padding: 0;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* PC用メニューボタンは header-left-group 内で相対配置 */
  #toggleMenuPC {
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }

  #toggleMenu:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  }

  #toggleMenu:active,
  #toggleMenuPC:active {
    transform: scale(0.95);
  }

  #toggleMenu.active,
  #toggleMenuPC.active {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  }

  /* ============================================
    メニュー - モバイルメニュー (768px以上)
    ============================================ */
  @media (min-width: 768px) {
    #mobileMenu {
      position: fixed !important;
      top: 70px;
      left: 8px;
      width: 200px;
      background: linear-gradient(145deg, 
        rgba(15, 23, 42, 0.98) 0%, 
        rgba(20, 30, 50, 0.98) 100%);
      border: 1px solid rgba(0, 255, 255, 0.4);
      border-radius: 8px;
      box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(0, 255, 255, 0.2);
      backdrop-filter: blur(15px);
      z-index: 10005;
      display: none;
      overflow: hidden;
      animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: var(--font-mono);
    }

    #mobileMenu::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-primary) 50%, 
        transparent 100%);
    }

    #mobileMenu::after {
      display: none;
    }

    .menu-list {
      list-style: none;
      padding: 4px 0;
      margin: 0;
    }

    .menu-list li {
      margin: 0;
      border-bottom: 1px solid rgba(0, 255, 255, 0.1);
      position: relative;
      overflow: hidden;
    }

    .menu-list li:last-child {
      border-bottom: none;
    }

    .menu-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, 
        rgba(0, 255, 255, 0.1) 0%, 
        rgba(0, 255, 255, 0.15) 100%);
      transition: width 0.2s ease;
      z-index: 1;
    }

    .menu-list li:hover::before {
      width: 100%;
    }

    .menu-list a {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      color: #b0e0e6;
      text-decoration: none;
      font-size: 0.75rem;
      font-weight: 500;
      transition: all 0.2s ease;
      position: relative;
      z-index: 2;
      text-transform: none;
      letter-spacing: 0;
      border-left: 2px solid transparent;
      text-align: left;
      gap: 8px;
    }

    .menu-list a:hover {
      color: #00ffff;
      padding-left: 16px;
      border-left-color: #00ffff;
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
      background: rgba(0, 255, 255, 0.05);
    }

    .menu-list a::after {
      display: none;
    }

    #mobileMenu::-webkit-scrollbar {
      width: 6px;
    }

    #mobileMenu::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.5);
    }

    #mobileMenu::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      border-radius: 3px;
    }

    #mobileMenu::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ffffff 0%, var(--color-primary) 100%);
    }

    /* デスクトップ用のiframeとテキストスタイル */
    .iframe-wrapper {
      margin: auto;
      width: 280px;
      height: 158px;
      overflow: hidden;
    }

    .iframe-wrapper iframe {
      width: 100%;
      height: 100%;
      border: 0;
      position: static;
    }

    .iframe-wrapper2 {
      position: relative;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      padding-top: 56.25%;
      overflow: hidden;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    .iframe-wrapper2 iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .ranking-table .anime-info-text3,
    .ranking-table .anime-info-text4 {
      font-size: 1.0rem !important;
    }

    .anime-info-text1 {
      text-align: center;
      width: 80px;
      max-width: 80px;
      min-width: 60px;
      font-size: 1.8rem !important;
      font-weight: 900 !important;
      color: #FFFF00 !important;
      text-shadow: 
        0 0 10px rgba(255, 255, 0, 1),
        0 0 20px rgba(255, 255, 0, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.9) !important;
      word-break: break-word;
    }

    .anime-info-text2 {
      text-align: center;
      width: 280px;
      max-width: 280px;
      min-width: 180px;
      word-break: break-word;
    }

    .anime-info-text3 {
      width: 280px;
      max-width: 280px;
      min-width: 250px;
      font-size: 0.65rem;
      line-height: 1.4;
      word-break: break-word;
    }

    .anime-info-text3 br {
      line-height: 1.3;
    }

    .anime-info-text3 .btn {
      padding: 6px 12px;
      font-size: 0.8rem;
      margin-top: 6px;
    }

    .anime-info-text4 {
      text-align: center;
      width: 130px;
      max-width: 130px;
      min-width: 120px;
      font-size: 0.75rem;    
      word-break: break-word;
    }
  }

  /* ============================================
    Amazonアフィリエイトボタン
    ============================================ */
  .btn-outline-warning {
    background-color: #FF9900;
    border-color: #FF9900;
    color: #232F3E;
    font-weight: 600;
  }

  .btn-outline-warning:hover {
    background-color: #FFB84D;
    border-color: #FFB84D;
    color: #232F3E;
  }

  .btn-outline-danger {
    background-color: #00A8E1;
    border-color: #00A8E1;
    color: #FFFFFF;
    font-weight: 600;
  }

  .btn-outline-danger:hover {
    background-color: #0088C1;
    border-color: #0088C1;
    color: #FFFFFF;
  }

  /* ============================================
    アニメーション定義
    ============================================ */
  @keyframes scanlineTop {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
  }

  @keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.3; }
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes glow {
    from {
      box-shadow: 
        0 0 20px rgba(255, 0, 110, 0.5),
        0 0 40px rgba(131, 56, 236, 0.3),
        0 0 60px rgba(58, 134, 255, 0.2);
    }
    to {
      box-shadow: 
        0 0 30px rgba(255, 0, 110, 0.8),
        0 0 60px rgba(131, 56, 236, 0.5),
        0 0 90px rgba(58, 134, 255, 0.4);
    }
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes pulse {
    0%, 100% {
      box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        inset 0 0 30px rgba(0, 255, 255, 0.2);
    }
    50% {
      box-shadow: 
        0 0 50px rgba(0, 255, 255, 0.9),
        inset 0 0 40px rgba(0, 255, 255, 0.3);
    }
  }

  @keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.5; transform: scale(1.2) rotate(180deg); }
  }

  @keyframes tvGlow {
    from { text-shadow: 0 0 5px #06ffa5; }
    to { text-shadow: 0 0 20px #06ffa5, 0 0 30px #06ffa5; }
  }


  /* ============================================
    新作アニメ一覧ボタン - 映画プレミア風デザイン
    ============================================ */
  .new-anime-button {
    position: relative;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 20px 40px;
    font-size: 34px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ff4500, #ff1493);
    background-size: 300% 300%;
    border: none;
    border-radius: 8px;
    box-shadow: 
      0 0 25px rgba(255, 215, 0, 0.6),
      0 0 50px rgba(255, 140, 0, 0.4),
      0 0 75px rgba(255, 69, 0, 0.3);
    transition: all var(--transition-normal);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    box-sizing: border-box;
  }

  .new-anime-button:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: rotate(45deg);
    animation: shine 3s linear infinite;
  }

  .new-anime-button:after {
    content: '🎬';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    animation: filmRoll 2s ease-in-out infinite;
  }

  .new-anime-button:hover {
    transform: scale(1.15) rotate(-2deg);
    box-shadow: 
      0 0 35px rgba(255, 215, 0, 0.9),
      0 0 70px rgba(255, 140, 0, 0.6),
      0 0 105px rgba(255, 69, 0, 0.4);
  }

  .new-anime-button:active {
    transform: scale(0.95);
  }

  .new-icon {
    font-size: 28px;
    animation: newGlow 1.5s ease-in-out infinite alternate;
  }

  .mega-shine {
    animation: 
      shineMove 3s ease-in-out infinite,
      goldenGlow 2s ease-in-out infinite alternate,
      wiggle 2s ease-in-out infinite,
      rainbow 4s linear infinite;
  }

  /* 新作アニメボタン用のアニメーション */
  @keyframes shine {
    0% { 
      left: -50%;
      top: -50%;
    }
    100% { 
      left: 150%;
      top: 150%;
    }
  }

  @keyframes shineMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes goldenGlow {
    from {
      box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.6),
        0 0 50px rgba(255, 140, 0, 0.4),
        0 0 75px rgba(255, 69, 0, 0.3);
    }
    to {
      box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.9),
        0 0 80px rgba(255, 140, 0, 0.7),
        0 0 120px rgba(255, 69, 0, 0.5);
    }
  }

  @keyframes wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-3deg) scale(1.05); }
    75% { transform: rotate(3deg) scale(1.05); }
  }

  @keyframes filmRoll {
    0%, 100% { 
      opacity: 1; 
      transform: scale(1) rotate(0deg); 
    }
    25% { 
      opacity: 0.7; 
      transform: scale(1.3) rotate(90deg); 
    }
    50% { 
      opacity: 1; 
      transform: scale(1) rotate(180deg); 
    }
    75% { 
      opacity: 0.7; 
      transform: scale(1.3) rotate(270deg); 
    }
  }

  @keyframes newGlow {
    from { 
      text-shadow: 0 0 5px #ffd700; 
    }
    to { 
      text-shadow: 
        0 0 20px #ffd700, 
        0 0 30px #ff8c00,
        0 0 40px #ff4500; 
    }
  }

  @keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes menuSlideIn {
    from {
      opacity: 0;
      transform: translateX(100%) scale(0.9);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  @keyframes scanline {
    0%, 100% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(100%);
    }
  }

  @keyframes bottomGlow {
    0% {
      box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    }
    100% {
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    }
  }

  @keyframes summerGlow {
    0% { box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4); }
    100% { box-shadow: 0 2px 15px rgba(255, 107, 53, 0.8); }
  }

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

  @keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
  }

  .fade-in-button {
    opacity: 1; /* 修正: opacity: 0は危険 */
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
  }

  /* ============================================
    レスポンシブ - PC表示 (992px以上)
    ============================================ */
  @media (min-width: 992px) {
    /* 3カラムレイアウト - カラム幅を調整 */
    .col-5 {
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: 200px !important;
      min-width: 160px !important;
    }
    
    .d-none.d-lg-block[style*="min-width: 0"] {
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: 220px !important;
      min-width: 160px !important;
    }
    
    .col-7 {
      flex: 1 1 auto !important;
      max-width: none !important;
    }
    
    /* サイドカラムの固定 */
    #leftColumn1, 
    #leftColumn2 {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px 2px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 3px;
    }
    
    /* 左カラムのボタン余白を削減 */
    #leftColumn1 .metric-pill,
    #leftColumn2 .metric-pill {
      padding: 0px 2px !important;
      font-size: 0.55rem !important;
      margin: 0 !important;
      white-space: normal !important;
      word-break: keep-all !important;
      line-height: 1.0 !important;
      min-height: auto !important;
    }
    
    #leftColumn1 .metric-pills,
    #leftColumn2 .metric-pills {
      gap: 1px !important;
      margin: 0 !important;
    }
    
    #leftColumn1 > *, 
    #leftColumn2 > * {
      width: 100%;
      max-width: 100%;
      flex-shrink: 0;
    }
    
    #leftColumn1 .anime-schedule-button, 
    #leftColumn2 .anime-schedule-button {
      margin: 0 auto;
      display: inline-block;
    }
    
    #leftColumn1 .new-anime-button, 
    #leftColumn2 .new-anime-button {
      display: block;
      width: 80%;
      margin: 0 auto;
    }
    
    /* 左カラム用 2025年ランキングボタン */
    #leftColumn1 .ranking-2025-button, 
    #leftColumn2 .ranking-2025-button {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 20px;
      height: 56px !important;
      font-size: 0.9rem;
    }
    
    #leftColumn1 .ranking-2025-button .trophy-icon, 
    #leftColumn2 .ranking-2025-button .trophy-icon {
      font-size: 1rem;
    }
    
    #leftColumn1 .ranking-2025-button:after, 
    #leftColumn2 .ranking-2025-button:after {
      font-size: 0.8rem;
      top: 6px;
      right: 10px;
    }
    
    /* 左カラムの2025年ランキングボタンを中央バナーと同じ高さに */
    #leftColumn1 .text-center, 
    #leftColumn2 .text-center {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 15px auto 15px auto;
      padding: 0;
      height: 56px;
      box-sizing: border-box;
    }
    
    #leftColumn1 .ranking-2025-button,
    #leftColumn2 .ranking-2025-button {
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    /* コントロールパネルのマージン調整 */
    #leftColumn1 .control-panel,
    #leftColumn2 .control-panel {
      margin-bottom: 0 !important;
      padding: 15px 8px !important;  /* 左右のpaddingを小さく */
    }

    /* 期間選択リストボックスの幅を広げる */
    #leftColumn2 .modern-select {
      width: 100% !important;
      font-size: 0.7rem !important;  /* フォントサイズを少し小さく */
    }

    /* PCサイズのフォント調整 - 全体的に小さく */
    .panel-title {
      font-size: 0.75rem !important;
      padding-left: 8px !important;  /* 左側の余白を小さく */
    }
    
    
    .panel-description {
      font-size: 0.75rem !important;
      line-height: 1.4 !important;
    }
    
    .modern-btn {
      font-size: 0.6rem !important;
      padding: 1px 4px !important;
      line-height: 1.1 !important;
    }
    
    .metric-pill {
      font-size: 0.55rem !important;
      padding: 0px 3px !important;
      border-radius: 6px !important;
      text-align: center !important;
      justify-content: center !important;
      line-height: 1.0 !important;
      min-height: auto !important;
    }
    
    .modern-select,
    .modern-select option {
      font-size: 0.6rem !important;
    }
    
    .modern-search-input,
    .search-btn {
      font-size: 0.6rem !important;
    }
    
    .search-btn {
      padding: 0px 4px !important;
      line-height: 1.0 !important;
    }
    
    .anime-schedule-button {
      padding: 14px 28px !important;
      font-size: 1.5rem !important;
    }
    
    .tv-icon {
      font-size: 1.1rem !important;
    }
    
    .site-title {
      font-size: 1.8rem !important;
    }
    
    h2 {
      font-size: 1.5rem !important;
    }
    
    thead th {
      font-size: 14px !important;
      padding: 12px 10px !important;
    }
    
    .anime-info-text3 {
      font-size: 0.65rem !important;
      line-height: 1.4 !important;
    }
    
    .anime-info-text4 {
      font-size: 0.75rem !important;
    }
    
    .button-grid {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
      gap: 8px !important;
    }
    
    /* テーブル内のテキストサイズも調整 */
    td {
      font-size: 0.8rem !important;
    }
    
    /* スクロールバーのカスタマイズ */
    #leftColumn1::-webkit-scrollbar,
    #leftColumn2::-webkit-scrollbar {
      width: 8px;
    }
    
    #leftColumn1::-webkit-scrollbar-track,
    #leftColumn2::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.5);
      border-radius: 4px;
    }
    
    #leftColumn1::-webkit-scrollbar-thumb,
    #leftColumn2::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      border-radius: 4px;
    }
    
    #leftColumn1::-webkit-scrollbar-thumb:hover,
    #leftColumn2::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ffffff 0%, var(--color-primary) 100%);
    }
  }
    


  /* ============================================
    レスポンシブ - モバイル表示 (991px以下)
    ============================================ */
  @media (max-width: 991px) {

    .mobile-controls-container {
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      max-width: 100%;
      overflow: hidden;
      min-height: 200px; /* CLS防止: 実測値200px */
      contain: layout style;
    }

    /* mobile-controls-container内の広告対策 */
    .mobile-controls-container .adsbygoogle,
    .mobile-controls-container ins.adsbygoogle {
      max-width: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
    }

    .mobile-controls-container .control-panel {
      margin-bottom: 10px !important;
    }
    
    .mobile-controls-container .modern-select {
      min-height: 150px !important;
    }
    
    .mobile-controls-container .metric-pills {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px !important;
    }
    
    .mobile-controls-container .metric-pill {
      flex: 1 1 auto;
      min-width: 0;
      padding: 8px 4px !important;
      font-size: 0.7rem !important;
      text-align: center;
      white-space: nowrap;
    }

    /* モバイル用指標ボタン（再生数、GOOD数、コメント数）- 2段表示 */
    .mobile-controls-container .mobile-metric-pills,
    #metricGroup {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      gap: 6px !important;
    }
    
    .mobile-controls-container .mobile-metric-pills .metric-pill,
    #metricGroup .metric-pill {
      flex: 0 0 auto !important;
      min-width: 0 !important;
      padding: 8px 12px !important;
      font-size: 0.7rem !important;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 再生数とGOOD数を1段目に（横並び） */
    .mobile-controls-container .mobile-metric-pills .metric-pill:nth-child(1),
    .mobile-controls-container .mobile-metric-pills .metric-pill:nth-child(2),
    #metricGroup .metric-pill:nth-child(1),
    #metricGroup .metric-pill:nth-child(2) {
      flex: 1 1 45% !important;
    }

    /* コメント数を2段目に（100%幅） */
    .mobile-controls-container .mobile-metric-pills .metric-pill:nth-child(3),
    #metricGroup .metric-pill:nth-child(3) {
      flex: 1 1 100% !important;
    }

    /* モバイル用表示件数ボタン - 横一列 */
    .mobile-controls-container .mobile-limit-pills {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      gap: 3px !important;
    }
    
    .mobile-controls-container .mobile-limit-pills .metric-pill {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      padding: 2px 3px !important;
      font-size: 0.7rem !important;
      text-align: center;
    }

    /* フッターを非表示 */
    footer {
      display: none !important;
    }
    
    /* 広告エリアのスタイル */
    .ad-container {
      position: relative !important;
      width: 100% !important;
      margin: 0 auto !important;
      padding: 10px 5px !important;
      background: transparent !important;
      z-index: 1 !important;
    }
    
    /* ヘッダーを固定 */
    header {
      padding: 0.75rem 0 !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 60px;
    }

    /* mainコンテナの調整 */
    main.container-fluid {
      padding-top: 60px !important; /* ヘッダーの高さ分 */
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      overflow-x: hidden !important;
    }

    /* rowを通常配置に */
    .container-fluid > .row {
      display: flex !important;
      flex-wrap: nowrap !important;
      min-height: 100vh !important; /* CLS防止: height: autoを削除 */
      overflow: visible !important;
      position: relative !important;
      top: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 0 !important;
    }
    
    /* Bootstrapのデフォルト.rowのネガティブマージンを上書き */
    .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
      --bs-gutter-x: 0 !important;
      --bs-gutter-y: 0 !important;
      height: unset !important; /* CLS防止: height: autoを無効化 */
    }
    
    /* Bootstrap変数も上書き */
    .container-fluid > .row > [class*="col-"] {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    /* ヘッダーを固定 */
    header {
      padding: 0.75rem 0 !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 60px;
    }

    /* カラムの余白 - 左端・中央・右端 */
    .col-5 {
      flex: 0 0 35% !important;
      max-width: 35% !important;
      width: 35% !important;
      box-sizing: border-box !important;
      padding: 0 !important;
      margin: 0 0 0 3px !important;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    .col-7 {
      flex: 0 0 calc(65% - 16px) !important;
      max-width: calc(65% - 16px) !important;
      width: calc(65% - 16px) !important;
      box-sizing: border-box !important;
      padding: 0 !important;
      margin: 0 10px 0 3px !important;
      overflow-x: hidden !important;
      overflow-y: visible !important;
      height: auto !important;
    }
    
    /* 左カラム内部 */
    #leftColumn1 {
      padding: 0 !important;
      margin: 0 !important;
      height: auto;
    }
    
    /* col-7内の全要素を制限 - 最高優先度 */
    .col-7 *,
    .col-7 *::before,
    .col-7 *::after {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* テーブル関連の強制制限 */
    .col-7 table {
      width: 100% !important;
      max-width: 100% !important;
      table-layout: fixed !important;
    }
    
    .col-7 table tbody,
    .col-7 table tbody tr,
    .col-7 table tbody td {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
    
    /* ranking-row-mobile と video-text-container-mobile の強制制限 */
    .col-7 .ranking-row-mobile,
    .col-7 .video-text-container-mobile,
    .col-7 .rating-container-mobile,
    .col-7 .comment-section {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
    
    /* スクロールバーカスタマイズ */
    .col-5::-webkit-scrollbar,
    .col-7::-webkit-scrollbar {
      width: 4px !important;
    }
    
    .col-5::-webkit-scrollbar-track,
    .col-7::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.5);
      border-radius: 2px;
    }
    
    .col-5::-webkit-scrollbar-thumb,
    .col-7::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      border-radius: 2px;
    }
    
    /* コンパクト化 */
    .control-panel {
      padding: 10px !important;
      margin-bottom: 10px !important;
      border-radius: var(--border-radius-md) !important;
    }
    
    .panel-title {
      font-size: 0.75rem !important;
      margin-bottom: 8px !important;
      padding-left: 8px !important;
    }
    
    .panel-title::before {
      font-size: 0.7rem !important;
    }
    
    .panel-description {
      font-size: 0.7rem !important;
      line-height: 1.3 !important;
    }
    
    .modern-btn {
      padding: 1px 4px !important;
      font-size: 0.6rem !important;
      border-radius: var(--border-radius-sm) !important;
      line-height: 1.1 !important;
    }
    
    .button-grid {
      gap: 2px !important;
      grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)) !important;
    }
    
    .metric-pill {
      padding: 1px 4px !important;
      font-size: 0.65rem !important;
      border-radius: 12px !important;
    }
    
    .metric-pills {
      gap: 2px !important;
    }
    
    .modern-select {
      padding: 2px 4px !important;
      font-size: 0.65rem !important;
      border-radius: var(--border-radius-sm) !important;
    }
    
    .modern-select option {
      padding: 2px !important;
      font-size: 0.65rem !important;
    }
    
    .search-container {
      gap: 5px !important;
    }
    
    .modern-search-input {
      padding: 6px 10px !important;
      font-size: 0.75rem !important;
      border-radius: var(--border-radius-sm) !important;
    }
    
    .search-btn {
      padding: 6px 12px !important;
      font-size: 0.75rem !important;
      border-radius: var(--border-radius-sm) !important;
    }
    
    .anime-schedule-button {
      padding: 10px 20px !important;
      font-size: 0.75rem !important;
      border-radius: 8px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
      width: fit-content !important;
    }
    
    .tv-icon {
      font-size: 1rem !important;
    }
    
    .anime-schedule-button:after {
      font-size: 0.75rem !important;
      top: 5px !important;
      right: 8px !important;
    }
    
    .new-anime-button {
      padding: 10px 20px !important;
      font-size: 0.75rem !important;
      border-radius: 8px !important;
      display: block !important;
      width: 80% !important;
      margin: 0 auto !important;
      box-sizing: border-box !important;
    }
    
    .new-icon {
      font-size: 1rem !important;
    }
    
    .new-anime-button:after {
      font-size: 0.75rem !important;
      top: 5px !important;
      right: 8px !important;
    }
    
    /* モバイル用 2025年ランキングボタン */
    .ranking-2025-button {
      padding: 10px 20px !important;
      font-size: 0.75rem !important;
      border-radius: 8px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
      width: fit-content !important;
    }
    
    .trophy-icon {
      font-size: 1rem !important;
    }
    
    .ranking-2025-button:after {
      font-size: 0.75rem !important;
      top: 5px !important;
      right: 8px !important;
    }
    
    h2 {
      font-size: 1rem !important;
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    
    .chart-container {
      height: 180px !important;
      padding: 8px !important;
      margin: 8px auto !important;
    }
    
    .card-style {
      padding: 5px !important;
    }
    
    table tbody tr {
      margin: 5px 0 !important;
      padding: 5px !important;
    }
    
    .video-text-container-mobile > div {
      font-size: 0.75rem !important;
      margin-left: 8px !important;
      line-height: 1.2 !important;
    }
    
    .metric-number {
      font-size: 0.75rem !important;
      padding-left: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    
    .video-text-container-mobile .btn {
      padding: 5px 10px !important;
      font-size: 0.7rem !important;
    }
    
    /* ヘッダーを固定 */
    header {
      padding: 0.75rem 0 !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 60px;
    }
    
    .site-title {
      font-size: 1rem !important;
    }
    
    /* コンテナの余白削減 */
    .container-fluid {
      padding-left: 0 !important;
      padding-right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* モバイルボタングループの位置調整 */
    .mobile-button-group {
      position: fixed;
      bottom: 10px;
      right: 10px;
      z-index: 99999;
      pointer-events: auto;
      min-height: 40px; /* CLS防止: 実測値40px */
      contain: layout style;
    }
    
    .mobile-button-group *,
    .mobile-button-group a,
    .lang-selector-mobile,
    .lang-selector-mobile a {
      pointer-events: auto !important;
    }

  }

  /* ============================================
    レスポンシブ - モバイルメニュー (768px以下)
    ============================================ */
  @media (max-width: 768px) {
    
    /* ★★★ モバイル時：縦積みレイアウト ★★★ */
    .container-fluid > .row {
      flex-direction: column !important;
      flex-wrap: nowrap !important;
    }
    
    /* 左カラム（ランキング種類選択）を上に、全幅で */
    .col-5,
    .col-5.col-lg-block,
    .col-5.col-lg-block.d-lg-block {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 8px !important;
      order: 1 !important;
    }
    
    /* 右カラム（バナー・期間・指標など + ランキングリスト）を下に、全幅で */
    .col-7,
    .col-7.col-lg-auto {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 4px !important;
      order: 2 !important;
    }
    
    .anime-schedule-button {
      padding: 15px 30px;
      font-size: 20px;
      white-space: nowrap;
      word-break: keep-all;
    }
    
    .tv-icon {
      font-size: 24px;
    }

    #toggleMenu {
      background: transparent;
      border: none;
      color: #00ffff;
      padding: 0;
      font-size: 1.3rem;
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #mobileMenu {
      position: fixed !important;
      bottom: 120px;
      right: 10px;
      width: 200px;
      max-height: 50vh;
      overflow-y: auto;
      background: linear-gradient(145deg, 
        rgba(15, 23, 42, 0.98) 0%, 
        rgba(30, 41, 59, 0.98) 100%);
      border: 2px solid var(--color-primary);
      border-radius: var(--border-radius-md);
      box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 255, 255, 0.4);
      backdrop-filter: blur(15px);
      z-index: 10000;
    }

    .menu-list {
      list-style: none;
      padding: 4px 0;
      margin: 0;
    }

    .menu-list li {
      margin: 0;
      border-bottom: none;
      position: relative;
      overflow: hidden;
    }

    .menu-list a {
      display: block;
      padding: 10px 12px;
      color: #ffffff;
      text-decoration: none;
      font-size: 12px;
      font-weight: 600;
      transition: all var(--transition-fast);
      position: relative;
      z-index: 2;
      letter-spacing: 0.3px;
      border-left: 2px solid transparent;
      background: rgba(0, 255, 255, 0.05);
      margin: 2px 4px;
      border-radius: var(--border-radius-sm);
      text-align: left;
    }

    .menu-list a:active {
      background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.25) 0%, 
        rgba(0, 200, 200, 0.25) 100%);
      border-left-color: var(--color-primary);
      transform: scale(0.98);
    }

    .menu-list a::after {
      display: none;
    }

    #mobileMenu::-webkit-scrollbar {
      width: 6px;
    }

    #mobileMenu::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.5);
      border-radius: 3px;
    }

    #mobileMenu::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      border-radius: 3px;
    }

    #mobileMenu::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ffffff 0%, var(--color-primary) 100%);
    }

    /* モバイルテーブルスタイル */
    .ranking-row {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: flex-start;
    }

    .video-text-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      color: var(--color-mid-cyan);
    }


    table thead {
      display: none;
    }

    .chart-container {
      height: 250px !important;
      padding: 10px;
      margin: 10px auto;
    }

    header {
      padding: 1rem 0;
    }

    table tbody tr {
      display: block;
      border: 1px solid rgba(0, 255, 255, 0.4);
      border-radius: var(--border-radius-md);
      margin: 8px 0;
      padding: 8px;
      background: var(--color-bg-mid);
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
      overflow: hidden !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    table tbody td {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      padding: 3px 0 !important;
      font-size: 0.75rem !important;
      text-align: left !important;
      background: radial-gradient(circle at center, rgba(0, 255, 255, 0.13), rgba(0, 51, 68, 0.33));
      border-radius: 8px;
      font-weight: bold;
      color: var(--color-dark-cyan);
      overflow: hidden !important;
      box-sizing: border-box !important;
      text-shadow: none;
      box-shadow: inset 0 0 8px rgba(0,255,255,0.4), 0 0 8px rgba(0,255,255,0.2);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(0, 255, 255, 0.3);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      overflow: hidden;
      max-width: 100%;
      box-sizing: border-box;
    }

    table tbody td:nth-child(1) {
      font-size: 0.9rem !important;
      font-weight: bold;
      color: var(--color-mid-cyan);
      text-align: center !important;
      margin-bottom: 8px;
    }

    table tbody td:nth-child(2),
    table tbody td:nth-child(3),
    table tbody td:nth-child(4) {
      text-align: left !important;
    }

    table tbody td:nth-child(2) iframe {
      width: 100% !important;
      height: auto !important;
      margin-bottom: 10px;
    }

    table tbody td:nth-child(4) {
      font-size: 1rem !important;
      text-align: left !important;
    }

    .iframe-wrapper2 {
      width: 100%;
      max-width: 100%;
    }

    .ranking-row-mobile {
      display: flex;
      flex-direction: column;
      gap: 0px;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }

    .video-text-container-mobile > div {
      font-size: 0.9rem;
      margin-left: 0;
      line-height: 1.4;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }

    .video-text-container-mobile .btn {
      padding: 6px 10px;
      font-size: 0.75rem;
    }

    .video-text-container-mobile {
      width: 100%;
      max-width: 100%;
      text-align: left;
      padding-top: 0px;
      padding-left: 0 !important;
      padding-right: 3px !important;
      box-sizing: border-box;
      margin: 0;
      margin-left: 0 !important;
      overflow: hidden;
    }

    .video-text-container-mobile > div:first-child {
      margin-top: 0;
      margin-bottom: 0px;
      justify-content: flex-start !important;
      padding-left: 0 !important;
      margin-left: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }

    /* モバイル用のアニメ情報テキスト（タイトル・曲名・歌手）の余白調整 */
    .video-text-container-mobile .anime-info-text-mobile {
      font-size: 0.71rem !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 8px !important;
      margin-bottom: 8px !important;
      line-height: 1.7 !important;
      padding: 4px 2px !important;
      text-shadow: none !important;
      color: #003333 !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      word-break: break-word !important;
    }

    /* モバイル用のボタン横並び */
    .video-text-container-mobile .mobile-action-buttons {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      flex-wrap: nowrap;
      width: 95% !important;
      max-width: 95% !important;
      box-sizing: border-box;
      overflow: hidden !important;
    }

    .video-text-container-mobile .mobile-action-buttons .btn {
      flex: 1;
      max-width: 42%;
      min-width: 0;
      padding: 4px 5px;
      font-size: 0.6rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box !important;
    }


    .metric-number {
      font-size: 0.75rem !important;
      padding-left: 0 !important;
      padding-top: 5px !important;
      font-weight: bold !important;
      color: #222 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      margin-left: 0 !important;
      text-shadow: none !important;
      display: block !important;
      max-width: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }

    /* モバイル用ランキング順位のみに光彩効果をかける */
    .rank-mobile {
      font-size: 1.1rem !important;
      font-weight: 900 !important;
      color: #FFFF00 !important;
      text-shadow: 
        0 0 10px rgba(255, 255, 0, 0.8),
        0 0 20px rgba(255, 255, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8) !important;
      margin-right: 3px !important;
      margin-left: 0 !important;
      padding-left: 0 !important;
      flex-shrink: 0 !important;
    }
    
    /* すべての子要素の幅を強制制限 - 最終手段 */
    .col-7 .ranking-row-mobile *,
    .col-7 .video-text-container-mobile * {
      max-width: 100% !important;
      overflow-wrap: break-word !important;
      word-wrap: break-word !important;
    }
    
    /* ボタンコンテナの幅制限 */
    .mobile-action-buttons {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
    
    /* コメントプレビューの幅制限 */
    .comment-preview,
    .comment-preview-item {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
    
    /* アニメ情報テキストの幅制限 */
    .anime-info-text-mobile {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      word-break: break-all !important;
    }
    
    /* 再生数表示の幅制限 */
    .metric-number {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }

  /* モバイルボタングループ */
  .mobile-button-group {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 99999;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    pointer-events: auto;
    min-height: 40px; /* CLS防止: 実測値40px */
    contain: layout style;
  }
  
  .mobile-button-group * {
    pointer-events: auto;
  }
  
  /* 国旗 + TOP の横並びラッパー */
  .mobile-button-group .lang-top-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }

  .mobile-button-group #toggleTopBtn {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-mid) 100%);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 
      0 0 8px rgba(0, 255, 255, 0.2),
      inset 0 0 8px rgba(0, 255, 255, 0.05);
  }

  .mobile-button-group #toggleMenu {
    position: static !important;
    top: auto;
    right: auto;
    padding: 0;
    font-size: 1.3rem;
    width: 30px;
    height: 30px;
    min-height: auto;
    min-width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* ============================================
    セクション調整
    ============================================ */
  #rankingSection,
  #chartSection,
  #infoSection {
    white-space: normal !important;
    text-align: left;
  }

  .menu-cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
  }

  /* ============================================
    番組表ページ専用スタイル
    ============================================ */
  body.schedule-page {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.schedule-page .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 50px 10px 10px 10px !important;
    box-sizing: border-box;
  }

  body.schedule-page main.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.schedule-page .container-fluid > .row {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    min-height: 100vh !important; /* CLS防止: height: autoを削除 */
    width: 100% !important;
    max-width: 100% !important;
  }

  /* schedule-pageでは左カラムを非表示 */
  body.schedule-page .col-5,
  body.schedule-page #leftColumn1,
  body.schedule-page #leftColumn2,
  body.schedule-page .col-lg-block {
    display: none !important;
  }

  /* コンテンツを全幅に */
  body.schedule-page .col-7,
  body.schedule-page .col-lg-auto,
  body.schedule-page .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ヘッダーを完全に非表示 */
  body.schedule-page .header {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 曜日選択 - PC用は通常フローで中央配置 */
  body.schedule-page .day-selector {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 15px 20px !important;
    margin: 0 auto !important;
    max-width: 900px !important;
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important;
    border-radius: 12px !important;
  }
  
  /* 番組表バナー - PC用は通常フローで中央配置 */
  body.schedule-page .banner-row-container {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 auto 15px auto !important;
    padding: 10px 20px !important;
    max-width: 1000px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 番組表コンテンツ */
  body.schedule-page .schedule-grid {
    margin-top: 20px !important;
    width: 100% !important;
  }
  
  /* 番組表コンテナ全体 */
  body.schedule-page .container {
    padding-top: 20px !important;
  }

  /* 広告関連を完全に非表示・サイズゼロ */
  body.schedule-page .ad-wrapper,
  body.schedule-page .ad-container,
  body.schedule-page .adsbygoogle,
  body.schedule-page ins.adsbygoogle {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }










  body.schedule-page .day-btn {
    padding: 10px 20px;
    background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
    border: 2px solid #333;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
  }

  body.schedule-page .day-btn:hover {
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
  }

  body.schedule-page .day-btn.active {
    background: linear-gradient(145deg, #00d4ff, #0099cc);
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  }

  body.schedule-page .schedule-grid {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1px;
    background: #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    margin: 0;
    width: 100%;
  }

  body.schedule-page .time-slot {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    padding: 10px 5px;
    text-align: center;
    font-weight: bold;
    border-right: 2px solid #00d4ff;
    color: #00d4ff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.schedule-page .programs-slot {
    background: linear-gradient(145deg, #0f0f0f, #1f1f1f);
    padding: 8px;
    min-height: 50px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }

  body.schedule-page .anime-card {
    display: flex;
    align-items: flex-start;
    background: linear-gradient(145deg, #1e1e1e, #2e2e2e);
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: calc(33.33% - 6px);
    min-width: 280px;
    flex: 1 1 280px;
  }

  body.schedule-page .anime-card:hover {
    border-color: #00d4ff;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
    transform: translateY(-1px);
  }

  body.schedule-page .anime-thumb-wrapper {
    width: 120px;
    height: 68px;
    position: relative;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.schedule-page .anime-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.schedule-page .no-thumb-text {
    position: absolute;
    color: #aaa;
    font-size: 0.7rem;
    font-weight: bold;
    display: none;
  }

  body.schedule-page .anime-thumb-wrapper.no-thumb .no-thumb-text {
    display: block;
  }

  body.schedule-page .anime-info {
    flex: 1;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
  }

  body.schedule-page .anime-title {
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    word-break: break-word;
  }

  body.schedule-page .anime-channel {
    font-size: 0.7rem;
    color: #00d4ff;
    line-height: 1.4;
    margin-bottom: 4px;
    word-break: break-word;
  }

  body.schedule-page .summer-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    margin-left: 5px;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
    flex-shrink: 0;
  }

  body.schedule-page .summer-badge::before {
    content: '☀';
    margin-right: 2px;
    font-size: 0.7rem;
  }

  body.schedule-page .free-toggle-btn {
    background: #444;
    color: #00d4ff;
    border: 1px solid #666;
    padding: 2px 6px;
    font-size: 0.65rem;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 5px;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  body.schedule-page .free-toggle-btn:hover {
    background: #555;
    border-color: #00d4ff;
  }

  body.schedule-page .free-info {
    margin-top: 4px;
    font-size: 0.65rem;
    color: #aaa;
    line-height: 1.4;
    border-left: 2px solid #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    padding: 4px 6px;
    border-radius: 3px;
    display: none;
  }

  body.schedule-page .free-info.show {
    display: block;
  }

  body.schedule-page .d-flex.gap-1 {
    margin-top: 4px;
  }

  body.schedule-page .btn-outline-warning,
  body.schedule-page .btn-outline-danger {
    padding: 3px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
  }

  body.schedule-page .loading {
    text-align: center;
    padding: 40px;
    color: #00d4ff;
    font-size: 1rem;
  }

  /* ============================================
    番組表 - PC表示 (992px以上)
    ============================================ */
  @media (min-width: 992px) {
    body.schedule-page .container {
      padding: 20px 15px !important;
    }
    
    body.schedule-page .header h2 {
      font-size: 2.2rem;
    }
    
    body.schedule-page .schedule-grid {
      grid-template-columns: 70px 1fr;
      margin: 0 auto;
      max-width: 1400px;
    }
    
    body.schedule-page .anime-card {
      width: calc(50% - 4px);
    }
  }

  /* ============================================
    番組表 - タブレット (768px-991px)
    ============================================ */
  @media (min-width: 768px) and (max-width: 991px) {
    body.schedule-page .header h2 {
      font-size: 2rem;
    }
    
    body.schedule-page .schedule-grid {
      margin-top: 80px; /* 曜日選択の高さ分 */
      grid-template-columns: 65px 1fr;
    }
    
    body.schedule-page .anime-card {
      width: calc(50% - 4px);
    }
  }

  /* ============================================
    番組表 - モバイル (767px以下)
    ============================================ */
  @media (max-width: 767px) {
    /* ページ全体を画面いっぱいに */
    body.schedule-page {
      width: 100vw !important;
      overflow-x: hidden !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    body.schedule-page .container {
      width: 100vw !important;
      max-width: 100vw !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    body.schedule-page .header {
      margin-bottom: 10px;
      margin-top: 70px; /* 曜日選択の高さ分 */
      padding: 10px 5px;
      width: 100%;
    }
    
    body.schedule-page .header h2 {
      font-size: 1.3rem;
      padding: 0 5px;
    }
    
    
    /* 番組表バナーを非表示（モバイル） */
    body.schedule-page .banner-row-container {
      display: none !important;
    }
    
    /* 曜日選択を固定（モバイル）- サイトタイトル直下 */
    body.schedule-page .day-selector {
      position: fixed !important;
      top: 35px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 8px 5px !important;
      margin: 0 !important;
      background: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important;
      z-index: 1000 !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap !important;
      border-radius: 0 !important;
    }
    
    body.schedule-page .day-btn {
      padding: 8px 14px;
      font-size: 0.75rem;
      flex-shrink: 0;
    }
    
    /* グリッドを画面幅いっぱいに */
    body.schedule-page .schedule-grid {
      grid-template-columns: 45px 1fr !important;
      width: 100vw !important;
      max-width: 100vw !important;
      margin: 0 !important;
      margin-top: 55px !important; /* 曜日選択バーの高さ分 */
      padding: 0 !important;
      padding-top: 0 !important;
      border-radius: 0 !important;
      gap: 0 !important;
    }
    
    body.schedule-page .time-slot {
      padding: 8px 2px;
      font-size: 0.7rem;
    }
    
    body.schedule-page .programs-slot {
      padding: 5px;
      gap: 5px;
      width: 100%;
    }
    
    body.schedule-page .anime-card {
      width: 100%;
      padding: 5px;
      margin: 0;
    }
    
    body.schedule-page .anime-thumb-wrapper {
      width: 90px;
      height: 51px;
    }
    
    body.schedule-page .anime-info {
      margin-left: 5px;
      flex: 1;
      min-width: 0;
    }
    
    body.schedule-page .anime-title {
      font-size: 0.75rem !important;
      margin-bottom: 3px !important;
      line-height: 1.2 !important;
    }
    
    body.schedule-page .anime-channel {
      font-size: 0.65rem !important;
      margin-bottom: 3px !important;
      line-height: 1.3 !important;
    }
    
    body.schedule-page .summer-badge {
      font-size: 0.6rem;
      padding: 1px 3px;
      margin-left: 3px;
    }
    
    body.schedule-page .free-toggle-btn {
      padding: 1px 4px;
      font-size: 0.6rem;
    }
    
    body.schedule-page .free-info {
      font-size: 0.6rem;
      padding: 3px 4px;
      margin-top: 3px;
    }
    
    body.schedule-page .btn-outline-warning,
    body.schedule-page .btn-outline-danger {
      padding: 2px 5px;
      font-size: 0.6rem;
    }
    
    body.schedule-page .d-flex.gap-1 {
      margin-top: 3px;
      gap: 3px;
    }
  }

  /* ============================================
    番組表 - 極小デバイス (480px以下)
    ============================================ */
  @media (max-width: 480px) {
    body.schedule-page .schedule-grid {
      grid-template-columns: 40px 1fr;
    }
    
    body.schedule-page .time-slot {
      font-size: 0.65rem;
      padding: 6px 1px;
    }
    
    body.schedule-page .anime-thumb-wrapper {
      width: 85px;
      height: 48px;
    }
    
    body.schedule-page .anime-title {
      font-size: 0.7rem;
    }
    
    body.schedule-page .anime-channel {
      font-size: 0.6rem;
    }
  }
  /* ============================================
    番組表ページ - レスポンシブ調整
    ============================================ */
  @media (min-width: 992px) {
    body.schedule-page .container {
      max-width: 98% !important;
      padding: 20px 1% !important;
    }
    
    body.schedule-page .header h2 {
      font-size: 2.5rem;
    }
    
    body.schedule-page .schedule-grid {
      grid-template-columns: 80px 1fr !important;
    }
    
    body.schedule-page .programs-slot {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    body.schedule-page .anime-card {
      flex: 1 1 calc(33.333% - 10px);
      min-width: 250px;
      max-width: calc(33.333% - 10px);
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    body.schedule-page .container {
      max-width: 98% !important;
      padding: 15px 1% !important;
    }
    
    body.schedule-page .header h2 {
      font-size: 2rem;
    }
    
    body.schedule-page .schedule-grid {
      grid-template-columns: 70px 1fr !important;
    }
    
    body.schedule-page .anime-card {
      flex: 1 1 calc(50% - 10px);
      min-width: 200px;
      max-width: calc(50% - 10px);
    }
    
    body.schedule-page main.container-fluid {
      position: static !important;
    }
    
    body.schedule-page .container-fluid > .row {
      position: static !important;
      min-height: 100vh !important; /* CLS防止: height: autoを削除 */
      overflow: visible !important;
    }
    
    body.schedule-page .col-12 {
      min-height: auto !important; /* col-12はautoでOK */
      overflow-y: visible !important;
      position: static !important;
    }
  }

  @media (max-width: 767px) {
    body.schedule-page {
      padding: 0 !important;
      margin: 0 !important;
    }
    
    body.schedule-page .container {
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 10px 1% !important;
    }
    
    body.schedule-page .header {
      padding: 0 1%;
      margin-bottom: 20px;
    }
    
    body.schedule-page .header h2 {
      font-size: 1.5rem;
    }
    
    body.schedule-page .day-selector {
      padding: 0 1%;
      margin-bottom: 20px;
    }
    
    body.schedule-page .schedule-grid {
      grid-template-columns: 60px 1fr !important;
      width: 100% !important;
    }
    
    body.schedule-page .anime-card {
      width: 100%;
      min-width: auto;
      flex-direction: row;
    }
    
    body.schedule-page .anime-thumb-wrapper {
      width: 100px;
      height: 56px;
    }
  }

  @media (max-width: 480px) {
    body.schedule-page .container {
      padding: 10px 0.5% !important;
    }
    
    body.schedule-page .schedule-grid {
      grid-template-columns: 50px 1fr !important;
    }
    
    body.schedule-page .anime-thumb-wrapper {
      width: 90px;
      height: 50px;
    }
  }

  /* 番組表ページ専用 - base.htmlのstyleセクションに追加 */
  body.schedule-page main.container-fluid {
    padding: 0 !important;
  }

  body.schedule-page .row {
    margin: 0 !important;
  }

  body.schedule-page .col-5,
  body.schedule-page .d-lg-block {
    display: none !important;
  }

  body.schedule-page .col-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* ============================================
    新作アニメページ専用スタイル
    ============================================ */

  /* 新作アニメページの判定とフル画面化 */
  body.new-anime-page {
    padding: 0 !important;
    margin: 0 !important;
  }

  body.new-anime-page main.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 60px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.new-anime-page .row {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    min-height: 100vh !important; /* CLS防止: height: autoを削除 */
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 左カラムを完全に非表示・サイズゼロ */
  body.new-anime-page .col-5,
  body.new-anime-page .col-5.d-lg-block,
  body.new-anime-page .d-none.d-lg-block,
  body.new-anime-page > main > .row > .d-lg-block:not(.col-7) {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* メインコンテンツを全幅 */
  body.new-anime-page .col-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* コンテナを全幅 */
  body.new-anime-page .col-12 {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 新作アニメコンテナを全幅 */
  body.new-anime-page .new-anime-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 768px) {
    body.new-anime-page .col-12 {
      padding: 0 !important;
    }
  }

  /* ============================================
    アニメグリッドレイアウト
    ============================================ */
  .anime-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
  }

  @media (max-width: 991px) {
    .anime-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }

  /* ============================================
    アニメカード
    ============================================ */
  .anime-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.95) 100%);
    border-radius: 16px;
    box-shadow: 
      0 8px 24px rgba(0, 0, 0, 0.15),
      0 0 20px rgba(0, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid rgba(0, 255, 255, 0.2);
  }

  .anime-card:hover {
    transform: translateY(-8px);
    box-shadow: 
      0 12px 35px rgba(0, 0, 0, 0.2),
      0 0 30px rgba(0, 255, 255, 0.3);
    border-color: rgba(0, 255, 255, 0.4);
  }

  /* ============================================
    サムネイル部分
    ============================================ */
  .anime-thumbnail {
    position: relative;
    overflow: hidden;
    height: 280px;
  }

  .anime-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .anime-card:hover .anime-thumbnail img {
    transform: scale(1.1);
  }

  /* オーバーレイ */
  .anime-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, 
      rgba(0, 0, 0, 0.95) 0%, 
      rgba(0, 0, 0, 0.85) 60%, 
      rgba(0, 0, 0, 0.4) 100%);
    padding: 1.5rem 1rem;
    color: white;
    backdrop-filter: blur(4px);
  }

  .anime-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 
      2px 2px 8px rgba(0, 0, 0, 1),
      0 0 15px rgba(0, 255, 255, 0.6),
      0 0 30px rgba(0, 255, 255, 0.3);
    letter-spacing: 0.05em;
    color: #00ffff;
  }

  /* ============================================
    コンテンツ部分
    ============================================ */
  .anime-content {
    padding: 1.5rem;
  }

  .anime-content h4 {
    color: #003333;
    margin-bottom: 1rem;
    border-bottom: 3px solid rgba(0, 255, 255, 0.3);
    padding-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
  }

  .anime-content h5 {
    color: #0066cc;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .anime-description p {
    line-height: 1.8;
    margin-bottom: 1rem;
    color: #333333;
    font-size: 0.95rem;
  }

  /* ============================================
    ポイントリスト
    ============================================ */
  .anime-points {
    padding-left: 0;
    list-style: none;
    margin-top: 1rem;
  }

  .anime-points li {
    padding: 0.8rem 1rem;
    border-left: 4px solid #0066cc;
    margin-bottom: 0.8rem;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 255, 255, 0.05) 100%);
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    color: #333333;
  }

  .anime-points li:hover {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 255, 255, 0.08) 100%);
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.2);
  }

  .anime-points li strong {
    color: #005588;
  }

  /* ============================================
    リンクセクション
    ============================================ */
  .anime-links,
  .anime-schedule,
  .anime-intro {
    margin-top: 1.5rem;
  }

  /* Amazonボタン */
  .amazon-buttons {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .amazon-buttons .btn {
    flex: 1;
    min-width: 100px;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
  }

  .amazon-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  /* ============================================
    スケジュール情報
    ============================================ */
  .schedule-info {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 255, 255, 0.05) 100%);
    padding: 1.2rem;
    border-radius: 8px;
    margin-top: 0.8rem;
    border: 1px solid rgba(0, 255, 255, 0.2);
  }

  .schedule-info p {
    margin-bottom: 0.6rem;
    color: #333333;
    line-height: 1.6;
  }

  .schedule-info strong {
    color: #005588;
  }

  /* ============================================
    ニュースカード
    ============================================ */
  .news-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
  }

  .news-card h3 {
    color: white;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 768px) {
    .news-card {
      padding: 1.5rem;
    }
    
    .news-card h3 {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
    }
  }

  /* ニュースグリッド */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 768px) {
    .news-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }

  .news-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 1.5rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
  }

  .news-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .news-item h5 {
    color: #ffd700;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .news-item p {
    color: #f0f0f0;
    line-height: 1.6;
  }

  /* カテゴリーセクション */
  .category-section,
  .upcoming-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .category-section h4,
  .upcoming-section h4 {
    color: #ffd700;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .category-section p {
    color: #f0f0f0;
    line-height: 1.8;
  }

  /* アップカミンググリッド */
  .upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }

  .upcoming-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
  }

  .upcoming-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
  }

  .upcoming-item h6 {
    color: #ffd700;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
  }

  .upcoming-item p {
    color: #f0f0f0;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* ============================================
    詳細紹介ボタン - サイバー風デザイン
    ============================================ */
  .detail-intro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.2rem;
    background: linear-gradient(135deg, 
      rgba(0, 255, 255, 0.9) 0%, 
      rgba(0, 200, 200, 0.9) 100%);
    border: 2px solid rgba(0, 255, 255, 1);
    border-radius: 8px;
    color: #006688;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
      0 4px 15px rgba(0, 255, 255, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 20px rgba(0, 255, 255, 0.3);
    white-space: nowrap;
  }
  
  /* オーバーレイ内のボタン用スタイル */
  .anime-overlay .detail-intro-btn {
    width: auto;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .detail-intro-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 153, 255, 0.4) 50%, 
      transparent 100%);
    transition: left 0.6s ease;
  }

  .detail-intro-btn:hover::before {
    left: 100%;
  }

  .detail-intro-btn:hover {
    background: linear-gradient(135deg, 
      rgba(0, 255, 255, 1) 0%, 
      rgba(0, 220, 220, 1) 100%);
    border-color: #00ffff;
    color: #006688;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
      0 6px 25px rgba(0, 255, 255, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 0 30px rgba(0, 255, 255, 0.5);
  }

  .detail-intro-btn:active {
    transform: translateY(-2px);
    box-shadow: 
      0 4px 15px rgba(0, 102, 204, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .btn-icon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
  }

  .detail-intro-btn:hover .btn-icon {
    transform: scale(1.3) rotate(15deg);
  }

  .btn-text {
    flex: 1;
    text-align: center;
    letter-spacing: 0.08em;
  }

  .btn-arrow {
    font-size: 1.3rem;
    font-weight: bold;
    transition: transform 0.3s ease;
  }

  .detail-intro-btn:hover .btn-arrow {
    transform: translateX(8px);
  }

  .fade-in-button {
    opacity: 1; /* 修正: opacity: 0は危険 */
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
  }

  .highlight-title-neutral {
    margin: 0;
    font-weight: 700;
  }

  /* ============================================
    セクション見出し
    ============================================ */
  body.new-anime-page #infoSection {
    text-align: center;
    margin: 2rem 0;
    font-size: 2rem;
    color: var(--color-primary) !important;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8) !important;
  }

  @media (max-width: 768px) {
    body.new-anime-page #infoSection {
      font-size: 1.5rem;
      margin: 1.5rem 0;
    }
  }

  /* ============================================
    HR styling
    ============================================ */
  .tight-hr {
    margin: 1rem 0;
    border: 0;
    border-top: 2px solid rgba(0, 255, 255, 0.3);
  }

  /* ============================================
    モバイル最適化
    ============================================ */
  @media (max-width: 768px) {


    body.new-anime-page main.container-fluid {
      padding-top: 60px !important;
    }
    
    .anime-thumbnail {
      height: 220px;
    }
    
    .anime-title {
      font-size: 1.2rem;
    }
    
    .anime-content {
      padding: 1.2rem;
    }
    
    .anime-content h4 {
      font-size: 1.1rem;
    }
    
    .anime-content h5 {
      font-size: 1rem;
    }
    
    .anime-points li {
      padding: 0.6rem 0.8rem;
      font-size: 0.9rem;
    }
    
    .amazon-buttons {
      flex-direction: column;
    }
    
    .amazon-buttons .btn {
      width: 100%;
    }
    
    /* ← ここに追加 */
    .intro-detail-btn {
      padding: 0.8rem 1rem;
      font-size: 0.9rem;
    }
    
    .btn-icon,
    .btn-arrow {
      font-size: 1rem;
    }

    body.new-anime-page main.container-fluid {
      padding-top: 60px !important;
    }
    
    .anime-thumbnail {
      height: 220px;
    }
    
    .anime-title {
      font-size: 1.2rem;
    }
    
    .anime-content {
      padding: 1.2rem;
    }
    
    .anime-content h4 {
      font-size: 1.1rem;
    }
    
    .anime-content h5 {
      font-size: 1rem;
    }
    
    .anime-points li {
      padding: 0.6rem 0.8rem;
      font-size: 0.9rem;
    }
    
    .amazon-buttons {
      flex-direction: column;
    }
    
    .amazon-buttons .btn {
      width: 100%;
    }

  .amazon-buttons .btn {
      width: 100%;
    }
    
    .detail-intro-btn {
      padding: 0.9rem 1.2rem;
      font-size: 1rem;
      gap: 0.6rem;
    }
    
    .btn-icon,
    .btn-arrow {
      font-size: 1.1rem;
    }
  }



  /* 「詳細紹介ボタン」のスタイルを追加 */
  /* 既存の「詳細ボタン」セクションを以下に置き換え */

  /* ============================================
    詳細紹介ボタン - サイバー風デザイン
    ============================================ */
  .intro-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.15) 0%, rgba(0, 153, 255, 0.15) 100%);
    border: 2px solid rgba(0, 102, 204, 0.4);
    border-radius: var(--border-radius-md);
    color: #0066cc;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
      0 4px 15px rgba(0, 102, 204, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .intro-detail-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0, 153, 255, 0.3) 50%, 
      transparent 100%);
    transition: left 0.5s ease;
  }

  .intro-detail-btn:hover::before {
    left: 100%;
  }

  .intro-detail-btn:hover {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.25) 0%, rgba(0, 153, 255, 0.25) 100%);
    border-color: #0099ff;
    color: #0099ff;
    transform: translateY(-3px);
    box-shadow: 
      0 8px 25px rgba(0, 102, 204, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 20px rgba(0, 153, 255, 0.3);
  }

  .intro-detail-btn:active {
    transform: translateY(-1px);
    box-shadow: 
      0 4px 15px rgba(0, 102, 204, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .btn-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  .intro-detail-btn:hover .btn-icon {
    transform: scale(1.2) rotate(10deg);
  }

  .btn-text {
    flex: 1;
    text-align: center;
    letter-spacing: 0.05em;
  }

  .btn-arrow {
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease;
  }

  .intro-detail-btn:hover .btn-arrow {
    transform: translateX(5px);
  }

  .fade-in-button {
    opacity: 1; /* 修正: opacity: 0は危険 */
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
  }


      :root {
          --primary-cyan: #00ffff;
          --primary-dark: #0f2027;
          --secondary-dark: #203a43;
          --tertiary-dark: #2c5364;
          --card-dark: rgba(255, 255, 255, 0.95);
          --card-darker: rgba(240, 240, 240, 0.95);
          --text-cyan: #00ffff;
          --text-light: #e0e0e0;
          --text-dark-cyan: #005555;
          --border-cyan: #00ffff88;
          --shadow-cyan: rgba(0, 255, 255, 0.4);
      }

      * {
          box-sizing: border-box;
      }

      /* ★★★ 中央寄せレイアウトの改善 ★★★ */
      .anime-detail-container {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          padding: 1rem 1rem 2rem;
          min-height: 100vh;
      }

      .anime-detail-wrapper {
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
      }

      /* メインカード */
      .main-card {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.95) 100%);
          border: 2px solid rgba(0, 180, 180, 0.3);
          border-radius: 8px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1), 0 10px 40px rgba(0, 0, 0, 0.15);
          overflow: hidden;
          margin: 0 auto;
          width: 100%;
          max-width: 1000px;  /* ← この1行を追加 */
      }

      /* 画像セクション */
      .image-section {
          position: relative;
          width: 100%;
          aspect-ratio: 16 / 9;
          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }

      .anime-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          opacity: 0.9;
          transition: all 0.6s ease;
      }

      .main-card:hover .anime-image {
          opacity: 1;
          transform: scale(1.05);
      }

      .image-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(transparent, rgba(0,0,0,0.85));
          padding: 2.5rem;
          color: white;
      }

      .image-title {
          font-family: 'Orbitron', sans-serif;
          font-weight: 900;
          font-size: clamp(1.5rem, 4vw, 2.5rem);
          color: var(--text-cyan);
          text-shadow: 0 0 20px #00ffffcc, 0 0 40px #00ffff66;
          margin: 0;
          letter-spacing: 0.05em;
      }

      /* コンテンツセクション */
      .content-section {
          padding: 2.5rem;
      }

      .section-title {
          font-family: 'Orbitron', sans-serif;
          font-weight: 700;
          color: #1e293b;
          text-shadow: none;
          font-size: clamp(1.1rem, 3vw, 1.5rem);
          margin-bottom: 1.5rem;
          padding-bottom: 0.5rem;
          border-bottom: 2px solid rgba(0, 180, 180, 0.3);
          position: relative;
      }

      .section-title::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 60px;
          height: 2px;
          background: linear-gradient(to right, #0d9488, #14b8a6);
          border-radius: 2px;
      }

      .description-text {
          color: #334155;
          line-height: 1.8;
          margin-bottom: 2rem;
          font-size: clamp(0.9rem, 2vw, 1.05rem);
          text-align: justify;
      }

      /* サイバーライン */
      .cyber-line {
          position: relative;
          border: 0;
          height: 3px;
          margin: 2rem 0;
          border-radius: 5px;
          background: linear-gradient(90deg, transparent, rgba(0, 180, 180, 0.6), transparent);
          background-size: 200% 100%;
          animation: gradientFlow 3s ease infinite;
      }

      @keyframes gradientFlow {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
      }

      /* ポイントカードグリッド */
      .points-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 1.5rem;
          margin: 2rem 0;
      }

      .point-card {
          background: rgba(248, 250, 252, 0.9);
          border: 1px solid rgba(0, 180, 180, 0.3);
          border-radius: 8px;
          padding: 1.8rem;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
          backdrop-filter: blur(8px);
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
      }

      .point-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(circle at center, rgba(0, 255, 255, 0.2), transparent);
          opacity: 0;
          transition: opacity 0.4s ease;
      }

      .point-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 50px var(--shadow-cyan);
      }

      .point-card:hover::before {
          opacity: 1;
      }

      .point-title {
          font-family: 'Orbitron', sans-serif;
          font-weight: 700;
          color: #0f766e;
          font-size: 1.15rem;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }

      .point-title::before {
          content: '';
          font-size: 1.3rem;
      }

      .point-text {
          color: #475569;
          line-height: 1.7;
          margin: 0;
          font-size: 0.95rem;
      }

      /* ボタンセクション */
      .button-section {
          background: rgba(248, 250, 252, 0.9);
          border: 2px solid rgba(0, 180, 180, 0.3);
          border-radius: 8px;
          padding: 2rem;
          margin: 2rem 0;
          text-align: center;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      }

      .button-section h3 {
          font-family: 'Orbitron', sans-serif;
          font-weight: 700;
          color: #1e293b;
          text-shadow: none;
          margin-bottom: 1.5rem;
          font-size: clamp(1rem, 3vw, 1.3rem);
      }

      .amazon-buttons {
          display: flex;
          gap: 1rem;
          justify-content: center;
          flex-wrap: wrap;
          max-width: 800px;
          margin: 0 auto;
      }

      .amazon-btn {
          background: linear-gradient(135deg, #FF9900, #FF6600);
          color: #ffffff;
          border: 2px solid #FF6600;
          padding: 1rem 2.5rem;
          border-radius: 8px;
          font-weight: bold;
          text-decoration: none;
          transition: all 0.4s ease;
          font-family: 'Orbitron', sans-serif;
          box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
          position: relative;
          overflow: hidden;
          font-size: clamp(0.9rem, 2vw, 1rem);
          flex: 1 1 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
      }

      .amazon-btn::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(0, 255, 255, 0.3);
          border-radius: 50%;
          transition: all 0.6s ease;
          transform: translate(-50%, -50%);
      }

      .amazon-btn:hover {
          color: #ffffff;
          background: linear-gradient(135deg, #FFB340, #FF8800);
          box-shadow: 0 6px 20px rgba(255, 153, 0, 0.6);
          transform: translateY(-5px);
      }

      .amazon-btn:hover::before {
          width: 300%;
          height: 300%;
      }

      /* スケジュールセクション */
      .schedule-section {
          background: rgba(248, 250, 252, 0.9);
          border: 2px solid rgba(0, 180, 180, 0.3);
          border-radius: 8px;
          padding: 2rem;
          margin: 2rem 0;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      }

      .schedule-section h3 {
          font-family: 'Orbitron', sans-serif;
          font-weight: 700;
          color: #1e293b;
          text-shadow: none;
          text-align: center;
          margin-bottom: 2rem;
          font-size: clamp(1rem, 3vw, 1.3rem);
      }

      .schedule-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 1.5rem;
      }

      .schedule-item {
          background: rgba(248, 250, 252, 0.9);
          border: 1px solid rgba(0, 180, 180, 0.3);
          border-radius: 12px;
          padding: 1.8rem;
          backdrop-filter: blur(10px);
          transition: all 0.4s ease;
      }

      .schedule-item:hover {
          background: rgba(224, 242, 254, 0.9);
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

      .schedule-item h4 {
          font-family: 'Orbitron', sans-serif;
          font-weight: 700;
          color: #0f766e;
          font-size: 1.1rem;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }

      .schedule-item p {
          color: #475569;
          margin: 0.5rem 0;
          line-height: 1.6;
          font-size: 0.95rem;
      }

      .schedule-item strong {
          color: #0f766e;
      }

      /* レスポンシブ対応 */
      @media (max-width: 1024px) {
          .anime-detail-wrapper {
              max-width: 95%;
          }
          
          .points-grid {
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          }
      }

      @media (max-width: 768px) {
          .anime-detail-container {
              padding: 0.3rem 0.3rem 1rem;
          }
          
          .image-section {
              aspect-ratio: 16 / 9;
              height: auto;
          }
          
          .image-overlay {
              padding: 0.8rem;
          }
          
          .image-title {
              font-size: 1.1rem !important;
          }
          
          .content-section {
              padding: 0.8rem;
          }
          
          /* セクションタイトルをコンパクトに */
          .section-title {
              font-size: 0.82rem !important;
              margin-bottom: 0.6rem !important;
              padding-bottom: 0.3rem !important;
          }
          
          /* 作品紹介テキストをコンパクトに */
          .description-text {
              font-size: 0.72rem !important;
              line-height: 1.6 !important;
              margin-bottom: 1rem !important;
          }
          
          /* サイバーラインの余白を削減 */
          .cyber-line {
              margin: 1rem 0 !important;
          }
          
          /* ポイントカードを1カラム表示に */
          .points-grid {
              grid-template-columns: 1fr !important;
              gap: 0.5rem !important;
              margin: 0.8rem 0 !important;
          }
          
          /* ポイントカードの内容をコンパクトに */
          .point-card {
              padding: 0.6rem !important;
              border-radius: 10px !important;
          }
          
          .point-title {
              font-size: 0.62rem !important;
              margin-bottom: 0.4rem !important;
              line-height: 1.3 !important;
          }
          
          .point-title::before {
              font-size: 0.8rem !important;
          }
          
          .point-text {
              font-size: 0.58rem !important;
              line-height: 1.5 !important;
          }
          
          /* Amazonカードも2カラムに収まるよう調整 */
          .amazon-card {
              padding: 0.6rem !important;
              gap: 0.6rem !important;
              min-height: 300px !important;
          }
          
          .amazon-card .point-title {
              font-size: 0.58rem !important;
              margin: 0.2rem 0 !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-card .point-text {
              font-size: 0.54rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-card img {
              position: absolute !important;
              top: 0 !important;
              left: 0 !important;
              width: 100% !important;
              height: 100% !important;
              max-width: none !important;
              max-height: none !important;
              object-fit: cover !important;
          }
          
          .amazon-card .amazon-icon {
              font-size: 1.2rem !important;
              margin-bottom: 0.2rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-link {
              padding: 0.4rem 0.6rem !important;
              font-size: 0.65rem !important;
          }
          
          .button-section {
              padding: 0.3rem !important;
              margin: 0.5rem 0 !important;
          }
          
          .button-section h3 {
              margin-bottom: 0.3rem !important;
              font-size: 0.75rem !important;
              line-height: 1.2 !important;
          }
          
          .amazon-buttons {
              flex-direction: column;
              gap: 0.2rem !important;
          }
          
          .amazon-btn {
              width: 100%;
              padding: 0.15rem 0.8rem !important;
              font-size: 0.7rem !important;
              line-height: 1.2 !important;
          }
          
          .schedule-grid {
              grid-template-columns: 1fr;
          }
          
          .schedule-item {
              padding: 0.8rem !important;
          }
          
          .schedule-item h4 {
              font-size: 0.75rem !important;
              margin-bottom: 0.4rem !important;
          }
          
          .schedule-item p {
              font-size: 0.65rem !important;
              margin: 0.2rem 0 !important;
              line-height: 1.4 !important;
          }
      }

      @media (max-width: 480px) {
          .anime-detail-container {
              padding: 0.2rem 0.2rem 0.8rem;
          }
          
          .main-card {
              border-radius: 12px;
          }
          
          .image-section {
              aspect-ratio: 16 / 9;
              height: auto;
          }
          
          .image-overlay {
              padding: 0.6rem;
          }
          
          .image-title {
              font-size: 0.95rem !important;
          }
          
          .content-section {
              padding: 0.6rem;
          }
          
          .section-title {
              font-size: 0.72rem !important;
              margin-bottom: 0.5rem !important;
          }
          
          .description-text {
              font-size: 0.65rem !important;
              line-height: 1.5 !important;
              margin-bottom: 0.8rem !important;
          }
          
          .cyber-line {
              margin: 0.8rem 0 !important;
              height: 2px !important;
          }
          
          .points-grid {
              grid-template-columns: 1fr !important;
              gap: 0.4rem !important;
              margin: 0.6rem 0 !important;
          }
          
          .point-card {
              padding: 0.5rem !important;
              border-radius: 8px !important;
          }
          
          .point-title {
              font-size: 0.55rem !important;
              margin-bottom: 0.3rem !important;
              gap: 0.2rem !important;
          }
          
          .point-title::before {
              font-size: 0.7rem !important;
          }
          
          .point-text {
              font-size: 0.52rem !important;
              line-height: 1.45 !important;
          }
          
          .amazon-card {
              padding: 0.5rem !important;
              gap: 0.5rem !important;
              min-height: 250px !important;
          }
          
          .amazon-card .point-title {
              font-size: 0.52rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-card .point-text {
              font-size: 0.5rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-card img {
              position: absolute !important;
              top: 0 !important;
              left: 0 !important;
              width: 100% !important;
              height: 100% !important;
              max-width: none !important;
              max-height: none !important;
              object-fit: cover !important;
          }
          
          .amazon-card .amazon-icon {
              font-size: 1rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-link {
              padding: 0.35rem 0.5rem !important;
              font-size: 0.58rem !important;
          }
          
          .button-section,
          .schedule-section {
              padding: 0.2rem !important;
              margin: 0.4rem 0 !important;
          }
          
          .button-section h3 {
              font-size: 0.68rem !important;
              margin-bottom: 0.2rem !important;
              line-height: 1.2 !important;
          }
          
          .amazon-btn {
              padding: 0.12rem 0.6rem !important;
              font-size: 0.65rem !important;
              line-height: 1.15 !important;
          }
          
          .schedule-item {
              padding: 0.6rem !important;
          }
          
          .schedule-item h4 {
              font-size: 0.68rem !important;
              margin-bottom: 0.3rem !important;
          }
          
          .schedule-item p {
              font-size: 0.6rem !important;
              margin: 0.15rem 0 !important;
              line-height: 1.35 !important;
          }
      }

      /* ============================================
         モバイル - Amazonカードのインラインスタイル上書き
         ============================================ */
      @media (max-width: 768px) {
          .amazon-card[style] {
              display: flex !important;
              flex-direction: column !important;
              align-items: center !important;
              padding: 0.6rem !important;
              gap: 0.5rem !important;
              min-height: 300px !important;
              position: relative !important;
          }
          
          .amazon-card div[style*="text-align: center"] {
              width: 100% !important;
              position: relative !important;
              z-index: 3 !important;
          }
          
          .amazon-card div[style*="display: flex"][style*="justify-content: center"] {
              position: absolute !important;
              top: 0 !important;
              left: 0 !important;
              right: 0 !important;
              bottom: 0 !important;
              width: 100% !important;
              height: 100% !important;
              z-index: 1 !important;
          }
          
          .amazon-card img[style] {
              position: absolute !important;
              top: 0 !important;
              left: 0 !important;
              width: 100% !important;
              height: 100% !important;
              max-width: none !important;
              max-height: none !important;
              object-fit: cover !important;
              border-radius: 0 !important;
          }
          
          .amazon-card .amazon-link[style] {
              width: auto !important;
              padding: 0.4rem 0.6rem !important;
              font-size: 0.65rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
      }
      
      @media (max-width: 480px) {
          .amazon-card[style] {
              padding: 0.5rem !important;
              gap: 0.4rem !important;
              min-height: 250px !important;
          }
          
          .amazon-card img[style] {
              position: absolute !important;
              top: 0 !important;
              left: 0 !important;
              width: 100% !important;
              height: 100% !important;
              max-width: none !important;
              max-height: none !important;
              object-fit: cover !important;
              border-radius: 0 !important;
          }
          
          .amazon-card .amazon-link[style] {
              padding: 0.35rem 0.5rem !important;
              font-size: 0.58rem !important;
              position: relative !important;
              z-index: 3 !important;
          }
      }

      /* アニメーション */
      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(40px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .main-card {
          animation: fadeInUp 0.8s ease-out;
      }


  /* ============================================
    広告コンテナの修正 - レイアウト崩れ防止
    ============================================ */

  /* 番組表ページ専用の広告スタイル */
  body.schedule-page .ad-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    padding: 10px !important;
    background: transparent !important;
    z-index: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.schedule-page .ad-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.schedule-page .ad-container ins {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 番組表グリッドのレイアウト保護 */
  body.schedule-page .schedule-grid {
    display: grid !important;
    grid-template-columns: 45px 1fr !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body.schedule-page .time-slot,
  body.schedule-page .programs-slot {
    box-sizing: border-box !important;
  }

  /* 広告後のコンテンツのリセット */
  body.schedule-page .ad-container + * {
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* モバイル表示時の追加修正 */
  @media (max-width: 767px) {
    body.schedule-page .container {
      width: 100vw !important;
      max-width: 100vw !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow-x: hidden !important;
    }
    
    /* 広告エリアの幅制限 */
    body.schedule-page .ad-container {
      width: 100vw !important;
      max-width: 100vw !important;
      padding: 10px 0 !important;
      margin: 15px 0 !important;
    }
    
    body.schedule-page .ad-container ins.adsbygoogle {
      width: 100% !important;
      max-width: 100vw !important;
      overflow: hidden !important;
    }
    
    /* 番組表グリッドの保護を強化 */
    body.schedule-page .schedule-grid {
      grid-template-columns: 45px 1fr !important;
      width: 100vw !important;
      position: relative !important;
      margin-top: 55px !important; /* 曜日選択バーの下から */
    }
    
    body.schedule-page .programs-slot {
      width: 100% !important;
      overflow-x: hidden !important;
    }
    
    body.schedule-page .anime-card {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  /* ============================================
    広告ラッパーの修正
    ============================================ */
  body.schedule-page .ad-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    display: block !important;
    clear: both !important;
  }

  body.schedule-page .ad-wrapper .ad-container {
    position: relative !important;
    margin: 0 auto !important;
    max-width: 728px !important;
    width: 100% !important;
    display: block !important;
  }

  body.schedule-page .ad-wrapper * {
    box-sizing: border-box !important;
  }

  /* 番組表グリッドの保護を強化 */
  body.schedule-page .schedule-grid {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    position: relative !important;
  }

  /* グリッドの直接の子要素のみをターゲット */
  body.schedule-page .schedule-grid > .time-slot {
    grid-column: 1 !important;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    padding: 10px 5px;
    text-align: center;
    font-weight: bold;
    border-right: 2px solid #00d4ff;
    color: #00d4ff;
    font-size: 0.75rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  body.schedule-page .schedule-grid > .programs-slot {
    grid-column: 2 !important;
    background: linear-gradient(145deg, #0f0f0f, #1f1f1f);
    padding: 8px;
    min-height: 50px;
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  @media (max-width: 767px) {
    body.schedule-page .schedule-grid {
      grid-template-columns: 45px 1fr !important;
      width: 100vw !important;
      max-width: 100vw !important;
      margin-top: 55px !important; /* 曜日選択バーの下から */
    }
    
    body.schedule-page .ad-wrapper {
      width: 100vw !important;
      margin: 15px 0 !important;
    }
    
    body.schedule-page .ad-wrapper .ad-container {
      width: 100% !important;
      padding: 0 10px !important;
    }
  }

  @media (max-width: 480px) {
    body.schedule-page .schedule-grid {
      grid-template-columns: 40px 1fr !important;
    }
  }


  /* ============================================
    モバイル - ランキングナンバーの強化 (アクアマリン)
    ============================================ */
  @media (max-width: 768px) {
    /* ランキング順位 - シンプル表示（明るい黄色ネオン） */
    .rank-mobile {
      font-size: 1.1rem !important;
      font-weight: 900 !important;
      color: #FFFF00 !important;
      margin-left: 0px !important;
      padding-left: 2px !important;
      padding-right: 3px !important;
      text-shadow: 
        0 0 10px rgba(255, 255, 0, 1),
        0 0 20px rgba(255, 255, 0, 0.8),
        0 0 30px rgba(255, 230, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.9) !important;
      background: transparent !important;
      border-radius: 0 !important;
      padding: 3px 5px !important;
      display: inline-block;
      border: none !important;
      box-shadow: none !important;
      position: relative;
      overflow: visible !important;
      min-width: 30px;
      text-align: center;
      flex-shrink: 0 !important;
    }

    /* 疑似要素を無効化 */
    .rank-mobile::before,
    .rank-mobile::after {
      display: none !important;
      content: none !important;
    }

    /* TOP3も同じスタイル */
    .ranking-row-mobile:nth-child(1) .rank-mobile,
    .ranking-row-mobile:nth-child(2) .rank-mobile,
    .ranking-row-mobile:nth-child(3) .rank-mobile {
      background: transparent !important;
      color: #FFFF00 !important;
      border: none !important;
      text-shadow: 
        0 0 10px rgba(255, 255, 0, 1),
        0 0 20px rgba(255, 255, 0, 0.8),
        0 0 30px rgba(255, 230, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.9) !important;
      box-shadow: none !important;
      font-size: 1.1rem !important;
    }

    .video-text-container-mobile > div:first-child {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
      flex-wrap: nowrap;
    }

    .metric-number {
      font-size: 0.75rem !important;
      padding-left: 0px !important;
      flex-shrink: 0;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }

  /* ============================================
    モバイル専用: 全体的なフォントサイズ調整（PC表示には一切影響なし）
    ============================================ */
  @media (max-width: 768px) {
    /* ランキング情報ヘッディング */
    #rankingSectionMobile {
      font-size: 0.7rem !important;
      line-height: 1.4 !important;
    }
    
    /* パネルタイトル */
    .panel-title {
      font-size: 0.67rem !important;
    }
    
    /* ボタン内のテキスト */
    .modern-btn {
      font-size: 0.55rem !important;
      padding: 1px 4px !important;
      line-height: 1.1 !important;
    }
    
    .metric-pill {
      font-size: 0.55rem !important;
      padding: 1px 3px !important;
      line-height: 1.1 !important;
    }
    
    .search-btn {
      font-size: 0.65rem !important;
      padding: 2px 6px !important;
    }
    
    /* セレクトボックス・検索欄 */
    .modern-select,
    .modern-search-input {
      font-size: 0.65rem !important;
    }
    
    /* テーブル */
    .ranking-table th,
    .ranking-table td {
      font-size: 0.7rem !important;
    }
  }



  /* ============================================
     新作アニメ紹介ページ - サイバーパンク・ネオン風
     ============================================ */

  .new-anime-container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }

  .new-anime-container .page-header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .new-anime-container .page-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #00ffff;
    text-shadow: 
      0 0 10px rgba(0, 255, 255, 0.8),
      0 0 20px rgba(0, 255, 255, 0.6),
      0 0 30px rgba(0, 255, 255, 0.4);
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
  }

  .new-anime-container .page-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: #cbd5e1;
    opacity: 0.9;
  }

  /* グリッドレイアウト - PC表示は4カラム以上固定 */
  .anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  /* PC表示: 5カラム固定、左右に余白を確保 */
  @media (min-width: 768px) {
    .anime-grid {
      grid-template-columns: repeat(5, 1fr); /* 5枚固定 */
      gap: 1.35rem;
      max-width: 1050px; /* 5カラム最大幅を制限 */
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* モバイル: 3カラム固定 */
  @media (max-width: 767px) {
    .anime-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 0.8rem;
    }
  }

  /* アニメカード */
  .anime-item {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
  }

  .anime-item:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 
      0 0 30px rgba(0, 255, 255, 0.5),
      0 15px 40px rgba(0, 0, 0, 0.6);
  }

  .anime-item:hover .anime-thumbnail::after {
    opacity: 0.3;
  }

  .anime-item:hover .anime-title {
    text-shadow: 
      0 0 15px rgba(0, 255, 255, 1),
      0 0 25px rgba(0, 255, 255, 0.8);
  }

  /* サムネイル部分 */
  .anime-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 140%; /* 7:10の比率 */
    overflow: hidden;
  }

  .anime-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, 
      transparent 0%, 
      transparent 40%,
      rgba(0, 0, 0, 0.7) 100%);
    opacity: 0.5;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .anime-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .anime-item:hover .anime-thumbnail img {
    transform: scale(1.1);
  }

  /* タイトルオーバーレイ */
  .anime-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, 
      rgba(0, 0, 0, 0.95) 0%, 
      rgba(0, 0, 0, 0.7) 60%,
      transparent 100%);
    z-index: 2;
  }

  .anime-title-overlay .anime-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 700;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 詳細リンク */
  .anime-title-overlay .detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
  }

  .anime-title-overlay .detail-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #00ffff, #00cccc);
    transition: width 0.3s ease;
  }

  .anime-item:hover .detail-link {
    color: #00ffff;
  }

  .anime-item:hover .detail-link::after {
    width: 100%;
  }

  .anime-title-overlay .detail-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  .anime-item:hover .detail-link .arrow {
    transform: translateX(4px);
  }

  /* レスポンシブ調整 */
  @media (max-width: 767px) {
    .anime-title-overlay {
      padding: 0.5rem;
    }
    
    .anime-title-overlay .anime-title {
      font-size: 0.7rem !important;  /* !important を追加 */
      margin-bottom: 0.25rem;
      line-height: 1.3;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .anime-title-overlay .detail-link {
      font-size: 0.6rem;
      gap: 0.2rem;
    }
  }

  /* ローディングアニメーション */
  .anime-item.loading {
    animation: animePulse 1.5s ease-in-out infinite;
  }

  @keyframes animePulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }

  /* ============================================
     新作アニメ紹介ページ (new-anime.html) 用スタイル
     ============================================ */

  .new-anime-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 20px 0;
  }

  /* カテゴリセクション */
  .anime-category {
    margin-bottom: 25px;
    padding: 0;
  }

  .category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 20px 8px 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
  }

  .category-icon {
    font-size: 1.4rem;
    animation: iconPulse 2s ease-in-out infinite;
  }

  @keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

  .category-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    margin: 0;
  }

  .category-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: auto;
  }

  /* スクロールコンテナ */
  .anime-scroll-wrapper {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .anime-scroll-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 10px 20px 15px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #00ffff rgba(0, 255, 255, 0.1);
  }

  .anime-scroll-container > .anime-item {
    scroll-snap-align: start;
  }

  /* PC表示では滑らかなスクロールにする（スナップ無効） */
  @media (min-width: 769px) {
    .anime-scroll-container {
      scroll-snap-type: none;
    }
    .anime-scroll-container > .anime-item {
      scroll-snap-align: none;
    }
  }

  /* スクロールバーのスタイル */
  .anime-scroll-container::-webkit-scrollbar {
    height: 8px;
  }

  .anime-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 255, 255, 0.1);
    border-radius: 4px;
  }

  .anime-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00ffff, #00bfbf);
    border-radius: 4px;
  }

  .anime-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #00ffff, #00e5e5);
  }

  /* PC用スクロールボタン */
  .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-70%);
    width: 44px;
    height: 44px;
    border: 2px solid #00ffff;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.95);
    color: #00ffff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  }

  .scroll-btn:hover {
    background: rgba(0, 255, 255, 0.25);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
    transform: translateY(-70%) scale(1.15);
  }

  .scroll-btn:active {
    transform: translateY(-70%) scale(0.95);
  }

  .scroll-btn.left {
    left: 10px;
  }

  .scroll-btn.right {
    right: 10px;
  }

  .scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .scroll-btn:disabled:hover {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  }

  /* スクロールヒント（モバイル・PC両対応） */
  .scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.65rem;
    color: #64748b;
    animation: hintFade 3s ease-in-out infinite;
  }

  .scroll-hint-arrow {
    animation: hintArrowMove 1.5s ease-in-out infinite;
  }

  @keyframes hintFade {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }

  @keyframes hintArrowMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
  }

  /* アニメアイテム（新作アニメ紹介ページ用） */
  .new-anime-container .anime-item {
    flex: 0 0 auto;
    width: 220px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  .new-anime-container .anime-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.2);
  }

  .anime-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 7;  /* 縦長に変更 */
    overflow: hidden;
  }

  .anime-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .new-anime-container .anime-item:hover .anime-thumbnail img {
    transform: scale(1.1);
  }

  .anime-title-overlay {
    padding: 10px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
  }

  .new-anime-container .anime-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: #f1f5f9;
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .detail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 6px;
    color: #00ffff;
    text-decoration: none;
    font-size: 0.65rem;
    transition: all 0.3s ease;
  }

  .detail-link:hover {
    background: rgba(0, 255, 255, 0.2);
    color: #00ffff;
  }

  .detail-link .arrow {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
  }

  .detail-link:hover .arrow {
    transform: translateX(5px);
  }

  /* スクロール進捗インジケーター */
  .scroll-progress {
    height: 2px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }

  .scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #00bfbf);
    border-radius: 2px;
    transition: width 0.2s ease;
  }

  /* ============================================
     新作アニメ紹介ページ - レスポンシブ対応
     ============================================ */

  /* モバイル */
  @media (max-width: 767px) {
    .new-anime-container {
      padding: 10px 8px;
    }

    .anime-category {
      margin-bottom: 18px;
    }

    .category-header {
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
      padding-bottom: 6px;
    }

    .category-icon {
      font-size: 1.1rem;
    }

    .category-title {
      font-size: 0.95rem;
    }

    .category-subtitle {
      width: 100%;
      margin-left: 0;
      font-size: 0.65rem;
    }

    .new-anime-container .anime-item {
      width: 100px;
    }

    .new-anime-container .anime-title {
      font-size: 0.55rem;
    }

    .anime-title-overlay {
      padding: 5px;
    }

    .detail-link {
      font-size: 0.5rem;
      padding: 4px 6px;
    }

    .scroll-btn {
      display: none;
    }

    .anime-scroll-container {
      padding: 4px 2px 10px 2px;
      gap: 10px;
    }

    .scroll-hint {
      font-size: 0.6rem;
      margin-top: 4px;
    }

    .scroll-progress {
      margin-top: 5px;
    }
  }

  /* タブレット */
  @media (min-width: 768px) and (max-width: 1023px) {
    .new-anime-container .anime-item {
      width: 180px;
    }

    .scroll-btn {
      width: 32px;
      height: 32px;
      font-size: 0.9rem;
    }

    .scroll-btn.left {
      left: -16px;
    }

    .scroll-btn.right {
      right: -16px;
    }
  }

  /* 大画面 */
  @media (min-width: 1400px) {
    .new-anime-container .anime-item {
      width: 220px;
    }
  }

  /* ======================================
     商品紹介カード（画像左・説明右レイアウト）
     ====================================== */
  .product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    padding: 1.5rem;
    gap: 1.5rem;
    grid-column: 1 / -1;  /* グリッド全幅を使用 */
  }

  .product-card-image {
    flex-shrink: 0;
  }

  .product-card-image img {
    max-width: 250px;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
  }

  .product-card-content {
    flex: 1;
    min-width: 200px;
    text-align: left;
  }

  .product-card-content .point-title {
    margin: 0 0 1rem 0;
  }

  .product-card-content .point-text {
    margin: 0 0 1rem 0;
  }

  .product-card-content .amazon-link {
    display: inline-flex;
    width: auto;
  }

  /* モバイル対応：縦並びに変更 */
  @media (max-width: 600px) {
    .product-card {
      flex-direction: column !important;
    }

    .product-card-image img {
      max-width: 200px;
      max-height: 250px;
    }

    .product-card-content {
      text-align: center;
    }
  }

/* ========================================
   評価機能用CSS - サイバーパンク統一デザイン
   ======================================== */
.rating-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.25);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.star-rating {
  display: flex;
  gap: 3px;
}

.star-rating .star {
  cursor: pointer;
  font-size: 22px;
  color: rgba(100, 100, 100, 0.5);
  transition: all 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.star-rating .star:hover,
.star-rating .star.hovered {
  color: #ffd700;
  transform: scale(1.25);
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.star-rating .star.selected {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.star-rating .star.user-rated {
  color: #00ffff;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
}

.rating-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.rating-stats .avg-score {
  font-weight: 700;
  color: #ffd700;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rating-stats .count {
  color: rgba(255, 255, 255, 0.4);
}

.like-buttons {
  display: flex;
  gap: 8px;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(20, 20, 20, 0.3) 100%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.like-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.4);
}

.like-btn.active-like {
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.4) 0%, rgba(0, 150, 80, 0.3) 100%);
  border-color: #00c864;
  color: #00ff7f;
  box-shadow: 0 0 15px rgba(0, 255, 127, 0.3);
}

.like-btn.active-dislike {
  background: linear-gradient(135deg, rgba(200, 50, 50, 0.4) 0%, rgba(150, 40, 40, 0.3) 100%);
  border-color: #c83232;
  color: #ff6b6b;
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.like-btn .count {
  font-weight: 700;
}

.rating-container-mobile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.25);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.rating-row-mobile {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: left;
}

.star-rating-mobile {
  display: flex;
  gap: 0px;
  justify-content: flex-start;
}

.star-rating-mobile .star {
  font-size: 13px;
}

.rating-container-mobile .rating-stats {
  font-size: 12px;
  justify-content: flex-start;
  text-align: left;
}

.rating-container-mobile .like-buttons {
  margin-left: 0;
}

.rating-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(0, 80, 100, 0.98) 0%, rgba(0, 60, 80, 0.98) 100%);
  color: #00ffff;
  padding: 14px 28px;
  border-radius: 12px;
  border: 2px solid #00ffff;
  z-index: 10000;
  animation: fadeInOut 2s ease-in-out;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(0, 255, 255, 0.3);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.rating-toast.error {
  background: rgba(150, 50, 50, 0.95);
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.rating-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   コメント機能用CSS - サイバーパンク統一デザイン
   ======================================== */
.comment-section {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
  border: 1px solid rgba(0, 255, 255, 0.25);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .video-text-container-mobile .comment-section,
  .video-text-container-mobile .rating-container-mobile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .rating-container-mobile {
    padding: 6px !important;
  }
  
  .rating-container-mobile .rating-row-mobile {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  .rating-container-mobile .like-buttons {
    margin-left: 0 !important;
  }
  
  .comment-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px !important;
  }
  
  .comment-header-row {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  
  .like-buttons {
    gap: 3px !important;
  }
  
  .like-btn {
    padding: 3px 6px !important;
    font-size: 10px !important;
    gap: 2px !important;
    border-width: 1px !important;
    border-radius: 12px !important;
  }
  
  .rating-stats .avg-score {
    font-size: 12px !important;
  }
  
  .rating-stats .count {
    font-size: 10px !important;
  }
  
  .comment-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    border-width: 1px !important;
  }
  
  .comment-toggle-btn .toggle-icon {
    font-size: 11px !important;
  }
  
  .comment-header-row span:first-child {
    font-size: 14px !important;
  }
  
  .comment-header-row .comment-count {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }
  
  /* コメントプレビュー - モバイル用強化 */
  .comment-preview {
    padding: 0 8px 8px 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .comment-preview-item {
    padding: 6px 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .comment-preview-item .comment-flag {
    font-size: 12px !important;
  }
  
  .comment-preview-nickname {
    font-size: 10px !important;
    max-width: 50px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .comment-preview-text {
    font-size: 11px !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

.comment-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
  user-select: none;
  box-sizing: border-box;
}

.comment-header-row span:first-child {
  font-size: 18px;
}

.comment-header-row .comment-count {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.25) 0%, rgba(0, 200, 200, 0.2) 100%);
  color: #00ffff;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0, 255, 255, 0.3);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.comment-toggle-btn {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 200, 200, 0.15) 100%);
  border: 2px solid rgba(0, 255, 255, 0.4);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.35) 0%, rgba(0, 200, 200, 0.3) 100%);
  border-color: #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  transform: scale(1.1);
}

.comment-toggle-btn:active {
  transform: scale(0.95);
}

.comment-toggle-btn .toggle-icon {
  color: #00ffff;
  font-size: 14px;
  transition: transform 0.3s ease;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

/* コメントプレビュー（直近2件表示） */
.comment-preview {
  padding: 0 16px 12px 16px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.comment-preview:empty {
  display: none;
}

.comment-preview-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(0, 40, 60, 0.4) 0%, rgba(0, 30, 50, 0.3) 100%);
  border-radius: 8px;
  border-left: 2px solid rgba(0, 255, 255, 0.4);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.comment-preview-item:last-child {
  margin-bottom: 0;
}

.comment-preview-item .comment-flag {
  font-size: 14px;
  flex-shrink: 0;
}

.comment-preview-nickname {
  color: #00ffff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  opacity: 0.9;
}

.comment-preview-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.comment-body {
  padding: 16px;
  touch-action: pan-y; /* 縦スクロールのみ許可 */
  overscroll-behavior: contain; /* スクロールが親に伝播しない */
}

.comment-body.comment-hidden {
  display: none;
}

.comment-list {
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
  touch-action: pan-y; /* 縦スクロールのみ許可 */
  overscroll-behavior: contain; /* スクロールが親に伝播しない */
}

.comment-list::-webkit-scrollbar {
  width: 6px;
}

.comment-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.comment-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00ffff 0%, #008888 100%);
  border-radius: 3px;
}

.comment-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ffff 0%, #00aaaa 100%);
}

.comment-item {
  display: flex;
  flex-direction: column;
  padding: 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(0, 40, 60, 0.6) 0%, rgba(0, 30, 50, 0.5) 100%);
  border-radius: 10px;
  border-left: 3px solid #00ffff;
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
}

.comment-item:hover {
  background: linear-gradient(135deg, rgba(0, 50, 70, 0.7) 0%, rgba(0, 40, 60, 0.6) 100%);
  border-left-color: #00ffff;
  box-shadow: 
    0 4px 15px rgba(0, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* コメントのメタ情報（国旗、ニックネーム、日付）横並び */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-flag {
  font-size: 16px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.comment-nickname {
  font-weight: 700;
  color: #00ffff;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.comment-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  flex-shrink: 0;
}

.comment-text {
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  margin-bottom: 10px;
}

/* ----- コメントアクションバー（いいね/ディスライク/リプライ）----- */
.comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.comment-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.comment-action-btn:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: rgba(0, 255, 255, 0.5);
  color: #00ffff;
}

.comment-action-btn:active {
  transform: scale(0.95);
}

.comment-action-btn.active {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.25) 0%, rgba(0, 200, 200, 0.2) 100%);
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

.comment-action-btn .action-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.comment-action-btn:hover .action-icon {
  transform: scale(1.15);
}

.comment-action-btn .action-count {
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

/* いいねボタン（アクティブ時） */
.comment-action-btn.like-active {
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.3) 0%, rgba(0, 150, 80, 0.25) 100%);
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

.comment-action-btn.like-active .action-icon {
  animation: likePopup 0.4s ease;
}

@keyframes likePopup {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ディスライクボタン（アクティブ時） */
.comment-action-btn.dislike-active {
  background: linear-gradient(135deg, rgba(255, 80, 80, 0.25) 0%, rgba(200, 60, 60, 0.2) 100%);
  border-color: #ff6666;
  color: #ff6666;
  box-shadow: 0 0 12px rgba(255, 102, 102, 0.3);
}

/* リプライボタン */
.comment-action-btn.reply-btn {
  margin-left: auto;
  background: rgba(0, 100, 150, 0.2);
  border-color: rgba(100, 200, 255, 0.4);
  border-radius: 20px;
  padding: 6px 14px;
}

.comment-action-btn.reply-btn .action-text {
  font-size: 0.75rem;
  font-weight: 500;
}

.comment-action-btn.reply-btn:hover {
  background: rgba(0, 150, 200, 0.3);
  border-color: rgba(100, 200, 255, 0.7);
  color: #66ccff;
}

/* リプライセクション - YouTube風階段表示 */
.comment-replies-section {
  margin-top: 8px;
  margin-left: 40px;
  padding-left: 16px;
  border-left: 2px solid rgba(0, 255, 255, 0.3);
}

.comment-replies-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #00ccff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-replies-toggle:hover {
  color: #00ffff;
}

.comment-replies-toggle .toggle-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.comment-replies-toggle.expanded .toggle-arrow {
  transform: rotate(90deg);
}

.comment-replies-list {
  margin-top: 8px;
}

/* リプライアイテム - コンパクト表示 */
.comment-reply-item {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-reply-item:last-child {
  border-bottom: none;
}

.comment-reply-item .reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-reply-item .comment-flag {
  font-size: 14px;
}

.comment-reply-item .comment-nickname {
  font-size: 0.8rem;
  font-weight: 600;
  color: #00bcd4;
}

.comment-reply-item .comment-time {
  font-size: 0.7rem;
  color: #666;
}

.comment-reply-item .comment-text {
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 6px;
}

.comment-reply-item .reply-actions {
  display: flex;
  gap: 8px;
}

.comment-reply-item .reply-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-reply-item .reply-action-btn:hover {
  color: #00ffff;
}

/* リプライフォーム */
.reply-form-container {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 30, 50, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.reply-form-container.hidden {
  display: none;
}

.reply-form-container textarea {
  width: 100%;
  background: rgba(0, 20, 40, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
  outline: none;
  box-sizing: border-box;
}

.reply-form-container textarea:focus {
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.reply-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.reply-form-actions button {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reply-cancel-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

.reply-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.reply-submit-btn {
  background: linear-gradient(135deg, #00ccff 0%, #0088cc 100%);
  border: none;
  color: #001520;
  font-weight: 600;
}

.reply-submit-btn:hover {
  background: linear-gradient(135deg, #00ddff 0%, #0099dd 100%);
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
}

/* モバイル用調整 */
@media (max-width: 768px) {
  .comment-actions {
    gap: 4px;
    margin-top: 6px;
  }
  
  .comment-action-btn {
    padding: 4px 8px;
    font-size: 11px;
    gap: 3px;
  }
  
  .comment-action-btn .action-icon {
    font-size: 12px;
  }
  
  .comment-replies-section {
    margin-left: 10px;
    padding-left: 8px;
  }
  
  .comment-reply-item {
    padding: 8px 10px;
  }
}

/* コメントフォーム */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 255, 255, 0.15);
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8) 0%, rgba(0, 30, 50, 0.7) 100%);
  border: 2px solid rgba(0, 255, 255, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #00ffff;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 0 10px rgba(0, 255, 255, 0.05);
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.comment-form textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

.comment-form-row {
  display: flex;
  justify-content: flex-end;
}

.comment-submit {
  padding: 12px 28px;
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 4px 15px rgba(0, 212, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-height: 44px;
  min-width: 100px;
}

.comment-submit:hover {
  background: linear-gradient(135deg, #00e5ff 0%, #00b3e6 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 6px 25px rgba(0, 212, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.comment-submit:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 10px rgba(0, 212, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.comment-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.comment-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 30px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px dashed rgba(0, 255, 255, 0.2);
}

.comment-more {
  text-align: center;
  margin-top: 12px;
}

.comment-more button {
  background: transparent;
  border: 2px solid rgba(0, 255, 255, 0.4);
  color: #00ffff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-more button:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* 言語フラグ */
.lang-flag-ja::before { content: '🇯🇵'; }
.lang-flag-en::before { content: '🇺🇸'; }
.lang-flag-pt::before { content: '🇧🇷'; }
.lang-flag-es::before { content: '🇪🇸'; }
.lang-flag-it::before { content: '🇮🇹'; }
.lang-flag-other::before { content: '🌍'; }

/* モバイル用コメントセクション調整 */
@media (max-width: 768px) {
  .comment-section {
    margin-top: 10px;
    border-radius: 10px;
    margin-right: 0;
  }
  
  .comment-header-row {
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  
  .comment-header-row span:first-child {
    font-size: 14px;
    flex-shrink: 0;
  }
  
  .comment-header-row span:nth-child(2) {
    font-size: 13px;
    flex-shrink: 0;
  }
  
  .comment-header-row .comment-count {
    padding: 3px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  
  .comment-toggle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-shrink: 0;
  }
  
  .comment-toggle-btn .toggle-icon {
    font-size: 14px;
  }
  
  .comment-body {
    padding: 12px;
  }
  
  .comment-item {
    padding: 10px;
    gap: 8px;
  }
  
  .comment-flag {
    font-size: 16px;
  }
  
  .comment-nickname {
    font-size: 11px;
  }
  
  .comment-text {
    font-size: 12px;
  }
  
  .comment-form input,
  .comment-form textarea {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .comment-form input::placeholder,
  .comment-form textarea::placeholder {
    font-size: 12px;
  }
  
  .comment-submit {
    padding: 10px 20px;
    font-size: 13px;
    min-height: 44px;
  }
  
  .comment-preview {
    padding: 0 10px 8px 10px;
  }
  
  .comment-preview-item {
    padding: 6px 10px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  
  .comment-preview-item .comment-flag {
    font-size: 14px;
  }
  
  .comment-preview-nickname {
    font-size: 11px;
  }
  
  .comment-preview-text {
    font-size: 12px;
  }
}

/* ============================================
   Schedule Page PC全幅強制（最優先）
   ============================================ */
@media (min-width: 768px) {
  body.schedule-page {
    overflow-x: hidden !important;
  }

  body.schedule-page .container,
  body.schedule-page .container-fluid,
  body.schedule-page main,
  body.schedule-page main.container-fluid,
  body.schedule-page .row,
  body.schedule-page .col-12,
  body.schedule-page .col-7 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  
  body.schedule-page .container {
    padding-top: 50px !important;
    padding-bottom: 10px !important;
  }

  body.schedule-page .schedule-grid {
    display: grid !important;
    grid-template-columns: 50px 1fr !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 10px !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }

  body.schedule-page .programs-slot {
    width: 100% !important;
    overflow: visible !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body.schedule-page .anime-card {
    flex: 1 1 400px !important;
    min-width: 350px !important;
    max-width: 600px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  body.schedule-page .anime-thumb-wrapper {
    width: 140px !important;
    height: 79px !important;
    flex-shrink: 0 !important;
  }

  body.schedule-page .anime-info {
    padding-left: 12px !important;
  }

  body.schedule-page .anime-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  body.schedule-page .anime-channel {
    font-size: 0.85rem !important;
  }
}

/* ============================================
   新作アニメページ PC全幅（最優先）
   ============================================ */
@media (min-width: 768px) {
  body.new-anime-page,
  body.new-anime-page main,
  body.new-anime-page main.container-fluid,
  body.new-anime-page .container-fluid,
  body.new-anime-page .row,
  body.new-anime-page .col-7,
  body.new-anime-page .col-12,
  body.new-anime-page .new-anime-container,
  body.new-anime-page .anime-category,
  body.new-anime-page .anime-scroll-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.new-anime-page main.container-fluid {
    padding-top: 60px !important;
  }

  body.new-anime-page .new-anime-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body.new-anime-page .category-header {
    padding: 0 20px 8px 20px !important;
  }

  body.new-anime-page .anime-scroll-container {
    width: 100% !important;
    gap: 15px !important;
    padding: 10px 0 15px 0 !important;
    scroll-snap-type: none !important;
  }

  body.new-anime-page .anime-item {
    width: 200px !important;
    scroll-snap-align: none !important;
    flex-shrink: 0 !important;
  }

  body.new-anime-page .anime-item:first-child {
    margin-left: 15px !important;
  }

  body.new-anime-page .anime-item:last-child {
    margin-right: 15px !important;
  }

  body.new-anime-page .anime-thumbnail {
    aspect-ratio: 5 / 7 !important;
  }

  body.new-anime-page .scroll-btn {
    z-index: 100 !important;
  }

  body.new-anime-page .scroll-btn.left {
    left: 15px !important;
  }

  body.new-anime-page .scroll-btn.right {
    right: 15px !important;
  }
}

/* ============================================
   人気コメントランキングページ専用CSS
   ============================================ */

/* ランキングページでは親col-7の制約を解除 */
.col-7:has(.comment-ranking-page),
.col-lg-auto:has(.comment-ranking-page) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  padding: 0 !important;
}

/* ランキングページではrowを中央配置 */
.row:has(.comment-ranking-page) {
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 左カラムを非表示（ランキングページのみ） */
.row:has(.comment-ranking-page) > .d-none.d-lg-block,
.row:has(.comment-ranking-page) > div:has(#leftColumn),
.row:has(.comment-ranking-page) > div:has(#leftColumn2) {
  display: none !important;
}

/* mainタグの調整 */
main:has(.comment-ranking-page) {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

main:has(.comment-ranking-page) > .row {
  width: 100% !important;
  max-width: 1000px !important;
}

.comment-ranking-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px;
  box-sizing: border-box;
}

.comment-ranking-header {
  text-align: center;
  margin-bottom: 20px;
}

.comment-ranking-title {
  font-size: 26px;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.comment-ranking-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* 期間セレクター - TOPページと統一 */
.period-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.period-btn {
  padding: 8px 20px;
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn:hover {
  background: rgba(0, 255, 255, 0.15);
  border-color: rgba(0, 255, 255, 0.6);
  color: #fff;
}

.period-btn.active {
  background: rgba(0, 255, 255, 0.2);
  border-color: #00ffff;
  color: #00ffff;
}

/* ランキングリスト - TOPページ風 */
.popular-comments-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  background: rgba(0, 20, 40, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.popular-comment-item {
  display: flex;
  gap: 15px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(0, 35, 55, 0.7) 0%, rgba(0, 25, 45, 0.6) 100%);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  align-items: flex-start;
}

.popular-comment-item:hover {
  background: linear-gradient(135deg, rgba(0, 50, 75, 0.8) 0%, rgba(0, 40, 65, 0.7) 100%);
  border-left-color: rgba(0, 200, 255, 0.5);
}

/* TOP3 特別スタイル */
.popular-comment-item.rank-1 {
  background: linear-gradient(135deg, rgba(255, 200, 50, 0.12) 0%, rgba(0, 30, 50, 0.7) 100%);
  border-left-color: #ffc832;
}

.popular-comment-item.rank-2 {
  background: linear-gradient(135deg, rgba(180, 180, 200, 0.1) 0%, rgba(0, 30, 50, 0.7) 100%);
  border-left-color: #b8b8c8;
}

.popular-comment-item.rank-3 {
  background: linear-gradient(135deg, rgba(200, 140, 80, 0.1) 0%, rgba(0, 30, 50, 0.7) 100%);
  border-left-color: #c88c50;
}

/* ランクバッジ */
.rank-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(0, 60, 90, 0.5);
  border: 1px solid rgba(0, 180, 220, 0.3);
  color: rgba(0, 220, 255, 0.9);
}

.rank-1 .rank-badge {
  background: linear-gradient(135deg, #ffc832 0%, #e6a800 100%);
  border-color: #ffc832;
  color: #1a1a2e;
  box-shadow: 0 0 12px rgba(255, 200, 50, 0.4);
}

.rank-2 .rank-badge {
  background: linear-gradient(135deg, #c8c8d0 0%, #a0a0a8 100%);
  border-color: #b8b8c8;
  color: #1a1a2e;
  box-shadow: 0 0 10px rgba(180, 180, 200, 0.3);
}

.rank-3 .rank-badge {
  background: linear-gradient(135deg, #c88c50 0%, #a06830 100%);
  border-color: #c88c50;
  color: #1a1a2e;
  box-shadow: 0 0 10px rgba(200, 140, 80, 0.3);
}

/* コメント内容 */
.popular-comment-content {
  flex: 1;
  min-width: 0;
}

.popular-comment-song {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.popular-comment-song-title {
  font-size: 12px;
  color: #00c8ff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.popular-comment-song-artist {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.popular-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.popular-comment-flag {
  font-size: 14px;
}

.popular-comment-nickname {
  font-size: 13px;
  font-weight: 600;
  color: #00d8ff;
}

.popular-comment-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.popular-comment-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: 10px;
  word-break: break-word;
}

/* 統計情報 - コンパクト */
.popular-comment-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.popular-comment-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.popular-comment-stats .stat-item.likes {
  color: #50d890;
}

.popular-comment-stats .stat-item.dislikes {
  color: #f06060;
}

.popular-comment-stats .stat-item.replies {
  color: #60b0f0;
}

.popular-comment-stats .stat-item.score {
  padding: 2px 8px;
  background: rgba(0, 200, 255, 0.12);
  border-radius: 10px;
  color: #00d0ff;
  font-weight: 600;
  font-size: 11px;
}

/* ホットバッジ */
.hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(255, 80, 50, 0.2);
  border-radius: 10px;
  font-size: 10px;
  color: #ff6040;
  font-weight: 600;
}

.hot-badge .fire {
  animation: fireFlicker 0.4s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.15); opacity: 0.8; }
}

/* ローディング・空状態 */
.comment-ranking-page .loading-message {
  text-align: center;
  padding: 50px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.comment-ranking-page .loading-message::before {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  margin: 0 auto 12px;
  border: 2px solid rgba(0, 200, 255, 0.2);
  border-top-color: #00c8ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.comment-ranking-page .empty-message {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.4);
}

.comment-ranking-page .empty-message .icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.comment-ranking-page .empty-message .text {
  font-size: 14px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .comment-ranking-page {
    padding: 20px 12px;
  }
  
  .comment-ranking-title {
    font-size: 20px;
  }
  
  .period-selector {
    gap: 6px;
  }
  
  .period-btn {
    padding: 7px 14px;
    font-size: 12px;
  }
  
  .popular-comment-item {
    padding: 14px;
    gap: 12px;
  }
  
  .rank-badge {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .popular-comment-song-title {
    max-width: 180px;
  }
  
  .popular-comment-text {
    font-size: 12px;
  }
  
  .popular-comment-stats {
    gap: 8px;
  }
  
  .popular-comment-stats .stat-item {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .period-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .rank-badge {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .popular-comment-song {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .popular-comment-song-title {
    max-width: 100%;
  }
}

.popular-comment-item {
  display: flex;
  gap: 15px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(0, 40, 60, 0.6) 0%, rgba(0, 30, 50, 0.5) 100%);
  border-radius: 12px;
  border-left: 4px solid rgba(0, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.popular-comment-item:hover {
  background: linear-gradient(135deg, rgba(0, 50, 70, 0.7) 0%, rgba(0, 40, 60, 0.6) 100%);
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 255, 255, 0.15);
}

/* TOP3 特別スタイル */
.popular-comment-item.rank-1 {
  border-left-color: #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 30, 50, 0.5) 100%);
}

.popular-comment-item.rank-2 {
  border-left-color: #c0c0c0;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(0, 30, 50, 0.5) 100%);
}

.popular-comment-item.rank-3 {
  border-left-color: #cd7f32;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(0, 30, 50, 0.5) 100%);
}

/* ランクバッジ */
.rank-badge {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  background: rgba(0, 100, 150, 0.4);
  border: 2px solid rgba(0, 255, 255, 0.3);
  color: #00ffff;
}

.rank-1 .rank-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
  border-color: #ffd700;
  color: #1a1a2e;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.rank-2 .rank-badge {
  background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
  border-color: #c0c0c0;
  color: #1a1a2e;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.4);
}

.rank-3 .rank-badge {
  background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
  border-color: #cd7f32;
  color: #1a1a2e;
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.4);
}

/* コメント内容 */
.popular-comment-content {
  flex: 1;
  min-width: 0;
}

.popular-comment-song {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.popular-comment-song-title {
  font-size: 13px;
  color: #00b4ff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.popular-comment-song-artist {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.popular-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.popular-comment-flag {
  font-size: 16px;
}

.popular-comment-nickname {
  font-size: 14px;
  font-weight: 600;
  color: #00ffff;
}

.popular-comment-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.popular-comment-text {
  font-size: 14px;
  color: #e0e0e0;
  line-height: 1.6;
  margin-bottom: 12px;
  word-break: break-word;
}

/* 統計情報 */
.popular-comment-stats {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.popular-comment-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.popular-comment-stats .stat-item.likes {
  color: #00ff88;
}

.popular-comment-stats .stat-item.dislikes {
  color: #ff6666;
}

.popular-comment-stats .stat-item.replies {
  color: #00b4ff;
}

.popular-comment-stats .stat-item.score {
  padding: 3px 10px;
  background: rgba(0, 255, 255, 0.15);
  border-radius: 12px;
  color: #00ffff;
  font-weight: 600;
}

/* ホットバッジ */
.hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(255, 100, 50, 0.3) 0%, rgba(255, 50, 50, 0.25) 100%);
  border-radius: 12px;
  font-size: 11px;
  color: #ff6633;
  font-weight: 600;
}

.hot-badge .fire {
  animation: fireFlicker 0.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

/* ローディング・空状態 */
.comment-ranking-page .loading-message {
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.comment-ranking-page .loading-message::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 15px;
  border: 3px solid rgba(0, 255, 255, 0.2);
  border-top-color: #00ffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.comment-ranking-page .empty-message {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.5);
}

.comment-ranking-page .empty-message .icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.comment-ranking-page .empty-message .text {
  font-size: 16px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .comment-ranking-page {
    padding: 15px 10px;
  }
  
  .comment-ranking-title {
    font-size: 22px;
  }
  
  .period-selector {
    gap: 8px;
  }
  
  .period-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .popular-comment-item {
    padding: 14px;
    gap: 12px;
  }
  
  .rank-badge {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  
  .popular-comment-song-title {
    max-width: 200px;
  }
  
  .popular-comment-text {
    font-size: 13px;
  }
  
  .popular-comment-stats {
    gap: 10px;
  }
  
  .popular-comment-stats .stat-item {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .period-btn {
    padding: 7px 12px;
    font-size: 12px;
  }
  
  .rank-badge {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .popular-comment-song {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .popular-comment-song-title {
    max-width: 100%;
  }
}

/* ============================================
   モバイル専用スタイル（768px以下）- 統合版
   ============================================ */
@media (max-width: 768px) {
  
  /* === バナーボタン行（2行×3列で6つ全て表示） === */
  .banner-row-container,
  .banner-row-container.banner-row-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 5px;
    margin: 5px auto;
    height: auto;
    max-height: none;
    min-height: 100px; /* CLS防止: 2行×45px + gap */
    flex-direction: unset;
    contain: layout style; /* 再計算範囲制限 */
  }
  
  .banner-row-container .banner-item,
  .banner-row-container.banner-row-compact .banner-item,
  .banner-row-container.banner-row-compact .anime-schedule-button.banner-item,
  .banner-row-container.banner-row-compact .new-anime-button.banner-item,
  .banner-row-container.banner-row-compact .ranking-2025-button.banner-item,
  .banner-row-container.banner-row-compact .ranking-recent-button.banner-item,
  .banner-row-container.banner-row-compact .comment-ranking-button.banner-item {
    padding: 8px 4px;
    font-size: 0.55rem;
    min-width: 0;
    text-align: center;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    height: 45px; /* CLS防止: 固定化 */
    max-height: 45px; /* CLS防止: 固定化 */
    flex: unset;
    width: auto;
    contain: layout style paint; /* 再計算範囲制限 */
  }
  
  .banner-row-container .banner-item .button-text,
  .banner-row-container.banner-row-compact .banner-item .button-text {
    font-size: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    line-height: 1.1 !important;
    height: auto !important;
  }
  
  .banner-row-container .banner-item .trophy-icon,
  .banner-row-container .banner-item .tv-icon,
  .banner-row-container .banner-item .new-icon,
  .banner-row-container .banner-item .clock-icon,
  .banner-row-container .banner-item .comment-icon,
  .banner-row-container .banner-item .home-icon,
  .banner-row-container.banner-row-compact .banner-item .trophy-icon,
  .banner-row-container.banner-row-compact .banner-item .tv-icon,
  .banner-row-container.banner-row-compact .banner-item .new-icon,
  .banner-row-container.banner-row-compact .banner-item .clock-icon,
  .banner-row-container.banner-row-compact .banner-item .comment-icon {
    font-size: 1rem !important;
    display: block !important;
    margin-right: 0 !important;
  }
  
  /* === PC用パネル非表示 === */
  .ranking-types-container {
    display: none !important;
  }
  
  /* === コントロールパネル全体 === */
  .controls-grid-inline {
    display: block;
    padding: 0 5px;
    min-height: 350px; /* CLS防止 */
    contain: layout style; /* 再計算範囲制限 */
  }
  
  .all-controls-panel {
    padding: 10px;
    background: linear-gradient(180deg, rgba(20, 35, 55, 0.98) 0%, rgba(10, 20, 35, 0.98) 100%);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 8px;
    min-height: 330px; /* CLS防止 */
    contain: layout style; /* 再計算範囲制限 */
  }
  
  
  
  
/* === モバイルコントロールパネルの順序変更 === */
.all-controls-panel {
  display: flex;
  flex-direction: column;
}
.all-controls-panel .ranking-type-mobile-section {
  order: 1;
}
.all-controls-panel .metric-count-row {
  order: 2;
}
.all-controls-panel .period-search-row {
  order: 3;
}

/* === セクションタイトル共通 === */
  .all-controls-panel .panel-title {
    font-size: 0.7rem !important;
    color: #00ffff !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
  }
  
  /* === 期間・検索行（横2列）- 非表示だがスタイルは残す === */
  .period-search-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  .period-section,
  .search-section {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }
  
  /* === 期間セレクトボックス === */
  .period-section .modern-select,
  .period-section .dateSelectBox {
    font-size: 0.65rem !important;
    height: 80px !important;
    max-height: 80px !important;
    min-height: 80px !important;
    padding: 4px !important;
    line-height: 1.4 !important;
    background: rgba(0, 20, 40, 0.9) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    color: #00ffff !important;
    overflow-y: auto !important;
  }
  
  /* === 検索入力 === */
  .search-section .search-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex: 1 !important;
  }
  
  .search-section .modern-search-input {
    font-size: 0.65rem !important;
    padding: 8px !important;
    background: rgba(0, 20, 40, 0.9) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .search-section .search-btn {
    font-size: 0.65rem !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(0, 80, 100, 0.9) 0%, rgba(0, 50, 70, 0.9) 100%) !important;
    border: 1px solid rgba(0, 255, 255, 0.4) !important;
    border-radius: 5px !important;
    color: #00ffff !important;
    cursor: pointer !important;
  }
  
  /* === 指標・件数セクション === */
  .metric-count-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  
  .metric-count-row .metric-section,
  .metric-count-row .count-section {
    width: 100% !important;
  }
  
  /* === 指標ボタン（3列均等）- IDセレクタで確実に適用 === */
  .metric-count-row .metric-pills,
  #metricGroup,
  .metric-section .metric-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    flex-wrap: unset !important;
  }
  
  /* === 表示件数ボタン（4列均等） === */
  .metric-count-row .mobile-limit-pills {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
  }
  
  /* === 共通ボタンデザイン（指標・件数） === */
  .metric-count-row .metric-pill {
    background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    color: #b0e0e6 !important;
    font-size: 0.65rem !important;
    padding: 8px 4px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  
  .metric-count-row .metric-pill.active {
    background: linear-gradient(180deg, rgba(0, 100, 120, 0.95) 0%, rgba(0, 70, 90, 0.95) 100%) !important;
    border-color: #00ffff !important;
    color: #00ffff !important;
  }
  
  /* === ランキング種類選択セクション === */
  .ranking-type-mobile-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    min-height: 280px; /* CLS防止 */
    contain: layout style; /* 再計算範囲制限 */
  }
  
  .ranking-type-mobile-section > .panel-title {
    font-size: 0.7rem !important;
    color: #00ffff !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
  }
  
  .ranking-type-grid-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .type-group-mobile {
    background: rgba(0, 25, 45, 0.7);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 6px;
    padding: 8px;
    min-height: 55px; /* CLS防止 */
  }
  
  .type-group-title {
    font-size: 0.6rem !important;
    color: #00ffff !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
  }
  
  /* === 種類ボタン（4列均等・グリッド） === */
  .type-buttons-mobile {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  
  /* === 特別企画だけは縦並び（テキストが長いため） === */
  .type-group-mobile.special-group .type-buttons-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  .type-group-mobile.special-group .type-btn-mobile {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 10px 12px !important;
    text-align: left !important;
  }
  
  .type-btn-mobile {
    background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    color: #b0e0e6 !important;
    font-size: 0.6rem !important;
    padding: 8px 2px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .type-btn-mobile.active {
    background: linear-gradient(180deg, rgba(0, 100, 120, 0.95) 0%, rgba(0, 70, 90, 0.95) 100%) !important;
    border-color: #00ffff !important;
    color: #00ffff !important;
  }
  
  /* === モバイル用ヘッディング（PCと同じデザイン） === */
  #rankingSectionMobile {
    background: linear-gradient(180deg, rgba(20, 35, 55, 0.98) 0%, rgba(10, 20, 35, 0.98) 100%) !important;
    border: 1px solid rgba(0, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin: 8px 5px !important;
  }
  
  #rankingSectionMobile .heading-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 0 !important;
    flex-wrap: wrap !important;
  }
  
  #rankingSectionMobile .heading-label {
    font-size: 0.65rem !important;
    color: #00ffff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    min-width: 45px !important;
  }
  
  #rankingSectionMobile .heading-value {
    font-size: 0.65rem !important;
    color: #ffffff !important;
    font-weight: 500 !important;
  }
  
  #rankingSectionMobile .inline-metric-buttons,
  #rankingSectionMobile .inline-limit-buttons {
    display: flex !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
  }
  
  #rankingSectionMobile .inline-btn {
    font-size: 0.55rem !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    background: rgba(0, 40, 60, 0.9) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    color: #aaa !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
  }
  
  #rankingSectionMobile .inline-btn.active {
    background: linear-gradient(135deg, rgba(0, 180, 200, 0.9), rgba(0, 120, 140, 0.9)) !important;
    border-color: #00ffff !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
  
  /* === モバイル用期間プルダウン === */
  #rankingSectionMobile .inline-period-select {
    flex: 1 !important;
  }
  
  #rankingSectionMobile .inline-date-select-mobile {
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    background: rgba(0, 40, 60, 0.9) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    color: #00ffff !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 200px !important;
  }
  
  /* === ランキングカード === */
  .ranking-card {
    padding: 8px !important;
    min-height: auto !important;
    margin-bottom: 10px !important;
  }
  
  /* === 順位を左寄せ（2桁でもサムネとの間隔確保） === */
  .card-rank {
    font-size: 1rem !important;
    padding-left: 0 !important;
    padding-right: 6px !important;
    text-align: left !important;
  }
  
  /* === 順位下の「click☛」を非表示（コメントボタン横に移動するため） === */
  .card-rank::after {
    display: none !important;
  }
  
  /* === サムネイルを大きく === */
  .card-thumbnail {
    width: 85px !important;
    height: 85px !important;
  }
  
  .card-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* === 曲名/歌手名の行（モバイル用に表示） === */
  .card-title-artist-row {
    display: block !important;
    margin-bottom: 2px !important;
  }
  
  .card-title-artist-row .card-song {
    font-size: 0.8rem !important;
    font-weight: bold !important;
    color: #fff !important;
    display: inline !important;
  }
  
  .card-title-artist-row .card-artist-inline {
    display: inline !important;
    font-size: 0.65rem !important;
    color: #888 !important;
    font-weight: normal !important;
  }
  
  /* PC用の歌手名行は非表示（モバイルでは曲名行に含まれる） */
  .card-artist {
    display: none !important;
  }
  
  /* === アニメ名を地味に表示 === */
  .card-anime {
    display: block !important;
    color: #777 !important;
    font-size: 0.55rem !important;
    margin-bottom: 2px !important;
  }
  
  /* === 再生数の括弧書き詳細を非表示（モバイル） === */
  .card-views-inline .views-detail,
  .card-views .views-detail {
    display: none !important;
  }
  
  .card-title {
    font-size: 0.8rem !important;
  }
  
  .card-sub-info {
    font-size: 0.65rem !important;
  }
  
  .card-metric {
    font-size: 0.95rem !important;
  }
  
  .card-metric-sub {
    font-size: 0.55rem !important;
  }
  
  /* === 評価バッジ === */
  .rating-badge-inline {
    font-size: 0.55rem !important;
  }
  
  .rating-stars {
    font-size: 0.45rem !important;
  }
  
  /* === コメントボタンを右にずらす + click表示追加 === */
  .comment-btn-inline {
    margin-left: 10px !important;
  }
  
  .comment-btn-inline::after {
    content: " ☚click" !important;
    font-size: 0.5rem !important;
    color: #00ffff !important;
    opacity: 0.8 !important;
  }
  
  .comment-toggle-btn {
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
  }
  
  /* === アクションボタン（聴く・観る）- モバイル用 === */
  /* 390px以下では非表示（card-action-inlineで代替） */
  .card-action-buttons {
    display: none !important;
  }
  
  .card-action-buttons .btn {
    font-size: 0.5rem !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }
  
  .card-actions {
    gap: 3px !important;
  }
  
  .card-actions .action-btn {
    font-size: 0.55rem !important;
    padding: 3px 6px !important;
  }
  
  /* === いいね・わるいねボタン === */
  .like-dislike-container {
    gap: 3px !important;
  }
  
  .like-dislike-container .like-btn,
  .like-dislike-container .dislike-btn {
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
  }
  
  /* === ページタイトル === */
  h1, .page-title {
    font-size: 1.1rem !important;
  }
  
  h2 {
    font-size: 0.95rem !important;
  }
  
  /* === チャートコンテナ === */
  .chart-container {
    height: 120px !important;
    padding: 6px !important;
    margin-bottom: 8px !important;
  }
  
  /* === TOPボタン === */
  .top-btn-fixed,
  a[href="#top"] {
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
  }
  
  /* === mobile-controls-containerのパディング === */
  .mobile-controls-container {
    padding: 0 5px !important;
  }
}

/* ========== Additional Styles ========== */

/* ★★★ ヘッダー左グループ（メニュー・言語）★★★ */
.header-left-group {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.header-left-group > * {
  pointer-events: auto;
}

/* ★★★ ヘッダー右グループ（検索のみ）★★★ */
.header-right-group {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.header-right-group > * {
  pointer-events: auto;
}

/* ヘッダーユーザーアイコン（PC） */
.header-user-icon {
  display: flex;
  align-items: center;
}

.header-user-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 200, 0.3) 100%);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 50%;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.header-user-icon a:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.4) 0%, rgba(0, 150, 200, 0.5) 100%);
  transform: scale(1.1);
}

/* モバイル用ユーザーアイコン（右上固定） */
.header-user-icon-mobile {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 10003;
}

.header-user-icon-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 150, 200, 0.4) 100%);
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* コンパクトメニューボタン（シンプル3本線のみ） */
.menu-button-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #00ffff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-button-compact:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

/* コンパクト検索フォーム */
.header-search-form-compact {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  height: 26px;
  box-sizing: border-box;
}

.header-search-input-compact {
  width: 120px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: #00ffff;
  font-size: 0.65rem;
  outline: none;
  height: 100%;
  box-sizing: border-box;
}

.header-search-input-compact::placeholder {
  color: rgba(0, 255, 255, 0.5);
  font-size: 0.6rem;
}

.header-search-btn-compact {
  padding: 2px 6px;
  border: none;
  background: linear-gradient(180deg, rgba(0, 100, 120, 0.9) 0%, rgba(0, 80, 100, 0.9) 100%);
  color: #00ffff;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search-btn-compact:hover {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.9) 0%, rgba(0, 100, 130, 0.9) 100%);
}

/* コンパクト言語セレクター */
.lang-selector-compact {
  display: flex;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.4);
  height: 26px;
  box-sizing: border-box;
}

.lang-selector-compact a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  height: 100%;
  box-sizing: border-box;
}

.lang-selector-compact a img {
  width: 16px;
  height: auto;
}

.lang-selector-compact a:first-child {
  border-right: 1px solid rgba(0, 255, 255, 0.2);
}

.lang-selector-compact a:hover {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.5) 0%, rgba(0, 80, 120, 0.5) 100%);
}

.lang-selector-compact a.active {
  background: linear-gradient(180deg, #00d4ff 0%, #0099cc 100%);
}

/* ★★★ Push通知トグル（PC用コンパクト版）★★★ */
.push-toggle-wrapper-compact {
  display: flex;
  align-items: center;
}

.push-toggle-compact {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.push-toggle-compact input {
  opacity: 0;
  width: 0;
  height: 0;
}

.push-toggle-slider-compact {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2px;
}

.push-toggle-slider-compact::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: rgba(100, 100, 100, 0.8);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.push-toggle-icon-compact {
  position: absolute;
  right: 3px;
  font-size: 10px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.push-toggle-compact input:checked + .push-toggle-slider-compact {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.8) 0%, rgba(0, 100, 130, 0.8) 100%);
  border-color: #00ffff;
}

.push-toggle-compact input:checked + .push-toggle-slider-compact::before {
  transform: translateX(16px);
  background: #00ffff;
}

.push-toggle-compact input:checked + .push-toggle-slider-compact .push-toggle-icon-compact {
  opacity: 1;
}

/* ★★★ Push通知トグル（モバイル用）★★★ */
.push-toggle-wrapper-mobile {
  display: flex;
  align-items: center;
}

.push-toggle-mobile {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  cursor: pointer;
}

.push-toggle-mobile input {
  opacity: 0;
  width: 0;
  height: 0;
}

.push-toggle-slider-mobile {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 18px;
  transition: all 0.3s ease;
}

.push-toggle-slider-mobile::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background: rgba(100, 100, 100, 0.8);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.push-toggle-icon-mobile {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.push-toggle-mobile input:checked + .push-toggle-slider-mobile {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.8) 0%, rgba(0, 100, 130, 0.8) 100%);
  border-color: #00ffff;
}

.push-toggle-mobile input:checked + .push-toggle-slider-mobile::before {
  transform: translateX(14px);
  background: #00ffff;
}

.push-toggle-mobile input:checked + .push-toggle-slider-mobile .push-toggle-icon-mobile {
  opacity: 1;
}

/* ヘッダー右グループ内のメニューボタン */
.header-right-group #toggleMenuPC {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

/* ヘッダー検索フォーム（旧・互換用） */
.header-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(0, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  height: 40px;
  box-sizing: border-box;
}

.header-search-input {
  width: 160px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: #00ffff;
  font-size: 0.75rem;
  outline: none;
  height: 100%;
  box-sizing: border-box;
}

.header-search-input::placeholder {
  color: rgba(0, 255, 255, 0.5);
  font-size: 0.7rem;
}

.header-search-btn {
  padding: 6px 12px;
  border: none;
  background: linear-gradient(180deg, rgba(0, 100, 120, 0.9) 0%, rgba(0, 80, 100, 0.9) 100%);
  color: #00ffff;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search-btn:hover {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.9) 0%, rgba(0, 100, 130, 0.9) 100%);
}

/* ★★★ 言語セレクター用CSS - PC用（国旗のみ） ★★★ */
.lang-selector {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
  border: 2px solid rgba(0, 255, 255, 0.4);
  height: 40px;
  box-sizing: border-box;
}

.lang-selector a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.3s ease;
  background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
  position: relative;
  backdrop-filter: blur(10px);
  height: 100%;
  box-sizing: border-box;
}

.lang-selector a:first-child {
  border-right: 1px solid rgba(0, 255, 255, 0.2);
}

.lang-selector a:hover {
  background: linear-gradient(180deg, rgba(0, 150, 180, 0.5) 0%, rgba(0, 80, 120, 0.5) 100%);
}

.lang-selector a.active {
  background: linear-gradient(180deg, #00d4ff 0%, #0099cc 100%);
  box-shadow: inset 0 2px 15px rgba(255, 255, 255, 0.4);
}

/* タブレット対応 (992px以下) */
@media (max-width: 992px) {
  .lang-selector {
    top: 22px;
    right: 155px;
  }
  
  .lang-selector a {
    padding: 8px 14px;
    font-size: 22px;
  }
}

/* モバイル対応 (768px以下) - PC用言語セレクターを非表示 */
@media (max-width: 768px) {
  .lang-selector {
    display: none !important;
  }
  
  .header-right-group {
    display: none !important;
  }
}

/* ★★★ モバイル用言語セレクター（メニュー横） ★★★ */
.lang-selector-mobile {
  display: none;
}

@media (max-width: 768px) {
  .lang-selector-mobile {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  
  .lang-selector-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-decoration: none;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(30, 45, 65, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
    border: 2px solid rgba(0, 255, 255, 0.4);
    transition: all 0.3s ease;
  }
  
  .lang-selector-mobile a:hover {
    background: linear-gradient(180deg, rgba(0, 150, 180, 0.5) 0%, rgba(0, 80, 120, 0.5) 100%);
  }
  
  .lang-selector-mobile a.active {
    background: linear-gradient(180deg, #00d4ff 0%, #0099cc 100%);
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  }
}

/* ============================================
   最高優先度: ボタンのスタイルを統一
   ============================================ */
.modern-btn,
.modern-btn.active,
button.modern-btn,
a.modern-btn,
.metric-pill,
.metric-pill.active,
button.metric-pill,
a.metric-pill,
.control-panel button,
.control-panel .modern-btn,
.type-button-group button {
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  min-height: unset !important;
  height: auto !important;
  margin: 2px !important;
  border-radius: 8px !important;
}

.search-btn,
button.search-btn {
  padding: 5px 15px !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  border-radius: 8px !important;
}

/* 左カラム専用 */
#leftColumn1 .modern-btn,
#leftColumn2 .modern-btn,
.col-5 .modern-btn,
#leftColumn1 .metric-pill,
#leftColumn2 .metric-pill,
.col-5 .metric-pill,
#leftColumn1 button,
#leftColumn2 button,
.col-5 button {
  padding: 4px 10px !important;
  font-size: 0.65rem !important;
  line-height: 1.3 !important;
  margin: 2px !important;
  border-radius: 6px !important;
}

/* 指標ボタン（再生数、GOOD数、コメント数）- 他と同じサイズに */
.metric-pill[data-metric],
button[data-metric] {
  padding: 4px 10px !important;
  font-size: 0.65rem !important;
  border-radius: 6px !important;
  width: auto !important;
  min-width: unset !important;
}

.button-grid,
.metric-pills,
.type-button-group {
  gap: 4px !important;
  margin: 3px 0 !important;
  padding: 0 !important;
}

#leftColumn1 .metric-pills,
#leftColumn2 .metric-pills,
.col-5 .metric-pills,
#leftColumn1 .button-grid,
#leftColumn2 .button-grid,
.col-5 .button-grid {
  gap: 3px !important;
  margin: 3px 0 !important;
  padding: 0 !important;
}

/* コントロールパネルの余白 */
.control-panel {
  padding: 10px !important;
  margin-bottom: 8px !important;
}

#leftColumn1 .control-panel,
#leftColumn2 .control-panel,
.col-5 .control-panel {
  padding: 8px !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.panel-title {
  font-size: 0.7rem !important;
  margin-bottom: 5px !important;
  padding: 0 !important;
}

.controls-grid {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

/* 期間選択ボックスを小さく（3行表示） - モバイル用のみ、設定パネル以外 */
.dateSelectBox:not(.inline-date-select):not(.modern-select-wide):not(#dateSelectInline),
select.dateSelectBox:not(.inline-date-select):not(.modern-select-wide):not(#dateSelectInline),
.modern-select:not(.inline-date-select):not(.modern-select-wide) {
  height: auto !important;
  max-height: 80px !important;
  min-height: 60px !important;
  overflow-y: auto !important;
  font-size: 0.65rem !important;
  padding: 3px !important;
}

.dateSelectBox:not(.inline-date-select):not(.modern-select-wide):not(#dateSelectInline) option,
.modern-select:not(.inline-date-select):not(.modern-select-wide) option {
  padding: 2px 5px !important;
  font-size: 0.6rem !important;
}

/* PC用インライン期間プルダウン */
select.inline-date-select,
.dateSelectBox.inline-date-select {
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 6px !important;
  padding-right: 20px !important;
  font-size: 0.65rem !important;
  overflow: hidden !important;
  line-height: 16px !important;
}

/* PC表示を2カラムに変更（モバイルと同様） */
@media (min-width: 992px) {
  /* 3カラム目（中央）を非表示 */
  .d-none.d-lg-block,
  div.d-none.d-lg-block {
    display: none !important;
  }
  
  /* 左カラム: 最大幅を制限 */
  .col-5.col-lg-block,
  div.col-5.col-lg-block,
  .col-5 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 200px !important;
    min-width: 160px !important;
    display: block !important;
  }
  
  /* 右カラム: 残りスペースを使用 */
  .col-7.col-lg-auto,
  div.col-7.col-lg-auto,
  .col-7 {
    flex: 1 1 auto !important;
    max-width: none !important;
  }
  
  /* モバイルコントロール（期間・指標・表示件数）をPC表示でも表示 */
  .mobile-controls-container {
    display: block !important;
  }
  
  /* PC表示時のモバイルコントロールのスタイル */
  .mobile-controls-container .control-panel {
    margin-bottom: 8px !important;
    padding: 8px !important;
  }
  
  .mobile-controls-container .metric-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  
  .mobile-controls-container .metric-pill {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
  }
  
  /* 表示件数ボタンを横並びで全て表示 */
  .mobile-controls-container .mobile-limit-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }
  
  .mobile-controls-container .mobile-limit-pills .metric-pill {
    flex: 1 !important;
    text-align: center !important;
  }
}

/* パネルの角を角張らせる（border-radius小さく） */
.control-panel,
.card-style,
.chart-container,
.ranking-table,
.comment-section,
.comment-form,
.comment-item {
  border-radius: 4px !important;
}

.modern-btn,
.metric-pill,
.search-btn,
.control-panel button,
.type-button-group button {
  border-radius: 4px !important;
}

.panel-title {
  border-radius: 3px !important;
}

/* 入力フィールドも角張らせる */
.modern-select,
.modern-search-input,
input,
textarea,
select {
  border-radius: 4px !important;
}

/* 特別企画ランキングのボタンを縦並びに - より強力なセレクタ */
.button-grid:has(button[data-type="alltime_allsong_oversea"]),
.button-grid:has(button[data-type*="2024_songs"]),
.metric-pills:has(button[data-type="alltime_allsong_oversea"]),
.metric-pills:has(button[data-type*="2024_songs"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
}

.button-grid:has(button[data-type="alltime_allsong_oversea"]) button,
.button-grid:has(button[data-type*="2024_songs"]) button {
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
}

/* ============================================
   全ボタンの角を統一（4px）
   ============================================ */
/* 2025年ランキングボタン */
.ranking-2025-button,
.ranking-2025-button:before {
  border-radius: 4px !important;
}

/* 番組表ボタン */
.anime-schedule-button,
.anime-schedule-button:before {
  border-radius: 4px !important;
}

/* 新作アニメ紹介ボタン */
.new-anime-button,
.new-anime-button:before {
  border-radius: 4px !important;
}

/* 言語切り替えセレクター */
.lang-selector {
  border-radius: 4px !important;
}

.lang-selector a {
  border-radius: 0 !important;
}

.lang-selector a:first-child {
  border-radius: 4px 0 0 4px !important;
}

.lang-selector a:last-child {
  border-radius: 0 4px 4px 0 !important;
}

/* モバイル用言語セレクター */
.lang-selector-mobile {
  border-radius: 4px !important;
}

.lang-selector-mobile a {
  border-radius: 4px !important;
}

/* その他全てのボタン・パネル */
.modern-btn,
.metric-pill,
.search-btn,
.control-panel,
.control-panel button,
.type-button-group button,
.card-style,
.chart-container,
.comment-section,
.comment-form,
.comment-item,
.modern-select,
.modern-search-input,
input,
textarea,
select,
.banner-item {
  border-radius: 4px !important;
}

/* ========================================
   ヘッダーユーザーエリア・Pushトグル
   ======================================== */
.header-user-area {
  position: absolute;
  top: 10px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10004;
}

/* Push通知トグルスイッチ（iOS風） */
.push-toggle-wrapper {
  display: flex;
  align-items: center;
}

.push-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.push-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.push-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  border-radius: 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.push-toggle-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.push-toggle-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.push-toggle input:checked + .push-toggle-slider {
  background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 12px rgba(0, 212, 170, 0.4);
}

.push-toggle input:checked + .push-toggle-slider::before {
  transform: translateX(24px);
}

.push-toggle input:checked + .push-toggle-slider .push-toggle-icon {
  left: 6px;
  right: auto;
  opacity: 1;
}

.push-toggle:hover .push-toggle-slider {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(0, 255, 255, 0.3);
}

.push-toggle.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.push-toggle.loading .push-toggle-slider::before {
  animation: pulse 0.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.9); }
}

/* ユーザー状態表示 */
.user-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-status-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 20px;
  color: #00ffff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.user-status-btn:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: #00ffff;
  color: #00ffff;
  text-decoration: none;
}

.user-status-btn.logout-btn {
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}

.user-status-btn.logout-btn:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: #ff6b6b;
}

.user-avatar-mini {
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .header-user-area {
    position: fixed;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    z-index: 10003;
  }
  
  /* ユーザー状態を上に、通知トグルを下に */
  .header-user-area .user-status {
    order: -1;
  }
  
  .header-user-area .push-toggle-wrapper {
    order: 1;
  }
  
  .push-toggle {
    width: 28px;
    height: 16px;
  }
  
  .push-toggle-slider::before {
    height: 10px;
    width: 10px;
  }
  
  .push-toggle input:checked + .push-toggle-slider::before {
    transform: translateX(12px);
  }
  
  .push-toggle-icon {
    font-size: 6px;
  }
  
  .user-status-btn {
    padding: 2px 4px;
    font-size: 8px;
  }
  
  .user-status-btn span:not(.user-avatar-mini) {
    display: none;
  }
  
  .user-avatar-mini {
    font-size: 10px;
  }
}

/* Push通知非対応時 - disabled状態で表示 */
.push-toggle-wrapper.unsupported .push-toggle {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.push-toggle-wrapper.unsupported .push-toggle-slider {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}