@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


html{
	scroll-behavior: smooth;
	}

div,p,li,header,footer{
	box-sizing: border-box;
	}
img{
	border : 0px;
	vertical-align: bottom;
	}

/* リンク */
a:link { color: #01a8ff; text-decoration : none;} 
a:visited { color: #01a8ff; text-decoration : none;} 
a:hover { color: #01a8ff; text-decoration : none;} 
a:active { color: #01a8ff; text-decoration : none;} 
a:focus{ outline:none;}

.ce{
	text-align : center;
	}
.rr{
	text-align : right;
	}
.ll{
	text-align : left;
	}

p{
	margin : 0;
	}

form{
	margin : 0;
	}
input,select,button{
	margin : 0 0 10px 0;
	}
table{
	line-height : 1.8em;
	text-align: left;
	border-collapse: collapse;
	width: 100%;
	}
ul,ol,li,dl,dt,dd,td,tr{
	margin : 0;
	padding : 0;
	list-style: none;
	}


body{
	margin : 0 auto;
	padding : 0;
	font-size : 16px;
	color : #000;
	font-family: 'Noto Sans JP', sans-serif , "Hiragino Kaku Gothic Pro","ヒラギノ角ゴシック Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 2;
	text-align: justify;
	}




#kv{
	position: relative;
	}
#kv #logo{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 9999;
	}


#kv #logo{
	opacity: 0;
	}
#kv #logo {
	animation: catch_anime 1.4s forwards 0.3s;
	}
@keyframes catch_anime {
	0% {
 	   transform: translate(-50%, -20%);
		}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%);
		}
	}



.slide {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
}

.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;
}

.slide-image:nth-child(1) {
  background-image: url(../img/main1.jpg);
  animation-delay: -2s;
}

.slide-image:nth-child(2) {
  background-image: url(../img/main2.jpg);
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url(../img/main3.jpg);
  animation-delay: 14s;
}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
    100% {
  opacity: 0;
  }
}



#service{
	background: url('../img/bg.jpg');
	}

#service .content{
	margin: 0 auto;
	width: 1200px;
	padding: 100px 0 150px 0;
	}
#service .content h2{
	text-align: center;
	font-size: 40px;
	font-weight: 900;
	}
#service .content ul{
	display: flex;
	justify-content: space-between;
	}
#service .content ul li{
	width: 540px;
	overflow: hidden;
	}
#service .content ul li img{
	transition:1s all;
	width: 100%;
    z-index: 1;
	}
#service .content ul li img:hover{
	transform:scale(1.1,1.1);
	transition:1s all;
    z-index: 1;
	}





#company{
	padding: 60px 0 100px 0;
	}
#company .content{
	width: 1200px;
	margin: 0 auto;
	}
#company .content h2{
	text-align: center;
	font-size: 40px;
	font-weight: 900;
	}
#company .content table{
	width: 600px;
	margin: 0 auto;
	}









footer{
	text-align: center;
	font-size: 12px;
	background: #333;
	padding: 5px 0;
	color: #fff;
	}





.scroll-top{
	position: fixed;
	bottom: -20px;
	right: 30px;
	width: 91px;
	height: 171px;
	cursor: pointer;
	display: none;
	}
.scroll-top:hover{
	bottom: 0px;
	transition: 0.2s;
	}



/********************************************************************************************************************************************************************************/
@media screen and (min-width: 950px) {
/********************************************************************************************************************************************************************************/

a[href^="tel:"] { pointer-events: none; color:#000;}



	.sp{
		display : none;
		}









/********************************************************************************************************************************************************************************/
}
@media screen and (max-width: 949px) {
/********************************************************************************************************************************************************************************/


	.pc{
		display : none;
		}

img{
	max-width: 100%;
	}

body{
	font-size : 14px;
	}









.slide {
  height: 600px;
}







#service{
	background-size: contain;
	}

#service .content{
	width: 100%;
	padding: 100px 10px 150px 10px;
	}
#service .content h2{
	font-size: 24px;
	}
#service .content ul{
	display: block;
	padding: 0 20px;
	}
#service .content ul li{
	width: 100%;
	margin: 0 0 30px 0;
	}










#company{
	padding: 60px 30px 100px 30px;
	}
#company .content{
	width: 100%;
	}
#company .content h2{
	font-size: 30px;
	}
#company .content table{
	width: 100%;
	font-size: 12px;
	}












/********************************************************************************************************************************************************************************/
}
/********************************************************************************************************************************************************************************/