/* ============================================================
   IP CROSS — カテゴリTOP 共通スタイル
   対象: category-vtuber / anime / comic / character / game .html
   テーマ色は <body class="t-◯◯"> で切り替え（--cat 系変数）
   ============================================================ */

/* ---------- カテゴリテーマ（index.html のカテゴリカードに準拠） ---------- */
/* --cat-img はヒーローの背景写真を廃止したため現在は未使用（将来の復帰用に定義のみ残す） */
.t-vtuber{
  --cat:#e01a83; --cat-dark:#a5116a; --cat-soft:#fdeaf4; --cat-line:#f6c8e0;
  --cat-ov1:rgba(230,25,130,.60); --cat-ov2:rgba(140,20,168,.58);
  --cat-img:url(../assets/img/cat_vtuber_bg.jpg);
  --cat-vivid:#e61982;
}
.t-youtuber{
  --cat:#e0212b; --cat-dark:#a5121a; --cat-soft:#fdeced; --cat-line:#f6c8cb;
  --cat-ov1:rgba(240,66,66,.58); --cat-ov2:rgba(200,20,28,.60);
  --cat-img:url(../assets/img/cat_youtuber_bg.jpg);
  --cat-vivid:#f04242;
}
.t-anime{
  --cat:#1877e4; --cat-dark:#124f9e; --cat-soft:#eaf2fd; --cat-line:#c9daf6;
  --cat-ov1:rgba(24,140,240,.60); --cat-ov2:rgba(23,74,200,.58);
  --cat-img:url(../assets/img/cat_anime_bg.jpg);
  --cat-vivid:#188cf0;
}
.t-comic{
  --cat:#469e1f; --cat-dark:#2f6f14; --cat-soft:#eff8e9; --cat-line:#cdeac2;
  --cat-ov1:rgba(110,190,44,.58); --cat-ov2:rgba(40,130,24,.60);
  --cat-img:url(../assets/img/cat_comic_bg.jpg);
  --cat-vivid:#6ebe2c;
}
.t-character{
  --cat:#7c3aed; --cat-dark:#5b21b6; --cat-soft:#f4efff; --cat-line:#ddcffa;
  --cat-ov1:rgba(150,90,240,.58); --cat-ov2:rgba(95,35,180,.60);
  --cat-img:url(../assets/img/cat_character_bg.jpg);
  --cat-vivid:#965af0;
}
.t-game{
  --cat:#ee7a12; --cat-dark:#b1550a; --cat-soft:#fdf3e7; --cat-line:#f6ddc0;
  --cat-ov1:rgba(247,164,26,.58); --cat-ov2:rgba(230,95,12,.60);
  --cat-img:url(../assets/img/cat_game_bg.jpg);
  --cat-vivid:#f7a41a;
}

/* ヘッダーのカテゴリ別 hover / 現在地カラーは style.css で全ページ共通定義 */

/* ---------- カテゴリヒーロー ---------- */
.cat-hero{
  position:relative;color:#fff;
  /* 背景写真は使わず、カテゴリのイメージカラーのグラデーションのみで塗る */
  background-image:linear-gradient(118deg,var(--cat-dark) 0%,var(--cat) 58%,var(--cat-vivid) 100%);
  background-repeat:no-repeat;
}
.cat-hero .hero-inner{position:relative;z-index:2;padding:20px 0 clamp(44px,3.4vw,66px);}
.cat-hero .breadcrumb-text,.cat-hero .breadcrumb-text a{color:rgba(255,255,255,.85);}
.cat-hero .breadcrumb-text a:hover{color:#fff;text-decoration:underline;}
.cat-hero .breadcrumb-text .cur{color:#fff;}
.cat-hero .breadcrumb-text .sep{color:rgba(255,255,255,.55);}
.ch-eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(26px,2.4vw,44px);
  font-size:12.5px;font-weight:800;letter-spacing:.24em;
}
.ch-eyebrow::before{content:"";width:34px;height:2px;background:#fff;opacity:.85;}
.cat-hero h1{
  margin-top:16px;
  font-size:clamp(36px,3.9vw,74px);font-weight:900;letter-spacing:.02em;line-height:1.1;
  text-shadow:0 2px 16px rgba(0,0,0,.26);
}
.ch-lead{
  font-size:clamp(17px,1.45vw,28px);font-weight:800;letter-spacing:.04em;
  margin-top:22px;text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.ch-body{
  font-size:clamp(13.5px,.92vw,16.5px);font-weight:600;line-height:2;margin-top:14px;
  max-width:46em;text-shadow:0 1px 8px rgba(0,0,0,.34);
}
.ch-search{
  display:flex;align-items:center;gap:12px;max-width:640px;height:60px;
  background:#fff;border-radius:40px;padding:0 8px 0 24px;margin-top:28px;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
}
.ch-search .mag{width:19px;height:19px;flex:none;fill:none;stroke:#5b6273;stroke-width:2.2;stroke-linecap:round;}
.ch-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--font);font-size:15px;color:var(--ink);}
.ch-search button{
  flex:none;height:44px;padding:0 26px;border:0;border-radius:30px;cursor:pointer;
  background:var(--cat);color:#fff;font-family:var(--font);font-size:14px;font-weight:800;
  transition:opacity .2s;
}
.ch-search button:hover{opacity:.86;}

/* ---------- セクション共通 ---------- */
.ct-section{padding:clamp(52px,4.2vw,84px) 0;}
.ct-section.band{background:var(--bg-gray);}
.ct-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px;}
.ct-head h2{font-size:clamp(24px,1.9vw,36px);font-weight:800;letter-spacing:.03em;line-height:1.35;}
.ct-head h2 .em{color:var(--cat);}
.ct-head .sub{font-size:14.5px;font-weight:600;color:#5b6273;margin-top:12px;line-height:1.85;}
.ct-link{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-size:14px;font-weight:800;color:var(--cat);
  background:#fff;border:1px solid var(--cat-line);border-radius:26px;padding:12px 22px;
  transition:background .2s;
}
.ct-link:hover{background:var(--cat-soft);}
.ct-note{font-size:12.5px;color:#8a93a3;margin-top:16px;}
.ct-center{display:flex;justify-content:center;margin-top:38px;}
.ct-btn-cat{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:62px;padding:0 40px;border-radius:500px;background:var(--cat);color:#fff;
  font-size:17px;font-weight:800;letter-spacing:.02em;transition:opacity .2s;
}
.ct-btn-cat:hover{opacity:.88;}

/* ---------- サブジャンル チップ ---------- */
.ct-chips{display:flex;flex-wrap:wrap;gap:11px;}
.ct-chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:#26282b;
  background:#fff;border:1px solid #d7dbe6;border-radius:26px;padding:11px 21px;
  transition:border-color .15s,color .15s,background .15s;
}
.ct-chip:hover{border-color:var(--cat);color:var(--cat);background:var(--cat-soft);}
.ct-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--cat);flex:none;opacity:.75;}

/* ---------- カテゴリ内ランキング ---------- */
.ct-rank{background:#fff;border:1px solid #ececf2;border-radius:18px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.04);}
.ct-row{
  display:grid;grid-template-columns:56px 138px minmax(0,1fr) auto 16px;gap:22px;
  align-items:center;padding:16px 26px;border-top:1px solid #f0f2f6;transition:background .15s;
}
.ct-row:first-child{border-top:0;}
.ct-row:hover{background:#fafbfd;}
.ct-no{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:50%;font-size:19px;font-weight:800;
  background:#f1f3f8;color:#7b8494;
}
.ct-no.n1{background:linear-gradient(150deg,#ffd45e,#e09a10);color:#fff;}
.ct-no.n2{background:linear-gradient(150deg,#d9dee5,#96a0ac);color:#fff;}
.ct-no.n3{background:linear-gradient(150deg,#e0a26b,#a05a2c);color:#fff;}
.ct-row .thumb{width:100%;border-radius:10px;}
.ct-row .body{min-width:0;}
.ct-row .body b{display:block;font-size:clamp(16px,1.15vw,21px);font-weight:800;color:#1c2340;overflow-wrap:anywhere;}
.ct-row .body small{display:block;font-size:12.5px;color:#7b8494;margin-top:5px;}
.ct-row .body .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.ct-row .score{text-align:right;min-width:86px;}
.ct-row .score .val{display:block;font-size:clamp(20px,1.5vw,28px);font-weight:800;color:var(--cat-dark);line-height:1.1;}
.ct-row .score small{display:block;font-size:11.5px;font-weight:700;color:#8089a0;margin-top:3px;}
.ct-row .score .delta{display:block;font-size:14px;font-weight:800;color:#e8382d;margin-top:6px;}
.ct-row .score .delta.flat{color:#7a8189;}
.ct-row .score .delta.down{color:#1a6fe0;}
.ct-row .arr{color:#b6bcc7;font-size:20px;}

/* ---------- ランキング2カラム（人気TOP10＋ネクストスター） ---------- */
.ct-rank2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr auto;grid-auto-flow:column;column-gap:26px;}
.ct-rank2 .ct-head{grid-row:1;margin-bottom:24px;}
.ct-rank2 .ct-head h2{font-size:clamp(21px,1.45vw,28px);}
.ct-rank2 .ct-head .sub{margin-top:8px;}
.ct-rank2 .ct-rank{grid-row:2;}
.ct-rank2 .ct-more-col{grid-row:3;}
.ct-rank2 .ct-row{grid-template-columns:44px 112px minmax(0,1fr) auto 12px;gap:16px;padding:14px 18px;}
.ct-rank2 .ct-no{width:38px;height:38px;font-size:17px;}
.ct-rank-next .score .val{color:#1a6fe0;}
.ct-rank-next .score .delta{color:#454c60;}
/* 11位以降は初期状態で非表示（「さらに表示」で開く） */
.ct-rank .ct-row.is-hidden{display:none;}
/* ---------- 「さらに表示」ボタン ---------- */
.ct-more{display:flex;justify-content:center;margin-top:24px;}
.ct-more-btn{
  appearance:none;background:#fff;border:1px solid #d7dbe6;border-radius:30px;
  padding:14px 60px;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1;color:#4b5468;
  cursor:pointer;transition:border-color .2s,color .2s;
}
.ct-more-btn:hover{border-color:var(--cat);color:var(--cat);}
/* 展開しきったら非表示（.ct-more-col / .ct-more-all の display より優先させる） */
.ct-more.is-done{display:none;}
/* PC（2カラム表示時）は共通ボタンのみ、Tablet/SP はリストごとのボタンのみ表示 */
.ct-more-col{display:none;}
/* PC（2カラム表示時）のみ、ランキングカード上下に余白を付ける */
@media(min-width:1101px){
  .ct-rank2 .ct-rank{padding-top:14px;padding-bottom:14px;}
}
@media(max-width:1500px){
  .ct-rank2 .ct-row .body .tags{display:none;}
}
@media(max-width:1100px){
  .ct-rank2{display:block;}
  .ct-rank2 .ct-rank{margin-bottom:0;}
  .ct-rank2 > .ct-head{margin-top:44px;}
  .ct-rank2 > .ct-head:first-child{margin-top:0;}
  .ct-more-col{display:flex;}
  .ct-more-all{display:none;}
}

/* ---------- IPカードグリッド（ips.html と共通の見た目） ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 16px;}
.ip-card{
  position:relative;background:#fff;border:1px solid #ececf2;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.ip-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.1);}
.ip-card>.ipimg{width:100%;--ipimg-pad:6px;}
/* サムネイル上のお気に入りボタンは一旦非表示（display:flex に戻せば復活） */
.ipc-fav{
  display:none;
  position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);align-items:center;justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.15);z-index:2;cursor:pointer;transition:transform .15s;
}
.ipc-fav:hover{transform:scale(1.12);}
.ipc-fav svg{width:19px;height:19px;fill:#8b93a7;transition:fill .15s;}
.ipc-fav.on svg{fill:#e8256b;}
.ipc-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;min-width:0;}
.ipc-body b{font-size:clamp(15px,1.1vw,20px);font-weight:800;color:#1c2340;overflow-wrap:anywhere;}
.ipc-body small{font-size:12px;color:#7b8494;margin-top:6px;}
.ipc-body p{font-size:13px;color:#333;margin-top:8px;line-height:1.7;}
.ipc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;}
.tag{font-size:11.5px;font-weight:700;border-radius:14px;padding:4px 12px;border:1px solid transparent;white-space:nowrap;}
.tag-cat{background:var(--cat-soft);color:var(--cat-dark);border-color:var(--cat-line);}
.tag-sub{background:#f1f3f8;color:#4b5468;border-color:#e2e5ea;}
/* カード内のタグは長文でも折り返す（nowrapだとカード端で切れる） */
.ipc-tags .tag{white-space:normal;max-width:100%;overflow-wrap:anywhere;line-height:1.45;}

/* ---------- できること（活用アイデア） ---------- */
.ct-ideas{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.ct-idea{
  background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px 30px 30px;
  box-shadow:0 4px 24px rgba(0,0,0,.05);display:flex;flex-direction:column;
}
.ct-idea .ic{
  width:clamp(58px,4vw,72px);height:clamp(58px,4vw,72px);border-radius:50%;background:var(--cat);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:22px;
}
.ct-idea .ic svg{width:50%;height:50%;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ct-idea h3{font-size:clamp(17px,1.25vw,21px);font-weight:800;color:var(--cat-dark);margin-bottom:12px;letter-spacing:.02em;}
.ct-idea p{font-size:14px;color:#444;line-height:1.9;}

/* ---------- 選ばれる理由 ---------- */
.ct-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
.ct-point{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;display:flex;gap:18px;}
.ct-point .n{
  flex:none;width:42px;height:42px;border-radius:12px;background:var(--cat-soft);color:var(--cat-dark);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
}
.ct-point h3{font-size:17px;font-weight:800;margin-bottom:8px;letter-spacing:.02em;}
.ct-point p{font-size:13.5px;color:#555;line-height:1.85;}

/* ---------- 活用事例 ---------- */
.ct-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ct-case{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 28px;box-shadow:0 4px 24px rgba(0,0,0,.05);}
.ct-case .tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.ct-case .tagrow span{font-size:12px;font-weight:800;border-radius:20px;padding:4px 13px;background:var(--cat-soft);color:var(--cat-dark);}
.ct-case .tagrow span.b{background:#eef3fd;color:#1c3fa3;}
.ct-case h3{font-size:18px;font-weight:800;line-height:1.6;margin-bottom:10px;}
.ct-case p{font-size:14px;color:#444;line-height:1.85;}
.ct-case .result{margin-top:14px;padding-top:12px;border-top:1px dashed #e0e3e9;font-size:13.5px;font-weight:800;color:var(--cat-dark);}

/* ---------- 他のカテゴリ（TOPページのカテゴリカードと同じ表示・5枚） ---------- */
.ct-others{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;}
.ct-other{
  position:relative;border-radius:24px;overflow:hidden;
  min-height:clamp(300px,22.5vw,440px);padding:26px 24px 24px;
  display:flex;flex-direction:column;color:#fff;
  background-position:center top;background-size:cover;
  transition:transform .25s,box-shadow .25s;
}
.ct-other:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.18);}
.ct-other b{font-size:clamp(22px,1.8vw,34px);font-weight:800;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.18);}
.ct-other .cat-arr{
  margin-top:auto;width:clamp(44px,3vw,56px);height:clamp(44px,3vw,56px);border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;flex:none;
}
.ct-other .cat-arr svg{width:40%;height:40%;}
.o-vtuber{background-image:linear-gradient(180deg,rgba(20,0,20,.30),rgba(20,0,20,0) 42%),linear-gradient(155deg,rgba(230,25,130,.42),rgba(158,22,168,.34)),url(../assets/img/cat_vtuber_bg.jpg);}
.o-anime{background-image:linear-gradient(180deg,rgba(0,10,30,.30),rgba(0,10,30,0) 42%),linear-gradient(155deg,rgba(24,178,240,.42),rgba(23,98,224,.34)),url(../assets/img/cat_anime_bg.jpg);}
.o-comic{background-image:linear-gradient(180deg,rgba(6,26,0,.30),rgba(6,26,0,0) 42%),linear-gradient(155deg,rgba(124,200,50,.42),rgba(56,150,28,.36)),url(../assets/img/cat_comic_bg.jpg);}
.o-character{background-image:linear-gradient(180deg,rgba(14,0,30,.30),rgba(14,0,30,0) 42%),linear-gradient(155deg,rgba(150,90,240,.42),rgba(95,35,180,.36)),url(../assets/img/cat_character_bg.jpg);}
.o-game{background-image:linear-gradient(180deg,rgba(30,14,0,.30),rgba(30,14,0,0) 42%),linear-gradient(155deg,rgba(247,164,26,.42),rgba(236,105,15,.36)),url(../assets/img/cat_game_bg.jpg);}
.o-youtuber{background-image:linear-gradient(180deg,rgba(26,0,4,.30),rgba(26,0,4,0) 42%),linear-gradient(155deg,rgba(240,66,66,.42),rgba(200,20,28,.36)),url(../assets/img/cat_youtuber_bg.jpg);}
.o-vtuber .cat-arr svg{stroke:#e01a83;}
.o-youtuber .cat-arr svg{stroke:#e0212b;}
.o-anime .cat-arr svg{stroke:#1877e4;}
.o-comic .cat-arr svg{stroke:#469e1f;}
.o-character .cat-arr svg{stroke:#7c3aed;}
.o-game .cat-arr svg{stroke:#ee7a12;}

/* ---------- FAQ（style.css の .faq-item をカテゴリ色に） ---------- */
.ct-faq .faq-item summary::after{color:var(--cat);}
.ct-faq .faq-item .ans b{color:var(--cat-dark);}

/* ---------- レスポンシブ ---------- */
@media(max-width:1400px){
  .ct-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:1200px){
  .ct-ideas{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1100px){
  .ct-others{grid-template-columns:repeat(2,1fr);}
  .ct-other{min-height:280px;}
}
@media(max-width:1000px){
  .ct-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ct-points,.ct-cases{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .ct-row{grid-template-columns:44px 108px minmax(0,1fr);gap:14px;padding:14px 14px;}
  .ct-no{width:36px;height:36px;font-size:16px;}
  .ct-row .score{grid-column:3;text-align:left;display:flex;align-items:baseline;gap:12px;min-width:0;}
  .ct-row .score small{display:none;}
  .ct-row .arr{display:none;}
  .ct-row .body .tags{display:none;}
  .ch-search{height:54px;padding-left:18px;}
  .ch-search button{padding:0 18px;}
}
@media(max-width:640px){
  .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;}
  .ct-ideas,.ct-others{grid-template-columns:1fr;}
  .cat-hero h1{font-size:clamp(30px,8.5vw,36px);}
  .ch-lead{font-size:15.5px;margin-top:14px;}
  .ch-body{font-size:13px;}
  .ch-search{height:48px;padding-left:16px;margin-top:20px;}
  .ch-search button{height:36px;padding:0 14px;font-size:12.5px;}
  .ct-head h2{font-size:21px;}
  .ct-head .sub{font-size:13px;margin-top:8px;}
  .ct-link{padding:9px 16px;font-size:12.5px;}
  .ct-row{grid-template-columns:34px 90px minmax(0,1fr);gap:10px;padding:12px 10px;}
  .ct-no{width:28px;height:28px;font-size:13.5px;}
  .ct-row .body b{font-size:14px;}
  .ct-row .body small{font-size:11px;}
  .ct-row .score .val{font-size:17px;}
  .ct-row .score .delta{font-size:12px;margin-top:2px;}
  .ct-rank2 .ct-row{grid-template-columns:34px 90px minmax(0,1fr);gap:10px;padding:12px 10px;}
  .ct-rank2 .ct-no{width:28px;height:28px;font-size:13.5px;}
  .ct-idea{padding:24px 20px;border-radius:20px;}
  .ct-btn-cat{height:52px;padding:0 26px;font-size:14.5px;}
  .ct-chip{font-size:12.5px;padding:9px 15px;}
}