/* ad-banner (c-block-fix / c-btn-common 抜粋)
----------------------------------------------------------------- */
/* 【由来・経緯、2026-09-01】
   このファイルは、以前検討されていた別のリニューアル案(参考:
   https://dev.fxsignup.com/html/list.html、こちらでは <html
   class="is-renewal"> として実装されていた)向けに作られた
   https://fxsignup.com/assets/css/style.css (284KB、フォント・
   アニメーション・記事一覧・ガイド記事等サイト全体の各種スタイルを含む)
   から、実際に現在のページで使われている部分だけを機械的に抽出した
   ものである。

   別案そのものは不採用となり、当該別案のfront-end自体は
   現在更新が止まっている(ユーザー確認済み)。ただし、そのassets/一式の
   うち「固定告知バナー(.c-block-fix、FXGTキャンペーン等)」と、その
   ボタン(.c-btn-common、ヘッダー・当バナー等で使用中の共通ボタン
   コンポーネント)の2点だけは、現行ページでも実際に使われ続けている
   ため、今回abandonedなassets/への直接参照をやめる対応(サイト全体
   リニューアル方針の条件1)の一環として、必要な部分のみをこの
   ファイルに切り出しstatic/配下へ移した。

   元ファイル(284,002バイト)のうち、実際に使用中のクラス
   (.c-block-fix系・.c-btn-common--header/--orange/--middle・
   .u-font--bold/.u-fontsize--smallest/.u-lineheight--line)を含む
   ルールのみを抽出し、6,131バイトまで縮小している(該当クラスを
   含まない残りのルール―記事一覧・ガイド記事・画像モーダル等、別案
   専用のマークアップに対応するもの―は現行ページには存在しないため
   除外した)。

   なお、assets/js/common.js(同じ別案の巻き添えで読み込んでいた
   JSファイル)は、.c-block-fixの開閉ロジックが実際にはmodule/
   cms-cookies.js側で完結しており(data-cookie-header-banner属性
   ベース)、common.js側の処理(deSVG呼び出し・UAParser呼び出し・
   別案専用のSwiperカルーセル初期化等)は現行ページのどの要素にも
   対応しないことを確認したため、読み込み自体を廃止した(これにより、
   従来コンソールに出ていた「deSVG is not defined」「UAParser is not
   defined」等のエラーも解消される)。

   今後、このコンポーネント自体(.c-block-fix/.c-btn-common)を
   このサイトの正式なデザインシステム(c-btn等)に置き換える場合は、
   このファイルごと廃止してよい。

   【2026-09-01追記、不具合修正】.c-block-fix__close(閉じるボタンの
   ✕アイコン、:before/:afterの2本の斜め線で構成)が、SP実機で
   バナー全体を覆う巨大な✕として表示される不具合が発生した
   (ユーザー指摘、Gyazoで確認)。原因は、元のassets/css/style.cssでは
   `.reset *{position:relative}`という、HTML側で.c-block-fixに
   併せて付与している.resetクラス配下の全要素に効く汎用ルールに
   よって.c-block-fix__closeにもposition:relativeが与えられていた
   ため、:before/:afterのposition:absolute(top:50%;left:50%;
   width:100%)が.c-block-fix__close自身(24px四方)を基準に配置されて
   いたが、この抽出時に「.c-block-fix__closeという文字列を含む
   ルールだけ」を機械的に拾ったため、.c-block-fix__close自身の
   セレクタを含まないこの汎用ルールが抽出漏れした。position:relative
   な祖先が無いままだと、:before/:afterは次に近い位置指定祖先である
   .c-block-fix自体(position:fixed、幅100%)を基準に配置され、
   width:100%がページ全幅として解釈されて巨大な✕になっていた。
   汎用的な`.reset *`をそのまま再現するとこのファイルが影響する
   範囲が不必要に広がるため(.resetクラスはこのページでは
   .c-block-fix自身にしか使われていないと確認済みだが)、
   .c-block-fix__close自身にposition:relativeを直接指定する形で
   ピンポイントに解決した。 */

.c-block-fix,.c-block-fix--border{position:fixed;z-index:10001;top:0;left:0;display:none;overflow:hidden;width:100%;height:55px;padding:0 10px;-webkit-transition:0.3s;transition:0.3s;background:#fff;-ms-grid-columns:-webkit-max-content 16px 1fr;-ms-grid-columns:max-content 16px 1fr;grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;gap:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
@media (max-width:767px){.c-block-fix,.c-block-fix--border{display:-ms-grid;display:grid}}
.c-block-fix.is-ad-close,.is-ad-close.c-block-fix--border{height:0}
.c-block-fix__btn{margin-left:auto}
.c-block-fix__btn a{color:#fff!important}
.c-block-fix__close{position:relative;width:24px;height:24px;cursor:pointer}
@media (max-width:375px){.c-block-fix__close{width:18px;height:18px}}
.c-block-fix__close:after,.c-block-fix__close:before{position:absolute;top:50%;left:50%;width:100%;height:0.2rem;content:"";-webkit-transition:0.3s;transition:0.3s;background:#333}
.c-block-fix__close:before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}
.c-block-fix__close:after{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}
.c-block-fix__body{display:-ms-grid;display:grid;width:100%;-ms-grid-columns:-webkit-max-content 16px auto 16px -webkit-max-content;-ms-grid-columns:max-content 16px auto 16px max-content;grid-template-columns:-webkit-max-content auto -webkit-max-content;grid-template-columns:max-content auto max-content;gap:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
@media (max-width:425px){.c-block-fix__body{gap:10px}}
@media (max-width:375px){.c-block-fix__body{gap:6.25px}}
.c-block-fix__logo-box{display:-webkit-box;display:-ms-flexbox;display:flex;width:40px;margin:0}
@media (max-width:375px){.c-block-fix__logo-box{width:30px}}
.c-block-fix__logo{width:100%;height:auto}
.c-block-fix__text,.c-block-fix__text--bold{font-size:12px;line-height:1.6}
.c-block-fix__text--bold{font-weight:bold}
.c-btn-common,.c-btn-common--arrow,.c-btn-common--arrow-early-small,.c-btn-common--arrow-note-none,.c-btn-common--default,.c-btn-common--full,.c-btn-common--gray-dark,.c-btn-common--green,.c-btn-common--green-gradient,.c-btn-common--green-lightest,.c-btn-common--header,.c-btn-common--height-large,.c-btn-common--height-middle,.c-btn-common--height-small,.c-btn-common--middle,.c-btn-common--mobile-height-small,.c-btn-common--mobile-max-width,.c-btn-common--mobile-radius-small,.c-btn-common--orange,.c-btn-common--orange-gradient,.c-btn-common--radius-middle,.c-btn-common--shadow,.c-btn-common--small,.c-btn-common--wide{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:61px;padding:0 16px;cursor:pointer;-webkit-transition:0.3s;transition:0.3s;border-radius:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:16px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
@media (max-width:767px){.c-btn-common,.c-btn-common--arrow,.c-btn-common--arrow-early-small,.c-btn-common--arrow-note-none,.c-btn-common--default,.c-btn-common--full,.c-btn-common--gray-dark,.c-btn-common--green,.c-btn-common--green-gradient,.c-btn-common--green-lightest,.c-btn-common--header,.c-btn-common--height-large,.c-btn-common--height-middle,.c-btn-common--height-small,.c-btn-common--middle,.c-btn-common--mobile-height-small,.c-btn-common--mobile-max-width,.c-btn-common--mobile-radius-small,.c-btn-common--orange,.c-btn-common--orange-gradient,.c-btn-common--radius-middle,.c-btn-common--shadow,.c-btn-common--small,.c-btn-common--wide{height:50px;padding:0 10px;border-radius:4px;gap:10px}}
.c-btn-common--orange{border:1px solid #ff9800;background:#ff9800}
.c-btn-common--orange .c-btn-common__icon path,.c-btn-common--orange .c-btn-common__icon--arrow path,.c-btn-common--orange .c-btn-common__icon--mail path,.c-btn-common--orange .c-btn-common__icon--mail-large path,.c-btn-common--orange .c-btn-common__icon--more path{fill:#fff}
@media (min-width:1024px){.c-btn-common--orange:hover{background:#fff}.c-btn-common--orange:hover .c-btn-common__text,.c-btn-common--orange:hover .c-btn-common__text--bold,.c-btn-common--orange:hover .c-btn-common__text--default,.c-btn-common--orange:hover .c-btn-common__text--early-small,.c-btn-common--orange:hover .c-btn-common__text--large,.c-btn-common--orange:hover .c-btn-common__text--medium,.c-btn-common--orange:hover .c-btn-common__text--note-medium,.c-btn-common--orange:hover .c-btn-common__text--smallest{color:#ff9800}.c-btn-common--orange:hover .c-btn-common__icon path,.c-btn-common--orange:hover .c-btn-common__icon--arrow path,.c-btn-common--orange:hover .c-btn-common__icon--mail path,.c-btn-common--orange:hover .c-btn-common__icon--mail-large path,.c-btn-common--orange:hover .c-btn-common__icon--more path{fill:#ff9800}}
.c-btn-common--header{width:267px;height:34px}
@media (max-width:960px){.c-btn-common--header{width:200px}}
@media (max-width:767px){.c-btn-common--header{width:74px}}
.c-btn-common--header .c-btn-common__text,.c-btn-common--header .c-btn-common__text--bold,.c-btn-common--header .c-btn-common__text--default,.c-btn-common--header .c-btn-common__text--early-small,.c-btn-common--header .c-btn-common__text--large,.c-btn-common--header .c-btn-common__text--medium,.c-btn-common--header .c-btn-common__text--note-medium,.c-btn-common--header .c-btn-common__text--smallest{font-size:14px;font-weight:bold}
@media (max-width:767px){.c-btn-common--header .c-btn-common__text,.c-btn-common--header .c-btn-common__text--bold,.c-btn-common--header .c-btn-common__text--default,.c-btn-common--header .c-btn-common__text--early-small,.c-btn-common--header .c-btn-common__text--large,.c-btn-common--header .c-btn-common__text--medium,.c-btn-common--header .c-btn-common__text--note-medium,.c-btn-common--header .c-btn-common__text--smallest{font-size:12px}}
.c-btn-common--middle{width:400px}
@media (max-width:767px){.c-btn-common--middle{width:100%}}
.u-font--bold{font-weight:bold}
.u-fontsize--smallest{font-size:12px}
.u-lineheight--line{line-height:1.6}