/* 正方形のます目（2026.10.28 なおさん「その方向で進めて」。ケンスケの案の実装＝リツコ）
   style.css は別の作業と同時に書き換えられて、足した段落が消えたため、いったん別のファイルにした（落ち着いたら style.css の末尾へ移せる）。
   ① トップ 花の四季（.fgal）：行の高さ＝列の幅。小 1:1・大 2×2・縦長 1×2・横長 2×1。
      列の幅は、枠（.wrap）の内側の幅（100cqw）から間隔を引いて列の数で割る。container-type を持たない古い端末では、style.css のこれまでの固定の高さのまま。
   ② 手がけること・エイトガーデンの小さなます：正方形用の別ファイル（/sq/）を使う。切り抜きは写真ごとに済んでいるので、中央寄せに戻す */
.fgal-sec .wrap{container-type:inline-size}
.fgal{--fg-n:2;--fg-g:clamp(6px,.8vw,12px)}
@media (min-width:900px){.fgal{--fg-n:4}}
@supports (width:1cqw){
  .fgal{grid-auto-rows:calc((100cqw - var(--fg-g) * (var(--fg-n) - 1)) / var(--fg-n))}
}
.mosaic img[src*="/sq/"],.gal--wide img[src*="/sq/"],.gal img[src*="/sq/"]{object-position:50% 50%}
/* エイトガーデン：正方形2つ分の横長のます（4:3 の元を 2:1 に。上下の切れ方は --op で写真ごとに）。PC は隣の正方形と同じ行の高さ、携帯は2列ぶんの横長 */
.gal .img-mask.gal__w{grid-column:span 2;aspect-ratio:2/1}
.gal .img-mask.gal__w img{object-position:50% var(--op,50%)}
@media (min-width:900px){.gal .img-mask.gal__w{aspect-ratio:auto;height:auto}.gal .img-mask.gal__w>picture{position:absolute;inset:0}}   /* 写真の大きさで行の高さが決まらないよう、写真は枠いっぱいに置く（行の高さは隣の正方形が決める） */
.gal:has(.gal__w){grid-auto-flow:dense}   /* 携帯の2列で、横長が入らず空いた所へ、あとの正方形を詰める */