@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
*/

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

/************************************
** 非表示設定
************************************/
/*reCAPTHAマーク設定*/
.grecaptcha-badge { visibility: hidden; }
p.recapcha-text { font-size: 12px; text-align: center;}

/* カテゴリーラベルを非表示 */
.cat-label{
display: none;
}

/* フッター　ロゴを非表示 */
.footer-bottom-logo {
  display: none;
}

/************************************
** 固定ページ設定
************************************/
/*固定ページの日付を非表示*/
.page .date-tags {
display: none;
}

/*固定ページの更新日を非表示*/
.page .post-update{
  display: none;
}

/************************************
** 通知エリア　カスタマイズ
************************************/
/*　おしらせ　*/
.notice-area {
    font-size: 13px; /* 文字サイズ */
    padding: 3px 0;
    margin-bottom: 2em;
}

/************************************
** 投稿日アイコンのカスタマイズ
************************************/
/* 投稿日アイコンの変更 */
.date-tags .post-date::before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  font-weight: bold;
}
/* 更新日と投稿日の間のスラッシュを消す */
.date-tags > span:nth-last-child(2)::after {
  content: "";
}
/* 更新日アイコンの変更 */
.date-tags .post-update::before {
  font-family: "Font Awesome 5 Free";
  content: "\f021";
  font-weight: bold;
}
/* 投稿日アイコン（トップ）の変更 */
.fa-clock:before {
  content: "\f303";
  font-weight: bold;
}
/* 更新日アイコン（トップ）の変更 */
.fa-history:before {
  content: "\f021";
  font-weight: bold;
}


/************************************
** 目次
************************************/
.toc {
	width: 80%;	
    margin: 3em auto 1em;
    padding: 1em 1.6em 1.1em;
    font-size: 0.9em;
    line-height: 1.8;
    border: 1.3px solid #f4f4f4;
    border-radius: 5px;
}
/** H3以下のタイトルナンバリング消去 **/
.article .toc-list > li li {
  list-style: none;
}
.sidebar .toc .toc-list > li li {
  list-style: none;
}

/************************************
** 景品表示法対応
************************************/
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: solid 1px #dcdcdc; /* 上の点線 */
    border-bottom: solid 1px #dcdcdc; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #555; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #fff;
    padding: 3px 0;
    margin-bottom: 2em;
}

/************************************
** 景品表示下　カスタマイズ
************************************/
/*景品表示下の余白を広げる*/
.pr-label-l{
	margin-bottom: 50px;
}

/************************************
** アイコンボックスのカスタマイズ
************************************/
/*インフォ（薄い青）*/
.info-box{
background:rgba(199,213,229,0.1);  /*背景色の変更（※RGBA形式で透明度を設定）*/
}

/*ワーニング（薄い黄色）*/
.warning-box{
  background:rgba(229,229,199,0.1);  /*背景色の変更（※RGBA形式で透明度を設定）*/
}

/*デンジャー（薄い赤色）*/
.danger-box{
  background:rgba(229,199,199,0.1);  /*背景色の変更（※RGBA形式で透明度を設定）*/
}

/************************************
** タブボックスラベル表記のカスタマイズ
************************************/
.bb-tips .bb-label .fa::before {
  content: "\f00c";
}
.bb-tips .bb-label::after{
  content: "関連記事はこちらです";
}

.bb-pickup .bb-label .fa::before {
  content: "\f00c";
}
.bb-pickup .bb-label::after{
  content: "あわせて読みたい";
}

/************************************
** SILKスキン使用時 変更
************************************/
/** 変更投稿タイトル＆見出しを太字に **/
.article h1, .article h2, .article h3 {
    font-weight: 700;
}

/** h2見出しの文頭数字を削除 **/
.entry-content h2>span::before {
    content: unset;
}

/** ブログカードを横幅いっぱい **/
.is-style-normal-card .blogcard-wrap {
    max-width: initial;
}

/** タイムラインの行の高さ変更 **/
.timeline {
    line-height: 1.8;
}

/** カード / カルーセル / プロフィールの背景色を白に **/
.entry-card,
.carousel .a-wrap,
.author-box {
    background: #fff;
}

/** 本文下のシェアとフォロー間の余白を広げる **/
.sns-follow {
    margin-top: 2em;
}

/** コードタグを折り返して表示＆文字サイズを本文と同じに **/
pre.wp-block-code code {
    white-space: pre-wrap;
    font-size: inherit;
}

/*プロフィール画像＠マーク非表示*/
.author-name i {
display: none;
}

/* リンクの下線を消す */
.author-box .author-name a {
    text-decoration: none;
    color: #333;
} 

/* 見出し */

.article h2 {
  position: relative;
  padding: 0.2em;
  font-size: 1.5em;
  background: transparent;
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: rgba(204, 204, 204, 0.8);
  border-radius: 0;
}

.article h2 > span::after {
  position: absolute;
  content: "";
  width: 40%;
  height: 4px;
  left: 0;
  bottom: -4px;
}

h4 {
    display: flex;
    align-items: baseline;
    column-gap: 8px;
    color: #333;
    padding-left:0;
}

h4::before {
    width: 0.8em;
    height: 0.4em;
    border-bottom: 3px solid #a5c9c1;
    border-left: 3px solid #a5c9c1;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}



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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.timeline-item-content {
    padding-inline: 16px;
}
}

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