:root{
  --c-bg:#FFFFFF;
  --c-bg-alt:#F5F5F7;
  --c-ink:#1D1D1F;
  --c-ink-2:#6E6E73;
  --c-ink-3:#86868B;
  --c-line:#E8E8ED;
  --c-line-inv:#3A3A3C;
  --c-ink-inv-2:#A1A1A6;
  --c-divider:#D2D2D7;
  --f-en:'Inter', sans-serif;
  --f-jp:'Noto Sans JP', sans-serif;
  --nav-pad-x: 24px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-en);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
h1,h2{margin:0;}

/* ---------- Nav ---------- */
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--nav-pad-x);
  border-bottom:1px solid var(--c-line);
}
.nav-logo{
  font-family:var(--f-en);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.4px;
  color:var(--c-ink);
  white-space:nowrap;
}
.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:-8px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--c-ink);
}
.nav-toggle svg{width:20px;height:20px;}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  font-family:var(--f-en);
  font-size:12px;
  letter-spacing:0.3px;
  color:var(--c-ink-2);
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--c-ink);}

.nav-mobile-panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line);
  padding:8px var(--nav-pad-x) 20px;
  gap:4px;
  z-index:20;
}
.nav-mobile-panel[hidden]{display:none;}
.nav-mobile-panel a{
  font-family:var(--f-en);
  font-size:14px;
  letter-spacing:0.3px;
  color:var(--c-ink-2);
  padding:10px 0;
  border-bottom:1px solid var(--c-line);
}
.nav-mobile-panel a:last-child{border-bottom:none;}

/* ---------- Hero ---------- */
.hero{
  background:var(--c-bg);
  padding:80px 24px 72px;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  text-align:center;
}
.hero-title{
  font-family:var(--f-en);
  font-size:42px;
  font-weight:600;
  letter-spacing:-1.6px;
  line-height:1.05;
  color:var(--c-ink);
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.copy-jp{
  font-family:var(--f-jp);
  font-size:17px;
  letter-spacing:0.8px;
  line-height:1.6;
  color:var(--c-ink);
}
.copy-en{
  font-family:var(--f-en);
  font-size:13px;
  color:var(--c-ink-3);
}
.hero-visual{
  width:100%;
  padding-top:40px;
  display:flex;
  justify-content:center;
}
.hero-photo{
  width:100%;
  object-fit:cover;
  border-radius:24px;
}
.hero-photo--sp{aspect-ratio:1/1;}
.hero-photo--pc{aspect-ratio:1594/575;}

/* ---------- Section shared ---------- */
section{padding:110px 24px;}
.section-inner{
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.eyebrow{
  font-family:var(--f-en);
  font-size:10px;
  font-weight:600;
  letter-spacing:2.6px;
  color:var(--c-ink-3);
}

/* ---------- Concept ---------- */
.concept{background:var(--c-bg);}
.concept-heading{
  font-family:var(--f-jp);
  font-size:29px;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.5;
  text-align:center;
  color:var(--c-ink);
}
.text-block{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
}
.text-block--pad{padding-top:20px;}
.body-jp p + p,
.body-jp{
  font-family:var(--f-jp);
  font-size:14px;
  line-height:2.1;
  text-align:center;
  color:var(--c-ink);
}
.body-jp p{margin-bottom:1em;}
.body-jp p:last-child{margin-bottom:0;}
.body-en{
  font-family:var(--f-en);
  font-size:12px;
  line-height:1.85;
  text-align:center;
  color:var(--c-ink-3);
}

/* ---------- Series ---------- */
.series{background:var(--c-bg-alt);}
.series-heading{
  font-family:var(--f-en);
  font-size:28px;
  font-weight:600;
  letter-spacing:-0.9px;
  color:var(--c-ink);
  text-align:center;
}
.series-lead{
  font-family:var(--f-jp);
  font-size:14px;
  line-height:2.05;
  text-align:center;
  color:var(--c-ink-2);
}
.series-note{
  font-family:var(--f-en);
  font-size:14px;
  color:var(--c-ink-3);
  text-align:center;
}

.neta-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  padding-top:36px;
}
.neta-card{
  background:var(--c-bg);
  border-radius:20px;
  padding:24px 12px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.neta-photo{
  width:100%;
  aspect-ratio:3/4;
  object-fit:contain;
}

.neta-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.neta-name-en{
  font-family:var(--f-en);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.8px;
  color:var(--c-ink);
}
.neta-name-jp{
  font-family:var(--f-jp);
  font-size:11px;
  letter-spacing:0.6px;
  color:var(--c-ink-3);
}

/* ---------- Material ---------- */
.material{background:var(--c-bg);}
.material-heading{
  font-family:var(--f-jp);
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.55;
  text-align:center;
  color:var(--c-ink);
}
.material-content{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.material-visual{
  width:100%;
  padding:24px 0 10px;
  display:flex;
  justify-content:center;
}
.material-photo{
  height:330px;
  width:auto;
  object-fit:contain;
}
.material-text{
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* ---------- Spec list (Material) ---------- */
.spec-list{width:100%;padding-top:16px;}
.spec-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 0;
  border-bottom:1px solid var(--c-line);
}
.spec-key{
  font-family:var(--f-jp);
  font-size:13px;
  font-weight:400;
  color:var(--c-ink-2);
}
.spec-value{
  font-family:var(--f-jp);
  font-size:13px;
  font-weight:500;
  color:var(--c-ink);
}

/* ---------- ASAKUSA SOLE (brand) ---------- */
.brand{background:var(--c-bg-alt);}
.brand-heading{
  font-family:var(--f-jp);
  font-size:28px;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.5;
  text-align:center;
  color:var(--c-ink);
}
.sole-soul{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:44px;
  padding:48px 0 42px;
}
.word{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.word-en{
  font-family:var(--f-en);
  font-weight:600;
  font-size:44px;
  letter-spacing:-1.5px;
  line-height:1;
  color:var(--c-ink);
}
.word-jp{
  font-family:var(--f-jp);
  font-size:11px;
  letter-spacing:2.4px;
  color:var(--c-ink-3);
}
.word-divider{
  width:1px;
  height:58px;
  background:var(--c-divider);
}

/* ---------- Partner ---------- */
.partner{background:var(--c-ink);}
.partner-heading{
  font-family:var(--f-jp);
  font-size:28px;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.5;
  text-align:center;
  color:#FFFFFF;
}
.on-dark.body-jp{color:#FFFFFF;}
.on-dark.body-en{color:var(--c-ink-inv-2);}
.eyebrow.on-dark{color:var(--c-ink-inv-2);}

.partner-note-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding-top:20px;
}
.pending-note{
  width:100%;
  border:1px solid var(--c-line-inv);
  border-radius:14px;
  padding:18px 20px;
}
.pending-note p{
  font-family:var(--f-jp);
  font-size:12px;
  line-height:1.9;
  text-align:center;
  color:var(--c-ink-inv-2);
}

.cta-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding-top:24px;
}
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:#FFFFFF;
  border-radius:100px;
  padding:17px 0;
}
.cta-button svg{width:16px;height:16px;color:var(--c-ink);}
.cta-label{
  font-family:var(--f-jp);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.4px;
  color:var(--c-ink);
}
.cta-mail{
  font-family:var(--f-en);
  font-size:12px;
  letter-spacing:0.4px;
  color:var(--c-ink-inv-2);
}
.cta-note{
  font-family:var(--f-jp);
  font-size:11px;
  color:var(--c-ink-inv-2);
  opacity:0.75;
}

/* ---------- Footer ---------- */
.footer{
  background:var(--c-bg);
  border-top:1px solid var(--c-line);
  padding:52px 24px 48px;
}
.footer-inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.footer-row{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-logo{
  font-family:var(--f-en);
  font-size:13px;
  font-weight:600;
  letter-spacing:1.4px;
  color:var(--c-ink);
}
.footer-tagline{
  font-family:var(--f-en);
  font-size:11px;
  letter-spacing:0.4px;
  color:var(--c-ink-3);
}
.footer-mail{
  font-family:var(--f-en);
  font-size:11px;
  letter-spacing:0.4px;
  color:var(--c-ink-2);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
}
.footer-links a{
  font-family:var(--f-en);
  font-size:12px;
  letter-spacing:0.3px;
  color:var(--c-ink-2);
}
.footer-links a:hover{color:var(--c-ink);}
.footer-copyright{
  font-family:var(--f-en);
  font-size:10px;
  letter-spacing:0.3px;
  color:var(--c-ink-3);
}

/* mobile/desktop text swap must win over any earlier `display` rule
   (e.g. .nav-links, .concept-body), so it stays last in the base cascade */
.only-mobile{display:block;}
.only-desktop{display:none;}

/* ============ Desktop ============ */
@media (min-width: 880px){
  :root{--nav-pad-x: clamp(24px, 6vw, 80px);}

  .only-mobile{display:none;}
  .only-desktop{display:block;}

  .nav{padding:26px var(--nav-pad-x);}
  .nav-logo{font-size:14px;letter-spacing:1.6px;}
  .nav-toggle{display:none;}
  .nav-links{display:flex;}

  .hero{padding:150px var(--nav-pad-x) 120px;}
  .hero-inner{gap:44px;}
  .hero-title{font-size:104px;letter-spacing:-3.5px;line-height:1.04;}
  .copy-jp{font-size:25px;letter-spacing:1.2px;line-height:1.5;}
  .copy-en{font-size:16px;}
  .hero-visual{padding-top:64px;}
  .hero-photo--pc{max-width:960px;}

  section{padding:200px var(--nav-pad-x);}
  .section-inner{gap:34px;}
  .eyebrow{font-size:11px;letter-spacing:2.8px;}

  .concept .section-inner{max-width:760px;}
  .concept-heading{font-size:46px;letter-spacing:-0.5px;line-height:1.4;}
  .text-block{gap:26px;}
  .text-block--pad{padding-top:44px;}
  .body-jp{font-size:16px;line-height:2.1;}
  .body-en{font-size:14px;line-height:1.85;}

  .series .section-inner{max-width:1240px;}
  .series-heading{font-size:46px;letter-spacing:-1.2px;}
  .series-lead{font-size:16px;line-height:2.05;max-width:820px;}

  .neta-grid{grid-template-columns:repeat(6, 1fr);gap:20px;padding-top:88px;}
  .neta-card{padding:30px 18px 26px;gap:20px;}

  .material .section-inner{max-width:1240px;gap:96px;}
  .material-heading{font-size:44px;letter-spacing:-0.5px;line-height:1.4;}
  .material-content{flex-direction:row;align-items:center;gap:110px;}
  .material-visual{
    width:520px;
    height:520px;
    padding:0;
    flex-shrink:0;
  }
  .material-photo{height:480px;}
  .material-text{flex:1;gap:30px;}
  .spec-list{padding-top:14px;}
  .spec-row{padding:18px 0;}
  .spec-key,.spec-value{font-size:14px;}

  .brand .section-inner{max-width:820px;}
  .brand-heading{font-size:46px;letter-spacing:-0.5px;line-height:1.4;}
  .sole-soul{gap:120px;padding:84px 0 76px;}
  .word{gap:14px;}
  .word-en{font-size:76px;letter-spacing:-2.5px;}
  .word-jp{font-size:13px;letter-spacing:3px;}
  .word-divider{height:92px;}

  .partner .section-inner{max-width:800px;}
  .partner-heading{font-size:46px;letter-spacing:-0.5px;line-height:1.4;}
  .partner-note-wrap{padding-top:64px;}
  .pending-note{width:auto;padding:18px 26px;}
  .pending-note p{font-size:13px;line-height:1.7;}
  .cta-wrap{gap:24px;padding-top:62px;}
  .cta-button{width:auto;padding:15px 34px;}
  .cta-button svg{width:17px;height:17px;}
  .cta-label{font-size:15px;}
  .cta-mail{font-size:13px;}
  .cta-note{font-size:12px;}

  .footer{padding:76px var(--nav-pad-x) 68px;}
  .footer-row{flex-direction:row;justify-content:space-between;align-items:center;}
  .footer-links{gap:28px;}
  .footer-logo{font-size:14px;letter-spacing:1.6px;}
  .footer-tagline,.footer-mail{font-size:12px;}
  .footer-copyright{font-size:11px;}
}