@charset "utf-8";

.notice                                { padding:0 5rem; }
.notice > h1                           { padding-bottom:2rem; text-align:center; font-size:2rem; font-weight:bold; border-bottom:1px solid #000; }
.notice > ul > li                      { display:grid; grid-template-areas:"item1 item2""item1 item3"; grid-template-columns:10rem 1fr; padding:1.5rem 1rem; border-bottom:1px solid #000; }
.notice > ul > li > div:nth-of-type(1) { grid-area:item1; margin:0 0 auto 0; padding:0.2rem 0; text-align:center; font-size:0.8rem; font-weight:bold; width:calc(100% - 2rem); line-height:1.4rem; border-radius:1rem; color:#000; }
.notice > ul > li > div:nth-of-type(2) { grid-area:item2; margin-bottom:0.5rem; font-weight:bold; }
.notice > ul > li > div:nth-of-type(3) { grid-area:item3; }
.notice > ul > li > div > a            { text-decoration:underline; }

.notice > ul > li                  > div:nth-of-type(1) { background:#e2e2e2; }
.notice > ul > li.notice_library   > div:nth-of-type(1) { background:var(--lh-library-color); }
.notice > ul > li.notice_public    > div:nth-of-type(1) { background:var(--lh-public-color); }
.notice > ul > li.notice_goods     > div:nth-of-type(1) { background:var(--lh-goods-color); }
.notice > ul > li.notice_ict       > div:nth-of-type(1) { background:var(--lh-ict-color); }
.notice > ul > li.notice_mitisio   > div:nth-of-type(1) { background:var(--lh-mitisio-color); }
.notice > ul > li.notice_volunteer > div:nth-of-type(1) { background:var(--lh-volunteer-color); }

@media screen and (max-width:1024px)
{
  .notice                                { padding:0 1rem; }
  .notice > h1                           { padding-bottom:1rem; }
  .notice > ul > li                      { grid-template-areas:"item1 item2""item3 item3"; padding:1rem 0; }
  .notice > ul > li > div:nth-of-type(2) { margin-bottom:0; }
  .notice > ul > li > div:nth-of-type(3) { margin-top:1rem; }
}