@charset "UTF-8";

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

table.move {
  width: 40%; /* 必要に応じて幅を調整 */
  height: 40vh; /* 必要に応じて高さを調整 */
  margin: auto; /* テーブルを中央揃え */
  border-collapse: collapse;
  position: relative; /* h1を絶対配置するために必要 */
  writing-mode: horizontal-tb;
  top: -15vh;
}

h1 {
  font-size: 60px;
  color: #FFF;
  font-family: 'Miss Fajardose';
  text-shadow: 0px 3px 5px #b0c4de;
  width: 100%;
  position: absolute;
  top: 0px;
  right: 25px;
  margin: 0;
  z-index: 10;
}

div.photoObject {
	width: 40vh; /* 正方形の枠にするため、幅と高さを同じに */
	height: 40vh;
	background: #000;
	position: relative;
	overflow: hidden; /* コンテンツがはみ出さないように隠す */
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center; /* 垂直方向の中央揃え */
}

div.photoObject div {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition-timing-function: ease-in-out;
}

div.photoObject div span {
	background-position: center center;
	background-size: contain; /* 画像の比率を保ちながら枠内に収める */
	background-repeat: no-repeat; /* 画像が繰り返されないように */
	transition-timing-function: ease-in;
	width: 100%; /* 画像を枠いっぱいに表示 */
	height: 100%; /* 高さも枠いっぱいに */
}

div.photoObject div,
div.photoObject div span {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

div.photoObject div.s1,
div.photoObject div.e2 {
	opacity: 0;
	background: #FFF;
}

div.photoObject div.s2,
div.photoObject div.e1 {
	opacity: 1;
	background: #FFF;
}

div.photoObject span.anime_in_zoomin {
	transform: scale(1.0);
}

div.photoObject span.anime_out_zoomin {
	transform: scale(1.3);
}

div.photoObject span.anime_in_up {
  transform: translateY(0) scale(1.4); /* 上に移動 */
  margin-top: 0%;
  animation-duration: 1.5s;
}

div.photoObject span.anime_out_up {
  transform: translateY(-80px) scale(1.4);
  margin-top: 0%;
  animation-duration: 1.5s;
}

div.photoObject span.anime_in_zoomout {
	transform: scale(1.3);
}

div.photoObject span.anime_out_zoomout {
	transform: scale(1.0);
}

div.photoObject span.anime_in_grayscale_zoomin {
	filter: grayscale(100%);
	transform: scale(1.5);
}

div.photoObject span.anime_out_grayscale_zoomin {
	filter: grayscale(0%);
	transform: scale(1.0);
}

div.photoObject span.anime_in_rotate {
	transform: scale(1.4) rotate(5deg);
}

div.photoObject span.anime_out_rotate {
	transform: scale(1.8) rotate(-2deg);
}