/* =================================================== */
/* ★★★ Impactフォント定義と調整用変数 ★★★ */
/* =================================================== */
@font-face {
  font-family: 'Impact Numbers';
  src: url('Impact.ttf') format('truetype');
  /* font-weightの指定は不要になります。
    JSで強制適用するため、シンプルな定義に戻します。
  */
}

/* 変数・レイアウト */
:root {
  /* ▼▼▼ ここでImpactフォントの見た目を調整できます ▼▼▼ */
  --impact-scale: 110%;       /* 縦幅の倍率 (100%が基準) */
  --impact-y-offset: 0.010em; /* 縦位置のオフセット (マイナスで上に、プラスで下に) */

  --impact-scale-meta: 120%; /* 「公開日時・動画時間」の縦幅 */
  --impact-y-offset-meta: 0.015em; /* 「公開日時・動画時間」の縦位置 */

  --impact-scale-ts: 110%;       /* タイムスタンプの縦幅 */
  --impact-y-offset-ts: 0.04em;  /* タイムスタンプの縦位置 */
  
  --bg-color: #f9fafe;
  --card-bg: #fff;
  --text-color: #242943;
  --muted: #7c8798;
  --radius: 11px;
  --shadow: 0 8px 24px -10px rgba(14, 14, 24, 0.13);
  --transition: .18s cubic-bezier(.47,.17,.21,.92);
  --btn-main: #6654e8;
  --btn-hover: #5945d9;
  --btn-reset-bg: #f4f7fb;
  --btn-reset-border: #bfc8d6;
  --btn-reset-color: #3a4251;
  --filter-btn-active: #ebe9fd;
  --active-filter: #7c3aed;
  --active-filter-text: #fff;
  --sticky-z: 2050;
  --search-z: 2060;

  --header-offset: 186px; /* フォールバック値 */
}

/* htmlタグからは overflow-x: hidden を削除します */
html { margin:0; padding:0; }

/* bodyタグのみに適用します */
body { overflow-x: hidden; margin:0; padding:0; }

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: fot-udkakugoc70-pro, 'Segoe UI', system-ui,-apple-system,sans-serif;
  font-weight: 400; /* 標準の太さを指定 */
  min-height: 100%;
}

/* ======================================================================== */
/* ===== ★★★ 固定ヘッダー内のコントロールを太字に変更 ★★★ ===== */
/* ======================================================================== */

/* --- ボタンとセレクトボックスのフォントを太字に変更 --- */
#filterToggleBtn,
#favOnlyToggleBtn,
#randomBtn,
#mainResetBtn,
#sortSelect {
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
}

.sticky-search-area {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100vw; z-index: var(--sticky-z);
  background: var(--bg-color);
  box-shadow: 0 2px 14px -8px #5744d814;
  padding: 0.38rem 0 0.21rem 0;
  border-radius: 0 0 14px 14px;
  border-bottom: 1.5px solid #ececec;
  display: flex; flex-direction: column; align-items: center;
  transition: box-shadow 0.14s;
}
.search-card {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.4em 15px 0.36em 15px;
  display: flex;
  flex-direction: column;
}
.search-row { display: flex; flex-direction: row; gap: 8px; align-items: center; width: 100%; }
.search-row-keyword { width: 100%; margin-bottom: 7px; }
.search-row-controls {
  display: flex; flex-direction: row; gap: 8px; width: 100%;
  position: relative;
}
.search-row-controls > * { min-width: 0; }
.searchbox-input {
  flex: 6 1 320px; min-width: 0;
  font-size: 1.05em; height: 2.3em;
  border-radius: 0.7em;
  padding: 0.32em 1em;
  border: 1.2px solid #e3e3ec;
  background: #fafdff;
  box-shadow: none;
  transition: border var(--transition), box-shadow var(--transition);
}
.searchbox-input:focus {
  border-color: var(--btn-main);
  box-shadow: 0 0 0 2px #7c3aed25;
  outline: none;
  background: #fff;
}
.searchbox-select {
  width: 100%;
  font-size: 1.01em;
  border-radius: 0.65em; height: 2.5em;
  
  /* ★修正: 矢印のスペース確保 (右パディングを 2.5em に変更) */
  padding: 0.18em 2.5em 0.18em 1em; 

  border: 1.1px solid #e3e3ec;
  
  /* ★修正: background -> background-color */
  background-color: #fafcff;
  
  transition: border var(--transition), box-shadow var(--transition);
  
  /* ★修正: appearance: none; に変更 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  z-index: 1;
  text-align-last: center; /* ★ 文字中央揃え */

  /* ★★★ 以下を追記 (矢印SVG) ★★★ */
  /* currentColor を使うことで、文字色に合わせて矢印の色が変わります */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 12px 12px;
}
.results-count-under-bar {
  width: 100%; text-align: left; max-width: 860px; margin: 0 auto;
  font-size: 1.09em; font-weight: 600; color: #5744d8;
  background: none; padding: 0.33em 1.2em 0.2em 1.2em;
  letter-spacing: 0.01em;
  user-select: text;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .search-card { max-width: 99vw; }
  .results-count-under-bar { max-width: 99vw; padding-left:0.5em; }
  .sort-wrapper { max-width: 99vw;}
}
@media (max-width: 600px) {
  .search-card { max-width: 100vw; border-radius: 9px; }
  .search-row-keyword { margin-bottom: 4px; }
  .search-row-controls { gap: 5px; }
  .results-count-under-bar { font-size:1em; padding-left:0.1em;}
  .sort-wrapper { flex: 2 1 90px;}
}
.filters-bar {
  width: 100vw; max-width: 860px; margin: 0 auto;
  background: rgba(250,250,255,0.95);
  padding: 2.5px 0 3px 0;
  box-shadow: 0 2px 8px -6px #7c3aed13;
  min-height: 32px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px;
  justify-content: flex-start;
  user-select: none;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}
.filter-tag {
  background: var(--active-filter); color: var(--active-filter-text);
  border-radius: 13px; padding: 2.5px 11px 2.5px 8px;
  font-size: 0.97em; font-weight: 500; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; border: none; box-shadow: 0 2px 7px -6px #7c3aed20;
  transition: background 0.13s;
  outline: none;
  max-width: none;
  overflow: visible; text-overflow: clip; white-space: normal;
  flex-wrap: wrap;
  word-break: break-word;
  line-height: 1.25;
}

.filter-tag:focus, .filter-tag:hover {
  background: #9b6ee9;
  color: #fff;
}
.filter-tag .fa-xmark { font-size: 0.93em; margin-left: 2px; }
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2045 !important;
  transition: opacity 0.22s;
}
.drawer-backdrop.show { display: block; opacity: 1; }
#filterDrawer { /* centered without transform */
  margin: 0 auto;
  display: none;
  width: 100vw; max-width: 900px;
  background: #f9f8ff;
  border-radius: 0 0 14px 14px;
  border: 1px solid #e7e7ef;
  box-shadow: 0 10px 32px -8px rgba(80,80,160,0.13);
  padding: var(--drawer-pt) var(--drawer-px) calc(var(--drawer-pt) - 2px) var(--drawer-px);
  margin: 0 auto 0 auto;
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  position: fixed !important;
  left: 0 !important;
  transform: none !important;
  right: 0 !important;
  top: 110px;
  z-index: 2050 !important;
  animation: fadein-drawer 0.17s;
  border-top: none;
  transition: opacity .17s;
}
@keyframes fadein-drawer { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: translateY(0);} } to { opacity: 1; transform: translate(-50%, 0);}
.filter-section { margin-bottom: 13px; padding-left: 1.2rem; padding-right: 1.2rem; }
@media (min-width: 769px){
  .filter-section { padding-left: 0; padding-right: 0; }
}

@media (max-width: 600px) {
  #filterDrawer { /* centered without transform */
  margin: 0 auto; max-width: 100vw; }
  .filter-section { padding-left: 0.5rem; padding-right: 0.5rem; }
}
.filter-title {
  font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.01em; color: #463d94;
  display: flex; align-items: center; gap: 4px;
}
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.guest-button, .btn-corner, .btn-year {
  padding: 8px 0;
  border-radius: 22px;
  font-weight: 500;
  border: 1.3px solid rgba(80,80,160,0.10);
  background: #fff;
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s, box-shadow 0.1s, transform 0.1s;
  position: relative;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 1.01em;
  margin-bottom: 0 !important;
  letter-spacing: 0.01em;
  overflow: hidden;
  /* ★修正: 1行に強制し、左右の余白を少し詰める */
  white-space: nowrap !important; 
  padding-left: 4px !important;
  padding-right: 4px !important;
  
  /* 文字サイズ変更時のガタつき防止 */
  line-height: 1.3;
  text-overflow: ellipsis;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 39px;
  transform: translateZ(0);
}
.btn-corner, .guest-button {
  font-size: 0.97em;
}
.btn-corner {
  font-size: clamp(0.90em, 3vw, 1em);
  line-height: 1.2;
  padding: 9px 2px 8px 2px;
}
.guest-button[aria-pressed="true"], .guest-button.active,
.btn-corner[aria-pressed="true"], .btn-corner.active,
.btn-year[aria-pressed="true"], .btn-year.active {
  outline: none;
  background: #ece8ff !important;
  border-color: #6c60e8 !important;
  box-shadow: 0 0 0 2.5px rgba(79,70,229,0.19) !important;
}

/* ホバーエフェクトを、マウス操作が可能なデバイスにのみ適用します */
@media (hover: hover) {
  .guest-button:hover, .btn-corner:hover, .btn-year:hover {
    transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 18px -6px #978df644; background: #f5f4ff;
    color: #242943;
  }
}

.filter-section:last-child { margin-bottom: 0; }

.main-content {
  padding-top: var(--header-offset);
  max-width: 900px; margin: 0 auto;
  transition: margin-top 0.18s cubic-bezier(.4,1,.7,1.2);
}

@media (max-width: 600px) {
  .btn-corner, .guest-button, .btn-year {
    font-size: 0.95em;
    min-height: 37px;
  }
  .btn-corner[data-corner="ぼっち・ざ・おーでぃしょん！"] {
    font-size: clamp(0.6em, 2.7vw, 1em);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
    padding-right: 2px;
    line-height: 1.2;
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .main-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}
#results {
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 10px; margin: 0; padding: 0;
}
@media (max-width: 767px) {
  #results { grid-template-columns: 1fr; gap: 9px 0; }
}
.episode-item {
  display: flex; gap: 13px; padding: 12px; border-radius: 11px; background: var(--card-bg);
  margin-bottom: 0; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid #e5e7ef; cursor: pointer; min-width: 0;
  transform: translateZ(0);
}

/* カードのホバーエフェクトも、マウス操作が可能なデバイスにのみ適用します */
@media (hover: hover) {
  .episode-item:hover {
    background: #f5f7fa;
    border-color: #d0d7de;
  }
}

.thumbnail {
  width: 120px; flex-shrink: 0; border-radius: 9px; object-fit: cover; aspect-ratio: 16/9;
  background: #f6f6ff;
  opacity: 1;
  transition: none;
}

.thumbnail.loaded {
  opacity: 1;
}

.no-results {
  color: #888; font-size: 1.1em;
  background: #fcfcff; padding: 14px; border-radius: 10px; box-shadow: 0 1px 8px -5px #aaa3;
  display: flex; align-items: center; justify-content: center; min-height: 100px;
  text-align: center; width: 100%;
}
.pagination-area {
  margin: 19px 0 10px 0; text-align: center;
}
.page-btn, .more-btn {
  background: #ebeafd; color: #463d94;
  border: 1px solid transparent; border-radius: 16px; padding: 9px 23px; margin: 0 3px 6px 3px;
  font-weight: 500; font-size: 1.02em; cursor: pointer;
  transition: background .17s, color .15s;
  box-shadow: 0 1.5px 4px -2px #7669ff15;
  transform: translateZ(0);
}
.page-btn.active, .more-btn:active {
  background: #7c3aed; color: #fff;
}
.page-btn:disabled, .more-btn:disabled { opacity: 0.55; }
.visually-hidden, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
footer { text-align: center; margin: 60px 0 20px; font-size: 0.8rem; color: var(--muted); }

/*
  数字を囲むspanタグに、Impactフォントを最優先で強制適用し、
  サイズと位置を調整するスタイル
*/
.impact-number {
  font-family: 'Impact Numbers' !important; /* 他の指定を上書きして強制適用 */
  font-weight: normal !important; /* ブラウザによる擬似的な太字化をリセット */
  display: inline-block; /* transformを有効にするため */
  /* CSS変数を使ってスケールと位置を適用 */
  transform: scaleY(var(--impact-scale, 1)) translateY(var(--impact-y-offset, 0));
}

/*
  公開日時・動画時間 (.episode-meta 内の数字) にだけ、
  独立した縦幅スケールを適用するための上書きルール
*/
.episode-meta .impact-number {
  transform: scaleY(var(--impact-scale-meta, 1)) translateY(var(--impact-y-offset-meta, 0));
}

/*
  タイムスタンプボタン (.ts-btn 内の数字) にだけ、
  独立したスケールと位置を適用するための上書きルール
*/
.ts-btn .impact-number {
  transform: scaleY(var(--impact-scale-ts, 1)) translateY(var(--impact-y-offset-ts, 0));
}


/* --- 以下、ダークモードや細部の追加CSS --- */

/* === ベース背景・テキスト === */
body.dark-mode {
  background: #22272e;
  color: #e5ecec;
}

/* 固定ヘッダー */
body.dark-mode .sticky-search-area {
  background: #252c35 !important;
  box-shadow: 0 2px 16px -10px #15182088 !important;
  border-bottom: 1.5px solid #2e3640 !important;
}
body.dark-mode .search-card {
  background: #2d333b !important;
  color: #f1f3f7 !important;
  box-shadow: 0 8px 32px -12px #14151a36 !important;
}

/* 入力欄・セレクト */
body.dark-mode .searchbox-input,
body.dark-mode .form-select.searchbox-select {
  background-color: #2d333b !important;
  color: #e6f0f3 !important;
  border-color: #394150 !important;
  padding-right: 2.5em !important;
  /* ★ 矢印の background-image 指定をここから削除します */
}

/* ★★★ 以下のブロックを「新しく追加」してください ★★★ */
body.dark-mode .form-select.searchbox-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}
body.dark-mode .searchbox-input:focus {
  background: #262e36 !important;
  border-color: #73b3e7 !important;
}
/* 検索結果件数バー */
body.dark-mode .results-count-under-bar {
  color: #a6e1fa !important;
  background: #252c35 !important;
}

/* 選択中フィルターエリア */
body.dark-mode .filters-bar {
  background: #232a33ee !important;
  box-shadow: 0 2px 8px -6px #0006 !important;
}

/* フィルターDrawer（詳細フィルター） */
body.dark-mode #filterDrawer { /* centered without transform */
  margin: 0 auto;
  background: #2b323b !important;
  border: 1px solid #425360 !important;
  box-shadow: 0 10px 32px -8px #000d !important;
}

body.dark-mode .filter-title {
  color: #8de0ee !important;
}
body.dark-mode .guest-button,
body.dark-mode .btn-corner,
body.dark-mode .btn-year {
  background: #232c35 !important;
  color: #e0f1f1 !important;
  border: 1.3px solid #40605a !important;
}
body.dark-mode .guest-button[aria-pressed="true"],
body.dark-mode .guest-button.active,
body.dark-mode .btn-corner[aria-pressed="true"],
body.dark-mode .btn-corner.active,
body.dark-mode .btn-year[aria-pressed="true"],
body.dark-mode .btn-year.active {
  background: #364a55 !important;
  color: #adebca !important;
  border-color: #96e5c4 !important;
  box-shadow: 0 0 0 2px #86e4e466 !important;
}

/* ダークモードのホバーエフェクトも同様に制限します */
@media (hover: hover) {
  body.dark-mode .guest-button:hover,
  body.dark-mode .btn-corner:hover,
  body.dark-mode .btn-year:hover {
    background: #384d5d !important;
    color: #96e5c4 !important;
  }
}


/* 選択ボタンアイコン */
body.dark-mode .filter-title .fa,
body.dark-mode .filter-title .fa-solid {
  color: #96e5c4 !important;
}

/* ページネーション */
body.dark-mode .pagination-area {
  background: none !important;
}
body.dark-mode .page-btn,
body.dark-mode .more-btn {
  background: #283240 !important;
  color: #a6e1fa !important;
  border: 1px solid transparent !important;
  border-radius: 16px;
  box-shadow: 0 2px 8px -6px #121a2160;
}
body.dark-mode .page-btn.active,
body.dark-mode .more-btn:active {
  background: #8de0ee !important;
  color: #27363f !important;
}
body.dark-mode .page-btn:disabled,
body.dark-mode .more-btn:disabled {
  background: #323a47 !important;
  color: #a9b8c0 !important;
}

/* 検索結果カード */
body.dark-mode .episode-item {
  border: 1px solid #33404c !important;
  background: #252c35 !important;
}

/* ダークモードのカードホバーエフェクトも同様に制限します */
@media (hover: hover) {
  body.dark-mode .episode-item:hover,
  body.dark-mode .episode-item:focus-visible {
    background: #27343b !important;
    border: 1px solid #4a5967 !important;
  }
}

body.dark-mode input::placeholder,
body.dark-mode .searchbox-input::placeholder {
  color: #8ca2b3 !important;   /* 見やすい淡いブルーグレー */
  opacity: 1 !important;
}

@media (min-width: 900px) {
  .main-content {
    max-width: 1160px;
  }
  .search-card,
  .filters-bar,
  .results-count-under-bar {
    max-width: 1160px;
  }
}

.episode-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.episode-item .thumbnail {
  width: 120px;
  flex-shrink: 0;
}

.episode-info {
  flex: 1 1 0%;
  min-width: 0;
}

.episode-meta {
  font-size: 0.98rem;
  color: var(--muted);
  margin: 3px 0 0 0;
  line-height: 1.4;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
}

/* テーマ変更ボタンのスタイル（こちらで表示を制御します） */
#theme-toggle-btn {
  /* 位置とレイヤー */
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3010 !important; /* ← z-indexをサイト内で最大級に引き上げ */

  /* アイコンの中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 見た目 */
  width: 55px;
  height: 55px;
  font-size: 30px;
  padding: 0;

  background: var(--card-bg, #ffffff);
  color: var(--muted, #7c8798);
  border: 2px solid var(--btn-reset-border, #e5e7eb);

  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  transform: translateZ(0);
}

#loading-screen.fadeout {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.0s cubic-bezier(.52,0,.37,1.09);
  }
  #loading-logo.fadein {
    opacity: 1 !important;
  }

  #loading-screen {
  background: #fff;
  transition: background 0.3s;
}
body.dark-mode #loading-screen {
  background: #22272f;
}

body.dark-mode #aboutModalContent {
  background: #23242d !important;
  color: #e5ecec !important;
  box-shadow: 0 8px 30px -6px #23244080;
}
body.dark-mode #aboutModalContent a {
  color: #8de0ee !important;
}


/* 初期描画の一瞬だけ使うプレロード用フラグ */
html.dark-preload,
html.dark-preload body {
  background: #22272e !important;
  color: #e5ecec !important;
}

/* ローディング画面が透けて白く見えないように */
body.dark-mode #loading-screen {
  background: #22272e; /* 透明だと背面が白く見える端末がある */
}
#results h5.mb-1 {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.25;
  max-width: 100%;

  /* ▼▼▼ 以下2行を追加 ▼▼▼ */
  min-width: 0; /* Flexboxレイアウト内で正しく縮むようにするおまじない */
  overflow: hidden; /* この要素自体のはみ出しも防ぐ */
}
/* ======================================================================== */
/* ===== (修正) タイトル名：改行許可・全表示設定 ===== */
/* ======================================================================== */

.guest-one-line {
  /* ▼ block から inline に変更して横並びにする ▼ */
  display: inline !important;
  
  width: auto !important;          /* 100% から auto に */
  max-width: 100% !important;
  
  white-space: normal !important;  /* 改行を許可 */
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  
  font-size: inherit; 
  visibility: visible !important;
  line-height: 1.5;
}

/* ついでにエピソード番号のスタイルも調整（微調整） */
#results h5.mb-1 .impact-number {
  font-size: 0.9em; 
  margin-bottom: 0; /* 下マージンを削除 */
  display: inline-block;
}

/* 各カードに★ボタン */
.episode-item{ position:relative; } /* 既存に追加でOK */
.fav-btn{
  position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid #e6e6f3;box-shadow:0 2px 10px -6px #0002;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s;
  transform: translateZ(0);
}
.fav-btn i{
  font-size:16px;
  color: #333742;
}
.fav-btn:hover{ transform:scale(1.06); }
.fav-btn.active{ background:#fff3c4; border-color:#f5b301; }
.fav-btn.active i{ color:#f5b301; }

/* ”0件”のときは .no-results が使われる（既存） */

/* 全体に少し動き：カードのフェードアップ */
@keyframes rise{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
#results .episode-item{
  animation:rise .24s ease both;
  animation-delay: calc(var(--i) * 20ms);
}


/* === Dark mode variable overrides for hover colors === */
body.dark-mode {
  --filter-btn-active: rgba(200, 200, 255, 0.15);
  --btn-main: #4d6272;
  --btn-hover: #a6e1fa;
}

/* ダークモード調整 */
body.dark-mode .fav-btn{ background:#2d333b;border-color:#394150; }


/* ===== Favorite button (dark mode) ===== */
body.dark-mode .fav-btn{
  background:#2a2f37 !important;
  border:1px solid #41505f !important;
  color:#e7eef6 !important;       /* 非アクティブ時の星色 */
}
body.dark-mode .fav-btn i{ color:#e7eef6 !important; }

/* アクティブ時は明るい背景＋濃い星（色反転で視認性アップ） */
body.dark-mode .fav-btn.active{
  background:#ffd24e !important;
  border-color:#ffd24e !important;
  color:#2b2b2b !important;
}
body.dark-mode .fav-btn.active i{ color:#2b2b2b !important; }

/* 0件カードをグリッド1行いっぱいにして中央へ */
#results .no-results{
  grid-column: 1 / -1;      /* 2カラム時も横いっぱい */
  max-width: 760px;          /* 広すぎ防止 */
  margin: 6px auto;          /* 中央寄せ */
}

/* ダークモード配色 */
body.dark-mode .no-results{
  background:#2d333b !important;
  color:#bcd6ea !important;
  border:1px solid #394150 !important;
  box-shadow: 0 1px 10px -6px #000a !important;
}

/* ★を右下に配置（既存の right/top 指定を上書き） */
#results .episode-item { position: relative; }           /* 念のため */
#results .episode-item .fav-btn{
  top: auto;                 /* 右上→解除 */
  bottom: 10px;              /* 右下に固定 */
  right: 10px;
}


/* ===== 端末でのダブルタップ拡大を抑止 ===== */
button, a, select, input, label { touch-action: manipulation; }
/* サムネ + タイムスタンプ表示 */
.thumb-col { width:120px; flex-shrink:0; display:flex; flex-direction:column; }
.ts-buttons { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.ts-btn {
  display:inline-block; padding:3px 8px; border-radius:999px; font-size:.85em;
  background:#ebeafd; color:#463d94; border:1px solid #dad4ff; line-height:1.2;
}
/* ダークモード */
body.dark-mode .ts-btn { background:#25323c; color:#a6e1fa; border-color:#415766; }


/* --- Autocomplete (検索候補) -------------------- */
.search-row-keyword { position: relative; }

.autocomplete[hidden] { display: none !important; }
.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e3e3ec;
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(60,60,110,0.18);
  max-height: 320px;
  overflow-y: auto;
  z-index: var(--search-z);
}

.autocomplete-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer; font-size: 0.98em;
}
.autocomplete-item:hover,
.autocomplete-item[aria-selected="true"] { background: #f4f6ff; }
.autocomplete-item .type {
  font-size: 12px; line-height: 1; padding: 2px 6px;
  border: 1px solid #e3e3ec; border-radius: 999px; color: #7c8798;
}
.autocomplete-item .match { font-weight: 700; }

/* Dark mode */
body.dark-mode .autocomplete {
  background: #2d333b; border-color: #394150; box-shadow: 0 14px 34px -12px #000a;
}
body.dark-mode .autocomplete-item:hover,
body.dark-mode .autocomplete-item[aria-selected="true"] { background: #2b3a46; }
body.dark-mode .autocomplete-item .type { border-color: #415766; color: #96e5c4; }

/* =================================================== */
/* ★★★ Adobe Fonts 読み込み対策 (FOUC防止) ★★★ */
/* =================================================== */

/* フォント読み込み中 (.wf-loading) は、検索候補欄を透明にしておく。
  .wf-loading は index.html のAdobe Fontsスクリプト (L140) によって自動で付与されます。
*/
html.wf-loading #autocomplete {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* フォント読み込み完了時 (.wf-active) に、検索候補欄を表示する。
  .wf-active もAdobe Fontsスクリプトによって自動で付与されます。
*/
html.wf-active #autocomplete {
  visibility: visible;
  opacity: 1;
}


/* --- iOS PWA の安全域対応（ノッチ・ステータスバーを回避） --- */
:root{
  /* 念のため左右/下も変数化 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 既存の .sticky-search-area に追記 */
.sticky-search-area{
  /* 上パディングを安全域ぶんだけ増やす */
  padding-top: calc(0.38rem + var(--safe-top));
  /* 横も端末によっては必要になるので入れておくと安心 */
  padding-left:  max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* 旧iOS対策（古いSafariで constant() を見る端末向け・任意） */
@supports (padding: constant(safe-area-inset-top)) {
  .sticky-search-area{
    padding-top: calc(0.38rem + constant(safe-area-inset-top));
  }
}

/* === Radio History Timeline (refined) === */
:root{
  --history-line: #dfe5f5;
  --history-dot: #6c5ce7;
  --history-dot-ring: 36, 28, 170; /* rgb base for ring alpha */
  --history-card-bg: #ffffff;
  --history-card-bd: #e9edf7;
  --history-muted: #667085;
  --history-year: #3b3486;
}
@media (prefers-color-scheme: dark){
  :root{
    --history-line: #384154;
    --history-dot: #9ad9de;
    --history-dot-ring: 154, 217, 222;
    --history-card-bg: #22272e;
    --history-card-bd: #364152;
    --history-muted: #9aa4b2;
    --history-year: #9ad9de;
  }
}

.history-section{
  width: 100%;
  max-width: 960px;
  margin: 56px auto 28px;
  padding: 0 16px;
}
.history-toggle{
  -webkit-tap-highlight-color: transparent;
  width: 100%; display:flex; align-items:center; gap:12px;
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--history-card-bd);
  background: var(--history-card-bg); color: inherit; cursor: pointer;
  font-weight: 750; letter-spacing: .01em;
  transform: translateZ(0);
}
.history-toggle .icon{ font-size: 1.15em; }
.history-toggle .title{ font-size: 1.06em; }
.history-toggle .sub{ margin-left:auto; color: var(--history-muted); font-weight:650; }
.history-toggle .chevron{ margin-left:6px; transition: transform .2s ease; }
.history-toggle[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
.history-toggle:focus-visible{ outline: 3px solid rgba(99,102,241,.45); outline-offset: 2px; }

.history-body{ position: relative; padding: 14px 2px 2px; }


@media (prefers-color-scheme: dark){
  .history-sticky-year{ background: rgba(33,38,46,.6); }
}

.history-timeline{
  position: relative; margin: 8px 0 0 28px; padding-left: 24px;
}
.history-timeline::before{
  content:""; position:absolute; left: 4px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(var(--history-line), transparent 60%), var(--history-line);
  border-radius: 2px;
}

/* 年の見出し */
.history-year{
  position: relative; margin: 22px 0 10px;
  font-weight: 900; color: var(--history-year); letter-spacing: .02em;
}

/* アイテム */
.history-item{
  position: relative; padding: 12px 14px 14px 16px; margin: 12px 0 14px;
  background: var(--history-card-bg); border: 1px solid var(--history-card-bd); border-radius: 12px;
  transform: translateZ(0);
  animation: historyFade .35s ease both;
}
@keyframes historyFade {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .history-item{ animation: none; }
}

.history-item::before{
  content:""; position:absolute; left: -27px; top: 18px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--history-dot);
  box-shadow:
    0 0 0 4px rgba(var(--history-dot-ring), .18),
    0 10px 24px -8px rgba(16,16,64,.35);
}
@media (hover: hover) {
  .history-item:hover{
    border-color: color-mix(in oklab, var(--history-card-bd), var(--history-dot) 20%);
  }
}

.history-item .date{ font-weight:800; margin-bottom:4px; color: color-mix(in oklab, var(--history-year), #ffffff); font-size: 13.5px; }
.history-item .label{ font-weight:800; line-height: 1.5; }
.history-item .desc{ color: var(--history-muted); margin-top: 2px; line-height: 1.7; }
.history-item a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 小さめ画面最適化 */
@media (max-width: 640px){
  .history-section{ margin-top: 40px; }
  .history-timeline{ margin-left: 22px; padding-left: 18px; }
  .history-item{ padding: 12px 12px 14px 14px; }
  .history-sticky-year{ font-size: 13px; padding: 5px 10px; }
}


/* === Radio History Timeline: tweaks === */
/* タイトル中央揃え（開閉ボタン） */
.history-toggle{
  position: relative;
  display:flex; align-items:center; gap:12px;
}
.history-toggle .title{
  position:absolute; left:50%; transform:translateX(-50%);
  text-align:center; pointer-events:none; /* クリックはボタン全体に委譲 */
  font-weight: 800;
}

/* ダークモード強化（ヒストリー一式） */
body.dark-mode .history-toggle{
  background:#2d333b !important; border-color:#3b4552 !important;
  color:#e9f2f6 !important;
}
body.dark-mode .history-timeline::before{ background:#3a4452 !important; }
body.dark-mode .history-year{ color:#9ad9de !important; }
body.dark-mode .history-item{
  background:#2d333b !important; border-color:#3b4552 !important;
}
body.dark-mode .history-item::before{
  background:#90c9ce !important; box-shadow:0 0 0 4px rgba(144,201,206,.18) !important;
}
body.dark-mode .history-item .date{ color:#9ad9de !important; }
body.dark-mode .history-sticky-year{
  background: rgba(33,38,46,.6) !important; border-color:#3b4552 !important;
  color:#9ad9de !important;
}

.history-item .date{
  font-weight: 800;
  font-size: 13px;       /* 13.5→13 に微下げ */
  opacity: .95;
}

/* Fix for circle misalignment on mobile */
@media (max-width: 600px) {
  .timeline-circle {
    position: relative;
    left: 0 !important;
    margin: 0 auto !important;
    transform: translateX(0) !important;
  }
}

/* Stylish design improvements */
.timeline-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,0.15);
  border: 2px solid #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .timeline-circle:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,0.25);
  }
}


/* Connectors */
.timeline-connector {
  width: 3px;
  background: linear-gradient(to bottom, #7c3aed, #4f46e5);
  margin: 0 auto;
}

/* Mobile: タイムラインの丸位置を微修正（18px padding, 線は4px → 左端 -21px） */
@media (max-width: 640px){
  .history-timeline .history-item::before{
    left: -21px; /* ずれ解消 */
  }
}



.history-timeline::before { left: -7px; }
.history-item::before      { left: -38px; }
@media (max-width: 640px){
  .history-timeline .history-item::before { left: -32px; }
}



/* ラジオの歴史：年バッジを使わない */
.history-sticky-year { display: none !important; }


/* ラジオの歴史：説明文の行間を調整 */
.history-item .desc { line-height: 1.55; }   /* 元は 1.7 */
@media (max-width: 640px){
  .history-item .desc { line-height: 1.4; }  /* スマホはさらに少しタイトに */
}

/* === Modal 基本 === */
.modal-overlay{
  display: none;
  position: fixed; inset: 0; z-index: 2055;
  /* 背景を少し濃くして、ぼかしがなくても見やすくします */
  background: rgba(0, 0, 0, 0.6) !important;
  align-items: center; justify-content: center;
}
.modal-overlay.show{ display: flex; }

/* ダークモード時はオーバーレイ濃いめ */
body.dark-mode .modal-overlay,
body.theme-blue .modal-overlay,
body.theme-red .modal-overlay {
  /* こちらも背景を少し濃く調整します */
  background: rgba(10, 10, 20, 0.7) !important;
}

.modal-content.history-modal{
  background: var(--history-card-bg);
  color: inherit;
  width: min(960px, 95vw);
  max-height: min(80vh, calc(100vh - 80px));
  border: 1px solid var(--history-card-bd);
  border-radius: 16px;
  overflow: auto;
  position: relative;
}

/* スマホでは少し低めにして、URLバーの有無で伸びすぎないようにsvhで制御 */
@media (max-width: 600px) {
  .modal-content.history-modal {
    /* ちょい低め：76svh くらいが体感バランス良い */
    max-height: min(76svh, calc(100svh - 96px));
  }
}

/* svh非対応ブラウザ用の軽いフォールバック（あれば上書きされる） */
@supports not (height: 1svh) {
  @media (max-width: 600px) {
    .modal-content.history-modal {
      max-height: min(76vh, calc(100vh - 96px));
    }
  }
}


/* モーダル固定ヘッダー（タイトル中央＋×固定） */
.history-modal .modal-header{
  position: sticky; top: 0; z-index: 10;
  background: var(--history-card-bg);
  border-bottom: 1px solid var(--history-card-bd);
  padding: 10px 16px;
}
.history-modal .modal-title{
  margin: 0 auto; font-size: 1.15rem; font-weight: 800;
  text-align: center; line-height: 1.2;
  color: var(--history-year);
  display: block;
}

/* ダーク時のカード境界色・背景は変数で自動適用 */
body.dark-mode .modal-content.history-modal{
  background: var(--history-card-bg);
  border-color: var(--history-card-bd);
}

/* モーダル内の“現在の年”バッジがヘッダーの下に来るよう微調整 */
#historyStickyYear{
  top: 56px;            /* ヘッダー高の分だけ下げる */
  z-index: 2;
}



/* 追加：サイトのダーク切替でも色変数を上書き */
body.dark-mode{
  --history-line:#384154;
  --history-dot:#ffffff;
  --history-dot-ring:154,217,222;
  --history-card-bg:#22272e;
  --history-card-bd:#364152;
  --history-muted:#9aa4b2;
  --history-year:#ffffff;
}

/* 追加：フェードイン＆ポップ */
.modal-overlay[hidden]{display:none;}
.modal-overlay.show{display:flex; animation:modalFade .22s ease-out both;}
.history-modal{transform:translateY(8px) scale(.98); animation:modalPop .24s ease-out both; will-change: transform, opacity;}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{to{transform:translateY(0) scale(1)}}


.history-modal .modal-close i{ font-size:1.25rem; }

@media (hover: hover) {
  .history-modal .modal-close:hover{ transform: scale(1.06); background: rgba(255,255,255,0.92); }
}
.history-modal .modal-close:active{ transform: scale(0.98); }
.history-modal .modal-close:focus-visible{ outline: 3px solid #8de0ee; outline-offset: 2px; }

/* ダークモードの閉じるボタン */
body.dark-mode .history-modal .modal-close{
  background: rgba(255,255,255,0.10);
  color: #eaf4f6;
  border-color: #3b4552;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
}
@media (hover: hover) {
  body.dark-mode .history-modal .modal-close:hover{
    background: rgba(255,255,255,0.16);
  }
}

/* 余白を少し広げる＆タイトル右に×のスペース確保 */
.history-modal .modal-header{ padding:14px 56px 12px; } /* 右=56pxで×が食い込まない */
.history-modal .history-body{  padding:16px 22px 22px 16px; } /* ←右側にゆとり */



/* 閉じる時：フェードアウト＋少し沈む */
.modal-overlay.closing{ animation: modalFadeOut .20s ease-in forwards; }
.modal-overlay.closing .history-modal{ animation: modalPopOut .18s ease-in forwards; }

@keyframes modalFadeOut { from{opacity:1} to{opacity:0} }
@keyframes modalPopOut  { from{transform: translateY(0) scale(1); opacity:1}
                          to  {transform: translateY(6px) scale(.98); opacity:.96} }

/* フェードアウト（closing） */
.modal-overlay.closing{ animation: modalHide .18s ease-in both; }
.modal-overlay.closing .history-modal{ animation: modalPopOut .18s ease-in both; }

@keyframes modalHide { from{opacity:1} to{opacity:0} }
@keyframes modalPopOut { from{transform:translateY(0) scale(1)} to{transform:translateY(8px) scale(.98)} }

body.fav-only #radio-history { display: none !important; }


.close {
    position: absolute !important;
    top: 10px !important;
    right: 30px !important; /* 数値を大きくして右寄せ */
    font-size: 30px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    z-index: 9999; /* モーダルの上にくるように */
}

/* === Radio History modal: CLOSE button (single source of truth) === */
#historyModal .modal-header {          /* ×と干渉しないだけ右側に余白を確保 */
  padding: 14px 48px 12px 16px;        /* ← 右側=48px（ボタン幅+余白ぶん） */
}

#historyModal .modal-close {
  position: absolute;
  top: 4px;
  right: 8px;                          /* ← もっと右寄せしたいなら 0～4px */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#aboutCloseBtn i, /* ← この行と */
#historyCloseBtn i { /* ← この行に変更 */
  font-size: 1.15rem;
}

/* ダークモードの見た目（既存と同じでOK。必要なら残す） */
body.dark-mode #aboutCloseBtn,
body.dark-mode #historyModal .modal-close {
  background: rgba(255,255,255,0.10);
  color: #eaf4f6;
  border-color: #3b4552;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
}
@media (hover: hover) {
  body.dark-mode #historyModal .modal-close:hover{
    background: rgba(255,255,255,0.16);
  }
}

/* ライトテーマ時の閉じるボタン（落ち着いた中間トーン） */
#aboutCloseBtn,
#historyModal .modal-close {
  background: #ffffff;
  color: #667085;                 /* × アイコン色：落ち着いたグレー */
  border: 1px solid #d3d8e0;      /* 薄い境界線で浮かないように */
  box-shadow: 0 8px 24px -12px rgba(20,30,55,.12);
}
@media (hover: hover) {
  #historyModal .modal-close:hover {
    background: #f6f8fc;            /* うっすらホバー */
  }
}


/* === FIX: Force light theme colors for history when site is in light mode,
   even if the OS is set to dark (iOS Safari was applying @media(prefers-color-scheme: dark)
   and overriding these CSS variables only for the history section). === */
body:not(.dark-mode){
  --history-line: #dfe5f5;
  --history-dot: #6c5ce7;
  --history-dot-ring: 36, 28, 170;
  --history-card-bg: #ffffff;
  --history-card-bd: #e9edf7;
  --history-muted: #667085;
  --history-year: #3b3486;
}

/* === iPhoneでfooterが隠れる対策（FAB & セーフエリア対応） === */

/* 1) 下固定ボタンをセーフエリア分だけ持ち上げる */
#toTopBtn,
#theme-toggle-btn {
  bottom: calc(18px + var(--safe-bottom)) !important;
}

/* 古いiOS向け（optional） */
@supports (bottom: constant(safe-area-inset-bottom)) {
  #toTopBtn,
  #theme-toggle-btn {
    bottom: calc(18px + constant(safe-area-inset-bottom)) !important;
  }
}

/* 2) ページ末尾に余白を用意して、ボタンに被らないようにする */
.main-content {
  padding-bottom: calc(60px + var(--safe-bottom));
}

footer {
  padding-bottom: calc(8px + var(--safe-bottom));
}


/* 「ぼっち・ざ・らじお！の歴史」を1行固定に */
.history-toggle .title{
  white-space: nowrap;       /* 改行しない */
  overflow: hidden;          /* はみ出しを隠す */
  text-overflow: ellipsis;   /* 入り切らない時は … */
  flex: 1 1 auto;            /* 右側の要素の分だけ縮められるように */
  min-width: 0;              /* flex子の省略幅を許可（ellipsisに必須） */
}


@media (max-width: 380px){
  .history-toggle .title{ font-size: 1em; }
}

/* === SNS share buttons (under the history button) === */
.share-buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:14px auto 0;
}

.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:999px;
  background:#ffffff;
  color:#374151;
  border:1px solid #e5e9f7;
  font-size:28px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.12);
  transition:transform .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent; /* モバイルの青ハイライト除去 */
  transform: translateZ(0);
}
@media (hover: hover) {
  .share-btn:hover{ transform:translateY(-1px); background:#f7f8ff; }
}

/* ダークモード調整 */
body.dark-mode .share-btn{
  background:#283240;
  color:#a6e1fa;
  border-color:#33404c;
}
@media (hover: hover) {
  body.dark-mode .share-btn:hover{
    background:#323a47;
  }
}


/* シェアボタンの下線を完全に無効化（hover/focus含む） */
.share-btn,
.share-btn:link,
.share-btn:visited,
.share-btn:hover,
.share-btn:focus,
.share-btn:active {
  text-decoration: none !important;
}

/* アイコンの行高を詰めてセンタリングを安定 */
.share-btn i {
  line-height: 1;
  pointer-events: none; /* クリックを <a> に通す保険 */
}

/* キーボード操作用のフォーカスリング（下線消した代わり） */
.share-btn:focus-visible {
  outline: 2px solid #5744D8;
  outline-offset: 2px;
}
body.dark-mode .share-btn:focus-visible {
  outline-color: #8de0ee;
}


@media (max-width: 600px){
  .share-btn{
    width:64px;          /* 指標：タップターゲット 48–64px */
    height:64px;
    font-size:30px;
  }
}


/* Radio History modal — close button (single source of truth) */
#historyModal .modal-header { padding:12px 48px 10px 16px; } /* 右側に×の余白 */
#aboutCloseBtn,
#historyCloseBtn {
  position: absolute;
  top: 6px;          /* ← 好みで微調整 */
  right: 8px;        /* ← 好みで微調整 */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}


/* ★ボタンの分だけ右側にスペース（スマホ） */
@media (max-width: 640px){
  #results .episode-item{ padding-right: 16px; } /* 34px(ボタン) + 10px*2(余白) */
}

@media (max-width: 640px){
  .episode-meta{
    font-size: 0.78rem; /* ★ここを好きな固定サイズ(例:11px～12px相当)に指定 */
    line-height: 1.35;
  }

  #results h5.mb-1{
    font-size: 13.5px;
    /* PC版と行間の感覚を合わせるため1.2に戻します */
    line-height: 1.2;
    /* h5自体の下の余白は無くし、上の.episode-meta側で管理します */
    margin-bottom: 0 !important;
    /* この要素の最低限の高さを指定していた設定を削除しました */
  }
}



/* ===== SP: 4ボタン等幅 + 並び替えは下段（gridで統一） ===== */
@media (max-width: 991px){
  .search-row-controls{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;                        /* 横・縦の間隔＝行間もこれで調整 */
    align-items: stretch;
  }

  /* 4ボタンを完全等幅に（既存の min-width を無効化） */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: .4em;
    padding-right: .4em;
  }

  /* 並び替えは2段目で左半分 */
  .search-row-controls .sort-wrapper{
    grid-column: 1 / 3; /* 1 / -1 (全幅) から変更 */
    margin-top: 0;
    width: 100%;
    min-width: 0; /* ▼ 追加: 縮小時にレイアウトが崩れるのを防ぎます */
  }
  .search-row-controls .sort-wrapper select{
    width: 100%;
    height: 100%; /* 高さをグリッド行に合わせる */
    min-height: 42px; /* 最小高さを保証 */
  }
  
  /* ▼▼▼ ここに #createPlaylistBtn のスタイルを新しく追加 ▼▼▼ */
  #createPlaylistBtn {
    grid-column: 3 / 5 !important; /* 2段目で右半分 */
    width: 100%;
    height: 100%; /* 高さをグリッド行に合わせる */
    min-height: 42px; /* 最小高さを保証 */
    justify-content: center;
    padding: 0 6px !important;
    align-items: center; /* 垂直中央揃え */
    min-width: 0;
    /* font-size, gap, white-space, overflow, text-overflow は不要になったため削除 */
  }

  /* レイアウト切替時の“にゅるっ”を防ぐ（保険） */
  .search-row-controls > * { transition: none !important; }
}




  /* 2) 「フィルタ」はアイコンのみなので擬似要素でテキストを追加 */
  #filterToggleBtn{
    display: flex; align-items: center; justify-content: center; gap: .35em;
  }
  #filterToggleBtn::after{
    content: " フィルタ";            /* ←お好みで「フィルター」に */
    font-size: .95em;
    font-weight: 500;
  }

  /* 3) 他のボタンも中央寄せ（見た目を揃える） */
  #favOnlyToggleBtn,
  #randomBtn,
  .reset-btn{
    display: flex; align-items: center; justify-content: center; gap: .35em;
  }


/* === Controls: 自動調整用の共通サイズ変数＋形崩れ防止 === */
@media (max-width: 768px){
  /* 文字サイズを JS から上書きするための CSS 変数（初期値 15px） */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    --ctl-fs: 15px;                 /* ← JS がここを書き換えます */
    font-size: var(--ctl-fs);
    white-space: nowrap;            /* ぜったい改行しない */
    overflow: hidden;
    text-overflow: ellipsis;
    gap: .45em;
    height: 37px;                   /* 高さは固定 → 形崩れしない */
    line-height: 1;                 /* アイコンと文字のベース */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
  }

  /* アイコンの大きさも文字と一緒に縮む */
  #filterToggleBtn i,
  #favOnlyToggleBtn i,
  #randomBtn i{
    font-size: calc(var(--ctl-fs) + 1px);
    line-height: 1;
  }

  /* フィルタのラベルは ::after で付与しているので、サイズ連動 */
  #filterToggleBtn::after{
    content: attr(data-label);      /* JSで data-label="フィルタ" を付けます */
    font-size: var(--ctl-fs);
    font-weight: 600;
    margin-left: .35em;
  }

  /* リセットにも記号を追加して左右バランスを統一（FontAwesome不要） */

}

/* === SPボタン: 見た目の統一（アイコン行高/記号サイズ） === */
@media (max-width: 768px){
  /* 自動調整フォント用 変数（JSで更新） */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    --ctl-fs: 15px;                 /* JSがここを上書き */
    font-size: var(--ctl-fs);
    line-height: 1;
    height: 37px;                   /* 高さ固定で形崩れ防止 */
  }

  /* FAアイコンの行高をきっちり揃える */
  #favOnlyToggleBtn i,
  #randomBtn i,
  #filterToggleBtn i{
    font-size: calc(var(--ctl-fs) + 1px);
    line-height: 1;
  }

  /* リセットにも記号（↺）— 他と同サイズに */

}


/* ===== SP: 4ボタンの太さと余白を完全統一 ===== */
:root { --ctl-gap: .38em; }  /* アイコンと文字の統一間隔 */

@media (max-width: 768px){
  /* 4ボタンの太さはすべて同じ（500）に統一。余白は margin で管理 */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    font-weight: 500 !important;
    gap: 0 !important;                /* gapに依存せず margin に統一 */
  }

  /* フィルタのラベル（::after）は太さ/間隔を統一 */
  #filterToggleBtn::after{
    margin-left: var(--ctl-gap) !important;
    font-weight: 500 !important;      /* ←600になっていたのを上書き */
  }

  /* 既存 <span> ラベルは左マージンで統一（先頭スペース除去はJS側で） */
  #favOnlyToggleBtn span,
  #randomBtn span{
    display: inline !important;
    margin-left: var(--ctl-gap);
    line-height: 1;
  }

  /* リセットの記号（↺）も同スケール・同間隔に */

}


/* === Desktop: 4ボタンの見た目を統一（並び替えは上段のまま） === */
:root{
  --ctl-gap-d: .45em;          /* アイコンと文字の間隔（PC） */
  --ctl-fs-d: 15.5px;          /* ボタンの基準フォントサイズ（PC） */
}




/* ===== PC: 4ボタンは等幅／余りは並び替えが吸収 ===== */
:root{
  /* 4ボタンの共通幅（画面に応じて少しだけ伸縮） */
  --pc-btn-w: clamp(124px, 12vw, 144px);
}



/* ===== Controls (Unified) — SP/PC 共通の見た目・間隔・幅 ===== */
:root{
  --pc-btn-w: clamp(124px, 12vw, 144px);
  --ctl-gap: .38em;
}


/* 「お気に入りだけ」ON時の保険（JSがクラス付与する前提） */
body.fav-only .episode-item:not(.is-fav) {
  display: none !important;
}





/* >=641pxでも検索結果枠の外側に同じ余白を付与 */
@media (min-width: 641px) {
  .main-content { padding-left: 15px; padding-right: 15px; }
}


/* === Buttons: focus-visible はアウトラインのみ（色は変えない） === */
#historyToggle:focus-visible {
  outline: 2px solid var(--btn-hover);
  outline-offset: 2px;
}


/* Fix for long selected filter tags being cut off */
.selected-filters .tag {
  white-space: normal !important;
  word-break: break-word;
  max-width: 100%;
}

/* ===== iOSスタンドアロン最適化 ===== */
:root {
  /* セーフエリアをCSS変数化 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* 100vh問題対策（--vh は JS で更新） */
html, body {
  min-height: calc(var(--vh, 1vh) * 100);
  overscroll-behavior-y: none; /* iOS のゴムスク抑制（モーダル時の背景スクロール防止に効く） */
}

/* ローディング全面背景をdvhベースに */
#loading-screen {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* 置き換え：前回の .ios-standalone .sticky-search-area を削除して、これを入れる */
.ios-standalone .sticky-search-area {
  /* 位置は固定のまま */
  top: 0;
  /* ノッチ分は位置を動かさず中に吸収（←ここがポイント） */
  padding-top: var(--safe-top);
  /* 上側の角丸は付けない（浮いて見える原因だったので） */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* 左右も安全域ぶん内側に余白をつけて端切れ回避 */
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}


/* 置き換え：以前の .ios-standalone .main-content をこれに */
.ios-standalone .main-content {
  padding-top: var(--header-offset); /* ← safe-top を足さない */
  padding-left: max(15px, var(--safe-left));
  padding-right: max(15px, var(--safe-right));
}


/* 置き換え */
.ios-standalone #filterDrawer { /* centered without transform */
  margin: 0 auto;
  top: calc(var(--header-offset) + 8px) !important;
  left: 0 !important;
  transform: none !important;
}


/* 画面下固定ボタン（トップへ/ダークモード）のホームバー干渉回避 */
.ios-standalone #toTopBtn,
.ios-standalone #theme-toggle-btn {
  bottom: calc(18px + var(--safe-bottom)) !important;
}

/* 下部に並ぶページネーション・余白もホームバーに配慮 */
.ios-standalone .pagination-area,
.ios-standalone footer {
  padding-bottom: calc(8px + var(--safe-bottom));
}

/* フィルター選択タグが端で切れないよう左右も配慮 */
.ios-standalone .filters-bar {
  padding-left: max(0.5rem, var(--safe-left));
  padding-right: max(0.5rem, var(--safe-right));
}

/* モーダル/ドロワー表示時の背景固定（スクロールロック） */
body.modal-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* 視覚ノイズ低減：PWA時は若干のシャドウ強度を抑え、にじみを減らす */
.ios-standalone .search-card,
.ios-standalone .episode-item {
  box-shadow: 0 6px 20px -10px rgba(0,0,0,0.12);
}


.ios-standalone .results-count-under-bar,
.ios-standalone .filters-bar {
  padding-left: max(0.5rem, var(--safe-left));
  padding-right: max(0.5rem, var(--safe-right));
}


/* ←PWA（ホーム画面から起動）時だけホームバー分を加算 */
.ios-standalone #toTopBtn,
.ios-standalone #theme-toggle-btn {
  bottom: calc(18px + var(--safe-bottom)) !important;
}


/* ▼ すでに入れている iOS セーフエリア下寄せは、スタンドアロン時にのみ適用 */
.ios-standalone #toTopBtn,
.ios-standalone #theme-toggle-btn {
  bottom: calc(18px + var(--safe-bottom)) !important;
}


/* 読み込み中/失敗時の背景色を明示してチラつき低減 */
.thumbnail { background: #2b323b; }
body.dark-mode .thumbnail { background: #1f262d; }

/* プレースホルダーに軽いスタイル */
.thumb-fallback { opacity: .85; }



/* sticky stability */
#filterDrawer{
  overflow-y: auto;
  will-change: scroll-position;
  contain: layout;
}

/* === Filter drawer sticky footer (restored) === */

#filterDrawer .drawer-footer{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;

  /* ▼ここからが変更・追加箇所です▼ */
  margin-left: calc(-1 * var(--drawer-px));
  margin-right: calc(-1 * var(--drawer-px));
  padding: 12px var(--drawer-px);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  /* ▲ここまで▲ */

  background: rgba(246,245,255,.92);
  border-top: 1px solid rgba(60,60,80,.18);
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 3;
  backdrop-filter: saturate(120%) blur(4px);
}
body.dark-mode #filterDrawer .drawer-footer,
.dark #filterDrawer .drawer-footer,
html[data-theme="dark"] #filterDrawer .drawer-footer{
  background: rgba(22,28,34,.88);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -4px 12px -10px rgba(0,0,0,.6);
}
#filterDrawer .drawer-close-btn{
  appearance: none;
  border: 1.3px solid #bfc8d6;
  background: #fff;
  color: #374151;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 46px;
  width: clamp(160px, 60%, 520px);
  box-shadow: 0 2px 14px -10px rgba(0,0,0,.25);
  transition: background .15s, border .15s, transform .08s;
}
@media (hover: hover) {
  #filterDrawer .drawer-close-btn:hover,
  #filterDrawer .drawer-close-btn:focus{
    background: #f1f5ff;
    border-color: #6654e8;
  }
}
#filterDrawer .drawer-close-btn:active{ transform: translateY(1px); }
@media (max-width: 640px){
  #filterDrawer .drawer-close-btn{ width: 100%; }
}
#filterDrawer{ padding-bottom: 0 !important; }
#filterDrawer > :last-child{ margin-bottom: 0 !important; }

/* ======================================================================== */
/* ===== フィルター画面のレイアウト (全デバイス対応) ===== */
/* ======================================================================== */

/* --- 基本スタイル (スマホ・タブレット向け) --- */
#filterDrawer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: min(100vw, 900px) !important; /* 基本の最大幅を900pxに設定 */
  top: var(--header-height, 96px) !important;
  bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transform: none !important;
  animation: fadein-drawer 0.17s ease-out;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  will-change: transform, opacity;
}

:root{
  /* 既存… */
  --header-offset: 186px; /* フォールバック値 */

  /* 追加: Drawer の余白（PC時に効く） */
  --drawer-px: clamp(12px, 2.2vw, 22px); /* 左右 */
  --drawer-pt: clamp(10px, 1.8vw, 18px); /* 上下 */
}



/* ===== これより下を全て差し替えてください ===== */

/* --- テーマスイッチャーのスタイル --- */
.theme-switcher {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 40px auto 20px;
  padding: 0 1rem;
}
.theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 5px -2px rgba(0,0,0,0.2);
  min-width: 32px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
@media (hover: hover) {
  .theme-btn:hover {
    transform: translateY(-2px);
  }
}
.theme-btn.active {
  box-shadow: 0 0 0 3px var(--btn-main, #6654e8);
  border-color: #fff;
}
body.dark-mode .theme-btn,
body.theme-blue .theme-btn,
body.theme-red .theme-btn {
  border-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode .theme-btn.active,
body.theme-blue .theme-btn.active,
body.theme-red .theme-btn.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--btn-hover, #a6e1fa);
}


/* --- レッドテーマ --- */
body.theme-red {
  --bg-color: #e60046;
  --card-bg: #cb003d;
  --item-bg: #cb003d;
  --text-color: #ffffff;
  --muted: #ffffff;
  --btn-bg: #f32263;
  --btn-main: #ffffff;
  --btn-hover: #ffffff;
  --filter-btn-active: #ef105a;
  --active-filter: #ffffff;
  --active-filter-text: #cb003d;
  --history-card-bg: var(--card-bg);
  --history-card-bd: #f32263;
  --history-year: #ffffff;
  --history-muted: var(--muted);
  --history-dot: #ffffff;
  --history-line: #f32263;
  --history-dot-ring: 255, 255, 255;
  --input-border: #f32263;
  --input-focus-shadow: rgba(255, 255, 255, 0.3);
  background: var(--bg-color) !important;
  color: var(--text-color) !important;

  /* ボタン用の変数を追加 */
  --btn-control-bg: #f32263;
  --btn-control-text: #ffffff;
  --btn-control-bg-active: #ffffff;
  --btn-control-text-active: #cb003d;
}



/* ===== テーマ別共通スタイル ===== */
body[class*="theme-"] .sticky-search-area { background: var(--bg-color) !important; border-bottom-color: var(--history-card-bd) !important; }
body[class*="theme-"] .search-card { background: var(--card-bg) !important; }
body[class*="theme-"] .searchbox-input, 
body[class*="theme-"] .searchbox-select { 
  background-color: var(--btn-bg) !important;
  border-color: var(--history-card-bd) !important;
  color: var(--text-color) !important;
  padding-right: 2.5em !important;
  /* ★ 矢印の background-image 指定をここから削除します */
}

/* ★★★ 以下のブロックを「新しく追加」してください ★★★ */
body[class*="theme-"] .searchbox-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}
body[class*="theme-"] .searchbox-input::placeholder { color: var(--muted) !important; opacity: 1 !important; }
body[class*="theme-"] .searchbox-input:focus { border-color: var(--btn-main) !important; box-shadow: 0 0 0 2px var(--input-focus-shadow) !important; }
body[class*="theme-"] .results-count-under-bar { color: var(--btn-hover) !important; background: transparent !important; }
body[class*="theme-"] #filterDrawer { background: var(--card-bg) !important; border-color: var(--history-card-bd) !important; }
body[class*="theme-"] .filter-title { color: var(--btn-hover) !important; }
body[class*="theme-"] .guest-button, body[class*="theme-"] .btn-corner, body[class*="theme-"] .btn-year { background: var(--btn-bg) !important; border-color: var(--history-card-bd) !important; color: var(--text-color) !important; }
body[class*="theme-"] .guest-button.active, body[class*="theme-"] .btn-corner.active, body[class*="theme-"] .btn-year.active { border-color: var(--btn-main) !important; background: var(--filter-btn-active) !important; box-shadow: 0 0 0 2.5px var(--input-focus-shadow) !important; }

/* テーマカラーのホバーエフェクトも同様に制限します */
@media (hover: hover) {
  body[class*="theme-"] .guest-button:hover,
  body[class*="theme-"] .btn-corner:hover,
  body[class*="theme-"] .btn-year:hover {
    background: var(--filter-btn-active) !important;
    border-color: var(--btn-main) !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

body[class*="theme-"] .episode-item { border-color: var(--history-card-bd) !important; background: var(--item-bg) !important; color: var(--text-color) !important; }
@media (hover: hover) {
  body[class*="theme-"] .episode-item:hover {
    background: var(--filter-btn-active) !important;
    border-color: var(--btn-main) !important;
    transform: none !important;
    box-shadow: none !important;
  }
}
body[class*="theme-"] .episode-meta, body[class*="theme-"] .fav-btn i { color: var(--muted) !important; }
body[class*="theme-"] .page-btn, body[class*="theme-"] .more-btn { background: var(--btn-bg) !important; color: var(--btn-hover) !important; border: 1px solid var(--history-card-bd) !important; }
body[class*="theme-"] .page-btn.active, body[class*="theme-"] .more-btn:active { background: var(--active-filter) !important; color: var(--active-filter-text) !important; border-color: var(--active-filter) !important; }
@media (hover: hover) {
  body[class*="theme-"] .page-btn:not(.active):hover { background: var(--filter-btn-active) !important; }
}
body[class*="theme-"] .fav-btn { background: var(--btn-bg) !important; border-color: var(--history-card-bd) !important; }
body[class*="theme-"] .fav-btn.active { background: var(--active-filter) !important; border-color: var(--active-filter) !important; }
body[class*="theme-"] .fav-btn.active i { color: var(--active-filter-text) !important; }
body[class*="theme-"] .history-toggle { background: var(--history-card-bg) !important; border-color: var(--history-card-bd) !important; }
body[class*="theme-"] .history-toggle .title, body[class*="theme-"] .history-modal .modal-title { color: var(--history-year) !important; }
body[class*="theme-"] .filters-bar { background: var(--bg-color) !important; }
body[class*="theme-"] .filter-tag { background: var(--active-filter) !important; color: var(--active-filter-text) !important; }
@media (hover: hover) {
  body[class*="theme-"] #toTopBtn:hover { background: var(--filter-btn-active) !important; border-color: var(--btn-main) !important; }
}
body[class*="theme-"] .share-btn { background: var(--btn-bg) !important; color: var(--btn-main) !important; border-color: var(--history-card-bd) !important; }
@media (hover: hover) {
  body[class*="theme-"] .share-btn:hover { border-color: var(--btn-main) !important; transform: translateY(-2px) !important; background: var(--filter-btn-active) !important;}
}
body[class*="theme-"] #filterDrawer .drawer-footer { background: var(--bg-color) !important; border-top-color: var(--history-card-bd) !important; backdrop-filter: none !important; }
body[class*="theme-"] #filterDrawer .drawer-close-btn { background: var(--btn-bg) !important; border-color: var(--history-card-bd) !important; color: var(--btn-main) !important; }
@media (hover: hover) {
  body[class*="theme-"] #filterDrawer .drawer-close-btn:hover { background: var(--filter-btn-active) !important; border-color: var(--btn-main) !important; }
}
body[class*="theme-"] #results .no-results { background: var(--card-bg) !important; border: 1px solid var(--history-card-bd) !important; color: var(--text-color) !important; box-shadow: none !important; }
body[class*="theme-"] .modal-content.history-modal, body[class*="theme-"] .history-modal .modal-header { background: var(--card-bg) !important; border-color: var(--history-card-bd) !important; }
body[class*="theme-"] .history-item { background: var(--btn-bg) !important; border-color: var(--history-card-bd) !important; box-shadow: none !important; }

body[class*="theme-"] #aboutCloseBtn,
body[class*="theme-"] #historyCloseBtn {
  background: var(--btn-bg) !important;
  color: var(--btn-main) !important;
  border-color: var(--history-card-bd) !important;
}
@media (hover: hover) {
  body[class*="theme-"] #aboutCloseBtn:hover,#historyCloseBtn:hover { background: var(--filter-btn-active) !important; }
}
body[class*="theme-"] #aboutModalContent { background: var(--card-bg) !important; color: var(--text-color) !important; }
body[class*="theme-"] #aboutModalContent b, body[class*="theme-"] #aboutModalContent a, body[class*="theme-"] #aboutCloseBtn, body[class*="theme-"] .about-title { color: var(--muted) !important; }
body[class*="theme-"] .autocomplete { background: var(--btn-bg) !important; border-color: var(--history-card-bd) !important; }
@media (hover: hover) {
  body[class*="theme-"] .autocomplete-item:hover, body[class*="theme-"] .autocomplete-item[aria-selected="true"] { background: var(--filter-btn-active) !important; }
}
body[class*="theme-"] .autocomplete-item .type { border-color: var(--history-card-bd) !important; color: var(--muted) !important; }
body[class*="theme-"] .autocomplete-item .match { color: var(--btn-main) !important; }
body[class*="theme-"] .ts-btn { background-color: var(--active-filter) !important; color: var(--active-filter-text) !important; border-color: var(--active-filter) !important; }
body[class*="theme-"] .loading-ball { background-color: var(--btn-main) !important; }
body[class*="theme-"] #loading-screen { background: var(--bg-color) !important; }
body[class*="theme-"] .floating-panel { background: color-mix(in srgb, var(--bg-color), transparent 20%) !important; border-color: var(--history-card-bd) !important; }
body[class*="theme-"] #theme-toggle-btn { background-color: var(--card-bg) !important; color: var(--text-color) !important; border: 1px solid var(--history-card-bd) !important; }
body[class*="theme-"] .site-footer { color: var(--muted) !important; }
body[class*="theme-"] .site-footer a { color: var(--muted) !important; }

/* ===== フローティングテーマパネル ===== */
#theme-toggle-btn {
  z-index: 10 !important;
}

.floating-panel {
  position: fixed;
  right: 18px;
  bottom: 80px; /* トリガーボタンの少し上 */
  z-index: 3005; /* ← z-indexをボタンよりは下、他のUIよりは上に設定 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 10px;
  border-radius: 999px; /* ピルケース形状 */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.2);

  /* 非表示時の状態 */
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* これを追加 */
.floating-panel.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}




body[class*="theme-"]  {
  background: var(--btn-bg) !important;
  color: var(--btn-main) !important;
  border-color: var(--history-card-bd) !important;
}


/* style.css の該当部分を、このコードに丸ごと置き換えてください */

/* ===== 「このサイトについて」モーダル (競合解決版) ===== */

/* モーダル背景のオーバーレイ */
#aboutModal {
  /* display: flex; ← JSで制御するため、ここでの指定は不要 */
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(30, 29, 52, 0.25);
  will-change: transform, opacity;

  /* 競合の原因だった transition と opacity は削除しました */
}

/* モーダル本体の見た目 */
#aboutModalContent {
  position: relative;
  background: #fdfdff;
  border-radius: 16px;
  padding: 40px 24px 28px;
  width: 90vw;
  max-width: 480px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.2);
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  will-change: transform, opacity;

  /* 競合の原因だった transform と transition は削除しました */
}

/* アニメーションは、style.css の別箇所で定義済みの
  #aboutModal.show { animation: modalFade ... }
  #aboutModal.closing { animation: modalFadeOut ... }
  が正しく適用されます。
*/


@media (hover: hover) {
  #aboutCloseBtn:hover { color: #333; }
}

/* ロゴ・タイトル・本文 */
.about-logo { width: 200px; margin-bottom: 16px; }
.about-title { font-size: 1.25rem; font-weight: 700; color: var(--text-color); margin-bottom: 12px; }
.about-body { font-size: 0.95rem; line-height: 1.8; color: var(--text-color); }
.about-body b { color: #5744d8; }

/* ダークモード・テーマカラー対応 */
body.dark-mode #aboutModalContent { background: #23242d !important; color: #e5ecec !important; }
body.dark-mode #aboutCloseBtn { color: #8de0ee !important; }
body[class*="theme-"] #aboutModalContent { background: var(--card-bg) !important; color: var(--text-color) !important; }
body[class*="theme-"] #aboutModalContent b,
body[class*="theme-"] #aboutModalContent a,
body[class*="theme-"] .about-title { color: var(--muted) !important; }

/* === ダークモードの水色を白に完全統一する最終修正 === */



/* === ダークモードのアクセントカラー（水色）を白に統一する修正 === */
body.dark-mode {
  --btn-hover: #ffffff; /* ホバー用の変数を白に変更 */
}

body.dark-mode .results-count-under-bar,
body.dark-mode .filter-title,
body.dark-mode .history-year,
body.dark-mode .history-item .date,
body.dark-mode .history-sticky-year,
body.dark-mode #aboutModalContent a,
body.dark-mode #aboutCloseBtn,
body.dark-mode .share-btn,
body.dark-mode .ts-btn {
  color: #ffffff !important;
}

/* ホバー時などに色が戻ってしまうのを防ぐための追加指定 */
@media (hover: hover) {
  body.dark-mode .share-btn:hover {
    color: #ffffff !important;
  }
}

/* 1. 並び替えセレクトボックスの文字色を白に */
body.dark-mode .searchbox-select {
  color: #ffffff !important;
}

/* 2. 検索ボックス選択時の青い枠線を白に変更 */
body.dark-mode .searchbox-input:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) !important;
}

/* 3. フィルター内のアクティブなボタンの青緑色を白に変更 */
body.dark-mode .guest-button[aria-pressed="true"],
body.dark-mode .guest-button.active,
body.dark-mode .btn-corner[aria-pressed="true"],
body.dark-mode .btn-corner.active,
body.dark-mode .btn-year[aria-pressed="true"],
body.dark-mode .btn-year.active {
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* 4. ページ番号ボタンのアクティブ時の水色の背景を白に変更 */
body.dark-mode .page-btn.active,
body.dark-mode .more-btn:active {
  background: #ffffff !important;
  color: #27363f !important; /* 背景が白になるため、文字はダークカラーにします */
}



/* === ダークモードの水色を白に完全統一する最終修正（追記） === */









/* フィルターDrawer内のボタン (アクティブ時) */
body:not(.dark-mode):not([class*="theme-"]) .guest-button[aria-pressed="true"],
body:not(.dark-mode):not([class*="theme-"]) .btn-corner[aria-pressed="true"],
body:not(.dark-mode):not([class*="theme-"]) .btn-year[aria-pressed="true"] {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.1) !important;
}

/* フィルターDrawer内のボタン (ホバー時) */
@media (hover: hover) {
  body:not(.dark-mode):not([class*="theme-"]) .guest-button:hover,
  body:not(.dark-mode):not([class*="theme-"]) .btn-corner:hover,
  body:not(.dark-mode):not([class*="theme-"]) .btn-year:hover {
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.15) !important;
  }
}


/* タイムスタンプボタン */
body:not(.dark-mode):not([class*="theme-"]) .ts-btn {
  background: #eeeeee !important;
  color: #000000 !important;
  border-color: #dcdcdc !important;
}

/* 検索結果件数バーの文字色 */
body:not(.dark-mode):not([class*="theme-"]) .results-count-under-bar {
  color: #000000 !important;
}

/* ページ番号ボタンの配色 */
body:not(.dark-mode):not([class*="theme-"]) .page-btn,
body:not(.dark-mode):not([class*="theme-"]) .more-btn {
  color: #000000 !important;
  background: #eeeeee !important;
}
body:not(.dark-mode):not([class*="theme-"]) .page-btn.active,
body:not(.dark-mode):not([class*="theme-"]) .more-btn:active {
  background: #000000 !important;
  color: #ffffff !important;
}
@media (hover: hover) {
  body:not(.dark-mode):not([class*="theme-"]) .page-btn:not(.active):hover,
  body:not(.dark-mode):not([class*="theme-"]) .more-btn:not(:active):hover {
    background: #dddddd !important;
  }
}


/* 検索ボックスのフォーカスリング */
body:not(.dark-mode):not([class*="theme-"]) .searchbox-input:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
}

/* 「このサイトについて」モーダル内の強調文字 */
body:not(.dark-mode):not([class*="theme-"]) .about-body b {
  color: #000000 !important;
}

/* 「ひすとりー」モーダル内の日付の色 */
body:not(.dark-mode):not([class*="theme-"]) .history-item .date {
  color: #000000 !important;
}






/* 1. ダークモード時に --text-color 変数自体を上書きする */
body.dark-mode {
  --text-color: #e5ecec; /* テキストカラー変数を明るい色に */
}

/* 2. 変数を使っていない太字(b)やリンク(a)の色を個別に指定する */
body.dark-mode #aboutModalContent .about-title,
body.dark-mode #aboutModalContent .about-body,
body.dark-mode #aboutModalContent .about-body b,
body.dark-mode #aboutModalContent .about-body a {
  color: #ffffff !important; /* タイトル、本文、強調文字、リンクをすべて純粋な白に */
}


/* ===== デザイン改善提案: フィルター選択色の強調 ===== */

/* --- 1. 通常（ライト）モードの選択色を上書き --- */
body:not(.dark-mode):not([class*="theme-"]) .guest-button[aria-pressed="true"],
body:not(.dark-mode):not([class*="theme-"]) .btn-corner[aria-pressed="true"],
body:not(.dark-mode):not([class*="theme-"]) .btn-year[aria-pressed="true"] {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.15) !important;
}

/* --- 2. ダークモードの選択色を上書き --- */
body.dark-mode .guest-button[aria-pressed="true"],
body.dark-mode .btn-corner[aria-pressed="true"],
body.dark-mode .btn-year[aria-pressed="true"] {
  background: #ffffff !important;
  color: #27363f !important; /* ダークモードの濃い背景色に合わせる */
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.3) !important;
}

/* --- 3. 各カラーテーマの選択色を上書き --- */
body[class*="theme-"] .guest-button.active,
body[class*="theme-"] .btn-corner.active,
body[class*="theme-"] .btn-year.active {
  background: #ffffff !important;
  color: var(--bg-color) !important; /* 各テーマの背景色を文字色として使用 */
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.4) !important;
}

/* --- 4. ホバー時のスタイルも調整（任意ですが推奨） --- */
/* 選択されていないボタンのホバーエフェクトを少し抑えめにして、選択状態との差を明確にします */
@media (hover: hover) {
  .guest-button:not([aria-pressed="true"]):hover,
  .btn-corner:not([aria-pressed="true"]):hover,
  .btn-year:not([aria-pressed="true"]):hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1);
  }
}

/* ===== 修正: スマホ表示時のテーマ選択ボタンの比率を修正 ===== */

/*
  ===== スマホでの描画バグ対策 (色が即時反映されない問題) =====
  タップ時に即座にスタイルが反映されない問題を解決するため、
  主要なボタンやカード要素に3D変換を適用してGPUレンダリングを促します。
  見た目上の変化はありませんが、ブラウザの描画を安定させます。
*/

/*
  ===== ダークモード時の選択中フィルタータグの色を修正 =====
  「青山吉能」などの主要な出演者タグの色はそのままに、
  「その他」タグおよび、それ以外のタグ（年、コーナーなど）の背景を白に変更します。
*/
body.dark-mode .filter-tag:not([data-type="guest"]),
body.dark-mode .filter-tag[data-value="その他"] {
  background: #ffffff !important;       /* 背景色を白に */
  color: #22272e !important;           /* 文字色をダークモードの背景色に近い濃い色に */
}

/* ===== 検索候補のアイコンスタイル ===== */

/* アイコンを格納する.type要素のスタイル調整 */
.autocomplete-item .type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;  /* アイコンの背景の幅 */
  height: 28px; /* アイコンの背景の高さ */
  padding: 0;   /* 元のpaddingをリセット */
  font-size: 14px; /* アイコンのサイズ */
}

/* 通常（ライト）モードのアイコン色 */
body:not(.dark-mode):not([class*="theme-"]) .autocomplete-item .type {
  border-color: #dcdcdc !important;
  color: #000000 !important;
}

/* ダークモードのアイコン色 */
body.dark-mode .autocomplete-item .type {
  border-color: #415766 !important;
  color: #ffffff !important;
}

/* カラーテーマのアイコン色 */
body[class*="theme-"] .autocomplete-item .type {
  border-color: var(--history-card-bd) !important;
  color: var(--muted) !important;
}



/* 公開日時などのメタ情報をさらに控えめに */
.episode-meta {
  font-size: 0.8rem; /* ★固定サイズに変更（ここを調整すれば全画面で変わります） */
  opacity: 0.7;
}

/* ===== 全テーマ共通: ボタン背景色をカードと統一 ===== */

/* --- 1. 通常（ライト）モード --- */
body:not(.dark-mode):not([class*="theme-"]) .page-btn,
body:not(.dark-mode):not([class*="theme-"]) .more-btn,
body:not(.dark-mode):not([class*="theme-"]) .share-btn {
  background-color: var(--card-bg) !important; /* カード背景色（白）を適用 */
  border-color: #e5e9f7 !important;
}

/* --- 2. ダークモード --- */
/*カード背景色を基準に、関連ボタンの背景と文字色を完全に統一。*/

/* --- 対象ボタンの文字色を「白」に強制指定 --- */
body.dark-mode .page-btn,
body.dark-mode .more-btn,
body.dark-mode .share-btn,
body.dark-mode .history-toggle {
  color: #ffffff !important;
}

/* --- ページ番号、SNS、ひすとりーボタンの基本背景色をカード背景(#252c35)に合わせる --- */
body.dark-mode .page-btn,
body.dark-mode .more-btn,
body.dark-mode .share-btn,
body.dark-mode .history-toggle {
  background-color: #252c35 !important;
  border-color: #33404c !important;
}

/* --- ページ番号ボタン「選択中」のスタイル --- */
body.dark-mode .page-btn.active,
body.dark-mode .more-btn:active {
  background-color: #33414d !important; /* 少し明るいグレーで選択状態を表現 */
  border-color: #ffffff !important;     /* 枠線を白にして強調 */
  color: #ffffff !important;            /* 文字色も白を維持 */
}

/* --- ホバー時のスタイル --- */
@media (hover: hover) {
  body.dark-mode .page-btn:not(.active):hover,
  body.dark-mode .share-btn:hover {
    background-color: #33414d !important; /* 選択中ボタンと同じ背景色に */
    border-color: #4a5967 !important;
  }
}


/* ===== ダークモードのカード内テキストが水色になる問題の修正 ===== */
body.dark-mode .episode-item h5 {
  color: #ffffff !important; /* タイトルとゲスト名の文字色を白に強制 */
}

/* --- 3. カラーテーマ（前回と同じ） --- */
body[class*="theme-"] .page-btn,
body[class*="theme-"] .more-btn,
body[class*="theme-"] .share-btn {
  background-color: var(--card-bg) !important;
}



/* ===== ダークモードの「ひすとりー」モーダル内のラベル文字色を修正 ===== */
body.dark-mode .history-item .label {
  color: #ffffff !important; /* ラベル（太字）の文字色を白に強制 */
}


/* 画面の高さが特に低いデバイス（例: 700px以下）では、余白をさらに詰めて見やすくする */
@media (max-height: 700px) {
  #aboutModalContent {
    padding-top: 25px;
    padding-bottom: 20px;
  }
  .about-logo {
    width: 150px; /* ロゴも少し小さくする */
    margin-bottom: 12px;
  }
}

/* 画面全体のスクロールを止めるための新しいスタイル (点滅しない方法) */
body.body-scroll-locked {
  overflow: hidden !important;
}
/* ======================================================================== */
/* ===== (V28・最終確定版) 上部コントロールボタン スタイル ===== */
/* ======================================================================== */

/* --- 0. ボタンの基本構造 (全テーマ共通) --- */
#filterToggleBtn,
#favOnlyToggleBtn,
#randomBtn,
.reset-btn,
#createPlaylistBtn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1.5px solid !important; border-radius: 10px !important; font-weight: 700 !important;
  line-height: 1 !important; white-space: nowrap !important;
  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.1s ease, opacity 0.2s ease !important;
  cursor: pointer !important; user-select: none !important;
  box-shadow: none !important;
}

/* --- 1. アイコンとテキストのスタイル調整 (全テーマ共通) --- */
#filterToggleBtn i, #favOnlyToggleBtn i, #randomBtn i,
#filterToggleBtn::after, #favOnlyToggleBtn span, #randomBtn span, .reset-btn {
  font-size: 1em !important; margin: 0 !important; flex-shrink: 0 !important;
}
#filterToggleBtn i, #favOnlyToggleBtn i, #randomBtn i {
  width: 1.1em !important; text-align: center !important;
}
/* アイコン垂直位置の微調整 */
#filterToggleBtn i { 
  position: relative; top: -0.0005em;
 }
#favOnlyToggleBtn i {
  position: relative; top: -0.02em;
 }
#randomBtn i { 
  position: relative; top: 0.009em;
 }
.reset-btn::before { 
  font-size: 1.10em !important; position: relative; top: 0.040em;
 }

/* --- 2. デバイスごとのレイアウトとスタイル --- */

/* ★★★★★ ここから新しく追加 ★★★★★ */
/* スマホ (768px以下) */
@media (max-width: 768px) {
  /* (V2.1) の flex-direction: column を打ち消す */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn {
    flex-direction: row !important; /* 縦並び -> 横並びに強制 */
    height: 42px !important;        /* (V2.1) の height: auto を上書き */
    min-height: 42px;               /* (V2.1) の min-height: 60px を上書き */
    padding: 0 6px !important;      /* (V2.1) の padding: 8px 4px を上書き */
    gap: 0.35em !important;         /* (V2.1) の gap: 4px を上書き */
    visibility: hidden; /* ★計算完了まで完全に非表示 */
    opacity: 0;
  }
  
  /* (V2.1) のアイコンスタイルを上書き */
  #filterToggleBtn i,
  #favOnlyToggleBtn i,
  #randomBtn i,
  .reset-btn::before {
    font-size: 1em !important;      /* (V2.1) の 22px を上書き */
    font-weight: 700 !important;    /* (V2.1) の 900 を上書き */
    top: 0 !important;              /* (V2.1) の位置調整をリセット */
    width: 1.1em !important;        /* (V28) の共通スタイルに合わせる */
    text-align: center !important;
  }
  
  /* (V2.1) のテキストスタイルを上書き */
  #filterToggleBtn::after,
  #favOnlyToggleBtn span,
  #randomBtn span,
  .reset-btn {
    font-size: 1em !important;      /* (V2.1) の 11px を上書き (JSが調整する) */
    line-height: 1 !important;      /* (V2.1) の 1.2 を上書き */
  }
  
  /* JSが調整するフォントサイズのベースを定義 */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn {
     font-size: 14px !important; /* JSが調整するまでの安全な初期サイズ */
  }

  /* (V2.1) のリセットアイコン (fa-rotate-left) を (V28) の ↺ に戻す */
  .reset-btn::before {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
      content: "↺" !important;
  }

  /* 下段のボタン */
  #createPlaylistBtn {
    height: 42px !important;
    padding: 0 10px !important;
    font-size: 15.5px !important;
    gap: 0.5em !important;
  }

  /* ★JSの準備完了合図で表示 */
  body.buttons-ready #filterToggleBtn,
  body.buttons-ready #favOnlyToggleBtn,
  body.buttons-ready #randomBtn,
  body.buttons-ready .reset-btn {
    visibility: visible;
    opacity: 1;
  }
  #filterToggleBtn::after {
      content: "フィルタ" !important;
      font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
      font-weight: 700 !important;
  }
}

/* スマホ (991px以下) */
@media (min-width: 769px) and (max-width: 991px) {


  #filterToggleBtn, #favOnlyToggleBtn, #randomBtn, .reset-btn {
    height: 42px !important;
    font-size: 14px !important;     /* JSが調整するまでの安全な初期サイズ */
    padding: 0 6px !important;
    gap: 0.35em !important;
    visibility: hidden; /* ★計算完了まで完全に非表示 */
    opacity: 0;
  }

  #createPlaylistBtn {
    height: 42px !important;
    padding: 0 10px !important;
    font-size: 15.5px !important;
    gap: 0.5em !important;
  }

  /* ★JSの準備完了合図で表示 */
  body.buttons-ready #filterToggleBtn,
  body.buttons-ready #favOnlyToggleBtn,
  body.buttons-ready #randomBtn,
  body.buttons-ready .reset-btn {
    visibility: visible;
    opacity: 1;
  }
  #filterToggleBtn::after {
      content: "フィルタ" !important;
      font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
      font-weight: 700 !important;
    }

  /* ★★★ ↓↓ この3行を追加してください ↓↓ ★★★ */
    .reset-btn::before {
      content: "↺" !important;
    }
}
/* PC (992px以上) */
@media (min-width: 992px) {
  .search-row-controls { display: flex !important; gap: 10px !important; }
  .search-row-controls .sort-wrapper {
    flex: 1 1 0 !important; /* ★ 変更 */
    min-width: 0 !important; /* ★ 変更 */
  }
  
  #createPlaylistBtn {
    height: 40px !important; /* 高さを他のボタン(40px)と統一 */
    padding: 0 1em !important; /* paddingを他のボタンと合わせる */
    font-size: 15.5px !important; /* フォントサイズを他のボタンと合わせる */
    gap: 0.55em !important; /* gapを他のボタンと合わせる */
    flex-shrink: 0; /* ボタンが縮まないようにする */
    
    /* ▼▼▼ 以下の2行を追加 ▼▼▼ */
    flex: 1 1 0 !important; /* 均等に伸びるようにする */
    min-width: 0 !important; /* 最小幅の制限を解除 */
  }

  /* 4つのボタンを左に、並び替えと再生リストボタンを右に分ける */
  .search-row-controls .reset-btn + .sort-wrapper {
    margin-left: auto !important;
  }
  #filterToggleBtn, #favOnlyToggleBtn, #randomBtn, .reset-btn {
    height: 40px !important;
    font-size: 15.5px !important;
    padding: 0 0.9em !important;
    width: calc(12.5% - 8.75px) !important; flex: 0 0 auto !important;
    gap: 0.55em !important;
  }

  /* --- PWAモード (PC) の場合のレイアウト上書き (V4・カード2枚幅) --- */
    /* (左4ボタン非表示に伴い、残り2ボタンを均等幅にする) */
    html.is-standalone .search-row-controls .reset-btn + .sort-wrapper {
      margin-left: 0 !important; /* autoマージンを解除 */
    }

    /* ズレ修正: .sort-wrapper と #createPlaylistBtn をグループ化 */
    html.is-standalone .search-row-controls .sort-wrapper,
    html.is-standalone #createPlaylistBtn {
      /* ▼▼▼ flex の3番目の値（flex-basis）をカード1枚幅の計算値に変更 ▼▼▼ */
      flex: 1 1 calc(50% - 5px) !important; /* 修正前: 1 1 0 !important; */
      width: auto !important; 
      box-sizing: border-box !important;
    }
    
    /* ズレ修正: select要素の高さをボタン(40px)と合わせる */
    html.is-standalone .search-row-controls .sort-wrapper,
    html.is-standalone #sortSelect {
      height: 40px !important; /* ★ 高さを 40px に強制統一 */
    }

  #filterToggleBtn::after {
      content: "フィルタ" !important;
      font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
      font-weight: 700 !important;
    }
    
  .reset-btn::before { content: "↺" !important; }
  #filterToggleBtn { gap: 0 !important; }
  #filterToggleBtn::after { margin-left: 0.55em !important; }
}

/* --- 3. ボタンを押した瞬間の共通動作 --- */
#filterToggleBtn:active, #favOnlyToggleBtn:active, #randomBtn:active, .reset-btn:active {
  transform: translateY(1px) !important;
}

/* ================================================= */
/* ===== テーマごとの色設定と挙動定義 (変更なし) ===== */
/* ================================================= */

/* --- 1. ライトモード --- */
body:not(.dark-mode):not([class*="theme-"]) #filterToggleBtn,
body:not(.dark-mode):not([class*="theme-"]) #favOnlyToggleBtn,
body:not(.dark-mode):not([class*="theme-"]) #randomBtn,
body:not(.dark-mode):not([class*="theme-"]) .reset-btn,
body:not(.dark-mode):not([class*="theme-"]) #createPlaylistBtn { /* ← ここに追加 */
  background-color: #ffffff !important; color: #22272e !important; border-color: #d0d7de !important;
}

/* ★★★ ↓↓ このブロックを新しく追加 ↓↓ ★★★ */
body:not(.dark-mode):not([class*="theme-"]) #createPlaylistBtn {
  background-color: #e52d27 !important; /* YouTubeの赤 */
  color: #ffffff !important;
  border-color: #e52d27 !important;
}

body:not(.dark-mode):not([class*="theme-"]) #filterToggleBtn[aria-expanded="true"],
body:not(.dark-mode):not([class*="theme-"]) #favOnlyToggleBtn[aria-pressed="true"] {
  background-color: #22272e !important; color: #ffffff !important; border-color: #22272e !important;
}
@media (hover: hover) {
  body:not(.dark-mode):not([class*="theme-"]) #filterToggleBtn:hover,
  body:not(.dark-mode):not([class*="theme-"]) #favOnlyToggleBtn:hover,
  body:not(.dark-mode):not([class*="theme-"]) #randomBtn:hover,
  body:not(.dark-mode):not([class*="theme-"]) .reset-btn:hover,
  body:not(.dark-mode):not([class*="theme-"]) #createPlaylistBtn:hover { /* ← ここに追加 */
    background-color: #22272e !important; color: #ffffff !important; border-color: #22272e !important; transform: none !important;
  }
  /* ★★★ ↓↓ このブロックを新しく追加 ↓↓ ★★★ */
  body:not(.dark-mode):not([class*="theme-"]) #createPlaylistBtn:hover {
    background-color: #c21d19 !important; /* 暗い赤 */
    border-color: #c21d19 !important;
    color: #ffffff !important;
  }
}

/* --- 2. ダークモード --- */
body.dark-mode #filterToggleBtn, body.dark-mode #favOnlyToggleBtn, body.dark-mode #randomBtn, body.dark-mode .reset-btn,
body.dark-mode #createPlaylistBtn { /* ← ここに追加 */
  background-color: #2d333b !important; color: #e5ecec !important; border-color: #394150 !important;
}

body.dark-mode #createPlaylistBtn {
  /* 背景を明るい赤から、他のボタンと同じ暗いグレーに変更 */
  background-color: #2d333b !important;
  /* 文字色を「パステルレッド」にして、YouTubeっぽさを残しつつ目に優しく */
  color: #e52d27 !important;
  /* 枠線も馴染むグレーに変更 */
  border-color: #394150 !important;
}

body.dark-mode #filterToggleBtn[aria-expanded="true"], body.dark-mode #favOnlyToggleBtn[aria-pressed="true"] {
  background-color: #e5ecec !important; color: #22272e !important; border-color: #e5ecec !important;
}
@media (hover: hover) {
  body.dark-mode #filterToggleBtn:hover, body.dark-mode #favOnlyToggleBtn:hover, body.dark-mode #randomBtn:hover, body.dark-mode .reset-btn:hover,
  body.dark-mode #createPlaylistBtn:hover { /* ← ここに追加 */
    background-color: #e5ecec !important; color: #22272e !important; border-color: #e5ecec !important; transform: none !important;
  }
  /* ★★★ ↓↓ このブロックを新しく追加 ↓↓ ★★★ */
  body.dark-mode #createPlaylistBtn:hover {
    background-color: #e52d27 !important; /* 標準の赤 */
    border-color: #e52d27 !important;
    color: #ffffff !important;
  }
}

/* --- 3. カラーテーマ共通 --- */
body[class*="theme-"] #filterToggleBtn,
body[class*="theme-"] #favOnlyToggleBtn,
body[class*="theme-"] #randomBtn,
body[class*="theme-"] .reset-btn,
body[class*="theme-"] #createPlaylistBtn { /* ← ここに追加 */
  background-color: var(--btn-control-bg) !important;
  color: var(--btn-control-text) !important;
  border-color: var(--btn-control-bg) !important;
}

/* ★★★ ↓↓ このブロックを新しく追加 ↓↓ ★★★ */
body[class*="theme-"] #createPlaylistBtn {
  background-color: #ffffff !important; /* 白 */
  color: var(--bg-color) !important; /* テーマの背景色 */
  border-color: #ffffff !important;
}

body[class*="theme-"] #filterToggleBtn[aria-expanded="true"],
body[class*="theme-"] #favOnlyToggleBtn[aria-pressed="true"] {
  background-color: var(--btn-control-bg-active) !important;
  color: var(--btn-control-text-active) !important;
  border-color: var(--btn-control-bg-active) !important;
}

@media (hover: hover) {
  body[class*="theme-"] #filterToggleBtn:hover,
  body[class*="theme-"] #favOnlyToggleBtn:hover,
  body[class*="theme-"] #randomBtn:hover,
  body[class*="theme-"] .reset-btn:hover,
  body[class*="theme-"] #createPlaylistBtn:hover { /* ← ここに追加 */
    background-color: var(--btn-control-bg-active) !important;
    color: var(--btn-control-text-active) !important;
    border-color: var(--btn-control-bg-active) !important;
    transform: none !important;
  }
  /* ★★★ ↓↓ このブロックを新しく追加 ↓↓ ★★★ */
  body[class*="theme-"] #createPlaylistBtn:hover {
    background-color: #f0f0f0 !important; /* 少し暗い白 */
    border-color: #f0f0f0 !important;
    color: var(--bg-color) !important;
  }
}



/* ======================================================================== */
/* ===== YouTubeプレイリスト作成ボタンのスタイル ===== */
/* ======================================================================== */
.results-count-under-bar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 件数とボタンを両端に配置 */
  gap: 16px;
}

#createPlaylistBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #e52d27; /* YouTubeの赤 */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.95em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

@media (hover: hover) {
  #createPlaylistBtn:hover {
    background-color: #c21d19;
  }
}


/* ボタンがhidden属性を持つ場合は非表示にする */
#createPlaylistBtn[hidden] {
  display: none;
}

/* ダークモード時の調整 */
body.dark-mode #createPlaylistBtn {
  background-color: #ff4742;
}
@media (hover: hover) {
  body.dark-mode #createPlaylistBtn:hover {
    background-color: #e52d27;
  }
}


/* ===== オーバーレイ上でのタッチ操作によるスクロールを防止 ===== */
#drawerBackdrop,
#aboutModal,
#historyModal {
  touch-action: none;
}

/* style.css の一番下に追加してください */

/* =================================================== */
/* ★★★ PWA/モバイル対応強化スタイル ★★★ */
/* =================================================== */

/* --- PWAモードのセーフエリア対応 --- */
/* :rootで定義済みのセーフエリア変数を活用します */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* PWAモードで起動された場合のみ、ヘッダーの上の余白を調整 */
.is-standalone .sticky-search-area {
  padding-top: calc(0.38rem + var(--safe-top));
}

/* PWAモードで起動された場合のみ、コンテンツ全体の左右の余白を調整 */
.is-standalone .main-content {
  padding-left: max(15px, var(--safe-left));
  padding-right: max(15px, var(--safe-right));
}

/* PWAモードで起動された場合のみ、画面下のボタン等がホームバーに被らないように調整 */
.is-standalone .pagination-area,
.is-standalone footer {
  padding-bottom: var(--safe-bottom);
}
.is-standalone #theme-toggle-btn {
  bottom: calc(18px + var(--safe-bottom));
}

/* --- 100vh問題対策 --- */
/* JSで設定した --vh 変数を使ってローディング画面の高さを設定 */
#loading-screen {
  height: calc(var(--vh, 1vh) * 100);
}

/* style.cssの一番下に追加 */

/* 「このサイトについて」モーダルにも開閉アニメーションを定義 */
#aboutModal.show {
  animation: modalFade .22s ease-out both;
}
#aboutModal.show #aboutModalContent {
  animation: modalPop .24s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#aboutModal.closing {
  animation: modalFadeOut .20s ease-in forwards;
}
#aboutModal.closing #aboutModalContent {
  animation: modalPopOut .18s ease-in forwards;
}


html {
  scroll-padding-top: var(--header-offset, 186px);
}

/* style.css の L3062 あたりからを、丸ごと差し替えてください */

/* ======================================================================== */
/* ===== (V2.1) スマホ表示時: コントロールボタンのデザインを微調整 ===== */
/* ======================================================================== */
@media (max-width: 991px) {

  /* 4つのボタンに共通の縦並びレイアウトを適用 */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important; /* 左右中央揃え */
    height: auto !important;
    min-height: 60px;
    padding: 8px 4px !important;
    gap: 4px !important;
  }

  /* アイコンのスタイルを調整 */
  #filterToggleBtn i,
  #favOnlyToggleBtn i,
  #randomBtn i,
  .reset-btn::before {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
    width: 1.1em !important; /* 左右の表示幅を統一 */
    text-align: center !important; /* 幅内部でアイコンを中央に */
    font-weight: 900 !important;
    position: relative; /* ★修正1: 垂直位置調整(top)の基準点とします */
  }

  /* アイコンのスタイルを調整 (L3036 の既存のルールは削除して、
     上の L3030 のルールにマージしました) */

  /* リセットボタンのアイコンをFontAwesomeに統一 */
  .reset-btn::before {
      font-family: "Font Awesome 6 Free" !important;
      content: "\f2ea" !important; /* fa-rotate-left アイコン */
  }

  /*
   * ▼▼▼ ここからが修正箇所です ▼▼▼
   *
   * 「リセット」ボタンのスタイルを分離して、
   * IDセレクタ (#mainResetBtn) を使い詳細度を上げます。
   */

  /* テキスト部分のスタイルを調整 (フィルタ、お気に入り、ランダム) */
  #filterToggleBtn::after,
  #favOnlyToggleBtn span,
  #randomBtn span {
    font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* リセットボタン本体のテキストスタイルを調整 */
  #mainResetBtn {
    font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important; /* 既存の .reset-btn のスタイルをここに含めます */
  }
  
  /* ▲▲▲ 修正はここまでです ▲▲▲ */


  /*
   * ★★★ 修正2: 以下のルールブロックを新しく追加します ★★★
   * (PWA版のL3048-L3066の調整値を、こちらの非PWA版にも適用します)
   */

  /* 「フィルタ」アイコン (fa-filter) */
  #filterToggleBtn i {
    top: 0.05em !important; /* 約 1px 下に移動 */
  }

  /* 「お気に入り」アイコン (fa-star) */
  #favOnlyToggleBtn i {
    top: 0.05em !important; /* 約 0.4px 下に移動 */
  }

  /* 「ランダム」アイコン (fa-shuffle) */
  #randomBtn i {
    top: 0.08em !important; /* 約 1px 下に移動 */
  }

  /* 「リセット」アイコン (fa-rotate-left) */
  .reset-btn::before {
    /* L3043で position: relative が指定済みのため、topのみ指定 */
    top: 0.15em !important;
  }

  /* テキスト部分のスタイルを調整 */
  #filterToggleBtn::after,
  #favOnlyToggleBtn span,
  #randomBtn span
  {
    font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif !important; /* ★この行を追加 */
    font-size: 11px !important;
    font-weight: 700 !important;
  }

}


/* ======================================================================== */
/* ===== 全画面共通: お気に入りボタンのアイコンを塗りつぶしに統一 ===== */
/* ======================================================================== */

/* お気に入りボタンのアイコンを常にSolidスタイル(塗りつぶし)で表示 */
#favOnlyToggleBtn i {
  font-weight: 900 !important;
}

/* ======================================================================== */
/* ===== (最終・確定版) カードレイアウト 全デバイス強制修正 ===== */
/* ======================================================================== */

/* --- 1. まず、既存のカードスタイルの一部をリセット --- */
/* (ここは変更しないでください) */
.episode-item,
.episode-item > a,
.episode-item .thumb-col,
.episode-item a > div:last-of-type {
  gap: 0;
  flex: none;
}
#results h5.mb-1,
.episode-meta {
  margin: 0;
}

/* --- 2. カード全体の基本設定 --- */
/* (ここは変更しないでください) */
.episode-item {
  padding: 12px;
}

/* --- 3. リンクエリアのレイアウトを再構築 (最重要) --- */
/* (ここは変更しないでください) */
.episode-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100%;
}

/* --- 4. サムネイルの領域を固定 --- */
/* (ここは変更しないでください) */
.episode-item .thumb-col {
  flex-shrink: 0;
}

/* --- 5. テキストエリアをマージンで強制的に配置 --- */
/* (ここは変更しないでください) */
.episode-item a > div:last-of-type {
  flex-grow: 1;
  min-width: 0;
}

/* ======================================================================== */
/* ★★★ スマホ表示 (幅 767px 以下) の調整エリア ★★★ */
/* ======================================================================== */
@media (max-width: 767px) {
  /* --- サムネイル (幅120px / 高さ67.5px) --- */
  .episode-item .thumbnail {
    width: 130px; 
  }

  /* --- テキストエリア全体の配置 --- */
  .episode-item a > div:last-of-type {
    margin-left: 12px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 67.5px; 
  }

  /*
   * ▼▼▼ (1) エピソード名 (スマホ) ▼▼▼
   */
  #results h5.mb-1 {
    margin-top: 0.2rem;
    font-size: 1.2em; 
    line-height: 1.2rem; 
    word-break: normal;
    overflow-wrap: normal;
  }

  /*
   * ▼▼▼ (2) ゲスト名 (スマホ) ▼▼▼
   */
  .guest-one-line {
    margin-top: 1.0px; 
    font-size: 0.85rem; 
    line-height: 1.25;
    display: block !important;
    width: 100% !important;
  }

  /*
   * ▼▼▼ (3) 公開日時・(4) 動画時間 (スマホ) ▼▼▼
   */
  .episode-meta {
    margin-top: 0.35rem; 
    font-size: 0.75rem;
    line-height: 1.35; 
    opacity: 0.7;
  }
}

/* ======================================================================== */
/* ★★★ タブレット表示 (iPad縦・横) (幅 768px ～ 1180px) の調整エリア ★★★ */
/* ======================================================================== */
@media (min-width: 768px) and (max-width: 1180px) {
  .episode-item {
    padding: 14px;
    padding-right: 16px;
  }
  
  /* --- サムネイル (幅150px / 高さ84.375px) --- */
  .episode-item .thumbnail {
    width: 150px;
  }

  /* --- テキストエリア全体の配置 --- */
  .episode-item a > div:last-of-type {
    margin-left: 12px; /* サムネイルとテキスト間の隙間 */
    height: 84px; /* サムネイルの高さに固定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*
   * ▼▼▼ (1) エピソード名 (タブレット) ▼▼▼
   */
  #results h5.mb-1 {
    margin-top: 3px;
    font-size: 1.4rem;
    line-height: 1.0; 
  }
  
  /*
   * ▼▼▼ (2) ゲスト名 (タブレット) ▼▼▼
   */
  .guest-one-line {
    margin-top: 2px; 
    font-size: 1.1rem;
    line-height: 1.2; 
    display: block;
    width: 100%;
  }

  /*
   * ▼▼▼ (3) 公開日時・(4) 動画時間 (タブレット) ▼▼▼
   */
  .episode-meta {
    margin-top: 3px; 
    font-size: 0.8rem; 
    line-height: 1.3; 
    opacity: 0.7;
  }
}

/* ======================================================================== */
/* ★★★ PC表示 (幅 1181px 以上) の調整エリア ★★★ */
/* ======================================================================== */
@media (min-width: 1181px) {
  .episode-item {
    padding: 14px;
  }
  
  /* --- サムネイル (幅150px / 高さ84.375px) --- */
  .episode-item .thumbnail {
    width: 150px;
  }

  /* --- テキストエリア全体の配置 --- */
  .episode-item a > div:last-of-type {
    margin-left: 12px; /* サムネイルとテキスト間の隙間 */
    height: 84px; /* サムネイルの高さに固定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*
   * ▼▼▼ (1) エピソード名 (PC) ▼▼▼
   */
  #results h5.mb-1 {
    margin-top: 3px;
    font-size: 1.4rem;
    line-height: 1.0; 
  }
  
  /*
   * ▼▼▼ (2) ゲスト名 (PC) ▼▼▼
   */
  .guest-one-line {
    margin-top: 2px; 
    font-size: 1.1rem;
    line-height: 1.2; 
    display: block;
    width: 100%;
  }

  /*
   * ▼▼▼ (3) 公開日時・(4) 動画時間 (PC) ▼▼▼
   */
  .episode-meta {
    margin-top: 3px; 
    font-size: 0.8rem; 
    line-height: 1.3; 
    opacity: 0.7;
  }
}

/* ======================================================================== */
/* ===== (最終・確定コード) ゲスト名がはみ出す問題の根本対策 ===== */
/* ======================================================================== */
/* (ここは変更しないでください) */
.episode-item > a > div:last-of-type {
  flex: 1;
  min-width: 0;
}
.episode-item h5.mb-1 {
  width: 100%;
}

/* ======================================================================== */
/* ===== (再修正) タイムスタンプをサムネイル右下に表示 (PC/SP両対応) ===== */
/* ======================================================================== */

/* --- 基本設定 (全デバイス共通) --- */

/* 1. サムネイルを含む親要素(.thumb-col)を、絶対位置指定の基準点にします */
.thumb-col {
  position: relative;
  /* display:flexやflex-directionをリセットし、シンプルな箱にします */
  display: block;
  flex-shrink: 0;
}

/* 2. タイムスタンプのコンテナを、親要素の右下に絶対配置します */
.ts-buttons {
  position: absolute;
  bottom: 5px;
  right: 5px;
  margin-top: 0;
  z-index: 1; /* 画像の上に確実に表示されるように念のため指定 */
}

/* 3. タイムスタンプボタンの見た目を調整します */
.ts-btn {
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  border: none;
  font-size: 0.8em;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

/* 4. ダークモードでも同じスタイルを適用します */
body.dark-mode .ts-btn {
  background-color: rgba(0, 0, 0, 0.75) !important;
  color: white !important;
  border-color: transparent !important;
}


/* --- デバイスごとの幅調整 --- */

/* 5. スマホ表示 (幅 767px 以下) のコンテナ幅をサムネイルに合わせます */
@media (max-width: 767px) {
  .thumb-col {
    width: 130px; /* スマホ用サムネイル幅 */
  }
}

/* 6. タブレット・PC表示 (幅 768px 以上) のコンテナ幅をサムネイルに合わせます */
@media (min-width: 768px) {
  .thumb-col {
    width: 150px; /* タブレット・PC用サムネイル幅 */
  }
}

/* ======================================================================== */
/* ===== (JS連携) 最小フォントでも収まらない場合に省略表示を適用 ===== */
/* ======================================================================== */
.guest-one-line.needs-ellipsis {
  text-overflow: ellipsis !important;
}


/* style.css に追記 */
body.body-scroll-locked {
  position: fixed; /* ページを完全に固定 */
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* =================================================== */
/* ★★★ モーダル表示中の背景スクロールを安定的に禁止 ★★★ */
/* =================================================== */
html.scroll-locked {
  overflow: hidden !important;
}

.sort-wrapper {
  display: block;
  position: relative;
}



/* =================================================== */
/* ★★★ 全体的な左右の余白を統一 ★★★ */
/* =================================================== */
.results-count-under-bar,
.filters-bar,
.main-content {
  /* 左右に15pxの余白を追加して、全体の縦のラインを揃えます */
  padding-left: 15px !important;
  padding-right: 15px !important;

  /* 余白を追加してもレイアウトが崩れないようにします */
  box-sizing: border-box !important;
}




/* =================================================== */
/* ★★★ 検索ボックスのクリアボタン ★★★ */
/* =================================================== */

/* inputとボタンを囲むラッパー */
.search-input-wrapper {
  position: relative;
  width: 100%; /* 横幅いっぱいに広がるように */
}

/* 既存のinputスタイルはそのままに、クリアボタンのスペースを確保 */
.search-input-wrapper .searchbox-input {
  width: 100%;
  /* 右側のpaddingを増やしてボタンと文字が被らないようにします */
  padding-right: 38px !important;
}

/* クリアボタンのスタイル */
.clear-search-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  padding: 0;

  background-color: #d1d5db; /* 少し濃いめのグレー */
  color: #4b5563;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s, background-color 0.15s;
}

/* JavaScriptによってhidden属性が外されたら表示する */
.clear-search-btn:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) {
  .clear-search-btn:hover {
    background-color: #9ca3af;
    color: #ffffff;
  }
}

/* --- ダークモード対応 --- */
body.dark-mode .clear-search-btn {
  background-color: #4b5563;
  color: #e5ecec;
}

@media (hover: hover) {
  body.dark-mode .clear-search-btn:hover {
    background-color: #6b7280;
  }
}

/* --- カラーテーマ対応 --- */
body[class*="theme-"] .clear-search-btn {
    background-color: var(--filter-btn-active);
    color: var(--btn-main);
}

@media (hover: hover) {
    body[class*="theme-"] .clear-search-btn:hover {
        background-color: var(--active-filter);
        color: var(--active-filter-text);
    }
}

/* style.css に追記（既存のクリアボタンのスタイルもこちらで上書き・調整します） */

/* =================================================== */
/* ★★★ 検索ボックス内ボタン (クリア＆検索) ★★★ */
/* =================================================== */

/* 2つのボタンを配置するため、入力欄の右側の余白を広げます */
.search-input-wrapper .searchbox-input {
  /* 以前は38pxでしたが、72pxに拡張します */
  padding-right: 72px !important;
}

/* クリアボタンの位置を、新しい検索ボタンの左隣に調整します */
.clear-search-btn {
  /* 以前は right: 8px でしたが、44px に変更します */
  right: 44px;

  /* 以下は既存のスタイルですが、念のため記載します */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background-color: #d1d5db;
  color: #4b5563;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s, background-color 0.15s;
}

/* ★★★↓ここから新しい検索ボタンのスタイルを追加します↓★★★ */
.main-search-btn {
  position: absolute;
  top: 50%;
  right: 8px; /* 右端に配置 */
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  padding: 0;

  background-color: transparent;
  color: #5f6e86;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) {
  .main-search-btn:hover {
    background-color: #f0f2f5; /* ほんのり背景色を付ける */
  }
}

/* --- ダークモード対応 --- */
body.dark-mode .main-search-btn {
  color: #bdc6d2;
}
@media (hover: hover) {
  body.dark-mode .main-search-btn:hover {
    background-color: #394150;
  }
}

/* --- カラーテーマ対応 --- */
body[class*="theme-"] .main-search-btn {
  color: var(--muted);
}
@media (hover: hover) {
  body[class*="theme-"] .main-search-btn:hover {
    background-color: var(--filter-btn-active);
  }
}

/* =================================================== */
/* ★★★ フォントの太さを使い分ける設定 ★★★ */
/* =================================================== */

/* 見出しやボタンなど、強調したいテキストに太いフォントを適用します */
h1, h2, h3, h4, h5,
b, strong,
.filter-title,
.guest-button, .btn-corner, .btn-year,
.page-btn, .more-btn,
.history-toggle .title,
.history-item .label,
#createPlaylistBtn,
.drawer-close-btn,
.about-title,
.results-count-under-bar,
.is-standalone .pwa-bottom-nav-btn {
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* 他のスタイル設定に確実に打ち勝って太字にするため、
    font-weight に !important を付けています。
  */
  font-weight: 700 !important;
}




/* =================================================== */
/* ★★★ PWA専用 下部ナビゲーション スタイル ★★★ */
/* =================================================== */

/* 下部ナビゲーションバーを通常は非表示に */
.pwa-bottom-nav {
  display: none;
}

/* PWAモード(.is-standalone)の時だけ表示し、スタイルを適用 */
.is-standalone .pwa-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + var(--safe-bottom, 0px)); /* iPhoneのホームバーエリアを考慮 */
  padding-bottom: var(--safe-bottom, 0px);
  background-color: var(--card-bg, #ffffff);
  border-top: 1px solid var(--btn-reset-border, #e5e7eb);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  z-index: 3000;
}

/* ナビゲーションバー内の各ボタンのスタイル */
.is-standalone .pwa-bottom-nav-btn {
  flex: 1; /* 4つのボタンが等幅に広がる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted, #7c8798);
  font-family: inherit;
  font-size: 11px;
  -webkit-tap-highlight-color: transparent; /* スマホでのタップ時のハイライトを消す */
  transition: color 0.15s ease;
}

.is-standalone .pwa-bottom-nav-btn i {
  font-size: 20px;
}

/* ボタンがアクティブ（選択中）の時のスタイル */
.is-standalone .pwa-bottom-nav-btn.is-active {
  color: var(--btn-main, #6654e8);
}

/* PWAモードの時、元々あった上部のボタンを非表示にする */
.is-standalone .search-row-controls #filterToggleBtn,
.is-standalone .search-row-controls #favOnlyToggleBtn,
.is-standalone .search-row-controls #randomBtn,
.is-standalone .search-row-controls #mainResetBtn {
  display: none !important;
}



/* PWAモードの時、コンテンツの最下部がナビゲーションバーに隠れないように余白を追加 */
.is-standalone .main-content {
  padding-bottom: 80px; /* ナビゲーションバーの高さ + α */
}

/* --- 各テーマカラーへの対応 --- */

/* ダークモード */
.is-standalone.dark-mode .pwa-bottom-nav {
  background-color: #252c35;
  border-top-color: #394150;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}
.is-standalone.dark-mode .pwa-bottom-nav-btn {
  color: #8ca2b3;
}
.is-standalone.dark-mode .pwa-bottom-nav-btn.is-active {
  color: #ffffff;
}

/* その他のカラーテーマ */
.is-standalone[class*="theme-"] .pwa-bottom-nav {
  background-color: var(--card-bg);
  border-top-color: var(--history-card-bd);
}
.is-standalone[class*="theme-"] .pwa-bottom-nav-btn {
  color: var(--muted);
}
.is-standalone[class*="theme-"] .pwa-bottom-nav-btn.is-active {
  color: var(--btn-main);
}


/* =================================================== */
/* ★★★ PWA/モバイル対応強化スタイル (修正版V2) ★★★ */
/* =================================================== */

/* --- PWAモードのセーフエリア対応 --- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* JSでhtmlタグに .is-standalone クラスが付与されることを前提とします */
html.is-standalone .sticky-search-area {
  padding-top: calc(0.38rem + var(--safe-top));
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- メインコンテンツを画面いっぱいに広げる設定 --- */
html.is-standalone .main-content {
  padding-left: max(15px, var(--safe-left));
  padding-right: max(15px, var(--safe-right));

  /* ★修正1: 余白(隙間)の原因を修正 */
  /* 固定の80pxではなく、ナビゲーションバーの高さと完全に一致させる */
  padding-bottom: calc(60px + var(--safe-bottom)); 

  /* 画面の高さを最低でも100%確保し、Flexboxで縦並びにする */
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  box-sizing: border-box; 
}

/* フッターを強制的に最下部に配置 */
html.is-standalone .site-footer {
  margin-top: auto; /* これにより、上の空きスペースを埋めて下に配置されます */
}

/* --- 100vh問題対策 & ロード画面修正 --- */
#loading-screen {
  z-index: 2147483647 !important; 
  /* ▼高さ指定を削除し、四隅を画面に完全固定する▼ */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* --- PWA専用 下部ナビゲーション --- */
.pwa-bottom-nav {
  display: none;
}

html.is-standalone .pwa-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* ナビバーの高さ定義 (メインコンテンツのpadding-bottomと一致) */
  height: calc(60px + var(--safe-bottom, 0px));
  padding-bottom: var(--safe-bottom, 0px);

  background-color: var(--card-bg, #ffffff);
  border-top: 1px solid var(--btn-reset-border, #e5e7eb);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  z-index: 3000;
  transition: transform 0.25s ease-in-out;

  /* ▼▼▼ 追加: iOSの固定位置バグ(浮き上がり)を防ぐ ▼▼▼ */
  transform: translateZ(0);
  will-change: transform;
}

/* モーダル表示中はナビバーを隠す (操作干渉防止) */
html.is-standalone.scroll-locked .pwa-bottom-nav {
  transform: translateY(calc(100% + 18px));
}

html.is-standalone .pwa-bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted, #7c8798);
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700 !important;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

html.is-standalone .pwa-bottom-nav-btn i { line-height: 1; position: relative; }
html.is-standalone .pwa-bottom-nav-btn span { line-height: 1; position: relative; }
html.is-standalone .pwa-bottom-nav-btn.is-active { color: var(--btn-main, #6654e8); }

/* PWAモード時は、既存のヘッダー内ボタンを非表示にする */
html.is-standalone .search-row-controls #filterToggleBtn,
html.is-standalone .search-row-controls #favOnlyToggleBtn,
html.is-standalone .search-row-controls #randomBtn,
html.is-standalone .search-row-controls #mainResetBtn {
  display: none !important;
}

/* --- テーマカラー対応 --- */
html.is-standalone body.dark-mode .pwa-bottom-nav {
  background-color: #252c35;
  border-top-color: #394150;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}
html.is-standalone body.dark-mode .pwa-bottom-nav-btn { color: #8ca2b3; }
html.is-standalone body.dark-mode .pwa-bottom-nav-btn.is-active { color: #ffffff; }

html.is-standalone body[class*="theme-"] .pwa-bottom-nav {
  background-color: var(--card-bg);
  border-top-color: var(--history-card-bd);
}
html.is-standalone body[class*="theme-"] .pwa-bottom-nav-btn { color: var(--muted); }
html.is-standalone body[class*="theme-"] .pwa-bottom-nav-btn.is-active { color: var(--btn-main); }

/* 位置調整 */
html.is-standalone #theme-toggle-btn {
  bottom: calc(60px + 18px + var(--safe-bottom)) !important;
}
html.is-standalone .floating-panel {
  bottom: calc(60px + 80px + var(--safe-bottom)) !important;
}
html.is-standalone #filterDrawer {
  bottom: 0 !important;
}
.modal-overlay {
  z-index: 3001 !important;
}

/* ナビアイコン位置の微調整 */
html.is-standalone #pwa-filterToggleBtn i { font-size: 21px; top: -0.08em; left: 0; }
html.is-standalone #pwa-filterToggleBtn span { font-size: 10px; top: -0.15em; left: 0.07em; }
html.is-standalone #pwa-favOnlyToggleBtn i { font-size: 19px; top: -0.1em; left: 0; }
html.is-standalone #pwa-favOnlyToggleBtn span { font-size: 10px; top: 0.0em; left: 0.05em; }
html.is-standalone #pwa-randomBtn i { font-size: 22px; top: -0.05em; left: 0; }
html.is-standalone #pwa-randomBtn span { font-size: 10px; top: -0.15em; left: 0.05em; }
html.is-standalone #pwa-mainResetBtn i { font-size: 22px; top: -0.05em; left: 0; }
html.is-standalone #pwa-mainResetBtn span { font-size: 10px; top: -0.15em; left: 0; }

html.is-standalone #pwa-filterToggleBtn { left: 8px; }
html.is-standalone #pwa-mainResetBtn { right: 8px; }


/* --- テーマカラー対応 (前回同様) --- */
/* ダークモード */
html.is-standalone body.dark-mode .pwa-bottom-nav {
  background-color: #252c35;
  border-top-color: #394150;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}
html.is-standalone body.dark-mode .pwa-bottom-nav-btn { color: #8ca2b3; }
html.is-standalone body.dark-mode .pwa-bottom-nav-btn.is-active { color: #ffffff; }

/* その他カラーテーマ */
html.is-standalone body[class*="theme-"] .pwa-bottom-nav {
  background-color: var(--card-bg);
  border-top-color: var(--history-card-bd);
}
html.is-standalone body[class*="theme-"] .pwa-bottom-nav-btn { color: var(--muted); }
html.is-standalone body[class*="theme-"] .pwa-bottom-nav-btn.is-active { color: var(--btn-main); }


/*
 * カラー変更ボタンの位置を、!important を付けて確実に上書き
 */
html.is-standalone #theme-toggle-btn {
  bottom: calc(60px + 18px + var(--safe-bottom)) !important;
}
/* テーマパネルも同様に上にずらす */
html.is-standalone .floating-panel {
  bottom: calc(60px + 80px + var(--safe-bottom)) !important;
}

/* フィルタードロワーの下端指定は、ナビバーが隠れるようになったため不要になりましたが、念のため残しておきます */
html.is-standalone #filterDrawer {
  bottom: 0 !important; /* ドロワー自体は画面下端まで広がるように戻します */
}


/* モーダルのオーバーレイをPWAナビゲーションより手前に表示 */
.modal-overlay {
  z-index: 3001 !important;
}

/* =================================================== */
/* ★★★ ローディングロゴ・スピナーの表示設定 ★★★ */
/* =================================================== */

/* PWA起動時のフラッシュを防ぐため、初期状態からロゴを表示(opacity: 1)します。
   フェードイン演出は削除し、即座に表示されるように変更しました。
*/

#loading-logo {
  opacity: 1;
  /* transitionは削除、または不要 */
}

/* .loaded クラスによる制御は削除 */

#spinner {
  opacity: 1;
  /* transitionは削除、または不要 */
}


/* ================================================================= */
/* ★★★ 「ひすとりー」リンク下線のガタつきを修正 (最終・確定版) ★★★ */
/* ================================================================= */

/* 1. リンク本体のデフォルト下線を無効化します */
.history-item .label a {
  text-decoration: none;
}

/* 2. リンクにホバーした時だけ、カスタム下線を描画します */
.history-item .label a{
    /* 背景画像として直線を描画し、下線として利用します */
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%; /* 下線の位置（テキストの下端） */
    background-repeat: no-repeat;
    background-size: 100% 1.5px;  /* 下線の太さ */
    padding-bottom: 2px;          /* テキストと下線の間の余白 */
  }

/* 3. リンク内のspan要素には下線が適用されないようにします */
.history-item .label a .impact-number {
  text-decoration: none;
}


/* =================================================== */
/* ★★★ PWA 下部ナビ アイコン/テキスト 独立・精密調整 ★★★ */
/* =================================================== */

/* --- 1. 全てのアイコンとテキストに relative を指定 --- */
html.is-standalone .pwa-bottom-nav-btn i,
html.is-standalone .pwa-bottom-nav-btn span {
  position: relative;
}

/* --- 2. 各ボタンの個別調整 ---
  top: 垂直位置 (プラスで下に、マイナスで上に)
  left: 水平位置 (プラスで右に、マイナスで左に)
  font-size: 大きさ
*/

/* --- フィルタボタン (#pwa-filterToggleBtn) --- */
html.is-standalone #pwa-filterToggleBtn i {
  font-size: 21px;
  top: -0.08em;  /* (ベース位置: 約2px上) */
  left: 0;
}
html.is-standalone #pwa-filterToggleBtn span {
  font-size: 10px;
  top: -0.15em; 
  left: 0.07em;
}

/* --- お気に入りボタン (#pwa-favOnlyToggleBtn) --- */
html.is-standalone #pwa-favOnlyToggleBtn i {
  font-size: 19px;
  top: -0.1em;
  left: 0;
}
html.is-standalone #pwa-favOnlyToggleBtn span {
  font-size: 10px;
  top: 0.0em;
  left: 0.05em;
}

/* --- ランダムボタン (#pwa-randomBtn) --- */
html.is-standalone #pwa-randomBtn i {
  font-size: 22px;
  top: -0.05em;
  left: 0;
}
html.is-standalone #pwa-randomBtn span {
  font-size: 10px;
  top: -0.15em;
  left: 0.05em;
}

/* --- リセットボタン (#pwa-mainResetBtn) --- */
html.is-standalone #pwa-mainResetBtn i {
  font-size: 22px;
  top: -0.05em;
  left: 0;
}
html.is-standalone #pwa-mainResetBtn span {
  font-size: 10px;
  top: -0.15em;
  left: 0;
}


/* style.css の一番下に追記 */

/*
 * ===================================================
 * ★★★ PWA 下部ナビ 5ボタン (中央フロート型) スタイル ★★★
 * ===================================================
 */

/* PWAモードの時は、右下の丸いテーマボタンを非表示に */
html.is-standalone #theme-toggle-btn {
  /* display: none; の代わりに、画面の外に移動させます。
    これにより、見た目は消えますが、JSからのクリックは受け付けるようになります。
  */
  position: fixed !important;
  top: -100px !important;     /* 画面の上外に配置 */
  left: -100px !important;    /* 画面の左外に配置 */
  opacity: 0 !important;
}

/* ナビゲーションバー自体の設定 (ボタンを中央揃えに) */
html.is-standalone .pwa-bottom-nav {
  justify-content: center;
  align-items: flex-start; /* 上揃えにして、中央ボタンのはみ出しを許可 */
}

/* 4つの通常ボタンのスタイル */
html.is-standalone .pwa-bottom-nav-btn {
  flex: 1; /* 均等幅 */
  max-width: 20%; /* 5ボタンなので */
  position: relative;
  height: 100%; /* 高さをナビバーに合わせる */
}

/* ★★★ 中央の「カラー」ボタンのスタイル ★★★ */
html.is-standalone #pwa-theme-toggle-btn {
  flex-grow: 0; /* 均等幅の対象外にする */
  flex-shrink: 0;
  
  position: relative; /* topを効かせるため */
  top: -18px; /* ★上に18pxはみ出す */
  
  /* 丸い形状を作成 */
  width: 68px;
  height: 68px;
  min-width: 68px; /* 縮まないように */
  border-radius: 50%;
  background-color: var(--card-bg, #ffffff);
  border: 2px solid var(--btn-reset-border, #e5e7eb);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);

  /* 左右のボタンとの間に少しマージン */
  margin: 0 8px;
}

/* 中央ボタンのアイコン */
html.is-standalone #pwa-theme-toggle-btn i {
  font-size: 30px; /* アイコンを大きく */
  top: 0;
  left: 0;
  color: var(--muted, #7c8798);
}

/* 中央ボタンのテキストを非表示に */
html.is-standalone #pwa-theme-toggle-btn span {
  display: none;
}

/* 中央ボタンがアクティブ (パネル表示中) のスタイル */
html.is-standalone #pwa-theme-toggle-btn.is-active {
  background-color: var(--btn-main, #6654e8);
  border-color: var(--card-bg, #ffffff);
}
/* アクティブ時のアイコン色 */
html.is-standalone #pwa-theme-toggle-btn.is-active i {
  color: var(--card-bg, #ffffff);
}


/* --- テーマ別の中央ボタン調整 --- */

/* ダークモード */
html.is-standalone body.dark-mode #pwa-theme-toggle-btn {
  background-color: #252c35;
  border-color: #394150;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}
html.is-standalone body.dark-mode #pwa-theme-toggle-btn i {
  color: #8ca2b3;
}
html.is-standalone body.dark-mode #pwa-theme-toggle-btn.is-active {
  background-color: #ffffff;
  border-color: #252c35;
}
html.is-standalone body.dark-mode #pwa-theme-toggle-btn.is-active i {
  color: #252c35; /* アクティブ時は黒 */
}

/* カラーテーマ */
html.is-standalone body[class*="theme-"] #pwa-theme-toggle-btn {
  background-color: var(--card-bg);
  border-color: var(--bg-color);
}
html.is-standalone body[class*="theme-"] #pwa-theme-toggle-btn i {
  color: var(--btn-main);
}
html.is-standalone body[class*="theme-"] #pwa-theme-toggle-btn.is-active {
  background-color: var(--btn-main);
  border-color: var(--card-bg);
}
html.is-standalone body[class*="theme-"] #pwa-theme-toggle-btn.is-active i {
  color: var(--card-bg);
}


/* * フローティングパネルの位置を、
 * 下部ナビゲーションバーの「上」＆「画面中央」に変更 
 */
html.is-standalone .floating-panel {
  /* 中央ボタンの上 + ナビバーの高さ + 余白 + セーフエリア */
  bottom: calc(60px + 18px + var(--safe-bottom)) !important;
  
  /* 左右中央に配置 */
  left: 50% !important;
  right: auto !important; /* right指定を解除 */
  transform: translateX(-50%) !important;
  
  /* パネルの形状を横並びのピルケースに変更 */
  flex-direction: row !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  gap: 12px !important;

  /* アニメーションの基準点を調整 */
  transform-origin: bottom center !important;
}

/* パネルが開くときのアニメーションを調整 (上に開くように) */
html.is-standalone .floating-panel {
  opacity: 0;
  transform: translateX(-50%) scale(0.95) !important; 
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.is-standalone .floating-panel.show {
  opacity: 1;
  transform: translateX(-50%) scale(1) !important;
  pointer-events: auto;
}


/*
 * ===================================================
 * ★★★ 非PWA版 (PC/スマホ) テーマボタンの色統一 ★★★
 * ===================================================
 */

/* --- アクティブ時 (ライトモード) --- */
#theme-toggle-btn.is-active {
  background-color: var(--btn-main, #6654e8);
  border-color: var(--card-bg, #ffffff);
  color: var(--card-bg, #ffffff); /* アイコン色 */
}

/* --- ダークモード (非アクティブ時) --- */
body.dark-mode #theme-toggle-btn {
  background-color: #252c35;
  border-color: #394150;
  color: #8ca2b3; /* アイコン色 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* --- ダークモード (アクティブ時) --- */
body.dark-mode #theme-toggle-btn.is-active {
  background-color: #ffffff;
  border-color: #252c35;
  color: #252c35; /* アイコン色 */
}

/* --- カラーテーマ (非アクティブ時) --- */
body[class*="theme-"] #theme-toggle-btn {
  background-color: var(--card-bg);   /* カード背景色（例: 濃いピンク） */
  border-color: var(--bg-color);     /* メイン背景色（例: ピンク） */
  color: var(--btn-main);            /* アイコン色（例: 白） */
}

/* --- カラーテーマ (アクティブ時) --- */
body[class*="theme-"] #theme-toggle-btn.is-active {
  background-color: var(--btn-main);   /* メインテキスト色（例: 白） */
  border-color: var(--card-bg);      /* カード背景色（例: 濃いピンク） */
  color: var(--card-bg);             /* アイコン色（例: 濃いピンク） */
}




/*
 * ===================================================
 * ★★★ PWA 下部ナビ 左右ボタンの余白調整 ★★★
 * ===================================================
 */

/* フィルタボタン(一番左)を少し右にずらす */
html.is-standalone #pwa-filterToggleBtn {
  position: relative;
  /* この数値(8px)を増減させて、お好みの位置に調整してください */
  left: 8px;
}

/* リセットボタン(一番右)を少し左にずらす */
html.is-standalone #pwa-mainResetBtn {
  position: relative;
  /* この数値(8px)を増減させて、お好みの位置に調整してください */
  right: 8px;
}

/* =================================================== */
/* ★★★ 「もしかして」機能のスタイル (リファイン版) ★★★ */
/* =================================================== */

/* 0件表示のラッパー */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  /* 既存のスタイルを維持しつつ、中身のレイアウトを調整 */
}

.no-results-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.no-results-icon {
  /* ★修正: サイト共通の太字フォントを指定 */
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700 !important;
  
  font-size: 1.0em;
  opacity: 0.9;
  
  /* ★修正: アイコンとテキストの位置関係を整理 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* アイコンと文字の間隔をしっかり空ける */
  line-height: 1.5; /* 行の高さに余裕を持たせて「切れ」を防ぐ */
  width: 100%;
}

/* アイコン自体の微調整 */
.no-results-icon i {
  flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
  font-size: 1.15em; /* 少しだけ大きく */
  padding: 2px; /* 周囲に余白を持たせて描画切れを防ぐ */
}

/* もしかしてエリアのコンテナ */
.did-you-mean-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  
  /* ガラスモーフィズム風のデザイン */
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  
  padding: 10px 24px;
  border-radius: 50px; /* 丸みを帯びた形状 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  
  animation: fadein-drawer 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 8px;
}

/* ラベル ("💡 もしかして:") */
.dym-label {
  font-weight: 700;
  font-size: 0.95em;
  color: var(--text-color);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dym-label i {
  color: #fbbf24; /* 電球の色 (黄色) */
  font-size: 1.1em;
}

/* 提案キーワードのボタン */
.dym-link {
  appearance: none;
  background-color: var(--card-bg, #fff); /* カード色を使う */
  color: var(--btn-main, #6654e8) !important; /* メインカラー */
  border: 2px solid transparent;
  
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 1.05em;
  font-weight: 800; /* 太字で強調 */
  cursor: pointer;
  
  display: inline-flex;
  align-items: center;
  
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: inherit;
}

.dym-link:active {
  transform: translateY(0) scale(0.98);
}

/* --- テーマ別の微調整 --- */

/* ダークモード */
body.dark-mode .did-you-mean-container {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .dym-link {
  background-color: #364152;
  color: #fff !important;
}
@media (hover: hover) {
  body.dark-mode .dym-link:hover {
    background-color: #404b5c;
    border-color: #8de0ee;
  }
}

/* カラーテーマ適用時 */
body[class*="theme-"] .dym-link {
  color: var(--btn-main) !important;
  /* 背景はカード色(var(--card-bg))になるので視認性OK */
}

/* =================================================== */
/* ★★★ 自動もしかして検索結果のスタイル (Refined) ★★★ */
/* =================================================== */

.did-you-mean-alert {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  animation: fadein-drawer 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dym-alert-content {
  width: 100%;
  max-width: 760px;
  /* ガラス風の半透明背景 */
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.08);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* 上部の補足メッセージ（見つかりませんでした） */
.dym-alert-sub {
  font-size: 0.9em;
  color: #666; /* 控えめなグレー */
  /* ★修正: サイト共通の太字フォントを指定 */
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}

/* メインメッセージエリア */
.dym-alert-main {
  font-size: 1.1em;
  color: var(--text-color);
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  line-height: 1.4;
}

.dym-prefix, .dym-suffix {
  opacity: 0.9;
}

/* 提案ワードのボタンデザイン */
.dym-word-btn {
  appearance: none;
  background: transparent;
  border: 2px solid var(--btn-main, #6654e8);
  color: var(--btn-main, #6654e8);
  border-radius: 99px;
  padding: 4px 16px;
  font-size: 1.05em;
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
  transform: translateZ(0);

  /* ★修正: "all" ではなく、ホバー演出に必要なプロパティだけを指定する */
  /* これにより、JSによるフォントサイズ変更が即時反映（アニメーションなし）になります */
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;

  max-width: 75vw;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  vertical-align: middle;
  flex-shrink: 1;
}

/* PCなどの広い画面では最大幅を固定ピクセルにする */
@media (min-width: 768px) {
  .dym-word-btn {
    max-width: 600px;
  }
}

/* スマホ用の微調整 */
@media (max-width: 600px) {
  .dym-word-btn {
    padding: 4px 12px;
    font-size: 1em;
  }
}

/* ホバー時の挙動 */
@media (hover: hover) {
  .dym-word-btn:hover {
    background: var(--btn-main, #6654e8);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

.dym-word-btn:active {
  transform: translateY(0);
}

/* --- テーマ別調整 --- */

/* ダークモード */
body.dark-mode .dym-alert-content {
  background-color: rgba(30, 35, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .dym-alert-sub {
  color: #a0a0a0;
}
body.dark-mode .dym-word-btn {
  border-color: #8de0ee;
  color: #8de0ee;
}
@media (hover: hover) {
  body.dark-mode .dym-word-btn:hover {
    background: #8de0ee;
    color: #22272e;
  }
}

/* カラーテーマ適用時 */
body[class*="theme-"] .dym-alert-content {
  background-color: var(--card-bg); /* カード色に合わせる */
  border-color: rgba(255, 255, 255, 0.3);
}
body[class*="theme-"] .dym-alert-sub {
  color: var(--muted);
}
body[class*="theme-"] .dym-word-btn {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
@media (hover: hover) {
  body[class*="theme-"] .dym-word-btn:hover {
    background: #fff;
    color: var(--active-filter-text);
  }
}



/* =================================================== */
/* ★★★ お気に入り画面の見出しスタイル (Simple Ver.) ★★★ */
/* =================================================== */

.favorites-title-header {
  display: flex;
  justify-content: center;
  /* 上下の余白を少し調整 */
  margin-top: 4px;
  margin-bottom: 12px;
  animation: fadein-drawer 0.2s ease-out;
}

.favorites-title-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  
  /* --- 装飾を全削除 --- */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  
  /* 文字スタイル */
  color: var(--text-color); /* 通常の文字色を使用 */
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

/* --- テーマ別調整 --- */

/* ダークモード */
body.dark-mode .favorites-title-inner {
  /* 背景などの指定は不要。文字色は --text-color で自動的に白になります */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* カラーテーマ適用時 */
body[class*="theme-"] .favorites-title-inner {
  /* こちらも同様にリセット */
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-color);
}



/* =================================================== */
/* ★★★ お気に入りヘッダー＆トップへ戻るボタン ★★★ */
/* =================================================== */

/* ヘッダー全体を縦並び・中央寄せにするコンテナ */
.favorites-header-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* タイトルとボタンの間隔 */
  width: 100%;
  margin-bottom: 10px;
}

/* トップへ戻るボタンのスタイル */
.fav-home-btn {
  appearance: none;
  background-color: #ffffff;
  color: #444;
  border: 1.5px solid #d0d7de;
  
  padding: 8px 24px;
  border-radius: 99px;
  
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700 !important;
  font-size: 0.95rem;
  
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


/* --- テーマ対応 --- */

/* ダークモード */
body.dark-mode .fav-home-btn {
  background-color: #2d333b;
  color: #e5ecec;
  border-color: #394150;
}
@media (hover: hover) {
  body.dark-mode .fav-home-btn:hover {
    background-color: #374151;
  }
}

/* カラーテーマ (テーマ色を反映) */
body[class*="theme-"] .fav-home-btn {
  color: var(--btn-main);
  border-color: var(--history-card-bd);
  background-color: var(--card-bg);
}
@media (hover: hover) {
  body[class*="theme-"] .fav-home-btn:hover {
    background-color: var(--filter-btn-active);
  }
}

/* ======================================================================== */
/* ===== (最終・確定版) カードレイアウト 全デバイス強制修正 ===== */
/* ======================================================================== */

/* --- 1. まず、既存のカードスタイルの一部をリセット --- */
/* (ここは変更しないでください) */
.episode-item,
.episode-item > a,
.episode-item .thumb-col,
.episode-item a > div:last-of-type {
  gap: 0;
  flex: none;
}
#results h5.mb-1,
.episode-meta {
  margin: 0;
}

/* --- 2. カード全体の基本設定 --- */
/* (ここは変更しないでください) */
.episode-item {
  padding: 12px;
}

/* --- 3. リンクエリアのレイアウトを再構築 (最重要) --- */
/* (ここは変更しないでください) */
.episode-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100%;
}

/* --- 4. サムネイルの領域を固定 --- */
/* (ここは変更しないでください) */
.episode-item .thumb-col {
  flex-shrink: 0;
}

/* --- 5. テキストエリアをマージンで強制的に配置 --- */
/* (ここは変更しないでください) */
.episode-item a > div:last-of-type {
  flex-grow: 1;
  min-width: 0;
}

/* ======================================================================== */
/* ★★★ スマホ表示 (幅 767px 以下) の調整エリア ★★★ */
/* ======================================================================== */
@media (max-width: 767px) {
  /* --- サムネイル (幅120px / 高さ67.5px) --- */
  .episode-item .thumbnail {
    width: 130px; 
  }

  /* --- テキストエリア全体の配置 --- */
  .episode-item a > div:last-of-type {
    margin-left: 12px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 67.5px; 
  }

  /*
   * ▼▼▼ (1) エピソード名 (スマホ) ▼▼▼
   */
  #results h5.mb-1 {
    margin-top: 0.2rem;
    font-size: 1.2em; 
    line-height: 1.2rem; 
    word-break: normal;
    overflow-wrap: normal;
  }

  /*
   * ▼▼▼ (2) ゲスト名 (スマホ) ▼▼▼
   */
  .guest-one-line {
    margin-top: 1.0px; 
    font-size: 0.85rem; 
    line-height: 1.25;
    display: block !important;
    width: 100% !important;
  }

  /*
   * ▼▼▼ (3) 公開日時・(4) 動画時間 (スマホ) ▼▼▼
   */
  .episode-meta {
    margin-top: 0.35rem; 
    font-size: 0.75rem;
    line-height: 1.35; 
    opacity: 0.7;
  }
}

/* ======================================================================== */
/* ★★★ タブレット表示 (iPad縦・横) (幅 768px ～ 1180px) の調整エリア ★★★ */
/* ======================================================================== */
@media (min-width: 768px) and (max-width: 1180px) {
  .episode-item {
    padding: 14px;
    padding-right: 16px;
  }
  
  /* --- サムネイル (幅150px / 高さ84.375px) --- */
  .episode-item .thumbnail {
    width: 150px;
  }

  /* --- テキストエリア全体の配置 --- */
  .episode-item a > div:last-of-type {
    margin-left: 12px; /* サムネイルとテキスト間の隙間 */
    height: 84px; /* サムネイルの高さに固定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*
   * ▼▼▼ (1) エピソード名 (タブレット) ▼▼▼
   */
  #results h5.mb-1 {
    margin-top: 3px;
    font-size: 1.4rem;
    line-height: 1.0; 
  }
  
  /*
   * ▼▼▼ (2) ゲスト名 (タブレット) ▼▼▼
   */
  .guest-one-line {
    margin-top: 2px; 
    font-size: 1.1rem;
    line-height: 1.2; 
    display: block;
    width: 100%;
  }

  /*
   * ▼▼▼ (3) 公開日時・(4) 動画時間 (タブレット) ▼▼▼
   */
  .episode-meta {
    margin-top: 3px; 
    font-size: 0.8rem; 
    line-height: 1.3; 
    opacity: 0.7;
  }
}

/* ======================================================================== */
/* ★★★ PC表示 (幅 1181px 以上) の調整エリア ★★★ */
/* ======================================================================== */
@media (min-width: 1181px) {
  .episode-item {
    padding: 14px;
  }
  
  /* --- サムネイル (幅150px / 高さ84.375px) --- */
  .episode-item .thumbnail {
    width: 150px;
  }

  /* --- テキストエリア全体の配置 --- */
  .episode-item a > div:last-of-type {
    margin-left: 12px; /* サムネイルとテキスト間の隙間 */
    height: 84px; /* サムネイルの高さに固定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /*
   * ▼▼▼ (1) エピソード名 (PC) ▼▼▼
   */
  #results h5.mb-1 {
    margin-top: 3px;
    font-size: 1.4rem;
    line-height: 1.0; 
  }
  
  /*
   * ▼▼▼ (2) ゲスト名 (PC) ▼▼▼
   */
  .guest-one-line {
    margin-top: 2px; 
    font-size: 1.1rem;
    line-height: 1.2; 
    display: block;
    width: 100%;
  }

  /*
   * ▼▼▼ (3) 公開日時・(4) 動画時間 (PC) ▼▼▼
   */
  .episode-meta {
    margin-top: 3px; 
    font-size: 0.8rem; 
    line-height: 1.3; 
    opacity: 0.7;
  }
}

/* ======================================================================== */
/* ===== (最終・確定コード) ゲスト名がはみ出す問題の根本対策 ===== */
/* ======================================================================== */
/* (ここは変更しないでください) */
.episode-item > a > div:last-of-type {
  flex: 1;
  min-width: 0;
}
.episode-item h5.mb-1 {
  width: 100%;
}

/* ======================================================================== */
/* ===== (再修正) タイムスタンプをサムネイル右下に表示 (PC/SP両対応) ===== */
/* ======================================================================== */

/* --- 基本設定 (全デバイス共通) --- */

/* 1. サムネイルを含む親要素(.thumb-col)を、絶対位置指定の基準点にします */
.thumb-col {
  position: relative;
  /* display:flexやflex-directionをリセットし、シンプルな箱にします */
  display: block;
  flex-shrink: 0;
}

/* 2. タイムスタンプのコンテナを、親要素の右下に絶対配置します */
.ts-buttons {
  position: absolute;
  bottom: 5px;
  right: 5px;
  margin-top: 0;
  z-index: 1; /* 画像の上に確実に表示されるように念のため指定 */
}

/* 3. タイムスタンプボタンの見た目を調整します */
.ts-btn {
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  border: none;
  font-size: 0.8em;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

/* 4. ダークモードでも同じスタイルを適用します */
body.dark-mode .ts-btn {
  background-color: rgba(0, 0, 0, 0.75) !important;
  color: white !important;
  border-color: transparent !important;
}


/* --- デバイスごとの幅調整 --- */

/* 5. スマホ表示 (幅 767px 以下) のコンテナ幅をサムネイルに合わせます */
@media (max-width: 767px) {
  .thumb-col {
    width: 130px; /* スマホ用サムネイル幅 */
  }
}

/* 6. タブレット・PC表示 (幅 768px 以上) のコンテナ幅をサムネイルに合わせます */
@media (min-width: 768px) {
  .thumb-col {
    width: 150px; /* タブレット・PC用サムネイル幅 */
  }
}

/* ======================================================================== */
/* ===== (JS連携) 最小フォントでも収まらない場合に省略表示を適用 ===== */
/* ======================================================================== */
.guest-one-line.needs-ellipsis {
  text-overflow: ellipsis !important;
}


/* style.css に追記 */
body.body-scroll-locked {
  position: fixed; /* ページを完全に固定 */
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* =================================================== */
/* ★★★ モーダル表示中の背景スクロールを安定的に禁止 ★★★ */
/* =================================================== */
html.scroll-locked {
  overflow: hidden !important;
}

.sort-wrapper {
  display: block;
  position: relative;
}



/* =================================================== */
/* ★★★ 全体的な左右の余白を統一 ★★★ */
/* =================================================== */
.results-count-under-bar,
.filters-bar,
.main-content {
  /* 左右に15pxの余白を追加して、全体の縦のラインを揃えます */
  padding-left: 15px !important;
  padding-right: 15px !important;

  /* 余白を追加してもレイアウトが崩れないようにします */
  box-sizing: border-box !important;
}

/* =================================================== */
/* ★★★ エピソードカード 最終調整 (V5・位置固定版) ★★★ */
/* =================================================== */

/* 1. テキストカラム全体の配置バランス調整 */
.text-col {
  display: flex;
  flex-direction: column;
  
  
  /* ▼【重要】上下中央揃え(center)をやめて、上揃え(flex-start)に変更 */
  /* これにより、タイトルが1行でも2行でも「第〇回」の位置が固定されます */
  justify-content: flex-start;
  
  /* ▼【調整箇所】テキスト全体を上下に動かすには、この数値を変更してください */
  /* 数値を増やすと下に、減らすと上に動きます（スマホ・PC共通の基本値） */
  padding-top: 1px; 
  
  /* お気に入りボタンと被らないように右に余白 */
  padding-right: 35px; 

  /* 上寄せに固定 */
  justify-content: flex-start !important;
  
  min-height: 84px; /* サムネイルの高さに合わせて確保 */
  padding-bottom: 2px;
  box-sizing: border-box;
}

/* 2. メタ情報（タグ・日付）のデザイン */
.meta-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; /* タグと日付の間隔 */
  margin: 0;
  line-height: 1;
}

/* 「第〇回」タグ */
.ep-label {
  display: inline-flex;
  align-items: baseline;
  background-color: #f3f0ff;
  color: #7c3aed;
  
  font-weight: 700 !important;
  font-size: 0.8rem; 
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, sans-serif;
  
  padding: 3px 10px 4px;
  border-radius: 6px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* 数字部分（Impactフォント） */
.ep-label .num-text {
  font-family: 'Impact', sans-serif !important;
  font-weight: normal; 
  font-size: 1.45em;
  line-height: 1;
  margin: 0 1px;
  position: relative;
  top: 1px;
}

/* 日付・時間 */
.meta-item {
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 3. タイトルのデザイン */
.card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700 !important;
  line-height: 1.5;
  color: #1e293b;

  
  /* 2行以上は省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  padding-top: 0px; 

  text-decoration: none !important; 
}

/* リンク自体の下線削除 */
.episode-item a {
  text-decoration: none !important;
}

/* --- ダークモード対応 --- */
body.dark-mode .ep-label {
  background-color: #363052;
  color: #a78bfa;
}
body.dark-mode .card-title {
  color: #f1f5f9;
}

/* --- スマホ幅での微調整 --- */
@media (max-width: 767px) {
  .text-col {
    /* ▼【スマホ用調整】スマホで位置を変えたい場合はここを変更 */
    padding-top: 0px; 

    /* 上寄せに固定 */
    justify-content: flex-start !important;
    
    padding-right: 42px;
    min-height: 68px; /* スマホのサムネ高さ */
    gap: 4px;
  }
  .card-title {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .ep-label {
    padding: 2px 8px 3px;
  }
}

/* ======================================================================== */
/* ★★★ 表示崩れ・改行対策 (スマホ・iPad完全対応版) ★★★ */
/* ======================================================================== */

/* --- 1. メタ情報エリアの幅確保と改行防止 --- */
.meta-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 万が一あふれた時は折り返す */
  
  /* ★重要: 隙間を詰めて改行しにくくする */
  gap: clamp(3px, 1vw, 8px) !important;
  
  /* ★重要: 右側の余白（お気に入りボタン回避用）をこの行だけ無効化して幅を稼ぐ */
  margin-right: -30px !important;
  
  /* 下との間隔 */
  margin-bottom: 4px !important;
  width: 100%;
}

/* --- 2. 日付・時間の文字サイズと改行禁止設定 --- */
.meta-date, 
.meta-duration {
  /* スマホでの最小サイズを少し小さく(10.5px -> 9.5px)して収まりやすくする */
  font-size: clamp(9.5px, 2vw, 12.5px) !important;
  
  /* アイコンと数字の間で改行させない */
  white-space: nowrap !important;
  
  /* 幅不足でも潰れないようにする */
  flex-shrink: 0;
  
  /* 色設定（変更なし） */
  color: var(--muted) !important;
  font-weight: 600;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* --- 3. バッジのサイズ調整 --- */
.ep-label {
  /* スマホでのバッジサイズを微調整 */
  font-size: clamp(9px, 2vw, 11px) !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #f3f0ff;
  color: #7c3aed;
  font-family: fot-udkakugoc80-pro, system-ui, sans-serif;
  font-weight: 700;
}

/* --- 4. タイトルの見切れ防止（最大2行で省略） --- */
.card-title {
  /* ★全デバイスで「...」による省略を有効化 */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* 2行制限 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  
  /* 見た目の調整 */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.45 !important;
  
  /* 文字サイズ自動調整 */
  font-size: clamp(14px, 1.2vw + 11px, 16px) !important;
  color: var(--text-color) !important;
  font-family: fot-udkakugoc80-pro, system-ui, sans-serif;
  font-weight: 700 !important;
  
  /* タイトルはお気に入りボタンと被らないように右余白を守る */
  padding-right: 0 !important; 
}

/* --- 5. ダークモード・テーマカラー対応（念のため再定義） --- */
body.dark-mode .ep-label {
  background-color: #373055 !important;
  color: #a78bfa !important;
}
body[class*="theme-"] .ep-label {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--card-bg) !important;
}

/* =================================================== */
/* ★★★ テキストエリアとタイトルの余白調整 (改行防止版) ★★★ */
/* =================================================== */

/* 1. テキストカラム全体の右余白を極小にする */
/* これにより、上段の「日付・回数」などが右端ギリギリまで広がり、改行されにくくなります */
.text-col {
  padding-right: 2px !important; /* 元々は35px〜42pxありました */
}

/* スマホ表示でも同様に親の余白を削除 */
@media (max-width: 767px) {
  .text-col {
    padding-right: 2px !important;
  }
}

/* 2. タイトル部分だけに、お気に入りボタン回避用の余白を設定 */
/* お気に入りボタンが右下にあるため、タイトルの右側だけを空けます */
.card-title {
  /* ボタン幅(約34px) + 余白分を確保 */
  padding-right: 30px !important; 
  
  /* ボックスサイズ計算を有効にしてpaddingを含める */
  width: 100%;
  box-sizing: border-box;
}

/* 3. メタ情報エリアのネガティブマージンをリセット */
/* 親のpaddingを削ったので、無理に広げる指定(margin-right: -30px)は不要になります */
.meta-header {
  margin-right: 0 !important;
  width: 100%;
  
  /* 上段テキスト用の「少しだけの余白」 */
  padding-right: 0px !important; 
}

/* =================================================== */
/* ★★★ PC版 タイトル文字サイズ調整 ★★★ */
/* =================================================== */

@media (min-width: 768px) {
  .card-title {
    /* 既存の自動調整設定(最大16px)を上書きして大きくします */
    font-size: 1.1rem !important; 
    
    /* 文字が大きくなる分、行間を少し調整して読みやすくします */
    line-height: 1.3 !important;
  }
}


/* =================================================== */
/* ★★★ カテゴリボタン (.btn-category) のスタイル修正 ★★★ */
/* =================================================== */

/* 1. 基本スタイル (他のフィルタボタンと統一) */
.btn-category {
  padding: 8px 0;
  border-radius: 22px;
  border: 1.3px solid rgba(80,80,160,0.10);
  background: #fff;
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s, box-shadow 0.1s, transform 0.1s;
  position: relative;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 0.97em;
  margin-bottom: 0 !important;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 39px;
  transform: translateZ(0);

  /* 太字フォント適用 */
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700 !important;
}

/* 2. アクティブ（選択中）状態 - 全テーマ共通の基本動作 */
.btn-category[aria-pressed="true"],
.btn-category.active {
  outline: none;
  /* 強制的に優先度を上げる */
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.15) !important;
}

/* 3. ホバー状態 (非アクティブ時のみ適用) */
@media (hover: hover) {
  .btn-category:not(.active):not([aria-pressed="true"]):hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.15);
    background: #f5f4ff;
    color: #242943;
  }
}

/* 4. ダークモード対応 */
body.dark-mode .btn-category {
  background: #232c35 !important;
  color: #e0f1f1 !important;
  border: 1.3px solid #40605a !important;
}
/* ダークモードでの選択中状態 */
body.dark-mode .btn-category[aria-pressed="true"],
body.dark-mode .btn-category.active {
  background: #ffffff !important;
  color: #27363f !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.3) !important;
}
/* ダークモードでのホバー */
@media (hover: hover) {
  body.dark-mode .btn-category:not(.active):not([aria-pressed="true"]):hover {
    background: #384d5d !important;
    color: #96e5c4 !important;
    box-shadow: none !important;
  }
}

/* 5. カラーテーマ対応 (赤テーマなど) */
body[class*="theme-"] .btn-category {
  background: var(--btn-bg) !important;
  border-color: var(--history-card-bd) !important;
  color: var(--text-color) !important;
}
/* カラーテーマでの選択中状態 */
body[class*="theme-"] .btn-category.active,
body[class*="theme-"] .btn-category[aria-pressed="true"] {
  background: #ffffff !important;
  color: var(--bg-color) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.4) !important;
}
/* カラーテーマでのホバー (選択中は適用しない) */
@media (hover: hover) {
  body[class*="theme-"] .btn-category:not(.active):not([aria-pressed="true"]):hover {
    background: var(--filter-btn-active) !important;
    border-color: var(--btn-main) !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* フィルタボタンの文字調整用スタイル (修正版) */
.guest-button, .btn-corner, .btn-year, .btn-category {
  /* 文字の折り返しを禁止 */
  white-space: nowrap !important;
  
  /* 枠からはみ出た文字は隠す */
  overflow: hidden !important;
  
  /* 左右の余白を極限まで詰める */
  padding-left: 1px !important;
  padding-right: 1px !important;
  
  /* ★高さ固定 (これで縦幅は広がりません) */
  height: 40px !important;
  min-height: 40px !important;
  
  /* 上下左右中央揃え */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* 行間を詰める */
  line-height: 1.1 !important;
}

/* 追加：出演作品検索のプルダウン文字を太字にする */
#animeSelect {
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700 !important;
  color: var(--text-color);
}

/* 追加：プルダウンの選択肢も太字に */
#animeSelect option {
  font-family: fot-udkakugoc80-pro, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700 !important;
}


/* style.css の末尾に追加 */

/* =================================================== */
/* ★★★ ダークモード：フィルタ下部の色統一 ★★★ */
/* =================================================== */

/* 出演作品のプルダウン (ダークモード) */
body.dark-mode #worksSelect {
  background-color: #232c35 !important;  /* 他のボタンと同じ暗い色 */
  color: #e0f1f1 !important;             /* 他のボタンと同じ文字色 */
  border: 1.3px solid #40605a !important; /* 他のボタンと同じ枠線色 */
}

/* 閉じるボタン (ダークモード) */
body.dark-mode #drawerCloseBtn {
  background-color: #232c35 !important;
  color: #e0f1f1 !important;
  border: 1.3px solid #40605a !important;
  box-shadow: none !important; /* 浮き上がりを抑える */
}

/* ホバー時の挙動も統一 */
@media (hover: hover) {
  body.dark-mode #drawerCloseBtn:hover,
  body.dark-mode #worksSelect:hover {
    background-color: #384d5d !important;
    color: #96e5c4 !important;
  }
}

/* =================================================== */
/* ★★★ 並び替えボタンのレイアウト修正 (Web/PWA) ★★★ */
/* =================================================== */

/* 1. スマホ・iPad (Web版): 並び替えボタンを全幅にして文字切れを防ぐ */
@media (max-width: 991px) {
  .search-row-controls .sort-wrapper {
    grid-column: 1 / -1 !important; /* グリッドの全幅を使用 */
    width: 100% !important;
  }
  
  /* YouTubeボタンがある場合も全幅にして段落ちさせる */
  #createPlaylistBtn {
    grid-column: 1 / -1 !important;
    margin-top: 4px;
  }
}

/* 2. PWA版 (アプリモード): */
html.is-standalone .search-card {
  align-items: center !important;  /* 上下中央揃え */
  gap: 7px !important;            /* 間の余白 */
  padding-bottom: 0.4em !important;
}

/* キーワード検索欄 */
html.is-standalone .search-row-keyword {
  width: 100% !important;
  flex: 1 1 50% !important;
  margin-bottom: 0 !important; /* 下の余白を削除 */
}

/* コントロールエリア  */
html.is-standalone .search-row-controls {
  width: 100% !important;
  flex: 1 1 50% !important;
  display: block !important;   /* グリッドを解除 */
  margin-top: 0 !important;    /* 上の余白を削除 */
  gap: 0 !important;
}

/* 並び替えセレクトボックス */
html.is-standalone .search-row-controls .sort-wrapper {
  width: 100% !important;
  grid-column: auto !important;
}

/* PWAヘッダー内の不要な要素を確実に隠す */
html.is-standalone #createPlaylistBtn {
  display: none !important; /* レイアウト崩れ防止のためヘッダー内のYouTubeボタンは非表示 */
}


/* =================================================== */
/* ★★★ アイコン個別微調整 (V32 独立設定版) ★★★ */
/* =================================================== */

/* --- 共通設定 (位置合わせの基準) --- */
.meta-date i,
.meta-duration i {
  position: relative;
  opacity: 0.75; /* アイコンの色を少し薄くする */
}

/* 1. カレンダーアイコン (📅) の個別設定 */
.meta-date i {
  /* 上下の位置 (マイナスで上に、プラスで下に) */
  top: -0.8px !important; 
  
  /* 右の余白 (数字との距離) */
  margin-right: 3px !important; 
  
  /* アイコンの大きさ */
  font-size: 1.0em !important;
}

/* 2. 時計アイコン (⏰) の個別設定 */
.meta-duration i {
  /* 時計はカレンダーより少し下に感じる場合があるので、数値を個別に変えられます */
  top: -0.05px !important; 
  
  /* 余白も個別に調整可能 */
  margin-right: 3px !important; 
  
  font-size: 1.0em !important;
}


/* --- スマホ表示時の個別設定 --- */
@media (max-width: 767px) {
  
  /* カレンダー (スマホ) */
  .meta-date i {
    top: -0.1px !important;
    margin-right: 1px !important;
    font-size: 1.0em !important;
  }

  /* 時計 (スマホ) */
  .meta-duration i {
    top: 0.2px !important;
    margin-right: 1px !important;
    font-size: 1.0em !important;
  }
}

/* =================================================== */
/* ★★★ アイコンのサイズ固定化 (V33) ★★★ */
/* =================================================== */

/* 親文字サイズ(.episode-meta)が変動しても、
  アイコンだけは固定サイズを保つように強制上書きします。
*/
.episode-meta i,
.meta-date i,
.meta-duration i {
  /* em(比率) ではなく rem(ルート固定) を使うことで、
     親の文字サイズ縮小の影響を受けなくなります */
  font-size: 0.8rem !important; /* お好みで 14px や 15px にしてもOK */
}

/* スマホでもサイズを変えない（PCと同じ大きさにする） */
@media (max-width: 767px) {
  .episode-meta i,
  .meta-date i,
  .meta-duration i {
    font-size: 0.6rem !important; 
  }
}

/* === カメラボタン (お気に入りボタンの左隣に配置) === */
.episode-item {
  position: relative; /* 念のため確認 */
}

.photo-link-btn {
  position: absolute;
  bottom: 10px;
  right: 54px; /* お気に入りボタン(10px + 34px) の左側に来るように配置 */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e6e6f3;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: #555;
  transition: transform 0.12s, background 0.12s;
}

/* ホバー・アクティブ時の色（ピンク系などお好みで） */
.photo-link-btn:active { transform: scale(0.95); }
.photo-link-btn i { font-size: 16px; }

/* ダークモード対応 */
body.dark-mode .photo-link-btn {
  background: #2a2f37;
  border-color: #41505f;
  color: #e7eef6;
}

/* === モーダル内のリンクボタン === */
.photo-modal-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  background: #000; /* X(Twitter)っぽい黒 */
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.1s;
}

.photo-modal-link-btn:active {
  transform: scale(0.98);
}

/* 2つ目以降の色を変えたい場合などの例 */
.photo-modal-link-btn:nth-child(even) {
  background: #555; /* グレーなど */
}

/* =================================================== */
/* ★★★ フォトメモリー機能用スタイル (完全版) ★★★ */
/* =================================================== */

/* 1. カメラボタンのデザイン
   お気に入りボタン(.fav-btn)と位置・サイズ・色を完全に統一します。
*/
.photo-link-btn {
  position: absolute;
  bottom: 10px;
  right: 10px; /* お気に入りボタンと同じ位置 */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  
  /* ▼ 白背景・薄いグレー枠・濃いグレーのアイコン */
  background-color: #ffffff;
  border: 1px solid #e6e6f3;
  color: #333742;
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,0.2);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  
  font-family: inherit;
  font-size: 16px; /* アイコンサイズ */
}

/* ホバー・アクティブ時の挙動 */
.photo-link-btn:active {
  transform: scale(0.95);
  background-color: #f0f0f0;
}
@media (hover: hover) {
  .photo-link-btn:hover {
    transform: scale(1.06);
    background-color: #f9f9f9;
    color: #111;
  }
}

/* ダークモード時のカメラボタン (カード色に合わせる) */
body.dark-mode .photo-link-btn {
  background-color: #2a2f37;
  border-color: #41505f;
  color: #e7eef6;
}
body.dark-mode .photo-link-btn:active {
  background-color: #333b45;
}

/* カラーテーマ適用時も、カメラボタンは白(カード色)を維持 */
body[class*="theme-"] .photo-link-btn {
  background-color: var(--card-bg) !important;
  border-color: var(--history-card-bd) !important;
  color: var(--muted) !important;
}






/* =================================================== */
/* ★★★ フォトメモリー機能用スタイル (色修正・確定版) ★★★ */
/* =================================================== */

/* 1. カメラボタン（お気に入りボタンと位置・サイズを統一） */
.photo-link-btn {
    position: absolute;
    bottom: 10px;
    right: 10px; /* お気に入りボタンと同じ位置 */
    z-index: 10;
    
    width: 34px;
    height: 34px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* デフォルト（ライトモード） */
    background-color: #fff;
    border: 1px solid #e6e6f3;
    color: #333742;
    font-size: 16px;
    box-shadow: none;
}

/* ホバー時 */
@media (hover: hover) {
    .photo-link-btn:hover {
        transform: scale(1.06);
        background-color: #f9f9f9;
        color: #111;
    }
}
.photo-link-btn:active { transform: scale(0.95); }

/* --- カメラボタン：テーマ別配色 --- */

/* ダークモード */
body.dark-mode .photo-link-btn {
    background-color: #2a2f37 !important;
    border: 1px solid #41505f !important;
    color: #e7eef6 !important;
}
@media (hover: hover) {
    body.dark-mode .photo-link-btn:hover {
        background-color: #333b45 !important;
        color: #8de0ee !important;
    }
}

/* カラーテーマ（赤・青など） */
body[class*="theme-"] .photo-link-btn {
    background-color: var(--btn-bg) !important;
    border-color: var(--history-card-bd) !important;
    color: var(--muted) !important;
}
@media (hover: hover) {
    body[class*="theme-"] .photo-link-btn:hover {
        background-color: var(--filter-btn-active) !important;
        color: var(--btn-main) !important;
        border-color: var(--btn-main) !important;
    }
}


/* 2. フォトリンクモーダル (背景色・文字色修正) */
#photo-links-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999 !important; 
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

#photo-links-modal.active {
    opacity: 1;
    visibility: visible;
}

/* モーダルコンテンツ（カード部分） */
.photo-links-content {
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    padding: 32px 24px 28px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    
    /* デフォルト（ライトモード） */
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
}
#photo-links-modal.active .photo-links-content {
    transform: scale(1);
}

/* --- モーダル背景：テーマ別配色 --- */

/* ダークモード */
body.dark-mode .photo-links-content {
    background: #2d333b !important; /* ダークグレー */
    border: 1px solid #394150 !important;
}

/* カラーテーマ */
body[class*="theme-"] .photo-links-content {
    background: var(--card-bg) !important; /* テーマ色 (例: 赤) */
    border: 1px solid var(--history-card-bd) !important;
}


/* 3. 閉じるボタン */
.close-modal-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; transition: 0.2s;
    
    /* デフォルト */
    background: transparent;
    border: 1px solid #e6e6f3;
    color: #888;
}
.close-modal-btn:hover {
    background: #f5f4ff;
    color: #6654e8;
}

/* ダークモード */
body.dark-mode .close-modal-btn {
    border-color: #41505f !important;
    color: #a0b0c0 !important;
}
body.dark-mode .close-modal-btn:hover {
    background: #364152 !important;
    color: #fff !important;
}

/* カラーテーマ */
body[class*="theme-"] .close-modal-btn {
    border-color: rgba(255,255,255,0.3) !important;
    color: rgba(255,255,255,0.8) !important;
}
body[class*="theme-"] .close-modal-btn:hover {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}


/* 4. タイトル「フォトリンク」 */
.photo-links-content h3 {
    margin: 0 0 20px;
    font-size: 1.2rem;
    font-weight: 700;
    
    /* デフォルト */
    color: #333;
}
/* ダークモード */
body.dark-mode .photo-links-content h3 {
    color: #e5ecec !important;
}
/* カラーテーマ */
body[class*="theme-"] .photo-links-content h3 {
    color: #fff !important;
}


/* 5. リンクボタン（リスト） */
#photo-links-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.photo-link-item {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央揃え */
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.15s, background 0.15s, color 0.15s;
    
    /* デフォルト */
    background-color: #ffffff;
    border: 1px solid #e6e6f3;
    color: #333;
}
.photo-link-item:active { transform: scale(0.98); }

/* アイコン */
.photo-link-item i {
    font-size: 1.2em;
    margin-right: 8px;
    color: #888;
    transition: color 0.15s;
}

/* ホバー時（ライトモード） */
@media (hover: hover) {
    .photo-link-item:hover {
        background-color: #f0f8ff;
        border-color: #6654e8;
        color: #6654e8;
        transform: translateY(-2px);
    }
    .photo-link-item:hover i { color: #6654e8; }
}

/* --- リンクボタン：テーマ別配色 --- */

/* ダークモード */
body.dark-mode .photo-link-item {
    background-color: #232c35 !important;
    border-color: #41505f !important;
    color: #e5ecec !important;
}
body.dark-mode .photo-link-item i {
    color: #a0b0c0 !important;
}
@media (hover: hover) {
    body.dark-mode .photo-link-item:hover {
        background-color: #364152 !important;
        border-color: #8de0ee !important;
        color: #8de0ee !important;
    }
    body.dark-mode .photo-link-item:hover i { color: #8de0ee !important; }
}

/* カラーテーマ */
body[class*="theme-"] .photo-link-item {
    /* ボタン背景は薄くする（または白） */
    background-color: rgba(0,0,0,0.2) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
}
body[class*="theme-"] .photo-link-item i {
    color: rgba(255,255,255,0.8) !important;
}
@media (hover: hover) {
    body[class*="theme-"] .photo-link-item:hover {
        background-color: #fff !important;
        border-color: #fff !important;
        color: var(--card-bg) !important; /* テキストをテーマ色に */
    }
    body[class*="theme-"] .photo-link-item:hover i {
        color: var(--card-bg) !important;
    }
}