/* 静的ページ(アイテム・カテゴリ一覧・ガチャ・ランキング)用 */
.page{max-width:var(--w);margin:0 auto;padding:20px}
.crumbs{font-size:12px;color:var(--faint);margin-bottom:14px}
.crumbs a{color:var(--sub)}

h1{font-family:var(--maru);font-weight:900;font-size:30px;line-height:1.2;margin:6px 0 10px}
h2{font-family:var(--maru);font-weight:900;font-size:19px;margin:38px 0 14px;
  display:flex;align-items:center;gap:12px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
.lead{color:var(--sub);font-size:13.5px;margin:0}
.lead strong{color:var(--ink);font-size:16px;font-family:var(--maru)}

/* ---- アイテム1件 ---- */
.item{display:flex;gap:30px;background:var(--card);border:1px solid var(--line);
  border-radius:26px;padding:30px;flex-wrap:wrap;margin-top:6px}
.item-img{flex:0 0 300px;aspect-ratio:1/1;position:relative;overflow:hidden;
  background:var(--tile);border-radius:20px}
.item-img img{position:absolute;inset:16px;width:calc(100% - 32px);
  height:calc(100% - 32px);object-fit:contain}
.item-body{flex:1 1 300px;min-width:0}
.item-body h1{margin:0 0 14px}
.wish{margin:0 0 16px;font-family:var(--maru);font-weight:900;font-size:40px;
  color:var(--wish);line-height:1.05;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wish small{width:100%;font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;
  color:var(--faint);font-weight:700;letter-spacing:.14em;line-height:1.4}
.wish b{display:flex;align-items:center;gap:9px;font-weight:900}
.wish b::before{content:"";width:28px;height:28px;flex:none;background:var(--wish-icon);
  -webkit-mask:var(--heart) center/contain no-repeat;
  mask:var(--heart) center/contain no-repeat}
.rank{font-size:13px;color:var(--sub);margin:0 0 18px;background:var(--tile);
  border-radius:14px;padding:12px 16px;line-height:1.8}
.rank b{color:var(--accent);font-family:var(--maru);font-size:18px;
  font-variant-numeric:tabular-nums}
.info{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;margin:0}
.info dt{color:var(--faint);font-weight:700;white-space:nowrap}
.info dd{margin:0}

.desc p{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:16px 18px;margin:0;font-size:14px;line-height:1.9}

.pager{display:flex;justify-content:space-between;gap:10px;margin:20px 0;font-size:13px}
.pager a{flex:0 1 48%;background:var(--card);border:1px solid var(--line2);
  border-radius:14px;padding:11px 15px;font-weight:700;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager a:last-child{text-align:right;margin-left:auto}

.more-link{font-size:13px;font-weight:700}
.back{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--faint);font-size:13px}

.page .grid{padding:0;margin:16px 0 0;max-width:none}

/* ---- ランキング ---- */
.rank-list{list-style:none;counter-reset:r;padding:0;margin:16px 0 0}
.rank-list li{counter-increment:r}
.rank-list a{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line2);border-radius:16px;padding:10px 18px;margin-bottom:8px;
  color:inherit;transition:transform .16s ease,border-color .16s ease}
.rank-list a:hover{border-color:var(--accent);transform:translateX(3px);color:inherit}
.rank-list a::before{content:counter(r);flex:0 0 36px;text-align:center;
  font-family:var(--maru);font-weight:900;color:var(--faint);font-size:17px;
  font-variant-numeric:tabular-nums}
.rank-list img{width:48px;height:48px;object-fit:contain;flex:0 0 48px;
  background:var(--tile);border-radius:12px}
/* flex-basis は 0。auto だと名前が縮まず、右端のウィッシュ数が画面外へ出る */
.rn{flex:1 1 0;font-size:14px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc{flex:0 0 auto;font-size:11px;color:var(--faint)}
.rw{flex:0 0 104px;text-align:right;font-family:var(--maru);font-weight:900;
  color:var(--wish);font-size:16px;font-variant-numeric:tabular-nums}

/* ---- 索引(カテゴリ・ガチャ) ----
   1行目: 画像 + 名前 + 件数   2行目: リリース日 / 平均 / 中央値 */
.idx{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:8px}
.idx li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  background:var(--card);border:1px solid var(--line2);border-radius:16px;
  padding:10px 14px;font-size:14px;
  transition:transform .16s ease,border-color .16s ease}
.idx li:hover{border-color:var(--accent);transform:translateY(-2px)}

/* flex-basis は 0。auto だと名前が長いときに縮まず、件数が次の行へ落ちる */
.idx-main{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;
  font-weight:700;color:var(--ink)}
.idx-main:hover{color:var(--accent)}
.idx-main img{width:44px;height:44px;flex:0 0 44px;object-fit:contain;
  background:var(--tile);border-radius:10px}
.idx-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-n{flex:0 0 auto;color:var(--faint);font-size:12px;
  font-family:var(--maru);font-weight:700;font-variant-numeric:tabular-nums}
/* 2行目は幅いっぱいに使う。左に余白を取ると、日付+平均+中央値が
   270pxの列に収まらず折り返してしまう。 */
.idx-s{flex:1 0 100%;font-size:11px;color:var(--faint);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx-s b{font-family:var(--maru);color:var(--sub);font-variant-numeric:tabular-nums}

/* ---- ウィッシュ数とは ---- */
.about{margin-top:40px;font-size:13px;color:var(--sub)}
.about p{background:var(--card);border:1px solid var(--line2);border-radius:18px;
  padding:16px 18px;margin:0 0 8px;line-height:1.9}

@media(max-width:760px){
  .page{padding:16px}
  h1{font-size:23px}
  .item{gap:18px;padding:18px;border-radius:20px}
  .item-img{flex:1 1 100%;max-width:260px;margin:0 auto}
  .item-img img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
  .wish{font-size:33px}
  .wish b::before{width:23px;height:23px}
  .rc{display:none}
  .rw{flex:0 0 82px;font-size:14px}
  .rank-list a{gap:10px;padding:9px 12px}
  .rank-list img{width:40px;height:40px;flex-basis:40px}
}

/* ---- 前回比 ---- */
.delta{font-family:var(--maru);font-weight:900;font-variant-numeric:tabular-nums}
.delta.up{color:var(--wish)}
.delta.down{color:#5b7fa6}
.delta.flat{color:var(--faint)}
.info .new-tag{background:var(--accent);color:var(--card);font-size:11px;
  font-weight:700;padding:2px 9px;border-radius:999px}
.rank-list .rw b{display:block;font-weight:900}
.rank-list .rw small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:10px;color:var(--faint);font-weight:400}
.rank-list .rw{flex-basis:118px}

/* ---- 平均・中央値 ---- */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0}
.stats span{background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:9px 16px;font-size:12px;color:var(--faint);display:flex;align-items:baseline;gap:7px}
.stats b{font-family:var(--maru);font-weight:900;font-size:19px;color:var(--wish);
  font-variant-numeric:tabular-nums}

/* ---- 並べ替え ---- */
.sorter{display:flex;align-items:center;gap:10px;margin:-4px 0 12px}
.sorter label{font-size:12px;color:var(--faint);font-weight:700}
.sorter select{font:inherit;font-size:13px;font-weight:700;border:none;
  background:var(--tile);border-radius:13px;padding:10px 14px;color:var(--ink);cursor:pointer}

/* ---- ランキングの2段組み ---- */
.rank-cols{display:grid;grid-template-columns:1fr;gap:0}
.rank-cols section:first-child h2{margin-top:26px}
@media(min-width:1040px){
  /* 画面が広いときは アイテム | ガチャ を横に並べる */
  .rank-cols{grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
  .rank-cols section{min-width:0}
  .rank-cols section:nth-child(2) h2:first-child{margin-top:26px}
}
/* 先頭のジャンプリンク(主にスマホ用) */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.jump a{font-size:12.5px;font-weight:700;color:var(--sub);background:var(--card);
  border:1px solid var(--line2);border-radius:999px;padding:8px 15px}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.rank-cols h2{scroll-margin-top:72px}
/* rank movement vs previous survey */
.mv{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;font-size:11px;
  font-weight:700;line-height:18px;vertical-align:1px;white-space:nowrap}
.mv.up{background:#fde8dc;color:#c8611f}
.mv.down{background:#e3eef3;color:#3b6f8f}
.mv.flat{background:#eee8dc;color:#8a7d66}
.mv.new{background:#1f6b63;color:#fff}
.trend .soon{background:var(--card);border:1px dashed var(--accent);border-radius:12px;
  padding:14px 16px;margin:8px 0 0;line-height:1.8}
/* trend chart */
.trend-svg{display:block;width:100%;max-width:640px;height:auto;background:var(--card);
  border:1px solid var(--line2);border-radius:14px;margin-top:8px}
.trend-svg .ax{stroke:var(--line2);stroke-width:1}
.trend-svg .ln{fill:none;stroke:#c8611f;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.trend-svg .area{fill:#c8611f;opacity:.08}
.trend-svg .pt{fill:#fff;stroke:#c8611f;stroke-width:3}
.trend-svg .v{font-size:15px;font-weight:700;fill:#c8611f;font-family:var(--maru)}
.trend-svg .d{font-size:12px;fill:var(--sub)}
.trend .note{font-size:13px;color:var(--sub);margin:8px 0 0}
/* favorites page */
.fav-note{background:#f3ece0;border-radius:12px;padding:10px 14px;margin:12px 0 4px;
  font-size:13px;line-height:1.7;color:var(--sub)}
.fav-note summary{cursor:pointer;color:var(--ink);font-weight:700;list-style:none}
.fav-note summary::-webkit-details-marker{display:none}
.fav-note summary::before{content:"i";display:inline-block;width:18px;height:18px;margin-right:7px;
  border-radius:50%;background:var(--sub);color:#fff;font:700 12px/18px Georgia,serif;text-align:center;vertical-align:1px}
.fav-note ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.fav-note li::before{content:"・"}
.fav-note p{margin:6px 0 0}
@media (max-width:760px){
  .fav-note{font-size:12px;padding:9px 12px}
  .fav-note ul{grid-template-columns:1fr}
}
.fav-empty{background:var(--card);border:1px dashed var(--line2);border-radius:12px;
  padding:24px;text-align:center;line-height:1.9;color:var(--sub)}
.fav-tools{margin:12px 0 0;font-size:14px}
.fav-list li{position:relative}
.fav-list a{padding-right:52px}
.fav-list .rw small.up{color:#c8611f}
.fav-list .rw small.down{color:#3b6f8f}
.fav-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border:0;border-radius:50%;background:#f3ece0;color:var(--sub);font-size:16px;cursor:pointer}
.fav-x:hover{background:#e2557a;color:#fff}
.badge-s{font-size:11px;color:var(--sub);font-weight:700}
.fav-io{margin-top:36px}
.fav-io h3{font-size:15px;margin:18px 0 4px}
.fav-io p{font-size:14px;margin:4px 0}
.fav-row{display:flex;gap:8px;margin:6px 0}
.fav-row input{flex:1 1 0;min-width:0;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;
  background:#fff;font-size:13px}
.fav-row button{flex:0 0 auto;padding:9px 14px;border:0;border-radius:10px;background:var(--accent);
  color:#fff;font-weight:700;font-size:13px;cursor:pointer}
/* favorites: let long names wrap (2 lines) instead of cutting them to a few characters */
.fav-list .rn{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45}
@media (max-width:760px){
  .fav-list a{padding-right:46px}
  .fav-list .rw{flex-basis:76px}
  .fav-list a::before{flex-basis:22px}
}
/* grid/flex children default to min-width:auto and grow to their content (508px on a 375px phone) */
.rank-cols>section{min-width:0}
.rank-list .mv{flex:0 0 auto;margin-left:-6px}
@media (max-width:760px){
  /* phones: wrap long names to 2 lines instead of cutting them to a few characters */
  .rank-list .rn{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-height:1.4;font-size:13px}
  .rank-list a::before{flex-basis:24px}
}
@media (max-width:760px){
  .rank-list .rw{flex:0 0 auto;min-width:60px}
  .rank-list .rw small{font-size:10px}
}