html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

.form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: 1.4rem;
  font-weight: 600;
  
  &.--required > span:first-child:after {
    content: '必須';
    font-size: 1rem;
    color: #B4D4DA;
  }
  
  &.--wide input {
    max-width: 32rem;
  }
  
  & > span:first-child {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #EFF5F6;
    font-size: 1.2rem;
    
    a {
      display: block;
      width: fit-content;
      border-bottom: .1rem solid #EFF5F6;
    }
  }
  
  input {
    width: 100%;
    max-width: 24rem;
    padding: .6em .8em;
    border-radius: .4rem;
    color: #0C5767;
    font-size: 1.3rem;
    
    &::placeholder {
      color: #B4D4DA;
    }
  }
  
  & + .form {
    margin-top: 1.2rem;
  }
  
  /* md: 768px以上 */
  @media (min-width: 768px) {
    gap: .4rem;
    font-size: 1.6rem;
    
    &.--required > span:first-child:after {
      font-size: 1.2rem;
    }
    
    &.--wide input {
      max-width: 64rem;
    }
    
    & > span:first-child {
      gap: .8rem;
      font-size: 1.6rem;
    }
    
    input {
      max-width: 28rem;
      padding: .75em 1em;
      font-size: 1.4rem;
    }
    
    & + .form {
      margin-top: 1.6rem;
    }
  }
}

.checkbox > span {
  margin: 0;
  
  label {
    display: flex;
    align-items: center;
    gap: .6rem;
    
    input {
      max-width: none;
      width: fit-content;
      
      & + span {
        font-size: 1.1rem;
        color: #B4D4DA;
      }
    }
  }
  
  /* md: 768px以上 */
  @media (min-width: 768px) {
    label {
      gap: .8rem;
      
      input + span {
        font-size: 1.3rem;
      }
    }
  }
}

.submit {
  display: block;
  width: fit-content;
  margin-top: 2.4rem;
  color: #FFFFFF;
  background-color: #DD3210;
  padding: 1em 1.6em;
  border-radius: .4rem;
  font-size: 1.4rem;
  font-weight: 600;
  transition: background-color .3s ease;
  cursor: pointer;
  
  &:hover {
    background-color: #B3260D;
  }
  
  /* md: 768px以上 */
  @media (min-width: 768px) {
    margin-top: 3.2rem;
    padding: 1.25em 2em;
    font-size: 1.6rem;
  }
}