@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   page-gallery.css — ギャラリーのハブ（/gallery/）
   下層ページの器（.page:not(.ska-flush)）が上余白・中央寄せ・本文幅を持つので、
   ここでは中身（導入文・カテゴリのカード網）だけを組む。色は theme.css の変数。
   ══════════════════════════════════════════════════════════════════════ */

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

/* 導入文・注記。読みやすい幅で左寄せ */
.gh-lead{margin:clamp(18px,2.4vw,28px) 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)}
.gh-note{margin:12px 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)}

/* カテゴリのカード網。箱で囲わず、写真＋名前＋英字＋矢印を並べる */
.gh-grid{margin:clamp(32px,4.4vw,56px) 0 0;padding:0 clamp(20px,3.4vw,52px);
 display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:clamp(22px,2.8vw,38px)}
.gh-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.gh-shot{margin:0;overflow:hidden;background:var(--ji-2);aspect-ratio:3/4}
.gh-shot img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
 filter:var(--shashin);transition:transform 3s var(--ease)}
.gh-card:hover .gh-shot img{transform:scale(1.045)}
.gh-meta{display:flex;flex-direction:column;gap:4px;padding:13px 2px 0}
.gh-en{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--usukin)}
.gh-nm{display:flex;align-items:center;gap:.5em;font-family:var(--f-disp);font-weight:600;
 font-size:clamp(15px,1.7vw,18px);letter-spacing:.06em;line-height:1.4;color:var(--midashi)}
.gh-nm i{font-style:normal;font-size:.9em;color:var(--kogane);transition:transform .34s var(--ease)}
.gh-card:hover .gh-nm i{transform:translateX(5px)}

/* 予約ボタン */
.gh-end{margin:clamp(38px,5.2vw,66px) 0 0;padding:0 clamp(20px,3.4vw,52px);display:flex}

@media (max-width:520px){
	.gh-grid{grid-template-columns:1fr 1fr;gap:16px}
}