/* 制作実績 / 2026-09-08 */
#works.portfolio{background:#f8f8f5;padding:110px 0 90px;color:#35352f;border-block:1px solid #e4e4de}
.portfolio__wrap{width:calc(100% - 112px);max-width:1320px;margin:auto}
.portfolio__header{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:50px}
.portfolio__eyebrow{display:flex;align-items:center;gap:9px;font:600 11px/1.5 var(--f-en);letter-spacing:.16em;margin-bottom:22px}
.portfolio__eyebrow span{width:8px;height:8px;border-radius:50%;background:#b7b725}
#portfolio-title{font:500 clamp(44px,5.5vw,78px)/1.02 var(--f-en);letter-spacing:-.055em}
#portfolio-title>span{display:block;font:500 15px/1.8 var(--f-body);letter-spacing:.1em;margin-top:20px}
.portfolio__intro{font-size:13px;line-height:2.2;letter-spacing:.04em;margin-bottom:2px}
.portfolio__toolbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #cecec6;padding:20px 0 30px;gap:12px}
.portfolio__filters{display:flex;gap:8px;flex-wrap:wrap}
.portfolio__filters[hidden]{display:none}
.portfolio__filters button{background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:12px;line-height:1.4;padding:11px 16px;transition:background .2s}
.portfolio__filters button[aria-pressed=true]{background:#35352f;color:#fff}
.portfolio__filters button:hover{background:#e5e5db;color:#35352f}
.portfolio__filters small{margin-left:9px;font:10px var(--f-en);opacity:.7}
.portfolio__count{font:12px var(--f-en);white-space:nowrap;color:#66665c;letter-spacing:.04em}
.portfolio__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
.pf-card[hidden]{display:none}
.pf-card__link{display:block;text-decoration:none}
.pf-card__image{position:relative;overflow:hidden;background:#e9e8e2;aspect-ratio:3/2}
.pf-card__image img{width:100%;height:100%;object-fit:contain;transition:transform .65s cubic-bezier(.2,.7,.3,1)}
.pf-card[data-category=movie] .pf-card__image{background:#292b27}
.pf-card__open{position:absolute;bottom:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#333;font:22px/1 var(--f-en);transition:background .2s,transform .2s}
.pf-card[data-category=movie] .pf-card__open{font-size:15px}
@media(hover:hover){.pf-card__link:hover .pf-card__image img{transform:scale(1.025)}.pf-card__link:hover .pf-card__open{background:var(--yellow);transform:rotate(-6deg)}}
.pf-card__caption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding-top:16px}
.pf-card__index{font:11px/1.5 var(--f-en);color:#75756c;grid-row:span 2}
.pf-card__caption h3{font:500 15px/1.6 var(--f-body);letter-spacing:.025em}
.pf-card__category{font:10px/1.8 var(--f-en);letter-spacing:.12em;color:#737369;margin-top:5px}
.portfolio__note{border-top:1px solid #d8d8d0;margin-top:55px;padding-top:20px;font-size:11px;color:#6c6c61}
.pf-card__link:focus-visible,.portfolio__filters button:focus-visible,.pf-viewer button:focus-visible{outline:3px solid #a59b09;outline-offset:5px}
.pf-viewer{background:#f8f8f5;color:#35352f;border:0;padding:20px;width:min(1280px,94vw);max-width:none;max-height:94dvh;overflow:auto;box-shadow:0 25px 90px #0005}
.pf-viewer::backdrop{background:#20221ee8;backdrop-filter:blur(8px)}
.pf-viewer__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.pf-viewer__title{font-size:14px;line-height:1.6}
.pf-viewer__close{border:1px solid #c4c4b8;background:transparent;padding:9px 15px;white-space:nowrap;cursor:pointer;font-size:12px}
.pf-viewer__media img,.pf-viewer__media video{width:100%;max-height:calc(90dvh - 100px);object-fit:contain;margin:auto}
@media(min-width:601px){.portfolio__grid .pf-card.is-offset{transform:translateY(clamp(28px,3.75vw,54px))}.portfolio__grid{padding-bottom:clamp(28px,3.75vw,54px)}}
@media(max-width:800px){#works.portfolio{padding:72px 0 60px}.portfolio__wrap{width:calc(100% - 48px)}.portfolio__header{display:block;margin-bottom:32px}.portfolio__intro{margin-top:25px}.portfolio__grid{gap:32px 18px}.pf-card__caption h3{font-size:13px}.portfolio__filters button{padding:10px}.portfolio__count{font-size:10px}}
@media(max-width:600px){.portfolio__wrap{width:calc(100% - 36px)}.portfolio__grid{grid-template-columns:1fr;gap:32px}.portfolio__toolbar{align-items:flex-start;flex-wrap:wrap;padding:16px 0 24px}.portfolio__filters{gap:2px}.portfolio__filters button{font-size:11px;padding:11px 10px}.portfolio__filters small{margin-left:5px}.portfolio__count{width:100%;text-align:right}.pf-card__caption h3{font-size:14px}.pf-viewer{padding:12px}.pf-viewer__title{font-size:12px}.pf-card__image{border-radius:2px}}
@media(prefers-reduced-motion:reduce){.pf-card__image img,.pf-card__open{transition:none}}

.pf-viewer__media{position:relative}
.pf-viewer__website{display:flex;align-items:center;justify-content:center;gap:12px;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);min-height:48px;padding:12px 25px;background:#35352f;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;white-space:nowrap;border:1px solid #ffffff70;box-shadow:0 4px 24px #0002;border-radius:3px;transition:background .2s,color .2s}
.pf-viewer__website:hover{background:var(--yellow);color:#35352f}
.pf-viewer__website:focus-visible{outline:3px solid #a59b09;outline-offset:4px}
@media(max-width:600px){.pf-viewer__website{position:static;transform:none;margin-top:12px;width:100%;box-shadow:none}}

/* Project portrait: crop only the listing; show the full photo in the viewer. */
.pf-card--portrait .pf-card__image img{object-fit:cover;object-position:center 42%}
.pf-viewer.pf-viewer--portrait{width:min(720px,94vw)}
.pf-viewer--portrait .pf-viewer__media img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(90dvh - 100px)}