/* 角丸ラベルリンクリスト（青系枠線＆白背景） */
.kn-link-list.-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  margin: .75em 0 0;
  padding: 0;
  list-style: none;
}

.kn-link-list.-label > li {
  margin-top: 0 !important;
}

.kn-link-list.-label > li > a {
  display: inline-flex;
  align-items: center;
  padding: .4em .8em;
  border-radius: 9999px;
  border: 1px solid #547BDB; /* 枠線 */
  background-color: #fff;     /* 背景 */
  color: #547BDB;             /* 文字色 */
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
  width: fit-content;
  font-size: 1.0em; /* フォントサイズ */
}

/* hover/focus 時のアクセント */
.kn-link-list.-label > li > a:hover {
  background-color: #547BDB;  /* 塗りつぶし反転 */
  color: #fff;
}

.kn-link-list.-label > li > a:focus-visible {
  outline: 2px solid #547BDB;
  outline-offset: 2px;
}

/* スマホ時：3行まで折返し＋横スクロール＋下部スクロールバー */
@media (max-width: 767px) {
  .kn-link-list.-label{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    justify-content: start;
    gap: .5em;

    overflow-x: auto;     /* 横スクロール */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    padding: 0 0 10px;    /* ← 下部バーと重ならない余白（バー高+余白） */
    scrollbar-gutter: stable both-edges; /* 対応ブラウザでレイアウト安定 */
    position: relative;
  }
  .kn-link-list.-label > li{ 
    min-width: max-content;
  }
  .kn-link-list.-label > li > a {
    font-size: 0.85em; /* SP時はフォントサイズを縮小 */
  }

  /* ===== スクロールバーの見た目（WebKit系） ===== */
  .kn-link-list.-label::-webkit-scrollbar{
    height: 8px;                 /* 下部バーの高さ */
  }
  .kn-link-list.-label::-webkit-scrollbar-track{
    background: #eef1f6;         /* トラック色（任意） */
    border-radius: 9999px;
  }
  .kn-link-list.-label::-webkit-scrollbar-thumb{
    background: #c1c7d0;         /* つまみ色 */
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;/* つまみを細く見せる */
  }
  .kn-link-list.-label::-webkit-scrollbar-thumb:hover{
    background: #aab2bd;
  }

  /* ===== Firefox用 ===== */
  .kn-link-list.-label{
    scrollbar-width: thin;
    scrollbar-color: #c1c7d0 #eef1f6;
  }
}