/*
 * MRC TOP hero 背景 2 枚 crossfade（C-D364、MASTER D-364）。TOP（is_front_page）だけで読み込む。
 * 対象は JS が後から足す .mrc-xf-slide（2 枚目の背景層）と .mrc-xf-ctrl（一時停止／再生・次の写真）だけ。
 * 建物写真・overlay・キャッチ・::before の scrim・hero 高さ（Layer 14 を含む）には一切触れない。
 */
#header_slider .item1 .bg_image .mrc-xf-slide { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1s ease-in-out; pointer-events: none; }
#header_slider .item1 .bg_image .mrc-xf-slide.is-on { opacity: 1; }
/* 2 枚目の構図。Layer 14（.item .bg_image img、≥1537px）の建物用 object-position が子孫の img にも及ぶため、specificity を上げて 2 枚目だけ独立させる */
body.mrc-design-v1.mrc-page--top #header_slider .item1 .bg_image .mrc-xf-slide img { width: 100%; height: 100%; display: block; margin: 0; object-fit: cover; object-position: 50% 12%; }
/* 横に広い画面ほど写真が縦に余る（cover）ので、顔がキャッチ（hero の縦中央）より上に収まるよう段階的に上へ寄せる */
@media only screen and (min-width: 1537px) {
  body.mrc-design-v1.mrc-page--top #header_slider .item1 .bg_image .mrc-xf-slide img { object-position: 50% 28%; }
}
@media only screen and (min-width: 2000px) {
  body.mrc-design-v1.mrc-page--top #header_slider .item1 .bg_image .mrc-xf-slide img { object-position: 50% 26%; }
}
/* mobile（SERUM の mobile 画像に切り替わる 800px 以下）：院長を中央へ。患者さんは画面外にかかる */
@media only screen and (max-width: 800px) {
  body.mrc-design-v1.mrc-page--top #header_slider .item1 .bg_image .mrc-xf-slide img { object-position: 66% 0%; }
}
/* 2 枚目だけの局所 scrim（D-364：診察写真で不足する所だけ、穏やかに）。建物写真・共通 overlay・キャッチの ::before は不変。
   明るい壁の上に来る白い UI（PC：お知らせ pill／mobile：メニュー button・下端のお知らせ）の背後だけを暗くする */
#header_slider .item1 .bg_image .mrc-xf-slide::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
@media only screen and (min-width: 801px) {
  /* キャッチ（hero の縦横中央）の背後：白衣の上に白文字が載るため */
  #header_slider .item1 .bg_image .mrc-xf-slide::after { background: radial-gradient(ellipse 560px 170px at 50% 50%, rgba(28, 41, 36, .4) 0%, rgba(28, 41, 36, .26) 55%, rgba(28, 41, 36, 0) 100%); }
  #header_slider_wrap.mrc-xf-has-ticker #header_slider .item1 .bg_image .mrc-xf-slide::after { background: radial-gradient(ellipse 330px 95px at calc(100% - 231px) 55px, rgba(28, 41, 36, .62) 0%, rgba(28, 41, 36, .45) 55%, rgba(28, 41, 36, 0) 100%), radial-gradient(ellipse 560px 170px at 50% 50%, rgba(28, 41, 36, .4) 0%, rgba(28, 41, 36, .26) 55%, rgba(28, 41, 36, 0) 100%); }
}
@media only screen and (max-width: 800px) {
  #header_slider .item1 .bg_image .mrc-xf-slide::after { background: radial-gradient(ellipse 110px 80px at calc(100% - 54px) 30px, rgba(28, 41, 36, .6) 0%, rgba(28, 41, 36, .4) 50%, rgba(28, 41, 36, 0) 100%); }
  #header_slider_wrap.mrc-xf-has-ticker #header_slider .item1 .bg_image .mrc-xf-slide::after { background: radial-gradient(ellipse 110px 80px at calc(100% - 54px) 30px, rgba(28, 41, 36, .6) 0%, rgba(28, 41, 36, .4) 50%, rgba(28, 41, 36, 0) 100%), linear-gradient(to top, rgba(28, 41, 36, .82) 0, rgba(28, 41, 36, .68) 70px, rgba(28, 41, 36, 0) 150px); }
}

/* 操作：hero の右下に 2 つ。44px の target、写真に左右されない地色、focus-visible は白線＋濃い外輪 */
#header_slider_wrap .mrc-xf-ctrl { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; gap: 8px; }
#header_slider_wrap .mrc-xf-btn { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(28, 41, 36, .72); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; }
#header_slider_wrap .mrc-xf-btn:hover { background: rgba(28, 41, 36, .9); }
#header_slider_wrap .mrc-xf-btn:focus { outline: none; }
#header_slider_wrap .mrc-xf-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(28, 41, 36, .95); }
#header_slider_wrap .mrc-xf-ico { display: block; position: relative; width: 14px; height: 14px; }
/* 一時停止（再生中）＝縦 2 本線 */
#header_slider_wrap .mrc-xf-toggle .mrc-xf-ico::before,
#header_slider_wrap .mrc-xf-toggle .mrc-xf-ico::after { content: ''; position: absolute; top: 0; width: 4px; height: 14px; background: currentColor; border-radius: 1px; }
#header_slider_wrap .mrc-xf-toggle .mrc-xf-ico::before { left: 2px; }
#header_slider_wrap .mrc-xf-toggle .mrc-xf-ico::after { right: 2px; }
/* 再生（停止中）＝右向き三角。形が変わるので色に頼らず状態が分かる */
#header_slider_wrap .mrc-xf-toggle.is-paused .mrc-xf-ico::before { left: 3px; width: 0; height: 0; background: none; border-radius: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
#header_slider_wrap .mrc-xf-toggle.is-paused .mrc-xf-ico::after { display: none; }
/* 次の写真＝右向きの細い山形 */
#header_slider_wrap .mrc-xf-next .mrc-xf-ico::before { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media only screen and (max-width: 800px) {
  #header_slider_wrap .mrc-xf-ctrl { right: 10px; bottom: 10px; gap: 6px; }
  #header_slider_wrap #news_ticker ~ .mrc-xf-ctrl { bottom: 80px; }   /* mobile の ticker（bottom:0・高さ 70px）の上に置き、お知らせの文字と重ねない */
}
@media (prefers-reduced-motion: reduce) {
  #header_slider .item1 .bg_image .mrc-xf-slide { transition: none; }
  #header_slider_wrap .mrc-xf-btn { transition: none; }
}

/* 短い横向きの phone（812×375／844×390／852×393 など。B_OWNER_RETURN v2.0 B_02）：横向きでは PC 用の layout になり、hero（730px）が画面より高いため、
   右下の操作が初期画面の外（y≒730）に出てしまう。この条件でだけ、初期画面（scroll 0）の右下に収まる位置へ上げる。
   縦位置：基準は wrap の上端（＝header 60px の下）。100svh − 60（header）− 16（下の余白）− 44（button）＝ top。100svh 非対応の browser は 100vh。
   横位置：右下には SERUM の「PAGE TOP」（#return_top：fixed・right 15px・bottom 25px・50×50、scroll 0 では透明だが tap を受ける）があるため、
   その左に 15px 空けて置く（right 80px）。scroll しても横方向で重ならない。 */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 450px) and (min-width: 760px) and (max-width: 930px) {
  #header_slider_wrap .mrc-xf-ctrl,
  #header_slider_wrap #news_ticker ~ .mrc-xf-ctrl { top: calc(100vh - 120px); top: calc(100svh - 120px); right: 80px; bottom: auto; }
}