/* =========================================================
  七五三ページ CSS
  HERO：SVGタイトルのみ / 全写真ランダム表示 / PC上4枚・下4枚追加版
========================================================= */

/* =========================================================
  HERO BASE
========================================================= */

.yp753-hero-random-wall {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
}

.yp753-hero-random-wall,
.yp753-hero-random-wall * {
  box-sizing: border-box;
}

.yp753-hero-random-wall__seo-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.yp753-hero-random-wall__inner {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #ffffff;
}

/* =========================================================
  PHOTO WALL
========================================================= */

.yp753-hero-random-wall__photos {
  position: absolute;
  inset: -7vw;
  z-index: 1;
  overflow: hidden;
  background: #ffffff;
}

.yp753-hero-random-wall__photo {
  --x: 0px;
  --y: 0px;
  --w: 260px;
  --h: 260px;
  --r: 0deg;
  --delay: 0ms;

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform:
    translate(-50%, -50%)
    translate(var(--x), var(--y))
    rotate(var(--r))
    scale(1.04);
  opacity: 0;
  animation: yp753RandomWallIn 780ms cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.yp753-hero-random-wall__photo::before,
.yp753-hero-random-wall__photo::after {
  display: none !important;
  content: none !important;
}

@keyframes yp753RandomWallIn {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(calc(var(--x) * 0.82), calc(var(--y) * 0.82))
      rotate(calc(var(--r) * 0.5))
      scale(1.12);
    filter: blur(7px);
  }

  100% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate(var(--x), var(--y))
      rotate(var(--r))
      scale(1.04);
    filter: blur(0);
  }
}

/* =========================================================
  PC PHOTO POSITIONS
  既存18枚 + 上4枚 + 下4枚
========================================================= */

.yp753-hero-random-wall__photo--01 {
  --x: -720px;
  --y: -340px;
  --w: 340px;
  --h: 340px;
  --r: -5deg;
  --delay: 30ms;
}

.yp753-hero-random-wall__photo--02 {
  --x: -455px;
  --y: -365px;
  --w: 330px;
  --h: 330px;
  --r: 4deg;
  --delay: 60ms;
}

.yp753-hero-random-wall__photo--03 {
  --x: -180px;
  --y: -360px;
  --w: 340px;
  --h: 340px;
  --r: -3deg;
  --delay: 90ms;
}

.yp753-hero-random-wall__photo--04 {
  --x: 105px;
  --y: -365px;
  --w: 350px;
  --h: 350px;
  --r: 4deg;
  --delay: 120ms;
}

.yp753-hero-random-wall__photo--05 {
  --x: 405px;
  --y: -355px;
  --w: 340px;
  --h: 340px;
  --r: -4deg;
  --delay: 150ms;
}

.yp753-hero-random-wall__photo--06 {
  --x: 705px;
  --y: -330px;
  --w: 340px;
  --h: 340px;
  --r: 5deg;
  --delay: 180ms;
}

.yp753-hero-random-wall__photo--07 {
  --x: -735px;
  --y: -65px;
  --w: 350px;
  --h: 350px;
  --r: 4deg;
  --delay: 210ms;
}

.yp753-hero-random-wall__photo--08 {
  --x: -455px;
  --y: -55px;
  --w: 355px;
  --h: 355px;
  --r: -4deg;
  --delay: 240ms;
}

.yp753-hero-random-wall__photo--09 {
  --x: -170px;
  --y: -40px;
  --w: 365px;
  --h: 365px;
  --r: 3deg;
  --delay: 270ms;
}

.yp753-hero-random-wall__photo--10 {
  --x: 165px;
  --y: -35px;
  --w: 365px;
  --h: 365px;
  --r: -3deg;
  --delay: 300ms;
}

.yp753-hero-random-wall__photo--11 {
  --x: 465px;
  --y: -45px;
  --w: 355px;
  --h: 355px;
  --r: 4deg;
  --delay: 330ms;
}

.yp753-hero-random-wall__photo--12 {
  --x: 750px;
  --y: -50px;
  --w: 350px;
  --h: 350px;
  --r: -4deg;
  --delay: 360ms;
}

.yp753-hero-random-wall__photo--13 {
  --x: -700px;
  --y: 275px;
  --w: 340px;
  --h: 340px;
  --r: -4deg;
  --delay: 390ms;
}

.yp753-hero-random-wall__photo--14 {
  --x: -410px;
  --y: 290px;
  --w: 350px;
  --h: 350px;
  --r: 4deg;
  --delay: 420ms;
}

.yp753-hero-random-wall__photo--15 {
  --x: -115px;
  --y: 300px;
  --w: 350px;
  --h: 350px;
  --r: -3deg;
  --delay: 450ms;
}

.yp753-hero-random-wall__photo--16 {
  --x: 180px;
  --y: 300px;
  --w: 350px;
  --h: 350px;
  --r: 3deg;
  --delay: 480ms;
}

.yp753-hero-random-wall__photo--17 {
  --x: 470px;
  --y: 285px;
  --w: 350px;
  --h: 350px;
  --r: -4deg;
  --delay: 510ms;
}

.yp753-hero-random-wall__photo--18 {
  --x: 745px;
  --y: 275px;
  --w: 340px;
  --h: 340px;
  --r: 4deg;
  --delay: 540ms;
}

/* PC上部：横並び4枚追加 */

.yp753-hero-random-wall__photo--19 {
  --x: -510px;
  --y: -610px;
  --w: 330px;
  --h: 330px;
  --r: -3deg;
  --delay: 570ms;
}

.yp753-hero-random-wall__photo--20 {
  --x: -170px;
  --y: -620px;
  --w: 330px;
  --h: 330px;
  --r: 2deg;
  --delay: 600ms;
}

.yp753-hero-random-wall__photo--21 {
  --x: 170px;
  --y: -620px;
  --w: 330px;
  --h: 330px;
  --r: -2deg;
  --delay: 630ms;
}

.yp753-hero-random-wall__photo--22 {
  --x: 510px;
  --y: -610px;
  --w: 330px;
  --h: 330px;
  --r: 3deg;
  --delay: 660ms;
}

/* PC下部：横並び4枚追加 */

.yp753-hero-random-wall__photo--23 {
  --x: -510px;
  --y: 560px;
  --w: 330px;
  --h: 330px;
  --r: 3deg;
  --delay: 690ms;
}

.yp753-hero-random-wall__photo--24 {
  --x: -170px;
  --y: 575px;
  --w: 330px;
  --h: 330px;
  --r: -2deg;
  --delay: 720ms;
}

.yp753-hero-random-wall__photo--25 {
  --x: 170px;
  --y: 575px;
  --w: 330px;
  --h: 330px;
  --r: 2deg;
  --delay: 750ms;
}

.yp753-hero-random-wall__photo--26 {
  --x: 510px;
  --y: 560px;
  --w: 330px;
  --h: 330px;
  --r: -3deg;
  --delay: 780ms;
}

/* =========================================================
  OVERLAY
========================================================= */

.yp753-hero-random-wall__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.23) 20%,
      rgba(0, 0, 0, 0.14) 42%,
      rgba(0, 0, 0, 0.06) 70%,
      rgba(0, 0, 0, 0.10) 100%
    );
}

.yp753-hero-random-wall__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.02) 42%,
      rgba(0, 0, 0, 0.10) 100%
    );
}

/* =========================================================
  SVG TITLE
========================================================= */

.yp753-hero-random-wall__copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(760px, 84vw);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.yp753-hero-random-wall__title-image {
  display: block;
  width: min(680px, 82vw);
  aspect-ratio: 1123 / 794;
  height: auto;
  margin: 0 auto;
  background-image: url("https://yourpleasure.photo/wp-content/uploads/2026/05/753top260502.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  animation: yp753TitleSoftIn 900ms cubic-bezier(0.2, 0.85, 0.22, 1) 620ms forwards;
  filter:
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.34))
    drop-shadow(0 14px 30px rgba(0, 0, 0, 0.26));
  will-change: transform, opacity;
}

@keyframes yp753TitleSoftIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
  TABLET
========================================================= */

@media screen and (max-width: 1024px) {
  .yp753-hero-random-wall__photos {
    inset: -8vw;
  }

  .yp753-hero-random-wall__photo--01 {
    --x: -420px;
    --y: -370px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--02 {
    --x: -200px;
    --y: -380px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--03 {
    --x: 20px;
    --y: -380px;
    --w: 265px;
    --h: 265px;
  }

  .yp753-hero-random-wall__photo--04 {
    --x: 245px;
    --y: -375px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--05 {
    --x: 450px;
    --y: -350px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--06 {
    --x: -420px;
    --y: -125px;
    --w: 270px;
    --h: 270px;
  }

  .yp753-hero-random-wall__photo--07 {
    --x: -190px;
    --y: -120px;
    --w: 275px;
    --h: 275px;
  }

  .yp753-hero-random-wall__photo--08 {
    --x: 60px;
    --y: -120px;
    --w: 285px;
    --h: 285px;
  }

  .yp753-hero-random-wall__photo--09 {
    --x: 305px;
    --y: -120px;
    --w: 275px;
    --h: 275px;
  }

  .yp753-hero-random-wall__photo--10 {
    --x: 500px;
    --y: -100px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--11 {
    --x: -420px;
    --y: 150px;
    --w: 270px;
    --h: 270px;
  }

  .yp753-hero-random-wall__photo--12 {
    --x: -190px;
    --y: 160px;
    --w: 275px;
    --h: 275px;
  }

  .yp753-hero-random-wall__photo--13 {
    --x: 60px;
    --y: 160px;
    --w: 285px;
    --h: 285px;
  }

  .yp753-hero-random-wall__photo--14 {
    --x: 305px;
    --y: 160px;
    --w: 275px;
    --h: 275px;
  }

  .yp753-hero-random-wall__photo--15 {
    --x: 505px;
    --y: 170px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--16 {
    --x: -230px;
    --y: 405px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--17 {
    --x: 20px;
    --y: 420px;
    --w: 265px;
    --h: 265px;
  }

  .yp753-hero-random-wall__photo--18 {
    --x: 270px;
    --y: 405px;
    --w: 260px;
    --h: 260px;
  }

  .yp753-hero-random-wall__photo--19 {
    --x: -330px;
    --y: -590px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--20 {
    --x: -110px;
    --y: -600px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--21 {
    --x: 110px;
    --y: -600px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--22 {
    --x: 330px;
    --y: -590px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--23 {
    --x: -330px;
    --y: 610px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--24 {
    --x: -110px;
    --y: 620px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--25 {
    --x: 110px;
    --y: 620px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__photo--26 {
    --x: 330px;
    --y: 610px;
    --w: 250px;
    --h: 250px;
  }

  .yp753-hero-random-wall__title-image {
    width: min(600px, 82vw);
  }
}

/* =========================================================
  SP
========================================================= */

@media screen and (max-width: 767px) {
  .yp753-hero-random-wall {
    min-height: 100svh;
  }

  .yp753-hero-random-wall__photos {
    inset: -10vw;
  }

  .yp753-hero-random-wall__photo {
    --w: 138px;
    --h: 138px;
    box-shadow: none !important;
  }

  .yp753-hero-random-wall__photo--01 {
    --x: -112px;
    --y: -370px;
    --w: 150px;
    --h: 150px;
    --r: -5deg;
  }

  .yp753-hero-random-wall__photo--02 {
    --x: 0px;
    --y: -382px;
    --w: 145px;
    --h: 145px;
    --r: 2deg;
  }

  .yp753-hero-random-wall__photo--03 {
    --x: 112px;
    --y: -370px;
    --w: 150px;
    --h: 150px;
    --r: 5deg;
  }

  .yp753-hero-random-wall__photo--04 {
    --x: -128px;
    --y: -235px;
    --w: 150px;
    --h: 150px;
    --r: 4deg;
  }

  .yp753-hero-random-wall__photo--05 {
    --x: 0px;
    --y: -248px;
    --w: 145px;
    --h: 145px;
    --r: -2deg;
  }

  .yp753-hero-random-wall__photo--06 {
    --x: 128px;
    --y: -235px;
    --w: 150px;
    --h: 150px;
    --r: -4deg;
  }

  .yp753-hero-random-wall__photo--07 {
    --x: -132px;
    --y: -95px;
    --w: 150px;
    --h: 150px;
    --r: -4deg;
  }

  .yp753-hero-random-wall__photo--08 {
    --x: 0px;
    --y: -102px;
    --w: 150px;
    --h: 150px;
    --r: 3deg;
  }

  .yp753-hero-random-wall__photo--09 {
    --x: 132px;
    --y: -95px;
    --w: 150px;
    --h: 150px;
    --r: 4deg;
  }

  .yp753-hero-random-wall__photo--10 {
    --x: -132px;
    --y: 55px;
    --w: 150px;
    --h: 150px;
    --r: 4deg;
  }

  .yp753-hero-random-wall__photo--11 {
    --x: 0px;
    --y: 48px;
    --w: 150px;
    --h: 150px;
    --r: -3deg;
  }

  .yp753-hero-random-wall__photo--12 {
    --x: 132px;
    --y: 55px;
    --w: 150px;
    --h: 150px;
    --r: -4deg;
  }

  .yp753-hero-random-wall__photo--13 {
    --x: -128px;
    --y: 205px;
    --w: 150px;
    --h: 150px;
    --r: -4deg;
  }

  .yp753-hero-random-wall__photo--14 {
    --x: 0px;
    --y: 198px;
    --w: 150px;
    --h: 150px;
    --r: 2deg;
  }

  .yp753-hero-random-wall__photo--15 {
    --x: 128px;
    --y: 205px;
    --w: 150px;
    --h: 150px;
    --r: 4deg;
  }

  .yp753-hero-random-wall__photo--16 {
    --x: -112px;
    --y: 350px;
    --w: 150px;
    --h: 150px;
    --r: 5deg;
  }

  .yp753-hero-random-wall__photo--17 {
    --x: 0px;
    --y: 358px;
    --w: 145px;
    --h: 145px;
    --r: -2deg;
  }

  .yp753-hero-random-wall__photo--18 {
    --x: 112px;
    --y: 350px;
    --w: 150px;
    --h: 150px;
    --r: -5deg;
  }

  .yp753-hero-random-wall__photo--19,
  .yp753-hero-random-wall__photo--20,
  .yp753-hero-random-wall__photo--21,
  .yp753-hero-random-wall__photo--22,
  .yp753-hero-random-wall__photo--23,
  .yp753-hero-random-wall__photo--24,
  .yp753-hero-random-wall__photo--25,
  .yp753-hero-random-wall__photo--26 {
    display: none;
  }

  .yp753-hero-random-wall__overlay {
    background:
      radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.27) 24%,
        rgba(0, 0, 0, 0.12) 54%,
        rgba(0, 0, 0, 0.08) 100%
      );
  }

  .yp753-hero-random-wall__copy {
    width: calc(100% - 24px);
  }

  .yp753-hero-random-wall__title-image {
    width: min(330px, 86vw);
  }
}

@media screen and (max-width: 374px) {
  .yp753-hero-random-wall__photo--01 {
    --x: -104px;
    --y: -360px;
    --w: 138px;
    --h: 138px;
  }

  .yp753-hero-random-wall__photo--02 {
    --x: 0px;
    --y: -370px;
    --w: 136px;
    --h: 136px;
  }

  .yp753-hero-random-wall__photo--03 {
    --x: 104px;
    --y: -360px;
    --w: 138px;
    --h: 138px;
  }

  .yp753-hero-random-wall__photo--04 {
    --x: -118px;
    --y: -228px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--05 {
    --x: 0px;
    --y: -240px;
    --w: 136px;
    --h: 136px;
  }

  .yp753-hero-random-wall__photo--06 {
    --x: 118px;
    --y: -228px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--07 {
    --x: -122px;
    --y: -92px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--08 {
    --x: 0px;
    --y: -98px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--09 {
    --x: 122px;
    --y: -92px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--10 {
    --x: -122px;
    --y: 48px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--11 {
    --x: 0px;
    --y: 42px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--12 {
    --x: 122px;
    --y: 48px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--13 {
    --x: -118px;
    --y: 190px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--14 {
    --x: 0px;
    --y: 184px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--15 {
    --x: 118px;
    --y: 190px;
    --w: 140px;
    --h: 140px;
  }

  .yp753-hero-random-wall__photo--16 {
    --x: -104px;
    --y: 326px;
    --w: 138px;
    --h: 138px;
  }

  .yp753-hero-random-wall__photo--17 {
    --x: 0px;
    --y: 334px;
    --w: 136px;
    --h: 136px;
  }

  .yp753-hero-random-wall__photo--18 {
    --x: 104px;
    --y: 326px;
    --w: 138px;
    --h: 138px;
  }

  .yp753-hero-random-wall__title-image {
    width: min(300px, 86vw);
  }
}

/* =========================================================
  REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .yp753-hero-random-wall__photo {
    animation: none !important;
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate(var(--x), var(--y))
      rotate(var(--r))
      scale(1.04);
    filter: none;
  }

  .yp753-hero-random-wall__title-image {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}