/* ========================================
   CHARACTERS INC. - Corporate Website
   White / Pop / Character-driven
   ======================================== */

/* Custom Font */
@font-face {
  font-family: 'BirchStd';
  src: url('BirchStd.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Reset & Base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-bg: #f7f7f7;
  --color-text: #1a1a1a;
  --color-text-light: #666666;
  --color-accent: #1a1a1a;
  --color-border: #e0e0e0;
  --font-logo: 'BirchStd', 'Georgia', serif;
  --font-en: 'Inter', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;
  --max-width: 1100px;
  --frame-pad: 48px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ja);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ========================================
   Header (Top Page)
   ======================================== */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--frame-pad);
}

.top-bar-logo {
  font-family: var(--font-logo);
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.top-bar-nav {
  display: flex;
  gap: 36px;
}

.top-bar-link {
  font-family: var(--font-logo);
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.1em;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.top-bar-link:hover {
  opacity: 1;
}

.top-bar-link.active {
  opacity: 1;
}

/* Hamburger button — hidden on desktop */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* Hamburger open state — X shape */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========================================
   Copyright (bottom-right)
   ======================================== */
.hero-copy {
  position: fixed;
  bottom: 28px;
  right: var(--frame-pad);
  z-index: 100;
  font-family: var(--font-logo);
  font-size: 11px;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}

/* ========================================
   Top Page
   ======================================== */
.page-top {
  overflow: hidden;
  height: 100vh;
}

/* ========================================
   Hero — Center title, characters surround
   ======================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.hero-title {
  font-family: var(--font-logo);
  font-size: clamp(64px, 12vw, 160px);
  font-weight: normal;
  color: var(--color-text);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.hero-tagline {
  font-family: var(--font-logo);
  font-size: clamp(14px, 2vw, 22px);
  font-weight: normal;
  color: var(--color-text);
  letter-spacing: 0.15em;
  opacity: 0.5;
}

/* ========================================
   Characters — Dense ring around center
   ======================================== */
.char {
  position: absolute;
  pointer-events: none;
}

.char-08 { width: 363px; top: -135px; left: -87px; transform: rotate(-8deg); z-index: 2; }
.char-02 { width: 319px; top: 5.6%; left: 13.3%; transform: rotate(12deg); z-index: 5; }
.char-22 { width: 248px; top: -49px; left: 32.6%; transform: rotate(-12deg); z-index: 3; }
.char-17 { width: 193px; top: 388px; left: 87%; transform: rotate(8deg); z-index: 4; }
.char-48 { width: 351px; top: -116px; right: 366px; transform: rotate(177deg); z-index: 2; }
.char-04 { width: 315px; top: -2.5%; right: -7px; transform: rotate(12deg); z-index: 3; }
.char-42 { width: 198px; top: 22.1%; right: 19px; transform: rotate(-10deg); z-index: 4; }
.char-05 { width: 290px; top: 68.7%; right: -79px; transform: rotate(8deg); z-index: 3; }
.char-33 { width: 315px; bottom: -2px; right: 372px; transform: rotate(-58deg); z-index: 3; }
.char-47 { width: 236px; bottom: 18px; right: 12.8%; transform: rotate(-8deg); z-index: 2; }
.char-12 { width: 257px; bottom: -17px; left: 36.8%; transform: rotate(6deg); z-index: 3; }
.char-38 { width: 363px; bottom: -111px; left: 13.9%; transform: rotate(5deg); z-index: 2; }
.char-06 { width: 266px; bottom: -101px; left: -52px; transform: rotate(-10deg); z-index: 3; }
.char-14 { width: 278px; bottom: 44.7%; left: -29px; transform: rotate(8deg); z-index: 4; }
.char-35 { width: 190px; top: 54.2%; left: 24px; transform: rotate(-5deg); z-index: 3; }
.char-03 { width: 228px; top: 13.9%; right: 17.1%; transform: rotate(18deg); z-index: 5; }
.char-01 { width: 263px; bottom: 24.9%; left: 17%; transform: rotate(-15deg); z-index: 5; }
.char-29 { width: 247px; bottom: 28.6%; right: 14.1%; transform: rotate(27deg); z-index: 5; }

/* ========================================
   Sub Page Characters (shared container)
   ======================================== */
.sub-characters {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ---- COMPANY: Red / Pink — stacked from bottom ---- */
.sc-21 { width: 240px; bottom: 11px; left: 1.7%; transform: rotate(-2deg); z-index: 1; }
.sc-39 { width: 230px; bottom: -66px; left: 42.1%; transform: rotate(3deg); z-index: 1; }
.sc-03 { width: 220px; bottom: -21px; left: 25.5%; transform: rotate(-2deg); z-index: 1; }
.sc-07 { width: 210px; bottom: -10px; right: 36px; transform: rotate(3deg); z-index: 1; }
.sc-42 { width: 190px; bottom: 180px; left: 16.3%; transform: rotate(4deg); z-index: 2; }
.sc-11 { width: 180px; bottom: 170px; left: 32%; transform: rotate(-3deg); z-index: 2; }
.sc-33 { width: 180px; bottom: 122px; right: 11.6%; transform: rotate(5deg); z-index: 2; }
.sc-14 { width: 150px; bottom: 150px; left: 63.3%; transform: rotate(-4deg); z-index: 3; }
.sc-30 { width: 140px; bottom: 1px; right: 26.2%; transform: rotate(5deg); z-index: 3; }
.sc-45 { width: 201px; bottom: 102px; left: 47.6%; transform: rotate(-3deg); z-index: 3; }

/* ---- PARTNERS: Purple / Green / Mint — stacked from bottom ---- */
.sp-43 { width: 240px; bottom: 9px; left: 0.2%; transform: rotate(-3deg); z-index: 1; }
.sp-22 { width: 230px; bottom: -21px; left: 23.7%; transform: rotate(2deg); z-index: 1; }
.sp-08 { width: 220px; bottom: -12px; left: 47.6%; transform: rotate(-2deg); z-index: 1; }
.sp-48 { width: 210px; bottom: -20px; right: 0px; transform: rotate(3deg); z-index: 1; }
.sp-50 { width: 190px; bottom: 184px; left: 63.1%; transform: rotate(3deg); z-index: 2; }
.sp-05 { width: 147px; bottom: 181px; left: 35.3%; transform: rotate(-4deg); z-index: 2; }
.sp-13 { width: 226px; bottom: 26px; right: 14.9%; transform: rotate(5deg); z-index: 2; }
.sp-04 { width: 140px; bottom: 138px; left: 17.9%; transform: rotate(-3deg); z-index: 3; }
.sp-17 { width: 150px; bottom: 270px; left: 46.9%; transform: rotate(4deg); z-index: 3; }
.sp-29 { width: 163px; bottom: 200px; right: 8.2%; transform: rotate(-5deg); z-index: 3; }

/* ---- CONTACT: Yellow / Orange — stacked from bottom ---- */
.st-06 { width: 240px; bottom: 7px; left: 0.2%; transform: rotate(-2deg); z-index: 1; }
.st-12 { width: 230px; bottom: -16px; left: 20.9%; transform: rotate(3deg); z-index: 1; }
.st-02 { width: 293px; bottom: -16px; left: 42.5%; transform: rotate(-3deg); z-index: 1; }
.st-26 { width: 210px; bottom: -26px; right: 72px; transform: rotate(2deg); z-index: 1; }
.st-16 { width: 190px; bottom: 201px; left: 57.8%; transform: rotate(4deg); z-index: 2; }
.st-47 { width: 180px; bottom: 170px; left: 33%; transform: rotate(-3deg); z-index: 2; }
.st-46 { width: 176px; bottom: 142px; right: 12.4%; transform: rotate(5deg); z-index: 2; }
.st-38 { width: 214px; bottom: 159px; left: 14.2%; transform: rotate(-4deg); z-index: 3; }
.st-49 { width: 150px; bottom: 54px; right: 22.9%; transform: rotate(5deg); z-index: 3; }

/* ========================================
   Sub Pages
   ======================================== */
.page-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 140px var(--frame-pad) 120px;
}

/* ========================================
   Company
   ======================================== */
.company {
  padding: 0;
}

.company-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.company-message-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.6;
  color: var(--color-text);
}

.company-message-text {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 2;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table tr {
  border-bottom: 1px solid var(--color-border);
}

.info-table th,
.info-table td {
  padding: 16px 0;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}

.info-table tr:first-child th,
.info-table tr:first-child td {
  padding-top: 0;
}

.info-table th {
  width: 100px;
  font-weight: 500;
  color: var(--color-text-light);
  white-space: nowrap;
}

.info-table td {
  padding-left: 24px;
  color: var(--color-text);
}

/* ========================================
   Partners
   ======================================== */
.partners {
  text-align: center;
  padding-top: 40px;
}

.partners-coming {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.partners-note {
  font-size: 14px;
  color: var(--color-text-light);
}

/* ========================================
   Contact
   ======================================== */
.contact {
  text-align: center;
  padding-top: 40px;
}

.contact-content {
  max-width: 480px;
  margin: 0 auto;
}

.contact-text {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 32px;
}

.contact-email {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  padding: 16px 48px;
  border: 2px solid var(--color-text);
  border-radius: 2px;
  transition: all 0.3s;
  letter-spacing: 0.02em;
}

.contact-email:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  :root {
    --frame-pad: 24px;
  }

  .top-bar {
    padding: 16px var(--frame-pad);
  }

  .top-bar-logo {
    font-size: 16px;
  }

  .hamburger {
    display: block;
    position: absolute;
    right: var(--frame-pad);
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
  }

  .top-bar-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(247, 247, 247, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 105;
  }

  .top-bar-nav.open {
    display: flex;
  }

  .top-bar-link {
    font-size: 24px;
    opacity: 0.7;
  }

  .top-bar-link.active {
    opacity: 1;
  }

  .hero-copy {
    bottom: 16px;
    right: var(--frame-pad);
    font-size: 10px;
  }

  .hero-title {
    font-size: clamp(48px, 14vw, 80px);
  }

  /* Character mobile overrides */
  .char-08 { display: none; width: 236px; top: 87px; left: -351px; }
  .char-02 { width: 193px; top: 6.6%; left: 8.7%; }
  .char-22 { width: 143px; top: -43px; left: 31.7%; }
  .char-17 { width: 157px; top: 158px; left: 90.3%; }
  .char-48 { width: 252px; top: -45px; right: -79px; transform: rotate(-6deg); }
  .char-04 { width: 205px; top: 4.6%; right: 320px; }
  .char-42 { width: 173px; top: 48.9%; right: -58px; }
  .char-05 { width: 159px; top: 68%; right: -56px; }
  .char-33 { display: none; width: 205px; bottom: -113px; right: 353px; transform: rotate(10deg); }
  .char-47 { display: none; width: 139px; bottom: 95px; right: 23.7%; }
  .char-12 { display: none; width: 189px; bottom: -34px; left: 111%; }
  .char-38 { width: 212px; bottom: -33px; left: 33.6%; }
  .char-06 { width: 173px; bottom: 73px; left: -51px; }
  .char-14 { width: 123px; bottom: 60.3%; left: 15px; }
  .char-35 { display: none; width: 170px; top: 48%; left: -229px; }
  .char-03 { width: 112px; top: 21.4%; right: 19.4%; }
  .char-01 { width: 164px; bottom: 27%; left: -19.2%; }
  .char-29 { width: 135px; bottom: 22.7%; right: 32.5%; }
  .sc-21 { width: 150px; bottom: 1px; left: 6.8%; }
  .sc-39 { width: 140px; bottom: -45px; left: 49.5%; }
  .sc-03 { width: 130px; bottom: 58px; left: 66.1%; }
  .sc-07 { display: none; bottom: 41px; right: -456px; }
  .sc-42 { display: none; bottom: 350px; left: 108.2%; }
  .sc-11 { width: 120px; bottom: 109px; left: 0.2%; }
  .sc-33 { display: none; bottom: 7px; right: -63.3%; }
  .sc-14 { bottom: 113px; left: 37.5%; }
  .sc-30 { width: 102px; bottom: 208px; right: 68.3%; }
  .sc-45 { display: none; bottom: 120px; left: 101.3%; }
  .sp-43 { width: 150px; bottom: 37px; left: -73.1%; }
  .sp-22 { width: 140px; bottom: -7px; left: 28.9%; }
  .sp-08 { width: 130px; bottom: 17px; left: 68.5%; }
  .sp-48 { display: none; bottom: 360px; right: 401px; }
  .sp-50 { width: 157px; bottom: 185px; left: 57.2%; transform: rotate(-38deg); }
  .sp-05 { width: 120px; bottom: 152px; left: 33.3%; }
  .sp-13 { width: 182px; bottom: 9px; right: 69%; }
  .sp-04 { display: none; bottom: 12px; left: 112.8%; }
  .sp-17 { display: none; bottom: 213px; left: 117.7%; }
  .sp-29 { bottom: 219px; right: 61.4%; }
  /* CONTACT mobile — unchanged */
  .st-06 { width: 150px; }
  .st-12 { width: 140px; left: 119.7%; bottom: 30px; }
  .st-02 { display: none; width: 130px; left: 144.7%; bottom: 168px; }
  .st-26 { right: -12px; bottom: -34px; }
  .st-16 { width: 141px; left: 57.6%; bottom: 180px; }
  .st-47 { display: none; width: 120px; bottom: 379px; left: 127.1%; }
  .st-46 { display: none; right: -68.4%; bottom: 148px; }
  .st-38 { width: 158px; left: -1.3%; bottom: 256px; }
  .st-49 { width: 114px; right: 46.9%; bottom: 173px; }

  .page-content {
    padding: 120px 24px 100px;
  }

  .company-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Eye blink animation */
@keyframes blink {
  0%, 93%, 100% {
    transform: none;
  }
  96% {
    transform: scaleY(0.05);
  }
}

.char-eyes {
  transform-origin: center;
}