|
|
| 205行目: |
205行目: |
| </details> | | </details> |
| </form> | | </form> |
|
| |
| <style>
| |
| /* ========================================
| |
| フォーム全体
| |
| ======================================== */
| |
| #searchForm {
| |
| max-width: 800px;
| |
| font-size: 14px;
| |
| }
| |
|
| |
| .search-form-container {
| |
| background: #fff;
| |
| border-radius: 12px;
| |
| padding: 20px;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
| /* ========================================
| |
| ボタンエリア
| |
| ======================================== */
| |
| .form-actions {
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| gap: 10px;
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
| .clear-btn {
| |
| padding: 10px 20px;
| |
| background: #e0e0e0;
| |
| color: #333;
| |
| border: none;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| transition: all 0.2s;
| |
| }
| |
|
| |
| .clear-btn:hover {
| |
| background: #d0d0d0;
| |
| }
| |
|
| |
| .clear-btn:active {
| |
| transform: scale(0.98);
| |
| }
| |
|
| |
| .search-btn {
| |
| padding: 10px 24px;
| |
| background: #f59e0b;
| |
| color: #fff;
| |
| border: none;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| transition: all 0.2s;
| |
| }
| |
|
| |
| .search-btn:hover {
| |
| background: #d97706;
| |
| }
| |
|
| |
| .search-btn:active {
| |
| transform: scale(0.98);
| |
| }
| |
|
| |
| /* ========================================
| |
| フォーム行
| |
| ======================================== */
| |
| .form-row {
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .toggle-row {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| padding: 12px 16px;
| |
| background: #f9fafb;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| .toggle-label {
| |
| font-weight: 500;
| |
| color: #333;
| |
| }
| |
|
| |
| /* ========================================
| |
| 入力フィールド
| |
| ======================================== */
| |
| .form-input,
| |
| .form-select {
| |
| width: 100%;
| |
| padding: 12px 16px;
| |
| border: 1px solid #d1d5db;
| |
| border-radius: 8px;
| |
| font-size: 14px;
| |
| transition: all 0.2s;
| |
| background: #fff;
| |
| }
| |
|
| |
| .form-input:focus,
| |
| .form-select:focus {
| |
| outline: none;
| |
| border-color: #f59e0b;
| |
| box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
| |
| }
| |
|
| |
| .form-input::placeholder {
| |
| color: #9ca3af;
| |
| }
| |
|
| |
| /* ========================================
| |
| 予算セクション
| |
| ======================================== */
| |
| .budget-section {
| |
| background: #f9fafb;
| |
| padding: 16px;
| |
| border-radius: 8px;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .budget-header {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .budget-title {
| |
| font-weight: 600;
| |
| color: #333;
| |
| }
| |
|
| |
| .budget-type {
| |
| display: flex;
| |
| gap: 16px;
| |
| }
| |
|
| |
| .budget-range {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .form-select-small {
| |
| flex: 1;
| |
| padding: 10px 12px;
| |
| border: 1px solid #d1d5db;
| |
| border-radius: 6px;
| |
| font-size: 13px;
| |
| background: #fff;
| |
| }
| |
|
| |
| .budget-separator {
| |
| color: #6b7280;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| /* ========================================
| |
| トグルスイッチ
| |
| ======================================== */
| |
| .toggle {
| |
| position: relative;
| |
| width: 44px;
| |
| height: 24px;
| |
| display: inline-block;
| |
| }
| |
|
| |
| .toggle input {
| |
| display: none;
| |
| }
| |
|
| |
| .slider {
| |
| position: absolute;
| |
| cursor: pointer;
| |
| inset: 0;
| |
| background: #d1d5db;
| |
| border-radius: 24px;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .slider::before {
| |
| content: "";
| |
| position: absolute;
| |
| height: 18px;
| |
| width: 18px;
| |
| left: 3px;
| |
| top: 3px;
| |
| background: white;
| |
| border-radius: 50%;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .toggle input:checked + .slider {
| |
| background: #f59e0b;
| |
| }
| |
|
| |
| .toggle input:checked + .slider::before {
| |
| transform: translateX(20px);
| |
| }
| |
|
| |
| /* ========================================
| |
| ラジオボタン
| |
| ======================================== */
| |
| .radio-label {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
|
| |
| .radio-label input[type="radio"] {
| |
| width: 18px;
| |
| height: 18px;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .radio-label span {
| |
| font-size: 14px;
| |
| color: #374151;
| |
| }
| |
|
| |
| .radio-grid {
| |
| display: flex;
| |
| gap: 16px;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| /* ========================================
| |
| チェックボックス
| |
| ======================================== */
| |
| .checkbox-label {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
|
| |
| .checkbox-label input[type="checkbox"] {
| |
| width: 18px;
| |
| height: 18px;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .checkbox-label span {
| |
| font-size: 14px;
| |
| color: #374151;
| |
| }
| |
|
| |
| .checkbox-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
| |
| gap: 12px;
| |
| }
| |
|
| |
| /* ========================================
| |
| アコーディオン
| |
| ======================================== */
| |
| .accordion {
| |
| background: #fff;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 12px;
| |
| padding: 0;
| |
| overflow: hidden;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| }
| |
|
| |
| .accordion summary {
| |
| padding: 16px 20px;
| |
| cursor: pointer;
| |
| font-weight: 600;
| |
| font-size: 15px;
| |
| color: #111827;
| |
| background: #f9fafb;
| |
| user-select: none;
| |
| list-style: none;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .accordion summary::-webkit-details-marker {
| |
| display: none;
| |
| }
| |
|
| |
| .accordion summary::after {
| |
| content: "▼";
| |
| font-size: 12px;
| |
| color: #6b7280;
| |
| transition: transform 0.3s;
| |
| }
| |
|
| |
| .accordion[open] summary::after {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .accordion-content {
| |
| padding: 20px;
| |
| }
| |
|
| |
| /* ========================================
| |
| フィルターグループ
| |
| ======================================== */
| |
| .filter-group {
| |
| border: none;
| |
| padding: 0;
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| .filter-group:last-of-type {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .filter-group legend {
| |
| font-weight: 600;
| |
| font-size: 14px;
| |
| color: #111827;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| /* ========================================
| |
| ダークモード対応
| |
| ======================================== */
| |
| .skin-theme-clientpref-night .search-form-container,
| |
| .skin-theme-clientpref-night .accordion {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .form-input,
| |
| .skin-theme-clientpref-night .form-select,
| |
| .skin-theme-clientpref-night .form-select-small {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .toggle-row,
| |
| .skin-theme-clientpref-night .budget-section,
| |
| .skin-theme-clientpref-night .accordion summary {
| |
| background: #2a2a2a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .toggle-label,
| |
| .skin-theme-clientpref-night .budget-title,
| |
| .skin-theme-clientpref-night .filter-group legend,
| |
| .skin-theme-clientpref-night .accordion summary {
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .radio-label span,
| |
| .skin-theme-clientpref-night .checkbox-label span {
| |
| color: #d1d5db;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .clear-btn {
| |
| background: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .clear-btn:hover {
| |
| background: #4a4a4a;
| |
| }
| |
|
| |
| /* 自動モード（ダーク時） */
| |
| @media (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os .search-form-container,
| |
| .skin-theme-clientpref-os .accordion {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .form-input,
| |
| .skin-theme-clientpref-os .form-select,
| |
| .skin-theme-clientpref-os .form-select-small {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .toggle-row,
| |
| .skin-theme-clientpref-os .budget-section,
| |
| .skin-theme-clientpref-os .accordion summary {
| |
| background: #2a2a2a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .toggle-label,
| |
| .skin-theme-clientpref-os .budget-title,
| |
| .skin-theme-clientpref-os .filter-group legend,
| |
| .skin-theme-clientpref-os .accordion summary {
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .radio-label span,
| |
| .skin-theme-clientpref-os .checkbox-label span {
| |
| color: #d1d5db;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .clear-btn {
| |
| background: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .clear-btn:hover {
| |
| background: #4a4a4a;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| レスポンシブ
| |
| ======================================== */
| |
| @media (max-width: 600px) {
| |
| .search-form-container {
| |
| padding: 16px;
| |
| }
| |
|
| |
| .budget-header {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| gap: 12px;
| |
| }
| |
|
| |
| .checkbox-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| </style>
| |
| </html> | | </html> |
