/* ══════════════════════════════════════
   触手エロゲー ティアリスト
   テーマ: ダークグリーン × グレー
   EEAT: 評価基準・著者宣言・4軸スコア
══════════════════════════════════════ */
#ttl{
  --bg:     #fce8f0;        /* ページ背景: 薄ピンク */
  --surf:   #ffffff;        /* カード面: 白 */
  --surf2:  #fff5f8;        /* カード下部: 極薄ピンク */
  --surf3:  #f0e8ec;        /* カウントBG */
  --hd-bg:  #2a2030;        /* ヘッダー: ダークチャコール（対比） */
  --tab-bg: #322038;        /* タブ: 深いダークパープル */
  --fb-bg:  #ffffff;        /* フィルター背景: 白っぽいピンク */
  --bdr:    rgba(140,40,80,.35);
  --bdr2:   rgba(140,40,80,.50);
  --txt:    #1a1020;        /* テキスト: ほぼ黒 */
  --muted:  #6a4058;        /* サブテキスト: ダークモーブ */
  --s5:     #c00030;        /* S5: 深紅 */
  --s4:     #7020b0;        /* S4: ディープパープル */
  --s-c:    #0050a0;        /* S: ロイヤルブルー */
  --a-c:    #804000;        /* A: ダークオレンジ */
  --b-c:    #404055;        /* B: チャコール */
  --acc:    #c00030;
  --new:    #c84000;
  font-family:'Noto Sans JP',sans-serif;
  font-size:16px;color:var(--txt);
  background:var(--bg);
  border-radius:10px;overflow:hidden;
  border:1px solid var(--bdr2);
  -webkit-font-smoothing:antialiased;
}
 
/* HEADER */
#ttl .tt-hd{
  padding:16px 20px 14px;
  background:var(--hd-bg);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid rgba(240,100,140,.5);
  position:relative;overflow:hidden;
}
#ttl .tt-hd::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(255,160,200,.06) 0%,transparent 60%);
  pointer-events:none;
}
#ttl .tt-badge{
  font-size:.7rem;font-weight:900;letter-spacing:.1em;
  color:#fff;background:#e0205a;
  padding:3px 8px;border-radius:2px;white-space:nowrap;
}
#ttl .tt-ttl{
  font-family:'Noto Serif JP',serif;
  font-size:1.05rem;font-weight:900;color:#f8e0ea;letter-spacing:.04em;
}
#ttl .tt-sub{font-size:.72rem;color:rgba(255,255,255,.45);margin-left:auto;}
 
/* EEAT: 評価基準バナー */
#ttl .tt-criteria{
  padding:14px 18px;
  background:#ffffff;
  border-bottom:2px solid rgba(140,40,80,.40);
  display:flex;flex-direction:column;gap:8px;
}
#ttl .tt-criteria-ttl{
  font-size:.76rem;font-weight:900;color:#3a1020;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px;
}
#ttl .tt-criteria-axes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
#ttl .tt-axis{
  background:#ffffff;border:1.5px solid rgba(140,40,80,.35);
  border-radius:5px;padding:7px 8px;text-align:center;
}
#ttl .tt-axis-name{font-size:.68rem;font-weight:900;color:var(--muted);letter-spacing:.04em;margin-bottom:3px;}
#ttl .tt-axis-score{font-size:.9rem;font-weight:900;}
#ttl .tt-axis-score span{font-size:.58rem;font-weight:700;color:var(--muted);}
#ttl .tt-axis-desc{font-size:.60rem;color:var(--muted);line-height:1.4;margin-top:2px;}
#ttl .tt-axis[data-axis="t"]  .tt-axis-score{color:#1a7030;}
#ttl .tt-axis[data-axis="v"]  .tt-axis-score{color:#8a5000;}
#ttl .tt-axis[data-axis="g"]  .tt-axis-score{color:#1a5090;}
#ttl .tt-axis[data-axis="c"]  .tt-axis-score{color:#4a4a58;}
 
/* EEAT: 著者宣言バナー */
#ttl .tt-author{
  padding:10px 18px;
  background:#ffffff;
  border-bottom:2px solid rgba(140,40,80,.45);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#ttl .tt-author-icon{font-size:1.2rem;}
#ttl .tt-author-body{flex:1;}
#ttl .tt-author-name{font-size:.76rem;font-weight:900;color:#5a0020;margin-bottom:2px;}
#ttl .tt-author-decl{font-size:.68rem;color:#6a3050;line-height:1.5;}
#ttl .tt-author-badge{
  font-size:.62rem;font-weight:900;
  background:#c00040;color:#fff;
  padding:2px 8px;border-radius:10px;white-space:nowrap;
}
#ttl .tt-updated{font-size:.64rem;color:#7a4060;margin-left:auto;white-space:nowrap;}
 
/* TAB BAR */
#ttl .tt-tabs{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  background:#2a2030 !important;
  padding:10px 12px !important;
  border-bottom:2px solid rgba(140,40,80,.30) !important;
  width:100% !important;
  box-sizing:border-box !important;
}
#ttl .tt-tab{
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:9px 4px !important;
  font-size:.80rem !important;
  font-weight:700 !important;
  border:1.5px solid rgba(180,80,120,.40) !important;
  background:#ffffff !important;
  cursor:pointer !important;
  color:#6a3050 !important;
  border-radius:8px !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-sizing:border-box !important;
  margin:0 !important;
  display:block !important;
  float:none !important;
  width:auto !important;
}
#ttl .tt-tab:hover{border-color:#c00030 !important;color:#c00030 !important;background:#fff5f8 !important;}
#ttl .tt-tab.active{background:#c00030 !important;border-color:#c00030 !important;color:#fff !important;font-weight:900 !important;}
#ttl .tt-tab[data-tab="S5"].active{background:var(--s5) !important;border-color:var(--s5) !important;}
#ttl .tt-tab[data-tab="S4"].active{background:var(--s4) !important;border-color:var(--s4) !important;}
#ttl .tt-tab[data-tab="S"].active{background:var(--s-c) !important;border-color:var(--s-c) !important;}
 
/* FILTER BAR */
#ttl .tt-fbar{
  padding:12px 18px;border-bottom:2.5px solid rgba(140,40,80,.45);
  display:flex;flex-direction:column;gap:8px;
  background:#ffffff;
}
#ttl .tt-frow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0;}
#ttl .tt-frow+.tt-frow{border-top:1.5px solid rgba(140,40,80,.20);padding-top:7px;}
#ttl .tt-flabel{
  font-size:.80rem;font-weight:900;color:#c00030;
  background:none;padding:0 4px 0 0;
  min-width:auto;text-align:left;flex-shrink:0;letter-spacing:.02em;
}
#ttl .tt-chip{
  font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:20px;
  cursor:pointer;border:1.5px solid rgba(140,40,80,.20);
  color:#3a1020;background:#ffffff;transition:all .13s;white-space:nowrap;
}
#ttl .tt-chip:hover{border-color:#c00030;color:#1a1020;}
#ttl .tt-chip.on{
  background:#c00030;border-color:#c00030;color:#fff;font-weight:900;
  box-shadow:0 2px 7px rgba(192,0,48,.28);
}
#ttl .tt-chip.new-chip{border-color:rgba(200,80,0,.4);color:var(--new);}
#ttl .tt-chip.new-chip.on{background:var(--new);border-color:var(--new);color:#fff;}
#ttl .tt-clr{
  font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:20px;
  cursor:pointer;border:1.5px solid rgba(140,40,80,.18);
  color:var(--muted);background:transparent;
  transition:all .13s;white-space:nowrap;margin-left:auto;
}
#ttl .tt-clr:hover{border-color:rgba(180,60,80,.55);color:#1a1020;}
#ttl .tt-finfo{
  display:none;font-size:.70rem;color:#a0002a;font-weight:700;
  padding:4px 18px;border-bottom:1px solid rgba(192,0,48,.12);
  background:#ffffff;letter-spacing:.04em;
}
#ttl.filtered .tt-finfo{display:block;}
 
/* RANK SECTION */
#ttl .tt-rank{border-bottom:2px solid rgba(140,40,80,.15);background:#ffffff;}
#ttl .tt-rank:last-child{border-bottom:none;}
#ttl .tt-rank-hd{
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  cursor:pointer;background:#fce8f0;border-bottom:1.5px solid rgba(140,40,80,.15);
  transition:background .13s;user-select:none;
}
#ttl .tt-rank-hd:hover{background:#fdf0f5;}
/* ランクラベルをバッジ型に */
#ttl .tt-rank-label{
  font-family:'Noto Serif JP',serif;font-size:.72rem;font-weight:900;
  letter-spacing:.06em;
  padding:3px 10px;border-radius:4px;color:#fff;
  min-width:auto;line-height:1.4;
}
#ttl .tt-rank[data-rank="S5"] .tt-rank-label{background:var(--s5);}
#ttl .tt-rank[data-rank="S4"] .tt-rank-label{background:var(--s4);}
#ttl .tt-rank[data-rank="S"]  .tt-rank-label{background:var(--s-c);}
/* 左ボーダーは除去（バッジで代替） */
#ttl .tt-rank[data-rank="S5"] .tt-rank-hd{border-left:none;}
#ttl .tt-rank[data-rank="S4"] .tt-rank-hd{border-left:none;}
#ttl .tt-rank[data-rank="S"]  .tt-rank-hd{border-left:none;}
#ttl .tt-rank-desc{font-size:.78rem;color:var(--muted);font-weight:700;flex:1;}
#ttl .tt-rank-cnt{font-size:.68rem;color:var(--muted);font-weight:700;background:#fff5f8;padding:2px 9px;border-radius:10px;border:1.5px solid rgba(140,40,80,.30);}
#ttl .tt-rank-tog{font-size:.62rem;color:var(--muted);transition:transform .2s;margin-left:2px;}
#ttl .tt-rank.collapsed .tt-rank-tog{transform:rotate(-90deg);}
#ttl .tt-rank.collapsed .tt-grid{display:none;}
 
/* GRID 4列 */
#ttl .tt-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;padding:12px 14px 14px;background:#ffffff;
}
 
/* CARD */
#ttl .tt-card{
  position:relative;cursor:pointer;border-radius:6px;overflow:hidden;
  background:#ffffff;border:1.5px solid rgba(140,40,80,.40);
  box-shadow:0 1px 6px rgba(140,40,80,.18);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
#ttl .tt-card:hover{
  transform:translateY(-4px);border-color:rgba(160,0,50,.65);
  box-shadow:0 8px 24px rgba(120,0,40,.22);
}
#ttl .tt-card.dim{display:none;}
 
/* カバー 16:9 */
#ttl .tt-cover{width:100%;aspect-ratio:16/9;overflow:hidden;background:#eec8d8;position:relative;}
#ttl .tt-cover img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;opacity:0;transition:opacity .4s;}
 
/* NEWバッジ */
#ttl .tt-new{
  position:absolute;top:6px;right:6px;
  background:var(--new);color:#fff;
  font-size:.58rem;font-weight:900;
  padding:2px 5px;border-radius:2px;letter-spacing:.06em;
}
 
/* ジャンルバッジ */
#ttl .tt-gbadges{
  position:absolute;bottom:5px;left:5px;
  display:flex;gap:3px;flex-wrap:wrap;max-width:92%;
}
#ttl .tt-gbadge{
  font-size:.54rem;padding:2px 5px;border-radius:2px;
  font-weight:900;color:rgba(255,255,255,.95);
  white-space:nowrap;backdrop-filter:blur(3px);
}
#ttl .tt-gb-tentacle {background:rgba(10,80,20,.88);}
#ttl .tt-gb-ryojoku  {background:rgba(100,10,10,.88);}
#ttl .tt-gb-chokyo   {background:rgba(60,10,60,.88);}
#ttl .tt-gb-mahou    {background:rgba(160,20,140,.85);}
#ttl .tt-gb-akuochi  {background:rgba(40,0,80,.88);}
#ttl .tt-gb-isekai   {background:rgba(0,60,100,.88);}
#ttl .tt-gb-harami   {background:rgba(140,60,0,.88);}
#ttl .tt-gb-rpg      {background:rgba(20,60,160,.85);}
#ttl .tt-gb-action   {background:rgba(140,30,0,.85);}
#ttl .tt-gb-adv      {background:rgba(0,60,120,.85);}
#ttl .tt-gb-sim      {background:rgba(60,30,120,.85);}
#ttl .tt-gb-fantasy  {background:rgba(80,40,0,.85);}
#ttl .tt-gb-ntr      {background:rgba(30,30,30,.90);border:1px solid rgba(255,255,255,.12);}
#ttl .tt-gb-novel    {background:rgba(50,50,60,.88);}
#ttl .tt-gb-3dcg     {background:rgba(0,80,120,.85);}
 
/* カード情報 */
#ttl .tt-cinfo{padding:7px 8px 8px;background:#fff8fb;border-top:1.5px solid rgba(140,40,80,.30);}
#ttl .tt-ctitle{font-size:.82rem;font-weight:700;line-height:1.4;color:var(--txt);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em;margin-bottom:3px;}
#ttl .tt-cmeta{display:flex;align-items:center;gap:4px;font-size:.60rem;margin-bottom:2px;}
#ttl .tt-brand{color:var(--muted);font-weight:700;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#ttl .tt-score{font-weight:900;font-size:.72rem;color:var(--s5);font-family:'Noto Serif JP',serif;}
#ttl .tt-cprice{font-size:.64rem;font-weight:700;color:#c00030;}
 
/* FOOTER */
#ttl .tt-footer{padding:8px 18px;border-top:2px solid rgba(140,40,80,.30);display:flex;align-items:center;justify-content:space-between;background:#ffffff;}
#ttl .tt-info{font-size:.70rem;color:var(--muted);font-weight:700;letter-spacing:.04em;}
 
/* TOOLTIP (EEAT拡張) */
#ttl-tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:#fff;border:1px solid rgba(160,40,80,.20);
  border-radius:8px;width:240px;padding:13px 15px;
  font-size:.72rem;line-height:1.6;
  box-shadow:0 8px 28px rgba(100,20,40,.18);
  opacity:0;transition:opacity .12s;
}
#ttl-tip.show{opacity:1;}
#ttl-tip .tp-title{font-family:'Noto Serif JP',serif;font-weight:900;font-size:.86rem;color:#1a1020;margin-bottom:5px;line-height:1.3;}
#ttl-tip .tp-row{color:#6a3050;margin:2px 0;font-size:.68rem;}
#ttl-tip .tp-row b{color:#c00030;}
#ttl-tip .tp-axes{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:8px;}
#ttl-tip .tp-axis{background:#f8f0f4;border:1px solid rgba(160,40,80,.12);border-radius:3px;padding:4px 6px;}
#ttl-tip .tp-axis-name{font-size:.58rem;color:var(--muted);font-weight:900;letter-spacing:.04em;}
#ttl-tip .tp-axis-bar{height:3px;background:#eed8e4;border-radius:2px;margin:3px 0;overflow:hidden;}
#ttl-tip .tp-axis-fill{height:100%;border-radius:2px;}
#ttl-tip .tp-axis-val{font-size:.62rem;font-weight:900;}
#ttl-tip .tp-desc{color:#3a1020;margin-top:6px;line-height:1.5;font-size:.68rem;}
#ttl-tip .tp-comment{
  margin-top:8px;padding:7px 8px;
  background:#f8f0f4;border-radius:4px;
  border-left:3px solid #c00040;
  font-size:.66rem;color:#2a1020;line-height:1.5;
  font-style:italic;
}
#ttl-tip .tp-comment::before{content:'💬 ';font-style:normal;}
#ttl-tip .tp-cta{margin-top:7px;padding-top:5px;border-top:1px solid rgba(20,60,20,.10);color:#c00030;font-size:.64rem;font-weight:700;letter-spacing:.04em;}
 
/* ── RESPONSIVE ──────────────────────────── */
 
/* タブレット横 〜 768px */
@media(max-width:768px){
  #ttl .tt-grid{grid-template-columns:repeat(3,1fr);gap:9px;padding:10px 12px 12px;}
  #ttl .tt-criteria-axes{grid-template-columns:repeat(2,1fr);}
  #ttl .tt-tabs{display:flex !important;flex-wrap:nowrap !important;gap:4px !important;}
  #ttl .tt-tab{padding:7px 2px !important;font-size:.72rem !important; !important}
  #ttl .tt-hd{padding:14px 16px 12px;}
  #ttl .tt-ttl{font-size:.95rem;}
}
 
/* スマホ 〜 600px */
@media(max-width:600px){
  #ttl .tt-grid{grid-template-columns:repeat(2,1fr);gap:7px;padding:8px 10px 10px;}
  #ttl .tt-criteria-axes{grid-template-columns:repeat(2,1fr);gap:6px;}
  #ttl .tt-tabs{display:flex !important;flex-wrap:nowrap !important;gap:4px !important;}
  #ttl .tt-tab{padding:6px 2px !important;font-size:.66rem !important; !important}
  #ttl .tt-chip{font-size:.70rem;padding:3px 9px;}
  #ttl .tt-flabel{min-width:36px;font-size:.62rem;padding:2px 5px;}
  #ttl .tt-hd{padding:12px 14px 10px;gap:7px;}
  #ttl .tt-ttl{font-size:.88rem;}
  #ttl .tt-sub{display:none;}
  #ttl .tt-rank-hd{padding:9px 12px;}
  #ttl .tt-rank-label{font-size:.66rem;padding:2px 8px;}
  #ttl .tt-rank-desc{font-size:.70rem;}
  #ttl .tt-rank-cnt{font-size:.62rem;padding:1px 7px;}
  #ttl .tt-author{padding:8px 12px;gap:7px;}
  #ttl .tt-author-name{font-size:.70rem;}
  #ttl .tt-author-decl{font-size:.62rem;}
  #ttl .tt-updated{display:none;}
  #ttl .tt-criteria{padding:10px 12px;}
  #ttl .tt-axis-name{font-size:.60rem;}
  #ttl .tt-axis-score{font-size:.78rem;}
  #ttl .tt-axis-desc{font-size:.54rem;}
  #ttl .tt-fbar{padding:10px 12px;}
  #ttl .tt-ctitle{font-size:.74rem;}
  #ttl .tt-cmeta{font-size:.54rem;}
  #ttl .tt-cprice{font-size:.58rem;}
  #ttl .tt-score{font-size:.65rem;}
}
 
/* 極小スマホ 〜 375px */
@media(max-width:375px){
  #ttl .tt-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:6px 8px 8px;}
  #ttl .tt-tab{padding:5px 2px !important;font-size:.62rem !important; !important}
  #ttl .tt-chip{font-size:.64rem;padding:3px 8px;}
  #ttl .tt-ttl{font-size:.82rem;}
  #ttl .tt-rank-label{font-size:.60rem;padding:2px 6px;}
  #ttl .tt-rank-desc{font-size:.64rem;}
}
@keyframes tt-rip{to{transform:translate(-50%,-50%) scale(4);opacity:0;}}
 
/* アクションボタン（すべて表示・フィルター解除） */
#ttl .tt-frow-actions{align-items:center;}
#ttl .tt-action-btns{
  display:flex;gap:8px;margin-left:auto;
}
#ttl .tt-btn-show,
#ttl .tt-btn-clear{
  font-size:.78rem;font-weight:700;
  padding:6px 14px;border-radius:20px;
  cursor:pointer;transition:all .13s;
  white-space:nowrap;letter-spacing:.02em;
}
#ttl .tt-btn-show{
  background:#fff;
  border:1.5px solid #c00030;
  color:#c00030;
}
#ttl .tt-btn-show:hover{background:#fff0f4;}
#ttl .tt-btn-clear{
  background:#fff;
  border:1.5px solid rgba(140,40,80,.35);
  color:#6a3050;
}
#ttl .tt-btn-clear:hover{border-color:#c00030;color:#c00030;background:#fff0f4;}
 
/* ── WordPress テーマ干渉対策 ──────────────── */
#ttl .tt-tabs{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;}
#ttl,#ttl *{box-sizing:border-box;}
#ttl .tt-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  width:100% !important;
  max-width:100% !important;
}
#ttl .tt-card{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  float:none !important;
  margin:0 !important;
}
#ttl .tt-cover{
  display:block !important;
  width:100% !important;
}
#ttl .tt-cover img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
}
#ttl .tt-cinfo{
  display:block !important;
  width:100% !important;
}
#ttl .tt-gbadges{
  display:flex !important;
}
@media(max-width:768px){
  #ttl .tt-grid{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:600px){
  #ttl .tt-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:375px){
  #ttl .tt-grid{grid-template-columns:repeat(2,1fr) !important;}
}