/* ============================================================
   ECport スマホ版デザイン（05-XX-YY）共通スタイル
   基準資料: ECport スマホ版デザイン｜最新完全網羅版.pptx
   - 05-00-07 ルート画面Header / 05-00-08 下層画面Header
   - 05-00-09 safe-area・固定CTA / 05-00-10 ソフトキーボード表示中
   PC には影響させない。全て 767.98px 以下でのみ適用する。
   ============================================================ */

:root {
    --ec-sp-bg: #f3f4fb;
    --ec-sp-surface: #ffffff;
    --ec-sp-ink: #1b1c1a;
    --ec-sp-ink-muted: #8b8e88;
    --ec-sp-accent: #f0801f;
    --ec-sp-accent-soft: #fdf1e5;
    --ec-sp-border: #e7e4dc;
    --ec-sp-radius-card: 20px;
    --ec-sp-radius-inner: 14px;
    --ec-sp-header-h: 60px;
    --ec-sp-safe-b: env(safe-area-inset-bottom, 0px);
    --ec-sp-safe-t: env(safe-area-inset-top, 0px);
    /* ボトムナビの高さ（custom.scss の .ec-bottom-nav と同じ値）と、中央の作成ボタンがナビから上へ出る分（影を含む） */
    --ec-sp-bottom-nav-h: 72px;
    --ec-sp-fab-overhang: 24px;
    /* SPヘッダーの実高さ（バー + 下線1px + safe-area）。ハンバーガーメニューはこの下から開く */
    --ec-sp-header-total: calc(var(--ec-sp-header-h) + 1px + var(--ec-sp-safe-t));
}

@media (max-width: 767.98px) {

    /* --- 地色（05-00 全画面共通） --- */
    body { background: var(--ec-sp-bg); }

    /* --- 画面下の固定物（ボトムナビ・固定CTA等）ぶんの余白 ---
       余白を .page-content に付けるとフッターが余白の外へ出て固定物の裏に隠れるため、
       フッターを含む .main-content 側に付ける。固定物が違う画面は --ec-sp-bottom-space だけを上書きする。 */
    body { --ec-sp-bottom-space: calc(var(--ec-sp-bottom-nav-h) + var(--ec-sp-fab-overhang) + var(--ec-sp-safe-b)); }
    .main-content { padding-bottom: var(--ec-sp-bottom-space); }
    .main-content .page-content { padding-bottom: 24px; }

    /* --- ヘッダー（05-00-07 / 05-00-08） --- */
    .ec-sp-header {
        position: sticky;
        top: 0;
        z-index: 1035;
        background: var(--ec-sp-surface);
        padding-top: var(--ec-sp-safe-t);
        border-bottom: 1px solid transparent;
        transition: border-color .18s ease, background-color .18s ease;
    }
    /* スクロール時は半透明にして下のコンテンツと階層を分ける（05-00-07 注記） */
    .ec-sp-header.is-scrolled {
        background: rgba(255, 255, 255, .88);
        backdrop-filter: saturate(140%) blur(12px);
        -webkit-backdrop-filter: saturate(140%) blur(12px);
        border-bottom-color: var(--ec-sp-border);
    }
    .ec-sp-header__bar {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: var(--ec-sp-header-h);
        padding: 8px;
    }
    .ec-sp-header__title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--ec-sp-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* 下層は戻るボタンぶん字下げされるので少し小さく */
    .ec-sp-header--child .ec-sp-header__title { font-size: 18px; }
    .ec-sp-header__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

    /* 丸い枠は付けない。4つの枠がロゴより目立っていた（2026-10-17 ユーザー指摘）。押したときだけ丸く色を付ける */
    .ec-sp-iconbtn {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 44px;              /* タップ領域 44px 以上 */
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--ec-sp-ink);
        font-size: 22px;
        padding: 0;
        text-decoration: none;
    }
    .ec-sp-iconbtn:active { background: var(--ec-sp-accent-soft); }
    /* ロゴは左右のボタン（2つずつ・同じ幅）の間の中央＝画面の中央に置く */
    .ec-sp-header__brand {
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* 高さ32pxまで（10/18 ユーザー「気持ち小さく」で 36→32px）。幅の狭い端末（360px幅など）は空きに収まるよう縦横比を保って縮める */
    .ec-sp-header__brand img { min-width: 0; max-width: 100%; max-height: 32px; width: auto; height: auto; }
    /* 左の2つ（メニュー・お知らせ）も右の箱と同じく縮めない。縮むと左右の幅が変わり、ロゴが中央からずれる */
    .ec-sp-header__bar > .ec-sp-iconbtn { flex-shrink: 0; }

    /* 未読件数（05-05-01: 赤丸に件数） */
    .ec-sp-count {
        position: absolute;
        top: 2px;
        right: 0;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        background: #f0475b;
        border: 2px solid var(--ec-sp-surface);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }
    .ec-sp-dot {
        position: absolute;
        top: 7px;
        right: 8px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #f0475b;
        border: 2px solid var(--ec-sp-surface);
    }
    /* 押せる範囲は 44px のまま、丸は 34px で描く（隣のアイコンと同じくらいの重さにする） */
    .ec-sp-avatar {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 5px;
        border-radius: 50%;
        background: var(--ec-sp-accent);
        background-clip: content-box;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        text-decoration: none;
    }
    .ec-sp-avatar > i { font-size: 19px; line-height: 1; }
    /* アカウント設定のプロフィール画像。設定画面の表示と同じく円いっぱいに切り抜く */
    .ec-sp-avatar--image { background: transparent; }
    .ec-sp-avatar--image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--ec-sp-border);
    }
    .ec-sp-actions-menu { min-width: 220px; border-radius: var(--ec-sp-radius-inner); }

    /* PC用 Velzon topbar はスマホでは出さない（SPヘッダーに置き換える） */
    #page-topbar { display: none !important; }
    /* Velzon は固定topbar(70px)分の padding-top を .page-content に持たせている。
       SPヘッダーは sticky で場所を取るため、その空き分を詰める。 */
    .main-content .page-content { padding-top: 12px; }

    /* --- ハンバーガーメニュー（Velzon の .app-menu） ---
       Velzon のままだと画面の最上端から開くため、先頭の項目がSPヘッダーの裏に潜り、
       末尾の組織リンクはボトムナビや保存バーの裏に隠れる（暗い背景もそれらに掛からない）。
       ヘッダーの下から画面下端までに開き、暗い背景とメニューをヘッダー以外の固定物より手前に出す。
       ヘッダーの開閉ボタンはそのまま押せる。 */
    .app-menu.navbar-menu {
        top: var(--ec-sp-header-total);
        bottom: 0;
        padding-bottom: calc(12px + var(--ec-sp-safe-b));
    }
    .vertical-overlay {
        top: var(--ec-sp-header-total);
        bottom: 0;
        height: auto;
    }
    .vertical-sidebar-enable .vertical-overlay { z-index: 1040; }
    .vertical-sidebar-enable .app-menu { z-index: 1041; }

    /* --- 固定CTA（05-00-09） --- */
    .ec-sp-cta-footer {
        position: fixed;
        left: 0;
        right: 0;
        /* ボトムナビの上に重ねる */
        bottom: calc(72px + var(--ec-sp-safe-b));
        z-index: 1029;
        background: var(--ec-sp-surface);
        border-top: 1px solid var(--ec-sp-border);
        padding: 12px 16px calc(12px + var(--ec-sp-safe-b));
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .07);
    }
    /* ボトムナビを出さない画面（ウィザード等）は画面最下部に貼る */
    .ec-sp-no-bottom-nav .ec-sp-cta-footer { bottom: 0; }
    .ec-sp-cta-footer__helper {
        margin: 0 0 8px;
        font-size: 13px;
        color: var(--ec-sp-ink-muted);
    }
    .ec-sp-cta-footer__actions { display: grid; gap: 8px; }
    .ec-sp-cta-footer__actions .btn { min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; }
    /* 固定CTAぶん本文の下に余白を足す */
    body:has(.ec-sp-cta-footer) { --ec-sp-bottom-space: calc(196px + var(--ec-sp-safe-b)); }

    /* --- セクション見出し --- */
    .ec-sp-section-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 22px 2px 10px;
    }
    .ec-sp-section-title h2 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--ec-sp-ink);
    }
    .ec-sp-section-title a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ec-sp-accent);
        text-decoration: none;
        white-space: nowrap;
    }

    /* --- 白カード内の定義行（05-00-08 / 05-00-09） --- */
    .ec-sp-rows {
        background: var(--ec-sp-surface);
        border-radius: var(--ec-sp-radius-card);
        padding: 4px 16px;
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .ec-sp-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding: 10px 0;
        border-bottom: 1px solid var(--ec-sp-border);
        color: var(--ec-sp-ink);
        text-decoration: none;
    }
    .ec-sp-rows > .ec-sp-row:last-child { border-bottom: 0; }
    .ec-sp-row__label { flex: 0 0 auto; color: var(--ec-sp-ink-muted); font-size: 14px; }
    .ec-sp-row__value {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        font-weight: 700;
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .ec-sp-row--link .ec-sp-row__chevron { flex: 0 0 auto; color: #8b8e88; font-size: 20px; }

    /* --- Bootstrap カードを SP のカード表現へ寄せる --- */
    .page-content .card {
        border: 0;
        border-radius: var(--ec-sp-radius-card);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    /* 見出し・フッターの角はカードの角に合わせる。PC 用の 12px（!important）のままだと、
       枠付きのカード（.border）で角の枠線が見出しの背景に隠れて切れて見えた（2026-10-08 パートナーを紹介する） */
    .page-content .card > .card-header:first-child {
        border-top-left-radius: inherit !important;
        border-top-right-radius: inherit !important;
    }
    .page-content .card > .card-footer:last-child {
        border-bottom-left-radius: inherit !important;
        border-bottom-right-radius: inherit !important;
    }

    /* --- 確認・選択はボトムシート（05-90 / 各Filter Sheet） --- */
    .modal.ec-sp-sheet .modal-dialog {
        margin: 0;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
    }
    .modal.ec-sp-sheet .modal-content {
        width: 100%;
        border: 0;
        border-radius: 22px 22px 0 0;
        max-height: calc(100dvh - 48px);
    }
    /* モーダル内スクロールは modal-body に明示的な上限が要る（flex高さ連鎖が効かないため） */
    .modal.ec-sp-sheet .modal-body {
        overflow-y: auto;
        max-height: calc(100dvh - 12rem);
        padding-bottom: calc(16px + var(--ec-sp-safe-b));
    }

    /* --- ソフトキーボード表示中（05-00-10） ---
       キーボードが出ると固定要素が浮くため、body に is-keyboard-open を付けて
       ボトムナビを隠し、CTAは通常フローに落とす。JS は ecport-sp.js。 */
    body.is-keyboard-open .ec-bottom-nav { display: none; }
    body.is-keyboard-open .ec-sp-cta-footer { position: static; box-shadow: none; padding-bottom: 12px; }
    /* 画面下に固定する操作バーも、入力中は入力欄を隠さないよう通常フローへ戻す */
    body.is-keyboard-open .ec-product-wizard-nav,
    body.is-keyboard-open .ec-sp-savebar,
    body.is-keyboard-open .ec-sp-step-nav,
    body.is-keyboard-open .ec-sp-detail-cta,
    body.is-keyboard-open .ca-page .ca-actions { position: static !important; box-shadow: none !important; }
    body.is-keyboard-open { --ec-sp-bottom-space: var(--ec-sp-safe-b); }

    /* --- ボトムナビの文字 ---
       custom.scss はラベルを 64px で切るため、2番目の「データベース」（6文字）が「データベ…」になる。項目の幅いっぱいまで使う */
    .ec-bottom-nav-item > span:last-child { max-width: 100%; }
}

/* ============================================================
   05-05 ホーム
   ============================================================ */
@media (max-width: 767.98px) {
    /* 挨拶（05-05-01）。下のカードと 2px しか空かず詰まって見えたので、見出し「今やること」と同じ 14px を空ける */
    .ec-sp-greeting {
        margin: 4px 2px 14px;
        font-size: 14px;
        color: var(--ec-sp-ink-muted);
    }

    /* ブロック見出し「今やること」（05-05-01 / 05-05-03） */
    .ec-sp-todo-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 2px 2px 14px;
    }
    .ec-sp-todo-heading h2 {
        margin: 0;
        font-size: 26px;
        font-weight: 700;
        color: var(--ec-sp-ink);
    }
    .ec-sp-todo-heading__count {
        flex: 0 0 auto;
        padding: 5px 14px;
        border-radius: 999px;
        background: #fdf0dd;
        color: #b1671c;
        font-size: 13px;
        font-weight: 700;
    }

    /* 今やること: 見出し右に件数ピル */
    .ec-todo-now__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 21px;
        font-weight: 700;
        color: var(--ec-sp-ink);
    }
    .ec-todo-now__count {
        flex: 0 0 auto;
        padding: 4px 12px;
        border-radius: 999px;
        background: #fdeaee;
        color: #d8354c;
        font-size: 13px;
        font-weight: 700;
    }

    /* 今やること・利用中機能の行を、タップしやすいカード表現にする（05-05-01） */
    /* ホームの「.ec-dash-card .card-body { padding: 18px !important }」（575px 以下）に負けると、行のカードだけ内側に縮んで「今月の実績」と幅がずれる */
    .ec-dash-card.ec-todo-now .card-body { padding: 4px 0 0 !important; background: transparent; }
    .ec-todo-now .ec-todo-now__title { padding: 16px 16px 0; margin-bottom: 12px; }
    .ec-todo-now { background: transparent !important; box-shadow: none !important; }
    .ec-todo-now .ec-row-item {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 84px;
        margin-bottom: 10px;
        padding: 14px 16px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
        border: 0;
    }
    .ec-todo-now .ec-row-ic {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 24px;
    }
    .ec-todo-now .ec-row-count {
        flex: 0 0 auto;
        padding: 3px 11px;
        border-radius: 999px;
        background: var(--ec-sp-accent-soft);
        color: var(--ec-sp-accent);
        font-size: 13px;
    }
}

/* ============================================================
   05-05-03 / 05-04-01 初期設定ガイド
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-setup { margin-bottom: 24px; }

    /* 進捗パネル（淡い indigo の面） */
    .ec-sp-setup__guide {
        padding: 18px 18px 16px;
        border-radius: var(--ec-sp-radius-card);
        background: #fdf1e5;
        margin-bottom: 12px;
    }
    .ec-sp-setup__eyebrow {
        display: inline-block;
        padding: 4px 11px;
        border-radius: 999px;
        background: #e7e4dc;
        color: var(--ec-sp-accent);
        font-size: 12px;
        font-weight: 700;
    }
    .ec-sp-setup__headline {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
    }
    .ec-sp-setup__headline strong { font-size: 20px; font-weight: 700; color: var(--ec-sp-ink); }
    .ec-sp-setup__ratio { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--ec-sp-ink); }
    .progress.ec-sp-setup__bar {
        height: 8px;
        margin: 12px 0 10px;
        border-radius: 999px;
        background: #e7e4dc;
    }
    .ec-sp-setup__bar .progress-bar { background: var(--ec-sp-accent); border-radius: 999px; }
    .ec-sp-setup__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .ec-sp-setup__foot span { font-size: 13px; color: var(--ec-sp-ink-muted); }
    .ec-sp-setup__foot .btn {
        flex: 0 0 auto;
        min-height: 44px;
        padding-inline: 20px;
        border-radius: 12px;
        font-weight: 700;
    }

    /* 未完了タスクのカード */
    .ec-sp-setup__task {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 10px;
        padding: 16px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
        text-decoration: none;
        color: var(--ec-sp-ink);
    }
    .ec-sp-setup__icon {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 24px;
    }
    .ec-sp-setup__icon--required { background: #fdeaee; color: #d8354c; }
    .ec-sp-setup__icon--recommended { background: #e6f6ee; color: #23783f; }
    .ec-sp-setup__icon--optional { background: #fdf1e5; color: #7656c6; }
    .ec-sp-setup__body { flex: 1 1 auto; min-width: 0; }
    .ec-sp-setup__body strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
    .ec-sp-setup__body small {
        display: block;
        margin-top: 3px;
        color: var(--ec-sp-ink-muted);
        font-size: 13px;
        line-height: 1.45;
    }
    .ec-sp-setup__chevron { flex: 0 0 auto; align-self: center; color: #8b8e88; font-size: 22px; }

    /* 必須・推奨・任意チップ */
    .ec-sp-chip {
        display: inline-block;
        margin-top: 8px;
        padding: 3px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .ec-sp-chip--required { background: #fdeaee; color: #d8354c; }
    .ec-sp-chip--recommended { background: #e6f6ee; color: #23783f; }
    .ec-sp-chip--optional { background: #fdf1e5; color: #7656c6; }
    .ec-sp-chip--done { margin-top: 0; background: #e6f6ee; color: #23783f; }

    /* 完了した設定 */
    .ec-sp-setup__done {
        background: var(--ec-sp-surface);
        border-radius: var(--ec-sp-radius-card);
        padding: 2px 16px;
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .ec-sp-setup__done-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 58px;
        padding: 10px 0;
        border-bottom: 1px solid var(--ec-sp-border);
        color: var(--ec-sp-ink);
        text-decoration: none;
    }
    .ec-sp-setup__done > .ec-sp-setup__done-row:last-child { border-bottom: 0; }
    .ec-sp-setup__check {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #23783f;
        color: #fff;
        font-size: 17px;
    }
    .ec-sp-setup__done-label { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 15px; }
}

/* ============================================================
   05-40-01 一覧カード（商品・注文などの共通表現）
   ============================================================ */
@media (max-width: 767.98px) {
    /* 一覧の表はスマホでは出さない。カードへ置き換える。 */
    .table-responsive:has(.product-index-table) { display: none; }

    .ec-sp-item-list { display: grid; gap: 10px; }

    .ec-sp-item-card {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .ec-sp-item-card__thumb {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 84px;
        height: 84px;
        border-radius: 16px;
        background: #f4f5fb;
        overflow: hidden;
    }
    .ec-sp-item-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .ec-sp-item-card__thumb-placeholder { color: #8b8e88; font-size: 26px; }

    .ec-sp-item-card__body { flex: 1 1 auto; min-width: 0; padding-right: 34px; }
    /* カード全体をタップ領域にする（タイトルのリンクをカードいっぱいに広げる） */
    .ec-sp-item-card { position: relative; }
    .ec-sp-item-card__title::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }
    /* 「…」メニューとサムネのリンクは重ねたリンクより手前に置く */
    .ec-sp-item-card__more,
    .ec-sp-item-card__thumb { position: relative; z-index: 1; }
    .ec-sp-item-card__title {
        display: block;
        min-height: 32px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        color: var(--ec-sp-ink);
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .ec-sp-item-card__meta {
        margin: 3px 0 0;
        font-size: 12px;
        color: var(--ec-sp-ink-muted);
        overflow-wrap: anywhere;
    }
    .ec-sp-item-card__price {
        margin: 6px 0 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--ec-sp-ink);
    }
    .ec-sp-item-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .ec-sp-item-card__chips .ec-sp-chip { margin-top: 0; }
    .ec-sp-item-card__time {
        margin: 8px 0 0;
        text-align: right;
        font-size: 12px;
        color: var(--ec-sp-ink-muted);
    }

    .ec-sp-item-card__more { position: absolute; top: 8px; right: 8px; }
    .ec-sp-item-card__more-btn {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #8b8e88;
        font-size: 20px;
    }
    .ec-sp-item-card__more-btn:active { background: var(--ec-sp-accent-soft); }

    /* 一覧カードで使う状態チップ */
    .ec-sp-chip--published { background: #e6f6ee; color: #23783f; }
    .ec-sp-chip--draft { background: #eef0f5; color: #5e615c; }
    .ec-sp-chip--neutral { background: #eef0f5; color: #5e615c; }
    .ec-sp-chip--warn { background: #fdf0dd; color: #b1671c; }
    .ec-sp-chip--info { background: var(--ec-sp-accent-soft); color: var(--ec-sp-accent); }
}

/* ============================================================
   05-40-02 / 各Filter Sheet: 右ドロワーをスマホではボトムシートにする
   ============================================================ */
@media (max-width: 767.98px) {
    /* manage の補助パネルは資料上すべてボトムシート。右ドロワーを一括で下から出す。 */
    .offcanvas.offcanvas-end:not(.ec-sp-desktop-static) {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 64px);
        border: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .offcanvas.offcanvas-end:not(.ec-sp-desktop-static).showing,
    .offcanvas.offcanvas-end:not(.ec-sp-desktop-static).show { transform: none; }
    .offcanvas.offcanvas-end:not(.ec-sp-desktop-static) .offcanvas-header {
        position: relative;
        padding-top: 26px;
        border-bottom: 1px solid var(--ec-sp-border);
    }
    .offcanvas.offcanvas-end:not(.ec-sp-desktop-static) .offcanvas-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e7e4dc;
    }
    /* モーダル内スクロールは modal-body / offcanvas-body に明示的な上限が要る */
    .offcanvas.offcanvas-end:not(.ec-sp-desktop-static) .offcanvas-body {
        overflow-y: auto;
        max-height: calc(100dvh - 14rem);
        padding-bottom: calc(20px + var(--ec-sp-safe-b));
    }

    /* 絞り込みボタンはアイコンのみ（05-40-01 の丸ボタン） */
    .ec-sp-filter-btn { width: 46px; padding-inline: 0; }
    .ec-sp-filter-btn i { margin-right: 0 !important; }
    .ec-sp-filter-btn__label { display: none; }

    .offcanvas.ec-sp-filter-sheet {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 64px);
        border: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .offcanvas.ec-sp-filter-sheet.showing,
    .offcanvas.ec-sp-filter-sheet.show { transform: none; }
    .offcanvas.ec-sp-filter-sheet .offcanvas-header {
        position: relative;
        padding-top: 26px;
        border-bottom: 1px solid var(--ec-sp-border);
    }
    /* つまみ（シートであることを示す） */
    .offcanvas.ec-sp-filter-sheet .offcanvas-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e7e4dc;
    }
    .offcanvas.ec-sp-filter-sheet .offcanvas-body {
        overflow-y: auto;
        max-height: calc(100dvh - 14rem);
        padding-bottom: calc(20px + var(--ec-sp-safe-b));
    }
    /* シート内の主操作は44px以上 */
    .offcanvas.ec-sp-filter-sheet .btn { min-height: 48px; border-radius: 12px; }
}

/* ============================================================
   05-40-01 一覧の操作行（検索 / 絞り込み / 追加を1行に）
   ============================================================ */
@media (max-width: 767.98px) {
    #plFilterForm > .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    #plFilterForm > .row > .col-lg { flex: 1 1 auto; min-width: 0; padding: 0; }
    #plFilterForm > .row > .col-auto { flex: 0 0 auto; padding: 0; }
    /* 05-40-01 の並び: 検索 → 絞り込み → 追加 */
    #plFilterForm > .row > .col-lg { order: 1; }
    #plFilterForm > .row > .col-auto:has(.ec-sp-filter-btn) { order: 2; }
    #plFilterForm > .row > .col-auto:has(.ec-sp-add-btn) { order: 3; }
    .ec-sp-add-btn {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 12px;
        font-size: 22px;
    }
    /* ステータスチップは折り返さず横スクロール（05-40-01） */
    .ec-sp-chip-scroller,
    #plFilterForm ~ .d-flex.flex-wrap.align-items-center.gap-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
        /* page-content の左右padding分を打ち消して端まで流す */
        margin-inline: -12px;
        padding-inline: 12px;
    }
    #plFilterForm ~ .d-flex.flex-wrap.align-items-center.gap-2::-webkit-scrollbar { display: none; }
    #plFilterForm ~ .d-flex.flex-wrap.align-items-center.gap-2 > .ec-pl-chip { flex: 0 0 auto; }
}

/* ============================================================
   05-54-01 注文カード
   ============================================================ */
@media (max-width: 767.98px) {
    /* 注文の表はスマホでは出さない */
    .ec-sales-table-wrap,
    #ec-sales .table-responsive { display: none; }

    .ec-sp-order-card {
        padding: 14px 16px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .ec-sp-order-card__head { display: flex; align-items: flex-start; gap: 12px; }
    .ec-sp-order-card__select { flex: 0 0 auto; margin-top: 4px; }
    .ec-sp-order-card__id { flex: 1 1 auto; min-width: 0; }
    .ec-sp-order-card__number {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--ec-sp-ink);
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .ec-sp-order-card__sub {
        margin: 3px 0 0;
        font-size: 12px;
        color: var(--ec-sp-ink-muted);
    }
    .ec-sp-order-card__sub span { margin: 0 6px; color: #d9d5cb; }
    .ec-sp-order-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .ec-sp-order-card__chips .ec-sp-chip { margin-top: 0; }

    .ec-sp-order-card__amount {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
    .ec-sp-order-card__amount strong { font-size: 17px; font-weight: 700; white-space: nowrap; }

    .ec-sp-order-card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--ec-sp-border);
        font-size: 13px;
    }
    .ec-sp-order-card__foot + .ec-sp-order-card__foot { border-top: 0; margin-top: 4px; padding-top: 0; }
    .ec-sp-order-card__summary { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
    .ec-sp-order-card__site { flex: 0 0 auto; color: var(--ec-sp-accent); font-weight: 600; }
    .ec-sp-order-card__note { flex: 1 1 auto; min-width: 0; color: var(--ec-sp-ink-muted); }
    .ec-sp-order-card__note span { margin: 0 6px; color: #d9d5cb; }
    .ec-sp-order-card__link {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        /* 指で押せる高さを確保する（05-00 共通: タップ領域） */
        min-height: 32px;
        padding: 4px 0;
        color: var(--ec-sp-accent);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
}

/* ============================================================
   一覧・詳細画面の共通調整
   ============================================================ */
@media (max-width: 767.98px) {
    /* パンくずはスマホでも出す。SPヘッダーは全画面共通のロゴ表示で、画面名も戻る操作も持たないため、
       本文の先頭で「パンくず → 画面名 → 説明文」の順に現在地を示す。
       画面側に書体の指定が無いパンくずも、他の画面と同じ小さな文字にそろえる。 */
    .ec-so-breadcrumb,
    .ec-cp-breadcrumb,
    .ec-reg-breadcrumb,
    .ec-detail-breadcrumb {
        margin-bottom: 6px;
        font-size: 13px;
        color: var(--ec-sp-ink-muted);
        overflow-wrap: anywhere;
    }
    /* リンクは周りの文字と同じ色にしない。押せることが分からなかった（2026-10-18 ユーザー指摘）。
       ほかのパンくず（「サイト一覧」など）と同じリンクの色にする。詳細画面は ec-detail-styles の茶色が後から読まれるため a[href] で強める */
    :is(.ec-so-breadcrumb, .ec-cp-breadcrumb, .ec-reg-breadcrumb, .ec-detail-breadcrumb) a[href] {
        color: var(--vz-link-color);
        text-decoration: none;
    }

    /* 状態チップの行は折り返さず横スクロール（05-40-01 / 05-54-01） */
    .ec-sales-chip,
    .ec-pl-chip { flex: 0 0 auto; }
    .d-flex.flex-wrap:has(> .ec-sales-chip) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -12px;
        padding-inline: 12px;
    }
    .d-flex.flex-wrap:has(> .ec-sales-chip)::-webkit-scrollbar { display: none; }

    /* KPIタイルは4つを1枚の面にまとめて縦を圧縮する（05-54-01）。
       1行に4つだと右端が画面の外に隠れるため、2列で並べる */
    .row.g-3:has(> [class*="col-"] > .ec-sales-kpi) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
        margin: 0 0 16px;
        padding: 6px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .row.g-3:has(> [class*="col-"] > .ec-sales-kpi) > [class*="col-"] {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
    }
    .ec-sales-kpi {
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        background: #f8f6f1;
    }
    .ec-sales-kpi .card-body { flex-direction: column; align-items: flex-start !important; gap: 2px; padding: 12px 10px; }
    .ec-sales-kpi .card-body h3 { font-size: 20px; font-weight: 700; }
    .ec-sales-kpi .card-body p { font-size: 12px !important; margin-bottom: 0 !important; }
    /* アイコンは幅を食うので出さない（数値とラベルを優先） */
    .ec-sales-kpi-icon { display: none !important; }

    /* 一覧カードを載せる外枠は、面の重なりを避けて背景に溶かす */
    #ec-sales .card:has(.ec-sp-item-list) { background: transparent; border: 0 !important; box-shadow: none; }
    #ec-sales .card:has(.ec-sp-item-list) > .card-body { padding: 0; }
    #ec-sales .card:has(.ec-sp-item-list) > .card-header { padding-inline: 0; background: transparent; }
}

/* ============================================================
   x-sp.filter-sheet: スマホはシート、PCは通常の本文フロー
   ============================================================ */
/* PC: offcanvas の装いを完全に解く（この解除がないとPCでフィルタが消える） */
@media (min-width: 768px) {
    .offcanvas.ec-sp-desktop-static {
        position: static;
        visibility: visible;
        transform: none;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        border: 0;
        background: transparent;
        box-shadow: none;
        z-index: auto;
    }
    .offcanvas.ec-sp-desktop-static .offcanvas-body { padding: 0; overflow: visible; }
}

@media (max-width: 767.98px) {
    .ec-sp-filter-trigger { margin-bottom: 14px; }
    .ec-sp-filter-trigger .btn {
        position: relative;
        min-height: 48px;
        border-radius: 14px;
        font-weight: 700;
    }
    .ec-sp-filter-trigger__dot {
        position: absolute;
        top: 10px;
        right: 14px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f0475b;
    }

    .offcanvas.ec-sp-desktop-static {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 64px);
        border: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        visibility: hidden;
    }
    .offcanvas.ec-sp-desktop-static.showing,
    .offcanvas.ec-sp-desktop-static.show { transform: none; visibility: visible; }
    .offcanvas.ec-sp-desktop-static .offcanvas-header {
        position: relative;
        padding-top: 26px;
        border-bottom: 1px solid var(--ec-sp-border);
    }
    .offcanvas.ec-sp-desktop-static .offcanvas-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e7e4dc;
    }
    .offcanvas.ec-sp-desktop-static .offcanvas-body {
        overflow-y: auto;
        max-height: calc(100dvh - 14rem);
        padding-bottom: calc(20px + var(--ec-sp-safe-b));
    }
    /* シート内のフォームは上下余白を詰める */
    .offcanvas.ec-sp-desktop-static form { margin-top: 0 !important; margin-bottom: 0 !important; }
    .offcanvas.ec-sp-desktop-static .btn { min-height: 48px; border-radius: 12px; }
}

/* ============================================================
   05-80-01 マイページ（管理 / 実績 / コミュニケーション / 設定）
   ============================================================ */
.ec-sp-mypage { display: grid; gap: 14px; max-width: 720px; }

.ec-sp-mypage__org {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--ec-sp-radius-card);
    background: linear-gradient(120deg, #fdf1e5 0%, #eaf6f1 100%);
}
.ec-sp-mypage__org-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #f7c9a3;
    background: #fff;
    color: var(--ec-sp-accent);
    font-size: 22px;
    font-weight: 700;
}
.ec-sp-mypage__org-body { flex: 1 1 auto; min-width: 0; }
.ec-sp-mypage__org-body strong { display: block; font-size: 17px; font-weight: 700; color: var(--ec-sp-ink); overflow-wrap: anywhere; }
.ec-sp-mypage__org-body small { display: block; margin-top: 2px; color: var(--ec-sp-ink-muted); font-size: 13px; }
.ec-sp-mypage__roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ec-sp-mypage__roles .ec-sp-chip { margin-top: 0; }
.ec-sp-mypage__org-link {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    color: var(--ec-sp-accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ec-sp-mypage__group {
    padding: 14px 14px 16px;
    border-radius: var(--ec-sp-radius-card);
    background: var(--ec-sp-surface);
    box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
}
.ec-sp-mypage__group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ec-sp-border);
}
.ec-sp-mypage__group-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ec-sp-accent-soft);
    color: var(--ec-sp-accent);
    font-size: 20px;
}
.ec-sp-mypage__group-head > div { flex: 1 1 auto; min-width: 0; }
.ec-sp-mypage__group-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ec-sp-ink); }
.ec-sp-mypage__group-head p { margin: 2px 0 0; font-size: 12px; color: var(--ec-sp-ink-muted); }
.ec-sp-mypage__group-count {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f1f2f8;
    color: #5e615c;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ec-sp-mypage__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.ec-sp-mypage__tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 9px 20px 9px 8px;
    border: 1px solid var(--ec-sp-border);
    border-radius: var(--ec-sp-radius-inner);
    background: var(--ec-sp-surface);
    color: var(--ec-sp-ink);
    text-decoration: none;
}
.ec-sp-mypage__tile:active { background: #f8f6f1; }
.ec-sp-mypage__tile-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
}
.ec-sp-mypage__tile-icon--indigo { background: var(--ec-sp-accent-soft); color: var(--ec-sp-accent); }
.ec-sp-mypage__tile-icon--green { background: #e6f6ee; color: #23783f; }
.ec-sp-mypage__tile-icon--violet { background: #fdf1e5; color: #7656c6; }
.ec-sp-mypage__tile-icon--amber { background: #fdf0dd; color: #b1671c; }
.ec-sp-mypage__tile-body { flex: 1 1 auto; min-width: 0; }
.ec-sp-mypage__tile-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.ec-sp-mypage__tile-body small {
    display: block;
    margin-top: 2px;
    color: var(--ec-sp-ink-muted);
    font-size: 12px;
    white-space: nowrap;
}
.ec-sp-mypage__tile-badge {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--ec-sp-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.ec-sp-mypage__tile-chevron {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: #d9d5cb;
    font-size: 18px;
}

.ec-sp-mypage__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--ec-sp-radius-card);
    background: #fdf1e5;
    color: #5e615c;
    font-size: 13px;
    line-height: 1.6;
}
.ec-sp-mypage__hint i { flex: 0 0 auto; color: var(--ec-sp-accent); font-size: 18px; line-height: calc(13px * 1.6); }

/* 画面が広いときはタイルを増やす */
@media (min-width: 768px) {
    .ec-sp-mypage__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   タップ領域の底上げ（デザインガイド: 44px 以上）
   スマホでは指で触れる操作をすべて必要な高さまで広げる。
   ============================================================ */
@media (max-width: 767.98px) {
    /* ヘッダーのロゴ・リンク */
    .ec-sp-header__brand { min-height: 44px; }
    .ec-sp-mypage__org-link { min-height: 44px; align-items: center; }

    /* タブ・チップ類（ホーム / 探す / 一覧の絞り込みチップ） */
    .ec-reco-tab,
    .ec-reel-tab,
    .ec-sales-chip,
    .ec-pl-chip,
    .ec-order-tab {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* リールのタイトルリンク */
    .ec-reel-title { display: inline-flex; align-items: center; min-height: 40px; }

    /* 販売サイト一覧のURLリンクなど、単独で置かれるテキストリンク */
    .card a.text-muted.small.d-block { min-height: 40px; display: flex !important; align-items: center; }
}

/* ============================================================
   画面上部の見出し（パンくず → 画面名 → 説明文）
   SPヘッダーは全画面共通のロゴ表示で画面名を持たないため、画面名は本文の見出しで示す。
   以前は「ヘッダーが画面名を持つ」前提で .ec-sp-page-title と直後の説明文を隠していたが、
   その前提が無くなり画面名が消えていたので、隠さない。
   書体は ecport-pc-design.css の .page-content h1.ec-sp-page-title / .page-title-box h1（1.5rem・太字）。
   ============================================================ */
@media (max-width: 767.98px) {
    /* 左に見出し・右にパンくずを置く page-title-box は、パンくずを見出しの上へ回す。
       右側にヘルプなどのリンクもある場合は、パンくずを左・リンクを右端に並べる。 */
    .page-content .page-title-box:has(> .page-title-right .breadcrumb) {
        display: flex !important;
        flex-direction: column-reverse;
        align-items: stretch !important;
        gap: 6px;
    }
    .page-content .page-title-box > .page-title-right:has(.breadcrumb) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0;
    }
    .page-content .page-title-box > .page-title-right .breadcrumb {
        order: -1;
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }
    .page-content .page-title-box > .page-title-right:has(.breadcrumb) > :not(.breadcrumb) {
        flex: 0 0 auto;
        margin: 0 !important;
    }
    /* h1 以外の要素に .ec-sp-page-title を付けた画面名も、h1 の画面名と同じ大きさにする */
    .page-content .ec-sp-page-title:not(h1) {
        font-size: 1.5rem !important;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.025em;
    }
    /* h1 以外の見出しで画面名を書いている page-title-box も、他の画面と同じ大きさにする
       （Velzon の .page-title-box h4 { font-size:15px !important } に負けないよう !important） */
    .page-content .page-title-box :is(h2, h3, h4):first-child {
        font-size: 1.5rem !important;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.025em;
        text-transform: none;
    }
}
/* 見出しの右にボタンを置く page-title-box（d-sm-flex）は、575px 以下で縦に並ぶと見出しとボタンの間が 0px だった
   （オプション・振込申請履歴など）。パンくずを持つ型は上の column-reverse と gap で空けているので除く */
@media (max-width: 575.98px) {
    .page-content .page-title-box.d-sm-flex:not(:has(.breadcrumb)) > :first-child:not(:last-child) {
        margin-bottom: 12px !important;
    }
}

/* ============================================================
   タップ領域の底上げ（追補）と、横方向の詰まりの解消
   ============================================================ */
@media (max-width: 767.98px) {
    /* コネクト入口の「詳しく見る」リンク */
    .connect-entry__learn { min-height: 44px; display: flex !important; align-items: center; justify-content: center; }

    /* メッセージ一覧の絞り込みチップ */
    .ec-chat-chip { display: inline-flex; align-items: center; min-height: 40px; }

    /* FAQ のカテゴリ一覧など、面いっぱいに並ぶテキストリンク。
       段落や画像を抱えたカード型のリンク（商品を探すの商品カード下段など）を横1列に並べてしまわないよう、
       ブロック要素を中に持つリンクは対象外にする。 */
    a.text-decoration-none.d-block:not(:has(> :is(p, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, img, table))) {
        min-height: 40px;
        display: flex !important;
        align-items: center;
    }

    /* オンボーディングの「保存して終了」（05-04-01 のヘッダー右） */
    [data-mobile-save-later] { min-height: 44px; padding-inline: 8px; }

    /* 折りたたみ見出しの中身が縮まず、画面幅からはみ出していた */
    .btn.d-flex > span.d-flex { min-width: 0; }
    .btn.d-flex > span.d-flex > span { min-width: 0; overflow-wrap: anywhere; }
}

/* ============================================================
   05-60-01 期間の要約バー（本文の縦を使わずに期間を示す）
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-period-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        margin-bottom: 14px;
        padding: 10px 14px;
        border: 1px solid var(--ec-sp-border);
        border-radius: var(--ec-sp-radius-inner);
        background: var(--ec-sp-surface);
        color: var(--ec-sp-ink);
        font-size: 14px;
        text-align: left;
    }
    .ec-sp-period-bar > i:first-child { flex: 0 0 auto; color: var(--ec-sp-accent); font-size: 20px; }
    .ec-sp-period-bar__value { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
    .ec-sp-period-bar__action {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        color: var(--ec-sp-accent);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

}

/* CSV出力は期間シートの外に置き、スマホでも常に押せるようにする（05-60-01） */
@media (max-width: 767.98px) {
    .ec-sp-csv-btn { min-height: 44px; border-radius: 12px; }
}

/* ============================================================
   05-10-01 / 05-10-02 探すホーム
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-discover { display: block; }

    .ec-sp-discover__search { display: flex; align-items: center; gap: 10px; }
    .ec-sp-discover__field {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
    }
    .ec-sp-discover__field i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #8b8e88;
        font-size: 20px;
    }
    .ec-sp-discover__field input {
        width: 100%;
        min-height: 52px;
        padding: 10px 16px 10px 46px;
        border: 1px solid var(--ec-sp-border);
        border-radius: var(--ec-sp-radius-inner);
        background: var(--ec-sp-surface);
        font-size: 16px;
    }
    .ec-sp-discover__field input:focus { outline: 2px solid var(--ec-sp-accent); outline-offset: -1px; }
    .ec-sp-discover__submit {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        padding: 0;
        border: 1px solid var(--ec-sp-border);
        border-radius: var(--ec-sp-radius-inner);
        background: var(--ec-sp-surface);
        color: var(--ec-sp-accent);
        font-size: 21px;
    }

    /* 探したいものを選ぶ: 1枚の面を等分する */
    .ec-sp-discover__targets {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding: 16px 8px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .ec-sp-discover__target {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 4px 6px;
        color: var(--ec-sp-ink);
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .ec-sp-discover__target + .ec-sp-discover__target { border-left: 1px solid var(--ec-sp-border); }

    /* カテゴリから探す */
    .ec-sp-discover__categories {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ec-sp-discover__category {
        position: relative;
        display: block;
        min-height: 96px;
        padding: 12px 26px 12px 12px;
        border-radius: var(--ec-sp-radius-inner);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
        color: var(--ec-sp-ink);
        text-decoration: none;
    }
    .ec-sp-discover__category-icon {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        border-radius: 11px;
        background: var(--ec-sp-accent-soft);
        color: var(--ec-sp-accent);
        font-size: 19px;
    }
    .ec-sp-discover__category strong { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
    .ec-sp-discover__category small { display: block; margin-top: 2px; color: var(--ec-sp-ink-muted); font-size: 12px; }
    .ec-sp-discover__category-chevron { position: absolute; right: 8px; bottom: 10px; color: #d9d5cb; font-size: 18px; }

    /* 最近の検索 */
    .ec-sp-discover__recent {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 72px;
        margin-top: 14px;
        padding: 12px 14px;
        border: 1px solid #e7e4dc;
        border-radius: var(--ec-sp-radius-card);
        background: #f7f8ff;
        color: var(--ec-sp-ink);
        text-decoration: none;
    }
    .ec-sp-discover__recent-icon {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #fff;
        color: var(--ec-sp-accent);
        font-size: 20px;
    }
    .ec-sp-discover__recent-body { flex: 1 1 auto; min-width: 0; }
    .ec-sp-discover__recent-body strong { display: block; font-size: 15px; font-weight: 700; }
    .ec-sp-discover__recent-body small {
        display: block;
        margin-top: 2px;
        color: var(--ec-sp-ink-muted);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   05-21 / 05-22 / 05-23 作成ウィザードの固定CTA
   共通コンポーネント x-product-wizard-nav をスマホで固定バーにする。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-product-wizard-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1031;
        display: grid !important;
        grid-template-columns: minmax(96px, 34%) 1fr;
        align-items: center;
        gap: 10px;
        margin: 0 !important;
        padding: 12px 16px calc(12px + var(--ec-sp-safe-b));
        background: var(--ec-sp-surface);
        border-top: 1px solid var(--ec-sp-border);
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .07);
    }
    /* 戻るが無い最初のステップは主操作を全幅にする */
    .ec-product-wizard-nav.justify-content-end { grid-template-columns: 1fr; }
    .ec-product-wizard-nav__helper {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 13px;
        color: var(--ec-sp-ink-muted);
        text-align: center;
    }
    .ec-product-wizard-nav > a,
    .ec-product-wizard-nav > button,
    .ec-product-wizard-nav > div { min-width: 0; }
    .ec-product-wizard-nav .btn {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
    }
    /* 「次へ」側は slot と一緒に入れ子になっているため、内側も伸ばす */
    .ec-product-wizard-nav > .d-flex { display: grid !important; gap: 8px; }

    /* 作成中はボトムナビを出さず、CTAへ集中させる（05-21-01） */
    body:has(.ec-product-wizard-nav) .ec-bottom-nav { display: none; }
    body:has(.ec-product-wizard-nav) { --ec-sp-bottom-space: calc(150px + var(--ec-sp-safe-b)); }
}

/* ============================================================
   05-21-01 ウィザードの進捗（STEP n / 合計 + バー）
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-stepper { margin-bottom: 18px; }
    .ec-sp-stepper__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }
    .ec-sp-stepper__label {
        flex: 0 0 auto;
        color: var(--ec-sp-accent);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
    }
    .ec-sp-stepper__name {
        flex: 1 1 auto;
        min-width: 0;
        color: var(--ec-sp-ink-muted);
        font-size: 13px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .progress.ec-sp-stepper__bar {
        height: 6px;
        border-radius: 999px;
        background: #e7e4dc;
    }
    .ec-sp-stepper__bar .progress-bar { background: var(--ec-sp-accent); border-radius: 999px; }
}

/* ============================================================
   詳細・確認画面の小さな操作リンクを 44px 相当へ（追補）
   ============================================================ */
@media (max-width: 767.98px) {
    /* 確認画面の「編集」リンク（05-25 各作成確認） */
    a.link-primary.fs-12 { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 4px; }
    /* サイト作成の確認・ポリシー行のリンク */
    .ec-review-edit,
    .ec-policy-row a,
    .ec-setup-note > a { display: inline-flex; align-items: center; min-height: 36px; }
    /* パンくず風のテキストリンク（サイト作成のヘッダ） */
    .text-muted.small > a { display: inline-flex; align-items: center; min-height: 32px; }
}

/* ============================================================
   05-30-01 / 05-11-02 など: タブはスマホでセグメント表示にする
   1枚の淡い面の中で等分し、収まらない場合だけ横に流す。
   ============================================================ */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        gap: 4px;
        padding: 4px;
        border-bottom: 0;
        border-radius: 14px;
        background: #f2efe8;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs > .nav-item { flex: 1 0 auto; }
    .nav-tabs > .nav-item > .nav-link,
    .nav-tabs > .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        width: 100%;
        padding: 8px 14px;
        border: 0 !important;
        border-radius: 10px;
        color: #5e615c;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }
    .nav-tabs > .nav-item > .nav-link.active,
    .nav-tabs > .nav-link.active {
        background: var(--ec-sp-surface) !important;
        color: var(--ec-sp-accent) !important;
        box-shadow: 0 1px 4px rgba(27, 28, 26, .10);
    }
    /* タブ内の件数バッジは丸ピルに揃える */
    .nav-tabs .nav-link .badge {
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
    }
    /* card-header に載るタブは面の外へ出して見やすくする */
    .card-header:has(> .nav-tabs.card-header-tabs) {
        padding: 12px;
        background: transparent;
        border-bottom: 0;
    }
    .nav-tabs.card-header-tabs { margin: 0; }
}

/* ============================================================
   05-55-01 注文詳細: 見出しブロックを概要カードに、操作を縦積みに
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-order-head {
        display: block !important;
        margin-bottom: 14px !important;
        padding: 16px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    /* 画面名はSPヘッダーが持つので、見出しからは落として注文番号と状態を主役にする */
    .ec-sp-order-head h4 {
        display: block !important;
        margin: 0 0 6px !important;
        font-size: 13px;
        font-weight: 700;
        color: var(--ec-sp-ink-muted);
    }
    .ec-sp-order-head h4 [data-testid="order-number"] {
        display: block;
        margin-top: 2px;
        color: var(--ec-sp-ink) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
    }
    /* 状態チップは注文番号の下に並べる */
    .ec-sp-order-head h4 > .ec-status-chip,
    .ec-sp-order-head h4 > .badge { margin-top: 8px; margin-right: 6px; }
    .ec-sp-order-head > div > p { margin-top: 10px !important; }

    /* 操作は縦積みの全幅ボタンにする（05-55-01 下部のCTA） */
    .ec-sp-order-head > .d-flex.flex-wrap {
        display: grid !important;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--ec-sp-border);
    }
    .ec-sp-order-head > .d-flex.flex-wrap > * { width: 100%; }
    .ec-sp-order-head > .d-flex.flex-wrap .btn {
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
    }
    .ec-sp-order-head > .d-flex.flex-wrap form { width: 100%; }
}

/* ============================================================
   フォーム（05-21 / 05-46 / 05-81〜85 共通）
   資料のスマホ画面は、入力を大きく・1列・全幅で置く。
   ============================================================ */
@media (max-width: 767.98px) {
    /* クラスの付いていない入力欄も16pxにする（:where で詳細度を上げず、画面ごとの指定は優先させる） */
    input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden], [type=submit], [type=button], [type=image], [type=reset])),
    select,
    textarea { font-size: 16px; }
    .form-control,
    .form-select {
        min-height: 48px;
        border-radius: var(--ec-sp-radius-inner);
        font-size: 16px; /* iOS の自動ズームを防ぐ */
    }
    textarea.form-control { min-height: 120px; }
    /* 読み取り専用の URL 欄は中身の行数だけの高さにする（ecport-ui.js が合わせる） */
    textarea.form-control.ec-url-field { min-height: 0; }
    /* 小さい版も16px未満にしない（input-group-sm は Bootstrap 側の指定が .form-control より強い） */
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select { min-height: 44px; font-size: 16px; }
    .input-group-sm > .input-group-text { font-size: .875rem; }
    .input-group > .form-control,
    .input-group > .form-select { min-height: 48px; }

    .form-label { font-size: 14px; font-weight: 700; color: var(--ec-sp-ink); }
    .form-text { font-size: 12px; }

    /* チェック・ラジオはタップしやすい大きさに */
    .form-check-input { width: 22px; height: 22px; margin-top: .15rem; }
    .form-check { min-height: 44px; display: flex; align-items: center; gap: 10px; padding-left: 0; }
    .form-check .form-check-input { margin-left: 0; float: none; flex: 0 0 auto; }
    .form-check .form-check-label { margin: 0; }
    /* スイッチは幅が要る */
    .form-switch .form-check-input { width: 44px; }

    /* 2列のフォーム行はスマホで1列に落とす。ただしスマホの列数（col-6 など）を明示した列は、その指定を守る。
       明示した列まで全幅にしていたため、商品・画像・数字のカードの一覧が画面ごとに1列になっていた
       （/connect/products・/profiles など。2026-10-18 ユーザー指摘）。スマホで1列にしたい列は col-12 を付ける */
    .row > [class*="col-md-"]:not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11),
    .row > [class*="col-lg-"]:not(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11) { flex: 0 0 100%; max-width: 100%; }

    /* カード内の操作行は全幅の縦積み（05-81〜85 の保存ボタン） */
    .card-body > .d-flex.justify-content-end:not(.ec-sp-keep-inline),
    .card-footer > .d-flex.justify-content-end:not(.ec-sp-keep-inline) {
        display: grid !important;
        gap: 8px;
    }
    .card-body > .d-flex.justify-content-end .btn,
    .card-footer > .d-flex.justify-content-end .btn { width: 100%; min-height: 48px; border-radius: 12px; }
}

/* ============================================================
   05-71-01 会話: 入力欄を画面下に固定し、本文だけをスクロールさせる
   ============================================================ */
@media (max-width: 767.98px) {
    /* 相手の名前と補足を左、アイコンを右に置く。SPヘッダーは画面名を持たないので、相手の名前はここで出す。
       カードの枠に文字やアイコン（影を含む）が接したり欠けたりしないよう、左右に余白をとる。 */
    .ec-chat-thread__head {
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--ec-sp-border) !important;
    }
    .ec-chat-thread__head .ec-chat-avatar { order: 2; }
    .ec-chat-thread__head > .flex-grow-1 { order: 1; }
    .ec-chat-thread__head > .flex-grow-1 > p.text-muted { font-size: 13px !important; }

    /* 会話本文は入力欄の高さぶんを空けて、その中でスクロールする */
    .ec-chat-thread__body {
        min-height: 0 !important;
        max-height: none !important;
        padding: 16px !important;
        overflow-y: visible !important;
    }

    /* 入力欄は safe-area を確保した固定バー（05-71-01 / 05-00-09） */
    .ec-chat-thread__foot {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1031;
        padding: 10px 12px calc(10px + var(--ec-sp-safe-b)) !important;
        background: var(--ec-sp-surface);
        border-top: 1px solid var(--ec-sp-border) !important;
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .07);
    }
    /* 入力欄と送信ボタンは1行に並べる（折り返さない） */
    .ec-chat-thread__foot form > .d-flex {
        /* 画面内 <style> が後に来るため、ここは重ねて指定する */
        flex-wrap: nowrap !important;
        align-items: flex-end;
    }
    .ec-chat-thread__foot textarea.form-control {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 48px;
        max-height: 120px;
        border-radius: 24px;
        padding: 12px 16px;
        resize: none;
    }
    .ec-chat-thread__foot .btn {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
        font-size: 20px;
    }
    /* 送信のヒントは1行に収める */
    .ec-chat-thread__foot .ec-chat-hint { font-size: 12px; text-align: center; }

    /* 会話画面はボトムナビを出さず、入力欄に集中させる */
    body:has(.ec-chat-thread__foot) .ec-bottom-nav { display: none; }
    body:has(.ec-chat-thread__foot) { --ec-sp-bottom-space: calc(132px + var(--ec-sp-safe-b)); }
    /* 会話中は一覧ペインを畳む（05-70-01 と 05-71-01 を分ける） */
    body:has(.ec-chat-thread__foot) .ec-chat-shell > .ec-chat-panel:first-child { display: none; }
}

/* ============================================================
   05-48-01 募集カード（サムネの無い一覧カード）
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-item-card--flat { padding: 16px; }
    .ec-sp-item-card--flat .ec-sp-item-card__body { padding-right: 0; }
    .ec-sp-item-card__rows {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--ec-sp-border);
        font-size: 13px;
    }
    .ec-sp-item-card__rows > span { color: var(--ec-sp-ink-muted); }
    .ec-sp-item-card__rows > strong { font-weight: 700; }
}

/* ============================================================
   05-56-02 発送（梱包チェック）: ステップ移動を固定バーに
   ============================================================ */
@media (max-width: 767.98px) {
    /* 見出しは注文番号と状態だけを残す */
    .ec-sp-order-title { font-size: 18px !important; }

    .ec-sp-step-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1031;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 10px;
        margin: 0 !important;
        padding: 12px 16px calc(12px + var(--ec-sp-safe-b));
        background: var(--ec-sp-surface);
        border-top: 1px solid var(--ec-sp-border);
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .07);
    }
    /* 非表示のステップボタンは列を取らない */
    .ec-sp-step-nav > .d-none { display: none !important; }
    .ec-sp-step-nav .btn {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
    }
    body:has(.ec-sp-step-nav) .ec-bottom-nav { display: none; }
    body:has(.ec-sp-step-nav) { --ec-sp-bottom-space: calc(120px + var(--ec-sp-safe-b)); }
}

/* ============================================================
   05-62-01 分析概要
   画面内 <style> が後に来るため、ここは重ねて指定する。
   ============================================================ */
@media (max-width: 767.98px) {
    /* 期間と操作は1行ずつに畳む */
    .ec-an-toolbar {
        display: grid !important;
        /* 日本語ラベルは4列に収まらないので2列で折り返す */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        margin: 14px 0 18px !important;
    }
    .ec-an-toolbar > label {
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 52px !important;
        border-radius: var(--ec-sp-radius-inner) !important;
        font-size: 14px;
    }
    .ec-an-toolbar input { width: auto !important; min-width: 0; flex: 1 1 auto; font-size: 16px; }
    .ec-an-toolbar .ec-an-button {
        justify-content: center;
        min-height: 48px !important;
        padding: 8px !important;
        border-radius: var(--ec-sp-radius-inner) !important;
        margin-left: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        font-size: 13px;
    }

    /* KPI は 2×2、縦積みで数値を主役にする */
    .ec-an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .ec-an-card { border: 0 !important; border-radius: var(--ec-sp-radius-card) !important; padding: 14px !important; box-shadow: 0 2px 12px rgba(27, 28, 26, .05) !important; }
    .ec-an-kpi { display: block !important; }
    .ec-an-icon {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 10px;
        border-radius: 11px !important;
        font-size: 18px !important;
    }
    .ec-an-kpi small { font-size: 12px; color: var(--ec-sp-ink-muted); }
    .ec-an-kpi strong { font-size: 22px !important; }
    .ec-an-change {
        display: inline-block;
        margin-top: 6px;
        padding: 2px 9px;
        border-radius: 999px;
        background: #e6f6ee;
        font-size: 12px;
    }
    .ec-an-change.down { background: #fdeaee; }

    /* タブは横スクロールのセグメント */
    .ec-an-tabs {
        gap: 4px !important;
        margin-top: 14px !important;
        padding: 4px;
        border-bottom: 0 !important;
        border-radius: 14px;
        background: #f2efe8;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ec-an-tabs::-webkit-scrollbar { display: none; }
    .ec-an-tabs a {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 8px 14px !important;
        border-radius: 10px;
        white-space: nowrap;
    }
    .ec-an-tabs a.active { background: var(--ec-sp-surface); }
    .ec-an-tabs a.active:after { display: none; }

    /* 表は横スクロールできる面に載せる */
    .ec-an-card:has(> .ec-an-table),
    .ec-an-card:has(.ec-an-table) { overflow-x: auto; }
    .ec-an-chart { height: 200px !important; }
    .ec-an-chart canvas { max-height: 200px !important; }
}

/* ============================================================
   表をスマホで「ラベル + 値」の積み重ねにする（SPデザイン共通）
   ラベルは ecport-sp.js が thead から写す。
   ============================================================ */
@media (max-width: 767.98px) {
    table.ec-sp-stacked,
    table.ec-sp-stacked > tbody,
    table.ec-sp-stacked > tbody > tr,
    table.ec-sp-stacked > tbody > tr > td { display: block; width: 100%; }

    table.ec-sp-stacked { border-collapse: separate; border-spacing: 0; }
    table.ec-sp-stacked > thead { display: none; }

    table.ec-sp-stacked > tbody > tr {
        margin-bottom: 10px;
        padding: 4px 14px;
        border: 0;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    table.ec-sp-stacked > tbody > tr:last-child { margin-bottom: 0; }

    table.ec-sp-stacked > tbody > tr > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 10px 0 !important;
        border: 0;
        border-bottom: 1px solid var(--ec-sp-border);
        text-align: left !important;
        white-space: normal !important;
    }
    table.ec-sp-stacked > tbody > tr > td:last-child { border-bottom: 0; }

    /* ラベル（thead の見出し） */
    table.ec-sp-stacked > tbody > tr > td[data-sp-label]::before {
        content: attr(data-sp-label);
        flex: 0 0 auto;
        max-width: 45%;
        color: var(--ec-sp-ink-muted);
        font-size: 13px;
        font-weight: 400;
    }
    /* 見出しが空の列（操作列など）は値だけを全幅で見せる */
    table.ec-sp-stacked > tbody > tr > td[data-sp-label=""]::before { content: none; }
    table.ec-sp-stacked > tbody > tr > td[data-sp-label=""] { justify-content: stretch; }
    table.ec-sp-stacked > tbody > tr > td[data-sp-label=""] > * { flex: 1 1 auto; }

    /* セル内のリンクも指で押せる高さにする */
    table.ec-sp-stacked > tbody > tr > td a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    /* 値側は右寄せで折り返す */
    table.ec-sp-stacked > tbody > tr > td > * { min-width: 0; text-align: right; overflow-wrap: anywhere; }
    table.ec-sp-stacked > tbody > tr > td { font-size: 14px; }

    /* colspan で畳んだ行（空状態など）はそのまま1枚で見せる */
    table.ec-sp-stacked > tbody > tr[data-sp-full-row] { padding: 0; background: transparent; box-shadow: none; }
    table.ec-sp-stacked > tbody > tr[data-sp-full-row] > td { display: block; border-bottom: 0; }
    table.ec-sp-stacked > tbody > tr[data-sp-full-row] > td::before { content: none; }
    table.ec-sp-stacked > tbody > tr[data-sp-full-row] > td > * { text-align: initial; }
    /* 中央寄せを指定した空状態（「〜はまだありません」）は、縦積みの左寄せに負けず中央に置く */
    table.ec-sp-stacked > tbody > tr[data-sp-full-row] > td.text-center { text-align: center !important; }
    table.ec-sp-stacked > tbody > tr[data-sp-full-row] > td.text-center > * { text-align: center; }

    /* 積み重ねた表は横スクロールの入れ物を外す */
    .table-responsive:has(> table.ec-sp-stacked) { overflow-x: visible; }
}

/* ============================================================
   05-90-01 / 05-90-02 確認はボトムシート（manage の全モーダル共通）
   資料のスマホ画面に中央ダイアログは無く、必ず下から出るシート。
   意図して中央に出したいものは data-sp-keep-modal を付ける。
   ============================================================ */
@media (max-width: 767.98px) {
    .modal:not([data-sp-keep-modal]) .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        /* 中身の高さぶんだけ立ち上げる。全画面にすると背後が見えずシートに見えない。
           ビルド済みCSSに残る min-height:100% / flex 指定を打ち消す。 */
        display: block;
        min-height: 0;
        height: auto;
        max-height: calc(100dvh - 48px);
        transform: translateY(100%);
        transition: transform .28s ease-out;
    }
    .modal.show:not([data-sp-keep-modal]) .modal-dialog { transform: none; }

    .modal:not([data-sp-keep-modal]) .modal-content {
        border: 0;
        border-radius: 22px 22px 0 0;
        max-height: calc(100dvh - 48px);
    }
    /* つまみ（シートであることを示す） */
    .modal:not([data-sp-keep-modal]) .modal-header {
        position: relative;
        padding-top: 26px;
        border-bottom: 1px solid var(--ec-sp-border);
    }
    .modal:not([data-sp-keep-modal]) .modal-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #e7e4dc;
    }
    /* Bootstrap のモーダルは flex の高さ連鎖が効かないため、内部スクロールには
       modal-body 側の max-height 指定が要る（これが無いと下部の操作が画面外に出る） */
    .modal:not([data-sp-keep-modal]) .modal-body {
        overflow-y: auto;
        max-height: calc(100dvh - 15rem);
    }

    /* 操作は縦積みの全幅。破壊的な操作は最下部に置く（05-90-02） */
    .modal:not([data-sp-keep-modal]) .modal-footer {
        display: grid;
        gap: 8px;
        padding: 14px 16px calc(14px + var(--ec-sp-safe-b));
        border-top: 1px solid var(--ec-sp-border);
    }
    .modal:not([data-sp-keep-modal]) .modal-footer > * { width: 100%; margin: 0 !important; }
    .modal:not([data-sp-keep-modal]) .modal-footer .btn {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 700;
    }
    .modal:not([data-sp-keep-modal]) .modal-footer .btn-danger,
    .modal:not([data-sp-keep-modal]) .modal-footer .btn-outline-danger { order: 99; }
    /* 本文の末尾に操作を置く画面（modal-footer を使っていないもの）も全幅に */
    .modal:not([data-sp-keep-modal]) .modal-body > .d-flex:last-child:not(.ec-sp-keep-inline) {
        display: grid !important;
        gap: 8px;
        padding-bottom: var(--ec-sp-safe-b);
    }
    .modal:not([data-sp-keep-modal]) .modal-body > .d-flex:last-child .btn {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
    }
}

/* ============================================================
   05-37 / 05-52 など: 画面下部の操作群を safe-area 込みの固定バーへ
   申請承認・応募審査・返品などの「決める」画面は、操作を常に手元に置く。
   ============================================================ */
@media (max-width: 767.98px) {
    .ca-page .ca-actions {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1031;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px 16px calc(12px + var(--ec-sp-safe-b)) !important;
        background: var(--ec-sp-surface) !important;
        border-top: 1px solid var(--ec-sp-border);
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .07);
    }
    .ca-page .ca-actions > * { width: 100%; }
    .ca-page .ca-actions .btn {
        width: 100%;
        min-height: 50px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
    }
    /* 破壊的な操作は最下部に置く（05-90-02 と同じ並び） */
    .ca-page .ca-actions > .btn-outline-danger,
    .ca-page .ca-actions > .btn-danger { order: 99; }

    body:has(.ca-page .ca-actions) .ec-bottom-nav { display: none; }
    body:has(.ca-page .ca-actions) { --ec-sp-bottom-space: calc(210px + var(--ec-sp-safe-b)); }

    /* 入力ウィザードはキーボードと重ならないよう、操作をフォームの流れに戻す。 */
    .ca-wrap .ca-actions {
        position: static !important;
        inset: auto !important;
        box-shadow: none !important;
    }
    /* ボトムナビは出たままなので、下の余白は既定（ボトムナビぶん）のままにする */

    /* 2カラム（本文 + サイド）の画面は1カラムに落とす */
    .ca-page > div,
    .ca-layout { grid-template-columns: 1fr !important; display: block !important; }
    .ca-page aside { margin-top: 14px; }

    /* 条件の対比（現在 → 希望）は縦に積む */
    .ca-change,
    .ca-flow,
    .ca-terms {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ============================================================
   詳細・審査画面の共通調整
   ============================================================ */
@media (max-width: 767.98px) {
    /* 追従するサイドカードはスマホでは通常フローに戻す。
       390px では画面の大半を占めてしまい、本文が読めなくなるため。 */
    .position-sticky { position: static !important; top: auto !important; }

    /* 2カラム（本文 + サイド）は本文を先に、サイドを後ろに積む */
    .row > [class*="col-lg-8"] { order: 1; }
    .row > [class*="col-lg-4"] { order: 2; }

    /* ラベル + 値の縦積み（応募内容・審査履歴など） */
    .card-body > .py-3 > small.text-muted { display: block; font-size: 13px; }
    .card-body > .py-3 > .mt-1 { font-size: 15px; overflow-wrap: anywhere; }
}

@media (max-width: 767.98px) {
    .ec-cn-states { margin-inline: 0; }
    .ec-cn-state { font-size: 12px; padding: 8px 12px; }
}

/* ============================================================
   05-01 ログイン / 05-02 新規登録
   独立した全画面。入力は先頭アイコン付き、副操作は全幅の淡いボタン。
   ============================================================ */
@media (max-width: 767.98px) {
.ec-sp-auth-field-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #8b8e88;
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}
.ec-sp-auth-field-icon + input { padding-left: 46px !important; }
.ec-sp-auth-forgot { display: none; }

.ec-sp-auth-divider {
    position: relative;
    margin: 26px 0 18px;
    text-align: center;
}
.ec-sp-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e7e4dc;
}
.ec-sp-auth-divider span {
    position: relative;
    padding: 0 14px;
    background: #fff;
    color: #8b8e88;
    font-size: 13px;
}
.ec-sp-auth-account-create { margin-top: 24px; }
.ec-sp-auth-lead {
    margin: 0 0 12px;
    color: #5e615c;
    font-size: 14px;
    text-align: center;
}
.ec-sp-auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    background: #fdf1e5;
    color: #f0801f;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.ec-sp-auth-secondary:hover,
.ec-sp-auth-secondary:active { background: #e7e4dc; color: #f0801f; }

/* 05-02-01 新規登録: 3ステップの進捗 */
.ec-sp-auth-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-start;
    width: 100%;
    gap: 0;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.ec-sp-auth-steps::before {
    content: '';
    position: absolute;
    top: 19px;
    right: 38px;
    left: 38px;
    height: 2px;
    background: #e7e4dc;
}
.ec-sp-auth-steps li {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ec-sp-auth-steps li:first-child { align-items: flex-start; }
.ec-sp-auth-steps li:last-child { align-items: flex-end; }
.ec-sp-auth-steps li span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #e7e4dc;
    border-radius: 50%;
    background: #fff;
    color: #8b8e88;
    font-size: 15px;
    font-weight: 700;
}
.ec-sp-auth-steps li small { color: #8b8e88; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.ec-sp-auth-steps li:first-child small { transform: translateX(calc(19px - 50%)); }
.ec-sp-auth-steps li:last-child small { transform: translateX(calc(50% - 19px)); }
.ec-sp-auth-steps li.is-current span { border-color: #f0801f; background: #f0801f; color: #fff; }
.ec-sp-auth-steps li.is-current small { color: #f0801f; }
.ec-sp-auth-lead--tight { margin-top: 18px; margin-bottom: 4px; }
.ec-sp-auth-altlink { margin: 0; text-align: center; }
.ec-sp-auth-altlink a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: #f0801f;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
}

@media (max-width: 767.98px) {
    /* スマホでは再設定リンクを入力欄の下へ移す。 */
    .ec-sp-auth-forgot-inline { display: none !important; }
    .ec-sp-auth-forgot { display: block; margin: 8px 0 0; text-align: right; }
    .ec-sp-auth-forgot a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        color: #f0801f;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }
    .ec-sp-auth-divider span { background: #f7f8ff; }
}

/* 05-03-02 目的の複数選択カード */
@media (max-width: 767.98px) {
    .ec-goal-desc { font-size: 13px; line-height: 1.5; }
    .ec-goal-count {
        margin: 12px 2px 0;
        color: #f0801f;
        font-size: 13px;
        font-weight: 700;
    }
}

/* ============================================================
   05-13-05 詳細画面の固定CTA（相談 + 主操作）
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-detail-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1031;
        display: grid;
        grid-template-columns: minmax(96px, 34%) 1fr;
        align-items: center;
        gap: 10px;
        padding: 12px 16px calc(12px + var(--ec-sp-safe-b));
        background: var(--ec-sp-surface);
        border-top: 1px solid var(--ec-sp-border);
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .07);
    }
    /* 相談導線が無い場合は主操作を全幅にする */
    .ec-sp-detail-cta:not(:has(.ec-sp-detail-cta__sub)) { grid-template-columns: 1fr; }
    .ec-sp-detail-cta .btn {
        width: 100%;
        min-height: 52px;
        margin: 0;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
    }
    /* 補足文は固定バーに隠れるので出さない（バーの上に置く余白が無い） */
    .ec-sp-detail-cta__note { display: none; }

    body:has(.ec-sp-detail-cta) .ec-bottom-nav { display: none; }
    body:has(.ec-sp-detail-cta) { --ec-sp-bottom-space: calc(120px + var(--ec-sp-safe-b)); }
}

@media (max-width: 767.98px) {
    .ec-sp-inv-summary__card { padding: 12px 10px; }
    .ec-sp-inv-summary__card strong { font-size: 18px; }
    /* 在庫調整はカードの右下に置く */
    .ec-sp-item-card .ec-sp-item-card__more .btn { white-space: nowrap; }
}

/* ============================================================
   横スクロールのタブ（売上・収益のタブ / 設定センターの番号付きタブ）
   灰色のスクロールバーは出さず、右に続きがある間だけ右端を薄く消して続きを示す。
   続きの有無は ecport-sp.js が .is-scroll-more で付け外しする。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-order-tabs,
    .ec-settings-nav { scrollbar-width: none; }
    .ec-order-tabs::-webkit-scrollbar,
    .ec-settings-nav::-webkit-scrollbar { display: none; }
    .ec-order-tabs.is-scroll-more,
    .ec-settings-nav.is-scroll-more {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    }
}

/* 05-06-01 今やること一覧: 狭い画面では要約を縦に積む */
@media (max-width: 767.98px) {
    .ec-sp-task-summary { flex-wrap: wrap; }
    .ec-sp-task-summary__sort { width: 100%; }
    .ec-sp-task-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -12px;
        padding-inline: 12px;
    }
    .ec-sp-task-filters::-webkit-scrollbar { display: none; }
}

/* 件数から今やること一覧へ（05-05-01 → 05-06-01） */
@media (max-width: 767.98px) {
    a.ec-sp-todo-heading__count {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        text-decoration: none;
    }
}

/* 見出し行に添えるテキストリンク（「一覧を見る ›」など）もタップできる高さにする */
@media (max-width: 767.98px) {
    .d-flex.justify-content-between > a:not(.btn):not([class*="ec-"]) {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* 05-32-01 Connect申請: 対象カードを縦積みにして潰れを防ぐ */
@media (max-width: 767.98px) {
    .ca-entity {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: left;
    }
    .ca-entity .ca-thumb { width: 72px; height: 72px; }
    /* 「商品を変更」などの操作は全幅に落とす */
    .ca-entity .btn { width: 100%; }
}

/* ============================================================
   05-65-01 コネクターホーム
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-connector-hero {
        padding: 18px;
        margin-bottom: 18px;
        border-radius: var(--ec-sp-radius-card);
        background: linear-gradient(120deg, #7656c6 0%, #7656c6 100%);
        color: #fff;
    }
    .ec-sp-connector-hero__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 13px;
        font-weight: 700;
    }
    .ec-sp-connector-hero__month {
        padding: 4px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .22);
        font-size: 12px;
    }
    .ec-sp-connector-hero__amount {
        display: block;
        margin-top: 8px;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
    }
    .ec-sp-connector-hero__chips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
    }
    .ec-sp-connector-hero__chips .ec-sp-chip { margin-top: 0; }
    .ec-sp-connector-hero__note { font-size: 12px; opacity: .9; }
    .ec-sp-connector-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }
    .ec-sp-connector-hero__stats > div {
        padding: 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .92);
        color: var(--ec-sp-ink);
    }
    .ec-sp-connector-hero__stats small { display: block; font-size: 11px; color: var(--ec-sp-ink-muted); }
    .ec-sp-connector-hero__stats strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
}

/* ============================================================
   05-66-01 コネクタープログラム紹介
   報酬は区分ごとに1枚ずつ縦に並べる。3列のままだと「80% → 20% 継続」などの率と説明が
   1文字ずつ折り返して読めなかった（2026-10-02 ユーザー指摘）。
   ============================================================ */
@media (max-width: 767.98px) {
    .connector-intro__rewards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }
    .connector-intro__rewards > div {
        padding: 14px 16px;
        border-radius: 14px;
        background: #f8f6f1;
    }
    .connector-intro__rewards b {
        display: block;
        font-size: 20px;
        line-height: 1.35;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .connector-intro__rewards span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ec-sp-ink-muted, #7d6753); }

    /* 区分カード・できることカードは縦積みで読ませる */
    .connector-role-cards,
    .connector-intro__points { grid-template-columns: 1fr !important; }
}

/* ============================================================
   05-66-02 コネクター申請フォーム
   入力中にソフトキーボードと重ならないよう、操作ボタンはフォーム内に置く。
   ============================================================ */
@media (max-width: 767.98px) {
    .connector-application-form .ec-sp-formbar {
        position: static;
        margin: 16px 0 0 !important;
        padding: 12px 0 0;
        display: flex !important;
        align-items: center;
        gap: 10px;
        background: #fff;
        border-top: 1px solid #f4eee8;
        box-shadow: none;
    }
    .connector-application-form .ec-sp-formbar__meta {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        color: #8b8e88;
    }
    .connector-application-form .ec-sp-formbar > .btn {
        flex: 0 0 auto;
        min-height: 44px;
        padding-inline: 18px !important;
        width: auto !important;
    }
    .connector-application-form .ec-sp-formbar > .btn-primary { flex: 1 1 50%; }

    .connector-application-form { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ============================================================
   共通: ステータスチップは折り返さない
   狭い画面で「確認中」が2行に割れて丸に食い込むのを防ぐ。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-status-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* ============================================================
   05-66-05 申請状況の進行タイムライン
   資料どおり状態ごとに行を塗り分け、指の幅でも現在地が分かるようにする。
   ============================================================ */
@media (max-width: 767.98px) {
    .connector-review-timeline__item {
        align-items: center;
        gap: 12px;
        min-height: 0;
        margin-bottom: 8px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f4f5fa;
    }
    .connector-review-timeline__item.is-done { background: #e9f7f0; }
    .connector-review-timeline__item.is-current { background: #fdf1e5; }
    /* 行を塗ったので縦線は不要 */
    .connector-review-timeline__item:not(:last-child)::before { display: none; }
    .connector-review-timeline__item b {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        font-size: 13px;
    }
    .connector-review-timeline__item small { margin-top: 2px; font-size: 12px; }
}

/* ============================================================
   05-46-05 クーポン一覧 / 05-46-07・10 サイト設定の見出し周り
   狭い画面では「本文にたどり着くまでの高さ」を最優先で削る。
   ============================================================ */
@media (max-width: 767.98px) {
    /* 画面名はヘッダーが担うので、見出し + パンくず + 説明は畳む */
    .ec-coupon-heading > div:first-child { display: none; }

    /* 状態サマリーは4件を1枚の面に圧縮（注文一覧と同じ作法） */
    .ec-coupon-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 4px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .ec-coupon-summary > a {
        min-height: 62px;
        padding: 10px 4px !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .ec-coupon-summary > a > span { font-size: 11px; }
    .ec-coupon-summary > a > b { font-size: 18px; }

    /* サイト編集フローは1行のセグメントへ（状態文言は畳む） */
    .ec-site-flow { border-radius: 12px; }
    .ec-site-flow__item {
        min-width: 0;
        padding: 10px 12px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .ec-site-flow__status { display: none !important; }
    .ec-site-flow__num { width: 20px; height: 20px; font-size: 11px; }
    .ec-site-flow__label { font-size: 12px; }
}

/* ============================================================
   05-46-07 ほか: 設定画面の保存操作を画面下に固定
   ecport-sp.js が最後の保存カードへ .ec-sp-savebar を付ける。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-savebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--ec-sp-tabbar-h, 64px) + env(safe-area-inset-bottom, 0px));
        z-index: 1035;
        margin: 0 !important;
        border: 0 !important;
        border-top: 1px solid #f4eee8 !important;
        border-radius: 0 !important;
        box-shadow: 0 -6px 20px rgba(27, 28, 26, .06) !important;
    }
    .ec-sp-savebar > .card-body { padding: 10px 16px !important; }
    .ec-sp-savebar > .card-body > .d-flex.justify-content-end {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 10px !important;
    }
    .ec-sp-savebar > .card-body > .d-flex.justify-content-end > .btn {
        flex: 1 1 0;
        width: auto !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* 主操作を広く取る */
    .ec-sp-savebar > .card-body > .d-flex.justify-content-end > .btn-primary { flex: 1.6 1 0; }
    .ec-sp-savebar .ajax-save-msg { flex: 0 0 auto; }

    /* 保存バー（ボトムナビの上に重なる）とボトムナビの両方ぶん、フッターを持ち上げる */
    body.has-sp-savebar { --ec-sp-bottom-space: calc(144px + var(--ec-sp-safe-b)); }
}

/* ============================================================
   共通: 見出し行を持たない表（ラベル / 値の2列）
   ecport-sp.js の積み重ねは thead 前提なので効かない。
   固定幅を解いて折り返せるようにし、はみ出しを止める。
   ============================================================ */
@media (max-width: 767.98px) {
    /* ラベル/値だけの表は横スクロールさせず、その場で折り返す */
    .table-responsive.ec-sp-labeltable { overflow-x: visible !important; }
    .ec-sp-labeltable > table {
        table-layout: fixed;
        width: 100%;
    }
    .ec-sp-labeltable > table td {
        width: auto !important;
        max-width: none !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal !important;
    }
    .ec-sp-labeltable > table td:first-child { width: 34% !important; }
    .ec-sp-labeltable > table td a { overflow-wrap: anywhere; }
    /* 金額の内訳（どの行も右端が右寄せの金額）は、金額を1行に収めて残りの幅をラベルに回す。
       34% 固定のままだと、率の説明が付いた長いラベルが数文字ずつ縦に折り返す。 */
    .ec-sp-labeltable > table:has(> tbody > tr > td:last-child.text-end):not(:has(> tbody > tr > td:last-child:not(.text-end))) { table-layout: auto; }
    .ec-sp-labeltable > table:has(> tbody > tr > td:last-child.text-end):not(:has(> tbody > tr > td:last-child:not(.text-end))) td:first-child { width: auto !important; }
    .ec-sp-labeltable > table:has(> tbody > tr > td:last-child.text-end):not(:has(> tbody > tr > td:last-child:not(.text-end))) td.text-end:last-child {
        width: 1% !important;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    .card table:not(:has(thead)) td {
        width: auto !important;
        max-width: none !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .card table:not(:has(thead)) td:first-child { white-space: normal; }
}

/* ============================================================
   共通: 常設お知らせバナーの積み上げを畳む
   4枚並ぶと 390px 幅では本文が画面外へ出るため、先頭1枚だけ見せる。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-banner-hidden { display: none !important; }
    .ec-sp-banner-toggle {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-bottom: 12px;
        padding: 10px 14px;
        border: 1px solid #e7e4dc;
        border-radius: 12px;
        background: #fff;
        color: #f0801f;
        font-size: 13px;
        font-weight: 700;
    }
}

/* ============================================================
   05-23-01 募集作成の工程表示
   7工程のフォームを、横1行のガイドとして流す。
   （折り返すと3行になり、本文が下へ押し出される）
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-wizard-strip {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-height: 44px;
        padding-bottom: 4px;
    }
    .ec-sp-wizard-strip::-webkit-scrollbar { display: none; }
    .ec-sp-wizard-strip > * { flex: 0 0 auto; }
    .ec-sp-wizard-strip .badge { min-width: 22px; }
}

/* ============================================================
   共通: 4枚並びの状態カード（下書き/公開中/停止/終了 など）
   05-48-01 募集管理・05-40-01 商品・05-05 ホーム等で同じ形。
   2×2のカードのままだと 230px を使うため、1枚の面にまとめて2列で並べる。
   1行の横並びは4枚分の幅が画面に入らず、右端のカードが画面の外に隠れ、
   見出しも「受取 / 額（税 / 引後）」のように数文字ずつ割れていた（2026-10-04 売上明細）。
   （テーマのバリエーションカード・プランカードは同じ列クラスでも中身が別物なので除く。
     プランカードは2列に入れると中身が隣のカードに重なっていた（2026-10-08 /plan））
   ============================================================ */
@media (max-width: 767.98px) {
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 !important;
        margin: 0 0 16px;
        padding: 4px 6px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-6.col-xl-3 {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 2列の区切り線。奇数枚のときは最後の1枚を横幅いっぱいにする */
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-6.col-xl-3:nth-child(even) { border-left: 1px solid var(--ec-sp-border); }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-6.col-xl-3:nth-child(n+3) { border-top: 1px solid var(--ec-sp-border); }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-6.col-xl-3:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-6.col-xl-3 > .card {
        height: 100%;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .card-body {
        padding: 10px 12px !important;
    }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .card-body > span { font-size: 11px; }
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .card-body h3 { font-size: 18px; margin-top: 4px !important; }
}

/* ============================================================
   共通: col-md-3 で組まれた指標カード（振込・分析・購読者ほか11画面）
   スマホでは全幅1枚ずつ積まれ、4枚で 380px を使ってしまうため、
   状態カードと同じく1枚の面にまとめて2列で並べる（横並びは右端が隠れていた）。
   同じ列クラス（col-xl-3 col-md-6）のプランカード（/plan）は除き、1枚ずつ全幅で積む。
   ============================================================ */
@media (max-width: 767.98px) {
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)),
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 !important;
        margin: 0 0 16px;
        padding: 4px 6px;
        border-radius: var(--ec-sp-radius-card);
        background: var(--ec-sp-surface);
        box-shadow: 0 2px 12px rgba(27, 28, 26, .05);
    }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6 {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3:nth-child(even),
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6:nth-child(even) { border-left: 1px solid var(--ec-sp-border); }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3:nth-child(n+3),
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6:nth-child(n+3) { border-top: 1px solid var(--ec-sp-border); }
    /* 奇数枚の最後の1枚は横幅いっぱいに。画像付きの商品カード（サイトの商品タブ）は半分の幅のまま */
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3:last-child:nth-child(odd):not(:has(.card-img-top, .img-preview-card-placeholder)),
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6:last-child:nth-child(odd):not(:has(.card-img-top, .img-preview-card-placeholder)) { grid-column: 1 / -1; }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3 > .card,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6 > .card {
        height: 100%;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3 .card-body,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6 .card-body {
        padding: 10px 12px !important;
    }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3 .card-body p,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6 .card-body p { font-size: 11px; margin-bottom: 2px !important; }
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3 .card-body h3,
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-md-3 .card-body h4,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6 .card-body h3,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) > .col-xl-3.col-md-6 .card-body h4 { font-size: 18px; }
}

/* ============================================================
   05-40-04 商品の登録上限バナー
   横並びのまま 390px に入れると、右のボタンが縮まず
   本文が1文字ずつ縦に割れる。スマホでは縦積みにする。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-plan-limit-banner {
        flex-direction: column;
        align-items: stretch !important;
        padding: 16px !important;
    }
    .ec-plan-limit-banner > .d-flex { align-items: flex-start !important; }
    .ec-plan-limit-banner > .d-flex:last-child { gap: 8px; }
    .ec-plan-limit-banner .btn {
        flex: 1 1 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   見出し・説明文とボタンを横に並べた行（.ec-sp-stack）
   スマホでは説明文の列が細くなり「他サ／ービス」のように言葉の途中で折り返す
   （iPhone の Safari は word-break: auto-phrase が効かない）。最初の子（見出し・説明文）を全幅にし、
   残り（ボタン・状態の表示）はその下に左寄せで置く。PC は横並びのまま。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-sp-stack {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }
    .ec-sp-stack > :not(:first-child) { align-self: flex-start; }
}

/* 圧縮した指標ストリップでは装飾アイコンを畳んで数値に幅を渡す */
@media (max-width: 767.98px) {
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .avatar-sm,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .avatar-sm,
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .avatar-sm { display: none !important; }
    /* 畳んだアイコンの右側の余白（ms-3）が残ると、その画面だけ見出しが右にずれる */
    .row:has(> .col-md-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .avatar-sm + .ms-3,
    .row:has(> .col-xl-3.col-md-6 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .avatar-sm + .ms-3,
    .row:has(> .col-6.col-xl-3 > .card):not(:has(> .variant-card-wrapper, > * > .plan-card)) .avatar-sm + .ms-3 { margin-left: 0 !important; }
}

/* ============================================================
   空状態の枠（<x-state.empty> の点線の枠）
   上下の余白しか無く、狭い画面では文字が点線に接するため、左右にも内側の余白をとる。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-state { padding-inline: 16px; }
}

/* ============================================================
   一覧の「検索」ボタン
   画面ごとに塗り・枠線・薄い塗りが混在していたため、スマホでは塗りつぶしにそろえる。
   検索アイコン付きの送信ボタン（共通の検索フォームを含む）と、.ec-search-submit を付けたボタンが対象。
   ecport-pc-design.css がボタン色を !important で持つため、ここも !important で指定する。
   ============================================================ */
@media (max-width: 767.98px) {
    .ec-search-submit,
    button[type="submit"]:has(> .ri-search-line) {
        color: #fff !important;
        background-color: var(--ec-primary) !important;
        border-color: var(--ec-primary) !important;
    }
    .ec-search-submit:hover,
    .ec-search-submit:focus,
    button[type="submit"]:has(> .ri-search-line):hover,
    button[type="submit"]:has(> .ri-search-line):focus {
        color: #fff !important;
        background-color: var(--ec-primary-hover) !important;
        border-color: var(--ec-primary-hover) !important;
    }
}