/*'********************************************************************************
'
' システム名    ：SFA(日報入力)システム
' プログラムID  ：login.css
' 機能概要      ：ログインデザインスタイルシート
'
' 担当部課名    ：(株)東邦システムサービス　オープンシステム統括部
'                   Copyright(C) 2026 Toho System Service Co.Ltd
'                                                        All rights reserved.
'********************************************************************************
'       　本技術情報には当社の機密情報が含まれておりますので、当社の
'       書面による承諾なく第三者に開示することはできません。
'                                                   （株）東邦システムサービス
'********************************************************************************
' VERSION   DATE        BY             CHANGE/COMMENT
' 1.0.0.0   2026/02/xx  TSS            新規作成
'*********************************************************************************/
/* 全体のリセットと背景 */
body {
    background-color: #f4f7f6;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* ヘッダーの調整 */
.header {
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin-bottom: 20px;
}

.header-inner img {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
}

.systitle {
    display: block;
    font-size: 40px;
    font-weight: bold;
    color: #333;
    position:relative;
    left:-60px;
}

/* ログインコンテナの外枠 */
#login, .btn-container {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    box-sizing: border-box;
}

/* ログインコンテナ内の余白調整 */
#login {
    margin-top: 10px;
    padding: 30px 30px 10px 30px; /* 上・左右・下の余白 */
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: #ffffff;
}

/* 各入力項目のグループ */
.field-group {
    margin-bottom: 20px; /* 項目ごとの間隔を少し広めに */
    text-align: left;
}
/* ラベル（ユーザーIDなどの文字）のスタイル */
.field-group label {
    display: block; /* 強制改行して入力欄の上に配置 */
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px; /* ラベルと入力欄の間の隙間 */
}
/* --- 入力フィールドの共通スタイル --- */
.input-field {
    width: 100% !important; /* MaxLength指定があっても幅を100%に強制 */
    min-height: 45px; /* 入力欄の縦幅（高さ）を確保 */
    padding: 10px 12px; /* 内側の余白 */
    font-size: 16px; /* 文字サイズ（iOSのズーム防止） */
    border: 1px solid #ddd; /* 枠線の色を少し薄くしてモダンに */
    border-radius: 6px; /* 角を少し丸く */
    box-sizing: border-box; /* 余白を含めた幅計算にする（はみ出し防止） */
    background-color: #fff;
    transition: all 0.2s ease;
}

/* 入力欄にカーソルが当たった時（フォーカス時） */
.input-field:focus {
    border-color: #007bff; /* 青色の枠線に */
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); /* ぼんやり光るエフェクト */
}

/* ★ポイント：テーブルの構造を縦並びに強制する */
table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    display: block;
    margin-bottom: 15px; /* 項目ごとの隙間 */
}

td {
    display: block; /* セルを縦に並べる */
    width: 100% !important;
    padding: 0;
    text-align: left;
}

    /* ★ポイント：ラベル（ユーザーID：など）のスタイル */
    td:first-child {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 5px; /* 入力欄との隙間 */
        color: #555;
    }

/* 入力フィールドの共通スタイル */
.userid, .jigycd, .kcd, .passwd {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px; /* iOSでのズーム防止 */
    transition: all 0.3s;
}

    .userid:focus, .jigycd:focus, .kcd:focus, .passwd:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
    }

/* ボタンエリア */
.btn-container {
    padding: 10px 30px 30px 30px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    text-align: center;
}

.LoginBtn {
    width: 100%;
    padding: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    -webkit-appearance: none;
}

    .LoginBtn:hover {
        background-color: #0056b3;
    }

/* メッセージ表示エリア */
.messageContainer {
    margin-top: 20px;
    text-align: center;
    color: #d9534f;
    font-size: 14px;
    width: 100%;
    max-width: 400px;
}

.btnDummy {
    display: none;
}