/* タカネ電業で働く人（people.html）。似顔絵の上に写真を重ね、触れると写真が浮かぶ（写真の寄りは会社の決まり：1.6 秒・1.018 倍・cubic-bezier(.33,0,.15,1)） */
.pp__l{list-style:none;padding-block:0;margin-block:calc(var(--u) * 2) calc(var(--u) * 4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 1.5) var(--u)}
.pp{margin:0;outline-offset:6px}
.pp__f{position:relative;aspect-ratio:3/4;overflow:hidden;background:#fff;border-radius:var(--r-s,4px)}
.pp__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pp__ph{opacity:0;transform:scale(1);transition:opacity 1.1s cubic-bezier(.33,0,.15,1),transform 1.6s cubic-bezier(.33,0,.15,1)}
.pp__il{transition:opacity 1.1s cubic-bezier(.33,0,.15,1)}
.pp__c{margin-top:calc(var(--u) * .6)}
.pp__d{margin:0;font:400 12px/1.6 var(--ja);letter-spacing:.08em;color:var(--tx)}
.pp__d[lang=en]{font-family:var(--en);letter-spacing:.06em}
.pp__n{margin:.2em 0 0;font:400 17px/1.5 var(--ja);letter-spacing:.12em;color:var(--ink)}
.pp__n[lang=en]{font-family:var(--en);letter-spacing:.1em}
.pp__r{margin:.2em 0 0;font:400 12px/1.5 var(--en);letter-spacing:.1em;color:var(--tx2)}
@media (hover:hover){.pp:hover .pp__ph,.pp:focus-within .pp__ph,.pp:focus .pp__ph{opacity:.92;transform:scale(1.018)}.pp:hover .pp__il,.pp:focus .pp__il{opacity:0}.pp:hover .pp__n{color:#0C74B4;transition:color .5s cubic-bezier(.33,0,.15,1)}}
.pp.on .pp__ph{opacity:.92}.pp.on .pp__il{opacity:0}
@media (max-width:900px){.pp__l{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pp__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u) * 1.2) 12px}.pp__n{font-size:15px}}
@media (prefers-reduced-motion:reduce){.pp__ph,.pp__il{transition:opacity .15s linear}.pp:hover .pp__ph,.pp.on .pp__ph,.pp:focus .pp__ph{transform:none!important}}
:root[data-motion="reduce"] .pp__ph,:root[data-motion="reduce"] .pp__il{transition:opacity .15s linear}
:root[data-motion="reduce"] .pp:hover .pp__ph,:root[data-motion="reduce"] .pp.on .pp__ph,:root[data-motion="reduce"] .pp:focus .pp__ph{transform:none!important}

/* 11/06 夜 お昼休みの窓（右寄せ 8 列・16:9） */
.pp__mv{margin-top:calc(var(--u) * 4)}
.pp__mv .ph{grid-column:5/13;aspect-ratio:16/9}
.pp__mv figcaption{grid-column:5/13;margin-top:calc(var(--u) / 2)}
@media (max-width:767px){.pp__mv{margin-top:calc(var(--u) * 2)}}