*, *:before, *:after {
-webkit-box-sizing: border-box; /* content-box; */
   -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;
}


body *{
  font-family:Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI",  Meiryo, "ＭＳ ゴシック", "MS Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*  transition-duration: 0.8s;
    transition-property: opacity; */
    /* opacity: 0.0; ← この行はここには書かない */
}

.feed_input textarea{
/*	padding: 2px;*/
}
div.feed_input input,
div.feed_input textarea{
	width: 100%;
  min-height: 5em;
  font-size: 1.2em;
  line-height:1.4em;
  padding:0.4em;
/*  padding: 5px 5px 5px 7px;*/
}
.topic textarea {
  min-height: 3em;
  padding-top:0.5em;
  font-size: 1em;
  line-height:1.5em;
}

.topic ._text{
  font-size: 1.2em;
  word-wrap:break-word;
  word-break: break-all;
}
.m_topic div._text{
  font-size: 1.1em;
}
.m_right textarea{
  font-size: 1.1em;
  line-height: 2em;
  padding: 10px;
}
div._text span:not(._post_type) {
  font-size: 1.2em;
}
div.topic {
	font-size: 0.9em;
	color: #666;
  border: 1px solid Lavender;
  margin:1em 0;
}
/*
div.comment_post ul:nth-child(2) textarea{
	font-size: 1.2em;
}
*/
div.btn-group button,
div.input-group input,
div.input-group textarea,
div.col.pull-right a.btn{
  font-size: 1em;
}
.Popup {border:solid 1px lightgray; background-color:white; color:#333333; position:absolute; font:10pt Arial,Verdana; cursor:default; z-index:10000;font-size:0.9em;}
.PopupMsg div {
  padding:0.5em;
  background-color: mistyrose;
}

.PopupList div {
  padding:0.5em 1em 0.5em 0.5em;
}

.PopupList div:hover {
  background-color:#e6e6e6;
  cursor: pointer;  
} 
.PopupList div:before {
  content: '　';
} 
.PopupList div:hover:before {
  color:#64B0EA;
  content: '\f00c';
  font-family: FontAwesome;
} 

div.topic div.welcom_pain {
  padding: 0;
  margin:0;
  font-size:10px;
  height: 400px;
  position: relative;
  text-align: center;
}
div.welcom_img {
  height: 300px;
  background-size:contain;
  background-position:center top;
  background-repeat:no-repeat;
  position: relative;
}
div.welcom_img a{
  color: gray;
  position: absolute;
  bottom: 2px;
  right: 130px;
}
div.welcom_img {
  background-image:url("/sharebook/img/book_tana.jpg");
}
div.welcom_img {
  background-image:url("/sharebook/img/book_tana.jpg");
}
div.welcom_img:hover{
  cursor: pointer;
}
div.welcom_img:hover:after{
  position: absolute;
  content: "→ 説明を見ますか？";
  font-size: 2em;
  top:8em;
  right:0px;
  background-color: rgba(192,102,64, 0.5);
  color: whitesmoke;
}
div.welcom_pain:after{
  content: "いろんな本を作ってシェア";
  font-size: 1.5em;
  color: rgba(192,102,64, 0.7);
}

/* Proifle */
#profile .feed_input ul:nth-child(1) li:nth-child(2){
	padding-left:1em;
	vertical-align: middle;
	font-size: 0.8em;
}
input[type="file"][action='change_input_image'] {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  width:0;
  right: 0;
  top: 0;
  cursor: pointer;
}

/* Topic */

span._post_type[post_type='1']:before {
  font-size: 0.9em;
  content: "\f096  ブログ　 ";
/*  content: "\f032  ﾌﾞﾛｸﾞ ";*/
  font-family: FontAwesome;
}
span._on._post_type[post_type='1']:before {
  font-size: 0.9em;
  content: "\f046  ブログ　 ";
/*  content: "\f032  ﾌﾞﾛｸﾞ ";*/
  font-family: FontAwesome;
}

.feed_input ul{
	list-style:none;
	width: 100%;
	padding:0;
	display:table;
	margin: 2px;
}
.feed_input ul li{
	display: table-cell;
	padding:0;
	margin: 2px;
}
.feed_input >ul:nth-child(1) li{
	vertical-align: top;
}
.feed_input >ul:nth-child(1) li:nth-child(1){
	width: 6.2em;
}
.feed_input >ul:nth-child(1) li:nth-child(3){
	width: 1px;
}
.feed_input >ul:nth-child(1) div{
	padding: 0 1em;
}


.feed_input >ul:nth-child(2){
	vertical-align: middle;
}
.feed_input >ul:nth-child(2) >li:nth-child(1){ /*owner imge*/
	width: 2em;
}
.feed_input >ul:nth-child(2) >li:nth-child(2){ /*owner name*/
  font-size: 1em;
  width: 14em;
  margin:0;
}
.goto_frend:before {
  font-family: FontAwesome;
  padding:0 0.5em;
  content: "\f007";
}
.goto_library:before {
  font-family: FontAwesome;
  padding:0 0.5em;
  content: "\f02d";
}
.goto_group:before {
  font-family: FontAwesome;
  padding:0 0.5em;
  content: "\f21d";
}

.feed_input >ul:nth-child(2) >li:nth-child(3){ /*owner button */
  text-align: center;
}
.feed_input >ul:nth-child(2) >li:nth-child(3) ul{ /*owner button */
/*  width:155px;*/
}
.feed_input >ul:nth-child(2) >li:nth-child(3) ul li{ /* follow frend button 参加中 */
  text-align: center;
  display: inline-block;
/*  width:100px;*/
}
.feed_input >ul:nth-child(2) >li:nth-child(4){ /* follow frend button */
  text-align: right;
}
.feed_input >ul:nth-child(2) >li:nth-child(4) ul li{ /* follow frend button */
  text-align: center;
  display: inline-block;
  width:200px;
}
.feed_input div.btn.frend_do_frend:before,
.feed_input div.btn.frend_do_follow:before,
.feed_input div.btn.frend_do_message:before {
  
}
.feed_input div#frends_counter {
  width:14em;
}

.feed_input >ul:nth-child(2) li:nth-child(5){ /* post button */
	width: 2em;
}
.feed_input .btn{
	font-size: 0.9em;
}


#lead img{
  display: inline-block;
	width: 3em;
	height: 3em;
  margin-right:0.5em;
	overflow: hidden;
	.img-responsive();
}

.feed_input ul:nth-child(1) img{
	width: 6em;
	height: 6em;
/*	background-color: white; */
	border: 1px darkgray solid;
	overflow: hidden;
	.img-responsive();
}

.feed_input ul:nth-child(2) img{
	width: 1.5em;
	height: 1.5em;
	margin-right:0.5em;
	border: 1px darkgray solid;
	overflow: hidden;
	.img-responsive();
}

._img_view{
  margin: 1em 0;
}

._img_view > div{
  float:left;
  /*width:46%; */
  text-align: center;
  display: inline-block; 
/*	vertical-align: top;*/
  position: relative;
}

._img_view >div >div:nth-child(1) {
  height: 0;
/*  padding-top: 50%; */
  display: block;

  /* border: 1px darkgray solid; */
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  /* background-size: contain; */
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
	/*.img-responsive(); */
}

._img_view >div._img_view_all,
._img_view >div._img_view_org {
  width:100%;
}
._img_view >div._img_view_all >div:nth-child(1),
._img_view >div._img_view_org >div:nth-child(1){
  -moz-background-size:contain;
  background-size:contain;
  background-position:center top;
  padding-top:70%;
}
._img_view >._img_view_w49 {
  width:48%;
  padding-left:1px;
}
._img_view >._img_view_w50 {
  width:49%;
  padding-left:1px;
}
._img_view >._img_view_w100 {
  width:98%;
}
._img_view >._img_view_h30 >div:nth-child(1){
  padding-top:33%;
  
}
._img_view >._img_view_h50 >div:nth-child(1){
  padding-top:50%;
}
._img_view >._img_view_h100 >div:nth-child(1){
  padding-top:100%;
}
._img_view div._img_view_end,
._img_view div._del_img{
  /*width:0;*/
  height:0;
}
._img_view >div:not(._img_view_all) div._image_plus {
  position: absolute;
  top:-2em; 
  right:8em; /*70%;*/
  color: rgba(50,50,50,0.5) ;
  /*color: dimgray;*/
}
._img_view >div:not(._img_view_all) div._image_plus:hover {
  color: rgba(29,94,199,0.5);
  right:8em; /*71%;*/
  font-weight:700;
}

._img_view >div:not(._img_view_all) div._image_plus:before {
  content: "(+"attr(count)")";
	font-size: 3em;
}


._img_view:hover {

  cursor: pointer;
}

/*
._img_view > div:nth-child(1){
  width:49%;
}
._img_view > div:nth-child(2){
  width:49%;
}
._img_view > div:nth-child(3){
  width:49%;
}
._img_view >div:nth-child(1) >div:nth-child(1) {
  padding-top:100%;
}
._img_view >div:nth-child(2) >div:nth-child(1) {
  padding-top:50%;
}
._img_view >div:nth-child(3) >div:nth-child(1) {
  padding-top:50%;
}
*/

._img_preview{
  background-color:Lavender;
}

._img_preview > div{
  display: inline-block; 
	vertical-align: top;
  background-color:white;
  position: relative;
	margin:0.5em;
}

._img_preview >div >div:nth-child(1) {
	width: 100px;
	height: 100px;
/*	border: 1px darkgray solid;*/
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /*	overflow: hidden;
	.img-responsive();*/
}

._img_preview ._del_img{
  width:1em;
}
._img_preview ._del_img:before {
  position: absolute;
  top:0; left:0;
  color: dimgray;
  content: "\f00d";
  font-family: FontAwesome;
	font-size: 1em;
}

._img_preview ._del_img:hover {
  font-size:130%;

  cursor: pointer;
} 
div._hidden {
   width: 0px;
   height: 0px;
   overflow: hidden;
}
div._img_input {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding: 0.2em 0;
}

._img_input input[type="file"] {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
/*  font-size: 100px;*/
  height:0;
  cursor: pointer;
}

div._img_input:before {
  /*cornflowerblue; */
  content: "\f030  写真を追加";
  font-family: FontAwesome;
  font-size: 0.9em;
}

._img_input:hover {
  color:#64B0EA; /*cornflowerblue; */
}
/************/

.topic ul{
	list-style:none;
	display:table;
  width:100%;
	margin:0;
	padding:0;
}
.topic  ul li{
	display: table-cell;
	vertical-align: top;
	margin:0;
	padding:0;
}
.topic > div:nth-child(1)  ul{
  width:100%;
}
.topic > div:nth-child(2) {
  /* background-color: WhiteSmoke; */
  padding: 0.2em 0.2em 0.5em 1.5em;
}

.topic > div:nth-child(1) {
/*  background-color: white; */
  border-bottom: 1px Lavender solid;
  padding: 0 0.2em 0.5em 1em;
}

._timeline > div:nth-child(1)  li:nth-child(1){
  width:45px;
}
._blog > div:nth-child(1) >ul:nth-child(1) li:nth-child(1){
  width:1px;
}
._blog > div:nth-child(1) >ul:nth-child(2) li:nth-child(1){
  width:45px;
}

.topic > div:nth-child(1)  li:nth-child(3) {
  width:10px;
}
.topic > div:nth-child(1) > ul a{
  display:inline-block;
}

._blog > div:nth-child(1) >ul:nth-child(2) img,
._timeline > div:nth-child(1) > ul img{
	width: 4em;
	height: 4em;
	margin-right:1em;
	border: 1px darkgray solid;
	overflow: hidden;
	.img-responsive();
}

.topic > div > div,
.topic > div ul{
  margin-top: 1em;
}
.topic > div:nth-child(2) li:nth-child(1){
  width: 32px;
}
.topic > div:nth-child(2)  li:nth-child(3) {
  width:10px;
}
.topic > div:nth-child(2)  li >div{
	vertical-align: top;
  display: inline-block;
}
.topic > div:nth-child(2)  li >div._block{
  display: block;
}

.topic > div:nth-child(2) img{
	width: 4em;
	height: 4em;
	margin-right:0.5em;
	border: 1px darkgray solid;
	overflow: hidden;
	.img-responsive();
}

.topic  div.post_counter{
  padding: 0.5em 0;
  clear:left;
}

/********/
#frend >div,
#group >div,
#message >div,
#infomation >div,
#profile >div{
  margin:1em 0;
}


.badge {
  background-color: #F7693D;
  font-size:0.6em;
  margin-left:3px;
}

#setting_infomation >div {
  margin:1em;
}
._infomation ul{
	list-style:none;
	display:table;
  margin:0;
  padding:10px 0.5em 5px 0.5em;
  width:100%;
}
._infomation  ul li{
	display: table-cell;
	vertical-align: top;
	margin:0;
	padding:0;
}
._infomation  ul li:nth-child(1){
  width: 120px;
  font-size: 0.6em;
}

div._goto_infomation {
/*  font-size: 0.8em;*/
  font-size: 0.9em;
  color: #FC3F00;
}
._goto_infomation:hover {
/*  cursor: hand;*/
  cursor: pointer;
}
._infomation ul:hover {
  border-bottom: 1px solid #64B0EA;
  padding-bottom:4px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  cursor: pointer;
}
._infomation ul[info_gry] {
  background-color: WhiteSmoke;
}

._infomation ul li:before {
  color: #555;
}

._infomation ul li[info_get]:before{
  color: darkorange;
}

._infomation ul li[info_new]:before {
  color: #FC3F00;
}

._infomation ul li[info_area='email']:before {
  content: "\f003";
  font-family: FontAwesome;
}
._infomation ul li[info_area='message']:before {
  content: "\f0e0";
  font-family: FontAwesome;
}
._infomation ul li[info_area='person_follow']:before {
  content: "\f164 ";
  font-family: FontAwesome;
}
._infomation ul li[info_area='person_frend']:before {
  content: "\f234 ";
  font-family: FontAwesome;
}
._infomation ul li[info_area='group_follow']:before {
  content: "G\f164 ";
  font-family: FontAwesome;
}
._infomation ul li[info_area='group_frend']:before {
  content: "G\f234";
  font-family: FontAwesome;
}
/**********/
#forum_form label {
  width: 14em;
  margin-left:1em;
}

/********/
a[href*="?user="]:hover,
a[href*="?group="]:hover {
  color: #64B0EA;
  font-weight:600;
}
/********/
#setting_message >div {
  color: #64B0EA;
  margin:1em;
}


div.m_topic {
	color: #666;
  border: 1px solid Lavender;
  margin:1em 0;
}
.m_topic > div,
.m_topic > ul{
  text-align: center;
  margin:1em;
}

.m_person ul,
.m_topic ul{
	list-style:none;
	display:table;
	margin:0.5em 0 0 0;
	padding:0;
  width:100%;
}

.m_person ul li {
	display: table-cell;
	vertical-align: bottom;
	padding:0;
}

.m_topic  ul li{
	display: table-cell;
	vertical-align: top;
	margin:0;
	padding:0;
}

.m_topic  ul.m_list_left[info_gry] {
  background-color: WhiteSmoke;
}

.m_topic  ul.m_list_left,
.m_topic  ul.m_list_right {
  padding:5px;
}

.m_topic  ul.m_list_left li,
.m_topic  ul.m_list_right li {
  text-align: left;
}
.m_topic  ul.m_left li{
  text-align: left;
}
.m_topic  ul.m_right li{
  text-align: right;
}

.m_person ul li:nth-child(1),
.m_topic  ul li:nth-child(1),
.m_topic  ul li:nth-child(3){
  width: 3.5em;
}
.m_topic  textarea{
  margin-left: 10%;
  width:80%;
}


.m_topic  li >div{
	vertical-align: top;
}
.m_topic .m_list_left img,
.m_topic .m_list_right img {
	margin-right:1em;
}

.m_topic .m_list_let li:nth-child(2) img,
.m_topic .m_list_right li:nth-child(2) img {
  margin: 1em;
}
.m_topic .m_left img{
	margin-right:1em;
}
.m_topic .m_right img{
	margin-left:1em;
}

.m_person img {
	width: 4em;
	height: 4em;
	border: 1px darkgray solid;
	overflow: hidden;
  margin-right:1em;
	.img-responsive();
}

.m_topic img{
	width: 4em;
	height: 4em;
	border: 1px darkgray solid;
	overflow: hidden;
	.img-responsive();
}

.m_topic ul li:nth-child(2) div{
  display: inline-block;
  position:relative;
  border: 1px solid gray;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 1em;
  padding: 1em;
}
.m_topic ul li:nth-child(2) div:before {
  content: "";
  display: inline-block;
  border: 10px solid transparent;
  position: absolute;
	width: 0px;
	height: 0px;
}
.m_topic ul.m_list_left li:nth-child(2) div:before,
.m_topic ul.m_left li:nth-child(2) div:before {
  left: -20px;
  top: 16px;
  margin-top: -9px;
  border-right-color: gray;
}
.m_topic ul.m_list_right li:nth-child(2) div:before,
.m_topic ul.m_right li:nth-child(2) div:before {
  right: -20px;
  top: 16px;
  margin-top: -9px;
  border-left-color: gray;
}
.m_topic ul li:nth-child(2) div:after {
  content: "";
  display: inline-block;
  border: 9px solid transparent;
  position: absolute;
	width: 0px;
	height: 0px;
}
.m_topic ul.m_list_left li:nth-child(2) div:after,
.m_topic ul.m_left li:nth-child(2) div:after {
  left: -18px;
  top: 16px;
  margin-top: -8px;
  border-right-color: #fff;
}

.m_topic ul.m_list_left[info_gry] li:nth-child(2) div:after {
  border-right-color: WhiteSmoke;
}
.m_topic ul.m_list_right li:nth-child(2) div:after,
.m_topic ul.m_right li:nth-child(2) div:after {
  right: -18px;
  top: 16px;
  margin-top: -8px;
  border-left-color: #fff;
}


/********/

.feed_post input{
	width: 100%;
}
._del_post,
.topic ._modify_post {
  color: lightgray;
}
._del_post:after{
  text-align: center;
  content: "\f00d";
  font-family: FontAwesome;
	font-size: 1em;
  margin-right:0.5em;
}
.topic ._modify_post:after{
  text-align: center;
/*  content: "\f078"; */
  content: "\f040";
  font-family: FontAwesome;
	font-size: 1em;
  margin-right:0.5em;
}
.topic .btn_group{
  text-align: right;
  display: inline-block;
  width: 100%;
}
.topic button{
  width: 6em;
  font-size: 0.8em;
  margin:0.5em 0 0.5em 0.2em;
  padding: 0.3em;
}
/* http://klutche.github.io/multilineEllipsis/ */
/*
.topic >div>div._text:not(._block) {
  display: inline-block;
}
.comment div._text:not(._block) {
  display: block;
}
*/
.topic div._text:not(._block) {
  display: inline-block;
  position: relative;
  max-height: 15em;
  overflow: hidden;
  margin-bottom:0;
}
.topic div._text:not(._block):before, 
.topic div._text:not(._block):after {
  position: absolute;
  background: #fff;
}
.topic div._text:not(._block):before {
  content: "･･･";
  color: #64B0EA;
/*  bottom: 0;*/
  top: 14em;
  right: 0;
}
.topic div._text:not(._block):after {
  content: "";
  width: 100%;
  height: 100%;
  display: inline;
/*  right: 1em;*/
}




#frend_list button:before{
  font-size: 0.9em;
}

.frend_do_message:before {
  content: "\f0e0  ﾒｯｾｰｼﾞ";
  font-family: FontAwesome;
}


/** user -> user/group **/
.frend_do_follow[is_follow='0']:before {
  content: "\f164  ﾌｫﾛｰする";
  font-family: FontAwesome;
}
.frend_do_follow[is_follow='1']:before {
  content: "\f164  ﾌｫﾛｰ中";
  font-family: FontAwesome;
}
/** user -> user **/
.frend_do_frend[user_id][is_frend='0']:before {
  content: "\f234  友達申請する";
  font-family: FontAwesome;
}
.frend_do_frend[user_id][is_frend='1']:before {
  content: "\f234  友達申請中";
  font-family: FontAwesome;
}
.frend_do_frend[user_id][is_frend='2']:before {
  content: "\f234  友達中";
  font-family: FontAwesome;
}
.frend_do_frend[user_id][is_frend='3']:before {
  color: #FC3F00;
  content: "\f234  友達申請されています";
  font-family: FontAwesome;
}
/** user -> group **/
.frend_do_frend[group_id][is_frend='0']:before {
  content: "\f234  参加申請する";
  font-family: FontAwesome;
}
.frend_do_frend[group_id][is_frend='1']:before {
  content: "\f234  参加申請中";
  font-family: FontAwesome;
}
.frend_do_frend[group_id][is_frend='2']:before {
  content: "\f234  参加中";
  font-family: FontAwesome;
}
.frend_do_frend[group_id][is_frend='3']:before {
  color: #FC3F00;
  content: "\f234  招待されています";
  font-family: FontAwesome;
}
/** group -> user **/
.frend_do_frend[user_id][is_frend='is_0']:before {
  content: "\f234  招待する";
  font-family: FontAwesome;
}
.frend_do_frend[user_id][is_frend='is_1']:before {
  content: "\f234  招待中";
  font-family: FontAwesome;
}
.frend_do_frend[user_id][is_frend='is_2']:before {
  content: "\f234  参加中";
  font-family: FontAwesome;
}
.frend_do_frend[user_id][is_frend='by_1']:before {
  color: #FC3F00;
  content: "\f234  参加申請されています";
  font-family: FontAwesome;
}

.frend_do_message:hover,
.frend_do_follow:hover,
.frend_do_frend:hover {
  color: #64B0EA;
  cursor: pointer;
  
}


.topic .post_counter span {
  color: gray;
  padding:0 0.5em;
}
.topic .post_counter span:nth-child(1):before {
  content: "\f164  ｲｲﾈ ";
  font-family: FontAwesome;
}
.topic .post_counter span:nth-child(2):before {
  content: "\f086  ｺﾒﾝﾄ ";
  font-family: FontAwesome;
}

span._on._post_type[post_type='1'],
._next,
.topic .post_counter ._on {
  color: #64B0EA;
}

span._post_type[post_type='1']:hover,
._del_post:hover,
.topic ._modify_post:hover,
.topic .post_counter span:not(._on):hover {
  color: dimgray;
  font-size:130%;

  cursor: pointer;
} 

._next:hover {
  color: #64B0EA;
  font-size:110%;

  cursor: pointer;
}

span._on._post_type[post_type='1']:hover,
.topic .post_counter span._on:hover {
  color: #64B0EA;
  font-size:130%;

  cursor: pointer;
} 
._message .m_list_left:hover,
._message .m_list_right:hover {
  border: 1px solid #64B0EA;
  padding:4px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  cursor: pointer;
}

/********/

/********/
.news {
	font-size: 0.9em;
	color: #666;
	margin:1em 0;
	padding:1em;
	border-bottom: 1px darkgray solid;
}
.topic_h {
	margin-bottom:0.4em;
}
.news .topic_d  ul{
	list-style:none;
	margin:0;
	padding:0;
}
.news .topic_d  li span{
  display: inline-block;
	vertical-align: middle;
}
.news .topic_d  li span:first-child{
	font-size: 0.7em;
	margin-right:0.5em;
	color: darksalmon;
}
.topic_d {
	margin-left:1em;
}
.topic_d img {
	display: block;
	max-width: 450px;
	max-height: 800px;
}

/* Navi */
/*
#nav_top  {
	min-width:480px;
	margin:0;
}
#nav_top .nav_tab {
	width:16.66%;
	min-width:80px;
	max-width:100px;
	font-size:0.7em;
}

#nav_top a {
	padding:7pt 2pt;
}
*/
ul.header {
	display:table;
	font-size:0.8em;
	text-align: center;
	width: 100%;
	list-style:none;
	margin: 0;
	padding: 0.5em 0 0.5em 1em;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}
/*
ul.header	li {
	display: table-cell;
	vertical-align: middle;
}
ul.header	li:nth-child(1) {
	width: 14em;
	text-align: left;
}

ul.header	li:nth-child(3) {
	text-align: right;
	padding-right:1em;
}
*/
ul.icontext {
		padding: 0;
		list-style: none;
    text-align: center;
}
ul.icontext li{
    margin: 0;
		padding: 0;
}

/* contents */
div#page_header {
	margin-bottom: 0.5em;
	border-bottom: 1px solid #eee;
}
div#page_header h2{
	font-size:1.2em;
}

div#announce {
	color:dimgrey;
	font-size:0.8em;
	margin-bottom: 2em;
}
/* user_regist_confirm */
.user_regist_confirm #confirm {
	text-align: center;
}

/* common */

i {
  color: darkslategray;
}

.disabled {
  pointer-events : none;
	color: gray;
}

.hide {
	display: none;
}

.left1em {
  margin-left: 1em;
}
._error:before {
	padding:0 0.5em;
	content: "\f06a";
  font-family: FontAwesome;
}
/* nav_tabs */
.nav_tabs a{
	height: 40px;
}


/*
.nav_tabs .fa-stack{
	font-size:0.8em;
	overflow: none;
}
*/

/* circle */
/*
#group li,#group label{
	font-size:0.9em;
}
*/
.treeview >ul.list-group{
  margin-bottom: 0;
}
.treeview li.list-group-item{
  padding:5px 15px;
}


.follow_find {
  padding:1em 1em;
  width:480px;
}
.follow_find .btn-group{
  text-align: right;
  margin:0.5em 0 2em 0; 
/*	min-width:430px;
	max-width:500px;*/
}

.follow_find .btn-group label{
	font-size: 0.9em;
  border-top: none;
  border-bottom: none;
}


  


div.frend_find_keyword {
/*  margin-bottom: 2em;*/
}


.follow_list .btn{
	font-size: 0.9em;
	padding-left:0.5em;
	padding-right:0.5em;
	margin-left: 1em;
}

/*
.follow_list ul {
	list-style:none;
	display:table;
	text-align: left;
  width:480px;
	padding:0;
}
  */



.follow_list img {
	width: 9em;
	height: 9em;
	margin-right:5px;
	margin-bottom: 2px;
/*	background-color: white; */
	overflow: hidden;
	.img-responsive();
}
.follow_list ul {
	width: 9.2em;
  list-style:none;
	display:inline-block;
	margin:0.5em;
  padding:0;
  font-size: 1em;
  text-align: center;
  border: 1px lightgray solid;
}
.follow_list  li:nth-child(2) {
  border-top: 1px lightgray solid;
  border-bottom: 1px lightgray solid;
  padding: 5px 0;
}
.follow_list li:nth-child(2) span{
  display: inline-block;
	white-space: nowrap; /* 改行を半角スペースに置き換える */
  overflow: hidden; /* はみだした部分を削除する */
  text-overflow: ellipsis; /* 末尾に「…」を付加する */
}
.follow_list:not(.sw_dsp_list) li:nth-child(2) span{
  width: 9em; /*110px;*/
}

/*
.follow_list li {
	width: 160px;
  list-style:none;
	display:inline-block;
	margin:10px 10px;
  padding:0;
  font-size: 1em;
	border: none;
}
*/
/***/
.follow_list.sw_dsp_list{
  width:100%;
}
.follow_list.sw_dsp_list img {
	width: 4em;
	height: 4em;
	margin: 2px;
	border: 1px darkgray solid;
	overflow: hidden;
	.img-responsive();
}
.follow_list.sw_dsp_list ul {
	list-style:none;
	display:table;
	text-align: left;
  border: none;
  border-bottom: solid 1px lightgray;
	padding:0;
  margin: 1em 0 0 1em;
  font-size: 1em;
	vertical-align: middle;
  width: 100%;
}

.follow_list.sw_dsp_list li {
	display: table-cell;
  text-align: left;
}
.follow_list.sw_dsp_list li:nth-child(1){
  width: 3em;
  padding-right: 0.5em;
}
.follow_list.sw_dsp_list li:nth-child(2) {
  border: none;
  width: 50%;
	vertical-align: middle;
}
.follow_list.sw_dsp_list li:nth-child(2) span{
  max-width:98%;
  white-space:normal;
}
.follow_list.sw_dsp_list li:nth-child(3){
  /*width: 30%;20em;*/
  display:inline-block;
	vertical-align: middle;
}
.follow_list.sw_dsp_list li:nth-child(3) div,
.follow_list.sw_dsp_list li:nth-child(3) a{
  text-align: left;
  display: inline-block;
  width: 5.5em;
}

/***book list***/

#book_list .coverimg {
	width: 5em;
	height: 7em;
  margin-right:5px;
	margin-bottom: 10px;
	border: 1px darkgray solid;
	overflow: hidden;
  background-size: 100% 100%;
  text-align: center;
  font-size: 2em;
}
#book_list ul {
  list-style:none;
	display:inline-block;
	margin:0.5em;
  padding:0;
  font-size: 1em;
	border: none;
	text-align: center;
}
/*
#book_list li {
  position: relative;
}

#book_list li span {
	white-space: nowrap; 
  display: inline-block;
  magin:0;
  padding: 0;
  height: 1.2em;
}
*/
#book_list li:nth-child(2) span{
  display: inline-block;
	white-space: nowrap; /* 改行を半角スペースに置き換える */
  overflow: hidden; /* はみだした部分を削除する */
  text-overflow: ellipsis; /* 末尾に「…」を付加する */
}
#book_list:not(.sw_dsp_list) li:nth-child(2) span{
  width: 11em;
}
#book_list li:nth-child(3) span{
  font-size: 0.9em;
  padding:0;
}
#book_list li:nth-child(4) span{
  display: inline-block;
  font-size: 1.2em;
  padding:0;
}


#book_list.sw_dsp_list .coverimg {
/*	width: 160px;
	height: 200px;
*/
  width:2em;
  height:3em;
  margin-right:5px;
	margin-bottom: 10px;
	border: 1px darkgray solid;
	overflow: hidden;
  background-size: 100% 100%;
  text-align: center;
}

#book_list.sw_dsp_list ul {
	list-style:none;
	display:table;
	text-align: left;
  border-bottom: solid 1px lightgray;
	padding:0;
  margin: 1em 0 0 1em;
  font-size: 1em;
  width: 100%;
}

#book_list.sw_dsp_list li {
	display: table-cell;
  text-align: left;
	vertical-align: middle;
}
#book_list.sw_dsp_list li:nth-child(1){
  width: 2em;
}

#book_list.sw_dsp_list li:nth-child(2){
  width: 50%;
	vertical-align: middle;
}
#book_list.sw_dsp_list li:nth-child(2) span{
  max-width:98%;
  white-space: normal;
  overflow: visible;
  display:inline;
}

#book_list.sw_dsp_list li:nth-child(3) span{
	vertical-align: middle;
  font-size: 0.8em;
  display:inline-block;
  padding-right: 0.5em;
}
#book_list.sw_dsp_list li:nth-child(4) span{
  width: 2.5em;
  text-align: right;
	vertical-align: middle;
}
.goto_group:hover,
.goto_frend:hover,
.goto_library:hover {
  font-size: 1.2em;
  color: #64B0EA;
  cursor: pointer;
}
.goto_cover:hover,
.remove_book:hover,
.goto_book:hover,
.edit_book:hover {
  color: #64B0EA;
  cursor: pointer;
}
.stop_book:hover:before {
  position: absolute;
  left:40%;
  color:rgba(255,94,94,0.7);
  font-family:WebHostingHub-Glyphs;
  content: "\f477";
}
.remove_book:before{
  font-family:WebHostingHub-Glyphs;
  padding: 0 10px;
  content: "\f470";
}
.edit_book:before {
  font-family:WebHostingHub-Glyphs;
  padding: 0 10px;
  content: "\f1b7";
}

swich_dsp_list {
  color: #64B0EA;
  cursor: pointer;
}
.swich_dsp_list:before{
  font-family:WebHostingHub-Glyphs;
  content: "\f110";
}
.swich_dsp_list.sw_dsp_list:before{
  font-family:WebHostingHub-Glyphs;
  content: "\f111";
}

/*** book list ***/
#myprofile, #top, #frend, #group, #message, #infomation, #library, #forum {
/*  font-size: 1em;*/
/*  min-width:430px;
*/
/*  padding-right: 0.5em; */
}

.profimg {
	width: 8em;
	height: 8em;
	margin-right:1em;
	margin-bottom: 10px;
	background-color: lightgray;
	border: 1px darkgray solid;
	overflow: hidden;
  background-size: 100% 100%;
  text-align: center;
	font-size: 1.5em;
}
.profimg:hover:before {
  color: rgba(29,94,199,0.7);
  content: "クリック写真登録";
}

div.pull-right.btn.btn-default{
  font-size: 1em;
}


/* regist form */
/*
#login input,
#regist input{
  font-size: 1.4em;
  padding: 5px 5px 5px 7px;
  height:2em;
}
#login div.input-group,
#regist div.input-group{
  font-size: 1em;
  height: 1em;
}
*/
#login div.input-group,
#login input{
  font-size: 1.1em;
  height:2.2em;
}

#regist div.input-group,
#regist input:not(type="checkbox"){
  font-size: 1.1em;
  height:2.2em;
}
#regist,#login {
	width:90%;
	margin: 2em auto;
}
#regist > ul,
#login > ul{
	list-style:none;
	display:table;
	padding:0;
}
#regist > ul > li,
#login > ul > li{
	display: table-cell;
	vertical-align: middle;
}
#regist > ul >li:first-child,
#login > ul >li:first-child{
	font-size:0.8em;
	width: 9em;
}
#regist > ul >li:not(:first-child),
#login > ul >li:not(:first-child){
	width: 22em;
}
#regist > ul >li:not(:first-child) a,
#login > ul >li:not(:first-child) a{
	font-size:0.7em;
	margin: 1.2em 1em;
}
#regist .fixed-panel,
#login .fixed-panel {
	min-height: 7em; /*100px;*/
	max-height: 21em; /*300px;*/
	overflow-y: scroll;
	font-size:0.8em;
}
#regist .fixed-panel .title,
#login .fixed-panel .title{
	font-weight: bold;
	margin:1em 0 0.2em 0;
}
#regist .fixed-panel ul,
#login .fixed-panel ul{
	padding-left:1.5em;
}
#regist .btn,
#login .btn {
    width: 8em;
}
#login > div[name='infomation'] {
  display: none;
}
#regist > div[name='infomation'] {
  font-size: 0.9em;
  display: block;
}
#regist > div[name='infomation']{
  
}
/* my form */

.my_form {
	width:100%;
	margin: 2em 0;
}

.my_form div.col{
	margin: 10px 0;
}

.my_form  ul:not(.list-group):not(.dropdown-menu){
	list-style:none;
	display:table;
	padding:0;
	width: 100%;
}
.my_form  ul:not(.list-group):not(.dropdown-menu) > li{
	display: table-cell;
	vertical-align: middle;
/*	font-size:0.9em;*/
}
.my_form  ul:not(.list-group):not(.dropdown-menu) >li:first-child{
	min-width: 5em;
	width: 20%;
}
.my_form  ul:not(.list-group):not(.dropdown-menu) >li:not(:first-child){
	min-width: 20em;
	width: 80%;
}
div.col div.btn,
.my_form .btn {
  font-size: 1.1em;
  padding: 10px;
}
.my_form label{
	font-weight: normal;
  font-size: 1.1em;
  height: 1.3em;
  vertical-align: middle;
}

div.input-group input,
div.input-group>input,
div.input-group>span{
/*  padding: 10px;*/
  font-size: 1em;
  height: 3em;
}
div.input-group {
  height: 3em;
  font-size: 1em;
}

.my_form div.treeview{
  font-size: 1em;
  line-height: initial;
}
.my_form textarea {
  padding: 10px;
  font-size: 1.1em;
  line-height: 1.7em;
}
.my_form select > option,
.my_form ul.dropdown-menu.inner>li>a {
  font-size: 1.2em;
}