@charset "utf-8";

body {
    height: 100%;
    font-size: 75%;
    font-family: 'Arial', 'Helvetica', sans-serif;
    background-color: #FFF;
}

html, body, div, span, p {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    color: #333435;
}

a:hover {
    text-decoration:underline;
}

th {
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: 200%;
    margin:10px;
    display:inline;
}

body a:hover {
    text-decoration: underline;
    color: #015ba7;
}
body, td {
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
}

/*
ヘッダーのheightを変更した場合は、
#formwrapのheightの値をヘッダーの増減と同じだけ増減させる
*/
body #Headerbody {
    height : 30px;
    position:relative;
    background-image:none;
    background-color:#0081bb;
    padding:0px;
    margin-bottom:0px;
    border-radius: 0px 0px 8px 8px;
    -moz-border-radius:0px 0px 8px 8px;
    -webkit-border-radius:0px 0px 8px 8px;
}

#Headerbody #Header_left {
    float : left;
}

#Headerbody #Header_right {
    float : right;
    height : 100%;
    padding-right: 20px;
    display: flex;
    align-items: center;
}

@media screen and (min-width : 320px) and (max-width : 374px) {
    #Headerbody #Header_right {
        position:absolute;
        right:5px;
        padding-right: 5px;
    }
}

/*ヘッダー横のメニュー*/
.headmenu {
    white-space: nowrap;
    font-weight: bold;
    text-align: right;
}

.Headerbody .navLinks {
    margin-top: 0;
    position: static;
}

@media screen and (max-width : 480px) {
    .linkElements font {
        display:none
    }
}

.navLinks .linkElements > a {
    text-decoration: none;
    font-size: 1em;
    color:#fff;
}

.navLinks .linkElements a:hover {
    text-decoration: underline;
}

.navLinks a.headmenu:hover {
    text-decoration: none;
}

/*メイン*/
#pagewrap {
    width: 100%;
    height: 100%;
    min-width: 320px;
    max-width: 955px;
    margin: 0 auto;
    text-align: left;
}

#formwrap {
    width:95%;
    height: calc(100% - 90px);  /*ヘッダーのheight+ヘッダー下のmargin+padding上下*/
    min-height: 480px;
    padding: 15px 2.5% 10px 2.5%;
}

@media screen and (min-width : 480px) and (max-width : 954px) {
    #formwrap {
        height: calc(100% - 131px);  /*ヘッダーのheight+ヘッダー下のmargin+padding上下*/
        padding: 36px 2.5% 30px 2.5%;
    }
}

@media screen and (min-width : 955px) {
    #formwrap {
        width:895px;
        height: calc(100% - 131px);  /*ヘッダーのheight+ヘッダー下のmargin+padding上下*/
        padding: 36px 30px 30px 30px;
    }
}

@media screen and (max-height : 568px) {
    #formwrap {
        padding-bottom: 8px;
    }
}

#loginformwrap {
    width:95%;
    height: calc(100% - 90px);  /*ヘッダーのheight+ヘッダー下のmargin+padding上下*/
    min-height: 480px;
    padding: 15px 2.5% 10px 2.5%;
}

@media screen and (min-width : 480px) and (max-width : 954px) {
    #loginformwrap {
        height: calc(100% - 131px);  /*ヘッダーのheight+ヘッダー下のmargin+padding上下*/
        padding: 36px 2.5% 30px 2.5%;
    }
}

@media screen and (min-width : 955px) {
    #loginformwrap {
        width:895px;
        height: calc(100% - 131px);  /*ヘッダーのheight+ヘッダー下のmargin+padding上下*/
        padding: 36px 30px 30px 30px;
    }
}

@media screen and (max-height : 568px) {
    #loginformwrap {
        padding-bottom: 8px;
    }
}

#loginpage .content_box {
    padding: 0px;
    height: 100%;
}

#loginpage .content_box, #formwrap {
    border-radius: 8px; -moz-border-radius:8px; -webkit-border-radius:8px;
    background-color: #CEEFFF;
}

#loginpage .content_box, #loginformwrap {
    border-radius: 8px; -moz-border-radius:8px; -webkit-border-radius:8px;
    background-color: #CEEFFF;
    height: auto;
}

/*入力フォーム*/
.inputbox {
    flex-shrink: 0;
    background: transparent;
    position:relative;
}

.glow {
    background:#FAFAFA none repeat scroll 0 0;
    border:1px solid #ccc;
    font-size:14px;
    line-height:20px;
    padding:3px;
    width:90%;
    margin-top:4px;
    margin-bottom:15px;
}

.glow:focus {
    box-shadow: 0 0 8px rgba(108, 196, 227, 0.5);
    -moz-box-shadow: 0 0 8px rgba(108, 196, 227, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(108, 196, 227, 0.5);
    background: none repeat scroll 0 0 #e8f5fe;
    border-color: rgba(108, 196, 227, 0.75) !important;
    outline: medium none;
}

.glowpass {
    background:#FAFAFA none repeat scroll 0 0;
    border:1px solid #ccc;
    font-size:14px;
    line-height:20px;
    padding:3px;
    width:90%;
    margin-top:4px;
    margin-bottom:0px;
}

.glowpass:focus {
    box-shadow: 0 0 8px rgba(108, 196, 227, 0.5);
    -moz-box-shadow: 0 0 8px rgba(108, 196, 227, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(108, 196, 227, 0.5);
    background: none repeat scroll 0 0 #e8f5fe;
    border-color: rgba(108, 196, 227, 0.75) !important;
    outline: medium none;
}

/*ログイン画面*/
#login_box {
    box-sizing: border-box;
    float: none;
    width:95%;
    max-width:390px;
    font-size:12px;
    line-height:16px;
    color:#333333;
    background-color: #ffffff;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    border: 3px solid #0081bb;
    border-radius: 10px; -moz-border-radius:10px; -webkit-border-radius:10px;
    margin:0 auto;
}

@media screen and (min-width : 480px) {
    #login_box {
        max-width: 435px;
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 15px;
        padding-left: 50px;
    }
}

/*パスワード変更画面*/
#user_box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    float: none;
    width:95%;
    height: 100%;
    min-height: 480px;
    max-width:530px;
    font-size:12px;
    line-height:16px;
    color:#333333;
    background-color: #ffffff;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    border: 3px solid #0081bb;
    border-radius: 10px; -moz-border-radius:10px; -webkit-border-radius:10px;
    margin:0 auto;
}

@media screen and (min-width : 480px) and (max-width : 955px) {
    #user_box {
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 10px;
        padding-left: 50px;
    }
}

@media screen and (min-width : 955px) {
    #user_box {
        width:530px;
        height: 100%;
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 10px;
        padding-left: 50px;
    }
}

.usertable {
    flex-shrink: 0;
    margin-bottom: 10px;
}

/*iPhone 5以下（幅320px）でアカウント情報が2列になる対策*/
@media screen and (max-width : 374px) {
    .usertable {
        font-size: 14px;
    }
}

.usertable tr {
    padding:0;
}

/*パスワードポリシー使用可能文字のテーブル*/
.policytable {
    padding: 0;
    font-size: 12px;
}

.policytable tr {
    width:100px;
}

.policytable tr th {
    font-weight:normal;
    white-space: pre;
    padding-right: 10px;
}

.notice {
    flex-shrink: 0;
    font-size: 13px;
}

.notice2 {
    flex-shrink: 0;
    font-size: 13px;
}

/*パスワードポリシーのスクロールバー表示*/
.scrollbar {
    flex-shrink: 1;
    box-sizing: border-box;
    padding-left: 10px;
    height: 100%;
    font-size:13px;
    line-height: 1.8;
    overflow-y:scroll;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*Chrome、Safari用スクロールバーデザイン*/
.scrollbar::-webkit-scrollbar {
    width: 8px;
}
.scrollbar::-webkit-scrollbar-thumb {
    background: #0081bb;
    border-radius: 5px;
}
.scrollbar::-webkit-scrollbar-track-piece:start {
    background: #CEEFFF;
}
.scrollbar::-webkit-scrollbar-track-piece:end {
    background: #ffffff;
}

/*スクロールできない時にスクロールバーを隠す*/
/*Firefox*/
@-moz-document url-prefix() {
    .scrollbar{
        overflow: auto;
    }
}
/*IE10以降*/
@supports (-ms-ime-align:auto) {
    .scrollbar{
        overflow: auto;
    }
}
/*Edge*/
@media all and (-ms-high-contrast:none) {
    .scrollbar{
        overflow: auto;
    }
}

/*ボタンデザイン*/
.submit {
    text-align: center;
}

.btn {
    width: 150px;
    height: 40px;
    text-align: center;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 5px;
    border: 2px solid #0081bb;
    background:#0081bb;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    transition: .3s;
    cursor : pointer;
}
.btn:hover {
    border: 2px solid #0081bb;
    background:#fff;
    color: #0081bb;
}
.btn:disabled {
    border: 2px solid #bbb;
    background:#eee;
    color: #0081bb;
    cursor :default;
}

.password-footer > input[type=checkbox] {
    display: none;
}

/* チェックボックスデザイン */
.checkbox {
    box-sizing: border-box;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative;
    display: inline-block;
    margin: 0px;
    padding: 10px 10px 5px 30px;
    border-radius: 8px;
    background-color: #f6f7f8;
    vertical-align: middle;
    cursor: pointer;
}
.checkbox:hover {
    background-color: #DCF3FF;
    /*background-color: #d7e2ed;*/
}
.checkbox:hover:after {
    border-color: #0081bb;
}
.checkbox:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 5px;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 6px;
    content: '';
}

.checkbox:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 11px;
    display: block;
    margin-top: -7px;
    width: 5px;
    height: 9px;
    border-right: 3px solid #0081bb;
    border-bottom: 3px solid #0081bb;
    content: '';
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
    opacity: 1;
}

.message-box-dlg div.ui-dialog-titlebar {
    background-color: #3399cc;
    border-color: #3399cc;
}
.warning-box-dlg div.ui-dialog-titlebar {
    background-color: #ff9933;
    border-color: #ff9933;
}
.error-box-dlg div.ui-dialog-titlebar {
    background-color: #ff6699;
    border-color: #ff6699;
}
.error-detail-dlg div.ui-dialog-titlebar {
    background-color: #ff6699;
    border-color: #ff6699;
}
.confirm-box-dlg div.ui-dialog-titlebar {
    background-color: #3399cc;
    border-color: #3399cc;
}

.selected {
    color : #22AAFF;
    background-color : #FFAA22;
}

/* override jquery-ui style */
.ui-widget-header {
    background-image: none;
}

.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight {
    background-image: none;
}
.errorcaution {
    color:#ff0000;
}
.errorcaution:last-child {
    margin-bottom:10px;
}
table.Header_table tr td a img {
    border:none;
}

/*ポップアップメッセージの右上×ボタン非表示*/
.ui-dialog .ui-dialog-titlebar-close {
    display: none !important;
}

/*hideShowPassword*/
.hideshowpassword-wrapper {
    width:100% !important;
}

.password-footer {
    padding:0px;
}

/* IEのパスワード表示ボタンを非表示 */
::-ms-reveal {
    display: none;
}

/*パスワード変更中のローディング画像*/
#loading-view {
    /* 領域の位置やサイズに関する設定 */
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    /* 背景関連の設定 */
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;

    background-image:
        url(../img/loading.gif),
        url(../js/img/ui-bg_diagonals-thick_20_666666_40x40.png);
    background-position:
        center center,
        50% 50%;
    background-repeat:
        no-repeat,
        repeat;
    background-attachment:
        fixed,
        fixed;
}

.login_title {
    font-size: 20px;
    font-weight:bold;
    color:#007099;
    margin-bottom: 20px;
}

.gsuiteconfig {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}