/*
  Skin Name: 和（薄いブルー）
  Description: 和の色（薄いブルー）を基調にしたスキン
  Skin URI: https://sec.ayaito.net/cocoon/skin/14748/
  Author: 綾糸
  Author URI: https://sec.ayaito.net/
  Screenshot URI: https://sec.ayaito.net/wp-content/uploads/2020/02/14748_33.jpg
  Version: 0.0.1
  Priority: 
*/
/************************
ヘッダー・グローバルナビ
/************************/
.header-container .navi {
  background: #5d5855;
  border-top:2px solid #89817f;
  border-bottom:2px solid #b9cfd5;
}
/* .navi{
  border: 0;
  background-color: transparent;
}*/
#navi .navi-in a {
color: #fff;
}
#navi .navi-in>.menu-header .sub-menu {
background:#89817f;
}
#navi .navi-in a:hover {
background-color:#e6d09e;
}
.header-container{
color: #fff;
}
.header{
background-color:#e6d09e;
}
/************************
サイト名・キャッチフレーズ
/************************/
.site-name-text{
font-size:30px;
font-weight:bold;
color: #fff;
}
.site-name-text:hover{
color: #b9cfd5;
}
.tagline{
background-color:#5d5855;
}
/************************/
/* 見出し */
/************************/
.article h2{
padding: 10px;
margin: 5px 0;
border-top: solid 3px #89817f;
border-bottom: solid 3px #e6d09e;
font-size:22px;
}
.article h3{
color: #444;
font-size: 22px;
position: relative;
padding: 0 0 2px 32px;
border-top:none;
border-left:none;
border-bottom: 1px solid #888;
}
.article h3:before, .post h3:after{
content: "";
position: absolute;
bottom: 0;
width: 12px;
height: 12px;
border: 2px solid #e6d09e;
margin: auto;
}
.article h3:before{
top: -6px;
left: 0px;
}
.article h3:after{
top: 6px;
left: 6px;
}
.article h4 {
padding: 10px;
margin: 5px 0;
background: #e6d09e;
border-radius: 8px;
color:#fff;
width:100%;
}
.article h5{
border-bottom: 1px solid #aaa;
margin: 15px 0;
padding: 5px 0;
position: relative;
}
.article h5:before,
h5:after {
content: '';
border-right: 20px solid #fff;
border-top: 15px solid #aaa;
bottom: -15px;
position: absolute;
left: 25px;
}
.article h5:after {
border-top-color: #fff;
border-right-color: transparent;
bottom: -13px;
left: 26px;
}
/************************
/ サイドバー見出し（h3）
/ フッター見出し（h3）
/************************/
.sidebar h3,.footer-in h3 {
color: #000;
font-size: 20px;
line-height: 20px;
padding: 10px;
width:100%;
background: repeating-linear-gradient(45deg, #f0e2c4, #f0e2c4 10px, #e6d09e 10px, #e6d09e 20px);
}
/************************/
/*カテゴリーウィジェット*/
/************************/
#sidebar aside li.cat-item a {
font-size: 15px;
padding: 6px;
}
#sidebar aside li.cat-item a:hover {
color: #e6d09e; /*ホバー色*/
}
.cat-item a::before {
color: #e6d09e;
font-family: FontAwesome;
content: '\f0da'; /*親カテゴリーアイコン*/
margin-right: 6px;
}
.cat-item .children a::before {
content: '\f105'; /*子カテゴリーアイコン*/
}
#sidebar aside li.cat-item span { /*投稿数*/
float: right;
line-height: 1;
padding: 6px;
border-radius: 5px;
color: #fff;
background: #e6d09e;
}
/************************/
/*タグクラウド*/
/************************/
.widget_tag_cloud .tagcloud a{
border: solid 1px #e6d09e; /*枠線色*/
color:#97e1f7; /*文字色*/
margin-bottom:5px;
border-radius:5px; /*角丸め*/
flex: 0 1 auto; /*横幅いっぱいにならないように*/
}
.widget_tag_cloud .tagcloud a:hover{
background: radial-gradient(#506185, #e6d09e); /*ホバー背景色*/
color:#fff; /*ホバー文字色*/
}

/************************
/ SNSボタン
/************************/
#container .sns-buttons a{
background-color: #e6d09e;
color: #fff;
border: 0;
}

/************************
/ 目次デザイン 
/************************/
/* 目次全体枠 */
.toc{
border-top:5px solid; color:#5d5855;
padding: 20px;
}
/* 目次アイコン */
.toc-title:before {
width: 40px;
height: 40px;
content : "◆";
font-size:18px;
margin-right:8px;
color:#FFF;
background-color:#e6d09e;
border-radius: 50%;
padding:10px;
}
.toc-title:after {
background-color:#e6d09e;
border: solid 1px #5d5855;
color:#fff;
padding:2px;
}
/************************
/ ブログカード
/************************/
.a-wrap {background-color: #f0e2c4;}
.a-wrap .blogcard {border-color: #89817f;}

.a-wrap:hover {
background-color: #fbf7ef;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 0 8px #fbf7ef;
}

.ecb-entry-border .entry-card-wrap,
.recb-entry-border .related-entry-card-wrap,
.tagcloud a,
.author-box,
.comment-reply-link,
.ranking-item{
  border-color: #b9cfd5;
}
/************************
/ コメント送信ボタン
/************************/
input[type='submit'] {
padding: 10px;
margin: 5px 0;
background: #e6d09e;
border-radius: 8px;
color:#fff;
font-size:20px;
}
/************************/
/*テーブル*/
/************************/
table {
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border: 2px solid #ccc;
font-size: 16px;
}
table th {
padding: 10px;
font-weight: bold;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #97e1f7 !important;
background: #ebebeb;
font-size: 18px;
}
table tr:nth-child(even) {
background: #e1e1e1;
}
/************************
/ ページネーション
/************************/
/*次のページ　ボタン*/
.pagination-next-link {
background: #e6d09e;
color:#fff;
font-weight: bold;
border-radius: 8px;
}
.pagination-next-link a:hover{
background: #b9cfd5;
color:#ccc;
}
/*ページナンバーリンク*/
.page-numbers{
border-radius: 50%;
color:#89817f;
font-weight: bold;
}
.pagination a:hover {
background: #b9cfd5;
color:#ccc;
}
.pagination .current{
color: #fff;
background-color: #e6d09e;
border: 2px solid #89817f;
border-radius: 50%;
}
/************************/
/*フロントページインデックス
/ 2020/05/25 Ver2.1.6～.
/************************/
/***カテゴリーごと表示の「もっと見る」ボタン***/
.list-more-button:hover{
background: none #e6d09e;
color:#fff;}

/***タブ一覧表示の設定***/
/*選択タブの色*/
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
background: none #97e1f7;
border: none;
}
/*非選択タブの色*/
.index-tab-buttons .index-tab-button{
background-color: #cacaca;
}
.index-tab-button{
color:#333;
font-weight: 700;
}
/************************
/ レスポンシブ
/************************/

/*480px以下*/
@media screen and (max-width: 480px){
  .article h2{
    padding: .6em 0.2em;
  }
  .article h3{
    padding: .4em 1em;
  }
}