h3{background-image:url(img/xsub_header.png.pagespeed.ic.v2tOmILc_4.png);background-size:cover;padding:140px 0 60px;color:#fff;text-align:center;font-size:30px;margin:0}#contact{margin:100px auto;display:flex;align-items:center;justify-content:center}.c_img{text-align:center;width:50%}.c_img img{width:400px}.c_maps{width:40%}.cmap h5{background-color:#000;color:#fff;margin:15px 0 5px;box-shadow:1px 3px 4px #333}.cmap .cmap_body{background-color:#f8f8f8;box-shadow:1px .5px 2px 1px #333;padding:20px;font-size:13px}@media screen and (max-width:820px){#contact{display:block;margin:50px auto;justify-content:center}.c_img{width:100%}.c_img img{width:200px}.c_maps{width:90%;margin:auto}}.company h4{text-align:center;font-size:19px;width:100px;border-bottom:.5px solid #333;margin:50px auto;padding:10px 0}.company_body{margin:auto;width:800px;line-height:40px}.company_body li{border-bottom:.5px solid #333}.company_body li dl{display:flex}.company_body li dl dt{width:200px;text-align:left}.center{text-align:center}.center iframe{margin:40px auto 150px}@media screen and (max-width:820px){.company h4{width:90px;margin:50px auto;padding:5px 0}.company_body{font-size:13px;margin:auto;width:90%;line-height:30px}.company_body li dl dt{width:20%}.center iframe{width:90%;height:200px;margin:40px auto 80px}}.map_text{font-size:13px;width:80%;margin:auto}}



/* work */


#works{margin:70px auto}.work_body{align-items:center;display:flex;width:900px;margin:50px auto}.w_img{width:600px}.w_img img{height:270px}.w_text{width:700px;font-size:13px;padding:0 40px}.w_text h5{font-size:20px;margin:10px 0}.w_text_body{line-height:30px}@media screen and (max-width:820px){#works{margin:50px auto}.work_body{display:block;width:90%;margin:40px auto}.w_img{width:100%}.w_text{width:100%;font-size:13px;padding:0}}.works{width:80%;margin:30px auto;position:relative;height:auto}.works .tab{text-decoration:none;display:flex;margin:0 auto 30px;padding:0}.works .tab a{text-decoration:none;margin:0 40px 0 0}.tab_res{display:flex;width:25%;justify-content:space-between}.last li{margin:0}@media screen and (max-width:920px){.works .tab{text-align:left;display:block;line-height:25px;font-size:15px;margin:0 0 10px 0}}.tab li a{color:#ababab;text-decoration:none;display:block}.tab li.active a{color:#333}.area ul{padding:0;margin:0;width:100%;height:100%;display:flex;justify-content:space-between;overflow:hidden}@media screen and (max-width:1020px){.works{width:95%}.area{padding:0;margin:0}.area ul{padding:0;margin:0 auto;display:block;justify-content:center}}.area{margin:auto;display:none;opacity:0;height:auto;padding:0;margin:0 auto}.area.is-active{display:block;animation-name:displayAnime;animation-duration:2s;animation-fill-mode:forwards}.area.is-active{display:block;animation-name:displayAnime;animation-duration:2s;animation-fill-mode:forwards}@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}.works .area ul a li{height:auto;margin:auto;position:relative;padding:0;height:100%;width:100%}.works .area ul a{margin:5px;padding:0;height:100%;width:100%}.works .area li .work_img{width:100%;height:250px}.works .area li img{height:100%}@media screen and (max-width:1020px){.works .area li .work_img{width:100%}}@media screen and (max-width:450px){.works .area li .work_img{width:100%;height:250px}}.works .area ul li::before{background:rgba(0,0,0,.85);bottom:0;content:'';left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease;width:100%;height:auto;z-index:3;overflow:hidden;margin:auto}.works .area ul li:hover::before{opacity:1}.area li .text{text-align:left;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:250px;font-size:10px;color:#fff;text-align:center;opacity:0;z-index:3;transition:opacity .5s ease , transform .5s ease}.area li .text h5{text-align:center;margin:0;font-weight:inherit;font-size:12px}.area li .text h4{font-size:15px;letter-spacing:2px;margin:0}.area li:hover .text{opacity:1}@charset "utf-8";.wrapper{overflow:hidden}.flex{display:flex;flex-wrap:wrap}.box{width:220px;padding:20px;margin:0 20px 20px 0;background:#666;color:#fff;box-sizing:border-box}.bgextend,.lineTrigger{width:220px;padding:20px;margin:0 20px 20px 0;box-sizing:border-box}.fadeIn{animation-name:fadeInAnime;animation-duration:4s;animation-fill-mode:forwards;opacity:0}@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}.fadeUp{animation-name:fadeUpAnime;animation-duration:2.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}.fadeDown{animation-name:fadeDownAnime;animation-duration:.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}.fadeLeft{animation-name:fadeLeftAnime;animation-duration:2.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}.fadeRight{animation-name:fadeRightAnime;animation-duration:2.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}.fadeInTrigger,.fadeUpTrigger,.fadeDownTrigger,.fadeLeftTrigger,.fadeRightTrigger{opacity:0}.flipDown{animation-name:flipDownAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0}@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}.flipLeft{animation-name:flipLeftAnime;animation-duration:1s;animation-fill-mode:forwards;perspective-origin:left center;opacity:0}@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}.flipLeftTop{animation-name:flipLeftTopAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0}@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}.flipRight{animation-name:flipRightAnime;animation-duration:1s;animation-fill-mode:forwards;perspective-origin:right center;opacity:0}@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}.flipRightTop{animation-name:flipRightTopAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0}@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}.flipDownTrigger,.flipLeftTrigger,.flipLeftTopTrigger,.flipRightTrigger,.flipRightTopTrigger{opacity:0}.rotateX{animation-name:rotateXAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
		}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
}.rotateY{animation-name:rotateYAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
		}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
}.rotateLeftZ{animation-name:rotateLeftZAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
}.rotateRightZ{animation-name:rotateRightZAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
}.rotateXTrigger,.rotateYTrigger,.rotateLeftZTrigger,.rotateRightZTrigger{opacity:0}.zoomIn{animation-name:zoomInAnime;animation-duration:.5s;animation-fill-mode:forwards}@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}.zoomOut{animation-name:zoomOutAnime;animation-duration:.5s;animation-fill-mode:forwards}@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}.zoomInTrigger,.zoomOutTrigger{opacity:0}.blur{animation-name:blurAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}.blurTrigger{opacity:0}.smooth{animation-name:smoothAnime;animation-duration:1s;animation-fill-mode:forwards;　transform-origin:left;opacity:0}@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}.smoothTrigger{opacity:0}.bgextend{animation-name:bgextendAnimeBase;animation-duration:1s;animation-fill-mode:forwards;position:relative;overflow:hidden;opacity:0}@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}.bgappear{animation-name:bgextendAnimeSecond;animation-duration:1s;animation-delay:.6s;animation-fill-mode:forwards;opacity:0}@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}.bgLRextend::before{animation-name:bgLRextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}.bgRLextend::before{animation-name:bgRLextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}.bgDUextend::before{animation-name:bgDUextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}.bgUDextend::before{animation-name:bgUDextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}.bgappearTrigger,.bgUDextendTrigger,.bgDUextendTrigger,.bgRLextendTrigger,.bgLRextendTrigger{opacity:0}.lineTrigger{position:relative;opacity:0}.lineTrigger.lineanime{animation-name:lineAnimeBase;animation-duration:1s;animation-fill-mode:forwards}@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}.lineTrigger::before,.lineTrigger::after{position:absolute;content:'';width:0;height:1px;background:#333}.line2::before,.line2::after{position:absolute;content:'';width:1px;height:0;background:#333}.lineTrigger::before{top:0;left:0}.lineTrigger.lineanime::before{animation:lineAnime .5s linear 0s forwards}.line2::before{top:0;right:0}.lineTrigger.lineanime .line2::before{animation:lineAnime2 .5s linear .5s forwards}.lineTrigger::after{bottom:0;right:0}.lineTrigger.lineanime::after{animation:lineAnime .5s linear 1s forwards}.line2::after{bottom:0;left:0}.lineTrigger.lineanime .line2::after{animation:lineAnime2 .5s linear 1.5s forwards}@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}.lineTrigger.lineanime .lineinappear{animation:lineInnerAnime .5s linear 1.5s forwards;opacity:0}@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}.count2{animation-iteration-count:2}.countinfinite{animation-iteration-count:infinite}.delay-time05{animation-delay:.5s}.delay-time1{animation-delay:1s}.delay-time15{animation-delay:1.5s}.delay-time2{animation-delay:2s}.delay-time25{animation-delay:2.5s}.change-time05{animation-duration:.5s}.change-time1{animation-duration:1s}.change-time15{animation-duration:1.5s}.change-time2{animation-duration:2s}.change-time25{animation-duration:2.5s}