:root {
           --primary-color: #0056b3;
           --bg-color: #f8f9fa;
           --border-color: #dee2e6;
           --text-color: #333;
           --date-color: #666;
       }

       .container {
           max-width: 900px; /* 横幅確認のため少し広げました */
           margin: 0 auto 5rem;
           background: #fff;
           padding: 20px;
           border-radius: 8px;
           /*box-shadow: 0 2px 10px rgba(0,0,0,0.05);*/
       }



       .year-section { margin-bottom: 20px; }
       .year-label {
           font-size: 1.1rem;
           font-weight: bold;
           margin-bottom: 8px;
           display: block;
           color: #444;
       }
       .tabs {
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
           margin-bottom: 15px;
           border-bottom: 1px solid var(--border-color);
           padding-bottom: 10px;
       }

       .tab-btn {
           padding: 6px 12px;
           border: 1px solid var(--border-color);
           background: #fff;
           cursor: pointer;
           border-radius: 20px;
           font-size: 0.9rem;
           transition: all 0.2s;
       }

       .tab-btn.active {
           background-color: var(--primary-color);
           color: #fff;
           border-color: var(--primary-color);
       }

       .news-list {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .news-item {
           display: none;
           border-bottom: 1px solid var(--border-color);
       }

       .news-item a {
           text-decoration: none;
           color: var(--text-color);
           display: block;
           padding: 15px 5px;
           transition: background 0.2s;
       }

       .news-item a:hover {
           background-color: #f0f7ff;
       }

       .news-date {
           display: block;
           font-size: 1.2rem;
           color: var(--date-color);
           margin-bottom: 4px;
           font-weight: 900;
       }

       .news-title {
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
           font-size: 1.1rem;
           line-height: 1.4;
       }

       @media (min-width: 600px) {
           .news-item a {
               display: flex;
              align-items: baseline;
               gap: 20px;
           }
           .news-date {
               margin-bottom: 0;
               min-width: 90px;
               padding-top: 2px;
           }
       }

       .show { display: block; }


@media screen and (max-width: 568px) {
   .col2_r24, .col3_r24, .col4_r24, .col5_r24, .col6_r24 {
       width: calc(100% - 20px);
   }
}
@media screen and (max-width: 896px) {
   .col6_r24 {
       width: calc(100% - 20px);
   }
}
@media screen and (max-width: 896px) {
   .mlr20_r24, .col1_r24, .col2_r24, .col3_r24, .col4_r24, .col5_r24, .col6_r24, .box4_r24 {
       margin-left: 10px;
       margin-right: 10px;
   }
}

.col6_r24 {
   width: calc(100% - 60px);
}

.txtCent {
   text-align: center;
}

@media print, screen and (max-width: 896px) {
   .bdrBtmRD_r24 {
       padding: 0 20px 10px;
   }
}

.br-sp {
 display: none;
}

@media screen and (max-width: 596px) {
 .br-sp {
   display: block;
 }
}
.news-title {
font-size: 1rem;
}

.archive-panel-header {
   background-color: #f2f4f6;
   border-radius: 12px;
   padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   transition: background-color 0.3s;
   margin: 10px 0 0 0;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.year-section.is-open .accordion-content {
    max-height: 6000px;
    opacity: 1;
    margin-bottom: 10px;
}

.year-section {
    scroll-margin-top: 160px;
}


.accordion-content .tabs {
   padding: 15px 0;
}


.panel-left {
   display: flex;
   align-items: center;
   gap: 15px;
}
.year-label {
   font-size: 22px;
   font-weight: bold;
   color: #333;
   line-height: 1;
}
.archive-guide {
   font-size: 1.1rem;
   color: #666;
}
.icon {
   width: 20px;
   height: 20px;
   position: relative;
}
.icon::before, .icon::after {
   content: "";
   position: absolute;
   background-color: #0056b3;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.icon::before { width: 14px; height: 2px; }
.icon::after { width: 2px; height: 14px; transition: 0.3s; }
.year-section.is-open .icon::after {
   transform: translate(-50%, -50%) rotate(90deg);
   opacity: 0;
}


/*   */
/* --- スマホ専用：横スクロールを強制する設定 --- */
@media screen and (max-width: 768px) {
   .tabs-outer {
       width: 100%;
       overflow: hidden;
       position: relative;
   }

   .tabs {
       display: flex !important;
       flex-wrap: nowrap !important;
       overflow-x: auto !important;
       -webkit-overflow-scrolling: touch;
       padding-bottom: 12px;
       gap: 8px;
       border-bottom: none;
   }

   .tab-btn {
       flex: 0 0 auto !important;
       min-width: 60px;
       padding: 8px 15px;
       font-size: 0.85rem;
   }

   .tabs::-webkit-scrollbar {
       display: none;
   }
}

/*  */
@media screen and (max-width: 768px) {
   .tabs-outer {
       position: relative;
   }

   .tabs-outer::after {
       content: "";
       position: absolute;
       top: 0;
       right: 0;
       width: 40px;
       height: 100%;
       background: linear-gradient(to right, rgba(255,255,255,0), #fff);
       pointer-events: none;
       z-index: 2;
   }
}


/* 拡大可能な画像にカーソルを虫眼鏡にする */
.zoom-img {
    cursor: zoom-in;
    transition: opacity 0.2s;
}
.zoom-img:hover {
    opacity: 0.9;
}

/* 拡大時の背景黒マスク */
.img-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: zoom-out; /* クリックで閉じられることを示す */
}

/* 拡大された画像本体 */
.img-zoom-overlay img {
    max-width: 90%;
    max-height: 90%;
    -o-object-fit: contain;
       object-fit: contain;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* 表示状態になったときのスタイル */
.img-zoom-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.img-zoom-overlay.is-active img {
    transform: scale(1);
}