@charset "utf-8";

@media screen and (min-width: 481px) {
	/* pc */
	
	/* imgContainer */
	#imgContainer{
		min-width: 960px;
		min-height: 480px;
		height: 480px;
		position:relative;
	}
	
	/* HACCP追加用 2017.12.08*/
	.containerTxt{
	position: absolute;
	top: 0;
	left: 300px;
	margin-left: -150px;
	}
	
	/* JAS追加用 2024.6.07*/
	.containerTxt2{
	position: absolute;
	top: 0;
	left: 300px;
	margin-left: -190px;
	}
	
	/*
	.containerTxt{
	position: absolute;
	top: 87px;
	left: 371px;
	margin-left: -249px;
	}*/
	
	.container_banner{
	background-color: #ffffff;
	position: absolute;
	top: 285px;
	}
	.container_banner img:hover {
    opacity: 0.6;
	}
	
	/* JAS追加用 2024.6.07*/
	.container_banner2{
	background-color: #ffffff;
	position: absolute;
	top: 0px;
	}
	
	/* チラシデータ入れ次第外す2024.06.07*/
	/*
	.container_banner2 img:hover {
    opacity: 0.6;
	}*/
	
	/* picup */
	#picup{
	}
	
	ul.picupList{	
		position:relative;
		height:230px;
	}
	
	ul.picupList li{
		width:320px;
		list-style:none;
		display:block;
		position:absolute;
		/*float:left;*/
	}
	
	#pickup li span.picupImg{
		width:320px;
		height:180px;
		overflow:hidden;
	}
	
	
	ul.picupList li a{
		text-decoration:none;
	}
	
	ul.picupList li a:hover span.picupTxt{
		background-color:#34638C;
	}
	
	ul.picupList li:nth-child(1){
		top:-50px;
		left:0;		
	}
	
	ul.picupList li:nth-child(2){
		top:-20px;
		left:320px;		
	}
	
	ul.picupList li:nth-child(3){
		top:-50px;
		left:640px;		
	}
	
	ul.picupList li span.picupTxt:before{
		position:absolute;
		top:0px;
		left:80px;
		width:60px;
		height:60px;
		border-left:1px solid #FFF;
		content: ""; 
		display:block;
		
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	ul.picupList li span{
		display:block;
		
	}
	
	.picupTxt{
		background-color:#033E72;
		color:#FFF;
		font-size:18px;
		height:50px;
		line-height:50px;
		text-align:center;
		
	}
	
	#infobox{
		margin-top:10px;
	}
	
	/* news */
	#news{
		line-height: 1;
		width:650px;
		float:left;
		margin-top:40px;
	}
	
	#news h3{
		position:relative;
		width:136px;
		height:136px;
		padding-top:40px;
		background-color:#002040;
		color:#FFF;
		font-size:16px;
		padding-left:20px;
		
	}
	
	#news h3 span{
		font-size:13px;
		display:block;
		padding-top:10px;
	}
	
	#news h3 span:after{
		content: "";
		width:20px;
		height:1px;
		border-bottom:1px solid #FFF;
		position:absolute;
		top:105px;
		left:20px;
	}
	
	#news .newsbox{
		float:left;	
	}
	
	#news ul{
		margin-left:20px;
	}
	
	#news ul li{
		color:#000;
		list-style:none;
		font-size:14px;
		line-height: 2.4;
	}
	
	#news ul li a{
		text-decoration:underline;
		color:#000;
	}
	
	#news ul li a:hover{
		text-decoration:none;
	}
	
	/* onlineShop 2022.06追加*/ 
	#onlineshop{
		width:310px;
		float:left;
		margin-bottom: 20px;
	}
	
	#onlineshop a {
		width: 310px;
		height: 90px;
		background: url("../img/pc_online.png") no-repeat;
		display: block;
		text-indent: -9999px;
	}
	
	#onlineshop a:hover {
		background-position: 0 -90px;
	}
	
	/* download */
	#download{
		width:310px;
		float:left;
	}
	
	#download a {
		width: 310px;
		height: 216px;
		background: url("../img/pc_download_pdf.png") no-repeat;
		display: block;
		text-indent: -9999px;
	}
	
	#download a:hover {
		background-position: 0 -216px;
	}
		
	/* banner */
	#bannerArea{
		min-width: 960px;
		background-color:#C7CDD0;
		padding:15px 0;
		margin-top:50px;
	}
	
	#bannerArea ul li{
		float:left;
		list-style:none;
		width:480px;
		box-sizing: border-box;
	}
	
	#bannerArea li.banner_left{
		text-align:right;
		padding-right:15px;
		
	}
	
	#bannerArea li.banner_right{
		padding-left:15px;
	}
	
}


@media screen and (max-width: 480px) {
	/* sp */

	/* imgContainer */
	#imgContainer{
		width:100%;
		height:180px;
		position:relative;
	}
	
	/* HACCP追加用 2017.12.08*/
	.containerTxt{
		width:80%;	
		position:absolute;
		top:0;
		left:4%;
		margin-left:0;
	}
	
	/* HACCP追加用 2017.12.08*/
	.containerTxt2{
		width:80%;	
		position:absolute;
		top:0;
		left:15%;
		margin-left:0;
	}
	
	/*
	.containerTxt{
		width:60%;	
		position:absolute;
		top:32%;
		left:50%;
		margin-left:-30%;
	}*/
	
	.container_banner{
	width:115%;	
	position:absolute;
	top:137px;
	margin-left:0;
	}
	
	/* HACCP追加用 2017.12.08*/
	.container_banner2{
	width:18%;	
	position:absolute;
	top:0px;
	margin-left:0;
	}
	
	/* picup */
	#pickup{
		width:100%;
		margin-top:17px;
		padding:0 3%;
	}
	
	#pickup h3{
		font-size:14px;
		padding:15px 0 15px 15px;
		background-color:#002040;
		color:#FFF;
		line-height:1;
	}
	
	#pickup h3 span{
		font-size:10px;
		padding-left:10px;
	}
	
	#pickup ul{
		list-style:none;	
	}
	
	#pickup li{
		position:relative;
		margin-top:1px;
		
	}
	
	#pickup li a{
		color:#002040;
		text-decoration:none;
		width:100%;
	}
	
	#pickup li span.picupTxt{
		font-size:15px;
		font-weight:bold;
		line-height:1;
		overflow:hidden;
		background-color:#E3E3EC;
		
		padding-left:150px;
		width:100%;
		height:68px;
		line-height:68px;
		
		display:inline-block;
	}
	
	#pickup li span.picupTxt:before {
		font-size:20px;
		font-weight:bold;
		position:absolute;
		top:0;
		right:10px;
		content:"\f105";
		font-family: FontAwesome;
	}
	
	#pickup li span.picupImg{
		position:absolute;
		width:120px;
		height:68px;
		top:0;
		left:0;
		
	}
	
	/* spOnlineShop */
	
	#spOnline{
		width:100%;
		line-height:0;
		padding:0 3%;
		margin-top:10px;
		margin-bottom:5px;
		
	}
	
	#spOnline p{
	}
	
	/* spDownload */
	
	#spDownload{
		width:100%;
		line-height:0;
		padding:0 3%;
		margin-top:10px;
		margin-bottom:5px;
		
	}
	
	#spDownload p{
	}
	
	/* news */
	#news{
		display:block;
	}
	
	#infobox{
		width:100%;
		margin-top:5px;
		padding:0 3%;
	}
	
	#infobox h3{
		font-size:14px;
		padding:15px 0 15px 15px;
		background-color:#002040;
		color:#FFF;
		line-height:1;
	}
	
	#infobox h3 span{
		font-size:10px;
		padding-left:10px;
	}
	
	.newsbox{
		
		background-color:#F3F3EF;
	}
	.newsbox ul{
		list-style:none;
		padding:15px 10px;
	}
	
	.newsbox li{
		font-size:13px;
		line-height:1.6;
		position:relative;
		padding-left:7em;
		margin-bottom:15px;
	}
	
	.newsbox li a{
		color:#000;
		
	}
	
	.newsbox li span{
		position:absolute;
		display:block;
		width:11em;
		top:0;
		left:0;
	}
	
	/* banner */
	#bannerArea{
		background-color:#C7CDD0;
		padding:15px 0;
		margin-top:30px;
	}
	
	#bannerArea ul{
		width:100%;
		padding:0 10%;
	}
	
	#bannerArea ul li{
		list-style:none;
	}
	
	#bannerArea li.banner_left{
		margin-bottom:10px;
	}
	
	#bannerArea li.banner_right{
	}

}