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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
0
21
22
23
24
25
26
27
28
29
30
31
32
33
 
/************************************
** サイトタイトル非表示
************************************/
 
.site-name-text{
  display: none;
}
 
/*ヘッダーレイアウトがトップメニューのとき*/
.header-container-in.hlt-top-menu .site-name-text{
  display: none;
}
 
/*ヘッダーレイアウトがトップメニュー（小）のとき*/
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text{
  display: none;
}
 
/*端末幅が768px以下のとき*/
@media screen and (max-width: 768px){
  #header .site-name-text{
    display: none;
  }
}
 
/*端末幅が480px以下のとき*/
@media screen and (max-width: 480px){
  #header .site-name-text{
    display: none;
  }
}
/*カラム背景色*/
.header-container,
.main,
.sidebar,
.footer {
background-color: #282828;
}
/* インデックスカード タイトル文字色 */
.entry-card-title,
.e-card-info > span{
color: #ffffff;
}
/*人気記事のタイトル文字色 */
.popular-entry-card-title{
color: #ffffff;
}
/*---------------------------------
目次の文字サイズを変える
--------------------------------*/
.toc-title {
  font-size: 20px; /*目次の文字サイズ*/
  color: #ffffff; /*目次の文字の色*/
}

.toc .toc-list li a {
  font-size:14px; /*見出しの文字サイズ*/
  color: #ffffff; /*見出しの文字の色*/
}

.toc .toc-list li{
  font-size:14px; /*数字部分の文字サイズ*/
  color: #ffffff; /*数字部分の文字色*/
}
/* 関連記事 タイトル文字色 */
.related-entry-card-title {
color: #ffffff;
}
.tag-link {
color: #ffffff;
border:none;
background-color: transparent;
}
/*ヘッダーの色と高さを変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #282828;
	color: #FFFFFF;
	height: 60px;
	padding-top: 12px;
}

.logo-menu-button.menu-button{
	background-color: #282828;
}/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 180px;
	margin: 10px auto 0;
}
}
/* メインカラムのテキストを白にする */
.a-wrap {
color: #ffffff;
}
.pagination-next {
  display: none;
}
.page-numbers { /*通常時*/
  color: #efec13;
  border: 1px solid #efec13;
}
.pagination .current { /*現在のページ*/
  background-color: #696969;
  color: #fff;
}
.page-numbers.dots { /*ドット「…」の部分*/
  opacity: 1;
  background: none;
}
.pagination a:hover { /*マウスホバー時*/
  background-color: #efec13;
  color: #282828;
}
.logo-header{
  display: none;
} 
.cat-label {
display: none;
}
/*– 目次の中央配置 –*/
#toc_container {
margin-left: auto;
margin-right: auto;
}
.mobile-footer-menu-buttons,
.navi-menu-content,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
background: #282828;
color: #ffffff;
}
/* 見出しのデザインリセット */ 
/*H2 */
.entry-content h2{
border:none;
background:#efec13;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:#efec13;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:#efec13;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:#efec13;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:#efec13;
padding: 0;
}
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
/************************************
****　記事本文　ブログカード
************************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #C0C0C0;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after,
.external-blogcard::after{
content: "続きを読む ≫"; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #696969;/*続きを読むの背景色変更はこちら*/
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-content{
max-height: none;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
	color: #000000;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}
.toc-title{
background: yellow ; /*背景色*/
color: black ; /*文字の色*/
font-weight: bold; /*文字を太くする*/
}
.toc {
background: black ; /*背景色*/
border: 3px solid deepskyblue; /*枠線 太さ、種類、色*/
}
.toc a {
color: #ffffff ;
font-size: 16px;
font-weight: bold;
}
/************************************
** もっと見るボタンの変更
************************************/

.list-more-button {
	background: #ffffff; /* ボタンの背景色を藍色に変更しています */
	color: #282828; /* 文字色を変更 */
	border: none; /* ボタンの外枠を消しています */
}
.list-more-button:hover { /* クラス名の隣に:hoverをつけると、カーソルがあたった時の挙動を変更できます */
	background: #696969;
	color: #ffffff;
	border: none;
}