.loading { width: 100%; height: 100%; position: fixed; z-index: 999; inset: 0; background: #740DFF; display: flex; align-items: center; justify-content: center; }
.loading img { width: 60%; height: auto; }
.loading2 { width: 100%; height: 100%; position: fixed; z-index: 998; inset: 0; background: #FFF; display: flex; align-items: center; justify-content: center; }
.loading2 { font-size: 3vw; line-height: 1.7; }
.loading2 img { width: 3em; height: 3em; display: block; margin: 0 auto 1em; }

.site-name { position: fixed; left: 2rem; top: 2rem; z-index: 99; margin: auto; }
.site-name img { width: 30vw; height: auto; display: block; }

@media screen and (max-width: 900px) {
  .site-name img { width: 70vw; }
}

.area-wrap  {
  width: 100vw;
  height: 100vh;
  margin: auto;
  overflow: scroll;
  scrollbar-width: none;
  position: relative;
  cursor: grab;

}
.area-wrap ::-webkit-scrollbar {
    display: none;
}
.area-wrap:active {
    cursor: grabbing;
  }

.area { width: 300vw; height: 300vh; }


.area-inner { width: inherit; height: inherit; position: absolute;  margin: auto; /*background: linear-gradient(to right bottom, #EFEFE0, #EFEFFF); border: 5px solid #000; */ font-size: 1.5vw; line-height: 2; }
.area-inner.org { inset: 0; }
.area-inner.right { top: 0; left: 300vw; }
.area-inner.bottom { top: 300vh; left: 0;  }
.area-inner.rightbottom { top: 300vh; left: 300vw; }

.poem { z-index: 2; }
.poem1 { position: absolute; top: 6%; left: -2%; writing-mode: vertical-rl; white-space: nowrap; margin: auto; }
.poem1 span { display: block; }
.poem1 span + span { margin-right: 3em; ; }

.poem1 { visibility: visible;
    background-position: 50% 0;
    background-color: transparent;
    background-image: linear-gradient(350deg, #FFF, #740DFF 33.1%, #740DFF 66%, #333 100%);
    background-size: 100% 400%;
    background-position: 50% 150%;
    background-repeat: repeat-x;
    color: transparent;
  -webkit-background-clip: text;
    background-clip: text;
  animation: poem1 3s infinite alternate; 
}
@keyframes poem1 { 
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

.poem2 { position: absolute; top: 30%; left:  28%; transform: rotate(35deg);  writing-mode: vertical-rl; white-space: nowrap; margin: auto; animation: poem2 4s infinite alternate; }

@keyframes poem2 { 
  0% { transform: translate(0, 0) rotate(35deg);  }
  100% { transform:translate(-5vw, 5vw) rotate(35deg); }
}

.poem3 { position: absolute; width: 20vw; height: 20vw; margin: 100px auto; left: 56%; top: 28%; margin: auto; animation: poem3 5s linear infinite;}
.poem3 svg { overflow: visible; }
.poem3  path { fill: none;}
.poem3  text {  font-size: .4vw; }


@keyframes poem3 { 
  0% { transform: rotate(0deg);  }
  100% { transform: rotate(-360deg); }
}

.poem4 { font-size: 2vw; position: absolute; left: 15%; bottom: 5%;  writing-mode: vertical-rl;  margin: auto; height: 14em; animation: poem4 10s infinite; }

@keyframes poem4 {
  0% {filter: blur(0); }
  80% { filter: blur(10px); }
  100% { filter: blur(0); }
}
.poem5 { font-size: 4vw; width: 20vw; position: absolute; left: 30%; top: 1vw; margin: auto;transform: scaleY(.66); }

.poem6 { position: absolute; left: 45%; top: 45%; transform: rotate(-90deg); font-size: 1.5vw;  writing-mode: vertical-rl; white-space: nowrap; animation: poem6 3s steps(10) alternate infinite; }

@keyframes poem6 { 
  0% { transform:  translateX(-10vw) rotate(-90deg);  }
  100% { transform: translateX(0vw) rotate(-90deg); }
}


.poem7 { position: absolute; top: 20%; left: 70%; display: flex; animation: poem7 10s infinite;transform-origin: center 19vw; } 
.poem7 svg { fill: none; width: 20vw; height: 20vw; overflow: visible; }
.poem7 svg + svg { margin-left: 1em; }
.poem7 text { fill: #0000FF; font-size: 3rem; letter-spacing: .3em; }


@keyframes poem7 { 
  0% { transform: rotate(0deg);  }
  100% { transform: rotate(360deg); }
}



.poem8 { position: absolute; right: 0%; top: 20%; margin: auto; animation: poem8 5s infinite; }
.poem8 svg { fill: none; width: 35vw; height: 30vw; }
.poem8 text { fill: #FF598E; font-size: 2.5rem; letter-spacing: .3em; }


@keyframes poem8 { 
  0% { transform: translateY(0);  }
  98% { transform: translateY(20vw); }
  100% { transform: translateY(0); }
}


.poem9 { position: absolute; left: 80%; top: 50%; font-size: 1.8vw;  writing-mode: vertical-rl; white-space: nowrap;
    background-position: 50% 0;
    background-color: transparent;
    background-image: linear-gradient(to left,  #740DFF 30%, #333 50%, #740DFF 70% );
    background-size: 600% 100%;
    background-position: 50% 150%;
    background-repeat: repeat-x;
    color: transparent;
  -webkit-background-clip: text;
    background-clip: text;
  animation: poem9 3s infinite; 
}
@keyframes poem9 { 
  0% { background-position: 100% 0%; opacity: 1;  transform: scale(1); }
  50% { background-position: 50% 0%; opacity .3; transform: scale(.98); }
  100% { background-position: 0% 0%; opacity 1; transform: scale(1); }
}

.poem10 { position: absolute; left: 70%; top: 70%; font-size: 1.8vw; transform: rotate(-30deg);  writing-mode: vertical-rl; white-space: nowrap; animation: poem10 3s cubic-bezier(0.85, 0, 0.15, 1) infinite;}


@keyframes poem10 { 
  0% { transform: rotate(-30deg) translate(0, 0);  }
  20% { transform: rotate(-30deg) translate(5vw, 0);  }
  40% { transform: rotate(-30deg) translate(-5vw, 0);  }
  60% { transform: rotate(-30deg) translate(5vw, 0);  }
  80% { transform: rotate(-30deg) translate(-5vw, 0);  }
  100% { transform: rotate(-30deg) translate(0, 0); }
}


.poem11 { position: absolute; left: 30%; top: 80%; writing-mode: vertical-rl; white-space: nowrap; animation: poem11 .1s  infinite;}

@keyframes poem11 {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(1deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.poem12 { position: absolute; left: 60%; bottom: 5%; font-size: 1.8vw; transform: rotate(-10deg);  writing-mode: vertical-rl; white-space: nowrap; animation: poem7 infinite 7s linear; }

.poem13 { position: absolute; right: 8vw; bottom: 5%; margin: auto; transform: rotate(90deg); font-size: 3vw; animation: poem6 2s linear alternate infinite;  }

.poem14 { position: absolute; right: 0; top: -1vw;  margin: auto; font-size: 4vw; width: 70vw; transform: scaleY(.9); white-space: nowrap; }


.obj1 { position: absolute; width: 10%; top: 10%; left: 15%; margin: auto; }
.obj2 { position: absolute; width: 15%; top: 10%; left: 25%;  margin: auto; }
.obj3 { position: absolute; width: 8%; top: 8%; left: 65%;  margin: auto; } 

.obj4 { position: absolute; width: 12%; top: 10%; left: 15%; margin: auto; }
.obj5 { position: absolute; width: 10%; top: 20%; left: -3%;  margin: auto; }
.obj6 { position: absolute; width: 10%; top: 10%; left: 35%;  margin: auto; } 
.obj7 { position: absolute; width: 13%; top: 25%; left: 35%;  margin: auto; }
.obj8 { position: absolute; width: 11%; top: 25%; left: 72%;  margin: auto; animation: poem7 10s infinite;  } 
.obj9 { position: absolute; width: 15%; top: 55%; left: 12%; margin: auto; }
.obj10 { position: absolute; width: 7%; left: 35%; bottom: 10%;  margin: auto; }
.obj11 { position: absolute; width: 5%; bottom: 2%; left: 50%;  margin: auto; } 
.obj12 { position: absolute; width: 10%; top: 70%; left: 55%;  margin: auto; animation: obj12 5s infinite; }


@keyframes obj12 { 
  0% { transform: translateY(0);  }
  90% { transform: translateY(-30vw); }
  100% { transform: translateY(0); }
}

.obj13 { position: absolute; width: 5%; top: 75%; left: 82%;  margin: auto; animation: poem11 .1s  infinite;} 


@media screen and (max-width: 900px) {
  .area-inner { font-size: 5vw; }
  .poem2 { top: 40%; }
  .poem3 { font-size: 1vw; width: 60vw; height: 60vw; top: 35%;  }
  .poem3 text { font-size: 1vw; }
  .poem4 { font-size: 2vw; }
  
  .poem6 { font-size: 4vw; }
  .poem7 { font-size: 4vw; transform-origin: center 45vw; left: 67%;  }
  .poem7 svg { width: 40vw; height: 40vw; }
  .poem7 svg text { font-size: 10vw; }
  
  .poem8 { top: 5%; right: 10%; }
  .poem8 svg {width: 70vw; height: 60vw; }
  .poem8 svg text { font-size: 11vw; }
  
  .poem9 { font-size: 4vw; }
  .poem10 { font-size: 4vw; }
  .poem11 { font-size: 6vw; left: 35%; top: 70%; }
  .poem12 { font-size: 4vw; }
  .poem13 { font-size: 6vw; right: 15vw; }
  .poem14 { font-size: 10vw; }
  
  .obj1 { width: 20%; top: 5%; left: 15%; margin: auto; }
  .obj2 { width: 30%; top: 15%; left: 25%;  margin: auto; }
  .obj3 { width: 20%; top: 8%; left: 65%;  margin: auto; } 
  .obj4 { width: 24%; top: 20%; }
  .obj5 { width: 20%; top: auto; bottom: 50%; }
  .obj6 { width: 15%; top: 5%; }
  .obj7 { width: 26%; top: 20%; left: 40%; }
  .obj8 { width: 22%; left: 70%; }
  .obj9 { width: 30%; left: 6%; top: 60%; }
  .obj10 { width: 14%; left: 10%; bottom: 1%; }
  .obj11 { width: 10%; left: 45%; }
  .obj12 { width: 20%; left: 40%; top: 66%;}
  .obj13 { width: 10%;}
}
@media screen and (max-width: 600px) {
  .poem3 text { font-size: 1.7vw; }
  .poem4 { font-size: 4vw; }
}