@media (max-width: 1050px) {
    .edit-popup {
        width: 70vw;  /* パソコン以外では80%に設定 */
    }

    .tehai-app-page {
        position: relative; /* 子要素の配置を制御するためにpositionを設定 */
        margin: 0 2vw;
    }

    /* ヘッダーの左右も本体と同じ 2vw にそろえる（ロゴと案件一覧の左端を合わせる） */
    .sashite-hero-inner {
        padding-left: 2vw;
        padding-right: 2vw;
    }

    .tehai-app-page h2 {
        font-size: 20px;
    }

    #customerName, #projectName, #projectAddress, #projectMemo {
        width: 150px;
    }

    /* .ops-projectList（「？」の説明の模型）も一緒に小さくする */
    #projectList input,
    .ops-projectList input {
        height: 20px;
        font-size: 11px;
        max-width: 90px;
        width: 90px;
    }
    
    .staffList-Container li{
        width: 90px;
        max-width: 90px;
        height: 20px;
        font-size: 11px;
    }

    .morningStaffList p,.afternoonStaffList p,.nightStaffList p {
        height: 14px;
        font-size: 10px;
        margin: 5px 0;
        color: #333;
    }

    .morningDataCount p, .afternoonDataCount p, .nightDataCount p {
        height: 14px;
        font-size: 10px;
        margin: 5px 0;
        color: #333;
    }

}

@media (max-width: 660px) {
    .edit-popup {
        width: 90vw /* パソコン以外では80%に設定 */
    }
    input {
        touch-action: manipulation; /* タッチでのズームやパンを防止 */
        -webkit-text-size-adjust: 100%; /* テキストサイズを調整しないようにする */
    }

    .plan-date-container {
        flex-direction: column; /* スマホでは縦に並べる */
        align-items: flex-start;
    }

    .togglebutton-container {
        width: 100%; /* 横幅いっぱいにする */
        margin-top: 10px; /* 上の要素との間に余白を追加 */
        justify-content: space-between; /* ボタンを横並びにする */
    }

    #toggleButton, #mobileToggleButton {
        width: 48%; /* ボタンを50%弱の幅に */
    }

    #projectForm {
        width: 100%;
    }
    /* スマホ向けのレイアウト */
    .form-and-staff-container {
        flex-direction: column; /* 縦並びに変更 */
        height: auto; /* 固定高さを廃止: コンテンツが350px超えるとボタンがはみ出す */
    }

    .staff-input-container, 
    .form-container {
      width: 100%; /* 横幅いっぱいに広げる */
      margin-left: 0; /* 左の余白を削除 */
    }

    .staff-input-container input {
      width: 100%; /* 入力フィールドも横幅いっぱいに */
    }
    
    /* 親要素で垂直方向の位置を揃える */
    .project-and-staff-list-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* 子要素を上端で揃える */
        width: 100%;
        margin-top: 20px;
    }

    .projectList-header, .staffList-header {
        height: 33px;
    }


    /* 高さを統一する */
    .projectList-container, .staffList-Container {
        height: auto; /* 高さを自動調整に */
        min-height: 70vh; /* 同じ最低高さを設定 */
        min-height: 70svh;
        box-sizing: border-box;
    }
    
    .projectList-container {
        /* 【変更 2026-09-08】73% → 71%。
           スタッフ一覧側のボタンが3行に折り返していたため、ほんの少しだけ譲る。
           折り返しの主因はボタンの文字が14pxと大きかったことなので、
           そちらを詰めることで、案件側は2%の変更で収まっている。 */
        width: 71%;
        box-sizing: border-box;
    }

    .project-item {
        display: flex;
        flex-direction: column;
    }

    /* プロジェクト名の上部にボタンを配置 */
    .project-header-buttons {
        order: -1; /* .project-name の上に配置 */
        margin-bottom: 5px;
    }


    /* 【追加 2026-09-08】案件側・スタッフ側どちらのボタンも同じ大きさにする。
       2行に折って使う小さなボタンなのに本文と同じ14pxだったため、
       狭いスタッフ側では横に並びきらず3行になっていた。
       片側だけ小さくすると左右で見た目が揃わないので、両方まとめて整える。
       文字が途中で折れないようにもしておく（<br> の位置でだけ2行になる）。 */
    .projectList-header .clear-button,
    .staffList-header .clear-button { gap: 4px; }
    .projectList-header .clear-button button,
    .staffList-header .clear-button button {
        font-size: 12px;
        line-height: 1.3;
        padding: 4px 6px;
        white-space: nowrap;
    }

    .staffList-Container {
        /* 【変更 2026-09-08】27% → 29%（左から回した2%ぶん） */
        width: 29%;
        margin-left: 10px;
        box-sizing: border-box;
        position: relative; /* relativeを使うことで位置の調整がしやすくなる */
        z-index: 5; /* 必要に応じて調整 */
    }
    
        /* スタッフリストの親要素にrelativeを設定 */
    .staffList {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        position: relative; /* 親要素をrelativeにして、子要素のabsoluteを制御 */
        height: 70vh; /* 必要な高さを設定 */
        height: 70svh;
    }

    /* morningStaffList, afternoonStaffList, nightStaffListを重ねて表示 */
    .morningStaffList, .afternoonStaffList, .nightStaffList {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* 横幅いっぱいに広げる */
        z-index: 1; /* `z-index`を最低限設定 */
        opacity: 0; /* 初期状態は非表示 */
        transition: opacity 0.3s ease; /* 表示切替時のアニメーション */
    }

    /* 表示切り替え時に適用するclass */
    .morningStaffList.active, .afternoonStaffList.active, .nightStaffList.active {
        opacity: 1; /* アクティブなリストを表示 */
        z-index: 5; /* active時のみ前面に表示 */
    }

    .tehai-app-page button {
        font-size: 14px;
    }

    .tehai-app-page button {
        font-size: 14px;
    }

    .tehai-app-page label {
        font-size: 16px;
    }

    .tehai-app-page h1 {
        font-size: 26px;
    }

    .tehai-app-page h2 {
        font-size: 22px;
    }

    .tehai-app-page h3 {
        font-size: 20px;
    }

    .tehai-row h3 {
        font-size: 14px;
    }

    .tehai-app-page h4 {
        font-size: 16px;
    }

    .project-and-staff-list-container button {
        font-size: 12px;
    }

    .project-and-staff-list-container h3 {
        font-size: 16px;
    }
    
    .project-and-staff-list-container h4 {
        font-size: 13px;
    }

    .project-and-staff-list-container h5 {
        font-size: 12px;
    }
}

/* ========== アクションボタン ＋ ？ バッジ (モバイル) ========== */
/* ？はPC・モバイル共通でボタン内右端絶対配置のまま。
   ラッパーだけ縦積みにしてボタンを全幅にする。 */
@media (max-width: 660px) {
    .action-row-assign {
        flex-direction: column;
        gap: 8px;
    }
    .action-btn-wrap {
        width: 100%;
    }
    .action-btn-wrap .autoAssignButton {
        width: 100%;
    }
    .travel-btn-wrap .travel-main-btns {
        width: 100%;
    }
}

/* ========== クレジットミニゲージ / ナビボタン (モバイル) ========== */
@media (max-width: 660px) {
    .report-back-links {
        flex-direction: column;
        align-items: stretch;
    }
    .credit-gauge-mini {
        width: 100%;
        min-width: unset;
        order: -1; /* ボタン群の上に表示 */
    }
    .report-back-btn {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ══════════════════════════════════════════════════════════
   枠に依存しない指定（2026-09-11・時間枠の可変化）
   スマホでは案件一覧の幅（画面の71%）に枠の数だけ並ぶので、4つ以上は文字を詰める。
   文言そのものも短くしている（「必要12人」「当済8人」。PHP/JSが枠の数で切り替える）
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1050px) {
    .frame-count p  { height: 14px; font-size: 10px; margin: 5px 0; color: #333; }
    .frame-staff p  { height: 14px; font-size: 10px; margin: 5px 0; color: #333; }

    /* 枠が4つ以上：スキマをさらに詰めて、中身の文字を優先する。
       ★タイトルの見た目は案件一覧と出勤スタッフ一覧で同じに保つこと（左右が対だと分かるように） */
    .projectList-DataCount.is-many,
    .staffList.is-many { --frame-gap: 1.5%; }

    .projectList-DataCount.is-many .frame-count h4,
    .staffList.is-many .frame-staff h4 { font-size: 11px; height: 22px; }
    .projectList-DataCount.is-many .frame-count p,
    .staffList.is-many .frame-staff p  { font-size: 9.5px; letter-spacing: -0.02em; }
}

@media (max-width: 660px) {
    /* 枠を選ぶタブはスマホでだけ出す（枠が4つ以上のときだけHTMLに存在する） */
    .frame-tabs {
        display: flex;
        gap: 4px;
        width: 100%;
        margin: 6px 0 2px;
        box-sizing: border-box;
    }

    /* スタッフ一覧は枠ごとに切り替えて重ねる。
       既存の3枠と同じやり方（重ねて opacity で出し分け）にそろえる */
    .frame-staff {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .frame-staff.active {
        opacity: 1;
        z-index: 5;
    }
}

/* ========== 保存・出力の固定バー／反映の箱 (モバイル・2026-09-15) ========== */
@media (max-width: 660px) {
    /* 画面の縁（面取り・ホームバー）に被らないよう、少し浮かせた札にする（マサさん指摘 2026-09-15） */
    .tehai-dockbar {
        left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 8px 10px; border: 1px solid rgba(30,58,95,0.16); border-radius: 24px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }
    /* 引っ込んだときの取っ手：親指で押せる大きさの紺のピル（iPhone で小さすぎたので 2026-09-15）。ホームバーの上に乗る */
    body.dockbar-hidden .tehai-dockbar { transform: translateY(calc(100% + 10px)); }
    .tehai-dockbar .dockbar-handle {
        top: -58px; height: 48px; padding: 0 26px 0 20px; gap: 12px;
        border: none; border-radius: 999px; background: #1e3a5f; color: #fff;
        font-size: 14px; font-weight: 700; line-height: 48px; box-shadow: 0 6px 18px rgba(30,58,95,0.35);
    }
    .tehai-dockbar .dockbar-handle:hover { background: #2f5d8f; }
    .tehai-dockbar .dockbar-handle span { width: 22px; height: 5px; background: rgba(255,255,255,0.7); }
    .tehai-dockbar .dockbar-handle::after { content: "を出す"; font-weight: 700; margin-left: -8px; }
    /* 縦3段（マサさん選定 B＋D・2026-09-15）：出力は細い白抜き → 保存は太い赤 → 状態の1行（場所は最初から確保） */
    .tehai-dockbar .dockbar-inner { max-width: none; flex-direction: column; gap: 6px; }
    .tehai-app-page .tehai-dockbar .sendEmail  { order: 1; flex: 0 0 auto; height: 38px; border-radius: 12px; font-size: 13px; padding: 0 10px; }
    .tehai-app-page .tehai-dockbar .saveButton { order: 2; flex: 0 0 auto; height: 58px; border-radius: 14px; font-size: 16px; letter-spacing: 0.04em; padding: 0 12px; }
    .tehai-dockbar .dockbar-status { order: 3; min-width: 0; padding: 1px 2px 0; font-size: 11px; white-space: normal; }
    .tehai-dockbar .dockbar-tools { display: none; }      /* スマホは畳む・位置の操作なし（引っ込みはスクロールで） */
    .tehai-app-page { padding-bottom: 116px; }
    .tehai-relay .relay-summary { font-size: 14px; padding: 11px 12px; }
    .tehai-relay .relay-summary { flex-wrap: wrap; gap: 8px 10px; padding-left: 14px; }
    .tehai-relay .relay-chev { order: 2; margin-left: auto; }                 /* 1行目：アイコン・題・丸い山形 */
    .tehai-relay .relay-status { order: 3; display: block; width: 100%; margin: 0; text-align: left; font-size: 11px; }   /* 2行目：直近の結果 */
}