:root{

  --red:#ef1717;
  --red-dark:#c70d0d;

  --black:#08090b;
  --black-soft:#111215;

  --white:#ffffff;

  --background:#f4f3f1;

  --text:#111214;

  --muted:#777a80;

  --line:#deddd9;

  --green:#15805f;

}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{

  margin:0;

  background:var(--background);

  color:var(--text);

  font-family:
    "Helvetica Neue",
    "Noto Sans JP",
    Arial,
    sans-serif;

  -webkit-font-smoothing:antialiased;

}


a{
  color:inherit;
  text-decoration:none;
}


button{
  font:inherit;
}



/* =========================================================
 HEADER
========================================================= */

.header{

  height:76px;

  position:sticky;

  top:0;

  z-index:100;

  background:rgba(8,9,11,.97);

  border-top:3px solid var(--red);

}


.header-inner{

  max-width:1280px;

  height:100%;

  margin:auto;

  padding:0 28px;

  display:flex;

  align-items:center;

  justify-content:space-between;

}


.brand{

  display:flex;

  align-items:baseline;

  gap:10px;

}


.brand-main{

  color:#fff;

  font-size:25px;

  line-height:1;

  font-weight:1000;

  letter-spacing:-.04em;

}


.brand-market{

  color:var(--red);

  font-size:9px;

  font-weight:900;

  letter-spacing:.26em;

}


.nav{

  display:flex;

  align-items:center;

  gap:32px;

  color:#a9a9aa;

  font-size:11px;

  font-weight:800;

  letter-spacing:.04em;

}


.nav a{

  transition:
    color .15s,
    opacity .15s;

}


.nav a:hover{
  color:#fff;
}


.nav-market{
  color:#fff !important;
}


.nav-shop{

  padding:10px 15px;

  border:1px solid #3b3c40;

  border-radius:4px;

  color:#fff !important;

}



/* =========================================================
 MAIN
========================================================= */

main{

  max-width:1280px;

  margin:auto;

  padding:
    22px
    28px
    110px;

}



/* =========================================================
 HERO
========================================================= */

.hero{

  min-height:535px;

  position:relative;

  overflow:hidden;

  display:flex;

  align-items:center;

  background:var(--black);

  color:#fff;

  border-radius:2px;

}


.hero:before{

  content:"";

  position:absolute;

  top:0;

  right:0;

  width:42%;

  height:100%;

  background:var(--red);

  clip-path:
    polygon(
      40% 0,
      100% 0,
      100% 100%,
      0 100%
    );

}


.hero:after{

  content:"";

  position:absolute;

  right:18%;

  top:0;

  width:3px;

  height:100%;

  background:rgba(255,255,255,.23);

  transform:skewX(-19deg);

}


.hero-noise{

  position:absolute;

  inset:0;

  opacity:.13;

  pointer-events:none;

  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,.035) 4px
    );

}


.hero-content{

  width:100%;

  position:relative;

  z-index:5;

  padding:64px 68px;

}


.hero-kicker{

  display:flex;

  align-items:center;

  gap:8px;

  margin-bottom:22px;

  color:#a7a8aa;

  font-size:10px;

  font-weight:900;

  letter-spacing:.17em;

}


.live-dot{

  width:7px;

  height:7px;

  display:inline-block;

  border-radius:50%;

  background:var(--red);

  box-shadow:
    0 0 0 4px
    rgba(239,23,23,.13);

}


.hero h1{

  margin:0;

  position:relative;

  z-index:2;

  max-width:720px;

  font-size:
    clamp(
      50px,
      6.1vw,
      83px
    );

  line-height:1.03;

  letter-spacing:-.065em;

  font-weight:1000;

}


.hero h1 span{
  color:#fff;
}


.hero-description{

  margin:
    27px
    0
    30px;

  max-width:620px;

  color:#b7b7b9;

  font-size:14px;

  line-height:1.9;

  font-weight:500;

}


.hero-actions{

  display:flex;

  gap:9px;

}


.button{

  min-height:48px;

  padding:0 20px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  font-size:11px;

  font-weight:900;

  transition:
    transform .15s,
    background .15s;

}


.button:hover{
  transform:translateY(-2px);
}


.button.primary{

  background:var(--red);

  color:#fff;

}


.button.secondary{

  border:1px solid #3c3d40;

  background:#17181b;

  color:#fff;

}


.hero-market-bar{

  width:620px;

  max-width:100%;

  margin-top:43px;

  padding-top:19px;

  display:grid;

  grid-template-columns:
    1.7fr
    .7fr
    .7fr
    1fr;

  border-top:
    1px solid
    rgba(255,255,255,.18);

}


.hero-market-bar div{
  padding-right:18px;
}


.hero-market-bar small{

  display:block;

  color:#6f7074;

  font-size:8px;

  font-weight:900;

  letter-spacing:.16em;

}


.hero-market-bar strong{

  display:block;

  margin-top:7px;

  font-size:15px;

}


.hero-market-bar .red{
  color:#ff4d4d;
}


.hero-word{

  position:absolute;

  z-index:1;

  right:-25px;

  bottom:-38px;

  color:
    rgba(
      255,
      255,
      255,
      .055
    );

  font-size:165px;

  font-weight:1000;

  letter-spacing:-.08em;

  line-height:1;

}



/* =========================================================
 SECTION
========================================================= */

.section{

  margin-top:78px;

}


.section-heading{

  margin-bottom:26px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

}


.section-en{

  margin-bottom:8px;

  color:var(--red);

  font-size:9px;

  line-height:1;

  font-weight:1000;

  letter-spacing:.22em;

}


.section-heading h2{

  margin:0;

  font-size:32px;

  line-height:1.2;

  letter-spacing:-.04em;

}


.section-heading p{

  margin:10px 0 0;

  color:var(--muted);

  font-size:12px;

}


.update-indicator{

  display:flex;

  align-items:center;

  gap:9px;

  color:#85868a;

  font-size:9px;

  font-weight:900;

  letter-spacing:.1em;

}



/* =========================================================
 MOVERS TABS
========================================================= */

.mover-tabs{

  display:flex;

  align-items:center;

  gap:3px;

  margin-bottom:16px;

  border-bottom:1px solid #d5d4d1;

}


.mover-tabs button{

  position:relative;

  padding:
    13px
    23px
    14px;

  border:0;

  background:transparent;

  color:#858589;

  font-size:12px;

  font-weight:900;

  cursor:pointer;

}


.mover-tabs button span{

  margin-right:5px;

  font-size:15px;

}


.mover-tabs button.active{
  color:#111;
}


.mover-tabs button.active:after{

  content:"";

  position:absolute;

  bottom:-1px;

  left:0;

  right:0;

  height:3px;

  background:var(--red);

}



/* =========================================================
 MOVERS
========================================================= */

.mover-list{

  background:#fff;

  border-top:2px solid #111;

}


.mover-card{

  min-height:132px;

  position:relative;

  display:grid;

  grid-template-columns:
    70px
    92px
    minmax(0,1fr)
    150px
    155px;

  align-items:center;

  gap:22px;

  padding:
    17px
    25px;

  border-bottom:
    1px solid #e4e3e0;

  transition:background .13s;

}


.mover-card:hover{
  background:#f9f8f6;
}


.rank{

  color:#cac9c5;

  font-size:31px;

  font-weight:1000;

  font-style:italic;

  letter-spacing:-.07em;

}


.rank.top{
  color:var(--red);
}


.mover-card img{

  width:78px;

  height:100px;

  object-fit:contain;

}


.card-info{
  min-width:0;
}


.card-code{

  margin-bottom:7px;

  color:#8b8b8e;

  font-size:9px;

  font-weight:800;

  letter-spacing:.06em;

}


.card-info h3{

  margin:0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:15px;

  line-height:1.45;

}


.card-rarity{

  display:inline-block;

  margin-top:7px;

  color:#9b9b9d;

  font-size:9px;

  font-weight:700;

}


.price-column small,
.change-column small{

  display:block;

  margin-bottom:5px;

  color:#a0a0a2;

  font-size:8px;

  font-weight:900;

  letter-spacing:.1em;

}


.price-column strong{

  font-size:17px;

  font-weight:1000;

}


.price-route{

  display:flex;

  align-items:center;

  gap:6px;

}


.previous{

  color:#8c8c8e;

  font-size:11px;

  text-decoration:none;

}


.arrow{
  color:#aaa;
}


.current{
  font-weight:1000;
}


.change-value{

  font-size:21px;

  font-weight:1000;

}


.change-value.up{
  color:var(--red);
}


.change-value.down{
  color:var(--green);
}


.change-amount{

  margin-top:4px;

  color:#888;

  font-size:10px;

}


.empty-market{

  min-height:300px;

  padding:50px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  border-bottom:1px solid #ddd;

}


.empty-market span{

  display:block;

  margin-bottom:8px;

  color:var(--red);

  font-size:9px;

  font-weight:1000;

  letter-spacing:.18em;

}


.empty-market h3{

  margin:0 0 12px;

  font-size:24px;

}


.empty-market p{

  margin:0;

  color:#888;

  font-size:12px;

  line-height:1.8;

}



/* =========================================================
 BUYLIST NOTE
========================================================= */

.buylist-note{

  margin-top:18px;

  padding:
    25px
    27px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  background:#151619;

  color:#fff;

}


.note-en{

  display:block;

  margin-bottom:5px;

  color:#777;

  font-size:8px;

  font-weight:1000;

  letter-spacing:.18em;

}


.buylist-note strong{

  display:block;

  font-size:16px;

}


.buylist-note p{

  margin:5px 0 0;

  color:#888a8d;

  font-size:10px;

}


.buylist-note a{

  padding:13px 18px;

  flex:none;

  background:var(--red);

  font-size:10px;

  font-weight:900;

}



/* =========================================================
 NEWS
========================================================= */

.news-layout{

  display:grid;

  grid-template-columns:
    1.8fr
    1fr
    1fr;

  gap:10px;

}


.news-card{

  position:relative;

  min-height:245px;

  padding:25px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  overflow:hidden;

  background:#fff;

  border:
    1px solid
    var(--line);

}


.news-card.featured{

  min-height:330px;

  background:
    var(--black);

  color:#fff;

}


.news-card.featured:before{

  content:"";

  position:absolute;

  top:-50px;

  right:-75px;

  width:220px;

  height:380px;

  background:var(--red);

  transform:rotate(25deg);

  opacity:.9;

}


.news-tag{

  position:relative;

  z-index:2;

  margin-bottom:auto;

  color:var(--red);

  font-size:8px;

  font-weight:1000;

  letter-spacing:.18em;

}


.news-card.featured
.news-tag{
  color:#ff7272;
}


.news-date{

  position:relative;

  z-index:2;

  margin-bottom:10px;

  color:#909094;

  font-size:9px;

}


.news-card h3{

  position:relative;

  z-index:2;

  margin:0;

  font-size:17px;

  line-height:1.55;

  letter-spacing:-.02em;

}


.news-card.featured h3{

  max-width:510px;

  font-size:27px;

}


.news-card p{

  position:relative;

  z-index:2;

  margin:10px 0 0;

  color:#89898c;

  font-size:11px;

  line-height:1.75;

}


.news-card.featured p{

  max-width:500px;

  color:#aaaab0;

}



/* =========================================================
 CONCEPT
========================================================= */

.market-concept{

  margin-top:90px;

  padding:
    70px
    65px;

  display:grid;

  grid-template-columns:
    160px
    minmax(0,1fr);

  background:var(--red);

  color:#fff;

}


.concept-number{

  color:
    rgba(
      255,
      255,
      255,
      .28
    );

  font-size:75px;

  line-height:1;

  font-weight:1000;

  font-style:italic;

}


.concept-content span{

  font-size:8px;

  font-weight:1000;

  letter-spacing:.19em;

  opacity:.7;

}


.concept-content h2{

  margin:
    16px
    0
    20px;

  font-size:
    clamp(
      30px,
      4vw,
      48px
    );

  line-height:1.22;

  letter-spacing:-.05em;

}


.concept-content p{

  max-width:660px;

  margin:0;

  font-size:12px;

  line-height:2;

  opacity:.78;

}



/* =========================================================
 LINKS
========================================================= */

.link-grid{

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:10px;

}


.link-card{

  min-height:280px;

  padding:34px;

  display:flex;

  flex-direction:column;

  color:#fff;

  transition:transform .15s;

}


.link-card:hover{
  transform:translateY(-3px);
}


.link-card.dark{
  background:#111215;
}


.link-card.red{
  background:var(--red);
}


.link-card span{

  font-size:8px;

  font-weight:1000;

  letter-spacing:.2em;

  opacity:.55;

}


.link-card h3{

  margin:
    auto
    0
    7px;

  font-size:30px;

  letter-spacing:-.04em;

}


.link-card p{

  margin:0;

  color:rgba(255,255,255,.65);

  font-size:11px;

}


.link-card strong{

  margin-top:28px;

  font-size:10px;

}



/* =========================================================
 FOOTER
========================================================= */

footer{

  padding:
    55px
    max(
      28px,
      calc(
        (100vw - 1224px) / 2
      )
    )
    28px;

  background:#08090b;

  color:#fff;

}


.footer-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-bottom:40px;

  border-bottom:
    1px solid #28292c;

}


.footer-logo{

  font-size:26px;

  font-weight:1000;

  letter-spacing:-.04em;

}


.footer-sub{

  margin-top:3px;

  color:#55565a;

  font-size:8px;

  font-weight:900;

  letter-spacing:.2em;

}


.footer-links{

  display:flex;

  gap:25px;

  color:#77787c;

  font-size:9px;

  font-weight:800;

}


.copyright{

  padding-top:20px;

  color:#47484b;

  font-size:8px;

}



/* =========================================================
 MOBILE
========================================================= */

@media(max-width:800px){


  .header{
    height:63px;
  }


  .header-inner{
    padding:0 15px;
  }


  .brand-main{
    font-size:21px;
  }


  .nav{
    gap:15px;
  }


  .nav a{
    display:none;
  }


  .nav-market,
  .nav-shop{
    display:block !important;
  }


  .nav-shop{
    padding:8px 10px;
  }


  main{
    padding:
      10px
      10px
      70px;
  }


  .hero{
    min-height:535px;
  }


  .hero:before{

    width:55%;

    opacity:.42;

  }


  .hero-content{
    padding:46px 22px;
  }


  .hero h1{
    font-size:49px;
  }


  .hero-description{
    font-size:12px;
  }


  .desktop{
    display:none;
  }


  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
  }


  .hero-market-bar{

    margin-top:40px;

    grid-template-columns:
      1fr
      1fr;

    gap:18px 10px;

  }


  .hero-word{
    font-size:95px;
  }


  .section{
    margin-top:58px;
  }


  .section-heading{

    align-items:flex-start;

    flex-direction:column;

    gap:14px;

  }


  .section-heading h2{
    font-size:25px;
  }


  .mover-card{

    grid-template-columns:
      42px
      67px
      minmax(0,1fr)
      90px;

    gap:9px;

    padding:
      13px
      10px;

  }


  .rank{
    font-size:22px;
  }


  .mover-card img{

    width:59px;

    height:80px;

  }


  .card-info h3{

    white-space:normal;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    font-size:11px;

  }


  .card-code{
    font-size:8px;
  }


  .card-rarity{
    display:none;
  }


  .price-column{
    text-align:right;
  }


  .price-column strong{
    font-size:13px;
  }


  .price-route{
    display:block;
  }


  .previous,
  .arrow{
    display:none;
  }


  .change-column{

    grid-column:
      3 / 5;

    text-align:right;

    margin-top:-7px;

  }


  .change-column small{
    display:none;
  }


  .change-value{
    font-size:16px;
  }


  .buylist-note{

    align-items:flex-start;

    flex-direction:column;

    gap:20px;

  }


  .news-layout{
    grid-template-columns:1fr;
  }


  .news-card.featured{
    min-height:280px;
  }


  .market-concept{

    padding:
      45px
      25px;

    grid-template-columns:1fr;

    gap:25px;

  }


  .concept-number{
    font-size:50px;
  }


  .link-grid{
    grid-template-columns:1fr;
  }


  .link-card{
    min-height:230px;
  }


  .footer-inner{

    align-items:flex-start;

    flex-direction:column;

    gap:28px;

  }


}