/* 入力欄の基本デザイン */
.form-area .item dd input[type="text"],
.form-area .item dd input[type="email"],
.form-area .item dd input[type="tel"],
.form-area .item dd select,
.form-area .item dd textarea {
  width: 100%;
  border: solid 1px #ccc;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
}

/* フォーカス時のアニメーション */
input:focus,
textarea:focus,
select:focus {
  background-color: #e0ffff;
  border-color: #66aaff;
  box-shadow: 0 0 6px rgba(102,170,255,0.6);
  transition: 0.2s ease;
}

/* スマホ最適化 */
@media screen and (max-width: 767px) {

  .form-area {
    margin: 0 auto 40px;
    padding: 0 15px;
  }

  .form-area .item {
    flex-direction: column;
    margin-bottom: 22px;
  }

  .form-area .item dt {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 6px;
    font-size: 15px;
    text-align: left;
  }

  .form-area .item dd {
    width: 100%;
    padding: 0;
  }

  .form-area .item dd input,
  .form-area .item dd select,
  .form-area .item dd textarea {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  .form-area .item dd textarea {
    min-height: 150px;
  }

  button {
    width: 100%;
    padding: 14px 0;
    font-size: 18px;
    margin-top: 15px;
    border-radius: 6px;
  }

  button + button {
    margin-top: 10px;
  }
}

/* ボタンのタップ演出 */
button:active {
  transform: scale(0.97);
  transition: 0.05s;
}