@charset "UTF-8";


/* =================================================
  FE Advanced Search (FEAS) 連携用スタイル
================================================= */

/* 1. フォーム全体（既存の .search-panel のデザインを統合） */
#feas-searchform-0 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 50px;
}

/* 2. 「分野」「キーワード」というテキストの共通装飾 */
#feas-searchform-0 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-title);
}

/* 3. ドロップダウンとテキスト入力欄の共通装飾（既存の .search-field の仕様を統合） */
#feas-searchform-0 select,
#feas-searchform-0 input[type="text"] {
  display: block;             /* テキストの下に配置するため改行 */
  margin-top: 6px;            /* テキストとの隙間 */
  height: 46px;
  padding: 0 14px;
  font-size: 1rem;
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-card-bg);
  box-sizing: border-box;     /* 横幅計算のバグ防止 */
}

/* パソコン表示時のそれぞれの横幅指定 */
#feas-searchform-0 select {
  min-width: 200px; 
}
#feas-searchform-0 input[type="text"] {
  width: 500px;
}

/* 入力欄にフォーカスが当たったときの輪郭線 */
#feas-searchform-0 select:focus,
#feas-searchform-0 input[type="text"]:focus {
  outline: 3px solid var(--color-primary-focus);
  outline-offset: -1px;
}

/* 4. 検索ボタン（送信ボタン）の装飾（既存の .btn-primary の仕様を統合） */
#feas-searchform-0 .feas-submit-button {
  height: 46px;
  padding: 0 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  transition: background 0.15s, border-color 0.15s;
  margin-left: auto;          /* パソコン時は右端に寄せる */
}

/* 検索ボタンのホバー・フォーカス時の挙動 */
#feas-searchform-0 .feas-submit-button:hover {
  background: var(--color-primary-hover);
}
#feas-searchform-0 .feas-submit-button:focus {
  outline: 3px solid var(--color-primary-focus);
  outline-offset: -1px;
}

/* 5. スマートフォン環境（画面幅 768px 以下）のレスポンシブ対応 */
@media (max-width: 768px) {
  #feas-searchform-0 {
    flex-direction: column;   /* 縦並びに変更 */
    align-items: stretch;     /* 各項目を横いっぱいに広げる */
  }

  #feas-searchform-0 select,
  #feas-searchform-0 input[type="text"] {
    width: 100%;              /* 横幅100%に統一 */
  }

  #feas-searchform-0 .feas-submit-button {
    width: 100%;              /* ボタンも横幅100%にしてタップしやすく */
    margin-left: 0;
    margin-top: 10px;
  }
}