/* ============================================================
   下層ページ見出し（.page-hero）に写真を枠なしで溶け込ませる
   使い方：.page-hero に .ph-hero を付け、中に
   <div class="ph-hero-img"><img src="..." alt=""></div> を置く
   ============================================================ */
.page-hero.ph-hero{position:relative;overflow:hidden;min-height:72vh}
.page-hero.ph-hero > *:not(.ph-hero-img):not(.giant){position:relative;z-index:2;max-width:min(560px,48vw)}
.page-hero.ph-hero .giant{z-index:1}
.ph-hero-img{position:absolute;top:0;right:0;bottom:0;width:54%;z-index:0;pointer-events:none}
.ph-hero-img img{width:100%;height:100%;object-fit:cover;object-position:var(--ph-pos,50% 30%);display:block;border:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 38%),linear-gradient(180deg,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 38%),linear-gradient(180deg,#000 78%,transparent 100%);
  mask-composite:intersect}

@media(max-width:900px){
  .page-hero.ph-hero{min-height:0}
  .page-hero.ph-hero > *:not(.ph-hero-img):not(.giant){max-width:none}
  .ph-hero-img{position:relative;order:-1;width:auto;height:46vh;margin:-2rem -6vw 1.6rem}
  .ph-hero-img img{
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* 本文中の写真ブロック（枠なし・ふちをぼかす） */
.ph-soft{margin:0}
.ph-soft img{display:block;width:100%;height:auto;border:0;
  -webkit-mask-image:radial-gradient(ellipse 75% 72% at 50% 48%,#000 58%,transparent 100%);
          mask-image:radial-gradient(ellipse 75% 72% at 50% 48%,#000 58%,transparent 100%)}