@charset "UTF-8";

/* お問合せ画面アップロード */

.attachment-area {
	position: relative;
	overflow: hidden;
	min-width: 100px;
	max-width: 400px;
	min-height: 135px;
	max-height: 100%;
	background-color:#dcdcdc;
}
.attachment-area-sp {
	max-width: 100%;
}
.attachment-area img {
    position: absolute;
	max-width: 400px;
	max-height: 300px;
    z-index: 2;
    border: none;
}
.attachment-area-sp img {
	max-width: 100%;
}
.attachment-area img[src*=base64]+.attachment-box {
    opacity: 0;
	transition: all .5s ease;
}
.attachment-box {
    position: absolute;
	display: inline-block;
	outline: 2px dashed #c0c0c0;
	margin: 10px;
	background-color: #f5f5f5;
	background-image: url("data:image/png;base64,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");
	background-position: 50% 25%;
	background-repeat: no-repeat;
	cursor: pointer;
	font-size: 11px;
	color: #4682b4;
	width: calc(100% - 20px);
	z-index: 1;
    cursor: pointer;
    text-align: center;
	vertical-align: bottom;
	opacity: 1;
	transition: all .5s ease;
	padding: 0 0 5px 0 !important;
}
.attachment-box-sp {
	padding: 0 0 15px 0 !important;
}
.attachment-box.dragover {
	background-color:#d0ffff;
}
.attachment-box:before {
	content: "";
	display: inline-block;
	height: 90px;
}
.select-file {
	font-weight: bold;
}
.select-file:hover {
	color: #00bfff;
}
.attachment-file {
	position: absolute;
	width: 100%;
	height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}
.attachment-clear {
	margin-top: 10px;
	background-color: #fff0fb;
	border-color: #ff69b4;
	border-style: dotted;
	color: #ff6964;
	cursor: pointer;
	height: 0;
	opacity: 0;
	transition: all .5s ease;
	max-width: 100%;
}
.attachment-clear.show {
	height: auto;
	opacity: 1;
	transition: all .5s ease;
}
.selected-image {
	background-color:transparent;
}
.attachment-preview {
	max-width: 400px;
	max-height: 300px;
}
.attachment-preview-sp {
	max-width: 100%;
	max-height: 300px;
}