/* =========================================================
   GoodsDB 共通スタイル（整理済み・全部版）
   ========================================================= */

/* ===== レイアウト：フィルタバー ===== */
.gdb__bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}

.gdb__filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end; /* ← ラベル下端で揃える（ズレ解消） */
  gap:12px;
}

/* labelは上：テキスト / 下：入力 */
.gdb__filters label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:#666;
  line-height:1.2;
  margin:0;
}

/* select / button の高さ・角丸・枠線を統一 */
.gdb__filters select,
.gdb__filters button{
  box-sizing:border-box;
  height:40px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid #cfcfcf;
  background:#fff;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  line-height:normal; /* ← line-height:40px だと環境でズレるので normal */
}

/* selectの矢印 */
.gdb__filters select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
}

/* ボタンは赤くしない（通常） */
#applyBtn,
#resetBtn{
  background:#fff;
  color:#222;
  border:1px solid #cfcfcf;
}

.gdb__filters button:hover{
  background:#f6f6f6;
}

/* ===== 一覧グリッド ===== */
.gdb__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:22px;
}


/* ===== カード ===== */
.gdb__card{
  cursor:pointer;
}

.gdb__card .thumb{
  position: relative;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;

  aspect-ratio: 1 / 1;      /* ★正方形に固定 */
  display: flex;            /* ★中央寄せ */
  align-items: center;
  justify-content: center;
}

.gdb__card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* ★不足分は余白 */
  display: block;
}

/* PICKUPバッジ */
.badge{
  position:absolute;
  top:8px;
  left:8px;
  background:#ff3b30;
  color:#fff;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
}

/* ===== モーダル ===== */
/* ===== モーダル（中央配置版）===== */
.gdb__modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;   /* 最前面 */
  padding:20px;

  /* 中央寄せのためのレイアウト */
  align-items:center;
  justify-content:center;
}

.gdb__modal.open{
  display:flex;         /* block ではなく flex */
}

.gdb__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

.gdb__panel{
  position:relative;
  background:#fff;
  width:min(900px, 92vw);
  margin:0;             /* 中央寄せは親flexでやるので 0 */
  border-radius:16px;
  padding:20px;

  max-height:85vh;      /* 画面内に収める */
  overflow:auto;        /* はみ出たら中だけスクロール */
}

.gdb__close{
  position:absolute;
  top:10px;
  right:10px;

  width:44px;
  height:44px;
  padding:0;                 /* ← 余計な当たり判定ズレ防止 */
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;

  font-size:18px;
  line-height:1;

  z-index:1000;              /* ← これが重要：常に最前面 */
  pointer-events:auto;

  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.gdb__close:hover{
  background:#f5f5f5;
  border-color:#cfcfcf;
}

.gdb__close:active{
  transform: translateY(1px);
}

.gdb__close:focus-visible{
  outline: 2px solid rgba(255,120,0,.45);
  outline-offset: 2px;
}
.gdb__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.gdb__imgWrap img{
  width:100%;
  border-radius:10px;
  display:block;
}

/* =========================
   モーダル内：ショップボタン 3列レイアウト
   （4つ→2行目、7つ→3行目…は自動でこうなります）
========================= */

/* shops の直下に入っている「wrap(div)」を3列グリッドにする */
.gdb__info .shops > div{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

/* 1ショップ（row）を縦積み：ボタン + キャプション */
.gdb__info .shops > div > div{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gdb__info .shops a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;

  border: none;        /* ← 枠を消す */
  border-radius: 0;    /* ← 角丸も不要なら消す */
  background: transparent; /* ← 背景も消す */

  text-decoration: none;
}

/* ロゴ画像を枠内に収める（縦横比維持） */
.gdb__info .shops a img{
  max-width: 100%;
  max-height: 74px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =========================
   _pick 表示：ボタン画像の上に赤文字＋左右ライン
========================= */

/* 1ショップ単位を相対配置にして、上に重ねられるようにする */
.gdb__info .shops > div > div{
  position: relative;
  overflow: visible;
}

/* ボタン画像（a） */
.gdb__info .shops a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* _pick の文字（aの次にあるdiv）を “画像の上” に重ねる */
.gdb__info .shops > div > div > div{
  position: absolute;
  top: -9px;                 /* 位置：必要なら -10?-18 で調整 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  color: #e60012;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;

  padding: 0;
  background: transparent; /* 画像の上でも読みやすく */
  border-radius: 0;

  white-space: nowrap;
  pointer-events: none;
}

.gdb__info .shops > div > div > div::before,
.gdb__info .shops > div > div > div::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 2px;
  background: #e60012;
  transform-origin: center;
}

/* 左側： ／ 方向 */
.gdb__info .shops > div > div > div::before{
  right: 100%;
  margin-right: 4px;
  transform: translateY(-50%) rotate(40deg);
}

/* 右側： ＼ 方向 */
.gdb__info .shops > div > div > div::after{
  left: 100%;
  margin-left: 4px;
  transform: translateY(-50%) rotate(-40deg);
}

/* 文字が上に出るぶん、ショップ領域に少し余白を確保（任意だが推奨） */
.gdb__info .shops > div{
  padding-top: 10px;
}



/* ===== タイトル＆広告：goodsdbページだけ左寄せ ===== */
.page-slug-goodsdb .c-pageTitle,
.page-slug-goodsdb .c-pageTitle__inner,
.page-slug-goodsdb .c-postTitle,
.page-slug-goodsdb .l-articleHead{
  text-align:left !important;
}

.page-slug-goodsdb .swl-ad,
.page-slug-goodsdb .ad,
.page-slug-goodsdb .c-ad,
.page-slug-goodsdb [class*="ad"]{
  text-align:left !important;
}
/* ===== グッズDBページだけタイトルを左寄せ ===== */
body.page-id-16049 .l-mainContent__inner,
body.page-id-16049 .content_container{
  text-align:left !important;
}

/* タイトル自体も念のため */
body.page-id-16049 .c-pageTitle{
  text-align:left !important;
}
/* =====================================
   グッズDBページだけ完全フルワイド化
===================================== */

.page-id-16049 .l-container,
.page-id-16049 .l-mainContent,
.page-id-16049 .l-mainContent_inner,
.page-id-16049 .post_content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* =====================================
   グッズDB タイトルを上に詰める
===================================== */

.page-id-16049 .l-mainContent_inner {
  padding-top: 10px !important;
}

.page-id-16049 .c-pageTitle {
  margin-top: 0 !important;
}

.page-id-16049 .p-breadcrumb {
  margin-bottom: 0 !important;
}
/* =====================================
   グッズDB：パンくず?タイトル間の空白を詰める
===================================== */

/* パンくず下の余白を詰める */
.page-id-16049 .p-breadcrumb{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 記事ヘッダー周りの上余白を詰める（ここが残りやすい） */
.page-id-16049 .l-articleHead{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* メイン領域の上余白も念のため */
.page-id-16049 .l-mainContent_inner{
  padding-top: 0 !important;
}

/* タイトル自体の余白も最小化 */
.page-id-16049 .c-pageTitle{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* =====================================
   グッズDB：パンくずとタイトルの間の薄黄色余白を削除
===================================== */

.page-id-16049 .main_content {
  padding-top: 0 !important;
}

.page-id-16049 .l-mainContent {
  padding-top: 0 !important;
}

.page-id-16049 .l-mainContent_inner {
  padding-top: 0 !important;
}
.page-id-16049 .l-mainContent_inner > *:first-child {
  margin-top: 0 !important;
}
/* =====================================
   グッズDB：パンくず?タイトル間の薄黄色余白（l-contentのpadding）を消す
===================================== */

@media (min-width: 600px){
  .page-id-16049 .l-content{
    padding-top: 0 !important;
  }
}

.gdb__body{
  position: relative;
  z-index: 1;
}

/* =========================
   スマホ：ショップ注釈(_pick)の見やすさ改善＋幅確保
========================= */

/* 1) 768px以下：文字を少し大きく＆装飾を少しコンパクトに */
@media (max-width: 768px){

  .gdb__panel{
    width:min(720px, 94vw);
    margin:0;
    padding:16px;
  }

  /* モーダル本文は1列 */
  .gdb__body{
    grid-template-columns:1fr;
  }

  /* 一覧カードは1列のほうが見やすい */
  .gdb__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  /* 通販ボタンは2列 */
  .gdb__info .shops > div{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  .gdb__info .shops a{
    height:84px;
  }

  .gdb__info .shops > div > div > div{
    font-size: 17px;
    font-weight: 700;
    padding: 2px 4px;
    top: -15px;
  }

  .gdb__info .shops > div > div > div::before,
  .gdb__info .shops > div > div > div::after{
    width: 18px;
  }

  .gdb__info .shops > div > div > div::before{
    margin-right: 2px;
  }

  .gdb__info .shops > div > div > div::after{
    margin-left: 2px;
  }
}
/* 2) 520px以下：2列だと狭いので、1列にして幅を確保（重なり根絶） */
@media (max-width: 520px){
  .gdb__info .shops > div{
    grid-template-columns: 1fr;  /* ← 1列にして各ボタンを横幅いっぱいに */
    gap: 8px;
  }

  /* ボタンの高さも少しだけ上げると押しやすい */
  .gdb__info .shops a{
    height: 78px;
  }

  /* _pick を少し大きめに（1列なら余裕あり） */
  .gdb__info .shops > div > div > div{
    font-size: 14px;
  }
}

.gdb__pager{
  margin: 14px 0 0;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.gdb__pager button{
  padding:8px 12px;
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
}

.gdb__pager button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.gdb__pageInfo{
  font-size:13px;
  opacity:.8;
}