.container { margin-bottom: 50px; }

.container-buttons {
  display: flex;
  gap: 8px; /* ボタン間の余白 */
  margin-bottom: 16px; /* 下に少し隙間 */
}

.container-buttons .container-btn {
  display:inline-block; margin:1rem 0; padding:0.5rem;
  cursor:pointer; text-align:center;
  border-radius: 8px;
  border: none;
}

.container-buttons .container-btn:hover {
  transform: translateY(-1px);
}

#hide-zero-btn {
  background-color: #4a90e2; /* 青系 */
  width:180px;
  color: white;
  font-weight: bold;
  transition: background-color 0.2s, transform 0.1s;
}
#hide-zero-btn:hover {
  background-color: #357ab8;
}
#hide-zero-btn.active {
  background-color: #1c5aaa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#reset-btn {
  font-weight:bold;
  font-size:1rem; background:#fc095a; color:#fff;
  width:120px;
}
#reset-btn:hover { background:#c0392b; }
.category { display:flex; flex-wrap:wrap; gap:0.8rem 1rem; margin-top:1rem; }
.item {
  flex:0 0 250px; background:#fff; padding:0.65rem 0.7rem; border-radius:10px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1); display:flex; justify-content:space-between; align-items:center;
}
.item .label { width:120px; font-size:0.9em; font-weight:bold; white-space:nowrap; text-align:left; padding-left: 33px; /* ←画像の幅よりちょい大きめに */ }
.item .label.vampire-hunter { font-size:0.75em; } /* 文字小さく */
.controls { display:flex; align-items:center; gap:0.3rem; flex-shrink:0; }
.controls button {
  padding:0.3rem 0.6rem; border:none; border-radius:5px; cursor:pointer;
  background:#4a90e2; color:#fff; font-size:1rem;
}
.controls button:disabled { background:#ccc; cursor:not-allowed; }
.count { min-width:2rem; text-align:center; font-weight:bold; }


/* カテゴリ色分け */
#近接 .item { background:#e8f3ff; border-left:6px solid #4a90e2;
    /* 背景画像系 */
    background-size: auto 70%;  /* 高さをボタンに合わせる（縦基準） */
    background-repeat: no-repeat;
    background-position: 4px center;
}
#遠距離 .item { background:#e9f9f0; border-left:6px solid #27ae60;
    /* 背景画像系 */
    background-size: auto 70%;  /* 高さをボタンに合わせる（縦基準） */
    background-repeat: no-repeat;
    background-position: 4px center;
}
#遠近距離 .item { background:#f4ecff; border-left:6px solid #9b59b6;
    /* 背景画像系 */
    background-size: auto 70%;  /* 高さをボタンに合わせる（縦基準） */
    background-repeat: no-repeat;
    background-position: 4px center;
}

/* サイドバー */
.quick-access {
  position:fixed;
  top:0;
  right:-250px;
  width:250px;
  height:97vh;
  background:#fff;
  box-shadow:-2px 0 10px rgba(0,0,0,0.15);
  transition:right 0.3s ease;
  padding:1rem;
  z-index:1000;
  border-left:2px solid #4a90e2;

  display:flex;
  flex-direction:column; /* 上下で分ける */
}
.quick-access:hover { right:0; }
.quick-access.fixed {
  right: 0 !important; /* hover より優先 */
}

.quick-tab {
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  background:#4a90e2;
  color:#fff;
  padding:0.5rem 0.8rem;
  writing-mode:vertical-rl;
  text-align:center;
  cursor:pointer;
  border-radius:8px 0 0 8px;
  z-index:1001;
}

.quick-tab.active {
  background-color: #357ABD;
}

/* 入力欄は固定 */
#quick-filter {
  flex:0 0 auto;
  width:85%;
  margin-bottom:0.5rem;
  padding:0.4rem;
  border-radius:6px;
  border:1px solid #ccc;
}

/* ボタンは残りをスクロール領域に */
#quick-buttons {
  flex:1 1 auto;
  overflow-y:auto;
}

.quick-access h3 {
    margin-top:1rem;
    margin-bottom:0.5rem;
    font-size:1.1rem; 
    color:#333; 
    border-bottom:1px solid #ddd;
    padding-bottom:0.3rem;
}
.quick-btn {
  display:block;
  width:95%;
  margin:0.3rem 0;
  padding:0.5rem;
  text-align:left;
  background:#ecf5ff;
  border:1px solid #ccc;
  border-radius:6px;
  cursor:pointer;
  font-size:0.9rem;
  color: #003366;
  text-shadow: 1px 1px 0 #fff;
  font-weight: bold;
  padding-left: 44px; /* ←画像の幅よりちょい大きめに */
  
  /* 背景画像系 */
  background-size: auto 100%;  /* 高さをボタンに合わせる（縦基準） */
  background-repeat: no-repeat;
  background-position: left center;
}
.quick-btn:hover { 
    color: #003366;
    background:#dceeff; 
    background-size: auto 100%;  /* 高さをボタンに合わせる（縦基準） */
    background-repeat: no-repeat;
    background-position: left center;
}

/* スクロールバー */
.quick-access::-webkit-scrollbar { width:8px; }
.quick-access::-webkit-scrollbar-track { background:#f1f1f1; border-radius:4px; }
.quick-access::-webkit-scrollbar-thumb { background:#4a90e2; border-radius:4px; }
.quick-access::-webkit-scrollbar-thumb:hover { background:#357ABD; }
.quick-access { scrollbar-width: thin; scrollbar-color: #4a90e2 #f1f1f1; }

/* ヘッダリンク全体 */
#head-links a {
    color: #1e90ff;        /* 青系 */
    text-decoration: none;  /* 下線なし */
    padding: 0 0.2rem; /* 左右の間隔 */
    margin-bottom: 2px; /* 下に2pxの隙間 */
    display: inline-block; /* margin-bottom を効かせるために必要 */
    transition: color 0.2s; /* ホバー時の色変化 */
}

/* ホバー時 */
#head-links a:hover {
    color: #63b3ed; /* 明るめの青に */
}


/* active クラスが付いたリンク */
#head-links a.active {
    color: #0d47a1; /* 濃い青で強調 */
    font-weight: bold;
}


/* 共通部分 */
.sort-types {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
  font-family: sans-serif;
}

.sort-types a {
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  border: 1px solid #ddd;
  background: #fafafa;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sort-types a:hover {
  background: #f0f0f0;
  color: #222;
  border-color: #ccc;
}

.sort-types a.active {
  background: #4a90e2;
  color: #fff;
  border-color: #4a90e2;
}


  /* count-display 内のボタン装飾 */
  #count-display button {
    color: #fff;                     /* 文字色 */
    border: none;                    /* 枠線なし */
    border-radius: 0.5rem;           /* 角丸 */
    padding: 0.4rem 0.8rem;          /* 内側の余白 */
    margin: 0.2rem;                  /* ボタン間の余白 */
    cursor: pointer;                 /* ホバー時ポインタ */
    font-weight: bold;
  }

  #count-display button:hover {
    transform: scale(1.05);          /* 少し拡大 */
  }

  /* タイトル装飾 */
  #count-display h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #333;
  }

  
  /* カテゴリごとの背景色 */
  .category-近接 { background-color: #4a90e2; }
  .category-遠距離 { background-color: #50c878; }
  .category-遠近距離 { background-color: #9b59b6; }

  /* ホバー時の色を少し濃くする */
  .category-近接:hover { background-color: #357ab8; }
  .category-遠距離:hover { background-color: #3da35d; }
  .category-遠近距離:hover { background-color: #7d3f9c; }