/**
 * Legacy統合用リセットCSS
 * Bootstrap と Tailwind の共存
 *
 * 戦略:
 * - Tailwindは important: true 設定により、Bootstrapより優先される
 * - ここではBootstrapの .container クラスのみをヘッダー・フッターでオーバーライド
 */

/* ヘッダー・フッターのコンテナ設定（src/index.cssと同じ） */

body {
  font-family: 'Noto Sans JP', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

header .container,
footer .container {
  width: 100% !important;
  padding-inline: 1rem !important;
  margin-inline: auto !important;
  transition: all 0.3s ease-in-out !important;
  /* Bootstrapのpaddingを完全にリセット */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

section a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

/* ブレークポイント別のpadding-inline */
@media (min-width: 640px) {
  header .container,
  footer .container {
    padding-inline: 20px !important;
    max-width: 640px !important;
  }
}

@media (min-width: 768px) {
  header .container,
  footer .container {
    max-width: 768px !important;
  }
}

@media (min-width: 1024px) {
  header .container,
  footer .container {
    padding-inline: 60px !important;
    max-width: 1024px !important;
  }
}

@media (min-width: 1280px) {
  header .container,
  footer .container {
    padding-inline: 80px !important;
    max-width: 1280px !important;
  }
}

@media (min-width: 1536px) {
  header .container,
  footer .container {
    max-width: 1536px !important;
  }
}

footer hr {
  opacity: 1;
  border: 1px solid hsl(214, 32%, 88%);
  border-top: inherit;
}

/* ==========================================
   メインコンテンツエリア（Bootstrapが有効）
   ========================================== */

/* メインコンテンツ内ではBootstrapクラスが正常に動作 */
.old-site-content .container {
  /* Bootstrapのcontainerを復元 */
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}