/* Contact Page */
/* フォーム全体の調整 */
.form-instruction {
  font-size: 15px;
  font-weight: bolder;
  margin-bottom: 60px;
}

.contact-form {
  margin: 0 auto;
}

/* 各入力グループ */
.form-group {
  margin-bottom: 25px;
  flex: 1; /* 横並び時に均等に広がる */
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}

/* 必須ラベル */
.required {
  background: var(--color-red);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 8px;
  vertical-align: middle;
}

/* 入力要素のスタイル */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: var(--color-light-gray);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

textarea {
  resize: vertical; /* 縦方向にのみリサイズ可能に */
}

/* 横並びのレイアウト設定 */
.form-row {
  display: flex;
  gap: 30px; /* 項目間の隙間 */
}

/* 送信ボタンエリア */
.form-submit {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 50px;
}

.btn {
  flex: 1;
  max-width: 250px;
  background-color: var(--color-green);
  color: white;
  border: none;
  padding: 15px 0;
  font-size: 16px;
  border-radius: 30px; /* カプセル型のボタン */
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.btn:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  /* Contact Page */
  .form-row {
    flex-direction: column; /* 全て縦並びに */
    gap: 0;
  }

  .form-submit {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn {
    max-width: none;
    width: 100%;
  }
}