@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:#333;
  padding-bottom:45px
}

/*==================
 * Header
 */
 
#mobiledata{
background: #fff;
position:fixed;
left:0;
top:0;
z-index:100;
width:100%;
height:30px;
}
#mobiledata .mobile{ padding:5px; color:#333; 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:#333;
}
header {
  width:100%;
  padding-top:25px;
  height:40px;
  background: #fff;
  position:relative;
  border-bottom:1px solid #ddd;
 }

header h1 {
  width: 100%;
  height: 32px;
  background:url(../images/logo.png) no-repeat center 0 ;
  text-indent: -10000px;
  margin:5px auto 0 auto;
  background-size:120px;
}
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}

header #attention{ overflow: hidden; text-align:center; font-size:11px; padding:5px 0 5px 50px}
div.pc{ position:absolute; width:100%; background:#000000; top:0}
header #scroll{ color:white; white-space:nowrap; margin:0 0 0 100%; width:200%; text-align:left;}
header div.pc:before{
 content:"!";
 line-height:20px;
 box-sizing:border-box;
 text-align:center;
 width:20px;
 height:20px;
 border-radius:20px; 
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 background:white;
 color:#ff7200;
 position:absolute;
 left:0px;
 top:2px;
 font-size:18px
}


#index_chat{ overflow:hidden; height:100%}

section.entry{
padding-bottom:30px;
}
section.entry .entryHead{
padding:10px 10px 5px 5px;
}
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 .time{
padding-top:5px;
}
section.entry .time span{ font-size:10px; color:#ccc}


section.entry article.img{ padding:5px 0}
section.entry article.img img{ width:100%;}
section.entry article.txt{ padding:0 10px; font-size:12px; position:relative}
section.entry article.txt .good{ background-size:10px;font-weight:bold; color:#333; margin-bottom:8px; display:inline-block}
section.entry article.txt .good:before{ content:"♥"; color:#999;}
section.entry article.txt .good.clicked:before{ color:#C00}
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:#333; padding-right:5px}
section.entry article.txt .comment p{ padding-bottom:8px}

section.entry article.txt a.twitter{ 
background:#000; display:inline-block; color:white; padding:3px 10px; border-radius:30px;
position:absolute; right:5px; top:0; font-size:11px}


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
}

ul.imglist{ display: flex;flex-wrap: wrap;justify-content:space-between}
ul.imglist::after{
  content:"";
  display: block;
  width:calc(33% - 1%);
}
ul.imglist li{ width:calc(33% - 1%); margin-right:1%; margin-bottom:8px}
ul.imglist li:nth-child(3n){margin-right:0}
ul.imglist li img{ width:100%}

/*ファンのプロフ*/
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;
border-top:1px solid #ddd;
}
nav ul li{ float:left; width:20%; height:45px; background-color:#fff; 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_prof.png); display:block;}
nav ul li.good a{ background-image:url(../images/ic_good.png); display:block;}
nav ul li.prof a{ background-image:url(../images/ic_twitter.png); display:block;}

a.chat{ display:block; width:50px; height:50px; border-radius:50%; background:#75cf00 url(../images/ic_chat.png) no-repeat center center; background-size:70%; position:fixed; bottom:40px; right:10px; z-index:1000; text-indent:-9999px}

@media only screen and (min-width: 800px) {
header{ padding-top:30px; height:50px;}
header h1{ width:100%; height:50px; background-size:200px; margin:0 auto}
#wrapper{ padding-bottom:80px}
section.entry{ width:800px; margin:20px auto}
section.entry article.txt{ font-size:14px}
section.entry .time span{ font-size:12px}
nav{ background:white;height:80px;}
nav ul{ width:800px; height:80px; margin:0 auto}
nav ul li { height:80px;background-size:30%}
nav ul li a{ height:80px;background-size:30%!important}
a.chat{ width:80px; height:80px; bottom:40px; right:5%}
ul.imglist{width:800px; margin:20px auto}
}

/*line*/
section#line{ padding:30px 10px 10px 20px; color:white; overflow:scroll;box-sizing:border-box; height:100%;}

/*section#line h3{
font-size:16px;
text-align:left;
}
section#line p.time{ text-align:left}

section#diary ul,
section#line ul{ text-align:left; padding-top:20px}
section#line ul h4{font-weight:bold; display:inline-block; padding-right:10px}
section#line ul li{
position: relative;
display:block;
padding:10px;
width: auto;
font-size:14px;
z-index: 0;
color:white;
 font-weight:normal;
}*/
section#line h3{
background:rgba(255,255,255,0.2);
text-align:center;
padding:5px 10px;
width:40%;
font-size:12px;
font-weight:normal;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
margin:0 auto 10px auto;}

section#diary ul,
section#line ul{ text-align:left}
section#line ul h4{ font-size:11px; font-weight:normal; padding-bottom:5px}
section#line ul li{
position: relative;
display: inline-block;
padding:10px;
width: auto;
min-width: 80%;
border: 1px solid #fff;
font-size:12px;
background:#000;
z-index: 0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom:10px
}
section#line ul li:before{
content: "";
position: absolute;
top: 50%; left: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 9px 9px 9px 0;
border-color: transparent #000 transparent transparent;
z-index: 0;
}
section#line ul li:after{
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #fff transparent transparent;
z-index: -1;
}
section#line ul#diaryList{ margin-top:50px}
section#line ul#diaryList li h4{margin-top:-30px; margin-bottom:10px}

@media only screen and (min-width: 769px) {
section#line ul#diaryList li h4{margin-top:-50px; margin-bottom:30px}
}

div#diaryList div{ display:none}

section#line ul li{
min-width: 90%;
}

@media only screen and (min-width: 769px) {
.remodal{ max-width:100%;}
section#line{ padding:50px 0}
section#line h3,section#line p.time{ text-align:center}
section#line ul{ width:60%; margin:10px auto}
section#line ul h4{ font-size:14px;}
section#line ul li{ padding:20px; font-size:14px; margin-bottom:20px}
section#booth{ padding:5%}
section#booth div.img{height:100%; background-position:center center; background-size:auto;}
}


/*拍手*/
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
}


#clap input[type="text"],
#clap textarea{ border:1px solid #ccc;width:90%; padding:10px}
#clap input[type="submit"]{ padding:10px;border-radius:5px; width:200px; margin:0 auto; display:block; background:#000; color:white; font-size:18px}
#clap p{ padding-bottom:20px;}
#clap .entry{ padding:10px}
@media only screen and (min-width: 769px) {
#clap input[type="text"],
#clap textarea{width:300px;}
#clap p{text-align:center}
}

#messageBox{ width:100%; height:100%; background:rgba(0,0,0,0.8); position:absolute; z-index:1000; left:0; top:0}
a.message{ border:1px solid #fff; display:block; position:absolute;width:90%; background:#000; padding:10px; border-radius:10px; color:white; left:5%; top:40%; text-align:center;box-sizing:border-box}
a.message p{ width:80%; text-align:center; border:1px solid #fff; margin:10px auto; padding:10px;border-radius:5px;}


@media only screen and (min-width: 769px) {
a.message{ width:50%; left:25%; padding:50px 20px}
a.message p{ width:50%;}
}

section#line ul#diaryList li{ display:none}


/*last*/
#last{ background:url(../images/tohaku_back_2.jpg) no-repeat center top; height:100%; position:relative; background-size:cover}
#last.pat2{ background:url(../images/tohaku_back_1.jpg) no-repeat center top;}

#img{ background:url(../images/mikaduki_1.png)no-repeat center top; background-size:cover; height:100%;}
#img.pat2{ background:url(../images/mikaduki_2.png)no-repeat left top; background-size:cover;}

@media only screen and (min-width: 769px) {
#last{ background:url(../images/tohaku_back_2.jpg) no-repeat center center; height:100%; position:relative; background-size:cover}
#last.pat2{ background:url(../images/tohaku_back_1.jpg) no-repeat center center;}
#img,
#img.pat2{ background-size:contain;}
.logo{ width:200px; height:100px}
p.rec{ font-size:20px}
}