/*■■■　詳細　■■■*/



/*keyword*/
.kw{ float:left; margin:5px 20px; color:#999; width:100%;}
.kw-btn{ float: left; margin:0 5px 0 0; padding: 3px 10px; border:#999 solid 1px; border-radius: 3px; }
.kw-btn form, .kw-btn input{ float:right; margin: 0 0 0 5px; }
.kw-delbtn{ font-size: 10px; }
.kw-delbtn:hover{ cursor: pointer; }

/*基本情報*/
.tbl1{ float:left; margin:20px 0 0 0px; border-collapse:collapse; font-size:20px; width:65%; }
.tbl1 th{ width:28%; height:40px; font-weight:normal;}
.tbl1 td{ padding:12px 0; }
.tbl1-val{  font-size:42px; font-weight:bold; color:#DC2725;}
.tbl2{ float:left; margin:2px 0 0 20px; border-collapse:collapse; border:#CCC solid 1px; font-size:16px; width:530px;}
.tbl2 th{ width:40%; padding:5px 10px 0 10px; border:#CCC solid 1px; font-weight:normal; line-height: 1.2; text-align: left;}
.tbl2 td{ padding:6px 10px; border:#CCC solid 1px;}
.tbl2-val{ font-size:20px; font-weight:bold;}
.pic{ float:left; border:#CCC solid 1px; width:290px; height:auto; margin:20px 0 0 10px;}
.memo{ float:right; clear:both; margin:0 55px 0 0; font-size:12px;}


/*個人*/
.p-all{float: left; margin:10px 0 0 0; width:100%; }
.p-box{ float: left; width: 120px; margin:0 3px; }
.p-all a{ float: left;  }
.p-all a:hover{ opacity: 0.6; cursor: pointer; }
.p-pic{ float: left; width:120px; height: 120px; overflow:hidden; border-radius: 5px;  }
.p-info{ float: left; width: 100%; margin:5px 0 0 0; text-align: center; line-height: 1.1; }
.p-info span{ font-size: 14px; }


/*好き嫌い偏差*/
.hensa{ float:left; margin:30px 0 10px 70px; width:90%;}
.like{ float:left; width:400px; border-collapse:collapse; }
.like th{ padding:0 20px; }
.like td{ font-size:36px; font-weight:bold; }
.h-box{ position:relative; float:left; margin:0 0 0 10px; padding:45px 0 5px 0; width:300px; border:#DC2725 solid 5px; border-radius:5px; text-align:center; font-size:70px; font-weight:bold; }
.h-titile{ position:absolute; padding:5px 15px; top:-20px; left:60px; font-size:18px; border-radius:5px; background-color:#DC2725; color:#FFF;}
.h-rank{ font-size:18px; font-weight:normal; color:#333;}

/*説明*/
.exp{ position:relative; float:left; margin:30px 0 0 10px; padding:25px 25px 15px 25px; width:880px; border:#393 solid 3px; border-radius:5px; word-break: break-all;}
.exp-title{ position:absolute; top:-18px; left:-10px; background:#093; color:#FFF; font-size:18px; padding:5px 20px ; border-radius:5px; font-weight:bold;}


/*■コメント■*/
.c-all{ float: left; margin: 0px 15px; padding: 25px; width: 850px; border:#000 solid 3px; }
.c-title{ float:left; margin: 30px 15px 0 15px; padding: 15px 20px 10px 30px; width: 850px; font-size: 26px; color:#FFF; font-weight: bold; background-color: #000; }
.inputbox{ border-radius: 5px; border:#000 solid 3px; padding:5px 10px;  font-size: 18px;}
.c-name{ float: left; width: 400px; height: 47px;}
.c-txt{ float: left; width: 790px; height: 80px; }


/*性別*/
.q-box1{float:left; margin:0 0 0 20px; }
.q-box1 input{float:left; display: none;}
.q-box1 label{  display: block; float:left; margin:0 2px 0 0; width: 120px; padding: 12px 10px; background: #999999; color:#FFF; font-size: 20px; text-align: center;}
.q-box1 label:hover, .btn:hover{ opacity:0.8; cursor:pointer;}
.q-box1 label:first-of-type{border-radius: 5px 0 0 5px; margin:0 2px 0 0px;}
.q-box1 label:last-of-type{border-right: 0px; border-radius: 0 5px 5px 0;}
.q-box1 input[type="radio"]:checked + .lb1 {background-color: #09F;color: #fff;}
.q-box1 input[type="radio"]:checked + .lb2 {background-color: #F36;color: #fff;}


/*年齢*/
.q-box2{float:left; margin:10px 0; clear:both;}
.q-box2 input{float:left; display: none;}
.q-box2 label{  display: block; float:left; margin:0 2px 0 0; width: 97px; padding: 12px 10px; background: #999999; color:#FFF; font-size: 20px; text-align: center;}
.q-box2 label:hover, .btn:hover{ opacity:0.8; cursor:pointer;}
.q-box2 label:first-of-type{border-radius: 5px 0 0 5px; margin:0 2px 0 0px;}
.q-box2 label:last-of-type{border-right: 0px; border-radius: 0 5px 5px 0;}
.q-box2 input[type="radio"]:checked + .lb-age {background-color: #0C0;color: #fff; }

.c-btn{ float: right; margin: 15px; padding: 15px 0 0 0; width: 200px; height: 50px; background-color: #000; color: #FFF; font-size: 26px; text-align: center;border-radius: 5px;}
.c-btn:hover{ opacity: 0.8; cursor: pointer; }


/*Thankyou*/
.c-area2{ float: left; margin: 0px; padding: 20px; width: 100%; font-size: 36px; font-weight: bold; text-align: center; display: none;}
.c-area2 span{ font-size: 18px; }

/*コメント履歴エリア*/
.c-hist-box{float: left; padding: 20px; background-color: #FDEAF6;border-radius: 10px; max-height: 300px; overflow-y:auto;}
.c-hist{float: left; width: 740px;  color: #919191; border-spacing: 0 5px; color: #333;}
.c-hist th{ width: 45px;  padding:5px 0 0 0; vertical-align: top;}
.c-hist td{ font-size: 18px; padding: 0 20px 0 0; word-break: break-all;}
.c-hist td span{ font-size: 12px; color: #666;}





/*■給与明細■*/
.m{ float:left; margin:20px 10px 30px 20px; padding:30px; width:850px; border:#CCC solid 1px; background-color:#FCFCF8;
box-shadow:rgba(0, 0, 0, 0.580392) 2px 2px 9px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0.580392) 2px 2px 9px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0.580392) 2px 2px 9px 0px;}
.tbl-m1{ float:left; margin:0; border-collapse:collapse; border:#CCC solid 2px;}
.tbl-m1 td{ padding:15px 10px 10px 20px;}
.m1-title{ font-size:24px; font-weight:bold; color:#333;}
.m1-name{ font-size:20px; }

.tbl-m2{ float:left; clear:both; width:780px; margin:10px 0 0 0; border-collapse:collapse; border:#CCC solid 1px; }
.tbl-m2 th{ background-color:rgba(0,0,0,0.1); border:#CCC solid 2px; font-weight:normal; }
.tbl-m2 td{ padding:10px; text-align:right; border:#CCC solid 2px; padding-right:20px; }
.g_msg{ float:left; margin:5px 0 0 0; width:780px; text-align:right; color:#666;}

/*最近の動画*/
.video{ float:left; margin:10px 0 0 0; width: 100%; }
.video td{ vertical-align:top; font-size:16px; line-height:120%; width:178px;}
.video td:hover{ opacity:0.6; cursor:pointer; word-break: break-all;}
.v-date{ font-size:12px; margin-left:5px; color:#999;}
.v-pic{ height: 130px; overflow:hidden; }
.v-title{ word-break: break-all; }
/*カテゴリー構成*/
.cat-list{ float:left; margin:20px 0 0 10px; width:35%; border-collapse:collapse;}
.cat-list th{ font-weight:normal; background:#CCC; border:#CCC solid 1px; }
.cat-list td{ padding:2px 10px; border:#CCC solid 1px; }
#piechart{ position:relative; float:left; margin:10px 0 0 5px; width:60%; height:300px; overflow:hidden; z-index:1; }
#chart-category{ position:absolute; float:left; top:-20%; left:-20%; width:150%; height:400px; z-index:0; }

/*各種チャート*/
.tbl-val{ float:left; width:30%; border-collapse:collapse; border:#CCC solid 1px;}
.tbl-val th{border:#CCC solid 1px;}
.tbl-val td{border:#CCC solid 1px;}
#chart-au{ float:left; width:100%; height:300px; }
#chart-ac{ float:left; width:100%; height:300px; }
#chart-up{ float:left; width:100%; height:300px; }
#chart-like{ float:left; width:100%; height:300px;}

/*同系統・レコメンド*/
.same{ float:left; margin:10px 0 20px 0; width:100%;}
.same-link{ float:left;}
.same-box{ position:relative; float:left; margin:10px 5px 5px; width:170px; height:240px; text-align:center; }
.same-title{ float:left; margin:7px 0 0 0; width:100%;}
.same-val{ position:absolute; padding:3px 0; top:120px; height:50px; width:170px; font-size:18px; font-weight:bold; background-color:rgba(220,39,37,0.8); color:#FFF; border-radius:5px; transform: rotate(-10deg);	-moz-transform: rotate(-10deg);	-webkit-transform: rotate(-10deg); line-height:100%; }
.same-s{ font-size:14px; font-weight:normal;}



/*ボタン*/
.btn-back{ float: left; margin:0 180px; padding:20px 0; width:550px; background:#000; font-size:32px; font-weight:bold; border-radius:5px; text-align:center; color:#FFF;}
.btn-back:hover{ opacity:0.6; cursor:pointer;}

h1{ float:left; margin:20px 0 0 0; padding:0 0 5px 15px; width:100%; line-height:120%; font-size:36px; border-bottom:#DC2725 solid 4px;}
h2{ float:left; margin:40px 0 0 0; padding:0 0 5px 15px; width:100%; border-bottom:#DC2725 solid 4px;}
h1 span{ float: right; font-size: 14px; margin-right: 20px; }