@charset "euc-jp";

@import url(reset.css); 

/* ----------------------------------------

STRUCTURE

 ----------------------------------------*/
html {
	color:#333;
	background-color:#F5F5F5;
    overflow-x: hidden;
    overflow-y: auto;
	-webkit-text-size-adjust: none;
}
body {
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.4;
    overflow-x: hidden;
    overflow-y: auto;
}
#wrapper {
}
header {
	background:url(../../img/bg_top.gif) repeat-x top;
	background-size:5px 137px;
}
#content {
	max-width:640px;
	margin:0 auto;
}
#content_main {
	margin-bottom:20px;
}
#content_sub {
}
footer {
	width:100%;
	margin:30px auto 0;
	background:#FFF;
}

/* =========================================================
header
========================================================= */
#header_inner {
	min-width:320px;
	max-width:480px;
/*	height:252px;*/
	height:137px;
	margin:0 auto;
	position:relative;
}
header h1 a {
	width:202px;
	height:39px;
	background:url(../../img/header_logo.png) no-repeat;
	background-size:contain;
	text-indent:-9999px;
	position:absolute;
	left:10px;
	top:51px;
}
header #header_tfm a {
	width:90px;
	height:27px;
/*	background:url(../../img/header_tfm.png) no-repeat;*/
	background:url(https://www.tfm.co.jp/shared/img/logo_tfm.svg) no-repeat;
	background-size:90px 27px;
	text-indent:-9999px;
	position:absolute;
	left:10px;
	top:18px;
}
header #header_onair {
	width:248px;
	height:27px;
	background:url(../../img/header_onair.png) no-repeat;
	background-size:contain;
	text-indent:-9999px;
	position:absolute;
	left:10px;
	top:98px;
}
/*
#bnr_mes a {
		width:300px;
	height:90px;
	display:block;
	margin:10px auto;
}
#bnr_mes a img {
	width:300px;
	height:90px;
}
*/

/* =========================================================
ここからトップページ用
========================================================= */
/* =========================================================
#article_list
========================================================= */
/* ここからメディアクエリまで、floatしたボックスを左揃えかつセンター寄せにする処理 */
#article_list {
	margin-top:20px;
	position:relative;
	overflow:hidden;
}	
#article_list ul {
	position: relative;
	left: 50%; /* ul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
	float: left;
}
#article_list ul li {
	position: relative;
	left: -50%; /* li要素を左に50%移動。 */
	float: left;
}
/* 横幅459pxまでは2件ごとに改行 */
@media screen and (max-width:475px) {
#article_list ul li:nth-child(2n+1){
	clear:both;
}
}
/* 横幅612pxまでは3件ごとに改行 */
@media screen and (min-width:475px) and ( max-width:628px) {
#article_list ul li:nth-child(3n+1){
	clear:both;
}
}
/* 横幅612px以上は4件ごとに改行 */
@media screen and (min-width:628px) {
#article_list ul li:nth-child(4n+1){
	clear:both;
}
}

#article_list h2 {
	width:94%;
	height:34px;
	background:url(../../img/article_list_header.png) no-repeat;
	background-size:150px 34px;
	text-indent:-9999px;
/*	border-top:3px #000 solid;*/
	border-bottom:1px #C9C9C9 dotted;
	padding:3px 2px 2px 2px;
	margin:0 auto 20px;
}
article {
/*	display:inline-block;*/
	float:left;
	width: 147px;
	height: 175px;
	overflow: hidden;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	position:relative;
	margin:0 3px 10px;
/*	text-align:center;*/
	background:#FFF;
}
/* gradation layer */
article:after {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	position: absolute;
	display: block;
	content: "";
	top: 100px;
	left: 0;
	width:147px;
	height:75px;  
    background: -moz-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.6));・?/* Firefox・・*/  
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0.6)));・?/* Safari,Google Chrome・・*/
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* W3C */
}
article .article_thumb {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	width:147px;
	height:175px;
}
article .article_thumb_wrapper {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background:url(../../img/article_thumb.gif) no-repeat;
	background-size:147px 175px;
	position:absolute;
	top:0px;
	left:0px;
	transition: 0.2s;
}
article .newMark {
	-webkit-border-radius: 9px;
	border-radius: 9px;
	position:absolute;
	display:block;
	left:5px;
	top:5px;
	color:#FFF;
	font-weight: bold;
	font-size:8px;
	background:#F00;
	padding:1px 6px;
	z-index:5;
	opacity:0.9;
}
article .article_date {
	position:absolute;
	right:6px;
	top:6px;
	color:#FFF;
	text-align:right;
	z-index:5;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
	font-size:9px;
}
article .article_title {
	position:absolute;
	left:48px;
	bottom:6px;
	color:#FFF;
	font-weight: bold;
	font-size:10px;
	text-align:left;
	z-index:5;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
  	line-height:12px;
	min-height:36px;
}
article .article_cat img {
	width:36px;
	height:36px;
	position:absolute;
	left:6px;
	bottom:6px;
	-moz-transform: scale(1.0,1.0);
	-webkit-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
	z-index:5;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

/* pageseitch */
.pageswitch {
    clear: both !important;
    text-align: center;
	padding:10px 0 0 0;
	margin-bottom:30px;
	color: #bbb;
	font-size:11px;
	
	/* センター寄席に戻すため左に50%移動。 */
	position: relative;
	left: -50%;
}
.pageswitch a:link span,
.pageswitch a:visited span {
/*    color: #437c7b;*/
}
.pageswitch a:hover {
/*    color: #74b6b5;*/
}
.pageswitch strong {
	font-weight:bold;
	color: #333;
}

/* =========================================================
ここから記事ページ用
========================================================= */
/* =========================================================
article_item
========================================================= */
.article_item {
	padding:10px 10px 0;
	background:#FFF;
}
.article_item_header {
	height:60px;
	text-align:right;
	margin-bottom:20px;
}
.article_item_header p {
	margin:0 0 10px 0;
	padding-top:12px;
	line-height:20px;
	font-size:14px;
}
.article_item_header p a {
	text-decoration:underline;
}
.article_item_header a:hover,
.article_item_header a:active,
.article_item_body a:link,
.article_item_body a:visited {
	color:#F20000;
}

/* カテゴリー別色指定（よみきかせ） */
.cat1719 .article_item_header {
	border-bottom:#69D015 1px solid;
	background:url(../../img/icon_cat1719.png) no-repeat;
	background-size:60px 60px;
}
.cat1719 .article_item_header p {
	color:#69D015;
}
.cat1719 .article_item_header a:link,
.cat1719 .article_item_header a:visited,
.cat1719 .article_item_body a:link,
.cat1719 .article_item_body a:visited {
	color:#69D015;
}

.article_item h2 {
	padding:0 0 15px;
	font-size:18px;
	font-weight:bold;
}
.article_item h2 a {
	text-decoration:none;
}
.article_item_body {
	padding:0 0 25px;
    line-height: 1.7em;
}
.article_item_body img {
	max-width:100%;
	height:auto;
}
.article_item_body a {
	text-decoration:underline;
}
.article_item_footer {
	padding:0 0 25px;
    text-align: right;
}
/* social */
.sb_post {
    background: none repeat scroll 0 0 #efefef;
    border-radius: 5px;
    margin: 10px auto;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
}
.sb_post li {
    display: inline-block;
    margin: 0 5px;
}
.sb_post li img {
}
.sb_post .facebook {
    position: relative;
    top: -5px;
    width: 70px;
}

/* =========================================================
recent_posts
========================================================= */
.recent_posts {
	background:#FFF;
}
.recent_posts h2 {
	background-image:	url(../../img/recent_posts_header.png);
	background-repeat:	no-repeat;
    background-position: top left 10px;
	background-size:255px 38px;
	height:43px;
	text-indent:-9999px;
	margin-bottom:15px;
	border-bottom:3px solid #a0e06c;
}
.recent_posts ul li a {
	display:block;
	margin:10px 10px;
	border-bottom:1px solid #ededed;
	padding-right:15px;
/*    background: url("../../img/recent_arrow.png") no-repeat scroll right center 11px 19px rgba(0, 0, 0, 0);*/
    background-image: url("../../img/recent_arrow.png");
	background-repeat:no-repeat;
	background-position: right center;
	background-size: 11px 19px;
}
.recent_posts .recent_thumb_container {
	width: 82px;
	height: 82px;
	overflow: hidden;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	position:relative;
	float:left;
	background:#FFF;
	margin:0 12px 10px 0;
}
.recent_posts .recent_thumb_container .recent_thumb {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	width:82px;
	height:82px;
}
.recent_posts .recent_thumb_container .recent_thumb_wrapper {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background:url(../../img/recent_thumb.gif) no-repeat;
	background-size:82px 82px;
	position:absolute;
	top:0px;
	left:0px;
	transition: 0.2s;
}
.recent_posts .recent_text {
	font-size:13px;
	line-height:1.3;
	margin-bottom:10px;
}

/* =========================================================
sub_banner
========================================================= */
#sub_banner {
	margin-bottom:30px;
	text-align:center;
}
#sub_banner a {
	margin:0 auto 15px;
	display:block;
	max-width:300px;
	height:auto;
}
#sub_banner a img {
	margin:0 auto 10px;
	display:block;
	max-width:300px;
	height:auto;
}

/* podcast */
#sub_banner #podcast {
	width:300px;
	display: block;
	margin:0 auto 15px;
	padding-bottom:5px;
	background:#FFF;
	text-align:center;
	line-height:1.3;
}
#sub_banner #podcast img {
	margin-bottom:8px;
}
#sub_banner #podcast a {
	width:260px;
	margin:0px auto 5px;
	display:block;
}
#sub_banner #podcast a img {
	width:260px;
	margin:0px auto;
	display:block;
}
#sub_banner #podcast #podcast_ttl {
}
#sub_banner #podcast .podcast_txt {
	font-size:12px;
	margin-bottom:13px;
	padding:0 20px;
	color:#666 !important;
}
#sub_banner #podcast .podcast_btn_txt {
	font-size:10px;
	margin-bottom:13px;
	padding:0 20px;
	color:#666 !important;
}

/* =========================================================
footer
========================================================= */
#footer_utility {
	width:100%;
/*	padding-bottom:13px;
	background:url(../../img/footer_top.gif) repeat-x bottom;
	background-size:16px 14px;*/
	margin-bottom:30px;
}
/* sns */
#snsMenu {
	width:100%;
/*	background-color:#000;*/
	background:#a0e06c;
	margin:0 auto;
/*	border-bottom:1px solid #666; */
	border-bottom:1px solid #fff; 
}
#snsMenu .btnTw {
	width:50%;
	float:left;
	background:url(../../img/sns_border.gif) repeat-y right;
}
#snsMenu .btnFb {
	width:50%;
	float:right;
}
#snsMenu .btnTw img,
#snsMenu .btnFb img {
	width:20px;
	height:20px;
	padding:12px 0;
	margin:0 auto;
	display:block;
}
/* pagetop */
#pagetop {
	width:100%;
/*	background-color:#000;*/
	background:#a0e06c;
	margin:0 auto;
}
#pagetop p {
	width:100%;
}
#pagetop img {
	width:22px;
	height:14px;
	margin:0 auto;
	padding:12px 0 10px;
	display:block;
}
#footer_tfm a {
	width:150px;
	height:46px;
/*	background:url(../../img/footer_tfm.png) no-repeat;*/
	background:url(https://www.tfm.co.jp/shared/img/logo_tfm.svg) no-repeat;
	background-size:150px 46px;
	text-indent:-9999px;
	margin:0 auto 40px;
	display:block;
}
footer small {
	width:300px;
	height:10px;
	background:url(../../img/footer_copy.png) no-repeat;
	background-size:300px 10px;
	text-indent:-9999px;
	padding-bottom:20px;
	margin:0 auto;
	display:block;
}

/* =========================================================
バナーシステム
========================================================= */
#headBnr {
	text-align:center;
}

/* =========================================================
link
========================================================= */
a:link {
	color: #333;
}
a:visited {
	color: #333;
}
a:hover {
	color: #F20000;
}
a:active {
	color: #F20000;
}