h1{font-weight: normal;}
h2{float: left; width: 96%; margin:10px 2% 0 2%; padding: 8px 3% 6px 3%; font-size: 2.2rem; line-height: 1.2;
	border:#000 solid; border-width: 2px 0;
}




/*ランキング*/
.act{ float: left; padding: 0 ; margin:18px 2%; padding: 0 0 0 1%; width: 96%;}
.act-box{position: relative; float: left; width: 19%; margin:0 1% 7px 0; background-color: #FFF;  height: 200px; } 
.act-pic{position: relative;display: block; width: 100%; height: 150px; margin:0 2% 0 0; overflow: hidden;  z-index: 1; }
.act-data{display: block; width: 100%;  color: #0079c2; font-size:1.4rem;  padding: 3px 0 0 0;  }
.act-name{ font-size: 1.4rem; line-height: 1; margin:3px 0 0 0; text-align: center; padding:0 0; overflow: hidden;}
.act-name p{font-weight: normal; margin: 3px 0 0 0; font-size: 1.2rem; color: #333;}

.act-vote{ position: absolute; bottom:5px; right:0px; padding:0px 8px 0 10px; background-color: rgba(0,0,0,0.7); color: #FFF; font-size: 1.2rem; border-radius: 4px 0 0 4px; }
.act-vote i{ margin-right: 3px; color: #FFD0D0;}
.act-rank{ position: absolute; top: -17px; left: 0px; width: 35px; z-index: 5;}
.act-rank span{margin: 0; font-size: 0.8rem;}
.act a:hover{ cursor: pointer; opacity: 0.6; }

/*もっと見る*/
.h2-more{float: left; margin: 3px 0 3px 0;width: 100%;text-align: center;}
.h2-more a {color: #fff; text-align: center; background-color: #000;
	padding: 7px 30px 8px 30px;border-radius: 20px; font-size: 1.6rem; line-height: 1.2;}

/*年齢*/
.ar{ float: left; width: 100%; padding:  0 3%; margin:10px 0 20px 0; }
.ar-box{ float: left; width: 100%; margin:0 0 5px 0; }
.ar-col{ float: left; width: 14%; margin:0 1px 0 0; padding: 5px 0 6px 0; background-color: #333; color: #FFF; text-align: center; line-height: 1.2; border-radius: 3px 0 0 3px; font-size: 1.6rem;}

.ar-btn{ float: left; width: 14%; margin:0 1px 0 0; padding: 5px 0 6px 0; background-color: #54C411; color: #FFF;  line-height: 1.2; text-align: center; font-size: 1.6rem;}
.ar-btn:last-of-type{ border-radius:0 3px 3px 0; }
.ar-btn-unit{ font-size: 1.2rem;  }
.ar a:hover{ cursor: pointer; opacity: 0.6;  }


/*都道府県別*/
.pref{ position: relative; float: left; width: 94%; padding: 15px 3% 10px 3%; margin:15px 3% 10px 3%; background-color: #F8FCF5; border:#89D58D solid 2px; border-radius: 3px;}
.pref-col{ position:  absolute; top:-10px; left: 5px; background-color: #333; color: #FFF; padding: 3px 15px; border-radius: 5px; font-size: 1.4rem; line-height: 1.2;}

.pref-box{float: left; width: 100%; padding:0; color: #999;}
.pref-btn{ float: left; margin:0 3px 0 0; font-size: 1.6rem; }
.pref-count{ font-size: 1.4rem; }
.pref a:hover{ cursor: pointer; opacity: 0.6;  }


/*血液型*/
.bl{ float: left; width: 100%; padding:  0 3%; margin:10px 0 20px 0; }
.bl-box{ float: left; width: 100%; margin:0 0 5px 0; }
.bl-col{ float: left; width: 14%; margin:0 1px 0 0; padding: 5px 0 6px 0; background-color: #333; color: #FFF; text-align: center; line-height: 1.2; border-radius: 3px 0 0 3px; font-size: 1.6rem;}

.bl-btn{ float: left; width: 20%; margin:0 1px 0 0; padding: 5px 0 6px 0; background-color: #54C411; color: #FFF;  line-height: 1.2; text-align: center; font-size: 1.6rem;}
.bl-btn:last-of-type{ border-radius:0 3px 3px 0; }
.bl-btn-unit{ font-size: 1.4rem;  }
.bl a:hover{ cursor: pointer; opacity: 0.6;  }



/*■コメント■*/
.co-all{ float: left; width: 100%; margin:8px 0 0 0;}
.co-area-befor{ width: 100%; height: 100px; line-height: 1.1; padding:0px 3%;}
.co-area-after{ position: relative; float: left; width: 100%; height: 100px; line-height: 1.1; text-align: center; padding:20px 0 0 0; font-size:30px; font-weight: bold; color: #ff2c4f;}
.co-area-after-s{ font-size: 16px; color: #333;}
.co-input{ float: left; width: 100%; margin:5px 0 0 0; padding: 3px 8px; border:#999 solid 1px; font-size: 16px; border-radius: 5px; -webkit-appearance: none; background-color: #FCFFFB; border:#73D077 solid 2px;}
.co-name{ width:400px; }
.co-txt{ height: 100px;}
.co-btn-box{ float: left; width: 100%; height: 55px;}
.co-btn{ float: right; width: 20%; height: 35px; margin:10px 0 0 0; padding: 7px; background-color: #00b208; color: #FFF; border-radius: 5px; text-align: center; font-size: 16px; line-height: 1; border:none;}
.co-btn:hover{ cursor: pointer; opacity: 0.6; }
.co-hist{ float: left; width: 94%; margin:0px 3% 10px 3%; background-color: #FFFDF8; border:#E4D5A7 solid 2px; border-radius: 5px;}
.co-exp{ float: left; width: 96%; margin:10px 0; padding: 0 5%; color: #756F63; font-size: 12px;}

.co-hist-list{ float: left; width: 94%; margin:10px 3%; border-collapse: collapse;}
.co-hist-list th{ width: 30px; text-align: center;}
.co-hist-list th i{ margin:2px 0 0 0; font-size: 1.4rem;}
.co-hist-list th .fa-trash-alt{ color: #999;}
.co-hist-list th{ padding: 3px 0px; line-height: 1.3; vertical-align: top; word-break: break-all;}
.co-hist-list td{ padding: 3px 3px; line-height: 1.3; vertical-align: top; word-break: break-all;}
.co-hist-list td p{ margin: 0 0 5px 0;}
.co-hist-list th.co-img-th{width: 80px; vertical-align: top; padding-top: 5px;}
.co-hist-list th.co-img-th img{width:100%; height:auto;}
.co-hist-comment{ font-size: 1.6rem;}
.co-hist-list-td-s{ font-size: 1.2rem; color: #777;}
.co-hist-list-td-pic{ float: left; width: 90%;}
.co-hist-list-td-pic-img{ display: block; max-width: 100%; border:#FFF solid 3px; box-shadow: 2px 2px 5px rgba(0,0,0,0.4);}
.co-hist-list-td-info{ float: left; width: 100%; margin:5px 0 15px 0; font-size: 1.1rem; line-height: 1.5;}
.co-hist-list-td-info-i{ margin:0 3px 0 0;}
.co-hist-list td .cc-name{
    display: block;
    padding: 5px 0;margin-bottom:5px;
    font-size: 16px;line-height: 1.3;
    color: #666;
    font-weight: bold;
    border-bottom: #DEDEDE solid 1px;
}

.co-hist-list-td-hukai{ color: #FFD1D1;}
.co-hist-list-td-hukai-after{ color: #BBBBBB;}


.co-del-btn{ margin:5px 5px 0 0px;}
.co-del-btn:hover{ cursor: pointer; opacity: 0.6; }
.co-del-btn i{ margin:0 5px 0 0;}
.co-del-btn-exp{ font-size: 1rem; color:#9E9E9E;}
.co-del-btn:hover{ cursor:pointer; background-color:transparent; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
.fa-comment{ color: #C4AE75; margin:0 10px 0 0;}


.comment-link{ float: left; width: 100%; margin:5px 0 30px 0; text-align: center;}
.comment-link a{ background-color: #EF340F; color: #FFF; padding: 8px 20px; border-radius: 5px; font-size: 1.4rem;}
.co-none{ float: left; color:#CABD9B; margin:10px 20px; padding: 0; font-size: 1.6rem; }

.co-note{ float: left; width: 100%; padding: 2px 5%; font-size: 0.8rem; color:#666;}


.co-loading{position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,.7);
  background-image: url(../image/design/co-loading.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px auto;}
.co-hide{ display: none;}
.co-img-info{ float: left; width: 60%; line-height: 1.2; margin:10px 0 0 0; color: #D69696;}