@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. 全体の文字組み（palt / letter-spacing）
      1-2. 見出し（h2）装飾（グラデーション下線）
      1-3. 固定ページ：投稿日・タグ表示を非表示

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

   3. Cocoon Blocks
      3-1. プロフィールボックス（custom-profile）
      3-2. タブ付きキャプションボックス（tab-caption-box）

   4. Table (Common)
      4-1. テーブル内文字設定（wp-block-table）
      4-2. テーブル外枠（横スクロール / 縦スクロール抑止 / カード化）
      4-3. table 本体（min/max 幅、数字等幅）
      4-4. ヘッダー固定（thead sticky）
      4-5. 行ヘッダー固定（tbody th sticky）
      4-6. セル・行装飾（交互色 / hover）
      4-7. Responsive（スマホ：左固定解除）
      4-8. Print（印刷：固定解除 / 色・影調整）

   5. Table (Ranking)
      5-1. table-ranking-box：テーブル本体（5列固定）
      5-2. 列幅定義（20% × 5）
      5-3. ヘッダー行（改行禁止）
      5-4. データセル（数値主役・共通CSS遮断）
      5-5. 行背景（odd/even）
      5-6. hover（視線誘導）
      5-7. Responsive（スマホ：5列維持）

   6. Widgets / Affiliate
      6-1. 楽天アフィリエイト画像の読み込み制御（fade-in）
      6-2. 楽天モーション広告コンテナ
      6-3. SiteGuard / CAPTCHA 画像の表示制御（fade-in）

   運用ルール：
   ・新しい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 下線は無効化 */
  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: cover
   - 高さ：clampで可変
----------------------------------------------------- */
.entry-card-wrap img,
.snippet img {
  display: block !important;
  width: 100% !important;

  /* 高さは端末幅に応じて変動（最小140 / 最大200） */
  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独自のカスタムプロパティを無効化 */
  --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;

  /* ▼ここが変更点：折り返しOKにする */
  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; /* 2行折り返し想定 */
}

/* #####################################################
   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 幅で暴走抑止
   - 数字の桁揃え（tabular-nums）
----------------------------------------------------- */
.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 以下）
   - 左固定ヘッダーを解除して崩れ防止
----------------------------------------------------- */
@media screen and (max-width: 768px) {
  .wp-block-table {
    margin-left: 2vw;
    margin-right: 2vw;
  }

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

@media screen and (max-width: 768px) {
  /* スクロールさせる箱（figure） */
  .wp-block-table{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

/* ★本丸：直下でなくても table を拾う */
  .wp-block-table table{
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
}

/* -----------------------------------------------------
   4-8. 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;
  }
}

/* -----------------------------------------------------
   4-8 Tables / Mobile core（上書き用）
   - 横スクロールは許容
   - 数値・金額は1行固定
   - 項目列は改行OK
----------------------------------------------------- */

@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; /* 好みで調整（7〜10em） */
  }

  /* 2列目以降：意味を壊さない（円の前で改行させない） */
  .wp-block-table th:not(:first-child),
  .wp-block-table td:not(:first-child) {
    white-space: nowrap;
  }

  /* 任意：数値は右寄せの方が読みやすい */
  .wp-block-table td:not(:first-child) {
    text-align: right;
  }
}

/* -----------------------------------------------------
   4-9 Common Table / Caption
   - figcaption（Gutenberg テーブルのキャプション）
   - 本文(#333333)より一段薄い色にする
----------------------------------------------------- */

/* キャプションだけ例外でサイズを落とす */
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;
}

/* #####################################################
   5. Table (Ranking)
   - table-ranking-box 専用（5列固定 / 共通CSS遮断）
##################################################### */

/* -----------------------------------------------------
   5-1. テーブル本体（5列固定の土台）
----------------------------------------------------- */
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. 行背景（odd / even）
----------------------------------------------------- */
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-7. 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;
  }
}

/* ==============================
   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;
}

/* ==============================
   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;
}

/* ==============================
   背景演出：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;
}

/* ==============================
   背景演出：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;
}

/* ==============================
   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;
}

/* ==============================
   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;
}

/* #####################################################
   6. Widgets / Affiliate
##################################################### */

/* -----------------------------------------------------
   6-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;
}

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

/* -----------------------------------------------------
   6-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;
}