/* ============================================================
   Tachimachi Digital Works — 共有スタイル v2
   モーション原則: docs/plan_2026-08-29_top-v2.md 施策D
   ============================================================ */

:root {
  --paper: #fbfbfa;
  --paper-2: #f3f4f6;
  --ink: #16181d;
  --ink-soft: #5c6470;
  --navy: #001888;
  --navy-hover: #00146e;
  --navy-faint: #eef0fa;
  --rule: #e4e7ec;
  /* キャラクターカラー */
  --c-ken: #001888;
  --c-marina: #b45309;
  --c-marina-faint: #fdf5ec;
  --c-sensei: #0f766e;
  --c-sensei-faint: #eefaf8;
  --max: 72rem;
  --space: clamp(1.15rem, 4vw, 2.5rem);
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-heading: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --header-h: 4.25rem;
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-enter: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

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

a {
  color: var(--navy);
  text-underline-offset: 0.25em;
}

.wrap {
  width: min(100% - 2 * var(--space), var(--max));
  margin-inline: auto;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}

/* --- ボタン --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  will-change: transform;
}

.btn:hover {
  background: var(--navy-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.btn--ghost:hover {
  background: var(--navy);
  color: #fff;
}

.btn .arrow {
  font-family: var(--font-mono);
  transition: transform var(--dur-fast) ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* --- ヘッダー --- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  background: rgb(251 251 250 / 0);
  border-bottom: 1px solid rgb(228 231 236 / 0);
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease,
    transform var(--dur-base) var(--ease-inout);
}

.site-header.is-solid {
  background: rgb(251 251 250 / 0.92);
  border-bottom-color: var(--rule);
  backdrop-filter: blur(8px);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  width: min(100% - 2 * var(--space), var(--max));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--navy);
  text-decoration: none;
  flex-shrink: 0;
}

.brand__mark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
}

.brand__name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  transition: color var(--dur-fast) ease;
}

.nav a:hover {
  color: var(--navy);
}

.nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}

.nav .nav__cta {
  color: var(--navy);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background: var(--navy);
  position: relative;
  margin-inline: auto;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

@media (max-width: 880px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--space) 1.2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .nav a[aria-current="page"] {
    border-bottom: 1px solid var(--rule);
    font-weight: 700;
  }
}

/* --- トップ用ヒーロー（パーティクル） --- */

.hero {
  position: relative;
  min-height: min(44rem, 92svh);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + clamp(2.5rem, 8vh, 5rem)) 0 clamp(3rem, 8vh, 5rem);
  background-image: radial-gradient(circle, #d9dde6 1px, transparent 1px);
  background-size: 28px 28px;
  overflow: hidden;
}

.hero.has-canvas {
  background-image: none;
}

.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8rem;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
  z-index: 1;
}

.hero .wrap {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.hero .wrap a,
.hero .wrap button {
  pointer-events: auto;
}

.hero__kicker {
  margin: 0 0 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hero__kicker::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--navy);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.hero__lead {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  font-size: clamp(0.92rem, 1.5vw, 1rem);
  line-height: 2.1;
  color: var(--ink);
}

.hero__lead strong {
  font-weight: 700;
  color: var(--navy);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 2.2rem 0 0;
}

/* --- 下層ページ用ヒーロー --- */

.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 5rem)) 0 clamp(2.2rem, 5vh, 3.2rem);
  background-image: radial-gradient(circle, #d9dde6 1px, transparent 1px);
  background-size: 28px 28px;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

.page-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-hero__kicker {
  margin: 0 0 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.page-hero__kicker::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--navy);
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.page-hero__lead {
  margin: 1.2rem 0 0;
  max-width: 38rem;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--ink-soft);
}

/* --- 記事ヒーロー・イラスト差し込みバリアント --- */

.page-hero--art {
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.page-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% 48%;
  display: block;
  filter: saturate(0.78) brightness(1.05) contrast(0.96);
}

.page-hero__art--sp {
  display: none;
}

.page-hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    var(--paper) 44%,
    rgb(251 251 250 / 0.72) 58%,
    rgb(251 251 250 / 0.22) 78%,
    rgb(251 251 250 / 0.16) 100%
  );
}

.page-hero--art .wrap {
  max-width: 26rem;
}

@media (max-width: 780px) {
  .page-hero--art {
    padding-top: calc(var(--header-h) + 0.5rem);
  }

  .page-hero__art {
    position: relative;
    inset: auto;
    height: clamp(10rem, 42vw, 13rem);
    margin: 0 0 1.6rem;
  }

  .page-hero__art img {
    object-position: 62% 42%;
  }

  .page-hero__art--pc {
    display: none;
  }

  .page-hero__art--sp {
    display: block;
  }

  .page-hero__art::after {
    background: linear-gradient(to bottom, rgb(251 251 250 / 0.05) 45%, var(--paper) 92%);
  }

  .page-hero--art .wrap {
    max-width: none;
  }
}

/* --- 入口カード --- */

.entry {
  padding: clamp(1rem, 3vh, 2rem) 0 0;
}

.entry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.entry-card {
  display: block;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.entry-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: 0 16px 32px -20px rgb(0 24 136 / 0.35);
}

.entry-card__label {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--navy);
}

.entry-card h2,
.entry-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.entry-card h2 .arrow,
.entry-card h3 .arrow {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  transition: transform var(--dur-fast) ease;
}

.entry-card:hover h2 .arrow,
.entry-card:hover h3 .arrow {
  transform: translateX(4px);
}

.entry-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .entry__grid {
    grid-template-columns: 1fr;
  }
}

/* --- セクション共通 --- */

.section {
  padding: clamp(4rem, 10vh, 6.5rem) 0 0;
}

.section--first {
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin: 0 0 clamp(1.8rem, 4vh, 2.8rem);
}

.section__no {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--navy);
  min-width: 1.6em;
}

.section__head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: 0.1em;
  color: var(--ink);
}

.section__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.15s;
}

.section__head.is-in::after {
  transform: scaleX(1);
}

.section__head .section__no,
.section__head h2 {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}

.section__head.is-in .section__no {
  opacity: 1;
  transform: none;
}

.section__head.is-in h2 {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}

.lead-copy {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.measure {
  max-width: 40rem;
}

.measure p:not(.lead-copy) {
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.measure p strong {
  color: var(--ink);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.link-more .arrow {
  font-family: var(--font-mono);
  transition: transform var(--dur-fast) ease;
}

.link-more:hover .arrow {
  transform: translateX(4px);
}

/* --- キャラクター吹き出し --- */

.dialogue {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
}

.bubble {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.bubble img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.bubble__box {
  position: relative;
  flex: 1;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.85rem 1.15rem 0.95rem;
  border-top: 3px solid var(--c-char, var(--navy));
}

.bubble__box::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 1.4rem;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
}

.bubble__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--c-char, var(--navy));
}

.bubble__role {
  display: inline-block;
  margin: 0.15rem 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.bubble__box p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.95;
}

.bubble--ken {
  --c-char: var(--c-ken);
}

.bubble--marina {
  --c-char: var(--c-marina);
}

.bubble--sensei {
  --c-char: var(--c-sensei);
}

@media (max-width: 560px) {
  .bubble img {
    width: 3.4rem;
    height: 3.4rem;
  }
}

/* --- 案内人紹介カード --- */

.cast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.cast-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.cast-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-char, var(--navy));
  box-shadow: 0 16px 32px -22px rgb(0 24 136 / 0.3);
}

.cast-card__bar {
  height: 3px;
  background: var(--c-char, var(--navy));
}

.cast-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.cast-card__body img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  flex-shrink: 0;
}

.cast-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--c-char, var(--navy));
}

.cast-card__role {
  display: inline-block;
  margin: 0.2rem 0 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 0.12rem 0.55rem;
  border-radius: 99px;
  background: var(--c-char-faint, var(--navy-faint));
  color: var(--c-char, var(--navy));
  font-weight: 700;
}

.cast-card__body p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.cast-card--ken {
  --c-char: var(--c-ken);
  --c-char-faint: var(--navy-faint);
}

.cast-card--marina {
  --c-char: var(--c-marina);
  --c-char-faint: var(--c-marina-faint);
}

.cast-card--sensei {
  --c-char: var(--c-sensei);
  --c-char-faint: var(--c-sensei-faint);
}

@media (max-width: 880px) {
  .cast {
    grid-template-columns: 1fr;
  }
}

.cast-note {
  margin: 1.2rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* --- 汎用カードグリッド（Value等） --- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.value-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 880px) {
  .value-grid--2 {
    grid-template-columns: 1fr;
  }
}

.value-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 1.4rem 1.5rem 1.5rem;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.value-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: 0 16px 32px -22px rgb(0 24 136 / 0.3);
}

.value-card__no {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--navy);
}

.value-card h3 {
  margin: 0.55rem 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.value-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* --- ステートメント（serifの大きな言葉） --- */

.statement {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
}

.statement .mono {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.statement p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.8vw, 1.8rem);
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--navy);
}

.statement small {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* --- 01 私たちについて（トップ） --- */

.define {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.not-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.not-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.9rem;
}

.not-list li + li {
  border-top: 1px solid var(--rule);
}

.not-list .no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.not-list li.is-answer {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.not-list li.is-answer .no {
  color: rgb(255 255 255 / 0.7);
}

@media (max-width: 800px) {
  .define {
    grid-template-columns: 1fr;
  }
}

/* --- 仕事の進め方 --- */

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.flow li {
  padding: 1.6rem 1.4rem 1.8rem;
  position: relative;
}

.flow li + li {
  border-left: 1px solid transparent;
  transition: border-color 0.6s ease;
}

.flow.is-in li + li {
  border-left-color: var(--rule);
}

.flow .step-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--navy);
}

.flow h3 {
  margin: 0.7rem 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.flow p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .flow {
    grid-template-columns: 1fr;
  }

  .flow li + li {
    border-left: 0;
    border-top: 1px solid transparent;
  }

  .flow.is-in li + li {
    border-left-color: transparent;
    border-top-color: var(--rule);
  }
}

/* --- 物語バンド --- */

.band {
  position: relative;
  margin-top: clamp(4rem, 10vh, 6.5rem);
  height: clamp(16rem, 44vh, 26rem);
  overflow: hidden;
}

.band img {
  position: absolute;
  inset: -2.5rem 0;
  width: 100%;
  height: calc(100% + 5rem);
  object-fit: cover;
  object-position: center 58%;
  will-change: transform;
}

.band__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(6 12 32 / 0.55), rgb(6 12 32 / 0) 55%);
  pointer-events: none;
}

.band__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  color: #fff;
}

.band__caption .wrap {
  padding-bottom: 1.6rem;
}

.band__caption .mono {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.band__caption p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 12px rgb(6 12 32 / 0.5);
}

/* --- サービスレイヤー --- */

.layers {
  display: grid;
  gap: 1.2rem;
}

.layer {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 1.8rem clamp(1.4rem, 3vw, 2.2rem) 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: 1.2rem 2.5rem;
  align-items: start;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.layer:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: 0 18px 36px -24px rgb(0 24 136 / 0.3);
}

.layer__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--navy);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.layer__badge {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 99px;
  color: var(--ink-soft);
}

.layer h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.layer__purpose {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.layer__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: start;
}

.layer__items li {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.42rem 0.85rem;
  background: var(--navy-faint);
  color: var(--navy);
  border-radius: 4px;
}

.layer--soon .layer__items li {
  background: var(--paper-2);
  color: var(--ink-soft);
}

.layers__note {
  margin: 1.6rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.layers__note strong {
  color: var(--navy);
}

@media (max-width: 800px) {
  .layer {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* --- サービス詳細（下層） --- */

.service-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.service-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.4rem 2rem;
  padding: 1.15rem 1.4rem;
}

.service-item + .service-item {
  border-top: 1px solid var(--rule);
}

.service-item h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.service-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .service-item {
    grid-template-columns: 1fr;
  }
}

/* --- AIセクション（帯） --- */

.ai {
  background: var(--paper-2);
  margin-top: clamp(4rem, 10vh, 6.5rem);
  padding: clamp(3.5rem, 9vh, 5.5rem) 0;
}

.ai .section {
  padding-top: 0;
}

.ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.ai-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.ai-rules li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 0.88rem;
}

.ai-rules .mono {
  font-size: 0.7rem;
  color: var(--navy);
  flex-shrink: 0;
}

.ai-offer {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
}

.ai-offer__label {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--navy);
}

.ai-offer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ai-offer li {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.42rem 0.85rem;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 4px;
}

.ai-offer p {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (max-width: 800px) {
  .ai__grid {
    grid-template-columns: 1fr;
  }
}

/* --- ひとりの事務所 / fit-list --- */

.solo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.fit-list {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.fit-list__head {
  margin: 0;
  padding: 0.85rem 1.2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  background: var(--navy-faint);
  color: var(--navy);
  border-bottom: 1px solid var(--rule);
}

.fit-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fit-list li {
  display: flex;
  gap: 0.8rem;
  padding: 0.85rem 1.2rem;
  font-size: 0.88rem;
}

.fit-list li + li {
  border-top: 1px solid var(--rule);
}

.fit-list li::before {
  content: "✓";
  font-family: var(--font-mono);
  color: var(--navy);
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .solo {
    grid-template-columns: 1fr;
  }
}

/* --- 概要表 --- */

.spec-table {
  width: 100%;
  max-width: 44rem;
  border-collapse: collapse;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.9rem;
}

.spec-table th,
.spec-table td {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.spec-table tr:first-child th,
.spec-table tr:first-child td {
  border-top: 0;
}

.spec-table th {
  width: 9rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: var(--navy-faint);
}

@media (max-width: 560px) {
  .spec-table th {
    width: 6.5rem;
  }
}

/* --- 制作実績 --- */

.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.works-grid li {
  cursor: default;
}

.works-grid .thumb {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      rgb(0 24 136 / 0.03) 10px 20px
    ),
    #fff;
  display: grid;
  place-items: center;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.works-grid li:hover .thumb {
  transform: scale(1.02);
  border-color: var(--navy);
}

.works-grid h3 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color var(--dur-fast) ease;
}

.works-grid li:hover h3 {
  color: var(--navy);
}

.works__note {
  margin: 1.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- FAQ --- */

.faq {
  max-width: 46rem;
  display: grid;
  gap: 0.8rem;
}

.faq details {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-fast) ease;
}

.faq details[open],
.faq details:hover {
  border-color: var(--navy);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--navy);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin: 0;
  padding: 0 1.3rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* --- ステップ（お問い合わせ等） --- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 1.4rem 1.5rem 1.5rem;
  position: relative;
}

.steps li::before {
  content: "STEP 0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--navy);
}

.steps h3 {
  margin: 0.55rem 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.steps p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* --- お問い合わせ帯 --- */

.contact {
  margin-top: clamp(4.5rem, 11vh, 7rem);
  background: var(--navy);
  color: #fff;
  padding: clamp(3.5rem, 9vh, 5.5rem) 0;
}

.contact .section__no {
  color: rgb(255 255 255 / 0.75);
}

.contact h2 {
  margin: 0.8rem 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.contact p {
  margin: 1.4rem 0 0;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 2;
  color: rgb(255 255 255 / 0.88);
}

.trust {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.trust li {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 99px;
}

.contact .btn {
  margin-top: 2.2rem;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}

.contact .btn:hover {
  background: var(--paper-2);
}

.contact__note {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.65);
}

/* 紺地なのでリンクの既定色（navy）だと沈む */
.contact a:not(.btn) {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 0.5);
}

/* --- お問い合わせフォーム --- */

.form {
  margin-top: 2rem;
  max-width: 40rem;
  display: grid;
  gap: 1.5rem;
}

.form__field {
  display: grid;
  gap: 0.55rem;
}

.form__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.form__req {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  background: var(--navy-faint);
  color: var(--navy);
}

.form__input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.form__input:hover {
  border-color: #cdd2da;
}

.form__input:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-faint);
}

.form__input[aria-invalid="true"] {
  border-color: var(--c-marina);
  box-shadow: 0 0 0 3px var(--c-marina-faint);
}

.form__textarea {
  resize: vertical;
  min-height: 9rem;
}

.form__help {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* ハニーポット: 支援技術にもユーザーにも出さない */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.2rem;
}

.form__submit {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.form__submit[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.form__status {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.form__status.is-error {
  color: var(--c-marina);
}

.form__status.is-done {
  color: var(--c-sensei);
}

.form__done {
  margin-top: 2rem;
  max-width: 40rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--c-sensei);
  border-radius: 6px;
  background: var(--c-sensei-faint);
}

.form__done h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.form__done p {
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  line-height: 2;
  color: var(--ink-soft);
}

.form__note {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* --- フッター --- */

.site-footer {
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
}

.site-footer__bg,
.site-footer__bg img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.site-footer__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(6 12 32 / 0.82), rgb(6 12 32 / 0.55));
  pointer-events: none;
}

.site-footer__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(6 12 32 / 0.92);
  opacity: 1;
  transition: opacity 1.4s var(--ease-out);
  pointer-events: none;
}

.site-footer.is-in .site-footer__veil {
  opacity: 0;
}

.site-footer__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--space), var(--max));
  margin-inline: auto;
  padding: clamp(3rem, 8vh, 4.5rem) 0 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.footer-brand .brand {
  color: #fff;
  margin-bottom: 0.9rem;
}

.footer-brand .brand__name {
  color: rgb(255 255 255 / 0.75);
}

.footer-brand p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.footer-nav a {
  color: rgb(255 255 255 / 0.88);
  text-decoration: none;
}

.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__bar {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--space), var(--max));
  margin-inline: auto;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.85);
}

.site-footer__bar a {
  color: inherit;
  text-decoration: none;
}

.site-footer__bar a:hover {
  text-decoration: underline;
}

/* --- スクロール表示（単体） --- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- スクロール表示（子要素の時間差入場） --- */

.reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}

.reveal-group.is-in > * {
  opacity: 1;
  transform: none;
}

.reveal-group.is-in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-group.is-in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-group.is-in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: 400ms; }

/* AIルール・対話はログ風にゆっくり順出し */
.ai-rules.reveal-group.is-in > *:nth-child(2),
.dialogue.reveal-group.is-in > *:nth-child(2) { transition-delay: 160ms; }
.ai-rules.reveal-group.is-in > *:nth-child(3),
.dialogue.reveal-group.is-in > *:nth-child(3) { transition-delay: 320ms; }
.ai-rules.reveal-group.is-in > *:nth-child(4),
.dialogue.reveal-group.is-in > *:nth-child(4) { transition-delay: 480ms; }

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

  .reveal,
  .reveal-group > *,
  .section__head .section__no,
  .section__head h2 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .section__head::after {
    transform: scaleX(1);
    transition: none;
  }

  .flow li + li {
    border-left-color: var(--rule);
    transition: none;
  }

  @media (max-width: 880px) {
    .flow li + li {
      border-left-color: transparent;
      border-top-color: var(--rule);
    }
  }

  .site-footer__veil {
    opacity: 0;
    transition: none;
  }

  .band img {
    transform: none !important;
  }
}

/* ============================================================
   実績・ブログ（ハブ + 詳細）用コンポーネント
   ============================================================ */

/* --- 疑似ブラウザ（サイト実績のスクリーンショット用） --- */

.browser-frame {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px -32px rgb(0 24 136 / 0.25);
}

.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.browser-frame__bar i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d4d8e0;
}

.browser-frame__bar .addr {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-frame img {
  width: 100%;
  display: block;
}

/* --- カードグリッド（ハブ） --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-card {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

a.item-card:hover {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: 0 16px 32px -20px rgb(0 24 136 / 0.35);
}

.item-card__thumb {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  /* 画面キャプチャは上端に見出しが来るため、上を基準に切り取る */
  object-position: center top;
  display: block;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.item-card__thumb--soon {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      rgb(0 24 136 / 0.03) 10px 20px
    ),
    #fff;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

/* サムネ画像未設定の記事カード: 「準備中」ではなく、タイトルそのものを見せ札にする */
.item-card__thumb--title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.3rem 1.4rem;
  background-color: var(--navy);
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.16) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
  overflow: hidden;
}

.item-card__thumb--title::before {
  content: "JOURNAL";
  position: absolute;
  top: 0.85rem;
  left: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.6);
}

.item-card__thumb--title span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.item-card__body {
  padding: 1rem 1.2rem 1.2rem;
}

.item-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
}

.item-card__date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.item-card h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.6;
}

a.item-card:hover h3 {
  color: var(--navy);
}

.item-card p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* --- タグ・カテゴリチップ --- */

.chip {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.55rem;
  border-radius: 99px;
  background: var(--navy-faint);
  color: var(--navy);
  font-weight: 700;
}

/* --- フィルタバー --- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.8rem;
}

.filter-bar button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.filter-bar button:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.filter-bar button.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --- 空状態 --- */

.empty-state {
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.empty-state .mono {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

/* --- 記事本文（journal詳細） --- */

.prose {
  max-width: 46rem;
}

.prose h2 {
  margin: 2.6rem 0 1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.prose h3 {
  margin: 2rem 0 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.prose p {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  line-height: 2;
}

.prose ul,
.prose ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 2;
}

.prose strong {
  color: var(--navy);
}

.prose figure {
  margin: 1.6rem 0;
}

.prose figcaption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}

/* --- 一枚絵サマリー（journal詳細） --- */

.summary-box {
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: #fff;
  padding: 1.6rem clamp(1.2rem, 3vw, 2rem) 1.8rem;
  margin: 1.8rem 0;
}

.summary-box__label {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--navy);
}

.summary-box__answer {
  margin: 0 0 1.2rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--navy);
}

/* --- 実績詳細: 写真スロット --- */

.case-photo {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.case-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 720px) {
  .photo-pair {
    grid-template-columns: 1fr;
  }
}

/* --- 実績詳細: 4段ストーリー --- */

.case-story {
  display: grid;
  gap: 1rem;
  counter-reset: case;
}

.case-story > section {
  counter-increment: case;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 1.5rem clamp(1.3rem, 3vw, 2rem) 1.7rem;
}

.case-story > section > h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.case-story > section > h3::before {
  content: "0" counter(case);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}

.case-story p {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 2;
}

.case-story p:last-child {
  margin-bottom: 0;
}

/* --- 実績グリッド（トップ）: 実サムネ対応 --- */

.works-grid a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.works-grid img.thumb {
  object-fit: cover;
  width: 100%;
}

/* --- ページネーション的な前後ナビ --- */

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
}

.post-nav a {
  text-decoration: none;
  font-weight: 700;
}

/* --- フローの3列版 + 主役ノード強調（記事の図解用） --- */

.flow--3 {
  grid-template-columns: repeat(3, 1fr);
}

.flow--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 880px) {
  .flow--3,
  .flow--5 {
    grid-template-columns: 1fr;
  }
}

.flow li.is-focus {
  background: var(--navy-faint);
}

.flow li.is-focus h3 {
  color: var(--navy);
}

/* --- 疑似スマホ（モバイル版スクリーンショット用） --- */

.phone-frame {
  width: min(100%, 20rem);
  margin-inline: auto;
  padding: 0.55rem;
  border-radius: 2rem;
  background: #14161c;
  box-shadow: 0 30px 60px -30px rgb(0 24 136 / 0.45);
}

.phone-frame__screen {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
}

/* ノッチは実機スクショの内容を隠すため既定では出さない。
   OS のステータスバーごと写した素材にのみ .phone-frame--notch を付ける */
.phone-frame__notch {
  display: none;
}

.phone-frame--notch .phone-frame__notch {
  display: block;
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.5rem;
  height: 0.9rem;
  border-radius: 99px;
  background: #14161c;
  z-index: 1;
}

.phone-frame img {
  width: 100%;
  display: block;
}

/* 画面ショットと説明を横に並べる（実績詳細） */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (max-width: 800px) {
  .showcase {
    grid-template-columns: 1fr;
  }
}

/* --- 縦長スクショ（ページ全体キャプチャ）を窓に収める --- */

.shot-window {
  position: relative;
}

.shot-window::after {
  /* 続きがあることを示す下端のフェード */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.95));
  pointer-events: none;
}

.shot-scroll {
  max-height: var(--shot-h, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.shot-scroll::-webkit-scrollbar {
  width: 6px;
}

.shot-scroll::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 99px;
}

.shot-scroll img {
  width: 100%;
  display: block;
}

.shot-hint {
  margin: 0.6rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* フレーム内に窓を置くときは角丸をフレーム側に合わせる */
.browser-frame .shot-window,
.phone-frame__screen .shot-window {
  overflow: hidden;
}

.phone-frame__screen .shot-window::after {
  height: 2.5rem;
}

/* --- PC + SP の併置（レスポンシブ実績の定番レイアウト） --- */

.device-combo {
  position: relative;
  width: min(100%, 52rem);
  margin-inline: auto;
  padding-bottom: 2.5rem;
}

.device-combo > .browser-frame {
  width: min(100%, 44rem);
}

.device-combo > .phone-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11.5rem;
  margin: 0;
  padding: 0.4rem;
  border-radius: 1.5rem;
}

.device-combo > .phone-frame .phone-frame__screen {
  border-radius: 1.15rem;
  max-height: 19rem;
  overflow: hidden;
}

@media (max-width: 860px) {
  .device-combo {
    display: grid;
    gap: 1.2rem;
    justify-items: center;
    padding-bottom: 0;
  }

  .device-combo > .browser-frame {
    width: 100%;
  }

  .device-combo > .phone-frame {
    position: static;
    width: min(100%, 15rem);
    padding: 0.5rem;
    border-radius: 1.8rem;
  }

  .device-combo > .phone-frame .phone-frame__screen {
    border-radius: 1.35rem;
    max-height: none;
  }
}

/* フレーム + スクロールヒントの器（幅を合わせて中央寄せ） */

.shot-figure {
  /* 幅はこの器に指定する（例: style="width: min(100%, 46rem)"）。
     中のフレームが幅いっぱいに広がり、ヒストもフレームと同じ幅で中央に揃う */
  margin: 0 auto;
  max-width: 100%;
}

.shot-figure > .browser-frame,
.shot-figure > .phone-frame {
  margin: 0;
  width: 100%;
}

/* ============================================================
   図解専用パーツ（journal記事のみで使用。固定ページの紺一色は
   維持し、記事セクションだけ「図解の言語」として機能色を持たせる）
   ============================================================ */

:root {
  /* 図解専用の機能色（記事内の意味づけ専用。固定ページには使わない） */
  --fx-blue: #2563eb;
  --fx-blue-soft: #eff6ff;
  --fx-green: #16a34a;
  --fx-green-soft: #f0fdf4;
  --fx-red: #dc2626;
  --fx-red-soft: #fef2f2;
  --fx-amber: #d97706;
  --fx-amber-soft: #fffbeb;
  --fx-indigo: #4f46e5;
  --fx-indigo-soft: #eef2ff;
}

/* --- 矢印つきフロー（プロセス図の主力） --- */

.flow-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.flow-track__step {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.3rem 1.6rem;
  text-align: center;
}

.flow-track__step.is-focus {
  background: var(--navy-faint);
}

.flow-track__badge {
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
}

.flow-track__step--blue .flow-track__badge { background: var(--fx-blue); }
.flow-track__step--green .flow-track__badge { background: var(--fx-green); }
.flow-track__step--red .flow-track__badge { background: var(--fx-red); }
.flow-track__step--amber .flow-track__badge { background: var(--fx-amber); }
.flow-track__step--indigo .flow-track__badge { background: var(--fx-indigo); }

.flow-track__step h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.flow-track__step p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.flow-track__arrow {
  flex: 0 0 auto;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  background: var(--paper-2);
}

.flow-track__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-track__arrow .arrow-v {
  display: none;
}

@media (max-width: 760px) {
  .flow-track {
    flex-direction: column;
  }

  .flow-track__arrow {
    width: 100%;
    height: 2.2rem;
  }

  .flow-track__arrow .arrow-h {
    display: none;
  }

  .flow-track__arrow .arrow-v {
    display: block;
  }
}

/* --- 比較トラック（左右対比 + 中央コネクタ） --- */

.compare-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.compare-track__side {
  flex: 1;
  min-width: 0;
  padding: 1.4rem 1.5rem 1.6rem;
}

.compare-track__side + .compare-track__side {
  border-left: 1px solid var(--rule);
}

.compare-track__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  padding: 0.2rem 0.7rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.compare-track__label svg {
  width: 0.82rem;
  height: 0.82rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.compare-track__side--red .compare-track__label { background: var(--fx-red-soft); color: var(--fx-red); }
.compare-track__side--green .compare-track__label { background: var(--fx-green-soft); color: var(--fx-green); }
.compare-track__side--blue .compare-track__label { background: var(--fx-blue-soft); color: var(--fx-blue); }
.compare-track__side--indigo .compare-track__label { background: var(--fx-indigo-soft); color: var(--fx-indigo); }
.compare-track__side--amber .compare-track__label { background: var(--fx-amber-soft); color: var(--fx-amber); }
.compare-track__side--navy .compare-track__label { background: var(--navy-faint); color: var(--navy); }

.compare-track__side h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.compare-track__side p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

.compare-track__mid {
  flex: 0 0 auto;
  width: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  color: var(--navy);
}

.compare-track__mid svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 720px) {
  .compare-track {
    flex-direction: column;
  }

  .compare-track__side + .compare-track__side {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .compare-track__mid {
    width: 100%;
    height: 2.2rem;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
}

/* --- アイコンバッジ（図解カードの視覚アンカー） --- */

.icon-badge {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 0.7rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--navy-faint);
  color: var(--navy);
}

.icon-badge svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-badge--blue { background: var(--fx-blue-soft); color: var(--fx-blue); }
.icon-badge--green { background: var(--fx-green-soft); color: var(--fx-green); }
.icon-badge--red { background: var(--fx-red-soft); color: var(--fx-red); }
.icon-badge--amber { background: var(--fx-amber-soft); color: var(--fx-amber); }
.icon-badge--indigo { background: var(--fx-indigo-soft); color: var(--fx-indigo); }

/* --- value-card の機能色 modifier（記事内の意味づけ用） --- */

.value-card--blue { border-color: var(--fx-blue); }
.value-card--blue .value-card__no { color: var(--fx-blue); }
.value-card--green { border-color: var(--fx-green); }
.value-card--green .value-card__no { color: var(--fx-green); }
.value-card--red { border-color: var(--fx-red); }
.value-card--red .value-card__no { color: var(--fx-red); }
.value-card--amber { border-color: var(--fx-amber); }
.value-card--amber .value-card__no { color: var(--fx-amber); }
.value-card--indigo { border-color: var(--fx-indigo); }
.value-card--indigo .value-card__no { color: var(--fx-indigo); }

/* --- 中央強調ノード（一枚絵サマリー等で「主役」を示す） --- */

.node-hero {
  border: 2px solid var(--navy);
  background: var(--navy-faint);
}

/* --- 縦積み階層図（flow-track の常時縦バリアント。まとめ・積み上げ表現に使う） --- */

.flow-track--vertical {
  flex-direction: column;
  border: 0;
  background: transparent;
  gap: 0;
}

.flow-track--vertical .flow-track__step {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  padding: 0.9rem 1.2rem;
  text-align: left;
}

.flow-track--vertical .flow-track__step h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.flow-track--vertical .flow-track__step h3 .flow-track__badge {
  margin: 0;
  flex: 0 0 auto;
}

.flow-track--vertical .flow-track__step p {
  margin: 0.3rem 0 0;
  text-align: left;
}

.flow-track--vertical .flow-track__arrow {
  width: 100%;
  height: 1.6rem;
  background: transparent;
}

.flow-track--vertical .flow-track__arrow .arrow-h {
  display: none;
}

.flow-track--vertical .flow-track__arrow .arrow-v {
  display: block;
}

.flow-track--vertical .flow-track__step--muted {
  opacity: 0.75;
}