@charset "UTF-8";
/*==============================
  category common
=============================*/
/*modal*/
.modalScroll{
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    width: 100%;
    z-index: 100;
    top:0;
    min-height: 100%;
    padding-bottom: 50px;
    overflow-x: hidden;
}
.modalScroll-inner{
    overflow: scroll;
    overflow-x:hidden;
    margin-right: -15px;
}
.modalScroll-close{
  border-radius: 10px;
  background: -moz-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* FF3.6+ */
  background: -webkit-gradient(linear, 90deg, color-stop(0%, #dcdcdc), color-stop(100%, #ffffff));/* Chrome,Safari4+ */
  background: -webkit-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* Opera 11.10+ */
  background: -ms-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#ffffff', GradientType='0'); /* for IE */
  background: linear-gradient(0deg, #dcdcdc 0%, #ffffff 100%);/* W3C */
  height: 35px;
  width: 35px;
  position: absolute;
  right: -70px;
  top: -40px;
  }
.modalScroll-close:before{
    font-family:"icomoon";
    display: block;
    padding: 15px 0 2px 5px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 125%;
    color: #3e3e3e;
    text-align: center;
    width: 35px;
    line-height: 5px;
    content: "\e621";
    -moz-transform: rotate(45deg); /*FF3.5+*/
    -o-transform: rotate(45deg); /*Opera 10.5*/
    -webkit-transform: rotate(45deg); /*Saf3.1+, Chrome*/
    -ms-transform: rotate(45deg); /*IE9*/
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707107, M12=-0.707107,M21=0.707107, M22=0.707107, sizingMethod='auto expand');/*IE6-IE9*/
    zoom: 1;
}
.modalScroll-close:hover{
    cursor: pointer;
    opacity: 0.8;
}
.modalScroll-wrap{
    width: 80%;
    min-width: 980px;
    max-width: 1200px;
    margin: 60px auto;
    position: relative;
}

/*commentPost*/

.commentpost-right .commentbaloon{
  margin: 5px 0 0;
  position: relative;
  border: 1px solid #bfd6e5;
  border-radius: 5px;
  color: #5e5847;
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 5px;
  text-align: justify;
  width: 95%;
  z-index: 0;
}

.commentpost-right .commentbaloon:before {
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  border-width: 5px 10px 5px 0;
  content: "";
  display: block;
  height: 0;
  left: 2px;
  margin-top: -2px;
  position: absolute;
  top: 13px;
  width: 0;
  z-index: 2;
  margin-left: -11px;
}
.commentpost-right .commentbaloon:after {
  border-color: transparent #bfd6e5 transparent transparent;
  border-style: solid;
  border-width: 6px 11px 6px 0;
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin-top: -7px;
  position: absolute;
  top: 17px;
  width: 0;
  z-index: 1;
  margin-left: -11px;
}
.commentpost-right .commentbaloon-tab{
  overflow: hidden;
  background: url(../images/bg_commentbaloon-tab.gif) left bottom repeat-x;
  padding-left: 5px;
}
.commentpost-right .commentbaloon-tab li {
  float: left;
  list-style: none;
}
.commentpost-right .commentbaloon-tab li a{
  display: block;
  border: 1px solid #dedede;
  padding: 0 8px;
  border-bottom: 1px solid #dedede;
  border-right: none;
  height: 26px;
  line-height: 21px;
  font-size: 11px;
  text-align: center;
  background: #f8f8f8;
  color: #868686;
}
.commentpost-right .commentbaloon-tab li .stamp01,
.commentpost-right .commentbaloon-tab li .stamp02{
  display: inline-block;
  width: 20px;
  /* IE9 */
  width: 24px \0/IE9;
  height: 20px;
  vertical-align: middle;
  background-size: 20px 20px;
  text-indent: -9999px;
}
.commentpost-right .commentbaloon-tab li .stamp01{
  background: #f8f8f8 url(../images/icon_stamp_01.svg) center center no-repeat;
}
.commentpost-right .commentbaloon-tab li .stamp02{
  background: #f8f8f8 url(../images/icon_stamp_02.svg) center center no-repeat;
}
.commentpost-right .commentbaloon-tab li a .commentbaloon-tab-icon01{
  padding-right: 8px;
}
.commentpost-right .commentbaloon-tab li a .commentbaloon-tab-icon01:before{
   font-family:"icomoon";
    content: "\e715";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #868686;
}

.commentpost-right .commentbaloon-tab li a:hover{
  cursor: pointer;
}
.commentpost-right .commentbaloon-tab li a:link,
.commentpost-right .commentbaloon-tab li a:hover,
.commentpost-right .commentbaloon-tab li a:visited{
  text-decoration: none;
  color: #868686;

}
.commentpost-right .commentbaloon-tab li:first-child a{
  border-right: none;
  border-left: 1px solid #dedede;
  border-top-left-radius: 3px;
}
.commentpost-right .commentbaloon-tab li:last-child a{
  border-top-right-radius: 3px;
  border-right: 1px solid #dedede;
}

.commentpost-right .commentbaloon-tab li a.current,
.commentpost-right .commentbaloon-tab li a:hover{
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

.commentpost-right .commentbaloon-cont{
  padding: 5px;
}
.commentpost-right .commentbaloon-cont .commentpost-reply-target-name{
  display: inline-block;
  border-radius: 12px;
  background: #ddd;
  margin: 5px 0;
  padding: 2px 10px;
}
.commentpost-right .commentbaloon-cont .commentpost-reply-target-name .icon-close01{
  margin-left: 10px;
  font-size: 80%;
  cursor: pointer;
}
.commentpost-right .commentbaloon-cont .textarea{
  border: none;
  min-height: 80px;
  width: 100%;
}
.commentpost-right .commentbaloon-cont .stamplist {
  overflow: hidden;
  margin-top: 3px;
  width: 100%;
}
.commentpost-right .commentbaloon-cont .stamplist:first-child {
  margin-top: 0;
}
.commentpost-right .commentbaloon-cont .stamplist li {
  list-style: none;
  display: inline-block;
  margin-right: 2px;
  width: 114px;
}
.commentpost-right .commentbaloon-cont .stamplist li:last-child{
  margin-right: 0;
}
.commentpost-right .commentbaloon-cont .stamplist li img{
  box-sizing: border-box;
  width: 105px;
  height: auto;
  max-width: 105px;
}
.commentpost-right .commentbaloon-cont .stamplist li img:hover{
  cursor: pointer;
  opacity: 0.8;
}
.commentpost-right .commentbaloon-cont .stamp_toggle-more{
  display: inline-block;
  text-align: right;
  width: 100%;
  margin: 4px 0;
}
.commentpost-right .commentbaloon-cont .stamp_toggle-more:hover{
  cursor: pointer;
}
.commentlist-txtbox .pushstamp{
    text-align: left;
    width: 100%;
}
.modalBook-commentlist-author .commentlist-txtbox .pushstamp,
.modalPicture-commentlist-auther .commentlist-txtbox .pushstamp{
    text-align: right;
}

.commentlist-txtbox .pushstamp img{
    max-width: 180px;
}
.commentlist-txtbox .commentlist-btm{
    margin-top: 12px;
    overflow: hidden;
    width: 100%;
}
.modalBook-commentlist-author .commentlist-txtbox .commentlist-btm,
.modalPicture-commentlist-auther .commentlist-txtbox .commentlist-btm{
    text-align: right;
}
.commentlist-txtbox .commentlist-btm .like_box{
    display: inline-block;
}
.commentlist-txtbox .commentlist-btm .commentlist-del{
    display: inline-block;
    margin: 0 10px;
}
.commentlist-txtbox .commentlist-btm .commentlist-del a{
    display: inline-block;
}
.commentlist-txtbox .commentlist-btm .commentlist-del a:before{

  content: "\e658";
  font-family: "icomoon";
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #797979;
}
.commentlist-txtbox .commentlist-btm .commentlist-del-link{
    display: inline-block;
}
.commentlist-txtbox .commentlist-btm .commentlist-del-link a{
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e9e7e1;
    border-radius: 10px;
    color: #797979;
    display: inline-block;
    float: none;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100px;

}


/*if wrap-on-modal */
/*#push, footer{
    position: static;
    height: auto;
}*/

/*==============================
 Illist /picture/list
=============================*/
#picture.wrap{
    border:none;
    margin-top: 0;
    padding-top: 10px;
}
/*イラスト一覧だったらつける*/
body.picturelist-nofooter{
  background-color: #f3f3f3;
}
body.picturelist-nofooter #content{
    background-color: #f3f3f3;
}
/*illustList*/
 .picturelist-nofooter #push,
 .picturelist-nofooter .contents-footer-bnr,
 .picturelist-nofooter footer{
    display: none;
 }

.picturelist-cont{
    width: 1040px;
    margin: 0 -8px;
}
.picturelist-cont > ul{
    font-size: 0;
    margin: 0 auto 25px;
    position: relative;
    padding-bottom: 10px;
    width: 1040px;
}
.picturelist-cont-detail{
    width: 198px;
    font-size: 13px;
    border:1px solid #e3e3e3;
    background-color: #fff;
    padding: 0;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    vertical-align: top;
    margin-right: 5px;
    margin-left: 5px;
    height: auto;
    margin-bottom: 15px;
    -webkit-transition: top 1s ease, left 1s ease;
    -moz-transition: top 1s ease, left 1s ease;
    -o-transition: top 1s ease, left 1s ease;
    transition: top 1s ease, left 1s ease;
    display: block;
    float: left;
    opacity: 0;
    overflow: hidden;
}
.picturelist-cont-thumb {
    width: 196px;
    max-height: 784px;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
}
.picturelist-cont-thumb img{
    max-width: 100%;
    height: auto;
}
.picturelist-cont-info{
    margin-top: 10px;
    padding: 0 5px;
}
.picturelist-cont-ttl{
    font-weight: bold;
}

.picturelist-cont-author{
    margin-top: 5px;
}
.picturelist-cont-author-icon{
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #e7e6e1;
    border-radius: 9px;
    overflow: hidden;
    vertical-align: top;
}
.picturelist-cont-author-icon img{
    height: auto;
    min-width: 16px;
    width: 100%;
    vertical-align: top;
}
.picturelist-cont-author-name{
    display: inline-block;
    margin-left: 3px;
    overflow: hidden;
    width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.picturelist-cont-comment{
    border-top: 1px solid #e9e9e9;
    padding: 5px;
}
.picturelist-cont-countup{
}
.picturelist-cont-countup-gd{
    display: inline-block;
}
/* .picturelist-cont-countup-gd.like_box .like_button{
    width: 30px;
    height: 22px;
    font-size: 14px;
    line-height: 15px;
} */
/* .picturelist-cont-countup-gd.like_box .like_count_box {
    border:none;
    background:none;
    font-size: 11px;
    color: #ff7e16;
    display: inline-block;
    font-weight: bold;
    height: 26px;
    line-height: 24px;
    min-width: 18px;
    padding: 0 5px;
    position: relative;
    text-align: left;
    max-width: 45px;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
} */
/* .picturelist-cont-countup-gd.like_box .like_count_box:before {
    border:none;
    background-color: none;
    display: inline;
    position: relative;
    left: 0;
    top: 0;
} */
/* .picturelist-cont-countup-gd.like_box .like_count_box:after {
    border:none;
    background-color: none;
    display: inline;
    position: relative;
    left: 0;
    top: 0;
} */
.picturelist-cont-countup-comment{
    display: inline-block;
    color: #868686;
    vertical-align: top;
}
.picturelist-cont-countup-comment:before{
    content: "\e715";
    font-family: "icomoon";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 17px;
    font-weight: normal;
    color: #868686;
    display: inline-block;
    vertical-align: middle;
}
.picturelist-cont-countup-comment span{
    padding-left: 3px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    min-width: 25px;
    max-width: 42px;
    vertical-align: middle;
}
.picturelist-cont-favorite{
    display: inline-block;
    width: 26px;
    height: 22px;
    float: right;
}
.picturelist-cont-favorite .book-fav-btn{
  position: relative;
  display: block;
}
.picturelist-cont-favorite .book-fav-btn:before{
    content: "\e721";
    font-family: "icomoon";
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    width: 26px;
    height: 22px;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    background-color: #979797;
    border-color: #979797;
    line-height: 21px;
}
.picturelist-cont-favorite .book-fav-btn:hover:before{
    cursor: pointer;
    background-color: #356fb7;
    border-color: #356fb7;
    color: #fbaa47;
}
.picturelist-cont-favorite .book-fav-btn.faved:before{
    border:1px solid #ededed;
    color: #fbaa47;
    background-color: #fff;
}
.picturelist-cont-countup-commentbox {
    margin-bottom: 5px;
}
.picturelist-cont-countup-commentbox .countup-commentbox{
    background-color: #fff;
    border: 1px solid #bfd6e5;
    border-radius: 5px;
    margin-top: 5px;
    min-height: 25px;
    max-height: 25px;
    padding: 3px;
    resize: vertical;
    width: 100%;
    font-size: 11px;
}
.picturelist-cont-commentlist li{
    margin-top: 5px;
}
.picturelist-cont-commentlist-icon{
    border: 1px solid #e7e6e1;
    border-radius: 9px;
    display: inline-block;
    height: 18px;
    overflow: hidden;
    width: 18px;
    vertical-align: top;
}
.picturelist-cont-commentlist-icon img{
    height: auto;
    min-width: 16px;
    width: 100%;
}
.picturelist-cont-commentlist-comment{
    background-color: #f9fcfd;
    border:1px solid #d8ebf1;
    border-radius: 3px;
    padding: 0 5px;
    width: 163px;
    height: 20px;
    line-height: 19px;
    display: inline-block;
    font-size: 12px;
    position: relative;
    z-index: 0;
}
.picturelist-cont-commentlist-comment-inner{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    display: block;
}

/* picturelist-cont-detail: opacity */
.picturelist-cont-detail.shown,
.no-js .picturelist-cont-detail,
.no-cssanimations .picturelist-cont-detail {
  opacity: 1;
}
.picturelist-cont-detail.animate {
    -webkit-animation: fadeIn 0.65s ease forwards;
    animation: fadeIn 0.65s ease forwards;
}
@-webkit-keyframes fadeIn {
    0% { }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { }
    100% { opacity: 1; }
}

/*================================================================
   modalPicture　イラストモーダル　modalScrollと合わせて使う
================================================================*/
.modalPicture{
    height: auto;
    border-radius: 10px;
    /* background: url(../images/bg_modalscroll_col2.gif) left top repeat-y #f8f8f8; */
    background-color: #fff;
    overflow: hidden;
}
.modalPicture-inner{
    display: flex;
    /*max-height: 980px;
    overflow-y: scroll;
    overflow-x: hidden;*/
    height: auto;
}
.modalPicture-details{
    width: calc(100% - 320px);
    vertical-align: top;
}
.modalPicture-main{
    margin-top: 20px;
    padding: 0 20px 0px;
}
.modalPicture-image{
    width: 100%;
    text-align: center;
}
.modalPicture-image a{
    cursor: zoom-in;
}
.modalPicture-image img{
    vertical-align: top;
    max-width: 100%;
    height: auto;
    max-height: 640px;
}
@media screen and (min-height: 801px){
    .modalPicture-image img{
        max-height: 80vh;
    }
}
.modalPicture-image-gd{
    display: inline-block;
    vertical-align: top;
    margin-top: 1px;
}
.modalPicture-image-view{
  display: inline-block;
  vertical-align: top;
  color: #8D8D8D;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 14px;
  vertical-align:top;
  margin-left: 8px;
  border-left: 2px solid #EDEDED;
  padding-left: 8px;
  margin-top: 5px;
}
.modalPicture-image-view:before{
  margin-right: 5px;
}
.modalPicture-image-size{
    display: table-cell;
    width: 50%;
    text-align: right;
    font-size: 11px;
    color: #767676;
    vertical-align: middle;
}
.modalPicture-image-size .image-original a{
    display: inline-block;
    width: 50px;
    height: 24px;
    line-height: 24px;
    border:1px solid #ededed;
    border-radius: 10px;
    text-align: center;
    margin-left: 10px;
}
.modalPicture-modalPicture-action{
    display: table;
    width: 100%;
    height: auto;
    margin: 15px 0 10px;
}
.modalPicture-modalPicture-action-left{
    display: inline-block;
    width: 75%;
    vertical-align: top;
}
.modalPicture-modalPicture-action-left .picture-detail{
    border: 1px solid #ededed;
    border-radius: 10px;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    margin-left: 10px;
    text-align: center;
    width: 58px;
    font-size: 11px;
    vertical-align: top;
    margin-top: 2px;
}
.modalPicture-image-favorite{
    display: inline-block;
    width: 26px;
    height: 22px;
    margin-right: 8px;
}
.modalPicture-image-favorite .book-fav-btn{
  display: block;
  position: relative;
}
.modalPicture-image-favorite .book-fav-btn:before{
    content: "\e721";
    font-family: "icomoon";
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    width: 28px;
    height: 28px;
    text-align: center;
    border-radius: 15px;
    line-height: 28px;
    color: #fff;
    border-color: #979797;
    background-color: #979797
}
.modalPicture-image-favorite .book-fav-btn:hover:before{
    cursor: pointer;
    opacity: 0.6;
}
.modalPicture-image-favorite .book-fav-btn.faved:before{
    color: #fbaa47;
    border:1px solid #ededed;
    background-color: #fff
}
.modalPicture-sns{
    display: inline-block;
    padding-left: 20px;
    vertical-align: top;
}
.modalPicture-sns .sns-button-group{
    display: flex;
}
.modalPicture-sns .sns-button-group li{
    margin: 0 2px;
}
.modalPicture-sns .sns-button-group li .sns_btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    width: 28px;
    height: 28px;
    border: none;
}
.modalPicture-sns .sns-button-group li .sns_btn:before {
    font-family: "icomoon";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}
.modalPicture-sns .sns-button-group .sns_facebook .sns_btn {
}
.modalPicture-sns .sns-button-group .sns_facebook .sns_btn:before {
    color: #3c568f;
    font-size: 2.1rem;
}
.modalPicture-sns .sns-button-group .sns_twitter .sns_btn {
    background-color: #37a6de;
}
.modalPicture-sns .sns-button-group .sns_twitter .sns_btn:before {
    font-size: 1.4rem;
}
.modalPicture-sns .sns-button-group .sns_gplus .sns_btn {
    background-color: #9d2b24;
}
.modalPicture-sns .sns-button-group .sns_gplus .sns_btn:before {
    font-size: 2.5rem;
}
.modalPicture-sns .sns-button-group .sns_line .sns_btn {
}
.modalPicture-sns .sns-button-group .sns_line .sns_btn:before {
    color: #00b902;
    font-size: 2.2rem;
}
.modalPicture-sns .sns-button-group .sns_reddit .sns_btn{
    background: #ff4500;
}
.modalPicture-sns .sns-button-group .sns_reddit .sns_btn:before{
    font-size: 1.3rem;
}
.modalPicture-modalPicture-action-right{
    display: inline-block;
    width: 24%;
    margin-top: 7px;
    vertical-align: top;
    text-align: right;
}
.modalPicture-modalPicture-action-right .link-url {
    display: none;
    width: 100%;
    height: 30px;
    border: 1px solid #e0ebf6;
    border-radius: 5px;
    padding: 8px;
    background-color: #f5f7f9;
    font-size: 11px;
}
.modalPicture-modalPicture-action-right .cmn-report .cmn-report-ttl{
    margin-top: 0;
    display: inline-block;
}
.modalPicture-modalPicture-action .link-copy {
    float: right;
}
.modalPicture-modalPicture-action .link-copy a {
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    border: 1px solid #e9e7e1;
    text-align: center;
    background-color: #fefefe;
    font-size: 11px;
    margin-left: 10px;
    font-weight: bold;
}
.modalPicture-modalPicture-action-right .link-copy a:hover,
.modalPicture-modalPicture-action-right .link-copy.hover a{
    color: #fff;
    background-color: #356fb7;
    border-color: #356fb7;
    cursor: pointer;
}
.modalPicture-ttl{
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.modalPicture-awardttl{
    color: #ab8810;
    margin-top: 10px;
}
.modalPicture-summary{
    margin-top: 20px;
    color: #767676;
}
.modalPicture-pictureDetails{
}
.modalPicture-team{
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid #e7e6e1;
    padding-bottom: 10px;
}
.modalPicture-team .modalPicture-team-icon{
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    vertical-align: top;
    margin-right: 8px;
}
.modalPicture-team .modalPicture-team-icon img{
    text-align: center;
    max-width: 100%;
    height: auto;
}
.modalPicture-team .modalPicture-team-name{
    display: inline-block;
    vertical-align: top;
    max-width: 520px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    padding-top: 13px;
}
.modalPicture-profile{
}
.modalPicture-profile .pictureDetails__authorListInner{
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}
.modalPicture-profile .profile-names{
    display:table-cell;
    width: 100%;
    padding: 5px 5px 5px 10px;
    vertical-align: middle;
}
.modalPicture-profile .profile-name-job{
    width: 100%;
    font-size: 13px;
    margin-bottom: 5px;
    padding-left: 3px;
    color: #767676;
}
.modalPicture-profile .pictureDetails__authorListInner{
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}
.modalPicture-profile .pictureDetails__authorListInner:last-child{
  margin-bottom: 0;
}
.modalPicture-profile .profile-name-thumb{
    display: block;
    float: left;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    margin-right: 10px;
    overflow: hidden;
}
.modalPicture-profile .profile-name-thumb img{
    vertical-align: top;
    width: 100%;
}
.modalPicture-profile .profile-namettl{
    display: block;
    width: 540px;
    font-size: 11px;
    color: #767676;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    font-style: italic;
    min-height: 9px;
}
.modalPicture-profile .profile-name{
    display: block;
    font-size: 16px;
    color: #4a4a4a;
    margin-top: -4px;
}
.modalPicture-profile .profile-name a{
    display: block;
    max-width: 540px;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.modalPicture-profile .profile-btnbox{
    display: table-cell;
    vertical-align: middle;
    width: 117px;
}
.modalPicture-profile .profile-btnbox-btn{
    background-color: #ffd800;
    border-radius: 5px;
    display: inline-block;
    height: 30px;
    text-align: center;
    width: 110px;
    font-size: 1rem;
    color: #635b2e;
    line-height: 30px;
    float: right;
}
.modalPicture-profile .profile-btnbox-btn:hover{
    opacity: 0.8;
}
.modalPicture-profile .profile-cont{
    width: 87px;
    border-right: 1px solid #e7e6e1;
    display:table-cell;
    padding: 5px;
    font-size: 11px;
}
.modalPicture-profile .profile-cont-type{
    color: #afafaf;
    display: block;
}
.modalPicture-profile .profile-cont-value{
    color: #97c51a;
    display: block;
    padding: 0 5px;
    font-weight: bold;
    margin-top: 10px;
}
.modalPicture-profile .profile-cont:last-child{
    border-right: none;
}
.modalPicture-link{
    padding: 20px;
    border-top:1px solid #e7e6e1;
}
.modalPicture-link-hd{
    font-size: 11px;
    font-weight: bold;
    color: #767676;
}
.modalPicture-linkbox{
    margin-top: 10px;
    overflow: hidden;
}
.modalPicture-linkbox .link-url{
    display: block;
    float: left;
    width: 510px;
    height: 30px;
    border:1px solid #e0ebf6;
    border-radius: 5px;
    padding: 8px;
    background-color: #f5f7f9;
}
.modalPicture-linkbox .link-copy{
    float: right;
}
.modalPicture-linkbox .link-copy a{
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    border:1px solid #e9e7e1;
    text-align: center;
    background-color: #fefefe;
    font-size: 11px;
    margin-left: 10px;
}
.modalPicture-comment{
    padding: 20px 20px 40px;
    border-top: 1px solid #e7e6e1;
}
.modalBook-comment-hd{
    font-weight: bold;
    color: #767676;
}
.modalBook-commentpost{
    margin: 10px auto 40px;
    display: table;
}
.modalBook-commentpost .commentpost-thumb{
    text-align: center;
    display: table-cell;
    vertical-align: top;
    padding-top: 10px;
}
.modalBook-commentpost .commentpost-thumb .thumb-wrap{
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 23px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    display: block;
    height: 46px;
    overflow: hidden;
    text-align: center;
    width: 46px;
}
.modalBook-commentpost .commentpost-thumb img{
    text-align: center;
    vertical-align: top;
    width: 100%;
}
.modalBook-commentpost .commentpost-right{
    width: 550px;
    padding-left: 10px;
    display: table-cell;
}

.modalBook-commentpost .commentpost-textbox{
    border:none;
    background-color: #fff;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    resize: vertical;
    min-height: 48px;
    max-height: 200px;
    margin-top: 5px;
}
.modalBook-commentpost .commentpost-texterror{
    margin: 10px 0;
}
.modalBook-commentpost .commentpost-type input{
    margin-right: 5px;
}
.modalBook-commentpost-btm{
    margin-top: 5px;
}
.modalBook-commentpost-btm .sns-post{
    font-size: 0;
    text-align: center;
}
.modalBook-commentpost-btm .sns-post.disabled{
    opacity: 0.4;
}
.modalBook-commentpost-btm .sns-post li{
    font-size: 13px;
    display: inline-block;
}
.modalBook-commentpost-btm .sns-post .sns-post-ttl{
    width: 55px;
    font-size: 11px;
}
.modalBook-commentpost-btm .sns-post .sns-post-btn{
    width: 100px;
    margin-left: 10px;
}
.modalBook-commentpost-btm .sns-post .sns-post-btn a{
    display: block;
    border:1px solid #d1e89b;
    color: #7a9e16;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}
.modalBook-commentpost-btm .sns-post .sns-post-btn a:hover{
    border:1px solid #97c51a;
    background-color: #97c51a;
    color: #fff;
}
.modalBook-commentpost-btm .sns-post .sns-post-btn.disabled a:hover{
    border:1px solid #d1e89b;
    background-color: #fff;
    color: #97c51a;
    cursor: default;
}
.modalBook-commentpost-btm .sns-post.disabled .sns-post-btn a:hover{
    border:1px solid #d1e89b;
    background-color: #fff;
    color: #97c51a;
    cursor: default;
}
.modalPicture-commentlist{
    margin-top: 10px;
}
.modalPicture-commentlist-nocomment{
    text-align: center;
    width: 100%;
    margin-top: 50px;
}
.modalPicture-commentlist-user{
    margin-top: 10px;
    overflow: hidden;
    min-height: 57px;
}
.modalPicture-commentlist .commentlist-thumb{
    text-align: center;
    float: left;
    vertical-align: top;
    padding-top: 10px;
    margin-left: 2px;
}
.modalPicture-commentlist .commentlist-thumb .thumb-wrap{
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 23px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.30);
    background-color: #fff;
    text-align: center;
    display: block;
    border:2px solid #fff;
}
.modalPicture-commentlist .commentlist-thumb img{
    width: 100%;
    vertical-align: top;
    text-align: center;
}
.modalPicture-commentlist .commentlist-txtbox{
    width: 550px;
    padding-left: 10px;
    float: right;
}
.modalPicture-commentlist .commentlist-name{
    display: inline-block;
    font-size: 11px;
}
.modalPicture-commentlist .commentlist-time{
    display: inline-block;
    margin-left: 10px;
    color: #767676;
    font-size: 11px;
}
.modalPicture-commentlist .commentlist-comment{
    border:1px solid #bfd6e5;
    background-color: #f9fcfd;
    padding: 5px 10px;
    width: 89%;
    border-radius: 5px;
    resize: vertical;
    margin-top: 5px;
    position: relative;
}
.modalPicture-commentlist .commentlist-comment:before{
    border-color: transparent #f9fcfd transparent transparent;
    border-style: solid;
    border-width: 5px 10px 5px 0;
    content: "";
    display: block;
    height: 0;
    left: -9px;
    margin-top: -2px;
    position: absolute;
    top: 13px;
    width: 0;
    z-index: 2;
}
.modalPicture-commentlist .commentlist-comment:after{
    border-color: transparent #bfd6e5 transparent transparent;
    border-style: solid;
    border-width: 6px 11px 6px 0;
    content: "";
    display: block;
    height: 0;
    left: -11px;
    margin-top: -7px;
    position: absolute;
    top: 17px;
    width: 0;
    z-index: 1;
}
.modalPicture-commentlist-auther{
    margin-top: 10px;
    overflow: hidden;
    min-height: 57px;
}
.modalPicture-commentlist-auther .commentlist-thumb{
    float: right;
    margin-right: 2px;
}
.modalPicture-commentlist-auther .commentlist-txtbox {
    padding-left: 0;
    padding-right: 10px;
}
.modalPicture-commentlist-auther .commentlist-txtbox .commentlist-txtbox-spwrap{
    text-align: right;
}
.modalPicture-commentlist-auther .commentlist-txtbox .commentlist-comment{
    background-color: #f9fdf9;
    border-color: #ddecd1;
    float: right;
}
.modalPicture-commentlist-auther .commentlist-txtbox .commentlist-comment:before{
  border: 10px solid transparent;
  border-left: 10px solid #f9fdf9;
  border-right-width: 5px;
  border-top-width: 5px;
  border-bottom-width: 5px;
  right: -14px;
  left: auto!important;
  margin-top: -2px;
  top: 13px;
}
.modalPicture-commentlist-auther .commentlist-txtbox .commentlist-comment:after{
  border: 11px solid transparent;
  border-left: 11px solid #ddecd1;
  border-right-width: 6px;
  border-top-width: 6px;
  border-bottom-width: 6px;
  right: -17px;
  left: auto!important;
  margin-top: -7px;
  top: 17px;
}
.modalPicture-relevant{
  width: 320px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #f8f8f8;
}
.modalPicture-relevant-tagbox{
    padding: 20px 10px;
    border-bottom: 1px solid #eaeaea;
}
.modalPicture-relevant-tag-hd{
    color: #767676;
    font-size: 11px;
    font-weight: bold;
}
.modalPicture-relevant-tagbox-inner{
    margin-top: 10px;
}
.modalPicture-relevant-tagbox .product-tag{
    background-color: #eef6ff;
    border: 1px solid #356fb7;
    border-radius: 20px;
    color: #356fb7;
    display: inline-block;
    margin: 0 5px 10px 0;
    padding: 3px 10px;
    word-break: break-all;
}
.modalPicture-relevant-tagbox .product-tag:hover{
    cursor: pointer;
    opacity: 0.8;
}
.modalPicture-relevant-relative{
    width: 320px;
    padding: 10px 0 20px 10px;
}
.modalPicture-relevant-relative-hd{
    color: #767676;
    font-size: 11px;
    font-weight: bold;
}
.modalPicture-relevant-relativelist--ttl{
  font-weight: bold;
  border-bottom:1px solid #e0e0e0;
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  color: #5e5847;
}
.modalPicture-relevant-relativelist--ttl-icon{
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 18px;
  width: 36px;
  height: 36px;
  margin-right: 5px;
  box-shadow: 0 0 0 1px #e6e6e6;
  vertical-align: middle;
  overflow: hidden;
}
.modalPicture-relevant-relativelist--ttl-icon img{
  width: 100%;
}
.modalPicture-relevant-relativelist--ttl span{
  margin-right: 3px;
}
.modalPicture-relevant-relativelist--ttl span a{
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
  .modalPicture-relevant-relativelist--ad{
  margin-top: 10px;
  margin-right: 10px;
  border-top:1px solid #e0e0e0;
  padding-top: 10px;
  text-align: center;
}
.modalPicture-relevant-relativelistWrap{
  max-height: 420px;
  padding-right: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.modalPicture-relevant-relativelist{
  font-size: 0;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: balance;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: avoided;
  column-count: 2;
  column-gap: 15px;
  column-fill: balance;
}
.modalPicture-relevant-relativelist li {
  display: inline-block;
  margin: 0 2px 10px;
  font-size: 13px;
}
.modalPicture-relevant-relativelist a {
  display: inline-block;
  width: 140px;
  height: auto;
  max-height: 480px;
  overflow: hidden;
  text-align: center;
  border:1px solid #ebebeb;
}
.modalPicture-relevant-relativelist a:hover{
  opacity: 0.8;
}
.modalPicture-relevant-relativelist a img{
  width: 100%;
  height: auto;
  vertical-align: top;
}
.modalPicture-relevant-relativelist a.current {
  box-shadow: 0 0 5px 0 #356fb2;
}
.modalPicture-relevant-relativelist-moreButtonArea {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
}
.modalPicture-relevant-relativelist-moreButtonArea:before {
  content: "";
  display: block;
  background: linear-gradient(transparent 0%,#f8f8f8 50%);
  height: 20px;
  margin-top: -20px;
}
.modalPicture-relevant-relativelist-moreButtonArea a {
  padding: 5px 20px;
  display: inline-block;
  background: #4e4e4e;
  border-radius: 20px;
  color: #fff;
}
.modalPicture-relevant-relativelist-moreButtonArea a:hover {
  opacity: .8;
}
.modalPicture-nav{
  float: right;
  width: 55px;
  margin-left: 12px;
}
.modalPicture-nav-btn{
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  position: relative;
}
.modalPicture-nav-btn span{
  border-radius: 10px;
  background: -moz-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* FF3.6+ */
  background: -webkit-gradient(linear, 90deg, color-stop(0%, #dcdcdc), color-stop(100%, #ffffff));/* Chrome,Safari4+ */
  background: -webkit-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* Opera 11.10+ */
  background: -ms-linear-gradient(90deg, #dcdcdc 0%, #ffffff 100%);/* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#ffffff', GradientType='0'); /* for IE */
  background: linear-gradient(0deg, #dcdcdc 0%, #ffffff 100%);/* W3C */
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  left: 0;
  top:0;
}
.modalPicture-nav-btn span:hover{
    cursor: pointer;
    opacity: 0.8;
}
.modalPicture-nav-btn.prev{
    margin-top: 10px;
}
.modalPicture-nav-btn span:before{
    font-family:"icomoon";
    display: block;
    padding: 15px 0 2px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 180%;
    color: #3e3e3e;
    text-align: center;
    width: 50px;
    line-height: 18px;
}
.modalPicture-nav-btn.next span:before{
    content: "\e606";
}
.modalPicture-nav-btn.prev span:before{
    content: "\e604";
}

/*================================================================
   modalPicture-info　イラストモーダル、イラスト詳細　コメントエリア
================================================================*/
.modalPicture-info{
    padding: 10px 20px;
    border-bottom: 1px solid #e7e6e1;
}
.modalPicture-ttl{
    font-size: 20px;
    font-weight: normal;
    width: 100%;
    font-style: normal;
    color: #5e5847;
}
.modalPicture-awardttl{
    color: #ab8810;
    margin-top: 0;
}
.modalPicture-summary{
    margin-top: 10px;
    color: #767676;
}
.modalPicture-info .summary-translator {
  border-top:1px solid #DDE5EB;
  width: 100%;
  margin:10px auto 0;
  padding-top: 10px;
}
.modalPicture-info .summary-translator--btn{
  display: block;
}
.modalPicture-info .summary-translator--btn:hover{
  cursor: pointer;
}
.modalPicture-info .summary-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;
}
.modalPicture-info .summary-translator--txt{
  display: none;
}
.modalPicture-info .summary-translator--txt.show{
  display: block;
}

/*
@media screen and (max-width: 640px) {
    .modalScroll-wrap{
        width: 98%;
    }
    .modalPicture{
        width: 100%;
    }
    .modalPicture-inner{
        width: 100%;
    }
    .modalPicture-details{
        width: auto;
    }
    .modalPicture-relevant{
        width: auto;
    }
    .modalPicture-image{
        width: 100%;
    }
    .modalPicture-main{
        padding-left: 0 10px 0;
    }
}
*/

/*--------------------
 イラストビューア 
--------------------*/
.mdbnPictureViewer{
    background: rgba(0,0,0,0.95);
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
  }
  .mdbnPictureViewer.-original{
    overflow: scroll;
  }
  .mdbnPictureViewer__inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;height: 100%;
    min-height: 100%;
    cursor: zoom-in;
  }
  .mdbnPictureViewer.-original .mdbnPictureViewer__inner{
    display: inline-flex;
    height: auto;
    cursor: zoom-out;
  }
  .mdbnPictureViewer__inner img{
    background-color: #fff;
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
  }
  .mdbnPictureViewer.-original .mdbnPictureViewer__inner img{
    max-width: none;
  }
  .mdbnPictureViewer .mdbnPictureViewer__iconWrapper{
    z-index: 1001;
    position: fixed;
    top: 10px;
    right: 10px;
  }
  .mdbnPictureViewer .iconfont{
    display: block;
    border: 1px solid #fff;
    border-radius: 5px;
    background: rgba(255,255,255,0.8);
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
  }
  .mdbnPictureViewer .iconfont.icon-star01.-faved{
    background: rgba(255,255,255,0.9);
    color: #fbaa47;
    }
  .mdbnPictureViewer .iconfont.icon-fullwindow01:before{
    content: "\e60a";
  }
  .mdbnPictureViewer.-original .iconfont.icon-fullwindow01:before{
    content: "\e60b";
  }
  
/*================
 language
 ================*/


body.pagelang-en .picturelist-nav-menu-period .period-btn{
  width: auto;
  padding: 0 10px;
}

/* サジェスト */
.ac_results {
    border: 1px solid #ece9e5;
    background-color: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    z-index: 1000000;
    display: none;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.ac_results li {
    width: 500px;
    padding: 10px;
    white-space: nowrap;
    color: #8b847a;
    text-align: left;
    font-size: 139%;
    overflow: hidden;
}
.ac_results.large li {
    width: 560px;
}
.ac_results.small li{
    width: 300px;
    padding: 8px 10px;
    font-size: 116%;
}

.ac_over {
    cursor: pointer;
    background-color: #bbdd6c;
}

.ac_match {
    text-decoration: underline;
    color: black;
}