/*

Theme Name: FMHirakata
Theme URI: http://www.kiku-fm779.com/
Description: FMひらかた用のテーマ

-------これ---------
*/

/* 汎用 */
*{
	margin:0;
	padding: 0;
}

#content{
	font-size: 16px;
}

#content ul, #content li{
	margin: 1em;
}

#onair-backnumber li{
	list-style: none;
	margin: 0;
}

html, body{
	color:#666;
	background:#fcf89d;
	width: 100%;
	height:100%;
	margin: 0;
	font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ",  "游ゴシック", YuGothic, Meiryo, sans-serif;
}

.glyphicons{
	margin-left: 8px;
	margin-bottom: -6px;
}

section, nav, article, aside, hgroup, header, footer, figure, figcaption {
	display: block;
}

p{
	margin-top:1em;
	margin-bottom:1em;
}

.container p{
	margin: 1em;
}

pre{
	font-size: 0.8em;
	font-weight: normal;
	width: 800px;
	font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	/* Mozilla */
	white-space: -moz-pre-wrap;

	/* Opera 4-6 */
	white-space: -pre-wrap;

	/* Opera 7 */
	white-space: -o-pre-wrap;

	/* CSS3 */
	white-space: pre-wrap;

	/* IE 5.5+ */
	word-wrap: break-word;
}

table{
	margin: 12px;
}

#weekly-chart table{
	margin: 0;
}

h1{
	width:924px;
	height: 96px;
}

h1 img{
	margin-left: -60px !important;
}

h2{
	width: 100%;
	color: #fff;
	background: #ff7542;
	font-size:17px;
	padding: 2px 0;
	position: relative;

	text-align: left;
	margin: 0;
	padding-top:2px;
}

h3{
	color: #4b381e;
	background:#ffea30;
	font-size: 16px;
	font-weight:normal;
	margin: 8px 0 0px 0px;
	border-top: solid 2px #ff7542;
	border-left:solid 4px #ff7542;
	border-bottom:solid 1px #ff7542;
	padding: 3px 0px 2px 3px;
}

img{
	border-style:none;
}

#radio{
	margin-top:16px;
}

#radio ,#radio > td{
	background:#FF7542;
}


#wrap{
	width: 100%;
	position: relative;
	height:auto !important;
	height: 100%;
	min-height: 100%;
	min-height: calc(100% - 80px) ;

}

header{
	width:100%;
	height:96px;
	display:block;
	margin:0 auto;
	padding:0;
	background-image: url("/wordpress/Resource/Header.png");
	background-repeat: repeat-x;
}

#head-content{
	width: 1000px;
	margin: 0 auto;
}

header:after{
	clear:all;
}

nav{
	display: block;
}

#content{
	width:960px;
	height: auto;
	margin:0 auto;
	margin-top:16px;
	padding-bottom:80px;
}

footer:before{
	clear: both;
}

footer{
	width:100%;
	height:80px;
	color:#fff;
	background:#ff7542;
	text-align:center;
	border-top-left-radius:48px;
	border-top-right-radius:48px;
	display: block;
	float: left;
}

footer p{
	margin:0;
}

#footer-menu{
	margin: 0;
}

#footer-menu a, #footer-menu a:visited{
	color:#fff;
	text-decoration:none;
	margin:0 8px;
}
#footer-menu a:hover{
	text-decoration:underline;
}

#footer-copy{
	width:100%;
}


#english{
	display: inline;
	font-size:0.8em;
}

#primary-navigation{
	width:100%;
	height: 40px;

	background:#12820a;
	margin-bottom: 19px;
}

.nav-menu{
	width:990px;
	height:40px;
	display:block;
	margin: 0 auto;
}

.page_item{
	width:auto;
	height:40px;
	display:block;
	float: left;
	border-left:solid 1px #0d5907;
	border-right:solid 1px #0d5907;
	text-align: center;
	transition: 0.2s;
}
/*
.page_item{
	font-size: 14px;
	width:164px;
	height:32px;
	display:block;
	float: left;
	border-left:solid 1px #284682;
	border-right:solid 1px #284682;
	text-align: center;
	padding-bottom:12px;
	transition: 1.0s;
}
*/
.mobile-only{
	display: none;
}

.page_item > a{
	color: #fff;
	text-decoration: none;
	display: block;
	text-align: left;
	padding: 10px 16px;
	width: 100%;
	height: 32px;
	padding-top: 8px;
}

.page_item:hover{
	background: #fff;
}

.page_item > a:hover{
	color: #12820a;
}

/* 個別 */

/* インフォメーション / オンエアスケジュール */

article{
	display: block;
	min-height:160px;
	background: #fffad3;
	border-right: solid 2px #4b381e;
	border-bottom: solid 2px #4b381e;
	box-shadow:4px 0 4px rgba(0,0,0,0.2);
	margin-top: 0;
	margin-bottom: 32px;
}

article > p{
	margin-top: 0;
	padding-top: 0;
	margin-left: 16px;
	margin-right:4px;
}

.article-title{
	display: inline;
}

.article-date{
	display: inline;
	font-size:0.8em;
}


/* 番組表 / パーソナリティ */


#select-date{
	width: 1000px;
	margin: 8px 12px;
	margin-bottom: 48px;
}

#select-date div{
	width: 131.5px;
	padding: 2px 0;
	background: #fffad3;
	border: solid 1px #FF7542;
	float: left;
	text-align: center;
	transition:0.5s;
}

#select-date div:hover, .personality:hover{
	background: #ffb187;
	border: solid 1px #ffb187;
}

#select-date .active:hover{
	background: #FF7542;
}


#select-date .active{
	width: 131.5px;
	padding: 2px 0;
	background: #FF7542;
	float: left;
	text-align: center;
}

#select-date .active a{
	color: #fff;
}

#select-date div a{
	width: 100%;
	padding: 2px 0;
	display: block;
	text-decoration: none;
	color: #333;
}

.time{
	font-size: 32px;
	width:54px;
	color: #FFF;
	background: #FF7542;
	text-align: right;
	margin-right:10px;
}

.timetable{
	background:#FFF;
	width: 910px;
}

.timetable p{
	margin-left: 16px;
}

.wrap_personality{
	width: 100%;
	height: auto;
	background:#fffad3;
	padding-bottom:128px;
	margin:0 auto;
}

.personality-row{
	width: 100%;
	height: 90px;
	margin:0;
	margin-bottom: 0px;
}

.personality-row:after{
	clear: all;
}

.personality{
	width : 200px;
	height: 75px;
	margin: 15px 19px 0px 19px;
	float: left;
	border:solid 1px #ff7542;
	background: #fffad3;
	text-align: center;
	transition:0.5s;
}

.personality a{
	color: #333;
	text-decoration: none;
	width: 100%;
	height: 48px;
	padding: 24px 0 10px 0;
	display: block;
	margin: 0;
	float: left;
}

.personality > img{
	float: left;
	margin: 16px;
}
.personality > div{
	width: 100%;
	height:48px;
	float: left;
	font-size:24px;
	text-align: center;
}

.wrap-profile{
	width : 90%;
	height: 700px;
	margin: 16px auto;
}

#month{
	font-size: 48px;
	margin: 12px;
}

.profile{
	width : 800px;
	height:100%;
	margin:16px;
}

.profile img{
	margin-top: 32px;
}

.profile p{
	width: 90%
}

/* トップページ */

/* トップの全てのカラムを覆う要素 */
.container{
	width: 1000px;
	height: auto;
	overflow: auto;
	margin: 4px auto 0 auto;
}

.container:after{
	clear: both;
}

/* 期間限定で差し替えるコンテンツ関連 */

#limited-content{
	width: 100%;
	margin-bottom:10px;
}

#limited-content > a{
	display: block;
	width: 100%;
}

/* トップ中央カラムインフォメーション関連 */

#label-information{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	font-weight: bold;
}

#home-content{
	width:500px;
	height:auto;
	margin:0 15px 32px 23px;
	float: left;
}

.home-articles{
	width: 500px;
	min-height: 182px;
	height: auto;
	font-size: 12px;
}

.home-articles h3{
	margin-bottom: 0;
	padding-bottom: 0;
}

.home-articles > p{
	margin-top: 0;
	padding-top: 0;
	margin-left: 128px;
	margin-right:4px;
	float: right;
	position: relative;
}

.isImg{
	width: 325px;
}

.notImg{
	width: 490px;
	margin-left:16px;
}

.home-articles p img{
	width: 150px;
	height: auto;
	display: block;
	margin-top: 16px;
	position: absolute;
	left: -160px;
	top: 0;
}

.read-more{
	float: right;
	text-align:right;
	margin:0;
	margin-top:-1em;
	margin-right:16px;
}

#onair-main{
	width: 650px;
	float: left;
	height: auto !important;
	margin-top:12px;
	margin-right: 50px;
}

#onair-main{
	height: 100%;
	/* background: #FFF5B2 !important; */
	background: #FF7542 !important;
}


#onair-backnumber{
	float: left;
	width: 250px;
	min-height: 250px;
	margin-top:12px;
	height: auto;
	background: #fffad3;
	border-right: solid 2px #4b381e;
	border-bottom: solid 2px #4b381e;
	box-shadow:4px 0 4px rgba(0,0,0,0.2);
}

.schedules{
	width: 548px;
	min-height: 64px;
	height: auto;
	float: left;
	text-align: left;
	padding-bottom: 32px;
}

.schedules pre{
	margin: 0;
}

.sch-type-A, .sch-type-B{
	width: 548px;
	padding: 0;
	padding-bottom: 32px;
	border-top: solid 1px #FF7542;
}

.onair-date{
	width:90px;
	padding-left:10px;
	padding-top: 16px;
	height: 100%;
	float:left;
	font-size:32px;
	color: #fff;
	line-height: 1;
}

.onair-date:nth-child(odd){
	border-top: solid 1px #fffad3;
}

.onair-date:nth-child(even){
	border-top: solid 1px #fffad3;
}


.onair-date:first-child{
	border-top: solid 1px #FF7542;
}


/* odd evenで対応でき無さそうなので無理やりだけど */
#onair-main hr{
	height: 1px;
	background: #ff7542;
	border: none;
}


#onair-backnumber h3{
	margin: 0;
	padding: 0;
}

.article-nav{
	background:#fffad3;
	width:308px;
	margin:8px auto;
	border:#ff7542 solid 1px;
	text-align: center;
}

.article-nav a{
	margin: 0 22px;
}


/* トップページ左右カラム */
.custom-side{
	width:250px;
	height:980px;
	margin:0;
	float: left;
}

.side-left{
	width:200px;
}

.custom-side h2{
	margin-bottom:8px;
}

.custom-side > div{
	width: 100%;
	margin: 0;
	margin-bottom:8px;
}

#kiku-PC{
	width:100%;
	height: 150px;
	text-align:right;
	position: relative;
}

#kiku-mobile{
	display: none;
}

.sns{
	width:50px;
	height:50px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.sns img{
	width :100%;
	height:100%;
}

.sns a{
	width: 100%;
	height: 100%;
	display: block;
}

#kikujiro{
	position: absolute;
	right: 0;
}

.phone{
	display: none;
}

#now-on-air, 
#smile-again-project, 
#now-month-powerplay, 
#weekly-chart{
	border:solid 2px #ff427e;
	width: 100%;
	height: auto;
	margin-bottom:32px;
	background: #fffad3;
	box-shadow:4px 0px 4px rgba(0,0,0,0.2);
}

#smile-again-project h2{
	line-height: 2em;
	font-size: 15px;
}

#smile-again-project .glyphicons{
	margin-bottom: -2px;
}

#now-month-powerplay{
	position: relative;
}

#weekly-chart > div{
	border-top: solid 1px #ff7542;
}

#weekly-chart > div > table > tbody > tr{
	display: table;
	margin: 0;
	padding: 6px 0;
	width: 100%;
	height:auto;
	border-bottom: solid 1px #ff7542;
}

#weekly-chart > div > table > tbody > tr:nth-child(5){
	border-bottom:none;
}

#weekly-chart > div > table > tbody > tr:nth-child(even){
	background: #feef90;
}

#smile-again-project p{
	font-size: 14px;
}

/* トップページ下部の色々 */

.widget{
	width:320px;
	height:110px;
	float: left;
}

.three-columns{
	width:320px;
	height:auto;
	float: left;
}

.three-columns > div{
	width: 100%;
	margin-bottom: 16px;
}

.three-columns img{
	width:300px;
	height:100px;
}


/* 画面幅を狭めたPCブラウザ / タブレットなど */

@media screen and (max-width: 600px) {
	/* Android, iPhone用 */

	#primary-navigation, .nav-menu{
		width:100%;
		margin: 0;
		padding: 0;
		letter-spacing:0;
	}

}

/* スマートフォン用 */

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

	.phone{
		display: block;
	}
	
	
	div{
		margin: 0;
	}
	#primary-navigation, .nav-menu{
		width:100%;
		height: 214px;
		margin: 0;
		padding: 0;
		letter-spacing:0;
		font-size: 22px !important;
	}

	.nav-menu > .page_item{
		width:100%;
		height:32px;
		display:block;
		background:#12820a;
		border-bottom:solid 1px #ccc;
	}
	
	.page_item{
		margin:0;
		padding:0;
		width:100%;
		transition: 1.0s;
	}

	.page_item > a{
		color: #fff;
		text-decoration: none;
		display: block;
		width: 100%;
		height: 100%;
		padding: 4px 0;
	text-align: center;
	}

	#home-content{
		margin: 0 !important;
		padding:0;

	}

	#content{
		width:100%;
	}

	header{
		width: 100%;
		margin: 0;
	}

	#head-content, #head-content *{
		width: 100%;
	}

	footer{
		height: auto;
		position: static;
	}

	#footer-menu > p > a{
		display: block;
	}

	h1, h2{
		width:100%;
		height:32px;
		padding:0;
		margin: 0 auto;
		font-size: 16px;
		text-align: center;
	}

	pre{
		width: 320px;
		font-size: 14px;
	}

	#head-content{
		position: relative;
	}

	.sns{
		position: absolute;
		top: 0;
		right: 0;
	}

	.container{
		width: 100%;
		margin: 0px auto 0 auto;
	}


	#home-content, .custom-side{
		width: 100%;
		height: auto;
		margin: 0;
	}

	.custom-side > div{
		text-align: center;
		margin-top: 0;
		margin-bottom: 0;
		box-shadow: none;
	}


	footer{
		float: left;
	}

	#now-on-air, #weekly-chart{
		width: calc(100% - 4px);
		height: auto;
		font-size: 20px !important;
		text-align: center !important;
		margin: 0;
		margin-top: 0;
	}

	#now-on-air p{
		margin: 2px;
	}

	#smile-again-project, #now-month-powerplay{
		width: calc(50% - 4px);
		float: left;
		box-shadow: none;
		font-size: 12px;
	}

	#now-month-powerplay h2{
		font-size: 14px;

	}

	#twitter-widget{
		display: none;
	}

	#label-information > h2, #label-information > div{
		border:none;
	}

	.three-columns{
		width: 100%;
		height:auto;
		margin: 0 !important;
	}

	.three-columns div{
		width: 100%;
		height:auto;
		margin: 16px 0 !important;
	}


	.three-columns div img{
		width: 100% !important;
		height:auto;
		margin: 4px 0;
	}

	article{
		width: 100%;
		margin: 0;
	}

	h3{
		margin-top:0;
		border: 0;
	}

	* {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.wrap_personality{
		margin: 0;
		padding: 0;
	}
	
	.personality-row{
		margin: 0;
		padding: 0;
		height : 300px;
	}

	.personality{
		width : 85%;
		height:50px;
		margin:10px 3%;
		float: left;
	}

	.personality > div{
		font-size:18px;
	}

	.profile{
		width: 320px;
	}

	#kiku-PC{
		display: none;
	}

	.mobile-only{
		display: block;
	}

	.page_item:hover{
		background: #12820a;
	}

	.page_item > a:hover{
		color: #fff;
	}

	/* オンエアスケジュール関連 */

	#onair-main, 
	#onair-backnumber, 
	.schedules{
		margin: 0;
		width: 100%;
		border-right: 0;
	}

	/* オンエアスケジュール関連 */


	/* 番組表関連 */

	#select-date{
		margin-left: 24px;
	}

	#select-date div, 
	#select-date .active{
		width:48px;
	}

	/* 番組表関連 */

	.home-articles{
		width: 100%;
		height: auto;
		min-height: 160px;
		padding-bottom: 80px;
	}

	.home-articles p img{
		width: 150px;
		height: auto;
		display: none;
		margin-top: 16px;
		position: absolute;
		left: -150px;
	}

	.home-articles  p{
		width: 100% ;
		margin:0 !important;
		padding:0;
		float: right;
		position: relative;
	}

	.isImg{
		width:100% !important;
	}


	notImg{
		width: 100%;
	}

	#netradio{
		margin: 16px 0;
	}
}

@media screen and (max-width: 400px) {
	/* iPhone用 */
	.phone{
		display: block;
	}
	
	.phonenone{
		display: none;
	}

	#head-content img{
		width: 100%;
	}
	
	h2{
		font-size: 12px !important;
	}

	/* 番組表関連 */

	#select-date{
		margin-left: 26px;
	}


	#select-date div, 
	#select-date .active{
		width:36px;
	}

	/* 番組表関連 */

	.home-articles p img{
		width: 150px;
		height: auto;
		display: none;
		margin-top: 16px;
		position: absolute;
		left: -150px;
	}

	.home-articles{
		min-height: 160px;
	}

	.home-articles  p{
		width: 100% ;
		margin:0 !important;
		float: right;
		position: relative;
	}

	.read-more{
		margin-top:0;
	}

	.isImg{
		width:100% !important;
	}


	.wrap-profile,  .profile{
		margin: 0;
		padding:0;
		width: 300px;
		height: auto;
	}
}