@charset "utf-8";

/* ===== base ===== */
:root{
  --ink:#111111;
  --bg:#ffffff;
  --line:#111111;
  --gray:#f2f2f2;
  --muted:#666666;
  --red:#e60012;
  --blue:#0b4bd8;
  --yellow:#f5c400;
  --green:#1a9b3c;
  --pixel:'Press Start 2P', 'DotGothic16', monospace;
  --jp:'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --header-h:82px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h);}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--jp); line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,p{margin:0}
.sp{display:none}

/* ===== logo ===== */
.logo{
  font-family:var(--pixel);
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
}
.logo--sm{font-size:19px; -webkit-text-stroke-width:2.5px}
.logo img{display:block; image-rendering:pixelated}
.logo--sm img{height:38px; width:auto}
.logo--hero img{width:min(660px, 66vw); height:auto}
.footer__brand .logo--sm img{height:34px}
.logo--hero{
  font-size:clamp(30px, 7.6vw, 100px);
  letter-spacing:.1em;
  -webkit-text-stroke-width:clamp(2px, .5vw, 7px);
}

/* ===== color chips ===== */
.chips{display:flex; gap:12px; justify-content:center}
.chips i{width:16px; height:16px; display:block}
.chips i:nth-child(1){background:var(--red)}
.chips i:nth-child(2){background:var(--blue)}
.chips i:nth-child(3){background:var(--yellow)}
.chips i:nth-child(4){background:var(--green)}
.chips--sm i{width:12px; height:12px}
.chips--sm{gap:8px}
.chips--lg i{width:22px; height:22px}
.chips--footer{justify-content:flex-end; padding:0 40px 26px}

/* ===== header ===== */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--line);
}
.header__inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:0 34px;
}
.gnav{display:flex; gap:34px; font-family:var(--pixel); font-size:12px}
.gnav a{position:relative; padding:6px 0}
.gnav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:3px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .2s steps(4);
}
.gnav a:hover::after{transform:scaleX(1)}
.header__right{display:flex; align-items:center; gap:26px}
.store{display:flex; align-items:center; gap:9px; font-family:var(--pixel); font-size:11px; letter-spacing:.04em}
.store:hover{opacity:.6}
.store .ext{opacity:.55}
.burger{
  width:38px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  display:none; flex-direction:column; justify-content:space-between;
}
.burger span{display:block; height:4px; background:var(--ink)}
.burger.is-open span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
.burger span{transition:transform .2s, opacity .2s}

/* ===== drawer ===== */
.drawer{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:var(--bg); border-bottom:2px solid var(--line);
  padding:34px 34px 40px;
  display:none;
}
.drawer.is-open{display:block}
.drawer__nav{display:flex; flex-direction:column; gap:22px; font-family:var(--pixel); font-size:14px; margin-bottom:34px}

/* ===== hero ===== */
.hero{
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100dvh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:70px 20px 90px; position:relative; text-align:center;
}
.hero__tagline{
  margin-top:38px;
  font-size:clamp(16px, 2.4vw, 26px);
  letter-spacing:.5em; text-indent:.5em;
}
.btn-start{
  margin-top:44px;
  display:inline-block; padding:22px 42px;
  border:3px solid var(--ink);
  font-family:var(--pixel); font-size:clamp(13px,1.5vw,19px); letter-spacing:.12em;
  transition:background .15s steps(2), color .15s steps(2);
}
.btn-start:hover{background:var(--ink); color:#fff}
.btn-start--sm{padding:16px 30px; font-size:13px; margin-top:26px}
.hero .chips{margin-top:34px}
.scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--pixel); font-size:9px; letter-spacing:.1em;
}
.scroll svg{animation:bob 1.4s steps(3) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ===== section ===== */
.section{padding:64px 40px; border-top:2px solid var(--line)}
.section__head{display:flex; align-items:center; gap:22px; margin-bottom:32px}
.section__title{font-family:var(--pixel); font-size:clamp(15px,2vw,22px); letter-spacing:.06em; white-space:nowrap}
.rule{flex:1; height:2px; background:var(--ink)}
.viewall{font-family:var(--pixel); font-size:12px; white-space:nowrap}
.viewall:hover{opacity:.6}

/* ===== items ===== */
.items{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{border:2px solid var(--line); background:var(--bg)}
.card__link{display:block; height:100%; transition:transform .15s steps(2)}
.card:hover .card__link{transform:translate(-3px,-3px)}
.card:hover{box-shadow:6px 6px 0 var(--ink)}
.card{transition:box-shadow .15s steps(2)}
.card__thumb{
  position:relative; background:#fafafa;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card__thumb picture{display:contents}
.card__thumb img{width:100%; height:100%; object-fit:contain; padding:6px}
.card__no{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:var(--pixel); font-size:12px;
  border-bottom:2px solid var(--ink); padding-bottom:5px;
}
.card__thumb.is-empty::after{
  content:'NO IMAGE'; font-family:var(--pixel); font-size:11px; color:#bdbdbd;
}
/* COMING SOON カード */
.card__thumb--soon{
  background:repeating-linear-gradient(45deg,#f7f7f7 0 12px,#f0f0f0 12px 24px);
}
.card__thumb--soon::after{
  content:'COMING SOON'; font-family:var(--pixel); font-size:12px; color:#b5b5b5;
}
.card--soon{border-style:dashed}
.card--soon:hover{box-shadow:none}
.card--soon:hover .card__link{transform:none}
.card--soon .card__body h3,
.card--soon .card__body p{color:#8c8c8c}
.card--soon .chips i{opacity:.35}
.soon{
  font-family:var(--pixel); font-size:9px; letter-spacing:.08em;
  border:2px solid #c9c9c9; color:#a0a0a0; padding:6px 9px; line-height:1;
}
.badge{
  position:absolute; top:14px; right:14px; z-index:2;
  font-family:var(--pixel); font-size:9px; letter-spacing:.06em; line-height:1;
  padding:7px 9px; background:var(--ink); color:#fff;
}
.badge--info{background:var(--blue)}
.card__body{padding:22px 20px 18px}
.card__body h3{font-family:var(--pixel); font-size:16px; letter-spacing:.02em}
.card__body p{margin-top:12px; font-size:15px; color:#333}
.card__foot{display:flex; align-items:center; justify-content:space-between; margin-top:22px}
.card__foot .chips{justify-content:flex-start}
.colors{font-family:var(--pixel); font-size:10px; letter-spacing:.08em; color:#8c8c8c}
.arrow{font-size:22px; line-height:1}

/* ===== about ===== */
.about{display:grid; grid-template-columns:1fr 1fr; gap:40px 60px; align-items:start}
.about__lead p{font-size:clamp(17px,1.8vw,22px); font-weight:700; line-height:2.1}
.about__body p{font-size:15px; margin-bottom:22px; color:#333}
.about__catch{
  font-family:var(--pixel); font-size:clamp(12px,1.5vw,16px)!important;
  line-height:1.9; color:var(--ink)!important; margin-top:30px;
  border-left:8px solid var(--red); padding-left:16px;
}

/* ===== news ===== */
.news{border-top:2px solid var(--line); padding:44px 40px}
.news__inner{display:flex; align-items:center; gap:44px}
.news__title{font-family:var(--pixel); font-size:20px}
.news__list{
  flex:1; border-left:2px solid var(--line); border-right:2px solid var(--line);
  padding:4px 34px;
}
.news__list li{display:flex; gap:22px; align-items:baseline; padding:3px 0; font-size:15px}
.news__list time{font-family:var(--pixel); font-size:12px; white-space:nowrap}
.news__list li:hover span{text-decoration:underline}

/* ===== journal ===== */
.journal{text-align:center; padding:14px 0 10px}
.journal__text{font-size:16px}

/* ===== footer ===== */
.footer{border-top:2px solid var(--line); padding-top:34px}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; padding:0 40px 26px; flex-wrap:wrap;
}
.footer__brand{display:flex; flex-direction:column; gap:8px}
.footer__brand small{font-family:var(--pixel); font-size:9px; letter-spacing:.12em}
.footer__nav{display:flex; align-items:center; gap:14px; font-family:var(--pixel); font-size:11px; flex-wrap:wrap}
.footer__nav a:hover{opacity:.6}
.footer__nav span{color:#bbb}
.footer__sns{display:flex; gap:16px}
.footer__sns a:hover{opacity:.6}
.footer__meta{display:flex; flex-direction:column; text-align:right; font-family:var(--pixel); font-size:10px; gap:7px; line-height:1.6}

/* ===== responsive ===== */
@media (max-width:1024px){
  .items{grid-template-columns:repeat(2,1fr)}
  .gnav{gap:22px; font-size:11px}
  .header__inner{padding:0 22px}
}
@media (max-width:820px){
  :root{--header-h:66px}
  .sp{display:inline}
  .gnav{display:none}
  .burger{display:flex}
  .store{font-size:9px; gap:6px}
  .store svg:first-child{width:20px; height:20px}
  .section{padding:48px 22px}
  .section__head{gap:14px; justify-content:space-between}
  .rule{display:none}
  .items{grid-template-columns:1fr}
  .about{grid-template-columns:1fr; gap:26px}
  .news{padding:36px 22px}
  .news__inner{flex-direction:column; align-items:flex-start; gap:20px}
  .news__list{
    width:100%; border-left:0; border-right:0;
    border-top:2px solid var(--line); border-bottom:2px solid var(--line);
    padding:14px 0;
  }
  .news__list li{flex-direction:column; gap:2px; padding:7px 0}
  .footer__inner{flex-direction:column; align-items:flex-start; padding:0 22px 22px; gap:22px}
  .footer__meta{text-align:left}
  .chips--footer{justify-content:flex-start; padding:0 22px 24px}
  .hero__tagline{letter-spacing:.3em; text-indent:.3em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}