/* 【2026-10-19 基礎工事① 1回目】トップページ(入口)。templates/organizations/top.html 専用。
   色はすべて design_tokens.css の :root トークン(トップページには data-theme を付けないため、
   テーマ色 --color-primary 等は使わない)。ボタンは既存の共通部品(.btn / .btn-primary)をそのまま使う。
   スマホ表示を基準にし、PCでも中央の1カラムで表示する(紹介サイトと同じ構成)。 */

.top-page {
  max-width: 520px;
  margin: 0 auto;
  /* 下は右下の「ご意見・ご要望」ボタン(固定表示)と下部リンクが重ならない余白 */
  padding: 0 16px 72px;
  color: var(--color-text);
}

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
}

.top-brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.top-header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}

.top-hero {
  padding: 20px 16px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--color-info-bg) 0%, var(--color-surface) 78%);
}

.top-title {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.top-lead {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

.top-visual {
  margin: 18px 0 8px;
}

.top-visual-svg {
  display: block;
  width: 100%;
  height: auto;
}

.top-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.top-actions .top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.top-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 24px;
  font-size: 14px;
}

.top-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-sub);
}

/* ---- メインビジュアル(インラインSVG) ---- */
.tv-sun { fill: var(--cat-exhibit-bg); }
.tv-hill { fill: var(--cat-workshop-bg); }
.tv-string { stroke: var(--color-border-strong); stroke-width: 1.5; }
.tv-flag-1 { fill: var(--cat-stage-text); }
.tv-flag-2 { fill: var(--cat-exhibit-text); }
.tv-flag-3 { fill: var(--cat-workshop-text); }
.tv-flag-4 { fill: var(--cat-meeting-text); }
.tv-tent-roof { fill: var(--color-surface); stroke: var(--cat-setup-text); stroke-width: 2; stroke-linejoin: round; }
.tv-tent-stripe { fill: var(--cat-setup-bg); }
.tv-tent-body { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.5; }
.tv-tent-counter { fill: var(--cat-setup-bg); }
.tv-phone-body { fill: var(--color-text); }
.tv-phone-screen { fill: var(--color-surface); }
.tv-phone-title { fill: var(--color-text); font-size: 10px; font-weight: 800; }
.tv-row-bg { fill: var(--color-surface-muted); }
.tv-row-text { fill: var(--color-text); font-size: 9px; font-weight: 700; }
.tv-dot-1 { fill: var(--cat-setup-text); }
.tv-dot-2 { fill: var(--cat-exhibit-text); }
.tv-dot-3 { fill: var(--cat-workshop-text); }
.tv-dot-4 { fill: var(--cat-meeting-text); }
.tv-dot-5 { fill: var(--cat-stage-text); }

@media (min-width: 600px) {
  .top-page { padding-top: 16px; }
  .top-hero { padding: 32px 32px 32px; }
  .top-title { font-size: 42px; }
}