/* =========================================================
   fudosha.net
   assets/css/content.css（全文：HOMEの#siteContentフェードをSP限定に） 
   ========================================================= */

/* FIX: fixed pages SP hit-test (hamburger) */
body[data-page]:not([data-page="main"]) #siteHeader{
  position: relative; /* z-index を効かせるため */
  z-index: 1500;      /* #siteContent(z:0)より上。menuOverlay(z:2000)より下 */
}

@media (min-width: 768px){
  body[data-page]:not([data-page="main"]) #siteSubHeader{
    position: relative;
    z-index: 100;      /* header slot より下 */
  }
}

/* #siteContent が “本文の外枠” + stacking context */
#siteContent{
  position: relative;
  z-index: 0; /* ←これで stacking context を作る（必須） */
}

/* SP：固定ヘッダーに被らないよう #siteContent を押し下げ */
@media (max-width: 767px){
  #siteContent{
    padding-top: var(--header-offset-sp);
  }

  /* subheader.css 側の margin-top を打ち消す（トップで subheader 無い場合も安全） */
  #siteSubHeader{
    margin-top: 0 !important;
  }
}

/* PC：押し下げ不要（サブヘッダーはヘッダーに重ねる運用） */
@media (min-width: 768px){
  #siteContent{
    padding-top: 0;
  }
}

/* =========================================================
   Z-order coordination inside #siteContent
   ========================================================= */

/* siteSubHeaderは z-index を付けない（stacking context化させない） */
#siteSubHeader{
  position: relative;
  z-index: auto;
}

/* 本文領域を “壁紙とイラストの間” に固定 */
#siteMain,
#siteFooter{
  position: relative;
  z-index: 50;
}

/* Comment は subheader の illust(layer) に被せて読めるよう上げる */
#siteComment{
  position: relative;
  z-index: 120;
}

/* =========================================================
   SiteContent fade-in
   ---------------------------------------------------------
   - HOME(PC)：今回のbg-over演出で hero を個別に制御するので、
     #siteContent 一括フェードは “SPだけ” に限定する
   - 固定ページ：要素単位のフェード順制御を motion.css 側でやる
   ========================================================= */

/* HOME: SP only */
@media (max-width: 767px){
  html.js body.is-home #siteContent{
    opacity: 0;
    transform: translateY(var(--motion-site-shift, 12px));
    transition:
      opacity var(--motion-site-fade, 1200ms) var(--ease-out, ease-out),
      transform var(--motion-site-fade, 1200ms) var(--ease-out, ease-out);
    will-change: opacity, transform;
  }

  html.js body.is-home.is-ready #siteContent{
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce){
    html.js body.is-home #siteContent{
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}