@charset "UTF-8";
#hero{
  margin-bottom: 16rem;
}
.form-wrap{
  width: min(112rem, 100%);
  padding: 10.8rem 0;
  margin-inline: auto;
  margin-bottom: 24rem;

  background: #fff;
  border-radius: 4px;
}
form{
  width: min(60rem, 100%);
  margin-inline: auto;
}
.form-itemContainer{
  width: 100%;
  margin-bottom: 8rem;
}
.form-itemContainer>*+*{
  margin-block-start: 4rem;
}
.form-item{
  display: grid;
  grid-template-columns: 1fr 35rem;
}
.form-item .title{
  position: relative;

  display: inline-block;
  padding: calc(calc(5rem - 1.6rem)/2) 0;

  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}
.form-item:has(input:required) .title::after,
.form-item:has(select:required) .title::after{
  content: '必須';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -3.6rem;

  padding: .2rem;

  font-size: 1.1rem;
  color: var(--cc);

  border: solid 1px var(--cc);
}
.form-item input[type="text"],
.form-item input[type="email"],
.form-item select,
.form-item textarea{
  width: 100%;
  padding: .8rem;

  border: solid 1px #B5B5B5;
  border-radius: 2px;
}
.form-item input[type="text"],
.form-item input[type="email"],
.form-item select{
  height: 5rem;
}
.form-item input[type="text"]::placeholder,
.form-item input[type="email"]::placeholder{
  color: #CECECE;
}
.form-confirm .form-item{
  border-bottom: solid 1px #B5B5B5;
}
.form-confirm .form-item .text{
  padding: calc(calc(5rem - 1.6rem)/2);
}

.privacy-policy{
  width: 100%;
  margin-bottom: 3.2rem;

  padding: 2em;

  line-height: 1.6;
  background: #e6e6e6;
}
#submitBtn{
  display: none;
}
#returnBtn,
form .submitLabel{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  padding: 1em 0;

  font-weight: 600;
}
#returnBtn{
  margin-right: 3.2rem;
  color: #fff;
  background: #707070;
}
form .submitLabel{
  color: var(--cc);
  border: solid 2px var(--cc);
  transition: 0.3s all linear;
}
#complete .form-wrap{
  padding: 8rem;
}
#complete .heading{
  margin-bottom: 1.6rem;
  font-size: 2.4rem;
  text-align: center;
}
@media (hover){
  form .submitLabel:hover{
    color: #fff;
    background: var(--cc);
    transition: 0.3s all linear;
  }
}
@media (max-width : 1200px){
}
@media (max-width : 599px){
  .form-itemContainer>*+*{
    margin-block-start: 1.6rem;
  }
  .form-wrap{
    width: min(112rem, 100%);
    padding: 4rem 2.4rem;
    margin-bottom: 24rem;
  }
  .form-item{
    display: grid;
    grid-template-columns: 1fr;
  }
}