@charset "utf-8";
/* CSS Document */

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

    .shutter{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background-color:#2c4482;
      z-index:99;
	  height: 220px;
    }
    
    .shutter::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      background-color: #fff;
      width: 0;
      height: 1px;
    }
    .shutter {
      -webkit-animation: byeShutter 2.6s forwards;
              animation: byeShutter 2.6s forwards;
    }
    .shutter::before {
      -webkit-animation: shutterOpen 2.6s forwards;
              animation: shutterOpen 2.6s forwards;
    }
    .content {
      -webkit-animation: contentScale 2.6s forwards;
              animation: contentScale 2.6s forwards;
	height: 220px;
	max-width: 100%;
    }
    .content_explain {
	background: url(../img/pic_ttl_explain.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_guidelines {
	background: url(../img/pic_ttl_guidelines.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_human{
	background: url(../img/pic_ttl_human.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_mrp{
	background: url(../img/pic_ttl_mrp.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_number{
	background: url(../img/pic_ttl_suuji.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_work{
	background: url(../img/pic_ttl_work.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_entry{
	background: url(../img/pic_ttl_entry.jpg) no-repeat 0 0;
    background-size:cover;
    }
	.content_infra{
	background: url(../img/pic_ttl_infra.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_quality{
	background: url(../img/pic_ttl_quality.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_solution{
	background: url(../img/pic_ttl_eigyo.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_system{
	background: url(../img/pic_ttl_system.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_web{
	background: url(../img/pic_ttl_web.jpg) no-repeat 0 0;
    background-size:cover;
    }
    .content_faq{
	background: url(../img/pic_ttl_faq.jpg) no-repeat 0 0;
    background-size:cover;
    }

	@keyframes byeShutter {
      70% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        display: none;
        z-index: -1;
      }
    }
    @keyframes shutterOpen {
      0% {
        width: 0;
        height: 1px;
      }
      50% {
        width: 100%;
        height: 1px;
      }
      90% {
        width: 100%;
        height: 100%;
      }
      100% {
        width: 100%;
        height: 100%;
      }
    }


@media screen and (max-width:1100px) {
  #main_pic{
    width: 100%;
    position: relative;
}
	.container{
	padding-top: 78px
	}

    .shutter{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background-color:#2c4482;
      z-index:99;
      margin-top: 78px;
}  
    
}

@media screen and (max-width:425px) {
    #main_pic{
    width: 100%;
    position: relative;
}
	.container{
	padding-top:  60px
	}
    .shutter{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background-color:#2c4482;
      z-index:99;
	  height:180px;
     margin-top: 60px;
} 
	.content {
	height: 180px;
	max-width: 100%;
    }
    
}