/* ログイン画面（左: システムの紹介 / 右: ログイン） */
:root { --lg-teal: #13b3a0; --lg-cyan: #1aa6c4; --lg-blue: #0e89c4; --lg-text: #1f2a37; --lg-sub: #5b6675; --lg-border: #d9e2ea; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.lg-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; color: var(--lg-text); background: #fff; }
.lg { display: grid; grid-template-columns: 55fr 45fr; min-height: 100vh; }

/* 左 */
.lg-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem 4.5rem; color: #fff;
    background: linear-gradient(160deg, #15b8a2 0%, #17a9b6 45%, #1494c4 80%, #0f86c2 100%); }
/* 写真の代わりに、ぼかした光で奥行きを出す */
.lg-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; }
.lg-glow.g1 { width: 520px; height: 520px; left: -160px; top: -120px; background: #6fe3cf; }
.lg-glow.g2 { width: 460px; height: 460px; right: -140px; top: 18%; background: #7fd0f0; opacity: .35; }
.lg-glow.g3 { width: 600px; height: 380px; left: 10%; bottom: -200px; background: #0a6fa8; opacity: .4; }
.lg-glow.g4 { width: 260px; height: 260px; left: 55%; top: -60px; background: #e6fbff; opacity: .25; }
.lg-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 140px); }
.lg-brand-inner { position: relative; z-index: 1; width: 100%; max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* 題名は1行に収める（画面の幅に合わせて文字を小さくする） */
.lg-title { font-size: clamp(1.15rem, 2.15vw, 1.9rem); font-weight: 800; letter-spacing: .04em; white-space: nowrap; margin: 0 0 2rem; text-shadow: 0 2px 12px rgba(0, 60, 80, .25); }
.lg-features { width: 100%; list-style: none; margin: 0; padding: 1.6rem 1.9rem; text-align: left; border-radius: 16px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 50, 80, .15); }
.lg-features li { display: flex; align-items: center; gap: 1rem; font-weight: 700; font-size: 1.02rem; padding: .62rem 0; letter-spacing: .03em; }
.lg-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem;
    background: rgba(255, 255, 255, .88); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.lg-copy { position: absolute; bottom: 1.6rem; left: 0; right: 0; text-align: center; margin: 0; font-size: .82rem; opacity: .9; z-index: 1; }

/* 右 */
.lg-main { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.lg-box { width: 100%; max-width: 360px; }
.lg-logo { display: flex; justify-content: center; align-items: center; min-height: 96px; margin-bottom: 2.2rem; }
.lg-logo img { max-width: 100%; max-height: 110px; object-fit: contain; }
.lg-clinic { font-size: 1.6rem; font-weight: 800; color: #0f7f8f; letter-spacing: .05em; text-align: center; line-height: 1.35; word-break: break-word; }
.lg-h { font-size: 1.85rem; font-weight: 800; margin: 0 0 .4rem; }
.lg-sub { color: var(--lg-sub); margin: 0 0 2rem; font-size: .95rem; }
.lg-label { display: block; font-weight: 700; font-size: .9rem; margin: 1.1rem 0 .45rem; }
.lg-input { width: 100%; height: 50px; padding: 0 1rem; font: inherit; font-size: 1rem; border: 1.5px solid var(--lg-border); border-radius: 10px; background: #f8fafc; color: var(--lg-text); transition: border-color .2s, box-shadow .2s, background .2s; }
.lg-input::placeholder { color: #b0b8c2; }
.lg-input:focus { outline: none; border-color: var(--lg-teal); background: #fff; box-shadow: 0 0 0 3px rgba(19, 179, 160, .15); }
.lg-pw { position: relative; }
.lg-pw .lg-input { padding-right: 3rem; }
.lg-eye { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #4b5563; cursor: pointer; padding: .35rem; display: grid; }
.lg-check { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--lg-sub); margin: 1rem 0 0; cursor: pointer; }
.lg-check input { width: 16px; height: 16px; accent-color: var(--lg-teal); }
.lg-error { margin-top: 1rem; padding: .7rem .9rem; border-radius: 8px; background: #fef2f2; color: #b42318; font-size: .9rem; font-weight: 600; border: 1px solid #fecaca; }
.lg-btn { width: 100%; height: 54px; margin-top: 1.6rem; border: none; border-radius: 10px; cursor: pointer; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 800; letter-spacing: .1em;
    background: linear-gradient(90deg, var(--lg-teal) 0%, var(--lg-cyan) 55%, var(--lg-blue) 100%); box-shadow: 0 6px 16px rgba(14, 137, 196, .28); transition: transform .15s, box-shadow .15s, opacity .15s; }
.lg-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14, 137, 196, .35); }
.lg-btn:disabled { opacity: .6; cursor: default; transform: none; }
.lg-link { text-align: center; margin: 1.2rem 0 0; font-size: .88rem; }
.lg-link a { color: #0f7f8f; }
.lg-divider { display: flex; align-items: center; gap: .8rem; color: #9aa4b0; font-size: .82rem; margin: 1.4rem 0 1rem; }
.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: var(--lg-border); }
.lg-line { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 48px; border-radius: 10px; background: #06C755; color: #fff; text-decoration: none; font-weight: 700; margin-bottom: .6rem; }
.lg-line:hover { background: #05B04D; }
.lg-line-outline { background: #fff; color: #06C755; border: 2px solid #06C755; }
.lg-line-outline:hover { background: #f0fdf4; }
.lg-note { word-break: auto-phrase; text-wrap: pretty; font-size: .8rem; color: var(--lg-sub); line-height: 1.6; margin: .4rem 0 0; }
/* 文のかたまりの途中で改行しない（行末に1文字だけ残るのを防ぐ） */
.nb { display: inline-block; }
.lg-help { text-align: center; color: var(--lg-sub); font-size: .8rem; margin: 2.2rem 0 0; line-height: 1.7; }

/* スマートフォン: 紹介を上に小さく */
@media (max-width: 900px) {
    .lg { grid-template-columns: 1fr; }
    .lg-brand { padding: 2rem 1.25rem 3.2rem; }
    .lg-title { margin-bottom: 1.1rem; font-size: clamp(1.1rem, 5.6vw, 1.6rem); }
    .lg-features { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; padding: 1rem 1.1rem; }
    .lg-features li { font-size: .85rem; padding: .3rem 0; gap: .55rem; }
    .lg-ic { width: 30px; height: 30px; font-size: .9rem; }
    .lg-copy { bottom: .9rem; font-size: .75rem; }
    .lg-main { padding: 2rem 1.25rem 2.5rem; }
    .lg-logo { margin-bottom: 1.4rem; min-height: 64px; }
}