/* trend.css */

.homeBtn {
	position: absolute;
	top: 148px;
	left: 365px;
	z-index: 2;
}
@media screen and (min-width: 768px) and (max-width: 979px) {
	.homeBtn {
		top: 152px;
		left: 351px;
	}
}
@media screen and (max-width: 767px) {
	.homeBtn {
		top: 85px;
		left: 256px;
	}
	.homeBtn img {
		width: 44px;
		height: 44px;
	}
}

h2 {
	background: url(/img/common/bg_ttl.gif) repeat;
	line-height: 1;
	margin: 0 15px 20px 0;
	padding: 17px 0 15px 20px;
	border: 10px solid #FFF;
	border-radius: 3px;		/* CSS3草案 */
	-webkit-border-radius: 3px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 3px;	/* Firefox用 */
}

@media screen and (max-width: 979px) {
	h2 {
		margin: 0 0 20px 0;
	}
}


/* article
----------------------------------- */
article {
	clear: right;
	position:relative;
	background-color: #FFF;
	width: 680px;
	border-radius: 6px;		/* CSS3草案 */
	-webkit-border-radius: 6px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 6px;	/* Firefox用 */
	padding: 10px 10px 20px 10px;
}
/* Media Queries */
@media screen and (min-width: 768px) and (max-width: 979px) {
	article {
		width: 708px;	
	}
}
@media screen and (max-width: 767px) {
	article {
		width: 280px;	
	}
}


article .ttlBox {
	position: relative;
	width: 680px;
	height: 443px;
	background: url(/img/trend/bg.jpg) no-repeat top left;
	margin: 0 auto 26px;
}
article .ttlBox .txt1 {
	position: absolute;
	top: 312px;
	left: 0;
}
article .ttlBox .txt2 {
	position: absolute;
	top: 23px;
	left: 273px;
}
article .ttlBox .txt3 {
	position: absolute;
	top: 381px;
	left: 347px;
}
@media screen and (min-width: 768px) and (max-width: 979px) {
	article .ttlBox {
		margin-top: 15px;
	}
}
article .ttlBox ul,
article .ttlBox p {
	position: absolute;
}
article .ttlBox ul {
	top: 116px;
	left: 269px;
}
article .ttlBox ul li{
	list-style: none;
	font-size: 16px;
	width: 307px;
	height: 31px;
	line-height: 1;
}
article .ttlBox ul li:nth-child(1){background: url(/img/trend/num1.png) no-repeat left top;}
article .ttlBox ul li:nth-child(2){background: url(/img/trend/num2.png) no-repeat left top;}
article .ttlBox ul li:nth-child(3){background: url(/img/trend/num3.png) no-repeat left top;}
article .ttlBox ul li:nth-child(4){background: url(/img/trend/num4.png) no-repeat left top;}
article .ttlBox ul li:nth-child(5){background: url(/img/trend/num5.png) no-repeat left top;}
article .ttlBox ul li:nth-child(6){background: url(/img/trend/num6.png) no-repeat left top;}
article .ttlBox ul li:nth-child(7){background: url(/img/trend/num7.png) no-repeat left top;}

article .ttlBox ul li a {
	margin-left: 34px;
	display: block;
	color: #FFF;
	text-decoration: none;
	width: 272px;
	border-bottom: 1px solid #FFF;
	padding-bottom: 7px;
	padding-top: 2px;
	background: url(/img/trend/arrow.png) no-repeat right 2px;

}/*
article .ttlBox ul li a:hover {
	color: #F00;
}*/
article .ttlBox p {
	font-size: 18px;
	color: #FF0000;
	top: 375px;
	left: 347px;
	padding: 0;
	margin: 0;
}
article .ttlBox div.btn {
	position: absolute;
	top: 341px;
	left: 348px;
}
article .ttlBox div.banner {
	padding-left: 589px;
}
@media screen and (max-width: 767px) {
	article .ttlBox {
		width: 280px;
		height: 674px;
		background-color: #000;
		/*
		-moz-background-size:contain;
		background-size:contain;	
		*/
		-moz-background-size:60% auto;
		background-size:60% auto;
		background-position: 20px 405px;	
	}
	article .ttlBox .txt1 {
		top: 495px;
		margin-left: -51px;
		margin-left: -35px;
		
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		
	}
	article .ttlBox .txt2 {
		top: 5px;
		left: 0px;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
	}
	article .ttlBox .txt3 {
		top: 458px;
		left: 70px;
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
	}
	article .ttlBox ul {
		top: 100px;
		left: 10px;
	}
	article .ttlBox ul li{
		width: 260px;
		height: 45px;
		font-size: 13px;
	}
	article .ttlBox ul li a {
		width: 228px;
	}	
	article .ttlBox p {
		font-size: 13px;
		color: #FF0000;
		top: 462px;
		left: 101px;
	}	
	article .ttlBox div.btn {
		position: absolute;
		top: 430px;
		left: 68px;
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
	}
	article .ttlBox div.banner{
		position: absolute;
		padding-left: 0;
		top: 614px;
		background: url(/img/trend/banner_s.gif) no-repeat;
	}
	article .ttlBox div.banner a {
		display: block;
		width: 280px;
		height: 72px;
	}
	article .ttlBox div.banner img {
		display: none;
	}
}


article .trendBox {
	width: 640px;
	margin: 0 auto 40px;
}
article .trendBox ul {
	list-style: none;
	font-size: 16px;
}
article .trendBox p {
	font-size: 13px;
	margin-top: 15px;
}

article .trendBox h3 {
	background-color: #f2f2f2;
	font-size: 30px;
	padding: 12px 0 12px 15px;
	font-weight: normal;
	margin-bottom: 15px;
	line-height: 1;
}
@media screen and (max-width: 767px) {
	article .trendBox {
		width: 260px;
		margin: 0 auto 40px;
	}
	article .trendBox h3 {
		font-size: 16px;
		padding-right: 15px;
		line-height: 1.5;
	}
	article .trendBox ul {
		list-style: none;
		font-size: 14px;
		text-indent: -18px;
		margin-left: 18px;
		line-height: 1.3;
	}
	article .trendBox ul li {
		margin-bottom: 5px;
	}
}
article .txt p {
	font-size: 13px;
}
article .txt .nextBtn {
	margin-top: 25px;
}


/* sidebar
----------------------------------- */
#sidebar div.categoryBlock,
#sidebar div.archiveBlock {
	width: 245px;
	padding: 10px;
	background-color: #FFF;
	border-radius: 3px;		/* CSS3草案 */
	-webkit-border-radius: 3px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 3px;	/* Firefox用 */
}

#sidebar div.categoryBlock ul,
#sidebar div.archiveBlock ul {
	padding: 5px 0 0 10px;
}

#sidebar div.categoryBlock li,
#sidebar div.archiveBlock li {
	font-size: 12px;
	list-style-position: inside;
	line-height: 1.8;
	font-weight: bold;
}
#sidebar div.categoryBlock li a,
#sidebar div.archiveBlock li a {
	color: #000;
	text-decoration: none;
}
#sidebar div.categoryBlock li a:hover,
#sidebar div.archiveBlock li a:hover {
	color: #df0000;
}


.prevBtn {
	float: left;
	padding-top: 15px;
}
.nextBtn {
	float: right;
	margin: 0 15px 0 0;	
	padding-top: 15px;
}


/* pagetop
----------------------------------- */
.pagetop {
	cursor: pointer;
	margin: 15px 15px 20px 0;
}
/* Media Queries */
@media screen and (max-width: 979px) {
	.pagetop {
		cursor: pointer;
		margin: 15px 0 20px 0;
	}
	.nextBtn {
		margin: 0;	
	}
}

div.last {
	display: none;
}

.pagetopBtm {
	clear: both;
}

article .pagetop {
	text-align: right;
	float: none;
	cursor: pointer;
	margin: 15px 20px 20px 0;
}
.pagetop:nth-last-child(2),
article .pagetop:last-child {
	display: none;
}
@media screen and (max-width: 767px) {
	.nextBtn {
		margin: 0;	
	}
	.pagetop {
		float: none;
		clear: both;
		text-align: center;
		margin: 25px 0 20px;
		padding-top: 15px;
	}
	article .pagetop {
		text-align: center;
		float: none;
		cursor: pointer;
		margin: 15px 0 20px;
	}
}