/* ========================================
   お問い合わせページ：メインコンテンツ上下の余白を削除
======================================== */

[data-vertical-spacing*="top"] {
  padding-top: 0 !important;
}

[data-vertical-spacing*="bottom"] {
  padding-bottom: 0 !important;
}

/* ========================================
   Contact Form
======================================== */

.ark-contact-form {
  --contact-green: #304b3b;
  --contact-green-soft: #687a6d;
  --contact-text: #4f5851;
  --contact-line: rgba(48, 75, 59, 0.22);
  --contact-bg: #f3f3ed;

  width: calc(100% - 48px) !important;
  max-width: 900px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-top: 80px !important;
  padding-bottom: 110px !important;
}


/* ========================================
   各入力項目
======================================== */

.ark-contact-form .fluentform .ff-el-group {
  margin-bottom: 30px !important;
}


/* ラベル */

.ark-contact-form .fluentform .ff-el-input--label {
  margin-bottom: 10px !important;
}

.ark-contact-form .fluentform .ff-el-input--label label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.025em;

  color: var(--contact-green) !important;
}


/* ========================================
   Input / Select / Textarea
======================================== */

.ark-contact-form .fluentform input[type="text"],
.ark-contact-form .fluentform input[type="email"],
.ark-contact-form .fluentform select,
.ark-contact-form .fluentform textarea {
  width: 100% !important;

  min-height: 54px !important;

  padding: 13px 16px !important;

  border: 1px solid var(--contact-line) !important;
  border-radius: 2px !important;

  background: #ffffff !important;

  color: var(--contact-text) !important;

  font-size: 15px !important;
  line-height: 1.6 !important;

  box-shadow: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}


/* placeholder */

.ark-contact-form .fluentform input::placeholder,
.ark-contact-form .fluentform textarea::placeholder {
  color: #8a958e !important;
  opacity: 1;
}


/* focus */

.ark-contact-form .fluentform input[type="text"]:focus,
.ark-contact-form .fluentform input[type="email"]:focus,
.ark-contact-form .fluentform select:focus,
.ark-contact-form .fluentform textarea:focus {
  border-color: var(--contact-green) !important;

  box-shadow:
    0 0 0 2px rgba(48, 75, 59, 0.08) !important;

  outline: none !important;
}


/* textarea */

.ark-contact-form .fluentform textarea {
  min-height: 200px !important;

  resize: vertical;
}


/* ========================================
   プライバシーポリシー
======================================== */

.ark-contact-form .fluentform .ff_t_c {
  margin-top: 4px;
}

.ark-contact-form .fluentform .ff_t_c label,
.ark-contact-form .fluentform .ff-el-form-check-label {
  font-size: 14px !important;
  line-height: 1.8 !important;

  color: var(--contact-text) !important;
}

.ark-contact-form .fluentform .ff_t_c a {
  color: var(--contact-green) !important;

  text-decoration: underline;
  text-underline-offset: 3px;
}

.ark-contact-form .fluentform input[type="checkbox"] {
  width: 17px;
  height: 17px;

  accent-color: var(--contact-green);
}


/* ========================================
   送信ボタン
======================================== */

.ark-contact-form .fluentform .ff-btn-submit {
  min-width: 220px !important;
  min-height: 58px !important;

  margin-top: 14px !important;

  padding: 15px 30px !important;

  border: 1px solid var(--contact-green) !important;
  border-radius: 0 !important;

  background: var(--contact-green) !important;

  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em;

  box-shadow: none !important;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease !important;
}


@media (hover: hover) {

  .ark-contact-form .fluentform .ff-btn-submit:hover {
    background: #ffffff !important;
    color: var(--contact-green) !important;
  }

}


/* ========================================
   送信完了メッセージ
======================================== */

.ark-contact-form .fluentform .ff-message-success {
  padding: 24px 28px !important;

  border: 1px solid rgba(48, 75, 59, 0.24) !important;

  background: var(--contact-bg) !important;

  color: var(--contact-green) !important;

  font-size: 15px;
  line-height: 1.9;
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  .ark-contact-form {
    width: calc(100% - 48px) !important;

    padding: 54px 0 80px;
  }

  .ark-contact-form .fluentform .ff-el-group {
    margin-bottom: 24px !important;
  }

  .ark-contact-form .fluentform input[type="text"],
  .ark-contact-form .fluentform input[type="email"],
  .ark-contact-form .fluentform select,
  .ark-contact-form .fluentform textarea {
    font-size: 16px !important;
  }

  .ark-contact-form .fluentform textarea {
    min-height: 180px !important;
  }

  .ark-contact-form .fluentform .ff-btn-submit {
    width: 100% !important;
    min-width: 0 !important;
  }

}

/* ========================================
   Contact
   Hero
======================================== */

.ark-contact-hero {
  --contact-green: #304b3b;
  --contact-green-soft: #687a6d;
  --contact-bg: #f3f3ed;

  width: 100vw;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 118px 24px 100px;

  background: var(--contact-bg);
}


.ark-contact-hero-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}


.ark-contact-hero-eyebrow {
  margin: 0 0 20px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.18em;

  color: var(--contact-green-soft);
}


.ark-contact-hero-title {
  margin: 0;

  font-size: clamp(42px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.35;

  letter-spacing: 0.03em;

  color: var(--contact-green);
}


.ark-contact-hero-lead {
  margin: 38px 0 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 2;

  letter-spacing: 0.03em;

  color: #586159;
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  .ark-contact-hero {
    padding: 78px 24px 72px;
  }

  .ark-contact-hero-eyebrow {
    margin-bottom: 16px;

    font-size: 10px;
  }

  .ark-contact-hero-title {
    font-size: 38px;
  }

  .ark-contact-hero-lead {
    margin-top: 28px;

    font-size: 14px;
    line-height: 1.9;
  }

  .ark-contact-pc {
    display: none;
  }

}