@charset "UTF-8";

/* ============================================================
   サークル管理画面リニューアル：レイアウト外枠のスタイル

   既存の style.css / custom.css の後に読み込む前提。
   ページ本文のコンポーネント（.card / .btn / .field など）は
   各ページを改修するタイミングで順次追加していく。
   ============================================================ */

:root {
    --pink: #ff6fa6;
    --pink-strong: #f44f91;
    --pink-soft: #fff0f6;
    --ink: #333;
    --muted: #70737a;
    --line: #e7e8eb;
    --bg: #f7f8fa;
    --radius: 14px;
    /* 本文の最大幅。全ページの改修が済んだのでモックと同じ 1280px にした
       （未改修ページが残っている間は、旧 .wrapper と揃えるため 1070px にしてあった） */
    --shell-max: 1280px;
}

/* style.css が article/aside/header/nav/section/footer を一律 float:left にしているため、
   新レイアウトで使う HTML5 要素はここで打ち消す（打ち消さないと横幅が内容分に縮む） */
.topbar, .primary-nav, .drawer {
    float: none;
}

/* 新レイアウトの要素だけに border-box を適用する（既存ページの幅計算に影響させないため） */
.topbar, .topbar .brand, .topbar .top-actions, .topbar .top-actions a, .menu-btn,
.primary-nav, .nav-link,
.page-head, .page-shell,
.subnav, .subnav a,
.drawer, .drawer-head, .drawer-foot, .drawer-foot a {
    box-sizing: border-box;
}

/* ---------- ヘッダー ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 70px;
    /* 本文（.page-shell）と左右を揃えるための余白。
       100vw は縦スクロールバーの幅を含んでしまい、スクロールバーの分だけ
       本文と数px ずれるので、包含ブロック基準の 100% を使う */
    padding: 0 max(20px, calc((100% - var(--shell-max)) / 2));
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0;
    text-decoration: none;
}

    .topbar .brand img {
        display: block;
        height: 38px;
        width: auto;
    }

    .topbar .brand .signs {
        color: var(--muted);
        font-size: 12px;
    }

.topbar .top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 14px;
}

    .topbar .top-actions a,
    .topbar .top-actions > span {
        padding: 9px 11px;
        border-radius: 9px;
        color: var(--muted);
        border-bottom: 0;
        text-decoration: none;
        white-space: nowrap;
    }

    .topbar .top-actions a:hover {
        background: var(--bg);
    }

/* ---------- 1階層目ナビ ---------- */
.primary-nav {
    position: sticky;
    top: 70px;
    z-index: 20;
    display: flex;
    gap: 4px;
    /* 左右の余白は .topbar と同じ考え方（100vw を使わない） */
    padding: 8px max(20px, calc((100% - var(--shell-max)) / 2));
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 13px;
    border-radius: 10px;
    color: #555;
    white-space: nowrap;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 0;
}

    .nav-link:hover {
        background: var(--bg);
    }

    .nav-link.active {
        background: var(--pink-soft);
        color: #c63373;
    }

    .nav-link img.nav-icon {
        display: block;
        width: 17px;
        height: 17px;
    }

/* ---------- ページ見出し・2階層目ナビ ---------- */
.page-shell {
    width: min(var(--shell-max), calc(100% - 40px));
    margin: 0 auto;
}

.page-head {
    background: #fff;
}

    .page-head .page-shell {
        padding: 18px 0 0;
    }

#page .page-shell {
    padding: 4px 0 0;
}

.page-title {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 10px 0 18px;
}

.subnav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 3px 0 15px;
    border-bottom: 1px solid var(--line);
}

    .subnav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 11px;
        border-radius: 9px;
        color: #676b72;
        font-size: 14px;
        white-space: nowrap;
        text-decoration: none;
        border-bottom: 0;
    }

        .subnav a:hover {
            background: var(--bg);
        }

        .subnav a.active {
            background: var(--pink-soft);
            color: #c63373;
            font-weight: bold;
        }

/* 未設定項目に出す注意アイコン */
.subnav-warn {
    width: 1em;
    height: 1em;
}

/* 3階層目。2階層目のすぐ下に、一回り小さいタブとして並べる */
.subnav.secondary {
    margin-top: -8px;
    padding-bottom: 16px;
    border-bottom: 0;
}

    .subnav.secondary a {
        padding: 7px 10px;
        background: #f0f1f3;
        font-size: 13px;
    }

        .subnav.secondary a.active {
            background: var(--pink-soft);
        }

/* まだ到達していない手順（リンクにしない項目） */
.subnav .steps-done {
    padding: 7px 10px;
    border-radius: 9px;
    background: #f0f1f3;
    color: #9a9da2;
    font-size: 13px;
    white-space: nowrap;
}

/* ---------- 未ログイン画面（ログイン・サークル登録・パスワード再設定など） ---------- */
body.auth {
    background: var(--bg);
}

    body.auth #page {
        background: transparent;
    }

    /* 既存の #page は min-height:100% / padding-bottom:100px を持っていて、
       内容が少ないログイン画面ではフッターが大きく下に押し出されてしまう */
    body.auth #page.auth-page {
        min-height: 0;
        padding-bottom: 0;
    }

.auth-topbar {
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
}

.auth-shell {
    width: min(var(--shell-max), calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 56px;
    box-sizing: border-box;
}

    .auth-shell .page-title {
        margin: 0 0 20px;
        text-align: center;
    }

/* 入力フォームなど、中身を中央の細いカラムに収めたいときに使う */
.auth-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
}

    /* 規約表示など、520pxでは窮屈な画面用 */
    .auth-card.wide {
        max-width: 760px;
    }

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 22px;
    font-size: 14px;
}

/* base.css 側の打ち消しが必要な点が3つある：
   1. `footer { display:none }`（全フッターを隠している。改修済みページでは効かないよう
      base.css 側で body:not(.renewal) に絞ってある）
   2. `footer#bottom`（float・グレーのグラデーション）
   3. `footer#bottom { height:30px }` */
footer#bottom.auth-footer {
    display: block;
    position: static;
    float: none;
    clear: both;
    width: 100%;
    height: auto;
    padding: 6px 20px 28px;
    background: none;
    border-top: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
}

    footer#bottom.auth-footer p {
        margin-bottom: 0;
        text-shadow: none;
    }

@media (max-width: 760px) {
    .auth-topbar {
        padding: 0 15px;
    }

    .auth-shell {
        width: 100%;
        padding: 20px 14px 40px;
    }
}

/* ---------- スマホ用ドロワー ---------- */
.menu-btn {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: #f4f5f7;
    font-size: 21px;
    cursor: pointer;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: none;
    width: min(86vw, 360px);
    padding: 16px;
    background: #fff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .18);
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform .2s;
}

    .drawer.open {
        transform: translateX(0);
    }

.drawer-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: none;
    background: rgba(0, 0, 0, .35);
}

    .drawer-backdrop.open {
        display: block;
    }

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 14px;
    border-bottom: 1px solid var(--line);
}

    .drawer-head img {
        display: block;
        height: 32px;
        width: auto;
    }

    .drawer-head button {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 9px;
        background: #f1f2f4;
        font-size: 24px;
        cursor: pointer;
    }

.drawer .nav-link {
    margin: 4px 0;
}

.drawer-foot {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    display: grid;
}

    .drawer-foot a {
        padding: 12px;
        color: #555;
        text-decoration: none;
        border-bottom: 0;
    }

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
    .topbar {
        height: 62px;
        gap: 12px;
        padding: 0 15px;
    }

        .topbar .brand img {
            height: 32px;
        }

        .topbar .top-actions {
            display: none;
        }

    .primary-nav {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .drawer {
        display: block;
    }

    .page-shell {
        width: 100%;
    }

    /* 左右パディングは .page-head .page-shell / #page .page-shell と
       詳細度を揃えないと効かない（#page はID指定のため） */
    .page-head .page-shell {
        padding: 14px 14px 0;
    }

    #page .page-shell {
        padding: 4px 14px 0;
    }

    .page-title {
        font-size: 23px;
        margin-top: 7px;
    }

    .subnav a {
        display: flex;
        align-items: center;
        min-height: 42px;
    }
}

/* ============================================================
   ページ本文のコンポーネント（改修済みページだけに適用）

   ページ側の Razor で ViewData["Renewal"] = true; を指定すると
   _Layout が body に renewal クラスを付け、以下が有効になる。
   未改修のページには一切適用されないので、画面ごとに順次
   切り替えていける。

   セレクタは全て body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page)
   で始めている。理由は2つ：

   1. 既存 style.css の #page / #page a はID詳細度を持つので、
      クラスだけのセレクタでは勝てない
   2. colorbox と jQuery UI は開くときにダイアログの中身を body 直下へ
      移動するため、#page だけを見ているとダイアログ内だけ旧デザインに戻る

   :is() の詳細度は引数のうち最も高いもの（= #page のID）と同じなので、
   対象を増やしても詳細度は変わらない。
   全ページの改修が済んで旧CSSを削れる段階になれば、この長い接頭辞は外してよい。
   ============================================================ */

body.renewal {
    background: var(--bg);
    /* base.css 側で html, body { height: 100% } になっている（フッタを
       画面下部に固定するための古いハック）。height は「最低保証」ではなく
       固定値なので、1画面分を超えて中身が続くページでは、はみ出した部分の
       背景に body の色（薄灰）が乗らず、下地の html の白がそのまま見えて
       しまい、ちょうど1画面分の高さのところで薄灰→白の境目ができていた。
       min-height に変えることで「最低1画面分」は保ちつつ、中身がそれより
       長ければちゃんと追従して伸びるようにする */
    height: auto;
    min-height: 100%;
}

    /* 改修済みページは本文エリアを背景色（薄灰）に戻し、白はカード側で出す */
    body.renewal .page-head {
        background: transparent;
    }

    body.renewal #page {
        background: transparent;
        /* base.css の #page は float:left が付いたまま（旧レイアウトの名残で、
           今のデザインでは横に並ぶ相手が無いので意味を持たない）。
           float の付いた要素は、親の height:auto の計算に入らない
           （いわゆる「フロートの高さ崩れ」）。これが上の body の height:auto と
           組み合わさり、実際には「1画面分より下で薄灰→白の境目ができる」
           直接の原因だった。float を外して通常のブロックに戻す */
        float: none;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) *,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) *::before,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) *::after,
    body.renewal .page-head * {
        box-sizing: border-box;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .page-shell {
        padding-bottom: 64px;
    }

    /* 既存の #page a（水色＋下線）を打ち消す */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) a {
        color: #1971c2;
        border-bottom: 0;
        text-decoration: none;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) h2 {
        margin: 0;
        font-size: 18px;
    }

/* ---------- 余白・グリッド・汎用 ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .section {
    margin: 0 0 22px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .section-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: bold;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .space-top {
    margin-top: 18px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .two-col-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 頒布物詳細: 左に頒布物情報、右にピコケット（旧画面の 5:3）。狭い幅では縦に積む */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .product-cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
    gap: 0 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .product-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .muted {
    color: var(--muted);
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .strong {
    font-weight: bold;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .page-note {
    color: var(--muted);
    font-size: 14px;
    font-weight: normal;
}

/* grid/flex の子は既定で stretch するため、隣の要素が長いと
   その分だけ下に空白ができる（ダッシュボードの「ピコ通販安心支払い」が
   「対応状況」の高さに引き伸ばされていた等）。中身なりの高さにしたい
   要素に付ける */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .no-stretch {
    align-self: start;
}

/* ---------- カード ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(33, 35, 38, .07);
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card + .card {
        margin-top: 18px;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    font-weight: bold;
}

/* 開閉できるカード（発送代行プロジェクトの「設定～通販サイト公開までの流れ」）。
   以前はヘッダー内の小さな「表示する」リンクしか押せず、そもそも開閉できる
   ことも分かりにくかった。ヘッダー全体を押せるようにし、開閉状態を
   シェブロンで示す（.collapsible-rows の山形と同じ見た目）。
   .card-head は既に display:flex; justify-content:space-between なので、
   ::after を付けるだけで右端に置ける */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-head.toggle-head {
    cursor: pointer;
    user-select: none;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-head.toggle-head::after {
        content: "";
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        border-right: 2px solid #9aa0a6;
        border-bottom: 2px solid #9aa0a6;
        transform: rotate(45deg);
        transition: transform .15s ease;
    }

    /* 開いている間は上向きにする */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-head.toggle-head.is-open::after {
        transform: rotate(-135deg);
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-body {
    padding: 18px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    background: #fafafa;
    border-top: 1px solid var(--line);
    /* 長いボタンと並ぶと、狭い画面で短い方が1文字ずつ縦に潰される。
       横に並びきらないときは折り返して段にする */
    flex-wrap: wrap;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-footer > .btn {
        min-width: fit-content;
    }

/* ---------- 数値サマリ ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat {
    display: block;
    padding: 17px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    /* .stat は a タグでも使う（クリックして一覧へ飛べる）。
       全体の a { color: #1971c2; } を打ち消して、リンクではなく
       数値サマリとして見えるようにする */
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) a.stat:hover {
        border-color: var(--pink);
        box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat .label {
        color: var(--muted);
        font-size: 13px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat .value {
        margin-top: 5px;
        font-size: 27px;
        font-weight: bold;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat .value small {
            color: var(--muted);
            font-size: 14px;
            font-weight: normal;
        }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .kpi-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    /* 見出しと値が1行に収まらないときは、縮めずに折り返して2行にする。
       縮めると狭い画面で「発送サービス」が1文字ずつ縦に並ぶ */
    flex-wrap: wrap;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .kpi-line:last-child {
        border-bottom: 0;
    }

    /* 見出し的な行（ラベルが <strong>）にぶら下がる内訳の行に付ける。
       字下げして、どの行の内訳なのかを見た目で分かるようにする。
       内訳の行自体は主要な情報ではないので、通常の行より小さく・詰めて
       表示する（ダッシュボードの「対応状況」は内訳込みで9行ある） */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .kpi-line.sub {
        padding: 6px 0 6px 16px;
        font-size: 13px;
    }

/* ---------- ステータスバッジ ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    /* 短いラベルなので折り返さない。折り返すと、幅の狭い列（発送代行の一覧の
       「状態」列は 56px 指定）で1文字ずつ縦に並んでしまう */
    white-space: nowrap;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .status.green {
        color: #207a4b;
        background: #edf9f2;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .status.blue {
        color: #25699a;
        background: #edf7ff;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .status.gray {
        color: #686b70;
        background: #f1f2f4;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .status.amber {
        color: #8a6414;
        background: #fff8e7;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .status.red {
        color: #b83232;
        background: #fff0f0;
    }

/* ---------- お知らせ・注意書き ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.65;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .alert.info {
        color: #355d76;
        background: #edf7ff;
        border-color: #cce8fb;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .alert.warn {
        color: #74531d;
        background: #fff8e7;
        border-color: #f1d594;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .alert.danger {
        color: #833939;
        background: #fff0f0;
        border-color: #f1c6c6;
    }

/* reset.css がリストの装飾を消しているので、本文中のリストだけ戻す */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-body ul,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .hint-box ul,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .alert ul {
    margin: 6px 0 0;
    padding-left: 1.3em;
    list-style: disc;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px;
    background: #ecfbff;
    border: 1px solid #c8e6f7;
    border-radius: 13px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .banner-copy strong {
        font-size: 17px;
    }

/* ---------- ボタン ----------
   旧CSSの .btn は color / border / background に !important を付けていた
   （背景画像 btn-overlay.png も指定）。詳細度では勝てないため以前はこちらも
   !important で打ち消していたが、base.css 側で body:not(.renewal) に絞ったので
   その必要はなくなった。

   colorbox と jQuery UI のダイアログは開く際に中身を body 直下へ移動するので
   #page の外に出る。ダイアログ内のボタンも新デザインにするため、
   #cboxLoadedContent / .ui-dialog も同じ詳細度で対象に含めている。 */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 旧CSSの .btn が持っていた指定。これまでは旧CSS側から効いていたが、
       そちらを未改修ページ限定にしたのでこちらで持つ */
    position: relative;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    color: #4f5359;
    background: #fff;
    border: 0;
}

    /* <input type="submit"> などは value が子要素にならないので、flex コンテナに
       すると「アイテムが1つも無い箱」の扱いになり、padding 分（33px）まで
       潰れて文字が消える。入力要素だけ従来の組み方に戻す */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input.btn {
        display: inline-block;
        text-align: center;
    }

    /* 表の中のボタンは、画面が狭いと列ごと詰められて1文字ずつ縦に並んでしまう
       （発送通知一覧の「発送通知」が 1024px でそうなっていた）。
       ボタンのラベルは短いので折り返さない */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table .btn {
        white-space: nowrap;
    }

    /* 表の中のボタンは、そのまま置くと行の高さを決めてしまう（44px）。
       PC幅では小さくして行を詰める。スマホ幅はカードに積み直したうえで
       指で押すので、元の大きさのままにしておく */
    @media (min-width: 761px) {
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table .btn {
            padding: 6px 12px;
            font-size: 13px;
        }
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.primary {
        color: #fff;
        background: var(--pink-strong);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.secondary {
        color: #4f5359;
        border: 1px solid #d9dce0;
    }

        /* 送料設定画面の SettingCarriage.js が、選べないボタンに
           style="background-color:#ebebe4" を直接書き込む。
           それを打ち消すために !important が要る（旧CSS対策ではない）。
           ただし .btn-green（選択中）まで白にすると、下の白文字と重なって
           ボタンの文字が消えるので、そちらは対象から外す
           （問い合わせの未対応／対応中／対応済みがこれに当たる） */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.secondary:not(.btn-green) {
            background: #fff !important;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.blue {
        color: #fff;
        background: #3e73c9;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.success {
        color: #fff;
        background: #42a55d;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.danger {
        color: #fff;
        background: #d94a4a;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.ghost {
        color: #666;
        background: transparent;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn:hover,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn:focus {
        opacity: .88;
        outline: none;
        box-shadow: none;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn:active {
        transform: translateY(1px);
    }

    /* 幅いっぱいに広げるボタン（ログインなど） */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.block {
        width: 100%;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .button-row,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .wide-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}


/* ---------- フォーム ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .field {
    margin-bottom: 17px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .field label,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .field-label {
        display: block;
        margin-bottom: 7px;
        font-size: 14px;
        font-weight: bold;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .field small,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .help {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
    }

/* ---------- 見積り内容の明細欄（Shipping/Project・EndProject の「内容」「頒布内容」） ----------

   頒布物の明細やノベルティの内訳がずらずら並ぶ欄なので、本文は少し小さくして
   密度を上げる。合わせて、内訳の小見出し（ノベルティ、その他の頒布内容）は
   素の <b> のままだと本文既定の16pxになり、親の見出し「頒布内容」（14px）より
   大きく見えてしまっていたので、.sub-label で同じ大きさに揃える。 */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .estimate-content {
    font-size: 14px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .estimate-content .sub-label {
        display: block;
        margin: 10px 0 4px;
        color: #666;
        font-size: 14px;
        font-weight: bold;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .input,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) select,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=text],
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=password],
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=email],
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=tel],
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=url],
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=number],
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=date] {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    color: #333;
    background: #fff;
    border: 1px solid #d9dce1;
    border-radius: 9px;
    outline: none;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea {
    min-height: 120px;
    resize: vertical;
}

    /* メール本文など、長文を編集する textarea に付ける */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea.tall {
        min-height: 300px;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.7;
    }

    /* .tall ほどではないが既定の120pxだと狭い textarea に付ける
       （通販ルール設定の「その他の条件」等。スマホ幅は1行の文字数が減り
       行数が増えるため、既定の高さだと入力済みの文字がはみ出しやすい） */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea.tall-s {
        min-height: 160px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .input:focus,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) select:focus,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea:focus,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input:focus {
        border-color: var(--pink);
        box-shadow: 0 0 0 3px rgba(255, 111, 166, .13);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input:disabled,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) select:disabled,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea:disabled {
        color: #6b6f75;
        background: #f4f5f7;
    }

    /* 送料設定で固定値を見せているだけの欄。同じ画面で選ばれていない送料パターンの欄
       （Shop/Carriage.cshtml の setcheck が付ける rgb(235,235,228)）と同じ灰色にそろえる */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) :is(.tokumeitensou_notice, .hassou_standard_notice) :is(input, textarea)[readonly] {
        background: rgb(235, 235, 228);
    }

/* 入力欄とボタンを横に並べる用途。上の width:100% より後ろに置いて打ち消す
   （詳細度は同じなので、順序が逆だとボタンが次の行へ折り返してしまう） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .button-row > input,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .button-row > select,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .button-row > .input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* ボタンはラベルが1行に収まる幅を下回らない。入力欄と同じ行に並ぶと縮められて、
   「郵便番号から住所を検索」が1文字ずつ縦に並んでしまう。
   入りきらないときは .button-row の flex-wrap で次の行へ送られる。
   スマホ幅でボタンを横いっぱいに伸ばす指定（flex:1）とは両立する */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .button-row > .btn,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .wide-actions > .btn {
    min-width: fit-content;
    max-width: 100%;
}

/* 横幅を内容に合わせたい入力欄（金額・個数など）に付ける */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .input-auto {
    width: auto;
    min-width: 0;
}

/* 入力欄の横幅を抑えるユーティリティ。max-width なので .button-row の中でも効く */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .w-s {
    max-width: 220px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .w-m {
    max-width: 380px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(240px, 360px);
    gap: 26px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .hint-box {
    padding: 14px 16px;
    color: #557084;
    background: #edf7ff;
    border: 1px solid #d8edf9;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.65;
    /* 補足なので、隣の列の高さに合わせて引き伸ばさない。
       グリッドの子は既定で stretch するため、入力欄の並ぶ列が長いと
       箱の下半分が空白になる（売上管理の「精算予約」で顕著だった） */
    align-self: start;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice-list {
    display: grid;
    gap: 10px;
}

/* 択一の設定項目（通販ルール設定の取引条件など）で、選択肢が
   排他的な1グループであることが分かるよう、個別カードの枠線をやめて
   外側1つの枠にまとめ、選択肢の間は罫線で仕切る */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice-list.grouped {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice-list.grouped .choice {
        border: none;
        border-radius: 0;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice-list.grouped .choice + .choice {
        border-top: 1px solid var(--line);
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) label.choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    /* チェックボックス・ラジオ用の指定。input 全部にすると、
       .choice の中に置かれたテキスト入力欄まで 20px に潰れて中身が読めなくなる
       （サイトデザイン設定の「転送先URL」がこれで見えなくなっていた） */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice input[type="checkbox"],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-top: 4px;
        accent-color: var(--pink-strong);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice strong {
        display: block;
        margin-bottom: 3px;
    }

    /* ラジオの右側（説明＋入力欄）を残り幅いっぱいに広げる */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice > div {
        flex: 1;
        min-width: 0;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .check-row,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) label.check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .check-row input {
        width: 20px;
        height: 20px;
        accent-color: var(--pink-strong);
    }

/* 2〜3個のラジオを横に並べる（幅が足りなければ折り返す） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .check-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .check-inline > .check-row {
        margin: 0;
    }

/* 小さめのボタン（1行に収めたい追加ボタンなど） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.btn-compact {
    min-height: 30px;
    padding: 3px 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* 送り状出力ダイアログ（#invoicedialog）は設定項目が多く、標準の .field / .check-row の
   余白のままだと縦にかなり長くなってしまう。このダイアログに限って余白を詰める。
   #invoicedialog を足して詳細度を上げ、通常の .field / .check-row より確実に勝たせている */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #invoicedialog .field {
    margin-bottom: 10px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #invoicedialog .check-row {
    min-height: 30px;
}

/* ---------- 一覧テーブル ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .table-wrap {
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .data-table th {
        padding: 9px 10px;
        color: #5d6168;
        background: #f3f4f6;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        text-align: left;
        /* 列名は短いので折り返さない。折り返すと、画面が狭いときに
           「安心ブースト」が1文字ずつ縦に並ぶ。
           改行したい見出しはビュー側で <br /> を入れている */
        white-space: nowrap;
    }

/* DataTables の件数表示やページ送りは float で並ぶ。旧CSSの .dataTables_wrapper は
   その float を包んでいないので、表のあとに続くカード（CSV出力など）が
   float の脇に押しこまれて数十pxまで細くなる。ここで包んで断ち切る */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_wrapper {
    display: flow-root;
}

    /* 番号・金額・状態のように短い値が入るセルに、ビュー側から付けるクラス。
       付けないと、画面が狭いとき DataTables が列を詰めて1文字ずつ縦に並ぶ。
       スマホ幅でカードに積み直したときは戻す（下のメディアクエリ） */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .data-table td.nowrap {
        white-space: nowrap;
    }

    /* 一覧は1画面に何件見えるかが効くので、行の高さは詰めておく。
       余白を広げると、2行になるセル（日付と時刻など）のある表で
       1行 100px を超えて一覧として眺められなくなる */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .data-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
        font-size: 14px;
        line-height: 1.45;
    }

        /* 日付の下に添える時刻など。行の高さを押し上げないよう詰める */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .data-table td .help {
            margin-top: 0;
            line-height: 1.35;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .data-table tr:last-child td {
        border-bottom: 0;
    }

/* ---------- jQuery DataTables のコントロール類 ----------
   一覧画面（問合せ・注文・売上・発送代行など）が DataTables を使っているので、
   件数メニュー・検索欄・ページャも新デザインに合わせる */
/* カードの中に裸で置くテーブル（.table-wrap で包まないもの）用 */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.boxed {
    min-width: 0;
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* 「項目名 | 値」の2列テーブル。旧 .tranparent.four_r_custom1 の置き換え。
   入れ子のテーブルに波及しないよう子セレクタで1階層目だけを狙う */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table {
    min-width: 0;
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr > td:first-child,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr > th:first-child {
        width: 160px;
        color: var(--muted);
        background: #fafafa;
        font-size: 13px;
        vertical-align: top;
        text-align: left;
        /* width は table-layout:auto では目安でしかなく、値の側の最小幅が大きいと
           この列が最小幅（＝1文字）まで潰される。768px で注文者情報の
           「メールアドレス」が 13px 幅の7行になっていた。
           nowrap にすると、この列に長い文章が入っている表（注文詳細のヤマト発送）
           で表ごと画面からはみ出すので、下限だけを決める */
        min-width: 7em;
    }

    /* .card-head の直下に置いてカード本文そのものにする場合。
       カードの枠と二重にならないよう、テーブル自身の枠と角丸を消す */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table.flat {
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_wrapper {
    padding: 14px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_length,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_filter,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_info,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_paginate {
    margin: 8px 0;
    color: var(--muted);
    font-size: 13px;
}

    /* base.css の古い .dataTables_paginate は「前へ/次へ」の画像アイコン2個だけを
       想定した幅（42px）・float:right のままで、ページ番号を並べる今の
       DataTables の見た目に合っていない。42px に収まらないボタンが縦に
       積み上がって、しかもテキストは font-size:0 で消されていた。
       さらに width:auto のままだと、左に float している件数表示（.dataTables_info）
       の横に並ぼうとして残りの幅に押し込められ、そこでも折り返しが起きる。
       clear:both で件数表示の下に回り込ませ、幅いっぱいを使えるようにする */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
        width: 100%;
        clear: both;
        float: none;
    }

    /* 件数表示（.dataTables_info）も、ページングを横に並べるための
       width:60%・float:left が base.css に残ったままだった。
       ページングはもう下の行に回り込むので、こちらも幅いっぱいを使わせて
       画面が狭いときに変な位置で折り返さないようにする */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_info {
        width: 100%;
        float: none;
    }

    /* 幅100%の入力欄スタイルが効いてしまうので、ここだけ内容幅に戻す */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_filter input,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_length select {
        width: auto;
        min-height: 38px;
        margin-left: 6px;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_paginate .paginate_button {
    display: inline-block;
    /* base.css の古い .paginate_button は、前へ/次へを19px四方のアイコン
       画像だけで見せる前提で、font-size:0・width/height:19px・float:left
       になっている。今は「Previous」「Next」を文字で見せる作りなので、
       文字サイズもボックスのサイズも他の番号ボタンと揃うようにリセットする */
    font-size: 13px;
    width: auto;
    height: auto;
    float: none;
    margin-left: 0;
    padding: 6px 11px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #555;
    cursor: pointer;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_paginate .paginate_button.current {
        background: var(--pink-soft);
        border-color: var(--pink-soft);
        color: #c63373;
        font-weight: bold;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .dataTables_paginate .paginate_button.disabled {
        opacity: .4;
        cursor: default;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .empty {
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

/* スマホでテーブルの代わりに出すカード列。PCでは隠す */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-cards {
    display: none;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .search-panel {
    margin-bottom: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .search-panel .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin: 10px 0;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .pill-box {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .pill-box label {
        padding: 7px 11px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 999px;
    }

/* ---------- 設定項目リスト ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .settings-list {
    display: grid;
    gap: 12px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .settings-row {
    padding: 15px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .settings-row .row-title {
        margin-bottom: 5px;
        font-weight: bold;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .danger-zone {
    border-color: #f3c6c6;
}

/* カードの外に単独で置く保存バー（モック準拠） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-footer.space-top {
    border: 1px solid var(--line);
    border-radius: 12px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .settings-row textarea {
    min-height: 72px;
}

/* 利用規約のスクロールボックス（既存 .box-kiyaku の枠線を新デザインに寄せる） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box-kiyaku {
    height: 250px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.7;
}

/* ---------- 頒布物の画像テーブル（Product/Index・Create・CreateProductStep2） ---------- */
/* 画像のドラッグ&ドロップが tr.imagerow / td.imagedrop を parents()/find() で辿っているため、
   テーブル構造のまま残してある。ここでは見た目だけ整える */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.imagetable .center {
    text-align: center;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.imagetable td {
    vertical-align: middle;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.imagetable .updown .btn {
        padding: 4px 7px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.imagetable img.image {
        max-width: 110px;
        max-height: 110px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.imagetable input[type=file] {
        width: auto;
        max-width: 100%;
    }

/* ---------- ピコケットのタグ（Product/Index・Create・CreateProductStep3） ---------- */
/* .tag-list[type] / .tag-btn / .TagId / .tag-remove-btn は js/picoket/tag.js が参照する */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 7px 0 12px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 12px;
    background: var(--pink-soft);
    border: 1px solid #f3c4d9;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
}

    /* タグの種類名と「＋ 追加」を1行にして、その下にタグを並べる */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-field-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px 10px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-field-head .field-label {
            margin-bottom: 0;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-field .tag-list {
        margin: 6px 0 0;
    }

    /* 削除ボタンは画像（32px）を隠して文字の × に差し替える。onclick は .tag-remove-btn に付いている */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-list .tag-btn {
        padding-right: 5px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-btn .tag-remove-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 20px;
        height: 20px;
        color: var(--muted);
        border-radius: 50%;
        cursor: pointer;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-btn .tag-remove-btn::before {
            content: "×";
            font-size: 16px;
            line-height: 1;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-btn .tag-remove-btn:hover {
            color: var(--ink);
            background: rgba(0, 0, 0, .08);
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .tag-btn .tag-remove-btn img {
            display: none;
        }

/* ---------- やり取り履歴（発送代行・注文・問い合わせで共通の .message 構造） ---------- */
/* `.message` の**直下**に `.messageheader` / `.messagebody` / `.digestbody` が並ぶ構造を
   JS が children() で辿っている（$(...).parents(".message").children(".messagebody, .digestbody")）。
   入れ子を1段でも深くすると開閉が動かなくなるので崩さないこと。
   元の見た目は custom.css（Shift-JIS）にあるため、ここで上書きしている */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messagelist {
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    line-height: 1.6;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messagelist .message {
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messagelist .message:last-child {
            border-bottom: 0;
        }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messageheader {
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.msg_customertocircle {
    background: #fff8e7;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.msg_circletocustomer {
    background: #edf7ff;
}

/* ピコ通販からのメッセージ（Direction が 1 でも 2 でもないもの＝ Pico2Message /
   Pico2Cancel / Pico2RevertCancel）。注文者・サークルのどちらとも違う色にして、
   見落とされないようにする */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.msg_system {
    background: #efebfa;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messagebody {
    padding: 11px 13px;
    border-top: 1px dotted var(--line);
    line-height: 1.75;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.digestbody {
    max-height: 2.8em;
    margin: 0;
    padding: 8px 13px;
    overflow: hidden;
    color: var(--muted);
    background: #fafafa;
    font-size: 12px;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messageframe {
    padding: 0;
    background: transparent;
    border-top: 0;
}

/* 注文・問い合わせの履歴は .messagelist > .messageframe という入れ子（発送代行は .message）。
   開閉が `#frameid > .messagebody` という直下セレクタなので、
   .messageframe の直下に .messageheader / .messagebody が並ぶ構造を崩さないこと */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messagelist .messageframe {
    border-bottom: 1px solid var(--line);
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.messagelist .messageframe:last-child {
        border-bottom: 0;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) div.msgcontent {
    line-height: 1.75;
}

/* 対応状況ボタン。JS が btn-green を付け外しして選択中を表すので、
   新デザインでも選択状態が分かるようにしておく */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .inquirystatus {
    margin-top: 10px;
}

/* 旧CSSの「押せないボタン」。クラスが1つ多いぶん、上の .btn より優先される */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.btn-disabled {
    color: #a8abb1;
    background: #f1f2f4;
    border-color: var(--line);
    cursor: default;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn.btn-green {
    color: #fff;
    background: var(--pink-strong);
    border-color: var(--pink-strong);
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .allopenclose {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
    font-size: 13px;
}

/* ---------- デザイン選択（Shop/Design） ---------- */
/* .box-designitem / .box-designitem-selected / .design-selected-label は custom.css（Shift-JIS）
   で定義されていて直接編集できないので、ここで新デザインに上書きする。
   クラス名自体は setDesign() が付け外ししているので変更しないこと */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box-designitem {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* 見本画像と説明が1行に収まらないときは折り返す。
       折り返さないと狭い画面で説明文が1文字ずつ縦に並ぶ */
    flex-wrap: wrap;
    width: auto;
    margin-bottom: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    /* 見本画像の隣の説明。flex-basis が 0 のままだと、狭い画面で
       0 まで縮んで「【非推奨】レギュラー」が1文字ずつ縦に並ぶ。
       下限を決めておけば、入らないときは上の flex-wrap で次の行へ送られる */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box-designitem > div {
        min-width: 150px;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box-designitem-selected {
    background: var(--pink-soft);
    border: 2px solid var(--pink-strong);
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .design-selected-label {
    color: var(--pink-strong);
}

/* ---------- メール本文プレビュー（Circle/Preview*、Shop/Mail） ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mail-preview {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.8;
    word-break: break-all;
}

/* ---------- colorbox で開くダイアログの中身 ---------- */
/* 幅指定だけは body.renewal を付けずグローバルにする。
   共通パーシャルのダイアログ（Partial_AboutPicoket など）は未改修ページからも開かれるため、
   そこで幅が決まらないと colorbox のサイズが崩れる。
   .dialog-body / .dialog-actions は新規クラスなので旧CSSと衝突しない */
.dialog-body {
    width: min(560px, 86vw);
    padding: 4px;
}

    .dialog-body.wide {
        width: min(760px, 88vw);
    }

/* colorbox は開くたびに #cboxLoadedContent の width/height を
   px 単位（整数）で計算してインライン指定するが、中身（.dialog-body）の
   実際のレンダリング結果はコンマ数px単位でずれることがある。
   このわずかな差だけで overflow:auto によるスクロールバーが出て、
   さらにスクロールバー自体が幅を食って横方向にも連鎖してしまう。
   スクロール自体は残しつつ（本当に長い内容は動かせるように）、
   見た目のバーだけを非表示にして、この連鎖が起きないようにする */
#cboxLoadedContent {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    #cboxLoadedContent::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* ---------- ダッシュボード ---------- */
/* style.css が section を float:left にしているので打ち消す。
   .news_div > section の入れ子は Home/Index.cshtml の initNews() が前提にしている構造 */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div {
    margin-bottom: 14px;
}

/* お知らせは件数が増えがちなので、1枚の枠にまとめた行リストにして省スペース化する
   （個別の角丸ボックス＋隙間をやめる） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div section {
    float: none;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    /* 中身（news.Detail）はDB由来の任意HTMLなので、display は block のまま触らない */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert {
        margin-bottom: 0;
        padding: 7px 12px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-left: 3px solid transparent;
        border-radius: 0;
        font-size: 13px;
        line-height: 1.5;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert:last-child {
            border-bottom: 0;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert.info {
            border-left-color: #8ec5ea;
            background: #fff;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert.warn {
            border-left-color: #e0a83c;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert.danger {
            border-left-color: #d64545;
        }

        /* 本文中に p / br が入っていても行間が空きすぎないようにする */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert p {
            margin: 0;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .news_div .alert ul {
            margin-top: 2px;
        }

/* 「◯◯を開く」のような補助リンクを値の右に少し離して置く */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .kpi-line .page-note {
    margin-left: 10px;
}

/* ccchart は canvas に固定幅を描画するので、狭い画面では縮めて収める */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #chart {
    max-width: 100%;
    height: auto;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .banner img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 頒布物リストは productlist.css（Shift-JIS のため直接編集しない）で
   枠線と背景色が付いている。カードの中に置くので打ち消す */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list_div {
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

/* custom.css の table.home 系は table 限定のセレクタで、div では効かない。
   ダッシュボードでグループ編集・削除ボタンや非公開行を隠すために同じ指定を補う */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .home .draggable,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .home .editgroup,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .home .deletegroup,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .home .cansale_false,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .home #product_list_div .remark {
    display: none;
}

/* ---------- 頒布物一覧の行（Partial_ProductListTemplate） ---------- */
/* productlist.css（Shift-JIS のため直接編集しない）は float ベースの組み方をしている。
   ここで flex に置き換える。productlist.css は各ビューの本文中で読み込まれて
   この renewal.css より後になるので、#page と #product_list の2ID分で勝たせている */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list {
    padding: 0;
    list-style-type: none;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .product_item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 画面が狭いときは、右側の情報の箱を次の行へ送る。
       送らないと名前の欄だけが縮んで読めなくなる */
    flex-wrap: wrap;
    padding: 9px 10px;
    background: #fff;
    border-top: 1px solid var(--line);
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .product_item:after {
        content: none;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .product_li[is_top='1'] .product_item {
        border-top: 0;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .product_li.indent {
        padding-left: 10px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .product_li.onsale_true .product_item {
        background: #fcfffc;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li {
        margin: 0;
        background: #fff;
    }

/* セパレータ行 */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .group_li {
        background: #fbf7fa;
        border-bottom: 1px solid var(--line);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .group_li .product_item {
        background: transparent;
        border-top: 0;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .show_div {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 10px;
        min-width: 0;
        font-weight: bold;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .group_li .imagediv {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        background-position: center;
        background-size: cover;
        border-radius: 6px;
    }

/* 並べ替えハンドルと行内ボタン */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .draggable {
        flex: 0 0 auto;
        margin: 0;
        cursor: move;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .draggable img {
            width: 22px;
            vertical-align: middle;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .group_li.firstli .draggable img {
        opacity: .2;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .listactions {
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
        margin-left: auto;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .group_li .btn {
        height: auto;
        padding: 5px 12px;
        font-size: 12px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .deletegroup {
            float: none;
        }

/* 頒布物行の各ブロック */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li .imagediv {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        text-align: center;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li .imagediv img {
            max-width: 48px;
            max-height: 48px;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li .publishdiv {
        flex: 0 0 auto;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li .namediv {
        flex: 1 1 auto;
        /* 頒布物名が読める幅を確保する。ここを 0 にすると、画面が狭いときに
           名前だけが縮んで1文字ずつ縦に並ぶ（右の箱は縮まないため）。
           入りきらない分は .product_item の折り返しで次の行へ送る */
        min-width: 220px;
        max-width: none;
        line-height: 1.5;
        word-break: break-all;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li .content-box {
        display: block;
        float: none;
        flex: 0 0 auto;
        height: auto;
        margin: 0;
        padding: 6px 10px;
        background: #fafafa;
        border: 1px solid var(--line);
        border-radius: 8px;
        line-height: 1.5;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .box-picoket {
            width: 86px;
            text-align: center;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .box-count {
            width: 176px;
        }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .countrow {
                display: flex;
                justify-content: space-between;
                gap: 6px;
                font-size: 12px;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .countvalue {
                color: #46e;
            }

        /* li を挟んでいるのは、上の `#product_list li .content-box`（display:block）と
           詳細度を揃えて後勝ちさせるため。揃えないと display:flex が効かず、
           「出品中／在庫／変更」が横並びにならず縦に積まれてしまう */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list li .box-sale {
            display: flex;
            gap: 10px;
            align-items: center;
            /* 旧CSSの .content-box に width:99% があり、この箱だけ幅指定が無かったため
               行のほぼ全幅を占めて、頒布物名の欄が 0px まで潰れていた。
               中身なりの幅にして、余りを名前の欄へ回す */
            width: auto;
        }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .salecell {
                text-align: center;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .salecell + .salecell {
                    padding-left: 10px;
                    border-left: 1px solid var(--line);
                }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .listlabel {
        color: var(--muted);
        font-size: 12px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .listvalue {
        font-size: 13px;
        font-weight: bold;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .listvalue.stock {
            display: inline-block;
            width: 34px;
            text-align: right;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .listvalue.resalerequest {
            display: inline-block;
            width: 20px;
            text-align: right;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .prefixstock {
        color: var(--muted);
        font-size: 12px;
    }

/* 並べ替え中のプレースホルダ（jQuery UI sortable） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list .ui-state-highlight {
    height: 2.4em;
    border: 2px dashed var(--pink-strong);
    background: #fff;
}

/* 一覧の上に出る注意書き */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list_div .remark {
    padding: 8px 14px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) #product_list_div .remark .draghint {
        width: 15px;
        vertical-align: sub;
    }

/* ---------- 注文詳細のタスク欄（Order/Index の .task-card） ----------
   カード（白）→ タスク（旧CSSの灰色の矩形）→ 注意書き（色付きの箱）と
   箱が三重に入れ子になっていて、どこが操作できる場所なのか分からなかった。
   箱を一重に減らし、タスクの状態で描き分ける。

   - 既定             … 記録・情報（通常の濃さ、線なし）
   - .task-action     … 今できる操作（左に細い縦線）
   - .content-box-closed … まだできない／もう操作しない（グレーの小さい行）

   .content-box-closed はもともとビューが持っていたクラス。折りたたみ用の
   つもりだが administry.js が <section> を探すのに markup は <div> なので
   一度も効いていない。「今は操作の対象ではない」という意味だけを使う */

/* base.css の HTML5 シム（article, aside, header, … { float: left }）が
   .content-box の見出しにも効く。旧 style.css は .content-box header に
   width:100% を持っていて float を打ち消していたが、その行は base.css へ
   まとめるときに落としてしまった。そのため見出しが 64px の細い列になり、
   本文がその横に回り込んで重なって見える状態になっていた */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .content-box > header {
    float: none;
    width: auto;
}

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box {
    display: block;
    width: auto;
    margin: 0;
    padding: 15px 0 4px;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .card-body > .content-box:first-child {
        padding-top: 0;
        border-top: 0;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box h3 {
        margin: 0 0 3px;
        font-size: 15px;
    }

/* タスクの区切りは .content-box の上線で付けるので、ビューの <hr /> は要らない */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .card-body > hr {
    display: none;
}

/* 「この操作はこういうものです」という説明文が .alert info（青い箱）で
   書かれている。注意ではないので箱をやめて見出し直下の地の文にし、
   色付きの箱は本当に注意が要るもの（warn / danger）だけに残す */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box .alert.info {
    margin: 3px 0 11px;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    background: none;
    border: 0;
}

    /* ビュー側が <small style="color:#666"> を挟んでいる箇所があるので、
       文字色はそちらに任せてサイズだけ合わせる */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box .alert.info small {
        font-size: 13px;
    }

/* 今できるタスク。左に細い縦線を引いて「操作する場所はここ」と示す */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box.task-action {
    position: relative;
    padding-left: 13px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box.task-action::before {
        content: "";
        position: absolute;
        top: 15px;
        bottom: 8px;
        left: 0;
        width: 3px;
        border-radius: 3px;
        background: var(--pink-strong);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .card-body > .content-box.task-action:first-child::before {
        top: 0;
    }

/* まだできない／もう操作しないタスク。見出しごとグレーに落として、
   今できることと区別する。
   ※ 完了した操作の記録（入金確認済み・発送連絡済など）はここに含めない。
     日付や追跡番号を読む必要があるので、通常の濃さのまま残す */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .task-muted {
    padding: 10px 0 9px;
    color: var(--muted);
    font-size: 12px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .task-muted h3 {
        color: var(--muted);
        font-size: 14px;
        font-weight: normal;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .task-muted .alert {
        margin: 1px 0 0;
        padding: 0;
        color: var(--muted);
        font-size: 12px;
        background: none;
        border: 0;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .task-muted .alert small {
            color: var(--muted);
            font-size: 12px;
        }

/* 入力欄はタスクの幅いっぱいに（ビュー側の width:100% は padding を含まない） */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .task-card .content-box :is(textarea, input[type="text"]) {
    box-sizing: border-box;
}

/* ---------- 開閉できるQ&Aブロック（details/summary。JSなしで動く） ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) details.faq {
    margin-bottom: 10px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) details.faq > summary {
        padding: 13px 0;
        font-weight: bold;
        cursor: pointer;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) details.faq[open] > summary {
        border-bottom: 1px solid var(--line);
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) details.faq .faq-item {
        padding: 12px 0;
        border-bottom: 1px solid #f0f1f3;
        font-size: 14px;
        line-height: 1.7;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) details.faq .faq-item:last-of-type {
            border-bottom: 0;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) details.faq .faq-item > b {
            display: block;
            margin-bottom: 4px;
        }

/* ---------- 手順表示（サークル登録フローなど） ---------- */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .steps span {
        padding: 6px 12px;
        border-radius: 999px;
        background: #f1f2f4;
        color: #686b70;
        font-size: 13px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .steps span.current {
            background: var(--pink-soft);
            color: #c63373;
            font-weight: bold;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .steps span.done {
            background: #edf9f2;
            color: #207a4b;
        }

/* 入力幅を抑えたいカード本文に付ける */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-body.narrow {
    max-width: 520px;
}

/* ---------- 既存ヘルパーが出力する要素の見た目合わせ ----------
   AdministryValidationSummary() は .box.box-error / .box.box-error-msg を、
   MVC の検証は .field-validation-error / .input-validation-error を出力する。
   ビュー側を書き換えずに済むよう、ここで新デザインに寄せる。 */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box.box-error,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box.box-error-msg {
    margin-bottom: 12px;
    padding: 14px 16px;
    color: #833939;
    background: #fff0f0;
    border: 1px solid #f1c6c6;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.65;
}

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .box.box-error-msg ul {
        margin: 0;
        padding-left: 1.2em;
    }

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .field-validation-error {
    display: block;
    margin: 6px 0 0;
    color: #c0392b;
    font-size: 13px;
}

/* input[type=...] 側のセレクタと詳細度を揃えるため要素名を付けている */
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input.input-validation-error,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) select.input-validation-error,
body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea.input-validation-error {
    background-color: #fff6f6;
    border-color: #e09a9a;
}

/* ---------- gap で間隔を作るコンテナの直下は上下 margin を持たせない ----------

   下記は子を gap で並べるためだけのコンテナなので、直下の要素が上下の margin を
   持っていると gap と二重になる。行の中で1つだけ下にずれて上端が揃わなくなったり
   （例：.grid-2 の2枚目のカードが .card + .card の margin-top で 18px 下がる）、
   検索条件の行間だけ広がったりする（例：.filters の中の .field の margin-bottom）。

   左右の margin は用途があるのでそのままにする。
   子セレクタなので、コンテナの中に置いた要素の「内側」の余白には影響しない。

   このブロックはコンポーネント定義より後に置くこと。
   詳細度が同じルール（.field など）に後勝ちで効かせる必要がある。 */

body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) :is(.card-head, .card-footer, .button-row, .wide-actions, .dialog-actions, .listactions, .filters, .pill-box, .steps, .tag-list, .grid-2, .grid-3, .form-grid, .two-col-choice, .stat-grid, .settings-list, .choice-list) > * {
    margin-top: 0;
    margin-bottom: 0;
}

    /* .card + .card は詳細度が上（クラス2個）なので個別に打ち消す */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) :is(.grid-2, .grid-3, .form-grid, .two-col-choice) > .card + .card {
        margin-top: 0;
    }

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .page-shell {
        padding-bottom: 56px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .grid-2,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .grid-3,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .form-grid,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .two-col-choice {
        grid-template-columns: 1fr;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* 表は自分の最小幅より狭くならないので、中身が縮まないと表ごと画面からはみ出す。
       グリッドの子（min-width:auto）が表の最小幅まで広がってしまうため、
       1列にしただけでは収まらない。 */

    /* 注文番号のような途中で改行できない英数字の連なりが最小幅を押し上げる。
       overflow-wrap は anywhere でないと最小幅の計算に効かない（break-word では縮まない） */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table :is(th, td) {
        overflow-wrap: anywhere;
    }

    /* 旧マークアップに style="width: NNNpx" と直接書かれた入力欄。
       指定幅がそのままセルの最小幅になり、表ごと画面からはみ出す原因になる
       （例：注文詳細の発送元氏名。入れ子のテーブルに 100px の入力欄が2つ並んでいる）。
       インラインスタイルを上回る必要があるので !important を使う。
       属性セレクタで絞っているので、刷新側で幅を決めている .input.w-s などには影響しない */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) :is(input[type="text"], select)[style*="width"] {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    /* 狭い画面では2列に並べる余地がない。値の側に縮まない中身（注文詳細の
       ヤマト発送の説明ブロックなど）があると、ラベル列がその分だけ削られて
       38px になり「発送用QRコードを取得」が22行になっていた。
       スマホでは2列をやめて、ラベルの下に値を置く */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr > :is(td, th) {
        display: block;
        width: auto;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr > :is(td, th) {
            border-bottom: 0;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr {
            border-bottom: 1px solid var(--line);
        }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr:last-child {
                border-bottom: 0;
            }

        /* 通常時の width:160px / min-width:7em は詳細度で上なので、ここで打ち消す */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.kv-table > tbody > tr > :is(td, th):first-child {
            width: auto;
            min-width: 0;
            padding-bottom: 0;
            background: none;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card {
        border-radius: 13px;
        box-shadow: none;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-head,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-body {
        padding: 14px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding: 10px 14px;
        box-shadow: 0 -8px 22px rgba(0, 0, 0, .05);
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-footer .btn.primary,
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .card-footer .btn.success {
            flex: 1;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .btn {
        min-height: 48px;
    }

    /* iOS で入力時に拡大されないよう 16px 以上にする */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .input,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) select,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) textarea,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=text],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=password],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=email],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=tel],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=url],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=number],
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) input[type=date] {
        min-height: 50px;
        font-size: 16px;
    }

    /* .form-grid が1列になると入力欄の真下に来るので、26px の gap の分だけ離しすぎない */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .hint-box {
        margin-top: 4px;
    }

    /* ---------- 一覧表を行ごとのカードに積み直す ----------

       スマホ幅ではどうやっても横に収まらない一覧表を、行ごとのカードに見せる。

       行を別マークアップで二重に出す（下の .mobile-cards）方式は取っていない。
       同じフォーム部品が2つ出て両方が送信されてしまう表（発送管理のチェックボックス等）や、
       DataTables が管理している表（並べ替え・ページングの結果とカード列がずれる）があるため。
       表のまま CSS で積み直せば、DOM は表のままなのでどちらも壊れない。

       セルの見出しは _Layout.cshtml のスクリプトが <thead> から data-label に写す。
       stack-table クラスもそのスクリプトが付ける（thead に列名がある表だけが対象）。 */

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .table-wrap.stack-table {
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table {
        display: block;
        min-width: 0;
        background: transparent;
        /* DataTables の表示件数・検索欄は float で並ぶ。表が display:block になると
           その float が先頭の数行に食い込み、セルが右に寄って細くなる */
        clear: both;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > thead {
            display: none;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody,
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr,
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td {
            display: block;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr {
            margin-bottom: 5px;
            padding: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
        }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr:last-child {
                margin-bottom: 0;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td {
                padding: 7px 0;
                border-top: 1px solid #f0f1f3;
                border-bottom: 0;
                font-size: 14px;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td:first-child {
                    border-top: 0;
                }

                /* 中身が無いセルは、見出しだけが残らないよう畳む */
                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td:empty {
                    display: none;
                }

                /* 列名のあるセルは「見出し｜値」の2列に。
                   列名の無いセル（操作ボタンの列など）は幅いっぱいのまま。

                   grid や flex で2列にすると、セルの中に要素が複数あるとき
                   （日付と時刻、名前と補足など）それぞれが別の列・行に散ってしまう。
                   見出しを float にして本文側に padding を取る昔ながらの組み方なら、
                   セルの中身が何であっても値は右側の1列に収まる。 */
                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td[data-label] {
                    display: flow-root; /* float した見出しを内側に収める */
                    padding-left: 106px;
                    text-align: left !important; /* style="text-align: right" が直接書かれているため */
                }

                    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td[data-label]::before {
                        content: attr(data-label);
                        float: left;
                        width: 96px;
                        margin-left: -106px;
                        color: var(--muted);
                        font-size: 13px;
                    }

                /* DataTables は並べ替え中の列に色を付ける。
                   積んだ状態では1行まるごとが色帯になって見えるので消す */
                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td.sorting_1 {
                    background: transparent;
                }

                /* カードに積み直した表では、セルが画面幅いっぱいを使えるので折り返してよい。
                   PC幅で列が詰まるのを防ぐために付けた nowrap をここで戻す
                   （戻さないと「要入金確認(振込通知あり)」がカードからはみ出す） */
                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table > tbody > tr > td.nowrap {
                    white-space: normal;
                }

                /* ---------- 行数の多い表は、まとめだけ出してタップで開く ----------

                   売上管理の精算履歴は1行に7項目あり、積み直すと1行 300px になる。
                   長く利用しているサークルは繰越や設定不備で行数が増えるので、
                   全部出すと画面が延々と続く。

                   まとめに出す列は _Layout.cshtml のスクリプトが row-summary、
                   残りを row-detail として付ける（列数は data-summary-cols、既定2）。
                   まとめの行は見出しを外して1行に並べ、日付とバッジだけが見える形にする。 */

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr {
                    position: relative;
                    padding-right: 36px;
                    cursor: pointer;
                }

                    /* 開閉の向きを示す山形。開くと上向きになる */
                    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr::after {
                        content: "";
                        position: absolute;
                        top: 19px;
                        right: 16px;
                        width: 8px;
                        height: 8px;
                        border-right: 2px solid #9aa0a6;
                        border-bottom: 2px solid #9aa0a6;
                        transform: rotate(45deg);
                    }

                    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr.is-open::after {
                        top: 23px;
                        transform: rotate(-135deg);
                    }

                    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr > td.row-summary {
                        display: inline-block;
                        padding: 0 10px 0 0;
                        border-top: 0;
                        vertical-align: middle;
                    }

                        /* まとめの行は見出しを出さない（日付とバッジで読み取れる） */
                        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr > td.row-summary[data-label] {
                            padding-left: 0;
                        }

                            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr > td.row-summary[data-label]::before {
                                content: none;
                            }

                    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr > td.row-detail {
                        display: none;
                    }

                    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr.is-open > td.row-detail {
                        display: block;
                    }

                        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr.is-open > td.row-detail[data-label] {
                            display: flow-root;
                        }

                        /* まとめの行と、開いた中身のあいだを空ける */
                        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.collapsible-rows > tbody > tr.is-open > td.row-summary + td.row-detail {
                            margin-top: 10px;
                        }

    /* ---------- 列の多い一覧は「一覧」の見た目のまま積む（.list-cards） ----------

       注文一覧・発送管理・問い合わせ管理は列が多く、上の「1セル＝1行」で積むと
       注文一覧で1件 493px になる。812px の画面に1.6件しか入らず一覧にならない。

       そこで表に .list-cards を付け、セルに役割のクラスを付けて
       1件を3〜4行の塊に組み直す。並べ替えは flex の order でやるので
       DOM は表のまま＝DataTables（並べ替え・ページング・一括選択）は壊れない。

       セルに付けるクラス（ビュー側）
         card-check   1行目の左端。チェックボックス
         card-title   1行目の見出し。太字で大きめ（注文番号・名前）
         card-badge   1行目に添える状態
         card-right   1行目の右端。右寄せ（合計金額・日付）
         card-line    単独で1行。幅いっぱい（注文者・件名）
         card-text    単独で1行。小さく灰色（本文の抜粋）
         card-sub     下の行に小さく灰色で横並び（日時・出力日時）
         card-note    下の行に通常の文字で横並び（件数・バッジ）
         card-action  最後の行。右寄せ（ボタン）
       修飾
         card-label   data-label（列名）を値の前に小さく置く
         card-quiet   card-right を控えめに（太字をやめて灰色・小さく）
         card-join    セル内の <br> を「 / 」に読み替える
         card-hide    狭い幅では出さない
         is-none      中身が「-」「--」しか無いので畳む */

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /* 320px でも「チェック・注文番号・状態・金額」が1行に収まる間隔 */
        column-gap: 6px;
        row-gap: 4px;
        margin-bottom: 8px;
        padding: 11px 14px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td {
            order: 7; /* 役割クラスの付いていないセルは下の行へ流す */
            padding: 0;
            border-top: 0;
            font-size: 13px;
            line-height: 1.45;
        }

            /* 見出しは基本的に出さない（値だけで読み取れる並びにしてある）。
               単独では何の値か分からないセルにだけ card-label を付ける */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td[data-label] {
                padding-left: 0;
                text-align: left !important;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td[data-label]::before {
                    content: none;
                }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-label[data-label]::before {
                    content: attr(data-label) " ";
                    float: none;
                    width: auto;
                    margin: 0 2px 0 0;
                    color: var(--muted);
                    font-size: 12px;
                }

            /* 中身が「-」「--」しか無いセルは畳む（ビュー側で is-none を付ける） */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.is-none,
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-hide {
                display: none;
            }

            /* ---- 1行目 ---- */

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-check {
                order: 1;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-title {
                order: 2;
                font-size: 15px;
                font-weight: 600;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-badge {
                order: 3;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-right {
                order: 4;
                margin-left: auto; /* 1行目の右端に寄せる */
                font-size: 15px;
                font-weight: 600;
                white-space: nowrap;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-right.card-quiet {
                    color: var(--muted);
                    font-size: 12px;
                    font-weight: normal;
                }

            /* ---- 2行目以降 ---- */

            /* 幅いっぱいなので、必ずここで改行される */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-line {
                order: 5;
                width: 100%;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-text {
                order: 6;
                width: 100%;
                color: var(--muted);
                font-size: 12px;
            }

            /* 添え物は 320px でも同じ行に収まるよう小さめにする */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-sub {
                order: 7;
                color: var(--muted);
                font-size: 12px;
            }

                /* 見出しを付けてまで出す添え物（入金・送り状・宛名ラベルの日時）は
                   日付だけで足り、秒まで出すと1つで画面幅の半分を使ってしまう。
                   時刻の span には style="display: inline" が直接書かれている */
                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-sub.card-label > .help {
                    display: none !important;
                }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-note {
                order: 8;
            }

            /* margin-left:auto なので、前の行に余裕があればそこの右端に、
               入らなければ自分の行の右端に落ちる */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-action {
                order: 9;
                margin-left: auto;
                text-align: right !important;
            }

            /* ---- セルの中身 ---- */

            /* <br> で2行になっているものは1行に畳む（日付と時刻、バッジと状態など）。
               本文の抜粋（card-text）だけは改行をそのまま生かす */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td:not(.card-text) > br {
                display: none;
            }

            /* 畳んだあと、続きの要素が前の文字とくっつかないようにする
               （日付と時刻、テスト注文バッジと状態など） */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td:not(.card-text) > br + * {
                margin-left: 4px;
            }

            /* 名前とニックネームのように、2行だったものを1行に並べるセル */
            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.stack-table.list-cards > tbody > tr > td.card-join > br + *::before {
                content: " / ";
                color: var(--muted);
            }

    /* ---------- 頒布物画像の登録表 ----------

       列見出しが無く、1枚の画像を2行（rowspan あり）で組んでいるので、
       上の stack-table（行＝カード）の仕組みには乗らない。
       画像1枚ぶんの区切り線を置き、1行目（.imagerow）は grid でコンパクトにまとめる。
       td は並び順（updown / 枚目 / サムネ / ファイル / 削除）で配置している。
       グリッドの列: サムネ | 枚目表示・ファイル選択・削除 | 並び替えボタン
       ドロップ用の説明文はスマホでは使えないので隠す。 */

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable {
        display: block;
        min-width: 0;
        padding: 14px 16px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody,
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr,
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr > td {
            display: block;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr > td {
            width: auto !important; /* style="width: NNNpx" が直接書かれているため */
            height: auto !important;
            padding: 0;
            border: 0;
            text-align: left;
        }

        /* 画像1枚は2行組み。2行目にはクラスが付かないので、1行目（.imagerow）側で区切る */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow {
            display: grid;
            grid-template-columns: 88px minmax(0, 1fr) auto;
            grid-template-areas:
                "thumb label updown"
                "thumb file  file"
                "thumb del   del";
            align-items: center;
            column-gap: 10px;
            row-gap: 6px;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--line);
        }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow:first-child {
                margin-top: 0;
                padding-top: 0;
                border-top: 0;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(1) {
                grid-area: updown;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(1) > div {
                    display: flex;
                    gap: 4px;
                }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(2) {
                grid-area: label;
                white-space: nowrap;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(2) > br {
                    display: none;
                }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(3) {
                grid-area: thumb;
                text-align: center;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(3) .help {
                    display: none;
                }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(3) img {
                    max-width: 88px;
                    max-height: 88px;
                    height: auto;
                }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(4) {
                grid-area: file;
            }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr.imagerow > td:nth-child(5) {
                grid-area: del;
            }

        /* スマホ用の大きなボタンの高さと、上下ボタンの余白（base.css）を詰める */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable .btn {
            min-height: 36px;
            width: auto;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable .updown :is(.up, .down) {
            padding: 0;
        }

        /* 2行目（タイトル）は画像の下に全幅で。「タイトル」と入力欄は横並び */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr:not(.imagerow) > td {
            padding-top: 8px;
        }

            body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr:not(.imagerow) > td > div {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px 8px;
            }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr:not(.imagerow) > td > div > label {
                    margin: 0;
                }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr:not(.imagerow) > td > div > input {
                    flex: 1 1 0;
                    min-width: 0;
                }

                body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable > tbody > tr:not(.imagerow) > td > div > .field-validation-error {
                    flex: 0 0 100%;
                }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) table.data-table.imagetable :is(input, textarea) {
            max-width: 100%;
            min-width: 0;
        }

    /* PC用テーブルを隠し、カード列に差し替える */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .table-wrap.desktop-table {
        display: none;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-cards {
        display: grid;
        gap: 10px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-card {
        padding: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-card-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-kv {
        display: grid;
        grid-template-columns: 105px 1fr;
        gap: 7px 10px;
        padding: 7px 0;
        border-top: 1px solid #f0f1f3;
        font-size: 14px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-kv:first-of-type {
            border-top: 0;
        }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-kv span:first-child {
            color: var(--muted);
        }

    /* ---------- 検索条件パネル（狭い幅） ----------
       .field の下マージン（通常17px）や、チェックボックスを1列に積む書き方のままだと、
       状態・その他のように選択肢が多い画面で縦にとても長くなる。
       ここでまとめて詰める。 */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .search-panel {
        padding: 12px 14px;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .search-panel .filters {
            display: grid;
            gap: 10px;
        }

        /* .filters の中の項目間は grid の gap で空けるので、.field 自身の下マージンは消す
           （残すと gap と二重に空いてしまう） */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .search-panel .filters > .field {
            margin-bottom: 0;
        }

        /* フリーワード検索など、.filters の外にある単独の .field は
           通常の17pxより詰めた間隔にする */
        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .search-panel > .field {
            margin-bottom: 10px;
        }

    /* チェックボックスの選択肢（状態・その他など）を1列に積むと、
       選択肢が多い画面（注文一覧の「その他」で7個など）で1画面に収まらないほど
       長くなる。2列にして高さをおよそ半分にする */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .pill-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .pill-box label {
        width: 100%;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.3;
    }

    /* 日付の範囲指定（プルダウン＋開始日〜終了日）。開始日・終了日は
       .w-s（max-width: 220px）のままだと2つ合わせて横に入りきらず、
       それぞれが独立した行に折り返されて縦に長くなる。
       この2つだけ狭くして横並びのまま収める。
       % ではなく px 指定なのは、Order/List の開始日・終了日が
       display:inline-flex（幅は中身まかせ）の中にあり、% だと
       親の幅が定まらず計算が不安定になるため */
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .searchdate.w-s {
        max-width: 130px;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .banner {
        flex-direction: column;
        align-items: flex-start;
    }

        body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .banner .btn {
            width: 100%;
        }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .wide-actions .btn {
        width: 100%;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .button-row .btn {
        flex: 1;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .settings-row,
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .choice {
        padding: 13px;
    }
}

@media (max-width: 390px) {
    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .stat-grid {
        grid-template-columns: 1fr;
    }

    body.renewal :is(#page, #cboxLoadedContent, .ui-dialog, .dialog-page) .mobile-kv {
        grid-template-columns: 92px 1fr;
    }
}