@charset "UTF-8";
/*=================================================================================*

 共通部品CSS

 ==================================================================================*/

/*************************************************************************
 *ヘッダー部品
 *************************************************************************/
/* ヘッダー：タイトルと契約者名を表示するエリア定義 */
.header_title_field {
    width: calc(100% - 120px);
    display: inline-block;
    position: relative;
}

/* ヘッダー：ログアウトボタン等表示部分 */
.header_menu_field {
    display: inline-block;
    position: static;
}

 /* ログアウトボタン等を表示するエリアの設定 */
.header_upper div.header_menu2 .header_button {
    display: table-row;
}

/* ログアウトボタン ボタンレイアウト */
.header_logout_button {
    width: 100%;
    z-index: 1;
    padding:3px 5px;
    border-radius: 16px;
    font-size: 1.6rem;
    background: #f8c62d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: block;
    box-sizing: border-box;
    position:relative;
    line-height: 2.4rem;
    margin: 0 0 3px 0;
    text-align: center;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: bold;
}

.header_logout_button:hover {
    text-decoration:none !important;
    background:#ffd63d;
}

/* Q&Aボタン */
.header_qa_button {
    width: 100%;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 1.6rem;
    background: #006c60;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: block;
    box-sizing: border-box;
    position:relative;
    line-height: 2.4rem;
    margin: 0 0 3px 0;
    text-align:center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.header_qa_button:hover {
    text-decoration:none !important;
    background: #007c70;
}

/* お知らせボタン */
.header_osirase_button {
    width: 100%;
    z-index:3;
    padding:3px 10px;
    border-radius: 16px;
    font-size: 1.6rem;
    background: #0593D4 ;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: block;
    box-sizing: border-box;
    position: relative;
    line-height: 2.4rem;
    margin: 0 0 3px 0;
    text-align:center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.header_osirase_button:hover {
    text-decoration:none !important;
    opacity:0.85;
}

/* お知らせ無効ボタン */
.header_unusable_osirase_button {
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 2.4rem;
    background: #c0c0c0 ;
    border-radius: 16px;
    padding:3px 10px;
    position: relative;
    display: inline-block;
    overflow: visible;
    min-height: 2.4rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    z-index:1;
    width:100px;
    float:right;
    text-align:center;
    margin: 0 0 3px 0;
    left: 1px;
}

/* 最初に表示するボタンの位置 真ん中 */
.header_first_button_position_middle {
    margin-top: 34px;
}

/* ログアウトのモーダル 閉じるボタンhover時 */
/* FIXME:【AP基盤】モックFIX後、id="id_modal_window16"を正しいものに修正する（js,css込み） */
#id_modal_window16 .close_modal_logout:hover {
    text-decoration: none;
}

/* モーダル共通 閉じるボタンのレイアウト */
.modal_close_btn {
    width: 50px;
    margin: 2px 2px 0px auto;
}


/*************************************************************************
 *メッセージ領域
 *************************************************************************/
.info_err ul li {
    padding:3px 0 3px 1em;
    line-height:1.3;
}

.info_err ul li:before {
    margin:0 0 0 -1em;
}

/* 禁止文字列エラーメッセージ 非表示 */
.prohibited_str_err_none{
    display : none;
}

/* 禁止文字列エラーメッセージ 表示 */
.prohibited_str_err_block{
    display : block;
}

/*************************************************************************
 *エラー入力項目のスタイル
 *************************************************************************/
.error-bg-color {
    border:1px solid #b70909 !important ;
    background:#fedcea;
}

/* モーダル共通 背景固定 */
.showing_modal{
    position: fixed;
    overflow: hidden;
}

/*************************************************************************
 *フッター部品
 *************************************************************************/
.footer_ber_change {
    margin-top: 21px;
}