@charset "UTF-8";:root{--bg-primary: #0d0d0d;--bg-secondary: #1f1f1f;--black-line: #383838;--black-weak: #494a3a;--gray: #656565;--text-secondary: #838383;--yellow-dark: #cac200;--yellow-normal: #fff73e;--yellow-light: #fff73e80;--yellow-weak: #fff73e1a;--green-dark: #2e8510;--green-normal: #68ff4f;--green-light: #3eff5d;--bage-dark: #7f7f5d;--bage-normal: #bebe92;--red-dark: #b73e42;--red: #ff575c;--red-weak: #d77d86;--blue: #6ad4f6;--blue-dark: rgba(56, 144, 170, 1);--orange-gradient: linear-gradient(135deg, #ff6b6b, #ffa500);--txt-color: #fff;--link-color: var(--blue);--main-gradient: linear-gradient( 180deg, #ffea4f 0%, #fff73e 33.33%, #68ff4f 75%, #00e517 100% );--font: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-logo: "Righteous", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--z-gnav: 10000001;--z-play-queue: 10000002;--z-volume: 10000003;--z-play-area: 100000000;--z-over-wrap: 1000000000000;--root_dir: "../img";--radius-full: calc(infinity * 1px)}.sale-rankings{display:flex;flex-direction:column;gap:1rem;margin:1rem auto}.sale-rankings h1{margin:1rem auto;text-align:center}.home-ranking-bord{display:flex;justify-content:center;margin-top:1rem}.home-ranking-bord .links{display:flex;gap:1rem;justify-content:space-between;max-width:max-content;margin-top:1rem}@media screen and (max-width: 767px){.home-ranking-bord .links{flex-direction:column}}.home-ranking-bord .ranking-banner-container{max-width:800px;margin:1rem auto}@media screen and (max-width: 767px){.home-ranking-bord .ranking-banner-container{max-width:90vw}}.home-ranking-bord .ranking-banner{max-width:800px;margin:1rem auto 0}@media screen and (max-width: 767px){.home-ranking-bord .ranking-banner{max-width:90vw;margin:0 auto}}.ranking-section{max-width:1200px;padding:20px;margin:0 auto;background:var(--bg-secondary);border:2px solid var(--black-line);border-radius:8px}.ranking-section .ranking-grid{position:relative;grid-template-areas:"left-top center-title right-top" "left-sub-content center-sub-content right-sub-content" "left-content center-content right-content" "left-bottom center-bottom right-bottom";gap:16px;aspect-ratio:2.6/1}@media screen and (max-width: 767px){.ranking-section .ranking-grid{display:grid;aspect-ratio:initial}}.ranking-section .ranking-grid .image-container{z-index:1;display:flex;align-items:center;justify-content:center}.ranking-section .ranking-grid .image-container img{width:100%;max-width:120px;height:100%;max-height:120px}@media screen and (max-width: 767px){.ranking-section .ranking-grid .image-container img{min-width:60px;min-height:60px}}.ranking-section .ranking-grid .left-top{position:absolute;top:0;left:0;grid-area:left-top}.ranking-section .ranking-grid .right-top{position:absolute;top:0;right:0;grid-area:right-top}.ranking-section .ranking-grid .right-top.rotated{transform:rotatey(180deg)}.ranking-section .ranking-grid .left-bottom{position:absolute;bottom:0;left:0;grid-area:left-bottom}.ranking-section .ranking-grid .left-bottom.rotated{transform:rotatex(180deg)}.ranking-section .ranking-grid .right-bottom{position:absolute;right:0;bottom:0;grid-area:right-bottom}.ranking-section .ranking-grid .right-bottom.rotated{transform:rotate(180deg)}.ranking-section .ranking-grid .countdown-timer{grid-area:center-sub-content;font-size:1.25rem;color:#ccc;text-align:right}.ranking-section .ranking-grid .ranking-banner{position:relative;display:flex;flex-direction:row;grid-area:center-title;gap:1rem;align-items:center;justify-content:center;padding-top:2.5rem;text-align:center}.ranking-section .ranking-grid .ranking-banner img{max-width:500px}@media screen and (max-width: 767px){.ranking-section .ranking-grid .ranking-banner img{max-width:50vw}}.ranking-section .ranking-grid .ranking-footer{position:relative;z-index:20;grid-area:center-bottom;padding:2rem 2rem 3rem;color:var(--yellow-normal);text-align:right}.ranking-section .ranking-grid .ranking-footer .underline{text-decoration:underline}.ranking-section .ranking-grid .section-title{position:relative;grid-area:center-title;text-align:center}.ranking-section .ranking-grid .section-title .text-fill{position:relative;z-index:2;width:100%;padding:2rem 0;font-size:3rem;font-weight:700;line-height:1em;text-align:center;background-image:linear-gradient(180deg,#8b8f1d,#f6ff00 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media screen and (max-width: 767px){.ranking-section .ranking-grid .section-title .text-fill{padding:0;font-size:1.7rem}}.ranking-section .ranking-grid .section-title .text-shadow{position:absolute;top:0;left:0;z-index:1;width:100%;padding:2rem 0;font-size:3rem;font-weight:700;line-height:1em;color:transparent;text-align:center;text-shadow:2px 2px 0 rgba(51,51,51,.2),-2px -2px 0 rgba(51,51,51,.2),-2px 2px 0 rgba(51,51,51,.2),2px -2px 0 rgba(51,51,51,.2),2px 0 0 rgba(51,51,51,.2),-2px 0 0 rgba(51,51,51,.2),0 2px 0 rgba(51,51,51,.2),0 -2px 0 rgba(51,51,51,.2)}@media screen and (max-width: 767px){.ranking-section .ranking-grid .section-title .text-shadow{padding:0;font-size:1.7rem}}.ranking-section .ranking-grid .center-content{z-index:2;display:grid;grid-area:center-content;grid-template-columns:repeat(6,1fr);gap:16px 0px;justify-content:end;padding-top:.5rem;padding-bottom:0}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content{padding-top:1.5rem}}.ranking-section .ranking-grid .center-content .top-rank{grid-column:span 6;justify-self:center}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .top-rank{justify-self:start}}.ranking-section .ranking-grid .center-content .medium-rank{grid-column:span 3;justify-self:center}.ranking-section .ranking-grid .center-content .medium-rank.two{justify-self:end;padding-right:16px}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .medium-rank.two{justify-self:start;padding-right:0}}.ranking-section .ranking-grid .center-content .medium-rank.three{justify-self:start;padding-left:16px}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .medium-rank.three{padding-left:0}}.ranking-section .ranking-grid .center-content .bottom-rank{grid-column:span 2;justify-self:center}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .bottom-rank{justify-self:start}}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content{grid-template-columns:repeat(2,1fr)}.ranking-section .ranking-grid .center-content .top-rank,.ranking-section .ranking-grid .center-content .medium-rank,.ranking-section .ranking-grid .center-content .bottom-rank{grid-column:span 1}}.ranking-section .ranking-grid .center-content .rank-item{display:flex;flex-direction:row;gap:1rem;align-items:center;padding:8px 0;text-align:center;cursor:pointer;transition:.2s}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .rank-item{gap:.5rem;padding:0}}.ranking-section .ranking-grid .center-content .rank-item:hover{scale:1.1}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .rank-item:hover{box-shadow:none;scale:1}}.ranking-section .ranking-grid .center-content .rank-item .rank-background{position:relative;padding:10px;font-size:3rem;background:url(/images/ranking/lightning.gif) no-repeat center center;background-size:cover;border-radius:10px}.ranking-section .ranking-grid .center-content .rank-item .rank-background .text-fill{position:relative;z-index:2;width:100%;font-weight:700;line-height:1em;text-align:center;background-image:linear-gradient(180deg,#8b8f1d,#f6ff00 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ranking-section .ranking-grid .center-content .rank-item .rank-background .text-shadow{position:absolute;top:0;left:0;z-index:1;width:100%;padding:.8rem 0;font-weight:700;line-height:1em;color:transparent;text-align:center;text-shadow:2px 2px 0 rgba(51,51,51,.2),-2px -2px 0 rgba(51,51,51,.2),-2px 2px 0 rgba(51,51,51,.2),2px -2px 0 rgba(51,51,51,.2),2px 0 0 rgba(51,51,51,.2),-2px 0 0 rgba(51,51,51,.2),0 2px 0 rgba(51,51,51,.2),0 -2px 0 rgba(51,51,51,.2)}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .rank-item .rank-background .text-shadow{padding:.9rem 0;text-shadow:1px 1px 0 rgba(51,51,51,.2),-1px -1px 0 rgba(51,51,51,.2),-1px 1px 0 rgba(51,51,51,.2),1px -1px 0 rgba(51,51,51,.2),1px 0 0 rgba(51,51,51,.2),-1px 0 0 rgba(51,51,51,.2),0 1px 0 rgba(51,51,51,.2),0 -1px 0 rgba(51,51,51,.2)}}.ranking-section .ranking-grid .center-content .rank-item .rank{flex-shrink:0;width:100%;font-size:2rem;font-weight:700;line-height:1em;text-align:center;white-space:nowrap}@media screen and (max-width: 1024px){.ranking-section .ranking-grid .center-content .rank-item .rank{font-size:1.2rem}}.ranking-section .ranking-grid .center-content .rank-item .icon{flex-shrink:0;width:70px;height:70px;object-fit:cover;border-radius:50%}@media screen and (max-width: 1024px){.ranking-section .ranking-grid .center-content .rank-item .icon{width:30px;height:30px}}.ranking-section .ranking-grid .center-content .rank-item .name{display:-webkit-box;max-width:13rem;overflow:hidden;font-size:1.5rem;font-weight:700;color:#ddd;text-decoration:none;text-overflow:ellipsis;word-break:break-word;-webkit-line-clamp:1;-webkit-box-orient:vertical}@media screen and (max-width: 767px){.ranking-section .ranking-grid .center-content .rank-item .name{font-size:.85rem;-webkit-line-clamp:2}}.ranking-section .ranking-grid .center-content .rank-item .name:hover{text-decoration:underline}.skeleton-ranking{animation:fadeIn .6s ease-out}.skeleton-ranking .skeleton{transition:opacity .3s ease-out;animation:none!important}.skeleton-ranking .skeleton .rank-background{position:relative;padding:10px;font-size:3rem;background:url(/images/ranking/lightning.gif) no-repeat center center;background-size:cover;border-radius:10px}.skeleton-ranking .skeleton .rank-background .text-fill{position:relative;z-index:2;width:100%;font-weight:700;line-height:1em;text-align:center;background-image:linear-gradient(180deg,#8b8f1d,#f6ff00 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.skeleton-ranking .skeleton .rank-background .text-shadow{position:absolute;top:0;left:0;z-index:1;width:100%;padding:.8rem 0;font-weight:700;line-height:1em;color:transparent;text-align:center;text-shadow:2px 2px 0 rgba(51,51,51,.2),-2px -2px 0 rgba(51,51,51,.2),-2px 2px 0 rgba(51,51,51,.2),2px -2px 0 rgba(51,51,51,.2),2px 0 0 rgba(51,51,51,.2),-2px 0 0 rgba(51,51,51,.2),0 2px 0 rgba(51,51,51,.2),0 -2px 0 rgba(51,51,51,.2)}.skeleton-ranking .skeleton .rank{flex-shrink:0;width:100%;font-size:2rem;font-weight:700;line-height:1em;text-align:center;white-space:nowrap}@media screen and (max-width: 1024px){.skeleton-ranking .skeleton .rank{font-size:1.2rem}}.skeleton-ranking .skeleton-banner{width:100%;aspect-ratio:16/9;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-frame{width:100%;height:100%;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-countdown{width:80%;height:24px;margin:auto;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-rank{width:40px;height:24px;margin:auto;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-icon{width:80px;height:80px;margin:10px auto;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:50%;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-name{width:80px;height:20px;margin:auto;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-footer-text{width:70%;height:20px;margin:auto;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}.skeleton-ranking .skeleton-buttons{display:flex;gap:20px;justify-content:center;margin-top:20px}.skeleton-ranking .skeleton-buttons .skeleton-button{width:150px;height:40px;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:25px;animation:shimmer 1.5s infinite}.content-loaded{animation:scaleIn .4s ease-out forwards}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.ranking-notice{max-width:800px;padding:1rem;margin:1rem auto;background:linear-gradient(145deg,#1e1e1ee6,#141414e6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 4px 15px #0003;transition:transform .3s ease,box-shadow .3s ease}.ranking-notice:hover{box-shadow:0 6px 20px #0000004d;transform:translateY(-2px)}.ranking-notice .notice-content .notice-title{display:flex;gap:.5rem;align-items:center;margin:0;margin-bottom:.75rem;font-size:1.1rem;font-weight:600;color:#9acd32}.ranking-notice .notice-content .notice-title .notice-icon{animation:pulse 2s infinite}.ranking-notice .notice-content .notice-description .notice-text{margin:.25rem 0;font-size:.95rem;line-height:1.5;color:#fffc;letter-spacing:.02em}.ranking-notice .notice-content .notice-description .notice-text:last-child{font-size:.85rem;font-style:italic;color:#fff9}.ranking-notice .notice-content .notice-description .notice-highlight{font-weight:600;color:var(--yellow-normal)}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
