@charset 'utf-8';
/* CSS Document */
body { margin : 0; padding : 0; background-color : #f1e9dc;text-size-adjust : none; -webkit-text-size-adjust : none; }
header , article {font-family : Meiryo, 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif; color : #555; }
article { font-size : 14px; padding : 35px 0 40px;}
article.index { padding : 20px 0 40px; background : #f1e9dc url(../images/article_bg.gif) repeat-x center top;}
article ul , article li , header ul , header li , p , h1 , h2 , h3 , h4 , h5 , h6 {margin : 0;  padding : 0; list-style : none;}
article img , .mainVisual img { vertical-align : top;}
article a {text-decoration : none; color : #f66426; }
article a:hover { text-decoration : underline;}
* html .clearfix { zoom : 1;}
* + html .clearfix { zoom : 1;}
.clearfix:after {display : block; visibility : hidden; clear : both; height : 0; content : '.'; }

/* mainVisual */
.mainVisual {position : relative;min-width : 1360px; max-width : 1920px;  margin : 0 auto; background : url(../images/main_visual_bg.jpg) no-repeat center top; background-size : 100% 510px; }
.visualTxt { position : relative; background : url(../images/txt_bg.png) no-repeat center top;}
.subVisual { position : relative; padding : 44px 0 23px; background : url(../images/top_img.png) no-repeat left bottom;}
.subVisual h1 {position : static;  padding-bottom : 19px; text-align : center;}
.subVisual h1 img { max-width : inherit;}
.mainImg { width : 100%; height : 510px; background : url(../images/main_img.png) no-repeat center bottom;}
.mainImg img { visibility : hidden;}

/* mainBox */
.mainBox {font-size : 16px;width : 980px;  margin : 0 auto; }
.index .text {font-size : 16px; line-height : 1.9; margin-bottom : 37px; text-align : center; }
.index .text span { display : block;}
.index .text a {display : inline-block;  margin-top : 22px; padding-left : 20px; background : url(../images/icon01.png) no-repeat left center;}
.index .inner {overflow : hidden; margin-bottom : 50px; padding : 18px 32px 15px; background-color : #fff; }
.index .inner .genre-list {float : left;width : 228px;  margin : -30px 0 0; }
.index .inner .genre-list li {font-size : 16px; display : inline-block; }
.index .inner .box {float : right; width : 84px; margin-top : -36px; }

.bnrBlock{margin:0 -10px 20px;text-align: center;letter-spacing: -.4em;}
.bnrBlock a{max-width:480px;margin: 0 10px 20px;display: inline-block;letter-spacing: 0;}
.bnrBlock img{width:100%;}

.newsBlock {display : table;  width : 100%; margin-bottom : 19px; background : #fff;}
.newsBlock .txtBlock { display : table-cell; width : 130px; vertical-align : middle; background-color : #c9b184;}
.newsBlock .txtBlock p {font-size : 16px; display : block;  text-align : center; color : #fff;}
.newsBlock .listBlock { display : table-cell; vertical-align : top;}
.newsBlock .listBlock dl {font-size : 14px; line-height : 22px;  padding : 18px 30px;}
.newsBlock .listBlock dl dt { float : left; width : 120px; margin-right : 24px;color : #555;}
.newsBlock .listBlock dl dd { float : left; width : 640px; margin-bottom : 9px;color : #f66426;}
.newsBlock .listBlock dl dd:last-child { margin-bottom : 0;}

.index .voteList { margin-bottom : 20px;}
.index .voteList li {font-size : 15px; line-height : 1.7; position : relative; float : left;  width : 420px; padding : 73px 25px 15px; border-radius : 5px;background-color : #fff; }
.index .voteList li:first-child { margin-right : 40px;}
.index .voteList .ttl { position : absolute; top : -34px; left : -30px; margin-bottom : 15px; text-align : center;}
.index .voteList .date {font-size : 17px; font-weight : bold; line-height : 1.4; margin : 5px 0 18px; }
.index .voteList .date01 { margin : 50px 0 0; text-align : center;}
.index .voteList .btn_orange {font-size : 18px; font-weight : bold; display : block; width : 300px;  margin : 0 auto; margin-bottom : 35px;padding : 13px 0; text-align : center; border-radius : 5px; background-color : #f66426; }
.index .voteList .btn_green {font-size : 18px; font-weight : bold; display : block; width : 300px;  margin : 0 auto; margin-bottom : 35px;padding : 13px 0; text-align : center; color : #fff !important; border-radius : 5px; background-color : #2e9c96; }
.index .voteList .interimReportBtn { position : relative;}

.interimReportImg { position : absolute; top : -22px; right : 0; left : 0; margin : auto;}
.interimReportImg img { width : 192px;}
.btn_green .interimReportImg img { width : 176px;}
.index .voteList .btn_green.interimReportBtn { font-size : 16px; margin-bottom : 5px;}
.voteTopTxt { min-height : 100px;}

.index .periodTxt { text-align : center;}
.index .voteList .btn_orange.interimReportBtn { font-size : 16px; margin-bottom : 5px;}
.index .voteList a { color : #fff !important;}
.index .voteList a:hover {text-decoration : none;opacity : .7;  filter : alpha(opacity=70); }
.index .comBox { margin-bottom : 20px; padding : 23px 35px 25px;}
.index .comBox .comBoxLink{
  display: block; margin: 18px 0 0 0;
}
.index .comBox .photoBox {position : relative; z-index : 10;float : left;  margin-top : -112px; }
.index .comBox .photoBox .photo { margin-bottom : 18px; padding : 6px; background-color : #fff; box-shadow : 2px 1px 3px #999;}
.index .comBox .photoBox p {line-height : 1.5;  padding : 0; text-align : left; border : none;}
.index .comBox .photoBox p span {font-size : 18px; display : block; }
.index .comBox .textBox {float : right; width : 685px; }
.index .comBox .textBox p { font-size : 16px; line-height : 1.7;}
.index .comBox .textBox .title { display : none;}
.index .comBox .txtLink { margin-top : 10px; text-align : right;}
.index .comBox .txtLink a {font-size : 14px;  display : inline-block; padding-left : 17px; background : url(../images/icon02.png) no-repeat left center;}
.index .comBox .txtLink span { display : none;}

.index .interviewBox { margin-bottom : 20px; border-radius : 3px;background-color : #fff; }
.index .interviewBox h3 { padding : 10px 34px 9px; border-radius : 3px 3px 0 0;background : #c9b184; }
.index .interviewBox h3 > img {display : block; width : 207px; }
.index .interviewBox .interviewBoxInner { padding : 20px 35px 22px;}

.interviewBox .interviewBoxInner .interviewItemWrap { width : 100%; margin-bottom : 18px;}
.interviewBox .interviewBoxInner .interviewTxt { font-size : 14px; line-height : 20px; margin-bottom : 12px;}
.interviewBox .interviewBoxInner .interviewItem {float : left;  width : 437px; margin-right : 36px;}
.interviewBox .interviewBoxInner .interviewItem:last-child { margin-right : 0;}
.interviewBox .interviewBoxInner .interviewItem .interviewImg {float : left;  width : 116px; padding : 0 18px 0 0;}
.interviewBox .interviewBoxInner .interviewItem .interviewTxtWrap { float : left; width : 300px;}
.interviewBox .interviewBoxInner .interviewItem .interviewHeading { font-size : 18px; line-height : 24px; margin-bottom : 11px;}
.interviewBox .interviewBoxInner .interviewItem .interviewName { font-size : 14px; line-height : 20px; margin-bottom : 10px;}
.interviewBox .interviewBoxInner .interviewItem .interviewName > span { font-size : 18px;}
.interviewBox .interviewBoxInner .interviewItem .interviewName > span.ib {display: inline-block; font-size : 14px;}
.interviewBox .interviewBoxInner .interviewItem .releaseDate { font-size : 14px; line-height : 20px; display : block; float : right; clear : both; margin-bottom : 8px;}
.interviewBox .interviewBoxInner .interviewItem .txtLink { clear : both;}
.interviewBox .interviewBoxInner .txtLink {font-size : 14px;  display : inline-block; float : right; padding-left : 17px; background : url(../images/icon02.png) no-repeat left center;}

.index .programs { margin-bottom : 20px; padding : 9px 0 25px; border-radius : 3px;background-color : #fff; }
.index .programs h3 { margin-bottom : 24px; padding : 0 34px 6px; border-bottom : 1px solid #c9b184;}
.index .programs h3 img { display : block;}
.index .programs ul { margin-left : 35px; margin-bottom: 30px;}
.index .programs li {line-height : 1.45;float : left; width : 280px;  padding-right : 35px; }
.index .programs span { display : block;}
.index .programs a { color : #555 !important;}
.index .programs .txt { margin-top : 5px;}
.index .programs .ttl {font-size : 18px; font-weight : bold; line-height : 1.35; margin : 12px 0 10px; }
.index .programs .date {line-height : 1.35;position : relative;  padding : 0 0 9px 50px; }
.index .programs .date img { position : absolute; top : 0;left : 0; }
.index .programs a:hover { text-decoration : none;}
.index .programs a:hover img {opacity : .7; filter : alpha(opacity=70); }
.index .list { margin : 10px -35px 25px 0;}
.index .list li {float : left;width : 437px;  margin-right : 35px; }
.index .list a { display : block; overflow : hidden;color : #555 !important; }
.index .list .photo {float : left; margin-top : 4px; }
.index .list .txtBox {float : right;  width : 222px; text-align : left;}
.index .list p {font-size : 14px; line-height : 1.45; margin-bottom : 12px; }
.index .list .title {font-size : 18px; font-weight : bold; line-height : 1.4; margin-bottom : 9px; }
.index .list .date { margin-bottom : 0; text-align : right;}
.index .list a:hover img {opacity : .7; filter : alpha(opacity=70); }
.index .h3Ttl { padding : 9px 35px 7px; border-radius : 5px 5px 0 0;background-color : #c9b185; }
.index .h3Ttl img { display : block;}
.bannerList { margin-top : 40px; margin-bottom : 40px; text-align : center;}
.bannerList li { display : inline-block; width : 300px; margin : 0 10px 10px;}
.bannerList li a img { max-width : 100%;}

.bannerList a:hover {opacity : .7; filter : alpha(opacity=70); }

footer #snsBlock {position : fixed;top : 50%; right : 15px;  width : 32px; }

.sp { display : none;}



@media all and (min-width: 0) and (max-width: 767px) {

  a:hover , a:hover img {opacity : 1 !important; filter : alpha(opacity=100) !important; }
  .sp { display : block;}
  .pc { display : none;}
  img { max-width : 100%;}
  .mainVisual { min-width : inherit; background-size : cover;}
  .mainVisual.index { background : none;}
  .visualTxt { padding : 0; background : none;}
  .subVisual { padding : 16px 0; background-position : -13px bottom; background-size : 36% auto;}
  .subVisual h1 img {display : block; width : auto; max-width : none !important;height : 11px;  margin : 0 auto; }
  .mainImg { height : auto; background : none;}
  .mainImg img {visibility : inherit; width : 100%; }
  article { padding : 15px 17px 20px;}
  article.index { padding : 18px 17px 20px; background-size : 1px 130px;}
  .mainBox { width : auto;}
  .index .text {font-size : 14px; line-height : 1.7; margin-bottom : 23px; text-align : left; }
  .index .text br { display : none;}
  .index .inner { margin-bottom : 50px; padding : 18px 10px 17px;}
  .index .inner .attract-block {float : none; overflow : hidden; zoom : 1;width : auto;  margin-right : 0; }
  .newsBlock {display : block;  margin-bottom : 25px;}
  .newsBlock .txtBlock { display : block; width : 100%; padding : 0 0 0 2.5%; box-sizing: border-box;}
  .newsBlock .txtBlock p {font-size : 18px;  text-align : left;}
  .newsBlock .listBlock { display : block;}
  .newsBlock .listBlock dl {font-size : 12px;line-height : 20px;  padding : 10px 2.5%;}
  .newsBlock .listBlock dl dt { float : none; width : auto; margin-right : 0; margin-bottom : 6px;}
  .newsBlock .listBlock dl dd { float : none; box-sizing : border-box; width : 100%; margin-bottom : 14px;padding : 0 0 0 4%;}
  .newsBlock .listBlock dl dd:last-child { margin-bottom : 0;}
  #search-text {font-size : 15px; line-height : 38px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box;box-sizing : border-box;  width : 100%; height : 38px; }
  .index .inner .attract-block { margin : 12px 0;}
  .index .inner .attract-block ul { line-height : 1.2;}
  .index .inner .attract-block li { font-size : 12px; line-height : 1.2;}
  .index .inner .attract-block h4 {font-size : 12px;float : left;  margin-top : 4px; }
  .index .inner .attract-block ul { float : left;}
  .index .inner .genre-list {float : none; clear : both; width : auto;  margin : 0 0 10px; text-align : center;}
  .index .inner .genre-list li { font-size : 12px;}
  .index .inner .box {float : none; width : auto;  margin-top : 0; text-align : center;}
  .index .inner .box .btn {font-size : 16px;  width : 87px; border-radius : 2px;}
  .voteTopTxt { min-height : auto;}
  .interimReportImg { top : -20%; right : 0;left : 0;}
  .interimReportImg img { width : 126px;}
  .index .voteList { margin-bottom : 17px;}
  .index .voteList .btn_orange { width : 100%;}
  .index .voteList .btn_green { width : 100%;}
  .index .voteList li {font-size : 12px; float : none;  width : auto; height : auto !important;padding : 16% 18px 16px 18px; }
  .index .voteList li:first-child { margin : 0 0 40px;}
  .index .voteList .ttl {left : 0; width : 100%; }
  .index .voteList .ttl img { width : 100%;}
  .index .voteList .date {font-size : 12px; line-height : 1.6; margin : 2px 0 17px; }
  .index .voteList .date01 { margin : 2px 0 15px;}
  .index .voteList .date01 img { height : 27px;}
  .index .voteList .date01 br { display : none;}
  .index .comBox { margin-bottom : 15px; padding : 8px 14px 12px;}
  .index .voteList a {font-size : 15px; font-weight : normal; width : 68%;  padding : 7px 0; border-radius : 2px;}
  .index .comBox .textBox {float : none;width : 100%;  margin-bottom : 10px; }
  .index .comBox .textBox p { font-size : 12px; line-height : 1.5;}
  .index .comBox .textBox .title {font-size : 15px; font-weight : bold; line-height : 1.4;display : block;  margin-bottom : 8px; }
  .index .comBox .photoBox {float : none; overflow : hidden; margin-top : 0; }
  .index .comBox .photoBox .photo {float : left; width : 31%;  margin-bottom : 0; padding : 2px; box-shadow : 1px 0 2px #b9b4aa;}
  .index .comBox .photoBox p {font-size : 12px; line-height : 1.5; margin : 0 0 15px 35.5%; }
  .index .comBox .photoBox p span { font-size : 13px;}
  .index .interviewBox { margin-bottom : 15px;}
  .index .interviewBox h3 { padding : 10px 17px 8px;}
  .index .interviewBox h3 > img { width : 54%;}
  .index .interviewBox .interviewBoxInner { padding : 15px 14px;}
  .btn_green .interimReportImg img { width : 123px;}

  .interviewBox .interviewBoxInner .interviewItemWrap { width : 100%; margin-bottom : 24px;}
  .interviewBox .interviewBoxInner .interviewTxt { font-size : 14px; line-height : 20px; margin-bottom : 12px;}
  .interviewBox .interviewBoxInner .interviewItem {float : none;  width : 100%; margin-right : 0; padding : 10px 0; border-top : 1px solid #ccc;}
  .interviewBox .interviewBoxInner .interviewItem:last-child { margin-right : 0; border-bottom : 1px solid #ccc;}
  .interviewBox .interviewBoxInner .interviewItem .interviewImg {float : left;  width : 27%; padding : 0 3% 0 0;}
  .interviewBox .interviewBoxInner .interviewItem .interviewTxtWrap { width : 70%;}
  .interviewBox .interviewBoxInner .interviewItem .interviewHeading { font-size : 15px; line-height : 22px; margin-bottom : 11px;}
  .interviewBox .interviewBoxInner .interviewItem .interviewName { font-size : 11px; line-height : 17px; margin-bottom : 12px;}
  .interviewBox .interviewBoxInner .interviewItem .interviewName > span { font-size : 15px; line-height : 23px;}
  .interviewBox .interviewBoxInner .interviewItem .interviewName > span.ib { font-size : 11px;}
  .interviewBox .interviewBoxInner .interviewItem .releaseDate { font-size : 11px; line-height : 20px; display : block; float : right; clear : both; margin-bottom : 4px;}
  .interviewBox .interviewBoxInner .txtLink {font-size : 12px;  display : inline-block; float : right; padding-left : 10px; background : url(../images/icon02.png) no-repeat left center; -webkit-background-size : 6px auto; background-size : 6px auto;}

  .index .programs { margin-bottom : 18px; padding : 8px 0 15px;}
  .index .programs h3 {margin-bottom : 15px; padding : 0 13px 7px; }
  .index .programs h3 img { display : block; width : 60px;}
  .index .programs ul { margin : 0 13px;}
  .index .programs li {float : none; overflow : hidden; width : auto;  padding : 12px 0; border-top : 1px solid #ccc;}
  .index .programs li:first-child { padding-top : 0; border : 0;}
  .index .programs li:last-child { padding-bottom : 0;}
  .index .programs .photobox img {float : left;width : 46%;  margin-bottom : 5px; }
  .index .programs .ttl {font-size : 12px; margin : 0 0 8px 50%; }
  .index .programs .date {margin : 0; padding : 0; }
  .index .programs .date span {font-size : 12px; clear : both; }
  .index .programs .date span br { display : none;}
  .index .programs .date img {position : relative; left : 4%;  display : block; width : 44px;}
  .index .programs .txt {font-size : 12px; clear : both; margin-top : 0; }
  .index .programs .txt span {font-size : 11px; line-height : 1.2; margin-bottom : 5px; text-align : left; }
  .index .h3Ttl { padding : 7px 15px; border-radius : 2px 2px 0 0;}
  .index .h3Ttl img { display : block; width : 90px;}
  .index .list { margin : 3px 0;}
  .index .list li {width : auto;  margin : 0 0 10px; padding-bottom : 10px; border-bottom : 1px solid #ccc;}
  .index .list li:last-child { margin : 0;}
  .index .list .photo { width : 46%;}
  .index .list .txtBox { width : 50%;}
  .index .list p {font-size : 9px; margin-bottom : 6px; }
  .index .list .title { font-size : 10px;}
  .index .list .date { margin-top : 5px; text-align : left;}
  .index .comBox .txtLink { margin-top : 5px;}
  .index .comBox .txtLink a {font-size : 12px;  padding-left : 10px; background-size : 6px auto;}
  .index .comBox .txtLink span { display : inline-block;}
  .bannerList { margin-top : 20px; margin-bottom : 20px; text-align : center;}
  .bannerList li { width : 48%; margin : 0; padding : 5px 0;}
  .bannerList img { width : 100%;}
  footer #snsBlock {position : static; width : auto;  padding-bottom : 30px; text-align : center; background-color : #f1e9dc;}
  footer .nhk-snsbtn { margin-bottom : 0;}
  footer .nhksns-icon-m img { width : 27px;}
}

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

/* comBox */
.comBox { padding : 30px 35px 40px; border-radius : 0 0 5px 5px;background-color : #fff; }

@media all and (min-width: 0) and (max-width: 767px) { /* comBox */
  .comBox { padding : 8px 14px; border-radius : 0 0 3px 3px;}}


/* ----------------------スマホが横向きのときの表示---------------------- */
@media only screen and ( max-width: 767px ) and ( orientation: landscape ) { .index .voteList li {font-size : 12px; float : none;  width : auto; height : 100% !important;padding : 16% 25px 15px 25px; }}