/* contact.css ================================================
   お問い合わせページ専用（header.php で is_page('contact') のとき読み込み）
   admini.css のフォーム部分を移植
============================================================ */

:root {
  --accent_color: #EB6C21;
  --req_color:    #F7381F;
}

/* フォーム（Contact Form 7）--------------------------------- */
/* dl/dt/dd 構造（design_img/08-form.md・wp-pkg-frontend--contact.md準拠） */
.form_wrapper dt {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.form_wrapper dt .req {
  display: inline-block;
  background: var(--req_color);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 400;
  padding: .2rem .8rem;
  border-radius: .4rem;
}
.form_wrapper dd { margin-bottom: 2rem; }

.wpcf7-form label {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: .8rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 1.2rem 1.6rem;
  font-size: 1.6rem;
  font-family: var(--font_jp);
  border: 1px solid var(--color_gray);
  border-radius: .6rem;
  background: #fff;
}
.wpcf7-form textarea {
  min-height: 12rem;
  resize: vertical;
}
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-form .wpcf7-list-item {
  display: block;
  margin: 0 0 1.2rem;
}
.wpcf7-form .wpcf7-list-item:last-child { margin-bottom: 0; }
.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  font-weight: 400;
}
.wpcf7-form .wpcf7-radio {
  display: flex;
  gap: .8rem;
}
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
  flex: 1;
  margin: 0;
  background: #fff;
  border: 1px solid var(--color_gray);
  border-radius: .6rem;
  padding: 1.2rem 1.6rem;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--accent_color);
  flex-shrink: 0;
}
.wpcf7-form p { margin-bottom: 2.4rem; }
@property --submit-grad-a {
  syntax: '<color>';
  inherits: false;
  initial-value: #C81700;
}
@property --submit-grad-b {
  syntax: '<color>';
  inherits: false;
  initial-value: #EB6C21;
}
.wpcf7-form input[type="submit"] {
  display: block;
  margin: 0 auto;
  padding: 1.2rem 4.8rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  --submit-grad-a: #C81700;
  --submit-grad-b: #EB6C21;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(to bottom, var(--submit-grad-a), var(--submit-grad-b));
  background-repeat: no-repeat, no-repeat;
  background-position: right 2.4rem center, center;
  background-size: .8rem 1.4rem, 100% 100%;
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 0 10px rgba(141, 93, 27, .15);
  cursor: pointer;
  transition: var(--transition), --submit-grad-a .3s ease, --submit-grad-b .3s ease;
}
.wpcf7-form input[type="submit"]:hover {
  --submit-grad-a: #EB6C21;
  --submit-grad-b: #C81700;
}
.wpcf7-form .wpcf7-not-valid-tip {
  font-size: 1.3rem;
  color: #d32f2f;
  margin-top: .4rem;
}
.wpcf7-form .wpcf7-response-output {
  margin-top: 2.4rem;
  padding: 1.2rem 1.6rem;
  border-radius: .4rem;
  font-size: 1.4rem;
}