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

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

/* ===== PC表示時のみ適用 ===== */
@media screen and (min-width: 1024px) {
    /* 子メニューのリンク幅を文字数に合わせる */
    #navi .sub-menu li a {
        min-width: auto !important;  /* 固定幅解除 */
        width: auto !important;      /* 自動幅 */
        white-space: nowrap;         /* 改行せず横に広げる */
        padding: 8px 12px;            /* 余白調整 */
        box-sizing: border-box;       /* パディング込みで幅計算 */
    }

    /* 子メニュー全体の固定幅解除 */
    #navi .sub-menu {
        min-width: auto !important;
        width: auto !important;
    }

    /* 親メニューにも同様の調整を適用したい場合（任意） */
    #navi .menu > li > a {
        min-width: auto !important;
        width: auto !important;
        white-space: nowrap;
        padding: 8px 14px;
        box-sizing: border-box;
    }
}

/* =========================
   ファーストビュー
========================= */
.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: 1.6em;
  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;
  min-height: 220px; /* 高さを揃える */
}

.rank-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.rank-content p {
  flex-grow: 1;
  margin-bottom: 16px;
  text-align: left !important;
}

.rank-content .cta-btn {
  margin-top: auto;
  align-self: center;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

.app-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eee;
  flex-shrink: 0; /* 横幅のズレ防止 */
}

.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); /* 銅 */
}

/* 青系：人気 */
.rank-num.rank-popular {
  background: linear-gradient(135deg, #42a5f5, #1e88e5); /* 明るめの青グラデーション */
  color: #fff;
}

/* 紫系：注目 */
.rank-num.rank-featured {
  background: linear-gradient(135deg, #ab47bc, #8e24aa); /* 紫グラデーション */
  color: #fff;
}

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

/* =========================
   強調スタイル：赤文字・黄色マーカー・太字
========================= */

.text-red {
  color: #d32f2f;
  font-weight: bold;
}

.highlight-yellow {
  background: linear-gradient(transparent 60%, #fff59d 60%);
  display: inline;
}

.text-bold {
  font-weight: bold;
}

/* =========================
   FAQセクション
========================= */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  border-top: 1px solid #ddd;
}

.faq-list .faq {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}

.faq-list .faq h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #333;
  position: relative;
  padding-left: 1.6em;
}

.faq-list .faq h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #ff7043;
}

.faq-list .faq p {
  margin: 0;
  padding-left: 1.6em;
  color: #555;
  line-height: 1.6;
}

.faq-list .faq p strong {
  color: #0078d4;
  margin-right: 4px;
}

/* =========================
 テキストリンクの下線を消す
========================= */
a {
text-decoration: none;
}

/* =========================
 バナーの下に記事を置く
========================= */
.rank-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* =========================
   新ファーストビュー（スマホ最適化）
========================= */
.new-fv {
  text-align: center;
  padding: 32px 16px;
}

.fv-inner {
  max-width: 720px;
  margin: 0 auto;
}

.fv-lead {
  font-size: 1rem;
  color: #444;
  margin: 12px 0 20px;
  line-height: 1.6;
}

.fv-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.fv-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

/* メインボタン（青） */
.fv-btn-main {
  background: linear-gradient(180deg, #42a5f5, #1e88e5); /* 明るめ青 → 濃い青 */
  color: #fff !important;
  box-shadow:
    0 6px 14px rgba(30, 136, 229, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* サブボタン（黄色） */
.fv-btn-sub {
  background: linear-gradient(180deg, #ffeb3b, #fbc02d); /* 明るい黄色 → 濃い黄色 */
  color: #333 !important;
  box-shadow:
    0 6px 14px rgba(251, 192, 45, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ホバー */
.fv-btn-main:hover,
.fv-btn-sub:hover {
  opacity: 0.9;
  filter: brightness(1.05);
}

/* =========================
   目的別カード
========================= */
.purpose-section {
  padding: 24px 16px;
}

.purpose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.purpose-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}

.purpose-card h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.card-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 12px auto 0;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4caf50, #388e3c);
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* =========================
   初心者カード
========================= */
.beginner-section {
  padding: 24px 16px;
}

.beginner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.beginner-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
}

.beginner-card h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

/* =========================
   PC版：1カラム固定＋中央寄せ
========================= */
@media screen and (min-width: 768px) {

  /* 全体の横幅を制限して中央寄せ */
  .fv-inner,
  .purpose-section,
  .ranking-section,
  .beginner-section,
  .eaat-section,
  .table_box,
  #stories,
  #faq,
  #internal-links {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 目的カード・初心者カードも1カラムのまま中央寄せ */
  .purpose-grid,
  .beginner-grid {
    grid-template-columns: 1fr; /* ← 1カラム固定 */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ランキング簡易版も1カラムのまま */
  .ranking-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ボタンは中央揃え（既存CSSと整合） */
  .fv-btn,
  .cta-btn,
  .internal-btn,
  .card-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* 見出しは左寄せ */
  .section-title,
  .purpose-card h3,
  .beginner-card h3,
  .rank-card h3 {
    text-align: left;
  }

  /* 本文も左寄せ */
  .purpose-card p,
  .beginner-card p,
  .rank-card p,
  .fv-lead {
    text-align: left;
  }
}

/* =========================
   FVのタイトル部分だけ左寄せ（スマホ・PC共通）
========================= */
.new-fv .badge,
.new-fv h1,
.new-fv .fv-lead {
  text-align: left !important;
  margin-left: 0 !important;
}

/* FV内のテキストを左寄せに統一 */
.new-fv {
  text-align: left !important;
}

/* ボタンは中央揃えのまま維持 */
.new-fv .fv-actions {
  text-align: center !important;
}

/* ファーストビュー背景：超淡いホワイトブルー */
.new-fv {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}

/* =========================
   ファーストビュー背景：超淡いホワイトブルー
========================= */
.new-fv {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  padding: 48px 20px; /* PCでもスマホでも余白を最適化 */
  border-radius: 0;   /* FVはフラットに */
}

/* タイトル部分は左寄せ（スマホ・PC共通） */
.new-fv .badge,
.new-fv h1,
.new-fv .fv-lead {
  text-align: left !important;
  margin-left: 0 !important;
}

/* FV全体のテキスト左寄せ */
.new-fv {
  text-align: left !important;
}

/* ボタンは中央揃えのまま */
.new-fv .fv-actions {
  text-align: center !important;
  margin-top: 24px;
}

/* PC時の横幅制限 */
@media screen and (min-width: 768px) {
  .new-fv .fv-inner {
    max-width: 900px;
    margin: 0 auto;
  }
}

/* =========================
   cta-btn の光りを復活させる（優先度強化）
========================= */
a.cta-btn,
.rank-content a.cta-btn {
  background: linear-gradient(180deg, #ff7043, #ff5722) !important;
  box-shadow:
    0 6px 14px rgba(255, 87, 34, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

a.cta-btn:hover,
.rank-content a.cta-btn:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* =========================
   ★ 光るボタン完全統一版 ★
   （青・黄・緑・オレンジ）
========================= */

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

a.cta-btn:hover,
.rank-content a.cta-btn:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

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

a.internal-btn:hover,
.rank-content a.internal-btn:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* --- 青（fv-btn-main） --- */
.fv-btn-main {
  background: linear-gradient(180deg, #42a5f5, #1e88e5) !important;
  box-shadow:
    0 6px 14px rgba(30, 136, 229, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

.fv-btn-main:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* --- 黄色（fv-btn-sub） --- */
.fv-btn-sub {
  background: linear-gradient(180deg, #ffeb3b, #fbc02d) !important;
  box-shadow:
    0 6px 14px rgba(251, 192, 45, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #333 !important;
}

.fv-btn-sub:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* =========================================================
   ★ ボタン体系 完全統一版（青・黄・緑・オレンジ）
   既存CSSを壊さず、優先度強化で上書きする
========================================================= */

/* --- オレンジ（CTA：アフィリエイト導線） --- */
a.cta-btn,
.rank-content a.cta-btn {
  background: linear-gradient(180deg, #ff7043, #ff5722) !important;
  box-shadow:
    0 6px 14px rgba(255, 87, 34, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
a.cta-btn:hover,
.rank-content a.cta-btn:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* --- 緑（internal-btn：内部リンク導線） --- */
a.internal-btn,
.rank-content a.internal-btn {
  background: linear-gradient(180deg, #4caf50, #388e3c) !important;
  box-shadow:
    0 6px 14px rgba(56, 142, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
a.internal-btn:hover,
.rank-content a.internal-btn:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* --- 青（fv-btn-main：最重要導線） --- */
.fv-btn-main {
  background: linear-gradient(180deg, #42a5f5, #1e88e5) !important;
  box-shadow:
    0 6px 14px rgba(30, 136, 229, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
.fv-btn-main:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* --- 黄（fv-btn-sub：サブ導線） --- */
.fv-btn-sub {
  background: linear-gradient(180deg, #ffeb3b, #fbc02d) !important;
  box-shadow:
    0 6px 14px rgba(251, 192, 45, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #333 !important;
}
.fv-btn-sub:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* --- グレー（fv-btn-tertiary：初心者向け導線） --- */
.fv-btn-tertiary {
  background: linear-gradient(180deg, #9e9e9e, #757575) !important;
  box-shadow:
    0 6px 14px rgba(117, 117, 117, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
.fv-btn-tertiary:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
}

/* =========================================================
   card-btn を internal-btn（緑の光るボタン）に統一
========================================================= */
a.card-btn,
.rank-content a.card-btn {
  background: linear-gradient(180deg, #4caf50, #388e3c) !important;
  box-shadow:
    0 6px 14px rgba(56, 142, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  border: none !important;
  text-align: center !important;
  display: block !important;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: bold;
  white-space: normal !important;
  word-break: break-word;
}

a.card-btn:hover,
.rank-content a.card-btn:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) !important;
  color: #fff !important; /* 赤文字を完全に無効化 */
}

/* region-buttons：最小上書き（既存スタイルを壊さない） */
.region-buttons {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.region-buttons .internal-btn {
  display: inline-block;
  padding: 10px 14px;
  background: linear-gradient(180deg, #4caf50, #388e3c);
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  box-sizing: border-box;
  max-width: none; /* 既存の max-width を無効化したい場合のみ */
}

/* スマホ：縦並びでフル幅にする */
@media (max-width:600px) {
  .region-buttons { flex-direction: column; gap: 10px; }
  .region-buttons .internal-btn {
    display: block;
    width: 100%;
    padding: 14px 12px;
    font-size: 16px;
    text-align: center;
  }
}