/*
 * renewal-withdrawal-monitor.css
 * fxsignup.com「withdrawal-monitor」(仮称。各ブローカーの出金を実地検証し、
 * 着金の可否・所要時間を信号のようなステータス表示で提供する新規コンテンツ)
 * 向けの追加スタイルをまとめたファイル。
 * 既存の共有CSS(/common/css/*, /rank-comp/common/css/rank_comp.css 等)は
 * 直接編集せず、追加・上書き分はすべてこのファイルにまとめる
 * (トップページのrenewal-top.cssと同じ方針)。
 *
 * 当初は入出金両方を想定して/payment-check/(renewal-payment-check.css)としていたが、
 * 出金にスコープを絞る方針となったため、2026-08-20にファイル名を変更した。
 *
 * 2026-08-21: 当初はwithdrawal-monitor/renewal-assets/というこのページ専用の
 * フォルダに置いていたが、top-page.html用に作成済みの共有renewal-assets/
 * フォルダ(このファイルの実際の配置場所)に同居させる方針に変更した。
 * withdrawal-monitor/index.htmlからは ../renewal-assets/css/... という
 * 相対パスで参照している。
 *
 * 2026-08-20: Lovableで作成したモックアップ(ダークテーマのダッシュボードUI)を、
 * FXplusの実際のトンマナ(明るい配色、既存の共有CSSコンポーネント)に置き換えて実装開始。
 * 既存記事ページ(/review/xem/, /knowledge/配下の記事等)で使われている以下のクラスは
 * そのまま流用している(編集せず、HTML側でこれらのクラスを指定するだけ):
 *   layoutMain01 typeB / layoutMain01Inner01 (メインコンテンツのラッパー。
 *     bodyに既にgenerationAクラスがあり冗長だったmt30 generationAから
 *     2026-08-21に変更)
 *   hStyle02 (章見出し。番号バッジなしで使用。以前はchapter01という独自名で
 *     同じ見た目を自前定義していたが、2026-08-21に指示によりクラス名を
 *     hStyle02に変更した。ただし本番のhStyle02は常にtypeArticle(章番号付き)
 *     と組み合わせて使われており、bareのhStyle02自体には元々スタイルが
 *     一切無い。番号なしの見た目を保つため、下記で自前定義を続けている)
 *   hStyle03 + textLayoutWide (テーブル手前の小見出し。左に太緑ボーダー。
 *     以前使っていたhStyle06から2026-08-21に変更)
 *   tableCommon01 typeE typeH02 (PC用の比較表。/review/xem/の会社情報テーブルを参考に、
 *     アコーディオン付きのtypeSP03から2026-08-20に変更。SPは別途.wmSpBrokerCardで組む)
 *   bgColorGray02 (表のヘッダー行・項目名セル。一度bgColorGreen03+FcWhiteの
 *     濃い緑ヘッダーに変更したが、2026-08-21指示により元の淡いグレーに戻した)
 *   borderGray01 paddingCommon20A (タグ解説等のグレー枠ボックス)
 *   bgColorYellow01 + borderGreen01 + FcGreen + radius10 (最終更新ピル。
 *     /review/xem/open-live-account.html のSTEP完了バッジを流用)
 *   bottomMemo02 + toggleCommon03Btn (免責事項の折りたたみ)
 *   btnWeb02 (フォーム送信ボタン等のCTA)
 * これらは.generationAスコープでより仕上がった見た目になるため、
 * bodyに元々ついているgenerationAクラスの効果に依存している。
 *
 * 「正常/注意/停止」の3色は既存の色トークンに合わせている
 * (緑=#005B40 サイト基調色、オレンジ=#EE902A iconStatus01Important等と同系、
 *  赤=#B20000 FcRed/iconStatus01Campaign02等と同系)。
 * ステータスドット・バッジ・集計カード・トラブルカード等、既存に該当コンポーネントが
 * ない部品のみ、下記で新規に定義している(接頭辞 wm = withdrawal-monitor)。
 *
 * 【見出し(元chapter01、現hStyle02)について】本番のchapter01は
 * `#review .generationA .chapter01 span{...}`が実際のセレクタで、
 * body要素にid="review"があることが前提になっていた(実機検証で発覚。
 * 以前の#rank-comp問題と同型)。このページにid="review"を付けると他の
 * #review専用ルール(グロナビのハイライト等、意図しない副作用)を
 * 呼び込む恐れがあるため、IDには依存せず同じ見た目を自前定義している。
 * 2026-08-21、クラス名をhStyle02に変更(bareのhStyle02自体は本番でも
 * スタイルを持たないクラスのため、同じ自前定義をそのまま.hStyle02に
 * 付け替えただけで実質的な影響はない)。
 * さらに、structure.css側の無条件(#review等のスコープなし)ルールで
 * .chapter01自体にheight:36pxの固定高さが指定されており、span側にも
 * 別の無条件ルールで.chapter01 span{width:250px;height:36px;...}が
 * 指定されていた。自前定義がwidth/heightを指定していなかったため
 * この固定値が残ってしまい、実際に必要な高さ(50px前後)からはみ出して
 * 直後の要素と重なって表示される不具合があった。width/heightとも
 * 明示的に上書きしている(.hStyle02は無条件ルールの対象外だが、
 * 念のため同じ上書きを維持している)。 */
/* .layoutMain01Inner01は無条件(ブレークポイント指定なし)でborder:1px solid #9D9D9D
   が指定されており、SP(max-width:767px)でだけborder:noneに上書きされる仕様のため、
   PCでは常に枠線が出てしまう。既存に該当する汎用の枠線解除クラスが無かったため、
   ページ専用のクラスを新設し、layoutMain01Inner01と併記して打ち消している
   (2026-08-21、インラインstyleでの対応から置き換え)。 */
.wmNoBorder { border: none !important; }
/* .layoutMain01Inner02は.generationA .layoutMain01Inner02{padding:21px}
   (詳細度: クラス2つ)が本命で効いており、単純な1クラスの上書きでは
   勝てないため!importantを使っている(wmNoBorderと同じ理由)。 */
.wmNoPadding { padding: 0 !important; }

/* 「本コンテンツは、当社が独自に...」注記の「もっとみる」アコーディオン
   (2026-09-02追記)。共有CSS(structure.css)側に
   .toggleCommon03BtnContents{display:block!important}という無条件
   ルールがあり、旧jQuery実装(.hide()/.slideToggle())の時点でもこの
   中身を実際には隠せていなかった(ボタンの文言/activeクラスだけが
   切り替わり、中身は常に表示されたまま。ユーザー指摘、2026-09-02:
   「フッタが崩れています」「開閉がスムースに動作しなくなっています」)。
   同じ詳細度(クラス1つぶん)の!importantルールは、CSSのソース順で
   このファイル側(共有CSSより後に読み込まれる)が勝つため、display:grid
   !importantで上書きできる。開閉自体は評価基準・FAQ等と同じ
   grid-template-rows: 0fr⇔1frのtransitionで実現し、中身
   (&-inner、HTML側で追加したラッパー)にmin-height:0+overflow:hiddenを
   効かせることで、0frの間はみ出さず完全に隠れるようにする。

   【2026-09-02追記、修正】上記を無条件(全幅)に適用してしまっており、
   PC(768px以上、.toggleCommon03Btn自体がdisplay:noneで開閉ボタンが
   そもそも存在しない幅)でも中身が初期状態(0fr=非表示)のまま開けなく
   なってしまっていた(ユーザー指摘: 「PCではアコーディオンではなく
   通常表示なのですが、消えてしまっているようです」)。もともとの設計は
   「PCは常時表示、SP(767px以下)だけ開閉式」であり、PC側は共有CSSの
   display:block!importantがそのまま正しい挙動だったため、このアコー
   ディオン化(grid化)自体を.toggleCommon03Btnと同じ767px以下限定に
   スコープし直した。 */
@media screen and (max-width: 767px) {
  .toggleCommon03BtnContents {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .toggleCommon03BtnContents.is-open {
    grid-template-rows: 1fr;
  }
}
.toggleCommon03BtnContents-inner {
  min-height: 0;
  overflow: hidden;
}
/* 上のアコーディオンを実際に閉じられるようにした副作用で、SPパンくず
   (#crumb)が.toggleCommon03Btnと重なる不具合が新たに出た(ユーザー指摘、
   2026-09-02、Gyazoで確認)。
   #crumbは1024px以下では本家共有CSS(編集不可)の仕様でposition:
   absolute;bottom:0となり#wrapperの下端に張り付く(実測: 高さ39px+
   margin-bottom10px=下端から49px分の領域を占有)。以前はこの
   アコーディオンの中身が(バグで)常に表示されたままだったため、
   #wrapperの実コンテンツがその49pxより十分下まで伸びており偶然
   重ならずに済んでいたが、今回中身を正しく閉じられるようにしたことで
   実コンテンツの終端が短くなり、#crumbの占有領域と重なるようになった。
   #wrapper自身にpadding-bottomを追加して底上げすることで、
   アコーディオンの開閉状態に関わらず#crumbとの重なりを防ぐ
   (49px分の重なり回避+10pxの見た目の余白)。#wrapperは他の下層ページ
   テンプレートでも使われる可能性のある汎用IDのため、新デザインを
   反映したページ(.p-has-new-header)かつこのファイルを読み込むページ
   に限定するよう.p-has-new-header配下でスコープしている
   (top-page-trial.htmlには#wrapper自体が存在せず、逆に#wrapperを
   持つtop-page.htmlは.p-has-new-headerを持たないため、どちらにも
   影響しない)。 */
@media screen and (max-width: 1024px) {
  .p-has-new-header #wrapper {
    padding-bottom: 59px;
  }
}

.hStyle02 { background: none; height: auto; width: 100%; }
.hStyle02 span {
  display: block;
  width: 100%;
  height: auto;
  /* 1.3em(継承元フォントサイズ次第で17.888pxにしかならず、以前の
     hStyle02 typeArticle見出し(装飾なしのブラウザ既定h2サイズ=1.5em/24px相当)
     より小さく見えるとの指摘があったため、絶対px指定に変更(2026-08-20)。 */
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  padding: 16px 22px;
  text-align: left;
  color: #383838;
  border-bottom: 3px solid #005b40;
  background-color: #f4f4f4;
  box-sizing: border-box;
}

/* ---- textLayoutWide/textLayoutWidestを機能させるためのラッパー ----
   これらのクラスは本番側では常にコンパウンドセレクタ
   (.generationA section .textLayoutWide 等、.mainArticleWrap配下の
   実body要素<section>が前提)でしか定義されておらず、bare指定は存在しない
   (2026-08-21、genA_fresh.cssを全文確認して確定)。そのため本ページのHTML側で
   layoutMain01Inner01の内側を layoutMain01Inner02 > mainArticleWrap typeA
   generationA sectionLayout01 > section class="section" で包み、既存記事と
   同じネスト構造(xem.htmlで確認済み)を再現した。これによりtextLayoutWide/
   textLayoutWidestが本来の間隔(2.5em/PC、1.5em/SP 等)で効くようになる。

   副作用として、同じ本番ルール群の中に
   .generationA section p,ul,ol{margin-top:2.5em}という無条件ルールも
   含まれており、<section>配下の地の文段落すべてに意図しない上余白が
   新たに入ってしまう。flexCommon01配下やtableCommon01配下等、本番側で
   既に margin-top:0 のリセットが用意されている要素は影響を受けないが、
   それ以外の素の<p>(リード文wmBodyTxt、トラブルカードの説明文、
   フッター注記等)は不要な余白が付くため、下記で明示的に0へ戻している。 */
.generationA section p:not(.textLayoutWide):not(.textLayoutWidest),
.generationA section ul:not(.textLayoutWide):not(.textLayoutWidest),
.generationA section ol:not(.textLayoutWide):not(.textLayoutWidest) {
  /* 本番側の同名セレクタと詳細度が同点のため、確実に上書きするため
     !important を付けている(本番側もtextLayoutWidest等で同様の
     手法を使っている)。textLayoutWide/textLayoutWidest自体を持つ要素
     (wmStatTilesのul等)はここでの対象から除外し、本来の間隔を活かす。
     以前は.caution01内の.sizeCommon11(アイコンと見出しを重ねる本番の
     -3em専用ハック)も除外していたが、2026-08-21にトラブル速報カードの
     デザインを凡例ボックス風の自前スタイルに変更し.caution01を
     使わなくなったため、この例外は不要になり削除した。 */
  margin-top: 0 !important;
}

/* ---- 地の文の文字サイズ統一ルール ----
   mainArticleWrap.typeAは基準フォントサイズ(1em)を与えるだけで、実記事ページ
   (/review/xem/, /knowledge/配下の記事)と同じ文字サイズ・行間・字間には
   ならないため、引き続き数値で明示的に揃える必要がある。2026-08-20、
   上記2ページを実機計測して以下の3段階に統一した
   (それまではfs06/fs08/fs09等の相対em指定を場当たり的に使っており、
   継承元のフォントサイズ次第で実際の大きさがバラついていた)。
     wmBodyTxt: 本文(地の文)そのもの。実測値15.136px/line-height1.7/字間1.35px
     wmCardTxt: カード内の抜粋・データ値等。実測値13.76px(reference01の記事抜粋と同じ)
     wmMetaTxt: 更新日・ラベル等の注記。実測値12.16px(publishdata01の更新日表示と同じ)
   いずれも文字色は本文色#383838に統一(発生時期等のラベルも含め、薄いグレーには
   しない)。 */
.wmBodyTxt {
  font-size: 15.136px;
  line-height: 1.7;
  letter-spacing: 1.35px;
  color: #383838;
}
/* 2026-09-04追記: 「解消確認済みの履歴」内のカード説明文・当サイト検証は、
   このページで新たに定めた地の文の基準(.p-wm__lead、PC:15px/
   line-height1.8、SP:14px/line-height1.7、static/scss/page/
   _wm-detail.scss参照)に揃える(ユーザー指示:「解消確認済みの履歴内の
   カードの説明文と当サイト検証の箇所ですが、PC/SPとも地の文サイズに
   してください」)。基本の.wmBodyTxt(15.136px固定)はこのセクション以外
   (読み込み中/準備中等の状態表示、出金トラブル速報カード本体等)でも
   使われている共有クラスのため変更せず、#wm-incidents-resolved配下
   だけ上書きする。 */
#wm-incidents-resolved .wmBodyTxt {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: normal;
}
@media screen and (min-width: 768px) {
  #wm-incidents-resolved .wmBodyTxt {
    font-size: 15px;
    line-height: 1.8;
  }
}
.wmCardTxt {
  font-size: 13.76px;
  letter-spacing: 1.35px;
  color: #383838;
}
.wmMetaTxt {
  font-size: 12.16px;
  letter-spacing: normal;
  color: #383838;
}

/* ---- ステータスドット(丸) ---- */
.wmStatusDot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.wmStatusDotOk { background-color: #005B40; }
.wmStatusDotWarn { background-color: #EE902A; }
.wmStatusDotStop { background-color: #B20000; }
.wmStatusDotMaintenance { background-color: #235E91; }

/* ---- 最終更新ピル ----
   /review/xem/open-live-account.html のSTEP完了バッジ
   (bgColorYellow01+borderGreen01+FcGreen+radius10の組み合わせ)をそのまま流用。
   時計アイコンは本番に該当画像がなかったため、currentColorで文字色に
   追従するインラインSVGを新規に用意している。
   2026-08-20、リード文との順序を入れ替え(リード文が先)、間の余白を追加。
   2026-08-21、リード文との余白はtextLayoutWide(mainArticleWrap配下で
   本来の2.5em/PC・1.5em/SPが有効)に一本化し、ここでの独自margin-topは廃止。 */
.wmUpdatedPill {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* 2026-08-21指示により、文言に対して若干下にずれて見えたため、少しだけ上へ調整。 */
.wmClockIcon { flex-shrink: 0; position: relative; top: -1px; }

/* ---- 集計カード(監視ブローカー/正常/注意/停止) ----
   2026-08-20に一度、枠なしの横一列(丸ラベル+件数)へ変更したが、
   「以前のボックスを踏襲したい」との指示によりボックスカード形式に戻し、
   さらに続く指示で、ボックスの色分けと項目名(プレーンテキスト)も
   当初のデザインまで戻した(丸ラベルは廃止)。PCのみ折り返さず1行にする。 */
.wmStatTiles {
  /* 上余白はtextLayoutWide(mainArticleWrap配下で本来の2.5em/PC・1.5em/SPが
     有効)に一本化。下余白のみここで維持。 */
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 2em;
}
.wmStatTile {
  flex: 1 1 130px;
  background-color: #F4F4F4;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  padding: 14px 16px;
  box-sizing: border-box;
  text-align: center;
}
.wmStatTileLabel {
  font-size: 12.16px;
  letter-spacing: normal;
  color: #666;
  margin: 0 0 4px;
}
.wmStatTileValue {
  font-size: 1.7em;
  font-weight: 700;
  color: #383838;
  margin: 0;
  line-height: 1.2;
}
.wmStatTileValue .wmStatTileUnit { font-size: 0.5em; font-weight: 400; margin-left: 2px; }
.wmStatTileOk { background-color: #F0FFE1; border-color: #B7DE8B; }
.wmStatTileOk .wmStatTileValue { color: #005B40; }
.wmStatTileMaintenance { background-color: #E8F2FC; border-color: #A9CDED; }
.wmStatTileMaintenance .wmStatTileValue { color: #235E91; }
.wmStatTileWarn { background-color: #FFF7E8; border-color: #F3CE8F; }
.wmStatTileWarn .wmStatTileValue { color: #B36B00; }
.wmStatTileStop { background-color: #FFECEC; border-color: #F0AFAF; }
.wmStatTileStop .wmStatTileValue { color: #B20000; }

@media screen and (min-width: 1025px) {
  /* PCのみ項目名と件数を1行にまとめる(2026-08-20指示)。
     2026-08-21、項目名(監視業者数 等)をもう少し大きく、かつ隣の数字と
     上下中央に揃うようbaseline→centerに変更(以前は数字側のフォントが
     大きい分、項目名が下寄りに見えていた)。 */
  .wmStatTile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .wmStatTileLabel { margin: 0; font-size: 14.5px; }
}

@media screen and (max-width: 767px) {
  /* コンテナ側(#wm-stat-tiles、実体は.p-wm__stat-tiles)でwrapに切り替え、
     ここでは中身の並び方だけを指定する。min-width:0が無いと中身の
     min-content分までしか縮まず2×2に折り返るため明示している。 */
  .wmStatTile { flex: 1 1 0; min-width: 0; padding: 10px 8px; }
  #wm-stat-tiles > .wmStatTile:first-child {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  #wm-stat-tiles > .wmStatTile:first-child .wmStatTileLabel { margin: 0; }
  .wmStatTileValue { font-size: 1.3em; }
}

/* ---- 出金リアルタイム監視表 ----
   PC: /review/xem/ の会社情報テーブル(tableCommon01 typeE typeH02、
   緑ヘッダー+アコーディオンなし)をそのまま流用。ステータスはバッジではなく
   セル背景そのものを着色する(2026-08-20指示によりバッジ表示から変更)。
   colgroupはブローカー列w22+出金方法6列w13で100%になるよう均等割り
   (2026-08-21、幅未指定だった6列を揃えた後、方法列をさらに少し
   狭める指示によりw14→w13、ブローカー列をw16→w22に調整)。
   SP: 通常のtypeSP03(単純な縦積み)ではなく、ブローカー名を帯見出しにした
   独自のカード形式(.wmSpBrokerCard)を別途用意し、PC用テーブルは
   dispNonePU、SPカードはdispNonePOで出し分けている。 ---- */
/* hStyle03自体の見た目(左に太緑ボーダー等)は無条件ルールでスタイルされている。
   上の見出しとの余白はtextLayoutWide(mainArticleWrap配下で有効化、2.5em/PC・
   1.5em/SP)に一本化。下の表との余白のみ、本番に該当ルールがないため
   引き続き自前で指定している(2026-08-21、旧hStyle06からの置き換え)。 */
.hStyle03 {
  margin-bottom: 0.8em;
}

.wmStatusTablePc th,
.wmStatusTablePc td {
  vertical-align: middle;
  /* 2026-08-21、行間を詰めるよう指示があり10px→6px→5pxと縮小。
     本番の.tableCommon01.typeE table td{padding:15px 12px}が詳細度
     (クラス2+要素2)で上回るため、!importantで確実に上書きしている。 */
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  --wmCellPadY: 5px;
  --wmCellPadX: 12px;
}
/* PC表のヘッダー行(出金方法名)は本文よりやや小さくして情報量を抑える
   (2026-08-21指示)。同日、太字化の指示もあり追加。
   position:stickyで、画面内に表示されている間はヘッダーの下に張り付く
   よう追尾させる。
   【2026-09-01修正】当初は旧グロナビ(#gmenuPC、position:fixed、実測
   height:43px)を前提にtop:43pxを固定値で指定していたが、このページに
   新ヘッダー(.p-header、position:fixed、高さ70px。Cookie未同意時は
   固定告知バナーの分さらに下がる)を反映したことで実際のヘッダー下端と
   ズレるようになった(ユーザー指摘)。新ヘッダーの実際の下端はJS側
   (static/js/global.jsのsyncHeaderOffset、load/resize/告知バナー開閉時に
   再計測)がCSS変数--p-header-bottomとして<html>に反映し続けているため、
   固定値ではなくこの変数を参照するようにした(70pxはJS実行前の一瞬用の
   フォールバック値、$header-heightと同じ)。z-indexはヘッダー
   (layout/_header.scss側で定義、10より大きい値)より低い値にし、
   常にヘッダーの下に来るようにしている。背景はbgColorGray02クラスが
   各セルに元々付いており、スクロールしてくる内容が透けないようになっている。 */
.wmStatusTablePc thead td {
  font-size: 0.85em;
  font-weight: 700;
  position: sticky;
  top: var(--p-header-bottom, 70px);
  z-index: 5;
}
/* ブローカー名セル: 個社ページ等で使っているステータスドット+社名の
   組み合わせを復活(2026-08-21指示)。ドットの色は、その行の6出金方法の
   うち最も悪いステータス(停止>注意>正常)に合わせている。
   2026-08-21、常時モニタリング中であることを表現するため点滅アニメーション
   を追加(凡例側の.wmLegendItem内のドットには影響させないよう
   .wmBrokerCell配下限定)。prefers-reduced-motionを尊重し、
   モーション抑制設定のユーザーには点滅させない。 */
.wmBrokerCell {
  display: inline-flex;
  align-items: center;
}
.wmBrokerCell .wmStatusDot {
  animation: wmDotBlink 1.6s ease-in-out infinite;
}
@keyframes wmDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .wmBrokerCell .wmStatusDot { animation: none; }
}
/* ステータスセル: 2026-08-21指示により、時間の数字を主役にするのではなく
   色付きアイコンを大きく表示し、時間はその下に小さく添える形に変更。
   セル背景の薄い色分けは、PC表(.wmStatusTablePc)・SPカード
   (.wmSpMethodCell)どちらも行っている(2026-08-21、SP側は一時「白背景+
   バッジのみ」に変更していたが、同日中の指示で再度ステータス背景色を
   反映する方針に戻した)。 */
.wmStatusTablePc .wmCellOk { background-color: #F0FFE1 !important; }
.wmStatusTablePc .wmCellWarn { background-color: #FFF7E8 !important; }
.wmStatusTablePc .wmCellStop { background-color: #FFECEC !important; }
.wmStatusTablePc .wmCellMaintenance { background-color: #E8F2FC !important; }
.wmStatusTablePc .wmCellNone { background-color: #F4F4F4 !important; }
/* アイコンは、2026-08-21指示により完成されたSVGバッジアイコンに変更
   (参考: blacklist-monitorページのGoogle Safe Browsing等のチェック
   マークバッジ)。○/△/✕という文字ではなく、丸背景+チェック/!/×の
   ベクター図形をインラインSVGで直接埋め込んでいる(緑=正常のチェック、
   オレンジ=注意の!、赤=停止の×)。色は丸の塗り(fill)にそのまま
   反映済みなので、.wmCellIcon側では色指定していない。PC表・SPカード
   共通のクラスとして定義。 */
.wmCellIcon {
  display: block;
}
.wmCellIcon svg {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto;
}
/* 注意/停止セルから「出金トラブル速報」内の該当詳細へアンカーリンク
   (2026-08-21指示)。ThreeTrader×銀行送金・FXGT×銀行送金の2件は
   出金トラブル速報に個別カードがあるため、そのカードのidへ直接リンク。
   それ以外の注意セル(現時点でトラブル速報に個別カードがないサンプル値)は、
   暫定的にセクション見出し(#trouble-alerts)へリンクしている。個別カードが
   増えたら、該当セルのhrefをそのカードのidに差し替える運用を想定。
   2026-08-21、見出しidをarticle01/02/03という連番から、内容に沿った
   英語のid(withdrawal-monitoring/trouble-alerts/trouble-report/
   resolved-history)に変更した(article03が2箇所で重複していた不具合も
   このタイミングで解消)。 */
/* 2026-08-21指示により、ホバー時は下線ではなくセル背景色の変化で
   クリック可能を示す方式に変更。<a>にセルのpadding分の負のマージン+
   同じpaddingを持たせてセル全体(paddingの内側)を覆うようにし、
   その<a>自体の背景色をホバー時に変えることで、セル全面が反応して
   見えるようにしている(セル側の背景色!importantとは別レイヤーなので
   競合しない)。あわせて、リンクがあることを示す▼を各セル右側の
   縦中央に薄く配置している。PC表(.wmStatusTablePc td)とSPカード
   (.wmSpMethodCell)でpaddingの実寸が異なるため、--wmCellPadX/Yという
   CSSカスタムプロパティを各セル側で定義し、.wmCellLinkはそれを参照する
   ことで、どちらの文脈でも同じデザインを使い回せるようにしている
   (2026-08-21、SP側もPCとアンカーリンクのデザインを揃える指示のため)。 */
.wmCellLink {
  position: relative;
  display: block;
  margin: calc(-1 * var(--wmCellPadY, 6px)) calc(-1 * var(--wmCellPadX, 12px));
  padding: var(--wmCellPadY, 6px) var(--wmCellPadX, 12px);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* structure2.cssの無条件ルールa:hover{text-decoration:underline}が
   (要素+疑似クラスで詳細度(0,1,1))が.wmCellLinkの通常時の
   text-decoration:none(0,1,0)より詳細度で勝ってしまい、ホバー時に
   下線が復活していたため、:hover/:focus-visibleを明示して
   詳細度(0,2,0)で確実に打ち消している(2026-08-21指示)。 */
.wmCellLink:hover,
.wmCellLink:focus-visible {
  text-decoration: none;
}
/* ▼は数字/アイコン側の中央配置を崩さないよう、paddingは広げずに
   既存の右paddingの内側へ絶対配置で重ねている。2026-08-21、右端から
   もう少し離すよう指示がありright:3px→5pxに調整。 */
.wmCellLink::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  font-size: 0.55em;
  color: currentColor;
  /* 2026-08-21、薄すぎるとの指示で0.4→0.65に濃く調整。 */
  opacity: 0.65;
}
.wmCellWarn .wmCellLink:hover,
.wmCellWarn .wmCellLink:focus-visible {
  background-color: #FBE7BE;
}
.wmCellStop .wmCellLink:hover,
.wmCellStop .wmCellLink:focus-visible {
  background-color: #FFD6D6;
}
.wmCellMaintenance .wmCellLink:hover,
.wmCellMaintenance .wmCellLink:focus-visible {
  background-color: #CFE6FA;
}
.wmCellTime {
  display: block;
  /* 2026-08-21、アイコンとの余白を4px→2pxに詰めたところ、line-height側の
     余分な余白除去(下記)と重なって詰まりすぎに見えるとの指摘があり、
     4pxへ戻した。 */
  margin-top: 4px;
  font-size: 0.78em;
  /* tableCommon01のtd既定line-height:1.4emは、td自体の(このspanより
     大きい)フォントサイズを基準に計算された固定px値が継承されるため、
     このspanの小さい文字に対しては行間が広くなりすぎ、アイコン+時間の
     ブロック下側に余分な余白が生まれていた。自身のフォントサイズ基準の
     line-heightを明示して詰めている(2026-08-21指示)。 */
  line-height: 1.2;
  /* 親から1.35pxのletter-spacingを継承しており、text-align:centerの
     センタリング計算に最後の文字の後ろの余白ぶんまで含まれてしまうため、
     見た目上、文字がマークに対してやや左に寄って見える原因になっていた。
     このspanではletter-spacingを打ち消して解消(2026-08-21指示)。 */
  letter-spacing: normal;
  color: #383838;
}
.wmCellTimeNone {
  font-size: 1em;
  color: #999;
}

/* SPカード(ブローカー単位) */
.wmSpBrokerCard {
  border: 1px solid #D7D7D7;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
/* ブローカー名の帯。当初サイト基調の濃い緑を想定していたが、出金
   ステータスの緑と紛らわしくなるため一度濃いグレーにしていた
   (2026-08-20指示)。2026-08-21、中央揃え・PCと同じ点滅ドット付与・
   薄いグレー背景への変更指示があり、項目名セルと同じbgColorGray02
   相当(#F4F4F4)に統一、文字色も本文色(#383838)に変更した。
   ドットの点滅は.wmBrokerCell .wmStatusDot{animation:...}を
   そのまま再利用するため、HTML側で.wmBrokerCellでも囲んでいる。 */
.wmSpBrokerName {
  /* 2026-08-21指示により薄グレー→白に変更。 */
  background-color: #FFF;
  color: #383838;
  font-weight: 700;
  font-size: 15.136px;
  letter-spacing: 1.35px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2026-08-21指示により、ブローカー名帯と下の項目グリッドの間にも
     罫線を追加(グリッド側の1行目セルはborder-top:noneのため、
     二重線にはならない)。 */
  border-bottom: 1px solid #E5E5E5;
}
/* 出金方法の項目セル。2026-08-21、当初6項目を2列×3行のグリッドで
   表示し背景は白にしていたが、同日中の指示により3列×2行(1行に3つ、
   ブローカーごとに2行で収まる)へ変更、あわせてPC表と同じステータス
   背景色(正常=薄緑/注意=薄橙/停止=薄赤/データなし=薄灰)も反映した。 */
/* 1段目3個・2段目4個。行ごとに列数が違うためrepeat(3,1fr)等では組めず、
   12列(3と4の最小公倍数)グリッドで1〜3番目をspan4、4番目以降をspan3に
   している。 */
.wmSpMethodGrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.wmSpMethodCell {
  border-top: 1px solid #E5E5E5;
  padding: 10px 6px;
  text-align: center;
  box-sizing: border-box;
  --wmCellPadY: 10px;
  --wmCellPadX: 6px;
}
.wmSpMethodCell:nth-child(-n+3) {
  grid-column: span 4;
}
.wmSpMethodCell:nth-child(n+4) {
  grid-column: span 3;
}
.wmSpMethodCell.wmCellOk { background-color: #F0FFE1; }
.wmSpMethodCell.wmCellWarn { background-color: #FFF7E8; }
.wmSpMethodCell.wmCellStop { background-color: #FFECEC; }
.wmSpMethodCell.wmCellMaintenance { background-color: #E8F2FC; }
.wmSpMethodCell.wmCellNone { background-color: #F4F4F4; }
/* 1段目(1〜3番目)は上ボーダーなし。右ボーダーは各段の最後(3番目・
   7番目)以外に付けて格子状にする。項目数が変わったら要調整。 */
.wmSpMethodCell:nth-child(-n+3) {
  border-top: none;
}
.wmSpMethodCell:not(:nth-child(3)):not(:nth-child(7)) {
  border-right: 1px solid #E5E5E5;
}
.wmSpMethodLabel {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: normal;
  color: #383838;
  font-weight: 700;
}

/* ---- トップページ用 簡易出金リアルタイム監視(2026-08-26追加) ----
   専用ページ(このCSS内の上のセクション)のPC表・SPカードと同じ配色・
   構造をベースにした簡易版。ユーザー指示により「1〜2営業日」等の
   具体的な文言は出さず、色付きアイコンのみで状態を示す。専用ページと
   違い短い一覧なので、ヘッダーのposition:sticky(グロナビ追尾)は
   付けていない。.wmBrokerCell/.wmStatusDot/.wmCellIcon/.wmSpBrokerName/
   .wmSpMethodLabelおよびtier別クラス(wmCellOk等)自体はページ非依存
   なので専用ページと共有し、行間・セル背景・グリッド構造など
   トップページ固有の指定だけをここに定義する。 ---- */
.wmTopGridTablePc th,
.wmTopGridTablePc td {
  vertical-align: middle;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.wmTopGridTablePc thead td {
  font-size: 0.85em;
  font-weight: 700;
}
.wmTopGridTablePc .wmCellOk { background-color: #F0FFE1 !important; }
.wmTopGridTablePc .wmCellWarn { background-color: #FFF7E8 !important; }
.wmTopGridTablePc .wmCellStop { background-color: #FFECEC !important; }
.wmTopGridTablePc .wmCellMaintenance { background-color: #E8F2FC !important; }
.wmTopGridTablePc .wmCellNone { background-color: #F4F4F4 !important; }
/* セクション背景を薄緑にした(下記.wmTopGridBg)ため、ブローカー名セルは
   白背景を明示して区別する(ユーザー指示)。 */
.wmTopGridBrokerCellPc {
  background-color: #FFF !important;
}

/* SPは「解消確認済みの履歴」(専用ページの.wmIncidentHistoryScroll/Track)と
   同じ横スクロール+スナップの構成にした(ユーザー指示: アコーディオンでは
   なく全社ぶんを横スクロールで見せたい)。 */
.wmTopGridSpScroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.wmTopGridSpTrack {
  display: flex;
  gap: 1em;
}
.wmTopGridSpTrack .wmTopGridSpCard {
  /* 横スクロールできることが伝わる程度に次カードを少し覗かせつつ、
     長いステータス文言(「24時間〜5営業日」等)にも余裕を持たせるため、
     85%→92%に拡大(ユーザー指示)。 */
  flex: 0 0 92%;
  scroll-snap-align: start;
}
.wmTopGridSpCard {
  border: 1px solid #D7D7D7;
  border-radius: 4px;
  overflow: hidden;
}
/* 専用ページの.wmSpMethodGridと同じ12列グリッド手法(1段目3個・2段目4個)。 */
.wmTopGridSpMethodGrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.wmTopGridSpMethodCell {
  border-top: 1px solid #E5E5E5;
  padding: 10px 6px;
  text-align: center;
  box-sizing: border-box;
}
.wmTopGridSpMethodCell:nth-child(-n+3) {
  grid-column: span 4;
}
.wmTopGridSpMethodCell:nth-child(n+4) {
  grid-column: span 3;
}
.wmTopGridSpMethodCell.wmCellOk { background-color: #F0FFE1; }
.wmTopGridSpMethodCell.wmCellWarn { background-color: #FFF7E8; }
.wmTopGridSpMethodCell.wmCellStop { background-color: #FFECEC; }
.wmTopGridSpMethodCell.wmCellMaintenance { background-color: #E8F2FC; }
.wmTopGridSpMethodCell.wmCellNone { background-color: #F4F4F4; }
/* 1段目(1〜3番目)は上ボーダーなし。右ボーダーは各段の最後(3番目・
   7番目)以外に付けて格子状にする(1段目3個・2段目4個、固定の項目数を
   前提にした指定。項目数が増減した場合はこのブロックも要調整)。 */
.wmTopGridSpMethodCell:nth-child(-n+3) {
  border-top: none;
}
.wmTopGridSpMethodCell:not(:nth-child(3)):not(:nth-child(7)) {
  border-right: 1px solid #E5E5E5;
}
/* トップページ簡易版のカードは専用ページの.wmSpMethodGridより幅が
   狭い(横スクロールカードが画面幅の85%、1セルはその1/3)ため、共通の
   .wmSpMethodLabel(11.5px)のままだと「クレジットカード」が2行に
   折り返ってしまう(実機確認済み)。トップページのセルに限定して
   縮小し、1行に収める。専用ページ側のフォントサイズは変更しない。 */
.wmTopGridSpMethodCell .wmSpMethodLabel {
  font-size: 10px;
}

/* セクション全体の背景(ユーザー指示: ランキングと同じ薄緑)。
   .indexRanking(common/css/index.css)と同じ色を踏襲。
   margin-top:-1pxは、.indexRanking側(共通CSSで編集対象外)が持つ
   border-bottom:1px solid #FFFを打ち消すためのもの。ランキングの直後に
   このセクションを差し込むと白い1px線が挟まって見えるため、1px分
   このセクションを上にずらし、薄緑どうしを直接重ねて白線を隠している
   (ユーザー指示)。 */
.wmTopGridBg {
  background-color: #EEF1E4;
  margin-top: -1px;
}

/* 専用ページへの誘導ボタン。btnWeb03自体はdisplay:blockで幅の指定が
   無く親要素いっぱいに広がるため、このラッパーで幅を絞っている
   (ユーザー指示: コンテンツ100%幅ではなく、もっと狭くしたい)。 */
.wmTopGridCtaBtn {
  max-width: 320px;
  margin: 0 auto;
}

/* トップページの他セクションと幅を揃えるためのラッパー(ユーザー指示:
   PC表示時、上のランキングと同じ幅にしたい)。indexSupport自体は幅を
   持たないため祖先コンテナ依存の幅になってしまっていた。common/css/
   index.cssの.indexRankingInnerと同じ値(1100px、1024px以下でwidth:auto+
   左右padding10px)を踏襲している。 */
.wmTopGridWidthWrap {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  .wmTopGridWidthWrap {
    width: auto;
    padding: 0 10px;
  }
}

/* ---- 凡例(正常/注意/停止の説明) ---- */
.wmLegend { gap: 10px; flex-wrap: wrap; margin: 1.5em 0 2.5em; }
.wmLegendItem {
  flex: 1 1 220px;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid;
  box-sizing: border-box;
  font-size: 13.76px;
  letter-spacing: 1.35px;
  color: #383838;
}
.wmLegendItem p { margin: 0; }
.wmLegendItem p.b { margin-bottom: 4px; font-size: 15.136px; }
.wmLegendOk { background-color: #F0FFE1; border-color: #B7DE8B; }
.wmLegendWarn { background-color: #FFF7E8; border-color: #F3CE8F; }
.wmLegendStop { background-color: #FFECEC; border-color: #F0AFAF; }

/* ---- 出金トラブル速報カード ----
   2026-08-21、参考画像(凡例ボックス.wmLegendItemと同じデザイン言語:
   細い枠線+薄い塗り+角丸4px)を踏襲するよう指示があり、既存の.caution01
   (赤・警告アイコン付き・太枠3px)の流用をやめ、.wmLegendOk/Warn/Stopと
   同じ配色トークンを使った自前の.wmIncidentStop/.wmIncidentWarnに統一した
   (ThreeTraderのカードから.caution01クラスを外し、FXGTのカードと
   同じ構造に揃えている)。 */
.wmIncidentCard {
  border: 1px solid;
  border-radius: 4px;
  padding: 1.1em 1.3em;
  box-sizing: border-box;
}
/* 解消済み履歴側(.wmIncidentHistoryTrack)と同じ1emの間隔をカード間に持たせる。 */
#wm-incidents-active .wmIncidentCard + .wmIncidentCard {
  margin-top: 1em;
}
.wmIncidentStop { background-color: #FFECEC; border-color: #F0AFAF; }
.wmIncidentWarn { background-color: #FFF7E8; border-color: #F3CE8F; }
.wmIncidentMaintenance { background-color: #E8F2FC; border-color: #A9CDED; }
/* 2026-08-21、「解消確認済みの履歴」セクション用に追加。凡例の
   .wmLegendOkと同じ配色(薄緑)。 */
.wmIncidentResolved { background-color: #F0FFE1; border-color: #B7DE8B; }
/* 「解消確認済みの履歴のカードの角丸を、正常等の説明のボックスの
   角丸とあわせてください」とのユーザー指示(2026-09-04)により、
   このセクションのカードのみ.wmIncidentCard基本の4px→凡例ボックス
   (.p-wm__legend-item)と同じv.$radius-sm(8px)に変更。速報中の
   .wmIncidentStop/.wmIncidentWarn(#wm-incidents-active)は対象外
   なので、#wm-incidents-resolved配下に限定してスコープしている。 */
#wm-incidents-resolved .wmIncidentCard { border-radius: 8px; }
/* 2026-08-21、マーク+タイトルの「ぶら下げインデント」をflexboxの
   アイテム分割(.wmCellIcon/.wmIncidentTitleText/.wmIncidentTagsを
   flexアイテムとして並べる方式)で実装していたが、環境によっては
   タイトルがマークの下に回り込む不具合が解消しなかったため、
   より確実な手法に全面変更した: マークをCSSの::before擬似要素
   (background-imageでSVGバッジを描画)として絶対配置し、タイトル文言は
   一切ラップせず素のブロックテキストのままにして、p自体にマーク幅ぶんの
   padding-leftを与える方式にした。この方式なら、折り返した行はすべて
   「pタグのpadding-leftに沿ってインデントされる」というブラウザの
   テキストレイアウトそのものの挙動になるため、flexアイテムの幅計算に
   一切依存せず、どの環境でも同じ結果になる。 */
.wmIncidentCard .sizeCommon11 {
  position: relative;
  padding-left: 30px;
  min-height: 22px;
  /* .wmIncidentCard(旧.caution01由来と思われる祖先ルール)の
     line-height:2が継承され、フォントサイズ17.6pxに対し行の高さが
     35.2pxにもなっていたため、タイトルが複数行になった時の行間が
     間延びしないよう明示的に詰めている。 */
  line-height: 1.5;
  /* 2026-08-21、タイトルと下の説明文との余白を段階的に調整
     (0.3em→0.6em→0.9em→広げ過ぎとの指摘で0.7emに縮小)。本番側の
     何らかのルールにmargin-bottomを打ち消されていたため、
     !importantで確実に上書きしている。 */
  margin-bottom: 0.7em !important;
}
/* マークは、テーブルで使っているのと同じ意匠(丸背景+チェック/!)を
   background-imageのSVGデータURIとして複製した::before擬似要素。
   テキストの折り返しに一切影響しない絶対配置のため、タイトルの
   回り込み不具合の心配がない。ステータスごとの色分けは
   .wmIncidentStop/.wmIncidentWarn側で背景画像を出し分けている。 */
.wmIncidentCard .sizeCommon11::before {
  content: "";
  position: absolute;
  left: 0;
  /* 2026-08-21指示により、タイトル文言をマークに対して2px下にずらす
     ため、マーク側を2px上へ(top:2px→0px)。 */
  top: 0;
  width: 22px;
  height: 22px;
  background-size: 22px 22px;
  background-repeat: no-repeat;
}
.wmIncidentStop .sizeCommon11::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23B20000'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wmIncidentWarn .sizeCommon11::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23EE902A'/%3E%3Crect x='10.8' y='5.5' width='2.4' height='8.5' rx='1.2' fill='%23fff'/%3E%3Ccircle cx='12' cy='17.3' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
}
/* Vue側(StatusGridIsland.vueのTIER_ICON_SVG)と同じレンチアイコン。 */
.wmIncidentMaintenance .sizeCommon11::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23235E91'/%3E%3Cg transform='translate(12 12) scale(0.78) translate(-12 -12)'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}
.wmIncidentResolved .sizeCommon11::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23005B40'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ---- 解消確認済みの履歴: スクロール領域 ----
   2026-08-21指示。件数が増える想定のため、全件並べず一定件数だけ
   デフォルト表示し、残りはスクロールで遡れるようにしている。
   PC: 縦スクロール、3件分の高さ目安で打ち切り(max-height)。
   SP: 横スクロール(スナップ付き)、1枚ずつ送れるようカードは
   画面幅の85%に固定。
   .wmIncidentCardSkeleton(遅延読み込み待ちのプレースホルダー)は
   renewal-withdrawal-monitor.jsがIntersectionObserverで
   .wmIncidentHistoryScrollの表示範囲に近づいたのを検知した時点で、
   対応するtemplateタグの中身と差し替える。読み込まれるまでは
   薄緑のシマーアニメーションで「読み込み中」を示す。 */
.wmIncidentHistoryScroll {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  /* 2026-08-24指示により、「最近の投稿」(.wmReportCardScroll)と
     スクロールバーの見た目を揃える(モック時点ではブラウザ標準の
     スクロールバーのままで、投稿側だけ自前のtrack/thumbを描画して
     いたため見た目が違っていた)。widthは縦スクロール(PC)、heightは
     横スクロール(SP、下記メディアクエリでoverflow-xに切り替わる分)
     の太さに対応する。 */
  scrollbar-width: thin;
  scrollbar-color: #C5C5C5 #F0F0F0;
}
.wmIncidentHistoryScroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.wmIncidentHistoryScroll::-webkit-scrollbar-track {
  background-color: #F0F0F0;
  border-radius: 4px;
}
.wmIncidentHistoryScroll::-webkit-scrollbar-thumb {
  background-color: #C5C5C5;
  border-radius: 4px;
}
@media screen and (min-width: 1025px) {
  /* 2026-08-21指示により、PC(縦スクロール)のスクロールバーとカードの
     間を少し空ける。SP(横スクロール)は対象外のため、この幅ぶんの
     padding-rightは末尾に不要な余白を作らないようPC限定にしている。
     2026-08-24指示により、スクロールバーが実際に表示されている
     ときだけ付くよう、Vue側(useScrollbarGutter)で判定したときに
     つく.wmScrollbarGapに限定した(常時付けると、スクロールバーが
     ない状態でも右側に余白が残ってしまうため)。 */
  .wmIncidentHistoryScroll.wmScrollbarGap {
    padding-right: 14px;
  }
}
.wmIncidentHistoryTrack {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.wmIncidentHistoryTrack .wmIncidentCard {
  flex-shrink: 0;
}
.wmIncidentCardSkeleton {
  min-height: 128px;
  background: linear-gradient(90deg, #F3FFE6 25%, #E4F7CF 37%, #F3FFE6 63%);
  background-size: 400% 100%;
  animation: wmSkeletonShimmer 1.4s ease infinite;
}
@keyframes wmSkeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .wmIncidentCardSkeleton { animation: none; }
}
@media screen and (max-width: 767px) {
  .wmIncidentHistoryScroll {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .wmIncidentHistoryTrack {
    flex-direction: row;
  }
  .wmIncidentHistoryTrack .wmIncidentCard {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
  /* 2026-08-24指示により、解消確認済みの履歴が1件だけのときは横スクロール
     自体が発生しないため、85%固定のままだと右側に余白が残ってしまう。
     .wmSingleCard(Vue側でresolvedIncidents.length===1のときだけ付与)が
     付いているときは幅100%で表示する。 */
  .wmIncidentHistoryTrack.wmSingleCard .wmIncidentCard {
    flex: 0 0 100%;
  }
}
/* 「解消確認済みの履歴のスマホ時のカードですが、トップページやレビュー
   ページの横スクロールのボタン等を踏襲してください」とのユーザー指示
   (2026-09-04)により、review/index.htmlの.p-terminated-broker__scroll-arrow
   (static/scss/page/_terminated-broker.scss参照)と同じ見た目の矢印
   ボタンを追加。値は同ファイルのvariable($color-border-soft/
   $shadow-arrow/$color-text-mute/$color-brand-green)をそのまま
   ハードコードしている(このファイルはSCSSではなく手書きの生CSSの
   ため)。表示要否の判定・スクロール処理はVue側
   (renewal-assets/vue-withdrawal-monitor/src/composables/
   useScrollArrows.ts)で行い、スクロールの必要がない(overflowして
   いない)場合はis-hiddenが両方に付いて自動的に隠れる
   (ユーザー指示:「スクロールの必要がない場合は、ボタンは不要です」)。 */
.wmIncidentHistoryArrow {
  display: none;
}
@media screen and (max-width: 767px) {
  .wmIncidentHistoryWrap {
    position: relative;
  }
  .wmIncidentHistoryArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    color: #B0B0B0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  }
  .wmIncidentHistoryArrow:hover {
    color: #4CAF50;
    background-color: #FFFFFF;
    border-color: #4CAF50;
  }
  .wmIncidentHistoryArrow.is-hidden {
    display: none;
  }
  .wmIncidentHistoryArrow svg {
    width: 16px;
    height: 16px;
  }
  .wmIncidentHistoryArrow--prev {
    left: -14px;
  }
  .wmIncidentHistoryArrow--next {
    right: -14px;
  }
}
/* タイトル直後の日付範囲(例: 8月8日〜8月12日)。タイトル本体(太字)より
   目立たないよう、細字・小さめ・グレーにしている。 */
.wmIncidentCard .sizeCommon11 .wmIncidentDateRange {
  font-weight: normal;
  font-size: 0.72em;
  color: #767676;
  margin-left: 10px;
}
@media screen and (max-width: 767px) {
  /* 2026-08-21指示により、SPでは日付部分をタイトルから改行して
     独立した行にする(日付そのものが行の途中で分断されて折り返される
     見た目を避けるため)。ブロック化しても親pのpadding-leftは
     そのまま効くので、タイトル文言の先頭(マークの右側)と同じ位置に
     揃う。 */
  .wmIncidentCard .sizeCommon11 .wmIncidentDateRange {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}
/* タグ群。マークがabsolute配置になったことで、タイトル文言の直後に
   ある.wmIncidentTagsは通常のインライン要素として振る舞う。PCでは
   自然にタイトルと同じ行の末尾に続き(入り切らない時だけ自動折り返し)、
   タイトルとの間はmargin-leftで18pxあけている。タグ同士の間隔はgapで
   作り、.wmTag自体の素のmargin(タグ解説ボックス側でも使っているため
   共通クラス側は変更していない)はこの中だけ0にリセットしている。
   SP(2026-08-21、間隔をもう少し広げる指示で6px→10pxに調整)では
   常にタイトルの下へ改行して表示するため、displayをblockに切り替えて
   強制改行し、親のpadding-left(30px)を打ち消す負のmarginで、タグ行の
   先頭がマークと同じ左端(インデントなし)から始まるようにしている。 */
.wmIncidentCard .sizeCommon11 .wmIncidentTags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  vertical-align: middle;
  margin-left: 18px;
}
.wmIncidentCard .sizeCommon11 .wmIncidentTags .wmTag {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .wmIncidentCard .sizeCommon11 .wmIncidentTags {
    display: flex;
    margin-left: -30px;
    margin-top: 10px;
  }
}
.wmIncidentMeta {
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1em;
}
.wmIncidentMeta > div {
  flex: 1 1 160px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 8px 12px;
}
.wmIncidentMeta p { margin: 0; line-height: 1.5; }
.wmIncidentMeta .wmMetaTxt { color: #666; margin-bottom: 2px; }

/* ---- タグ(小さい色付きラベル)。keyword01(記事下部のタグリスト)と
   同じピル型の見た目だが、リンクではなくspanで意味ごとに色分けしている ---- */
.wmTag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 5px;
  font-size: 11px;
  /* サイズ/文字サイズ/太さはどこでも統一する方針(2026-08-21)なので
     ここでは変更しないが、下のpadding-bottomのみPC表示限定で1px詰める
     指示があったため、下記メディアクエリで上書きしている。 */
  /* 2026-08-21指示により、置き場所(トラブル速報カードの太字見出し内/
     タグ解説ボックス内 等)によって親のfont-weightを継承して太さが
     変わってしまわないよう、normalを明示している。サイズ・文字サイズは
     元々px絶対値指定のため、この明示でどこで使っても完全に同じ見た目になる。 */
  font-weight: normal;
  letter-spacing: normal;
  color: #FFF;
  background-color: #B0B0B0;
  margin: 0 4px 4px 0;
  vertical-align: middle;
}
/* 2026-08-23注記: 以下5色は管理画面「各種設定 > 状況タグ」マスタの
   ブートストラップ初期値(2026-08-23時点)の配色をそのまま手打ちで
   複製した静的スナップショットです。index.html側のタグ解説ボックス
   (.wmTagGlossary)と対になっており、データ駆動で出し分けているわけ
   ではありません。管理画面でタグの追加・削除・改名・色変更を行っても
   自動的には反映されないため、変更した場合はこのルールと上記
   index.htmlの一覧の両方を手動で同期してください(将来的にはデータ
   駆動描画への置き換えを検討)。 */
.wmTagReport { background-color: #8C8C8C; }
.wmTagMultiple { background-color: #EE902A; }
.wmTagOfficial { background-color: #4C8C79; }
.wmTagVerified { background-color: #005B40; }
.wmTagResolved { background-color: #94B31A; }
@media screen and (min-width: 1025px) {
  /* 2026-08-21指示により、PC表示に限りタグ内の下側の余白を1px詰める。 */
  .wmTag { padding-bottom: 1px; }
}
@media screen and (max-width: 767px) {
  /* 2026-08-21指示により、SP表示に限りタグ内の上側の余白を1px広げる。 */
  .wmTag { padding-top: 3px; }
}

/* ---- タグ解説ボックス内のサンプル表示 ---- */
.wmTagGlossaryRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13.76px;
  letter-spacing: 1.35px;
  color: #383838;
}
/* 2026-08-21指示により、PC・SPとも各項目(タグ本体・説明文)は
   改行なしの1行で収める。flex-basis:260pxのままだと1行あたりの項目数
   次第で割り当て幅が内容より狭くなり、タグ内の文字や説明文が途中で
   改行されてしまっていたため、内容幅ぶんだけ確保するauto指定に変更。
   SPでは説明文自体を短縮(「実際に自社口座から出金して確認」→
   「自社口座から出金して確認」等)し、この設定でも1行に収まることを
   確認済み。行全体としては引き続き.wmTagGlossaryRow側のflex-wrapで
   折り返す(SPでは実質1項目=1行)。 */
.wmTagGlossaryItem {
  flex: 0 0 auto;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* ---- リアルタイム出金トラブル報告: 投稿フォーム + 最近の投稿 ----
   2026-08-21、参考モックアップに沿って追加。現時点は静的HTMLプロトタイプ
   でバックエンドがないため、見た目・入力操作感(状況欄の文字数カウンター)
   のみ実装し、実際の投稿保存は行わない(renewal-withdrawal-monitor.js側で
   送信をpreventDefaultするのみ)。
   フォーム部品(.textbox01/.select-wrap+select/.textarea02)と必須バッジ
   (.personalRequired)は本番の共有CSS(structure.css)にある実在クラスを
   そのまま流用し、フォント・色などの見た目だけこのページの他の部品
   (wmBodyTxt等)に合わせて上書きしている。 */
.wmReportSection {
  display: flex;
  /* 2026-08-21、以前はここをstretchにして「左右の列を同じ高さに揃える」
     ことでフォームの高さを上限にしようとしたが、stretchはあくまで
     「双方向に丈の高い方へ揃える」動きのため、投稿一覧側の中身
     (.wmReportCardScroll、flex:1 1 auto)に明確な高さ制約が無いと、
     投稿一覧の自然な合計の高さの方が優先され、フォームより下に
     はみ出してしまう不具合が実機で確認された。flex-startに戻し、
     代わりにJS(renewal-withdrawal-monitor.js側)でフォームの実測高さを
     .wmReportListColに明示的に設定する、片方向の高さ同期に変更した。 */
  align-items: flex-start;
  gap: 24px;
}
/* 2026-09-04追記: 「出金トラブルを報告するとと最近の投稿のボックスも
   角丸にしてください」との指示により追加。枠線自体はVueテンプレート側
   のborderGray01(本家共有CSS)が担うが、角丸は持っていなかった
   (generationA.css除去に伴う喪失ではなく、本家側にも元々角丸指定が
   ないため)。 */
.wmReportFormCol,
.wmReportListCol {
  border-radius: 8px;
}
.wmReportFormCol {
  flex: 0 0 380px;
  box-sizing: border-box;
}
.wmReportListCol {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  /* PC(1025px以上)ではJSがこのheightをフォーム実測値で明示的に
     上書きする(box-sizing:border-boxなのでpadding込みの外側の高さで
     揃う)。見出し行(.wmReportListHead)は固定し、カード一覧
     (.wmReportCardScroll)だけが残り高さいっぱいまで伸びて内部
     スクロールするようにする。 */
  display: flex;
  flex-direction: column;
}
.wmReportCardScroll {
  flex: 1 1 auto;
  /* flexアイテムはmin-height:0がないと中身の高さより縮まらず、
     overflow:autoが効かない(スクロールせず外にはみ出す)ため必須。 */
  min-height: 0;
  overflow-y: auto;
  /* 2026-08-21指示により、スクロールバーと投稿カードの間を
     「解消確認済みの履歴」(.wmIncidentHistoryScroll)と同様に少し
     空ける。こちらはPC/SPどちらも対象。
     2026-08-24指示により、スクロールバーが実際に表示されている
     ときだけ付くよう、Vue側(useScrollbarGutter)で判定したときに
     つく.wmScrollbarGapに限定した(常時付けると、スクロールバーが
     ない状態でも右側に余白が残ってしまうため)。 */
  /* スクロールバーを表示するときの見た目を揃えるため、OS/ブラウザ標準の
     自動的に隠れるスクロールバー(特にmacOSのオーバーレイ表示)に
     頼らず、track/thumbを自前で描画している。Firefox向けは
     scrollbar-width/scrollbar-colorで近い見た目にしている
     (常時表示の強制はブラウザ依存で完全ではない)。 */
  scrollbar-width: thin;
  scrollbar-color: #C5C5C5 #F0F0F0;
}
.wmReportCardScroll.wmScrollbarGap {
  padding-right: 14px;
}
.wmReportCardScroll::-webkit-scrollbar {
  width: 8px;
}
.wmReportCardScroll::-webkit-scrollbar-track {
  background-color: #F0F0F0;
  border-radius: 4px;
}
.wmReportCardScroll::-webkit-scrollbar-thumb {
  background-color: #C5C5C5;
  border-radius: 4px;
}
.wmReportColTitle {
  margin: 0 0 1em;
}
/* ハニーポット(ReportIsland.vue参照)。display:noneではなく画面外配置に
   することで、display:none項目をスキップするタイプのボットにも対応する。
   position:fixedではなくabsoluteなので、ページのスクロール位置に関わらず
   画面内に入り込まない。 */
.wmHoneypotField {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wmFormField {
  margin-bottom: 1.2em;
}
.wmFormLabel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13.76px;
  letter-spacing: 1.35px;
  font-weight: bold;
  color: #383838;
}
.wmRequiredBadge {
  /* 本番の.personalRequiredは元々font-size:0.9em(親フォントサイズ基準)
     だが、親(wmFormLabel)が13.76pxのためこのままでは少し小さくなり
     すぎる。可読性のため固定pxで上書きしている。 */
  font-size: 11px;
}
.wmFormCounter {
  margin-left: auto;
  font-size: 12.16px;
  letter-spacing: normal;
  font-weight: normal;
  color: #767676;
}
.wmFormInput,
.wmFormTextarea {
  /* 本番の.textbox01/.textarea02は幅を明示していないため、フォームの
     カラム幅いっぱいに広げている。フォントサイズ・字間もこのページの
     地の文(wmBodyTxt)に合わせて上書きしている。 */
  display: block;
  width: 100%;
  font-size: 15.136px;
  letter-spacing: 1.35px;
  font-family: inherit !important;
}
.wmFormTextarea {
  height: 130px;
  resize: vertical;
}
.wmFormSelectWrap {
  /* 本番の.select-wrapはselect側にpadding-right:35pxを確保しつつ、
     矢印アイコンのCSS(背景画像等)が見当たらなかった(実機で確認済み、
     appearance:noneで素の矢印も消えるため矢印なしに見える不具合)。
     ::afterで簡易な矢印を自前追加している。 */
  position: relative;
  width: 100%;
}
.wmFormSelectWrap::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #767676;
  pointer-events: none;
}
.wmFormSelect {
  /* 本番の.select-wrap select{font-size:1.06em}の方が詳細度
     (クラス2+要素)で上回り、他の入力欄(15.136px)と揃わなかったため
     !importantで確実に上書きしている。 */
  font-size: 15.136px !important;
  letter-spacing: 1.35px;
  font-family: inherit !important;
}
/* 2026-09-04、ホバー時の挙動をトップページ等の共通ボタン(c-btn--fill、
   object/component/_button.scss)と同じ「枠線を即座に表示+白帯を
   左から右へスライドさせて背景を塗り替え、文字色も反転」に変更した
   (ユーザー指示:「報告を投稿するボタンですが、ホバーのアニメーション
   等を、トップページ等で使われているボタンのデザインや処理にあわせて
   ください。色はいまの緑で大丈夫です」)。ベースの色(#005B40)自体は
   変更していない。isolation:isolateで独立したスタッキングコンテキストを
   作り、白帯(::before、z-index:-1)がこのボタンの外に影響しないように
   したうえで、ボタン自身の文字(<span>等でラップされていない素の
   テキストノード)は通常のインラインコンテンツとして負のz-indexより
   後に描画されるため、c-btnのようにテキストを<span>でラップしなくても
   白帯の上に文字が表示される。 */
.wmFormSubmit {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: #005B40;
  color: #FFF;
  font-size: 15.136px;
  font-weight: bold;
  letter-spacing: 1.35px;
  padding: 12px;
  cursor: pointer;
}
.wmFormSubmit::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: #FFF;
  transition: width 0.15s ease-out;
}
.wmFormSubmit:hover {
  color: #005B40;
  border-color: #005B40;
}
.wmFormSubmit:hover::before {
  width: 100%;
}
/* 送信後のフォーム完了/失敗メッセージ用(ユーザーフィードバック)。
   ボックス自体は出金トラブル速報カードと同じ.wmIncidentCard(枠線+角丸+
   塗り、既存)を流用し、成功時は「解消確認済みの履歴」と同じ緑
   (.wmIncidentResolved、正常のボックスデザイン)、失敗時は速報カードと
   同じ赤(.wmIncidentStop)を組み合わせる。カード本来の文字サイズより
   小さくし、送信ボタンとの余白を確保する。!importantは、既存の共有CSS
   (generationA.css / rank_comp.css)側の詳細度の高いルールに負けない
   ようにするため(.FcRed等、このプロジェクトの既存の対応と同じ理由)。 */
.wmFormFeedback {
  margin-top: 12px !important;
  font-size: 13px;
  line-height: 1.6;
}
/* 2026-09-04修正: 実際のマークアップ(ReportIsland.vue)は
   class="note01 textLayoutNarrow fs08"であり、.wmFormNoteという
   クラスは存在しなかった(命名の行き違いによる死んだルール)。
   本家共有CSSのnote01自体には上余白の指定が無く、直前の送信ボタンと
   くっついて見えていた不具合(ユーザー指摘: 「個人情報・口座番号などは
   記載しないでください。投稿内容は未検証の情報です。こちらの注意書きが
   上のボタンとくっついてしまっているようです」)の原因だった。note01は
   汎用クラスのため、このフォーム内に限定して上余白を追加する。 */
.wmReportFormCol .note01 {
  margin-top: 0.8em;
}
.wmReportListHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1em;
}
.wmReportListHead .wmReportColTitle {
  margin-bottom: 0;
}
/* 「まだ投稿はありません」「現在発生している出金トラブルはありません」等、
   一覧が0件のときの共通デザイン(2026-08-21に投稿一覧向けに追加、
   2026-08-24に出金トラブル速報・解消確認済みの履歴にも共通化)。
   直前の見出し・説明文にくっついて見えていたため、要素自体を<p>から
   <div>に変更した上でmargin-topも明示しているのは、共有CSS側の段落
   向けルールにmargin-topを打ち消されないようにするため。 */
.wmEmptyState {
  margin-top: 1em !important;
  background-color: #F4F4F4;
  border-radius: 4px;
  padding: 1.5em;
  text-align: center;
  color: #767676;
}
/* 2026-09-04追記: 出金トラブル速報(#wm-incidents-active)は、セクション
   自体の背景がグレー(.p-wm__section--gray)になったため、この空状態
   ボックスも同じグレーだと背景に溶けて見えていた(ユーザー指示:
   「現在発生している出金トラブルはありません。の背景は白にして
   ください」)。他の利用箇所(最近の投稿・解消確認済みの履歴、
   いずれも白背景のセクション)はグレーのままのほうがボックスとして
   視認しやすいため、この箇所だけ上書きする。 */
#wm-incidents-active .wmEmptyState {
  background-color: #FFF;
}
/* ---- 投稿カード(サンプル) ----
   2026-08-21追加。項目はフォームの入力内容(ブローカー名/出金方法/
   発生時期/ニックネーム/状況)に対応。ユーザー投稿の未検証情報という
   位置づけのため、出金トラブル速報カード(.wmIncidentCard、検証済みの
   ステータス色分け)とは区別し、色を付けないニュートラルな枠のみの
   カードにしている。 */
.wmReportCardList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wmReportCard {
  /* 2026-08-21指示により、白背景+ボーダーから、ボーダーなしの薄いグレー
     背景に変更。その後、もう少し濃くする指示で#FAFAFA→#F0F0F0、
     さらにほんの少し薄くする指示で#F3F3F3に調整。 */
  background-color: #F3F3F3;
  border-radius: 4px;
  padding: 14px 16px;
  box-sizing: border-box;
}
.wmReportCardHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.5em;
}
.wmReportCardBroker {
  font-size: 15.136px;
  letter-spacing: 1.35px;
  font-weight: bold;
  color: #383838;
}
.wmReportCardMethod {
  /* .wmTagは元々白文字の色付きピルだが、投稿カードでは未検証情報という
     ことが伝わるよう、あえて彩度を抑えたグレー系にしている
     (.wmTagReportの配色をそのまま流用)。 */
  margin: 0;
}
.wmReportCardTime {
  margin-left: auto;
}
.wmReportCardBody {
  margin: 0 0 0.5em;
}
.wmReportCardMeta {
  margin: 0;
}
/* 遅延読み込み待ちのプレースホルダー。「解消確認済みの履歴」の
   .wmIncidentCardSkeletonと同じシマーアニメーション(@keyframes
   wmSkeletonShimmer、上で定義済み)を再利用し、色だけこのカードの
   ニュートラルなグレーに合わせている。 */
.wmReportCardSkeleton {
  min-height: 96px;
  background: linear-gradient(90deg, #F3F3F3 25%, #E4E4E4 37%, #F3F3F3 63%);
  background-size: 400% 100%;
  animation: wmSkeletonShimmer 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wmReportCardSkeleton { animation: none; }
}

@media screen and (max-width: 767px) {
  .wmReportSection {
    flex-direction: column;
  }
  .wmReportFormCol {
    flex-basis: auto;
    width: 100%;
    /* 2026-08-21指示により、SPでは「最近の投稿」を上、フォームを下の
       順に表示。HTML上の並び順(フォーム→最近の投稿)は変えず、
       flexのorderだけで視覚的に入れ替えている。 */
    order: 2;
  }
  .wmReportListCol {
    width: 100%;
    order: 1;
  }
  /* 2026-08-21指示。SPは左右並びではなく縦積みのため、PC用の
     stretch(フォームと高さを揃える)は意味を持たず、代わりに
     見た目上ちょうどよい高さで内部スクロールさせる固定値にしている。
     「解消確認済みの履歴」のSP=横スクロールとは異なり、こちらは
     自由記述の本文で1件あたりの高さがまちまちなため、横スクロールでは
     本文が読みにくくなる。PCと同じ縦スクロール+遅延読み込みに統一した。
     2026-08-21、高さ上限をもう少し狭める指示で420px→320pxに調整。 */
  .wmReportCardScroll {
    max-height: 320px;
  }
}

@media screen and (max-width: 767px) {
  .wmIncidentMeta > div { flex: 1 1 100%; }
}