/*
===========================================================================

	Title : quality.css

===========================================================================
*/


/***************************************************************
*
*	PC view
*	
****************************************************************/


/* pc 共通
------------------------------------------------------------ */


#wrap #content {
	margin: 0 auto 30px;
	width:100%;
	text-align: center;
	color: #fff;
	font-size: 14px;
}

#wrap #content .main{
	background: url(../image/pc_bg_main.jpg) repeat-x top center;
	border-top: 1px solid #f2f2f2;
	}

#wrap #content .main ul{
	width: 910px;
	margin: 0 auto;
	padding: 0 0 80px 0;
}

#wrap #content .main ul li{
	display: inline-block;
	margin: 0 10px;
	position: relative;
}


#wrap #content .main ul li.new:after {
    position: absolute;
    content: '';
    width: 47px;
    height: 47px;
    background: url(../image/newIcon.png);
    background-size: cover;
    top: -9px;
    right: -15px;
}

#wrap #content .main ul li a:hover img{
	opacity: 1;
	}

#wrap #content p {
  font-size: 18px;
	line-height: 32px;
	color: #302420;
	}




/* #seal
------------------------------------------------------------ */

#wrap #content #seal{
	background: url(../image/pc_bg_top_seal.png) repeat-x top center;
	padding: 30px 0 0 0 ;
	margin: -30px 0 0 0;
	}

#wrap #content .sealWrap{
	background: url(../image/bg_seal.png);
	}

#wrap #content .sealWrap .inner{
	margin: 0 auto;
	width: 1000px;
	}

#wrap #content .sealWrap .inner h3{
	padding: 50px 0  40px;
	}

#wrap #content .sealWrap .inner ul{
	margin: 0 auto 80px;
	width: 870px;
}

#wrap #content .sealWrap .inner ul li{
	float: left;
}

#wrap #content .sealWrap .inner dl{
	margin: 0 0 80px 0;
}

#wrap #content .sealWrap .inner dl dt{
	margin: 0 auto;
	width: 300px;
}

#wrap #content .sealWrap .inner dl dd{
	margin: 0 auto;
	width: 952px;
}

#wrap #content .sealWrap .inner dl.slHwt dd{
	margin: -30px 0 0 0;
}

#wrap #content .sealWrap .inner dl.slWrd{
	padding: 0 0 60px;
	margin: 0;
}

#wrap #content .sealWrap .inner dl.slWrd dt{
	width: 478px;	
}

#wrap #content .sealWrap .inner dl.slWrd dd{
	margin: 20px 0 0 0;
	padding: 0;
}

#wrap #content .sealWrap .inner .btn{
	margin: 0 auto;
	padding: 0 0 110px;
	width: 460px;
}

#wrap #content .sealWrap .inner .btn a:hover img{
	opacity: 1;
	}




/* #hang
------------------------------------------------------------ */

#wrap #content #hang{
	background: url(../image/pc_bg_top_hang.png) repeat-x top center;
	padding: 25px 0 0 0 ;
	margin: -25px 0 0 0;
	}

#wrap #content .hangWrap{
	background: url(../image/bg_hang.png);
	}

#wrap #content .hangWrap .inner{
	margin: 0 auto;
	width: 1000px;
	}

#wrap #content .hangWrap .inner h3{
	padding: 50px 0  40px;
	}

#wrap #content .hangWrap .inner ul{
	margin: 0 auto 80px;
	width: 920px;
}

#wrap #content .hangWrap .inner ul li{
	float: left;
}

#wrap #content .hangWrap .inner dl{
	margin: 0 0 80px 0;
}

#wrap #content .hangWrap .inner dl dt{
	margin: 0 auto;
	width: 300px;
}

#wrap #content .hangWrap .inner dl dd{
	margin: 0 auto;
	width: 952px;
}

#wrap #content .hangWrap .inner dl.hgFte dd{
	margin: -10px 0 0 0;
}

#wrap #content .hangWrap .inner dl.hgHwt{
	padding: 0;
	}

#wrap #content .hangWrap .inner .btn{
	margin: 0 auto;
	padding: 0 0 110px;
	width: 460px;
}

#wrap #content .hangWrap .inner .btn a:hover img{
	opacity: 1;
	}




/* #brace
------------------------------------------------------------ */

#wrap #content #brace{
	background: url(../image/pc_bg_top_brace.png) repeat-x top center;
	padding: 31px 0 0 0;
	margin: -31px 0 0 0;
	}

#wrap #content .braceWrap{
	background: url(../image/bg_brace.png);
	}

#wrap #content .braceWrap .inner{
	margin: 0 auto;
	width: 1000px;
	}

#wrap #content .braceWrap .inner h3{
	padding: 50px 0 25px;
	}

#wrap #content .braceWrap .inner ul{
	margin: 0 auto 80px;
  width: 718px;
}

#wrap #content .braceWrap .inner ul li{
	float: left;
}

#wrap #content .braceWrap .inner dl{
	margin: 0 0 80px 0;
}

#wrap #content .braceWrap .inner dl dt{
	margin: 0 auto;
	width: 300px;
}

#wrap #content .braceWrap .inner dl dd{
	margin: -50px auto 0;
	width: 952px;
}

#wrap #content .braceWrap .inner dl.hgFte dd{
	margin: -30px auto 0;
}

#wrap #content .braceWrap .inner dl.hgHwt{
	padding: 0;
  padding: 0 0 110px;
	}

#wrap #content .braceWrap .inner .btn{
	margin: 0 auto;
	padding: 0 0 110px;
	width: 460px;
}

#wrap #content .braceWrap .inner .btn a:hover img{
	opacity: 1;
	}




/* #btn
------------------------------------------------------------ */

#wrap #content .btnArea{
	width: 460px;
	margin: 80px auto 0;
}

#wrap #content .btnArea .btn02{
	margin: 20px auto 0;
	}

#wrap #content .btnArea a:hover img,
#wrap #content .btnArea .btn02 a:hover img{
	opacity: 1;
	}








/***************************************************************
*
*	SP view
*	
****************************************************************/


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

#wrap #content .main{
	background: url(../image/sp_bg_main.png) repeat-y;
	background-size: contain;
	margin: -1px 0 0 0;
}

#wrap #content h2{
	margin: 0;
}

#wrap #content h2 img {
	width: 100%;
}

#wrap #content .main ul{
	width: 100%;
	margin: 0 auto;
	padding: 0 0 50px;
}

#wrap #content .main ul li{
	width: 49%;
	display: inline-block;
	margin: 0;
	position: relative;
}

#wrap #content .main ul li:nth-child(3){
	width: 49%;
	float: none;
	margin: 2vw auto 0;
}

#wrap #content .main ul li img{
	width: 100%;
}


#wrap #content .main ul li.new:after {
    position: absolute;
    content: '';
    width: 8.125vw;
    height: 8.125vw;
    background: url(../image/newIcon.png);
    background-size: cover;
    top: -2.8vw;
    right: -2.8vw;
}



/* #seal
------------------------------------------------------------ */

#wrap #content #seal{
	background: url(../image/sp_bg_top_seal.png) no-repeat;
	background-size: contain;
	padding: 5% 0 0 0;
	margin: -5% 0 0 0;
}

#wrap #content .sealWrap .inner{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .sealWrap .inner h3{
	padding: 30px 0  40px;
}

#wrap #content .sealWrap .inner p{
	font-size: 14px;
    line-height: 24px;
}

#wrap #content .sealWrap .inner ul{
	margin: 10% auto 10%;
	width: 100%;
}

#wrap #content .sealWrap .inner ul li{
	margin: 0 0 5% 0;
}

#wrap #content .sealWrap .inner dl{
	margin: 0 0 15% 0;
}

#wrap #content .sealWrap .inner dl dt{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .sealWrap .inner dl dd{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .sealWrap .inner dl.slFte dd{
	margin: 10px 0 0 0;
}

#wrap #content .sealWrap .inner dl.slHwt dd{
	margin: 10px 0 0 0;
}

#wrap #content .sealWrap .inner dl.slWrd{
	padding: 0 0 20% 0;
}

#wrap #content .sealWrap .inner dl.slWrd dt{
	width: 100%;	
}

#wrap #content .sealWrap .inner dl.slWrd dd{
	margin: 20px 0 0 0;
	padding: 0;
}

#wrap #content .sealWrap .inner .btn{
	margin: 0 auto;
	padding: 0 0 80px;
	width: 82%;
}




/* #hang
------------------------------------------------------------ */

#wrap #content #hang{
	background: url(../image/sp_bg_top_hang.png) no-repeat;
	background-size: contain;
	padding: 3.8% 0 0 0;
  margin: -3.8% 0 0 0;
}

#wrap #content .hangWrap .inner{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .hangWrap .inner h3{
	padding: 30px 0  40px;
}

#wrap #content .hangWrap .inner p{
	font-size: 14px;
    line-height: 24px;
}

#wrap #content .hangWrap .inner ul{
	margin: 10% auto 10%;
	width: 100%;
}

#wrap #content .hangWrap .inner ul li{
	margin: 0 0 5% 0;
}

#wrap #content .hangWrap .inner dl{
	margin: 0 0 15% 0;
}

#wrap #content .hangWrap .inner dl dt{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .hangWrap .inner dl dd{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .hangWrap .inner dl.hgFte dd{
	margin: 10px 0 0 0;
}

#wrap #content .hangWrap .inner dl.hgHwt{
	padding: 0;
}

#wrap #content .hangWrap .inner dl.hgHwt dd{
	margin: 10px 0 0 0;
}

#wrap #content .hangWrap .inner .btn{
	margin: 0 auto;
	padding: 0 0 80px;
	width: 82%;
}




/* #brace
------------------------------------------------------------ */

#wrap #content #brace{
	background: url(../image/sp_bg_top_brace.png) no-repeat;
	background-size: contain;
	padding: 4.5% 0 0 0;
  margin: -4.5% 0 0 0;
}

#wrap #content .braceWrap .inner{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .braceWrap .inner h3{
	padding: 30px 0  40px;
}

#wrap #content .braceWrap .inner p{
	font-size: 14px;
    line-height: 24px;
}

#wrap #content .braceWrap .inner ul{
	margin: 13% auto 10%;
	width: 100%;
}

#wrap #content .braceWrap .inner ul li{
	margin: 0 0 5% 0;
}

#wrap #content .braceWrap .inner dl{
	margin: 0 0 15% 0;
}

#wrap #content .braceWrap .inner dl dt{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .braceWrap .inner dl dd{
	margin: 0 auto;
	width: 100%;
}

#wrap #content .braceWrap .inner dl.hgFte dd{
	margin: 10px 0 0 0;
}

#wrap #content .braceWrap .inner dl.hgHwt{
	padding: 0;
  padding: 0 0 80px;
}

#wrap #content .braceWrap .inner dl.hgHwt dd{
	margin: 10px 0 0 0;
}

#wrap #content .braceWrap .inner .btn{
	margin: 0 auto;
	padding: 0 0 80px;
	width: 82%;
}




/* #btn
------------------------------------------------------------ */

#wrap #content .btnArea{
	width: 82%;
	margin: 15% auto;
}

#wrap #content .btnArea .btn02{
	width: 99%;
	margin: 20px auto 0;
	}



















}