/*
 * #56b9d0  青
 * #fefefe  白
 * #fbba42  オレンジ
 * #f24c27  赤
 * #3b3f42  黒
 */

/* 全体 *****************************************************/

html, body {
    background-color: #fefefe;
    font-size: 16px;
    line-height: 24px;
    color: #3b3f42;
}


/* ヘッダー・フッター *****************************************************/

.header {
    padding: 5px 0;
    background-color: #3b3f42;
    border-bottom: solid 3px #56b9d0;
}

.header .logo {
    width: auto;
    height: 30px;
}

.header, .header a, .header a:hover {
    color: #fff;
}

.logout-wrap {
    margin-top: 5px;
    float: right;
}

.footer {
    margin-top: 40px;
    font-size: 13px;
}


/* 共通 *****************************************************/

h1, h2, h3, h4 {
    margin-top: 40px;
    margin-bottom: 15px;
}

h3 {
    padding: 6px 8px;
    border-width: 0 0 0 8px;
    border-color: #3b3f42;
    border-style: solid;
}

a {
    color: #4BA1B5;
}

td {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

input,
textarea,
select,
.btn {
    border-radius: 0 !important;
}

.section-main {
    padding-top: 10px;
    padding-bottom: 10px;
}

.user-info-id {
    text-align: right;
    font-size: 13px;
}

.btn-color {
    background-color: #56b9d0 !important;
    border-color: #56b9d0 !important;
    color: #fff !important;
}

.btn-color:hover,
.btn-color:focus,
.btn-color:active {
    background-color: #4BA1B5 !important;
    border-color: #4BA1B5 !important;
    color: #fff !important;
}

.rect {
    border-radius: 0;
}

.form-item-section {
    margin-top: 25px;
    margin-bottom: 25px;
}

.form-title {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 18px;
}

.form-description {
    font-size: 13px;
    line-height: 21px;
}

.required {
    font-weight: bold;
    font-size: 0.8em;
    color: red;
}

.error-message {
    font-weight: bold;
    color: red;
}

.red {
    color: red;
}

.mini {
    font-size: 0.8em;
}

.data-frame {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: solid 1px #ddd;
}

.user-menu-frame {
    margin-top: 50px;
    margin-bottom: -20px;
    padding: 10px;
    font-size: 14px;
    background-color: #f8f8f8;
    border: solid 1px #ddd;
}

.for-example-text {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 5px;
    font-size: 13px;
    line-height: 21px;
    font-style: italic;
    background-color: #eee;
    border-radius: 4px;
}

.right-btn-menu {
    display: inline-block;
    float: right;
}

.right {
    text-align: right;
}

.sep {
    text-align: center;
    font-size: 20px;
    color: #ddd;
}

.saiban {
    font-size: 0.8em;
    color: #888;
}


/* ログインフォーム *****************************************************/

.form-login-wrap {
    text-align: center;
}

.form-login-wrap .form-login-section,
.form-login-wrap .form-login-section-info {
    margin-top: 20px;
    padding: 40px 20px;
    display: inline-block;
    width: 100%;
    max-width: 350px;
    background-color: #f3f3f3;
    text-align: left;
}

.form-login-wrap .form-login-section h3 {
    margin-top: 5px;
    margin-bottom: 20px;
}

.form-login-wrap .form-login-section input,
.form-login-wrap .form-login-section textarea {
    width: 100%;
}

.form-login-wrap .form-login-section .btn {
    margin-top: 20px;
}

.form-login-wrap .form-login-section-info {
    background-color: #fff;
    padding: 20px;
}


/* 会話説明 *****************************************************/

.kaiwa-img {
    width: 640px;
    max-width: 100%;

    border: solid 8px #ddd;
    border-radius: 12px;
}

.kaiwa-description {
    margin: 15px 0;
}


/* データ表 *****************************************************/

.data-row {
    margin: 10px 0;
}

.data-row-name {
    display: inline-block;
    vertical-align: top;
    width: 25%;
}

.data-row-value {
    display: inline-block;
    vertical-align: top;
    width: 70%;
}


/* アクセスログ *****************************************************/

#access_chart {
    width: 100%;
    height: 300px;
    display: inline-block;
}

.next-border {
    height: 1px;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.link-sep {
    font-size: 8px;
    color: #ccc;
}