/* -----------------------
  scene
----------------------- */
.scene{
  background: url(../img/scene_bg.png) no-repeat center top / 100%;
}

.scene_ttl {
  display: grid;
  place-items: center;
  position: relative;
}

.scene_ttl h2,
.scene_ttl .scene_sub {
  grid-area: 1 / 1;
  margin: 0;
  align-self: start;
}

.scene_ttl h2 {
  z-index: 1;
}
.scene_ttl .scene_sub {
  position: absolute;
  top: min(calc(66 / 960 * 100vw),66px);
  left: min(calc(80 / 960 * 100vw),80px);
  width: min(calc(279 / 960 * 100vw),279px);
  z-index: 2;
}

.scene ol li {
  display: grid;
  place-items: center;
  position: relative;
  grid-area: 1 / 1;
}

.scene ol li:nth-of-type(2) {
  margin-top: max(calc(-170 / 960 * 100vw), -170px);
}
.scene ol li:nth-of-type(3) {
  margin-top: max(calc(-140 / 960 * 100vw), -140px);
}
.scene ol li:nth-of-type(4) {
  margin-top: max(calc(-740 / 960 * 100vw), -740px);
}
.scene_line{
  display: grid;
  grid-area: 1 / 1;
  align-self: end;
}
.scene ol li  .scene_line p,
.scene ol li p {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
}

.scene ol li p:nth-child(1) {
  z-index: 1;
}

.scene ol li .bg {
  z-index: 2;
}

.scene ol li .txt {
  z-index: 3;
}
/* ----------------------------------------
  各方向からのマスク表示 + フェード + スライド
---------------------------------------- */
.scene_line .bg,
.scene_line .txt {
  opacity: 1;
}

.scene_line .bg.scn-move,
.scene_line .txt.scn-move {
  opacity: 1;
}
/* 右→左 */
.scn-unmaskLeft.bg.trigger {
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  transform: translateX(30px);
  transition: clip-path 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.scn-unmaskLeft.bg.trigger.scn-move {
  clip-path: inset(0);
  opacity: 1;
  transform: translateX(0);
}
.scn-unmaskLeft.txt.trigger {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path 1.5s ease, opacity 1.5s ease;
}
.scn-unmaskLeft.txt.trigger.scn-move {
  clip-path: inset(0);
  opacity: 1;
  transform: translateX(0);
}

/* 左→右 */
.scn-unmaskRight.bg.trigger {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateX(-30px);
  transition: clip-path 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.scn-unmaskRight.bg.trigger.scn-move {
  clip-path: inset(0);
  opacity: 1;
  transform: translateX(0);
}
.scn-unmaskRight.txt.trigger {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path 1.5s ease, opacity 1.5s ease;
}
.scn-unmaskRight.txt.trigger.scn-move {
  clip-path: inset(0);
  opacity: 1;
  transform: translateX(0);
}

/* 上→下 */
.scn-unmaskTop.bg.trigger {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(-30px);
  transition: clip-path 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.scn-unmaskTop.bg.trigger.scn-move {
  clip-path: inset(0);
  opacity: 1;
  transform: translateY(0);
}
.scn-unmaskTop.txt.trigger {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 1.5s ease, opacity 1.5s ease;
}
.scn-unmaskTop.txt.trigger.scn-move {
  clip-path: inset(0);
  opacity: 1;
  transform: translateY(0);
}