/* 検索バー */

 #searchContainer {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 50px;
   background: #95fa8c;
   border: 2px solid #018b14;
   padding: .5rem;
   box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   z-index: 700;
 }

 /* 検索バー 横アイコン */

 #searchContainer img {
   width: 2.3rem;
 }

 /* 検索スペース */

 #searchBox {
   width: 100%;
   max-width: 300px;
   padding: .3rem;
   font-size: 1rem;
   border: 2px solid #b7a077;
   border-radius: 5px;
 }

 /* クリアボタン（アイコンのみ） */

 #clearBtn {
   border: none;
   background: none;
   cursor: pointer;
   display: none;
 }

 #clearBtn img {
   width: 2rem;
 }

 /* 検索結果を表示したときに、検索バーの影を消す */

 body:has(#articleList.show) #searchContainer {
   box-shadow: none;
 }

 /* 検索結果 */

 #articleList {
   position: fixed;
   bottom: 50px;
   left: 0;
   right: 0;
   background: #ffffff;
   border: 2px solid #b7a077;
   padding: 1rem;
   transform: translateY(100%);
   transition: transform .3s ease;
   z-index: 700;
 }

 #articleList.show {
   transform: translateY(0);
   box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.3);
   border-bottom: none;
 }

 #articleList li {
   list-style: none;
   text-indent: -1.5rem;
   padding-left: 1.5rem;
   margin-left: 1rem;
 }

 /* カテゴリー */

 .categoryName {
   font-weight: bold;
   color: #333;
 }

 /* 記事 */

 #articleList .articleItem {
   margin-left: 2rem;
 }

 /* ページ送り */

 #articleList .pager {
   margin-left: 0;
 }

 .pager {
   text-align: center;
   margin-top: .5rem;
 }

 .pager button {
   padding: 4px 10px;
   margin: 4px;
   cursor: pointer;
 }


 /* PC向けCSS 601px以上 */

 @media screen and (min-width: 601px) {

   #searchContainer,
   #articleList {
     width: 950px;
     margin: 0 auto;
   }
 }