@charset "utf-8";
/*
-------------------------------------------------- */
/* ========================================
pc
======================================== */
/*
-------------------------------------------------- */
/* hide
-------------------------------------------------- */
i.icon-email {
  display: none;
}
.femme211 {
  display: none;
}
/*
-------------------------------------------------- */
/* font-family
-------------------------------------------------- */
html, body, td, th, input, button, textarea, select {
  font-family: "メイリオ", Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Osaka, Roboto, "Droid Sans", "sans-serif";
  text-rendering: optimizelegibility;
}
/*
-------------------------------------------------- */
/* common
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}
a img {
  border: none;
}
a {
  color: #3198bd;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  color: #333;
  text-decoration: underline;
}
dl, dt, dd {
  margin: 0;
  padding: 0;
}
.placeholder {
  color: #CCC;
}
::-webkit-input-placeholder {
  color: #CCC;
}
:-moz-placeholder {
  color: #CCC;
}
::-moz-placeholder {
  color: #CCC;
}
:-ms-input-placeholder {
  color: #CCC;
}
.error {
  color: #C00;
}
.radius {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
ul.layout {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: box;
  display: flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-pack: justify; /* IE10 */
  justify-content: space-between;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
  max-width: 100%;
  width: 100%;
}
ul.layout > li {
  margin: 0;
  padding: 0;
}
ul.layout > li.left-col {
  width: 250px;
}
ul.layout > li.center-col {
  width: 760px;
}
ul.layout > li.right-col {
  background: #DDD;
  width: 250px;
}
.figure {
  font-size: 0;
}
.figure a {
  display: inline-block;
}
/*
-------------------------------------------------- */
/* buttons
-------------------------------------------------- */
.btn {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}
.btn:hover {
  opacity: 0.80;
}
.btn-primary, a.btn-primary {
  background-color: rgba(42, 128, 201, 1.00);
  color: #FFFFFF;
}
.btn-secondary, a.btn-secondary {
  background-color: rgba(153, 153, 153, 1.00);
  color: #FFFFFF;
}
.btn-dark, a.btn-dark {
  background-color: rgba(51, 51, 51, 1.00);
  color: #FFFFFF;
}
.btn-lg {
  line-height: 3.0em;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
.btn-sm {
  line-height: 2.0em;
  text-align: center;
  vertical-align: middle;
  width: 220px;
}
/*
-------------------------------------------------- */
/* utilities
-------------------------------------------------- */
.float-right {
  float: right;
}
.mt-10 {
  margin-top: 10px;
}
/*
-------------------------------------------------- */
/* pc-menu
-------------------------------------------------- */
.profile-badge {
  margin: 20px auto;
  text-align: center;
}
.profile-badge dd {
  font-size: 0;
}
.profile-badge dd a {
  font-size: 16px;
}
.profile-badge-photo {
  height: auto;
  max-width: 120px;
  width: 100%;
}
.profile-badge-name, a.profile-badge-name {
  color: #000000;
  display: inline-block;
  line-height: 1.0em;
  max-width: 100%;
  overflow: hidden;
  padding: 10px 0 10px;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-menu {
  padding: 0 0 20px;
}
.pc-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-menu ul > li {
  border-bottom: solid 1px #E5E5E5;
}
.pc-menu a {
  text-decoration: none;
}
.pc-menu .darkBtn, .pc-menu .plusBtn, .pc-menu .subBtn, .pc-menu .nameBtn, .pc-menu .lightBtn {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
  cursor: pointer;
  display: block;
  height: 44px;
  line-height: 44px;
  padding: 0 20px;
  vertical-align: middle;
}
.pc-menu .nameBtn {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-menu li:first-child .darkBtn .myName {
  color: #FF0;
  display: inline-block;
  width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-menu li:first-child .myPage {
  display: inline-block;
  float: right;
  font-size: 12px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-menu .darkBtn {
  color: #000000;
}
.pc-menu li:first-child .darkBtn {}
.pc-menu .darkBtn > i.navNums {
  font-size: 12px;
  font-style: normal;
}
.pc-menu .plusBtn i {
  line-height: 43px;
}
.pc-menu .plusBtn .subMenu {
  display: none;
  margin: -44px 0 0 230px;
  position: absolute;
  z-index: 9;
}
.pc-menu .plusBtn .subMenu i.icon-pencil {
  float: none;
}
.pc-menu .plusBtn .subMenu > li:first-child {}
.pc-menu .plusBtn .subBtn {
  background-color: #FFF;
}
.pc-menu .plusBtn:hover .subMenu {
  display: block;
}
.pc-menu .darkBtn:hover, .pc-menu li:first-child .darkBtn:hover, .pc-menu .plusBtn:hover, .pc-menu .subBtn:hover, .pc-menu .nameBtn:hover, .pc-menu .lightBtn:hover {
  color: #BF89DF;
}
.pc-menu .lightBtn {
  border-top: solid 1px #FFF;
  border-bottom: solid 1px #D8D8D8;
}
.pc-menu .promotion {
  font-size: 0;
}
.pc-menu .promotion dd {
  margin: 0 0 10px;
  text-align: center;
}
/*
-------------------------------------------------- */
/* pc-menu > monrooUpdates
-------------------------------------------------- */
#monrooUpdates {
  margin: 10px 0;
}
#monrooUpdates h2 {
  background-color: #EEE;
  border: solid 1px #DDD;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 8px;
}
#monrooUpdates .girl img {
  border: solid 1px #F60;
}
#monrooUpdates .boy img {
  border: solid 1px #06C;
}
#monrooUpdates .girl img, #monrooUpdates .boy img {
  height: 30px;
}
#monrooUpdates ul, #monrooUpdates dt, #monrooUpdates dd {
  font-size: 12px;
}
#monrooUpdates .text-link-diary {
  color: green;
}
#monrooUpdates .text-link-picture {
  color: fuchsia;
}
#monrooUpdates .text-link-video {
  color: blue;
}
#monrooUpdates a:hover {
  text-decoration: underline;
}
/*
-------------------------------------------------- */
/* pc-menu > monrooSlot
-------------------------------------------------- */
#monrooSlot {
  position: relative;
  width: 100%;
  height: 150px;
  background: url(../img/common/slotBG.png);
}
#monrooSlot .indicator {
  position: absolute;
  top: 55px;
  left: 20px;
  display: block;
  vertical-align: middle;
  width: 112px;
  height: 20px;
  line-height: 20px;
}
.indicator .data {
  display: inline-block;
  width: auto;
  height: 20px;
  font-size: 0.8em;
}
.indicator .data .num {
  margin: 0 0.1em;
  font-size: 1.7em;
  line-height: 20px;
}
.indicator a {
  color: #333;
}
.indicator a:hover {
  color: #3198bd;
}
#monrooSlot .link {
  position: absolute;
  top: 75px;
  left: 20px;
  display: block;
  width: 112px;
  height: 18px;
  font-size: 0.95em;
  line-height: 18px;
  text-align: center;
}
#monrooSlot .startBtn {
  position: absolute;
  top: 107px;
  left: 20px;
  width: 112px;
  height: 26px;
  line-height: 26px;
}
#monrooSlot .blackBtn {
  background: #2f2f2f;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#2f2f2f'); /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* Opera */
  background-image: -o-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c4c4c), color-stop(1, #2f2f2f)); /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #4c4c4c 0%, #2f2f2f 100%);
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 0.9em;
  padding: 0;
  text-align: center;
  width: 112px;
}
#monrooSlot .blackBtn:hover {
  background: rgb(49, 152, 189);
  color: #fff;
  text-decoration: none
}
/*
-------------------------------------------------- */
/* extra
-------------------------------------------------- */
.extra h2 {
  border-bottom: solid 1px #EEEEEE;
  font-size: 14px;
  padding: 5px 8px;
}
.extra h2 img {
  margin: 0 5px 0 0;
  vertical-align: middle;
}
.extra ul {
  border-bottom: solid 1px #EEEEEE;
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.extra .note {
  color: #333;
  font-size: 11px;
  line-height: 1.8em;
  margin: 0;
  padding: 0;
  text-indent: 8px;
}
.extra .txt {
  font-size: 12px;
  margin: 0;
  padding: 8px;
  text-align: justify;
}
.extra .bonus {
  color: #C00;
}
.extra .girl img, .extra .boy img {
  height: 30px;
}
.extra .girl img {
  border: solid 1px #F60;
}
.extra .boy img {
  border: solid 1px #06C;
}
.extra .realCount {
  background: #F4F4F4;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 0;
  text-align: center;
}
.extra .realNum {
  color: #004d99;
  font-size: 24px;
  font-weight: normal;
}
.tweets, .myEroine, .realTime, .onlineUsers {
  margin: 0;
  padding: 0;
}
.extra ul.postTweet {
  border: none;
  font-size: 0;
  height: 44px;
  line-height: 44px;
  padding: 0 5px;
  vertical-align: middle;
}
.extra ul.postTweet li {
  font-size: 14px;
  display: inline-block;
  width: 30%;
}
.extra ul.postTweet li:first-child {
  width: 70%;
}
.extra .postTweet input[type="text"], .extra .userTweet {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: solid 1px #999;
  border-right: none;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  text-indent: 5px;
  vertical-align: middle;
  width: 100%;
}
.extra .tweetBtn {
  background: #2f2f2f;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#2f2f2f'); /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* Opera */
  background-image: -o-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4c4c4c), color-stop(1, #2f2f2f)); /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #4c4c4c 0%, #2f2f2f 100%); /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #4c4c4c 0%, #2f2f2f 100%);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-right-radius: 5px;
  border: solid 1px #333;
  color: #FFF;
  cursor: pointer;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
.extra .tweetBtn:hover {
  background: #3198bd;
  border: solid 1px #006699;
  color: #FF0;
}
.tweetList, .myEroineList, .realTimeList, .onlineUserList {
  background: #FFF;
  border: solid 1px #DDD;
  border-top: none;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}
.myEroineList, .realTimeList {
  height: 220px;
}
ul.post {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: box;
  display: flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-pack: justify; /* IE10 */
  justify-content: space-between;
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
  max-width: 100%;
  width: 100%;
}
ul.post li {
  padding: 8px 0;
}
ul.post li.box-left {
  text-align: center;
  width: 20%;
}
ul.post li.box-right {
  width: 80%;
}
ul.post li.box-left dl {
  padding: 0 5px;
}
ul.post li.box-right dl {
  padding: 0 5px 0 0;
}
.post-name {
  line-height: 1.3em;
}
.post-name a {
  display: inline-block;
  max-width: 60%;
  overflow: hidden;
  text-align: justify;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
}
.post-name time {
  font-size: 11px;
  float: right;
}
.post-comment {
  text-align: justify;
}
.post-comment a {
  color: #333;
  font-size: 11px;
}
.post-comment a.chat-icon {
  float: right;
  font-size: 14px;
  line-height: 14px;
}
.post-contact {
  font-size: 14px;
  text-align: right;
}
.post-contact a {
  margin-left: 5px;
}
.extra .onlineUsers .userCounts {
  border: none;
  line-height: 1.8em;
  padding: 8px 8px 0;
}
.extra .onlineUsers .countItem {
  display: inline-block;
  width: 70px;
}
.extra .onlineUsers .userCounts a {
  margin: 0 8px 0 0;
}
.extra .textNav {
  border: none;
  padding: 8px;
}
.extra .textNav li {
  display: inline;
  margin: 0 8px 0 0;
}
.extra .textNav li.on a {
  background: #3198bd;
  color: #FFF;
  padding: 0 5px;
}
.extra .onlinePager {
  font-size: 14px;
  padding: 5px 8px;
}
.extra .onlinePager a {
  margin: 0 8px 0 0;
}
/* 
-------------------------------------------------- */
/* hide tracking image from chrome
-------------------------------------------------- */
.tracker {
  font-size: 0;
}
.tracker img {
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
}
/*
-------------------------------------------------- */
/* ========================================
end of pc
======================================== */
/* ========================================
mobile
======================================== */
/*
-------------------------------------------------- */
/* tablet (landscape)
-------------------------------------------------- */
@media only screen and (max-width: 1112px) {
  /*
-------------------------------------------------- */
  iframe {
    -webkit-overflow-scrolling: touch !important;
    overflow: auto !important;
  }
  /*
-------------------------------------------------- */
  /* mobile navigation
-------------------------------------------------- */
  .jPanelMenu header.main {
    background: #000;
    border-bottom: #000;
  }
  .jPanelMenu header.main .btn-header {
    background: none;
    border: none;
  }
  .span_2_of_6, .span_4_of_6 {
    text-align: center;
  }
  #jPanelMenu-menu .searchArea {
    padding: 10px 15px 0;
  }
  #jPanelMenu-menu .searchArea form {
    padding: 0;
    width: 100%;
  }
  #jPanelMenu-menu .searchArea #searchInput {
    line-height: 30px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }
  #jPanelMenu-menu li a {
    text-indent: 15px;
  }
  #jPanelMenu-menu li a i.user_points, #jPanelMenu-menu li a i.mail_num, #jPanelMenu-menu li a i.unread_ine_num {
    font-size: 16px;
    font-style: normal;
  }
  /*
-------------------------------------------------- */
  /* page
-------------------------------------------------- */
  ul.layout {
    display: block;
  }
  ul.layout > li.left-col {
    display: none;
  }
  ul.layout > li.center-col {
    background: #9ea8ac;
    width: 100%;
  }
  ul.layout > li.right-col {
    background: #9ea8ac;
    width: 100%;
  }
  .extra {
    background: #DDD;
    margin: 0 auto;
    padding: 0 0 10px;
    width: 760px;
  }
  .tweets, .myEroine, .realTime, .onlineUsers {
    padding: 0 10px;
  }
  .extra h2 {
    padding: 5px 0;
  }
  .extra .note {
    text-indent: inherit;
  }
  .extra .txt {
    padding: 0 0 8px;
  }
  .extra ul.postTweet {
    padding: 0;
  }
  ul.post li.box-right dl {
    padding: 0 10px 0 0;
  }
  /* 
-------------------------------------------------- */
  /* hide tracking image from chrome
-------------------------------------------------- */
  .tracker {
    display: none;
  }
  /*
-------------------------------------------------- */
  /* tablet (portrait)
-------------------------------------------------- */
  @media only screen and (max-width: 960px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (landscape-iphone6plus=736px)
-------------------------------------------------- */
  @media only screen and (max-width: 736px) {
    /*
-------------------------------------------------- */
    .extra {
      width: 100%;
    }
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (landscape-iphone6=667px)
-------------------------------------------------- */
  @media only screen and (max-width: 667px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (landscape-iphone5=568px)
-------------------------------------------------- */
  @media only screen and (max-width: 568px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (landscape-iphone4=480px)
-------------------------------------------------- */
  @media only screen and (max-width: 480px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (portrait-iphone6plus=414px)
-------------------------------------------------- */
  @media only screen and (max-width: 414px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (portrait-iphone6=375px)
-------------------------------------------------- */
  @media only screen and (max-width: 375px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* smartphones (portrait-iphone4/5=320px)
-------------------------------------------------- */
  @media only screen and (max-width: 320px) {
    /*
-------------------------------------------------- */
    /*
-------------------------------------------------- */
  }
  /*
-------------------------------------------------- */
  /* ========================================
end of mobile
======================================== */