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

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

/************************************
 ** double quotation area
 ************************************/
b, strong , span.dqb, span.dqs {
	font-weight: 700!important;
}

strong, span.dqs {
  color: #ef2151; color: var(--strong-color);
}

span.dq::before,
span.dqb::before,
span.dqs::before {
  font-family: "FontAwesome";
  content: "\f10d"; /* quote-left */
  font-weight: 700;
  font-size: 0.5em;
  padding: 0em 0.5em;
  vertical-align: super;
}

span.dq::after,
span.dqb::after,
span.dqs::after {
  font-family: "FontAwesome";
  content: "\f10e"; /* quote-right */
  font-weight: 700;
  font-size: 0.5em;
  padding: 0em 0.5em;
  vertical-align: super;
}

/************************************
 ** categoryメニューの設定
 ************************************/
/* div[class^="menu-category"] ul, div[class^="menu-category"] ol{ */
div[class^="entry-content"] ul[id^="menu-category"], div[class^="menu-category"] ol[id^="menu-category"]{
  padding: 0;
}

div[class^="entry-content"] ul[id^="menu-category"] li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  /*background: #dbebf8;*/
  /*background-color: rgb(186 38 54 / .10);*/
  background-color: rgb(186 168 168 / .15);
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

div[class^="entry-content"] ul[id^="menu-category"] li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

/************************************
** detailsの装飾
************************************/
summary {
  border-top: 2px solid #c6c6c6;
  border-bottom: 2px solid #c6c6c6;    
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  margin: 5px;
  transition: 0.2s;
  /*background-color:  rgb(186 38 54 / .10);*/
  background-color: rgb(186 168 168 / .10);
}
details {
  margin: 5px;
}
summary:hover {
  /*background-color:  rgb(186 38 54 / .15);*/
  background-color: rgb(186 168 168 / .10);
}
summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}
.details-content{
  /*background-color:  rgb(186 38 54 / .05);*/
  background-color: rgb(186 168 168 / .05);
}
/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  /*background-color:  rgb(186 38 54 / .50);*/
  background-color: rgb(186 168 168 / .50);
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
      border-bottom:  none;
  /*background-color:  rgb(186 38 54 / .10);*/
  background-color: rgb(186 168 168 / .10);
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

details[open] .details-content{
  /*background-color:  rgb(186 38 54 / .5);*/
  background-color: rgb(186 168 168 / .10);
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/************************************
** 脚注背景
************************************/
ol.footnotes {
/*	background-color: rgb(186 38 54 / .05);*/
	background-color: rgb(186 168 168 / .10);
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	/************************************
　　　　 ** KaTeXの日本語フォント設定
 　　　　************************************/
	/*本文と一致させる*/
	.cjk_fallback {
		font-family:var(--cocoon-default-font);
		font-size: 13px
	}
}

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

	/************************************
　　　　 ** KaTeXの日本語フォント設定
 　　　　************************************/
	/*本文と一致させる*/
	.cjk_fallback {
		font-family:var(--cocoon-default-font);
		font-size: 13px
	}
}

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

	/************************************
　　　　 ** KaTeXの日本語フォント設定
 　　　　************************************/
	/*本文と一致させる*/
	.cjk_fallback {
		font-family:var(--cocoon-default-font);
		font-size: 12px
	}
}