@charset "UTF-8";

.home-page--redesign .page-shell,
.home-page--redesign .page-main,
.home-page--redesign .site-footer__inner{width:min(1280px, calc(100% - 28px));}
.home-page--redesign .site-header__inner{width:min(1320px, calc(100% - 28px));}

.home-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6fbff 0%,#edf6ff 100%);border-bottom:1px solid rgba(219,227,236,.9);}
.home-hero::before{content:"";position:absolute;inset:0;background:
 radial-gradient(circle at 12% 25%, rgba(77,163,255,.18) 0 2px, transparent 3px) 0 0/32px 32px,
 radial-gradient(circle at 78% 22%, rgba(255,196,0,.28) 0 6px, transparent 7px) 0 0/160px 160px,
 linear-gradient(120deg, rgba(37,99,235,.08), rgba(255,255,255,0) 48%),
 radial-gradient(circle at 84% 45%, rgba(37,99,235,.08), transparent 28%);
pointer-events:none;}
.home-hero::after{content:"♪";position:absolute;right:4%;top:18%;font-size:120px;color:rgba(37,99,235,.14);transform:rotate(8deg);pointer-events:none;}
.home-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:24px;align-items:center;padding:36px 12px 44px;}
.home-hero__title{margin:0;font-size:clamp(2.8rem,5vw,4.2rem);line-height:1.08;font-weight:900;letter-spacing:.04em;color:#08255e;}
.home-hero__subtitle{margin:10px 0 0;font-size:clamp(1.2rem,2.1vw,1.9rem);font-weight:800;color:#102b63;}
.home-hero__lead{margin:14px 0 0;font-size:clamp(1rem,1.7vw,1.32rem);line-height:1.9;color:#233563;max-width:640px;}
.home-hero__search{margin-top:22px;max-width:560px;display:flex;align-items:center;gap:12px;position:relative;}
.home-hero__search .searchInput{padding-left:52px;min-height:54px;border-radius:20px;box-shadow:0 12px 28px rgba(37,99,235,.10);}
.home-hero__search::before{content:"";position:absolute;left:18px;top:50%;width:24px;height:24px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M10.5 4a6.5 6.5 0 1 0 4.12 11.53l4.92 4.91 1.41-1.41-4.91-4.92A6.5 6.5 0 0 0 10.5 4Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;pointer-events:none;}
.home-hero__search-button{flex:0 0 auto;min-width:82px;min-height:48px;padding:0 22px;border:0;border-radius:16px;background:linear-gradient(135deg,#2d7cf7,#1d4ed8);color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(37,99,235,.18);}
.home-hero__search-button:hover{filter:brightness(1.04)}
.home-hero__visual{display:flex;justify-content:center;align-items:center;min-height:320px;position:relative;}
.home-hero__visual::before{display:none;}
.home-hero__logo{position:relative;z-index:1;width:min(360px,88%);aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 16px 32px rgba(15,23,42,.08));}

.home-main{margin-top:-6px;padding-bottom:24px;display:grid;gap:28px;}
.home-ranking-board{padding:18px 18px 24px;border-radius:22px;}
.home-ranking-toolbar{display:flex;justify-content:flex-end;align-items:center;margin:0 0 14px;}
.country-select-home form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.country-select-home label{font-size:.98rem;font-weight:800;color:#334155;white-space:nowrap;}
.country-select-home select{min-width:220px;min-height:42px;padding:0 12px;border:1px solid #dbe3ec;border-radius:12px;background:#fff;color:#1e293b;font-size:.96rem;}

.home-ranking-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff;border:1px solid #dbe3ec;border-radius:16px;overflow:hidden;}
.home-ranking-tab{min-height:58px;border:0;background:transparent;color:#34425f;font-size:1.26rem;font-weight:900;position:relative;transition:background .18s,color .18s;}
.home-ranking-tab+.home-ranking-tab{border-left:1px solid #e7edf5;}
.home-ranking-tab.is-active{color:#0d2d69;box-shadow:inset 0 -4px 0 #2b7bf6;background:linear-gradient(180deg,#ffffff,#f8fbff);}
.home-ranking-panel{display:none;padding-top:20px;}
.home-ranking-panel.is-active{display:block;}

.ranking-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:22px;}
.ranking-card{position:relative;display:grid;gap:8px;background:#fff;border:1px solid #dbe3ec;border-radius:20px;padding:0 0 14px;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.05);color:#10265b;text-decoration:none;}
.ranking-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,23,42,.08);}
.ranking-card__rank{position:absolute;left:0;top:0;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 10px;border-radius:0 0 18px 0;background:linear-gradient(135deg,#ffbd00,#f59e0b);color:#fff;font-size:2rem;font-weight:900;line-height:1;}
.ranking-cards .ranking-card:nth-child(1) .ranking-card__rank{background:linear-gradient(135deg,#d4af37,#b8860b);}
.ranking-cards .ranking-card:nth-child(2) .ranking-card__rank{background:linear-gradient(135deg,#cfd4dc,#8f9aa8);}
.ranking-cards .ranking-card:nth-child(3) .ranking-card__rank{background:linear-gradient(135deg,#cd7f32,#9a5b1e);}
.ranking-cards .ranking-card:nth-child(4) .ranking-card__rank{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.ranking-cards .ranking-card:nth-child(5) .ranking-card__rank{background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.ranking-cards .ranking-card:nth-child(6) .ranking-card__rank{background:linear-gradient(135deg,#0ea5e9,#2563eb);}

.ranking-card__image-wrap{aspect-ratio:1.35/1;overflow:hidden;background:#eaf2ff;}
.ranking-card__image{width:100%;height:100%;object-fit:cover;}
.ranking-card__image-wrap--fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dbeafe,#eef2ff);color:#1d4ed8;font-size:3rem;font-weight:900;}
.ranking-card__image--logo{width:96px;height:96px;object-fit:contain;}
.ranking-card__body{display:grid;gap:4px;padding:0 16px;min-width:0;}
.ranking-card__title{font-size:1.14rem;font-weight:900;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ranking-card__meta{color:#6b7280;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rank-tags{display:flex;flex-wrap:wrap;gap:12px 14px;}
.rank-tag{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid #dbe3ec;background:#fff;color:#20345f;text-decoration:none;font-size:1rem;font-weight:700;box-shadow:0 6px 18px rgba(15,23,42,.03);}
.rank-tag:hover{text-decoration:none;background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;}
.rank-tag.is-hidden{display:none!important;}
.rank-tag__rank{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#eef4ff;color:#2563eb;font-size:.95rem;font-weight:900;flex:0 0 auto;}
.rank-tag__label{white-space:nowrap;max-width:20ch;overflow:hidden;text-overflow:ellipsis;}
.rank-tag--quiz .rank-tag__label{max-width:24ch;}

.home-more-button{display:block;margin:22px auto 0;min-width:320px;min-height:54px;padding:0 26px;border:2px solid #2b7bf6;border-radius:999px;background:#fff;color:#1d4ed8;font-weight:900;font-size:1.18rem;box-shadow:0 8px 20px rgba(37,99,235,.08);}
.home-more-button:hover{background:#eff6ff}
.home-empty{margin-top:6px;text-align:center}

.home-cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.home-cta-card{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;padding:26px 28px;border-radius:22px;}
.home-cta-card__icon{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:24px;background:#f8fafc;font-size:52px;color:#2563eb;border:1px solid #dbe3ec;}
.home-cta-card__svg{width:58px;height:58px;display:block;}
.home-cta-card__icon--create{color:#f59e0b;background:#fff7ed;}
.home-cta-card__body h2{margin:0 0 6px;font-size:2rem;color:#10265b;line-height:1.25;}
.home-cta-card__body p{margin:0 0 14px;color:#64748b;font-size:1.06rem;}
.home-cta-card__button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:16px;color:#fff;font-weight:900;text-decoration:none;font-size:1.12rem;}
.home-cta-card__button--blue{background:linear-gradient(135deg,#2d7cf7,#1d4ed8);}
.home-cta-card__button--orange{background:linear-gradient(135deg,#ff9c1a,#f97316);}
.home-cta-card__button:hover{text-decoration:none;filter:brightness(1.03);}

@media (max-width: 1160px){
  .home-hero__inner{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;}
  .home-hero__content{justify-items:center;display:grid;}
  .home-hero__lead{max-width:760px;text-align:center;}
  .home-hero__search{margin-left:auto;margin-right:auto;}
  .ranking-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .home-ranking-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 900px){
  .home-page--redesign .page-shell,.home-page--redesign .page-main,.home-page--redesign .site-footer__inner{width:min(1280px, calc(100% - 18px));}
  .home-ranking-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ranking-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-cta-grid{grid-template-columns:1fr;}
  .home-cta-card__body h2{font-size:1.7rem;}
}
@media (max-width: 767px){
  .home-hero__inner{padding:18px 8px 24px;gap:12px;}
  .home-hero__title{font-size:3rem;}
  .home-hero__subtitle{font-size:1.28rem;}
  .home-hero__lead{font-size:1rem;line-height:1.8;}
  .home-hero__search{display:none;}
  .home-hero__logo{width:min(220px, 70vw);}
  .home-hero__visual{min-height:220px;}

  .home-ranking-board{padding:14px 12px 20px;}
  .home-ranking-toolbar{justify-content:stretch;}
  .country-select-home{width:100%;}
  .country-select-home form{width:100%;}
  .country-select-home label{font-size:.92rem;}
  .country-select-home select{flex:1;min-width:0;}

  .home-ranking-tabs{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px;}
  .home-ranking-tab{min-height:48px;font-size:1rem;}

  .ranking-cards{grid-template-columns:1fr;gap:12px;margin-bottom:16px;}
  .ranking-card{grid-template-columns:96px minmax(0,1fr);align-items:center;padding:10px 12px;gap:12px;}
  .ranking-card__image-wrap{grid-column:1;grid-row:1 / span 2;aspect-ratio:1/1;border-radius:16px;overflow:hidden;}
  .ranking-card__body{grid-column:2;grid-row:1 / span 2;padding:0;align-content:center;min-width:0;}
  .ranking-card__title{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ranking-card__meta{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ranking-card__rank{width:42px;height:42px;min-width:42px;font-size:1.45rem;border-radius:0 0 14px 0;}

  .rank-tags{gap:10px;}
  .rank-tag{min-height:40px;padding:0 12px;font-size:.95rem;}
  .home-more-button{min-width:240px;min-height:48px;font-size:1rem;}

  .home-cta-card{grid-template-columns:76px 1fr;padding:18px 16px;gap:14px;}
  .home-cta-card__icon{width:72px;height:72px;font-size:38px;border-radius:18px;}
}
@media (max-width: 480px){
  .home-page--redesign .page-shell,.home-page--redesign .page-main,.home-page--redesign .site-footer__inner{width:min(1280px, calc(100% - 12px));}
  .home-hero__title{font-size:2.5rem;}
  .home-ranking-tabs{grid-template-columns:1fr;}
  .rank-tag__label{max-width:14ch;}
}


/* ===== v76: iPhone8 Safari header fix for TOP ===== */
@media (max-width: 767px) and (max-device-height: 667px){
  html body.home-page,
  html body.home-page--redesign{
    padding-top:0 !important;
  }

  html body.home-page .site-header,
  html body.home-page--redesign .site-header,
  html body.home-page #search-container,
  html body.home-page--redesign #search-container{
    position:sticky !important;
    position:-webkit-sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    inset:auto 0 auto 0 !important;
    height:64px !important;
    min-height:64px !important;
    transform:none !important;
    translate:none !important;
    will-change:auto !important;
    z-index:3000 !important;
  }

  html body.home-page .site-header__inner,
  html body.home-page--redesign .site-header__inner{
    height:64px !important;
    min-height:64px !important;
    align-items:center !important;
  }

  html body.home-page .site-brand__logo,
  html body.home-page--redesign .site-brand__logo{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }

  html body.home-page .site-brand__text,
  html body.home-page--redesign .site-brand__text{
    font-size:1.18rem !important;
  }

  html body.home-page .site-header__search-toggle,
  html body.home-page--redesign .site-header__search-toggle{
    width:38px !important;
    height:38px !important;
  }
}


/* ===== v78: small-width header fit for TOP ===== */
@media (max-width: 390px){
  html body.home-page .site-header,
  html body.home-page--redesign .site-header,
  html body.home-page #search-container,
  html body.home-page--redesign #search-container{
    height:62px !important;
    min-height:62px !important;
    overflow:hidden !important;
  }

  html body.home-page .site-header__inner,
  html body.home-page--redesign .site-header__inner{
    width:100% !important;
    padding:0 6px !important;
    gap:5px !important;
    justify-content:space-between !important;
    overflow:hidden !important;
  }

  html body.home-page .site-header__brand,
  html body.home-page--redesign .site-header__brand{
    flex:0 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  html body.home-page .site-brand,
  html body.home-page--redesign .site-brand{
    gap:5px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  html body.home-page .site-brand__logo,
  html body.home-page--redesign .site-brand__logo{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    border-radius:8px !important;
  }

  html body.home-page .site-brand__text,
  html body.home-page--redesign .site-brand__text{
    font-size:1.05rem !important;
    max-width:5.2em !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  html body.home-page .site-header__tools,
  html body.home-page--redesign .site-header__tools{
    flex:0 0 auto !important;
    gap:4px !important;
    margin-left:4px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  html body.home-page .site-header__search-toggle,
  html body.home-page--redesign .site-header__search-toggle{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
  }

  html body.home-page .top-nav,
  html body.home-page--redesign .top-nav{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  html body.home-page .top-nav__user,
  html body.home-page .top-nav__text-link,
  html body.home-page--redesign .top-nav__user,
  html body.home-page--redesign .top-nav__text-link{
    display:none !important;
  }

  html body.home-page .top-nav__link,
  html body.home-page--redesign .top-nav__link{
    min-height:36px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  html body.home-page .top-nav__link--subtle,
  html body.home-page--redesign .top-nav__link--subtle{
    max-width:86px !important;
  }
}


/* ===== v82: TOP ranking cards show top 6 ===== */
@media (min-width: 1161px){
  .ranking-card__body{padding:0 12px;}
  .ranking-card__title{font-size:1.02rem;}
  .ranking-card__meta{font-size:.88rem;}
}


/* ===== v105: prevent the mobile search panel from being clipped on TOP ===== */
@media (max-width:767px){
  html body.home-page .site-header,
  html body.home-page--redesign .site-header,
  html body.home-page #search-container,
  html body.home-page--redesign #search-container{
    overflow:visible !important;
  }
  html body.home-page .site-header__inner,
  html body.home-page--redesign .site-header__inner{
    overflow:hidden !important;
  }
  html body.home-page .site-header__search-panel,
  html body.home-page--redesign .site-header__search-panel{
    overflow:visible !important;
    z-index:5000 !important;
  }
  html body.home-page .site-header__search-panel .suggestions.is-open,
  html body.home-page--redesign .site-header__search-panel .suggestions.is-open{
    display:block !important;
    z-index:5010 !important;
    max-height:min(52vh,360px) !important;
    overflow-y:auto !important;
  }
}

/* ===== v116: popular cards without misleading counts ===== */
.ranking-card--no-meta .ranking-card__body{
  align-content:center;
}
.ranking-card--no-meta .ranking-card__title{
  margin-block:auto;
}


/* ===== v152: exact-size artist-list ads without oversized blank space ===== */
.rank-tag-ad{
  --artist-list-ad-width:0px;
  --artist-list-ad-height:0px;
  flex:1 0 100%;
  width:100%;
  min-width:100%;
  min-height:0;
  height:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  line-height:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.rank-tag-ad.is-sized{
  height:var(--artist-list-ad-height);
  margin:10px 0 14px;
}
.rank-tag-ad.is-hidden,
.rank-tag-ad.is-unfilled{display:none!important;}
.rank-tag-ad ins.adsbygoogle.artist-list-ad-unit{
  display:block!important;
  width:var(--artist-list-ad-width)!important;
  height:var(--artist-list-ad-height)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:var(--artist-list-ad-height)!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
.rank-tag-ad ins.adsbygoogle.artist-list-ad-unit iframe{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
}
@media(max-width:767px){
  .rank-tag-ad.is-sized{margin:8px 0 12px;}
}


/* ===== v119: mobile ranking-tab text wrapping ===== */
@media (max-width: 767px){
  .home-ranking-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .home-ranking-tab{
    min-height:54px!important;
    padding:8px 10px!important;
    font-size:.94rem!important;
    line-height:1.25!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
    text-align:center!important;
  }
}
@media (max-width: 380px){
  .home-ranking-tabs{grid-template-columns:1fr!important;}
}


/* ===== v122: fixed Japanese line break for two-column original tabs ===== */
@media (min-width:381px) and (max-width:767px){
  .home-ranking-tab--two-line .home-ranking-tab__line{display:block;}
}