@charset "utf-8";
/* フォトログ（/gallery/ と トップページの最新n件）共通スタイル
 * assets/js/gallery.js が生成する DOM に対応する。
 * 接頭辞 .gl- はフォトログ専用。既存スタイルとは衝突させない。
 */

/* ---- ページ本体（/gallery/）---- */
.gl-lead{ max-width:820px; margin:0 auto 30px; line-height:1.9; color:#4a5464; }

.gl-tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 26px; }
.gl-tab{ appearance:none; -webkit-appearance:none; cursor:pointer;
  font:inherit; font-size:.88rem; letter-spacing:.03em; padding:8px 17px;
  background:#fff; color:#2b3850; border:1px solid #d6dde4; border-radius:999px;
  transition:background .16s ease, color .16s ease, border-color .16s ease; }
.gl-tab:hover{ border-color:#2b3850; }
.gl-tab.is-active{ background:#2b3850; color:#fff; border-color:#2b3850; }

/* ---- カードグリッド（両モード共通）---- */
.gl-grid{ list-style:none; margin:0; padding:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.gl-card{ margin:0; }
.gl-card__btn{ appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit; text-align:left;
  display:flex; flex-direction:column; width:100%; height:100%; padding:0; text-decoration:none;
  background:#fff; color:inherit; border:1px solid #e2e9e9; border-radius:12px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gl-card__btn:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(43,56,80,.16); border-color:#2b3850; }
.gl-card__thumb{ display:block; aspect-ratio:4/5; background:#f3f5f6; overflow:hidden; }
.gl-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gl-card__body{ padding:11px 13px 15px; display:flex; flex-direction:column; gap:6px; }
.gl-card__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.75rem; color:#8b939c; letter-spacing:.04em; }
.gl-card__cat{ display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:.7rem; line-height:1.6; color:#fff; letter-spacing:.02em; }
.gl-cat--product{ background:#2b3850; }
.gl-cat--catch{   background:#1f7a63; }
.gl-cat--factory{ background:#8a6d3b; }
.gl-cat--event{   background:#E0211A; }
.gl-card__title{ font-size:.92rem; font-weight:700; color:#2b3850; line-height:1.5; }

.gl-count{ text-align:center; font-size:.8rem; color:#8b939c; margin:26px 0 0; }
.gl-more{ appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit;
  display:block; width:max-content; margin:14px auto 0; padding:12px 46px;
  font-size:.92rem; letter-spacing:.06em; text-align:center; text-decoration:none;
  background:#fff; color:#2b3850; border:1px solid #2b3850; border-radius:999px;
  transition:background .16s ease, color .16s ease; }
.gl-more:hover{ background:#2b3850; color:#fff; }

/* ---- 拡大表示（/gallery/ のみ）---- */
.gl-box{ position:fixed; inset:0; z-index:9999; display:none; }
.gl-box.is-open{ display:block; }
.gl-box__bg{ position:absolute; inset:0; background:rgba(18,24,35,.86); }
.gl-box__inner{ position:relative; z-index:1; margin:auto; height:100%;
  display:flex; align-items:center; justify-content:center; gap:26px;
  padding:44px 24px; box-sizing:border-box; }
.gl-box__img{ flex:0 1 auto; max-width:min(52vw, 560px); }
.gl-box__img img{ display:block; max-width:100%; max-height:calc(100vh - 88px);
  border-radius:8px; background:#0d1117; }
.gl-box__text{ flex:0 1 380px; color:#fff; }
.gl-box__meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.78rem; color:#b8c1cc; letter-spacing:.04em; margin:0 0 10px; }
.gl-box__title{ font-size:1.24rem; line-height:1.55; margin:0 0 12px; color:#fff; }
.gl-box__desc{ font-size:.93rem; line-height:1.9; color:#dfe5ec; margin:0 0 18px; }
.gl-box__link a{ display:inline-block; padding:9px 22px; border:1px solid #fff; border-radius:999px;
  color:#fff; text-decoration:none; font-size:.86rem; letter-spacing:.04em;
  transition:background .16s ease, color .16s ease; }
.gl-box__link a:hover{ background:#fff; color:#2b3850; }
.gl-box__close{ position:absolute; top:14px; right:18px; z-index:2;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:44px; height:44px; line-height:1; font-size:2rem;
  background:none; border:none; color:#fff; }
body.gl-locked{ overflow:hidden; }

/* ---- トップページの「最新n件」ブロック ----
 * 外枠の余白は .l-inner（vendor/splide/style.css で padding:40px 10rem）に任せる。 */
.photolog_area{ padding:0 0 24px; }
.photolog_area .photolog-title{ text-align:center; margin:0 0 10px;
  font-size:1.5rem; letter-spacing:.08em; color:#2b3850; }
.photolog_area .photolog-title span{ display:block; margin-top:4px;
  font-size:.72rem; letter-spacing:.22em; color:#9aa3ad; font-weight:400; }
.photolog_area .photolog-lead{ text-align:center; margin:0 auto 26px; max-width:760px;
  font-size:.92rem; line-height:1.9; color:#4a5464; }

@media (max-width:900px){
  .gl-box__inner{ flex-direction:column; gap:16px; padding:56px 18px 24px; overflow-y:auto;
    align-items:stretch; justify-content:flex-start; }
  .gl-box__img{ max-width:100%; text-align:center; }
  .gl-box__img img{ max-height:58vh; margin:0 auto; }
  .gl-box__text{ flex:0 0 auto; }
}
@media (max-width:560px){
  .gl-grid{ gap:12px; grid-template-columns:repeat(auto-fill, minmax(144px,1fr)); }
  .gl-tab{ font-size:.8rem; padding:7px 13px; }
  .gl-card__title{ font-size:.85rem; }
  .photolog_area{ padding:0 0 16px; }
  .photolog_area .photolog-title{ font-size:1.25rem; }
}