.message-page {
    --message-ink: var(--recruit-ink);
    --message-cyan: #0ea5e9;
    --message-teal: #08b8cf;
    --message-nursing-accent: var(--role-nurse);
    --message-nursing-soft: var(--role-nurse-soft);
    --message-nursing-border: var(--role-nurse-border);
    --message-care-accent: var(--role-care-worker);
    --message-care-soft: var(--role-care-worker-soft);
    --message-care-border: var(--role-care-worker-border);
    --message-line: var(--message-nursing-border);
}

.message-wide-container {
    width: min(100% - 3rem, 75rem);
    margin-inline: auto;
}

.message-eyebrow {
    margin: 0 0 1.25rem;
    color: var(--message-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    line-height: 1.5;
}

.message-hero {
    position: relative;
    min-height: clamp(560px, 72vh, 760px);
    overflow: hidden;
    display: grid;
    align-items: center;
}

.message-hero__image,
.message-hero__overlay {
    position: absolute;
    inset: 0;
}

.message-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% center;
}

.message-hero__overlay {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.46) 42%, rgba(255, 255, 255, 0.96) 80%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(231, 251, 255, 0.3));
}

.message-hero__inner {
    position: relative;
    width: min(100% - 3rem, 75rem);
    margin: 0 auto;
    padding: clamp(5rem, 10vw, 8rem) 0;
    display: grid;
    justify-items: end;
}

.message-hero__inner > * {
    width: min(100%, 40rem);
}

.message-hero h1 {
    color: var(--message-ink);
    font-size: clamp(2.8rem, 6.3vw, 5.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
}

.message-hero__lead {
    margin: 1.5rem 0 0;
    color: #475569;
    font-size: clamp(1rem, 1.55vw, 1.2rem);
    line-height: 2;
}

.message-role-picker {
    padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(5.5rem, 10vw, 9rem);
    background: #fff;
}

.message-role-picker .message-wide-container {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}

.message-role-picker__intro h2 {
    max-width: 29rem;
    margin: 0;
    color: var(--message-ink);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.38;
}

.message-role-picker__intro > p:last-child {
    max-width: 30rem;
    margin: 1.5rem 0 0;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 2;
}

.message-role-links {
    display: grid;
    gap: 0.9rem;
}

.message-role-link {
    position: relative;
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.25rem;
    gap: 1rem;
    align-items: center;
    min-height: 7.35rem;
    padding: 1.1rem 1.25rem 1.1rem 1.35rem;
    border: 1px solid var(--message-line);
    border-radius: 1.5rem;
    overflow: hidden;
    color: var(--message-ink);
    background: linear-gradient(135deg, #f5fdff 0%, #fff 78%);
    box-shadow: 0 18px 55px rgba(7, 81, 95, 0.07);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.message-role-link::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.35rem;
    border-radius: 1.5rem 0 0 1.5rem;
    background: var(--message-nursing-accent);
}

.message-role-link--care::before {
    background: var(--message-care-accent);
}

.message-role-link--care {
    border-color: var(--message-care-border);
    background: linear-gradient(135deg, var(--message-care-soft) 0%, #fff 78%);
}

.message-role-link:hover,
.message-role-link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--message-cyan);
    box-shadow: 0 24px 65px rgba(7, 81, 95, 0.13);
}

.message-role-link--nursing:hover,
.message-role-link--nursing:focus-visible {
    border-color: var(--message-nursing-accent);
}

.message-role-link--care:hover,
.message-role-link--care:focus-visible {
    border-color: var(--message-care-accent);
}

.message-role-link__number {
    color: #94a3b8;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.message-role-link__body {
    display: grid;
    gap: 0.25rem;
}

.message-role-link__en {
    color: var(--message-nursing-accent);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.message-role-link--care .message-role-link__en {
    color: var(--message-care-accent);
}

.message-role-link strong {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
}

.message-role-link small {
    color: #64748b;
    font-size: 0.84rem;
}

.message-role-link > i {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(14, 165, 233, 0.34);
    border-radius: 999px;
    color: var(--message-nursing-accent);
    transition: transform 220ms ease, background-color 220ms ease;
}

.message-role-link--care > i {
    border-color: var(--role-care-worker-border);
    color: var(--message-care-accent);
}

.message-role-link:hover > i,
.message-role-link:focus-visible > i {
    transform: translate(0.2rem, 0.2rem);
    background: rgba(14, 165, 233, 0.08);
}

.message-role-link--care:hover > i,
.message-role-link--care:focus-visible > i {
    background: rgba(132, 204, 22, 0.1);
}

.message-voices {
    scroll-margin-top: 7rem;
    padding: clamp(6rem, 11vw, 10rem) 0;
}

.message-voices--nursing {
    background: linear-gradient(180deg, var(--message-nursing-soft) 0%, #fff 74%);
}

.message-voices--care {
    background: linear-gradient(180deg, var(--message-care-soft) 0%, #fff 74%);
}

.message-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.message-section-heading h2 {
    margin: 0;
    color: var(--message-ink);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.message-section-heading > p {
    max-width: 35rem;
    justify-self: end;
    margin: 0;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 2.05;
}

.message-profile {
    overflow: hidden;
    border: 1px solid var(--message-line);
    border-radius: 1.7rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(7, 81, 95, 0.09);
}

.message-voices--care .message-profile {
    border-color: var(--role-care-worker-border);
    box-shadow: 0 24px 70px rgba(130, 90, 25, 0.07);
}

.message-profile--featured {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
    align-items: start;
    margin-bottom: 1.25rem;
}

.message-profile__media {
    position: relative;
    min-height: 0;
    height: clamp(20rem, 31vw, 27rem);
    margin: 0;
    background: #dff6fa;
}

.message-profile__media::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 45%, rgba(7, 81, 95, 0.34) 100%);
}

.message-profile__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0.9;
    filter: saturate(0.86) contrast(0.96);
}

.message-profile__media figcaption {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.9rem;
    color: #fff;
    background: rgba(7, 81, 95, 0.64);
    backdrop-filter: blur(12px);
    font-size: 0.72rem;
    line-height: 1.5;
    z-index: 2;
}

.message-profile__media figcaption span:first-child {
    color: #bff5ff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.message-voices--care .message-profile__media figcaption span:first-child {
    color: #d9f99d;
}

.message-profile__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.message-profile__eyebrow {
    margin-bottom: 0.5rem;
    color: var(--message-cyan);
    font-size: 0.7rem;
}

.message-voices--care .message-profile__eyebrow {
    color: var(--message-care-accent);
}

.message-profile__meta {
    margin: 0 0 1.3rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.6;
}

.message-profile__body h3 {
    margin: 0;
    color: var(--message-ink);
    font-size: clamp(1.55rem, 3vw, 2.7rem);
    font-weight: 800;
    line-height: 1.48;
    /* Keep interview headlines flowing naturally instead of balancing lines with large right gaps. */
    overflow-wrap: normal;
    text-wrap: pretty;
}

.message-profile__title-part {
    display: inline;
}

.message-profile:not(.message-profile--featured) .message-profile__body h3 {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.message-profile__body blockquote {
    position: relative;
    margin: 1.5rem 0 0;
    padding-left: 1.15rem;
    border-left: 3px solid var(--message-cyan);
    color: #475569;
    font-size: 1rem;
    line-height: 1.95;
}

.message-voices--care .message-profile__body blockquote {
    border-left-color: var(--message-care-accent);
}

.message-profile__details {
    --message-details-accent: var(--message-cyan);
    margin-top: 2rem;
    border-top: 1px solid rgba(8, 184, 207, 0.16);
}

.message-voices--care .message-profile__details {
    --message-details-accent: var(--message-care-accent);
    border-top-color: var(--role-care-worker-border);
}

.message-profile__details summary {
    display: flex;
    min-height: 3.7rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 -0.55rem;
    padding: 0.72rem 0.55rem;
    border-radius: 0.8rem;
    color: var(--message-ink);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 800;
    list-style: none;
    transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.message-profile__details summary::-webkit-details-marker {
    display: none;
}

.message-profile__details summary::after {
    order: 2;
    content: "開く";
    margin-left: auto;
    color: var(--message-details-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    transition: color 200ms ease;
}

.message-profile__details summary :is(i, svg) {
    order: 3;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--message-details-accent) 44%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--message-details-accent) 8%, transparent);
    color: var(--message-details-accent);
    transition: transform 240ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.message-profile__details summary:hover,
.message-profile__details summary:focus-visible {
    background: color-mix(in srgb, var(--message-details-accent) 8%, transparent);
    color: var(--message-details-accent);
}

.message-profile__details summary:hover::after,
.message-profile__details summary:focus-visible::after {
    color: var(--message-details-accent);
}

.message-profile__details summary:hover :is(i, svg),
.message-profile__details summary:focus-visible :is(i, svg) {
    border-color: var(--message-details-accent);
    background: var(--message-details-accent);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--message-details-accent) 28%, transparent);
    transform: translateY(-1px) scale(1.06);
}

.message-profile__details summary:active :is(i, svg) {
    transform: scale(0.94);
}

.message-profile__details summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--message-details-accent) 42%, transparent);
    outline-offset: 3px;
}

.message-profile__details[open] summary {
    background: color-mix(in srgb, var(--message-details-accent) 8%, transparent);
    color: var(--message-details-accent);
}

.message-profile__details[open] summary::after {
    content: "閉じる";
}

.message-profile__details[open] summary :is(i, svg) {
    border-color: var(--message-details-accent);
    background: var(--message-details-accent);
    color: #fff;
    transform: rotate(45deg);
}

.message-profile__details > div {
    display: grid;
    gap: 0.85rem;
    padding: 0 0 1.2rem;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.95;
}

.message-profile__details[open] > div {
    animation: message-details-reveal 280ms ease-out both;
}

@keyframes message-details-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-profile__details p {
    margin: 0;
}

.message-profile__details strong {
    color: var(--message-ink);
}

.message-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.message-profile-grid .message-profile__media {
    height: clamp(13rem, 18vw, 16rem);
    min-height: 0;
    aspect-ratio: auto;
}

.message-profile-grid .message-profile__body {
    padding: clamp(1.65rem, 3vw, 2.5rem);
}

.message-profile-grid .message-profile__meta {
    margin-bottom: 1rem;
}

.message-day-section__copy h2 {
    margin: 0;
    font-size: clamp(2.1rem, 4.8vw, 4.2rem);
    font-weight: 800;
    line-height: 1.36;
}

.message-text-link {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.75rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid rgba(14, 165, 233, 0.4);
    border-radius: 999px;
    background: rgba(248, 253, 255, 0.96);
    color: #07515f;
    box-shadow: 0 10px 24px rgba(7, 81, 95, 0.12);
    font-weight: 800;
    transition: gap 220ms ease, color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.message-text-link:hover,
.message-text-link:focus-visible {
    gap: 0.9rem;
    color: #fff;
    border-color: var(--message-cyan);
    background: var(--message-cyan);
    box-shadow: 0 14px 30px rgba(14, 165, 233, 0.28);
    transform: translateY(-2px);
}

.message-text-link:focus-visible {
    outline: 3px solid rgba(125, 211, 252, 0.72);
    outline-offset: 3px;
}

.message-text-link i {
    width: 1rem;
}

.message-day-section {
    padding: clamp(5.5rem, 10vw, 9rem) 0;
    background: #fff;
}

.message-day-section__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
}

.message-day-section__media {
    margin: 0;
}

.message-day-section__media img {
    display: block;
    width: 100%;
    max-height: 36rem;
    border-radius: 1.5rem;
    object-fit: cover;
    box-shadow: 0 22px 60px rgba(7, 81, 95, 0.14);
}

.message-day-section__copy > p:not(.message-eyebrow) {
    max-width: 32rem;
    margin: 1.6rem 0 0;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 2.05;
}

.message-cta-section {
    padding: clamp(5.5rem, 10vw, 9rem) 0;
    color: #fff;
    background: linear-gradient(135deg, #0f91be 0%, #08b8a4 100%);
}

.message-cta-section__inner {
    text-align: center;
}

.message-cta-section .message-eyebrow {
    color: #c5fbff;
}

.message-cta-section h2 {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.35;
}

.message-cta-section__inner > p:not(.message-eyebrow) {
    max-width: 38rem;
    margin: 1.4rem auto 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.98rem;
    line-height: 2;
}

.message-cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2.25rem;
}

.message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 13rem;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    font-weight: 800;
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.message-button:hover,
.message-button:focus-visible {
    transform: translateY(-2px);
}

.message-button i {
    width: 1rem;
}

.message-button--light {
    color: var(--message-ink);
    background: #fff;
}

.message-button--light:hover,
.message-button--light:focus-visible {
    background: #ecfeff;
}

.message-button--outline {
    border: 1px solid rgba(255, 255, 255, 0.56);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.message-button--outline:hover,
.message-button--outline:focus-visible {
    color: var(--message-cyan);
    background: #fff;
}

@media (min-width: 1025px) {
    .message-page .max-w-7xl {
        max-width: 75rem;
    }
}

@media (max-width: 1024px) {
    .message-hero__overlay {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.72) 60%, rgba(255, 255, 255, 0.98) 100%),
            linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.26));
    }

    .message-hero__inner {
        align-items: end;
        justify-items: start;
        padding-top: clamp(17rem, 46vw, 25rem);
    }

    .message-role-picker .message-wide-container,
    .message-section-heading,
    .message-profile--featured,
    .message-day-section__layout {
        grid-template-columns: 1fr;
    }

    .message-role-picker .message-wide-container {
        gap: 3rem;
    }

    .message-role-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .message-role-link {
        grid-template-columns: 2.2rem minmax(0, 1fr) 2.1rem;
        min-height: 7.2rem;
        padding: 1rem 1rem 1rem 1.15rem;
    }

    .message-role-link small {
        font-size: 0.78rem;
        line-height: 1.55;
    }

    .message-section-heading {
        gap: 1.5rem;
    }

    .message-section-heading > p {
        justify-self: start;
    }

    .message-profile--featured .message-profile__media {
        height: 22rem;
    }

    .message-day-section__media img {
        max-height: 28rem;
    }
}

@media (max-width: 640px) {
    .message-wide-container,
    .message-hero__inner {
        width: min(100% - 2rem, 75rem);
    }

    .message-hero {
        min-height: 640px;
    }

    .message-hero__image {
        object-position: 47% center;
    }

    .message-hero__inner {
        padding-top: 20rem;
    }

    .message-role-picker,
    .message-voices,
    .message-day-section,
    .message-cta-section {
        padding-top: 4.75rem;
        padding-bottom: 4.75rem;
    }

    .message-role-link {
        grid-template-columns: 2.2rem minmax(0, 1fr) 2.1rem;
        gap: 0.8rem;
        min-height: 7rem;
        padding: 1rem 1rem 1rem 1.2rem;
        border-radius: 1.1rem;
    }

    .message-role-links {
        grid-template-columns: 1fr;
    }

    .message-role-link strong {
        font-size: 1.2rem;
    }

    .message-role-link small {
        font-size: 0.76rem;
    }

    .message-section-heading h2 {
        font-size: 2.6rem;
    }

    .message-profile,
    .message-profile--featured {
        border-radius: 1.2rem;
    }

    .message-profile-grid {
        grid-template-columns: 1fr;
    }

    .message-profile__media,
    .message-profile--featured .message-profile__media,
    .message-profile-grid .message-profile__media {
        height: 15.5rem;
        min-height: 0;
        aspect-ratio: auto;
    }

    .message-profile__media figcaption {
        right: 0.8rem;
        bottom: 0.8rem;
        left: 0.8rem;
        padding: 0.6rem 0.75rem;
        font-size: 0.67rem;
    }

    .message-profile__body,
    .message-profile-grid .message-profile__body {
        padding: 1.5rem 1.25rem 1.75rem;
    }

    .message-profile__body h3,
    .message-profile:not(.message-profile--featured) .message-profile__body h3 {
        font-size: 1.45rem;
    }

    .message-profile--care-night .message-profile__title-part {
        display: block;
    }

    .message-profile__body blockquote {
        font-size: 0.92rem;
    }

    .message-day-section__copy h2 {
        font-size: 2.25rem;
    }

    .message-day-section__media img {
        max-height: 22rem;
        border-radius: 1.1rem;
    }

    .message-cta-section h2 {
        font-size: 2rem;
    }

    .message-cta-section__actions {
        align-items: stretch;
        flex-direction: column;
    }

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

@media (prefers-reduced-motion: reduce) {
    .message-role-link,
    .message-role-link > i,
    .message-profile__details summary,
    .message-profile__details summary :is(i, svg),
    .message-profile__details[open] > div,
    .message-button,
    .message-text-link {
        transition: none;
        animation: none;
    }
}