@charset "UTF-8";

/* =============================================================================

Contact CSS

・お問い合わせページ用CSS「.contact-×××」

上記はここに記述する

============================================================================= */
:root{
  --cc-recruit-black:#000;
  
}

body:not(.is-global_menu-open) {
  .g-header {
    &::before {
      background-color:#d2ff37;
    }
    .logo > a {
      &::before {
        background-color:#000;
      }
    }
    .header-menu {
      .link {
        &.translate {
          background-color:var(--cc-white-A);
          img {
            opacity:0;
          }
          &::after {
            opacity:1;
          }
        }
      }
      .separator {
        background-color: var(--cc-black-A);
      }
    }
    .g-header_menu-btn {
      background-color: var(--cc-white-A);

      &::before,
      &::after {
        background-color: var(--cc-black-A);
      }
    }
  }
}
.contact-form {
  padding-block:15.0rem 18.0rem;

  @media (width > 640px) {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:6.4rem;
    align-items: flex-start;
  }
  @media (width <= 640px) {
    padding:6.6rem 3.3rem 18.0rem;
  }

  .title {
    @media (width <= 640px) {
      margin-bottom:3.2rem;
    }

  }
  > .form_inner {
    background-color:#fff;
    @media (width > 640px) {
      padding:9.0rem 11.6rem 13.2rem;
    }
    @media (width <= 640px) {
      padding:5.0rem 2.0rem 7.2rem;
    }
  }

  .fp_block_wrap{
    @media (width <= 640px) {
      gap: 2.4rem;
    }
  }
}




/* Sample
============================================================================= */
.contact-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}

.p-bg-white-B{
  --base-color:var(--cc-recruit-black);
}

/* input parts
============================================================================= */
/* input[type="text"] and textarea */
:is(.fp-text01,.fp-tel01,.fp-number01,.fp-email01,.fp-textarea01,.fp-select01 > select) {

	border-color: var(--cc-recruit-black);

  &.is-error {
    background-color:var(--fp-error-bg);
  }
  &::placeholder {
    color:var(--cc-recruit-black);
  }
}
.fp-select01 {
  &::before {
    background-color: var(--cc-recruit-black);
  }
}
.fp-submit-button{
  color: #fff;
  background: var(--cc-recruit-black);
}
.p-bg-green-A{
  --base-bg: #D2FF37;
}

.fp-contents01 p a{
  text-decoration: underline;
}
.fp-upload01{
  @media (width <= 640px) {
    .status{
      margin-top: 1rem;
      text-align: left;
    }
    .top label {
      margin-top: 0;
    }
  }
}
.fp-checkbox01_wrap{
  @media (width <= 640px) {
    margin-inline: 0;
    margin-bottom: .5rem;
  }
}
.fp-checkbox01{
  @media (width <= 640px) {
    span{
      font-size: 1.3rem;
    }
  }
}