/* ============================================================================================================================
目次用CSS
============================================================================================================================ */

/* ベース */
section.category-content { padding:0 30px; margin:auto; margin-bottom:80px; }

/* お知らせ情報 */
ul.info-box { flex-direction:column; gap:16px; }
ul.info-box li {  border-bottom:1px dashed #c2c2c2; gap:16px; padding-bottom:16px; }
ul.info-box li div.oshirase-item { flex-direction:column; gap:5px; }
div.item-data { flex-direction:column; }
div.item-data time { font-size:13px; font-weight:700; line-height:1.6; }
ul.info-box li div.oshirase-item p.category, ul.info-box li div.oshirase-item p.title { font-weight:700; }
ul.info-box li div.oshirase-item p.category a { align-items:center; color:var(--bk); font-size:14px; justify-content:center; line-height:14px; letter-spacing:4.2px; height:20px; width:90px; }

/* カテゴリ別色 */
.affairs p.category a { background-color:var(--pi-1); }
.event p.category a { background-color:var(--pi-2); }

/* アイコン設定 */
ul.info-box li::before { aspect-ratio:1/1; display:inline-block; margin-top:22px; height:18px; width:18px; }
ul.info-box li.affairs::before { background-image:url('../img/top/icon-affairs.svg'); }
ul.info-box li.event::before { background-image:url('../img/top/icon-event.svg'); }

@container(min-width:960px) {

/* ベース */
section.category-content { padding:0; margin-bottom:120px; max-width:1000px; width:100%; }

/* お知らせ情報 */
ul.info-box { gap:64px; padding:40px 50px; }
ul.info-box li div.oshirase-item { gap:11px; }
div.item-data { align-items:center; flex-direction:row-reverse; justify-content:flex-end; gap:16px; }
div.item-data time { font-size:20px; }
ul.info-box li div.oshirase-item p.category a { height:30px; width:140px; }
ul.info-box li div.oshirase-item p.title { font-size:18px; }

/* アイコン設定 */
ul.info-box li::before { margin-top:0; height:30px; width:30px; }

}