@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 投稿タイトル */
.article h2{
	--stripe-color: #eee;/*ストライプの色*/
	color: #333;/*文字色*/
    background: linear-gradient(135deg, transparent 25%, var(--stripe-color) 26%, var(--stripe-color) 50%, transparent 51%, transparent 75%, var(--stripe-color) 76%, var(--stripe-color));
    background-size: 4px 4px;
}

.article h3 {
    border-left: 8px solid #eee;
	border-top: unset;
	border-bottom: unset;
	border-right: unset;
}


/* タブ見出しボックス */
.tab-caption-box-label{ 
	padding: 3px 10px; /*タブ内側余白*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
}

.tab-caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: 1px; /*上から(1px）移動*/
	border: 2px solid; /*ボックス線*/
	padding: 30px 24px; /*ボックス内側余白*/
	border-radius: 4px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
}


/* 投稿ページの目次 */
.toc-content{
	max-height: 300px; /* 縦幅固定 */
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 10px;
}


/* 人気記事ランキング表示 */
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 14px;  /*丸のサイズを小さく*/
	 height: 14px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
   　　　　 background: #d0d0d1;
	line-height: 14px;
}

.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
        padding: 0.2em 0 0 0.8em !important;  /*タイトル周りの余白を調整*/
	letter-spacing: 0.8px;  /*字間を広げる*/
}

.sidebar a.popular-entry-card-link.a-wrap{/*miniブログカード*/
        margin-bottom: 8px;  /*カード間の余白を広げる*/
}


/* snsリンクボタン */
.sidebar .sns-follow-buttons a {
	width: calc(100% / 5);
	background: none !important;
	border: 1px solid #606060;
	color: #606060;
	border-radius: 50px;
}
[class^="icon-"], [class*=" icon-"] {
    font-size: 70%;
}
.sidebar .sns-follow-buttons a:hover {
	color: #898881;
}


/* 投稿表示タイトル */
.related-entry-card-title, .entry-card-title {
    font-size: 14px;
    margin: 0 0 0.6em 0;
    line-height: 1.6;
}
.carousel-entry-card-title, .blogcard-snippet,
.widget-entry-cards:not(.large-thumb-on) .card-title{ 
    font-size: 14px;
    margin: 0 0 0.6em 0;
    line-height: 1.6; 
}
.carousel-entry-card-title, .blogcard-snippet{
	font-weight: bold;
}

/* 広告表記 */
.pr-label-s {
    margin-left: 29px;
    padding: 0px 5px;
	font-size: 80%;
}

/* カルーセル */
.carousel {
    max-width: 800px;
    margin: 0 auto;
}
.carousel-in {
    width: 100%;
}

/* 共通設定 */


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	/* TOP投稿画像 */
	    .wp-block-latest-posts__featured-image img {
        width: 100%;
    }
	.wp-block-latest-posts.is-grid li {
    margin: 0 1.25em 1.25em 0;
    width: calc(50% - 1.25em);
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}