@charset "UTF-8";
.sidebar-layout{
  display: grid;
  grid-template-columns: auto 1fr;
  padding-top: 80px;
  margin-bottom: 144px;
  container-type: inline-size;

  div.sidebar{
    width: calc(50cqw - 560px);
    min-width: 280px;
    padding-top: 160px;
    padding-left: 72px;

    div.sticky{
      position: sticky;
      position: -webkit-sticky;
      top: 300px;

      ul.stickyLinks{
        font-size: 18px;
        font-family: 'LINE Seed JP_OTF Bold';
        color: var(--tc);
        >*+*{
          margin-block-start: 18px;
        }
        li a{
          display: inline-flex;
          gap: 8px;
          color: #bbb;
          transition: 0.3s all linear;
        }
        li a.active{
          color: var(--tc);
          transition: 0.3s all linear;
        }
        li a:not(.active){
          svg path{
            fill: #bbb;
          }
        }
      }
    }
  }
}
div.contents{
  >*+*{
    margin-block-start: 104px;
  }
  section{
    width: min(1120px,100%);

    h3{
      margin-bottom: 16px;

      font-size: 28px;
      color: #1359E8;
      font-family: 'LINE Seed JP_OTF Bold';
    }
    >.text{
      margin-bottom: 40px;

      line-height: 1.6;
    }
  }
}
div.status{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;

  .item{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;


    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    background: #B5B5B5;

    p.number{
      font-size: 24px;
      font-family: 'LINE Seed JP_OTF Bold';
    }
  }
  .item.lighted{
    color: #fff;
    background: var(--tc);
  }
  .arrow{
    color: #B5B5B5;
  }
  .arrow.lighted{
    font-size: 16pxs;
    color: var(--tc);
  }
}
#confirm{
  .formContent,.status{
    width: min(1120px,100%);
    margin-inline: auto;
  }
  .formContent{
    background: transparent!important;
  }
}
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;
}

.formContent{
  padding: 56px 16px 72px;

  background: #fff;

  form{
    display: grid;
    width: min(800px,100%);
    margin-inline: auto;
  }
  .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;
    }
  }
  .btn{
    width: 180px;
    min-width: 180px;
    background: #1359E8;
  }
  .btn-color-grey{
    color: #fff;
    background: #939393;
    transition: 0.3s all linear;
  }
  .btn-color-grey:hover{
    color: #fff;
    background: #707070;
  }
  @media (max-width : 599px){
    .form-item{
      grid-template-columns: 1fr;
  
      div.form-item-label-wrap{
        position:  relative; /*必須アイコン用*/
        padding-right: 3em;
  
        label.form-item-label{
          padding: 0;
        }
      }
    }
  }
  .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;
    }
  }
}
#submitBtn{
  display: none;
}
#previousBtn{
  display: none;
}
#complete .form-wrap{
  width: min(1120px,100%);
  margin-inline: auto;

  #complete-message{
    width: min(720px,100%);
    margin-inline: auto;

    p.heading{
      margin-bottom: 24px;

      font-size: 30px;
      text-align: center;
      font-family: 'LINE Seed JP_OTF Bold';
      color: var(--tc);
    }
    .text{
      width: min(800px,100%);
      margin-inline: auto;
      line-height: 2;
    }
  }
}
.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){
}
@media (max-width : 1200px){
  .sidebar-layout{
    display: block;
    padding: 0 16px;
    padding-bottom: 96px;
    margin-bottom: 0;
  
    div.sidebar{
      display: none;
    }
  }
}
@media (max-width : 599px){
  body:has(form[data-status="submitting"]){
    .wpcf7-spinner{
      visibility: hidden !important;
    }
    .spinner-box{
      display: flex;
    }
  }
  .sidebar-layout{
    padding: 0;
    padding-bottom: 19.2dvw;
  }
  div.status{
    gap: 1.6dvw;
    padding: 0 3.2dvw;
    margin-bottom: 4.8dvw;
  
    .item{
  
      width: 14.4dvw;
      height: 14.4dvw;
  
  
      font-size: 2.8dvw;
  
      p.number{
        font-size: 4.8dvw;
      }
    }
    .item.lighted{
      color: #fff;
      background: var(--tc);
    }
    .arrow{
      color: #B5B5B5;
    }
    .arrow.lighted{
      font-size: 16pxs;
      color: var(--tc);
    }
  }
  div.contents{
    >*+*{
      margin-block-start: 16dvw;
    }
    section{
      h3{
        padding: 0 3.2dvw;
        margin-bottom: 3.2dvw;
  
        font-size: 4.2dvw;
      }
      >.text{
        padding: 0 3.2dvw;
        margin-bottom: 8dvw;
      }
    }
  }
}