/************************************
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
************************************/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
p, h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1.5;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {
    list-style:none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べたときに余白が出てしまわないように*/
img {
　　　vertical-align: top;
　　　font-size:0;
　　　line-height: 0;
}

/************************************
End: html5doctor.com Reset Stylesheet
*************************************/
.program_contents {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif, "ＭＳ Ｐゴシック";
  letter-spacing: 1px;
  line-height: 1.7em;
  color: #333;
  font-size:100%;
}

body{
  background-color:#d8d8d2;
  -webkit-text-size-adjust: 100%;/*文字サイズの自動調整をオフ*/
}

.alt {
	text-indent:-9999px;
	font-size:0px;
	line-height:0;
}

.clear {
	clear:both;
}

.clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;  
    height: 0.1px;  
    font-size: 0.1em;
	line-height: 0;
	clear: both;  
 }

img.logo, img.maindate, img.mainimage_dammy, img.mainimage_sp_dammy, img.thumb_image, img.artistimage {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-khtml-user-select:none;
	-khtml-user-drag: none;
	touch-callout:none;
	user-select:none;
	pointer-events: none;
}

/*///////////////////////*/
/*/////  mainimage  /////*/
/*///////////////////////*/
div.mainimageArea{
	width:100%;
	max-height: 480px;
	background: url(../img/common/mainimage.jpg)top center no-repeat;
	background-size: cover;
	background-color: #d8d8d2;
	position: relative;
}

div.mainimageArea h1 {
	width:100%;
	position: absolute;
	top:29%;
	left:0;
}

div.mainimageArea h1 img.logo{
	width:100%;
	max-width:527px;
	margin:0 auto;
	display: block;
}

div.mainimageArea p {
	width: 100%;
	position: absolute;
	bottom:12%;
	left:0;
}

div.mainimageArea p img.maindate {
	width:100%;
	max-width: 309px;
	margin:0 auto;
	display: block;
}

img.mainimage_dammy{
	width: 100%;
	max-width: 767px;
	margin:0 auto;
	display: block;
}
img.mainimage_sp_dammy{
	width: 100%;
	display: none;
}

@media all and (max-width: 767px) {
div.mainimageArea{ width:100%; max-height: 767px; background: url(../img/common/sp_mainimage.jpg)top center no-repeat; background-size: 100%; background-color: #d8d8d2; }
div.mainimageArea h1, div.mainimageArea p { display:none; }
img.mainimage_dammy{ display:none; }
img.mainimage_sp_dammy{ display:block; }
}


/*//////////////////////*/
/*/////   common   /////*/
/*//////////////////////*/
.program_contents {
	width:100%;
	background-color:#d8d8d2;
}

div.contentsAreaWrapper {
	min-width: 980px;
	background-image:url(../img/common/bg.png);
	background-position:left bottom;
	background-repeat:repeat-x;
	box-sizing: border-box;
}

div#contentsArea {
	width:100%;
	padding-bottom:80px;
	box-sizing: border-box;
}

div.container{
	width:980px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding:30px 0;
	box-sizing: border-box;
	overflow:hidden;
}

div.left_Area {
	width: 660px;
	padding:0 15px;
	float:left;
	box-sizing: border-box;
}

div.right_Area {
	width:300px;
	margin:0 auto;
	padding-right:15px;
	padding-left:5px;
	padding-bottom:70px;
	float:right;
}

div.recta {
	max-width:300px;
	height:250px;
	margin-bottom:20px;
	background-color:#303030;
}

footer .bottom {
	width:100%;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	-webkit-justify-content: center;
	 justify-content: center;
 	-webkit-align-items: center;
	align-items: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
}

footer .bottom {
	background-color:#303030;
	color:#b4b4b4;
}

footer .bottom small {
	font-size:70%;
	font-weight:bold;
	letter-spacing:0.05em;
}

footer .bottom a {
	text-decoration:none;
	color:#b4b4b4;
}

#page-top a {
	display:block;
	text-decoration:none;
}

@media all and (min-width: 768px) {
footer .bottom{height:100px;line-height:1}
#page-top { right:20px; bottom:20px; position:fixed; }
#page-top a { width:111px; height:111px; background:url(../img/common/pagetop.png) no-repeat; text-indent:-9999px; }
}

@media all and (max-width: 767px) {
div.contentsAreaWrapper {width:100%; max-width:767px; min-width:0;}
div.container {width:100%; max-width:767px;}
div.left_Area {width:100%; max-width:767px; padding:0; float:none;}
div.right_Area {width:100%; max-width:300px; padding:0; padding-top:30px; float:none;}
footer .bottom{height:50px;padding-bottom:40px ;line-height:1.5;text-align:center;}
footer .bottom small{padding:0 20px;}
#page-top { width:100%; height:40px; right:0; bottom:0; text-align:center; background-color:#8e8e8e; position:fixed; }
#page-top a { width:100%; height:40px; }
#page-top img { width:100%; width:85px; height:13px; padding-top:13px; margin:auto; display:block;}
}


/*//////////////////////*/
/*/////   contents   /////*/
/*//////////////////////*/
#nextOnAirArea, #introductionArea, #musicArea, #lastOnAirArea, #backnumberArea {
	padding-bottom:20px;
	box-sizing: border-box;
}

div.descriptionArea {
	padding:20px 40px;
	box-sizing: border-box;
}

h2.title {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

h2.title img {
	width: 100%;
	max-width: 660px;
	height: auto;
	display: block;
}

h3 {
	font-size:140%;
	font-weight: 500;
	letter-spacing: 0.05em;
	color:#eb6100;
	margin-bottom:5px;
}

p.des {
	fong-size:90%;
	font-weight: 300;
	line-height: 1.8em;
	padding-bottom:10px;
	box-sizing: border-box;
}

p.orange {
	color:#eb6100;
	font-size:110%;
	padding-bottom:8px;
	margin-left:0px;
	display: block;
	box-sizing: border-box;
}

p.theme {
	font-size:140%;
	font-weight:500;
	letter-spacing: 0.2em;
}

p.artist {
	font-size:120%;
	font-weight: 300;
}

div.movieArea {
	width:100%;
	margin:10px 0;
	position: relative;
	box-sizing: border-box;
}

img.playIcon {
	width:100%;
	max-width:90px;
	top:35%;
	right:40%;
	z-index: 999;
	position: absolute;
}

.viewImage{
  position:relative;
  disply:block;
}

.viewImage:before{
      position:absolute;
      left:0;
      top:0;
      right:0;
      bottom:0;
      background:url("../img/spacer.gif");
      z-index:1;
}

div.thumbArea {
	width: 100%;
	max-width:480px;
	min-height: 60px;
	background-color: #d8e3e1;
	margin:0 auto;
}

img.thumb_image {
	width:100%;
	margin:0;
	padding:0;
	display: block;
}

div.musicLeftArea {
	width:50%;
	float: left;
	padding-right:8px;
	box-sizing: border-box;
}

div.musicRightArea {
	width:50%;
	float: right;
}

img.artistimage {
	width:100%;
	max-width:289px;
	display:block;
}

p.movieTitle {
	font-size:100%;
	font-weight: 300;
	text-align: center;
}

p.movieDate {
	font-size:90%;
	text-align: center;
}

div.slider {
	width:100%;
	max-width:480px;
	margin:0 auto;
}

div.archTextBox {
	margin-top:30px;
	margin-bottom:20px;
}

@media all and (max-width: 767px) {
div.descriptionArea {padding:20px 30px;}
h2.title img {max-width: 767px; }
h3 {font-size:120%; letter-spacing: 0.1em;}
p.orange {font-size:100%;}
div.musicLeftArea {float:none; margin:0 auto; padding-top:10px;}
div.musicRightArea {width:100%; float:none;}
p.theme {font-size:110%;}
p.artist {font-size:100%;}
p.theme, p.artist {text-align:center; line-height:1.4;}
img.artistimage {display:block; max-width:435px; margin:0 auto;}
img.playIcon {width:100%; max-width:80px; top:35%; right:40%;}
p.movieTitle {font-size:100%; font-weight:600;}
p.movieDate {font-size:80%;}

}

/*//////////////////////*/
/*////   archives   ////*/
/*//////////////////////*/
#backnumberArea {
	padding:0 30px;
}

 .accordion {
	 width: 100%;
	 max-width: 480px;
	 margin: 30px auto 20px;
	 list-style-type: none;
	 background: #254e65;
 }

.accordion .link {
	display: block;
	/*padding: 15px 15px 15px 42px;*/
	height: 50px;
	padding-left:45px;
    color: #d6d4d5;
    font-size: 14px;
    font-weight: 100;
	letter-spacing: 0.07em;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li:last-child .link {
    border-bottom: 0;
}

.accordion li i {
    position: absolute;
    top: 15px;
    left: 14px;
    font-size: 16px;
    color: #595959;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion li i.fa-chevron-left {
	content: url(../img/common/arrows.png);
    right: auto;
}

.accordion li .border {
    top: 15px;
	width:1px;
	height: 50px;
	border-right:solid 1px #d6d4d5;
	margin-right:20px;
	display: inline-block;
	box-sizing: border-box;
}

.accordion li p {
	top:12px;
	position: absolute;
	display: inline-block;
}

.accordion li.open .link {
    color: #d6d4d5;
}

.accordion li.open i {
    color: #ccc;
}
.accordion li.open i.fa-chevron-left {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordion li.default .submenu {display: block;}
/**
 * Submenu
 -----------------------------*/
 .submenu {
	 display: none;
	 background: #fff;
	 font-size: 14px;
	 list-style-type: none;
 }

 /*.submenu li {
    border-bottom: 1px solid #ccc;
 }*/

.submenu li:first-child {
	color: #a6a4a5;
	background:#595959;
	padding:10px;
	padding-left:20px;
	font-weight: 100;
	-webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

 .submenu a {
    display: block;
    text-decoration: none;
    color: #303030;
    padding: 12px;
    padding-left: 42px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
 }

 .submenu a:hover {
    background: #ccc;
    color: #FFF;
 }