/* =========================================================
   CONTACT
========================================================= */

.contact-page {
  width: 100%;
  overflow: hidden;

  background: #EFEAEA;
  color: #514c49;
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
  width: 100%;

  padding:
    clamp(180px, 18vw, 270px)
    6%
    100px;
}


.contact-hero__inner {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;
}


.contact-hero__label {
  margin: 0 0 25px;

  color: #4f4a48;

  font-family: var(--font-en);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;

  letter-spacing: .12em;
}


.contact-hero__title {
  margin: 0;

  color: #5e5855;

  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: .2em;
}


.contact-hero__lead {
  margin: 55px 0 0;

  color: #77706d;

  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 400;
  line-height: 2.2;

  letter-spacing: .08em;
}


/* =========================================================
   FORM SECTION
========================================================= */

.contact-form {
  width: 100%;

  padding: 0 6% 150px;
}


.contact-form__inner {
  display: grid;

  grid-template-columns:
    minmax(280px, .75fr)
    minmax(500px, 1.25fr);

  gap: clamp(70px, 9vw, 140px);

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.contact-form__intro {
  padding-top: 15px;
}


.contact-form__intro-en {
  margin: 0 0 25px;

  color: #9a9390;

  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 400;

  line-height: 1;

  letter-spacing: .22em;
}


.contact-form__intro-title {
  margin: 0;

  color: #514c49;

  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 400;

  line-height: 1.9;

  letter-spacing: .1em;
}


.contact-form__intro-text {
  margin: 35px 0 0;

  color: #77706d;

  font-family: var(--font-ja);
  font-size: 11.5px;
  font-weight: 400;

  line-height: 2.1;

  letter-spacing: .06em;
}


.contact-form__reservation-note {
  margin: 35px 0 0;

  padding-top: 25px;

  border-top: 1px solid rgba(75, 70, 68, .15);

  color: #938c89;

  font-family: var(--font-ja);
  font-size: 10px;
  font-weight: 400;

  line-height: 2;

  letter-spacing: .05em;
}


/* =========================================================
   FLUENT FORMS
========================================================= */

.contact-form__body {
  width: 100%;

  padding: 55px 60px 60px;

  background: rgba(255, 255, 255, .72);
}


/* Fluent Forms default margins */

.contact-form__body .fluentform {
  margin: 0;
}


.contact-form__body .ff-el-group {
  margin-bottom: 35px;
}


/* LABEL */

.contact-form__body .ff-el-input--label {
  margin-bottom: 11px;
}


.contact-form__body .ff-el-input--label label {
  color: #595451 !important;

  font-family: var(--font-ja) !important;
  font-size: 11px !important;
  font-weight: 400 !important;

  line-height: 1.7 !important;

  letter-spacing: .08em !important;
}


/* =========================================================
   INPUT
========================================================= */

.contact-form__body
.ff-el-form-control {
  width: 100% !important;

  min-height: 50px;

  padding: 12px 0 !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(75, 70, 68, .28) !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: #4f4a48 !important;

  font-family: var(--font-ja) !important;
  font-size: 13px !important;

  transition:
    border-color .4s ease,
    background-color .4s ease !important;
}


.contact-form__body
.ff-el-form-control:focus {
  border-bottom-color: #514c49 !important;

  outline: none !important;

  box-shadow: none !important;
}


/* PLACEHOLDER */

.contact-form__body
.ff-el-form-control::placeholder {
  color: #b6afac;

  opacity: 1;
}


/* =========================================================
   TEXTAREA
========================================================= */

.contact-form__body textarea.ff-el-form-control {
  min-height: 150px;

  padding: 15px !important;

  border: 1px solid rgba(75, 70, 68, .22) !important;

  resize: vertical;
}


.contact-form__body
textarea.ff-el-form-control:focus {
  border-color: #68615e !important;
}


/* =========================================================
   CHECKBOX
========================================================= */

.contact-form__body .ff-el-form-check {
  font-family: var(--font-ja);

  font-size: 10.5px;

  line-height: 1.8;

  letter-spacing: .04em;

  color: #746e6b;
}


.contact-form__body
input[type="checkbox"] {
  accent-color: #55514f;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-form__body
.ff-btn-submit {
  display: flex !important;

  align-items: center;
  justify-content: center;

  width: 100% !important;

  min-height: 70px;

  margin-top: 15px !important;

  padding: 20px 30px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #55514f !important;

  color: #fff !important;

  font-family: var(--font-ja) !important;

  font-size: 12px !important;
  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: .18em !important;

  cursor: pointer;

  transition:
    background-color .5s ease,
    transform .6s cubic-bezier(.22, 1, .36, 1),
    opacity .5s ease !important;
}


@media (hover: hover) {

  .contact-form__body
  .ff-btn-submit:hover {
    background: #403c3a !important;

    transform: translateY(-3px);
  }

}


/* =========================================================
   ERROR / SUCCESS
========================================================= */

.contact-form__body
.text-danger {
  margin-top: 7px;

  color: #9b6966 !important;

  font-family: var(--font-ja);

  font-size: 9.5px;

  letter-spacing: .04em;
}


.contact-form__body
.ff-message-success {
  padding: 30px !important;

  border: 0 !important;

  background: #f7f4f2 !important;

  box-shadow: none !important;

  color: #55514f !important;

  font-family: var(--font-ja);

  font-size: 12px;

  line-height: 2;

  letter-spacing: .06em;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

  .contact-hero {
    padding:
      180px 6%
      90px;
  }


  .contact-form__inner {
    grid-template-columns:
      minmax(230px, .7fr)
      minmax(420px, 1.3fr);

    gap: 55px;
  }


  .contact-form__body {
    padding: 45px 42px 50px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 767px) {

.contact-hero {
  padding:
    230px 22px
    70px;
}

  .contact-hero__inner {
    max-width: 390px;
  }


  .contact-hero__label {
    margin-bottom: 20px;

    font-size: 40px;
  }


  .contact-hero__title {
    font-size: 11px;
  }


  .contact-hero__lead {
    margin-top: 38px;

    font-size: 11px;
  }


  .contact-form {
    padding:
      0 18px
      95px;
  }


  .contact-form__inner {
    display: block;

    max-width: 500px;
  }


  .contact-form__intro {
    margin-bottom: 50px;

    padding: 0 5px;
  }


  .contact-form__intro-title {
    font-size: 17px;
  }


  .contact-form__intro-text {
    margin-top: 28px;

    font-size: 11px;
  }


  .contact-form__reservation-note {
    margin-top: 28px;

    font-size: 9.5px;
  }


  .pc-only {
    display: none;
  }


  /* FORM */

  .contact-form__body {
    padding:
      42px 25px
      45px;
  }


  .contact-form__body
  .ff-el-group {
    margin-bottom: 30px;
  }


  .contact-form__body
  .ff-el-form-control {
    font-size: 12px !important;
  }


  .contact-form__body
  textarea.ff-el-form-control {
    min-height: 135px;
  }


  .contact-form__body
  .ff-btn-submit {
    min-height: 62px;

    font-size: 11px !important;
  }

}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media (max-width: 420px) {

.contact-hero {
  padding:
    220px 18px
    65px;
}

  .contact-hero__label {
    font-size: 36px;
  }


  .contact-form {
    padding:
      0 15px
      85px;
  }


  .contact-form__body {
    padding:
      38px 20px
      40px;
  }

}