/* ==========================================================================
   SmartEngine — corporate TOP page
   Design tokens per DESIGN.md
   ========================================================================== */

:root {
  --ink: #0A0A0A;
  --surface-light: #F4F3F1;
  --surface-gray: #EDECEA;
  --surface-dark: #111111;
  --surface-darkest: #0A0A0A;
  --text-on-light: #0A0A0A;
  --text-on-dark: #FFFFFF;
  --text-muted-light: #6B6B6B;
  --text-muted-dark: #A8A8A8;
  --accent: #B89A5E;
  --border-light: #DDDBD6;
  --border-dark: rgba(255, 255, 255, .15);

  --font-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-mincho: "Shippori Mincho", "Noto Serif JP", serif;
  --font-display: "Anton", "Archivo", "Inter", sans-serif;
  --font-en: "Inter", system-ui, -apple-system, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;
  --space-5: 120px;
  --space-6: 180px;

  --max-width: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-gothic);
  color: var(--text-on-light);
  background: var(--surface-light);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, p { margin: 0; }

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-muted-light);
}
.eyebrow .rule {
  width: 40px;
  height: 1px;
  background: var(--border-light);
  display: block;
}
.zone-dark .eyebrow { color: var(--text-muted-dark); }
.zone-dark .eyebrow .rule { background: var(--border-dark); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
.link-arrow .circle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.zone-dark .link-arrow { color: var(--text-on-dark); }
.zone-dark .link-arrow .circle { border-color: var(--text-on-dark); }

.btn-pill {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: 17px 38px;
  font-size: 14px;
  background: var(--ink);
  color: #fff;
}
.btn-pill--light { background: #fff; color: var(--ink); }

[data-reveal] {
  opacity: 0;
  transform: translateX(-32px);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--space-2);
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.logo .mark {
  display: none;
}
.logo .word {
  font-family: var(--font-mincho);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .08em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a { text-decoration: none; }
.nav-links .cta {
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 26px;
  border-radius: 4px;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  border: none;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ------------------------------------------------------------------ hero */

.hero {
  background: var(--surface-light);
  color: var(--text-on-light);
  position: relative;
  overflow: hidden;
}

#hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.hero-body {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(64px, 12vw, 120px) var(--space-2) 0;
}

.hero-label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-muted-light);
}

.hero-title-wrap {
  position: relative;
  margin: 30px 0 0;
}

.hero-title {
  font-family: var(--font-mincho);
  font-size: clamp(2.75rem, 11vw, 7.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.01em;
  min-height: 1em;
}

#hero-assemble {
  position: absolute;
  left: 0;
  top: -35%;
  width: 100%;
  height: 170%;
  display: block;
  pointer-events: none;
}

.hero-tagline {
  margin-top: 44px;
  font-family: var(--font-mincho);
  font-size: clamp(1.35rem, 4vw, 2.125rem);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.6;
}

.hero-copy {
  margin: 26px 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted-light);
}

.hero-foot {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(48px, 8vw, 80px) var(--space-2) 44px;
  gap: 24px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-cta .note {
  font-size: 12px;
  color: var(--text-muted-light);
  line-height: 1.8;
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue span:first-child {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--text-muted-light);
  writing-mode: vertical-rl;
}
.scroll-cue .line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--ink), var(--accent));
}

/* --------------------------------------------------------------- zones */

.zone {
  padding: clamp(72px, 12vw, 130px) var(--space-2);
}
.zone-inner { max-width: var(--max-width); margin: 0 auto; }

.zone-dark { background: var(--surface-dark); color: var(--text-on-dark); }
.zone-light { background: var(--surface-light); color: var(--text-on-light); }
.zone-gray { background: var(--surface-gray); color: var(--text-on-light); }
.zone-darkest { background: var(--surface-darkest); color: var(--text-on-dark); }

.zone-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 44px;
  align-items: end;
}
@media (min-width: 1024px) {
  .zone-head { grid-template-columns: 1fr minmax(320px, 520px); gap: 72px; }
}

.zone-head h2 {
  font-size: clamp(2.25rem, 6.5vw, 4.125rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: .02em;
}

.zone-head p {
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted-light);
}
.zone-dark .zone-head p { color: var(--text-muted-dark); }

/* --------------------------------------------------- 02 web management */

.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}
@media (min-width: 800px) {
  .problem-grid { grid-template-columns: 1fr 1fr; gap: 0 72px; }
}

.problem-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--border-dark);
}
.problem-item:last-of-type { border-bottom: 1px solid var(--border-dark); }
.problem-item .num {
  font-family: var(--font-mincho);
  font-size: 20px;
  color: var(--accent);
}
.problem-item .title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
}
.problem-item .desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted-dark);
  margin-top: 8px;
}

.problem-quote {
  display: flex;
  align-items: flex-end;
  padding: 26px 0;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
.problem-quote p {
  font-family: var(--font-mincho);
  font-size: clamp(1.15rem, 2.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .04em;
}

.watermark {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 7rem);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .09);
  margin: 60px 0 -18px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

/* ------------------------------------------------------------- 03 role */

.role-foot {
  margin-top: var(--space-4);
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.role-foot .en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-muted-light);
}
.role-foot .jp {
  font-family: var(--font-mincho);
  font-size: 18px;
  letter-spacing: .06em;
}
.zone-dark .role-foot { border-top-color: var(--border-dark); }
.zone-dark .role-foot .en { color: var(--text-muted-dark); }

.role-body p { font-size: 16px; line-height: 2; }
.role-body .link-arrow { margin-top: 30px; }

/* ------------------------------------------------------------- photo band */

.photo-band {
  background: var(--surface-dark);
  padding: 0 var(--space-2);
}
.photo-band-frame {
  position: relative;
  height: clamp(220px, 32vw, 460px);
  background: #1A1A1A;
  overflow: hidden;
}
.photo-band-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-band-tag {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: flex-end;
  padding: 34px 36px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.photo-band-tag span {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------- 04 services */

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}
@media (min-width: 800px) {
  .service-grid { grid-template-columns: 1fr 1fr; gap: 0 80px; }
}

.service-item {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  padding: 38px 0;
  border-top: 1px solid var(--border-light);
}
.service-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border-light); }
.service-item .num {
  font-family: var(--font-mincho);
  font-size: 22px;
  color: var(--accent);
}
.service-item .label {
  display: block;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--text-muted-light);
}
.service-item .title {
  display: block;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  letter-spacing: .03em;
  margin-top: 12px;
}
.service-item .desc {
  display: block;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-muted-light);
  margin-top: 14px;
}

.zone-cta-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 48px;
}

/* -------------------------------------------------------------- karte */

.karte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  margin-top: 44px;
  align-items: start;
}
@media (min-width: 1024px) {
  .karte-grid { grid-template-columns: 1fr minmax(360px, 520px); gap: 80px; }
}

.karte-grid h2 {
  font-size: clamp(2.1rem, 6vw, 3.875rem);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: .02em;
}
.karte-grid > div:first-child p {
  margin-top: 32px;
  max-width: 560px;
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted-dark);
}

.karte-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 56px;
}
.karte-steps span.step {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.karte-steps span.step.current { color: var(--accent); }
.karte-steps span.sep {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--border-dark);
  margin: 0 18px;
}

.karte-en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-muted-dark);
  margin-top: 26px;
}

.karte-card {
  border: 1px solid var(--border-dark);
  padding: 28px 30px 30px;
}
.karte-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-dark);
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--text-muted-dark);
}
.karte-card-head span:first-child { letter-spacing: .2em; }
.karte-card-head span:last-child { letter-spacing: .1em; }

.karte-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-dark);
  font-size: 14px;
  line-height: 1.8;
}
.karte-card > .karte-row:last-of-type { border-bottom: none; }
.karte-row .field { color: var(--text-muted-dark); }
.karte-row .field.next { color: var(--accent); }

/* --------------------------------------------------------------- works */

.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 72px;
}
@media (min-width: 800px) {
  .works-grid { grid-template-columns: 1fr 1fr; }
}

.work-card {
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--border-light);
  display: block;
}

.work-media {
  position: relative;
  display: block;
  height: 340px;
  background: var(--surface-gray);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-media .placeholder-label {
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--text-muted-light);
}
.work-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 5px 13px;
  border-radius: 2px;
}

.work-body { display: block; padding: 30px 30px 26px; }
.work-body .en {
  display: block;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--text-muted-light);
}
.work-body .title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  margin-top: 12px;
}
.work-body .desc {
  display: block;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted-light);
  margin-top: 14px;
}

.works-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 40px;
}
.works-foot .disclaimer {
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-muted-light);
}

/* ----------------------------------------------------------------- faq */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 44px;
}
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(220px, 380px) 1fr; gap: 80px; }
}
.faq-grid h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
}

.faq-item {
  border-top: 1px solid var(--border-light);
  padding: 26px 0;
}
.faq-item:last-of-type { border-bottom: 1px solid var(--border-light); }

.faq-item summary {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  gap: 16px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .num {
  font-family: var(--font-mincho);
  font-size: 18px;
  color: var(--accent);
}
.faq-item .q {
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
}
.faq-item .icon {
  font-size: 18px;
  color: var(--text-muted-light);
  text-align: right;
}
.faq-item[open] .icon::before { content: "\2212"; }
.faq-item .icon::before { content: "+"; }

.faq-item .a {
  margin: 16px 0 0 56px;
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted-light);
}
@media (min-width: 640px) {
  .faq-item summary { grid-template-columns: 56px 1fr 32px; }
  .faq-item .a { margin-left: 76px; }
}

.faq-foot { display: flex; justify-content: flex-end; margin-top: 36px; }

/* ------------------------------------------------------------- contact */

.contact-zone h2 {
  margin-top: 44px;
  font-size: clamp(2.25rem, 7vw, 4.875rem);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: .02em;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
  margin-top: 56px;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr minmax(320px, 480px); gap: 80px; }
}
.contact-grid p {
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted-dark);
  max-width: 640px;
}
.contact-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.contact-cta .btn-pill { font-size: 16px; padding: 22px 52px; }
.contact-cta .note {
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-muted-dark);
}

/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--surface-darkest);
  color: #fff;
  padding: var(--space-4) var(--space-2) 40px;
  border-top: 1px solid var(--border-dark);
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 60px; }
}

.footer-brand .logo .mark { border-color: rgba(255, 255, 255, .6); }
.footer-brand .en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-muted-dark);
  margin-top: 20px;
}
.footer-brand .op {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-muted-dark);
  margin-top: 20px;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  font-size: 13px;
  letter-spacing: .03em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a { text-decoration: none; color: #fff; }

.footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-actions a.legal {
  font-size: 12px;
  color: var(--text-muted-dark);
  text-decoration: none;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--text-muted-dark);
}
.footer-bottom span:last-child { letter-spacing: .18em; }

/* ===================================================================
   Sub-page shared components
   =================================================================== */

.nav-links a.active {
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ------------------------------------------------------------ page hero */

.page-hero {
  background: var(--surface-light);
  color: var(--text-on-light);
  position: relative;
  overflow: hidden;
}

.page-hero-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 78px) var(--space-2) clamp(48px, 8vw, 86px);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted-light);
  letter-spacing: .04em;
}
.breadcrumb a { text-decoration: none; color: var(--text-muted-light); }
.breadcrumb .current { color: var(--ink); }

.page-hero .eyebrow { margin-top: clamp(32px, 6vw, 52px); }

.page-hero h1 {
  margin: 26px 0 0;
  font-family: var(--font-mincho);
  font-weight: 500;
  letter-spacing: .02em;
}
.page-hero h1.size-xl { font-size: clamp(2.5rem, 8vw, 5.75rem); line-height: 1.14; }
.page-hero h1.size-display {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 17vw, 10.5rem);
  line-height: 1;
  letter-spacing: .02em;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 46px;
}
@media (min-width: 1024px) {
  .page-hero-grid.with-side { grid-template-columns: 1fr minmax(320px, 620px); align-items: end; gap: 72px; }
}
.page-hero-grid p { font-size: 15px; line-height: 2; color: var(--text-muted-light); }

.pill-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-muted-light);
}
.pill-row .pill { border: 1px solid var(--border-light); padding: 9px 18px; border-radius: 999px; }
.pill-row .pill.active { border-color: var(--ink); color: var(--ink); }

.step-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 56px;
  padding-bottom: clamp(40px, 6vw, 80px);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-muted-light);
}
.step-path .chip {
  border: 1px solid var(--border-light);
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-gothic);
  letter-spacing: .06em;
}
.step-path .chip.current { border-color: var(--ink); color: var(--ink); }

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-bottom: clamp(40px,6vw,80px); }
.chip-row a {
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 13px;
  letter-spacing: .04em;
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
}
.chip-row a .n { font-family: var(--font-en); font-size: 10px; letter-spacing: .16em; color: var(--accent); }

.info-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 52px;
  padding-bottom: clamp(40px, 6vw, 80px);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--text-muted-light);
}
.info-chip-row span { border: 1px solid var(--border-light); padding: 10px 20px; border-radius: 999px; }

/* ----------------------------------------------------- numbered rows */

.row-list { display: grid; grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 800px) {
  .row-list.cols-2 { grid-template-columns: 1fr 1fr; gap: 0 80px; }
}
@media (min-width: 900px) {
  .row-list.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .row-list.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 60px; }
}
.row-list.cols-3 .step-col, .row-list.cols-4 .step-col { border-top: 1px solid var(--border-light); }
.zone-dark .row-list.cols-3 .step-col, .zone-dark .row-list.cols-4 .step-col { border-top-color: var(--border-dark); }

.row-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 34px 0;
  border-top: 1px solid var(--border-light);
}
.zone-dark .row-item { border-top-color: var(--border-dark); }
.row-item.cols-72 { grid-template-columns: 72px 1fr; }
.row-item.end { border-bottom: 1px solid var(--border-light); }
.zone-dark .row-item.end { border-bottom-color: var(--border-dark); }

.row-item .num { font-family: var(--font-mincho); font-size: 18px; color: var(--accent); }
.row-item .num.lg { font-size: 22px; }
.row-item .en { display: block; font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); }
.zone-dark .row-item .en { color: var(--text-muted-dark); }
.row-item h3, .row-item .title { font-size: clamp(1.15rem, 2.6vw, 1.625rem); font-weight: 700; letter-spacing: .03em; margin: 12px 0 0; }
.row-item p, .row-item .desc { font-size: 14px; line-height: 1.95; color: var(--text-muted-light); margin-top: 14px; }
.zone-dark .row-item p, .zone-dark .row-item .desc { color: var(--text-muted-dark); }

/* simple step column (no side content), 4-up */
.step-col { padding: 30px 0 0; border-top: 1px solid var(--border-light); }
.zone-dark .step-col { border-top-color: var(--border-dark); }
.step-col-head { display: flex; align-items: baseline; gap: 14px; }
.step-col .num { font-family: var(--font-mincho); font-size: 20px; color: var(--accent); }
.step-col .en { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); }
.zone-dark .step-col .en { color: var(--text-muted-dark); }
.step-col h3 { font-size: 24px; font-weight: 700; letter-spacing: .03em; margin: 16px 0 0; }
.step-col p { font-size: 14px; line-height: 1.95; color: var(--text-muted-light); margin-top: 14px; }
.zone-dark .step-col p { color: var(--text-muted-dark); }

.change-row {
  display: grid;
  grid-template-columns: 40px 1fr 28px 1fr;
  gap: 12px 20px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--border-light);
  font-size: 15px;
}
.zone-dark .change-row { border-top-color: var(--border-dark); }
.change-row.end { border-bottom: 1px solid var(--border-light); }
.zone-dark .change-row.end { border-bottom-color: var(--border-dark); }
.change-row .num { font-family: var(--font-mincho); font-size: 18px; color: var(--accent); }
.change-row .before { font-weight: 700; letter-spacing: .02em; }
.change-row .arrow { color: var(--text-muted-light); }
.zone-dark .change-row .arrow { color: var(--text-muted-dark); }
.change-row .after { color: var(--text-muted-light); line-height: 1.8; }
.zone-dark .change-row .after { color: var(--text-muted-dark); }
@media (max-width: 700px) {
  /* モバイルは「番号 / タイトル」を上段、「→ 詳細」を下段に。
     詳細を必ず 2列目（1fr）に置き、32px 列に落ちて縦積みになるのを防ぐ。 */
  .change-row { grid-template-columns: 32px 1fr; }
  .change-row .num { grid-column: 1; }
  .change-row .before,
  .change-row .after { grid-column: 2; }
  .change-row .arrow { display: none; }
  .change-row .after::before { content: "→ "; }
}

.watermark.on-light { color: var(--border-light); }
.watermark-caption { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--text-muted-light); margin-top: 20px; }
.zone-dark .watermark-caption { color: var(--text-muted-dark); }

.brand-word {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--border-light);
}

.plain-list { display: grid; margin-top: 32px; font-size: 15px; line-height: 1.8; }
.plain-list div { padding: 16px 0; border-top: 1px solid var(--border-dark); }
.plain-list div:last-child { border-bottom: 1px solid var(--border-dark); }
.plain-list.on-light div { border-top-color: var(--border-light); }
.plain-list.on-light div:last-child { border-bottom-color: var(--border-light); }
.plain-list.serif div {
  font-family: var(--font-mincho);
  font-size: clamp(1.1rem, 2.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .06em;
  padding: 20px 0;
}

/* -------------------------------------------------------- arrow / path */

.arrow-path { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 72px; }
@media (min-width: 800px) {
  .arrow-path.steps-3 { grid-template-columns: 1fr 60px 1fr 60px 1fr; align-items: stretch; gap: 0; }
}
.arrow-path .stage { padding: 32px 0 0; border-top: 1px solid var(--border-light); }
.zone-dark .arrow-path .stage { border-top-color: var(--border-dark); }
.arrow-path .stage.final { border-top-color: var(--ink); }
.arrow-path .op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-muted-light);
}
.zone-dark .arrow-path .op { color: var(--text-muted-dark); }
.arrow-path .stage .en { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); }
.zone-dark .arrow-path .stage .en { color: var(--text-muted-dark); }
.arrow-path .stage .en.accent { color: var(--accent); }
.arrow-path .stage .title {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.6;
  margin-top: 16px;
}
.arrow-path .stage .tag { font-family: var(--font-mincho); font-size: 20px; letter-spacing: .06em; color: var(--accent); margin-top: 18px; }

.duo-box { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 76px; }
@media (min-width: 700px) { .duo-box { grid-template-columns: 1fr 1fr; } }
.duo-box .box {
  border: 1px solid var(--border-dark);
  padding: 56px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.duo-box .box.alt { background: #1A1A1A; }
.duo-box .box span {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: .02em;
  line-height: 1.08;
}
.duo-box .box.alt span { color: var(--accent); }

/* ------------------------------------------------------------ step row */

.step-row { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 44px 0; border-top: 1px solid var(--border-light); }
@media (min-width: 900px) {
  .step-row { grid-template-columns: 110px 1fr minmax(280px, 420px); gap: 48px; }
}
.step-row.end { border-bottom: 1px solid var(--border-light); }
.step-row.highlight { background: var(--surface-gray); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
@media (min-width: 640px) { .step-row.highlight { margin: 0 -48px; padding-left: 48px; padding-right: 48px; } }
.step-row .step-num { font-family: var(--font-mincho); font-size: 34px; color: var(--accent); line-height: 1; }
.step-row .step-en { font-family: var(--font-en); font-size: 10px; letter-spacing: .16em; color: var(--text-muted-light); margin-top: 14px; }
.step-row h3 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
.step-row .step-desc { margin-top: 18px; font-size: 15px; line-height: 2; color: var(--text-muted-light); }
.detail-card { background: #fff; border: 1px solid var(--border-light); padding: 26px 28px; align-self: start; }
.detail-card .label { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); }
.detail-card ul { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; line-height: 1.7; }
.detail-card li { padding: 11px 0; border-top: 1px solid var(--surface-gray); }

/* --------------------------------------------------------- pricing */

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.price-card { background: #fff; border: 1px solid var(--border-light); padding: 40px 34px 36px; }
.price-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); position: relative; }
.price-card .ribbon {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  padding: 8px 16px;
}
.price-card .plan-en { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); }
.price-card.featured .plan-en { color: var(--text-muted-dark); }
.price-card .plan-name { font-size: 28px; font-weight: 700; letter-spacing: .03em; margin-top: 14px; }
.price-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.price-card .price-row .unit, .price-card .price-row .tax { font-size: 14px; color: var(--text-muted-light); }
.price-card.featured .price-row .unit, .price-card.featured .price-row .tax { color: var(--text-muted-dark); }
.price-card .price-row .amount { font-family: var(--font-en); font-size: 40px; font-weight: 600; letter-spacing: .01em; }
.price-card .plan-desc { margin: 20px 0 0; padding-top: 24px; border-top: 1px solid var(--surface-gray); font-size: 13px; line-height: 1.9; color: var(--text-muted-light); }
.price-card.featured .plan-desc { border-top-color: rgba(255,255,255,.18); color: var(--text-muted-dark); }
.price-card .fit-label { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); margin-top: 28px; }
.price-card.featured .fit-label { color: var(--text-muted-dark); }
.price-card .fit-list { font-size: 14px; line-height: 2; margin-top: 10px; }
.price-card .feature-list { display: grid; margin-top: 26px; font-size: 14px; line-height: 1.7; }
.price-card .feature-list div { padding: 13px 0; border-top: 1px solid var(--surface-gray); }
.price-card.featured .feature-list div { border-top-color: rgba(255,255,255,.18); }
.price-card .feature-list div:last-child { border-bottom: 1px solid var(--surface-gray); }
.price-card.featured .feature-list div:last-child { border-bottom-color: rgba(255,255,255,.18); }
.price-card .feature-list div.highlight { color: var(--accent); }
.price-card .plan-cta {
  display: flex; align-items: center; justify-content: center; margin-top: 30px;
  text-decoration: none; border-radius: 999px; padding: 15px 0; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink); border: 1px solid var(--ink);
}
.price-card.featured .plan-cta { color: var(--ink); background: #fff; border-color: #fff; }

.compare-table { margin-top: 64px; font-size: 15px; overflow-x: auto; }
.compare-row { display: grid; grid-template-columns: 1fr repeat(3, minmax(70px, 140px)); gap: 12px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.15); min-width: 560px; }
.compare-row.head { padding-bottom: 18px; border-bottom-color: rgba(255,255,255,.3); font-family: var(--font-en); font-size: 11px; letter-spacing: .16em; color: var(--text-muted-dark); }
.compare-row .center { text-align: center; }
.compare-row .highlight { color: var(--accent); }
.compare-row .muted { color: var(--text-muted-dark); }
.compare-note { margin-top: 26px; font-size: 12px; letter-spacing: .04em; color: var(--text-muted-dark); }

/* ----------------------------------------------------------- projects */

.project-grid { display: grid; grid-template-columns: 1fr; gap: 56px 40px; margin-top: 72px; }
@media (min-width: 800px) { .project-grid { grid-template-columns: 1fr 1fr; } }
.project-card { text-decoration: none; color: inherit; display: block; }
.project-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 400px; background: #1A1A1A; border: 1px solid var(--border-dark);
}
.project-media .placeholder-label { font-size: 13px; color: rgba(255,255,255,.5); text-align: center; padding: 0 24px; }
.project-tag { position: absolute; top: 0; left: 0; background: var(--surface-light); color: var(--ink); font-size: 11px; letter-spacing: .08em; padding: 6px 14px; }
.project-meta { display: flex; align-items: baseline; gap: 18px; margin-top: 26px; }
.project-meta .num { font-family: var(--font-mincho); font-size: 20px; color: var(--accent); }
.project-meta .en { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-dark); }
.project-card .title { display: block; font-size: 30px; font-weight: 700; letter-spacing: .03em; margin-top: 12px; }
.project-card .desc { display: block; font-size: 15px; line-height: 1.95; color: var(--text-muted-dark); margin-top: 12px; }
.project-card .view { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .16em; }

/* -------------------------------------------------------------- links */

.link-card-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }
@media (min-width: 700px) { .link-card-grid { grid-template-columns: 1fr 1fr; } }
.link-card {
  text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--border-light);
  padding: 38px 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.link-card.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.link-card .en { display: block; font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); }
.link-card.dark .en { color: var(--text-muted-dark); }
.link-card .title { display: block; font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 700; letter-spacing: .03em; margin-top: 14px; }
.link-card .go {
  width: 52px; height: 52px; border: 1px solid var(--ink); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.link-card.dark .go { border-color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------- company */

.company-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 44px; }
@media (min-width: 800px) { .company-grid { grid-template-columns: 380px 1fr; gap: 80px; } }
.company-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 0; border-top: 1px solid var(--border-light); font-size: 15px; line-height: 1.9; }
@media (min-width: 560px) { .company-row { grid-template-columns: 200px 1fr; gap: 24px; } }
.company-row .k { color: var(--text-muted-light); }
.company-row.end { border-bottom: 1px solid var(--border-light); }

/* ----------------------------------------------------------- faq (sub) */

.faq-category { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 900px) { .faq-category { grid-template-columns: 380px 1fr; gap: 80px; } }
.faq-category .cat-num { font-family: var(--font-mincho); font-size: 40px; color: var(--accent); line-height: 1; }
.faq-category .cat-en { font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-light); margin-top: 16px; }
.zone-dark .faq-category .cat-en { color: var(--text-muted-dark); }
.faq-category h2 { margin: 16px 0 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.34; letter-spacing: .02em; }

.qa-item { border-top: 1px solid var(--border-light); padding: 26px 0; }
.zone-dark .qa-item { border-top-color: var(--border-dark); }
.qa-item:last-of-type { border-bottom: 1px solid var(--border-light); }
.zone-dark .qa-item:last-of-type { border-bottom-color: var(--border-dark); }
.qa-item summary { display: grid; grid-template-columns: 30px 1fr 24px; gap: 14px; align-items: baseline; cursor: pointer; list-style: none; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item .qmark { font-family: var(--font-en); font-size: 16px; font-weight: 600; color: var(--accent); }
.qa-item .q { font-size: clamp(1rem, 2.2vw, 1.1875rem); font-weight: 700; letter-spacing: .02em; line-height: 1.6; }
.qa-item .icon { font-size: 18px; color: var(--text-muted-light); text-align: right; }
.zone-dark .qa-item .icon { color: var(--text-muted-dark); }
.qa-item[open] .icon::before { content: "\2212"; }
.qa-item .icon::before { content: "+"; }
.qa-item .a { margin: 16px 0 0 44px; font-size: 15px; line-height: 2; color: var(--text-muted-light); }
.zone-dark .qa-item .a { color: var(--text-muted-dark); }
@media (min-width: 640px) { .qa-item .a { margin-left: 54px; } }
.faq-source-note { margin-top: 28px; font-size: 12px; line-height: 1.9; color: var(--text-muted-light); }
.zone-dark .faq-source-note { color: var(--text-muted-dark); }

/* --------------------------------------------------------------- form */

.contact-form-wrap { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 56px; }
@media (min-width: 900px) { .contact-form-wrap { grid-template-columns: 380px 1fr; gap: 80px; } }
.contact-form-intro h2 { font-size: 40px; font-weight: 900; line-height: 1.34; letter-spacing: .02em; }
.contact-form-intro p { margin-top: 24px; font-size: 14px; line-height: 2; color: var(--text-muted-light); }

.form-card { background: #fff; border: 1px solid var(--border-light); padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 48px) 44px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.field-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.tag-optional { font-size: 10px; font-weight: 400; color: var(--text-muted-light); border: 1px solid var(--border-light); padding: 3px 8px; }
.tag-required { font-size: 10px; font-weight: 700; color: #fff; background: var(--ink); padding: 3px 8px; }
.field input, .field textarea {
  width: 100%; box-sizing: border-box; margin-top: 12px; padding: 15px 16px;
  font-size: 15px; color: var(--ink); background: var(--surface-light);
  border: 1px solid var(--border-light); border-radius: 2px; font-family: inherit;
}
.field textarea { line-height: 1.9; resize: vertical; padding: 16px; }
.field input::placeholder, .field textarea::placeholder { color: #B0AEA9; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }

.topic-block { margin-top: 36px; }
.topic-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 560px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
.topic-btn {
  text-align: left; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1.6;
  padding: 16px 20px; border-radius: 2px; border: 1px solid var(--border-light);
  background: var(--surface-light); color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.topic-btn.selected { border-color: var(--ink); background: var(--ink); color: #fff; }

.agree-row { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--surface-gray); }
.agree-check {
  width: 24px; height: 24px; flex: none; cursor: pointer; border-radius: 2px; font-size: 13px; line-height: 1;
  border: 1px solid var(--border-light); background: var(--surface-light); color: #fff;
}
.agree-check.checked { border-color: var(--ink); background: var(--ink); }
.agree-row span { font-size: 14px; line-height: 1.8; }
.agree-row a { text-decoration: underline; }

.submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.submit-note { font-size: 12px; line-height: 1.9; color: var(--text-muted-light); max-width: 360px; }
.submit-btn {
  cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
  padding: 22px 48px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--surface-gray); color: #B0AEA9; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.submit-btn.ready { background: var(--ink); color: #fff; border-color: var(--ink); }
.form-hint { margin-top: 20px; padding: 14px 18px; background: var(--surface-light); border-left: 2px solid var(--accent); font-size: 13px; line-height: 1.8; color: var(--ink); display: none; }
.form-hint.show { display: block; }

.direct-email {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--border-dark);
  text-decoration: none; color: #fff;
}
.direct-email .label { display: block; font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--text-muted-dark); }
.direct-email .addr { display: block; font-family: var(--font-en); font-size: clamp(1.5rem, 5vw, 2.375rem); font-weight: 500; letter-spacing: .01em; margin-top: 14px; word-break: break-all; }
.direct-email .go { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }

.info-card-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
@media (min-width: 700px) { .info-card-grid { grid-template-columns: repeat(4, 1fr); } }
.info-card { padding: 28px 0 0; border-top: 1px solid var(--border-dark); }
.info-card .num { font-family: var(--font-mincho); font-size: 20px; color: var(--accent); }
.info-card .title { font-size: 20px; font-weight: 700; letter-spacing: .03em; margin-top: 16px; }
.info-card .desc { font-size: 14px; line-height: 1.95; color: var(--text-muted-dark); margin-top: 10px; }

/* ------------------------------------------------------------ legal doc */

.legal-doc { max-width: 760px; margin-top: 44px; }
.legal-article { margin-top: 56px; }
.legal-article:first-child { margin-top: 0; }
.legal-article h2 { font-size: 20px; font-weight: 700; letter-spacing: .02em; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.legal-article ol, .legal-article ul { margin: 20px 0 0; padding-left: 1.4em; font-size: 14px; line-height: 2; color: var(--ink); }
.legal-article li + li { margin-top: 10px; }
.legal-article p { margin-top: 16px; font-size: 14px; line-height: 2; color: var(--ink); }
.legal-article p.muted { color: var(--text-muted-light); font-size: 13px; }
.legal-meta { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-muted-light); }

.split-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 64px; padding-bottom: clamp(40px, 6vw, 56px);
  font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--text-muted-light);
}

.h2-lg { font-size: clamp(2.25rem, 6.5vw, 4.125rem); font-weight: 900; line-height: 1.22; letter-spacing: .02em; margin-top: 44px; }

.split-start { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 44px; align-items: start; }
@media (min-width: 1024px) { .split-start { grid-template-columns: 1fr minmax(320px, 620px); gap: 80px; } }
.split-start h2 { font-size: clamp(2.25rem, 6.5vw, 3.75rem); font-weight: 900; line-height: 1.28; letter-spacing: .02em; }
.split-start > div p { font-size: 16px; line-height: 2.1; color: var(--text-muted-light); }
.zone-dark .split-start > div p { color: var(--text-muted-dark); }
.split-start > div p + p { margin-top: 22px; }

/* ------------------------------------------- mobile sticky CTA bar */
/* DESIGN.md §5「モバイル追従CTAバー」: モバイル専用・不透明・主要CTA＋常時導線 */

.mobile-cta { display: none; }

@media (max-width: 1023px) {
  .mobile-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px var(--space-2);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-light);
    border-top: 1px solid var(--border-light);
  }
  .mobile-cta .primary {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
  }
  .mobile-cta .icon {
    flex: none;
    width: 52px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--ink);
    border-radius: 999px;
    font-size: 19px;
    text-decoration: none;
  }
  /* 追従バーが本文末尾（フッター）に被らないよう余白を確保 */
  body:has(.mobile-cta) { padding-bottom: 76px; }
}

/* --------------------------------------------- 和文の改行制御 (JP wrap) */
/* 禁則処理（行頭に 、。」等が来ない）— 全ブラウザ対応 */
h1, h2, h3, p,
.hero-title, .hero-tagline,
.title, .desc, .step-desc, .plan-desc, .q, .a {
  line-break: strict;
}

/* 本文は文節（自立語）単位で折り返し、単語の途中で切れないようにする。
   対応ブラウザ（Chromium系）のみ適用。非対応環境は従来の折り返しにフォールバック。 */
.hero-copy,
.zone-head p,
.karte-grid p,
.role-body p,
.split-start > div p,
.contact-grid p,
.page-hero-grid p,
.row-item p, .row-item .desc,
.service-item .desc,
.step-col p,
.arrow-path .stage .title,
.step-row .step-desc {
  word-break: auto-phrase;
}

/* 本文の最終行が1〜2文字だけ（例：「…行いま」で改行し「す。」が孤立）に
   ならないよう、行分配を調整する。対応ブラウザのみ適用。 */
.hero-copy,
.zone-head p,
.karte-grid p,
.role-body p,
.split-start > div p,
.contact-grid p,
.page-hero-grid p,
.row-item p, .row-item .desc,
.service-item .desc,
.step-col p,
.step-row .step-desc,
.problem-item .desc,
.work-body .desc,
.faq-item .a, .qa-item .a {
  text-wrap: pretty;
}

/* モバイルの大見出し対策。
   見出しはデスクトップ幅を前提に手動 <br> で改行位置を指定している。
   その改行位置（例：「Webの状態を、」で改行）は尊重したうえで、
   狭いモバイルでセグメントが長すぎて末尾が孤立しないよう、
   フォントをやや詰め、禁則処理を効かせる。
   text-wrap: balance は、それでも1行に収まらないセグメントのみ
   自然に均等折り返しさせるための保険。 */
@media (max-width: 640px) {
  .zone-head h2,
  .karte-grid h2,
  .faq-grid h2,
  .contact-zone h2,
  .contact-form-intro h2,
  .split-start h2,
  .h2-lg,
  .page-hero-grid h2 {
    font-size: clamp(1.6rem, 6.8vw, 2.125rem);
    text-wrap: balance;
    line-break: strict;
  }

  .page-hero h1.size-xl {
    font-size: clamp(2rem, 8.5vw, 3rem);
    text-wrap: balance;
    line-break: strict;
  }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .site-header.nav-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--surface-light);
    padding: 12px var(--space-2) 24px;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .site-header.nav-open .nav-links a { padding: 12px 0; width: 100%; }
  .site-header.nav-open .nav-links .cta { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Utilities — 旧インラインスタイルの外部化（チェックリスト: CSSは外部ファイル）
   ========================================================================== */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-26 { margin-top: 26px; }
.mt-30 { margin-top: 30px; }
.mt-32 { margin-top: 32px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mt-44 { margin-top: 44px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }
.mt-76 { margin-top: 76px; }
.mt-88 { margin-top: 88px; }
.pt-24 { padding-top: 24px; }
.pt-26 { padding-top: 26px; }
.pt-32 { padding-top: 32px; }
.pb-60 { padding-bottom: clamp(40px, 6vw, 60px); }
.pb-80 { padding-bottom: clamp(40px, 6vw, 80px); }
.fs-20 { font-size: 20px; }
.lh-12 { line-height: 1.2; }
.lh-17 { line-height: 1.7; }
.d-block { display: block; }
.divider-light { border-top: 1px solid var(--border-light); }
.divider-dark { border-top: 1px solid var(--border-dark); }
.text-16-muted { font-size: 16px; line-height: 2; color: var(--text-muted-light); }
.text-15-muted { font-size: 15px; line-height: 2; color: var(--text-muted-light); }
.text-12-muted { font-size: 12px; line-height: 1.9; color: var(--text-muted-light); }
.strong-ink { font-weight: 700; color: var(--ink); }
.text-accent-dark { color: #8A7440; }
.nav-links .cta--filled { background: var(--ink); color: #fff; }
.h1-legal { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.3; }
.h-quote { font-family: var(--font-mincho); font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 600; line-height: 1.4; letter-spacing: .08em; }
.h2-works-lead { margin: 0; font-family: var(--font-mincho); font-size: clamp(1.55rem, 4vw, 3rem); font-weight: 500; line-height: 1.45; letter-spacing: .04em; }
.h2-section-alt { font-size: clamp(2rem, 6.5vw, 2.75rem); font-weight: 900; line-height: 1.34; letter-spacing: .02em; }
.h2-not-found { font-size: clamp(2rem, 6.5vw, 2.75rem); font-weight: 900; line-height: 1.34; letter-spacing: .02em; }
.home-link { margin-top: 30px; }

/* ---- 制作事例 準備中パネル (coming soon) ---- */
.works-coming {
  margin-top: 64px;
  border: 1px solid var(--border-light);
  padding: clamp(48px, 8vw, 96px) var(--space-3);
  text-align: center;
}
.zone-dark .works-coming { border-color: var(--border-dark); }
.works-coming .en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-muted-light);
}
.zone-dark .works-coming .en { color: var(--text-muted-dark); }
.works-coming .big {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 5rem);
  letter-spacing: .06em;
  line-height: 1;
  margin-top: 14px;
}
.works-coming p {
  margin: 22px auto 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 2;
  color: var(--text-muted-light);
}
.zone-dark .works-coming p { color: var(--text-muted-dark); }
.works-coming .link-arrow { margin-top: 30px; }

/* スマホではプラン名を一回り小さく */
@media (max-width: 639px) {
  .price-card .plan-name { font-size: 24px; }
}

/* モバイル専用改行 (PCでは無効) */
.br-sp { display: none; }
@media (max-width: 639px) { .br-sp { display: inline; } }

/* ---- 制作事例 画像スロット (2枚・画像のみ) ---- */
.works-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 64px;
}
@media (min-width: 800px) {
  .works-photos { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.work-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-gray);
  border: 1px solid var(--border-light);
  overflow: hidden;
}
.work-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-photo .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--text-muted-light);
}

/* スマホでは矢印パスが縦積みになるため → を ↓ に */
@media (max-width: 799px) {
  .arrow-path .op { font-size: 0; line-height: 0; }
  .arrow-path .op::before { content: "\2193"; font-size: 18px; line-height: 1; }
}

/* PC専用改行 (スマホでは無効) */
.br-pc { display: inline; }
@media (max-width: 639px) { .br-pc { display: none; } }

/* お問い合わせフォーム: 送信完了メッセージ / honeypot */
.form-hint.ok { border-left-color: #2E7D32; }
.hidden-field { display: none !important; }

/* ==========================================================================
   Contact Form 7 をサイトデザインに合わせる（WordPress版のみ）
   ========================================================================== */
.form-card .wpcf7 .topic-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 560px) { .form-card .wpcf7 .topic-grid { grid-template-columns: 1fr 1fr; } }
.form-card .wpcf7 .topic-grid .wpcf7-list-item { margin: 0; display: block; }
.form-card .wpcf7 .topic-grid .wpcf7-list-item > label { display: block; cursor: pointer; }
.form-card .wpcf7 .topic-grid input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.form-card .wpcf7 .topic-grid .wpcf7-list-item-label {
  display: block; padding: 16px 20px; border: 1px solid var(--border-light); border-radius: 2px;
  background: var(--surface-light); color: var(--ink); font-size: 14px; line-height: 1.6;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.form-card .wpcf7 .topic-grid input[type="radio"]:checked + .wpcf7-list-item-label {
  border-color: var(--ink); background: var(--ink); color: #fff;
}
.form-card .wpcf7 .submit-btn {
  cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .05em;
  white-space: nowrap; padding: 22px 48px; border-radius: 999px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
}
.form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.form-card .wpcf7-response-output {
  margin: 20px 0 0 !important; padding: 14px 18px !important;
  border: none !important; border-left: 2px solid var(--accent) !important;
  background: var(--surface-light); font-size: 13px; line-height: 1.8;
}
.form-card .wpcf7 .wpcf7-not-valid-tip { color: #C0392B; font-size: 12px; margin-top: 6px; }