@charset "utf-8";

@import "setting";

#index{
	background: none;
}

#index00{
	padding: 240px 0;
	background-image: url("../images/img_index01.jpg");
	
	div{
		width: 50%;
		background-color: rgba($corp,.8);
		color: #fff;
		@include fs(36,1.5);
		padding: 30px;
		font-weight: 500;
		@include pie-clearfix;
		
		p{
			float: right;
			text-align: left;
			display: inline-block;
		}
	}
}

#index01{
	position: relative;
	padding: 100px 0 200px;
	
	&:before{
		content: "";
		display: block;
		width: 40%;
		height: 480px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: $lime;
	}
	
	.txt{
		float: right;
		padding: 70px 50px 0;
		width: 410px;
		
		h3{
			color: $corp;
			margin-bottom: 10px;
		}
		
		h5{
			color: $corp;
			margin-bottom: 40px;
			vertical-align: middle;
			
			&:before{
				content: "";
				display: inline-block;
				margin-right: 10px;
				width: 50px;
				height: 1px;
				background-color: $corp;
				vertical-align: middle;
			}
		}
		
		h4{
			color: $corp;
			margin-bottom: 30px;
		}
		
		p{
			@include fs(15,2);
			
			&.sign{
				margin-top: 30px;
				
				strong{
					display: block;
					font-weight: 500;
					@include fs(20,1.4);
				}
			}
		}
	}
}

#index02{
	padding: 120px 0 180px;
	background: url("../images/img_index03.jpg") center center no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
	
	i{
		display: block;
		margin: 40px auto;
		width: 35px;
		height: 32px;
		background: url("../images/ico_corp.png") center center no-repeat;
		background-size: cover;
	}
	
	h4{
		@include fs(32,1.2);
		margin-bottom: 20px;
	}
	
	p{
		display: inline-block;
		margin: auto;
		text-align: left;
		@include fs(15,2,.2);
		
	}
	
	a{
		display: block;
		width: 440px;
		margin: 60px auto 0;
		
		background-color: $green;
		color: #fff;
		@include fs(14,50px);
		@include transition(all 0.3s ease 0s);
		
		&:after{
			content: "";
			display: inline-block;
			width: 22px;
			height: 16px;
			background: url("../images/ico_linkw.png") center center no-repeat;
			background-size: contain;
			vertical-align: middle;
			margin-left: 20px;
		}
		
		&:hover{
			background-color: #000;
		}
	}
}

#index03{
	text-align: center;
	padding: 100px 0;
	background-color: $lime;
	color: $corp;
	
	h3{
		@include fs(32,1);
		
		&:after{
			content: "";
			display: block;
			width: 50px;
			height: 1px;
			background-color: $corp;
			margin: 20px auto;
		}
	}
	
	h5{
		margin-bottom: 60px;
	}
	
	.clearfix{
		.img{
			float: right;
			position: relative;
			z-index: 1;
			line-height: 0;
		}
		.txt{
			float: right;
			position: relative;
			z-index: 2;
			margin: 40px -60px 0 0;
			width: 650px;
			padding: 60px;
			@include box-sizing;
			background-color: #fff;
			text-align: left;
			
			h4{
				&:after{
					content: "";
					display: block;
					margin: 30px 0;
					width: 50px;
					height: 1px;
					background-color: $corp;
					
				}
			}
			
			p{
				color: #222;
				@include fs(15,2);
				margin-bottom: 30px;
			}
		}
		
		&+.clearfix{
			.img{
				float: left;
			}
			.txt{
				float: left;
				margin: 140px 0 0 -60px;
			}
		}
	}
}

#index04{
	padding: 110px 0 150px;
	background: url("../images/bg_dot.gif") center center repeat;
	
	.container{
		position: relative;
		
		.txt{
			position: relative;
			z-index: 2;
			width: 580px;
			@include box-sizing;
			padding: 80px 60px;
			background-color: #fff;
			top: 40px;
			
			h3{
				color: $corp;
			}
			
			h5{
				color: $corp;
				margin: 10px 0 30px;
				
				&:before{
					content: "";
					display: inline-block;
					width: 50px;
					height: 1px;
					background-color: $corp;
					vertical-align: middle;
					margin-right: 10px;
				}
			}
			
			p{
				@include fs(15,2);
				margin-bottom: 60px;
			}
			
			a{
				display: block;
				width: 220px;
				@include box-sizing;
				padding-left: 40px;
				@include fs(14,50px);
				@include pp;
				background: url("../images/arrow01.png") right 20px top 20px no-repeat $lime;
				background-size: 65px 5px;
				color: #fff;
				@include transition(all 0.3s ease 0s);
				
				&:hover{
					background-color: #000;
				}
			}
		}
		
		.img{
			line-height: 0;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
		}
	}
}

#index05{
	background: url("../images/head_member.jpg") center center no-repeat;
	background-color:rgba(255,255,255,0.6);
	background-blend-mode:lighten;
	background-size: cover;
	color: $corp;
	padding: 140px 0;
	text-align: center;
	
	h3{
		&:after{
			content: "";
			display: block;
			width: 50px;
			height: 1px;
			margin: 20px auto;
			background-color: $corp;
		}
	}
			
	a{
		text-align: left;
		display: block;
		width: 220px;
		@include box-sizing;
		padding-left: 40px;
		@include fs(14,50px);
		@include pp;
		background: url("../images/arrow01.png") right 20px top 20px no-repeat $lime;
		background-size: 65px 5px;
		color: #fff;
		@include transition(all 0.3s ease 0s);
		margin: 100px auto 0;

		&:hover{
			background-color: #000;
		}
	}
}

@media screen and (max-width : $pc-width+px){

}

// tablet
@media screen and (min-width : $tablet-width+px) and (max-width : $pc-width+px) {

}

// smartphone
@media screen and (max-width : $tablet-width+px){
#index00{
	padding: 160px 0;
	background-image: url("../images/img_index01.jpg");
	
	div{
		@include box-sizing;
		width: 100%;
		background-color: rgba($corp,.8);
		color: #fff;
		@include fs(24,1.5);
		padding: 30px;
		font-weight: 500;
		@include pie-clearfix;
		
		p{
			float: right;
			text-align: left;
			display: inline-block;
		}
	}
}

#index01{
	position: relative;
	padding: 100px 0;
	
	&:before{display: none;}
	
	.txt{
		float: none;
		padding: 0;
		width: 100%;
		
		h3{
			color: $corp;
			margin-bottom: 10px;
		}
		
		h5{
			color: $corp;
			margin-bottom: 40px;
			vertical-align: middle;
			
			&:before{
				content: "";
				display: inline-block;
				margin-right: 10px;
				width: 50px;
				height: 1px;
				background-color: $corp;
				vertical-align: middle;
			}
		}
		
		h4{
			color: $corp;
			margin-bottom: 30px;
		}
		
		p{
			@include fs(15,2);
			
			&.sign{
				margin-top: 30px;
				
				strong{
					display: block;
					font-weight: 500;
					@include fs(20,1.4);
				}
			}
		}
	}
	
	.img{
		display: block;
		width: 100%;
		margin-top: 80px;
		
		img{
			width: 100%;
			height: auto;
		}
	}
}

#index02{
	padding: 120px 0 180px;
	background: url("../images/img_index03.jpg") center center no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
	
	i{
		display: block;
		margin: 40px auto;
		width: 35px;
		height: 32px;
		background: url("../images/ico_corp.png") center center no-repeat;
		background-size: cover;
	}
	
	h4{
		@include fs(28,1.2);
		margin-bottom: 40px;
	}
	
	p{
		display: inline-block;
		margin: auto;
		text-align: left;
		@include fs(18,2,.2);
		
	}
	
	a{
		display: block;
		width: 100%;
		margin: 60px auto 0;
		
		background-color: $green;
		color: #fff;
		@include fs(18,60px);
		@include transition(all 0.3s ease 0s);
		
		&:after{
			content: "";
			display: inline-block;
			width: 22px;
			height: 16px;
			background: url("../images/ico_linkw.png") center center no-repeat;
			background-size: contain;
			vertical-align: middle;
			margin-left: 20px;
		}
		
		&:hover{
			background-color: #000;
		}
	}
}

#index03{
	text-align: center;
	padding: 100px 0;
	background-color: $lime;
	color: $corp;
	
	h3{
		@include fs(32,1);
		
		&:after{
			content: "";
			display: block;
			width: 50px;
			height: 1px;
			background-color: $corp;
			margin: 20px auto;
		}
	}
	
	h5{
		margin-bottom: 60px;
	}
	
	.clearfix{
		.img{
			float: none;
			position: relative;
			z-index: 1;
			line-height: 0;
		}
		.txt{
			float: none;
			position: relative;
			z-index: 2;
			margin: -60px 0 0;
			width: 100%;
			padding: 60px;
			@include box-sizing;
			background-color: #fff;
			text-align: left;
			
			h4{
				&:after{
					content: "";
					display: block;
					margin: 30px 0;
					width: 50px;
					height: 1px;
					background-color: $corp;
					
				}
			}
			
			p{
				color: #222;
				@include fs(15,2);
				margin-bottom: 30px;
			}
		}
		
		&+.clearfix{
			margin-top: 120px;
			.img{
				float: none;
			}
			.txt{
				float: none;
				margin: -60px 0 0;
			}
		}
	}
}

#index04{
	padding: 150px 0;
	background: url("../images/bg_dot.gif") center center repeat;
	
	.container{
		position: relative;
		@include box-shadow(0px 0px 3px #000);
		
		.txt{
			position: static;
			z-index: 2;
			width: 100%;
			@include box-sizing;
			padding: 80px 60px;
			background-color: #fff;
			top: 40px;
			
			h3{
				color: $corp;
			}
			
			h5{
				color: $corp;
				margin: 10px 0 30px;
				
				&:before{
					content: "";
					display: inline-block;
					width: 50px;
					height: 1px;
					background-color: $corp;
					vertical-align: middle;
					margin-right: 10px;
				}
			}
			
			p{
				@include fs(15,2);
				margin-bottom: 60px;
			}
			
			a{
				display: block;
				width: 100%;
				@include box-sizing;
				padding-left: 40px;
				@include fs(18,80px);
				@include pp;
				background: url("../images/arrow01.png") right 20px top 35px no-repeat $lime;
				background-size: 65px 5px;
				color: #fff;
				@include transition(all 0.3s ease 0s);
				
				&:hover{
					background-color: #000;
				}
			}
		}
		
		.img{
			line-height: 0;
			position:static;
			top: 0;
			right: 0;
			z-index: 1;
			
			width: 100%;
			
			img{
				width: 100%;
				height: auto;
			}
		}
	}
}

#index05{
	background: url("../images/head_member.jpg") center center no-repeat;
	background-color:rgba(255,255,255,0.6);
	background-blend-mode:lighten;
	background-size: cover;
	color: $corp;
	padding: 140px 0;
	text-align: center;
	
	h3{
		&:after{
			content: "";
			display: block;
			width: 50px;
			height: 1px;
			margin: 20px auto;
			background-color: $corp;
		}
	}
			
	a{
		display: block;
		width: 60%;
		@include box-sizing;
		padding-left: 40px;
		@include fs(18,80px);
		@include pp;
		background: url("../images/arrow01.png") right 20px top 35px no-repeat $lime;
		background-size: 65px 5px;
		color: #fff;
		@include transition(all 0.3s ease 0s);

		&:hover{
			background-color: #000;
		}
	}
}


}