/* ========================================================
   ログイン画面 タブ切り替えUI
======================================================== */
.login-ui-wrapper {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* スマホ表示時の横幅ズレを解消 */
@media screen and (max-width: 767px) {
    .login-ui-wrapper {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}

/* 灰色のボックスの左右マージンをゼロにして、タブの幅と一致*/
#mainContent.indexContent .login-ui-wrapper .loginArea {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

/* タブナビゲーション */
.login-tab-list {
    display: flex;
    margin: 0 0 15px 0;
    padding: 0;
    list-style: none;
    border: 1px solid #1F2F54;
    border-radius: 4px;
    overflow: hidden;
}

.login-tab-item {
    flex: 1;
    background: #FFFFFF;
    transition: background-color 0.2s ease;
}

.login-tab-item:first-child {
    border-right: 1px solid #1F2F54;
}

.login-tab-item.is-active {
    background: #1F2F54;
}

.login-tab-link {
    display: block;
    padding: 12px 10px;
    color: #1F2F54;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    transition: color 0.2s ease;
}

.login-tab-item.is-active .login-tab-link {
    color: #FFFFFF;
}

.login-tab-link:hover {
    opacity: 0.8;
}

/* スマホ用のタブ */
@media screen and (max-width: 767px) {
    .login-tab-link {
        padding: 10px 5px;
        font-size: 1.3rem;
    }
}

/* ========================================================
   パネル（コンテンツ）の表示切り替え
======================================================== */
.tab-item {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.tab-item.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}