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

/************************************
** ⓪ スマホ表示領域設定
************************************/
@media (max-width: 767px) {
  main#main, #content, .wrap {
    padding-left: 3% !important;
    padding-right: 2% !important;
  }
}

/************************************
** ① 記事一覧・画像切り抜き
************************************/
.entry-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.entry-card-thumb img,
.widget-entry-card-thumb img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}

.entry-card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: bold !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  height: calc(1.4em * 3) !important;
  margin: 0 0 8px 0 !important;
}

/************************************
** ② 記事タイトル・③ 記事内画像の中央寄せ（巨大化対策済）
************************************/
.entry-title {
  background-color: #f0f0f0 !important;
  color: #000000 !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
}

/* 記事本文内の画像だけを中央寄せにし、巨大化を防ぐ */
.entry-content .wp-block-image img,
.entry-content .aligncenter,
.entry-content img.aligncenter {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/************************************
** ④ 関連作品タイトル・⑤ 関連記事レイアウト
************************************/
.widget-single-content-bottom-title {
  background-color: #f0f0f0 !important;
  color: #333333 !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  font-size: 1.5rem !important;
  margin-bottom: 20px !important;
}

.widget-related-entry-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

.widget-related-entry-card-link {
  width: 48% !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/************************************
** ⑥ スマホ記事一覧・2列表示
************************************/
@media (max-width: 767px) {
  .entry-card-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 1px !important;
    row-gap: 1px !important;
    padding: 1px !important;
  }
  .entry-card-thumb {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background-color: #000 !important;
    position: relative !important;
  }
  .entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .entry-card { margin: 0 !important; }
}

/************************************
** ⑦ セールバッジ・⑧ サイドバー・目次・紹介文
************************************/
.sale-badge {
  position: absolute !important;
  top: 5px !important; right: 5px !important;
  background: red !important; color: white !important;
  padding: 3px 6px !important; font-weight: bold !important;
  font-size: 12px !important; border-radius: 3px !important; z-index: 10 !important;
}

.widget-sidebar-title { text-align: center !important; }
#toc { display: none !important; }

#top-intro {
  font-size: 20px !important; line-height: 1.5 !important; color: #333 !important;
  margin-bottom: 1em !important; font-weight: bold !important;
}

/************************************
** ⑨ 作品情報表・⑩ ランキング
************************************/
.c-figure-data { width: 100% !important; border: 1px solid #DDD !important; border-collapse: collapse !important; line-height: 1.8 !important; margin: 20px 0 !important; }
.c-figure-data th { width: 30% !important; background-color: #f3fafe !important; padding: 12px 10px !important; border: 1px solid #DDD !important; }
.c-figure-data td { padding: 12px 10px !important; border: 1px solid #DDD !important; }

.ranking-top3, .ranking-columns { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 20px !important; }
.ranking-item { width: calc((100% - 40px)/3) !important; border: 1px solid #ddd !important; border-radius: 8px !important; padding: 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.ranking-thumbnail-wrapper { position: relative !important; width: 100% !important; height: 200px !important; }
.ranking-thumbnail-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ranking-rank-overlay { position: absolute !important; top: 0 !important; left: 0 !important; background-color: rgba(255,152,0,0.9) !important; color: #fff !important; padding: 5px 10px !important; font-weight: bold !important; border-radius: 8px 0 8px 0 !important; }
.ranking-link { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; text-decoration: none !important; }

@media (max-width:768px){
  .ranking-top3, .ranking-columns { flex-direction: column !important; gap: 15px !important; }
  .ranking-item { width: 100% !important; }
  .ranking-columns .ranking-thumbnail-wrapper { height: 250px !important; }
}

/************************************
** ⑪ メニュー・タブ・YouTube
************************************/
#menu-header-menu li > a { font-weight: 700 !important; }
.sidebar-menu-content, #navi .menu-mobile { background-color: #f9f9f9 !important; }
.site-logo-image, .header-site-logo-image { display: block !important; margin: 0 auto !important; height: 150px !important; }

.c-list-control__options { display: flex !important; border: 1px solid #ccc !important; border-radius: 5px !important; overflow: hidden !important; max-width: 250px !important; margin-bottom: 20px !important; list-style: none !important; padding: 0 !important;}
.c-list-control__options li { flex: 1; text-align: center; }
.c-list-control__options a { display: block !important; padding: 10px 15px !important; background-color: #f7f7f7 !important; text-decoration: none !important; color: #555 !important; }
.c-list-control__options li.is-select a { background-color: #fff !important; color: #000 !important; font-weight: bold !important; position: relative !important; }
.c-list-control__options li.is-select a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #4285F4 !important; }

.youtube-container { position: relative !important; width: 100% !important; padding-bottom: 56.25% !important; height: 0 !important; margin: 20px auto !important; }
.youtube-container iframe { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.download-btn { display: inline-block !important; padding: 14px 30px !important; background-color: #f90 !important; color: #fff !important; font-weight: bold !important; border-radius: 5px !important; text-decoration: none !important; }