@charset "UTF-8";

/*     [ 食材の店紹介 ] 一覧ページPC
-----------------------------------------------*/
.archive .pc{
	display:block;
}
.archive .mb{
	display:none;
}
	@media screen and (max-width: 600px) {
		.archive .pc{
			display:none;
		}
		.archive .mb{
			display:block;
		}
	}
.archive .wrap-inner .page-ttl-cont {
	margin: 50px 0 0;
}
	@media screen and (max-width: 600px) {
		.archive .wrap-inner .page-ttl-cont{
			margin: 20px 0 0;
		}
	}
.archive #main .box{
	display:flex;
	background:url(../img/sales/line.png) no-repeat left bottom;
	background-size:100% 3px;
	padding:35px 0;
}
	@media screen and (max-width: 600px) {
		.archive #main .box{
			padding:20px 0;
		}
	}
	@media screen and (max-width: 350px) {
		.archive #main .box{
			display: block;
		}
	}
.archive #main .box .pic{
	width:240px;
	margin-right:20px;
}
	@media screen and (max-width: 600px) {
		.archive #main .box .pic{
			width:140px;
			order: 2;
			margin-right:0;
			margin-left:10px;
		}
	}
	@media screen and (max-width: 350px) {
		.archive #main .box .pic{
			width: 100%;
			margin:0;
		}
	}
.archive #main .box .pic img{
	width:240px;
	height:auto;
}
	@media screen and (max-width: 600px) {
		.archive #main .box .pic img{
			width:100%;
			height:auto;
		}
	}
.archive #main .box .date{
	font-size:13px;
}
.archive #main .box .txts ul{
	display:flex;
}
@media screen and (max-width: 600px) {
	.archive #main .box .txts{
		width:calc(100% - 150px);
		order: 1;
	}
}
@media screen and (max-width: 350px) {
	.archive #main .box .txts{
		width:100%;
		order: 1;
	}
}
.archive #main .box .txts h1{
	color: #008242;
	font-size: 110%;
}
	@media screen and (max-width: 600px) {
		.archive #main .box .txts h1{
			font-size:15px;
			margin-bottom:10px;
		}
	}
.archive #main .txt-box,
.archive #main .box .more{
	font-size:13px;
	line-height:1.8em;
}
.archive .notfind{
	margin-top:30px;
}
.archive svg .moji{
	fill: #6FB92C;
}
.archive svg:hover .moji{
	fill: #E50012;
}


/*     [ 食材の店紹介 ] PC
-----------------------------------------------*/

.mv-wrap{
	max-width:949px;
	margin:0 auto 10px;
	padding:0 30px;
}
.mv-area{
	width:100%;
	background:url(../img/restaurant/mv-frame.png) no-repeat center top;
	height:0;
	padding-top: 66.8%;
	background-size:contain;
	position:relative;
}
.headline{
	text-indent:-9999px;
	height:0;
}
.mv{
	width:calc(100% - 4.4% - 4.4% );
	position:absolute;
	left:4.4%;
	top:33.71%;/*親要素のmv-areaが100％*/
	z-index:-1;
}
.mv p{
	width:100%;
	height:0;
	padding-top: 43.25%;
	background-size:contain;
	text-indent:-9999px;
	background-repeat:no-repeat;
}
.mv p.pc{
	display:block;
}
.mv p.mb{
	display:none;
}
.post h1{
	font-size:26px;
	line-height:1.4em;
	margin-bottom:10px;
}
.free-area{
	padding-bottom:50px;
	text-align:justify;
}
.btn_area {
	margin: 0 auto 70px;
}
.btn_area a,
.btn_area2 a {
	display: block;
	width: 90%;
	max-width: 380px;
	background-color: #CFD03C;
	color: #008C43;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	border-radius: 50px;
	margin: 0 auto;
	padding: 1rem;
}
.btn_area a:hover,
.btn_area2 a:hover{
	opacity: .7;
	transition: .5s all;
}
.btn_area2 {
	margin: 50px auto 70px;
}
.btn_area2 a {
	background-color: #008C43;
	color: #fff;
}
.shop-data h2{
	background:url(../img/agri/bdr.png) no-repeat left bottom;
	padding-bottom:10px;
	margin-bottom:15px;
}
.shop-data{
	background:url(../img/agri/bdr.png) no-repeat left bottom;
	padding:0 0 15px;
	margin-bottom:100px;
}
.shop-data div p{
	font-size:14px;
	line-height:1.6em;
}
.shop-data div p:nth-child(3){
	margin-bottom:5px;
}
main .post img{
	max-width:100%;
	height:auto;
}


/*      [ PC small ]
-----------------------------------------------*/
@media screen and (max-width: 960px) {
#main {
    width: calc(100% - 3% - 276px);
}
}

/*      [ Tablet large]
-----------------------------------------------*/
@media screen and (max-width: 768px) {
#main{
	width:100%;
	max-width:100%;
}
main .post h1{
	font-size:25px;
}
	
.free-area img{
	width:100%;
}
.headline img{
	width:270px;
	height:auto;
}
}


/*      [ Tablet small]
-----------------------------------------------*/
@media screen and (max-width: 655px) {
}
@media screen and (max-width: 600px) {

.mv-area{
	background:url(../img/restaurant/mv-frame-mb.png) no-repeat center top;
	padding-top: 130.28%;
	background-size:contain;
}
.mv-wrap{
	max-width:370px;
	padding:0 10px;
	margin:15px auto;
}
.mv{
	height:68%;
	width:calc(100% - 14% - 14% );
	position:absolute;
	left:14%;
	top:22.71%;/*親要素のmv-areaが100％*/
	z-index:-1;
}
.mv p.pc{
	display:none;
}
.mv p.mb{
	display:block;
}
.mv p{
	width:100%;
	height:100%;
	padding-top:0;
	background-size:auto 100%;
}
}


/*      [ Smartphone ]
-----------------------------------------------*/
@media screen and (max-width: 480px) {
main .post h1{
	font-size:20px;
}
.mv{
	top:26.71%;/*親要素のmv-areaが100％*/
}/*
.mv-wrap{
	width:300px;
        padding: inherit;
}
.mv-area{
    padding-top: 80%;
    background: url('../img/food_story/frame-mb.png') 0 0 no-repeat;
    background-size: contain;
}*/
.headline{
	display:none;
}
.shop-data{
	margin-bottom:50px;
}
}