/* --------------- パソコン【ログアウト状態】 --------------- */
/* ヘッダー */
table.header-not-login-pc {
    background-color: #004b9b;
    border-collapse:collapse;
    color: #ffffff;
    height: auto;
    width: 100%;
    min-width: 940px;
}

/* --------------- IE11だけに適用されるスタイル --------------- */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {

    /* ヘッダー */
    table.header-not-login-pc {
        min-width: 1140px;
    }
}

/* ヘッダーマージン */
td.header-not-login-margin-pc {
    width: 35%;
}

/* 雲ロゴ */
/* 川ロゴ */
td.header-not-login-cloud-logo-pc,
td.header-not-login-river-logo-pc {
    text-align: center;
    width: 5%;
}

/* 雲ロゴ画像 */
/* 川ロゴ画像 */
img.header-not-login-cloud-logo-pc,
img.header-not-login-river-logo-pc {
    width: 55px;
}

/* タイトルロゴ */
td.header-not-login-title-logo-pc {
    text-align: center;
    width: 20%;
}

/* タイトルロゴ画像 */
img.header-not-login-title-logo-pc {
    width: 400px;
}

/* --------------- パソコン【ログイン状態】 --------------- */
/* ヘッダー */
table.header-login-pc {
    background-color: #004b9b;
    border-collapse:collapse;
    color: #ffffff;
    height: auto;
    min-width: 940px;
    width: 100%;
}

/* --------------- IE11だけに適用されるスタイル --------------- */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {

    /* ヘッダー */
    table.header-login-pc {
        min-width: 1140px;
    }
}

/* ヘッダーフロントマージン(予測画面以外の場合) */
td.header-login-margin-pc {
    width: 35%;
}

/* 地点選択画面に戻る(予測画面の場合) */
td.header-login-observatoryselect-pc {
    font-family: system-ui;
    width: 15%;
}

/* 地点選択画面に戻るマージン(予測画面の場合) */
td.header-login-observatoryselect-margin-pc {
    width: 20%;
}

/* 地点選択画面に戻るボタン(予測画面の場合) */
button.btn-observatoryselect-pc {
    background-color: #004b9b;
    border-color:  #004b9b;
    width: 100%;
}

/* 地点選択画面に戻るボタンアイコン(予測画面の場合) */
.bi-backspace::before {
    margin-right: 1%;
    margin-bottom: 1%;
}

/* 雲ロゴ */
/* 川ロゴ */
td.header-login-cloud-logo-pc,
td.header-login-river-logo-pc {
    text-align: center;
    width: 5%;
}

/* 雲ロゴ画像 */
/* 川ロゴ画像 */
img.header-login-cloud-logo-pc,
img.header-login-river-logo-pc {
    width: 55px;
}

/* タイトルロゴ */
td.header-login-title-logo-pc  {
    text-align: center;
    width: 20%;
}

/* タイトルロゴ画像 */
img.header-login-title-logo-pc {
    width: 400px;
}

/* ユーザー情報 */
td.header-login-user-info-pc {
    color: #ffffff;
    font-family: system-ui;
    width: 20%;
    word-break: break-all;
}

/* ログアウト */
td.header-login-logout-pc {
    font-family: system-ui;
    text-align: center;
    width: 15%;
}

/* ログアウトボタン */
button.btn-logout {
    background-color: #004b9b;
    border-color:  #004b9b;
    width: 100%;
}

/* --------------- スマートフォン(縦)【ログアウト状態】 --------------- */
@media (orientation: portrait) {

    /* ヘッダー */
    table.header-not-login-phone {
        background-color: #004b9b;
        border-collapse:collapse;
        color: #ffffff;
        height: 60px;
        min-width: fit-content;
        width: 100%;
    }

    /* ヘッダーマージン */
    td.header-not-login-margin-phone {
        width: 5%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-not-login-cloud-logo-phone,
    td.header-not-login-river-logo-phone {
        width: 10%;
    }

    /* 雲ロゴ画像 */
    /* 川ロゴ画像 */
    img.header-not-login-cloud-logo-phone,
    img.header-not-login-river-logo-phone {
        width: 100%;
    }

    /* タイトルロゴ */
    td.header-not-login-title-logo-phone {
        text-align: center;
        width: 60%;
    }

    /* タイトルロゴ画像 */
    img.header-not-login-title-logo-phone {
        width: 100%;
    }
}

/* --------------- スマートフォン(横)【ログアウト状態】 --------------- */
@media (orientation: landscape) {

    /* ヘッダー */
    table.header-not-login-phone {
        background-color: #004b9b;
        border-collapse:collapse;
        color: #ffffff;
        height: 40px;
        min-width: fit-content;
        width: 100%;
    }

    /* ヘッダーマージン */
    td.header-not-login-margin-phone {
        width: 25%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-not-login-cloud-logo-phone,
    td.header-not-login-river-logo-phone {
        width: 5%;
    }

    /* 雲ロゴ画像 */
    /* 川ロゴ画像 */
    img.header-not-login-cloud-logo-phone,
    img.header-not-login-river-logo-phone {
        width: 95%;
    }

    /* タイトルロゴ */
    td.header-not-login-title-logo-phone {
        text-align: center;
        width: 40%;
    }

    /* タイトルロゴ画像 */
    img.header-not-login-title-logo-phone {
        width: 85%;
    }
}

/* --------------- モバイル共通 --------------- */
/* ヘッダーログインタイトル */
/* ヘッダーユーザー情報 */
table.header-login-phone,
table.header-login-user-info-mobile {
    background-color: #004b9b;
    border-collapse:collapse;
    width: 100%;
}

/* --------------- スマートフォン(縦)【ログイン状態】 --------------- */
@media (orientation: portrait) {

    /* ヘッダーマージン */
    td.header-login-margin-phone {
        width: 5%;
    }

    /* 地点選択画面に戻る(予測画面の場合) */
    td.header-login-observatoryselect-phone {
        width: 30%;
    }

    /* 地点選択画面に戻るマージン(予測画面の場合) */
    td.header-login-observatoryselect-margin-phone {
        width: 10%;
    }

    /* 地点選択画面に戻るボタン(予測画面の場合) */
    button.btn-observatoryselect-phone {
        background-color: #004b9b;
        border-color:  #004b9b;
        font-family: system-ui;
        font-size: 75%;
        text-align: center;
        width: 100%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-login-cloud-logo-phone,
    td.header-login-river-logo-phone {
        width: 10%;
    }

    /* 雲ロゴ画像 */
    /* 川ロゴ画像 */
    img.header-login-cloud-logo-phone,
    img.header-login-river-logo-phone {
        width: 100%;
    }

    /* タイトルロゴ */
    td.header-login-title-logo-phone {
        text-align: center;
        width: 60%;
    }

    /* タイトルロゴ画像 */
    img.header-login-title-logo-phone {
        width: 100%;
    }

    /* ユーザー情報 */
    td.header-login-user-info-phone {
        color: #ffffff;
        font-family: system-ui;
        font-size: 75%;
        text-align: center;
        width: 40%;
        word-break: break-all;
    }

    /* ユーザー情報マージン */
    td.header-login-user-info-margin-phone {
        width: 30%;
    }

    /* ログアウト */
    td.header-login-logout-phone {
        font-family: system-ui;
        text-align: center;
        width: 30%;
    }

    /* ログアウトボタン */
    button.btn-logout-phone {
        background-color: #004b9b;
        border-color:  #004b9b;
        font-size: 75%;
        width: 100%;
    }
}

/* --------------- スマートフォン(横)【ログイン状態】 --------------- */
@media (orientation: landscape) {

    /* ヘッダーマージン */
    td.header-login-margin-phone {
        width: 25%;
    }

    /* 地点選択画面に戻る(予測画面の場合) */
    td.header-login-observatoryselect-phone {
        width: 25%;
    }

    /* 地点選択画面に戻るマージン(予測画面の場合) */
    td.header-login-observatoryselect-margin-phone {
        width: 22.5%;
    }

    /* 地点選択画面に戻るボタン(予測画面の場合) */
    button.btn-observatoryselect-phone {
        background-color: #004b9b;
        border-color:  #004b9b;
        font-family: system-ui;
        font-size: 85%;
        text-align: center;
        width: 100%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-login-cloud-logo-phone,
    td.header-login-river-logo-phone {
        width: 5%;
    }

    /* 雲ロゴ画像 */
    /* 川ロゴ画像 */
    img.header-login-cloud-logo-phone,
    img.header-login-river-logo-phone {
        width: 95%;
    }

    /* タイトルロゴ */
    td.header-login-title-logo-phone {
        text-align: center;
        width: 40%;
    }

    /* タイトルロゴ画像 */
    img.header-login-title-logo-phone {
        width: 85%;
    }

    /* ユーザー情報 */
    td.header-login-user-info-phone {
        color: #ffffff;
        font-family: system-ui;
        font-size: 85%;
        text-align: center;
        width: 50%;
        word-break: break-all;
    }

    /* ユーザー情報マージン */
    td.header-login-user-info-margin-phone {
        width: 25%;
    }

    /* ログアウト */
    td.header-login-logout-phone {
        font-family: system-ui;
        text-align: center;
        width: 25%;
    }

    /* ログアウトボタン */
    button.btn-logout-phone {
        background-color: #004b9b;
        border-color:  #004b9b;
        font-size: 85%;
        width: 100%;
    }
}

/* --------------- タブレット(縦)【ログアウト状態】 --------------- */
@media (orientation: portrait) {

    /* ヘッダー */
    table.header-not-login-tablet {
        background-color: #004b9b;
        border-collapse:collapse;
        color: #ffffff;
        height: 60px;
        min-width: fit-content;
        width: 100%;
    }

    /* ヘッダーマージン */
    td.header-not-login-margin-tablet {
        width: 25%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-not-login-cloud-logo-tablet,
    td.header-not-login-river-logo-tablet {
        width: 7.5%;
    }

    /* 雲ロゴ画像 */
    /* 川ロゴ画像 */
    img.header-not-login-cloud-logo-tablet,
    img.header-not-login-river-logo-tablet {
        width: 100%;
    }

    /* タイトルロゴ */
    td.header-not-login-title-logo-tablet {
        text-align: center;
        width: 40%;
    }

    /* タイトルロゴ画像 */
    img.header-not-login-title-logo-tablet {
        width: 100%;
    }
}

/* --------------- タブレット(横)【ログアウト状態】 --------------- */
@media (orientation: landscape) {

    /* ヘッダー */
    table.header-not-login-tablet {
        background-color: #004b9b;
        border-collapse:collapse;
        color: #ffffff;
        height: 60px;
        min-width: fit-content;
        width: 100%;
    }

    /* ヘッダーマージン */
    td.header-not-login-margin-tablet {
        width: 30%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-not-login-cloud-logo-tablet,
    td.header-not-login-river-logo-tablet {
        width: 5%;
    }

    /* 雲ロゴ画像 */
    /* 川ロゴ画像 */
    img.header-not-login-cloud-logo-tablet,
    img.header-not-login-river-logo-tablet {
        width: 100%;
    }

    /* タイトルロゴ */
    td.header-not-login-title-logo-tablet {
        text-align: center;
        width: 30%;
    }

    /* タイトルロゴ画像 */
    img.header-not-login-title-logo-tablet {
        width: 100%;
    }
}

/* --------------- タブレット(縦横共通)【ログイン状態】 --------------- */

/* 地点選択画面に戻る(予測画面の場合) */
td.header-login-observatoryselect-tablet {
    width: 25%;
}

/* 地点選択画面に戻るボタン(予測画面の場合) */
button.btn-observatoryselect-tablet {
    background-color: #004b9b;
    border-color: #004b9b;
    font-family: system-ui;
    width: 100%;
}

/* 雲ロゴ画像 */
/* 川ロゴ画像 */
/* タイトルロゴ画像 */
img.header-login-cloud-logo-tablet,
img.header-login-river-logo-tablet,
img.header-login-title-logo-tablet {
    width: 100%;
}

/* --------------- タブレット(縦)【ログイン状態】 --------------- */
@media (orientation: portrait) {

    /* ヘッダーマージン */
    td.header-login-margin-tablet {
        background-color: #004b9b;
        width: 25%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-login-cloud-logo-tablet,
    td.header-login-river-logo-tablet {
        background-color: #004b9b;
        width: 7.5%;
    }

    /* タイトルロゴ */
    td.header-login-title-logo-tablet {
        background-color: #004b9b;
        text-align: center;
        width: 40%;
    }
}

/* --------------- タブレット(横)【ログイン状態】 --------------- */
@media (orientation: landscape) {

    /* ヘッダーマージン */
    td.header-login-margin-tablet {
        background-color: #004b9b;
        width: 30%;
    }

    /* 雲ロゴ */
    /* 川ロゴ */
    td.header-login-cloud-logo-tablet,
    td.header-login-river-logo-tablet {
        background-color: #004b9b;
        width: 5%;
    }

    /* タイトルロゴ */
    td.header-login-title-logo-tablet {
        background-color: #004b9b;
        text-align: center;
        width: 30%;
    }
}

/* ユーザー情報 */
td.header-login-user-info-tablet {
    color: #ffffff;
    font-family: system-ui;
    text-align: center;
    width: 40%;
    word-break: break-all;
}

/* ユーザー情報マージン */
td.header-login-user-info-margin-tablet {
    width: 25%;
}

/* ログアウト */
td.header-login-logout-tablet {
    font-family: system-ui;
    text-align: center;
    width: 25%;
}

/* ログアウトボタン */
button.btn-logout-tablet {
    background-color: #004b9b;
    border-color: #004b9b;
    width: 100%;
}