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

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

/* 目次
-------------------------------------------------- */
#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #000;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
}

#main .entry-content .toc .toc-title {
  /* 目次の文字指定 */
  text-align: left;
  margin: 0 20px 20px -10px;
  padding-left: -20px;
  font-size: 23px;
  font-weight: 700;
  color: #000;
  /* 目次の文字色を変える場合はここを変更 */
}

#main .entry-content .toc .toc-title:before {
/* 目次のアイコン設定 */
  top: 4px;
  left: -10px;
  width: 18px;
  height: 20px;
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  /* アイコンを変える場合はここを変更 */
  font-size: 13px;
  margin-right: 5px;
  color: #ff6a6a;
  /* アイコンの色を変える場合はここを変更 */
  background-color: #000;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 10px 7px 10px 14px;
}
/* 目次のデザインカスタマイズ */
#main .entry-content .toc .toc-content ol {
  padding: 0 0.5em;
  position: relative;
}
#main .entry-content .toc .toc-content ol li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
}
  /* 目次の各節の先頭にあるアイコンを設定 */
#main .entry-content .toc .toc-content ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #000;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}
#main .entry-content .toc .toc-content ol li:last-of-type {
  border-bottom: none;
}
  /* h2のみ太文字に */
#main .entry-content .toc .toc-content .toc-list li {
  font-weight: 700;
}
  /* h3以降の文字サイズを普通に */
#main .entry-content .toc .toc-content .toc-list li li {
  font-weight: normal;
}

/* もくじ追従ウィジェットにスクロールバー */
.widget_toc{
	max-height: 460px; /* 目次の高さを調整 */
	overflow-y: auto; /* 垂直スクロールバーを有効にする */
}

/* スクロールバーのスタイルを調整（サイドバー目次） */
.widget_toc::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
}

.widget_toc::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラックの背景色 */
}

.widget_toc::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーのつまみの色 */
}

.widget_toc::-webkit-scrollbar-thumb:hover {
    background: #999; /* スクロールバーのつまみのホバー時の色 */
}

/* 番号付きリストボックス */
.list-box-3{
   background: #f6fbf9;/* 背景色 */
   border-radius: 4px;
   max-width: 600px;
   padding: 2em;
   margin:0 auto;
   border:2px dotted;
   border-color:#58be89; /* 線の色 */
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}
/* 今ココ順序リスト */
.flow {
	padding: 1em;
	background: #fef9ed; /* 背景色カラーコード */
	margin: 0;
}
.flow ol{
	margin: 1em 0;
	padding-left: 1.2em;
	line-height: 1.8;
}
.flow li {
	opacity: 0.5;
	margin: 0 0 .5em 5em !important;
}
.flow .now {
	opacity: 1;
	font-weight: bold;
	position: relative;
}
.flow .now:before {
    content: "今ココ"; /* 今ココ */
    position: absolute;
    left: -6.5em;
    top: 0.2em;
    padding: 0 7px;
    background: #f6a068; /* 今ココ背景色カラーコード */
    color: #fff;
    font-size: 0.8em;
    border-radius: 5px;
}
.flow img{
	margin:0.5em 0;
	vertical-align:top;
}

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

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

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