html,
body{
  height:100%;
}

body{
  margin:0;
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:hidden;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}

.viewport{
  width:100vw;
  height:100%;
  position:relative;
  overflow:hidden;
  background:#ffffff;
  perspective:1800px;
  perspective-origin:50% 50%;
}

.viewport::before,
.viewport::after{
  content:"";
  position:absolute;
  left:-8%;
  width:116%;
  pointer-events:none;
  z-index:40;
}

@keyframes mistWaveTop{
  0%  { transform:scaleY(1)    translateY(0); }
  30% { transform:scaleY(1.10) translateY(-4%); }
  65% { transform:scaleY(.92)  translateY(3%); }
  100%{ transform:scaleY(1)    translateY(0); }
}

@keyframes mistWaveBottom{
  0%  { transform:scaleY(1)    translateY(0); }
  35% { transform:scaleY(1.08) translateY(4%); }
  70% { transform:scaleY(.94)  translateY(-3%); }
  100%{ transform:scaleY(1)    translateY(0); }
}

.viewport::before{
  top:0;
  height:min(154px,14.3vh);
  background:linear-gradient(
    180deg,
    rgba(255,216,197,1)   0%,
    rgba(255,216,197,1)  26%,
    rgba(255,216,197,.80) 54%,
    rgba(255,216,197,.42) 74%,
    rgba(255,216,197,.16) 88%,
    rgba(255,216,197,0) 100%
  );
  transform-origin:top center;
  transform:none;
  animation:none;
}

.viewport::after{
  bottom:-5%;
  height:42%;
  background-image:
    radial-gradient(
      96% 148% at -24% -8%,
      rgba(255,196,181,1) 0%,
      rgba(255,186,170,.95) 36%,
      rgba(255,190,174,.74) 66%,
      rgba(255,190,174,.34) 84%,
      rgba(255,190,174,0) 94%
    ),
    radial-gradient(
      96% 118% at 108% 0%,
      rgba(255,210,190,.99) 0%,
      rgba(255,206,187,.86) 30%,
      rgba(255,208,189,.52) 58%,
      rgba(255,208,189,0) 82%
    ),
    linear-gradient(
      0deg,
      rgba(255,216,197,1)   0%,
      rgba(255,216,197,1)  26%,
      rgba(255,216,197,.80) 54%,
      rgba(255,216,197,.42) 74%,
      rgba(255,216,197,.16) 88%,
      rgba(255,216,197,0) 100%
    );
  background-repeat:no-repeat;
  background-size:64% 126%,60% 100%,100% 100%;
  background-position:-6% top,right top,center bottom;
  -webkit-mask-image:radial-gradient(
    120% 122% at 50% -26%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 34%,
    rgba(0,0,0,.20) 49%,
    rgba(0,0,0,.56) 63%,
    rgba(0,0,0,.86) 76%,
    rgba(0,0,0,1) 86%
  );
  mask-image:radial-gradient(
    120% 122% at 50% -26%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 34%,
    rgba(0,0,0,.20) 49%,
    rgba(0,0,0,.56) 63%,
    rgba(0,0,0,.86) 76%,
    rgba(0,0,0,1) 86%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  filter:none;
  transform-origin:bottom center;
  transform:none;
  animation:none;
}

.layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  z-index:1;
}

.slide-copy{
  position:absolute;
  z-index:48;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  white-space:nowrap;
  text-align:left;
  color:#E33A22;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo","Noto Sans JP",sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.1;
  text-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.92),
    0 0 18px rgba(255,255,255,.72);
}

.slide-copy-word{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,24px,0);
  filter:blur(3px);
  will-change:transform,opacity,filter;
}

.slide-copy-line{
  display:block;
}

.slide-copy-line--indent{
  padding-left:1.8em;
}

.copy-top{
  font-size:clamp(24px,2.55vw,50px);
}

.copy-bottom{
  font-size:clamp(24px,2.55vw,50px);
}

#photo6b,
#photo7b{
  left:23.5938%;
  top:11.8000%;
  width:34.2188%;
}
#photo6b2,
#photo7b2{
  left:auto;
  right:23.8021%;
  top:80.6000%;
  width:24.4271%;
  text-align:right;
}
#photo8b,
#photo11b{
  left:auto;
  right:6.6000%;
  top:72.8000%;
  width:30.0000%;
  text-align:right;
}

#photo11b .slide-copy-line:nth-child(2){
  transform:translateX(1em);
}

@media (min-width:1600px){
  #photo6b2,
  #photo7b2{
    top:82.4000%;
  }
}

@media (max-width:767.98px){
  .copy-top{ font-size:clamp(18px,4.4vw,30px); }
  .copy-bottom{ font-size:clamp(18px,4.4vw,30px); }

  .slide-copy{
    width:min(86vw,460px);
    max-width:86vw;
    line-height:1.25;
    letter-spacing:.01em;
    white-space:normal;
    text-align:center;
  }

  #photo6b,
  #photo6b2,
  #photo7b,
  #photo7b2,
  #photo8b,
  #photo11b{
    left:0;
    right:0;
    width:min(92vw,520px);
    max-width:92vw;
    margin-inline:auto;
    text-align:center;
  }

  #photo6b,
  #photo6b2,
  #photo7b,
  #photo7b2{
    font-size:clamp(16px,4.2vw,24px);
    line-height:1.22;
  }

  #photo6b,
  #photo7b{
    top:15.8%;
  }

  #photo6b2,
  #photo7b2{
    top:78.8%;
  }

  .slide-copy-line--indent{
    padding-left:0;
  }

  #photo11b .slide-copy-line:nth-child(2){
    transform:none;
  }

  .viewport .memoryText{
    left:clamp(14px,5.8vw,34px);
    top:15.8%;
    width:min(74vw,360px);
    transform:none;
    text-align:left;
  }

  .viewport .memoryLine{
    margin:0 0 .24em;
    font-size:clamp(20px,4.6vw,30px);
    line-height:1.28;
    white-space:normal;
    text-wrap:balance;
  }

  .viewport .memoryLine:nth-child(1){ margin-left:0; }
  .viewport .memoryLine:nth-child(2){ margin-left:clamp(.8rem,2.8vw,1.8rem); }
  .viewport .memoryLine:nth-child(3){ margin-left:clamp(.3rem,1.5vw,1.0rem); }
  .viewport .memoryLine:nth-child(4){ margin-left:clamp(1.1rem,3.4vw,2.4rem); }

  .memoryOverlay::before{
    content:none;
    display:none;
  }

  #photo1::after{
    content:none;
    display:none;
  }
}

@media (max-width:575.98px){
  .copy-top{ font-size:clamp(16px,5.2vw,24px); }
  .copy-bottom{ font-size:clamp(16px,5.2vw,24px); }

  .slide-copy{
    width:min(88vw,332px);
    max-width:88vw;
    line-height:1.28;
  }

  #photo6b,
  #photo6b2,
  #photo7b,
  #photo7b2,
  #photo8b,
  #photo11b{
    width:min(92vw,350px);
    max-width:92vw;
  }

  #photo6b,
  #photo6b2,
  #photo7b,
  #photo7b2{
    font-size:clamp(14px,4.8vw,20px);
    line-height:1.2;
  }

  #photo6b,
  #photo7b{
    top:17.2%;
  }

  #photo6b2,
  #photo7b2{
    top:80.4%;
  }

  .viewport .memoryText{
    left:clamp(12px,5vw,22px);
    top:17.2%;
    width:min(72vw,280px);
  }

  .viewport .memoryLine{
    font-size:clamp(17px,5vw,22px);
    line-height:1.24;
  }

  .viewport .memoryLine:nth-child(1){ margin-left:0; }
  .viewport .memoryLine:nth-child(2){ margin-left:clamp(.55rem,2.6vw,1.2rem); }
  .viewport .memoryLine:nth-child(3){ margin-left:clamp(.2rem,1.3vw,.7rem); }
  .viewport .memoryLine:nth-child(4){ margin-left:clamp(.8rem,3.0vw,1.7rem); }

  .memoryOverlay::before{
    -webkit-mask-image:radial-gradient(
      ellipse 124% 230% at 128% 50%,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0)  74%,
      rgba(0,0,0,.42) 79%,
      rgba(0,0,0,1)  85%
    );
    mask-image:radial-gradient(
      ellipse 124% 230% at 128% 50%,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0)  74%,
      rgba(0,0,0,.42) 79%,
      rgba(0,0,0,1)  85%
    );
  }
}

#photo1::after{
  content:"";
  position:absolute;
  top:-2%;
  bottom:-2%;
  left:47%;
  width:clamp(72px,8vw,150px);
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(8px);
  pointer-events:none;
}


.memoryOverlay{
  position:absolute;
  inset:0;
  background:transparent;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.memoryOverlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:#ffffff;
  -webkit-mask-image:radial-gradient(
    ellipse 108% 220% at 116% 50%,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0)  62%,
    rgba(0,0,0,.5) 66%,
    rgba(0,0,0,1)  70%
  );
  mask-image:radial-gradient(
    ellipse 108% 220% at 116% 50%,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0)  62%,
    rgba(0,0,0,.5) 66%,
    rgba(0,0,0,1)  70%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  filter:blur(8px);
}

.memoryOverlay::after{
  display:none;
}

.memoryText{
  position:absolute;
  left:41%;
  top:calc(52% - clamp(72px, 8vw, 116px));
  width:62%;
  transform:translate(-50%,-50%);
  text-align:left;
  color:#D7250C;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo","Noto Sans JP",sans-serif;
  font-weight:700;
  z-index:42;
  pointer-events:none;
}

.memoryLine{
  margin:0 0 .34em;
  font-size:clamp(34px,3.4vw,50px);
  line-height:1.34;
  letter-spacing:.03em;
  white-space:nowrap;
  opacity:0;
  transform:translateY(44px);
  filter:blur(3px);
  will-change:transform,opacity,filter;
}

.memoryLine:last-child{ margin-bottom:0; }
.memoryLine:nth-child(1){ margin-left:0; }
.memoryLine:nth-child(2){ margin-left:clamp(1.4rem,2.6vw,3.2rem); }
.memoryLine:nth-child(3){ margin-left:clamp(.5rem,1.1vw,1.4rem); }
.memoryLine:nth-child(4){ margin-left:clamp(2.1rem,3.4vw,4.2rem); }

.memoryWord{
  display:inline-block;
  opacity:1;
  filter:none;
}

/* Common photo panel background settings */
#photo5, #photo5b, #photo6, #photo7, #photo9, #photo10, #photo12{
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#ffffff;
}

#photo12{
  background-color:transparent;
}

@media (max-width:767.98px){
  #photo2{
    background-position:60% center;
  }

  #photo3{
    background-position:62% center;
  }

  #photo5,
  #photo5b,
  #photo9,
  #photo10{
    background-size:cover;
    background-color:transparent;
  }

  #photo6,
  #photo7{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:transparent;
  }

  #photo6,
  #photo7{
    background-size:170% auto;
  }
}

/* slide06 slots (photo mask blocks) */
.s06-slot{
  position:absolute;
  background-size:cover;
  background-position:center;
  z-index:4;
  opacity:0;
}

#s06-right{
  z-index:6;
}

/* slide06 edge masks (placed above photo slots) */
.s06-edge{
  position:absolute;
  pointer-events:none;
  opacity:0;
  z-index:5;
  background-repeat:no-repeat;
  display:none;
}

.s07-page-layer,
.s07-page-shadow{
  position:absolute;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
}

.s07-page-layer{
  background-repeat:no-repeat;
}

#s07-turn-page{
  overflow:hidden;
}

.s07-turn-face{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-color:#ffffff;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

#s07-turn-front{
  transform:rotateY(0deg);
  z-index:1;
}

#s07-turn-back{
  transform:rotateY(180deg);
  z-index:2;
}

.s07-turn-slot{
  position:absolute;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  pointer-events:none;
  z-index:2;
  backface-visibility:hidden;
}

#s07-left-peek{
  z-index:5;
  transform-origin:right center;
  box-shadow:none;
}

#s07-next-page{
  z-index:6;
}

#s07-turn-page{
  z-index:7;
  box-shadow:none;
  backface-visibility:visible;
}

#s07-turn-shadow{
  display:block;
}



/* Final scene envelope (fade-in container) */
.s-env-wrap{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
.s-env{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  width:clamp(140px,14vw,200px);
  height:clamp(96px,9.5vw,136px);
}
.s-env-body{
  position:absolute;
  inset:0;
  background:#f0e0cc;
  border-radius:4px;
  box-shadow:0 6px 28px rgba(0,0,0,.22);
}
.s-env-flap{
  position:absolute;
  top:0;left:0;right:0;
  padding-bottom:55%;
  background:#e4d1b8;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
}
.s-mem{
  position:absolute;
  width:clamp(82px,8vw,112px);
  height:clamp(62px,6vw,84px);
  top:54%;
  left:50%;
  background-size:cover;
  background-position:center;
  border-radius:4px;
  box-shadow:0 4px 20px rgba(0,0,0,.22);
  opacity:0;
}
.s-letter{
  position:absolute;
  width:clamp(62px,6vw,86px);
  height:clamp(80px,8vw,110px);
  top:54%;
  left:50%;
  background:#fffaf4;
  border-radius:2px;
  box-shadow:0 3px 14px rgba(0,0,0,.14);
  opacity:0;
}
.s-letter::before{
  content:"";
  position:absolute;
  top:18px;left:14px;right:14px;
  height:1.5px;
  background:#d8c8b0;
  box-shadow:0 10px 0 #d8c8b0,0 20px 0 #d8c8b0,0 30px 0 #d8c8b0;
}

/* slide08 */
#photo8{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

#time-passage{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:34;
  will-change:opacity;
}

.time-pass-tone{
  position:absolute;
  inset:-6%;
  filter:blur(14px);
  mix-blend-mode:screen;
  will-change:opacity,filter,transform;
}

#time-pass-warm{
  background:
    radial-gradient(108% 106% at 18% 20%,rgba(247,198,136,.74) 0%,rgba(247,198,136,.34) 38%,rgba(247,198,136,0) 82%),
    radial-gradient(118% 98% at 86% 78%,rgba(224,142,90,.56) 0%,rgba(224,142,90,.22) 42%,rgba(224,142,90,0) 84%),
    linear-gradient(160deg,rgba(238,169,110,.28) 0%,rgba(238,169,110,.06) 56%,rgba(238,169,110,0) 100%);
  opacity:0;
}

#time-pass-cool{
  background:
    radial-gradient(110% 104% at 82% 22%,rgba(145,189,236,.72) 0%,rgba(145,189,236,.3) 42%,rgba(145,189,236,0) 84%),
    radial-gradient(94% 96% at 18% 84%,rgba(160,209,246,.58) 0%,rgba(160,209,246,.22) 46%,rgba(160,209,246,0) 84%),
    linear-gradient(180deg,rgba(176,214,248,.36) 0%,rgba(176,214,248,.12) 58%,rgba(176,214,248,0) 100%);
  opacity:0;
}

#time-pass-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.22) 54%,
    rgba(255,255,255,.62) 78%,
    rgba(255,255,255,.9) 100%
  );
  mix-blend-mode:screen;
  filter:blur(8px);
  opacity:0;
  display:none;
  will-change:opacity,transform;
}

#photo12{
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

@media (max-width:767.98px){
  #photo12{
    background-size:234% auto;
  }
}

@media (max-width:575.98px){
  #photo2{
    background-position:62% center;
  }

  #photo3{
    background-position:64% center;
  }

  #photo6,
  #photo7{
    background-size:182% auto;
  }

  #photo12{
    background-size:216% auto;
  }
}

.s07-envelope-layer{
  position:absolute;
  pointer-events:none;
  opacity:0;
  z-index:4;
  background-repeat:no-repeat;
}

#album-spine{
  position:absolute;
  top:0;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:clamp(14px,1.4vw,22px);
  background:linear-gradient(
    90deg,
    rgba(10,0,0,0) 0%,
    rgba(10,0,0,0.36) 50%,
    rgba(10,0,0,0) 100%
  );
  pointer-events:none;
  z-index:9;
  opacity:0;
}