/* ================================
   リセット
   ================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ================================
   フォント
   ================================ */
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style:  normal;
  font-display:  swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight:  400;
}

:root {
  color-scheme: light !important;
}

/* ================================
   共通ヘッダーとセクションのスタイル
   ================================ */
.page-hero {
  padding: 3rem 1rem; /* p-12 px-4 */
  text-align: center;
}

.page-title {
  font-size: clamp(1.875rem, 4vw, 2.25rem); /* text-3xl → md:text-4xl */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2937; /* gray-800 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.page-lead {
  font-size: 1rem; /* text-base */
  color: #4b5563; /* gray-600 */
  line-height: 1.75; /* leading-relaxed */
}

.page-section {
  padding-top: 3rem; /* pt-12 */
  padding-bottom: 2.5rem; /* pb-10 */
}

.section-hero-separator {
  border-top: 1px solid #e0f2fe; /* sky-100 */
  padding-top: 2.5rem; /* pt-10 */
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem); /* text-2xl → md:text-3xl */
  font-weight: 700;
  color: #111827; /* gray-900 */
  border-left: 8px solid #2563eb; /* blue-600 */
  padding-left: 1rem; /* pl-4 */
  margin-top: 0;
  margin-bottom: 1rem; /* mb-4 */
}

.section-lead {
  margin-top: 0.5rem; /* mt-2 */
  color: #4b5563; /* gray-600 */
  font-size: 0.95rem;
  line-height: 1.7;
}

.container-4xl {
  max-width: 56rem; /* 4xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* px-4 */
  padding-right: 1rem;
}

.container-5xl {
  max-width: 64rem; /* 5xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* px-4 */
  padding-right: 1rem;
}

.container-6xl {
  max-width: 72rem; /* 6xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;  /* px-4 */
  padding-right: 1rem;
}


.stack-12 > * + * {
  margin-top: 3rem; /* 12 = 48px */
}

.section-body {
  padding-top: 3rem;   /* py-12 */
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .page-lead {
    font-size: 1.125rem; /* md:text-lg */
  }

  .section-lead {
    font-size: 1rem; /* md:text-base */
  }
}

/* ================================
   Animate.css 上書き
   ================================ */
.animate__animated {
  animation-delay: var(--animate-delay, 0s) !important;
  animation-duration: 1s !important;
  animation-fill-mode: both !important;
}

#mobile-menu.animate__animated {
  animation-duration: 0.3s !important;
  --animate-delay: 0s !important;
}