﻿
body {
    font-size: 15px;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    /*padding: 120px 0 20px 0;*/
    /*margin: 0 0 0 0;*/
}


/* 基底 */

/* **************************************** */
/* マスターページ */
.page_container {
    padding-top: 16px;
    width: 100%;
    max-height: none;
    max-width: none;
}

.main_contents {
    height: 100%;
    /*min-width: 1000px;*/
    max-width: none;
}

.foot_contents {
    position: fixed !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    color: #000000;
    text-align: right;
    font-size: x-small;
    background-color: white;
    z-index: 30000;
}

.foot_table {
    padding: 0 0 0 0;
    width: 100%;
    height: 100%;
}

.foot_back {
    z-index: 30000;
}


/* **************************************** */

/* メインエリア */

.table_base {
    padding: 0 0 0 0;
}

    .table_base tr td {
        padding: 6px 2px 6px 2px;
    }


.table_ref {
    border: 1px solid Silver;
    border-collapse: collapse;
}

    .table_ref tr td {
        border: 1px solid Silver;
        padding: 2px;
        height: 18px;
    }

col.col_search_title {
    width: 140px;
}

col.col_search_value {
    width: 600px;
}

col.col_accent {
    width: 5px;
}

col.col_title {
    width: 140px;
}

col.col_value {
    width: 400px;
}

col.col_ref_title {
    background-color: WhiteSmoke;
    width: 100px;
}

col.col_ref_value {
    width: 300px;
}

/* bootstrapグリッド関連 */

.col_title {
    text-align: right;
    vertical-align: middle;
}

.row_margin {
    margin-bottom: 10px;
}

/* コントロール共通 */

.btn_m { /*ボタン*/
    width: 60px;
}

.button {
    min-width: 100px;
    display: inline-block;
    zoom: 1;
    padding: 8px 20px;
    margin: 0;
    cursor: pointer;
    border: 0;
    overflow: visible;
    text-decoration: none;
    white-space: nowrap;
    color: #555;
    background-color: #ddd;
    transition: background-color .2s ease-out;
    border-radius: 20px;
}

    .button:hover {
        background-color: #eee;
        color: #555;
    }

    .button:active {
        background: #e9e9e9;
        position: relative;
        top: 1px;
        text-shadow: none;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
        outline: none;
    }

    .button:focus {
        outline: none !important;
    }

    .button.positive {
        color: #fff;
        background-color: #009800;
    }

        .button.positive:hover, .button.positive:focus {
            color: #fff;
            background-color: #9DD79D;
            text-decoration: none;
        }

        .button.positive:active {
            color: #fff;
            background: #9DD79D;
        }

    .button.negative {
        color: #fff;
        background-color: #DF4B4B;
        border: 0;
    }

        .button.negative:hover, .button.negative:focus {
            background-color: #F3A7A7;
            text-decoration: none;
        }

        .button.negative:active {
            background: #F3A7A7;
        }

    .button.neutral {
        color: #fff;
        background-color: darkgray;
        border: 0;
    }

        .button.neutral:hover, .button.neutral:focus {
            background-color: #CDCDCD;
            text-decoration: none;
        }

        .button.neutral:active {
            background: #CDCDCD;
        }

    .button.disable {
        color: #555;
        background-color: #e9e9e9;
    }

        .button.disable:hover, .button.disable:focus {
            background-color: #e9e9e9;
            text-decoration: none;
        }

        .button.disable:active {
            background: #e9e9e9;
        }


.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


/* **************************************** */
/* 案内画面 */

.notice-area {
    color: #2394aa;
}

    .notice-area > .frame {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-all;
        border: 1px solid #2394aa;
    }

        .notice-area > .frame > .header {
            font-size: 0.8em;
            padding-bottom: 6px;
        }

        .notice-area > .frame > .message {
            font-size: 0.6em;
        }

/* **************************************** */
/* クレジットカード情報画面 */

.title-row {
    font-size: 1.2em;
    background-color: lightgray;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
}

.card-row {
    background-color: whitesmoke;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
}

.show-image {
    text-decoration: underline;
    color: #00F;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

/* **************************************** */
/* validate */
span.error-text {
    color: red;
    font-size: 0.8em;
}

.error-message {
    color: red;
    font-size: 0.8em;
}

.logo-height {
    height: 50px;
    padding-bottom: 4px;
}

@media (min-width: 768px) {
    .logo-md-height {
        height: 50px;
        padding-bottom:4px;
    }
}
