@charset "UTF-8";


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

#mainvisual ul.catch{
  width: 100%;
  position: relative;
	margin:0 auto;
	padding-top:60rem;
}

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

#edo{
	width:180rem;
  position: absolute;
	top:400rem;
	left:40rem;
}

#james{
	width:245rem;
  position: absolute;
	top:740rem;
	left:165rem;
}

#henry{
	width:180rem;
  position: absolute;
	top:425rem;
	right:15rem;
}

/* --------------------------------------------------
film
-------------------------------------------------- */
#film{
  width: 440rem;
	position:absolute;
	right:0;
	top:800rem;
}

#film1{
	width:100%;
	position:relative;
}

#goomy{
	position:absolute;
	width:180rem;
	right:20rem;
	top:0;
}

/* --------------------------------------------------
about_block
-------------------------------------------------- */
#about_block{
  width: 100%;
  position: relative;
	padding-top:800rem;
}

#about_block #about_title{
  width: 480rem;
  position: relative;
	margin-left:40rem;
}

#about_block #txt{
  width: 670rem;
  position: relative;
	margin:60rem 0 0 40rem;
}

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

#film2{
	width:100%;
  position: relative;
	padding-bottom:50rem;
}

.l-footer {
	width:100%;
  display: flex;
  align-items: center;
	position:relative;
	padding:70rem 0 50rem;
	background-color:#1a1a1a;
	margin-top:0;
}

/* --------------------------------------------------
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,
#goomy,
#about_block #about_title,
#about_block #txt,
#about_block #catch2,
#about_block #film2{
	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;
}

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

#about_block.is_loaded #txt{
  animation: rolling 0.6s cubic-bezier(0.6, 0, 0.4, 1) 0.8s forwards;
}

#about_block.is_loaded #catch2{
  animation: rolling 0.6s cubic-bezier(0.6, 0, 0.4, 1) 1.0s forwards;
}

#about_block.is_loaded #film2{
  animation: zoomOut 0.6s cubic-bezier(0.6, 0, 0.4, 1) 1.4s forwards;
}