@charset "UTF-8";
/* ===================================================================
discussion
====================================================================== */
body.noscroll { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }

.comment-line.-discussion { max-width: 600px; margin: 2em auto 4em; padding: 0; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; transition: all .3s linear; height: 100%; }
.comment-line.-discussion .mdl-chip.mdl-chip--contact {background-color: #e6e8e9;}
.comment-line.-discussion .mdl-chip.mdl-chip--contact.noimage,
.-comment .mdl-chip.mdl-chip--contact.noimage {padding-left: 12px;}
.comment-line.-discussion .mdl-chip.mdl-chip--contact .mdl-chip__text,
.-comment .mdl-chip.mdl-chip--contact .mdl-chip__text {font-size:11px;}
.comment-line.-discussion .mdl-chip.mdl-chip--contact .mdl-chip__text:before,
.-comment .mdl-chip.mdl-chip--contact .mdl-chip__text:before { content: "To: "; font-weight: bold; color: #888; }
.comment-line.-discussion a .mdl-chip.mdl-chip--contact:hover { opacity: 0.6; }
.comment-line.-discussion .speech-balloon.-other { float: none; background-color: transparent; padding: 2em; }
#.comment-line.-discussion .speech-balloon.-other:last-child { border-radius: 0 0 8px 8px; }
.comment-line.-discussion .daycolumn:not(:last-of-type) { margin-bottom: 0px; }
.comment-line.-discussion .speech-balloon.-other.-tome { background-color: #ecf6ff; }
.comment-line.-discussion .speech-balloon.-other.-tome .mdl-chip.mdl-chip--contact { background-color: #448aff; color: #fff; }
.comment-line.-discussion .speech-balloon.-other.-tome .mdl-chip.mdl-chip--contact .mdl-chip__text:before { color: #c5c5c5; }
.comment-line.-discussion .speech-balloon.-other > .content { margin-top: .5em; }
.comment-line.-discussion .speech-balloon {border-bottom: 1px solid #eee;margin-bottom: 0;}
.comment-line.-discussion .daycolumn:last-child .speech-balloon:last-of-type {border:none; margin-bottom:0;}
.comment-line.-discussion .speech-balloon.-other .user-display { margin-left: 0; margin-bottom: .5em; }
.comment-line.-discussion .speech-balloon.-other .user-display .name { width: 70%; font-weight: bold; }
.comment-line.-discussion .speech-balloon.-other .user-display::after { content: attr(data-update); float: right; margin-top: .5em; font-size: 1.2rem; color: #888; }
.comment-line.-discussion .speech-balloon > .content { background-color: transparent; border: none; padding: 0; }
.comment-line.-discussion .speech-balloon > .content::before { background-image: none; }
.comment-line.-discussion .speech-balloon > .content .actions { margin-bottom: 0; }
.comment-line.-discussion .speech-balloon .commentlist {border-top: 1px solid #f5f5f5;margin: 0 -1em 0;padding: 0;border-radius: 0 0 8px 8px;}
.comment-line.-discussion .speech-balloon .commentlist > ul > li {border-bottom: 1px dotted #ccc;padding-bottom: 1em;margin-bottom: 1em;}
.comment-line.-discussion .speech-balloon .commentlist > ul > li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li.-tome { background-color: #ecf6ff; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li.-tome .mdl-chip.mdl-chip--contact { background-color: #448aff; color: #fff; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li.-tome .mdl-chip.mdl-chip--contact .mdl-chip__text:before { color: #c5c5c5; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .user-display { position: relative; z-index: 10; display: table; width: 100%; margin-bottom: .5em; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .user-display .name { display: table-cell; width: 70%; margin: 0; padding: 0 .5em; vertical-align: middle; font-size: 1.4rem; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .txt { margin-top: .5em; font-size: 1.4rem; line-height: 1.5; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .img { float: none; display: table-cell; width: 40px; height: 40px; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .actions { margin-bottom: 0; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .share-box > .infobox .title { font-size: 1.4rem; line-height: 1.3; }
.comment-line.-discussion .speech-balloon .commentlist > ul > li .share-box > .infobox .url, .comment-line.-discussion .speech-balloon .commentlist > ul > li .share-box > .infobox .description { font-size: 1.2rem; padding-top: .5em; }
  .fix-formarea {max-width: 600px;margin: 8px auto;display: block;background-color: #FFF;padding: 8px;border: 1px solid #e0e0e0;}
  .fix-formarea > .user-display {display: inline-block;margin-bottom: .5em;width: 10%;text-align: center;}
  .fix-formarea > .mdl-textfield__input {display:inline-block;width: 88%;vertical-align: middle;}
  .fix-formarea > .material-icons { vertical-align: middle; color: #448aff; margin: 0 .1em;}
.comment-line.-discussion.-notweet { background-color: #F5F5F5; border:none; }

/* fix-inputarea */
#is-reply .fix-inputarea, .layout-main.-index .fix-inputarea { position: static; width: 520px; bottom: inherit; margin: 0 auto; z-index: 0; }
#is-reply .fix-formarea {border: none;border-top: 1px solid #e0e0e0;margin: 8px auto 0;padding: 8px 0;}
#is-reply .comment-line .daycolumn:not(:last-of-type) {margin-bottom: 0;}
##is-reply .speech-balloon .commentlist > ul > li .content { padding:0; }

#reply-target span { display: inline-block; background-color: #43aeff; border-radius: 4px; color: #fff; padding: 0 .5em; /* margin: 1em .3em 0 1.5em; */ font-weight: bold; }
#reply-target button { color: #fff; vertical-align: middle; margin: 0; padding: 0; opacity: 0.6; }
#reply-target button:hover { cursor: pointer; opacity: 1; }

/* dialog-newtweet */
#dialog-newtweet .mdl-dialog { overflow: hidden; }
#dialog-newtweet .mdl-textfield { display: block; }
#dialog-newtweet #addarea_video, #dialog-newtweet #addarea_link, #dialog-newtweet #js-addimg { display: none; }
#dialog-newtweet #js-files-addbtn { display: flex; justify-content: center; height: 150px; margin-top: 6px; }
#dialog-newtweet #js-files-addbtn label { display: block; width: 100%; height: 100%; box-sizing: border-box; padding-top: 23px; align-self: center; text-align: center; }
#dialog-newtweet #js-files-addbtn label i { width: 50px; height: 50px; padding: 8px 0 0 2px; text-align: center; border-radius: 50%; background-color: #efefef; font-size: 36px; color: #9E9E9E; }
#dialog-newtweet #js-files-addbtn label i::after { content: "画像を追加"; display: block; text-align: center; margin-top: 1em; margin-left: -4em; width: 10em; height: 1.2em; padding: 8px; font-size: 14px; border-radius: 24px; background-color: #efefef; }
#dialog-newtweet #files-addarea { margin-top: 6px; background-color: rgba(0, 0, 0, 0.12) !important; }
#dialog-newtweet textarea { min-height: 8em; max-height: 280px; }
#dialog-newtweet .mdl-textfield__input{ margin-bottom: 8px; }
#dialog-newtweet :placeholder-shown { color: rgba(0,0,0,.26); }
#dialog-newtweet ::-webkit-input-placeholder { color: rgba(0,0,0,.26); }
#dialog-newtweet .mdl-dialog:not(.-logged) #js-files-addbtn.-mini{width: auto;height: auto;float: left;margin: 0;}
#dialog-newtweet #js-files-addbtn.-mini label i{ width: auto; height: auto; padding: 4px 8px; border-radius: 0; background-color: transparent; font-size: 28px; }
#dialog-newtweet #js-files-addbtn.-mini label{ padding-top: 0; }
#dialog-newtweet #js-files-addbtn.-mini label i::after{ display: none; }

/* dialog-reply */
body.show-reply .fix-inputarea.-logged { width: 600px; position: fixed; left: calc(50% - 300px); bottom: 0; z-index: 100; }

#dialog-reply.dialog-wrap .mdl-dialog__actions.-displaysp { margin: 0; position: fixed; z-index: 10; top: 0; width: 100%; left: 0; padding: .5em; background-color: #e6e6e6ad; }
#dialog-reply .mdl-dialog { width: 600px; max-height: inherit; padding: 0; overflow-y: hidden; }
#dialog-reply #is-reply { max-width: 600px; height: 95vh; overflow-y: scroll; border-radius: 0; border: none; margin: 0 0 10px; }
#dialog-reply #is-reply .speech-balloon { padding-bottom: 45px; }
##dialog-reply #is-reply .speech-balloon .commentlist { padding: 0; }
#dialog-reply #is-reply .speech-balloon .commentlist ul > li.comment { margin: 0; padding: 1em; }
#dialog-reply #is-reply .speech-balloon .commentlist ul > li > ul > li.comment { padding: 1em 1.5em; padding-right:0; }

/* is-focus */
#.fix-inputarea.-logged .inputarea > .mdl-textfield > .mdl-textfield__input { -webkit-transition: height .3s ease; transition: height .3s ease; }
#.fix-inputarea.-logged .inputarea > .is-focused.mdl-textfield > .mdl-textfield__input { height: 6em; -webkit-transition: height .3s ease; transition: height .3s ease; }
.fix-inputarea .inputarea > .mdl-textfield > .mdl-textfield__input{ margin-bottom: 4px; }
.fix-inputarea #comment_username{ display: none; }
.fix-inputarea .is-focused #comment_username{ display: block; }

/* user ranking */
.head-sign-board .buttonarea { margin-bottom: 1em; }
/* ===================================================================
top
====================================================================== */
.mdl-card.mdl-shadow--2dp.-comment.comment.timeline .topicname{
  color: rgb(68,138,255);
}
.mdl-card.-comment .topicname,
.mdl-card__title.topictitle{ position: relative; padding-left: 35px; }
.mdl-card.-comment .topicname i{ position: absolute; left: 0; top: 50%; margin-top: -14px; }

.mdl-card.-comment.comment.topics .mdl-card__title.topictitle{ padding-right: 4em!important; }
.mdl-card.-comment.comment.topics .mdl-card__title.topictitle .topic-num{ position: absolute; right: 0; top: 0; width: 5em; padding: 4px 0; background-color: #efefef; font-size: 11px; color: #888; text-align: center; }
.mdl-card.-comment.comment.topics .mdl-card__title.topictitle .topic-num .material-icons{ margin-right: 2px; font-size: 17px; color: #888; vertical-align: middle; }

/* ===================================================================
common
====================================================================== */
.mdl-button.mdl-button--fab:not(.-splarge){ background-color: transparent; }
a.user-display{ display: block; z-index:1; position: relative; }
a.user-display:hover { opacity: 0.6; }
.speech-balloon > a .name,a.user-display .name span{ text-decoration: underline; }
.user-display .name .guest{ display: block; font-size: 10px; font-weight: normal; color: #888; }
.speech-balloon.-other > .user-display{ margin-bottom: 8px; }
/* ============ smartphone ============ */
@media only screen and (max-width: 768px) { body.noscroll { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: initial; }
  .layout-main.community-top .mdl-layout__tab { width: 33%; padding: 0 5px;}
  .sign-board > #buttonTweet, .sign-board > #buttonTopic { width: 60px; height: 60px; position: fixed; right: 16px; bottom: 47px; z-index: 10; }
  .comment-line.-discussion { border: none; border-radius: 0; margin-top: 0; margin-bottom: 0; }
  .comment-line.-discussion.imgAdd { padding-bottom: 20em; margin-top: 0; }
  .comment-line.-discussion .speech-balloon.-other { position: relative; padding: 0em 1em 1em;}
  .comment-line.-discussion .speech-balloon.-other:last-child { border-radius: 0; }
  .comment-line.-discussion .speech-balloon.-other .user-display {margin-top: 1em;}
  .comment-line.-discussion .speech-balloon.-other .user-display .name {width: 80%;}
  .comment-line.-discussion .speech-balloon.-other .user-display::after { position: absolute; right: 1em; top: 1em; }
  .comment-line.-discussion .speech-balloon.-other .commentlist > ul > li .content { padding-left: 0; }
  .comment-line.-discussion .speech-balloon.-other:last-child { margin-bottom: 30px; }
  #is-reply .fix-inputarea, .layout-main.-index .fix-inputarea { left: 0; top: inherit; bottom: 0; width: 100%; }
  .dialog-wrap.is-slidein > .mdl-dialog { border-radius: 0; }
  body.show-reply { margin-top: 0 !important; }
  body.show-reply .mfp-wrap { top: 0 !important; }
  body.show-reply .fix-inputarea.-logged { width: 100%; left: 0; }
  .fix-inputarea.-logged .inputarea > .is-focused.mdl-textfield > .mdl-textfield__input { height: 36px; }
  #dialog-reply .mdl-dialog { width: 100%; }
  #dialog-reply #is-reply {padding-top: 50px;height: 100vh;}
  ##dialog-reply #is-reply .speech-balloon { padding-bottom: 30px; } 
  .fix-formarea > .user-display {width: 15%;}
  .fix-formarea > .mdl-textfield__input { width: 80%; font-size:14px; }
  #dialog-newtweet .mdl-dialog:not(.-logged) { overflow-y: scroll; padding:10px 0;}
  #dialog-newtweet .mdl-dialog:not(.-logged) .mdl-dialog__title, #dialog-newtweet #reply-target { padding:0 16px;}
  #dialog-newtweet .mdl-dialog:not(.-logged) #js-files-addbtn { margin:16px;}
  #dialog-newtweet .mdl-dialog:not(.-logged) textarea,
  #dialog-newtweet .mdl-dialog:not(.-logged) input[type="text"]{ border:none; width: 95%; margin: 0 auto 1em; }
  #dialog-newtweet .mdl-dialog:not(.-logged) #comment_username,
  #dialog-newtweet .mdl-dialog:not(.-logged) textarea { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
  #dialog-newtweet .mdl-dialog:not(.-logged) .mdl-dialog__actions.-displaysp { margin: 0; position: fixed; z-index: 10; top: 5px; width: 100%; left: 0; padding: .5em; }
  #dialog-newtweet .mdl-dialog:not(.-logged) .mdl-textfield {margin-top: 45px;}
  #dialog-newtweet .mdl-dialog:not(.-logged) .mdl-dialog__actions {margin-bottom: 10px;margin-right: 16px;}
  #dialog-newtweet .mdl-dialog:not(.-logged) textarea { max-height: 120px; }
  /* sign-board */
  .head-sign-board { display: table; width: 100%;  }
  .head-sign-board .buttonarea, .head-sign-board .sign-board { display: table-cell; width: 60%; height: 140px; vertical-align: middle; }
  .head-sign-board .buttonarea { width: 40%; }
  .head-sign-board .buttonarea .js-do-join { width: 80%; }
  .layout-header.-top .people { margin-bottom: 1.5em; }
  #.layout-header .rankinglist { margin-bottom: -2em; }
  #.layout-header .rankinglist .title { display: none; }
  #.layout-header .rankinglist.open .list { padding-bottom: 2em;  }
  #.rankinglist .trigger { padding: 1em 0 0; margin-bottom: 0; cursor: pointer; }
  #.rankinglist .trigger:hover { cursor: pointer; }
  #.rankinglist .trigger::after { content: ""; display: inline-block; margin-left: .5em; width: 6px; height: 6px; margin-top: 0; border-top: 2px solid #e91e63; border-right: 2px solid #e91e63; vertical-align: middle; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: .5s all; }
  #.rankinglist.open .trigger::after { margin-top: -.3em; -webkit-transform: rotate(-226deg); transform: rotate(-226deg); transition: .5s all; } 
  #dialog-newtweet .mdl-dialog:not(.-logged) #js-files-addbtn.-mini{ margin-left: 1rem; }
}

@media only screen and (max-width: 330px) {
  .layout-main.community-top .mdl-layout__tab { padding: 0 5px; }
}