@charset "utf-8";


/*全体 コメント*/
* {
	box-sizing: border-box;
}
:root{
	scroll-padding: 120px;
	scroll-behavior: smooth;
}
body {
    margin: 0 ;
	padding: 0 ;
	background-color: #8ec321;
	color: black;
	font-family: Work Sans ;
}


/* font */
p.ja {
    font-family: Noto Sans JP;
	font-size: 16px ;
	font-weight: 400;
	width:50%;
	
}


li.ja {
    font-family: Noto Sans JP;
	font-size: 16px ;
	font-weight: 400;
}


table.ja {
    font-family: Noto Sans JP;
	font-size: 16px ;
	font-weight: 400;
}





/*header */
header{
	background-color: #8ec321;
	padding: 30px 4% 10px;
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	align-items: center;
	height:80px;
	z-index: 10;
}

h1.top-logo{
	font-size:20px ;
	font-weight: bold ;
	margin: 0 ;
	padding:0;
	
}

a.top-logo{
	text-decoration: none;
	color:#000000;
}

ul.top-nav{
	font-size: 16px;
	list-style: none;
	margin: 0;
	display: flex;

}

.pc-nav{
	margin: 0 0 0 auto;
}

.pc-nav a{
	text-decoration: none;
	color:#000000;
}

.pc-nav a:hover{
	color: white ;
}

li.top-nav_li{
	margin: 0 0 0 15px;
	font-size: 14px;

}

/*SPメニュー*/
.sp-nav {
	display: none;
 }


@media screen and (max-width: 640px) {
	.pc-nav {
		display: none;
	 }
	#sp-menu{
		position: relative;
		display: block;
		width: 30px;
		height: 25px;
		margin: 0 0 0 auto;
	}
	#sp-menu span{
		position: absolute;
   		top: 50%;
   		left: 0;
   		display: block;
   		width: 100%;
   		height: 2px;
   		background-color: #000;
   		transform: translateY(-50%);
	}
	#sp-menu::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
	 }
	 #sp-menu::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 70%;
		height: 2px;
		background-color: #000;
	 }
	 .sp-nav {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: block;
		width: 100%;
		background: rgba(0, 0, 0, .8);
		transition: all .2s ease-in-out;
		opacity: 0;
		transform: translateY(-100%);
	 }

	.sp-nav a{
		text-decoration: none;
		color:#ffffff;
	}

	 .sp-nav ul {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		list-style:none;
	 }
	 .sp-nav li {
		margin: 0;
		padding: 0;
	 }
	 .sp-nav li span {
		font-size: 15px;
		color: #fff;
	 }
	 .sp-nav li a, .sp-nav li span {
		display: block;
		padding: 20px 0;
	 }
	 
	 /*基準となるli要素*/
	.sp-nav .close {
	position: relative;
	padding-left: 20px;
 	}
 /*バツ印線1*/
	 .sp-nav .close::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 16px;
		height: 1px;
		background: #fff;
		transform: rotate( 45deg );
 	}
 /*バツ印線2*/
 	.sp-nav .close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 16px;
		height: 1px;
		background: #fff;
		transform: rotate( -45deg );
 	}
	.toggle {
		transform: translateY( 0 );
		opacity: 1;
	}
}

/*レスポンシブmenuここまで*/


/* container*/


.container{
	width: 80% ;
	max-width:1200px;
	margin : 0 auto ;
}


/* section毎 */

section{
	height:80vh;
	min-height:640px;
	border-bottom: 1px solid black;
	
}


h1.menu {
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -5px ;
}

.section-1{
    display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-flow: column;
	height:80%;
	padding:15px;
}

/*top*/
section.top{
	margin-top:80px;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.top-0{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 600px;
	flex-direction: column;
}

img.top-1{
	height:100px;
	width:100px;

}


h1.top-2{
	font-size: 72px;
	font-weight: 600;
	margin-bottom:0;
	margin-top:5%;
	letter-spacing: -5px ;

}
h2.top-3{
	font-family: Noto Sans JP;
	float:left;
}

/*about*/


p.ja {
	width:50%;
}

/* services */



ul.li_services {
	padding:0.5em;
	font-weight: 300;
	list-style-type:none;
	width:50%;
	font-size:20px;
	margin-bottom:20px;

	
}
ul.li_services li {
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
	list-style-type:none;
}
ul.li_services li:before {
	position:absolute;
	content:'';
	top: 0.5em;
	left: 0.2em;
	height:0;
	width:0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #000000;
}


/* halu */

p.ja-halu {
    font-family: Noto Sans JP;
	margin-top:0;
	font-size: 16px ;
	font-weight: 400;
	width:50%;
}

h2.menu-2 {
	position: relative;
	padding: 0.5rem 0.5rem;
	font-family: Noto Sans JP;
	font-size:16px;
	width:50%;
	margin-bottom:0;
  }

h2.menu-2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7px;
	content: '';
	background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
	background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
	background-size: 7px 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }
  a.halu_link{
	text-decoration: none;
	color:#000000;
  }

  a.halu_link:hover{
	text-decoration: none;
	color:#ffffff;
  }
/* mobile */
@media screen and (max-width: 992px) {
	p.ja-halu{
	   width:100%;
	}
	h2.menu-2{
		width:100%;
	}
 }


/*Company info*/

table.ja{
	font-weight: 400;
	border-collapse: collapse;
	width: 50%

}

table.ja th, table.ja td {
		padding: 1em;
		font-size:16px;
		font-weight:400;
}
table.ja th {
		color: #000000;
		font-weight: 300;
		text-align: left;
		width: 30%;
		min-width: 4em;
		position: relative;
}
table.ja th::after {
		content: '';
		background-color: #c1c7c6;
		position: absolute;
		top: 50%;
		left: 100%;
		transform: translateY(-50%);
		width: 1px;
		height: 60%;
}


/*contact us*/

a.btn_01 {
		background-color: #333;
		color: #fff;
		padding: 15px 60px;
		text-decoration: none;
		margin:auto 0 ;
	  }

a.btn_01:hover {
	color: #8ec321;
	background: #fff;
}





/*footer*/
footer{
	height:100px
}


/*モバイル対応*/

@media screen and (max-width: 992px) {

section{
		height:100vh;
		min-height:600px;
	}
h1.menu {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -3px ;
}

	p.ja {
	   width:100%;
	}
 
	ul.li_services {
	   width:100%;
	}

	table.ja {
	   width:100%;
	}
 }