/* ============================================================
   CocoBriller 追加カスタムCSS
   （テンプレート本体のstyle.cssは変更せず、こちらで上書きします）
   - ロゴをメニューバー上下中央に配置
   - PC表示でもハンバーガーメニュー＋アイコンのみのクールなレイアウトに変更
   ============================================================ */

:root {
  --cb-nav-height: 58px;
  --cb-red: #a4133c;
}

/* ---- ナビゲーションバー全体 ---- */
.cb-navbar {
  min-height: var(--cb-nav-height);
}

.cb-navbar .cb-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cb-nav-height);
}

/* ---- ロゴ：左側に配置（上下中央）・やや小さめ ---- */
.cb-navbar .cb-brand {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
}

.cb-navbar .cb-brand img {
  height: 22px;
  width: auto;
  display: block;
}

.cb-navbar .cb-navbar-inner {
  position: relative;
}

/* ---- ハンバーガーボタン（PC・スマホ共通で常に表示・アイコン群の一番右） ---- */
.cb-hamburger {
  width: 24px;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 10;
  margin-left: 4px;
}

.cb-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: all 0.25s ease-in-out;
}

.cb-hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.cb-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.cb-hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- 右側アイコン群（言語／ログイン／カート／ハンバーガーの順で右端まで） ---- */
.cb-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 10;
  margin-left: auto;
}

.cb-icon-link {
  color: #fff !important;
  font-size: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cb-icon-link:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

.cb-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--cb-red);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  text-align: center;
  padding: 0 3px;
}

.cb-lang .dropdown-menu {
  min-width: 170px;
}

.cb-lang .dropdown-menu li.disabled a {
  color: #666 !important;
  cursor: default;
  pointer-events: none;
}

/* ---- メニュー本体（ハンバーガーで開閉。PC/スマホ共通） ---- */
.cb-menu {
  display: none;
  background: rgba(10, 10, 10, 0.97);
}

.cb-menu.in {
  display: block;
}

.cb-menu-list {
  float: none !important;
  padding: 10px 0 20px;
  margin: 0;
}

.cb-menu-list > li {
  float: none;
  display: block;
}

.cb-menu-list > li > a {
  display: block;
  padding: 13px 5px;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cb-menu-list > li > a:hover,
.cb-menu-list > li > a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.cb-menu-divider {
  height: 1px;
  margin: 6px 0;
}

/* ---- ページ本体をfixedナビ分だけ下げる ----
   TOPページのヒーロー（home-section）はナビの下に潜り込ませたいので0のまま。
   それ以外の下層ページは、ナビ直下に.mainが来るため、ナビの高さ分だけ
   余白を入れてタイトル等がメニューに隠れないようにする。 */
.cb-navbar ~ .home-section {
  margin-top: 0;
}

.cb-navbar + .main {
  margin-top: var(--cb-nav-height);
}

body {
  padding-top: 0;
}

@media (min-width: 768px) {
  .cb-icons {
    gap: 24px;
  }
}

/* ---- ヒーロー下のコールアウト内ロゴ：半分程度のサイズに縮小 ---- */
.cb-callout-logo {
  max-width: 180px;
  width: 50%;
  height: auto;
}

/* ---- Productsカラム：スマホ表示では1列に ----
   .center クラス（style.css）が display:flex; を付与しており、
   幅指定だけでは折り返されず横に詰まってしまうため、
   スマホ幅ではflexを解除してブロック要素として縦積みにする。 */
@media (max-width: 767px) {
  .cb-products-row {
    display: block !important;
  }
  .cb-products-row > [class*="col-"] {
    float: none !important;
    width: 100% !important;
  }
}

/* ---- シルクの効果セクション：画像へのマウスオン時の暗いシャドウ演出を無効化 ----
   style.css の .team-item:hover .team-image:after / .team-item:hover .team-detail は
   本来「チームメンバー紹介」用の演出（画像を暗くしてキャプションを表示）。
   このセクションでは使わないため、マウスオンでも見た目が変化しないように上書きする。 */
#effect .team-item:hover .team-image:after {
  background: transparent;
}
#effect .team-item:hover .team-detail {
  opacity: 0;
  bottom: 100%;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

/* ---- 「ENVELOPED IN HIGH-QUALITY SILK COCOONS...」セクション：テキストをやや下寄りに ----
   style.css の .module は上下均等パディング（140px 0）でテキストを縦中央（約50%）に配置するが、
   このセクションのみ上下の配分を変えて、テキストの位置を上から約75%あたりに下げる。
   （上下の合計パディングは140px×2=280pxのまま変えていないため、セクション自体の高さは変わらない） */
.module-video {
  padding-top: 210px;
  padding-bottom: 70px;
}

/* ---- サイト内ボタン全体：太さ（上下の厚み・文字サイズ）を btn-lg 相当に統一 ----
   style.css の基本 .btn は padding: 8px 37px; font-size: 11px;、
   .btn.btn-lg（テンプレート独自定義。Bootstrap標準のbtn-lgとは別物）は
   padding: 12px 45px; font-size: 13px; となっている。
   今回のご要望は「太さ」のみをbtn-lg相当にすることで、色・幅は現状維持とのことなので、
   上下パディングと文字サイズのみ上書きする（左右パディングには触れないため、
   ボタンの横幅は既存のまま変わらない。btn-lgクラス付きの一部ボタンも同じ値になるだけで、
   横幅（左右パディング45px）はそのまま維持される）。 */
.btn {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 13px !important;
}

/* ---- 本文の文字サイズを全体的に少し大きく ----
   style.css の body は font: 400 12px/1.8 ...; となっており、本文サイズの基準になっている。
   商品説明・タブ内容・ブログ本文・各種ページの本文など、個別にfont-sizeを指定していない
   テキストはすべてこの12pxを継承しているため、ここを底上げすることでサイト全体の本文が
   一回り大きくなる（line-heightは1.8のまま＝相対値なので行間バランスは維持される）。
   ボタン・ナビ・バッジ・価格・フォーム等は個別にfont-sizeを指定済みのため影響を受けない。 */
body {
  font-size: 14px;
}

/* ---- シルクの効果セクションの本文（.team-role）----
   style.css で font-size: 11px; と個別指定されているため、body側の変更だけでは
   大きくならない。他の本文と釣り合う大きさに合わせて上書きする。
   また、親要素 .team-descr に付与されている .font-alt が text-transform: uppercase
   を持つため、見出し（.team-name）だけでなく本文（.team-role）まで大文字化されてしまう
   （日本語では見た目に影響しないため気づきにくいが、英語表示だと本文まで
   すべて大文字になってしまう）。他セクションの見出し＋本文（例：3カラム商品紹介や
   Productsの商品説明）と同様に、見出しのみ大文字・本文は通常の大文字小文字表記に揃える。 */
.team-role {
  font-size: 13px;
  text-transform: none;
}

/* ---- 商品詳細ページ：価格の横の「（税込み）」の文字サイズ ----
   style.css の .amount は font-size: 32px; と価格表示用の大きさが指定されており、
   product.php では価格と「（税込み）」が同じ <span class="amount"> の中に
   並んでいたため、「（税込み）」まで価格と同じ32pxで表示されてしまっていた。
   「（税込み）」部分だけ product.php 側で別の <span class="cb-tax-note"> に分け、
   ここで本文と同じ大きさ（bodyのfont-size: 14px）に縮小する。 */
.cb-tax-note {
  font-size: 14px;
  color: #777;
}

/* ---- Heroスライド見出し：2行見出しの行間調整 ----
   .titan-title-size-4 は独自の line-height を持たず、bodyのline-height:1.8を継承するため、
   2行見出しでは行間が間延びして見える。文字サイズ（font-size・letter-spacing）は
   現状維持のまま、行間のみ見出しらしく詰める。 */
.cb-hero-title {
  line-height: 1.5;
}

/* ---- Heroスライド見出し：画面の左右に約10％ずつ余白を設ける ----
   style.css の .titan-caption / .caption-content は画面幅いっぱい（100%）で
   中央揃えのみのため、英語版など文字数が多い見出しだと画面端ギリギリまで
   文字が伸びてしまう。.cb-hero-title に左右10%のpaddingを設け、
   画面の両端から約10%内側で折り返すようにする（box-sizingでpadding分が
   幅からはみ出さないようにしている）。 */
.cb-hero-title {
  box-sizing: border-box;
  padding: 0 10%;
  white-space: normal;
}

/* ---- Heroスライド見出し：縦位置を画面上から約72%あたりへ ----
   .caption-content は vertical-align:middle（table-cell）でHeroセクション内の
   縦中央（上から約50%）にテキストを配置している。home-full-height のセクションは
   JS（main.js）で高さが $(window).height() ＝ ビューポートの高さぴったりに設定されるため、
   vh単位で下へずらせば「画面の高さに対する位置」として狙った％に調整できる。
   中央（50%）から下へ22vh分ずらし、上から約70〜75%の範囲（約72%）に配置する。 */
.cb-hero-title {
  transform: translateY(22vh);
}

/* スマホ表示：行間だけさらに少し詰める（左右10%の余白はPC/スマホ共通で上の.cb-hero-titleに統一済み） */
@media (max-width: 767px) {
  .cb-hero-title {
    line-height: 1.4;
  }
}

/* ---- 入力欄（メールアドレス等）が自動で大文字表示になる問題の修正 ----
   style.css の .form-control に text-transform: uppercase; が指定されており、
   ログイン・会員登録のメールアドレス欄などで入力した文字が見た目上すべて
   大文字になっていた（実際の値は小文字のまま保持されており、あくまで表示上の変換）。
   ナビのブランドロゴやフッターのコピーライト表記（.font-alt）は意図した大文字装飾のため
   そのまま残し、フォーム入力欄（.form-control）に限定してこの変換を無効化する。 */
.form-control {
  text-transform: none !important;
}

/* ---- ログイン中はマイページアイコンを赤色にして一目で区別できるように ----
   header.php では is_logged_in() の分岐で、ログイン中は塗りつぶしの fa-user、
   未ログイン時は線のみの fa-user-o を出し分けているが、どちらも白色のままで
   違いが分かりにくかったため、ログイン中のみブランドカラーの赤（カート数バッジと同じ色）にする。
   fa-user-o（未ログイン時）はこのセレクタに一致しないため、そちらは白のまま変わらない。 */
.cb-icon-link .fa-user {
  color: var(--cb-red) !important;
}

/* ---- ブログ：YouTube動画記事のサムネイルに再生アイコンを重ねて表示 ----
   一覧（blog/index.php・TOPページ・サイドバーの最近の記事）で、YouTube動画URLが
   設定されている記事のサムネイルに再生ボタンを重ね、クリックするとポップアップで
   動画が再生される（記事詳細ページへは遷移しない）ことが一目で分かるようにする。
   実際のポップアップ表示は既存の assets/js/main.js 内の
   $('.video-pop-up').magnificPopup({ type: 'iframe' }); がそのまま利用される。 */
.cb-video-thumb {
  position: relative;
}

.cb-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  line-height: 54px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.6);
  color: #fff;
  text-align: center;
  font-size: 18px;
  pointer-events: none;
  transition: background 0.2s ease-in-out;
}

.cb-video-thumb:hover .cb-video-play-icon {
  background: var(--cb-red);
}

/* 再生アイコンの▶を中央でやや右に寄って見えないよう微調整 */
.cb-video-play-icon .fa-play {
  margin-left: 3px;
}

/* ---- ブログ一覧：資料ダウンロード（PDF）カードのサムネイルに「PDF」バッジを重ねて表示 ----
   上の動画記事用 .cb-video-thumb / .cb-video-play-icon と同じ考え方で、
   サムネイル左上に赤いPDFバッジを重ね、記事カードと見分けが付くようにする。 */
.cb-pdf-thumb {
  position: relative;
}
.cb-pdf-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 14px;
  border-radius: 3px;
  background: var(--cb-red);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}
.cb-pdf-badge i {
  margin-right: 4px;
}

/* ---- フッター：ブランド列（ロゴ・住所・SNSアイコン）のレイアウト調整 ----
   ①ロゴ画像の下に余白を追加し、住所が少し下（2行目くらい）から始まるようにする
   ②郵便番号と住所を改行して表示（footer.php側で<br>を追加済み）
   ③SNSアイコンを、元はページ最下部のコピーライト行の右側にあったものを
     このブランド列内（TELの下）へ移動し、少し余白を設けて配置する */
.cb-footer-brand {
  display: inline-block;
  margin-bottom: 16px;
}

.cb-footer-social {
  margin-top: 16px;
}

.cb-footer-social a {
  display: inline-block;
  padding: 0 6px 0 0;
  color: #aaa;
  font-size: 14px;
}

.cb-footer-social a:hover {
  color: #fff;
}

/* ---- トップページ「シルクの効果」：PC表示での行間調整 ----
   style.css の .mb-sm-20 は max-width:991px（タブレット・スマホ）にしか
   効かない作りのため、992px以上のPC表示では各カードの下に余白が付かず、
   1行目の本文と2行目の写真がくっついて見えていた。
   PC表示のときだけ、1行分程度の余白を追加する。 */
@media (min-width: 992px) {
  #effect .col-md-4 {
    margin-bottom: 30px;
  }
}

/* ---- トップページ「シルクの効果」：カードの行がずれる問題の修正 ----
   このセクションの6枚のカードは Bootstrap標準の float ベースの .row / .col-md-4（.col-sm-6）
   で組まれており、各カードの高さは本文の文字数（＝言語）によってバラつく。
   float ベースのグリッドでは、同じ行の中でカードの高さが揃っていないと、
   次の行のカードが「高さが足りないカラムの隙間」に食い込んで表示され、
   行の境目がガタガタにずれて見えてしまう（日本語は各項目の文章量が比較的近く
   目立たなかったが、英語・タイ語訳では項目ごとの文章量の差が大きく、
   このズレが顕著に発生していた）。
   .row を display:flex; flex-wrap:wrap にし、各カラムもflexアイテムにすることで、
   同じ行のカラムの高さが常に最も内容の多いカラムに揃うようにし（flexの初期値
   align-items:stretchを利用）、次の行が必ず正しい位置から始まるようにする。
   カード内部（写真の下の余白量）が項目ごとに不揃いになる点は残るが、
   見出し・写真の行がずれる問題は解消される。 */
#effect .row {
  display: flex;
  flex-wrap: wrap;
}
#effect .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  float: none;
}
#effect .team-item {
  width: 100%;
}

/* ---- トップページ：ブランドストーリー直下の3カラム商品紹介 ----
   「フェイシャルマスク／シルク化粧水／アイコーナー」の3点を、
   .container を使わず画面幅いっぱいに配置する枠なし3カラム。
   各カラムは「写真＋黒背景・白文字のテキスト欄」の縦積み。
   スマホ（767px以下）では1カラム（縦1列）表示に切り替える。 */
.cb-lineup-row {
  display: flex;
  width: 100%;
  margin: 0;
}
.cb-lineup-col {
  flex: 1 1 0;
  min-width: 0;
  /* 縦積み（写真→黒テキスト欄）にし、黒テキスト欄側を可変にすることで
     3カラムの黒部分の下端を揃える（下のcb-lineup-text参照） */
  display: flex;
  flex-direction: column;
}
.cb-lineup-photo {
  width: 100%;
  padding-top: 120%; /* 画像比率 1000:1200 に合わせた高さ確保 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto; /* 写真の高さは比率固定のまま伸縮させない */
}
/* ---- 3カラム商品紹介：黒テキスト欄の下端を3カラムで揃える ----
   .cb-lineup-row は display:flex（既定 align-items:stretch）のため、
   3つの .cb-lineup-col 自体の高さは既に最も内容が多いカラムに揃っている。
   しかし .cb-lineup-text はそれまで内容量なりの高さしか取っていなかったため、
   テキスト量が少ないカラムでは黒い背景がカラムの下端まで届かず、
   黒部分の下端がカラムごとにバラついて見えていた。
   .cb-lineup-text 側を flex:1（残りの高さをすべて使う）にし、
   内部でテキストを縦方向にも中央揃えにすることで、黒背景がカラムの下端まで
   必ず届くようにし、3カラムの黒部分の下端がそろうようにする。 */
.cb-lineup-text {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 36px 24px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cb-lineup-text h3 {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.cb-lineup-text p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.9;
  margin: 0;
}
@media (max-width: 767px) {
  .cb-lineup-row {
    flex-direction: column;
  }
  .cb-lineup-photo {
    padding-top: 75%; /* スマホでは横長にして1枚あたりの縦の占有を抑える */
  }
}

/* ---- トップページ見出し下のリード文（シルクの効果／Products／Silk Care Blog）----
   元は .font-serif（Volkhovの斜体）で大きめに表示していたが、
   斜体をやめて本文くらいの小さな文字にしたいとのご要望のため、
   3セクション共通の専用クラスで上書きする。
   （当初は「シルクの効果」のみ対応していたが、Products / Silk Care Blog にも
   同じクラスを付けて統一した） */
.cb-section-subtitle {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: #666;
}

/* ---- トップページ：見出しとリード文の行間を詰める（シルクの効果／Products／Silk Care Blog）----
   style.css の基本ルールでは、見出し(.module-title)の margin-bottom:70px に対し
   直後の .module-subtitle が margin-top:-35px で重なり、見出し〜リード文の間隔は
   実質35px空く。ここから本文1行分（body: font-size 14px × line-height 1.8 ≒ 25px）
   ほど詰めたいとのご要望のため、該当3セクションに限定してリード文側の
   margin-topをさらに25pxほど引き上げる（-35px → -60px、間隔は35px→約10pxに）。 */
#effect .module-title + .module-subtitle,
#products .module-title + .module-subtitle,
#blog .module-title + .module-subtitle {
  margin-top: -60px;
}

/* ---- トップページ「ブランドストーリー」見出しの黒帯セクション：上下余白を拡大 ----
   style.css の .module-small は上下均等パディング70px 0。
   「ブランドストーリー」ボタンの高さ分くらい、上下にゆとりを持たせたいとのご要望のため、
   ボタンの実測高さ（padding-top/bottom 12px×2＋文字の行の高さ13px×1.8行間≒23px
   ＝合計約47px）を既存の70pxに上乗せする（footer.phpも同じ
   .module-small.bg-dark を使うが、このセクションのみに付けた専用クラスで
   限定しているため、フッターには影響しない）。 */
.cb-callout-section {
  padding-top: 117px;
  padding-bottom: 117px;
}

/* ---- カート：数量入力欄がiOS(Safari)で空白に見える不具合の対策 ----
   .form-control は style.css で font-family: "Roboto Condensed"（Googleフォント）を
   指定しているが、iOS SafariにはWebKitの既知の不具合があり、
   <input type="number"> 系の要素はWebフォントの読み込み完了後に再描画されず、
   フォントが読み込まれるまで（あるいは読み込み後もずっと）値が透明のまま
   表示され続けてしまう。テキスト入力や見出しなど他の要素は正しく再描画される
   ため、この現象は数量欄でだけ「空白」に見える形で発生する。
   数量欄はフォントの装飾性が重要ではないため、Webフォントの読み込みを待たず
   常に描画されるシステムフォントに固定し、この不具合を回避する。 */
.cb-qty-input {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- TOPページ：ヒーロースライダー直下の告知マーキング（右から左へ流れるテキスト） ----
   黒背景の帯の中を、告知テキストが右から左へ連続的に流れるCSSアニメーション。
   継ぎ目なくループさせるため、同じテキストを.cb-marquee-track内に2つ並べて、
   トラック全体をちょうど半分（＝テキスト1つ分）だけ左へtranslateXし、
   0%に戻った瞬間に2つ目のテキストが1つ目と同じ位置にあるように見せている。
   文字サイズは「ブランドストーリー」見出し（.callout-title）と合わせて16pxにしている。

   ※position/z-indexについて：
   ヒーロースライダーの .home-section は position:relative（z-index:0）で、
   home-parallax の効果によりスクロール時にJSで top の値が動的に変化し、
   見た目上スライダーが本来の表示位置より下にずれて見える仕組みになっている。
   CSSの仕様上「position指定のある要素」は、たとえz-indexが同じでも、
   position指定のない（position:staticの）要素より常に前面に描画されるため、
   このままではスクロール時にヒーロー画像がこの帯の上に重なって表示されてしまう。
   そのため、この帯にも position:relative と、ヒーローより大きいz-indexを
   明示的に指定し、スクロール時も必ず手前（ヒーローの下＝黒帯の位置）に
   表示されるようにしている。 */
.cb-marquee-section {
  position: relative;
  z-index: 2;
  background: #000;
  overflow: hidden;
  white-space: nowrap;
}

.cb-marquee-track {
  display: inline-flex;
  width: max-content;
  animation: cb-marquee-scroll 26s linear infinite;
}

.cb-marquee-item {
  display: inline-block;
  flex: 0 0 auto;
  padding: 15px 40px;
  font-size: 19px;
  line-height: 1.6;
  color: #fff;
  letter-spacing: 0.5px;
}

@keyframes cb-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 画面の動きを抑えたい方向けの配慮（OSの「視差効果を減らす」設定がオンの場合はアニメーションを停止） */
@media (prefers-reduced-motion: reduce) {
  .cb-marquee-track {
    animation: none;
  }
}

/* ---- フェイシャルマスク使い方ページ（facial-mask-usage.php） ----
   ① STEP1〜STEP7の見出し：style.css では個別指定がないため、
   bootstrap.min.cssのh5既定値（14px）のまま小さく表示されていた。
   すぐ上にある見出し「フェイシャルマスクの使い方」（h3.font-alt）と
   同じ大きさ（bootstrap h3既定値の24px）に揃える。
   h5.font-altはTOPページ「シルクの効果」の見出しなど他ページでも使われているため、
   このページ専用のクラスで範囲を限定している。 */
.cb-usage-step-title {
  font-size: 24px;
}

/* ② ページ下部の注意書き（※で始まる3行）：
   従来は<small>タグ（ブラウザ既定で親要素の約83%に縮小）で囲っていたため、
   本文（cocobriller-custom.css body指定の14px）より小さく表示されていた。
   本文と同じ14pxに拡大する。 */
.cb-usage-notes {
  font-size: 14px;
}