/* =========================================================
 * contact.css : 「10 無料相談 / 11 お問い合わせ」フォームページ固有スタイル
 * デザイン基準:
 *   お問い合わせ(既定): design-reference/11-contact-pc.png (1440x2185) / 11-contact-sp.png
 *   無料相談(?type=free): design-reference/10-free-pc.png (1440x2594) / 10-free-sp.png
 * 中央コンテンツ幅 1024 / PC左右余白 208px
 * base -> header -> footer -> cta -> contact -> spcv の順で読み込む
 * ========================================================= */

/* ---------------------------------------------------------
 * バリアント出し分け（既定=お問い合わせ / body.is-free=無料相談）
 * ------------------------------------------------------- */
.only-free { display: none; }
.only-contact { display: initial; }

body.is-free .only-free { display: initial; }
body.is-free .only-contact { display: none; }

/* ブロック要素として出す必要があるバリアント要素 */
.contact-lead.only-free,
.contact-hero__title.only-free,
h1.only-free { display: none; }

.contact-lead.only-contact,
.contact-hero__title.only-contact,
h1.only-contact { display: block; }

body.is-free .contact-lead.only-free,
body.is-free .contact-hero__title.only-free,
body.is-free h1.only-free { display: block; }

body.is-free .contact-lead.only-contact,
body.is-free .contact-hero__title.only-contact,
body.is-free h1.only-contact { display: none; }

/* フォーム行（form-row）は flex なのでバリアント時に flex で出す */
.form-row.only-free,
.form-agree__label.only-free { display: none; }
.form-row.only-contact { display: flex; }
.form-agree__label.only-contact { display: flex; }

body.is-free .form-row.only-free { display: flex; }
body.is-free .form-agree__label.only-free { display: flex; }
body.is-free .form-row.only-contact,
body.is-free .form-agree__label.only-contact { display: none; }

/* ---------------------------------------------------------
 * ヒーローサブ（company-hero を踏襲・背景は company/hero.jpg 流用）
 * ------------------------------------------------------- */
.contact-hero {
  position: relative;
  width: 100%;
  height: 120px; /* Figma SP: 375x120 */
  overflow: hidden;
}

@media (min-width: 1025px) {
  .contact-hero { height: 250px; }
}

/* モード切替は page-contact.php が body に付ける .is-free。 */
.contact-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/contact/hero.jpg");
  background-size: cover;
  background-position: center;
}

body.is-free .contact-hero__bg {
  background-image: url("../images/contact/hero-free.jpg");
}

.contact-hero__content {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1025px) {
  .contact-hero__content { padding-inline: 0; }
}

.contact-hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px; /* Figma SP: 24 */
  line-height: 1.3;
  letter-spacing: 1.2px; /* Figma SP: 1.2 */
  color: var(--color-text-sub); /* #3F3B3A */
}

@media (min-width: 1025px) {
  .contact-hero__title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

/* ---------------------------------------------------------
 * 共通サブタイトル（company.css の .par-subtitle を自己完結で再現）
 * ------------------------------------------------------- */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.par-subtitle__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-accent);
}

@media (min-width: 1025px) {
  .par-subtitle__en { font-size: 16px; line-height: 28px; }
}

/* Figma差: enサブタイトルの太さは PC=700 / SP:Contact=700 だが SP:無料相談のみ 400。
   PCとContactは700のままにするため SP かつ is-free 限定で上書き。 */
@media (max-width: 1024px) {
  body.is-free .par-subtitle__en { font-weight: 400; }
}

.par-subtitle__jp {
  color: var(--color-navy);
}

/* ---------------------------------------------------------
 * フォームセクション
 * ------------------------------------------------------- */
.contact-form-section {
  background: var(--color-bg-white);
  padding-top: 56px;
  padding-bottom: 100px;
}

@media (min-width: 1025px) {
  .contact-form-section {
    padding-top: 80px;
    padding-bottom: 140px;
  }
}

/* リード文（見出し下の説明） */
.contact-lead {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  margin-top: 32px;
  color: var(--color-text-black);
  text-align: left;
}

@media (min-width: 1025px) {
  .contact-lead {
    padding-inline: 0;
    margin-top: 28px;
    text-align: center;
  }
  /* contact.css は base.css より前に読み込まれるため、トークン(.lg:t-text-lg=lh32)に
     勝てるよう親を足して特異度を上げる。Figma PC lead lh=28。 */
  .contact-form-section .contact-lead { line-height: 28px; }
}

/* フォーム見出し（h3）＋補足文 */
.contact-form__heading {
  margin-top: 48px;
  color: #222222; /* Figma: フォーム見出し #222222 */
  text-align: center;
}

@media (min-width: 1025px) {
  .contact-form__heading {
    margin-top: 64px;
  }
}

.contact-form__note {
  margin-top: 16px;
  padding-inline: var(--container-pad-sp);
  color: #222222; /* Figma: 補足文 #222222 */
  text-align: left;
}

@media (min-width: 1025px) {
  .contact-form__note {
    margin-top: 20px;
    padding-inline: 0;
    text-align: center;
  }
  /* トークン(.lg:t-text-md=lh28)に勝つため特異度を上げる。Figma PC note lh=24。 */
  .contact-form-section .contact-form__note { line-height: 24px; }
}

/* ---------------------------------------------------------
 * フォーム本体
 * ------------------------------------------------------- */
.contact-form {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 1025px) {
  .contact-form {
    max-width: 955px;
    padding-inline: 0;
    margin-top: 40px;
    gap: 0; /* PC は各行の margin-bottom で行間を制御（参照の行ピッチ ≈101px） */
  }
}

/* フォーム行：SP は縦積み、PC はラベル左・入力右の2カラム */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1025px) {
  .form-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 53px; /* 入力48 + 53 = 行ピッチ101px */
  }
  .form-row--textarea {
    margin-bottom: 37px; /* textarea 行の下は詰める */
  }
}

.form-row__label {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

@media (min-width: 1025px) {
  .form-row__label {
    width: 214px;
    flex-shrink: 0;
    padding-top: 9px;
  }
}

.form-row__label label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #222;
}

.form-row__badge {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #c00; /* 必須バッジ赤 */
  white-space: nowrap;
}

.form-row__field { flex: 1; min-width: 0; }

/* 入力欄共通 */
.form-row__field input[type="text"],
.form-row__field input[type="email"],
.form-select select,
.form-row__field textarea {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-black);
  background: var(--color-bg-white);
  border: 1px solid #ccc; /* フォーム枠 */
  border-radius: 0;
  padding: 0 16px;
  height: 50px;
}

@media (min-width: 1025px) {
  .form-row__field input[type="text"],
  .form-row__field input[type="email"],
  .form-select select {
    height: 48px;
  }
}

.form-row__field input::placeholder,
.form-row__field textarea::placeholder {
  color: #b3b3b3;
}

.form-row__field input:focus,
.form-select select:focus,
.form-row__field textarea:focus {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
}

/* textarea */
.form-row__field textarea {
  height: 197px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.7;
}

/* select（▼付き） */
.form-select {
  position: relative;
}

.form-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.form-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* select の未選択（プレースホルダ）表示色 */
.form-select select:invalid { color: #b3b3b3; }

/* ---------------------------------------------------------
 * 同意チェック行
 * ------------------------------------------------------- */
.form-agree {
  margin-top: 4px;
  padding-inline: var(--container-pad-sp);
  display: flex;
  justify-content: center;
}

@media (min-width: 1025px) {
  .form-agree {
    margin-top: 0; /* textarea 行の margin-bottom で間隔を確保 */
    padding-inline: 0;
  }
}

.form-agree__label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #222;
  cursor: pointer;
  max-width: 640px;
}

.form-agree__label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--color-navy);
}

.form-agree__label a {
  color: #1a5fb4; /* 同意事項リンク青 */
  text-decoration: underline;
}

.form-agree__label a:hover { color: var(--color-navy); }

/* ---------------------------------------------------------
 * 送信ボタン
 * ------------------------------------------------------- */
.form-submit {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  .form-submit {
    margin-top: 32px;
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------
 * 無料相談バリアントの余白調整（参照は お問い合わせ より広め）
 * ------------------------------------------------------- */
@media (min-width: 1025px) {
  body.is-free .contact-form { margin-top: 80px; }
  body.is-free .form-row--textarea { margin-bottom: 80px; }
  body.is-free .form-submit { margin-top: 33px; }
}

.form-submit__btn {
  width: 100%;
  max-width: 402px;
  height: 64px;
  background: #004EA2; /* 送信ボタン青 */
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  border-radius: 15px;
  transition: opacity var(--transition-base);
}

.form-submit__btn:hover { opacity: 0.9; }

/* お問い合わせページではSP固定CTAを非表示（CTA到達先なので不要） */
.spcv { display: none !important; }