/* ------------------------------------- */
/* 1. 全体と背景の設定 */
/* ------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* 必須 */
    font-family: 'Arial', sans-serif;
    background-color: #f4f7f6;
}

/* ログイン状態（デフォルト） */
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ------------------------------------- */
/* 2. ログインコンテナの装飾 */
/* ------------------------------------- */
#login-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 380px;
    text-align: center;
    display: block; 
    margin: 0 auto;
}

#login-container h1 {
    color: #333;
    font-size: 24px;
    margin-bottom: 25px;
    border-bottom: 2px solid #5C6BC0;
    padding-bottom: 10px;
}

/* ------------------------------------- */
/* 3. フォーム要素の装飾 (省略) */
/* ------------------------------------- */
label { display: block; text-align: left; margin-bottom: 5px; color: #555; font-weight: bold; }
input[type="text"], input[type="password"] { width: calc(100% - 20px); padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; transition: border-color 0.3s; }
input[type="text"]:focus, input[type="password"]:focus { border-color: #5C6BC0; outline: none; box-shadow: 0 0 5px rgba(92, 107, 192, 0.3); }

/* ------------------------------------- */
/* 4. ボタンの装飾 (省略) */
/* ------------------------------------- */
button[type="submit"] { background-color: #5C6BC0; color: white; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; width: 100%; transition: background-color 0.3s, transform 0.1s; }
button[type="submit"]:hover { background-color: #485ab9; }
button[type="submit"]:active { transform: scale(0.98); }

/* ------------------------------------- */
/* 5. メインコンテンツの調整（全画面表示） */
/* ------------------------------------- */
#main-content {
    display: none; 
    width: 100%;
    height: 100%; /* 必須 */
    position: absolute; 
    top: 0;
    left: 0;
    flex-direction: column;
    padding: 0; 
    box-sizing: border-box;
    background-color: #f4f7f6;
    display: flex; 
    text-align: center;
}

/* メッセージコンテナのスタイル */
#message-content {
    flex-shrink: 0; 
    padding: 10px 20px; 
    background-color: #e8eaf6; 
    border-bottom: 1px solid #c5cae9;
    text-align: center;
}

#main-title { margin-top: 5px; margin-bottom: 5px; text-align: center; }

#toggle-button {
    background-color: #8c9eff;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 5px;
}

/* ------------------------------------- */
/* 6. iframeコンテナの設定 */
/* ------------------------------------- */
.iframe-container {
    position: relative; 
    width: 100%;
    flex-grow: 1; 
    overflow: hidden;
    border: none; 
    height: 100%; 
    padding-bottom: 0; 
}

.iframe-container iframe {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    border: none;
}