.ehon{position:relative;margin:0}
.ehon .ph{position:relative;overflow:hidden;display:block;border-radius:var(--r);background:var(--p1);aspect-ratio:3/2;box-shadow:0 0 0 1px var(--line),0 30px 50px -36px rgba(92,78,104,.45)}
.ehon .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform}
@media (max-width:900px){.ehon .ph{aspect-ratio:4/3}}
.ehon[data-rv=ph]{opacity:.04;transform:translate3d(0,52px,0);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.6s var(--e);transition-delay:var(--d,0s)}
.ehon[data-rv=ph] video{transition:scale 2.2s var(--e-photo)}
.ehon[data-rv=ph]:not(.is-in) video{scale:1.06}
.ehon[data-rv=ph].is-in{opacity:1;transform:none}
@supports (animation-timeline:view()){
  .ehon .ph{view-timeline:--ph block}   
  .ehon .ph video{animation:ehon-drift linear both;animation-timeline:--ph}
  @keyframes ehon-drift{from{translate:0 -2.5%}to{translate:0 2.5%}}
}
.ehon-hd{display:grid;grid-template-columns:var(--c66);column-gap:var(--g);align-items:end}
.ehon-hd>.sec-hd,.ehon-hd>.ehon-hd__tx{min-width:0}
.fl-grid>.ehon{align-self:start}
.svc__side .ehon{margin-top:24px}
@media (max-width:900px){.ehon-hd{grid-template-columns:minmax(0,1fr);row-gap:24px}}
@media (prefers-reduced-motion:reduce){
  .ehon[data-rv=ph]{opacity:1!important;transform:none!important;transition:none!important}
  .ehon .ph video{transform:none!important;scale:1!important;animation:none!important;translate:none!important;transition:none!important}
}
html[data-motion=reduce] .ehon[data-rv=ph]{opacity:1!important;transform:none!important;transition:none!important}
html[data-motion=reduce] .ehon .ph video{transform:none!important;scale:1!important;animation:none!important;translate:none!important;transition:none!important}
html:is(:lang(ja),.jl) .ehon .ph{border-radius:0;box-shadow:none;background:transparent;--sm:url(../web/mask/soft_3x2_1.png?v=2);-webkit-mask:var(--sm) center/100% 100% no-repeat;mask:var(--sm) center/100% 100% no-repeat}
html:is(:lang(ja),.jl) .ehon[data-ehon=B] .ph,html:is(:lang(ja),.jl) .ehon[data-ehon=E] .ph{--sm:url(../web/mask/soft_3x2_2.png?v=2)}
html:is(:lang(ja),.jl) .ehon[data-ehon=C] .ph{--sm:url(../web/mask/soft_3x2_3.png?v=2)}
html:is(:lang(ja),.jl) .ehon[data-ehon=D] .ph{--sm:url(../web/mask/soft_3x2_4.png?v=2)}
@media (max-width:900px){html:is(:lang(ja),.jl) .ehon .ph{--sm:url(../web/mask/soft_4x3_1.png?v=2)}html:is(:lang(ja),.jl) .ehon[data-ehon=B] .ph,html:is(:lang(ja),.jl) .ehon[data-ehon=E] .ph{--sm:url(../web/mask/soft_4x3_2.png?v=2)}html:is(:lang(ja),.jl) .ehon[data-ehon=C] .ph{--sm:url(../web/mask/soft_4x3_3.png?v=2)}html:is(:lang(ja),.jl) .ehon[data-ehon=D] .ph{--sm:url(../web/mask/soft_4x3_4.png?v=2)}}
@media (min-width:901px){html:is(:lang(ja),.jl) .svc__side .ehon .ph{aspect-ratio:4/5;--sm:url(../web/mask/oval_4x5_1.png?v=2)}
  html:is(:lang(ja),.jl) .svc:nth-of-type(even) .svc__side .ehon .ph{--sm:url(../web/mask/oval_4x5_2.png?v=2)}}
html:is(:lang(ja),.jl) .svc__side .ehon .ph{opacity:.7}