/* ----------------------------------------------------
 SNSボタン（18 賢威7のソーシャルボタンをオシャレにカスタマイズする方法）
-----------------------------------------------------*/
.sns-wrap {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1%;
}

.sns {
    margin: 0 auto;
    list-style: none;
}

.sns a {
    text-decoration: none;
    font-size: 15px;
}

.sns {
    text-align: center;
}

.sns li {
    float: left;
    width: 32.3%;
    margin: 0 .5% 2%;
}

.sns a {
    position: relative;
    display: block;
    padding: 10px 5px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
}

.sns span,
.sns .fa {
    margin-right: .4em;
    color: #fff;
}

.sns li a:hover {
    -webkit-transform: translate3d(0px,5px,1px);
    -moz-transform: translate3d(0px,5px,1px);
    transform: translate3d(0px,5px,1px);
    box-shadow: none;
}

.sns .twitter a {
    background: #55acee;
    box-shadow: 0 5px 0 #0092ca;
}

.sns .facebook a {
    background: #315096;
    box-shadow: 0 5px 0 #2c4373;
}

.sns .hatebu a {
    background: #008fde;
    box-shadow: 0 5px 0 #016DA9;
}

.sns .pocket a {
    background: #f03e51;
    box-shadow: 0 5px 0 #c0392b;
}

.sns .feedly a {
    background: #87c040;
    box-shadow: 0 5px 0 #74a436;
}

@media only screen and ( max-width: 736px ) {
    .sns li {
        width: 32.3%;
        margin: 0 .5% 4%;
    }
    
    .sns a {
        font-size: 13px;
        padding: 6px 3px;
    }
}


/* ----------------------------------------------------
 追加CSSに挿入する文字列（14 アドセンス カスタマイズ 【レスポンシブのレクタングル）
-----------------------------------------------------*/
.responsive-unit{
max-width: 336px;
margin-left: auto;
margin-right: auto;
}


/* ----------------------------------------------------
 ASP広告（74 ASP広告 【サイドバー】）
-----------------------------------------------------*/
.item-box {
  padding: 10px;
  border:  1px solid #ccc;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ccc;
}
.item-box:after {
    content: '';
    display: block;
    clear: both;
}

.item-box img {
  max-width: 100%;
}

.item-box > div {
  float:  left;
  width: 50%;
}

.item-box-left {
  padding-left: 0;
}

.item-box-right {
  position: relative;
}

.item-box-right h4 {
    margin: 0;
    padding: 10px;
    background: #eee;
    border-radius: 5px;
}

.item-box-right h4 a {
      letter-spacing: 1px;
  font-size:  20px;
  font-weight: bold;
  color:  #666;
  margin-top: 0;
  padding-top: 0;
}

.item-box-right p {
  font-size: 14px;
}

.item-box-right .item-btn {
    font-size:18px;
    text-decoration:none;
    letter-spacing: 1px;
    display:block;
    text-align:center;
    padding: 10px 20px;
    color:#fff;
    background-color:#4CAF50;
    border-radius:5px;
    box-shadow:2px 2px 0 #2E7D32, 0px 3px rgba(0,0,0,0.5);
}

.item-box-right .item-btn a {
  text-decoration: none;
  color:  #fff;
  display: block;
}

.item-box-right .item-label {
  background-color:  #FBC02D;
  display: inline-block;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  position: absolute;
  top: -50px;
  right: -50px;
  transform: rotate(10deg);
  box-shadow: 1px 1px 5px #ccc; 
}

@media screen and (max-width: 720px) {
  .item-box > div {
    width: 100%;
  }
  .item-box-right {
    margin-top: 40px;
  }

  .item-box-right .item-label {
    right: -20px;
  }
}


/* ----------------------------------------------------
 wp-pagenaviスマホ対応（94 WordPressでページネーション（ページ送り）プラグイン）
-----------------------------------------------------*/
.wp-pagenavi {
width: 100%;
}
.wp-pagenavi a, .wp-pagenavi span {
display: inline-block;
}


/* ----------------------------------------------------
 ページャーデザイン（94 WordPressでページネーション（ページ送り）プラグイン）
-----------------------------------------------------*/
/*wp-pagenavi 15*/
.wp-pagenavi {
clear: both;
text-align:center;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #A044AD;
background-color: #E2BFEE;
border-right-style: solid;
border-bottom: 3px solid #A044AD;
padding: 8px 15px;
margin: 0 2px;
white-space: nowrap;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration: none;
border-right-color: #A044AD;
}
.wp-pagenavi a:hover{
color: #fff;
background-color: #A15AD3;
border-color: #A15AD3;
}
.wp-pagenavi span.current{
color: #fff;
background-color: #A15AD3;
border-bottom-color: #A044AD;
border-right-color: #A044AD;
}


/* ----------------------------------------------------
 改行（112 PCとスマホでそれぞれの改行表示を最適化する方法！）
-----------------------------------------------------*/
@media screen and (max-width: 480px) { 
br { display : none ; } 
}


/* ----------------------------------------------------
 テーブルの横スクロールのためのCSS（123 賢威以外の表テーブル設定 TinyMCE Advanced）
-----------------------------------------------------*/
table{ 
    width:100%;
}
.scroll{
    overflow: auto;
    white-space:nowrap;
}
.scroll::-webkit-scrollbar{
    height: 15px;
}
.scroll::-webkit-scrollbar-track{
    background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
    background: #bbb;
}


/* ----------------------------------------------------
記事の抜粋文を削除して記事一覧をコンパクトにまとめる（PC表示）
-----------------------------------------------------*/
@media (min-width:737px){
    /*カテゴリータグを日付と横並び*/
    .home .article-header::after,
    .category .article-header::after,
    .archive .article-header::after{
        content: "";
        display: block;
        clear: both;
    }
    .home .article-header .post-date,
    .category .article-header .post-date,
    .archive .article-header .post-date{
        float:left;
        margin-top: 20px;
    }
    .home .article-header .post-cat,
    .category .article-header .post-cat,
    .archive .article-header .post-cat{
        float:none;
        margin-left:100px;
        margin-top: 20px;
    }
    /*記事抜粋を非表示*/
    .home .article-body p,
    .category .article-body p,
    .archive .article-body p{
        display: none;
    }
    /*記事タイトルとサムネイルの位置替え*/
    .home .article-header,
    .category .article-header,
    .archive .article-header{
        float:right;
        padding-left: 2%;
        width: 75%;
        -mox-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .home .article-body,
    .category .article-body,
    .archive .article-body{
        float:left;
        width: 25%;
    }
    /*記事タイトルの調整*/
    .home .article-header .section-title,
    .category .article-header .section-title,
    .archive .article-header .section-title{
        margin: 0;
        padding: 5px 0;
        font-size: 1.2em;
        border-top: none;
    }
    .home .article-header .section-title a:hover,
    .category .article-header .section-title a:hover,
    .archive .article-header .section-title a:hover{
        text-decoration: none;
    }
}

@media (min-width:737px) and (max-width:834px){
    /*記事タイトルの調整*/
    .home .article-header .section-title,
    .category .article-header .section-title,
    .archive .article-header .section-title{
        font-size: 0.9em;
    }
    /*更新日時*/
    .home .article-header .post-date,
    .category .article-header .post-date,
    .archive .article-header .post-date{
        margin-top: 10px;
        font-size: 0.8em;
    }
    /*更新日時*/
    .home .article-header .post-cat,
    .category .article-header .post-cat,
    .archive .article-header .post-cat{
        margin-top: 10px;
        font-size: 0.7em;
    }
}
@media (min-width:835px) and (max-width:1100px){
    /*記事タイトルの調整*/
    .home .article-header .section-title,
    .category .article-header .section-title,
    .archive .article-header .section-title{
        font-size: 1em;
    }
    /*更新日時*/
    .home .article-header .post-date,
    .category .article-header .post-date,
    .archive .article-header .post-date{
        margin-top: 10px;
        font-size: 0.8em;
    }
    /*更新日時*/
    .home .article-header .post-cat,
    .category .article-header .post-cat,
    .archive .article-header .post-cat{
        margin-top: 10px;
        font-size: 0.8em;
    }
}


/* ----------------------------------------------------
記事の抜粋文を削除して記事一覧をコンパクトにまとめる（スマホ表示）
-----------------------------------------------------*/
@media (max-width:736px){
    /*記事抜粋を非表示*/
    .home .article-body p,
    .category .article-body p,
    .archive .article-body p{
        display: none;
    }
    /*カテゴリータグを日付と横並び*/
    .home .article-header::after,
    .category .article-header::after,
    .archive .article-header::after{
        content: "";
        display: block;
        clear: both;
    }
    .home .article-header .post-date,
    .category .article-header .post-date,
    .archive .article-header .post-date{
        float:left;
    }
    .home .article-header .post-cat,
    .category .article-header .post-cat,
    .archive .article-header .post-cat{
        float:none;
        margin-left:135px;
    }
}