/*
 * SC-JAPAN 会員ページ（WizCube）モック — 画面担当 B の追加スタイル
 * 対象: 13 AutoShipStart / 14 AutoShipChange / 15 as_payment_list / 17 OrderSelect /
 *       18 Shopping1_0300 / 19 Shopping1_0200 / 20 OrgChart / 21 Introduce / 22 payment_list / 23 BpAdd
 *       （16 SendSettlementID は案内だけなので読み込まない）
 *
 * 読み込み順: bootstrap.min.css → Google Fonts → member.css → このファイル
 * 色・余白・文字サイズは member.css のトークン（var(--…)）だけを使う。文字は 20px（1rem）未満にしない。
 * 例外: 組織図の描画枠の中（ツリー・拡大縮小・ミニマップ）は現行の見た目を写しているので、現行の色・px をそのまま使う（2026-09-28）。
 * セレクタは画面固有のクラス（as- / item- / org- / limit- など）で絞っている。
 */

/* =========================================================
   共通（この担当の画面で使う小物）
   ========================================================= */

/* 現行の赤字（<font color="red">）の短い注記。先頭の「※」と太字で、色だけに頼らない */
.order-note { margin: .5rem 0 0; color: var(--danger); font-weight: 700; line-height: 1.6; }

/* 項目の中の「〜はこちら」のリンク（入力欄との間をあける） */
.fld .link-list { margin: .75rem 0 0; }
.fld .link-list + .fld-hint { margin-top: .4rem; }

/* 決済ID の入力欄の説明（長い文なので本文の大きさ・太字） */
.as-sublabel { margin-top: 1.25rem; font-size: var(--fs-body); font-weight: 700; }

/* モック表示の切替リンク（現行には無い。空状態⇔ダミーの行 など）。「これはモックです」の帯と同じ見た目 */
.mock-switch {
  margin: 2.5rem 0 0; padding: .4rem 1rem;
  border: 3px dashed var(--warn-line); border-radius: var(--r-field); background: var(--warn-bg);
}
.mock-switch a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--primary-active); font-weight: 700; }

/* =========================================================
   13・14・19 オートシップ
   ========================================================= */

/* 「現在の申込済内容」の表: 中央寄せ。商品が入っている月は太字（「なし」との違いを色に頼らず出す） */
.as-status td { text-align: center; }
.as-status td.is-on { font-weight: 800; }
.as-status-1 { max-width: none; }
/* 19: 列が 2 つだけの表は幅を詰める。表だけ詰めると白い枠（.table-wrap）が幅いっぱいに残って右が空くので、枠ごと詰める */
.table-wrap:has(> .as-status-1) { max-width: 30rem; }
@media (max-width: 767.98px) {
  .is-stack .as-status td { text-align: left; }
  .table-wrap:has(> .as-status-1) { max-width: none; }
}

/* お申込: 「[----▼] 月からのASによる購入を開始します」（現行の並びのまま、プルダウンと文を横に並べる。狭い画面では折り返す） */
.as-month { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.as-month .form-select { width: auto; min-width: 7.5rem; }
.as-month label { margin: 0; font-size: var(--fs-lg); font-weight: 700; }

/* 14: 変更します / 中止します のラジオ */
.as-choice { margin: 1rem 0 0; }
.as-choice-note { margin: 0 0 .5rem 2.2rem; }
/* 押せないラジオ（現行は disabled）。Bootstrap は半透明（opacity .5）にして文字が薄くなる（4.5:1 を割る）ので、
   文字の濃さは保ったまま、枠を破線・地を灰色にして「押せない」ことを示す */
.as-choice .form-check-input:disabled { opacity: 1; background-color: var(--soft); border-style: dashed; }
.as-choice .form-check-input:disabled ~ .form-check-label { opacity: 1; color: var(--ink-2); cursor: not-allowed; }

/* =========================================================
   15・22 一覧（未決済・再決済）
   ========================================================= */

/* 22: 追加可能上限：30ポジ（現行は白地・角丸の枠） */
.limit-box {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 .2rem;
  margin: 0 0 1.5rem; padding: .6rem 1.25rem;
  background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card);
  font-size: var(--fs-lg); font-weight: 700;
}
.limit-box strong { font-size: var(--fs-h2); font-weight: 800; color: var(--primary); line-height: 1.2; }

/* =========================================================
   17 商品購入決済: 商品区分の 2 つのリンクを大きな押せる行に
   ========================================================= */
.order-category a { min-height: 72px; font-size: var(--fs-h3); padding-top: calc((72px - 4px - 1.5em) / 2); padding-bottom: calc((72px - 4px - 1.5em) / 2); }   /* 1 行なら文字が上下の真ん中（member.css の .link-list a と同じ考え方） */
body[data-page="SendSettlementID"] input[type="submit"].btn,
body[data-page="Shopping1"] input[type="submit"].btn {
  min-height: 72px;
  width: 100%;
  max-width: 24rem;
  font-size: var(--fs-h3);
  font-weight: 800;
}
body[data-page="Shopping1"] input[type="submit"].btn:disabled {
  background: var(--paper);
  color: var(--ink-2);
  border: 3px dashed var(--line);
}
body[data-page="Introduce"] input#btnNext.btn,
body[data-page="Shopping2"] button#btnNext.btn,
body[data-page="Shopping3"] input[type="submit"].btn {
  min-height: 72px;
  width: auto;
  font-size: var(--fs-h3);
  font-weight: 800;
}
body[data-page="Shopping2"] .shop-fields dd,
body[data-page="Shopping3"] .shop-fields dd {
  display: block;
}
body[data-page="Shopping2"] #cmbAddress {
  width: 100%;
  max-width: 100%;
}
body[data-page="Shopping2"] #card_pay_options {
  margin-top: .75rem;
}
@media (max-width: 575.98px) {
  :is(body[data-page="Shopping2"], body[data-page="Shopping3"]) .btn-row .btn {
    width: 100%;
    max-width: none;
  }
}
/* style2 を外したあとも、狭い幅で表の項目名が1文字幅に潰れないようにする */
@media (max-width: 767.98px) {
  body[data-page] table.contTable th,
  body[data-page] table.form_box th,
  body[data-page] table.form_box3 th {
    min-width: 7rem;
    white-space: normal;
  }
}

/* =========================================================
   18・19 商品の表（商品名 / 価格（税込） / ポイント / 数量）
   PC は表、767px 以下は 1 商品 1 枚のカード（member.css の .is-stack）
   ========================================================= */
.item-table .col-name { width: 50%; }
.item-table tbody th { white-space: normal; }   /* member.css の行見出しは折り返さない指定。商品名は長いので折り返す */
.item-name { display: block; font-size: var(--fs-lg); font-weight: 800; line-height: 1.5; }
.item-detail { display: block; margin-top: .3rem; font-size: var(--fs-body); font-weight: 500; line-height: 1.6; }
.item-table td.num { font-weight: 700; }
.item-table .qty-cell { width: 9rem; text-align: center; }

/* 数量のプルダウン: 現行はスマホで 32×23px・枠が透明で ▼ も見えなかった。
   枠 2px・▼・高さ 56px・数字は太字で、押せる部品に見せる */
.qty-select { display: inline-block; width: 7rem; min-width: 7rem; font-weight: 800; }
@media (max-width: 767.98px) {
  .is-stack .item-table tbody td.qty-cell { align-items: center; }
  .qty-select { width: 100%; max-width: 10rem; }
}

/* =========================================================
   20・21・23 組織図
   ========================================================= */

/* 条件（ポジション：/ 期間：/ モード：/ レベル：）。PC は 2 列、スマホは 1 列 */
.org-chart-type { margin-bottom: 1.25rem; }
.org-cond { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 768px) { .org-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.org-cond .fld { margin-bottom: 1rem; }
.org-cond .form-select { max-width: 18rem; }

/* 操作ボタン（表示・検索・マップ・タイトル）。スマホは 2 列 × 2 段、576px 以上は横に並べる */
.org-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .25rem 0 1rem; }
.org-actions .btn { width: 100%; }
@media (min-width: 576px) {
  .org-actions { display: flex; flex-wrap: wrap; }
  .org-actions .btn { width: auto; min-width: 9rem; }
}

/* 描画枠: 本文の幅に収める（現行は 1254px で本文の枠からはみ出していた）。ツリーは枠の中だけで縦横にスクロール。
   2026-09-28: 枠の「中」は現行の見た目を写した（assets/orgtree.js の冒頭を参照）。
   ツリーは現行の JS が SVG で描く部分で描き方を変えない前提のため、ここだけは member.css のトークン・20px 以上の決まりを当てず、
   現行の色・大きさ（px 固定）をそのまま使っている */
.org-frame { margin: 1rem 0 2rem; background: #fff; border: 1px solid #aaa; overflow: hidden; }
.org-panel { padding: .75rem; background: var(--paper); border-bottom: 2px solid var(--line-soft); }
.org-panel .inline-row .form-control { flex: 1 1 14rem; }
.org-stage { position: relative; }
.org-scroll { overflow: auto; max-height: 700px; }   /* 現行の描画枠の高さ */

/* 拡大・縮小（現行 #buttonArea）: 枠の左上に重なる赤い角丸の画像ボタン。スクロールしても動かない */
.org-tools { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.org-zoom { display: block; width: 44px; height: 44px; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }
.org-zoom-bg { fill: #d9262b; stroke: #a31419; stroke-width: 1.5; }
.org-zoom-mark { fill: #fff; stroke: #c9c9c9; stroke-width: 1; }
.org-zoom:hover .org-zoom-bg { fill: #e8413f; }
.org-zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ツリー（orgtree.js が描く）。線と ▼ は SVG、ノードは絶対配置 */
.org-canvas { position: relative; margin: 0 auto; }
.org-lines { position: absolute; inset: 0; }
.org-lines line { stroke: #666; stroke-width: 1; }
.org-more { fill: #a6a6a6; }   /* ▼ 下位あり（現行は押すと下位を読み込む） */

/* ノード: 人型アイコン＋「会員番号 / 枝番 / 表示名」の 3 行。現行の SVG の文字（約 11px・等幅風）を写した */
.org-node {
  position: absolute; display: block; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 4px;
  color: #000; text-align: center; line-height: 12px;
  font-family: "MS Gothic", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace; font-size: 11px; font-weight: 400; letter-spacing: .06em;
}
.org-node > span { display: block; white-space: nowrap; font-size: 11px; }
.org-node > .org-id { margin-top: -2px; }
.org-icon { display: block; width: 44px; height: 40px; margin: 0 auto; overflow: visible; }

/* 人型アイコンの塗り分け・丸印・◆（現行の色。意味（凡例）は未取得） */
.org-pawn { fill: #fff; stroke: #8c8c8c; stroke-width: 1.2; }
.is-self .org-pawn { fill: #5cc3f2; stroke: #5cc3f2; }
.is-orange .org-pawn { fill: #f7931e; stroke: #f7931e; }
.is-brown .org-pawn { fill: #7e6a45; stroke: #7e6a45; }
.is-green .org-pawn { fill: #00a06e; stroke: #00a06e; }
.is-purple .org-pawn { fill: #5d56d6; stroke: #5d56d6; }
.org-diamond { fill: #000; }
.org-ring { fill: none; stroke: #f05a24; stroke-width: 2.6; }

/* ミニマップ（現行 #miniMap）: 枠の右下に重なる。黄色の枠が今見えている範囲（スクロールに合わせて動く） */
.org-minimap { position: absolute; right: 0; bottom: 0; z-index: 2; width: min(320px, 60%); background: #fff; border: 1px solid #aaa; }
.org-minimap svg { display: block; width: 100%; height: auto; }
.org-mm-area { fill: #ffff9c; stroke: none; }
.org-mm-line line { stroke: #666; stroke-width: 3; }
.org-mm-more { fill: #a6a6a6; }
.org-mm-dot { fill: #fff; stroke: #8c8c8c; stroke-width: 3; }
.org-mm-dot.is-self { fill: #e60012; stroke: #e60012; }
.org-mm-dot.is-orange { fill: #f7931e; stroke: #f7931e; }
.org-mm-dot.is-brown { fill: #7e6a45; stroke: #7e6a45; }
.org-mm-dot.is-green { fill: #00a06e; stroke: #00a06e; }
.org-mm-dot.is-purple { fill: #5d56d6; stroke: #5d56d6; }
.org-mm-dot.is-diamond { fill: #000; stroke: #000; }

/* 21・23 招待／申請フォーム: 入力できない欄（現行 readonly）は破線の枠と灰色の地で示す。
   legacy.css の input 指定（:not が7つ）の方が詳細度が高いので、同じ :not を足して破線を優先する */
.invite-form input.form-control[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]):not([type="file"]) {
  background-color: var(--soft);
  border-style: dashed;
}

/* 21 招待 URL の発行（2026-09-27）: 組織図のノードを押せる部品（button）にした。押すとその会員の ID・枝が上位者指定ID・枝に入る。
   選んだノードは太い黒枠＋薄い黄の地＋「✓ 選択中」の文字（色だけに頼らない）。aria-pressed も付く */
body[data-page="Introduce"] button.org-node { cursor: pointer; }
body[data-page="Introduce"] button.org-node:hover { background: rgba(92, 195, 242, .18); }
body[data-page="Introduce"] button.org-node:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
body[data-page="Introduce"] button.org-node.is-picked { z-index: 1; background: #fff6b0; box-shadow: 0 0 0 3px #000; }   /* 選択中は黒い枠＋黄の地（ホバー中も優先） */
.org-node > .org-picked { margin-top: 2px; font-size: 12px; font-weight: 700; color: #000; }
.invite-picked { margin: .5rem 0 0; font-weight: 700; color: var(--ink); }
.invite-picked:empty { display: none; }
/* 入力エラーのまとめ（上）。各行は押せるリンクなので 56px */
.invite-errsum ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.invite-errsum a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--danger); font-weight: 800; }
/* 確認・完了表示。長い URL で横にはみ出さない */
.invite-step .dl-table dd { min-width: 0; overflow-wrap: anywhere; }
.invite-step input.form-control[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]):not([type="file"]) { background-color: var(--soft); }
.invite-mail-body { width: 100%; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); font-weight: 500; line-height: 1.7; }

/* 休止復活の申請内容。新規登録フォームのコースカード・商品の本数・ボタン型の選択肢に合わせる */
.choice-group { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.choice-group.is-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.choice {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: 64px; margin: 0; padding: .6rem 1rem;
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px;
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.45; cursor: pointer;
}
.choice:hover { border-color: var(--primary); }
.choice-input { flex: none; width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--primary); cursor: pointer; }
.choice-text { display: block; flex: 1 1 auto; min-width: 0; }
.choice-on { display: none; flex: none; font-size: var(--fs-body); padding: .05rem .45rem; border-radius: 6px; background: var(--primary); color: #fff; }
.choice.is-checked { border: 4px solid var(--primary); background: var(--primary-bg); padding: calc(.6rem - 2px) calc(1rem - 2px); }
.choice.is-checked .choice-on { display: inline-block; }
.choice:focus-within { outline: 4px solid #111; outline-offset: 2px; box-shadow: 0 0 0 8px var(--focus); }
.choice-input:focus-visible { box-shadow: none !important; outline: none !important; }
.course-group { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem 1rem; align-items: start; margin: 0 0 .75rem; }
.course-group-name { margin: 0; min-height: 64px; display: flex; align-items: center; font-size: var(--fs-lg); font-weight: 800; }
.course-picks { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.course-group .plan-panel { grid-column: 1 / -1; margin: .25rem 0 0; }
@media (max-width: 575.98px) { .course-group { grid-template-columns: 1fr; } .course-group-name { min-height: 0; } }
.plan { margin: 0 0 1rem; }
.plan-card {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: start;
  margin: 0; padding: 1rem 1.1rem;
  background: var(--paper); border: 3px solid var(--line); border-radius: 14px; cursor: pointer;
}
.plan-card:hover { border-color: var(--primary); }
.plan-card .choice-input { width: 1.9rem; height: 1.9rem; margin-top: .35rem; }
.plan-card.is-checked { border: 5px solid var(--primary); background: var(--primary-bg); padding: calc(1rem - 2px) calc(1.1rem - 2px); }
.plan-card.is-checked .choice-on { display: inline-block; }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.plan-name { font-size: 1.35rem; font-weight: 800; }
.plan-initial { grid-column: 2; margin: .25rem 0 0; font-size: var(--fs-body); font-weight: 700; }
.plan-card:focus-within { outline: 4px solid #111; outline-offset: 2px; box-shadow: 0 0 0 8px var(--focus); }
.plan-panel {
  margin: -.25rem 0 0 1.25rem; padding: 1.25rem 1rem .25rem 1.25rem;
  border-left: 6px solid var(--primary); background: var(--paper);
}
.pick-list { display: grid; gap: .6rem; margin: .5rem 0 0; }
.pick-row { display: grid; grid-template-columns: 1fr 9rem; gap: .5rem 1rem; align-items: center; padding: .4rem .6rem; border: 2px solid #c9ced6; border-radius: 10px; }
.pick-row label { font-weight: 700; margin: 0; }
.pick-row.is-picked { border-color: var(--primary); background: var(--primary-bg); }
.pick-status {
  margin: .9rem 0 0; padding: .6rem .9rem; border-radius: 10px;
  border: 3px solid #7a5a00; background: var(--warn-bg); color: #3d2c00;
  font-size: var(--fs-lg); font-weight: 800;
}
.pick-status.is-ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
@media (max-width: 480px) {
  .plan-initial { grid-column: 1 / -1; }
  .plan-panel { margin-left: .25rem; padding-left: .9rem; }
}
@media (max-width: 420px) { .pick-row { grid-template-columns: 1fr; } }

/* =========================================================
   決済内容の確認（payment_exec / as_payment_exec）の商品表
   2026-10-14: 旧 form_box3 の中に表を入れ子にしていたのをやめ、.table-wrap で包む。
   スマホで 385px に広がり合計が「56,0」で切れていた（見出し th の min-width:7rem と表の overflow:hidden が原因）
   ========================================================= */
.pay-goods-wrap { margin-bottom: 1.5rem; }
.table-wrap > table.contTable.pay-goods { border: 0; border-radius: 0; overflow: visible; }
.pay-goods td:first-child { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  body[data-page] table.contTable.pay-goods th { min-width: 0; white-space: nowrap; padding-left: .5rem; padding-right: .5rem; }
  body[data-page] table.contTable.pay-goods td { padding-left: .5rem; padding-right: .5rem; }
  body[data-page] table.contTable.pay-goods td:not(:first-child) { white-space: nowrap; }
}

/* 横型組織図: ID をクリックで上位者指定欄に入る（縦型のノードクリックと同じ） */
#chartBody tr.org-pick-row td:nth-child(2) { cursor: pointer; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
#chartBody tr.org-pick-row td:nth-child(2):hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
#chartBody tr.org-pick-row.is-picked td { background: var(--primary-bg) !important; font-weight: 700; }

/* =========================================================
   処理中の表示（#loading）: 画面全体を覆って操作を止める
   2026-10-15: 旧 style2.css の #loading が新デザインに無く、通常の要素として表示されていた。
   fixed で画面全体を覆う（Bootstrap のメニュー 1045・モーダル 1055 より上）。表示は .is-on で切り替える。
   旧 style.css が後から読まれても負けないよう html body を付けて詳細度を上げている
   ========================================================= */
html body #loading {
  display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
  width: auto; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0;
  background: rgba(255, 255, 255, .72); opacity: 1; cursor: wait;
  align-items: center; justify-content: center;
}
html body #loading.is-on { display: flex; }
html body #loadingIcon { position: static; width: 40px; height: auto; margin: 0; opacity: 1; }

/* =========================================================
   決済内容の確認（payment_exec / as_payment_exec）の仕上げ
   2026-10-16: 商品表を list-table 化（セル余白・行の区切り）。単価/数量/小計は右寄せ、合計は小計の列にそろえる。
   振込先は .m-card + .bank-item。戻るボタンは .btn-row。旧インライン style は VB・テンプレートから外した
   ========================================================= */
body[data-page] table.contTable.pay-goods th.num { text-align: right !important; }
table.contTable.pay-goods tfoot th,
table.contTable.pay-goods tfoot td { padding: .6rem; line-height: 1.5; border-top: 3px solid var(--primary); font-weight: 800; }
body[data-page] table.contTable.pay-goods tfoot td { background: var(--primary-bg) !important; font-size: var(--fs-lg); }
.pay-goods .pay-total { white-space: nowrap; }
.pay-msg { margin: 0 0 1rem; text-align: center; color: var(--danger); font-weight: 700; }
.pay-msg:empty { display: none; }
.pay-lead { margin: 0 0 1rem; line-height: 1.8; }
.pay-card-box { margin: 0 0 .5rem; text-align: center; }
.pay-card-box .pay-lead { margin-bottom: .5rem; }
.pay-area form { margin: 0; }
#bank_transfer_section .m-card-title { padding-bottom: .6rem; border-bottom: 2px solid var(--line-soft); }
.bank-list { display: grid; gap: .75rem; margin: 0; }
.bank-item { padding: .9rem 1rem; border: 2px solid var(--line-soft); border-radius: var(--r-field); background: var(--primary-bg); line-height: 1.8; font-weight: 700; }
.bank-item .bank-name { display: block; color: var(--primary); font-size: var(--fs-lg); font-weight: 800; }
.bank-item span { display: block; overflow-wrap: anywhere; }
@media (min-width: 768px) { .bank-list { grid-template-columns: 1fr 1fr; } }
.pay-area .btn-row { margin-top: .5rem; }

/* =========================================================
   スマホ（575px 以下）でボタンを幅いっぱいにする仕上げ（2026-10-16）
   - legacy.css の input[type="submit"] { width:auto; max-width:24rem } が .btn-row > .btn の width:100% に上限を掛け、
     <input type="submit"> だけ 24rem で止まって a.btn（戻る）より狭く左寄りになっていた。スマホでは上限を外す
   - 決済確認（payment_list の行カード）: legacy.css の #list_table3.is-stack table.list-table tbody td（display:grid・2 列）が
     member.css の td.cell-actions { display:block } に勝ち、ボタンが 1 列目（40%）に入って半幅になっていた。ブロックに戻す
   ========================================================= */
@media (max-width: 575.98px) {
  .btn-row > .btn { max-width: none; }
}
@media (max-width: 767.98px) {
  #list_table3.is-stack table.list-table tbody td.cell-actions { display: block; }
}

/* =========================================================
   2026-10-23 先方依頼: 購入履歴詳細（HistoryDetail2.tmp）の表に罫線を付けて見やすくする
   旧形式の thead/行の繰り返し（見出し 3 段＋値 3 段で 1 件）。各セルに罫線、1 件ごとに太線で区切る
   ========================================================= */
body[data-page="HistoryDetail"] #list_table3 table.contTable { border: 2px solid var(--line-soft); border-collapse: separate; border-spacing: 0; }
body[data-page="HistoryDetail"] #list_table3 table.contTable td {
  padding: .55rem .75rem; line-height: 1.5; vertical-align: middle;
  border: 0; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft);
}
body[data-page="HistoryDetail"] #list_table3 table.contTable td:first-child { border-left: 0; }
body[data-page="HistoryDetail"] #list_table3 table.contTable > :first-child > tr:first-child > td { border-top: 0; }
body[data-page="HistoryDetail"] #list_table3 table.contTable thead tr.list_head td {
  background: var(--primary-bg) !important; color: var(--ink) !important; font-weight: 800;
}
body[data-page="HistoryDetail"] #list_table3 table.contTable thead:nth-of-type(3n+1):not(:first-child) td { border-top: 3px solid var(--line); }

/* 2026-10-23 先方依頼: 組織図で人を押したときの右側の詳細（#targetInfo 内 table.map_info）に枠と行の区切り線を付ける */
body[data-page="OrgChart"] #targetInfo:not(:empty) {
  border: 2px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
body[data-page="OrgChart"] #targetInfo table.map_info { width: auto; border-collapse: collapse; background: var(--paper); }
body[data-page="OrgChart"] #targetInfo table.map_info td {
  padding: .35rem .65rem; line-height: 1.4; vertical-align: middle; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-soft);
}
body[data-page="OrgChart"] #targetInfo table.map_info tr:last-child td { border-bottom: 0; }
body[data-page="OrgChart"] #targetInfo table.map_info td:first-child {
  background: var(--primary-bg); font-weight: 700; white-space: nowrap; border-right: 1px solid var(--line-soft);
}

/* 2026-11-02 枠線崩れ・スマホ崩れ修正: テンプレートの height:100% と top:5px で下枠が #mapFrame からはみ出して切れていた。
   中身の高さに合わせ、枠内に収める。スマホでは表が #mapFrame より広くなり左にはみ出していたので幅も枠内に制限する */
body[data-page="OrgChart"] #targetInfo {
  height: auto !important; max-height: calc(100% - 10px); max-width: calc(100% - 10px); box-sizing: border-box; overflow: auto;
}
body[data-page="OrgChart"] #targetInfo table.map_info { width: 100%; margin: 0; }
@media (max-width: 767.98px) {
  body[data-page="OrgChart"] #targetInfo table.map_info { font-size: .85rem; }
  body[data-page="OrgChart"] #targetInfo table.map_info td { padding: .3rem .5rem; }
  body[data-page="OrgChart"] #targetInfo table.map_info td + td { white-space: normal; word-break: break-all; }
}

/* 2026-11-02 WEB登録（Introduce）・BP登録（BpAdd）の組織図にも OrgChart と同じ詳細枠・スマホ対応を適用 */
body[data-page="Introduce"] #targetInfo:not(:empty), body[data-page="BpAdd"] #targetInfo:not(:empty) {
  border: 2px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
body[data-page="Introduce"] #targetInfo, body[data-page="BpAdd"] #targetInfo {
  height: auto !important; max-height: calc(100% - 10px); max-width: calc(100% - 10px); box-sizing: border-box; overflow: auto;
}
body[data-page="Introduce"] #targetInfo table.map_info, body[data-page="BpAdd"] #targetInfo table.map_info { width: 100%; margin: 0; border-collapse: collapse; background: var(--paper); }
body[data-page="Introduce"] #targetInfo table.map_info td, body[data-page="BpAdd"] #targetInfo table.map_info td {
  padding: .35rem .65rem; line-height: 1.4; vertical-align: middle; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-soft);
}
body[data-page="Introduce"] #targetInfo table.map_info tr:last-child td, body[data-page="BpAdd"] #targetInfo table.map_info tr:last-child td { border-bottom: 0; }
body[data-page="Introduce"] #targetInfo table.map_info td:first-child, body[data-page="BpAdd"] #targetInfo table.map_info td:first-child {
  background: var(--primary-bg); font-weight: 700; white-space: nowrap; border-right: 1px solid var(--line-soft);
}
@media (max-width: 767.98px) {
  body[data-page="Introduce"] #targetInfo table.map_info, body[data-page="BpAdd"] #targetInfo table.map_info { font-size: .85rem; }
  body[data-page="Introduce"] #targetInfo table.map_info td, body[data-page="BpAdd"] #targetInfo table.map_info td { padding: .3rem .5rem; }
  body[data-page="Introduce"] #targetInfo table.map_info td + td, body[data-page="BpAdd"] #targetInfo table.map_info td + td { white-space: normal; word-break: break-all; }
}