/*DB一覧表のセル幅指定*/
#db_data_list table.uk-table { margin: 0px; table-layout:fixed; }
#db_data_list div.uk-margin-bottom div:not(:first-child) { margin-top: -1px; }
#db_data_list div.uk-margin-bottom div:not(:first-child) tr:first-child{ visibility: collapse; }

#db_data_list table.uk-table tr th:nth-of-type(1) { width: 100px; }
#db_data_list table.uk-table tr th:nth-of-type(2) { width: 40px; }
#db_data_list table.uk-table tr th:nth-of-type(3) { width: 220px; }
#db_data_list table.uk-table tr th:nth-of-type(4) { width: 180px; }
#db_data_list table.uk-table tr th:nth-of-type(5) { width: 70px; }
/*
#db_data_list table.uk-table tr th:nth-of-type(6) { width: 10px; }
*/




/* ============================================================
 ↓DB検索結果テーブル：列ごとに自然幅
 ============================================================*/
.uk-overflow-container > .uk-table {
  table-layout: auto;   /* ← fixed をやめる */
  width: 100%;
}

.uk-overflow-container > .uk-table td {
  white-space: normal;
  word-break: break-word;
}

/* ============================================================
 ↑DB検索結果テーブルだけ
 ============================================================*/


/* ユーザー名にアイコンつける：再考 
.comment-author[data-name="虚くん"]::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(https://img.wiki3.jp/roguelikecardbattle/%E8%99%9A.png);
  background-size: cover;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.comment_name::before {
  content: "🛠";
  margin-right: 6px;
}
一回中止*/

/*↓カード表示テスト*/
.card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.8em;
  margin-bottom: 1em;
  background: #fff;
}
.card-header {
  border-bottom: 1px solid #eee;
  margin-bottom: 0.5em;
}
.card-title {
  font-weight: bold;
  margin: 0;
}
.card-sub {
  font-size: 0.85em;
  color: #666;
  margin: 0;
}
.card-body {
  font-size: 0.75em;
  line-height: 1.6;
}
/*↑カード表示テスト*/




/*説明用のdb表サイズ設定*/
/* ▼ DB一覧表のセル幅指定（db-list-common内だけ適用） */
.db-list-common table.uk-table {
  margin: 0px;
  table-layout: fixed;
}
/* ▼ 複数ブロックの隙間を詰める */
.db-list-common .uk-margin-bottom > div:not(:first-child) {
  margin-top: -1px;
}

/* ▼ 2つ目以降のテーブルの最初の行（ヘッダー）を非表示にする */
.db-list-common .uk-margin-bottom > div:not(:first-child) tr:first-child {
  visibility: collapse;
}
/* ▼ 列幅（1〜5列目） */
.db-list-common table.uk-table tr th:nth-of-type(1) { width: 100px; }
.db-list-common table.uk-table tr th:nth-of-type(2) { width: 40px; }
.db-list-common table.uk-table tr th:nth-of-type(3) { width: 220px; }
.db-list-common table.uk-table tr th:nth-of-type(4) { width: 180px; }
.db-list-common table.uk-table tr th:nth-of-type(5) { width: 70px; }
/* ▼ 必要があれば6列目も（コメント解除で使用可）
.db-list-common table.uk-table tr th:nth-of-type(6) { width: 10px; }
*/
/* Ndk : zukan リスト専用 列幅 */
.db-ndk-zukan table.uk-table tr th:nth-of-type(1) { width: 120px; }
.db-ndk-zukan table.uk-table tr th:nth-of-type(2) { width: 60px; }
.db-ndk-zukan table.uk-table tr th:nth-of-type(3) { width: 260px; }
.db-ndk-zukan table.uk-table tr th:nth-of-type(4) { width: 180px; }
.db-ndk-zukan table.uk-table tr th:nth-of-type(5) { width: 80px; }

/* 下の構造専用：余白完全除去 */
.uk-overflow-container,
.toggle-wrapper,
.limited-row-table,
.limited-row-table.uk-table {
  margin: 0 !important;
  padding: 0 !important;
}

/* DBブロック間の余白を潰す */
.uk-margin-bottom {
  margin-bottom: 0 !important;
}


/*画面の横割り分割*/
.flex-row {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
}

.flex-1 {
  flex: 2 !important;
  display: block !important;
}

.flex-2 {
  flex: 2 !important;
  display: block !important;
}
/* 3分割用 */
.flex-3 {
  flex: 1 !important;  /* 左・中央・右それぞれ1:1:1 */
  display: block !important;
}


/* ============================================================
 ↓見出し_部分編集
 ============================================================*/
/* ヘッダー（ローグライクカードバトル）の文字 */
#site_header h1 a.uk-link-muted {
  color: #e6f6ff; /* 明るいシアン寄り白 */
  text-shadow: 0 0 6px rgba(79, 209, 255, 0.6);
}

#site_header h1 a.uk-link-muted:hover {
  color: #ffd166; /* ホバー時ゴールド */
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.8);
}

.main_content > h1 {
  background: rgba(0, 0, 0, 0.45);
  color: #e6f6ff;
  padding: 14px 18px;
  border-left: 8px solid #ffd166;
  border-radius: 8px;
  font-size: 1.9em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* タイトル見出し用 */
.title-main {
  font-size: 2.4em;
  font-weight: bold;
  color: #e6f6ff; /* 明るいシアン寄り白 */
  border-bottom: 3px solid #4fd1ff;
  padding-bottom: 10px;
  text-align: left;
  text-shadow: 0 0 6px rgba(79, 209, 255, 0.6);
}

/* 見出しレベル1 */
h1 {
  background: rgba(10, 30, 60, 0.75); /* 半透明ダークブルー */
  color: #e6f6ff;
  padding: 8px 14px;
  text-indent: 12px;
  border-radius: 6px;
  border-left: 6px solid #4fd1ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* 見出しレベル2 */
h2 {
  background: rgba(15, 45, 80, 0.7);
  color: #ccecff;
  padding: 6px 12px;
  text-indent: 12px;
  border-left: 4px solid #ffd166; /* ゴールドアクセント */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* 見出しレベル3 */
h3 {
  background: rgba(20, 20, 30, 0.65);
  color: #dddddd;
  padding: 5px 10px;
  text-indent: 12px;
  border-left: 3px solid #888;
}

/* 見出しリンク色変更 */
h1 a {
  color: #4fd1ff !important; /* !important で強制適用 */
}
h2 a {
  color: #4fd1ff !important; /* !important で強制適用 */
}
h3 a {
  color: #4fd1ff !important; /* !important で強制適用 */ 
}

/* 特定表だけ上揃え */
.top-table table td,
.top-table table th {
  vertical-align: top;
}

/* 親 div を行内にして高さをなくす */
.uk-text-right {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 0;
  line-height: 0;
}

/* 【追加】部分編集ボタン(edit)を含む場合のみ、システム改行を殺す */
div.uk-text-right:has(> a[href*="edit"]) + br,
div.uk-text-right:has(> a[href*="edit"]) + p,
div.uk-text-right:has(> a[href*="edit"]) + br + br {
  display: none !important;
}
/* ボタン直後の見出しの上余白を強制解除 */
div.uk-text-right:has(> a[href*="edit"]) + h1,
div.uk-text-right:has(> a[href*="edit"]) + h2,
div.uk-text-right:has(> a[href*="edit"]) + h3 {
  margin-top: 0 !important;
}

/* アイコンの元文字を消す */
.uk-text-right a {
  font-size: 0;
  height: 0;
  line-height: 0;
  display: inline-block;
  position: relative;
}

/* 絵文字表示＆Y方向調整 */
.uk-text-right a::after {
  content: "✏️";
  font-size: 18px;
  position: absolute;
  top: 30px;
  right: -32px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}
/* ============================================================
 ↑見出し_部分編集
 ============================================================*/

/* ============================================================
 ↓背景色変え*/
/* ===== 背景画像設定 ===== */
body {
  background-image: url("https://img.wiki3.jp/roguelikecardbattle/background.jpg");
  background-size: cover;        /* 画面いっぱいに広げる */
  background-repeat: no-repeat;  /* 繰り返さない */
  background-position: center;   /* 画面中央に配置 */
  background-attachment: fixed;  /* スクロールしても固定 */
  background-color: #f0f0f0;     /* 画像が読み込まれない時の代替色 */
}

/* ===== Wiki本文ガラス ===== */
/* sectionは透明な土台 */
section#main_content {
  background: transparent !important;
}
/* 本文ガラス
.uk-width-2-3.main_content {
  background: rgba(255, 255, 255, 0.90) !important;
  border-radius: 14px;
}*/

.uk-width-2-3 {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 14px;
  padding: 16px;
}


/*編集・表は白固定 DB編集時のみONにする。表が見やすくなる*/
.uk-overflow-container,
.uk-overflow-container * {
  background: #fff !important;
}

/* 本文内部の自動生成コンテナを透明化(なんかなくても動作する)
#content,
#content .inner,
#content .uk-panel,
#content .uk-panel-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
*/


/* 水平線の色調整 */
hr {
  border: none;
  border-top: 1px solid #888;
}




/* ===== 左メニュー ===== */
.uk-width-1-3 {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 14px;
}

/* ===== コメント ===== */
/* コメント中身は透明(返信欄は透明化しないように除外) */
#comment_list >.comment,
#comment_list >.comment_body,
#comment_list >.comment p {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* コメント全体の面 */
#comment-form,
.uk-margin-top > .comment,
section#comment-form ~ .comment {
  background: rgba(255, 255, 255, 0.65) !important;
  border-radius: 12px;
  padding: 12px 16px;
}
/* 入力欄 */
#comment-form input,
#comment-form textarea {
  background: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================
 ↑背景色変え*/


.mini-border {
  border-top: 1px solid #ccc;
  margin: 2px 0;
}
/* ============================================================
 ↑表の中に最小ボーダー格納*/




/* ============================================================================================
 いちおう作成者ごと境界線
 ============================================================================================*/



/* ============================================================
   [01] ヘッダー設定：ロゴ部分への画像挿入
   ============================================================*/

/* ヘッダーのh1要素：擬似要素を絶対配置するための基準点とする */
div#site_header h1 {
    position: relative; /* 基準点設定 */
}

/* ヘッダー内のリンク（テキスト）の位置調整 */
div#site_header h1 a {
    line-height: 40px;  /* 行の高さを指定して縦位置を調整 */
    margin-left: 40px;  /* アイコンを表示するための左側余白を確保 */
    padding-left: 5px;  /* テキストとアイコンの間の微調整用余白 */
}

/* ヘッダーリンクの前にアイコン画像を表示するための擬似要素 */
div#site_header h1 a:before {
    position: absolute; /* 親要素（h1）を基準にして自由に配置 */
    content: "";        /* 擬似要素を表示するために必須（空文字） */
    width: 50px;        /* アイコンの横幅 */
    height: 50px;       /* アイコンの縦幅 */
    background-image: url(https://img.wiki3.jp/roguelikecardbattle/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png); /* アイコン画像のURL */
    background-size: contain;       /* 画像の縦横比を崩さず、指定サイズ内に全体を収める */
    background-repeat: no-repeat;   /* 画像が余白に繰り返し表示されるのを防ぐ */
    background-position: center;    /* 画像を領域の中央に配置 */
    display: block;     /* 幅と高さを適用するためにブロック要素化 */
    top: 0%;            /* 上端に合わせる */
    border-radius: 15%; /* 角を少し丸くする（15%の丸み） */
}


/* ============================================================
   [02] 目次表示設定：PC画面用（右側に追従する目次）
   ============================================================*/

/* --- グローバル設定 --- */
/* 目次内で現在閲覧中のセクションをハイライト表示（赤） */
#toc-target a.active-section {
    color: #ff0000 !important;         /* 文字色を赤で強制 */
    font-weight: bold !important;      /* 太字で強制 */
    border-left: 3px solid #ff0000;    /* 左側に赤い縦線を追加して強調 */
    padding-left: 5px;                 /* 縦線と文字の間の余白 */
    background-color: #fff5f5;         /* 背景をほんのり薄い赤にして視認性アップ */
}

/* --- PC表示時（画面幅1230px以上）のレイアウト適用 --- */
@media (min-width: 1230px) {
  
    /* 画面右側に浮遊（追従）する目次コンテナ全体の枠組み */
    #floating-toc {
        position: fixed !important; /* スクロールしても画面上の同じ位置に固定 */
        top: 120px;                 /* 画面上端からの距離（ヘッダーとの被り回避） */
        right: 5px;                 /* 画面右端からの距離 */
        width: calc(50vw - 475px - 20px); /* 画面中央からメインコンテンツの半分を引いた動的な幅指定 */
        min-width: 80px;            /* 画面を縮めてもこれ以上狭くならない最小幅 */
        max-width: 500px;           /* 画面を広げてもこれ以上広がらない最大幅 */
        max-height: 75vh;           /* 縦の長さは画面の高さの75%までとする */
        
        display: flex;              /* 内部のタイトルとリストを並べるためFlexbox化 */
        flex-direction: column;     /* 要素を縦方向に並べる */
        overflow: hidden;           /* コンテナ全体ではスクロールさせず、枠からはみ出た部分を隠す */
        padding: 0;                 /* 内側の余白を0にし、各要素で個別に調整する */

        background: #fff;           /* 背景色を白に設定 */
        border: 1px solid #ddd;     /* 薄いグレーの枠線 */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* コンテナの下に軽い影を落として立体感を出す */
        z-index: 1000;              /* 他の要素より手前に表示させるための重なり順 */
        border-radius: 4px;         /* 枠の角を丸くする */
        box-sizing: border-box;     /* paddingやborderを幅・高さの計算に含める */
    }
  
    /* 目次上部のヘッダー（「目次」タイトル、TOPボタン、閉じるボタンが入る固定エリア） */
    .toc-title {
        font-size: 16px;            /* タイトルの文字サイズ */
        font-weight: bold;          /* タイトルを太字に */
        border-bottom: 2px solid #eee; /* タイトル下の区切り線 */
        color: #333;                /* 文字色を濃いグレーに */
        display: flex;              /* 内部の要素を横並びにする */
        justify-content: space-between; /* 要素を左右と中央に均等に散らして配置 */
        align-items: center;        /* 要素の縦位置を中央で揃える */
        
        flex-shrink: 0;               /* リストが長くなってもタイトルエリアが潰れないように固定 */
        padding: 15px 15px 5px 15px;  /* 上15px、左右15px、下5pxの内側余白 */
        margin-bottom: 0;             /* リストとの隙間をなくす */
        background: #fff;             /* 背後の要素と重なった際に透けないよう背景色を指定 */
    }

    /* 目次内に設置する「TOPに戻る」ボタンのデザイン */
    #toc-header-top {
        font-size: 10px;            /* 小さめの文字サイズ */
        color: #0077bb;             /* リンクっぽい青色 */
        cursor: pointer;            /* マウスカーソルを指マークに変更 */
        background-color: #f0f8ff;  /* 薄い水色の背景 */
        padding: 2px 6px;           /* ボタンの内側余白 */
        border-radius: 4px;         /* ボタンの角を丸くする */
        font-weight: normal;        /* 太字を解除して控えめに */
        display: none;              /* 初期状態では非表示（JSで制御想定） */
        white-space: nowrap;        /* ボタン内の文字が改行されないようにする */
    }
    
    /* TOPボタンにマウスを乗せたときの演出 */
    #toc-header-top:hover {
        background-color: #0077bb;  /* 背景を濃い青色に */
        color: #fff;                /* 文字色を白に反転 */
    }

    /* 目次の開閉（トグル）ボタン */
    #toc-toggle {
        font-size: 11px;            /* 小さめのアイコンサイズ */
        color: #888;                /* 目立ちすぎないグレー */
        cursor: pointer;            /* クリック可能であることを示す指マーク */
        font-weight: normal;        /* 太字解除 */
    }
    
    /* 開閉ボタンにマウスを乗せたときの演出 */
    #toc-toggle:hover { 
        color: #333;                /* 色を濃くして反応を示す */
    }

    /* 実際の目次項目が並ぶスクロールエリア */
    #toc-target {
        overflow-y: auto;           /* 項目が多い場合、ここだけ縦スクロールを許可する */
        flex-grow: 1;               /* コンテナの残りの高さを全てこのエリアに割り当てる */
        padding: 5px 15px 15px 15px; /* 上5px、左右・下15pxの内側余白 */
        position: relative;         /* JavaScript等でスクロール位置を計算する際の基準点 */
        scroll-behavior: smooth;    /* クリック等でスクロールした際の動きを滑らかにする */
    }

    /* 目次内の各項目間の区切り設定 */
    #toc-target div {
        border-bottom: 3px solid #eee; /* 項目の下に太めの薄グレー線を引く */
        padding: 4px 0;                /* 上下に少しの余白を持たせる */
    }
    
    /* 最後の項目の下には区切り線を引かない */
    #toc-target div:last-child { 
        border-bottom: none; 
    }

    /* 目次内のリンク文字の基本スタイルと文字溢れ対策 */
    #toc-target a {
        font-size: 13px;            /* 読みやすい標準的なサイズ */
        color: #0077bb;             /* リンクを示す青色 */
        text-decoration: none;      /* デフォルトの下線を消す */
        display: block;             /* 横幅いっぱいにクリック判定を広げる */
        line-height: 1.4;           /* 行間を少し開ける */
        
        /* 文字が長すぎた場合の処理 */
        white-space: nowrap;        /* 強制的に1行で表示（改行させない） */
        overflow: hidden;           /* 枠からはみ出た文字は見えなくする */
        text-overflow: ellipsis;    /* はみ出た末尾を「...」で省略表示する */
    }

    /* 目次のリンクにマウスを乗せた時（ホバー時）の演出 */
    #toc-target a:hover {
        color: #005588 !important;    /* リンク色を少し濃い青に変更 */
        font-weight: bold !important; /* 文字を太くして強調 */
        background-color: #f0f8ff;    /* 背景をほんのり薄い水色にする */
        text-decoration: none;        /* 下線は引き続き表示しない */
    }

    /* PC版における現在地ハイライト（全体設定を上書きしオレンジを優先） */
    #toc-target a.active-section {
        color: #ff6600 !important;      /* 目立つオレンジ色に上書き */
        font-weight: bold !important;   /* 太字 */
        border-left: 2px solid #ff6600; /* 左側にオレンジの縦線 */
        padding-left: 4px;              /* 縦線との隙間 */
        background-color: transparent;  /* 背景色はホバー時やグローバル設定を優先するため透明に */
    }

    /* --- 見出しレベルに応じた字下げ（階層の表現） --- */
    .toc-page-name { padding-left: 0px !important; font-weight: bold; } /* ページ名：字下げなし、太字 */
    .toc-h1 { padding-left: 8px !important; }                           /* 大見出し：少し字下げ */
    .toc-h2 { padding-left: 18px !important; font-size: 0.95em !important; } /* 中見出し：さらに字下げ、文字少し小さめ */
    .toc-h3 { padding-left: 28px !important; font-size: 0.9em !important; color: #666; } /* 小見出し：一番字下げ、文字小さめ、グレー色 */
}


/* ============================================================
   [03] 目次表示設定：スマホ画面用（スライドインするメニュー）
   ============================================================*/

@media (max-width: 1229px) {
    
    /* スマホ用の目次コンテナ（画面外に待機し、横からスライドする設定） */
    #floating-toc {
        display: block !important;  /* スマホ版でも要素自体は表示状態にする */
        position: fixed !important; /* スクロールしても画面に固定 */
        top: 0 !important;          /* 画面の一番上から開始 */
        right: -100% !important;    /* 【重要】初期状態は画面右外に完全に隠しておく */
        width: 250px !important;    /* メニューの横幅 */
        height: 100vh !important;   /* 画面の高さ100%分を確保 */
        max-height: 100vh !important; /* 最大の高さも画面サイズに制限 */
        background: #fff !important; /* 背景は白 */
        z-index: 100000 !important; /* 全ての要素よりも最前面に出す強力な設定 */
        transition: right 0.3s ease-in-out !important; /* 開閉時に0.3秒かけて滑らかにスライドさせる */
        box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important; /* 左側に影を落として浮き上がらせる */
        padding: 0 !important;      /* 全体の内側余白はなし */
        overflow-y: auto !important; /* 縦スクロールを許可 */
        border: none !important;    /* 枠線は不要 */
        border-radius: 0 !important; /* 画面端に密着させるため角丸は解除 */
    }

    /* JavaScript等で開閉クラスが付与された時の状態 */
    #floating-toc.is-open {
        right: 0 !important; /* 画面右端ピッタリまで移動させ、メニューを表示させる */
    }

    /* スマホ版目次内の上部ヘッダー（スクロール追従） */
    .toc-title {
        background: #f8f8f8;        /* 少しグレーがかった背景 */
        padding: 20px;              /* 指で押しやすいよう余白を広めに */
        font-size: 18px !important; /* タイトル文字を大きく */
        border-bottom: 1px solid #eee; /* 下部の区切り線 */
        margin-bottom: 0 !important;/* リストとの隙間なし */
        display: flex;              /* 横並び配置 */
        justify-content: space-between; /* 左右に要素を散らす */
        align-items: center;        /* 縦位置中央 */
        position: sticky !important; /* 【重要】リストをスクロールしてもヘッダーだけ上部に張り付く設定 */
        top: 0;                     /* 張り付く位置（一番上） */
        z-index: 10;                /* 目次項目がスクロールされた際、ヘッダーの下に潜り込むようにする */
    }

    /* スマホ版目次を閉じるための「×」ボタン */
    #toc-toggle {
        font-size: 24px !important; /* 指でタップしやすい大きなサイズ */
        color: #333 !important;     /* 視認性の高い濃いグレー */
        width: 40px;                /* ボタンの横幅（当たり判定） */
        height: 40px;               /* ボタンの縦幅（当たり判定） */
        display: flex;              /* アイコンを中央配置するためFlexbox */
        justify-content: center;    /* 左右中央揃え */
        align-items: center;        /* 上下中央揃え */
        background: #eee;           /* ボタンらしい背景色 */
        border-radius: 50%;         /* 完全な円形にする */
        cursor: pointer;            /* タップ可能であることを示す */
    }

    /* スマホ版目次リストエリア：左右の余白を消し、リンクのタップ領域を最大化 */
    #toc-target {
        padding: 10px 0 !important; /* 上下のみ余白を持たせる */
    }

    /* 項目ごとの枠線の設定 */
    #toc-target div {
        border-bottom: 1px solid #f0f0f0 !important; /* 薄い区切り線 */
        padding: 0 !important;      /* リンク要素側で余白を取るためここは0 */
        margin: 0 !important;       /* 外側余白も0 */
    }

    /* 【重要】スマホでのタップのしやすさを最優先したリンク設定 */
    #toc-target a {
        display: block !important;      /* 要素をブロック化し、1行まるごとをボタンの当たり判定にする */
        width: 100% !important;         /* 横幅いっぱいに広げる */
        padding: 10px 20px !important;  /* リンクの「内側」に余白を作り、タップ領域を広げる */
        font-size: 16px !important;     /* スマホで読みやすい文字サイズ */
        line-height: 1.4 !important;    /* 行間設定 */
        white-space: normal !important; /* PC版とは違い、文字が長い場合は折り返して全文表示する */
        text-overflow: clip !important; /* 省略記号(...)は使わない */
        overflow: visible !important;   /* はみ出しを隠さない */
        box-sizing: border-box !important; /* padding分も横幅100%の計算に含める（はみ出し防止） */
        text-decoration: none !important; /* 下線を消す */
        color: #0077bb;                 /* リンク色 */
    }

    /* スマホでリンクをタップした「瞬間」のフィードバック演出 */
    #toc-target a:active {
        background-color: #f0f0f0 !important; /* タップした時に背景色を変えて、押したことを伝える */
    }

    /* JSで付与されるクラスに基づいた、スマホ版の階層別字下げ設定 */
    #toc-target .toc-page-name a { padding-left: 20px !important; } /* ページ名：基本の余白 */
    #toc-target .toc-h1 a { padding-left: 20px !important; }         /* 大見出し：基本の余白 */
    #toc-target .toc-h2 a { padding-left: 35px !important; }         /* 中見出し：少し内側に押し込む */
    #toc-target .toc-h3 a { padding-left: 50px !important; }         /* 小見出し：さらに内側に押し込む */

    /* 画面端に常駐する「三本線（ハンバーガー）」開閉ボタン */
    #sp-toc-open-btn {
        position: fixed !important; /* 画面に固定表示 */
        right: 0 !important;        /* 画面の右端に張り付く */
        top: 50% !important;        /* 画面の縦中央位置に配置 */
        width: 50px !important;     /* ボタンの横幅 */
        height: 60px !important;    /* ボタンの縦幅 */
        background: rgba(0, 0, 0, 0.7) !important; /* 半透明の黒背景で、下のコンテンツを少し透かす */
        color: #fff !important;     /* アイコンの色は白 */
        display: flex !important;   /* 中央揃えのためのFlexbox */
        align-items: center !important; /* 上下中央揃え */
        justify-content: center !important; /* 左右中央揃え */
        border-radius: 10px 0 0 10px !important; /* 左側の上下だけ角丸にして、画面端にくっついているタブのように見せる */
        z-index: 99999 !important;  /* 他の要素より手前に表示（開いたメニューよりは下） */
        cursor: pointer !important; /* タップ可能アイコン */
        font-size: 30px !important; /* 三本線アイコンのサイズ */
    }

    /* メニューが開いている時に、背後のコンテンツを暗くする黒いオーバーレイ幕 */
    #sp-toc-overlay {
        position: fixed !important; /* 画面全体を覆うため固定 */
        top: 0 !important;          /* 一番上から開始 */
        left: 0 !important;         /* 一番左から開始 */
        width: 100% !important;     /* 画面幅いっぱい */
        height: 100% !important;    /* 画面高さいっぱい */
        background: rgba(0, 0, 0, 0.5) !important; /* 50%の濃さの黒い半透明幕 */
        display: none;              /* 初期状態では非表示（JSで表示に切り替え） */
        z-index: 99999 !important;  /* 背景より上、メニュー本体より下の絶妙なレイヤー位置 */
    }
}


/* ============================================================
   [04] 脚注＆特定ワードのポップアップ表示設定
   ============================================================ */

/* --- A: 脚注のデザイン（上付きの小さな番号ボタン） --- */
#main_content a[href^="#footnote_"]:not(.popup-word-style) {
    position: relative !important;   /* ツールチップ（吹き出し）を表示する際の絶対配置の基準点にする */
    display: inline-block !important;/* 周囲の文字の流れに乗せつつ、padding等のサイズ指定を有効にする */
    text-decoration: none !important;/* リンク特有の下線を消す */
    
    /* 配色設定 */
    color: #444444 !important;            /* 文字色を濃いグレーに */
    background-color: #f0f2f5 !important; /* ボタンの背景色を薄いグレーに */
    border: 1px solid #d1d5db !important; /* 控えめな枠線を設定 */
    
    /* サイズ・形状設定 */
    font-size: 11px !important;      /* 注釈なので文字は小さめに */
    font-weight: bold !important;    /* 小さくても読めるように太字 */
    line-height: 15px !important;    /* ボタンとしての高さを確保 */
    padding: 1px 6px !important;     /* ボタンの内側余白（上下1px、左右6px） */
    margin: 0 1px !important;        /* 隣接する文字との隙間を確保 */
    border-radius: 4px !important;   /* ボタンの角を丸くして柔らかい印象に */
    
    /* 位置とアニメーション */
    vertical-align: 0px !important;  /* 本文テキストとの上下の位置関係。数値を上げると上に浮く */
    transition: all 0.2s ease !important; /* ホバー・クリック時の色変化を0.2秒かけてふわっとさせる */
}

/* 脚注ボタンをクリック・選択中（アクティブ状態）のデザイン */
#main_content a[href^="#footnote_"]:not(.popup-word-style).is-active {
    background-color: #007aff !important; /* 選択状態が明確にわかるように青背景に変更 */
    color: #ffffff !important;            /* 背景が濃いので文字色は白に反転 */
    border-color: #0056b3 !important;     /* 枠線も少し濃い青にして引き締める */
    z-index: 100 !important;              /* 重なり順を上げ、他の要素より手前に出す */
}


/* --- B: 特定ワードのデザイン（本文の文字に溶け込む実線枠スタイル） --- */
.popup-word-style {
    position: relative !important;   /* 吹き出し表示の基準点 */
    display: inline !important;      /* inline-blockと違い、改行や位置を元のテキストと完全に同化させる */
    text-decoration: none !important;/* 下線を消す */
    
    /* 親要素（見出しや段落）のスタイルを継承（同期）させる設定 */
    font-size: inherit !important;      /* 文字サイズは周囲のテキストと同じにする */
    font-weight: inherit !important;    /* 文字の太さも周囲と同じにする */
    color: inherit !important;          /* 文字色も周囲と同じにする */
    line-height: inherit !important;    /* 行の高さも周囲と同じにする */
    vertical-align: baseline !important;/* ベースライン（文字の下端）を周囲と合わせる */
    
    /* 装飾の設定 */
    background-color: transparent !important; /* 背景色は透明にして、元のデザインを活かす */
    /* borderの代わりにbox-shadowで内側に枠線を描く。これにより要素のサイズが変化せず、文字位置が1pxもズレない */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important; /* 0.5の部分を大きくすると枠が濃くなる */
    
    /* 余白を完全にゼロにして元の文字配置を厳密に維持 */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;      /* インタラクティブな要素であることを示す指マーク */
}

/* 特定ワードをクリック・選択中（アクティブ状態）のデザイン */
.popup-word-style.is-active {
    background-color: #007aff !important; /* アクティブ時は青く塗りつぶす */
    color: #ffffff !important;            /* 文字は白抜きに */
    box-shadow: none !important;          /* 背景色が付くため、内側の枠線は不要になり消去 */
}


/* --- 黒い吹き出し（ツールチップ）本体の装飾 --- */
.custom-tooltip {
    position: absolute !important;   /* 脚注ボタンまたは特定ワードを基準にして絶対配置 */
    bottom: 160% !important;         /* 対象ワードの少し上部に浮かせて表示する */
    left: 50% !important;            /* 対象ワードの横幅の中央を始点とする */
    transform: translateX(-50%) !important; /* 左に50%ズラすことで、完全な中央揃えを実現 */
    
    /* 最前面へ確実に出すための強力な設定 */
    z-index: 2147483647 !important;  /* ブラウザの仕様上の最大値を指定し、いかなる要素よりも上に表示 */
    pointer-events: none !important; /* 吹き出し自体はクリック等の判定を持たず、下の要素に触れるようにスルーさせる */

    /* デザイン設定 */
    background-color: #333333 !important; /* 背景は濃いダークグレー */
    color: #ffffff !important;            /* 文字は白 */
    padding: 8px 12px !important;         /* 吹き出し内の余白（上下8px、左右12px） */
    border-radius: 8px !important;        /* 角をしっかり丸める */
    font-size: 13px !important;           /* 読みやすいサイズ */
    font-weight: normal !important;       /* 太字にはしない */
    line-height: 1.5 !important;          /* 行間を適切に取る */
    white-space: normal !important;       /* 長い文章は自動で折り返す */
    width: max-content !important;        /* 基本は中身のテキストに合わせた幅にする */
    max-width: 90vw !important;           /* ただし画面幅の90%を超えないように制限（スマホ対応） */
    min-width: 80px !important;           /* 短い単語でも一定の幅は確保する */
    word-break: break-all !important;     /* 長い英単語やURLなどがあれば強制的に改行する */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; /* 吹き出しの下に影を落とし、浮遊感を出す */
    transition: opacity 0.2s ease !important; /* 表示・非表示の切り替えをフェードイン/アウトにする */
}

/* 親要素の重なり（z-indexのスタックコンテキスト）を無視させるための追加設定 */
/* 吹き出しが入っているボタン自体を最前面に持ってくることで、吹き出しが隠れるのを防ぐ */
#main_content a[href^="#footnote_"].is-active,
.popup-word-style.is-active {
    z-index: 9999 !important; /* アクティブな要素本体の優先度を上げる */
}

/* 吹き出しの下から突き出る「▼（しっぽ部分）」を作る設定 */
.custom-tooltip::after {
    content: "" !important;          /* 擬似要素を表示するために必須 */
    position: absolute !important;   /* 吹き出し本体を基準に絶対配置 */
    top: 100% !important;            /* 吹き出しの底辺のラインに配置 */
    left: var(--arrow-left, 50%) !important; /* JSで位置調整可能な変数を利用しつつ、基本は中央（50%） */
    transform: translateX(-50%) !important;  /* X軸の中央揃え */
    border: 6px solid transparent !important; /* 6pxの透明な枠線を作る */
    border-top-color: #333333 !important;     /* 上の枠線だけ吹き出し本体と同じ色に塗ることで、下向きの三角形（▼）が完成する */
}


/* ============================================================
   [05] ワイドレイアウト用設定（メイン幅固定版）
   ============================================================ */

/* --- 通常時のスクロール設定 --- */
html, body {
    overflow-x: hidden; /* 通常表示では予期せぬ横スクロール（レイアウト崩れ）を完全に禁止する */
}

/* --- 画面幅が極端に狭くない限り適用されるワイドモード --- */
@media (min-width: 24px) {

    /* ワイドレイアウト有効時のみ、横スクロールを許可する */
    body.custom-wide-mode {
        overflow-x: auto !important; /* 画面に収まりきらない巨大なコンテンツがある場合に横スクロールバーを出す */
    }

    /* 全体を囲むコンテナの幅制限を解除 */
    body.custom-wide-mode div.uk-container.uk-container-center {
        max-width: none !important;     /* 最大幅の制限（1200px等）を取り払う */
        width: 100% !important;         /* 画面幅いっぱいまで広げる */
        margin-left: 0 !important;      /* 中央揃え用のマージンをリセット */
        margin-right: 0 !important;     /* 中央揃え用のマージンをリセット */
        padding-left: 10px !important;  /* 左側に最低限の余白を設ける */
        overflow-x: visible !important; /* コンテナレベルでの横スクロール隠しを解除 */
    }

    /* 各カラム（左メニュー、メイン、右）を並べるグリッドシステムをFlexboxで再構築 */
    body.custom-wide-mode .uk-grid {
        display: flex !important;       /* Flexboxを強制有効化 */
        flex-wrap: nowrap !important;   /* カラムが絶対に下に落ちない（折り返さない）ように横並びを強制 */
        justify-content: flex-start !important; /* 要素を左寄せで並べる */
        min-width: calc(2045px - 200px) !important; /* レイアウト崩れ防止のための全体の最小幅を確保（計算式） */
    }

    /* 広告や不要なカラム要素（メニューとメインコンテンツ以外）を非表示にするハック */
    body.custom-wide-mode .uk-grid > div:not(#wiki_menu):not(.main_content) {
        flex: 0 0 0 !important;         /* Flexbox内でのサイズを0に固定（伸び縮みさせない） */
        width: 0 !important;            /* 横幅を0に */
        min-width: 0 !important;        /* 最小幅も0に */
        margin: 0 !important;           /* 余白も消去 */
        padding: 0 !important;          /* 内側余白も消去 */
        overflow: visible !important;   /* はみ出し制御 */
        position: relative !important;  /* 配置の基準点 */
    }

    /* 左側メニューの幅を固定 */
    body.custom-wide-mode #wiki_menu {
        width: 220px !important;        /* 幅を220pxに固定 */
        min-width: 220px !important;    /* 縮まないように最小幅も220px */
        flex: 0 0 220px !important;     /* Flexboxの計算上も220px固定とする */
    }

    /* 【修正箇所】メインコンテンツエリアの固定幅設定 */
    body.custom-wide-mode .main_content {
        /* 自動調整をやめ、1600pxの固定幅を持たせることで画面サイズに追従させない */
        /* ※中身に合わせて広げたい場合は width: auto !important に変更を検討 */
        width: 1600px !important; 
        flex: 0 0 1600px !important;    /* Flexbox環境下でも絶対に1600pxを維持する */
        
        /* 右側に追従する目次メニューと本文が重ならないようにするための安全余白 */
        margin-right: 230px !important; 
    }

    /* 右側に表示する目次メニュー等の追従設定 */
    body.custom-wide-mode #floating-toc {
        position: fixed;                /* スクロールしても定位置に固定 */
        top: 80px;                      /* 上からの位置 */
        right: 5px;                     /* 右からの位置 */
        width: 200px !important;        /* 幅を200pxに固定 */
        min-width: 200px !important;    /* 縮まないように固定 */
        max-width: 200px !important;    /* 広がらないように固定 */
        z-index: 1000;                  /* 他要素より手前に表示 */
    }
}


/* ============================================================
   [06] コンテンツ表示切り替えボタン（トグルボタン）の設定
   ============================================================ */

/* --- 1. ボタンの基本スタイル（通常版を表示中：赤背景でアピール） --- */
#content-toggler {
    position: fixed;                /* 画面の決まった位置に常にフロート表示 */
    bottom: 40px;                   /* 画面下端から40px浮かす */
    right: 40px;                    /* 画面右端から40px浮かす */
    
    /* ボタンのサイズ設定 */
    padding: 20px 50px;             /* 上下20px、左右50pxの大きな余白でボタンを巨大化 */
    font-size: 18px;                /* 目立つ大きな文字サイズ */
    font-weight: bold;              /* 文字を太くして力強く */
    
    /* 配色設定（赤基調） */
    background-color: #ff0000;      /* 強い赤色で目を引く */
    color: #ffffff;                 /* 文字色は白 */
    border: 1px solid #ffffff;      /* ボタンの周囲に1pxの白い縁取り線を入れる */
    
    /* 動作・装飾設定 */
    cursor: pointer;                /* クリックできるボタンであることを示す */
    border-radius: 8px;             /* 角を少し丸くして現代的なデザインに */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* ボタンの下に影を落とし、浮いているように見せる */
    z-index: 9999;                  /* いろんな要素の上に被さってでも表示させる */
    transition: all 0.3s ease;      /* ホバー時などの変化を0.3秒かけて滑らかに行う */
    text-align: center;             /* 中の文字を中央揃え */
}

/* --- 2. 強化版を表示中（JSによって .is-active クラスが付与された状態） --- */
#content-toggler.is-active {
    background-color: #000000;      /* 状態が変わったことが明確にわかるよう黒背景に変更 */
    color: #ffffff;                 /* 文字色は白のまま */
    border-color: #ffffff;          /* 白い縁取りも維持 */
}

/* --- 3. マウスホバー時のリッチな演出 --- */
#content-toggler:hover {
    opacity: 0.9;                   /* 少しだけ透明にしてクリック感を予感させる */
    transform: translateY(-2px);    /* 上に2pxフワッと浮き上がるアニメーション */
    box-shadow: 0 6px 15px rgba(255,255,255,0.2); /* 浮き上がりに合わせて影を濃く・広くする（白っぽい影） */
}

/* --- 4. 強化版コンテンツの初期非表示設定 --- */
.content-b {
    display: none;                  /* トグルボタンを押すまでは、クラス「content-b」を持つ要素を隠しておく */
}

/* --- 5. スマホ（画面幅480px以下）向けのコンパクト化設定 --- */
@media (max-width: 480px) {
    #content-toggler {
        padding: 10px 20px;         /* ボタンの余白を小さくして邪魔にならないようにする */
        font-size: 16px;            /* 文字サイズも少し小さく調整 */
        bottom: 15px;               /* 画面下端のギリギリに寄せる */
        right: 15px;                /* 画面右端のギリギリに寄せる */
    }
}


/* ============================================================
   [07] リンク切れ要素のハイライト設定（JSによる判定結果の反映）
   ============================================================ */

/* 未作成ページ(.new)や、JSでリンク切れ判定された要素を目立たせる */
a.broken-link-detected,
a.new, 
#wiki_body a.new,
#wiki_menu a.new {
    color: #ff0000 !important;      /* 目立つように文字を真っ赤に強制 */
    font-weight: bold !important;   /* 太字にして強調 */
    text-decoration: underline wavy #ff0000 !important; /* ただの下線ではなく、赤色の「波線」を引いて警告感を出す */
}


/* ============================================================
   [08] データベース表（skill_list等）のレイアウト・スクロール設定
   ============================================================ */

/* --- テーブルの枠組み設定 --- */
.limited-row-table {
  table-layout: fixed;              /* セルの幅を固定し、中身の文字量によってガタガタと崩れるのを防ぐ */
  width: 100%;                      /* テーブル幅を親要素いっぱいまで広げる */
}

/* --- スクロールさせたい特定のセルに対する設定 --- */
.limited-row-table td.scroll-cell {
  padding: 0;                       /* セル自体の余白を消し、中のスクロール領域をいっぱいに広げる */
  vertical-align: top;              /* セル内の要素を上揃えに配置 */
}

/* --- セル内のスクロール本体となる内側のコンテナ --- */
.limited-row-table td.scroll-cell .scroll-inner {
  max-height: 170px;                /* この高さを超えたらスクロールバーを出すという閾値 */
  overflow-y: auto;                 /* 縦方向にはみ出た場合のみスクロールを許可 */
  overflow-x: hidden;               /* 横方向へのはみ出し・スクロールは禁止 */
  padding: 6px;                     /* スクロール領域内のコンテンツに少しの余白を持たせる */
  box-sizing: border-box;           /* padding分を含めて高さを計算し、レイアウト崩れを防ぐ */
}

/* --- スクロールバー表示に伴うレイアウトのズレを防止 --- */
.limited-row-table td.scroll-cell .scroll-inner {
  scrollbar-gutter: stable;         /* スクロールバーが出現しても、中身のコンテンツの幅が縮んだりズレたりしないようにスペースを確保（対応ブラウザ向け） */
}

/* --- テーブル内の隠しコンテンツの初期状態（JSの表示切替用） --- */
.limited-row-table .content-b {
  display: none;                    /* セクション06のトグル機能と連携。最初は非表示 */
}


/* ============================================================
   [09] デバイス別（PC/スマホ）の表示切り替え ＆ 編集モード対応
   ============================================================ */

/* --- 1. 閲覧時における表示切り替え --- */
/* PC画面（769px以上）で閲覧中の場合 */
@media screen and (min-width: 769px) {
    .sp-table { display: none !important; } /* スマホ専用のテーブル要素は完全に隠す */
}

/* スマホ画面（768px以下）で閲覧中の場合 */
@media screen and (max-width: 768px) {
    .pc-table { display: none !important; } /* PC専用のテーブル要素は完全に隠す */
}

/* --- 2. 管理者・編集者モードでの特殊設定（両方を強制表示） --- */
/* Wikiの編集画面やプレビュー画面では、PC用とスマホ用の両方のテーブルを
   同時に確認・編集できないと不便なため、メディアクエリ（画面幅による隠蔽）を無視して両方表示させます。
   
   【対象となるクラス・ID】
   .uk-form-stacked: Wikiモードでの編集画面
   .cke_editable:    見たままモード（CKEditor）内
   .wiki-content-preview: プレビュー画面
   #edit_form:       編集フォーム全体
*/
.uk-form-stacked .pc-table, .uk-form-stacked .sp-table,
.cke_editable .pc-table, .cke_editable .sp-table,
.wiki-content-preview .pc-table, .wiki-content-preview .sp-table,
#edit_form .pc-table, #edit_form .sp-table {
    display: table !important;      /* 隠されていた要素を「テーブル」として強制的に表示状態に戻す */
    visibility: visible !important; /* 見えない設定にされていた場合も強制可視化 */
    opacity: 1 !important;          /* 透明度も100%（完全表示）に強制 */
    border: 2px dashed #1e87f0 !important; /* 編集画面でのみ、テーブルの周りに青い「点線」の枠を付けて編集中であることを分かりやすくする */
    margin-bottom: 20px !important; /* 2つのテーブルがくっつかないように下部の余白を取る */
}

/* --- 編集画面で「どちらの表か」を一目で判別するためのラベル付け --- */
/* PC用テーブルの上部に付与する青いラベル */
.cke_editable .pc-table::before,
.uk-form-stacked .pc-table::before {
    background: #1e87f0;            /* 青色背景 */
    color: white;                   /* 白文字 */
    padding: 2px 10px;              /* ラベルの余白 */
    font-size: 12px;                /* 小さめの文字 */
    display: block;                 /* ブロック要素としてテーブルの上に配置 */
}

/* スマホ用テーブルの上部に付与する赤いラベル */
.cke_editable .sp-table::before,
.uk-form-stacked .sp-table::before {
    background: #e06c75;            /* 赤色（サーモンピンク系）背景 */
    color: white;                   /* 白文字 */
    padding: 2px 10px;              /* ラベルの余白 */
    font-size: 12px;                /* 小さめの文字 */
    display: block;                 /* ブロック要素としてテーブルの上に配置 */
}