@charset "Shift_JIS";

/* ==================================================
	Web Fonts
================================================== */

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);


/* ==================================================
	Style Reset
================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	vertical-align: bottom;
}


/* ==================================================
	Base Setting
================================================== */

body {
	/* ----- ↓ナビゲータ・番組により可変要素（背景） ----- */
	background-color: #fff;
	background-image: url(images/common/bg/bg_pink50.png);
	/* ----- ↑ナビゲータ・番組により可変要素（背景） ----- */
	background-position: center top;
	background-repeat: repeat-x;
	font-family: "Noto Sans JP", serif;
	line-height: 1.5;
	font-size: 87.5%;
	color: #454545;
}
a {
	color: #eb6112;
}
a:hover {
	color: #f5a200;
}
img {
	max-width: 100%;
	max-height: 100%;
}

/* Common Style
---------------------------------------- */
.cf:after { content: ""; display: block; clear: both; }
.clear { clear: both; }

@media screen and (min-width: 679px), print {
	.sp { display: none; }
}


/* ==================================================
	Layout
================================================== */

/* Header
---------------------------------------- */
.header_warp {
	width: 960px;
	margin: 0 auto 20px;
	padding-top: 20px;
}
.header_logo img {
	width: auto;
	height: 30px;
	margin-right: 5px;
}
.header_logo span {
	font-size: 83.3%;
	color: #999;
}
.g_nav_btn {
	display: none;
}

/* Nav
---------------------------------------- */
@media screen and (min-width: 769px) {
.g_nav_wrap {
	position: absolute;
	top: 410px;
	width: 100%;
	background: url(../program_website/images/common/g_nav_bg.png) center top repeat-x;
}
.g_nav_wrap.g_nav_gallety {
	position: static;
	top: auto;
}
.g_nav_inside {
	width: 960px;
	margin: 0 auto;
	padding: 10px 0 13px;
	height: 30px;
}
.g_nav li {
	float: left;
	border-left: solid 1px #b3b3b3;
	text-align: center;
}
.g_nav li:last-child {
	border-right: solid 1px #f2f2f2;
}
.g_nav li a {
	display: block;
	width: 186px;
	height: 30px;
	line-height: 30px;
	border-left: solid 1px #f2f2f2;
	text-decoration: none;
	font-size: 114.2%;
	font-weight: 700;
	color: #4d4d4d;
	transition: color 0.3s;
}
.g_nav li:last-child a {
	border-right: solid 1px #b3b3b3;
}
.g_nav li a:hover {
	color: #eb6112;
}
} /* end PC */

/* radiko------------------------------- */
.g_nav_radiko {
	float: right;
}
.g_nav_radiko li {
	float: left;
	margin-left: 10px;
}
.g_nav_radiko li a {
	display: block;
	box-sizing: border-box;
	width: 180px;
	height: 30px;
	line-height: 30px;
	border-radius: 4px;
	background-position: 10px center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	text-align: center;
	/*font-size: 116%;*/
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.3s;
}
.g_nav_radiko li a:hover {
	opacity: 0.7;
}
.radiko01 a {
	padding-left: 10px;
	background-image: url(../program_website/images/common/g_nav_radiko01.png);
	background-color: #00a7e9;
}
.g_nav_radiko .radiko02 a {
	padding-left: 20px;
	background-image: url(../program_website/images/common/g_nav_radiko02.png);
	background-color: #db143b;
}

/* sns---------------------------------- */
.g_nav_sns {
	display: none;
}

/* Contents
---------------------------------------- */
.contents_wrap {
	width: 920px;
	/*min-height: 1000px;*/
	margin: 0 auto 50px;
	padding: 20px 20px 50px;
	background: #fff;
}


/* Title
---------------------------------------- */
.title_wrap {
	height: 300px;
}
.title_img {
	float: left;
}
.title_lead {
	float: left;
	width: 390px;
	margin: 30px 0 0 30px;
	line-height: 1.83;
	font-size: 116.6%;
}


/* Information
---------------------------------------- */
.info_wrap {
	position: relative;
	box-sizing: border-box;
	width: 860px;
	margin: 0 auto 30px;
	border: solid 3px #b3b3b3;
}
.info_wrap.information {
		margin-top: 100px;
}
.info_title {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5em 0;
	background: #eb6112;
	text-align: center;
	font-size: 114.2%;
	letter-spacing: 0.2em;
	color: #fff;
}
.info_inside {
	box-sizing: border-box;
	/* max-height: 300px; */
	height: auto;
	/* overflow: hidden; */
	padding: 30px 35px;
	/* transition: max-height 0.5s; */
}
.info_wrap .info_inside.opened {
	max-height: 600px;
	/*max-height: calc(500px - 40px);*/
	overflow-y: auto;
}
.info_entry_text {
	/* margin-bottom: 30px; */
}
.info_program {
	margin-bottom: 50px;
}
.info_program_ttl {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: solid 1px #eb6112;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #eb6112;
}
.info_more_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
}
.info_more_btn a {
	display: block;
	box-sizing: border-box;
	width: 120px;
	margin: 0 auto;
	padding: 0.5em 10px 0.5em 0;
	background: url(../program_website/images/common/more_btn_arw.png) 90% center no-repeat #eb6112;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
.info_more_btn a:before {
	content: "もっと見る";
}
.info_more_btn.opened a:before {
	content: "閉じる";
}


/* Photo Gallery
---------------------------------------- */
.photo_wrap {
	clear: both;
	position: relative;
	box-sizing: border-box;
	width: 860px;
	margin: 30px auto 0;
	border: solid 3px #4d4d4d;
}
.photo_title {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5em 0;
	background: #e6e6e6;
	text-align: center;
	font-size: 114.2%;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #4d4d4d;
}
.photo_inside {
	box-sizing: border-box;
	height: auto;
	padding: 30px 35px 10px;
}
.photo_wrap .gallery li {
	float: left;
	width: 190px;
	margin: 0 8px 20px 0;
}
.photo_wrap .gallery li:nth-child(4n) {
	margin-right: 0;
}
.photo_wrap .gallery li img {
	width: 100%;
}


/* Photo Gallery (PhotoDetail)
---------------------------------------- */
.photo_wrap .gallery {
	margin-bottom: 20px;
}
.photo_wrap .gallery .lh140 {
	line-height: 1.4;
}
.photo_wrap .gallery_pager {
	margin-bottom: 30px;
}
.photo_wrap .gallery_pager > * {
	display: inline-block;
	width: 30%;
}
.photo_wrap .gallery_pager #prev { text-align: left; }
.photo_wrap .gallery_pager #next { text-align: right; }
.photo_wrap .gallery .mB10 { margin-bottom: 10px; }
.photo_wrap .gallery .mB20 { margin-bottom: 20px; }
.photo_wrap .gallery .mB30 { margin-bottom: 30px; }
.photo_wrap .gallery .txtCenter { text-align: center; }
.photo_wrap .gallery .txtRight { text-align: right; }


/* Photo Gallery (photo)
---------------------------------------- */
.photo_wrap #photo_area td {
	box-sizing: border-box;
	width: 25%;
	padding: 10px;
	vertical-align: top;
	text-align: left;
}
.photo_wrap #photo_area td img {
	width: 100%;
}


/* Twitter
---------------------------------------- */
.tw_wrap {
	float: left;
	box-sizing: border-box;
	width: 400px;
	height: 470px;
	margin: 0 0 30px 30px;
	border: solid #1da1f2;
	border-width: 0 3px 3px;
}
.tw_title {
	background: #1da1f2;
	text-align: center;
}
.tw_title span {
	display: inline-block;
	height: 40px;
	padding-left: 25px;
	line-height: 40px;
	background: url(../program_website/images/common/g_nav_tw.png) left center no-repeat;
	font-size: 114.2%;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #fff;
}


/* Instagram
---------------------------------------- */
.in_wrap {
	float: right;
	box-sizing: border-box;
	width: 400px;
	height: 470px;
	margin: 0 30px 30px 0;
	border: solid 3px #4d4d4d;
}
.in_title {
	background: #e6e6e6;
	text-align: center;
}
.in_title span {
	display: inline-block;
	height: 40px;
	padding-left: 25px;
	line-height: 40px;
	background: url(../program_website/images/common/g_nav_in.png) left center no-repeat;
	font-size: 114.2%;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #4d4d4d;
}
.in_inside {
	height: 424px;
	overflow-y: scroll;
	background: #4d4d4d;
}
.in_inside ul {
}
.in_inside li {
	float: left;
	width: 30%;
	margin: 2.5% 0 0 2.5%;
}
.in_inside li:nth-child(3n) {
}
.in_inside li img {
	max-width: 100%;
}


/* Facebook
---------------------------------------- */
.fb_wrap {
	float: left;
	box-sizing: border-box;
	width: 400px;
	height: 470px;
	margin: 0 0 30px 30px;
	border: solid 3px #325094;
}
.fb_title {
	background: #325094;
	text-align: center;
}
.fb_title span {
	display: inline-block;
	height: 40px;
	padding-left: 30px;
	line-height: 40px;
	background: url(../program_website/images/common/g_nav_fb.png) left center no-repeat;
	font-size: 114.2%;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #fff;
}
.fb_inside {
	width: auto;
	max-width: 394px;
	height: 424px;
	overflow-y: hidden;
}


/* Blog
---------------------------------------- */
.bl_wrap {
	position: relative;
	float: right;
	box-sizing: border-box;
	width: 400px;
	height: 470px;
	margin: 30px 30px 0 0;
	border: solid 3px #eb6112;
}
.bl_title {
	background: #eb6112;
	text-align: center;
}
.bl_title span {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	font-size: 114.2%;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #fff;
}
.bl_inside {
	height: 424px;
	overflow-y: scroll;
}
.bl_more_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.bl_more_btn a {
	display: block;
	box-sizing: border-box;
	width: 120px;
	margin: 0 auto;
	padding: 0.5em 10px 0.5em 0;
	background: url(../program_website/images/common/more_btn_arw.png) 90% center no-repeat #eb6112;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
.bl_entry_cassette {
	margin-bottom: 30px;
}
.bl_entry_ttl {
	padding: 1em 2em;
	background: #fbdfd0;
}
.bl_entry_body {
	padding: 1em 2em;
}


/* Footer
---------------------------------------- */
.footer_wrap {
	border-top: solid 1px #ccc;
}
.footer_inside {
	width: 860px;
	margin: 10px auto 50px;
	overflow: hidden;
}
.footer_logo {
	float: left;
	height: 40px;
}
.footer_inside address {
	float: right;
	line-height: 40px;
	font-size: 78.5%;
	color: #999;
}


/* ランキング

/******************************************************************
  ranking area setting
*******************************************************************/
.ranking_area_wrap {
	clear: both;
	padding-top: 3em;
}
.ranking_area {
	clear: both;
	border-top:solid 1px #ddd;
	background-color:#FFFFFF;
	padding: 40px 30px;
}
.ranking_area h2 {
	float:left;
	margin-right: 20px;
}
.ranking_area h3 {
	float: left;
	font-weight: bold;
	font-size: 18px;
	margin-top: -3px;
}
.ranking_menu {
	width:auto;
	float:right;
}
.ranking_no1 {
	margin-bottom:20px;
	padding-top: 30px;
}
.ranking_no1_img {
	float:left;
	padding:5px;
	border:1px solid #CCCCCC;
	margin-right:20px;
	margin-left:5px;
	margin-bottom:10px;
}
.ranking_no1_comment {
	float: left;
	width: calc(100% - 127px);
	margin-bottom:10px;
}
.ranking_no1 h5 {
	text-indent:0px;
	font-weight:bold;
	font-size:14px;
	padding:3px 0;
	margin-bottom:5px;
	border-bottom:1px dotted #CCCCCC;
}
.ranking_no1 h5 span.artist {
	padding-left:40px;
	font-weight:normal;
}
table.ranking_tbl {
	width: 100%;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
}

.ranking_tbl th {
	padding: 5px 1px;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	background-color:#EFEFEF;
	font-weight:normal;
	font-size: 80%;
	vertical-align: middle;
	text-align: center;
}
.ranking_tbl td {
	padding: 5px 1px;
	text-align:center;
	vertical-align: middle;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
}
.ranking_tbl td img {
	border:1px solid #CCCCCC;
	float:left;
	margin:10px;
}
.ranking_tbl_gray {
	padding: 5px 1px;
	text-align:center;
	background-color:#EFEFEF;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
}
.ranking_tbl_gray td img {
	border:1px solid #CCCCCC;
	float:left;
	margin:5px 10px;
}
.ranking_tbl td span.ranking_title {
	margin:20px 0;
	float:left;
	/*width:210px;*/
	text-decoration:underline;
}
.date {
	font-size:18px;
	font-weight:bold;
}

/* Basic code - don't modify */
#nav {
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
}
#nav li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}
#nav a {
	display: block;
}
#nav ul {
	display: none;
	position: absolute;
	left: 0;
	margin: 0;
	padding: 0;
}
* html #nav ul {
	line-height: 0;
} /* IE6 "fix" */
#nav ul a {
	zoom: 1;
} /* IE6/7 fix */
#nav ul li {
	float: none;
}
#nav ul ul {
	top: 0;
}
/* Essentials - configure this */

#nav ul {
	width: 80px;
}
#nav ul ul {
	left: 80px;
}
/* Everything else is theming */

#nav {
	height: 23px;
	border-left: 1px solid #666666;
}
#nav li.top {
	background-image: url(images/object/ranking_menu_bg.jpg);
	background-position: 5px top;
	background-repeat: repeat-x;
	height: 21px;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-right: 1px solid #666666;
	font-weight: bold;
	padding: 0 10px;
}
#nav *:hover {
	background-color: none;
}
#nav a {
	color: #666666;
	font-size: 12px;
	padding: 6px;
	line-height: 1;
	text-decoration: none;
}
#nav li.hover a {
}
#nav ul {
	top: 22px;
	border-top: 1px solid #666666;
}
#nav ul li a {
	background-color: #F1F1F1;
	background-image: url(images/object/icon_01.gif);
	background-position: 65px;
	border-right: 1px solid #666666;
	background-repeat: no-repeat;
}
#nav ul a.hover {
	background-color: #CCCCCC;
	background-image: url(images/object/icon_02.gif);
	background-position: 65px;
	background-repeat: no-repeat;
}
#nav ul li.icon_none a {
	background-color: #F1F1F1;
	background-image: none;
	border-right: 1px solid #666666;
	background-repeat: no-repeat;
	text-align: center;
}
#nav ul a.hover {
	background-color: #CCCCCC;
	background-image: url(images/object/icon_02.gif);
	background-position: 65px;
	background-repeat: no-repeat;
}
#nav ul li.icon_none a.hover {
	background-color: #CCCCCC;
	background-image: none;
}
#nav ul a {
	border-left: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-right: none;
	opacity: 0.9;
	filter: alpha(opacity=90);
}
/* #nav ul a { border-bottom: none; } - I also needed this for IE6/7 */