/* HTML TAG */
body {
    background-color: #f6f6f6;
    min-width: 570px;
}

/* verify用チャット部分全体 */
.verify-chat {
    background-color: #f6f6f6;
}

/* チャットボット利用の注意事項（モーダル-全体） */
#modal-usage-notice > .modal-dialog {
    position: absolute;
    width: 48rem;
    max-width: none;
    height: calc(1px + 5.25rem + 1px + 11rem + 1px);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* チャットボット利用の注意事項（モーダル-ヘッダ） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-header {
    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
}

/* チャットボット利用の注意事項（モーダル-ヘッダ(画像)) */
#usage-notice-image {
    display: inline-block;
    vertical-align: top;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
}

/* チャットボット利用の注意事項（モーダル-ヘッダ(タイトル)) */
#usage-notice-title {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: calc(100% - 9.5rem);
    height: 4rem;
    line-height: 4rem;
    margin: 0 0 0 1rem;
    font-size: 1.5rem;
}
#usage-notice-title > div {
    position: absolute;
    max-height: 4rem;
    line-height: 2rem; 
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    overflow: hidden;
}

/* チャットボット利用の注意事項（モーダル-ヘッダ(閉じるボタン)) */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-header > button.close {
    display: inline-block;
    vertical-align: top;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2.5rem;
}

/* チャットボット利用の注意事項（モーダル-本文） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-body {
    height: 11rem;
    padding: 0.5rem 1rem 0.75rem 1rem;
}

/* チャットボット利用の注意事項（モーダル-本文） */
#usage-notice-body {
    display: inline-block;
    width: 100%;
    height: 9.75rem;
    overflow-y: scroll;
}

/* チャットボット利用の注意事項（モーダル-フッタ） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-footer {
    display: none;
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
    text-align: center;
}

/* チャットボット利用の注意事項（モーダル-フッタ(閉じるボタン)） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-footer > button {
    width: 6rem;
    height: 2rem;
    padding: 0rem 0.5rem 0rem 0.5rem;
    border: 2px #898989 solid;
    background-color: #898989;
    color: white;
}

/* チャットのメインコンテンツ(ローディングアニメーション、会話、フィードバック(アンケート))表示のエリア */
#chat-container {
    margin: 0.75rem 1rem 3.25rem 1rem; /* margin-topはヘッダ部の高さ＋0.75rem */
    width: 100%;
}

/* チャットのメインコンテンツ(ローディングアニメーション、会話、フィードバック(アンケート))表示のエリア　※verify */
#chat-container.verify {
    width: calc(100% - 2rem);
}

/* 会話の表示エリア(全体) */
#chat-column {
    max-width: 100%;
    min-width: 5rem;
    z-index: 0;
    font-size: 0rem;
}

/* ==================================================
    会話(個々)の表示エリア
================================================== */
.message-container {
    display: none;
    width: 100%;
    margin: 0rem;
    border: 0rem;
    padding: 0rem 0rem 0.75rem 0rem;
    font-size: 1.1rem;
}

/* アバター(watson) */
.message-container > .watson-avatar {
    box-sizing: border-box;
    float: left;
    width: 5rem;
    height: 5rem;
    margin: 0rem;
    border-radius: 50%;
}

/* アバター(user) */
.message-container > .user-avatar {
    box-sizing: border-box;
    float: right;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0rem;
    border-radius: 50%;
    padding: 1px;
}

/* 会話の吹き出し部分 */
.message-container > .message {
    background-color: #ffffff;
    max-width: calc(100% - 12rem);
    border-radius: 0.5rem;
    margin: 0rem;
    padding: 0.75rem 1rem 0.75rem 1rem;
    position: relative;
    z-index: 0;
}

/* 会話の吹き出し部分(watson) */
.message-container.from-watson > .message {
    border: 2px solid #898989;
    margin-left: 1.25rem;
    float: left;
}

/* 会話の吹き出し部分(user) */
.message-container.from-user > .message {
    font-weight: bold;
    border: 2px solid #ee7800 ;
    margin-right: 1.25rem;
    float: right;
}

/* 会話の吹き出しの尖った部分 */
.message-container > .message::before {
    content: " ";
    top: 13px;
    height: 0;
    width: 0;
    margin-top: -2px;
    border-style: solid;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

/* 会話の吹き出しの尖った部分(watson) */
.message-container.from-watson > .message::before {
    left:-10px;
    border-color: transparent #ffffff transparent transparent;
    border-width: 12px 12px 12px 0;
}

/* 会話の吹き出しの尖った部分(user) */
.message-container.from-user > .message::before {
    right: -10px;
    border-color: transparent transparent transparent #ffffff;
    border-width: 12px 0 12px 12px;
}

/* 会話の吹き出しの尖った部分の線 */
.message-container > .message::after {
    content: " ";
    top: 13px;
    height: 0;
    width: 0;
    margin-top: -2px;
    border-style: solid;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

/* 会話の吹き出しの尖った部分の線(watson) */
.message-container.from-watson > .message::after {
    left: -13px;
    border-color: transparent #898989 transparent transparent;
    border-width: 12px 12px 12px 0;
}

/* 会話の吹き出しの尖った部分の線(user) */
.message-container.from-user > .message::after {
    right: -13px;
    border-color: transparent transparent transparent #ee7800;
    border-width: 12px 0 12px 12px;
}

/* ==================================================
    FAQ表示エリア
================================================== */
.faq-container {
    margin: 0.75rem 0rem 0rem 0rem;
    padding: 1rem;
    background-color: #f3f3f3;
    display: none;
}

/* FAQ表示エリア　※検索結果あり */
.faq-container.disp {
    display: block;
}

/* FAQのタイトル(アイコン＋ラベル) */
.faq-title {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

/* FAQのタイトル(アイコン＋ラベル) */
.faq-title > * {
    cursor: pointer;
}

/* FAQのタイトル(ラベル) */
.faq-title > label {
    font-weight: bold;
    margin: 0rem 0rem 0rem 0.5rem;
    width: calc(100% - 1.5rem);
}

/* FAQの検索結果 */
.faq-list {
    border-width: 0px;
    padding: 0rem 0rem 0rem 0.5rem;
    display: none;
}

/* FAQの検索結果の1行 */
.faq-list td {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    line-height: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

/* FAQの検索結果が0件の場合のメッセージ */
.faq-message {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

/* FAQの検索結果が0件の場合のメッセージ(アイコン＋ラベル) */
.faq-message > * {
}

/* FAQの検索結果が0件の場合のメッセージ(ラベル) */
.faq-message > label {
    margin: 0rem 0rem 0rem 0.5rem;
    width: calc(100% - 1.5rem);
}

/* ==================================================
    吹き出し内の選択ボタン表示エリア
================================================== */
.answer-select-btns {
    margin: 0.75rem 0rem 0rem 0rem;
}

/* 選択ボタン(縦・横共通) */
.answer-select-btn-1,
.answer-select-btn-m {
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    border-width: 1px;
    border-color: #898989;
    border-radius: 0rem;
    background-color: #ececec;
}

/* 選択ボタン(縦・横共通)　※マウスオーバー時 */
.answer-select-btn-1:hover,
.answer-select-btn-m:hover {
    background-color: #898989;
    color:#FFFFFF;
}

/* 選択ボタン(横) */
.answer-select-btn-1 {
    display: inline;
    text-align: center;
    min-width: 5.5rem;
}

/* 選択ボタン(横)　※最後のボタンを除く */
.answer-select-btn-1:not(:last-child) {
    margin-right: 1rem;
}

/* 選択ボタン(縦) */
.answer-select-btn-m {
    display: block;
    max-width: 100%;
    width:100%;
    margin-top: 0rem;
}

/* 選択ボタン(縦)　※1つ目のボタンを除く */
.answer-select-btn-m:not(:first-child) {
    margin-top: 0.25rem;
}

/* ==================================================
    フィードバック(評価)表示エリア
================================================== */
.evaluate-container {
    width: 100%;
    margin: 0.75rem 0rem 0rem 0rem;
}

/* 評価ボタン表示エリア */
.evaluate_rating {
    display: block;
    width: 30rem;
    max-width: 100%;
    margin: 0rem;
    border-radius: 0.25rem;
    padding: 0.65rem;
}

/* 評価ボタン表示エリア(ラベル) */
.evaluate-rating_lbl {
    display: inline-block;
    font-weight: bold;
    width: 13rem;
    max-width: 100%;
    margin: 0rem;
}

/* 評価ボタン表示エリア(ボタンエリア) */
.evaluate-rating-btns {
    display: inline-block;
}

/* 評価ボタン表示エリア(ボタン共通) */
.evaluate-rating-btn {
    display: inline-block;
    font-size: 1rem;
    width: 5.5rem;
    height: 2.25rem;
    margin: 0rem 1.5rem 0rem 0rem;
    border-radius: 0.25rem;
}

/* 評価ボタン(はい) */
.evaluate-rating-btn.yes {
    border-color: #ff6600;
    background-color: #ffeee3;
}

/* 評価ボタン(はい)　※マウスオーバー時 */
.evaluate-rating-btn.yes:hover {
    background-color: #ff6600;
    color:#FFFFFF;
}

/* 評価ボタン(いいえ) */
.evaluate-rating-btn.no {
    border-color: #898989;
    background-color: #ececec;
    margin-right: 0rem;
}

/* 評価ボタン(いいえ)　※マウスオーバー時 */
.evaluate-rating-btn.no:hover {
    background-color: #898989;
    color:#FFFFFF;
}

/* 評価ボタン押下後のメッセージ */
.evaluate-message {
    width: 100%;
    padding: 0.75rem;
    background-color: #f3f3f3;
}

/* 評価ボタン押下後のコメント欄 */
.evaluate-comment {
    display: block;
    width: 100%;
    height: 4.75rem;
    margin: 0.75rem 0rem 0rem 0rem;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

/* 評価のコメント送信ボタン表示エリア */
.evaluate-operator-btns,
.evaluate-send-btns {
    margin: 1rem 0rem 0rem 0rem;
}

/* 評価のコメント送信ボタン表示エリア　※after */
.evaluate-operator-btns::after,
.evaluate-send-btns::after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

/* 評価のオペレーターボタン */
.evaluate-operator-btn {
    font-size: 1rem;
    float: left;
    width: auto;
    height: 2.25rem;
    border-width: 1px;
    border-color: #ff6600;
    border-radius: 0rem;
    background-color: #ffeee3;
}

/* 評価のコメント送信ボタン */
.evaluate-send-btn {
    font-size: 1rem;
    float: left;
    width: 8rem;
    height: 2.25rem;
    border-width: 1px;
    border-color: #ee7800;
    border-radius: 0rem;
    background-color: #f6e5cc;
}

/* 評価のコメント送信ボタン　※マウスオーバー時 */
.evaluate-operator-btn:hover,
.evaluate-send-btn:hover {
    background-color: #ee7800;
    color:#FFFFFF;
}

/* ==================================================
    フィードバック(アンケート)表示エリア
================================================== */
#chat-survey {
    background-color: #ffffff;
    max-width: calc(100% - 12rem);
    margin: 0rem 5.75rem 0.75rem 6.25rem;
    border: 2px solid #ee7800;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem 1rem 1.5rem;
}

#chat-survey.verify {
    margin-bottom: 3.75rem;
}

/* 満足度ボタン表示エリア */
#survey-rating {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0rem;
}

/* 満足度ボタン表示エリア(ラベル) */
#survey-rating-lbl {
    display: inline-block;
    font-weight: bold;
    height: 2.25rem;
    line-height: 2.25rem;
    vertical-align: middle;
    padding: 0rem;
    margin: 0.5rem 1rem 0rem 0rem;
}

/* 満足度ボタン表示エリア(ボタンエリア　全体) */
.survey-rating-btn-grp {
    display: inline-block;
}

/* 満足度ボタン表示エリア(ボタンエリア) */
.survey-rating-btns {
    display: inline-block;
    margin: 0rem 0.25rem 0rem 0rem;
}

/* 満足度ボタン */
.survey-rating-btn {
    background-color: #ececec;
    display: inline-block;
    margin: 0rem 0.25rem 0rem 0rem;
    border-radius: 0.25rem;
}

/* 満足度ボタン　※最後のボタンのみ */
.survey-rating-btn:last-child {
    margin-right: 0rem;
}

/* 満足度ボタン　※選択時 */
.survey-rating-btn.active {
    background-color: #ee7800;
    color:white;
}

/* 満足度ボタン表示エリア(ボタンエリア) */
#survey-btns {
    display: inline;
}

/* 満足度ボタン表示エリア(ボタンエリア) */
#survey-btns::after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

/* 満足度ボタン、コメント送信ボタン、閉じるボタン */
.survey-rating-btn,
#survey-send-btn,
#survey-close-btn {
    width: 8.125rem;
    height: 2.25rem;
    margin: 0.5rem 0rem 0rem 0rem;
}

/* 満足度ボタン、コメント送信ボタン、閉じるボタン(verify) */
.survey-rating-btn.verify,
#survey-send-btn.verify,
#survey-close-btn.verify {
    width: 5.4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* 満足度ボタン押下後のコメント欄 */
#survey-comment {
    width: 100%;
    height: 4.75rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
}

/* アンケートのコメント送信ボタン、閉じるボタン */
#survey-send-btn,
#survey-close-btn {
    border-width: 1px;
    border-radius: 0rem;
}

/* アンケートのコメント送信ボタン */
#survey-send-btn {
    float: left;
    background-color: #f6e5cc;
    border-color: #ee7800;
    margin-right: 0.5rem;
}

/* アンケートのコメント送信ボタン　※マウスオーバー時 */
#survey-send-btn:hover {
    background-color: #ee7800;
    color:#FFFFFF;
}

/* アンケートの閉じるボタン */
#survey-close-btn {
    float: right;
    background-color: #ececec;
    border-color: #cccccc;
}

/* ==================================================
    オペレーター呼び出し(M-Talk)
================================================== */
#callMtalk-Form {
    box-sizing: border;
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-right: 0rem;
}

.callMtalk-Element {
    display: block;
    width: 39rem;
    max-width: 100%;
    margin: 0rem;
    border-radius: 0.25rem;
    padding: 0.65rem;
}

#callMtalk-RatingLbl {
    display: inline-block;
    font-weight: bold;
    box-sizing: border;
    width: 22rem;
    max-width: 100%;
    margin: 0rem;
}

.callMtalk-RatingBtnGrp {
    display: inline-block;
}

.callMtalk-RatingBtn {
    display: inline-block;
    font-size: 1rem;
    width: 5.5rem;
    height: 2.25rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-right: 1.5rem;
    border-radius: 0.25rem;
}

.callMtalk-RatingBtn.yes {
    border-color: #ff6600;
    background-color: #ffeee3;
}

.callMtalk-RatingBtn.yes:hover {
    background-color: #ff6600;
    color:#FFFFFF
}

.callMtalk-RatingBtn.no {
    border-color: #898989;
    background-color: #ececec;
}

.callMtalk-RatingBtn.no:hover {
    background-color: #898989;
    color:#FFFFFF
}

/* ==================================================
    質問入力エリア
================================================== */
/* 質問入力エリア全体 */
.inputOutline-container {
    background-color: #f6f6f6;
    position: fixed;
    bottom: 0rem;
    left: 50%;
    width: 100%;
    height: 3.25rem;     /* この高さは、当paddnig-bottomと#textInputのheightを足した値で一致させておく必要があります。この高さ分だけスクロールできるようにしておかないと、最後の会話内容の上に入力エリアがかぶさってしまうためです。 */
    padding: 0rem 1rem 0.5rem 1rem;
    transform: translate(-50%, 0%);
}

/* 質問入力エリア全体(verifyページ用) */
.inputOutline-container.verify {
    position: absolute;
    left: 0rem;
    bottom: 0rem;
    width: calc(100% - 1rem);
    padding: 0rem 0.5rem 0.5rem 0.5rem;
    transform: none;
    z-index: 1;
}

/* 質問するボタン*/
#post-question {
    border-radius : 0% 5% 5% 0%;
}

/* 質問入力のテキストボックス */
#text-input {
    ime-mode: active;                     /* 日本語入力状態にする(IEでIMEの場合のみ) */
    color: #898989;
    font-size: 1.1rem;
    font-weight: bold;
    border: 2px #898989 solid;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    background-color:white;
    /* 質問するボタンの幅を引いた数値 */
    /* width: calc(100% - 5.75rem); */
    /* 質問するボタン、各ボタンの幅を考慮した値 */
    /* width: calc(100% - 17.5rem); */
    width: calc(100% - 14rem);
    height: 3rem;
    padding: 0rem 0.5rem 0rem 0.5rem;
}

/* 質問入力のテキストボックス(verifyページ用) */
#text-input.verify {
    font-size: 1rem;
    width: calc(100% - 5.5rem);           /* 質問するボタンの幅を引いた数値 */
    height: 2.75rem;
}

/* 質問入力のテキストボックスのプレースホルダ */
#text-input:placeholder-shown {
    font-weight: normal;
}

/* 質問入力のサジェスト */
.suggest-list {
    font-size: 1rem;
    max-height: 17.5rem;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* 質問するボタン */
.btn.question {
    background-color: #898989;          /* 質問するボタンの背景色 */
    color: white;                       /* 質問するボタンの文字色 */
    font-size: 1.1rem;
    width: 5.75rem;
    height: 3rem;
    border: 2px #898989 solid;          /* 質問するボタンの枠線の色 */
    padding: 0rem 0.5rem 0rem 0.5rem;
}

/* 質問するボタン(verifyページ用) */
.btn.question.verify {
    font-size: 1rem;
    width: 5.5rem;
    height: 2.75rem;
    padding: 0.5rem;
}

/* ==================================================
    静的ボタンエリア（右下）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
================================================== */
#system-btns-right-bottom {
    z-index: 1;
    position: fixed;
    bottom: 4.25rem;
    right: 1rem;
    padding: 0rem;
    border-radius: 0.5rem;
}

/* Verifyページ用 */
#system-btns-right-bottom.verify {
    position: absolute;
    display: inline;
    bottom: 4rem;
    right: 1.5rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン */
#system-btns-right-bottom > .btn.operator,
#system-btns-right-bottom > .btn.undo,
#system-btns-right-bottom > .btn.survey {
    height: 3.5rem;
    width: 3.5rem;
    padding: 0rem;
    border: 1px solid #edefef;
    background-color: rgb(255,255,255);
    border-radius: 50%;
    display: block;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    font-size: 1.8rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタンのアイコン */
#system-btns-right-bottom > .btn.operator > i,
#system-btns-right-bottom > .btn.undo > i,
#system-btns-right-bottom > .btn.survey > i {
    vertical-align: middle; 
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※活性表示時 */
#system-btns-right-bottom > .btn.operator:not(:disabled),
#system-btns-right-bottom > .btn.undo:not(:disabled),
#system-btns-right-bottom > .btn.survey:not(:disabled) {
    color: #898989;
}

/* フィードバック(アンケート)ボタン */
#system-btns-right-bottom > .btn.survey {
    margin-bottom: 0.5rem;
}

#system-btns-right-bottom > .btn.operator {
    margin-bottom: 0.5rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※マウスオーバー時、活性表示時 */
#system-btns-right-bottom > .btn.operator:hover:not(:disabled),
#system-btns-right-bottom > .btn.undo:hover:not(:disabled),
#system-btns-right-bottom > .btn.survey:hover:not(:disabled) {
    background-color: #898989;
    border: #f6f6f6 1px solid;
    color: white;
}

/* ==================================================
    静的ボタンエリア（下）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
================================================== */
#system-btns-bottom {
    display : table;
    z-index: 1;
    position: fixed;
    bottom: 0rem;
    right: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    /* IE 対策 ボタンの間隔が margin では取れないため*/
    border-collapse: separate;
    border-spacing: 0.5rem 0;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン */
#system-btns-bottom > .btn.operator,
#system-btns-bottom > .btn.undo,
#system-btns-bottom > .btn.survey {
    display: table-cell;
    height: 3rem;
    width: 3rem;
    padding: 0rem;
    border: 1px solid #edefef;
    background-color: rgb(255,255,255);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    font-size: 0rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン */
#system-btns-bottom > .btn.operator > i,
#system-btns-bottom > .btn.undo > i,
#system-btns-bottom > .btn.survey > i {
    font-size: 2.0rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※活性表示時 */
#system-btns-bottom > .btn.operator:not(:disabled),
#system-btns-bottom > .btn.undo:not(:disabled),
#system-btns-bottom > .btn.survey:not(:disabled) {
    color: #898989;
}

/* フィードバック(アンケート)ボタン */
#system-btns-bottom > .btn.operator,
#system-btns-bottom > .btn.undo {
    margin-right: 0.5rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※マウスオーバー時、活性表示時 */
#system-btns-bottom > .btn.operator:hover:not(:disabled),
#system-btns-bottom > .btn.undo:hover:not(:disabled),
#system-btns-bottom > .btn.survey:hover:not(:disabled) {
    background-color: #898989;
    border: #f6f6f6 1px solid;
    color: white;
}

/* ==================================================
    静的ボタンエリア（上）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
      ヘルプボタン
================================================== */
#system-btns-header {
    z-index: 1;
    display: inline-block;
    text-align: right;
    background-color: #898989;
    position: fixed;
    right: 0px;
    color: white;
    height: 3rem;
    width: 100%;
    min-width: 650px;
    padding: 0.1rem 0.5rem 0 0;
    line-height: 2.75rem;
}

/* 静的ボタンのラベル */
#system-btns-header label {
    display: inline;
    font-size: 1rem;
    vertical-align: middle;
    text-align: center;
    line-height: 1.8rem;
}

/* 静的ボタン */
#system-btns-header > .btn.survey,
#system-btns-header > .btn.operator,
#system-btns-header > .btn.undo,
#system-btns-header > .btn.help {
    background-color:#898989;
    color: #e8ece9;
    border: 1px solid #e8ece9;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    height: 2.5rem;
}

/* 静的ボタン */
#system-btns-header > .btn.operator,
#system-btns-header > .btn.undo,
#system-btns-header > .btn.help {
    font-size: 1.5rem;
}

/* 静的ボタン ※マウスオーバー時 */
#system-btns-header > .btn.survey:hover:not(:disabled),
#system-btns-header > .btn.operator:hover:not(:disabled),
#system-btns-header > .btn.undo:hover:not(:disabled),
#system-btns-header > .btn.help:hover:not(:disabled) {
    background-color: #f6f6f6;
    color: #171316;
    border-color: #898989;
}

/* 静的ボタン ※フォーカスインしている時 */
#system-btns-header > .btn.survey.focus,
#system-btns-header > .btn.operator.focus,
#system-btns-header > .btn.undo.focus,
#system-btns-header > .btn.help.focus {
    background-color: #f6f6f6;
    color: #171316;
    border-color: #898989;
}

/* 静的ボタン ※選択時 */
#system-btns-header > .btn.survey:active:not(:disabled),
#system-btns-header > .btn.operator:active:not(:disabled),
#system-btns-header > .btn.undo:active:not(:disabled),
#system-btns-header > .btn.help:active:not(:disabled) {
    background-color: #f6f6f6;
    color: #171316;
    border-color: #898989;
}

/* ==================================================
    モバイル用静的ボタンエリア（ヘッダ部）
     フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
      ヘルプボタン
================================================== */
#system-btns-mobile-header {
    display: none;
}

/* ==================================================
    静的ボタンToolTip(bootstrap)
================================================== */
div.tooltip-inner {
    max-width: 30rem;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}