.cropper-view-box,
.cropper-face {
border-radius: 50% !important;
}

.cropper-modal {
background-color: rgba(0, 0, 0, 0.5);  /* グレー背景 */
}


.gender-radio {
display: none;
}

.gender-label {
display: inline-flex;
align-items: center;
margin-right: 15px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
}

/* 丸いチェックマーク部分 */
.gender-label .checkmark {
width: 24px;
height: 24px;
border: 2px solid #ccc;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
position: relative;
transition: all 0.2s ease;
}

/* チェックマークアイコン */
.gender-label .checkmark::after {
content: "";
position: absolute;
display: none;
top: 4px;
left: 7px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

/* 色付けとチェック表示（各性別ごと） */
.gender-radio:checked + .gender-label.male .checkmark {
background-color: #0d6efd;
border-color: #0d6efd;
}
.gender-radio:checked + .gender-label.male .checkmark::after {
display: block;
}

.gender-radio:checked + .gender-label.female .checkmark {
background-color: #dc3545;
border-color: #dc3545;
}
.gender-radio:checked + .gender-label.female .checkmark::after {
display: block;
}

.gender-radio:checked + .gender-label.unspecified .checkmark {
background-color: #20c997;
border-color: #20c997;
}
.gender-radio:checked + .gender-label.unspecified .checkmark::after {
display: block;
}


    .highlight-error {
      box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
      transition: box-shadow 0.5s;
    }
    .required-mark::after {
        content: " *";
        color: red;
      }