@charset "UTF-8";

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

/* attachment-contents */
.attachment-contents {
  border: dashed 2px #979797;
  border-radius: 3px;
  width: 100% !important;
  min-height: 270px;
  max-height: 100%;
}

/* attachment-area */
.attachment-area {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  min-height: 270px;
  max-height: 100%;
}

/* attachment-box */
.attachment-box {
  position: absolute;
  display: inline-block;
  background-image: url(../../images/tokyu/icon-img/file-up.svg);
  background-position: 50% 40px;
  background-repeat: no-repeat;
  cursor: pointer;
  width: calc(100%);
  height: 100%;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  vertical-align: bottom;
  opacity: 1;
  transition: all .5s ease;
  top: 0;
  left: 0;
}
.attachment-box.dragover {
	background-color: rgba(204, 204, 204, 0.3);
}
.attachment-box:before {
	content: "";
	display: inline-block;
	height: 150px;
}

/* attachment-file（ドラッグ範囲） */
.attachment-file {
	position: absolute;
	width: 100%;
	height: 100%;
  opacity: 0;
  z-index: 2;
  top: 0;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

/* 画像アップロード後の選択項目 */
.attachment-area img[src*=base64]+.attachment-box {
  opacity: 0;
  display: none;
	transition: all .5s ease;
}

/* 画像アップロード後 */
.attachment-area.selected-image {
  margin-top: 30px;
	background-color:transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}
.attachment-area.selected-image img {
  position: absolute;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  top: 0;
}

/* attachment-clear */
.attachment-clear {
	height: 0 !important;
	opacity: 0;
  display: none !important;
  margin-block: 20px 30px;
}
.attachment-clear.show {
	width: auto !important;
  height: 50px !important;
	opacity: 1;
  line-height: inherit;
	display: block !important;
	margin-inline: auto;
}

.attachment-preview {
	max-width: 100%;
	max-height: 300px;
}

@media screen and (max-width: 599.9px) {

  /* attachment-contents */
  .attachment-contents {
    min-height: auto;
  }

  /* attachment-area */
  .attachment-area {
    min-height: 100px;
  }

  /* attachment-box */
  .attachment-box {
    background: none;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .attachment-box:before {
    height: 46px;
  }

  /* 画像アップロード後 */
  .attachment-area.selected-image {
    margin-top: 20px;
  }
  .attachment-area.selected-image img {
    max-width: 90%;
  }

  /* attachment-clear */
  .attachment-clear {
    margin-block: 20px;
  }
  .attachment-clear.show {
    height: 45px !important;
  }

}