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

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

/* ============================================================
   パンくず
============================================================ */
.bread-crumb-listBase{padding-top: 80px;}

/* ============================================================
   大枠
============================================================ */
#main {width: 100%;margin: 0 auto 0 auto;height: auto;}
#comContent {width: 100%;background: #f5f5f5;padding-top: 27px;height: 100%;min-height: 500px;}
#comBase {margin: 0px auto 0 auto;}

/* ============================================================
   合計値
============================================================ */
.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: #7d7d7d;}
.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;}
.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;}


/* ============================================================
   支援していないユーザー
============================================================ */
.messageBase {padding: 10px 30px;border-radius: 4px;background: white;box-shadow: 0 2px 0px #e3e4e8;width: 454px;margin: 20px auto 0 auto;}
.postUser02:nth-last-of-type(1){border-bottom: none;}
.postUser02 > div {float: left;}
.postUser02 > form > div {float: left;}
.postUser02 {border-bottom: 1px solid #f1f1f3;padding: 5px 0;}
.logInannonce{}
.logInannonce a{ display: inline-block; font-size: 14px; margin-right: 30px;}
.logInannonce a+a{margin-right: 0;}
.logInannonce a:hover{text-decoration: none; opacity: 0.7;}

/* ============================================================
   1記事
============================================================ */
/*section*/
.post {width: 320px;height: auto;border-radius: 4px;background: #ffffff;margin: 0 20px 20px 0;}

/*ユーザーの写真など*/
.postUser {background: #ffffff;width: 100%;padding: 16px 16px 10px 16px;display: block;border-top-left-radius: 4px;border-top-right-radius: 4px;}
.postUser > div {display: table-cell;vertical-align: middle;}
.postUserPhoto img{width: 40px;height: 40px;border-radius: 2px;}
.response_img{border-radius: 4px;}
.postUserName{color: #5f5e5e;font-size: 16px;}
.postUserNameDate {color: #8e8e8e;font-size: 10px;margin-bottom: 7px;margin-top: 1px;}
.postUserName h5{font-size: 13px;margin-top: 5px;}
.postFirstb {width: 53px;}


/*ユーザー下テキスト*/
.postText{cursor: pointer;  display: block;  }
.postText:hover{text-decoration: none;background: #FFFDE6;}
.postText-inner{color: #333333;font-size: 15px;padding: 4px 18px 14px;line-height: 1.8;}
.postTextPhoto {display: block;width: 100%;padding-bottom: 10px;}

/*  アクション */
.action{padding: 10px 20px;border-top: 1px solid #f1f1f1;display: flex;}
.action-com-asidein{display:flex;justify-content: center;align-items: center;}
.action-com-asidein{display:flex;justify-content: center;align-items: center;}
.action-com-asidein-thumb{display: block;width: 145px;height: 82px;border-radius: 4px;}
.action-com-asidein-thumb:hover{opacity: .8;}
.action-com-asidein-box02{display:flex;align-items: center;margin-right: 20px;}
.action-com-asidein-box03{display:flex;align-items: center;}
.iconHeartOff .action-icon-clap{fill: #737373;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all  0.2s ease;}
.iconHeartOff .action-icon-clap:hover{fill: #faaa02;}
.iconHeartOn .action-icon-clap:hover{fill: #faaa02; opacity:0.8;}
.iconHeartOn .action-icon-clap{/*fill: #FB2A79;*/fill:#faaa02; -webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all  0.2s ease;}
.action-icon-clap{width: 22px;height: 22px;margin-right: 9px;cursor: pointer;position: relative;top: 1px;}
.action-icon-com-04{width: 22px;height: 22px;margin-right: 9px;cursor: pointer;fill: #8a8a8a;}
.action-com-count-like,.action-com-count-commnt{font-size: 14px;color: #828282;}

/*アイコンにhoverした時のアニメーション*/
.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);}
}



/*コメントに対する返信コメント*/
.first-reply{display: flex;padding: 12px 16px;align-items: center;border-top: 1px solid #f1f1f1;}
.first-reply:hover{text-decoration: none;background: #FFFDE6;}
.first-reply-img{border-radius: 2px;width: 32px;height: 32px;margin-right: 11px;}
.first-reply-date{font-size: 10px;color: #8e8e8e;margin-bottom: 7px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 245px;}
.first-reply-txt {font-size: 13px;color: #484848;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 240px;}
.first-reply-txt br{display: none;}


/* ============================================================
   ハートを押した時の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-icon-clap{width: 100px;height: 100px;fill:#ffffff;}
.popHeartBaseIn-text{color: white;font-size: 24px;text-align: center;}


/*フォーム中身*/
 .commentBase{}

 .submit_btn{display: block;color: #fff;font-size: 16px;border: none;cursor: pointer;outline: none;border-radius: 2px;width: 112px;height: 48px;position: absolute;right: -27px;bottom: 2px;}
 .submit_btn--active:hover {opacity: 0.8;}
 .submit_btn--active{background-color: #f7c600;cursor: pointer;}
 .submit_btn--inactive{background-color: #c8c8c8;pointer-events: none;}
 .submit_btn_owner_new_comment{margin-top: 84px;}
 .postPost02 {display: block;border: none;cursor: pointer;pointer-events: none;outline: none;border-radius: 2px;width: 102px;height: 48px;background: url("../img/common_loading.gif") no-repeat 50% 50% #f7c600;background-size: 24px 24px;position: absolute;right: 13px;top: 147px;background-size: 18px;}
 .cB01{margin-bottom: 14px;padding: 26px 26px 0 26px;position: relative;}
 .cB02-error{padding: 12px 0px 10px 26px;margin-top: -20px;}
 .cB02-error-icon {position: relative;top: 2px;width: 14px;height: 14px;fill: #ff0000;}
 .cB02-error-validation-01{position: relative;font-size: 12px;color: #ff0000;}
 .cB02-error-validation-02{position: relative;font-size: 12px;color: #ff0000;}
 .cB03{background: #f6f8fa;width: 100%;height: 196px;padding: 26px;}

/* ============================================================
   インフィニティースクロール
============================================================ */
#page-nav{display: none;}
#infscr-loading {font-size: 9px;text-align: center;z-index: 100;position: fixed;left: 50%;width: 200px;margin-left: -105px;padding: 10px;opacity: 0.8;background: #A6AAB3;color: #FFF;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;top: 70%;}
#infscr-loading img{margin-bottom: 5px;}
#next{ display:none;}

/* ============================================================
   詳細POPUP
============================================================ */

/*大枠のベース============================================== */
#threadDetail{overflow:visible;height: auto;width: 1000px;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-300px;z-index:100;}
.threadDetail_In{padding-bottom: 100px;}
.leftInside_Pop{width: 660px;float: left;}
.rightInside_Pop{width: 310px;height: auto;background: white;float: right;border-radius: 4px;}
.close-btn{position: absolute;top: -36px;right: 0px;width: 16px;height: 16px;fill: #ffffff;cursor: pointer;}
.close_btn_animated{position: fixed;top: 24px;right: 24px;animation-duration: 0.4s;animation-name: slidein;}
@keyframes slidein {
  0% {right:-40px;}
  70%{right: 28px;}
  85% {right: 26px;}
  100% {right: 24px;}
}

/*1記事============================================== */
.post_Pop {border-radius: 4px;background: white;margin-bottom: 30px;}
.postUser_Pop {width: 100%;padding: 20px 20px 0 20px;position: relative;display: flex;align-items: center;}
.postUser_Pop > div {}
.postUserPhoto_Pop{width: 40px;height: 40px;border-radius: 4px;}
.postUserPhoto_Pop img{border-radius: 4px;}
.poster_Pop img {border-radius: 4px;display: block;}
.postUserName_Pop{color: #989fa9;font-size: 16px;}
.postUserName_Pop span{color: #5f5e5e;display: inline-block;width: 450px;}
.postFirstb_Pop {width: 52px;}
.postUserNameDate_Pop {color: #8e8e8e;font-size: 11px;margin-bottom: 6px;}
.edit_comment_btn{font-size: 10px;color: #fff;padding: 7px 10px;background: #969AA0;border-radius: 4px;cursor: pointer;margin-right: 14px;}
.edit_comment_btn1{}
.edit_comment_btn:hover,.postTextChange02_Pop:hover{opacity:0.5;}
.postTextChange02_Pop{font-size: 10px;color: white;padding: 7px 10px;background: #969AA0;border-radius: 4px;cursor: pointer;}
.edit_button{display: flex;}


/*ユーザーの写真など*/
.postText_Pop{}
.postText_Pop p {color: #333333;font-size: 15px;padding: 20px;line-height: 1.7;}
.postTextPhoto_Pop {display: block;width: 100%;padding-bottom: 10px;}

/*ハート*/
.postHeart_Pop{display:flex;display: -webkit-flex;align-items: center;-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */height: 56px;padding-right: 30px;position: relative;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-top: 1px solid #f1f1f1;}
.shareLink_Pop{margin-left: 8px;top: 12px;padding:4px;width: 300px;font-size: 11px;color: #5F6163;line-height: 20px;border-radius: 4px;border-color: 1px solid red;border:solid 1px #b7babf;}
.shareDescription_Pop{margin-left: 16px;font-size: 10px;color: #A9ACAF;}
.shareDescription_Pop2{margin-left: auto;font-size: 10px;color: #989898;}
.detailFace_Pop:hover{opacity: 0.7;}
.detailTwitter_Pop:hover{opacity: 0.7;text-decoration: none;}
.iconTwitter_Pop{display: block;margin-left: 20px;;width: 20px;height: 20px;fill: #b1b1b1;}
.iconFacebook_Pop{display: block;margin-left: 20px;width: 20px;height: 20px;fill: #b1b1b1;}

/*記事編集*/
.postchangeBase_Pop{padding: 16px;position: relative;}
.textInput03_Pop {padding: 6px;color: #90959c;border: none;width: 512px;height: 109px;resize: none;border: 1px solid #b7babf;background: #fbfbfb;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;-o-border-radius: 4px;-ms-border-radius: 4px;font-size: 14px;}
.thread_edit_main{margin: 20px auto 10px 20px;}
.postPost03Load_Pop {display: block;border: none;cursor: pointer;outline: none;border-radius: 2px;width: 92px;height: 43px;background: url("../img/common_loading.gif") no-repeat 50% 50% #f7c600;background-size:18px;position: absolute;right: 20px;top: 66px;}
.thread_edit_main .submit_btn{right: 20px;width: 92px;height: 43px;}

/*コメント============================================== */
.messageBase_Pop{padding: 0 20px;border-radius: 4px;background: white;}
.postUser02_Pop {border-bottom: 1px solid #f1f1f1;padding: 20px 0;}
.postUser02_Pop:nth-last-of-type(1){border-bottom: none;}
.postUser02_Pop > div {float: left;}
.postUser02_Pop > form > div {float: left;}
.postUserPhoto02_Pop{width: 40px;height: 40px;background-size: cover;border-radius: 4px;}
.poster02_Pop img {box-shadow: 0px 0px 0px 2px #ffe600;}
.postUser02_Pop img{border-radius:4px;display: block;}
.postUserName02_Pop {font-size: 16px;width: 530px;position: relative;}
#response_comment{}
.postUserName02_Pop span {color: #9c9c9c;font-size: 10px;}
.send_time{color: #8e8e8e;font-size: 11px;margin: 4px 0 3px 0;}
 .response_name{color: #5f5e5e;font-size: 15px;line-height: 1.6;}
.postFirstb02_Pop {width: 55px;}
.resopnse_comment{color: #333333;font-size: 14px;line-height: 1.7;margin-top: 8px;}
.postCommentChange_Pop{margin-top: 12px;display: flex;}
.del_response{font-size: 10px;color: #fff;padding: 7px 10px;background: #969AA0;border-radius: 4px;cursor: pointer;display: block;}
 .del_response:hover{opacity:.5;}
.textInput02_Pop {padding: 10px;color: #484c50;width: 430px;height: 120px;resize: none;border: 1px solid #b7babf;background: #fbfbfb;border-radius: 4px;font-size: 14px;line-height: 1.7;}
.textInput04_Pop {padding: 6px;color: #55585C;border: none;width: 430px;height: 109px;resize: none;border: 1px solid #b7babf;background: #fbfbfb;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;-o-border-radius: 4px;-ms-border-radius: 4px;font-size: 14px;}
.postPost02Load_Pop {display: block;border: none;cursor: pointer;outline: none;border-radius: 2px;width: 112px;height: 48px;background: url("../img/common_loading.gif") no-repeat 50% 50% #f7c600;background-size:18px;position: absolute;right: -27px;bottom: 2px;}
.postComment_Pop{position: relative;}
.logInannonce_Pop{color: #55585C;font-size: 14px;}
.logInannonce_Pop a{ display: inline-block; font-size: 14px; margin-right: 30px;}
.logInannonce_Pop a:hover{text-decoration: none; opacity: 0.7;}
.comment-rightside{float: right;width: 100px;}
.comment-rightside span{color: rgb(156, 156, 156);}
.js-cnt{margin-left: 16px;}
.comment-rightside-thread-edit{float: right;width: 128px;}
.comment-rightside-thread-edit span{width: 128px;font-size: 14px;color: #9c9c9c;}
.comment-rightside span{font-size: 14px;}

/*右側============================================== */
.rightHeart_Pop {background: #fbfbfb;text-align: center;border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 20px;height: 86px;overflow: hidden;}
.hBRight01_Pop{color: #5f6163;font-size: 37px;margin-left: 10px;}
.hBRight02_Pop{color: #5f6163;font-size: 37px;}
.rightHeartIn_Pop{display: inline-block;padding-top: 6px;}
.rightHeartIn_Pop > div{float: right;}
.heart_icon--on{width: 39px;height: 34px;fill: #FB2A79;}
.heart_icon--on:hover{opacity:0.5;cursor: pointer;}
.heart_icon--off{width: 39px;height: 34px;fill: #C7CBD1;}
.heart_icon--off:hover{fill: #FB2A79;cursor: pointer;}
.iconHeartOn_Pop{width: 38px;height: 38px;fill: #faaa02;}
.iconHeartOff_Pop{width: 38px;height: 38px;fill: #969696;}



/*こっからユーザーの処理*/
.rightUserBase_Pop {padding: 0 18px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;height: 580px;overflow: auto;}
.postUserRight_Pop {width: 100%;display: block;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom: 1px solid #f1f1f3;padding: 16px 0;}
.postUserRight_Pop > div{display: table-cell;vertical-align: middle;}
.postFirstbRight_Pop {width: 48px;}
.posterRight_Pop img{box-shadow: 0px 0px 0px 2px #ffe600;}
.postUserPhotoRight_Pop {width: 36px;height: 36px;border-radius: 4px;}
.postUserPhotoRight_Pop img{border-radius:4px;}
.postUserNameRight_Pop {color: #333333;font-size: 14px;}
.postUserNameRight_Pop > div{display: table-cell;vertical-align: middle;}


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


/* ============================================================
   POPUP表示ローディング
============================================================ */
#infscr-loading_Pop_Wait {font-size: 9px;text-align: center;z-index: 100;position: fixed;left: 50%;width: 200px;margin-left: -100px;padding: 10px;opacity: 0.8;background: #070707;color: #FFF;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;top: 50%;}



/* ============================================================
  ダイアログの位置バッティングのためここだけ修正
============================================================ */
#modalBase{top:50px !important;}