/* ═══════════════════════════════════════════
   COLOR SYSTEM — 役割ごとに完全分離
   ─ ブランド色  : #0d0d1a (背景濃)
   ─ ランク色    : S5=#c8392b S4=#b07d1a S=#2e7d5a A=#455a64
   ─ 操作色(CTA) : #2563eb (フィルター選択・アクション)
   ─ 状態色NEW   : #0d9255 (緑 = 新着)
   ─ 注意色DIM   : opacity 0.07 (非表示)
   ─ テキスト    : #e8e8f0 / #a0a0b8 / #5a5a78
═══════════════════════════════════════════ */
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
 
#etl{
  --c-bg:       #f0f0f2;      /* ページ全体：薄グレー */
  --c-surface:  #ffffff;      /* カード・セクション面：白 */
  --c-surface2: #f7f7f9;      /* カードタイトル・サブ面 */
  --c-border:   rgba(0,0,0,.12);
  --c-text:     #111111;
  --c-muted:    #666680;
  --c-dim:      rgba(0,0,0,.04);
 
  /* ランク色 */
  --c-s5:  #c8392b;
  --c-s4:  #b07d1a;
  --c-s:   #2e7d5a;
  --c-a:   #455a64;
 
  /* 操作色 */
  --c-action: #2563eb;
  --c-action-bg: rgba(37,99,235,.12);
 
  /* 状態色 */
  --c-new: #0d9255;
 
  font-family:'Noto Sans JP',sans-serif;
  font-size:16px;
  color:var(--c-text);
  background:var(--c-bg);
  border-radius:10px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
 
/* ── HEADER ── */
#etl .etl-hd{
  padding:16px 18px 14px;
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:#e8eaef;
}
#etl .etl-ttl{
  font-size:1rem;font-weight:900;letter-spacing:.02em;
  color:var(--c-text);
}
#etl .etl-ttl-tag{
  font-size:.6rem;font-weight:700;
  color:var(--c-muted);letter-spacing:.06em;
  text-transform:uppercase;
}
#etl .etl-sub{
  font-size:.72rem;color:var(--c-muted);margin-left:auto;
}
 
/* ── FILTER BAR ── */
#etl .etl-fbar{
  padding:14px 18px;
  border-bottom:2px solid rgba(0,0,0,.1);
  display:flex;flex-direction:column;gap:10px;
  background:#f5f6f9;
}
/* 各行 */
#etl .etl-frow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 0;
}
#etl .etl-frow+.etl-frow{
  border-top:1px solid rgba(0,0,0,.07);
  padding-top:8px;
}
/* ラベル */
#etl .etl-frow-label{
  font-size:.75rem;font-weight:900;
  color:#333;
  min-width:42px;flex-shrink:0;
  letter-spacing:.04em;
  background:#e2e4ea;
  padding:2px 7px;
  border-radius:3px;
}
/* チップ */
#etl .etl-chip{
  font-family:inherit;font-size:.9rem;font-weight:700;
  padding:5px 14px;border-radius:20px;cursor:pointer;
  border:1.5px solid rgba(0,0,0,.28);
  color:#333;background:#fff;
  transition:all .15s;white-space:nowrap;
  line-height:1.4;
}
#etl .etl-chip:hover{
  border-color:rgba(0,0,0,.6);
  background:#f4f4f4;
  color:#111;
}
#etl .etl-chip.on{
  background:#1d4ed8;
  border:2px solid #1d4ed8;
  color:#fff;
  font-weight:900;
  box-shadow:0 2px 8px rgba(29,78,216,.25);
}
#etl .etl-chip.new-chip{
  border-color:#0d9255;
  color:#0a7040;
}
#etl .etl-chip.new-chip.on{
  background:#0d9255;
  border:2px solid #0d9255;
  color:#fff;
  font-weight:900;
  box-shadow:0 2px 8px rgba(13,146,85,.25);
}
/* 解除ボタン */
#etl .etl-clr-btn{
  font-family:inherit;font-size:.82rem;font-weight:700;
  padding:5px 14px;border-radius:20px;cursor:pointer;
  border:1.5px solid rgba(0,0,0,.28);
  color:#666;background:#fff;
  transition:all .15s;white-space:nowrap;
}
#etl .etl-clr-btn:hover{color:#111;border-color:rgba(0,0,0,.6);background:#f4f4f4;}
 
/* フィルター中は明示 */
#etl.filtered .etl-fbar{
  background:rgba(37,99,235,.03);
}
#etl .etl-filter-info{
  display:none;font-size:.75rem;color:#1a4cc8;font-weight:700;
  padding:4px 18px;border-bottom:1px solid rgba(37,99,235,.15);
  background:rgba(37,99,235,.05);
}
#etl.filtered .etl-filter-info{display:block;}
 
/* ── RANK SECTION ── */
#etl .etl-rank{
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
}
#etl .etl-rank:last-child{border-bottom:none;}
 
#etl .etl-rank-hd{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;cursor:pointer;
  transition:background .15s;
  user-select:none;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
}
#etl .etl-rank-hd:hover{background:#f5f5f7;}
 
/* ── GRID ── */
#etl .etl-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;padding:12px 14px 16px;
  background:var(--c-bg);
}
#etl .etl-rank.collapsed .etl-grid{display:none;}
#etl .etl-rank[data-rank="S5"] .etl-rank-hd{border-left:3px solid var(--c-s5);}
#etl .etl-rank[data-rank="S4"] .etl-rank-hd{border-left:3px solid var(--c-s4);}
#etl .etl-rank[data-rank="S"]  .etl-rank-hd{border-left:3px solid var(--c-s);}
#etl .etl-rank[data-rank="A"]  .etl-rank-hd{border-left:3px solid var(--c-a);}
 
#etl .etl-rank-label{
  font-size:.82rem;font-weight:900;letter-spacing:.08em;
  min-width:28px;
}
#etl .etl-rank[data-rank="S5"] .etl-rank-label{color:var(--c-s5);}
#etl .etl-rank[data-rank="S4"] .etl-rank-label{color:var(--c-s4);}
#etl .etl-rank[data-rank="S"]  .etl-rank-label{color:var(--c-s);}
#etl .etl-rank[data-rank="A"]  .etl-rank-label{color:var(--c-a);}
 
#etl .etl-rank-desc{
  font-size:.78rem;color:var(--c-muted);font-weight:700;flex:1;
}
#etl .etl-rank-cnt{
  font-size:.72rem;color:var(--c-muted);font-weight:700;
  background:var(--c-dim);padding:1px 8px;border-radius:3px;
}
#etl .etl-rank-tog{
  font-size:.62rem;color:var(--c-muted);
  transition:transform .22s;margin-left:4px;
}
#etl .etl-rank.collapsed .etl-rank-tog{transform:rotate(-90deg);}
 
/* ── GRID ── */
#etl .etl-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;padding:12px 14px 16px;
  background:var(--c-bg);
}
#etl .etl-rank.collapsed .etl-grid{display:none;}
 
/* ── CARD ── */
#etl .etl-card{
  position:relative;cursor:pointer;
  border-radius:6px;overflow:hidden;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  box-shadow:0 1px 4px rgba(0,0,0,.07);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
#etl .etl-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,0,0,.22);
  box-shadow:0 6px 20px rgba(0,0,0,.13);
}
#etl .etl-card.dim{
  opacity:.08;pointer-events:none;
}
 
/* カバー画像 : 16:9 */
#etl .etl-cover{
  width:100%;aspect-ratio:16/9;
  overflow:hidden;background:#e8e8e8;position:relative;
}
#etl .etl-cover img{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;opacity:0;transition:opacity .35s;
}
 
/* NEWバッジ：状態色のみ。目立つが主張しすぎない */
#etl .etl-new{
  position:absolute;top:6px;left:6px;
  background:var(--c-new);color:#fff;
  font-size:.60rem;font-weight:900;
  padding:1px 6px;border-radius:2px;letter-spacing:.04em;
}
 
/* ジャンルバッジ：複数対応 */
#etl .etl-gbadges{
  position:absolute;bottom:5px;left:5px;
  display:flex;gap:3px;flex-wrap:wrap;max-width:90%;
}
#etl .etl-gbadge{
  font-size:.58rem;padding:2px 6px;border-radius:2px;
  font-weight:800;color:rgba(255,255,255,.9);
  white-space:nowrap;
}
#etl .etl-gb-love    {background:#9c2770;}
#etl .etl-gb-fantasy {background:#5b21a0;}
#etl .etl-gb-rpg     {background:#1a4ea0;}
#etl .etl-gb-sim     {background:#0d6b5e;}
#etl .etl-gb-harem   {background:#9a5a00;}
#etl .etl-gb-ntr     {background:#2e3d4a;}
#etl .etl-gb-chokyo  {background:#8b1a1a;}
#etl .etl-gb-chikan  {background:#3e2520;}
#etl .etl-gb-nozoki  {background:#1a2570;}
#etl .etl-gb-hard    {background:#1a1a1a;border:1px solid rgba(255,255,255,.12);}
#etl .etl-gb-adv     {background:#3a6020;}
#etl .etl-gb-action  {background:#7a2800;}
#etl .etl-gb-suimin  {background:#1e0e60;}
#etl .etl-gb-live    {background:#005570;}
 
/* タイトル */
#etl .etl-ctitle{
  font-size:clamp(.78rem,1.2vw,.9rem);
  font-weight:700;line-height:1.5;
  color:#1a1a2e;
  padding:6px 8px 7px;
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:2.7em;
  background:#f7f7f9;
}
 
/* ── FOOTER ── */
#etl .etl-footer{
  padding:8px 18px;
  border-top:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--c-surface);
}
#etl .etl-info{font-size:.78rem;color:var(--c-muted);font-weight:700;}
 
/* ── TOOLTIP ── */
#etl-tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:#ffffff;
  border:1.5px solid rgba(0,0,0,.15);
  border-radius:6px;width:220px;
  padding:12px 14px;
  font-size:.78rem;line-height:1.6;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  opacity:0;transition:opacity .12s;
  font-family:'Noto Sans JP',sans-serif;
}
#etl-tip.show{opacity:1;}
#etl-tip .tt-title{
  font-weight:900;font-size:.88rem;
  color:#111111;margin-bottom:6px;line-height:1.4;
}
#etl-tip .tt-row{color:#555568;margin:2px 0;}
#etl-tip .tt-row b{color:#222236;}
#etl-tip .tt-desc{
  color:#444458;margin-top:5px;line-height:1.5;
  font-size:.62rem;
}
#etl-tip .tt-tags{
  display:flex;flex-wrap:wrap;gap:3px;margin-top:7px;
}
#etl-tip .tt-tag{
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.12);
  color:#555568;font-size:.64rem;padding:1px 5px;border-radius:2px;
}
#etl-tip .tt-cta{
  margin-top:7px;padding-top:7px;
  border-top:1px solid rgba(0,0,0,.08);
  color:#2563eb;font-size:.72rem;font-weight:700;
}
 
/* ── TAB BAR (ランク切り替え) ── */
#etl .etl-tabbar{
  display:flex;
  border-bottom:2px solid var(--c-border);
  background:#f2f3f6;
  padding:0 18px;
  gap:2px;
}
#etl .etl-tab{
  padding:10px 18px;
  font-size:.88rem;font-weight:700;
  border:none;background:none;cursor:pointer;
  color:var(--c-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .15s,border-color .15s;
  font-family:'Noto Sans JP',sans-serif;
}
#etl .etl-tab:hover{color:var(--c-text);}
#etl .etl-tab.active{color:var(--c-text);border-bottom-color:var(--c-text);}
#etl .etl-tab[data-tab="S5"].active{color:var(--c-s5);border-bottom-color:var(--c-s5);}
#etl .etl-tab[data-tab="S4"].active{color:var(--c-s4);border-bottom-color:var(--c-s4);}
#etl .etl-tab[data-tab="S"].active{color:var(--c-s);border-bottom-color:var(--c-s);}
#etl .etl-tab[data-tab="A"].active{color:var(--c-a);border-bottom-color:var(--c-a);}
 
/* ランクフィルターチップ：各ランク色で点灯 */
#etl .etl-chip.rank-chip[data-rank-filter="S5"].on{background:#c8392b;border:2px solid #c8392b;color:#fff;box-shadow:0 2px 8px rgba(200,57,43,.3);font-weight:900;}
#etl .etl-chip.rank-chip[data-rank-filter="S4"].on{background:#b07d1a;border:2px solid #b07d1a;color:#fff;box-shadow:0 2px 8px rgba(176,125,26,.3);font-weight:900;}
#etl .etl-chip.rank-chip[data-rank-filter="S"].on{background:#2e7d5a;border:2px solid #2e7d5a;color:#fff;box-shadow:0 2px 8px rgba(46,125,90,.3);font-weight:900;}
#etl .etl-chip.rank-chip[data-rank-filter="A"].on{background:#455a64;border:2px solid #455a64;color:#fff;box-shadow:0 2px 8px rgba(69,90,100,.3);font-weight:900;}
 
 
/* ── RESPONSIVE ── */
@media(max-width:600px){
  /* グリッド：2列 */
  #etl .etl-grid{
    grid-template-columns:repeat(2,1fr);
    gap:6px;padding:8px 8px 10px;
  }
 
  /* ヘッダー */
  #etl .etl-hd{padding:10px 12px 8px;gap:6px;}
  #etl .etl-ttl{font-size:clamp(.9rem,4vw,1.1rem);}
  #etl .etl-sub{font-size:.6rem;}
 
  /* タブバー：均等分割・小さめ */
  #etl .etl-tabbar{padding:0 8px;gap:0;}
  #etl .etl-tab{
    flex:1;
    padding:9px 4px;
    font-size:.68rem;
    text-align:center;
  }
 
  /* フィルターバー */
  #etl .etl-fbar{padding:10px 12px;gap:8px;}
  #etl .etl-frow{gap:6px;}
  #etl .etl-frow-label{font-size:.6rem;min-width:34px;}
  #etl .etl-chip{font-size:.8rem;padding:4px 10px;}
  #etl .etl-clr-btn{font-size:.8rem;padding:4px 10px;}
 
  /* ランクヘッダー */
  #etl .etl-rank-hd{padding:9px 12px;}
  #etl .etl-rank-desc{font-size:.74rem;}
 
  /* カードタイトル */
  #etl .etl-ctitle{
    font-size:.76rem;
    padding:5px 6px 6px;
    min-height:2.5em;
  }
 
  /* ジャンルバッジ */
  #etl .etl-gbadge{font-size:.54rem;padding:1px 4px;}
 
  /* フッター */
  #etl .etl-footer{padding:7px 12px;}
  #etl .etl-info{font-size:.72rem;}
}
 
/* ══ EEAT DESIGN ══════════════════════════════ */
 
/* 評価基準バナー */
#etl .etl-criteria{
  padding:14px 18px;
  background:#f8f7ff;
  border-bottom:2px solid var(--c-border);
  display:flex;flex-direction:column;gap:8px;
}
#etl .etl-criteria-ttl{
  font-size:.76rem;font-weight:900;color:#333;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px;
}
#etl .etl-criteria-ttl::before{
  content:'📊';font-size:.7rem;
}
#etl .etl-criteria-axes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
#etl .etl-axis{
  background:#fff;border:1px solid var(--c-border);
  border-radius:5px;padding:7px 8px;text-align:center;
}
#etl .etl-axis-name{
  font-size:.68rem;font-weight:900;color:var(--c-muted);
  letter-spacing:.06em;margin-bottom:3px;
}
#etl .etl-axis-score{
  font-size:.9rem;font-weight:900;color:#1a1a2e;
}
#etl .etl-axis-score span{
  font-size:.62rem;font-weight:700;color:var(--c-muted);
}
#etl .etl-axis-desc{
  font-size:.62rem;color:var(--c-muted);line-height:1.4;margin-top:2px;
}
#etl .etl-axis[data-axis="ero"] .etl-axis-score{color:#c8392b;}
#etl .etl-axis[data-axis="volume"] .etl-axis-score{color:#b07d1a;}
#etl .etl-axis[data-axis="system"] .etl-axis-score{color:#2e7d5a;}
#etl .etl-axis[data-axis="value"] .etl-axis-score{color:#455a64;}
 
/* 著者宣言バナー */
#etl .etl-author{
  padding:10px 18px;
  background:#fff8f0;
  border-bottom:1px solid #f0d8b0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#etl .etl-author-icon{font-size:1.2rem;}
#etl .etl-author-body{flex:1;}
#etl .etl-author-name{
  font-size:.76rem;font-weight:900;color:#6b3a00;
  margin-bottom:2px;
}
#etl .etl-author-decl{
  font-size:.70rem;color:#8a5a20;line-height:1.5;
}
#etl .etl-author-badge{
  font-size:.64rem;font-weight:900;
  background:#e8a030;color:#fff;
  padding:2px 7px;border-radius:10px;white-space:nowrap;
}
#etl .etl-updated{
  font-size:.66rem;color:var(--c-muted);margin-left:auto;
  white-space:nowrap;
}
 
/* ホバーツールチップ拡張：4軸スコア */
#etl-tip .tt-axes{
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:8px;
}
#etl-tip .tt-axis{
  background:#f5f5f8;border:1px solid rgba(0,0,0,.08);
  border-radius:3px;padding:4px 6px;
}
#etl-tip .tt-axis-name{
  font-size:.62rem;color:var(--c-muted) !important;
  font-weight:900;letter-spacing:.04em;
}
#etl-tip .tt-axis-bar{
  height:3px;background:#e8e8f0;border-radius:2px;margin:3px 0;overflow:hidden;
}
#etl-tip .tt-axis-fill{
  height:100%;border-radius:2px;transition:width .3s;
}
#etl-tip .tt-axis-val{
  font-size:.66rem;font-weight:900;
}
#etl-tip .tt-author-comment{
  margin-top:8px;padding:7px 8px;/* ═══════════════════════════════════════════
   COLOR SYSTEM — 役割ごとに完全分離
   ─ ブランド色  : #0d0d1a (背景濃)
   ─ ランク色    : S5=#c8392b S4=#b07d1a S=#2e7d5a A=#455a64
   ─ 操作色(CTA) : #2563eb (フィルター選択・アクション)
   ─ 状態色NEW   : #0d9255 (緑 = 新着)
   ─ 注意色DIM   : opacity 0.07 (非表示)
   ─ テキスト    : #e8e8f0 / #a0a0b8 / #5a5a78
═══════════════════════════════════════════ */
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
 
#etl{
  --c-bg:       #f0f0f2;      /* ページ全体：薄グレー */
  --c-surface:  #ffffff;      /* カード・セクション面：白 */
  --c-surface2: #f7f7f9;      /* カードタイトル・サブ面 */
  --c-border:   rgba(0,0,0,.12);
  --c-text:     #111111;
  --c-muted:    #666680;
  --c-dim:      rgba(0,0,0,.04);
 
  /* ランク色 */
  --c-s5:  #c8392b;
  --c-s4:  #b07d1a;
  --c-s:   #2e7d5a;
  --c-a:   #455a64;
 
  /* 操作色 */
  --c-action: #2563eb;
  --c-action-bg: rgba(37,99,235,.12);
 
  /* 状態色 */
  --c-new: #0d9255;
 
  font-family:'Noto Sans JP',sans-serif;
  font-size:16px;
  color:var(--c-text);
  background:var(--c-bg);
  border-radius:10px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
 
/* ── HEADER ── */
#etl .etl-hd{
  padding:16px 18px 14px;
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:#e8eaef;
}
#etl .etl-ttl{
  font-size:1rem;font-weight:900;letter-spacing:.02em;
  color:var(--c-text);
}
#etl .etl-ttl-tag{
  font-size:.6rem;font-weight:700;
  color:var(--c-muted);letter-spacing:.06em;
  text-transform:uppercase;
}
#etl .etl-sub{
  font-size:.72rem;color:var(--c-muted);margin-left:auto;
}
 
/* ── FILTER BAR ── */
#etl .etl-fbar{
  padding:14px 18px;
  border-bottom:2px solid rgba(0,0,0,.1);
  display:flex;flex-direction:column;gap:10px;
  background:#f5f6f9;
}
/* 各行 */
#etl .etl-frow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 0;
}
#etl .etl-frow+.etl-frow{
  border-top:1px solid rgba(0,0,0,.07);
  padding-top:8px;
}
/* ラベル */
#etl .etl-frow-label{
  font-size:.75rem;font-weight:900;
  color:#333;
  min-width:42px;flex-shrink:0;
  letter-spacing:.04em;
  background:#e2e4ea;
  padding:2px 7px;
  border-radius:3px;
}
/* チップ */
#etl .etl-chip{
  font-family:inherit;font-size:.9rem;font-weight:700;
  padding:5px 14px;border-radius:20px;cursor:pointer;
  border:1.5px solid rgba(0,0,0,.28);
  color:#333;background:#fff;
  transition:all .15s;white-space:nowrap;
  line-height:1.4;
}
#etl .etl-chip:hover{
  border-color:rgba(0,0,0,.6);
  background:#f4f4f4;
  color:#111;
}
#etl .etl-chip.on{
  background:#1d4ed8;
  border:2px solid #1d4ed8;
  color:#fff;
  font-weight:900;
  box-shadow:0 2px 8px rgba(29,78,216,.25);
}
#etl .etl-chip.new-chip{
  border-color:#0d9255;
  color:#0a7040;
}
#etl .etl-chip.new-chip.on{
  background:#0d9255;
  border:2px solid #0d9255;
  color:#fff;
  font-weight:900;
  box-shadow:0 2px 8px rgba(13,146,85,.25);
}
/* 解除ボタン */
#etl .etl-clr-btn{
  font-family:inherit;font-size:.82rem;font-weight:700;
  padding:5px 14px;border-radius:20px;cursor:pointer;
  border:1.5px solid rgba(0,0,0,.28);
  color:#666;background:#fff;
  transition:all .15s;white-space:nowrap;
}
#etl .etl-clr-btn:hover{color:#111;border-color:rgba(0,0,0,.6);background:#f4f4f4;}
 
/* フィルター中は明示 */
#etl.filtered .etl-fbar{
  background:rgba(37,99,235,.03);
}
#etl .etl-filter-info{
  display:none;font-size:.75rem;color:#1a4cc8;font-weight:700;
  padding:4px 18px;border-bottom:1px solid rgba(37,99,235,.15);
  background:rgba(37,99,235,.05);
}
#etl.filtered .etl-filter-info{display:block;}
 
/* ── RANK SECTION ── */
#etl .etl-rank{
  border-bottom:1px solid var(--c-border);
  background:var(--c-bg);
}
#etl .etl-rank:last-child{border-bottom:none;}
 
#etl .etl-rank-hd{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;cursor:pointer;
  transition:background .15s;
  user-select:none;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
}
#etl .etl-rank-hd:hover{background:#f5f5f7;}
 
/* ── GRID ── */
#etl .etl-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;padding:12px 14px 16px;
  background:var(--c-bg);
}
#etl .etl-rank.collapsed .etl-grid{display:none;}
#etl .etl-rank[data-rank="S5"] .etl-rank-hd{border-left:3px solid var(--c-s5);}
#etl .etl-rank[data-rank="S4"] .etl-rank-hd{border-left:3px solid var(--c-s4);}
#etl .etl-rank[data-rank="S"]  .etl-rank-hd{border-left:3px solid var(--c-s);}
#etl .etl-rank[data-rank="A"]  .etl-rank-hd{border-left:3px solid var(--c-a);}
 
#etl .etl-rank-label{
  font-size:.82rem;font-weight:900;letter-spacing:.08em;
  min-width:28px;
}
#etl .etl-rank[data-rank="S5"] .etl-rank-label{color:var(--c-s5);}
#etl .etl-rank[data-rank="S4"] .etl-rank-label{color:var(--c-s4);}
#etl .etl-rank[data-rank="S"]  .etl-rank-label{color:var(--c-s);}
#etl .etl-rank[data-rank="A"]  .etl-rank-label{color:var(--c-a);}
 
#etl .etl-rank-desc{
  font-size:.78rem;color:var(--c-muted);font-weight:700;flex:1;
}
#etl .etl-rank-cnt{
  font-size:.72rem;color:var(--c-muted);font-weight:700;
  background:var(--c-dim);padding:1px 8px;border-radius:3px;
}
#etl .etl-rank-tog{
  font-size:.62rem;color:var(--c-muted);
  transition:transform .22s;margin-left:4px;
}
#etl .etl-rank.collapsed .etl-rank-tog{transform:rotate(-90deg);}
 
/* ── GRID ── */
#etl .etl-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;padding:12px 14px 16px;
  background:var(--c-bg);
}
#etl .etl-rank.collapsed .etl-grid{display:none;}
 
/* ── CARD ── */
#etl .etl-card{
  position:relative;cursor:pointer;
  border-radius:6px;overflow:hidden;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  box-shadow:0 1px 4px rgba(0,0,0,.07);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
#etl .etl-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,0,0,.22);
  box-shadow:0 6px 20px rgba(0,0,0,.13);
}
#etl .etl-card.dim{
  opacity:.08;pointer-events:none;
}
 
/* カバー画像 : 16:9 */
#etl .etl-cover{
  width:100%;aspect-ratio:16/9;
  overflow:hidden;background:#e8e8e8;position:relative;
}
#etl .etl-cover img{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;opacity:0;transition:opacity .35s;
}
 
/* NEWバッジ：状態色のみ。目立つが主張しすぎない */
#etl .etl-new{
  position:absolute;top:6px;left:6px;
  background:var(--c-new);color:#fff;
  font-size:.60rem;font-weight:900;
  padding:1px 6px;border-radius:2px;letter-spacing:.04em;
}
 
/* ジャンルバッジ：複数対応 */
#etl .etl-gbadges{
  position:absolute;bottom:5px;left:5px;
  display:flex;gap:3px;flex-wrap:wrap;max-width:90%;
}
#etl .etl-gbadge{
  font-size:.58rem;padding:2px 6px;border-radius:2px;
  font-weight:800;color:rgba(255,255,255,.9);
  white-space:nowrap;
}
#etl .etl-gb-love    {background:#9c2770;}
#etl .etl-gb-fantasy {background:#5b21a0;}
#etl .etl-gb-rpg     {background:#1a4ea0;}
#etl .etl-gb-sim     {background:#0d6b5e;}
#etl .etl-gb-harem   {background:#9a5a00;}
#etl .etl-gb-ntr     {background:#2e3d4a;}
#etl .etl-gb-chokyo  {background:#8b1a1a;}
#etl .etl-gb-chikan  {background:#3e2520;}
#etl .etl-gb-nozoki  {background:#1a2570;}
#etl .etl-gb-hard    {background:#1a1a1a;border:1px solid rgba(255,255,255,.12);}
#etl .etl-gb-adv     {background:#3a6020;}
#etl .etl-gb-action  {background:#7a2800;}
#etl .etl-gb-suimin  {background:#1e0e60;}
#etl .etl-gb-live    {background:#005570;}
 
/* タイトル */
#etl .etl-ctitle{
  font-size:clamp(.78rem,1.2vw,.9rem);
  font-weight:700;line-height:1.5;
  color:#1a1a2e;
  padding:6px 8px 7px;
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:2.7em;
  background:#f7f7f9;
}
 
/* ── FOOTER ── */
#etl .etl-footer{
  padding:8px 18px;
  border-top:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--c-surface);
}
#etl .etl-info{font-size:.78rem;color:var(--c-muted);font-weight:700;}
 
/* ── TOOLTIP ── */
#etl-tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:#ffffff;
  border:1.5px solid rgba(0,0,0,.15);
  border-radius:6px;width:220px;
  padding:12px 14px;
  font-size:.78rem;line-height:1.6;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  opacity:0;transition:opacity .12s;
  font-family:'Noto Sans JP',sans-serif;
}
#etl-tip.show{opacity:1;}
#etl-tip .tt-title{
  font-weight:900;font-size:.88rem;
  color:#111111;margin-bottom:6px;line-height:1.4;
}
#etl-tip .tt-row{color:#555568;margin:2px 0;}
#etl-tip .tt-row b{color:#222236;}
#etl-tip .tt-desc{
  color:#444458;margin-top:5px;line-height:1.5;
  font-size:.62rem;
}
#etl-tip .tt-tags{
  display:flex;flex-wrap:wrap;gap:3px;margin-top:7px;
}
#etl-tip .tt-tag{
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.12);
  color:#555568;font-size:.64rem;padding:1px 5px;border-radius:2px;
}
#etl-tip .tt-cta{
  margin-top:7px;padding-top:7px;
  border-top:1px solid rgba(0,0,0,.08);
  color:#2563eb;font-size:.72rem;font-weight:700;
}
 
/* ── TAB BAR (ランク切り替え) ── */
#etl .etl-tabbar{
  display:flex;
  border-bottom:2px solid var(--c-border);
  background:#f2f3f6;
  padding:0 18px;
  gap:2px;
}
#etl .etl-tab{
  padding:10px 18px;
  font-size:.88rem;font-weight:700;
  border:none;background:none;cursor:pointer;
  color:var(--c-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .15s,border-color .15s;
  font-family:'Noto Sans JP',sans-serif;
}
#etl .etl-tab:hover{color:var(--c-text);}
#etl .etl-tab.active{color:var(--c-text);border-bottom-color:var(--c-text);}
#etl .etl-tab[data-tab="S5"].active{color:var(--c-s5);border-bottom-color:var(--c-s5);}
#etl .etl-tab[data-tab="S4"].active{color:var(--c-s4);border-bottom-color:var(--c-s4);}
#etl .etl-tab[data-tab="S"].active{color:var(--c-s);border-bottom-color:var(--c-s);}
#etl .etl-tab[data-tab="A"].active{color:var(--c-a);border-bottom-color:var(--c-a);}
 
/* ランクフィルターチップ：各ランク色で点灯 */
#etl .etl-chip.rank-chip[data-rank-filter="S5"].on{background:#c8392b;border:2px solid #c8392b;color:#fff;box-shadow:0 2px 8px rgba(200,57,43,.3);font-weight:900;}
#etl .etl-chip.rank-chip[data-rank-filter="S4"].on{background:#b07d1a;border:2px solid #b07d1a;color:#fff;box-shadow:0 2px 8px rgba(176,125,26,.3);font-weight:900;}
#etl .etl-chip.rank-chip[data-rank-filter="S"].on{background:#2e7d5a;border:2px solid #2e7d5a;color:#fff;box-shadow:0 2px 8px rgba(46,125,90,.3);font-weight:900;}
#etl .etl-chip.rank-chip[data-rank-filter="A"].on{background:#455a64;border:2px solid #455a64;color:#fff;box-shadow:0 2px 8px rgba(69,90,100,.3);font-weight:900;}
 
 
/* ── RESPONSIVE ── */
@media(max-width:600px){
  /* グリッド：2列 */
  #etl .etl-grid{
    grid-template-columns:repeat(2,1fr);
    gap:6px;padding:8px 8px 10px;
  }
 
  /* ヘッダー */
  #etl .etl-hd{padding:10px 12px 8px;gap:6px;}
  #etl .etl-ttl{font-size:clamp(.9rem,4vw,1.1rem);}
  #etl .etl-sub{font-size:.6rem;}
 
  /* タブバー：均等分割・小さめ */
  #etl .etl-tabbar{padding:0 8px;gap:0;}
  #etl .etl-tab{
    flex:1;
    padding:9px 4px;
    font-size:.68rem;
    text-align:center;
  }
 
  /* フィルターバー */
  #etl .etl-fbar{padding:10px 12px;gap:8px;}
  #etl .etl-frow{gap:6px;}
  #etl .etl-frow-label{font-size:.6rem;min-width:34px;}
  #etl .etl-chip{font-size:.8rem;padding:4px 10px;}
  #etl .etl-clr-btn{font-size:.8rem;padding:4px 10px;}
 
  /* ランクヘッダー */
  #etl .etl-rank-hd{padding:9px 12px;}
  #etl .etl-rank-desc{font-size:.74rem;}
 
  /* カードタイトル */
  #etl .etl-ctitle{
    font-size:.76rem;
    padding:5px 6px 6px;
    min-height:2.5em;
  }
 
  /* ジャンルバッジ */
  #etl .etl-gbadge{font-size:.54rem;padding:1px 4px;}
 
  /* フッター */
  #etl .etl-footer{padding:7px 12px;}
  #etl .etl-info{font-size:.72rem;}
}
 
/* ══ EEAT DESIGN ══════════════════════════════ */
 
/* 評価基準バナー */
#etl .etl-criteria{
  padding:14px 18px;
  background:#f8f7ff;
  border-bottom:2px solid var(--c-border);
  display:flex;flex-direction:column;gap:8px;
}
#etl .etl-criteria-ttl{
  font-size:.76rem;font-weight:900;color:#333;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px;
}
#etl .etl-criteria-ttl::before{
  content:'📊';font-size:.7rem;
}
#etl .etl-criteria-axes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
#etl .etl-axis{
  background:#fff;border:1px solid var(--c-border);
  border-radius:5px;padding:7px 8px;text-align:center;
}
#etl .etl-axis-name{
  font: size 1.06em;rem;font-weight:900;color:var(--c-muted);
  letter-spacing:.06em;margin-bottom:3px;
}
#etl .etl-axis-score{
  font-size:.9rem;font-weight:900;color:#1a1a2e;
}
#etl .etl-axis-score span{
  font-size:.62rem;font-weight:700;color:var(--c-muted);
}
#etl .etl-axis-desc{
  font-size:.62rem;color:var(--c-muted);line-height:1.4;margin-top:2px;
}
#etl .etl-axis[data-axis="ero"] .etl-axis-score{color:#c8392b;}
#etl .etl-axis[data-axis="volume"] .etl-axis-score{color:#b07d1a;}
#etl .etl-axis[data-axis="system"] .etl-axis-score{color:#2e7d5a;}
#etl .etl-axis[data-axis="value"] .etl-axis-score{color:#455a64;}
 
/* 著者宣言バナー */
#etl .etl-author{
  padding:10px 18px;
  background:#fff8f0;
  border-bottom:1px solid #f0d8b0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#etl .etl-author-icon{font-size:1.2rem;}
#etl .etl-author-body{flex:1;}
#etl .etl-author-name{
  font-size:.76rem;font-weight:900;color:#6b3a00;
  margin-bottom:2px;
}
#etl .etl-author-decl{
  font-size:.70rem;color:#8a5a20;line-height:1.5;
}
#etl .etl-author-badge{
  font-size:.64rem;font-weight:900;
  background:#e8a030;color:#fff;
  padding:2px 7px;border-radius:10px;white-space:nowrap;
}
#etl .etl-updated{
  font-size:.66rem;color:var(--c-muted);margin-left:auto;
  white-space:nowrap;
}
 
/* ホバーツールチップ拡張：4軸スコア */
#etl-tip .tt-axes{
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:8px;
}
#etl-tip .tt-axis{
  background:#f5f5f8;border:1px solid rgba(0,0,0,.08);
  border-radius:3px;padding:4px 6px;
}
#etl-tip .tt-axis-name{
  font-size:.62rem;color:var(--c-muted) !important;
  font-weight:900;letter-spacing:.04em;
}
#etl-tip .tt-axis-bar{
  height:3px;background:#e8e8f0;border-radius:2px;margin:3px 0;overflow:hidden;
}
#etl-tip .tt-axis-fill{
  height:100%;border-radius:2px;transition:width .3s;
}
#etl-tip .tt-axis-val{
  font-size:.66rem;font-weight:900;
}
#etl-tip .tt-author-comment{
  margin-top:8px;padding:7px 8px;
  background:#f0f0ff;border-radius:4px;
  border-left:3px solid #2563eb;
  font-size:.70rem;color:#334;line-height:1.5;
  font-style:italic;
}
#etl-tip .tt-author-comment::before{
  content:'💬 ';font-style:normal;
}
 
@media(max-width:600px){
  #etl .etl-criteria-axes{grid-template-columns:repeat(2,1fr);}
  #etl .etl-author{gap:6px;}
}
  background:#f0f0ff;border-radius:4px;
  border-left:3px solid #2563eb;
  font-size:.70rem;color:#334;line-height:1.5;
  font-style:italic;
}
#etl-tip .tt-author-comment::before{
  content:'💬 ';font-style:normal;
}
 
@media(max-width:600px){
  #etl .etl-criteria-axes{grid-template-columns:repeat(2,1fr);}
  #etl .etl-author{gap:6px;}
}