/* Fstyle Site Parts：相談の枠（fstyle_parts_contact_band()・templates/contact.php）の形。新しいデザインのページ（.fsc）用（CH-1536 で子テーマの fsc-home.css から移した）。
   Cocoon のページ（.fsc-chrome）は fsc-contact-chrome.css。地・線・文字の色はテーマの --fsh-white・--fsh-line・--fsh-mute。
   ボタン（.fsc-btn）と見出し（.fsc-h2）の形・色はテーマが持つ。 */
.fsc-contact {
  padding-top: 96px;
  padding-bottom: 96px;
}

.fsc-contact__box {
  background: var(--fsh-white);
  border: 1px solid var(--fsh-line);
  border-radius: 28px;
  padding: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px;
  align-items: center;
}

.fsc-contact__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fsc-contact__title {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.35;
}

.fsc-contact__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fsc .fsc-btn--mail {
  min-height: 64px;
  padding: 10px 28px;
  font-size: 18px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.fsc-btn--mail .fsc-icon {
  flex: none;
}

.fsc-contact__note {
  font-size: 13px;
  color: var(--fsh-mute);
  text-align: center;
}

@media (max-width: 600px) {
  .fsc-contact {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .fsc .fsc-btn--mail {
    font-size: 16px;
    padding: 10px 20px;
  }
}
