/* BODY
------------------------------------------------------------ */

@font-face {
  font-family: "04B";
  src: url("../font/04B_11_.TTF");
  font-display: block;
}

@font-face {
  font-family: "VOLT-KT";
  src: url("../font/VOLT-KT.TTF");
  font-display: block;
}

html {
  background: #000;
}

body {
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: 50% 50% / 1% repeat url(../image/design/07/minimaru_f84.gif) #000;
  font-family: '04B';
}

/* INDEX SCROLL 
------------------------------------------------------------ */

::-webkit-scrollbar {
  width: .6vw;
  background: #000;
}

::-webkit-scrollbar-track {
  background: #000;
}

::-webkit-scrollbar-thumb {
  background-image: url(../image/rainbow.gif);
}

/* SELECTION 
------------------------------------------------------------ */

::-moz-selection {
  background: #fff;
  color: #000;
}

::-webkit-selection {
  background: #fff;
  color: #000;
}

::selection {
  background: #fff;
  color: #000;
}

/* RAINBOW-TEXT
------------------------------------------------------------ */

.rainbow-text {
  background: 50% 50% / 100% repeat url(../image/rainbow.gif);
  color: transparent;
  font-weight: bold;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
} 

/* NAIGATION BUTTON
------------------------------------------------------------ */

#navigation {
  position: fixed;
  top: 1%;
  left: 1%;
  z-index: 99;
  width: 6vw;
  height: 5.5vw; 
  border: solid .5vw #fff;
  border-radius: 1vw;
  background: #000;
}

.openbtn3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
      -ms-transform : translate(-50%,-50%);
          transform : translate(-50%,-50%);
  width: 80%;
  height: 80%;
  cursor: pointer;
}

.openbtn3 span {
  display: inline-block;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 100%;
  height: 20%;
  background: #fff;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

.openbtn3 span:nth-of-type(1) {
  top: 8%; 
}

.openbtn3 span:nth-of-type(2) {
  top: 48%;
}

.openbtn3 span:nth-of-type(3) {
  bottom: -8%;
}

.openbtn3.active span:nth-of-type(1) ,
.openbtn3.active span:nth-of-type(3) {
  top: 48%;
}

/* GLOBAL NAVIGATION
------------------------------------------------------------ */

#global {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.no-scroll {
  width: 99.4vw;
  overflow: hidden;
}

@-moz-document url-prefix() {
 .no-scroll{
   width: 100vw;
   overflow: hidden;
 }
}

#global #changer {
  position: absolute;
  bottom: 0;
  left: 2%;
  width: 4vw;
  height: auto;
  margin: 0 0 2%;
}

#global #changer a {
  display: block; 
  position: relative;
  width: 4vw;
  height: 4vw;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-filter: drop-shadow( 0 0 .05vw #fff );
          filter: drop-shadow( 0 0 .05vw #fff );
}

#global #changer a.l_works {
  background: 50% 50% / 90% no-repeat url(../image/design/07/ufoandalien_bw.gif);
}

#global #changer a.anticlub {
  background: 50% 50% / 75% no-repeat url(../image/design/07/article_icon.png);
}

#global #changer a.l_tv {
  background: 50% 50% / 78% no-repeat url(../image/design/07/six_icon.png);
}

#global #changer a.l_nori {
  background: 50% 50% / 78% no-repeat url(../image/design/07/beta_icon.png);
}

#global #changer a.l_pepper {
  background: 50% 50% / 80% no-repeat url(../image/design/07/kafun_icon.png);
}

#global #changer a:hover {
  background-size: 100%;
  -webkit-filter: drop-shadow( 0 0 .1vw #fff );
          filter: drop-shadow( 0 0 .1vw #fff );
}

/* GLOBAL > BROWSER
------------------------------------------------------------ */

#browser {
  position: absolute;
  top: 50%;
  left: 51%;
  -webkit-transform: translateY(-50%) translateX(-50%); 
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 80%;
  height: 85%;
  border: 0;
  background: transparent;
}

/* MODAL
------------------------------------------------------------ */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%; 
  height: 100vh;
  background: rgba(0,0,0,0.9);
}

.full {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  width: 80%;
  height: 90vh;
  margin: 0;
  padding: 0;
}

.full img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

#youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 60vw;
  height: 35vw;
}

.close {
  opacity: 1;
  position: absolute;
  top: -1%;
  right: 1vw;
  width: 6vw;
  height: 6vw;
  cursor: pointer;
}

.close:hover {
  opacity: 0.8;
}

.close span {
  display: inline-block;
  position: absolute;
  height: 100%;
  border-radius: 2px;
  background: #fff;
  -webkit-transition: all .4s;
       -o-transition: all .4s;
          transition: all .4s;
}

.close span:nth-of-type(1) {
  top: 0;
  right: 2.4vw;
  -webkit-transform: translateY(-1px) rotate(-45deg);
      -ms-transform: translateY(-1px) rotate(-45deg);
          transform: translateY(-1px) rotate(-45deg);
  width: 20%;
}

.close span:nth-of-type(2) {
  top: 7%;
  left: 2.4vw;
  -webkit-transform: translateY(-6px) rotate(46deg);
      -ms-transform: translateY(-6px) rotate(46deg);
          transform: translateY(-6px) rotate(46deg);
  width: 20%;
}

/* DISABLED (NAVIGATION BUTTON / ALLSTAR )
------------------------------------------------------------ */

.disabled {
  pointer-events: none;
}

/* INDEX WRAP
------------------------------------------------------------ */

#wrap {
  display: block;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 4% 0 2%;
  background: 50% 50% / 50% 30% repeat url(../image/rainbow.gif) #000;
}

/* MAIN-FRAME
------------------------------------------------------------ */

#main-frame {
  display: block;
  position: relative;
  z-index: 2;
  width: 88%;
  height: auto;
  margin: 0 auto;
  border-radius: 10%;
  -webkit-box-shadow: 0px -2px 32px 4px rgba(0,0,0,0.85);
          box-shadow: 0px -2px 32px 4px rgba(0,0,0,0.85);
}

/* MAIN-FRAME > BG
------------------------------------------------------------ */

#bg {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 10%;
  background: 50% 50% / 120% repeat url(../image/design/07/mirage.gif) #000;
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}

/* MAIN-FRAME > HEADER
------------------------------------------------------------ */

header {
  display: block;
  position: relative;
  z-index: 7;
  width: 105%;
  height: auto;
  margin: 0;
  padding: 1% 0 0;
  text-align: right;
  -webkit-filter: drop-shadow( .4vw .4vw .01vw #fff);
          filter: drop-shadow( .4vw .4vw .01vw #fff);
}

header div#site-title {
  display: block;
  position: relative;
  z-index: 9;
  -webkit-transform: rotate(-4deg);
      -ms-transform: rotate(-4deg);
          transform: rotate(-4deg); 
  width: 72%;
  margin: 0 25% 0;
  padding: .5% -.5% -.5% 5%;
}

header div#site-title h1 {
  margin: 0;
  padding: 0;
  font-size: 10.5vw;
  font-family: "VOLT-KT";
  -webkit-filter: drop-shadow( .5vw .5vw .01vw #000);
          filter: drop-shadow( .5vw .5vw .01vw #000);
}

header h2 {
  position: relative;
  margin: 0;
  color: rgba(199,121,255,0.6);
  -webkit-text-stroke: .05vw #000;
          text-stroke: .05vw #000;
  font-size: 3vw;
  -webkit-animation: only-color 5s linear infinite;
          animation: only-color 5s linear infinite;
}

header h3 {
  position: relative;
  z-index: 9;
  -webkit-transform: rotate(-4deg);
      -ms-transform: rotate(-4deg);
          transform: rotate(-4deg); 
  width: 80%;
  margin: 0 0 -1% 18%; 
  color: rgba(199,121,255,0.6);
  -webkit-text-stroke: .05vw #000;
          text-stroke: .05vw #000;
  font-size: 4vw;
  -webkit-animation: only-color 5s linear infinite;
          animation: only-color 5s linear infinite;
}

@-webkit-keyframes only-color {
  0% { -webkit-filter: hue-rotate(0deg) contrast(120%); filter: hue-rotate(0deg) contrast(120%); }
  50% { -webkit-filter: hue-rotate(180deg) contrast(120%); filter: hue-rotate(180deg) contrast(120%); }
  100% { -webkit-filter: hue-rotate(360deg) contrast(120%); filter: hue-rotate(360deg) contrast(120%); }
}

@keyframes only-color {
  0% { -webkit-filter: hue-rotate(0deg) contrast(120%); filter: hue-rotate(0deg) contrast(120%); }
  50% { -webkit-filter: hue-rotate(180deg) contrast(120%); filter: hue-rotate(180deg) contrast(120%); }
  100% { -webkit-filter: hue-rotate(360deg) contrast(120%); filter: hue-rotate(360deg) contrast(120%); }
}

header div#ufo {
  opacity: 0.9;
  position: absolute;
  top: -2%;
  left: -1%;
  z-index: 8;
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg); 
  width: 30vw;
  height: 25vw;
  background: 50% 50% / 100% no-repeat url(../image/design/07/ufoandalien_new.gif);
  -webkit-animation: ufo-color 10s linear infinite;
          animation: ufo-color 10s linear infinite;
}

@-webkit-keyframes ufo-color {
  from { -webkit-filter: hue-rotate(0deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); filter: hue-rotate(0deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); }
  to { -webkit-filter: hue-rotate(360deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); filter: hue-rotate(360deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); }
}

@keyframes ufo-color {
  from { -webkit-filter: hue-rotate(0deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); filter: hue-rotate(0deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); }
  to { -webkit-filter: hue-rotate(360deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); filter: hue-rotate(360deg) brightness(120%) contrast(120%) drop-shadow(01vw 01vw .01vw #000); }
}

/* MAIN-FRAME > CENTER SCREEN
------------------------------------------------------------ */

#movie-screen {
  position: relative;
  z-index: 6;
  -webkit-transform: rotate(-8deg);
      -ms-transform: rotate(-8deg);
          transform: rotate(-8deg);
  width: 66%;
  height: 32vw;
  margin: 3% auto 0;
  padding: 1%;
  border-radius: 5%;
  -webkit-box-shadow: 0px 0px 3vw #000;
          box-shadow: 0px 0px 3vw #000;
  background: 50% 50% / 400% 40% repeat url(../image/rainbow.gif);
}

#movie-screen div#main {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  width: 94%;
  height: 90%;
  border-radius: 5%;
  background: 50% 50% / 100% repeat-y url(../image/theme.gif);
}

/* MAIN-FRAME > GIMMICK
------------------------------------------------------------ */

#gimmick {
  display: block;
  position: relative;
  z-index: 10;
  width: 80%;
  height: 45vw;
  margin: 2% auto 0;
  text-align: center;
}

#gimmick div#hole {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform : translateX(-50%);
  -ms-transform : translateX(-50%);
      transform : translateX(-50%);
  width: 20vw;
  height: 100%;
  background: 50% 20% / 130% no-repeat url(../image/design/02/falldown.gif);
  -webkit-animation: fall-color 10s linear infinite;
          animation: fall-color 10s linear infinite;
}

@-webkit-keyframes fall-color {
  from { -webkit-filter: hue-rotate(0deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); filter: hue-rotate(0deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); }
  to { -webkit-filter: hue-rotate(360deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); filter: hue-rotate(360deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); }
}

@keyframes fall-color {
  from { -webkit-filter: hue-rotate(0deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); filter: hue-rotate(0deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); }
  to { -webkit-filter: hue-rotate(360deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); filter: hue-rotate(360deg) contrast(140%) drop-shadow(.5vw .5vw .01vw #000); }
}

#gimmick div#in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
  position: relative;
  width: 100%;
  height: 20vw;
  margin: 0 auto;
  padding: 17% 0 0;
}

#gimmick div#in p {
  opacity: 0.9;
  width: 30%;
  height: 100%;
  background: 50% 50% / 75% no-repeat url(../image/design/07/ufoandalien_new.gif);
  -webkit-animation: shake .1s  infinite;
          animation: shake .1s  infinite;
}

#gimmick div#in p:hover {
  background: 50% 50% / 100% no-repeat url(../image/design/07/ufoandalien_new.gif);
}

#gimmick div#in p:first-child {
  margin: 0 0 0 6%;
  -webkit-filter: hue-rotate(50deg) contrast(200%) drop-shadow( .5vw .5vw .01vw #fff);
          filter: hue-rotate(50deg) contrast(200%) drop-shadow( .5vw .5vw .01vw #fff);
}

#gimmick div#in p:last-child {
  margin: 0 6% 0 0;
  -webkit-filter: hue-rotate(-190deg) contrast(200%) drop-shadow( .5vw .5vw .01vw #fff);
          filter: hue-rotate(-190deg) contrast(200%) drop-shadow( .5vw .5vw .01vw #fff);
}

@-webkit-keyframes shake {
    0% {-webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg);}
    25% {-webkit-transform: translate(2px, 2px) rotateZ(1deg); transform: translate(2px, 2px) rotateZ(1deg);}
    50% {-webkit-transform: translate(0px, 2px) rotateZ(0deg); transform: translate(0px, 2px) rotateZ(0deg);}
    75% {-webkit-transform: translate(2px, 0px) rotateZ(-1deg); transform: translate(2px, 0px) rotateZ(-1deg);}
    100% {-webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg);}
}

@keyframes shake {
    0% {-webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg);}
    25% {-webkit-transform: translate(2px, 2px) rotateZ(1deg); transform: translate(2px, 2px) rotateZ(1deg);}
    50% {-webkit-transform: translate(0px, 2px) rotateZ(0deg); transform: translate(0px, 2px) rotateZ(0deg);}
    75% {-webkit-transform: translate(2px, 0px) rotateZ(-1deg); transform: translate(2px, 0px) rotateZ(-1deg);}
    100% {-webkit-transform: translate(0px, 0px) rotateZ(0deg); transform: translate(0px, 0px) rotateZ(0deg);}
}

#gimmick div#hit {
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  width: 13vw;
  height: 13vw;
  margin: 0;
  border: solid .13vw #fff;
  border-radius: 10%;
  background:  rgba(199,121,255,0.2);
  word-break: break-all;
  cursor: pointer;
  -webkit-animation: hit-color 5s linear infinite;
          animation: hit-color 5s linear infinite;
}

@-webkit-keyframes hit-color {
  0% { -webkit-transform : translate(-50%,-50%) rotate(0deg) scale(0.8); transform : translate(-50%,-50%) rotate(0deg) scale(0.8); -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
  50% { -webkit-transform : translate(-50%,-50%) rotate(180deg) scale(1.2); transform : translate(-50%,-50%) rotate(180deg) scale(1.2); -webkit-filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
  100% { -webkit-transform : translate(-50%,-50%) rotate(360deg) scale(0.8); transform : translate(-50%,-50%) rotate(360deg) scale(0.8); -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
}

@keyframes hit-color {
  0% { -webkit-transform : translate(-50%,-50%) rotate(0deg) scale(0.8); transform : translate(-50%,-50%) rotate(0deg) scale(0.8); -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
  50% { -webkit-transform : translate(-50%,-50%) rotate(180deg) scale(1.2); transform : translate(-50%,-50%) rotate(180deg) scale(1.2); -webkit-filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
  100% { -webkit-transform : translate(-50%,-50%) rotate(360deg) scale(0.8); transform : translate(-50%,-50%) rotate(360deg) scale(0.8); -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
}

#gimmick div#hit > span {
  position: absolute;
  top: 48%;
  left: 48%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  width: 100%;
  color: rgba(199,121,255,0.4);
  font-size: 6vw;
  line-height: 5vw;
  font-family: 'VOLT-KT';
  -webkit-text-stroke: .2vw #fff;
          text-stroke: .2vw #fff;
}

/* MAIN-FRAME > ATACKER
------------------------------------------------------------ */

.atacker {
  opacity: 1;
  width: 70%;
  height: 5vw;
  background: 50% 0% / 20% 100% repeat-x url(../image/design/01/triangle.png);
  -webkit-animation: seesaw 3s ease-in-out infinite 0s;
          animation: seesaw 3s ease-in-out infinite 0s;
}

#a-top {
  position: absolute;
  top: 57%;
  left: 20%;
  z-index: 6;
}

#a-down {
  position: absolute;
  bottom: 5%;
  left: 15%;
  z-index: 9;
}

@-webkit-keyframes seesaw {
  0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); }
  50% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); -webkit-filter: hue-rotate(200deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(200deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); }
  to { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); }
}

@keyframes seesaw {
  0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); }
  50% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); -webkit-filter: hue-rotate(200deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(200deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); }
  to { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(0deg) invert(100%) drop-shadow( .5vw .5vw .01vw #000); }
}

/* MAIN-FRAME > UPDATE
------------------------------------------------------------ */

#update {
  position: absolute;
  top: 53%;
  right: -8%;
  -webkit-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
          transform: rotate(-2deg);
  z-index: 12;
  width: 40vw;
  height: auto;
  padding: 0;
  -webkit-filter: drop-shadow( .5vw .5vw .01vw #000);
          filter: drop-shadow( .5vw .5vw .01vw #000);
}

#update > span {
  width: 100%;
  margin: 0;
  color: rgba(199,121,255,0.6);
  font-size: 4.8vw;
  line-height: 3.3vw;
  -webkit-text-stroke: .1vw #fff;
          text-stroke: .1vw #fff;
  -webkit-animation: only-color 5s linear infinite;
          animation: only-color 5s linear infinite;
}

#update > div.update-box {
  overflow: hidden;
  width: 90%;
  height: auto;
  margin: 2% 0 0;
  padding: 1%;
}

#update > div.update-box > p {
  display: block;
  width: 100%;
  margin: 0;
  color: rgba(199,121,255,0.6);
  font-size: 2.5vw;
  -webkit-text-stroke: .1vw #fff;
          text-stroke: .1vw #fff;
  -webkit-animation: only-color 5s linear infinite;
          animation: only-color 5s linear infinite;
}

#update > div.update-box > p:last-child {
  font-size: 2vw;
}

/* MAIN-FRAME > SOUND
------------------------------------------------------------ */

#sound {
  position: absolute;
  top: 58%;
  left: 14%;
  -webkit-transform: rotate(-6deg);
      -ms-transform: rotate(-6deg);
          transform: rotate(-6deg);
  z-index: 12;
  width: 22vw;
  height: auto;
  padding: 0;
  -webkit-filter: drop-shadow( .5vw .5vw .01vw #000);
          filter: drop-shadow( .5vw .5vw .01vw #000);
}

#sound > span {
  display: block;
  width: 100%;
  margin: 0;
  color: rgba(199,121,255,0.6);
  font-size: 6vw;
  -webkit-text-stroke: .1vw #fff;
          text-stroke: .1vw #fff;
  -webkit-animation: only-color 5s linear infinite;
          animation: only-color 5s linear infinite;
}

#sound > p {
  display: inline-block;
  width: 4vw;
  height: 4vw;
  margin: 0 2% 1%;
  padding: 1%;
  -webkit-box-shadow: 0px 0px 1vw #fff;
          box-shadow: 0px 0px 1vw #fff;
  background: 80% 50% / 90% 80% no-repeat url(../image/design/07/play.png);
  cursor: pointer;
  -webkit-filter: saturate(150%) drop-shadow(.5vw .5vw .01vw #fff);
          filter: saturate(150%) drop-shadow(.5vw .5vw .01vw #fff);
}

#sound > p:nth-child(3) {
  -webkit-filter: saturate(150%) hue-rotate(50deg) drop-shadow( .5vw .5vw .01vw #fff);
          filter: saturate(150%) hue-rotate(50deg) drop-shadow( .5vw .5vw .01vw #fff);
}

#sound > p:nth-child(4) {
  -webkit-filter: saturate(150%) hue-rotate(-250deg) drop-shadow( .5vw .5vw .01vw #fff);
          filter: saturate(150%) hue-rotate(-250deg) drop-shadow( .5vw .5vw .01vw #fff);
}

#sound > p:nth-child(5) {
  background: 50% 50% / 70% no-repeat url(../image/design/07/stop.png);
  -webkit-filter: saturate(150%) hue-rotate(-150deg) drop-shadow( .5vw .5vw .01vw #fff);
          filter: saturate(150%) hue-rotate(-150deg) drop-shadow( .5vw .5vw .01vw #fff);
}

#sound > p:hover {
  -webkit-box-shadow: 0px 0px 10px #000;
          box-shadow: 0px 0px 10px #000;
  background: 90% 60% / 80% 70% no-repeat url(../image/design/07/play.png);
}

#sound > p:nth-child(5):hover {
  background: 60% 60% / 65% 70% no-repeat url(../image/design/07/stop.png);
  -webkit-filter: saturate(150%) hue-rotate(-150deg) drop-shadow( .5vw .5vw .01vw #fff);
          filter: saturate(150%) hue-rotate(-150deg) drop-shadow( .5vw .5vw .01vw #fff);
}

/* MAIN-FRAME > DECORATION
------------------------------------------------------------ */

div.decor {
  position: absolute;
  z-index: 5;
}

div.decor.alien {
  background: 50% 50% / 100% no-repeat url(../image/design/07/ufoandalien_new.gif);
}

#alien-1 {
  top: 15%;
  left: -7%;
  -webkit-transform: rotate(-16deg);
      -ms-transform: rotate(-16deg);
          transform: rotate(-16deg); 
  width: 13vw;
  height: 23vw;
  -webkit-animation: fall-color 20s linear infinite;
          animation: fall-color 20s linear infinite;
}

#alien-2 {
  top: 30%;
  left: -2%;
  -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg); 
  width: 9vw;
  height: 17vw;
  -webkit-animation: fall-color 30s linear infinite;
          animation: fall-color 30s linear infinite;
}

div.decor.moon {
  background: 50% 50% / 100% no-repeat url(../image/moon.webp);
  -webkit-animation: moon-rainbow 60s linear infinite 0s ;
          animation: moon-rainbow 60s linear infinite 0s ;
}

#m-1 {
  top: 44%;
  left: -9%;
  width: 34vw;
  height: 34vw;
}

@-webkit-keyframes moon-rainbow {
  0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); }
  50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-filter: saturate(200%) hue-rotate(-100deg) drop-shadow( 0 0 1vw #000 ); filter: saturate(200%) hue-rotate(-100deg) drop-shadow( 0 0 1vw #000 ); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); }
}

@keyframes moon-rainbow {
  0% { -webkit-transform: rotate(8deg); transform: rotate(8deg); -webkit-filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); }
  50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-filter: saturate(200%) hue-rotate(-100deg) drop-shadow( 0 0 1vw #000 ); filter: saturate(200%) hue-rotate(-100deg) drop-shadow( 0 0 1vw #000 ); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); filter: saturate(200%) hue-rotate(50deg) drop-shadow( 0 0 1vw #000 ); }
}

div.decor.star {
  background: 50% 50% / cover no-repeat url(../image/design/07/star.png);
}

#s-1 {
  top: 30%;
  left: -7%;
  -webkit-transform: rotate(-29deg);
      -ms-transform: rotate(-29deg);
          transform: rotate(-29deg);
  width: 20vw;
  height: 20vw;
  -webkit-filter: drop-shadow( 1.5vw 1vw .01vw #fff) hue-rotate(-60deg) invert(100%) brightness(200%);
          filter: drop-shadow( 1.5vw 1vw .01vw #fff) hue-rotate(-60deg) invert(100%) brightness(200%);
} 

#s-2 {
  top: 4%;
  left: -7%;
  -webkit-transform: rotate(4deg);
      -ms-transform: rotate(4deg);
          transform: rotate(4deg);
  width: 10vw;
  height: 10vw;
  background: 50% 50% / cover no-repeat url(../image/design/07/star.png);
  -webkit-filter: drop-shadow( 1.5vw 1vw .01vw #fff) contrast(120%) invert(100%) brightness(200%);
          filter: drop-shadow( 1.5vw 1vw .01vw #fff) contrast(120%) invert(100%) brightness(200%);
}

#s-3 {
  top: 50%;
  right: -5%;
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
  width: 17vw;
  height: 17vw;
  -webkit-filter: drop-shadow( 1.5vw 1vw .01vw #fff )  hue-rotate(120deg) invert(100%) brightness(200%);
          filter: drop-shadow( 1.5vw 1vw .01vw #fff )  hue-rotate(120deg) invert(100%) brightness(200%);
}

#s-4 {
  top: 76%;
  right: -5%;
  -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
          transform: rotate(-50deg);
  width: 13vw;
  height: 13vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(30deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(30deg) invert(100%) brightness(200%);
}

#s-5 {
  top: 70%;
  left: -4%;
  -webkit-transform: rotate(80deg);
      -ms-transform: rotate(80deg);
          transform: rotate(80deg);
  width: 14vw;
  height: 13vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(30deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(30deg) invert(100%) brightness(200%);
}

#s-6 {
  top: 69%;
  right: 31%;
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
  width: 8vw;
  height: 8vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(-50deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(-50deg) invert(100%) brightness(200%);
}

#s-7 {
  top: 40%;
  right: 2%;
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
  width: 9vw;
  height: 9vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(250deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(250deg) invert(100%) brightness(200%);
}

#s-8 {
  top: 14%;
  right: -7%;
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
  width: 10vw;
  height: 10vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(140deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(140deg) invert(100%) brightness(200%);
}

#s-9 {
  top: 87%;
  right: 3%;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
  width: 9vw;
  height: 9vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(190deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(190deg) invert(100%) brightness(200%);
}

#s-10 {
  top: 87%;
  right: 20%;
  -webkit-transform: rotate(-80deg);
      -ms-transform: rotate(-80deg);
          transform: rotate(-80deg);
  width: 8vw;
  height: 8vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(90deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(90deg) invert(100%) brightness(200%);
}

#s-11 {
  top: 84%;
  left: -1%;
  -webkit-transform: rotate(100deg);
      -ms-transform: rotate(100deg);
          transform: rotate(100deg);
  width: 8vw;
  height: 8vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(250deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(250deg) invert(100%) brightness(200%);
}

#s-12 {
  top: 87%;
  left: 14%;
  -webkit-transform: rotate(-80deg);
      -ms-transform: rotate(-80deg);
          transform: rotate(-80deg);
  width: 10vw;
  height: 10vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(60deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(60deg) invert(100%) brightness(200%);
}

#s-13 {
  top: 70%;
  left: 32%;
  -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
  width: 6vw;
  height: 6vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(0deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(0deg) invert(100%) brightness(200%);
}

#s-14 {
  top: 46%;
  left: -6%;
  -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
  width: 8vw;
  height: 8vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(170deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(170deg) invert(100%) brightness(200%);
}

#s-15 {
  top: 0%;
  left: 25%;
  -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
  width: 7vw;
  height: 7vw;
  -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(220deg) invert(100%) brightness(200%);
          filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(220deg) invert(100%) brightness(200%);
}

div.decor.astro {
  z-index: 11;
  background: 50% 50% / 100% no-repeat url(../image/design/01/astronaut.webp);
  -webkit-animation: astronaut 4s linear infinite 0s;
          animation: astronaut 4s linear infinite 0s;
  -webkit-filter: saturate(200%);
          filter: saturate(200%);
}

div.decor.astro:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

#a-1 {
  bottom: 9%;
  right: -2%;
  width: 15vw;
  height: 25vw;
}

#a-2 {
  top: 38%;
  left: 0%;
  width: 15vw;
  height: 25vw;
}

@-webkit-keyframes astronaut {
  0% { -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; filter: hue-rotate(0deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px);  }
  50% { -webkit-filter: hue-rotate(180deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; filter: hue-rotate(180deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px);  }
  100% { -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; filter: hue-rotate(360deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px);  }
}

@keyframes astronaut {
  0% { -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; filter: hue-rotate(0deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px);  }
  50% { -webkit-filter: hue-rotate(180deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; filter: hue-rotate(180deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; -webkit-transform: translate(0px, 100px); transform: translate(0px, 100px);  }
  100% { -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; filter: hue-rotate(360deg) contrast(120%) drop-shadow( .5vw .5vw .01vw #000) ; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px);  }
}

div.decor.kira {
  width: 10vw;
  height: 10vw;
  background: 50% 50% / 90% no-repeat url(../image/material/heartbeat.gif);
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

#k-1 {
  top: 17%;
  right: 7%;
}

#k-2 {
  top: 23%;
  left: 6%;
}

#k-3{
  top: 68%;
  right: 5%;
}

#k-4 {
  top: 81%;
  left: 30%;
}

#k-5 {
  top: 81%;
  right: 30%;
}

div.decor.falldown {
  background: 50% 50% / 100% no-repeat url(../image/design/02/falldown.gif);
  -webkit-animation: fall-color 7s linear infinite;
          animation: fall-color 7s linear infinite;
}

@keyframes fall-color {
  0% { -webkit-filter: hue-rotate(0deg) contrast(150%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(0deg) contrast(150%) drop-shadow( .5vw .5vw .01vw #000); }
  100% { -webkit-filter: hue-rotate(360deg) contrast(150%) drop-shadow( .5vw .5vw .01vw #000); filter: hue-rotate(360deg) contrast(150%) drop-shadow( .5vw .5vw .01vw #000); }
}

#f-1 {
  top: 25%;
  right: -9%;
  -webkit-transform: rotate(4deg);
      -ms-transform: rotate(4deg);
          transform: rotate(4deg); 
  width: 28vw;
  height: 40vw;
}

#f-2 {
  top: 75%;
  left: 3%;
  -webkit-transform: rotate(8deg);
      -ms-transform: rotate(8deg);
          transform: rotate(8deg); 
  width: 15vw;
  height: 25vw;
}

#f-3 {
  top: 75%;
  right: 5%;
  -webkit-transform: rotate(8deg);
      -ms-transform: rotate(8deg);
          transform: rotate(8deg); 
  width: 15vw;
  height: 25vw;
}

#f-4 {
  display: none;
}

/* MAIN-FRAME > DECORATION ACRYLIC
------------------------------------------------------------ */

.acrylic {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: auto;
  -webkit-box-shadow: 0px 0px 10px #fff;
          box-shadow: 0px 0px 10px #fff;
  background: rgba(255,255,255,0.05);
  -webkit-filter: drop-shadow( .5vw .5vw .01vw #fff);
          filter: drop-shadow( .5vw .5vw .01vw #fff);
}

#l-1 {
 top: 1%;
 left: 30%;
 width: 13vw;
 height: 3vw;
}

#l-2 {
 top: 1%;
 left: 55%;
 width: 10vw;
 height: 10vw;
}

#l-3 {
 top: 2%;
 left: 10%;
 width: 18vw;
 height: 5vw;
}

#l-4 {
 top: 2%;
 left: 47%;
 width: 10vw;
 height: 6vw;
}

#l-5 {
 top: 4%;
 left: 38%;
 width: 10vw;
 height: 10vw;
}

#l-6 {
 top: 10%;
 left: 35%;
 width: 5vw;
 height: 5vw;
}

#l-7 {
 top: 10%;
 left: 45%;
 width: 10vw;
 height: 6vw;
}

#l-8 {
 top: 15%;
 left: 7%;
 width: 6vw;
 height: 30vw;
}

#l-9 {
 top: 20%;
 left: 7%;
 width: 10vw;
 height: 10vw;
}

#l-10 {
 top: 20%;
 left: 12%;
 width: 2vw;
 height: 34vw;
}

#l-11 {
 top: 23%;
 left: 4%;
 width: 5vw;
 height: 10vw;
}

#l-12 {
 top: 47%;
 left: 10%;
 width: 8vw;
 height: 8vw;
}

#l-13 {
 top: 50%;
 left: 13%;
 width: 9vw;
 height: 15vw;
}

#l-14 {
 top: 62%;
 left: 4%;
 width: 4vw;
 height: 32vw;
}

#l-15 {
 top: 68%;
 left: 1%;
 width: 10vw;
 height: 10vw;
}

#l-16 {
 top: 80%;
 left: 15%;
 width: 10vw;
 height: 8vw;
}

#l-17 {
 top: 72%;
 left: 12%;
 width: 10vw;
 height: 13vw;
}

#l-18 {
 top: 85%;
 left: 2%;
 width: 12vw;
 height: 10vw;
}

#l-19 {
 top: 90%;
 left: 20%;
 width: 10vw;
 height: 8vw;
}

#r-1 {
 top: 3%;
 right: 20%;
 width: 10vw;
 height: 6vw;
}

#r-2 {
 top: 10%;
 right: 5%;
 width: 10vw;
 height: 10vw;
}

#r-3 {
 top: 12%;
 right: 14%;
 width: 10vw;
 height: 6vw;
}

#r-4 {
 top: 16%;
 right: 4%;
 width: 7vw;
 height: 15vw;
}

#r-5 {
 top: 30%;
 right: 12%;
 width: 6vw;
 height: 6vw;
}

#r-6 {
 top: 35%;
 right: 8%;
 width: 6vw;
 height: 20vw;
}

#r-7 {
 top: 42%;
 right: 1%;
 width: 10vw;
 height: 10vw;
}

#r-8 {
 top: 50%;
 right: 4%;
 width: 2vw;
 height: 50vw;
}

#r-9 {
 top: 53%;
 right: 13%;
 width: 7vw;
 height: 6vw;
}

#r-10 {
 top: 62%;
 left: 4%;
 width: 4vw;
 height: 36vw;
}

#r-11 {
 top: 70%;
 right: 2%;
 width: 10vw;
 height: 10vw;
}

#r-12 {
 top: 76%;
 right: 10%;
 width: 8vw;
 height: 8vw;
}

#r-13 {
 top: 87%;
 right: 15%;
 width: 10vw;
 height: 8vw;
}

#r-14 {
 top: 91%;
 right: 10%;
 width: 10vw;
 height: 8vw;
}

/* OPERATION SECTION
------------------------------------------------------------ */

#operate {
  position: relative;
  z-index: 20;
  width: 100%;
  height: auto;
  margin: -5% 0 0;
}

/* OPERATION SECTION > PUSH BUTTON
------------------------------------------------------------ */

#operate div#push {
  position: absolute;
  top: 0;
  left: 54%;
  -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
      transform: translateX(-50%);
  width: 25vw;
  height: 12vw;
  border-bottom: solid 1vw #fff;
  -o-border-image: url(../image/rainbow.gif) 25 25 round;
     border-image: url(../image/rainbow.gif) 25 25 round;
  cursor: pointer;
  -webkit-filter: drop-shadow( 0 0 1vw #000 );
          filter: drop-shadow( 0 0 1vw #000 );
}

#operate div#push > div {
  width: 100%;
  height: 100%;
  border-radius: 40% 40% 0 0;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(255,255,255,0.5) inset;
          box-shadow: 0px 2px 14px 0px rgba(255,255,255,0.5) inset;
  background: #000;
}

#operate div#push > div:hover {
  width: 100%;
  height: 78%;
  margin: 10% 0 0;
}

#operate div#push > div span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  font-weight: bold;
  font-size: 6vw;
}

/* OPERATION SECTION > PUSH BUTTON > ALLSTAR
------------------------------------------------------------ */

.allstar {
  display: none;
  z-index: 99;
  opacity: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%); 
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 110%;
  height: 100%;
  background: 50% 50% / cover repeat #000;
  color: #fff;
  -webkit-filter: saturate(110%) contrast(120%);
          filter: saturate(110%) contrast(120%);
}

/* OPERATION SECTION > HUNDLE
------------------------------------------------------------ */

#hundle {
  position: relative;
  width: 24vw;
  height: 24vw;
  margin: 0 0 0 75%;
  border-radius: 50%;
  background: #000;
  font-size: 0;
  cursor: pointer;
  -webkit-filter: drop-shadow( 0 0 1vw #000 );
          filter: drop-shadow( 0 0 1vw #000 );
}

#hundle:hover {
  -webkit-animation: turn 2s linear infinite;
          animation: turn 2s linear infinite;
}

@-webkit-keyframes turn {
  from { transfrom: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes turn {
  from { transfrom: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

#hundle p, #hundle span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  border-radius: 50%;
}

#hundle p:first-child {
  width: 96%;
  height: 96%;
  background: 50% 50% / 100% repeat url(../image/rainbow.gif);   
}

#hundle p:nth-child(2) {
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  width: 94%;
  height: 94%;
  background: #000;   
}

#hundle span {
  width: 75%;
  border-radius: 0;
  font-weight: bold;
  font-size: 5vw;
}

/* OPERATION SECTION > NORI
------------------------------------------------------------ */

#nori {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42vw;
  height: 2vw;
  padding: 10% 0 0;
  border-radius: 0 50% 5% 0;
  background: #000;
  -webkit-filter: drop-shadow( 0 0 1vw #000 );
          filter: drop-shadow( 0 0 1vw #000 );
}

#nori p {
  position: relative;
  width: 60%;
  height: 12vw;
  margin: -31% auto 0;
  background: 50% 50% / 100% 40% no-repeat url(../image/design/04/norisheet.webp); 
}

#nori p:hover {
  width: 60%;
  height: 35vw;
  margin: -51% auto 0;
}

#nori span {
  position: absolute;
  top: 70%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
      -ms-transform : translate(-50%,-50%);
          transform : translate(-50%,-50%);
  width: 82%;
  font-weight: bold;
  font-size: 5vw;
}

#noriochi {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 21;
  width: 60%;
  height: 12vw;
  margin: -31% auto 0;
  background: 50% 50% / 100% 40% no-repeat url(../image/design/04/norisheet.webp); 
  -webkit-animation: ochiru .1s linear infinite; 
          animation: ochiru .1s linear infinite;
  -webkit-filter: contrast(120%) drop-shadow( .1vw .1vw .01vw #fff);
          filter: contrast(120%) drop-shadow( .1vw .1vw .01vw #fff); 
}

@-webkit-keyframes ochiru {
  from { top: -100%; }
  to { top: 20%; }
}

@keyframes ochiru {
  from { top: -100%; }
  to { top: 20%; }
}

/* OPERATION SECTION > DIP
------------------------------------------------------------ */

#dip {
  position: absolute;
  top: 80%;
  left: 60%;
  -webkit-transform : translateX(-50%);
          -ms-transform : translateX(-50%);
      transform : translateX(-50%);
  width: 24vw;
  height: 3vw;
  padding: 0;
  -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
          box-shadow: 0px 0px 20px rgba(0,0,0,0.75);
  background: 50% 50% / 90%  7% no-repeat url(../image/rainbow.gif) #000;
  -webkit-perspective: 40vw;
          perspective: 40vw;
}

#dip p {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 10%;
  -webkit-transform: rotateX(60deg);
          transform: rotateX(60deg);
  width: 80%;
  height: 10vw;
  margin: -.5vw 0 0;
  background: 50% 100% / 100% no-repeat url(../image/design/04/norisheet.webp); 
  cursor: pointer;
  -webkit-animation: nori-color 5s linear infinite;
          animation: nori-color 5s linear infinite;
}

@-webkit-keyframes nori-color {
  from { -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); filter: hue-rotate(0deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); }
  to { -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); filter: hue-rotate(360deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); }
}

@keyframes nori-color {
  from { -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); filter: hue-rotate(0deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); }
  to { -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); filter: hue-rotate(360deg) contrast(120%) drop-shadow( .1vw .1vw .01vw #fff) brightness(150%); }
}

#dip span {
  position: absolute;
  top: -40%;
  left: 45%;
  -webkit-transform : translateY(-50%);
      -ms-transform : translateY(-50%);
          transform : translateY(-50%);
  color: #000;
  font-weight: bold;
  font-size: 5vw;
}

/* PRIZE SECTION
------------------------------------------------------------ */

#prize {
  display: block;
  position: relative;
  width: 94%;
  height: auto;
  margin: 5% auto 0;
}

#prize > span {
  display: block;
  margin: 0 0 -1.7%;
  font-weight: bold;
  font-size: 6vw;
}

#prize > #prize-inbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 98%;
  height: auto;
  padding: 1%;
  background: #000;
}

#prize > #prize-inbox > div {
 position: relative;
 height: 20vw;
 vertical-align: bottom;
}

#prize > #prize-inbox > div > span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  width: 100%;
  height: auto;
  font-size: 4vw;
  text-align: center;
  -webkit-filter: drop-shadow( .1vw .3vw .01vw #000 );
          filter: drop-shadow( .1vw .3vw .01vw #000 );
}

#prize > #prize-inbox > div#prize-1 {
  width: 25%;
  background: 50% 50% / 120% no-repeat url(../image/moon.webp);
}

#prize > #prize-inbox > div#prize-2 {
  width: 20%;
  background: 50% 50% / 90% no-repeat url(../image/design/04/norisheet.webp);
}

#prize > #prize-inbox > div#prize-3 {
  width: 20%;
  background: 50% 50% / 80% no-repeat url(../image/design/07/ufoandalien_new.gif);
}

#prize > #prize-inbox > div#prize-4{
  width: 18%;
  background: 50% 50% / 92% no-repeat url(../image/design/01/astronaut.webp);
}

#prize > #prize-inbox > div#prize-5 {
  width: 18%;
  background: 50% 50% / 90% no-repeat url(../image/design/01/triangle.png);
}

/* OH-ATARI
------------------------------------------------------------ */

#atari {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: 50% 50% / 130% repeat url(../image/design/07/wa.gif);
  cursor: none;
}

#atari > p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
          -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  margin: 0;
}

#atari > p:first-child {
  opacity: 0.8;
  width: 100%;
  height: 100%;
  background: 50% 50% / 80% repeat url(../image/design/07/fever.gif);
  -webkit-animation: ufo-color 9s linear infinite;
          animation: ufo-color 9s linear infinite;
}

#atari > p:last-child {
  opacity: 1;
  width: 100%;
  height: 100%;
  background: 50% 0% / 100% repeat-x url(../image/design/07/koma.gif);
  -webkit-animation: ufo-color 5s linear infinite;
          animation: ufo-color 5s linear infinite;
}

/* AUDIO
------------------------------------------------------------ */

audio {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  width: 0vw;
  height: 0vw;
}

/* FOOTER
------------------------------------------------------------ */

footer{
  opacity: 1;
  position: relative;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 2% 0;
  color: #fff;
  font-size: 3vw;
  text-shadow: -5px -5px .5px #000;
  text-align: center;
}

/* IE
------------------------------------------------------------ */

#ie {
  display: none;
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

  #wrap {
    display: none;
  }

  #ie {
    display: block;
    opacity: 1;
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: 0% 0%/200% repeat url(../image/rainbow.gif) #6633cc;
    font-family: '04B';
    text-align: center;
  }

  #ie span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
            -ms-transform : translate(-50%,-50%);
        transform : translate(-50%,-50%);
    width: 90%;
    height: 6vw;
    margin: 0;
    color: #fff;
    font-size: 3vw;
    font-family: '04B';
  }
}

/* FOR PORTRAIT
------------------------------------------------------------ */

@media screen and (orientation: portrait) {

::-webkit-scrollbar {
  width: 0;
}

 #wrap {
   padding: 3% 0;
   overflow: hidden;
 }

 #main-frame {
   width: 90%;
   border-radius: 7vw;
   -webkit-box-shadow: none;
           box-shadow: none;
 }

 #bg {
   border-radius: 7vw;
   background: 50% 50% / 70% repeat url(../image/design/07/mirage.gif) #000;
 }

 header {
   -webkit-filter: drop-shadow( .6vw .6vw .01vw #fff);
           filter: drop-shadow( .6vw .6vw .01vw #fff);
 }

 header div#site-title{
   -webkit-transform: rotate(-4deg);
       -ms-transform: rotate(-4deg);
           transform: rotate(-4deg); 
   width: 100%;
   margin: 0 0 0;
   padding: .5% 0 -.5% 0;
 }

 header div#site-title h1 {
   font-size: 12vw;
   -webkit-filter: drop-shadow( .5vw .5vw .01vw #000);
           filter: drop-shadow( .5vw .5vw .01vw #000);
 }

 header h2 {
   font-size: 4.5vw;
 }

 header h3 {
  width: 100%;
  margin: 0;
  font-size: 4.6vw;
 }

 header div#ufo {
   top: 10%;
   left: -4%;
   width: 30vw;
   height: 25vw;
 }

 #movie-screen {
   width: 80%;
   height: 40vw;
   margin: 4% auto 0;
   -webkit-box-shadow: none;
           box-shadow: none;
 }

 #gimmick {
   width: 90%;
   height: 60vw;
   margin: 40% auto 10%;
   cursor: auto;
 }

 #gimmick div#cursor {
   display: none;
 }

 #gimmick div#hole {
   width: 35vw;
   background: 50% 0% / 100% no-repeat url(../image/design/02/falldown.gif);
 }

 #gimmick div#in {
   width: 100%;
   height: 20vw;
   margin: 0 auto;
   padding: 0;
 }

 #gimmick div#in p {
   width: 30%;
   margin: 0 2%;
   background: 50% 50% / 70% no-repeat url(../image/design/07/ufoandalien_new.gif);
 }

 #gimmick div#hit {
   width: 20vw;
   height: 20vw;
   -webkit-animation: hit-color 10s linear infinite;
           animation: hit-color 10s linear infinite;
 }

 @-webkit-keyframes hit-color {
   0% { -webkit-transform : translate(-50%,-50%) rotate(0deg) scale(1); transform : translate(-50%,-50%) rotate(0deg) scale(1); -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
   50% { -webkit-transform : translate(-50%,-50%) rotate(360deg) scale(1); transform : translate(-50%,-50%) rotate(360deg) scale(1); -webkit-filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
   100% { -webkit-transform : translate(-50%,-50%) rotate(0deg) scale(1); transform : translate(-50%,-50%) rotate(0deg) scale(1); -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
 }

 @keyframes hit-color {
   0% { -webkit-transform : translate(-50%,-50%) rotate(0deg) scale(1); transform : translate(-50%,-50%) rotate(0deg) scale(1); -webkit-filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(0deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
   50% { -webkit-transform : translate(-50%,-50%) rotate(360deg) scale(1); transform : translate(-50%,-50%) rotate(360deg) scale(1); -webkit-filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(180deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
   100% { -webkit-transform : translate(-50%,-50%) rotate(0deg) scale(1); transform : translate(-50%,-50%) rotate(0deg) scale(1); -webkit-filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); filter: hue-rotate(360deg) contrast(120%) drop-shadow( .7vw .7vw .01vw #fff); }
 }

 #gimmick div#hit > span {
   font-size: 8vw;
   line-height: 7vw;
 }

 .atacker {
   display: none;
 }

 #update {
   top: 47%;
   left: 5%;
   -webkit-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
           transform: rotate(0deg);
   width: 95%;
   height: auto;
 }

 #update > span {
   display: block;
   width: 47%;
   margin: 0;
   font-size: 7vw;
   line-height: 5vw;
 }

 #update > div.update-box {
   width: 100%;
   height: auto;
   margin: 1% 0 0;
 }

 #update > div.update-box > p{
   font-size: 4vw;
 }

 #update > div.update-box > p:last-child{
   font-size: 4vw;
 }

 #sound {
   top: 43%;
   left: 55%;
   -webkit-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
           transform: rotate(0deg);
   width: 48%;
 }
 
 #sound > span {
   font-size: 8vw;
 }

 #sound > p {
   display: inline-block;
   width: 7vw;
   height: 7vw;
 }

 .decor{
   display: none;
 }

 div.decor.moon {
   display: block;
   background: 50% 50% / 100% no-repeat url(../image/moon.webp);
   -webkit-filter: hue-rotate(30deg) saturate(200%) contrast(120%) drop-shadow( 0 0 1vw #fff);
           filter: hue-rotate(30deg) saturate(200%) contrast(120%) drop-shadow( 0 0 1vw #fff);
   -webkit-animation: none;
           animation: none;
 }

 #m-1 {
   top: 40%;
   left: -3%;
   width: 54vw;
   height: 54vw;
 }

 .star{
   display: block;
 }

 #s-1 {
   top: 28%;
   left: -7%;
   -webkit-transform: rotate(37deg);
       -ms-transform: rotate(37deg);
           transform: rotate(37deg);
   width: 19vw;
   height: 19vw;
 } 

 #s-2 {
   top: 20%;
   left: -6%;
   width: 12vw;
   height: 12vw;
 }

 #s-3 {
   top: 53%;
   right: -5%;
   -webkit-transform: rotate(100deg);
       -ms-transform: rotate(100deg);
           transform: rotate(100deg);
   width: 15vw;
   height: 15vw;
 }

 #s-4 {
   top: 72%;
   right: -5%;
   -webkit-transform: rotate(-20deg);
       -ms-transform: rotate(-20deg);
           transform: rotate(-20deg);
   width: 21vw;
   height: 21vw;
 }

 #s-5 {
   top: 69%;
   left: -7%;
   -webkit-transform: rotate(30deg);
       -ms-transform: rotate(30deg);
           transform: rotate(30deg);
   width: 21vw;
   height: 21vw;
   -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(180deg) invert(100%);
           filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(180deg) invert(100%);
 }

 #s-6 {
   top: 57%;
   right: 27%;
   width: 9vw;
   height: 9vw;
 }

 #s-7 {
   top: 44%;
   right: 47%;
   width: 10vw;
   height: 10vw;
 }

 #s-8 {
   top: 14%;
   right: -7%;
   width: 15vw;
   height: 15vw;
   -webkit-filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(190deg) invert(100%);
           filter: drop-shadow( 20px 10px .5px #fff)  hue-rotate(190deg) invert(100%);
 }

 #s-9 {
   top: 88%;
   right: 3%;
   width: 16vw;
   height: 16vw;
 }

 #s-10 {
   top: 87%;
   right: 22%;
   width: 10vw;
   height: 10vw;
 }

 #s-11 {
   width: 13vw;
   height: 13vw;
 }

 #s-12 {
   top: 89%;
   left: 11%;
   width: 16vw;
   height: 16vw;
 }

 #s-13 {
   top: 76%;
   left: 24%;
   width: 8vw;
   height: 8vw;
 }

 #s-14 {
   top: 26%;
   left: 93%;
   -webkit-transform: rotate(10deg);
       -ms-transform: rotate(10deg);
           transform: rotate(10deg);
   width: 9vw;
   height: 9vw;
 }

 #s-15 {
   top: 0%;
   left: 19%;
   width: 6vw;
   height: 6vw;
 }

 div.decor.kira {
   display: block;
   width: 15vw;
   height: 15vw;
  -webkit-filter: invert(100%);
          filter: invert(100%);
 }

 #k-1, #k-2, #k-3 {
   display: none;
 }

 #k-4 {
   top: 81%;
   left: 21%;
 }

 #k-5 {
   top: 81%;
   right: 21%;
 }

 div.decor.falldown {
   display: block;
   background: 50% 50% / 100% no-repeat url(../image/design/02/falldown.gif);
   -webkit-animation: fall-color 7s linear infinite;
           animation: fall-color 7s linear infinite;
 }

 #f-1 {
   top: 36%;
   right: -9%;
   -webkit-transform: rotate(6deg);
       -ms-transform: rotate(6deg);
           transform: rotate(6deg); 
   width: 30vw;
   height: 50vw;
 }

 #f-2 {
   top: 45%;
   left: -9%;
   -webkit-transform: rotate(-8deg);
       -ms-transform: rotate(-8deg);
           transform: rotate(-8deg); 
   width: 23vw;
   height: 38vw;
 }

 #f-3 {
   top: 77%;
   right: 8%;
   width: 15vw;
   height: 27vw;
 }

 #f-4 {
   display: block;
   top: 77%;
   left: 8%;
   -webkit-transform: rotate(8deg);
       -ms-transform: rotate(8deg);
           transform: rotate(8deg); 
   width: 15vw;
   height: 27vw;
 }

 .acrylic {
   display: none;
 }

 #operate {
   margin: -20% 0 0;
 }

 #operate div#push {
   position: relative;
   left: 50%;
   width: 40vw;
   height: 20vw;
   margin: 0 0 25%;
   border: solid 1vw #fff;
   border-radius: 100%;
   -webkit-filter: none;
           filter: none;
 }

 #operate div#push > div {
   border-radius: 100%;
   -webkit-box-shadow: 0px 2px 14px 0px rgba(255,255,255,0.5) inset;
           box-shadow: 0px 2px 14px 0px rgba(255,255,255,0.5) inset;
 }

 #operate div#push > div:hover {
   height: 100%;
   margin: 0;
 }

 #operate div#push > div span {
   font-size: 9vw;
 }

 .allstar {
   width: 100%;
 }

 #hundle {
   position: absolute;
   top: 30%;
   right: 2%;
   width: 20vw;
   height: 20vw;
   padding: 4vw; 
   font-size: 0;
   cursor: pointer;
   -webkit-filter: none;
           filter: none;
 }

 #hundle p:first-child {
   width: 95%;
   height: 95%;   
 }

 #hundle p:nth-child(2) {
   width: 90%;
   height: 90%;
   background: #000;   
 }

 #hundle span {
   width: 75%;
   font-size: 6vw;
 }

 #nori {
   bottom: -60%;
   width: 40vw;
   height: 2vw;
   padding: 10% 0 1%;
   -webkit-filter: none;
           filter: none;
 }

 #nori p {
   margin: -32% auto 0;
 }

 #nori span {
   top: 80%;
   width: 100%;
   font-size: 5.5vw;
 }

 #dip {
  position: absolute;
   top: 140%;
   left: 55%;
   width: 27vw;
   height: 3vw;
   margin: 0;
   background: 50% 50% / 90%  10% no-repeat url(../image/rainbow.gif) #000;
   -webkit-perspective: 60vw;
           perspective: 60vw;
 }

 #dip p {
   -webkit-transform: rotateX(40deg);
           transform: rotateX(40deg);
   width: 80%;
   height: 10vw;
   margin: 1vw 0 0;
 }

 #dip span {
   left: 35%;
   font-size: 7vw;
 }

 #prize {
   margin: 0 auto 0;
 }

 #prize > span {
   margin: 0 0 -2.5%;
   font-size: 8.5vw;
 }

 #prize > #prize-inbox {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   width: 96%;
   padding: 2%;
 }

 #prize > #prize-inbox > div {
   height: 35vw;
  }

 #prize > #prize-inbox > div > span {
   font-size: 7vw;
 }

 #prize > #prize-inbox > div#prize-1 {
   width: 50%;
   background: 50% 50% / 110% no-repeat url(../image/moon.webp);
 }

 #prize > #prize-inbox > div#prize-2 {
   width: 50%;
 }

 #prize > #prize-inbox > div#prize-3 {
   width: 33%;
 }

 #prize > #prize-inbox > div#prize-4{
   width: 33%;
 }

 #prize > #prize-inbox > div#prize-5 {
   width: 33%;
 }

 #atari {
   background: 50% 50% / 130% repeat url(../image/design/07/wa.gif) #000;
 }

 #atari > p:first-child {
   opacity: 0.8;
   background: 50% 50% / 130% repeat url(../image/design/07/fever.gif);
 }

 #atari > p:last-child {
   background: 50% 50% / 120% repeat url(../image/design/07/koma.gif);
 }

 footer{
   padding: 5% 0;
   font-size: 5vw;
   text-shadow: -2px -2px .5px #000;
 }

}