@charset "UTF-8";






/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
受注管理
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


/*-------------------------------------------------------------
写真確認
-------------------------------------------------------------*/

/*通常ページ用*/
#main.photoList {}
#main.photoList .upperBox { padding: 0; background-color: transparent; align-items: flex-start; }
#main.photoList .upperBox .col1 { padding-top: 4px; }
#main.photoList .scrollOuter { background-color: #F5F6FA; padding: 10px; }
#main.photoList .scrollOuter .scrollBox { height: 100%; padding: 20px; overflow: hidden; box-sizing: border-box; background-color: #FFF; }
#main.photoList .scrollOuter .scrollBox.boxGradation:after { bottom: calc(0% + 20px); right: calc(0% + 20px); left: calc(0% + 20px); width: calc(100% - 40px); }
#main.photoList .scrollOuter .scrollBox .scrollArea { height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
#main.photoList .scrollOuter .scrollBox .scrollArea .box { padding-bottom: 0; }
#main.photoList .orderPhotoArea { width: calc(100vw - 188px); margin: 0 auto; overflow: hidden; flex-direction: unset; justify-content: space-around; flex-wrap: wrap; box-sizing: border-box; }
#main.photoList .orderPhotoArea .orderPhotoItem { position: relative; width: 300px; padding: 3px 10px 10px; background-color: #F0F0F0; border: 1px solid #DDD; margin: 0 0 20px !important; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoDragArea { opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(165,165,165,0.4); transition: opacity ease 0.3s; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoDragArea:hover { cursor: move; opacity: 1; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea { display: flex; width: 100%; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea .lt { margin-top: 5px; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea .formTitle { font-size: 1.3em; font-family: system-ui; font-weight: bold; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea .dateTime { display: inline-flex; flex-direction: column; align-items: flex-end; margin-right: 5px; padding: 3px 3px 2px; background-color: #FFF; border-radius: 5px; border: 1px solid #E1E4F0; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea .dateTime span { font-size: 11px; line-height: 1.2em; color: #43425D; font-weight: bold; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea input.rotate90 { position: relative; display: block; cursor: pointer; border-radius: 3px; border: 0; width: 30px; height: 30px; background: url("../images/ico_rotation.svg") no-repeat 3px center; text-indent: -9999px; background-size: 23px 28px; background-color: #8E8E98; box-sizing: border-box; will-change: transform; transition: opacity ease 0.3s; }
#main.photoList .orderPhotoArea .orderPhotoItem .photoTtlArea input.rotate90:hover { opacity: 0.7; }
#main.photoList .orderPhotoArea .orderPhotoItem .orderPhoto { position: relative; transition: opacity ease 0.3s; }
#main.photoList .orderPhotoArea .orderPhotoItem .orderPhoto:hover { opacity: 0.7; }
#main.photoList .orderPhotoArea .orderPhotoItem .orderPhoto .photoDelArea .btnDel { opacity: 0; position: absolute; top: 0; right: 0; display: block ;width: 25px; height: 25px; background-color: #FF0000; background-image: url("../images/ico_del_02.svg"); background-size: 12px 15px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; will-change: transform; transition: opacity ease 0.3s; }
#main.photoList .orderPhotoArea .orderPhotoItem .orderPhoto:hover .photoDelArea .btnDel { opacity: 0.6; }
#main.photoList .orderPhotoArea .orderPhotoItem .orderPhoto .photoDelArea .btnDel:hover { opacity: 1; }
@media screen and (max-width: 779px) {
  #main.photoList .scrollOuter .scrollBox { padding: 10px; }
  #main.photoList .orderPhotoArea { width: 100%; }
  #main.photoList .orderPhotoArea .orderPhotoItem { max-width: 208px; margin: 0 0 10px !important; }
  #main.photoList .orderPhotoArea .orderPhotoItem .orderPhoto a img { width: 204px !important; }
  #main.photoList .scrollOuter .scrollBox.boxGradation:after { bottom: calc(0% + 10px); right: calc(0% + 10px); left: calc(0% + 10px); width: calc(100% - 20px); }
}

/*モーダル表示用*/
.modalOuter #main.photoList { padding: 10px }
.modalOuter #main.photoList > .inner { height: 100%; }
.modalOuter #main.photoList > .inner > .contentsArea { height: 100%; box-sizing: border-box; display: -ms-grid; display: grid; -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-template-areas: "content1" "content2"; }
.modalOuter #main.photoList .scrollOuter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; }
.modalOuter #main.photoList .scrollOuter .scrollBox .scrollArea { background-color: #FFF; }
.modalOuter #main.photoList .orderPhotoArea { width: 100%; }
.modalOuter #main.photoList .searchBox { margin-bottom: 10px; }

/*フォルダアップロード モーダル表示用*/
.modalOuter.OrderPhotoFolderUpload .modalWindow .scrollArea,
.modalOuter.OrderPhotoFolderUpload .modalWindow .scrollArea > .outerBox > .scrollBox { padding: 0; }
.modalOuter.OrderPhotoFolderUpload #main.photoList { background-color: #FFF; }
.modalOuter.OrderPhotoFolderUpload #main.photoList .headerBox { margin-bottom: 10px; }
.modalOuter.OrderPhotoFolderUpload #main.photoList .upperBox { align-items: center; }
.modalOuter.OrderPhotoFolderUpload #main.photoList .upperBox .col1 { padding-top: 0; }

/*PDF選択モーダル表示用*/
.pdfChoiceModal { height: 100%; overflow: hidden; padding: 20px; border: 5px solid #F5F6FA; box-sizing: border-box; }
.pdfChoiceModal > p { font-size: 12px; font-weight: bold; padding-bottom: 15px; }
.pdfChoiceModal .pdfChoiceArea { height: calc(100% - 28px); max-height: 300px; width: calc(100% + 5px); display: flex; align-items: center; flex-wrap: wrap; overflow-y: auto; }
.pdfChoiceModal .pdfChoiceArea a.showPdf { text-decoration: none !important; line-height: 1; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 3px; transition: all 0.2s; border: 0; font-size: 1em; width: calc((100% - 140px) / 4); padding: 0 15px; margin-right: 5px; margin-bottom: 5px; height: 30px; color: #FFF; background-color: #8E8E98; }
.pdfChoiceModal .pdfChoiceArea a.showPdf:hover { opacity: 0.7; }

/*ライトボックス用*/
#lightbox .lb-dataContainer { /*padding-top: 0;*/ }
#lightbox .lb-dataContainer > .lb-data { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background-color: #F5F6FA; }
#lightbox .lb-dataContainer > .lb-data .lb-number { color: #222; padding-bottom: 0; }
#lightbox .lb-dataContainer > .lb-data .lb-details { flex: 1; }
#lightbox .lb-dataContainer > .lb-data .lb-print { position: relative; text-decoration: none !important; line-height: 1; font-weight: bold; display: inline-flex; align-items: center; cursor: pointer; border-radius: 3px; transition: all 0.2s; border: 0; font-size: 1.2em; padding: 0 15px 0 37px; margin-right: 5px; height: 38px; min-width: 29px; background: url(../images/ico_print.svg) no-repeat 12px center; background-size: 20px 20px; color: #FFF; background-color: #8E8E98; }
#lightbox .lb-dataContainer > .lb-data .lb-print:hover { opacity: 0.7; }