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

/* =====================================================
   CSS 全体構成（目次 / 設計メモ）

   1. Base / Typography
      1-1. 全体の文字組み
      1-2. 見出し（h2）装飾
      1-3. 固定ページ：投稿日・タグ表示を非表示

   2. Media / Layout
      2-1. 記事内画像：読み込み完了までフェードイン
      2-2. 記事カード・スニペット画像のサイズ固定

   3. Cocoon Blocks
      3-1. 記事冒頭：執筆者プロフィール
      3-2. タブ付きキャプションボックス

   4. Table (Common)
      4-1. テーブル内文字設定
      4-2. テーブル外枠
      4-3. table本体
      4-4. テーブルヘッダー
      4-5. 行ヘッダー
      4-6. 通常セル・交互色
      4-7. Responsive：基本レイアウト
      4-8. Responsive：列幅・折り返し
      4-9. キャプション
      4-10. Print

   5. Table (Ranking)
      5-1. テーブル本体
      5-2. 列幅定義
      5-3. ヘッダー行
      5-4. データセル
      5-5. 行背景
      5-6. Responsive

   6. Review
      6-1. Review container
      6-2. Review item
      6-3. good背景
      6-4. bad背景
      6-5. Review text
      6-6. Review source

   7. Widgets / Affiliate / Page
      7-1. 楽天アフィリエイト画像の読み込み制御
      7-2. 楽天モーション広告コンテナ
      7-3. SiteGuard / CAPTCHA画像の表示制御
      7-4. フロントページ見出し
      7-5. 投稿者情報非表示

   運用ルール：
   ・新しいCSSは必ず該当セクションに追加
   ・用途特化はクラスでスコープする
   ・共通CSSに例外ロジックを入れない
===================================================== */


/* #####################################################
   1. Base / Typography
##################################################### */

/* -----------------------------------------------------
   1-1. 全体の文字組み設定
   - プロポーショナル字形（palt）を有効化
   - 本文の文字間を調整
----------------------------------------------------- */
body {
  font-feature-settings: "palt" !important;
}

/* 本文のみ字間を広げる */
.entry-content,
.page-content {
  letter-spacing: 0.1em !important;
}

/* テーブル内は通常字間（数値可読性優先） */
.wp-block-table,
.wp-block-table * {
  letter-spacing: normal !important;
}


/* -----------------------------------------------------
   1-2. 見出し（h2）装飾
   - 疑似要素でグラデーション下線
----------------------------------------------------- */
h2 {
  position: relative;
  color: #3b4043;
  font-weight: 600;

  margin: 28px 0 18px 0;
  padding-bottom: 12px;

  background-image: none !important;
}

/* グラデーション下線 */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    to right,
    #8bbef2 0%,
    #a3cfff 25%,
    #c7d2fe 50%,
    #d1d5db 75%,
    #e5e7eb 100%
  );
}


/* -----------------------------------------------------
   1-3. 固定ページ：投稿日・タグ表示を非表示
----------------------------------------------------- */
.page .date-tags {
  display: none;
}


/* #####################################################
   2. Media / Layout
##################################################### */

/* -----------------------------------------------------
   2-1. 記事内画像：読み込み完了までフェードイン
   - 対象：本文の画像ブロック中心
   - 表内画像は除外
   - prefers-reduced-motion対応
----------------------------------------------------- */

/* 表内の画像はフェードさせない */
.entry-content .wp-block-table img {
  opacity: 1 !important;
  transition: none !important;
}

/* フェード対象を画像ブロック / figure中心に限定 */
.entry-content .wp-block-image img,
.entry-content figure img {
  max-width: 100% !important;
  height: auto !important;
  min-height: 10px !important;

  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 読み込み後に表示 */
.entry-content .wp-block-image img[src],
.entry-content figure img[src] {
  opacity: 1;
}

/* 動きを減らしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-image img,
  .entry-content figure img {
    transition: none !important;
  }
}


/* -----------------------------------------------------
   2-2. 記事カード・スニペット画像のサイズ固定
   - object-fitで歪み防止
   - 高さはclampで可変
----------------------------------------------------- */
.entry-card-wrap img,
.snippet img {
  display: block !important;
  width: 100% !important;

  height: clamp(140px, 20vw, 200px) !important;

  aspect-ratio: 16 / 9 !important;

  object-fit: cover !important;
  object-position: center !important;
}


/* #####################################################
   3. Cocoon Blocks
##################################################### */

/* -----------------------------------------------------
   3-1. 記事冒頭：執筆者プロフィール
----------------------------------------------------- */
.author-profile-box{
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
}

.author-profile-inner{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.author-avatar img{
  border-radius: 50%;
}

.author-name{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.author-name span{
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.8;
}

.author-desc{
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 768px){
  .author-avatar{
    display: none;
  }
}


/* -----------------------------------------------------
   3-2. Cocoon：タブ付きキャプションボックス
   - テーマ標準の装飾を無効化
   - カスタム側で見た目を制御
----------------------------------------------------- */
.cocoon-block-tab-caption-box,
.tab-caption-box {
  --cocoon-custom-border-color: transparent !important;
  --cocoon-custom-background-color: transparent !important;

  border-width: 0 !important;
  box-shadow: none !important;

  background-color: #fff !important;
}

/* タブ付きキャプションボックス本体 */
.cocoon-block-tab-caption-box {
  position: relative !important;

  padding: 0 !important;

  margin-bottom: 25px !important;

  border-radius: 0 !important;

  border: 1px solid rgb(119, 136, 147) !important;
}

/* タブラベル */
.tab-caption-box-label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  padding: 2.5px 10px 2.5px 15px !important;
  margin: 0 !important;

  background-color: rgb(119, 136, 147) !important;

  border-radius: 0 !important;

  white-space: normal !important;
  height: auto !important;
  line-height: 1.3 !important;
  max-width: 100%;
  box-sizing: border-box;

  color: rgb(255, 255, 255) !important;
}

/* タブコンテンツ領域 */
.tab-caption-box-content {
  padding-top: 44px !important;
}


/* #####################################################
   4. Table (Common)
##################################################### */

/* -----------------------------------------------------
   4-1. テーブル内文字設定
----------------------------------------------------- */
body .wp-block-table th,
body .wp-block-table td {
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}


/* -----------------------------------------------------
   4-2. テーブル外枠
   - 横スクロール対応
   - 縦スクロール抑止
   - カード風装飾
----------------------------------------------------- */
.wp-block-table {
  margin: 2rem 0;
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}


/* -----------------------------------------------------
   4-3. table本体
   - min/max幅設定
   - 数字を等幅表示
----------------------------------------------------- */
.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: auto !important;

  min-width: 300px;
  max-width: 1200px;

  background: #fff;
  border: 1px solid #dee2e6;

  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}


/* -----------------------------------------------------
   4-4. テーブルヘッダー
   - 上部固定
----------------------------------------------------- */
.wp-block-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  background: #2c3e50 !important;
  color: #fff;

  font-weight: 600;
  padding: 16px 8px;
  text-align: center;

  border: 1px solid #485e74;
}


/* -----------------------------------------------------
   4-5. 行ヘッダー
   - 左列固定
----------------------------------------------------- */
.wp-block-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;

  background: #f8f9fa !important;
  font-weight: 600;
  padding: 16px 16px;

  border: 1px solid #dee2e6;
}


/* -----------------------------------------------------
   4-6. 通常セル・交互色
----------------------------------------------------- */
.wp-block-table tbody td {
  padding: 16px 8px;
  border: 1px solid #dee2e6;
}

/* 交互色 */
.wp-block-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}


/* -----------------------------------------------------
   4-7. Responsive：基本レイアウト
   - 768px以下
   - 左固定ヘッダー解除
   - 横スクロール
   - table幅制御
----------------------------------------------------- */
@media screen and (max-width: 768px) {
  .wp-block-table {
    margin-left: 2vw;
    margin-right: 2vw;
  }

　.wp-block-table th,
  .wp-block-table td {
    font-size: 13px !important;
  }

  .wp-block-table tbody th {
    position: static;
    left: auto;
  }
}

@media screen and (max-width: 768px) {
  .wp-block-table{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-table table{
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
}


/* -----------------------------------------------------
   4-8. Responsive：列幅・折り返し
   - 横スクロールは許容
   - 1列目は改行可
   - 2列目以降は改行禁止
----------------------------------------------------- */
@media screen and (max-width: 768px) {

  .wp-block-table {
    overflow-x: auto;
  }

  /* 1列目：項目列 */
  .wp-block-table th:first-child,
  .wp-block-table td:first-child {
    white-space: normal;
    min-width: 7.5em;
  }

  /* 2列目以降 */
  .wp-block-table th:not(:first-child),
  .wp-block-table td:not(:first-child) {
    white-space: nowrap;
  }
}


/* -----------------------------------------------------
   4-9. Common Table / Caption
   - Gutenbergテーブルのキャプション
----------------------------------------------------- */
body .wp-block-table figcaption.wp-element-caption,
body .wp-block-table .wp-element-caption {
  font-size: 13px !important;
  color: #666666;
  line-height: 1.4;
  letter-spacing: 0.02em;
}


/* -----------------------------------------------------
   4-10. Print
   - スクロール解除
   - 固定解除
   - 印刷向けの色・影調整
----------------------------------------------------- */
@media print {
  .wp-block-table {
    overflow-x: visible;
    box-shadow: none;
  }

  .wp-block-table table {
    min-width: auto;
  }

  .wp-block-table thead th {
    position: static;
    background: #f8f9fa !important;
    color: #000;
  }

  .wp-block-table tbody th {
    position: static;
    left: auto;
  }

  .wp-block-table tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* #####################################################
   5. Table (Ranking)
   - table-ranking-box専用
   - 5列固定
   - 共通CSSを必要に応じて上書き
##################################################### */

/* -----------------------------------------------------
   5-1. テーブル本体
----------------------------------------------------- */
body .wp-block-table.table-ranking-box table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}


/* -----------------------------------------------------
   5-2. 列幅定義
   - 5列前提：20% × 5
----------------------------------------------------- */
body .wp-block-table.table-ranking-box thead th,
body .wp-block-table.table-ranking-box tbody td {
  width: 20% !important;
}


/* -----------------------------------------------------
   5-3. ヘッダー行
   - 改行禁止
----------------------------------------------------- */
body .wp-block-table.table-ranking-box thead th {
  padding: 16px 12px !important;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  color: #fff !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;

  border: none !important;
  white-space: nowrap !important;
}


/* -----------------------------------------------------
   5-4. データセル
   - 数値を主役にした表示
   - 共通CSSを上書き
----------------------------------------------------- */
body .wp-block-table.table-ranking-box tbody td,
body .wp-block-table.table-ranking-box tbody td * {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  text-align: right !important;
  padding: 24px 16px !important;
  vertical-align: middle !important;
  min-height: 90px !important;

  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;

  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: inherit !important;
  text-decoration: none !important;
}


/* -----------------------------------------------------
   5-5. 行背景
----------------------------------------------------- */
body .wp-block-table.table-ranking-box tbody tr:nth-child(odd) td {
  background: #f8fafc !important;
}

body .wp-block-table.table-ranking-box tbody tr:nth-child(even) td {
  background: #e2e8f0 !important;
}


/* -----------------------------------------------------
   5-6. Responsive
   - スマホでも5列維持
   - 改行禁止
----------------------------------------------------- */
@media screen and (max-width: 768px) {
  body .wp-block-table.table-ranking-box {
    margin: 1rem 0 !important;
    overflow-x: auto !important;
  }

  body .wp-block-table.table-ranking-box table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  body .wp-block-table.table-ranking-box th,
  body .wp-block-table.table-ranking-box td {
    width: 20% !important;
  }

  body .wp-block-table.table-ranking-box thead th {
    font-size: 9.5px !important;
    padding: 8px 1px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.4px !important;
    font-weight: 600 !important;
  }

  body .wp-block-table.table-ranking-box tbody td,
  body .wp-block-table.table-ranking-box tbody td * {
    font-size: 19px !important;
    padding: 14px 3px !important;
  }
}


/* #####################################################
   6. Review
##################################################### */

/* -----------------------------------------------------
   6-1. Review container
----------------------------------------------------- */
.review-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: 15px;
  padding: 20px 10px;
  max-width: 100%;
  scrollbar-width: thin;
}


/* -----------------------------------------------------
   6-2. Review item
----------------------------------------------------- */
.review-item {
  flex: 0 0 240px;
  height: 240px;
  padding: 20px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}


/* -----------------------------------------------------
   6-3. good背景
----------------------------------------------------- */
.review-item.good::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 20px solid #4CAF50;
  border-radius: 50%;
  opacity: 0.25;
  z-index: 0;
  box-sizing: border-box;
}


/* -----------------------------------------------------
   6-4. bad背景
----------------------------------------------------- */
.review-item.bad::before {
  content: '×';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  font-size: 180px;
  color: #f44336;
  opacity: 0.25;
  z-index: 0;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* -----------------------------------------------------
   6-5. Review text
----------------------------------------------------- */
.review-text {
  flex: 1;
  white-space: normal;
  line-height: 1.5;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  position: relative;
  z-index: 2;
  margin: 0;
}


/* -----------------------------------------------------
   6-6. Review source
----------------------------------------------------- */
.review-source {
  margin-top: auto;
  font-size: 0.85em;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 8px;
  position: relative;
  z-index: 2;
}


/* #####################################################
   7. Widgets / Affiliate / Page
##################################################### */

/* -----------------------------------------------------
   7-1. 楽天アフィリエイト画像の読み込み制御
----------------------------------------------------- */
.widget a[href*="afl.rakuten.co.jp"] img,
.widget img[src*="hbb.afl.rakuten.co.jp"] {
  opacity: 0;
  transition: opacity 0.3s;
}

.widget a[href*="afl.rakuten.co.jp"] img[src],
.widget img[src*="hbb.afl.rakuten.co.jp"][src] {
  opacity: 1;
}


/* -----------------------------------------------------
   7-2. 楽天モーション広告コンテナ
----------------------------------------------------- */
.rakuten-motion-container {
  width: 300px;
  height: 160px;
  margin: 20px auto;
  background: #f8f9fa;
}


/* -----------------------------------------------------
   7-3. SiteGuard / CAPTCHA画像の表示制御
----------------------------------------------------- */
img[src*="wp-content/siteguard/"],
img[alt="CAPTCHA"] {
  width: 72px !important;
  height: 24px !important;
  opacity: 0;
  transition: opacity 0.3s;
}

img[src*="wp-content/siteguard/"][src],
img[alt="CAPTCHA"][src] {
  opacity: 1;
}


/* -----------------------------------------------------
   7-4. フロントページ（page-id-16451）の見出しのみ弱体化
----------------------------------------------------- */
body.page-id-16451 .entry-content > h2.wp-block-heading.has-text-align-center {
  position: static;
  margin: 22px 0 10px;
  padding-bottom: 0;
  background: none !important;
  color: #3b4043;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

/* 既存の下線装飾を無効化 */
body.page-id-16451 .entry-content > h2.wp-block-heading.has-text-align-center::after {
  content: none !important;
}

/* スマホ */
@media (max-width: 768px) {
  body.page-id-16451 .entry-content > h2.wp-block-heading.has-text-align-center {
    font-size: 20px;
    margin: 18px 0 8px;
  }
}


/* -----------------------------------------------------
   7-5. 投稿者情報非表示
----------------------------------------------------- */
.author-info {
  display: none;
}