/* 02 SLAVA
------------------------------------------------------------ */

#contents.slava table{
  width: 90%;
  margin: 2% auto;
  border-collapse: collapse;  
  font-size: 1vw;
}

#contents.slava table img:not(table td#noristax a img){
  pointer-events: none;
}

#contents.slava tr, 
#contents.slava th, 
#contents.slava td:not(#me) {
  border: solid .3vw #000;
  vertical-align: top;
}

#contents.slava table th {
  width: 40%;
  margin: 0;
  padding: .5%;
  background: #54a27e;
  color: #000;
  font-size: 1.4vw;
  font-family: "Press", 'Press Start 2P', arial;
  text-align: left;
}

#contents.slava table td:not(#me) {
  padding: .5%;
  color: #54a27e;
  text-align: left;
}

#contents.slava table td#me {
  width: 35%;
  margin: 0;
  padding: 0;
  background: 50% 20% / 120% no-repeat url(../image/me/suits.gif);
  -webkit-filter: contrast(80%) grayscale(30%);
          filter: contrast(80%) grayscale(30%);
}

#contents.slava table td#fav, #contents.slava table td#quiz {
  margin: 0;
  padding: 0;
  font-size: 0;
}

#contents.slava table td#fav img {
  display: inline-block;
  width: 16.66%;
  height: 8vw;
  margin: 0;
  padding: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: saturate(30%) contrast(80%);
          filter: saturate(30%) contrast(80%);
}

td#noristax {
  font-size: 1.1vw;
}

td#noristax a img {
  width: 7.5vw;
  height: 2.5vw;
  margin: 1% 1% 0 0;
  border: solid .3vw #54a27e;
}

#contents.slava span.press {
  margin: 5% 0 0;
}

ul#staff {
  display: block;
  list-style-type: none;
  width: 88%;
  margin: 2% auto 1%;
  padding: 0;
}

ul#staff a {
  padding: 1% 0;
  background: rgba(84,162,126,0.2);
  color: #54a27e;
}

ul#staff a:hover {
  padding: .5%;
  background: rgba(84,162,126,1);
  color: #000;
}

ul#staff li {
  display: inline-block;
  position: relative;
  margin: .5% 0;
  color: #000;
  font-weight: bold;
  font-size: 1vw;
  font-family: "Press", 'Press Start 2P', arial;
  vertical-align: top;
}

ul#staff li:first-child {
  display: block;
  width: 100%;
  padding: .5% 0;
  background: #54a27e;
  font-size: 1.4vw;
}

ul#staff li:nth-child(2n) {
  width: 29%;
  padding: .5%;
  background: #54a27e;
}

ul#staff li:nth-child(odd):not(:first-child) {
  width: 67.8%;
  padding: .5% 0;
  color: #54a27e;
}

ul#staff li:nth-child(6) {
  height: 7.8vw;
}

ul#staff li:last-child {
  position: absolute;
  height: 7.8vw;
}

ul#staff li:last-child img {
  width: 14.8%;
  height: 7.5vw;
  margin: 0;
  padding: .5% 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  pointer-events: none;
  -webkit-filter: contrast(80%) grayscale(30%);
          filter: contrast(80%) grayscale(30%);
}


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

@media screen and (orientation: portrait) {

#contents.collection span:nth-child(3){
  margin: 10% 0 0;
}

#contents.collection table {
  margin: 0 0 10%;
}

#contents.collection th {
  font-size: 2vw;
  line-height: 3vw;
}

#contents.collection th > img {
  width: 4vw;
  margin: 0 5%;
}

#contents.collection td {
  width: 30%;
  height: 37vw;
}

#contents.collection a {
  font-size: 3.5vw; 
}

#contents.slava table{
  width: 96%;
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.slava tr, 
#contents.slava th, 
#contents.slava td:not(#me) {
  border: solid 1vw #000;
  vertical-align: top;
}

#contents.slava table th {
  font-size: 3.5vw;
  line-height: 4vw;
}

#contents.slava table td#me {
  background: 30% 0% / 140% no-repeat url(../image/me/suits.gif);
}

#contents.slava table td#fav img {
  height: 20vw;
  margin: 0 0 -2%;
}

#contents.slava p#noristax a img {
  width: 24vw;
  height: 9vw;
  border: solid 1vw #54a27e;
}

td#noristax {
  font-size: 2.8vw;
}

td#noristax a img {
  width: 24vw;
  height: 9vw;
  border: solid 1vw #54a27e;
}

#contents.slava span.press {
  margin: 5% 0 0;
}

ul#staff {
  display: block;
  list-style-type: none;
  width: 96%;
  margin: 2% auto 1%;
  font-size: 3.5vw;
  line-height: 4vw;
}

ul#staff a {
  padding: 1% 0;
  background: rgba(84,162,126,0.2);
  color: #54a27e;
}

ul#staff a:hover {
  padding: .5%;
  background: rgba(84,162,126,1);
  color: #000;
}

ul#staff li {
  display: inline-block;
  font-size: 2.8vw;
}

ul#staff li:first-child {
  font-size: 3.5vw;
  line-height: 4vw;
}

ul#staff li:nth-child(2n) {
  width: 30%;
  background: #54a27e;
}

ul#staff li:nth-child(odd):not(:first-child) {
  width: 66%;
}

ul#staff li:nth-child(6) {
  height: 40vw;
}

ul#staff li:last-child {
  height: 40vw;
  margin: .5% 0;
  padding: 0;
}

ul#staff li:last-child img {
  width: 32%;
  height: 20vw;
  padding: 0;
}

#contents.howto p:nth-child(2){
  margin: 2% 0 5%;
}

#contents.howto #before img {
  width: 40%;
}

#contents.howto #which {
  font-size: 5.2vw;
}

#contents.howto #select {
  font-size: 2.8vw;
}

#contents.howto .hair {
  width: 100%;
  font-size: 2.8vw;
}

#contents.howto .hair th, 
#contents.howto .hair td {
  padding: 1%;
  border: solid .2vw #54a27e;
  background: #000;
  color: #54a27e;
}

#contents.howto .hair th {
  font-size: 5vw;
}

#contents.howto .hair td.hair-chapter {
  height: auto;
  font-size: 2.8vw;
}

#contents.howto .hair td.hair-difficulty, 
#contents.howto td.hair-color {
  width: 50%;
}

#contents.howto .hair td.hair-picture {
  height: 60vw;
}

#contents.howto .hair td.hair-describe {
  width: 98%;
}

#contents.howto .hair td.hair-describe img {
  height: 20vw;
  margin: 0 .5% 0 0;
}

#contents.howto .hair td.hair-describe img.adore {
  height: 30vw;
}

#contents.howto footer {
  font-size: 2.3vw;
}

#contents.quick span:nth-child(n+3) {
  margin: 10% 0 0;
  font-size: 4vw;
}

#contents.quick th {
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.quick td {
  font-size: 2.8vw;
  line-height: 3vw;
}

.tri img{
  height: 20vw;
}

.tri:last-child{
  margin: 0 0 5%;
}

#contents.quick footer {
  text-align: center;
}

#contents.credits p#neo1 {
  margin: 2% 0 1%;
  text-align: center;
}

#contents.credits p#neo1 a {
  width: 20vw;
  height: 8vw;
  margin: 2%;
  border: solid .8vw #54a27e;
}

#contents.credits p#neo1 a:hover {
  border: solid .8vw transparent;
}

#contents.credits div#neo2 li {
  border: solid .3vw #54a27e;
}

#contents.credits div#neo2 a {
  margin: 1% 0;
  padding: 1% 0;
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.credits table#neo3 {
  width: 100%;
  margin: 2% 0 0;
  border: 0;
}

#contents.credits table#neo3 th {
  border-bottom: solid 1vw #000;
  font-size: 2.8vw;
}

#contents.credits table#neo3 td {
  border-bottom: solid 1vw #000;
}

#contents.credits table#neo3 a {
  border-bottom: solid .1vw #54a27e;
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.sion table#profile, 
#contents.sion table#history {
  width: 94%;
  border: solid .3vw #54a27e;
  font-size: 2.6vw;
  line-height: 3vw;
}

#contents.sion table#profile:nth-child(2) {
  border: solid .3vw #54a27e;
}

#contents.sion table#profile:nth-child(6) {
  margin: 0 auto 5%;
}

#contents.sion table#profile th {
  padding: .5%;
  font-size: 3.5vw;
  line-height: 4vw;
}

#contents.sion table#profile td, 
#contents.sion table#history td {
  border: solid .3vw #54a27e;
}

#contents.sion table#profile td.b {
  display: block;
  width: 222%;
}

#contents.sion table#profile td.portfolio{
  display: block;
  width: 222%;
  height: 50vw;
  border: none;
  background: 50% 50% / 60% no-repeat #000;
}

#contents.sion table#history th {
  width: 50%;
  padding: 1%;
  font-size: 3.5vw;
  line-height: 4vw;
}

#contents.sion table#history td.past-image {
  width: 50%;
  height: 27vw;
}

#computer {
  width: 90%;
  height: 28vw;
}

#contents.sion #photowall {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
}

#contents.sion #photowall img {
  display: inline-block;
  width: 31%;
  height: 24vw;
}

#contents.sion .flexbox {
  position: relative;
}

#contents.sion .flexbox ul {
  display: inline-block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 2% auto;
  padding: 0;
}

#contents.sion .flexbox ul li, 
#contents.sion .flexbox ul li > a {
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.sion .flexbox ul li > a {
  -webkit-filter: drop-shadow(0 0 .8vw #54a27e);  
          filter: drop-shadow(0 0 .8vw #54a27e);
}

#contents.sion #fullbody {
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);  
  width: 55vw;
  height: 90%;
  -webkit-filter: hue-rotate(28deg) saturate(40%) contrast(80%) drop-shadow(0 0 .8vw #54a27e);
          filter: hue-rotate(28deg) saturate(40%) contrast(80%) drop-shadow(0 0 .8vw #54a27e);
}

#contents.sion .flexbox > span {
  z-index: 7;
  margin: 2% 0;
  font-size: 4vw;
  line-height: 5vw;
}

#contents.tr > #what img {
  width: 45%;
  margin: .5%;
  border: solid 1vw #54a27e;
}

#contents.tr > #synopsis {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#contents.tr > #synopsis img { 
  width: 48%;
  height: 32vw;
  border: solid .1vw #54a27e;
}

#contents.tr > #staffs{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#contents.tr > #staffs table {
  display: block;
  width: 100%;
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.tr > #staffs table th {
  width: 30%;
}

#contents.tr > #staffs table:last-child {
  margin: -1% 0 0;
}

#contents.tr iframe {
  display: inline-block;
  width: 48%;
  height: 30vw;
  margin: 1% 0;
  padding: .5%;
  border: solid .1vw #54a27e;
}

#contents.tr iframe:last-child {
  margin: 1% 0 0 1%;
}

#contents.archives span:not(.headline) {
  font-size: 5.2vw;
}

#contents.archives a > img {
  width: 98%;
  border: solid 1vw #54a27e;
}

#contents.archives p:nth-child(n+12) {
  width: 90%;
  margin: 10% auto;
  font-size: 2.8vw;
}

#contents.jacket th {
  font-size: 2.8vw;
}

#contents.jacket td {
  height: 60vw;
}

#contents.illust h4 {
  font-size: 2.3vw;
}

#contents.illust > span.illust-name {
  margin: 0 auto 10%;
  padding: 1% 0;
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.influence span:nth-child(n+2) {
  font-size: 5vw;
  line-height: 5vw;
}

#contents.influence p:nth-child(2) > img#dengeki {
  width: 35%;
  border: solid 1vw #54a27e;
}

.dengeki_tr {
  width: 25%;
  border: solid .3vw #54a27e;
}

#contents.influence span + table {
  margin: 2% auto 4%;
}

#contents.influence > table {
  width: 100%;
  margin: 4% auto;
}

#contents.influence > table th {
  font-size: 2.8vw;
}

#contents.influence > table td {
  padding: 2.5%;
  border: solid .3vw #54a27e;
  font-size: 2.8vw;
  line-height: 3vw;
}

#contents.influence > table th.slava-title {
  font-size: 3vw;
}

#contents.influence > table td.slava-comment {
  width: 80%;
}

#contents.influence > table img {
  width: 30%;
}

#proto {
  width: 40%;
}

#contents.oshi img {
  height: 54vw;
  margin: 0;
  border: solid 1vw #54a27e;
}



#contents.root p > img {
  width: 29.5%;
  height: 35vw;
  border: solid 1vw #21BC2B;
}

#contents.root table {
  width: 98%;
  border: solid .5vw #54a27e;
}

#contents.root th {
  padding: 1% 0;
  background: #54a27e;
  color: #000;
}

#contents.root th.root-head {
  font-size: 5vw;
}

#contents.root th:not(.root-head) {
  font-size: 2.8vw;
}

#contents.root td {
  height: 25vw;
  border: solid .5vw #54a27e;
  font-size: 2.8vw;
}

#contents.root ul {
  width: 80%;
  margin: 5% auto;
}

#contents.root li:nth-child(odd) {
  font-size: 4vw;
  border-bottom: solid .5vw #54a27e;
}

#contents.root li:nth-child(even) {
  margin: 2% 0 4%;
  font-size: 2.8vw;
}

}