.ultla-wrap.hinotama-ultla-login{
    padding: 80px 0 80px;
}
.ultla-wrap.hinotama-ultla-login .container{
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
}
.ultla-wrap.hinotama-ultla-login p.lead{
    text-align: center;
    font-size: var(--font-size-sm);
}
.ultla-wrap.hinotama-ultla-login .register-form,
.ultla-wrap.hinotama-ultla-login .login-form,
.ultla-wrap.hinotama-ultla-login .password-reset-form{
    width: 80%;
    margin: 40px auto;
}
.ultla-wrap.hinotama-ultla-login .nu-controls{
    width: 80%;
    margin: 10px auto 20px;
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: center;
    justify-content: center;
}

.ultla-wrap.hinotama-ultla-login .nu-controls input[type="text"],
.ultla-wrap.hinotama-ultla-login .nu-controls input[type="email"],
.ultla-wrap.hinotama-ultla-login .nu-controls input[type="password"]{
    width: 80%;
    line-height: 1.6rem;
    font-size: var(--font-size-md);
    padding: 3px 8px;
    background-color: var(--ultla-green-bg-lite);
    border: none;
    border-radius: 3px;
}

.ultla-wrap.hinotama-ultla-login .input-note{
    color: var(--ultla-secondary2);
    font-size: 0.6rem;
    margin: 0;
}

.button-box{
    margin-top: 40px;
}

button.ultla-button {
    background: var(--ultla-orange);
    width: 275px;
    min-height: 50px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: none;
    color: var(--white);
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
    transition: 0.2s;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 auto;
}

button.ultla-button:hover {
    transform: scale(0.96);
}
.register-notice{
    width: 80%;
}
.register-notice,
.user-login-attention{
    border: 2px solid var(--ultla-green);
    padding: 20px;
    border-radius: 10px;
    margin: 40px auto 60px;
}
.ultla-wrap.hinotama-ultla-login a,
.user-login-attention a{
    color: var(--ultla-orange);
}


/* --- ラジオボタン全体のコンテナ --- */
.ultla-wrap.hinotama-ultla-login .nu-controls .input.radio {
    display: flex; /* ラベルを横並びにする */
    flex-wrap: wrap; /* 画面幅に応じて折り返す */
    gap: 12px; /* 各ボタンの間隔 */
}

/* --- 元のラジオボタンを非表示にする --- */
.ultla-wrap.hinotama-ultla-login .nu-controls .input.radio input[type="radio"] {
    display: none;
}

/* --- カスタムラジオボタン（ラベル）のスタイル --- */
.ultla-wrap.hinotama-ultla-login .nu-controls .input.radio label {
    /* 見た目 */
    display: inline-block;
    padding: 10px 24px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50px; /* 角を丸くして柔らかい印象に */
    text-align: center;
    white-space: nowrap;

    /* 操作性 */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* スムーズな変化のためのアニメーション */
    user-select: none; /* テキスト選択を無効に */
}

/* --- マウスホバー時のスタイル --- */
.ultla-wrap.hinotama-ultla-login .nu-controls .input.radio label:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

/* --- 選択されているボタンのスタイル --- */
.ultla-wrap.hinotama-ultla-login .nu-controls .input.radio input[type="radio"]:checked + label {
    background-color: var(--ultla-green); /* メインカラー（例: ブルー） */
    color: #ffffff;
    border-color: var(--ultla-green);
    font-weight: bold;
}

/* --- キーボード操作でフォーカスした時のスタイル（アクセシビリティ対応） --- */
.ultla-wrap.hinotama-ultla-login .nu-controls .input.radio input[type="radio"]:focus-visible + label {
    outline: 3px solid rgba(0, 122, 255, 0.5);
    outline-offset: 2px;
}

.ultla-wrap.hinotama-ultla-login .nu-controls.forerrors{
    margin: 0 auto;
}
.nu-row-td p.password-error,
.nu-row-td p.privacy-error{
    margin: 0;
}