/* ========== Item List ========== */
#kf-itemlist {
  padding: clamp(40px, 6vw, 80px) 0;
  background: var(--kf-bg, #faf8f6);
}

.kf-itemlist__title {
  text-align: center;
  font-size: clamp(24px, 2.8vw, 36px);
  margin-bottom: .5em;
}

.kf-itemlist__lead {
  text-align: center;
  color: #555;
  line-height: 1.9;
  margin-bottom: 3rem;
}

.kf-itemgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 10px);
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1080px;
}

.kf-item {
  background: #fff;
  border: 1px solid var(--kf-line, #e8e4dd);
  transition: transform .2s ease, box-shadow .2s ease;
}

.kf-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.kf-item a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding-bottom: 1.5rem;
}

.kf-item__img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.kf-item__name {
  font-size: 1.1rem;
  text-align: center;
  margin: 1rem 0 .4rem;
  letter-spacing: .02em;
}

.kf-item__desc {
  text-align: center;
  font-size: .9rem;
  line-height: 1.6;
  color: #666;
    padding: 10px;
}
/* CTA：常時表示（スマホ/PC共通） */
.kf-item__cta{
  display: flex;               /* ← 横幅をもたせる場合はこちら */
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  line-height: 1;
  padding: .7em 1.1em;
  border: 1px solid var(--kf-line,#e8e4dd);
  border-radius: 999px;
  background: #660000;
  color: #fff;
  width: 80%;
  max-width: 220px;
  margin: 1rem auto 0;         /* ← これだけで中央揃え */
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.kf-item__cta::after{
  content: "›";
  margin-left: .3em;
  transform: translateY(-1px);
}

/* ホバー時は“少しだけ”強調（非表示にはしない） */
/* CTAの位置を固定（左ズレ防止） */
.kf-item__cta{
  position: static;     /* ← 相対配置を解除 */
  left: auto;           /* ← 念のためリセット */
  transform: none;      /* ← いったんゼロに */
}

/* ホバー時は“縦だけ”ふわっと（横は動かさない） */
.kf-item__cta:hover{
  transform: translateY(-2px);  /* ← Xは触らない */
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* 親カードのホバーで反応させたい場合も、Yだけに限定 */
.kf-item:hover .kf-item__cta{
  transform: translateY(-2px);  /* ← translateXは絶対入れない */
}

/* キーボード操作でも見やすく */
.kf-item a:focus-visible .kf-item__cta{
  outline: 2px solid #aaa;
  outline-offset: 3px;
}

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