body {
  /* 欧文フォントを先に指定し、日本語フォントより優先させる */
  font-family:
    /* 1. iOS/macOS向け欧文 */
    'Helvetica Neue', 
    /* 2. Windows/汎用欧文 */
    Arial, 
    /* 3. macOS向け日本語 */
    'Hiragino Sans',
    'Hiragino Kaku Gothic ProN',
    /* 4. Windows向け日本語（モダン） */
    'Yu Gothic UI',
    /* 5. Windows向け日本語（汎用） */
    'Meiryo',
    /* 6. Android/その他の日本語（Webフォントとしても人気）*/
    'Noto Sans JP',
    /* 7. 最後のフォールバック（ゴシック体の総称フォント） */
    sans-serif;
}

/* ベースのモノトーン設定 */
:root {
  --background-color: #ffffff;
  --border-color: #cccccc;
  --focus-color: #333333;
  --text-color: #1a1a1a;
  --font-size: 16px;
  --radius: 4px;
}

/* ------------------------------------------------ */
/* 共通スタイル: input[type="text"] と select に適用 */
/* ------------------------------------------------ */
input[type="text"], 
.select-container select {
  /* ブラウザデフォルトスタイルのリセット (selectに必須) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* サイズとデザイン */
  width: 100%; /* 親要素の幅いっぱいに広げる */
  padding: 12px 15px;
  font-size: var(--font-size);
  font-family: inherit;
  color: var(--text-color);
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  
  /* アニメーションとボックスモデル */
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box; 
  margin-bottom: 15px; /* 要素間に隙間を空ける */
}

/* ------------------------------------------------ */
/* input[type="text"] の専用スタイル */
/* ------------------------------------------------ */
input[type="text"]::placeholder {
  color: #888888;
}

/* inputとselectのホバー時・フォーカス時 */
input[type="text"]:hover, 
.select-container select:hover {
  border-color: #999999;
}

input[type="text"]:focus, 
.select-container select:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: 0 0 0 1px var(--focus-color);
}


/* ------------------------------------------------ */
/* selectのカスタム矢印の配置 */
/* ------------------------------------------------ */
/* selectの親要素（ラッパー）にpositionを設定 */
.select-container {
  position: relative;
  width: 100%;
  display: inline-block; /* 幅を適切に設定するため */
}

/* select自体の右側のパディングを調整（矢印のスペース） */
.select-container select {
  padding-right: 35px;
}

/* 矢印（ドロップダウンアイコン）の作成 */
.select-container::after {
  content: ''; 
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  
  /* 三角形を描画 */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--focus-color); 
  
  pointer-events: none; /* 矢印の上でクリック不可にする */
}