/* ============================================================
   Taian Bridge — RESPONSIVE SWITCH
   旧来は wp_is_mobile() でテンプレート自体を出し分けていた。
   レスポンシブ化に伴い、PC 用とモバイル用のマークアップを両方出力し、
   表示の切り替えをこのファイルのブレイクポイントで行う。

   ブレイクポイント(サイト全体で統一):
     - 1024px 以上 … PC レイアウト(.rwd-pc / .site-header / .site-footer)
     - 1023.98px 以下 … モバイルレイアウト(.rwd-mo / .m-header / .m-footer)
     -  640px 以下 … 小さい画面向けの追い込み(各 CSS 側で定義)

   読み込み順は最後。他の CSS より後に当てる前提で書いている。
   ============================================================ */

/* ───────── 1. マークアップの出し分け ───────── */

@media (min-width:1024px){
  .rwd-mo{display:none!important}
  .m-header,.m-footer,.m-menu,.m-menu-overlay{display:none!important}
  /* モバイル専用のフローティング UI */
  .m-float-cta,.m-bottom-bar{display:none!important}
}

@media (max-width:1023.98px){
  .rwd-pc{display:none!important}
  .site-header,.site-footer{display:none!important}
  /* PC の固定ヘッダー(113px)ぶん空けていた余白を取り消す。
     モバイルヘッダーは sticky 48px なので、この余白が残ると先頭が大きく空く。 */
  .hero-section,.legal-hero,.page-enter,.main-content,main[class]{margin-top:0}
  .hero-section.is-hidden ~ .event-bar{margin-top:0}
}

/* ───────── 2. PC マークアップしか持たないページの流動化 ─────────
   ハブ・レポート・比較など、モバイル用テンプレートを持たないページは
   1023.98px 以下でも PC マークアップのまま表示される。
   個別 CSS(hub.css 等)のメディアクエリで大半は追い込み済みだが、
   1920px キャンバス前提で残っている固定幅をここで受け止める。 */

@media (max-width:1023.98px){
  /* かつてここに [class*="-wrap"] 等へ max-width:100%!important を当てていたが、
     hub.css の max-width:calc(100% - 32px) のような正しい指定まで潰してしまい、
     モバイルで左右の余白が消えた。個別 CSS 側が対応済みなので撤去した。 */
  /* 横に並べた固定幅カードは縦積みに倒す */
  .cards-wrapper{flex-direction:column;align-items:center;gap:20px}
  .status-card,.review-card{width:100%;max-width:476px;height:auto}
  /* 1920px 基準の絶対配置をフローに戻す */
  .co-criteria-text,.co-team-photo{position:static;width:auto;left:auto;top:auto;bottom:auto}
  .co-execs,.co-history{height:auto}
}

/* 表はスクロールで逃がす(セル幅を潰して読めなくするより良い) */
@media (max-width:1023.98px){
  .ek-table-wrap,.rp-table-wrap,.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ───────── 3. 共通の安全網 ───────── */

/* 画像・動画・iframe が親をはみ出さない */
img,video,iframe{max-width:100%}

/* 長い URL や日本語以外の連続文字での横あふれを防ぐ */
@media (max-width:1023.98px){
  body{overflow-x:hidden}
  p,li,dd,td,th,figcaption{overflow-wrap:anywhere}
}

/* ───────── 4. mu-plugin 由来のパーツ ─────────
   関連リンクナビ(mu-plugins/taian-related-nav.php)は旧テーマと共用のため
   プラグイン側は触らない。body.is-mobile で書かれている指定を
   ここでブレイクポイントとして再現する。
   .inner-wrap は padding:0 468px 0 478px(1920px 前提)のままなので、
   これを打ち消さないと画面外に 946px はみ出す。 */

/* このプラグインの CSS はページ後方の <style> に出るため、同じ詳細度では
   あちらが勝つ。最終レイヤーとして !important で上書きする。 */
@media (max-width:1023.98px){
  .footer-related .inner-wrap{width:100%!important;max-width:100%!important;padding:0!important}
  .footer-related-list{width:100%!important;flex-wrap:wrap!important}
  .footer-related-list>li{flex:1 1 50%!important;min-width:0;border-left:0;border-top:1px solid #eef0f4}
  .footer-related-list>li:nth-child(even){border-left:1px solid #eef0f4}
  .footer-related-list>li:last-child{border-right:0}
  .footer-related .btn-related{width:100%;height:auto;min-height:38px;padding:8px;font-size:10px;line-height:1.35;word-break:break-word;overflow-wrap:anywhere}
  .footer-related-subwrap{height:auto}
  .footer-related-subwrap.is-collapsed{height:0}
  .footer-related-sub .btn-related{min-height:32px;height:auto}
}

/* ───────── 5. 1024〜1740px の取りこぼし ─────────
   旧テーマは PC の viewport を width=1920 に固定していたため、
   1920px 未満の画面でも 1920px のキャンバスを縮小表示していた。
   つまりこの区間は一度も実寸で描画されたことがなく、
   1920px 前提の固定値が画面外にはみ出していても表に出なかった。
   レスポンシブ化で実寸のビューポートを使うようになって初めて現れた不具合をここで受け止める。
   1741px 以上(1920px を含む)には手を入れないので、PC の見た目は従来のまま。 */

/* トップの「お悩み」吹き出し:
   1200px 以下で .lp-bubble-N の幅が 580px 等に絞られるのに、
   .lp-bubble-text が white-space:nowrap のままなので枠外へあふれる。
   900px 以下には normal の指定があるが、1024〜1200px が抜けていた。 */
@media (min-width:1024px) and (max-width:1200px){
  .lp-bubble-text{white-space:normal}
  .lp-bubble{height:auto;min-height:0}
}

/* タイアンブリッジ ハブ(/taian-bridge/)の 2 カラム:
   .hub-wrap は width:921px と宣言されているが、中身は
   921(大カード) + 35(gap) + 375(右列) = 1331px ある。
   中央寄せなので (画面幅 - 921)/2 + 1331 <= 画面幅、つまり 1741px 以上でしか収まらない。
   1920px の画面では収まるため表面化していなかった。
   この区間だけ帯を中身の幅に合わせ、大カードを縮められるようにする。
   1440px では大カードが 921px となり 1920px と同じ大きさになる。
   1741px 以上(1920px を含む)は一切触らないので、PC の見た目は変わらない。 */
/* 1024〜1740px: 2 カラムのまま。帯を中身に合わせ、大カードで余りを吸収する。
   flex-basis を 0 にしないと大カードが伸びきって右列が下に落ちる。
   一度 1200px 以下で右列を下に回してみたが、縦積みの小カード 3 枚が
   横倒しになって高さ 127px まで潰れたため、2 カラムで通す。 */
@media (min-width:1024px) and (max-width:1740px){
  .hub-taian .hub-wrap{width:min(1331px, calc(100% - 40px));flex-wrap:nowrap}
  .hub-taian .hub-wrap > .hub-card-lg{flex:1 1 0;min-width:0}
  .hub-taian .hub-row{flex:0 0 375px;flex-direction:column}
}

/* 比較申込ページの手順セクション:
   .fxl-process-inner は gap:110px・nowrap で、中身は実測で約 1318px。
   帯の内側(1920px で 1040px)にも収まっていないが、画面が広いので見えていなかった。
   1740px 以下では画面外に出るため、この区間だけ折り返しと gap 縮小を許す。
   1741px 以上(1920px を含む)は従来どおり 1 行のまま。 */
@media (min-width:1024px) and (max-width:1740px){
  /* ステップは 5 個 × 約 160px = 800px。折り返さず 1 行に収めたいので、
     gap は「残り幅を 4 等分」した値にする(vw 基準だと入りきらず 4+1 に割れる)。 */
  .fxl-process-inner{
    flex-wrap:nowrap;
    gap:max(16px, min(110px, calc((100% - 820px) / 4)));
  }
}

/* 比較申込ページの注意事項:
   .fxl-notice-inner は box-sizing:content-box なので max-width に左右の padding が上乗せされ、
   1040 + --side-pad*2 が画面幅を超えると横にあふれる(1044px で 28px はみ出していた)。
   モバイル側はテンプレートの指定があるので、PC 区間だけ上限を画面幅から引いた値と比べる。
   1920px では min(1040, 1920-880) = 1040 で従来と同じ。 */
@media (min-width:1024px){
  .fxl-notice-inner{max-width:min(1040px, calc(100% - var(--side-pad) * 2))}
}

/* mobile.css の `body.is-mobile *{box-sizing:border-box}` は、メディアクエリ方式に
   置き換えた際に `body *` となり詳細度が下がった。その結果
   `.fxl-notice-inner{box-sizing:content-box}` に負けて、モバイルで
   左右 24px の padding が幅に加算されてしまう(342px → 390px)。
   content-box を明示しているのはこの 1 か所だけなので、ここで戻す。 */
@media (max-width:1023.98px){
  .fxl-notice-inner{box-sizing:border-box}
}

/* ───────── 6. 561〜1023px のレイアウト ─────────
   モバイル用マークアップはセクションごとに地色を持つ(白と #F8F9FB の交互など)。
   560px カラムに収めると、その地色の帯が画面端まで届かず左右に余白が見える。
   そこで body は画面幅いっぱいに使い、各セクションの左右パディングを広げて
   中身だけを 560px の幅で中央に置く。
   ・地色と背景画像は画面端まで伸びる
   ・テキストは 393〜480px 前提の設計どおり 560px 以内に収まる
   ・中身の基準幅が 560px で一定なので、フォントサイズなどの指定も破綻しない */
@media (min-width:561px) and (max-width:1023.98px){
  html{background:#F8F9FB}
  body{max-width:none!important;margin-left:0!important;margin-right:0!important;
       overflow-x:hidden}
  .m-main{max-width:none;overflow:visible}

  /* 各セクションの左右パディングで中身を 560px 中央に寄せる */
  main > section,
  main > div,
  .m-footer{
    padding-left:max(24px, calc((100% - 560px) / 2))!important;
    padding-right:max(24px, calc((100% - 560px) / 2))!important;
  }

  /* ヘッダーは画面幅いっぱい。ロゴは左端、ハンバーガーは右端。 */
  .m-header{padding-left:16px!important;padding-right:16px!important}

  /* ヒーローは中身が absolute 配置なのでパディングを戻す(文字が中央に置かれる) */
  .m-hero, .co-hero, .cs-hero, .fx-hero, .fxp-hero, .gm-hero,
  .hub-hero, .legal-hero, .pn-hero, .rc-hero, .rv-hero,
  .event-bar, .m-ticker{
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* main の直下ではないため上の一括指定から漏れた帯。
   親から画面幅まで引き伸ばし、中身は 560px 中央に寄せる。 */
@media (min-width:561px) and (max-width:1023.98px){
  .m-concerns .lp-asset-protection,
  .hub-body{
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding-left:max(24px, calc((100vw - 560px) / 2))!important;
    padding-right:max(24px, calc((100vw - 560px) / 2))!important;
  }
  .m-concerns .lp-asset-protection > *{max-width:560px;margin-left:auto;margin-right:auto}
}

/* フッターのサイトマップは 560px に収めると 2 列に折り返してしまう。
   この区間ではフッターだけ画面幅を使い、カラムを横一列に並べる。 */
@media (min-width:561px) and (max-width:1023.98px){
  /* 左右の余白は本文と同じ(中身 560px 中央)に揃える。
     その幅のまま横一列に並べたいので、列の最小幅を詰める。 */
  .m-footer{
    padding-left:max(24px, calc((100% - 560px) / 2))!important;
    padding-right:max(24px, calc((100% - 560px) / 2))!important;
  }
  .m-footer-sitemap{
    grid-template-columns:repeat(auto-fit, minmax(60px, 1fr))!important;
  }
}

/* 関連リンクナビ(mu-plugin)の .inner-wrap は padding:0 468px 0 478px の 1920px 固定。
   1024〜1740px では中身の帯が極端に細くなり(1120px で 174px)、
   ボタンの文字が縦に潰れる。ヘッダーと同じ 964px 基準で流動化する。
   プラグインの CSS はページ後方の <style> に出るため !important で上書きする。 */
@media (min-width:1024px){
  .footer-related .inner-wrap{
    padding-left:clamp(16px, calc((100vw - 964px) / 2), 478px)!important;
    padding-right:clamp(16px, calc((100vw - 964px) / 2), 468px)!important;
  }
}

/* レポート一覧(.rp-grid)は複数カラムのレイアウトなので、
   本文と同じ 560px に収めると列が折り返して窮屈になる。
   このセクションだけ左右の余白を詰めて横幅を使う。 */
@media (min-width:561px) and (max-width:1023.98px){
  main > section:has(.rp-grid),
  main > div:has(.rp-grid){
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .rp-grid{max-width:none!important;width:100%!important}
}

/* 申込ステップの連結線(.fxl-process::before)は background-size:1360px 固定。
   ・1023.98px 以下: 円が縦 5 段に積まれるので、横線は意味を持たず宙に浮く → 消す
   ・1024〜1740px: 円の間隔が縮むのに線は 1360px のままで大きくはみ出す
                   → 中身の帯から円 1 個ぶんを引いた幅に合わせる
   1741px 以上(1920px を含む)は従来のまま。 */
@media (max-width:1023.98px){
  .fxl-process::before{display:none}
}
@media (min-width:1024px) and (max-width:1740px){
  /* 線は円の中心間(約860px)に合わせていたが、両端の円より外まで伸ばして
     1920px 版と同じ見え方にする(中身の帯いっぱい = 100% - side-pad*2)。 */
  .fxl-process::before{
    background-size:max(200px, calc(100% - 2 * var(--side-pad))) 3px;
  }
}

/* .rp-banners は auto-fill 系の指定のため、帯が広がると列数が中身の数を超える。
   990px では 5 列が作られ、バナー 4 枚が左に寄って右端が 138px 余り、
   上下の横長バナー(.rp-wbn)と右端が揃わなくなる。列数を中身に合わせて固定する。 */
@media (min-width:561px) and (max-width:1023.98px){
  .rp-banners{grid-template-columns:repeat(4, 1fr)!important}
}

/* ステップ線を流れる光(mu-plugins/taian-anim.php)。
   あのプラグインは wp_is_mobile() で横向き版と縦向き版を出し分けているため、
   デスクトップの UA では画面が狭くても「横向きの光」が出てしまう。
   プラグインは旧テーマと共用なので触らず、ここで差し替える。 */

/* 1023.98px 以下: 円が縦に積まれるので、光も縦に流す */
@media (max-width:1023.98px){
  .fxl-process::after{display:none!important}
  .fxl-process-inner::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    left:56px;width:2px;top:-40px;bottom:-40px;border-radius:2px;
    background:linear-gradient(180deg,rgba(90,160,230,0) 0%,rgba(90,160,230,.6) 38%,#CFE7FF 50%,rgba(90,160,230,.6) 62%,rgba(90,160,230,0) 100%) 0 0/100% 150px no-repeat;
    animation:taianLineLightV 3.6s ease-in-out infinite;
  }
}
@keyframes taianLineLightV{
  0%{background-position-y:-150px;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{background-position-y:calc(100% + 150px);opacity:0}
}

/* 1024〜1740px: 線が 860px に縮むので、光の開始位置と移動量もそれに合わせる
   (既定は 1360px の線を前提に left:calc(50% - 680px) / translateX(1170px)) */
@media (min-width:1024px) and (max-width:1740px){
  /* 光は線の左端から出て右端まで流す。線幅は 100% - side-pad*2 なので、
     開始位置は side-pad、移動量は 線幅 - 光幅(150px)。 */
  .fxl-process::after{
    left:var(--side-pad)!important;
    animation:taianLineLightMid 3.6s ease-in-out infinite!important;
  }
}
@keyframes taianLineLightMid{
  0%{transform:translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateX(calc(100vw - 2 * var(--side-pad) - 150px));opacity:0}
}

/* 光の縦位置を線に合わせる。
   .ai-intro がある申込ページでは線が top:64px(高さ84px・背景は中央)に上がるので、
   線の実際の y は 64+42=106px。ところが光は既定の top:241px のままで、
   177px ずれた位置を流れていた。線と同じ高さに置き直す。 */
.ai-intro ~ .fxl-process::after{top:105px!important}

/* ニュース一覧のサムネイルは 380px 固定。560px カラムでは本文側に 145px しか残らず、
   矢印(.rb-ar)が 8px まで潰れたうえ項目の右端からはみ出して切れていた。
   この区間だけサムネイルを縮めて本文と矢印の場所を確保する。 */
@media (min-width:561px) and (max-width:1023.98px){
  /* grid の 1 列目が 380px 固定で、2 列目(本文)が 145px しか残らないのが原因。
     列そのものを組み直して本文側に幅を渡す。 */
  .rb-item .rb-link{grid-template-columns:220px 1fr!important}
  .rb-item .rb-thumb{width:100%!important;flex:0 0 auto!important}
  .rb-item .rb-ar{flex:0 0 auto!important}
}

/* /binary-option-apply/ では mu-plugin の条件(is_page('binary-apply'))がスラッグと
   合っておらず、ステップ線の光が出力されない。ここで同じ光を用意する。 */
@media (min-width:1024px){
  .page-fxcfd .fxl-process::after,
  .fxl-process::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    height:2px;width:150px;border-radius:2px;
    background:linear-gradient(90deg,rgba(90,160,230,0) 0%,rgba(90,160,230,.6) 38%,#CFE7FF 50%,rgba(90,160,230,.6) 62%,rgba(90,160,230,0) 100%);
  }
}

/* ───────── 7. ハブページは 1024px 未満でも PC のデザインを保つ ─────────
   ハブ(バイナリー比較/海外FX・CFD比較/利用者の声/レポート/業者の選び方)は
   PC 用の .hgrid とモバイル用の .hub-wrap-2col を両方持っている。
   1024px で切り替えると 2 列の小さなカードに変わってしまうので、
   このページだけ切り替え点を 640px まで下げ、641px 以上は PC のマークアップを使う。 */
@media (max-width:1023.98px){
  /* /erabikata/{fx-cfd|binary-option}/ は .rwd-mo / .rwd-pc が main 直下ではなく
     .hub-body の中にあるため、子セレクタだと当たらない。子孫で拾う。 */
  main.page-hub .rwd-mo{display:none!important}
  main.page-hub .rwd-pc{display:block!important}

  /* 560px カラムの制約を外して帯を広く使う */
  body:has(main.page-hub){max-width:none!important;margin-left:0!important;margin-right:0!important}
  main.page-hub > section,
  main.page-hub > .rwd-pc > section{padding-left:0!important;padding-right:0!important}

  .page-hub .hub-hero{height:auto!important;min-height:300px;margin-top:0}
  /* 中身が absolute のままだと高さに反映されず、見出しが 300px の枠から
     はみ出して切れる(iPhone SE で 44px×6行=324px)。フローに戻す。 */
  .page-hub .hub-hero-content{position:relative!important;inset:auto!important;padding:48px 20px!important;min-height:300px}
  .page-hub .hub-hero-title{font-size:clamp(21px, 4.4vw, 44px)!important;line-height:1.3!important}
  .page-hub .hub-hero-sub{font-size:clamp(13px, 2.2vw, 22px)!important;line-height:1.5!important}
  .page-hub .hub-body{padding:90px 0}
}

/* 関連リンクナビはボタン数がページごとに違う(/erabikata/ は 3 個、
   /erabikata/business-resource/ は 8 個)。nowrap のままだと 8 個の側が
   1 個 120px まで潰れて文字が読めない。最低幅を決めて折り返させ、
   どのページでもボタンの大きさを揃える。 */
@media (min-width:1024px){
  .footer-related-list{flex-wrap:wrap!important}
  .footer-related-list > li{flex:1 1 300px!important;max-width:calc(33.333% - 1px);min-width:0}
}

/* ハブの .hgrid は PC マークアップをそのまま使う方針にしたが、
   カード(.hgc)が 172px 固定・nowrap のため 5 枚で 964px 必要になり、
   帯が狭い画面では中央揃えのまま左右にはみ出して切れていた(390px で left:-271px)。
   折り返しと可変幅にして、狭い画面でも同じデザインのまま並べ替わるようにする。 */
@media (max-width:1023.98px){
  .hgrid-row{flex-wrap:wrap!important;justify-content:center!important;row-gap:26px}
  .hgrid-row > .hgc{
    flex:1 1 160px!important;
    min-width:0!important;
    max-width:100%!important;
  }
}
/* さらに狭い画面では 2 枚並びに寄せる */
@media (max-width:560px){
  .hgrid-row > .hgc{flex:1 1 140px!important}
}

/* ニュース一覧のメタ行(日付・閲覧数・矢印)は 640px 以下で縦積みになる指定がある。
   561〜640px では横幅に余裕があるのに 3 段(69px)に折れて右端に寄ってしまうため、
   561px 以上は横並びに戻す(480px 以下の本来のスマホ表示はそのまま)。 */
@media (max-width:1023.98px){
  .rb-item .rb-meta{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
  }
  /* margin-left:auto で右端に寄せると 2px はみ出すため、自然な位置に置く */
}