body {
  font-family: 'Noto Sans JP', sans-serif;
}
.content-area {
  padding: 20px;
  width: 100%;
  min-height: 800px;
  background: #ECEEF0;
}
.content-list {
  font-size: 13px;
}
.content-detail {
  font-size: 15px;
}
.left-menu {
  width:100%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.left-submenu {
  width:100%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
/* main content */
.page-title {
  color: white;
  background-color: #485D76;
  font-weight: bold;
  padding: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.content-title {
  color: white;
  background-color: #485D76;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius:5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
}
.explanation-title {
  background-color: lightgray;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.top-content-block {
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}

.question-block {
  border:1px solid gray;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.explanation-block {
  border:1px solid gray;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.answer-block {
  border:1px solid gray;
  border-radius:5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
}

/* explanation */
.choice-correct {
  color: white;
  background-color: #00A983;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.choice-incorrect {
  color: white;
  background-color: #E94858;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}

/* item header */
.item-header {
  margin-top: 4px;
  font-size: 15px;
  text-align: right;
  font-weight: bold;
}
.item-value {
  margin-top: 4px;
  font-size: 15px;
}

/* edit item */
.edit-item-header {
  font-size: 18px;
  font-weight: bold;
  color: #584F4A;
  margin-top: 30px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.edit-item-value {
  font-size: 16px;
  margin-top:6px;
  margin-left: 20px;
  color: #584F4A;
}

/* dialog item */
.dialog-title {
  font-size: 16px;
  font-weight: bold;
}

/* color */
/* TODO : var(--bs-xxx)の検討 */
.blue          { color: blue; }
.lightseagreen { color: lightseagreen; }
.green         { color: green; }
.red           { color: red; }
.white         { color: white; }
.gray          { color: gray; }
.black         { color: black; }
.orange        { color: orange; }
.theme-color   { color: #16234A; }
.valid-color   { color: #00A199; }
.invalid-color { color: #E75161; }

.bg-white        { background-color: white; }
.bg-lemonchiffon { background-color: lemonchiffon; }
.bg-gold         { background-color: gold; }
.bg-lightgreen   { background-color: lightgreen; }
.bg-skyblue      { background-color: skyblue; }
.bg-lightcyan    { background-color: lightcyan; }
.bg-title        { background-color: #485D76; }

/* font-weight */
.bold { font-weight: bold; }

/* file upload */
.div-upload {
  width:100%;
  margin: 5px;
  border:3px dashed #584F4A;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.file-input {
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  position:absolute;
}
.uploader {
  position:relative;
}
.uploader .info-main {
  font-size:20px;
  font-weight: bold;
  text-align:center;
  margin-top:10px;
  padding: 10px;
}
.uploader .info-sub {
  font-size:13px;
  font-weight: bold;
  padding: 10px;
}
.div-upload-thumbnail {
  margin-top:10px;
  margin-bottom:10px;
}
#div-upload-btn {
  margin-top:10px;
  margin-bottom:20px;
}
.upload-thumbnail {
  height: 159px;
  width: 159px;
  margin: 10px;
  border: solid thin lightgray;
  border-radius: 5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
  float:left;
  text-align:center;
}
.upload-thumbnail > img {
  max-height: 150px;
  max-width: 150px;
  height: auto;
  width: auto;
}
.uploader-edge {
  font-size:20px;
  font-weight: bold;
  padding: 10px;
}

/* img */
.img-logo {
    max-width: 100%;
    height: auto;
}
.img-header-logo {
  width : 200px;
}
.img-question {
  width : 600px;
  max-width : 800px;
  max-height : 400px;
  object-fit: contain;
}
.img-question-thumbnail {
  max-width : 400px;
  max-height : 200px;
  object-fit: contain;
}

.selected-client-name {
  font-size: 25px;
  font-weight:bold;
}
#loading{
    border:1px dashed #999;
    padding:15px;
    position: fixed;
    top:50%;
    left:50%;
    background-color:#FFF;
    filter: alpha(opacity=85);
    -moz-opacity:0.85;
    opacity:0.85;
    z-index: 100000 !important;
}
#loading .loadingMsg{
    text-align:center;
    padding-top:100px;
    width:100px;
    background-image:url("/img/loading.gif");
    background-position: center top;
    background-repeat: no-repeat;
}
.cb-flg {
    font-size: 1.3em;
    /*font-weight: normal;*/
}
.modal-dialog-confirm {
  top: 40%;
}
.modal-dialog-update-data {
  top: 30%;
}

/* table */
.top-information {
  display: block;
  overflow-y: auto;
  max-height: 200px;
}

/* td width */
.td-icon-1 { width:  40px; min-width: 40px; }
.td-icon-2 { width: 80px; min-width: 80px; }
.td-icon-3 { width: 120px; min-width: 120px; }
.td-60  { width:  60px; min-width:  60px; }
.td-80  { width:  80px; min-width:  80px; }
.td-100 { width: 100px; min-width: 100px; }
.td-110 { width: 110px; min-width: 110px; }
.td-150 { width: 150px; min-width: 150px; }
.td-200 { width: 200px; min-width: 200px; }
.td-250 { width: 250px; min-width: 250px; }

/* div */
.div-login {
  padding:20px;
  margin-top:10px;
  margin-bottom:20px;
  border:1px solid #485D76;
  border-radius:5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
  background: white;
}
.div-circle-frame {
  padding:5px;
  margin-top:5px;
  margin-bottom:5px;
  border:1px solid #485D76;
  border-radius:5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
}
.div-edit-area {
  padding:50px 20px;
  border-radius:5px;
  -webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 5px;/* for Firefox 対応*/
  background: white;
}

/* frame */
.status-valid {
  padding:3px 10px;
  color: white;
  background-color: #00A199;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.status-invalid {
  padding:3px 10px;
  color: white;
  background-color: #E75161;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}
.question-page {
  padding:3px 20px;
  color: white;
  background-color: #485D76;
  border-radius:10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}

/* cursor */
.pointer {
  cursor:pointer;
}
.no-pointer {
  cursor:default;
}

/* btn */
.btn-system-menu {
  width  : 80%;
  height : 150px;
  font-size: 18px;
  margin : 5px 10%;
  border-radius: 10px;
  -webkit-border-radius: 10px;/* for Safari and Chrome 対応*/
  -moz-border-radius: 10px;/* for Firefox 対応*/
}

/* icon */
.icon {
    font-size:18px;
    color:gray
}
.list-icon {
  font-size:18px;
  color:gray;
  padding-left:5px;
  padding-right:5px;
  cursor: pointer;
}
.list-icon:hover {
  color:blue;
}
.upload-thumbnail-icon {
  margin-top:40px;
  font-size:50px;
  color:gray;
}
.sort-icon {
  margin-left:15px;
  cursor: pointer;
}

/* pagination */
.page-show-count {
  font-size:13px;
  color:gray;
  font-weight: bold;
  vertical-align: middle;
}

/* hr */
.border-solid {
  border-top: solid 2px #485D76;
}

.hide {
  display: none;
}

/* card */
.card-terms {
  height: 300px;
}