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

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

/*目次のタイトル文字を変更*/
.toc-title {
	font-weight: bold;	/*太字*/
	color: #99CCFF;		/*薄い水色*/
}

/*目次の背景色と枠線を変更*/
.toc {
	color: #99CCFF;		/*No.の色　薄い水色*/
	font-size: 16px;
	background: #ffffff;	/*背景色 白色*/
	border: 5px solid #99CCFF;	/*枠線の色　薄い水色*/
}

/*目次の項目の文字色と大きさを変更*/
.toc a {
	font-weight: bold;	/*太字*/
	color: #99CCFF;		/*文字の色　薄い水色*/
	font-size: 16px;
}




/*見出し*/
/*見出し2を水色にする　*/
.article h2 {
　font-size: 20px;
  position: relative; /* 相対位置指定 */
  color: #ffffff; /* No.の色 白色 */
  background: #99CCFF; /* 背景色 薄い水色 */
  border: 5px solid #99CCFF; /* 枠線の色 薄い水色 */
}
.article h2::after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #99CCFF;
  width: 0;
  height: 0;
}

/* 見出し2の特定のクラスに対してスタイルを適用 */
.article h2.cause-heading {
  font-size: 20px;
  position: relative; /* 相対位置指定 */
  color: #0071bc; /* テキストの色は水色 */
  background: #d3d3d3; /* 背景色 薄いグレー */
  border: 5px solid #d3d3d3; /* 枠線の色 薄いグレー */
}
.article h2.cause-heading::after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #d3d3d3; /* 三角形の色 薄いグレー */
  width: 0;
  height: 0;
}






/* 見出し3を水色にする */
.article h3 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #0071bc; /* テキストの色を水色に変更 */
  font-weight: bold; /* 文字を太字に設定 */
}

.article h3:after {
  font-size: 18px;
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}


/* 見出し3-cause-headingの背景色と縁取りを設定 */
.article h3.cause-heading {
  background-color: #f0f0f0; /* 背景色を薄いグレーに変更 */
  border: dashed 2px white; /* 枠線は白色の破線 */
  box-shadow: 0px 0px 0px 5px #f0f0f0; /* 影の色は薄いグレー */
  color: #0071bc; /* テキストの色は水色 */
}

.article h3.cause-heading:after {
  font-size: 18px;
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #c0c0c0; /* 影の色を設定 */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); /* ボックスシャドウの設定 */
}




/* 見出し4を水色にする */
.article h4 {
  position: relative;
  background: #eff4ff;
  padding: 8px 5px 8px 25px; /* 上下のパディングを少し狭く調整 */
  font-size: 18px;
  color: #0071bc;
  font-weight: bold;
  border-radius: 0 10px 10px 0;
  margin-left: 1em;
}

h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  display: inline-block;
  position: absolute;
  padding: 0em;
  color: #99CCFF;
  background: #99CCFF;
  font-weight: 900;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  left: -1.5em;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
  border-bottom: solid 2px #99CCFF;
}

/* 見出し4-cause-headingの背景色と縁取りを設定 */
.article h4.cause-heading {
  background: #f0f0f0;
  padding: 8px 5px 8px 25px; /* 同様にパディング調整 */
  color: #0071bc;
  margin-left: 1em;
}

/* h4要素のアイコン部分を薄いグレーにする */
.article h4.cause-heading:before {
  color: #f0f0f0;
  background: #f0f0f0;
  border-bottom: solid 2px #f0f0f0;
  width: 44px;
  height: 44px;
  line-height: 44px;
  left: -1.5em;
}













/*モバイル設定*/
/*ヘッダーモバイルボタンの色と高さを変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	color: #99CCFF;
	height: 60px;
	padding-top: 10px;
}

.logo-menu-button.menu-button{
	background-color: #ffffff;
	height: 60px;
	color: #99CCFF;
}
.mobile-footer-button {
  color: #99CCFF; /* 文字色を薄い水色に変更 */
}
.profile-text, .notification-text {
  color: #99CCFF; /* 薄い水色に変更 */
}






/*スライドインメニューを右から出す*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #99CCFF;
	transform: translateX(101%);
	color: #ffffff;
}
.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #ffffff;/*文字の色*/
	height: 3em;/*行の高さ*/
}



/*アイキャッチサイズの調整*/
.ect-vertical-card .entry-card-wrap .entry-card-thumb {
    padding-top: 67%;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
}



/*ブログカード_背景色＋枠線*/
.blogcard{
	border: 1px solid #0071BC!important
}

/*.blogcard-wrap {
background-color: #808080;
}*/






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

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

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




/**************************************
カテゴリーのもっと見るボタン
************************************/
/*カテゴリーごと表示の「もっと見る」ボタン*/
.list-more-button:hover{
background: #d1aa38; /*背景色*/
color:#fff; /*文字色*/
}