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: 320px;
  height: 320px;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  animation: ura 20s linear 2s infinite;
}
.PRB2 {
  width: 320px;
  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: 109px;
  left: 34px;
  height: 117px;
  animation: logo-PB 1.25s ease-out 4s 1 normal both;
  z-index: 1;
}
.P2 {
  position: absolute;
  top: 109px;
  left: 49px;
  height: 117px;
  animation: logo-PB 1.25s ease-out 7s 1 normal both;
}
.R1 {
  position: absolute;
  top: 109px;
  left: 102px;
  height: 117px;
  animation: logo-R 1.25s ease-out 5s 1 normal both;
  z-index: 1;
}
.R2 {
  position: absolute;
  top: 109px;
  left: 117px;
  height: 117px;
  animation: logo-R 1.25s ease-out 8s 1 normal both;
}
.B1 {
  position: absolute;
  top: 109px;
  left: 173px;
  height: 117px;
  animation: logo-PB 1.25s ease-out 6s 1 normal both;
  z-index: 1;
}
.B2 {
  position: absolute;
  top: 109px;
  left: 186px;
  height: 117px;
  animation: logo-PB 1.25s ease-out 9s 1 normal both;
}
.full-box {
  position: absolute;
  box-sizing: border-box;
  top: 227px;
  left: 93px;
  width: 126px;
  overflow: hidden;
  animation: wipe 3s linear 13.5s 1 normal both;
}
@keyframes wipe {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.full {
  width: 126px;
  animation: wipe2 3s linear 13.5s 1 normal both;
}
@keyframes wipe2 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
.r-inst {
  position: absolute;
  top: 262px;
  left: 14px;
  width: 293px;
  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: 259px;
  left: 12px;
  width: 296px;
  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: 148px;
  left: 0;
  right: 0;
  text-align: center;
}
.logo-size {
  height: 117px;
}
.band {
  position: absolute;
  top: 267px;
  left: 0;
  right: 0;
  text-align: center
}
.band-size {
  height: 12px;
}
.inst {
  position: absolute;
  top: 300px;
  left: 0;
  right: 0;
  text-align: center
}
.inst-size {
  height: 37px;
}
.move {
  transform-style: preserve-3d;
  transform: translateZ(193px);
}
.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: 410px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: serif;
  font-size: 1.4rem;
  color: #fff;
  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;
  width: 320px;
  top: 506px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px 20px;
}
.sns {
  position: absolute;
  top: 630px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 40px;
  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: 320px;
}
@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(-150px) 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: translateY(200px); opacity: 0;}
  100% { transform: translateY(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;}
}