@charset "utf-8";
/*/////////////////////////////////////////////////////////////////////////
らじる★らじる プレーヤー、番組詳細
/////////////////////////////////////////////////////////////////////////*/
* { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
html, body { height:100%;}
html { font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif;}
body { font-size:62.5%; line-height:1; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
h1, h2, h3, h4, h5, h6 { font-size:100%;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display:block;}
audio,canvas,progress,video { display:inline-block;}
a,embed,object { outline:none;}
img { border:none; box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}
hr { display:none;}
li { list-style:none;}
a { background-color:transparent; -webkit-text-decoration-skip:objects;}

/*common
//////////////////////////////////////////////////////*/
body {
	color:#262626; letter-spacing:0.02em; min-width:320px;
	background:#d2d2d2;
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
	-webkit-tap-highlight-color:transparent;
}
a { color:#262626; text-decoration:none; -webkit-transition:all 0.15s 0s ease; transition:all 0.15s 0s ease;}
#container,#container_player,#container_caution { font-size:13px; text-align:left;}

/*タイトル*/
#header { height:50px; background:#fff;}
#header a{cursor:pointer;}
#header h1 { position:relative;}
#header h1 a {
	display:block; width:135px; height:50px;
	text-indent:110%; white-space:nowrap; overflow:hidden;
	}
	#header h1 a:before {
		content:' '; display:block;
		width:96px; height:34px;
		background:url(../img/parts_listen.png) no-repeat -105px -70px;
		background-size:300px auto;
		position:absolute; top:3px; left:18px;
	}
	#header h1 a:after {
		content:' '; display:block;
		width:97px; height:13px;
		background:url(../img/parts_listen.png) no-repeat 0 -140px;
		background-size:300px auto;
		position:absolute; bottom:0; left:0;
		border-radius:0 5px 0 0;
	}
	#header h1 a:hover:after { background-position:0 -155px;}

/*コピーライト*/
#footer { text-align:center; background:#d2d2d2;}
#footer .inner {
	text-align:left; height:20px;
	text-indent:110%; white-space:nowrap; overflow:hidden;
	background:url(../img/parts_listen.png) no-repeat center -170px;
	background-size:300px auto;
}

/*
================
プレーヤー
================
*/

/*放送局選択*/
#selectArea { position:relative; z-index:5;}
#selectArea .inner { display:table; position:absolute; top:-51px; right:0;}
	#selectArea .inner h2 {
		display:table-cell; vertical-align:middle;
		padding:3px 6px 0; font-size:12px; font-weight:normal;
	}
	#selected { display:table-cell; vertical-align:middle;}
	#selected a {
		display:block; height:39px; line-height:40px;
		min-width:110px; min-width:80px\9;
		font-size:19px; background:#eee;
		padding-left:38px;
		position:relative;
	}
	#selected a:before {
		content:""; display:block; width:11px; height:11px;
		border-bottom:1px solid #a4a4a4; border-right:1px solid #a4a4a4;
		position:absolute; top:50%; left:14px; margin-top:-9px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg);
	}
#selector { position:absolute; top:-51px; right:0; display:none;}
	#selector a {
		display:block; height:39px; line-height:39px;
		min-width:110px; min-width:90px\9;
		font-size:19px; color:#fff; text-align:center;
		background:#333;
	}
	#selector .this a,#selector .this a:hover { background:#575757;}
	#selector a:hover { background:#404040;}
.r1 .nol_audio_player iframe,
.r2 .nol_audio_player iframe,
.fm .nol_audio_player iframe{height:100px;}
.r1 .nol_audio_player iframe.flashls,
.r2 .nol_audio_player iframe.flashls,
.fm .nol_audio_player iframe.flashls{height:83px;}
.od .nol_audio_player{min-height:100px;}

/*選局*/
#selectChannel { background:#eee;}
#selectChannel ul { display:table;}
#selectChannel li { display:table-cell; width:80px; vertical-align:middle;}
#selectChannel li a {
	display:block; width:80px; height:69px;
	text-indent:110%; white-space:nowrap; overflow:hidden;
	position:relative;
	}
	#selectChannel li.r1 a { background-color:#c7000a;}
	#selectChannel li.r2 a { background-color:#22943a;}
	#selectChannel li.fm a { background-color:#f18e2b;}
	#selectChannel li.kako a { background-color:#2a6fbd;}
		#selectChannel li.r1 a:hover { background-color:#e41722;}
		#selectChannel li.r2 a:hover { background-color:#28aa43;}
		#selectChannel li.fm a:hover { background-color:#ff9b38;}
		#selectChannel li.kako a:hover { background-color:#2e7fdb;}
			.r1 #selectChannel li.r1 a:hover { background-color:#c7000a; cursor:default;}
			.r2 #selectChannel li.r2 a:hover { background-color:#22943a; cursor:default;}
			.fm #selectChannel li.fm a:hover { background-color:#f18e2b; cursor:default;}
			.od #selectChannel li.kako a:hover { background-color:#2a6fbd; cursor:default;}
#selectChannel li a:before {
	content:""; display:block;
	width:65px; height:65px;
	background:url(../img/parts_listen.png) no-repeat;
	background-size:300px auto;
	position:absolute; top:50%; left:50%;
	margin:-32.5px 0 0 -32.5px;
	}
	#selectChannel li.r1 a:before { background-position:0 0;}
	#selectChannel li.r2 a:before { background-position:-70px 0;}
	#selectChannel li.fm a:before { background-position:-140px 0;}
	#selectChannel li.kako a:before { background-position:-210px 0;}

/*再生・停止・音量*/
#playerTitle { color:#fff; padding:14px 12px 10px;}
#playerTitle h2 { font-size:19px; line-height:1.2;}
	.r1 #playerTitle { background:#c7000a;}
	.r2 #playerTitle { background:#22943a;}
	.fm #playerTitle { background:#f18e2b;}
	.od #playerTitle { background:#2a6fbd;}
	.od #playerTitle h2 span{font-size:14px;display:block;margin-bottom:4px;}

/*コネクションエラー*/
#c_error { position:relative; display:none;}
#c_error .inner { position:absolute;top:-110px; width:100%;}
#c_error .inner2 {
	height:100px; background:#3e45a8;
	text-align:center; color:#fff;
	border:solid 4px #ff0; border-radius:10px;
	padding:17px 12px 12px; margin:0 12px;
	}
#c_error .heading { font-size:16px; color:#ff0; font-weight:bold; padding-bottom:14px;}
#c_error .link1 a {
	display:block;background:#fff; color:#ee3109;
	border-radius:15px;
	font-size:14px; font-weight:bold;
	margin:0 12px 6px; padding:6px;
	}
	#c_error .link1 a:hover { background:#ee3109;color:#fff;}
#c_error .link2 a { font-size:14px; color:#fff; text-decoration:underline;}
	#c_error .link2 a:hover { text-decoration:none !important;}

/*Flashプラグイン*/
#f_error { position:relative; display:none;}
#f_error .inner { position:absolute;top:-110px; width:100%;}
#f_error .inner2 {
	padding:10px 6px; background:#333; margin:0 12px;
	height:100px; color:#fff;border:solid 3px #fff;
	text-align:center;border-radius:10px;
}
#f_error p {}
#f_error p span { display:block;font-size:10px;color:#999;text-align:center;}
#f_error .heading { font-size:16px; color:#fff; font-weight:bold; padding-bottom:6px;}
#f_error .link1 { padding-bottom:4px;}
#f_error .link2 a { font-size:14px; color:#fff; text-decoration:underline;}
	#f_error .link2 a:hover { text-decoration:none !important;}

/*アプリ誘導*/
#s_error { position:relative; display:none;}
#s_error .inner { position:absolute;top:-110px; width:100%;}
#s_error .inner2 { padding:12px; background:#fff; margin:0 12px; height:100px; color:#fff;text-align:center;border-radius:10px;}
#s_error .heading { font-size:16px; color:#333; font-weight:bold; padding-bottom:12px;}
#s_error .link1 a {
	display:block;background:#ee3109; color:#fff; border-radius:10px;
	font-size:14px; font-weight:bold; line-height:1.35;
	margin:0 12px 6px;padding:6px;
	}
	#s_error .link1 a:hover { background:#333;color:#fff;}

/*番組タイトル*/
#container_player { background:#fff;}
#title { color:#fff; font-weight:bold; padding:10px 12px 16px;}
	.r1 #title { background:#a90009;}
	.r2 #title { background:#17812e;}
	.fm #title { background:#db7b1b;}
	.od #title { background:#1e5fa9;padding-top:14px;}
#title #time { margin-bottom:8px; opacity:0.7;}
	.od #title #time { margin-bottom:0; opacity:1;}
	.od #title #time .expired{
		display:inline-block;margin:5px 0 0;
		background:#ecf4fd; color:#c10015;
		padding:3px 8px 2px;
	}
#title h3 { font-size:18px; line-height:1.35;}
	.od #title h3 {margin-bottom:8px;}

#fukidashi { width:100%; height:9px; position:relative;}
#fukidashi span {
	display:block; width:0; height:0;
	position:absolute; top:-9px; left:50%; margin-left:-5px;
	border:5px transparent solid;
	border-bottom-color:#fff;
	border-width:0 5px 9px 5px;
}

/*番組情報*/
#detail,
#relations,
#setSNS { background:#fff;}

/*番組詳細*/
#detail { overflow:auto; height:200px; -webkit-overflow-scrolling:touch;}
	.od #detail{height:130px;}
#detail .inner { line-height:1.5; padding:12px 12px 0 12px;}
	#detail .inner img {
		display:block; width:50%; max-width:260px;
		width:192px\9; height:108px\9;
		float:right; margin:0 0 0 10px;
	}
	#detail .inner img.only {
		display:block; width:250px; max-width:250px;
		width:245px\9; height:auto\9;
		float:none; margin:0 auto;
	}
	#detail .inner .optional img {
		margin:0 auto 10px;float:none;
	}
	#detail .inner:after { content:""; clear:both; display:block;}
	#detail p{font-size:110%;}
.nhktext { padding:10px 0;}
.nhktext a { text-decoration:underline;}
.nhktext a:hover { text-decoration:none;}
	.r1 .nhktext a { color:#c7000a;}
	.r2 .nhktext a { color:#22943a;}
	.fm .nhktext a { color:#f18e2b;}

/*sns*/
#setSNS { text-align:center; padding-bottom:10px;}
	#ODcontents #setSNS {padding:7px 0 5px;}
.nhk-snsbtn,
.nhk-snsbtn ul.nhksns > li { margin:0 !important;}
.nhk-snsbtn ul.nhksns > li a {
	display:inline-block; width:32px; height:32px;
	vertical-align:top; border-radius:8px;
	margin:0 5px; position:relative; overflow:hidden;
	}
	.nhk-snsbtn ul.nhksns > li.nhksns-twitter a { background:#6bace9;}
	.nhk-snsbtn ul.nhksns > li.nhksns-facebook a { background:#3b5998;}
	.nhk-snsbtn ul.nhksns > li a img { display:block; position:absolute;}
	.nhk-snsbtn ul.nhksns > li.nhksns-twitter a img { width:28px; height:28px; top:1px; left:2px;}
	.nhk-snsbtn ul.nhksns > li.nhksns-facebook a img { width:23px; height:23px; top:3px; left:2px;}

/*番組サイト*/
#relations { padding:5px 12px;}
#relations .inner { display:table; width:100%;}
#relations div { display:table-cell;vertical-align:middle;text-align:center;}
#relations div a {
	display:block; width:96%; color:#fff;
	font-weight:bold; border-radius:50px;
	margin:0 auto;
	}
	.r1 #relations div a { background:#c7000a;}
	.r2 #relations div a { background:#22943a;}
	.fm #relations div a { background:#f18e2b;}
		.r1 #relations div a:hover { background:#ae0710;}
		.r2 #relations div a:hover { background:#17812e;}
		.fm #relations div a:hover { background:#db7b1b;}

/*番組表+NOA*/
#bottom { display:table; width:100%; table-layout:fixed;}
	.r1 #bottom { border-top:solid 7px #a90009;}
	.r2 #bottom { border-top:solid 7px #17812e;}
	.fm #bottom { border-top:solid 7px #db7b1b;}

/*番組表*/
#timetable { display:table-cell; width:70px;background:#fff;vertical-align:middle;}
	#timetable a {
		display:block; width:100%; height:75px;
		text-indent:110%; white-space:nowrap; overflow:hidden;
		position:relative; cursor:pointer;
	}
	#timetable a:before {
		content:""; display:block; width:50px; height:55px;
		background:url(../img/parts_listen.png) no-repeat -320px -220px;
		position:absolute; top:50%; left:50%;
		margin:-27.5px 0 0 -25px;
	}
	#timetable a:hover { background-color:#f9f9f9;}

/*NOA*/
#bottom ul { display:table-cell; background:#eee; vertical-align:middle;}
	#bottom li:nth-child(1) { border-bottom:solid 1px #c8c7c6;}
	#bottom li a { display:block; height:37px; padding:0 10px 0 45px; position:relative;}
	#bottom li a:before {
		content:""; display:block; width:30px; height:30px;
		background:transparent no-repeat;
		background-size:300px auto;
		position:absolute; top:50%; left:10px;
		margin-top:-15px;
	}
	#bottom li.r1 a:before,
	#bottom li.r2 a:before,
	#bottom li.fm a:before { background-image:url(../img/parts_listen.png);}
	#bottom li.r1 a:before { background-position:0 -70px;}
	#bottom li.r2 a:before { background-position:-35px -70px;}
	#bottom li.fm a:before { background-position:-70px -70px;}
	#bottom li span {
		display:block; height:37px; line-height:37px;
		white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	}
	/*hover*/
	#bottom li a:hover { color:#fff;}
	#bottom li.r1 a:hover { background-color:#c7000a;}
	#bottom li.r2 a:hover { background-color:#22943a;}
	#bottom li.fm a:hover { background-color:#f18e2b;}
	#bottom li.r1 a:hover:before { background-position:0 -105px;}
	#bottom li.r2 a:hover:before { background-position:-35px -105px;}
	#bottom li.fm a:hover:before { background-position:-70px -105px;}

/*らじるのツイート*/
#radirutweet { background:#4b4741;color:#eee;}
#radiruillust { position:relative;z-index:10;}
	#radiruillust span {
		display:block; width:73px; height:40px;
		background:url(../img/parts_listen.png) no-repeat -205px -70px;
		background-size:300px auto;
		position:absolute; top:-40px; right:0;
	}
	.hls #radiruillust span { background-position:-205px -115px; height:50px; top:-50px;}
#radirutweet .inner { white-space:nowrap; overflow:hidden;line-height:1.1em;}
#radirutweet .inner p { padding:9px 0; height:30px;}
#radirutweet .inner span { color:#ddd; display:inline-block;padding:0 5px;}

/*
================
番組詳細
================
*/
#bangumi #container { background:#fff;}
#channelheading {
	height:59px; color:#fff; font-size:19px; font-weight:normal;
	padding:22px 0 19px 65px; position:relative;
	}
	.r1 #channelheading { background:#c7000a;}
	.r2 #channelheading { background:#22943a;}
	.fm #channelheading { background:#f18e2b;}
	.r1 .nol_audio_player { background:#c7000a;}
	.r2 .nol_audio_player { background:#22943a;}
	.fm .nol_audio_player { background:#f18e2b;}
	.od .nol_audio_player { background:#2a6fbd;}
	.r1 .nol_audio_player iframe { background:#c7000a;}
	.r2 .nol_audio_player iframe { background:#22943a;}
	.fm .nol_audio_player iframe { background:#f18e2b;}
	.od .nol_audio_player iframe { background:#2a6fbd;}
	#channelheading:before {
		content:""; display:block; width:51px; height:51px;
		background:transparent no-repeat;
		background-size:300px auto;
		position:absolute; top:4px; left:5px;
	}
	.r1 #channelheading:before,
	.r2 #channelheading:before,
	.fm #channelheading:before { background-image:url(../img/parts.png);}
	.r1 #channelheading:before { background-position:-175px -420px;}
	.r2 #channelheading:before { background-position:-230px -420px;}
	.fm #channelheading:before { background-position:-210px -350px;}
#homepage { background:#fff;padding:5px 0;}
#homepage a {
	display:block; width:85%; height:24px; line-height:24px; color:#fff;
	border-radius:50px; text-align:center; cursor:pointer; margin:0 auto;
	}
	.r1 #homepage a { background:#c7000a;}
	.r2 #homepage a { background:#22943a;}
	.fm #homepage a { background:#f18e2b;}
	.od #homepage a { background:#2a6fbd; padding-left:16px; padding-right:16px;}
		.r1 #homepage a:hover { background:#ae0710;}
		.r2 #homepage a:hover { background:#17812e;}
		.fm #homepage a:hover { background:#db7b1b;}
		.od #homepage a:hover { background:#1e5fa9;}
#bpic { text-align:center;background:#e6e6e6;}
	#bpic img { display:block; margin:0 auto;width:100%;height:auto\9;width:100%\9;}
#detailinner {
	height:240px; background:#fff;
	overflow:auto; -webkit-overflow-scrolling:touch;
	margin-bottom:5px;
	}
	#detailinner #time { margin-bottom:8px;padding:14px 12px 0;}
	.r1 #detailinner #time { color:#ae0710;}
	.r2 #detailinner #time { color:#17812e;}
	.fm #detailinner #time { color:#db7b1b;}
	#detailinner h3 {
		font-size:18px; font-weight:normal; line-height:1.25;
		border-bottom:solid 1px #939494;
		padding:0 12px 12px; margin-bottom:12px;
	}
	#detailinner p { padding:0 12px 20px; line-height:1.5;}
.od p.note{color:#0d5281;text-align:center;padding:5px 0 15px;font-size:90%;}
.od p.note:before{content:'※';}

/*画面幅*/
#container,
#container_caution,
#container_player,
#kakoLayer { max-width:500px; margin:0 auto;}

/*
================
opt
================
*/
#optmessage {
	padding:130px 20px 300px;
	font-size:16px;
	line-height:1.3;
	background:#fff url(../img/optbg.png) center bottom no-repeat;
}
#optmessage .right {
	display:block;
	text-align:right;
	color:#d40012;
	text-decoration:underline;
}
#optmessage .right:hover { text-decoration:none;}
#optmessage .btn {
	display:block;
	background:#e71a1d;
	text-align:center;
	color:#fff;
	border-radius:7px;
	padding:8px;
	text-decoration:none;
	margin:50px 0 0;
}
#optmessage .btn:hover { background:#ae0710;}

/*
================
聴き逃し
================
*/
#ODindex {
	text-align:center;
	background:#2a6fbd;
	vertical-align:top; position:relative;
}
#ODindex a {
	display:block; width:100%; height:100%;
	font-size:16px; color:#fff; padding:18px 0 12px;
	cursor:pointer;
}
#ODindex a:before {
	content:''; display:block; width:70%; height:0; padding-top:62.22%;
	background:url(../img/radiru_sagasu.png) no-repeat;
	background-size:contain;
	margin:0 auto 10px;
}
#ODindex a span {
	display:inline-block; height:36px; line-height:36px;
	padding-right:10px; position:relative;
}
#ODindex a span:after {
	content:''; display:inline-block; width:13px; height:13px;
	background:url(../img/parts.png) no-repeat 0 -20px;
	background-size:200px auto;
	position:absolute; top:50%; right:-10px;
	margin-top:-6px;
}

/*iOSフタ*/
#naCov { text-align:center; padding:0 10px 15px;}
	.r1 #naCov { background:#c7000a;}
	.r2 #naCov { background:#22943a;}
	.fm #naCov { background:#f18e2b;}
	.od #naCov { background:#2a6fbd;}
#naCov .inner {
	display:table; width:100%; table-layout:fixed;
	text-align:center; background:#fff;
	border-radius:10px; padding:10px;
	}
	#naCov .inner .naCov { display:table-cell; vertical-align:top; padding:5px;}
	#naCov .inner .naCov h3 { font-size:13px; opacity:0.8; margin-bottom:6px;}
	#naCov .inner .naCov a {
		display:block; width:100%; height:55px;
		font-size:15px; font-weight:bold; line-height:1.2;
		color:#fff; border-radius:5px;
	}
	#naCov .inner .naCov:nth-child(1) a { line-height:55px;}
	#naCov .inner .naCov:nth-child(2) a { padding-top:9px;}
	.r1 #naCov .inner .naCov a { background:#f32832;}
	.r2 #naCov .inner .naCov a { background:#08cb31;}
	.fm #naCov .inner .naCov a { background:#ffae45;}
	.od #naCov .inner .naCov a { background:#178ff9;}
/*Androidアプリ誘導*/
#appLink { padding:0 10px 0;}
	.r1 #appLink { background:#c7000a;}
	.r2 #appLink { background:#22943a;}
	.fm #appLink { background:#f18e2b;}
	.od #appLink { background:#2a6fbd;}
	#appLink .naCov a {
		display:block; width:100%; height:70px;
		font-size:20px; line-height:72px; color:#fff;
		padding-left:90px; position:relative;
	}
	#appLink .naCov a:before {
		content:""; display:inline-block; width:60px; height:60px;
		background:url(../img/parts.png) no-repeat 0 -106px;
		background-size:200px auto;
		position:absolute; top:5px; left:15px;
	}
	#appLink .naCov a:after {
		content:""; display:block; width:16px; height:16px;
		border-top:3px solid #fff; border-right:3px solid #fff;
		position:absolute; top:50%; right:25px; margin-top:-9px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg);
	}

/*＠media
///////////////////////////////////////////////////////*/
@media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution:2dppx) {
	#timetable a:before { background-position:-105px -110px; background-size:300px auto;}
}

.Windows #relations div a { padding-top:1px}
/*IE11*/
@media all and (-ms-high-contrast:none) {
	::-ms-backdrop , #selected a { padding-top:2px;}
	::-ms-backdrop , #selector a { padding-top:2px;}
	::-ms-backdrop , #ODindex a span:after { margin-top:-7px;}
}
/*Firefox*/
@-moz-document url-prefix(){
	.Windows #selected a { padding-top:1px;}
}
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0){
	.Windows #selected a { padding-top:1px;}
	.Windows #selector a { padding-top:1px;}
	.Windows #ODindex a span:after { margin-top:-7px;}
}
/*Edge*/
@supports (-ms-ime-align:auto) {
	.Windows #selected a { padding-top:1px;}
	.Windows #selector a { padding-top:1px;}
	.Windows #ODindex a span:after { margin-top:-7px;}
}
/*iPad*/
.iPad #homepage a { padding-top:1px;}
.iPad .od #homepage a { padding-top:1px;}

@media screen and (max-device-width:767px){
	#homepage a { padding-top:1px;}
}
@media screen and (max-device-width:320px){
	#naCov .inner { padding:10px 5px;}
	#naCov .inner .naCov h3 { font-size:12px;}
	#naCov .inner .naCov a { font-size:14px;}
}
/*Android*/
.Android #homepage a { padding-top:2px;}
.Android .#bottom li span { padding-top:2px;}
.Android .od #title #time .expired { padding-top:4px; padding-bottom:1px;}