/* html全体 */
html{
    font-size: 14px;
}

/* htmlタグのクラス"kc-html-class" */
.kc-html-class{
    /* 背景：薄い青色 */
    background: #dbe0f1;
}

/* bodyタグのクラス"kc-body-class" */
.kc-body-class{
    margin: 0px;
    padding: 0px 20px 20px;
    box-sizing: border-box;
}

/* ログイン画面全体のdivタグのクラス"kc-login-class" */
.kc-login-class{
    /* 背景：白 */
    background: #fff;
    /* 角の丸い枠 */
    border-radius: 18px;
    /* 影をつける */
    box-shadow: 0 3px 6px 0 rgb(0 43 98 / 30%);
    
    /* 伸びる、収縮しない */
    flex: 1 0 auto;
    
    /*中央ぞろえ*/
    margin-left: auto;
    margin-right: auto;
    max-width: 1326px;
    min-width: 1024px;
    
    padding: 0 28px 20px;
    /* padding後にboxの大きさを変えない設定 */
    box-sizing: border-box;
    
    /* 相対位置 */
    position: relative;
    
    /* 横幅を全表示(横幅が狭くなると縮まずスクロールバーが出る) */
    width: 100%;
}

/* ログイン画面のタイトル */
h1#kc-page-title{
    background: #002b62;
    border-radius: 18px 18px 0 0;
    color: #fff;
    font-size: 2.2rem;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: -28px;
    margin-right: -28px;
    padding: 25px 28px 14px;
    font-weight: normal;
}

/* フォームグループ(ラベルと入力フォームのセット) */
.kc-form-group-class{
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

/* ラベル */
.kc-label-class{
    display: flex;
    min-width: 120px;
    position: relative;
    text-align: left;
}

/* 入力フォーム */
.kc-input-class{
    border: 1px solid #79899f;
    height: 32px;
    padding: 5px 10px;
    width: 100%;
    background: #fff;
    padding-right: 15px;
    padding-top: 8px;
    box-sizing: border-box;
}

.kc-form-group-class + .kc-form-group-class {
    margin-top: 20px;
}

/* ロゴ画像 */
#logo{
    background-image: url(../img/Title.gif);
    background-repeat: no-repeat;
    height: 150px;
    width: 450px;
    margin: 30px 5px;
}

/* ログインボタン */
#kc-form-login #kc-form-buttons{
    align-items: center;
    display: flex;
    justify-content: center;
}

/* ログインボタン */
#kc-login{
    background: #3b5a81;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: 1.4rem;
    font-weight: nomal;
    justify-content: center;
    line-height: 1;
    width: 240px;
    padding: 13px 15px 7px;
    position: relative;
    text-align: center;
}

/* ログイン画面のボタンコンテナ */
.kc-button-container{
    align-items: center;
    display: flex;
    justify-content: center;
}

/* ボタンコンテナの間隔をあける */
.kc-button-container + .kc-button-container {
    margin-top: 20px;
}

/* ログイン画面のボタン */
.kc-login-button{
    background: #3b5a81;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: 1.4rem;
    font-weight: nomal;
    justify-content: center;
    line-height: 1;
    width: 240px;
    padding: 13px 15px 7px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

/* paddingの上書き */
#kc-account{
    padding: 13px 0px 7px;
}

/* ソーシャルアカウント */

#kc-form h4{
    text-align: center;
    margin: 0.5em;
}

#kc-social-providers{
    display: flex;
    justify-content: center;
}

.kc-form-social-account-list-class{
    padding-inline-start: 0px;
}

.kc-form-social-account-list-button-class{
    background: #3b5a81;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: 1.4rem;
    font-weight: nomal;
    justify-content: center;
    line-height: 1;
    width: 240px;
    padding: 13px 0px 7px;
    position: relative;
    text-align: center;
    text-decoration: none;
}


/* ソーシャルアカウントボタンコンテナの間隔をあける */
.kc-form-social-account-list-button-class + .kc-form-social-account-list-button-class {
    margin-top: 20px;
}

/* hrタグのマージン */
#kc-content hr{
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/* ログイン画面のエラーメッセージ */
#input-error{
    text-align: center;
    color: red;
    font-size: 1.2em;
    display: block;
    margin: 1.0em 45% 1.0em auto;
}


/* パスワード再発行画面 */

/* パスワード再発行_フォーム全体 */
#kc-reset-password-form{
    margin: 2em;
    padding: 1em;
}

/* パスワード再発行_フォームグループ(ラベルと入力フォームのセット) */
#kc-reset-password-form .kc-form-group-class{
    display: flex;
    flex: 1 1 auto;
    margin: 2em 0 2em;
    width: 100%;
}

/* パスワード再発行_フォームのラベル */
#kc-reset-password-form .kc-label-wrapper-class{
    width: 20%;
    padding: 0;
}

/* パスワード再発行_フォームの入力欄 */
#kc-reset-password-form .kc-input-wrapper-class{
    width: 100%;
    padding: 0;
}

/* 下部のボタンの外枠 */
#kc-reset-password-buttons-id{
    margin: 0.5em auto 0.5em;
}

/* パスワード再発行_前に戻るボタン(ラッパー) */
#kc-reset-password-buttons-id #kc-form-options{
    margin-right: auto;
}

/* パスワード再送信_前に戻るボタン */
#kc-reset-password-back-id{
    width: 200px;
    background: #b1bdcd;
    color: #002b62;
    font-size: 1.4em;
    text-align: center;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #e5e7e9;
    display: block;
    text-decoration: none;
}

/* パスワード再送信_送信ボタン(ラッパー) */
#kc-reset-password-buttons-id #kc-form-buttons{
    margin-left: auto;
}

/* パスワード再送信_送信ボタン */
#kc-reset-password-submit-id{
    width: 220px;
    background: #3b5a81;
    color: #fff;
    font-size: 1.4em;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #3b5a81;
    display: block;
}

/* パスワード更新画面(ログインアクション) */

/* パスワード更新_フォーム全体 */
#kc-passwd-update-form{
    margin: 2em;
}

/* パスワード更新_フォームのラベル */
#kc-passwd-update-form .kc-label-wrapper-class{
    width: 20%;
    padding: 0;
}

/* パスワード更新_フォームの入力欄 */
#kc-passwd-update-form .kc-input-wrapper-class{
    width: 80%;
    padding: 0;
}

/* 下部のボタンの外枠① */
#kc-passwd-update-buttons-id{
    margin: 0.5em auto 0.5em;
    padding: 0.5em;
    width: 100%;
}

/* 下部のボタンの外枠② */
#kc-passwd-update-buttons-id #kc-form-buttons{
    display: flex; 
    width: 100%;
}

/* パスワード更新_キャンセルボタン(ラッパー) */
#kc-passwd-update-buttons-id #update-password-ids-wrapper {
    margin-right: auto;
}

/* パスワード更新_キャンセルボタン */
#update-password-ids{
    background: #b1bdcd;
    color: #002b62;
    font-size: 1.4em;
    text-decoration: none;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #e5e7e9;
    display: block;
}

/* パスワード更新_更新ボタン(ラッパー) */
#kc-passwd-update-buttons-id #update-password-submit-id-wrapper{
    margin-left: auto;
}

/* パスワード更新_更新ボタン */
#update-password-submit-id{
    background: #3b5a81;
    color: #fff;
    font-size: 1.4em;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #3b5a81;
    display: block;
}

/* ユーザ情報登録_エラーメッセージ */
.kc-input-error-message-class{
    color: red;
}


/* フォームのタイトル */
#form-title{
    margin: 2em auto 0;
    padding: 1em;
    width: 90%;
    border-top: 1px solid #002b62;
    border-right: 1px solid #002b62;
    border-left: 1px solid #002b62;
    background: #e5e7e9;
    font-weight: bold;
    color: #002b62;
}

/* フォームの外枠 */
#kc-form-div-id{
    margin: 0em auto 2em;
    padding: 1em;
    width: 90%;
    border: 1px solid #002b62; /* 枠線 */
}

/* フォームのマージンを解除 */
#kc-form-div-id .kc-form-group-class + .kc-form-group-class {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px dashed #a4aab0;
}

/* フォームのラベル */
.kc-label-wrapper-class{
    width: 20%;
}

/* フォームの入力欄 */
.kc-input-wrapper-class{
    width: 80%;
}

/* 利用規約同意の外枠 */
#accept-form-id{
    margin: 0.5em auto 0.5em;
    padding: 0.5em;
    width: 90%;
}

/* 利用規約同意 */
#accept-box-id{
    text-align: center;
    font-size: 1.2em;
 }

/* 下部のボタンの外枠 */
#kc-form-id{
    margin: 0.5em auto 0.5em;
    padding: 0.5em;
    width: 90%;
}

/* 前に戻るボタン(ラッパー) */
#kc-form-id .kc-form-group-class #kc-form-options{
    margin-right: auto;
}

/* 前に戻るボタン */
#kc-back-to-login{
    background: #b1bdcd;
    color: #002b62;
    font-size: 1.4em;
    text-decoration: none;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #e5e7e9;
    display: block;
}

/* ユーザ新規登録ボタン(ラッパー) */
#kc-form-id .kc-form-group-class #kc-form-buttons{
    margin-left: auto;
}

/* ユーザ新規登録ボタン */
#kc-do-register{
    background: #3b5a81;
    color: #fff;
    font-size: 1.4em;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #3b5a81;
    display: block;
}

/* エラーメッセージ_ユーザ新規登録_利用同意 */
#accept_box_message{
    margin: 0.5em auto 0.5em;
    font-size: 1.2em;
    color: red;
    text-align: center;
}
/* エラーメッセージ_ユーザ新規登録_氏名_名 */
#firstName-message{
    color: red;
}
/* エラーメッセージ_ユーザ新規登録_氏名_姓 */
#lastName-message{
    color: red;
}
/* エラーメッセージ_ユーザ新規登録_Eメール */
#email-message{
    color: red;
}
/* エラーメッセージ_ユーザ新規登録_ユーザID */
#username-message{
    color: red;
}
/* エラーメッセージ_ユーザ新規登録_パスワード */
#password-message{
    color: red;
}
/* エラーメッセージ_パスワードの更新_新しいパスワード */
#password-new-message{
    color: red;
}
/* エラーメッセージ_パスワードの更新_パスワード(確認) */
#password-confirm-message{
    color: red;
}

/* ユーザ名とログインを再開するボタンを非表示にする */
.kc-login-class header #kc-username{
    display: none;
}

.alert-warning.pf-m-warning{
    padding-top: 1em;
}

/* ユーザ情報更新_送信ボタン(ラッパー) */
#kc-update-profile-form .kc-form-group-class #kc-form-buttons{
    margin-left: auto;
}

/* ユーザ情報更新_送信ボタン */
#kc-update-profile-submit-id{
    width: 220px;
    background: #3b5a81;
    color: #fff;
    font-size: 1.4em;
    padding: 10px;
    border: 1px;
    box-shadow: 0px 2px 4px #3b5a81;
    display: block;
}


/* THの定義 ----------------------------------------------------------------- */
th {
  background-color : #FFFFFF;                       /* 背景色:白              */
  font-family : inherit;                            /* フォント:継承          */
  font-size : medium;                               /* フォントサイズ:medium  */
  color : #483D8B;                                  /* カラー:任意指定可能    */
  text-decoration : none;                           /* 装飾:線無し            */
}

/* TDの定義 ----------------------------------------------------------------- */
td {
  background-color : #FFFFFF;                       /* 背景色:白              */
  font-family : inherit;                            /* フォント:継承          */
  font-size : medium;                               /* フォントサイズ:medium  */
  color : #483D8B;                                  /* カラー:任意指定可能    */
  text-decoration : none;                           /* 装飾:線無し            */
}

/* 運用アナウンス部TDの定義 ------------------------------------------------- */
td.sysinf {
  background-color : #FFFFFF;                       /* 背景色:白              */
  font-family : inherit;                            /* フォント:継承          */
  font-size : medium;                               /* フォントサイズ:medium  */
  color : #483D8B;                                  /* カラー:任意指定可能    */
  text-decoration : none;                           /* 装飾:線無し            */
}

/* ＦＯＲＭボタン(全般)の定義 ----------------------------------------------- */

button {
  background-color : transparent;                   /* 背景色:任意指定可能    */
  color : #000000;                                  /* カラー:任意指定可能    */
  font-family : inherit;                            /* フォント:継承          */
  font-size : 100%;                                 /* フォントサイズ:100%    */
  border-top : 1px solid #FFFFFF;                   /* ボーダー上:任意指定    */
  border-left : 1px solid #FFFFFF;                  /* ボーダー左:任意指定    */
  border-bottom : 1px solid #A9A9A9;                /* ボーダー下:任意指定    */
  border-right : 1px solid #A9A9A9;                 /* ボーダー右:任意指定    */
}

/* ログインのボタン定義 ----------------------------------------------- */
input.loginbutton {
	background:#646e74;
	border:solid 1px #7d8c9c;
	border-width: 0 0 1px 0;
	padding:10px;
	text-align:center;
	border-radius:3px;
	color:#ffffff;
	width:30%;
}

/* アンカー全体の定義 ------------------------------------------------------- */
#portalURL {
  background-color : transparent;                   /* 背景色:継承・透明      */
  font-family : inherit;                            /* フォント:継承          */
  font-size : 100%;                                 /* フォントサイズ:100%   */
  color : #000000;                                  /* カラー:任意指定可能    */
  text-decoration : none;                           /* 装飾:線無し            */
}

#portalURL:hover {
  background-color : transparent;                   /* 背景色:継承・透明      */
  font-family : inherit;                            /* フォント:継承          */
  font-size : 100%;                                 /* フォントサイズ:100%   */
  color : #0000FF;                                  /* カラー:任意指定可能    */
  text-decoration : none;                           /* 装飾:線無し            */
}