@charset "utf-8";
/* CSS Document */
#blog_con{
	text-align:center;
	padding:4% 0 5%;
  color:#fff;
	background: rgba(1, 1, 1, 0.8);
}

#blog_con .articlecon{
}

#blog_con .articlecon ul{}
#blog_con .articlecon ul li{
	border-bottom:1px solid #555;
	padding:2% 0;
	box-sizing: border-box;
	overflow: hidden;
}
#blog_con .articlecon ul li .pic{
	max-width: 190px;
	width:20%;
	float:left;
	overflow:hidden;
	max-height:190px;
	position:relative;
}
#blog_con .articlecon ul li .pic img{
	width:100%;
}

#blog_con .articlecon ul li article{
	float:right;
	width:79%;
	margin-left: 1%;
	text-align: left;
	position: relative;
}



#blog_con .articlecon ul li article .title{
  font-size:1.3rem;
  margin-bottom:2%;
  color:#AE8746;
  line-height: 1.4;
	font-weight: bold;
}

#blog_con .articlecon ul li article .title span{
  font-size:0.9rem;
  display:block;
  font-weight: normal;
}
#blog_con .articlecon ul li article .comment{
  margin:1% 0;
  line-height:1.3;
  font-size: 1rem;
  }

#blog_con .articlecon ul li article .btn_more{
	float: right;
	font-size: 0.9rem;
	margin: 2% 0 3%;
}
#blog_con .articlecon ul li article .btn_more a {
    padding: 5px 30px;
}







/*Detail*/


#blog_con .detailcon{
}

#blog_con .detailcon ul li{
	border-bottom:1px solid #555;
	padding:2% 0;
	box-sizing: border-box;
	overflow: hidden;
}
#blog_con .detailcon ul li .pic{
	width:30%;
	float:left;
}
#blog_con .detailcon ul li .pic img{
	width:100%;
}

#blog_con .detailcon ul li article{
	text-align: center;
	position: relative;
	width:68%;
	float:right;
}


#blog_con .detailcon ul li .title{
  font-size:1.6rem;
  margin-bottom:2%;
  color:#AE8746;
  line-height: 1.4;
	font-weight: bold;
	text-align: left;
}

#blog_con .detailcon ul li .title span{
  font-size:0.9rem;
  display:block;
  font-weight: normal;
}
#blog_con .detailcon ul li article .comment{
  margin:0;
  line-height:1.3;
  font-size: 1rem;
	text-align:left;
  }







@media screen and (max-width: 768px){


  #blog_con{
    margin-top:50px;
    padding:3% 0 4%;
  }



	#blog_con .articlecon ul li{
		padding:2% 0;
	}
	#blog_con .articlecon ul li article{
		width:73%;
		margin-left: 2%;
	}
	#blog_con .articlecon ul li article .title{
	  font-size:1rem;
	}
	#blog_con .articlecon ul li article .title span{
	  font-size:0.7rem;
	}
	#blog_con .articlecon ul li article .comment{
	  font-size: 0.8rem;
	  }
	#blog_con .articlecon ul li .pic{
			max-height:100px;
	}


	.subcon #cate ul li {
	font-size: 0.9rem;
	　}

	.subcon #pickup ul li {
	padding: 3% 0;
	　}
	.subcon #pickup ul li .pic {
	    height: 80px;
	}
	.subcon #pickup ul li .pic img {
	    width: 100%;
	}

	#blog_con .detailcon ul li .title {
	    font-size: 1.3rem;
	}
	#blog_con .detailcon ul li .title span {
	    font-size: 0.7rem;
	}
	#blog_con .detailcon ul li article .comment {
	    font-size: 0.9rem;
	}
}


@media screen and (max-width: 680px){
#blog_con .articlecon ul li article .btn_more a {
    padding: 5px 20px;
		font-size: 0.6rem;
}
#blog_con .articlecon ul li article .btn_more span {
    margin-left: -20px;
    padding-right: 5px;
		padding-top:5px;
}
}
@media screen and (max-width: 480px){
	.subcon #pickup ul li .pic,#blog_con .articlecon ul li .pic {
	    max-height: 80px;
	}
	#blog_con .detailcon ul li .pic{
   width:100%;
	 float:none;
	}
	#blog_con .detailcon ul li article {
    float: none;
    width: 100%;
		margin-top: 3%;
}
}