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

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

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'Press';
  src: url("../font/PressStart2P-Regular.ttf") format("truetype");
}

body{
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Press", 'Press Start 2P', arial;
  background-color: #000;
  overflow-x: hidden;
}

html { 
  scrollbar-width: thin;
  scrollbar-color: #9642f5 transparent;
 }

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

::-moz-selection { color: #000; background: #9542f5; }

::selection { color: #000; background: #9542f5; }


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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0,255,0,0);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(150,66,245,0.5);
}

/*COMMON
------------------------------------------------------------ */

.link{
  z-index: 10;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg{
  display: block;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#backto{
  display: block;
  opacity: 0.4;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: auto;
  height: 2vw;
  color: #fff;
  font-size: 1.5vw;
  text-align: left;
}

#backto:hover{
  opacity: 1;
}
	  	  
#player{ 
  display: block;
  position: absolute;
  top:0; 
  left:0;
  z-index: 0;
  width: 0.1vw;
  height :0.1vw;
}

/*04 DESKTOP
------------------------------------------------------------ */

#desktop{
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: 50% 50% / 50% repeat url('../image/design/background/bg_logo.gif');
  -webkit-animation: bg 3s infinite;
          animation: bg 3s infinite;
}

#desktop #shadow{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

#desktop #monitor{
  display: block;
  opacity: 0.6;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  background: 50% 50% / 60% no-repeat url('../image/design/00/monitor.png');
}

#desktop #gaming{
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%; 
  width: 44vw;
  height: 28vw;
  border-radius:10%;
  background: 50% 50% / 100% no-repeat url('../image/design/00/desktop.gif') #000;
  -ms-transform: translateY(-50%) translateX(-50%); 
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

/* 05 SEDATIVES
------------------------------------------------------------ */

input[type="checkbox"]{
 display: none;
}

label[for="med"]{
  display: block;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 20vw;
  height: auto;
  margin: auto;
  text-align: center;
  cursor:pointer;
  -webkit-filter: saturate(0%);
          filter: saturate(0%);
}

label:hover{
  -webkit-filter: saturate(100%);
          filter: saturate(100%);
}

label > img{
  width: 30%;
  height: auto;
}

label > span{
  display: block;
  color: #00ff00;
  font-size: 1vw;
}

#med:checked + #sedatives{
  display: block;
}

#med:checked + .sedative_back{
  bottom:50%;
}

#sedatives{
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height:100vh;
  margin: 0;
  overflow: hidden;
  background: 50% 50% / 60% repeat url('../image/design/00/mmm.gif');
  -webkit-animation: rainbowbg 6s infinite;
          animation: rainbowbg 6s infinite;
}

@-webkit-keyframes rainbowbg{
  0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg);}
  100%{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg);}
}

@keyframes rainbowbg{
  0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg);}
  100%{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg);}
}

#pill{
  display: block;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 3;
  width: 100%;
  height: 90%;
  background: 50% 50% / 40% repeat url('../image/design/00/pill.gif');
}

#quiet{
  display: block;
  opacity: 0.6;  
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: 50% 50% / 100vh repeat url('../image/design/00/sedatives.gif');
  -webkit-filter: saturate(250%);
          filter: saturate(250%);
}

#sedative_gr{
  display: block;
  opacity:0.5;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: #fff;
  background: -webkit-linear-gradient(0deg, #fc0320, #ff3dbe, #cd75ff, #5f59ff, #59f9ff, #59ff75, #fff959);
  -webkit-filter: saturate(200%);
          filter: saturate(200%);
}

.got_a{
  display: block;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: auto;
  background-color: #000;
}

.got_a:first-child{
  top: 0;
  left: 0;
}

.got_a:last-child{
  bottom: 0;
  left: 0;
}

.got_a span{
  overflow: hidden;
  color: #00ff00;
  font-size: 2.9vw; 
  white-space: nowrap;
  -webkit-animation : sedativetext .05s linear infinite;
          animation : sedativetext .05s linear infinite;
}

@-webkit-keyframes sedativetext{
  0% { opacity:0;}
  50% { opacity:1;}
  100% { opacity:0;}
}

@keyframes sedativetext{
  0% { opacity:0;}
  50% { opacity:1;}
  100% { opacity:0;}
}


/* 93 TIME UP
------------------------------------------------------------ */

#timeup-bg {
  z-index: 1;
  opacity: 0.4;
  overflow: hidden;
  background: 50% 50% / 1.5% repeat url(../image/design/background/bg_matrix.gif);
}

#timeup {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  margin: 0;
}

#timeup div, #timeup pre {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);  width: 75%;
  margin: 0;
}

#timeup div:first-child {
  z-index: 3;
  width: 100%;
  height: 100svh;
  background: rgba(0,255,0,0.2);
  -webkit-animation : aa 8s linear infinite;
          animation : aa 8s linear infinite;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

#timeup div:nth-child(2) {
  z-index: 4;
  width: 80%;
  height: 80svh;
  background: rgba(0,0,0,0.4);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

#timeup div:nth-child(3){
  z-index: 5;
  width: 100%;
  color: #000;
  font-size: 14vw;
  text-align: center;
}

#timeup pre {
  z-index: 6;
  width: 75%;
  height: auto;
  color: #00ff00;
  font-size: .3vw;
  -webkit-animation : aa 5.5s linear infinite;
          animation : aa 5.5s linear infinite;
}

@-webkit-keyframes aa{
  0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
  50% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg);}
  100% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);}
}


/* 94 LOOK ALIKE SOKKURI-SAN
------------------------------------------------------------ */

body#sokkuri{
  background: 50% 50% / 10% repeat url(../image/design/00/cupid-background.gif);
}

#back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: 50% 50% / 10% repeat url(../image/design/00/Background22.gif);
}

.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  overflow: hidden;
  width: 42vw;
  height: 35vw;
  margin: auto;
}

.slide img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 80%;
  height: 30vw;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-animation: slideAnime 12s ease infinite;
          animation: slideAnime 12s ease infinite;
}

.slide img:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s
 }

.slide img:nth-of-type(2) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s 
}
@-webkit-keyframes slideAnime{
   0% { opacity: 0 }
   6% { opacity: 1 }
  44% { opacity: 1 }
  50% { opacity: 0 }
 100% { opacity: 0 }
}
 
@keyframes slideAnime{
   0% { opacity: 0 }
   6% { opacity: 1 }
  44% { opacity: 1 }
  50% { opacity: 0 }
 100% { opacity: 0 }
}

.slide p{
  position: absolute;
  top: -3%;
  width: 100%;
  height: 100%;
  background: 50% 50% / 100% 90% no-repeat url(../image/design/00/gift_frame_rainbow4.gif);
}

#decoration{
  display: block;
  position: relative;
  width: 100%;
  height: 100dvh;
}

#decoration .flower{
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 16vw;
  height: 30vw;
  background: 50% 50% / 100% no-repeat url(../image/design/00/menuflower.gif);
}

#decoration .flower:nth-child(1){
  left: 5%;
}

#decoration .flower:nth-child(2){
  right: 5%;
}

#decoration .bird{
  position: absolute;
  top: 0;
  width: 30vw;
  height: 20vw;
  background: 50% 50% / 100% no-repeat url(../image/design/00/dove.gif);
}

#decoration .bird:nth-child(3){
  left: 10%;
}

#decoration .bird:nth-child(4){
  right: 10%;
  -webkit-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

#decoration .frame{
  position: absolute;
  bottom: -1%;
  left: 50%;
  -ms-transform: translateX(-50%);
      transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 50%;
  height: 10vw;
  background: 50% 50% / 100% no-repeat url(../image/design/00/aniLineFlowerBlooming.gif);
}

#decoration .angel{
  position: absolute;
  bottom: 0;
  left: 13%;
  width: 20vw;
  height: 17vw;
  background: 50% 50% / 100% no-repeat url(../image/design/00/cutie_flower.gif);
}

#decoration .angel:nth-child(7){
  bottom: 0;
  right: 3%;
  width: 10vw;
  height: 7vw;
}

#decoration .hana{
  position: absolute;
  background: 50% 50% / 100% no-repeat url(../image/design/00/flower2.gif);
}

#decoration .hana:nth-child(8){
  bottom: 0;
  right: 15%;
  width: 16vw;
  height: 16vw;
}

#decoration .hana:nth-child(9){
  top: 5%;
  left: 3%;
  width: 10vw;
  height: 10vw;
}

#decoration .hana:nth-child(10){
  top: 5%;
  right: 3%;
  width: 7vw;
  height: 7vw;
}

#decoration .heart{
  opacity: 0.4;
  position: absolute;
  background: 50% 50% / 100% no-repeat url(../image/design/00/heart21.gif);
}

#decoration .heart:nth-child(11){
  bottom: 2vw;
  left: 2%;
  width: 6vw;
  height: 6vw;
}

#decoration .heart:nth-child(12){
  bottom: 6vw;
  right: 2%;
  width: 6vw;
  height: 6vw;
}

#decoration .heart:nth-child(13){
  top: 16vw;
  left: 25%;
  width: 6vw;
  height: 6vw;
}

#decoration h1{
  position: relative;
  margin: 0;
  color: #f95af3;
  font-size: 5vw;
  text-align: center;
  text-shadow    : 
       2px  2px 1px #ffff1a,
      -2px  2px 1px #ffff1a,
       2px -2px 1px #ffff1a,
      -2px -2px 1px #ffff1a,
       2px  0px 1px #ffff1a,
       0px  2px 1px #ffff1a,
      -2px  0px 1px #ffff1a,
       0px -2px 1px #ffff1a;  
  -webkit-filter: drop-shadow(0 0 10px pink);  
          filter: drop-shadow(0 0 10px pink);
}

#decoration h2{
  position: absolute;
  -webkit-transform: rotate(-11deg);
      -ms-transform: rotate(-11deg);
          transform: rotate(-11deg);
  margin: 0;
  color: #F54EDA;
  font-size: 4vw;
  text-shadow    : 
       2px  2px 0px #00cc66,
      -2px  2px 0px #00cc66,
       2px -2px 0px #00cc66,
      -2px -2px 0px #00cc66,
       2px  0px 0px #00cc66,
       0px  2px 0px #00cc66,
      -2px  0px 0px #00cc66,
       0px -2px 0px #00cc66;  
}

#decoration h2#rick{
  bottom: 20vw;
  left: 18vw;
}

#decoration h2#sion{
  top: 22vw;
  right: 18vw;
}

#decoration h2#all{
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  bottom: 1%;
  right: 2%;
  color: #fff;
  font-size: 4vw;
}

/* 95 CYCLOPS
------------------------------------------------------------ */

#caleido{
  z-index: 1;
  background: 50% 50% / 80% repeat url('../image/design/background/caleido.gif');
}

#cyclops{
  opacity: 0.5;
  z-index: 2;
  background: 50% 50% / 20% repeat url('../image/tg/cyclops.gif');
  -webkit-animation: rainbowbg 4s infinite;
          animation: rainbowbg 4s infinite;
}

#trans{
  opacity: 0.6;
  z-index: 4;
  background: 0% 50% / 50% repeat url('../image/design/background/bg_trans.gif');
}

#bw_ufo{
  opacity:0.3;
  z-index: 5;
  background: 50% 50% / 50% repeat url('../image/design/00/ufo_bw.gif');
}

/*96 BEYOND SPACE
------------------------------------------------- */

#bg-beyond-double{
  z-index: 1;
  opacity: 1;
  overflow: hidden;
  background: 0% 0% / 100% repeat url(../image/design/background/bg_galaxy.gif);
}

#bg-beyond{
  z-index: 2;
  opacity: 0.6;
  overflow: hidden;
  background: 0% 0% / 100% repeat url(../image/design/background/bg_star.gif);
  -webkit-animation: up 20s linear infinite;
          animation: up 20s linear infinite;
}

@-webkit-keyframes up{
  to { background-position:0 0%; }
  from { background-position: 0 154vw; }
}

#beyond{
  display: block;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 3;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow:hidden;
  text-align: center;
}

#beyond span{
  position: absolute;
  top: 80%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 99;
  width:100%;
  margin: 0;
  color: rgba(255,255,255,0.8);
  font-weight: bold;
  font-size: 4vw;
  font-family: "Press", 'Press Start 2P', arial;
  text-shadow: 0 2px 2px #00ff00;
  -webkit-filter: drop-shadow(0 0 10px #6700AE);
          filter: drop-shadow(0 0 10px #6700AE);
}

#universe{
  display: block;
  position: relative;
  width: 100%;
  height: 95vh;
  margin: auto 0;
  padding: 0;
}

.earth{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 45%;
  height: 100vh;
  background: 50% 50% / 100% no-repeat;
}

.earth:first-child{
  background-image: url(../image/design/03/reverseearth.gif);
  -webkit-filter: drop-shadow(0 0 20px #fff);
          filter: drop-shadow(0 0 20px #fff);
  opacity:0.8;
}

.earth:nth-child(2){
  background-image: url(../image/design/03/color_earth.gif);
  -webkit-filter: drop-shadow(0 0 2px #fff);
          filter: drop-shadow(0 0 2px #fff);
  opacity: 1;
}

#circle{
  opacity: 0.3;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 100%;
  height: 80%;
  background: 50% 50% / 100% 100% no-repeat url(../image/design/03/rainbowcircle.png);
  -webkit-filter: hue-rotate(40deg);
          filter: hue-rotate(40deg);
}

#change{
  width: 35vw;
  height: 35vw;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  text-align:center;
}

#change .face{
  width: 80%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0;
  left: 0;
  opacity:0;
  background: 50% 50% / contain no-repeat;
  -webkit-animation: henshin 10s infinite;
          animation: henshin 10s infinite;
  -webkit-filter: drop-shadow(0 0 10px #000);
          filter: drop-shadow(0 0 10px #000);
}

@-webkit-keyframes henshin {
   0% { opacity:0; }
   5% { opacity:1; }
  25% { opacity:1; }
  50% { opacity:1; }
  60% { opacity:0; }
 100% { opacity:0; }
}

@keyframes henshin {
   0% { opacity:0; }
   5% { opacity:1; }
  25% { opacity:1; }
  50% { opacity:1; }
  60% { opacity:0; }
 100% { opacity:0; }
}

#change .sion {
  background-image : url(../image/tg/sion_pixel.png); 
}

#change .green {
  background-image : url(../image/tg/timegreen_pixel.png);
  -webkit-animation-delay : 5s;
          animation-delay : 5s;
}

#beyond .brink{
  opacity:0.9;
  position: absolute;
  background: 50% 50% / cover no-repeat url(../image/starbright.gif);
  -webkit-filter:drop-shadow(0 0 3px #fff);
          filter:drop-shadow(0 0 3px #fff);
}

#beyond .ufo{
  opacity:0.8;
  position: absolute;
  background: 50% 50% / 100% no-repeat url(../image/design/03/ster158.gif);
}

#beyond #left1{
  top: 15%;
  left: 28%;
  width: 3%;
  height: 9%;
}

#beyond #left2{
  top: 5%;
  left: 15%;
  width: 9%;
  height: 15%;
}

#beyond #left3{
  top: 62%;
  left: 25%;
  width: 4%;
  height: 7%;
}

#beyond #left4{
  bottom: -15%;
  left: 0;
  width: 40%;
  height: 90%;
}

#beyond #right1{
  bottom: 0%;
  right: 26%;
  width: 4%;
  height: 8%;
}

#beyond #right2{
  bottom: 25%;
  right: 13%;
  width: 7%;
  height: 10%;
}

#beyond #right3{
  bottom: 74%;
  right: 26%;
  width: 4%;
  height: 8%;
}

#beyond #right4{
  top: -15%;
  right: 0;
  width: 40%;
  height: 90%;
}

/*97 SNACK TIME
------------------------------------------------------------ */

#bg-snack{
  z-index: 1;
  background: 50% 50% / 80% repeat url('../image/design/background/bg_star.gif') fixed;
  opacity: 0.5;
}

#bg-snack-moon{
  z-index: 2;
  background: 50% 50% / 80% no-repeat url('../image/design/03/moonrainbow.gif') fixed;
  opacity: 0.1;
}

#invitation{
  display: block;
  position:relative;
  z-index:3;
  margin: 0;
  padding: 5% 0;
  color: #6633cc;
  font-size: 1.2vw;
  line-height: 4vw;
  text-align: center;
}

#invitation > img:not(#snacktime){
  display: block;
  width: 20%;
  margin: 5% auto;
}

#snacktime{
  display: block;
  opacity: 0.8;
  width: 70%;
  height: auto;
  margin: 5% auto;
  pointer-events: none;
  -webkit-filter: drop-shadow(0 0 5px #000);
          filter: drop-shadow(0 0 5px #000);
}

#snackfilter{
  display: block;
  position: fixed;
  top: 0; 
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: rgba(136, 27, 204,0.1);
}

/* 98 DEADEND
------------------------------------------------------------ */

#bg-dead{
  z-index:2;
  background-color:#00ff00;
  background: 50% 50% / cover repeat-x url('../image/design/00/osmosis.gif');
  -webkit-animation: dead 5s infinite;
          animation: dead 5s infinite;
}

@-webkit-keyframes dead{
  0%{ -webkit-filter:saturate(0%) hue-rotate(0deg); filter:saturate(0%) hue-rotate(0deg); left:0%; }
  40%{ -webkit-filter:saturate(20%) hue-rotate(180deg); filter:saturate(20%) hue-rotate(180deg); left:1%; }
  80%{ -webkit-filter:saturate(20%) hue-rotate(-180deg); filter:saturate(20%) hue-rotate(-180deg); left:-1%; }
  100%{ -webkit-filter:saturate(20%) hue-rotate(-0deg); filter:saturate(20%) hue-rotate(-0deg); left:0%; }
}

@keyframes dead{
  0%{ -webkit-filter:saturate(0%) hue-rotate(0deg); filter:saturate(0%) hue-rotate(0deg); left:0%; }
  40%{ -webkit-filter:saturate(20%) hue-rotate(180deg); filter:saturate(20%) hue-rotate(180deg); left:1%; }
  80%{ -webkit-filter:saturate(20%) hue-rotate(-180deg); filter:saturate(20%) hue-rotate(-180deg); left:-1%; }
  100%{ -webkit-filter:saturate(20%) hue-rotate(-0deg); filter:saturate(20%) hue-rotate(-0deg); left:0%; }
}

#bg-dead-rainbow{
  z-index:3;
  opacity:0.2;
  margin: 0;
  padding: 0;
  background: 50% 50% / cover no-repeat url('../image/design/background/bg_rainbow.gif');
}

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

@media screen and (orientation: portrait) {
  	  
#backto{
  bottom: 10%;
  left: 2%;
  width: 50vw;
  height: auto;
  font-size: 6vw;
}
	  	  
#player{ 
  display: none;
}

#desktop{
  background: 50% 50% / 80% repeat url('../image/design/background/bg_logo.gif');
}

#desktop #monitor{
  background: 50% 50% / 100% no-repeat url('../image/design/00/monitor.png');
}

#desktop #gaming{
  width: 73vw;
  height: 48vw;
}

label[for="med"]{
  width: 50vw;
}

label > img{
  width: 50%;
  height: auto;
}

label > span{
  font-size: 4vw;
}

.sedative_back{
  margin-bottom:25%;
}

#sedatives{
  background: 50% 50% / 100% repeat url('../image/design/00/mmm.gif');
}

#pill{
  height: 100%;
  background: 50% 50% / 80% repeat url('../image/design/00/pill.gif');
}

.got_a{
  text-align: center;
}

.got_a span{
  font-size: 8vw; 
  white-space: normal;
  word-break: break-all;
}

body#sokkuri{
  background: 50% 50% / 40% repeat url(../image/design/00/cupid-background.gif);
}

#back{
  background: 50% 50% / 50% repeat url(../image/design/00/Background22.gif);
}

.slide {
  width: 80vw;
  height: 80vw;

}

.slide img {
  width: 80%;
  height: 80%;
}

.slide p{
  top: -4%;
}

#decoration{
  width: 100%;
  height: 60dvh;
  margin: 20% auto 0;
}

#decoration .flower{
  top: 60%;
  width: 26vw;
  height: 48vw;
}

#decoration .flower:nth-child(1){
  left: -2%;
}

#decoration .flower:nth-child(2){
  right: -2%;
}

#decoration .bird{
  position: absolute;
  top: 0;
  width: 40vw;
  height: 30vw;
  background: 50% 50% / 100% no-repeat url(../image/design/00/dove.gif);
}

#decoration .bird:nth-child(3){
  left: 0;
}

#decoration .bird:nth-child(4){
  right: 0;
}

#decoration .frame{
  position: absolute;
  bottom: -20%;
  left: 50%;
  width: 100%;
  height: 20vw;
}

#decoration .angel{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40vw;
  height: 37vw;
}

#decoration .angel:nth-child(7){
  bottom: 0;
  left: 0;
  width: 20vw;
  height: 17vw;
}

#decoration .hana:nth-child(8){
  right: 10%;
  width: 20vw;
  height: 20vw;
}

#decoration .hana:nth-child(9){
  top: -10%;
  left: 3%;
  width: 20vw;
  height: 20vw;
}

#decoration .hana:nth-child(10){
  top: -9%;
  right: 3%;
  width: 17vw;
  height: 17vw;
}

#decoration .heart{
  opacity: 0.4;
  position: absolute;
  background: 50% 50% / 100% no-repeat url(../image/design/00/heart21.gif);
}

#decoration .heart:nth-child(11){
  bottom: -5vw;
  width: 6vw;
  height: 6vw;
}

#decoration .heart:nth-child(12){
  bottom: 5vw;
}

#decoration .heart:nth-child(13){
  top: 10vw;
  width: 16vw;
  height: 16vw;
}

#decoration h1{
  margin: 10% 0 0;
  font-size: 7.5vw;
  line-height: 20vw;
}

#decoration h2{
  font-size: 9vw; 
}

#decoration h2#rick{
  bottom: 30vw;
  left: 5vw;
}

#decoration h2#sion{
  top: 45vw;
  right: 5vw;
}

#decoration h2#all{
  bottom: 1%;
  right: 2%;
  font-size: 10vw;
  line-height: 8vw;
}

#cyclops{
  opacity: 0.8;
  background: 50% 50% / 80% repeat url('../image/tg/cyclops.gif');
}

#bw_ufo{
  background: 50% 50% / 70% repeat url('../image/ufo_bw.gif');
}

#bg-beyond-double{
  background: 0% 0% / 150% repeat url(../image/design/background/bg_galaxy.gif);
}

#bg-beyond{
  background: 0% 0% / 200% repeat url(../image/design/background/bg_star.gif);
}

#beyond span{
  top: 30%;
  width:100%;
  color: #fff;
  font-size: 8vw;
}

#universe{
  width: 100%;
  height: 100vh;
}

.earth{
  width: 90%;
}

#circle{
  width: 200%;
  height: 100%;
}

#change{
  width: 65vw;
  height: 65vw;
}

#change .face{
  width: 100%;
}

#beyond #left1{
  top: 15%;
  left: 28%;
  width: 12%;
  height: 9%;
}

#beyond #left2{
  top: 5%;
  left: 12%;
  width: 9%;
  height: 15%;
}

#beyond #left3{
  top: 65%;
  left: 25%;
  width: 8%;
  height: 10%;
}

#beyond #left4{
  bottom: -35%;
  left: 0;
  width: 70%;
  height: 100%;
}

#beyond #right1{
  bottom: 17%;
  right: 26%;
  width: 7%;
  height: 8%;
}

#beyond #right2{
  bottom: 20%;
  right: 5%;
  width: 14%;
  height: 18%;
}

#beyond #right3{
  top: 6%;
  right: 20%;
  width: 7%;
  height: 8%;
}

#beyond #right4{
  top: -35%;
  right: 0;
  width: 70%;
  height: 100%;
}

#bg-snack{
  background: 50% 50% / 200% repeat url('../image/design/background/bg_star.gif') fixed;
}

#bg-snack-moon{
  background: 50% 50% / 80% repeat-y url('../image/design/03/moonrainbow.gif') fixed;
}

#invitation{
  width: 94%;
  margin: 0 auto;
  padding: 20% 0 50%;
  font-size: 2.7vw;
  line-height: 20vw;
}

#invitation > img:not(#snacktime){
  width: 30%;
}

#snacktime{
  width: 100%;
  margin: 5% auto;
}

}