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

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


/************************************
*　hタグのデザイン変更
************************************/

.article h1 {
  position: relative;
  padding: 0.25em 0;
}
.article h1:after {
  content: "";
  display: block;
  width: 90%;
  height: 4px;
  background: -webkit-linear-gradient(to right, #5195A2, transparent);
  background: linear-gradient(to right, #5195A2, transparent);
}

.article h2 {
  background: #1D6674;/*背景色*/
  width: 90%;
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

.article h3 {
    display: flex;
    width: 90%;
    align-items: center;
    padding: .5em .7em;
    background-color: #e5f3f6;
    color: #333333;
}

.article h3::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #1d6674;
    content: '';
}



.article h4 {
    position: relative;
    width: 90%;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #5195a2;
    color: #333333;
}

.article h4::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #5195a2;
    content: '';
}

.article h4::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #5195a2;
    content: '';
}

.article h5 {
    width: 90%;
    padding:0 .4em .2em;
    border-bottom: 3px dashed #5195a2;
    background-color: #ffffff;
    color: #333333;
}

.article h6 {
    width: 90%;
    padding: .5em .7em;
    border-left: 8px solid #5195A2;
    color: #333333;
}

/************************************
* 新着ニュース一覧の表示形式変更
************************************/
/*フロントタイトルリスト */
.info-list-item {
display:flex;/*横並びに変更*/
flex-direction: row-reverse;/*前後逆に*/
justify-content: flex-end;/*前後逆に*/
padding-bottom:0px;/*文字間調整*/
}

.info-list-item-categorys {
font-size: 20px; /* カテゴリの文字サイズ調整*/
}

.info-list-item-date {
font-size:16px;/*日付大きさ*/
margin-left:5px;/*文字間調整*/
color:#000000;/*日付文字色変更*/
}
.info-list-content{
margin:0px;/*文字間調整*/
}

/************************************
* 全画像のホバー時エフェクト処理
************************************/
a:hover img{
  opacity: 0.5; /*不透明度*/
  transition: all 0.2s ease; /*アニメーション*/
}

/************************************
*　サムネイル画像の左上のカテゴリーラベル非表示
************************************/

.cat-label {
display: none;
}

/************************************
*　記事内の目次の表示カスタマイズ
************************************/
#toc_container{
 margin: 0 auto;
}
/** PCでは幅500pxに固定 */
#toc_container{
  width: 500px;
}
/** スマホなどでは幅100%に固定 */
@media screen and ( max-width: 750px){
  #toc_container{
    width: 100%;
  }
}
/*=================================================================================
TOC+ の追従サイドバーを綺麗に表示する ここから
=================================================================================*/
/* サイドバー追従の表示カスタマイズ */

.toc_widget .widgettitle.ef {
    margin-bottom: 0px;
    border: none!important;
    border-radius: 0;
}

.toc_widget ul {
    background: white;
    padding: 20px 0px 20px 40px;
    border: 1px solid #1a120b;
    line-height: 1.8em;
    max-height: 500px;
    overflow-y: auto;
}

.toc_widget ul li {
    list-style: decimal;
}

.toc_widget ul li ul {
    border: none;
    padding: 2px 0px 2px 20px;
}

.toc_widget ul li ul li {
    list-style: disc;
}

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

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

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

/************************************
** 固定ページの非表示設定
************************************/
/*固定ページの枠線の非表示*/
#main {
border:none;
}
/*固定ページの投稿者名を非表示*/
#main .author-info{
  display: none;
}
/*固定ページのページタイトルを非表示*/
#main .entry-title{
  display: none;
}
/*固定ページの投稿日を非表示*/
#main .post-date{
  display: none;
}
/*固定ページの更新日を非表示*/
#main .post-update{
  display: none;
}