/* =========================================================
   にんき ランキング（2026-11-09）— js/rank.js と index.html の #ranking
   クリームの ページの 中で、ここだけ 黄色の 帯。表彰台（2位・1位・3位）＋ 王冠
   ========================================================= */
.rank-sec{--wc:var(--yellow);background:var(--yellow);overflow:hidden;padding-bottom:88px}
.rank-sec[hidden]{display:none!important}
.rank-sec .wave-top{top:-39px}
/* 大きな 星を 角から はみ出させて */
.rank-sec::before,.rank-sec::after{content:"";position:absolute;pointer-events:none;background:#fff;opacity:.38;
  clip-path:polygon(50% 0,61.8% 35.5%,100% 38.2%,69.1% 61.8%,80.9% 100%,50% 76.4%,19.1% 100%,30.9% 61.8%,0 38.2%,38.2% 35.5%)}
.rank-sec::before{width:clamp(220px,30vw,380px);aspect-ratio:1;left:-90px;top:30px;transform:rotate(-14deg)}
.rank-sec::after{width:clamp(180px,24vw,300px);aspect-ratio:1;right:-70px;bottom:-60px;transform:rotate(18deg)}
.rank-sec .wrap{position:relative;z-index:1}
.rank-sec .sec-en{color:var(--pink)}
.rank-sec .sec-sub{color:var(--ink)}
.rk-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- タブ ---- */
.rank-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-8px 0 30px}
.rank-tab{min-height:44px;padding:0 20px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);
  font:inherit;font-weight:900;font-size:15px;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 0 var(--ink);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .08s,background .2s,color .2s}
.rank-tab[hidden]{display:none}
.rank-tab:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.rank-tab[aria-selected="true"]{background:var(--ink);color:#fff}
.rank-tab:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.rank-note{margin:30px 0 0;text-align:center;font-weight:800;font-size:13px;color:var(--ink2)}

.podium,.rank-more{list-style:none;margin:0;padding:0}
.rank-sec a{color:inherit;text-decoration:none}

/* ---- 表彰台 ---- */
.podium{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);grid-template-areas:"second first third";
  align-items:end;gap:0 clamp(10px,2.4vw,28px);max-width:900px;margin:0 auto}
.pd--1{grid-area:first;--m1:#fff6c4;--m2:#ffc928;--m3:#f29b12;--step:var(--pink);--sh:150px}
.pd--2{grid-area:second;--m1:#ffffff;--m2:#d9dfe7;--m3:#9aa6b5;--step:var(--blue);--sh:104px}
.pd--3{grid-area:third;--m1:#ffe7cf;--m2:#eba066;--m3:#b5682f;--step:var(--green);--sh:74px}
.pd-link{display:flex;flex-direction:column;align-items:center}
.pd-link:focus-visible{outline:3px solid var(--pink);outline-offset:6px;border-radius:24px}
.pd-crown{display:block;width:clamp(48px,7vw,70px);margin-bottom:-4px;filter:drop-shadow(0 3px 0 rgba(38,50,74,.25))}
.pd--1 .pd-crown{width:clamp(62px,9.5vw,96px)}
.rk-crown{display:block;width:100%;height:auto;overflow:visible}
.pd-card{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;background:#fff;border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 6px 0 var(--ink);overflow:hidden;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.pd-link:hover .pd-card{transform:translateY(-5px) rotate(-1deg)}
.pd-cover{position:relative;display:block;aspect-ratio:20/13;background:var(--c1);border-bottom:3px solid var(--ink)}
.pd-cover img{display:block;width:100%;height:100%;object-fit:cover}
.pd-name{display:block;padding:9px 10px 11px;text-align:center;font-weight:900;font-size:clamp(13px,1.6vw,18px);line-height:1.35;
  word-break:keep-all;overflow-wrap:anywhere;background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 22%,#fff),#fff)}
.pd--1 .pd-name{font-size:clamp(15px,2vw,22px)}
.pd-step{display:flex;align-items:flex-start;justify-content:center;gap:2px;width:calc(100% + 16px);height:var(--sh);margin-top:14px;padding-top:12px;
  background:var(--step);border:3px solid var(--ink);border-radius:16px 16px 0 0;border-bottom:0;color:#fff;
  box-shadow:inset 0 -14px 0 rgba(38,50,74,.12);transform-origin:50% 100%}
.pd-step b{font-family:var(--fe);font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1;text-shadow:0 3px 0 rgba(38,50,74,.35)}
.pd-step small{font-family:var(--fe);font-weight:700;font-size:clamp(13px,1.7vw,20px);margin-top:1.1em;opacity:.9}
.pd--1 .pd-step b{font-size:clamp(44px,6.4vw,76px)}
/* 表彰台の 下に ゆかの 線 */
/* 両はしの台（幅を8pxずつはみ出させている）より、ゆかを広くして角丸で台が欠けないように */
.podium::after{content:"";grid-column:1/-1;height:10px;margin:0 -22px;background:var(--ink);border-radius:6px}

/* ---- のぼった・さがった・NEW ---- */
.rk-move{position:absolute;right:8px;top:8px;z-index:1;font-family:var(--fe);font-weight:700;font-size:14px;letter-spacing:.04em;line-height:1.3;
  color:#fff;border:3px solid var(--ink);border-radius:999px;padding:1px 10px;box-shadow:0 3px 0 var(--ink);transform:rotate(6deg)}
.rk-move.is-up{background:#ff4a3d}
.rk-move.is-down{background:var(--blue)}
.rk-move.is-new{background:var(--pink)}

/* ---- 4位から ---- */
.rank-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:900px;margin:34px auto 0}
.rank-more[hidden]{display:none}
.rm-link{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;background:#fff;border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 var(--ink);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.rm-link:hover{transform:translateY(-3px)}
.rm-link:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.rm-no{flex:none;display:flex;align-items:baseline;justify-content:center;gap:1px;width:48px;height:48px;padding-top:6px;border-radius:50%;background:var(--ink);color:#fff}
.rm-no b{font-family:var(--fe);font-weight:700;font-size:22px;line-height:1.3}
.rm-no small{font-family:var(--fe);font-weight:700;font-size:10px}
.rm-cover{flex:none;width:76px;height:auto;aspect-ratio:20/13;object-fit:cover;border-radius:10px;border:2px solid var(--ink);background:var(--c1)}
.rm-name{flex:1;min-width:0;font-weight:900;font-size:14px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.rm-link .rk-move{position:static;flex:none;font-size:12px;padding:0 8px;transform:none;box-shadow:none;border-width:2px}

/* ---- 見えたときの 動き ---- */
.pd-card,.pd-crown{opacity:0;transform:translateY(-26px) scale(.9)}
.pd-step{transform:scaleY(0)}
.rm{opacity:0;transform:translateY(16px)}
.rank-body.is-play .pd-step{transform:none;transition:transform .55s cubic-bezier(.3,1.35,.5,1) var(--d)}
.rank-body.is-play .pd-card{opacity:1;transform:none;transition:opacity .3s var(--d),transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--d) + .25s)}
.rank-body.is-play .pd-crown{opacity:1;transform:none;transition:opacity .3s calc(var(--d) + .45s),transform .7s cubic-bezier(.3,1.7,.5,1) calc(var(--d) + .45s)}
.rank-body.is-play .pd--1 .pd-crown{animation:rk-crown 2.8s ease-in-out 1.6s infinite}
@keyframes rk-crown{0%,100%{transform:rotate(0)}8%{transform:rotate(-9deg) translateY(-3px)}16%{transform:rotate(8deg)}24%{transform:rotate(0)}}
.rank-body.is-play .rm{opacity:1;transform:none;transition:opacity .4s var(--d),transform .5s cubic-bezier(.3,1.4,.5,1) var(--d)}
@media (prefers-reduced-motion:reduce){
  .pd-card,.pd-crown,.pd-step,.rm{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* ---- スマホ ---- */
@media (max-width:640px){
  .rank-sec{padding-bottom:64px}
  .rank-tab{padding:0 14px;font-size:14px}
  .podium{gap:0 8px}
  .pd--1{--sh:96px}.pd--2{--sh:66px}.pd--3{--sh:46px}
  .pd-card{border-radius:16px;box-shadow:0 4px 0 var(--ink)}
  .pd-name{padding:6px 5px 8px;font-size:11.5px}
  .pd--1 .pd-name{font-size:13px}
  .pd-step{width:calc(100% + 8px);margin-top:10px;padding-top:6px;border-radius:12px 12px 0 0}
  .pd-step b{font-size:30px}.pd--1 .pd-step b{font-size:40px}
  .pd-step small{font-size:11px}
  .podium::after{margin:0 -12px}
  .rk-move{right:4px;top:4px;font-size:11px;padding:0 6px;border-width:2px}
  .rank-more{grid-template-columns:1fr;gap:12px}
}
@media (min-width:641px) and (max-width:900px){.rank-more{grid-template-columns:1fr 1fr}}