@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;
  }
}

/************************************
** ① PC・タブレット用（768px以上）
************************************/
@media screen and (min-width: 768px) {
  .entry-card-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px 2% !important;
  }

  .entry-card-wrap a.entry-card-link {
    width: 32% !important; /* 3列設定。2列なら49%に */
    display: flex !important;
    flex-direction: column !important;
  }

  .entry-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .entry-card-thumb {
    width: 100% !important;
    height: 180px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* PCのタイトルサイズ調整 */
  .entry-card-title {
    font-size: 18px !important; /* PC向けに大きく */
    line-height: 1.5 !important;
    height: 3em !important; /* 1.5em × 2行分 */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    margin: 10px 0 !important;
    font-weight: bold !important;
  }
}

/************************************
** ⑥ スマホ記事一覧・2列表示（767px以下）
************************************/
@media screen and (max-width: 767px) {
  .entry-card-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 5px !important;
  }

  .entry-card-wrap a.entry-card-link {
    width: 48.5% !important;
    margin-bottom: 15px !important;
    display: flex !important;
  }

  .entry-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .entry-card-thumb {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
  }

  .entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* スマホのタイトルサイズ調整 */
  .entry-card-title {
    font-size: 15px !important; /* スマホで見やすいサイズ */
    line-height: 1.4 !important;
    height: 2.8em !important; /* 1.4em × 2行分 */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    margin: 5px 0 !important;
    font-weight: bold !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;
}

/************************************
** ⑦ セールバッジ・⑧ サイドバー・目次・紹介文
************************************/
.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%;
  border: 1px solid #CCC; /* 枠線を少し濃くして引き締め */
  border-collapse: collapse;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}

.c-figure-data th {
  width: 30%;
  background-color: #f3fafe;
  padding: 16px 10px;    /* 余白をたっぷり取る */
  border: 1px solid #CCC;
  font-weight: bold;
  font-size: 20px !important; /* ★特大サイズ */
  color: #333;
  vertical-align: middle;
}

.c-figure-data td {
  padding: 16px 15px;    /* 余白をたっぷり取る */
  border: 1px solid #CCC;
  font-weight: 800;      /* ★最強の太さに設定 */
  font-size: 20px !important; /* ★特大サイズ */
  color: #000 !important;     /* ★真っ黒 */
  vertical-align: middle;
}

/* リンク（青文字）の装飾 */
.c-figure-data td a {
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #005bac !important;
  text-decoration: underline;
  text-decoration-thickness: 2px; /* 下線を少し太くして視認性アップ */
  text-underline-offset: 4px;
}

/* スマホで横幅が狭い時に文字が溢れるのを防ぐ */
@media screen and (max-width: 480px) {
  .c-figure-data th,
  .c-figure-data td {
    font-size: 18px !important; /* スマホでは少しだけ調整（大きすぎ防止） */
    padding: 12px 8px;
  }
}

/************************************
** ⑩ ランキング
************************************/
.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; }