@charset "utf-8";

/* form styles */
/* checkbox */

input[type='checkbox']:not([name^='mailchimp_']) {
  display: none;
}

input[type='checkbox']:not([name^='mailchimp_']) + * {
  display: flex;
  align-items: center;
}

input[type='checkbox']:not([name^='mailchimp_']) + *:before {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  border: 1px solid #ccd4db;
  margin-right: 7px;
  content: '';
  font-size: 16px;
  font-family: 'FontAwesome';
  color: #252525;
  text-align: center;
}

input[type='checkbox']:not([name^='mailchimp_']):checked + *:before {
  content: '\f00c';
}

/* mailchimp-sync のカスタム */
/* Chrome、Safari でカスタムのチェックボックスを表示させる */
/* NOTE: input:before は Chrome、Safari で例外的に描画されていることに留意すべき */
input[type='checkbox'][name^='mailchimp_'] {
  display: inline;
  margin-left: 0.5rem;
}

input[type='checkbox'][name^='mailchimp_']:before {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  border: 1px solid #ccd4db;
  content: '';
  font-size: 16px;
  font-family: 'FontAwesome';
  color: #252525;
  text-align: center;
  background-color: white;
  margin-top: -0.35rem;
  margin-left: -0.5rem;
}

input[type='checkbox'][name^='mailchimp_']:checked:before {
  content: '\f00c';
}