/* ──────────────────────────────────────────────────────────
   静的ページ（About / 規約 / プライバシー / 掲載停止依頼）
   新聞の「社告・お知らせ面」を意識した読み物レイアウト。
   ────────────────────────────────────────────────────────── */

.page {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}

.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3vw + 12px, 56px);
}

.article__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  color: var(--crimson);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}

.article h1 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1.3;
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}

.article__lead {
  color: var(--ink-soft);
  line-height: 2;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.article h2 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 4px solid var(--crimson);
  color: var(--ink);
}

.article p,
.article li {
  font-size: var(--text-base);
  line-height: 2;
  color: var(--ink-soft);
}

.article ul,
.article ol { padding-left: 1.4em; margin: var(--sp-3) 0; }
.article li { margin-bottom: var(--sp-2); }
.article strong { color: var(--ink); }
.article a { color: var(--navy); }

.article__note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--muted);
  margin-top: var(--sp-5);
}

.article__updated {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--sp-6);
  text-align: right;
}

/* ── フォーム（掲載停止依頼） ─────────────────────────── */
.form-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }

.form-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}

.form-field .req {
  color: var(--crimson);
  font-size: var(--text-xs);
  margin-left: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--text-base);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.form-field textarea { min-height: 140px; resize: vertical; }

.form-field small { display: block; color: var(--muted); margin-top: var(--sp-1); font-size: var(--text-xs); }

.form-actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }

.form-submit {
  font: inherit;
  font-weight: 700;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--crimson);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.form-submit:hover { background: var(--crimson-deep); transform: translateY(-1px); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.form-result { font-size: var(--text-sm); line-height: 1.8; }
.form-result.is-ok { color: var(--green); }
.form-result.is-err { color: var(--crimson); }

/* ── 共通フッター（guide.cssと同スタイル。静的ページ単体で成立させる） ── */
.site-footer {
  background: var(--ink);
  color: #d8cdba;
  padding: var(--sp-6) 0 var(--sp-7);
  margin-top: var(--sp-7);
}
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.site-footer__note { font-size: var(--text-xs); line-height: 1.8; max-width: 760px; color: #b3a994; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--text-sm); }
.site-footer__links a { color: #d8cdba; text-decoration: none; border-bottom: 1px solid rgba(216, 205, 186, 0.35); padding-bottom: 1px; }
.site-footer__links a:hover { color: #fff; border-color: #fff; }
.site-footer__copy { font-size: var(--text-xs); color: #8a8071; margin-top: var(--sp-4); }

@media (max-width: 640px) {
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}