/* お問い合わせフォーム共通スタイル */
:root {
  --form-main: #1577bd;     /* ブランドブルー */
  --form-accent: #115f97;   /* ホバー時の濃ブルー */
  --form-border: #bcdcef;   /* 淡ブルーの罫線 */
  --form-bg-soft: #e8f3fb;  /* 淡ブルー背景 */
  --form-text: #333;
  --form-error: #d9534f;
  --form-required: #ef8200;  /* 必須バッジはオレンジ（差し色） */
}

.contact-page {
  max-width: 880px;
  margin: 0 0 60px;
  padding: 0;
  color: var(--form-text);
  font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.7;
}

.contact-page-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--form-text);
  border-bottom: 4px dotted var(--form-main);  /* 本体の見出し(h2-G003)と統一：ドット罫線 */
  padding-bottom: 7px;
  margin: 20px 0 25px;
}

.contact-lead {
  font-size: 14px;
  margin-bottom: 25px;
}

.contact-lead .req-note {
  color: var(--form-required);
}

.contact-form table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
  background: #fff;
}

.contact-form th,
.contact-form td {
  padding: 14px 16px;
  border: 1px solid var(--form-border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.contact-form th {
  background: var(--form-bg-soft);
  width: 32%;
  font-weight: bold;
  white-space: nowrap;
}

.contact-form .req {
  display: inline-block;
  background: var(--form-required);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

.contact-form .opt {
  display: inline-block;
  background: #999;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
  max-width: 100%;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--form-main);
  box-shadow: 0 0 0 2px rgba(21, 119, 189, 0.18);
}

.contact-form .field-name input { width: 45%; margin-right: 5px; }
.contact-form .field-zip input  { width: 80px; }
.contact-form .field-tel input  { width: 80px; }
.contact-form select.field-state { width: 180px !important; min-width: 180px !important; padding-right: 28px; }
.contact-form .field-address    { width: 100%; }
.contact-form .field-email      { width: 100%; max-width: 420px; }
.contact-form textarea          { width: 100%; min-height: 180px; resize: vertical; }

.contact-form .field-hint {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.contact-form .field-error {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  background: #fff3f3;
  border-left: 4px solid var(--form-error);
  color: var(--form-error);
  font-size: 13px;
}

.contact-form tr.has-error th {
  background: #ffeaea;
}

.contact-privacy {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 15px;
  margin: 25px 0;
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
}

.contact-privacy h3 {
  font-size: 14px;
  margin: 0 0 10px;
  font-weight: bold;
}

.contact-privacy-agree {
  text-align: center;
  margin: 20px 0;
  font-size: 15px;
}

.contact-privacy-agree label {
  cursor: pointer;
}

.contact-privacy-agree input {
  margin-right: 8px;
  transform: scale(1.2);
  vertical-align: middle;
}

.contact-buttons {
  text-align: center;
  margin: 30px 0 20px;
}

.contact-buttons button,
.contact-buttons a.btn-link {
  display: inline-block;
  padding: 12px 30px;
  margin: 0 8px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  min-width: 150px;
}

/* custom.css の div.outer a 色(!important)を打ち消し、ボタン文字を白で固定 */
.contact-buttons a.btn-link,
.contact-buttons a.btn-link:hover,
.contact-buttons a.btn-link:focus,
.contact-buttons button {
  color: #fff !important;
}

.contact-buttons .btn-primary {
  background: var(--form-main);
  color: #fff !important;
}

.contact-buttons .btn-primary:hover {
  background: var(--form-accent);
}

.contact-buttons .btn-secondary {
  background: #888;
  color: #fff !important;
}

.contact-buttons .btn-secondary:hover {
  background: #666;
}

.contact-error-summary {
  background: #fff3f3;
  border: 1px solid var(--form-error);
  color: var(--form-error);
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 3px;
}

.contact-error-summary p {
  margin: 0 0 8px;
  font-weight: bold;
}

.contact-error-summary ul {
  margin: 0;
  padding-left: 20px;
}

.contact-confirm-note {
  text-align: center;
  font-size: 14px;
  margin: 20px 0;
  padding: 12px;
  background: var(--form-bg-soft);
  border: 1px solid var(--form-border);
  border-radius: 3px;
}

.contact-thanks {
  text-align: center;
  padding: 40px 20px;
}

.contact-thanks h3 {
  font-size: 20px;
  color: var(--form-main);
  margin-bottom: 20px;
}

/* 送信完了ボタン：custom.css の青リンク色(!important)を打ち消して白文字に */
.contact-thanks a.btn-link,
.contact-thanks a.btn-link:hover,
.contact-thanks a.btn-link:focus {
  color: #fff !important;
}

.contact-thanks p {
  margin: 12px 0;
  font-size: 14px;
}

/* honeypot field */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* breadcrumb tweak so it doesn't collide with header */
#breadcrumb {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  font-size: 12px;
}
#breadcrumb li {
  display: inline;
}

@media screen and (max-width: 767px) {
  .contact-form th,
  .contact-form td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-form th {
    border-bottom: none;
  }
  .contact-form td {
    border-top: none;
  }
  .contact-form .field-name input { width: 47%; }
  .contact-form .field-email { max-width: 100%; }
  .contact-buttons button,
  .contact-buttons a.btn-link {
    display: block;
    width: 100%;
    margin: 8px 0;
    box-sizing: border-box;
  }
}