/* <system section="theme" selected="reach"> */
@import "https://cdn.blog.st-hatena.com/css/theme/reach/reach.css";
/* </system> */

/* <system section="background" selected="bg23"> */
body{ background-color:#404751; background-image:url('https://cdn.blog.st-hatena.com/images/theme/backgrounds/theme23.png'); background-repeat:repeat; background-attachment:scroll; }
/* </system> */

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 15px 10px;
  background-color: #eee;
  text-align: left
}

h3 {
  background: #e6e6fa;
  box-shadow: 0px 0px 0px 5px #e6e6fa;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}

h5{
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
h5:before, h5:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
  height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
}
h5:before {left: 7px;}
h5:after {right: 7px;}

/* 目次のカスタマイズ */
.entry-content .table-of-contents {
 position:relative;
 border: 3px solid #707070; /* 枠の色はここを変更してください */
 background-color: #FFF; /* 背景カラーです */
 border-radius: 0px 0px 5px 5px;
 margin-top: 3em; /* 各々の環境で数字を調節してください */
}
.table-of-contents:after { /* 目次部分 */
 position: absolute;
 font-family: FontAwesome;
 content: '目次'; /* 表示名を変えたければここを変更 */
 background: #707070;
 color: #fff;
 right: 0%;
 left: 0%;
 bottom: 100%;
 border-radius: 5px 5px 0 0;
 padding: 2px 0 2px 0;
 margin: 0 -3px 0 -3px;/* -で指定しているところはborderと同じ数値にする */
 text-align:center;
 font-size: 1.2em;
 letter-spacing: 2em
 }
.table-of-contents li {
 font-size:0.9em;
 font-weight: bold;
 color:#333;
}
.table-of-contents a{
 color:#545454;
 padding:8px 0;/* 列の間隔 */
 display: block;
 text-decoration: none;
 transition-duration: 0s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
 padding-left: 0px; /* カーソル重ねた時に移動する距離 */
 transition-duration: 0.3s /* カーソルが移動する時間 */
}