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

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

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

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

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

/************************************
** 画像を枠線で囲む
************************************/
.wp-block-image img{
  border: solid thin silver;
}

/************************************
** 特定カゴリーのアイキャッチ画像を非表示
************************************/
.categoryid-19 .eye-catch-wrap {
  display: none;
}

/************************************
** プロフィール本文を中央揃え
************************************/
.nwa .author-box .author-description{
  text-align: center;
}

/************************************
** 目次に戻るリンクを機能させる
************************************/
.__toc-checkbox {
  height: 0;
  overflow: hidden;
  display: block;
  visibility: hidden;
}
/*目次に戻るリンクのスタイル*/
.__back-toc {
  margin: 0 0 -50px; /*余白 上|左右|下*/
}
.__back-toc a {
  color: #ae9984; /*文字色*/
  text-decoration: none; /*下線を消す*/
}

/***********************************
** NOTE風ワンカラム
** 参考：https://chiilabo.com/2020-09/wordpress-note-ui-design-wpulike-css/
************************************/
/*画面幅*/
@media screen {
  .no-sidebar .wrap {
    width: 680px;
    background: #ffffff;
  }
  body.no-sidebar {
    background: #ffffff;
  }
}
@media screen and (max-width: 834px) {
  .no-sidebar .wrap {
    width: auto;
  }
}
/*編集画面幅も同サイズで*/
.wp-block{
	max-width: 620px;
}
/***********************************
** 記事一覧でアイキャッチを右寄せ
** 参考：https://chiilabo.com/2021-03/css-change-order-entry-card-thumb-content/
************************************/
/*記事一覧*/
article.entry-card {
  display: flex;
  flex-direction: row;
}
.entry-card-thumb {
  order:2;
  padding-bottom: 1.2em;
}
.entry-card-content {
  order:1;
  margin-left: 0;
  width:70%;
}
.entry-card-title {
  margin-left: 0%;
  margin-right: 1em;
}
/*関連記事一覧*/
article.related-entry-card {
  display: flex;
  flex-direction: row;
}
.related-entry-card figure{
  order:2;
  padding-bottom: 1.2em;
}
.related-entry-card-content {
  order:1;
  margin-left:0;
  margin-right:1em;
  width: 75%;
}
/*ブログカード*/
.blogcard-thumbnail {
    float: right;
    }
.blogcard-content {
  margin-left:0;
  margin-right:10em;
}
/***********************************
** 目次のデザイン
** 参考：https://chiilabo.com/2020-12/note-css-toc-table-of-contents/
************************************/
/*全体*/
.article .toc {
  border-color: white;
  background-color: #f7f9f9;
  width: 100%;
  padding: 16px;
}

/*目次のタイトル*/
.article .toc-title {
  text-align: left;
  color: #585c5b;
  font-size: 16px;
  font-weight: 600;
  padding: 0px;
}
/*▼*/
.article .toc-title::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  margin-right: 0.4em;
  margin-left: 0.25em;
  transform: scale(1);
  color: #585c5b;
  font-size: 16px;
  font-weight: 700;
}
/*▶*/
.article .toc-checkbox:checked+.toc-title::before{
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f0d7";
  margin-right: 0.4em;
  margin-left: 0.0em;
  transform: scale(1);
  color: #585c5b;
  font-size: 16px;
  font-weight: 700;
}
.toc-title::after {
  content: '';
}
.toc-checkbox:checked+.toc-title::after{
  content: '';
}
/*リスト部分*/
.toc-content {
  color: #585c5b;
  font-size: 14px;
  font-weight: normal;
}

.toc ol.toc-list {
  list-style-position: inside;
}
.article .toc-list li {
  margin: 0 ;
  border-top: 1px solid #dfdfdf;
}
.article .toc-list li a {
  display: inline-block;
  color: #585c5b;
  padding: 6px 0 6px 0;
  font-weight: normal;
  text-decoration: none;
}
.article .toc-list>li:first-child {
  border-top: none;
}
/***********************************
** アイキャッチをタイトルの上に変更
** 参考：https://chiilabo.com/2020-12/note-eyecatch-cocoon-display-flex/
************************************/
.entry-header {
  display: flex;
  flex-direction: column;
}

.entry-header .eye-catch-wrap {
  order: 1;
}
.entry-header .entry-title {
  order: 2;
}

.entry-header .date-tags {
  order: 3;
}