@charset "utf-8";
html body{
  font-family: メイリオ,YuGothic,Yu Gothic,ヒラギノ角ゴ,sans-serif;
  font-size: 0.9rem;
  line-height : 1.3 ;
  letter-spacing : 0.05em;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.display{
  display: none;
}

/*  */
/* ページ全体にかかわるCSS */
/*  */
pre {
  /* 自動改行 */
  /* Mozilla */
  white-space: -moz-pre-wrap;
  /* Opera 4-6 */
  white-space: -pre-wrap;
  /* Opera 7 */
  white-space: -o-pre-wrap;
  /* CSS3 */
  white-space: pre-wrap;
  /* IE 5.5+ */
  word-wrap: break-word;
  font-family: メイリオ,YuGothic,Yu Gothic,ヒラギノ角ゴ,sans-serif;
  font-size: 0.8rem;
  line-height : 1.3 ;
  letter-spacing : 0.05em;
}

a{
  cursor: pointer;
  text-decoration: none;
}

/* BootStrap カスタム */
.btn{
  font-size: 0.9rem;
}
.form-control{
  font-size: 0.9rem;
}
.form-select{
  font-size: 0.9rem;
}
.fs-7{
  font-size: 0.9rem;
}

/* スクロールバー非表示 */
.scrollBaeNone{
  /* IE(Internet Explorer)・Microsoft Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
}
/* Google Chrome・Safari */
.scrollBaeNone::-webkit-scrollbar{
  display: none;
}

/* カーソル */
.pointer{
  cursor: pointer;
}
.ewResize{
  cursor: ew-resize;
}

/* 画像切り抜き */
.objectCover{
  object-fit: cover;
}

/* はみ出た文字を三点リーダー(...)で表示 */
/* 1行 */
.textOverflow-1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 2行 */
.textOverflow-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.boxShadowNone{
  box-shadow: none!important;
}
.boxShadowNone:focus{
  box-shadow: none!important;
}





/*  */
/* メニュー系デザイン */
/*  */
#topMenu{
  -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)!important;
  box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)!important;
}
#topMenu .bi, .bi-list{
  font-size: 1.5rem;
}
.side-menu{
  height: calc(100% - 50px);
  position: fixed;
  top: 50px;
  left:0;
  z-index:1!important;
  overflow: hidden;
}

.nav-link span{
  font-size: 0.8rem;
  color: white;
}
.nav-link:focus, .nav-link:hover {
  color: #fff!important;
}
/* .dropdown-menu a:hover{
  background-color:rgba(255,255,255,0.1);
} */
.dropdown-item:active{
  background-color: transparent!important;
}
.navbar-collapse a{
  color: white;
}
.navbar a{
  color: whitesmoke;
}
.navbar{
  height: 50px;
}
#navbar{
  /* margin-left: auto; */
  padding-right: 0px;
  font-size: 0.8rem;
  flex-grow: 0;
}
#navbar-col ul{
  padding-left: 20px;
}
.menu .nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
}
.menu{
  width: 200px;
  padding-top: 10px;
  float: left;
  overflow: hidden;
}
.menu a{
  line-height: 2.2;
  z-index: 1!important;
}
.menu .nav .nav-link {
  color: whitesmoke;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}

.sub-menu{
  width: 0;
  margin-top: 50px;
  padding-top: 10px;
  float: left;
  height: calc(100% - 50px);
  position: fixed;
  overflow: hidden!important;
  overflow-y:scroll!important;
  z-index: -1!important;
}

.sub-menu div{
  line-height: 2.2;
}
.sub-menu .nav .nav-link {
  color: white;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
  /* z-index: -10; */
}
.sub-menu .nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: black;
}

.nav-tabs{
  border-bottom:3px solid #0099CC;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  border-color: #0099CC !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  border-color: #0099CC !important;
}
.nav-tabs a{
  color: black;
}
.nav-tabs .active{
  color: white !important;
  background-color: #0099CC !important;
}

#pageAddBtn{
  width: 35px;
  height: 35px;
  padding: 0;
}




/*  */
/* アイコン用デザイン */
/*  */
@media (min-width: 992px) {
  .side-menu-button{
    position: absolute;
    bottom: 0;
    padding: 0.5rem;
    cursor: pointer;
  }
}




/*  */
/* スクロールバーデザイン */
/*  */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}

.sub-menu{
  scrollbar-width: thin;
  scrollbar-color: #ccc #fff;
}



/* カラー設定 */
.gb-dark-gray{
  background-color: #293042;
}
.gb-light-gray{
  background-color: #535867;
}




/*  */
/* トースト設定 */
/*  */
.toast{
  border-radius: 6px;
  overflow: hidden;
}
.toast-header {
  color: inherit!important;
  border-bottom: inherit!important;
  border-radius: inherit!important;
  padding: 1rem 0.75rem!important;
  width: calc(100% - 10px);
}
.toastFlame{
  bottom: 0;
  right: 0;
  z-index: 10000;
}




/*  */
/* ローディング画面CSS */
/*  */
#loading{
  background-color: #6c757d99;
  top: 0;
  left: 0;
  z-index: 10000;
}
.loadingText{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
}

#pageLoadingDisplay{
  background-color: #ffffff;
  top: 0;
  left: 0;
  z-index: 20000;
}



/*  */
/* キャンバスタグCSS */
/*  */
#canvas{
  position: absolute;
  top:0;
  left: 0;
}




/*  */
/* コンテンツ部分 */
/*  */
.content-wrapper{
  height: calc(100% - 50px);
  margin-top: 50px;
}
.content{
  height: calc(100% - 50px);
  position: absolute;
}

/* ビュー */
.content .view{
  /* 100% - サムネイルの幅 */
  width: calc(100% - 150px);
}
@media (max-width: 991.98px) {
  .content .view{
    width: 100%;
  }
}

/* ビューヘッダー */
.content .view .viewHeader{
  background-color: #cad4ef;
}

.content .view .viewHeader #pageTitle{
  width: 260px;
  background-color: #ffffff00;
}

.content .view .viewHeader #pageTitle:focus {
  background-color: #fff;
}

.viewHeaderSearchKeyword{
  width: 200px;
}
.viewHeaderSelect{
  width: 200px;
}
.viewHeaderSelect-lg{
  width: 150px;
}

#searchMenu{
  top: 10px;
  right: 0;
  z-index: 10;
}
/* スマホ用ブロック登録ボタン */
#plusBtn{
  bottom: 20px;
  left: 20px;
}
#plusBtn button{
  width: 60px;
  height: 60px;
  font-size: 25px;
  padding: 0;
}


/* ビューボディ */
#viewBody{
  overflow-y: scroll;
  scroll-behavior: smooth;
}

#viewBody .main p{
  margin-bottom: 0;
}

.content .view .viewBody .main{
  min-height: 100%;
  /* 改行させる */
  overflow-wrap: break-word;
  word-break: break-word;
  word-break: break-all;
}
/* ボタン */
.block .btn{
  width: 40px;
  height: 40px;
  top: 5px;
  right: 5px;
}


/* テキスト部分 */
.content .view .viewBody .main .textPart .previewBtn{
  width: initial;
  height: initial;
}

/* .textPart{
  max-height: 300px;
  overflow: hidden;
} */
/* @media (max-width: 992px){
  .textPart{
    max-height: max-content;
    overflow: hidden;
  }
} */
/* .a4Layout .textPart{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  max-height: inherit;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .a4Layout .textPart{
    width: 210mm;
    padding: calc(10mm - 14px) 10mm;
  }
}
@media (max-width: 1199.98px) {
  .a4Layout .textPart{
    width: 100%;
    padding: 0.5rem;
  }
} */

/* youtube幅設定 */
@media (min-width: 1200px) {
  .youtube{
    width: 640px;
    height: 370px;
  }
}
@media (max-width: 1199.98px){
  .youtube{
    width: 100%;
    aspect-ratio: 64/37;
  }
}

/* .textPart.a4Layout *{
  font-size: inherit!important;
} */
.pageBreak{
  page-break-after: always;
  margin-bottom: 1rem;
}



/* 右側 */
@media(min-width: 1400px) {
  .a4Layout .blockRightSide {
    width: calc(100% - 210mm);
    padding-left: 0.5rem;
  }
}
@media(min-width: 992px) and (max-width: 1399.98px) {
  .a4Layout .blockRightSide{
    width: 100%;
  }
}
@media(min-width: 992px){
  .a4Layout .upLoadPartFlame{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    padding: 0.5rem;
  }
}

/* アップロード画像部分 */
/* 画像幅 */
/* 通常時 */
@media (max-width: 575.98px) {
  .block .imgFlame{
    width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .block .imgFlame{
    width: calc(100%/2);
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .block .imgFlame{
    width: calc(100%/3);
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .block .imgFlame{
    width: calc(100%/3);
  }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .block .imgFlame{
    width: calc(100%/4);
  }
}
@media (min-width: 1300px){
  .block .imgFlame{
    width: calc(100%/6);
  }
}

@media  (max-width: 1399.98px) {
  .a4Layout .a4-flex{
    display: block;
  }
}
@media (min-width: 1400px) {
  .a4Layout .a4-flex{
    display: flex;
  }
}
/* a4レイアウトの時 */
@media (max-width: 575.98px) {
  .a4Layout.block .imgFlame{
    width: calc(100%/1);
  }
}
@media (min-width: 576px) and (max-width: 649.98px) {
  .a4Layout.block .imgFlame{
    width: calc(100%/2);
  }
}
@media (min-width: 650px) and (max-width: 767.98px) {
  .a4Layout.block .imgFlame{
    width: calc(100%/3);
  }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .a4Layout.block .imgFlame{
    width: calc(100%/4);
  }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .a4Layout.block .imgFlame{
    width: calc(100%/1);
  }
}
@media (min-width: 1600px) and (max-width: 1799.98px) {
  .a4Layout.block .imgFlame{
    width: calc(100%/2);
  }
}
@media (min-width: 1800px){
  .a4Layout.block .imgFlame{
    width: calc(100%/3);
  }
}

.block .imgFlame img{
  aspect-ratio: 4/3;
  object-fit: cover;
}


/* 画像ツールバー */
.viewBody .block .imgFlame .imgToolBar{
  display: none;
  top: 0;
  left: 0;
  background-color: #040404a6;
  z-index: 5;
}

.viewBody .block .imgFlame .imgPrint{
  display: none;
  top: 0;
  left: 0;
  z-index: 10;
}

.viewBody .block{
  border: 1px solid #dee2e6;
}
.viewBody .block .blockTitle{
  font-size: 1rem;
}
.viewBody .block .fileFlame .bi{
  font-size: 25px;
}

.viewBody .block .blockToolBottom button{
  font-size: 1.2rem;
  padding: 0;
}



/* ファイル部分 */
#filePart i{
  width: 30px;
  font-size: 25px!important;
}
/* 通常時 */
@media (max-width: 575.98px) {
  .block .fileFlame{
    width: calc(100%/1);
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .block .fileFlame{
    width: calc(100%/2);
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .block .fileFlame{
    width: calc(100%/3);
  }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  .block .fileFlame{
    width: calc(100%/4);
  }
}
@media (min-width: 1300px){
  .block .fileFlame{
    width: calc(100%/6);
  }
}
/* a4レイアウト時 */
@media (max-width: 575.98px) {
  .a4Layout.block .fileFlame{
    width: calc(100%/1);
  }
}
@media (min-width: 576px) and (max-width: 649.98px) {
  .a4Layout.block .fileFlame{
    width: calc(100%/2);
  }
}
@media (min-width: 650px) and (max-width: 767.98px) {
  .a4Layout.block .fileFlame{
    width: calc(100%/3);
  }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .a4Layout.block .fileFlame{
    width: calc(100%/4);
  }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .a4Layout.block .fileFlame{
    width: calc(100%/1);
  }
}
@media (min-width: 1600px){
  .a4Layout.block .fileFlame{
    width: calc(100%/2);
  }
}

.fileName{
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}




/*  */
/* サムネイル */
/*  */
.content .thumbnail{
  width: 150px;
  display: flex;
}
@media (max-width: 991.98px) {
  .content .thumbnail{
    display: none;
  }
}
#thumbnailBar{
  width: 10px;
  border-radius: 8px;
}
#thumbnailView{
  width: calc(100% - 10px);
}

#thumbnailView img{
  aspect-ratio: 4/3;
  object-fit: cover;
}

#thumbnailView .date{
  font-size: 0.8rem;
  bottom: 0;
  background-color: #0000005e;
}



/*  */
/* モーダル */
/*  */
/* ブロック登録/編集モーダル */
.selectPageTitle{
  width: 200px;
}
.imgFlame button{
  top:0;
  right: 0;
}
.tagRegistPop{
  width: 250px;
  top: 5px;
  left: 0;
}

/* 幅の設定 */
@media (min-width: 1200px) {
  .blockModal .leftSide{
    width: 210mm;
  }
  .blockModal .rightSide{
    width: calc(100% - 210mm);
  }
}
@media (max-width: 1199.98px) {
  .blockModal .leftSide{
    width: 100%;
  }
  .blockModal .rightSide{
    width: 100%;
  }
}
@media (min-width: 250mm) {
  .blockModal .editorPart{
    width: 210mm;
    /* height: 297mm; */
  }
}
@media (min-width: 576px) and (max-width: 250mm) {
  .blockModal .editorPart{
    width: 100%;
    aspect-ratio: 210/294;
  }
}
@media (max-width: 575.98px) {
  .blockModal .editorPart{
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 991.98px) {
  .blockModal .registPart{
    position: absolute;
    min-height: 100%;
    display: none;
  }
}

.blockModal .textAreaPart textarea{
  resize: none;
}

.blockModal .listDeleteBtn, #editModal .originDeleteBtn, #searchEditModal .originDeleteBtn{
  width: 30px;
  height: 30px;
  font-size: 0.5rem;
}




/* 画像拡大モーダル */
#imgZoomModal .modal-dialog-scrollable .modal-content{
  max-height: 90%!important;
  height: 90%!important;
}
#modalImage{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

@media (min-width: 576px) and (max-width: 991.98px){
  #imgZoomModal .modal-dialog {
    max-width: 100%;
    margin: 1.75rem 0.5rem;
  }
}



/* ブロックコピーモーダル */
#copyModal .modal-dialog-scrollable .modal-content{
  max-height: 60%!important;
  height: 60%!important;
}
#copyModal .modal-body{
  font-size: 1.25rem;
}



/* 出力モーダル */
#outPutModal .outputLaylout{
  width: 210mm;
  height: 294mm;
  padding: 10mm;
}
#outPutModal .imgFlame{
  width: calc(100%/3);
}
hr.page-break{
  background-color: #fff!important;
  border-top: 2px dashed #8c8b8b!important;
}





/* プレビュー用CSS */
#outPutModal .page {
  width: 210mm;
  height: 297mm;
  padding: 10mm;

  box-sizing: border-box;
  position: relative;
  page-break-after:always!important;
}
#outPutModal .page .main{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#outPutModal .imgFlame{
  width: 90mm;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 10mm;
}
#outPutModal .imgFlame:nth-child(2n+1){
  margin-right: 10mm;
}
#outPutModal .imgFlame img{
  object-fit: contain;
}




#reactTable{
  font-size: 11px;
}