/* =========================================================
   FRONT : main middle layer
   ========================================================= */
body.is-front .main::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("../images/main-layer.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* front の実コンテンツはレイヤーより上 */
body.is-front .stage,
body.is-front .grid{
  position: relative;
  z-index: 2;
}

/* =========================================================
   FRONT : grid background (image)
   ========================================================= */
body.is-front .grid{
  background-image: url("../images/top-grid-back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   FRONT INTEGRATION（PC時：padding:0 版で統一）
   ========================================================= */
@media (min-width: 1024px){

  body.is-front .main{
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;

    /* stage,gridの枠の調整部分*/
    padding: 5px;
  }

  body.is-front .stage{
    flex: 8 0 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  body.is-front .grid{
    flex: 2 0 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }
}

/* =========================================================
   FRONT : grid adhesion fade（接着フェード）
   ========================================================= */
body.is-front .grid{
  position: relative; /* 疑似要素の土台 */
}

body.is-front .grid::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(to top,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.45) 100%);
}

body.is-front .grid > *{
  position: relative;
  z-index: 1;
}