/*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-wrap {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 600px) {
  .card-wrap {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ===== カード ===== */
.card {
  position: relative;
  background-color: #2b2b2b;
  border-radius: 6px;
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
}

/* 不要p削除 */
.card-wrap > p {
  display: none;
}

.card-title {
  margin: 0;
  padding: 0;
}
/* ===== 重ねテキスト ===== */
.card-text {
  position: absolute;
  bottom: 8%;
  width: 100%;
  text-align: center;
  font-size: 13px;
}

/* スマホ時だけ小さく */
@media (max-width: 600px) {
  .card-text {
    font-size: 9px;
  }
}
/*↑カード表示テスト*/




/*説明用の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);
}
/* ======================
   h1 : 帯型見出し（濃グレー系）
====================== */
h1 {
  background: #1f2126; /* 非常に濃いグレー/黒 */
  color: #e0e0e0;      /* 明るめのグレー文字 */
  padding: 4px 12px;
  border-left: 6px solid #7a5aff; /* 紫系アクセント */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  font-weight: bold;
}

/* ======================
   h2 : 下線型見出し（区切り線）
====================== */
h2 {
  background: transparent; 
  color: #4a4f58;  /* やや濃い灰色 */
  padding: 8px 18px;
  border-bottom: 2px solid #7a5aff; /* 紫系ライン */
  font-weight: bold;
}

/* ======================
   h3 : 補助レベル（最小装飾）
====================== */
h3 {
  background: transparent;
  color: #6b6f78;  /* 濃淡の中間灰 */
  padding: 4px 18px;
  border-bottom: 1px solid #888;
  font-weight: normal;
}

/* 見出しリンク色変更 */
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: 10px;
  position: absolute;
  top: 20px;
  right: -18px;
  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: 30px;  /* 行の高さを指定して縦位置を調整 */
    margin-left: 40px;  /* アイコンを表示するための左側余白を確保 */
    padding-left: 5px;  /* テキストとアイコンの間の微調整用余白 */
}

/* ヘッダーリンクの前にアイコン画像を表示するための擬似要素 */
div#site_header h1 a:before {
    position: absolute; /* 親要素（h1）を基準にして自由に配置 */
    content: "";        /* 擬似要素を表示するために必須（空文字） */
    width: 38px;        /* アイコンの横幅 */
    height: 38px;       /* アイコンの縦幅 */
    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%の丸み） */
    left: 10px;
}


/* ============================================================
   [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),
.popup-word-style {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
    
    /* サイズ・形状（脚注とスキル名の統一感を出す） */
    font-size: 1.0em !important;      /* 周囲より一回り小さく */
    font-weight: bold !important;    /* 小さくても読めるように太字 */
    line-height: 1.4 !important;
    padding: 1px 4px !important;     /* 押しやすい横幅を確保 */
    margin: 0 1px !important;        /* 文字との隙間 */
    border-radius: 4px !important;   /* 柔らかい角丸 */
    
    /* 配色：通常時（控えめなボタン風） */
    color: #444444 !important;
    background-color: #f0f2f5 !important;
    border: 2px solid #d1d5db !important;
    
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

/* スキル名リンク（.popup-word-style）固有の微調整 */
.popup-word-style {
    border-width: 2px !important; 
    padding: 1px 1px !important;     /* 押しやすい横幅を確保 */
    margin: 1 1px !important;        /* 文字との隙間 */
    line-height: 1 !important;         /* 行の高さを最小限に */*/
}

/* 見出し（h1-h6）内のボタン背景を少し暗く、文字をそのままにする設定 */
h1 .popup-word-style, 
h2 .popup-word-style, 
h3 .popup-word-style, 
h4 .popup-word-style, 
h5 .popup-word-style, 
h6 .popup-word-style {
    /* 背景を薄い黒（20%の濃さ）にする */
    background-color: rgba(0, 0, 0, 0.2) !important;
    
    /* 文字色は見出しの色を維持 */
    color: inherit !important;
    
    /* 枠線を少し濃いめにしてボタン感を出す */
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    
    /* 余白をさらに詰め、見出しの文字サイズを維持 */
    padding: 0 2px !important;
    margin: 0 !important;
    display: inline !important;
    font-size: 1em !important;
}

/* ホバーした時はさらに少しだけ暗くする */
h1 .popup-word-style:hover, 
h2 .popup-word-style:hover, 
h3 .popup-word-style:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* --- B: ホバー・アクティブ（クリック中）のデザイン --- */

/* ホバー時：少し色を濃くする */
#main_content a[href^="#footnote_"]:hover,
.popup-word-style:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* アクティブ・選択中：鮮やかな青に反転 */
#main_content a[href^="#footnote_"].is-active,
.popup-word-style.is-active,
.popup-word-style:active {
    background-color: #007aff !important; 
    color: #ffffff !important;            
    border-color: #0056b3 !important;     
    box-shadow: 0 0 4px rgba(0,122,255,0.4) !important;
    z-index: 100 !important;
}

/* --- C: 黒い吹き出し（ツールチップ）本体の装飾 --- */
.custom-tooltip {
    position: absolute !important;
    bottom: 160% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;

    background-color: #333333 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: 90vw !important;
    min-width: 80px !important;
    word-break: break-all !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
    transition: opacity 0.2s ease !important;
}

/* 吹き出しのしっぽ（▼） */
.custom-tooltip::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: var(--arrow-left, 50%) !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    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;                 /* ブロック要素としてテーブルの上に配置 */
}







/* 本文内のスキル名（トリガー） */
.skill-trigger {
    color: #191970;
    cursor: help;
    border-bottom: 1px dashed #40E0D0;
    font-weight: bold !important;
}

/* モーダル本体：スマホ見切れ対応統合版 */
#skill-card-modal {
    position: fixed;
    z-index: 999999;
    background: rgba(10, 20, 25, 0.98);
    border: 1px solid #444;
    padding: 15px;
    border-radius: 6px;
    
    /* 基本幅320px、画面が狭い時は左右に5pxずつの余白を持たせてフィット */
    width: 320px;
    max-width: calc(100vw - 10px);
    box-sizing: border-box;
    
    display: none;
    pointer-events: auto;
    color: #fff;
    font-family: sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    overflow-wrap: break-word;
}

/* 切替ボタンエリア */
.modal-sw-container { display: flex; gap: 5px; margin-bottom: 12px; }
.sw-btn {
    flex: 1; cursor: pointer; text-align: center; padding: 5px; 
    font-size: 11px; border: 1px solid #444; background: #222; color: #aaa;
}

/* 通常版アクティブ */
.sw-btn.active-n { background: #eee !important; color: #000 !important; }

/* 強化版アクティブ */
.sw-btn.active-p { background: #ff4444 !important; color: #fff !important; }

/* 強化版データがない時 */
.sw-btn.disabled { opacity: 0.2; cursor: default; }

/* ヘッダー部分 */
.modal-header { display: flex; gap: 12px; }
.modal-icon { 
    width: 60px; 
    height: 60px; 
    flex-shrink: 0; 
    border: 1px solid #333; 
    object-fit: contain; 
    background: #000; 
}
.modal-title-box { flex: 1; min-width: 0; }

/* スキル名の色の出し分け */
.modal-name { font-weight: bold !important; font-size: 17px; line-height: 1.2; }
.modal-name.type-normal { color: #ffffff; }
.modal-name.type-plus { color: #ff4444; }

/* 属性・行数テキスト */
.modal-meta { font-size: 11px; margin-top: 4px; }
.modal-meta.type-normal { color: #8af; }
.modal-meta.type-plus { color: #8af; }

/* 説明文エリア */
.modal-text {
    font-size: 13px; 
    line-height: 1.5; 
    color: #ddd; 
    border-top: 1px solid #333; 
    padding-top: 8px; 
    margin-top: 10px; 
    min-height: 40px;
}
/* モーダル内の画像はみ出し防止 */
.modal-text img { max-width: 100%; height: auto; }

/* リンクボタン */
.modal-link {
    display: block; 
    margin-top: 12px; 
    text-align: center; 
    font-size: 11px; 
    color: #ccc; 
    border: 1px solid #555; 
    padding: 6px; 
    text-decoration: none; 
    background: rgba(255,255,255,0.05);
}
.modal-link:hover { background: rgba(255,255,255,0.1); color: #fff; }