/*
Theme Name: BSノブロック非公式まとめサイト
Theme URI:
Description: BSノブロック非公式まとめサイト 独自テーマ
Author: heroherodan
Version: 1.0.36
*/

/*
 * Google Fonts
 * 本文・見出し: Zen Kaku Gothic New（ウェイトで強弱）
 * 仕舞ロゴSVG埋め込み用: Klee One / Yomogi
 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Klee+One:wght@600;700&family=Yomogi&display=swap');

/*
 * ================================================================
 *  TABLE OF CONTENTS — heroherodan-theme/style.css
 *  ブレークポイント: 560px (mobile) / 768px (tablet) / 900px (wide)
 *  分割ファイル:
 *    assets/css/front.css  ← front-page.php 専用
 *    assets/css/search.css ← search.php 専用
 * ================================================================
 *
 *  [BASE]
 *   L  16  CSS カスタムプロパティ（--hhd-* 変数）
 *   L  51  ベース上書き（最小限）
 *   L  66  共通コンポーネント（ボタン・タグ・チップ・グリッド・ページネーション）
 *   L 104  フォーカス可視（WCAG 2.2）
 *
 *  [CARDS]
 *   L 153  動画カード（.hhd-video-card）
 *   L 290  ゲストカード（.hhd-guest-card）
 *   L 347  商品カード（.hhd-product-card）
 *   L 502  店舗カード（.hhd-place-card）
 *   L 984  メニューカード（.hhd-menu-card）
 *
 *  [LAYOUT]
 *   L1134  サイトロゴ（.hhd-headlogo / .hhd-site-brand）
 *   L1259  モバイルドロワー（.hhd-mobile-menu）
 *   L1405  フッター（.hhd-footer）
 *   L4671  ヘッダー独自レイアウト（.hhd-global-nav）
 *   L4730  固定ページ（page.php / .hhd-page）
 *   L4791  フッター前検索 CTA（.hhd-pre-footer-search）
 *
 *  [LEGACY BASE — Phase 03 に上書きされた旧スタイル]
 *   L 544  動画詳細ページ（旧）
 *   L 621  guest_orders テーブル
 *   L 779  ゲスト詳細ページ（旧）
 *   L 811  メンバーページ（旧）
 *   L 827  一覧ページ base（旧）
 *   L 842  トップページ（旧 → Phase 03-A で上書き済み）
 *   L 934  レスポンシブ調整（旧）
 *   L 947  フォールバック画像（.hhd-no-image）
 *   L1058  メニュー一覧（店舗ページ埋め込み）
 *   L1096  メニュー一覧アーカイブ
 *
 *  [PHASE 03 — 刷新 CSS]
 *   L1488  front-page.php → assets/css/front.css に分離
 *   L1492  Phase 03-B: single-video（.hhd-sv-*）
 *   L1890  Phase 03-C: archive-guest / single-guest（.hhd-ag-* / .hhd-sg-*）
 *   L2539  Phase 03-F: single.php 汎用（.hhd-single-post）
 *   L2825  Phase 03-D: archive-product / single-product（.hhd-spr-*）
 *   L3285  Phase 03-E: archive-place / single-place（.hhd-spl-*）
 *   L3428  Phase 03-G: archive-video / taxonomy / region / members / 404
 *   L3451  search.php → assets/css/search.css に分離
 *   L3881  Phase 03-H: archive-menu / single-menu
 *
 *  [PATCHES & ADDITIONS]
 *   L4013  archive-product: ブランドフィルター（<details>）
 *   L4102  single-place: menu-zebra リスト
 *   L4159  single-place: NO PHOTO プレースホルダ
 *   L4179  single-place: 同種別店舗カード
 *   L4242  付箋ロゴ（.hhd-stkl）
 *   L4349  Design Audit Patch v1.0.20
 *   L4536  TOPページ レイアウト改善
 *   L4595  YouTube CTA（.hhd-yt-cta）
 *   L4650  補足画像ブロック（single-video [5c]）
 * ================================================================
 */

/* ============================================
   CSS カスタムプロパティ
   ============================================ */
:root {
  /* color · 確定方向: ほぼ純白×墨（イエロー）はワンポイント赤 */
  --hhd-bg:           #FAFAF7;
  --hhd-bg-card:      #FFFFFF;
  --hhd-bg-dark:      #0E0E10;
  --hhd-text:         #0E0E10;
  --hhd-text2:        #3A3A3D;
  --hhd-text3:        #686460; /* AA on #FFFFFF / #FAFAF7 ともに 4.5:1 以上 */
  --hhd-border:       #E4E1D6;
  --hhd-line-soft:    #EEEAE0;
  --hhd-accent:       #F2B705;
  --hhd-accent-light: #FBF1C6;
  --hhd-accent-dark:  #5C4500;
  --hhd-red:          #E50914; /* 登録・REC ドット専用 / 本文・リンク・ボタン使用禁止 */

  /* external brand colors（据え置き） */
  --hhd-amazon:       #FF9900;
  --hhd-rakuten:      #BF0000;
  --hhd-maps:         #1A73E8;
  --hhd-youtube:      #FF0000;

  /* shape */
  --hhd-radius:       8px;

  /* type */
  --hhd-font-body:         "Zen Kaku Gothic New", system-ui, sans-serif;
  --hhd-font-display:      "Zen Kaku Gothic New", system-ui, sans-serif;
  --hhd-font-mono:         "Zen Kaku Gothic New", system-ui, sans-serif;
  --hhd-font-icon-display: "Klee One", serif;     /* 仕舞ロゴSVG埋め込み用 */
  --hhd-font-icon-hand:    "Yomogi", sans-serif;  /* 仕舞ロゴSVG埋め込み用 */
}

/* ============================================
   ベース上書き（最小限）
   ============================================ */
body {
  font-family: var(--hhd-font-body);
  background-color: var(--hhd-bg);
  color: var(--hhd-text);
  line-height: 1.75;
}

h1, h2, h3, h4 {
  font-family: var(--hhd-font-display);
  font-weight: 700;
}

/* ============================================
   共通コンポーネント
   ============================================ */

/* タグ */
.hhd-tag {
  display: inline-block;
  font-size: 11px;
  font-family: var(--hhd-font-body);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--hhd-accent-light);
  color: var(--hhd-accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.hhd-tag--series {
  background: var(--hhd-bg-dark);
  color: var(--hhd-accent);
}

/* ボタン */
.hhd-btn {
  display: inline-block;
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--hhd-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--hhd-accent);
  color: #111;
  transition: opacity 0.15s;
}
.hhd-btn:hover {
  opacity: 0.85;
  color: #111;
}
.hhd-btn--amazon {
  background: var(--hhd-amazon);
  color: var(--hhd-bg-dark);
  font-size: 12px;
  padding: 6px 14px;
}
.hhd-btn--rakuten {
  background: var(--hhd-rakuten);
  font-size: 12px;
  padding: 6px 14px;
}
.hhd-btn--maps {
  background: var(--hhd-maps);
  font-size: 12px;
  padding: 6px 14px;
}

/* メタ情報 */
.hhd-meta-date,
.hhd-meta-duration {
  font-size: 12px;
  color: var(--hhd-text3);
}

/* カードグリッド */
.hhd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

/* セクション h2 */
.hhd-single-video__guests h2,
.hhd-single-video__products h2,
.hhd-single-video__places h2,
.hhd-single-video__related h2,
.hhd-single-video__comment-stats h2,
.hhd-single-video__summary h2,
.hhd-front__section h2 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hhd-accent);
  margin-bottom: 14px;
}

/* ============================================
   動画カード
   ============================================ */
.hhd-video-card {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.hhd-video-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.hhd-video-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hhd-video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.hhd-video-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 44%, rgba(0,0,0,0.44) 100%);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.hhd-video-card__thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(255,255,255,0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M2 1.7v12.6L12.5 8z' fill='%230E0E10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28);
  transition: transform 0.15s, background-color 0.15s;
  pointer-events: none;
}
.hhd-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hhd-video-card__link:hover .hhd-video-card__thumb::before {
  opacity: 1;
}
.hhd-video-card__link:hover .hhd-video-card__thumb::after {
  transform: translate(-50%, -50%) scale(1.06);
  background-color: var(--hhd-accent);
}
.hhd-video-card__duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(14,14,16,0.86);
  color: #fff;
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.hhd-video-card__duration::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 5px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  vertical-align: -1px;
}
.hhd-video-card__body {
  padding: 10px 12px 12px;
}
.hhd-video-card__date {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--hhd-text3);
  margin-bottom: 4px;
}
.hhd-video-card__title {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 6px;
  color: var(--hhd-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hhd-video-card__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hhd-video-card__guests {
  font-size: 11px;
  line-height: 1.5;
  color: var(--hhd-text2);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hhd-video-card__guests-label {
  color: var(--hhd-text3);
  margin-right: 2px;
}
.hhd-video-card__guests-more {
  color: var(--hhd-text3);
  margin-left: 2px;
}

/* ============================================
   ゲストカード
   ============================================ */
.hhd-guest-card {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.hhd-guest-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.hhd-guest-card__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}
.hhd-guest-card__thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hhd-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhd-guest-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hhd-guest-card__no-image {
  font-size: 24px;
  line-height: 1;
}
.hhd-guest-card__body {
  flex: 1;
  min-width: 0;
}
.hhd-guest-card__title {
  font-family: var(--hhd-font-body);
  font-size: 14px;
  font-weight: 700;
  margin: 4px 0 2px;
}
.hhd-guest-card__agency {
  font-size: 11px;
  color: var(--hhd-text3);
}

/* ============================================
   商品カード
   ============================================ */
.hhd-product-card {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.hhd-product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.hhd-product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.hhd-product-card__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hhd-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhd-product-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hhd-product-card__no-image {
  font-size: 12px;
  color: var(--hhd-text3);
}
.hhd-product-card__body {
  padding: 10px 12px 12px;
}
.hhd-product-card__brand {
  font-size: 11px;
  color: var(--hhd-text3);
  display: block;
  margin-bottom: 2px;
}
.hhd-product-card__title {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 4px;
  color: var(--hhd-text);
}
.hhd-product-card__price {
  font-size: 12px;
  color: var(--hhd-text2);
}
.hhd-product-card__champ {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--hhd-accent-dark);
  margin-top: 4px;
}
.hhd-product-card__links {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
}

/* 横長ミニ商品カード（関連商品用） */
.hhd-product-mini-grid,
.hhd-sp-rel-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hhd-product-mini {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hhd-product-mini:hover {
  border-color: var(--hhd-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.hhd-product-mini__link {
  display: flex;
  min-height: 92px;
  color: inherit;
  text-decoration: none;
}
.hhd-product-mini__thumb {
  width: 80px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f5f5f3 0%, #eaeae8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhd-product-mini__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hhd-product-mini__no-image {
  width: 42%;
  height: auto;
  opacity: 0.48;
}
.hhd-product-mini__body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px 10px 0;
  margin-left: 12px;
}
.hhd-product-mini__brand {
  display: block;
  font-size: 11px;
  color: var(--hhd-text3);
  line-height: 1.3;
}
.hhd-product-mini__title {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--hhd-text);
  margin: 2px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hhd-product-mini__price {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--hhd-text2);
}
.hhd-product-mini__champ {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--hhd-accent-dark);
}

/* ============================================
   店舗カード
   ============================================ */
.hhd-place-card {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.hhd-place-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.hhd-place-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.hhd-place-card__body {
  padding: 14px;
}
.hhd-place-card__title {
  font-family: var(--hhd-font-body);
  font-size: 15px;
  font-weight: 700;
  margin: 6px 0 4px;
  color: var(--hhd-text);
}
.hhd-place-card__brand {
  font-size: 12px;
  color: var(--hhd-text3);
}
.hhd-place-card .hhd-btn--maps {
  margin: 0 12px 12px;
  display: block;
  text-align: center;
}

/* ============================================
   動画詳細ページ
   ============================================ */
.hhd-single-video {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.hhd-single-video__header {
  margin-bottom: 20px;
}
.hhd-single-video__title {
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.4;
  margin-bottom: 10px;
}
.hhd-single-video__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hhd-single-video__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.hhd-single-video__embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--hhd-radius);
  overflow: hidden;
  background: #000;
}
.hhd-single-video__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.hhd-single-video__summary {
  background: var(--hhd-accent-light);
  border-left: 4px solid var(--hhd-accent);
  border-radius: 0 var(--hhd-radius) var(--hhd-radius) 0;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--hhd-text);
}
.hhd-single-video__summary h2 {
  border-bottom: none;
  color: var(--hhd-text);
  font-size: 15px;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.hhd-single-video__guests,
.hhd-single-video__orders,
.hhd-single-video__member-choices,
.hhd-single-video__kawato-items,
.hhd-single-video__products,
.hhd-single-video__mentioned,
.hhd-single-video__omiyage,
.hhd-single-video__places,
.hhd-single-video__lodging,
.hhd-single-video__comment-stats,
.hhd-single-video__related {
  margin-bottom: 64px;
}
.hhd-single-video__places-more {
  margin: 16px 0 0;
  font-size: 14px;
}
.hhd-single-video__places-more a {
  color: var(--hhd-accent);
  text-decoration: none;
}
.hhd-single-video__places-more a:hover {
  text-decoration: underline;
}
.hhd-spl-archive-link {
  margin: 24px 0 0;
  font-size: 14px;
}
.hhd-spl-archive-link a {
  color: var(--hhd-accent);
  text-decoration: none;
}
.hhd-spl-archive-link a:hover {
  text-decoration: underline;
}

/* ============================================
   誰が何を頼んだか（guest_orders テーブル）
   ============================================ */
.hhd-single-video__orders h2 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hhd-accent);
  margin-bottom: 14px;
}
.hhd-orders-table {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hhd-orders-table__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  padding: 12px 14px;
}
.hhd-orders-table__row.is-member {
  border-left: 3px solid var(--hhd-accent);
}
.hhd-orders-table__guest {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.hhd-orders-table__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hhd-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhd-orders-table__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hhd-orders-table__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hhd-orders-table__name .hhd-tag--member {
  font-size: 10px;
  align-self: flex-start;
}
.hhd-orders-table__items,
.hhd-mentioned-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hhd-orders-table__item,
.hhd-mentioned-list li {
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.hhd-orders-table__icon {
  font-size: 12px;
  flex-shrink: 0;
}
.hhd-orders-table__item a,
.hhd-mentioned-list li a {
  color: var(--hhd-accent-dark);
  text-decoration: none;
  font-weight: 500;
}
.hhd-orders-table__item a:hover,
.hhd-mentioned-list li a:hover {
  text-decoration: underline;
}
.hhd-orders-table__place {
  font-size: 11px;
  color: var(--hhd-text2) !important;
  font-weight: 400 !important;
}
.hhd-orders-table__note {
  font-size: 11px;
  color: var(--hhd-text3);
}
.hhd-orders-table__who {
  font-size: 13px;
  color: var(--hhd-text2);
  margin-left: 4px;
}
@media (max-width: 560px) {
  .hhd-orders-table__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* 川戸ドライブ 店舗別メニュー ── 行幅をフルに（人物列なし） */
.hhd-orders-table--kawato .hhd-orders-table__row {
  grid-template-columns: 1fr;
}

/* 川戸ドライブ 店舗名サブ見出し */
.hhd-kawato-place-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-text2);
  margin: 20px 0 8px;
  padding-left: 8px;
  border-left: 3px solid var(--hhd-accent);
}
.hhd-kawato-place-name:first-of-type {
  margin-top: 0;
}
.hhd-kawato-place-name a {
  color: inherit;
  text-decoration: none;
}
.hhd-kawato-place-name a:hover {
  text-decoration: underline;
}

/* 川戸ドライブ 店舗別メニュー一覧は上の .hhd-orders-table__items / __item 系ルールを共有（「誰が何を選んだか」と完全に同一のスタイルにするため） */

.hhd-single-video__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hhd-border);
  font-size: 13px;
}
.hhd-single-video__nav a {
  color: var(--hhd-accent-dark);
  text-decoration: none;
}
.hhd-single-video__nav a:hover {
  text-decoration: underline;
}
/* ============================================
   ゲスト詳細ページ（base + ユーティリティ残置）
   旧 BEM 子要素（__hero/__avatar/__info 等）は Phase 03-C で
   .hhd-sg-* 系に刷新済み。 PHP から参照される base と
   ユーティリティ（avatar-placeholder / ai-note / tag--member）
   のみ残置する。
   ============================================ */
.hhd-single-guest {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.hhd-avatar-placeholder {
  font-size: 48px;
  line-height: 1;
}
/* メンバー専用バッジ（単独 .hhd-tag--member 用途。
   テーブル内バッジは .hhd-orders-table__name .hhd-tag--member 側で定義） */
.hhd-tag--member {
  background: var(--hhd-accent);
  color: var(--hhd-accent-dark);
  font-weight: bold;
}
.hhd-tag--winner {
  background: #c8940a;
  color: #fff;
  font-weight: bold;
}
.hhd-orders-table__row.is-winner > .hhd-orders-table__guest {
  font-weight: bold;
}

/* ============================================
   メンバーページ（base + page-title 残置）
   旧 .hhd-member-card* / .hhd-members-grid は Phase 03-G で
   .hhd-ag-member-card / .hhd-ag-members__grid に刷新済み。
   .hhd-page-title は page-chat.php がまだ使用しているため残置。
   ============================================ */
.hhd-page-members {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.hhd-page-title {
  font-size: 26px;
  margin-bottom: 6px;
}

/* ============================================
   一覧ページ base（archive-guest / archive-video 外殻）
   旧 .hhd-kana-index / .hhd-filter / .hhd-archive-title /
   .hhd-archive-count / .hhd-archive-section-title /
   .hhd-archive-guest__members は Phase 03-C/G で別命名（.hhd-ag-*
   / .hhd-ap-* 系）に刷新済み。 base の padding は Phase 03 側で
   設定が無いため残置（横方向の breathing room を維持）。
   ============================================ */
.hhd-archive-guest,
.hhd-archive-video {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ============================================
   トップページ
   ============================================ */
.hhd-front {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ヒーロー / 検索 / クイックナビ は仕舞風リブランド（行 1500 付近）と
   Phase 03-A（行 1601 付近）で完全置換済み。 .hhd-front__hero-desc /
   .hhd-front__nav-icon は現行 PHP（front-page.php）が使用していない。 */

/* セクション */
.hhd-front__section {
  margin-bottom: 40px;
}
.hhd-front__section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.hhd-front__section-header h2 {
  font-size: 20px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hhd-accent);
  flex: 1;
}
.hhd-front__section-header a {
  font-size: 12px;
  color: var(--hhd-accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.hhd-front__section-header a:hover {
  text-decoration: underline;
}

/* シリーズチップ */
.hhd-series-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hhd-series-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--hhd-bg-card);
  color: var(--hhd-text);
  border: 1px solid var(--hhd-border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.hhd-series-chip:hover {
  border-color: var(--hhd-accent-dark);
  background: var(--hhd-accent-light);
  color: var(--hhd-accent-dark);
}
.hhd-series-chip__count {
  font-size: 11px;
  font-weight: 400;
  color: var(--hhd-text3);
}

/* セクション下部「一覧を見る」ボタン */
.hhd-section-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.hhd-section-more .hhd-btn {
  padding: 12px 32px;
  font-size: 14px;
}

/* 注記 */
.hhd-front__disclaimer {
  font-size: 11px;
  color: var(--hhd-text3);
  text-align: center;
  margin-top: 48px;
  line-height: 1.7;
}

.hhd-footer__disclaimer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.7;
}

/* ============================================
   レスポンシブ調整
   ============================================ */
@media (max-width: 560px) {
  .hhd-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hhd-single-video {
    padding: 16px 12px 32px;
  }
}

/* 横スクロールカードグリッド（スマホのみ） */
@media (max-width: 560px) {
  .hhd-card-grid--h-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 12px;
  }
  .hhd-card-grid--h-scroll > * {
    flex: 0 0 160px;
    scroll-snap-align: start;
  }
}

/* ============================================
   フォールバック画像（hhd-no-image）
   画像未登録時に SVG アイコンで埋める。各 CPT カード/詳細ヒーロー共通。
   ============================================ */
.hhd-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: #f1f1f0;
  color: #b8b5ad;
}
.hhd-no-image svg {
  width: 38%;
  max-width: 96px;
  height: auto;
  opacity: 0.85;
}
/* place / product カードの画像枠の最低高さを確保（崩れ防止）。
   video カードは YouTube サムネが 16:9 ノーカットなので、ここから外して
   .hhd-video-card__thumb（aspect-ratio: 16/9）の定義を優先させる。 */
.hhd-place-card__thumb,
.hhd-product-card__thumb {
  aspect-ratio: 4 / 3;
  background: #f1f1f0;
  overflow: hidden;
}
.hhd-place-card__thumb img,
.hhd-product-card__thumb img,
.hhd-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   メニューカード
   ============================================ */
.hhd-menu-card {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.hhd-menu-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.hhd-menu-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.hhd-menu-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f1f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhd-menu-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hhd-menu-card__no-image {
  font-size: 12px;
  color: var(--hhd-text3);
}
.hhd-menu-card__body {
  padding: 10px 12px 12px;
}
.hhd-menu-card__kind {
  font-size: 11px;
  margin-bottom: 4px;
}
.hhd-menu-card__title {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin: 4px 0;
  color: var(--hhd-text);
}
.hhd-menu-card__place {
  display: block;
  font-size: 11px;
  color: var(--hhd-text3);
  margin-bottom: 2px;
}
.hhd-menu-card__price {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--hhd-text2);
}

/* メニューカードグリッド（料理 / ドリンク用に少しコンパクト） */
.hhd-card-grid--menu {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ============================================
   メニュー一覧（店舗ページに埋め込み）
   ============================================ */
.hhd-menu-list {
  margin: 28px 0;
}
.hhd-menu-list__title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hhd-accent);
  margin-bottom: 14px;
}
.hhd-menu-list__group {
  margin-bottom: 20px;
}
.hhd-menu-list__group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-text2);
  margin-bottom: 8px;
}
.hhd-menu-list__items {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 6px;
}
.hhd-menu-list__items li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--hhd-text2);
}
.hhd-menu-list__note {
  font-size: 11px;
  color: var(--hhd-text3);
  margin-top: 4px;
}

/* ============================================
   メニュー一覧アーカイブ
   ============================================ */
.hhd-archive-menu {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
/* ============================================
   フォーカス可視（WCAG 2.2 SC 2.4.7 / 2.4.11）
   キーボード操作時のみアウトラインを出す（マウスクリックでは出さない）
   ============================================ */
.hhd-tag:focus-visible,
.hhd-btn:focus-visible,
.hhd-video-card__link:focus-visible,
.hhd-place-card__link:focus-visible,
.hhd-product-card__link:focus-visible,
.hhd-guest-card__link:focus-visible,
.hhd-menu-card__link:focus-visible,
.hhd-series-chip:focus-visible,
.hhd-kana-index a:focus-visible,
.hhd-front__nav-item:focus-visible,
.hhd-single-video__nav a:focus-visible,
.hhd-site-brand-link:focus-visible,
.hhd-header-search-link:focus-visible {
  outline: 2px solid var(--hhd-accent-dark);
  outline-offset: 2px;
  border-radius: var(--hhd-radius);
}
/* 墨背景ヘッダー上のロゴアンカーは紙白アウトラインで視認性を確保 */
.hhd-header .hhd-site-brand-link:focus-visible,
.hhd-header .hhd-header-search-link:focus-visible {
  outline-color: var(--hhd-accent);
}
.hhd-tag:focus-visible {
  border-radius: 4px;
}

/* ============================================
   サイトロゴ（のれんアイコン + サイト名テキスト）
   ============================================ */
.hhd-headlogo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: auto;
  line-height: 1;
}
.hhd-headlogo .hhd-site-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--hhd-text);
}
.hhd-headlogo svg,
.hhd-headlogo img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
.hhd-site-brand {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--hhd-font-display);
  line-height: 1.08;
  min-width: 0;
}
.hhd-site-brand__kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.72;
  white-space: nowrap;
}
.hhd-site-brand__main {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  margin-top: 3px;
  white-space: nowrap;
}
.hhd-site-brand__sub {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin-top: 3px;
  white-space: nowrap;
  opacity: 0.92;
}
.hhd-header-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid rgba(250,250,247,0.25);
  border-radius: 50%;
  color: var(--hhd-bg);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hhd-header-search-link:hover {
  border-color: var(--hhd-accent);
  color: var(--hhd-accent);
  background: rgba(255,255,255,0.06);
}

/* ヘッダー墨背景上の可読性確保。ブランドテキスト要素にも明示的に紙白を当てる。 */
.hhd-header .hhd-site-brand,
.hhd-header .hhd-site-brand-link {
  color: var(--hhd-bg);
}
/* 追従固定ヘッダーは紙白背景なので墨色に切り替え */
.hhd-header--sticky .hhd-site-brand,
.hhd-header--sticky .hhd-site-brand-link {
  color: var(--hhd-text);
}
.hhd-header--sticky .hhd-header-search-link {
  border-color: rgba(14,14,16,0.22);
  color: var(--hhd-text);
}
.hhd-header--sticky .hhd-header-search-link:hover,
.hhd-header--sticky .hhd-header-search-link:focus-visible {
  border-color: var(--hhd-accent-dark);
  color: var(--hhd-accent-dark);
  background: var(--hhd-accent-light);
}

/* グローバルナビ: 墨背景ヘッダー上は紙白、ホバー/フォーカスで山吹 (#F2B705 on #111 ≈ 9.7:1)。 */
.hhd-header .hhd-global-nav a,
.hhd-header .hhd-global-nav a:visited {
  color: var(--hhd-bg);
}
.hhd-header .hhd-global-nav a:hover,
.hhd-header .hhd-global-nav a:focus-visible {
  color: var(--hhd-accent);
}
/* 追従固定ヘッダーは紙白背景。山吹は白上で AA 落ちるので焦げ茶側にスイッチ。 */
.hhd-header--sticky .hhd-global-nav a,
.hhd-header--sticky .hhd-global-nav a:visited {
  color: var(--hhd-text);
}
.hhd-header--sticky .hhd-global-nav a:hover,
.hhd-header--sticky .hhd-global-nav a:focus-visible {
  color: var(--hhd-accent-dark);
}

/* 追従固定ヘッダーの背景は紙白で固定 */
.hhd-header--sticky {
  background: var(--hhd-bg);
  color: var(--hhd-text);
}

/* グローバルナビの親 li: ドロップダウンの絶対配置の基準にする */
.hhd-gnav__list li {
  position: relative;
}

/* グローバルナビのドロップダウン（WP 標準 .sub-menu）:
   墨背景ヘッダーから紙白の付箋カードが浮き出るイメージ。
   通常は非表示にし、親 li のホバー/フォーカス時のみ表示する。 */
.hhd-header .hhd-global-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 180px;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--hhd-radius);
  background: var(--hhd-bg);
  border: 1px solid var(--hhd-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.hhd-gnav__list li:hover > .sub-menu,
.hhd-gnav__list li:focus-within > .sub-menu {
  display: block;
}
.hhd-header .hhd-global-nav .sub-menu a,
.hhd-header .hhd-global-nav .sub-menu a:visited {
  color: var(--hhd-text);
  background: transparent;
  white-space: nowrap;
}
.hhd-header .hhd-global-nav .sub-menu a:hover,
.hhd-header .hhd-global-nav .sub-menu a:focus-visible {
  color: var(--hhd-accent-dark);
  background: var(--hhd-accent-light);
}

/* ============================================
   モバイルドロワー（.hhd-mobile-menu）
   ヘッダー / フッターと同じ墨背景で仕舞風の上下サンドイッチを構成。
   ============================================ */
.hhd-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  visibility: hidden;
}
.hhd-mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
}
.hhd-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s;
}
.hhd-mobile-menu.is-open .hhd-mobile-menu__overlay {
  opacity: 1;
}
.hhd-mobile-menu__inner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  overflow-y: auto;
  padding: 72px 24px 40px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.hhd-mobile-menu.is-open .hhd-mobile-menu__inner {
  transform: translateX(0);
}
.hhd-mobile-menu .hhd-widget__title {
  color: var(--hhd-accent);
}
.hhd-mobile-menu .hhd-spnav a,
.hhd-mobile-menu a:not(.hhd-iconbtn) {
  color: var(--hhd-bg);
}
.hhd-mobile-menu .hhd-spnav a:hover,
.hhd-mobile-menu .hhd-spnav a:focus-visible {
  color: var(--hhd-accent);
}
.hhd-mobile-menu .hhd-iconbtn {
  color: var(--hhd-bg);
}
/* メニュー項目の区切り線も墨背景上で見える階調へ */
.hhd-mobile-menu .hhd-spnav li {
  border-color: rgba(250, 250, 247, 0.14);
}
/* モバイルメニューの ul */
.hhd-spnav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hhd-spnav li {
  border-bottom: 1px solid rgba(250, 250, 247, 0.14);
}
.hhd-spnav a {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
/* ハンバーガーボタン */
.hhd-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  color: var(--hhd-bg);
}
.hhd-menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
/* 閉じる状態（is-open 時） */
.hhd-menu-toggle.is-open .hhd-menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hhd-menu-toggle.is-open .hhd-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.hhd-menu-toggle.is-open .hhd-menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* モバイルメニュー内検索フォーム */
.hhd-mobile-menu__search {
  margin-top: 24px;
}
.hhd-mobile-menu__search form {
  display: flex;
  gap: 8px;
}
.hhd-mobile-menu__search input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--hhd-radius);
  color: var(--hhd-bg);
  font-size: 14px;
}
.hhd-mobile-menu__search input[type="search"]::placeholder {
  color: rgba(250,250,247,0.5);
}
.hhd-mobile-menu__search button {
  background: none;
  border: none;
  color: var(--hhd-bg);
  cursor: pointer;
  padding: 6px;
}
@media (max-width: 768px) {
  .hhd-menu-toggle {
    display: flex;
  }
  /* nav が非表示になると margin-left: auto が消えるため、
     検索アイコンで代わりに右寄せを引き受ける */
  .hhd-header-search-link {
    margin-left: auto;
  }
}

/* ============================================
   フッター（.hhd-footer）
   仕舞風: 墨背景 × 紙白テキスト × 山吹リンク。
   ============================================ */
.hhd-footer {
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
}
.hhd-footer a,
.hhd-footer a:visited {
  color: var(--hhd-bg);
}
.hhd-footer a:hover,
.hhd-footer a:focus-visible {
  color: var(--hhd-accent);
}
.hhd-footer .hhd-footer__nav {
  border-color: rgba(250, 250, 247, 0.18);
}
.hhd-footer .hhd-copyright {
  /* 墨背景上で text3 は薄すぎるため、紙白を透明度で落として読みやすさ確保 */
  color: rgba(250, 250, 247, 0.75);
}
/* フッター内部レイアウト */
.hhd-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 28px;
  text-align: center;
}
.hhd-footer__nav {
  margin-bottom: 20px;
  border-top: 1px solid rgba(250, 250, 247, 0.18);
  padding-top: 20px;
}
.hhd-footer__navlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hhd-footer__navlist a {
  font-size: 14px;
  text-decoration: none;
}
.hhd-copyright {
  font-size: 13px;
  color: rgba(250, 250, 247, 0.75);
  margin: 0;
}

/* 追従固定ヘッダーは少し小さめに */
.hhd-header--sticky .hhd-headlogo svg,
.hhd-header--sticky .hhd-headlogo img {
  width: 40px;
  height: 40px;
}
.hhd-header--sticky .hhd-site-brand__kicker {
  font-size: 10px;
}
.hhd-header--sticky .hhd-site-brand__main {
  font-size: 14px;
  margin-top: 2px;
}
.hhd-header--sticky .hhd-site-brand__sub {
  font-size: 11px;
  margin-top: 2px;
}

/* モバイルは省スペース：サイト名2行のうちキッカーは隠す */
@media (max-width: 560px) {
  .hhd-headlogo svg,
  .hhd-headlogo img {
    width: 44px;
    height: 44px;
  }
  .hhd-site-brand__kicker {
    display: none;
  }
  .hhd-site-brand__main {
    font-size: 15px;
    margin-top: 0;
  }
  .hhd-site-brand__sub {
    font-size: 11px;
    margin-top: 2px;
  }
}


/* ============================================================
   front-page.php CSS → assets/css/front.css
   ============================================================ */

/* ============================================================
   Phase 03-B · single-video 刷新 追記CSS
   ------------------------------------------------------------
   この内容を style.css の【末尾】に貼り付けてください。
   style-front.css（Phase 03-A）の後に続けてください。
   ============================================================ */

/* ------------------------------------------------------------
   2カラムレイアウト（左:プレイヤー sticky ／ 右:本文スクロール）
   ------------------------------------------------------------ */

/* 旧定義の max-width を打ち消して 2カラム用に拡張 */
.hhd-single-video {
  max-width: 1120px !important;
  padding: 0 !important;
}

.hhd-sv {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 48px;
  align-items: start;
  padding: 20px 24px 64px;
}

/* 左カラム: プレイヤー sticky */
.hhd-sv__left {
  position: sticky;
  top: 76px; /* ヘッダー64px + 余白12px */
}

.hhd-sv__right {
  min-width: 0;
}

/* YouTubeリンクボタン */
.hhd-sv__yt-link {
  margin-top: 10px;
}
.hhd-btn--yt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--hhd-text);
  padding: 7px 16px;
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  background: var(--hhd-bg-card);
  transition: border-color .15s;
}
.hhd-btn--yt:hover {
  border-color: var(--hhd-accent);
}

/* 左カラムのタイトル・メタ：サイズ調整 */
.hhd-sv__left .hhd-single-video__title {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.45;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------
   セクション h2 ── 下線のみ（03-A と統一）
   ------------------------------------------------------------ */
.hhd-sv__right h2,
.hhd-sv__right .hhd-single-video__guests h2,
.hhd-sv__right .hhd-single-video__orders h2,
.hhd-sv__right .hhd-single-video__member-choices h2,
.hhd-sv__right .hhd-single-video__kawato-items h2,
.hhd-sv__right .hhd-single-video__products h2,
.hhd-sv__right .hhd-single-video__places h2,
.hhd-sv__right .hhd-single-video__related h2,
.hhd-sv__right .hhd-single-video__mentioned h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------
   生成要約 ── 付箋風カード（旧: 左ボーダー+薄黄背景 を上書き）
   ------------------------------------------------------------ */
.hhd-single-video__summary {
  background: var(--hhd-accent) !important;
  border-left: none !important;
  border-radius: 2px;
  padding: 24px 24px 26px !important;
  margin: 0 4px 36px !important;
  box-shadow: 3px 5px 16px rgba(0, 0, 0, 0.14);
  position: relative;
  color: var(--hhd-text) !important;
}

/* 赤画鋲 */
.hhd-sv__summary-pin {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hhd-red);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.hhd-sv__summary-pin::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

/* 概要ラベル */
.hhd-sv__summary-label {
  font-family: var(--hhd-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3em;
  color: rgba(0,0,0,0.5) !important;
  margin: 0 0 8px !important;
}

/* 本文テキスト */
.hhd-single-video__summary > p:last-child {
  font-family: var(--hhd-font-body) !important;
  font-size: 14px !important;
  line-height: 1.85;
  color: var(--hhd-text) !important;
  margin: 0 !important;
}

/* 旧定義の h2 を非表示（PHP側で p.hhd-sv__summary-label に置き換え） */
.hhd-single-video__summary h2 {
  display: none !important;
}

/* ------------------------------------------------------------
   誰が何を頼んだか ── 箇条書きスタイル強化
   ------------------------------------------------------------ */

/* メンバー行：左ボーダーではなく、アバターを墨背景＋山吹文字で区別 */
.hhd-orders-table__row.is-member {
  border-left: none !important;
  background: transparent;
}

/* アバター：メンバーは墨＋山吹イニシャル */
.hhd-orders-table__row.is-member .hhd-orders-table__avatar {
  background: var(--hhd-bg-dark) !important;
  border-color: var(--hhd-bg-dark) !important;
  color: var(--hhd-accent) !important;
  font-family: var(--hhd-font-icon-display);
  font-weight: 700;
}

/* メンバーバッジ（墨背景＋山吹文字） */
.hhd-orders-table__name .hhd-tag--member {
  background: var(--hhd-bg-dark) !important;
  color: var(--hhd-accent) !important;
  font-size: 10px !important;
  padding: 1px 7px !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* 行ごとの境界線（カード枠なし、罫線で区切る） */
.hhd-orders-table__row {
  border-bottom: 1px solid var(--hhd-border) !important;
  padding: 14px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-right: none !important;
}
.hhd-orders-table__row:last-child {
  border-bottom: none !important;
}

/* アイテムリスト（箇条書き） */
.hhd-orders-table__items {
  gap: 6px !important;
}
.hhd-orders-table__item {
  align-items: baseline !important;
}

/* ------------------------------------------------------------
   関連動画 ── 2列グリッド（右カラムは幅が狭いので4列→2列）
   ------------------------------------------------------------ */
.hhd-card-grid--2col {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ------------------------------------------------------------
   誰が何を頼んだか ── ヘッダー + チップ/リスト切替トグル
   ------------------------------------------------------------ */
.hhd-sv__orders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--hhd-accent);
  margin-bottom: 14px;
}
.hhd-sv__orders-header h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.hhd-orders-toggle {
  display: inline-flex;
  border: 1px solid var(--hhd-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.hhd-orders-toggle__opt {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--hhd-text3);
  border: none;
  background: transparent;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.hhd-orders-toggle__opt.is-active {
  background: var(--hhd-accent);
  color: var(--hhd-accent-dark);
  font-weight: 700;
}
.hhd-orders-toggle__opt:hover:not(.is-active) {
  background: var(--hhd-bg);
  color: var(--hhd-text);
}

/* チップスタイル */
.hhd-orders-table--chips .hhd-orders-table__row {
  background: var(--hhd-bg-card) !important;
  border: 1px solid var(--hhd-border) !important;
  border-bottom: 1px solid var(--hhd-border) !important;
  border-radius: var(--hhd-radius) !important;
  padding: 14px 16px !important;
}
.hhd-orders-table--chips .hhd-orders-table__row:last-child {
  border-bottom: 1px solid var(--hhd-border) !important;
}
.hhd-orders-table--chips .hhd-orders-table__items {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-content: flex-start;
}
.hhd-orders-table--chips .hhd-orders-table__item {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  background: #f0f0ee !important;
  border: 1px solid var(--hhd-border) !important;
  font-size: 12px !important;
}
.hhd-orders-table--chips .hhd-orders-table__item.is-linked {
  background: var(--hhd-accent-light) !important;
  border-color: rgba(92, 69, 0, 0.2) !important;
}
.hhd-orders-table--chips .hhd-orders-table__item.is-linked a {
  font-weight: 600;
}
.hhd-orders-table--chips .hhd-orders-table__note,
.hhd-orders-table--chips .hhd-orders-table__place {
  font-style: italic;
}

/* ------------------------------------------------------------
   前後ナビ ── カードスタイル
   ------------------------------------------------------------ */
.hhd-sv__nav-cards {
  display: flex !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
.hhd-sv__nav-prev,
.hhd-sv__nav-next {
  flex: 1;
}
.hhd-sv__nav-prev a,
.hhd-sv__nav-next a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  color: var(--hhd-text);
  transition: border-color .15s;
}
.hhd-sv__nav-prev a:hover,
.hhd-sv__nav-next a:hover {
  border-color: var(--hhd-accent);
}
.hhd-sv__nav-thumb {
  width: 110px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hhd-sv__nav-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hhd-sv__nav-dir {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--hhd-text3);
}
.hhd-sv__nav-title {
  font-family: var(--hhd-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hhd-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 旧ナビのリンクスタイルを打ち消し */
.hhd-sv__nav-cards a {
  color: var(--hhd-text) !important;
}
.hhd-sv__nav-cards a:hover {
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hhd-sv {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 12px 16px 48px;
  }
  .hhd-sv__left {
    position: static;
    min-width: 0;
  }
  .hhd-sv__left .hhd-single-video__title {
    font-size: clamp(18px, 4vw, 24px);
  }
  .hhd-card-grid--2col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hhd-single-video__summary {
    margin: 0 0 28px !important;
  }
}
@media (max-width: 560px) {
  .hhd-sv__nav-cards {
    flex-direction: column;
  }
  .hhd-card-grid--2col {
    grid-template-columns: 1fr !important;
  }
  .hhd-single-video__summary {
    margin: 0 0 28px !important;
  }
}


/* ============================================================
   Phase 03-C · archive-guest / single-guest 刷新 追記CSS
   ------------------------------------------------------------
   この内容を style.css の【末尾】に追記してください。
   style-single-video.css（Phase 03-B）の後に続けてください。
   ============================================================ */

/* ------------------------------------------------------------
   共通 ── フィルターチップ（03-A の .hhd-chip を再利用）
   ------------------------------------------------------------ */
.hhd-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 400;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--hhd-border);
  background: var(--hhd-bg-card);
  color: var(--hhd-text2);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color .15s, background .15s, color .15s;
}
.hhd-chip.is-active,
.hhd-chip:hover {
  border-color: var(--hhd-accent-dark);
  background: var(--hhd-accent-light);
  color: var(--hhd-accent-dark);
  font-weight: 700;
}

/* ============================================================
   archive-guest
   ============================================================ */

.hhd-archive-guest.l-main {
  max-width: 1120px !important;
  padding: 0 24px 64px;
}

/* ページ見出し */
.hhd-archive-guest__head {
  padding: 36px 0 0;
}
.hhd-archive-guest__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  margin: 0 0 4px;
  color: var(--hhd-text);
}
.hhd-archive-guest__count {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--hhd-text3);
  margin: 0 0 28px;
}

/* フィルターパネル */
.hhd-ag-filter {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  padding: 18px 20px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hhd-ag-filter__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hhd-ag-filter__label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--hhd-text3);
  white-space: nowrap;
  padding-top: 8px;
  min-width: 36px;
}
.hhd-ag-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* 番組レギュラーセクション（墨背景フルブリード） */
.hhd-ag-members {
  background: var(--hhd-bg-dark);
  margin: 0 calc(50% - 50vw);
  padding: 48px calc(50vw - 50%);
  margin-bottom: 48px;
}
.hhd-ag-members__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.hhd-ag-members h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-accent);
  border-bottom: 2px solid rgba(242,183,5,0.4);
  padding-bottom: 6px;
  margin: 0 0 22px;
}
.hhd-ag-members__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.hhd-ag-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  gap: 5px;
  transition: background .15s, border-color .15s;
}
.hhd-ag-member-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--hhd-accent);
}
.hhd-ag-member-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-icon-display);
  font-size: 30px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  overflow: hidden;
  margin-bottom: 4px;
}
.hhd-ag-member-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hhd-ag-member-card__no {
  display: none;
}
.hhd-ag-member-card__name {
  font-family: var(--hhd-font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.hhd-ag-member-card__role {
  font-family: var(--hhd-font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

/* ゲスト見出し */
.hhd-ag-guests h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 16px;
}

/* コンパクトリスト */
.hhd-ag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hhd-ag-list__item {
  border: 1px solid var(--hhd-border);
  border-top: none;
}
.hhd-ag-list__item:first-child {
  border-top: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius) var(--hhd-radius) 0 0;
}
.hhd-ag-list__item:last-child {
  border-radius: 0 0 var(--hhd-radius) var(--hhd-radius);
}
.hhd-ag-list__item.is-even { background: var(--hhd-bg-card); }
.hhd-ag-list__item[hidden] { display: none; }
.hhd-ag-list__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--hhd-text);
  transition: background .12s;
}
.hhd-ag-list__link:hover { background: var(--hhd-accent-light); }
.hhd-ag-list__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hhd-bg);
  border: 1px solid var(--hhd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-icon-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-text3);
  flex-shrink: 0;
  overflow: hidden;
}
.hhd-ag-list__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hhd-ag-list__name {
  flex: 1;
  font-family: var(--hhd-font-display);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hhd-ag-list__kana {
  font-family: var(--hhd-font-body);
  font-size: 12px;
  color: var(--hhd-text3);
  font-weight: 400;
}
.hhd-ag-list__count {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  color: var(--hhd-accent-dark);
  white-space: nowrap;
  margin-left: auto;
}
.hhd-ag-list__arrow {
  color: var(--hhd-text3);
  flex-shrink: 0;
}

/* ============================================================
   single-guest ── 共通
   ============================================================ */

/* セクション h2 */
.hhd-single-guest__section h2,
.hhd-sg-member-body h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* SNSボタン群 */
.hhd-single-guest__sns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.hhd-btn--x,
.hhd-btn--ig,
.hhd-btn--official {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  padding: 5px 14px;
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  background: var(--hhd-bg-card);
  color: var(--hhd-text2);
  text-decoration: none;
  transition: border-color .15s;
}
.hhd-btn--x:hover,
.hhd-btn--ig:hover,
.hhd-btn--official:hover { border-color: var(--hhd-accent); }

/* アバタープレースホルダー */
.hhd-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--hhd-font-icon-display);
  font-weight: 700;
}

/* ============================================================
   single-guest ── ゲスト（2カラム）
   ============================================================ */
.hhd-sg-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
  padding: 36px 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
}

/* パンくず */
.hhd-sg-breadcrumb {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  color: var(--hhd-text3);
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}
.hhd-sg-breadcrumb--light { color: var(--hhd-text3); }

/* サイドバー */
.hhd-sg-sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hhd-sg-sidebar__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--hhd-bg);
  border: 1px solid var(--hhd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-icon-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--hhd-text3);
  overflow: hidden;
  margin-bottom: 10px;
}
.hhd-sg-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hhd-sg-sidebar__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hhd-sg-sidebar__name {
  font-family: var(--hhd-font-display);
  font-size: 24px;
  font-weight: 900;
  margin: 8px 0 2px;
  color: var(--hhd-text);
}
.hhd-sg-sidebar__kana {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--hhd-text3);
  margin: 0;
}
.hhd-sg-sidebar__agency {
  font-size: 12px;
  color: var(--hhd-text3);
  margin: 4px 0 0;
}
.hhd-sg-sidebar__stats {
  display: flex;
  gap: 18px;
  margin: 14px 0 0;
  justify-content: center;
  align-items: center;
}
.hhd-sg-sidebar__profile {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hhd-border);
  text-align: left;
  width: 100%;
}
.hhd-sg-sidebar__profile-label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--hhd-text3);
  margin-bottom: 6px;
}
.hhd-sg-sidebar__profile p {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  line-height: 1.8;
  color: var(--hhd-text2);
  margin: 0 0 4px;
}

/* 統計（共通） */
.hhd-sg-stat { text-align: center; }
.hhd-sg-stat__num {
  display: block;
  font-family: var(--hhd-font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--hhd-text);
  line-height: 1;
}
.hhd-sg-stat__label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--hhd-text3);
  margin-top: 3px;
  display: block;
}
.hhd-sg-stat__divider {
  width: 1px;
  height: 32px;
  background: var(--hhd-border);
}

/* コンテンツ右カラム */
.hhd-sg-content { min-width: 0; }
.hhd-single-guest__section { margin-bottom: 40px; }

/* 食べた・頼んだもの チップ */
.hhd-sg-order-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hhd-sg-order-chip {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  color: var(--hhd-text2);
}

/* 訪問店舗（縦リスト） */
.hhd-sg-places { display: flex; flex-direction: column; gap: 8px; }

/* 共演ゲスト */
.hhd-sg-coguests { display: flex; gap: 12px; flex-wrap: wrap; }
.hhd-sg-coguestcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 18px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  color: var(--hhd-text);
  text-align: center;
  min-width: 88px;
  transition: border-color .15s;
}
.hhd-sg-coguestcard:hover { border-color: var(--hhd-accent); }
.hhd-sg-coguestcard__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hhd-bg);
  border: 1px solid var(--hhd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-icon-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text3);
  overflow: hidden;
}
.hhd-sg-coguestcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hhd-sg-coguestcard__name { font-family: var(--hhd-font-display); font-size: 14px; font-weight: 700; }
.hhd-sg-coguestcard__count { font-family: var(--hhd-font-mono); font-size: 10px; color: var(--hhd-accent-dark); }

/* ============================================================
   single-guest ── メンバー（フルブリードヒーロー）
   ============================================================ */
/* .hhd-single-guest { max-width: 860px } をメンバーページだけ解除。
   hhd-single-guest--member は <main> に両クラスが同居するため compound selector で上書き */
.hhd-single-guest.hhd-single-guest--member {
  max-width: none;
  padding: 0;
}

/* 墨背景ヒーロー */
.hhd-sg-member-hero {
  background: var(--hhd-bg);
  color: var(--hhd-text);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0 calc(50vw - 50%) 0;
  margin: 0 calc(50% - 50vw);
}
.hhd-sg-member-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}
.hhd-sg-member-hero__body {
  display: flex;
  gap: 40px;
  align-items: center;
}
.hhd-sg-member-hero__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #F1F0EE;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-icon-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--hhd-text);
  overflow: hidden;
  flex-shrink: 0;
}
.hhd-sg-member-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hhd-sg-member-hero__badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.hhd-tag--role {
  background: rgba(0,0,0,0.06);
  color: var(--hhd-text2);
}
.hhd-sg-member-hero__name {
  font-family: var(--hhd-font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--hhd-text);
}
.hhd-sg-member-hero__kana {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--hhd-text3);
  margin: 0;
}
.hhd-sg-member-hero__stats {
  display: flex;
  gap: 22px;
  margin-top: 18px;
  align-items: center;
}
.hhd-sg-member-hero__stats .hhd-sg-stat__num { color: var(--hhd-accent); font-size: 30px; }
.hhd-sg-member-hero__stats .hhd-sg-stat__label { color: rgba(255,255,255,0.5); }
.hhd-sg-member-hero__stats .hhd-sg-stat__divider { background: rgba(255,255,255,0.12); }

/* メンバー本文エリア（ヒーロー・他セクションと同じ1120px幅に統一） */
.hhd-sg-member-body {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}
.hhd-sg-member-body .hhd-card-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* プロフィール（山吹左ボーダー） */
.hhd-sg-member-profile {
  border-left: 3px solid var(--hhd-accent);
  padding-left: 18px;
  margin-bottom: 40px;
}
.hhd-sg-member-profile__label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--hhd-accent-dark);
  margin-bottom: 6px;
}
.hhd-sg-member-profile p {
  font-family: var(--hhd-font-body);
  font-size: 14px;
  line-height: 1.85;
  color: var(--hhd-text2);
  margin: 0;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  /* 一覧 */
  .hhd-ag-members__grid { grid-template-columns: repeat(3, 1fr); }
  .hhd-ag-filter__row { flex-direction: column; gap: 8px; }

  /* ゲスト詳細 2カラム → 縦積み */
  .hhd-sg-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 48px;
  }
  .hhd-sg-sidebar {
    position: static;
    flex-direction: column;
    align-items: center;
  }

  /* メンバー本文カードグリッド: 横スクロール */
  .hhd-sg-member-body .hhd-card-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 12px;
  }
  .hhd-sg-member-body .hhd-card-grid > * {
    flex: 0 0 calc(50% - 6px);
    scroll-snap-align: start;
  }
  .hhd-sg-member-body {
    padding: 32px 16px 48px;
  }

  /* メンバーヒーロー 縦積み */
  .hhd-sg-member-hero__body {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .hhd-sg-member-hero__badges,
  .hhd-sg-member-hero__stats,
  .hhd-single-guest__sns { justify-content: center; }
}
@media (max-width: 560px) {
  .hhd-ag-members__grid { grid-template-columns: repeat(2, 1fr); }
  .hhd-ag-list__count { display: none; }

  /* メンバー本文カードグリッド: 560px以下は1枚見切れ幅に */
  .hhd-sg-member-body .hhd-card-grid > * {
    flex: 0 0 calc(72% - 6px);
  }
  .hhd-sg-member-body {
    padding: 24px 16px 48px;
  }
}


/* ============================================================
   Phase 03-F · single.php 新規追加CSS
   ------------------------------------------------------------
   この内容を style.css の【末尾】に追記してください。
   style-guest.css（Phase 03-C）の後に続けてください。
   ============================================================ */

/* ------------------------------------------------------------
   2カラムレイアウト（左: アイキャッチ+目次 sticky / 右: 本文）
   ------------------------------------------------------------ */
.hhd-single-post.l-main {
  max-width: 1120px !important;
  padding: 0 !important;
}

.hhd-sp-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 52px;
  align-items: start;
  padding: 36px 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
}

/* サイドバー sticky */
.hhd-sp-sidebar {
  position: sticky;
  top: 76px;
}

/* パンくず */
.hhd-sp-breadcrumb {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  color: var(--hhd-text3);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------
   アイキャッチ
   ------------------------------------------------------------ */
.hhd-sp-eyecatch {
  width: 100%;
  border-radius: var(--hhd-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.hhd-sp-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
}

/* プレースホルダー（アイキャッチ未設定時） */
.hhd-sp-eyecatch__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--hhd-radius);
  overflow: hidden;
}
.hhd-sp-eyecatch__placeholder.is-column {
  background: linear-gradient(135deg, var(--hhd-bg-dark) 0%, #2c2c30 100%);
  color: var(--hhd-accent);
}
.hhd-sp-eyecatch__placeholder.is-news {
  background: linear-gradient(135deg, #f0efec 0%, #e5e3de 100%);
  color: var(--hhd-text3);
}
.hhd-sp-eyecatch__placeholder span {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  opacity: 0.5;
}

/* ------------------------------------------------------------
   目次
   ------------------------------------------------------------ */
.hhd-sp-toc {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  padding: 14px 16px;
}
.hhd-sp-toc__label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--hhd-text3);
  margin-bottom: 10px;
}
.hhd-sp-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hhd-sp-toc__item a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--hhd-font-body);
  font-size: 13px;
  color: var(--hhd-accent-dark);
  text-decoration: none;
  line-height: 1.5;
  transition: opacity .12s;
}
.hhd-sp-toc__item a:hover { opacity: 0.72; }
.hhd-sp-toc__num {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  color: var(--hhd-text3);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   右カラム：タイトル + リード
   ------------------------------------------------------------ */
.hhd-sp-content { min-width: 0; }

.hhd-sp-header { margin-bottom: 32px; }
.hhd-sp-header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hhd-tag--accent {
  background: var(--hhd-accent-light) !important;
  color: var(--hhd-accent-dark) !important;
}
.hhd-sp-header__date {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--hhd-text3);
}
.hhd-sp-header__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 16px;
  color: var(--hhd-text);
}
.hhd-sp-header__lead {
  font-family: var(--hhd-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--hhd-text2);
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hhd-border);
}

/* ------------------------------------------------------------
   本文スタイル（entry-content の上書き）
   ------------------------------------------------------------ */
.hhd-sp-body {
  font-family: var(--hhd-font-body);
  font-size: 15px;
  line-height: 1.9;
  color: var(--hhd-text2);
  margin-bottom: 48px;
}
.hhd-sp-body p { margin: 0 0 22px; }
.hhd-sp-body h2 {
  font-family: var(--hhd-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 36px 0 16px;
  scroll-margin-top: 88px; /* sticky header 分 */
}
.hhd-sp-body h3 {
  font-family: var(--hhd-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--hhd-text);
  margin: 28px 0 12px;
}
.hhd-sp-body ul,
.hhd-sp-body ol {
  margin: 0 0 22px;
  padding-left: 1.6em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hhd-sp-body a {
  color: var(--hhd-accent-dark);
  text-decoration: underline;
  text-decoration-color: var(--hhd-accent);
  text-underline-offset: 3px;
}
.hhd-sp-body a:hover { opacity: 0.75; }
.hhd-sp-body blockquote {
  border-left: 3px solid var(--hhd-accent);
  margin: 0 0 22px;
  padding: 12px 18px;
  background: var(--hhd-accent-light);
  color: var(--hhd-text2);
  font-style: italic;
}
.hhd-sp-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hhd-radius);
}

/* ------------------------------------------------------------
   関連セクション（商品 / 動画）
   ------------------------------------------------------------ */
.hhd-sp-section { margin-bottom: 40px; }
.hhd-sp-section__title {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* 関連商品：2列グリッド */
.hhd-sp-rel-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* 関連動画：縦リスト（横長カード） */
.hhd-sp-rel-videos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hhd-sp-rel-videos .hhd-video-card {
  display: flex !important;
  flex-direction: row !important;
}
.hhd-sp-rel-videos .hhd-video-card__thumb {
  width: 140px !important;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}

/* 前後ナビ（single-video.php の .hhd-sv__nav-cards を再利用） */
.hhd-sp-nav { margin-top: 8px; }

/* ------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hhd-sp-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 48px;
  }
  .hhd-sp-sidebar {
    position: static;
  }
  /* モバイルではアイキャッチとタイトルを上に固めて表示 */
  .hhd-sp-eyecatch { margin-bottom: 20px; }
  .hhd-product-mini-grid,
  .hhd-sp-rel-products { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hhd-sp-header__title { font-size: 20px; }
  .hhd-sp-body { font-size: 14px; }
  .hhd-sp-nav { flex-direction: column; }
}


/* ============================================================
   Phase 03-D · archive-product / single-product 追記CSS
   ------------------------------------------------------------
   style.css の末尾に追記（style-single-post.css の後）
   ============================================================ */

/* ============================================================
   archive-product
   ============================================================ */

.hhd-archive-product.l-main {
  max-width: 1120px !important;
  padding: 0 24px 64px;
}

/* ページ見出し */
.hhd-ap-head { padding: 36px 0 0; }
.hhd-ap-head__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--hhd-text);
}
.hhd-ap-head__sub {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--hhd-text3);
  margin: 0 0 12px;
}
.hhd-ap-head__lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--hhd-text2);
  margin: 0 0 28px;
}
.hhd-ap-head__updated {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--hhd-text3);
}

/* フィルターパネル */
.hhd-ap-filter {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  padding: 18px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hhd-ap-filter__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hhd-ap-filter__label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--hhd-text3);
  white-space: nowrap;
  padding-top: 8px;
  min-width: 40px;
}
.hhd-ap-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* 件数表示 */
.hhd-ap-count {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  color: var(--hhd-text3);
  letter-spacing: 0.2em;
  margin: 0 0 18px;
}
.hhd-ap-brand-videos {
  margin-top: 48px;
  padding: 36px 0 64px;
  border-top: 1px solid var(--hhd-border);
}
.hhd-ap-brand-videos h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hhd-text1);
}
.hhd-ap-brand-videos__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 4列グリッド */
.hhd-card-grid--4col {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* ページネーション */
.hhd-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hhd-pagination .page-numbers {
  font-family: var(--hhd-font-mono);
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  color: var(--hhd-text2);
  text-decoration: none;
  background: var(--hhd-bg-card);
  transition: border-color .15s, background .15s;
}
.hhd-pagination .page-numbers.current,
.hhd-pagination .page-numbers:hover {
  border-color: var(--hhd-accent-dark);
  background: var(--hhd-accent-light);
  color: var(--hhd-accent-dark);
}

/* ============================================================
   single-product（2カラム）
   ============================================================ */

.hhd-single-product.l-main {
  max-width: 1120px !important;
  padding: 0 !important;
}

.hhd-spr-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 52px;
  align-items: start;
  padding: 36px 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
}

/* 左カラム sticky */
.hhd-spr-left {
  position: sticky;
  top: 76px;
}
.hhd-spr-image {
  border-radius: var(--hhd-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #f5f5f3 0%, #eaeae8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.hhd-spr-image img { width: 100%; height: 100%; object-fit: contain; }
.hhd-spr-no-image {
  width: 40% !important;
  height: auto !important;
  opacity: 0.55;
}
.hhd-spr-image-credit {
  font-size: 12px;
  color: var(--hhd-muted, #888);
  margin: -10px 0 14px;
  text-align: right;
}

/* 購入ボタン */
.hhd-spr-buy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hhd-official-unlisted {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--hhd-muted, #888);
}
.hhd-btn--large {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--hhd-radius) !important;
}
.hhd-btn--outline {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-family: var(--hhd-font-body) !important;
  background: var(--hhd-bg-card) !important;
  color: var(--hhd-text2) !important;
  border: 1px solid var(--hhd-border) !important;
  border-radius: var(--hhd-radius) !important;
  text-decoration: none;
  transition: border-color .15s;
}
.hhd-btn--outline:hover { border-color: var(--hhd-accent) !important; }
.hhd-affiliate-note {
  font-size: 11px;
  color: var(--hhd-text3);
  margin: 4px 0 0;
  text-align: center;
}

/* 右カラム */
.hhd-spr-right { min-width: 0; }

/* タイトル + メタ */
.hhd-spr-header { margin-bottom: 20px; }
.hhd-spr-header__brand {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  color: var(--hhd-text3);
  margin-bottom: 4px;
}
.hhd-spr-header__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--hhd-text);
}
.hhd-spr-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.hhd-spr-price {
  font-family: var(--hhd-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--hhd-text2);
}

/* 選手権実績 */
.hhd-spr-champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.hhd-spr-champ__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
}
.hhd-spr-champ__item.is-top {
  background: var(--hhd-accent-light);
  border-color: color-mix(in srgb, var(--hhd-accent-dark) 25%, transparent);
}
.hhd-spr-champ__trophy { font-size: 20px; flex-shrink: 0; }
.hhd-spr-champ__name {
  font-family: var(--hhd-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-accent-dark);
}
.hhd-spr-champ__sub {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  color: var(--hhd-text3);
  margin-top: 2px;
}

/* 番組でのひとこと（付箋風） */
.hhd-spr-memo {
  background: var(--hhd-accent);
  border-radius: 2px;
  transform: rotate(-0.6deg);
  padding: 22px 24px 26px;
  margin: 0 4px 32px;
  box-shadow: 3px 5px 16px rgba(0, 0, 0, 0.13);
  position: relative;
}
.hhd-spr-memo__pin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hhd-red);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.hhd-spr-memo__pin::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.hhd-spr-memo__label {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--hhd-accent-dark);
  margin: 0 0 7px;
}
.hhd-spr-memo__text {
  font-family: var(--hhd-font-icon-display); /* Klee One */
  font-size: 14px;
  line-height: 1.85;
  color: var(--hhd-text);
  margin: 0;
}

/* セクション */
.hhd-spr-section { margin-bottom: 36px; }
.hhd-spr-brand-more { margin-top: 16px; }
.hhd-spr-brand-more .hhd-btn { width: auto !important; }
.hhd-spr-buy .hhd-btn--official { width: auto !important; }
.hhd-spr-section h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* 食べた・頼んだ人 */
.hhd-spr-eaters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hhd-spr-eater {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 24px;
  border: 1px solid var(--hhd-border);
  background: var(--hhd-bg-card);
  text-decoration: none;
  color: var(--hhd-text);
  transition: border-color .15s;
}
.hhd-spr-eater:hover { border-color: var(--hhd-accent); }
.hhd-spr-eater.is-member {
  background: var(--hhd-bg-dark);
  border-color: var(--hhd-bg-dark);
}
.hhd-spr-eater__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-icon-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--hhd-accent);
  overflow: hidden;
  flex-shrink: 0;
}
.hhd-spr-eater:not(.is-member) .hhd-spr-eater__avatar {
  background: var(--hhd-bg);
  border-color: var(--hhd-border);
  color: var(--hhd-text3);
}
.hhd-spr-eater__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hhd-spr-eater__name {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hhd-accent);
}
.hhd-spr-eater:not(.is-member) .hhd-spr-eater__name { color: var(--hhd-text); }

/* 登場動画（横長カードリスト） */
.hhd-spr-videos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hhd-spr-videos .hhd-video-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  background: var(--hhd-surface, #fff);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
}
.hhd-spr-videos .hhd-video-card__link {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.hhd-spr-videos .hhd-video-card__thumb {
  width: 220px !important;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  align-self: center;
}
.hhd-spr-videos .hhd-video-card__body {
  padding: 12px 16px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.hhd-spr-videos .hhd-video-card__title {
  -webkit-line-clamp: 2;
  font-size: 14px;
  margin-bottom: 0;
}
.hhd-spr-videos .hhd-video-card__date { margin-bottom: 0; }
.hhd-spr-videos .hhd-video-card__terms { margin-top: 4px; }
@media (max-width: 560px) {
  .hhd-spr-videos .hhd-video-card__thumb { width: 140px !important; }
  .hhd-spr-videos .hhd-video-card__body { padding: 10px 12px !important; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .hhd-card-grid--4col { grid-template-columns: repeat(2, 1fr) !important; }
  .hhd-ap-brand-videos__list { grid-template-columns: repeat(3, 1fr); }
  .hhd-ap-filter__row { flex-direction: column; gap: 8px; }
  .hhd-spr-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 48px;
  }
  .hhd-spr-left { position: static; min-width: 0; }
  .hhd-card-grid--2col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .hhd-card-grid--4col { grid-template-columns: 1fr !important; }
  .hhd-ap-brand-videos__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hhd-spr-memo { transform: none !important; }
}



/* ============================================================
   Phase 03-E · archive-place / single-place 追記CSS
   ------------------------------------------------------------
   style.css の末尾に追記（style-product.css の後）
   ============================================================ */

/* ============================================================
   archive-place（.hhd-ap-head / .hhd-ap-filter / .hhd-ap-count は
   style-product.css の定義を共有 — 追記不要）
   ============================================================ */

.hhd-archive-place.l-main {
  max-width: 1120px !important;
  padding: 0 24px 64px;
}

/* スマホ: 種別フィルターをスクロール中も見える固定タブバーにする */
@media (max-width: 768px) {
  .hhd-archive-place .hhd-ap-filter {
    position: sticky;
    top: 76px; /* ヘッダー64px + 余白12px */
    z-index: 10;
  }
  .hhd-archive-place .hhd-ap-filter__row {
    flex-direction: row;
    align-items: center;
  }
  .hhd-archive-place .hhd-ap-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   single-place（2カラム）
   ============================================================ */

.hhd-single-place.l-main {
  max-width: 1120px !important;
  padding: 0 !important;
}

.hhd-spl-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 52px;
  align-items: start;
  padding: 36px 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
}

/* 左カラム sticky */
.hhd-spl-left {
  position: sticky;
  top: 76px;
}

/* 店舗写真 */
.hhd-spl-image {
  border-radius: var(--hhd-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f0efec 0%, #e5e3de 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.hhd-spl-image img { width: 100%; height: 100%; object-fit: cover; }
.hhd-spl-no-image { width: 36% !important; height: auto !important; opacity: 0.5; }

/* 外部リンクボタン群 */
.hhd-spl-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hhd-btn--maps {
  background: #4285F4 !important;
  color: #fff !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--hhd-font-body) !important;
  font-weight: 700 !important;
}
.hhd-btn--tabelog {
  background: var(--hhd-bg-card) !important;
  color: var(--hhd-text2) !important;
}
.hhd-spl-links .hhd-btn--outline { width: auto !important; }
.hhd-spl-links .hhd-btn--maps {
  width: auto !important;
  display: inline-flex !important;
}

/* 右カラム */
.hhd-spl-right { min-width: 0; }

/* タイトル + メタ */
.hhd-spl-header { margin-top: 28px; margin-bottom: 28px; }
.hhd-spl-header__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.hhd-spl-header__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--hhd-text);
}
.hhd-spl-header__parent {
  font-family: var(--hhd-font-body);
  font-size: 13px;
  color: var(--hhd-text3);
  margin: 0 0 6px;
}
.hhd-spl-header__address {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--hhd-font-body);
  font-size: 13px;
  color: var(--hhd-text2);
  margin: 0 0 4px;
}
.hhd-spl-header__visits {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  color: var(--hhd-accent-dark);
  margin: 6px 0 0;
}

/* セクション h2 */
.hhd-spl-section { margin-bottom: 36px; }
.hhd-spl-section h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* 登場動画 横長リスト（style-product.css の .hhd-spr-videos を共有） */

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .hhd-spl-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 48px;
  }
  .hhd-spl-left { position: static; min-width: 0; }
}



/* ============================================================
   Phase 03-G · 残テンプレート 追記CSS
   ------------------------------------------------------------
   style.css 末尾に追記（style-place.css の後）
   ============================================================ */

/* ============================================================
   archive-video / search（.hhd-ap-head / .hhd-ap-filter /
   .hhd-ap-count / .hhd-card-grid--4col / .hhd-pagination は
   style-product.css 定義を共有）
   ============================================================ */

.hhd-archive-video.l-main,
.hhd-search-page.l-main,
.hhd-archive-region.l-main,
.hhd-page-series-list.l-main,
.hhd-page-members.l-main,
.hhd-taxonomy-series.l-main,
.hhd-tax-product-brand.l-main {
  max-width: 1120px !important;
  padding: 0 24px 64px;
}

/* ============================================================
   search.php CSS → assets/css/search.css
   ============================================================ */
/* ============================================================
   taxonomy-series / taxonomy-product_brand（共通ヒーロー）
   ============================================================ */
.hhd-series-hero,
.hhd-brand-hero {
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  margin-bottom: 0;
}
.hhd-series-hero__inner,
.hhd-brand-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px 40px;
}
.hhd-series-hero .hhd-breadcrumb,
.hhd-series-hero .hhd-breadcrumb a,
.hhd-brand-hero .hhd-breadcrumb,
.hhd-brand-hero .hhd-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
}
.hhd-series-hero .hhd-breadcrumb a:hover,
.hhd-brand-hero .hhd-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.85);
}
.hhd-series-hero .hhd-breadcrumb {
  margin-bottom: 12px;
}
.hhd-series-hero__kicker,
.hhd-brand-hero__kicker {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.hhd-series-hero__title,
.hhd-brand-hero__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--hhd-bg);
}
.hhd-series-hero__desc,
.hhd-brand-hero__desc {
  font-family: var(--hhd-font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin: 0 0 16px;
  line-height: 1.7;
}
.hhd-series-hero__stats {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hhd-series-hero__count {
  font-family: var(--hhd-font-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--hhd-accent);
  line-height: 1;
}
.hhd-series-hero__unit {
  font-family: var(--hhd-font-mono);
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
.hhd-brand-hero__count {
  font-family: var(--hhd-font-mono);
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
.hhd-brand-hero__count span {
  font-size: 32px;
  font-weight: 700;
  color: var(--hhd-accent);
  margin-right: 4px;
}

/* 本文エリア */
.hhd-series-body,
.hhd-brand-body {
  padding: 32px 0 64px;
}

/* ============================================================
   archive-region / single-region
   ============================================================ */

/* 地方ロケカードグリッド */
.hhd-region-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hhd-region-grid--small {
  grid-template-columns: repeat(4, 1fr);
}
.hhd-region-card {
  display: flex;
  flex-direction: column;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--hhd-text);
  transition: border-color .15s, transform .15s;
}
.hhd-region-card:hover { border-color: var(--hhd-accent); transform: translateY(-2px); }
.hhd-region-card__thumb {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f0efec 0%, #e5e3de 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hhd-region-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hhd-region-card__no-image { color: var(--hhd-text3); opacity: 0.7; }
.hhd-region-card__body { padding: 12px 14px 14px; }
.hhd-region-card__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.hhd-region-card__title {
  font-family: var(--hhd-font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hhd-text);
}
.hhd-region-card__count {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  color: var(--hhd-accent-dark);
}

/* region ヒーロー */
.hhd-region-hero {
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.hhd-region-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px 40px;
}
.hhd-region-hero__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.hhd-tag--region-pref {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.8) !important;
}
.hhd-region-hero__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--hhd-bg);
}
.hhd-region-hero__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin: 0 0 18px;
  line-height: 1.7;
}
.hhd-region-hero__stats {
  display: flex;
  gap: 22px;
  align-items: center;
}
.hhd-region-hero__stats .hhd-sg-stat__num { color: var(--hhd-accent); font-size: 28px; }
.hhd-region-hero__stats .hhd-sg-stat__label { color: rgba(255,255,255,0.5); }
.hhd-region-hero__stats .hhd-sg-stat__divider { background: rgba(255,255,255,0.12); }

.hhd-region-body {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

/* region セクション h2 */
.hhd-single-region__section { margin-bottom: 40px; }
.hhd-single-region__section h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* ============================================================
   page-members
   ============================================================ */
.hhd-members-hero {
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.hhd-members-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  text-align: center;
}
.hhd-members-hero__kicker {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.hhd-members-hero__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(28px,5vw,52px);
  font-weight: 900;
  margin: 0 0 10px;
}
.hhd-members-hero__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.hhd-members-intro-video {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.hhd-embed-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.hhd-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hhd-members-body {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
/* description テキスト（03-C の .hhd-ag-member-card に追加） */
.hhd-ag-member-card__desc {
  font-family: var(--hhd-font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin: 4px 0 0;
  text-align: center;
}
/* page-members: ライト背景用カードスタイル上書き */
.hhd-members-body .hhd-ag-member-card {
  background: var(--hhd-bg-card);
  border-color: rgba(0,0,0,0.08);
}
.hhd-members-body .hhd-ag-member-card:hover {
  background: var(--hhd-accent-light);
  border-color: var(--hhd-accent);
}
.hhd-members-body .hhd-ag-member-card__avatar {
  background: #F1F0EE;
  border-color: rgba(0,0,0,0.1);
  color: var(--hhd-text);
}
.hhd-members-body .hhd-ag-member-card__name {
  color: var(--hhd-text);
}
.hhd-members-body .hhd-ag-member-card__role {
  color: var(--hhd-text3);
}
.hhd-members-body .hhd-ag-member-card__desc {
  color: var(--hhd-text3);
}

/* ============================================================
   page-series-list
   ============================================================ */
.hhd-series-list-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hhd-series-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-top: none;
  text-decoration: none;
  color: var(--hhd-text);
  transition: background .12s;
}
.hhd-series-list-card:first-child {
  border-top: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius) var(--hhd-radius) 0 0;
}
.hhd-series-list-card:last-child {
  border-radius: 0 0 var(--hhd-radius) var(--hhd-radius);
}
.hhd-series-list-card:hover { background: var(--hhd-accent-light); }
.hhd-series-list-card__body { flex: 1; min-width: 0; }
.hhd-series-list-card__title {
  font-family: var(--hhd-font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
.hhd-series-list-card__desc {
  font-size: 13px;
  color: var(--hhd-text2);
  margin: 0;
}
.hhd-series-list-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--hhd-text3);
}
.hhd-series-list-card__count {
  font-family: var(--hhd-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--hhd-accent-dark);
}
.hhd-series-list-card__date {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
}

/* ============================================================
   404
   ============================================================ */
.hhd-404 { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.hhd-404__inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hhd-404__visual { margin-bottom: 4px; }
.hhd-404__title {
  font-family: var(--hhd-font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--hhd-text);
  margin: 0;
}
.hhd-404__desc {
  font-size: 14px;
  color: var(--hhd-text2);
  line-height: 1.7;
  margin: 0;
}
/* 検索バー */
.hhd-404__search {
  display: flex;
  gap: 8px;
  width: 100%;
}
.hhd-404__search-field {
  position: relative;
  flex: 1;
}
.hhd-404__search-field svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hhd-text3);
}
.hhd-404__search-field .hhd-search__input {
  padding-left: 38px !important;
  font-size: 14px;
  height: 44px;
}
.hhd-404__search-btn {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0 20px;
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  border: none;
  border-radius: var(--hhd-radius);
  cursor: pointer;
  height: 44px;
}
/* ナビリンク */
.hhd-404__links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hhd-btn--primary {
  background: var(--hhd-bg-dark) !important;
  color: var(--hhd-bg) !important;
  border: none !important;
}
.hhd-btn--ghost {
  background: var(--hhd-bg-card) !important;
  border: 1px solid var(--hhd-border) !important;
  color: var(--hhd-text2) !important;
}
.hhd-btn--ghost:hover { border-color: var(--hhd-accent) !important; }

/* ============================================================
   レスポンシブ（全体共通）
   ============================================================ */
@media (max-width: 900px) {
  .hhd-region-grid,
  .hhd-region-grid--small { grid-template-columns: repeat(2, 1fr); }
  .hhd-search-hero__form { flex-direction: column; }
  .hhd-search-hero__btn { width: 100%; }
  .hhd-series-list-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hhd-series-list-card__meta { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .hhd-region-grid { grid-template-columns: 1fr; }
  .hhd-404__links { flex-direction: column; width: 100%; }
  .hhd-404__links .hhd-btn { width: 100%; justify-content: center; }
}


/* ============================================================
   Phase 03-H · archive-menu / single-menu 追記CSS
   ------------------------------------------------------------
   style.css 末尾に追記（style-misc.css の後）
   ============================================================ */

/* ============================================================
   archive-menu
   （.hhd-ap-head / .hhd-ap-filter / .hhd-ap-count /
     .hhd-card-grid--4col / .hhd-pagination は
     style-product.css 定義を共有）
   ============================================================ */

.hhd-archive-menu.l-main {
  max-width: 1120px !important;
  padding: 0 24px;
}

.hhd-archive-menu__desc {
  font-family: var(--hhd-font-body);
  font-size: 14px;
  color: var(--hhd-text3);
  margin: 0 0 28px;
}

/* ============================================================
   single-menu（2カラム）
   ============================================================ */

.hhd-single-menu.l-main {
  max-width: 1120px !important;
  padding: 0 !important;
}

.hhd-smn-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  padding: 36px 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
}

/* 左カラム sticky */
.hhd-smn-left {
  position: sticky;
  top: 76px;
}

/* メニュー画像（正方形気味） */
.hhd-smn-image {
  border-radius: var(--hhd-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f5f5f3 0%, #eaeae8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.hhd-smn-image img { width: 100%; height: 100%; object-fit: cover; }
.hhd-smn-no-image { width: 36% !important; height: auto !important; opacity: 0.5; }

/* 店舗リンク */
.hhd-smn-place {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hhd-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hhd-accent-dark);
  text-decoration: none;
  margin-bottom: 10px;
  transition: opacity .12s;
}
.hhd-smn-place:hover { opacity: 0.75; }
.hhd-smn-place svg { flex-shrink: 0; color: var(--hhd-accent-dark); }

/* 価格 */
.hhd-smn-price {
  font-family: var(--hhd-font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  margin-bottom: 12px;
}
.hhd-smn-left .hhd-btn--outline { width: auto !important; }

/* 右カラム */
.hhd-smn-right { min-width: 0; }

/* タイトル + 種別タグ */
.hhd-smn-header { margin-bottom: 24px; }
.hhd-smn-header__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.hhd-smn-header__title {
  font-family: var(--hhd-font-display);
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  color: var(--hhd-text);
}

/* セクション h2 */
.hhd-smn-section { margin-bottom: 36px; }
.hhd-smn-section h2 {
  font-family: var(--hhd-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--hhd-text);
  border-bottom: 2px solid var(--hhd-accent);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

/* 登場動画 横長リスト（style-product.css の .hhd-spr-videos を共有） */

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .hhd-smn-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 48px;
  }
  .hhd-smn-left { position: static; min-width: 0; }
}


/* ============================================================
   archive-product · ブランド <select> フィルター
   ブランド件数が多いため、Phase 03 のチップ型から <select> に戻した
   ============================================================ */
.hhd-ap-filter__select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 360px;
  padding: 8px 32px 8px 12px;
  font-family: var(--hhd-font-body);
  font-size: 14px;
  color: var(--hhd-text);
  background: var(--hhd-surface, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  line-height: 1.4;
}
.hhd-ap-filter__select:focus-visible {
  outline: 2px solid var(--hhd-accent-dark);
  outline-offset: 2px;
}
/* ブランドフィルター: デスクトップは select、モバイルは details リスト */
.hhd-brand-details { display: none; }
.hhd-brand-select-wrap { display: contents; }

@media (max-width: 768px) {
  /* select を隠して details を表示 */
  .hhd-brand-select-wrap { display: none; }
  .hhd-brand-details { display: block; width: 100%; }

  .hhd-brand-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    background: var(--hhd-bg-card);
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .hhd-brand-details__summary::-webkit-details-marker { display: none; }
  .hhd-brand-details[open] .hhd-brand-details__summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }
  .hhd-brand-details[open] .hhd-brand-details__caret { transform: rotate(180deg); }
  .hhd-brand-details__caret { transition: transform .2s; font-size: 11px; }

  .hhd-brand-details__list {
    border: 1px solid var(--hhd-border);
    border-top: none;
    border-radius: 0 0 var(--hhd-radius) var(--hhd-radius);
    background: var(--hhd-bg-card);
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hhd-brand-details__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--hhd-text);
    text-decoration: none;
    border-bottom: 1px solid var(--hhd-border);
    min-height: 48px;
  }
  .hhd-brand-details__item:last-child { border-bottom: none; }
  .hhd-brand-details__item.is-active {
    color: var(--hhd-accent-dark);
    font-weight: 700;
    background: var(--hhd-accent-light);
  }
  .hhd-brand-details__count {
    font-family: var(--hhd-font-mono);
    font-size: 12px;
    color: var(--hhd-text3);
  }
}

/* ============================================================
   single-place: 「番組で頼んだメニュー」zebra リスト（parts/menu-zebra.php）
   提案デザイン: 絵文字 + メニュー名 + 頼んだ人 + ひとこと の縞模様1列
   ============================================================ */
.hhd-menu-zebra {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  overflow: hidden;
  background: var(--hhd-surface, #fff);
}
.hhd-menu-zebra__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-top: 1px solid var(--hhd-border);
}
.hhd-menu-zebra__row:first-child { border-top: 0; }
.hhd-menu-zebra__row:nth-child(even) { background: var(--hhd-bg); }
.hhd-menu-zebra__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.hhd-menu-zebra__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--hhd-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.hhd-menu-zebra__name:hover { color: var(--hhd-accent-dark); }
.hhd-menu-zebra__who {
  font-family: var(--hhd-font-body);
  font-size: 12px;
  color: var(--hhd-text3);
  white-space: nowrap;
}
.hhd-menu-zebra__note {
  font-family: var(--hhd-font-icon-display);
  font-size: 12px;
  color: var(--hhd-accent-dark);
  font-style: italic;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hhd-menu-zebra__row { flex-wrap: wrap; row-gap: 4px; }
  .hhd-menu-zebra__who,
  .hhd-menu-zebra__note { white-space: normal; }
}

/* ============================================================
   single-place: プレースホルダ写真を 1:1 + ピンアイコン + "NO PHOTO" ラベル
   （JSX PlaceThumb と統一）
   ============================================================ */
.hhd-spl-image {
  aspect-ratio: 1 / 1 !important;
  background: linear-gradient(135deg, #f5f5f3 0%, #eaeae8 100%) !important;
  position: relative;
}
.hhd-spl-no-image::after {
  content: "NO PHOTO";
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #c0bdb5;
}

/* ============================================================
   single-place: 「同じ種別の店舗」 コンパクトカード（JSX 準拠）
   single-place.php 内のインラインマークアップ用
   ============================================================ */
.hhd-spl-related {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.hhd-spl-related__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hhd-surface, #fff);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  color: var(--hhd-text);
  transition: border-color .15s, box-shadow .15s;
}
.hhd-spl-related__card:hover {
  border-color: var(--hhd-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.hhd-spl-related__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--hhd-radius);
  background: var(--hhd-bg);
  border: 1px solid var(--hhd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hhd-text3);
}
.hhd-spl-related__body { flex: 1; min-width: 0; }
.hhd-spl-related__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 3px;
}
.hhd-spl-related__name {
  font-family: var(--hhd-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-text);
  overflow-wrap: anywhere;
}
.hhd-spl-related__visits {
  font-family: var(--hhd-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--hhd-accent-dark);
  margin-top: 2px;
}
@media (max-width: 560px) {
  .hhd-spl-related { grid-template-columns: 1fr; }
}


/* ============================================================
   付箋ロゴ（HTML テキストオーバーレイ版） — .hhd-stkl
   ------------------------------------------------------------
   旧版は SVG 内 <text> に font-size を直書きしていたが、SVG 内 font-size
   の調整がブラウザ/PHP のキャッシュ層で反映されないとの報告のため、
   付箋背景は SVG、テキストは HTML、で重ねるハイブリッド構成に変更。
   サイズは CSS 変数 --hhd-stkl-size を基準に relative に決まる。
   ============================================================ */
.hhd-stkl {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--hhd-stkl-size, 300px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 0;
  line-height: 1;
  /* font-size を CSS calc の基準にするための内部スケール変数。
     responsive 時は max-width も縮むのでこの値も合わせて縮める。 */
  --hhd-stkl-scale: var(--hhd-stkl-size, 300px);
}
@media (max-width: 900px) {
  /* このレンジでは .hhd-front__hero が grid-template-columns: 1fr + justify-items: center
     になり、.hhd-front__hero-logo が auto-width（コンテンツ追従）になる。
     その中で width: 100% だと min-content（1文字幅）に潰れるため、
     明示的な px 幅を指定して親の auto-width に引きずられないようにする。 */
  .hhd-stkl {
    width: 220px;
    max-width: 220px;
    --hhd-stkl-scale: 220px;
  }
}
@media (max-width: 560px) {
  .hhd-stkl {
    width: 180px;
    max-width: 180px;
    --hhd-stkl-scale: 180px;
  }
}
.hhd-stkl__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hhd-stkl__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 付箋本体は viewBox 中央の約80% × 約80%。SVG 側で -3deg 傾けてあるので
     テキストも同じ -3deg 回して見た目を合わせる。 */
  transform: rotate(-3deg);
  text-align: center;
  color: #0E0E10;
  pointer-events: none;
  padding: 9% 7%;
  gap: 0.18em;
}
/* 上見出し: BSノブロック（手書き感 / 細め） */
.hhd-stkl__kicker {
  display: inline-block;
  font-family: var(--hhd-font-icon-hand), "Yomogi", sans-serif;
  font-size: calc(var(--hhd-stkl-scale, 300px) * 0.065);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 0.7em 0.3em;
  border-bottom: 2px solid rgba(14, 14, 16, 0.7);
  margin-bottom: 0.15em;
}
/* メイン: 非公式（主役級・大きく） */
.hhd-stkl__main {
  display: block;
  font-family: var(--hhd-font-icon-display), "Klee One", serif;
  font-size: calc(var(--hhd-stkl-scale, 300px) * 0.24);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 0.95;
  margin: 0;
}
/* サブ: まとめサイト */
.hhd-stkl__sub {
  display: block;
  font-family: var(--hhd-font-icon-display), "Klee One", serif;
  font-size: calc(var(--hhd-stkl-scale, 300px) * 0.11);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  margin: 0.12em 0 0;
}
/* 下の手書き注釈 */
.hhd-stkl__hint {
  display: block;
  font-family: var(--hhd-font-icon-hand), "Yomogi", sans-serif;
  font-size: calc(var(--hhd-stkl-scale, 300px) * 0.046);
  font-weight: 600;
  line-height: 1.5;
  margin: 0.5em 0 0;
}

/* ============================================================
   Design Audit Patch  v1.0.20
   style.css 末尾に追記してください（style-misc.css の後）
   ============================================================ */

/* ① カードグリッド 明示的バリアント
   -----------------------------------------------------------
   Phase 03-G テンプレートが参照する --3col / --4col が
   style.css に存在しないため追加。
   ----------------------------------------------------------- */
.hhd-card-grid--3col {
  grid-template-columns: repeat(3, 1fr) !important;
}
.hhd-card-grid--4col {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px) {
  .hhd-card-grid--4col { grid-template-columns: repeat(2, 1fr) !important; }
  .hhd-card-grid--3col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .hhd-card-grid--4col,
  .hhd-card-grid--3col { grid-template-columns: 1fr !important; }
}

/* ② SNS ボタン（hhd-btn--x / --ig / --official）
   -----------------------------------------------------------
   single-guest.php で参照されるが未定義。
   現状は全ボタンが山吹色に誤表示されている。
   ----------------------------------------------------------- */
.hhd-btn--x {
  background: #000;
  color: #fff;
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.hhd-btn--ig {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  font-size: 12px;
}
.hhd-btn--official {
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  border: none;
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
}
.hhd-btn--x:hover,
.hhd-btn--ig:hover,
.hhd-btn--official:hover {
  opacity: 0.82;
  color: inherit;
}

/* ③ ページング（.hhd-pagination）
   -----------------------------------------------------------
   archive-video / archive-guest / taxonomy-series 等
   全アーカイブページで使用。WordPress デフォルト CSS のまま。
   ----------------------------------------------------------- */
.hhd-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 32px 0 0;
  flex-wrap: wrap;
}
.hhd-pagination .page-numbers {
  font-family: var(--hhd-font-mono);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: var(--hhd-radius);
  border: 1px solid var(--hhd-border);
  text-decoration: none;
  color: var(--hhd-text2);
  background: var(--hhd-bg-card);
  transition: border-color .12s, background .12s;
}
.hhd-pagination .page-numbers:hover {
  border-color: var(--hhd-accent);
  background: var(--hhd-accent-light);
  color: var(--hhd-accent-dark);
}
.hhd-pagination .page-numbers.current {
  background: var(--hhd-bg-dark);
  color: var(--hhd-accent);
  border-color: var(--hhd-bg-dark);
}
.hhd-pagination .page-numbers.dots {
  background: transparent;
  border: none;
  color: var(--hhd-text3);
  pointer-events: none;
}

/* ④ 動画カード シリーズタグ（PHP 差分は README 参照）
   -----------------------------------------------------------
   parts/video-card.php に $series_terms の HTML 出力を追加する。
   CSS 側は既存の .hhd-tag--series を流用。
   container クラスのみ追加。
   ----------------------------------------------------------- */
.hhd-video-card__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

/* ④-b 動画カード 要約プレビュー（任意）
   video-card.php に summary の 2 行プレビューを追加する場合に利用。 */
.hhd-video-card__summary {
  font-family: var(--hhd-font-body);
  font-size: 11px;
  line-height: 1.55;
  color: var(--hhd-text3);
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⑤ --hhd-font-display を Klee One に変更
   -----------------------------------------------------------
   本文（Zen Kaku Gothic New）と見出し（Klee One）で
   タイポグラフィの対比を生む。フォールバックに Zen Kaku を維持。
   ----------------------------------------------------------- */
:root {
  --hhd-font-display: "Klee One", "Zen Kaku Gothic New", serif;
}

/* ⑥ text-wrap: pretty を主要テキスト要素に適用
   -----------------------------------------------------------
   行末の1語ぶら下がりを自動調整。Safari 17.4+ / Chrome 117+ 対応。
   ----------------------------------------------------------- */
body {
  text-wrap: pretty;
}
.hhd-video-card__title,
.hhd-product-card__title,
.hhd-place-card__title,
.hhd-menu-card__title,
.hhd-single-video__title,
.hhd-sg-member-hero__name,
.hhd-sg-sidebar__name,
.hhd-front__hero-title,
.hhd-sg-member-hero__name,
.hhd-region-hero__title,
.hhd-brand-hero__title,
.hhd-series-hero__title {
  text-wrap: pretty;
}

/* ⑦ max-width 統一（860px → 1120px）
   -----------------------------------------------------------
   旧 .hhd-single-video（max-width: 860px）は Phase 03-B で
   .hhd-sv（max-width: 1120px）に刷新済み。
   旧 .hhd-archive-guest / .hhd-archive-video は
   1060px のまま残っているため 1120px に合わせる。
   ----------------------------------------------------------- */
.hhd-archive-guest,
.hhd-archive-video,
.hhd-front {
  max-width: 1120px !important;
}

/* ⑧ hhd-empty（共通空状態テキスト）
   -----------------------------------------------------------
   archive-region / search.php 等で使用するが未定義。
   ----------------------------------------------------------- */
.hhd-empty {
  font-family: var(--hhd-font-body);
  font-size: 14px;
  color: var(--hhd-text3);
  text-align: center;
  padding: 48px 0;
}

/* ============================================================
   TOPページ レイアウト改善 追記CSS
   style-audit-patch.css の後に続けて style.css 末尾に追記
   ============================================================ */

/* もっと探す（EXPLORE）3タイル
   ----------------------------------------------------------- */
.hhd-front__explore-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hhd-front__explore-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 20px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  color: var(--hhd-text);
  transition: border-color .15s, background .15s;
}
.hhd-front__explore-tile:hover {
  border-color: var(--hhd-accent);
  background: var(--hhd-accent-light);
  color: var(--hhd-accent-dark);
}
.hhd-front__explore-tile__en {
  font-family: var(--hhd-font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--hhd-text3);
}
.hhd-front__explore-tile:hover .hhd-front__explore-tile__en {
  color: var(--hhd-accent-dark);
}
.hhd-front__explore-tile__ja {
  font-family: var(--hhd-font-display);
  font-size: 26px;
  font-weight: 700;
  margin-top: 3px;
}
.hhd-front__explore-tile__count {
  font-family: var(--hhd-font-mono);
  font-size: 12px;
  color: var(--hhd-accent-dark);
  margin-top: 8px;
}

@media (max-width: 560px) {
  .hhd-front__explore-tiles {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hhd-front__explore-tile__ja { font-size: 22px; }
}

/* ===== YouTube チャンネル登録 CTA ===== */
.hhd-yt-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-left: 4px solid var(--hhd-red);
  border-radius: var(--hhd-radius);
  padding: 16px 20px;
  margin-bottom: 40px;
}
.hhd-yt-cta__icon { flex-shrink: 0; }
.hhd-yt-cta__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hhd-yt-cta__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hhd-text);
}
.hhd-yt-cta__sub {
  font-size: 12px;
  color: var(--hhd-text3);
}
.hhd-yt-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--hhd-radius);
  background: var(--hhd-red);
  color: #fff;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.hhd-yt-cta__btn:hover { opacity: .85; color: #fff; }
@media (max-width: 560px) {
  .hhd-yt-cta { flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; }
  .hhd-yt-cta__icon { width: 32px; height: 32px; }
  .hhd-yt-cta__icon svg { width: 32px; height: 32px; }
  .hhd-yt-cta__title { font-size: 13px; word-break: keep-all; overflow-wrap: break-word; }
  .hhd-yt-cta__sub { font-size: 11px; }
  .hhd-yt-cta__btn { width: 100%; box-sizing: border-box; justify-content: center; margin-top: 4px; }
}


/* ============================================================
   補足画像ブロック（single-video.php [5c]）
   ============================================================ */
.hhd-memo-image {
  margin: 32px 0 40px;
  border-radius: var(--hhd-radius);
  overflow: hidden;
}
.hhd-memo-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hhd-radius);
}
.hhd-memo-image__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--hhd-text3);
  line-height: 1.6;
}

/* ============================================
   ヘッダー独自レイアウト（SWELL 非依存版）
   ============================================ */
.hhd-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  background: var(--hhd-bg-dark);
  color: var(--hhd-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: background 0.2s, box-shadow 0.2s;
  overflow: visible;
}
.hhd-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
}
/* グローバルナビ */
.hhd-global-nav {
  margin-left: auto;
}
.hhd-gnav__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hhd-gnav__list a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--hhd-radius);
  transition: color 0.15s, background 0.15s;
}
@media (max-width: 768px) {
  .hhd-global-nav {
    display: none;
  }
}
/* ページ全体のメインコンテンツが固定ヘッダーに隠れないよう body に padding */
/* WP グローバルスタイルが body { padding-top: 0 } を注入するため !important で対抗 */
body {
  padding-top: 64px !important;
}
/* WP 管理バー（ログイン中）がある時はヘッダーを管理バーの下にずらす */
.admin-bar .hhd-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  .admin-bar .hhd-header {
    top: 46px !important;
  }
}
body.admin-bar {
  padding-top: 96px !important; /* 64px ヘッダー + 32px 管理バー */
}
@media (max-width: 782px) {
  body.admin-bar {
    padding-top: 110px !important; /* 64px + 46px */
  }
}
/* WP は 600px 未満で管理バーを display:none するが body.admin-bar クラスは残る。
   そのため top: 46px の空白が生じるので 600px 未満はリセットする。 */
@media (max-width: 600px) {
  .admin-bar .hhd-header {
    top: 0 !important;
  }
  body.admin-bar {
    padding-top: 64px !important;
  }
}
/* sticky 状態の上書き: .hhd-header (0,1,0) より高い詳細度 (0,2,0) で後置し、
   4799行目の dark-background を確実に打ち消す */
.hhd-header.hhd-header--sticky {
  background: var(--hhd-bg);
  color: var(--hhd-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.hhd-header.hhd-header--sticky .hhd-menu-toggle {
  color: var(--hhd-text);
}

/* .l-main は既存 CSS 複合セレクタ（.hhd-*.l-main）との互換維持 */
.l-main {
  min-height: 60vh;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   固定ページ（page.php）
   ============================================ */
.hhd-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.hhd-page__inner {
  width: 100%;
}
.hhd-page__header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--hhd-accent);
}
.hhd-page__title {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--hhd-text);
  margin: 0;
}
.hhd-page__body {
  font-size: 15px;
  line-height: 1.9;
}

/* パンくずリスト（独自実装） */
.hhd-breadcrumb {
  font-size: 13px;
  color: var(--hhd-text3);
  margin-bottom: 12px;
}
.hhd-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hhd-breadcrumb li::after {
  content: '›';
  margin-left: 4px;
  color: var(--hhd-text3);
  opacity: 0.6;
}
.hhd-breadcrumb li:last-child::after {
  content: none;
}
.hhd-breadcrumb a {
  color: var(--hhd-text3);
  text-decoration: none;
}
.hhd-breadcrumb a:hover {
  color: var(--hhd-accent-dark);
  text-decoration: underline;
}

/* ============================================================
   フッター前検索 CTA (.hhd-pre-footer-search)
   ============================================================ */
.hhd-pre-footer-search {
  background: var(--hhd-bg2, #f5f5f3);
  border-top: 1px solid var(--hhd-border, #e0e0dc);
  padding: 48px 24px;
}
.hhd-pre-footer-search__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.hhd-pre-footer-search__lead {
  font-size: 15px;
  line-height: 1.7;
  color: var(--hhd-text2, #555);
  margin: 0 0 20px;
}
.hhd-pre-footer-search__form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hhd-pre-footer-search__field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.hhd-pre-footer-search__field svg {
  position: absolute;
  left: 14px;
  color: var(--hhd-text3, #999);
  pointer-events: none;
}
.hhd-pre-footer-search__input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 40px;
  border: 1px solid var(--hhd-border, #e0e0dc);
  border-radius: 8px;
  font-size: 14px;
  color: var(--hhd-text, #1a1a1a);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.hhd-pre-footer-search__input::placeholder { color: var(--hhd-text3, #999); }
.hhd-pre-footer-search__input:focus { border-color: var(--hhd-accent, #d4a853); }
.hhd-pre-footer-search__btn {
  height: 48px;
  padding: 0 22px;
  background: var(--hhd-text, #1a1a1a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.hhd-pre-footer-search__btn:hover { opacity: 0.8; }

@media (max-width: 560px) {
  .hhd-pre-footer-search { padding: 36px 16px; }
  .hhd-pre-footer-search__form { flex-direction: column; }
  .hhd-pre-footer-search__field { width: 100%; }
  .hhd-pre-footer-search__btn { width: 100%; }
}

/* ============================================
   ページ先頭に戻るボタン（.hhd-back-to-top）
   ============================================ */
.hhd-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--hhd-bg-dark);
  color: var(--hhd-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.hhd-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hhd-back-to-top:hover {
  opacity: 0.85;
}
@media (max-width: 560px) {
  .hhd-back-to-top {
    right: 14px;
    bottom: 14px;
  }
}

/* ============================================
   視聴者の反応（コメント統計）
   ============================================ */
.hhd-comment-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.hhd-comment-stat__card {
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  padding: 20px 16px;
  text-align: center;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.hhd-comment-stat__card:hover {
  border-color: var(--hhd-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.hhd-comment-stat__value {
  font-family: var(--hhd-font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hhd-accent);
  margin-bottom: 8px;
}
.hhd-comment-stat__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hhd-text2);
}
.hhd-comment-stats__note {
  font-size: 11px;
  color: var(--hhd-text3);
  margin: 8px 0 0;
  text-align: right;
}

/* ============================================
   ランキングページ
   ============================================ */
.hhd-ranking {
  padding: 32px 0;
}
.hhd-ranking__content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.hhd-ranking__header {
  margin-bottom: 48px;
}
.hhd-ranking__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--hhd-text);
}
.hhd-ranking__description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hhd-text2);
  margin: 0;
}
.hhd-ranking__section {
  margin-bottom: 48px;
}
.hhd-ranking__section-title {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--hhd-accent);
  margin-bottom: 24px;
  color: var(--hhd-text);
}
.hhd-ranking__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hhd-ranking__item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: var(--hhd-bg-card);
  border: 1px solid var(--hhd-border);
  border-radius: var(--hhd-radius);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.hhd-ranking__item:hover {
  border-color: var(--hhd-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* サムネイルはvideo-card.phpと同じ16:9・再生ボタンホバー演出を踏襲 */
.hhd-ranking__thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 260px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}
.hhd-ranking__thumb-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 44%, rgba(0,0,0,0.44) 100%);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.hhd-ranking__thumb-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(255,255,255,0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M2 1.7v12.6L12.5 8z' fill='%230E0E10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28);
  transition: transform 0.15s, background-color 0.15s;
  pointer-events: none;
}
.hhd-ranking__item:hover .hhd-ranking__thumb-wrap::before {
  opacity: 1;
}
.hhd-ranking__item:hover .hhd-ranking__thumb-wrap::after {
  transform: translate(-50%, -50%) scale(1.06);
  background-color: var(--hhd-accent);
}
.hhd-ranking__video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 商品ランキング用: 動画(16:9)ではなく正方形サムネイル、再生ボタン演出なし */
.hhd-ranking__thumb-wrap--square {
  aspect-ratio: 1 / 1;
  background: var(--hhd-border);
}
.hhd-ranking__thumb-wrap--square::before,
.hhd-ranking__thumb-wrap--square::after {
  content: none;
}
.hhd-ranking__brand {
  display: block;
  font-size: 11px;
  color: var(--hhd-text3);
  margin-bottom: 4px;
}
.hhd-ranking__rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hhd-font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--hhd-accent);
  border-radius: 6px;
}
.hhd-ranking__info {
  min-width: 0;
  flex: 1;
}
.hhd-ranking__date {
  font-size: 12px;
  color: var(--hhd-text3);
  margin-bottom: 4px;
}
.hhd-ranking__video-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--hhd-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 12px;
}
.hhd-ranking__stats {
  display: flex;
  gap: 28px;
}
.hhd-ranking__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hhd-ranking__stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hhd-text3);
}
.hhd-ranking__stat-value {
  font-family: var(--hhd-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--hhd-text);
}
.hhd-ranking__no-data {
  padding: 48px 16px;
  text-align: center;
  color: var(--hhd-text2);
  font-size: 14px;
}

@media (max-width: 640px) {
  .hhd-ranking__title {
    font-size: 24px;
  }
  .hhd-ranking__item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .hhd-ranking__thumb-wrap {
    width: 100%;
  }
  .hhd-ranking__rank-badge {
    top: 10px;
    left: 10px;
  }
  .hhd-ranking__video-title {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .hhd-ranking__stats {
    gap: 20px;
  }
}