/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 13 2026 | 00:37:40 */
/* ============================================================
   Beatrice Excelsior 解説ページ  —  bex-*
   固定ページ「Beatrice Excelsiorとは」専用。（2026-10-13 作成）
   2026-10-13 改訂（I-20261013-02）：元資料どおりの英語の小見出し・副題・表の見出し（caption）・
   バックテストの表とグラフを載せるため、9〜11 を追加し、6 の行見出しを th に変えた

   デザインは「Fibozowシリーズとは」（Fibozowcss・fbz-*）に合わせています。
   ページの骨格・見出し・本文・表・ボタン・テーマCSSの打ち消しは
   Fibozowcss の .fbz-wrap / .fbz-* をそのまま使い、このファイルには
   Fibozowcss に無い部品（特徴タグ・図の枠・条件カード・ロットの計算例など）だけを置きます。
   → Fibozowcss を無効化・削除すると、このページのレイアウトも崩れます。

   Channel Experts Elite のページ用CSS（CEE-AUDCADcss・cee-*）とは独立しています。
   部品の形は cee-* と同じですが、本番でCEEのCSSが未反映・無効でもこのページが崩れないよう、
   必要な分を bex-* として持っています。

   出力順の注意：Custom CSS & JS は新しい順に出力されるため、このCSSは Fibozowcss より先に読まれる。
   Fibozowcss と同じ詳細度の指定は負けるので、上書きする箇所は詳細度を1段上げている（.fbz-note.bex-after 等）。
   テーマの h3 { box-shadow: 0 1px 2px 白 } は色付きの背景の上で細い線に見えるため、このページの h3 では消している。
   ============================================================ */

/* ════ 1. ファーストビューの特徴タグ ════ */
.fbz-wrap .bex-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .fbz-wrap .bex-spec {
  list-style: none;
  margin: 0;
  padding: 5px 14px;
  background: #EEF2F5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fbz-sub);
  white-space: nowrap;
}

/* ════ 2. 動きの全体像（STEP図に説明文を足したもの。本文幅いっぱい） ════ */
.fbz-wrap .fbz-flow.bex-flow { max-width: none; }
.fbz-wrap .bex-flow .fbz-flow-item { align-items: flex-start; padding: 18px 22px; }
.fbz-wrap .bex-flow .fbz-flow-ico { margin-top: 2px; }
.fbz-wrap .bex-flow-txt {
  display: block;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--fbz-text);
}

/* ════ 3. 図（ねらいは「上向きの流れの中の下押し」） ════ */
.fbz-wrap .bex-figure {
  margin: 26px 0 0;
  padding: 20px 20px 16px;
  background: #fff;
  border: 1px solid #E7ECF0;
  border-radius: var(--fbz-radius);
  box-shadow: var(--fbz-shadow);
}
.fbz-wrap .bex-chart { overflow-x: auto; }
.fbz-wrap .bex-chart-svg { display: block; width: 100%; min-width: 560px; height: auto; }
body .fbz-wrap .bex-figure figcaption { margin: 10px 0 0; padding: 0 4px; }

/* ════ 4. 条件カード（エントリー条件・決済） ════ */
.fbz-wrap .bex-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 22px 0 0;
}
.fbz-wrap .bex-card {
  min-width: 0;
  padding: 20px 22px 22px;
  background: #fff;
  border: 1px solid #E7ECF0;
  border-radius: var(--fbz-radius);
  box-shadow: var(--fbz-shadow);
}
.fbz-wrap .bex-card-k {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px;
  background: #E7F6F8;
  border-radius: 999px;
  font: 700 11.5px/1.6 Helvetica, Arial, sans-serif;
  letter-spacing: .1em;
  color: #00798C;
}
body .fbz-wrap .bex-card-ttl {
  box-shadow: none;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fbz-navy);
}
.fbz-wrap .bex-card-txt {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--fbz-text);
  text-wrap: pretty;
}
/* 4枚（エントリー条件）は 4列 → 2列 → 1列。自動の列数だと900px前後で「3枚＋1枚」に割れるため固定する */
.fbz-wrap .bex-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fbz-wrap .bex-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .fbz-wrap .bex-cards--4 { grid-template-columns: minmax(0, 1fr); } }
.fbz-wrap .fbz-p.bex-after,
.fbz-wrap .fbz-note.bex-after { margin-top: 18px; }

/* ════ 5. ロットの計算例 ════ */
.fbz-wrap .bex-lots {
  margin: 22px 0 0;
  padding: 22px 26px 20px;
  background: var(--fbz-soft);
  border-left: 4px solid var(--fbz-cyan);
  border-radius: var(--fbz-radius);
}
body .fbz-wrap .bex-lots-num {
  margin: 0;
  font-size: clamp(19px, 3.6vw, 26px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--fbz-navy);
  font-variant-numeric: tabular-nums;
}
body .fbz-wrap .bex-lots-txt {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fbz-sub);
}

/* ════ 6. 表（パラメータ） ════
   見出し行は Fibozow比較表の .fbz-th、値は費用表の .fbz-cost-td を使い、
   ここでは左揃えと幅だけを調整する。 */
.fbz-wrap .bex-table .fbz-th { text-align: left; padding: 14px 20px; }
.fbz-wrap .fbz-cost.bex-table--param { min-width: 620px; }
.fbz-wrap .bex-table--param .fbz-th:first-child { width: 26%; }
.fbz-wrap .bex-table--param .fbz-th:nth-child(2) { width: 14%; }
.fbz-wrap .bex-table--param .bex-rowh { background: var(--fbz-soft); text-align: left; font-weight: 400; }
.fbz-wrap .bex-code {
  font: 600 14px/1.6 ui-monospace, 'SF Mono', Consolas, monospace;
  color: var(--fbz-navy);
}
.fbz-wrap .bex-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ════ 7. 詳細ページへの導線 ════ */
.fbz-wrap .fbz-callout.bex-callout { margin-top: 0; }
.fbz-wrap .bex-callout .fbz-btnwrap { margin-top: 16px; }

/* ════ 9. 英語の小見出し（OVERVIEW 等）とファーストビューの副題（元資料どおり） ════ */
body .fbz-wrap .bex-label {
  margin: 0 0 6px;
  font: 700 11.5px/1.6 Helvetica, Arial, sans-serif;
  letter-spacing: .16em;
  color: #00798C;
}
body .fbz-wrap .bex-subtitle {
  margin: 4px 0 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fbz-sub);
}

/* ════ 10. 表の見出し（caption）・バックテストの表 ════ */
.fbz-wrap .bex-caption {
  caption-side: top;
  padding: 14px 20px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fbz-navy);
}
.fbz-wrap .fbz-costwrap.bex-after-block { margin-top: 22px; }
.fbz-wrap .bex-table--kv .fbz-th:first-child { width: 36%; }
.fbz-wrap .bex-table--kv .fbz-cost-th { font-size: 14.5px; }

/* ════ 11. バックテストのグラフ・末尾の出典 ════ */
.fbz-wrap .bex-graph {
  margin: 22px 0 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #E7ECF0;
  border-radius: var(--fbz-radius);
  box-shadow: var(--fbz-shadow);
}
body .fbz-wrap .bex-graph img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--fbz-line2);
}
body .fbz-wrap .bex-graph figcaption { margin: 10px 0 0; }
.fbz-wrap .bex-footer .fbz-note + .fbz-note { margin-top: 8px; }

/* ════ 8. レスポンシブ ════ */
@media (max-width: 700px) {
  .fbz-wrap .bex-figure { padding: 16px 14px 14px; }
  .fbz-wrap .bex-graph { padding: 10px; }
  .fbz-wrap .bex-caption { padding: 12px 14px; font-size: 14px; }
  body .fbz-wrap .bex-subtitle { font-size: 16px; }
  .fbz-wrap .bex-card { padding: 18px 18px 20px; }
  .fbz-wrap .bex-lots { padding: 18px 18px 16px; }
  .fbz-wrap .bex-flow .fbz-flow-item { padding: 14px 16px; }
  .fbz-wrap .bex-flow-txt { font-size: 14.5px; }
  .fbz-wrap .bex-table .fbz-th,
  .fbz-wrap .bex-table .fbz-cost-td { padding: 12px 14px; font-size: 14px; }
  /* Fibozowページのボタンに影響しないよう、このページ（.bex-page）に限定する */
  .fbz-wrap.bex-page .fbz-outline { max-width: 100%; text-align: center; }
}