@charset "UTF-8";

/*
 * MGDB Modern Wiki v0.1
 * Test environment only
 * PukiWiki 1.5.4
 */

:root {
  --mgdb-navy: #17283d;
  --mgdb-bg: #f3f6fa;
  --mgdb-surface: #ffffff;
  --mgdb-text: #263445;
  --mgdb-muted: #63748a;
  --mgdb-link: #2563a6;
  --mgdb-border: #dce4ed;
  --mgdb-soft: #edf3f9;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  color: var(--mgdb-text);
  background: var(--mgdb-bg);
  font-family:
    "Noto Sans JP", "Yu Gothic", Meiryo,
    -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* Links */

a:link,
a:visited {
  color: var(--mgdb-link);
  background: transparent;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: #154477;
  background: transparent;
  text-decoration: underline;
}

/* Header */

#header {
  background: var(--mgdb-navy);
  padding: 14px 24px;
  margin: 0;
  text-align: center;
}

#header a {
  display: inline-block;
  max-width: 100%;
}

#header img#logo {
  display: block;
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Main navigation */

#navigator {
  background: var(--mgdb-surface);
  border-bottom: 1px solid var(--mgdb-border);
  padding: 12px 24px;
  margin: 0;
  font-size: 0.87rem;
  line-height: 2;
  text-align: center;
}

#navigator a {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
}

#navigator a:hover {
  background: var(--mgdb-soft);
  text-decoration: none;
}

/* Layout */

#contents {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 20px;
  max-width: 1440px;
  margin: 24px auto;
  padding: 0 20px;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Article */

#body {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 30px 36px;
  background: var(--mgdb-surface);
  border: 1px solid var(--mgdb-border);
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(25, 45, 70, 0.04);
  overflow-x: auto;
}

#body p,
#body ul,
#body ol,
#body dl,
#body blockquote {
  line-height: 1.75;
}

/* Sidebar */

#menubar {
  order: 1;
  flex: 0 0 240px;
  width: 240px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 18px;
  background: var(--mgdb-surface);
  border: 1px solid var(--mgdb-border);
  border-radius: 10px;
  font-size: 0.88rem;
  overflow: visible;
}

#menubar ul {
  margin: 6px 0 12px 0;
  padding-left: 18px;
}

#menubar ul li {
  line-height: 1.6;
  margin: 3px 0;
}

#menubar h4 {
  font-size: 0.95rem;
  margin: 18px 0 8px;
  padding: 5px 8px;
  color: var(--mgdb-navy);
  background: var(--mgdb-soft);
  border: 0;
  border-left: 3px solid #537ca9;
  border-radius: 3px;
}

/* Optional right sidebar */

#rightbar {
  order: 3;
  flex: 0 0 210px;
  min-width: 0;
  max-width: 210px;
  margin: 0;
  padding: 16px;
  background: var(--mgdb-surface);
  border: 1px solid var(--mgdb-border);
  border-radius: 10px;
}

/* Headings */

#body h1,
#body h2,
#body h3,
#body h4,
#body h5,
#body h6 {
  font-family: inherit;
  color: var(--mgdb-navy);
  background: transparent;
  margin: 1.5em 0 0.7em;
  padding: 0;
  border: 0;
  line-height: 1.4;
}

#body h1.title {
  font-size: 1.85rem;
  margin: 0 0 24px;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--mgdb-border);
}

#body h2 {
  font-size: 1.45rem;
  padding: 9px 12px;
  background: var(--mgdb-soft);
  border-left: 4px solid #537ca9;
  border-radius: 3px;
}

#body h3 {
  font-size: 1.22rem;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--mgdb-border);
}

#body h4 {
  font-size: 1.08rem;
  padding-left: 10px;
  border-left: 3px solid #8da7c4;
}

/* Tables */

#body .style_table {
  max-width: 100%;
  margin: 16px auto;
  border: 1px solid var(--mgdb-border);
  border-collapse: collapse;
  background: var(--mgdb-surface);
}

#body .style_td,
#body .style_th {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--mgdb-border);
  background: var(--mgdb-surface);
  color: var(--mgdb-text);
  line-height: 1.55;
  vertical-align: middle;
}

#body .style_th,
#body thead .style_td,
#body thead .style_th {
  background: var(--mgdb-soft);
  font-weight: 600;
}

/* Images and code blocks */

#body img {
  max-width: 100%;
  height: auto;
}

#body pre {
  margin: 16px 0;
  padding: 15px;
  background: #f5f8fc;
  color: var(--mgdb-text);
  border: 1px solid var(--mgdb-border);
  border-radius: 6px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#body blockquote {
  margin: 16px 0;
  padding: 8px 18px;
  border-left: 4px solid #b8cbe0;
  background: #f8fafc;
}

/* Editing */

.edit_form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 280px;
  font-family: Consolas, "Yu Gothic", monospace;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Footer and tools */

#note,
#attach,
#toolbar,
#lastmodified,
#related,
#footer {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

#toolbar {
  padding-top: 12px;
  padding-bottom: 12px;
}

#footer,
#lastmodified,
#related {
  color: var(--mgdb-muted);
}

/* Tablet */

@media (max-width: 1100px) {
  #contents {
    gap: 14px;
    padding: 0 14px;
  }

  #menubar {
    flex-basis: 210px;
    width: 210px;
  }

  #body {
    padding: 24px;
  }
}

/* Mobile */

@media (max-width: 760px) {
  #header {
    padding: 12px;
  }

  #header img#logo {
    max-height: 75px;
  }

  #navigator {
    padding: 10px;
    font-size: 0.82rem;
  }

  #contents {
    flex-direction: column;
    gap: 14px;
    margin: 14px auto;
    padding: 0 10px;
  }

  #body,
  #menubar,
  #rightbar {
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto;
  }

  #body {
    order: 1;
    padding: 20px 15px;
  }

  #menubar {
    order: 2;
    padding: 15px;
  }

  #rightbar {
    order: 3;
  }

  #body h1.title {
    font-size: 1.55rem;
  }

  #body h2 {
    font-size: 1.2rem;
  }

  #body .style_td,
  #body .style_th {
    padding: 7px;
  }
}

/* ==================================================
   MGDB Modern Wiki v0.2
   Header, heading colors and horizontal spacing
   ================================================== */

/* 1. Header: white background to match existing logo */

#header {
  background: #ffffff;
  border-bottom: 1px solid var(--mgdb-border);
  padding: 12px 28px;
}

/* 2. Article headings: deep blue with white text */

#body h2 {
  color: #ffffff;
  background: #245181;
  border: 0;
  border-left: 5px solid #8db5df;
  border-radius: 5px;
  padding: 11px 16px;
}

#body h3 {
  color: #ffffff;
  background: #356797;
  border: 0;
  border-radius: 4px;
  padding: 8px 14px;
}

#body h4 {
  color: #245181;
  background: #e7eef6;
  border-left: 4px solid #356797;
  border-radius: 3px;
  padding: 7px 12px;
}

/* Keep the main article title distinct */

#body h1.title {
  color: var(--mgdb-navy);
  background: transparent;
  border-bottom: 2px solid #245181;
}

/* 3. More space around the sidebar and article */

#contents {
  max-width: 1560px;
  padding-left: 36px;
  padding-right: 36px;
  gap: 26px;
}

#menubar {
  padding: 22px 20px;
}

#body {
  padding: 34px 42px;
}

/* Tablet */

@media (max-width: 1100px) {
  #contents {
    padding-left: 22px;
    padding-right: 22px;
    gap: 18px;
  }

  #body {
    padding: 26px 28px;
  }

  #menubar {
    padding: 18px;
  }
}

/* Mobile */

@media (max-width: 760px) {
  #header {
    padding: 10px 12px;
  }

  #contents {
    padding-left: 14px;
    padding-right: 14px;
    gap: 16px;
  }

  #body {
    padding: 22px 18px;
  }

  #menubar {
    padding: 18px;
  }

  #body h2 {
    padding: 9px 12px;
  }

  #body h3 {
    padding: 8px 11px;
  }
}

/* ==================================================
   MGDB Modern Wiki v0.3
   ================================================== */

/* MGDB Modern Wiki v0.9 */

/* H2を再表示 */
#body h2#content_3_0 {
  display: block;
}

/* 2. PC版の本文・メニュー余白 */
@media (min-width: 761px) {
  #menubar {
    padding: 0 12px;
  }

  #body {
    padding: 0 12px;
  }
}

/* 3. 記事内の表を横幅いっぱいに */
#body .style_table {
  width: 100%;
}

/* MenuBarの検索フォーム */
#menubar input[name="word"] {
  display: block;
  box-sizing: border-box;
  width: 14ch;
  max-width: 100%;
  margin: 0 0 6px 0;
  padding: 4px 6px;
  font-size: 14px;
}

/* ==================================================
   MGDB Modern Wiki v0.4
   MenuBar search form
   ================================================== */

/* 検索フォーム全体 */
#menubar form[action*="cmd=search"] {
  margin: 10px 0 14px;
  font-size: 13px;
  line-height: 1.6;
}

/* 検索入力欄 */
#menubar input[name="word"] {
  display: block;
  box-sizing: border-box;
  width: 14ch;
  max-width: 100%;
  height: 34px;
  margin: 0 0 9px;
  padding: 6px 9px;
  color: #263445;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  box-shadow: 0 1px 2px rgba(20, 40, 70, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* 入力欄のフォーカス */
#menubar input[name="word"]:focus {
  outline: none;
  border-color: #356797;
  box-shadow: 0 0 0 3px rgba(53, 103, 151, 0.16);
}

/* AND / OR のラベル */
#menubar form[action*="cmd=search"] label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px 8px 0;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
}

/* ラジオボタン */
#menubar form[action*="cmd=search"] input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 1.5px solid #94a3b8;
  border-radius: 50%;
  cursor: pointer;
}

/* 選択されたラジオボタン */
#menubar form[action*="cmd=search"] input[type="radio"]:checked {
  border-color: #356797;
}

#menubar form[action*="cmd=search"] input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #356797;
}

/* キーボード操作時の視認性 */
#menubar form[action*="cmd=search"] input[type="radio"]:focus-visible {
  outline: 3px solid rgba(53, 103, 151, 0.35);
  outline-offset: 2px;
}

/* 検索ボタン */
#menubar form[action*="cmd=search"] input[type="submit"] {
  display: inline-block;
  padding: 5px 13px;
  min-height: 30px;
  color: #245181;
  background: #edf3f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

#menubar form[action*="cmd=search"] input[type="submit"]:hover {
  background: #dce8f4;
  border-color: #8daac8;
}

#menubar form[action*="cmd=search"] input[type="submit"]:focus-visible {
  outline: 3px solid rgba(53, 103, 151, 0.35);
  outline-offset: 2px;
}


/* ==================================================
   MGDB Modern Wiki v0.5
   280px Sidebar + Ellipsis / Hover
   ================================================== */
/* PC版のメニューを280pxに拡張 */
@media (min-width: 1101px) {
  #menubar {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;
    max-width: 280px;
  }
}

/* タブレットでも幅を280pxに統一 */
@media (min-width: 761px) and (max-width: 1100px) {
  #menubar {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;
    max-width: 280px;
  }
}

/* 階層リンクの表示 */
#menubar a.link_page_passage {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ホバー・キーボードフォーカス時に全文表示 */
#menubar a.link_page_passage:hover,
#menubar a.link_page_passage:focus-visible {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  background: #edf3f9;
  border-radius: 4px;
}

/* MGDB Modern Wiki v0.6 - 本文の左右余白 */
@media (min-width: 761px) {
  div#body {
    padding: 0 8px;
  }
}

/* MGDB Modern Wiki v0.7 - テーブルの角丸 */
#body .style_table {
  border-radius: 4px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}


/* ==================================================
   MGDB Modern Wiki v0.8
   Heading gradients
   ================================================== */

/* H2：大見出し */
#body h2 {
  color: #ffffff;
  background: linear-gradient(
    90deg,
    #21466f 0%,
    #527da7 100%
  );
}

/* H3：中見出し */
#body h3 {
  color: #ffffff;
  background: linear-gradient(
    90deg,
    #356797 0%,
    #7295b8 100%
  );
}

/* H4：小見出し */
#body h4 {
  color: #245181;
  background: linear-gradient(
    90deg,
    #e2ecf6 0%,
    #f6f9fc 100%
  );
}

/* 濃い背景上のリンクを白色に */
#body h2 a,
#body h2 a:link,
#body h2 a:visited,
#body h3 a,
#body h3 a:link,
#body h3 a:visited {
  color: #ffffff;
}

/* マウスを合わせたときのリンク */
#body h2 a:hover,
#body h3 a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* ==================================================
   MGDB Modern Wiki v0.9
   Heading gradients
   ================================================== */

#body h2 {
  color: #ffffff;
  background-color: #21466f;
  background-image: linear-gradient(
    to right,
    #21466f 0%,
    #527da7 100%
  );
}

#body h3 {
  color: #ffffff;
  background-color: #356797;
  background-image: linear-gradient(
    to right,
    #356797 0%,
    #7295b8 100%
  );
}

#body h4 {
  color: #245181;
  background-color: #e2ecf6;
  background-image: linear-gradient(
    to right,
    #e2ecf6 0%,
    #f6f9fc 100%
  );
}

/* 見出し内のリンク色 */
#body h2 a,
#body h2 a:link,
#body h2 a:visited,
#body h3 a,
#body h3 a:link,
#body h3 a:visited {
  color: #ffffff;
}

/* MGDB Modern Wiki v1.1 - テーブル見出し行 */

/* 全セルが見出しセルである行だけを対象 */
#body .style_table tr:has(> th.style_th):not(:has(> td.style_td)) {
  background: linear-gradient(
    to right,
    #21466f 0%,
    #527da7 100%
  );
}

/* セル背景を透明にし、行全体のグラデーションを表示 */
#body .style_table tr:has(> th.style_th):not(:has(> td.style_td)) > th {
  background: transparent;
  color: #ffffff;
  font-weight: 600;
}

/* 見出し行のリンクを白色に */
#body .style_table tr:has(> th.style_th):not(:has(> td.style_td)) a,
#body .style_table tr:has(> th.style_th):not(:has(> td.style_td)) a:visited {
  color: #ffffff;
}

/* MGDB Modern Wiki v1.2 - テーブルセル中央揃え */
#body .style_table td.style_td {
  text-align: center;
}


/* MGDB Modern Wiki v1.3 - Flat tile table */

/* タイル間の余白 */
#body table.style_table {
  border-collapse: separate;
  border-spacing: 4px;
  background-color: #ffffff;
}

/* データセルをタイル状に */
#body table.style_table td.style_td {
  text-align: center;
//  background: #edf3f9;
  border: 1px solid #d5e0ec;
  border-radius: 3px;
  padding: 10px 12px;
}