@charset "UTF-8";

/* AgreeCheck - Button Activate/Deactivate
--------------------------------------------------*/
:root {
  --checkGroup-width: 360px;
}
/* js-agreeBtn（Checkbox:unchecked） */
.checkAgree:not(:has(#checkA:checked):has(#checkB:checked)) .js-agreeBtn {
  user-select: none;
  pointer-events: none;
  cursor: default;
  border-color: rgb(217, 217, 217);
  background: rgb(217, 217, 217);
}
.c-button.--customAnc:after {
  -webkit-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
}
/* Checkbox */
.checkAgree input[type="checkbox"]#checkA, 
.checkAgree input[type="checkbox"]#checkB {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  display: block;
  margin-right: 8px;
    width: 16px;
    height: 16px;
}
.checkAgree .checkGroup {
  display: flex;
  align-items: baseline;
  margin: 0 auto;
  width: var(--checkGroup-width);
  text-align: left;
}
.checkAgree .checkGroup label {
  max-width: calc(var(--checkGroup-width) - 24px);
}
@media screen and(max-width:768px) {
  .checkAgree .checkGroup {
    width: 100%;
  }  
  .checkAgree .checkGroup label {
    max-width: calc(100% - 24px);
  }
}