/* ==========================================================================
   BIGLOBE 登录页面 - 移动端样式 (749px及以下)
   专为平板和手机设备优化的响应式样式
   重构版本 - 优化代码结构和布局逻辑
   ========================================================================== */

/* ==========================================================================
   平板端样式 (481px 到 749px)
   ========================================================================== */
@media screen and (max-width: 749px) and (min-width: 481px) {

    /* --------------------------------------------------------------------------
       基础布局设置
       -------------------------------------------------------------------------- */
    /* 页面基础设置 */
    body {
        margin: 5px;
    }

    .biglobe-page-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* --------------------------------------------------------------------------
       隐藏桌面端元素
       -------------------------------------------------------------------------- */
    .biglobe-header,
    .biglobe-form-logo-area {
        display: none !important;
    }

    /* --------------------------------------------------------------------------
       顶部Logo区域 (仅移动端显示)
       -------------------------------------------------------------------------- */
    .biglobe-top-logo-area {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 0;
    }

    .biglobe-top-logo-wrapper {
        display: block;
        width: auto;
        height: auto;
        margin-left: -1px; /* 与AU标题对齐 */
    }

    .biglobe-top-logo-image {
        width: 125px !important;
        height: 53.75px !important;
        margin-top: 15px;
        border: 0;
        display: block;
    }

    /* --------------------------------------------------------------------------
       头部内容布局
       -------------------------------------------------------------------------- */
    .biglobe-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .biglobe-logo {
        display: block;
        width: auto;
        height: auto;
        margin-left: -1px; /* 与AU标题对齐 */
    }

    .biglobe-logo img {
        width: 125px !important;
        height: 53.75px !important;
        margin-top: 15px;
    }

    .biglobe-header-spacer {
        display: none;
    }

    /* --------------------------------------------------------------------------
       主容器和登录区域布局
       -------------------------------------------------------------------------- */
    .biglobe-container {
        margin: 10px 0 40px 0;
        width: 100%;
        max-width: 100%;
    }

    .biglobe-login-container {
        background: none;
        display: block;
        width: 100%;
    }

    .biglobe-login-section {
        float: none;
        width: 100%;
        margin: 0 !important;
        padding-left: 0;
    }

    .biglobe-au-login-section {
        float: none;
        width: 100%;
        margin-top: 20px;
        padding: 0 !important;
        border-top: 2px solid #e5e5e5;
    }

    /* --------------------------------------------------------------------------
       标题样式
       -------------------------------------------------------------------------- */
    .biglobe-section-title {
        font-size: 1.5em;
        font-weight: bold;
        margin: 0 !important;
        padding-bottom: 0 !important;
    }

    /* AU标题特殊对齐 */
    .biglobe-section-title--au,
    .au-title {
        margin-left: -1px !important;
        margin-right: auto !important;
        text-align: left !important;
        position: relative !important;
        left: 0 !important;
    }

    /* AU标题容器对齐覆盖 */
    .biglobe-au-login-section div[style*="display: flex"] {
        display: block !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* --------------------------------------------------------------------------
       表单布局
       -------------------------------------------------------------------------- */
    .biglobe-form-table-wrapper {
        margin: 0 !important;
    }

    .biglobe-form-table {
        width: 100%;
        max-width: 400px;
    }

    .biglobe-text-input {
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
    }

    .biglobe-form-submit-area {
        text-align: left;
        margin: 0 !important;
    }

    /* --------------------------------------------------------------------------
       按钮样式
       -------------------------------------------------------------------------- */
    /* 隐藏桌面端BIGLOBE提交按钮 */
    .biglobe-submit-button,
    #submit {
        display: none !important;
    }

    /* AU按钮布局 */
    .biglobe-au-button-wrapper {
        margin: 0;
        margin-left: -50px;
        margin-right: auto;
        text-align: left;
    }

    .biglobe-au-submit-button {
        width: 180px;
        height: 22px;
        min-height: 22px;
        line-height: 22px;
        padding: 0 8px;
        margin: 10px;
    }

    /* --------------------------------------------------------------------------
       表单文本和链接
       -------------------------------------------------------------------------- */
    .biglobe-form-notice,
    .form-notice {
        padding: 0 !important;
        margin: -20px 0 0 70px !important; /* 缩短与移动端按钮间距 */
        position: relative !important;
        left: 0 !important;
    }

    .biglobe-form-links {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* AU相关文本 */
    .biglobe-au-description {
        margin-left: -50px;
        margin-right: auto;
        width: 100%;
    }

    .biglobe-au-links {
        margin-left: -50px;
        margin-right: auto;
    }

    /* 页脚布局 - 垂直排列 */
    .biglobe-footer {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    /* 页脚链接区域 - margin参数设置为0，图片右对齐 */
    .biglobe-footer-links {
        margin: 0 !important; /* margin参数设置为0 */
        float: none; /* 取消浮动 */
        width: 100%; /* 全宽 */
        display: flex !important; /* 启用弹性布局 */
        justify-content: space-between !important; /* 两端对齐：文字左边，图片右边 */
        align-items: flex-start !important; /* 顶部对齐 */
        flex-wrap: wrap !important; /* 允许换行 */
    }

    /* 页脚文字链接 - margin参数设置为0，左对齐 */
    .biglobe-footer-text-links {
        margin: 0 !important; /* margin参数设置为0 */
        flex-shrink: 0 !important; /* 不缩小 */
        order: 1 !important; /* 显示顺序：排在前面 */
    }

    /* 页脚地址元素 - 高度去掉3/2 */
    .biglobe-footer-address {
        height: auto !important; /* 自动高度 */
        line-height: 1.2 !important; /* 紧凑行高 */
    }

    /* 页脚地址内的透明图片 - 在现有基础上再去掉1/2 */
    .biglobe-footer-address img[src="img/space.gif"] {
        height: 25px !important; /* 在49px基础上再去掉1/2：49 ÷ 2 ≈ 25px */
        width: 1px !important; /* 保持宽度 */
    }

    /* --------------------------------------------------------------------------
       复选框区域和移动端登录按钮
       -------------------------------------------------------------------------- */
    /* 复选框单元格 */
    .biglobe-checkbox-cell {
        height: 50px !important;
        vertical-align: top !important;
    }

    /* 复选框下方Header区域 */
    .biglobe-checkbox-header-area {
        display: block;
        width: 100%;
        height: 50px;
        margin: 15px 0;
        padding: 0;
    }

    .biglobe-checkbox-header-area .biglobe-header-content {
        display: block;
        width: 100%;
    }

    /* 隐藏原logo容器 */
    .biglobe-checkbox-header-area .biglobe-logo {
        display: none !important;
    }

    /* 原checkbox-header-logo样式 (已隐藏) */
    .checkbox-header-logo {
        width: 300px !important;
        height: 62px !important;
        border: 0;
        display: inline-block;
        margin: 0 auto;
    }

    /* 移动端提交按钮区域 */
    .biglobe-mobile-submit-area {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
        transform: translateY(20px); /* 向下移动20px */
    }

    /* 移动端提交按钮 */
    .biglobe-mobile-submit-button {
        width: 300px !important;
        height: 62px !important;
        border: 0;
        display: inline-block;
        margin: 0 auto;
        cursor: pointer;
    }

    /* --------------------------------------------------------------------------
       其他链接
       -------------------------------------------------------------------------- */
    .biglobe-question-link {
        position: relative !important;
        left: 100px !important;
        display: inline-block !important;
    }
    /* --------------------------------------------------------------------------
       页脚布局
       -------------------------------------------------------------------------- */
    .biglobe-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .biglobe-footer-links {
        margin: 0 !important;
        float: none;
        width: 100%;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    .biglobe-footer-text-links {
        margin: 0 !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .biglobe-footer-address {
        height: auto !important;
        line-height: 1.2 !important;
    }

    .biglobe-footer-address img[src="img/space.gif"] {
        height: 25px !important;
        width: 1px !important;
    }
}

/* ==========================================================================
   小屏幕移动端样式 (480px及以下)
   ========================================================================== */
@media screen and (max-width: 480px) {

    /* --------------------------------------------------------------------------
       基础布局设置 (小屏幕优化)
       -------------------------------------------------------------------------- */
    body {
        margin: 5px;
        font-size: 14px;
    }

    .biglobe-page-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    /* --------------------------------------------------------------------------
       隐藏桌面端元素
       -------------------------------------------------------------------------- */
    .biglobe-header,
    .biglobe-form-logo-area {
        display: none !important;
    }

    /* --------------------------------------------------------------------------
       顶部Logo区域 (仅移动端显示)
       -------------------------------------------------------------------------- */
    .biglobe-top-logo-area {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 0;
    }

    .biglobe-top-logo-wrapper {
        display: block;
        width: auto;
        height: auto;
        text-align: left;
        margin-left: -1px; /* 与AU标题对齐 */
    }

    .biglobe-top-logo-image {
        width: 125px !important;
        height: 53.75px !important;
        margin-top: 15px;
        border: 0;
        display: block;
        max-width: 100%;
    }

    /* 页面包装器 - 最小内边距 */
    .biglobe-page-wrapper {
        width: 100%; /* 全宽 */
        max-width: 100%; /* 不限制最大宽度 */
        padding: 0 5px; /* 最小左右内边距 */
        box-sizing: border-box; /* 边框盒模型 */
    }

    /* 头部内容 - 居中布局 */
    .biglobe-header-content {
        display: flex; /* 弹性布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        padding: 0; /* 移动端padding设置为0 */
    }

    /* Logo容器 - 与AU标题对齐 */
    .biglobe-logo {
        display: block; /* 块级元素 */
        width: auto; /* 自动宽度 */
        height: auto; /* 自动高度 */
        text-align: left; /* 左对齐 */
        margin-left: -1px; /* 与AU标题相同的左边距 */
    }

    /* Logo图片 - 小屏幕尺寸 */
    .biglobe-logo img {
        width: 125px !important; /* 固定宽度125px */
        height: 53.75px !important; /* 固定高度53.75px */
        margin-top: 15px; /* 向下移动15px */
    }

    /* 隐藏头部间隔 */
    .biglobe-header-spacer {
        display: none; /* 不显示 */
    }

    /* 主容器 - 紧凑布局 */
    .biglobe-container {
        margin: 10px 0 20px 0; /* 减少底部边距 */
        width: 100%; /* 全宽 */
        max-width: 100%; /* 不限制宽度 */
        font-size: 70%; /* 整体字体缩小到70% */
    }

    /* 登录容器 - 简化样式 */
    .biglobe-login-container {
        background: none; /* 无背景 */
        display: block; /* 块级显示 */
        width: 100%; /* 全宽 */
    }

    /* BIGLOBE登录区域 - 全宽布局，删除margin使布局紧凑 */
    .biglobe-login-section {
        float: none; /* 取消浮动 */
        width: 100%; /* 全宽 */
        margin: 0 !important; /* 删除所有边距 */
        padding-left: 0; /* 无左内边距 */
    }

    /* au登录区域 - 分隔显示，去掉padding限制 */
    .biglobe-au-login-section {
        float: none; /* 取消浮动 */
        width: 100%; /* 全宽 */
        margin-top: 20px; /* 顶部间距 */
        padding: 0 !important; /* 去掉所有内边距限制 */
        border-top: 2px solid #e5e5e5; /* 分隔线 */
    }

    /* 区域标题 - 小屏幕字体，"BIGLOBE IDでログイン"标题样式，删除margin使布局紧凑 */
    .biglobe-section-title {
        font-size: 1.5em; /* 2号字体大小，约18px */
        font-weight: bold; /* 加粗显示 */
        padding: 0 !important; /* 删除内边距 */
        margin: 0 !important; /* 删除所有边距 */
    }

    /* au标题对齐 - 使用边距控制位置而非text-align，向左移动1px */
    .biglobe-section-title--au,
    .au-title {
        margin-left: -1px !important; /* 左边距-1px，向左移动1px */
        margin-right: auto !important; /* 右边距自动 */
        text-align: left !important; /* 保持文本左对齐 */
        display: block !important; /* 覆盖flex布局 */
        position: relative !important; /* 相对定位 */
        left: 0 !important; /* 重置left值 */
    }

    /* au标题容器对齐 - 覆盖内联样式，实现左对齐 */
    .biglobe-au-login-section div[style*="display: flex"] {
        display: block !important; /* 覆盖flex布局 */
        align-items: flex-start !important; /* 左对齐 */
        text-align: left !important; /* 强制左对齐 */
    }

    /* 副标题样式 */
    .biglobe-subtitle {
        font-size: 0.6em; /* 小字体 */
        width: 100%; /* 全宽 */
    }

    /* 表单表格包装器 - 删除margin使布局紧凑 */
    .biglobe-form-table-wrapper {
        margin: 0 !important; /* 删除所有边距 */
    }

    /* 表单表格 - 全宽显示 */
    .biglobe-form-table {
        width: 100%; /* 全宽 */
        max-width: 100%; /* 不限制最大宽度 */
    }

    /* 输入单元格 - margin参数设置为0 */
    .biglobe-input-cell {
        padding: 0 !important; /* padding设置为0 */
        margin: 0 !important; /* margin参数设置为0 */
    }

    /* 文本输入框 - 全宽且防止iOS缩放 */
    .biglobe-text-input {
        width: 100%; /* 全宽 */
        max-width: 100%; /* 不限制最大宽度 */
        box-sizing: border-box; /* 边框盒模型 */
        font-size: 16px; /* 16px防止iOS Safari自动缩放 */
    }

    /* 复选框标签 - 增大字体便于点击，margin设置为0 */
    .biglobe-checkbox-label {
        font-size: 1.1em; /* 稍大的字体 */
        margin: 0 !important; /* margin参数设置为0 */
        padding: 0 !important; /* padding也设置为0 */
    }

    /* 复选框单元格容器 - 设置固定高度 */
    .biglobe-checkbox-cell {
        height: 50px !important; /* 固定高度50px */
        vertical-align: top !important; /* 顶部对齐 */
    }

    /* 表单提交区域 - 左对齐，删除margin使布局紧凑 */
    .biglobe-form-submit-area {
        text-align: left; /* 文本左对齐 */
        margin: 0 !important; /* 删除所有边距 */
    }

    /* BIGLOBE提交按钮 - 移动端隐藏 */
    .biglobe-submit-button,
    #submit {
        display: none !important; /* 移动端隐藏提交按钮 */
    }

    /* au按钮包装器 - 使用边距控制位置而非text-align */
    .biglobe-au-button-wrapper {
        margin: 0; /* 重置边距 */
        margin-left: -50px; /* 左边距-50px，向左偏移 */
        margin-right: auto; /* 右边距自动 */
        text-align: left; /* 保持文本左对齐 */
    }

    /* au提交按钮 - 适中尺寸，缩减高度一半 */
    .biglobe-au-submit-button {
        width: 160px; /* 固定宽度 */
        max-width: 100%; /* 最大宽度限制 */
        height: 22px; /* 高度缩减一半（从44px减少到22px） */
        min-height: 22px; /* 最小高度也缩减一半 */
        line-height: 22px; /* 行高与高度保持一致，确保文字垂直居中 */
        padding: 0 6px; /* 减少内边距以适应较小高度 */
        margin: 10px; /* 增加到10px边距（5px + 5px） */
    }

    /* 表单提示信息 - 增大字体，删除margin使布局紧凑，保持右移70px */
    .biglobe-form-notice,
    .form-notice {
        padding: 0 !important; /* 删除内边距 */
        font-size: 1.3em !important; /* 增大字体便于阅读 */
        margin: 0 !important; /* 删除上下边距 */
        margin-left: 70px !important; /* 保持右移70px */
        position: relative !important; /* 相对定位 */
        left: 0 !important; /* 重置left值 */
    }

    /* 表单链接 - 增大字体，删除margin和padding使布局紧凑 */
    .biglobe-form-links {
        padding: 0 !important; /* 删除内边距 */
        font-size: 1.3em; /* 增大字体便于点击 */
        margin: 0 !important; /* 删除所有边距 */
    }

    /* au登录说明 - 使用边距控制位置，增大字体 */
    .biglobe-au-description {
        margin-left: -50px; /* 左边距-50px，与其他au元素保持一致 */
        margin-right: auto; /* 右边距自动 */
        width: 100%; /* 全宽 */
        font-size: 1.3em; /* 增大字体便于阅读 */
    }

    /* au相关链接 - 使用边距控制位置，增大字体 */
    .biglobe-au-links {
        margin-left: -50px; /* 左边距-50px，与其他au元素保持一致 */
        margin-right: auto; /* 右边距自动 */
        font-size: 1.3em; /* 增大字体便于点击 */
    }

    /* 重要消息提示 - 突出显示 */
    .biglobe-important-msg {
        font-size: 1.3em; /* 增大字体 */
        margin: 10px 0; /* 上下边距 */
        padding: 10px !important; /* 内边距，重要性高 */
    }

    /* 注意事项标题 - 醒目字体 */
    .biglobe-attention-title {
        font-size: 1.5em; /* 较大字体 */
    }

    /* 注意事项列表 - 适中字体 */
    .biglobe-attention-list {
        font-size: 1.3em; /* 增大字体 */
        margin: 0 5px; /* 左右边距 */
    }

    /* 注意事项条目 - 缩进和图标位置 */
    .biglobe-attention-item {
        padding-left: 15px; /* 左内边距为图标留空间 */
        background-position: 0 8px; /* 背景图标位置 */
    }

    /* 页脚布局 - 垂直排列，小字体 */
    .biglobe-footer {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
        font-size: 0.8em; /* 小字体 */
        line-height: 200%; /* 增加行高便于阅读 */
    }

    /* 页脚链接区域 - 水平布局，margin参数设置为0，图片右对齐 */
    .biglobe-footer-links {
        margin: 0 !important; /* margin参数设置为0 */
        float: none; /* 取消浮动 */
        width: 100%; /* 全宽 */
        display: flex !important; /* 启用弹性布局 */
        flex-direction: row !important; /* 水平排列 */
        justify-content: space-between !important; /* 两端对齐：文字左边，图片右边 */
        align-items: flex-start !important; /* 顶部对齐 */
        flex-wrap: wrap !important; /* 允许换行 */
    }

    /* 页脚文字链接 - margin参数设置为0，左对齐 */
    .biglobe-footer-text-links {
        margin: 0 !important; /* margin参数设置为0 */
        flex-shrink: 0 !important; /* 不缩小 */
        order: 1 !important; /* 显示顺序：排在前面 */
    }

    /* 页脚地址元素 - 高度去掉3/2 */
    .biglobe-footer-address {
        height: auto !important; /* 自动高度 */
        line-height: 1.1 !important; /* 更紧凑的行高 */
        font-size: 0.8em; /* 小字体 */
    }

    /* 页脚地址内的透明图片 - 在现有基础上再去掉1/2 */
    .biglobe-footer-address img[src="img/space.gif"] {
        height: 25px !important; /* 在49px基础上再去掉1/2：49 ÷ 2 ≈ 25px */
        width: 1px !important; /* 保持宽度 */
    }

    /* 页脚图片链接 - 适中尺寸，右对齐 */
    .biglobe-footer img[usemap],
    .biglobe-footer-links img[usemap] {
        width: 100px; /* 固定宽度 */
        height: auto; /* 高度自适应 */
        margin-left: auto !important; /* 左边距自动，推到右边 */
        flex-shrink: 0 !important; /* 不缩小 */
        order: 2 !important; /* 显示顺序：排在后面 */
    }

    /* ID・パスワード忘记链接 - 右移100px */
    .biglobe-question-link {
        position: relative !important; /* 相对定位 */
        left: 100px !important; /* 向右移动100px */
        display: inline-block !important; /* 内联块元素 */
    }

    /* Checkbox下方Header区域 - 仅移动端显示 */
    .biglobe-checkbox-header-area {
        display: block; /* 在移动端显示 */
        width: 100%; /* 全宽 */
        height: 50px; /* 固定高度50px */
        margin: 15px 0; /* 上下边距 */
        padding: 0; /* 无内边距 */
    }

    /* Checkbox下方Header内容 */
    .biglobe-checkbox-header-area .biglobe-header-content {
        display: block; /* 块级显示 */
        width: 100%; /* 全宽 */
    }

    /* Checkbox下方按钮容器样式 - 移动端隐藏 */
    .biglobe-checkbox-header-area .biglobe-logo {
        display: none !important; /* 移动端隐藏logo容器 */
    }

    /* Checkbox下方登录按钮图片 */
    .checkbox-header-logo {
        width: 300px !important; /* 固定宽度300px */
        height: 62px !important; /* 固定高度62px */
        border: 0; /* 无边框 */
        display: inline-block; /* 内联块显示，便于居中 */
        margin: 0 auto; /* 水平居中 */
        max-width: 100%; /* 最大宽度限制 */
    }

    /* 移动端提交按钮区域 */
    .biglobe-mobile-submit-area {
        display: block; /* 块级显示 */
        width: 100%; /* 全宽 */
        text-align: center; /* 居中对齐 */
        margin: 0; /* margin参数设置为0 */
        padding: 0; /* 无内边距 */
        transform: translateY(20px); /* 向下移动20px */
    }

    /* 移动端提交按钮 */
    .biglobe-mobile-submit-button {
        width: 300px !important; /* 固定宽度300px */
        height: 62px !important; /* 固定高度62px */
        border: 0; /* 无边框 */
        display: inline-block; /* 内联块显示 */
        margin: 0 auto; /* 水平居中 */
        cursor: pointer; /* 鼠标指针 */
        max-width: 100%; /* 最大宽度限制 */
    }
}

/* 超小屏幕移动端样式 (320px及以下) */
@media screen and (max-width: 320px) {
    /* 页面包装器 - 最小内边距 */
    .biglobe-page-wrapper {
        padding: 0 3px; /* 极小的左右内边距 */
    }

    /* 区域标题 - 紧凑字体，"BIGLOBE IDでログイン"标题样式，极致紧凑布局 */
    .biglobe-section-title {
        font-size: 1.5em; /* 2号字体大小，约18px，保持一致性 */
        font-weight: bold; /* 加粗显示 */
        padding: 0.09em 0.09em; /* 进一步减少内边距（从0.15em减少40%） */
        margin-bottom: 4px; /* 进一步减少与下方元素的间距（从6px减少33%） */
        margin-top: 3px; /* 减少顶部边距 */
    }

    /* 文本输入框 - 紧凑样式 */
    .biglobe-text-input {
        font-size: 16px; /* 保持16px防止缩放 */
        padding: 6px; /* 紧凑内边距 */
    }

    /* au按钮 - 更小尺寸，缩减高度一半 */
    .biglobe-au-submit-button {
        width: 140px; /* 较小宽度 */
        height: 22px; /* 高度缩减一半（从44px减少到22px） */
        min-height: 22px; /* 最小高度也缩减一半 */
        line-height: 22px; /* 行高与高度保持一致，确保文字垂直居中 */
        padding: 0 4px; /* 进一步减少内边距以适应更小屏幕 */
        margin: 10px; /* 增加到10px边距（5px + 5px） */
    }

    /* Logo容器样式已在上方统一定义，此处删除重复定义 */

    /* Logo - 最小尺寸 */
    .biglobe-logo img {
        width: 125px !important; /* 固定宽度125px */
        height: 53.75px !important; /* 固定高度53.75px */
        margin-top: 15px; /* 向下移动15px */
    }

    /* 页脚图片 - 最小尺寸，右对齐 */
    .biglobe-footer img[usemap],
    .biglobe-footer-links img[usemap] {
        width: 90px; /* 最小图片尺寸 */
        margin-left: auto !important; /* 左边距自动，推到右边 */
        flex-shrink: 0 !important; /* 不缩小 */
        order: 2 !important; /* 显示顺序：排在后面 */
    }
}

/* 移动端触摸交互优化 */
@media screen and (max-width: 749px) {
    /* 文本输入框 - 移除默认样式，添加圆角 */
    .biglobe-text-input {
        -webkit-appearance: none; /* 移除WebKit默认外观 */
        border-radius: 4px; /* 圆角边框 */
    }

    /* 输入框焦点状态 - 蓝色高亮 */
    .biglobe-text-input:focus {
        outline: none; /* 移除默认轮廓 */
        border-color: #7db4e6; /* 蓝色边框 */
        box-shadow: 0 0 0 2px rgba(125, 180, 230, 0.3); /* 蓝色阴影 */
    }

    /* 提交按钮 - 优化触摸体验 */
    .biglobe-submit-button,
    .biglobe-au-submit-button,
    .biglobe-mobile-submit-button {
        -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
        touch-action: manipulation; /* 优化触摸响应 */
    }

    /* 复选框标签 - 扩大点击区域，margin设置为0 */
    .biglobe-checkbox-label {
        -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
        touch-action: manipulation; /* 优化触摸响应 */
        padding: 0 !important; /* padding设置为0 */
        margin: 0 !important; /* margin参数设置为0 */
    }

    /* 链接 - 优化触摸反馈 */
    .biglobe-link {
        -webkit-tap-highlight-color: rgba(125, 180, 230, 0.3); /* 淡蓝色点击高亮 */
        touch-action: manipulation; /* 优化触摸响应 */
        padding: 2px; /* 内边距扩大点击区域 */
        margin: -2px; /* 负边距保持视觉位置 */
    }
}

/* 移动端无障碍功能增强 */
@media screen and (max-width: 749px) {
    /* 文本输入框 - 符合iOS无障碍指南的最小高度 */
    .biglobe-text-input {
        min-height: 44px; /* iOS无障碍指南推荐的最小触摸目标尺寸 */
    }

    /* 提交按钮 - 移动端隐藏 */
    .biglobe-submit-button {
        display: none !important; /* 移动端隐藏提交按钮 */
    }

    /* au提交按钮 - 自定义缩减高度 */
    .biglobe-au-submit-button {
        min-height: 22px; /* au按钮缩减高度一半到22px */
        min-width: 44px; /* 保持最小宽度44px以确保可点击性 */
    }

    /* 复选框 - 放大便于操作 */
    .biglobe-checkbox-label input[type="checkbox"] {
        transform: scale(1.2); /* 放大到120% */
        margin-right: 8px; /* 右边距 */
    }
}

/* 移动端必填标记位置调换功能 */
@media screen and (max-width: 749px) {
    /*
     * 输入单元格布局调整 - 使用Flexbox实现元素位置调换
     * 将原本在输入框右侧的必填标记(*1, *2)移动到输入框上方
     * 这样在移动端可以提供更好的用户体验和视觉层次
     * 极致紧凑布局设计
     */
    .biglobe-input-cell {
        display: flex !important; /* 启用弹性布局 */
        flex-direction: column-reverse !important; /* 反转排列顺序：标记在上，输入框在下 */
        align-items: flex-start !important; /* 所有元素左对齐 */
        gap: 3px !important; /* 进一步减少元素间距（从5px减少40%） */
    }

    /*
     * 错误消息优先级设置 - 超紧凑间距
     * 确保验证错误信息始终显示在最顶部，优先级最高
     */
    .biglobe-input-cell .biglobe-error {
        order: -2 !important; /* 最高优先级(-2)，显示在最上方 */
        margin: 0 !important; /* margin设置为0 */
    }

    /*
     * 必填标记样式优化 - 与提示文字同行显示
     * 将(*1)、(*2)等必填标记设置为醒目的红色文字样式
     * 并在其左侧显示提示文字，形成"提示文字 (*1)"的布局
     * 移除背景阴影效果，保持必填标记本身不加粗
     */
    .biglobe-input-cell .biglobe-required-mark {
        order: 0 !important; /* 第二优先级，显示在输入框上方 */
        align-self: flex-start !important; /* 左对齐 */
        font-weight: normal !important; /* 正常字重，不加粗 */
        color: #d32f2f !important; /* 红色文字，突出显示 */
        font-size: 1.1em !important; /* 稍大字体 */
        margin-bottom: 2px !important; /* 进一步减少底部间距（从3px减少33%） */
        padding: 1px 3px !important; /* 进一步减少内边距（从2px/4px减少约30%） */
        background-color: transparent !important; /* 透明背景，移除红色阴影 */
        border-radius: 3px !important; /* 圆角 */
        position: relative !important; /* 相对定位，为伪元素做准备 */
    }

    /*
     * 登录ID输入框的提示文字 - 使用伪元素在必填标记左侧显示
     * 显示"メールアドレスまたはユーザID (*1)"的效果，提示文字加粗显示
     */
    #loginid_bg .biglobe-required-mark::before {
        content: "メールアドレスまたはユーザID " !important; /* 提示文字内容 */
        color: #333 !important; /* 深灰色文字 */
        font-weight: bold !important; /* 加粗字重 */
        font-size: 0.9em !important; /* 稍小字体 */
        background: none !important; /* 无背景 */
        padding: 0 !important; /* 无内边距 */
        margin-right: 5px !important; /* 进一步减少与必填标记的间距（从8px减少37.5%） */
    }

    /*
     * BIGLOBE密码输入框的提示文字 - 使用伪元素在必填标记左侧显示
     * 显示"BIGLOBEパスワード (*2)"的效果，提示文字加粗显示
     */
    #biglobe_pw_bg .biglobe-required-mark::before {
        content: "BIGLOBEパスワード " !important; /* 提示文字内容 */
        color: #333 !important; /* 深灰色文字 */
        font-weight: bold !important; /* 加粗字重 */
        font-size: 0.9em !important; /* 稍小字体 */
        background: none !important; /* 无背景 */
        padding: 0 !important; /* 无内边距 */
        margin-right: 5px !important; /* 进一步减少与必填标记的间距（从8px减少37.5%） */
    }

    /*
     * 输入框样式调整
     * 确保输入框显示在必填标记下方，并占满可用宽度
     * 隐藏placeholder文字，因为已通过伪元素显示提示文字
     */
    .biglobe-input-cell .biglobe-text-input {
        order: -1 !important; /* 默认顺序，显示在标记下方 */
        width: 100% !important; /* 占满容器宽度 */
        max-width: 100% !important; /* 最大宽度限制 */
        margin: 0 !important; /* 所有margin设置为0 */
    }

    /*
     * 隐藏输入框的placeholder文字 - 移动端专用
     * 因为提示文字已通过伪元素在必填标记左侧显示
     */
    .biglobe-input-cell .biglobe-text-input::placeholder {
        color: transparent !important; /* 透明色隐藏placeholder */
        opacity: 0 !important; /* 完全透明 */
    }

    .biglobe-input-cell .biglobe-text-input::-webkit-input-placeholder {
        color: transparent !important; /* WebKit浏览器 */
        opacity: 0 !important;
    }

    .biglobe-input-cell .biglobe-text-input::-moz-placeholder {
        color: transparent !important; /* Firefox */
        opacity: 0 !important;
    }

    .biglobe-input-cell .biglobe-text-input:-ms-input-placeholder {
        color: transparent !important; /* IE/Edge */
        opacity: 0 !important;
    }

    /*
     * 表格单元格空间优化 - margin和padding设置为0
     * 实现极致紧凑布局
     */
    .biglobe-form-table .biglobe-input-cell {
        padding: 0 !important; /* padding设置为0 */
        margin: 0 !important; /* margin设置为0 */
        vertical-align: top !important; /* 顶部对齐 */
    }

    /*
     * 登录ID输入框特殊处理 - 极致紧凑布局
     * 针对#loginid_bg元素的专门样式，确保布局一致性
     */
    #loginid_bg {
        display: flex !important; /* 弹性布局 */
        flex-direction: column-reverse !important; /* 反转排列 */
        align-items: flex-start !important; /* 左对齐 */
        gap: 3px !important; /* 进一步减少元素间距（从5px减少40%） */
    }

    /*
     * BIGLOBE密码输入框特殊处理 - 极致紧凑布局
     * 针对#biglobe_pw_bg元素的专门样式，确保布局一致性
     */
    #biglobe_pw_bg {
        display: flex !important; /* 弹性布局 */
        flex-direction: column-reverse !important; /* 反转排列 */
        align-items: flex-start !important; /* 左对齐 */
        gap: 3px !important; /* 进一步减少元素间距（从5px减少40%） */
    }
}