@charset "UTF-8";
/* CSS Document */

/* ============================================================
   このCSSは、応援コメントの詳細ページでのみ使用されています。
============================================================ */

/* ============================================================
   大枠
============================================================ */
#main {width: 100%;margin: 0 auto 0 auto;height: auto;}
#comContent {width: 100%;background: #f5f5f5;height: 100%;padding-top: 40px;}
#comBase {margin: 0 auto 40px auto;width: 1000px;}
.leftInside{width: 660px;float: left;}
.rightInside{width: 310px;height: auto;background: white;float: right;}

/* ============================================================
   ハートを押した時のPOPUPアニメーション
============================================================ */
.popHeartBase {position: fixed;width: 200px;height: 200px;z-index: 99999;margin-left: -100px;margin-top: -100px;background: rgba(250, 204, 2, 0.8);border-radius: 50%;left: 50%;top: 50%;display: none;}
.popHeartBase--animated{display: block;animation: in-out 0.8s ease;}
@keyframes in-out{0%{ transform:scale(0); }30%{ transform:scale(1.3); }55%{ transform:scale(1); }100%{ transform:scale(0); }}
.popHeartBaseIn-block{display: flex;justify-content: center;align-items: center;padding-top: 52px;padding-bottom: 15px;}
.popHeartBaseIn--clap{width: 100px;height: 100px;fill:#ffffff;}
.popHeartBaseIn-text{color: white;font-size: 24px;text-align: center;}

/* ============================================================
   HERO
============================================================ */
.titleArea {height: 131px;background-color: #eeeeee;padding-top: 16px;}
.titleAreaIn{width: 1000px;margin: auto;height: 99px;background: #fff;border-radius: 4px;display: table;position: relative;}
.titleAreaIn > div{display: table-cell;vertical-align: middle;}
.heroImg {display: block;border-radius: 4px;margin-left: 13px;}
.titleAreaIn01{width: 160px;}
.heroText {color: #333;font-size: 23px;padding: 0 13px;line-height: 1.3;width: 715px;}
.titleAreaIn02{width: 125px;}
.goHome{display: block;}
.titleAreaIn:hover{text-decoration: none;}
.heroImg:hover{opacity: 0.8;}
.heroText:hover {text-decoration: underline;opacity: 0.8;}
.goHome:hover{opacity: 0.8;}

/* ============================================================
   合計値
============================================================ */
.com-aside {background: #f5f5f5;display: flex;justify-content: center;padding: 30px 0 8px 0;}
.com-asidein{display:flex;justify-content: center;align-items: center;}
.com-asidein-thumb{display: block;width: 145px;height: 82px;border-radius: 4px;}
.com-asidein-thumb:hover{opacity: .8;}
.com-asidein-box01{margin-right: 44px;}
.com-asidein-box02{display:flex;align-items: center;margin-right: 50px;}
.com-asidein-box03{display:flex;align-items: center;}
.icon-clap,.icon-com-04{fill:#989BA0;}
.icon-clap{width: 38px;height: 38px;margin-right: 15px;}
.icon-com-04{width: 35px;height: 35px;margin-right: 17px;}
.com-count-like,.com-count-commnt{font-size: 25px;color: #5F6163;}

/* ============================================================
   タブナビゲーション
============================================================ */
#tabNavigation {width: 1000px;margin: auto;height: auto;}
#tabNavigation li{float: left;}
#tabNavigation a{width: 190px;display: block;text-align: center;height: 41px;line-height: 42px;margin-right: 10px;position: relative;text-decoration: none;border-radius: 4px 4px 0 0;font-size: 14px;font-size: 1.4rem;}
.tabOn {background: #f5f5f5;color: #333333;}
.tabOff{background: #01B1DA;color: white;}
.tabOff:hover{background:#21bde1;}
.tabAlert{text-decoration: none;color: white;background: #0fa1c3;padding: 4px;border-radius: 6px;margin-left: 10px;}
.tabAlert02{text-decoration: none;color: white;background: #4dac25;padding: 4px;border-radius: 6px;margin-left: 10px;}

/* ============================================================
   スタータス記述部分
============================================================ */

/*  書き込むボタン ------------------------ */
.status {width: 1000px;margin: auto;}
.writeBtnBase{/* display: table-cell; *//* width: 120px; */}
.backLink {font-size: 12px;color: #989fa9;margin: 14px auto 24px auto;display: inline-block;}
.backLink:hover{text-decoration:none;opacity:0.8;}
.nenwJoin {display: none;width: 91px;height: 50px;background: #55c1e7;border-radius: 2px;border-bottom: 2px solid #42b0d8;position: relative;text-align: center;color: white;font-weight: bold;text-decoration: none;font-size: 20px;line-height: 50px;cursor: pointer;-webkit-transition: all 0.2s ease;}
.nenwJoin i {display: block;width: 30px;height: 30px;background: url("../img/icon_commnication_write_top.png") no-repeat 0 0;position: absolute;left: 32px;top: 6px;}
.nenwJoin:hover{background: #1ad4ff; border: none; top:2px;}


/*  支援金額のステータス ------------------------ */
.moneyBase {display: table-cell;margin-top: auto;position: relative;}
.moneyBase > div {float: right;}
.mB01{margin-right: 13px;}
.mB01 i {display: inline-block;width: 34px;height: 34px;background: url("../img/icon_commnication_money_top.png") no-repeat 0 0;margin-right: 7px;}
.mB01 span{color: #a6aaae;font-size: 11px; font-size: .1.1rem;}
.mB02 {margin-right: 13px;letter-spacing: 0.3px;}
.mB02_01{color: #5f6163;font-size: 37px;font-size: 3.7rem;}
.mB02_02{color: #a6aaae;font-size: 11px;font-size: 1.1rem;}
.mB03{padding-top: 6px;}
.mB03 p{color: #a6aaae;margin-bottom: 7px;font-size: 11px;font-size: 1.1rem;}
.mB03Gage {width: 113px;height: 8px;line-height: 28px;background: #d3d3d3;margin: auto;border-radius: 4px;overflow: hidden;}
.mB03GageIn {height: 8px;line-height: 8px;background: #bbf117;position: relative;width: 0%;border-radius: 4px;}

/*  ハートエリアのステータス ------------------------ */
.heartBase {display: table-cell;width: 200px;}
.heartBase div{float: right;}
.totalHeart{display: inline-block;width: 39px;height: 34px;background: url("../img/icon_commnication_heart_top_on.png") no-repeat 0 0;}
.hB01{margin-right: 10px;}
.heartBase span{color: #a6aaae;font-size: 11px; font-size: .1.1rem;}
.hB02{color: #5f6163;font-size: 37px;font-size: 3.7rem;}

/* ============================================================
   1記事
============================================================ */
/*section*/
.post {border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;background: white;box-shadow: 0 3px 0px #e3e4e8;margin-bottom: 30px;}

/*ユーザーの写真など*/
.postUser {
  width: 100%;
  padding: 20px 20px 0 20px;
  position: relative;
  display: flex;
  align-items: center;
}
.postUser > div {display: table-cell;vertical-align: middle;}
.postUserPhoto{width: 40px;height: 40px;background-size: cover;border-radius: 4px;}
.postUserPhoto img{border-radius: 4px;display: block;}
.poster img {}
.postUserName{color: #989fa9; font-size: 16px; font-size: 1.6rem;}
.postUserName span{
    color: #686c73;
    display: inline-block;
    width: 450px;
}
.postFirstb {width: 52px;}
.postUserNameDate {
    color: #838994;
    font-size: 11px;
    margin-bottom: 6px;
}

.show_more_like_users{display: inline-block;width: 100%;text-align: center;padding: 18px;font-size: 14px;}
.show_more_like_users:hover{cursor:pointer;text-decoration: none;opacity: 0.8;}
.loading-text{display: inline-block;width: 100%;text-align: center;padding: 18px;color: #838994;font-size: 14px;}

.postTextChange{position: relative;}
.postTextChange01{font-size: 10px;font-size: 1rem;color: white;padding: 7px 10px;background: #AEB3BB;border-radius: 4px;cursor: pointer;display: block;position: absolute;top: 31px;right: 83px;}
.postTextChange01:hover,.postTextChange02:hover{opacity:0.5;}
.postTextChange02{font-size: 10px;font-size: 1rem;color: white;padding: 7px 10px;background: #AEB3BB;border-radius: 4px;cursor: pointer;display: block;position: absolute;top: 31px;right: 26px;}

.postText{padding: 20px;}
/*ユーザーの写真など*/
.postText__contents{
    color: #484c50;
    font-size: 15px;
    line-height: 1.7;
}
.owner-post__title{display:block;margin-bottom: 8px;font-size: 20px;font-weight: bold;line-height: 25px;color: #3e3e3e;padding: 14px;border-left: 5px solid #f7c600; border-radius: 1px;}
.postTextPhoto {display: block;width: 100%;padding-bottom: 10px;}

/*ハート*/
.postHeart{display: flex;display: -webkit-flex;-webkit-align-items:center;padding:16px 20px;position: relative;border-top:1px solid #F6F6F6;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}
.postHeartArea{position: absolute;left: 19px;top: 15px;display: table;}
.clap-wrapper{margin-right: 24px;}
.action-clap__icon{width: 22px;height: 22px;margin-right:3px;position:relative;top:1px;-webkit-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
.action-clap__icon:hover{fill: #faaa02;cursor: pointer;}
.action-clap__number{font-size: 14px;color:#808080;position: relative;bottom: 5px;}
.action-com__icon{fill:#9aa0a5;width: 22px;height: 22px;margin-right: 9px;}
.action-com__number{font-size:14px;color:#808080;}

.iconHeartOn:hover{opacity: 0.5;}
.detailFace{width: 9px;height: 19px;right: 31px;top: 12px;}
.detailFace:hover{opacity: 0.7;}
.detailTwitter:hover{opacity: 0.7;}
.share-wrapper{position: absolute;right:22px;}
.shareDescription{margin-left: 16px;font-size: 1rem;color: #A9ACAF;}
.iconFacebook{margin-left: 6px;width: 19px;height: 19px;fill: #C7CBD1;}
.iconTwitter{margin-left: 10px;width: 19px;height: 19px;fill: #C7CBD1;}
.shareLink{margin-left: 8px;top: 12px;padding:4px;width: 300px;font-size: 1.1rem;color: #5F6163;line-height: 20px;border-radius: 4px;border:solid 1px #b7babf;}
.postHeartArea span{margin-left: 7px;font-size: 12px;font-size: 1.2rem;color: #90959c;}

/*SNS*/
.postSnsArea{position: absolute;right: 17px;top: 14px;width: 22px;height: 19px;cursor: pointer;background: url("../img/icon_commnication_sns.png") no-repeat 0 0;}
.iconSns{display: block;width: 22px;height: 19px; cursor: pointer;display: block;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;}
.postSnsArea:hover{opacity: 0.5;}
.snsToolTips {width: 147px;height: 88px;background: white;box-shadow: 0px 0px 8px 2px #e3e4e8;position: absolute;z-index: 25;border: 1px solid #e3e4e8;border-radius: 4px;right: -42px;top: 51px;font-size: 1.4rem;padding: 23px;display: none;}
.snsToolTips a {color: #90959c;font-size: 14px;margin-bottom: 14px;display: block;}
.snsToolTips a:hover{opacity: 0.7;text-decoration: none;}
.snsToolTips a+a{margin: 0;}
.snsToolTips:after{content: "";position: absolute;left: 50%;top: -26px;border: 13px solid transparent;border-bottom: 13px solid #FFFFFF;margin-left: -13px;width: 13px;}
.snsToolTips:before {content: "";position: absolute;left: 50%;top: -28px;border: 14px solid transparent;border-bottom: 14px solid #e3e4e8;margin-left: -14px;width: 13px;}

/*記事編集*/
.postchangeBase{position: relative;margin: 22px;}
.edit-title__title{font-weight: bold;font-size: 14px;padding-bottom:10px;color:#636363;}
.owner-post__title-wrapper{position: relative;margin-bottom: 22px;border: 1px solid #e6e6e6;border-radius: 4px;}
.title-counter{position: absolute;right: 9px;bottom: 9px;color: #c5c5c5;font-size: 13px;}
.owner-post__title--edit{
    background: #f9f9f9;
    font-size: 15px;
    line-height: 20px;
    padding: 6px;
    padding-right: 54px;
    width: 100%;
    border: none;
    resize: none;
  -webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.owner-post__title--edit:focus{
  outline: none;
}
.cnt__wrapper--thread-edit{position: absolute;right: 9px;bottom: 9px;color: #c5c5c5;font-size: 13px;}
.edit-title__text{font-weight: bold;font-size: 14px;padding-bottom: 10px;color: #636363;}
.textInput03-wrapper{position:relative;border: 1px solid #e6e6e6;padding-bottom:24px;background: #f9f9f9;}
.textInput03 {border: none;background:#f9f9f9;width: 100%;padding:6px;height: 109px;resize: none;border-radius: 4px;line-height:20px;-moz-border-radius: 4px;-webkit-border-radius: 4px;-o-border-radius: 4px;-ms-border-radius: 4px;font-size: 14px;font-size: 1.4rem;}
.textInput03:focus{outline:none;}
.postPost03 {display: block;border: none;cursor: pointer;outline: none;height:36px;border-radius: 2px;margin-left:12px;padding:10px 22px;font-size: 13px;background-color: #f7c600;color: #fff;}
.postPost03:hover{opacity: .8;}
.postPost03Load {display: block;border: none;cursor: pointer;outline: none;border-radius: 2px;margin-left:12px;height: 36px;width:70px;background: url("../img/common_loading.gif") no-repeat 50% 50% #f7c600;background-size: 18px;}


/* ============================================================
   かきこみフォーム
============================================================ */
#lean_overlay{position: fixed; z-index:9999;top: 0px;left: 0px;height: 100%;width: 100%;background: #000;display: none;}
#joinFom {background: #FFFFFF;box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);display: none;width: 660px;height: 540px;border-radius: 4px;overflow: hidden;box-shadow: 0 3px 0px #e3e4e8;}
.modal_close {position: absolute;top: 8px;right: 7px;display: block;width: 20px;height: 20px;background: url('../img/btn_form_close.png') no-repeat 0 0;z-index: 2;cursor: pointer;z-index: 9999;overflow: visible;}
/*フォーム中身*/
.textInput {padding: 6px;color: #90959c;border: none;width: 505px;height: 143px;resize: none;border: 1px solid #b7babf;background: #fbfbfb;border-radius: 4px;font-size: 14px;}
.postPost {display: block;border: none;cursor: pointer;outline: none;border-radius: 2px;width: 84px;height: 43px;background: url("../img/icon_commnication_pop_comment.png") no-repeat 27px 8px #21bde1;position: absolute;right: 26px;top: 150px;}
.postPost:hover{background-color: #1ad4ff;}
.cB01{margin-bottom: 18px;padding: 26px 26px 0 26px;}
.cB02{display: table;padding: 0 26px;margin-bottom: 20px;}
.cB02 > div{display: table-cell;width: 127px;height: 111px;}
.cB03{background: #f6f8fa;width: 100%;height: 196px;padding: 26px;}

/*画像アップロード*/
.file {display: block;overflow: hidden;position: relative;width: 110px;height: 111px;background: url("../img/icon_commnication_upload.png") no-repeat 0 0;}
.file input[type="file"] {opacity: 0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);position: absolute;right: 0;top: 0;margin: 0;font-size: 100px;cursor: pointer;}
.imgFit{width: 110px;height: 111px;background: url("../img/photo_03_308_198.jpg") no-repeat 0 0;background-size: cover;border-radius: 4px;position: relative;}
.file:hover{opacity:0.7;}
.imgFitDelete {font-size: 10px;font-size: 1rem;color: white;padding: 7px 10px;background: rgba(0, 0, 0, 0.52);border-radius: 4px;cursor: pointer;display: inline-block;position: absolute;top: 6px;right: 6px;}
.imgFitDelete:hover{opacity: 0.7;}
.cB03Abst{color: #90959c; margin-bottom: 10px; font-size: 14px; font-size: 1.4rem;}
.cB03_Up{display: table;margin-bottom: 30px;}
.cB03_Up > div{ display: table-cell; vertical-align: middle;}
.cB03_Up_01{width: 112px;}
.cB03_Up_02{width: 64px;}
.cB03_Up_03{font-size: 12px;font-size: 1.2rem;color: #90959c;}
.cB03_Down{display: table;}
.cB03_Down > div{ display: table-cell; vertical-align: middle;}
.cB03_Down_01{width: 112px;}
.cB03_Down_02{width: 64px;}
.cB03_Down_03{font-size: 12px;font-size: 1.2rem;color: #90959c;}
.postFormFace {background: url("../img/btn_com_facebook_off.png") no-repeat 0 0;width: 58px;height: 30px;cursor: pointer;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.postFormFaceOn{background: url("../img/btn_com_facebook_on.png") no-repeat 0 0;width: 58px;height: 30px;cursor: pointer;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.disNone {display: none;}
.connectAccount{width: 46px;height: 46px;background-size: cover;border-radius: 4px;background: url("../img/photo_profile_175_175.jpg") no-repeat 0 0;background-size: cover;}
.connectAccountNone{width: 46px;height: 46px;border-radius: 4px;background: rgb(199, 199, 199);}
.postFormTwi {width: 58px;height: 30px;background: url("../img/btn_com_twitter_off.png") no-repeat 0 0;cursor: pointer;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
.postFormTwiOn {width: 58px;height: 30px;background: url("../img/btn_com_twitter_on.png") no-repeat 0 0;cursor: pointer;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}

/* ============================================================
   コメント
============================================================ */

.messageBase{padding: 0 20px;border-radius: 4px;background: white;box-shadow: 0 3px 0px #e3e4e8;}
.postUser02 {border-bottom: 1px solid #f1f1f3;padding: 20px 0;}
.postUser02:nth-last-of-type(1){border-bottom: none;}
.postUser02:hover{}.postUser02 > div {float: left;}
.postUser02 > form > div {float: left;}
.postUserPhoto02{width: 40px;height: 40px;border-radius: 4px;}
.postUserPhoto02 img{border-radius:4px;}
.postUserName02 {max-width: 565px;color:#7A7F86}
.post-date{ color: #b7b7b7;font-size: 11px;margin: 4px 0 3px 0;}
.response_name{color: #686c73;font-size: 15px;line-height: 1.6;}
.postFirstb02 {width: 55px;}
.response_comment{ color: #484c50;font-size: 14px;line-height: 1.7;margin-top: 8px;}
.postCommentChange{margin-top: 12px;display: flex;}
.edit_comment_btn{font-size: 10px;color: #fff;padding: 7px 10px;background: #969AA0;border-radius: 4px;cursor: pointer;margin-right: 14px;}
.del_response{font-size: 10px;color: #fff;padding: 7px 10px;background: #969AA0;border-radius: 4px;cursor: pointer;display: block;}
.comment-rightside{float: right;margin-left: 16px;}
.comment-rightside{color: #9c9c9c;font-size: 14px;}
.textInput02-wrapper{position:relative;background: #fafafa;margin-top:8px;border: 1px solid #e6e6e6;border-radius: 4px;}
.textInput02 {width:430px;padding: 6px;border: 1px solid #d9dbe0;border-radius:4px;height: 109px;resize: none;background:#fbfbfb;font-size: 14px;}
.cnt__wrapper{position: absolute;bottom: 10px;right: 10px;font-size: 13px;color: #c5c5c5;}
.thread_btn_wrapper_edit{display: flex;display: -webkit-flex;margin-top: 14px;}
.thread_edit_cancel{background: #c8c8c8;margin-left:auto;margin-bottom: 14px;padding: 11px 16px;font-size: 13px;border-radius: 2px;color: #fff;cursor: pointer;}
.thread_edit_cancel:hover{text-decoration: none;opacity: 0.8;}
.btn--active{background-color: #f7c600;}
.btn--inactive{background-color: #c8c8c8;pointer-events: none;cursor: default;}
.text--over{color: #f00!important;}
.postPost02 {display: block;border: none;cursor: pointer;position:absolute;bottom:2px;outline: none;color: #fff;font-size: 15px;border-radius: 2px;width: 100px;height: 40px;}
.postPost02:hover{opacity: .8;}
.postPost02Load {display: block;border: none;cursor: pointer;outline: none;border-radius: 2px;width: 113px;height: 43px;background: url("../img/common_loading.gif") no-repeat 50% 50% #f7c600;background-size: 18px;position: absolute;top:66px;}
.postComment{position: relative;}
.logInannonce a{ display: inline-block; font-size: 14px; margin-right: 30px;}
.logInannonce a:hover{text-decoration: none; opacity: 0.7;}
.edit_comment_btn,.del_response{cursor: pointer;}
.edit-icon{fill:#b5b9bd;width: 13px;height: 13px;}
.close-icon{fill:#b5b9bd;width: 12px;height: 12px;}
.edit_comment_btn{margin-right: 14px;}
.edit_comment_btn:hover,.del_response:hover{opacity: .5;}

/* ============================================================
   コメント返信
============================================================ */

.reply-btn{
  font-size: 13px;
  color: #b5b9bd;
}

.reply-btn:hover{
  opacity: 0.8;
}

.reply-notification{
  font-size: 13px;
}

.reply-box-wrapper{
  margin-top:12px;
  margin-bottom: 12px;
  padding-top: 4px;
  border-left: 4px solid #eaeaea;
}

.reply-load-more{
  font-size: 12px;
  margin-left: 16px;
}

.reply-box{
  padding-top: 10px;
  padding-bottom: 12px;
  border-radius: 1px;
  display: flex;
  display: -webkit-flex;
}

.reply-box__icon{
  border-radius: 4px;
  width: 32px;
  height: 32px;
  margin-left: 16px;
}
.reply-box__content{
  margin-left: 14px;
}

.reply-box__name{
  font-size: 14px;
  color: #686c73;
}

.reply-box__date{
  vertical-align: middle;
  margin-left: 7px;
  font-size: 11px;
  color: #b7b7b7;
}

.reply-box__text{
  line-height: 1.6;
  padding-top: 4px;
  font-size: 13px;
  color: #616161;
}

.reply-edit__form{
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  margin-top: 8px;
}

.reply-edit__textarea{
  background: #fafafa;
  padding: 8px;
  font-size: 13px;
  width: 100%;
  resize: none;
  border: none;
}

.reply-edit__cancel{
  display: inline-block;
  border-radius: 2px;
  background: #c8c8c8;
  color: #fff;
  font-size: 12px;
  margin-top: 10px;
  padding: 10px 13px;
}

.reply-edit__save{
  margin-left: 6px;
  text-align: center;
  font-size: 13px;
  border-radius: 2px;
  color: #fff;
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  background: #f7c600;
}

.comment__text--reply{
  display: flex;
  display: -webkit-flex;
  position: relative;
}

.comment__reply{
  display: flex;
  display: -webkit-flex;
  position: relative;
}

.reply__icon{
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.reply__form{
  margin-left: 12px;
  padding:8px;
  resize: none;
  width: 444px;
  height: 80px;
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid #e6e6e6;
}

.reply__form:focus{
  box-shadow: 0 0 1px;
  border: none;
}

.reply__btn{
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 2px;
  padding: 9px 14px;
  height: 32px;
  font-size: 14px;
  margin-left: 12px;
  color: #fff;
  background:#f7c600;
}

/* ============================================================
   右側
============================================================ */
.rightHeart {background: #fbfbfb;text-align: center;border-top-left-radius: 4px; border-top-right-radius: 4px;padding: 20px;height: 86px;overflow: hidden;}
.hBRight01{color: #5f6163;font-size: 37px;font-size: 3.7rem;margin-left: 10px;}
.hBRight02{color: #5f6163;font-size: 37px;font-size: 3.7rem;}
.action-clap__icon--right{width: 38px;height: 38px;}
.rightHeartIn{display: inline-block;padding-top: 6px;}
.rightHeartIn > div{float: right;}
.iconHeartOff{fill: #80878c;-webkit-transition: all 0.15s ease-out;transition:all 0.15s ease-out;}
.iconHeartOff:hover{cursor: pointer;fill: #faaa02;text-decoration: none;}
.iconHeartOn{fill: #faaa02;-webkit-transition: all 0.15s ease-out;transition:all 0.15s ease-out;}
.iconHeartOn:hover{cursor: pointer;text-decoration: none;}

/*こっからユーザーの処理*/
.rightUserBase {padding: 0 18px;box-shadow: 0 3px 0px #e3e4e8;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;height: 580px;overflow: auto;}
.postUserRight {width: 100%;display: block;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom: 1px solid #f1f1f3;padding: 16px 0;}
.postFirstbRight {width: 48px;}
.posterRight img{}
.postUserPhotoRight {width: 36px;height: 36px;background-size: cover;border-radius: 4px;}
.postUserPhotoRight img{border-radius:4px;}
.postUserNameRight {
    color: #838994;
    font-size: 14px;
}
.postUserRight > div{display: table-cell;vertical-align: middle;}
#snsFacebookShere{right: 470px;}
#snsTweeetShere{width: 108px;right: 330px;}
#snsAmebaShere{right: 0px;}
#snsHatebuShere{right: 130px;}

/* ============================================================
   削除用ローディング画像
============================================================ */
#infscr-loading {font-size: 9px;text-align: center;z-index: 100;position: fixed;left: 50%;width: 200px;margin-left: -100px;padding: 10px;opacity: 0.8;background: #A6AAB3;color: #FFF;border-radius: 4px;top: 50%;}
#infscr-loading img{margin-bottom: 5px;}


/* ============================================================
   ページネーション位置
============================================================ */

.com-detail-paginationbox{margin-top: 35px;}



/* ============================================================
   クラップアイコンホバー時のアニメーション
============================================================ */

.bounce{-webkit-animation: bounceIn 1s 0s 1 normal forwards;}
.bounce02{-webkit-animation: bounceIn02 1s 0s 1 normal forwards;}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {-webkit-transform: scale3d(.8, .8, .8);transform: scale3d(.8, .8, .8);}
  20% {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}
  40% {-webkit-transform: scale3d(.9, .9, .9);transform: scale3d(.9, .9, .9);}
  60% {-webkit-transform: scale3d(1.03, 1.03, 1.03);transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(.97, .97, .97);transform: scale3d(.97, .97, .97);}
  to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}


@-webkit-keyframes bounceIn02 {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {-webkit-transform: scale3d(.8, .8, .8);transform: scale3d(.8, .8, .8);}
  20% {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}
  40% {-webkit-transform: scale3d(.9, .9, .9);transform: scale3d(.9, .9, .9);}
  60% {-webkit-transform: scale3d(1.03, 1.03, 1.03);transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(.97, .97, .97);transform: scale3d(.97, .97, .97);}
  to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}