/* 写真は独立した1536px素材。元の画面切り抜きへ依存しない。 */
img.art{object-fit:contain}
img.hero-photo{object-fit:cover;object-position:43% center;opacity:1}
img.support-photo{object-fit:cover;object-position:50% 46%;min-height:0;align-self:stretch}
img.second-photo{object-fit:cover;object-position:58% 41%;min-height:0;align-self:stretch}
img.note-photo{object-fit:cover;object-position:50% 60%;min-height:0;align-self:stretch}
@media(max-width:700px){img.hero-photo{object-position:41% center}img.support-photo{height:250px}img.second-photo{height:180px}img.note-photo{height:190px}}
img.illustration{mix-blend-mode:multiply;object-fit:contain}
@media(min-width:701px){
 .support-top,.support-bottom,.closing{position:relative}
 img.support-photo{position:absolute;inset:0 auto 0 0;width:47%;height:100%}
 .support-content{grid-column:2}
 img.second-photo{position:absolute;inset:0 0 0 auto;width:46%;height:100%}
 img.note-photo{position:absolute;inset:0 auto 0 0;width:39%;height:100%}
 .closing>div{grid-column:2}
}

/* 写真そのものを背景へ溶かし、別レイヤーの開始位置に縦の境界を作らない。 */
.hero::after{display:none}
img.hero-photo{
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.72) 21%,#000 34%);
 mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.72) 21%,#000 34%);
}
@media(max-width:700px){
 img.hero-photo{
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 14%,#000 38%),linear-gradient(180deg,#000 66%,rgba(0,0,0,.8) 77%,rgba(0,0,0,.3) 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 14%,#000 38%),linear-gradient(180deg,#000 66%,rgba(0,0,0,.8) 77%,rgba(0,0,0,.3) 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
 }
}