.l-main {
  position: relative;
}

.is-ex [href="./dearfriend/"] .p-pickup-panel__img::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/ex/kv_02-2.jpg") no-repeat center/contain;
}
.is-ex [href="./dearfriend/"] .p-pickup-panel__img img {
  opacity: 0;
}

.p-ex_deco {
  --ease_out: cubic-bezier(0.5, 1, 0.89, 1);
  --ease_inout: cubic-bezier(0.65, 0, 0.35, 1);
  width: 100px;
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
  outline: none !important;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-ex_deco {
    width: 50px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-ex_deco {
    transition: transform 0.2s var(--ease_out);
  }
  .p-ex_deco:hover {
    transform: scale(1.05);
  }
}
.is-ex .p-ex_deco {
  opacity: 1;
  pointer-events: auto;
}

.p-ex_cover {
  --ease_out: cubic-bezier(0.5, 1, 0.89, 1);
  --ease_inout: cubic-bezier(0.65, 0, 0.35, 1);
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--color-white);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
}
.is-ex-end .p-ex_cover {
  animation: show 4s var(--ease_inout);
}
@keyframes show {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}