/*
 * コンポーネント
 * ページをまたいで再利用する部品を定義する。
 */

/* ===== ボタン ===== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.875rem 1.75rem;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.button:hover {
  transform: translateY(-1px);
}

.button__arrow {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform var(--duration-base) var(--easing-emphasized);
}

.button:hover .button__arrow {
  transform: translateX(3px);
}

.button--primary {
  background-color: var(--color-navy-800);
  color: var(--color-text-on-dark);
  border-color: var(--color-navy-800);
}

.button--primary:hover {
  background-color: var(--color-navy-700);
  border-color: var(--color-navy-700);
  color: var(--color-text-on-dark);
}

.button--accent {
  background-color: var(--color-accent-600);
  color: var(--color-surface);
  border-color: var(--color-accent-600);
}

.button--accent:hover {
  background-color: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--color-surface);
}

.button--outline {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.button--outline:hover {
  border-color: var(--color-navy-800);
  color: var(--color-navy-800);
}

/* 濃紺の上に置く枠線ボタン。--color-line-on-dark（白16%）では枠が見えないため、
   文字と同系の明るい色で輪郭をはっきりさせる。 */
.button--ghost-inverse {
  border-color: var(--color-text-on-dark-muted);
  color: var(--color-text-on-dark);
}

.button--ghost-inverse:hover {
  border-color: var(--color-accent-400);
  color: var(--color-accent-400);
}

.button--block {
  inline-size: 100%;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ===== テキストリンク（矢印付き） ===== */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-navy-700);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.text-link:hover {
  color: var(--color-accent-600);
}

.text-link svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  transition: transform var(--duration-base) var(--easing-emphasized);
}

.text-link:hover svg {
  transform: translateX(3px);
}

/* ===== グリッド ===== */
.grid {
  display: grid;
  gap: var(--space-lg);
}

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

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

.grid--gap-lg {
  gap: clamp(var(--space-lg), 2.5vw, var(--space-xl));
}

/* ===== カード ===== */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-md), 2vw, var(--space-xl));
  background-color: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  transition:
    transform var(--duration-base) var(--easing-emphasized),
    box-shadow var(--duration-base) var(--easing-emphasized),
    border-color var(--duration-base) var(--easing-standard);
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-200);
}

.card__index {
  font-family: var(--font-serif);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-accent-600);
  margin-bottom: var(--space-md);
}

.card__title {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-sm);
}

.card__text {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-md);
}

/* ===== 3つの柱 ===== */
.pillar {
  padding: clamp(var(--space-md), 2vw, var(--space-xl));
  background-color: var(--color-surface);
  border-top: var(--border-rule-accent);
  box-shadow: var(--shadow-md);
}

/* 見出しの上に置く。絶対配置にすると長いタイトルと重なるため通常フローとする */
.pillar__number {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-accent-400);
}

.pillar__title {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-sm);
}

.pillar__text {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

/* ===== ステップ（現状→連携→実現） ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

/* ステップ間をつなぐ矢印 */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--space-lg) / -2 - 0.375rem);
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-top: 1.5px solid var(--color-accent-500);
  border-right: 1.5px solid var(--color-accent-500);
  transform: translateY(-50%) rotate(45deg);
}

.step__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent-700);
  background-color: var(--color-accent-100);
  border-radius: var(--radius-pill);
}

.step__title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.step__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  line-height: 1.85;
  color: var(--color-ink-secondary);
}

.step--emphasis {
  background-color: var(--color-navy-800);
  border-color: var(--color-navy-800);
}

.step--emphasis .step__title {
  color: var(--color-text-on-dark);
}

.step--emphasis .step__list {
  color: var(--color-text-on-dark-muted);
}

.step--emphasis .step__label {
  color: var(--color-navy-900);
  background-color: var(--color-accent-400);
}

/* ===== 統計ハイライト ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.stat {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-on-dark);
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  font-family: var(--font-serif);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-accent-400);
}

.stat__unit {
  font-size: 0.4em;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-body);
}

.stat__label {
  margin-top: var(--space-sm);
  font-size: var(--font-size-body-sm);
  line-height: 1.8;
  color: var(--color-text-on-dark);
}

.stat__note {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-on-dark-muted);
}

/* ===== 定義リスト（法人概要表） ===== */
.spec-table {
  border-top: 1px solid var(--color-line);
}

.spec-table__row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}

.spec-table__key {
  font-family: var(--font-serif);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-800);
  letter-spacing: var(--letter-spacing-wide);
}

.spec-table__value {
  margin: 0;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.spec-table__value ol,
.spec-table__value ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* ===== 箇条書き（チェック／番号／注記） ===== */
.marker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.marker-list li {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.marker-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.85em;
  inset-inline-start: 0;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  background-color: var(--color-accent-500);
  border-radius: 50%;
}

.marker-list--inverse li {
  color: var(--color-text-on-dark-muted);
}

.numbered-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  counter-reset: numbered;
}

.numbered-list li {
  position: relative;
  padding-inline-start: 2.25rem;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
  counter-increment: numbered;
}

.numbered-list li::before {
  content: counter(numbered);
  position: absolute;
  inset-block-start: 0.35em;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  font-family: var(--font-serif);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-700);
  background-color: var(--color-accent-100);
  border-radius: 50%;
}

.note {
  padding: var(--space-md);
  background-color: var(--color-paper-alt);
  border-left: var(--border-rule-accent);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.footnote {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  line-height: 1.9;
  color: var(--color-ink-muted);
}

/* ===== 対比表（認可／認可外） ===== */
.comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.comparison__column {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-md), 2vw, var(--space-xl));
  border-radius: var(--radius-md);
}

.comparison__column--reference {
  background-color: var(--color-surface);
  border: var(--border-hairline);
}

.comparison__column--focus {
  background-color: var(--color-navy-800);
  color: var(--color-text-on-dark);
}

.comparison__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--font-size-h4);
}

.comparison__column--focus .comparison__heading {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-line-on-dark);
}

.comparison__tag {
  padding: 0.125rem 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper-alt);
  color: var(--color-ink-muted);
}

.comparison__column--focus .comparison__tag {
  background-color: var(--color-accent-400);
  color: var(--color-navy-900);
}

/* ===== 沿革・スケジュール ===== */
.timeline {
  display: flex;
  flex-direction: column;
  /* 丸の直径と、日付の1行目の中央に丸を合わせる位置。日付の文字サイズを変えても
     ずれないよう計算で求める。--timeline-dot-center は丸の中心＝縦線の始点・終点。 */
  --timeline-dot: 0.625rem;
  --timeline-dot-top: calc((var(--font-size-body-sm) * var(--line-height-body) - var(--timeline-dot)) / 2);
  --timeline-dot-center: calc(var(--timeline-dot-top) + var(--timeline-dot) / 2);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-inline-start: var(--space-lg);
  padding-block: 0 var(--space-2xl);
  /* 丸（::before）同士を結ぶ縦線。薄い --color-line では紙テクスチャの上でほぼ見えず、
     丸だけが浮いて見えるため、輪郭のはっきりする --color-line-strong を使う。 */
  border-left: 1px solid var(--color-line-strong);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  inset-block-start: var(--timeline-dot-top);
  inset-inline-start: calc(var(--timeline-dot) / -2);
  inline-size: var(--timeline-dot);
  block-size: var(--timeline-dot);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-accent-500);
  border-radius: 50%;
}

/* 縦線は最初の丸の中心から最後の丸の中心までを繋ぐ。border-left は項目の高さ全体に
   引かれ、最初の項目では丸より上へ、最後の項目では丸より下へはみ出す。そのため
   最初と最後だけ border を消し、疑似要素で必要な区間だけを描く。 */
.timeline__item:first-child,
.timeline__item:last-child {
  border-left-color: transparent;
}

.timeline__item:first-child::after,
.timeline__item:last-child::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  border-left: 1px solid var(--color-line-strong);
}

/* 最初の項目は丸の中心から下端まで。 */
.timeline__item:first-child::after {
  inset-block-start: var(--timeline-dot-center);
  inset-block-end: 0;
}

/* 最後の項目は上端から丸の中心まで。 */
.timeline__item:last-child::after {
  inset-block-start: 0;
  block-size: var(--timeline-dot-center);
}

/* 項目が1つだけのときは繋ぐ相手がいないため線を引かない。 */
.timeline__item:only-child::after {
  content: none;
}

/* 文字サイズは元のまま。紙テクスチャ上で沈まないよう色だけ濃いアクセントにする。 */
.timeline__date {
  font-family: var(--font-serif);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent-700);
}

.timeline__title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

/* ===== 人物カード ===== */
.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  padding: clamp(var(--space-md), 2vw, var(--space-xl));
  background-color: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}

/* 左に写真、右に経歴の2列にすると、写真側の列が余って右に空きが出るうえ、
   左右の高さが揃わずカード下部にも大きな空白が残る。1列にして、上段に
   「写真＋肩書き＋氏名＋所属」、下段に経歴を全幅で置く。 */
.person--featured {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.person__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 上段は写真を左に置き、その右へ肩書き・氏名・所属を縦に積む。
   写真は3行ぶんの高さにまたがらせ、右側の空きを作らない。 */
.person--featured .person__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-2xs);
  align-items: center;
}

.person--featured .person__photo {
  grid-row: 1 / span 3;
  align-self: start;
  inline-size: 10rem;
  max-inline-size: none;
  margin-bottom: 0;
}

.person__role {
  align-self: flex-start;
  /* グリッド内では既定で列幅いっぱいに伸びてしまうため、文字数ぶんの幅に留める。 */
  justify-self: start;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-surface);
  background-color: var(--color-navy-800);
  border-radius: var(--radius-pill);
}

.person__role--support {
  color: var(--color-accent-700);
  background-color: var(--color-accent-100);
}

.person__monogram {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-600);
  background-color: var(--color-paper-alt);
  border: 1px solid var(--color-line);
  border-radius: 50%;
}

/* 人物カード（詳細）の顔写真 */
.person__photo {
  display: block;
  inline-size: 100%;
  max-inline-size: 14rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background-color: var(--color-paper-alt);
  margin-bottom: var(--space-md);
}

/* 一覧・トップの円形アバター */
/* 人物カードの顔写真と氏名を横並びにする。写真の下に氏名を置くと縦に間延びし、
   カードごとの高さも揃いにくいため。 */
.card__person-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.card__person-head .card__title {
  margin-bottom: 0;
}

.card__avatar {
  display: block;
  flex-shrink: 0;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background-color: var(--color-paper-alt);
}

.person__name {
  font-size: var(--font-size-h3);
}

.person__affiliation {
  font-size: var(--font-size-body-sm);
  line-height: 1.85;
  color: var(--color-ink-muted);
}

.person__bio {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.person__bio p + p {
  margin-top: var(--space-sm);
}

/* ===== 訴求バンド ===== */
.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  /* 明るいクリーム地。紺のフッターとは light→dark で明快に分離する。
     直前の明るいセクションとは上端の細線で区切る。 */
  background-color: var(--color-accent-100);
  color: var(--color-ink-secondary);
  overflow: clip;
  border-top: 1px solid var(--color-line-soft);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset-block-end: -40%;
  inset-inline-start: -8%;
  inline-size: 30rem;
  block-size: 30rem;
  border: 1px solid var(--color-accent-200);
  border-radius: 50%;
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  z-index: var(--z-base);
  text-align: center;
}

.cta-band__title {
  font-size: var(--font-size-h2);
  /* クリーム地に映える濃紺 */
  color: var(--color-navy-900);
  /* 各行の長さを揃え、最終行に数文字だけ残る不自然な折り返しを防ぐ。 */
  text-wrap: balance;
}

.cta-band__text {
  max-width: 40rem;
  margin: var(--space-md) auto var(--space-xl);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* CTAのボタンは既存の .button--primary（紺塗り）/ .button--outline（紺枠）を
   HTML側で使用する。クリーム地の上で確実にコントラストが出るため、個別上書きは不要。 */

/* ===== フォーム ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

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

.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy-800);
}

.field__required {
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-surface);
  background-color: var(--color-danger);
  border-radius: var(--radius-sm);
}

.field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

.field__control {
  padding: 0.8125rem var(--space-sm);
  font-size: var(--font-size-body-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.field__control:focus {
  outline: none;
  border-color: var(--color-navy-600);
  box-shadow: 0 0 0 3px var(--color-navy-100);
}

textarea.field__control {
  min-block-size: 10rem;
  resize: vertical;
  line-height: var(--line-height-body);
}

select.field__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-muted) 50%),
    linear-gradient(135deg, var(--color-ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 1.25rem, calc(100% - 0.75rem) 1.25rem;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-xl);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-ink-secondary);
}

.checkbox input {
  flex-shrink: 0;
  font-size: inherit;
  inline-size: 1em;
  block-size: 1em;
  /* 1em四方を、1行分の行ボックス（高さ = line-height-body em）の中央へ配置 */
  margin-block-start: calc((var(--line-height-body) - 1) / 2 * 1em);
  accent-color: var(--color-navy-700);
}

/* 同意文中のリンクは、本文色とリンク色の明度差が小さく、色だけではリンクと判別できない。
   色以外の手がかりとして下線を併用する。太字にしないのは、隣接する「必須」バッジと
   強調が競合し、「強調表示」と「リンク」の区別がかえって付きにくくなるため。 */
.checkbox a {
  font-weight: var(--font-weight-medium);
  color: var(--color-navy-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.checkbox a:hover {
  color: var(--color-accent-600);
  text-decoration-thickness: 2px;
}

.form__status {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-body-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-100);
  color: var(--color-accent-700);
}

.form__status[hidden] {
  display: none;
}

.form__status--error,
.field__error {
  color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}

.field__error {
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.form-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--space-lg);
  padding: 0;
  overflow: hidden;
  list-style: none;
  color: var(--color-ink-muted);
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  /* 親（.form-complete 等）が align-items: flex-start でも、ステップ帯は常に全幅にする。 */
  align-self: stretch;
}

.form-steps li {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  text-align: center;
  background: var(--color-surface);
}

.form-steps .is-current {
  font-weight: var(--font-weight-bold);
  color: var(--color-surface);
  background: var(--color-navy-700);
}

.form-screen__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h3);
  color: var(--color-navy-900);
}

.form-confirm {
  margin: 0;
  border-top: 1px solid var(--color-line-strong);
}

.form-confirm__row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--color-line);
}

.form-confirm__row dt,
.form-confirm__row dd {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
}

/* 値（メール・URL等）は長ければ折り返す。ラベル（dt）は不自然な位置で折り返さない。 */
.form-confirm__row dd {
  overflow-wrap: anywhere;
}

.form-confirm__row dt {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-navy-800);
  background: var(--color-paper-alt);
  overflow-wrap: normal;
}

.form-confirm__actions form {
  display: contents;
}

/* 確認画面では「この内容で送信する」が最終確定の操作となるため、
   残り幅を占めさせて主役にする。「入力画面へ戻る」は内容幅のまま控えめに保つ。 */
.form-confirm__actions .button--primary {
  flex: 1 1 auto;
}

.form-complete {
  align-items: flex-start;
}

@media (max-width: 40rem) {
  .form-confirm__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 狭い画面では確認画面の操作ボタンを全幅で縦に積み、タップ領域を確保する。 */
  .form-confirm__actions .button {
    inline-size: 100%;
  }
}

/* ===== 申込フォームのセクション（フィールドセット） ===== */
.form-block {
  margin: 0;
  padding: 0;
  border: none;
}

/* セクション間の区切りは margin-top で確保する。
   fieldset の padding-top は legend の「下」に入り見出し余白を狂わせるため使わない。 */
.form-block + .form-block {
  margin-top: var(--space-xl);
}

.form-block__legend {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-900);
}

.form-block__num {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-accent-600);
}

.form-block__desc {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-secondary);
}

.form-block__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* 選択肢グリッド（チェックボックス・ラジオ群） */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-xs) var(--space-md);
}

.choice-grid--single {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-ink-secondary);
}

.choice input {
  accent-color: var(--color-navy-700);
}

/* 主となるチェックボックス・ラジオは1行目の中央へ正確に整列させる。
   1em四方を、1行分の行ボックス（高さ = line-height-body em）の中央に置く。
   従属選択（.subchoice）や「その他」記入欄（.choice__other）は対象外とするため、
   .choice 直下の checkbox / radio のみを指定する。 */
.choice > input[type="checkbox"],
.choice > input[type="radio"] {
  flex-shrink: 0;
  font-size: inherit;
  inline-size: 1em;
  block-size: 1em;
  margin-block-start: calc((var(--line-height-body) - 1) / 2 * 1em);
}

/* 「その他（記入）」等のインライン入力 */
.choice__other {
  flex: 1;
  min-inline-size: 6rem;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-body-sm);
  background-color: var(--color-surface);
  border: none;
  border-bottom: 1px solid var(--color-line-strong);
}

.choice__other:focus {
  outline: none;
  border-bottom-color: var(--color-navy-600);
}

/* 適合証明書 有/無 のような従属選択 */
.subchoice {
  display: inline-flex;
  gap: var(--space-sm);
  margin-inline-start: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

.subchoice label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.form-actions {
  margin-top: var(--space-xl);
}

/* ===== レスポンシブ ===== */
@media (max-width: 60rem) {
  .grid--3,
  .steps,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step:not(:last-child)::after {
    display: none;
  }

}

@media (max-width: 48rem) {
  .grid--2,
  .grid--3,
  .steps,
  .stat-grid,
  .comparison,
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-table__row,
  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .timeline__item {
    gap: var(--space-sm);
  }

  /* 狭い画面では、中央寄せの本文は行頭が揃わず読みづらい。
     CTA帯の文章とボタンを左寄せにし、行頭を一直線に揃える。 */
  .cta-band__inner {
    text-align: left;
  }

  /* 写真を小さくして、氏名と所属に必要な幅を確保する。 */
  .person--featured .person__photo {
    inline-size: 7rem;
  }

  .person--featured .person__head {
    column-gap: var(--space-md);
  }

  .cta-band__text {
    margin-inline: 0;
  }

  .cta-band__actions {
    justify-content: flex-start;
  }
}