@charset "utf-8";

/*
 * element CSS
 * ---------------------------------------------
 * 
 */

/*===================================
  font
=====================================*/

.archiveNavi .current a,.archiveNavi .current a:visited,
.postList .cmt a,.postList .cmt a:visited,
.postList b.rt,
.catList li a,.catList li a:visited,
.cmtSec input,
.moveResult a,.moveResult a:visited {
  color: #fff;
}
.postList.larg .cmt a,.postList.larg .cmt a:visited,
.reactionList li,
.reactionList li p:before {
  color: #a1a1a1;
}
.reactionList li p {
  color: #313131;
}
time {
  color: #a0a0a0;
}
.archiveNavi h2,
.pager {
  text-align: center;
}
.newPost .postList .cmt a:hover,
.topicspath a:hover,
.listSwitch:hover {
  text-decoration: underline;
}


/*===================================
  layout
=====================================*/

.sec {
  margin-bottom: 30px;
}

/*===================================
  background
=====================================*/

.cmtSec textarea,
.cmtSec input {
  border: none;
  background: none;
}
.archiveNavi .current a,
.cmtSec input,
.moveResult a {
  background-color: #434343;
}
.archiveNavi a,
.questArchive,
.questionList,
.resultBlock {
  background-color: #eee;
}
.postList .cmt a {
  background-color: #f6ac1d;
}
.rt .postList b.rt {
  background-color: #00aced;
}
.postList.larg .cmt a {
  background: none;
}

/*  sprite
---------------------------------*/

.archiveNavi a:before,
.pager .prv a:before,
.pager .nxt a:after,
.archiveTtl:before,
.cmtSec h3:before {
  background-image: url(../images/sprite.png);
  background-repeat: no-repeat;
}

/*  opacity
---------------------------------*/

.archiveNavi a:hover,
.postList .cmt a:hover,
.pager a:hover,
.catList li a:hover,
.cmtSec input:hover,
.contHeader .btn a:hover,
.questionForm ul input:hover,
.moveResult a:hover {
  opacity: .7;
}
.archiveNavi .current a:hover,
.newPost .postList .cmt a:hover,
.pager .current a:hover {
  opacity: 1;
}

/*  :before :after
---------------------------------*/

.archiveNavi a:before,
.pager .prv a:before,
.pager .nxt a:after ,
.archiveTtl:before,
.cmtSec h3:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
}

/*===================================
  highlight
=====================================*/

.highlight ul,
.highlight li {
  overflow: hidden;
}
.highlight ul {
  margin: 0 -10px -10px 0;
}
.highlight li {
  float: left;
  width: 160px;
  height: 120px;
  margin: 0 10px 10px 0;
}
.highlight li.pickup {
  width: 330px;
  height: 250px;
}

/*===================================
  postList 記事一覧
=====================================*/

.archiveTtl {
  margin-bottom: 15px;
  padding: 0 0 13px 8px;
  border-bottom: solid 3px #000;
  font-size: 18px;
}
.archiveTtl:before {
  margin: -2px 5px 0 0;
}
.archiveTtl.new:before {
  width: 24px;
  height: 25px;
  background-position: 0 -350px;
}
.archiveTtl.topic:before {
  width: 23px;
  height: 19px;
  background-position: -200px -350px;
}
.archiveTtl.rt:before {
  width: 22px;
  height: 19px;
  background-position: -400px -350px;
}


.postList p {
  font-size: 16px;
  font-weight: bold;
}
.postList footer {
  font-size: 12px;
}
.postList.larg p {
  font-size: 20px;
}
.postList.larg footer {
  font-size: 14px;
}
.postList li footer {
  text-align: right;
}
.postList {
  margin-bottom: -15px;
  padding-top: 15px;
}
.postList.larg {
  margin-bottom: -16px;
  padding-top: 16px;
}
.postList.spl {
  margin-bottom: -10px;
  padding-top: 10px;
}
.postList li,
.postList figure,
.postList p {
  overflow: hidden;
}
.postList li {
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: solid 1px #dcdcdc;
}
.postList.larg li {
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.postList.spl li {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.postList figure {
  float: left;
  width: 116px;
  height: 89px;
}
.postList.larg figure {
  width: 176px;
  height: 135px;
}
.postList p {
  height: 4.2em;
  margin: 0 0 5px 126px;
  line-height: 1.4;
}
.postList.larg p {
  height: 5.6em;
  margin-left: 189px;
}
.postList.spl p {
  height: auto;
  margin: 0 8px;
}
.postList time,
.postList .cmt,
.postList b.rt {
  display: inline-block;
  line-height: 18px;
}
.postList .cmt,
.postList b.rt {
  margin-left: 10px;
}
.postList .cmt a,
.postList b.rt {
  display: block;
  padding: 0 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.postList b.rt {
  display: inline-block;
}

/*===================================
  pager
=====================================*/

.pager {
  font-size: 16px;
}
.pager .prv,
.pager .nxt,
.pager .current {
  font-weight: bold;
}
.pager {
  margin: 40px 0 30px;
}
.pager ol {
  overflow: hidden;
}
.pager li {
  display: inline-block;
}
.pager .prv {
  float: left;
}
.pager .nxt {
  float: right;
}
.pager a {
  display: block;
  padding: 10px 10px 9px;
  border: solid 1px #dcdcdc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.pager .prv a,
.pager .nxt a {
  padding: 10px 15px 9px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}
.pager .current a {
  cursor: default;
}
.pager .prv a:before,
.pager .nxt a:after {
  width: 9px;
  height: 16px;
}
.pager .prv a:before {
  margin: -3px 8px 0 0;
  background-position: -500px -200px;
}
.pager .nxt a:after {
  margin: -3px 0 0 8px;
  background-position: -600px -200px;
}

/*===================================
  パンくず
=====================================*/

.topicspath {
  margin-bottom: 20px;
}
.topicspath li {
  display: inline;
  font-size: 12px;
}
.topicspath li:after {
  content: "＞";
  padding-left: 4px;
  font-size: 65%;
  vertical-align: middle;
}
.topicspath li:nth-last-of-type(1):after {
  content: "";
}

/*===================================
  contHeader
=====================================*/

.contHeader {
  overflow: hidden;
  margin-bottom: 30px;
  padding-top: 27px;
  border-top: solid 1px #000;
}
.contHeader h2 {
  font-size: 30px;
  line-height: 1.2;
}
.contHeader time {
  display: block;
  margin: 0 3em 0.8em 0;
  font-size: 12px;
  text-align: right;
}
.contHeader .btn a {
  display: inline-block;
  padding: 6px 16px;
  border: solid 1px #dcdcdc;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
}
.single .contHeader {
  margin-bottom: 10px;
  padding-top: 14px;
}
.category .contHeader figure {
  float: left;
  width: 168px;
  margin-left: 7px;
}
.category .contHeader figure img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.category .contHeader h2 {
  margin: 10px 0 20px 182px;
}
.category .contHeader .btn {
  margin-left: 182px;
}

/*===================================
  catList
=====================================*/

.catList {
  margin-bottom: 8px;
}
.catList li {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}
.catList li a {
  display: block;
  padding: 5px 10px 3px;
  background: #898989;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;

}

/*===================================
  コメントbox
=====================================*/

.cmtBox {
  overflow: visible;
  padding: 0 17px 20px;
  border: solid 3px #000;
}
.cmtBox h2 {
  display: block;
  margin: -9px 0 15px -3px;
  font-size: 18px;
}
.cmtBox h2 span {
  display: inline-block;
  padding: 0 5px;
  background: #fff;
}
.cmtBox p {
  font-size: 14px;
  line-height: 1.4;
}

/*===================================
    top
=====================================*/

.postArchive.sec {
  margin-bottom: 46px;
}

/*  archiveNavi
---------------------------------*/

.archiveNavi h2 {
  font-size: 16px;
}
.archiveNavi {
  margin-bottom: 5px;
  border-bottom: solid 4px #434343;
}
.archiveNavi ul {
  overflow: hidden;
  margin-left: -2px;
}
.archiveNavi li {
  float: left;
  margin-left: 2px;
}
.archiveNavi a {
  display: block;
  width: 222px;
  height: 56px;
  line-height: 56px;
}
.archiveNavi .current a {
  cursor: default;
}
.archiveNavi  a:before {
  margin: -2px 5px 0 0;
}
.archiveNavi .n1 a:before {
  width: 24px;
  height: 25px;
  background-position: 0 -350px;
}
.archiveNavi .n1.current a:before {
  background-position: -100px -350px;
}
.archiveNavi .n2 a:before {
  width: 23px;
  height: 19px;
  background-position: -200px -350px;
}
.archiveNavi .n2.current a:before {
  background-position: -300px -350px;
}
.archiveNavi .n3 a:before {
  width: 22px;
  height: 19px;
  background-position: -400px -350px;
}
.archiveNavi .n3.current a:before {
  background-position: -500px -350px;
}

/*===================================
  single
=====================================*/

/*  sns
---------------------------------*/

.sns {
  margin-bottom: 30px;
  padding: 12px 13px;
  background: #f2f2f2;
  font-size: 14px;
  text-align: right;
}
.sns p,
.sns ul,
.sns li {
  display: inline-block;
  vertical-align: middle;
}
.sns li {
  width: 30px;
  margin-left: 14px;
}

/*  post
---------------------------------*/

.post,
.post p {
  overflow: hidden;
}
.post {
  margin-bottom: 15px;
}
.post p {
  margin-bottom: 1.8em;
  line-height: 1.6;
}

/*  ネットの反応
---------------------------------*/

.reactionList {
  margin: 0 0 50px;
}
ol.reactionList li {
  list-style: outside decimal;
}
.reactionList li {
  position: relative;
  margin: 0 0 1.4em 1.6em;
}

.reactionList p:before {
  content: "コメント—————————————— ";
  display: block;
  margin-bottom: 0.6em;
}

/*  cmtSec
---------------------------------*/

.cmtSec {
  font-size: 14px;
}
.cmtSec .note {
  font-size: 12px;
}
.cmtSec div {
  overflow: hidden;
  padding: 20px 25px 25px;
  background: #eee;
}
.cmtSec div div {
  padding: 0;
  background: none;
}
.cmtSec > div:nth-of-type(1) {
  margin-bottom: 2px;
  -webkit-border-radius: 7px 7px 0 0;
  -moz-border-radius: 7px 7px 0 0;
  -ms-border-radius: 7px 7px 0 0;
  -o-border-radius: 7px 7px 0 0;
  border-radius: 7px 7px 0 0;
}
.cmtSec > div:nth-last-of-type(1) {
  padding-bottom: 30px;
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  -ms-border-radius: 0 0 7px 7px;
  -o-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
}
.cmtSec h3 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 26px;
}
.cmtSec h3:before {
  width: 26px;
  height: 26px;
  margin: 0 8px 0 0;
  background-position: -700px -200px;
}
.cmtList {
  padding-top: 10px;
  background: #fff;
}
.cmtList li {
  list-style: inside decimal;
  margin-bottom: 15px;
  padding: 0 15px 10px;
  border-bottom: solid 1px #eee;
}
.cmtList time,
.cmtList p {
  margin-left: 1em;
}
.cmtList time {
  display: block;
  font-size: 12px;
  line-height: 2;
}
.cmtList p {
  line-height: 1.4;
}
.listSwitch {
  text-align: right;
  cursor: pointer;
}
.cmtSec form {
  float: left;
  width: 300px;
}
.cmtSec textarea {
  width: 288px;
  height: 198px;
  padding: 5px;
  border: solid 1px #a0a0a0;
  background: #fff
}
.cmtSec input {
  display: inline-block;
  padding: 5px 16px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
  cursor: pointer;
}
.cmtSec .note {
  display: block;
  margin: 1em 0 1.8em;
}

/*===================================
    カテゴリー
=====================================*/

.imgBox {
  overflow: auto;
}
.imgBox ul {
  width: 1900px;
}
.imgBox li {
  overflow: hidden;
  float: left;
  margin-right: 6px;
}
.imgBox li img {
  width: auto;
  height: 380px;
}

.dataBox {
  padding: 15px 8px 8px;
  background: #eee;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.dataBox h3 {
  margin: 0 0 12px 8px;
  font-size: 18px;
}
.dataBox div {
  padding: 18px;
  background: #fff;
  font-size: 14px;
  line-height: 1.4;
}
.category .cmtSec > div:nth-of-type(1) {
  margin-bottom: 0;
  padding-bottom: 10px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
}
.tags h3 {
  margin-bottom: 10px;
  font-size: 14px;
}

/*===================================
    アンケート
=====================================*/

/*  アンケート一覧
---------------------------------*/

.questArchive h3 {
  font-size: 18px;
}
.questArchive .move {
  font-size: 14px;
}
.questArchive {
  padding: 20px 20px 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.questArchive h3 {
  margin: 10px 0 30px;
  padding: 0 0 8px 8px;
  border-bottom: solid 1px #000;
}
.questArchive ul {
  margin-bottom: 30px;
}
.questArchive li {
  margin-bottom: 1em;
  padding-left: 33px;
}
.questArchive li:before {
  content: "Q";
  display: inline-block;
  padding: 4px 6px;
  margin: -2px 5px 0 -33px;
  background: #f6ac1d;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  vertical-align: middle;
}
.questArchive .move {
  text-align: right;
  line-height: 20px;
}

/*  アンケート（入力）
---------------------------------*/

.questionForm ul input,
.moveResult a {
  font-size: 18px;
  font-weight: bold;
}
.freePost {
  line-height: 1.4;
}
.questionForm,
.resultBlock {
  margin: 20px 0 50px;
}
.questionList,
.resultBlock {
  position: relative;
  margin-bottom: 20px;
  padding: 35px 39px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  line-height: 1.7;
}
.questionList dd {
  margin: -1.6em 0 7px 1.5em;
}
.questionList b:after {
  content: "：";
}
.questionForm ul {
  text-align: center;
}
.questionForm ul input {
  display: block;
  margin: 0 auto 20px;
  padding: 8px 30px;
  border: none;
  border: solid 1px #ccc;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
}

/*  アンケート（結果）
---------------------------------*/

.result.sec {
  margin-bottom: 50px;
}
.moveResult a {
  display: inline-block;
  margin: 30px auto 20px;
  padding: 5px 30px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
}
.moveResult,
.otherQuestion {
  text-align: center;
}

/************************************************************************************
smaller than 660px
*************************************************************************************/
@media screen and (max-width: 660px) {
  
  /*===================================
    layout  
  =====================================*/
  
  .sec {
    margin-bottom: 20px;
  }
  
  /*===================================
    background  
  =====================================*/
  
  /*  sprite
  ---------------------------------*/
  
  .archiveNavi a:before,
  .pager .prv a:before,
  .pager .nxt a:after,
  .archiveTtl:before,
  .cmtSec h3:before {
    background-size: 500px auto;
  }
  
  /*===================================
    highlight
  =====================================*/
  
  .highlight {
    margin-left: -10px;
    margin-right: -10px;
  }
  .highlight ul {
    margin: 0 -2px -12px 0;
    padding-left: 10px;
  }
  .highlight li {
    width: 144px;
    height: 108px;
    margin: 0 12px 12px 0;
  }
  .highlight li.pickup {
    clear: both;
    width: 320px;
    height: 180px;
    margin: 0 0 12px -10px;
  }
  
  /*===================================
    postList 記事一覧
  =====================================*/
  
  .archiveTtl.new:before {
    background-position: 0 -200px;
  }
  .archiveTtl.topic:before {
    background-position: -100px -200px;
  }
  .archiveTtl.rt:before {
    background-position: -200px -200px;
  }
  .postList p,
  .postList.larg p {
    font-size: 14px;
  }
  .postList.larg footer {
    font-size: 12px;
  }
  .postList,
  .postList.larg {
    margin-bottom: -10px;
    padding-top: 10px;
  }
  .postList li,
  .postList.larg li {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .postList figure,
  .postList.larg figure {
    width: 96px;
    height: 75px;
  }
  .postList p,
  .postList.larg p {
    height: 3.6em;
    margin: 0 0 6px 104px;
    line-height: 1.2;
  }
  
  /*===================================
    pager
  =====================================*/
  
  .pager {
    font-size: 11px;
  }
  .pager.sml {
    font-size: 14px;
  }
  .pager {
    margin: 30px -10px 20px;
    padding: 0 5px;
  }
  .pager a {
    padding: 7px 6px 6px;
  }
  .pager li.prv a,
  .pager li.nxt a  {
    padding: 7px 5px 6px;
  }
  .pager .prv a:before,
  .pager .nxt a:after {
    width: 4.5px;
    height: 8px;
  }
  .pager .prv a:before {
    margin: -2px 3px 0 0;
    background-position: -250px -100px;
  }
  .pager .nxt a:after {
    margin: -2px 0 0 3px;
    background-position: -300px -100px;
  }
  .pager.sml .prv {
    float: left;
    margin-left: 5px;
  }
  .pager.sml .nxt {
    float: right;
    margin-right: 5px;
  }
  .pager.sml .prv a:before,
  .pager.sml .nxt a:after {
    width: 9px;
    height: 16px;
  }
  .pager.sml .prv a:before {
    margin: -2px 8px 0 0;
    background-position: -250px -125px;
  }
  .pager.sml .nxt a:after {
    margin: -2px 0 0 8px;
    background-position: -300px -125px;
  }
  
  /*===================================
    contHeader
  =====================================*/
  
  .contHeader {
    margin: 0 -10px 30px;
    padding: 17px 10px 0;
  }
  .contHeader time {
    text-align: left;
  }
  .contHeader h2 {
    font-size: 22px;
  }
  .single .contHeader {
    margin-bottom: 10px;
  }
  .category .contHeader figure {
    float: none;
    width: 168px;
    margin: 0 auto 20px;
  }
  .category .contHeader h2 {
    margin: 0 0 20px;
  }
  .category .contHeader .btn {
    margin: 0 auto;
    text-align: center;
  }
  
  /*===================================
    catList
  =====================================*/
  
  .catList {
    margin-bottom: 20px;
  }
  
  /*===================================
    top
  =====================================*/
  
  .postArchive.sec {
    margin-bottom: 30px;
  }
  
  /*  archiveNavi
  ---------------------------------*/
  
  .archiveNavi h2 {
    font-size: 14px;
  }
  .archiveNavi {
    margin-left: -10px;
    margin-right: -10px;
  }
  .archiveNavi ul {
    margin-left: -1px;
  }
  .archiveNavi li {
    margin-left: 1px;
  }
  .archiveNavi a {
    display: block;
    width: 106px;
    height: 51px;
    padding-top: 10px;
    line-height: 1;
  }
  .archiveNavi a:before {
    display: block;
    margin: 0 auto;
  }
  .archiveNavi .n1 a:before,
  .archiveNavi .n2 a:before,
  .archiveNavi .n3 a:before {
    height: 30px;
  }
  .archiveNavi .n1 a:before {
    background-position: 0 -200px;
  }
  .archiveNavi .n1.current a:before {
    background-position: -50px -200px;
  }
  .archiveNavi .n2 a:before {
    background-position: -100px -200px;
  }
  .archiveNavi .n2.current a:before {
    background-position: -150px -200px;
  }
  .archiveNavi .n3 a:before {
    background-position: -200px -200px;
  }
  .archiveNavi .n3.current a:before {
    background-position: -250px -200px;
  }
  
  /*===================================
    single
  =====================================*/
  
  /*  sns
  ---------------------------------*/
  
  .sns {
    margin-bottom: 20px;
    padding: 12px 0;
    text-align: center;
  }
  .sns p,
  .sns ul {
    display: block;
  }
  .sns p {
    margin-bottom: 11px;
  }
  .sns li {
    width: 30px;
    margin: 0 7px;
  }
  
  /*  post
  ---------------------------------*/
  
  .post {
    margin-bottom: 10px;
  }
  .post p {
    margin-bottom: 1em;
  }
  
  /*  cmtSec
  ---------------------------------*/
  
  .cmtSec {
    margin-left: -10px;
    margin-right: -10px;
  }
  .cmtSec div {
    padding: 18px 10px;
  }
  .cmtSec > div:nth-last-of-type(1) {
    padding-bottom: 0;
  }
  .cmtSec div div {
    padding: 0;
  }
  .cmtSec h3:before {
    background-position: -350px -125px;
  }
  .cmtSec form {
    float: none;
    width: auto;
  }
  .cmtSec input {
    display: block;
    margin: 0 auto 20px;
  }
  
  /*===================================
    アンケート
  =====================================*/
  
  /*  アンケート一覧
  ---------------------------------*/
  
  .questArchive li {
    margin-bottom: 1.6em;
  }
  .questArchive li:before {
    margin-top: 0;
  }
  .questArchive .move {
    margin-top: 5px;
  }
  
  /*  アンケート（入力）
  ---------------------------------*/
  
  .questionList,
  .resultBlock {
    padding: 25px 20px;
  }
}