:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    color: #1f2937;
    background: #f5f7f9;
}

/* LP design: customer dashboard only. */
.mypage--dashboard {
    --mypage-lp-primary: #21aff3;
    --mypage-lp-primary-dark: #078ed2;
    --mypage-lp-primary-light: #eaf8ff;
    --mypage-lp-text: #333;
    --mypage-lp-text-sub: #616161;
    --mypage-lp-border: #d7dce1;
    --mypage-lp-background: #f7fafc;
    min-width: 320px;
    color: var(--mypage-lp-text);
    background: var(--mypage-lp-background);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    word-break: break-word;
}

.mypage_wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mypage--dashboard .mypage_header {
    background: #fff;
    border-bottom: 1px solid var(--mypage-lp-border);
}

.mypage--dashboard .mypage_header_inner {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 20px;
    padding-left: 10%;
}

.mypage--dashboard .mypage_logo {
    display: block;
    line-height: 1;
}

.mypage--dashboard .mypage_logo img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

.mypage--dashboard .mypage_main {
    width: 100%;
    margin: 0;
    padding: 4rem 0 6rem;
}

.mypage--dashboard .mypage_inner {
    width: min(100% - 3rem, 740px);
    margin: 0 auto;
}

.mypage--dashboard .mypage_title {
    margin: 0 0 2rem;
    font-size: 2rem;
    line-height: 1.4;
    text-align: center;
}

.mypage--dashboard .mypage_member {
    min-height: 9rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: #fff;
    border: 2px solid var(--mypage-lp-primary);
    border-radius: 1rem;
    text-align: center;
}

.mypage--dashboard .mypage_member_label {
    padding: .3rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mypage-lp-primary);
    border-radius: 999px;
}

.mypage--dashboard .mypage_member_title {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

.mypage--dashboard .mypage_member_body {
    width: 100%;
}

.mypage--dashboard .mypage_member_id {
    margin: 0;
    color: var(--mypage-lp-text);
    font-size: 2.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.mypage--dashboard .mypage_account_link {
    margin-top: .75rem;
    text-align: right;
}

.mypage--dashboard .mypage_account_link a {
    min-height: 2.75rem;
    padding: .375rem 0;
    display: inline-block;
    color: var(--mypage-lp-text);
    font-size: 1rem;
    font-weight: 500;
    text-underline-offset: .25rem;
}

.mypage--dashboard .mypage_account_link a:hover {
    color: var(--mypage-lp-primary-dark);
}

.mypage--dashboard .mypage_section {
    margin-top: 4rem;
}

.mypage--dashboard .mypage_section_title {
    margin: 0 0 1.5rem;
    font-size: 1.625rem;
    line-height: 1.5;
    text-align: center;
}

.mypage--dashboard .mypage_information {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mypage-lp-border);
    border-radius: .75rem;
}

.mypage--dashboard .mypage_information_row {
    display: grid;
    grid-template-columns: 15rem 1fr;
}

.mypage--dashboard .mypage_information_row + .mypage_information_row {
    border-top: 1px solid var(--mypage-lp-border);
}

.mypage--dashboard .mypage_information dt,
.mypage--dashboard .mypage_information dd {
    min-height: 4.75rem;
    margin: 0;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
}

.mypage--dashboard .mypage_information dt {
    justify-content: center;
    color: #fff;
    background: var(--mypage-lp-primary);
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
}

.mypage--dashboard .mypage_information dd {
    background: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mypage--dashboard .mypage_contents {
    margin-top: 5rem;
}

.mypage--dashboard .mypage_contents_list {
    width: min(100%, 46rem);
    margin: 2rem auto 0;
    display: grid;
    gap: 1.5rem;
}

.mypage--dashboard .mypage_content_card {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid var(--mypage-lp-primary);
    border-radius: 1rem;
    box-shadow: 0 .25rem 1rem rgb(0 0 0 / 4%);
    text-align: center;
}

.mypage--dashboard .mypage_content_header {
    width: 100%;
}

.mypage--dashboard .mypage_content_name {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
}

.mypage--dashboard .mypage_content_lead {
    margin: 1rem 0 0;
    color: var(--mypage-lp-text-sub);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8;
}

.mypage--dashboard .mypage_kumamori_logo {
    width: min(100%, 15rem);
    height: auto;
    margin: 0 auto;
    display: block;
}

.mypage--dashboard .mypage_store_buttons {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.mypage--dashboard .mypage_store_button {
    width: 11rem;
    display: block;
    line-height: 0;
}

.mypage--dashboard .mypage_store_button img {
    width: 100%;
    height: auto;
    display: block;
}

.mypage--dashboard .is-disabled {
    cursor: not-allowed;
    opacity: .68;
}

.mypage--dashboard .mypage_license_box {
    width: min(100%, 30rem);
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f5faff;
    border: 1px solid #cfe9ff;
    border-radius: .75rem;
}

.mypage--dashboard .mypage_license_label {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.mypage--dashboard .mypage_activation_code {
    margin: .5rem 0 0;
    color: var(--mypage-lp-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
}

.mypage--dashboard .mypage_license_actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: .75rem;
}

.mypage--dashboard .mypage_license_button {
    min-width: 7rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    color: var(--mypage-lp-primary-dark);
    background: #fff;
    border: 1px solid var(--mypage-lp-primary);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
}

.mypage--dashboard .mypage_license_button:hover {
    background: var(--mypage-lp-primary-light);
}

.mypage--dashboard .mypage_license_pending {
    color: var(--mypage-lp-text-sub);
    font-size: .875rem;
    line-height: 1.7;
}

.mypage--dashboard .mypage_license_pending p {
    margin: .75rem 0 0;
}

.mypage--dashboard .mypage_action_button {
    min-width: 18rem;
    min-height: 3.5rem;
    margin-top: 1.5rem;
    padding: .75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #ff9d00;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.mypage--dashboard a.mypage_action_button:hover {
    opacity: .85;
    transform: translateY(-1px);
}

.mypage--dashboard .mypage_action_button--secondary {
    color: var(--mypage-lp-primary-dark);
    background: #fff;
    border: 2px solid var(--mypage-lp-primary);
}

.mypage--dashboard .mypage_action_button--danger {
    color: #962d2d;
    background: #fff;
    border: 2px solid #c77a7a;
}

.mypage--dashboard .mypage_content_notice,
.mypage--dashboard .mypage_document_box {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    color: var(--mypage-lp-text-sub);
    background: #f7f7f7;
    border-radius: .5rem;
    font-size: .8125rem;
    line-height: 1.7;
    text-align: left;
}

.mypage--dashboard .mypage_document_box {
    margin-top: 2rem;
    padding: 1.25rem;
    border-radius: .75rem;
}

.mypage--dashboard .mypage_document_title {
    margin: 0;
    color: var(--mypage-lp-text);
    font-size: 1rem;
    font-weight: 700;
}

.mypage--dashboard .mypage_document_text {
    margin: .5rem 0 0;
    font-size: .875rem;
}

.mypage--dashboard .mypage_document_link {
    margin-top: .75rem;
    display: inline-flex;
    color: var(--mypage-lp-primary-dark);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.mypage--dashboard .mypage_account_actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.mypage--dashboard .mypage_account_actions .mypage_action_button {
    margin-top: 0;
}

.mypage--dashboard .mypage_logout {
    margin-top: 3.5rem;
    text-align: center;
}

.mypage--dashboard .mypage_logout_button {
    min-width: 9rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mypage-lp-text);
    background: #fff;
    border: 2px solid #333;
    border-radius: 999px;
    font-size: 1.125rem;
    font-weight: 700;
}

.mypage--dashboard .mypage_logout_button:hover {
    color: #fff;
    background: #555;
    border-color: #555;
}

.mypage--dashboard .mypage_footer {
    padding: 2.5rem 1.5rem 1.5rem;
    color: var(--mypage-lp-text);
    background: #fff;
    border-top: 1px solid var(--mypage-lp-primary);
    font-size: 1rem;
    text-align: center;
}

.mypage--dashboard .mypage_footer_navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
}

.mypage--dashboard .mypage_footer_navigation a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-underline-offset: .25rem;
}

.mypage--dashboard .mypage_footer_navigation a:hover {
    color: var(--mypage-lp-primary-dark);
}

.mypage--dashboard .mypage_copyright {
    margin: 1.5rem 0 0;
    color: var(--mypage-lp-text-sub);
    font-size: 1rem;
}

.mypage--dashboard .br_sp {
    display: none;
}

/* LP account design: authenticated registration information page only. */
.mypage--account {
    --mypage-lp-primary: #21aff3;
    --mypage-lp-primary-dark: #078ed2;
    --mypage-lp-primary-light: #eaf8ff;
    --mypage-lp-text: #333;
    --mypage-lp-text-sub: #616161;
    --mypage-lp-border: #d7dce1;
    --mypage-lp-background: #f7fafc;
    min-width: 320px;
    color: var(--mypage-lp-text);
    background: var(--mypage-lp-background);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    word-break: break-word;
}

.mypage--account .mypage_header {
    background: #fff;
    border-bottom: 1px solid var(--mypage-lp-border);
}

.mypage--account .mypage_header_inner {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 20px;
    padding-left: 10%;
}

.mypage--account .mypage_logo {
    display: block;
    line-height: 1;
}

.mypage--account .mypage_logo img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

.mypage--account .mypage_main {
    width: 100%;
    margin: 0;
    padding: 4rem 0 6rem;
}

.mypage--account .mypage_inner {
    width: min(100% - 3rem, 60rem);
    margin: 0 auto;
}

.mypage--account .account_section {
    width: min(100%, 60rem);
    margin: 0 auto;
}

/* Guest-facing authentication screens share the admin login card width. */
.mypage--account.mypage--guest .mypage_inner {
    width: min(100% - 3rem, 30rem);
}

.mypage--account.mypage--guest .account_section {
    width: 100%;
}

.mypage--account .account_heading {
    margin-bottom: 2rem;
    text-align: center;
}

.mypage--account .account_title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.4;
}

.mypage--account .account_information {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mypage-lp-border);
    border-radius: .75rem;
    box-shadow: 0 .375rem 1.25rem rgb(33 175 243 / 8%);
}

.mypage--account .account_information_row {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
}

.mypage--account .account_information_row + .account_information_row {
    border-top: 1px solid var(--mypage-lp-border);
}

.mypage--account .account_information_label {
    min-height: 4.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--mypage-lp-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.mypage--account .account_information_content {
    min-height: 4.75rem;
    margin: 0;
    padding: .75rem 1rem .75rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    background: #fff;
}

.mypage--account .account_information_value {
    min-width: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.mypage--account .account_change_button {
    color: #4b4848;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: underline;
}

.mypage--account a.account_change_button:hover {
    color: var(--mypage-lp-primary);
}

.mypage--account .account_change_button--disabled {
    color: var(--mypage-lp-text-sub);
    cursor: not-allowed;
    opacity: .55;
}

.mypage--account .account_login_section,
.mypage--account .account_profile_summary {
    display: none;
}

.mypage--account .account_notice {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--mypage-lp-primary-light);
    border-radius: .75rem;
}

.mypage--account .account_notice p {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.8;
}

.mypage--account .account_contract {
    margin-top: 4rem;
}

.mypage--account .account_subheading {
    margin: 0 0 1.5rem;
    font-size: 1.625rem;
    line-height: 1.5;
    text-align: center;
}

.mypage--account .account_login_section,
.mypage--account .account_profile_summary {
    margin-top: 3rem;
}

.mypage--account .account_login_section {
    margin-top: 0;
}

.mypage--account .account_login_notice {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #bfe1f4;
    border-radius: .75rem;
    background: #eff9ff;
    color: #155273;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.7;
}

.mypage--account .account_login_notice p {
    margin: 0;
}

.mypage--account .account_login_notice p + p {
    margin-top: .25rem;
}

.mypage--account #login-info {
    scroll-margin-top: 1.5rem;
}

.mypage--account .account_procedures {
    margin-top: 1.5rem;
    text-align: center;
}

.mypage--account .account_cancel_button {
    min-width: 15rem;
    min-height: 3.5rem;
    padding: .75rem 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #962d2d;
    background: #fff;
    border: 2px solid #c77a7a;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.mypage--account .account_cancel_button:hover {
    color: #fff;
    background: #962d2d;
}

.mypage--account .account_back {
    margin-top: 3rem;
    text-align: center;
}

.mypage--account .account_back_button {
    min-width: 15rem;
    min-height: 3.75rem;
    padding: .75rem 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--mypage-lp-text);
    background: #fff;
    border: 2px solid #333;
    border-radius: 999px;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

.mypage--account .account_back_button:hover {
    color: #fff;
    background: #555;
    border-color: #555;
}

.mypage--account .mypage_footer {
    padding: 2.5rem 1.5rem 1.5rem;
    color: var(--mypage-lp-text);
    background: #fff;
    border-top: 1px solid var(--mypage-lp-primary);
    font-size: 1rem;
    text-align: center;
}

.mypage--account .mypage_footer_navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
}

.mypage--account .mypage_footer_navigation a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-underline-offset: .25rem;
}

.mypage--account .mypage_footer_navigation a:hover {
    color: var(--mypage-lp-primary-dark);
}

.mypage--account .mypage_copyright {
    margin: 1.5rem 0 0;
    color: var(--mypage-lp-text-sub);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .mypage--account .mypage_header_inner {
        width: 100%;
        min-height: 0;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mypage--account .mypage_logo img {
        width: 180px;
    }

    .mypage--account .mypage_main {
        padding: 2.5rem 0 4rem;
    }

    .mypage--account .mypage_inner {
        width: min(100% - 2rem, 45rem);
    }

    .mypage--account .account_heading {
        margin-bottom: 1.5rem;
    }

    .mypage--account .account_title {
        font-size: 1.75rem;
    }

    .mypage--account .account_information {
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .mypage--account .account_information_row {
        display: block;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--mypage-lp-border);
        border-radius: .75rem;
        box-shadow: 0 .25rem 1rem rgb(33 175 243 / 8%);
    }

    .mypage--account .account_information_row + .account_information_row {
        margin-top: 1rem;
        border-top: 1px solid var(--mypage-lp-border);
    }

    .mypage--account .account_information_label {
        min-height: 3.5rem;
        padding: .75rem 1rem;
        justify-content: flex-start;
        text-align: left;
    }

    .mypage--account .account_information_content {
        min-height: 4.5rem;
        padding: 1rem;
    }

    .mypage--account .account_information_value {
        line-height: 1.7;
    }

    .mypage--account .account_change_button {
        padding-right: .875rem;
        padding-left: .875rem;
        font-size: 1rem;
    }

    .mypage--account .account_notice {
        margin-top: 1.25rem;
        padding: 1rem;
    }

    .mypage--account .account_contract {
        margin-top: 3rem;
    }

    .mypage--account .account_subheading {
        font-size: 1.5rem;
    }

    .mypage--account .account_login_section,
    .mypage--account .account_profile_summary {
        margin-top: 2.5rem;
    }

    .mypage--account .account_login_section {
        margin-top: 0;
    }

    .mypage--account .account_login_notice {
        padding: 1rem;
        font-size: .875rem;
    }

    .mypage--account .account_back {
        margin-top: 2.5rem;
    }

    .mypage--account .account_back_button,
    .mypage--account .account_cancel_button {
        width: min(100%, 20rem);
    }

    .mypage--account .mypage_footer {
        padding: 2rem 1rem 1.25rem;
    }

    .mypage--account .mypage_footer_navigation {
        display: grid;
        gap: .25rem;
    }

    .mypage--account .mypage_footer_navigation span {
        justify-content: center;
    }
}

@media (max-width: 374px) {
    .mypage--account .mypage_inner,
    .mypage--account .mypage_header_inner {
        width: min(100% - 1.5rem, 45rem);
    }

    .mypage--account .account_information_content {
        display: block;
    }

    .mypage--account .account_change_button {
        width: 100%;
        margin-top: 1rem;
        display: block;
    }
}

@media (max-width: 768px) {
    .mypage--dashboard .mypage_header_inner {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }

    .mypage--dashboard .mypage_logo img {
        width: 180px;
    }

    .mypage--dashboard .mypage_main {
        padding: 2.5rem 0 4rem;
    }

    .mypage--dashboard .mypage_inner {
        width: min(100% - 2rem, 45rem);
    }

    .mypage--dashboard .mypage_title {
        margin-bottom: 1.5rem;
        font-size: 1.75rem;
    }

    .mypage--dashboard .mypage_member {
        min-height: 8rem;
        padding: 1rem;
    }

    .mypage--dashboard .mypage_member_id {
        font-size: 2rem;
        letter-spacing: .07em;
    }

    .mypage--dashboard .mypage_account_link {
        text-align: center;
    }

    .mypage--dashboard .mypage_section {
        margin-top: 3rem;
    }

    .mypage--dashboard .mypage_section_title {
        margin-bottom: 1.25rem;
        font-size: 1.5rem;
    }

    .mypage--dashboard .mypage_information_row {
        display: block;
    }

    .mypage--dashboard .mypage_information dt,
    .mypage--dashboard .mypage_information dd {
        min-height: 3.75rem;
        padding: .875rem 1rem;
        justify-content: center;
        text-align: center;
    }

    .mypage--dashboard .mypage_information dd {
        min-height: 4.25rem;
    }

    .mypage--dashboard .mypage_contents {
        margin-top: 3.5rem;
    }

    .mypage--dashboard .mypage_contents_list {
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .mypage--dashboard .mypage_content_card {
        padding: 2rem 1rem;
        border-radius: .75rem;
    }

    .mypage--dashboard .mypage_content_name {
        font-size: 1.25rem;
    }

    .mypage--dashboard .mypage_content_lead {
        font-size: .9375rem;
    }

    .mypage--dashboard .mypage_store_buttons {
        flex-direction: column;
        gap: 1.6rem;
    }

    .mypage--dashboard .mypage_store_button {
        width: 11rem;
    }

    .mypage--dashboard .mypage_license_box {
        margin-top: 1.5rem;
        padding: 1.25rem .75rem;
    }

    .mypage--dashboard .mypage_activation_code {
        font-size: clamp(1.5rem, 7vw, 2rem);
        letter-spacing: .04em;
    }

    .mypage--dashboard .mypage_action_button {
        width: 100%;
        min-width: 0;
    }

    .mypage--dashboard .mypage_account_actions {
        flex-direction: column;
    }

    .mypage--dashboard .mypage_content_notice,
    .mypage--dashboard .mypage_document_box {
        padding: 1rem;
    }

    .mypage--dashboard .mypage_footer {
        padding: 2rem 1rem 1.25rem;
    }

    .mypage--dashboard .mypage_footer_navigation {
        display: grid;
        gap: .25rem;
    }

    .mypage--dashboard .mypage_footer_navigation span {
        justify-content: center;
    }

    .mypage--dashboard .br_sp {
        display: block;
    }
}

@media (max-width: 374px) {
    .mypage--dashboard .mypage_inner,
    .mypage--dashboard .mypage_header_inner {
        width: min(100% - 1.5rem, 45rem);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    color: #0f766e;
}

button,
input {
    font: inherit;
}

:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

.mypage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7f9;
}

.mypage-header {
    background: #fff;
    border-bottom: 1px solid #dfe4e8;
}

.mypage-header__inner {
    width: min(100% - 40px, 960px);
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mypage-brand {
    color: #163b3a;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
}

.mypage-header__customer {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #52606d;
    font-size: .9rem;
    font-weight: 600;
}

.text-button {
    padding: 0;
    color: #0f766e;
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.mypage-main {
    width: min(100% - 40px, 840px);
    margin: 0 auto;
    padding: 56px 0 72px;
    flex: 1;
}

.mypage-footer {
    padding: 24px;
    color: #fff;
    background: #173f3d;
    text-align: center;
    font-size: .75rem;
}

.page-heading {
    margin-bottom: 28px;
}

.page-heading h1,
.panel h1 {
    margin: 4px 0 12px;
    color: #163b3a;
    font-size: clamp(1.6rem, 4vw, 2.15rem);
}

.page-heading p,
.lead {
    line-height: 1.8;
}

.eyebrow {
    margin: 0;
    color: #0f766e;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.panel,
.disclosure {
    background: #fff;
    border: 1px solid #dfe4e8;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgb(25 52 50 / 6%);
}

.panel {
    padding: 32px;
}

.panel--narrow {
    max-width: 620px;
    margin: 0 auto;
}

.panel__link {
    margin: 22px 0 0;
    text-align: center;
}

.section-list {
    display: grid;
    gap: 18px;
}

.disclosure {
    overflow: hidden;
}

.disclosure summary {
    padding: 22px 26px;
    color: #163b3a;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
}

.disclosure[open] summary {
    border-bottom: 1px solid #e7ebee;
}

.disclosure__body {
    padding: 24px 26px 28px;
}

.subheading {
    margin: 0 0 12px;
    font-size: 1rem;
}

.data-list {
    margin: 0;
    padding: 6px 26px 18px;
}

.data-list > div {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #edf0f2;
}

.data-list > div:last-child {
    border-bottom: 0;
}

.data-list dt {
    color: #64727d;
    font-size: .875rem;
    font-weight: 700;
}

.data-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.status-chip {
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    color: #155e55;
    background: #e3f4ef;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

.license__value {
    padding: 16px;
    background: #f3f7f6;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
}

.button-row,
.procedure-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    min-height: 46px;
    padding: 11px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button--full {
    width: 100%;
}

.button--primary {
    color: #fff;
    background: #0f766e;
}

.button--secondary {
    color: #155e55;
    background: #fff;
    border-color: #72a8a2;
}

.button--danger {
    color: #fff;
    background: #a93232;
}

.button--danger-outline {
    color: #962d2d;
    background: #fff;
    border-color: #c77a7a;
}

.button:hover {
    filter: brightness(.95);
}

.form {
    display: grid;
    gap: 22px;
    margin-top: 28px;
}

.field {
    display: grid;
    gap: 8px;
}

.field label {
    color: #263c3a;
    font-weight: 700;
}

.field input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    color: #1f2937;
    background: #fff;
    border: 1px solid #9aa7b0;
    border-radius: 6px;
}

.field input[aria-invalid="true"] {
    border-color: #b42318;
}

.field__error {
    margin: 0;
    color: #b42318;
    font-size: .875rem;
}

.notice,
.warning {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 8px;
    line-height: 1.6;
}

.notice {
    color: #155e55;
    background: #e3f4ef;
    border: 1px solid #aad6ca;
}

.notice--success {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
}

.warning {
    color: #7a2e0e;
    background: #fff3e8;
    border: 1px solid #ebc39e;
}

.assistive-message {
    min-height: 1.5em;
    margin-bottom: 0;
    color: #155e55;
}

.procedures h2 {
    margin-top: 0;
    color: #163b3a;
}

.security-note {
    margin-top: 26px;
    padding: 20px;
    background: #f3f7f6;
    border-radius: 8px;
}

.security-note h3,
.security-note p,
.other-procedures h3 {
    margin: 0;
}

.security-note p {
    margin-top: 8px;
}

.other-procedures {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #dfe4e8;
}

.other-procedures h3 {
    margin-bottom: 16px;
}

.complete {
    text-align: center;
}

.complete__mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0f766e;
    border-radius: 50%;
    font-size: 1.8rem;
}

.complete__date {
    color: #163b3a;
    font-size: 1.2rem;
    font-weight: 800;
}

@media (max-width: 640px) {
    .mypage-header__inner,
    .mypage-main {
        width: min(100% - 28px, 840px);
    }

    .mypage-header__inner {
        min-height: 64px;
    }

    .mypage-header__customer > span {
        display: none;
    }

    .mypage-main {
        padding: 32px 0 48px;
    }

    .panel {
        padding: 22px 18px;
    }

    .disclosure summary {
        padding: 19px 18px;
    }

    .disclosure__body {
        padding: 20px 18px 24px;
    }

    .data-list {
        padding: 4px 18px 14px;
    }

    .data-list > div {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 13px 0;
    }

    .procedure-links,
    .button-row {
        flex-direction: column;
    }

    .procedure-links .button,
    .button-row .button {
        width: 100%;
    }
}

.mypage--account .account_form {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.mypage--account .account_form_group {
    margin: 0;
    scroll-margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--mypage-lp-border);
    border-radius: .75rem;
    background: #fff;
}

.mypage--account .account_form_group legend {
    padding: 0 .5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.mypage--account .account_form_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mypage--account .account_form_grid label {
    display: grid;
    gap: .45rem;
    font-weight: 700;
}

.mypage--account .account_form_grid input,
.mypage--account .account_form_grid select {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .8rem;
    border: 1px solid var(--mypage-lp-border);
    border-radius: .5rem;
    background: #fff;
    color: inherit;
    font: inherit;
}

.mypage--account .account_form_wide {
    grid-column: 1 / -1;
}

.mypage--account .account_visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mypage--account .account_email_domain_title {
    display: block;
    margin-bottom: .45rem;
    font-weight: 700;
}

.mypage--account .account_email_domain_row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
}

.mypage--account .account_email_domain_separator {
    font-weight: 700;
}

.mypage--account .account_email_domain_other {
    display: grid;
    width: min(100%, 22rem);
    margin-top: .75rem;
    gap: .45rem;
    font-weight: 700;
}

.mypage--account .account_email_domain_other[hidden] {
    display: none;
}

.mypage--account .account_field_error,
.mypage--account .account_form_error {
    color: #a52828;
    font-weight: 700;
}

.mypage--account .account_form_actions {
    display: flex;
    justify-content: center;
}

.mypage--account .account_form_actions button {
    min-width: 16rem;
    min-height: 3.25rem;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: .5rem;
    background: var(--mypage-lp-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mypage--account .mypage_guest_link {
    margin: 1.5rem 0 0;
    text-align: center;
}

.mypage--guest .account_section {
    width: min(100%, 38.75rem);
}

.mypage--account .mypage_guest_link a {
    color: var(--mypage-lp-primary-dark);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: .25rem;
}

.mypage--account .mypage_guest_link a:hover {
    color: var(--mypage-lp-primary-dark);
}

.mypage--account .notice {
    width: min(100% - 3rem, 60rem);
    margin: 0 auto 1.5rem;
    color: var(--mypage-lp-primary-dark);
    background: var(--mypage-lp-primary-light);
    border: 1px solid #bfe1f4;
}

@media (max-width: 700px) {
    .mypage--account .account_form_grid {
        grid-template-columns: 1fr;
    }

    .mypage--account .account_form_wide {
        grid-column: auto;
    }

    .mypage--account .notice {
        width: min(100% - 2rem, 45rem);
    }
}