/* ============================================================
   バッジ内キーワード強調スタイル
   ============================================================

   【手順1】HTML の <head> 内（既存の <link rel="stylesheet"> の後）に追加：

     <link rel="stylesheet" href="css/badge-keyword.css">


   【手順2】<i> タグ内の強調したい語句を <span class="badge-keyword"> で囲む：

   変更前:
     <i>
         作業の邪魔にならないウェアラブルデバイスで
     </i>

   変更後（「ウェアラブルデバイスで」を際立たせる場合）:
     <i>
         作業の邪魔にならない<span class="badge-keyword">ウェアラブルデバイスで</span>
     </i>

   ============================================================ */

/* キーワード本体 */
.bt .section-fv .badge .badge-keyword {
  color: #0046a4;              /* オレンジ強調色（親は #0046a4 紺色） */
  font-size: 1.25em;           /* 周囲の1.25倍（親が28pxなら35px相当） */
  letter-spacing: -0.01em;
  /* font-weight は親の 800 を継承するため省略 */
}

/* 下線を加えたい場合はコメントアウトを解除 */
.bt .section-fv .badge .badge-keyword {
  text-decoration: underline;
  text-decoration-color: #C05000;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* SP表示（767px以下）では少し抑える */
@media (max-width: 767.98px) {
  .bt .section-fv .badge .badge-keyword {
    font-size: 1.1em;
  }
}