body {
    font-family: Arial, sans-serif;
    padding: 20px;
    overflow-x: hidden;
}

.form-row {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    gap: 10px;
    margin-bottom: 10px;
}

.form-row label {
    min-width: 100px;
    margin-right: 10px;
    text-align: right;
    display: inline-block;
}

.form-row label[for="customerName"] {
    min-width: 100px;
    margin-right: 10px;
    text-align: right;
}

.form-row label[for="customerCode"] {
    min-width: 80px;
    margin-right: 10px;
    margin-left: 0;
    text-align: right;
}

.form-row input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
    margin-right: 10px;
    vertical-align: middle;
}

.form-row button {
    margin-right: 10px;
    vertical-align: middle;
}

.form-row select {
    margin-right: 10px; /* スペースを追加 */
    vertical-align: middle;
}

.customer-name {
    font-weight: bold;
    color: #333;
}

#customerCode {
    width: 100px !important;
    max-width: 100px !important;
    min-width: 0 !important;
    flex: none;
    margin-right: 10px;
}

#customerName {
    flex: none;
    max-width: 200px;
    width: 200px;
    margin-right: 10px;
    background-color: #FFFDEB !important;
}

#productCode {
    width: 100px;
}

#productName, #productSpecification {
    width: 200px;
}

#registerButton {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#registerButton:hover {
    background-color: #45a049;
}

/* ナビゲーションバーの設定 */
.navbar {
    display: flex;
    justify-content: space-between;
    background-color: black;
    padding: 10px;
}

.navbar-menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar-item {
    margin-right: 20px;
    color: white;
}

.navbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.navbar-item:last-child {
    margin-left: auto;
}

.navbar-item a {
    color: white;
    text-decoration: none;
    display: block;
}

/* トップページ専用のスタイル */
.top-page-container {
    display: flex;
    flex-wrap: nowrap;
}

.top-page-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: #f4f4f4;
    padding: 15px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.top-page-sidebar h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.top-page-sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.top-page-sidebar li {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f0f0f0;
    border-radius: 5px;
    border: 2px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block !important;
    width: calc(25% - 10px);
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.top-page-sidebar li:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.top-page-sidebar span {
    display: inline-block;
    font-weight: bold;
    color: #333;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24px !important;
}

.top-page-sidebar span:first-child {
    width: 60px;
    text-align: left;
    padding-right: 5px;
    font-size: 24px !important;
}

.top-page-sidebar span:last-child {
    width: calc(100% - 65px);
    text-align: left;
    font-size: 24px !important;
}

.top-page-sidebar a {
    text-decoration: none;
    color: #333;
}

.top-page-content {
    flex-grow: 1;
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column; /* 縦方向に要素を配置 */
}
/* 得意先商品管理のテーブルスタイル */
#productList {
    width: 100%; /* ここでテーブルの幅を設定しています */
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    table-layout: fixed;
}

#productList th, #productList td {
    border: 1px solid #ccc;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* フォームレイアウトの調整 */
.content-section-form .form-row {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.content-section-form label {
    min-width: 100px;
    margin-right: 10px;
}

/* 小さいボタンのスタイル */
.small-button {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.small-button:hover {
    background-color: #0056b3;
}

/* サイドバーヘッダーのスタイル */
.sidebar-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}
/* 納品方法と受注種別の選択欄の幅を調整 */
#deliveryMethod,
#orderType {
    flex: 0.3; /* flexを0.25に設定して幅を1/4に */
    max-width: 100px; /* 最大幅も設定 */
}

/* 納期入力欄のサイズ調整 */
#deliveryDate {
    flex: 0.5; /* flexを0.5に設定して幅を1/2に */
    max-width: 150px; /* 最大幅も設定 */
    background-color: #FFFDEB !important;
}

/* 既存のスタイルを上書き */
.content-section-form input:not(#deliveryMethod):not(#orderType):not(#deliveryDate):not(#customerCode):not(#customerName) {
    flex: 1;
    max-width: 300px;
    padding: 8px;
}

/* 検索ボタンのマージン調整 */
.content-section-form button[type="submit"] {
    margin-left: 0;
}

#customerNoteDisplay {
    margin-left: 0;
    flex: 2;
}

.direct-search-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.direct-search-btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.direct-search-btn:hover {
    background-color: #0056b3;
}

.history-reference-btn {
    background-color: #28a745 !important;
    color: white !important;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.history-reference-btn:hover {
    background-color: #218838 !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .content-section-form .form-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .content-section-form label {
        margin-bottom: 5px;
    }

    .content-section-form input,
    .content-section-form select {
        width: 100%;
        max-width: none;
    }

    .content-section-form button[type="submit"] {
        margin: 10px 0;
    }

    #customerNoteDisplay {
        margin: 10px 0;
        width: 100%;
    }
    
    .direct-search-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .direct-search-btn,
    .history-reference-btn {
        width: 100%;
    }
}
/* 得意先検索候補のスタイル修正 */
#customerSuggestions {
    position: absolute;
    top: 100%; /* 親要素の下端に配置 */
    left: 110px; /* 得意先名ラベルの幅に合わせて調整（min-widthが100pxでmargin-rightが10px） */
    width: auto; /* 幅を自動調整 */
    min-width: 300px; /* 最小幅を設定 */
    max-width: 500px; /* より大きなサジェスト表示領域 */
    max-height: 300px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #e9bcbc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none; /* 初期状態は非表示 */
    margin-top: 2px;
}

/* スクロールバーのスタイル調整 */
#customerSuggestions::-webkit-scrollbar {
    width: 8px;
}

#customerSuggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#customerSuggestions::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#customerSuggestions::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#customerSuggestions div {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    white-space: nowrap; /* テキストを折り返さない */
}

#customerSuggestions div:last-child {
    border-bottom: none;
}

#customerSuggestions div:hover {
    background-color: #fab1bc; /* 得意先検索候補 */
    color: #333; /* テキストの色を少し濃く */
    transition: background-color 0.2s ease; /* 滑らかな色の変化 */
}

/* テーブルのヘッダーを中央揃えに統一（個別スタイルの後に配置し、優先度を高くする） */
.search-product-list th,
.index-product-list th,
#productList th {
    text-align: center !important;
    background-color: #f5f5f5;
    font-weight: bold;
}

/* テーブルのカラム幅の標準化 - index.html用 */
.search-product-list th:nth-child(1),
.search-product-list td:nth-child(1),
.index-product-list th:nth-child(1),
.index-product-list td:nth-child(1) {
    width: 5% !important;
    text-align: center ;
}

/* 商品コード入力欄のスタイル統一 - index.html用 */
.search-product-list th:nth-child(2),
.search-product-list td:nth-child(2),
.index-product-list th:nth-child(2),
.index-product-list td:nth-child(2) {
    width: 7% !important;
    text-align: right ;
}

/* 商品名のスタイル統一 - index.html用 */
.search-product-list th:nth-child(3),
.search-product-list td:nth-child(3),
.index-product-list th:nth-child(3),
.index-product-list td:nth-child(3) {
    width: 22% !important;
    text-align: left ;
}

/* 商品規格のスタイル統一 - index.html用 */
.search-product-list th:nth-child(4),
.search-product-list td:nth-child(4),
.index-product-list th:nth-child(4),
.index-product-list td:nth-child(4) {
    width: 18% !important;
    text-align: left ;
}

/* 仕立・ケース入数スタイル統一 - index.html用 */
.search-product-list th:nth-child(5),
.search-product-list td:nth-child(5),
.search-product-list th:nth-child(6),
.search-product-list td:nth-child(6),
.index-product-list th:nth-child(5),
.index-product-list td:nth-child(5),
.index-product-list th:nth-child(6),
.index-product-list td:nth-child(6),
#productList td:nth-child(5),
#productList td:nth-child(6) {
    width: 7% !important;
    text-align: right !important;
}

/* 基準在庫入力欄のスタイル統一 - index.html用 */
.index-product-list th:nth-child(7),
.index-product-list td:nth-child(7) {
    width: 6% !important;
    text-align: right ;
}
/* 注文数入力欄のスタイル統一 - index.html用 */
.search-product-list th:nth-child(7),
.search-product-list td:nth-child(7),
.index-product-list th:nth-child(8),
.index-product-list td:nth-child(8) {
    width: 8% !important;
    text-align: right ;
}
/* 納期入力欄のスタイル統一 - index.html用 */
.search-product-list th:nth-child(8),
.search-product-list td:nth-child(8),
.index-product-list th:nth-child(9),
.index-product-list td:nth-child(9) {
    width: 6% !important;
    text-align: center ;
}
/* 納品方法入力欄のスタイル統一 - index.html用 */
.search-product-list th:nth-child(9),
.search-product-list td:nth-child(9),
.index-product-list th:nth-child(10),
.index-product-list td:nth-child(10) {
    width: 4% !important;
    text-align: center ;
}
/* 商品メモ入力欄のスタイル統一 - index.html用 */
.search-product-list th:nth-child(10),
.search-product-list td:nth-child(10),
.index-product-list th:nth-child(11),
.index-product-list td:nth-child(11) {
    width: 10% !important;
    text-align: left !important;
}

/* 商品備考欄のスタイル統一 - index.html用 */
.index-product-list th:nth-child(12),
.index-product-list td:nth-child(12) {
    width: 14% !important;
    text-align: left !important;
}

/* 注文数入力欄のスタイル統一 - 共通 */
.index-product-list td:nth-child(8) input,
.search-product-list td:nth-child(7) input,
#productList td:nth-child(8) input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    text-align: right;
    padding: 0 5px;
}

/* 商品直接検索セクションのスタイル改善 */
.content-section-search {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    background-color: #f9f9f9;
    position: relative;
    z-index: 3000 !important; /* テーブルセクションより上 */
    overflow: visible !important;
}

.content-section-search h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.search-product-list {
    width: 100%;
    border-collapse: collapse;
}

.search-product-list th,
.search-product-list td {
    padding: 8px 5px;
    text-align: center;
    border: 1px solid #ddd;
}

.search-product-list th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.search-product-list input,
.search-product-list select {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}


/* <>index-product-list用のスタイルを追加 */
.index-product-list {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* 自動調整に変更 */
    min-width: 100%;
    border: 1px solid #ddd; /* テーブル自体に枠線を追加 */
}

.index-product-list th, 
.index-product-list td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* 改行を許可 */
}

.index-product-list td:nth-child(7) input:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

.index-product-list tbody tr:hover {
    background-color: #f0f8ff;
    cursor: pointer;
}

.index-product-list tr.selected-row {
    background-color: #e6f3ff;
}

/* 列幅の動的調整 */
#productList th:nth-child(1), #productList td:nth-child(1) {
    width: 60px; /* 仕入のカラム幅 - 固定 */
    min-width: 60px;
    max-width: 60px;
    text-align: center; /* 中央揃え */
}

#productList th:nth-child(2), #productList td:nth-child(2) {
    width: 80px; /* 商品CDのカラム幅 */
    min-width: 80px;
    max-width: 120px;
    text-align: right; /* 商品CDは右揃え */
}

#productList th:nth-child(3), #productList td:nth-child(3) {
    min-width: 200px; /* 商品名の最小幅 */
    max-width: none; /* 最大幅の制限を解除 */
    text-align: left; /* 商品名は左揃え */
    white-space: normal; /* 改行を許可 */
}

#productList th:nth-child(4), #productList td:nth-child(4) {
    min-width: 150px; /* 商品規格の最小幅 */
    max-width: none; /* 最大幅の制限を解除 */
    text-align: left; /* 商品規格は左揃え */
    white-space: normal; /* 改行を許可 */
}

#productList th:nth-child(5), #productList td:nth-child(5) {
    width: 60px; /* 仕立のカラム幅 */
    min-width: 60px;
    max-width: 80px;
    text-align: right; /* 右揃えに変更 */
}

#productList th:nth-child(6), #productList td:nth-child(6) {
    width: 50px; /* c/sのカラム幅 */
    min-width: 50px;
    max-width: 70px;
    text-align: right; /* 右揃えに変更 */
}

#productList th:nth-child(7), #productList td:nth-child(7) {
    width: 80px; /* 基準在庫のカラム幅 */
    min-width: 80px;
    max-width: 100px;
    text-align: right; /* 数値なので右揃え */
}

#productList th:nth-child(8), #productList td:nth-child(8) {
    width: 80px; /* 注文数のカラム幅 */
    min-width: 80px;
    max-width: 100px;
    text-align: right; /* 右揃えに変更 */
}

#productList th:nth-child(9), #productList td:nth-child(9) {
    min-width: 100px; /* 納期の最小幅 */
    max-width: 140px; /* 最大幅の制限 */
    text-align: center; /* 中央揃え */
}

#productList th:nth-child(10), #productList td:nth-child(10) {
    min-width: 90px; /* 納品方法の最小幅 */
    max-width: 100px; /* 最大幅制限 */
    text-align: center;
}

#productList th:nth-child(11), #productList td:nth-child(11) {
    min-width: 120px; /* 商品メモの最小幅 */
    max-width: 200px; /* 最大幅制限 */
    text-align: left;
}

#productList th:nth-child(12), #productList td:nth-child(12) {
    min-width: 120px; /* 商品備考の最小幅 */
    max-width: none; /* 最大幅の制限を解除 */
    text-align: left; /* 商品備考は左揃え */
    white-space: normal; /* 改行を許可 */
}

/* ツールチップ機能 */
#productList td:nth-child(4):hover::after,
#productList td:nth-child(5):hover::after,
#productList td:nth-child(11):hover::after,
#productList td:nth-child(12):hover::after {
    content: none;
}

/* table-responsiveコンテナの改善 */
.content-section-table .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    border: none; /* 枠線を削除 */
    border-radius: 5px;
    background-color: white;
    box-shadow: none; /* 影を削除 */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    max-height: none; /* 高さ制限を解除 */
}

/* スクロールバーのスタイリング */
.content-section-table .table-responsive::-webkit-scrollbar {
    height: 6px; /* より小さいスクロールバー */
}

.content-section-table .table-responsive::-webkit-scrollbar-track {
    background: #f5f5f5; /* より明るい背景 */
    border-radius: 3px;
}

.content-section-table .table-responsive::-webkit-scrollbar-thumb {
    background: #aaa; /* より明るいスクロールバー */
    border-radius: 3px;
}

.content-section-table .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #888; /* ホバー時の色を明るく */
}

/* レスポンシブ対応の改善 */
@media screen and (max-width: 1200px) {
    #productList th:nth-child(4), #productList td:nth-child(4) {
        max-width: 300px;
    }
    
    #productList th:nth-child(5), #productList td:nth-child(5) {
        max-width: 250px;
    }
    
    #productList th:nth-child(10), #productList td:nth-child(10) {
        max-width: 150px;
    }
}

@media screen and (max-width: 968px) {
    #productList th:nth-child(4), #productList td:nth-child(4) {
        max-width: 250px;
        min-width: 150px;
    }
    
    #productList th:nth-child(5), #productList td:nth-child(5) {
        max-width: 200px;
        min-width: 120px;
    }
    
    #productList th:nth-child(11), #productList td:nth-child(11) {
        max-width: 120px;
        min-width: 100px;
    }
    
    #productList th:nth-child(12), #productList td:nth-child(12) {
        max-width: 150px;
        min-width: 100px;
    }
}

@media screen and (max-width: 768px) {
    .content-section-search {
        margin-bottom: 10px;
    }
    
    .search-product-list th,
    .search-product-list td {
        font-size: 12px;
        padding: 6px;
    }
    
    .search-product-list input,
    .search-product-list select {
        font-size: 12px;
        padding: 4px 6px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* モバイルでの商品一覧テーブル調整 */
    #productList {
        font-size: 12px;
    }
    
    #productList th, #productList td {
        padding: 4px 2px;
    }
    
    #productList th:nth-child(4), #productList td:nth-child(4) {
        max-width: 180px;
        min-width: 120px;
    }
    
    #productList th:nth-child(5), #productList td:nth-child(5) {
        max-width: 150px;
        min-width: 100px;
    }
    
    #productList th:nth-child(10), #productList td:nth-child(10) {
        max-width: 100px;
        min-width: 80px;
    }
}

@media screen and (max-width: 480px) {
    .content-section-search h2 {
        font-size: 14px;
    }
    
    .search-product-list th,
    .search-product-list td {
        font-size: 10px;
        padding: 4px 2px;
    }
    
    .content-section-inner .table-responsive {
        font-size: 11px;
    }
    
    /* 極小デバイスでの調整 */
    #productList {
        font-size: 10px;
    }
    
    #productList th, #productList td {
        padding: 3px 1px;
    }
    
    #productList th:nth-child(4), #productList td:nth-child(4) {
        max-width: 120px;
        min-width: 80px;
    }
    
    #productList th:nth-child(5), #productList td:nth-child(5) {
        max-width: 100px;
        min-width: 70px;
    }
    
    #productList th:nth-child(11), #productList td:nth-child(11) {
        max-width: 100px;
        min-width: 80px;
    }
    
    #productList th:nth-child(12), #productList td:nth-child(12) {
        max-width: 120px;
        min-width: 80px;
    }
    
}

/* フェードイン/アウトアニメーション */
.fade-in {
    animation: fadeIn 0.3s ease-in-out forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* 得意先名入力欄の親要素に相対位置を設定 */
.form-row:has(#customerName) {
    position: relative;
}

/* CSS fallback (for browsers that don't support :has) */
.form-row:nth-of-type(2) {
    position: relative;
}
/* 商品検索候補の表示位置を調整 */
.search-product-list td {
    position: relative; /* 相対位置指定で子要素の絶対位置の基準点に */
}

.product-suggestions {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 300px;
    max-width: 600px;
    z-index: 10000 !important;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow-y: auto;
    max-height: 300px;
    display: none;
}

.product-suggestions.show {
    display: block !important;
    animation: fadeIn 0.2s ease-in-out forwards;
}

/* デバッグ用：商品検索候補を強制表示 */
.product-suggestions[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
}

.product-suggestions div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    background-color: white;
    text-align: left;
}

.product-suggestions div:hover {
    background-color: #f3b3b3;
}

.product-suggestions div span {
    display: inline-block;
    margin-right: 10px;
}

/* スクロールバーのスタイル調整 */
.product-suggestions::-webkit-scrollbar {
    width: 8px;
}

.product-suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.product-suggestions::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.product-suggestions::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 商品名の入力フィールドのコンテナに相対位置を設定 */
.search-product-list td:nth-child(3) {
    position: relative !important; /* 相対位置を設定 */
    overflow: visible !important; /* オーバーフローを可視化 */
}

/* 検索セクション内のテーブルコンテナ */
.content-section-inner .table-responsive {
    overflow: visible !important; /* 検索候補が表示されるようにオーバーフローを可視に */
}

/* コンテンツセクション全体の重ね順を調整 */
.content-section {
    position: relative;
    z-index: auto; /* 自動的に重ね順を決定 */
}

/* フォームセクションのz-indexを高く設定 */
.content-section-form {
    position: relative;
    z-index: 1500; /* 検索セクションより上、検索候補より下 */
}

/* コンテンツセクションのz-index階層を調整 */
.content-section-search {
    position: relative;
    z-index: 3000 !important; /* テーブルセクションより上 */
}

.content-section-table {
    position: relative;
    z-index: 2000 !important; /* 低めのz-index */
}

/* テーブルコンテナのオーバーフロー設定を確実に上書き */
.content-section-inner .table-responsive,
.table-responsive {
    overflow: visible !important; /* 重要: 候補一覧が見えるようにするため */
}

/* 検索候補が表示される時のアニメーション */
.product-suggestions.show {
    animation: fadeIn 0.2s ease-in-out forwards;
}

/* コンテナ外への表示を許可するために必要なスタイル */
html, body {
    position: relative; /* z-indexコンテキストを作成 */
}


/* 矢印ボタンのスタイル */
.arrow-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #007bff;
}

.arrow-button:hover {
    color: #0056b3;
}

.arrow-button:disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* 上矢印と下矢印 */
.arrow-up::after {
    content: "▲";
    font-size: 14px;
}

.arrow-down::after {
    content: "▼";
    font-size: 14px;
}

/* 行をドラッグ中の背景色 */
.dragging {
    background-color: #f0f8ff;
    border: 1px dashed #007bff;
}

/* 共通のテーブルスタイル */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    table-layout: fixed;
}

/* テーブルセルの基本スタイル - ただしページ固有のスタイルで上書き可能 */
table th, table td {
    padding: 5px;
    text-align: left;
    white-space: nowrap;
}

/* テーブルヘッダーの基本スタイル */
table th {
    background-color: #f2f2f2;
}

/* テーブルデータセルの基本スタイル */
table td {
    border-bottom: 1px solid #ddd;
}

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* user_managementのテーブルスタイル */
#userTable {
    width: 100%; /* 現在の幅の50%から100%に変更 */
    margin: 0; /* 左揃えに設定 */
}

/* ユーザーIDとパスワードの右揃え */
#userTable th:nth-child(2), #userTable td:nth-child(2),
#userTable th:nth-child(3), #userTable td:nth-child(3) {
    text-align: right;
}

/* チェックボックスカラムの幅を設定 */
#userTable th:first-child, #userTable td:first-child {
    width: 3%; 
}

/* 削除ボタンとテーブルの間にスペースを追加 */
#userManagementDeleteButton {
    margin-bottom: 20px; /* スペースを追加 */
}



#customerListTable {
    width: 50%; /* テーブルの幅を1/2に設定 */
    margin: 0; /* 左揃えにする */
}

#customerListTable th:nth-child(2),
#customerListTable td:nth-child(2) {
    text-align: right; /* 得意先コードのカラムを右揃え */
    width: 15%; 
}

#customerListTable th:nth-child(4),
#customerListTable td:nth-child(4) {
    text-align: center; /* 操作のカラムを中央揃え */
    width: 15%; 
}

#customerListTable th:first-child,
#customerListTable td:first-child {
    text-align: center; /* チェックボックスのカラムを中央揃え */
    width: 8%; /* 横幅を現在の1/3に設定 */
}



.content-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    position: relative;
    z-index: 1;
}

h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

form {
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ボタンの共通スタイル */
button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}

/* 削除ボタンのスタイル */
#deleteButton:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

#deleteButton:enabled {
    background-color: #ff0000;
    color: #fff;
}

#deleteButton:enabled:hover {
    background-color: #cc0000;
}

/* レインボーのボタンスタイル */
@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.rainbow-button {
    background: linear-gradient(90deg, red, orange, rgb(145, 145, 53), green, blue, indigo, violet) !important; /* レインボーのグラデーション */
    color: white !important; /* テキストの色を白に */
    border: none !important; /* 枠線を削除 */
    padding: 10px !important; /* パディングを追加 */
    border-radius: 40px !important; /* 横向きの楕円形にする */
    cursor: pointer !important; /* カーソルをポインタに */
    transition: background 0.3s !important; /* ホバー時のトランジション */
    font-size: 20px !important; /* フォントサイズ */
    font-weight: bold !important; /* 太字にする */
    line-height: 25px; /* ボタンの高さに合わせて行の高さを設定 */
    animation: purun 0.8s linear 0s infinite; /* 新しいアニメーションを適用 */
}


/* 他のボタンのスタイル */
button:not(.rainbow-button):not(#deleteButton):not(.small-button) {
    height: 40px;
    padding: 0 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 40px;
    margin: 0;
}

button:not(.rainbow-button):not(#deleteButton):not(.small-button):hover {
    background-color: #0056b3;
}

/* 共通のテーブルスタイル */
.common-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    table-layout: fixed;
}

.common-table th, .common-table td {
    border: 1px solid #ccc;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.common-table th {
    background-color: #f4f4f4; /* ヘッダーの背景色 */
    font-weight: bold;
    text-align: left;
}

.common-table td {
    background-color: #ffffff; /* デフォルトの背景色 */
}

/* 行の色分け */
.common-table tr:nth-child(even) td {
    background-color: #f9f9f9; /* 偶数行の背景色 */
}

input[type="text"], input[type="date"], select, textarea {
    height: 40px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

button {
    height: 40px;
    padding: 0 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 40px;
    margin: 0;
}

button:hover {
    background-color: #0056b3;
}

/* フォームテーブルのスタイル */
.form-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.form-table td {
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.form-table input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* フォームコンテナのスタイル */
.form-container {
    display: flex;
    justify-content: flex-start; /* 左寄せに変更 */
    gap: 20px; /* 間隔を狭く設定 */
    margin-bottom: 20px;
}

.form-table {
    width: 40%; /* 現在の幅を10%広げる */
    border-collapse: collapse;
    margin-bottom: 20px;
}

.form-table td {
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.form-table input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .form-container {
        flex-direction: column; /* スマホ表示では縦に並べる */
    }
}

/* ログインテーブルのスタイル */
.login-table {
    width: 25%; 
    margin: 0 auto; /* 中央に配置 */
    border-collapse: collapse;
}

.login-table td {
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.login-table input[type="text"],
.login-table input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

/* ログインコンテナのスタイル */
.login-container {
    text-align: center; /* 中央揃え */
    margin: 0 auto; /* 中央に配置 */
    width: 25%; /* テーブルと同じ幅 */
}

.login-table {
    width: 100%; /* コンテナ内での幅を100%に設定 */
    border-collapse: collapse;
    margin-top: 10px; /* タイトルとの間隔を調整 */
}

.login-table td {
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.login-table input[type="text"],
.login-table input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

#deleteUserButton:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

#deleteUserButton:enabled {
    background-color: #ff0000;
    color: #fff;
}

#deleteUserButton:enabled:hover {
    background-color: #cc0000;
}

#deleteButton {
    margin-bottom: 0; /* スペースを無くす */
}

#productList th:nth-child(1), #productList td:nth-child(1) {
    width: 5%; /* チェックボックスのカラム幅 */
}

#productList th:nth-child(2), #productList td:nth-child(2) {
    width: 10%; /* 商品区分のカラム幅 */
}

#productList th:nth-child(3), #productList td:nth-child(3) {
    width: 10%; /* 商品コードのカラム幅 */
}

#productList th:nth-child(4), #productList td:nth-child(4) {
    width: 25%; /* 商品名のカラム幅 */
}

#productList th:nth-child(5), #productList td:nth-child(5) {
    width: 18%; /* 商品規格のカラム幅 */
    text-align: left;
}

#productList th:nth-child(6), #productList td:nth-child(6) {
    width: 5%; /* 仕立 */
}

#productList th:nth-child(7), #productList td:nth-child(7) {
    width: 5%; /* ケース入数 */
}

#productList th:nth-child(8), #productList td:nth-child(8) {
    width: 8%; /* 注文数 */
}

#productList th:nth-child(9), #productList td:nth-child(9) {
    width: 4%; /* 納期 */
    text-align: center; /* 納期 */
}

#productList th:nth-child(10), #productList td:nth-child(10) {
    width: 5%; /* 納品方法 */
    text-align: center; /* 納品方法 */
}

#productList th:nth-child(11), #productList td:nth-child(11) {
    width: 5%; /* 基準在庫 */
    text-align: right; /* 基準在庫 */
}

#productList th:nth-child(12), #productList td:nth-child(12) {
    width: 10%; /* 商品備考 */
    text-align: left; /* 左揃え */
}

table.common-table th {
    text-align: center; /* ヘッダーを中央揃え */
}


.calculator-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.calc-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に変更 */
    gap: 10px;
    margin-top: 10px;
}

.calc-buttons button {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    border: none;
    background-color: #007bff;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calc-buttons button:hover {
    background-color: #0056b3;
}

.calc-buttons button:active {
    background-color: #004494;
}

.calc-buttons .zero {
    grid-column: span 2; /* 0ボタンを2列分に拡大 */
}

.calc-buttons .ok {
    grid-row: span 2; /* OKボタンを2行分に拡大 */
    height: 100%; /* 高さを100%に設定 */
}

#calcDisplay {
    width: 100%;
    padding: 10px;
    font-size: 24px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

#customerNoteDisplay {
    width: 300px; /* 得意先備考の表示欄　幅の調整 */
}

#calculatorModal {
    position: fixed;
    width: 320px; /* 適切な幅を設定 */
    height: auto;
    background-color: #ffffe0; /* 背景色を黄色に設定 */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#calcDisplay {
    width: 100%;
    padding: 10px;
    font-size: 24px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    box-sizing: border-box;
    background-color: #fff;
}

.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.calc-buttons button {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    border: none;
    background-color: #007bff;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
}

.calc-buttons button:hover {
    background-color: #0056b3;
}

.calc-buttons button:active {
    background-color: #004494;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    table-layout: fixed;
}

.custom-table th, .custom-table td {
    border: 1px solid #ccc;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-table tr:nth-child(even) td {
    background-color: #f9f9f9; /* 偶数行の背景色 */
}

.custom-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}

.custom-product-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    table-layout: fixed;
}

.custom-product-list th, .custom-product-list td {
    border: 1px solid #ccc;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-toriyose {
    background-color: rgba(122, 196, 185, 0.425); /* "取寄せ"行の背景色 */
}

.category-betsuchu {
    background-color: rgb(245, 181, 181); /* "別注"行の背景色 */
}

.category-azukari {
    background-color: #dab2ff; /* 薄い紫色 */
}

/* 注文確定ボタンの設定 */
.confirm-order-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    background-color: #d60be9 !important; /* 固有の色設定 */
    color: white !important; /* 固有の文字色 */
    border: none;
    padding: 10px;
    border-radius: 40px; /* 横向きの楕円形にする */
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 20px;
    font-weight: bold;
    width: 120px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.confirm-order-btn:hover {
    background-color: #218838 !important; /* ホバー時の色 */
}

.selected-row {
    background-color: #e75fd5 !important; /* 選択時の背景色を優先 */
    transition: background-color 0.3s ease;
}

.order-details-container {
    padding: 20px;
}

.order-details-table {
    width: 100%; /* テーブルの幅を100%に設定 */
    border-collapse: collapse; /* 罫線を重ねて表示 */
    table-layout: auto; /* 自動的にカラム幅を調整 */
}

.order-details-table th, 
.order-details-table td {
    border: 1px solid #ccc; /* 罫線の色とスタイルを設定 */
    padding: 8px; /* セル内のパディングを設定 */
    text-align: left; /* テキストを左揃えに設定 */
}

.order-details-table th {
    background-color: #f4f4f4; /* ヘッダーの背景色を設定 */
    font-weight: bold; /* ヘッダーのフォントを太字に設定 */
}

/* 商品一覧テーブルの行にホバー効果を追加 */
.index-product-list tbody tr {
    transition: background-color 0.3s ease; /* 背景色の変化にトランジションを追加 */
}

.index-product-list tbody tr:hover {
    background-color: #c9dbeb; /* ホバー時の背景色 */
}

.index-product-list {
    width: 100%; /* テーブルの幅を100%に設定 */
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    table-layout: fixed; /* 固定レイアウトを使用 */
}

/* 既存のスタイルの下に追加 */
input[disabled] {
    background-color: #d3d3d3; /* グレーの色を濃くする */
    color: #a9a9a9; /* テキストの色を薄くする */
    cursor: not-allowed; /* カーソルを変更 */
}


#userCustomerSuggestions {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1000;
    top: calc(36% + 5px);
    left: 150px;
    width: 300px; /* calc()は不要 */
    max-height: 350px;
    overflow-y: auto;
    /* display: none; は JavaScript で制御するため CSS には含めない */
}
#userCustomerSuggestions div {
    padding: 8px; /* パディングを追加 */
    cursor: pointer; /* カーソルをポインタに変更 */
}

#userCustomerSuggestions div:hover {
    background-color: #ebbddf; /* ホバー時の背景色 */
}
/* 得意先名の検索 */
#customer_customersuggestions {
    position: absolute; /* 絶対位置に設定 */
    background-color: white; /* 背景色を白に設定 */
    border: 1px solid #ccc; /* 枠線を追加 */
    z-index: 1000; /* 他の要素の上に表示 */
    margin-top: 0; /* 上のマージンを削除 */
    padding: 0; /* パディングを削除 */
    top: 40px; /* 親要素の下に配置 */
    left: 21px; /* 左側からの距離を調整 */
    width: calc(30%); /* 幅を親要素に合わせる */
    max-height: 350px; /* 最大高さを設定 */
    overflow-y: auto; /* 縦スクロールを追加 */
    display: none; /* 初期状態は非表示 */
}

#customer_customersuggestions div {
    padding: 8px; /* パディングを追加 */
    cursor: pointer; /* カーソルをポインタに変更 */
}

#customer_customersuggestions div:hover {
    background-color: #ebbddf; /* ホバー時の背景色 */
}

/* スクロール可能なテーブルのスタイル */
.table-responsive {
    overflow-x: auto; /* 横スクロールを有効にする */
    margin-top: 20px; /* テーブルとの間にスペースを追加 */
}

.order-details-table {
    min-width: 800px; /* テーブルの最小幅を設定 */
}

/* 既存のスタイルの下に追加 */
.table-scrollable {
    max-height: 600px; /* 最大高さを設定 */
    overflow-y: auto; /* 縦スクロールを有効にする */
}

/* 既存のスタイルの下に追加 */
.order-details-table th {
    text-align: center; /* ヘッダーを中央揃え */
}

.order-details-table td:nth-child(1), /* 注文ID */
.order-details-table td:nth-child(2), /* 得意先CD */
.order-details-table td:nth-child(8), /* 商品CD */
.order-details-table td:nth-child(11) { /* 注文数 */
    text-align: right; /* 右揃え */
}

/* 転送設定ページのスタイル */
.form-container {
    margin-bottom: 20px; /* フォームの間隔を調整 */
}

.form-row {
    margin-top: 10px; /* ボタンの間隔を調整 */
}

.blinking {
    animation: blink-animation 1s steps(5, start) infinite; /* 点滅アニメーション */
}

@keyframes blink-animation {
    to {
        visibility: hidden; /* 点滅効果 */
    }
}

.custom-edit-button {
    /* ここに独自のスタイルを追加 */
    background-color: #007bff; /* 例: 青色 */
    color: white; /* 文字色を白に */
    border: none; /* 枠線をなしに */
    padding: 10px 20px; /* パディングを設定 */
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインタに */
}

.custom-edit-button:hover {
    background-color: #0056b3; /* ホバー時の色 */
}

/* ルームID入力欄のスタイル */
#chatworkRoomId {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

#chatworkRoomId:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* 商品一覧のテーブルを含むコンテナのスタイル */
.table-container {
    width: 100%;
    overflow-x: auto; /* 横スクロールが必要な場合に対応 */
}

/* 3つ目のコンテンツ領域のスタイル */
.content-section-inner {
    padding: 10px;
    min-height: 100px; /* 最小の高さを設定 */
}

/* 商品検索テーブルの選択状態のスタイルを更新 */
.search-product-list tr.selected-row {
    background-color: white !important; /* 行の背景も白に */
}

/* 入力欄も白のままに保持 */
.search-product-list tr.selected-row input:not(.order-quantity),
.search-product-list tr.selected-row select {
    background-color: white !important;
    color: #000;
}

/* 読み取り専用の入力欄も白を維持 */
.search-product-list tr.selected-row input[readonly]:not(.order-quantity) {
    background-color: white !important;
}

/* 注文数入力欄のスタイル */
.search-product-list tr.selected-row .order-quantity:not([disabled]) {
    background-color: cyan !important; /* 有効時はcyan色 */
}

.search-product-list tr.selected-row .order-quantity[disabled] {
    background-color: #d3d3d3 !important; /* 無効時はグレー */
}

/* 商品検索の検索候補のz-indexのみを変更 */
.product-suggestions {
    /* ... 既存のスタイルはそのまま ... */
    z-index: 9999; /* より大きな値に設定して最前面に表示 */
}

.content-section-form {
    position: relative;
    z-index: 1500; /* 商品検索候補の1000より大きい値に設定 */
}

/* 納期のカレンダーを確実に表示させるため、日付選択UIのz-indexも上げておく */
.ui-datepicker {
    z-index: 3002 !important; /* カレンダーUIを最前面に */
}

/* 納期入力欄と受注メモ入力欄の高さを納品方法の選択欄に合わせる */
input[type="date"],
#orderMemo {
    height: 34px; /* 納品方法の選択欄と同じ高さに設定 */
    box-sizing: border-box;
    padding: 5px 8px;
    vertical-align: middle;
}

/* 納期を含む行の垂直方向配置を中央に統一 */
.form-row {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
}

/* ラベルの位置調整 */
.form-row label {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

/* 入力要素の位置調整 */
.form-row input,
.form-row select,
.form-row button {
    vertical-align: middle;
    margin: 0;
}

/* "納期を選択"ボタンの特別な調整 */
input[value="納期を選択"] {
    vertical-align: middle;
    line-height: normal;
}


/* 入力フィールドを持つセルの特別処理 */
#productList td:nth-child(8) input {
    text-align: right !important; /* 注文数の入力フィールドも右揃え */
    width: 100%;
}

/* 確認モーダルのスタイル改善 */
.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000 !important;
}

.confirmation-modal.active {
    display: flex !important;
}

/* 履歴参照モーダルは上部基準で配置 */
.history-modal {
    align-items: flex-start;
    padding-top: 5vh; /* 上から5%の位置に固定 */
}

/* 履歴参照モーダルのコンテンツ幅を広く */
.history-modal .modal-content {
    min-width: 900px;
    max-width: 95%;
    width: auto;
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: auto; /* 内容に応じて自動調整 */
    min-width: 500px; /* 最小幅を設定 */
    max-width: 80%; /* 最大幅を画面の80%に制限 */
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10001 !important;
}

/* 商品リストのスタイル改善 */
#productListDetails p {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    white-space: nowrap; /* 改行を防止 */
    overflow: hidden; /* はみ出した部分を隠す */
    text-overflow: ellipsis; /* はみ出した部分を省略記号で表示 */
}

#productListDetails p span:first-child {
    flex: 1;
    text-align: left;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#productListDetails p span:last-child {
    flex: 0 0 auto; /* 幅を固定 */
    text-align: right;
    white-space: nowrap;
    font-weight: bold;
}

/* 注文情報のスタイル */
.order-info {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}

.rainbow-button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .modal-content {
        min-width: 300px;
        padding: 15px;
    }
    
    #productListDetails p {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .modal-content {
        width: 95%;
        min-width: 280px;
        padding: 10px;
    }
    
    #productListDetails p {
        font-size: 13px;
    }
    
    .customer-name-display {
        font-size: 1.2em;
    }
}

/* 閉じるボタンのスタイル変更 */
.close-modal-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff0000; /* 赤色の背景 */
    color: white; /* 白色の文字 */
    border: none;
    border-radius: 50%; /* 丸いボタン */
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-modal-btn:hover {
    background-color: #cc0000; /* ホバー時は少し暗い赤色 */
    transform: scale(1.1); /* ホバー時に少し拡大 */
}

/* 既存スタイルの上書き */
.modal-content .close-modal-btn {
    background-color: #ff0000 !important;
    color: white !important;
}

/* 基準在庫の入力欄からスピナーを削除 */
.base-stock::-webkit-inner-spin-button,
.base-stock::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox対応 */
.base-stock {
    -moz-appearance: textfield;
}

/* 基準在庫の入力欄のスタイル調整 */
.base-stock {
    width: 100%;
    text-align: right;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 36px;
    box-sizing: border-box;
}

/* 商品検索テーブルの入力欄を整えるスタイル */
.search-product-list td {
    vertical-align: middle;
    height: 44px;
    padding: 8px;
    box-sizing: border-box;
}

.search-product-list input,
.search-product-list select,
.index-product-list input {
    height: 36px;
    box-sizing: border-box;
    vertical-align: middle;
    margin: 0;
    width: 100%;
    padding: 0 5px;
}

/* プルダウンメニューと入力欄のサイズを合わせる */
.search-product-list select.product-category {
    width: 100%;
    height: 36px;
}

/* タッチデバイス用の調整 */
@media (pointer: coarse) {
    .search-product-list input,
    .search-product-list select,
    .index-product-list input {
        height: 42px; /* タッチデバイスでは少し大きめに */
    }
    
    .search-product-list td,
    .index-product-list td {
        height: 50px;
    }
}

/* モーダルアクションの表示位置を調整 */
.modal-actions {
    text-align: right;
    margin-top: 20px;
}

/* モーダルアクションのボタン配置 */
.modal-content .modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* 基準在庫の入力欄からスピナーを削除 */
.base-stock::-webkit-inner-spin-button,
.base-stock::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox対応 */
.base-stock {
    -moz-appearance: textfield;
}

/* 基準在庫の入力欄のスタイル調整 */
.base-stock {
    width: 100%;
    text-align: right;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 36px;
    box-sizing: border-box;
}

/* テーブルの横スクロール設定 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 15px;
}

/* index.htmlのproductListテーブル内の「仕立」と「c/s」カラムのスタイルを特化したセレクタ */
.content-section-table #productList td:nth-child(5),
.content-section-table #productList td:nth-child(6) {
    width: 7% !important;
    text-align: right !important;
}

/* 各ページに特化したセレクタを使用 - コンテンツセクションの有無で区別する */
body:not(.customers-page) .content-section-table .index-product-list td:nth-child(5),
body:not(.customers-page) .content-section-table .index-product-list td:nth-child(6) {
    text-align: right !important;
}

/* customers.htmlのテーブルでは異なるセレクタを適用（6列目と7列目が仕立とケース入数） */
body.customers-page #productList td:nth-child(6),
body.customers-page #productList td:nth-child(7) {
    text-align: right !important;
}

/* ページごとに独自のセレクタを定義することで競合を防ぐ */
body.customers-page #productList th:nth-child(6), 
body.customers-page #productList td:nth-child(6),
body.customers-page #productList th:nth-child(7), 
body.customers-page #productList td:nth-child(7) {
    width: 60px !important;
    text-align: right !important;
}

/* index.htmlの列スタイルを保護 */
body.index-page .index-product-list td:nth-child(5),
body.index-page .index-product-list td:nth-child(6) {
    width: 7% !important;
    text-align: right !important;
}

/* index.htmlの仕立とc/sのセル (5列目と6列目) を右寄せに */
.index-page .content-section-table #productList td:nth-child(5),
.index-page .content-section-table #productList td:nth-child(6),
.index-page .index-product-list td:nth-child(5),
.index-page .index-product-list td:nth-child(6) {
    text-align: right !important;
}

/* customers.htmlの仕立とケース入数のセル (6列目と7列目) を右寄せに */
.customers-page #productList td:nth-child(6),
.customers-page #productList td:nth-child(7) {
    text-align: right !important;
}

/* ページごとに独自のセレクタを定義することで競合を防ぐ */
body.customers-page #productList th:nth-child(6), 
body.customers-page #productList td:nth-child(6),
body.customers-page #productList th:nth-child(7), 
body.customers-page #productList td:nth-child(7) {
    width: 60px !important;
    text-align: right !important;
}

/* index.htmlの列スタイルを保護 - 優先度を最大化 */
body.index-page table.index-product-list td:nth-child(5),
body.index-page table.index-product-list td:nth-child(6),
body.index-page #productList td:nth-child(5),
body.index-page #productList td:nth-child(6) {
    width: 7% !important;
    text-align: right !important;
}

/* 受注明細フィルタのスタイル */
.filter-container {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.filter-grid {
    display: grid;
    grid-gap: 10px;
    max-width: 600px;
}

.filter-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 10px;
}

.filter-label {
    text-align: right;
    font-weight: bold;
    color: #555;
}

.filter-input {
    display: flex;
    align-items: center;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-separator {
    color: #555;
    font-weight: bold;
}

.search-button {
    background-color: #007bff;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    height: 36px;
    min-width: 100px;
}

.search-button:hover {
    background-color: #0056b3;
}

/* 入力フィールドのスタイル統一 */
.filter-input input[type="text"],
.filter-input input[type="date"],
.filter-input select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 36px;
    box-sizing: border-box;
}

/* 日付入力フィールドのスタイル */
.filter-input input[type="date"] {
    width: 150px;
}

/* ユーザーID入力欄の幅を半分に */
#userId {
    width: 50%;
}

/* 検索ボタンのスタイル */
.search-button {
    background-color: #007bff;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    height: 36px;
    min-width: 100px;
}

/* 得意先名編集機能のスタイル */
#editCustomerName {
    background-color: #f5f5f5;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#editCustomerName:not([readonly]) {
    background-color: #fff;
    cursor: text;
    border: 2px solid #007bff;
}

#editCustomerName:hover {
    background-color: #e9ecef;
}

#editCustomerName:not([readonly]):hover {
    background-color: #fff;
}

/* 得意先名変更ボタンのスタイル */
#updateButton {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#updateButton:hover {
    background-color: #218838;
}

#updateButton:active {
    background-color: #1e7e34;
}

/* 商品検索セクションのヘッダー */
.search-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.search-header h2 {
    margin: 0;
    color: #333;
    font-size: 20px;
}

/* 行追加ボタン */
.add-row-btn {
    padding: 8px 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.add-row-btn:hover {
    background-color: #218838;
}

.add-row-btn:active {
    background-color: #1e7e34;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .search-header {
        gap: 10px;
    }
    
    .add-row-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    .search-header h2 {
        font-size: 18px;
    }
    
    .add-row-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* index-product-listのヘッダー文字揃え調整 */
.index-product-list th {
    background-color: #f4f4f4;
    font-weight: bold;
    text-align: center; /* デフォルトは中央揃え */
}

/* 各列のヘッダー個別調整 */
.index-product-list th:nth-child(1) {
    text-align: center; /* 仕入 */
}

.index-product-list th:nth-child(2) {
    text-align: center; /* 商品CD */
}

.index-product-list th:nth-child(3) {
    text-align: center; /* 商品名 */
}

.index-product-list th:nth-child(4) {
    text-align: center; /* 商品規格 */
}

.index-product-list th:nth-child(5) {
    text-align: right; /* 仕立 - 右揃えに変更 */
}

.index-product-list th:nth-child(6) {
    text-align: right; /* c/s - 右揃えに変更 */
}

.index-product-list th:nth-child(7) {
    text-align: right; /* 基準在庫 - 右揃えに変更 */
}

.index-product-list th:nth-child(8) {
    text-align: right; /* 注文数 - 右揃えに変更 */
}

.index-product-list th:nth-child(9) {
    text-align: center; /* 納期 */
}

.index-product-list th:nth-child(10) {
    text-align: center; /* 納品方法 */
}

.index-product-list th:nth-child(11) {
    text-align: center; /* 商品メモ */
}

.index-product-list th:nth-child(12) {
    text-align: center; /* 商品備考 */
}

.content-section-table {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px;
    position: relative;
    overflow: hidden; /* はみ出した部分を隠す */
}

.content-section-table h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
}

/* テーブルコンテナのスタイルを調整 */
.content-section-table .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    max-height: none;
    padding: 0;
}

/* テーブル自体の枠線を設定 */
.index-product-list {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* autoからfixedに変更 */
    min-width: 1200px; /* 最小幅を設定して横スクロール確保 */
    border: 1px solid #ddd;
    margin: 0;
}

/* テーブルコンテナのスタイルを調整 */
.content-section-table .table-responsive {
    overflow-x: auto !important; /* 横スクロールを強制 */
    overflow-y: visible;
    width: 100%;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    max-height: none;
    padding: 0;
}

/* iPadの横向き表示に特化したメディアクエリ追加 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* テーブルの横スクロールを確保 */
    .content-section-table .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 各カラムの幅を明示的に設定 */
    .index-product-list th:nth-child(1), .index-product-list td:nth-child(1) { width: 60px !important; }
    .index-product-list th:nth-child(2), .index-product-list td:nth-child(2) { width: 80px !important; }
    .index-product-list th:nth-child(3), .index-product-list td:nth-child(3) { width: 150px !important; }
    .index-product-list th:nth-child(4), .index-product-list td:nth-child(4) { width: 150px !important; }
    .index-product-list th:nth-child(5), .index-product-list td:nth-child(5) { width: 60px !important; }
    .index-product-list th:nth-child(6), .index-product-list td:nth-child(6) { width: 60px !important; }
    .index-product-list th:nth-child(7), .index-product-list td:nth-child(7) { width: 80px !important; }
    .index-product-list th:nth-child(8), .index-product-list td:nth-child(8) { width: 80px !important; }
    .index-product-list th:nth-child(9), .index-product-list td:nth-child(9) { width: 110px !important; }
    .index-product-list th:nth-child(10), .index-product-list td:nth-child(10) { width: 90px !important; }
    .index-product-list th:nth-child(11), .index-product-list td:nth-child(11) { width: 120px !important; }
    .index-product-list th:nth-child(12), .index-product-list td:nth-child(12) { width: 120px !important; }
}

/* スクロールバーのスタイリング */
.content-section-table .table-responsive::-webkit-scrollbar {
    height: 6px; /* より小さいスクロールバー */
}

.content-section-table .table-responsive::-webkit-scrollbar-track {
    background: #f5f5f5; /* より明るい背景 */
    border-radius: 3px;
}

.content-section-table .table-responsive::-webkit-scrollbar-thumb {
    background: #aaa; /* より明るいスクロールバー */
    border-radius: 3px;
}

.content-section-table .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #888; /* ホバー時の色を明るく */
}

/* 注文ボタンの位置調整 */
.confirm-order-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 10;
}

/* テーブルのセル内のテキスト表示を改善 */
.index-product-list td {
    padding: 8px;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

/* 長いテキストを含む列のスタイル */
.index-product-list td:nth-child(3),
.index-product-list td:nth-child(4),
.index-product-list td:nth-child(9) {
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* 新しい列のスタイル */
.index-product-list th:nth-child(7), .index-product-list td:nth-child(7) {
    min-width: 80px;
}

.index-product-list th:nth-child(8), .index-product-list td:nth-child(8),
.search-product-list th:nth-child(8), .search-product-list td:nth-child(8) {
    min-width: 100px;
}

.index-product-list th:nth-child(9), .index-product-list td:nth-child(9),
.search-product-list th:nth-child(9), .search-product-list td:nth-child(9) {
    min-width: 90px;
}

.index-product-list th:nth-child(10), .index-product-list td:nth-child(10),
.search-product-list th:nth-child(10), .search-product-list td:nth-child(10) {
    min-width: 120px;
}

.index-product-list th:nth-child(11), .index-product-list td:nth-child(11) {
    min-width: 120px;
}

.index-product-list th:nth-child(12), .index-product-list td:nth-child(12) {
    min-width: 120px;
}

.delivery-date, .product-memo {
    width: 100%;
    box-sizing: border-box;
}

.delivery-method {
    width: 100%;
    box-sizing: border-box;
}

.delivery-date {
    width: 70px !important;
    text-align: center;
}

/* 横スクロール用ラッパー */
.content-section-inner .table-responsive {
    overflow-x: auto !important;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* search-product-listのカラム幅を最小限確保（必要に応じて調整） */
.search-product-list th,
.search-product-list td {
    min-width: 80px;
    white-space: nowrap;
}
.search-product-list th:nth-child(3),
.search-product-list td:nth-child(3) {
    min-width: 180px;
}
.search-product-list th:nth-child(4),
.search-product-list td:nth-child(4) {
    min-width: 140px;
}

/* search-product-listテーブルのカラム幅を完全固定し、横スクロール対応 */
.search-product-list {
    table-layout: fixed !important;
    min-width: 1200px !important;
    width: 1200px !important;
}
.search-product-list th, .search-product-list td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 5px;
}
.search-product-list th:nth-child(1), .search-product-list td:nth-child(1) { width: 60px !important; }
.search-product-list th:nth-child(2), .search-product-list td:nth-child(2) { width: 100px !important; }
.search-product-list th:nth-child(3), .search-product-list td:nth-child(3) { width: 200px !important; }
.search-product-list th:nth-child(4), .search-product-list td:nth-child(4) { width: 150px !important; }
.search-product-list th:nth-child(5), .search-product-list td:nth-child(5) { width: 60px !important; }
.search-product-list th:nth-child(6), .search-product-list td:nth-child(6) { width: 60px !important; }
.search-product-list th:nth-child(7), .search-product-list td:nth-child(7) { width: 80px !important; }
.search-product-list th:nth-child(8), .search-product-list td:nth-child(8) { width: 110px !important; }
.search-product-list th:nth-child(9), .search-product-list td:nth-child(9) { width: 90px !important; }
.search-product-list th:nth-child(10), .search-product-list td:nth-child(10) { width: 120px !important; }

/* 横スクロール用ラッパー */
.content-section-inner .table-responsive {
    overflow-x: auto !important;
    width: 100%;
    box-sizing: border-box;
}

/* 商品検索セクションのオーバーフロー設定 */
.content-section-search {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    background-color: #f9f9f9;
    position: relative;
    z-index: 3000 !important; /* テーブルセクションより上 */
    overflow: visible !important;
}

/* 商品検索候補の詳細スタイル */
.search-product-list .product-suggestions {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 300px !important;
    max-width: 600px !important;
    z-index: 10000 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    overflow-y: auto !important;
    max-height: 300px !important;
}

/* 検索セクション内のテーブルコンテナ */
.content-section-inner .table-responsive {
    overflow: visible !important; /* 検索候補が表示されるようにオーバーフローを可視に */
}

/* コンテンツセクション全体の重ね順を調整 */
.content-section {
    position: relative;
    z-index: auto; /* 自動的に重ね順を決定 */
}

/* コンテンツセクションのz-index階層を調整 */
.content-section-table {
    position: relative;
    z-index: 2000 !important; /* 低めのz-index */
}

/* テーブルコンテナのオーバーフロー設定を確実に上書き */
.content-section-inner .table-responsive,
.table-responsive {
    overflow: visible !important; /* 重要: 候補一覧が見えるようにするため */
}

/* 検索候補が表示される時のアニメーション */
.product-suggestions.show {
    animation: fadeIn 0.2s ease-in-out forwards;
}

/* コンテナ外への表示を許可するために必要なスタイル */
html, body {
    position: relative; /* z-indexコンテキストを作成 */
}

#productListDetails div {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin-bottom: 2px;
    border-bottom: 1px solid #e0e0e0;
}
#productListDetails div:last-child {
    border-bottom: none;
}

.form-row label[for="customerName"] {
    min-width: 100px;
    margin-right: 10px;
}

#customerName {
    flex: none;
    max-width: 200px;
    width: 200px;
    margin-right: 10px;
}

.form-row label[for="customerCode"] {
    min-width: 80px;
    margin-right: 10px;
    margin-left: 0;
    text-align: right;
}

#customerCode {
    flex: 0.25;
    max-width: 75px;
    margin-right: 10px;
}

@media screen and (max-width: 768px) {
    .form-row label[for="customerName"],
    .form-row label[for="customerCode"] {
        min-width: 80px;
        margin-right: 5px;
        margin-left: 0;
    }
    #customerName, #customerCode {
        max-width: none;
        width: 100%;
        margin-right: 0;
    }
    .form-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

#customerName, #customerCode {
    width: 200px;
    max-width: 200px;
    min-width: 0;
}

/* 1行目のラベルの左端を強制的に揃える */
.content-section-form .form-row:first-child label[for="customerName"] {
    margin-right: 0 !important;
}
.content-section-form .form-row:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 入力クリアボタンのスタイル */
button#clearFormButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8ed84 !important; /* 黄色の背景色 */
    padding: 6px 18px !important;
    font-size: 16px !important;
    margin-left: 16px !important;
    border-radius: 4px !important;
    border: 2px solid #0e0a00 !important;
    cursor: pointer !important;
    color: #000 !important;
    height: 40px !important;
    font-weight: bold !important; /* 太字に設定 */
}

button#clearFormButton:hover {
    background-color: #FFC107 !important;
}

/* 商品直接検索セクションのテーブルを横スクロール対応に */
.content-section-search .table-responsive {
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
}

/* 商品検索テーブルの最小幅を設定（カラム数に応じて調整） */
.search-product-list {
    min-width: 1200px;
    width: 100%;
    table-layout: fixed;
}

/* 商品直接検索のテーブルラッパーも商品一覧と同じ見た目に */
.content-section-search .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible;
    width: 100%;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    max-height: none;
    padding: 0;
}

.content-section-search,
.content-section-inner,
.content-section-inner .table-responsive,
.search-product-list tr,
.search-product-list td {
  overflow: visible !important;
}