@charset "UTF-8";
/** 入力・ツールチップ css */
/** version 20.12.23 */

/* placeholder */
:placeholder-shown { color: #b7b1b1; }
::-webkit-input-placeholder { color: #b7b1b1; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
:-moz-placeholder { color: #b7b1b1; opacity: 1; } /* Firefox 18- */
::-moz-placeholder { color: #b7b1b1; opacity: 1; } /* Firefox 19+ */
:-ms-input-placeholder { color: #b7b1b1; } /* IE 10+ */
/* END placeholder */
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { background: none; }

input,textarea,select {
 border-radius: 7px;
 padding: 5px;
 font-size: 15px;
 color: #555555;
 border: solid 1px #ccc;
 width: 100%;
}
input[readonly="readonly"], input[readonly="readonly"][disabled="disabled"],input.readonly { cursor: default; background-color: transparent; border-color: transparent; outline: none; }
input[type="number"][readonly="readonly"]::-webkit-inner-spin-button,input.readonly::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.editing:focus,textarea.editing:focus,select.editing:focus { background-color: #f1f8ff; }
select { padding: 1px 5px; min-height: 29px; }

/* textareaデータのラベル表示 */
.txa-box { min-height: 46px; border-radius: 7px; padding: 5px; color: #555555; border: 1px solid #ccc; }
.txa-row { /*line-height: 1.5em; min-height: 1.5em;*/ line-height: 1.15; min-height: 17px; font-size: 15px; /*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ display: block; word-break: break-all; white-space: initial; }


.required_clm { position: relative; }
.required_clm:after { content: '*必須'; font-size: 9px; position: absolute; right: 1em; top: 1em; color: var(--danger); }
div.required_clm:after { top: -1em; }


/* エラー・警告・成功 */
input.err, textarea.err, select.err { border-color: var(--danger); /*background-color: #f0c5c5;*/ }
input.wrn, textarea.wrn, select.wrn { border-color: var(--warning); /*background-color: #fef7ea;*/ }
input.suc, textarea.suc, select.suc { border-color: var(--success); /*background-color: #c0eeaa;*/ }
.rdo.err, .chk.err { box-shadow: 0 0 1px 1px var(--danger) inset; }

.val-err { font-size: 80%; color: var(--danger); word-break: break-all; white-space: normal; line-height: 1.2; }
.val-err:before { content: '\f06a'; margin-right: 0.3em; font-weight: 900; font-family: "Font Awesome 5 Free"; }



/** ツールチップ */
.tltip { position: relative; cursor: pointer; border: 1px solid transparent; border-radius: 7px; min-height: 1.5em; display: inline-block; }
.tltip.t-edt { cursor: auto; }
.tltip.t-det { padding: 0 5px; }
.tltip.t-mdl { padding: 0 5px; }
.tltip.t-fre { padding: 0 5px; }
.tltip.t-edt .read { min-height: 29px; padding: 0 5px; font-size: 15px; line-height: 29px; } /* テキストボックスに合わせる */
.tltip:not(.edting):hover { border: 1px dashed #ccc; }
.tltip:not(.edting).t-edt:hover { border-color: var(--success); }
.tltip:not(.edting).t-det:hover { border-color: var(--blu); }
.tltip:not(.edting).t-mdl:hover { border-color: var(--nav); }
.tltip:not(.edting).t-fre:hover { border-color: var(--tea); }

.tltip-content { background-color: #ccc; border: 2px solid #555; color: #555; opacity: 0.7; font-size: 11px; border-radius: 7px; box-shadow: rgb(85, 85, 85) 2px 2px 4px; padding: 3px 5px; line-height: 11px; display: block; white-space: nowrap; position: fixed; z-index: 989; text-align: left; visibility: visible; }
.tltip-content.t-edt { color: #fff; border-color: var(--success-br); background-color: var(--success-bg); }
.tltip-content.t-det { color: #fff; border-color: var(--blu-br); background-color: var(--blu-bg); }
.tltip-content.t-mdl { color: #fff; border-color: var(--nav-br); background-color: var(--nav-bg); }
.tltip-content.t-fre { color: #fff; border-color: var(--tea-br); background-color: var(--tea-bg); }
.tltip-content:before { content: '\f044'; margin-right: 0.3em; font-weight: 900; font-family: "Font Awesome 5 Free"; }
.tltip-content:after { content: 'Click to Edit.'; }
.tltip-content.t-edt:before { content: '\f044'; } .tltip-content.t-edt:after { content: 'Click to Edit.'; }
.tltip-content.t-det:before { content: '\f022'; } .tltip-content.t-det:after { content: 'Click to Detail.'; }
.tltip-content.t-mdl:before { content: '\f360'; } .tltip-content.t-mdl:after { content: 'Click to Modal.'; }
.tltip-content.t-fre:before { content: ''; margin-right: 0; } .tltip-content.t-fre:after { content: attr(data-tltip-word); }

/* 編集切り替え */
.tltip.t-edt .write, .tltip.t-edt.edting .read { display: none; }
.tltip.t-edt.edting .write { display: block; }

.preview-box { display: inline-block; }
.preview-box .img-outer { position: relative; }
.preview-box img { cursor: pointer; }
.preview-box input[type="file"] { display: none !important; height: 0 !important; line-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; position: absolute; }
.preview-box .delimg-btn { color: #888; position: absolute; right: 2px; top: 0; width: 22px; cursor: pointer; }
.preview-box .delimg-btn:before { content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 900; }