/* Pixel-spec implementation (1280px base, numeric-first) */
:root{
  --page-max: 1280px;

  --c-text: #333333;
  --c-muted: #333333;
  --c-line: #9a9a9a;
  --c-btn: #6f6f6f;
  --c-bg: #ffffff;
  --c-footer: #7a7a7a;

  /* Central column max width (user confirmed) */
  --content-w: 800px;

  /* Rule width: tie to content width for strict spec */
  --rule-w: 800px;

  /* Typography (from annotation) */
  --fs-label: 10px;
  --fs-h1: 62px;
  --fs-kicker: 10px;
  --fs-lead: 18px;
  --fs-btn: 12px;
  --fs-section: 20px;

  --fs-list: 13px;
  --lh-list: 14.3px; /* user confirmed line-height is px */

  --fs-axes-sub: 18px;
  --fs-circle-title: 21.5px;
  --fs-circle-body: 15px;

  --fs-spec: 14px;
  --lh-spec: 19.5px;

  --fs-join-lead: 14px;
  --fs-creator: 12px;

  /* FAQ (from annotation) */
  --fs-faq: 13px;
  --lh-faq: 23px;

  /* Spacing tokens (from annotation) */
  --hero-pt: 33px;
  --space-65: 65px;
  --space-49: 43px;
  --space-33: 33px;
  --space-40: 40px;

  --section-pad-top: 49px;
  --section-pad-bottom: 51px;

  --btn-h: 38px;

  /* Circle diameter (user confirmed) */
  --circle-d: 165px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--c-bg);
  color: #333333;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight:300;
}

.container{
  width: min(var(--page-max), calc(100% - 64px));
  margin: 0 auto;
  max-width: var(--content-w);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
}
.topbar__inner{
  width: min(var(--page-max), calc(100% - 64px));
  margin: 0 auto;
  max-width: var(--page-max);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
}
.topbar__left{
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: .14em;
}
.sep{ color: var(--c-line); margin: 0 8px; }
.nav{ display:flex; gap: 14px; align-items:center; }
.nav a{ font-size: 10px; color: var(--c-muted); letter-spacing:.12em; text-decoration:none; }
.nav a:hover{ text-decoration: underline; }
.nav-toggle{
  display:none;
  width:44px; height:38px;
  border-radius:10px;
  border:1px solid var(--c-line);
  background: var(--c-bg);
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background: var(--c-muted);
  margin:4px auto;
  border-radius:99px;
}

/* HERO */
.hero{
  padding-top: var(--hero-pt);
  text-align:center;
}
.hero__label{
  margin:0;
  font-size: var(--fs-label);
  font-weight:400;
  color: var(--c-text);
  letter-spacing: .14em;

  text-align: left;
}
.hero__h1{
  margin: var(--space-65) 0 0;
  font-size: var(--fs-h1);
  font-weight:300;
  letter-spacing: .08em;
}
.hero__kicker{
  margin: var(--space-49) 0 0;
  font-size: var(--fs-kicker);
  font-weight:300;
  color: var(--c-muted);
  letter-spacing:.12em;
}
.hero__lead{
  margin: var(--space-33) 0 0;
  font-size: var(--fs-lead);
  font-weight:300;
  letter-spacing:.06em;
  line-height: 1.9;
}
.quote{ font-weight:400; }
.hero__btnrow{
  margin-top: var(--space-33);
  display:flex;
  justify-content:center;
  gap: 14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: var(--btn-h);
  padding: 0 18px;
  border-radius: 999px;
  background: var(--c-btn);
  color: #fff;
  font-size: var(--fs-btn);
  font-weight:300;
  letter-spacing:.10em;
  text-decoration:none;
}
.btn--ghost{ background:#bdbdbd; color:#fff; }
.hero__meta{
  margin-top: var(--space-40);
  font-size: 10px;
  color: var(--c-text);
  letter-spacing:.10em;
}

/* SECTION HEAD */
.section{
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
  text-align:center;
}
.sectionHead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}
.tri{
  width:0; height:0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--c-line);
  margin-bottom: 6px;
}
.sectionTitle{
  margin:0;
  font-size: var(--fs-section);
  font-weight:300;
  letter-spacing:.10em;
}
.rule{
  width: var(--rule-w);
  height: 1px;
  background: var(--c-line);
  margin-top: 16px;
}

/* LISTS */
.bullets{
  list-style:none;
  padding: 0;
  margin: 33px auto 0;
  width: 520px;
  text-align:center;
  font-size: 14px;
  font-weight:300;
  letter-spacing:.06em;
  line-height: var(--lh-list);
}
.bullets li{
  margin: 12px 0;
  position:relative;
  padding-left: 0;
}
.bullets li::before{
  content:"・";
  position: static;
  margin-right: 6px;
  color: var(--c-line);
}

/* AXES */
.axes__sub{
  margin: 33px 0 0;
  font-size: var(--fs-axes-sub);
  font-weight:300;
  color: #333333;
  letter-spacing:.06em;
}
.circles{
  margin-top: 33px;
  display:flex;
  justify-content:center;
  gap: 36px;
  flex-wrap:wrap;
}
.circle{
  width: var(--circle-d);
  height: var(--circle-d);
  border-radius: 999px;
  border: 1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top: 18px;
}
.circle h3{
  margin:0;
  font-size: var(--fs-circle-title);
  font-weight:500;
  letter-spacing:.08em;
}
.circleRule{
  width: 60%;
  height: 1px;
  background: var(--c-line);
  margin: 10px 0 14px;
}
.circle p{
  margin:0;
  font-size: var(--fs-circle-body);
  font-weight:300;
  letter-spacing:.06em;
  line-height: 1.7;
}

/* SPEC */
.spec{
  margin: 33px auto 0;
  width: 520px;
  text-align:left;
  font-size: 15px;
  font-weight:300;
  line-height: 21px;

  position: relative;
  left: 85px;
}
.spec > div{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 4px 0;
}
.spec dt{ margin:0; color: var(--c-muted); }
.spec dd{ margin:0; }
.spec__note dt{ visibility:hidden; }

/* JOIN */
.join__lead{
  margin: 33px 0 0;
  font-size: 15px;
}
.join__creator{
  margin: 19px 0 0;
  font-size: var(--fs-creator);
  color: var(--c-text);
}
.link{
  margin-left: 8px;
  color: var(--c-text);
  text-decoration: underline;
}
.join__btnrow{
  margin-top: 33px;
  display:flex;
  justify-content:center;
}
.join__note{
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--c-muted);
}

/* FAQ */
.faq{
  margin: 96px auto 0;
  width: 520px;
  text-align:left;
  font-size: 14px;
  line-height: var(--lh-faq);

  position: relative;
  left: 83px;
}
.qa{ margin: 0 0 22px; }
.q,.a{ color: var(--c-muted); }

/* FOOTER */
.footer{
  margin-top: 105px;
  background: var(--c-footer);
  color: rgba(255,255,255,.88);
  padding: 44px 0 52px;
}
.footer__inner{
  max-width: 720px;
  margin: 0 auto;
  text-align:center;
}
.footer__line{
  margin:0;
  font-size: 10px;
  letter-spacing:.12em;
}
.footer__copy{
  margin: 18px 0 0;
  font-size: 10px;
  opacity:.9;
}
.footer__cr{
  margin: 18px 0 0;
  font-size: 10px;
  opacity:.8;
}

/* Responsive minimal */
@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .nav{
    display:none;
    position:absolute;
    right:16px;
    top:52px;
    background:#fff;
    border:1px solid var(--c-line);
    border-radius:12px;
    padding:10px;
    flex-direction:column;
    gap:10px;
  }
  .nav.is-open{ display:flex; }
  .hero__h1{ font-size: 44px; }
  .hero{ padding-top: 72px; }
  .container{ max-width: 520px; }
  .rule{ width: 100%; }
  .bullets,.spec,.faq{ width: 100%; }
}


/* overrides */
#join.section{ padding-bottom: 0; }


/* --- SP fix: reset desktop offset tweaks on small screens --- */
@media (max-width: 760px){
  /* reset right-shifts applied for PC layout */
  .spec, .faq{
    left: 0 !important;
  }
  /* bullets: keep readable on SP (centered block but left text) */
  .bullets{
    text-align: left !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
  .bullets li{
    padding-left: 18px !important;
  }
  .bullets li::before{
    position: absolute !important;
    margin-right: 0 !important;
    left: 0 !important;
    top: 0 !important;
  }
}


/* --- SVG hero title helpers --- */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.heroTitle{
  display:block;
  width: 100%;
  max-width: 980px;
  margin: var(--space-65) auto 0;
}
.heroTitle img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 760px){
  .heroTitle{ max-width: 520px; }
}

/* HERO extra */
.hero__sublead{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--c-text);
}

/* JOIN requirements */
.join__req{
  margin: 14px 0 0;
  font-size: var(--fs-small);
  color: var(--c-muted);

  font-size: 13px;
  color: var(--c-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* Workbook link + modal */
.wbLink{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wbModal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease;
}
.wbModal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wbModal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .22s ease;
}
.wbModal__panel{
  position: relative;
  width: min(560px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.wbModal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.wbModal__title{
  margin: 2px 0 10px;
  font-size: 16px;
}
.wbModal__body p{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
}
.wbModal.is-open .wbModal__overlay{ opacity: 1; }
.wbModal.is-open .wbModal__panel{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .wbModal, .wbModal__overlay, .wbModal__panel{ transition: none !important; }
  .wbModal__panel{ transform: none !important; }
}


.join__note--sub{
  margin-top: 8px;
}

.join__req .label{ white-space: nowrap; }


/* --- unify text color --- */
/* Keep footer white text and button labels as-is; unify the rest to #333333 */
main, .topbar, .topbar__left, .nav a, .hero__label, .hero__kicker, .hero__lead,
.hero__meta, .sectionTitle, .axes__sub, .bullets, .spec, .join__lead, .join__creator,
.join__note, .faq, .copy, .facts, .hero__statement, .hero__role, .hero__name, .hero__workbook{
  color: #333333;
}
.link, .workbookLink{
  color: #333333;
}