@charset "UTF-8";
/* ==========================================================================
   info.css  ―  /info/ ページ専用スタイル
   既存フレームワーク（bootstrap / style / bamboo.css）に追記する形で読み込みます。

   [背景]
   style.css の .isotope-filters は、768px以上で li を display:block にし
   「縦積みのサイドバー用フィルター」として設計されている（他ページの
   サイドバー型カテゴリ一覧で使われている挙動）。
   /info/ ページでは「横並びのタブ」として使いたいため、.info-filter-bar
   というクラスを追加したフィルターにのみ、横並び表示を強制する。
   ========================================================================== */

.info-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

.info-filter-bar li,
.info-filter-bar li + li {
  display: inline-block !important;
  margin: 6px 8px !important;
}

.info-filter-bar li a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none !important;
}

.info-filter-bar li a.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
  text-decoration: none;
}

@media (min-width: 768px) {
  .info-filter-bar li {
    display: inline-block !important;
    margin-top: 6px !important;
  }
}

@media (min-width: 1600px) {
  .info-filter-bar li {
    margin-top: 6px !important;
  }
}

@media (max-width: 767px) {
  .info-filter-bar li a {
    font-size: 0.8rem;
    padding: 6px 14px;
  }
}