@charset "UTF-8";

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea,
select{
  width: 100%;
  max-width: 100%;
  padding: 12px .8em;

  font-size: 15px;
  line-height: 1.2;

  border: solid 2px #d1d1d1;
  border-radius: 2px;
  background-color: #fafafa;
  background-clip: padding-box;
  outline: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;

  -webkit-tap-highlight-color: transparent;

  transition: 0.3s all linear;
}
textarea{
  resize: none;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder{
  color: #ccc;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus{
  outline: none;
  border: solid 2px #3e64ff;
  transition: 0.3s all linear;
}

div.form-wrap{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 40px;

  width: min(1120px,100%);
  padding: 0 16px;
  padding-bottom: 160px;

  margin-inline: auto;

  div.status{
    display: flex;
    flex-direction: column;
    align-items: center;
  
    .item{
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  
      width: 72px;
      height: 72px;
  
  
      font-size: 14px;
      color: #9B9B9B;
      border-radius: 50%;
      border: solid 1px #DEDEDE;
  
      p.number{
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
      }
    }
    .item.lighted{
      color: #fff;
      background: var(--tc);
    }
    .line{
      display: inline-block;
      width: 1px;
      height: 36px;
  
      background: #DEDEDE;
    }
  }
}
.formContent{
  width: min(800px,100%);
  margin-inline: auto;

  form{
    display: grid;
  }
  .form-itemCON{
    margin-bottom: 72px;
    
    >*+*{
      margin-block-start: 24px;
    }
  }
  .form-item{
    display: grid;
    grid-template-columns: minmax(200px,auto) 1fr;
    column-gap: 24px;
    row-gap: 8px;

    div.form-item-label-wrap{
      position:  relative; /*必須アイコン用*/
      padding-right: 3em;

      label.form-item-label,
      p.confirm-item-label{
        display: inline-block;
        padding: 13.2px 0;

        font-size: 14px;
        line-height: 1.4;
        /*最終46pxになるように調整*/
        font-weight: 700;
      }
    }
    .text{
      padding: 13.2px 0;
      white-space: pre-wrap;
    }
    @media (max-width : 599px){
      .text{
        padding: 0;
      }
    }
  }
  @media (max-width : 599px){
    .form-item{
      grid-template-columns: 1fr;
  
      div.form-item-label-wrap{
        position:  relative; /*必須アイコン用*/
        padding-right: 3em;
  
        label.form-item-label,
        p.confirm-item-label{
          padding: 0;
          
          font-size: 16px;
        }
      }
    }
  }
  .form-item:has(*:required),
  .form-item:has(*[aria-required="true"]){
    div.form-item-label-wrap::after{
      content: '必須';
      position: absolute;
      top: calc(calc(46px - calc(11px + 4px + 4px)) / 2);
      right: 0;

      display: inline-block;
      padding: 4px .8em;

      font-size: 11px;
      line-height: 1;
      font-weight: 700;
      color: #f5f4f5;

      background: #f0134d;
      border-radius: 2px;
    }
    @media (max-width : 599px){
      div.form-item-label-wrap{
        display: flex;
        align-items: center;
        gap: 24px;
      }
      div.form-item-label-wrap::after{
        position: static;
        top: auto;
        right: auto;
      }
    }
  }
  .input-wrap *:is(input,textarea):focus-visible{
    box-shadow: none;
  }
  .input-wrap:has(.wpcf7-not-valid-tip) input{
    border: 2px solid #f0134d;
  }
  .wpcf7-not-valid-tip{
    padding: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #f0134d;
  }
  .wpcf7-response-output{
    /*失敗したときのメッセージ*/
    grid-column: 1/2;
    grid-row: 3/4;

    padding: 16px !important;
    margin: 0 0 24px !important;

    text-align: center;
    font-weight: 600;

    background-color: #fff;
    border: solid 2px #f0134d !important;
    border-radius: 4px;
  }
  .form-policy-wrap{
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 16px 16px 24px;

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

    a{
      line-height: 1.4;
      color: #3a83d0;
      font-weight: 700;
      text-decoration: underline;
    }
  }
  label.link-animated{
    font-size: 20px;
    font-family: "Noto Sans JP", sans-serif;
  }
}
#submitBtn{
  display: none;
}
#previousBtn{
  display: none;
}
div.jcc:has(#previousBtn){
  gap: 80px;
}
.previousBtn-wrap{
  --aniamted-pl: 16px;
  padding-left: calc(var(--aniamted-pl) + 8px);

  label{
    position: relative;
  
    display: inline-block;
    padding-bottom: 4px;
    padding-left: 1em;
  
    font-size: 20px;
    font-weight: 500;
  
    border-bottom: solid 2px #333;
  }
  label::before,
  label::after{
    content: '';
    position: absolute;
    z-index: 2;
  
    height: 2px;
  
    background: #333;
    transition: 0.3s all linear;
  }
  label::before{
    left: 0;
    bottom: -2px;
  
    display: inline-block;
    width: var(--aniamted-pl);
  }
  label::after{
    left: calc(calc(2px * cos(-45deg)) * -1);
    bottom: calc(calc(var(--aniamted-pl) * cos(-45deg) / 2) - 2px);
  
    display: inline-block;
    width: var(--aniamted-pl);
  
    transform: rotate(-45deg);
  }
}
#complete-messeage{
  padding-top: 80px;

  p.heading{
    margin-bottom: 24px;

    font-size: 20px;
    font-weight: 700;
    text-align: center;
  }
  p.text{
    line-height: 1.6;
  }
}

.spinner-box {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
  justify-content: center;
  align-items: center;
  background-color: transparent;

  background: #333333b0;
}
.three-quarter-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #fb5b53;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin .5s linear 0s infinite;
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}
@media (min-width : 1200px){
  div.previousBtn-wrap{
    label:hover::before{
      left: calc(var(--aniamted-pl) * -1);
    
      transition: 0.3s all linear;
    }
    label:hover::after{
      left: calc(calc(calc(2px * cos(-45deg)) * -1) + calc(var(--aniamted-pl) * -1));
    
      transition: 0.3s all linear;
    }
  }
}
@media (max-width : 1200px){

}
@media (max-width : 599px){
  body:has(form[data-status="submitting"]){
    .wpcf7-spinner{
      visibility: hidden !important;
    }
    .spinner-box{
      display: flex;
    }
  }
  div.form-wrap{
    grid-template-columns: 1fr;
    row-gap: 16px;

    padding: 0 16px;
    padding-bottom: 160px;

    div.status{
      display: flex;
      flex-direction: row;
      align-items: center;
    
      .item{
        width: 72px;
        height: 72px;
    
        font-size: 14px;
      }
      .line{
        width: 24px;
        height: 1px;
      }
    }
  }
}