@charset "UTF-8";

/* CSS Document */

/*==================================================

background
==================================================*/


/*==================================================

slider
==================================================*/

div#slide {
	width: 100%;
	max-width: 1200px;
	min-width: 1072px;
	margin: 0 auto;
}

div#slide img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*==================================================

top contents
==================================================*/

/* news */
#news {
	width: 65%;
	float: left;
}
#news > h1 {
	width: 100%;
	margin-bottom: 20px;
}
#news section {
	width: 100%;
	border-top: 1px solid #999;
	padding: 30px 0;
}

/* cf */
#news section:before,
#news section:after {
    content: " ";
    display: table;
}
#news section:after {
    clear: both;
}
#news section {
     *zoom: 1;
}

#news section h1 {
	font-size: 160%;
}
#news section p {
	font-size: 125%;
	line-height: 180%;
	padding: 20px 0;
}
#news section .txt {
	width: 62%;
	float: left;
}
#news section .photo {
	width: 32%;
	float: right;
}
#news section dl {
	width: 100%;
	display: table;
}

#news section dt {
	width: 50%;
	display: table-cell;
	text-align: left;
}
#news section dd {
	width: 50%;
	display: table-cell;
	font-size: 140%;
	color: #CCC;
	letter-spacing: 0.1em;
	font-family: 'News Cycle', sans-serif;
	text-align: right;
	line-height: 180%;
	vertical-align: bottom;
}
#news > h1 img,#news section .photo img,#news section dt img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
#news .paging {
	display: table;
	margin: 0 auto;
	padding-bottom: 30px;
}
#news .paging {
	display: table;
	margin: 0 auto;
}
#news .paging li {
	display: table-cell;
	border-right: 1px solid #CCC;
}
#news .paging li:nth-last-of-type(1) {
	border-right: none;
}
#news .paging li a {
	display: block;
	color: #999;
	padding: 0 10px;
}
#news .paging li a:hover {
	color: #f0a5a4;
}
#news .paging li a.act {
	color: #f0a5a4;
}

/* banner */

#side {
	width: 32%;
	float: right;
}
#side .ranking {
	border: 1px solid #999;
	padding-bottom: 8px;
	margin-bottom: 30px;
}
#side .ranking h2 {
	margin-bottom: 8px;
}
#side .ranking dl {
	width: 90%;
	display: table;
	border-top: 1px dotted #CCC;
	margin: 0 auto;
	padding: 12px 0;
}
#side .ranking dl:nth-of-type(1) {
	border-top: none;
}
#side .ranking dt {
	width: 21%;
	display: table-cell;
	text-align: left;
	vertical-align: top;
}
#side .ranking dd {
	display: table-cell;
	font-size: 120%;
	text-align: left;
	vertical-align: middle;
}
#side .ranking dd span {
	font-size: 80%;
}
#side .ranking dd.photo {
	width: 28%;
	display: table-cell;
	text-align: left;
	vertical-align: top;
	padding-left: 10px;
}

#side .banner-l {
	width: 100%;
	margin-bottom: 30px;
}
#side .border {
	border: 1px solid #999;
}
#side .banner-l .inner {
	padding: 5px;
}
#side .banner-l .inner p {
	padding: 10px;
}

#side .ranking h2 img,#side .ranking dt img,#side .banner-l img,#side .ranking dd.photo img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
#side > .fb-page {
	width: 343px;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
	width: 100% !important;
}


/*==================================================

size m
==================================================*/

@media only screen and (max-width: 768px) {
	
	div#slide {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
	
	/*==================================================
	
	top contents
	==================================================*/
	
	/* news */
	#news {
		width: 57%;
		float: left;
	}
	#news section h1 {
		font-size: 140%;
	}
	#news section p {
		font-size: 100%;
		line-height: 180%;
		padding: 20px 0;
	}
	#news section dd {
		font-size: 100%;
	}
	#side {
		width: 40%;
		float: right;
	}
	#side .ranking dt {
		width: 16%;
	}
	#side .ranking dd {
		display: table-cell;
		font-size: 100%;
		text-align: left;
		line-height: 130%;
		vertical-align: middle;
	}
	#side .ranking dd span {
		font-size: 70%;
	}
	#side .ranking dd.photo {
		width: 35%;
	}
	#side > .fb-page {
		width: 307px;
	}
}
@media only screen and (max-width: 480px) {
	
	div#slide {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
	
	/*==================================================
	
	top contents
	==================================================*/
	
	/* news */
	#news {
		width: 100%;
		float: none;
	}
	#news section {
		padding: 20px 0;
	}
	#news section h1 {
		font-size: 140%;
	}
	#news section p {
		font-size: 100%;
		line-height: 180%;
		padding: 10px 0;
	}
	#news section dl {
		width: 70%;
		display: block;
	}
	#news section dt {
		width: 100%;
		display: block;
	}
	#news section dd {
		width: 100%;
		display: block;
		font-size: 100%;
		text-align: left;
		padding-top: 5px;
	}

	#side {
		width: 100%;
		float: none;
	}
	#side .ranking dt {
		width: 18%;
	}
	#side .ranking dd {
		display: table-cell;
		font-size: 100%;
		text-align: left;
		line-height: 150%;
		vertical-align: middle;
	}
	#side .ranking dd span {
		font-size: 70%;
	}
	#side .ranking dd.photo {
		width: 35%;
	}
	#side > .fb-page {
		width: 460px;
	}
}
@media only screen and (max-width: 375px) {
	
	div#slide {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
	#side > .fb-page {
		width: 350px;
	}
	#side .ranking dd {
		line-height: 130%;
	}
}
@media only screen and (max-width: 320px) {
	
	div#slide {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
	
	/*==================================================
	
	top contents
	==================================================*/
	
	/* news */
	#news {
		width: 100%;
		float: none;
	}
	#news section {
		padding: 20px 0;
	}
	#news section .txt {
		width: 100%;
		float: none;
	}
	#news section .photo {
		width: 100%;
		float: none;
	}
	#news section h1 {
		font-size: 140%;
		padding-top: 15px;
	}
	#news section p {
		font-size: 100%;
		line-height: 180%;
		padding: 10px 0;
	}
	#news section dl {
		width: 100%;
		display: table;
	}
	#news section dt {
		width: 55%;
		display: table-cell;
	}
	#news section dd {
		width: 50%;
		display: table-cell;
		font-size: 100%;
		text-align: right;
		padding-top: 0;
	}
	#side > .fb-page {
		width: 300px;
	}

}