@charset "UTF-8";
/*--------------------------------------------
CONTACT
---------------------------------------------*/
#contactForm{
  background-repeat: no-repeat;
  background-position: center top;
  margin-top: calc( 30 * var(--remBase) );
  background-size: auto calc( 56 * var(--remBase) );
  dt label{
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    font-weight: 700;
    font-size : calc( 16 * var(--remBase ) );
    line-height : calc( 19.2 / 16 );
    span{
      font-weight: 400;
    }
    &:before{
      content:"";
      display: block;
      font-size: 0;
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  dd{
    margin-top: calc( 5 * var(--remBase) );
  }
  dd + dt{
    margin-top: calc( 15 * var(--remBase) );
  }
  :is( input[type="text"] , input[type="email"] , select , textarea  ){
    background-color: white;
    border-style: solid;
    border-color: var(--blue);
    width: 100%;
    font-weight: 700;
    font-size : calc( 16 * var(--remBase ) );
    line-height : calc( 25.6 / 16 );
    border-width: calc( 2 * var(--remBase) );
    &::placeholder{
      color:#A8A8A8;
    }
  }
  :is( input[type="text"] , input[type="email"] , select  ){
    height: calc( 56 * var(--remBase) );
  }
  .wpcf7-checkbox{
    display: block;
    label{
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
      justify-content: center;
      margin-top : calc( 12 * var(--remBase ) );
      column-gap : calc( 8 * var(--remBase ) );
      input[type="checkbox"]{
        accent-color: var(--blue);
        width: 1.5em;
        height: 1.5em;
        background-color: white;
        outline:solid calc( 2 * var(--remBase ) ) var(--blue);
        outline-offset: calc( -2 * var(--remBase ) );
      }
      span{
        font-size : calc( 16 * var(--remBase ) );
      }
    }
  }
  .submits{
    margin-top: calc( 15 * var(--remBase) );
  }
  input[type="submit"]{
    display: block;
    margin-inline: auto;
    font-weight: 700;
    font-size: 1.8rem;;
    line-height: 1.6;
    width: calc( 178 * 100% / 315 );
    height: calc( 49 * var(--remBase) );
    background-color: #FFA800;
    color:white;
    border-radius: 100vmax;
  }
  @media screen and ( width <= 750px ){
    padding-inline: calc( 10 * var(--remBase) );
    :is( input[type="text"] , input[type="email"] , select , textarea  ){
      border-radius: calc( 5 * var(--remBase) );
      padding-inline: calc( 20 * var(--remBase) );
    }
  }
  @media print,screen and ( width > 750px ){
    margin-inline: auto;
    width: calc( 375 * 100% / 750 );
    padding-inline: calc( 30 * 100% / 750 );
    .hgroup01{
      &:after{
        width: calc( 50 * 100% / 750 );
      }
    }
    :is( input[type="text"] , input[type="email"] , select , textarea  ){
      border-radius: calc( 15 * var(--remBase) );
      padding-inline: calc( 30 * 100% / 315 );
    }
  }
}