body{
  margin: 0;
  color: #555;
  font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","MS PGothic", arial, helvetica, sans-serif;
}
p{
  margin: 0;
}
h3{
  border-top:1px solid #008ed6;
  padding-top: 2%;
}
.st-Header{
  font-size: 36px;
  font-weight: bold;
}
.st-Header .free{
  background: #e5f9dd;
  border-left: solid 30px #99c942;
  padding: 10px 30px;
}
.st-Header .pro{
  background: #e8f5fb;
  border-left: solid 30px #199cd4;
  padding: 10px 30px;
}
.st-Header .studio{
  background: #fcd9e6;
  border-left: solid 30px #d84078;
  padding: 10px 30px;
}
.main-block{
  display: flex;
  width: 100%;
}
.st-SubMenu,
.st-MainContents{
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
  min-height: 800px;
}
.st-SubMenu{
  padding: 30px;
  min-width: 220px;
  background-color: #ccc;
  color: #333;
  display: inline-block;
}
.st-SubMenu a{
  color:#333; 
}
.st-MainContents{
  padding: 30px;
  width: auto;
  /*background-color: #eee;*/
}
/* table color */
div > table{
  border-collapse: collapse;
}
div > table th,
div > table td{
  border:1px solid #000;
  padding: 2px 10px;
}
table > thead {
  background-color: #1b9cd4;
  color: #fff
}
table > tbody {
  background-color: #fff;
}
table > tbody tr td:first-child {
  background-color: #1b9cd4;
  font-weight: bold;
  color: #fff
}
table > tbody tr:nth-child(even) {
  background: #e8f5fb;
}
table > tbody tr:nth-child(odd) {
  background: #fff;
}
code {
  display: block;
  padding: 10px;
  background-color: #efefef;
}


/* test markdown */
.markdown {
  width:100%;
  height:auto;
  overflow:scroll;
  background-color:#ffffff;
}
.marked table{
  border-collapse: #ff00ff;
}