@charset "utf-8";


#contents {
	padding-bottom: 5em;
}

#opening {
	display: none;
  position: fixed; top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: #6179b4;
  background: -moz-linear-gradient(60deg, #6179b4 0%, #10348d 45%, #1e2036 100%);
  background: -webkit-linear-gradient(60deg, #6179b4 0%,#10348d 45%,#1e2036 100%);
  background: linear-gradient(60deg, #6179b4 0%,#10348d 45%,#1e2036 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6179b4', endColorstr='#1e2036',GradientType=1 );
  z-index: 20;
}

body.first #opening {
	display: block;
}

#openingTxt {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 90%;
  max-width: 500px;
  height: 50px;
  margin: auto;
	text-indent: 1em;
  font-size: 25px;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: .7em;
  text-align: center;
  color: #fff;
	
	opacity: 0;
	animation-name: openingTxt;
  animation-duration: 4s;
	animation-delay: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes openingTxt {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@media screen and (max-width:490px){
#openingTxt {
  font-size:4.5vw;
} 
}



/* --------------------------------------------

catch

---------------------------------------------- */ 
.catch {
  position: relative;
	max-width: 900px; 
	height: 95vh;
	margin: auto;
  padding: 7% 0 8vw;
	overflow: hidden;
}
.catch__title {
  position: absolute; top: 3em; left: 5%;
  width: 24%; max-width: 150px;
	
	opacity: 0;
	animation-name: catch__title;
  animation-duration: 1s;
  animation-fill-mode: forwards;
	animation-delay: 0.5s;
}

/* 50th記念特設サイトバナー */
#banner-50th {
  display: block; position: relative;
}
@media only screen and (min-width:801px){
  #banner-50th {
    position: absolute;
    right: 20px; bottom: 20px;
    width: 36%; max-width: 400px;
  }
  #banner-50th img {
    width: 100%;
  }
}
@media only screen and (max-width:800px){
  #banner-50th {
    padding: 0 0 60px;
    text-align: center;
  }
  #banner-50th img {
    max-width: 60%;
  }
}
@media only screen and (max-width:450px){
  #banner-50th {
    margin-top: -120px;
  }
}
@media only screen and (max-width:450px){
  #banner-50th img {
    max-width: 80%;
  }
}

body.first .catch__title {
	opacity: 0;
	animation-name: catch__title;
  animation-duration: 1s;
  animation-fill-mode: forwards;
	animation-delay: 4s;
}

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

.catch__title img {
	display: block;
	width: 100%;
}


.catch__movie {
  width: 80vh; max-width: 660px;
	height: 80vh; max-height: 660px;
	margin:0 auto;
}

.catch__movie video {
	width: 100%;
}
.catch__movie video.mvAnimeLong {
	display: none;
}
.catch__movie video.mvAnimeShort {
	display: block;
}

body.first .catch__movie video.mvAnimeShort {
	display: none;
}
body.first .catch__movie video.mvAnimeLong {
	display: block;
}




@media screen and (max-width:768px){
.catch__title {
  top:5%; left: 2em;
}
.catch__movie {
	width: auto; height: 100%; max-height: none; 
}
.catch__movie video {
  width: auto; height:70%;
	margin: 20% 0 0 15% ;
}
}







/* --------------------------------------------

about

---------------------------------------------- */ 
.about {
  position: relative;
	max-height: 816px;
	overflow: hidden;
	background: rgba(0,0,0,1.00);
}

.about__photo {
  display: block;
  width: 100%;
  max-width: 1356px;
}

.about__textBox {
  position: absolute; top: 10vw; left: 55%;
  width: 45%; max-width: 700px;
}

.about__title {
	width: 100%;
  margin-bottom: 2rem;
	text-align: left;
	opacity: 0;
/*	transition: 1s;
	transition-delay: 1s;
*/}
.about__title img {
	width: 90%;
}

.animest .about__title {
	animation-name: fadeInBottomTop;
  animation-delay: 0.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.about__textBox p {
	color: #fff;
  line-height: 2.4;
	padding:2em 10% 4em 0;
}
.about__textBox p span {
	display: block;
	opacity: 0;
}
.animest .about__textBox p span {
	opacity: 0;
	animation-name: fadeInBottomTop;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;

}
.animest .about__textBox p span:nth-of-type(1) {
  animation-delay: 1.5s;
}
.animest .about__textBox p span:nth-of-type(2) {
	animation-delay: 1.7s;
}
.animest .about__textBox p span:nth-of-type(3) {
	animation-delay: 1.9s;
}
.animest .about__textBox p span:nth-of-type(4) {
	animation-delay: 2.1s;
}
.animest .about__textBox p span:nth-of-type(5) {
	animation-delay: 2.3s;
}



@media screen and (max-width:1024px){
.about__photo {
	width: 120%;
}
.about__textBox {
  left: 30%;
  width: 70%; 
}
.about__textBox p span {
  display: inline;
}
.about__textBox p br {
  display: none;
}
}

@media screen and (max-width:600px){
.about {
	max-height: none;

}
.about__textBox {
	position: relative; top:auto; left: 20%;
  width: 80%; 
	margin-top: -40%;
}
.about__title {
}
.about__textBox p {
	padding:2em 10% 3em ; 
	background: rgba(0,0,0,0.4);
}
}


/* --------------------------------------------

service

---------------------------------------------- */
.service {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d2d2d2+0,f0f0f0+15,ffffff+30,e6e6e6+50,ffffff+70,f0f0f0+85,d2d2d2+100 */
  background: #d2d2d2; /* Old browsers */
  background: -moz-linear-gradient(left, #d2d2d2 0%, #f0f0f0 15%, #ffffff 30%, #e6e6e6 50%, #ffffff 70%, #f0f0f0 85%, #d2d2d2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #d2d2d2 0%,#f0f0f0 15%,#ffffff 30%,#e6e6e6 50%,#ffffff 70%,#f0f0f0 85%,#d2d2d2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #d2d2d2 0%,#f0f0f0 15%,#ffffff 30%,#e6e6e6 50%,#ffffff 70%,#f0f0f0 85%,#d2d2d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#d2d2d2',GradientType=1 ); /* IE6-9 */
}

.service__inner {
  position: relative;
  max-width: 1356px;
  padding: 10em 0 6em;
}

.service__title {
	position: absolute; top: -6em; right: 0em;
	width: 28%; max-width: 160px;
	opacity: 0;
	transition: 0.8s;
	transition-delay: 0.3s;
}
.service__title img {
	width: 100%; 
}
.animest .service__title {
  right: 2em;
	opacity: 1;
}

/*-- item --*/
.service__item {
  float: left;
  overflow: hidden;
  width: 47%;
  margin: 0 6% 5em 0;
  /*max-width: 551px;*/
	opacity: 0;
}

.animest .service__item {
	animation-name: fadeInBottomTop;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.animest .service__item:nth-of-type(1) {
  animation-delay: 1s;
}
.animest .service__item:nth-of-type(2) {
  animation-delay: 1.2s;
}
.animest .service__item:nth-of-type(3) {
  animation-delay: 1.4s;
}
.animest .service__item:nth-of-type(4) {
  animation-delay: 1.6s;
}

.service__item:nth-child(odd) {
  margin-right: 0;
}

.service__item .service__heading {
  float: left;
  width: 54%;
}

.service__item .service__heading img {
  display: block;
  width: 100%;
}

.service__item .service__itemBox {
  float: right;
  width: 42%;
  /*max-width: 212px;*/
}

.service__item .service__itemBox p:nth-of-type(1) {
  margin-bottom: 1em;
  text-align: left;
	font-family: "リュウミン R-KL" , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 23px; font-size: 2.3rem;
	font-weight: bold;
}
.service__item .service__itemBox p:nth-of-type(2) {
	padding: 0 0 1.5em;
  /*font-size: 14px; font-size: 1.4rem;*/
}

.service__item .service__itemBox .button {
  width: 100%;
  padding: .8em 0;
}

@media screen and (max-width:1100px){
.service__item .service__heading {
  float: none;
  width: 100%;
  max-width: 250px;
  margin: 0 auto ;
}
.service__item .service__itemBox {
  float: none;
  width: 100%;
  max-width: none;
}
.service__item .service__itemBox p:nth-of-type(1) br {
	display: none;
}
.service__item .service__itemBox p:nth-of-type(2) {
  margin-bottom: 1em;
}
.service__item .service__itemBox .button {
  max-width: 400px;
  margin: 0 auto;
  padding: .8em 0;
}
}

@media screen and (max-width:780px){
.service__inner {
  padding: 2em 0;
}
 .service__title {
  position: static;
  /*max-width: 100px;*/
  margin: 0 auto 1em;
}
}

@media screen and (max-width:680px){

.service__item {
  float: none;
  overflow: hidden;
  width: 90%;
  margin: 0 auto 2em;
}

.service__item:nth-child(odd) {
  margin-right: auto;
}
}

/* --------------------------------------------

guide

---------------------------------------------- */
.guide { padding-top: 8em;}
.guide__recruit,
.guide__factory {
  margin-bottom: 6em;
}

.guide__inner {
  overflow: hidden;
  max-width: 1356px;
}

.guide__recruit,
.guide__factory {
	opacity: 0;
}
.guide__recruit.animest,
.guide__factory.animest {
	animation-name: fadeInBottomTop;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

.guide .photo {
  display: block;
  width: 52%;
}

.guide .guide__textBox {
  display: block;
  width: 48%;
}

.guide .guide__textBox h2 {
  width: 100%;
  margin: 1em 0 2em;
  padding: 0 0 .8em 2em;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  background: url(../img/index/dotBorder.gif) bottom left repeat-x;
}

.guide .guide__textBox h2 span {
  display: inline-block;
  margin-left: 1em;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  vertical-align: middle;
  color: #1e4c91;
}

.guide .guide__textBox p {
  width: 70%;
  max-width: 400px;
  margin: 0 0 1.6em 15%;
}

.guide .guide__textBox .button {
  width: 70%;
  max-width: 400px;
  margin: 0 0 0 15% ;
  padding: .8em 0;
}


.guide__recruit .recruit__photo {
  float: left;
}

.guide__recruit .guide__textBox {
  float: right;
}

.guide__factory .factory__photo {
  float: right;
}

.guide__factory .guide__textBox {
  float: left;
}

@media screen and (max-width:1024px){
.guide {
	max-width: 700px; margin: auto;
}
.guide .guide__textBox h2 {
  padding: 0 0 .8em 1em;
}
.guide .guide__textBox p {
  width: 90%;
  margin: 0 auto 0.6em;
}
.guide .guide__textBox .button {
  width: 90%;
  margin: 0 auto;
}


.guide__recruit .recruit__photo,
.guide__recruit .guide__textBox,
.guide__factory .factory__photo,
.guide__factory .guide__textBox {
  float: none;
  width: 100%;
}
}


/* --------------------------------------------

news

---------------------------------------------- */
.info {
  padding: 4em 0 6em;
  max-width: 1024px;
}

.info {
	opacity: 0;
}
.info.animest {
	animation-name: fadeInBottomTop;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

.info .info__title {
  position: relative;
  width: 100%;
  margin: 0 auto 3em;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  background: url(../img/index/info_border.gif) 0 16px no-repeat,url(../img/index/info_border.gif) 100% 16px no-repeat;
}

.info .info__title span {
  display: block;
  font-size: 13px;
  font-size: 1.3rem;
  color: #1e4c91;
}


.info .info__list {
  width: 94%;
  max-width: 790px;
  margin: 0 auto 2em;
}

.info .info__list li {
  padding: 1em .5em;
  border-bottom: 1px solid #c8c8c8;
}

.info .info__list li span {
  display: inline-block;
  margin-right: 1em;
  padding: 0 .5em;
  font-size: 12px;
  font-size: 1.2rem;
  vertical-align: middle;
  background: #ccd6e6;
}


.info .info__listButton {
  width: 70%;
  max-width: 400px;
  margin: 0 auto;
  padding: .8em 0;
}



@media screen and (max-width:980px){
.info {
  padding: 0 0 4em;
}

.info .info__title {
  margin-bottom: 1em;
  padding-bottom: .8em;
  background: url(../img/index/info_border.gif) bottom left repeat-x;
}
.info .info__list li {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
}

.info .info__list li span {
  display: block;
  max-width: 100px;
  margin: 0 0 .5em 0;
  text-align: center;
}
}

/* --------------------------------------------

links

---------------------------------------------- */
.links {
  padding: 2em 0 3em;
  background: url(../img/index/dotBack.gif) top left repeat;
}

.links .link__title {
  margin-bottom: 1em;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  color: #1e4c91;
}

.links .links__inner {
  text-align: center;
}

.links .links__inner a {
  display: inline-block;
  max-width: 16em;
  margin: 0 .25% 1em;
  padding: .5em 1em;
  font-size: 15px;
  font-size: 1.5rem;
  color: #1e4c91;
  background: #fff;
}

.links .links__inner a::before {
  display: inline-block;
  content: "";
  width: 6px;
  height: 10px;
  margin-right: .5em;
  background: url(../img/index/links_arrow.gif) top left no-repeat;
  background-size: contain;
}
@media screen and (max-width:680px){
.links {
  margin-bottom: 2em;
}

.links .links__inner a {
  width: 46%;
}
}
@media screen and (max-width:480px){
.links .links__inner a {
  display: block;
  width: 100%;
  margin: 0 auto 1em;
}
}