.block-hof {
  --hof-accent: #c9a45c;          /* 黒地上のゴールド（見出しアイコン・英字） */
  --hof-accent-dark: #a8863d;     /* 白地上のゴールド（バッジ・タグ） */
  --hof-frame: #111111;           /* 帯の枠線・見出しブロック */
  --hof-card-line: #e3ddd0;
  --hof-text: #111111;
  --hof-text-sub: #4a4a4a;
  --hof-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  box-sizing: border-box;
  margin: 0 0 73px;               /* 上：人気のキーワード側の余白（約91px）のみ。下：見た目を上と同じ約91pxに揃える（ランキング見出し上の余白 約18px 分を差し引いた値） */
  color: var(--hof-text);
}
.block-hof *,
.block-hof *::before,
.block-hof *::after { box-sizing: border-box; }

.block-hof--inner {
  max-width: 1200px;              /* .block-top-airecommend-ranking 内のコンテンツ幅に合わせる */
  margin: 0 auto;
  padding: 0;
}

/* ---- 帯（1段グリッド） ---- */
.block-hof--item {
  display: grid;
  grid-template-columns: 240px auto minmax(260px, 1fr) 500px;   /* 右列は固定幅：選択中サイズ名の長さで列幅が変わり左右に揺れるのを防ぐ */
  align-items: center;
  border: 1px solid var(--hof-frame);
  background: #ffffff;
}

/* 見出しブロック（黒） */
.block-hof--head {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 20px;
  background: var(--hof-frame);
  color: #ffffff;
}
.block-hof--head-icon {
  width: 22px;
  height: 22px;
  color: var(--hof-accent);
  margin-bottom: 2px;
}
.block-hof--head-en {
  margin: 0;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--hof-accent);
}
.block-hof--title {
  margin: 0;
  font-family: var(--hof-font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
}
.block-hof--lead {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: #d9d9d9;
}

/* 画像（サイズ共通） */
.block-hof--image {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  margin-left: 16px;              /* 見出しブロックとの間隔 */
  overflow: hidden;
  background: #efece6;
}
.block-hof--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-hof--badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.block-hof--badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 60px solid var(--hof-accent-dark);
  border-right: 60px solid transparent;
}
.block-hof--badge-inner {
  position: absolute;
  top: 7px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.block-hof--badge-inner svg { width: 13px; height: 13px; }

/* 商品情報 */
.block-hof--info {
  min-width: 0;
  padding: 0 20px;
}
.block-hof--labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px;
  padding: 0;
  list-style: none;
}
.block-hof--labels li {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 2px;
}
.block-hof--label-rank   { font-weight: 400; color: var(--hof-accent-dark); border: 1px solid var(--hof-accent-dark); }
.block-hof--label-free   { background: #c0392b; color: #ffffff; }
.block-hof--labels li.block-hof--label-frozen { height: 18px; padding: 0;}
.block-hof--label-frozen img { height: 100%;}
.block-hof--label-wester { border: 1px solid #333333; color: #333333; }

.block-hof--name {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.block-hof--name a { color: inherit; text-decoration: none; }
.block-hof--name a:hover { text-decoration: underline; }
.block-hof--shop {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: #333333;
}
.block-hof--pref {
  display: inline-block;
  background: #111111;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 5px;
}

/* サイズ選択・価格 */
.block-hof--select {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 12px 0;
}
.block-hof--size-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-hof--size-label {
  margin: 0;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}
.block-hof--size-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-hof--size-btn {
  min-width: 92px;
  height: 40px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #ffffff;
  color: var(--hof-text);
  border: 1px solid #bdb7aa;
  border-radius: 4px;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.block-hof--size-btn:hover { border-color: #111111; }
.block-hof--size-btn[aria-checked="true"] {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}
.block-hof--size-btn b { font-size: 13px; font-weight: 700; }
.block-hof--size-btn span { font-size: 9px; }

.block-hof--foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.block-hof--price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.block-hof--price {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.block-hof--price small {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 400;
}
.block-hof--price.is-unknown { font-size: 12px; font-weight: 400; color: #666666; line-height: 1.4; white-space: normal; }
.block-hof--price.is-unknown small { display: none; }
.block-hof--price.is-unknown + .block-hof--size-current { display: none; }
.block-hof--size-current {
  font-size: 11px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block-hof--btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 36px;
  flex-shrink: 0;
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
}
.block-hof--btn:hover { opacity: .85; color: #ffffff; text-decoration: unset; }

/* =========================================================
   SP（767px以下）
   ========================================================= */
@media (max-width: 767px) {
  .block-hof { margin: 24px 0 21px; }   /* 下：見た目の余白を上（人気のキーワードのタグとの間 約59px）に揃える。ランキング見出し上の余白 約38px 分を差し引いた値 */
  .block-hof--inner { padding: 0 16px; }

  .block-hof--item {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    padding: 0 10px 10px;
  }

  /* 見出しは上部の黒バーに */
  .block-hof--head {
    grid-column: 1 / -1;
    margin: 0 -10px 2px;             /* 帯の左右いっぱいに */
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;
  }
  .block-hof--labels li.block-hof--label-frozen { height: 17px; padding: 0;}
  .block-hof--head-icon { width: 18px; height: 18px; margin: 0; grid-row: 1; }
  .block-hof--head-en { display: none; }
  .block-hof--title { font-size: 16px; line-height: 1.2; }
  .block-hof--lead { grid-column: 1 / -1; margin: 0; font-size: 10px; line-height: 1.4; }

  .block-hof--image { width: 88px; height: 88px; margin-left: 0; }
  .block-hof--badge { width: 44px; height: 44px; font-size: 8px; }
  .block-hof--badge::before { border-top-width: 44px; border-right-width: 44px; }
  .block-hof--badge-inner { top: 4px; left: 3px; gap: 1px; }
  .block-hof--badge-inner svg { width: 10px; height: 10px; }

  .block-hof--info { padding: 0; }
  .block-hof--labels { gap: 4px; margin-bottom: 5px; }
  .block-hof--labels li { font-size: 9px; padding: 3px 5px; }
  .block-hof--labels .block-hof--label-rank { display: none; }   /* SPでは「前月上位」タグを省略 */
  .block-hof--name { margin-bottom: 5px; font-size: 14px; }
  .block-hof--shop { font-size: 11px; }
  .block-hof--pref { font-size: 9px; padding: 3px 4px; }

  .block-hof--select {
    grid-column: 1 / -1;
    gap: 6px;
    padding: 0;
  }
  .block-hof--size-label { display: none; }        /* SPではラベル省略（選択中は価格横に表示） */
  .block-hof--size-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .block-hof--size-list li { min-width: 0; }
  .block-hof--size-btn {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 6px;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .block-hof--size-btn span { font-size: 10px; }

  .block-hof--foot { gap: 10px; }
  .block-hof--price-wrap { flex-direction: column; align-items: flex-start; gap: 2px; }
  .block-hof--price { font-size: 18px; }
  .block-hof--price.is-unknown { font-size: 11px; }
  .block-hof--size-current { font-size: 10px; }
  .block-hof--btn { width: 156px; height: 36px; font-size: 11px; }
}