/* NEHA top page mock — plain CSS, no build step */
:root {
  --ink: #283C32;
  --char: #283C32;
  --char-2: #43594C;
  --paper: #FFFFFF;
  --mist: #E8DFD2;
  --line: #B8C8BC;
  --mute: #4B5B50;
  --ph: #E8DFD2;
  --pad: clamp(20px, 4vw, 48px);
  --head-h: 72px;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-jp); font-size: 16px; line-height: 1.95; letter-spacing: .02em;
  line-break: strict; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--char); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--char); color: #fff; padding: 8px 16px; z-index: 100; }
.skip:focus { left: 0; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- photo frame ---------- */
.ph { position: relative; overflow: hidden; background: var(--ph); margin: 0; width: 100%; }
.ph--45 { aspect-ratio: 4 / 5; }
.ph--32 { aspect-ratio: 3 / 2; }
.ph::before {
  content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 12px; letter-spacing: .24em; color: #4B5B50; text-align: center; padding: 12px;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph img.is-failed { display: none; }
.ph img.crop { object-position: 50% 28%; transform: scale(1.5); transform-origin: 50% 30%; }
.ph .tag {
  position: absolute; left: 0; top: 0; z-index: 2; background: var(--char); color: #fff;
  font-size: 11px; letter-spacing: .12em; line-height: 1; padding: 8px 10px;
}

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.hdr__in { height: var(--head-h); display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--font-en); font-weight: 500; font-size: 24px; letter-spacing: .36em; padding-left: .36em; color: var(--char); line-height: 1; }
.logo--inv { color: #fff; }
.nav ul { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav a { display: block; text-align: center; line-height: 1.3; padding: 6px 0; }
.nav a span { display: block; font-size: 14px; font-weight: 500; }
.nav a small { display: block; font-family: var(--font-en); font-size: 10px; letter-spacing: .2em; color: var(--mute); text-transform: uppercase; }
.nav a:hover span { color: var(--char); text-decoration: underline; text-underline-offset: 6px; }
.nav__cta a { background: var(--char); color: #fff; padding: 10px 22px; }
.nav__cta a small { color: #4B5B50; }
.nav__cta a:hover span { color: #fff; }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 0 10px 10px; cursor: pointer; color: var(--ink); font-family: var(--font-en); font-size: 12px; letter-spacing: .2em; }
.menu-btn__bars { position: relative; width: 24px; height: 12px; display: block; }
.menu-btn__bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .2s, top .2s; }
.menu-btn__bars i:first-child { top: 0; }
.menu-btn__bars i:last-child { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child { top: 5px; transform: rotate(35deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child { top: 5px; transform: rotate(-35deg); }

/* ---------- common type ---------- */
.eyebrow { font-family: var(--font-en); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); margin-bottom: 28px; }
.eyebrow--inv { color: #4B5B50; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; font-size: 15px; font-weight: 500; letter-spacing: .06em; border: 1px solid var(--char); transition: background .15s, color .15s; text-align: center; }
.btn--solid { background: var(--char); color: #fff; }
.btn--solid:hover { background: var(--char-2); }
.btn--line { color: var(--char); background: #fff; }
.btn--line:hover { background: var(--char); color: #fff; }
.btn--inv { background: #fff; color: var(--char); border-color: #fff; }
.btn--inv:hover { background: transparent; color: #fff; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 88px) 0 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.nb { white-space: nowrap; }
p, h3, li { text-wrap: pretty; }
.hero h1 { font-size: clamp(30px, 4.7vw, 62px); font-weight: 500; line-height: 1.38; letter-spacing: .04em; color: var(--char); margin-bottom: 32px; }
.hero h1 span { display: block; white-space: nowrap; }
.hero__sub { font-size: clamp(15px, 1.5vw, 18px); font-weight: 500; line-height: 1.8; margin-bottom: 18px; }
.hero__lead { color: var(--mute); font-size: 15px; max-width: 34em; margin-bottom: 40px; }
.hero__photo figcaption { font-size: 11px; color: var(--mute); margin-top: 10px; letter-spacing: .06em; }
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--ink); }
.spec li { padding: 22px 24px 22px 0; display: flex; flex-direction: column; gap: 4px; }
.spec li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.spec__k { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.spec__v { font-size: 15px; font-weight: 500; line-height: 1.7; }

/* ---------- section scaffold ---------- */
.sec { padding: clamp(72px, 10vw, 148px) 0; }
.sec--mist { background: var(--mist); }
.sec__grid { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.sec__label { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ink); align-self: start; position: sticky; top: calc(var(--head-h) + 24px); }
.sec__label .no { font-family: var(--font-en); font-size: 13px; color: var(--mute); letter-spacing: .14em; }
.sec__label .en { font-family: var(--font-en); font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--char); line-height: 1.2; }
.sec__label .jp { font-size: 13px; color: var(--mute); }
.h2 { font-size: clamp(24px, 3vw, 38px); font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--char); margin-bottom: 28px; }
.lead-h { font-size: clamp(26px, 3.6vw, 46px); font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--char); margin-bottom: clamp(36px, 5vw, 64px); }
.sec__lead { max-width: 40em; color: var(--ink); margin-bottom: clamp(36px, 5vw, 56px); }
.devnote { font-size: 12px; color: var(--mute); line-height: 1.8; margin-top: 28px; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.about__text p + p { margin-top: 1.2em; }
.slogan { margin-top: 2em !important; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-en); font-size: 24px; letter-spacing: .08em; color: var(--char); line-height: 1.4; }
.slogan span { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }

/* ---------- service ---------- */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.svc__item { border-top: 2px solid var(--char); padding-top: 24px; }
.svc__en { font-family: var(--font-en); font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: .06em; color: var(--char); margin-bottom: 18px; }
.svc__item h3 { font-size: 19px; font-weight: 700; line-height: 1.6; margin-bottom: 14px; }
.svc__item h3 small { display: block; font-size: 13px; font-weight: 500; color: var(--mute); margin-top: 2px; }
.svc__item > p:not(.svc__en):not(.svc__ex) { font-size: 15px; }
.svc__ex { margin-top: 24px; font-size: 12px; letter-spacing: .12em; color: var(--mute); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.svc__item ul li { font-size: 14.5px; line-height: 1.7; padding: 12px 0 12px 1.2em; border-bottom: 1px solid var(--line); position: relative; }
.svc__item ul li::before { content: ""; position: absolute; left: 0; top: 1.62em; width: 6px; height: 1px; background: var(--char); }

.cmp { width: 100%; border-collapse: collapse; margin-top: clamp(40px, 5vw, 64px); font-size: 14.5px; background: #fff; }
.cmp th, .cmp td { text-align: left; padding: 16px 20px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
.cmp thead th { font-family: var(--font-en); font-size: 15px; letter-spacing: .2em; color: #fff; background: var(--char); border-top: 0; }
.cmp tbody th { width: 22%; font-weight: 500; color: var(--mute); background: var(--paper); }
.cmp__both { background: var(--paper); }
.cmp tbody tr:last-child { border-bottom: 1px solid var(--line); }

.scope { margin-top: clamp(40px, 5vw, 64px); }
.scope__h { font-size: 15px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
.scope__h small { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); font-weight: 400; }
.scope__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); background: #fff; }
.scope__list li { padding: 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.6; }
.scope__list em { display: block; font-style: normal; font-size: 11px; color: var(--mute); font-weight: 400; }
.related { margin-top: 32px; font-size: 13.5px; color: var(--mute); }
.related a { color: var(--char); border-bottom: 1px solid var(--char); margin-left: .4em; white-space: nowrap; }

/* ---------- strengths ---------- */
.strengths__photo { margin-bottom: 0; }
.str { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.str li { padding: 28px clamp(16px, 2.4vw, 32px) 0 0; border-top: 0; }
.str li + li { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.str__no { display: block; font-family: var(--font-en); font-size: 13px; letter-spacing: .14em; color: var(--mute); margin-bottom: 10px; }
.str h3 { font-size: 17px; font-weight: 700; line-height: 1.65; color: var(--char); margin-bottom: 12px; }
.str p { font-size: 14.5px; }

/* ---------- works ---------- */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.work__cat { font-size: 17px; font-weight: 700; margin-top: 16px; display: flex; align-items: baseline; gap: 12px; line-height: 1.6; }
.work__cat span { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); font-weight: 400; }
.work__proc { font-size: 13.5px; color: var(--mute); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); line-height: 1.7; }
.work__proc b { display: block; font-weight: 500; font-size: 11px; letter-spacing: .12em; color: var(--ink); }

/* ---------- flow ---------- */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); counter-reset: none; }
.flow li { border-top: 2px solid var(--char); padding-top: 14px; }
.flow__no { display: block; font-family: var(--font-en); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--char); margin-bottom: 14px; letter-spacing: .02em; }
.flow h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.flow p { font-size: 13.5px; line-height: 1.85; color: var(--ink); }
.start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(32px, 4vw, 48px); }
.start p { background: var(--mist); padding: 18px 22px; font-size: 14px; line-height: 1.8; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
.start b { font-family: var(--font-en); font-weight: 500; letter-spacing: .14em; color: var(--char); }
.note { margin-top: 20px; font-size: 13px; color: var(--mute); }

/* ---------- journal ---------- */
.jr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.jr__item a { display: block; }
.jr__item a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.jr__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: 12px; color: var(--mute); letter-spacing: .08em; }
.jr__meta time { font-family: var(--font-en); letter-spacing: .12em; color: var(--ink); }
.jr h3 { font-size: 15.5px; font-weight: 500; line-height: 1.75; margin-top: 8px; }
.more { margin-top: 32px; }
.more a { display: inline-flex; gap: 12px; font-size: 14px; font-weight: 500; color: var(--char); border-bottom: 1px solid var(--char); padding-bottom: 4px; }

/* ---------- contact ---------- */
.contact { padding-top: clamp(64px, 8vw, 120px); }
.cta { background: var(--char); color: #fff; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 6vw, 80px); }
.cta h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 500; line-height: 1.55; letter-spacing: .04em; margin-bottom: 20px; }
.cta__main > p:not(.eyebrow):not(.cta__sub) { color: #283C32; font-size: 15px; margin-bottom: 32px; }
.cta__sub { margin-top: 18px; font-size: 12px; color: #4B5B50; }
.cta__ways li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.28); }
.cta__ways li:last-child { border-bottom: 1px solid rgba(255,255,255,.28); }
.cta__ways li > span { font-family: var(--font-en); font-size: 22px; color: #4B5B50; line-height: 1.4; }
.cta__ways h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cta__ways p { font-size: 13.5px; color: #283C32; line-height: 1.8; }
.faq { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(48px, 7vw, 96px); }
.faq__h { font-size: 15px; font-weight: 700; padding-top: 14px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; align-self: start; }
.faq__h small { font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.faq__list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 15.5px; font-weight: 500; line-height: 1.7; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-en); font-size: 22px; color: var(--char); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 40px 22px 0; font-size: 14.5px; color: var(--mute); }

/* ---------- footer ---------- */
.ftr { background: #E8DFD2; color: #283C32; padding: clamp(56px, 7vw, 96px) 0 28px; font-size: 14px; }
.ftr__top { display: grid; grid-template-columns: 1.15fr .7fr .8fr 1.5fr; gap: clamp(24px, 3.5vw, 56px); }
.ftr__brand p:not(.logo) { margin-top: 18px; color: #4B5B50; font-size: 13px; line-height: 1.9; }
.ftr__sns a { border-bottom: 1px solid #4B5B50; padding-bottom: 2px; color: #283C32; }
.ftr h2 { font-family: var(--font-en); font-weight: 400; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: #4B5B50; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #B8C8BC; }
.ftr__nav li + li { margin-top: 8px; }
.ftr__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ftr__co dl { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px 12px; font-size: 13px; line-height: 1.8; }
.ftr__co dt { color: #4B5B50; }
.ftr__co .tbd { color: #4B5B50; }
.ftr__copy { margin-top: clamp(40px, 6vw, 72px); padding-top: 20px; border-top: 1px solid #B8C8BC; font-size: 11px; color: #4B5B50; letter-spacing: .08em; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; font-size: 13px; padding: 12px 20px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; width: max-content; max-width: calc(100% - 32px); text-align: center; line-height: 1.6; }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .scope__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
}

/* ---------- mobile / menu ---------- */
@media (max-width: 900px) {
  :root { --head-h: 60px; }
  .logo { font-size: 21px; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); max-height: calc(100dvh - var(--head-h)); overflow-y: auto; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--pad) 28px; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav a { display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding: 18px 0; }
  .nav a span { font-size: 16px; }
  .nav a small { font-size: 11px; }
  .nav__cta { border-bottom: 0 !important; margin-top: 20px; }
  .nav__cta a { justify-content: center; gap: 14px; padding: 16px; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__photo { order: 2; }
  .hero__photo .ph--45 { aspect-ratio: 4 / 4.2; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec li, .spec li + li { padding: 16px 0; border-left: 0; }
  .spec li + li { border-top: 1px solid var(--line); }

  .sec__grid, .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sec__label { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .sec__label .jp { margin-left: auto; }
  .sp-none { display: none; }
  .about, .svc, .start, .cta { grid-template-columns: minmax(0, 1fr); }
  .about__text { margin-top: 4px; }

  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100% !important; }
  .cmp tr { border-top: 1px solid var(--line); background: #fff; padding: 14px 18px; }
  .cmp tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .cmp th, .cmp td { border: 0; padding: 4px 0; background: transparent !important; }
  .cmp tbody th { font-size: 12px; letter-spacing: .1em; }
  .cmp td::before { content: attr(data-l); display: inline-block; width: 3.6em; font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; color: var(--char); }
  .cmp__both::before { display: none !important; }

  .str { grid-template-columns: minmax(0, 1fr); }
  .str li, .str li + li { padding: 24px 0 0; border-left: 0; }
  .str li + li { margin-top: 24px; border-top: 1px solid var(--line); }
  .works, .jr { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
  .flow li:first-child { border-top: 2px solid var(--char); }
  .flow__no { grid-row: 1 / 3; font-size: 32px; margin: 0; }
  .flow h3 { margin-bottom: 4px; }
  .cta { padding: 32px 22px; }
  .ftr__top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ftr__co dl { grid-template-columns: 6.5em minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .btn { width: 100%; }
  .scope__list li { padding: 14px 12px; }
}

/* =====================================================
   Sub pages
   ===================================================== */
.nav a[aria-current="page"] span { color: var(--char); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.nav__cta a[aria-current="page"] span { color: #fff; }

.pg { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.crumb ol { display: flex; flex-wrap: wrap; font-size: 12px; color: var(--mute); letter-spacing: .06em; margin-bottom: clamp(32px, 5vw, 64px); line-height: 1.8; }
.crumb li + li::before { content: "/"; margin: 0 .8em; color: #4B5B50; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg__grid { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.pg__en { align-self: start; padding-top: 14px; border-top: 1px solid var(--ink); font-family: var(--font-en); font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--char); line-height: 1.2; }
.pg h1 { font-size: clamp(30px, 4.2vw, 54px); font-weight: 500; line-height: 1.42; letter-spacing: .04em; color: var(--char); margin-bottom: 24px; }
.pg__lead { max-width: 40em; }
.pg .spec { margin-top: clamp(32px, 4vw, 56px); }
.pg--sm h1 { font-size: clamp(24px, 3vw, 40px); }

.memo { margin-top: 32px; border: 1px dashed #4B5B50; padding: 16px 20px; font-size: 12.5px; color: var(--mute); line-height: 1.85; }
.memo b { display: block; font-size: 11px; letter-spacing: .16em; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.notice { background: var(--mist); border-left: 3px solid var(--char); padding: 14px 18px; font-size: 13.5px; line-height: 1.85; margin-bottom: clamp(32px, 4vw, 48px); }
.h3 { font-size: 19px; font-weight: 700; line-height: 1.6; color: var(--char); margin-bottom: 14px; }
.sec--tight { padding-top: 0; }
.stack > * + * { margin-top: clamp(40px, 5vw, 64px); }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.cap { font-size: 11px; color: var(--mute); margin-top: 8px; letter-spacing: .04em; }

/* definition table (company overview / history) */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 20px 0; border-top: 1px solid var(--line); line-height: 1.85; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 1px solid var(--line); }
.tbl th { width: 11em; font-weight: 500; color: var(--mute); padding-right: 24px; }
.tbl .tbd { color: var(--mute); }
.tbl small { display: block; font-size: 12px; color: var(--mute); }
.tbl ul li { padding-left: 1em; position: relative; }
.tbl ul li::before { content: "・"; position: absolute; left: -.2em; }
.tbl--head thead th { font-family: var(--font-en); font-size: 12px; letter-spacing: .2em; color: var(--mute); border-top: 2px solid var(--char); padding: 12px 24px 12px 0; }

/* alternating feature rows */
.feat { display: grid; gap: clamp(40px, 6vw, 80px); }
.feat__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.feat__item:nth-child(even) .ph { order: 2; }
.feat__no { display: block; font-family: var(--font-en); font-size: 13px; letter-spacing: .14em; color: var(--mute); margin-bottom: 10px; }
.feat h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 500; line-height: 1.6; color: var(--char); margin-bottom: 14px; }
.feat p { font-size: 15px; }

/* vertical flow */
.flowv li { display: grid; grid-template-columns: 72px minmax(0, .9fr) minmax(0, 2fr); gap: 6px 24px; padding: 22px 0; border-top: 1px solid var(--line); align-items: baseline; }
.flowv li:first-child { border-top: 2px solid var(--char); }
.flowv li:last-child { border-bottom: 1px solid var(--line); }
.flowv .n { font-family: var(--font-en); font-size: 28px; line-height: 1.2; color: var(--char); }
.flowv h3 { font-size: 17px; font-weight: 700; line-height: 1.6; }
.flowv p { font-size: 14.5px; }
.flowv li.opt .n, .flowv li.opt h3 { color: var(--mute); }
.flowv .opt-t { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--mute); border: 1px solid var(--line); padding: 1px 8px; vertical-align: 2px; }

/* generic CTA band for sub pages */
.cta--slim { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cta--slim h2 { margin-bottom: 12px; font-size: clamp(22px, 2.6vw, 32px); }
.cta--slim p:not(.eyebrow) { color: #283C32; font-size: 15px; }
.cta-sec { padding-bottom: clamp(64px, 8vw, 112px); }
.faq--solo { display: block; margin-top: 0; }

/* works */
.work a { display: block; }
.work a:hover .work__cat { text-decoration: underline; text-underline-offset: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); color: var(--mute); line-height: 1.6; background: #fff; }
.tags li.on { background: var(--char); border-color: var(--char); color: #fff; }
.ws { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ws__info .eyebrow { margin-bottom: 14px; }
.ws__info h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; line-height: 1.55; color: var(--char); margin-bottom: 28px; }
.dl { border-top: 1px solid var(--ink); }
.dl > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.8; }
.dl dt { color: var(--mute); font-weight: 500; }
.dl .blank { color: var(--mute); }
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: clamp(48px, 6vw, 80px); }
.pager a { display: block; padding: 20px 0; font-size: 14px; line-height: 1.7; }
.pager a + a, .pager span + a { text-align: right; }
.pager small { display: block; font-family: var(--font-en); font-size: 11px; letter-spacing: .22em; color: var(--mute); text-transform: uppercase; }
.pager a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.pager b { font-weight: 500; }

/* company */
.statement { font-family: var(--font-en); font-size: clamp(36px, 5.2vw, 68px); font-weight: 400; letter-spacing: .03em; line-height: 1.2; color: var(--char); margin-bottom: 28px; }

/* journal */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { font: inherit; font-size: 13px; padding: 8px 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); letter-spacing: .04em; line-height: 1.5; }
.chip:hover { border-color: var(--char); }
.chip[aria-pressed="true"] { background: var(--char); border-color: var(--char); color: #fff; }
.jr-count { font-size: 12px; color: var(--mute); margin-bottom: 32px; letter-spacing: .06em; }
.jr--list { row-gap: clamp(36px, 5vw, 56px); }
.jr__item[hidden] { display: none; }

/* article body */
.post { max-width: 42em; }
.post__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--mute); letter-spacing: .08em; margin-bottom: 18px; }
.post__meta time { font-family: var(--font-en); letter-spacing: .12em; color: var(--ink); }
.post h2 { font-size: 24px; font-weight: 700; line-height: 1.55; color: var(--char); margin: 56px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.post h3 { font-size: 19px; font-weight: 700; line-height: 1.6; margin: 36px 0 12px; padding-left: 14px; border-left: 3px solid var(--char); }
.post p { margin-bottom: 1.4em; }
.post ul { margin: 0 0 1.6em; border-top: 1px solid var(--line); }
.post ul li { padding: 10px 0 10px 1.3em; position: relative; border-bottom: 1px solid var(--line); line-height: 1.8; }
.post ul li::before { content: ""; position: absolute; left: 0; top: 1.5em; width: 7px; height: 1px; background: var(--char); }
.post blockquote { margin: 2em 0; padding: 20px 24px; background: var(--mist); border-left: 3px solid var(--char); font-size: 15px; }
.post figure { margin: 2em 0; }
.post figcaption { font-size: 12px; color: var(--mute); margin-top: 8px; }

/* contact form */
.stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); margin: 0 0 clamp(40px, 5vw, 64px); }
.stage a { display: block; padding: 22px 20px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stage a:hover { background: var(--mist); }
.stage b { display: block; font-family: var(--font-en); font-weight: 400; font-size: 12px; letter-spacing: .22em; color: var(--mute); margin-bottom: 6px; }
.stage h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.6; }
.stage p { font-size: 13.5px; color: var(--mute); line-height: 1.8; }
.cwrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1.5; }
.req { font-size: 10.5px; font-weight: 400; background: var(--char); color: #fff; padding: 1px 8px; letter-spacing: .08em; line-height: 1.7; }
.opt { font-size: 10.5px; font-weight: 400; color: var(--mute); border: 1px solid var(--line); padding: 0 8px; line-height: 1.7; }
.prop { font-size: 10.5px; font-weight: 400; color: var(--mute); border: 1px dashed #4B5B50; padding: 0 8px; line-height: 1.7; }
.fld input, .fld select, .fld textarea { font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #4B5B50; border-radius: 0; background: #fff; color: var(--ink); width: 100%; line-height: 1.6; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--char); outline-offset: 1px; border-color: var(--char); }
.fld textarea { min-height: 200px; resize: vertical; }
.fld .hint { font-size: 12px; color: var(--mute); line-height: 1.7; }
.form__note { font-size: 13px; color: var(--mute); line-height: 1.85; }
.form__note a { color: var(--char); border-bottom: 1px solid var(--char); }
.form .btn { cursor: pointer; font-family: inherit; }
.aside { border-top: 1px solid var(--ink); padding-top: 16px; font-size: 14px; line-height: 1.85; }
.aside h3 { font-size: 13px; font-weight: 500; letter-spacing: .08em; margin-bottom: 8px; }
.aside dl { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px 12px; margin-bottom: 24px; }
.aside dt { color: var(--mute); }
.aside .tbd { color: var(--mute); }

/* legal */
.legal { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.toc { position: sticky; top: calc(var(--head-h) + 24px); border-top: 1px solid var(--ink); padding-top: 12px; font-size: 13px; }
.toc li + li { margin-top: 6px; }
.toc a { color: var(--mute); }
.toc a:hover { color: var(--char); text-decoration: underline; text-underline-offset: 3px; }
.legal section + section { margin-top: 48px; }
.legal h2 { font-size: 20px; font-weight: 700; color: var(--char); line-height: 1.6; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.blank { border: 1px dashed #4B5B50; padding: 28px 20px; font-size: 13px; color: var(--mute); text-align: center; line-height: 1.8; }

@media (max-width: 1100px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .cwrap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .pg__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pg__en { padding-top: 12px; }
  .row3, .gal { grid-template-columns: minmax(0, 1fr); }
  .feat__item { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feat__item:nth-child(even) .ph { order: 0; }
  .flowv li { grid-template-columns: 56px minmax(0, 1fr); }
  .flowv p { grid-column: 2; }
  .cta--slim { grid-template-columns: minmax(0, 1fr); }
  .ws { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a + a, .pager span + a { text-align: left; border-top: 1px solid var(--line); }

  .tbl tr { display: block; border-top: 1px solid var(--line); padding: 14px 0; }
  .tbl tr:last-child { border-bottom: 1px solid var(--line); }
  .tbl th, .tbl td { display: block; width: 100%; padding: 2px 0; border: 0 !important; }
  .tbl th { font-size: 12px; letter-spacing: .08em; }
  .tbl--head thead { display: none; }
}
@media (max-width: 480px) {
  .dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* table on white card (scope) */
.tbl--card { background: #fff; }
.tbl--card th, .tbl--card td { padding-left: 24px; padding-right: 24px; }
.tbl--card th { width: 14em; }
.tbl--card thead th { padding-top: 14px; padding-bottom: 14px; }
.dl .blank { border: 0; padding: 0; text-align: left; font-size: inherit; color: var(--mute); }
@media (max-width: 900px) {
  .tbl--card tr { padding: 14px 18px; }
  .tbl--card th, .tbl--card td { padding-left: 0; padding-right: 0; }
}
.tbl--card.tbl--head thead th { padding: 14px 24px; }

/* NEHA palette: white / beige / pale green. Dark green is a text neutral. */
:root { --beige: #E8DFD2; --green: #C7D8CC; }
.nav__cta a, .btn--solid, .ph .tag, .cmp thead th,
.tags li.on, .chip[aria-pressed="true"], .req {
  background: var(--green); color: var(--ink); border-color: var(--green);
}
.nav__cta a small, .nav__cta a:hover span,
.nav__cta a[aria-current="page"] span { color: var(--ink); }
.btn--solid:hover, .nav__cta a:hover { background: var(--beige); color: var(--ink); }
.btn--line:hover { background: var(--green); color: var(--ink); }
.cta { background: var(--green); color: var(--ink); }
.cta__ways li, .cta__ways li:last-child { border-color: var(--mute); }
.btn--inv { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--inv:hover { background: var(--beige); color: var(--ink); }
.logo--inv, .ftr__nav a:hover { color: var(--ink); }
.svc__item { border-top-color: var(--mute); }