@charset "UTF-8";


/* --------------------------------------------------
menu
-------------------------------------------------- */
#menu{
  width: 100%;
  min-width: 1300rem;
  position: relative;
	height:54rem;
	z-index:100;
	background-color:#36b0c9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#menu ul{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	gap:15rem;
}

#menu ul li:nth-child(1){
	width:46rem;
}

#menu ul li:nth-child(2){
	width:60rem;
}

#menu ul li:nth-child(3){
	width:94rem;
}

#menu ul li:nth-child(4){
	width:203rem;
}

#menu ul li:nth-child(5){
	width:101rem;
}

/* --------------------------------------------------
mainvisual
-------------------------------------------------- */
#mainvisual{
  width: 100%;
  min-width: 1300rem;
	height:83.5vw;
  position: relative;
	background: url(../img/about/visual.jpg) no-repeat center top #000000;
	background-size:100% auto;
	padding-top:35rem;
	overflow:hidden;
}

#mainvisual ul.catch{
  width: 79.1666666%;
  min-width: 1300rem;
  position: relative;
	margin:0 auto;
}

#mainvisual ul.catch li:nth-child(1){
  width: 44.7368%;
  position: absolute;
	left:0;
	top:0;
}

@media (max-width: 1300px) {
	#mainvisual{
		height:1590rem;
	}

	#mainvisual ul.catch{
	  width: 1510rem;
	  min-width: 1300rem;
	  position: relative;
		margin:0 auto;
	}

	#mainvisual ul.catch li:nth-child(1){
	  width: 680rem;
	  position: absolute;
		left:0;
		top:0;
	}
}

#edo{
	width:9.89%;
  position: absolute;
	top:18.5vw;
	left:9.4vw;
}

#james{
	width:12.968%;
  position: absolute;
	top:39vw;
	left:35.7vw;
}

#henry{
	width:9.89%;
  position: absolute;
	top:21.5vw;
	right:9.0vw;
}

@media (max-width: 1300px) {
	#edo{
		width:190rem;
	  position: absolute;
		top:351rem;
		left:179rem;
	}

	#james{
		width:248rem;
	  position: absolute;
		top:742rem;
		left:678rem;
	}

	#henry{
		width:190rem;
	  position: absolute;
		top:408rem;
		right:170rem;
	}
}

/* --------------------------------------------------
about_block
-------------------------------------------------- */
#about_block{
  width: 46.875%;
	height:300rem;
  position: absolute;
	top:51vw;
	right:100rem;
}

@media (max-width: 1300px) {
	#about_block{
		top:970rem;
	}
}

#about_block #about_title{
  width: 52%;
  position: relative;
	margin:0 auto;
}

#about_block #txt{
  width: 100%;
  position: relative;
	margin:0 auto;
}

#about_block #catch2{
  width: 76%;
  position: relative;
	margin:0 auto;
}

/* --------------------------------------------------
film
-------------------------------------------------- */
#film{
  width: 45.3125%;
	height:690rem;
  position: absolute;
	top:43.5vw;
	left:0;
}

@media (max-width: 1300px) {
	#film{
		top:830rem;
	}
}

#film1{
	position:relative;
	width:63.218%;
	margin-left:8.8vw;
}

#film2{
	position:absolute;
	width:100%;
	left:0;
	top:14.5vw;
}

#goomy{
	position:absolute;
	width:21.609%;
	right:6.8vw;
	top:6.6vw;
}

@media (max-width: 1300px) {
	#film1{
		margin-left:167rem;
	}

	#film2{
		top:276rem;
	}

	#goomy{
		right:130rem;
		top:125rem;
	}
}

/* --------------------------------------------------
animation
-------------------------------------------------- */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform:scale(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform:scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes poyon {
  0%   { transform: scale(0.3, 0.3); }
  20%  { opacity: 1; transform: scale(1.1, 1.1); }
  40%  { opacity: 1; transform: scale(0.8, 0.8); }
  60%  { opacity: 1; transform: scale(1.05, 1.05); }
  80%  { opacity: 1; transform: scale(0.95, 0.95); }
  100% { opacity: 1; transform: scale(1.0, 1.0); }
}

@keyframes blur {
  0% {
	  opacity: 0;
    filter: blur(40rem);
  }
  100% {
	  opacity: 1;
    filter: blur(0);
  }
}

@keyframes maskIn {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(-10px);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translate(400rem,-20rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translate(-400rem,20rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideBg {
  from {
    opacity: 0;
    transform: translateX(1000rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes txt_ani {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); opacity:0;}
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); opacity:1;}
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); opacity:1;}
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); opacity:1;}
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); opacity:1;}
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); opacity:1;}
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); opacity:1;}
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); opacity:1;}
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); opacity:1;}
}

@keyframes rolling {
  0% {
    transform: scale(0.7) rotate(-20deg);
		opacity:0;
  }
  100% {
    transform: scale(1) rotate(0deg);
		opacity:1;
  }
}


ul.catch li,
#edo,
#james,
#henry,
#film1,
#film2,
#goomy,
#about_title,
#txt,
#catch2{
	opacity:0;
}

.is-loaded ul.catch li:nth-child(1){
  animation: slideLeft 0.5s cubic-bezier(0.6, 0, 0.4, 1) 1.0s forwards;
}

.is-loaded ul.catch li:nth-child(2){
  animation: slideRight 0.5s cubic-bezier(0.6, 0, 0.4, 1) 1.2s forwards;
}

.is-loaded #edo{
  animation: poyon 0.6s linear 2.0s forwards;
}

.is-loaded #james{
  animation: poyon 0.6s linear 2.2s forwards;
}

.is-loaded #henry{
  animation: poyon 0.6s linear 2.4s forwards;
}

.is-loaded #film1{
  animation: zoomOut 0.6s cubic-bezier(0.6, 0, 0.4, 1) 2.8s forwards;
}

.is-loaded #goomy{
  animation: poyon 0.6s linear 3.2s forwards;
}

.is-loaded #film2{
  animation: zoomOut 0.6s cubic-bezier(0.6, 0, 0.4, 1) 3.2s forwards;
}

.is-loaded #about_title{
  animation: rolling 0.6s cubic-bezier(0.6, 0, 0.4, 1) 3.6s forwards;
}

.is-loaded #txt{
  animation: rolling 0.6s cubic-bezier(0.6, 0, 0.4, 1) 3.8s forwards;
}

.is-loaded #catch2{
  animation: rolling 0.6s cubic-bezier(0.6, 0, 0.4, 1) 4.0s forwards;
}