/****************
 共通パーツ
******************/
.pagination > .current > a {
  color: var(--FS_text_bluegray_sub);
  text-decoration: none!important;
}
.page-numbers.dots {
  line-height: 1;
  vertical-align: -6px;
}

/****************
 アニメーション 
******************/
/* 初期状態は非表示 */
.fade-up {
  animation: fadeUp 0.5s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/****************
 絞り込みタグ一覧
******************/
.narrow-down-wrap {
  margin-top: 4px;
}
.narrow-down-inner {
  display: grid;
  grid-template-columns: 126px 1fr 92px;
  grid-template-areas: "narrow-down-category narrow-down-contents narrow-down-toggle";
  gap: 20px;
  padding: 16px 10px 0 0;
  max-height: calc((2em * 2) + 26px); 
  overflow: hidden;
}
.narrow-down-inner + .narrow-down-inner {
  border-top: 1px solid var(--FS_Bg_gray_3);
  margin-top: 14px;
}
.narrow-down-inner:first-child {
  border-top: 1px solid var(--FS_Bg_gray_3);
}
.case-sp-line {
  display: none;
}
.narrow-down-category {
  grid-area: narrow-down-category;
}
.narrow-down-contents {
  grid-area: narrow-down-contents;
}
.narrow-down-toggle {
  grid-area: narrow-down-toggle;
}
.narrow-down-category > span {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--FS_text_bluegray);
}
.narrow-down-toggle > button {
  position: relative;
  display: flex;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--FS_primary);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}
.narrow-down-toggle > button::after,
.narrow-down-toggle > button::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  width: 11px;
  height: 2px;
  flex-shrink: 0;
  background-color: var(--FS_primary);
  transition: transform .3s ease, background-image .3s ease .15s;
  transform-origin: center;
}
.narrow-down-toggle > button::after {
  transform: translateY(-50%) rotate(-90deg);
}
.narrow-down-toggle > button::before {
  transform: translateY(-50%);
}
.narrow-down-toggle > button.is-active::after {
  transform: translateY(-50%) rotate(0deg);
}
.narrow-down-toggle > button:focus-visible {
  outline: 2px solid var(--FS_primary);
  outline-offset: -2px;
  background: var(--FS_Bg_lightblue);
  z-index: 1;
}
.narrow-down-toggle > button:focus:not(:focus-visible) {
  outline: none;
}
.narrow-down-inner:has(.narrow-down-toggle > button.is-active) {
  max-height: var(--content-height); 
}
/* 選択解除ボタン */
.clear-filters-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: var(--White);
  background-color: var(--FS_primary);
  padding: 3px 10px 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--FS_primary);
  cursor: pointer;
  transition: all .3s;
}
.clear-filters-button:hover {
  color: var(--FS_primary);
  background-color: var(--White);
}
.clear-filters-button:focus-visible {
  outline: 2px solid var(--FS_primary);
  background: var(--White);
  color: var(--FS_primary);
  outline-offset: -2px;
}

/* 記事がない場合 */
.article-no-data {
  margin-bottom: 100px;
}

.show-more-button {
  margin-bottom: 100px;
}
/******************
 レスポンシブ
******************/
@media screen and (max-width: 979px){
  .narrow-down-wrap {
    margin-top: 10px;
  }
  .narrow-down-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
    "narrow-down-category . narrow-down-toggle"
    "narrow-down-contents narrow-down-contents narrow-down-contents"
    ;
    row-gap: 8px;
    padding-right: 0;
    max-height: calc((3em * 2) + 30px);
  }
  .case-sp-line {
    display: block;
    padding-top: 14px;
    border-bottom: 1px solid var(--FS_Bg_gray_3);
  }
  .narrow-down-category > span {
    font-size: 1.4rem;
  }
  .narrow-down-toggle {
    margin-right: 20px;
  }
}