@charset "UTF-8";
/**
 * ファイルアップロード css
 * @version 23.05.26
 */

.fileupload-box { position: relative; }
.fileupload-box:not(.box-disabled) .dropzone { min-height: 200px; background-color: #f1f1f1; }
.fileupload-box:not(.box-disabled) .dropzone:hover { opacity: 0.8; cursor: var(--cur-dwl); }
.fileupload-box:not(.box-disabled) .dropzone.dragover { background-color: #bcdeff; }
.fileupload-box:not(.box-disabled) .dropzone[data-dropzone-msg] { position: relative; }
.fileupload-box:not(.box-disabled) .dropzone[data-dropzone-msg]::before { content: attr(data-dropzone-msg); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--placeholder-color); }
.fileupload-box.box-disabled { background-color: #ddd; }
.fileupload-box.box-disabled .open-finder,
.fileupload-box.box-disabled .dropzone,
.fileupload-box.box-disabled .delfile-btn { cursor: var(--cur-ban); }

.fileupload-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; }
.fileupload-box .bgimg { background-repeat: no-repeat; background-position: center; background-size: cover; }
.fileupload-box img, .fileupload-box .delfile-btn { cursor: pointer; }

/* 削除ボタン */
.fileupload-box .delfile-btn { position: absolute; top: 4px; right: 4px; opacity: 0.5; }
.fileupload-box:not(.box-disabled) .delfile-btn:hover { opacity: 1.0; }
.fileupload-box .delfile-btn::before { content: '\f2ed'; font-family: "Font Awesome 5 Free"; border: 1px solid #999; padding: 4px; border-radius: 4px; background-color: #e5e5e5; }
.fileupload-box .delfile-btn.times::before { content: '\f00d'; font-weight: 900; border-radius: 50%; width: 16px; height: 16px; display: block; text-align: center; }

.fileupload-box .preview-file-base { display: none; }
.open-finder { cursor: pointer; }
.open-finder.icn { position: relative; }
.open-finder.icn::after { position: absolute; bottom: 4px; right: 4px; font-family: "Font Awesome 5 Free"; font-weight: 900; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; padding: 4px 4px 3px; text-align: center; z-index: 1; }
.open-finder.icn.i-camera::after { content: '\f030'; }

.fileputting { -webkit-animation: fileputting 1.2s; animation: fileputting 1.2s; }
@-webkit-keyframes fileputting {
   0% { background-color: #bcdeff; }
  33% { background-color: unset; }
  66% { background-color: #bcdeff; }
 100% { background-color: unset; }
}
@keyframes fileputting {
   0% { background-color: #bcdeff; }
  33% { background-color: unset; }
  66% { background-color: #bcdeff; }
 100% { background-color: unset; }
}