/* common */
.flex{
    display: -webkit-flex;
    display: flex;
        -webkit-box-lines:single;
        -moz-box-lines:single;
        -webkit-flex-wrap:nowrap;
        -moz-flex-wrap:nowrap;
        -ms-flex-wrap:none;
    flex-wrap:nowrap;
}
.flex-multiple{
    display: -webkit-flex;
    display: flex;
        -webkit-box-lines:multiple;
        -moz-box-lines:multiple;
        -webkit-flex-wrap:wrap;
        -moz-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.flex-between{
        -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex-vamiddle{
        -webkit-align-items: center;
    align-items: center;
}

#wrapper-header,
#wrapper-main{
	width: 760px;
	display: block;
	margin: auto;
}



/* ---------- menu ---------- */

#wrapper-header{
	height: 245px;
	display: block;
	background: url(../img/header.png) 0 0 no-repeat;
	background-size: 100%;
}

#wrapper-header:before{
		background: #005800;
		background: -moz-linear-gradient(left, #005800 0%, #005800 15%, #333366 15%, #1a1aa0 100%);
		background: -webkit-linear-gradient(left, #005800 0%,#005800 15%,#333366 15%,#1a1aa0 100%);
	background: linear-gradient(to right, #005800 0%,#005800 15%,#333366 15%,#1a1aa0 100%);Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005800', endColorstr='#1a1aa0',GradientType=1 );
	content: '';
	width: 100%;
	height: 5px;
	display: block;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#wrapper-header ul{
	list-style: none;
}
#wrapper-header ul li a{
	color: #000;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}
#wrapper-header ul li a:hover{
	color: #5e5e85;
}

#block-menu{
	width: 660px;
	height: 50px;
	margin: auto;
	display: block;
	border-bottom: #333366 1px solid;
	position: relative;
}
.inner_block-menu{
	width: 100%;
	font-size: 12px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 14px;
}
.inner_block-menu > *{
	width: 90.28px;
	height: 50px;
	text-align: center;
	display: block;
	transition: all 0.2s ease-in-out;
}

.inner_block-menu a{
	display: block;
	padding: 15px 0;
}

#block-submenu{
	width: 660px;
	margin: auto;
	margin-top: 0;
}
#block-submenu > *{
	width: 100%;
	margin: auto;
	padding: 30px 3% 30px 13%;
	background: rgba(255,255,255,0.9);
	font-size: 14px;
	display: none;
}
#block-submenu ul li{
	width: 27%;
	margin-right: 4%;
	padding: 5px 0;
	display: block;
}
#block-submenu ul li:nth-child(n*3){
	margin-right:0;
}
#block-submenu ul li:nth-child(n+4){
	margin-top: 10px;
}
#block-submenu ul li a{
	width: 100%;
	display: block;
	text-shadow:0px 0px 8px #ffffff;
	padding-left: 25px;
	padding-top: 2px;
	position: relative;
	transition: all 0.2s ease-in-out;
}
#block-submenu ul li a:before{
	content: '';
	width: 15px;
	height: 12px;
	display: block;
	background: url(../img/menu-arrow.png) left center no-repeat;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transition: all 0.2s ease-in-out;
}
#block-submenu ul li a:hover{
	padding-left: 22px;
}
#block-submenu ul li a:hover:before{
	left: 4px;
}

#block-submenu.on-menu-company > #submenu-company{
	display: block
}
#block-submenu.on-menu-tech > #submenu-tech{
	display: block
}
#block-submenu.on-menu-product > #submenu-product{
	display: block
}


.inner_block-menu .hover{
	height: 70px;
	background: linear-gradient(#131326, #333366, #333366);
	z-index: 999;
}
.inner_block-menu .hover a{
	color: #FFF!important;
	padding-top: 25px;
}


/* ---------- content ---------- */
#wrapper-main a{
	text-decoration: underline;
}


/* ----- リード・製品リスト ----- */
#section-product{
	width: 100%;
	background: #efeff5;
	padding: 14px;
}
#section-product #block-lede{
	width: 630px;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	font-size: 14px;
	line-height: 1.8em;
	text-align: center;
}

/* 製品リスト */
#block-product{
	font-size: 13px;
}
#block-product > dl:nth-child(n+5){
	padding-top: 14px;
}
#block-product > dl dt a{
	width: 100%;
	display: block;
	color: #FFF;
	text-decoration: none;
	padding: 4px 12px 3px 12px;
	background: #5e5e85;
		-webkit-box-shadow: 0 3px 4px rgba(0,0,0,0.4);
		-moz-box-shadow: 0 3px 4px rgba(0,0,0,0.4);
	box-shadow: 0 3px 4px rgba(0,0,0,0.4);
	position: relative;
	transition: all 0.2s ease-in-out;
}
#block-product > dl dt a:hover,
#block-product > dl.hover dt a{
	background: #333366;
		-webkit-box-shadow: 0 3px 4px rgba(0,0,0,0);
		-moz-box-shadow: 0 3px 4px rgba(0,0,0,0);
	box-shadow: 0 3px 4px rgba(0,0,0,0);
}
#block-product > dl dt a:after{
	content: '';
	width: 7px;
	height: 7px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 9px;
	margin: auto;
	transition: all 0.2s ease-in-out;
}
#block-product > dl dt a:hover:after,
#block-product > dl.hover dt a:after{
	right: 15px;
}
#block-product > dl dd{
	margin-top: -25px;
}


/* ----- 品質について ----- */
#section-quality{
	width: 630px;
	background: #FFF;
	font-size: 14px;
	line-height: 1.8em;
	margin: 60px auto;
}
#section-quality >.block-text{
	position: relative;
	top: 0;
	bottom: 0;
	margin: auto;
	padding-bottom: 10px;
	padding-left: 25px;
}
#section-quality >.block-text > .item-link{
	text-align: right;
	padding-top: 10px;
}


/* ----- 技術リンク ----- */
#section-tech{
	width: 100%;
}
.block-tech{
	margin: 25px 0 55px;
}
.inner_block-tech{
	width: 33%;
	display: block;
	text-align: center;
}
.inner_block-tech + .inner_block-tech{
	border-left: #395500 1px dashed;
}
.inner_block-tech dd{
	color: #003300;
}
.inner_block-tech dd > p{
	margin-top: 10px;
	font-size: 14px;
}
.inner_block-tech dd > p:first-child{
	font-size: 16px;
}


/* ----- 設備紹介リンク ----- */
#section-facilities,
#section-facilities a{
	width: 100%;
	height: 198px;
	display: block;
}
#section-facilities{
	background: url(../img/top-facilities-off.jpg)0 0 no-repeat;
	background-size: contain;
	transition: all 0.2s ease-in-out;
	position: relative;
}
#section-facilities.hover{
	background: url(../img/top-facilities-on.jpg)0 0 no-repeat;
	background-size: contain;
}
#section-facilities a{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 999;
}
/* 設備紹介テキスト */
.block-txt-facilities{
	height: 37px;
	display: block;
	color: #333366;
	font-size: 24px;
	letter-spacing: 5px;
	text-decoration: none;
	padding-top: 8px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 90px;
	margin: auto;
	transition: all 0.7s ease-in-out;
	z-index: 99;
}
#section-facilities.hover .block-txt-facilities{
	color: #FFF;
}
.block-base-facilities{
	width: 20px;
	height: 198px;
	display: block;
	background: #333366;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transition: all 0.2s ease-in-out;
}
#section-facilities.hover .block-base-facilities{
	content: '';
	width: 303px;
	height: 198px;
}
.block-arrow-facilities{
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 8px;
	margin: auto;
	z-index: 99;
	transition: all 0.2s ease-in-out;
}
.block-arrow-facilities:after{
	content: '';
	width: 10px;
	height: 10px;
	display: block;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* ----- 会社案内リンク ----- */
#section-company{
	width: 400px;
	margin: 50px auto 30px;
}
#section-company ul{
	list-style: none;
	font-size: 16px;
}


/* ----- フッター ----- */
#section-footer{
	width: 100%;
	margin: auto;
}


/* ----- 採用 ----- */
#section-career{
	width: 100%;
}
#section-career .block-lede{
	width: 500px;
	display: block;
	margin: 55px auto;
}
#section-career .block-lede p + p{
	margin-top: 25px;
}



/* ----- リンクボタン ----- */
.block-btn{
	width: 720px;
	margin: 60px auto 30px;
}
.inner_block-btn,
.inner_block-btn a{
	width: 340px;
	height: 100px;
	display: block;
	transition: all 0.2s ease-in-out;
}
.inner_block-btn{
	position: relative;
}
.inner_block-btn a{
	position: absolute;
	z-index: 999;
}

/* ボタンテキスト */
.inner_block-btn .box-txt{
	width: 245px;
	height: 37px;
	display: block;
	color: #333366;
	font-size: 22px;
	letter-spacing: 1.5px;
	text-decoration: none;
	text-align: center;
	padding-top: 8px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transition: all 0.2s ease-in-out;
}
.inner_block-btn.hover .box-txt{
	color: #FFF;
}
.inner_block-btn.btn-tel .box-txt,
.inner_block-btn.btn-mail .box-txt{
	width: 270px;
	height: 55px;
}
.inner_block-btn .box-txt .item-career{
	display: block;
	font-size: 14px;
	text-align: left;
	margin-top: 10px;
	margin-left: 8px;
}
.inner_block-btn.btn-tel .box-txt .item-career{
	padding-left: 50px;
}
.inner_block-btn.btn-mail .box-txt .item-career{
	padding-left: 40px;
}


/* ボタン背景 */
.btn-career{
	background: url(../img/btn-career-off.png) center center no-repeat;
}
.btn-career.hover{
	background: url(../img/btn-career-on.png) center center no-repeat;
}
.btn-calendar{
	background: url(../img/btn-calendar-off.png) center center no-repeat;
}
.btn-calendar.hover{
	background: url(../img/btn-calendar-on.png) center center no-repeat;
}
.btn-tel{
	background: url(../img/btn-tel-off.png) center center no-repeat;
}
.btn-tel.hover{
	background: url(../img/btn-tel-on.png) center center no-repeat;
}
.btn-mail{
	background: url(../img/btn-mail-off.png) center center no-repeat;
}
.btn-mail.hover{
	background: url(../img/btn-mail-on.png) center center no-repeat;
}