/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 02 2026 | 05:23:00 */
/* ============================================================
   Channel Experts Elite AUDCAD 解説ページ  —  cee-*
   固定ページ「Channel Experts Elite AUDCADとは」専用。

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

   配色は Fibozowcss のトークン（--fbz-navy / --fbz-cyan / --fbz-red など）を使用。
   文字に使う色は白背景で 4.5:1 以上になる濃さにしています
   （買い #00798C・売り #C4413C は Fibozow比較表の買い／売りタグと同じ）。

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

/* ════ 1. ファーストビューの特徴タグ ════ */
.fbz-wrap .cee-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .fbz-wrap .cee-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図に説明文を足したもの） ════ */
/* Fibozowcss は .fbz-flow を max-width:800px にしている。このページは本文幅いっぱいにする（2026-10-02 ユーザー指示） */
.fbz-wrap .fbz-flow.cee-flow { max-width: none; }
.fbz-wrap .cee-flow .fbz-flow-item { align-items: flex-start; padding: 18px 22px; }
.fbz-wrap .cee-flow .fbz-flow-ico { margin-top: 2px; }
.fbz-wrap .cee-flow-txt {
  display: block;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--fbz-text);
}

/* ════ 3. 強調（買い・売り） ════ */
body .fbz-wrap .cee-buy  { color: #00798C; }
body .fbz-wrap .cee-sell { color: #C4413C; }

/* ════ 4. チャート図（基準は「動く帯」） ════ */
.fbz-wrap .cee-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 .cee-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 10px;
  padding: 0 4px;
  list-style: none;
}
body .fbz-wrap .cee-legend li {
  list-style: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fbz-sub);
}
.fbz-wrap .cee-key {
  display: inline-block;
  width: 16px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}
.fbz-wrap .cee-key.is-center { background: var(--fbz-navy); height: 3px; }
.fbz-wrap .cee-key.is-sell   { background: rgba(224,86,80,.14); border: 1px solid var(--fbz-red); }
.fbz-wrap .cee-key.is-buy    { background: rgba(0,163,189,.14); border: 1px solid var(--fbz-cyan); }
.fbz-wrap .cee-key.is-price  { background: var(--fbz-text); height: 3px; }
.fbz-wrap .cee-chart { overflow-x: auto; }
.fbz-wrap .cee-chart-svg { display: block; width: 100%; min-width: 560px; height: auto; }
body .fbz-wrap .cee-figure figcaption { margin: 10px 0 0; padding: 0 4px; }

/* ════ 5. 条件カード（エントリー条件・決済・得意／苦手） ════ */
.fbz-wrap .cee-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 22px 0 0;
}
.fbz-wrap .cee-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 .cee-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 .cee-card-ttl {
  box-shadow: none;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fbz-navy);
}
.fbz-wrap .cee-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 .cee-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fbz-wrap .cee-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .fbz-wrap .cee-cards--4 { grid-template-columns: minmax(0, 1fr); } }
/* 得意な相場／苦手な相場：Fibozowの「買い／売り」カードと同じ地色 */
.fbz-wrap .cee-card.is-good { background: linear-gradient(180deg, #E8F5F8 0%, #F1FAFC 100%); border-color: #D3ECF1; box-shadow: none; }
.fbz-wrap .cee-card.is-weak { background: linear-gradient(180deg, #FCEDEA 0%, #FFF7F6 100%); border-color: #F3D5CF; box-shadow: none; }
.fbz-wrap .cee-card.is-good .cee-card-k { background: var(--fbz-cyan); color: #fff; }
.fbz-wrap .cee-card.is-weak .cee-card-k { background: #C4413C; color: #fff; }
.fbz-wrap .fbz-note.cee-after { margin-top: 18px; }

/* ════ 6. 2つのロジックの帯の深さ ════ */
.fbz-wrap .cee-scales {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 24px 0 24px;
  padding: 24px 26px 26px;
  background: var(--fbz-soft);
  border-radius: var(--fbz-radius);
}
body .fbz-wrap .cee-scale-ttl {
  box-shadow: none;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fbz-navy);
}
.fbz-wrap .cee-scale-sub {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--fbz-sub);
}
.fbz-wrap .cee-bar {
  position: relative;
  height: 36px;
  margin-top: 28px;  /* 「決済」のラベル（上に15pxはみ出す）が見出しに重ならない高さ */
  background: #E4EAEE;
  border-radius: 6px;
}
.fbz-wrap .cee-bar-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0,163,189,.16);
  border-left: 2px solid var(--fbz-cyan);
  border-right: 2px solid var(--fbz-cyan);
}
.fbz-wrap .cee-bar-exit {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 0;
  border-left: 2px dashed var(--fbz-navy);
}
.fbz-wrap .cee-bar-tag {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #00798C;
}
.fbz-wrap .cee-bar-tag.is-exit { top: -15px; color: var(--fbz-navy); }
.fbz-wrap .cee-ticks {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fbz-sub);
}

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

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

/* ════ 9. レスポンシブ ════ */
@media (max-width: 700px) {
  .fbz-wrap .cee-figure { padding: 16px 14px 14px; }
  .fbz-wrap .cee-scales { padding: 20px 18px 22px; }
  .fbz-wrap .cee-scale-sub { display: block; margin: 2px 0 0; }
  .fbz-wrap .cee-card { padding: 18px 18px 20px; }
  .fbz-wrap .cee-flow .fbz-flow-item { padding: 14px 16px; }
  .fbz-wrap .cee-flow-txt { font-size: 14.5px; }
  .fbz-wrap .cee-table .fbz-th,
  .fbz-wrap .cee-table .fbz-cost-th,
  .fbz-wrap .cee-table .fbz-cost-td { padding: 12px 14px; font-size: 14px; }
  /* Fibozowページのボタンに影響しないよう、このページ（.cee-page）に限定する */
  .fbz-wrap.cee-page .fbz-outline { max-width: 100%; text-align: center; }
}