@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 {
   margin-bottom: 4em;
}

/*記事投稿日と更新日の左右入れ替え*/
.date-tags {
  display: flex;
  flex-direction: row-reverse;
}

/*アイキャッチと日付の上下位置入れ替え*/
.article-header{
display:flex;
flex-flow: column;
}

.entry-title{order:1;}
.eye-catch-wrap{order:3;}
.date-tags{order:2;}

/*---------------------------------
  ヘッダーロゴのアニメーションキャンセル
---------------------------------*/
#header-in {
    animation: none;
}

.content { 
margin-top: 0; 
}

.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}

.front-top-page #main .entry-title{
  display: none;
}

/* ユニバーサルカラーセット */
.red {
  color:#FF4B00;
}

span.yellow {
  color:#FF4B00;
}

td.yellow {
  background-color:#FF4B00;
}

.green {
  color:#35a16b;
}

.blue {
  color:#005AFF;
}

.sky-blue {
  color:#4DC4FF;
}

.pink {
  color:#FF8082;
}

.orange {
  color:#F6AA00;
}

.purple {
  color:#990099;
}

td.purple {
  background-color:#990099;
}

.brown {
  color:#804000;
}

.br-pink {
  color:#FFCABF;
}

.br-pink {
  background-color:#FFCABF;
}

span.cream {
  color:#FFFF80;
}

td.cream {
  background-color:#FFFF80;
}

.cream {
  background-color:#FFFF80;
}

.br-yellow-green {
  color:#d8f255;
}

span.br-sky-blue {
  color:#BFE4FF;
}

td.br-sky-blue {
  background-color:#BFE4FF;
}

span.beige {
  color:#FFCA80;
}

td.beige {
  background-color:#FFCA80;
}

.br-green {
  color:#77D9A8;
}

span.br-purple {
  color:#C9ACE6;
}

td.br-purple {
  background-color:#C9ACE6;
}

.br-gray {
  color:#C8C8CB;
}

.uc-gray {
  color:#84919E;
}

.white{
 color:#fff;
}
/* ユニバーサルカラーセットここまで */

.graysmaller {
	font-size: 80%;
	color: gray;
}

.blacksmaller {
  font-size: 80%;
}

span.bold {
	font-weight: bold;
}

.center {
      text-align: center;
}

/* barns and noblesの濃い青 */
.BNcolor {
  color: #3d5962;
}

/* アイキャッチの修正ここから */
.eye-catch img {
  filter: none; /* ぼかしフィルターの解除 */
  object-fit: contain; /* アイキャッチのサイズ修正 */
  opacity: 1; /* 画像の透明度指定 */
}
/*タイトル位置の調整*/
h1.entry-title, .date-tags {
  position: relative;
  top: 0;
  left: 0;
  padding: 0.5em;
  margin-right: 0;
}
/* アイキャッチの修正ここまで */

/*フロントページの日付消した*/
.home.page .date-tags {
display: none;
}

/* tableの色交互止める */
table td {
	background: #fff;
}
/* tableの色交互止める */

/* ホワイトラーメンのを打ち消し */
.article h2 {
  padding-left: 0;
}

.article h2::before {
  display: none;
}



.blogcard:before {
background: transparent;
	display: none;
}

.comment-title:before{
    font-size:13px;
}

article > .entry-content{
    padding:0px;
}

/* ホワイトラーメンのを打ち消し */

hr{
  border: 0;
  border-top: solid 1px #dcdcdc;
　}

.sidebar {
	border-right:1px #dddddd solid;
}

.sidebar h3{
    background:whitesmoke;
	  font-weight: bold;
	color: #888888;
}

    /* 黒本用リンクカード */
    .pb-btn{
      margin: 3em auto;
      max-width:500px;
      width:80%;
      position:relative;
    }
    .pb-btn p{
      margin:0 !important;
      padding:0 !important;
    }
    .pb-btn a{
      display:block;
      padding:1.5em 2em 1.3em;
      color:#333 !important;
      background:#FAFAFA;
      border:1px solid #333;
      font-size:16px !important;
      font-weight:600;
      position:relative;
      transition:all 0.2s;
      text-decoration:none;
    }
    .pb-btn .pb-btn__text{
      max-width: 90%;
      display: block;
      line-height:1.8;
    }
    .pb-btn .pb-btn__label{
      background: #FF4B00;
      color: #fff;
      display: inline-block;
      padding: 0.5em 1em !important;
      font-size: 13px !important;
      line-height: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      position:absolute;
      top: -12px;
      left: 23px;
      z-index: 1;
    }
    .pb-btn .pb-btn__add{
      font-size:12px !important;
      letter-spacing:0.5px;
      margin: 7px auto 0 !important;
      max-width:90%;
      color: #FF4B00;
      font-weight:600;
      text-align:center;
    }
    .pb-btn a:after{
      position: absolute;
      content: "";
      display: inline-block;
      right: 7%;
      top: 50%;
      width: 9px;
      height: 9px;
      border-top: 3px solid #333;
      border-right: 3px solid #333;
      -webkit-transform: rotate(45deg) translateY(-50%);
      transform: rotate(45deg) translateY(-50%);
    }
    .pb-btn a:hover{
      border-color:#FF4B00;
      transition:0.2s;
      text-decoration:none;
      opacity:1;
    }
    @media screen and (max-width:600px) {
      .pb-btn{
        width:90%;
      }
      .pb-btn a {
        padding: 1.3em 1.3em 1.2em;
        font-size:14px !important;
      }
      .pb-btn .pb-btn__label{
        left:14px;
      }
      .pb-btn .pb-btn__add{
        text-align:left;
      }
    }

    .pb-btn__shadow a{
      box-shadow: 0px 4px 10px rgba(0,0,0,0.09);
      border:unset !important;
    }
    .pb-btn__shadow:hover{
      transform: translateY(2px);
    }
    .pb-btn__shadow:hover a{
      box-shadow: 0px 2px 5px rgba(0,0,0,0.09);
    }
    .pb-btn__shadow:hover .pb-btn__add{
      transform: translateY(-2px);
    }

/* 目次ここから */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#F6AA00;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 8px;
}

/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #F6AA00; /* 目次の文字色を変える場合はここを変更 */
	background:#F9F9F9;
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 28px;
    height: 28px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#F6AA00; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
	color: #666666;
}

.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f138";
margin-right: 7px;
	color: #F6AA00;/*お好みの色に*/
display: inline-block;/*これ入れたらアイコンのアンダーライン消える*/
}
.toc-list > li li a {
font-weight: normal;
margin-top:0;
margin-left: 2em;
	color: #888888;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #F6AA00;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

.toc-list > li li li a::before {
content: "";
width: 4px;
height: 4px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #888;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -0.1em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}
/* 目次ここまで */


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


}

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



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

}