/* === アーカイブアコーディオン全体 === */
.archive-accordion {
    margin: 0 0 1em;
}

/* === 年度ブロック === */
.archive-year {
    border-bottom: 1px solid #ccc;
}

/* === 年度ヘッダー部分（年リンク＋矢印ボタン） === */
.year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    padding: 0.4em 0.6em;
    min-height: 36px;
}

/* 年リンク部分 */
.year-link {
    flex-grow: 1;
    text-decoration: none;
    color: #333;
    font-weight: normal;
    display: block;
}

.year-link:hover {
    text-decoration: underline;
    background: #eaeaea;
}

/* === 矢印トグルボタン === */
.toggle-btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    transition: transform 0.2s ease;
}

.toggle-btn.open .arrow {
    transform: rotate(180deg);
}

/* === 月リスト === */
.month-list {
    padding: 0.4em 0 0.4em 1.5em;
    background: #fff;
    list-style: none;
    margin: 0;
}

.month-list li {
    margin: 0.2em 0;
}

.month-list li a {
    color: #333;
    text-decoration: none;
}

.month-list li a:hover {
    text-decoration: underline;
}

/* 閉じた年の月リストを非表示 */
.month-list[hidden] {
    display: none;
}

/* === レスポンシブ軽微調整 === */
@media (max-width: 768px) {
    .year-header {
        padding: 0.6em;
    }
    .year-link {
        font-size: 0.95em;
    }
    .toggle-btn {
        width: 20px;
        height: 20px;
    }
}

/* === フォーカスやクリック時の揺れ防止 === */
.year-link,
.toggle-btn {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.year-link:focus,
.toggle-btn:focus {
  outline: none;
  box-shadow: none;
}

/* 押下時・右クリック時に中央寄りにならないよう固定 */
.year-link {
  text-align: left;
  transition: none !important;
}

.year-link:hover,
.year-link:active,
.year-link:focus {
  text-align: left;
  background: #eaeaea;
  color: #333;
}

/* 年度ヘッダー全体の高さを固定し、クリック時に再計算されないようにする */
.year-header {
  min-height: 36px;
  transition: none !important;
}