/* Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body {line-height:1;}
ul,ol {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none; word-wrap: break-word;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}

/* Common */
body{
  background-color:#EEE;
  font-size:13px;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  line-height:1.5;
  color:#333;
}
a{
  color:#3f4c6b;
}
a:hover{
  color:#1e56e4;
}
a:hover img {
 opacity: 0.5;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
}
.clear {
  clear:both;
}
#outline {
  width:1200px;
  margin:0 auto;
}
#header{
  width: 100%;
  margin-bottom: 5px;
}
#inr_left{
  float: left;
  /zoom:1;
}
#inr_left:after{
  content: "";
  display: block;
  clear: both;
}
#inr_right{
  float: right;
  /zoom:1;
}
#inr_right:after{
  content: "";
  display: block;
  clear: both;
}
#contents{
  width:1200px;
  margin:0 auto;
  /zoom:1;
}
#contents:after{
  content:"";
  display: block;
  clear: both;
}
#main{
  width:850px;
  float:left;
}
#side{
  width:320px;
  background: #fff;
  border:2px solid #dddddd;
  padding:5px 10px;
  float:right;
}
#side > div{
  margin-top: 10px;
}
#side .sidetitle {
  font-size: 16px;
  font-weight: bold;
  color: #3f4c6d;
  background: #dddddd;
  border-left: solid 4px #669900;
  padding: 5px;
  margin-bottom: 10px;
}
#footer{
  background-image: url(http://blogmaterial.nicoblomaga.jp/material/135/PC/footer_back.png);
  color:#fff;
}
#footer ul{
  list-style: none;
}
#footer li{
  font-size: 14px;
  color: #fff;
}
#footer li a{
 color:#fff;
}
#footer .inr{
  width: 1200px;
  padding: 20px;
  margin: 0 auto;
}
#footer .box{
  width:380px;
  height: 100%;
  padding: 10px;
  float: left;
}
#footer .title{
font-size: 16px;
border-bottom: solid 4px #669900;
margin-bottom: 10px;
}

div.related h2{
  font-size:25px;
  font-weight:bold;
  margin-top:20px;
}
div.related ul li{
  margin-top:5px;
}
div.bodymore{
  padding-top:20px;
}
div.bodymore .NM{
  padding:0 10px;
  font-weight:bold;
  color:#507910;
}

div.pager{
  margin-top:30px;
  text-align:center;
  font-size:14px;
}
div.pager a{
  padding:0 10px;
}
div.bodymore img{
  max-width:100%;
}

/* latest */
#latest{
  background-color:#DDD;
  position:relative;
}
#latest .inr{
  border:2px solid #dddddd;
  padding:15px;
  position:relative;
  background: #fff;
}

#latest .date{
  font-size: 12px;
  color: #fff;
  margin: 10px 5px 0 0;
  padding:5px;
  background:#7a7571;
  float: left;
}
#latest .comment{
  font-size: 12px;
  color: #fff;
  margin: 10px 5px 0 0;
  padding:5px;
  background:#0099CC;
  float: left;
}
#latest .comment a{
   color: #fff;
}
#latest .onebutton_latest{
  margin: 10px 0 0 0;
  float: right;
}
#latest .category{
  font-size: 12px;
  margin: 10px 5px 0 0;
  padding:5px;
  background:#669900;
  float: left;
}
#latest .category a{
   color: #fff;
}
#latest dl.article_info dt{
  font-size:24px;
  border-bottom:2px solid #EEE;
  padding-bottom:5px;
}
#latest dl.article_info dt a{
  font-weight:bold;
  text-decoration:none;
}
#latest dl.article_info dt a:hover{
  text-decoration:underline;
}
#latest div.body{
  font-size:14px;
}
#latest div.body img{
  width: 100%;
  height: 400px;
  border: solid 2px #669900;
  margin-top: 10px;
}
#latest p.more{
  margin-top:10px;
}
#latest p.more a{
  display:block;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  padding:5px 10px;
  background-color:#EFEFEF;
  border:1px solid #ccc;
  text-decoration:none;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
#latest p.more a:hover{
  background-color:#fffde6;
}

/* article_list */
#article_list{
  margin-top:10px;
}
#article_list:first-child{
  margin-top:0;
}
#article_list ul{
margin-bottom: 10px;
}
#article_list li{
  border:2px solid #dddddd;
  margin-top: 5px;
  padding:15px;
  position:relative;
  background: #fff;
}
#article_list li:after{
  content:'';
  display:block;
  clear:both;
}
#article_list li:first-child{
}
#article_list li dl.info{
}
#article_list li dl.info dt{
  font-size: 18px;
  margin-bottom:5px;
}
#article_list li dl.info dt a{
  font-weight:bold;
}
#article_list li .date{
  font-size: 12px;
  color: #fff;
  margin: 5px 5px 0 0;
  padding:5px;
  background:#7a7571;
  float: left;
}
#article_list li .comment{
  font-size: 12px;
  color: #fff;
  margin: 5px 5px 0 0;
  padding:5px;
  background:#0099CC;
  float: left;
}
#article_list li .comment a{
   color: #fff;
}
#article_list li .category{
  font-size: 12px;
  margin: 5px 5px 0 0;
  padding:5px;
  background:#669900;
  float: left;
}
#article_list li .category a{
   color: #fff;
}
#article_list li p.thumb{
  float:left;
  margin-right: 20px;
}
#article_list li p.thumb img{
  border-radius: 300px;
  height: 150px;
  width: 150px;
  border: solid 2px #669900;
}
#article_list p.pager{
  border:2px solid #dddddd;
  padding:5px;
  text-align:center;
  background: #fff;
}
#article_list p.pager a,
#article_list p.pager strong{
  display:inline-block;
  /display:inline;
  /zoom:1;
  padding:2px 10px;
  background-color:#fff;
  border:1px solid #ccc;
  margin:0 5px;
  text-decoration:none;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
#article_list p.pager a:hover{
  background-color:#fffde6;
}
#article_list p.pager strong{
  background-color:#999;
  color:#fff;
}
#article_list p.pager_archive:after{
  content:'';
  display:block;
  clear:both;
}
#article_list p.pager_archive a{
  display:block;
  margin:0;
}
#article_list p.pager_archive a.prev{
  float:left;
}
#article_list p.pager_archive a.next{
  float:right;
}


/* article_single */
#single_title-area{
  border:2px solid #dddddd;
  padding:15px;
  margin-bottom: 5px;
  position:relative;
  background: #fff;
}
h2.single_title{
  font-size:24px;
  color: #3f4c6d;
  border-bottom:2px solid #EEE;
  padding-bottom:5px;
}
#single_title-area .date{
  font-size: 12px;
  color: #fff;
  margin: 10px 5px 0 0;
  padding:5px;
  background:#7a7571;
  float: left;
}
#single_title-area .comment_n{
  font-size: 12px;
  color: #fff;
  margin: 10px 5px 0 0;
  padding:5px;
  background:#0099CC;
  float: left;
}
#single_title-area .comment_n a{
   color: #fff;
}
#single_title-area .onebutton_single{
  margin: 10px 0 0 0;
  float: right;
}
#single_title-area .category{
  font-size: 12px;
  margin: 10px 5px 0 0;
  padding:5px;
  background:#669900;
  float: left;
}
#single_title-area .category a{
   color: #fff;
}
#article_single {
  border:2px solid #dddddd;
  padding:15px;
  position:relative;
  background: #fff;
}
#article_single div.body{
  font-size:14px;
  margin-bottom: 10px;
}
#article_single div.body img{
  max-width: 80%;
}
#article_single .related{
  border:2px solid #dddddd;
  padding:15px;
  margin:5px 0;
  position:relative;
  background: #fff;
}
#article_single .related h4{
  border-bottom:2px solid #dddddd;
  position:relative;
  margin: -15px -15px 0 -15px;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background: #333;
}
#article_single .related li {
  font-size: 16px;
  font-weight: bold;
  word-wrap: break-word;
  text-overflow:ellipsis;
  border-bottom: 1px dashed #ccc;
  padding: 8px 10px;
}

#article_single .related li a:before{
  font-family: FontAwesome;
  padding-right: 5px;
  content: "\f1a1"
}
#article_single .tags{
  display: inline-block;
  font-size: 12px;
  margin-right: 5px;
  padding:5px;
  background:#AA66CC;
}
#article_single div.tags a{
   color: #fff;
}
#article_single div.comment{
  margin-top:5px;
}
#article_single div.comment .form{
  background-color:#eee;
  margin-top: 15px;
  padding:15px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
#article_single div.comment .form dt{
  font-size:14px;
  font-weight:bold;
  color:#666;
}
#article_single div.comment .form table th,
#article_single div.comment .form table td{
  padding-top:10px;
  vertical-align:top;
}
#article_single div.comment .form table th{
  padding-right:5px;
  text-align:right;
}
#article_single div.comment .form table input{
  width:498px;
}
#article_single div.comment .form table textarea{
  width:500px;
  height:10em;
}
#article_single div.comment .form p{
  margin-top:10px;
  text-align:center;
}
#article_single div.comment .form p input{
  padding:5px 10px;
}
#article_single h2 {
  padding:10px ;
  font-size:24px;
  border-left:5px solid #e74c3c;
  font-weight: bold;
}
#article_single h3 {
  font-size:20px;
  padding:10px ;
  border-bottom:5px solid #669900;
  font-weight: bold;
}

/* comment_list */
#comment_title{
  border-top:2px solid #dddddd;
  border-left:2px solid #dddddd;
  border-right:2px solid #dddddd;
  border-bottom:1px solid #dddddd;
  position:relative;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px 1px 0 rgba(0,0,0,1);
  background: #333;
}
#comment_title-body{
  border-left:2px solid #dddddd;
  border-right:2px solid #dddddd;
  border-bottom:2px solid #dddddd;
  padding: 10px;
  position:relative;
  background: #333;
}
.ninja_onebutton-comment{
margin: 10px 0 0 160px;
}
#comment_list li{
  margin-top: 20px;
  border-bottom:1px solid #ccc;
}
#comment_list li dl dt,
#comment_list li dl dd{
  display:inline;
  margin-right:5px;
  color: rgb(0, 127, 0);
}
.body_c{
  display:block;
  font-weight: bold;
  padding: 20px;
  font-size: 16px;
}
#comment_list li dl dd.date_c{
  color: #333;
}

#article_pager{
  border:2px solid #dddddd;
  margin: 10px 0;
  padding:10px;
  text-align:center;
  background: #fff;
  font-size: 16px;
  font-weight: bold;
}

/* カテゴリ・月別見出し */
#archive_title{
  border:2px solid #dddddd;
  padding:10px;
  margin-bottom: 5px;
  position:relative;
  background: #333;
}
#archive_title h2{
  text-align: center;
  text-shadow: -1px 1px 0 rgba(0,0,0,1);
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}
/* lists in sidewrapper */
.sidewrapper{
  margin-top:20px;
}
.sidewrapper:first-child{
  margin-top:0;
}
.sidewrapper ul li{
  margin-top:10px;
  padding: 10px;
  border-bottom:1px solid #dddddd;
}
.sidewrapper ul li:first-child{
  border-top:1px solid #dddddd;
}
.sidewrapper ul li span.subject{
  display:inline-block;
  /display:inline;
  /zoom:1;
  width:230px;
  margin-left:10px;
  vertical-align:middle;
}
.sidewrapper ul li img{
  vertical-align:middle;
}

/* メニューバー */
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  height: 40px;
  margin: 0 0 5px 5px;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  width: 790px;
  background: #333;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #fff;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #7a7571;
}
/* 忍者レコメンドIE10以降 CSSハック*/
@media all and (-ms-high-contrast:none){
  .ninja-recommend-article {
    margin-right: 0px !important;
  }
}
/* パンくずリスト */
.breadcrumb {
  border:2px solid #dddddd;
  position:relative;
  background: #fff;
  margin-bottom: 5px;
}
.breadcrumb li {
  font-size: 12px;
  padding: 6px;
  display: inline-block;
}
.breadcrumb li a {
  text-decoration: none;
}
.breadcrumb li a:after {
  content: "\00003E";
  color: #757575;
  margin: 0 0 0 12px;
  vertical-align: 1px;
}
/* Top Scroll */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 32px;
}
#page-top a {
    background: #0099CC;
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 50%;
}
#page-top a:hover {
    text-decoration: none;
    background: #33B5E5;
}

/* Share Button */
#sharebutton_area {
  float: right;
  margin: 0 20px 10px 0;
}
#sharebutton_area li{
}
/* RSS */
.rss_top-main .blogroll-channel {
  width: 846px;
  height: 240px;
  overflow-y: scroll;
  background-color: #fff;
  border:2px solid #dddddd;
  margin-bottom: 5px;
}
.rss_top-main .blogroll-list {
  font-size: 16px;
  font-weight: bold;
  word-wrap: break-word;
  text-overflow:ellipsis;
  border-bottom: 1px dashed #ccc;
  padding: 8px 10px;
}
.rss_top-sub .blogroll-channel {
  width: 421px;
  height: 340px;
  overflow-y: scroll;
  background-color: #fff;
  float: left;
  border:2px solid #dddddd;
  margin-bottom: 5px;
}
.rss_top-sub .blogroll-list {
  font-size: 14px;
  font-weight: bold;
  word-wrap: break-word;
  text-overflow:ellipsis;
  border-bottom: 1px dashed #ccc;
  padding: 8px 10px;
}
.rss_article-body .blogroll-channel {
  width: 814px;
  height: 290px;
  overflow-y: scroll;
  background-color: #fff;
  border:2px solid #dddddd;
  margin: 10px 0;
}
.rss_article-body .blogroll-list {
  font-size: 16px;
  font-weight: bold;
  word-wrap: break-word;
  text-overflow:ellipsis;
  border-bottom: 1px dashed #ccc;
  padding: 8px 10px;
}
.rss_footer .blogroll-channel {
  width: 846px;
  height: 410px;
  overflow-y: scroll;
  background-color: #fff;
  border:2px solid #dddddd;
  margin-bottom: 5px;
}
.rss_footer .blogroll-list {
  font-size: 16px;
  font-weight: bold;
  word-wrap: break-word;
  text-overflow:ellipsis;
  border-bottom: 1px dashed #ccc;
  padding: 8px 10px;
}
/* 固定リンク */
.kotei-article-bottom{
  margin-bottom: 5px;
  padding:5px;
  text-argin:center;
}
.kotei-article-bottom li {
  list-style-type : none;
  margin: 0 0 10px 0;
  padding:5px 5px;
  font-size:20px;
  font-weight: bold;
  overflow:hidden;
}
.kotei-article-bottom a {
  display: block;
}
/*固定リンク 記事タイトル下*/
.pickup-link-ttitlebottom {
  position: relative;
  margin: 25px 0 15px;
  padding: 16px 10px;
  border: 2px solid #55acee;
  background-color: #FFFFEF;
}
.pickup-link-ttitlebottom a {
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
  font-family: 'メイリオ',sans-serif;
  display: block;
}
.pickup-link-ttitlebottom p:first-child {
  margin-top: 15px;
}
.pickup-link-ttitlebottom p:last-child {
  margin-bottom: 0;
}
.pickup-link-ttitlebottom::before {
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 4px 10px;
  content: "おすすめ記事";
  background-color: #55acee;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
}
/* 画像リンク */
#imglinkbox_top{
  width: 850px;
}
#imglinkbox_top li{
  float: left;
  margin-right: 5px;
}
#imglinkbox_top li:last-child {
  margin-right: 0;
}
#imglinkbox_top .img-link{
  position:relative;
  margin-bottom: 5px;
}
#imglinkbox_top .img-link span{
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  background: #7a7571;
  filter: Alpha(opacity=100);
  opacity:1;
  width:270px !important;
}
#box_left{
  float: left;
}
#imglinkbox_right{
  width: 514px;
  float: right;
}
#imglinkbox_right li{
  margin-left: 10px;
}
#imglinkbox_right .img-link{
  position:relative;
  margin-bottom: 5px;
}
#imglinkbox_right .img-link span{
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  background: #7a7571;
  filter: Alpha(opacity=100);
  opacity:1;
  width:490px !important;
}
#side_track{
}
.img-link_side{
  position:relative;
}
.img-link_side span{
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  background: #7a7571;
  filter: Alpha(opacity=100);
  opacity:1;
  width:310px !important;
}
/* Ad */
#amazon_title{
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px 1px 0 rgba(0,0,0,1);
  border:2px solid #dddddd;
  padding:10px;
  margin: 5px 0;
  position:relative;
  background: #333;
}
.ad_top-box{
  width: 846px;
  border:2px solid #dddddd;
  background-color: #fff;
  text-align: center;
  margin-top: 10px;
  padding-top: 5px;
}
.ad_top{
  display: inline-block;
  margin: 0 10px;
}
.ad_article{
  width: 100%;
  text-align: center;
  margin: 10px 0 0 0;
}
.ad_article-02{
  display: inline-block;
  margin: 0 0 10px 20px;
  float: left;
}
.ad_comment{
  text-align: center;
  margin-top: 10px;
}
/* google検索 */
#cse-search-box input[type="text"]{
  width: calc(100% - 110px);
  border: 1px solid rgba(0,0,0,0.08);
}
#cse-search-box input[type="submit"]{
  width: 100px;
  background: #669900;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}
#cse-search-box input {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 34px;
}
/* 文字色 font-color */
.red {
  color: #CC0000;
}
.blue {
  color: #0000cd;
}
.green {
  color: #008000;
}
.pink{
  color: #ef7b88;
}
/* 固定リンクボタン*/
.link-btn-title {
  font-size:16px;
  text-align: center;
  border-bottom:3px solid #09b83e;
  font-weight: bold;
}
.link-btn{
  font-size: 18px;
  font-weight: bold;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  display: block;
}
.link-btn-red{
  background-color: #fff;
  color: #e74c3c;
  border: 1px solid #e74c3c;
  margin: 10px 0;
}
.link-btn-red:hover {
  color: #fff;
  background-color: #e74c3c;
}
.link-btn-blue{
  background-color: #fff;
  color: #2581c4;
  border: 1px solid #2581c4;
  margin: 10px 0;
}
.link-btn-blue:hover {
  color: #fff;
  background-color: #2581c4;
}
.link-btn-pink{
  background-color: #fff;
  color: #ef7b88;
  border: 1px solid #ef7b88;
  margin: 10px 0;
}
.link-btn-pink:hover {
  color: #fff;
  background-color: #ef7b88;
}
.link-btn-green{
  background-color: #fff;
  color: #09b83e;
  border: 1px solid #09b83e;
  margin: 10px 0;
}
.link-btn-green:hover {
  color: #fff;
  background-color: #09b83e;
}
.link-btn-youtube{
  background-color: #fff;
  color: #cd201f;
  border: 1px solid #cd201f;
  margin: 10px 0;
}
.link-btn-youtube:hover {
  color: #fff;
  background-color: #cd201f;
}