:root {
  --mono-ink: #111111;
  --mono-ink-sub: #3a3a3a;
  --mono-muted: #8a8a8a;
  --mono-line: #e5e3de;
  --mono-soft: #f7f6f3;
  --mono-ff-en: "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono-ff-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --mono-ff-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  
  --gr-green: #111111;
  --gr-green-light: #333333;
  --color-brand: #111111;
  --color-ink: #111111;
  --color-ink-sub: #3a3a3a;
  --color-muted: #8a8a8a;
  --color-line: #e5e3de;
  --color-bg-alt: #f7f6f3;
}
body {
  color: var(--mono-ink);
  background: #ffffff;
  font-family: var(--mono-ff-sans);
}

.nav-toggle span { background: var(--mono-ink); }

.hero {
  --settle-at: 3.8s;   
  background: #111111;
  color: #111111;
  min-height: calc(100vh - var(--g-header-h, 0px));    
  min-height: calc(100svh - var(--g-header-h, 0px));
  display: grid;
  place-items: center;
  align-content: center;
  border-bottom: 1px solid var(--mono-line);
  animation: heroSettle 1.2s cubic-bezier(.4,0,.2,1) var(--settle-at) forwards;
}
@keyframes heroSettle { to { background-color: #ffffff; } }
.hero-inner {
  text-align: center;
  padding: 40px var(--gutter) 110px;
}

@media (min-height: 1400px) {
  .hero { min-height: 900px; }
}

.hero-rule {
  background: var(--gr-yellow);
  animation: ruleIn .9s cubic-bezier(.16,.8,.3,1) .2s forwards,
             inkBg 1.2s cubic-bezier(.4,0,.2,1) var(--settle-at) forwards;
}
@keyframes inkBg { to { background-color: #111111; } }
.hero-wordmark { width: min(58vw, 400px); }
.hero-wordmark path {
  fill: var(--gr-yellow);
  stroke: var(--gr-yellow);
}
.hero-wordmark.is-drawing path {
  animation: drawMark 1.5s ease-in-out .6s forwards,
             fillMark .7s ease 2.0s forwards,
             inkMark 1.2s cubic-bezier(.4,0,.2,1) var(--settle-at) forwards;
}
@keyframes inkMark { to { fill: #111111; stroke: #111111; } }
.hero-tag {
  font-family: var(--mono-ff-en);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gr-yellow);
  animation: fadeUp .6s ease 2.2s forwards,
             inkText 1.2s cubic-bezier(.4,0,.2,1) var(--settle-at) forwards;
}
@keyframes inkText { to { color: #111111; } }

.hero-line {
  font-family: var(--mono-ff-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: #111111;
  margin: clamp(40px, 6vh, 64px) auto 0;
  opacity: 0;
  animation: fadeUp 1s ease calc(var(--settle-at) + .4s) forwards;
}
.hero-sub {
  font-family: var(--mono-ff-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.35vw, 17px);
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--mono-ink-sub);
  margin: 18px auto 0;
  opacity: 0;
  animation: fadeUp 1s ease calc(var(--settle-at) + .7s) forwards;
}
.hero-sub .sp { display: none; }
@media (max-width: 640px) {
  .hero-line { font-size: 24px; letter-spacing: 0.08em; }
  .hero-sub { font-size: 14px; letter-spacing: 0.06em; }
  .hero-sub .sp { display: inline; }
}

.hero-scroll { color: var(--mono-muted); animation-delay: calc(var(--settle-at) + 1.1s); }
.hero-scroll::after { background: linear-gradient(180deg, #111111, rgba(17,17,17,0)); }

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; background: #ffffff; }
  .hero-rule { animation: none; transform: none; background: #111111; }
  .hero-wordmark path, .hero-wordmark.is-drawing path { animation: none; fill: #111111; stroke: none; fill-opacity: 1; }
  .hero-tag { animation: none; opacity: 1; color: #111111; }
  .hero-line, .hero-sub { opacity: 1; animation: none; }
}

.section.alt { background: var(--mono-soft); }
.section-head .num {
  font-family: var(--mono-ff-en);
  font-weight: 400;
  letter-spacing: 0.4em;
  color: var(--mono-muted);
}
.section-head .num::before { background: var(--mono-ink); }
.section-head h2 {
  font-family: var(--mono-ff-serif);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.section-head h2 .en {
  font-family: var(--mono-ff-en);
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--mono-muted);
}
.section-head .lead { color: var(--mono-ink-sub); }

.totonoe-intro { text-align: center; }
.totonoe-logo { width: min(64vw, 360px); height: auto; margin: 0 auto 32px; display: block; }
.totonoe-tagline {
  font-family: var(--mono-ff-serif);
  font-weight: 500;
  font-size: clamp(20px, 2.8vw, 30px);
  letter-spacing: 0.16em;
  line-height: 1.9;
  margin: 0 0 22px;
}
.totonoe-copy {
  max-width: 560px;
  margin: 0 0 28px;
  font-size: 14.5px;
  line-height: 2.2;
  color: var(--mono-ink-sub);
  letter-spacing: 0.04em;
}
.totonoe-intro .btn-more { margin-top: 0; }

.totonoe-body {
  max-width: 880px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  text-align: left;
}
@media (max-width: 720px) {
  .totonoe-body { grid-template-columns: 1fr; text-align: center; }
  .totonoe-body .totonoe-figure { order: -1; }
  .totonoe-copy { margin: 0 auto 32px; }
}

.ai-block {
  margin: clamp(48px, 7vw, 88px) auto 0;
  max-width: 880px;
  border: 1px solid var(--mono-ink);
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 720px) { .ai-block { grid-template-columns: 1fr; } }

.ai-block .ai-figure--banner {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
  margin: calc(-1 * clamp(28px, 4vw, 48px)) calc(-1 * clamp(22px, 4vw, 48px)) 0;
}
@media (max-width: 720px) { .ai-block .ai-figure--banner { aspect-ratio: 3 / 2; } }

.ai-block .ai-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--mono-line);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--mono-ink);
}
.ai-block .ai-eyebrow {
  font-family: var(--mono-ff-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--mono-muted);
  text-transform: uppercase;
}
.ai-block h3 {
  font-family: var(--mono-ff-serif);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.12em;
  line-height: 1.6;
  margin: 8px 0 12px;
}
.ai-block .ai-lead { margin: 0; font-size: 14px; line-height: 2; color: var(--mono-ink-sub); }
.ai-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mono-line); }
.ai-list li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--mono-line);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.ai-list .no { font-family: var(--mono-ff-en); font-size: 11px; letter-spacing: 0.3em; color: var(--mono-muted); }
.ai-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--mono-ink);
  padding-bottom: 2px;
}
.ai-link::after { content: " →"; }

.btn-more {
  background: var(--mono-ink);
  color: #ffffff;
  font-family: var(--mono-ff-en);
  font-weight: 400;
  letter-spacing: 0.2em;
  border-radius: 0;
}
.btn-more:hover { background: #333333; }
.work-card { border-color: var(--mono-line); border-radius: 0; }
.work-thumb .category { background: rgba(17,17,17,.85); border-radius: 0; }
.work-body h3 { color: var(--mono-ink); }
.work-meta .icon-dot { background: var(--mono-ink); }
.work-link { color: var(--mono-ink); border-top-color: var(--mono-line); }

.biz-grid { background: var(--mono-line); border-color: var(--mono-line); }
.biz-item { padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px); }
.biz-item .no { font-family: var(--mono-ff-en); font-weight: 400; color: var(--mono-muted); }
.biz-item h3 { font-size: 16.5px; font-weight: 600; margin: 8px 0 10px; }
.biz-item p { color: var(--mono-ink-sub); }
.biz-item.is-wide { background: var(--mono-ink); color: #ffffff; }
.biz-item.is-wide .no { color: rgba(255,255,255,.6); }
.biz-item.is-wide p { color: rgba(255,255,255,.8); }
.biz-item.is-wide .tags span { border-color: rgba(255,255,255,.4); }

.contact-form { border-color: var(--mono-line); }
.contact-form input, .contact-form textarea { background: #ffffff; border-color: var(--mono-line); border-radius: 0; }
.contact-form button {
  background: var(--mono-ink);
  color: #ffffff;
  font-family: var(--mono-ff-en);
  font-weight: 400;
  letter-spacing: 0.3em;
  border-radius: 0;
}
.contact-form button:hover { background: #333333; }
.contact-info .tel { color: var(--mono-ink); }

.breadcrumb a:hover { color: var(--mono-ink); }
.page-hero { background: var(--mono-soft); border-bottom-color: var(--mono-line); }
.page-hero h1 { font-family: var(--mono-ff-serif); font-weight: 600; }
.page-hero h1 .en { font-family: var(--mono-ff-en); font-weight: 400; color: var(--mono-muted); }
.chip { border-radius: 0; border-color: var(--mono-line); }
.chip:hover { border-color: var(--mono-ink); color: var(--mono-ink); }
.chip.is-active { background: var(--mono-ink); color: #ffffff; border-color: var(--mono-ink); }

.case-head h1 { font-family: var(--mono-ff-serif); font-weight: 600; }
.case-head .en { font-family: var(--mono-ff-en); color: var(--mono-muted); }
.spec-table dt { background: var(--mono-soft); }
.ba-item .tag { font-family: var(--mono-ff-en); font-weight: 400; letter-spacing: 0.3em; }
.ba-item.is-before .tag { background: #7a7a7a; }   
.ba-item.is-after .tag { background: #111111; }    
.back-link a { color: var(--mono-ink); }

.works-cta { background: #111111; color: #ffffff; }
.works-cta h2 { font-family: var(--mono-ff-serif); font-weight: 500; }
.works-cta .btn-more { background: #ffffff; color: #111111; }
.works-cta .btn-more:hover { background: #e5e3de; }