/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* 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';
}

/* 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;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  -webkit-transition: all 0.4s;
       -o-transition: all 0.4s;
          transition: all 0.4s;

}

#global.open-close {
  display: block;
  opacity: 1;
  z-index: 98;
}

.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/tv_icon.png);
}

#global #changer a.l_nori {
  background: 50% 50% / 78% no-repeat url(../image/design/07/beta_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;
}

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

#ie {
  display: none;
}

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

  #wrap {
    display: none;
    width: 0;
    height: 0;
    z-index: 1;
  }

  #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) {

 #navigation {
   z-index: 99;
   width: 10vw;
   height: 10vw; 
   border: solid .8vw #fff;
   border-radius: 2vw;
 }

 .no-scroll {
   width: 100vw;
 }

 #global #changer {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   top: 1vw;
   left: 10vw;
   z-index: 20;
   width: 80%;
   height: 12vw;
   margin: 0;
   padding: 0 0 0 4%;
   background: #000;
 }

 #global #changer a {
   width: 12vw;
   height: 12vw;
   margin: 0 2%;
 }

 #browser {
   left: 50%;
   width: 90%;
   height: 90%;
 }

 #youtube {
   width: 90%;
   height: 40vw;
 }

 .close {
   top: -1%;
   right: 1%;
   width: 10vw;
   height: 10vw;
 }

 .close span:nth-of-type(1) {
   top: 2%;
   right: 4vw;
   width: 20%;
 }

 .close span:nth-of-type(2) {
   top: 15%;
   left: 4vw;
   width: 20%;
 }

}