/************************************/
/*                                  */
/* 標準フォント関連                 */
/*                                  */
/************************************/
body {
    font-family     : Meiryo UI, Meiryo, "メイリオ";
    font-size       : 16px;
    overflow-x      : hidden;
    margin-bottom   : 40px;
}

@media print {
    body {
        font-family : Meiryo UI, Meiryo, "メイリオ";
        font-size   : 11px;
    }
    .no-print {
        display     : none;
    }
}

.button-box{
    margin-bottom   : 20px;
}

.base-red {
    color           : red !important;
}

/************************************/
/*                                  */
/* スタイル定義                     */
/*                                  */
/************************************/

html {
    position        : relative;
    min-height      : 100%;
}

header {
    padding         : 6px 12px;
}

h1 {
    font-size       : 24px;
}

h2 {
    border-left     : 10px solid #FF3333;
    border-bottom   : 1px solid #DD9999;
    text-indent     : 0.5em;
    font-size       : 20px;
    font-weight     : bold;
}

body {
    background      : #FDFDFD;
}

pre.terms {
    padding     : 6px 12px;
    font-size   : 14px;
    line-height : 1.42857143;
    max-height  : 30em;
}

fieldset {
    padding         : 6px 12px;
    border-left     : 2px solid #DD3333;
    margin-bottom   : 24px;
}

legend {
    font-size       : 18px;
    border-bottom   : 1px solid #bbbbbb;
}

hr.no-border {
    border          : 0;
}

hr.separator {
    border-color    : #aaaaaa;
    padding         : 6px 12px;
}

label.sm {
    font-size       : 14px;
    margin-right    : 16px;
}

.separator.dash {
    border-top      : 1px dashed #cccccc;
}

.label-required {
    background-color: #df534f;
}

.line-checkbox-title {
    margin-top      : 6px;
    margin-bottom   : 0;
    vertical-align  : middle;
}


/************************************/
/*                                  */
/* レイアウト関連                   */
/*                                  */
/************************************/


.information {
    font-family     : Meiryo, "メイリオ";
    font-size       : 14px;
}

.user-info {
    padding         : 6px 12px;
}

.login-info {
    padding         : 6px 12px;
    margin-right    : 20px;
    font-size       : 14px;
}

.button-area {
    padding         : 6px 12px;
    margin          : 20px;
}

.form-button-area {
    padding         : 6px 12px;
    margin          : 20px;
}

.logout-button-area {
    top             : 70px;
}

.label-area {
}


.flow-itme {
    float           : left;
    margin-right    : 20px;
}

.flow-itme-right {
    float           : right;
    margin-right    : 20px;
}

.float-right {
    margin-top      : 4px;
    float           : right;
}

.page-title {
    color           : white !important;
    background      : linear-gradient(#FF0000, #CC0000) !important;
    padding         : 0px 0px 0px 20px;
    margin-right    : 20px;
}

.desc {
    padding         : 0px 12px;
    color           : gray;
    text-align      : left;
}

.desc.strong {
    color           : black;
    font-weight     : bold;
}

.panel-footer.lg {
    position        : absolute;
    bottom          : 0;
    width           : 100%;
    height          : 40px;
}

/* ロゴイメージ表示TD設定 */
.logo_image {
      vertical-align:top;
      padding-top: 10px;
      padding-bottom: 2px;
}

/* ロゴイメージ(社名)表示TD設定 */
.logo_name {
      padding-top: 10px;
      padding-right: 15px;
      vertical-align:top;
}

/* メッセージの設定*/
.message {
      padding: 5px;
      border: 2px solid #000000;
}

.here {
      font-weight; bold;
      text-decoration: underline;
}

/************************************/
/*                                  */
/* フォーム関連                     */
/*                                  */
/************************************/

/************************************/
/*                                  */
/* テーブル関連                     */
/*                                  */
/************************************/

td.table-label {
    padding                     : 6px 12px;
}

td.table-label.default {
    font-weight                 : bold;
    border-bottom               : 2px solid #CC0000;
}

td.table-label.noborder {
    font-weight                 : bold;
}

td.table-label.border {
    color                       : white !important;
    background                  : linear-gradient(to right, #FF0000, #CC0000) !important;
    border-top-left-radius      : 4px;
    border-bottom-left-radius   : 4px;
}

td.table-text{
    padding                     : 6px 12px;
}
td.table-text.border{
    border-top                  : 1px solid gray;
    border-right                : 1px solid gray;
    border-bottom               : 1px solid gray;
    border-top-right-radius     : 4px;
    border-bottom-right-radius  : 4px;
}
td.table-text.default {
    border-bottom               : 2px solid gray;
}

td.error_area {
    color               : red;
    padding             : 6px 12px;
    border              : 1px solid red;
    border-radius       : 4px;
    background-color    : #ffffc0;
}

table.information {
    border-collapse : separate;
    border-spacing  : 4px 4px;
}

table.item {
    border-collapse : separate;
    border-spacing  : 0px 8px;
}

table.userinfo{
    width           : 100%;
}


table {
    table-layout    : fixed; 
}

/************************************/
/*                                  */
/* ＩＤ別レイアウト                 */
/*                                  */
/************************************/

@media screen {

    #userinfo table.item {
        border-collapse : separate;
        border-spacing  : 20px 16px;
    }
    #pglist table.item {
        border-collapse : separate;
        border-spacing  : 10px 8px;
    }
    
    #userinfo td.table-label {
        width           : 224px;
    }
    #purchase td.table-label  {
        width           : 160px;
    }
    #purchase td.table-text  {
        width           : 224px;
    }
    #fact td.table-label  {
        width           : 160px;
    }
    #fact td.table-text  {
        width           : 224px;
    }
    #pglist th {
        width           : 140px;
    }
    
}

@media screen{

}

@media (min-width:768px){

    .button-box{
        margin-bottom:  0px;
    }
}

@media print {
    #userinfo td.table-lable {
        width           : 156px;
    }
    #purchase td.table-label  {
        width           : 120px;
    }
    #purchase td.table-text  {
        width           : 156px;
    }
}