/**
 * 記事絞り込みパネル（c-filterPanel）・汎用カード一覧（c-archiveCard）
 * 任意のテンプレートで利用可（フロント共通で enqueue）
 */
:root {
  --color-primary: #deba81;
  --color-white: #fff;
  --font-family: "Noto Sans JP", sans-serif;
  --font-family-zen: "Zen Maru Gothic", sans-serif;
  --font-family-roboto: "Roboto", sans-serif;
}

/* サイト共通: 行間・本文色（components 単体でも styles と揃える） */


.c-filterPanel {
  background-color: #fcfaf2;
  border-radius: 0;
  margin-bottom: 32px;
  line-height: 1.5;
  inline-size: min(100%, 1262px);
  margin-inline: auto;
  padding-inline: 16px;
}

.c-filterPanel__inner {
  padding: 24px 16px 28px;
}

@media screen and (min-width: 768px) {
  .c-filterPanel__inner {
    padding: 40px 54px;
  }
}

.c-filterPanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.c-filterPanel__titleBtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #222222;
  text-align: left;
}

.c-filterPanel__close {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #deba81;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 5px;
}

.c-filterPanel__close::before,
.c-filterPanel__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #deba81;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.c-filterPanel__close::before {
  width: 10px;
  height: 2px;
}

.c-filterPanel__close::after {
  width: 2px;
  height: 10px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.c-filterPanel:not(.is-collapsed) .c-filterPanel__close::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.c-filterPanel__close:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .c-filterPanel__close::after {
    transition: none;
  }
}

.c-filterPanel__rule {
  border: 0;
  border-top: 1px solid #deba81;
  margin-block-start: 24px;
  margin-block-end: 24px;
}

.c-filterPanel__body {
  overflow: hidden;
  max-height: 2400px;
  opacity: 1;
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.c-filterPanel.is-collapsed .c-filterPanel__body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.c-filterPanel__body[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .c-filterPanel__body {
    transition: none;
  }
}

.c-filterPanel__section {
  margin-bottom: 20px;
}

.c-filterPanel__label {
  margin: 0 0 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #222222;
}


.c-filterPanel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;

}

.c-filterPanel__chips--months {
  margin-bottom: 10px;
}

.c-filterPanel__chips--months:last-child {
  margin-bottom: 0;
}

.c-filterPanel__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 16px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: 0.08em;
  color: #be975a;
}

.c-filterPanel__chipInput {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

.c-filterPanel__chipFace {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #be975a;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}

.c-filterPanel__chipInput:checked + .c-filterPanel__chipFace {
  background: #be975a;
  border-color: #be975a;
  box-shadow: inset 0 0 0 2px #fff;
}

.c-filterPanel__chipInput:focus-visible + .c-filterPanel__chipFace {
  outline: 2px solid #222222;
  outline-offset: 2px;
}

.c-filterPanel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.c-filterPanel__chipText {
  color: #be975a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--font-family-zen);
}

.c-filterPanel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 32px;
  border-radius: 30px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid transparent;
}

.c-filterPanel__btn--ghost {
  background: #ffffff;
  border-color: #deba81;
  color: #be975a;
}

.c-filterPanel__btn--primary {
  background: #be975a;
  border-color: #be975a;
  color: #ffffff;
}

.c-filterPanel__note {
  margin: 24px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #222222;
}

.c-archiveResults__count {
  margin: 24px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #222222;
}

.c-archiveResults__empty {
  margin: 32px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #222222;
}

.c-archiveCardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 64px;
  column-gap: 32px;
  margin-top: 32px;
  list-style: none;
  padding: 0;
}

@media screen and (max-width: 1100px) {
  .c-archiveCardGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .c-archiveCardGrid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 24px;
  }
}

.c-archiveCardGrid__cell {
  min-width: 0;
}

.c-archiveCard {
  margin: 0;
  height: 100%;
}

.c-archiveCard__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.c-archiveCard__link:hover {
  opacity: 0.92;
}

.c-archiveCard__areaBar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width:180px;
  box-sizing: border-box;
  padding: 10px 16px;
  background: #deba81;
  border-radius: 16px 16px 0 0;
  inline-size: fit-content;
}

.c-archiveCard__areaText {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-align: center;
}

/* Figma card 470:1176: 画像下〜本文まで column gap 24px、本文内 date/title/body gap 16px */
.c-archiveCard__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #ffffff;
  padding: 0 0 20px;
}

.c-archiveCard__media {
  margin: 0;
  overflow: hidden;
  background: #848282;
  /* Mask の Rectangle: TL 0 / TR・BR・BL 16px */
  border-radius: 0 16px 16px 16px;
}

.c-archiveCard__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 416 / 234;
  object-fit: cover;
  border-radius: 0 16px 16px 16px;
}

.c-archiveCard__img--placeholder {
  min-height: 180px;
  aspect-ratio: 416 / 234;
  background: #848282;
  border-radius: 0 16px 16px 16px;
}

.c-archiveCard__text {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* flex 内で -webkit-line-clamp が効かない／幅0になるのを防ぐ */
}

.c-archiveCard__date {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #222222;
}

.c-archiveCard__title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #222222;
  min-width: 0;
  /* 最大1行で末尾 … */
  height: 1.4em; /* line-height 1.4 の1行分 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Figma 本文テキスト枠: 高さ 60px（18px / 行間1.4 の2行＋余白）・最大2行で末尾省略 */
.c-archiveCard__excerpt {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #222222;
  min-width: 0;
  height: 3.333em; /* 60px @ 18px */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* サイト内検索: 説明文は最大3行で … 省略 */
.search .c-archiveCard__excerpt {
  height: 4.2em;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.c-archiveCard__link[role="button"] {
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.c-archiveCard__link[role="button"]:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .c-filterPanel__titleBtn {
    font-size: 20px;
  }

  .c-archiveCard__title {
    font-size: 20px;
    height: 1.4em; /* 1行分 */
  }

  .c-archiveCard__date,
  .c-archiveCard__excerpt {
    font-size: 16px;
  }

  .c-archiveCard__excerpt {
    height: 3.75em; /* 60px 相当を 16px ベースで維持 */
  }

  .search .c-archiveCard__excerpt {
    height: 4.2em;
  }
}
@media screen and (min-width: 768px) {
  .c-search {
    margin-block-start: 84px;
  }
}
.c-search {
  margin-block-start: 40px;
}

/* 観るアーカイブ: カード下のページネーション（Figma 503:3951） */
.tab-area--tourizmRenewal .pagination {
  margin-top: 64px;
  margin-left: 0;
  gap: 14px;
}

.tab-area--tourizmRenewal .pagination__link {
  margin: 0;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #deba81;
  background-color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #be975a;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.tab-area--tourizmRenewal .pagination__link:hover {
  opacity: 0.85;
}

.tab-area--tourizmRenewal .pagination__link.pagination__link--nowPage {
  pointer-events: none;
  color: #fff;
  background-color: #deba81;
  border-color: #deba81;
}

.tab-area--tourizmRenewal .pagination__link.pagination__link--prev,
.tab-area--tourizmRenewal .pagination__link.pagination__link--next {
  position: relative;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  background-color: #deba81;
  border-color: #deba81;
}

.tab-area--tourizmRenewal .pagination__link.pagination__link--prev::before,
.tab-area--tourizmRenewal .pagination__link.pagination__link--next::before {
  text-indent: 0;
  border-right-color: #fff;
  border-bottom-color: #fff;
}

@media screen and (max-width: 767px) {
  .tab-area--tourizmRenewal .pagination {
    margin-top: 48px;
  }

  .tab-area--tourizmRenewal .pagination__link {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}