@charset "UTF-8";
/*------------------------
  common
------------------------*/
#pageloading{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#FFF;
	opacity:1;
	z-index:10;
}
#pageloading.slideLeft{
	transform-origin: right top;
	animation: slideLeft .6s 2s forwards;
}
#pageloading .logo{
	position:absolute;
	top:calc(50% - 70px);
	left:calc(50% - 70px);
	opacity:0;
	animation: showlogo 3000ms 500ms forwards;
}

@keyframes showlogo{
	0%{
		opacity:0;
	}
	50%{
		opacity:1;
	}
	100%{
		opacity:0;
	}
}
@keyframes slideLeft{
	0%{
		transform:scale(1);
	}
	100%{
		transform:scale(0,1);
}
}

.hero {
  position: relative;
	margin-top:70px;
}
header {
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	width:100%;
}
/* video */
.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 90vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* overlay */
.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0);
}

/* text */
.text-box {
	position:absolute;
	left:50%;
	top:calc(50% - 80px);
	transform:translateX(-50%);
	width:100%;
	text-align:center;
}
.text-box h2{
	color:#FFF;
	font-size:2.6rem;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	margin-bottom:10px;
}
.text-box h3{
	color:#FFF;
	text-align:center;
}
.hero header{
	position:absolute;
	top:5px;
	left:15px;
	width:100%;
	z-index:2;
}
.hero .nav{
	position:absolute;
	top:0;
	right:0;
}
.hero .line{
	position:absolute;
	bottom:60px;
	left:50%;
	transform:translatex(-50%);
	transform-origin:top left;
	display:inline-block;
	text-align:center;
	color:#AAA;
}
.hero .line:after{
	display:block;
	content:'';
	position:absolute;
	bottom:-80px;
	left:50%;
	height:80px;
	width:1px;
	background:#000;
	transform-origin:top left;
	animation:lineAni 3s infinite;
}

@keyframes lineAni{
	0%{
		transform:scale(0);
	}
	100%{
		transform:scale(1);
	}
}

@media(max-width:40em){
.video-box {
  height: auto;
}
.text-box {
	top:calc(50% - 30px);
}
.text-box h2{
	font-size:1.8rem;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	margin-bottom:0;
}
	.hero. line{
		display:none;
	}
}

/*------------------------
  #information
------------------------*/
#information {

	margin:0 0 60px 0;
}
#information .flex-wrapper{
	max-width:1200px;
	margin:0 auto ;
	padding:0 .9375rem;
}
#information .flex-wrapper .flex-one{
	width:24%;
	display:flex;
	align-items:center;
	position:relative;
}
#information .flex-wrapper .flex-one:before{
	position:absolute;
	left:-40px;
	display:block;
	content:'';
	width:1px;
	height:100%;
	background:#ddd;
	transform:rotate(-30deg);
}
#information .flex-wrapper .flex-one:after{
	position:absolute;
	right:-20px;
	display:block;
	content:'';
	width:1px;
	height:100%;
	background:#ddd;
	transform:rotate(-30deg);
}
#information .flex-wrapper .flex-three{
	width:72%;
	padding:30px;
	display:flex;
}
#information h2{
	font-size:4.5rem;
}
#information h2 span{
	font-size:.3em;
	font-weight:700;
	letter-spacing:2px;
}
@media (max-width:39em){
#information {
	background:#FFF;
}
#information h2{
	margin-bottom:10px;
	font-size:3rem;
}
#information .flex-wrapper{
	padding:0;
}
#information .flex-wrapper .flex-one{
	width:100%;
	padding:0 15px;
	margin-bottom:0;
}
#information .flex-wrapper .flex-three{
	width:100%;
	padding:15px;
}

}
/*------------------------
  #company
------------------------*/
#company{
	margin:0 auto 50px;
}
#company .flex-wrapper{
	max-width:1200px;
	margin:0 auto;
}
#company .flex-one{
	width:31%;
}
#company .flex-one img{
	width:100%;
}
#company .innerArea{
	max-width:1200px;
	margin:0 auto;
}
#company .innerArea h2{
	font-size:4.5rem;
}
#company .innerArea h2 span{
	font-size:.3em;
	font-weight:700;
	letter-spacing:2px;
}
#company .flex-one h4{
	font-size:1rem;
	margin:0 0 7px;
}
#company .innerArea{
	max-width:1200px;
	margin:0 auto;
	background:#FFF;
}
@media (max-width:39em){
#company .flex-wrapper{
	padding:0 10px;
}
#company .flex-one{
	width:100%;
}
#company .innerArea h2{
	font-size:3rem;
}
}
/*------------------------
  #service
------------------------*/
#service{
	margin:100px auto;
}
#service .flex-wrapper{
	max-width:1200px;
	margin:0 auto;
}
#service .flex-one{
	width:31%;
}
#service .flex-one img{
	width:100%;
}
#service .innerArea{
	max-width:1200px;
	margin:0 auto;
}
#service .innerArea h2{
	font-size:4.5rem;
}
#service .innerArea h2 span{
	font-size:.3em;
	font-weight:700;
	letter-spacing:2px;
}
#service .flex-one h4{
	font-size:1rem;
	margin:0 0 7px;
}
#service .innerArea{
	max-width:1200px;
	margin:0 auto;
	background:#FFF;
}
@media (max-width:39em){
#service .flex-wrapper{
	padding:0 10px;
}
#service .flex-one{
	width:100%;
}
#service .innerArea h2{
	font-size:3rem;
}
}

/*------------------------
  #case
------------------------*/
#case{
	margin-bottom:60px;
	padding:30px 0;
}
#case{
	margin:100px auto;
}
#case .flex-wrapper{
	max-width:900px;
	margin:0 auto;
}
#case .flex-one{
	width:24%;
}
#case .innerArea{
	max-width:1200px;
	margin:0 auto;
}
#case .innerArea h2{
	font-size:4.5rem;
}
#case .innerArea h2 span{
	font-size:.3em;
	font-weight:700;
	letter-spacing:2px;
}
#case .flex-one h4{
	color:#09315f;
	font-size:1em;
}

@media (max-width:39em){
#case .flex-wrapper{
	padding:0 10px;
}
#case .flex-one{
	width:48%;
}
#case .innerArea h2{
	font-size:3rem;
}
}
/*------------------------
  #contact
------------------------*/
body.home #contact{
	background-size:cover;
	margin-bottom:0;
	padding:30px 0 100px;
}
#contact .innerArea{
	max-width:1200px;
	margin:0 auto;
}
#contact .innerArea h2{
	font-size:4.5rem;
}
#contact .innerArea h2 span{
	font-size:.3em;
	font-weight:700;
	letter-spacing:2px;
}
#contact .flex-wrapper{
	max-width:1200px;
	margin:0 auto;
}
#contact .flex-wrapper .flex-one{
	position:relative;
}

@media (max-width:39em){

#contact .innerArea h2{
	font-size:3rem;
}
}