@charset "utf-8";

/*--------------------------------------
staff
----------------------------------------*/
#staff{
	padding-bottom:10vw;
}

#saff_img1{
	width:66%;
	margin:0 auto;
}

.staff_name{
	width:52%;
	margin:4% auto 0;
}

#staff p{
	width:90%;
	margin:0 auto;
	font-size:3.0vw;
	line-height:1.8;
	padding:6% 0 8%;
}

.bottom_line{
	border-bottom:2px solid #b9cec0;
	padding-bottom:5%;
}

#comment h3{
	width:52%;
	margin:7% auto 0;
}

#staff #comment p{
	width:90%;
	margin:0 auto;
	font-size:3.4vw;
	line-height:2.0;
	padding:6% 0 8%;
}

#film{
	width:100%;
	background-color:#f9f9f7;
	padding:5% 0 0;
}

#art{
	width:100%;
	padding:5% 0 0;
}

#music{
	width:100%;
	background-color:#f9f9f7;
	padding:10% 0 14%;
}

#music_img{
	width:86%;
	margin:0 auto;
}

#message{
	width:86%;
	margin:8% auto;
}

#album{
	width:86%;
	margin:0 auto;
	background-color:#fff;
	padding:3% 0;
}

#album ul{
	width:90%;
	margin:0 auto;
  justify-content: space-between;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

#album ul li:nth-child(1){
	width:34%;
}

#album ul li:nth-child(2){
	width:60%;
}

#album ul li:nth-child(2) h3{
	font-size:3.6vw;
	line-height:1.1;
	font-weight:normal;
	margin-bottom:4%;
}

#album ul li:nth-child(2) h3 span{
	font-size:2.8vw;
}

#album ul li:nth-child(2) p{
	font-size:2.0vw;
	padding:0;
	margin:0;
	white-space: nowrap;
	line-height:1.4;
}

/*--------------------------------------
animation
----------------------------------------*/
#saff_img1,
#director .staff_name,
#director p,
#staff #comment h3,
#staff #comment p,
#film .staff_name,
#film p,
#art .staff_name,
#art p,
#music #music_img,
#music #message,
#music .staff_name,
#music .music_txt,
#album{
	opacity:0;
}

.is_loaded #saff_img1{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #director .staff_name{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #director p{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#staff #comment.is_loaded h3,
#film.is_loaded .staff_name,
#art.is_loaded .staff_name,
#music.is_loaded #music_img,
#album.is_loaded{
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

#staff #comment.is_loaded p,
#film.is_loaded p,
#art.is_loaded p,
#music.is_loaded #message{
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 1.0s;
          animation-delay: 1.0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

#music.is_loaded .staff_name{
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

#music.is_loaded .music_txt{
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}