/* =========================
   Contact Page
========================= */
/* ===== 1. PAGE HERO ===== */
#contact-hero{ position: relative; min-height: 40vh;
  display: flex; align-items: center;
  background: var(--navy2); overflow: hidden;
}
#contact-hero::before{ content: ''; position: absolute; inset: 0;
  background: linear-gradient(130deg, rgba(15,30,66,.95) 0%, rgba(27,45,94,.80) 55%, rgba(40,176,210,.15) 100%);
}
#contact-hero::after{ content: ''; position: absolute; top: -100px; right: -80px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(40,176,210,.22) 0%, transparent 65%);
  border-radius: 50%;
}
.hero-grid-lines{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-grid-lines::before{ content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(40,176,210,.12), transparent); }
.hero-grid-lines::after{ content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(40,176,210,.12), transparent); }
.c-hero-content{ position: relative; z-index: 2; width: 100%; padding: 120px 0 72px; }
.c-hero-eyebrow{ display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.c-hero-eyebrow-bar{ width: 40px; height: 2px; background: var(--blue); flex-shrink: 0; }
.c-hero-eyebrow-text{ font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--blue); text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.c-hero-title{ font-size: clamp(32px, 7vw, 96px); font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 18px; }
.c-hero-title span{ color: var(--blue); }
.c-hero-sub{ font-size: 14px; color: rgba(255,255,255,.5); letter-spacing: .08em; font-family: 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; }
/* ===== 3. フォーム ===== */
#contact-form-sec{ padding: 100px 0 120px; background: var(--gray50); }
/* ワンカラム用の max-width 調整 */
.contact-layout{ max-width: 800px; margin: 0 auto; }
/* フォーム本体 */
.contact-form-wrap{ background: #fff;
  padding: 64px 56px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}
/* 左上アクセントライン */
.contact-form-wrap::before{ content: ''; position: absolute;
  top: 0; left: 0; width: 3px; height: 80px;
  background: linear-gradient(to bottom, var(--blue), transparent);
}
.contact-form-wrap .contact-cf7-placeholder .contact-form-wrap{
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.contact-form-wrap .contact-cf7-placeholder .contact-form-wrap::before{ display: none; }
.form-section-title{ font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--blue); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.form-section-title::after{ content: ''; flex: 1; height: 1px; background: var(--gray100); }
/* フォーム行 */
.form-row{ margin-bottom: 28px; }
.form-row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.form-label{ display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--navy);
  letter-spacing: .04em; margin-bottom: 8px;
}
.form-required{ font-size: 10px; font-weight: 700; color: #fff;
  background: var(--blue); padding: 1px 7px; letter-spacing: .04em;
}
.form-optional{ font-size: 10px; font-weight: 700; color: var(--gray500);
  border: 1px solid var(--gray300); padding: 1px 7px;
}
/* input / select / textarea 共通 */
.form-input, .form-select, .form-textarea{ width: 100%; padding: 14px 16px;
  font-family: inherit; font-size: 14px; color: var(--navy);
  border: 1.5px solid var(--gray300); background: #fff;
  outline: none; border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder{ color: var(--gray300); font-size: 13px; }
.form-input:focus, .form-select:focus, .form-textarea:focus{ border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(40,176,210,.1);
}
.form-select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px; cursor: pointer;
}
.form-textarea{ min-height: 180px; resize: vertical; line-height: 1.75; }
/* ラジオ風お問合せ種別 */
.form-type-group,
.form-type-group .wpcf7-form-control{ display: flex; gap: 8px; flex-wrap: wrap; }
.form-type-group p{ margin: 0; }
.form-type-group .wpcf7-list-item{ margin: 0; }
.form-type-group label{ display: inline-flex; margin: 0; }
.form-type-item input[type="radio"],
.form-type-group input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.form-type-label{ display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--gray300); color: var(--gray500);
  cursor: pointer; transition: all .2s; user-select: none;
}
.form-type-group .wpcf7-list-item-label{ display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--gray300); color: var(--gray500);
  cursor: pointer; transition: all .2s; user-select: none;
}
.form-type-item:checked + .form-type-label{ border-color: var(--blue); color: var(--navy);
  background: rgba(40,176,210,.07);
}
.form-type-group input[type="radio"]:checked + .wpcf7-list-item-label{ border-color: var(--blue); color: var(--navy);
  background: rgba(40,176,210,.07);
}
.form-type-label::before{ content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--gray300); flex-shrink: 0; transition: all .2s;
}
.form-type-group .wpcf7-list-item-label::before{ content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--gray300); flex-shrink: 0; transition: all .2s;
}
.form-type-item:checked + .form-type-label::before{ background: var(--blue); border-color: var(--blue);
}
.form-type-group input[type="radio"]:checked + .wpcf7-list-item-label::before{ background: var(--blue); border-color: var(--blue);
}
/* アップロードエリア専用スタイル */
.file-upload-area{ border: 2px dashed var(--gray300); padding: 36px; text-align: center;
  background: var(--gray50); cursor: pointer; transition: border-color .2s, background .2s;
}
.file-upload-area:hover, .file-upload-area.dragover{ border-color: var(--blue) !important; background: rgba(40,176,210,.04) !important;
}
/* プライバシーポリシー同意 */
.privacy-wrap{ background: var(--gray50); padding: 24px;
  border-left: 3px solid var(--gray300); margin-bottom: 32px;
}
.privacy-text{ font-size: 13px; color: var(--gray700); line-height: 1.75; margin-bottom: 16px; }
.privacy-text a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.checkbox-row{ display: flex; align-items: center; gap: 12px; cursor: pointer; }
.checkbox-row p{ margin: 0; }
.checkbox-row label{ display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.checkbox-row .wpcf7-list-item{ margin: 0; }
.checkbox-row .wpcf7-list-item-label{ display: inline-flex; align-items: center; gap: 12px; }
.checkbox-input{ position: absolute; opacity: 0; pointer-events: none; }
.checkbox-custom{ width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--gray300); background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.checkbox-input:checked ~ .checkbox-custom{ background: var(--navy); border-color: var(--navy);
}
.checkbox-input:checked ~ .checkbox-custom::after{ content: ''; display: block; width: 5px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(40deg) translate(-1px, -1px);
}
.checkbox-input:checked + .wpcf7-list-item-label .checkbox-custom{ background: var(--navy); border-color: var(--navy);
}
.checkbox-input:checked + .wpcf7-list-item-label .checkbox-custom::after{ content: ''; display: block; width: 5px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(40deg) translate(-1px, -1px);
}
.checkbox-label{ font-size: 14px; font-weight: 700; color: var(--navy); }
/* 送信ボタン */
.submit-row{ text-align: center; }
.btn-submit{ width: 100%; max-width: 400px;
  padding: 18px 0; font-family: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: .08em;
  background: var(--navy); color: #fff;
  border: none; cursor: pointer; position: relative; overflow: hidden;
  transition: opacity .2s; margin: 0 auto; display: block;
}
.btn-submit::before{ content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--blue), #1B8FAD);
  transform: translateX(-101%); transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.btn-submit:hover::before{ transform: translateX(0); }
.btn-submit span{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-submit:disabled{ opacity: .5; cursor: not-allowed; }
.form-note{ margin-top: 14px; font-size: 12px; color: var(--gray500); text-align: center; }
/* 送信完了メッセージ */
.form-complete{ display: none; text-align: center; padding: 64px 0;
}
.form-complete.show{ display: block; }
.complete-icon{ font-size: 56px; margin-bottom: 24px; }
.complete-title{ font-size: 24px; font-weight: 900; color: var(--navy); margin-bottom: 14px; }
.complete-desc{ font-size: 15px; color: var(--gray700); line-height: 1.85; }
/* FAQリンクエリア (送信ボタン下) */
.faq-link-area{ margin-top: 56px;
  padding: 48px;
  background: #fff;
  border: 1.5px solid var(--gray100);
}
.faq-link-label{ font-size: 16px; font-weight: 900; color: var(--navy); margin-bottom: 8px; display: block; }
.faq-link-desc{ font-size: 14px; color: var(--gray500); margin-bottom: 32px; line-height: 1.6; }
.faq-link-grid{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.faq-link-item{ display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; background: var(--gray50); border: 1px solid var(--gray100);
  font-size: 14px; font-weight: 700; color: var(--navy); transition: border-color .2s, color .2s, background .2s;
}
.faq-link-item:hover{ border-color: var(--blue); color: var(--blue); background: #fff;}
.faq-link-item .arr{ transition: transform .2s; }
.faq-link-item:hover .arr{ transform: translateX(4px); }
.faq-link-all{ display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); }
.faq-link-all .arr{ transition: transform .2s; }
.faq-link-all:hover .arr{ transform: translateX(4px); }
/* ===== RESPONSIVE ===== */
@media (max-width: 640px) { .form-row-2{ grid-template-columns: 1fr; }
.contact-form-wrap{ padding: 36px 24px; }
.faq-link-area{ padding: 24px; }
.c-hero-content{ padding: 100px 0 56px; }
}