/* 全ページ共通ヘッダー: 黒背景 + 白ロゴ。スマホ(768px以下)はバーガーメニュー。 */
header.header { background: #222222; color: #fff; }
.menu { background: #222222; box-shadow: 0 -1px 0 #222222; }
header.header .header-logo { background: transparent; color: #fff; padding-left: 0; padding-right: 0; }
header.header .header-logo a.header-logo-link { color: inherit; background: transparent; text-decoration: none; }
header.header .header-logo a.header-logo-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.nav-toggle { display: none; }

@media screen and (max-width: 768px) {
  header.header .header-logo { font-size: clamp(2.25rem, 10.5vw, 5.5rem); }

  .js .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 48px;
    height: 48px;
    margin: -24px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  .js header.header .inner { padding-right: 64px; }

  .js .menu { display: none; }
  .js .menu.is-open { display: block; border-top: 1px solid #444444; }
  .js .menu .inner { display: block; padding: 0; overflow: visible; }
  .js .menu a { padding: 18px 20px; border-bottom: 1px solid #444444; }
}

/* 黒のカラー表現は #222222 に統一(文字色・ボタン・マーカー) */
body { color: #222222; }
.marker, ._black, pre { background: #222222; }
._black .marker { color: #222222; }
.btn { background: #222222; }
.btn:hover { background: #444444; }

/* セクション: 縞の灰色を濃くし、余白を詰める(見出し上の余白は下より狭くする) */
.section { padding: 48px 0 72px; }
.section:nth-child(2n) { background: #E9ECEF; }
@media screen and (max-width: 768px) {
  .section { padding: 32px 0 48px; }
}

/* 全ページ共通フッター(サイト内ナビゲーション)。ヘッダーと同じ #222222 の黒で締める */
.site-footer { margin: 0; padding: 40px 20px 28px; background: #222222; color: #e9ecef; font-size: 14px; line-height: 1.8; }
.site-footer-inner { max-width: 1240px; margin: 0 auto; display: grid; gap: 32px 24px; grid-template-columns: 2fr 1fr 1fr 1fr; }
.site-footer p { margin: 0; }
.site-footer address { font-style: normal; margin: 0.8em 0; }
.site-footer-name { font-weight: 700; font-size: 16px; margin-bottom: 0.5em; }
.site-footer-heading { font-weight: 700; margin-bottom: 0.5em; }
.site-footer-nav ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.site-footer-nav li { margin: 0.25em 0; }
.site-footer a { color: #fff; }
.site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-footer-tagline, .site-footer-copy { max-width: 1240px; margin: 28px auto 0; text-align: center; }
.site-footer-tagline { padding-top: 24px; border-top: 1px solid #444444; }
.site-footer-copy { margin-top: 8px; }
@media screen and (max-width: 768px) {
  .site-footer { padding: 32px 20px 24px; }
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
  .site-footer-about { grid-column: 1 / -1; }
  .site-footer-nav:last-of-type { grid-column: 1 / -1; }
}