@charset "UTF-8";
/* @group Reset */




#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 990;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 330px;
  height: 150px;
	margin-top: -75px;
  margin-left: -165px;
  text-align: center;
  z-index: 999;
}













h1 {
	position:absolute;
	left:-9999px;
	}



/*--------------------------------------------------------------------------------------------------------------------*/
/*768px*//*1024px*/
@media print, screen and (min-width : 768px){	
.tr05 {
    transition: all 0.5s ease-out;
}

	
	#movie {
		margin: 0 auto 0px;
		position: relative;
		
	}
	video {
  width: 100%;  /*宜指定 */

		vertical-align: bottom;
}
	
	.movie_txt {
	position:  absolute;        /* 要素の配置方法を指定 */
    padding: 0px;              /* 余白指定 */
    width:  980px;              /* 幅指定 */
    height: 110px;               /* 高さ指定 */
    text-align:  center;        /* 文字を中央揃えに */
	top:  0;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  auto;    /* 位置調整と組み合わせて上下中央に */
	}

	
	.css-fade1 {

animation-name:fade-in1;
  animation-duration:2s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:1s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}

@keyframes fade-in1 {
0% {opacity: 0; transform: translate3d(0,30px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

	
	/*- 共通　-*/
	.inner {
		margin: 0 auto;
		width: 980px;
		text-align: center;
	}
	.inner a {
		text-decoration:  none;
	}
	.inner_img {
		width: 570px;
	}
	.inner_txt {
		margin-top: 120px;
		width: 380px;
	}
	.inner .bdr {
		margin: 0 55px;
		padding-top: 25px;
	}
	.inner p {
		margin-bottom: 20px;
		 font-size: 1.125em;
		line-height: 1.8;
	}
	.inner_left {
	 	float: left;
	}
	.inner_right {
	 	float: right;
	}
	h2 {
		font-size: 2.5em;
		line-height: 1;
		margin-bottom: 25px;
	}
	h2 span {
		font-size: 50%;
	}
	/*- 共通　-*/
	
	
	#news {
		margin: 0 auto 70px;
		padding: 50px 0 40px 0;
		background: #0d5197;
	}
		#news h2,
	#news a {
		color: #fff;
	}
	#news .inner_left{
	 width: 200px;
	}
	#news .inner_right {
	 text-align: left;
	}
	#news .inner_right a {
	 color: #fff;
	}
	#news a:hover {
		color: #fff;
		text-decoration: underline;
	}
	#news .inner_right {
		text-align: left;
		width: 770px;
	}
	#news .inner_right ul li{
		margin-bottom: 8px;
	}
	#news .cat {
		background: #ff7d13;
		color: #fff;
		font-size: 0.875em;
		padding: 2px 5px;
		margin-right: 10px;
	}
	#news .cat a:hover {
		text-decoration: none;
	}
	
	
	#message {
		margin: 0 auto 50px;
	}
	#message a {
		color: #0d5197;
	}
	#message .bdr {
		border-top: 1px solid #0d5197;
	}
	
	#company {
		margin: 0 auto 80px;
		background: #0d5197; 
	}
	#company a {
		color: #fff;
	}
	#company .bdr {
		border-top: 1px solid #fff;
	}
	
	#interview a {
		color: #0d5197;
	}
	#interview .bdr {
		border-top: 1px solid #0d5197;
	}
	

	#concept {
		margin: 50px auto;
		background: #0d5197; 
	}
	#concept a {
		color: #fff;
	}
	#concept .bdr {
		border-top: 1px solid #fff;
	}
	
	#recruit {
		margin: 0 auto 90px;
	}
	#recruit a {
		color: #0d5197;
	}
	#recruit .bdr {
		border-top: 1px solid #0d5197;
	}
	
	#recruit_movie {
		margin: 0 auto 90px;
	}
	

	
	#library {
		color: #0c2fa0;
	}
	#library .bdr {
		border-top: 1px solid #0c2fa0;
	}
	
.zoom_img {
  width: 570px;
  height: 420px;
  overflow: hidden;
}
 
.zoom_img img {
  transition: 0.5s;
  /*拡大されるスピードを設定します*/
}
 
.zoom_img img:hover {
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
  /*拡大される比率を設定します*/
}
/*------------------------------------------ staff*/
	#staff {
	 margin-top: 30px;
    overflow: hidden;
	}
.loop_css2 {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 400vw;
    overflow: hidden;
  }

  .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .loop_css2 li {
    display: inline-block;
    *width: calc(400vw / 2);
	
     /* min-width: 330px;16人*/
	  min-width: 250px; /*22人*/
    margin: 0 5px 0 0;
    list-style: none;
    text-align: center;
  }
#library_img .loop_css2 li {
	min-width: 330px;
  }
	
	
	
  .loop_css2 li a {
    display: block;
  }

  .loop_css2 li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .loop_css2 li a:hover {
   

  }
  .loop_css2 ul:first-child {
    -webkit-animation: loop 80s -40s linear infinite;
    animation: loop 80s -40s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_css2 ul + ul {
    -webkit-animation: loop2 80s  linear infinite;
    animation: loop2 80s linear infinite;
  }
	
  #library_img .loop_css2 ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
  }

  #library_img .loop_css2 ul + ul {
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
  }
	
	
	
  .loop_css2:hover ul {
    animation-play-state: paused;
  }

  @-webkit-keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @-webkit-keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  @keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

	.loop_css2 li img {
	-webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .4s ease-in-out;
	}
	.loop_css2 li img:hover {
	-webkit-transform: scale(1.1);
    transform: scale(1.1);
	}
	
	
	
	
	
	.loop_css4 {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 400vw;
    overflow: hidden;
  }

  .loop_css4 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .loop_css4 li {
    display: inline-block;
    *width: calc(400vw / 2);
    min-width: 300px;
    margin: 0 20px 0 0;
    list-style: none;
    text-align: center;
  }

  .loop_css4 li a {
    display: block;
  }

  .loop_css4 li img {
    display: block;
    width: 100%;
    height: auto;
  }



  .loop_css4 ul:first-child {
    -webkit-animation: loop0 50s -25s linear infinite;
    animation: loop0 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_css4 ul + ul {
    -webkit-animation: loop02 50s  linear infinite;
    animation: loop02 50s linear infinite;
  }

  .loop_css2:hover ul {
    animation-play-state: paused;
  }

  @-webkit-keyframes loop0 {
    0% {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
  }

  @keyframes loop0 {
    0% {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
  }

  @-webkit-keyframes loop02 {
    0% {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
    to {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes loop02 {
    0% {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
    to {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

	.loop_css2 li img {
	-webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
	}
	.loop_css2 li img:hover {
	-webkit-transform: scale(1.1);
    transform: scale(1.1);
	}
	
	
	
	
	/*------------------------------------------ staffここまで*/	
	
/*---------------------------------------------------------------------ライブラリー----*/
#library_img {
	 margin-top: 10px;
    overflow: hidden;
	}
.loop_css3 li {

  /*height: 280px;*/
  margin: 15px auto;
	padding: 0 0px;
  transition-duration: 0.5s;
}
.loop_css3 li.w420 {
  width: 420px !important;

}
.loop_css3 li.w210 {
  width: 210px !important;

	padding: 0 45px;
}
	
.loop_css3 li.w420 img {
  width: 420px;
}
.loop_css3 li.w210 img {
  width: 210px;
}
	
.loop_css3 li img{
  /*width: 100%;*/
  cursor: pointer;
 transition: 0.5s;	
}
	
.loop_css3 li img:hover {
  -moz-transform: scale(1.2,1.2);
  -webkit-transform: scale(1.2,1.2);
  -o-transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  /*拡大される比率を設定します*/
  box-shadow: 6px 6px 6px rgba(0,0,0,0.5);	
}	


}


/*-----------------------------------------------------------*/
@media only screen and (max-width: 767px)  {

#movie {
		margin: 0 auto 0em;
		width: 100%;
	}
	#movie img {
		width: 100%;
		}
	
		.movie_txt {
	position:  absolute;        /* 要素の配置方法を指定 */
    padding: 0px;              /* 余白指定 */
    width:  100%;              /* 幅指定 */
    height: 404px;               /* 高さ指定 */
    text-align:  center;        /* 文字を中央揃えに */
	top:  20em;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  auto;    /* 位置調整と組み合わせて上下中央に */
	}

	
	.css-fade1 {

animation-name:fade-in1;
  animation-duration:2s; /*アニメーション時間 */
  animation-timing-function: ease-out; /*アニメーションさせるイージング */
  animation-delay:1s; /*アニメーション開始させる時間 */
  animation-iteration-count:1; /*繰り返し回数 */
  animation-direction:normal; /*往復処理をするかどうか */
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか */
}

@keyframes fade-in1 {
0% {opacity: 0; transform: translate3d(0,30px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

	
	/*- 共通　-*/
	.inner {
		width: 100%;
		text-align: center;
	}
	.inner a {
		text-decoration:  none;
	}
	.inner_img {
		width: 100%;
		text-align: center;
	}

	.inner_txt {
		margin-top: 3em;
		width: 100%;
	}
	.inner .bdr {
		margin: 0 2em;
		padding-top: 25px;
	}
	.inner p {
		margin-bottom: 20px;
		 font-size: 1.125em;
		line-height: 1.8;
	}
	.inner_left {
	 	float: left;
	}
	.inner_right {
	 	float: right;
	}
	h2 {
		font-size: 2.5em;
		line-height: 1;
		margin-bottom: 25px;
	}
	h2 span {
		font-size: 50%;
	}
	/*- 共通　-*/
	
	
	#news {

		background: #0d5197; 
	}
	#news .box {
		margin: 0 auto;
		padding: 3em 0;
		width: 90%;
	}
	#news h2,
	#news a {
		color: #fff;
	}
	#news a:hover {
		color: #fff;
		text-decoration: underline;
	}
	#news .inner_left {
		text-align: center;
		width: 100%;
	}
	#news .inner_right {
		border-top: 1px solid #fff;
		padding-top: 2em;
		text-align: left;
		margin: 0 auto;
		
	}
	#news .inner_right ul li{
		margin-bottom: 8px;
	}
	#news .cat {
		background: #ff7d13;
		color: #fff;
		font-size: 0.875em;

		padding: 2px 5px;
		margin-right: 10px;
	}
	
	
	#message {
		margin: 0 auto 4em;
	}
	#message a {
		color: #0d5197;
	}
	#message .bdr {
		border-top: 1px solid #0d5197;
	}
	
	#company {
		margin: 0 auto 4em;
		background: #0d5197; 
	}
	#company a {
		color: #fff;
	}
	#company .bdr {
		border-top: 1px solid #fff;
	}
	
	#interview a {
		color: #0d5197;
	}
	#interview .bdr {
		border-top: 1px solid #0d5197;
	}
	
		#concept {
		margin: 2em auto 4em;
		background: #0d5197; 
	}
	#concept a {
		color: #fff;
	}
	#concept .bdr {
		border-top: 1px solid #fff;
	}
	
	#recruit {
		margin: 0 auto 4em;
	}
	#recruit a {
		color: #0d5197;
	}
	#recruit .bdr {
		border-top: 1px solid #0d5197;
	}
	
	#library {
		color: #0c2fa0;
	}
	#library .bdr {
		border-top: 1px solid #0c2fa0;
		margin-bottom:  2em;
	}
#staff {
		margin: 0 auto 4em;
		width: 90%;
	line-height: 1.2;
	text-align: center;
	
	}
	#staff ul li{
		float: left;
		margin-right: 3%;
		width: 30%;
		margin-bottom: 1em;
		
	}
	#staff ul li:nth-child(3n) {
		float: left;
		width: 30%;
		margin-bottom: 1em;
	}
	#staff ul li span {
	 font-size: 75%;
		display: block;

		
	}



.zoom_img {
  width: 100%;
  height: auto;
  overflow: hidden;
}
 
.zoom_img img {
  transition: 0.5s;
  /*拡大されるスピードを設定します*/
}
 
.zoom_img img:hover {
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
  /*拡大される比率を設定します*/
}
	
	#library_img ul {
		 margin:  0 auto 0;
		width: 90%;
	}
	#library_img ul li {
		float: left;
		padding: 0.1em;
		width: 33%;
	}
	
	
	
	#recruit_movie {
		margin: 0 auto 6em;
	}
	
	.movie-wrap {
	width: 90%;
	padding: 0;
	box-sizing: border-box;
}

.movie-wrap .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.movie-wrap .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


	
	
	
	
	
}