@charset "UTF-8";
/* CSS Document */
html,body {
    height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
body {
    background:#fefefe;
    height:100%;
    word-wrap:break-word;
    /*font:13px/1.4 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","Segoe UI Symbol",sans-serif;*/
    font:13px/1.4 Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"MS Pゴシック","Segoe UI Symbol",sans-serif;

}
body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body.modal-open{
    overflow: hidden;
}
body.wrap-on-modal #wrap{
  position: fixed;
  width: 100%;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p,
img, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
canvas,
footer, header, hgroup, menu, nav, section, summary, time {
    margin:0;
    padding:0;
    border:0;
    list-style: none;
}
table {
    border-collapse:collapse;
    border-spacing:0;
    font-size:inherit;
    font:100%;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
a { color: #356FB7; text-decoration: none; }
a:hover { color: #eb4e7e}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -296px;
}

#push,
footer {
  height: 296px;
}
footer .box_language_choice .language{
  background:none;
}
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ------------------------------------------------
    COMMON
--------------------------------------------- */
.hide_text {
    text-indent: 100%;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}
/********************** old **********************/
.fontsize10{font-size: 77% !important;}
.fontsize11{font-size: 85% !important;}
.fontsize12{font-size: 93% !important;}
.fontsize13{font-size: 106% !important;}
.fontsize14{font-size: 108% !important;}
.fontsize15{font-size: 116% !important;}
.fontsize16{font-size: 124% !important;}
.fontsize17{font-size: 131% !important;}
.fontsize18{font-size: 139% !important;}
.fontsize19{font-size: 147% !important;}
.fontsize20{font-size: 154% !important;}
.fontsize21{font-size: 162% !important;}
.fontsize22{font-size: 170% !important;}
.fontsize23{font-size: 177% !important;}
.fontsize24{font-size: 185% !important;}
.fontsize25{font-size: 193% !important;}
.fontsize26{font-size: 200% !important;}
.fontsize30{font-size: 230% !important;}
.fontsize50{font-size: 384% !important;}

.lineheight08{line-height:0.8 !important;}
.lineheight10{line-height:1.0 !important;}
.lineheight12{line-height:1.2 !important;}
.lineheight15{line-height:1.5 !important;}
.lineheight18{line-height:1.8 !important;}
.lineheight20{line-height:2.0 !important;}

.middlePosition{margin: 0 auto 0 !important;}

.padding0{padding: 0px !important;}
.padding5{padding: 5px !important;}
.padding10{padding: 10px !important;}
.padding15{padding: 15px !important;}
.padding20{padding: 20px !important;}
.padding25{padding: 25px !important;}
.padding30{padding: 30px !important;}
.padding40{padding: 40px !important;}
.padding50{padding: 50px !important;}
.top0{padding-top: 0px !important;}
.top5{padding-top: 5px !important;}
.top10{padding-top: 10px !important;}
.top15{padding-top: 15px !important;}
.top20{padding-top: 20px !important;}
.top25{padding-top: 25px !important;}
.top30{padding-top: 30px !important;}
.top40{padding-top: 40px !important;}
.top50{padding-top: 50px !important;}
.left0{padding-left: 0px !important;}
.left5{padding-left: 5px !important;}
.left10{padding-left: 10px !important;}
.left15{padding-left: 15px !important;}
.left20{padding-left: 20px !important;}
.left25{padding-left: 25px !important;}
.left30{padding-left: 30px !important;}
.left40{padding-left: 40px !important;}
.left50{padding-left: 50px !important;}
.bottom0{padding-bottom: 0px !important;}
.bottom5{padding-bottom: 5px !important;}
.bottom10{padding-bottom: 10px !important;}
.bottom15{padding-bottom: 15px !important;}
.bottom20{padding-bottom: 20px !important;}
.bottom25{padding-bottom: 25px !important;}
.bottom30{padding-bottom: 30px !important;}
.bottom40{padding-bottom: 40px !important;}
.bottom50{padding-bottom: 50px !important;}
.right0{padding-right: 0px !important;}
.right5{padding-right: 5px !important;}
.right10{padding-right: 10px !important;}
.right15{padding-right: 15px !important;}
.right20{padding-right: 20px !important;}
.right25{padding-right: 25px !important;}
.right30{padding-right: 30px !important;}
.right40{padding-right: 40px !important;}
.right50{padding-right: 50px !important;}

.margin0{margin: 0px !important;}
.margin5{margin: 5px !important;}
.margin10{margin: 10px !important;}
.margin15{margin: 15px !important;}
.margin20{margin: 20px !important;}
.margin25{margin: 25px !important;}
.margin30{margin: 30px !important;}
.margin40{margin: 40px !important;}
.margin50{margin: 50px !important;}
.mtop0{margin-top: 0px !important;}
.mtop5{margin-top: 5px !important;}
.mtop10{margin-top: 10px !important;}
.mtop15{margin-top: 15px !important;}
.mtop20{margin-top: 20px !important;}
.mtop25{margin-top: 25px !important;}
.mtop30{margin-top: 30px !important;}
.mtop40{margin-top: 40px !important;}
.mtop50{margin-top: 50px !important;}
.mleft0{margin-left: 0px !important;}
.mleft5{margin-left: 5px !important;}
.mleft10{margin-left: 10px !important;}
.mleft15{margin-left: 15px !important;}
.mleft20{margin-left: 20px !important;}
.mleft25{margin-left: 25px !important;}
.mleft30{margin-left: 30px !important;}
.mleft40{margin-left: 40px !important;}
.mleft50{margin-left: 50px !important;}
.mbottom0{margin-bottom: 0px !important;}
.mbottom5{margin-bottom: 5px !important;}
.mbottom10{margin-bottom: 10px !important;}
.mbottom15{margin-bottom: 15px !important;}
.mbottom20{margin-bottom: 20px !important;}
.mbottom25{margin-bottom: 25px !important;}
.mbottom30{margin-bottom: 30px !important;}
.mbottom40{margin-bottom: 40px !important;}
.mbottom50{margin-bottom: 50px !important;}
.mright0{margin-right: 0px !important;}
.mright5{margin-right: 5px !important;}
.mright10{margin-right: 10px !important;}
.mright15{margin-right: 15px !important;}
.mright20{margin-right: 20px !important;}
.mright25{margin-right: 25px !important;}
.mright30{margin-right: 30px !important;}
.mright40{margin-right: 40px !important;}
.mright50{margin-right: 50px !important;}

.textcenter{text-align: center !important;}

.right {float: right;}
.left {float: left;}
.hidden_text {position:relative;}
.alert {color:#f2506e !important;}
.pointer {cursor: pointer !important;}
.no-pointer {cursor: default !important;}
.bold {font-weight: bold !important;}
.gray {color: #767676;}
.link_blue {color: #356fb7!important;}
.link_blue:hover {color: #eb4e7e!important;}

/* ------------------------------------------------
    icomoon
------------------------------------------------ */
.iconfont:before {
  font-family: "icomoon";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-message:before {
  content: "\e675";
}
.icon-friends:before {
  content: "\e676";
}
.icon-notification:before {
  content: "\e716";
}
.icon-setting:before {
  content: "\e683";
}
.icon-cart:before {
  content: "\e62b";
}
.icon-help:before {
  content: "\e618";
}
.icon-home:before {
  content: "\e915";
}
.icon-comic:before {
  content: "\e724";
}
.icon-illust:before {
  content: "\e916";
}
.icon-novel:before {
  content: "\e705";
}
.icon-shelf:before {
  content: "\e725";
}
.icon-search:before {
  content: "\e617";
}
.icon-viewCount:before {
  content: "\e626";
}
.icon-likeCount:before {
  content: "\e655";
}
.icon-userEntry:before {
  content: "\e641";
}
.icon-userLogin:before {
  content: "\e640";
}

/* ------------------------------------------------
    user-icon
------------------------------------------------ */
.user-icon { /* トップ・作品一覧など 意図しないところにスタイルが当たっちゃった時の次善策で、小さい方をデフォルト値にした */
  display: inline-block;
  margin-right: 1px;
  width: 18px;
  height: 18px;
  border: 1px solid #e7e6e1;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}
.user-icon.icon-size21 { /* スクロール時のミニヘッダー */
  width: 21px;
  height: 21px;
}
.user-icon.icon-size28 { /* クリエイターズランキングー */
  width: 28px;
  height: 28px;
}
.user-icon.icon-size30 { /* ヘッダー */
  width: 30px;
  height: 30px;
}
.user-icon.icon-size34 { /* みんなのニュース一覧 */
  width: 34px;
  height: 34px;
}
.user-icon img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------
   header
--------------------------------------------- */
header{
    background: #fefefe;
  }
header .header_top_border {
    border-bottom:1px solid #f2f2f2;
}
header .creators .header_top_border {
    border-bottom:none;
}
header .header_top {
    width: 1024px;
    margin: 0 auto;
    height: 42px;
}
header .header_top .header_tit {
    color:#767676;
    line-height: 42px;
    display: block;
}
header ul li {
    float:left;
}

header ul li.user_icon {
    width: 30px;
    height: 30px;
    margin: 6px 0 0 150px;
    border: 1px solid #e7e6e1;
    border-radius: 15px;
    overflow: hidden;
}
header ul li.user_icon img {
    min-width: 28px;
    width: 100%;
    height: auto;
}
header ul li.user_name {
    margin: 7px 0 0 5px;
    line-height: 28px;
}
header ul li.user_name .user_name_area {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
    word-wrap: normal; /* for IE */
}
header ul li.user_name .user_name_area a {
  color: #000;
}
header ul li.user_name .user_name_area a:hover {
  color: #eb4e7e;
}
.user_name_san {
    display: inline-block;
    overflow: hidden;
}
header ul li.header_logout {
    margin: 0 0 10px;
    height: 40px;
    font-size: 85%;
}
header ul li.header_logout .header_logout_btn {
    margin: 9px 0 0;
    padding: 0 5px ;
    line-height: 22px;
    border-radius: 5px;
    border:1px solid #e7e1db;
}

/* message */
header ul li.message,
header ul li.friends,
header ul li.notification,
header ul li.setting {
    position: relative;
    margin: 8px 0 0 10px;
    width: 30px;
}
header ul li.setting {
    margin: 8px 10px 0 6px;
}
header ul li.message .btn,
header ul li.friends .btn,
header ul li.notification .btn{
    display: block;
    width: 30px;
    height: 26px;
    line-height: 26px;
    border-radius: 10px;
    border:1px solid #e9e9e9;
}
header ul li.setting .btn{
    display: block;
    width: 30px;
    height: 26px;
    line-height: 26px;
    padding: 1px 0 0 5px;
}
header ul li.message .btn:before,
header ul li.friends .btn:before,
header ul li.notification .btn:before,
header ul li.setting .btn:before{
    font-family:"icomoon";
    display: block;
    text-align: center;
    color: #3c3c3c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
header ul li.message .btn:before{
    content: "\e675";
    font-size: 131%;
}
header ul li.friends .btn:before{
    content: "\e676";
    font-size: 160%;
}
header ul li.notification .btn:before{
    content: "\e716";
    font-size: 160%;
}
header ul li.setting .btn:before{
    content: "\e683";
    font-size: 131%;
}
header ul li.message .btn:hover,
header ul li.friends .btn:hover,
header ul li.notification .btn:hover{
  background: #356FB7;
  border:none;
}
header ul li.message .btn:hover:before,
header ul li.friends .btn:hover:before,
header ul li.notification .btn:hover:before{
  color: #fff;
}

header ul li.message .new,
header ul li.friends .new,
header ul li.notification .new,
header ul li.setting .new {
    position: absolute;
    display: block;
    top: -2px;
    left: 20px;
    width: 16px;
    height: 16px;
    padding-top: 1px;
    border-radius: 50%;
    background: #ff0000;
    font-size: 78%;
    color: #fff;
    text-align: center;
}
header ul li .new:before{
    font-family:"icomoon";
    content: "\e684";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header ul li.header_logout {
    margin: 0 120px 0 10px;
    height: 40px;
    font-size: 85%;
}

/* header modal */
header ul li .box {
  position: absolute;
  left: -110px;
  top: 42px;
  width: 260px;
  background:#fff;
  border: 1px solid #e7e6e1;
  border-radius:10px;
  z-index: 1000;
}
header ul li.setting .box {
  left: -30px;
  width: 100px;
}
header ul li .box:after,
header ul li .box:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    left: 50%;
    margin-left: -12px;
    position: absolute;
    width: 0;
  z-index: 1001;
}
header ul li .box:after {
    border-width: 12px;
    border-bottom-color: #fff;
    border-top: 0;
    top: -10px;
    left: 124px;
}
header ul li .box:before {
    border-width: 12px;
    border-bottom-color: #e7e6e1;
    border-top: 0;
    top: -12px;
    left: 124px;
}
header ul li.setting .box:after,
header ul li.setting .box:before {
  left: 46px;
}
header ul li .box .icon {
  float: left;
  margin-right: 10px;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  -webkit-box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  -moz-box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  background: #f8f8f8;
  text-align: center;
  overflow: hidden;
}
header ul li .box .icon img {
  min-width: 24px;
  width: 100%;
  height: auto;
}
header ul li .box .name{
    color: #525657;
    font-weight: bold;
}
header ul li .box .txt{
    color: #525657;
}

header ul li .box section{
  line-height: 100%;
}
header ul li .box article{
  position: relative;
}

/*message,friends,notification common*/
header ul li .box .box_detail{
  float: left;
  width: 200px;
}

/* message */
header ul li.message .header_message_box .headerMessageBoxArea article{
  border-bottom: 1px solid #e7e6e1;
}
header ul li.message .header_message_box .headerMessageBoxArea article a{
  display: block;
  padding: 10px;
}
header ul li.message .header_message_box .headerMessageBoxArea article a:hover{
  background-color: #f7fbff!important;
}
header ul li.message .header_message_box .headerMessageBoxArea article:first-child a:hover{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
header ul li.message .header_message_box .headerMessageBoxArea article a .icon{
  float: left;
  margin-right: 10px;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  -webkit-box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  -moz-box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  background: #f8f8f8;
  text-align: center;
  overflow: hidden;
}
header ul li.message .header_message_box .headerMessageBoxArea article a .box_detail{
  float: left;
  width: 200px;
}
header ul li.message .header_message_box .headerMessageBoxArea article a .box_detail .box_sendTime{
  color: #b5b5b5;
  float: right;
  font-size: 80%;
  text-align: right;
}
header ul li.message .header_message_box .headerMessageBoxArea article a .box_detail .name{
  margin-bottom: 3px;
  max-width: 80px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
header ul li.message .header_message_box .headerMessageBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

header ul li.message .header_message_box .headerMessageBoxArea article a .box_detail .unread{
  background-color: #ff0000;
  border-radius: 5px;
  bottom: 10px;
  color: #fff;
  font-size: 85%;
  padding: 1px 5px;
  position: absolute;
  right: 10px;
  text-align: center;
}
header ul li.message .header_message_box .btn_morelink.message{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-radius: 0 0 10px 10px;
}
header ul li.message .header_message_box .btn_morelink.message:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* friends */
/*friends > headerFriendBoxArea*/
header ul li.friends .header_friends_box .headerFriendBoxArea article {
  padding: 10px;
  border-bottom: 1px solid #e7e6e1;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .icon {
  margin-top: 10px;
  background: #f8f8f8 none repeat scroll 0 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  float: left;
  height: 28px;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  width: 28px;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail{
  float: left;
  width: 200px;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .box_sendTime{
  text-align: right;
  width: 100%;
  color: #b5b5b5;
  font-size: 80%;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .name{
  max-width: 100%;
  width: 100%;
  margin-bottom: 3px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-top: 5px;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .name a{
  padding: 5px;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit{
  text-align: right;
  margin-top: 5px;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_submit{
  border: 1px solid #d1e89b;
  color: #7a9e16;
  margin-right: 2px;
  background: #fff none repeat scroll 0 0;
  border-radius: 3px;
  display: inline-block;
  font-size: 77%;
  height: 17px;
  width: 70px;
  line-height: 10px;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_submit:hover{
  background-color: #7a9e16;
  border-color: #7a9e16;
  color: #fff;
}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_cancel{
  border: 1px solid #e9e7e1;
  color: #797979;
  background: #fff none repeat scroll 0 0;
  border-radius: 3px;
  display: inline-block;
  font-size: 77%;
  height: 17px;
  width: 70px;
  line-height: 10px;

}
header ul li.friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_cancel:hover{
  background-color: #797979;
  border-color:#797979;
  color: #fff;
}
header ul li.friends .header_friends_box .btn_morelink.friends{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-bottom: 1px solid #e7e6e1;
  border-bottom-color: #e7e6e1!important;
}
header ul li.friends .header_friends_box .btn_morelink.friends:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*friends > headerTeamBoxArea */
header ul li.friends .header_friends_box .headerTeamBoxArea article{
  border-bottom: 1px solid #e7e6e1;

}
header ul li.friends .header_friends_box .headerTeamBoxArea article a{
  display: block;
  padding: 10px;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a:hover{
  background-color: #f7fbff!important;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a .icon{
  margin-top: 10px;
  background: #f8f8f8 none repeat scroll 0 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  float: left;
  height: 28px;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  width: 28px;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a .icon img{
  height: auto;
  min-width: 24px;
  width: 100%;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a .box_detail{
  float: left;
  width: 200px;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a .box_detail .box_sendTime{
  text-align: right;
  width: 100%;
  color: #b5b5b5;
  font-size: 80%;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a .box_detail .name{
  margin-bottom: 3px;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-top:5px;
}
header ul li.friends .header_friends_box .headerTeamBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
header ul li.friends .header_friends_box .btn_morelink.hd-box-teamBoard{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-radius: 0 0 10px 10px;
}
header ul li.friends .header_friends_box .btn_morelink.hd-box-teamBoard:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* notification */
/*notification > headerNotificationBoxArea*/
header ul li.notification .header_notification_box .headerNotificationBoxArea article a {
  padding: 10px;
  border-bottom: 1px solid #e7e6e1;
  display: block;
}
header ul li.notification .header_notification_box .headerNotificationBoxArea article a:hover,
.header-tb .header-tb__nav .header-tb__inr .header-tb__menu.notice .notification .box.header_notification_box .headerNotificationBoxArea .notification_unread a:hover{
  background-color: #f7fbff!important;
}
header ul li.notification .header_notification_box .headerNotificationBoxArea article a:hover{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
header ul li.notification .header_notification_box .headerNotificationBoxArea article a .box_detail{
  float: left;
  width: 240px;
}
header ul li.notification .header_notification_box .headerNotificationBoxArea article a .box_detail .box_sendTime{
  color: #b5b5b5;
  float: none;
  font-size: 80%;
  margin-bottom: 2px;
  text-align: left;
}
header ul li.notification .header_notification_box .headerNotificationBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 100%;
  text-overflow: clip;
  white-space: normal;
  overflow: hidden;
  word-wrap: normal;
 }
 header ul li.notification .header_notification_box .btn_morelink.notification{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-bottom: 1px solid #e7e6e1;
  border-bottom-color: #e7e6e1!important;
}
header ul li.notification .header_notification_box .btn_morelink.notification:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*notification > headerAnnounceBoxArea*/
header ul li.notification .header_notification_box .headerAnnounceBoxArea article a {
  border-bottom: 1px solid #e7e6e1;
  display: block;
  padding: 10px;
}
header ul li.notification .header_notification_box .headerAnnounceBoxArea article a:hover,
.header-tb .header-tb__nav .header-tb__inr .header-tb__menu.notice .notification .box.header_notification_box .headerAnnounceBoxArea .notification_unread a:hover{
  background-color: #f7fbff!important;
}
header ul li.notification .header_notification_box .headerAnnounceBoxArea article a .box_detail{
  float: left;
  width: 240px;
}
header ul li.notification .header_notification_box .headerAnnounceBoxArea article a .box_detail .box_sendTime{
  color: #b5b5b5;
  float: none;
  font-size: 80%;
  margin-bottom: 2px;
  text-align: left;
}
header ul li.notification .header_notification_box .headerAnnounceBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 100%;
  text-overflow: clip;
  white-space: normal;
}
header ul li.notification .header_notification_box .btn_morelink.notification.announceLink{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-radius: 0 0 10px 10px;
  border-bottom: none;

}
header ul li.notification .header_notification_box .btn_morelink.notification.announceLink:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* setting */
header ul li.setting .box a{
  display: block;
  padding: 8px 10px;
  border-bottom: 1px solid #e7e6e1;
}
header ul li.setting .box a:last-child{
  border-bottom: 0px;
}

/* cart */
header ul li.cart_tit {
    float: right;
    min-width: 120px;
    min-height: 1px;
    line-height: 42px;
    font-size: 85%;
    color: #767676;
    text-align: right;
}
header ul .cart_btn {
    float: right;
    width: 70px;
    margin: 7px 0 0 10px;
}

header ul li .cart_count {
    display: inline-block;
    line-height: 34px;
    width: 70px;
    height: 34px;
    text-align: center;
    border-radius: 8px;
    background: #ff6e1b; /* Old browsers */
    background: -moz-linear-gradient(top, #ff6e1b 0%, #f1582e 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6e1b), color-stop(99%,#f1582e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff6e1b 0%,#f1582e 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff6e1b 0%,#f1582e 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff6e1b 0%,#f1582e 99%); /* IE10+ */
    background: linear-gradient(to bottom, #ff6e1b 0%,#f1582e 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e1b', endColorstr='#f1582e',GradientType=0 ); /* IE6-9 */
    box-shadow: 0 2px 0 #cf471c;
}
header ul li .cart_count:hover {
    background: #ff9a26; /* Old browsers */
    background: -moz-linear-gradient(top, #ff9a26 0%, #f77b40 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6e1b), color-stop(99%,#f77b40)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff9a26 0%,#f77b40 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff9a26 0%,#f77b40 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff9a26 0%,#f77b40 99%); /* IE10+ */
    background: linear-gradient(to bottom, #ff9a26 0%,#f77b40 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9a26', endColorstr='#f77b40',GradientType=0 ); /* IE6-9 */
    box-shadow: 0 2px 0 #e26327;
}
header ul li .cart_count:before {
    font-family:"icomoon";
    content: "\e619";
    position: relative;
    top: 2px;
    font-size: 165%;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cart_count_item {
    margin: 0 0 0 10px;
    color: #fff;
    font-size: 154%;
    font-weight: bold;
}

header ul li.help {
    float: right;
    margin: 0 0 0 20px;
    height: 40px;
}
header ul li .help_q {
    margin: 12px 5px 0 0;
    font-size: 85%;
    font-weight: bold;
}
header ul li .help_p {
    float: left;
    line-height: 42px;
}

/*** NOT LOGIN **/
header .user_entry {
    float: right;
    width: 150px;
}
.user_entry a {
    display: block;
    margin: 5px 10px 0 0 ;
    border-radius:3px;
    text-align: center;
    height: 30px;
    font-weight: bold;
    color: #fff;
    background:#fb8d43;
}
.user_entry a:hover {
    background:#ff6d0c;
}
.user_entry a:before {
    font-family:"icomoon";
    content: "\e641";
    position: relative;
    top: 3px;
    padding: 0 10px 0 0;
    font-size: 140%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header .user_login {
    float: right;
    width: 150px;
}
.user_login a{
    display: block;
    margin: 5px 10px 0 0 ;
    border-radius:3px;
    height: 30px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background:#4fb8e2;
}
.user_login a:hover {
    background:#00aeff;
}
.user_login a:before {
    font-family:"icomoon";
    content: "\e640";
    position: relative;
    top: 3px;
    padding: 0 10px 0 0;
    font-size: 130%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.header_bottom {
    position: relative;
    width: 1024px;
    height: 60px;
    margin: 0 auto;
}

header h1 {
    margin: 12px 0 0 -1px;
    float: left;
    background: url(../images/logo_medibang.svg) 0 0 no-repeat;
    background-size: 191px 35px;
    height: 35px;
    width: 191px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
header h1 a {
    display: inline-block;
}
header h1:hover {
    opacity: 0.8;
}

.header_bottom_area {
    border-bottom: 1px solid #ededed;
}
/*** HEADER NAV ***/
.header_nav {
    position: absolute;
    height: 58px;
    margin: 4px 0 0 0;
    left: 200px;
    width: 952px;
}

.header_nav ul li {
    float: left;
    text-align: center;
}
.header_nav ul .book_manga,
.header_nav ul .book_reflow,
.header_nav ul .book_picture,
.header_nav ul .book_list{
    width: 68px;
    height: 48px;
}

.header_nav ul .book_manga .btn,
.header_nav ul .book_reflow .btn,
.header_nav ul .book_picture .btn,
.header_nav ul .book_list .btn{
    display: block;
    height: 50px;
    font-weight: bold;
    background: #fff;
    color: #3c3c3c;
    margin-top: 3px;
}

.header_nav ul .book_manga .icn:before,
.header_nav ul .book_reflow .icn:before,
.header_nav ul .book_picture .icn:before,
.header_nav ul .book_list .icn:before{
    font-family:"icomoon";
    font-weight: normal;
    vertical-align:middle;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.header_nav ul .book_manga .icn:before {
    content: "\e724";
    font-size: 200%;
}
.header_nav ul .book_reflow .icn:before {
    content: "\e705";
    font-size: 230%;
}
.header_nav ul .book_picture .icn:before {
    content: "\e726";
    font-size: 200%;
    position: relative;
    top: 1px;
}
.header_nav ul .book_list .icn:before {
    content: "\e725";
    position: relative;
    top: 3px;
    font-size: 250%;
}

.header_nav ul .book_manga .tit,
.header_nav ul .book_reflow .tit,
.header_nav ul .book_picture .tit,
.header_nav ul .book_list .tit{
    font-size: 85%;
}
.pagelang-en .header_nav ul .book_manga .tit,
.pagelang-en .header_nav ul .book_reflow .tit,
.pagelang-en .header_nav ul .book_picture .tit,
.pagelang-en .header_nav ul .book_list .tit{
  font-size: 80%
}

.header_nav ul .book_manga .btn:hover,
.header_nav ul .book_manga .btn.on,
.header_nav ul .book_reflow .btn:hover,
.header_nav ul .book_reflow .btn.on,
.header_nav ul .book_picture .btn:hover,
.header_nav ul .book_picture .btn.on,
.header_nav ul .book_list .btn:hover,
.header_nav ul .book_list .btn.on {
    color: #e15b4e;
}
.header_nav ul .book_reflow .btn:hover,
.header_nav ul .book_reflow .btn.on {
    border-width: 1px 0;
}

.header_nav ul li.search{
    position: relative;
    display: block;
    width:470px;
    text-align: left;
    margin: 8px 0 0 0;
}
.header_nav ul li.search .search_box {
    border: 1px solid #e2e2e2;
    border-radius: 0;
    height: 34px;
    width: 322px;
    padding-left: 15px;
    color: #727272;
    margin-left: 90px;
    border-left:none;
  }
.pagelang-en .header_nav ul li.search .search_box{
  margin-left: 105px;
  width: 315px;
}
.pagelang-zh_CN .header_nav ul li.search .search_box{
  margin-left: 65px;
  width: 355px;
}
.pagelang-zh_TW .header_nav ul li.search .search_box{
  margin-left: 65px;
  width: 355px;
}
.pagelang-ko .header_nav ul li.search .search_box{
}
.updnWatermark {
    color: #b1b1b1;
    padding: 0px 10px;
}
.header_nav ul li.search .header-bottom-search{
  width: 460px;
  font-size: 0;
  border:1px solid #e2e2e2;
  border-radius: 10px;
  box-sizing: border-box;
}
.header_nav ul li.search .header-bottom-search-category{
  width: 98px;
  display: inline-block;
  font-size: 13px;
  vertical-align: top;
  position: relative;
  border-right:1px solid #e2e2e2;
  z-index: 0;
}
.header_nav ul li.search .header-bottom-search-category:after{
  content: "";
  position:absolute;
  top:14px;
  right:10px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-top-color: #817f78;
  border-width: 6px 5px 0 ;
  line-height:1;
  z-index: -1;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .header_nav ul li.search .header-bottom-search-category:after { display: none; } /* IE11 */
}
.header_nav ul li.search .header-bottom-search-category select{
  -webkit-appearance : none;
  -moz-appearance : none;
  -ms-appearance : none;
  background : none;
  border:none;
  height: 32px;
  padding: 0 0 0 8px;
  box-sizing: border-box;
  width: 100%;
  z-index: 1;
}
.header_nav ul li.search .header-bottom-search-category select:hover{
  cursor: pointer;
}
.header_nav ul li.search .header-bottom-search-category option{
  -webkit-appearance : none;
  -moz-appearance : none;
  -ms-appearance : none;
  background : none;
  border:none;
}
.header_nav ul li.search .header-bottom-search-keyword{
  width: 310px;
  display: inline-block;
  font-size: 13px;
  vertical-align: top;
  box-sizing: border-box;
  border:none;
  height: 32px;
  padding: 0 8px;
}
.header_nav ul li.search .header-bottom-search-submit{
  width: 50px;
  display: inline-block;
  font-size: 13px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;

}
.header_nav ul li.search .header-bottom-search-submit:after{
  font-family:"icomoon";
  content: "\e617";
  font-weight: normal;
  vertical-align:middle;
  font-size: 116%;
  color: #3c3c3c;
  position: absolute;
  left: 0;
  top:0;
  width: 50px;
  padding-top: 4px;
  text-align: center;
  z-index: 1;
  background-color: #e5e5e5;
  border-radius: 0 9px 9px 0;
  height: 28px;

}
.header_nav ul li.search .header-bottom-search-submit input{
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  border-radius: 0 9px 9px 0;
  height: 32px;
  padding: 0;
  vertical-align: top;
  position: absolute;
  left: 0;
  top:0;
  z-index: 2;
  opacity: 0;
}

.header_nav ul .book_mypage {
    margin: 0 0 0 10px;
    width:68px;
    height: 48px;
}
.header_nav ul .book_mypage .btn {
    display: block;
    font-weight: bold;
    border-radius: 10px;
    border:1px solid #e9e9e9;
    background:#fff;
    color: #3c3c3c;
}
.header_nav ul .book_mypage .btn:hover {
    border:1px solid #6ccef8;
    background:#6ccef8;
    color: #fff;
}
.header_nav ul .book_mypage .btn.on {
    border:1px solid #6ccef8;
    background:#6ccef8;
    color: #fff;
}
.header_nav ul .book_mypage .icn:before {
    font-family:"icomoon";
    content: "\e616";
    font-weight: normal;
    vertical-align:middle;
    font-size: 185%;
}

.header_nav ul .book_mypage .tit {
    font-size: 85%;
}


.header_nav ul .book_make {
    margin: 7px 0 0 10px;
    width: 120px;
    height: 50px;
}
.header_nav ul .book_make .btn {
    display: block;
    width:111px;
    height: 36px;
    position: relative;
}
.header_nav ul .book_make .btn:before{
    display: block;
    width:111px;
    height: 36px;
    font-family:"icomoon";
    content: "\e60f";
    font-weight: normal;
    vertical-align:middle;
    font-size: 269%;
    position: absolute;
    left:0;
    top:-4px;
    color:#b6dc49;
}
.header_nav ul .book_make .btn .book-make-txt{
    width:108px;
    height: 36px;
    line-height: 2.5;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    color: #3c3f32;
    font-weight: bold;
}
.header_nav ul .book_make .btn .book-make-txt .font-l{
    font-size: 120%;
}

.header_nav ul .book_make .btn:hover:before {
    color: #3c3f32;
}
.header_nav ul .book_make .btn:hover .book-make-txt{
    color:#b6dc49;
}

/*** HEADER 簡易版 **/
header.simple{
    padding-bottom: 10px;
    border-bottom: 1px solid #eaece3;
}
header.simple ul a li.help {
    float: right;
    border-left: 0px solid #eaece3;
}

/* renewal */
.header-top li, .header-bottom li, .header-bottom h1{
  float: none;
}
.header-top-inner {
  border-bottom: 1px solid #f2f2f2;
}
.header-top {
  margin: 0 auto;
  width: 1024px;
  height: 42px;
  font-size: 0;
}
.header-top li {
  display: inline-block;
  font-size: 13px;
  vertical-align: middle;
}
.header-top .header-tit {
  width: 360px;
  color: #767676;
  line-height: 42px;
}
.header-top .header-creators {
  margin-left: 10px;
  width: 406px;
  font-size: 0;
}
.header-top .header-creators li {
  margin-top: 0;
}
.header-top .btn-creators a {
  display: block;
  border: 1px solid #abcf41;
  border-radius: 3px;
  background: #b6dc49;
  width: 80px;
  height: 32px;
  line-height: 32px;
  color: #3c3f32;
  text-align: center;
}
.header-top .btn-creators a:hover {
  border: #3c3f32;
  background: #3c3f32;
  color: #b6dc49;
}
.header-top .user-name-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  font-size: 13px;
  word-wrap: normal;
}
.header-top .user-name {
  color: #000;
}
.header-top .user-name:hover {
  color: #e15b4e;
}
.header-top .btn-message, 
.header-top .btn-friends, 
.header-top .btn-notification, 
.header-top .btn-setting {
  margin-left: 10px;
  width: 30px;
  position: relative;
}
.header-top .btn-message .iconfont, 
.header-top .btn-friends .iconfont, 
.header-top .btn-notification .iconfont {
  display: block;
  width: 30px;
  height: 26px;
  line-height: 26px;
  border-radius: 10px;
  border: 1px solid #e9e9e9;
  color: #3c3c3c;
  text-align: center;
}
.header-top .btn-message .iconfont:hover, 
.header-top .btn-friends .iconfont:hover, 
.header-top .btn-notification .iconfont:hover {
  background: #356fb7;
  border:none;
  color: #fff;
}
.header-top .btn-setting .iconfont {
  color: #3c3c3c;
}
.header-top .icon-message:before,
.header-top .icon-setting:before{
  font-size: 131%;
} 
.header-top .icon-friends:before,
.header-top .icon-notification:before{
  font-size: 160%;
} 
.header-top .btn-message .new,
.header-top .btn-friends .new,
.header-top .btn-notification .new,
.header-top .btn-setting .new {
    position: absolute;
    display: block;
    top: -2px;
    left: 20px;
    width: 16px;
    height: 16px;
    padding-top: 1px;
    border-radius: 50%;
    background: #ff0000;
    font-size: 78%;
    color: #fff;
    text-align: center;
}
.header-top  .new:before{
    font-family:"icomoon";
    content: "\e684";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.header-top .user-entry {
  display: inline-block;
  background: #fb8d43;
  border-radius: 3px;
  margin: 0 10px 0 0;
  width: 150px;
  height: 30px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.header-top .user-entry:before {
  position: relative;
  top: 3px;
  padding: 0 10px 0 0;
  font-size: 140%;
}
.header-top .user-entry:hover {
  background:#ff6d0c;
}
.header-top .user-login {
  display: inline-block;
  background: #4fb8e2;
  border-radius: 3px;
  margin: 0 10px 0 0;
  width: 150px;
  height: 30px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.header-top .user-login:before {
  position: relative;
  top: 3px;
  padding: 0 10px 0 0;
  font-size: 130%;
}
.header-top .user-login:hover {
  background:#00aeff;
}
.header-top .btn-buy {
  width: 64px;
  height: 32px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-top .btn-buy a {
  display: block;
  border-radius: 3px;
  background: #ff6e1b;
  background: -moz-linear-gradient(top, #ff6e1b 0%, #f1582e 99%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6e1b), color-stop(99%,#f1582e));
  background: -webkit-linear-gradient(top, #ff6e1b 0%,#f1582e 99%);
  background: -o-linear-gradient(top, #ff6e1b 0%,#f1582e 99%);
  background: -ms-linear-gradient(top, #ff6e1b 0%,#f1582e 99%);
  background: linear-gradient(to bottom, #ff6e1b 0%,#f1582e 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e1b', endColorstr='#f1582e',GradientType=0 );
  box-shadow: 0 1px 0 #cf471c;
  width: 64px;
  height: 31px;
  line-height: 32px;
  font-size: 131%;
  color: #fff;
  text-shadow: 0 -1px rgba(0,0,0,0.5);
  text-align: center;
}
.header-top .btn-buy a:hover {
  background: #ff9a26; /* Old browsers */
  background: -moz-linear-gradient(top, #ff9a26 0%, #f77b40 99%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6e1b), color-stop(99%,#f77b40)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ff9a26 0%,#f77b40 99%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ff9a26 0%,#f77b40 99%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ff9a26 0%,#f77b40 99%); /* IE10+ */
  background: linear-gradient(to bottom, #ff9a26 0%,#f77b40 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9a26', endColorstr='#f77b40',GradientType=0 ); /* IE6-9 */
  box-shadow: 0 1px 0 #e26327;
}
.header-top .btn-buy a:before {
  margin-right: 5px;
}
.cart_count_item {
  margin: 0;
  color: #fff;
  font-size: 100%;
  font-weight: normal;
}
.header-top .btn-help {
  margin-left: 25px;
}
.header-top .btn-help a:before {
  margin-right: 5px;
  font-size: 160%;
  color: #b9b6b0;
  vertical-align: middle;
}

.header-bottom {
  border-bottom: 1px solid #ededed;
}
.header-bottom-inner {
  margin: 0 auto;
  width: 1024px;
  height: 60px;
}
.header-bottom li {
  display: inline-block;
  width: 70px;
  text-align: center;
  vertical-align: middle;
}
.header-bottom li.logo {
  width: 210px;
}
.header-bottom li.logo h1 {
  display: block;
  background: url(../images/logo_medibang.svg) 0 0 no-repeat;
  background-size: 191px 35px;
  margin: 13px 19px 12px 0;
  height: 35px;
  width: 191px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.header-bottom li .iconfont {
  color: #4a4a4a;
  display: block;
}
.header-bottom li .iconfont:before {
  display: block;
  font-size: 26px;
}
.header-bottom li .iconfont.on,
.header-bottom li .iconfont:hover {
  color: #e15b4e;
}
.header-bottom li .iconfont .icon-bottomTxt {
  display: block;
  margin-top: -4px;
  font-size: 11px;
  font-weight: bold;
}
.pagelang-en .header-bottom li .iconfont .icon-bottomTxt {
  font-size: 10px;
}
.header-bottom li.search-area {
  margin-left: 17px;
  width: 420px;
  text-align:left;
}
.header-bottom li.search-area form {
  height: 34px;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  font-size: 0;
  position: relative;
}
.header-bottom li.search-area label {
  display: inline-block;
  box-sizing: border-box;
  width: 98px;
  font-size: 13px;
  vertical-align: top;
  position: relative;
  border-right: 1px solid #e2e2e2;
  z-index: 0;
}
.pagelang-en .header-bottom li.search-area label {
  font-size: 12px;
}
.header-bottom li.search-area label:before {
  content: "";
  position: absolute;
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-top-color: #817f78;
  border-width: 6px 5px 0;
  z-index: -1;
}
.header-bottom li.search-area select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  background: none;
  border: none;
  height: 32px;
  padding: 0 0 0 8px;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  z-index: 1;
}
.header-bottom li.search-area select::-ms-expand {
  display: none;
}
.header-bottom li.search-area input {
  display: inline-block;
  box-sizing: border-box;
  border: none;
  padding: 0 8px;
  width: 270px;
  height: 32px;
  font-size: 13px;
}
.header-bottom li.search-area button {
  display: inline-block;
  box-sizing: border-box;
  border: none;
  border-radius: 0 4px 4px 0;
  width: 50px;
  height: 32px;
  padding: 0;
  vertical-align: top;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.header-bottom li.search-area button:before {
  vertical-align: middle;
  background-color: #e5e5e5;
  border-radius: 0 4px 4px 0;
  font-size: 15px;
  font-weight: normal;
  color: #3c3c3c;
  height: 20px;
  width: 50px;
  padding: 6px 0;
  text-align: center;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
}

/*notification*/
.header-top .baloon-notification {
  display: none;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  width: 300px;
  height: 100px;
  position: absolute;
  top: 40px;
  right: -20;
  z-index: 2;
}
.header-top .baloon-notification:before {
  content: "";
  position: absolute;
  top: -11px;
  right: 25px;
  margin-top: 0px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e8e8e8 transparent;
  z-index: 2;
}
.header-top .baloon-notification:after{
  content: "";
  position: absolute;
  top: -10px;
  right: 25px;
  margin-top: 1px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  z-index: 2;
}
.header-top .baloon-notification .baloon-notification-list {
  background: #fff;
}
/* 以下、旧通知エリアをそのまま移植したもの */
/*message,friends,notification common*/

/* message */
.header-top .btn-message .header_message_box .headerMessageBoxArea article{
  border-bottom: 1px solid #e7e6e1;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a{
  display: block;
  padding: 10px;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a:hover{
  background-color: #f7fbff!important;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article:first-child a:hover{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a .icon{
  float: left;
  margin-right: 10px;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  -webkit-box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  -moz-box-shadow:rgba(0, 0, 0, 0.25) 0px 0px 2px 0px;
  background: #f8f8f8;
  text-align: center;
  overflow: hidden;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a .box_detail{
  float: left;
  width: 200px;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a .box_detail .box_sendTime{
  color: #b5b5b5;
  float: right;
  font-size: 80%;
  text-align: right;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a .box_detail .name{
  margin-bottom: 3px;
  max-width: 80px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.header-top .btn-message .header_message_box .headerMessageBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.header-top .btn-message .header_message_box .headerMessageBoxArea article a .box_detail .unread{
  background-color: #ff0000;
  border-radius: 5px;
  bottom: 10px;
  color: #fff;
  font-size: 85%;
  padding: 1px 5px;
  position: absolute;
  right: 10px;
  text-align: center;
}
.header-top .btn-message .header_message_box .btn_morelink.message{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-radius: 0 0 10px 10px;
}
.header-top .btn-message .header_message_box .btn_morelink.message:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* friends */
/*friends > headerFriendBoxArea*/
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article {
  padding: 10px;
  border-bottom: 1px solid #e7e6e1;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .icon {
  margin-top: 10px;
  background: #f8f8f8 none repeat scroll 0 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  float: left;
  height: 28px;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  width: 28px;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail{
  float: left;
  width: 200px;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .box_sendTime{
  text-align: right;
  width: 100%;
  color: #b5b5b5;
  font-size: 80%;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .name{
  max-width: 100%;
  width: 100%;
  margin-bottom: 3px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-top: 5px;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .name a{
  padding: 5px;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit{
  text-align: right;
  margin-top: 5px;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_submit{
  border: 1px solid #d1e89b;
  color: #7a9e16;
  margin-right: 2px;
  background: #fff none repeat scroll 0 0;
  border-radius: 3px;
  display: inline-block;
  font-size: 77%;
  height: 17px;
  width: 70px;
  line-height: 10px;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_submit:hover{
  background-color: #7a9e16;
  border-color: #7a9e16;
  color: #fff;
}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_cancel{
  border: 1px solid #e9e7e1;
  color: #797979;
  background: #fff none repeat scroll 0 0;
  border-radius: 3px;
  display: inline-block;
  font-size: 77%;
  height: 17px;
  width: 70px;
  line-height: 10px;

}
.header-top .btn-friends .header_friends_box .headerFriendBoxArea article .box_detail .box_submit .btn_cancel:hover{
  background-color: #797979;
  border-color:#797979;
  color: #fff;
}
.header-top .btn-friends .header_friends_box .btn_morelink.friends{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-bottom: 1px solid #e7e6e1;
  border-bottom-color: #e7e6e1!important;
}
.header-top .btn-friends .header_friends_box .btn_morelink.friends:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*friends > headerTeamBoxArea */
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article{
  border-bottom: 1px solid #e7e6e1;

}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a{
  display: block;
  padding: 10px;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a:hover{
  background-color: #f7fbff!important;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a .icon{
  margin-top: 10px;
  background: #f8f8f8 none repeat scroll 0 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  float: left;
  height: 28px;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  width: 28px;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a .icon img{
  height: auto;
  min-width: 24px;
  width: 100%;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a .box_detail{
  float: left;
  width: 200px;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a .box_detail .box_sendTime{
  text-align: right;
  width: 100%;
  color: #b5b5b5;
  font-size: 80%;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a .box_detail .name{
  margin-bottom: 3px;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-top:5px;
}
.header-top .btn-friends .header_friends_box .headerTeamBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.header-top .btn-friends .header_friends_box .btn_morelink.hd-box-teamBoard{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-radius: 0 0 10px 10px;
}
.header-top .btn-friends .header_friends_box .btn_morelink.hd-box-teamBoard:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* notification */
/*notification > headerNotificationBoxArea*/
.header-top .btn-notification .header_notification_box .headerNotificationBoxArea article a {
  padding: 10px;
  border-bottom: 1px solid #e7e6e1;
  display: block;
}
.header-top .btn-notification .header_notification_box .headerNotificationBoxArea article a:hover,
.header-tb .header-tb__nav .header-tb__inr .header-tb__menu.notice .notification .box.header_notification_box .headerNotificationBoxArea .notification_unread a:hover{
  background-color: #f7fbff!important;
}
.header-top .btn-notification .header_notification_box .headerNotificationBoxArea article a:hover{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.header-top .btn-notification .header_notification_box .headerNotificationBoxArea article a .box_detail{
  float: left;
  width: 240px;
}
.header-top .btn-notification .header_notification_box .headerNotificationBoxArea article a .box_detail .box_sendTime{
  color: #b5b5b5;
  float: none;
  font-size: 80%;
  margin-bottom: 2px;
  text-align: left;
}
.header-top .btn-notification .header_notification_box .headerNotificationBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 100%;
  text-overflow: clip;
  white-space: normal;
  overflow: hidden;
  word-wrap: normal;
 }
 .header-top .btn-notification .header_notification_box .btn_morelink.notification{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-bottom: 1px solid #e7e6e1;
  border-bottom-color: #e7e6e1!important;
}
.header-top .btn-notification .header_notification_box .btn_morelink.notification:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*notification > headerAnnounceBoxArea*/
.header-top .btn-notification .header_notification_box .headerAnnounceBoxArea article a {
  border-bottom: 1px solid #e7e6e1;
  display: block;
  padding: 10px;
}
.header-top .btn-notification .header_notification_box .headerAnnounceBoxArea article a:hover,
.header-tb .header-tb__nav .header-tb__inr .header-tb__menu.notice .notification .box.header_notification_box .headerAnnounceBoxArea .notification_unread a:hover{
  background-color: #f7fbff!important;
}
.header-top .btn-notification .header_notification_box .headerAnnounceBoxArea article a .box_detail{
  float: left;
  width: 240px;
}
.header-top .btn-notification .header_notification_box .headerAnnounceBoxArea article a .box_detail .box_sendTime{
  color: #b5b5b5;
  float: none;
  font-size: 80%;
  margin-bottom: 2px;
  text-align: left;
}
.header-top .btn-notification .header_notification_box .headerAnnounceBoxArea article a .box_detail .txt{
  color: #767676;
  display: block;
  font-size: 85%;
  max-width: 100%;
  text-overflow: clip;
  white-space: normal;
}
.header-top .btn-notification .header_notification_box .btn_morelink.notification.announceLink{
  background-color: #f5f5f5;
  display: block;
  padding: 5px 10px;
  text-align: right;
  font-size: 85%;
  border-radius: 0 0 10px 10px;
  border-bottom: none;

}
.header-top .btn-notification .header_notification_box .btn_morelink.notification.announceLink:after{
  content: "\e606";
  font-family: "icomoon";
  margin-left: 5px;
  vertical-align: top;
  font-size: 85%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* setting */
.header-top .btn-setting .box a{
  display: block;
  padding: 8px 10px;
  border-bottom: 1px solid #e7e6e1;
}
.header-top .btn-setting .box a:last-child{
  border-bottom: 0px;
}

/* ------------------------------------------------
   CLEATERS HEADER
--------------------------------------------- */
.box_creater_nav{
    width: 100%;
    height: 70px;
    background: #4f4f4f;
    overflow: hidden;
}
header .box_creater_nav h1 {
    margin: 15px 0 0 0;
    float: left;
    background: url(../images/logo_medibang_creators.svg) 0 0 no-repeat;
    height: 37px;
    width: 198px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
header .box_creater_nav h1 a {
    display: inline-block;
}
header .box_creater_nav h1:hover {
    opacity: 0.8;
}

.creater_nav ul{
    height: 70px;
}
.creater_nav ul li {
    width:80px;
    height: 70px;
    margin-right: 2px;
    text-align: center;
    font-size: 85%;
    line-height: 22px;
}
.creater_nav ul li a{
    display: block;
    height: 100%;
    font-weight: bold;
    background:#414141;
    color: #5bcfff;
}
.creater_nav ul li a:hover,
.creater_nav ul li a.on{
    background:#5bcfff;
    color: #414141;
}

.creater_nav ul .list a:before,
.creater_nav ul .create a:before,
.creater_nav ul .mypage a:before,
.creater_nav ul .myteam a:before,
.creater_nav ul .read a:before {
    font-family:"icomoon";
    display: block;
    padding: 15px 0 2px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.creater_nav ul .list a:before {
    content: "\e694";
    font-size: 210%;
}
.creater_nav ul .create a:before {
    content: "\e685";
    font-size: 250%;
}
.creater_nav ul .mypage a:before {
    content: "\e616";
    font-size: 180%;
}
.creater_nav ul .myteam a:before {
    content: "\e676";
    font-size: 320%;
}
.creater_nav ul .read a:before {
    content: "\e626";
    font-size: 210%;
}

.creater_nav ul .read {
  float: right;
  margin: 0;
}
.creater_nav ul .read a {
    background:#eb4e7e;
    color: #fff;
}
.creater_nav ul .read a:hover {
    background:#f62062;
    color: #fff;
}

.creater_nav ul li.search{
    display: block;
    width:350px;
    height: 34px;
    margin: 17px 0 0 50px;
    text-align: left;
    font-size: 100%;
}
.creater_nav ul li.search .search_box {
    border: 0;
    border-radius: 10px 0 0 10px;
    height: 34px;
    width: 300px;
    padding-left: 10px;
    color: #727272;
}
.creater_nav ul li.search .search_btn {
    position: absolute;
    width: 50px;
    height: 34px;
    border-radius: 0 10px 10px 0;
    z-index: 1;
    opacity: 0;
}
.creater_nav ul li.search .search_btn_area {
    display: inline-block;
    background: none repeat scroll 0 0 #777777;
    border: medium none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    width: 50px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 300px;
    top: 0;
    z-index: 0;
}
.creater_nav ul li.search .search_btn_area:before {
    font-family:"icomoon";
    content: "\e617";
    font-weight: normal;
    vertical-align:middle;
    font-size: 116%;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------
   MEMI TOGGLE
--------------------------------------------- */
.box_header_toggle{
  display: none;
  position: relative;
  width: 1024px;
  margin: 0 auto;
}
.box_header_toggle .btn_toggle{
  position: absolute;
  right: -60px;
  top: 0;
  width: 40px;
  height: 24px;
  background: #fefefe;
  border-radius: 0 0 10px 10px;
  text-align: center;
  cursor: pointer;
}
.box_header_toggle .btn_toggle:before{
  font-family:"icomoon";
  content: "\e611";
  color: #4f4f4f;
  font-size: 120%;
}
.box_header_toggle .btn_toggle.open:before{
  content: "\e612";
}
.box_header_toggle.mypage .btn_toggle{
  background: #4f4f4f;
}
.box_header_toggle.mypage .btn_toggle:before{
  color: #ceccbc;
}

/* ------------------------------------------------
   FOOTER
--------------------------------------------- */
/* old footer */
footer {
  position:relative;
    border-top: 1px solid #ededed;
    margin: 0 auto -18px;
    /*padding: 0 0 243px;*/
    overflow: hidden;
    background: #f8f8f8;
}
footer small{
  font-size: 100%;
}
.go_top {
    position: fixed;
    bottom: 27px;
    right: 52px;
    z-index:10;
}
.go_top .go_top_icon {
    float: left;
    width: 50px;
    background: none repeat scroll 0 0 #9a968d;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 154%;
}
.go_top .go_top_icon:before {
    font-family:"icomoon";
    content: "\e605";
    vertical-align:middle;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.go_top .go_top_icon:hover {
    background: #b1b0ad;
}
.contacts_link {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 10;
}
.contacts_link a{
    display: block;
    height: 40px;
    width: 140px;
    background: #f9702c;
    border-radius: 3px 3px 0 0;
    color: #fff;
}
.contacts_link a:hover{
    opacity: 0.8;
}
.contacts_link a .contacts_link-icon{
    display: table-cell;
    width: 37px;
    height: 40px;
    vertical-align: middle;
    text-align: center;
}
.contacts_link a .contacts_link-icon:before {
    font-family:"icomoon";
    content: "\e61a";
    vertical-align:middle;
    color: #fff;
    font-size: 120%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
.contacts_link a .contacts_link-txt{
    display: table-cell;
    width: 103px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    text-align: left;
}
ul.footer_nav {
    width: 1024px;
    margin: 0 auto;
    padding: 20px 0;
}
ul.footer_nav li {
    float: left;
    margin: 0 52px 0 0;
}
ul.footer_nav li .tit {
  margin: 0 0 20px;
  font-weight: bold;
}
ul.footer_nav li a {
  display: block;
  margin: 0 0 5px;
}


ul.footer_nav li a.tw:before {
  font-family: "icomoon";
  content: "\e699";
  font-size: 126%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #6cacda;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  height: 13px;
  line-height: 11px;

}
ul.footer_nav li a.fb:before {
  font-family: "icomoon";
  content: "\e700";
  font-size: 126%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #3b5998;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  height: 13px;
  line-height: 10px;
  border-radius: 3px;
}
ul.footer_nav li a.wb:before {
  font-family: "icomoon";
  content: "\e720";
  font-size: 126%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #e6162d;
  display: inline-block;
  margin-right: 2px;
  vertical-align: middle;
  height: 13px;
  line-height: 10px;
  border-radius: 3px;
}
ul.footer_nav li a.pk:before {
  font-family: "icomoon";
  content: "\e729";
  font-size: 126%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #c44722;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  height: 13px;
  line-height: 10px;
  border-radius: 3px;
}

.user_menu {
  border-top: 1px solid #ededed;
  padding: 10px 0;
}
.user_menu ul {
  width:320px;
  margin: 0 auto;
}
.user_menu ul li {
  float: left;
  margin: 0 20px 0 0;
  width: 150px;
}
.user_menu ul li:last-child {
  margin: 0;
}
.user_menu ul li .user_entry {
  display: block;
  border-radius: 3px;
  text-align: center;
  height: 30px;
  font-weight: bold;
  color: #fff;
  background: #fb8d43;
}
.user_menu ul li .user_entry:before {
  font-family: "icomoon";
  content: "\e641";
  position: relative;
  top: 3px;
  padding: 0 10px 0 0;
  font-size: 140%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.user_menu ul li .user_login {
  display: block;
  width: 150px;
  border-radius: 3px;
  height: 30px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #4fb8e2;
}
.user_menu ul li .user_login:before {
  font-family: "icomoon";
  content: "\e640";
  position: relative;
  top: 3px;
  padding: 0 10px 0 0;
  font-size: 130%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.copy_pc {
  position:absolute;
  width:100%;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: #767676;
    background: #efefef;
    font-size: 85%;
    bottom:0;
}
.copy_pc a{
    color: #767676;
}
/* renewal */
footer#footer {
  border-top: 1px solid #ededed;
  background: #f8f8f8;
  width: 100%;
  height: 295px;
  position: absolute;
  bottom: 0;
}
ul.footer-nav {
  width: 1024px;
  height: 240px;
  margin: 0 auto;
  padding: 20px 0;
  font-size: 0;
}
ul.footer-nav li {
  display: inline-block;
  margin: 0 52px 0 0;
  vertical-align: top;
  font-size: 13px;
}
ul.footer-nav li dt {
  font-weight: bold;
  margin-bottom: 20px;
}
ul.footer-nav li dd {
  margin-bottom: 5px;
}
ul.footer-nav li dd a.tw:before {
  font-family: "icomoon";
  content: "\e699";
  font-size: 126%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #6cacda;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  height: 13px;
  line-height: 11px;
}
ul.footer-nav li dd a.fb:before {
  font-family: "icomoon";
  content: "\e700";
  font-size: 126%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #3b5998;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  height: 13px;
  line-height: 10px;
  border-radius: 3px;
}
/* copyright */
.footer-bottom {
  position: absolute;
  width: 100%;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #767676;
  background: #efefef;
  font-size: 85%;
  bottom: 0;
}
/* ------------------------------------------------
   CREATORS FOOTER
--------------------------------------------- */
footer.creators {
  background: #4f4f4f;
  border-top: 1px solid #4f4f4f;
}
footer.creators ul.footer_nav li .tit {
  color: #d6d6d6;
}
footer.creators ul.footer_nav li a {
  color: #5bcfff;
}
footer.creators .user_menu {
  background: #606060;
  border:none;
}
footer.creators .box_language_choice .language p{
  color:#fff;
}
footer.creators .copy_pc {
  background: #414141;
  color: #fff;
}
footer.creators .copy_pc a {
  color: #fff;
}
footer.creators ul.footer_nav li a.tw:before {
  /*background-image: url(../images/icon_cfooter_tw.png) ;*/
  color: #d6d6d6;
}

footer.creators ul.footer_nav li a.fb:before {
  /*background-image: url(../images/icon_cfooter_fb.png) ;_*/
  color: #d6d6d6;
}
footer.creators ul.footer_nav li a.wb:before {
  color: #d6d6d6;
}
/* ------------------------------------------------
   content
--------------------------------------------- */
.wrap {
    width: 1024px;
    margin: 10px auto;
    padding: 20px;
    background: #fefefe;
    border-radius: 10px;
    border:1px solid #ededed;
}
/* help icon */
.help_q {
    float: left;
    border-radius: 50%;
    line-height: 16px;
    width: 20px;
    padding: 3px 2px 2px 2px;
    text-align: center;
    background: #b9b6b0;
    color: #fff;
}
/* float reset */
.clearfix{
    zoom:1; /* clear float - ie */
}
.clearfix:after{ /* clear float */
    content:".";
    display:block;
    height:0;
    clear: both;
    visibility:hidden;
}
/*** MODAL ***/

/* ------------------------------------------------
   SNS LOGIN
--------------------------------------------- */
#sns_login .map_before {
    color: #73b6d3;
}

.login_area {
    width: 770px;
    margin: 0 auto;
}
.input_login_area {
    float:left;
    width: 286px;
    padding: 20px;
    border-radius: 5px;
    border:1px solid #e5e5e5;
    text-align: center;
}
.input_login_area .alert{
    margin-bottom: 5px;
    color: #f2506e;
    text-align: left;
}
.jq_modal_login_form_error_disp{
    margin-bottom: 5px;
    color: #f2506e;
}
.input_login_area .updnWatermark {
    padding-top: 10px;
}

.input_login_form {
    margin: 0 0 10px;
    background:  #fff;
    border: 1px solid #bfd6e5;
    border-radius: 5px;
    color: #8B847A;
    font-size: 116%;
    padding: 10px;
    width: 100%;
}
.input_form {
    margin: 0 0 10px;
    background: #fff;
    border: 1px solid #bfd6e5;
    border-radius: 5px;
    color: #8B847A;
    font-size: 116%;
    padding: 5px;
}
.mdModal_contents .input_login_area {
    width: 250px;
}
.input_login_area .forget_pass {
    margin-bottom: 10px;
    text-align: center;
}
.input_login_area .or {
    color: #b4b4b4;
     margin: 0 0 10px;
}
.border {
    width:96px;
    display: inline-block;
    margin: 2px 3px 0;
    color: #b4b4b4;
}
.input_login_area .user_login {
    border-style: none;
    display: inline-block;
    padding: 0;
    margin:0 0 10px;
    width:180px;
    height: 40px;
    text-align: center;
    border-radius:3px;
    font-weight: bold;
    color: #fff;
    background:#4fb8e2;
    font-size: 116%;
    cursor: pointer;
}
.input_login_area .user_login:hover {
    background:#00aeff;
}
.input_login_area .disable.user_login:hover {
    background:#4fb8e2;
}
.input_login_area a .user_entry {
    display: inline-block;
    margin: 0;
    width: 180px;
    text-align: left;
}
.mdModal_contents .or .border {
    width: 76px;
}
.mdModal p.forget_pass {
    font-size: 100%;
}
.input_login_area .user_entry {
    width: 130px;
    margin: 25px 10px 0 0 ;
    border-radius:3px;
    padding: 0 0 0 50px;
    line-height: 40px;
    font-weight: bold;
    color: #fff;
    background:url(../images/entry_icon.png)  16px 7px no-repeat #fb8d43;
    font-size: 85%;
}
.input_login_area .user_entry:hover {
    background:url(../images/entry_icon.png)  16px 7px no-repeat #ff6d0c;
}
.input_login_area .user_entry span {
    font-size: 116%;
}
.sns_btn_area {
    float:left;
    width: 460px;
    margin: 0 0 0 18px;
}
.sns_btn_area .sns-loginBox {
    float: left;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    width: 225px;
    height: 152px;
    margin-bottom: 10px;
    overflow: hidden;
}
.sns_btn_area .sns-loginBox.tw {
    margin-right: 10px;
    background: #00b0ed;
    box-shadow: 0 1px 0 0 #0092c4;
    text-shadow: 1px 1px 0 #0092c4;
}
.sns_btn_area .sns-loginBox.fb {
    background: #3b5998;
    box-shadow: 0 1px 0 0 #2c4a88;
    text-shadow: 1px 1px 0 #2c4a88;
}
.sns_btn_area .sns-loginBox.yh {
    margin-right: 10px;
    background: #ff0033;
    box-shadow: 0 1px 0 0 #db0d36;
    text-shadow: 1px 1px 0 #db0d36;
}
.sns_btn_area .sns-loginBox.gl {
    background: #d34836;
    box-shadow: 0 1px 0 0 #bb3a29;
    text-shadow: 1px 1px 0 #bb3a29;
}
.sns_btn_area .sns-loginBox:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /*IE用*/
}
.sns_btn_area .sns-loginBox a {
    display: block;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.sns_btn_area .sns-loginBox a.disable:hover {
    opacity:0.4;
    filter: alpha(opacity=40); /*IE用*/
}
.sns_btn_area .sns-loginBox.tw .sns-loginBox-icon:before{
   display: block;
   content: "\e699";
    font-family: "icomoon";
    color: #fff;
    font-size: 550%;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 0 #0092c4;
    width: 100%;
    position: absolute;
    top:17px;
}
.sns_btn_area .sns-loginBox.fb .sns-loginBox-icon:before{
   display: block;
    content: "\e700";
    font-family: "icomoon";
    color: #fff;
    font-size: 545%;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 0 #2c4a88;
    width: 100%;
    position: absolute;
    top:17px;
}
.sns_btn_area .sns-loginBox.yh .sns-loginBox-icon:before{
   display: block;
    content: "\e727";
    font-family: "icomoon";
    color: #fff;
    font-size: 1340%;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 0 #db0d36;
    width: 100%;
    position: absolute;
    top:-52px;
}
.sns_btn_area .sns-loginBox.gl .sns-loginBox-icon:before{
   display: block;
    content: "\e63a";
    font-family: "icomoon";
    color: #fff;
    font-size: 130px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 0 #bb3a29;
    width: 100%;
    position: absolute;
    top:-25px;
}
.sns-loginBox-txt{
  display: block;
  width: 100%;
  position: absolute;
  bottom:10px;
}
.disable {
    opacity:0.4;
}
/* ------------------------------------------------
   MODAL
--------------------------------------------- */
.mdModal {
    display:none;
}
.mdModalBody {
    position: fixed;
    z-index:1000;
    background: #fff;
    border-radius:10px;
/*width:710px;*/
    left:50%;
    top:50%;
/*height: 540px;*/
}
.mdModal_contents {
    margin: 20px;
}
.mdModal_title_area {
    background: #fff;
    border-bottom: 1px solid #e7e6e1;
    border-radius: 10px 10px 0 0;
    padding: 10px 20px 8px;
    font-size:116%;
    font-weight:bold;
    text-align: center;
    color: #3c4143;
}
.mdModalBK{position: fixed; z-index:999; height:100%; width:100%;background:#000; opacity: 0.8;filter: alpha(opacity=50);-moz-opacity:0.50; left:0; top:0;}
.mdClose{cursor: pointer;}
.mdModal{width:690px; color: #384143;}
.mdModal p{text-align:justify;}
.mdModal h1{font-weight:bold; font-size: 30px;}
.mdModalBody{/*padding: 10px;*/}

.mdModalLoading{display:none;}
.mdModalLoadingBody{position: fixed; z-index:1000; width:120px; left:50%; top:50%; height: 120px; border-radius: 50%; overflow: hidden; background: #fff url(../images/load.gif) no-repeat center center;}
.mdModalLoadingBK{position: fixed; z-index:999; height:100%; width:100%;background:#000; opacity: 0.7;filter: alpha(opacity=90);-moz-opacity:0.70; left:0; top:0;}
.mdModalLoading{width:690px; color: #eee;}
.mdModalLoading p{text-align:justify;}
.mdModalLoading h1{font-weight:bold; font-size: 30px;}
.mdModalLoadingBody{padding: 0px;}

.mdModal .mdModal_contents input#facebookCheck,
.mdModal .mdModal_contents input#twitterCheck {
    margin:5px;
}

/*mail send*/
.cmn-onModal-mailform{
  width: 680px;
}
.cmn-onModal-mailform .mailform-input_t{
  border: 1px solid #e7e6e1;
  border-radius: 5px;
  margin-top: 8px;
  padding: 8px;
  width: 100%;
}
.cmn-onModal-mailform .mailform-label{
  width: 100%;
}
.cmn-onModal-mailform .mailform-label-txt{
  width: 100%;
}

.cmn-onModal-mailform .mailform-buttons{
  margin-top: 8px;
  text-align: center;
  font-size: 0;
}
.cmn-onModal-mailform .btn-comfirm{
  display: inline-block;
  width: 120px;
  text-align: center;
  color: #fff;
  background-color: #71bb1a;
  border-radius: 5px;
  height: 40px;
  font-size: 13px;
  vertical-align: top;
  border:none;
  margin: 0 4px;
}
.cmn-onModal-mailform .btn-comfirm:hover{
  opacity: 0.8;
}
.cmn-onModal-mailform .btn-cancel,
.cmn-onModal-mailform .btn-top{
  display: inline-block;
  width: 120px;
  text-align: center;
  color: #fff;
  background-color: #525048;
  border-radius: 5px;
  height: 40px;
  font-size: 13px;
  vertical-align: top;
  border:none;
  margin: 0 4px;
}
.cmn-onModal-mailform .btn-top{
  line-height: 40px;
}
.cmn-onModal-mailform .btn-cancel:hover,
.cmn-onModal-mailform .btn-top:hover{
  opacity: 0.8;
}
.cmn-onModal-mailform .mailform-comfirm{
  margin-top: 8px;
}


/* コメントボタン */
.send_button_area {
    max-width:670px;
    margin:20px 0 0;
    text-align:center;
}
.comment_notes {
    margin-top: 20px;
}
.post_tw{
    display: inline-block;
    margin-right: 20px;
    margin-top: 10px;
}
.post_fb{
    display: inline-block;
    margin-top: 10px;
}
.post_tw img, .post_tw img{
    margin-right: 5px;
    vertical-align: middle;
}
.unregistered{
    color:#b4b4b4;
}
.jq_modal_user_review_form_comment{
    width: 600px; height: 100px;
}
.jq_report_comment{
    border: 1px solid #a9a9a9;
    border-radius: 5px;
    width: 500px;
    height: 100px;
    font-size: 13px;
    resize: vertical;
    padding: 10px;
    margin-top: 5px;
  }
.tit_comment{
    margin: 10px 0 5px;
    width: 500px;
}

.input_green_btn {
    margin:0 10px 0 0;
    border-style: none;
    min-width:160px;
    border-radius:8px;
    padding:15px;
    background:#659b24;
    font-size:139%;
    font-weight:bold;
    color:#fff;
    cursor: pointer;
}
#fixedViewer .send_button_area .input_green_btn {
    border: 1px solid #d1e89b;
    border-radius: 10px;
    background: #fff;
    color: #7a9e16;
    display: inline-block;
    font-weight: bold;
    width: 100px;
}
#fixedViewer .send_button_area .input_green_btn:hover {
  background: #97c51a;
  border:1px solid #97c51a;
  color: #fff;
}
#fixedViewer .send_button_area .input_gray_btn {
    border: 1px solid #e9e7e1;
    border-radius: 10px;
    background: #fff;
    color: #797979;
    display: inline-block;
    font-weight: bold;
    padding-top: 10px;
    text-align: center;
    width: 150px;
}
#fixedViewer .send_button_area .input_gray_btn:hover{
    background: none repeat scroll 0 0 #979797;
    border: 1px solid #979797;
    color: #fff;
    cursor: pointer;
}
.input_pink_btn {
    border-style: none;
    min-width:160px;
    padding:15px;
    border-radius:8px;
    background:#ff707d;
    font-size:139%;
    font-weight:bold;
    color:#fff;
    cursor: pointer;
}
.input_gray_btn {
    margin:0 10px 0 10px;
    border-style: none;
    min-width:160px;
    padding:15px;
    border-radius:8px;
    background:#A3ABAE;
    font-size:139%;
    font-weight:bold;
    color:#fff;
    cursor: pointer;
}
.input_green_btn:first-child,
.input_gray_btn:first-child{
  margin-left: 0;
}
.input_green_btn:last-child,
.input_gray_btn:last-child{
  margin-right: 0;
}

/* 編集・保存・キャンセルボタン 共通 */
.input_submit_btn,
.input_cancel_btn,
.input_delete_btn,
.input_close_btn{
  display: inline-block;
  margin: 0 auto;
  width: 150px;
  height: 40px;
  padding: 3px 0 0;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
}
.input_submit_btn{
  border: 1px solid #d1e89b;
  color: #7a9e16;
}
.input_submit_btn:hover {
  background: #97c51a;
  color: #fff;
  border: 1px solid #97c51a;
}
.input_cancel_btn,
.input_delete_btn {
  margin-left: 10px;
  border: 1px solid #eae8e3;
  color: #797979;
}
.input_cancel_btn:hover,
.input_delete_btn:hover {
  background: #979797;
  color: #fff;
  border: 1px solid #979797;
}
.input_close_btn{
  border: 1px solid #eae8e3;
  font-size: 85%;
  color: #356fb7;
}
.input_close_btn:hover{
  background: #356fb7;
  color: #fff;
  border: 1px solid #356fb7;
}
.input_submit_btn.disable:hover{
  background: #fff none repeat scroll 0 0;
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  height: 40px;
  margin: 0 auto;
  padding: 3px 0 0;
  text-align: center;
  width: 150px;
  color: #7a9e16;
  border-color: #d1e89b;
}

/* ------------------------------------------------
    HELP動画
--------------------------------------------- */
.mdModal_title_area.help_modal {
    background:#f3cb2b;
    color: #88752b;
    text-align: left !important;
}
.mdModal_title_area.help_modal .help_q {
    margin-right: 10px;
    background: #fff;
    color: #88752b;
}
.btn_close_s{
    float: right;
}
.btn_close_s:before {
    font-family:"icomoon";
    content: "\e623";
    margin: 0 0 0 10px;
    color:#88752b;
    font-style:normal;
    font-weight: normal;
}

#helpTabs {
    width: 810px;
    height: 500px;
}
#helpTabs .helptab_title{
    color: #88752b;
    margin-bottom: 10px;
    border-bottom: 2px solid #e6e1ca;
    padding-bottom: 5px;
    font-size: 116%;
}
/* ui上書き*/
/* 全体box */
#helpTabs.ui-widget-content{
    background: #fff !important;
    border:none !important;
}
/* tab menu */
#helpTabs .ui-widget-header{
    background: none !important;
    border: 0 !important;
}
#helpTabs .ui-state-active, #helpTabs .ui-widget-content .ui-state-active, #helpTabs .ui-widget-header .ui-state-active{
    background: none !important;
}
#helpTabs.ui-tabs .ui-tabs-nav{
    padding: 0 !important;
}

/* tab menu li */
#helpTabs.ui-tabs .ui-tabs-nav li{
    margin: 10px 10px 5px 5px;
}
#helpTabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 180px;
    min-height: 490px;
    border-right: 1px solid #e6e1ca !important;
}
#helpTabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 179px;
    border-right: 0 !important;
    margin: 0 !important;
    background: none !important;
    font-weight: normal !important;
    white-space: normal !important;
}
#helpTabs.ui-tabs-vertical .ui-tabs-nav li a {
    display:block;
    width: 150px;
}
#helpTabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    border-right:1px solid #fff !important;
}
/* link color */
#helpTabs .ui-state-default a, #helpTabs .ui-state-default a:link, #helpTabs .ui-state-default a:visited{color: #356fb7 !important;}
/* active */
#helpTabs .ui-state-active a, #helpTabs .ui-state-active a:link, #helpTabs .ui-state-active a:visited{color:#c7c1a8 !important;}
#helpTabs .ui-state-active a:hover,#helpTabs .ui-state-default a:hover{color:#eb4e7e !important;}

/* tab menu内title */
#helpTabs.ui-tabs-vertical .ui-tabs-nav li.tab_subtitle {
    padding: 15px 10px 5px 5px !important;
    color: #767676;
    width: 165px !important;
}

/* 角丸 */
#helpTabs .ui-corner-all, #helpTabs .ui-corner-bottom, #helpTabs .ui-corner-left, #helpTabs .ui-corner-bl {
    border-bottom-left-radius: 0 !important;
}
#helpTabs .ui-corner-all, #helpTabs .ui-corner-top, #helpTabs .ui-corner-left, #helpTabs .ui-corner-tl {
    border-top-left-radius: 0 !important;
}

#helpTabs.ui-tabs .ui-tabs-nav li.section_first{
    border-top-left-radius: 4px !important;
}
#helpTabs.ui-tabs .ui-tabs-nav li.section_end{
    border-bottom-left-radius: 4px !important;
    border-bottom: 1px solid #e6e1ca !important;
}
#helpTabs.ui-tabs .ui-tabs-nav li.section_alone{
    border-radius: 4px 0 0 4px !important;
    border-bottom: 1px solid #e6e1ca !important;
}
/* berder color */
#helpTabs .ui-state-active, #helpTabs .ui-widget-content .ui-state-active, #helpTabs .ui-widget-header .ui-state-active{
    border-color: #e6e1ca !important;
}
#helpTabs .ui-state-default, #helpTabs .ui-widget-content .ui-state-default, #helpTabs .ui-widget-header .ui-state-default{
    border-color: #e6e1ca !important;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 0 0 0 20px !important;
    float: right;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0 !important;
}

.mdModal_title_area.help_modal_white {
    background:#fff;
    text-align: left !important;
}

/* ------------------------------------------------
    Kindleストアでの販売について
------------------------------------------------ */
.kindle_help{
  width: 640px;
  max-height: 500px;
  overflow: auto;
  padding-right: 10px;
}
.kindle_help_tit{
  padding: 10px;
  margin-bottom: 20px;
  background: #f7f7f7;
  border-radius: 5px;
  font-weight: bold;
}
.kindle_help p{
  margin-bottom: 10px;
}
.kindle_help .tit{
  display: inline-block;
  padding: 5px;
  margin-bottom: 10px;
  background: #f7f7f7;
  border-radius: 5px;
  color: #ed8d0d;
  font-weight: bold;
}
.kindle_help .table{
  border-top: 1px dashed #d7d9d9;
  width: 100%;
  margin-bottom: 20px;
}
.kindle_help table{
  width: 100%;
}
.kindle_help table tr{
  padding: 10px;
  border-bottom: 1px dashed #d7d9d9;
}
.kindle_help table th{
  padding: 10px 9px;
  font-weight: normal;
  text-align: left;
  border-right: 1px solid #e7e6e1;
}
.kindle_help table th.mdbn,
.kindle_help table th.kindle{
  text-align: center;
  font-weight: bold;
}

.kindle_help table tr th.kindle,
.kindle_help table tr td.kindle{
  border-right: none;
}
.kindle_help table td{
  padding: 10px;
  width: 34%;
  text-align: center;
}
.kindle_help table td.mdbn{
  border-right: 1px solid #e7e6e1;
  border-bottom: none;
}
.kindle_help table td .label{
  font-weight: bold;
  font-size: 85%;
  color: #767676;
}

.kindle_help table th.mdbn,
.kindle_help table .mdbn .diff{
  color: #4a9cd1;
}
.kindle_help table th.kindle,
.kindle_help table .kindle .diff{
  color: #e15b4e;
}
.kindle_help table td .diff{
  font-size: 116%;
}
.kindle_help table td .num{
  font-size: 170%;
}
.kindle_help table td .ok,
.kindle_help table td .ng{
  display: block;
  margin: 0 auto;
  width: 36px;
  height: 36px;
}
.kindle_help table td.mdbn .ok{
  background: url(../images/creators_ok.png) no-repeat 0 0;
}
.kindle_help table td.kindle .ng{
  background: url(../images/creators_ng.png) no-repeat 0 0;
}
.kindle_help table td .ok{
  background: url(../images/creators_ok_black.png) no-repeat 0 0;
}
.kindle_help table td .ng{
  background: url(../images/creators_ng_black.png) no-repeat 0 0;
}
.kindle_help table td .box{
}
.kindle_help table td .box{
  padding: 0 10px 10px;
  border-bottom: 1px dashed #d7d9d9;
}
.kindle_help table td .box2{
  padding: 10px 10px 0;
}

.kindle_help table .notes{
  display: block;
  font-size: 85%;
  color: #767676;
}

.kindle_help table .other_site .notes{
  padding-top: 5px;
  text-align: left;
}
.kindle_help table .fee .notes{
  padding-top: 5px;
  text-align: left;
}
.kindle_help table .book_private .notes{
  padding-top: 5px;
}

.kindle_help table .both{
  font-size: 116%;
}
.kindle_help table .both .notes {
  font-size: 77%;
}

/* Chrome対応 */
.kindle_help table .fee .mdbn,
.kindle_help table .period,
.kindle_help table .sale_time{
  border-collapse: separate;
  border-spacing: 0;
}

.mdModal_title_area.help_modal_white .btn_close_s:before {
    color:#767676;
}

/*** 著者売上 比較表 ***/
.loyalties_help {
  width: 640px;
  overflow: auto;
}
.loyalties_help_tit {
  padding: 10px;
  margin-bottom: 20px;
  background: #f7f7f7;
  border-radius: 5px;
  font-weight: bold;
}
.loyalties_help_tit .tit_left {
  float: left;
}
.loyalties_help_tit .tit_right {
  float: right;
  font-weight: normal;
}
.img_comparison {
  width: 640px;
  height: 451px;
  background: url(../images/lp/pub/bn-comparison.png) 0 0 no-repeat;
  background-size: 640px 451px;
  padding: 20px 30px;
}

/* ------------------------------------------------
    登録確認メールについて
------------------------------------------------ */
.mail_help {
  width: 640px;
  max-height: 500px;
  overflow: auto;
  padding-right: 10px;
}
.mail_help dt {
  margin: 0 0 10px;
  padding: 10px;
  font-size: 124%;
  color: #727272;
  background: #f7f7f5;
  border-radius: 5px;
  }
.mail_help dt:before {
  font-family: "icomoon";
  content: "\e618";
  padding-right: 10px;
  vertical-align: middle;
  font-size: 120%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
.mail_help .q_entry_read {
  margin: 15px 0 0;
  font-weight: bold;
  }
.mail_help .q_entry_text {
  margin-top: 10px;
  }
.mail_help p {
  margin: 0 0 5px;
}

/* もどるボタン */
.list_back_btn {
    background:url(../images/listback_bg.png)0 0 no-repeat;
    width:129px;
    line-height: 40px;
    text-align: center;
}
.list_back_btn a {
    display: block;
}
.listback_s {
    background: url(../images/listback_s_bg.png) 0 0;
    line-height: 20px;
    width: 64px;
    text-align: center;
}
.side_link_left {
    float: left;
    width: 148px;
    margin: 20px 0 0;
}
.side_link_right {
    float: left;
    width: 170px;
    margin: 20px 0 0;
}
.side_link_bottom {
    width: 1024px;
    margin:0 auto;
}
.side_link_bottom a {
    display: block;
    width: 129px;
}

/* 新規ユーザー登録or本をツクル */
.common_btn_newcreate ,
.common_btn_newuser {
  background: #f4f4f4;
  padding: 20px;
  border-radius: 10px;
  color: #767676;
  font-weight: bold;
}
.common_btn_newcreate .tit {
  font-size: 280%;
  color: #fb8d43;
  text-align: center;
}

.common_btn_newuser .tit p {
  font-size: 240%;
  color: #97a32e;
}

.common_btn_newcreate .txt p,
.common_btn_newuser .txt p{
  padding-top: 10px;
  font-size: 154%;
}
.common_btn_newcreate a ,
.common_btn_newuser a{
  display: block;
  float: right;
  border-radius: 10px;
  color: #fff;
  font-size: 220%;
}
.common_btn_newcreate a span ,
.common_btn_newuser a span{
  font-size: 77%;
}
.common_btn_newcreate a{
  background: #4f4f4f;
  color: #5bcfff;
  width: 400px;
  height: 94px;
  line-height: 94px;
  text-align: center;
}
.common_btn_newuser a{
  background: #fb8d43;
  padding: 15px 20px 15px 20px;
  width: 400px;
  text-align: center;
}
.common_btn_newcreate a:hover{
  background: #5bcfff;
  color: #4f4f4f;
}
.common_btn_newuser a:hover{
  background: #ff6d0c;
}

.common_btn_newuser a:before{
  font-family:"icomoon";
  content: "\e641";
  vertical-align: middle;
  font-size: 160%;
}
.no_search_txt{
  padding: 20px 0;
  color: #767676;
  font-size: 131%;
}

/*** 汎用ボタン ***/
.mypage_info_edit {
    width:320px;
    background:#fff;
    color:#73b6d3;
    border: 3px solid #e9f4f8;
    border-radius:30px;
    line-height:1;
    text-align:center;
}
.mypage_info_edit a {
    display: block;
    padding:20px 0;
    height: 100%;
    color:#73b6d3;
    font-size:116%;
    line-height:1;
}
.mypage_info_edit a:hover {
    color: #eb4e7e;
}

/***　クラパカ内スプラッシュ ***/
#content.alpacasplash {
  text-align: center;
}
/*** 他言語 **************/
/* old box-language */
.box_language_choice {
  text-align: center;
  margin: 0 auto 0;
}
.box_language_choice .language {
  display: inline-block;
  background: #f2f2f2;
  border-radius: 5px;
}
.box_language_choice .language p {
  display: inline-block;
  margin-right: 5px;
  color: #959595;
  font-size: 85%;
  font-weight: bold;
}
.box_language_choice .language a:hover img ,
.box_language_choice .language .on img {
  opacity: 0.4;
}
.box_language_choice .language img {
  margin-right: 5px;
  vertical-align: middle;
}

/* renewal box-language */
.box-language {
  width: 1024px;
  text-align: center;
  margin: 0 auto 0;
}
.box-language dt {
  display: inline-block;
  margin-right: 5px;
  color: #959595;
  font-size: 85%;
  font-weight: bold;
}
.box-language dd {
  display: inline-block;
}
.box-language dd img {
  margin-right: 5px;
  vertical-align: middle;
}
.box-language dd .language a:hover img, 
.box-language dd .language .on img {
    opacity: 0.4;
}
/* ----- */

.item_language{
  background: #000;
  background: rgba(000, 000, 000, .6);
}

.item_language a:hover .btn_language,
.item_language .current .btn_language{
  background: #356fb7;
  color: #ffffff;
}

.btn_language{
  background: #ffffff;
  color: #356fb7;
  padding: 5px 0;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  border-radius: 5px;
}
/*** contents footerバナーエリア **************/
.contents-footer-bnr{
  width: 100%;
  margin: 40px 0 40px;
}
.picturelist-nofooter .contents-footer-bnr{
  display: none;
}

.contents-footer-bnr a {
  display: block;
  width: 728px;
  height: 90px;
  margin: 0 auto;
}
.contents-footer-bnr > div{
  width: 728px;
  height: 90px;
  margin: 0 auto;
}


/*puffmsgBox*/
.puffmsgBox{
  position: fixed;
  top: 100px;
  right: 200px;
  width: 200px;
  background-color: #333;
  color: #fff;
  padding: 20px 10px;
  text-align: center;
  border-radius: 5px;
  display: none;
  z-index: 999;
}
.puffmsgBox.show{
  display: block;
}

/*puffmsgBox（mobile）*/
#fixedViewer.fixedBody.ui-mobile-viewport .puffmsgBox{
  right: 0;
  left: 10%;
  width: 80%;
}
#fixedViewer.fixedBody.ui-mobile-viewport .puffmsgBox p{
  font-weight: normal;
  text-shadow:none;
}

/*================================
  headerToolbar
================================*/
  .header-tb{
    width: 100%;
    background-color: #f8f8f8;
    height: 41px;
    position: fixed;
    top:0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid #e0e0e0;
    /*display: block;*/
    transition: 0.2s ease-out;
    margin-top: -42px;
  }
  .header-tb.show{
    margin-top: 0;
  }
.header-tb__nav.nav-ovhidden{
  overflow: hidden;
}
  .header-tb__inr{
    width: 1024px;
    margin: 0 auto;
    font-size: 0;
    height: 41px;
  }
  .header-tb__inr.show{
    width: 1200px;
  }
  .header-tb__menu{
    display:inline-block;
    float:none;
    vertical-align: top;
    font-size: 13px;
    height: 40px;
  }
  .header-tb__menu.logo{
    width: 146px;
  }
  .header-tb__menu.logo img{
    width: 131px;
    height: 40px;
    vertical-align: middle;
  }
  .header-tb__menu.cat{
    /*width: 170px;*/
    width: 156px;
    transition: 0.2s ease-out;
  }
  /*.header-tb__menu.cat.show {
    width: 156px;
  }*/
  .header-tb__menu.cat > ul{
    font-size: 0;
  }
  .header-tb__menu.cat .cat__list{
    /*width: 41px;*/
    width: 37px;
    float: none;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    vertical-align: top;
    transition: 0.2s ease-out;
  }
  /*.header-tb__menu.cat.show .cat__list{
    width: 37px;
  }*/
  .header-tb__menu.cat .cat__list a{
    display: block;
    vertical-align: middle;
    width: 41px;
    height: 40px;
    font-family:"icomoon";
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #696969;
  }
  /*????????*/
  .header-tb__menu.cat .cat__list a.show{
    color: #e15b4e;
  }
  .header-tb__menu.cat.show .cat__list a{
    width: 37px;
  }
  /*????????*/
  .header-tb__menu.cat .cat__list a:hover{
    color: #e15b4e;
  }
  .header-tb__menu.cat .cat__list.manga a:before:link{
  }
  .header-tb__menu.cat .cat__list.manga a:before{
    content: "\e724";
    font-size: 25px;
    display: inline-block;
    margin-top: 3px;
  }

  .header-tb__menu.cat .cat__list.book a:before{
    content: "\e705";
    font-size: 27px;
    display: inline-block;
    margin-top: 2px;
  }
  .header-tb__menu.cat .cat__list.illust a:before{
    content: "\e916";
    display: inline-block;
    font-size: 23px;
    margin-top: 4px;
  }
  .header-tb__menu.cat .cat__list.shelf{
    display: inline-block;
    float: none;
    font-size: 13px;
    text-align: center;
    vertical-align: top;
    width: 41px;
    margin-top: 0;
   }
  .header-tb__menu.cat .cat__list.shelf a:before{
    content: "\e725";
    display: inline-block;
    font-size: 27px;
    margin-top: 3px;
  }
  .header-tb__menu.search{
    /*width: 21px;*/
    position: relative;
    transition: 0.2s ease-out;
    width: 390px;
  }
.header-tb__menu.search.search-login{
  width: 525px;
}


  .header-tb__menu.search .search-icon{
    color: #696969;
    display: block;
    font-family: "icomoon";
    font-weight: normal;
    height: 24px;
    position: absolute;
    text-align: center;
    top: 8px;
    vertical-align: top;
    width: 29px;
    right: 5px;
    z-index: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      transition: 0.2s ease-out;
      border: none;
      background:none;
  }

  .header-tb__menu.search .search-icon:hover{
    cursor: pointer;
  }
  .header-tb__menu.search .search-icon:before{
    content: "\e617";
    display: inline-block;
    font-size: 17px;
    margin-top: 0px;
    vertical-align: top;
  }
  .header-tb__menu.search .search-text{
    position: absolute;
    background-color: #f8f8f8;
    border:1px solid #f8f8f8;
    border-radius: 5px;
    padding: 0;
    width: 0;
    height: 26px;
    left: 0;
    top: 8px;
    z-index: 1;
    /*transition-property: color;*/
    transition: 0.2s ease-in;
    width: 390px;
    background-color: #fff;
    border:1px solid #e0e0e0;
    padding: 4px 4px 4px 100px;
  }
.header-tb__menu.search.search-login .search-text{
  width: 525px;
}
.pagelang-en .header-tb__menu.search .search-text{
  padding-left: 120px;
}
.pagelang-zh_CN .header-tb__menu.search .search-text{
  padding-left: 80px;
}
.pagelang-zh_TW .header-tb__menu.search .search-text{
  padding-left: 80px;
}
  /*.header-tb__menu.search .search-text.show{
    width: 245px;
    background-color: #fff;
    border:1px solid #e0e0e0;
    padding: 4px 4px 4px 30px;
  }*/
.header-tb__menu.search .searchCategory{
  position: absolute;
  left: 0;
  z-index: 3;
  top: 8px;
}
.header-tb__menu.search .searchCategory:before{
  display: inline-block;
  font-size: 11px;
  width: 26px;
  height: 26px;
  text-align: center;
  z-index: 0;
  position: absolute;
  right: 0;
  content: "";
}
.header-tb__menu.search .searchCategory:after {
  content: "";
  position:absolute;
  z-index:1;
  top:10px;
  right:8px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-top-color: #817f78;
  border-width: 6px 5px 0 ;
  line-height:1;
}
.header-tb__menu.search .searchCategory select,
.header-tb__menu.search .searchCategory option{
  -webkit-appearance : none;
  -moz-appearance : none;
  background : none;
}
.header-tb__menu.search .searchCategory select{
  border-radius: 0 0 0 0;
  border:1px solid #e2e2e2;
  border-radius: 5px 0 0 5px;
  padding: 3px 27px 3px 8px;
  display: inline-block;
  position: relative;
  z-index: 2;
  height: 26px;
}
.header-tb__menu.search .searchCategory:hover,
.header-tb__menu.search .searchCategory select:hover,
.header-tb__menu.search .searchCategory option:hover,
.header-tb__menu.search .searchCategory:hover:after,
.header-tb__menu.search .searchCategory:hover:before{
  cursor: pointer;
}
  .header-tb__menu.user{
    line-height: 40px;
    /*margin:0 10px 0 15px;*/
    margin: 0 10px;
  }
  /*.header-tb__menu.user.show{
    width: 21px;
    margin: 0 10px;
  }*/
  .header-tb__menu.user .user-icon{
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    text-align: center;
    height: 21px;
    overflow: hidden;
    border-radius: 10px;
  }
  .header-tb__menu.user .user-icon img{
    width: 21px;
    height: auto;
    vertical-align: top;
    text-align: center;
  }
  .header-tb__menu.user .user-name{
    display: inline-block;
    width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;

  }
  .header-tb__menu.user .user-name.show{
    display: none;
  }
  .header-tb__menu.user .user-name a{
    color: #696969;
  }
  .header-tb__menu.notice{
    /*width: 246px;*/
    width: 187px;
  }
  .header-tb__menu.notice.show{
    /*width: 187px;*/
  }
  .header-tb__menu.notice ul{
    font-size: 0;
    height: 35px;
    margin-top: 6px;
  }
  .header-tb__menu.notice ul li{
    display: inline-block;
    font-size: 13px;
    width: auto;
    float:none;
    margin:0 10px 0 0;
  }
  .header-tb__menu.notice ul li:last-child{
    margin-right: 0px;
  }
  .header-tb__menu.notice ul li a:before{
    color: #696969;
  }
  .header-tb__menu.notice .message{
  }
  .header-tb__menu.notice .friends{
  }
  .header-tb__menu.notice .notification{
  }
  .header-tb__menu.notice .setting{
  }
  .header-tb__menu.notice .message .btn,
  .header-tb__menu.notice .friends .btn,
  .header-tb__menu.notice .notification .btn {
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    display: inline-block;
    height: 28px;
    width: 40px;
    vertical-align: top;
}
  .header-tb__menu.notice .message .btn:hover,
  .header-tb__menu.notice .friends .btn:hover,
  .header-tb__menu.notice .notification .btn:hover {
    border-color: #356fb7;
    color: #fff
    ;
}
  .header-tb__menu.notice .message .new,
  .header-tb__menu.notice .friends .new,
  .header-tb__menu.notice .notification .new {
    background-color: #ff4949;
    top:-4px;
    left: 25px;
  }
  .header-tb__menu.notice .setting .btn {
    display: inline-block;
    height: 28px;
    width: 18px;
    vertical-align: top;
    padding: 0;
    margin-top: 2px;
  }
  .header-tb__menu.cart{
    width: 82px;
    float: none;
    margin: 0;
    margin-left: 0;

  }
  .header-tb__menu.cart.show{
    margin-left: 0;
  }
  .header-tb__menu.cart .cart_count{
    width: 64px;
    height: 28px;
    background: -moz-linear-gradient(90deg, #ff6e1b 100%, #ff6e1b 100%);
    background: -webkit-gradient(linear, 90deg, color-stop(100%, #ff6e1b), color-stop(100%, #ff6e1b));
    background: -webkit-linear-gradient(90deg, #ff6e1b 100%, #ff6e1b 100%);
    background: -o-linear-gradient(90deg, #ff6e1b 100%, #ff6e1b 100%);
    background: -ms-linear-gradient(90deg, #ff6e1b 100%, #ff6e1b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6e1b', endColorstr='#ff6e1b', GradientType='0');
    background: linear-gradient(0deg, #ff6e1b 100%, #ff6e1b 100%);
    box-shadow: none;
    margin-top: 6px;

  }
  .header-tb__menu.cart .cart_count:before{
    top:-3px;
    font-size: 20px;
  }
  .header-tb__menu.cart .cart_count_item{
    padding-left: 0;
    font-size: 17px;
    vertical-align: top;
    display: inline-block;
    line-height: 1.8;

  }
  .header-tb__menu.help{
    width: 84px;
    float: none;
    height: 40px;
    margin: 0;
  }

   .header-tb__menu.help a{
    display: block;
    width: 64px;
    height: 40px;
    line-height: 40px;
  }
   .header-tb__menu.help a .help-icon{
    display:inline-block;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background-color: #b9b6b0;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    line-height: 19px;
   }
   .header-tb__menu.help a .help-txt{
    display:inline-block;
    padding-left: 5px;
   }
  .header-tb__menu.help a:before{
/*    content: "\e618";
    display: inline-block;
    font-size: 18px;
    line-height: 2.4;
    margin-top: 1px;
    padding-right: 4px;
    padding-top: 1px;
    vertical-align: middle;
*/  }
  .header-tb__menu.cr{
    width: 83px;
  }
  .header-tb__menu.cr a{
    display: block;
    width:83px;
    height: 28px;
    margin-top: 6px;
    position: relative;
}

  .header-tb__menu.cr .cr__icon{
    position: relative;
    width:83px;
    height: 28px;
    display: block;
  }
  .header-tb__menu.cr .cr__icon:before{
    position: absolute;
    width:83px;
    height: 28px;
    display: block;

    font-family:"icomoon";
    content: "\e60f";
    font-weight: normal;
    vertical-align:middle;
    font-size: 199%;
    position: absolute;
    left:0;
    top:-4px;
    z-index: 1;
    color:#b6dc49;
  }
  .header-tb__menu.cr .cr__txt{
    position: absolute;
    width:74px;
    height: 28px;
    display: block;
    z-index: 2;
    color: #3c3f32;
    font-weight: bold;
    top: 0;
    left:0;
    font-size: 10px;
    line-height: 2.0;
    text-align: center;
  }
  .header-tb__menu.cr .cr__txt .font-l{
    font-size: 135%;
  }
  .header-tb__menu.cr a:hover .cr__icon:before{
    color: #3c3f32;
  }
  .header-tb__menu.cr a:hover .cr__txt{
    color:#b6dc49;
  }
  .header-tb__menu.user-entry.user_entry{
    float: none!important;
    width: 160px;
    margin-left: 22px;
  }
  .header-tb__menu.user-entry.user_entry.show{
    margin-left: 10px;
    width: 108px;
  }
  .header-tb__menu.user-entry.user_entry a{
    margin: 0;
    width: 150px;
    height: 30px;
    margin: 6px 0 0 0;
  }
  .header-tb__menu.user-entry.user_entry.show a{
    width: 98px;
}
  .header-tb__menu.user-login.user_login{
    float: none!important;
  }
  .header-tb__menu.user-login.user_login.show{
    width: 108px;
  }
  .header-tb__menu.user-login.user_login a{
    margin: 0;
    width: 150px;
    height: 30px;
    margin: 6px 0 0 0;
  }
  .header-tb__menu.user-login.user_login.show a{
    width: 98px;
  }
  .header-tb__menu.user-entry.user_entry a:hover,
  .header-tb__menu.user-login.user_login a:hover {
    color: #fff;
  }

/*creators*/
  .header-tb.cr{
    background-color: #4f4f4f;
    height: 40px;
    border-bottom: none;
  }
  .header-tb.cr .header-tb__menu.logo{
    width: 191px;
  }
  .header-tb.cr .header-tb__menu.logo img{
    width: 172px;
  }
  .header-tb.cr   .header-tb__menu.cat{
    width: 163px;
  }
  .header-tb.cr .header-tb__menu.cat .cat__list{
  width: 40px;
 }
 .header-tb.cr .header-tb__menu.cat .cat__list a {
    color: #5bcfff;
    display: block;
    width: 40px;
    border-right: 1px solid #414141;

}
.header-tb.cr .header-tb__menu.cat .cat__list a:hover {
    background-color:#5bcfff;
    color: #4f4f4f;
    border-right: 1px solid #5bcfff;
}
  .header-tb.cr .header-tb__menu.cat .cat__list a.show{
    background-color:#5bcfff;
    color: #414141;
  }
  .header-tb.cr .header-tb__menu.cat .cat__list.list a{
       border-left: 1px solid #414141;
  }
  .header-tb.cr .header-tb__menu.cat .cat__list.list a:before{
    content: "\e694";
    font-size: 24px;
    margin-top: 3px;
    display: inline-block;
  }
  .header-tb.cr .header-tb__menu.cat .cat__list.create a:before{
    content: "\e685";
    display: inline-block;
    font-size: 26px;
    margin-top: 2px;
  }
  .header-tb.cr .header-tb__menu.cat .cat__list.mypage a:before{
    content: "\e616";
    display: inline-block;
    font-size: 21px;
    margin-top: 3px;
  }
  .header-tb.cr .header-tb__menu.cat .cat__list.myteam a:before{
    content: "\e676";
    font-size: 29px;
    margin-top: 0;
    display: inline-block;
  }
  .header-tb.cr .header-tb__menu.search{
    width: 337px;
  }
  .header-tb.cr .header-tb__menu.search.search-login{
    width: 458px;
  }
  .header-tb.cr .header-tb__menu.search .search-icon{
    color: #c7c7c7;
    border: none;
    background:none;
  }
  .header-tb.cr .header-tb__menu.search.show .search-icon{
    color: #4f4f4f;
  }
 .header-tb.cr .header-tb__menu.search .search-text{
    background-color: #eee;
    border-color: #eee;
    margin-left: 5px;
    width: 337px;
    padding-left: 25px;
 }
.header-tb.cr .header-tb__menu.search.search-login .search-text{
  width: 450px;
}

 /*.header-tb.cr .header-tb__menu.search .search-text.show{
    background-color: #eee;
    border-color: #eee;
    margin-left: 5px;
 }*/
 .header-tb.cr .header-tb__menu.search .search-icon{
  width: 39px;
 }
 .header-tb.cr .header-tb__menu.search .search-icon{
  top: 8px;
  left: -2px;

 }
 .header-tb.cr .header-tb__menu.search.show{
  width: 260px;
 }
 .header-tb.cr .header-tb__menu.user .user-name{
  width: 165px;
 }
 .header-tb.cr .header-tb__menu.user .user-name a{
  color: #fff;
 }
 .header-tb.cr .header-tb__menu.notice{
  /*width: 277px;*/
    width: 202px;

 }
 /*.header-tb.cr .header-tb__menu.notice.show{
    width: 202px;
 }*/
 .header-tb.cr .header-tb__menu.notice ul li a{
  border-color: #5b5b5b;
  background-color: #5b5b5b;
 }
  .header-tb.cr .header-tb__menu.notice ul li.setting a{
    background-color: #4f4f4f;
  }
 .header-tb.cr .header-tb__menu.notice ul li a:before{
  color: #fff;
 }
 .header-tb.cr .header-tb__menu.notice ul li.message > a:hover:before,
  .header-tb.cr .header-tb__menu.notice ul li.friends > a:hover:before,
   .header-tb.cr .header-tb__menu.notice ul li.notification > a:hover:before{
    color: #414141;
    background-color: #5bcfff;
    border-radius: 8px;
 }
.header-tb.cr .header-tb__menu.notice ul li a.btn:hover{
   border-color: #5bcfff;
 }

  .header-tb.cr .header-tb__menu.cr a{
    display: block;
    width:83px;
    height: 28px;
    margin-top: 6px;
    position: relative;
}

 .header-tb.cr .header-tb__menu.cr .cr__icon{
    position: relative;
    width:83px;
    height: 28px;
    display: block;
  }
 .header-tb.cr .header-tb__menu.cr .cr__icon:before{
    color:#f05d8a;
  }
 .header-tb.cr .header-tb__menu.cr .cr__txt{
    position: absolute;
    width:74px;
    height: 28px;
    display: block;
    z-index: 2;
    color: #fff;
    font-weight: bold;
    top: 0;
    left:0;
    font-size: 11px;
    line-height: 2.6;
    text-align: center;
  }
 .header-tb.cr .header-tb__menu.cr .cr__txt:before{
    font-family:"icomoon";
    content: "\e626";
    font-weight: normal;
    vertical-align:middle;
    color:#fff;
    font-size: 12px;
 }

 .header-tb.cr .header-tb__menu.cr a:hover .cr__icon:before{
    color: #ef2664;
  }
 .header-tb.cr .header-tb__menu.cr a:hover .cr__txt{
    color:#fff;
  }

.header-tb.cr .header-tb__menu.notice .message .box.header_message_box .headerMessageBoxArea article a,
.header-tb.cr .header-tb__menu.notice .friends .box.header_friends_box .headerTeamBoxArea article a{
  background-color: #fff;
}


.header-tb.cr .header-tb__menu.notice .message .box.header_message_box a.btn_morelink.message{
  background-color: #f7f7f3;
}
.header-tb.cr .header-tb__menu.notice .message .box.header_message_box a.btn_morelink.friends,
.header-tb.cr .header-tb__menu.notice .friends .box.header_friends_box a.btn_morelink{
    background-color: #f7f7f3;
}
.header-tb.cr .header-tb__menu.notice .setting .btn{
  margin-top: 3px;
}
.header-tb.cr .header-tb__menu.notice .setting a:hover:before{
    color: #fff;
    background: none;
    border-radius: 0;
 }
.header-tb.cr .header-tb__menu.notice .setting .btn:hover{
  border:none;
}
.header-tb.cr .header-tb__menu.notice .setting .box.header_setting_box a{
    background-color: #fff;
    border-color: #e7e6e1;
}
.header-tb.cr .header-tb__menu.notice .setting .box.header_setting_box a:first-child{
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.header-tb.cr .header-tb__menu.notice .setting .box.header_setting_box a:last-child{
    border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.header-tb.cr .header-tb__menu.notice .setting .box:after,
.header-tb.cr .header-tb__menu.notice .setting .box:before{
  left: 36px;
}
.header-tb.cr .header-tb__menu.help a:link{}
.header-tb.cr .header-tb__menu.help a .help-txt{
  color: #fff;
}
.header-tb.cr .friends .box .headerFriendBoxArea article .box_detail .name a{
  background-color: #fff;
}
/*messageBox*/
.header-tb .header-tb__inr .header-tb__menu ul li .box:before,
.header-tb .header-tb__inr .header-tb__menu ul li .box:after{
  left: 128px;
}
.header-tb .header-tb__inr .header-tb__menu ul li.setting .box{
  left: -37px;
}
.header-tb .header-tb__inr .header-tb__menu ul li.setting .box:before,
.header-tb .header-tb__inr .header-tb__menu ul li.setting .box:after{
  left: 44px;
}
.header-tb.cr .header-tb__inr .header-tb__menu ul li.setting .box{
  left: -38px;
}
.header-tb.cr .header-tb__inr .header-tb__menu ul li.setting .box:before,
.header-tb.cr .header-tb__inr .header-tb__menu ul li.setting .box:after{
  left: 46px;
}
.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box{
  background-color: #fff;
}

.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box .headerNotificationBoxArea .notification_unread a:hover:before{
  border-radius: 0!important;
}
.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box .headerNotificationBoxArea .notification_unread a{
  background-color: #fff!important;
  border-radius: 0;
  border-color: #e7e6e1;
}
.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box .headerNotificationBoxArea .notification_unread:first-child a{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}
.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box .btn_morelink.notification{
  background-color: #f7f7f3;
}
}
.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box .headerNotificationBoxArea .notification_unread a:hover{
  border-radius: 0;
}

.header-tb.cr .header-tb__menu.notice .notification .box.header_notification_box .headerAnnounceBoxArea .notification_unread a{
  background-color: #fff!important;
  border-radius: 0;
  border-color: #e7e6e1;
}
/*====================================
  作品言語切替
=====================================*/
.langchangewrap{
  margin: 0 auto;
  float: right;
}
.langchange-ttl{
  display: inline-block;
  vertical-align: top;
  padding-top: 8px;
  padding-right: 8px;
}


.langchange{
  position:relative;
  overflow:hidden;
  display:inline-block;
  min-width:85px;
  background-color:#fff;
  border:1px solid #b8b8b8;
  border-radius: 5px;
  color:#000;
  padding-right: 24px;
}

.langchange select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  z-index:1;
  display:block;
  width:200%;/* fallback non calc support */
  width:-webkit-calc(100% + 5em);
  margin:0;
  padding:4px 0 4px 9px;
  background:transparent;
  border:0;
  outline:none;
  line-height:1.5;
}

.langchange:before{
  content: "";
  position:absolute;
  z-index:0;
  top:0;
  right:0px;
  width: 26px;
  height: 100%;
  line-height:1;
  background: #f1f0ec;
  border-left: 1px solid #b8b8b8;
  border-radius: 0 4px 4px 0;
  text-align: center;
}
.langchange:after {
  content: "";
  position:absolute;
  z-index:0;
  top:12px;
  right:8px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-top-color: #817f78;
  border-width: 6px 5px 0 ;
  line-height:1;
}


.langchange:hover:before{
  cursor: pointer;
}
.langchange select:hover{
  cursor: pointer;
}
.langchange select.ja{
    background: url("../images/flag_JP.png") 5px 4px no-repeat;
}
.langchange select.en{
    background: url("../images/flag_US.png") 5px 4px no-repeat;
}
.langchange select.zh_CN{
    background: url("../images/flag_CH.png") 5px 4px no-repeat;
}
.langchange select.zh_TW{
    background: url("../images/flag_TW.png") 5px 4px no-repeat;
}
.langchange select.ko{
    background: url("../images/flag_KR.png") 5px 4px no-repeat;
}
.langchange option{
  margin: 6px 0 2px;
  text-indent: 9px;
}
.langchange option:first-child{
  margin: 4px 0 2px;
}
.langchange option.ja{
  background: url("../images/flag_JP.png") 4px top no-repeat;
}
.langchange option.en{
  background: url("../images/flag_US.png") 4px top no-repeat;
}
.langchange option.zh_CN{
  background: url("../images/flag_CH.png") 4px top no-repeat;
}
.langchange option.zh_TW{
  background: url("../images/flag_TW.png") 4px top no-repeat;
}
.langchange option.ko{
  background: url("../images/flag_KR.png") 4px top no-repeat;
}


/*====================================
  new common styles
====================================*/
/*====================
 loading set
=====================*/
/*
<div id="loadingCirclesA">
  <div class="loading_circleA" id="loading_circleA_01"></div>
  <div class="loading_circleA" id="loading_circleA_02"></div>
  <div class="loading_circleA" id="loading_circleA_03"></div>
  <div class="loading_circleA" id="loading_circleA_04"></div>
  <div class="loading_circleA" id="loading_circleA_05"></div>
  <div class="loading_circleA" id="loading_circleA_06"></div>
  <div class="loading_circleA" id="loading_circleA_07"></div>
  <div class="loading_circleA" id="loading_circleA_08"></div>
</div>
*/

#loadingCirclesA{
  position:relative;
  width:45px;
  height:45px;
  margin:auto;
  transform:scale(0.6);
    -o-transform:scale(0.6);
    -ms-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
}

.loading_circleA{
  position:absolute;
  background-color:rgb(204,204,204);
  height:8px;
  width:8px;
  border-radius:4px;
    -o-border-radius:4px;
    -ms-border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
  animation-name:l_circleA;
    -o-animation-name:l_circleA;
    -ms-animation-name:l_circleA;
    -webkit-animation-name:l_circleA;
    -moz-animation-name:l_circleA;
  animation-duration:0.732s;
    -o-animation-duration:0.732s;
    -ms-animation-duration:0.732s;
    -webkit-animation-duration:0.732s;
    -moz-animation-duration:0.732s;
  animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
  animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
}

#loading_circleA_01{
  left:0;
  top:18px;
  animation-delay:0.2695s;
    -o-animation-delay:0.2695s;
    -ms-animation-delay:0.2695s;
    -webkit-animation-delay:0.2695s;
    -moz-animation-delay:0.2695s;
}

#loading_circleA_02{
  left:5px;
  top:5px;
  animation-delay:0.366s;
    -o-animation-delay:0.366s;
    -ms-animation-delay:0.366s;
    -webkit-animation-delay:0.366s;
    -moz-animation-delay:0.366s;
}

#loading_circleA_03{
  left:18px;
  top:0;
  animation-delay:0.4525s;
    -o-animation-delay:0.4525s;
    -ms-animation-delay:0.4525s;
    -webkit-animation-delay:0.4525s;
    -moz-animation-delay:0.4525s;
}

#loading_circleA_04{
  right:5px;
  top:5px;
  animation-delay:0.549s;
    -o-animation-delay:0.549s;
    -ms-animation-delay:0.549s;
    -webkit-animation-delay:0.549s;
    -moz-animation-delay:0.549s;
}

#loading_circleA_05{
  right:0;
  top:18px;
  animation-delay:0.6355s;
    -o-animation-delay:0.6355s;
    -ms-animation-delay:0.6355s;
    -webkit-animation-delay:0.6355s;
    -moz-animation-delay:0.6355s;
}

#loading_circleA_06{
  right:5px;
  bottom:5px;
  animation-delay:0.732s;
    -o-animation-delay:0.732s;
    -ms-animation-delay:0.732s;
    -webkit-animation-delay:0.732s;
    -moz-animation-delay:0.732s;
}

#loading_circleA_07{
  left:18px;
  bottom:0;
  animation-delay:0.8185s;
    -o-animation-delay:0.8185s;
    -ms-animation-delay:0.8185s;
    -webkit-animation-delay:0.8185s;
    -moz-animation-delay:0.8185s;
}

#loading_circleA_08{
  left:5px;
  bottom:5px;
  animation-delay:0.905s;
    -o-animation-delay:0.905s;
    -ms-animation-delay:0.905s;
    -webkit-animation-delay:0.905s;
    -moz-animation-delay:0.905s;
}



@keyframes l_circleA{
  0%{
    background-color:rgb(118,118,118);
  }

  100%{
    background-color:rgb(241,241,241);
  }
}

@-o-keyframes l_circleA{
  0%{
    background-color:rgb(118,118,118);
  }

  100%{
    background-color:rgb(241,241,241);
  }
}

@-ms-keyframes l_circleA{
  0%{
    background-color:rgb(118,118,118);
  }

  100%{
    background-color:rgb(241,241,241);
  }
}

@-webkit-keyframes l_circleA{
  0%{
    background-color:rgb(118,118,118);
  }

  100%{
    background-color:rgb(241,241,241);
  }
}

@-moz-keyframes l_circleA{
  0%{
    background-color:rgb(118,118,118);
  }

  100%{
    background-color:rgb(241,241,241);
  }
}
/*====================
  message
====================*/
.cmn-message{
  border-top: 1px solid #e7e6e1;
  width: 100%;
  padding: 20px;
}
.cmn-message .cmn-messagelist{
  width: 100%;
  font-size: 0;
}
.cmn-message .cmn-messagelist li{
  width: 100%;
  font-size: 13px;
  display: table;
  margin-bottom: 20px;
  table-layout: fixed;
}
.cmn-message .cmn-messagelist .thumb{
  display: table-cell;
  height: 32px;
  width: 32px;
  vertical-align: top;
}
.cmn-message .cmn-messagelist .thumb a{
  background: #f8f8f8 none repeat scroll 0 0;
  border: 2px solid #fff;
  border-radius: 16px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  display: block;
  height: 32px;
  overflow: hidden;
  width: 32px;
}
.cmn-message .cmn-messagelist .thumb a img{
  width: 100%;
}
.cmn-message .cmn-messagelist-right{
  display: table-cell;
  vertical-align: top;
  padding-left: 5px;
}
.cmn-message .cmn-messagelist-right-inner{
  width: 100%;
  overflow: hidden;
}
.cmn-message .cmn-messagelist-right-innerChild{
  float: right;
}
.cmn-message .cmn-messagelist .username{
  display: inline-block;
  max-width: 237px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 11px;
}
.cmn-message .cmn-messagelist time{
  display: inline-block;
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 11px;
  color: #767676;
}
.cmn-message .cmn-messagelist .status{
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 11px;
  color: #767676;
}
.cmn-message .cmn-messagelist .comment{
  width: 100%;
  background-color: #f9fcfd;
  border: 1px solid #bfd6e5;
  border-radius: 5px;
  color: #000;
  padding: 5px 10px;
  word-wrap: break-word;
  overflow-wrap : break-word;
}
.cmn-message .cmn-messagelist .author .comment{
  background-color: #f9fdf9;
  border-color: #ddecd1;
  transition: 0.1s ease all;
  -webkit-transition: 0.1s ease all;
}
.cmn-message .cmn-messagelist .notice{
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  margin-top: 5px;
}
.cmn-message.check-on{
}
.cmn-message.check-on .cmn-messagelist .comment{
  width: 88%;
  display: inline-block;
}
.cmn-message .cmn-messagelist .delete{
  display: none;
}
.cmn-message.check-on .cmn-messagelist .delete{
  display: inline-block;
  width: 10%;
  margin-left: 2%;
  transition: 0.1s ease all;
  -webkit-transition: 0.1s ease all;

}
.cmn-message.check-on .cmn-messagelist .delete a{
  display: inline-block;
  border-radius: 5px;
  border:1px solid #e9e7e1;
  text-align: center;
  color: #797979;
  font-weight: bold;
  padding: 5px 8px;
}
.cmn-message.check-on .cmn-messagelist .delete a:before{
  display: inline-block;
  font-family: "icomoon";
  content: "\e90b";
  font-size: 14px;
  color: #797979;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}
.cmn-message.check-on .cmn-messagelist .delete a:hover{
  opacity: 0.6;
  cursor: pointer;
}
.cmn-message.check-on .cmn-messagelist .delete a:hover:before{
  cursor: pointer;
}

/*====================
  comment
====================*/
.cmn-comment{
  width: 100%;
  padding: 20px;
}
.cmn-comment .cmn-commentlist{
  width: 100%;
  font-size: 0;
}
.cmn-comment .cmn-commentlist li{
  width: 100%;
  font-size: 13px;
  display: table;
  margin-bottom: 40px;
  table-layout: fixed;
}
.cmn-comment .cmn-commentlist li:last-child{
  margin-bottom: 0;
}
.cmn-comment .cmn-commentlist .stamp{
  width: 100%;
  text-align: left;
}
.cmn-comment .cmn-commentlist .stamp img{
  width: 140px;
  height: auto;
}
.cmn-comment .cmn-commentlist .thumb{
  display: table-cell;
  height: 46px;
  width: 46px;
  vertical-align: top;
}
.cmn-comment .cmn-commentlist .thumb a{
  background: #f8f8f8 none repeat scroll 0 0;
  border: 2px solid #fff;
  border-radius: 46px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  display: block;
  height: 46px;
  overflow: hidden;
  width: 46px;
}
.cmn-comment .cmn-commentlist .thumb a img{
  width: 100%;
}
.cmn-comment .cmn-commentlist-right{
  display: table-cell;
  vertical-align: top;
  padding-left: 5px;
}
.cmn-comment .cmn-commentlist .username{
  display: inline-block;
  max-width: 237px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 11px;
}
.cmn-comment .cmn-commentlist time{
  display: inline-block;
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 11px;
  color: #767676;
}
.cmn-comment .cmn-commentlist .comment{
  width: 100%;
  background-color: #f9fcfd;
  border: 1px solid #bfd6e5;
  border-radius: 5px;
  color: #000;
  padding: 5px 10px;
  word-wrap: break-word;
  overflow-wrap : break-word;
}
.cmn-comment .cmn-commentlist .comment-translator {
  border-top:1px solid #DDE5EB;
  width: 100%;
  margin:10px auto 0;
  padding-top: 10px;
}
.cmn-comment .cmn-commentlist .comment-translator--btn{
  display: block;
}
.cmn-comment .cmn-commentlist .comment-translator--btn:hover{
  cursor: pointer;
}
.cmn-comment .cmn-commentlist .comment-translator--btn:before{
  display: inline-block;
  font-family: "icomoon";
  content: "\e918";
  font-size: 14px;
  color: #9AA5B4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
  padding-right: 5px;
}
.cmn-comment .cmn-commentlist .comment-translator--txt{
  display: none;
}
.cmn-comment .cmn-commentlist .comment-translator--txt.show{
  display: block;
}
.cmn-comment .cmn-commentlist-bottom{
  width: 100%;
  font-size: 0;
  margin-top: 10px; 
}
.cmn-comment .cmn-commentlist-bottom li{
  font-size: 13px;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  width: auto;
  margin-left: 10px;
}
.cmn-comment .cmn-commentlist-bottom .like{
}
.cmn-comment .cmn-commentlist-bottom .like .like_count_box{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 60px;
}
.cmn-comment .cmn-commentlist-bottom .reply {
  margin-left: 0px;
}
.cmn-comment .cmn-commentlist-bottom .reply a{
  display: inline-block;
  width: 65px;
  margin-top: 5px;
}
.cmn-comment .cmn-commentlist-bottom .reply a:before{
  content: "\e658";
  font-family: "icomoon";
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #797979;
  padding-right: 5px;
}

.cmn-comment .cmn-commentlist-bottom .like{
  float: right;
}
.cmn-comment .cmn-commentlist-bottom .reply{
  float: right;
}
.cmn-comment .cmn-commentlist-bottom .reply a{
  margin-top: 0;
}
.cmn-comment .cmn-commentlist-bottom .reply .comment_reply_button{
  background: #fff none repeat scroll 0 0;
  border: 1px solid #e9e7e1;
  color: #797979;
  padding: 4px 15px;
  width: auto;
  border-radius: 10px;
  display: inline-block;
  float: none;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 80px;
}


.cmn-comment .cmn-commentlist-bottom .delete{
  margin-left: 0;
  float: left;
}

.cmn-comment .cmn-commentlist-bottom .delete a{
  background: #f7334f none repeat scroll 0 0;
  border: 1px solid #f7334f;
  border-radius: 10px;
  color: #ffffff;
  display: inline-block;
  float: none;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 50px;
}
.cmn-comment .cmn-commentlist-bottom .delete a:hover{
  background-color:#f7334f;
  border-color: #f7334f;
  color: #fff;
  opacity: 0.5;
}
.cmn-comment .cmn-commentlist-bottom .delete .commentlist-del-link-confirm{
}
.cmn-comment .cmn-commentlist-bottom .delete .commentlist-del-link-confirm .message{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  width: 0px;
}
.cmn-comment .cmn-commentlist-bottom .delete .commentlist-del-link-confirm a{
  width: 90px;
}
.cmn-comment .cmn-commentlist .author .comment{
  background-color: #f9fdf9;
  border-color: #ddecd1;
}
.cmn-comment .cmn-commentlist-bottom .delete .commentlist-del-link-confirm .js_commentDeleteNg{
  background: #fff none repeat scroll 0 0;
  color: #797979;
  border: 1px solid #e9e7e1;
}


/*====================
  selectbox
====================*/
.cmn-selectbox{
  position:relative;
  overflow:hidden;
  display:inline-block;
  min-width:85px;
  background-color:#fff;
  border:1px solid #b8b8b8;
  border-radius: 5px;
  color:#000;
  padding-right: 30px;
}

.cmn-selectbox select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  z-index:1;
  display:block;
  width:200%;/* fallback non calc support */
  width:-webkit-calc(100% + 5em);
  margin:0;
  padding:4px 0 4px 4px;
  background:transparent;
  border:0;
  outline:none;
  line-height:1.5;
}
.cmn-selectbox:before{
  content: "";
  position:absolute;
  z-index:0;
  top:0;
  right:0px;
  width: 26px;
  height: 100%;
  margin-top:-4px;
  padding-top: 16px;
  line-height:1;
  background: #f1f0ec;
  border-left: 1px solid #b8b8b8;
  border-radius: 0 5px 5px 0;
  text-align: center;
  font-size: 70%;
  line-height:1;
}
.cmn-selectbox:after {
  content: "";
  position:absolute;
  z-index:0;
  top:12px;
  right:8px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-top-color: #817f78;
  border-width: 6px 5px 0 ;
  line-height:1;
}
.cmn-selectbox:hover:before{
  cursor: pointer;
}

/*====================
  tag
  ====================*/
.cmn-picturelist-cont-tag{
  margin-top: 4px;
}
.cmn-picturelist-cont-tag span{
  background-color: #dfeaf6;
  border-radius: 0 3px 3px 0;
  color: #356fb7;
  display: inline-block;
  font-size: 11px;
  line-height: 20px;
  margin-left: 10px;
  padding-right: 8px;
  position: relative;
  text-align: left;
  text-indent: 0.4em;
  width: auto;
  letter-spacing: -0.4px;
  margin-top: 4px;
}
.cmn-picturelist-cont-tag span:before {
  background: #dfeaf6;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  content: "";
  position: absolute;
  top: 2px;
  left: -8px;
}
.cmn-picturelist-cont-tag span:after{
  color: #fff;
  content: "・";
  font-size: 18px;
  font-weight: bold;
  left: -13px;
  position: absolute;
}
.cmn-picturelist-cont-tag span a{
  display: inline-block;
  vertical-align: top;
  position: relative;
  max-width: 160px;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
}

.cmn-pictureDetails-details-tagbox{
  padding: 20px 10px 0;
}
.cmn-pictureDetails-details-tagbox .inputArea{
  padding: 10px 10px 0;
}
.cmn-pictureDetails-details-tagbox .tagEdit{
  border: 1px solid #e9e7e1;
  border-radius: 5px;
  padding: 5px;
}
.book_info .tit .tagEdit{
  float: right;
  font-size: 11px;
  font-weight: normal;
}
.cmn-pictureDetails-details-tagbox .cmn-keyword{
  margin-top: 4px;
  overflow: hidden;
}
.book_info .cmn-keyword{
  margin: 6px 0;
}
.cmn-keyword .keyword,
.cmn-tagbox li,
.seriesmain__series__sec.series-tag li{
  background-color: #dfeaf6;
  border-radius: 0 3px 3px 0;
  color: #356fb7;
  display: inline-block;
  font-size: 14px;
  line-height: 26px;
  margin-left: 20px;
  position: relative;
  text-align: left;
  text-indent: 0.4em;
  height: 26px;
  width: auto;
  letter-spacing: -0.4px;
  margin-top: 4px;
  margin-bottom: 4px;
  vertical-align:top;
}
.book_info .cmn-keyword .keyword{
  max-width: 170px;
}
.book_detail .cmn-tagbox li{
  max-width: 226px;
}
.cmn-keyword .keyword:before,
.cmn-tagbox li:before,
.seriesmain__series__sec.series-tag li:before{
  background: #dfeaf6;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  content: "";
  position: absolute;
  top: 3px;
  left: -10px;
}
.cmn-keyword .keyword:after,
.cmn-tagbox li:after,
.seriesmain__series__sec.series-tag li:after{
  color: #fff;
  content: "・";
  font-size: 18px;
  font-weight: bold;
  left: -13px;
  position: absolute;
  top: 1px;
  z-index: 2;
}
.cmn-pictureDetails-details-tagbox .cmn-keyword .emptyTagArea{
  display: inline-block;
  padding: 10px;
}
.cmn-pictureDetails-details-tagbox .cmn-keyword .tagEditBtn{
  display: inline-block;
  margin-top: 9px;
  margin-bottom: 3px;
  margin-left: 10px;
}
.cmn-keyword .keyword a{
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.cmn-keyword .keyword .keyword_text,
.cmn-tagbox li .keyword_text,
.seriesmain__series__sec.series-tag li .keyword_text{
  display: inline-block;
  padding-right: 8px;
  vertical-align: top;
}
.book_info .cmn-keyword .keyword .keyword_text{
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.book_info .cmn-keyword .lock .keyword_text{
  max-width: 143px;
}
.book_info .cmn-keyword .unlock .keyword_text{
  max-width: 130px;
}
.cmn-tagbox li .keyword_text,
.seriesmain__series__sec.series-tag li .keyword_text{
  padding-right: 8px;
  max-width: 218px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.book_detail .cmn-tagbox.jq_keyword_area li .keyword_text{
  padding-right: 0;
  max-width: 159px;
}
.cmn-keyword.input-on .keyword .keyword_text{
  display: inline-block;
  padding-right: 0;
  padding-left: 2px;
}
.cmn-pictureDetails-details-tagbox .cmn-keyword.input-on .lock .ic-lock{
  display: inline-block;
  width: 10px;
  height: 15px;
  background: url(../images/ic-lock.png) 0 -15px no-repeat;
  margin-left: 4px;
  margin-right: 6px;
  vertical-align: -3px;
}
.book_info .cmn-keyword.input-on .lock{
  padding-right: 24px;
}
.book_info .cmn-keyword.input-on .lock .ic-lock{
  background: url(../images/ic-lock.png) 0 -15px no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  top: 6px;
  right: 6px;
}
.cmn-tagbox .iconArea,
.seriesmain__series__sec.series-tag .iconArea{
  display: inline-block;
  margin-left: 10px;
  width: 23px;
  height: 26px;
  cursor: pointer;
  position: relative;
}
.cmn-tagbox .iconArea:before,
.seriesmain__series__sec.series-tag .iconArea:before{
  content: "";
  border-left: 1px solid #a0a0a0;
  margin-left: -7px;
}
.cmn-tagbox .unlock .ic-lock,
.seriesmain__series__sec.series-tag .unlock .ic-lock{
  width: 10px;
  height: 15px;
  background: url(../images/ic-lock.png) 0 0 no-repeat;
  position: absolute;
  top: 5px;
  left: 7px;
}
.cmn-tagbox .lock .ic-lock,
.seriesmain__series__sec.series-tag .lock .ic-lock{
  width: 10px;
  height: 15px;
  background: url(../images/ic-lock.png) 0 -15px no-repeat;
  position: absolute;
  top: 5px;
  left: 7px;
}

.cmn-keyword.input-on .unlock .tag-del,
.cmn-tagbox .delete,
.seriesmain__series__sec.series-tag .delete{
  position: relative;
  display: inline-block;
  margin-left: 6px;
  width: 22px;
  height: 26px;
  vertical-align: top;
}
.cmn-tagbox .delete:hover{
  cursor: pointer;
}
.cmn-keyword.input-on .unlock .tag-del:before,
.cmn-tagbox .delete:before,
.seriesmain__series__sec.series-tag .delete:before{
  content: "";
  border-left: 1px solid #a0a0a0;
  margin-left: -8px;
}
.cmn-keyword.input-on .unlock .tag-del:after,
.cmn-tagbox .delete:after,
.seriesmain__series__sec.series-tag .delete:after{
  position: absolute;
  font-family: "icomoon";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  line-height: 1.2;
  content: "\e693";
  font-size: 12px;
  right: 4px;
  top: 6px;
  color: #707070;
  width: 20px;
  height: 14px;
}
.cmn-pictureDetails-details-tagbox .tagCount{
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 12px;
  color: #707070;
}
.book_info .tagCount{
  float: right;
  margin-right: 6px;
  font-size: 12px;
  color: #707070;
}
.cmn-pictureDetails-details-tagbox .txt.jq_keyword_add{
  display: inline-block;
  width: 350px;
  padding: 4px;
  background: #fff;
  border: 1px solid #bfd6e5;
  border-radius: 5px;
  font-size: 88%;
}
.book_info .txt.jq_keyword_add{
  width: 184px;
  margin: 4px 8px 8px;
  padding: 4px 2px;
  background: #fff;
  border: 1px solid #bfd6e5;
  border-radius: 5px;
  font-size: 88%;
}
.book_info .alert{
  margin: 0 10px 5px;
  font-size: 90%;
}
.cmn-pictureDetails-details-tagbox .alert{
  margin-top: 5px;
}
.upload_detail .alert,
.book_detail .alert,
.seriesmain__series__sec.series-tag .alert{
  margin-bottom: 10px;
}
.upload_detail .box div,
.book_detail .box div{
  display: inline-block;
  margin: 0 5px 10px 0;
  padding: 3px 10px;
  background: #eef6ff;
  border: 1px solid #356fb7;
  border-radius: 20px;
  color: #356fb7;
  word-break: break-all;
}
.upload_detail .box .keyword_text,
.book_detail .box .keyword_text,
.seriesmain__series__sec.series-tag .keyword_text{
  padding: 0 5px 0 0;
}
.upload_detail .box .delete,
.book_detail .box .delete,
.seriesmain__series__sec.series-tag .delete{
  cursor: pointer;
}
.tag-language{
  background: #d9f1fa;
  color: #0075a5;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  display: inline-block;
  border-radius: 5px;
}
.mature-content-tag{
  display: inline-block;
  margin-top: 3px;
  background: #e73241;
  border-radius: 5px;
  height: 25px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  vertical-align: top;
}
.pictureDetails-details .mature-content-tag,
.modalPicture-details .mature-content-tag{
  margin-top: 5px;
  margin-left: 20px;
}
.modalBook-info-left .mature-content-tag{
  margin-left: 10px;
}
/*====================
  通報する
====================*/
.cmn-report{
  width: 100%;
  font-size: 0;
}
.cmn-report .cmn-report-ttl{
  position: relative;
  font-size: 12px;
  padding-left: 15px;
  color: #356fb7;
  margin-top: 2em;
}
.cmn-report .cmn-report-ttl:hover{
  cursor: pointer;
}
.cmn-report .cmn-report-ttl:before{
  position: absolute;
  left: 0;
  top:0;
  font-family: "icomoon";
  content: "\e701";
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #727272;
}
.cmn-report .cmn-report-form{
  margin-top: 10px;
  display: none;
}
.cmn-report .cmn-report-form--txt{
  font-size: 12px;
}
.cmn-report .cmn-report-form--textarea{
  border:1px solid #a9a9a9;
  border-radius: 5px;
  width: 100%;
  min-height: 40px;
  font-size: 13px;
  resize:vertical;
  padding:10px;
  margin-top: 5px;
}
.cmn-report .cmn-report-btns{
  width: 220px;
  margin:10px auto 0;
}
.cmn-report .cmn-report-form--btn{
  display: inline-block;
  width: 100px;
  text-align: center;;
  height: 40px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
  background-color: #fff;
  border:0px solid;
}
.cmn-report .cmn-report-form--btn:hover{
  opacity: 0.8;
}
.cmn-report .cmn-report-form--btn.btn-report{
  background-color: #659b24;
  color: #fff;
  margin-right: 10px;
}
.cmn-report .cmn-report-form--btn.btn-cancel{
  background-color:#a3abae;
  color: #fff;
}
/*====================================
  bxSlider CSS override
=====================================*/
.bx-wrapper{
  margin-bottom: 20px!important;
}
.bx-wrapper .bx-controls-direction a{
  opacity: 0.6;
}
.bx-wrapper .bx-viewport {
  box-shadow: 0 0 0 #ccc!important;
  left: 0!important;}
.bx-wrapper .bx-prev{
  left: -9px!important;
}
.bx-wrapper .bx-next{
  right: -8px!important;
}
/*====================================
  on Modal
=====================================*/
.wrap-on-modal{
  position: relative;
}
.wrap-on-modal #push{
  display: none;
}
.wrap-on-modal footer{
  display: none;
}
.wrap-on-modal .contents-footer-bnr{
  display: none;
}

/*====================================
  common parts
======================================*/
/*heading*/
#content .cmn-h2{
  width: 100%;
  height: 60px;
  border:1px solid #e7e6e1;
  font-size: 130px;
  color: #525657;
  font-size: 130%;
  background-color: #fff;
  border-radius:10px 10px 0 0;
  line-height: 58px;
  padding-left: 20px;
}
#content .cmn-creators-h2{
  width: 100%;
  height: 60px;
  border:1px solid #e7e6e1;
  font-size: 130px;
  color: #525657;
  font-size: 130%;
  background-color: #fff;
  border-radius:10px 10px 0 0;
  line-height: 58px;
  padding-left: 20px;

}
#content .cmn-creators-h2:before{
  font-family:"icomoon";
  content: "\e674";
  margin-right: 20px;
  vertical-align: middle;
  font-weight: normal;
  font-size: 130%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#content .cmn-creators-body{
  background-color: #fff;
  border:1px solid #e7e6e1;
  border-top: 0;
}

/*====================================
  responsive
=====================================*/
@media screen and (max-width: 600px) {

}