@charset "utf-8";

/*-----------------------------------
NHKサービスセンター CSS
index.html
------------------------------------*/

#debugBt { display: none; }

/*--------
common
---------*/
body{border-top:6px solid #533176; font-family:"メイリオ", Meiryo ,"ヒラギノ角ゴ Pro","HIragino Kaku Gothic Pro W3","HIragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック", "MS P Gothic",sans-serif;}
body{-webkit-text-size-adjust:none;}

.wrapper{padding: 0px 5% 5% 5%;}

/*--------
NSCロゴ
---------*/

h1 {
  width: 100%;
  margin-bottom: 2%;
  padding-top: 2%;
}

h1 img {
  width: 50%;
  height: auto;
}

h1 img.menu-btn {
  float: right;
  width: 7%;
  height: auto;
}

/*--------
グローバルナビ
---------*/

#nav {
  position: relative;
}


#nav nav {
  display: none;
  position: absolute;
  width: 110%;
  left: -5%;
  background-color: #eeeeee;
  opacity:0.9;
  filter:alpha( opacity=90 );
}



#nav nav .nav01 li {
  margin-bottom: 1px;
}

#nav nav .nav01 li a {
  display:block;
  padding: 2% 0 2% 5%;
  background-color: #644583;
  color: #ffffff;
  font-size: 210%;
  text-decoration: none;
  font-weight: bold;
}

#nav nav .nav01 li a img.heart {
  display: none;
}

#nav nav .nav01 li a img.arrow {
  display: none;
}

#nav nav .nav01 li a span {
  display: block;
  padding-left: 2%;
  border-left: solid 8px #ffffff;
  line-height: 1.3;
}

#nav nav .nav02 li {
  margin-bottom: 1px;
}

#nav nav .nav02 li a {
  display:block;
  float: left;
  width: 44.9%;
  margin-bottom: 1px;
  padding: 2% 0 2% 5%;
  background-color: #908f9c;
  color: #ffffff;
  font-size: 180%;
  text-decoration: none;
  font-weight: bold;
}

#nav nav .nav02 li a.plusx {
  display:block;
  float: left;
  width: 44.9%;
  margin-bottom: 1px;
  padding: 2.4% 0 2% 5%;
  background-color: #908f9c;
  color: #ffffff;
  font-size: 159%;
  text-decoration: none;
  font-weight: bold;
}

#nav nav .nav02 li:nth-child(1) a,
#nav nav .nav02 li:nth-child(3) a,
#nav nav .nav02 li:nth-child(5) a,
#nav nav .nav02 li:nth-child(7) a,
#nav nav .nav02 li:nth-child(9) a,
#nav nav .nav02 li:nth-child(11) a,
#nav nav .nav02 li:nth-child(13) a,
#nav nav .nav02 li:nth-child(15) a,
#nav nav .nav02 li:nth-child(17) a {
  margin-right: 1px;
}



#nav nav .nav03 a {
  display:block;
  padding: 3% 0 2% 5%;
  background-color: #644583;
  color: #ffffff;
  font-size: 210%;
  text-decoration: none;
  font-weight: bold;
}

#nav nav .nav03 a span {
  display: block;
  padding-left: 2%;
  border-left: solid 8px #ffffff;
  line-height: 1.3;
}

#nav nav .nav04 {
  display: none
}



/*--------
grid-content
---------*/
#grid-content .box{margin:2% 0 2% 0;line-height:2.1em; background:#fff; color:#666;  font-size:80%;}
#grid-content .box a{ font-size:1.1em; }
#grid-content #main,
#grid-content #topics{border:3px solid #EEEDE2; color:#666; text-decoration:none;}
#grid-content .contents a,
#grid-content .pickup a{border:2px solid #EEEDE2; color:#666; text-decoration:none; display:block;}

/* box-main */
#grid-content #main{width:100%; height:276px; overflow:hidden;}

/* box-topics */
#grid-content #topics{width:100% !important; height:242px !important; overflow:hidden;}
#grid-content #topics h2{margin:8px 0px 5px 10px; height:26px; overflow:hidden; font-size:0px; line-height:0;}
#grid-content #topics .inner{padding:10px 5px 0px 5px; margin:0px 10px 0px 10px; height:183px; overflow:auto;}
#grid-content #topics dl dt{width:7em; font-size:180%;}
#grid-content #topics dl dd{padding-left:7em; margin-top:-1.3em; padding-bottom:14px; margin-right:20px; font-size:180%;}
#grid-content #topics dl dd a{color:#1a81aa; text-decoration:none;}
#grid-content #topics dl dd a:hover{text-decoration:underline;}



/* box-contents */
#grid-content .contents {
  float: left;
  width: 49%;
  margin: 0 2% 2% 0;
  box-shadow: 3px 3px 0 0px rgba(0,0,0,0.2);
  behavior: url(PIE.htc);
}

#grid-content .contents:nth-child(2),
#grid-content .contents:nth-child(4),
#grid-content .contents:nth-child(6),
#grid-content .contents:nth-child(8),
#grid-content .contents:nth-child(10),
#grid-content .contents:nth-child(12),
#grid-content .contents:nth-child(14),
#grid-content .contents:nth-child(16) {
  margin-right: 0;
}

#grid-content .contents a {
  width:94%;
  padding: 3%;
}

#grid-content .contents h2 {
  width: 55%;
  float: left;
  background-image: none;
  font-size: 200%;
  line-height: 1.2;
}

#grid-content .contents h2.stera {
  padding-top: 7.5%;
}

#grid-content .contents h2.radio {
  padding-top: 3.0%;
}

#grid-content .contents h2.event {
  padding-top: 7.5%;
}

#grid-content .contents h2.kyosai {
  padding-top: 3.0%;
}

#grid-content .contents h2.online-shop {
  padding-top: 3.0%;
}

#grid-content .contents h2.gogaku {
  padding-top: 7.5%;
}

#grid-content .contents h2.download {
  padding-top: 3.0%;
}

#grid-content .contents h2.studio-park {
  font-size: 180%;
  line-height: 1.1;
}

#grid-content .contents h2.studio-shop {
  font-size: 180%;
  line-height: 1.1;
}

#grid-content .contents h2.studio-cafe {
  font-size: 180%;
  line-height: 1.1;
}

#grid-content .contents h2.hall {
  padding-top: 7.5%;
}

#grid-content .contents h2.museum {
  padding-top: 7.5%;
}

#grid-content .contents h2.kyoiku {
  padding-top: 3.0%;
}

#grid-content .contents h2.plusx {
  font-size: 180%;
  line-height: 1.1;
}

#grid-content .contents h2 img {
  display: none;
}

#grid-content .contents h2 p span {
  display: block;
} 

#grid-content .contents .inner {
  width:41%;
  float: right;
}

#grid-content .contents .image {
  width: 100%;
  height:auto;
  overflow:hidden;
}

#grid-content .contents .image img {
  width: 100%;
  height:auto;
}

#grid-content .contents .text { display: none;}



/* box-pickup */
#grid-content .pickup {
  float:left;
  margin: 0 2% 2% 0;
  width: 14%;
}

#grid-content .pickup a {
  width: 100%;
  padding-bottom: 9%;
}

#grid-content .pickup h2 {
  line-height: 0.5;
  margin-bottom: 8%;
}

#grid-content .pickup h2 img {
  width:25%;
  height:auto;
}

#grid-content .pickup h2 span {
  color: #ed1c24;
  font-size: 110%;
}

#grid-content .pickup .inner {
  width:100%;
  padding: 0 0 0;
}

#grid-content .pickup .image {
  width:100%;
  overflow:hidden;
  text-align: center;
}

#grid-content .pickup .image img {
  width: 70%;
  height:auto;
}



/* LINK */
#grid-content .contents,#grid-content .contents h2,#grid-content .contents p,
#grid-content .pickup,#grid-content .pickup h2,#grid-content .pickup p{cursor:pointer;}/* for IE6,7 */
#grid-content .box>a:hover{border-color:#661C71;}
#grid-content .pickup a:hover{border-color:#661C71;}


/* banner-content */
#banner-content{clear:both;}
#banner-content ul li{float:left; margin:0px 0px 14px 14px;}
#banner-content ul li a{display:block; padding:5px; border:3px solid #EEEDE2; background:#fff;}
#banner-content ul li a:hover{border-color:#661C71;}
#banner-content ul li.sizeS{margin-top:17px;}

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

#footer {
  background:#878694;
  color:#fff;
  padding:5% 0 10% 0;
}

#footer a {
  color:#fff;
  line-height: 1;
  text-decoration:none;
}

#footer a:hover {
  text-decoration:underline;
}

#footer .nav ul {
  width: 90%;
  margin: 0 auto;
}

#footer .nav ul li {
  float: left;
  margin: 0 0 2% 0;
  padding: 0 2% 0 2%;
  border-right: 1px solid #fff;
  line-height: 1;
  font-size: 130%;
}

#footer .nav ul li:last-child {
  margin-right: none;
  padding-right: none;
  border-right: none;
}

#footer #copyright {
  clear:both;
  width: 85%;
  margin: 0 auto;
  padding-top: 2%;
  line-height: 1.2;
  font-size: 90%;
}

/*--------
モバイル版で非表示
---------*/

.mobile-none {display: none;}