.text {
    text-align: center;
}

.auth-form {
    max-width: 420px;
    margin: 40px auto;
    padding: 32px;
    background: #fbfbfc;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* 各入力ブロック */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px; /* 余白 */
}

/* ラベル */
.form-group label {
    font-size: 0.9rem;
    margin-bottom: 0px; /* ラベルと箱との距離 */
    opacity: 0.7;
}

/* 入力ボックス */
.form-group input {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit; 
    transition: all 0.2s ease;
}

/* フォーカス時 */
.form-group input:focus {
    border-color: #888;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* ボタン */
.btn-primary {
    width: 60%;
    align-self: center;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-family: inherit; 
    font-size: 1rem;
    cursor: pointer;
    background: #111;
    color: #fff;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: #333;
}

.required {
    color: #c0392b;
    font-weight: bold;
    margin-left: 4px;
}

/* -------------パスワード可視化--------------- */
.password__input {
    width: 100%;
    outline: none;
    appearance: none;
    padding: 10px 44px 10px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.password-wrapper {
    max-width: 500px;
    position: relative;
}

.password__toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    width: 28px;
    height: 28px;
    border: none;
    padding: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Z'/></svg>") no-repeat center center;
    background-size: 75% auto;
    cursor: pointer;
}

.password__toggle.is-visible {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/></svg>");
}

@media (any-hover: hover) {
    .password__toggle:hover {
        opacity: 0.7;
    }
}