/*
 * renewal-top.css
 * fxsignup.com トップページ向けの追加スタイルをまとめたファイル。
 * 既存の common/css/index.css および assets/css/style.css は直接編集せず、
 * 追加・上書き分はすべてこのファイルにまとめている。
 * (旧: rank-list-extend.css / pickup-news.css / section-spacing.css を統合、
 *  旧ファイル名 top-page-extend.css からrenewal-top.cssへ改名)
 * サイト全体に関係する追記が必要になった場合は renewal-style.css を別途作成する。
 */

/* ============================================================
   ランキングページ(/rank-comp/rank/)からの統合コンテンツ
   ============================================================
   .rankingService01 等のクラスは set.css 経由で読み込まれる structure.css に
   既に定義があり(トップページでも常時有効)、/rank-comp/rank/ 側で追加読み込み
   されている rank_comp.css / generationA.css とほぼ同一の内容だったため、
   新たなスタイルシートは読み込まずそのまま流用している(generationA.css /
   rank_comp.cssの追加読み込みは、過去に4位・5位のレイアウト崩れを起こした
   経緯があるため踏襲しない)。
   差分として、rank_comp.css側にだけあった余白を補完しつつ、下にある
   ランキングカード(.indexRankingInner{width:1100px;margin:20px auto 0})と
   横幅・中央寄せを揃え、親の.indexRanking(background-color:#EEF1E4)の
   背景色が透けないよう白背景を明示している。
*/
.rankingService01 {
  width: 1100px;
  margin: 0 auto 30px;
  background-color: #fff;
  padding: 20px;
}

@media screen and (max-width: 1024px) {
  .rankingService01 {
    width: auto;
    /* ランキングカード側は.indexRankingInner{padding:10px}経由で左右10px分の
       余白付きで表示されている。このボックスはbox自体をmarginで10px分
       内側に寄せることで、ボックスの外枠(白背景+枠線)ごと左右にスペースを
       作り、同じ見た目に揃えている。内側のpaddingは天面をやや広めに確保。 */
    margin: 0 10px 30px;
    padding: 20px 15px 15px;
  }
}

@media screen and (max-width: 767px) {
  .rankingService01 {
    /* スマホ表示のみ、直下の1位ボックスとの余白を詰める。
       左右の余白(外側の margin)も、他要素より少し狭める。 */
    margin: 0 5px 15px;
    padding: 15px 10px 10px;
  }
}

/* 見出し: ハイライト(markerHalfYellow)は撤去。
   アイコンは元々background-image(icon_rank01.png)+background-position指定
   で表示していたが、テキストの行の高さに対してcenter指定でも数px低く見える
   ズレが解消できなかった。imgタグ+vertical-align:middleに変更したのちも、
   CJKフォントの行の高さの取り方の影響でわずかにズレが残っていたため、
   テキストのベースラインに依存しないflexboxでの中央揃えに変更している
   (他の6項目のアイコンはtable-cell+vertical-align:middleで中央揃えして
   おり、これも同様にベースラインに依存しない幾何学的な中央揃え方式)。 */
.renewalRankingServiceTitle {
  display: flex;
  align-items: center;
  font-size: 1.15em;
}

.renewalRankingServiceTitle img {
  margin-right: 6px;
  flex-shrink: 0;
  position: relative;
  top: -2px;
}

@media screen and (max-width: 767px) {
  .renewalRankingServiceTitle {
    font-size: 1em;
  }
}

/* 各項目(スプレッド/ボーナス等)のアイコン・項目名・説明文を、スマホでは
   アイコン+項目名を左に寄せてコンパクトにし、説明文が改行しないよう
   全体を小さめに調整して1行に収めている。 */
@media screen and (max-width: 767px) {
  .rankingServiceIcon01 {
    padding: 0;
    background-color: transparent;
  }

  .rankingServiceIcon01 img {
    width: 32px;
    height: 32px;
  }

  .rankingServiceIcon01 .w40px {
    width: 32px;
  }

  .rankingServiceIcon01 h3 {
    font-size: 1em;
    padding-left: 8px;
    white-space: nowrap;
  }

  .rankingServiceFlex02Main > div:last-child {
    font-size: 0.7em;
  }
}

/* 評価基準6項目 → クリックで詳細をアコーディオン展開する仕様に変更。
   開閉のJS自体は共通スクリプト(common/js/common.js)内の
   $(".toggleCommon02Btn")ハンドラを流用し、新規JSは追加していない。
   各項目<li>をtoggleCommon02Wrapとして、見出し行(toggleCommon02Btn)と
   詳細(toggleCommon02Contents)をその直接の子として持たせている。

   従来.rankingServiceFlex02の直接の子はアイコンブロック(1つ目)と
   説明文(2つ目)の2つのdivのみで、structure.css側の
   「.rankingServiceFlex02>div:first-child{width:150px}
   .rankingServiceFlex02>div:last-child{width:calc(100% - 160.1px)}」で
   幅分割していた。今回、アイコン+説明文をキャレットアイコンと区別するため
   .rankingServiceFlex02Mainで1段ラップしたことで直接の子要素の構成が
   変わり、上記ルールが効かなくなったため、同じ幅分割を新しい階層に
   合わせて明示的に再現している。 */
.rankingServiceItem01 {
  border-radius: 4px;
  background-color: #eff4dd;
}

.rankingServiceFlex02 {
  cursor: pointer;
  padding: 8px;
}

/* ボックス自体に背景色がついたことで、片方のボックスの開閉で
   同じ行のもう片方まで高さが揃って伸びてしまうと、色つきの余白が
   目立ってしまうため、行内でストレッチさせず個別の高さを保つ。 */
.rankingServiceFlex01 {
  align-items: flex-start;
}

/* PCのみ、2列積みから「6項目を横一列のボタンとして並べ、クリックした
   ボタンの直下にアコーディオンで詳細を表示する」レイアウトに変更。
   .rankingServiceFlex01は既にflexCommon01(display:flex)なので、
   6等分の幅+gapで1行に並べ、各ボタン内はアイコン+項目名を縦積み・
   中央寄せにする。閉じた状態でだけ表示していた短い説明文
   (.rankingServiceFlex02Main > div:last-child)は、ボタンが縦積み・
   コンパクトになったことで表示スペースが無いため非表示にし、クリックで
   開くアコーディオン本文(.rankingServiceAccordion01Inner、既存の
   長文解説)だけで内容を伝える形にしている。
   structure.css側の.rankingServiceFlex02 / .rankingServiceFlex02Main
   にはflexCommon01/flexMiddle/flexBetween等の共通ユーティリティ
   クラス(!important付き)が指定されており、通常の詳細度では上書き
   できないため、方向・中央寄せの指定には!importantを付けている。 */
@media screen and (min-width: 768px) {
  .rankingServiceFlex01 {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .rankingServiceFlex01 > li {
    width: calc((100% - 40px) / 6);
  }

  /* structure.css側は元々2列積み(3個目以降が2行目)を前提に
     nth-child(n+3)へmargin-topを付与しており、1行6列化した今は
     3個目以降だけ縦にズレて見えてしまうため打ち消す。 */
  .rankingServiceFlex01 > li:nth-child(n + 3) {
    margin-top: 0;
  }

  .rankingServiceFlex02 {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    padding: 15px 6px;
  }

  .rankingServiceFlex02Main {
    flex-direction: column !important;
    align-items: center !important;
    flex: none;
    width: 100%;
  }

  .rankingServiceFlex02Main > .rankingServiceIcon01 {
    width: auto;
  }

  .rankingServiceIcon01 .dispTable {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .rankingServiceIcon01 h3 {
    padding-left: 0;
    margin-top: 12px;
    font-size: 0.95em;
  }

  /* SPで表示していた簡単な説明文は、ボタンが縦積み・コンパクトになった
     後も項目名の下に小さい文字で残す。
     このセレクタは同じファイル内にある無条件(全画面幅共通)の
     「.rankingServiceFlex02Main > div:last-child{width:calc(100% -
     160.1px);margin-left:10px}」より前方(ファイルの上の方)にあり、
     詳細度が同じ場合は記述順で後勝ちになるため、無条件ルール側が
     このPC用ルールを上書きしてしまう(150px幅の親に対しcalc結果が
     負になり0pxへクランプされていた)。widthとmargin-leftのみ
     !importantで確実にこちらを優先させる。 */
  .rankingServiceFlex02Main > div:last-child {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 4px;
    font-size: 0.78em;
    line-height: 1.3em;
    color: #666;
    text-align: center;
  }

  .rankingServiceCaret {
    margin-left: 0;
    margin-top: 6px;
  }

  /* 開いている項目がどれかを分かりやすくするため、ボタン内の▼は
     開いている間だけ非表示にし、代わりに共有スロット(詳細ボックス)の
     上端に、開いたボタンを指す▲を表示する(疑似要素、位置はJSで
     ボタンの中心に合わせて動的に指定)。「▲がボタンと詳細ボックスの
     間に移動する」ように見せている。 */
  .rankingServiceFlex01 .toggleCommon02Btn.active .rankingServiceCaret {
    visibility: hidden;
  }

  /* 下の詳細ボックス(.rankingServiceDetailSlot、border-color:#dde5c8)と
     同じ色のボーダーで全ボタンを囲う。開いて背景が白になった際にも
     ボタンの輪郭が分かるようにするための保険。
     下辺のみ、site側の既存ルール(border-bottom:1px dotted #ddd、
     旧デザインの区切り線と思われる)がこのshorthandより後勝ちし、
     点線のまま残ってしまうため、border-bottomだけ!importantで
     確実に上書きする。 */
  .rankingServiceItem01 {
    border: 1px solid #dde5c8;
  }

  .rankingServiceItem01 {
    border-bottom-style: solid !important;
    border-bottom-color: #dde5c8 !important;
  }

  /* 開いている項目がどれかをさらに分かりやすくするため、詳細を開いた
     ボタンのボックス自体の背景を白にする(他の閉じたボタンは通常の
     薄緑色#eff4ddのまま)。アイコン自体(.rankingServiceIcon01)にも
     structure.css側で薄緑の背景色が別途付いているため、あわせて
     白にする。 */
  .rankingServiceItem01:has(.toggleCommon02Btn.active) {
    background-color: #fff;
  }

  .rankingServiceItem01:has(.toggleCommon02Btn.active) .rankingServiceIcon01 {
    background-color: #fff;
  }

  /* 各ボタン自身の狭い(1/6幅)アコーディオンは常に非表示にし、
     クリックした項目の詳細は.rankingServiceFlex01の直後に置いた
     共有スロット(.rankingServiceDetailSlot、renewal-top.js側で生成)に
     複製して、6ボタン分=行全体の幅100%で表示する。
     開閉自体(activeクラスの付与・元のアコーディオンのslideToggle)は
     common/js/common.jsのtoggleCommon02Btnハンドラの挙動をそのまま
     使っており、複製・全幅化・排他制御(他を開いたら閉じる)の部分だけ
     renewal-top.js側で追加している。 */
  .rankingServiceAccordion01 {
    display: none !important;
  }

  .rankingServiceDetailSlot {
    position: relative;
    display: none;
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #dde5c8;
    border-radius: 4px;
  }

  /* ボタンとの繋がりを示す▲(2枚重ねで枠線色+白の縁取り風にしている)。
     水平位置(--arrow-left)は開いたボタンの中心にrenewal-top.js側から
     動的に合わせる。 */
  .rankingServiceDetailSlot::before,
  .rankingServiceDetailSlot::after {
    content: "";
    position: absolute;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
  }

  .rankingServiceDetailSlot::before {
    top: -9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #dde5c8;
  }

  .rankingServiceDetailSlot::after {
    top: -7px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
  }

  .rankingServiceDetailSlot .rankingServiceAccordion01Inner {
    padding: 20px;
    font-size: 0.9em;
  }
}

/* SPのみ1列(縦積み)のリストに変更。structure.css側の行間margin-topは
   2列を前提に3個目以降(nth-child(n+3))にしか付かないため、1列時は
   2個目以降すべてに同じ余白が付くよう明示している。ボックス間の間隔は
   PCよりも詰めている。 */
@media screen and (max-width: 767px) {
  .rankingServiceFlex01 > li {
    width: 100%;
  }

  .rankingServiceFlex01 > li:nth-child(n + 2) {
    margin-top: 8px;
  }
}

.rankingServiceFlex02Main {
  flex: 1;
  min-width: 0;
}

/* SPも1列化してボックス自体の横幅に余裕ができたため、アイコンと説明文を
   縦積みにせず、PCと同じ横並び(アイコン固定幅+説明文が残り幅)にしている。 */
.rankingServiceFlex02Main > .rankingServiceIcon01 {
  width: 150px;
  flex-shrink: 0;
}

.rankingServiceFlex02Main > div:last-child {
  width: calc(100% - 160.1px);
  margin-left: 10px;
}

/* SPは、アイコン+項目名を内容幅ぶんだけに縮め(固定150pxをやめる)、
   説明文により多くの幅を回すことで、1行に収まりやすくしている。
   ボックス自体の余白(padding)も少し狭める。 */
@media screen and (max-width: 767px) {
  .rankingServiceFlex02 {
    padding: 6px 8px;
  }

  .rankingServiceFlex02Main {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .rankingServiceFlex02Main > .rankingServiceIcon01 {
    width: auto;
    flex-shrink: 0;
  }

  .rankingServiceIcon01 .dispTable {
    display: flex;
    align-items: center;
  }

  .rankingServiceFlex02Main > div:last-child {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.rankingServiceCaret {
  flex-shrink: 0;
  margin-left: 10px;
  transition: transform 0.2s;
}

.toggleCommon02Btn.active .rankingServiceCaret {
  transform: rotate(180deg);
}

.rankingServiceAccordion01 {
  display: none;
  border-top: 1px solid #dde5c8;
}

.rankingServiceAccordion01Inner {
  padding: 20px;
  font-size: 0.9em;
}

@media screen and (max-width: 767px) {
  .rankingServiceAccordion01Inner {
    padding: 12px;
    font-size: 0.8em;
  }
}

.rankingServiceAccordion01Inner > p:not(:first-child) {
  margin-top: 1em;
}

/* 4位以降の仮バナー広告枠。カード自体の左右端いっぱいまで広がって
   おり、上にある2カラム(サムネイル画像+本文テキスト)の左右の
   インデント(16px)と揃っていなかったため、同じ余白を持たせる。 */
@media screen and (min-width: 768px) {
  .rankingListBannerWrap {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* 海外FX業者総合評価ランキング比較表(#table / .wrapRankingTable)。
   ランキングページ側では自ページ独自の1130px幅コンテンツカラムに
   収まっていたが、トップページには同じ幅の器がないため、
   上の.rankingService01や直下のランキングカード(.indexRankingInner)と
   横幅・中央寄せを揃える。
   また、ランキングページ側では各セルの背景が透過のままページ自体の
   白背景で成立していたが、トップページでは親の.indexRanking
   (background-color:#EEF1E4)が透けてしまうため、白背景を明示している。
   フォントサイズは、このセクションだけ本家よりも一段小さく調整。 */
.wrapRankingTable {
  width: 1100px;
  margin: 0 auto 30px;
  background-color: #fff;
  font-size: 0.9em;
}

@media screen and (max-width: 1024px) {
  .wrapRankingTable {
    width: auto;
    margin: 0 10px 30px;
  }
}

@media screen and (max-width: 767px) {
  /* SPでは元々ランキングページ側でもボックス自体の白背景はなく、白いのは
     数値の入るセル(.table01 td、structure.css側で既にbackground-color:#fff
     指定済み)のみだったため、ボックス全体の白背景はPCのみに限定する。 */
  .wrapRankingTable {
    background-color: transparent;
  }

}

/* #tableHead(順位/ブローカー名/総合評価の見出し行)。
   ランキングページ側では別ファイル(rank_comp.css等、意図的に読み込んでいない)で
   position:stickyが指定され、そのページ自身の固定ヘッダー分の余白として
   top:110pxが機能していたが、トップページではこのtop:110pxだけが
   position:relativeとして残ってしまい、見出し行がその場から110px分
   下にずれてランキング1位の行に重なって表示される崩れが発生していた。
   トップページ側ではスティッキー追従自体不要なため、position/topを
   明示的に打ち消している。 */
.wrapRankingTable #tableHead {
  position: static;
  top: auto;
}

.updateTime {
  display: block;
  width: 1100px;
  margin: 0 auto 10px;
  font-size: 1em;
  color: #383838;
  text-align: right;
}

@media screen and (max-width: 1024px) {
  .updateTime {
    width: auto;
    margin: 0 10px 10px;
  }
}

@media screen and (max-width: 767px) {
  .updateTime {
    font-size: 0.9em;
  }
}

/* PCのみ、更新日をタイトルバー(.titleCommon01)内の右側に白文字で配置。
   .titleCommon01はstructure.css側で既にposition:relativeのため、
   その基準でタイトルバー内右寄せに絶対配置している。 */
.updateTimeInline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-right: 15px;
  color: #fff;
  font-size: 0.7em;
}

/* 4位以降のアコーディオン開閉。
   開閉のJS自体は共通スクリプト(common/js/common.js)内の
   $(".toggleCommon02Btn")ハンドラがトップページでも既に読み込み済みのため
   流用し、新規JSは追加していない。CSS側は「SP(767px以下)では初期状態で
   非表示」の1ルールのみ用意すればよい(PC/SPどちらもdivのデフォルトが
   display:blockのため、PC側に明示ルールは不要)。 */
@media screen and (max-width: 767px) {
  .rankingTable01DispNoneSP {
    display: none;
  }
}

/* 行の区切り線。PC/SPで実装方法が異なる本番の仕様に合わせている。
   structure.cssの.rankingTable01Detail01.typeBodyには元々
   border-bottom:1px dotted #94b31aが指定されているが、本番ではこの色を
   白(実質非表示)に打ち消した上で、SPでは.detailIconSP自身のborder-bottom、
   PCでは直接の子要素にのみ効く.rankingTable01>ul:nth-child(n+3)の
   border-topで、それぞれ区切り線を「表(.detailIconSP)の下」に一本だけ
   表示している。structure.cssにはこの打ち消しルールも4位以降向けの
   補完ルールも無い(意図的に読み込んでいないrank_comp.css側にあると
   見られる)ため、以下でまとめて再現している。 */
.rankingTable01Detail01.typeBody {
  border-bottom-color: transparent;
}

@media screen and (max-width: 767px) {
  .detailIconSP {
    padding-bottom: 10px;
    border-bottom: 1px dotted #94b31a;
  }
}

@media screen and (min-width: 768px) {
  .toggleCommon02Contents > ul.rankingTable01Detail01 {
    border-top: 1px dotted #94b31a;
  }
}

.rankingTable01Btn {
  padding: 8px 5px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #383838;
  text-align: center;
  cursor: pointer;
}

.toggleCommon02Btn .on {
  display: none;
}

.toggleCommon02Btn.active .off {
  display: none;
}

.toggleCommon02Btn.active .on {
  display: inline;
}

/* 開閉ボタンの▼/▲アイコン。当初Font Awesome(.fa-caret-down/up)を使っていたが、
   webフォントの読み込みに失敗する環境があったため、外部フォントに依存しない
   CSSの三角形(border trick)に差し替えている。 */
.caretIcon {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.caretIcon.caretDown {
  border-top: 5px solid #383838;
}

.caretIcon.caretUp {
  border-bottom: 5px solid #383838;
}

/* ============================================================
   ランキング(1〜15位)関連
   ============================================================ */

/* ---- 4位以降を「表示上の左右ペア単位」だけで高さ揃えするための土台 ----
   既存の common/js/index.js が $(".indexRankingBox01").heightLine() を
   ページ内の全要素に対して一括実行してしまうため、6位以降を増やすと
   4位〜15位が全部まとめて揃ってしまう。
   そのため対象divのクラス名を indexRankingBox01 → rankPairBox に変更し、
   ページ側の高さ揃えは rank-list-extend.js（別ファイル）で
   「左右ペアごと」に行う。以下はそのモバイル時の解除ルール
   (元のindex.cssにある .indexRankingBox01 用ルールと同内容)。
*/
@media screen and (max-width: 767px) {
  .rankPairBox {
    height: auto !important;
  }
}

/* ---- 1位以降すべてのランク番号バッジ(背景画像+テキスト合成版) ----
   icon_rank04.png (白地+右に流れる緑のライン) のデザインをそのまま
   活かすため、画像から文字部分だけを除去した背景パーツ
   (rank-badge-bg.png)を作成し、その上に「Rank/数字/位」を
   HTMLテキストとして重ねる方式に統一。1位〜15位まで同じ部品を使う
   (1〜3位の王冠付き緑塗りデザイン、7〜15位の王冠付き別デザインは
   いずれも廃止し、この1種類に統一)。
   rank-badge-bg.pngの作成方法: icon_rank04.pngを連結成分解析し、
   画像全体を貫く最大の成分(=ライン)だけを残し、それ以外
   (文字のグリフ)を透明化。ライン成分を壁とみなしたフラッドフィルで
   ライン左上側(囲まれた内側)だけを白に、外側は透明にしている。
   色は同じくicon_rank04.pngから採取した#94B31A。
*/
.rankBadgeText {
  display: flex;
  align-items: center;
  position: relative;
  width: 196px;
  height: 52px;
  box-sizing: border-box;
  padding-left: 20px;
  padding-top: 7px; /* テキスト全体を少し下げる */
  background-image: url("../images/ranking/rank-badge-bg.png?20260812004");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 196px 52px;
}

.rankBadgeText__label,
.rankBadgeText__num,
.rankBadgeText__unit {
  position: relative;
  z-index: 1; /* 1〜3位の三角形装飾より前面に出す */
}

.rankBadgeText__label {
  font-size: 17px;
  font-weight: bold;
  color: #94B31A;
  margin-right: 8px;
  white-space: nowrap;
}

/* ---- 1〜3位だけの追加装飾 ----
   背景を白ではなく緑塗りつぶし版(rank-badge-bg-green.png、
   線と同じ#94B31Aで囲まれた内側を塗りつぶしたもの)に差し替え、
   左上を直角とする三角形をゴールド/シルバー/ブロンズで重ね、
   文字(Rank/数字/位)はすべて白にする。
*/
.rankBadgeText--gold,
.rankBadgeText--silver,
.rankBadgeText--bronze {
  background-image: url("../images/ranking/rank-badge-bg-green.png?20260812004");
}

.rankBadgeText--gold .rankBadgeText__label,
.rankBadgeText--gold .rankBadgeText__num,
.rankBadgeText--gold .rankBadgeText__unit,
.rankBadgeText--silver .rankBadgeText__label,
.rankBadgeText--silver .rankBadgeText__num,
.rankBadgeText--silver .rankBadgeText__unit,
.rankBadgeText--bronze .rankBadgeText__label,
.rankBadgeText--bronze .rankBadgeText__num,
.rankBadgeText--bronze .rankBadgeText__unit {
  color: #FFF;
}

.rankBadgeText--gold::before,
.rankBadgeText--silver::before,
.rankBadgeText--bronze::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}

.rankBadgeText--gold::before {
  background: linear-gradient(135deg, #FFE9A8 0%, #D4A017 100%);
}

.rankBadgeText--silver::before {
  background: linear-gradient(135deg, #F4F4F4 0%, #A9ADB2 100%);
}

.rankBadgeText--bronze::before {
  background: linear-gradient(135deg, #E3A66D 0%, #A9642E 100%);
}

.rankBadgeText__num {
  font-size: 33px;
  font-weight: bold;
  color: #94B31A;
  line-height: 1;
}

.rankBadgeText__unit {
  font-size: 22px;
  font-weight: bold;
  color: #94B31A;
  margin-left: 3px;
  white-space: nowrap;
  position: relative;
  top: 3px; /* 「位」は全体よりさらに下げる */
}

@media screen and (max-width: 767px) {
  .rankBadgeText {
    width: 130px;
    height: 35px;
    padding-left: 13px;
    padding-top: 5px;
    background-size: 130px 35px;
  }
  .rankBadgeText__label {
    font-size: 11px;
    margin-right: 4px;
  }
  .rankBadgeText__num {
    font-size: 22px;
  }
  .rankBadgeText__unit {
    font-size: 14px;
    top: 2px;
  }
  .rankBadgeText--gold::before,
  .rankBadgeText--silver::before,
  .rankBadgeText--bronze::before {
    width: 41px;
  }
}

/* ---- ブローカー名見出し(h3→h2)のスタイル復元 ----
   index.cssには .rankingListTitle a>div h3 というタグ限定セレクタで
   ブローカー名のフォントサイズ・太さが指定されていた。見出し階層修正で
   h3をh2に格上げしたところ、このセレクタが効かなくなり装飾が
   崩れていた。同内容をh2セレクタでも指定して復元する。
*/
.rankingListTitle a>div h2 {
  font-size: 1.46em;
  font-weight: bold;
}

@media screen and (min-width: 768px) and (max-width: 959px) {
  .rankingListTitle a>div h2 {
    line-height: 1.4em;
  }
}

@media screen and (max-width: 767px) {
  .rankingListTitle a>div h2 {
    font-size: 1.06em;
  }
}

/* ---- ランキング特徴の箇条書き(strong)を太字ではなく中間の太さに ----
   h4→strongへの変更時は太字のまま維持していたが、通常の太字ほど
   強調したくないとのことなので、中間のウェイトに調整する。
*/
.rankingListComment .ul05 strong {
  font-weight: 500;
}

/* ============================================================
   海外FXの最新情報(ブローカーニュース)カルーセル
   ============================================================ */

/* ---- 記事タイトルを行数固定+三点リーダーでトリミング ----
   PCは2行、スマホは3行を超えた分を省略する。
*/
.campaignTxt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {
  .campaignTxt {
    -webkit-line-clamp: 3;
  }
}

/* ============================================================
   セクション余白・見出し構成・アコーディオン関連
   ============================================================ */

/* ---- FAQをフッター直前に移動した際の余白調整 ----
   .indexGeneralFaq には元々上側の余白が無く(下に来る前提のスタイル)、
   直前の .indexMessasge にも下側の余白が無いため、そのまま隣接させると
   要素同士がくっついて見えてしまう。.indexMessasge の上側パディング
   (30px)に合わせて、直後にFAQが来る場合だけ上余白を追加する。
*/
.indexMessasge + .indexGeneralFaq {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  /* モバイルは.indexMessasgeの下パディングが10pxに縮小されるため、
     追加する上余白もそれに合わせて縮小 */
  .indexMessasge + .indexGeneralFaq {
    margin-top: 15px;
  }
}

/* ---- 「海外FXブローカーの選定基準」ボックスの余白調整 ----
   元のindex.cssには、PC表示時(min-width:768px)に .indexSupport>ul>li へ
   padding-bottom:35pxを与え、position:absoluteで「詳しく>」ボタンを
   その余白部分に配置する仕組みがあった。「詳しく>」ボタン自体を
   削除したため、この35pxの余白だけが空いたまま残ってしまう。
   ボタンが無くなった分の余白を打ち消す。
*/
@media screen and (min-width: 768px) {
  .indexSupport > ul > li {
    padding-bottom: 0;
  }
}

/* ---- indexMessasgeの上下余白を調整(PCのみ) ----
   元のindex.cssではPC表示時にpadding-top:30px/padding-bottom:0pxと
   なっており、このセクションの本文は直前の.indexSupport(選定基準)に
   属する説明文であるにもかかわらず、直前セクションとの余白の方が
   直後セクション(indexAccountFlow、外側でmargin-top:20pxを持つ)との
   余白より大きくなっていた。0/30pxまで入れ替えると今度は上が詰まり
   すぎ・下が広がりすぎたため、直前セクションとの余白は少し残しつつ、
   直後セクションとの余白の方が広くなる程度に留める。
*/
@media screen and (min-width: 768px) {
  .indexMessasge {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* ---- 「もっとみる」アコーディオンをスマホでも廃止(indexMessasge) ----
   .indexMessasge内の「もっとみる/閉じる」トグルは、元々スマホ表示
   (max-width:767px)でのみ有効だった(PCは常に全文表示)。
   スマホでも常に全文表示にするため、ボタンを常時非表示にし、
   本文(.tapTxtMessage)を常時表示にする。
*/
.indexMessasgeBtn {
  display: none !important;
}

.tapTxtMessage {
  display: block !important;
}

/* ---- 「海外FX取引の特徴とメリットを徹底解説」内の「もっとみる」アコーディオンも廃止 ----
   .indexMessasgeと同じ仕組み(.indexCommonAccordion01Btn/Contents)で、
   スマホ表示でのみ「もっとみる」ボタンによる開閉が有効だった
   (レバレッジ・ゼロカット・商品数・ボーナス・口座開設・取引ツールの
   計6箇所)。スマホでも常に全文表示にする。
*/
.indexCommonAccordion01Btn {
  display: none !important;
}

.indexCommonAccordion01Contents {
  display: block !important;
}

/* ---- H1の可視化 ----
   元のindex.cssには h1{ height:0; overflow:hidden; text-indent:100%; ... }
   というルールがあり、H1タグを常に非表示にする実装だった(隠しH1で
   SEO用テキストだけ流し込む、旧来のパターン)。
   ランキングセクションの見出し(旧h2)をh1に格上げしたので、
   このページに限りh1を通常どおり可視化する。
   このルールは.indexBrokerTitleInner内のh1だけに限定しており、
   index.cssのh1{}ルール自体は変更しない。
*/
.indexBrokerTitleInner h1 {
  width: auto;
  height: auto;
  overflow: visible;
  text-indent: 0;
  white-space: normal;
}

/* ---- フッターナビ見出し(h3廃止)のスタイル復元 ----
   共有CSS(assets/css/style.css)には .fnaviInner>div h3 という
   タグ限定セレクタでフッターカテゴリ見出しの色・太さが指定されていた。
   フッターの見出しタグ使用は「単独リンク1本だけの見出し」「全ページ
   共通でこのページ固有のSEO価値が薄い」という理由で廃止し、
   同じ見た目のクラスに置き換える。
*/
.fnaviCategoryTitle {
  color: #003120;
  font-weight: bold;
}

/* ---- 「選定基準」3〜5番目のブロックを、スマホ表示で1〜2番目と同じ見た目に統一 ----
   1〜2番目(indexSupportBox03)はスマホで「画像→タイトル→本文」の
   縦積み表示。3〜5番目(indexSupportCatch01 + dispTablePU)は元の
   index.cssの仕様で、緑のキャッチバナーが付き、画像とタイトルが
   dispTablePUのtable-cellでスマホでも横並びになる作りだった。
   スマホ表示だけ1〜2番目と揃うよう上書きする(PC表示は変更しない)。
*/
@media screen and (max-width: 767px) {
  .indexSupport .indexSupportCatch01 {
    display: none;
  }

  .indexSupport .dispTablePU {
    display: block;
  }

  .indexSupport .dispTablePU > .indexSupportPhoto01,
  .indexSupport .dispTablePU > .indexSupportBox01 {
    display: block;
  }

  .indexSupport .indexSupportPhoto01 {
    width: auto;
    padding: 0;
    margin-bottom: 10px;
  }

  .indexSupport .indexSupportBox01 {
    padding: 0 !important;
    text-align: center;
    font-size: 1.1em;
  }
  /* index.cssのスマホ用ルールでは.indexSupportBox01がfont-size:1.0em
     だったが、1〜2番目のタイトル(.fs11、font-size:1.1em !important)
     と揃っていなかったため、同じ1.1emに統一する。 */

  /* タイトル→本文の余白は.dispTablePUの既存margin-bottom:10px(mb10pu)
     だけに任せる。上のpadding-bottomを0にしないと、mb10puと二重に
     余白が入り、1〜2番目より広くなってしまう。 */

  .indexSupport .indexSupportBox02 {
    font-size: 1em;
  }
  /* index.cssの.indexSupportBox02は元々font-size:0.96emだったが、
     1〜2番目の本文(indexSupportBox03内の素のpタグ)には
     フォントサイズ指定が無いため、文字サイズが揃っていなかった。
     指定を外して周囲と同じ基準サイズに統一する。 */
}

/* ============================================================
   ヒーロースライダー(CWV対応: PC=jquery.cycle-plugin / SP=Swiper という
   二重ライブラリ構成を、Swiper1本・共通マークアップへ統合)
   ============================================================
   トランジション効果のみ両者共通(slide)にし、構図・キャプション文言・
   画像・ナビの出し分けはブレークポイントごとに忠実に再現する方針。

   - 画像はpictureタグでPC用(visualNNN.jpg、2000×403の横長)/
     SP用(visualNNNs.jpg、1200×630)を切り替え(アートディレクション目的)。
     コンテナ高さは元のCSS実測値のとおり、1025px未満は52.5vw(元の
     .swiperContainerと同じ)、1025px以上は403px(元の#sliderと同じ)。
     object-fit:coverであれば、コンテナ高さと画像アスペクト比の関係上、
     元のbackground-position/background-sizeによるトリミングと同じ
     見た目になる。
   - 旧960〜1024px専用の背景画像切替+矢印非表示という古い実装は、
     対象幅が64pxと狭く、object-fit:coverでも「画像を敷き詰めてトリミング」
     という結果自体は変わらないため、あえて再現せず他の幅と統一する
     (合意済み)。
   - キャプションは、PC/SPで文言が異なる箇所がある(例: 8枚目はPCが
     「新規口座開設の方、〜」、SPが「お得な1万円キャッシュバック実施中！」)
     ため、1つの<p>の中にPC用/SP用(768〜1024px用の長い文言/767px以下用の
     短い文言)の3種類のspanを入れ、CSSで排他的に出し分ける。
   - ドットナビ・矢印: 1025px以上(PC)は元の#SlideNaviと同じく画像に重ねるオーバーレイ、
     1025px未満(SP)は元の.swiperNaviと同じく画像の外側下に専用の帯を設けて表示する
     (実機のfxsignup.comをPlaywrightで計測し、位置を実測値に合わせて再現)。
     ナビ要素は画像のクリップ領域(overflow:hiddenの.heroSwiper)の外に出す必要があるため、
     .heroSwiperOuterでラップし、.heroSwiperPagination/.heroSwiperPrev/.heroSwiperNextは
     .heroSwiperOuterの直下(.heroSwiperの兄弟要素)に配置している。
*/

.heroSwiperOuter {
  position: relative;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .heroSwiperOuter {
    /* 画像の下にドット・矢印用の帯を確保する(実測値: 画像下端から約38px)。
       「キャンペーンの詳細はこちら」リンク(試験導入)は、この帯とは別に
       通常のブロックとして.heroSwiperの直後(この帯の上)に積み上がるため、
       ここは元の38pxのままでよい。 */
    padding-bottom: 38px;
  }
}

.heroSwiper {
  position: relative;
  width: 100%;
  /* 元のSP版は .swiperWrap:before{padding-top:52.5%} という「要素自身の幅」基準の
     高さ指定だった。52.5vw(ビューポート幅基準)で代用すると、コンテナ実幅と
     ビューポート幅の差(スクロールバー等)の分だけ高さがずれるため、
     aspect-ratioで要素自身の幅から算出する(1200:630 = SP画像そのものの比率、
     52.5%と同値)。 */
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}

@media screen and (min-width: 1025px) {
  .heroSwiper {
    aspect-ratio: auto;
    height: 403px;
  }
}

@media screen and (max-width: 1024px) {
  /* 「今すぐ口座開設」「詳細を見る」ボタン行(.heroSlideDetailLinkWrap)が
     スライドごとの通常フロー要素(画像の下に積み上がる)になったため、
     SPはコンテナ自体の高さをaspect-ratioで固定せず、中身(画像+ボタン行)
     に応じて可変にする(renewal-top.js側のSwiper autoHeightオプションと連動)。 */
  .heroSwiper {
    aspect-ratio: auto;
  }
}

.heroSlideLink {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.heroSlideImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- キャプション: PC用/SP用(長文・短文)の3種類を排他表示 ---- */
.heroSlideCaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 0;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.50);
  text-align: center;
  letter-spacing: 2px;
  z-index: 2;
}

/* 試験的に、半透明の黒背景のキャプション帯を非表示にする。
   HTML自体は残しているため、元に戻す場合はこのルールを削除するだけでよい。 */
.heroSlideCaption {
  display: none;
}

.heroCaptionPc,
.heroCaptionSpLong,
.heroCaptionSpShort {
  display: none;
}

@media screen and (max-width: 767px) {
  .heroCaptionSpShort {
    display: inline;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .heroSlideCaption {
    height: 45px;
    line-height: 45px;
    font-size: 1.4em;
  }
  .heroCaptionSpLong {
    display: inline;
  }
}

@media screen and (min-width: 1025px) {
  .heroSlideCaption {
    height: 60px;
    line-height: 62px;
    font-size: 2.1em;
  }
  .heroCaptionPc {
    display: inline;
  }
}

/* ---- ヒーロー下部ボタン行 ----
   「今すぐ口座開設」(オレンジ)と「詳細を見る」(グレー)の2ボタンを
   横並びで配置する。各swiper-slide内に直接マークアップ(スライドごとに
   固有のURL)しているため、スライドの横スライドと連動して一緒に動く
   (JS側の同期処理は不要)。
   SP(1024px以下): 画像のすぐ下に余白なく、画面幅100%の帯として通常フロー
   で配置(ボックスの高さぶん実際のスライド自体の高さが伸びるため、
   renewal-top.js側でSwiperのautoHeightオプションを有効にしている)。
   角丸なしの四角いボタンで、左60%オレンジ/右40%グレー。
   PC(1025px以上): 画像にオーバーレイして画像下部中央に配置(旧「今すぐ
   口座開設」ボタンと同じ重ね方)。オレンジは画像に重ねていた頃と同じ
   サイズ(340px/padding20px/font22px)。グレーは同じ角丸デザインで、
   文字量に応じた自動幅(オレンジより明確に小さい)。 ---- */
.heroSlideAccountBtn,
.heroSlideDetailLink {
  display: block;
  box-sizing: border-box;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  /* サイト共通CSS(structure.css)側にリンクの文字色を指定するルールがあり、
     単純な1クラスのセレクタだけでは詳細度で負けて指定した色にならない
     (実機検証で発覚)。!importantで確実に勝たせる。 */
  color: #fff !important;
}

.heroSlideAccountBtn {
  /* ヘッダーのSP「今すぐ参加」ボタン(.c-btn-common--orange)と同色に統一 */
  background-color: #ff9800;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
}

/* structure.css側のサイト共通ルール
   (a:hover{text-decoration:underline}、min-width:1025pxでは
   .mouseHover:hover,a:hover{opacity:0.7}も追加される)を、
   このボタンだけ打ち消す。下線は出さず、透過もさせず、
   代わりに背景色を単色のまま少し明るいオレンジに変えるだけにする。 */
.heroSlideAccountBtn:hover {
  text-decoration: none;
  opacity: 1;
  color: #fff !important;
  background-color: #ffab33;
}

.heroSlideDetailLink {
  background-color: #6f6f6f;
}

.heroSlideDetailLink:hover {
  text-decoration: none;
  opacity: 1;
  color: #fff !important;
  background-color: #7f7f7f;
}

@media screen and (max-width: 1024px) {
  .heroSlideDetailLinkWrap {
    display: flex;
  }

  .heroSlideAccountBtn,
  .heroSlideDetailLink {
    /* 変更前のデザインを踏襲し、角丸にはしない */
    border-radius: 0;
    padding: 14px 8px;
    font-size: 14px;
    letter-spacing: 1px;
  }

  .heroSlideAccountBtn {
    width: 60%;
  }

  .heroSlideDetailLink {
    width: 40%;
  }
}

@media screen and (min-width: 1025px) {
  .heroSlideDetailLinkWrap {
    /* 画像下部中央にオーバーレイ(旧「今すぐ口座開設」ボタンと同じ重ね方) */
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 16px;
  }

  .heroSlideAccountBtn,
  .heroSlideDetailLink {
    border-radius: 8px;
    /* ボタンの縁取り(指定色:白、1px) */
    border: 1px solid #fff;
  }

  .heroSlideAccountBtn {
    width: 340px;
    padding: 20px;
    font-size: 22px;
    letter-spacing: 1.35px;
  }

  .heroSlideDetailLink {
    /* オレンジボタンより明確に小さくするため、幅は固定せず文字量に応じた
       自動幅にする */
    width: auto;
    padding: 20px 32px;
    font-size: 18px;
    letter-spacing: 1px;
  }
}

/* ---- ドットナビ: 1025px以上はPC版アイコン(画像にオーバーレイ)、
   1025px未満はSP版の四角ドット(画像の下の帯の中、.heroSwiperOuterの
   padding-bottom領域に配置)。位置はfxsignup.com実機の計測値に基づく。
   swiper.css側に .swiper-container-horizontal>.swiper-pagination-bullets{bottom:10px}
   という2クラスセレクタ(詳細度0-2-0)の既定ルールがあり、単純な .heroSwiperPagination
   だけでは詳細度で負けて上書きできない(実機検証で発覚)。bottomは!importantで確実に勝たせる。

   .heroSwiperPagination自体はleft:0;right:0で画像の全幅に広がっており、見た目上は
   ドット部分にしか描画されていなくても、ボックス自体は透明な帯として全幅にわたって
   クリックを奪ってしまう。PCで画像に重ねている「今すぐ口座開設」「このキャンペーンの
   詳細はこちら」ボタンとこの帯が縦に重なる範囲では、DOM順やz-indexの都合で
   ページネーション側が上に来てクリックできない不具合が発生していた(実機検証で発覚)。
   ラップ自体はpointer-events:noneにして透明化し、実際にクリックさせたいドット本体だけ
   pointer-events:autoで復活させることで、見た目を変えずにこの問題を解消する。 */
.heroSwiperPagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px !important;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.heroSwiperPagination .swiper-pagination-bullet {
  width: 18px !important;
  height: 6px !important;
  margin: 0 3px;
  border-radius: 0 !important;
  opacity: 1 !important;
  background-color: #FFF !important;
  border: 1px solid #748B14 !important;
  pointer-events: auto;
}

.heroSwiperPagination .swiper-pagination-bullet-active {
  background-color: #E6F5B4 !important;
}

@media screen and (min-width: 1025px) {
  /* 「今すぐ口座開設」ボタン導入(試験導入)に伴い、位置を下げている
     (元は74px)。また、中央下はボタン+「キャンペーンの詳細はこちら」
     リンクの縦積みに譲り、ページネーションは右側に寄せている
     (背景画像とボタン/リンクにページネーションが重ならないようにするため)。
     swiper.css側の既定ルールがこの要素にwidth:100%(具体的なpx値として
     解決される)を指定しており、box-sizing:content-box(既定)のままだと
     padding-rightがその100%の外側に加算されてページ全体に横スクロールが
     発生してしまう(実機検証で発覚)。box-sizing:border-boxでpadding込みの
     幅になるよう明示している。 */
  .heroSwiperPagination {
    bottom: 13px !important;
    justify-content: flex-end;
    padding-right: 36px;
    box-sizing: border-box;
  }
  .heroSwiperPagination .swiper-pagination-bullet {
    width: 22px !important;
    height: 11px !important;
    margin: 0 5px;
    border: none !important;
    /* ルート相対パスではなく絶対URLで指定している理由:
       このCSSファイル自体をfile://の絶対パスでプレビューしている間は、
       <base href>はHTML側の相対参照にしか効かず、CSS内のurl("/...")は
       このCSSファイル自身の場所(file://...)を基準に解決されてしまい、
       本番ドメインの画像を指せない。絶対URLならプレビュー・本番どちらでも
       正しく解決される。 */
    background: url("https://fxsignup.com/common/images/common/slider_navi_off.png") center top no-repeat !important;
    background-size: 22px 11px !important;
  }
  .heroSwiperPagination .swiper-pagination-bullet-active {
    background-image: url("https://fxsignup.com/common/images/common/slider_navi_on.png") !important;
  }
}

/* ---- 矢印ナビ: 1025px未満のみ表示。元のSP版と同じく画像の下の帯(.heroSwiperOuterの
   padding-bottom領域)に配置する。画像に重ねるのではなく、bottomをfixed pxで指定して
   .heroSwiperOuterのpadding-bottom:38pxの中に収める(実機の計測値に基づく)。 ---- */
.heroSwiperPrev,
.heroSwiperNext {
  display: none;
}

@media screen and (max-width: 1024px) {
  .heroSwiperPrev,
  .heroSwiperNext {
    display: block;
    position: absolute;
    bottom: 16px;
    width: 18px;
    height: 12px;
    z-index: 10;
    cursor: pointer;
    background-size: 18px 12px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .heroSwiperPrev {
    left: 10px;
    background-image: url("https://fxsignup.com/common/images/common/btn_swiper_prev02.png");
  }
  .heroSwiperNext {
    right: 10px;
    background-image: url("https://fxsignup.com/common/images/common/btn_swiper_next02.png");
  }
}

/* 「口座開設〜取引開始までの流れ」ボックスのPC2カラム。
   dispTablePO(display:table)の子要素はデフォルトでvertical-align:middle
   相当の挙動になり、左右で高さが異なると短い方のカラムが中央寄せに
   見えてしまうため、PCのみ上寄せに固定している。 */
@media screen and (min-width: 768px) {
  .indexAccountFlow .dispTablePO > .w50po {
    vertical-align: top;
  }

  /* ボックス上側の余白が少なかったため拡大。下側は左右の余白(10px)
     よりさらに少し詰める。 */
  .indexAccountFlow .indexFeaturesWrap {
    padding-top: 30px;
    padding-bottom: 5px;
  }

  /* 緑背景見出し(supportProcessBoxChapter01)の上下余白が、基本ルールの
     padding:0.2em 1emのままだとSP版(padding:0.5em 1em)より窮屈なため、
     PCもSPと同じ上下余白に揃える。 */
  .indexAccountFlow .supportProcessBoxChapter01 {
    padding: 0.5em 1em;
  }

  /* 「海外FXで使える主な身分証明書」「海外FXで使える主な現住所証明書」の
     テーブル(.boxTable02)は、.mainArticleBox04の上下padding(各30px)に
     加えて自身のmargin-top/bottomも乗るため、見出し直下の余白が
     左カラム(口座開設の手順、supportProcessFlowのli:first-childに
     margin-top:-10pxがかかり実質20px)より広くなってしまう。
     左カラムと揃うよう、上下とも実質20pxになるよう相殺する。 */
  .indexAccountFlow .boxTable02 {
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

/* ============================================================
   口座開設の手順(STEP1〜4のフロー)
   ============================================================
   https://fxsignup.com/useful/support/process.html の該当箇所で使われている
   .supportProcessFlow系クラスは、/useful/配下専用の useful.css にのみ
   定義されており、トップページでは読み込んでいない。
   useful.cssには.layoutMain/.layoutSide等、トップページの同名クラスと
   衝突しかねない汎用レイアウトクラスも大量に含まれているため、
   ファイルごと読み込むのは避け、このフロー部分に必要なルールだけを
   書き写している。 */
.supportProcessFlow {
  list-style: none;
  position: relative;
}

.supportProcessFlow li {
  list-style: none;
  position: relative;
  margin-top: -10px;
}

.supportProcessBox {
  border: 2px solid #94b31a;
  min-height: 154px;
  padding-left: 150px;
  box-sizing: border-box;
  border-radius: 15px;
  position: relative;
  background-color: #fff;
}

.supportProcessBoxTable {
  border-radius: 15px;
  overflow: hidden;
}

.supportProcessBoxTable > div:last-child {
  background-color: #ffeaad;
  border-left: 2px solid #94b31a;
  min-height: 150px !important;
  height: 150px;
  width: 40px;
}

.supportProcessBoxTable > div:last-child p {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 0;
  padding-left: 7px;
}

.supportProcessBoxMark01 {
  position: absolute;
  bottom: -33px;
  left: 25px;
  z-index: 5;
}

.supportProcessBoxChapter01 {
  background-color: #94b31a;
  border-radius: 100px;
  padding: 0.2em 1em;
  line-height: 1.4em;
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}

.supportProcessBoxTxt01 {
  padding: 0 0.5em 2em;
  letter-spacing: 0;
  line-height: 1.4em;
  font-size: 0.9em;
}

.supportProcessBoxBorder01 {
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -28px;
}

.supportProcessBoxBorder02 {
  position: absolute;
  top: -7px;
  left: 40px;
}

.supportProcessFlowArrow01 {
  text-align: center;
  position: relative;
  margin-top: -15px;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .supportProcessBoxTable {
    border-radius: 0;
  }

  .supportProcessBoxTable,
  .supportProcessBoxTable > div {
    min-height: auto !important;
    height: auto;
  }

  .supportProcessBox {
    padding-left: 0;
    padding: 20px 10px 30px;
  }

  .supportProcessBoxMark01 {
    position: relative;
    text-align: center;
    bottom: auto;
    left: auto;
  }

  .supportProcessBoxChapter01 {
    border-radius: 15px;
    padding: 0.5em 1em;
    line-height: 1.5em;
  }

  .supportProcessBoxTxt01 {
    padding: 0;
    line-height: 1.6em;
  }

  .supportProcessBoxBorder02 {
    display: none;
  }

  .supportProcessBoxTable > div:last-child {
    background-color: #ffeaad;
    border: 2px solid #94b31a;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
    min-height: auto !important;
    height: auto;
    width: auto;
  }

  .supportProcessBoxTable > div:last-child p {
    writing-mode: horizontal-tb;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0;
    padding-left: 0;
  }

  /* トップページに組み込むにあたり、他セクションとの文字サイズのバランスを
     とるため、このセクション内の文字サイズをSPのみ少し小さくする。 */
  .indexAccountFlow {
    font-size: 0.85em;
  }

  /* セクションタイトル(indexCommontTitle05)は文字数に応じて自動縮小される
     仕様のため、他の文字数が短いタイトルと比べて小さくなりすぎる。
     SPのみ読みやすいサイズに固定する。 */
  .indexAccountFlow .indexCommontTitle05 h2 {
    font-size: 15px !important;
  }

  /* STEPボックス: SPのみアイコンを左、見出し+説明(+所要時間)を右の
     2カラムにする。supportProcessBoxBorder01は絶対配置のため
     flexレイアウトの影響を受けない。 */
  .supportProcessBox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .supportProcessBoxMark01 {
    flex-shrink: 0;
    width: 70px;
  }

  .supportProcessBoxMark01 img {
    width: 100%;
    height: auto;
  }

  .supportProcessBoxTable {
    flex: 1;
    min-width: 0;
  }

  /* 見出し(supportProcessBoxChapter01)の親div(wAuto pt15)にpadding-top:15px
     がかかっており、左のアイコンより見出しが下がって見えるため、
     このセクションのみ打ち消してアイコンと同じ高さに揃える。 */
  .supportProcessBoxTable .wAuto.pt15 {
    padding-top: 0 !important;
  }

  /* 証明書テーブル(boxTable02): SPのみ横スクロールをやめ、
     項目名(グレー)→画像(白)→説明(白)の縦積みカードに変更する。
     画像と説明の間はボーダー無しにし、カード全体の外枠と
     項目名下のボーダーのみ残す。 */
  .indexAccountFlow .boxTable02 {
    overflow-x: visible;
  }

  .indexAccountFlow .table02.cell03 {
    display: block;
    width: 100% !important;
    border: none;
  }

  .indexAccountFlow .table02.cell03 tbody {
    display: block;
  }

  .indexAccountFlow .table02.cell03 tr {
    display: block;
    border: 1px solid #b1b1b1;
    margin-bottom: 15px;
  }

  .indexAccountFlow .table02.cell03 tr:last-child {
    margin-bottom: 0;
  }

  .indexAccountFlow .table02.cell03 th,
  .indexAccountFlow .table02.cell03 td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    border: none;
  }

  .indexAccountFlow .table02.cell03 th {
    background-color: #f5f5f5;
    border-bottom: 1px solid #b1b1b1;
    text-align: center !important;
    font-size: 14px;
  }

  .indexAccountFlow .table02.cell03 td {
    background-color: #fff;
  }

  /* 説明文(ul01 li)はテーブル用にwhite-space:nowrapが効いており、
     カード化した際に折り返せずはみ出してしまうため解除する。 */
  .indexAccountFlow .table02.cell03 td .ul01 li {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* よくある質問のQ部分、SPでAと文字サイズを揃える。
     .faqPickupBoxQ内のリンクにfont-sizeが!important付きで
     設定されているため、こちらも!importantで上書きする。 */
  .indexGeneralFaq .faqPickupBoxQ,
  .indexGeneralFaq .faqPickupBoxQ a {
    font-size: 13.76px !important;
  }

  /* SPでは2カラムが縦積みになり、「口座開設の手順」列の直後に
     「主な身分証明書」見出しが余白なく続いてしまうため、右カラムの
     上に余白を作る。 */
  .indexAccountFlow .dispTablePO.w100 > .w50po + .w50po {
    margin-top: 25px;
  }
}

/* ============================================================
   海外FXの主な入出金方法(paymentMethodList)
   ============================================================
   PCでは4項目を横並び、SPでは縦積みにする。アイコンは
   payment-bank/credit/crypto-online.svg(いずれも開設手順の
   supportProcessBoxと同じ薄緑 #94B31A に着色済み)で、元画像ごとに
   縦横比が異なるため、img自体には固定のwidth/heightを指定せず、
   CSSのmax-width/max-heightで統一サイズ内に収めている。
   さらに、.paymentMethodIconをアイコンの実際の高さによらず常に
   一定の高さ(56px)を持つflexボックスにし、アイコンをその中で
   上下センタリングすることで、その下に続く見出し
   (.paymentMethodTitle)の開始位置が4項目とも同じ高さで揃うように
   している。 */
.paymentMethodList {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 15px;
}

.paymentMethodList > li {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  background-color: #f7faee;
  border: 2px solid #94b31a;
  border-radius: 15px;
  padding: 20px 15px;
}

.paymentMethodIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin: 0 0 10px;
}

.paymentMethodIcon img {
  max-width: 56px;
  max-height: 56px;
  width: auto;
  height: auto;
}

.paymentMethodTitle {
  margin: 0 0 8px;
  font-size: 1em;
  font-weight: normal;
}

.paymentMethodTxt {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.4em;
  text-align: left;
}

/* 「口座開設の流れ」ボックス全体(手順・必要書類・入出金方法)に対する
   補足文。上の4ボックスとの余白を広げる。 */
.paymentMethodNote {
  margin-top: 25px;
}

/* PCではindexMessasgeセクションの本文(当社は、海外FXブローカー各社と
   公式なパートナー契約を…)と文字サイズを揃えている。SPはそのままだと
   大きすぎるため、他の本文と同程度のサイズに縮小する。 */
@media screen and (min-width: 768px) {
  .paymentMethodNote {
    font-size: 13.76px;
  }
}

@media screen and (max-width: 767px) {
  .paymentMethodNote {
    font-size: 12px;
    line-height: 1.6em;
  }
}

/* 「海外FX 業者レビュー」への誘導ボタン。btnWeb03は本来テーブルの
   セル幅いっぱいに広がるdisplay:blockのボタンなので、幅を制限した
   ラッパーで囲みmargin:0 autoでセンタリングしている。上の補足文との
   間隔も広めに取る。 */
.reviewLinkBtnWrap {
  max-width: 320px;
  margin: 20px auto 0;
}

/* 見出しの文字サイズ。下の説明文との余白も詰める。
   (このルールが後にあるため、上のベースルールより優先される) */
@media screen and (min-width: 768px) {
  .paymentMethodTitle {
    font-size: 14px;
    margin-bottom: 4px;
  }

  /* クレジットカードのアイコンは横長で他の3つより小さく見えるため、
     少しだけ大きく表示する。 */
  .paymentMethodIcon img[src*="payment-credit"] {
    max-width: 64px;
    max-height: 64px;
  }
}

@media screen and (max-width: 767px) {
  .paymentMethodList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .paymentMethodList > li {
    padding: 12px 10px;
  }

  .paymentMethodIcon {
    height: 52px;
  }

  .paymentMethodIcon img {
    max-width: 52px;
    max-height: 52px;
  }

  /* <br>で2行になる見出しの行間を詰める */
  .paymentMethodTitle {
    line-height: 1.3;
  }
}

/* ============================================================
   indexCharm(ヒーロー下4つの特徴リンク)アイコン差し替え
   ============================================================
   PC(min-width:1025px)のみ、アイコンの背後に三角形を
   のぞかせるバッジ風の装飾を追加する(ユーザー提供の参考画像に基づく。
   2026-08-19に薄い緑への変更を試したが、やはり参考画像どおりのオレンジ系に
   戻し、薄め(#ffc773)に調整した)。
   新しいアイコンSVG自体には三角形を含んでいない(線画のみ・背景透明)ため、
   ここでCSSで再現する。
   構造: .indexCharmIconBadge(全体の当たり領域、position:relative)
         └ .indexCharmIconTriangle(三角形、左上にはみ出す形で背面に配置)
         └ .indexCharmIconCard(アイコン本体を内包する枠。白背景なしの素通し)
   三角形はcard(アイコン)より先にDOMへ書かれているため、通常のペイント順で
   自動的にcardの下に来る(z-index指定は不要)。白背景カードは廃止し、
   アイコンを一回り大きくして三角形に直接重ねる形にした(ユーザー指示により
   2026-08-19に変更。アイコン線画の内側は透過のため、三角形と重なる部分は
   三角形の色が透けて見える仕様)。
   768〜1024px(タブレット)は元のindex.css側の絶対配置ルール
   (.indexCharmInner a .dispNonePU img{position:absolute})が効いたままの
   ほうが安全なため、三角形装飾はPC(1025px以上)のみに限定している。 */
@media screen and (min-width: 1025px) {
  .indexCharmIconBadge {
    position: relative;
    width: 62px;
    height: 62px;
    /* 特徴セクション全体の上下余白を詰めるため、アイコンと右側テキストの
       間の余白を、共通ユーティリティクラス(.pr10to、min-width:960pxで
       padding-right:10px!important)より少し狭める。ユーティリティクラス
       自体は他所でも使われている汎用クラスのため直接編集せず、
       このバッジ要素だけ上書きする。 */
    padding-right: 6px !important;
  }

  .indexCharmIconTriangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    /* 薄めのオレンジ(元の参考画像の色 #FF9C00 を白と混ぜて薄くしたもの) */
    background-color: #ffb64a;
    /* 左上を直角にした三角形(右上から左下に斜辺) */
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .indexCharmIconCard {
    position: absolute;
    /* 三角形とアイコンの間の余白を詰め、バッジ全体を小さくして
       セクションの上下の余白を抑える */
    top: 5px;
    left: 5px;
    display: block;
  }

  .indexCharmIconCard img {
    display: block;
    width: 52px;
    height: 52px;
  }

  /* .indexCharm自体のpadding(index.css側でpadding:20px 0の指定、
     全画面幅共通)を上書きしてセクション全体の上下余白を詰める。
     上下均等に20pxずつだったが、体感で下側がより広く感じられるとの
     指摘のため、下側をより狭くして非対称にしている。 */
  .indexCharm {
    padding: 10px 0 4px;
  }
}

/* スマホ(max-width:767px)のindexCharm(ヒーロー下4つの特徴リンク)は、
   index.css側の既定でカードの枠線・背景、および見出し帯(.indexCharmChapter)
   の背景がオレンジ(#FF9C00)になっている。サイトの配色にあわせ、
   ここだけ黄緑(#94B31A。サイト内で広く使われているブランドカラー)に
   上書きする。 */
@media screen and (max-width: 767px) {
  .indexCharmInner a {
    border-color: #94B31A;
    background-color: #94B31A;
  }

  .indexCharmChapter {
    background-color: #94B31A;
  }
}