/* ==========================================================================
   gallery-pc.css — フォトギャラリー / レンタル衣装ギャラリーの PC・横長画面用
   <link media="(min-width: 1024px)"> で読み込む。方針は common-pc.css の冒頭を参照。

   - ヒーロー … 写真といびつな丸の組み合わせは座標で組んであるので、丸ごと拡大して中央に置く
   - 絞り込み … タブは横1列、チップも1〜2段に収まるよう広げる
   - 一覧 … 3列 → 5列
   ========================================================================== */

/* =============== ヒーロー =============== */
.gl-hero {
  margin: 50px auto 0;
  zoom: 1.6;
}

/* =============== 絞り込み =============== */
.gl-filter {
  margin-top: 56px;
}

.gl-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
}
.gl-tab {
  padding: 0 6px 10px;
  border-bottom-width: 2px;
  font-size: 18px;
  letter-spacing: 2px;
}

.gl-sizes {
  gap: 12px;
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
  margin-top: 40px;
}
.gl-size {
  min-width: 84px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 17px;
  cursor: pointer;
}

/* =============== 一覧 =============== */
.gl-list {
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
  margin: 80px auto 0;
}
.gl-list__title {
  font-size: 28px;
  letter-spacing: 1px;
}
.costume-page .gl-list__decor { left: -120px; top: -40px; width: 230px; height: 197px; }
.gallery-page .gl-list__decor { left: auto; right: -80px; top: -40px; width: 230px; height: 197px; }

.gl-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
  padding: 0;
}
.gl-grid li { border-radius: 16px; }
.gl-grid img { transition: transform 0.4s ease; }
.gl-grid li:hover img { transform: scale(1.05); }

.gl-note {
  margin-top: 40px;
  font-size: 15px;
}

.gallery-page .footer,
.costume-page .footer {
  margin-top: 150px;
}