@charset "utf-8";

/* ------------------------------
 common size
------------------------------ */

.nodbanner { margin-top:-15px; margin-bottom:-15px; max-width:85%; } 

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

/* ------------------------------
 basic
------------------------------ */

body {
	background-color: #FDEFE2;
	background-image: url("http://www.nhk.or.jp/audio/image_top/back.jpg");
	background-position:center top;
	background-repeat: no-repeat;
	background-attachment:fixed;

	color: #333333;
	padding : 0px;
	margin : 0px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    *font-size:medium;
    *font:medium;
	font-size:120%;
	}

a:link {
	color: #663399;
}
a:visited {
	color: #FF6633;
}
a:hover {
	color: #6666CC;
}
a:active {
	color: #FF9933;
}

.clearfix {zoom:1;}

.clearfix:after{
    content: "";
    display: block;
    clear: both;}

/* ------------------------------
 form
------------------------------ */

textarea {
width: 300px;
}

/* ------------------------------
 header and navigation
------------------------------ */

#header_main {
	width : 100%;
	}

.header_logo {
	width : 90%;
	height: 73px;
	padding : 15px 0px 0px 0px;
	margin : 0px;
	margin-left: auto;
	margin-right: auto;
}

.header_sns {
	width : 90%;
	height: 50px;
	padding : 15px 0px 0px 0px;
	margin : 0px;
	margin-left: auto;
	margin-right: auto;
}

#navi_back {
	width:94%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	overflow:hidden;
	margin-bottom:15px;
}

.navi_back_center ul {
	overflow:hidden;
}

.navi_back_center li, .navi_back_center a {
	padding-top:6px;
	margin-left:8px;
	margin-right:8px;
	margin-bottom:6px;
	width:160px;
	list-style-type: none;
	float:left;
}

#navi_boxes {
	display:none;
}


/* -------------------------
 container
------------------------------ */

#container {
	clear:both;
	width : 90%;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	}

.main_clm_l {
	width : 100%;
	padding: 0px;
}

.main_clm_r {
	width : 100%;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.clm_l_corner {
	width : 100%;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.clm_r_corner {
	width : 100%;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}

.clm_r_corner h3:first-child {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

.clm_r_corner h3 {
	margin-top: 24px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

.clm_r_corner_level2 {
	width : 100%;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}

.clm_r_corner_level2 h3:first-child {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

.clm_r_corner_level2 h3 {
	margin-top: 24px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

/* -------------------------
 clm_r_corner list
------------------------------ */


.main_clm_r li {
	margin : 5px 0px 0px 0px;
	font-size:85%;
	line-height: 170%;
	list-style-type:none;
}

.clm_r_corner h3 {
	margin-top: 24px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

/* -------------------------
 contents midashi
------------------------------ */

.midashi500 {
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 15px;
	max-width:80vw !important;
}
.midashi220 {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 18px;
}

.main_clm_l h2 {
	font-size: 153.9%;
	line-height: 170%;
	font-weight: bold;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -8px;
	margin-left: 0px;
}

.main_clm_l h3 {
	font-size: 93%;
	line-height: 170%;
	font-weight: bold;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

/* -------------------------
 contents
------------------------------ */

.ccopy {
	color:#F00;
	font-size:123.1%; line-height: 170%; font-weight: bold;
}

.ccopy_2 {
	color:#F00;
	font-size: 93%; line-height: 170%; font-weight: bold;
}

.singlerole_box {
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}

.singlerole_box h3 {
	display:inline;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}

.singlerole_box p {
	display:inline;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}

.bangumiphoto {
	background-color: #FFF;
	border: 1px solid #CCC;
	padding: 5px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.bangumiwaku {
	margin : 0px 0px 5px 0px;
}


/* -------------------------
 textboxes
------------------------------ */

.textbox500 {
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 28px;
	margin-bottom: 32px;
	padding-bottom: 24px;
    border:none;
    border-bottom:dashed 1px #CCC;
}

.textbox500_top {
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 0px;
	padding-bottom: 24px;
    border:none;
    border-bottom:dashed 1px #CCC;
}

.textbox500_end {
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 40px;
}

.textbox500_topandend {
	padding: 0px;
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 40px;
}

.textbox500_kobetsu {
	padding: 0px;
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 32px;
	margin-bottom: 40px;
}

.textbox220 {
	margin : 15px 0px 0px 0px;
	width : 90%;
	margin-left: auto;
	margin-right: auto;
}

.textbox220_top {
	margin : 30px 0px 0px 0px;
	width : 90%;
	margin-left: auto;
	margin-right: auto;
}

.textbox220_end {
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 32px;
}

.textbox220_topandend {
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	margin-bottom: 32px;
}

/* ------------------------------
 font sizes by percent
------------------------------ */

.text077 { font-size:77%; line-height: 170%; }
.text085 { font-size:85%; line-height: 170%; }
.text093 { font-size:93%; line-height: 170%; }

.text100 {
	font-size:100%;
	line-height: 170%;
	margin-bottom: 3px;
}

.text108 { font-size:108%; line-height: 170%; }
.text116 { font-size:116%; line-height: 170%; }
.text123 { font-size:123.1%; line-height: 170%; }
.text131 { font-size:131%; line-height: 170%; }
.text138 { font-size:138.5%; line-height: 170%; }
.text146 { font-size:146.5%; line-height: 170%; }
.text153 { font-size:153.9%; line-height: 170%; }
.text161 { font-size:161.6%; line-height: 170%; }
.text167 { font-size:167%; line-height: 170%; }
.text174 { font-size:174%; line-height: 170%; }
.text182 { font-size:182%; line-height: 170%; }
.text189 { font-size:189%; line-height: 170%; }
.text197 { font-size:197%; line-height: 170%; }

.text077b { font-size:77%; line-height: 170%; font-weight: bold; }
.text085b { font-size:85%; line-height: 170%; font-weight: bold; }
.text093b { font-size:93%; line-height: 170%; font-weight: bold; }

.text093b_red { font-size:93%; line-height: 170%; font-weight: bold; color : red; }

.text100b {
	font-size:100%;
	line-height: 170%;
	font-weight: bold;
}

.text108b { font-size:108%; line-height: 170%; font-weight: bold; }
.text116b { font-size:116%; line-height: 170%; font-weight: bold; }
.text123b { font-size:123.1%; line-height: 170%; font-weight: bold; }
.text131b { font-size:131%; line-height: 170%; font-weight: bold; }
.text138b { font-size:138.5%; line-height: 170%; font-weight: bold; }
.text146b { font-size:146.5%; line-height: 170%; font-weight: bold; }
.text153b { font-size:153.9%; line-height: 170%; font-weight: bold; }
.text161b { font-size:161.6%; line-height: 170%; font-weight: bold; }
.text167b { font-size:167%; line-height: 170%; font-weight: bold; }
.text174b { font-size:174%; line-height: 170%; font-weight: bold; }
.text182b { font-size:182%; line-height: 170%; font-weight: bold; }
.text189b { font-size:189%; line-height: 170%; font-weight: bold; }
.text197b { font-size:197%; line-height: 170%; font-weight: bold; }
.tcgreen { color:#00AA00; }

/* ------------------------------
 float settings
------------------------------ */

.flo_left {
	float : left;
	margin: 4px 12px 6px 6px;
	clear: both;
}

.flo_right {
	float : right;
	margin: 4px 6px 6px 12px;
	clear: both;
}


/* ------------------------------
 nhk footer
------------------------------ */

footer {
}

.nhk_footer {
	width : 94%;
	margin-left : auto;
	margin-right : auto;
    display: block;
	clear : both;
}

.nhk_footer ul {
	padding:0px;
	margin:0px;
	width : 94%x;
	height: 54px;
	list-style-type: none;
}

.nhk_footer li {
	padding:0px;
	margin:0px;
	width : 236px;
	height: 54px;
	text-align: left;
	float : left;
}

.nhk_footer_text {
	claer:both;
	width : 94%;
	margin-left : auto;
	margin-right : auto;
	padding-top: 10px;
	padding-bottom: 30px;
    content: "";
    display: block;
    clear: both;

}

.program_footer_text {
	width : 94%px;
	margin-left : auto;
	margin-right : auto;
	text-align: left;
	padding-top: 15px;
	margin-left:15px;
	padding-bottom: 10px;
}

}

/* ------------------------------------------------------------------------------------------------------------------------------
 media query
----------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 768px){

/* ------------------------------
 basic
------------------------------ */

body {
	background-color: #FDEFE2;
	background-image: url("http://www.nhk.or.jp/audio/image_top/back.jpg");
	background-position:center top;
	background-repeat: no-repeat;
	background-attachment:fixed;
	color: #333333;
	padding : 0px;
	margin : 0px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    *font-size:medium;
    *font:medium;
	}

a:link {
	color: #663399;
}
a:visited {
	color: #FF6633;
}
a:hover {
	color: #6666CC;
}
a:active {
	color: #FF9933;
}

.clearfix {zoom:1;}

.clearfix:after{
    content: "";
    display: block;
    clear: both;}

/* ------------------------------
 header and navigation
------------------------------ */

#header_main {
	margin-left: auto;
	margin-right: auto;
	width : 860px;
	height : 120px;

	}

.header_logo {
	width : 547px;
	height: 73px;
	padding : 30px 0px 0px 0px;
	margin : 0px;
	float: left;
}

.header_sns {
	width : 313px;
	height: 50px;
	padding : 15px 0px 0px 0px;
	margin : 0px;
	float: left;
}

#navi_back {
	width : 100%;
	height : 69px;		
	background-image:url(http://www.nhk.or.jp/audio/image_top/navi_back.jpg);
}

.navi_back_center {
	margin-left: auto;
	margin-right: auto;
	background-image:url(http://www.nhk.or.jp/audio/image_top/navi_back_center.jpg);
	background-repeat:none;
	width : 860px;
	height : 69px;
}

.navi_back_center li, .navi_back_center a {
	display:block;
	list-style-type: none;
	float:left;
}

.nv01 {
	margin-top:17px;
	margin-left:0px;
}

.nv02 {
	margin-top:15px;
	margin-left:29px;
}

.nv03 {
	margin-top:15px;
	margin-left:29px;
}

.nv04 {
	margin-top:16px;
	margin-left:29px;
}

.nv05 {
	margin-top: 16px;
	margin-left: 29px;
}

.nv06 {
	margin-top:16px;
	margin-left:29px;
}


#navi_boxes {
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width : 860px;
	height : 160px;
}

#navi_boxes li, #navi_boxes a {
	display:block;
	list-style-type: none;
	float:left;
}

.nb01 {
	margin-top:0px;
	margin-left:0px;
}

.nb02 {
	margin-top:0px;
	margin-left:15px;
}

.nb03 {
	margin-top:0px;
	margin-left:15px;
}

.nb04 {
	margin-top:0px;
	margin-left:15px;
}

.nb05 {
	margin-top:0px;
	margin-left:15px;
}


/* -------------------------
 container
------------------------------ */

#container {
	width : 860px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	}

.main_clm_l {
	width : 562px;
	float: left;
	margin-top: 16px;
	margin-right: 16px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
}

.main_clm_r {
	width : 282px;
	float: left;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.clm_l_corner {
	width : 560px;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}

.clm_r_corner {
	width : 280px;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}

.clm_r_corner h3:first-child {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

.clm_r_corner h3 {
	margin-top: 24px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

.clm_r_corner_level2 {
	width : 280px;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}

.clm_r_corner_level2 h3:first-child {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

.clm_r_corner_level2 h3 {
	margin-top: 24px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;

}

/* -------------------------
 clm_r_corner list
------------------------------ */


.main_clm_r li {
	margin : 5px 0px 0px 0px;
	font-size:85%;
	line-height: 170%;
	list-style-type:none;
}

.clm_r_corner h3 {
	margin-top: 24px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
}

/* -------------------------
 contents midashi
------------------------------ */

.midashi500 {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 30px;
}
.midashi220 {
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 30px;
}

.main_clm_l h2 {
	font-size: 153.9%;
	line-height: 170%;
	font-weight: bold;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -8px;
	margin-left: 0px;
}

.main_clm_l h3 {
	font-size: 93%;
	line-height: 170%;
	font-weight: bold;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

/* -------------------------
 contents
------------------------------ */

.ccopy {
	color:#F00;
	font-size:123.1%; line-height: 170%; font-weight: bold;
}

.ccopy_2 {
	color:#F00;
	font-size: 93%; line-height: 170%; font-weight: bold;
}

.singlerole_box {
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}

.singlerole_box h3 {
	display:inline;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}

.singlerole_box p {
	display:inline;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}

.bangumiphoto {
	background-color: #FFF;
	border: 1px solid #CCC;
	padding: 5px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.bangumiwaku {
	margin : 0px 0px 5px 0px;
}


/* -------------------------
 textboxes
------------------------------ */

.textbox500 {
	width : 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 28px;
	margin-bottom: 32px;
	padding-bottom: 24px;
    border:none;
    border-bottom:dashed 1px #CCC;
}

.textbox500_top {
	width : 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 0px;
	padding-bottom: 24px;
    border:none;
    border-bottom:dashed 1px #CCC;
}

.textbox500_end {
	width : 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 40px;
}

.textbox500_topandend {
	padding: 0px;
	width : 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	margin-bottom: 40px;
}

.textbox500_kobetsu {
	padding: 0px;
	width : 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 32px;
	margin-bottom: 40px;
}

.textbox220 {
	margin : 15px 0px 0px 0px;
	width : 220px;
	margin-left: auto;
	margin-right: auto;
}

.textbox220_top {
	margin : 30px 0px 0px 0px;
	width : 220px;
	margin-left: auto;
	margin-right: auto;
}

.textbox220_end {
	width : 220px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 32px;
}

.textbox220_topandend {
	width : 220px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	margin-bottom: 32px;
}

/* ------------------------------
 font sizes by percent
------------------------------ */

.text077 { font-size:77%; line-height: 170%; }
.text085 { font-size:85%; line-height: 170%; }
.text093 { font-size:93%; line-height: 170%; }

.text100 {
	font-size:100%;
	line-height: 170%;
	margin-bottom: 3px;
}

.text108 { font-size:108%; line-height: 170%; }
.text116 { font-size:116%; line-height: 170%; }
.text123 { font-size:123.1%; line-height: 170%; }
.text131 { font-size:131%; line-height: 170%; }
.text138 { font-size:138.5%; line-height: 170%; }
.text146 { font-size:146.5%; line-height: 170%; }
.text153 { font-size:153.9%; line-height: 170%; }
.text161 { font-size:161.6%; line-height: 170%; }
.text167 { font-size:167%; line-height: 170%; }
.text174 { font-size:174%; line-height: 170%; }
.text182 { font-size:182%; line-height: 170%; }
.text189 { font-size:189%; line-height: 170%; }
.text197 { font-size:197%; line-height: 170%; }

.text077b { font-size:77%; line-height: 170%; font-weight: bold; }
.text085b { font-size:85%; line-height: 170%; font-weight: bold; }
.text093b { font-size:93%; line-height: 170%; font-weight: bold; }

.text093b_red { font-size:93%; line-height: 170%; font-weight: bold; color : red; }

.text100b {
	font-size:100%;
	line-height: 170%;
	font-weight: bold;
}

.text108b { font-size:108%; line-height: 170%; font-weight: bold; }
.text116b { font-size:116%; line-height: 170%; font-weight: bold; }
.text123b { font-size:123.1%; line-height: 170%; font-weight: bold; }
.text131b { font-size:131%; line-height: 170%; font-weight: bold; }
.text138b { font-size:138.5%; line-height: 170%; font-weight: bold; }
.text146b { font-size:146.5%; line-height: 170%; font-weight: bold; }
.text153b { font-size:153.9%; line-height: 170%; font-weight: bold; }
.text161b { font-size:161.6%; line-height: 170%; font-weight: bold; }
.text167b { font-size:167%; line-height: 170%; font-weight: bold; }
.text174b { font-size:174%; line-height: 170%; font-weight: bold; }
.text182b { font-size:182%; line-height: 170%; font-weight: bold; }
.text189b { font-size:189%; line-height: 170%; font-weight: bold; }
.text197b { font-size:197%; line-height: 170%; font-weight: bold; }
.tcgreen { color:#00AA00; }

/* ------------------------------
 float settings
------------------------------ */

.flo_left {
	float : left;
	margin: 4px 12px 6px 6px;
	clear: both;
}

.flo_right {
	float : right;
	margin: 4px 6px 6px 12px;
	clear: both;
}


/* ------------------------------
 nhk footer
------------------------------ */

footer {
}

.nhk_footer {
	width : 960px;
	height: 54px;
	margin-left : auto;
	margin-right : auto;
	clear : both;
}

.nhk_footer ul {
	padding:0px;
	margin:0px;
	width : 960px;
	height: 54px;
	list-style-type: none;
}

.nhk_footer li {
	padding:0px;
	margin:0px;
	width : 236px;
	height: 54px;
	text-align: left;
	float : left;
}

.nhk_footer_text {
	width : 960px;
	margin-left : auto;
	margin-right : auto;
	text-align: left;
	clear : both;
	padding-top: 10px;
	padding-bottom: 30px;
}

.program_footer_text {
	width : 960px;
	margin-left : auto;
	margin-right : auto;
	text-align: left;
	clear : both;
	padding-top: 15px;
	padding-bottom: 10px;
}

}