/* /assets/css/subheader.css */
/* =========================================================
   fudosha.net
   assets/css/subheader.css
   - SubHeader (fixed pages only)
   - 4 layers:
     1) rule (bottom)
     2) wall (background)
     3) text
     4) illust (top)
   - IMPORTANT:
     #siteSubHeader MUST NOT create a stacking context.
   ========================================================= */

:root{
  --subheader-overlap: calc(-17px * var(--pc-ui-scale, 1));

  --subheader-rule-top-sp: 45%;
  --subheader-rule-top-pc: 85%;

  --subheader-illust-pos-sp: top center;
  --subheader-illust-pos-pc: top center;

  --z-subheader-rule: 10;
  --z-subheader-wall: 20;
  --z-content-mid:   50;
  --z-subheader-ill: 95;
  --z-subheader-text:80;
}

.subheader{
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  position: relative;
}

.subheader-inner{
  width: var(--bgw);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

.subheader-inner picture{ display: block; }

/* TEXT */
.subheader-text{
  position: relative;
  z-index: var(--z-subheader-text);
  display: block;
  pointer-events: none;
}

.subheader-text-img{
  display: block;
  width: 100%;
  height: auto;
}

/* ILLUST */
.subheader-illust{
  position: absolute;
  inset: 0;
  z-index: var(--z-subheader-ill);
  pointer-events: none;
}

.subheader-illust-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--subheader-illust-pos-sp);
}

/* WALL */
.subheader-wall{
  position: absolute;
  inset: 0;
  z-index: var(--z-subheader-wall);
  pointer-events: none;
}

.subheader-wall-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* RULE */
.subheader-rule{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--subheader-rule-top-sp);
  z-index: var(--z-subheader-rule);
  pointer-events: none;
}

.subheader-rule-img{
  display: block;
  width: 100vw;
  max-width: none;
  height: calc(10px * var(--pc-ui-scale, 1));     /* 固定 */
  object-fit: fill; /* 伸ばす（SVGなら効きやすい） */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* SP */
@media (max-width: 767px){
  #siteSubHeader{
    position: relative;
    pointer-events: none;
  }

  :root{
    --subheader-illust-pos-sp: top center;
  }

  .subheader-rule{
    top: var(--subheader-rule-top-sp);
  }
}

/* PC */
@media (min-width: 768px){
  #siteSubHeader{
    position: relative;
    pointer-events: none;
    background: transparent;
    margin-bottom: calc(var(--subheader-overlap) * -1);
  }

  .subheader-inner{
    transform: translateY(calc(var(--subheader-overlap) * -1));
  }

  :root{
    --subheader-illust-pos-pc: top center;
  }

  .subheader-illust-img{
    object-position: var(--subheader-illust-pos-pc);
  }

  .subheader-rule{
    top: var(--subheader-rule-top-pc);
  }
}

/* =========================================================
   PC: headerにillustをコピーする運用のときは
   subheader側の元illustを消す（2体化防止）
   ========================================================= */
@media (min-width: 768px){
  body.has-brand-illust #siteSubHeader .subheader-illust{
    display: none;
  }
}