@charset "utf-8";

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

@import url("style_pc_common_top.css");


#debugBt { display: none; }

/*--------
PC版で非表示
---------*/

.pc-none {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 0px 14px 22px;}
#nav{width:195px; position:absolute; left:22px;top:42px;}
#nav h1{padding-top:3px;}

h1 img.menu-btn {
  display: none;
}

#nav nav{width:155px; padding-left:15px;}
#nav nav a:hover{opacity:0.5; filter:alpha( opacity=50 );}

#nav nav .nav01 {
  padding-top:30px;
}

#nav nav .nav01 li {
  border-bottom: dotted 2px #a998ba;
}

#nav nav .nav01 li:last-child {
  border-bottom: none;
}

#nav nav .nav01 li a {
  display:block;
  padding: 15px 0 12px 0;
  color: #533176;
  text-decoration: none;
  font-weight: bold;
}

#nav nav .nav01 li a img.heart {
  padding-right: 5px;
  vertical-align: -1px;
}

#nav nav .nav01 li a img.arrow {
  padding-right: 8px;
  vertical-align: 2px;
}



#nav nav .nav02 {
  padding-top:30px;
}

#nav nav .nav02 li {
  border-bottom: dotted 2px #a998ba;
  font-size: 75%;
}

/*
#nav nav .nav02 li:nth-child(4) {
  letter-spacing: -2px;
}


#nav nav .nav02 li:nth-child(9) {
  letter-spacing: -1px;
}
*/

#nav nav .nav02 li:last-child {
  border-bottom: none;
}

#nav nav .nav02 li a {
  display:block;
  padding: 15px 0 12px 10px;
  color: #444444;
  text-decoration: none;
  font-weight: bold;

}



#nav nav .nav03 {
  margin-top: 50px;
  width: 146px;
}
#nav nav .nav03 a{display:block; height:39px; text-indent: -9999px; background:url(../image/nav_16.gif) no-repeat;}

#nav nav .nav04 {
  padding-top: 16px;
}

#nav nav .nav04 li{margin-bottom:8px;}



#contents{margin-left:168px; padding-top:39px; background:url(../image/bg.jpg);}

body.smt #contents{width:536px;}



#footer{background:#878694; color:#fff; font-size:62.5%;  line-height:120%; padding:16px 22px 36px 22px;}
#footer a{color:#fff; text-decoration:none; font-size:1em;}
#footer a:hover{text-decoration:underline;}
#footer .nav ul li{float:left; padding-right:6px; margin-right:6px; border-right:1px solid #fff;}
#footer .nav ul li:last-child{border-right:none;}
#footer #copyright{clear:both; padding-top:8px; font-size:1em;}


/*--------
grid-content
---------*/
#grid-content .box{margin:0px 0px 14px 14px;line-height:1.3em; background:#fff; color:#666;  font-size:62.5%;}
#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:3px solid #EEEDE2; color:#666; text-decoration:none; display:block;}

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

/* box-topics */
#grid-content #topics{width:516px !important; height:128px !important; overflow:hidden;}
#grid-content #topics h2{margin:8px 0px 5px 10px; height:13px; overflow:hidden; font-size:0px; line-height:0;}
#grid-content #topics .inner{padding:5px 5px 0px 5px; margin:
0px 10px 0px 10px; height:88px; overflow:auto;}
#grid-content #topics dl dt{width:7em;}
#grid-content #topics dl dd{padding-left:7em; margin-top:-1.3em; padding-bottom:4px; margin-right:20px;}
#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 {
  width: 254px;
  box-shadow: 3px 3px 0 0px rgba(0,0,0,0.2);
  behavior: url(PIE.htc);
}
#grid-content .contents a{width:248px;}
#grid-content .contents h2 {
  margin:9px 9px 0px 9px;
  height:20px;
/*  overflow:hidden; */
  border-bottom: dotted 1px #a998ba;
  font-size: 130%;
  font-weight: bold;
}

#grid-content .contents .inner {
  width: 230px;
  margin: 8px 9px 6px 9px;
}

#grid-content .contents .image {
  width:126px;
  float:left;
}

#grid-content .contents .text {
  width: 98px;
  float: right;
}
#grid-content .contents a:hover .image img{opacity:0.5; filter:alpha( opacity=50 );}

/* box-pickup */
#grid-content .pickup a{width:114px; height:128px; position:relative;}
#grid-content .pickup h2{position:absolute; top:-3px; left:-15px;}
#grid-content .pickup .inner{width:100px; padding-top:27px; margin:0px 7px 7px 7px;}
#grid-content .pickup .image{width:100px; height:94px; overflow:hidden;}
#grid-content .pickup a:hover .image img{opacity:0.5; filter:alpha( opacity=50 );}


/* 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;}

/*--------
PC版で非表示
---------*/

.pc-none {display: none;}