/* ===== マーカー風アンダーライン（文字の下半分だけ色を付ける） ===== */
    .marker {
      background: linear-gradient(transparent 60%, var(--color) 60%);
      display: inline;
    }

    .marker-blue { --color: #bfdbfe; }   /* 優しい青 */
    .marker-red { --color: #fecaca; }    /* 赤 */
    .marker-pink { --color: #fbcfe8; }   /* ピンク */
    .marker-yellow { --color: #fef08a; } /* 黄色 */
    .marker-green { --color: #bbf7d0; }  /* 緑 */
    .marker-orange { --color: #fed7aa; } /* オレンジ */

    /* ===== アンダーライン ===== */
    .underline-blue { border-bottom: 4px solid #007bff; display: inline-block; }
    .underline-red { border-bottom: 4px solid #dc3545; display: inline-block; }
    .underline-pink { border-bottom: 4px solid #e83e8c; display: inline-block; }
    .underline-yellow { border-bottom: 4px solid #ffc107; display: inline-block; }
    .underline-green { border-bottom: 4px solid #28a745; display: inline-block; }
    .underline-orange { border-bottom: 4px solid #fd7e14; display: inline-block; }

    /* ===== 中抜きボックス（枠線のみ） ===== */
    .box-outline {
      border: 2px solid;
      padding: 15px;
      margin: 20px 0;
      border-radius: 6px;
      background: #fff;
    }
    .box-blue { border-color: #007bff; }
    .box-red { border-color: #dc3545; }
    .box-pink { border-color: #e83e8c; }
    .box-yellow { border-color: #ffc107; }
    .box-green { border-color: #28a745; }
    .box-orange { border-color: #fd7e14; }
    .box-gray { border-color: #6c757d; }

    /* ===== 背景色ありボックス ===== */
    .box-fill {
      padding: 15px;
      margin: 20px 0;
      border-radius: 6px;
      color: #fff;
    }
    .fill-blue { background: #dbeafe; color: #1e40af; }   /* 優しい水色 */
    .fill-red { background: #fee2e2; color: #991b1b; }    /* やわらかい赤 */
    .fill-pink { background: #fce7f3; color: #9d174d; }   /* ピンク */
    .fill-yellow { background: #fef9c3; color: #854d0e; } /* やさしい黄色 */
    .fill-green { background: #dcfce7; color: #166534; }  /* グリーン */
    .fill-orange { background: #ffedd5; color: #9a3412; } /* オレンジ */
    .fill-gray { background: #f3f4f6; color: #374151; }   /* グレー */

    /* ===== アフィリエイトボタン ===== */
    /* 共通デザイン */
    .af-btn {
      display: inline-block;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border-radius: 30px;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: 0.3s;
      margin: 10px 0;
      padding: 15px 0;
    }

    .af-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    }

    /* 色別 */
    .red { background: linear-gradient(135deg, #f87171, #dc2626); }
    .blue { background: linear-gradient(135deg, #3b82f6, #1e40af); }
    .green { background: linear-gradient(135deg, #34d399, #059669); }

    /* サイズ別 横幅 */
    .large { width: 80%; font-size: 20px; }
    .medium { width: 50%; font-size: 20px; }
    .small { width: 30%; font-size: 20px; }

    /* 中央揃え */
    .center { display: block; margin-left: auto; margin-right: auto; }



    .af-btn-wrap {
      text-align: center;
      margin: 20px 0;
    }

    .af-btn-catch {
      display: inline-block;
      width: 100%;
      max-width: 300px; /* サイズ調整 */
      border-radius: 30px;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: 0.3s;
      margin: 10px auto;
      text-align: center;
      padding: 10px 0;
      color: #fff;
    }

    .af-btn-catch:hover {
      opacity: 0.9;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    }

    /* キャッチコピー部分 */
    .af-btn-catch-text {
      font-size: 0.85rem;
      margin-bottom: 4px;
      display: block;
      color: #fff;
      opacity: 0.9;
    }

    /* ボタンテキスト */
    .af-btn-btn-text {
      font-size: 1.1rem;
      font-weight: bold;
    }

    /* サイズ別 */
    .large2 { padding: 18px 0; font-size: 18px; max-width: 400px; }
    .medium2 { padding: 14px 0; font-size: 16px; max-width: 300px; }
    .small2 { padding: 10px 0; font-size: 14px; max-width: 220px; }



  .af-btn3-wrap {
    text-align: center;
    margin: 20px 0;
  }

  .catch-above {
    font-size: 1.2rem;
    margin-bottom: 2px;
    display: block;
    color: #ff0000;
    font-weight: bold;
  }

  .af-btn3 {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 10px auto;
  }

  .af-btn3:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  }

  /* サイズ別 */
  .large3 { width: 80%; padding: 18px 40px; font-size: 20px; }
  .medium3 { width: 50%; padding: 14px 28px; font-size: 20px; }
  .small3 { width: 30%; padding: 10px 20px; font-size: 20px; }