@charset "utf-8";
/* 生産者紹介のcss */

/* 共通 */
.img_wrap img {
	width: 100%;
	height: auto;
}
#prolist_inner .table,
#pro_wrap .table { width: 100%; }

/*==============================
	生産者一覧
==============================*/
.prolist_wrap .caption {
    padding-bottom: 2rem;
    border-bottom: 1px solid #ccc;
}	
#prolist_inner ul li a { 
	height: auto;
	font-weight: 500;
}
#prolist_inner ul li a:hover {
	opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: “alpha( opacity=50 )”;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    -ms-transition: all 0.08s linear;
    transition: 0.08s linear;
}
#prolist_inner ul li .txt_wrap p:first-child { 
	border-bottom: 1px dotted #ccc;
	line-height: 2.2rem;
	margin: 8px 0 5px;
}
#prolist_inner ul li .txt_wrap p.t-13 {
	line-height: 2rem;
	margin-top: 6px;
}
#prolist_inner ul li .img_wrap {
	height: 0;
	padding-bottom: 66.58%;
    position: relative;
    width: 100%;
    background: #fff;
	overflow: hidden;
}
#prolist_inner ul li .img_wrap img {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}

/*==============================
	生産者紹介
==============================*/
#pro_wrap a { cursor: pointer; }
#pro_wrap a:hover {
	opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: “alpha( opacity=50 )”;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    -ms-transition: all 0.08s linear;
    transition: 0.08s linear;
}
/* 生産者について */
#pro_wrap #pro-head { margin-bottom: 4rem; }
#pro_wrap #pro-head .img_wrap {
	height: 0;
    padding-bottom: 41.26%;
    position: relative;
    width: 61.837%;
    max-width: 606px;
    background: #fff;
    overflow: hidden;
}
#pro_wrap #pro-head .img_wrap img {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}
#pro_wrap #pro-head .img_wrap .comment {
    background: url(../common/img/bg-ye_opa.png) repeat;
	border: none;
	font-weight: bold;
	-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
	position: absolute;
}
#pro_wrap #pro-head .txt_wrap h2 {
	text-align: left;
	letter-spacing: 0.1rem;
    background: url(../common/img/bg-gr_dot.png);
	padding: 8px 10px;	
	width: 100%;
	line-height: 3rem;
}
#pro_wrap #pro-head .txt_wrap .info th {
	font-weight: 500;
	text-align: right;
    padding-right: 10px;	
	white-space: nowrap;
}
#pro_wrap #pro-head .txt_wrap .info td a { text-decoration: underline; }
#pro_wrap h3 { margin-bottom: 1.5rem; }
#pro_wrap .block { margin-bottom: 5rem; }
#pro_wrap .block .img_wrap {
	width: 28.266%;
	max-width: 277px;
}
#pro_wrap .block .img_wrap a {
	height: 0;
	padding-bottom: 67.26%;
    position: relative;
    width: 100%;
    background: #fff;
	overflow: hidden;
}
#pro_wrap .block .img_wrap a img {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}

/* 商品一覧 */
#pro_wrap .more { text-align: center; }
#pro_wrap .more a {
	display: inline-block;
	width: auto;
    text-align: center;
}
#pro_wrap .more p { color: #1c305c; } 
#pro_wrap .double-arrow {
    position: relative;
    display: inline-block;	
	margin: 1.2rem auto 0;
	width: 14px;
}
#pro_wrap .double-arrow::before,
#pro_wrap .double-arrow::after {
	width: 12px;
    height: 12px;
    border-top: 2px solid #1c305c;
    border-right: 2px solid #1c305c;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
	position: absolute;
    top: inherit;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
#pro_wrap .slide-arrow_b .double-arrow {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
	bottom: 12px;
}
#pro_wrap .double-arrow::before { bottom: 6px; }

/* 他の生産者 */
#pro_wrap .other-link { margin-top: 5rem; }
#pro_wrap .other-link ul { background: #F9F9F7; }
#pro_wrap .other-link .col-6 .col { float: left; }
#pro_wrap .other-link p { line-height: 2.2rem; }
#pro_wrap .other-link .img_wrap {
	height: 0;
	padding-bottom: 66.8%;
    position: relative;
    width: 100%;
    background: #fff;
	overflow: hidden;
}
#pro_wrap .other-link .img_wrap img {
	width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
}

@media screen and (min-width: 1000px) {
	/*==============================
		生産者一覧
	==============================*/
	.prolist_wrap .caption { margin-bottom: 4rem !important; }
	#prolist_inner ul.col-4 .col:nth-child(4n+1) { margin-left: 0; }
	#prolist_inner ul li { margin-bottom: 4rem; }
	
	/*==============================
		生産者紹介
	==============================*/
	/* 生産者について */
	#pro_wrap #pro-head .img_wrap .comment {
		top: 2rem;
		bottom: 2rem;
		left: 2rem;
	}	
	#pro_wrap #pro-head .img_wrap .comment p { margin: 8px; }
	
	/* 商品一覧 */
	#pro_wrap .items-list .col-4 .col:nth-child(4n+1) { margin-left: 0; }	
	#pro_wrap .more { margin: 2rem 0; }
	
	/* 他の生産者 */
	#pro_wrap .other-link .col-6 .col { 
		width: calc(16.666% - 20px);
		margin: 0 10px 2rem;
	}
	#pro_wrap .other-link .img_wrap { margin-bottom: 3px; }
	#pro_wrap .other-link ul { padding: 2rem 1rem 0; }
}

@media screen and (max-width: 999px) {
	/*==============================
		生産者一覧
	==============================*/
	.prolist_wrap .caption { margin-bottom: 2.5rem !important; }	
	#prolist_inner ul li { margin-bottom: 2rem; }
	
	/*==============================
		生産者紹介
	==============================*/	
	/* 生産者について */
	#pro_wrap #pro-head .img_wrap .comment {
		top: 1rem;
		bottom: 1rem;		
		left: 1rem;
	}	
	#pro_wrap #pro-head .img_wrap .comment p { margin: 5px; }
	/* 商品一覧 */
	#pro_wrap .items-list .col-4 .col { 
		width: calc(50% - 5px);
		margin-bottom: 1rem;
	}
	#pro_wrap .more { margin: 0 0 2rem; }
	#pro_wrap .items-list .col-4 .col:nth-child(odd) { margin-left: 0; }
	/* 他の生産者 */
	#pro_wrap .other-link ul { padding: 1rem 0.5rem 0; }
	#pro_wrap .other-link .col-6 .col { margin: 0 5px 1rem; }
}

@media screen and (max-width: 999px) and (min-width: 481px) {
	/*==============================
		生産者一覧
	==============================*/
	/* 商品一覧 */
	#prolist_inner ul.col-4 .col:nth-child(3n+1) { margin-left: 0; }
	#pro_wrap .block .img_wrap { width: 31.5%; }
	
	/*==============================
		生産者紹介
	==============================*/	
	/* 生産者について */
	#pro_wrap #pro-head .img_wrap { padding-bottom: 36.5%; }
	
	/* 他の生産者 */	
	#pro_wrap .other-link .col-6 .col { width: calc(33.333% - 10px); }
}

@media screen and (min-width: 481px) {
	/*==============================
		生産者紹介
	==============================*/	
	/* 生産者について */
	#pro_wrap #pro-head .txt_wrap { padding-left: 20px; }
	#pro_wrap .block .txt_wrap { padding-left: 20px; }
}

@media screen and (max-width: 480px) {
	/*==============================
		生産者一覧
	==============================*/
	#prolist_inner ul.col-4 .col:nth-child(odd) { margin-left: 0; }
	
	/*==============================
		生産者紹介
	==============================*/	
	/* 生産者について */
	#pro_wrap table {
		table-layout: fixed;
		width: 100%;
		word-wrap: break-word;
	}
	#pro_wrap table th { width: 4em; }
	#pro_wrap .table, #pro_wrap .td { 
		display: block;
		width: 100%;
	}
	#pro_wrap .img_wrap { 
		width: 100% !important;
		max-width: none !important;
	}
	#pro_wrap #pro-head .img_wrap { padding-bottom: 66.845%; }
	#pro_wrap #pro-head .img_wrap .comment p {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.8rem;
	}
	#pro_wrap .txt_wrap { margin-top: 1rem; }
	#pro_wrap #pro-head .txt_wrap h2 {
		font-size: 20px;
		font-size: 2rem;
		line-height: 2.6rem;
		margin-bottom: 1rem;
	}
	#pro_wrap .block { margin-bottom: 3rem; }
	/* 他の生産者 */
	#pro_wrap .other-link { margin-top: 3rem; }
	#pro_wrap .other-link .col-6 .col { width: calc(50% - 10px); }
}