/* ワイヤーフレーム用コンポーネント */

/* === Header / Global Nav === */
.c-header {
  background: var(--color-surface-light);
  color: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-surface-mid);
}
.c-header__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.c-header__logo {
  font-size: var(--fs-body-md);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-primary);
  white-space: nowrap;
}
.c-gnav { flex: 1; }
.c-gnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-body-sm);
  justify-content: flex-end;
}
.c-gnav__list a {
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.c-gnav__list a[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid var(--color-primary);
}
.c-gnav__cta {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: nowrap;
}
.c-gnav__cta a {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-surface-light);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  white-space: nowrap;
}
.c-gnav__cta a + a {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* === Breadcrumbs === */
.c-breadcrumbs {
  font-size: var(--fs-body-sm);
  padding: var(--space-md) 0;
  color: var(--color-primary);
}
.c-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.c-breadcrumbs li + li::before { content: "›"; padding-right: var(--space-sm); color: var(--color-surface-mid); }

/* === Buttons === */
.c-btn {
  display: inline-block;
  font-size: var(--fs-body-md);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.c-btn--primary { background: var(--color-primary); color: var(--color-surface-light); }
.c-btn--secondary { background: var(--color-surface-light); color: var(--color-primary); border: 1px solid var(--color-surface-mid); }
.c-btn--link { background: transparent; color: var(--color-link); padding: 0; text-decoration: underline; }

/* === Card === */
.c-card {
  background: var(--color-surface-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}
.c-card__title { margin-top: 0; }

/* === Badge === */
.c-badge {
  display: inline-block;
  background: var(--color-surface-mid);
  color: var(--color-primary);
  font-size: var(--fs-body-caption);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
}

/* === Divider === */
.c-divider { height: 1px; background: var(--color-surface-mid); margin: var(--space-xl) 0; }

/* === Input === */
.c-input,
.c-textarea,
.c-select {
  width: 100%;
  background: var(--color-surface-light);
  color: var(--color-primary);
  font-size: var(--fs-body-md);
  font-family: var(--font-base);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-surface-mid);
  border-radius: var(--radius-sm);
}
.c-textarea { min-height: 8em; }
.c-form__field { margin-bottom: var(--space-lg); }
.c-form__label { display: block; font-weight: 600; margin-bottom: var(--space-xs); }
.c-form__hint { font-size: var(--fs-body-caption); color: var(--color-primary); }
.c-form__required { color: var(--color-error); margin-left: var(--space-xs); }

/* === Alert === */
.c-alert--error {
  background: var(--color-error);
  color: var(--color-on-link);
  font-size: var(--fs-body-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
}

/* === Footer === */
.c-footer {
  background: var(--color-primary);
  color: var(--color-surface-mid);
  padding: var(--space-2xl) var(--space-md);
  font-size: var(--fs-body-sm);
}
.c-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .c-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}
.c-footer a { color: var(--color-surface-mid); }
.c-footer__title { color: var(--color-surface-light); font-size: var(--fs-body-md); margin-bottom: var(--space-sm); font-weight: 700; }
.c-footer__nav { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.c-footer__bottom { max-width: var(--container-max); margin-inline: auto; margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-surface-mid); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }

/* === Common Bottom CTA === */
.c-bottom-cta {
  background: var(--color-surface-light);
  padding: var(--space-2xl) var(--space-md);
}
.c-bottom-cta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}
.c-bottom-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.c-bottom-cta__sub {
  margin-top: var(--space-md);
  font-size: var(--fs-body-sm);
}
.c-bottom-cta__sub a { color: var(--color-link); }

/* === Video frame (hero視聴枠) === */
.c-video-frame {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  position: relative;
  color: var(--color-primary);
  font-size: var(--fs-body-sm);
  text-align: center;
  padding: var(--space-md);
}
.c-video-frame::before {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: 0.35;
  pointer-events: none;
}
.c-video-frame > * { position: relative; z-index: 1; }

/* === Generic grids === */
.c-grid { display: grid; gap: var(--space-lg); }
.c-grid--2 { grid-template-columns: repeat(1, 1fr); }
.c-grid--3 { grid-template-columns: repeat(1, 1fr); }
.c-grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
  .c-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .c-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .c-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .c-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* === Image placeholder（src未指定の <img> をワイヤーで可視化） === */
img[alt^="[[image:"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-caption);
  color: var(--color-primary);
  position: relative;
}
img[alt^="[[image:"]::after {
  content: attr(alt);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Hero === */
.c-hero {
  background: var(--color-surface-light);
  padding: var(--space-3xl) var(--space-md);
}
.c-hero__inner { max-width: var(--container-max); margin-inline: auto; }
.c-hero h1 { margin-bottom: var(--space-md); }

/* === Event card === */
.c-event-card {
  background: var(--color-surface-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.c-event-card__date { font-size: var(--fs-body-sm); }
.c-event-card__venue { font-size: var(--fs-body-sm); color: var(--color-primary); }

/* === Section title === */
.c-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* === Brand card === */
.c-brand-card {
  background: var(--color-surface-light);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}
.c-brand-card--lead { /* 西川を視覚的に大きく扱う（撒き餌戦略） */
  background: var(--color-surface-mid);
}

/* === FAQ === */
.c-faq dt { font-weight: 700; margin-top: var(--space-lg); }
.c-faq dd { margin: 0 0 var(--space-md); }

/* === Definition list (about) === */
.c-deflist {
  display: grid;
  gap: var(--space-sm) var(--space-lg);
  grid-template-columns: max-content 1fr;
}
.c-deflist dt { font-weight: 700; }
.c-deflist dd { margin: 0; }