@charset "utf-8";
/* CSS Document */

/*------------------ #movie #library -----------------*/
#movieTop { padding-top:10%; background:url(../../parts/images/hrbgimg03_s.png) no-repeat top right #06a473; background-size:contain; }
#movieTop .btn { font-weight:bold; }

#movieBlock { background:#06a473; width:95%; margin:0 auto; padding-bottom:2em; }
#movieBlock h3 { font-family:"UD Shin Maru Go Bold JIS2004"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#fff; font-size:16px; line-height:1; padding:0.5em 0; }
#movieBlock .inner { margin:0 auto; padding-bottom:1em; }
#movieBlock #childIframe { width:100%; height:340px; }


/*--iframe内--*/
#video { background:#06a473; }
#video #spHeader { display:none; }
#video #spFooter { display:none; }
#movie { width:auto; max-width:450px; padding:0; margin:0 auto; }
#movie .mov { width:auto; max-width:450px; padding:0; }
#movie .mov div { max-width:450px; max-height:252px; }
.mov embed, .mov video, .mov iframe { width:100%; height:100%; }
#movie .snsbox { position:relative; padding:12px 0 0; }
#movie .snsbox .nhksns img { width:32px; }
#movie .snsbox .nhksns-guide { color:#fff; }
#movie .data { position:relative; padding:6px 0 0; width:auto; min-height:inherit; }
#movie .data .title { display:none; }
#movie .data .program { padding:0; color:#fff; }
#video .spBack { display:none; }
.spTitle { display:none; }
.spHome { display:none; }


#libraryBlock { background:#35b68e; margin:0 auto; padding:0 2.5% 2em 2.5%; }
#libraryBlock h3 { font-family:"UD Shin Maru Go Bold JIS2004"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#fff; font-size:16px; line-height:1; padding:1.5em 0 0.5em 0; }
#libraryBlock li { padding-bottom:1em; margin-bottom:1em; border-bottom:2px solid #93d7c2; }
#libraryBlock li a { display:block; }
#libraryBlock li a:after { content:""; display:block; clear:both; }
#libraryBlock .libImg { width:25%; float:left; }
#libraryBlock .libText { float:right; width:72%; color:#fff; }
#libraryBlock .libImg img { width:100%; }
#libraryBlock .libText h4 { font-family:'UD Shin Maru Go Regular'; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:14px; font-weight:normal; line-height:1.4; }
#libraryBlock .libText p { font-size:13px; margin-top:1em; }



/*------------------ #specialProgram -----------------*/
#specialProgram { background:url(../../parts/images/hrbgimg04_s.png) no-repeat top right #d5eff0; background-size:contain; margin:0 auto; padding:10% 2.5% 2em 2.5%; }
#specialProgram ul { padding-bottom:1em; }
#specialProgram ul:after { content:""; display:block; clear:both; }
#specialProgram li { margin:0 auto; max-width:450px; }
#specialProgram .pic img { width:100%; }
#specialProgram h3 { font-family:"UD Shin Maru Go Bold JIS2004"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:16px; line-height:1; padding-bottom:0.5em; }
#specialProgram h4 { font-family:"UD Shin Maru Go Bold JIS2004"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:16px; line-height:1.4; padding:8px 0 8px; }
#specialProgram a { display:block; }
#specialProgram .time { padding:0 0 8px; font-size:12px; line-height:1.4; }
#specialProgram .time img { margin:0 5px 0 0; width:28px; opacity:1; }
#specialProgram .spText { margin-bottom:1.5em; }
#specialProgram a .btn { font-weight:bold; color:#15a7ac; }
#specialProgram a:hover .btn { background:#4fcdd3; color:#fff; }


/*------------------ #related------------------*/
#related { background:#bbe1f3; padding:1.5em 0 0; }
#related ul { margin:0 auto; padding:0 5px; max-width:520px; }
#related li { float:left; width:50%; }
#related li { box-sizing:border-box; float:left; padding:0 1.5%; width:50%; }
#related li a { display:block; }
#related .logo img { width:100%; }
#related .next { display:block; padding:8px 0 2px; font-size:12px; color:#3287b0; }
#related .title { display:block; padding:0 0 6px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:14px; line-height:1.4; font-weight:bold; }
#related .date { display:block; padding:0 0 20px; font-size:12px; line-height:1.4; }
#related .date img { margin:0 5px 0 0; width:28px; opacity:1; }





@media screen and (min-width: 769px) {
/*--- 表示領域が768pxより大きい ---*/

#movieTop { background:url(../../parts/images/hrbgimg03_b.png) no-repeat top right  #06a473; background-size:contain; padding-top:130px; }

#movieBlock { width:50%; float:left; }
#movieBlock h3 { font-size:30px; padding:0.5em 0; margin-left:0.5em; }
#movieBlock .inner { width:75%; }

#movie .data { padding:10px 0 0; }

#libraryBlock { float:left; width:50%; padding:0 0 2em 0; }
#libraryBlock h3 { font-size:30px; padding:0.5em 0; margin-left:0.5em; }
#libraryBlock ul { width:86%; margin:0 auto; }
#libraryBlock ul li { margin-bottom:1.5em; }
#libraryBlock .libText h4 { font-size:20px; font-weight:normal; }
#libraryBlock .libText p { margin-top:1em; }

#specialProgram { width:100%; background:url(../../parts/images/hrbgimg04_b.png) no-repeat top right #d5eff0; padding:130px 0 2em; }
#specialProgram h3 { font-size:30px; margin-left:0.5em; }
#specialProgram ul { padding:0 1em 1.5em; text-align:center; }
#specialProgram li { box-sizing:border-box; display:inline-block; padding:0 1.8%; width:33%; max-width:inherit; text-align:left; vertical-align:top; }
#specialProgram h4 { font-size:18px; }
#specialProgram .spText { margin-bottom:1em; }
#specialProgram .btn { max-width:520px; }

#related { width:100%; padding:2em 0 1em; }
#related ul { padding:0; max-width:960px; text-align:center; }
#related li { display:inline-block; padding:0 1.8%; width:25%; text-align:left; }
#related .title { font-size:16px; }

}




@media screen and (max-width:420px) {
/*--- スマホ縦サイズ ---*/

#movieBlock #childIframe { height:310px; }

}