@charset "utf-8";
/* ============================================================
   ダークモード
   <html class="dark-mode"> のときに暗色配色へ切り替える。
   既存のハードコード色を上書きする方式のため、各ページのCSSより後に読み込むこと。
   配色はサイトのグリーン基調を踏襲する。
   ------------------------------------------------------------
   代表色:
     背景  body #161616 / パネル #242424 / 副パネル #2b2b2b / 濃い部分 #1f1f1f
     緑の淡色面(旧 #f4f9f4 等)   -> #1f2a1f
     緑の見出し面(旧 #cae4ca)    -> #2d3f2d
     バー(旧 #e8e8e8)            -> #3a3a3a
     文字  #d6d6d6 / 見出し #f0f0f0 / 補助 #a5a5a5 / 無効 #7a7a7a
     緑アクセント文字            -> #8fce8f
     緑ボーダー                  -> #3f6b3f / 中間 #5c8f5c
   ============================================================ */

html.dark-mode { color-scheme: dark; }

html.dark-mode body { background: #161616; color: #d6d6d6; }
html.dark-mode * { caret-color: #d6d6d6; }

html.dark-mode body,
html.dark-mode #wrapper,
html.dark-mode nav#main-menu,
html.dark-mode .content button,
html.dark-mode .particle-card {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

html.dark-mode #wrapper {
  background: #242424;
  border-color: #3a3a3a;
}

/* ロゴ（暗い黒文字を明るく見せる。SVG内の色は反転＋色相回転でおおよそ維持） */
html.dark-mode #header .title img { filter: invert(1) hue-rotate(180deg); }

/* リンク */
html.dark-mode a { color: #8fce8f; }
html.dark-mode a.link { color: #d6d6d6; border-bottom-color: #5c9f5c; }

/* フッター */
html.dark-mode #footer,
html.dark-mode #alternative-footer,
html.dark-mode #alternative-footer .credit { color: #9a9a9a; }

/* ============================================================
   ナビゲーション
   ============================================================ */
html.dark-mode nav#main-menu a { color: #d6d6d6; }
html.dark-mode nav#main-menu ul li a { color: #d6d6d6; }

@media only screen and (min-width: 960px) {
  html.dark-mode nav#main-menu { background-color: #1c1c1c; }
  html.dark-mode nav#main-menu ul li {
    color: #d6d6d6;
    background-color: #2b2b2b;
    border-color: #3a3a3a;
  }
  html.dark-mode nav#main-menu li.active,
  html.dark-mode nav#main-menu li.active a {
    color: #ffffff;
    background-color: #2d7a2d;
    border-color: #2d7a2d;
  }
  html.dark-mode nav#main-menu ul li.disabled,
  html.dark-mode div#menu-items li.disabled {
    color: #6a6a6a;
    background-color: #242424;
    border-color: #333333;
  }
}

@media only screen and (max-width: 959px) {
  html.dark-mode nav#main-menu { background-color: #242424; border-color: #3a3a3a; }
  html.dark-mode nav#main-menu .menu,
  html.dark-mode nav#main-menu #menu span {
    color: #cfe0cf;
    background-color: #22301f;
  }
  html.dark-mode nav#main-menu ul li {
    color: #d6d6d6;
    border-bottom-color: #3f4a3f;
  }
  html.dark-mode nav#main-menu ul li.active a {
    background-color: #2d7a2d;
    color: #ffffff;
  }
}

/* ============================================================
   コンテンツ共通（見出し・段落・ボタン・入力欄）
   ============================================================ */
html.dark-mode .content { color: #d6d6d6; }
html.dark-mode .content h1,
html.dark-mode .content h1.search-page-title { color: #f0f0f0; }
html.dark-mode .content h1 i.left,
html.dark-mode .content h1.search-page-title i.left { color: #8fce8f; }
html.dark-mode .content h2,
html.dark-mode .section-title,
html.dark-mode .section-title-large,
html.dark-mode .subsection-title,
html.dark-mode .usage-ratio-section h2,
html.dark-mode .examples-section h2,
html.dark-mode .pattern-group-title { color: #8fce8f; }

/* 汎用ボタン（各ページで transparent+緑 に上書きされる系） */
html.dark-mode .content button {
  color: #8fce8f;
  background-color: transparent;
  border-color: #5c9f5c;
}
html.dark-mode .content button:disabled,
html.dark-mode .content button.disabled {
  color: #666666;
  border-color: #3a3a3a;
  background-color: transparent;
}
/* 実線塗りのボタン（active/検索など）は緑塗りを維持 */
html.dark-mode .content button.active,
html.dark-mode .content button.search-button.active {
  color: #ffffff;
  background-color: #2d7a2d;
  border-color: #2d7a2d;
}

/* 入力・セレクト */
html.dark-mode .content input,
html.dark-mode .form-select,
html.dark-mode .sort-select,
html.dark-mode .tr-vf-search,
html.dark-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="search"] {
  color: #d6d6d6;
  background: #2b2b2b;
  border-color: #5c6b5c;
}
html.dark-mode .form-select:disabled {
  background: #1f1f1f;
  color: #6a6a6a;
}

/* 説明ボックス（instruction 各種） */
html.dark-mode .search-instruction,
html.dark-mode .pattern-instruction,
html.dark-mode .thematic-role-instruction {
  color: #c2c2c2;
  background-color: #1f1f1f;
  border-color: #3a3a3a;
  border-left-color: #4e964e;
}

/* ============================================================
   トップ（格助詞一覧）
   ============================================================ */
html.dark-mode .particle-card {
  background: #242424;
  border-color: #3f6b3f;
}
html.dark-mode .particle-card:hover { background-color: #1f2a1f; }
html.dark-mode .particle-card:focus { outline-color: #8fce8f; }
html.dark-mode .particle-card.disabled { background: #1f1f1f; border-color: #3a3a3a; }
html.dark-mode .particle-card.disabled:hover { background: #1f1f1f; }
html.dark-mode .particle-name { color: #8fce8f; }
html.dark-mode .particle-card.disabled .particle-name { color: #7a7a7a; }
/* .particle-type は緑塗り(白文字) を維持 */

/* ============================================================
   格助詞ページ（particle.css / particle_twocolumn.css）
   ============================================================ */
html.dark-mode .loading-text,
html.dark-mode .loading-spinner { color: #a5a5a5; }
html.dark-mode .usage-ratio-section,
html.dark-mode .examples-section { background-color: transparent; }
html.dark-mode .left-column,
html.dark-mode .right-column { border-color: #3f6b3f; }
html.dark-mode .usage-ratio-section .note,
html.dark-mode .examples-section .note { color: #a5a5a5; }

/* 使用割合グラフ */
html.dark-mode .chart-row .label,
html.dark-mode .verb-group-label,
html.dark-mode .chart-label { color: #d6d6d6; }
html.dark-mode .chart-row .bar-container,
html.dark-mode .bar-container,
html.dark-mode .chart-bar-container { background-color: #3a3a3a; }
/* .bar / .verb-group-bar / .pattern-bar は緑塗りを維持 */
html.dark-mode .chart-row .percentage,
html.dark-mode .verb-group-count,
html.dark-mode .chart-count,
html.dark-mode .chart-percentage { color: #8fce8f; }
html.dark-mode .count-breakdown { color: #a5a5a5; }
@media only screen and (min-width: 960px) {
  html.dark-mode .chart-row:hover { background-color: #1f2a1f; }
  html.dark-mode .chart-row.active { background-color: #22301f; border-left-color: #5c9f5c; }
}

/* 意味役割グループ／用例 */
/* モード切替（典型／周辺） */
html.dark-mode .mode-selector { background: #2b2b2b; }
html.dark-mode .mode-btn { color: #a5a5a5; background: transparent; border-color: #4a4a4a; }
html.dark-mode .mode-btn:hover { background: rgba(92, 159, 92, 0.18); color: #8fce8f; }
html.dark-mode .mode-btn.active { background: #2d7a2d; color: #ffffff; border-color: #2d7a2d; }
/* 積み上げ棒（周辺側の淡色） */
html.dark-mode .bar-segment.adjunct { background: #3f6b3f; }
/* .type-badge.adjunct はグレー塗り(白文字)を維持 */
html.dark-mode .wlsp-category { color: #8fce8f; }
html.dark-mode .load-more-btn { background: #2b2b2b; color: #8fce8f; border-color: #5c9f5c; }
html.dark-mode .load-more-btn:hover { background: #2d7a2d; color: #ffffff; }

html.dark-mode .role-group,
html.dark-mode .example-group,
html.dark-mode #examples-container .example-group {
  background-color: #1f1f1f;
  border-color: #3f6b3f;
  border-left-color: #4e964e;
}
html.dark-mode .role-title,
html.dark-mode .example-title,
html.dark-mode .role-group-header { border-bottom-color: #3a3a3a; }
html.dark-mode .role-name,
html.dark-mode #examples-title,
html.dark-mode .role-group-title { color: #8fce8f; }
/* .frequency-badge は緑塗り(白文字) を維持 */
html.dark-mode .example-list li,
html.dark-mode .simple-example-item { color: #d6d6d6; }
html.dark-mode .example-list li strong,
html.dark-mode .simple-example-item strong { color: #8fce8f; }
html.dark-mode .definition-header {
  color: #cecece;
  background: #1f2a1f;
  border-left-color: #4e964e;
}
html.dark-mode .definition-wlsp {
  color: #8fbf8f;
}
html.dark-mode .definition-wlsp.none {
  color: #777;
}

/* 960px以上の見出し帯（旧 #cae4ca） */
@media only screen and (min-width: 960px) {
  html.dark-mode .usage-ratio-section h2,
  html.dark-mode .role-group-header,
  html.dark-mode .role-title,
  html.dark-mode .verb-section-header,
  html.dark-mode .examples-section-header,
  html.dark-mode .usage-section-header {
    background-color: #2d3f2d;
    color: #cfe6cf;
  }
  html.dark-mode .usage-ratio-section .usage-section-header h2 { color: #cfe6cf; background: none; }
  html.dark-mode .verb-section h2,
  html.dark-mode .examples-section-header h2,
  html.dark-mode .role-group-title { color: #cfe6cf; }
}

/* ============================================================
   用例検索ページ（search.css）
   ============================================================ */
html.dark-mode .search-section,
html.dark-mode .verb-groups-container,
html.dark-mode .verb-display-container,
html.dark-mode .example-card {
  background: #242424;
  border-color: #3a3a3a;
}
html.dark-mode .example-card { background-color: #1f1f1f; }
html.dark-mode .example-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
html.dark-mode .form-label { color: #d6d6d6; }
html.dark-mode .search-info {
  background: #1f2a1f;
  border-color: #3f6b3f;
}
html.dark-mode .search-info-item .label { color: #a5a5a5; }
html.dark-mode .search-info-item .value { color: #8fce8f; }
html.dark-mode .tab-button { color: #a5a5a5; }
html.dark-mode .tab-button.active { color: #8fce8f; }
html.dark-mode .tab-content { border-color: #3f6b3f; }
html.dark-mode .toggle-slider { background-color: #555555; }
html.dark-mode .toggle-label,
html.dark-mode .chart-description,
html.dark-mode .chart-footer p,
html.dark-mode .examples-count,
html.dark-mode .examples-sort,
html.dark-mode .verb-kanji,
html.dark-mode .example-meta,
html.dark-mode .role-count,
html.dark-mode .pattern-card-body { color: #a5a5a5; }
html.dark-mode .verb-reading { color: #8fce8f; }
html.dark-mode .example-text { color: #d6d6d6; }
html.dark-mode .annotation-tag {
  color: #8fce8f;
  background-color: #1f2a1f;
  border-color: #3f6b3f;
}
html.dark-mode .verb-cloud-chart {
  background-color: #1f1f1f;
  border-color: #3f6b3f;
}
html.dark-mode .verb-list { color: #c2c2c2; border-left-color: #4e964e; }
html.dark-mode .verb-list .verb-item:hover { color: #8fce8f; }
html.dark-mode .examples-header { border-bottom-color: #3a3a3a; }
html.dark-mode .btn-load-more {
  color: #8fce8f;
  background-color: #2b2b2b;
  border-color: #5c9f5c;
}
html.dark-mode .btn-load-more:hover { background-color: #1f2a1f; }
/* .btn-search / .btn-reset は緑塗りを維持 */
html.dark-mode .btn-reset { background-color: #2b2b2b; color: #8fce8f; }
html.dark-mode .verb-toggle-buttons { border-bottom-color: #3f6b3f; }
html.dark-mode .verb-section .verb-toggle-buttons .toggle-btn { color: #8fce8f; background-color: #1f2a1f; border-color: #3f6b3f; }
html.dark-mode .verb-section .verb-toggle-buttons .toggle-btn:hover { color: #8fce8f !important; background-color: #22301f !important; border-color: #3f6b3f !important; }
html.dark-mode .verb-section .verb-toggle-buttons .toggle-btn.active,
html.dark-mode .verb-section .verb-toggle-buttons .toggle-btn.active:hover { color: #bfe6bf !important; background-color: #242424 !important; border-color: #3f6b3f !important; border-top-color: #5c9f5c !important; border-bottom-color: #242424 !important; }
html.dark-mode .collapsible-verb-layout .verb-collapse-btn { color: #8fce8f; }
html.dark-mode .collapsible-verb-layout .verb-expand-rail { color: #cfe6cf; background-color: #2d3f2d; }
html.dark-mode .collapsible-verb-layout .verb-expand-rail:hover { color: #cfe6cf !important; background-color: #3a523a !important; }
html.dark-mode .collapsible-left-layout .panel-collapse-btn { color: #8fce8f; }
html.dark-mode .collapsible-left-layout .panel-expand-rail { color: #cfe6cf; background-color: #2d3f2d; }
html.dark-mode .collapsible-left-layout .panel-expand-rail:hover { color: #cfe6cf !important; background-color: #3a523a !important; }

/* ============================================================
   格パターン検索（argument-structure.css）
   ============================================================ */
html.dark-mode .pattern-selection-section { background: #242424; }
html.dark-mode .section-title { border-bottom-color: #2d3f2d; }
html.dark-mode .category-btn {
  color: #c2c2c2;
  background-color: #2b2b2b;
  border-color: #4a4a4a;
}
html.dark-mode .category-btn:hover { background-color: #1f2a1f; border-color: #5c9f5c; }
html.dark-mode .category-btn.active {
  background-color: #2d7a2d;
  color: #ffffff;
  border-color: #2d7a2d;
}
html.dark-mode .count-badge { background-color: #3a3a3a; color: #d6d6d6; }
html.dark-mode .category-btn.active .count-badge { background-color: rgba(255,255,255,0.25); color: #ffffff; }
html.dark-mode .loading,
html.dark-mode .loading i { color: #a5a5a5; }
html.dark-mode .loading i { color: #8fce8f; }
html.dark-mode .pattern-group-title { background-color: #1f2a1f; border-left-color: #4e964e; }
html.dark-mode .sort-btn { color: #a5a5a5; background: #2b2b2b; border-color: #4a4a4a; }
html.dark-mode .sort-btn:hover { border-color: #5c9f5c; color: #8fce8f; }
html.dark-mode .sort-btn.active { background: #2d7a2d; border-color: #2d7a2d; color: #ffffff; }
html.dark-mode .pattern-cards { border-color: #3a3a3a; }
html.dark-mode .pattern-card { background: #242424; border-bottom-color: #333333; }
html.dark-mode .pattern-card:hover { background-color: #1f2a1f; }
html.dark-mode .pattern-label { color: #d6d6d6; }
html.dark-mode .pattern-count,
html.dark-mode .pattern-count .percentage,
html.dark-mode .pattern-count .sense-count { color: #8fce8f; }
html.dark-mode .ga-kaku-breakdown {
  background-color: #1c221c;
  border-left-color: #3f6b3f;
}
html.dark-mode .breakdown-title { color: #b5b5b5; }
html.dark-mode .breakdown-label { color: #d6d6d6; }
html.dark-mode .breakdown-item:hover { background-color: #22301f; }
html.dark-mode .ga-kaku-breakdown .pattern-count,
html.dark-mode .ga-kaku-breakdown .pattern-count .percentage,
html.dark-mode .ga-kaku-breakdown .pattern-count .sense-count { color: #a5a5a5; }
/* .as-sort-btn は緑帯上の白枠ボタンを維持 */
html.dark-mode .content .as-sort-btn {
  color: #ffffff;
  background-color: transparent;
  border-color: rgba(255,255,255,0.75);
}
html.dark-mode .as-row-clickable:hover td { background-color: #22301f; }
html.dark-mode .as-table .bar-container { background-color: #3a3a3a; }
html.dark-mode .as-percentage { color: #8fce8f; }
html.dark-mode .as-count-cell { color: #d6d6d6; }
html.dark-mode .as-sub-row td { background-color: #242424; }
html.dark-mode .as-sub-prefix { color: #8fae8f; }
html.dark-mode .as-sub-row .as-percentage,
html.dark-mode .as-sub-row .as-count-cell { color: #a5a5a5; }
html.dark-mode .as-empty-cell { color: #8a8a8a; }
html.dark-mode .as-row-highlight td { background-color: #4a4a1f !important; }
html.dark-mode .tr-row-highlight td:not(.tr-group-cell) { background-color: #4a4a1f !important; }

/* 格パターン結果の区切り（＋） */
html.dark-mode .case-separator { color: #8fce8f; }

/* ============================================================
   意味役割から検索：一覧表（thematic-role.css）
   ============================================================ */
html.dark-mode .tr-nav-btn {
  color: #8fce8f;
  background-color: #2b2b2b;
  border-color: #3f6b3f;
}
html.dark-mode .tr-nav-btn:hover { background-color: #2d7a2d; border-color: #2d7a2d; color: #ffffff; }
/* .tr-category-title は緑帯(#5c9f5c/白) を維持 */
html.dark-mode .content h2.tr-category-title,
html.dark-mode .content h2.tr-category-title i.left,
html.dark-mode .tr-back-to-nav { color: #ffffff; }
html.dark-mode .tr-back-to-nav:hover { color: #2d7a2d; }
html.dark-mode .tr-table { background: #242424; }
html.dark-mode .tr-table th,
html.dark-mode .tr-table td { border-color: #3a4a3a; }
html.dark-mode .tr-table thead th { background-color: #2d3f2d; color: #cfe6cf; }
html.dark-mode .tr-group-cell { background-color: #1f2a1f; color: #a9d0a9; }
html.dark-mode .tr-role-cell { background-color: #212a21; }
html.dark-mode .tr-role-tag { color: #8fce8f; }
html.dark-mode .tr-role-clickable { border-bottom-color: #5c9f5c; }
html.dark-mode .tr-role-clickable:hover,
html.dark-mode .tr-role-clickable:focus { color: #bfe6bf; background-color: #22301f; }
/* .tr-particle-badge は緑塗り(白文字) を維持 */
html.dark-mode .tr-example-cell { color: #d6d6d6; }
html.dark-mode .tr-count-cell { color: #d6d6d6; }
html.dark-mode .tr-example-particle {
  background-color: #1f2a1f;
  color: #a9d0a9;
  border-color: #3f6b3f;
}
html.dark-mode .tr-example-highlight { color: #9ad69a; }

/* ============================================================
   意味役割から検索：結果ページ（result/index.html のインライン tr-*）
   ============================================================ */
html.dark-mode .btn-back { background: #2b2b2b; color: #8fce8f; border-color: #5c9f5c; }
html.dark-mode .btn-back:hover { background: #2d7a2d; border-color: #2d7a2d; color: #ffffff; }
html.dark-mode .content .tr-tab {
  background: #1f2a1f;
  color: #8fce8f;
  border-color: #3f6b3f;
  border-top-color: #3f6b3f;
}
html.dark-mode .content .tr-tab:hover { background: #22301f; }
html.dark-mode .content .tr-tab.active {
  background: #242424;
  border-top-color: #5c9f5c;
  color: #bfe6bf;
}
html.dark-mode .content .tr-tab.is-none { color: #d0a25a; }
html.dark-mode .content .tr-tab.is-none.active { border-top-color: #b58a3c; color: #e0b978; }

html.dark-mode .content .tr-more-btn {
  background: #2b2b2b;
  border-color: #5c9f5c;
  color: #8fce8f;
}
html.dark-mode .content .tr-more-btn:hover { background: #2d7a2d; border-color: #2d7a2d; color: #ffffff; }

html.dark-mode .tr-panel { background: #242424; border-color: #3f6b3f; }
html.dark-mode .content .tr-verb-filter-btn { background: #2b2b2b; color: #8fce8f; border-color: #5c9f5c; }
html.dark-mode .content .tr-verb-filter-btn:hover { background: #2d7a2d; border-color: #2d7a2d; color: #ffffff; }
html.dark-mode .tr-verb-dropdown {
  background: #242424;
  border-color: #3f6b3f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
html.dark-mode .content .tr-vf-controls button {
  border-color: #3f6b3f;
  background: #1f2a1f;
  color: #8fce8f;
}
html.dark-mode .content .tr-vf-controls button:hover { background: #22301f; }
html.dark-mode .tr-vf-row:hover { background: #1f2a1f; }
html.dark-mode .tr-vf-count { color: #8a8a8a; }
/* .tr-verb-head は緑帯(#5c9f5c/白) を維持 */
html.dark-mode .tr-verb-def {
  color: #cecece;
  background: #1f2a1f;
  border-left-color: #4e964e;
}
html.dark-mode .tr-example-item .fa-caret-right { color: #6cbf6c; }
html.dark-mode .tr-empty { color: #a5a5a5; background: #1f1f1f; border-color: #3a3a3a; }
html.dark-mode .tr-none-note { color: #d0a25a; }
html.dark-mode .tr-load-error {
  color: #ff8a8a;
  background: #3a1f1f;
  border-color: #6b3a3a;
}

/* ============================================================
   格成分ハイライト（particle-label / target-particle / verb-highlight）
   particles/*.html・search・argument_structure・意味役割結果で共通
   ============================================================ */
html.dark-mode .particle-label::before { border-bottom-color: #5cc45c; }
html.dark-mode .particle-label::after {
  color: #8fce8f;
  background: #242424;
  border-color: #5c9f5c;
}
html.dark-mode .particle-label.target-particle::after {
  background: #2d7a2d;
  color: #ffffff;
  border-color: #2d7a2d;
}
html.dark-mode .particle-label-optional::before { border-bottom-color: #888888; }
html.dark-mode .particle-label-optional::after {
  color: #b0b0b0;
  background: #242424;
  border-color: #7a7a7a;
}
html.dark-mode .particle-label-optional.target-particle::after {
  background: #2d7a2d;
  color: #ffffff;
  border-color: #2d7a2d;
}
html.dark-mode .verb-highlight,
html.dark-mode .example-list li .verb-highlight,
html.dark-mode .simple-example-item .verb-highlight { border-bottom-color: #6cbf6c; }