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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){

  /*必要ならばここにコードを書く*/
}

/************************************
** ●キャッチフレーズ位置調整
************************************/
.tagline {
font-size: 17px;
margin-top: -15px; /*キャッチフレーズ下マージン*/
}
@media screen and (max-width: 768px){
.tagline {
font-size: 18px;
}
}
/************************************
** ●ヘッダーサイズカスタマイズ
************************************/
.header { 
padding-bottom: 5px; /*ヘッダー下マージン*/
padding-top: 10px; /*ヘッダー上マージン*/
}

/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
	max-width: 100px;
}
.footer-bottom-logo img {
	height: auto;
}
/************************************
** ◆マーカーカスタマイズ
************************************/
.marker {
  background-color: #ff9;
}
.marker-red {
  background-color: #ffd0d1;
}
.marker-blue {
  background-color: #e3e8f2;
}
/*下半分のマーカー色（km）*/
.marker-under {
  background: linear-gradient(transparent 60%, #e3ffbc 60%);
}
.marker-under-red {
  background: linear-gradient(transparent 60%, #ffd0d1 60%);
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, #e3e8f2 60%);
}

/************************************
** 記事内目次
************************************/
.toc {
  background: #f9f9f9!important;
  border: 0!important;
  display: block!important;
  border-top: 5px solid!important;
  border-top-color: #b7ceab!important;/*お好みの色に*/
  box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
  padding: 20px 32px 7px 32px!important;
  margin-bottom: 5%!important;
  width:87%;
  border-radius:10px;
}
@media screen and (min-width:600px){
.toc {
  padding: 20px 35px 15px 35px!important;
  width:90%;
}
}
.toc-title{
  margin: 0 20px 20px -10px!important;
  font-size: 23px!important;
  font-weight: 700!important;
  color: #b7ceab!important;/*お好みの色に*/
  background-color: initial;
}
.toc-title:before{
  font-family: "Font Awesome 5 Free";
  content: "";
  font-weight: 900 !important;
  font-size: 20px;
  color: #fff;
  background-color: ;/*お好みの色に*/
  border-radius: 50%;
  padding: 14px;
}
.toc a{
  color:#333;
  display: block;
  border-bottom: dashed 1px silver;
  padding-bottom: .5em;/*下の点線との間*/
  padding-top: 0em!important;/*下の点線との間*/
}
.toc ul li{
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0 .4em 1.4em;
  position: relative;
}
.toc ul li:before{
  font-family: "Font Awesome 5 Free"!important;
  content: "";/*f105*/
  position: absolute!important;
  left: -0.3em!important;
  color: #f8c678;/*お好みの色に*/
  font-weight: 900;
}
.toc li li{
  font-weight: 400;
  padding-top:.2em;
  margin-top:0!important;
}
.toc_list li{
  margin-top:-5%!important;
}
@media screen and (min-width:834px){
.toc_list li{/*PCでは目次のh2同士の間隔は抑えめに*/
  margin-top:-1.8%!important;
}
}

/************************************
** サイドバーの目次
************************************/
.sidebar .toc{
  background:transparent!important;
  border:initial!important;
  border-top: initial!important;
  border-top-color: initial!important;
  box-shadow:initial!important;
  margin-bottom:initial!important;
  width: initial!important;
  border-radius:initial!important;
  padding-top:initial!important;
}
.sidebar .toc li li:before{
  color:#fad9a7;/*お好みの色に*/
}

/* 画像に枠線を付ける　グレー太 */
.qqq {
    border: solid 10px #d3ddcc; /* 枠線のスタイル 太さ 色 */
}

/* 画像キャプションを中央寄せにする処理 */
.wp-block-image figcaption {
	text-align: center;
}

/* バッジ　パープル→緑 */
.badge-purple {background-color: #89ad83;}

/* タグ風見出し */
.tagu-box1 {
  position: relative;
  display: inline-block;
  padding: 5px 20px 5px 42px;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #a8bfa0;
}
.tagu-box1:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}