@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   page-gallery-item.css — 各プランのギャラリー（/gallery/{slug}/）
   1枚＝1セットの表紙。クリックで既存ライトボックス（.ska-lb：theme.css）が開き、
   そのセットの複数カットをサムネ列＋左右送りで見られる。色は theme.css の変数。
   ══════════════════════════════════════════════════════════════════════ */

/* 本文とフッターの予約帯（.cta）の間に余白を取る */
.gal-item{width:100%;padding-bottom:clamp(60px,8vw,104px)}

/* パンくず */
.gi-crumbs{margin:0 0 clamp(14px,2vw,22px);padding:0 clamp(20px,3.4vw,52px);
 display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 font-family:var(--f-lat);font-size:11.5px;letter-spacing:.1em;color:var(--moji-2)}
.gi-crumbs a{color:var(--kogane-moji);text-decoration:none}
.gi-crumbs a:hover{color:var(--enji)}
.gi-crumbs span[aria-hidden]{color:var(--keisen)}

/* リード文（見出しではなく本文サイズで置く） */
.gi-lead{margin:clamp(16px,2.2vw,26px) 0 0;padding:0 clamp(20px,3.4vw,52px);max-width:44em;
 font-family:var(--f-body);font-size:14px;line-height:2.15;letter-spacing:.04em;color:var(--moji)}

/* 注記・プランへの導線 */
.gi-note{margin:clamp(14px,1.8vw,20px) 0 0;padding:0 clamp(20px,3.4vw,52px);max-width:46em;
 font-size:12px;line-height:1.95;letter-spacing:.02em;color:var(--moji-2)}
.gi-planlink{margin:14px 0 0;padding:0 clamp(20px,3.4vw,52px)}
.gi-planlink a{display:inline-flex;align-items:center;gap:.4em;font-size:13px;letter-spacing:.05em;
 color:var(--kogane-moji);text-decoration:none;border-bottom:1px solid rgba(var(--kogane-rgb),.4);padding-bottom:3px}
.gi-planlink a i{font-style:normal;transition:transform .32s var(--ease)}
.gi-planlink a:hover i{transform:translateX(4px)}

/* 表紙の網 */
.gi-grid{margin:clamp(30px,4.2vw,54px) 0 0;padding:0 clamp(20px,3.4vw,52px);
 display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(20px,2.6vw,34px)}
.gi-cell{display:flex;flex-direction:column;min-width:0}

/* 表紙の写真。セットの1枚目だけを見せ、残りは重ねて隠す（ライトボックス群に含める） */
.gi-shot{position:relative;margin:0;overflow:hidden;background:var(--ji-2);aspect-ratio:3/4}
.gi-shot img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
 filter:var(--shashin);transition:transform 3s var(--ease)}
.gi-shot img.on{position:relative;z-index:1}
.gi-shot img:not(.on){position:absolute;inset:0;opacity:0;pointer-events:none}
.gi-cell:hover .gi-shot img.on{transform:scale(1.045)}
/* 枚数の札。写真の上でも、基調（白／濃い）どちらでも読めるよう、
   地色（--ji）と見出し色（--midashi）の組みにする（両者は必ずコントラストする）。 */
.gi-n{position:absolute;z-index:2;right:10px;bottom:10px;
 background:rgba(var(--ji-rgb),.74);color:var(--midashi);
 font-family:var(--f-lat);font-size:10.5px;letter-spacing:.08em;padding:4px 10px}

/* 表紙の下の見出し（プラン名＋オプション） */
.gi-cap{padding:12px 2px 0;display:flex;flex-direction:column;gap:8px}
.gi-cap-plan{font-family:var(--f-disp);font-weight:600;font-size:clamp(14px,1.6vw,16px);
 letter-spacing:.05em;line-height:1.4;color:var(--midashi)}
.gi-cap-opts{display:flex;flex-wrap:wrap;gap:6px}
.gi-chip{font-size:10.5px;letter-spacing:.02em;color:var(--kogane-moji);
 border:1px solid var(--keisen);padding:3px 9px;white-space:nowrap}

/* 準備中 */
.gi-empty{margin:clamp(30px,4.2vw,54px) 0 0;padding:0 clamp(20px,3.4vw,52px);
 font-size:13.5px;line-height:2;color:var(--moji-2)}

/* 下部のボタン */
.gi-end{margin:clamp(40px,5.4vw,70px) 0 0;padding:0 clamp(20px,3.4vw,52px);
 display:flex;flex-wrap:wrap;gap:12px 14px}

@media (max-width:520px){
	.gi-grid{grid-template-columns:1fr 1fr;gap:16px}
	.gi-end .btn{flex:1 1 100%}
}