/* =====================================================
   03_goods.css
   グッズ関連スタイル
   - ② 種別アーカイブ (.tax-goods_genre .list)
   - ③ ジャンル別グッズ (.khgrp-*, .khgds-archive-*)
   - ④ グッズ詳細 (.khgds-*)
   - ⑤ グッズスマホアイキャッチ非表示
   - ⑧ 購入ボタン空href非表示
   - ⑨ アフィリエイト免責 (.khgds-affiliate-notice)
   - ⑩ Amazon商標 (.amazon-trademark-notice)
   - ⑫ 関連記事非表示 (single-goods)
   - ⑬ 最近見た商品 (.khgds-recent-*)
   - ⑮ ジャンルナビ (.khgds-genre-nav)
===================================================== */
   /* =====================================================
         ② 種別アーカイブ（/goods-genre/figure/ 等）：
         サムネ＋商品名のグリッド表示
         ※ /goods/ 自体は template_redirect で別レイアウト出力するので
           ここでは .post-type-archive-goods を対象にしない（衝突回避）
         ===================================================== */
   
   .tax-goods_genre .list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 18px;
     padding: 0 8px;
   }
   @media (min-width: 768px) {
     .tax-goods_genre .list {
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
       gap: 22px;
     }
   }
   
   .tax-goods_genre .list .a-wrap,
   .tax-goods_genre .list .entry-card-wrap {
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     border: none !important;
     box-shadow: none !important;
   }
   
   .tax-goods_genre .list .a-wrap {
     display: block !important;
     background: #fff;
     border: 1px solid #e6e8ee;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     transition: transform 0.18s ease, box-shadow 0.18s ease,
       border-color 0.18s ease;
     color: #222 !important;
     text-decoration: none !important;
   }
   .tax-goods_genre .list .a-wrap:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
     border-color: #f7d774;
   }
   
   .tax-goods_genre .entry-card-thumb,
   .tax-goods_genre .card-thumb {
     width: 100% !important;
     height: auto !important;
     margin: 0 !important;
     padding: 0 !important;
     float: none !important;
     display: block !important;
     background: #f3f4f8;
   }
   .tax-goods_genre .entry-card-thumb img,
   .tax-goods_genre .card-thumb img {
     width: 100% !important;
     height: auto !important;
     aspect-ratio: 1 / 1;
     object-fit: cover !important;
     display: block !important;
     margin: 0 !important;
     border-radius: 0 !important;
   }
   
   .tax-goods_genre .entry-card-snippet,
   .tax-goods_genre .entry-card-meta,
   .tax-goods_genre .entry-card-info,
   .tax-goods_genre .post-date,
   .tax-goods_genre .post-update,
   .tax-goods_genre .cat-label,
   .tax-goods_genre .entry-card-categories {
     display: none !important;
   }
   
   .tax-goods_genre .entry-card-content,
   .tax-goods_genre .card-content {
     margin-left: 0 !important;
     padding: 12px 12px 14px !important;
   }
   .tax-goods_genre .entry-card-title,
   .tax-goods_genre .card-title {
     font-size: 0.95em !important;
     font-weight: 700 !important;
     line-height: 1.45 !important;
     text-align: center !important;
     margin: 0 !important;
     color: #1f3373 !important;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   
   @media (max-width: 480px) {
     .tax-goods_genre .list {
       grid-template-columns: repeat(2, 1fr) !important;
       gap: 12px;
       padding: 0 4px;
     }
     .tax-goods_genre .entry-card-title {
       font-size: 0.85em !important;
     }
     .tax-goods_genre .entry-card-content {
       padding: 10px 8px !important;
     }
   }

   /* =====================================================
         ③ ジャンル別グッズ一覧（[kh_goods_by_genre] 用）
         /goods/ のアーカイブやショートコードを貼った固定ページで
         ジャンル毎にセクションに区切ったグリッド表示
         ===================================================== */
   /* /goods/ のフル幅見出し（サイドバーの上に横長で出す） */
   .khgds-archive-banner {
     margin: 0 0 24px;
     padding: 18px 22px;
     background: linear-gradient(90deg, #fff8e6 0%, #fff 100%);
     border-left: 6px solid #f7d774;
     border-radius: 6px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   }
   .khgds-archive-title {
     font-size: 1.5em;
     font-weight: 800;
     color: #1f3373;
     margin: 0 0 0.3em;
     line-height: 1.3;
   }
   .khgds-archive-desc {
     margin: 0;
     color: #666;
     font-size: 0.95em;
     line-height: 1.5;
   }
   @media (max-width: 600px) {
     .khgds-archive-banner {
       padding: 14px 16px;
       margin: 0 0 16px;
     }
     .khgds-archive-title {
       font-size: 1.25em;
     }
   }
   
   /* ジャンル別セクション：見やすさ優先の自動レイアウト
         1セクションが最低340px確保。幅に余裕があれば2個並ぶ。
         狭ければ自動で1個ずつ縦並びに切り替わる */
   .khgrp {
     margin: 1.6em 0;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
     gap: 24px;
   }
   .khgrp-section {
     margin-bottom: 0;
   }
   .khgrp-head {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 0.9em;
     padding-bottom: 0.4em;
     border-bottom: 2px solid #f7d774;
   }
   .khgrp-title {
     font-size: 1.25em;
     font-weight: 800;
     color: #1f3373;
     margin: 0;
     line-height: 1.3;
   }
   .khgrp-count {
     display: inline-block;
     font-size: 0.6em;
     font-weight: 700;
     padding: 2px 9px;
     background: #1f3373;
     color: #fff;
     border-radius: 99px;
     margin-left: 0.3em;
     vertical-align: middle;
     letter-spacing: 0.04em;
   }
   .khgrp-more {
     font-size: 0.9em;
     color: #1f3373 !important;
     text-decoration: none !important;
     font-weight: 700;
     transition: color 0.15s ease;
   }
   .khgrp-more:hover {
     color: #c04040 !important;
   }
   /* 各セクション内のカードグリッド：セクション幅に応じて自動調整
         最低150pxを確保し、入る分だけ並べる */
   .khgrp-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 10px;
   }
   @media (max-width: 480px) {
     .khgrp-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 8px;
     }
   }
   .khgrp-card {
     display: block;
     background: #fff;
     border: 1px solid #e6e8ee;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     transition: transform 0.18s ease, box-shadow 0.18s ease,
       border-color 0.18s ease;
     color: #222 !important;
     text-decoration: none !important;
   }
   .khgrp-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
     border-color: #f7d774;
   }
   .khgrp-thumbWrap {
     display: block;
     width: 100%;
     aspect-ratio: 1 / 1;
     background: #f3f4f8;
     overflow: hidden;
   }
   .khgrp-thumb {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .khgrp-thumbWrap--empty {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #aaa;
     font-size: 0.8em;
     letter-spacing: 0.05em;
   }
   .khgrp-name {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     padding: 8px 8px 10px;
     font-size: 0.78em;
     font-weight: 700;
     line-height: 1.4;
     text-align: center;
     color: #1f3373 !important;
   }
   @media (max-width: 480px) {
     .khgrp-name {
       font-size: 0.72em;
       padding: 6px 5px 8px;
     }
   }
   /* 固定（ピン）バッジ */
   .khgrp-card {
     position: relative;
   }
   .khgrp-card.is-pinned::before {
     content: "★ PIN";
     position: absolute;
     top: 6px;
     left: 6px;
     z-index: 2;
     font-size: 0.6em;
     font-weight: 800;
     letter-spacing: 0.05em;
     padding: 2px 7px;
     background: #c04040;
     color: #fff;
     border-radius: 99px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }
   .khgrp-card.is-pinned {
     border-color: #f7d774;
     box-shadow: 0 4px 14px rgba(247, 215, 116, 0.35);
   }
   .khgrp-noitem,
   .khgrp-empty {
     color: #888;
     font-size: 0.9em;
     padding: 14px;
     text-align: center;
     background: #fafbfd;
     border: 1px dashed #d8def0;
     border-radius: 8px;
   }
   @media (max-width: 480px) {
     .khgrp-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 10px;
     }
     .khgrp-name {
       font-size: 0.82em;
       padding: 8px 6px 10px;
     }
     .khgrp-title {
       font-size: 1.1em;
     }
   }
   
   /* =====================================================
         グッズ詳細ページ用CSS（各投稿のHTMLが参照）
         -----------------------------------------------------
         各投稿にstyleブロックを書くとサーバーWAFで弾かれるので
         ここに一元化。各投稿はHTMLだけを貼り付け
         ===================================================== */
   .khgds-wrap {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
       "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
     color: #222;
     margin: 1.6em 0 2.4em;
     line-height: 1.7;
   }
   .khgds-layout {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
   }
   @media (min-width: 768px) {
     .khgds-layout {
       grid-template-columns: minmax(280px, 46%) 1fr;
       gap: 36px;
       align-items: flex-start;
     }
   }
   .khgds-gallery {
     position: relative;
   }
   .khgds-main {
     position: relative;
     width: 100%;
     aspect-ratio: 1/1;
     background: #f3f4f8;
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid #e6e8ee;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
   }
   .khgds-mainImg {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
     background: #fff;
   }
   .khgds-thumbs {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
     margin-top: 10px;
   }
   .khgds-thumb {
     width: 100%;
     aspect-ratio: 1/1;
     object-fit: cover;
     background: #f3f4f8;
     border: 2px solid #e6e8ee;
     border-radius: 8px;
     cursor: pointer;
     transition: border-color 0.15s ease, transform 0.15s ease;
   }
   .khgds-thumb:hover {
     transform: translateY(-2px);
   }
   .khgds-thumb.is-active {
     border-color: #1f3373;
     box-shadow: 0 0 0 2px rgba(31, 51, 115, 0.18);
   }
   .khgds-thumb:not([src]),
   .khgds-thumb[src=""] {
     display: none;
   }
   .khgds-info {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   .khgds-status {
     display: inline-block;
     align-self: flex-start;
     padding: 4px 12px;
     font-size: 0.82em;
     font-weight: 800;
     letter-spacing: 0.04em;
     border-radius: 99px;
     color: #fff;
     background: #888;
   }
   .khgds-status.is-preorder {
     background: #1f3373;
   }
   .khgds-status.is-onsale {
     background: #2e8c4a;
   }
   .khgds-status.is-lottery {
     background: #b46a1e;
   }
   .khgds-status.is-closed {
     background: #666;
   }
   .khgds-status.is-soldout {
     background: #b03030;
   }
   .khgds-meta {
     display: flex;
     gap: 14px;
     align-items: baseline;
     font-size: 0.95em;
     padding: 6px 0;
     border-bottom: 1px dashed #e0e3ec;
   }
   .khgds-metaLabel {
     color: #888;
     font-size: 0.85em;
     font-weight: 700;
     min-width: 70px;
   }
   .khgds-metaValue {
     font-weight: 700;
     color: #222;
   }
   .khgds-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 2px;
   }
   .khgds-tag {
     font-size: 0.78em;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 99px;
     background: #eef1f8;
     color: #1f3373;
     border: 1px solid #d8def0;
   }
   .khgds-desc {
     margin-top: 6px;
     padding: 14px 16px;
     background: #fafbfd;
     border-radius: 10px;
     border: 1px solid #ecedf3;
   }
   .khgds-descTitle {
     font-size: 1em;
     font-weight: 800;
     color: #1f3373;
     margin: 0 0 0.5em;
     padding-bottom: 0.3em;
     border-bottom: 1px solid #e6e8ee;
   }
   .khgds-desc p {
     margin: 0.4em 0;
     font-size: 0.95em;
   }
   .khgds-descList {
     margin: 0.4em 0;
     padding-left: 1.3em;
     font-size: 0.92em;
   }
   .khgds-descList li {
     margin: 0.15em 0;
   }
   .khgds-buy {
     margin-top: 10px;
   }
   .khgds-buyTitle {
     font-size: 1em;
     font-weight: 800;
     color: #1f3373;
     margin: 0 0 0.5em;
   }
   .khgds-btns {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   .khgds-btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 16px;
     font-size: 0.95em;
     font-weight: 800;
     color: #fff !important;
     text-decoration: none !important;
     border-radius: 10px;
     background: #444;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
     transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
     letter-spacing: 0.02em;
   }
   .khgds-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
     filter: brightness(1.08);
   }
   .khgds-btnLabel {
     display: flex;
     align-items: baseline;
     gap: 10px;
     flex-wrap: wrap;
   }
   .khgds-btnText {
     font-weight: 800;
   }
   .khgds-btnPrice {
     font-size: 0.85em;
     font-weight: 700;
     opacity: 0.92;
     padding: 1px 8px;
     border-radius: 99px;
     background: rgba(255, 255, 255, 0.18);
   }
   .khgds-btnArrow {
     font-size: 1.4em;
     font-weight: 400;
     line-height: 1;
     opacity: 0.85;
     margin-left: 8px;
   }
   .khgds-btn--amazon {
     background: #ff9900;
     color: #1f1f1f !important;
   }
   .khgds-btn--amazon .khgds-btnPrice {
     background: rgba(0, 0, 0, 0.18);
   }
   .khgds-btn--rakuten {
     background: #bf0000;
   }
   .khgds-btn--official {
     background: #1f3373;
   }
   .khgds-btn--yahoo {
     background: #ff0033;
   }
   .khgds-btn--bandai {
     background: #e40012;
   }
   .khgds-buyNote {
     margin: 8px 0 0;
     font-size: 0.78em;
     color: #888;
     text-align: right;
   }
   @media (max-width: 480px) {
     .khgds-btnLabel {
       flex-direction: column;
       align-items: flex-start;
       gap: 3px;
     }
     .khgds-btnPrice {
       font-size: 0.78em;
     }
   }

   /* =====================================================
         ⑤ グッズ詳細ページ：スマホ時のアイキャッチ画像を非表示
         -----------------------------------------------------
         グッズ投稿は本文内のメイン画像（.khgds-mainImg）で表示するため、
         スマホで上に表示されるアイキャッチ画像を非表示にする。
         PCはそのまま。
         アーカイブ一覧のサムネには影響なし（あちらは .entry-card-thumb）
   
         アーカイブ一覧のサムネには影響なし（あちらは .entry-card-thumb）
         ===================================================== */
   @media (max-width: 768px) {
     body.single-goods .eye-catch,
     body.single-goods .entry-thumb,
     body.single-goods .post-thumb,
     body.single-goods .article-thumb,
     body.single-goods header.entry-header .eye-catch {
       display: none !important;
     }
   }

   /* =====================================================
         8 購入ボタン：href が空 or プレースホルダーのとき自動非表示
         -----------------------------------------------------
         投稿で (a)タグ を削除し忘れた場合の保険。
         楽天以外のボタンにも適用される。
         ===================================================== */
   .khgds-btn[href=""],
   .khgds-btn[href="#"],
   .khgds-btn[href^="#楽天"],
   .khgds-btn[href^="#URL"],
   .khgds-btn[href*="★★★"] {
     display: none !important;
   }
   
   /* =====================================================
         9 グッズ単体ページ：アフィリエイト免責表示
         ===================================================== */
   .khgds-affiliate-notice {
     display: block;
     margin: 24px 0 0;
     padding: 12px 14px;
     font-size: 0.82em;
     line-height: 1.6;
     color: #666;
     background: #fafbfd;
     border: 1px solid #e6e8ee;
     border-left: 4px solid #f7d774;
     border-radius: 6px;
   }
   /* =====================================================
         10 Amazon商標表記（フッター用・目立たない控えめスタイル）
         ===================================================== */
   .amazon-trademark-notice {
     font-size: 0.72em;
     color: #888;
     text-align: center;
     padding: 8px 16px;
     line-height: 1.5;
     letter-spacing: 0.02em;
   }

   /* =====================================================
         12 グッズ単体ページ：Cocoon関連記事を非表示
         -----------------------------------------------------
         グッズ単体ページの一番下に出るCocoonの「関連記事」を非表示。
         代わりに「最近見た商品」（JavaScript で生成）を表示。
         ===================================================== */
   body.single-goods .related-entries,
   body.single-goods .related-entry-main,
   body.single-goods .related-entry-wrap,
   body.single-goods #related-entries {
     display: none !important;
   }
   
   /* =====================================================
         13 グッズ単体ページ：最近見た商品セクション
         ===================================================== */
   .khgds-recent-viewed {
     margin: 36px 0 0;
   }
   .khgds-recent-title {
     font-size: 1.2em;
     font-weight: 800;
     color: #1f3373;
     margin: 0 0 1em;
     padding: 0.5em 0.7em;
     border-left: 5px solid #f7d774;
     background: linear-gradient(90deg, #fafbfd 0%, transparent 100%);
     line-height: 1.4;
   }
   .khgds-recent-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 10px;
   }
   .khgds-recent-card {
     display: block;
     background: #fff;
     border: 1px solid #e6e8ee;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     transition: transform 0.18s ease, box-shadow 0.18s ease,
       border-color 0.18s ease;
     color: #222 !important;
     text-decoration: none !important;
   }
   .khgds-recent-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
     border-color: #f7d774;
   }
   .khgds-recent-thumbWrap {
     display: block;
     width: 100%;
     aspect-ratio: 1/1;
     background: #f3f4f8;
     overflow: hidden;
   }
   .khgds-recent-thumb {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .khgds-recent-thumbWrap--empty {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #aaa;
     font-size: 0.8em;
     letter-spacing: 0.05em;
   }
   .khgds-recent-name {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     padding: 7px 8px 9px;
     font-size: 0.78em;
     font-weight: 700;
     line-height: 1.4;
     text-align: center;
     color: #1f3373 !important;
   }
   @media (max-width: 480px) {
     .khgds-recent-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 8px;
     }
     .khgds-recent-name {
       font-size: 0.72em;
       padding: 6px 5px 8px;
     }
     .khgds-recent-title {
       font-size: 1.1em;
     }
   }

   /* =====================================================
         15 /goods/ ジャンルナビ
         ===================================================== */
   .khgds-genre-nav {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 0 0 28px;
     padding: 0 4px;
   }
   .khgds-genre-nav-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 16px;
     font-size: 0.9em;
     font-weight: 700;
     color: #1f3373 !important;
     background: #fff;
     border: 1px solid #d8def0;
     border-radius: 99px;
     text-decoration: none !important;
     transition: transform 0.15s ease, background 0.15s ease,
       border-color 0.15s ease, box-shadow 0.15s ease;
   }
   .khgds-genre-nav-link:hover {
     background: #fff8e6;
     border-color: #f7d774;
     transform: translateY(-1px);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
   }
   .khgds-genre-nav-count {
     display: inline-block;
     font-size: 0.72em;
     font-weight: 800;
     padding: 1px 8px;
     background: #1f3373;
     color: #fff;
     border-radius: 99px;
     letter-spacing: 0.03em;
   }
   
   /* スムーズスクロール（ページ全体に効く） */
   html {
     scroll-behavior: smooth;
   }
   
   /* セクションへのジャンプ時、Cocoonの固定ヘッダー分を上に余白 */
   .khgrp-section {
     scroll-margin-top: 80px;
   }
   
   @media (max-width: 480px) {
     .khgds-genre-nav {
       gap: 6px;
     }
     .khgds-genre-nav-link {
       padding: 7px 13px;
       font-size: 0.85em;
     }
   }