@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){
  /*必要ならばここにコードを書く*/
}

/* Tabkul Cocoon ranking START */
#text-40 .tabkul-cocoon-rank-heading {
    background: #f2f3f5;
    border-left: 4px solid #b8b8b8;
    padding: 11px 12px;
    margin: 22px 0 14px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
}

#text-40 .popular-entry-cards {
    margin: 0 0 14px !important;
    padding: 0 !important;
}

#text-40 .popular-entry-card-link {
    display: block !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

#text-40 .popular-entry-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#text-40 .popular-entry-card-thumb {
    float: none !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

#text-40 .popular-entry-card-thumb img {
    display: block;
    width: 80px !important;
    height: 80px !important;
    max-width: none !important;
    object-fit: cover;
}

#text-40 .popular-entry-card-content {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#text-40 .popular-entry-card-title {
    display: block;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

#text-40 .tabkul-review-more {
    margin: 6px 0 18px !important;
    font-size: 13px;
}
/* Tabkul Cocoon ranking END */

/* TABKUL COMPACT POPULAR START */

/* 通常ランキング3種類の並びを統一 */
#text-40 .popular-entry-cards.tabkul-cocoon-rank {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* Cocoonのclearfixが余分な要素にならないようにする */
#text-40 .popular-entry-cards.tabkul-cocoon-rank::before,
#text-40 .popular-entry-cards.tabkul-cocoon-rank::after {
    content: none !important;
    display: none !important;
}

/* 記事リンク自体の高さと余白 */
#text-40 .tabkul-cocoon-rank > .popular-entry-card-link {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
}

/* サムネイル＋タイトルを横並び */
#text-40 .tabkul-cocoon-rank .popular-entry-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 80pxの画像 */
#text-40 .tabkul-cocoon-rank .popular-entry-card-thumb {
    float: none !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#text-40 .tabkul-cocoon-rank .popular-entry-card-thumb img {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
}

/* タイトルを画像の右側へ */
#text-40 .tabkul-cocoon-rank .popular-entry-card-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* TABKUL COMPACT POPULAR END */

/* TABKUL INDIVIDUAL RANK START */

.tabkul-cocoon-migration .popular-entry-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tabkul-cocoon-migration .popular-entry-card-link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tabkul-cocoon-migration .popular-entry-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tabkul-cocoon-migration .popular-entry-card-thumb {
    float: none !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.tabkul-cocoon-migration .popular-entry-card-thumb img {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
}

.tabkul-cocoon-migration .popular-entry-card-content {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tabkul-cocoon-migration .popular-entry-card-title {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.tabkul-cocoon-migration .tabkul-review-more {
    margin: 12px 0 0;
}



/* TABKUL NORMAL RANK SPACING AND HOVER */

/* 通常ランキングのカード間隔 */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* リンクの左右余白を縮小 */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 7px 4px 9px 7px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* 画像とタイトルの間隔を28pxから10pxに */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link .popular-entry-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* タイトルの表示領域を確保 */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
.popular-entry-card-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Cocoonのリンク全体のホバー背景を無効化 */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link:hover,
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* ホバー時も画像の色と明るさを維持 */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link:hover img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* WPPと同様、文字だけ赤くする */
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link:hover .popular-entry-card-title,
.tabkul-cocoon-migration
.popular-entry-cards:not(.tabkul-review-cards)
> a.popular-entry-card-link:focus-visible .popular-entry-card-title {
    color: #d32f2f !important;
    text-decoration: none !important;
}

/* TABKUL INDIVIDUAL RANK END */

/* TABKUL HOME TOP5 COCOON START */
/* ホームTOP5：WPP時代の視認性を再現。対象はこのランキングのみ */
.tabkul-home-popular .tabkul-home-popular-heading {
  font-size: 18px !important;
  
  margin-bottom: 15px !important;
  color: #222 !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.tabkul-home-popular .tabkul-home-heading-main {
  font-size: 18px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.tabkul-home-popular .tabkul-home-heading-detail {
  font-size: 15px !important;
  display: inline !important;
  margin-left: 0.7em;
  
  font-weight: 700 !important;
  text-decoration: none !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list {
  counter-reset: tabkul-home-ranking;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list > a.popular-entry-card-link {
  counter-increment: tabkul-home-ranking;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list > a.popular-entry-card-link::before {
  content: counter(tabkul-home-ranking);
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
  background: #999 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list .popular-entry-card {
  box-sizing: border-box !important;
  flex: 1 1 0% !important;
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list .popular-entry-card-thumb,
.tabkul-home-popular .tabkul-home-cocoon-list .popular-entry-card-meta {
  display: none !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list .popular-entry-card-content {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list .popular-entry-card-title {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #153c99 !important;
  text-decoration: underline !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list > a.popular-entry-card-link:hover,
.tabkul-home-popular .tabkul-home-cocoon-list > a.popular-entry-card-link:focus-visible {
  background: transparent !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.tabkul-home-popular .tabkul-home-cocoon-list > a.popular-entry-card-link:hover .popular-entry-card-title,
.tabkul-home-popular .tabkul-home-cocoon-list > a.popular-entry-card-link:focus-visible .popular-entry-card-title {
  color: #d32f2f !important;
}
/* TABKUL HOME TOP5 COCOON END */