.hero-section{background:var(--red);color:#fff}
.hero.hero-with-news{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:clamp(32px,4vw,64px);max-width:1240px;padding-top:56px;padding-bottom:64px;align-items:center}
.hero-with-news .hero-copy{min-width:0}
.hero-with-news h1{font-size:clamp(32px,3.5vw,48px);line-height:1.55;margin:0 0 24px;letter-spacing:-.035em;color:#fff}
.hero-with-news .hero-button{min-width:340px;background:#fff;color:var(--red);border-color:#fff}
.hero-with-news .hero-button:hover{background:#f4f4f4;border-color:#f4f4f4}
.home-notices{padding:26px 28px;background:#fff;color:var(--ink);scroll-margin-top:24px}
.home-notices h2{font-size:21px;margin:0 0 6px}
.home-notices ul{list-style:none;margin:0;padding:0}
.home-notices li{padding:18px 0;border-bottom:1px solid #d7d7d7}.home-notices li:last-child{border-bottom:0;padding-bottom:0}
.home-notices time,.notice-page time{font-size:12px;color:var(--gray);display:block;margin-bottom:7px}
.home-notices a,.home-notices li p{font-size:14px;line-height:1.9;margin:0;overflow-wrap:anywhere}
.home-notices a{display:flex;justify-content:space-between;gap:12px;text-underline-offset:4px;text-decoration-thickness:1px}.home-notices a span{flex:none;color:var(--red)}
.notice-page{max-width:860px;padding-top:32px;padding-bottom:64px}.notice-page .page-heading{margin-top:30px}.notice-page .page-heading h1{font-size:clamp(24px,3vw,32px);line-height:1.6}
.notice-body{font-size:16px;line-height:2}.notice-body h2{font-size:22px;margin:34px 0 10px}.notice-body p{margin:0 0 20px}.notice-body .button{margin-top:16px}
@media(max-width:1000px){.hero.hero-with-news{grid-template-columns:minmax(0,1fr);gap:36px}.home-notices{max-width:none}.hero-with-news h1{font-size:clamp(32px,5.2vw,48px)}}
.rankings{padding-top:64px;padding-bottom:55px;max-width:1240px}
.genre-tabs{display:flex;flex-wrap:wrap;gap:8px;max-width:100%;border-bottom:1px solid #ccc;margin:0 0 28px;padding-bottom:0;scroll-margin-top:24px}
.genre-tabs a{flex:none;display:block;padding:12px 18px;border-bottom:3px solid transparent;text-decoration:none;font-size:15px;white-space:nowrap}
.genre-tabs a[aria-current=page]{border-bottom-color:var(--red);color:var(--red);font-weight:700}
.genre-tabs a:hover{color:var(--red)}
.ranking-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.ranking-columns h3{font-size:24px;margin:16px 0 8px}
.ranking-list{list-style:none;margin:22px 0 0;padding:0}
.ranking-list>li{display:flex;gap:14px;align-items:flex-start;border-top:1px solid #ddd;padding:18px 0}
.rank-number{color:var(--red);font-size:21px;font-weight:700;min-width:24px;line-height:1.5}
.ranking-work{flex:1;min-width:0}
.ranking-main{display:flex;align-items:center;gap:16px;min-width:0;flex:1;text-decoration:none}
.ranking-main>img{object-fit:contain;flex-shrink:0;background:#f5f5f5}
.ranking-main>span{min-width:0}
.ranking-main strong{display:block;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.ranking-main small{display:block;font-size:12px;color:var(--gray);margin-top:5px;overflow-wrap:anywhere}
.ranking-main .likes-count{color:var(--red)}
.ranking-main:hover strong{text-decoration:underline}
.rank-placeholder{display:grid;place-items:center;flex:0 0 56px;height:70px;background:#f5f5f5;color:var(--red)}
.ranking-source{display:block;width:110px;margin:9px 0 0 72px}
.ranking-source img{display:block;object-fit:contain}
.like-ranking{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
.like-ranking>li{display:block;padding:12px 0 0;min-width:0}
.like-rank-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.like-rank-meta .rank-number{font-size:18px}.like-rank-meta .likes-count{font-size:12px;color:var(--red)}
.like-ranking .ranking-main{display:block}
/* The first 620 pixels of the 1200 × 630 share image show the created page. */
.like-preview{aspect-ratio:620/630;overflow:hidden;background:#fff;border:1px solid var(--line)}
.like-preview img{width:calc(100% * 1200 / 620);max-width:none;height:100%}
.like-ranking .ranking-main>span{display:block;padding-top:9px}
.like-ranking .ranking-main strong{font-size:13px;font-weight:600;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.like-ranking .ranking-main small{font-size:11px;margin-top:4px}
.public-item h3{font-size:14px;line-height:1.8}.public-item>.help{font-size:12px}
.empty-list{color:var(--gray);font-size:14px;line-height:1.9;padding:20px 0}
.folios-page{max-width:1240px;padding-bottom:40px}
.list-total{font-size:14px;color:var(--gray);margin:22px 0}
.pagination{display:flex;align-items:center;justify-content:center;gap:40px;margin:44px 0 14px;font-size:15px}
.pagination a{padding:12px 4px}
@media(max-width:760px){
.public-section .public-grid{grid-template-columns:minmax(0,1fr)}
.public-section .public-item:nth-child(n+7){display:none}
.hero.hero-with-news{padding-top:24px;padding-bottom:36px;gap:28px}
.hero-with-news h1{font-size:clamp(22px,6.3vw,40px)}
.hero-with-news .hero-button{min-width:0;width:100%;font-size:16px;padding:14px 16px;gap:10px}
.home-notices{padding:22px}.home-notices h2{font-size:20px}
.rankings{padding-top:36px;padding-bottom:30px}
.folios-page .page-heading h1{font-size:clamp(23px,6.5vw,32px);letter-spacing:.01em}
.ranking-columns{grid-template-columns:minmax(0,1fr);gap:28px}
.ranking-columns h3{font-size:21px}
.genre-tabs{gap:0;margin-bottom:20px}.genre-tabs a{padding:12px 13px;font-size:14px}
.ranking-list>li{gap:10px}.ranking-main{gap:12px}
.like-ranking{grid-template-columns:minmax(0,1fr);gap:22px}
.ranking-source{margin-left:68px}
}
#ranking-status{min-height:1.8em;margin:0 0 8px;font-size:12px}#ranking-results[aria-busy=true]{opacity:.65}