:root {
    --ml-navy: #16306b;
    --ml-navy-dark: #0f2453;
    --ml-blue: #1f6fd1;
    --ml-border: #cfd8e6;
    --ml-text: #1c2b4a;
    --ml-muted: #8792a6;
    --ml-bg: #f7f9fc;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: var(--ml-text);
    background: var(--ml-bg);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Desktop ---------- */
.ml-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--ml-bg);
}
.ml-page::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 22%, rgba(255,255,255,.25) 42%, rgba(255,255,255,0) 58%),
        linear-gradient(to bottom, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%);
}
.ml-inner {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    --ml-pad-x: clamp(32px, 6vw, 110px);
    padding: 24px var(--ml-pad-x);
    /* Content scales with the window (capped by height so it always fits on one screen) */
    --ml-card-w: clamp(340px, min(31vw, 55vh), 600px);
    --ml-text-sm: clamp(13px, min(.95vw, 1.7vh), 17px);
    --ml-field-h: clamp(46px, min(3.2vw, 5.6vh), 60px);
    display: grid;
    grid-template-columns: var(--ml-card-w) 1fr;
    grid-template-areas: "logo copy" "card copy";
    --ml-gap: clamp(40px, 4.5vw, 80px);
    column-gap: var(--ml-gap);
    row-gap: 20px;
    align-items: start;
}

.ml-hero { display: contents; }
.ml-logo { grid-area: logo; text-align: center; }
.ml-logo img { width: clamp(230px, min(22vw, 38vh), 420px); max-width: 100%; height: auto; }

.ml-copy {
    grid-area: copy;
    position: relative;
    padding-top: clamp(24px, 3vw, 56px);
    /* Laptop (35.2% of the image width) about as wide as the card. The other terms keep the
       photo big enough to reach the bottom and the right edge (80.5% of it lies right of the laptop) */
    --ml-photo-w: max(
        var(--ml-card-w) * 2.9,
        150vh,
        (100vw - max(0px, (100vw - 1480px) / 2) - var(--ml-pad-x) - var(--ml-card-w) + 40px) / .805 + 20px
    );
}
/* Photo is anchored to the headline like the mockup: laptop top (41.7% of the image height)
   just below the tagline, laptop left edge (19.5% of the image width) just behind the card. */
.ml-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: var(--ml-photo-w);
    aspect-ratio: 16 / 9;
    top: calc(100% + 28px - var(--ml-photo-w) * .2346);
    left: calc(-1 * var(--ml-gap) - 40px - var(--ml-photo-w) * .195);
    background: url(/images/login/login-bg.jpg) center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 20%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 20%);
    mask-composite: intersect;
}
.ml-copy h1 {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: clamp(36px, min(4.4vw, 7vh), 88px);
    line-height: 1.45;
    letter-spacing: .04em;
    color: var(--ml-navy-dark);
    margin: 0;
}
.ml-copy p { margin: 18px 0 0; font-size: clamp(16px, min(1.4vw, 2.4vh), 26px); letter-spacing: .03em; color: #5d6b85; }

.ml-card {
    grid-area: card;
    background: #fff;
    border-radius: 12px;
    padding: clamp(24px, min(2.2vw, 3.8vh), 40px) clamp(22px, 2.2vw, 40px) clamp(20px, min(1.8vw, 3.2vh), 34px);
    box-shadow: 0 12px 32px rgba(20,40,80,.12);
}
.ml-card h2 { margin: 0 0 18px; font-size: clamp(20px, min(1.7vw, 3vh), 32px); font-weight: 700; color: var(--ml-navy-dark); }

.ml-group { margin-bottom: clamp(16px, 1.6vh, 22px); }
.ml-label { display: block; margin-bottom: 6px; font-size: var(--ml-text-sm); font-weight: 700; }
.ml-input { position: relative; }
.ml-input input {
    width: 100%;
    height: var(--ml-field-h);
    padding: 0 14px 0 44px;
    font: inherit;
    font-size: clamp(14px, min(1vw, 1.8vh), 18px);
    color: var(--ml-text);
    border: 1px solid var(--ml-border);
    border-radius: 6px;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ml-input input.has-toggle { padding-right: 44px; }
.ml-input input::placeholder { color: var(--ml-muted); }
.ml-input input:focus { border-color: var(--ml-blue); box-shadow: 0 0 0 3px rgba(31,111,209,.15); }
.ml-input input.is-invalid { border-color: #d93c3c; }
.ml-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--ml-blue);
    pointer-events: none;
}
.ml-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 5px;
    border: 0;
    background: none;
    color: #6b7280;
    cursor: pointer;
}
.ml-toggle svg { width: 100%; height: 100%; }
.ml-toggle.is-active { color: var(--ml-blue); }
.ml-error { margin-top: 6px; font-size: 12px; color: #d93c3c; }

.ml-remember { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: var(--ml-text-sm); cursor: pointer; }
.ml-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--ml-navy); }

.ml-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--ml-field-h) + 4px);
    border: 0;
    border-radius: 999px;
    background: var(--ml-navy);
    color: #fff;
    font: inherit;
    font-size: clamp(16px, min(1.15vw, 2vh), 20px);
    font-weight: 700;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .15s;
}
.ml-btn:hover { background: var(--ml-navy-dark); }
.ml-btn svg { position: absolute; right: 22px; width: 20px; height: 20px; }

.ml-forgot {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: var(--ml-text-sm);
    font-weight: 700;
    color: var(--ml-blue);
    text-decoration: none;
}
.ml-forgot:hover { text-decoration: underline; }
.ml-forgot--mobile { display: none; }

.ml-divider { border: 0; border-top: 1px solid #e3e8f0; margin: 20px 0 16px; }
.ml-register { text-align: center; font-size: var(--ml-text-sm); }
.ml-register a { margin-left: 14px; font-weight: 700; color: var(--ml-blue); text-decoration: none; }
.ml-register a:hover { text-decoration: underline; }
.ml-sep { display: none; margin: 0 14px; color: #b5bfcc; }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
    .ml-page {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--ml-bg);
    }
    .ml-page::after,
    .ml-copy::before { display: none; }
    /* Single-screen column: the hero photo absorbs the leftover height */
    .ml-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0 16px 22px;
    }
    .ml-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        flex: 1 0 auto;
        margin: 0 -16px;
        padding: 18px 16px 60px;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: var(--ml-bg);
        /* In login-bg.jpg the laptop spans 42%–72% of the image height (30%).
           Size the photo so the laptop fits between the headline (--ml-head-h from the hero top)
           and the card (which overlaps the hero bottom by 36px + 8px breathing room). */
        --ml-head-h: 171px;
        --ml-photo-h: clamp(58vw, calc((100% - 44px - var(--ml-head-h)) / .3), 100vw);
    }
    .ml-hero::before,
    .ml-hero::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }
    .ml-hero::before {
        left: 55%;
        bottom: calc(44px - var(--ml-photo-h) * .28);
        height: var(--ml-photo-h);
        aspect-ratio: 16 / 9;
        transform: translateX(-55%);
        background: url(/images/login/login-bg.jpg) center / cover no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
    }
    .ml-hero::after {
        inset: 0;
        background: linear-gradient(to bottom, rgba(247,249,252,.6) 0%, rgba(247,249,252,0) 45%, rgba(247,249,252,0) 86%, var(--ml-bg) 100%);
    }
    .ml-logo img { width: 130px; }
    .ml-copy { padding-top: 0; text-align: center; }
    .ml-copy h1 { font-size: 23px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; }
    .ml-copy .pc-only { display: none; }
    .ml-copy p { margin-top: 4px; font-size: 13px; color: #6b7790; }

    .ml-card { position: relative; margin-top: -36px; padding: 18px 18px 14px; border-radius: 12px; }
    .ml-card h2 { margin-bottom: 12px; font-size: 20px; }
    .ml-group { margin-bottom: 10px; }
    .ml-label { margin-bottom: 4px; }
    .ml-input input { height: 42px; font-size: 16px; }
    .ml-remember { margin: 0 0 10px; }
    .ml-btn { height: 46px; }
    .ml-divider { margin: 12px 0 10px; }

    .ml-forgot--pc { display: none; }
    .ml-forgot--mobile { display: block; margin-top: 16px; }
    .ml-register a { margin-left: 0; }
    .ml-sep { display: inline; }
}

/* Short phones (iPhone SE / small Android) */
@media (max-width: 767.98px) and (max-height: 600px) {
    .ml-inner { padding-bottom: 12px; }
    .ml-hero { gap: 4px; padding-top: 10px; }
    .ml-logo img { width: 110px; }
    .ml-copy h1 { font-size: 20px; line-height: 1.4; }
    .ml-copy p { display: none; }
    .ml-card { padding: 16px 16px 12px; }
    .ml-card h2 { margin-bottom: 8px; font-size: 18px; }
    .ml-group { margin-bottom: 8px; }
    .ml-input input { height: 40px; }
    .ml-remember { margin: 0 0 10px; }
    .ml-btn { height: 44px; }
    .ml-divider { margin: 10px 0 8px; }
    .ml-forgot--mobile { margin-top: 10px; }
}