/* Space Grotesk（欧文見出し・番号・URL 限定。latin サブセット・約 13KB/ウェイト） */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

a {
  color: inherit;
}

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

/* 桝目パターン（48px グリッド） */
.hero,
.cta,
.page-hero {
  background-image: linear-gradient(var(--color-border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-soft) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text-primary);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--text-small-size);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-4) 28px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.btn--primary {
  background: var(--color-text-primary);
  color: var(--color-bg);
  border-color: var(--color-text-primary);
}

.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
}

.btn--secondary:hover {
  background: var(--color-text-primary);
  color: var(--color-bg);
}

.btn__sub {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
}

.btn-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.btn-row--center {
  justify-content: center;
}

/* ヘッダー */
.site-header {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  min-height: 56px;
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
  border-right: var(--border-width) solid var(--color-border);
  text-decoration: none;
}

.site-header__name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  font-size: var(--text-small-size);
  font-weight: 600;
}

.site-header__nav a {
  padding: 10px var(--space-3);
  text-decoration: none;
}

.site-header__nav a:hover {
  color: var(--color-accent);
}

.site-header__nav a[aria-current="page"] {
  border-bottom: 3px solid var(--color-accent);
}

.site-header__cta {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--text-small-size);
  font-weight: 700;
  text-decoration: none;
  border-inline-start: var(--border-width) solid var(--color-border);
}

.site-header__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-contrast);
}

/* ヒーロー */
.hero {
  border-bottom: var(--border-width) solid var(--color-border);
}

.hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-22) var(--space-12) 72px;
}

.hero__title {
  font-size: clamp(2.125rem, 5vw, var(--text-display-size));
  line-height: var(--text-display-lh);
  font-weight: var(--text-display-weight);
  letter-spacing: 0.01em;
  max-width: 19em;
  text-wrap: pretty;
  margin-block-end: 28px;
}

.hero__lead {
  font-size: 1rem;
  line-height: 2;
  max-width: var(--measure);
  color: var(--color-text-secondary);
  margin-block-end: 40px;
}

/* 課題提起 */
.issue {
  border-bottom: var(--border-width) solid var(--color-border);
}

.issue__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.issue__head {
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-12);
  border-right: var(--border-width) solid var(--color-border);
}

.issue__head h2 {
  margin-block-start: var(--space-4);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 700;
}

.masu-marker {
  display: flex;
  gap: var(--space-2);
}

.masu-marker__fill,
.masu-marker__stroke {
  width: 10px;
  height: 10px;
}

.masu-marker__fill {
  background: var(--color-accent);
}

.masu-marker__stroke {
  border: 2px solid var(--color-border);
}

.issue__body {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.issue__body p {
  font-size: var(--text-body-size);
  line-height: 2.1;
  max-width: var(--measure);
  color: var(--color-text-secondary);
}

.issue__body .issue__strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* サービス */
.services {
  border-bottom: var(--border-width) solid var(--color-border);
}

.services__head {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-12) var(--space-12) 0;
}

.services__head h2 {
  font-size: 30px;
  font-weight: 700;
  margin-block-end: 28px;
}

.services__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: var(--border-width) solid var(--color-border);
}

.service {
  padding: 28px var(--space-8) var(--space-8);
  border-right: var(--border-width-soft) solid var(--color-border);
}

.service:nth-child(3n) {
  border-right: 0;
}

.service:nth-child(n + 4) {
  border-top: var(--border-width-soft) solid var(--color-border);
}

.services__pattern {
  border-top: var(--border-width-soft) solid var(--color-border);
  background-image: linear-gradient(var(--color-border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-soft) 1px, transparent 1px);
  background-size: 24px 24px;
}

.service__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-small-size);
  color: var(--color-accent);
  margin-block-end: var(--space-3);
}

.service__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin-block-end: var(--space-3);
}

.service__body {
  font-size: 13.5px;
  line-height: 2;
  color: var(--color-text-muted);
}

.service__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-accent);
}

.service__link:hover {
  color: var(--color-accent-hover);
}

/* スタンス（墨反転。両モードとも墨地に温白文字で固定） */
.stance {
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--masu-ink);
  color: var(--masu-white);
}

.stance :focus-visible {
  outline-color: var(--masu-gold);
}

.stance__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 56px var(--space-12) var(--space-16);
}

.stance__inner h2 {
  font-size: 30px;
  font-weight: 700;
  margin-block-end: 36px;
}

.stance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.stance__item h3 {
  font-size: 19px;
  font-weight: 700;
  padding-block-end: var(--space-3);
  border-bottom: var(--border-width) solid var(--masu-white);
  margin-block-end: 14px;
}

.stance__item p {
  font-size: 14px;
  line-height: 2.1;
  color: var(--masu-white-dim);
}

/* これまでの仕事 */
.works {
  border-bottom: var(--border-width) solid var(--color-border);
}

.works__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.works__head {
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-12);
  border-right: var(--border-width) solid var(--color-border);
}

.works__head h2 {
  font-size: 26px;
  font-weight: 700;
}

.works__body {
  padding: 40px var(--space-12);
}

.works__list {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.works__list li {
  display: flex;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: var(--border-width-soft) solid var(--color-border);
  font-size: 14.5px;
  line-height: 1.9;
}

.works__list li:last-child {
  border-bottom: 0;
}

.works__marker {
  flex: none;
  width: 10px;
  height: 10px;
  margin-block-start: 9px;
  border: 2px solid var(--color-accent);
}

.works__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  font-size: 14px;
  font-weight: 700;
}

.works__link:hover {
  color: var(--color-accent);
}

/* クロージング CTA */
.cta {
  border-bottom: var(--border-width) solid var(--color-border);
}

.cta__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 72px var(--space-12);
  text-align: center;
}

.cta__inner h2 {
  font-size: 34px;
  font-weight: 700;
  margin-block-end: var(--space-4);
}

.cta__lead {
  font-size: var(--text-body-size);
  line-height: 2.1;
  max-width: 36em;
  margin-inline: auto;
  margin-block-end: 36px;
  color: var(--color-text-secondary);
  text-align: left;
}

/* フッター（墨反転） */
.site-footer {
  background: var(--masu-ink);
  color: var(--masu-white);
  padding: 40px var(--space-12) var(--space-8);
}

.site-footer :focus-visible {
  outline-color: var(--masu-gold);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.site-footer__name {
  font-weight: 700;
  font-size: 15px;
}

.site-footer__nav {
  display: flex;
  gap: var(--space-2) var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-small-size);
  padding-block-end: var(--space-6);
  border-bottom: var(--border-width-soft) solid var(--masu-ink-3);
}

.site-footer__nav a {
  padding: 6px 0;
  color: var(--masu-white);
}

.site-footer__nav a:hover,
.site-footer__meta a:hover {
  color: var(--masu-gold);
}

.site-footer__meta {
  margin-block-start: 20px;
  font-size: 12px;
  color: #a8a49a;
}

.site-footer__meta a {
  color: var(--masu-white-dim);
}

/* 下層ページ共通ヒーロー帯 */
.page-hero {
  border-bottom: var(--border-width) solid var(--color-border);
}

.page-hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-16) var(--space-12) 56px;
}

.page-hero__eyebrow {
  font-size: var(--text-small-size);
  font-weight: 700;
  color: var(--color-accent);
  margin-block-end: var(--space-4);
}

.page-hero__title {
  font-size: clamp(1.75rem, 4vw, var(--text-h1-size));
  line-height: var(--text-h1-lh);
  font-weight: var(--text-h1-weight);
}

.page-hero__suffix {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* 文書系ページ共通 */
.doc {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.doc__lead {
  font-size: 1rem;
  line-height: 2.1;
  max-width: var(--measure);
  color: var(--color-text-secondary);
}

.doc-h {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 22px;
  font-weight: 700;
  padding-block-end: 14px;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-block-end: 20px;
}

.doc__para {
  font-size: 14.5px;
  line-height: 2.1;
  max-width: var(--measure);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-4);
}

.facts {
  margin: 0;
  border: var(--border-width) solid var(--color-border);
}

.facts__row {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.facts__row + .facts__row {
  border-top: var(--border-width-soft) solid var(--color-border);
}

.facts__row dt {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small-size);
  font-weight: 700;
  border-right: var(--border-width-soft) solid var(--color-border);
  background: var(--color-surface);
}

.facts__row dd {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  line-height: 1.9;
}

.steps {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: none;
  display: flex;
  flex-direction: column;
}

.steps__item {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: var(--border-width-soft) solid var(--color-border);
  font-size: 14.5px;
  line-height: 1.9;
}

.steps__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-small-size);
  color: var(--color-accent);
}

.legal {
  margin: 0;
  border: var(--border-width) solid var(--color-border);
}

.legal__row {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.legal__row + .legal__row {
  border-top: var(--border-width-soft) solid var(--color-border);
}

.legal__row dt {
  padding: var(--space-4);
  font-size: var(--text-small-size);
  font-weight: 700;
  border-right: var(--border-width-soft) solid var(--color-border);
  background: var(--color-surface);
}

.legal__row dd {
  margin: 0;
  padding: var(--space-4);
  font-size: 14px;
  line-height: 2;
}

/* プロフィール */
.about {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.about__side {
  border-right: var(--border-width) solid var(--color-border);
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-12);
}

.about__side-sticky {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}

.about__role {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-secondary);
}

.about__side-h {
  font-size: var(--text-small-size);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}

.about__links {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
}

.about__links a {
  display: inline-flex;
  gap: var(--space-2);
  padding: 4px 0;
}

.about__links a:hover {
  color: var(--color-accent);
}

.about__link-label {
  font-family: var(--font-display);
  color: var(--color-text-muted);
}

.about__body {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.about__intro {
  font-size: 1rem;
  line-height: 2.2;
  max-width: var(--measure);
}

.about__para {
  font-size: 14.5px;
  line-height: 2.1;
  max-width: var(--measure);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-4);
}

/* お問い合わせ */
.contact {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 380px 1fr;
}

.contact__side {
  border-right: var(--border-width) solid var(--color-border);
  padding: var(--space-12) 40px var(--space-12) var(--space-12);
}

.contact__lead {
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--color-text-secondary);
  margin-block-end: var(--space-6);
}

.contact__ask {
  border: var(--border-width) solid var(--color-border);
  padding: 20px var(--space-6);
}

.contact__ask p {
  font-size: 13.5px;
  line-height: 2;
  color: var(--color-text-secondary);
  margin-block-end: var(--space-3);
}

.contact__body {
  padding: var(--space-12);
}

.contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-alert {
  border: var(--border-width) solid var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg));
  padding: var(--space-4) 20px;
}

.form-alert p {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-error);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: 14px;
  font-weight: 700;
}

.field__required {
  font-size: 12px;
  color: var(--color-error);
  font-weight: 700;
}

.field__optional {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.field__error {
  font-size: var(--text-small-size);
  font-weight: 700;
  color: var(--color-error);
}

.input {
  padding: 14px var(--space-4);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.9;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

textarea.input {
  resize: vertical;
}

.input--error {
  border-color: var(--color-error);
}

.method {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.method__options {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.method__option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-3) 18px;
  font-size: 14px;
  cursor: pointer;
}

.method__option:has(input:checked) {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
}

.method__option input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  margin: 0;
}

.contact-form__submit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.contact-form__submit button {
  cursor: pointer;
  font-family: inherit;
}

.contact-form__note {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-text-muted);
}

.contact-done {
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  padding: 40px;
  max-width: 560px;
}

.contact-done--error {
  border-color: var(--color-error);
}

.contact-done h2 {
  font-size: 24px;
  font-weight: 700;
  margin-block: 20px var(--space-4);
}

.contact-done p {
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--color-text-secondary);
  margin-block-end: var(--space-6);
}

.masu-marker__fill--success {
  background: var(--color-success);
}

/* コンパクトフッター */
.site-footer--compact {
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-8) var(--space-12);
}

.site-footer__compact-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-footer__compact-nav {
  display: flex;
  gap: var(--space-2) var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-small-size);
}

.site-footer__compact-nav a {
  color: var(--masu-white);
  padding: 6px 0;
}

.site-footer__compact-nav a:hover {
  color: var(--masu-gold);
}

/* レスポンシブ（--bp-md: 768px） */
@media (max-width: 768px) {
  .site-header {
    flex-wrap: wrap;
  }

  .site-header__nav {
    order: 3;
    width: 100%;
    border-top: var(--border-width) solid var(--color-border);
  }

  .hero__inner,
  .services__head,
  .stance__inner,
  .cta__inner {
    padding-inline: var(--space-6);
  }

  .hero__inner {
    padding-block: var(--space-12) var(--space-12);
  }

  .issue__inner,
  .works__inner {
    grid-template-columns: 1fr;
  }

  .issue__head,
  .works__head {
    padding: var(--space-8) var(--space-6) 0;
    border-right: 0;
  }

  .issue__body,
  .works__body {
    padding: var(--space-6);
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .service {
    padding: var(--space-6);
    border-right: 0;
    border-top: var(--border-width-soft) solid var(--color-border);
  }

  .service:first-child {
    border-top: 0;
  }

  .services__pattern {
    display: none;
  }

  .stance__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .site-footer {
    padding: var(--space-8) var(--space-6);
  }

  .page-hero__inner {
    padding: var(--space-12) var(--space-6) var(--space-8);
  }

  .doc {
    padding: var(--space-6);
    gap: var(--space-8);
  }

  .about,
  .contact {
    grid-template-columns: 1fr;
  }

  .about__side,
  .contact__side {
    border-right: 0;
    border-bottom: var(--border-width) solid var(--color-border);
    padding: var(--space-6);
  }

  .about__side-sticky {
    position: static;
  }

  .about__body,
  .contact__body {
    padding: var(--space-6);
  }

  .facts__row,
  .legal__row {
    grid-template-columns: 1fr;
  }

  .facts__row dt,
  .legal__row dt {
    border-right: 0;
    border-bottom: var(--border-width-soft) solid var(--color-border);
  }
}