.contact-section {
  padding: 40px 20px;
  background: #f7f7f7;
}

.contact-container {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  padding: 30px 25px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.contact-title {
  font-size: 1.6rem;
  margin-bottom: 20px;
  text-align: center;
}

.contact-desc,
.contact-note {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 18px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  padding: 10px 14px; /* ← 左右に余白を作る */
  box-sizing: border-box; /* ← これが超重要 */
}

.contact-btn {
  width: 100%;
  padding: 14px;
  background: #0078d4;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  cursor: pointer;
}

.contact-btn:hover {
  background: #005fa3;
}

.radio-group {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px 12px 0px; /* 上 右 下 左 */
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafafa;
  user-select: none;
}

.radio-group .radio-text {
  flex: 1;
  min-width: 140px; /* 好きな幅に調整できる */
}

.radio-group label:hover {
  background: #f0f8ff;
  border-color: #0078d4;
}

.radio-group input[type="radio"] {
  align-items: center;
  transform: scale(1.2) translateX(5px) translateY(7px);  // さらに下げる
;
}

#age {
  width: 120px;
}

.zip-wrap {
  display: flex;
  gap: 8px;
}

.zip-wrap input {
  flex: 1;
}

.zip-wrap .buttonb  {
  background: #0078d4;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 40px;   /* 好きな高さに固定 */
  padding: 0 10px;  
}

.time-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-wrap input[type="time"] {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.time-wrap .tilde {
  font-size: 15px;
  padding-bottom: 16px;
}


@media (max-width: 600px) {
  .time-wrap {
    align-items: flex-start;
    width: 45%;
  }
  .time-wrap .tilde {
  font-size: 15px;
  padding-top: 8px; /* ← 少し下げる */

}
}


/* スマホは縦並び */
@media (max-width: 600px) {
    .radio-group {
    flex-direction: column;
    gap: 10px; /* 縦の余白を少し調整 */
    width: 50%;

  }
  .radio-group label {
    width: auto;        /* ← 枠が横いっぱいに広がらない */
    max-width: 100%;    /* ← はみ出し防止 */
    align-items: center;
  }
}

/* 入力欄の強調（最優先で効かせる） */
.contact-form input#emailField.highlight,
.contact-form input#telField.highlight {
  border: 2px solid #0078d4 !important;
  background: #eef7ff !important;
}

/* ラジオカードの強調 */
.radio-group label.highlight {
  border: 2px solid #0078d4 !important;
  background: #eef7ff !important;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
}

.checkbox-list label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  margin: 0;
}

.checkbox-list input[type="checkbox"] {
  width: auto !important;
  margin: 0;
}