@charset "UTF-8";
/* CSS Document */
#anchovy h2,#uzura h2{
	margin-bottom:25px;	
}
h2 img{
    max-width: 140px;
}
#anchovy h2 img,#uzura h2 img{
    max-width: 250px;
}

#anchovy h4,#uzura h4,#other h4{
	text-align:left;
	margin-bottom: 10px;
	font-weight:bold;
}

.mainV{
	max-width:100%;
	margin-bottom:30px;
	position:relative;
}

.catch{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 631px;
	max-height:32px;
    z-index: 70;
    text-align: center;
}

div.picBlock{
	overflow:hidden;
	margin-bottom:30px;
}

div.pic{
	float:left;
	width:35%;
}

div.txt{
	float:right;
	width: 62%;
	margin-left:3%;
}

#anchovy #about{
	background:url(img/bg_anchovy.jpg) no-repeat;
	background-size:cover;
	color:#FFF;
	margin:50px 0;
	text-align:center;
}

#about img{
	display:inline-block;
	}
	
#about p{
	text-align:left;
	width:80%;
	margin:0 auto;
	margin-top:20px;
}

#anchovy #process .ttl{
	width:380px;	
}

#uzura #process .ttl{
	width:300px;
}

#other #process .ttl{
	width:340px;
}

#otherProducts .ttl{
	width:300px;	
}

.productListBlock{
	border:1px solid #e8e8e8;
	text-align:center;
	margin:0 auto;
	position:relative;
	margin-top:50px;
}

#anchovy .productListBlock{
	width:70%;
	max-width:748px;
}
.productListBlock h3{
	text-align: center;
    width: 200px;
    background: #FFF;
    margin: auto;
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
}
.productListBlock img{
	display:inline-block;
}

/*うずら*/
#uzura #about{
	background:url(img/bg_uzura.jpg) no-repeat;
	background-size:cover;
	color:#FFF;
	margin:50px 0;
	text-align:center;
}

#uzura .productListBlock{
	width:100%;
	max-width:1000px;
}
@media print, screen and (max-width:1000px) {
	#uzura .productListBlock{
		width:90%;
	}
}

/*加工食品*/
#other .productListBlock{
	width:100%;
	max-width:500px;
	margin-bottom:50px;
}
@media print, screen and (max-width:1000px) {
	#other .productListBlock{
		width:60%;
	}
}

/* スマホ
-------------------------------------------------- */
@media print, screen and (max-width:570px) {
	#uzura #process .ttl {
    width: 260px;
}
#anchovy #process .ttl {
    width: 300px;
}
#other #process .ttl {
    width: 290px;
}
#otherProducts .ttl {
    width: 250px;
}
	.productListBlock h3 {
		width:100px;
	}
	h2 img{
	    max-width: 130px;
	}
	#anchovy h2 img{
	    max-width: 250px;
	}
	
	#anchovy #about p{
		width:90%;
	}
	
	.productListBlock{
		width:90%;
	}
	
	div.pic{
		float:none;
		width:100%;
		margin-bottom:10px;
	}

	div.txt{
		float:none;
		width:100%;
		margin-right:0;
		margin-left:0;
	}
	
	dl {
		width:100%;
	}
    
    dl dt,
    dl dd {
        padding: 8px 20px;
    }
    
    dl dt {
        float: none;
        background-color: #eff2f6; /* 背景色を指定 */
        border-top:1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
		color:#121212;
    }
    
    dl dd {
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
    }
	
}
/* PC
-------------------------------------------------- */
@media print, screen and (min-width: 571px) {
	
	dl {
        background: #FFF url(img/bg.png) repeat-y -150px 0; /* dlで背景画像をyリピートし、dtの背景色のように見せる。positionはdtの幅に応じて調整 */
    }
    
    dl dt,
    dl dd {
        padding: 10px;
    }
    
   dl dt {
        clear: both;
        float: left;
        width: 110px; /* 幅を指定 */
		background:#eff2f6;
		color:#121212;
    }
    
   dl dd {
        padding-left: 170px; /* dtの分、左にpaddingを取る */
        border-bottom: 1px solid #e8e8e8;
    }
	
	

}


/*商品カテゴリー*/
.productBlock{
	position:relative;
}

.productBlock ul{
	/*overflow:hidden;*/
	width: 614px;
	margin:0 auto;	
}

.productBlock ul:after {
    content: '';
    display: block;
    clear: both;
}

.productBlock ul li{
	float:left;
	width:48%;
	position:relative;
	margin-top:30px;
	border:1px solid #e0e0e0;
	margin-right:3%;
}
.productBlock ul li:last-child{
	margin-right:0;
}

.productBlock ul li h4{
	text-align:center;
	font-size:15px;
    font-weight: bold;
    margin-bottom: 2.5%;
	margin-top: 20px;
	letter-spacing:1px;
}

.productBlock ul li div.txt p{
	line-height: 1.6;
    font-size: 0.8rem;
	padding:5%;
	padding-top:0;
	font-weight:normal;
}

.productBlock div.txt{
	float:none;
	width: 100%;
	margin-left:0;
}

.productBlock ul li:hover{
	transition:0.25s ease-in-out;
	border:#074486 1px solid;
}

#otherProducts .productBlock ul{
	width:33%;
	margin:0 auto;
}

#otherProducts .productBlock ul:after {
    content: '';
    display: block;
    clear: both;
}

#otherProducts .productBlock ul li div.txt {
	width:100%;
}

#otherProducts .productBlock li h4 {
    padding: 0;
}

#otherProducts .productBlock li{
	width: 100%;
	float:left;
	margin-top:0;	
}
#otherProducts .productBlock li h4{
	text-align:center;
	margin-top: 5px;
	margin-bottom:5px;
}
#otherProducts .productBlock li:first-child{
	/*margin-right: 2%;*/
}


figure img {
    height: auto;
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    width: 100%;
    vertical-align: bottom;
}
 
figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
  
a:hover>figure img {
        transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
		-webkit-backface-visibility: hidden
}
 
a:hover>figure figcaption {
    opacity: 1;
}






/**/
@media screen and (max-width: 960px) {
.detailBlockIn {
	width:90%;
}
.productBlock ul {
    /*width: 100%;*/
}
}
@media screen and (max-width: 827px) {
.productBlock ul{
	width:100%;
	margin:0 auto;
}

.productBlock ul li {
	margin-bottom:20px;
}

.listTxt {
	position:static;
	margin: 0 auto;
}

.productBlock ul li{
	width:48%;
}

}

@media screen and (max-width: 715px) {
	
	.productBlock ul li {
    	margin-top: 0px;
		background: #FFF;
	}
	.fukidashi{
		display:none;
	}
}

@media screen and (max-width: 715px) {
	figure {
    float: none;
    width: 100%;
}
.productBlock ul li div.txt {
	text-align:left;
    margin-top: 0;
    float: left;
    width: 52%;
}
.productBlock ul li h4{
	margin-top:0;
	font-size: 0.8rem;
	text-align:left;
	padding: 5% 5% 0 5%;
}

#otherProducts .productBlock ul{
	width:50%;
}

}

@media screen and (max-width: 480px) {
	#categoryList ul li{
		border:1px solid #ccc;
		width:99%;
		overflow:hidden;
	}
	#categoryList ul li .listTxt {
		float:left;
		width:60%;
	}
	
	#categoryList ul li figure{
		width:40%;
		float:left;
	}
	
	#otherProducts .productBlock ul{
		width:100%;
	}
}


#about h3{
	color:#FFF;
}
#category button {
	width:100%;
	margin-top:30px;
	height: 60px;
    font-size: 1.3em;
}