/* contact.css - Skin for CONTACT page only */

/* 見出しグループ */
.contact-lead-group {
  margin-bottom: 24px;
}

.contact-en-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  /* color: var(--hero-blue-5); */
  margin-bottom: 4px;
}

.contact-ja-title {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.concept-body {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 40px;
}

.photo-frame { 
  aspect-ratio: 4 / 5;
  background: #000; 
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden; 
}

.photo-image { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* フォームレイアウト */
/* .contact-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
} */

#form {
  /* ヘッダーの高さ（約56px〜72px）＋ 理想の余白を考慮し、100pxほど確保 */
  scroll-margin-top: 140px; 
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 0.75rem;
  /* letter-spacing: 0.08em;
  text-transform: uppercase; */
  color: var(--text-muted);
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px;
  border: 3px solid var(--hero-blue-4);
  background: #fff;
  color: var(--ink-on-white);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--hero-blue-4);
  box-shadow: 0 0 0 3px rgba(11, 91, 255, 0.1);
}

.form-submit-area {
  margin-top: 12px;
}

/* 連絡先テーブルの余白調整 */
.contact-info-table-wrapper {
  margin-top: 40px;
}