@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

#load-spin {
    position: relative;
    left: 50%;
}
#slide-in-load-spin {
    position: relative;
    left: 50%;
}
/*#spin-box {
    position: relative;
}*/
#time-ave {
    float: right;
}

#progress0 {
 float: right;
}
#progress10 {
 float: right;
}
#progress20 {
 float: right;
}
#progress30 {
 float: right;
}
#progress40 {
 float: right;
}
#progress50 {
 float: right;
}
#progress60 {
 float: right;
}
#progress70 {
 float: right;
}
#progress80 {
 float: right;
}
#progress90 {
 float: right;
}
#progress100 {
 float: right;
}

/*トップページ　不要な表示を削除*/
#post-376 h1.entry-title {
    display: none;
}
#post-376 .date-tags {
    display: none;
}

/*トップページ上部　カテゴリウィジェットのタイトル削除*/
div.widget-below-page-content-title-title.main-widget-label{
 display:none;
}
/*シングルページ下部　カテゴリウィジェットのタイトル削除*/
/*div.widget-single-content-bottom-title.main-widget-label{
 display:none;
}*/
#categories-7 .widget-above-single-sns-buttons-title{
   display:none; 
}

/*トップページ上部　カテゴリウィジェット　PCで非表示*/
/*シングルページ下部　カテゴリウィジェット　PCで非表示*/
@media screen and (min-width: 1024px){
  #custom_html-7{
    display: none;
  }
  #categories-6{
    display: none;
  }
  /*#custom_html-8{
    display: none;
  }
  #categories-7{
    display: none;
  }*/
}

/*著者情報(全記事リスト)へのリンク削除*/
.author-info{
    display: none; 
}

/* -------------------------------------------
/ 人気記事ランキングのカードデザイン調整
------------------------------------------- */

/* カード全体のラッパー */
.popular-entry-card-link {
  /* display: block; aタグをブロック要素にしてスタイルを適用しやすくする */
  background-color: #191919;
  color: #d3d3d3;
  text-decoration: none; /* リンクの下線を消す */
  /* display: flex; aタグをFlexコンテナにし、高さを揃える */
  /* flex-direction: column; 中の要素を縦に並べる */
}

/* 奇数番目のカード */
.popular-entry-card-link:nth-child(odd) {
  position: relative;
  z-index: 0;
}

.popular-entry-card-link:nth-child(odd)::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: 0.4s;
  background-image: linear-gradient(135deg, #1d1b1b, #1d1b1b 70%, #0c244c 70%, #0c244c 100%, transparent 0);
  border: 2px outset #332f2f;
  box-sizing: border-box; /* borderを含めてサイズ計算する */
}

.popular-entry-card-link:nth-child(odd)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  background-color: rgba(224, 134, 26, 0.08);
  border: 2px outset #aaaaaa;
  box-sizing: border-box; /* borderを含めてサイズ計算する */
}

/* 偶数番目のカード */
.popular-entry-card-link:nth-child(even) {
  position: relative;
  z-index: 0;
}

.popular-entry-card-link:nth-child(even)::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: 0.4s;
  background-image: linear-gradient(45deg, #0c244c, #0c244c 50%, #1d1b1b 50%, #1d1b1b 100%, transparent 0);
  border: 2px outset #332f2f;
  box-sizing: border-box; /* borderを含めてサイズ計算する */
}

.popular-entry-card-link:nth-child(even)::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  background-color: rgba(224, 134, 26, 0.08);
  border: 2px outset #aaaaaa;
  box-sizing: border-box; /* borderを含めてサイズ計算する */
}

/* ホバーエフェクト */
.popular-entry-card-link:hover {
  background: none;
  color: #d3d3d3;
}

.popular-entry-card-link:hover::before {
  opacity: 0;
}

/* カード内部のレイアウト調整 */
.popular-entry-card.widget-entry-card {
  display: flex;
  padding: 15px; /* 内側の余白 */
  /* height: 100%; */
  /* width: 100%; */
}

.popular-entry-card-thumb {
  width: 120px;
  flex-shrink: 0; /* 画像が縮まないようにする */
  margin: 0 15px 0 0;
}

.popular-entry-card-content {
  flex-grow: 1; /* 残りのスペースを埋める */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 内容を中央寄せ */
}

.popular-entry-card-title {
  color: #d3d3d3;
  /* font-size: 1em;  お好みのサイズに調整してください */
  /* margin: 0 0 0.5em 0; */
  font-size: 18px;
  margin: 0 0 0.4em 0;
  line-height: 1.6;
  font-weight: bold;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.popular-entry-card-date {
  font-size: 0.8em;
  opacity: 0.8;
}

/************************************
** エントリーカードのカテゴリ表示を消し人気記事ランキングの見た目に寄せる
************************************/
.entry-card-categorys.e-card-categorys {
  display: none !important;
}



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

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

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

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