@charset "utf-8";
.category-block + .category-block { margin-top: 1.25rem; }
.category-title { font-weight: 700; font-size: 1.05rem; }
.item-note { color: #6c757d; font-size: .9rem; }
.items-grid .form-check { break-inside: avoid; margin-bottom: .5rem; }

/* 各カテゴリ内のチェックボックス群を3列表示 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 各項目幅を調整 */
  gap: 0.5rem 1rem; /* 上下・左右の間隔 */
}

/* アコーディオンボタン（閉じている状態）の hover スタイル */
.accordion-button:hover {
  background-color: #f8f9fa; /* 背景色（薄いグレー） */
  color: #0d6efd;           /* テキスト色（Bootstrapブルー） */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 開いているアコーディオンの hover スタイル */
.accordion-button:not(.collapsed):hover {
  background-color: #e9ecef; /* 開いているときは少し濃いグレー */
  color: #0d6efd;
}

/* クリック時（active）の反応も少し強調したい場合 */
.accordion-button:active {
  background-color: #dee2e6;
  color: #0a58ca;
}

/* 画像を動かす */
.float-img img {
transition: all 0.3s ease;
}

.float-img a:hover img {
transform: translateY(-4px);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
opacity: 0.9;
}

/* 左右の斜線が入ったタイトル */
.title-container-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-bottom: 10px;
}

.title-container {
    position: relative;
    text-align: center;
}

.title-with-lines {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    font-size: 1.2em;
    text-align: center;
}

.title-with-lines::before,
.title-with-lines::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2px;
    height: 100%;
    background: black;
    transform: translateY(-50%);
}

.title-with-lines::before {
    left: -20px;
    transform: rotate(-35deg) translateY(-50%);
}

.title-with-lines::after {
    right: -20px;
    transform: rotate(35deg) translateY(-50%);
}

/*賢威のマーカー表示に上書き*/
.line-blue {
background: linear-gradient(transparent 62%, #a6eafd 0%) !important;
display: inline;
padding: 2px;
}
.line-yellow {
background: linear-gradient(transparent 62%, #fdf4ae 0%) !important;
display: inline;
padding: 2px;
}
.line-orange {
background: linear-gradient(transparent 62%, #fde1a7 0%) !important;
display: inline;
padding: 2px;
}
.line-lime {
background: linear-gradient(transparent 62%, #b7f4aa 0%) !important;
display: inline;
padding: 2px;
}

/* 画面幅が狭い場合は2列または1列に自動調整 */
@media (max-width: 768px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .items-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
.items-grid { columns: 1; }
}