/* My Page */
.my_page .user-profile-menu {
    width: 375px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.my_page .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.my_page .user-icon img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.my_page .user-icon-large img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.my_page .user-name {
    font-size: 16px;
    margin-left: 12px;
    color: #333333;
    font-weight: 400;
    line-height: 23.17px;
    text-align: center;
}

.my_page .menu-options {
    margin-top: 16px;
    gap: 8px;
}

.my_page .menu-options-items {
    margin-bottom: 32px;
    gap: 8px;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.my_page .menu-item {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    padding: 24px 18px 24px 18px;
    width: 50%;
    cursor: pointer;
}

.my_page .menu-item {
    width: calc(50% - 4px);
}

.my_page .menu-item-full {
    width: 100%;
}

.my_page .menu-item-icon img {
    width: 21px;
    height: 20px;
    margin-right: 8px;
}

.my_page .menu-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my_page .menu-item-title {
    font-size: 18px;
    font-weight: 700;
    color: #009688;
    position: relative;
    width: fit-content;
}

.my_page .menu-item-title .icon-notify.icon-notify-has-content {
    width: 21px;
    height: 20px;
    font-size: 14px;
    right: -25px;
    top: 0;
    font-weight: 700;
}

.my_page
    .menu-item-title
    .icon-notify.icon-notify-has-content.icon-notify-more-large {
    width: 24px;
    height: 23px;
    font-size: 14px;
    right: -25px;
}

.my_page .menu-item-subtitle {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
}

.my_page .menu-item-arrow img {
    width: 12px;
    height: 16px;
}

.my_page .menu-link {
    font-size: 16px;
    color: #6c757d;
    border-bottom: 1px solid #e4e8ec;
    cursor: pointer;
    padding: 24px 8px 24px 0px;
    font-weight: 700;
}

.my_page a.menu-link:first-child {
    border-top: 1px solid #e4e8ec;
}

.my_page .menu-link {
    display: flex;
    justify-content: space-between;
}

.my_page .menu-link:hover {
    color: #009688;
}

/* End My Page */

.external-services {
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 5px;
}

.service {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 0;
    border-radius: 5px;
    border-bottom: 1px solid #e4e8ec;
}

.service-name {
    display: flex;
    align-items: center;
}

.service-name span {
    font-size: 16px;
    font-weight: 700;
}

.service-name img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.service-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.service-actions button {
    cursor: default;
}

div.btn_submit-wrap-no-center {
    justify-content: start;
}

button.connected {
    background-color: #198754;
    color: white;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: center;
    width: 64px;
    height: 28px;
}

button.not-connected {
    background-color: #808080;
    color: white;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: center;
    width: 64px;
    height: 28px;
}

button.disconnect {
    background-color: white;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 16px 0px 16px 0px;
    gap: 8px;
    border-radius: 29px;
    height: 44px;
    width: 101px;
    font-size: 16px;
    font-weight: 700;
    line-height: 0px;
    text-align: center;
}

button.disconnect a {
    color: #dc3545;
}

button.connect {
    background-color: white;
    border: 1px solid #00797e;
    color: #00797e;
    padding: 16px 0px 16px 0px;
    gap: 8px;
    border-radius: 29px;
    height: 44px;
    width: 101px;
    font-size: 16px;
    font-weight: 700;
    line-height: 0px;
    text-align: center;
}

button.connect a {
    color: #00797e;
}

.group_input:has(.link-delete) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

div.group_input:not(:first-child) {
    margin-top: 32px;
}

a.backlink {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font-family: Noto Sans JP;
    font-size: 16px;
    line-height: 23.17px;
    text-align: center;
    color: #333;
    margin-top: 32px;
    text-decoration: underline;
}

a.backlink-no-block {
    display: unset;
    text-decoration-color: #333;
    font-size: 14px;
}

div.btn_submit-wrap_mypage {
    display: unset;
    max-width: 176px;
}

.btn_submit-wrap_mypage .btn {
    min-width: unset;
}

a.link-delete {
    width: 100%;
    color: #dc3545;
    padding: 8px 0px 8px 0px;
    text-decoration: underline;
    cursor: pointer;
}

a.back-link-mypage {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font-family: Noto Sans JP;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: center;
    color: #6c757d;
    margin-top: 32px;
    padding-left: 10px;
}

a.back-link-mypage::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 12px;
    top: 54%;
    transform: translateY(-50%);
    left: calc(50% - 87px);
    background-image: url("../../img/front/new_dorapita/arrow_gray_left_icon.svg");
    background-size: cover;
}

a.back-link-mypage:hover {
    text-decoration: underline;
}

.check-list {
    margin-bottom: 20px;
}

.check-list li {
    line-height: 1.5;
    width: 100%;
    padding: 0px 0px 16px 0px;
    border-bottom: 1px solid #e4e8ec;
    display: flex;
    gap: 8px;
}

.check-list li.pt-16 {
    margin-top: 16px;
}

.check-list li img {
    align-self: start;
    margin-top: 5px;
}

div.check_link_title_mypage {
    display: block;
}

div.check_link_title_mypage span:last-child {
    font-weight: 700;
    line-height: 23px;
    font-size: 16px;
}

.warning-list {
    margin-bottom: 32px;
    border-top: 1px solid #e4e8ec;
}

.warning-list li {
    line-height: 1.5;
    width: 100%;
    padding: 16px 0px 16px 0px;
    border-bottom: 1px solid #e4e8ec;
    display: flex;
    gap: 8px;
}

.confirmation {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    gap: 16px;
    border: 1px solid #d9ebec;
    opacity: 0px;
}

.confirmation input {
    width: 16px;
    height: 16px;
}

.confirmation label {
    font-family: Noto Sans JP;
    font-size: 16px;
    font-weight: 400;
    line-height: 23.17px;
    background: none;
    padding: 0;
}

.submit-button {
    width: 100%;
    padding: 12px;
    background-color: #d9534f;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

.submit-button:hover:not(:disabled) {
    background-color: #c9302c;
}

.tag-status-in-process {
    font-family: Noto Sans JP;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: center;
    padding: 8px;
    background: #808080;
    color: white;
    width: fit-content;
}

.tag-status-in-use {
    font-family: Noto Sans JP;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: center;
    padding: 8px;
    background: #198754;
    color: white;
    width: fit-content;
}

.my_page .email-settings {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0px 24px 0px;
    gap: 16px;
    border-top: 1px solid #e4e8ec;
    border-bottom: 1px solid #e4e8ec;
}

.my_page .title_main_notification,
.my_page .title_main {
    height: unset;
}

.my_page .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my_page .setting-title {
    font-size: 18px;
    font-weight: bold;
}

.my_page .setting-description {
    color: var(--bs-dark);
    margin-top: 5px;
    font-size: 14px;
}

.my_page .toggle-switch {
    position: relative;
    width: 56px;
    height: 30px;
}

.my_page .toggle-switch input {
    display: none;
}

.my_page .toggle-switch label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bbc0c6;
    border-radius: 25px;
    cursor: pointer;
}

.my_page .toggle-switch label:before {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: 0.3s;
    background-image: url("/img/front/new_dorapita/icon_toggle_off.svg");
    background-repeat: no-repeat;
    background-position: center center, 50%, 50%;
}

.my_page input:checked + label {
    background-color: #00797e;
}

.my_page input:checked + label#confirmCheckboxLabel {
    background-color: unset;
}

.my_page input:checked + label:before {
    background-image: url("/img/front/new_dorapita/icon_toggle_on.svg");
    left: 29px;
    background-repeat: no-repeat;
    background-position: center center, 50%, 50%;
}

.sub-tittle {
    font-size: 18px;
    font-weight: 700;
    line-height: 26.06px;
    text-align: left;
    color: #00797e;
    margin-bottom: 16px;
}

.my_page form.form-support {
    margin-top: 0;
}

.my_page .form_input {
    margin-top: unset;
    width: 50%;
    height: 44px;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #bbc0c6;
    font-size: 16px;
    font-weight: 400;
    line-height: 23.17px;
}

.width-full {
    width: 100%;
}

.my_page .profile_form_item {
    display: flex;
    margin-bottom: 8px;
    width: 100%;
}

.my_page .profile_form_item:last-of-type {
    margin-bottom: 0;
}

.my_page .profile_form_item dt {
    max-width: 180px;
    gap: 8px;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 15em;
    min-height: 44px;
    margin-right: 10px;
    padding: 0.5em 1em;
    background: var(--bs-light);
    text-align: right;
    font-weight: 700;
}

.my_page .profile_form_item dt .label-text {
    white-space: nowrap;
}

.my_page .profile_form_item .icon_required,
.my_page .profile_form_item .icon_any {
    font-family: Noto Sans JP;
    font-size: 13px;
    font-weight: 400;
    line-height: 18.82px;
    text-align: center;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 1.1em;
    font-size: 0.8rem;
    color: #636363;
}

.my_page .profile_form_item .icon_required {
    color: var(--bs-danger);
}

.my_page .profile_form_item dd {
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.my_page .profile_form_item dd:has(.expected_service_start_date-error label:not(:empty)) input.form_input[name="expected_service_start_date-text"] {
    background-color: #ffeff1;
    border: 1px solid var(--bs-danger);
}

.my_page .profile_form_item dd input {
    word-wrap: break-word;
    word-break: break-all;
    width: 100%;
}

.my_page .profile_form_item .date-select-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

.my_page .profile_form_item .date-select-group div {
    width: auto;
}

.my_page .profile_form_item .date-select-group select {
    padding: 8px 16px;
}

.my_page .profile_form_item .date-select-group select.year-select {
    width: 100px !important;
}

.my_page .profile_form_item .date-select-group select.month-select,
.my_page .profile_form_item .date-select-group select.day-select {
    width: 72px;
}

.my_page .profile_form_item.text-address dd {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.my_page .profile_form_item.text-address dd div {
    width: calc(50% - 4px);
}

.my_page .profile_form_item.text-address dd div input {
    min-width: 100% !important;
}

.my_page .profile_form_item dd div:has(button) {
    display: flex;
    align-items: center;
    gap: 16px;
}

.my_page .profile_form_item dd div:has(button) button {
    margin: 0;
    min-width: 92px;
    width: 92px;
    height: 44px;
    padding: 16px 12px;
    gap: 8px;
    border-radius: 36px;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: left;
    text-wrap: nowrap;
}

.my_page .profile_form_item dd div:has(button) span:has(img) {
    width: 17px;
    height: 17px;
    margin-right: 6px;
    margin-top: -2px;
}

.my_page .notify_info {
    max-width: 464px;
}

.my_page ul.check_link_list {
    margin-top: 12px;
    font-size: 14px;
}

div.notify_wrap.notify_wrap_mypage {
    margin-bottom: 32px !important;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #e3f0f1;
}

div.notify_wrap.notify_wrap_mypage.background_sky_blue {
    background-color: #e5fbff !important;
}

div.notify_wrap.mb-24 {
    margin-bottom: 24px !important;
}

.check-list.mb-32 {
    margin-bottom: 32px !important;
}

div.notify_wrap_support:has(+ p) {
    margin-bottom: 32px !important;
}

div.notify_wrap_support:not(:has(+ p)) {
    margin-bottom: 0 !important;
}

div.notify_wrap_mypage_background {
    background-color: #e3f0f1;
}

div.notify_wrap.notify_wrap_mypage .btn-mypage {
    min-width: 272px;
    margin-top: 0;
}

div.notify_wrap.notify_wrap_mypage .btn-mypage-delete {
    min-width: 176px;
    margin-top: 0;
}

.my_page .profile_form_item div:has(.half-width) {
    position: relative;
    width: 100% !important;
}

.my_page
    .profile_form_item
    > div:has(.half-width)
    > input:not([type="checkbox"]):not([type="radio"]),
.my_page .profile_form_item > div:has(.half-width) > select {
    min-width: 50% !important;
    width: 50% !important;
}

.my_page .profile_form_item div.textarea {
    width: 100%;
}

.my_page .profile_form_item div.textarea textarea {
    width: 100%;
    height: 136px;
    resize: none;
}

.my_page .profile_form_item div.select {
    width: 100%;
}

.my_page .profile_form_item .address-select-group div.select {
    width: fit-content;
}

.my_page .profile_form_item div.select select#address1-city {
    padding-right: 30px;
}

.my_page .profile_form_item div.select select {
    width: 100%;
    padding: 8px 16px;
}

.my_page .profile_form_item div.select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("/img/front/new_dorapita/apply_down_gray_icon.svg");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 12px;
}

.my_page .profile_form_item div.select select.prefecture-select,
.my_page .profile_form_item div.select select.city-select {
    width: 110px;
}

.my_page .profile_form_item div.date {
    width: 100%;
}

.my_page .profile_form_item div.date input {
    display: block;
    width: 100%;
}

.my_page .profile_form_item.checkbox_row .checkbox-item {
    width: 100%;
}

.my_page .profile_form_item.checkbox .checkbox-item {
    margin-right: 16px;
}

.my_page .profile_form_item dd:has(.checkbox-item) {
    display: flex;
    gap: 16px;
    padding: 8px 0px;
    margin-bottom: -8px;
}

.my_page .profile_form_item .checkbox-item {
    display: flex;
    gap: 8px;
    align-items: center;
    text-wrap: nowrap;
}

.my_page .profile_form_item input:-webkit-autofill,
.my_page .profile_form_item input:-webkit-autofill:hover,
.my_page .profile_form_item input:-webkit-autofill:focus,
.my_page .profile_form_item input:-webkit-autofill:active {
    -webkit-text-fill-color: black !important;
    box-shadow: 0 0 0px 1000px white inset !important;
}

.my_page .profile_form_item input.input_entry_invalid:-webkit-autofill,
.my_page .profile_form_item input.input_entry_invalid:-webkit-autofill:hover,
.my_page .profile_form_item input.input_entry_invalid:-webkit-autofill:focus,
.my_page .profile_form_item input.input_entry_invalid:-webkit-autofill:active,
.my_page .profile_form_item input.error:-webkit-autofill,
.my_page .profile_form_item input.error:-webkit-autofill:hover,
.my_page .profile_form_item input.error:-webkit-autofill:focus,
.my_page .profile_form_item input.error:-webkit-autofill:active {
    box-shadow: 0 0 0px 1000px #ffeff1 inset !important;
}

.my_page .profile_form_item .address-select-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.my_page .title_wrap h1 {
    text-wrap: nowrap;
}

.my_page .profile_form_item input[type="checkbox"] {
    flex-shrink: 0;
    flex-grow: 0;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 2px;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    cursor: pointer;
    outline: none !important;
    border-color: #ced4da !important;
    padding: 0;
    margin: 0;
}

.my_page .profile_form_item input[type="checkbox"]:disabled {
    border: 1px solid var(--bs-gray-light02);
    cursor: default;
}

.my_page .profile_form_item input[type="checkbox"] + label {
    color: #333;
    background: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 23.17px;
    padding: 0;
}

.my_page .profile_form_item input[type="checkbox"]:checked {
    border-color: var(--bs-danger);
    background-image: url('data:image/svg+xml;utf8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="%23ffffff"><path class="b" d="M18.73,9.43c.63-.63,.63-1.67,0-2.3-.63-.63-1.67-.63-2.3,0l-6.28,6.28-2.57-2.57c-.63-.63-1.67-.63-2.3,0-.63,.63-.63,1.67,0,2.3l3.72,3.72c.63,.63,1.67,.63,2.3,0l7.43-7.43Z"/></svg>');
    border-radius: 2px;
    background-color: var(--dorapita, #00797e);
}

.my_page .profile_form_item .time-range-wrapper {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.my_page .profile_form_item.time-range span {
    text-wrap: nowrap;
    display: inline-block;
}

.my_page .profile_form_item.time-range dd {
    width: 100%;
    align-items: center;
    gap: 8px;
}

.my_page .profile_form_item.time-range dt {
    background: white;
}

.my_page .profile_form_item.time-range .input.select {
    width: fit-content;
}

.my_page .profile_form_item.time-range select {
    width: 120px !important;
}

.my_page .profile_form_item label:has(.error) {
    background: none;
}

.my_page .profile_form_item span.text-error label::before {
    margin-top: 0;
}

.my_page
    .profile_form_item:has(span.text-error label:not(:empty))
    select.error {
    background-color: #ffeff1 !important;
    border: 1px solid var(--bs-danger);
}

/*Add error style to the validation executed by zip2addr plugin*/
.my_page
    .profile_form_item
    dd:has(#zip-error.error:not(:empty))
    .input.text
    input {
    background-color: #ffeff1 !important;
    border: 1px solid var(--bs-danger);
}

.my_page
    .profile_form_item
    dd:has(#zip-error:not(:empty))
    span[style="color:red"]:before {
    content: "\f071";
    margin-right: 0.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-top: -3px;
}

.my_page .profile_form_item select:invalid,
.my_page .profile_form_item select.prefecture-select.empty,
.my_page .profile_form_item select.city-select.empty,
.my_page .profile_form_item select.prefecture-select:invalid {
    color: #bbc0c6;
}

.my_page .profile_form_item.birthday-resume-group select:invalid {
    color: var(--bs-dark);
}

.my_page .profile_form_item option {
    color: black;
}

.my_page .profile_form_item textarea::placeholder {
    color: #bbc0c6;
}

.my_page .btn_submit-wrap div label {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: none;
    border-radius: 34px;
}

.my_page .profile-edit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my_page .profile-edit .message.error {
    font-family: Noto Sans JP;
    font-size: 16px;
    font-weight: 700;
    line-height: 23.17px;
    text-align: center;
    word-break: keep-all;
    width: 50%;
}

.my_page .profile-edit .message.error::before {
    display: none;
}

.my_page dt .break-word {
    display: block;
}

.my_page .title_no_under:has(.br-mobile) {
    text-align: center;
}

.my_page .description_group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 24px;
}

.my_page .description_group span {
    line-height: 23.17px;
    font-size: 16px;
    font-weight: 400;
}

.my_page .mt-1 {
    margin-top: 1rem !important;
}

.my_page .profile_form_item.date_input dd {
    position: relative;
}

.my_page .profile_form_item.date_input dd div.date {
    position: absolute;
    height: 44px;
    width: 100%;
    z-index: 1;
    opacity: 0;
}

.my_page .profile_form_item.date_input input {
    margin: 0;
}

.my_page .profile_form_item.date_input .text-date.text-valid {
    color: black !important;
}

.my_page .profile_form_item.date_input .text-date.text-invalid {
    color: #bbc0c6 !important;
}

.my_page .profile_form_item.date_input input[type="date"] {
    position: relative;
}

.my_page .profile_form_item.date_input div.text {
    position: relative;
}

.my_page .profile_form_item.date_input div.text::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 14px;
    width: 14px;
    height: 14px;
    background-image: url("/img/front/new_dorapita/icon_calendar.svg");
    background-repeat: no-repeat;
    background-position: center center, 50%, 50%;
    z-index: 2;
}

.my_page
    .profile_form_item.date_input
    input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    color: transparent;
}

.my_page .profile_form_item .field_guide:not(:empty) {
    color: var(--bs-gray, #808080);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.8px;
    letter-spacing: -0.9px;
    width: 100%;
    margin-top: 8px;
}

/* Gender mypae */
.my_page .profile_form_item .radio-item {
    display: flex;
    gap: 8px;
    align-items: center;
    text-wrap: nowrap;
}

.my_page .profile_form_item.radio dd {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    flex-direction: column;
}

.my_page .profile_form_item.radio dd .radio-wrap {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 24px;
}

.my_page .profile_form_item.radio dd label {
    height: 100%;
    background: none;
    width: 40px;
    font-size: 16px;
    font-weight: 400;
    padding: 14px 0;
    cursor: pointer;
    padding-left: 35px;
}

.my_page .profile_form_item.radio dd label:has(input:checked):before {
    content: "";
    border-color: var(--bs-dorapita);
    background-image: unset;
    background-color: var(--bs-white);
    border-width: 4px;
    background-repeat: no-repeat;
    background-position: center center, 50%, 50%;
}

.my_page .profile_form_item.radio dd label::before {
    background-color: var(--bs-white);
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ced4da;
    margin-left: -25px;
}

.my_page .profile_form_item.radio input[type="radio"] {
    display: none;
}

.my_page .profile_form_item.radio dd label input:checked::before {
    border: 5px solid #00797e;
}

.profile-edit-header {
    display: flex;
    align-items: center;
    max-height: 18px;
}

#userProfileForm .profile_form_item input[type="checkbox"]:checked {
    border: none;
}

#userProfileForm .profile_form_item.radio dd label:has(input:checked):before {
    border-width: 5px;
}

#profileEditSection span.text-error label {
    font-size: 16px;
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    #profileEditSection .background_graphcheck {
        padding-bottom: 32px;
    }

    h1.title_main_notification {
        line-height: 18px;
    }

    .my_page .profile_form_item_full {
        display: flex;
        flex-direction: column;
    }

    .my_page .profile_form_item_full dd {
        width: 100%;
        margin-top: 16px;
    }

    #userProfileForm .my_page .profile_form_item dt {
        gap: 8px;
    }

    .my_page .profile_form_item dt {
        max-width: unset;
        justify-content: flex-start;
        width: 15em;
        max-height: 44px;
        gap: 2px;
        padding: 16px 8px;
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
    }

    .my_page .profile_form_item_full dt {
        width: 100% !important;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .my_page .profile_form_item.form-date-input dd:has(.checkbox-item) {
        justify-content: normal;
    }

    .my_page .profile_form_item.form-date-input dd .checkbox-item {
        width: 30% !important;
    }

    .my_page
        .profile_form_item
        dd:has(.checkbox-item).invalid
        .error-message
        label {
        margin-top: 0;
    }

    .my_page .profile_form_item dd:has(.checkbox-item).invalid .checkbox-item {
        border: 1px solid var(--danger) !important;
        background: var(--danger-background) !important;
    }

    .my_page
        .profile_form_item
        dd:has(.checkbox-item).invalid
        .checkbox-item
        label {
        background: none !important;
    }

    div.notify_wrap.notify_wrap_mypage {
        padding: 24px 16px;
    }

    div.notify_wrap.notify_wrap_mypage-delete {
        padding: 20px 16px;
    }

    div.notify_wrap.notify_wrap_mypage .btn-mypage,
    div.notify_wrap.notify_wrap_mypage .btn-mypage-delete {
        margin-top: 32px;
    }

    .my_page
        .profile_form_item
        input:not([type="checkbox"]):not([type="radio"]) {
        min-width: 100% !important;
    }

    .my_page .profile_form_item div:has(.half-width) {
        position: relative;
        width: 100% !important;
    }

    .my_page .profile_form_item.checkbox .checkbox-item {
        margin-right: 0px;
    }

    .my_page .profile_form_item dd:has(.checkbox-item) {
        display: flex;
        gap: 16px;
        padding: 0px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .my_page .profile_form_item .checkbox-item {
        display: flex;
        gap: 8px;
        align-items: center;
        width: calc(50% - 8px) !important;
        height: 48px;
        padding: 16px;
        border-radius: 4px;
        border: 1px solid #bbc0c6;
    }

    .my_page
        .profile_form_item
        .checkbox-item:has(input[type="checkbox"]:checked) {
        border: 1px solid #a4d0d2;
        background: #e3f0f1;
    }

    .my_page
        .profile_form_item
        .checkbox-item:has(input[type="checkbox"]:checked)
        label {
        background: #e3f0f1;
    }

    .my_page dt .break-word {
        display: inline-block;
    }

    .btn_submit-wrap .btn {
        width: 100%;
    }

    .my_page .profile_form_item dd {
        min-height: 44px;
    }

    .my_page .profile_form_item .display_text_input {
        padding: 8px 0;
    }

    .my_page .profile_form_item dt span {
        margin: 0px !important;
    }

    #userProfileForm .profile_form_item .label-text {
        margin-left: 6px !important;
    }

    .my_page .profile_form_item.time-range dt {
        display: none;
    }

    .my_page .profile_form_item.time-range dd {
        margin: 0;
    }

    .my_page .profile_form_item .time-range-wrapper {
        display: inline-flex;
    }

    .my_page .profile_form_item.time-range dd span {
        width: 100%;
    }

    .my_page
        .profile_form_item
        .checkbox-item:has(input[value="時間指定なし（いつでも可）"]) {
        min-width: 100%;
    }

    .my_page .profile_form_item .time-range-wrapper {
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
        gap: 16px;
    }

    .my_page .profile_form_item.time-range .input.select {
        width: calc(50% - 24px);
    }

    .my_page .profile_form_item.time-range select {
        width: 100% !important;
    }

    .my_page .profile_form_item .date-select-group {
        display: flex;
        width: 100%;
        gap: 8px;
        justify-content: space-between;
    }

    .my_page .profile_form_item .date-select-group select.year-select {
        width: 100% !important;
        min-width: 70px;
        padding: 8px 6px;
    }

    .my_page .profile_form_item .date-select-group select.month-select,
    .my_page .profile_form_item .date-select-group select.day-select {
        width: 100% !important;
        min-width: 50px;
        padding: 8px 6px;
    }

    .my_page .profile_form_item div.select select.prefecture-select,
    .my_page .profile_form_item div.select select.city-select {
        width: 100%;
        padding: 8px 6px;
        min-width: unset;
    }

    .my_page .profile_form_item .address-select-group div.select {
        width: 100%;
    }

    /* My page gender */
    .my_page .profile_form_item.radio dd .radio-wrap {
        gap: 8px;
    }

    #userProfileForm .profile_form_item dd label:has(input:checked) {
        border: 1px solid #a4d0d2;
        background: #e3f0f1;
    }

    .my_page .profile_form_item.radio dd label {
        padding-left: 35px !important;
        border: 1px solid #ced4da;
        border-radius: 4px;
        padding: 8px;
        width: 50%;
    }

    .my_page .profile_form_item dt {
        width: 100%;
    }

    .my_page .profile_form_item .date-select-group div.select:first-child {
        flex: 3;
    }

    .my_page .profile_form_item .date-select-group div.select:nth-child(2),
    .my_page .profile_form_item .date-select-group div.select:nth-child(3) {
        flex: 2;
    }

    .my_page
        .profile_form_item
        .date-select-group
        div.select:nth-child(2)
        select,
    .my_page
        .profile_form_item
        .date-select-group
        div.select:nth-child(3)
        select {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 992px) {
    .profile-edit-header {
        display: block;
        max-height: unset;
    }

    .my_page .profile_form_item {
        margin-bottom: 24px;
    }

    .my_page .menu-options-items {
        flex-direction: column;
    }

    .my_page .menu-item,
    .my_page .menu-item:not(:first-child) {
        width: 100%;
    }

    .my_page
        .profile_form_item
        div:has(.half-width)
        input:not([type="checkbox"]):not([type="radio"]),
    .my_page .profile_form_item div:has(.half-width) select {
        width: 100% !important;
    }

    div.btn_submit-wrap_mypage {
        max-width: unset;
    }

    .my_page .notify_info {
        max-width: unset;
    }

    .my_page .profile_form_item {
        flex-direction: column;
        row-gap: 8px;
    }

    .my_page .profile_form_item .date-select-group {
        gap: 4px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    ul.check_link_list_mypage {
        height: unset;
    }

    div.notify_wrap.notify_wrap_mypage {
        display: block;
    }

    .mb-sp-24 {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 374px) {
    .my_page .profile_form_item .date-select-group div.select {
        width: auto;
    }

    .my_page .profile_form_item .date-select-group select {
        background-image: none !important;
        padding: 8px !important;
        text-align: center;
    }

    .my_page .profile_form_item .date-select-group select.year-select {
        min-width: 50px;
    }

    .my_page .profile_form_item .date-select-group select.month-select,
    .my_page .profile_form_item .date-select-group select.day-select {
        width: 100%;
        min-width: 30px;
    }

    .my_page .profile_form_item.form-date-input dd .checkbox-item {
        width: calc(50% - 8px) !important;
    }
}

@media (max-width: 344px) {
    .my_page .profile_form_item .date-select-group select,
    .my_page .profile_form_item .address-select-group select {
        background-image: none !important;
        padding: 8px 0px !important;
        text-align: center;
    }

    .my_page .profile_form_item .address-select-group select#address1-city {
        padding-inline: 8px !important;
    }
}