@charset "utf-8";

/*------------  css reset  ------------*/
body { font-family:sans-serif; -webkit-text-size-adjust:100%; color:#392c27; background:#e3ded6; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,figure,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; }
li { list-style-type:none; }
table { border-collapse:collapse; border-spacing:0; }
caption,th { text-align: left; }
q:before,q:after { content:''; }
object,embed { vertical-align:top; }
hr,legend { display:none; }
h1,h2,h3,h4,h5,h6 { font-size:100%; }
abbr,acronym,fieldset { border:0; }
img { border:0; border:none; }
input[type="text"], textarea, input[type="submit"] { -webkit-appearance:none; }

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

a { text-decoration:none; }
a:hover { text-decoration:none; }


/*------------  NHK共通ヘッダ・フッタ  ------------*/
#nhkheader { position:relative; z-index:500; }
#nhkheader #nol_header { border-bottom:1px solid #e3ded6; }
#nhkfooter { position:relative; clear:both; }


/*------------  共通  ------------*/
#wrap { font-size:14px; line-height:1.5; }
#wrap img { vertical-align:bottom; }

.snsbox { line-height:1; }
.snsbox .nhksns { display:block; }
.snsbox .nhksns li img { width:28px; height:28px; }
.snsbox .nhksns-guide { display:block; padding:3px 3px 0; font-size:11px; }


/*------------  ヘッダ  ------------*/
#head { position:relative; background:#fff; z-index:100; }
#head img { vertical-align:bottom; }
#head .headInner { position:relative; max-width:1140px; margin:0 auto; }
#head h1 { position:absolute; top:23px; left:14px; width:160px; }
#head h1 img { width:160px; height:38px; }
#head h1 a { display: block; }
#head h1 a:hover { opacity:0.5; }
#head nav {}
#head nav ul { width:564px; margin:0 auto; padding:2px 0; }
#head nav li { float:left; width:94px; }
#head nav a { display:block; width:78px; height:78px; margin:0 auto; text-indent:-9999px; overflow:hidden; }
#head nav a:hover { opacity:0.5; }
#head nav .nav01 a { background:url(../images/nav01.png) no-repeat center; background-size:78px 78px; }
#head nav .nav02 a { background:url(../images/nav02.png) no-repeat center; background-size:78px 78px; }
#head nav .nav03 a { background:url(../images/nav03.png) no-repeat center; background-size:78px 78px; }
#head nav .nav04 a { background:url(../images/nav04.png) no-repeat center; background-size:78px 78px; }
#head nav .nav05 a { background:url(../images/nav05.png) no-repeat center; background-size:78px 78px; }
#head nav .nav06 a { background:url(../images/nav06.png) no-repeat center; background-size:78px 78px; }

#head .search { position:relative; display:block; width:280px; margin:20px 0 0 25px; background:#fff; border:1px solid #9f928c; line-height:1; }
#head .search .word { font-size:13px; line-height:1.2; width:237px; height:14px; background:#fff; border:0; padding:7px 4px; margin:0; vertical-align:middle; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; box-shadow:none; }
#head .search .searchBtn { position:absolute; right:0; vertical-align:middle; background:#fff; padding:0; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; }
#head .search input[name="search"] { width:32px; height:28px; }
#head .search input[name="search"]:hover { opacity:0.5; }

#head .snsbox { position:absolute; top:12px; right:12px; text-align:right; }

#head .search { display:none; }
#head .btnPrograms { display:none; }
#head .open { display:none; }


/*------------  SNSボタン（スマホ用）  ------------*/
.spsns { display:none; clear:both; }


/*------------  ページトップ  ------------*/
#pagetop { position:fixed; bottom:67px; right:0; width:50px; height:50px; background:#fff; border:1px solid #e3ded6; border-right:none; z-index:2000; }
#pagetop a { display:block; width:50px; height:50px; background:url(../images/btn_pagetop.png) no-repeat; background-size:50px 50px; text-indent:-9999px; overflow:hidden; }
#pagetop a:hover { opacity:0.5; }


/*------------  フッタ  ------------*/
#foot { background:#efeae1; clear:both; }
#foot .inner { max-width:1100px; margin:0 auto; }
#foot ul { padding:15px 30px 30px; }
#foot li { float:left; width:25%; }
#foot li a { display:block; padding:10px 18px; color:#392c27; }
#foot li a:hover { opacity:0.5; }
#foot li img { width:100%; max-width:148px; max-height:34px; }
#foot li h4 { padding:0 0 12px; }
#foot li .txt { font-size:13px; line-height:1.4; }
#foot li .txt span { font-size:11px; }




@media screen and (max-width:980px) {
	#head nav ul { width:504px; margin:0 auto; padding:2px 0; }
	#head nav li { float:left; width:84px; }
}




@media screen and (max-width:920px) {
	
	#head h1 { position:absolute; top:21px; left:14px; width:146px; }
	#head h1 img { width:146px; height:33px; }
	
	#head nav ul { width:408px; padding:2px 0; }
	#head nav li { width:68px; }
	#head nav a { width:68px; height:70px; }
	#head nav .nav01 a { background-size:70px 70px; }
	#head nav .nav02 a { background-size:70px 70px; }
	#head nav .nav03 a { background-size:70px 70px; }
	#head nav .nav04 a { background-size:70px 70px; }
	#head nav .nav05 a { background-size:70px 70px; }
	#head nav .nav06 a { background-size:70px 70px; }
	
	#head .snsbox { top:9px; }
	
	#pagetop { width:46px; height:46px; }
	#pagetop a { width:46px; height:46px; background-size:46px 46px; }
	#pagetop a:hover { opacity:1.0; }
	
	#foot ul { padding:15px 20px 30px; }
	
}




@media screen and (max-width: 740px) {
	
	#head { height:60px; margin:0; }
	#head h1 { position:relative; top:15px; left:13px; width:134px; }
	#head h1 img { width:134px; height:32px; }
	#head .material { display:none; }
	
	#head .btnPrograms { display:block; position:absolute; top:0; right:60px; }
	#head .btnPrograms a { display:block; width:60px; height:60px; background:url(../images/btn_programs.png) no-repeat center; background-size:60px 60px; text-indent:-9999px; overflow:hidden;}
	
	#head .open { display:block; background:#fff; }
	#head .open dt { position:absolute; top:0; right:0; display:block; width:60px; height:60px; z-index:5; }
	#head .open dt span { display:block; width:60px; height:60px; background:url(../images/btn_menu.png) no-repeat center; background-size:60px 60px; text-indent:-9999px; overflow:hidden; cursor:pointer; }
	#head .open dt span.close { background:url(../images/btn_menu_close.png) no-repeat center; background-size:60px 60px; }
	#head .open dd { position:absolute; top:0; display:block; width:100%; background:#fff; }
	
	#head nav { padding:60px 0 0; }
	#head nav ul { width:auto; margin:0 auto; padding:15px 0; border-top:1px solid #e3ded6; }
	#head nav li { float:left; width:16.66%; }
	#head nav a { width:86px; height:82px; }
	#head nav a:hover { opacity:1.0; }
	#head nav .nav01 a { background:url(../images/nav01.png) no-repeat center; background-size:82px 82px; }
	#head nav .nav02 a { background:url(../images/nav02.png) no-repeat center; background-size:82px 82px; }
	#head nav .nav03 a { background:url(../images/nav03.png) no-repeat center; background-size:82px 82px; }
	#head nav .nav04 a { background:url(../images/nav04.png) no-repeat center; background-size:82px 82px; }
	#head nav .nav05 a { background:url(../images/nav05.png) no-repeat center; background-size:82px 82px; }
	#head nav .nav06 a { background:url(../images/nav06.png) no-repeat center; background-size:82px 82px; }
	
	#head .search { display:block; margin:5px auto; }
	
	#head .logo { position:absolute; top:15px; left:13px; width:134px; }
	#head .logo img { width:134px; height:32px; }
	
	#head .subnav { margin:0 auto; padding:15px 15px 20px; border-bottom:1px solid #9f928c; text-align:center; }
	#head .subnav li { float:left; width:20%; }
	#head .subnav li img { width:72px; height:86px; }
	
	#head .snsbox { display:none; }
	
	
	
	.spsns { display:block; padding:0 0 5px; text-align:center; }
	.spsns .snsbox .nhksns li { padding:0 4px; }
	.spsns .snsbox .nhksns li img { width:38px; height:38px; }
	.snsbox .nhksns-guide { padding:8px 0 0; margin:0!important; }
	
	#pagetop { bottom:25px; width:40px; height:40px; }
	#pagetop a { width:40px; height:40px; background-size:40px 40px; }
	#pagetop a:hover { opacity:1.0; }
	
	#foot { display:none; }
	
}



@media screen and (max-width: 500px) {
	
	#head nav ul { width:auto; margin:0 auto; padding:15px 10px; }
	#head nav li { width:33.33%; }
	
	#head .subnav { margin:0 auto; padding:15px 10px; }
	#head .subnav li { width:33.33%; }
	
}