/* =========================================================
   カテゴリー別ギャラリーページ
   写真はトリミングせず、元の縦横比のまま段組みで流し込む
   ========================================================= */
.gallery-page{background:var(--light)}

/* このページは背景が明るいので、ヘッダーは最初から濃色で固定 */
.gallery-page .site-header{
  height:72px;background:rgba(233,229,220,.94);backdrop-filter:blur(16px);
  color:var(--ink);border-bottom:1px solid var(--line);
}

.gallery-head{padding:clamp(130px,15vw,190px) var(--pad) clamp(48px,6vw,74px)}
.gallery-head h1{
  margin-top:20px;font-size:clamp(34px,5.4vw,74px);font-weight:400;line-height:1.35;letter-spacing:.05em;
  word-break:auto-phrase;line-break:strict;text-wrap:balance;
}
.gallery-head h1 span{
  display:block;margin-top:14px;
  font:400 clamp(13px,1.5vw,18px)/1 var(--display);letter-spacing:.22em;color:var(--muted);
}
.gallery-head>p{
  margin-top:30px;max-width:44em;color:#5d5d57;font-size:13px;
  word-break:auto-phrase;line-break:strict;text-wrap:pretty;
}
.gallery-count{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font:11px var(--display);letter-spacing:.2em;color:var(--muted);
}

/* --- 写真グリッド（段組みマソンリー） --- */
/* JSが動かない場合はCSSの段組みで表示（段の高さは揃わないが崩れはしない） */
.gallery-grid{padding:0 var(--pad) clamp(90px,12vw,150px);column-count:3;column-gap:16px}
.gallery-grid figure{break-inside:avoid;margin:0 0 16px;cursor:zoom-in}
/* JSが「一番低い段に積む」方式で並べ替えたあとの表示 */
.gallery-grid.is-masonry{column-count:auto;display:flex;gap:16px;align-items:flex-start}
.gallery-grid.is-masonry>.gallery-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.gallery-grid.is-masonry figure{margin:0}
/* 全体指定の img{height:100%;object-fit:cover} を打ち消して、元の比率で表示する */
.gallery-grid img{
  width:100%;height:auto;object-fit:initial;background:#ddd9d1;
  filter:saturate(.85);transition:filter .7s var(--ease),opacity .7s var(--ease);
}
.gallery-grid figure:hover img,.gallery-grid figure:focus-visible img{filter:saturate(1)}
.gallery-grid figure:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.gallery-grid figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:11px;font-size:12px;letter-spacing:.04em;
}
.gallery-grid figcaption span{font:10px var(--display);letter-spacing:.14em;color:var(--muted);white-space:nowrap}

/* --- 他カテゴリーへの導線 --- */
.gallery-more{
  padding:clamp(70px,9vw,120px) var(--pad);background:var(--ink);color:var(--paper);
}
.gallery-more>p{font:11px var(--display);letter-spacing:.22em;color:#8a8a82;margin-bottom:38px}
.gallery-more ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff21;border:1px solid #ffffff21}
.gallery-more a{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  background:var(--ink);padding:30px 26px;transition:background .4s var(--ease);
}
.gallery-more a:hover{background:#22231f}
.gallery-more b{font-weight:400;font-size:16px;letter-spacing:.06em}
.gallery-more b small{display:block;margin-top:7px;font:10px var(--display);letter-spacing:.16em;color:#8a8a82}
.gallery-more em{font:11px var(--display);letter-spacing:.1em;color:#8a8a82;white-space:nowrap}

@media(max-width:900px){
  .gallery-grid{column-count:2}
  .gallery-more ul{grid-template-columns:1fr}
}
@media(max-width:600px){
  .gallery-grid{column-count:1;column-gap:0}
  .gallery-grid figure{margin-bottom:26px}
  .gallery-head{padding-top:120px}
  .gallery-more a{padding:24px 20px}
}

/* 撮影実例ページへの導線 */
.case-link{
  margin-top:38px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 28px;border:1px solid var(--line);background:var(--paper);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.case-link:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.case-link b{font-weight:400;font-size:16px;letter-spacing:.06em}
.case-link b small{
  display:block;margin-top:8px;font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  word-break:auto-phrase;line-break:strict;
}
.case-link:hover b small{color:#9a9a92}
.case-link em{font:11px var(--display);font-style:normal;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.case-link:hover em{color:var(--paper)}
.case-link em span{display:inline-block;transition:transform .4s var(--ease)}
.case-link:hover em span{transform:translate(3px,-3px)}
@media(max-width:600px){
  .case-link{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px}
}