@charset "UTF-8";
/* Additional css: For detail page */
/* ======================================
Commons
========================================= */

i.fa { font-size: 1.2em; }
.works-whole { width: 960px; background: #fff; border-radius: 6px; margin: 120px auto 40px; position: relative; display: -webkit-flex; display: flex; }
.btn-simple { background: #666; box-shadow: 0 2px 0 #333; color: #fff; border: 0;  border-radius: 4px; padding: 5px 20px 3px; cursor: pointer; }
.btn-simple:hover { text-decoration: none; background-color: #777; }
.txt-em { font-weight: bold; }
.col-twitter { color:#00aced ;}
.col-user { color: #3399ff; }
.col-host { color: #ffc833; }
.popup-base { background-color: #fff; padding: 30px; border-radius: 6px; overflow-x: hidden; }
.popup-title { font-size: 16px; margin-bottom: 20px; font-weight: bold; color: #fff; background: #f39; padding: 3px 10px; border-radius: 4px; }
.popup-title-sub { font-size: 16px; margin-bottom: 20px; font-weight: bold; color: #f39; }
.popup-tips { border-top:1px dashed #ccc; margin-top: 30px; padding-top: 30px; }
.popup-txtbox { padding:4px; vertical-align: middle; line-height: 1.2; }
.popup-txtbox+.btn-simple { margin-left: 5px; }
.list-normal { margin-left: 20px; }
.list-normal li { list-style-type: disc; margin-top: 5px; }
.popup-cardset {float:left; text-align:center; margin-top: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px; }
.cardset-selected { border: 2px solid #f39; padding: 14px; background: #FFF6FB; }
.confirm { color: #f00; font-size: 8px !important; }

/* ======================================
Main Column
========================================= */
.works-databox { margin-bottom: 20px; }
.works-mainclm { width: 600px; box-shadow:2px 0 3px rgba(0,0,0,0.2); padding-bottom: 25px; }
.works-title { padding: 15px 20px; font-size: 21px; word-break: break-all; }
.works-collabo-author { padding: 5px 40px; font-size: 14px; word-break: break-all; }
.music-box-whole { position: relative; background: #666; overflow: hidden; }
.music-box { background: linear-gradient(to bottom, #333 0%,#666 100%); padding-top: 80px; }
.music-card-hz { width:400px; height:251px; background:#000; border-radius:10px; margin:0 auto 5px; background-position: center; background-repeat: no-repeat; -webkit-box-reflect:below 2px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 60%,rgba(0,0,0,0.2)); }
.music-card-vt { width:251px; height:400px; background:#000; border-radius:10px; margin:0 auto 5px; background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-box-reflect:below 2px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 60%,rgba(0,0,0,0.2)); }
.trim { background-size: cover; }
.resize { background-size: contain; }

.music-card-author { color:#ddd; text-align: center; font-size: 11px; margin-bottom: 30px; }
.music-card-author a { color: inherit; }
.music-card-lock { margin-left: 10px; padding: 1px 5px; }
.music-card-lock:before {font-family: 'FontAwesome'; content: '\f13e'; padding-right: 3px;}
.music-card-lock:hover:before { content: '\f023';}
.music-card-lock.on:before {content: '\f023'; }
.music-card-lock.on:hover:before { content: '\f13e' ;}
.music-card-del { margin-left: 10px; padding: 1px 5px; }
.music-card-del:before {font-family: 'FontAwesome'; content: '\f1f8'; padding-right: 3px;}
.music-card-del:hover:before { content: '\f1f8';}
.music-card-resize { margin-left: 10px; padding: 1px 5px; }
.music-card-resize:before {font-family: 'FontAwesome'; content: '\f065'; padding-right: 3px;}
.music-card-resize:hover:before { content: '\f065';}
.music-card-clop { margin-left: 10px; padding: 1px 5px; }
.music-card-clop:before {font-family: 'FontAwesome'; content: '\f125'; padding-right: 3px;}
.music-card-clop:hover:before { content: '\f125';}
.music-card-count { font-size: 8px; color: #999; padding: 10px 7px; line-height: 0.9; }
.music-card-count span { display: block; font-weight: bold; font-size: 14px; margin-top: 5px; }
.music-card-list { text-align: right; float: right; position: relative; z-index: 2; }
.music-card-list li { opacity: 0.3; cursor: pointer; transition: all 0.1s ease; }
.music-card-list li:hover { opacity: 1; }
.music-card-list li.now { opacity: 1; }
.music-card-list li.now:before { display: inline-block; content: ""; border-left: 8px solid #fff; border-bottom: 5px solid transparent; border-top: 5px solid transparent; vertical-align: middle; margin-right: 5px; }
.music-card-list .hz img{ width: 60px; }
.music-card-list .vt img{ height: 60px; }
a.music-card-add { width: 58px; height: 36px; display: inline-block; text-align: center; line-height: 38px; color: #ccc; text-decoration: none; background: #444; border: 1px dashed #777; }
a.music-card-add:hover { color: #ddd; border-color: #ddd; }
.music-play { padding: 10px 30px; width: 200px; text-align: center; font-size: 14px; margin: 20px auto 30px; border-radius: 20px; background: #333; color:#fff; display: block; border: 0; cursor: pointer; position: relative; z-index: 2;}
.music-play:hover { background:#000 ;}
.music-play .fa { font-size: 16px; margin-right: 3px; }
.lyric-box { background: #666; }
.lyric-txt { padding: 0 30px 0; color: #fff; line-height: 1.6em; height: auto; max-height: 8em; overflow: hidden; word-break: break-all; }
.lyric-txt.open { height: auto; max-height: none; }
.lyric-option { background:#888; padding:8px 30px;  color:#ddd; cursor: pointer; margin:10px 30px 30px; border-radius: 4px;  }
.lyric-option:hover { background: #999; color: #fff; }

/* Detail - Illustration ===================== */
.oneclm-whole { width: 960px; display: block; border: 1px solid #ddd; background: #fff; margin: 120px auto 0; border-radius: 6px 6px 0 0;  }
.illust.works-whole { margin-top: 0; border-radius: 0 0 10px 10px; }
.illust-whole { text-align: center; position:relative; }
.illust-whole img { max-width: 100%; }
.illust-whole:after { position: absolute; content: ""; display: block; z-index: 1; top: 0; width: 100%; height: 100%; background:transparent; }
.illust-whole img.small-thumbnail { padding: 100px; }
.illust-whole .label3dm { display: block; background: url(../images/parts.png) no-repeat left -45px; width: 63px; height: 63px; position: absolute; top: -2px; left: -2px; z-index: 1; }

/* text */
.works-version { position: absolute; left: 00px; top: 10px; color: #ccc; z-index: 3; }
.works-version a { padding: 0 10px; color: #ccc; }
.works-version a:hover { color: #f39; }
.works-version-3dm { position: absolute; left: 50px; top: 10px; color: #ccc;  z-index: 3; }
.works-version-3dm a { padding: 0 10px; color: #ccc; }
.works-version-3dm a:hover { color: #f39; }

/* Over Write */
.dtl_cap { width: 280px; margin-top: 20px; }
#_txt_frame { overflow: hidden; margin:40px 50px 50px; }
.dtl_txt { width: 600px; border: none; padding: 10px 0 20px;}
.dtl_txt.main_txt { word-break: break-all; overflow: hidden; margin-top: 0;}

.works-mainclm .color-box01 { margin:15px 0 0; padding:5px; }

/* ======================================
Side Column
========================================= */
.works-subclm { width: 360px; padding-bottom: 30px; }
.sub-head { background:#666 linear-gradient(to right, #444, #666); color:#fff; height:30px; line-height:30px; padding-left:30px; margin-top: 20px; background: background: linear-gradient(to bottom, #ffe400 0%, #805d00 50%, #be9e00 100%); }
.sub-head h3 { float: left; }
.sub-head a { color: #fff; }
.sub-head span { display: inline-block; margin-left: 10px; }
.sub-head .btn-add { display: block; background:#ddd; color:#666; padding:0 20px; float:right; height:30px; cursor: pointer; }
.sub-head .btn-add:hover { background: #eee; text-decoration: none; }
.sub-head .btn-add:nth-child(2) { border-left:1px solid #999; }
.sub-box { margin: 30px 30px 0; }

/* Button:Bookmark ====================== */
.bkmk-btn-box { position: relative; font-size: 0; }
.bkmk-btn { border-radius: 6px 0 0 6px; background: #ff3399; color:#fff; font-size: 16px; font-weight: bold; height: 35px; line-height: 35px; display: inline-block; padding: 0 15px; letter-spacing: 5px; box-shadow: 0 3px 0 #9d195b; }
.bkmk-btn.bkmk-on { width:128px;text-align:center; border-radius: 6px 6px 6px 6px; !important; }
.bkmk-btn:hover, .bkmk-btn-select:hover, .sharelink-btn:hover { background: #ff6baa;}
.bkmk-btn-select { font-size: 16px; background: #ff3399; display: inline-block; color: #fff; height: 35px; line-height: 35px; padding: 0 13px; vertical-align: top; border-radius: 0 6px 6px 0; border-left: 1px solid #9d195b; box-shadow: 0 3px 0 #9d195b; }
.bkmk-btn .fa-star { font-size: 20px; color: #e899c0; text-shadow: 0 -1px 0 #9d195b; vertical-align: middle;}
.bkmk-btn.bkmk-on .fa { color: #FFEB00; text-shadow: 0 1px 0 #624400; }
.bkmk-btn-count { font-size: 16px; display: inline-block; vertical-align: top; margin-left: 15px; position: relative; }
.bkmk-btn-count:before { content: ""; display: block; position: absolute; left: -14px; top: 12px; border-right:15px solid #ffc9e4; border-bottom: 15px solid transparent; border-top: 0; }
.bkmk-btn-count a { color: #943247; display: block; background: #ffc9e4; border-radius: 6px; height: 38px; line-height: 38px;  padding: 0 15px; }
.bkmk-btn-count a:hover { background: #ffa6cc; text-decoration: none; }
.bkmk-btn-count:hover:before { border-right-color: #ffa6cc; }
.bkmk-btn-list { font-size: 12px; background: rgba(0,0,0,0.8); border-radius: 6px; color:#fff; position:absolute; top: 40px; z-index: 3; min-width: 160px;}
.bkmk-btn-list li { padding: 5px 20px; }
.bkmk-btn-list li:hover { background: rgba(255,255,255,0.2);}
.bkmk-btn-list li:before { font-family: 'FontAwesome'; content: '\f07b'; margin-right: 5px; }
.bkmk-btn-list span { margin-left: 10px; color: #999; }

.sns_nbtnbox { margin: 20px 0 25px; }
.sharelink-btn { display: inline-block; padding: 2px 5px; color: #fff;  border-radius: 4px; border:1px solid #de006f; background: linear-gradient(to bottom, #ff6ab4 0%,#f39 100%); vertical-align: super; margin-right: 5px; }

/* Relation Movie & Works =============== */
.rel-movie-list { padding: 10px 30px 0; }
.rel-movie-list li { overflow: hidden; margin-top: 20px; }
.rel-movie-img { width: 120px; float: left;}
.rel-movie-img img { width: 120px; }
.rel-movie-data { margin-left: 135px; word-break: break-all; }
.rel-movie-by { margin-top: 10px; color: #999; }
.rel-movie-by:before { font-family: "FontAwesome"; content: "\f03d"; margin-right: 3px; }
.rel-movie-fn { display: none; margin-top: 5px; font-size: 8px; }
.rel-movie-list li:hover .rel-movie-fn { display: block; }
.rel-movie-fn a { margin-right: 8px; color: #999; text-decoration: underline; }
.rel-movie-fn a:hover { color: #666; }
.rel-works-title { padding-top: 4px; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-works-author { width: 150px; margin-bottom: 19px; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-works-list { margin: 30px 0 0 25px; }
.rel-works-list li { float: left; margin-right: 15px; display: block; }

.thumb-ill { width: 150px; height: 150px; display: block; background-color: #eee; background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; }
.thumb-music-hz { width: 150px; height: 94px; margin: 28px 0; display: block; background-color: #eee; background-repeat: no-repeat; background-position: center center; border-radius: 6px; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); position: relative; }
.thumb-music-vt { width: 94px; height: 150px; margin: 0 28px; display: block; background-color: #eee; background-repeat: no-repeat; background-position: center center; border-radius: 6px; box-shadow: 1px 1px 1px rgba(0,0,0,0.3); position: relative;}
.thumb-music a { text-decoration: none; }
.thumb-music:before { font-family: 'FontAwesome'; content: '\f001'; font-size: 20px; position: relative; left: 5px; top: 5px; color: #000;}
.label3dm_n { display: block; background: url(../images/parts.png) no-repeat left top; width: 44px; height: 44px; position: absolute; top: -2px; left: -2px; z-index: 2; }
.rel-works-fn { display: none; margin-top: 5px; font-size: 8px; letter-spacing: -0.1em; }
.rel-works-list li:hover .rel-works-fn { display: block; }
.rel-works-list li:hover .rel-works-author { margin-bottom: 0;}
.rel-works-fn a { margin-right: 8px; color: #999; text-decoration: underline; }
.rel-works-fn a:hover { color: #666; }
.rel-works-fn a:last-child { margin-right: 0;}
.rel-works-data { margin-left: 135px; word-break: break-all; }
.rel-more { margin: 10px 30px 0; display: block; text-align: right;}

/* Message to Work ===================== */
.works-comment { padding: 20px 30px 0; }
.works-comment input[type="radio"] { }
.works-comment li { display: inline-block; margin-right: 20px; }
.works-comment button { float: right; }
.works-msg { margin-bottom: 20px; }
.works-msg li { overflow: hidden; margin-top: 20px; padding-top: 10px; border-top: 1px solid #ccc; }
.works-msg-icon { width: 48px; float: left; }
.works-msg-icon img { width: 48px; }
.works-msg-main { margin-left: 60px; }
.works-msg-ctgr { color: #3399ff; font-weight: bold; }
.works-msg-ctgr.user-host { color: #ffc833; }
.works-msg-ctgr.user-clb { color: #f39; }
.works-msg-txt { padding-top: 5px; }
.works-msg-date { margin-top: 8px; color: #999; }

/* ======================================
bklink
========================================*/
.bklink-section { background:rgba(0,0,0,0.6); position: relative; top:18px; }
.bklink-title { color: #fff; position: absolute; left: 70px; top: 20px; z-index:1; }
.bklink-title a { color: #fff; }
/* Bklink - Music for Slick =========================== */
.slick-arrow { position: absolute; display: block; width: 45px; height: 100%; background: rgba(0,0,0,0.4); z-index: 10; text-align: center; border: none; font-size: 0; }
.slick-prev{ top: 0; left: 0; }
.slick-next { top: 0; right: 0; }
.slick-arrow:hover { background:rgba(0,0,0,0.7); }
.slick-arrow:after { content: ""; display: inline-block; border-top: 30px solid transparent; border-bottom: 30px solid transparent; vertical-align: middle; }
.slick-prev:after { border-right: 20px solid rgba(255,255,255,0.4); }
.slick-next:after { border-left: 20px solid rgba(255,255,255,0.4); }
.slick-prev:hover:after { border-right-color: #fff; }
.slick-next:hover:after { border-left-color: #fff; }
.slick-arrow:before { content: ""; display: inline-block; height: 100%;  width: 0; vertical-align: middle; }
.bklink-btn { position: absolute; display: block; width: 45px; height: 100%; background: rgba(0,0,0,0.4); z-index: 10; text-align: center; }
.bklink-btn.prev { top: 0; left: 0; }
.bklink-btn.next { top: 0; right: 0; }
.bklink-btn:hover { background:rgba(0,0,0,0.7); }
.bklink-btn:before { content: ""; display: inline-block; border-top: 30px solid transparent; border-bottom: 30px solid transparent; margin-top: 160px;  }
.bklink-btn.prev:before { border-right: 20px solid rgba(255,255,255,0.4); }
.bklink-btn.next:before { border-left: 20px solid rgba(255,255,255,0.4); }
.bklink-btn.prev:hover:before { border-right-color: #fff; }
.bklink-btn.next:hover:before { border-left-color: #fff; }
/* Bklink - audio =========================== */
.bklink-audio { padding: 60px 0 30px; text-align: center; }
.bklink-audio li { margin-right: 20px; }
.bklink-audio li a { display: table; background-repeat: no-repeat; background-position: center center; background-color: #000; border-radius: 6px; box-shadow: 1px 1px 7px #333; color: #fff; position: relative; overflow: hidden; }
.bklink-audio a.hz { width: 280px; height: 175px; margin-top: 60px; margin-bottom: 60px; }
.bklink-audio a.vt { height: 280px; width: 175px; }
.bklink-audio .info { display: none; vertical-align: middle; background-color: rgba(0,0,0,0.4); border-radius: 6px; position: relative; z-index: 2; white-space: normal; word-break: break-all; word-wrap: break-word; padding: 10px 30px; }
.bklink-audio .no-jacket-info { display: table-cell; vertical-align: middle; background-color: rgba(0,0,0,0.4); border-radius: 6px; position: relative; z-index: 2; white-space: normal; word-break: break-all; word-wrap: break-word; padding: 10px 30px; }
.bklink-audio a:hover { text-decoration: none; }
.bklink-audio a:hover .info { display: table-cell;}
.bklink-audio .title { font-size: 16px;  }
.bklink-audio .author { margin-top: 10px; }
.bklink-audio a:hover:before { content: ""; position: absolute; background-clip: content-box; width: 100%; height: 100%; top: 0; left: 0; background: inherit; -webkit-filter: blur(5px); z-index: 1; }

/* Bklink - image/3dm =========================== */
.bklink-image, .bklink-3dm { padding: 60px 0 30px; text-align: center; white-space: nowrap;  overflow: scroll; }
.bklink-image li, .bklink-3dm li{ margin-right: 20px; height: 280px; position: relative; }
.bklink-image a:before, .bklink-3dm a:before { content: ""; height: 100%; display: inline-block; width: 0; vertical-align: middle; font-size: 0; }
.bklink-image .vt img, .bklink-3dm .vt img { height: 280px; display: inline-block; }
.bklink-image .hz img, .bklink-3dm .hz img { width: 280px; vertical-align: middle; display: inline-block!important; }
.bklink-image .overbox, .bklink-3dm .overbox { left: 0; top: 0; color: #fff;  display:block; word-break: break-all; word-wrap: break-word; height: 100%; width: 100%; text-align: center; position: absolute; z-index: 1; }
.bklink-image .overbox:before, .bklink-3dm .overbox:before { content: ""; height: 100%; width: 0; display: inline-block; vertical-align: middle; }
.bklink-image .info, .bklink-3dm .info { display:none; vertical-align: middle; word-break: break-all; word-wrap: break-word; max-width: 200px; white-space: normal; }
.bklink-image li:hover .info, .bklink-3dm li:hover .info { display: inline-block; }
.bklink-image a:hover img, .bklink-3dm a:hover img { opacity: 0.3;}
.bklink-image .title, .bklink-3dm .title { font-size: 16px; }
.bklink-image .author, .bklink-3dm .author { margin-top: 10px; }

/* Bklink - TEXT =========================== */
.bklink-text { padding: 60px 0 30px; }
.bklink-text li { width: 200px; margin-left: 20px; background-color: #fdfdf4; height:auto; height: 100%; }
.bklink-text li a { padding: 20px; box-shadow: 1px 1px 7px #333; color: #333; display: block; white-space: nowrap;}
.bklink-text a:hover { text-decoration: none; }
.bklink-text .info { }
.bklink-text .title { overflow: hidden; text-overflow: ellipsis; }
.bklink-text .author { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; color: #999; }
.bklink-text .text { margin-top: 15px; background: url(../images/bg_dtl_txt.png); word-break: break-all; white-space: normal; padding-top: 3px; line-height: 1.7em; height: 180px; overflow: hidden; color: #684D37; }

/* Bklink - more ============= */
.bklink-more p:hover { background: #333 !important; }
.bklink-more p:after { content:"\f101"; font-family: 'FontAwesome'; margin-left: 3px;}
.bklink-audio .bklink-more p, .bklink-image .bklink-more p, .bklink-3dm .bklink-more p { display: block; background: #666; color: #fff; box-shadow: 1px 1px 7px #333; width: 280px; height: 175px; margin-top: 60px; line-height: 175px; border-radius: 6px; cursor: pointer; }
.bklink-text .bklink-more { background: #666; color: #fff; text-align: center; cursor: pointer; box-shadow: 1px 1px 7px #333; }
.bklink-text .bklink-more p { padding: 20px; height: 235px; line-height: 230px; }
.outof_test {  }
.outof_test + .user_main { padding-top: 40px; }
.outof_test p {  color: #fff;  font-size: 1.2em; }
/* ======================================
For pop up player
========================================*/
.playerheader { padding: 10px 20px; background: #fff; border-top: 5px solid #ff0082; }
.playerheader .artist { font-weight: bold; color:#666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playerfooter { background: #fff; padding: 5px; color: #666; font-size: 0.8em; background: #ff0082; color: #fff; }

/* over-write colorbox.css ============ */
#cboxContent, #cboxLoadedContent { background-color: transparent!important; }

.jacket-cover-vt.trim, .jacket-cover-hz.trim { cursor: pointer; }

.outof_test+.works-whole, .outof_test+.oneclm-whole { margin-top: 50px; }
#playerBox{ margin-top: 60px;}
.lyric-box { padding-top: 20px; }
/* ======================================
For user and collabo detail page
========================================= */
.userbar { background: #2096EA; width: 100%; height: 50px; position: relative; }
.userbar-main { padding: 10px 0 0 30px; max-width:820px; float:left; }
.userbar-sub { float: right; margin:12px 20px 0 0;  }
.userbar-icon { display:block; background: center; background-size: cover; width: 48px; height: 48px; border-radius: 50%; float: left; }
.userbar-box { margin-left: 58px; max-width: 700px; }
.userbar-name a { color: #fff; font-size:15px}
.userbar .link-works { font-size: 9px; background: #c1e5ff; color: #2096ea; border-radius: 20px; padding:  2px 6px 1px; display: inline-block; vertical-align: text-top; text-decoration: none; margin-left: 5px; }
.userbar-comment { background:#fff; height:30px; padding:0  10px; max-width:620px; position:relative; box-shadow: 3px 3px 0 rgba(0,0,0,0.2); border: 1px solid #2096EA; z-index: 10; }
.userbar-comment:before { content: ""; display: block; position: absolute; border-right:14px solid #2096EA; border-top: none; border-bottom: 14px solid transparent; left: -15px; top: -1px; z-index: -1;}
.userbar-comment:after { content: ""; display: block; position: absolute; border-right:20px solid #fff; border-top: none; border-bottom: 20px solid transparent; left: -12px; top: 0px; z-index: 2;}
.userbar-comment p { position: relative; z-index: 1; max-width: 530px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 30px; height: 30px; padding-right: 100px;}
.userbar-more { display:block; float: right;font-size: 8px; color: #2096EA; border: 1px solid #2096EA; padding: 0 5px; border-radius: 20px; text-decoration: none; position: absolute; right: 10px; top: 7px; background: #fff; z-index: 1; transition: all .2s; cursor: default;}
.userbar-more:hover { background: #2096ea; color: #fff; }
.userbar-fn li { display: inline-block; padding-left: 10px; }
.userbar-fn li > a > .fa{ color: #c1e5ff; cursor: pointer;}
/* for user collabo ======== */
.clb.userbar { background:#F255A3; }
.clb.userbar .link-works { background: #ffd0ea; color: #f255a3; }
.clb .userbar-comment { border: 1px solid #F255A3; }
.clb .userbar-comment:before { border-right-color: #F255A3; }
.clb .userbar-more { color:#F255A3; border: 1px solid #F255A3; }
.clb .userbar-more:hover { color: #fff; background-color: #f255a3; }
.clb .userbar-fn li > a >.fa{ color: #FFD0EA; }
.userbar-fn li>.fa:hover { color: #fff; }
.userbar .link-works:hover { background: #fff; }
.expand .userbar-comment { position:absolute; height: auto; max-width: 800px; padding-bottom: 10px; }
.expand .userbar-comment p { width: auto; line-height: 1.6; padding: 5px 0; max-width: none; white-space: inherit; height: auto; word-break: break-all; padding: 30px 80px 30px 30px; max-height: 500px; overflow: scroll;}
.userbar + .works-whole, .userbar + .oneclm-whole { margin-top: 50px;}

.button_follow { color: #FF2D97 ; font-weight: bold; text-decoration: none; text-align: center; position: relative; display: inline-block; cursor: pointer; text-shadow: 0 1px 0 #ffffff; transition: all .3s; background: #ffffff; border: solid 1px #acacac; border-radius: 4px; }
.button_follow:hover { border-color: #568; text-shadow: 0 1px 1px #fff; color: #3399FF; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.button_follow:before { font-family: 'FontAwesome'; content: '\f004'; font-size: 1.3em; vertical-align: text-top;}
.button_follow.mutual:before { font-family: 'FontAwesome'; content: '\f2b5 '; font-size: 1.3em; vertical-align: text-top;}
.button_follow:hover:before { font-family: 'FontAwesome'; content: '\f056'; }
.button_follow:after { content: " フォロー中"; }
.button_follow.mutual:after { content: " 相互フォロー中"; }
.button_follow:hover:after { content: " フォロー解除"; }

/* toolbox */
.toolbox { position: fixed; left: 0; top: 130px; z-index: 100; font-size: 1.2em; }
.toolbox_btn { height: 35px; line-height: 35px; padding: 5px 20px; background: rgba(255, 194, 0, 0.8); color: #444; border-radius: 0 6px 6px 0; box-shadow: 2px 2px 3px rgba(0,0,0,0.3); position: relative; min-width: 120px; }
.toolbox_btn:hover { background-color: #ffec0a; cursor: pointer; }
.toolbox_btn span { display: block; text-align: center; font-size: 1.6em; color: #444; margin-left: 1.5em; transition: all 0.3s; position: absolute; right: 20px; top: 10px; }
.toolbox_btn:hover span { color: #fff; /* transform: rotate(90deg); */ }
.toolbox_btn.open { border-radius: 0 6px 0 0; }
.toolbox_btn.open span { transform: rotate(-90deg); }
.toolbox_btn i { padding-right: 8px; font-size: 3em; position: relative; top: -17px; vertical-align: text-top; text-shadow: 0 2px 0 #fff,2px 0 0 #fff,0 -2px 0 #fff,-2px 0 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff; }
.toolbox_fn { background: rgba(0,0,0,0.7); border-radius: 0 0 6px 0; box-shadow: 2px 2px 3px rgba(0,0,0,0.3); }
.toolbox_fn li { border-bottom: 1px solid #666; }
.toolbox_fn li:last-child { border-bottom: none; }
.toolbox_fn a { display: block; padding: 7px 20px; color: #fff; text-decoration: none; }
.toolbox_fn a:hover { background: rgba(0,0,0,0.2); }
.toolbox_fn i { display: inline-block; width: 25px; font-size: 1.5em; margin-right: 10px; }