@charset "utf-8";

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

  /* IE(Internet Explorer)・Microsoft Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

.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;
  color: inherit;
  /* text-decoration: none; */
  text-decoration: inherit;
}

a:hover {
  color: inherit;
}

.object-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* Google Chrome・Safari */
.scrollBarNone::-webkit-scrollbar {
  display: 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;
}


/*  */
/* スクロールバーデザイン */
/*  */
::-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;
}

.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;
} */