HatenaSmartPhoneAll

<style type="text/css">
/*コラム枠*/
  .point,.column,.attention{
    position: relative;
    border: 1px dashed #1D3557;
    margin: 32px 16px;
    background-color: #e5e5e5;
    padding: 50px 20px 20px;
    font-size: 90%;
  }

  .point:before{
    font-family: "blogicon";
    content: "\f01a  POINT";
    position: absolute;
    left: 20px;
    top: 20px;
    line-height: 1em;
    font-size:140%;
    color: #1D3557;
  }

  .column:before{
    font-family: "blogicon";
    content: "\f024  Column";
    position: absolute;
    left: 20px;
    top: 20px;
    line-height: 1em;
    font-size:140%;
    color: #1D3557;
  }

  .attention:before{
    font-family: "blogicon";
    content: "\f041  Attention";
    position: absolute;
    left: 20px;
    top: 20px;
    line-height: 1em;
    font-size:150%;
    color: #1D3557;
  }

/*マーカー*/
  .markb {
    background: linear-gradient(transparent 30%, #87C8EF 30%);
    background: -moz-linear-gradient(transparent 30%, #87C8EF 30%);      /* Firefox用 */
    background: -webkit-linear-gradient(transparent 30%, #87C8EF 30%);   /* Safari用 */
    background: -ms-linear-gradient(transparent 30%, #87C8EF 30%);       /* IE用 */
    background: -o-linear-gradient(transparent 30%, #87C8EF 30%);        /* Opera用 */
    text-decoration: none;
  }
  strong {
    background: linear-gradient(transparent 30%, #FF847C 30%);
    background: -moz-linear-gradient(transparent 30%, #FF847C 30%);      /* Firefox用 */
    background: -webkit-linear-gradient(transparent 30%, #FF847C 30%);   /* Safari用 */
    background: -ms-linear-gradient(transparent 30%, #FF847C 30%);       /* IE用 */
    background: -o-linear-gradient(transparent 30%, #FF847C 30%);        /* Opera用 */
    text-decoration: none;
    font-weight: normal;
  }

/* 目次 */
  .table-of-contents{
    margin:24px 0;
    background: #e5e5e5;
    border: 1px solid #ccc;
    width: 70%;
    padding: 2em;
    counter-reset: toc;
    list-style-type: none;
    font-size: 0.9em;
}

  .table-of-contents:before{
    margin: 0 auto;
    content: "目次";
    font-size: 1.2em;
  }

  .table-of-contents ul{
    margin-bottom: 0.5em;
    counter-reset: toc;
    list-style-type: none;
  }

  .table-of-contents li:before {
    counter-increment: toc;
    content: counters(toc, "-") " ";
  }

  .table-of-contents li,
    .table-of-contents ul{
    padding: 0 0 0 1em;
  }

  .table-of-contents  h1:before {
    counter-increment: toc;
  }

/* 吹き出し */
  .balloon {
    overflow: hidden;
    margin: 16px 8px;
    font-size: 80%
  }

  .balloon-board-right{
    float:left;
    width:60%;
    margin: 0;
    padding: 0;
  }

  .balloon-icon-right {
    width: 100px;
    height: 100px;
    float:right;
    background: url("http://img.f.hatena.ne.jp/images/fotolife/h/hbpgb/20160518/20160518145026.png") no-repeat;
    background-position:center center;
    -moz-background-size:cover;
    background-size:cover;
    border-radius: 50px;
  }

  .balloon-serif-right{
    display:block;
    position:relative;
    padding: 16px;
    min-height:80px;
    background-color: #e5e5e5;
    border-radius: 10px;
    border: 2px solid #ccc;
  }

  .balloon-serif-right:after,.balloon-serif-right:before{
    position:absolute;
    top: 20px;
    right: -32px;
    content: "";
  }

  .balloon-serif-right:after {
    border: 19px solid transparent;
    border-left-color: #e5e5e5;
    margin-top: -3px;
  }

  .balloon-serif-right:before {
    border: 16px solid transparent;
    border-left-color: #ccc;
  }

  .balloon-board-left{
    float:none;
    width:95%;
    margin: 0;
    margin-left:3%;
    padding: 0;
  }

  .balloon-icon-left {
    width: 100px;
    height: 100px;
    float:left;
    background: url("http://img.f.hatena.ne.jp/images/fotolife/h/hbpgb/20160518/20160518145026.png") no-repeat;
    background-position:center center;
    -moz-background-size:cover;
    background-size:cover;
    border-radius: 50px;
    text-align: center;
  }

  .balloon-serif-left{
    position:relative;
    display:block;
    margin: 0;
    padding: 16px;
    margin-left:106px;
    min-height:100px;
    background-color: #e5e5e5;
    border-radius: 10px;
    border: 2px solid #ccc;
  }

  .balloon-serif-left:after,.balloon-serif-left:before{
    position:absolute;
    top: 20px;
    left: -32px;
    content: "";
  }

  .balloon-serif-left:after {
    border: 19px solid transparent;
    border-right-color: #e5e5e5;
    margin-top: -3px;
  }

  .balloon-serif-left:before {
    border: 16px solid transparent;
    border-right-color: #ccc;
  }

/*カエレバ・ヨメレバ*/
  .kaerebalink-box{
    display: block;
    border: 1px solid #1D3557;
    padding: 8px;
    margin: 16px 0;
  }

  .kaerebalink-image{
    padding: 8px;
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
}

  .kaerebalink-info{
    display: block;
    padding: 0;
    }

  .kaerebalink-name{
    padding: 10px;
    font-size: 90%;
    }


.kaerebalink-powered-date{
  padding: 0;
  font-size: 90%;
}

.kaerebalink-detail{
  padding: 10px;
  font-size: 90%;
}

.kaerebalink-link1{
  display: table;
  width: 100%;
  clear: both;
  font-size: 13px;
}

.kaerebalink-link1 a{
  display: block;
  float: left;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  transition: all .7s ease;
  padding: 8px;
}

.kaerebalink-link1 .shoplinkamazon a{
  background: #232F3E;
}
.kaerebalink-link1 .shoplinkrakuten a{
  background: #bf3939;
}
.kaerebalink-link1 .shoplinkyahoo a{
  background: #45818E;
}
.shoplinkyahoo img{display:none !important;}

.kaerebalink-link1 .shoplinkamazon a:hover{
  background: #4F5965;
}
.kaerebalink-link1 .shoplinkrakuten a:hover{
  background: #CC6161;
}
.kaerebalink-link1 .shoplinkyahoo a:hover{
  background: #6A9AA5;
}

.kaerebalink-link1 a{
  color: #F0F8FF;
}
.kaerebalink-link1 a:visited{
  color: #F0F8FF;
}

.booklink-box{
  display: block;
  border: 1px solid #1D3557;
  padding: 8px;
  margin: 16px 0;
}

.booklink-image{
  padding: 8px;
  display: block;
  float: none;
  margin: 0 auto;
  text-align: center;
}

.booklink-info{
  display: block;
  padding: 0;

}

.booklink-name{
  padding: 10px;
  font-size: 90%;
}

.booklink-powered-date{
  font-size: 90%;
}

.booklink-detail{
  padding: 10px;
  font-size: 90%;
}

.booklink-link2{
  display: table;
  width: 100%;
  clear: both;
}

.booklink-link2 a{
  display: block;
  float: left;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  transition: all .7s ease;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
}

.booklink-box .shoplinkamazon a{
  background: #232F3E;
}
.booklink-box .shoplinkrakuten a{
  background: #bf3939;
}
.booklink-box .shoplinkkindle a{
  background: #45818E;
}
.booklink-box .shoplinkseven a{
  background: #FD7D33;
}
.booklink-box .shoplinkseven img{display:none !important;}

.booklink-box .shoplinkamazon a:hover{
  background: #4F5965;
}
.booklink-box a:hover{
  background: #CC6161;
}
.booklink-box .shoplinkseven a:hover{
  background: #FD8E4E;
}
.booklink-box .shoplinkkindle a:hover{
  background: #6A9AA5;
}

.booklink-link2 a:visited{
  color: #F0F8FF;
}
</style>