@charset "UTF-8";

/*--- only clossfade
--------------------------------*/
.fade-in  { animation: fadeIn  var(--dur, 2s) ease both; }
.fade-out { animation: fadeOut var(--dur, 2s) ease both; }
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }

#btn-skip {
  position: absolute;
  display: block;
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 32px;
  cursor: pointer;
  opacity: 0;
  z-index: 101;
}
#btn-skip p {
  display: inline-block;
  font-size: 10px;
  padding: 2px 16px;
  border: 0.8px solid #fcffd9;
  border-radius: 10px;
  white-space: nowrap;
  box-sizing: border-box;
}
#scrollindi {
  position: absolute;
  width: 136px;
  left: auto;
  right: 32px;
  top: 64px;
  opacity: 0;
  z-index: 1;
}
#scrollindi #scrollwrap {
  display: grid;
  place-items: center;
  gap: 10px;
  margin: -8px auto 0;
}
#scroll-line {
  position: relative;
  width: 1px;
  height: 24px;
  background-color: #eaf2a5;
  overflow: hidden;
}
#scrollindi p {
  font-size: 11px;
  line-height: 1.3;
  /*color: #fcffd9;*/
  text-align: center;
}
#btn-skip p::selection, #scrollindi p::selection { background: none; }
#scrollindi #scroll-line::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 1px;
  height: 100%;
  background-color: #ffffff;
  animation: sclineanim 1.2s linear infinite;
  animation-play-state: paused;
}
#scrollindi.is-on-scline #scroll-line::before {
  animation-play-state: running;
}
@keyframes sclineanim {
  0% { top: -50%; }
  20% { top: 30%; height: 70%; }
  100% { top: 100%; height: 100%; }
}
#interest-focus {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#interest-focus svg {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
#interest-focus .small-circle {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  transform-origin: 50%;
  animation: 1.8s draw-small infinite alternate;
}
@keyframes draw-small {
  0% { stroke-dashoffset: 0; transform: rotate(0deg); }
  100% { stroke-dashoffset: 210; transform: rotate(360deg); }
}
#interest-focus .big-circle {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transform-origin: 50%;
  animation: 1.6s draw-big infinite alternate 0.5s;
}
@keyframes draw-big {
  0% { stroke-dashoffset: 0; transform: rotateY(180deg) rotate(360deg); }
  100% { stroke-dashoffset: 240; transform: rotateY(180deg) rotate(0deg); }
}

/*--- section
--------------------------------*/
.story-stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
}
.story[data-paused] * {
  animation-play-state: paused !important;
}
.story[data-paused] {
  content-visibility: hidden;
  contain: layout paint style;
}
.story { position: absolute; inset: 0; }
#story1, #story2, #story3, #story4, #story5 {
  width: 100%;
  height: 100%;
  background-color: hsla(90,0%,85%,1);
  display: grid;
  place-items: center;
  position: absolute;
  will-change: filter, opacity;
}
#story1 {
  background-image:
  radial-gradient(at 120% 100%, hsla(0,35%,65%,1) 0px, transparent 50%),
  radial-gradient(at 20% 96%, hsla(195,40%,55%,1) 0px, transparent 50%),
  radial-gradient(at 40% 60%, hsla(192,20%,75%,1) 0px, transparent 50%);
  z-index: 5;
}
#story2 {
  background: linear-gradient(-3deg, #769988 20%, #e0d1b8 65%, #faf3e8 100%);
  z-index: 4;
}
#story3 {
  /*background: linear-gradient(to right, #34848e 0%, #aac6c5 100%);*/
  /*animation: huerotator 6s infinite alternate;*/
  background: linear-gradient(-15deg, #abb9c7 20%, #5f84a6 100%);
  z-index: 3;
}
#story4 {
  background: linear-gradient(0deg, #769988 20%, #e0d1b8 65%, #d4d4d4 100%);
  z-index: 3;
}
#story5 {
  background-image:
  radial-gradient(at 120% 120%, hsla(0,35%,65%,1) 0px, transparent 50%),
  radial-gradient(at 20% 110%, hsla(195,40%,55%,1) 0px, transparent 50%);
  z-index: 3;
}
/*@keyframes huerotator {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(30deg); }
}*/
.smoke {
  width: 100%;
  height: 100%;
  position: absolute;
  mix-blend-mode: overlay;
  opacity: 0.3;
}
.man-walk {
  width: 22vw;
  aspect-ratio: 64 / 133;
  position: relative;
  overflow: hidden;
  /*animation: yura 1.5s ease forwards;*/
  transition: opacity 2s ease;
  will-change: transform;
  z-index: 2;
  opacity: 0;
}
#man-walk.anim-yura { animation: yura 1.5s ease forwards; }
#man-walk.man-walk.is-on-hide {
  transition: none;
  animation: yura-hide 1s ease forwards;
  opacity: 1;
  filter: blur(0);
}
@keyframes yura {
  0% {
    filter: blur(30px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes yura-hide {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    filter: blur(30px);
    opacity: 0;
  }
}
.man-walk img.frame, .man-walk canvas.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0s linear;
  will-change: opacity, transform;
}
.man-walk img.frame.hidden, .man-walk canvas.frame.hidden { opacity: 0; }
.man-walk img.frame.visible, .man-walk canvas.frame.visible { opacity: 1; }
.man-walk.crossfade img.frame, .man-walk.crossfade canvas.frame {
  transition: opacity 0.25s ease;
}
.sprite-canvas {
  mix-blend-mode: var(--sprite-blend, normal);
  filter: var(--sprite-filter, none);
}
.content-animgp, #interest, #anim-box2, #anim-box3, #anim-box4, #anim-box5, #anim-box6, #anim-box7, #anim-box8 {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.4s ease;
}
#anim-box1, #anim-box2, #anim-box3, #anim-box4, #anim-box5, #anim-box6, #anim-box7, #anim-box8 {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
}
#anim-box1 {
  bottom: 56px;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.8vw;
}
#ttl {
  flex: 0 0 auto;
  text-align: right;
}
#ttl #name {
  font-family: "fleur",sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 352px;
  margin: 0 0 -136px -80px;
}
#ttl #cate {
  font-size: 16px;
  letter-spacing: 0.28em;
}
#ttl .ch {
  text-align: center;
  display: inline-block;
  filter: drop-shadow(0 0 80px #ffffff);
  color: #ffffff;
  backface-visibility: hidden;
  animation: var(--anim,smoky) 2s var(--delay,1s) both;
  will-change: transform, filter, opacity;
}
#ttl .ch.smoky-rev {
  animation-name: smoky-rev;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-play-state: running;
}
#ttl .ch.smoky-mirror-rev {
  animation-name: smoky-mirror-rev;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-play-state: running;
}
#ttl .ch::selection {
  background: none;
}
#ttl #name .ch:nth-of-type(1) {
  width: 432px;
}
#ttl #name .ch:nth-of-type(2) {
  margin-left: -124px
}
@keyframes smoky {
  0% {
    transform: translate3d(16rem,-80rem,0) rotate(-40deg) skewX(40deg) scale(2);
    filter: blur(30px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 0;
  }
  82% {
    filter: blur(20px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 1;
  }
  100% {
    filter: blur(0px) drop-shadow(0 0 0 #ffffff);
    color: #eaf2a5;
    opacity: 1;
  }
}
@keyframes smoky-mirror {
  0% {
    transform: translate3d(16rem,-80rem,0) rotate(-40deg) skewX(40deg) scale(2);
    filter: blur(30px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 0;
  }
  82% {
    filter: blur(20px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 1;
  }
  100% {
    filter: blur(0px) drop-shadow(0 0 0 #ffffff);
    color: #eaf2a5;
    opacity: 1;
  }
}
@keyframes smoky-rev {
  0% {
    filter: blur(0px);
    color: #eaf2a5;
    opacity: 1;
  }
  52% {
    filter: blur(20px);
    color: #ffffff;
    opacity: 1;
  }
  100% {
    transform: translate3d(4rem,-10rem,0) rotate(-8deg) skewX(8deg) scale(1);
    filter: blur(30px);
    color: #ffffff;
    opacity: 0;
  }
}
@keyframes smoky-mirror-rev {
  0% {
    filter: blur(0px);
    color: #eaf2a5;
    opacity: 1;
  }
  52% {
    filter: blur(20px);
    color: #ffffff;
    opacity: 1;
  }
  100% {
    transform: translate3d(4rem,-10rem,0) rotate(-8deg) skewX(8deg) scale(1);
    filter: blur(30px);
    color: #ffffff;
    opacity: 0;
  }
}
#anim-box1 .scramble-gp {
  color: #eaf2a5;
  letter-spacing: 0em;
  flex: 1 1 auto;
  /*min-width: 0;*/
  margin: 0 64px 24px 0;
  text-align: right;
  position: relative;
}
#anim-box1 .scramble-gp .txt-scramble {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
#anim-box1 .scramble-gp .txt-scramble span {
  word-break: break-word;
}
html:not(.fonts-ready) #name,
html:not(.fonts-ready) #cate,
html:not(.fonts-ready) .scramble-gp p {
  opacity: 0;
}
.inner-txtgp {
  width: 100%;
  position: absolute;
  display: block;
  top: auto;
  bottom: 0;
  padding: 0 120px 80px;
}
.inner-txtgp p {
  margin: 16px 0;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
}
.inner-txtgp p::selection { background: none; }
.inner-txtgp p .typed {
  position: relative;
  display: inline-block;
}
.inner-txtgp p .typed::selection { background-color: #222222; }
.inner-txtgp p .typed::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: currentColor;
  opacity: 0;
}
.inner-txtgp p .typed.caret-on::after {
  animation: caretPulse var(--caret-duration, 70ms) linear 1;
}
@keyframes caretPulse {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.idle-caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 0.06em;
  vertical-align: -0.15em;
  background: currentColor;
  animation: idle-caret-blink 350ms steps(1, end) infinite;
}
@keyframes idle-caret-blink { 50% { opacity: 0; } }
.inner-txtgp .inner-txt2 {
  opacity: 0;
  margin-top: 32px;
}
.content-animgp {
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  z-index: 10;
}
#linekinsen {
  position: relative;
  display:block;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 240px;
  margin-top: -128px;
  pointer-events: auto;
  cursor: pointer;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
#interest {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  margin-top: -16px;
}
.circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}
.colorful {
  width: 10vw;
  height: 10vw;
  opacity: 0;
  filter: blur(30px);
  animation: bless 0.8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.colorful .ccle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100000px;
  animation: spin-squash linear infinite;
}
.colorful .ccle.blue { animation-duration: 2s; }
.colorful .ccle.red { animation-duration: 6s; }
.colorful .ccle.yellow { animation-duration: 8s; }
.colorful .blue {
  background: linear-gradient(0deg, rgba(0, 255, 255, 0) 10%, aqua 100%);
}
.colorful .red {
  background: linear-gradient(120deg, rgba(255, 0, 255, 0) 10%, fuchsia 100%);
}
.colorful .yellow {
  background: linear-gradient(240deg, rgba(255, 255, 0, 0) 10%, yellow 100%);
}
#interest.is-on-interest {
  display: block;
  opacity: 1;
}
div:has(#interest.is-on-interest) {
  mix-blend-mode: saturation;
}
#interest.is-on-interest .circle, #interest.is-on-interest .bright {
  animation-play-state: running;
}
@keyframes bless {
  0% {
    width: 10vw;
    height: 10vw;
    opacity: 0;
    filter: blur(30px);
  }
  100% {
    width: 25vw;
    height: 25vw;
    opacity: 1;
    filter: blur(35px);
  }
}
@keyframes spin-squash {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.03, 0.97); }
  50% { transform: rotate(180deg) scale(1.06, 0.94); }
  75% { transform: rotate(270deg) scale(1.03, 0.97); }
  100% { transform: rotate(360deg) scale(1); }
}
#story2 .content-animgp {
  /*inset: 0;*/
  display: flex;
  overflow-y: auto;
  z-index: -1;
}
#bg-dive {
  position: relative;
  width: 100%;
  height: 1200vh;
  background: #8B9191;
  background: linear-gradient(175deg,
    rgba(250, 243, 232, 1) 0%,
    rgba(224, 209, 184, 1) 5%,
    rgba(91, 122, 113, 1) 9%,
    rgba(47, 85, 77, 1) 22%,
    rgba(19, 48, 42, 1) 93%,
    rgba(10, 15, 15, 1) 100%);
}
#bg-dive #shadow {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 10vh;
  animation: shadow 8s infinite ease-in-out 0.5s alternate;
  display: block;
  transition: 0.5s ease-in-out;
  transform-origin: center left;
}
@supports (-moz-appearance: none) {
  #bg-dive #shadow {
    animation: none !important;
  }
}
#bg-dive #shadow img {
  width: 100%;
}
#bg-dive #shadow img:first-child {
  opacity: 0.6;
}
@keyframes shadow {
  0% { transform: scale(1); filter: blur(3px); }
  15% { transform: scale(1.02); filter: blur(5px); }
  60% { transform: scale(1.05); filter:5lur(8px); }
  75% { transform: scale(1.02); filter: blur(12px); }
  100% { transform: scale(1); filter: blur(5px); }
}
.shade {
  width: 100%;
  height: 100vh;
  text-align: center;
  mix-blend-mode: screen;
}
#shade1 {
  position: absolute;
  z-index: 2;
}
#shade1 p {
  font-size: 12px;
  text-align: center;
  z-index: 1;
}
#shade2 {
  position: fixed;
  bottom: 0;
  animation: bless 1.4s ease-in-out 0.8s infinite alternate;
  animation-play-state: paused;
  z-index: 1;
}
#shade1 #shade1-gp {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.shade video {
  position: relative;
  height: auto;
  aspect-ratio: 197 / 200;
  opacity: 0;
}
#shade1 video {
  width: 5vw;
}
#shade2 video {
  width: 32vw;
  filter: blur(30px);
  top: 50%;
  transform: translateY(-50%);
}
#shade1 video.is-on-shade {
  animation: yura 1.5s ease forwards;
}
#shade1 video.is-on-dive {
  animation: dive 1.0s ease forwards;
}
#shade2 video.is-on-shade {
  animation: yura 2.4s ease 0.8s forwards;
}
#shade2:has(video.is-on-shade) {
  animation-play-state: running;
}
@keyframes dive {
  0% {
    filter: blur(0px);
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    filter: blur(30px);
    transform: translateY(40px);
    opacity: 0;
  }
}
@keyframes bless {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.08;
  }
}
#story3 .content-animgp {
  inset: 0;
  display: flex;
  justify-content: flex-end;
  z-index: -1;
}
.flower-wrap {
  position: relative;
  width: auto;
  height: 100%;
  z-index: 0;
}
.bg-flower {
  height: 106vh;
  width: auto;
  aspect-ratio: 32 / 27;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  margin: 40px 0 0 0;
  overflow: hidden;
  transition: opacity 2s ease;
  transform-origin: center bottom;
  will-change: transform;
  opacity: 0;
}
#flower-sprite {
  animation:
    yura 1.5s ease forwards,
    breeze1 3.5s ease infinite;
}
#flower-sprite-back {
  height: 102vh;
  margin: -8px 264px 0 0;
  z-index: -1;
  animation:
    yura 1.8s ease 0.3s forwards,
    breeze1 4.0s ease 0.3s infinite;
}
.bg-flower img.frame, .bg-flower canvas.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  backface-visibility: hidden;
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0s linear;
  will-change: opacity, transform;
}
#flower-sprite-back img.frame, #flower-sprite-back canvas.frame {
  filter: blur(28px);
}
.bg-flower img.frame.hidden, .bg-flower canvas.frame.hidden { opacity: 0; }
.bg-flower img.frame.visible, .bg-flower canvas.frame.visible { opacity: 1; }
.bg-flower.crossfade img.frame, .bg-flower.crossfade canvas.frame {
  transition: opacity 0.25s ease;
}
@keyframes breeze1 {
  4% { transform: translate(-0.5px, -0.5px) rotate(0deg); }
  8% { transform: translate(0px, 0.5px) rotate(0deg); }
  12% { transform: translate(-0.2px, -0.5px) rotate(0deg); }
  16% { transform: translate(0.1px, -0.3px) rotate(0deg); }
  20% { transform: translate(0.2px, 0px) rotate(0deg); }
  24% { transform: translate(0.1px, 0.5px) rotate(0deg); }
  28% { transform: translate(0.5px, 0.2px) rotate(0deg); }
  32% { transform: translate(0.4px, -0.1px) rotate(0deg); }
  36% { transform: translate(0.5px, -0.4px) rotate(0deg); }
  40% { transform: translate(-0.2px, -0.5px) rotate(0.1deg); }
  44% { transform: translate(-0.5px, 0px) rotate(0.1deg); }
  48% { transform: translate(0px, 0.2px) rotate(0.4deg); }
  52% { transform: translate(0.1px, 0.1px) rotate(0.5deg); }
  56% { transform: translate(0.2px, 0.2px) rotate(0.4deg); }
  60% { transform: translate(0.5px, 0.5px) rotate(0.3deg); }
  64% { transform: translate(0.5px, 0.2px) rotate(0.2deg); }
  68% { transform: translate(0.1px, 0.1px) rotate(0.1deg); }
  72% { transform: translate(-0.2px, -0.1px) rotate(-0.1deg); }
  76% { transform: translate(-0.3px, -0.3px) rotate(-0.2deg); }
  80% { transform: translate(-0.1px, 0px) rotate(-0.1deg); }
  84% { transform: translate(0px, -0.2px) rotate(-0.5deg); }
  88% { transform: translate(0px, -0.1px) rotate(-0.2deg); }
  92% { transform: translate(0.5px, 0px) rotate(0deg); }
  96% { transform: translate(0.2px, -0.1px) rotate(0.1deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); }
}
#story4 .content-animgp {
  inset: 0;
  display: flex;
  z-index: -1;
}
.bird {
  width: 36vw;
  aspect-ratio: 17 / 10;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -35vh;
  overflow: hidden;
  animation: yura 1.5s ease 1.2s forwards;
  transition: opacity 2s ease;
  will-change: transform, opacity;
  z-index: 4;
  opacity: 0;
}
.bird img.frame, .bird canvas.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  backface-visibility: hidden;
  opacity: 0;
  filter: blur(3px);
  transition: opacity 0s linear;
  will-change: opacity, transform;
}
.bird img.frame.hidden, .bird canvas.frame.hidden { opacity: 0; }
.bird img.frame.visible, .bird canvas.frame.visible { opacity: 1; }
.bird.crossfade img.frame, .bird.crossfade canvas.frame {
  transition: opacity 0.25s ease;
}
#bird2.bird {
  width: 22vw;
  position: absolute;
  left: auto;
  right: -25vw;
  top: auto;
  bottom: 15vh;
  transform: none;
  animation: yurabirdsub 1.5s ease forwards;
  animation-play-state: paused;
}
#bird2.bird.is-on-birdsub {
  animation-play-state: running;
}
@keyframes yurabirdsub {
  0% {
    filter: blur(30px);
    opacity: 0;
    right: -25vw;
    bottom: 15vh;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    right: 5vw;
    bottom: 34vh;
  }
}
#cloud-gp {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 90vh;
  overflow: hidden;
}
#clone-wrap{ display: none; }
#cloud-overlay{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}
#cloud-overlay .cloud-set{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100vh);
  opacity: 0;
  will-change: transform, opacity;
}
#cloud-overlay .cloud-inner{
  position: relative;
  width: 100vw;
  overflow: visible;
  height: auto;
  transform-origin: 50% 0;
}
#cloud-overlay .cloud-img{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: block;
  width: 100vw;
  opacity: 1;
}
#slide-cloud {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
  overflow: hidden;
}
#slide-cloud ul {
  padding: 0;
  width: auto;
  display: flex;
  flex-shrink: 0;
}
#slide-cloud ul:first-child {
  animation: slide1 200s -100s linear infinite;
}
#slide-cloud ul:last-child {
  animation: slide2 200s linear infinite;
}
#slide-cloud ul li {
  display: inline-block;
  width: 100%;
  min-width: 1280px;
  list-style: none;
}
#slide-cloud ul li img {
  width: 100%;
}
@keyframes slide1 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes slide2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}
#story5 .content-animgp {
  inset: 0;
  display: flex;
  justify-content: center;
  z-index: -2;
}
.us-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
}
#man-walk2.man-walk {
  width: 26vw;
  position: absolute;
  animation: yura 2.0s ease 1.2s forwards;
  top: auto;
  bottom: 0;
  margin-bottom: -30vh;
  z-index: -1;
}
#man-walk2.man-walk img.frame, #man-walk2.man-walk canvas.frame {
  filter: blur(2px);
}
#people {
  width: 100%;
  aspect-ratio: 12 / 5;
  position: relative;
  overflow: hidden;
  transition: opacity 2s ease;
  will-change: transform;
  opacity: 0;
}
#people.fadeshow { animation: yura 2.0s ease 1.4s forwards; }
#people img.frame, #people canvas.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  backface-visibility: hidden;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0s linear;
  will-change: opacity, transform;
}
#people img.frame.hidden, #people canvas.frame.hidden { opacity: 0; }
#people img.frame.visible, #people canvas.frame.visible { opacity: 1; }
#people.crossfade img.frame, #people.crossfade canvas.frame {
  transition: opacity 0.25s ease;
}


@media screen and (max-width: 1140px) {
  #anim-box1 {
    display: grid;
    justify-content: start;
    align-content: end;
    top: auto;
  }
  #anim-box1 .scramble-gp { margin: 0; }
  #ttl #name { font-size: 320px; margin: 0 0 -124px -80px; }
  #ttl #name .ch:nth-of-type(2) { margin-left: -136px; }
}
@media screen and (max-width: 960px) {
  #man-walk { width: auto; height: 92vh; }
  #man-walk2.man-walk { width: 30vw; }
  #ttl { margin-bottom: -16px; }
  .inner-txtgp { padding: 0 80px 80px; }
  #shade1 video { width: 7.5vw; }
  #shade2 video { width: 48vw; }
  .bg-flower { margin: 10vh -30vw 0 0; }
}
@media screen and (max-height: 640px) and (orientation: landscape) {
  #man-walk { width: auto; height: 92vh; }
  #ttl #name { font-size: 270px; margin: 0 0 -102px -60px; }
  #ttl #cate { font-size: 15px; }
  #ttl #name .ch:nth-of-type(1) { width: 324px; }
  #ttl #name .ch:nth-of-type(2) { margin-left: -93px; }
  .content-animgp #linekinsen { margin-top: 0; }
}
@media screen and (max-aspect-ratio: 4/3) {
  #cloud-gp { height: 80vh; }
  #man-walk2.man-walk { margin-bottom: -15vh; }
}
@media screen and (max-width: 720px) {
  #scrollindi { width: 104px; right: 8px; top: 48px; }
  #scrollindi #scrollwrap { gap: 6px; }
  #scrollindi p, #btn-skip p { font-size: 9.5px; }
  .inner-txtgp p { margin: 12px 0; }
  .inner-txtgp .inner-txt2 { margin-top: 24px; }
}
@media screen and (max-width: 720px) and (orientation: portrait) {
  #ttl { margin-bottom: 8px; }
  #ttl #name { font-size: 44vw; margin: 0 0 -60px 12px; }
  #ttl #name .ch:nth-of-type(1) { width: 24vw; }
  #ttl #name .ch:nth-of-type(2) { margin-left: 0; }
  #ttl #cate { font-size: 3.4vw; letter-spacing: 0.16em; }
  .inner-txtgp { padding: 0 0 80px 20px; }
  #man-walk { height: 72vh; }
  #man-walk2.man-walk { width: 25vh; margin-bottom: 5vh; }
  #shade1 video { width: 11.25vw; }
  #shade2 video { width: 72vw; }
  .flower-wrap { margin-right: -40vw; }
  .bg-flower { height: 102vh; margin: 30vh 0 0 0; }
  #flower-sprite-back { height: 100vh; margin: 0 40vw 0 0; }
  .bird { width: 58vw; }
  #bird2.bird { width: 39vw; bottom: 20vh; }
  @keyframes yurabirdsub {
    0% {
      filter: blur(30px);
      opacity: 0;
      right: -25vw;
      bottom: 20vh;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
      right: 5vw;
      bottom: 45vh;
    }
  }
  #people { margin-top: -25vh; }
}
@media screen and (max-width: 320px) and (orientation: portrait) {
  #ttl #name { margin: 0 0 -52px 12px; }
  .inner-txtgp { padding: 0 0 80px 16px; }
}