/* 
 * component.css
 * コンポーネントスタイル
 *
 * ⚫︎規則
 * 　margin等コンポーネント外部のレイアウトに影響するスタイル禁止
 */
.btn {
  max-width: 350px;
  margin: 0 auto;
  padding-top: 30px;
  cursor: pointer;
  transition: 0.5s all;
}
.btn:hover {
  opacity: 0.5;
}

select,
input {
  height: 43px;
  padding-left: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

input[type='text'] {
  width: 100%;
}
select {
  width: 75%;
  appearance: none;
  background-color: #fff;
}

select:focus,
input:focus,
textarea:focus {
  outline: 2px solid #5ac5f1;
}
textarea {
  resize: vertical;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  color: #333;
}