@charset "UTF-8";
/*
 * ハローブック：トップページ専用のスタイル（2026-10-06 改修／v4：説明とボタンを品目の帯の下へ、PC 12件）
 * 読み込み：functions.php（トップページだけ）
 * 既存の style.css より後に効くよう、すべて .hb-top の内側に限定して書いている
 * 画面幅の区切りは style.css と同じ（スマホ 〜480px／タブレット 481〜1024px／PC 1025px〜）
 */

/* ---------- 1. キャッチ（直下に買取実績） ---------- */
.hb-top .page-top__eyecatch {
  padding: 48px 16px 0;
  margin-bottom: 44px;
}
.hb-top .page-top__eyecatch__copy {
  padding: 24px 48px;
  margin-bottom: 0;
}
.hb-top .page-top__eyecatch__copy__body {
  font-size: 115%;
  line-height: 2;
}
.hb-top-hero__lead {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
}
.hb-top-hero__points {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 13px;
}
.hb-top-hero__points li {
  position: relative;
  padding-left: 18px;
}
.hb-top-hero__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 9px;
  height: 5px;
  border-left: 3px solid #B88A00;
  border-bottom: 3px solid #B88A00;
  transform: rotate(-45deg);
}
.hb-top-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}
.hb-top-hero__tel,
.hb-top-hero__apply {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px 20px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
}
.hb-top-hero__tel {
  background-color: #FFD500;
  color: #222;
}
.hb-top-hero__tel-number {
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.hb-top-hero__tel-note {
  font-size: 11px;
  font-weight: normal;
}
.hb-top-hero__apply {
  background-color: #333;
  color: #fff;
  font-size: 15px;
}
.hb-top-hero__tel:hover,
.hb-top-hero__apply:hover {
  opacity: 0.85;
  text-decoration: none;
}
.hb-top-hero__tel:hover { color: #222; }
.hb-top-hero__apply:hover { color: #fff; }

/* キャッチ直下の安心材料3点（お問い合わせブロックと同じチェック付きの形） */
.hb-top .hb-top-badges {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: bold;
}

/* ---------- 共通：セクションの見出し ---------- */
.hb-top .hb-top-section-title {
  display: table;
  margin: 0 auto 20px;
  padding-bottom: 6px;
  border-bottom: 4px solid #FFD500;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* ---------- 2. 最近の買取実績 ---------- */
.hb-top .hb-top-works {
  max-width: 1100px;
  padding: 0 12px;
  margin: 0 auto 40px;
  box-sizing: border-box;
}
.hb-top-works__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hb-top-works .page-top__works__box {
  width: auto;
  margin: 0;
}
.hb-top-works .works__box__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hb-top-works .works__box__title a {
  font-size: 100%;
  line-height: 1.5;
}
.hb-top-works__more {
  margin: 24px 0 0;
  text-align: center;
}
.hb-top-works__more a {
  display: inline-block;
  padding: 12px 32px;
  border: 2px solid #333;
  border-radius: 999px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.hb-top-works__more a:hover {
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

/* ---------- 3. 品目から探す ---------- */
.hb-top-cats {
  padding: 28px 16px;
  margin-bottom: 30px;
  background-color: #FFF9D6;
}
.hb-top-cats__list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hb-top-cats__list a {
  display: block;
  padding: 8px 16px;
  border: 1px solid #D6CFA8;
  border-radius: 999px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
}
.hb-top-cats__list a:hover {
  border-color: #B88A00;
  text-decoration: none;
}

/* ---------- 4. 事業の説明・安心材料・ボタン（品目の帯の下。上下にゆったり余白） ---------- */
.hb-top-contact {
  padding: 48px 16px 56px;
  margin-bottom: 20px;
  text-align: center;
}

/* ---------- 6. お知らせ ---------- */
.hb-top .hb-top-news {
  margin-top: 10px;
}

/* ---------- スマホ（〜480px） ---------- */
@media (max-width: 480px) {
  .hb-top .page-top__eyecatch {
    padding-top: 36px;
    margin-bottom: 36px;
  }
  .hb-top .page-top__eyecatch__copy {
    padding: 20px 28px;
  }
  .hb-top .page-top__eyecatch__copy__body {
    font-size: 112%;
  }
  .hb-top-hero__points {
    font-size: 12px;
    gap: 4px 12px;
  }
  .hb-top .hb-top-badges {
    margin-top: 16px;
    font-size: 13px;
  }
  /* スマホは6件（2列×3段）。7件目以降は隠す */
  .hb-top-works__grid > .page-top__works__box:nth-child(n+7) {
    display: none;
  }
  .hb-top-contact {
    padding: 36px 16px 40px;
  }
  /* 2列だとタグが折り返して縦に伸びるので、品目タグは1つだけ */
  .hb-top-works .works__box__category:nth-child(n+2) {
    display: none;
  }
  .hb-top-works .works__box__title a {
    font-size: 13px;
  }
  .hb-top-works__more a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
  }
  .hb-top-cats__list a {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ---------- 481px〜：PCは改行を戻す ---------- */
@media (min-width: 481px) {
  .hb-only-sp { display: none; }
  .hb-top-hero__lead { font-size: 17px; }
  .hb-top-hero__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .hb-top-hero__tel,
  .hb-top-hero__apply {
    min-width: 280px;
    min-height: 58px;
  }
  .hb-top .page-top__eyecatch__copy__body { font-size: 135%; }
  .hb-top .hb-top-section-title { font-size: 20px; }
}

/* ---------- 768px〜：3列（タブレットは12件＝3列×4段） ---------- */
@media (min-width: 768px) {
  .hb-top-works__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .hb-top-works .works__box__title a { font-size: 110%; }
}

/* ---------- PC（1025px〜）：4列×3段＝12件 ---------- */
@media (min-width: 1025px) {
  .hb-top .page-top__eyecatch {
    padding-top: 72px;
    margin-bottom: 64px;
  }
  .hb-top .page-top__eyecatch__copy {
    padding: 36px 72px;
  }
  .hb-top-works__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hb-top-works .works__box__title a { font-size: 100%; }
  .hb-top-contact {
    padding: 72px 16px 80px;
  }
  .hb-top .page-top__eyecatch__copy__body { font-size: 155%; }
  .hb-top .hb-top-badges { margin-top: 24px; font-size: 15px; gap: 6px 28px; }
}