/* ============================================================
   responsive.css — スマホ・タブレット対応
   ブレークポイント: 768px
   ============================================================ */

/* ── ハンバーガーボタン（デスクトップでは非表示） ── */
#hamburger-btn {
    display: none;
    position: fixed;
    top: 4px;
    right: 10px;
    z-index: 20000;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
}
#hamburger-btn span,
#hamburger-btn span::before,
#hamburger-btn span::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s;
}
#hamburger-btn span::before,
#hamburger-btn span::after {
    content: '';
    position: absolute;
}
#hamburger-btn span::before { top: -7px; }
#hamburger-btn span::after  { top:  7px; }

/* ハンバーガー → × */
#hamburger-btn.open span         { background: transparent; }
#hamburger-btn.open span::before { transform: rotate(45deg);  top: 0; }
#hamburger-btn.open span::after  { transform: rotate(-45deg); top: 0; }

/* ── モバイルメニューオーバーレイ ── */
#mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    height: calc(100% - 30px);
    background: #303030;
    z-index: 15000;
    overflow-y: auto;
    padding-bottom: 40px;
}
#mobile-nav-overlay.open { display: block; }

#mobile-nav-overlay ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#mobile-nav-overlay > ul > li > a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #444;
    background: #3a3a3a;
}
#mobile-nav-overlay > ul > li > a::after {
    content: ' ›';
    float: right;
    color: #aaa;
}
#mobile-nav-overlay .mob-sub {
    display: none;
    background: #252525;
}
#mobile-nav-overlay .mob-sub.open { display: block; }
#mobile-nav-overlay .mob-sub li a {
    display: block;
    padding: 10px 28px;
    color: #ddd;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #333;
}
#mobile-nav-overlay .mob-sub li a:hover { background: #333; }

/* ── @media: 768px以下 ── */
@media (max-width: 768px) {

    /* --- 横はみ出しの最後の砦 ---
       固定幅要素や広い表が画面幅を超えても、ページ枠ごと横スクロールする事象を止める。
       (広い表は .resp-scroll/.resp-card で内部スクロール・カード化して中身は見られる) */
    html, body      { overflow-x: hidden; }

    /* --- 基本レイアウト --- */
    .wrapper        { padding: 0 6px; }
    .body_wrapper   { padding: 4px 6px 20px; }
    .innerWrapper   { border: none; }

    /* ナビ非表示・ハンバーガー表示 */
    #navi_task          { display: none; }
    #hamburger-btn      { display: block; }

    /* taskbarの高さ調整（タイトル文字が見切れないよう） */
    div#taskbar { min-height: 30px; }

    /* ページ全体のpadding-top（固定ヘッダ分） */
    body { padding-top: 32px !important; }

    /* --- テーブル → カード表示 --- */
    table.resp-card,
    .resp-card-wrap table {
        width: 100% !important;
        border-collapse: collapse;
    }

    table.resp-card thead,
    .resp-card-wrap table thead {
        display: none;  /* ヘッダ行を隠す */
    }

    table.resp-card tr,
    .resp-card-wrap table tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        padding: 4px 0;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    table.resp-card td,
    .resp-card-wrap table td {
        display: flex;
        align-items: baseline;
        gap: 6px;
        padding: 5px 10px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
        word-break: break-all;
    }

    table.resp-card td:last-child,
    .resp-card-wrap table td:last-child { border-bottom: none; }

    table.resp-card td::before,
    .resp-card-wrap table td::before {
        content: attr(data-label);
        flex: 0 0 7em;
        font-weight: bold;
        color: #555;
        font-size: 11px;
        white-space: nowrap;
    }

    /* --- スクロール可能テーブル（カード不向きな場合）--- */
    .resp-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }
    .resp-scroll table {
        min-width: 600px;
    }

    /* --- フォーム --- */
    .resp-form table,
    .resp-form tr,
    .resp-form td,
    .resp-form th {
        display: block;
        width: 100% !important;
    }
    .resp-form input[type=text],
    .resp-form input[type=date],
    .resp-form input[type=tel],
    .resp-form input[type=email],
    .resp-form select,
    .resp-form textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px; /* iOS拡大防止 */
        margin: 2px 0;
    }

    /* --- ページタイトル --- */
    .page_title {
        font-size: 13px !important;
        padding: 4px 8px !important;
    }

    /* --- ボタン --- */
    input[type=submit], input[type=button], button {
        min-height: 36px;
        font-size: 14px;
    }

    /* --- 検索バー --- */
    #search_box, .search_area {
        flex-wrap: wrap;
    }

    /* --- admin_top: サイドバイサイドのtd → 縦積み --- */
    #admin-top-grid td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* --- 外部リンクバー(.headline5)はハンバーガー内に格納するためモバイルでは非表示 --- */
    .headline5 {
        display: none !important;
    }

    /* --- 顧客詳細の各セクション --- */
    .cust-detail-section {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- floatThead固定ヘッダ無効化（モバイルでは不要）--- */
    .floatThead-container,
    .floatThead-wrapper { overflow: visible !important; }

    /* --- ログイン画面 --- */
    .loginform_circle {
        width: 90% !important;
        padding: 20px 16px !important;
        margin: 20px auto !important;
    }

    /* --- センタリングされたtable --- */
    .center_table {
        width: 100% !important;
    }

    /* --- 共通の保険(個別クラス未適用ページの横はみ出し抑制) --- */
    /* 画像・メディアは画面幅に収める */
    img, video, canvas, iframe, embed { max-width: 100%; height: auto; }
    /* 主要コンテンツ領域: 中の広い表は領域内で横スクロール(ページ全体を溢れさせない) */
    .content_body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* 長いURL・英数字の折り返し */
    .content_body td, .content_body p { word-break: break-word; overflow-wrap: anywhere; }

    /* ── ページ固有の横スクロール対応 ─────────────────────── */

    /* ★横スクロール枠の共通の罠:
       overflow-x:auto を当てた div の中に table{width:100%} があると、
       相互参照で div 側が極端に細く(例:163px)潰れる。
       width:100% + box-sizing:border-box を必ず併記して全幅を固定する。 */

    /* タイムカード(new_timecard): subTable 3本を横スクロール対応 */
    table.subTable {
        display: block;
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 顧客一覧(saimu_cust_admin): 並び順フォームテーブル */
    .view_select_column_log {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .view_select_column_log table { white-space: nowrap; }

    /* 顧客詳細(saimu_cust_creditor_admin): 顧客基本情報テーブル(.form_table) */
    .form_table {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 顧客詳細: 連絡先(600px)・物件(640px)の固定幅テーブルを枠内スクロールに */
    .default_table > table[style*="width:600px"],
    .default_table > table[style*="width:640px"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 500px; /* カラム幅を最低限保持 */
        box-sizing: border-box;
    }
}

/* ── PC(769px以上): 固定ヘッダー(#taskbar)分の上余白を全ページ共通で確保 ──
   #taskbar は position:fixed のため、無いとページ名が潜り込んで埋没する。
   モバイルは上の @media(max-width:768px){ body{padding-top:32px} } で確保済み、
   その PC 版にあたる。兄弟結合子(#taskbar ~ .body_wrapper)で「#taskbar を持つ
   ページ」だけに効くので、login(login_header.php・#taskbar無し)には影響しない。
   詳細度は #taskbar ~ .body_wrapper = 110。base(.body_wrapper=10)・
   tablet(.body_wrapper=10)・admin_top個別(.innerWrapper>.body_wrapper=20)の
   いずれより高いので、padding-top:32px が確実に勝つ(左右下paddingは各規則を維持)。 */
@media (min-width: 769px) {
    #taskbar ~ .body_wrapper { padding-top: 32px; }
}

/* ── タブレット（769〜1024px）: 最小限調整 ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .wrapper      { padding: 0 10px; }
    /* padding-top は上の #taskbar ~ .body_wrapper(詳細度110)が優先=32px。
       ここは左右下(10px/10px/20px)のみ実効。 */
    .body_wrapper { padding: 4px 10px 20px; }
}