table {
    width: 90%;
    max-width: 770px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid #ddd;
}
th, td {
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
    text-align: center;
}
/* キャラクター列の最大幅を設定 */
th[data-column="character"],
td[data-column="character"] {
text-align: center;
max-width: 150px;
min-width: 130px;
}

/* タグ列の最大幅を設定 */
th[data-column="tags"],
td[data-column="tags"] {
max-width: 620px;
}

.center-icon-cell {
text-align: center; /* テーブルセル内のコンテンツをセンターに配置 */
}
.center-icon {
    display: block;
    margin: 0 auto; /* 画像自体をセンターに配置 */
    width: 50px; /* アイコンの幅を指定 */
    height: 50px; /* アイコンの高さを指定 */
    border-radius: 10%; /* 丸みを付ける。 */
}

.filter-area {
    margin-bottom: 20px; /* テーブルとの間に余白を追加 */
    padding: 10px;
    border: 1px solid #ccc; /* 枠線を追加 */
    background-color: #f9f9f9; /* 背景色を設定 */
}
/* リンクのデフォルトのスタイルを解除 */
#character-table a {
    text-decoration: none; /* 下線を解除 */
}
#character-table a:hover {
    font-weight: bold;
}
#filter-area a {
    text-decoration: none; /* 下線を解除 */
}
#filter-area a:hover {
    font-weight: bold;
}
.weapon-tag {
    color: black; /* 武器の色 */
}
.buff-tag {
    color: blue; /* バフの色 */
}
.debuff-tag {
    color: var(--pickupnow-color); /* デバフの色 */
}
.heal-tag {
    color: green; /* 回復の色 */
}
.barrier-tag {
    color: orange; /* バリアの色 */
}
.other-tag {
    color: gray; /* その他の色 */
}
.tag-grid .weapon-tag {
    background-color: #e0e0e0;
    color: black;
}
.tag-grid .buff-tag {
    background-color: #e5f1ff;
    color: blue;
}
.tag-grid .debuff-tag {
    background-color: #fff0f0;
    color: var(--pickupnow-color);
}
.tag-grid .heal-tag {
    background-color: #e5ffe5;
    color: green;
}
.tag-grid .barrier-tag {
    background-color: #fff5e5;
    color: orange;
}
.tag-grid .other-tag {
    background-color: #f2f2f2;
    color: gray;
}
.kaijo {
    color: red;
}
.gameimage {
    width: 720px;
    padding-left: 30px;
    padding-bottom: 20px;
}
.tag-list {
    display: inline-block;
    padding-right: 10px;
}

.tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.tag-grid label {
    display: inline-block;
    white-space: nowrap;
    padding: 0.3em 0.6em;
    border-radius: 6px;
    font-size: 0.9em;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin-bottom: 4px;
}

.tag-grid input[type="checkbox"] {
    margin-right: 0.4em;
}
#tag-filter-box summary {
    display: inline-block;
    background-color: #eee;
    padding: 0.6em 1em;
    border: 2px solid #999;
    width: 200px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 1.1em;
}

/* ホバー時にちょっと明るく */
#tag-filter-box summary:hover {
    background-color: #f7f7f7;
    border-color: #666;
}

/* アイコン用スペース（▼ or ▲） */
#tag-filter-box summary::after {
    content: '▼';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    transition: transform 0.3s;
}

/* open 状態のときに ▲ に変える */
#tag-filter-box[open] summary::after {
    content: '▲';
}

.color-filter {
  display: flex;
  gap: 0.5em;
  margin: 15px 0 15px 20px;
  flex-wrap: wrap;
}

.color-btn {
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 0.9em;
  font-weight: bold;
  color: white;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.3s;
}

.color-btn.active {
  opacity: 1.0;
  box-shadow: 0 0 0 2px #fff inset, 0 0 4px rgba(0, 0, 0, 0.3);
}

/* 属性ごとの背景色（非アクティブ） */
.color-btn.all    { background-color: #999; }
.color-btn.blue   { background-color: #337ab7; }
.color-btn.red    { background-color: #d9534f; }
.color-btn.green  { background-color: #5cb85c; }
.color-btn.yellow { background-color: #f0ad4e; }
.color-btn.heaven { background-color: #e6e6e6; color: #333; }
.color-btn.dark   { background-color: #6f42c1; }


.color-btn.active.blue   { background-color: #0056b3; }
.color-btn.active.red    { background-color: #b52b27; }
.color-btn.active.green  { background-color: #398439; }
.color-btn.active.yellow { background-color: #d58512; }
.color-btn.active.heaven { background-color: #fff; color: #111; }
.color-btn.active.dark   { background-color: #4b2984; }


@media screen and (max-width: 768px) {
    table {
        width: 95%;
        margin-left: 3px;
        margin-right: 10px;
    }
    .gameimage {
        width: 85%;
        cursor: pointer;
        padding: 0 20px 10px;
    }
    .color-btn {
    width: 41px;
    height: 41px;
    }
    .color-filter {
        margin: 15px 0 15px 10px;
    }
}