@charset "UTF-8";
/* ==========================================================================
   Base Styles - SWELL overrides + Typography
   ========================================================================== */

/* ------------------------------------------------------------------
   1. SWELL CSS variable overrides
   ------------------------------------------------------------------ */
:root {
  --color_main:      var(--color-accent);
  --color_main_thin: var(--color-accent-light);
  --color_text:      var(--color-text);
  --color_bg:        var(--color-bg);
}

/* ------------------------------------------------------------------
   2. Typography base
   ------------------------------------------------------------------ */
body {
  font-family: var(--font-base);
  font-size: var(--fz-base-pc);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 599px) {
  body {
    font-size: var(--fz-base-sp);
  }
}

/* paragraph spacing */
.post_content p {
  margin-bottom: var(--space-paragraph);
}
@media (max-width: 599px) {
  .post_content p {
    margin-bottom: var(--space-paragraph-sp);
  }
}

/* ------------------------------------------------------------------
   3. Link colors (accessibility: gold fails WCAG on white)
   ------------------------------------------------------------------ */
.post_content a:not([class]) {
  color: var(--color_link);
  text-decoration: underline;
  text-decoration-color: var(--color_link);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s;
}
.post_content a:not([class]):hover {
  text-decoration-color: var(--color_link);
}

/* ------------------------------------------------------------------
   4. Header zone (black x gold)
   ------------------------------------------------------------------ */
.l-header {
  background-color: var(--color-white);
}
.l-header,
.l-header a {
  color: #FFFFFF;
}
/* header logo area accent */
.l-header .c-headLogo a {
  color: #FFFFFF;
}

/* ------------------------------------------------------------------
   5. Footer zone (black x gold)
   ------------------------------------------------------------------ */
.l-footer {
  background-color: var(--color-black);
  color: #FFFFFF;
}
.l-footer a {
  color: rgba(255, 255, 255, 0.8);
}
.l-footer a:hover {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------
   6. Heading accent (gold line on dark band)
      Note: heading *shape* is set via Customizer.
            Here we only override colors.
   ------------------------------------------------------------------ */
.post_content h2 {
  border-color: var(--color_link);
}
.post_content h3 {
  border-color: var(--color_link);
}

/* ------------------------------------------------------------------
   7. Auxiliary text color
   ------------------------------------------------------------------ */
.p-articleMeta,
.p-articleMeta a,
.c-postThumb__cat,
time {
  color: var(--color-text-sub);
}

/* ------------------------------------------------------------------
   8. Border / divider
   ------------------------------------------------------------------ */
hr,
.post_content hr {
  border-color: var(--color-border);
}

/* ------------------------------------------------------------------
   9. Hide elements (CSS fallback for B1-B3)
      PHP filters may not match SWELL's internal hook names,
      so these CSS rules guarantee removal.
   ------------------------------------------------------------------ */
.p-authorBox,
.p-shareLinks,
.p-followBox {
  display: flex;
}