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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 以下、Simplicity2子テーマ用に記載していたもの */

/*----------------------
フォント変更
--------------------***/

body {color:#3B3B3B ;/** フォントをやや灰色に ***/ 
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/** http://hikineet.com/font-family/ **/ 
}

/****フォントサイズやらは以下で変更すれば良い ***/
.article { font-size: 17px; line-height: 180% ; /* サイズと行間*/ }

.article p {
margin-top:0em;
margin-bottom: 30px; /*段落ごとの空きを広げて見やすく*/}

.sns-share-msg{
  padding-bottom:0em!important;
  margin-bottom:0em!important;/*上のように空白をあけるとsnsのシェアするという文字の下もあいてしまうので調整したいのだがこれ以上せまくならなくて困っている*/
}

/************************************
** ヘッダー(header)
***********************************/

#site-title {
  margin-bottom:0em
/*** 画像下の余白を消す。画像自体にも下に余白があるのでこれ以上は消せないが****/;
}

#site-description{
  font-size:14px;
}

/**** 見出し ****/



.article h2 {
border-left:5px solid #2AB0CC;
background-color:#EEEEF0;
border-bottom:1px solid #BEBEC0;
padding:20px 25px;
font-size:23px;
}


.article h2 > span::after {
  background: #2AB0CC;/***　silkスキンの下線の色はここで変更できる　*****/ 
}

.article h2.matome  {
border-left:5px solid #ea7586;　　/***　前はオレンジ　#FE9900　だったがsilk用にピンクに変更　*****/ 
}


.article h3 {/*デフォルトのフォントサイズやや小さくしただけ*/
  font-size:21px;
}

/***　関連記事の見出し　*****/ 
.article h3.related_post_title {
	border-bottom: 1px #999999 dotted;
	background: #F3F3F3; }


/**** 　 追記コメント ****/

/* 疑似要素とファビコンを使った、現在主流の方法　http://tamotopi.com/post-471/
https://allabout.co.jp/gm/gc/23827/ */

.article h4.comme {
    background: #fff none repeat scroll 0 0;
    margin:25px 0px 25px;
    padding: 10px;
    position: relative;
}
 
.article h4.comme:before {
    margin-right: 7px;
    content: "\f113";
    font-family: FontAwesome;
}


/****　疑似要素を使わない、やや古い方法。画像は自分で作ったやつ
　https://allabout.co.jp/gm/gc/23828/   ***/

.article h4.comme2,.article h3.comme2 {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/commenti.png");
    background-size: 90px 55px;/* 画像のサイズ指定。元のサイズを縮小することで綺麗に表示されるようになる。http://www.webantena.net/css/css3-background-size/　*/
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:93px;/* ここを画像の横幅より数px大きくするのがポイントのようだ*/
    padding-top:22px;
    padding-bottom:22px;
}


.article h4.comme2 > span::before ,.article h3.comme2 > span::before  {
/* スキンのsilkだと、content: "\f061";
  margin-right: 0.5em;なっていて、コメットの右に矢印が付いてしまうのでこれを消去　*/
content:none;
  margin-right: 0em;
}

.article h4.man {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_object_117-s64_f_object_117_0nbg.png");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:60px;
    padding-top:22px;
    padding-bottom:22px;
}



/****　　頭にオオカミなどの動物画像素材を使った見出し　
    スペシャルサンクス　http://flat-icon-design.com/  ***/


.article h4.wolf, .article h4.alien, .article h4.bird, .article h4.horse, .article h4.bear, .article h4.elephant,.article h4.sheep {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:70px;
    padding-top:22px;
    padding-bottom:22px;
}

.article h4.wolf {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_object_151-s64_f_object_151_0nbg.png");
}

.article h4.alien {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_object_123-s64_f_object_123_0nbg.png");
}


.article h4.bird {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_object_122-s64_f_object_122_0nbg.png");
}

.article h4.horse {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_object_83-s64_f_object_83_2nbg.png");
}


.article h4.bear {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_event_97-s64_f_event_97_0nbg.png");}


.article h4.elephant {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_object_97-s64_f_object_97_1nbg.png");}


.article h4.sheep {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/f-f_event_97-s64_f_event_97_0nbg.png");
}


/****　コメットくん、h2まとめバージョン ***/


.article h2.comme2 {
background-image: url("http://xxxmethod.blue/wp-content/uploads/2017/03/commenti.png") ;
    background-size: 90px 55px;
    background-repeat: no-repeat;
    background-position: 15px;/* h2がベースになっているため、上のh4よりもやや右寄りに画像の位置を移動*/
    padding-left:110px;/* h2がベースになっているため、文字も上よりも右寄りに*/
    /* h2がベースになっているため、他のpaddingは別に記入しなくてもh2のが適用されるからいい*/
    border-left:5px solid #ea7586;　/***　前はオレンジ#FE9900　*****/ 
	background-color: white;
}
 


/* 装飾系　背景グレー */
.sp-gray{
background-color:silver;
}

/* ここまで、Simplicity2子テーマ用に記載していたもの */
/**************************************/

/* こっからCocoon */


/* 吹き出し、　コメット君  コメット君自体が吹き出しなので*/

 .speech-balloon{ font-size:15px;
}
.sb-id-13 .speech-balloon,.sb-id-25 .speech-balloon { margin-left:4px;/*コメントを帽子の先っちょに近づける*/
border-color:#ffffff;/*コメント部分の「枠の色」*/border:none;
}

.sb-id-13 .speech-balloon::before,.sb-id-25 .speech-balloon::before {
  border-left: 0px solid #ffffff;border:none;
}


/***** -------------------------------
 番号リストデザイン　https://ponhiro.com/cocoon-list-design/---　***/


/*** olリストの先頭を数字アイコンに。cocoonで白抜きボックス（囲み枠）・見出しBOX内で数字リストを使った時にも同じように反映されるように　　***/

.entry-content > ol,.blank-box > ol,.box-content > ol {
   counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0; 
}
.entry-content > ol{
margin-left: 20px;/* 通常だと左に寄りすぎているので */
}

.entry-content > ol li,.blank-box > ol li,.box-content > ol li { 
   border-bottom:1px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0.5em !important;
   max-width:600px; /* 横幅 */
   padding: 0 0 0.4em 1.8em;
}
.entry-content > ol li:before,.blank-box > ol li:before,.box-content > ol li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #d8aa20; /* 文字背景色 */color: #fff; /* 文字色 */position: absolute;
   text-shadow: 1px 1px 0 rgba(0,0,0,0.2);border-radius:8%;
　 font-weight:bold;
   font-size: 14px;
   left: 0;
   top:0.25em;
   width: 21px;
   height: 21px;
   line-height: 21px;
   text-align: center;
}
@media screen and (max-width: 750px){
/*ol番号リスト、スマホ用*/
.entry-content > ol li:before,.blank-box > ol li:before,.box-content > ol li:before {
   top:0.45em;font-size: 13px;
}
}