@charset "UTF-8";

/*ファーストビュー======================================*/
@media(max-width: 959px){
	.video-area{
		display: none;
	}
	#sec-top{
	    height: 100vh;
	    padding-top: 30px;
	}
	#video-sp{
		position: fixed;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background: url(../assets/first-view-video_sp06.gif);
		background-size: cover;
		background-position: center center;
	}
}
/*PC*/
@media(min-width: 960px){
	#video-sp{
		display: none;
	}
	#sec-top{
	    height: 100vh;
	}
	.sec-top__lead-wrapper{
		height: 100%;
		width: 100%;
	    display: flex;
	    align-items: center;
	}
	.video-area{
	    position: fixed;
	    z-index: -1;
	    top: 0;
	    right:0;
	    left:0;
	    bottom:0;
	    overflow: auto;
		/* IE, Edge 対応 */
		-ms-overflow-style: none;
		/* Firefox 対応 */
		scrollbar-width: none;
	}
	.video-area::-webkit-scrollbar {
    	display:none;
	}
	#video {
	    /*天地中央配置*/
	    position: absolute;
	    z-index: -1;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    /*縦横幅指定*/
	    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	    min-height: 100%;
	    min-width: 100%;
	}
}
/*リード文の設定*/
#sec-top h2{
	text-align: left;
	padding-left: 28px;
}
#sec-top h2 span{
    color:#fff;
    text-shadow: 0 0 8px #888;
}
#sec-top .lead-title{
	font-weight: 700;
	font-size: 4.0rem;
	display: inline-block;
	margin-bottom: 15px;
}
#sec-top .lead-caption{
	font-size: 2.0rem;
}
@media(max-width: 319px){
	#sec-top .lead-title{
		font-size: 9.41176vw;
	}
	#sec-top .lead-caption{
		font-size: 4.70588vw;
	}	
}
@media(min-width: 768px){
	#sec-top h2{
		padding-left: 6.9444444444444%;
	}
}
@media(min-width: 960px){
	#sec-top{
	    padding-top: 0;
	}
	.sec-top__lead-wrapper{
		margin-top: 50px;
	}
	#sec-top .lead-title{
		font-size: 6.0rem;
	}
}



/*事業内容-----------------------------------*/
.sec-business{
	padding: 70px 0;
  	background:#fff;
}
.sec-business__title{
	margin-bottom: 40px;
}
.service-item:not(:last-child){
	margin-bottom: 60px;
}
.service-item-image{
	width: 100%;
	height: 56.470588235vw;
	margin-bottom: 30px;
	position: relative;
}
.service-item-image img,
.service-item-image span.mask{
	width: 100%;
	height: 100%;
}
.service-item-image span.mask{
	position: relative;
	display: block;
	line-height: 0;
	overflow: hidden;
}
.service-item-image span.mask::before{
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	opacity: 0;
	transition: .3s ease-in-out;
	transform: translateY(-100%);
	background: rgba(0, 136, 204, .8);
	width: 100%;
	height: 100%;
}
@keyframes PageAnime{
  0% {
    transform-origin:left;
    transform:translateX(-100%) skewX(-45deg);
  }
  100% {
    transform-origin:left;
    transform:translateX(0%) skewX(-45deg);
  }
}
.service-item-image:hover span.mask::before{
	opacity: 1;
	transform: translateY(0);
}
/*「MORE」の文字*/
.service-item-image span.cap{
	position: absolute;
	opacity: 0;
	transition: .5s ease-in-out;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	line-height: 1.5;
	font-size: 2.0rem;
	border-bottom: 2px solid #fff;
}
.service-item-image:hover span.cap{
	opacity: 1;
}
.service-item-image span.cap:hover{
	font-size: 2.8rem;
}
.service-item_desc-wrapper{
	padding: 0 6.58823529411765%;
	max-width: 600px;
	margin: 0 auto;
}
.service-item_desc h3{
 margin-bottom: 20px;
}
.service-item_desc p{
	margin-bottom: 20px;
	text-align: left;
}


@media(min-width: 768px){
	.sec-business{
		padding: 120px 0;
	}
	.sec-business__title{
		margin-bottom: 60px;
	}
	.service-items{
		display: flex;
		justify-content: flex-start;
	}
	.service-item{
		width: 50%;
	}
	.service-item:not(:last-child){
		margin-bottom: 0;
	}
	.service-item_desc .btn{
		display: none;
	}
	.service-item-image{
		border: solid 1px #fff;
		height: 29.16vw;
	}
	.service-item_desc{
		margin: 0 13.8888888%;

	}
	.service-item_desc-wrapper{
		padding: 0;
		max-width: 460px;
	}
}

/*会社紹介-----------------------------------*/
.sec-about{
	padding: 60px 0 290px;
	color: #fff;
	position: relative;
}
.sec-about h2 .caption{
	text-shadow: 0 0 14px rgb(255 255 255 / 90%);
}
.sec-about-filter::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .20);
	z-index:1;
}
.sec-about__title,
.sec-about-text{
	position: relative;
	z-index: 3;
}
.sec-about__title{
	margin-bottom: 40px;
}
.sec-about-text{
	padding: 0 28px;
	text-align: left;
}
.sec-about-text p{
	margin-bottom: 30px;
}
.sec-about-text .btn{
	margin: 0 auto 0 0;
	box-shadow: 0 0 50px rgb(255 255 255 / 40%);
}
.Ota-ku_map{
	width: 140%;
	height: auto;
	position: absolute;
	bottom: 30px;
	right: 0;
	z-index: 2;
	overflow: hidden;
}
.Ota-ku_map img{
	width: 100%;
}
@media(min-width: 600px){
	.Ota-ku_map{
		width: 100%;
		right: 30px;
		display: flex;
		justify-content: flex-end;
		align-items: end;
	}
	.Ota-ku_map img{
		object-fit: contain;
		max-width: 1100px;
	}
}
@media(min-width: 768px){
	.sec-about-text{
		padding: 0 0 0 6.9444%;
	}
}
@media(min-width: 960px){
	.sec-about{
		padding: 100px 0 290px;
	}
	.sec-about__title{
		margin-bottom: 60px;
	}
}
@media(min-width: 1440px){
	.sec-about-container{
		max-width: 1440px;
		margin: 0 auto;
		position: relative;
	}
	.Ota-ku_map{
		position: absolute;
		bottom: -240px;
	}
}


/*採用情報-----------------------------------*/
.sec-recruit{
	padding: 70px 0;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}
.sec-recruit_text{
	padding-bottom: 314px;
}
.sec-recruit_text-container{
	margin: 0 0 0 auto;
	background-color: #e0eff7;
	width: 93.411764705%;
	max-width: 600px;
	padding: 60px 30px;
	position: relative;
	z-index: 2;
}
.sec-recruit_image{
	position: absolute;
	bottom: 70px;
	height: 380px;
	width: 100%;
	overflow: hidden;
	background-image: url(../assets/top_recruit.jpeg);
	background-size: cover;
	background-position: center center;
}
.sec-recruit_text-wrapper{
	max-width: 340px;
	margin: 0 auto;
}
.sec-recruit_text h2{
	margin-bottom: 40px;
}
.sec-recruit_text p{
	text-align: left;
	margin-bottom: 40px;
}
@media(max-width: 425px){
	.sec-recruit_image{
		background-position: 0 0;
	}
}
@media(min-width: 768px){
	.sec-recruit_text{
		padding-bottom: 144px;
	}
	.sec-recruit_text-container{
		width: 460px;
		height: 440px;
		display: flex;
		align-items: center;
		padding: 0;
	}
	.sec-recruit_text-wrapper{
		width: 61.2%;
		max-width: none;
	}
	.sec-recruit_image{
		width: 58%;
		height: 420px;
	}
}
@media(min-width: 960px){
	.sec-recruit-container{
		max-width: 1440px;
		margin: 0 auto;
	}
	.sec-recruit_text-container{
		margin-right: 6.94%;
		width: 600px;
	}
	.sec-recruit_text-wrapper{
		width: 56.666%;
		max-width: none;
	}
	.sec-recruit_image{
		width: 55.56%;
		max-width: 1100px;
		height: 450px;
	}
	.sec-recruit_image a{
		display: block;
		width: 100%;
		height: 100%;
	}
	.sec-recruit_text p{
		margin-bottom: 40px;
	}
}

/*お問い合わせ-----------------------------------*/
.sec-contact{
	background: #fff;
	position: relative;
}
.sec-contact_text{
	background-color: #0088cc;
	color: #fff;
	padding: 60px 6.58823529411765%;
}
.sec-contact h2{
	font-size: 2.2rem;
	margin-bottom: 40px;
}
.sec-contact p{
	text-align: left;
	margin-bottom: 30px;
}
.sec-contact_image{
	position: relative;
	height: 200px;
	width: 100%;
	z-index: 0;
	background-image: url(../assets/top_contact2.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media(min-width: 768px){
	.sec-contact-wrapper{
		display: flex;
	}
	.sec-contact_text{
		width: 50%;
		text-align: left;
		padding: 100px 0;
	}
	.sec-contact_text-wrapper{
		width: 60%;
		margin: 0 auto;
	}
	.sec-contact_image{
		width: 50%;
		background-position: 20% center;
		height: auto;
		overflow: auto;
	}
}
@media(min-width: 960px){
	.sec-contact_text{
		width: 50%;
		padding: 7.538vw 0;
		align-items: center;
	}
	.sec-contact_text-wrapper{
		width: 55%;
		margin: 0 auto;
	}
	.sec-contact_text h2{
		font-size: 3.0rem;
		line-height: 1.8;
	}
	.sec-contact_text p{
		margin-bottom: 40px;
	}
	.sec-contact_text .btn{
		margin: 0 auto 0 0;
	}
	.sec-contact_image{
		width: 50%;
		background-position: 23vw 30px;
	}
	@media(max-width: 1130px){
		.sec-contact_text h2 br{
			display: none;
		}
	}
}

/*リード文のアニメーション==========================*/
#sec-top h2 {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
}
#sec-top h2 span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
}
#sec-top h2.-visible,
#sec-top h2.-visible span {
  transform: translate(0, 0);
}

/*ローディングするときの画面==========================*/
#splash {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #212b37;
}
#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*画面遷移アニメーション*/
.splash-bg{
    display: none;
}
body.appear .splash-bg{
	display:block;
	animation-name:PageAnime;
	animation-duration: 0.6s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	content: "";
	position:fixed;
	width: 50%;
	height: 100vh;
	top: 0;
	left: 0;
    transform: translateX(-300%) skewX(-45deg);
    background-color: #212b37;
}
@keyframes PageAnime{
  0% {
    transform-origin:left;
    transform:translateX(-300%) skewX(-45deg);
  }
  100% {
    transform-origin:left;
    transform:translateX(500%) skewX(-45deg);
  }
}
#page-contents{
  opacity: 0;
}
body.appear #page-contents{
  animation-name:PageAnimeAppear;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}
#splash-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 500px;
}
#splash-logo img{
  width: 100%;
}
.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@media(max-width: 959px){
	#splash-logo{
		padding-right: 15px;
		max-width: 340px;
	}
}
@media(min-width: 960px){
	#splash-logo{
		padding-right: 30px;
	}
}
#page-contents{
  opacity: 0;
}
body.appear #page-contents{
  animation-name:PageAnimeAppear;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}
.main, .footer{
	position: relative;
	z-index: 4999;
}