/* =========================================================================
bs5-overrides.css — Bootstrap 5 移行用の追記／互換スタイル（作業中・要ブラウザQA）
-------------------------------------------------------------------------
・ENABLE_BOOTSTRAP5 が true のときだけ読み込まれる
（_app/_inc/MetaHeader.php・_m/_inc/m-MetaHeader.php）。falseの間は無効。
・方針：BS5では廃止/改名されたBS3クラス(.panel系, .btn-default, .well, .caret,
.input-group-addon, .pull-*, .close 等)を、マークアップを書き換えずに済むよう
ここで再定義する。見た目を変えないため、原則としてBS3.4.1の実CSSを移植している。
・サイト独自スタイル(m-styles.css / shared.css 等)はフラグに関係なく従来どおり読み込まれる
ため、ここはあくまで「BS3フレームワーク相当分の穴埋め」に徹する。
・読込順：BS5(CDN) → このファイル。BS5の後に読むことで確実に上書きできる。
========================================================================= */
/* ============================================================
1) Panel（BS5では廃止 → BS3の見た目を移植）
使用箇所が最多(約545)。アコーディオン/開閉UIの土台。
============================================================ */
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
padding: 15px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
/* パネルの色バリエーション（既定=default。他色が使われていれば必要に応じ追加） */
.panel-default {
border-color: #ddd;
}
.panel-default > .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #ddd;
}
.panel-primary {
border-color: #FF6666;
}
.panel-primary > .panel-heading {
color: #fff;
background-color: #FF6666;
border-color: #FF6666;
}
/* パネルグループ（アコーディオン） */
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
border-top: 1px solid #ddd;
}
/* ============================================================
2) collapse の表示状態クラス
BS3は .in / BS5は .show で「開いている」状態を表す。
BS5本体JSは .show を付けるので開閉は動くが、既存マークアップ/JSに
残る .in 参照でも中身が表示されるよう保険を入れる。
============================================================ */
.collapse.in {
display: block;
}
tr.collapse.in {
display: table-row;
}
tbody.collapse.in {
display: table-row-group;
}
/* ============================================================
3) ボタン（BS3 .btn-default → BS5に無いので移植）
BS5の .btn-secondary相当ではなく、従来の白地グレー枠の見た目を維持。
============================================================ */
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default.disabled,
.btn-default:disabled {
background-color: #fff;
border-color: #ccc;
opacity: .65;
}
/* ============================================================
4) well（BS5廃止 → 移植）
============================================================ */
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
.well-lg {
padding: 24px;
border-radius: 6px;
}
/* ============================================================
5) caret（BS5廃止 → 移植。ドロップダウンの▼）
============================================================ */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* ============================================================
6) input-group-addon（BS5では .input-group-text に改名 → 移植）
BS5の .input-group はflexなので、それに合う形で見た目を再現。
============================================================ */
.input-group-addon {
display: flex;
align-items: center;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px;
}
/* ============================================================
7) float ヘルパー（BS3 .pull-* → BS5 .float-* 相当を移植）
============================================================ */
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
/* ============================================================
8) form-group（BS5廃止 → 下マージンのみ移植）
============================================================ */
.form-group {
margin-bottom: 15px;
}
/* ============================================================
9) モーダルの閉じるボタン（BS5は .btn-close に変更 → BS3 .close を移植）
サイトのモーダルは 形式。
BS5では .close が未定義になり位置/見た目が崩れるため補う。
============================================================ */
.modal .close,
.close {
float: right;
padding: 0;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
background: transparent;
border: 0;
opacity: .2;
cursor: pointer;
}
.modal .close:hover,
.modal .close:focus,
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
opacity: .5;
}
/* BS5のモーダルヘッダーはflexでbtn-closeを想定しているため、旧.closeの位置を安定させる。
===== MODALHEADER-CLOSEORDER-FIX BEGIN =====
BS5のbtn-closeは通常タイトルの後(HTML上でも最後)に置かれる想定だが、本サイトのモーダルは
...
のように、
closeボタンがタイトルより先に書かれている（BS3時代、float:rightで見た目だけ右に
寄せていた名残）。この状態でmargin-left:autoだけを付けると、flexの並び順は
HTML順のままなので「closeボタン自体」が手前で右へ寄ってしまい、その後ろに続く
タイトルがcloseボタンの右側（コンテナ外にはみ出す位置）に追いやられてしまっていた
（例：_m/HousingCategoryDetail.phpの優待内容ポップアップでタイトルが右に偏って表示される）。
order:2でcloseボタンを視覚的に必ず最後（右端）に固定し、HTML上の前後関係に依存しない
ようにする。あわせてmodal-titleをflex:1で残り幅いっぱいに広げ、text-align:centerが
正しく効くようにする。 */
.modal-header .close {
order: 2;
margin: -1rem -1rem -1rem 0.5rem;
}
.modal-header .modal-title {
flex: 1;
}
/* ===== MODALHEADER-CLOSEORDER-FIX END ===== */
/* ============================================================
11) スマホ版ハンバーガーメニューのドロップダウン位置
BS5はドロップダウンをPopperで配置する(inset/transform)ため、
スマホ全幅パネルとして作られたこのメニューがトグル位置基準に
ずれてしまい、画面右外へはみ出して一部しか見えなくなる。
BS3同様に「トグルの右端を基準に全幅で開く」よう固定する。
※対象はヘッダーの#TopMenuのみ(並び替え等の通常ドロップダウンには効かせない)。
[2026/07/28 修正] 「全幅」を固定値width:320pxとして実装していたが、
320pxはiPhone SE(第1世代)相当の非常に狭い画面幅で、現在主流の
スマホ(390px〜430px程度)ではメニューパネルの右側にしか届かず、
左側に隙間ができてしまっていた。この隙間から背後のページ本体
（例：_m/CheckCategoryOne.phpの「取り扱い提携先一覧 並び替え」バー等）
が透けて見え、メニューを開くとページ内容と重なって表示が崩れる
不具合になっていた（スマホ画面20260728.pptx ⑨表示エラー）。
固定px幅をやめ、left:0とright:0の両方を指定してwidth:autoにすることで、
実際のビューポート幅に関わらず常に画面いっぱいに広がるようにする。
============================================================ */
ul#TopMenu li.dropdown > .dropdown-menu {
/* [2026/07/28 再修正1] このルール自体に top:100% と inset の両方を書いており、
ショートハンドのinsetが後勝ちでtop:autoに上書きしてしまい、結局Popperの
静的位置決めに戻って右にはみ出す/隠れる不具合が再発していた。
inset(ショートハンド)を削除し、top/right/left/bottomの個別指定のみにする。 */
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: 0 !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
width: auto !important;
max-width: 100vw !important;
}
/* [2026/07/28 再修正2] left:0/right:0はabsolute要素の「containing block（直近のposition
指定祖先）」基準で計算される。#TopMenuDropdown(li.dropdown)はBootstrapの.dropdown{position:
relative}を継承しており、かつハンバーガーボタン用にwidth:40px !importantで固定しているため、
このliがcontaining blockになってしまい、メニューがそのわずか40px幅（＝画面右端のボタン位置）
を基準にleft:0〜right:0（=幅40px）で展開されていた。さらに他所の.dropdown-menu共通ルール
(min-width:110px)がこの40pxを110pxまで強制的に押し広げるため、結局「ボタン位置(画面右端)から
右へ110px分」だけパネルが展開し、画面外（右）にはみ出して隠れて見えなくなっていた。
liをposition:staticにしてcontaining blockの探索を一段上のheader（position:relative、
実際の画面幅＝320px相当のコンテナ）まで届かせることで、メニューがヘッダー全幅を基準に
正しく展開されるようにする。 */
#TopMenuDropdown.dropdown {
position: static !important;
}
/* ============================================================
11-2) 提携先一覧等の「並び替え」ドロップダウンの位置
#DropdownBtn(並び替えボタン)は div.title.dropdown 内でflexにより右寄せ配置されているが、
BS5のPopperはこのdiv.title.dropdown(containing block)の左上を基準に位置計算しており、
ボタン自体の実位置とズレて、ボタンの左下＋やや離れた位置にメニューが開いてしまっていた
（スマホ画面20260728.pptx関連の指摘：並び替えボタンの真下に出るように修正）。
ハンバーガーメニューと同様、Popperのinline transformに頼らず、CSS側でdiv.title.dropdown
の右端に固定表示することで、右寄せの#DropdownBtnの真下に確実に表示されるようにする。
※対象は div.title.dropdown 配下のみ（CheckPartnerAll.php等の並び替えメニュー専用）。 */
div.title.dropdown > .dropdown-menu {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
margin: 4px 0 0 !important;
}
/* ============================================================
12) .dropdown-menu > li > a の display:block 復元
BS5は.dropdown-itemクラスにdisplay:block/width:100%を指定するが、
本サイトの