@charset "utf-8";

/* main */
#main{
	position: relative;
	margin: 0 auto;
	padding: 0;
	background-image: url("../img/index/bg_header01.png"), url("../img/index/bg_heder.png");
	background-size: auto 100%, cover;
	background-position: -40px 50%, 50% 50%;
	background-repeat: no-repeat, no-repeat;
}
#main .mainLead{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 20px 0;
	width: 100%;
}
#main .mainLead .logo{
	position: relative;
	margin:  0 auto 30px auto;
	width: 40%;
	max-width: 120px;
}
#main .mainLead .ttl{
	position: relative;
	text-align: center;
	font-size: .14rem;
	line-height: 1.7em;
}
#main .mainLead .mainNav{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
}
#main .mainLead .mainNav li{margin:  5px;border: solid 1px #ffffff;}
#main .mainWrap{
	position: relative;
	margin: 0 auto;
}

/* productlist */
#productlist{
	position: relative;
	padding: 20px 0 40px 0;
}
#productlist ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 960px;
	gap: 40px 10px;
}
#productlist ul li{
	position: relative;
	margin: 0;
	width: calc(33.333% - 7px);
	max-width: 240px;
	text-align: center;
	font-size: 80%;
}
#productlist ul li a{
	position: relative;
	margin: 0 auto;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
#productlist ul li img{
	position: relative;
	margin: 0 auto;
	display: block;
}
#productlist .banner{
	position: relative;
	margin: 0 auto 40px auto;
	width: calc(100% - 30px);
	max-width: 960px;
}
#productlist .banner ul{
	position: relative;
	margin: 0 auto;
	width: 100%;
	gap: 5px;
}
#productlist .banner ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 3px);
}
#productlist .banner ul li a{border-radius: 0;}
#productlist .lead{
	position: relative;
	margin: 20px auto 0 auto;
}

/* news */
#news{
	position: relative;
	margin:  0 auto;
	padding:40px 0;
	background-color: #f7f8f8;
}
#news .newsList{
	position: relative;
	margin: 30px auto 0 auto;
	width: calc(100% - 30px);
}
#news .newsList ul{position: relative;}
#news .newsList ul li{
	position: relative;
	margin: 0 auto 10px auto;
	padding-bottom: 5px;
	border-bottom: solid 1px #cad0d0;
}
#news .newsList ul li .date{
	position: relative;
	margin: 0;
	font-size: 80%;
	width: 6em;
}
#news .newsList ul li .txt{
	position: relative;
	margin: 0;
	width: calc(100% - 6em);
}
#news .caution{
	position: relative;
	margin: 15px auto;
	font-size: .14rem;
	color: #010101;
}
#news .topicsList{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
	text-align: right;
}
#news .topicsList a{color: #009D9E;}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* main */
	#main{background-position: 0 50%, 50% 50%;}
	#main .mainLead{padding: 80px 0 60px 0;}
	#main .mainLead .logo{
		margin:  0 auto 40px auto;
		max-width: 180px;
	}
	#main .mainLead .ttl{
		font-size: .16rem;
		line-height: 1.8em;
	}
	#main .mainLead .mainNav{margin: 30px auto 0 auto;}


	/* productlist */
	#productlist{padding: 40px 0 90px 0;}
	#productlist ul{gap: 0 20px;}
	#productlist ul li{
		width: calc(33.333% - 10px);
		max-width: 250px;
		font-size: 100%;
	}
	#productlist ul li a img:hover{transform: scale(1.05, 1.05);transition: all .3s ease-out;}
	#productlist .banner{margin: 0 auto 60px auto;}
	#productlist .banner ul{gap: 10px;justify-content: center;}
	#productlist .banner ul li{width: calc(33.333% - 8px);}
	#productlist .lead{
		margin: 30px auto 20px auto;
		text-align: center;
	}
	
	/* news */
	#news{padding:50px 0 80px 0;}
	#news .newsWrap{max-width: 960px;}
	#news .newsList{
		margin: 0 auto;
		max-width: 960px;
		width: calc(100% - 30px);
	}
	#news .newsList ul li{margin: 0 auto 15px auto;}
	
}