body{
  margin:0px;
}

div#header {
  /*position: relative;*/
  padding-top:10px;
  padding-left: 8px;
  /*left: 500;*/
  /*width: 100vw;*/
  z-index: 33;
  display:flex;
  flex-wrap:wrap;
  background-color: royalblue;
}

div#title {
}

div#nav{
  padding-left:1rem;
  color:yellow;

  font-family: "dnp-shuei-mgothic-std",sans-serif;
  font-style: normal;
  font-weight: 400;
}

div#nav p{
  line-height: 0.5em;
}

div#nav a{
  color:white;
  text-decoration: none;
}


div#chronology {
    margin-left:8px;
    z-index: 3;
    top: 0px;
}

.text_character_thumb{
  font-family: "dnp-shuei-mgothic-std",sans-serif;
  font-style: normal;
  font-weight: 400;
}

.text_event{
  font-family: "ryo-gothic-plusn",sans-serif;
  font-style: normal;
  font-weight: 200;
}

.popup_menu {
  background: ivory;
  padding: 30px;
  width:50%;
  max-width: 960px;
  margin: 20px auto;
  
  font-family: "source-han-sans-japanese",sans-serif;
  font-style: normal;
  font-weight: 300;
}

.popup_character {
  position: relative;
  background: ivory;
  margin: 15px auto;
  display:flex;
  
  font-family: "dnp-shuei-mgothic-std",sans-serif;
  font-style: normal;
  font-weight: 400;
}

@media screen and (max-height:699px){
  .popup_character{
    padding: 20px;
    width:75%;
    max-height:500px;
    min-width: 700px;
    max-width: 960px;
    font-size:0.8rem;
  }
}
@media screen and (min-height:700px){
  .popup_character{
    padding: 30px;
    width:50%;
    max-height:700px;
    min-width: 700px;
    /*max-width: 960px;*/
  }
}

div#charactersummary{
  width:50%;
  max-height:100%;
  display:flex;
  flex-flow: column nowrap;
}

div#namediv{
  position:relative;
  /*display:table-row;*/
  font-family: "source-han-sans-japanese",sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size:2rem;
}

div#namedisplay{
  position:absolute;
  bottom:0px;
  width:100%;
  z-index:3333;
  font-family: "dnp-shuei-shogomincho-std",sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.15em;
  white-spze:nowrap;
}

#namedisplayspan{
  display:inline-block;
}

div#namedisplay_en{
  position:absolute;
  top:-1.5rem;
  right:0px;
  z-index:3330;
  font-family: "gioviale",sans-serif;
  font-style: normal;
  font-weight: 400;
  color:darkgray;
}

div#characterimg{
  position:relative;
  /*border: 1px solid magenta;*/
  height:100%;
}

img#characterimgimg{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  margin:auto;
  max-width:100%;
  max-height:100%;
  z-index:3330;
  /*border: 1px solid blue;*/
  object-fit:scale-down;
  opacity:1;
}

img#characterimgimg_back{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  margin:auto;
  max-width:100%;
  max-height:100%;
  z-index:3333;
  object-fit:scale-down;
  opacity:0;
}


div#characterimgillustrator{
  padding-top:5px;
  line-height: 1em;
}

div#characterimgillustrator span{
  display:inline-block;
}

#illustratorname{
  font-weight:700;
}


#illustratorTw:before{
  content: 'Twitter:';
}
#illustratorTw a:before{
  content:"@";
}

#illustratorPixiv:before{
  content: 'pixiv:';
}


div#characterdetail{
  max-width:50%;
  padding-left:10px;
}

tr#charactertitle{
  font-family: "futura-pt-condensed",sans-serif;
  font-style: normal;
  font-weight: 700;
}

td.SOX{
  height:1.2em;
  width:4.2em;
  text-align: center;
}

td#SO1{
  background-color: dodgerblue;
  color:white;
}
td#SOFD{
  background-color: royalblue;
  color:white;
}
td#SO2{
  background-color: goldenrod;
  color:white;
}
td#SOSE{
  background-color: darkgoldenrod;
  color:white;
}
td#SOBS{
  background-color: saddlebrown;
  color:white;
}
td#SO3{
  background-color: royalblue;
  color:white;
}
td#SO4{
  background-color: goldenrod;
  color:white;
}
td#SO5{
  background-color: royalblue;
  color:white;
}
td#SOA{
  background-color: lightgoldenrodyellow;
  color:black;
}

table.charactertable{
  line-height: 1.2em;
}

table.charactertable th{
  white-space:nowrap;
  vertical-align: top;
}

#variation{
  margin-top:3em;
  padding-bottom: 5px;
  font-size:0.8rem;
  line-height:1.1em;
  overflow-x:scroll;
}
#variation table{
  border-collapse: collapse;
}
#variation table tr td{
  border-color:black;
  border-width: 1px;
  border-style:solid;
  padding:0 0.2em;
}

.variationtable_thumbdiv{
  position:relative;
}

@media screen and (max-height:699px){
  .variationtable_thumbdiv{
    width:6em;
    height:6em;
  }
  .variation_thumbimg{
    width:6em;
  }
}
@media screen and (min-height:700px){
  .variationtable_thumbdiv{
    width:8em;
    height:8em;
  }
  .variation_thumbimg{
    width:8em;
  }
}

.variationtable_thumbdivimg{
  position:absolute;
  top:0px;
  z-index:99990;
}

.variationtable_thumbdivtext{
  position:absolute;
  bottom:0px;
  z-index:99999;
  text-shadow: 1px 1px 2px white;
  font-family: "dnp-shuei-mgothic-std",sans-serif;
  font-style: normal;
  font-weight: 600;
}





.tooltip{
  display: block;
  position: absolute;
  z-index: 33333;
  width: auto;
  height: auto;
  padding: 0.3rem 0.5rem;
  color: #FFFFFF;
  font-size: 0.8rem;
  background: royalblue;
  border-radius: 0.5rem;
  white-space:nowrap;
}
.tooltip:after{
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5rem;
  bottom: -8px;
  border-bottom:8px solid transparent;
  border-left:8px solid royalblue;  
}

.tooltip_relation{
  display: block;
  position: absolute;
  z-index: 33333;
  width: auto;
  height: auto;
  padding: 0.3rem 0.5rem;
  color: #FFFFFF;
  font-size: 0.8rem;
  background: darkorange;
  border-radius: 0.5rem;
  white-space:nowrap;
  text-align: center;
}
.tooltip_relation:after{
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5rem;
  bottom: -8px;
  border-bottom:8px solid transparent;
  border-left:8px solid darkorange;  
}