@charset "UTF-8";

:root {
  /* メインカラー */
  --main-dark-area-bg-color: #000;
  --main-dark-area-text-color: #fff;

  /* 白地エリア */
  --main-white-area-bg-color: #fff;
  --main-white-area-text-color: #111;
  --theme-min-contents-bg-color: transparent;

  /* 枠線 */
  --main-contents-border-color: transparent;
  --main-card-border-color: #d6d6d6;

  /* 影 */
  --main-border-shadow-color: rgba(128, 128, 128, 0.28);

  /* アクセントカラー */
  --main-accent-color: #333;
  --global-menu-accent-color: var(--main-dark-area-text-color);

  /* 丸み */
  --theme-border-radius-section: 0;
  --theme-border-radius-button: 0;
  --theme-border-radius-small-parts: 0;
  --theme-border-radius-avatar: 9999px;
}


/* ========================================
ヘッダー
======================================== */

.site-header,
.top-navigation-bar {
  color: var(--main-dark-area-text-color);
  background-color: var(--main-dark-area-bg-color);
}

.top-navigation-bar a {
  color: inherit;
}


/* 中央配置・コンタクトタイプ
header全体にはメイン背景色を付けない */
.site-header:has(.title-type-center),
.site-header:has(.title-type-contact) {
  color: var(--main-white-area-text-color);
  background-color: transparent;
}


/* 中央配置・コンタクトタイプはメニュー行だけメインカラー */
.site-header .title-type-center > .title-navigation-right-box,
.site-header .title-type-contact > .title-navigation-right-box {
  width: 100%;
  color: var(--main-dark-area-text-color);
  background-color: var(--main-dark-area-bg-color);
}


/* ========================================
グローバルメニュー
======================================== */

@media (min-width: 769px) {
  ul.global-menu ul {
    color: var(--main-dark-area-text-color);
    background-color: var(--main-dark-area-bg-color);
  }

}

@media (max-width: 768px) {
  .drawer-content {
    color: var(--main-dark-area-text-color);
    background-color: var(--main-dark-area-bg-color);
  }
}

.drawer-open {
  color: var(--main-dark-area-text-color);
  border-color: var(--main-dark-area-text-color);
}

.search-button {
  color: var(--main-dark-area-text-color);
}

/* ========================================
本文・固定ページ・サイドバー H2
コアブロック「背景色&上下線[色]」準拠
======================================== */

:where(
  .single-content-section,
  .page-content-section,
  .sidebar,
  .editor-styles-wrapper
) h2:not([class*="is-style-"]) {
  position: relative;
  padding: 0.5em !important;
  color: var(--main-dark-area-text-color);
  background-color: var(--main-dark-area-bg-color);
}

:where(
  .single-content-section,
  .page-content-section,
  .sidebar,
  .editor-styles-wrapper
) h2:not([class*="is-style-"])::before,
:where(
  .single-content-section,
  .page-content-section,
  .sidebar,
  .editor-styles-wrapper
) h2:not([class*="is-style-"])::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--main-dark-area-bg-color);
}

:where(
  .single-content-section,
  .page-content-section,
  .sidebar,
  .editor-styles-wrapper
) h2:not([class*="is-style-"])::before {
  top: -5px;
}

:where(
  .single-content-section,
  .page-content-section,
  .sidebar,
  .editor-styles-wrapper
) h2:not([class*="is-style-"])::after {
  bottom: -5px;
}

/* ========================================
フッター
======================================== */

.site-footer {
  color: var(--main-dark-area-text-color);
  background-color: var(--main-dark-area-bg-color);
}

.site-footer a,
.footer-menu-standard a {
  color: inherit;
}

.footer-fixed-menu-section .menu-item > a {
  color: var(--main-dark-area-text-color);
  background-color: var(--main-dark-area-bg-color);
}

/* ========================================
白地エリア「デフォルト」

範囲：
各記事本文とサイドバーグループ
======================================== */

/* グループ自体は透明 */
.main-section,
.sidebar-container {
  background-color: transparent;
  padding-block: 0;
}


/* 記事本文・関連記事・コメント・サイドバーウィジェット */
.main-section > .main-class,
.main-section > .related-article,
.main-section > .comment-lists-section,
.sidebar-container > .widget {
  color: var(--main-white-area-text-color);
  background-color: var(--theme-min-contents-bg-color);
  border: solid 1px var(--main-contents-border-color);
}


/* サイドバーウィジェット内の余白 */
.sidebar-container > .widget {
  --sidebar-widget-inner-space: var(--space-sm);

  padding: var(--sidebar-widget-inner-space);
}


/* サイドバー先頭見出しをウィジェット端まで広げる */
.sidebar-container > .widget > :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
):first-child {
  margin-block-start:
    calc(var(--sidebar-widget-inner-space) * -1);

  margin-inline:
    calc(var(--sidebar-widget-inner-space) * -1);
}


/* ページ送りだけコンテンツ枠線色へ連動 */
.main-section > .page-feed .page-feed-box {
  --main-card-border-color:
    var(--main-contents-border-color);

  border: solid 1px var(--main-card-border-color);
  color: inherit;
  background-color: var(--theme-min-contents-bg-color);
}

/* ========================================
本文・固定ページ・サイドバー H3
メインカラー左線＋カード枠線
======================================== */

:where(
  .single-content-section,
  .page-content-section,
  .sidebar
) h3:not([class*="is-style-"]) {
  padding: 0.4em 0.65em;
  border-inline-start: 5px solid var(--main-dark-area-bg-color);
  border-block-end: 1px solid var(--main-card-border-color);
}


/* ========================================
本文・固定ページ・サイドバー H4
メインカラーの短い下線
======================================== */

:where(
  .single-content-section,
  .page-content-section,
  .sidebar
) h4:not([class*="is-style-"]) {
  position: relative;
  padding-block-end: 0.4em;
}

:where(
  .single-content-section,
  .page-content-section,
  .sidebar
) h4:not([class*="is-style-"])::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3em;
  height: 2px;
  content: "";
  background-color: var(--main-dark-area-bg-color);
}
/* ========================================
フッター
アクセントカラー上下線
======================================== */

/*
フッター下線は常にフッター本体へ付ける
*/
.site-footer {
  border-block-end:
    3px solid var(--main-accent-color);
}


/*
フッターメニューがない場合だけ、
フッター本体上部へ線を付ける
*/
body:not(
  :has(.footer-menu-standard + .site-footer)
) .site-footer {
  border-block-start:
    3px solid var(--main-accent-color);
}