/* ===============================
   GOODS SECTION
   =============================== */

:root{
  --gd-max: 1180px;
  --gd-pad-x: 16px;
  --gd-gap: clamp(16px,2.4vw,24px);
  --gd-radius: 16px;
  --gd-line: #e6e8eb;
  --gd-card: #fff;
  --gd-text: #111;
  --gd-muted:#4b5563;
  --gd-shadow: 0 1px 2px rgba(0,0,0,.04);

  /* 調整ノブ（必要に応じてここだけ変えればOK） */
  --gd-sns-size: px;       
  --gd-btn-img-h: 36px;       
  --gd-title-lg: 20px;      
  --gd-title-sm: 16px;        
  --gd-lineclamp-sm: 2;      
}

.sec-goods{ background:#fff; padding: 24px 0 80px; }
.gd-wrap{
  max-width:var(--gd-max);
  margin:0 auto;
  padding:0 var(--gd-pad-x);
}
.gd-head{ margin: 4px 0 16px; }




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

/* ===== カード ===== */
.goods-card{
  background:var(--gd-card);
  border:1px solid var(--gd-line);
  border-radius:var(--gd-radius);
  box-shadow:var(--gd-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* キャプション */
.goods-caption{ padding: 12px 14px 0; }
.goods-title{
  margin:0 0 6px; color:var(--gd-text);
  font: 800 var(--gd-title-lg)/1.35 "Outfit","Noto Sans JP",system-ui,sans-serif;
}
.goods-detail{
  margin:0 0 12px; color:var(--gd-muted); font-size:14px; line-height:1.7;
}

/* small では文字サイズと行数を抑える */
.goods-card--small .goods-title{ font-size: var(--gd-title-sm); }

/* large は横幅を広く（≥960px のとき） */
@media (min-width: 960px){
  .goods-card--large{ grid-column: span 2; }
}

/* ===== アクション行（販売ボタン＆SNS） ===== */
.goods-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding: 10px 14px 14px;
}

/* 販売サイトボタン */
.goods-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.goods-btn img{ height: var(--gd-btn-img-h); width:auto; display:block; }
.goods-btn span{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:#fff; color:#111; font-weight:700; font-size:14px;
}
.goods-btn span{
  border: 2px solid #111;   
  border-radius: 999px;     
}


/* SNSアイコン */
.goods-sns{ display:flex; gap:10px; margin-left:auto; }
.goods-sns-item{
  display:inline-flex; width:var(--gd-sns-size); height:var(--gd-sns-size);
  border-radius:8px; overflow:hidden; align-items:center; justify-content:center;
  border:1px solid var(--gd-line); background:#fff;
}
.goods-sns-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ホバー演出（お好みで） */
.goods-btn:hover span{ filter: brightness(1.06); }
.goods-sns-item:hover{ transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* アクセシビリティ用 */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* すべてのカード画像を4:3に統一 */
.goods-img{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* デスクトップは3列固定 */
@media (min-width: 960px){
  .goods-grid{
    display:grid;
    gap: var(--gd-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* large の“2カラム幅”を無効化して全カード同じ幅に */
  .goods-card--large{ grid-column: auto; }
}

/* ヘッダーに追加の余白を確保（画像がはみ出さないように） */
.gd-head.trihead{
  position: relative;
  padding: 24px var(--gd-pad-x)
           calc(28px + var(--head-extra-bottom,0px))
           calc(var(--gd-pad-x) + var(--head-extra-left,0px));
  overflow: visible;
  isolation: isolate;
}

/* タイトル文字を右へ移動 */
.gd-title.has-deco{ position: relative; margin-left: var(--title-shift-x, 80); }

.gd-title.has-deco .en,
.gd-title.has-deco .ja
{
  position: relative;
  z-index: 2;
  font-weight: 800;
  letter-spacing: .02em;
  /* サイトのタイポに合わせて調整 */
  font-family: "Outfit","Noto Sans JP",system-ui,sans-serif;
  /* font-size: clamp(28px, 6vw, 64px); */
  font-size: clamp(42px,5vw,64px);
}

/* タイトル下にデコ画像（サイズ＆位置は変数で） */
.gd-title.has-deco .title-deco{
  position: absolute; z-index: 1;
  left: 0; top: 50%;
  width: var(--deco-w, 150px); height: auto;
  transform: translate(var(--deco-x,0), calc(-50% + var(--deco-y,0)));
  pointer-events: none;
  opacity: var(--deco-opacity, 1);
  mix-blend-mode: normal; /* 画像の色そのまま */
}

/* モバイルは少し控えめに */
@media (max-width: 600px){
  .gd-title.has-deco{ margin-left: calc(var(--title-shift-x,) * .6); }
  .gd-head.trihead{
    padding-left: calc(var(--gd-pad-x) + var(--head-extra-left,0px) * .6);
    padding-bottom: calc(28px + var(--head-extra-bottom,0px) * .6);
  }
  .gd-title.has-deco .title-deco{
    width: clamp(200px, 46vw, 360px);
  }
}


/* タイトルの文字だけを移動（画像は据え置き） */
.gd-title{
  display: inline-flex;
  align-items: baseline;
  gap: var(--title-gap, .6em);
}

/* 既存：デコ画像は h1 内で絶対配置 */
.gd-title.has-deco .title-deco{
  position: absolute; z-index: 1;
  left: 0; top: 50%;
  width: var(--deco-w, 150px);
  height: auto;
  transform: translate(var(--deco-x,0), calc(-50% + var(--deco-y,0)));
  pointer-events: none;
}

/* タイトル下の余白をデコ画像ぶん自動で増やす */
.gd-head.trihead{
  --deco-bleed-bottom: 50px;
  padding:
    24px var(--gd-pad-x)
    calc(28px + var(--head-extra-bottom,0px) + var(--deco-bleed-bottom))
    calc(var(--gd-pad-x) + var(--head-extra-left,0px));
  overflow: visible;
  isolation: isolate;
}

.gd-head.trihead + .goods-grid{ margin-top: 0; }


.gd-head.trihead{
  position: relative;
  isolation: isolate;
  padding:
    calc(24px + var(--head-extra-top, 0px))
    calc(var(--gd-pad-x) + var(--head-extra-right, 0px))
    calc(0px + var(--head-extra-bottom, 0px) + var(--deco-bleed-bottom, 0px))
    calc(var(--gd-pad-x) + var(--head-extra-left, 0px));
  overflow: visible;
}

.gd-title{
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--title-gap, .6em);
  font: 900 clamp(28px, 4.2vw, 42px)/1.1 "Outfit","Noto Sans JP",system-ui,sans-serif;
  letter-spacing: .02em;
  color: #111;
}

.gd-title.has-deco{ position: relative; }
.gd-title.has-deco .en,
.gd-title.has-deco .ja{
  position: relative; z-index: 2; 
  /* transform: translate(var(--title-x, 0px), var(--title-y, 0px)); */
  transform: translate(30px, var(--title-y, 0px));
}

/* タイトルの下側に“画像デコ”を配置 */
.gd-title.has-deco .title-deco{
  position: absolute; z-index: 1; 
  left: 0; top: 60%;
  width: var(--deco-w, 10px); height: auto;
  pointer-events: none; opacity: var(--deco-opacity, 1);
  transform-origin: var(--deco-origin-x, 0%) var(--deco-origin-y, 50%);
  transform:
    translate(var(--deco-x, 0px), calc(-50% + var(--deco-y, 0px)))
    rotate(var(--deco-rotate, 0deg))
    scale(var(--deco-scale, 1))
    scaleX(var(--deco-flip-x, 1))
    scaleY(var(--deco-flip-y, 1));
}

/* ヘッダー直後のグリッドとの間隔 → ヘッダーのpaddingで吸収するので0 */
.gd-head.trihead + .goods-grid{ margin-top: 0; }

/* モバイルは控えめに（必要なら調整） */
@media (max-width: 600px){
  .gd-title.has-deco{
    --deco-w: clamp(150px, 40vw, 360px);
  }
}


/* large を 1行に・内部を左右2カラムに */
@media (min-width: 960px){
  .goods-card--large.is-row{ grid-column: 1 / -1; } 
}

.goods-card--large.is-row{ padding: 12px; }
.goods-card--large.is-row .gdL-grid{
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

/* 左：メイン画像＆サムネ */
.gdL-main{
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display:block;
  border-radius: 16px;
}
/* .gdL-thumbs{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; } */
.gdL-thumbs{ display:none; gap:12px; margin-top:12px; flex-wrap:wrap; }
.gdL-thumb{
  border:0; background:transparent; padding:0; cursor:pointer;
  width: 108px; height: 81px; border-radius: 12px; overflow:hidden; opacity:.9;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.gdL-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gdL-thumb.is-active{ outline:2px solid #111; opacity:1; }

/* 右：テキスト＆ボタン */
.gdL-body .goods-title{ margin: 6px 0 10px; font:800 22px/1.3 "Outfit","Noto Sans JP",system-ui,sans-serif; }
.gdL-body .goods-detail{ margin:0 0 14px; color:#4b5563; font-size:14px; line-height:1.8; }
.gdL-body .goods-actions{ margin-top: 6px; }

/* モバイルは縦積み */
@media (max-width: 959.98px){
  .goods-card--large.is-row .gdL-grid{ grid-template-columns: 1fr; }
  .gdL-thumb{ width: 88px; height: 66px; }
}


/* ===== グリッド土台：常に12カラム ===== */
.goods-grid{
  display: grid;
  gap: var(--gd-gap);
  grid-template-columns: repeat(12, minmax(0,1fr));
}

/* モバイルは1列 */
.goods-card{ grid-column: 1 / -1; }

/* デスクトップ：small=4カラム(=3列)、large(row)=全幅 */
@media (min-width: 960px){
  .goods-card--small{ grid-column: span 4; }          
  .goods-card--large.is-row{ grid-column: 1 / -1; }   
}

/* large の内部2カラム（左画像/右テキスト） */
.goods-card--large.is-row{ padding: 12px; }
.goods-card--large.is-row .gdL-grid{
  display: grid;
  grid-template-columns: minmax(0,58%) minmax(0,42%);
  gap: clamp(16px,2.4vw,28px);
  align-items: start;
}
@media (max-width: 959.98px){
  .goods-card--large.is-row .gdL-grid{ grid-template-columns: 1fr; }
}

.goods-sns-item { display:inline-flex; align-items:center; justify-content:center; }
.goods-sns-item .sns-fallback { font-size:12px; font-weight:700; color:#111; }


:root { --gd-sns-h: 28px; }

.goods-sns-item{
  height: var(--gd-sns-h);
  width: auto; 
  border-radius: 8px;
  overflow: hidden; 
  align-items: center;
  justify-content: center;
}

.goods-sns-item img{
  height: 100%;
  width: auto;                   
  object-fit: contain;         
  display: block;
  max-width: 160px;
}


@media (min-width: 960px){
  .goods-grid{ grid-template-columns: repeat(12, minmax(0,1fr)); } 
  .goods-card--small{ grid-column: span 4; }                     
  .goods-card--large.is-row{ grid-column: 1 / -1 !important; }    
}


.goods-sns-item{
  border: none !important;
  box-shadow: none !important;
}


.goods-card--large.is-row.no-media .gdL-grid{
  grid-template-columns: 1fr;
}


.goods-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.goods-btn img{ height: var(--gd-btn-img-h); width:auto; display:block; }  
.goods-btn{ border:none; box-shadow:none; }                                   


:root{
  --gd-sns-size: 32px;     
}

/* 並び */
.goods-actions .goods-sns{ display:flex; gap:10px; }

/* a.goods-sns-item が“箱”になる */
.goods-actions .goods-sns-item{
  width: var(--gd-sns-size) !important;
  height: var(--gd-sns-size) !important;
  border:1px solid var(--gd-line);
  border-radius:8px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
}

/* 裸の <img> が .goods-sns 直下に来たときは、画像自身を“箱”に見せる */
.goods-actions .goods-sns > img{
  width: var(--gd-sns-size) !important;
  height: var(--gd-sns-size) !important;
  border:1px solid var(--gd-line);
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
  display:block;
  object-fit: contain !important;
}

.goods-actions .goods-sns-item img,
.goods-actio


:root{ --gd-sns-size: 32px; }       

.goods-actions .goods-sns{ display:flex; gap:10px; }

.goods-actions .goods-sns-item{
  width:var(--gd-sns-size) !important;
  height:var(--gd-sns-size) !important;
  border:1px solid var(--gd-line);
  border-radius:8px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
}

.goods-actions .goods-sns > img{
  width:var(--gd-sns-size) !important;
  height:var(--gd-sns-size) !important;
  border:1px solid var(--gd-line);
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
  display:block;
  object-fit:contain !important;
}

.goods-actions .goods-sns-item img,
.goods-actions .goods-sns > img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
}


.nm-imgbtn{
  display:inline-flex; padding:0; border:0; background:none; cursor:pointer;
  border-radius:999px; 
}
.nm-imgbtn:focus{ outline:2px solid #111; outline-offset:4px; }

.nm-imgbtn img{
  display:block; height:auto;
  width:180px;                
  background:#fff;
  border:1.5px solid #111;
  border-radius:999px;
  padding:8px;               
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease;
}
.nm-imgbtn:hover img{ transform:translateY(-1px); box-shadow:0 2px 0 #111; }

.nm-imgbtn--sm img{ width:140px; }
.nm-imgbtn--lg img{ width:220px; }


:root {
  --gd-icon-h: 36px;  
}

/* ボタンの外側 */
.goods-btn,
.goods-sns-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;  
  border: none;             
  padding: 0;
}

/* 中の画像は高さだけ統一、横は比率そのまま */
.goods-btn img,
.goods-sns-item img {
  height: var(--gd-icon-h);
  width: auto;
  display: block;
}

.goods-btn,
.goods-sns-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}

.goods-btn img,
.goods-sns-item img {
  height: 36px; 
  width: auto;
  display: block;
}

:root {
  --gd-icon-h: 32px;  
}

.goods-sns-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}

.goods-sns-item img {
  height: var(--gd-icon-h);
  width: auto;      
  display: block;
}


/* ==== GOODS: アイコンサイズ一括調整（最終上書き） ==== */
:root{
  --gd-icon-h: 44px; 
}

/* SPは少し控えめに */
@media (max-width: 600px){
  :root{ --gd-icon-h: 38px; }
}

/* 左寄せの並びはキープ */
.goods-actions{
  display:flex; align-items:end; justify-content:flex-start;
  gap:12px;
}

/* 外枠は背景/枠なし。高さだけ少しゆとりを持たせる */
.goods-actions .goods-btn,
.goods-actions .goods-sns-item{
  display:inline-flex; align-items:end; justify-content:start;
  padding:0; border:none; background:transparent;
  min-height: calc(var(--gd-icon-h) + 4px);
}

/* 画像の“高さだけ”統一（横幅は比率そのまま） */
.goods-actions .goods-btn img,
.goods-actions .goods-sns-item img{
  height: var(--gd-icon-h) !important;
  width: auto !important;
  display:block; object-fit: contain;
}


:root{
  --icon-h: 38px; 
  --icon-gap: 8px;
}

.goods-actions{
  display:flex; align-items:end; gap:var(--icon-gap);
  justify-content:flex-start; flex-wrap:wrap;
}


.goods-icon{
  display:inline-flex; align-items:center; justify-content:center;
  height: calc(var(--icon-h) + 8px);   
  padding: 4px 10px;                 
  background:transparent; border:none; border-radius:9999px;
  width: var(--icon-slot-w, auto);
  box-sizing: content-box;               
}

.goods-icon img{
  height: var(--icon-h);
  width: auto;             
  display:block; object-fit:contain;
}


/* ===== Goods large：メインを 3:4 に固定 ===== */
.goods-card--large .gdL-media{ display:flex; flex-direction:column; }
.goods-card--large .gdL-view{
  position:relative; overflow:hidden; border-radius:16px;
  aspect-ratio: 4/3;  
  background:#f5f5f7;
}
.goods-card--large .gdL-view .gdL-main{
  position:absolute; inset:0;
  width:100%; height:100% !important; 
  object-fit:cover; object-position:center; display:block;
}

/* サムネも 3:4 に統一 */
.goods-card--large .gdL-thumbs{ margin-top:10px; gap:8px; flex-wrap:wrap; }
.goods-card--large .gdL-thumb img{
  width:96px; aspect-ratio:3/4; height:auto; object-fit:cover;
  border-radius:10px; display:block;
}
.goods-card--large .gdL-thumb.is-active img{ outline:2px solid #111; }


/* 大画像はクリックできるように */
.goods-card--large .gdL-view{ cursor: zoom-in; }

/* Lightbox（簡易） */
.gdlb{ position:fixed; inset:0; display:none; }
.gdlb.is-open{ display:block; }
.gdlb__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.gdlb__sheet{ position:absolute; inset:6% 4%;  border-radius:12px; display:grid; place-items:center; }
.gdlb__img{ max-width:90%; max-height:86%; display:block; }
.gdlb__close, .gdlb__nav{
  position:absolute; background:#fff; border:0; border-radius:10px; width:36px; height:36px; font-size:20px; cursor:pointer;
}
.gdlb__close{ top:12px; right:12px; }
.gdlb__prev{ left:12px; top:50%; transform:translateY(-50%); }
.gdlb__next{ right:12px; top:50%; transform:translateY(-50%); }
.gdlb__meta{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; }


/* ライトボックスを最前面に（ヘッダーより上） */
#gdlLightbox.gdlb,
#stLightbox.stlb{
  position: fixed;
  inset: 0;
  z-index: 2147483000; 
}


.gdlb__sheet, .gdlb__close, .gdlb__nav,
.stlb__sheet, .stlb__close, .stlb__nav{
  z-index: 1;
}


.gdlb__sheet, .stlb__sheet{
  top: calc(env(safe-area-inset-top, 0px) + 6%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6%);
  left: 4%;
  right: 4%;
}


html.lb-open header,
html.lb-open .site-header,
html.lb-open .global-header{
  pointer-events: none;
}



.gdlb, .stlb{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483647;         
}
.gdlb.is-open, .stlb.is-open{ display:block; }

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

.gdlb__sheet, .stlb__sheet{
  position:absolute;
  left:4%; right:4%;
  top: calc(env(safe-area-inset-top, 0px) + 6%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6%);
  display:grid; place-items:center;
}

.gdlb__img, .stlb__img{ max-width:90%; max-height:86%; display:block; }

.gdlb__close, .gdlb__nav,
.stlb__close, .stlb__nav{
  position:absolute; background:#fff; border:0; border-radius:10px;
  width:36px; height:36px; font-size:20px; cursor:pointer; z-index:1;
}
.gdlb__close, .stlb__close{ top:12px; right:12px; }
.gdlb__prev, .stlb__prev{ left:12px; top:50%; transform:translateY(-50%); }
.gdlb__next, .stlb__next{ right:12px; top:50%; transform:translateY(-50%); }

.gdlb__meta, .stlb__meta{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:13px;
}


html.lb-open header,
html.lb-open .site-header,
html.lb-open .global-header{ pointer-events:none; }


.goods-card--large .gdL-media{ display:flex; flex-direction:column; }
.goods-card--large .gdL-view{
  position:relative; overflow:hidden; border-radius:16px;
  /* aspect-ratio: 3 / 4; */
  background:#f5f5f7; cursor: zoom-in;
}

.goods-card--large .gdL-thumbs{ margin-top:10px; gap:8px; flex-wrap:wrap; }
.goods-card--large .gdL-thumb img{
  width:96px; aspect-ratio:3/4; height:auto; object-fit:cover;
  border-radius:10px; display:block;
}
.goods-card--large .gdL-thumb.is-active img{ outline:2px solid #b4b2b2; }



.gdlb__backdrop, .stlb__backdrop{
  background: rgba(0,0,0,.30); 
}

.goods-card--large .gdL-media{ display:flex; flex-direction:column; }
.goods-card--large .gdL-view{
  position:relative; overflow:hidden; border-radius:16px;
  aspect-ratio: 16/9;  
  background:#f5f5f7;
}
.goods-card--large .gdL-view .gdL-main{
  position:absolute; inset:0;
  width:100%; height:100% !important; 
  object-fit:contain; object-position:center; display:block;
}

.goods-card--large .gdL-thumbs{ margin-top:10px; gap:8px; flex-wrap:wrap; }
.goods-card--large .gdL-thumb img{
  width:96px; aspect-ratio:16/9; height:auto; object-fit:contain;
  border-radius:10px; display:block;
}
.goods-card--large .gdL-thumb.is-active img{ outline:2px solid #111; }


.goods-card--large .gdL-thumb{
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.goods-card--large .gdL-thumb:focus{ outline: none; }
.goods-card--large .gdL-thumb img{
  display:block;
  border: 0;               
  box-shadow: none;
  border-radius: 10px;
  width: 96px;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}