/* PRIME GEAR Ranking v1.3.6 */
.pg-ranking {
  --pg-ranking-accent:#B00000;
  --pg-ranking-tab-bg:#111;
  --pg-ranking-tab-text:#aaa;
  --pg-ranking-tab-active-text:#fff;
  --pg-ranking-article-indicator:#111;
  --pg-ranking-article-text:#777;
  --pg-ranking-article-active-text:#111;
  --pg-ranking-badge-bg:#fff;
  --pg-ranking-badge-text:#111;
  --pg-ranking-duration:340ms;
  --pg-ranking-step:34ms;
  width:100%;
}
.pg-ranking--speed-fast{--pg-ranking-duration:240ms;--pg-ranking-step:24ms}
.pg-ranking--speed-normal{--pg-ranking-duration:340ms;--pg-ranking-step:34ms}
.pg-ranking--speed-slow{--pg-ranking-duration:480ms;--pg-ranking-step:46ms}

.pg-ranking__tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch}
.pg-ranking__tab{position:relative;z-index:2;min-width:0;appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit;text-align:center;transition:color .22s ease,background .22s ease,border-color .22s ease}
.pg-ranking__tab:focus-visible{outline:2px solid var(--pg-ranking-accent);outline-offset:3px}
.pg-ranking__indicator{position:absolute;z-index:1;pointer-events:none;transform:translate3d(var(--pg-indicator-x,0px),0,0);width:var(--pg-indicator-w,0px);transition:transform .32s cubic-bezier(.22,.61,.36,1),width .32s cubic-bezier(.22,.61,.36,1)}

/* base spacing */
.pg-ranking--card .pg-ranking__tabs{gap:6px;margin-bottom:26px}
.pg-ranking--compact .pg-ranking__tabs{margin-bottom:14px}

/* Sliding Fill */
.pg-ranking--tab-fill .pg-ranking__tab{min-height:38px;padding:8px 12px;border:1px solid var(--pg-ranking-accent);background:var(--pg-ranking-tab-bg);color:var(--pg-ranking-tab-text)}
.pg-ranking--tab-fill .pg-ranking__tab.is-active{color:var(--pg-ranking-tab-active-text)}
.pg-ranking--tab-fill .pg-ranking__indicator{top:0;bottom:0;border:1px solid var(--pg-ranking-accent);background:var(--pg-ranking-accent);box-shadow:none}

/* Sliding Line */
.pg-ranking--tab-line .pg-ranking__tabs{border-bottom:1px solid #d8d8d8}
.pg-ranking--tab-line .pg-ranking__tab{min-height:42px;padding:9px 12px;border:0;background:transparent;color:var(--pg-ranking-article-text)}
.pg-ranking--tab-line .pg-ranking__tab.is-active{color:var(--pg-ranking-article-active-text);font-weight:600}
.pg-ranking--tab-line .pg-ranking__indicator{left:0;bottom:-1px;height:2px;background:var(--pg-ranking-article-indicator,var(--pg-ranking-accent))}

/* Glass */
.pg-ranking--tab-glass .pg-ranking__tabs{gap:6px;padding:4px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.pg-ranking--tab-glass .pg-ranking__tab{min-height:36px;padding:7px 10px;border:0;border-radius:10px;background:transparent;color:var(--pg-ranking-tab-text,var(--pg-ranking-article-text))}

.pg-ranking--tab-glass .pg-ranking__tab.is-active{color:var(--pg-ranking-tab-active-text,var(--pg-ranking-article-active-text))}

.pg-ranking--tab-glass .pg-ranking__indicator{top:4px;bottom:4px;border-radius:10px;background:color-mix(in srgb,var(--pg-ranking-accent) 88%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px rgba(0,0,0,.16)}

/* Minimal */
.pg-ranking--tab-minimal .pg-ranking__tabs{gap:8px}
.pg-ranking--tab-minimal .pg-ranking__tab{min-height:36px;padding:7px 8px;border:0;background:transparent;color:var(--pg-ranking-tab-text,var(--pg-ranking-article-text));opacity:.72}

.pg-ranking--tab-minimal .pg-ranking__tab.is-active{opacity:1;color:var(--pg-ranking-tab-active-text,var(--pg-ranking-article-active-text));font-weight:600}

.pg-ranking--tab-minimal .pg-ranking__indicator{left:0;bottom:1px;height:1px;background:var(--pg-ranking-accent)}

.pg-ranking__panels{position:relative}.pg-ranking__panel[hidden]{display:none!important}.pg-ranking__panel.is-leaving{animation:pgRankingPanelOut .14s ease both;pointer-events:none}
.pg-ranking__panel.is-entering .pg-ranking__item{animation-duration:var(--pg-ranking-duration);animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-fill-mode:both;animation-delay:0ms}
.pg-ranking--stagger .pg-ranking__panel.is-entering .pg-ranking__item{animation-delay:calc(var(--pg-rank-i,0) * var(--pg-ranking-step))}
@keyframes pgRankingPanelOut{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes pgRankingCardUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes pgRankingCardDown{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}}
@keyframes pgRankingCardLeft{from{opacity:0;transform:translate3d(16px,0,0)}to{opacity:1;transform:none}}
@keyframes pgRankingCardRight{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes pgRankingCardFade{from{opacity:0}to{opacity:1}}
.pg-ranking--anim-up .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardUp}.pg-ranking--anim-down .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardDown}.pg-ranking--anim-left .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardLeft}.pg-ranking--anim-right .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardRight}.pg-ranking--anim-fade .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardFade}.pg-ranking--anim-none .pg-ranking__panel.is-entering .pg-ranking__item{animation:none!important}

/* card layouts */
.pg-ranking__list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:48px 16px!important;width:100%!important;margin:0!important;padding:0!important;list-style:none!important}
.pg-ranking__list>.pg-ranking__item{position:relative!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important;opacity:1}.pg-ranking__list .p-postList__link{width:100%}.pg-ranking__list .p-postList__title{line-height:1.5}
.pg-ranking--title-14 .pg-ranking__list .p-postList__title{font-size:14px!important;line-height:1.5!important}

/* compact horizontal list */
.pg-ranking--compact .pg-ranking__list{display:flex!important;flex-direction:column!important;gap:14px!important}
.pg-ranking--compact .pg-ranking__item{min-height:74px!important}
.pg-ranking--compact .p-postList__link{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;text-decoration:none!important}
.pg-ranking--compact .p-postList__thumb{width:96px!important;margin:0!important}.pg-ranking--compact .c-postThumb__figure{aspect-ratio:4/3!important;margin:0!important;overflow:hidden}.pg-ranking--compact .p-postList__body{min-width:0!important;padding:0!important}.pg-ranking--compact .p-postList__title{font-size:13px!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pg-ranking--compact .pg-ranking__badge{top:-7px;left:-7px;width:30px;height:30px;font-size:13px}
.pg-ranking--compact .pg-ranking__tab{font-size:12px}

@media(max-width:599px){.pg-ranking__list{grid-template-columns:minmax(0,1fr)!important;gap:38px!important}.pg-ranking__list .p-postList__thumb.c-postThumb{width:calc(100% + 8.7%);max-width:calc(100% + 8.7%);margin-left:-4.35%}.pg-ranking--anim-up .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardUpSP}.pg-ranking--anim-down .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardDownSP}.pg-ranking--anim-left .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardLeftSP}.pg-ranking--anim-right .pg-ranking__panel.is-entering .pg-ranking__item{animation-name:pgRankingCardRightSP}}
@keyframes pgRankingCardUpSP{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}@keyframes pgRankingCardDownSP{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}@keyframes pgRankingCardLeftSP{from{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:none}}@keyframes pgRankingCardRightSP{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:none}}

/* badges */
.pg-ranking__badge{position:absolute;top:-15px;left:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--pg-ranking-badge-text);font-size:16px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;z-index:10;pointer-events:none;box-sizing:border-box;overflow:hidden}
.pg-ranking--badge-liquid .pg-ranking__badge{background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.62);box-shadow:0 5px 16px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(155%);-webkit-backdrop-filter:blur(14px) saturate(155%)}
.pg-ranking--badge-liquid .pg-ranking__badge::after{content:"";position:absolute;inset:2px 6px auto 6px;height:9px;border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(255,255,255,0));opacity:.72}
.pg-ranking--badge-minimal .pg-ranking__badge{background:var(--pg-ranking-badge-bg);border:0;box-shadow:0 2px 7px rgba(0,0,0,.14)}
.pg-ranking--badge-dark .pg-ranking__badge{color:#fff;background:linear-gradient(145deg,rgba(20,20,20,.78),rgba(20,20,20,.48));border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)}
.pg-ranking--badge-editorial .pg-ranking__badge{border-radius:10px;background:color-mix(in srgb,var(--pg-ranking-badge-bg) 84%,transparent);border:1px solid color-mix(in srgb,var(--pg-ranking-badge-text) 20%,transparent);box-shadow:0 3px 10px rgba(0,0,0,.09);font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:700;font-style:italic}
.pg-ranking--badge-none .pg-ranking__badge{display:none}
.pg-ranking__empty{margin:1.5em 0;color:#777;text-align:center}
@media(prefers-reduced-motion:reduce){.pg-ranking__indicator,.pg-ranking__tab{transition:none!important}.pg-ranking__panel.is-leaving,.pg-ranking__panel.is-entering .pg-ranking__item{animation:none!important}}

/* =========================================================
   v1.3.0 - preset color support / true Minimal
========================================================= */
.pg-ranking--tab-fill .pg-ranking__indicator{
  background:linear-gradient(135deg,var(--pg-ranking-accent) 0%,var(--pg-ranking-accent2,var(--pg-ranking-accent)) 100%)!important;
}
.pg-ranking--tab-minimal .pg-ranking__tabs{border:0!important;background:transparent!important}
.pg-ranking--tab-minimal .pg-ranking__indicator{display:none!important}
.pg-ranking--tab-minimal .pg-ranking__tab{border:0!important;background:transparent!important;box-shadow:none!important;opacity:.58;transition:opacity .2s ease,color .2s ease,font-weight .2s ease}
.pg-ranking--tab-minimal .pg-ranking__tab.is-active{opacity:1;font-weight:700}


/* =========================================================
   v1.3.1 - preset-aware tab styling
   Prime Redのみグラデーション＋影。その他は単色。
========================================================= */
.pg-ranking__tab{z-index:auto}
.pg-ranking__tab-label{position:relative;z-index:4;pointer-events:none}
.pg-ranking__indicator{z-index:3}
.pg-ranking--tab-fill .pg-ranking__tab{background:var(--pg-ranking-tab-bg);color:var(--pg-ranking-tab-text)}
.pg-ranking--tab-fill .pg-ranking__indicator{background:var(--pg-ranking-accent)!important;box-shadow:none!important}
.pg-ranking--preset-prime_red.pg-ranking--tab-fill .pg-ranking__indicator{
  background:linear-gradient(135deg,var(--pg-ranking-accent) 0%,var(--pg-ranking-accent2) 100%)!important;
  box-shadow:0 4px 10px rgba(0,0,0,.4)!important;
}
.pg-ranking--preset-glass_white.pg-ranking--tab-glass .pg-ranking__tabs{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(145%);
  -webkit-backdrop-filter:blur(14px) saturate(145%);
}
.pg-ranking--preset-glass_white.pg-ranking--tab-glass .pg-ranking__indicator{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 3px 10px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.9);
}


/* =========================================================
   v1.3.4 - background-adaptive color correction
   IMPORTANT: geometry is intentionally kept identical to v1.3.2.
   - Sliding Line: original border-bottom-only shape retained.
   - Minimal: no frame / no line retained.
   - Glass: no additional frame is added.
   Text follows the surrounding page color for non-Fill styles so it
   remains readable on light and dark sections. Indicators keep the
   preset accent and receive a tiny two-sided contrast shadow only.
========================================================= */
.pg-ranking--tab-line .pg-ranking__tab,
.pg-ranking--tab-minimal .pg-ranking__tab,
.pg-ranking--tab-glass .pg-ranking__tab{
  color:inherit!important;
}
.pg-ranking--tab-line .pg-ranking__tab.is-active,
.pg-ranking--tab-minimal .pg-ranking__tab.is-active,
.pg-ranking--tab-glass .pg-ranking__tab.is-active{
  color:inherit!important;
}

/* Keep the original line-only appearance; add contrast without a box. */
.pg-ranking--tab-line .pg-ranking__indicator{
  background:var(--pg-ranking-accent)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.58),
    0 -1px 0 rgba(0,0,0,.18)!important;
}

/* Minimal must remain truly minimal. */
.pg-ranking--tab-minimal .pg-ranking__tabs{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.pg-ranking--tab-minimal .pg-ranking__indicator{display:none!important}

/* Glass keeps its original floating glass form, with no extra border. */
.pg-ranking--tab-glass .pg-ranking__tabs{
  border:0!important;
}
.pg-ranking--tab-glass .pg-ranking__indicator{
  border:0!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 3px 10px rgba(0,0,0,.18),
    0 0 0 1px rgba(127,127,127,.10)!important;
}
.pg-ranking--preset-glass_white.pg-ranking--tab-glass .pg-ranking__tabs{
  border:0!important;
}
.pg-ranking--preset-glass_white.pg-ranking--tab-glass .pg-ranking__indicator{
  border:0!important;
}


/* =========================================================
   v1.3.5 targeted color adjustments
   - Pure White + Sliding Fill: active white / inactive gray.
   - Glass + Prime Red / Obsidian Black: active text is white.
========================================================= */
.pg-ranking--preset-prime_red.pg-ranking--tab-glass .pg-ranking__tab.is-active,
.pg-ranking--preset-black.pg-ranking--tab-glass .pg-ranking__tab.is-active{
  color:#fff!important;
}

/* =========================================================
   v1.3.6 SWELL-like responsive tab typography
   - Matches SWELL's 14px desktop appearance.
   - Scales down smoothly on narrow screens instead of using
     a fixed mobile size.
   - Applies to every ranking tab style; geometry/colors unchanged.
========================================================= */
.pg-ranking__tab,
.pg-ranking--compact .pg-ranking__tab{
  font-size:clamp(12px,3.5vw,14px);
}