.roast { width: 640px; }

.roast .catch {
	margin: 0 15px 35px;
	overflow: hidden;
}

.roast .catch .image {
	float: right;
	margin: 50px 0 0 15px;
}

.roast .catch .image img { width: 100%; }

.roast .catch .image img.forCol3 { display: none; }

.roast .catch .texts { overflow: auto; }

.roast .catch .texts h3 {
	margin-bottom: 22px;
	font-size: 17px;
}

.roast .catch .texts h4 {
	margin-bottom: 13px;
	color: #a7958e;
	font-size: 13px;
	font-weight: bold;
}

.roast .series {
	overflow: hidden;
	margin: 0 14px 2em;
}

.roast .series li {
	float: left;
	font-size: 10px;
	width: 33.33%;
}

.roast .series li span.blonde,
.roast .series li span.medium,
.roast .series li span.dark {
	display: block;
	margin: 0 1px;
}

.roast .series li span.blonde { background: #C69314; }

.roast .series li span.medium { background: #924C2E; }

.roast .series li span.dark { background: #6C1D45; }

.roast .series li span.blonde img,
.roast .series li span.medium img,
.roast .series li span.dark img {
	max-width: 100%;
	height: auto;
}

.roast .series li p {
	margin-bottom: 0;
	padding: 7px 0 0 7px;
	font-size: 10px;
}

.roast .graph { margin: 0 15px 2em; }

.roast .graph img {
	max-width: 100%;
	height: auto;
}

.roast .products {
	overflow: hidden;
	margin: 0 10px;
}

.roast .products li { float: left; }

.roast .products li p {
	font-size: 10px;
	line-height: 1.5;
}

.roast .products li .eachProduct li { margin-bottom: 20px; }

.roast .products li .eachProduct a {
	display: block;
	overflow: hidden;
}

.roast .products li .eachProduct .thumb {
	float: left;
	text-align: right;
}

.roast .products li .eachProduct .texts {
	padding-right: 10px;
	margin-right: 10px;
	background: url("/common/images/img-arrow3.png?0b3cb0d94f") right 1px no-repeat;
	box-sizing: border-box;
	overflow: hidden;
}

.roast .products li .eachProduct .heading-en {
	margin-bottom: 0;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.36;
}

.roast .products li .eachProduct .heading-en span { font-size: 9px; }

.roast .products li .eachProduct .heading-ja {
	margin-bottom: 10px;
	font-weight: bold;
}

.roast .products li .eachProduct .description { margin-bottom: 0; }

.roast .products li.blonde,
.roast .products li.medium,
.roast .products li.dark { width: 33.33%; }

@media all and (min-width: 1230px) {
.roast,
.static article .mainContent.roast .contents { width: 960px; }

.roast .products {
	width: 940px;
	margin: 0 10px;
}

.roast .series { margin-right: 13px; }

.roast .series li span.blonde,
.roast .series li span.medium,
.roast .series li span.dark {
	padding: 10px;
	margin: 0 2px 0 1px;
}

.roast .catch .image { margin-left: 65px; }

.roast .catch .image img.forNotSp { display: none; }

.roast .catch .image img.forCol3 { display: block; }

.roast .series li p { padding-left: 30px; }

}

@media all and (max-width: 909px) {
	.roast { width: auto; }

	.roast .contents {
		width: auto;
		margin: 0 auto;
	}

	.roast .contents .graph, .roast .contents .products { margin-left: 0; }
	
	.roast .contents .series { margin: 0 -1px 28px; }
}

@media all and (max-width: 599px) {
	.roast .contents { margin: 0; }

	.roast .catch { margin: 0; }

	.roast .catch .image {
		float: none;
		margin: 0 0 15px;
	}

	.roast .catch .texts { margin: 0 15px; }

	.roast .catch .texts h3 {
		margin-bottom: 12px;
		font-size: 14px;
	}

	.roast .catch .texts h4 {
		margin-bottom: 12px;
		font-size: 12px;
	}

	.roast .catch .texts p { margin-bottom: 35px; }

	.roast .navSeries .series {
		width: 100%;
		margin: 0 0 40px;
	}

	.roast .navSeries .series li {
		margin: 0;
		float: none;
		font-size: 10px;
		width: auto;
	}

	.roast .navSeries .series li a {
		display: block;
		color: #fff;
	}

	.roast .navSeries .series li p {
		margin: 0;
		padding: 10px 0 10px 13px;
		font-size: 12px;
		font-weight: bold;
		background: url("/coffee/images/bg-arrow-series.png?be1e7454ab") right 15px no-repeat;
		-webkit-background-size: 26px 6px;
		-moz-background-size: 26px 6px;
		-o-background-size: 26px 6px;
		background-size: 26px 6px;
	}

	.roast .navSeries .series li p span { font-weight: normal; }

	.roast .navSeries .series li.blonde { background-color: #c69214; }

	.roast .navSeries .series li.medium { background-color: #924c2e; }

	.roast .navSeries .series li.dark { background-color: #6c1d45; }

	.roast .products {
		width: 100%;
		margin: 0;
	}

	.roast .products li { float: none; }

	.roast .products li p {
		font-size: 12px;
		line-height: 1.5;
	}

	.roast .products li .heading {
		padding: 10px 12px;
		margin-bottom: 0;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
	}

	.roast .products li .heading span { font-size: 12px; }

	.roast .products li .eachProduct li {
		margin: 0 15px;
		border-bottom: 1px solid #dbdbdb;
	}

	.roast .products li .eachProduct li:last-child { border-bottom: none; }

	.roast .products li .eachProduct a {
		display: block;
		padding-top: 20px;
		overflow: hidden;
	}

	.roast .products li .eachProduct .thumb {
		float: left;
		text-align: right;
	}

	.roast .products li .eachProduct .texts {
		float: left;
		padding-right: 13px;
		overflow: auto;
		background: url("/common/images/bg-arrow3-sp.png?90331b6bda") right top no-repeat;
		-webkit-background-size: 6px 11px;
		-moz-background-size: 6px 11px;
		-o-background-size: 6px 11px;
		background-size: 6px 11px;
		box-sizing: border-box;
	}

	.roast .products li .eachProduct .heading-en { font-size: 12px; }

	.roast .products li .eachProduct .heading-en span { font-size: 9px; }

	.roast .products li .eachProduct .heading-ja {
		margin-bottom: 10px;
		font-weight: bold;
	}

	.roast .products li .eachProduct .description { margin-bottom: 16px; }

	.roast .products li.blonde, .roast .products li.medium, .roast .products li.dark { width: 100%; }

	.roast .products li.blonde .thumb, .roast .products li.medium .thumb, .roast .products li.dark .thumb { width: 34.5%; }

	.roast .products li.blonde .thumb img, .roast .products li.medium .thumb img, .roast .products li.dark .thumb img { width: 100%; height: auto; }

	.roast .products li.blonde .texts, .roast .products li.medium .texts, .roast .products li.dark .texts {
		width: 65.5%;
		float: left;
		margin-right: 0;
	}

	.roast .products li.blonde .heading { background-color: #c69214; }

	.roast .products li.medium .heading { background-color: #924c2e; }

	.roast .products li.dark .heading { background-color: #6c1d45; }

	.roast .products li.dark .eachProduct { margin-bottom: 60px; }

	.roast .products li.dark .eachProduct li:last-child { border-bottom: 1px solid #dbdbdb; }
}

.roast .meetBnr{
	padding: 29px 20px 29px 29px;
	color: #3d3935;
	display: flex;
	align-items: center;
	margin-top: 40px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
		background: url("/static/coffee/images/texture_pc.jpg") no-repeat;
 	background-size: 100% 100%;
}
.roast  .meetBnr ._img{
	width: 285px;
}
.roast .meetBnr ._img img{
	width: 100%;
}
.roast .meetBnr ._data{
	padding-left: 40px;
	flex: 1;
}
.roast .meetBnr ._ttl{
	font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  margin-bottom: 11px;
  color: #461d11;
}
.roast .meetBnr ._des{
	font-size: 12px;
	margin-bottom: 20px;
}
.roast .meetBnr ._btn{
	width: 166px;
}
.meetBnr ._btn a{
	display: block;
  background: #461d11;
  font-size: 14px;
  line-height: 2;
  padding: 1px 0px;
  font-weight: bold;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}

@media all and (min-width: 1230px) {
 .roast .meetBnr{
 	width: 931px;
 }	
}
@media all and (max-width: 599px) {
	/* banner */
	.roast .meetBnr{
		background: url("/static/coffee/images/texture_sp.jpg") no-repeat;
		margin: 0 15px;
		display: block;
		color: #5f4e44;
		margin-bottom: 0px;
		padding: calc(60/750*100vw) calc(29/750*100vw);
		width: calc(100% - 30px);
		margin: auto;
		margin-top: 0px;
		box-sizing: border-box;
	}
	.roast .meetBnr ._img{
		margin-bottom: calc(50/750*100vw);
		width: 100%; 
	}
	.roast .meetBnr ._img img{
		width: 100%;
	}
	.roast .meetBnr ._data{
		  padding-left:  calc(25/750*100vw) ;
	    padding-right:  calc(23/750*100vw) ;
	}
	.roast .meetBnr ._ttl{
		font-size: calc(32/750*100vw);
	  line-height: calc(48/750*100vw);
	  font-weight: bold;
	  text-align: center;
	  margin-bottom: calc(42/750*100vw) ;
	  color: #461d11;
	}
	.roast .meetBnr ._des{
		color: #3d3935;
		font-size: calc(24/750*100vw);
	  line-height: calc(40/750*100vw);
		width: calc(553/750*100vw);
	  margin: 0px auto calc(35/750*100vw);
	}
	.roast .meetBnr ._btn{
		width: 100%;
	}
	.roast .meetBnr ._btn a{
		display: block;
	  background: #461d11;
	  font-size: calc(28/750*100vw);
	  line-height: calc(48/750*100vw);
	  padding: calc(16/750*100vw) 0px;
	  color: #fff;
	  border-radius: 5px;
	  text-decoration: none;
	  text-align: center;
	}
}
/*# sourceMappingURL=style.css.map */