@charset "utf-8";
/* CSS Document */

.skr_form{padding: 140px 16px 160px;}
.skr_txt01{
  margin-bottom: 88px;
  letter-spacing: 0.01em;
  text-align: center;
  color: #383935;
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_txt01.active{opacity: 1;}
.skr_formwrap{
  max-width: 1142px;
  margin: auto;
  padding: 124px 0 72px;
  background-color: #FFFFFF;
  box-shadow: 0px 22px 32px rgba(0, 0, 0, 0.06);
}
.skr_formwrap dl{
  max-width: 728px;
  margin: 0 auto 112px;
}
.skr_formwrap dl dt{
  margin-bottom: 18px;
  letter-spacing: 0.01em;
  font-size: 1.125rem;
  font-weight: bold;
  color: #383935;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_require{
  font-size: 0.875rem;
  color: #E080A4;
}
.skr_formwrap dl dd{
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_formwrap dl dt:nth-of-type(2),
.skr_formwrap dl dd:nth-of-type(2){transition-delay: 0.1s}
.skr_formwrap dl dt:nth-of-type(3),
.skr_formwrap dl dd:nth-of-type(3){transition-delay: 0.2s}
.skr_formwrap dl dt:nth-of-type(4),
.skr_formwrap dl dd:nth-of-type(4){transition-delay: 0.3s}
.skr_formwrap dl dt:nth-of-type(5),
.skr_formwrap dl dd:nth-of-type(5){transition-delay: 0.4s}
.skr_formwrap dl dt:nth-of-type(6),
.skr_formwrap dl dd:nth-of-type(6){transition-delay: 0.5s}
.skr_formwrap.active dl dt,
.skr_formwrap.active dl dd{
  transform: translate(0);
  opacity: 1;
}

.skr_formwrap dl dd:nth-last-of-type(n+2){margin-bottom: 52px;}
.skr_formwrap dl dd input{
  width: 100%;
  max-width: 744px;
  height: 84px;
  padding: 28px 0 28px 24px;
  font-size: 1.125rem;
  border: 1px solid transparent;
  background-color: #F5F5F7;
}
.skr_formwrap dl dd input:focus{border: 1px solid #E080A4;}
.skr_formwrap dl dd textarea{
  width: 100%;
  max-width: 744px;
  min-height: 384px;
  padding: 8px;
  font-size: 1.125rem;
  border: 1px solid transparent;
  background-color: #F5F5F7;
}
.skr_error{
  display: none;
  margin-top: 4px;
  font-size: 0.875rem;
  color: #F16885;
}


.skr_txt02{
  margin-bottom: 46px;
  text-align: center;
  letter-spacing: 0.01em;
  color: #383935;
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_txt02.active{opacity: 1;}
.skr_txt02 a{color: #E080A4;}


.skr_button{
  text-align: center;
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_button.active{opacity: 1;}
.skr_button button{
  width: 200px;
  height: 54px;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  color: #E080A4;
  border-radius: 27px;
  background: #FFFFFF;
  border: 3px solid #E080A4;
}
.skr_backbutton{
  margin-top: 40px;
  text-align: center;
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_backbutton.active{opacity: 1;}
.skr_backbutton button{
  width: 200px;
  height: 54px;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  color: #383935;
  border-radius: 27px;
  background: #FFFFFF;
  border: 3px solid #A5A7A0;
}




/*complete*/
.skr_complete{
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s linear;
}
.skr_complete.active{
  transform: translate(0);
  opacity: 1;
}
.skr_complete h2{
  margin-bottom: 40px;
  text-align: center;
  font-size: 1.5rem;
}
.skr_completetxt{
  margin-bottom: 32px;
  line-height: 2;
  color: #383935;
}





@media screen and (min-width:821px){
  .skr_txt02 a:hover{text-decoration: underline;}
  .skr_button button:hover{
    color: #FFFFFF;
    background-color: #E080A4;
  }
  .skr_backbutton button:hover{
    color: #FFFFFF;
    background-color: #A5A7A0;
  }
}





@media screen and (max-width:1142px){
  .skr_formwrap{padding: 124px 16px 72px;}
}
@media screen and (max-width:428px){
  .skr_form{padding: 110px 16px 80px}
  .skr_txt01{
    margin-bottom: 32px;
    font-size: 0.875rem;
  }
  .skr_txt01 span{display: block;}
  .skr_formwrap{padding: 56px 16px;}
  .skr_formwrap dl{margin-bottom: 24px;}
  .skr_formwrap dl dt{font-size: 0.875rem;}
  .skr_formwrap dl dd:nth-last-of-type(n+2){margin-bottom: 40px;}
  .skr_formwrap dl dd input{
    height: 48px;
    padding: 14px 12px;
  }
  .skr_formwrap dl dd textarea{
    min-height: 300px;
    font-size: 1rem;
  }
  .skr_txt02{font-size: 0.75rem;}

  .skr_button button{
    width: 162px;
    height: 44px;
    font-size: 0.875rem;
  }
}