/* ==========================================================================
   page-top.css — トップページ固有スタイル
   共通コンポーネント（fab-cta / faq__a / hd__btn パルス）は common.css へ移動済み
   ========================================================================== */

/* 買取価格目安テーブル — 右寄せヘッダー */
.top-price__align-right { text-align: right; }

/* フローセクション — テキスト中央寄せ */
.top-flow__sub { margin-left: auto; margin-right: auto; }

/* ══════ E: カテゴリグリッド hover演出強化 ══════ */
.cat__item {
  transition: transform 0.28s var(--easing), box-shadow 0.28s var(--easing), background 0.28s var(--easing);
}
.cat__item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 32px rgba(13,13,13,0.18);
  background: var(--ink);
}
.cat__char {
  transition: transform 0.32s var(--easing), color 0.28s var(--easing);
}
.cat__item:hover .cat__char {
  transform: scale(1.12);
  color: var(--moss-l);
}

/* ══════ F: お客様の声 スター評価 ══════ */
.voice__stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-sm);
}
.voice__star {
  color: #c8a84b;
  font-size: 18px;
  line-height: 1;
}

/* ══════ TRUST セクション カウントアップ演出 ══════ */
.trust__num {
  transition: transform 0.3s var(--easing);
}
.trust__item:hover .trust__num {
  transform: scale(1.06);
}

/* ══════ PROBLEM カード hover ══════ */
.problem__card {
  transition: transform 0.28s var(--easing), box-shadow 0.28s var(--easing);
}
.problem__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(13,13,13,0.1);
}

/* ══════ REASONS カード hover ══════ */
.reasons__item {
  transition: transform 0.28s var(--easing), box-shadow 0.28s var(--easing);
}
.reasons__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(13,13,13,0.1);
}

/* ══════ FLOW ステップ hover ══════ */
.flow__step {
  transition: transform 0.24s var(--easing);
}
.flow__step:hover {
  transform: translateY(-4px);
}
.flow__circle {
  transition: background 0.28s var(--easing), color 0.28s var(--easing), transform 0.28s var(--easing);
}
.flow__step:hover .flow__circle {
  transform: scale(1.1);
}

/* ══════ A: ヒーローCTA 2ボタン レイアウト ══════ */
.hero__cta-note {
  font-family: var(--shippori);
  font-size: 14px;
  color: var(--mist);
  letter-spacing: 0.06em;
  margin-top: 10px;
}

/* ══════ C: カテゴリアイテム バッジ ══════ */
.cat__item { position: relative; overflow: hidden; }
.cat__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--vermillion);
  color: var(--white);
  font-family: var(--shippori);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  line-height: 1.4;
  pointer-events: none;
}
.cat__badge--popular { background: var(--moss); }

/* priceテーブル 高価買取行ハイライト */
.price__row--highlight {
  background: rgba(180, 60, 40, 0.04);
  border-left: 3px solid var(--vermillion);
}

/* ══════ RECENT セクション ══════ */
.recent {
  padding: var(--space-3xl) var(--section-pad-x);
  background: var(--paper-d);
}
.recent__head {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.recent__head .section-sub { margin-left: auto; margin-right: auto; }
.recent__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  max-width: var(--container-lg);
  margin: 0 auto var(--space-md);
}
.recent__card {
  background: var(--paper-w);
  border: 1px solid var(--line);
  border-top: 3px solid var(--moss);
  padding: var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform 0.26s var(--easing), box-shadow 0.26s var(--easing);
}
.recent__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(13,13,13,0.1);
}
.recent__icon {
  font-family: var(--yuji);
  font-size: 2.4rem;
  color: var(--moss);
  line-height: 1;
}
.recent__body { display: flex; flex-direction: column; gap: 6px; }
.recent__cat {
  font-family: var(--shippori);
  font-size: var(--fs-xs);
  color: var(--mist);
  letter-spacing: 0.1em;
}
.recent__name {
  font-family: var(--shippori);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-deep);
  line-height: 1.6;
}
.recent__point {
  font-family: var(--shippori);
  font-size: 14px;
  color: var(--mist);
  line-height: 1.7;
}
.recent__price {
  font-family: var(--shippori);
  font-size: var(--fs-caption);
  color: var(--ink);
  margin-top: 4px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.recent__price strong {
  font-family: var(--garamond);
  font-size: var(--fs-ui);
  color: var(--vermillion);
  font-weight: 500;
}
.recent__note {
  text-align: center;
  font-family: var(--shippori);
  font-size: 14px;
  color: var(--mist);
  max-width: var(--container-lg);
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .recent__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .recent { padding: var(--space-2xl) var(--section-pad-x-mobile); }
  .recent__grid { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* hero__poem → components.css に定義済み */