/* NeoBase同梱コピー。マスターはNEOページビルダー（アプリ本体/component-styles.css）。
   直接編集せず tools/sync-fx-assets.py で再生成する。
   変更点: @import 2件を除去（scroll-hintは下に同梱・Noto Serif JPはテーマが<link>で読込） */

/* ==== scroll-hint v1.x (c) appleple - MIT License https://github.com/appleple/scroll-hint ====
   横スクロールヒントの見た目。@import をやめて同梱したもの ==== */
@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

.scroll-hint-icon {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 120px;
  height: auto;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 20px 10px 10px 10px;
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}

.scroll-hint-text {
  font-size: 10px;
  color: #FFF;
  margin-top: 5px;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8;
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2;
}

.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}



.scroll-hint-shadow-wrap {
  position: relative;
}

.scroll-hint-shadow-wrap::after {
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.scroll-hint-shadow-wrap::before {
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
.scroll-hint-shadow-wrap.is-right-scrollable::after
 {
  opacity: 1;
  visibility: visible;
}

.scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
.scroll-hint-shadow-wrap.is-left-scrollable::before
 {
  opacity: 1;
  visibility: visible;
}

/* 自動生成: データ/作成記事/ 配下の各マスター追加CSS.cssの連結コピー。直接編集しない */
/* ヒントの見た目はscroll-hint公式CSSを利用（本番はフッター基礎部分で読込済み） */
/* ================================================================
   FX会社 全社一覧スライダー（fxs-）
   WordPress カスタマイザー > 追加CSS に貼り付ける。
   デザイン: 料金表スタイル（シックな炭色グラデ×純白×アクセント色）
   サイズ: 全パーツ従来の70%スケール
   ================================================================ */

.fxs-wrap {
  --fxs-card-w: 133px;
  --fxs-gap: 7px;
  position: relative;
  margin: 2em 0; /* 左揃え（幅はJSが整数枚ぶんに調整する） */
  max-width: 100%; /* 表示範囲は記事幅いっぱい（徹底比較表と同じ） */
  /* 表の文字はすべて明朝系（Noto Serif JP）で統一 */
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* ---- 見出し「この表はスクロール表です」+ 金の進捗バー ----
   バーはJS（updateProgress）がスクロール量に連動して動かす本物のインジケーター */
.fxs-wrap .fxs-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 0 10px;
  color: #2a3340;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fxs-head::before,
.fxs-head::after {
  content: "";
  width: 38px;
  height: 1px;
  background: #9aa2ab;
}

/* 全カードが収まりきってスクロール不要なとき（JSがfxs-staticを付ける）は
   「スクロール表」の見出し・バー・矢印を出さない */
.fxs-wrap.fxs-static .fxs-head,
.fxs-wrap.fxs-static .fxs-progress,
.fxs-wrap.fxs-static .fxs-arrow {
  display: none;
}

.fxs-wrap .fxs-progress {
  position: relative;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  /* 銀の溝。上下の縁が暗く中央が明るい対称グラデーションにして、
     金のつまみが同じ高さで「埋まって」見えるようにする */
  background: linear-gradient(180deg, #c2c5c9 0%, #f4f5f6 50%, #c2c5c9 100%);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.14),
    inset 0 -1px 1px rgba(0, 0, 0, 0.14);
}

.fxs-progress .fxs-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 12%;
  height: 4px; /* 溝と同じ高さに埋め込む細身の金 */
  border-radius: 2px;
  /* 金のつまみ。溝と同じく上下の縁が暗く中央が明るい対称グラデーションを重ねて、
     溝に埋め込まれた金線に見せる（横方向は中央が明るい金属光沢） */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 252, 235, 0.30) 50%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(90deg, #a37a28 0%, #e8c568 50%, #a37a28 100%);
  transition: left 0.15s linear, width 0.2s ease;
}

/* ---- バーはドラッグ/クリックで操作できる（JSがpointerイベントで scrollLeft を書く） ---- */
.fxs-wrap .fxs-progress {
  cursor: pointer;
  touch-action: none; /* 指ドラッグ時にページ縦スクロールへ取られない */
}

/* 4pxの細い線だと掴みにくいので、上下8pxの見えない当たり判定を足す */
.fxs-wrap .fxs-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}

.fxs-progress .fxs-progress-thumb {
  cursor: grab;
}

/* ドラッグ中は追従の遅延（transition）を切ってダイレクトに動かす */
.fxs-wrap.fxs-bar-dragging .fxs-progress-thumb {
  transition: none;
  cursor: grabbing;
}


/* 横スクロールのトラック
   PC: 左端スタート・スナップなし（矢印ボタンでJSが1枚ずつ動かす）。
   スマホ: 中央スナップのカルーセル（下のメディアクエリで切替）。 */
.fxs-wrap .fxs-track {
  display: flex;
  /* stretch: 全カードの高さを常に一番高いカードに揃える。
     キャッチが3行に折り返した会社だけカードが背高になり、選択拡大と合わさって
     「1枚だけ過剰に大きい」ように見える問題の根本対策 */
  align-items: stretch;
  gap: var(--fxs-gap);
  margin: 0;
  /* 左0: 1枚目の左端を記事・徹底比較表の左端とツラ合わせ。
     右は隙間1個ぶんの余白: 末尾カードの拡大の逃げ場（枠の重なり・切れ防止） */
  padding: 18px var(--fxs-gap) 21px 0;
  list-style: none;
  overflow-x: auto;
  /* カードのtransform変化をブラウザが「レイアウト移動」と誤認して
     スクロール位置を勝手に補正（スクロールアンカリング）しないようにする */
  overflow-anchor: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.fxs-track::-webkit-scrollbar {
  display: none;
}

/* ---- テーマ(SWELL)のスタイル漏れ対策 ----
   記事本文内の ul/li にはテーマがマーカー（○や・）や余白を付けるので明示的に打ち消す */
.fxs-track,
.fxs-specs {
  list-style: none;
}

.fxs-track > li,
.fxs-specs li {
  margin: 0;
  list-style: none;
}

/* 注意: .fxs-track > li (=.fxs-card) の ::before はシャイン演出に使っているので
   content:none の対象にしないこと（::markerだけ消す） */
.fxs-track > li::marker,
.fxs-specs li::marker {
  content: none;
}

.fxs-specs li::before {
  content: none;
}

/* インライン要素をwpautopから守るためのブロックラッパー。レイアウトには関与させない */
.fxs-navrow {
  height: 0;
  margin: 0;
  padding: 0;
}

.fxs-btnrow {
  margin: 0;
  padding: 0;
}

/* カード。--fxs-focus (0〜1) はJSが入れる「中央への近さ」 */
.fxs-card {
  flex: 0 0 var(--fxs-card-w);
  box-sizing: border-box; /* 枠線込みでちょうどcard-w */
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #ffffff;
  border-radius: 4px;
  /* 接地感のある濃い影 + 空気感のある柔らかい影の二重シャドウ。
     外周1pxの濃い線でエッジを立てる。 */
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.24),
    0 5px 10px rgba(0, 0, 0, calc(0.04 + 0.08 * var(--fxs-focus, 0)));
  opacity: calc(0.88 + 0.12 * var(--fxs-focus, 0));
  /* 選ばれた1枚だけ、文字もロゴも含めて全体を等倍で少し拡大する。
     transformは描画だけの拡大なので、トラックの高さは一切動かない。
     --fxs-shift はJSが入れる「隣が拡大した分だけ外側へ逃げる」量。
     これでカード間の見た目の隙間が拡大中も一定に保たれる。 */
  transform: translateX(var(--fxs-shift, 0px)) scale(calc(1 + 0.05 * var(--fxs-pick, 0)));
  overflow: hidden;
  position: relative;
}

/* 拡大は全カード右方向にだけ伸びる（左隣を動かさない＝左端の枠線が常に見える）。
   末尾カードの拡大はトラック右端の余白へ逃げる */
.fxs-card {
  transform-origin: left center;
}

/* 完全に画面外のカードは影を消す（JSが付け外し）。
   初期状態で「次のカード」の影だけが右端に染み出して見えるのを防ぐ。
   皮膚（fxs-white等）の影指定より優先されるよう詳細度を一段高くしてある */
.fxs-wrap .fxs-card.fxs-offscreen {
  box-shadow: none;
}

/* アクセント色: 12色を並び順に自動で繰り返す。
   カードを何十枚並べても、13枚目は1枚目と同じ赤に戻る。
   特定の会社だけ色を変えたいときは <li> に style="--fxs-accent:#xxxxxx" を書けば上書きできる。 */
.fxs-card:nth-child(12n + 1) { --fxs-accent: #e2574c; }  /* 赤 */
.fxs-card:nth-child(12n + 2) { --fxs-accent: #1c78c8; }  /* 青 */
.fxs-card:nth-child(12n + 3) { --fxs-accent: #0e9f6e; }  /* 緑 */
.fxs-card:nth-child(12n + 4) { --fxs-accent: #7c5cd6; }  /* 紫 */
.fxs-card:nth-child(12n + 5) { --fxs-accent: #d6a13c; }  /* 金 */
.fxs-card:nth-child(12n + 6) { --fxs-accent: #2a9d8f; }  /* ティール */
.fxs-card:nth-child(12n + 7) { --fxs-accent: #e2574c; }  /* 赤 */
.fxs-card:nth-child(12n + 8) { --fxs-accent: #3f8efc; }  /* 明るい青 */
.fxs-card:nth-child(12n + 9) { --fxs-accent: #f97316; }  /* オレンジ */
.fxs-card:nth-child(12n + 10) { --fxs-accent: #10a3a3; } /* 深ティール */
.fxs-card:nth-child(12n + 11) { --fxs-accent: #5b8def; } /* 空色 */
.fxs-card:nth-child(12n + 12) { --fxs-accent: #c44f9e; } /* ピンク */

/* 選ばれたカードだけ、光の帯が左上から右下（斜め下方向）へ流れる。
   transformだけのアニメーションなので描画負荷は軽い。overflow:hiddenで外へは出ない。 */
.fxs-card::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 38%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 62%
  );
  transform: translate3d(-45%, -45%, 0);
  opacity: var(--fxs-pick, 0);
}

/* JSが「選ばれた瞬間」に .fxs-picked を付ける。
   その瞬間にアニメーションが0%から始まるので、選ばれてすぐ光が流れ出す。 */
.fxs-card.fxs-picked::before {
  animation: fxs-shine 3s linear infinite;
}

@keyframes fxs-shine {
  0% {
    transform: translate3d(-45%, -45%, 0);
  }
  55% {
    transform: translate3d(45%, 45%, 0);
  }
  100% {
    transform: translate3d(45%, 45%, 0);
  }
}

/* カード内側の上辺ハイライト・下辺の締まり（物体としての厚み） */
.fxs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

/* ---- 上段: ダークゾーン ---- */

.fxs-top {
  position: relative;
  /* 光源を設計した黒: 上部中央に弱い光 + うっすらノイズ + 下へ締まる炭色 */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 130% 60% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(180deg, #4a4a4a 0%, #333333 45%, #262626 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45);
  padding-bottom: 11px;
}

/* 選ばれた1枚だけ黒く沈む（--fxs-pick は選ばれたカードだけ1になる） */
.fxs-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: calc(0.30 * var(--fxs-pick, 0));
  pointer-events: none;
}

.fxs-top > * {
  position: relative;
  z-index: 1;
}

/* 会社名（文字だけ。ヘッダー帯） */
.fxs-name {
  padding: 10px 7px 8px;
  /* 0.38→0.53: 下地の黒を明るくした(2026-07-04)ぶん濃くして、帯は従来の黒の見た目を維持 */
  background: rgba(0, 0, 0, 0.53);
  /* 会社名の下にアクセント色のライン（ボタンを統一色にしたぶん、ここで会社色を出す） */
  border-bottom: 2px solid var(--fxs-accent, #e8823c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ロゴ（正方形 1:1。<img>を入れると自動調整）
   背景より少し明るい黒パネル + インナーシャドウ + 弱い光沢。 */
.fxs-logo {
  display: grid;
  place-items: center;
  /* 1:1の正方形。カード幅の6割弱のバランス */
  width: 80px;
  aspect-ratio: 1 / 1;
  margin: 11px auto 1px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -7px 11px rgba(0, 0, 0, 0.40),
    0 1px 4px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* ロゴ全面をリンクにする（href差し替え待ち。<img>を入れると自動調整） */
.fxs-logo-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.fxs-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ひとことキャッチ（2行表示） */
.fxs-hero-catch {
  display: block;
  margin: 7px 8px 0;
  min-height: 29px; /* 2行ぶんの高さを確保して全カードの段を揃える */
  color: var(--fxs-accent, #e8823c);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* ---- 下段: ライトゾーン（極小ラベル上段 + 値下段） ---- */

.fxs-specs {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 14px 8px;
  list-style: none;
}

.fxs-specs li {
  padding: 7px 0 9px;
  border-bottom: 1px dashed #d8d8d8;
  text-align: center;
  line-height: 1.2;
}

.fxs-specs li:last-child {
  border-bottom: 0;
}

.fxs-spec-label {
  display: block;
  color: #8a9099;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.fxs-specs b {
  display: block;
  /* ラベルとの間隔を少し広めに。line-heightを詰めて行ボックスを文字にぴったり
     合わせることで、下線までの余白が全行で均一になる */
  margin-top: 3px;
  line-height: 1.15;
  color: #16181c;
  /* 参考画像のバランス: 極小ラベルに対して値は約1.9倍の明朝 */
  font-size: 13px;
  font-weight: 700;
}

/* 下部ボタン: 公式情報（全社統一のダークネイビー） */
.fxs-btn {
  --fxs-btn-base: #24303e;
  display: block;
  margin: 0;
  padding: 10px 0 9px;
  /* color-mix非対応ブラウザ(iOS16.1以前等)用の単色フォールバック */
  background: var(--fxs-btn-base);
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--fxs-btn-base), #ffffff 14%) 0%,
      var(--fxs-btn-base) 55%,
      color-mix(in srgb, var(--fxs-btn-base), #000000 30%) 100%
    );
  /* 上辺ハイライト + 下辺の濃い線で「色付きの帯」から「ボタン」にする */
  border-top: 1px solid rgba(255, 255, 255, 0.30);
  border-bottom: 2px solid rgba(0, 0, 0, 0.45); /* color-mix非対応用フォールバック */
  border-bottom: 2px solid color-mix(in srgb, var(--fxs-btn-base), #000000 50%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.14em;
  transition: filter 0.15s ease;
}

/* ボタン右側の「＞」シェブロン */
.fxs-btn::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.85);
  border-right: 1.5px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle;
}

.fxs-btn:hover {
  color: #ffffff;
  filter: brightness(1.12);
}

/* ---- 操作まわり ----
   PC: 左右の矢印ボタン（半透明ダークの角丸タブ×白シェブロン）。
   スマホ: スワイプ（スワイプヒントはJSが自前で表示する）。 */

.fxs-arrow {
  position: absolute;
  /* 50%はwrap全体基準。上に見出し(約20px)+余白10px+バー4px=約34pxが増えたので
     半分の17pxを足してカード帯の中心に合わせる */
  top: calc(50% + 17px);
  z-index: 30;
  width: 27px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(20, 22, 26, 0.5);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.25s ease;
}

/* 端まで行って押せない矢印はふわっと消す（JSが付け外しする） */
.fxs-arrow-hidden {
  opacity: 0;
  pointer-events: none;
}

.fxs-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  -webkit-mask: var(--fxs-chev) center / 14px 14px no-repeat;
  mask: var(--fxs-chev) center / 14px 14px no-repeat;
}

.fxs-prev {
  left: -36px; /* 枠の外側 */
  --fxs-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5'/%3E%3C/svg%3E");
}

.fxs-next {
  right: -36px; /* 枠の外側 */
  --fxs-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5L16 12l-6.5 6.5'/%3E%3C/svg%3E");
}

.fxs-arrow:hover {
  background: rgba(20, 22, 26, 0.8);
}

/* PC: 選択が矢印クリックで切り替わるので、拡大・スライドを滑らかにアニメーションさせる */
@media (min-width: 761px) {
  .fxs-card {
    transition: transform 0.35s ease, opacity 0.3s ease;
  }
}

/* スマホ: 中央スナップのカルーセル。矢印は出さない */
/* スマホ: 画面幅に関係なく常にちょうど3枚見えるようにカード幅を1/3で割る。
   スワイプ+カード頭スナップ。真ん中に来たカードが「選ばれた」状態になる */
@media (max-width: 760px) {
  .fxs-wrap {
    --fxs-gap: 6px;
    --fxs-card-w: calc((100% - 2 * var(--fxs-gap)) / 3);
  }
  .fxs-wrap .fxs-track {
    /* 右端に隙間1個ぶんの余白: 真ん中カードの拡大で3枚目が押し出されても収まる */
    padding: 14px var(--fxs-gap) 16px 0;
    scroll-snap-type: x mandatory;
  }
  .fxs-card {
    scroll-snap-align: start;
  }
  .fxs-arrow {
    display: none;
  }
}


/* ================================================================
   ①スライダー表 ホワイト版（fxs-white）
   ①スライダー表ブラックに着せる「ホワイト皮膚」。
   配色: クリーム×ネイビー×金（黒ファミリーの対になる白ファミリー第1弾）。
   使い方: <div class="fxs-wrap fxs-white"> とクラスを1個足すだけ。
   ・社名の下に会社アクセント色のライン
   ・JS/挙動は①と完全共通（矢印・金バー・ドラッグ・スワイプ・自動非表示）
   ・①のCSSより後に読み込むこと
   ================================================================ */

/* ---- カード: クリームホワイトの紙 ---- */

.fxs-white .fxs-card {
  background: #fffdf8;
  border: 1px solid rgba(150, 128, 84, 0.35);
  box-shadow:
    0 1px 3px rgba(122, 104, 70, 0.22),
    0 5px 10px rgba(122, 104, 70, calc(0.05 + 0.09 * var(--fxs-focus, 0)));
}

.fxs-white .fxs-card::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(150, 128, 84, 0.14);
}

/* ---- 上段: クリームの光沢ゾーン ---- */

.fxs-white .fxs-top {
  background:
    radial-gradient(ellipse 130% 60% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(180deg, #fefbf3 0%, #f8f0dd 60%, #f2e6cb 100%);
  border-bottom: 1px solid rgba(160, 140, 95, 0.30);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 4px rgba(160, 140, 95, 0.14);
}

/* 「選ばれた1枚」は黒沈みではなく金色に薄く色づく */
.fxs-white .fxs-top::before {
  background: #d9c28e;
}

/* ---- 社名: ネイビー文字（帯なし）+ アクセント線 ---- */

.fxs-white .fxs-name {
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: #1d3a5f;
}

/* ---- ロゴパネル: 白磁 ---- */

.fxs-white .fxs-logo {
  color: rgba(110, 95, 65, 0.40);
  background: linear-gradient(180deg, #ffffff 0%, #f7f0e0 100%);
  border: 1px solid rgba(160, 140, 95, 0.38);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -7px 11px rgba(160, 140, 95, 0.15),
    0 1px 3px rgba(122, 104, 70, 0.18);
}

/* ---- 下段: ラベル灰青 + 値ネイビー + 温かい点線 ---- */

.fxs-white .fxs-specs li {
  border-bottom: 1px dashed #ddd3bd;
}

/* 最終行（最小取引単位）は線なし＝黒版と同じ。
   上の色替えルールが黒版のlast-child打ち消しを上書きしてしまうため明示する */
.fxs-white .fxs-specs li:last-child {
  border-bottom: 0;
}

.fxs-white .fxs-spec-label {
  color: #8d94a0;
}

.fxs-white .fxs-specs b {
  color: #22304a;
}

/* ---- ボタン: ゴールドメタリックの帯×ネイビー文字（④ホワイト版のCTAと同じ質感） ---- */

.fxs-white .fxs-btn {
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.40), transparent 55%),
    linear-gradient(180deg, #f6e6b2 0%, #eed491 30%, #e6c374 55%, #d4a94f 85%, #c69a41 100%);
  border-top: 1px solid rgba(255, 252, 235, 0.85);
  border-bottom: 2px solid #a97e35;
  box-shadow: inset 0 -3px 5px rgba(150, 110, 40, 0.28);
  color: #1d3a5f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.fxs-white .fxs-btn::after {
  border-top-color: rgba(29, 58, 95, 0.9);
  border-right-color: rgba(29, 58, 95, 0.9);
}

.fxs-white .fxs-btn:hover {
  color: #1d3a5f;
  filter: brightness(1.06);
}

/* 矢印は上書きしない: 全部品共通の灰色デザイン（半透明ダークタブ×白シェブロン） */


/* ================================================================
   FX会社 スライダーランキング表ブラック（fxs-rank）
   ①スライダー表ブラックに着せる「ランキング皮膚」。
   使い方: <div class="fxs-wrap fxs-rank"> とクラスを1個足すだけ。
   ・順位はカードの並び順からCSSカウンターで自動採番（並べ替え＝順位変更）
   ・カード左上に下向きペナント型の順位バッジ（数字のみ）
   ・1位=金 / 2位=銀 / 3位=銅 / 4位以降=その会社のアクセント色（12色循環と連動）
   ・社名はバッジと同じ帯（左右に対称の余白+文字を少し小さくして被りを回避）
   ・①のマスターCSS/JSは無改造。①のCSSより後に読み込むこと
   ================================================================ */

.fxs-rank .fxs-track {
  counter-reset: fxsrank;
}

.fxs-rank .fxs-card {
  counter-increment: fxsrank;
}

/* 社名はバッジと同じ帯に並べる（モックの形）。
   バッジの足場ぶん左右に対称の余白を取り（中央揃えを維持）、
   文字を少し小さくして最長の社名でもバッジと被らないようにする */
.fxs-rank .fxs-name {
  padding-left: 22px;
  padding-right: 22px;
  font-size: 9px;
}

/* 順位バッジ本体。カード左上から垂れ下がるペナント（下端が尖る）。
   数字はカウンターが自動で入れる。
   注意: .fxs-top::before は「選ばれた黒沈み」で使用済みなので::afterを使う */
.fxs-rank .fxs-top::after {
  content: counter(fxsrank);
  position: absolute;
  top: 0;
  left: 6px;
  z-index: 2;
  width: 14px;
  height: 27px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  /* clip-pathでborderは使えないため、立体感はドロップシャドウと内側の光沢で出す */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  text-align: center;
  line-height: 19px;
  font-size: 10px;
  font-weight: 900;
  /* 既定は4位以降: その会社のアクセント色（①の12色循環が--fxs-accentに入っている）
     上が明るく下が沈む光沢を色の上に重ねる */
  background-color: var(--fxs-accent, #39424f);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.30) 100%);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* 1位: 金 */
.fxs-rank .fxs-card:nth-child(1) .fxs-top::after {
  background-color: transparent;
  background-image: linear-gradient(180deg, #fbe98d 0%, #e7c258 40%, #a97c22 78%, #8a6417 100%);
  color: #553a06;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 2位: 銀 */
.fxs-rank .fxs-card:nth-child(2) .fxs-top::after {
  background-color: transparent;
  background-image: linear-gradient(180deg, #f4f5f7 0%, #c9cdd3 45%, #9aa0a8 80%, #83898f 100%);
  color: #3a3f46;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 3位: 銅 */
.fxs-rank .fxs-card:nth-child(3) .fxs-top::after {
  background-color: transparent;
  background-image: linear-gradient(180deg, #edb185 0%, #c97e42 45%, #9c5b28 80%, #7c451d 100%);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}


/* ================================================================
   FX会社 徹底比較表（fxt-）
   「スライダー表ブラック」（fxs-）派生の高密度比較表。
   隙間ゼロの連結・列幅80px・フォント60%・ロゴ70%・セル縦書き・項目列固定。
   WordPress カスタマイザー > 追加CSS に貼り付ける。JSは不要
   （スワイプヒントはJSが自前で表示する）。
   ================================================================ */

.fxt-wrap {
  position: relative; /* 矢印ボタンの基準 */
  margin: 2em 0; /* 左揃え（スライダー表ブラックと左端を揃える） */
  max-width: 100%;
  /* スライダー表ブラックと同じ明朝で統一 */
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* ---- 見出し「この表はスクロール表です」+ 金の進捗バー（スライダー表ブラックと同じ意匠） ----
   バーはJS（updateProgress）がスクロール量に連動して動かす本物のインジケーター */
.fxt-wrap .fxt-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 0 10px;
  color: #2a3340;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fxt-head::before,
.fxt-head::after {
  content: "";
  width: 38px;
  height: 1px;
  background: #9aa2ab;
}

/* 全列が収まりきってスクロール不要なとき（JSがfxt-staticを付ける）は
   「スクロール表」の見出し・バー・矢印を出さない */
.fxt-wrap.fxt-static .fxt-head,
.fxt-wrap.fxt-static .fxt-progress,
.fxt-wrap.fxt-static .fxt-arrow {
  display: none;
}

.fxt-wrap .fxt-progress {
  position: relative;
  height: 4px;
  margin: 0 0 12px;
  border-radius: 2px;
  /* 銀の溝。上下の縁が暗く中央が明るい対称グラデーション */
  background: linear-gradient(180deg, #c2c5c9 0%, #f4f5f6 50%, #c2c5c9 100%);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.14),
    inset 0 -1px 1px rgba(0, 0, 0, 0.14);
}

.fxt-progress .fxt-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 12%;
  height: 4px;
  border-radius: 2px;
  /* 溝に埋め込まれた細身の金線（上下対称の光沢） */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 252, 235, 0.30) 50%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(90deg, #a37a28 0%, #e8c568 50%, #a37a28 100%);
  transition: left 0.15s linear, width 0.2s ease;
}

/* ---- バーはドラッグ/クリックで操作できる（JSがpointerイベントで scrollLeft を書く） ---- */
.fxt-wrap .fxt-progress {
  cursor: pointer;
  touch-action: none; /* 指ドラッグ時にページ縦スクロールへ取られない */
}

/* 4pxの細い線だと掴みにくいので、上下8pxの見えない当たり判定を足す */
.fxt-wrap .fxt-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}

.fxt-progress .fxt-progress-thumb {
  cursor: grab;
}

/* ドラッグ中は追従の遅延（transition）を切ってダイレクトに動かす */
.fxt-wrap.fxt-bar-dragging .fxt-progress-thumb {
  transition: none;
  cursor: grabbing;
}


.fxt-scroll {
  overflow-x: auto;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  /* スライダー表ブラックのカードと同じ立体感（外周1pxの枠 + 接地影 + 柔らかい影） */
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.24),
    0 5px 10px rgba(0, 0, 0, 0.08);
  /* 操作はPCなら矢印ボタン。スクロールバーは出さない */
  scrollbar-width: none;
}

.fxt-scroll::-webkit-scrollbar {
  display: none;
}

/* wpautop対策のブロックラッパー。レイアウトには関与させない */
.fxt-navrow {
  height: 0;
  margin: 0;
  padding: 0;
}

/* ---- 矢印（スライダー表ブラックと同じ半透明ダーク角丸タブ×白シェブロン） ---- */

.fxt-arrow {
  position: absolute;
  /* 50%はwrap全体基準。上に見出し(約20px)+余白10px+バー4px+余白12px=約46pxが
     増えたので半分の23pxを足して表本体の中心に合わせる */
  top: calc(50% + 23px);
  z-index: 30;
  width: 27px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(20, 22, 26, 0.5);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.25s ease;
}

.fxt-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  -webkit-mask: var(--fxt-chev) center / 14px 14px no-repeat;
  mask: var(--fxt-chev) center / 14px 14px no-repeat;
}

.fxt-prev {
  left: -36px; /* 枠の外側 */
  --fxt-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5'/%3E%3C/svg%3E");
}

.fxt-next {
  right: -36px; /* 枠の外側 */
  --fxt-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5L16 12l-6.5 6.5'/%3E%3C/svg%3E");
}

.fxt-arrow:hover {
  background: rgba(20, 22, 26, 0.8);
}

/* 端まで行って押せない矢印はふわっと消す（JSが付け外しする） */
.fxt-arrow-hidden {
  opacity: 0;
  pointer-events: none;
}

/* スマホはスワイプ（ヒントはJSが自前表示）。矢印は出さない */
@media (max-width: 760px) {
  .fxt-arrow {
    display: none;
  }
}

/* 表本体。カード連結のため隙間ゼロ（枠線は各セルの右・下辺で共有） */
.fxt-wrap .fxt-table {
  border-collapse: separate; /* sticky列で枠線がズレないようcollapseは使わない（テーマ対策で詳細度高め） */
  border-spacing: 0;
  width: max-content;
  margin: 0;
}

.fxt-wrap .fxt-table th,
.fxt-wrap .fxt-table td {
  margin: 0;
  padding: 0;
  border: 0;
  /* すべての線を同じ太さで統一 */
  border-right: 0.3px solid #d8d8d8;
  border-bottom: 0.3px solid #d8d8d8;
}

/* ---- ヘッダー行（会社）: スライダー表ブラックのダークゾーンを踏襲 ---- */

.fxt-company {
  /* 基準80px。JSが本文幅ぴったりに敷き詰めるため--fxt-col-wで少し伸ばす */
  width: var(--fxt-col-w, 80px);
  min-width: var(--fxt-col-w, 80px);
  vertical-align: bottom;
  background:
    radial-gradient(ellipse 130% 60% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(180deg, #4a4a4a 0%, #333333 45%, #262626 100%);
  /* 会社ごとのアクセント色ライン（nth-childで12色循環） */
  border-bottom: 2px solid var(--fxt-accent, #e8823c);
}

.fxt-name {
  /* 幅を列幅に固定する。これが無いと nowrap の長い社名/商品名が
     列を押し広げてレイアウトが破裂する（ellipsisは幅上限があって初めて効く） */
  width: var(--fxt-col-w, 80px);
  box-sizing: border-box;
  padding: 5px 3px 4px;
  /* 0.38→0.53: 下地の黒を明るくした(2026-07-04)ぶん濃くして、帯は従来の黒の見た目を維持 */
  background: rgba(0, 0, 0, 0.53);
  /* 社名の帯の下に会社ごとのアクセント色ライン（スライダー表ブラックと同じ位置） */
  border-bottom: 2px solid var(--fxt-accent, #e8823c);
  color: #ffffff;
  font-size: 7px; /* 60% */
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ロゴ（70% = 56px。1:1、<img>を入れると自動調整） */
.fxt-logo {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1 / 1;
  margin: 6px auto 7px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -5px 8px rgba(0, 0, 0, 0.40);
  overflow: hidden;
}

.fxt-logo.fxt-logo-light {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  padding: 4px;
  color: rgba(40, 44, 52, 0.46);
  background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -5px 8px rgba(40, 54, 70, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.22);
}

.fxt-logo.fxt-logo-fill {
  padding: 0;
}

.fxt-logo-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.fxt-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fxt-logo.fxt-logo-fill img {
  object-fit: cover;
}

/* 会社ごとのアクセント色（スライダー表ブラックと同じ12色循環。先頭の項目セルぶん+1） */
.fxt-table thead th:nth-child(12n + 2) { --fxt-accent: #e2574c; }
.fxt-table thead th:nth-child(12n + 3) { --fxt-accent: #1c78c8; }
.fxt-table thead th:nth-child(12n + 4) { --fxt-accent: #0e9f6e; }
.fxt-table thead th:nth-child(12n + 5) { --fxt-accent: #7c5cd6; }
.fxt-table thead th:nth-child(12n + 6) { --fxt-accent: #d6a13c; }
.fxt-table thead th:nth-child(12n + 7) { --fxt-accent: #2a9d8f; }
.fxt-table thead th:nth-child(12n + 8) { --fxt-accent: #e2574c; }
.fxt-table thead th:nth-child(12n + 9) { --fxt-accent: #3f8efc; }
.fxt-table thead th:nth-child(12n + 10) { --fxt-accent: #f97316; }
.fxt-table thead th:nth-child(12n + 11) { --fxt-accent: #10a3a3; }
.fxt-table thead th:nth-child(12n + 12) { --fxt-accent: #5b8def; }
.fxt-table thead th:nth-child(12n + 13) { --fxt-accent: #c44f9e; }

/* ---- 左の項目列（スクロールしても固定） ---- */

.fxt-wrap .fxt-table .fxt-corner,
.fxt-wrap .fxt-table .fxt-item {
  position: sticky;
  left: 0;
  z-index: 3;
  /* 固定列の右端。下をくぐる列の文字と混ざって見えないよう影で段差を付ける */
  border-right: 1px solid #bdbdb8;
  box-shadow: 4px 0 9px rgba(0, 0, 0, 0.38);
}

.fxt-wrap .fxt-table .fxt-corner {
  border-bottom: 2px solid #2a2a2a; /* 会社ヘッダーのアクセント線と同じ太さで高さを揃える */
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2em;
  vertical-align: middle;
}

.fxt-wrap .fxt-table .fxt-item {
  padding: 7px 14px; /* 文字の左右にしっかり余白（枠ギリギリ対策） */
  /* 黒地×白文字。上の光から漆黒まで落ちる強いグラデーション */
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  white-space: nowrap; /* 項目名がどれだけ長くても折り返さず、列が右に伸びる */
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---- データセル（横書き） ---- */

/* 文字装飾はtd自体に持つ（リアルタイム編集への挿入時、Chromeが属性なしの
   <span>を剥がすため、spanに依存すると文字サイズが失われる） */
.fxt-wrap .fxt-table .fxt-cell {
  padding: 7px 2px;
  background: #ffffff;
  text-align: center;
  vertical-align: middle;
  color: #16181c;
  font-size: 8px; /* 60% */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/* 行を白と灰色の交互にして読みやすく */
.fxt-table tbody tr:nth-child(even) .fxt-cell {
  background: #f2f2f0;
}

/* 旧マークアップ（span入り）互換: 二重paddingにならないようspan側は無効化 */
.fxt-cell span {
  display: inline;
  padding: 0;
}


/* ================================================================
   ③詳細表 ホワイト版（fxt-white）
   ③詳細表ブラックに着せる「ホワイト皮膚」。
   配色: クリーム×ネイビー×金（白ファミリー。①ホワイト版と同じ言語）。
   使い方: <div class="fxt-wrap fxt-white"> とクラスを1個足すだけ。
   ・JS/挙動は③と完全共通（1列送り矢印・金バー・ドラッグ・スワイプ・自動非表示）
   ・③のCSSより後に読み込むこと
   ================================================================ */

/* ---- 枠: 温かい茶系の線と影 ---- */

.fxt-white .fxt-scroll {
  border-color: rgba(150, 128, 84, 0.25);
  box-shadow:
    0 1px 3px rgba(122, 104, 70, 0.22),
    0 5px 10px rgba(122, 104, 70, 0.08);
}

/* ---- 会社ヘッダー: クリームの光沢ゾーン×ネイビー社名 ---- */

.fxt-white .fxt-company {
  background:
    radial-gradient(ellipse 130% 60% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(180deg, #fefbf3 0%, #f8f0dd 60%, #f2e6cb 100%);
}

.fxt-white .fxt-name {
  background: transparent;
  color: #1d3a5f;
  text-shadow: none;
}

/* ロゴパネル: 白磁 */
.fxt-white .fxt-logo {
  color: rgba(110, 95, 65, 0.40);
  background: linear-gradient(180deg, #ffffff 0%, #f7f0e0 100%);
  border: 1px solid rgba(160, 140, 95, 0.38);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -5px 8px rgba(160, 140, 95, 0.15);
}

/* ---- 左の項目列: クリームの帯×ネイビー文字 ---- */

.fxt-wrap.fxt-white .fxt-table .fxt-corner,
.fxt-wrap.fxt-white .fxt-table .fxt-item {
  border-right: 0.3px solid #ece5d4; /* 他のセル線と同じ極細・同色 */
  box-shadow: none; /* 固定列右の段差影は付けない（フラット） */
}

/* 項目列はグラデーションなしのフラットなクリーム単色（ヘッダーの中間色） */
.fxt-wrap.fxt-white .fxt-table .fxt-corner {
  background: #f8f0dd;
  /* 黒版の2pxだと他の極細線より太く見えるため、他のセル線と同じにする */
  border-bottom: 0.3px solid #ece5d4;
  color: #1d3a5f;
}

.fxt-wrap.fxt-white .fxt-table .fxt-item {
  background: #f8f0dd;
  color: #1d3a5f;
  text-shadow: none;
}

/* ---- データセル: 白×温かいゼブラ、値はネイビー ---- */

.fxt-wrap.fxt-white .fxt-table th,
.fxt-wrap.fxt-white .fxt-table td {
  border-right-color: #ece5d4;
  border-bottom-color: #ece5d4;
}

.fxt-white .fxt-cell span {
  color: #22304a;
}

.fxt-white .fxt-table tbody tr:nth-child(even) .fxt-cell {
  background: #faf5ea;
}

/* 矢印は上書きしない: 全部品共通の灰色デザイン（半透明ダークタブ×白シェブロン） */


/* ================================================================
   ③詳細表 ランキング版（fxt-rank）
   ③詳細表に着せる「ランキング皮膚」。②スライダーランキング表と同じ
   ペナント型順位バッジを各社ヘッダーの左上に付ける。
   使い方: <div class="fxt-wrap fxt-rank"> とクラスを1個足すだけ。
   ・順位は列の並び順からCSSカウンターで自動採番（並べ替え＝順位変更）
   ・1位=金 / 2位=銀 / 3位=銅 / 4位以降=その会社のアクセント色（12色循環と連動）
   ・ホワイト版との重ね掛け可: <div class="fxt-wrap fxt-rank fxt-white">
   ・③のマスターCSS/JSは無改造。③のCSSより後に読み込むこと
   ================================================================ */

.fxt-rank .fxt-table thead tr {
  counter-reset: fxtrank;
}

.fxt-wrap.fxt-rank .fxt-table .fxt-company {
  counter-increment: fxtrank;
  position: relative;
}

/* 社名帯はバッジと一体の「1段」構造:
   帯を2行ぶんの固定高さにして全面同色、文字は上下中央揃え。
   長い社名/商品名は省略ではなく2行に折り返す運用（3行目以降は切れる）。
   左右paddingはバッジ(左4〜16px)と重ならないよう対称に確保 */
.fxt-wrap.fxt-rank .fxt-table .fxt-name {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 17px;
  white-space: normal;
  line-height: 1.35;
  overflow: hidden;
}

/* 順位バッジ本体。列左上から垂れ下がるペナント（②と同じ意匠の80px列向けサイズ） */
.fxt-rank .fxt-company::before {
  content: counter(fxtrank);
  position: absolute;
  top: 0;
  left: 4px;
  z-index: 2;
  width: 12px;
  height: 23px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  text-align: center;
  line-height: 16px;
  font-size: 9px;
  font-weight: 900;
  /* 既定は4位以降: その会社のアクセント色（③の12色循環が--fxt-accentに入っている） */
  background-color: var(--fxt-accent, #39424f);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.30) 100%);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* 1位: 金（先頭の項目セルぶん+1でnth-child(2)が1社目） */
.fxt-rank .fxt-table thead th:nth-child(2)::before {
  background-color: transparent;
  background-image: linear-gradient(180deg, #fbe98d 0%, #e7c258 40%, #a97c22 78%, #8a6417 100%);
  color: #553a06;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 2位: 銀 */
.fxt-rank .fxt-table thead th:nth-child(3)::before {
  background-color: transparent;
  background-image: linear-gradient(180deg, #f4f5f7 0%, #c9cdd3 45%, #9aa0a8 80%, #83898f 100%);
  color: #3a3f46;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 3位: 銅 */
.fxt-rank .fxt-table thead th:nth-child(4)::before {
  background-color: transparent;
  background-image: linear-gradient(180deg, #edb185 0%, #c97e42 45%, #9c5b28 80%, #7c451d 100%);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}


/* ================================================================
   FX会社 1社紹介カード ブラックゴールド（fxg-）
   1社を単独で大きく紹介する横長CTAカード。JS不要（CSSのみ）。
   黒ファミリー共通言語: 炭色グラデ×明朝(Noto Serif JP)×金アクセント。
   金色は --fxg-gold で一括変更できる（会社色にしたければ
   <div class="fxg-card" style="--fxg-gold:#1c78c8"> のように上書き）。
   WordPress カスタマイザー > 追加CSS に貼り付ける。
   ================================================================ */

.fxg-card {
  --fxg-gold: #d9ab3c;
  position: relative;
  margin: 2em 0;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  /* 上部にほんのり光が当たる炭色グラデ（家族共通の光源設計） */
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #4a4a4a 0%, #333333 55%, #262626 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 6px 14px rgba(0, 0, 0, 0.12);
  overflow: hidden; /* 金線・角丸からのはみ出し防止 */
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* 上辺の金ライン（中央が明るい金属光沢） */
.fxg-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8a6417 0%, #e8c568 35%, #fbe98d 50%, #e8c568 65%, #8a6417 100%);
}

.fxg-body {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 30px 26px 26px;
}

/* ---- 左: ロゴパネル（1:1、<img>を入れると自動調整） ---- */

.fxg-logo {
  flex: 0 0 128px;
  display: grid;
  place-items: center;
  width: 128px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.25) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -6px 10px rgba(0, 0, 0, 0.40);
  color: rgba(255, 255, 255, 0.30);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  overflow: hidden;
}

.fxg-logo-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.fxg-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fxg-logo.fxg-logo-fill img {
  object-fit: cover;
}

.fxs-logo,
.fxt-logo,
.fxg-logo {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.fxs-logo-link,
.fxt-logo-link,
.fxg-logo-link {
  cursor: pointer;
  border-radius: inherit;
  outline-offset: 3px;
}

.fxs-logo img,
.fxt-logo img,
.fxg-logo img {
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.fxs-logo:has(.fxs-logo-link:hover),
.fxs-logo:has(.fxs-logo-link:focus-visible),
.fxt-logo:has(.fxt-logo-link:hover),
.fxt-logo:has(.fxt-logo-link:focus-visible),
.fxg-logo:has(.fxg-logo-link:hover),
.fxg-logo:has(.fxg-logo-link:focus-visible) {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -7px 11px rgba(0, 0, 0, 0.34),
    0 0 0 2px rgba(232, 197, 104, 0.30),
    0 8px 18px rgba(0, 0, 0, 0.32);
  filter: brightness(1.06);
}

.fxt-logo.fxt-logo-light:has(.fxt-logo-link:hover),
.fxt-logo.fxt-logo-light:has(.fxt-logo-link:focus-visible) {
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -5px 8px rgba(40, 54, 70, 0.08),
    0 0 0 2px rgba(232, 197, 104, 0.36),
    0 8px 18px rgba(0, 0, 0, 0.30);
  filter: brightness(1.04);
}

.fxs-logo-link:hover img,
.fxs-logo-link:focus-visible img,
.fxt-logo-link:hover img,
.fxt-logo-link:focus-visible img,
.fxg-logo-link:hover img,
.fxg-logo-link:focus-visible img {
  transform: scale(1.055);
  filter: brightness(1.08) saturate(1.04);
}

.fxs-logo-link:focus-visible,
.fxt-logo-link:focus-visible,
.fxg-logo-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
}

/* ---- 右: 情報ブロック（金の縦罫で区切る） ---- */

.fxg-info {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 26px;
  border-left: 1px solid rgba(217, 171, 60, 0.45); /* color-mix非対応ブラウザ用の金 */
  border-left-color: color-mix(in srgb, var(--fxg-gold) 45%, transparent);
}

.fxg-name {
  margin: 0 0 2px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.fxg-catch {
  margin: 0 0 10px;
  color: var(--fxg-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fxg-desc {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ---- CTAボタン（下辺に金のエッジ） ---- */

/* wpautop対策のブロックラッパー */
.fxg-btnrow {
  margin: 0;
  padding: 0;
}

.fxg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, #43464c 0%, #2b2e33 55%, #202328 100%);
  /* 下辺の金エッジ + 立体感（エッジ色は--fxg-goldに追従） */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 0 var(--fxg-gold),
    0 4px 8px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.fxg-btn:hover {
  color: #ffffff;
  filter: brightness(1.12);
}

/* ボタン右側の「＞」シェブロン */
.fxg-btn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}

/* ---- スマホ: 縦積み ---- */

@media (max-width: 760px) {
  .fxg-body {
    flex-direction: column;
    gap: 16px;
    padding: 22px 16px 18px;
  }

  .fxg-logo {
    flex: 0 0 auto;
    width: 104px;
  }

  .fxg-info {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    /* 縦積みでは金罫を上辺に付け替える */
    padding-top: 16px;
    border-top: 1px solid rgba(217, 171, 60, 0.45); /* color-mix非対応ブラウザ用の金 */
    border-top-color: color-mix(in srgb, var(--fxg-gold) 45%, transparent);
    text-align: center;
  }

  .fxg-name {
    font-size: 19px;
  }

  .fxg-desc {
    font-size: 11px;
    text-align: left;
  }
}


/* ================================================================
   ④単独表 ホワイト版（fxg-white）
   ④単独表ブラックに着せる「ホワイト皮膚」。
   配色: クリーム×ネイビー×金（白ファミリー。①③ホワイト版と同じ言語）。
   金の上辺ライン・金の縦罫・金エッジのCTAボタンは黒版のまま活かす。
   使い方: <div class="fxg-card fxg-white"> とクラスを1個足すだけ。
   ・④のCSSより後に読み込むこと（JSはもともと不要）
   ================================================================ */

/* ---- カード: クリームの光沢 ---- */

.fxg-card.fxg-white {
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, #f8f1e1 60%, #f2e7cf 100%);
  border: 1px solid rgba(150, 128, 84, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 3px rgba(122, 104, 70, 0.22),
    0 6px 14px rgba(122, 104, 70, 0.10);
}

/* ---- ロゴパネル: 白磁（①③ホワイト版と同じ） ---- */

.fxg-white .fxg-logo {
  color: rgba(110, 95, 65, 0.40);
  background: linear-gradient(180deg, #ffffff 0%, #f7f0e0 100%);
  border: 1px solid rgba(160, 140, 95, 0.38);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -6px 10px rgba(160, 140, 95, 0.15);
}

/* ---- 文字: 社名ネイビー、説明はネイビーグレー ---- */

.fxg-white .fxg-name {
  color: #1d3a5f;
  text-shadow: none;
}

.fxg-white .fxg-desc {
  color: #3a465e;
}

/* キャッチ（--fxg-gold）・金の上辺ライン・金の縦罫は黒版のまま */

/* ---- CTAボタン: ゴールドメタリック×ネイビー文字 ---- */

.fxg-white .fxg-btn {
  border: 1px solid #b3873a;
  background:
    radial-gradient(ellipse 130% 100% at 50% 0%, rgba(255, 255, 255, 0.40), transparent 55%),
    linear-gradient(180deg, #f6e6b2 0%, #eed491 30%, #e6c374 55%, #d4a94f 85%, #c69a41 100%);
  /* 内側に淡い金の縁取り + 下は締める */
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 235, 0.85),
    inset 0 0 0 1px rgba(255, 250, 225, 0.45),
    inset 0 -3px 5px rgba(150, 110, 40, 0.28),
    0 2px 4px rgba(122, 104, 70, 0.25);
  color: #1d3a5f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.fxg-white .fxg-btn::after {
  border-top-color: #1d3a5f;
  border-right-color: #1d3a5f;
}

.fxg-white .fxg-btn:hover {
  color: #1d3a5f;
  filter: brightness(1.06);
}


/* ================================================================
   ⑤シンプル表（fxp-）
   黒ファミリーのシンプルな汎用表。
   ・炭色グラデのヘッダー×白文字（明朝） / 白セル / 細い区切り線
   ・フォントサイズは①スライダー表と同じ（見出し11px / 値13px）
   ・損益の色分けは <span class="fxp-plus">+29.3万円</span> /
     <span class="fxp-minus">-100.0万円</span> を書く（自動判定はしない）
   ・列が増えて収まらないときはスライダー表と同じスクロール装備
     （「この表はスクロール表です」見出し＋金バー＋矢印＋スワイプ）。
     収まっているときはJSがfxp-staticを付けて全部自動非表示
   WordPress カスタマイザー > 追加CSS に貼り付ける。追加JS.jsも必要。
   ================================================================ */

.fxp-wrap {
  position: relative;
  margin: 2em 0;
  max-width: 100%;
  /* 家族共通の明朝で統一 */
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* ---- 見出し「この表はスクロール表です」+ 金の進捗バー（①③と同じ意匠） ---- */
.fxp-wrap .fxp-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 0 10px;
  color: #2a3340;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fxp-head::before,
.fxp-head::after {
  content: "";
  width: 38px;
  height: 1px;
  background: #9aa2ab;
}

.fxp-wrap .fxp-progress {
  position: relative;
  height: 4px;
  margin: 0 0 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c2c5c9 0%, #f4f5f6 50%, #c2c5c9 100%);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.14),
    inset 0 -1px 1px rgba(0, 0, 0, 0.14);
}

.fxp-progress .fxp-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 12%;
  height: 4px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(255, 252, 235, 0.30) 50%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(90deg, #a37a28 0%, #e8c568 50%, #a37a28 100%);
  transition: left 0.15s linear, width 0.2s ease;
}

/* ---- バーはドラッグ/クリックで操作できる（JSがpointerイベントで scrollLeft を書く） ---- */
.fxp-wrap .fxp-progress {
  cursor: pointer;
  touch-action: none; /* 指ドラッグ時にページ縦スクロールへ取られない */
}

/* 4pxの細い線だと掴みにくいので、上下8pxの見えない当たり判定を足す */
.fxp-wrap .fxp-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}

.fxp-progress .fxp-progress-thumb {
  cursor: grab;
}

/* ドラッグ中は追従の遅延（transition）を切ってダイレクトに動かす */
.fxp-wrap.fxp-bar-dragging .fxp-progress-thumb {
  transition: none;
  cursor: grabbing;
}


/* 収まりきってスクロール不要なとき（JSがfxp-staticを付ける）は装備を出さない */
.fxp-wrap.fxp-static .fxp-head,
.fxp-wrap.fxp-static .fxp-progress,
.fxp-wrap.fxp-static .fxp-arrow {
  display: none;
}

/* ---- スクロール枠（③詳細表と同じ立体感の枠） ---- */

.fxp-scroll {
  overflow-x: auto;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  border: 0.5px solid rgba(0, 0, 0, 0.28); /* 一番外側の線は極細 */
  border-radius: 4px;
  background: #ffffff;
  /* この表は接地影なし（フラットに置く） */
  scrollbar-width: none;
}

.fxp-scroll::-webkit-scrollbar {
  display: none;
}

/* wpautop対策のブロックラッパー */
.fxp-navrow {
  height: 0;
  margin: 0;
  padding: 0;
}

/* ---- 矢印（①③と同じ半透明ダーク角丸タブ×白シェブロン・枠の外側） ---- */

.fxp-arrow {
  position: absolute;
  /* 50%はwrap全体基準。上に見出し(約20px)+余白10px+バー4px+余白12px=約46pxが
     増えるので半分の23pxを足して表本体の中心に合わせる */
  top: calc(50% + 23px);
  z-index: 30;
  width: 27px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(20, 22, 26, 0.5);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.25s ease;
}

.fxp-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  -webkit-mask: var(--fxp-chev) center / 14px 14px no-repeat;
  mask: var(--fxp-chev) center / 14px 14px no-repeat;
}

.fxp-prev {
  left: -36px;
  --fxp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5'/%3E%3C/svg%3E");
}

.fxp-next {
  right: -36px;
  --fxp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5L16 12l-6.5 6.5'/%3E%3C/svg%3E");
}

.fxp-arrow:hover {
  background: rgba(20, 22, 26, 0.8);
}

.fxp-arrow-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .fxp-arrow {
    display: none;
  }
}

/* ---- 表本体 ---- */

.fxp-wrap .fxp-table {
  position: relative; /* ヘッダー行を流れる光の基準 */
  border-collapse: separate; /* テーマのcollapse強制対策 */
  border-spacing: 0;
  width: max-content;
  min-width: 100%; /* 列が少ないときはカード幅いっぱいに広がる */
  margin: 0;
}

/* ---- 一番上の行（ヘッダー帯の中）を光の帯が流れ続ける ----
   オーバーレイは表本体(width:max-content)に対する100%幅なので、
   横スクロールしても全列のヘッダーの上をひと続きに流れる。
   高さ = thのline-height(14px) + 上下padding。thの高さ定義とセットで管理 */
.fxp-wrap .fxp-table::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(14px + 24px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.05) 46%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.05) 54%,
    transparent 60%
  ) no-repeat;
  background-size: 45% 100%;
  background-position: -90% 0;
  animation: fxp-headshine 3s linear infinite;
}

@keyframes fxp-headshine {
  0% {
    background-position: -90% 0;
  }
  100% {
    background-position: 190% 0;
  }
}

.fxp-wrap .fxp-table th,
.fxp-wrap .fxp-table td {
  margin: 0;
  border: 0;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

/* ヘッダー行: 家族共通の炭色グラデ×白文字（③の項目列と同じ色調） */
.fxp-wrap .fxp-table th {
  padding: 12px 18px;
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  border-bottom: 1px solid #1e1e1e;
  color: #ffffff;
  font-size: 9.9px; /* ①の社名帯(11px)の90% */
  font-weight: 900;
  line-height: 14px; /* 光の帯の高さ計算とセット（.fxp-table::after参照） */
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* データ行: 白地×細い区切り線 */
.fxp-wrap .fxp-table td {
  padding: 12px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e1;
  color: #16181c;
  font-size: 11.7px; /* ①の値(13px)の90% */
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 縦の区切り線は「各列が自分の右辺に持つ」方式で統一。
   左線方式だと、固定列に接した列の左線と固定列の右線が重なって2重に見える。
   右辺方式なら、どの列が固定列の位置に来ても線は同じ位置に重なり常に1本 */
.fxp-wrap .fxp-table td {
  border-right: 1px solid #e4e4e1;
}

.fxp-wrap .fxp-table th {
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

/* 最終列の右辺は外枠に任せる */
.fxp-wrap .fxp-table th:last-child,
.fxp-wrap .fxp-table td:last-child {
  border-right: 0;
}

/* 最終行は下線なし（角丸カードに沿わせる） */
.fxp-wrap .fxp-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- 左端の列はスクロールしても固定（③詳細表と同じsticky方式） ---- */
.fxp-wrap .fxp-table th:first-child,
.fxp-wrap .fxp-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}

/* 固定列（td）: 薄い灰色の地で「項目列」だと分かるようにする（③のゼブラと同系色）。
   右線は他の縦線と同じ色・太さ（影なしのフラット） */
.fxp-wrap .fxp-table td:first-child {
  background: #f2f2f0;
  border-right: 1px solid #e4e4e1;
}

/* 損益の色分け（書き手がspanで指定する） */
.fxp-plus {
  color: #1d5fd4;
}

.fxp-minus {
  color: #d43c3c;
}

/* フォントサイズは①と同じ固定値なのでスマホでも変えない（余白だけ詰める） */
@media (max-width: 760px) {
  .fxp-wrap .fxp-table th {
    padding: 10px 12px;
  }

  .fxp-wrap .fxp-table td {
    padding: 9px 12px;
  }

  /* 光の帯の高さもスマホのth余白(上下10px)に合わせる */
  .fxp-wrap .fxp-table::after {
    height: calc(14px + 20px);
  }
}


/* ================================================================
   ⑤シンプル表 ホワイト版（fxp-white）
   ⑤シンプル表に着せる「ホワイト皮膚」。
   配色: クリーム×ネイビー×金（白ファミリー。①③④ホワイト版と同じ言語）。
   使い方: <div class="fxp-wrap fxp-white"> とクラスを1個足すだけ。
   ・JS/挙動は⑤と完全共通（1列送り矢印・金バー・ドラッグ・スワイプ・自動非表示）
   ・⑤のCSSより後に読み込むこと
   ================================================================ */

/* ---- 枠: 温かい茶系の極細線 ---- */

.fxp-white .fxp-scroll {
  border-color: rgba(150, 128, 84, 0.30);
}

/* ---- ヘッダー行: クリーム×ネイビー ---- */

.fxp-wrap.fxp-white .fxp-table th {
  background: #f8f0dd; /* グラデーションなしのフラットなクリーム */
  border-bottom: 1px solid #e4d9bd;
  border-right-color: #ece5d4;
  color: #1d3a5f;
  text-shadow: none;
}

/* ホワイト版は流れる光なし */
.fxp-white .fxp-table::after {
  display: none;
}

/* ---- データセル: 値はネイビー、線は温かい色 ---- */

.fxp-wrap.fxp-white .fxp-table td {
  border-bottom-color: #ece5d4;
  border-right-color: #ece5d4;
  color: #22304a;
}

/* 左の固定列はクリーム（③ホワイト版の項目列と同じ色） */
.fxp-wrap.fxp-white .fxp-table td:first-child {
  background: #f8f0dd;
  border-right-color: #ece5d4;
}

/* 矢印は上書きしない: 全部品共通の灰色デザイン（半透明ダークタブ×白シェブロン） */


/* ================================================================
   FX会社 用途別ベスト5カード ブラック皮膚（fxb-）
   既存の fxc-card（レビューカード）を、記事内で <div class="fxb"> で包むと
   スライダー表ブラック/徹底比較表ブラックと同じ黒×明朝の見た目になる。
   既存記事の fxc-card には影響しない（.fxb の中だけ効く）。
   WordPress カスタマイザー > 追加CSS の fxc-card 定義より後ろに貼ること。
   ================================================================ */

/* 会社ごとの差し色。カード側で <div class="fxb" style="--fxb-accent:#xxxxxx"> と指定して上書き */
.fxb {
  --fxb-accent: #1c78c8;
}

.fxb .fxc-card {
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.24),
    0 5px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* ---- ヘッダー: 炭色グラデ（スライダー表ブラックのダークゾーン） ---- */

.fxb .fxc-head {
  background:
    radial-gradient(ellipse 130% 60% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(180deg, #4a4a4a 0%, #333333 45%, #262626 100%);
  /* 黒ヘッダーの下端に会社カラーの差し色ライン（スライダー表・徹底比較表と同じ言語） */
  border-bottom: 2px solid var(--fxb-accent, #e2574c);
}

.fxb .fxc-main h3 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.fxb .fxc-logo {
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.35);
}

/* 手数料チップは中央揃え。枠線も差し色に連動 */
.fxb .fxc-feebar {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-color: var(--fxb-accent, #1c78c8);
}

.fxb .fxc-feebar span {
  background: #24303e;
  color: #ffffff;
}

.fxb .fxc-feebar strong {
  background: #ffffff;
  color: #b3352b;
}

.fxb .fxc-cta p,
.fxb .fxc-cta strong {
  color: #d6a13c;
}

/* CTAボタン: 深紅のプレミアムグラデ（上辺光・下辺の締め） */
.fxb .fxc-cta-btn {
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 50%),
    linear-gradient(180deg, #d0524a 0%, #b3352b 55%, #8d241c 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 3px solid #6e1a14;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* ---- スペック表: 徹底比較表ブラックと同じ言語 ---- */

.fxb .fxc-th {
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  color: #ffffff;
  border-color: #e4e4e1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  /* 項目名は中央揃え（徹底比較表ブラックと同じ） */
  text-align: center;
  justify-content: center;
}

.fxb .fxc-td {
  background: #ffffff;
  color: #16181c;
  border-color: #e4e4e1;
}

.fxb .fxc-note {
  color: #6b6b66;
}

/* ---- タブ: 非選択は薄灰、選択は炭色グラデ ---- */

/* タブ下のラインも差し色に連動 */
.fxb .fxc-tabs {
  border-bottom-color: var(--fxb-accent, #1c78c8);
}

.fxb .fxc-tabs label {
  background: #efedea;
  color: #55524c;
  font-weight: 700;
}

.fxb .fxc-tabs label:hover {
  background: #e4e1dc;
}

.fxb .fxc-tabwrap > input:nth-of-type(1):checked ~ .fxc-tabs label:nth-of-type(1),
.fxb .fxc-tabwrap > input:nth-of-type(2):checked ~ .fxc-tabs label:nth-of-type(2),
.fxb .fxc-tabwrap > input:nth-of-type(3):checked ~ .fxc-tabs label:nth-of-type(3),
.fxb .fxc-tabwrap > input:nth-of-type(4):checked ~ .fxc-tabs label:nth-of-type(4) {
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  color: #ffffff;
}

/* ---- パネル内 ---- */

.fxb .fxc-panel h4 {
  color: #16181c;
  border-left: 4px solid #d6a13c;
  padding-left: 10px;
}

.fxb .fxc-panel ul li::before {
  background: #d6a13c;
  color: #d6a13c;
}

.fxb .fxc-panel strong {
  color: #b3352b;
}


/* ================================================================
   月次スクロール表 ブラック皮膚（fxm-）
   既存の sk-tbl03（横スクロール表）を <div class="fxm"> で包むと
   黒×明朝ファミリーの見た目になる。既存記事のsk-tbl03には影響しない。
   WordPress カスタマイザー > 追加CSS の sk-tbl03 定義より後ろに貼ること。
   ================================================================ */

.fxm .sk-tbl03-wrap {
  --sk-line: #e4e4e1; /* 極細ラインの色を黒ファミリーに合わせる */
}

.fxm .sk-tbl03-wrap table.sk-tbl03 {
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 13px; /* スライダー表ブラックの値と同じ文字サイズ */
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.24),
    0 5px 10px rgba(0, 0, 0, 0.08);
}

/* 角丸を控えめに（ファミリー統一の4px） */
.fxm .sk-tbl03-wrap table.sk-tbl03 thead th:first-child {
  border-top-left-radius: 3px;
}

.fxm .sk-tbl03-wrap table.sk-tbl03 thead th:last-child {
  border-top-right-radius: 3px;
}

.fxm .sk-tbl03-wrap table.sk-tbl03 tbody tr:last-child td:first-child {
  border-bottom-left-radius: 3px;
}

.fxm .sk-tbl03-wrap table.sk-tbl03 tbody tr:last-child td:last-child {
  border-bottom-right-radius: 3px;
}

/* ヘッダー行: 炭色グラデ×白文字 */
.fxm .sk-tbl03-wrap table.sk-tbl03 thead th,
.fxm .sk-tbl03-wrap table.sk-tbl03 thead th:first-child {
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  color: #ffffff;
  font-size: 11px; /* スライダー表ブラックの社名と同じ */
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* セルの余白も文字サイズに合わせて締める */
.fxm .sk-tbl03-wrap table.sk-tbl03 th,
.fxm .sk-tbl03-wrap table.sk-tbl03 td {
  padding: 9px 12px;
}

/* 行の白/灰ゼブラ（固定の1列目は除く） */
.fxm .sk-tbl03-wrap table.sk-tbl03 tbody tr:nth-child(even) td + td {
  background: #f2f2f0;
}

/* 1列目（会社名・固定列）: 黒グラデ×白文字 + 段差の影 */
.fxm .sk-tbl03-wrap table.sk-tbl03 tbody td:first-child {
  background: linear-gradient(180deg, #4f4f4f 0%, #393939 45%, #303030 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 4px 0 9px rgba(0, 0, 0, 0.38);
}

.fxm .sk-tbl03-wrap table.sk-tbl03 thead th:first-child {
  box-shadow: 4px 0 9px rgba(0, 0, 0, 0.38);
}

/* ================================================================
   スマホのキャッチ欄を3行分確保（2026-07-05）
   キャッチが2行/3行に割れると黒エリアの高さがカードごとにズレて
   段がガタつくため、スマホでは最初から3行分の高さで統一する。
   text-wrap: balance は「トップク/ラス」のような不格好な折り返しを均等化する。
   注意: && と行末コメントは使わない
   ================================================================ */
@media (max-width: 760px) {
  .fxs-hero-catch {
    min-height: 44px;
    text-wrap: balance;
  }
}