.page { width: 100%; min-height: 50rem; margin: 5rem 0 3rem; display: block; position: relative; background: white; } #searchPage { width: 100%; margin: 0 auto 1.5rem; --search-control-width: 170px; --search-control-gap: 10px; } #searchPage .table__caption, #target_wrapper { margin-left: auto; margin-right: auto; width: 80%; max-width: 1400px; } #searchPage .inner { width: 100%; max-width: none; padding-left: 0 !important; padding-right: 0 !important; } #searchPage .searchArea { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; padding: 0 0.5rem 0 0.9rem; } .select2-container--default .select2-selection--multiple { margin: 0; } .select2-container .select2-selection--multiple { height: auto; } .searchInputContainer { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; gap: var(--search-control-gap); margin-left: 0.25rem; } .select2-container .select2-selection--multiple { width: auto !important; } /* * 検索バー内の Select2 selection box 専用スタイル * --- * width: 100% → 親コンテナ（170px）に固定し、内容がはみ出さないようにする * overflow: hidden → Firefox が min-width:100% を膨張させても * selection box の内側でクリップするため * .select2-container 側の BFC 変化を避けられる * （Select2 dropdown はに描画されるためクリップ対象外） * min-height: 42px → フリーワード・経験年数 input と高さを揃える * padding → 上下 8px で縦中央寄せ、左 8px でプレースホルダー左余白を確保 * （::placeholder の padding は Firefox 非対応のためここで代替） */ .tooltipunder .select2-container .select2-selection--multiple { width: 100% !important; box-sizing: border-box; overflow: hidden; min-height: 42px; padding: 8px 5px 8px 8px; } /* * 詳細検索パネル（言語能力・資格）内の Select2 高さ固定 * 項目を選択しても内部チップが積み重なって縦に伸びないよう max-height で上限を設ける。 * 内部チップは #abilityTagRow / #licenceTagRow の外部タグ行で代替表示するため非表示。 */ .filterDetailSelect .select2-container .select2-selection--multiple { max-height: 42px; overflow: hidden; } .filterDetailSelect .select2-selection__choice { display: none !important; } /* Select2 検索テキストエリアの横幅を全幅にする */ .select2-container--default .select2-selection--multiple .select2-search__field { width: 100% !important; /* min-width: 100% は Firefox では overflow を引き起こす場合があるが、 JS 側で width:'100%' を指定してコンテナ幅を親要素に固定したためここでは元の値（100%）を維持して placeholder の表示位置を正常に保つ。 */ min-width: 100% !important; flex: 1 1 auto !important; } /* 行全体に広がるようにする（右側に寄るのを防ぐ） */ .select2-selection__rendered .select2-search--inline { /* flex-basis:100% でプレースホルダーが左端に張りつかないよう全幅確保する。 Firefox 対策は JS の width:'100%' + CSS の width:100%!important で行うため flex-shrink は 0 のまま維持する。 */ flex: 1 0 100% !important; } #searchQuery, .searchBtn { padding: 5px 15px; border-radius: 4px; border: 1px solid #464c59; } #searchQuery, .js-multiple-state, .js-multiple-workYear, .js-multiple-ability { width: var(--search-control-width); } #target { width: max-content !important; margin: 0 auto; display: none; } #target_wrapper { width: 100%; overflow-x: visible; overflow-y: visible; } /* 件数・ページネーションは横スクロール外 */ #target_wrapper .dataTables_info, #target_wrapper .dataTables_paginate { overflow-x: visible; width: 100%; box-sizing: border-box; } /* テーブル本体だけ横スクロール */ .table-scroll-area { width: 100%; overflow-x: auto; overflow-y: visible; } #target th, #target td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #target td.name a, #target td.sticky-name-col a { text-decoration: underline; color: inherit; } #target td.name a:hover, #target td.sticky-name-col a:hover { text-decoration-thickness: 2px; } #target.dataTable th.sticky-name-col, #target.dataTable td.sticky-name-col { position: sticky; left: 0 !important; background-color: #3b414e; } #target.dataTable th.sticky-name-col { z-index: 5; } #target.dataTable td.sticky-name-col { z-index: 4; box-shadow: 2px 0 0 #4f5460; } /* ColReorderのドラッグ用クローンは非表示にしない（非表示化するとドロップ判定が不安定になる） */ table.DTCR_clonedTable { opacity: 0.85; } #target.dataTable thead th { cursor: move; position: relative; padding-right: 40px; min-width: 68px; } #target.dataTable thead th.sticky-name-col { cursor: default; } /* ソートアイコン（クリック可能な実要素） */ .dt-sort-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 22px; cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; } /* ベース記号 - クラス未設定時でも常時表示（環境差・タイミング差対応） */ .dt-sort-icon::before { content: "⇅"; color: rgba(255, 255, 255, 0.45); font-size: 14px; } /* クラス付き時は上書き */ th.sorting .dt-sort-icon::before { content: "⇅"; color: rgba(255, 255, 255, 0.45); font-size: 14px; } th.sorting_asc .dt-sort-icon::before { content: "▲"; color: #fff; font-size: 11px; } th.sorting_desc .dt-sort-icon::before { content: "▼"; color: #fff; font-size: 11px; } #target.dataTable thead th .col-resize-handle { position: absolute; top: 0; right: -2px; width: 8px; height: 100%; cursor: col-resize; z-index: 8; } #target.dataTable thead th .col-resize-handle::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 2px; background: rgba(255, 255, 255, 0.45); } #target.dataTable thead th .col-resize-handle:hover::after { background: #7fc7ff; } #target.dataTable thead th.reorder-drag-source { background-color: #56607a !important; box-shadow: inset 0 -3px 0 #7fc7ff; } #target.dataTable thead th.reorder-drop-candidate { background-color: #4b556c !important; outline: 2px solid #7fc7ff; outline-offset: -2px; } #target .furigana-col-header, #target .furigana-col { display: none; } #btn { position: fixed; bottom: 30px; right: 30px; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; background-color: #74809a; } .tooltipunder { position: relative; cursor: pointer; display: block; width: var(--search-control-width); min-width: var(--search-control-width); } .tooltipunder .select2-container { /* Select2 が display:none 状態で初期化されると offsetWidth=0 となり、想定外の幅がインラインスタイルで直書きされる。 !important で CSS 側から親幅（170px）内に強制的に収める。 Firefox の根本原因は JS 側の width:'100%' で対処済みのため overflow:hidden は不要（Select2 内部の高さ・余白に影響するため削除）。 */ max-width: 100% !important; width: 100% !important; } .tooltipunder p { margin: 0; padding: 0; } .descriptionunder { display: none; position: absolute; padding: 10px; font-size: 12px; line-height: 1.6em; color: #fff; border-radius: 5px; background: #000; width: 200px; pointer-events: none; z-index: 20; } .descriptionunder:before { content: ""; position: absolute; top: -24px; right: 60%; border: 15px solid transparent; border-top: 15px solid #000; margin-left: -15px; transform: rotateZ(180deg); } .tooltipunder:hover .descriptionunder { display: inline-block; top: calc(100% + 8px); left: 0px; } .select2-search__field::placeholder { /* padding-left/padding-top は Firefox 非対応。検索バー内のインデントは .tooltipunder .select2-selection--multiple の padding-left:8px で対処しているためここではリセットする。 */ padding-left: 0; padding-top: 0; } body { font-family: 'Meiryo', sans-serif; } .sboxFreeSearch { width: 100%; box-sizing: border-box; padding: 8px 12px; /* ← 縦の余白を増やす */ height: 42px; /* ← Select2 と揃える */ font-size: 14px !important; } .searchInputContainer .js-multiple-workYear { width: 100%; box-sizing: border-box; height: 42px; min-height: 42px; padding: 5px 15px; /* sboxFreeSearch と同様のパディングベース */ padding-right: 30px; /* 矢印のスペース */ border: 1px solid #464c59; /* searchQuery と同じボーダー */ border-radius: 4px; background-color: #fff; /* デフォルトの野暮ったい矢印を消してシンプルなものに差し替え */ appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; color: #1f2530; font-size: 14px !important; line-height: normal; /* searchQueryに合わせる */ font-family: inherit; } .searchInputContainer .js-multiple-workYear.is-empty { color: #757575; /* input::placeholder に近い色 */ } .searchInputContainer .js-multiple-workYear:focus { outline: none; border-color: #464c59; box-shadow: none; } /* Select2 の外枠 */ .select2-container { width: 100% !important; } /* ここを修正！（display:flex を使わない） */ .searchInputContainer .select2-selection--multiple { display: flex; align-items: center; box-sizing: border-box; min-height: 42px !important; height: auto !important; vertical-align: middle; } .searchInputContainer .select2-container .select2-selection__rendered { display: flex; align-items: center; width: 100%; } .searchInputContainer .select2-container, .searchInputContainer .select2-container .select2-selection__rendered, .searchInputContainer .select2-container .select2-selection__placeholder, .searchInputContainer .select2-container--default .select2-selection--multiple .select2-search__field { font-size: 14px !important; } .searchInputContainer .select2-container--default .select2-selection--multiple .select2-search__field { box-sizing: border-box; width: auto !important; min-height: 0 !important; height: 18px !important; line-height: 18px !important; margin-top: 0 !important; margin-left: 0 !important; font-family: inherit !important; display: flex; align-items: center; }