/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}

/*---------------------------------
囲み枠
--------------------------------*/
.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

/*---------------------------------
見出し
--------------------------------*/
 
.article h2 {           
 font-size: 23px;      /*---文字サイズ---*/
 line-height: 28px;    /*---行の高さ---*/
 padding: 15px 10px 12px 17px;  /*---内側の余白---*/
 background: #0066CC;   /*---背景の色---*/
 color: #fff;           /*---文字色---*/
 margin: 25px 0;        /*---外側の余白---*/
 position: relative;
 border-radius: 4px;
}
 
 
.article h3{
 font-size: 21px;
 padding: px 17px;
 border-bottom:5px solid #0066CC;
}
 
.article h4 {
 font-size: 18px;
 border-left: 6px solid #0066CC;
 border-bottom: 0px;
 padding: 5px 0 5px 12px;
}



/*---------------------------------
チェックマーク
--------------------------------*/
ul.check{
    list-style:none;
    padding:0;
    margin:0;
}

ul.check li{
   padding-left:1.5em;
   position:relative;
   margin-bottom:0.5em;
}

ul.check li:before{
    position:absolute;
    top:0.2em;
    left:0;
    content:"";
    list-style:none;
    display:block;
    height:0.3em;
    width:0.8em;
    border-color:#000066;
    border-width:0.2em;
    border-style:none none solid solid;
    transform: rotate(-45deg);
}


/* 蛍光ペン（黄） */
strong {
background: linear-gradient(transparent 40%, #ffff00 40%);
}









/*メニューバーの文字設定*/
#navi ul li a{
font-size:14px;
display: block;
padding: .3em .7em;
color:#fff;
text-decoration:none;
z-index:99;
}
/*カーソルが乗っているときの色設定*/
#navi ul li a:hover{
background-color:#87ceeb;
}


/* サイドバーの人気記事一覧レイアウト */
ul.wpp-list li {
  border-bottom: 1px dashed #a8d3ff;
  counter-increment: wpp-count;
  position: relative;
}
ul.wpp-list li:before {
  display: block;
  padding: 1px 11px;
  color: #fff;
  background-color: #333;
  content: counter(wpp-count);
  position: absolute;
  opacity: 1;
  z-index: 10000;
  border-radius: 6px;
  top: 6px;
  left: 6px;
}
ul.wpp-list li:last-child {
  border-bottom: none;
}
ul.wpp-list li:nth-child(1):before{
  background-color: #FBCC54;
}
ul.wpp-list li:nth-child(2):before{
  background-color: #B7BFC1;
}
ul.wpp-list li:nth-child(3):before{
  background-color: #D47B16;
}
ul.wpp-list li img {
  margin: 5px 10px 5px 5px;
  padding: 3px;
  border: 1px solid #ddd;
}
ul.wpp-list li a.wpp-post-title {
  display: block;
  font-size: 15px;
  padding: 12px;
  text-decoration: none;
  color: #333;
}

/*引用のスタイル*/

/*全体*/
blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;/*内側の余白*/
    box-sizing: border-box;
    font-style: italic;/*斜体に*/
    border: solid 2px #3ca5d4;/*外枠*/
    color: #464646;/*外枠の色*/
    background-color: #fff;/*背景色*/
}

/*左上アイコン*/
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 20px;/*引用アイコンの位置*/
    left: 15px;/*引用アイコンの位置*/
    vertical-align: middle;
    content: "\f10d";/*アイコンのユニコード*/
    font-family: FontAwesome;/*アイコンフォント*/
    color: #3ca5d4;/*アイコンの色*/
    font-size: 25px;/*アイコンの大きさ*/
    line-height: 1;
}

/*内側の文章*/
blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

/*引用元*/
blockquote cite {
    display: block;
    text-align: right;/*右寄せ*/
    color: #888888;/*文字色*/
    font-size: 0.9em;/*文字サイズ*/
    margin-bottom: 10px;
    margin-right: 40px;
}

/*右下アイコン*/
blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 20px;
    right: 15px;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    color: #3ca5d4;
    font-size: 25px;
    line-height: 1;
}

/* 記事日付部分の背景色 */
.post-meta{
  background-color:#ffffff;
}

/*サイドメニュー見出し*/
#sidebar h3 {
line-height: 18px;    /*---行の高さ---*/
 padding: 15px 10px 12px 17px;  /*---内側の余白---*/
 background: #0066CC;   /*---背景の色---*/
 color: #fff;           /*---文字色---*/
 margin: 25px 0;        /*---外側の余白---*/
 position: relative;
 border-radius: 4px;
}

/* 関連記事の見出しの装飾 */
#related-entries h2{
line-height: 18px;    /*---行の高さ---*/
 padding: 15px 10px 12px 17px;  /*---内側の余白---*/
 background: #0066CC;   /*---背景の色---*/
 color: #fff;           /*---文字色---*/
 margin: 25px 0;        /*---外側の余白---*/
 position: relative;
 border-radius: 4px;
}

/* 記事と記事の間に線を引く */
#main .entry {
border-bottom: 1px dashed #a8d3ff;
padding-bottom: 3px;
}

/* 関連記事と関連記事の間に線を引く */
#main .related-entry {
border-bottom: 1px dashed #a8d3ff;
padding-bottom: 3px;
}

/* 「記事を読む」ボタンの装飾 */
.entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#CEE6FF;
 border:1px solid #CEE6FF;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#fff;
 background-color:#CEE6FF;
 border:1px solid #CEE6FF;
}

/* 関連記事の「記事を読む」ボタンの装飾 */
.related-entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#CEE6FF;
 border:1px solid #CEE6FF;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }
 
.related-entry-read a:hover{
 color:#fff;
 background-color:#CEE6FF;
 border:1px solid #CEE6FF;
}

/* 「記事を読む」ボタンを右へ移動 */
.entry-read {
  text-align: right;
  margin-right: 10px;
}

/* 関連記事の「記事を読む」ボタンを右へ移動 */
.related-entry-read {
  text-align: right;
  margin-right: 10px;
}

/* タイトル付き囲み枠 */
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}
/* 吹き出しボックス（ブルー） */
.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #e6f4ff;
    color: #5c98d4;
    font-weight: bold;
}
.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e6f4ff;
    width: 0;
    height: 0;
}
.box24 p {
    margin: 0; 
    padding: 0;
}

/* 考え事風の囲み枠　*/
.box23 {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 8px 15px;
    background: #e6f4ff;
    border-radius: 30px;
}
.box23:before{font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 15px;
    left: -40px;
    bottom: 0;
    color: #e6f4ff;
}
.box23:after{
    font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 23px;
    left: -23px;
    bottom: 0;
    color: #e6f4ff;
}
.box23 p {
    margin: 0; 
    padding: 0;
}

/* アプリーチ */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}



/* 遊び心のあるボタンCSS　*/
.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/*丸背景付き三角矢印アイコン　*/
.arrow2 {
    position: relative;
    display: inline-block;
    padding-left: 20px;
}
.arrow2:before {
    content: '';
    width: 14px;
    height: 14px;
    background: #00008b;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -7px;
}
.arrow2:after {
    content: '';
    width: 0;
    height: 0;
    border: solid 3px transparent;
    border-left: solid 5px #ffffff;
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -3px;
}

/*囲み枠：ラベルをつけたようなデザイン　*/
.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #2E82B8;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #2E82B8;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}