/* Profile page (pixel-spec) — matches LP style */

:root{
  --page-max: 1280px;
  --content-w: 800px;

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

  /* Typography from spec image */
  --fs-label: 10px;     /* regular */
  --fs-name: 22px;      /* light */
  --fs-role: 22px;      /* thin */
  --fs-statement: 13px; /* light */
  --lh-copy: 25px;
  --fs-btn: 12px;       /* thin */
  --fs-section: 20px;   /* demiLight */
  --fs-bullets: 13px;   /* light */
  --lh-bullets: 25px;

  /* Spacing from spec image (most recurring numbers) */
  --hero-pt: 33px;
  --gap-18: 18px;
  --gap-21: 21px;
  --gap-22: 22px;
  --gap-25: 25px;
  --gap-30: 30px;
  --gap-38: 38px;
  --gap-49: 49px;
  --gap-33: 33px;
  --gap-58: 58px;
  --gap-56: 56px;
  --gap-93: 93px;
  --gap-105: 105px;

  --section-pt: 49px;
  --section-pb: 56px;

  --btn-h: 38px;
  --rule-w: 800px;
}

*{ 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);
  text-align:center;
}

/* topbar */
.topbar{
  position:sticky;
  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); }
.hero__label{
  margin:0;
  font-size:var(--fs-label);
  color: var(--c-text);
  letter-spacing:.12em;
  text-align:left;
}
.hero__name{
  margin: var(--gap-18) 0 0;
  font-size: var(--fs-name);
  font-weight:300;
  letter-spacing:.10em;
}
.hero__role{
  margin: var(--gap-21) 0 0;
  font-size: var(--fs-role);
  font-weight:300;
  letter-spacing:.10em;
}
.hero__statement{
  margin: var(--gap-25) 0 0;
  font-size: var(--fs-statement);
  font-weight:300;
  letter-spacing:.06em;
  line-height: var(--lh-copy);
  color: var(--c-muted);
}
.hero__btnrow{
  margin-top: var(--gap-30);
  display:flex;
  justify-content:center;
}
.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);
  letter-spacing:.10em;
  text-decoration:none;
}
.btn--ghost{
  background:#bdbdbd;
  color:#fff;
}
.tri{
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:12px solid var(--c-line);
}

/* sections */
.section{
  padding-top: var(--section-pt);
  padding-bottom: var(--section-pb);
}
.sectionHead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}
.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: var(--gap-33);
}

/* copy blocks */
.copy{
  margin-top: 33px;
  font-size: 13px;
  line-height: var(--lh-copy);
  letter-spacing:.06em;
  color: var(--c-text);
}
.copy__kicker{
  margin: 0 0 12px;
  color: var(--c-text);
}
.copy p{ margin:0; }
.copy--small{ color: var(--c-text); }

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

/* CTA row under promise */
.ctaRow{
  /* Move CTA buttons up by 53px (per spec) */
  margin-top: calc(var(--gap-93) - 53px);
  display:flex;
  justify-content:center;
  gap: 18px;
  flex-wrap:wrap;
}

/* footer */
.footer{
  /* Move footer up by 117px (per spec) */
  margin-top: calc(var(--gap-105) - 117px);
  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 */
@media (max-width: 760px){
  :root{ --content-w: 520px; --rule-w: 100%; }
  .hero__label{ text-align:center; }
  .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; }
  .bullets{ width: 100%; }
}


/* basis facts (3 lines) */
.facts{
  list-style:none;
  padding:0;
  margin: 22px auto 0;
  width: 520px;
  text-align:left;
  font-size: 13px;
  line-height: var(--lh-copy);
  letter-spacing:.06em;
  color: var(--c-text);
}
.facts li{
  margin: 6px 0;
  position:relative;
  padding-left: 18px;
}
.facts li::before{
  content:"・";
  position:absolute;
  left:0; top:0;
  color: var(--c-line);
}
@media (max-width: 760px){
  .facts{ width:100%; }
}


/* --- 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;
}