@charset "utf-8";

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, input, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, object, embed
{
margin: 0px; 
padding: 0px; 
border: 0px; 
outline: 0px; 
}

dl, dt, dd, ol, ul, li {
list-style:none;
}

img {
border: 0;
}

li {
list-style: none;
}

input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
b{ font-weight:bold}

/***************************************
 * Global
 ***************************************/

* {
  padding:0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo,sans-serif;
  font-size: 14px;
  /* for IE6/7 */
  *font-size:small;
  /* for IE Quirks Mode */
  *font:x-small;
  line-height: 1.5;
  color: #333; 
  width:100%;
  height:100%;
}




/***************************************
 * Common
 ***************************************/


.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden;/**/}

a {
  color: #555555;
  text-decoration:none;
}

img {
  vertical-align: bottom;
}

a:hover  { 
  text-decoration:none;
}

input, select, textarea {
  font-size: 100%;
}

button {
  padding: 5px 40px;
  border-radius: 5px;
  color: #fff;
  font-size: 90%;
  font-weight: bold;
  cursor: pointer;
}

.element2 {
  display: block;
}

.gray {
  background-color:#eeeeee;
}

.fl_left{ float:left}
.fl_right{ float:right}

.clear{ clear:both}

/***************************************
 * Layout
 ***************************************/
 
#wrapper {
  width: 100%;
  margin: 0;
  background:white;
  color:#7c7c7c;
  padding-bottom:45px
}

/*==================
 * Header
 */
 
#mobiledata{
background: #2bb8d1;
position:fixed;
left:0;
top:0;
z-index:100;
width:100%;
height:30px;
}
#mobiledata .mobile{ padding:5px; color:white; background:url(../images/battery.png) no-repeat right center; background-size:20px; margin-right:5px; font-size:10px}
#mobiledata .time{
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin:5px auto 0 auto;
text-align:center;
font-size:10px;
color:white;
}
header {
  width:100%;
  padding-top:30px;
  height:40px;
  background: #2bb8d1;
  position:relative
 }

header h1 {
  width: 100px;
  height: 22px;
  background:url(../images/logo.png) no-repeat center 0 ;
  text-indent: -10000px;
  margin:13px auto 0 auto;
  background-size:100px;
}
header.profile  {
  height:40px;
 }
header.profile h1 {
  width: 200px;
  height: auto;
  background:none;
  text-indent: 0;
  text-align:center;
  font-size:18px;
  color:white;
  margin:13px auto 0 auto;
  background-size:100px;
}
header a.back{ display:block; text-indent:-9999px; position:absolute; background:url(../images/back_arrow.png) no-repeat; width:15px; height:15px; background-size:100%; left:10px; bottom:10px}

section.entry{
padding-bottom:10px;
}
section.entry .entryHead{
padding:10px 10px;
}
section.entry .entryHead .name{
float:left;
font-size:15px;
width:50%;
}
section.entry .entryHead .name img.circle{
width: 25px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
vertical-align:bottom;
margin-right:5px;
}

section.entry .entryHead .time{
float:right;
width:50%;
text-align:right;
padding-top:5px;
}
section.entry .entryHead .time span{ background:url(../images/clock.png) no-repeat left center; padding-left:15px; background-size:10px; font-size:12px}

section.entry article.img{ padding:5px 0}
section.entry article.img img{ width:100%;}
section.entry article.txt{ padding:0 10px; font-size:12px;}
section.entry article.txt .good{ background:url(../images/good.png) no-repeat left center; background-size:10px; padding-left:15px; font-weight:bold; color:#2bb8d1}
section.entry article.txt .comment{ background:url(../images/comment.png) no-repeat left 4px; background-size:13px; padding-left:15px}
section.entry article.txt .comment b{font-weight:bold; color:#2bb8d1; padding-right:5px}
section.entry article.txt .comment p{ padding-bottom:5px}

section.entry article.txt a.goodBt{ 
display:block;
padding:5px 15px 5px 20px;
background:#eaeaea url(../images/good.png) no-repeat 5px center;
background-size:10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
margin-right:10px;
float:left;
color:#9f9f9f;
cursor:pointer;
}
section.entry article.txt a.comBt{ 
display:block;
padding:5px 15px 5px 20px;
background:#eaeaea url(../images/comment.png) no-repeat 5px center;
background-size:12px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
margin-right:10px;
float:left;
color:#9f9f9f;
cursor:pointer
}

/*ファンのプロフ*/
section.entry .entryHead .nameProf {
float:left;
font-size:15px;
width:30%;
}
section.entry .entryHead .nameProf img.circle.big{
width: 80px;
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
vertical-align:bottom;
margin-right:5px;
margin-left:10px;
}
section.entry .entryHead .info{
width:70%;
float:right;
}
section.entry .entryHead .info ul { padding-right:10px; padding-bottom:10px}
section.entry .entryHead .info ul li{ float:left; width:33%; text-align:center; font-size:12px; color:#999;}
section.entry .entryHead .info ul li span{ font-size:15px; font-weight:bold}
section.entry .entryHead .info a.follow{
display:block;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding:3px;
text-align:center;
border:1px solid #2bb8d1;
color:#2bb8d1;
}
section.entry .entryHead .info div.edit{
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding:3px;
text-align:center;
background:#eaeaea;
}

div.profCont{ padding:10px;}
section.entry article img.profImg{ width:30%; margin:1%;}
section.entry article.prof{ border-top:1px solid #eaeaea;}
section.entry article.prof p{ padding:10px;}

/*フッタナビ*/
nav{
width:100%;
position:fixed;
height:45px;
background:#3c3c3c;
bottom:0;
left:0;
}
nav ul li{ float:left; width:20%; height:45px; background-color:#3c3c3c; text-indent:-9999px; background-position:center center; background-repeat:no-repeat; background-size:40%;}
nav ul li a{ background-position:center center; background-repeat:no-repeat; height:45px; width:100%; background-size:40%;}
nav ul li.home a{ background-image:url(../images/ic_home.png); display:block;}
nav ul li.search{ background-image:url(../images/ic_search.png);}
nav ul li.camera a{ background-image:url(../images/ic_camera.png); background-color: #2bb8d1; display:block;}
nav ul li.good a{ background-image:url(../images/ic_good.png); background-size:50%; display:block;}
nav ul li.prof a{ background-image:url(../images/ic_prof.png); display:block;}


/*拍手*/
p.clap{ padding:10px}
form.clap { padding:10px}
form.clap input[type="text"]{ width:90%; border:1px solid #9f9f9f; padding:5px; margin:5px auto; display:block}
form.clap textarea{ width:90%; height:60px; border:1px solid #9f9f9f; padding:5px; margin:5px auto; display:block}
form.clap input[type="submit"]{
-webkit-appearance: none;
display:block;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color:white;
text-align:center;
background: #2bb8d1;
cursor:pointer;
width:200px;
padding:10px;
margin:10px auto;
}

/*カメラ*/
body#camera{ background:#343434}
div.cameraWrapper{ position:relative; width:100%; height:100%;}
div.cameraWrapper p{
position:absolute;
width:100%;
height:200px;
text-align:center;
color:white;
font-size:14px;
top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
}
div.cameraWrapper p span{
display:block;
background:#f6ff00;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color:#343434;
text-align:center;
width:80%;
margin:20px auto;
padding:10px;
font-size:16px
}