body {
  animation: fade-in 1.0s;
  font-family: sans-serif;
  font-size: 1.2rem;
  color: #ccc;
}
a {
  color: inherit;
  text-decoration: none;
}
.star {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.PRB {
  position: absolute;
  width: 480px;
  height: 480px;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  animation: ura 20s linear 2s infinite;
}
.PRB2 {
  width: 480px;
  animation: zoom-in 5s ease-in-out 1s 1 normal both;
}
@keyframes ura {
  0% { z-index: 0;}
  50% { z-index: 1;}
  100% { z-index: 0;}
}
.P1 {
  position: absolute;
  top: 164px;
  left: 51px;
  height: 176px;
  animation: logo-PB 1.25s ease-out 4s 1 normal both;
  z-index: 1;
}
.P2 {
  position: absolute;
  top: 164px;
  left: 73px;
  height: 176px;
  animation: logo-PB 1.25s ease-out 7s 1 normal both;
}
.R1 {
  position: absolute;
  top: 164px;
  left: 153px;
  height: 176px;
  animation: logo-R 1.25s ease-out 5s 1 normal both;
  z-index: 1;
}
.R2 {
  position: absolute;
  top: 164px;
  left: 175px;
  height: 176px;
  animation: logo-R 1.25s ease-out 8s 1 normal both;
}
.B1 {
  position: absolute;
  top: 164px;
  left: 259px;
  height: 176px;
  animation: logo-PB 1.25s ease-out 6s 1 normal both;
  z-index: 1;
}
.B2 {
  position: absolute;
  top: 164px;
  left: 279px;
  height: 176px;
  animation: logo-PB 1.25s ease-out 9s 1 normal both;
}
.full-box {
  position: absolute;
  box-sizing: border-box;
  top: 352px;
  left: 140px;
  width: 188px;
  overflow: hidden;
  animation: wipe 3s linear 13.5s 1 normal both;
}
@keyframes wipe {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.full {
  width: 188px;
  animation: wipe2 3s linear 13.5s 1 normal both;
}
@keyframes wipe2 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
.r-inst {
  position: absolute;
  top: 393px;
  left: 20px;
  width: 440px;
  animation:
    zoom-inst 4s ease-in-out 9s 1 normal both,
    fade-out 5s ease-in-out 16.5s 1 normal both;
}
.b-inst {
  position: absolute;
  top: 388px;
  left: 18px;
  width: 444px;
  animation: fade-in 5s ease-in-out 16.5s 1 normal both;
}
.fo {
  animation: fade-out 0.2s linear 22.1s 1 normal both;
}
.rotafade {
  animation: fade-in 0.2s linear 22s 1 normal both;
}
.logo {
  position: absolute;
  top: 203px;
  left: 0;
  right: 0;
  text-align: center;
}
.logo-size {
  height: 177px;
}
.band {
  position: absolute;
  top: 393px;
  left: 0;
  right: 0;
  text-align: center
}
.band-size {
  height: 18px;
}
.inst {
  position: absolute;
  top: 428px;
  left: 0;
  right: 0;
  text-align: center
}
.inst-size {
  height: 57px;
}
.move {
  transform-style: preserve-3d;
  transform: translateZ(290px);
}
.rotaP {
  transform-style: preserve-3d;
  animation: rotaYP 20s linear 2s infinite;
}
@keyframes rotaYP {
  0% { transform: rotateY(338deg);}
  100% { transform: rotateY(-22deg);}
}
.rotaR {
  transform-style: preserve-3d;
  animation: rotaYR 20s linear 2s infinite;
}
@keyframes rotaYR {
  0% { transform: rotateY(363deg);}
  100% { transform: rotateY(3deg);}
}
.rotaB {
  transform-style: preserve-3d;
  animation: rotaYB 20s linear 2s infinite;
}
@keyframes rotaYB {
  0% { transform: rotateY(382deg);}
  100% { transform: rotateY(22deg);}
}
.rotaPro {
  transform-style: preserve-3d;
  animation: rotaYPro 20s linear 2s infinite;
}
@keyframes rotaYPro {
  0% { transform: rotateY(349deg);}
  100% { transform: rotateY(-11deg);}
}
.rotaRou {
  transform-style: preserve-3d;
  animation: rotaYRou 20s linear 2s infinite;
}
@keyframes rotaYRou {
  0% { transform: rotateY(364deg);}
  100% { transform: rotateY(4deg);}
}
.rotaBan {
  transform-style: preserve-3d;
  animation: rotaYBan 20s linear 2s infinite;
}
@keyframes rotaYBan {
  0% { transform: rotateY(374deg);}
  100% { transform: rotateY(14deg);}
}
.rotaGt {
  transform-style: preserve-3d;
  animation: rotaYGt 20s linear 2s infinite;
}
@keyframes rotaYGt {
  0% { transform: rotateY(323deg);}
  100% { transform: rotateY(-37deg);}
}
.rotaKy {
  transform-style: preserve-3d;
  animation: rotaYKy 20s linear 2s infinite;
}
@keyframes rotaYKy {
  0% { transform: rotateY(342deg);}
  100% { transform: rotateY(-18deg);}
}
.rotaDr {
  transform-style: preserve-3d;
  animation: rotaYDr 20s linear 2s infinite;
}
@keyframes rotaYDr {
  0% { transform: rotateY(360deg);}
  100% { transform: rotateY(0deg);}
}
.rotaTp {
  transform-style: preserve-3d;
  animation: rotaYTp 20s linear 2s infinite;
}
@keyframes rotaYTp {
  0% { transform: rotateY(376deg);}
  100% { transform: rotateY(16deg);}
}
.rotaBa {
  transform-style: preserve-3d;
  animation: rotaYBa 20s linear 2s infinite;
}
@keyframes rotaYBa {
  0% { transform: rotateY(396deg);}
  100% { transform: rotateY(36deg);}
}
.title {
  position: absolute;
  top: 20px;
  left: 80px;
  font-family: serif;
  font-size: 1.4rem;
  color: #ffffff;
  z-index: 2;
  animation: fade-in 3s linear 1s 1 normal both;
}
.news {
  color: #FFB429;
  font-weight: bold;
  animation: blinking 1s ease-in-out infinite alternate;
}
.ne {
  animation: slide-in 1s ease 2.0s 1 normal both;
}
.sc {
  animation: slide-in 1s ease 2.2s 1 normal both;
}
.bi {
  animation: slide-in 1s ease 2.4s 1 normal both;
}
.me {
  animation: slide-in 1s ease 2.6s 1 normal both;
}
.ar {
  animation: slide-in 1s ease 2.8s 1 normal both;
}
.so {
  animation: slide-in 1s ease 3.0s 1 normal both;
}
.co {
  animation: slide-in 1s ease 3.2s 1 normal both;
}
.topmenu {
  position: absolute;
  top: 60px;
  right: 80px;
  font-family: serif;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 20px 0;
  z-index: 2;
}
.sns {
  position: absolute;
  top: 410px;
  right: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 20px;
  z-index: 2;
  animation: slide-in 1s ease 3.4s 1 normal both;
}
.com {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  animation:
    fade-in 1s linear 22s 1 normal both,
    com 20s linear 22s infinite;
}
.com-size {
  width: 480px;
}
@keyframes com {
  0% { opacity: 0;}
  22% { opacity: 0;}
  27% { opacity: 1;}
  72% { opacity: 1;}
  77% { opacity: 0;}
  100% { opacity: 0;}
}
@keyframes zoom-in {
  0% { transform: translateY(-200px) scale(0.001);}
  100% { transform: translateY(0) scale(1);}
}
@keyframes fade-in {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fade-out {
  0% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes blinking {
  0%   { color: #ffffff; }
  100% { color: #FFB429; }
}
@keyframes slide-in {
  0% { transform: translateX(200px); opacity: 0;}
  100% { transform: translateX(0); opacity: 1;}
}
@keyframes logo-PB {
  0% { transform: translateY(100%); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}
@keyframes logo-R {
  0% { transform: translateY(-100%); opacity: 0;}
  100% { transform: translateY(0); opacity: 1;}
}
@keyframes zoom-inst {
  0% { transform: translateY(-50px) scale(0.01); opacity: 0;}
  100% { transform: translateY(0) scale(1); opacity: 1;}
}