<style type="text/css">
/* === ソートボタンを表示するエリア ============== */
.tsImgArea{
  line-height: 1;
}
/* === ソートボタン ============================== */
.tsImg{
  display    : inline-block;
  width      : 10px;
  height     : 10px;
  background : #eee;
  margin     : 1px 1px;
  cursor     : pointer;
}
/* === ソートボタン（カーソルオーバー時）========= */
.tsImg:hover{
  background : #FFD700;
}
/* === ソートボタン内の三角の色（SVG）============ */
.tsImg path{
  fill       : #777;
}
 
 /* --- （参考）テーブル全体のスタイル指定 ------- */
#sampleTable {
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 11pt;              /* 文字サイズ */
  margin         : 5px;
}
 /* --- ヘッダーのスタイル指定 ------------------- */
#sampleTable th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : auto 3px;          /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  white-space   : nowrap;
}
 /* --- 明細のスタイル指定 ----------------------- */
#sampleTable td {
  text-align    : center;            /* 文字位置   */
  padding       : 6px 5px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  white-space   : nowrap;
}
th{
   /* ヘッダ背景塗りつぶし */
   background: #eee;
   min-align: 4.0em;
 }
th,td {
  /* 枠線を1本線指定 */
   border: solid 1px;
   width:auto;
}
button{
  margin: 3px 0;
  border-radius:10px;
}
form{
  margin: 5px 5px;
}
footer{
  position: fixed;
  width: 100%;
  background-color: #C0C0C0;
  padding: 15px 0;
  bottom: 0; /*下に固定*/
}
.vertical {
  writing-mode: tb-lr;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  text-allign:center;
}

.heartslabyul {
  background-color:#FF3333;
}
.savanaclaw {
  background-color:#ffa500;
}
.octavinelle {
  background-color:#A4C6FF;
}
.scarabia {
  background-color:#A0522D;
}
.pomefiore {
  background-color:#C299FF;
}
.ignihyde {
  background-color:#77FFFF;
}
.diasomnia {
  background-color:#7cfc00;
}

td.hi{
  background-color:#FF6347;
}
td.ki{
  background-color:#93FFAB;
}
td.mizu{
  background-color:#BAD3FF;
}
td.mu{
  background-color:#DDDDDD;
}
table.table-to-export tr td{
   padding: 2px 10px;
}
.table-to-export {
  text-align: center;
}
table{
 /* 枠線を1本線指定 */
  border: solid #808080 1px;
  border-collapse:  collapse;
  white-space: nowrap;
    border-radius:30px;
}
.right {
    text-align: right;
}
.bottom  {
    caption-side: bottom;
}

#loading{
    display: none;
}
.outer{
    text-align: center;
}
.inner{
    padding: 0 0 0 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
p {
    margin: 1px;
}
span.hi{
    color:#FF0000;
}
span.ki{
    color:#008000;
    margin: 0 0 0 4px;
}
span.mizu{
    color:#0000FF;
    margin: 0 0 0 4px;
}
span.mu{
    color:#808080;
    margin: 0 0 0 4px;
}
span.nami{
  margin: 0;
  padding: 0;
    font-size: 5;
}
input.maxdigit{
    width:7%;
}
p.box {
   border-bottom: 1px solid gray;
}
body{
   width:825px
}
h3{
   margin:2px
}
.right{
     text-align    : right; 
}
select {
    margin: 0;
  padding: 0;
}
</style>