@charset "utf-8";

/* index
========================================================================== */

/* visual
========================================================================== */

#visual {
	width: 100%;
	height: calc(100vh - 75px);
	position: relative;
	text-align: center;
	zoom: 1;
	overflow: hidden;
}
#visual:after {
	content:"";
	display: block;
	clear: both;
}

#visual p.visual_p {
	width: 100%;
	font-size: 350%;
	font-weight: 900;
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 10px #000;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 100;
}

/* phones */
@media only screen and (max-width: 767px) {
	#visual p.visual_p {
		top: 40%;
		font-size: 150%;
	}
}

/* slide
-------------------------------------------------------------------------- */
.slide {
  position: relative;
  margin: 0;
  padding: 0;
}
.slide li {
  position: relative;
  width: 100%;
  height: calc(100vh - 75px);
}
.slide li::before {
  display: block;
  content: "";
}
.slide li {
  height: calc(100vh - 75px);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}
*/
.slide-animation{
    animation: fadezoom 10s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}


#visual a {
  bottom: 50px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  position: relative;
  z-index: 500;
}

#visual a span {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


.slide li.slide_about {
	background-position: top center;
}

.slide li.slide_business {
	background-position: bottom -75px center;
}


/* phones */
@media only screen and (max-width: 767px) {
	#visual a {
		bottom: 100px;
	}
	.slide li.slide_about {
		background-position: center left;
	}
	.slide li.slide_business {
		background-size: auto 130%;
	}
}


/* copy
========================================================================== */
#copy {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	text-align: center;
	/* background: linear-gradient(rgba(0, 150, 223, .3), rgba(0, 150, 223, .3)), url(../img/index/bg_copy.jpg); */  /* 背景画像指定 */
	background: url(../img/index/copy_bg.jpg);  /* 背景画像指定 */
	background-repeat: no-repeat;  /* 背景の繰り返し設定 */
    background-size: cover;    /* 背景の位置指定 */
    background-position: center;
	zoom: 1;
}
#copy:after {
	content:"";
	display: block;
	clear: both;
}
#copy p {
	/*margin:  150px auto 0;*/
	padding-top: 150px;
	font-weight: 700;
	font-size: 131%;
	line-height: 2;
	color: #fff;
	text-shadow: 0 0 20px #3f97e3;
}

/* phones */
@media only screen and (max-width: 767px) {
	#copy {
	    background-position: bottom center;
	}
	#copy p {
		font-size: 100%;
	}
}

/* contents
========================================================================== */

/* phones */
@media only screen and (max-width: 767px) {
	#contents {
		padding-top: 50px;
	}
}


/* about,recruit
========================================================================== */

#about,
#recruit {
	width: 100%;
	height: 500px;
	margin: 0 auto 100px;
	padding: 0;
	zoom: 1;
	position: relative;
}

#about {
	margin-top: 75px;
}
#about:after,
#recruit:after {
	content:"";
	display: block;
	clear: both;
}
	
	.about_visual,
	.recruit_visual {
		width: 800px;
		float: left;
		position: absolute;
		left: -150px;
	}

		.about_visual_under,
		.recruit_visual_under {
			width: 100%; 
			height: 500px; 
			background: #39aa4a;
			transform: skew(-10deg);
			position: absolute;
			top: 35px;
			left: 30px;
		}
		.about_visual_upper,
		.recruit_visual_upper {
			width: 100%; 
			height: 500px;
			transform: skew(-10deg);
			position: relative;		
			overflow: hidden;	
		}
		.about_visual_upper img,
		.recruit_visual_upper img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 120%;
			transform: translate(-50%, -50%) skew(10deg);
		}

	.about_title,
	.recruit_title {
		width: 350px;
		float: right;
		text-align: center;
	}

	.about_title h2,
	.recruit_title h2 {
		margin-top: 3em;
		font-size: 250%;
		font-weight: 700;

	}
	.about_title h2 span,
	.recruit_title h2 span {
		font-family: 'Oswald', sans-serif;
		font-size: 65%;
		font-weight: 400;
		color: #39aa4a;
		display: block;	
	}
	.about_title p,
	.recruit_title p {
		margin-top: 3em;
		font-size: 129%;
		font-weight: 700;
		line-height: 2;
	}
	.about_title div.btn,
	.recruit_title div.btn {
		margin-top: 5em;
		text-align: center;
	}
	.about_title div.btn a,
	.recruit_title div.btn a {
		width: 300px;
		padding: 1em 0;
		font-weight: 700;
		color: #000;
		background: #fff;
		border: 3px solid #000;
		display: inline-block;
		position: relative;
		box-shadow: 7px 7px 0 #ccc;
	}
	.about_title div.btn a:after,
	.recruit_title div.btn a:after {
		width: 1em;
		margin-top: -.5em;
		content: "\f061";
		font-family: "Font Awesome 5 Pro";
		font-weight: 900;
		line-height: 1;
		text-align: center;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 1em;
	}
	.about_title div.btn a:hover,
	.recruit_title div.btn a:hover {
		background: #000;
		color: #fff;
	}

/* phones */
@media only screen and (max-width: 767px) {
	#about,
	#recruit {
		width: auto;
		height: auto;
		margin: 0 auto 100px;
		padding: 0;
		zoom: 1;
		position: relative;
	}
	#about:after,
	#recruit:after {
		content:"";
		display: block;
		clear: both;
	}
		
		.about_visual,
		.recruit_visual {
			width: 100%;
			float: none;
			/*position: absolute;
			left: -150px;*/
			position: relative;
			left: -50px;
		}

			.about_visual_under,
			.recruit_visual_under {
				width: 95%; 
				height: 200px; 
				background: #39aa4a;
				transform: skew(-10deg);
				position: absolute;
				top: 35px;
				left: 30px;
			}
			.about_visual_upper,
			.recruit_visual_upper {
				width: 95%; 
				height: 200px;
				transform: skew(-10deg);
				position: relative;		
				overflow: hidden;	
			}
			.about_visual_upper img,
			.recruit_visual_upper img {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 120%;
				transform: translate(-50%, -50%) skew(10deg);
			}

	.about_title,
	.recruit_title {
		width: 100%;
		float: none ;
		text-align: center;
	}

	.about_title h2,
	.recruit_title h2 {
		margin-top: 2em;
		font-size: 250%;
		font-weight: 700;

	}
	.about_title h2 span,
	.recruit_title h2 span {
		font-family: 'Oswald', sans-serif;
		font-size: 65%;
		font-weight: 400;
		color: #39aa4a;
		display: block;	
	}
	.about_title p,
	.recruit_title p {
		margin-top: 2em;
		font-size: 129%;
		font-weight: 700;
		line-height: 2;
	}
	.about_title div.btn,
	.recruit_title div.btn {
		margin-top: 3em;
		text-align: center;
	}
	.about_title div.btn a,
	.recruit_title div.btn a {
		width: 95%;
		padding: 1em 0;
		font-weight: 700;
		border: 3px solid #000;
		display: inline-block;
		position: relative;
	}
	.about_title div.btn a:after,
	.recruit_title div.btn a:after {
		width: 1em;
		margin-top: -.5em;
		content: "\f061";
		font-family: "Font Awesome 5 Pro";
		font-weight: 900;
		line-height: 1;
		text-align: center;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 1em;
	}
	.about_title div.btn a:hover,
	.recruit_title div.btn a:hover {
		background: #000;
		color: #fff;
	}
}



/* bussiness,contact
========================================================================== */
#bussiness,
#contact {
	width: 100%;
	height: 500px;
	margin: 0 auto 100px;
	padding: 0;
	zoom: 1;
	position: relative;
}
#bussiness:after
#contact:after {
	content:"";
	display: block;
	clear: both;
}

	.bussiness_visual,
	.contact_visual {
		width: 800px;
		float: right;
		position: absolute;
		right: -150px;
	}

		.bussiness_visual_under,
		.contact_visual_under {
			width: 100%; 
			height: 500px; 
			background: #3f97e3;
			transform: skew(10deg);
			position: absolute;
			top: 35px;
			right: 30px;
		}
		.bussiness_visual_upper,
		.contact_visual_upper {
			width: 100%; 
			height: 500px;
			transform: skew(10deg);
			position: relative;		
			overflow: hidden;	
		}
		.bussiness_visual_upper img,
		.contact_visual_upper img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 120%;
			transform: translate(-50%, -50%) skew(-10deg);
		}

	.bussiness_title,
	.contact_title {
		width: 350px;
		float: left;
		text-align: center;
	}

	.bussiness_title h2,
	.contact_title h2 {
		margin-top: 3em;
		font-size: 250%;
		font-weight: 700;

	}
	.bussiness_title h2 span,
	.contact_title h2 span {
		font-family: 'Oswald', sans-serif;
		font-size: 65%;
		font-weight: 400;
		color: #3f97e3;
		display: block;	
	}
	.bussiness_title p,
	.contact_title p {
		margin-top: 3em;
		font-size: 129%;
		font-weight: 700;
		line-height: 2;
	}
	.bussiness_title div.btn,
	.contact_title div.btn {
		margin-top: 5em;
		text-align: center;
	}
	.bussiness_title div.btn a,
	.contact_title div.btn a {
		width: 300px;
		padding: 1em 0;
		font-weight: 700;
		color: #000;
		background: #fff;
		border: 3px solid #000;
		display: inline-block;
		position: relative;
		box-shadow: 7px 7px 0 #ccc;
	}
	.bussiness_title div.btn a:after,
	.contact_title div.btn a:after {
		width: 1em;
		margin-top: -.5em;
		content: "\f061";
		font-family: "Font Awesome 5 Pro";
		font-weight: 900;
		line-height: 1;
		text-align: center;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 1em;
	}
	.bussiness_title div.btn a:hover,
	.contact_title div.btn a:hover {
		background: #000;
		color: #fff;
	}

/* phones */
@media only screen and (max-width: 767px) {
	#bussiness,
	#contact {
		width: auto;
		height: auto;
		margin: 0 auto 100px;
		padding: 0;
		zoom: 1;
		position: relative;
	}
	#bussiness:after
	#contact:after {
		content:"";
		display: block;
		clear: both;
	}

		.bussiness_visual,
		.contact_visual {
			width: 100%;
			float: none;
			/*position: absolute;
			right: -150px;*/
			position: relative;
			right: -75px;
		}

			.bussiness_visual_under,
			.contact_visual_under {
				width: 95%; 
				height: 200px; 
				background: #3f97e3;
				transform: skew(10deg);
				position: absolute;
				top: 35px;
				right: 50px;
			}
			.bussiness_visual_upper,
			.contact_visual_upper {
				width: 95%; 
				height: 200px;
				transform: skew(10deg);
				position: relative;		
				overflow: hidden;	
			}
			.bussiness_visual_upper img,
			.contact_visual_upper img {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 120%;
				transform: translate(-50%, -50%) skew(-10deg);
			}

		.bussiness_title,
		.contact_title {
			width: 100%;
			float: none;
			text-align: center;
		}

		.bussiness_title h2,
		.contact_title h2 {
			margin-top: 2em;
			font-size: 250%;
			font-weight: 700;

		}
		.bussiness_title h2 span,
		.contact_title h2 span {
			font-family: 'Oswald', sans-serif;
			font-size: 65%;
			font-weight: 400;
			color: #3f97e3;
			display: block;	
		}
		.bussiness_title p,
		.contact_title p {
			margin-top: 2em;
			font-size: 129%;
			font-weight: 700;
			line-height: 2;
		}
		.bussiness_title div.btn,
		.contact_title div.btn {
			margin-top: 3em;
			text-align: center;
		}
		.bussiness_title div.btn a,
		.contact_title div.btn a {
			width: 95%;
			padding: 1em 0;
			font-weight: 700;
			border: 3px solid #000;
			display: inline-block;
			position: relative;
		}
		.bussiness_title div.btn a:after,
		.contact_title div.btn a:after {
			width: 1em;
			margin-top: -.5em;
			content: "\f061";
			font-family: "Font Awesome 5 Pro";
			font-weight: 900;
			line-height: 1;
			text-align: center;
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 1em;
		}
		.bussiness_title div.btn a:hover,
		.contact_title div.btn a:hover {
			background: #000;
			color: #fff;
		}
}