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

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

/*--------------------------------- 
見出し系
--------------------------------*/

/*h3見出し変更*/
.article h3 {
  font-size: 20px !important;/*文字のサイズ*/
  border-left: 6px solid #d6d3ce;/*左線*/
  padding: 12px 10px;/*余白*/
  border-bottom: 1px solid #d6d3ce;/*下線*/
  margin-bottom: 15px;
  border-top: none;
  background: none;
}

/*--------------------------------- 
テーブル系
--------------------------------*/
/*テーブル内のthead下線の色変更*/
.wp-block-table thead {
    border-bottom: 3px solid;
    border-block-color: #B3ADA4;
}

/*テーブルの背景色変更*/
table tr:nth-of-type(2n+1) {
    background-color: #f4f3f254;
}

/*--------------------------------- 
リストアイコンの色変更
--------------------------------*/

/* 通常のulリストのマーカー色を変更する */
ul li::marker {
  color: #D6D3CE; /* 好きな色に変更（グレーの丸） */
  font-size: 1.2em;
}

/* チェックマーク */
ul.is-style-icon-list-check > li::before {
  color: #ED9D9D; /* ピンク */
  font-weight: bold !important;
}

/* 四角の中のチェックマーク */
ul.is-style-icon-list-check-valid > li::before {
  color: #ED9D9D; /* ピンク */
}

/* 丸数字 */
ul.is-style-numeric-list-enclosed > li::before {
  background-color: #B4D09B; /* 緑色 */
}

/* 吹き出しマーク */
[class*=is-style-icon-list-] > li::before {
    color: #4db6ac; /* 緑色*/
}


/*--------------------------------- 
サイドバー系
--------------------------------*/
/* 文字の大きさ変更 */
.widget-sidebar ul li a {
font-size: 0.9em;
}



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

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

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

/*--------------------------------- 
ブログカード
--------------------------------*/
/* ブログカードタイトルの背景色 */
.blogcard-label {
    background-color: #9AC4D0;
}

/* ブログカードの中の位置調整 */
.blogcard {
    padding: 2% 2.2% 2% 2.2%;
}

@media screen and (max-width: 480px) {
    .blogcard {
        padding: 3%;
    }
}

/* スマホのブログカード調整 */
@media screen and (max-width: 834px) {
.blogcard-title {
    font-size: 1em;
    margin-bottom: 0.5em;
  }
}

@media screen and (max-width: 480px) {
.blogcard-snippet {
    font-size: 0.8em;
	line-height: 1.4;
  }
}


/*--------------------------------- 
引用
--------------------------------*/

.font-awesome-5 blockquote::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

 /* 引用 */
.wp-block-quote.wp-block-quote-is-layout-flow {
    position:relative;
    border:1px solid #8BC0B8;
    border-radius:10px;
    padding: 2em !important;
}

.wp-block-quote.wp-block-quote-is-layout-flow p {
    padding: 0 !important;
}

.wp-block-quote:before{
    position:absolute;
    font-family:'FontAwesome';
    content:'\f10d';
    font-size: 20px;
    color:#8BC0B8;
    top:10px;
    left:10px;
}
.wp-block-quote:after{
    position:absolute;
    font-family:'FontAwesome';
    content:'\f10e';
    font-size: 20px;
    color:#8BC0B8;
    right:10px;
    bottom:10px;
}
.wp-block-quote cite {
    display: block;
    font-size: 0.8rem;
	font-style: normal;
    text-align: right;
    color: #D4DED7;
    padding-right:20px;
}

.wp-block-quote.wp-block-quote-is-layout-flow p {
    padding: 0 !important;
}
.wp-block-quote.wp-block-quote-is-layout-flow {
    padding: 2em !important;
}

/*--------------------------------- 
アイキャッチのキャプション
--------------------------------*/
.eye-catch-caption {
    font-size: 0.7em;
}