/* ===================================================
   BABEL CREATE — Sub-page shared styles
   =================================================== */

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --red: #e0202a;
  --red-cta: #c40000;
  --bg: #080808;
  --fg: #f5f0ea;
  --font-en: "Oswald", "Anton", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-body: "Inter", sans-serif;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---- Header (reuse from fv.css) ---- */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: .85rem clamp(1.2rem, 3.5vw, 3.2rem);
}
.hdr::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  pointer-events: none; z-index: -1;
}
.hdr__brand {
  display: flex; flex-direction: row; align-items: center; gap: .9rem;
  text-decoration: none; flex-shrink: 0;
}
.hdr__brand img {
  width: clamp(86px, 8vw, 110px);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.15));
}
.hdr__brand span {
  font-family: var(--font-en);
  font-size: .44rem;
  letter-spacing: .28em;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  border-left: 1px solid rgba(255,255,255,.2);
  padding-left: .9rem;
}
.hdr__nav {
  display: flex;
  gap: clamp(1.4rem, 2.6vw, 2.8rem);
}
.hdr__nav a {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  position: relative;
  padding: .3rem 0;
  transition: color .3s;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.hdr__nav a:hover { color: #fff; }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__nav a.is-current { color: #fff; }
.hdr__nav a.is-current::after { transform: scaleX(1); }

.hdr__right { display: flex; align-items: center; gap: 1.4rem; }
.hdr__social {
  display: flex; align-items: center; gap: 1rem; list-style: none;
}
.hdr__social a {
  color: rgba(255,255,255,.72);
  display: flex; transition: color .3s, transform .3s;
}
.hdr__social a:hover { color: #fff; transform: translateY(-2px); }
.hdr__burger {
  width: 30px; height: 22px;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0;
}
.hdr__burger span {
  display: block; height: 1.6px; width: 100%;
  background: #fff; border-radius: 2px;
  transition: transform .35s, opacity .3s;
}
.hdr__burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hdr__burger.is-open span:nth-child(2) { opacity: 0; }
.hdr__burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---- Mobile Nav Drawer ---- */
.mnav {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
}
.mnav.is-open { pointer-events: auto; }
.mnav__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  opacity: 0; transition: opacity .4s ease;
}
.mnav.is-open .mnav__overlay { opacity: 1; }
.mnav__panel {
  position: absolute; top: 0; right: 0;
  width: min(340px, 88vw); height: 100vh;
  background: #0d0d0d;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 2.4rem;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  border-left: 1px solid rgba(255,255,255,.07);
}
.mnav.is-open .mnav__panel { transform: translateX(0); }
.mnav__list {
  list-style: none; padding: 0; margin: 0 0 3rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.mnav__link {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 400;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .25s, padding-left .25s;
}
.mnav__link:hover { color: #fff; padding-left: .5rem; }
.mnav__social {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.4rem; align-items: center;
}
.mnav__social a { color: rgba(255,255,255,.5); display: flex; transition: color .3s; }
.mnav__social a:hover { color: var(--red); }

/* ---- Sub-page Hero FV ---- */
.sp-hero {
  position: relative;
  width: 100%;
  height: clamp(300px, 50vw, 560px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.sp-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.sp-hero__bg.is-loaded { transform: scale(1); }
.sp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,.5) 100%
  );
}
.sp-hero__inner {
  position: relative; z-index: 1;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.8rem, 6vw, 6rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.sp-hero__en {
  font-family: "Anton", var(--font-en);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: uppercase;
  display: block;
  margin-bottom: .4rem;
}
.sp-hero__ja {
  font-family: var(--font-jp);
  font-size: clamp(.8rem, 1.4vw, 1rem);
  font-weight: 300;
  letter-spacing: .18em;
  color: rgba(255,255,255,.82);
  display: block;
  margin-bottom: .8rem;
}
.sp-hero__rule {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--red);
}

/* ---- Page content wrapper ---- */
.sp-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}

/* sp-foot は footer.css に統一 */

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .hdr__nav { display: none; }
}
@media (max-width: 640px) {
  .hdr { padding: 1rem 1.1rem; }
  .hdr__brand span { display: none; }
  .hdr__social { display: none; }
  .sp-hero__en { font-size: clamp(3rem, 14vw, 5rem); }
}