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

@font-face {
  font-family: 'Monoton';
  src: url(Monoton-Regular.ttf) format("truetype");
  font-display: block;
}

body {
  display: block;
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: 50% 50% / 50% repeat fixed url(../../image/design/background/bg_noise.gif) #000;
  font-family: 'arial';
}

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

::-moz-selection { color: #00f01c; background: #000; }

::selection { color: #00f01c; background: #000; }

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

::-webkit-scrollbar {
  width: .8vw;
}

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

::-webkit-scrollbar-thumb {
  background: #00f01c;
  border: solid .2vw #000;
  border-radius: 20vw;
}

/* BORDER 
------------------------------------------------------------ */

hr {
  clear: both;
  position: relative;
  width: 100%;
  height: .35vw;
  border: none;
  background: #000;
  box-shadow: 0 .2vw .01vw rgba(255,255,255,0.8);
}

/* TEXT DECORATION 
------------------------------------------------------------ */

.big {
  padding: 0 .5%;
  font-size: 1.3vw;
}

.colored {
  color: #fff;
}

.highlighted {
  padding: .5% 0;
  background: #000; 
  color: #00f01c; 
  font-weight: bold;
  text-shadow: none;
}

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

#wrap {
  opacity: 0.95;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  background: 50% 50% / 5vw 50vw repeat-x fixed radial-gradient(rgba(83,255,0,1) 1.5vw, transparent 1.55vw) rgba(0,0,0,0.9);
  background: 50% 50% / 10vw 10vw repeat fixed radial-gradient(rgba(255,255,255,0.7) 3.5vw, transparent 3.6vw) rgba(0,0,0,0.9);
}

/* INBOX
------------------------------------------------------------ */

#box {
  position: relative;
  z-index: 2;
  width: 40%;
  height: auto;
  margin: 0 auto;
  padding: .5%;
  border-right: solid .3vw rgba(255,255,255,0.8);
  border-left: solid .3vw rgba(255,255,255,0.8);
  background-color: #00f01c;
}

/* INBOX > TITLE
------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  z-index: 4;
  margin: 0;
  padding: 0;
  background: #000;
  background-image:  repeating-linear-gradient(45deg, #00f01c 25%, transparent 25%, transparent 75%, #00f01c 75%, #00f01c), repeating-linear-gradient(45deg, #00f01c 25%, #000000 25%, #000000 75%, #00f01c 75%, #00f01c);
  background-position: 0 0, 1.9vw 1.9vw;
  background-size: 3.7vw 3.7vw;
  color: #fff;
  font-weight: 500;
  font-size: 5vw;
  font-family: 'Monoton';
  line-height: 4.2vw;
  text-shadow    : 
       2px  2px 0px #000000,
      -2px  2px 0px #000000,
       2px -2px 0px #000000,
      -2px -2px 0px #000000,
       2px  0px 0px #000000,
       0px  2px 0px #000000,
      -2px  0px 0px #000000,
       0px -2px 0px #000000; 
  text-align: center;
  box-shadow: 0 .2vw .01vw rgba(255,255,255,0.8);
}

h2, h3, h4, h5, h6 {
  font-size: 3.3vw;
  text-align: left;
}

/* HEADER
------------------------------------------------------------ */

header {
  display: flex;
  z-index: 3;
  width: 100%;
  height: 20vw;
  margin: 1% 0;
  background: #000;
}

header > p {
  position: relative;
  width: 33%;
  height: 94%;
  border: solid .2vw #00f01c;
}

header > p:nth-child(1) {
  margin: 1% 0 0 1%;
  background: 70% 20% / 170% no-repeat url(002.gif); 
}

header > p:nth-child(2) {
  margin: 1% 1%;
  background: 52% 10% / 160% no-repeat url(003.gif);  
}

header > p:nth-child(3) {
  margin: 1% 1% 0 0;  
  background: 30% 30% / 170% no-repeat url(001.gif);  
}

#spoiler {
  width: 100%;
  height: .5vw;
  margin: 0 0 2%;
  background: #000;
}

#spoiler em {
  padding: 0 1% 0 0;
  background: #000;
  color: #00f01c;
  font-size: 1.6vw;
  font-family: 'Monoton';
  line-height: 1vw;
}

/* ALL DESC ITEMS
------------------------------------------------------------ */

div.desc {
  display: block;
  position: relative;
  z-index: 4;
  width: 98%;
  margin: 1% 0;
  padding: 1%;
}

div.desc > span {
  position: relative;
  z-index: 10;
  font-size: 1vw;
  line-height: 2vw;
  letter-spacing: -0.05em;
}

/* INTRODUCE
------------------------------------------------------------ */

h2#intro + div.desc {
  background: #000;
}

h2#intro + div.desc > p {
  display: inline-block;
  width: 14vw;
  height: 10vw;
  margin: 1% 1% .5%;
  border: solid .3vw #fff; 
  object-fit: cover;
}

h2#intro + div.desc > p:first-child {
  float: left;
  background: 50% 50% / cover no-repeat url(004.gif) #00f01c;
}

h2#intro + div.desc > p:nth-child(3) {
  float: right;
  background: 50% 50% / cover no-repeat url(005.gif) #00f01c;
}


h2#intro + div.desc > p:nth-child(5) {
  float: left;
  background: 50% 50% / cover no-repeat url(006.gif) #00f01c;
}

h2#intro + div.desc > span {
  color: #00f01c;
  text-shadow    : 
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000;
}

/* OP IMG
------------------------------------------------------------ */

div.desc#op {
  width: 98%;
  height: 23vw;
  background: 50% 50% / 90% no-repeat url(015.gif) #000;
}

/* HENSHIN
------------------------------------------------------------ */

h2#henshin + div.desc > span {
  text-shadow    : 
       1px  1px 0px #00f01c,
      -1px  1px 0px #00f01c,
       1px -1px 0px #00f01c,
      -1px -1px 0px #00f01c,
       1px  0px 0px #00f01c,
       0px  1px 0px #00f01c,
      -1px  0px 0px #00f01c,
       0px -1px 0px #00f01c; 
}

h2#henshin + div.desc > span:nth-child(3) {
  display: inline-block;
  width: 80%;
  margin: 0;
  padding: 0 0 4%;
  border-bottom: dotted .3vw #000;
}

h2#henshin + div.desc > span:last-child {
  display: inline-block;
  width: 80%;
  margin: 4% 0 0 20%;
}

h2#henshin + div.desc > span img {
  width: 25%;
  margin: 0 1% 0 -5%;
  filter: drop-shadow( .2vw .8vw .01vw #000 );
} 

h2#henshin + div.desc > p {
  width: 96.5%;
  height: 22vw;
  margin: 0 0 0 -1%;
  border: solid 1vw #000;
  background: 50% 50% / cover no-repeat url(007.gif) #000;
}

#green {
  position: absolute;
  top: 41%;
  right: -14%;
  width: 12vw;
  height: 18vw;
  margin: 0;
  border: solid .8vw #000;
  background: 46% 80% / cover no-repeat url(008.gif) #00f01c;
  text-align: center;
  box-shadow: 0 0 .7vw #00f01c;
}

#birca {
  position: absolute;
  bottom: 2%;
  left: -19%;
  width: 17vw;
  height: 17vw;
  margin: 0;
  border: solid .6vw #000;
  border-radius: 80%;
  background: 46% 80% / 230% no-repeat url(birca.gif) #00f01c;
  text-align: center;
  box-shadow: 0 0 .7vw #00f01c;
}

#birca > span {
  position: absolute;
  top: 5%;
  left: -10%;
  width: 65%;
  padding: 0 20%;
  transform: rotate(-10deg);
  background: #000;
  color: #00f01c;
  font-weight: 500;
  font-size: 2.5vw;
  font-family: 'Monoton';
}

/* CROSS DRESS
------------------------------------------------------------ */

h3#crossdress + div.desc > span {
  display: block;
}

center {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}

center p {
  display: inline-block;
  width: 49.5%;
  height: 15vw;
  margin: 1% 0 0;
  background: 50% 50% / cover no-repeat #000;
  text-align: center;
}

center p:nth-child(odd) {
  margin: 1% 1% 0 0;
}

center p:nth-child(1) {
  background: 50% 50% / cover no-repeat url(009.gif) #000;
}

center p:nth-child(2) {
  background-image: url(010.gif);
}

center p:nth-child(3) {
  background-image: url(011.gif);
}

center p:nth-child(4) {
  background: 100% 50% / 150% no-repeat url(012.gif) #000;
}

center p#gunpei {
  display: block;
  width: 100%;
  height: 25vw;
  margin: 1% 0 0;
  background: 22% 40% / 500% no-repeat url(010.gif) #000;
}

center sub {
  display: block;
  width: 100%;
  background: #000;
  color: #00f01c;
  font-size: 1vw;
}

center p#gunpei > sub {
  font-size: 4vw;
}

#james {
  width: 25%;
  border: solid .5vw #000;
}

/* ENJIN SOUL
------------------------------------------------------------ */

h4#engine-soul + div.desc {
  background: #000;
  color: #00f01c; 
}

h4#engine-soul + div.desc > iframe {
  display: block;
  width: 80%;
  height: 20vw;
  margin: 2% auto;
}

/* JACKET
------------------------------------------------------------ */

h5#jacket + div.desc > img {
  display: inline-block;
  width: 50%;
  margin: 0;
  filter: grayscale(20%) saturate(250%);
}

h5#jacket + div.desc > span {
  margin: 1% 0 0;
  text-shadow    : 
       1px  1px 0px #00f01c,
      -1px  1px 0px #00f01c,
       1px -1px 0px #00f01c,
      -1px -1px 0px #00f01c,
       1px  0px 0px #00f01c,
       0px  1px 0px #00f01c,
      -1px  0px 0px #00f01c,
       0px -1px 0px #00f01c; 
}

/* COLLECTION
------------------------------------------------------------ */

table {
  width: 100%;
  height: auto;
  margin: 1% 0 0;
  padding: .5%;
  background: #000;
  font-family: 'Monoton';
  table-layout: fixed;
}

td {
  width: 32%;
  height: 17vw;
  margin: 1%;
  border: solid .1vw #000;
  background: 50% 50% / 98% 98% no-repeat #00f01c;
}

th {
  color: #00f01c;
  font-size: 1.2vw;
  font-weight: 100;
}

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

footer{
  display: block;
  width: 100%;
  height: auto;
  text-align: right;
}

footer a {
  display: block;
  padding: 0;
  color: #000;
  font-weight: 600; 
  font-size: 1vw;
}

footer a:hover {
  color: #00f01c;
  background: #000;
}

/* DECORATION
------------------------------------------------------------ */

.peace {
  position: absolute;
  z-index: 5;
  width: 9vw;
  height: 13vw;
}

#p-1 {
  top: -10.5vw;
  right: -7%;
  transform: rotate(20deg);
}

#p-1::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 2%;
  left: 2%;
  width: 9vw;
  height: 13vw;
  margin: 5% 0 0 5%;
  background: 50% 50% / contain no-repeat url(icon_peace.png);
  filter: brightness(0) saturate(100%) invert(53%) sepia(18%) saturate(6133%) hue-rotate(95deg) brightness(111%) contrast(122%) drop-shadow( -.2vw -.2vw .15vw #00f01c );
}

#p-1::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 9vw;
  height: 13vw;
  margin: 5% 0 0 5%;
  background: 50% 50% / contain no-repeat url(icon_peace.png);
}

#p-2 {
  bottom: -12vw;
  right: -8%;
  transform: rotate(20deg);
}

#p-2::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 2%;
  left: 2%;
  width: 6vw;
  height: 8vw;
  margin: 5% 0 0 5%;
  background: 50% 50% / contain no-repeat url(icon_peace.png);
  filter: brightness(0) saturate(100%) invert(53%) sepia(18%) saturate(6133%) hue-rotate(95deg) brightness(111%) contrast(122%) drop-shadow( -.4vw -.4vw .03vw #00f01c );
}

#p-2::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 6vw;
  height: 8vw;
  margin: 5% 0 0 5%;
  background: 50% 50% / contain no-repeat url(icon_peace.png);
}

.money {
  position: absolute;
  z-index: 5;
}

#m-1 {
  top: 0;
  right: -10%;
  width: 12vw;
  height: 12vw;
}

#m-1::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 12.5vw;
  height: 12.5vw;
  margin: 0;
  border-radius: 50%;
  background: 50% 50% / contain no-repeat url(icon_fryingmoney.png); 
  filter: brightness(0) saturate(100%);
}

#m-1::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 12vw;
  height: 12vw;
  margin: -3% 0 0 5%;
  border-radius: 50%;
  background: 50% 50% / contain no-repeat url(icon_fryingmoney.png); 
  filter: brightness(0) saturate(100%) invert(53%) sepia(18%) saturate(6133%) hue-rotate(95deg) brightness(111%) contrast(122%) drop-shadow( -.2vw -.2vw .03vw #fff );
}

#m-2 {
  bottom: 20vw;
  left: -14%;
  width: 11vw;
  height: 11vw;
  background: 50% 50% / contain no-repeat url(icon_fryingmoney.png); 
  filter: brightness(0) saturate(100%) invert(53%) sepia(18%) saturate(6133%) hue-rotate(95deg) brightness(111%) contrast(122%) drop-shadow( -.3vw -.3vw .03vw #000 );
}

.smile {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  background: 50% 50% / contain no-repeat #00f01c; 
  filter: drop-shadow( 0 0 .1vw #00f01c );
}

.smile span {
  position: absolute;
  bottom: 24%;
  left: -15%;
  width: 130%;
  background: #000;
  color: #00f01c;
  font-size: 1vw;
  line-height: .8vw;
  text-shadow    : 
       2px  2px 0px #000000,
      -2px  2px 0px #000000,
       2px -2px 0px #000000,
      -2px -2px 0px #000000,
       2px  0px 0px #000000,
       0px  2px 0px #000000,
      -2px  0px 0px #000000,
       0px -2px 0px #000000;   
  text-align: center;
}

#s-1 {
  top: 2.5vw;
  left: -6%;
  width: 8vw;
  height: 8vw;
  transform: rotate(-6deg);
  background-image: url(iconmonstr-smiley-2-240.png);
  filter: drop-shadow( -.4vw -.1vw .01vw #fff );
}

#s-2 {
  top: -6vw;
  right: 17%;
  width: 5vw;
  height: 5vw;
  transform: rotate(-10deg);
  background-image: url(icon_moneyface.png);
}

#s-3 {
  top: -6.5vw;
  right: -6%;
  width: 8vw;
  height: 8vw;
  transform: rotate(6deg);
  background-image: url(iconmonstr-smiley-12-240.png);
}

#s-4 {
  top: .8vw;
  left: -7%;
  width: 6vw;
  height: 6vw;
  transform: rotate(-17deg);
  background-image: url(icon_moneyface.png);
}

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

@media screen and (orientation: portrait) {

body {
  background: #000;
}

::-webkit-scrollbar {
  width: 1.6vw;
}

hr {
  clear: both;
  position: relative;
  width: 100%;
  height: 1vw;
  border: none;
  background: #000;
  box-shadow: 0 .5vw .01vw rgba(255,255,255,0.8);
}

.big {
  padding: 0 .5%;
  font-size: 4.8vw;
}

#wrap {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  background: 50% 50% / 3vw 3vw repeat fixed radial-gradient(rgba(255,255,255,0.7) .5vw, transparent .8vw) rgba(0,0,0,0.9);
}

#box {
  width: 80%;
  padding: 2%;
  border-right: solid 1vw rgba(255,255,255,0.8);
  border-left: solid 1vw rgba(255,255,255,0.8);
}

h1, h2, h3, h4, h5, h6 {
  padding: 2% 0;
  background-position: 0 0, 4vw 4vw;
  background-size: 8vw 8vw;
  font-size: 12vw;
  line-height: 8vw;
  box-shadow: 0 1vw .01vw rgba(255,255,255,0.8);
}

h2, h3, h4, h5, h6 {
  font-size: 7vw;
  text-align: left;
}

header {
  width: 120%;
  height: 40vw;
  margin: 3% 0 3% -12%;
  padding: 0 2%;
}

header > p {
  height: 90%;
  border: solid .4vw #00f01c;
}

header > p:nth-child(1) {
  margin: 2% 0 0 1%; 
}

header > p:nth-child(2) {
  margin: 2%;
}

header > p:nth-child(3) {
  margin: 2% 1% 0 0;  
}

#spoiler {
  width: 124%;
  height: 2vw;
  margin: 4% 0 6% -12%;
  text-align: center;
}

#spoiler em {
  font-size: 4.0vw;
  line-height: .1vw;
}

div.desc > span {
  font-size: 3vw;
  line-height: 6vw;
}

h2#intro + div.desc > p {
  float: none;
  width: 97%;
  height: 40vw;
  margin: 1%;
  border: solid .5vw #fff; 
}

h2#intro + div.desc > p:first-child {
  background: 50% 50% / 110% no-repeat url(004.gif) #00f01c;
}

h2#intro + div.desc > p:nth-child(3) {
  background: 50% 50% / 120% no-repeat url(005.gif) #00f01c;
}

h2#intro + div.desc > p:nth-child(5) {
  background: 50% 50% / cover no-repeat url(006.gif) #00f01c;
}

div.desc#op {
  height: 45vw;
}

h2#henshin + div.desc > span:nth-child(3) {
  width: 100%;
  border-bottom: dotted 1vw #000;
}

h2#henshin + div.desc > span:last-child {
  display: block;
  width: 100%;
  margin: 3% 0 0 0;
}

h2#henshin + div.desc > span img {
  width: 30%;
  margin: 0 1% 0 0;
} 

h2#henshin + div.desc > p {
  width: 100%;
  height: 40vw;
}

#green {
  display: none;
}

#birca {
  display: block;
  position: relative;
  left: 0;
  width: 98%;
  height: 45vw;
  margin: 3% 0 0;
  border: solid 1vw #000;
  border-radius: 0;
  background: 46% 70% / 170% no-repeat url(birca.gif) #00f01c;
}

#birca > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  transform: rotate(0deg);
  font-size: 6vw;
}

center {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}

center p {
  display: block;
  width: 100%;
  height: 45vw;
  margin: 1% 0 0;
}

center p:nth-child(odd) {
  margin: 1% 0 0;
}

center p#gunpei {
  display: block;
  width: 100%;
  height: 55vw;
  margin: 1% 0 0;
  background: 22% 40% / 500% no-repeat url(010.gif) #000;
}

center sub {
  font-size: 3vw;
}

center p#gunpei > sub {
  width: 115%;
  font-size: 8.2vw;
}

#james {
  width: 45%;
  border: solid 1vw #000;
}

h4#engine-soul + div.desc > iframe {
  height: 40vw;
}

table {
  margin: 3% 0 0;
}

td {
  height: 35vw;
  margin: 1%;
}

th {
  font-size: 3vw;
}

footer a {
  padding: 1%;
  font-size: 3vw;
}

.peace {
  width: 19vw;
  height: 23vw;
}

#p-1 {
  top: -16vw;
  right: -10%;
}

#p-1::before {
  width: 19vw;
  height: 23vw;
}

#p-1::after {
  width: 19vw;
  height: 23vw;
}

#p-2 {
  bottom: -18vw;
  right: -12%;
}

#p-2::before {
  width: 16vw;
  height: 28vw;
}

#p-2::after {
  width: 16vw;
  height: 28vw;
}

.money {
  position: absolute;
  z-index: 5;
}

#m-1 {
  top: 6vw;
  right: -10%;
  width: 22vw;
  height: 22vw;
}

#m-1::before {
  width: 22.5vw;
  height: 22.5vw;
}

#m-1::after {
  width: 22vw;
  height: 22vw;
}

#m-2 {
  bottom: 42vw;
  left: -10%;
  width: 21vw;
  height: 21vw;
}

.smile span {
  font-size: 2vw;
  line-height: 1.8vw;
}

#s-1 {
  top: 8vw;
  left: -7%;
  width: 16vw;
  height: 16vw;
}

#s-2 {
  top: -10vw;
  right: 13%;
  width: 13vw;
  height: 13vw;
}

#s-3 {
  top: -11vw;
  right: -8%;
  width: 18vw;
  height: 18vw;
}

#s-4 {
  top: 3vw;
  left: -8%;
  width: 12vw;
  height: 12vw;
}

}