@charset "utf-8";

/*----------------------------------------------------------------------------
カスピ海ヨーグルトコーヒー
----------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 979px) {
/* タブレット端末表示 */
 picture img {
  width: 100%;
 }
}
@media only screen and (max-width: 767px) {
		.sp-hidden {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
		.pc-hidden {
		display: none;
	}
}
/*ページ上部画像----------------------------------------------------*/
@media only screen and (min-width: 768px) {
/* （768～）のとき */
	.m-lowermainimg-product {
		/*height: 570px;*/
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eee9ea+0,d0c3c1+100 */
background: #eee9ea; /* Old browsers */
background: -moz-linear-gradient(left, #eee9ea 0%, #d0c3c1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #eee9ea 0%,#d0c3c1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #eee9ea 0%,#d0c3c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee9ea', endColorstr='#d0c3c1',GradientType=1 ); /* IE6-9 */
	}
}

.l-column02-product {
	text-align: center;
}

.main_coffee img{
	width: 100%;
}
/*ページ上部画像----------------------------------------------------*/

/*coffeestyle-----------------------*/
.coffeestyle {
	background-color: #f02424;
}
.coffeestyle_inner {
	position: relative;
}
.coffeestyle_tit01 {
	color: #ffff00;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
.coffeestyle_txt01 {
	color: #ffffff;
	font-display: 16px;
	line-height: 1.5;
}
	.coffeestyle_txt01:after {
		content: url("../img/products/coffee/img_star.png");
		position: absolute;
		right: 50px;
		bottom: 100px;
	}
@media only screen and (max-width: 767px) {
	.coffeestyle_inner {
		padding: 20px 20px 150px 20px;
	}
		.coffeestyle_txt01:after {
		content: url("../img/products/coffee/img_star.png");
		position: absolute;
		right: 40%;
		bottom: 40px;
	}
}
@media only screen and (min-width: 768px) {
	.coffeestyle_inner {
		width: 1060px;
		margin: 40px auto;
		padding: 40px 20px;
	}
}
/*coffeestyle-----------------------*/

/*画像2枚------------------------------------------*/
.box-coffee-01 {
		height: 200px;
 }
.box-coffee-02 {
   height: 200px;
 }
 .box-coffee-01 {
 background: url(../img/products/coffee/img_coffee_03.jpg)center;
 background-size: cover;
		position: relative;
		z-index: 20;
 }
 .box-coffee-02 {
 background: url(../img/products/coffee/img_coffee_04.jpg)center;
 background-size: cover;
		z-index: 30;
 }
@media only screen and (max-width: 767px) {
	 .sp-marT0 {
  margin-top: 0!important;
 }
	.box-coffee-01,.box-coffee-02 {
		margin: 30px 0;
	}
		.main_coffee {
	margin: 40px 0;
}
}
@media only screen and (min-width: 768px) {
		.intro-wrapper-coffee {
  position: relative;
 }
	.box-coffee-01:after {
		content: url("../img/products/coffee/bg_01.png");
		position: absolute;
		left: 120%;
		top: 5%;
	}
	.box-coffee-03 {
		 background: url("../img/products/coffee/bg_02.png")no-repeat;
	}
	.box-coffee-03 {
		height: 400px;
		width: 100%;
    position: absolute;
    left: 10%;
    top: 60%;
		z-index: 10;
	}
	.box-coffee-02  {
				position: absolute;
	}
		  .box-coffee-01 {
 width: 50%;
 height: 450px;
 }
	  .box-coffee-02 {
      width: 55%;
   position: absolute;
   right: 0;
   top: 50%;
   height: 450px;
   
 }
}
@media screen and (max-width:1024px) {
	.box-coffee-03 {
		left: 0;
	}
}
/*画像2枚------------------------------------------*/

/*taste--------------------------------------------*/
.coffee_taste {
	background-color: #faf8ed;
	margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
	.coffee_taste {
		margin-top: 300px;
	}
}
.coffee_taste_inner {
	width: 1060px;
	margin: 0 auto;
	padding: 20px;
		position: relative;
	text-align: right;
}
.taste_tit {
	color: #333333;
	font-size: 20px;
	font-weight: bold;
	padding: 40px 0 20px 0;
}
.taste_txt {
	padding-bottom: 40px;
	color: #333333;
	line-height: 1.5;
}
.text_area {
	text-align: left;
}
@media only screen and (max-width: 767px) {
	.coffee_taste {
	margin-bottom: 80px;
}
	.coffee_taste_inner {
	width: 100%;
		padding: 20px;
}
	.hanoi {
		text-align: center;
	}
	.hanoi img {
		width: 50%;
		height: auto;
	}
}
@media only screen and (min-width: 768px) {
	.text_area {
		display: inline-block;
		text-align: left;
	}
	.text_area:before {
		content: url("../img/products/coffee/img_coffee_05.png");
		position: absolute;
		top: -60px;
		left: 60px;
	}
}
/*taste--------------------------------------------*/

/*coffee_mame-------------------------------------------------------*/
.coffee_mame {
	width: 100%;
	background-color: #e6dacf;
	margin-top: 20px;
	margin-bottom: 40px;
}

.tit_mame {
	font-size: 20px;
	color: #491d07;
	font-weight: bold;
}
.txt_mame {
	line-height: 1.5;
}
.ttl-mame {
	text-align: center;
}
@media only screen and (min-width: 768px) {
	.coffee_mame_inner {
			width: 1060px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
		padding: 40px 20px;
	}
	.mame01,.mame02 {
	width: 48%;
}
	.mame01 .tit_mame {
		height: 80px;
	}
	.mame02 .tit_mame {
		height: 78px;
	}
}
@media only screen and (max-width: 767px) {
	.coffee_mame {
		margin-bottom: 80px;
	}
	.coffee_mame_inner {
		width: 100%;
		padding: 20px;
	}
	.mame01 {
		margin-bottom: 40px;
	}
	.tit_mame {
		margin-bottom: 20px;
	}
	.ttl-mame {
width: 50%;
		margin: 0 auto;
}
}
/*coffee_mame-------------------------------------------------------*/

/*レシピ-------------------------------------------------------------*/
.recipe-wrapper {
	padding: 0px 15px;
}
.ttl-recipe {
	margin-bottom: 40px;
	text-align: center;
}
.recipe_titstyle01 {
	text-align: center;
	color: #333333;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
.recipe_txt01 {
	text-align: center;
	color: #333333;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 40px;
}
/*recipe-table------*/
.recipe_table {
		display: inline-block;
	width: 350px;
}
.recipe_table_style {
	position: relative;
}
.recipe_table_style tr {
	border-bottom: 1px solid #3f332b;
}
table .table_tit01 {
	color: #3f332b;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 15px;
}
.meter:before {
	content: url("../img/products/coffee/icon_meter.png");
	position: absolute;
	left: 90px;
}
.recipe_table_style td {
	color: #3f332b;
	font-size: 13px;
	padding: 20px 0 20px 20px;
}
.recipe_table p {
	padding: 20px;
}
/*recipe-table------*/
@media only screen and (max-width: 767px) {
	.ttl-recipe img {
 width: 30%;
}
		.ttl-recipe {
	margin-bottom: 20px;
}
	.recipe_txt01 {
	text-align: left;
}
	.recipe_table {
display: block;
margin: 0;
width: 100%;
	}
		.recipe_table_style {
			width: 100%;
	}
}
.material_01 {
	padding-left: 20px;
}
.howto_coffee {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 40px;
	margin-bottom: 60px;
}
.coffee_box_style01 {
	position: relative;
}
.coffee_box_style01 {
		box-shadow: 0 0px 10px gray;
		margin-bottom: 40px;
}
.howto_tit {
	padding: 20px 0 20px 50px;
	color: #333333;
	font-size: 16px;
	font-weight: bold;
}
.howto_tit:before {
	content: url("../img/products/coffee/icon_howto.jpg");
	position: absolute;
	left: 15px;
 top: 15px;
}
.howto_txt {
	padding: 20px 0 40px 10px;
	color: #333333;
}
@media only screen and (min-width: 768px) {
	/* （768～）のとき */
 .recipe-wrapper-inner {
  margin: 0 auto;
  overflow: hidden;
 }
	.recipe_table {
		margin-top: 20px;
	}
			.recipe_table_style {
		width: 350px;
	}
	.recipe_img {
		vertical-align: top;
	}
}
@media only screen and (min-width: 1060px) {
/* （1060~）のとき */
 .recipe-wrapper-inner {
  width: 1060px;
  margin: 0 auto;
  overflow: hidden;
 }
}
/*レシピ-------------------------------------------------------------*/