/* ==============================================
   Base Styles
   ============================================== */

body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--content {
  max-width: var(--container-content);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Section Title */
.section-title {
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: var(--space-xl);
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-main);
  margin: var(--space-sm) auto 0;
}

.section-lead {
  text-align: center;
  color: var(--color-text-sub);
  margin-top: calc(-1 * var(--space-lg));
  margin-bottom: var(--space-xl);
}

/* Section spacing */
section {
  padding: var(--space-section) 0;
}

@media (max-width: 768px) {
  section {
    padding: var(--space-xxl) 0;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }

  .container {
    padding: 0 var(--space-sm);
  }
}

/* Utility */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}

/* Images */
img {
  height: auto;
}