header {
  background-color: aqua;
}
/*レイアウト*/
#leftSide{
  float:left;
  width: 25%;
}
main{
  float: right;
  width: 75%;
}
footer{
  clear: both;
}


#mainTitle {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

.subTitle {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}
.subTitle:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

/* === ↓リストcss↓ === */
/* === ソートボタンを表示するエリア ============== */
.tsImgArea{
  line-height: 1;
}
/* === ソートボタン ============================== */
.tsImg{
  display    : inline-block;
  width      : 8px;
  height     : 6px;
  background : #eee;
  border     : 1px solid #777;
  margin     : 1px 3px;
  padding    : 3px;
  cursor     : pointer;
}
/* === ソートボタン（カーソルオーバー時）========= */
.tsImg:hover{
  background : #FFD700;
}
/* === ソートボタン内の三角の色（SVG）============ */
.tsImg path{
  fill       : #777;
}
 
 
 /* --- （参考）テーブル全体のスタイル指定 ------- */
#puzzleList {
  width          : 50%;
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
}
 /* --- ヘッダーのスタイル指定 ------------------- */
#puzzleList th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : 6px 5px;          /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  background    : #99ccff;           /* 背景色     */
  white-space   : nowrap;
}
 /* --- 明細のスタイル指定 ----------------------- */
#puzzleList td {
  text-align    : center;            /* 文字位置   */
  padding       : 6px 5px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  white-space   : nowrap;
}
.shortWid td:nth-child(2) {
  width: auto;
}
/* === ↑リストcss↑ === */