@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){
  /*必要ならばここにコードを書く*/
}
/************************************
** 見出し用追加CSSのリセット用（リセットしないと反映されない）
************************************/
/*スタイルリセット用*/
main h2.wp-block-heading,
main h3.wp-block-heading,
main h4.wp-block-heading {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    font-weight: bold;
}
main h2.wp-block-heading:before,
main h3.wp-block-heading:before,
main h4.wp-block-heading:before,
main h2.wp-block-heading:after,
main h3.wp-block-heading:after,
main h4.wp-block-heading:after {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    margin: initial;
    content: initial;
    position: initial;
}

/************************************
** 見出し用追加CSS
************************************/
main h2.wp-block-heading {
    color: #fff;/*文字色（白）*/
    background-color: #56899d;/*背景色*/
    font-size: 20px;/*文字サイズ*/
    padding: 20px 25px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
}
main h2.wp-block-heading:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: 10px　solid transparent;
    border-right: 20px solid #000;
}
/*H3見出し*/
main h3.wp-block-heading {
    background: #e9eff1;/*背景色（白）*/
    border-left: 4px double #339ecc;/*左線（太さ 二重線 色）*/
    display:block;
    font-size: 18px;/*文字サイズ*/
    padding: 0.7rem;/*文字回りの余白（上下左右）*/
}
/*H4見出し*/
main h4.wp-block-heading {
    border-top: 4px double #339ecc;/*上線（太さ 二重線 色）*/
    border-bottom: 1px solid #339ecc;/*下線（太さ 実線 色）*/
    display: block;
    font-size: 16px;/*文字サイズ*/
    padding: 0.4rem;/*文字回りの余白（上下左右）*/
}
/************************************
** 目次
************************************/
/* 目次の背景色を変更する */
.toc {
  background-color: #f6f7f7;  /* 目次の背景色を変更する */
  border-color: #a8bcc8;  /* 周囲のボーダーの色を変える */
}
/* 目次の背景色を変更する */
.toc-title{
  background-color: #8195a2;  /* 背景色を変更する */
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}
/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
  font-family: 'Font Awesome 5 Free';  /* Font Awesome 5を使用するために指定 */
  content : "\f03a";  /* Font Awesome 5のアイコン番号 */
  font-size:20px;  /* アイコンの大きさ */
  margin-right:10px;  /* アイコン右の余白 */
  color:#a8bcc8;  /* アイコンの色 */
  background-color:#ffffff;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding:8px;  /* アイコン背景の余白 */
}
/* 目次の文字の色を変える */
.toc a{
  color:#5C676D;  /* 文字の色 */
}
/* 目次のH2見出しのみ太字にする */
.toc-content ol li{
  color: #8195a2;  /* 文字の色 */
  margin:0.5em;  /* 文字の余白 */
}
.toc-list > li{
  font-weight: bold;  /* h2のみ太字にする */
}
.toc-list > li li{
  font-weight: normal;  /* h2以外を標準の太さにする */
}
/* サイドバーの目次のみデザインを変更する */
#sidebar .toc{
  padding: 10px;  /* 周囲の余白を変える */
}

/************************************
** 投稿本文中カテゴリ＆タグ
************************************/
/*投稿本文中カテゴリーのカスタマイズ*/
.entry-categories a {
  border-radius: 0px; /*角の丸み*/
  background-color: #8195a2; /*背景の色*/
  color: #ffffff; /*アイコンと文字の色*/
}

/*投稿本文中カテゴリー：ホバー時のカスタマイズ*/
.entry-categories a:hover {
  color: #ffffff; /*アイコンと文字の色*/
}
/*投稿本文中タグのカスタマイズ*/
.entry-tags a {
  border-radius: 0px; /*角の丸み*/
  background-color: #ffffff; /*背景の色*/
  color: #8195a2; /*アイコンと文字の色*/
}

/*投稿本文中タグ：ホバー時のカスタマイズ*/
.entry-tags a:hover {
  color: #8195a2; /*アイコンと文字の色*/
}

/************************************
** タグクラウド
************************************/
/*タグクラウドのカスタマイズ*/
.tagcloud a{
  border-radius: 0px; /*角の丸み*/
  background-color: #ffffff; /*背景の色*/
  color: #8195a2; /*アイコンと文字の色*/
}

/*タグクラウド：ホバー時のカスタマイズ*/
.tagcloud a:hover{
  color: #8195a2; /*アイコンと文字の色*/
}

/************************************
** カテゴリーのアイコンを変更
************************************/
/*カテゴリーのアイコンを変更*/
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f192"; /*アイコンのフォント*/
  color:#a8bcc8; /*アイコンの色*/
  padding-right:5px; /*アイコンとフォントの間の余白*/
  font-weight: 900; /*アイコンの太さ（なくてもOK）*/
  font-size:18px; /*アイコン・フォントの大きさ（なくてもOK）*/
}
/*子カテゴリーのアイコンを変更*/
.widget_categories ul li ul li a::before{ 
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f061"; /*アイコンのフォント*/
  color: #a8bcc8; /*アイコンの色*/
}

/************************************
** サイドバー見出し
************************************/
/* サイドバー見出し */
.sidebar h3 {
  background: transparent;  /* 背景を透明にする */
  text-align: center;  /* 見出しの文を中央揃えにする */
  padding:0px;  /* 周囲の余白（内側） */
  margin: 0px 0px 10px 0px;  /* 周囲の余白（外側） */
  border-bottom: dashed 2px #a8bcc8;  /* 下部に波線を表示する */
  color: #5C676D;  /* 色の変更 */
}

/************************************
** エントリーカードホバー時の背景の色を変える
************************************/
/*エントリーカードホバー時の背景の色を変える*/
.entry-card-wrap:hover{
  background-color: #FAFAD2; /*背景の色*/
}

/************************************
** アイキャッチラベル
************************************/
/*アイキャッチラベル*/
.cat-label{
  background-color: #8195a2; /*ラベルの色*/
  transform:rotate(-8deg); /*ラベルの角度*/
  border: none; /*ラベルに囲い線をつけない*/
}

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

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


/****************
モバイルスライドインメニュー
****************/
.fa-times {
color: #000057;/* 閉じるボタンの色 */
font-size: 0.8em;
}
ul.menu-drawer:before {
background-color: #000057;/* Menu背景色 */
font-size: 1.2em;
}
ul.menu-drawer:after {
background-color: #fff;
}
.menu-drawer a {
color: #333 !important;/* 文字色 */
font-size: 1.2em;
font-weight: 900;
}
.menu-drawer a:hover {
background-color: #eff8f9;
}
.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
margin-right: 3px;
}
.sub-menu li {
font-size: 0.8em;
}

/****************
ウィジェットカード設定
****************/
/* ウィジェットカード設定（Grid）---------------------------------------------- */

/* カード内の画像リンク最大幅を600pxに制限（横幅100%で拡縮対応） */
[class*="is-style-column-"] .widget-entry-cards.card-large-image .a-wrap {
	max-width: 600px;
	width: 100%;
}

/* 大きなサムネイル画像を中央寄せ */
[class*="is-style-column-"] .widget-entry-cards.large-thumb {
	justify-items: center; /* Gridのアイテムを水平方向に中央配置 */
}

/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
	display: grid;
}

/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
	grid-template-columns: repeat(2, 1fr);
}

/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
	grid-template-columns: repeat(3, 1fr);
}

/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
	grid-template-columns: repeat(4, 1fr);
}

/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {
	/* column-x-1系：モバイルでは1列 */
	:is(.is-style-column-2-1, .is-style-column-3-1, .is-style-column-4-1) .widget-entry-cards {
		grid-template-columns: 1fr;
	}

	/* column-x-2系：モバイルでは2列 */
	:is(.is-style-column-3-2, .is-style-column-4-2) .widget-entry-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}