/* 写真の枠（assets/photo.js が描く）。下 = ぼかして拡大した同じ画像、上 = 全体が収まる画像 */
.pf{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-stage{position:relative;overflow:hidden;width:100%;background:linear-gradient(135deg,#dcf6e8 0%,#d4efea 50%,#e3f5fb 100%);isolation:isolate}
.pf--r4x3 .pf-stage{aspect-ratio:4/3}
.pf--r1x1 .pf-stage{aspect-ratio:1/1}
.pf--r16x9 .pf-stage{aspect-ratio:16/9}
.pf--hero .pf-stage{border-radius:15px}
.pf-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .2s cubic-bezier(.2,0,0,1);user-select:none}
/* 下: 枠いっぱいに拡大してぼかす。ぼかしで縁が薄く抜けないよう、ぼかし幅の 2 倍だけ外へはみ出させる */
.pf-stage .pf-bg{inset:-36px;width:calc(100% + 72px);height:calc(100% + 72px);object-fit:cover;filter:blur(18px) saturate(1.1);z-index:0}
/* 下に暗め 10% の被せ */
.pf-stage::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.1);opacity:0;transition:opacity .2s cubic-bezier(.2,0,0,1);pointer-events:none}
/* 上: 全体が見えるように収める */
.pf-fg{object-fit:contain;z-index:2}
.pf.is-loaded:not(.is-fading) .pf-stage img,.pf.is-loaded:not(.is-fading) .pf-stage::after{opacity:1}
.pf.is-failed .pf-stage img{display:none}
/* サムネの並び（hero で 2 枚以上のときだけ出る） */
.pf-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.pf-thumb{flex:0 0 64px;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#dcf6e8,#e3f5fb);cursor:pointer;opacity:.62;transition:opacity .2s ease,border-color .2s ease}
.pf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pf-thumb:hover{opacity:.9}
.pf-thumb.is-current{opacity:1;border-color:var(--teal,#078b7d)}
.pf-thumb:focus-visible{outline:2px solid var(--teal,#078b7d);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.pf-stage img,.pf-stage::after,.pf-thumb{transition:none}}