@charset "UTF-8";

/* Common Parts of each of Knowledge pages 
---------------------------------------------------------*/


#knowledge .yline {
    font-size: 24px;
	 letter-spacing: 0.15em;
}


#knowledge .content_item_body:first-child {
	padding-top: 0;
}

#knowledge .content_item_body {
	padding-top: 60px;
	padding-bottom: 60px;
	margin-bottom: 30px;
}

.knowledge.top_image {
	background: url("../img/knowledge/knowledge_image.jpg") no-repeat;
	background-size: cover;
	height: 320px;
}

.process.top_image {
	background: url("../img/knowledge/process_image.jpg") no-repeat;
	background-size: cover;
	text-indent: -9999px;
	height: 320px;
}

.polyphenol.top_image {
	background: url("../img/knowledge/polyphenol_image.jpg") no-repeat;
	background-size: cover;
	text-indent: -9999px;
	height: 320px;
}




.side_menu_top_knowledge {
  width: 250px;
  height: 45px;
	background: url("../img/side/menu_base_top_knowledge.png") left no-repeat;
}


/* 烏龍茶ってどんなお茶？ */
.side_menu_knowledge_about a {
	background: url("../img/side/sidemenu.png") 0px -87px no-repeat;
}
	.side_menu_knowledge_about a:hover {
		background: url("../img/side/sidemenu.png") 0px -111px no-repeat;
	}
	.side_menu_knowledge_about a.selected {
  	background: url("../img/side/sidemenu.png") 0px -135px no-repeat;
	}
/* 烏龍茶ができるまで */
.side_menu_knowledge_process a {
	background: url("../img/side/sidemenu.png") -210px -87px no-repeat;
}
	.side_menu_knowledge_process a:hover {
		background: url("../img/side/sidemenu.png") -210px -111px no-repeat;
	}
	.side_menu_knowledge_process a.selected {
  	background: url("../img/side/sidemenu.png") -210px -135px no-repeat;
	}
/* ウーロン茶ポリフェノールって？ */
.side_menu_knowledge_polyphenol a {
	background: url("../img/side/sidemenu.png") -420px -87px no-repeat;
}
	.side_menu_knowledge_polyphenol a:hover {
		background: url("../img/side/sidemenu.png") -420px -111px no-repeat;
	}
	.side_menu_knowledge_polyphenol a.selected {
  	background: url("../img/side/sidemenu.png") -420px -135px no-repeat;
	}
/* 烏龍茶の世界史 */
.side_menu_knowledge_history a {
	background: url("../img/side/sidemenu.png") 0px -171px no-repeat;
}
	.side_menu_knowledge_history a:hover {
		background: url("../img/side/sidemenu.png") 0px -195px no-repeat;
	}
	.side_menu_knowledge_history a.selected {
  	background: url("../img/side/sidemenu.png") 0px -219px no-repeat;
	}



/* Details for Knowledge About 
---------------------------------------------------------*/

.knowledge_top_image {
	width: 558px;
	height: 186px;
	margin-bottom: 20px;
	background: url(../img/knowledge/knowledge_image.jpg);
}
.knowledge_top_description {
	width: 560px;
	margin-top: 20px;
}

#index h3 {
	font-size: 30px;	
	margin-bottom: 30px;
	line-height: 1.3;
/*   font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; */
}

.content_item_body .yline {
	padding: 0.6em 0;
	text-align: center;
	margin-top: 0px;
}

.content_item_body h4 {
	font-size: 30px;
	letter-spacing: 0.15em;
	color: #280100;
	padding: 0.4em 0;
	text-align: center;
	position: relative;
	margin: 0 0 40px 0;
}

.content_item_body h4:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-top: 4px solid #cb7338;
}

.content_item_body h4:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 4px solid #cb7338;
}



.knowledge_all_teas {
/*   width: 560px; */
  margin-top: 20px;
}
  .knowledge_all_teas:after {
    content: "";
    display: block;
    clear: both;
  }
  
  .knowledge_teas_image {
    width: 200px;
    float: left;
	 margin-left: -24px;
  }
  .knowledge_teas_detail {
    width: 400px;
    float: right;
	 text-align: center;
  }
    .knowledge_teas_detail p {
      margin-bottom: 40px;
		text-align: left;
    }
    
    .knowledge_teas_detail h5 {
      margin: 30px 0px 15px;
		letter-spacing: 0.1em;
    }

.knowledge_tea_comparing {
	width: 538px;
	height: 766px;
	overflow: hidden;
	text-indent: -5000em;
	background: url(../img/knowledge/knowledge_tea_compare.jpg);
	margin: 0 auto;
}

.knowledge_tea_roots {
  margin-top: 20px;
}
  .knowledge_tea_roots p {
    margin-bottom: 40px;
  }
  
  .knowledge_tea_roots .roots_comment {
    text-align: right;
  }



/* Details for Knowledge Process 
---------------------------------------------------------*/

.process_top_image {
  width: 558px;
	height: 186px;
	margin-bottom: 20px;
	text-indent: -5000em;
	background: url(../img/knowledge/process_image.jpg);
}

#process.top_image {
    margin-bottom: 70px !important;
}

.process_top_description {
  width: 560px;
}

#process h5 {
	padding: 0.7em 0;
}

#process + .top_description > p {
	font-size: 14px;
}


.process_item {
	margin-top: 0px;
}

.process_item:first-of-type {
	margin-top: 0px;
}


  .process_item:after {
    content: "";
    display: block;
    clear: both;
  }
  .process_item_name {
    width: 160px;
    float: left;
  }
    .process_item_name img {
      display: block;
      margin: 20px 0px 0px 0px;
    }
  .process_item_detail {
    width: 450px;
    float: right;
  }
  .process_item_detail p {
    margin: 20px 0px;
  }
    .process_item_detail_images_01 {
      width: 284px;
      height: 84px;
      margin-bottom: 10px;
      background-image: url(../img/knowledge/process_detail_images_01.jpg);
    }
    .process_item_detail_images_02 {
      width: 284px;
      height: 84px;
      margin-bottom: 10px;
      background-image: url(../img/knowledge/process_detail_images_02.jpg);
    }
    .process_item_detail_images_03 {
      width: 284px;
      height: 84px;
      margin-bottom: 10px;
      background-image: url(../img/knowledge/process_detail_images_03.jpg);
    }
    .process_item_detail_images_04 {
      width: 284px;
      height: 84px;
      margin-bottom: 10px;
      background-image: url(../img/knowledge/process_detail_images_04.jpg);
    }
    .process_item_detail_images_05 {
      width: 284px;
      height: 84px;
      margin-bottom: 10px;
      background-image: url(../img/knowledge/process_detail_images_05.jpg);
    }
    .process_item_detail_images_06 {
      width: 284px;
      height: 84px;
      background-image: url(../img/knowledge/process_detail_images_06.jpg);
    }



/* Details for Knowledge Polyphenol 
---------------------------------------------------------*/

.polyphenol_top_image {
  width: 558px;
	height: 186px;
	margin-bottom: 20px;
	background: url(../img/knowledge/polyphenol_image.jpg);
}




.polyphenol_item {
	margin-bottom: 40px !important;
}


.polyphenol_item:last-of-type {
	margin-bottom: 0px !important;
}



  .polyphenol_item:after {
    content: "";
    display: block;
    clear: both;
  }
  .polyphenol_item_index {
    width: 140px;
    float: left;
  }
    .polyphenol_item_index img {
      display: block;
      margin: 20px 0px 0px 10px;
    }
  .polyphenol_item_detail {
    width: 450px;
    float: right;
  }
  .polyphenol_item_detail p {
    margin: 20px 0px 0px;
  }
  .polyphenol_item_detail p.polyphenol_item_last {
    margin: 20px 0px 0px;
  }