@charset "utf-8";
/* CSS Document */

#site-wrapper{
	background-color:#000000 ;	
}
.main {
	background: #000;
}

.page-top{
	display:none ;
}

.main-monozukuri{}
.main-monozukuri .page_head{
	background-color:#404040 ;
	padding:15px 0 ;
}
	.main-monozukuri .page_head h2{
		width:950px ;
		margin:0 auto ;
		color:#ffffff ;
		font-size:155% ;
		font-size:200% ;
		text-align:left ;
		line-height:1 ;
		font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace ;
	}

.main-monozukuri .sec1{
	width:100% ;
	height:334px ;
	margin:0 auto 20px auto ;
	text-align:center ;
	overflow:hidden ;
}

.main-monozukuri .wrap{
	width:100% ;
	overflow:hidden ;
	margin:0 auto 20px auto ;
}

	.main-monozukuri .wrap .sec2{
		position:relative ;
		width:500px ;
		height:240px ;
		float:left ;
		overflow:hidden ;
	}

	.main-monozukuri .wrap .sec3{
		position:relative ;
		width:500px ;
		height:240px ;
		float:right ;
		overflow:hidden ;
	}

	.main-monozukuri .wrap .sec7{
		position:relative ;
		width:500px ;
		height:333px ;
		float:left ;
		overflow:hidden ;
	}

	.main-monozukuri .wrap .sec8{
		position:relative ;
		width:500px ;
		height:333px ;
		float:right ;
		overflow:hidden ;
	}


.main-monozukuri .target{}
.main-monozukuri .target .over{
	position:absolute ;
	top:0 ;
	left:0 ;
	z-index:10 ;
}

/*  ここから  */
.btn-img {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: #fff
}

	/*  img  */
	.btn-img-cover {
		position: relative;
		z-index: 1;
		width: 100%;
		display: block;
		vertical-align: bottom;
		-webkit-transition: all .3s ease-in;
		transition: all .3s ease-in;
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg)
	}

		/*  hover  */
		.btn-img:hover .btn-img-cover {
			-webkit-transition: all 1.5s ease-out;
			transition: all 1.5s ease-out;
			-webkit-transform: scale(1.05) rotate(0deg);
			-ms-transform: scale(1.05) rotate(0deg);
			transform: scale(1.05) rotate(0deg) ;
		}
	
		.target a:hover img {
			opacity:1;
			filter: alpha(opacity=100);
		}	

	/*  arrow  */
	.btn-img-arrow {
		position: absolute;
		z-index: 2;
		overflow: hidden;
		top: 20px;
		right: 100px;
		width: 45px;
		height: 45px;
		font-size: 32px;
		opacity: .3;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: all .3s ease-in;
		transition: all .3s ease-in;
		border: 2px solid #fff;
		border-radius: .8em;
		-webkit-box-sizing: border-box;
		box-sizing: border-box
	}

	.sec1 .btn-img-arrow{
		top:25px ;
		right:30px ;
	}

	.sec2 .btn-img-arrow ,
	.sec3 .btn-img-arrow ,
	.sec7 .btn-img-arrow ,
	.sec8 .btn-img-arrow {
		top:20px ;
		right:30px ;
	}


/*  hover  */
		.btn-img:hover .btn-img-arrow {
			opacity: 1
		}
		
		.btn-img-arrow .ico-cercle {
			visibility: hidden
		}
		
		.btn-img-arrow .ico-arrow-r {
			position: absolute;
			font-size: 50%;
			top: 50%;
			left: 50%;
			margin: -.5em 0 0 -.45em
		}

			/*  hover  */
			.target:hover .ico-arrow-r {
				-webkit-animation: arrow-slide .4s ease-in-out  ;
				animation: arrow-slide .4s ease-in-out ;
			}
	
@font-face {
	font-family: technology-ico;
	src: url(technology-ico.eot?c=1426389983165);
	src: url(technology-ico.eot?#iefix&c=1426389983165) format("embedded-opentype"),url(technology-ico.woff?c=1426389983165) format("woff"),url(technology-ico.ttf?c=1426389983165) format("truetype"),url(technology-ico.svg#technology-ico&c=1426389983165) format("svg")
}

@-webkit-keyframes arrow-slide {
    0%,99.999% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }

    50% {
        -webkit-transform: translate(10px,0);
        transform: translate(10px,0)
    }

    50.1% {
        -webkit-transform: translate(-15px,0);
        transform: translate(-15px,0);
        opacity: 0
    }
}

@keyframes arrow-slide {
    0%,99.999% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        opacity: 1
    }

    50% {
        -webkit-transform: translate(10px,0);
        transform: translate(10px,0)
    }

    50.1% {
        -webkit-transform: translate(-15px,0);
        transform: translate(-15px,0);
        opacity: 0
    }
}

.ico {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    text-transform: none;
    font-weight: 400;
    font-style: normal;
    font-family: technology-ico;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale ;
		color:#ffffff ;
}

	.ico-arrow-r:before {
		content: "\e004"
	}
	
	.ico-cercle:before {
		content: "\e008"
	}



.main-monozukuri .sec4{
	position:relative ;
	width:470px ;
	margin:0 29px 20px auto ;
	float:right ;
	text-align:right ;
}

.main-monozukuri .sec4 .btn-img-arrow{
	top: 24px;
	right: 205px;
	width: 30px;
	height: 30px;
}
.main-monozukuri .sec5{
	position:relative ;
	width:470px ;
	margin:0 auto 20px 29px ;
	float: left ;
	text-align:right ;
}

.main-monozukuri .sec5 .btn-img-arrow{
	top: 24px;
	right: 165px;
	width: 30px;
	height: 30px;
}

.main-monozukuri img{
	max-width:100% ;
	}

.main-monozukuri .other{
	clear: both ;
	margin: 0 30px 0 0 ;
	padding: 15px 0 ;
	box-sizing:  border-box ;
	text-align: right ;
}

	.main-monozukuri .other a{
		position: relative ;
		color: #ffffff ;
		font-size: 1rem ;
		padding-right: 15px ;
	}

		.main-monozukuri .other a::before{
			position: absolute ;
			content: '' ;
			right: 0;
			top: 5px ;
			width: 10px;
			height: 10px;
			border-top: 2px solid #ffffff;
			border-right: 2px solid #ffffff;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}




@media screen and (max-width: 640px){
	.corporate .main {
		width: 100% !important ;
		height: auto;
	}
	
	.main-monozukuri .page_head h2{
		width:95% ;
	}
	
	.main-monozukuri .sec1{
		width:100%;
		height:auto ;
	}

	.main-monozukuri .wrap .sec2{
		width:100%;
		height:auto ;
		float:none ;
		margin-bottom:20px ;
	}

	.main-monozukuri .wrap .sec3{
		width:100%;
		height:auto ;
		float:none ;
	}

	.main-monozukuri .wrap .sec7{
		width:100%;
		height:auto ;
		float:none ;
		margin-bottom: 20px ;
	}

	.main-monozukuri .wrap .sec8{
		width:100%;
		height:auto ;
		float:none ;
	}

	
	.main-monozukuri .sec4,
	.main-monozukuri .sec5{
		float: none ;
		width:100%;
		text-align:center ;
		margin: 0 auto 10px auto ;
	}

	
	.main-monozukuri .sec4 .btn-img-arrow{
		top: 30%;
		right: 45%;
	}

	.main-monozukuri .sec5 .btn-img-arrow{
		top: 30%;
		right: 35%;
	}
	
}

@media screen and (max-width: 420px){
	.main-monozukuri .sec4 .btn-img-arrow{
		top: 30%;
		right: 45%;
		width:25px ;
		height:25px ;
	}
	.main-monozukuri .sec5 .btn-img-arrow{
		top: 30%;
		right: 35%;
		width:25px ;
		height:25px ;
	}
	

}