@charset "utf-8";


.user-profile-forms {
    width: 100%;
}

.user-profile-forms .input-row {
    display: flex;
    gap: 10px; /* フィールド同士の隙間 */
    width: 100%;
    margin-bottom: 20px;

    /* スマホ時は縦に並べる */
    /* @media (max-width: 767px) {
        flex-direction: column;
        gap: 10px;
    } */
}

.user-profile-forms .input-field-wrap {
    flex: 1; /* 50%ずつ（半分ずつ）確保 */
    min-width: 0; /* 子要素のサイズに引きずられるのを防ぐ */
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-profile-forms .input-field-wrap .sub-label {
    white-space: nowrap; /* 「姓」が改行されないように */
}

.user-profile-forms .input-field-wrap input {
    flex-grow: 1; /* ラベル以外の余ったスペースをすべて使い切る */
    min-width: 0; /* Flexbox内での幅計算のバグを防ぐ */
}

.user-profile-forms .is-zip .input-field-wrap {
    flex: none; /* 100%広げず、中身に合わせる */
}
.user-profile-forms .is-zip input {
    flex: none;
}
.user-profile-forms .is-zip input[name="f_zip_1"] {
    width: 4em;
}
.user-profile-forms .is-zip input[name="f_zip_2"] {
    width: 5em;
}

.user-profile-forms .is-tel input {
    flex: none;
    width: 6em; /* PCでは適度に狭く */
}
@media (max-width: 767px) {
    .user-profile-forms .is-tel input {
        flex: 1; /* スマホでは幅いっぱいに広がる */
    }
}

.user-profile-forms .is-prefecture select {
    flex: none;
    width: fit-content;
    min-width: 150px;
}
@media (max-width: 767px) {
    .user-profile-forms .is-prefecture select {
        flex: 1; /* スマホでは幅いっぱいに広がる */
    }
}

.user-profile-forms .is-full input {
    width: 100%;
}

.user-profile-forms .is-sex select {
    width: auto;
}

.user-profile-forms .is-birth select {
    width: auto;
    min-width: 80px;
}
.user-profile-forms .is-birth .unit {
    font-size: 12px;
    margin-right: 5px;
}