@charset "UTF-8";

#main-image {
	width: 100%;
}

#main-image img {
	width: calc(100vw - 10px);
}

#main-image img.string {
	width: calc(100vw - 80px);
}

#catch-copy {
	left: 0;
	background-color:rgba(255,255,255,0.6);
	padding: 10px;
}

#catch-copy p:nth-child(2) {
	margin-top: 2rem;
}

#main-image img.string {
	/* max-width: 335px; */
	max-width: 300px;
}

#main-image p:nth-child(2) img.string {
	max-width: 340px;
}





@keyframes zoom {
  from {
      transform: scale(1.2);
  }

  to {
      transform: scale(1);
  }
}

@keyframes move {
  from {
      top: calc(((100vw * 816) / 1441) + 50px);
      opacity: 0;
  }

  to {
      top: calc((100vw * 816) / 1441);
      opacity: 1;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.9s ease;
  overflow: hidden;
  visibility: visible;
  position: absolute;
  /* width:100%; */
  opacity: 1;
}
.fade-enter-from,
.fade-leave-to {
  visibility: hidden;
  /* width:100%; */
  opacity: 0;
}
#main-image>div {
  position: relative;
  /* width: 800px; */
  /* height: 540px; */
  height: calc(((100vw * 816) / 1441) * 2.6);
  overflow: hidden;
}
#main-image img {
  /* z-index: 1000; */
  scale: 1;
  /* width: 100%; */
}
img.zoom {
  animation-name: zoom;
  animation-duration: 4.0s;
  animation-fill-mode: forwards;
}

#catch-copy {
  /* z-index: 5000; */
  position: absolute;
  top: calc((100vw * 816) / 1441);
  /* left: 50px; */
  font-size: 1.7rem;
  opacity: 0;
}
#catch-copy.end {
  opacity: 1;
}
#catch-copy.move {
  animation-name: move;
  animation-duration: 4.0s;
  animation-fill-mode: forwards;
}

@media print, screen and (min-width:280px) {
  /* #main-image>div {
    height: calc(((100vw * 816) / 1441) * 2.2);
  } */
}


@media print, screen and (min-width:350px) {
  #main-image>div {
    height: calc(((100vw * 816) / 1441) + 320px);
  }
}

@media print, screen and (min-width:800px) {

  @keyframes move {
    from {
        top: calc((((100vw * 816) / 1441) / 6) + 50px);
        opacity: 0.2;
    }
  
    to {
        top: calc(((100vw * 816) / 1441) / 6);
        opacity: 1;
    }
  }
  
	#main-image > div {
		height: calc(((100vw * 816) / 1441) + 120px);
	}

  #catch-copy {
    top: calc(((100vw * 816) / 1441) / 6);
  }
  
}



@media print, screen and (min-width:1400px) {

	#main-image > div {
		height: calc((((100vw - 480px) * 816) / 1441) + 80px);
	}

	#main-image > div > div:first-child {
		/* width: calc(100vw - 360px); */
		text-align: right;
	}

	#main-image > div > div img {
		width: calc(100vw - 480px);
	}

	#catch-copy {
		left: 50px;
	}

}