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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* =========================
   ファーストビュー
========================= */
.fv {
  background: #f5f8ff;
  padding: 24px 16px;
  margin-bottom: 24px;
}

.fv h1 {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.badge {
  display: inline-block;
  background: #ff6b6b;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  margin-right: 8px;
}

.label {
  display: inline-block;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  background: #e0f2f1;
  color: #00695c;
}

.label-danger {
  display: inline-block;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  background: #ffebee;
  color: #c62828;
}

/* =========================
   ファーストビュー：ポイントリスト
========================= */
.fv-point {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 16px;
}

.fv-point li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 6px;
}

.fv-point li:not(.ng)::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #4caf50;
  font-weight: bold;
}

.fv-point li.ng::before {
  content: "✖";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #e53935;
  font-weight: bold;
}

/* =========================
   ランキング
========================= */
.ranking-box {
  border: 2px solid #ff9800;
  border-radius: 8px;
  padding: 16px;
  background: #fff7e6;
  margin-bottom: 24px;
}

.section-title {
  font-size: 1.5rem;
  margin: 32px 0 16px;
  border-left: 4px solid #ff6b6b;
  padding-left: 8px;
}

.sub-title {
  font-size: 1.2rem;
  margin: 24px 0 8px;
}

/* =========================
   ランキングカード
========================= */
.rank-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.rank-content {
  flex: 1;
  min-width: 0;
}

.app-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eee;
}

.rank-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
}

.rank-num.rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFB300);
}
.rank-num.rank-2 {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
}
.rank-num.rank-3 {
  background: linear-gradient(135deg, #CD7F32, #B87333);
}

@media screen and (max-width: 480px) {
  .rank-item {
    flex-direction: column;
    position: relative;
  }

  .rank-num {
    position: absolute;
    top: -12px;
    left: -12px;
    z-index: 3;
    width: 44px;
    height: 44px;
    font-size: 0.9rem;
  }

  .app-logo {
    margin-top: 16px;
  }
}

/* =========================
   テーブル
========================= */
.table_box {
  overflow-x: auto;
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 20px;
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
}

th {
  background: #fafafa;
}

.sticky {
  position: sticky;
  left: 0;
  background: #fafafa;
  z-index: 2;
}

table tr:nth-child(even) {
  background: #fafafa;
}

table tr:nth-child(even) .sticky {
  background: #fafafa;
}

/* =========================
   E‑E‑A‑T セクション
========================= */
.eaat-section {
  background: #fafafa;
  padding: 40px 20px;
  border-radius: 12px;
  margin-top: 40px;
  border: 1px solid #eee;
}

.eaat-title {
  text-align: left;
  font-size: 26px;
  margin-bottom: 10px;
}

.eaat-lead {
  text-align: center;
  color: #555;
  margin-bottom: 30px;
  font-size: 15px;
}

.eaat-author-card {
  display: flex;
  gap: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #eee;
  margin-bottom: 30px;
}

.eaat-author-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

.eaat-author-info h3 {
  margin: 0 0 5px;
}

.eaat-author-role {
  color: #666;
  margin-bottom: 10px;
}

.eaat-author-stats li {
  margin-bottom: 6px;
}

.eaat-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #0078ff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
}

.eaat-method,
.eaat-data,
.eaat-policy {
  margin-top: 30px;
}

.eaat-method ul,
.eaat-data ul,
.eaat-policy ul {
  padding-left: 20px;
}

.eaat-method li,
.eaat-data li,
.eaat-policy li {
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .eaat-author-card {
    flex-direction: column;
    text-align: center;
  }

  .eaat-author-img {
    margin: 0 auto;
  }
}

/* =========================
   運営者ページ
========================= */
.author-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.author-title {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}

.author-card {
  display: flex;
  gap: 20px;
  background: #fafafa;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #eee;
}

.author-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info h2 {
  margin: 0;
}

.author-role {
  color: #666;
  margin-bottom: 10px;
}

.author-stats li {
  margin-bottom: 6px;
}

.verify-method,
.author-data,
.policy-section,
.ad-section,
.sns-section {
  margin-top: 40px;
}

.verify-method ul,
.author-data ul,
.policy-section ul,
.sns-section ul {
  padding-left: 20px;
}

.proof-section {
  margin-top: 40px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.proof-item {
  text-align: center;
}

.proof-img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* =========================
   Cocoon 自動 p 対策
========================= */
.rank-content p {
  text-align: center;
}

/* rank-content 内の文章は左寄せに戻す */
.rank-content p {
  text-align: left !important;
}

/* ボタンは中央寄せのまま維持 */
.rank-content p > a,
.rank-content a {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.rank-content p > a {
  display: block !important;
  margin: 16px auto !important;
  max-width: 360px;
  white-space: normal !important;
}

/* トラッキング用imgは中央寄せを崩すので隠す */
.rank-content p > img {
  display: none !important;
}

/* =========================
   ボタン：スリム統一版（完全統合）
========================= */

/* 共通ボタン（CTA / internal-btn / ランキング内リンク） */
.cta-btn,
.internal-btn,
.rank-content a {
  display: block !important;
  width: 100%;
  max-width: 360px;
  margin: 16px auto;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center !important;
  text-decoration: none;
  white-space: normal !important;
  word-break: break-word;
  color: #fff !important;
}

/* CTA（オレンジ） */
.cta-btn,
.rank-content a.cta-btn {
  background: linear-gradient(180deg, #ff7043, #ff5722);
  box-shadow:
    0 6px 14px rgba(255, 87, 34, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* internal-btn（グリーン） */
.internal-btn,
.rank-content a.internal-btn {
  background: linear-gradient(180deg, #4caf50, #388e3c);
  box-shadow:
    0 6px 14px rgba(56, 142, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* BannerBridgeの1pxトラッキング画像を非表示 */
.rank-content img[width="1"][height="1"] {
  display: none !important;
}

/* ボタン内テキスト：自然に1行、必要なら折り返し */
.entry-content .cta-btn,
.entry-content .internal-btn,
.entry-content .rank-content a,
.entry-content .rank-content p > a {
  white-space: normal !important;   /* ← nowrap を撤廃 */
  word-break: break-word !important;
  padding: 14px 22px !important;    /* ← 余白を復活 */
  max-width: 360px !important;      /* ← はみ出し防止 */
  width: 100% !important;           /* ← ボタン幅を安定 */
  box-sizing: border-box !important;/* ← 余白込みで幅計算 */
}

/* ボタン幅を広げて1行に収める */
.entry-content .cta-btn,
.entry-content .internal-btn,
.entry-content .rank-content a,
.entry-content .rank-content p > a {
  max-width: 400px !important;
}

/* バナーブリッジ広告リンクをCTAボタン化（広告タグは改変しない） */
.rank-content a[href*="track.bannerbridge.net"] {
  display: block;
  background: #ff7a00;
  color: #fff !important;
  text-align: center;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  margin: 20px 0;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

/* バナーブリッジ広告リンクを .cta-btn と完全同じデザインにする */
.rank-content a[href*="track.bannerbridge.net"] {
  display: block !important;
  width: 100%;
  max-width: 360px;
  margin: 16px auto;
  padding: 14px 22px;
  border-radius: 999px; /* ← pill型に戻す */
  font-weight: bold;
  text-align: center !important;
  text-decoration: none;
  white-space: normal !important;
  word-break: break-word;
  color: #fff !important;

  /* .cta-btn と同じグラデーション */
  background: linear-gradient(180deg, #ff7043, #ff5722);

  /* .cta-btn と同じ影 */
  box-shadow:
    0 6px 14px rgba(255, 87, 34, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  box-sizing: border-box;
}

/* バナーブリッジ広告リンクの hover を .cta-btn と同じにする */
.rank-content a[href*="track.bannerbridge.net"]:hover {
  opacity: 0.9;
  filter: brightness(1.05);
}

/* internal-btn（緑ボタン）の hover を復活 */
.internal-btn:hover,
.rank-content a.internal-btn:hover {
  opacity: 0.9;
  filter: brightness(1.05);
}