@charset "UTF-8";
/*--------------------------------------------
CONTACT
---------------------------------------------*/
#contactBody{
  background-color: var(--ivory);
  font-weight: 400;
  form{
    background-color: white;
  }
  :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
    background-color: white;
    outline : solid 1px #C9CECC;
    outline-offset : -1px;
    width: 100%;
    &::placeholder{
      color:#A4AAA8;
    }
  }
  dt{
    label{
      font-weight: 700;
      display: grid;
      align-items: center;
      justify-content: start;
      grid-auto-flow: column;
      width: 100%;
      &:after{
        display: block;
        text-align: center;
        align-content: center;
        font-weight: 600;
      }
    }
  }
  dl > div:has( [aria-required="true"] , .wpcf7-acceptance ){
    dt{
      label{
        &:after{
          content:"必須";
          color:white;
          background-color: #F04E3E;
        }
      }
    }
  }
  dl > div:not(:has( [aria-required="true"] , .wpcf7-acceptance )){
    dt{
      label{
        &:after{
          content:"任意";
          color:#49504D;
          background-color: #E2E3E2;
          display: block;
          text-align: center;
          align-content: center;
        }
      }
    }
  }
  dd{
    > p{
      color:#6C7370;
    }
  }
  .addresses{
    display: grid;
    align-items: center;
    > span{
      &:nth-of-type(1){
        grid-column: 1;
        grid-row: 1;
      }
      &:nth-of-type(2){
        grid-column: 3;
        grid-row: 1;
      }
    }
    button{
      grid-column: 5;
      grid-row: 1;
      display: block;
      text-align: center;
      align-content: center;
      background-image: linear-gradient(  to right bottom , #2B8068 , #0D5A45  );
      color:white;
      font-weight: 700;
      text-box: trim-both cap alphabetic;
    }
    > span{
      &:nth-of-type(3){
        grid-column: 1/-1;
        grid-row: 2;
      }
    }
    .sub{
      grid-column: 1/-1;
      grid-row: 3;
    }
  }
  .codedropz-upload-wrapper{
    position: relative;
  }
  .codedropz-upload-handler{
    border: 0;
    outline : dashed 1px #BAC1BE;
    outline-offset : -1px;
    margin-bottom: 0;
  }
  .codedropz-upload-container{
    padding-inline : 0;
    padding-bottom: 0;
    &:before{
      content:"";
      display: block;
      position: absolute;
      font-size: 0;
      background : url( "../images/ui/icon/cloud.svg" ) center / contain no-repeat;
      aspect-ratio: 1;
      width: auto;
      filter: invert(62%) sepia(7%) saturate(245%) hue-rotate(101deg) brightness(91%) contrast(93%);
      left: 50%;
      translate: -50% 0;
    }
    h2 + span{
      display: block;
      text-align: center;
      color:#49514E;
    }
    .codedropz-btn-wrap{
      text-align: center;
      color:#49514E;
    }
  }
  .dnd-progress-bar{
    span{
      text-align: center;
    }
  }
  .cd-upload-btn{
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-flow: row;
    align-items: end;
  }
  #contactSample{
    h2{
      text-align: center;
    }
    ul{
      display: grid;
      justify-content: space-between;
      grid-auto-flow: column;
    }
    p{
      text-align: center;
      font-weight: 600;
    }
  }
  .acceptances{
    > span{
      display: block;
    }
  }
  .wpcf7-acceptance{
    .wpcf7-list-item{
      display: block;
      margin-left: 0;
    }
    label{
      display: grid;
      align-items: center;
      justify-content: start;
      grid-auto-flow: column;
    }
    input[type="checkbox"]{
      accent-color: var(--darkGreen);
      aspect-ratio: 1;
      width: auto;
    }
    .wpcf7-list-item-label{
      a{
        color:var(--darkGreen);
        text-decoration: underline;
      }
    }
  }
  .wpcf7-turnstile{
    display: block;
    margin-inline : auto;
  }
  button[type="submit"]{
    border-radius: 100vmax;
    background-color: var(--darkGreen);
    color:white;
    font-weight: 700;
    display: block;
    align-content: center;
    text-align: center;
    text-box: trim-both cap alphabetic;
    margin-inline : auto;
    position: relative;
    &:after{
      content:"";
      display: block;
      font-size: 0;
      background : url( "../images/ui/arrow/right03.svg" ) center / contain no-repeat;
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      filter: var(--filterWhite);
      width: auto;
      aspect-ratio: 1;
    }
  }
  form > p{
    text-align: center;
    color:#666;
  }
  .wpcf7-not-valid-tip{
    color:#F04E3E;
    font-weight: 500;
  }
  @media screen and ( width <= 768px ){
    form{
      padding-top : calc( 24 * var(--remBase ) );
      padding-bottom : calc( 48 * var(--remBase ) );
      padding-inline : calc( 16 * var(--viewportBase ) );
    }
    dl{
      > div + div{
        margin-top : calc( 24 * var(--remBase ) );
      }
    }
    dt{
      label{
        column-gap : calc( 16 * var(--contentBase) );
        font-size : calc( 18 * var(--remBase ) );
        justify-content: space-between;
        &:after{
          border-radius : calc( 4 * var(--remBase ) );
          height : calc( 24 * var(--remBase ) );
          font-size : calc( 14 * var(--remBase ) );
          padding-inline : calc( 12 * var(--remBase ) );
        }
      }
    }
    dd{
      margin-top : calc( 16 * var(--remBase ) );
    }
    :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
      height : calc( 44 * var(--remBase ) );
      border-radius : calc( 4 * var(--remBase ) );
      padding-inline : calc( 12 * var(--remBase ) );
      font-size: calc( 16 * var(--remBase ) );;
      line-height: 1.5;
    }
    .sub{
      font-size: calc( 12 * var(--remBase ) );;
      line-height: calc( 20 / 12 );;
      margin-top : calc( 8 * var(--remBase ) );
    }
    .addresses{
      grid-template-columns: auto calc( 12 * var(--contentBase) ) calc( 120 * var(--contentBase) ) calc( 12 * var(--contentBase) ) calc( 140 * var(--contentBase) ) 1fr;
      button{
        height : calc( 44 * var(--remBase ) );
        font-size : calc( 14 * var(--remBase ) );
        border-radius : calc( 4 * var(--remBase ) );
      }
      > span{
        &:nth-of-type(3){
          margin-top : calc( 8 * var(--remBase ) );
        }
      }
    }
    .codedropz-upload-container{
      &:before{
        height : calc( 48 * var(--remBase ) );
        top : calc( 24 * var(--remBase ) );
      }
    }
    .codedropz-upload-handler{
      height : calc( 160 * var(--remBase ) );
      h2{
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.5;
      }
    }
    .codedropz-upload-container{
      padding-top : calc( 64 * var(--remBase ) );
      h2 + span{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
      }
      .codedropz-btn-wrap{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
      }
    }
    .dnd-upload-details{
      .name{
        padding-right : calc( 24 * var(--remBase ) );
      }
      .name > span{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
      }
      em{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
        flex-shrink: 0;
      }
      .has-error{
        font-size: calc( 12 * var(--remBase ) );;
        line-height: calc( 16 / 12 );;
      }
    }
    .cd-upload-btn{
      padding-bottom : calc( 20 * var(--remBase ) );
    }
    #contactSample{
      margin-top : calc( 12 * var(--remBase ) );
      h2{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
      }
      ul{
        margin-top : calc( 8 * var(--remBase ) );
      }
      img{
        height : calc( 86 * var(--remBase ) );
      }
      p{
        margin-top : calc( 2 * var(--remBase ) );
        font-size: calc( 12 * var(--remBase ) );;
        line-height: 1.5;
      }
    }
    textarea{
      padding-block : calc( 12 * var(--remBase ) );
      height : calc( 120 * var(--remBase ) );
    }
    .acceptances{
      > span{
        display: block;
        + span{
          margin-top : calc( 12 * var(--remBase ) );
        }
      }
      label{
        column-gap : calc( 12 * var(--remBase ) );
      }
      input[type="checkbox"]{
        height : calc( 28 * var(--remBase ) );
      }
      .wpcf7-list-item-label{
        font-size: calc( 16 * var(--remBase ) );;
        line-height: 1.5;
      }
    }
    .wpcf7-turnstile{
      margin-top : calc( 16 * var(--remBase ) );
      width : calc( 300 * var(--contentBase) );
    }
    button[type="submit"]{
      width : 100%;
      height : calc( 56 * var(--remBase ) );
      font-size : calc( 18 * var(--remBase ) );
      margin-top : calc( 40 * var(--remBase ) );
      &:after{
        height : calc( 20 * var(--remBase ) );
        right : calc( 24 * var(--contentBase) );
      }
    }
    form > p{
      font-size: calc( 12 * var(--remBase ) );;
      line-height: 1.5;
      margin-top : calc( 8 * var(--remBase ) );
    }
    .wpcf7-not-valid-tip{
      font-size: calc( 14 * var(--remBase ) );;
      line-height: calc( 24 / 14 );;
    }
  }
  @media print,screen and ( width > 768px ){
    padding-top : calc( 32 * var(--remBase ) );
    padding-bottom : calc( 40 * var(--remBase ) );
    form{
      border-radius : calc( 18 * var(--remBase ) );
      padding-inline : calc( 27 * var(--contentBase ) );
      padding-top : calc( 28 * var(--remBase ) );
      padding-bottom : calc( 20 * var(--remBase ) );
      box-shadow: 0 calc( 5 * var(--remBase) ) calc( 25 * var(--remBase) ) color-mix( in srgb , black 4% , transparent );
    }
    dl{
      > div{
        display: grid;
        align-items: start;
        grid-template-columns: calc( 230 * 100% / 946 ) calc( 716 * 100% / 946 );
        + div{
          margin-top : calc( 22 * var(--remBase ) );
        }
      }
    }
    dt{
      padding-top : calc( 9.5 * var(--remBase ) );
      label{
        column-gap : calc( 13 * 100% / 230 );
        font-size : calc( 17 * var(--remBase ) );
        &:after{
          border-radius : calc( 4 * var(--remBase ) );
          height : calc( 25 * var(--remBase ) );
          font-size : calc( 12 * var(--remBase ) );
          padding-inline : calc( 8 * var(--remBase ) );
        }
      }
    }
    :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
      height : calc( 44 * var(--remBase ) );
      border-radius : calc( 5 * var(--remBase ) );
      padding-inline : calc( 14 * var(--remBase ) );
      font-size: calc( 15 * var(--remBase ) );;
      line-height: calc( 22 / 15 );;
    }
    .sub{
      font-size: calc( 13 * var(--remBase ) );;
      line-height: calc( 20 / 13 );;
      margin-top : calc( 10 * var(--remBase ) );
    }
    .addresses{
      grid-template-columns: auto calc( 12 * 100% / 716 ) calc( 152 * 100% / 716 ) calc( 12 * 100% / 716 ) calc( 132 * 100% / 716 ) 1fr;
      button{
        height : calc( 44 * var(--remBase ) );
        font-size : calc( 14 * var(--remBase ) );
        border-radius : calc( 5 * var(--remBase ) );
      }
      > span{
        &:nth-of-type(3){
          margin-top : calc( 10 * var(--remBase ) );
        }
      }
    }
    .codedropz-upload-container{
      &:before{
        height : calc( 48 * var(--remBase ) );
        top : calc( 22 * var(--remBase ) );
      }
    }
    .codedropz-upload-handler{
      height : calc( 156 * var(--remBase ) );
      h2{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: 1.5;
      }
    }
    .codedropz-upload-container{
      padding-top : calc( 75 * var(--remBase ) );
      h2 + span{
        font-size: calc( 12 * var(--remBase ) );;
        line-height: 1.5;
      }
      .codedropz-btn-wrap{
        font-size: calc( 12 * var(--remBase ) );;
        line-height: 1.5;
      }
    }
    .dnd-upload-details{
      .name{
        padding-right : calc( 24 * var(--remBase ) );
      }
      .name > span{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
      }
      em{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
        flex-shrink: 0;
      }
      .has-error{
        font-size: calc( 14 * var(--remBase ) );;
        line-height: calc( 20 / 14 );;
      }
    }
    .cd-upload-btn{
      padding-bottom : calc( 20 * var(--remBase ) );
    }
    #contactSample{
      width : calc( 364 * 100% / 716 );
      margin-top : calc( 12 * var(--remBase ) );
      margin-inline : auto;
      h2{
        font-size: calc( 12 * var(--remBase ) );;
        line-height: 1.5;
      }
      ul{
        margin-top : calc( 10 * var(--remBase ) );
      }
      img{
        height : calc( 86 * var(--remBase ) );
      }
      p{
        margin-top : calc( 6 * var(--remBase ) );
        font-size: calc( 12 * var(--remBase ) );;
        line-height: 1.5;
      }
    }
    textarea{
      padding-block : calc( 11 * var(--remBase ) );
      height : calc( 88 * var(--remBase ) );
    }
    .acceptances{
      > span{
        display: block;
        + span{
          margin-top : calc( 10 * var(--remBase ) );
        }
      }
      label{
        column-gap : calc( 10 * var(--remBase ) );
      }
      input[type="checkbox"]{
        height : calc( 22 * var(--remBase ) );
      }
      .wpcf7-list-item-label{
        font-size: calc( 15 * var(--remBase ) );;
        line-height: calc( 22 / 15 );;
      }
    }
    .wpcf7-turnstile{
      margin-top : calc( 12 * var(--remBase ) );
      width : calc( 350 * 100% / 946 );
    }
    button[type="submit"]{
      width : calc( 550 * 100% / 946 );
      height : calc( 58 * var(--remBase ) );
      font-size : calc( 20 * var(--remBase ) );
      margin-top : calc( 22 * var(--remBase ) );
      &:after{
        height : calc( 25 * var(--remBase ) );
        right : calc( 42 * 100% / 550 );
      }
    }
    form > p{
      font-size: calc( 13 * var(--remBase ) );;
      line-height: calc( 20 / 13 );;
      margin-top : calc( 20 * var(--remBase ) );
    }
    .wpcf7-not-valid-tip{
      font-size: calc( 15 * var(--remBase ) );;
      line-height: 1.6;
    }
  }
}