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

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

.page-top{
	display:none ;
}

.page-top2{
	margin-top: 20px ;
	text-align: right ;
}
.main-monozukuri{
	min-height: 500px ;
}

.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 ;
	}


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

/*	Footprint
------------------------------------------------------*/
.footprint{
	background: #000000 ;
	padding: 12px 0 ;
}

	.footprint p{
		width: 950px ;
		margin: 0 auto ;
		color: #a6a6a6 ;
		font-size: 0.65rem ;
	}

		.footprint p a{
			color: #a6a6a6 ;
		}

		.footprint p span{
			color: #ffffff ;
		}

@media screen and (max-width: 640px){
	.footprint p{
		width: 95% ;
	}
}

/*	Item
------------------------------------------------------*/
.item{
	width: 100% ;
	margin: 0 auto 15px;
	background: #212121 ;
	color: #ffffff ;
	display: table ;
}

	.item a{
		text-decoration: none ;
	}

.item .info{
		display: table-cell ;
		padding: 30px 0 30px 35px ;
		box-sizing: border-box ;
		vertical-align: top ;
		position: relative ;
	}

		.item .info .title{
			font-size: 1.3rem ;
			font-weight: bold ;
			margin: 0 0 20px 0 ;
			line-height: 1.6 ;
		}

			.item .info .title span{
				font-size: 1.1rem ;
}

		.item .info .note{
			font-size: 0.9rem ;
			line-height: 2.2 ;
			margin: 0 0 20px 0 ;
		}

		.item .info .sub{
			font-size: 0.9rem ;
			color: #b2b2b2 ;
			margin-bottom: 25px ;
		}

		.item .info ul{
			width: 100% ;
			margin: 0 auto ;
		}

			.item .info ul li{
				font-size: 0.9rem ;
				list-style: none ;
				margin: 0 auto 10px auto ;
				text-align: left ;
			}

				.item .info ul li a{
					color: #b2b2b2 ;
				}

				.item .info ul li a:hover{
					color: #ffffff ;
				}


		/*  arrow  */
		.btn-img-arrow {
			position: absolute;
			z-index: 2;
			overflow: hidden;
			bottom:40px ;
			right:50px ;
			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
		}

		.btn-img-arrow .ico-cercle {
			visibility: hidden
		}

		.btn-img-arrow .ico-arrow-r {
			width: 24px ;
			height: 22px ;
			position: absolute;
			font-size: 50%;
			top: 49% ;
			left: 40%;
			margin: -.5em 0 0 -.45em ;
		}

			/*  hover  */
			.btn-img-arrow.hover{
				opacity: .9;
			}
			.btn-img-arrow.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(../../index/css/technology-ico.eot?c=1426389983165);
	src: url(../../index/css/technology-ico.eot?#iefix&c=1426389983165) format("embedded-opentype"),url(../../index/css/technology-ico.woff?c=1426389983165) format("woff"),url(../../index/css/technology-ico.ttf?c=1426389983165) format("truetype"),url(../../index/css/technology-ico.svg#technology-ico&c=1426389983165) format("svg")
}

.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"
	}

@-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
    }
}

	.item .photo{
		width: 370px ;
		display: table-cell ;
		text-align:center ;
		vertical-align: middle ;
	}

@media screen and (max-width: 640px){
	.item .info{
			display:block ;
			padding: 15px 10px ;
		}

			.item .info .title{
				font-size: 1.3rem ;
				margin: 0 0 20px 0 ;
			}

			.item .info .note{
				font-size: 0.9rem ;
				margin: 0 0 20px 0 ;
			}

			.item .info .sub{
				font-size: 0.9rem ;
			}

			.item .info ul{
				margin-bottom: 50px ;
			}

			.item .info .btn{
				position: absolute ;
				right: 10px ;
				bottom:10px ;
			}

		.item .photo{
			padding: 10px ;
			width: 100% ;
			display:block;
			box-sizing:border-box ;
		}

			.item .photo img{
				max-width: 100% ;
			}

	.items .btn-img-arrow{
		bottom:0 ;
		right:45% ;
		opacity: 1 ;
	}
}



/*	Page
------------------------------------------------------*/
.page{
	background-color: #ffffff ;
	display: table ;
	width: 100% ;
	margin-bottom: 20px ;
}

	.page .side{
		background-color: #f2f2f2 ;
		display:table-cell;
		width: 285px ;
		padding: 40px 15px ;
		box-sizing: border-box ;
	}

		.page .side ul{
			margin: 0 auto 50px auto ;
		}

			.page .side ul li{
				list-style: none ;
				margin: 0 auto 15px auto ;
				text-align: left ;
				color: #999999 ;
				font-weight: bold ;
				line-height: 1.5 ;
				font-size: 0.8rem ;
			}

				.page .side ul li a{
					color: #000000 ;
				}

		.page .side .info,
		.page .main .info{
			margin: 0 auto ;
		}

			.page .side .info .name_wrap,
			.page .main .info .name_wrap{
				display: table ;
				width: 100% ;
				margin: 0 auto 10px auto ;
			}

				.page .side .info .name_wrap .img,
				.page .main .info .name_wrap .img{
					width: 85px ;
					display: table-cell ;
				}

				.page .side .info .name_wrap .name,
				.page .main .info .name_wrap .name{
					display: table-cell ;
					vertical-align: middle ;
					font-size: 1rem ;
				}

					.page .side .info .name_wrap .name span,
					.page .main .info .name_wrap .name span{
						display: block ;
						font-size:0.7rem ;
						margin-top: 5px ;
					}

			.page .side .info .comment,
			.page .main .info .comment{
				font-size: 0.7rem ;
				line-height: 1.5 ;
			}


	.page .main{
		display:table-cell;
		padding: 40px 40px ;
		box-sizing: border-box ;
		background-color: #ffffff ;
		word-break: break-all ;
	}

		.page .main h3{
			text-align: left ;
			font-size: 1.4rem ;
			color: #666666 ;
			margin: 0 auto 40px auto ;
		}

		.page .main .body{
			font-size: 0.9rem ;
			line-height: 1.5 ;
			overflow: hidden ;
			text-align: left ;
			word-break: normal ;
		}

			.page .main .body .photo{
				margin: 0 auto 15px auto ;
			}

				.page .main .body .photo p{
					text-align: center ;
					margin-bottom: 15px ;
				}

					.page .main .body .photo p img{
						width: 100% ;
						height: auto ;
					}

					.page .main .body .photo p.small img{
						max-width: 466px;
					}

				.page .main .body .photo div{
					line-height: 1.6 ;
				}

			/*
			.page .main .body .photo{
				display: table ;
				margin: 0 auto 15px auto ;
			}

				.page .main .body .photo p{
					display: table-cell ;
					vertical-align: top ;
					width: 55% ;
				}

					.page .main .body .photo p img{
						max-width: 390px ;
						width: 100% ;
						height: auto ;
					}
					
				.page .main .body .photo div{
					display: table-cell ;
					vertical-align: bottom ;
					box-sizing: border-box ;
					padding: 0 0 0 15px ;
				}
		*/

		.page .main .info{
			display: none ;
		}

		.page .main .img img{
			width: 100% ;
		}

@media screen and (max-width: 640px){
	.page{
		display:block ;
	}

		.page .side{
			display:block;
			width: 100% ;
			padding: 15px 15px ;
		}
		.page .side .info{
			display: none ;
	}

		.page .main{
			display:block;
			width: 100% ;
			padding: 15px 15px ;
		}

			.page .main .body{
				margin-bottom: 20px ;
			}
	
				.page .main .body .photo p img{
					max-width: 100% ;
				}

			.page .main .body .photo{
				display: block ;
			}

				.page .main .body .photo p{
					display: block;
					width: 100% ;
				}

				.page .main .body .photo div{
					display: block;
					width: 100% ;
					padding: 0 ;
				}

	.page .main .info{
			display: block ;
	}
}