@charset "UTF-8";

/* =========================================================
   事例紹介ページ（導入事例 一覧トップ）専用スタイル
   共通トークン・部品は common.css を利用。
   ========================================================= */

.case-article {
  position: relative;
  line-height: 1.5;
}

.case-article__content {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 2.5rem;
  padding: 2.5rem 0 0;
}

.case-article__content > * {
  inline-size: min(94.6666666667%, 65rem);
  margin-inline: auto;
}

.case-article__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5rem 0;
}

/* --- リード文 --- */
.case-article__lead {
  inline-size: min(94.6666666667%, 50rem);
  text-align: center;
  font-size: .9375rem;
  font-weight: var(--sys-font-weight-medium);
  line-height: 2;
  letter-spacing: .02rem;
}

/* --- フィルターバー（静的 UI） --- */
.case-filter {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: .75rem;
  background-color: #fff;
}

/* 絞り込み操作部（セレクト＋検索欄）。行/列のレイアウトはこちらで制御。 */
.case-filter__controls {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}

/* 検索条件クリア（右下・下線付きテキストボタン） */
.case-filter__bottom {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}

.case-filter__reset {
  --_underline-color: currentcolor;
  display: inline-block;
  position: relative;
  padding: 0;
  border: none;
  background-color: transparent;
  color: currentcolor;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.75;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

.case-filter__reset::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--_underline-color);
}

.case-filter__select {
  --_chevron: 1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid rgb(var(--sys-rgb-text) / 40%);
}

.case-filter__select > select {
  flex: 1 1 auto;
  /* 標準の矢印を消し、独自の --chevron-down アイコンのみを見せる
     （右の padding 1.5rem がアイコンの表示領域） */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5rem 1.5rem .5rem .25rem;
  border: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
  cursor: pointer;
}

.case-filter__select > .c-svg-icon {
  position: absolute;
  inset-inline-end: 0;
  pointer-events: none;
  --svg-icon-size: var(--_chevron);
  --svg-icon-fg: var(--sys-hex-primary);
}

.case-filter__search {
  display: inline-flex;
  /* input を箱の高さいっぱいに伸ばすため stretch。上下パディングは input 側へ移す。 */
  align-items: stretch;
  column-gap: .5rem;
  padding-inline: 1rem 0;
  padding-block: 0;
  border: 1px solid #E5EBF3;
  border-radius: .5rem;
  background-color: #fff;
  --svg-icon-size: 1.125rem;
  --svg-icon-fg: rgb(var(--sys-rgb-text) / 40%);
}

/* アイコンは伸ばさず中央に固定 */
.case-filter__search > .c-svg-icon {
  align-self: center;
}

.case-filter__search > input[type="search"] {
  flex: 1 1 auto;
  min-inline-size: 0;
  /* 箱の高さいっぱいをクリック/入力領域にするため、上下パディングを input が負担 */
  padding-block: .5rem;
  border: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.case-filter__search > input[type="search"]::placeholder {
  color: rgb(var(--sys-rgb-text) / 40%);
  opacity: 1;
}

/* common.css に虫眼鏡アイコンが無い場合のフォールバック（インライン SVG マスク） */
.c-svg-icon.--search::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* --- カードグリッド --- */
.case-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

/* 絞り込み結果 0 件時のメッセージ（グリッド全幅・中央） */
.case-list__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 0;
  color: rgb(var(--sys-rgb-text) / 60%);
}

.p-case-card {
  --_shadow: 0 2px 12px rgba(0, 0, 0, .08);
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  border-radius: .5rem;
  background-color: #fff;
  box-shadow: var(--_shadow);
  transition: box-shadow .2s ease-out, transform .2s ease-out;
}

.p-case-card__thumb {
  /* 画像は 501×141 のバナー比率。読み込み前はグレーのプレースホルダー背景を表示。 */
  display: block;
  aspect-ratio: 501 / 141;
  background-color: #E5EBF3;
  background-image: linear-gradient(135deg, #EEF1F6 0%, #DCE3ED 100%);
}

.p-case-card__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.p-case-card__body {
  display: flex;
  flex-flow: column nowrap;
  row-gap: .5rem;
  padding: 1rem 1.25rem 1.25rem;
}

.p-case-card__category {
  align-self: flex-start;
  padding: .25rem .75rem;
  border-radius: .25rem;
  background-color: var(--sys-hex-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
}

.p-case-card__product {
  color: var(--sys-hex-primary);
  font-size: .875rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
  letter-spacing: .02rem;
}

.p-case-card__title {
  font-size: 1.0625rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
}

.p-case-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: rgb(var(--sys-rgb-text) / 60%);
  font-size: .8125rem;
  font-weight: var(--sys-font-weight-regular);
  line-height: 1.75;
}

.p-case-card__more {
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
  margin-top: .5rem;
  color: var(--sys-hex-primary);
  font-size: .875rem;
  font-weight: var(--sys-font-weight-bold);
  line-height: 1.5;
  --svg-icon-size: .875rem;
  --svg-icon-fg: var(--sys-hex-primary);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (min-width: 768px) {
  .case-article__content {
    row-gap: 3rem;
    padding: 3.5rem 0 0;
  }

  .case-article__bottom {
    padding: 7.5rem 0 6.25rem;
  }

  .case-filter {
    padding: 1.5rem 2rem;
  }

  .case-filter__controls {
    flex-flow: row nowrap;
    align-items: center;
    gap: 1.5rem;
  }

  .case-filter__select {
    flex: 0 1 12rem;
  }

  .case-filter__search {
    flex: 1 1 auto;
    margin-inline-start: auto;
  }

  .case-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .case-article__content {
    row-gap: 4rem;
    padding: 5rem 0 0;
  }

  /* PC ではリード文を一段大きく（.9375rem → 1.0625rem） */
  .case-article__lead {
    font-size: 1.0625rem;
  }

  .case-filter {
    border-radius: 1rem;
    padding: 1.75rem 2.5rem;
  }

  .case-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 1.5rem;
  }

  .p-case-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
  }
}

@media (any-hover: hover) {
  .p-case-card:is(a):hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    transform: translateY(-2px);
  }

  .p-case-card__more:is(:hover, :is(a:hover) *) {
    text-decoration: underline;
  }
}