@charset "UTF-8";
/*共通*/

ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

li {
  margin: 4px;
}

.list-box {
  width:  200px;
  height: 200px;
  background: #dcdcdc;

}
.dn,.dr,.dp {
  display:none;

}
.boxurl {
  display:none;
}
/* ------------------------------------------------------------------------- */
/* リスト共通部品 */
.genre {
  line-height    : 44px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 19px;                /* 文字サイズ         */
  position       : relative;            /* 親要素が基点       */
  width          : 200px;               /* ボタンの横幅       */
  background     : transparent;         /* デフォルト背景色   */
  font-weight    : bold;
}

.genre input[type="checkbox"] {
    /* チェックボックス非表示 */
    display        : none;
}

.genre label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 40px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-color   : transparent;
  border-radius  : 15px 15px 0 0;
  text-decoration: none;
}
/* 不活性(ON時) */
.genre input[type="checkbox"]:checked + .IDXDEF {
  background     : #dcdcdc;
}

/* 個別 */
.IDX101 {
  background     : #edef9c;
}
.IDX101 span:after{
  content        : "ミュージック";      /* 表示する文字       */
}

.IDX102 {
  background     : #dd9dbf;
}
.IDX102 span:after{
  content        : "アイドル";          /* 表示する文字       */
}

.IDX103 {
  background     : #cca9ca;
}
.IDX103 span:after{
  content        : "タレント・モデル";  /* 表示する文字       */
}

.IDX104 {
  background     : #c7ddae;
}
.IDX104 span:after{
  content        : "声優・アニメ";      /* 表示する文字       */
}

.IDX105 {
  background     : #d5a87f;
}
.IDX105 span:after{
  content        : "お笑い・トーク";      /* 表示する文字       */
}

.IDX107 {
  background     : #95bfe7;
}

.IDX107 span:after{
  content        : "バーチャル";      /* 表示する文字       */
}

.IDX200 {
  background     : #9dcad0;
}
.IDX200 span:after{
  content        : "フリー";      /* 表示する文字       */
}

.IDXPREMIUM {
  color : #fff352;
  background     : #0f1e36;
}
.IDXPREMIUM span:after{
  color : #fff352;
  content        : "プレミアム";      /* 表示する文字       */
}

.IDXOPEN {
  color : #4169e1;
  background     : #464646;
}
.IDXOPEN span:after{
  color : #4169e1;
  content        : "訪問済";      /* 表示する文字       */
}

/* ------------------------------------------------------------------------- */
/* BOXラベル */
.box {
  padding : 5px;
  display : block;
  position: relative;
  width   : 200px;
  height  : 200px;
  box-sizing: border-box;

}
.ribbonD {
  position: absolute;
  top: 0;
  right: 0;
  width: 85px;
  height: 85px;
  overflow: hidden;
}
.ribbonD span:after {
  content : "★";
}

.IDX200 .ribbonD {
  display:none;
}


.ribbonS {
  display: inline-block;
  position: absolute;
  padding: 4px 0;
  left: -10px;
  top: 10px;
  width: 140px;
  text-align: center;
  font-size: 20px;
  line-height: 16px;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgb(255, 255, 255, 0);
  border-top:    double 2px rgba(255, 255, 255, 0.8);
  border-bottom: double 2px rgba(255, 255, 255, 0.8);
  content        : "";
}

/* BOXプレート */
.boxC {
  margin : 5px;
  width  : 180px;
  height : 180px;
  background: #dcdcdc;
  padding : 0px;
}

.boxroom {
  text-align: left;
  font-size: 12px;
  position:absolute;
  bottom: 0;
  margin-bottom : 15px;
  margin-left : 3px;
  background: rgb(248, 248, 255, 0.75);
  width  : 170px;
  padding : 2px;
  border-radius: 4px;

}

.boxstart {
  position:absolute;
  top: 0;
  margin : 15px 5px;
  border-radius: 4px;
  text-align: left;
  font-size: 12px;
  background: rgb(248, 248, 255, 0.75);
  padding: 2px;
  width : 80px;
}

/* 画像 */
.boximg {
  display: block;
  width : 180px;
}

.boximg img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width : 180px;
  border: 0;
}

/* プレミアム配信 */
.PREMIUM {
  background     : #0f1e36;
}
.PREMIUM .ribbonS {
  background    : #0f1e36;
  box-shadow    : 0 0 0 2px  rgb (255, 243, 82, 0);
  border-top    : double 2px rgba(255, 243, 82, 0.9);
  border-bottom : double 2px rgba(255, 243, 82, 0.9);

}
.PREMIUM span:after {
  color : #fff352;
  content : "★★★";
}
/* 訪問済 */
.OPEN {
  background     : #464646; 
}
.OPEN .ribbonS {
  background    : #464646;
  box-shadow    : 0 0 0 2px  rgb (215, 215, 215, 0);
  border-top    : double 2px rgba(215, 215, 215, 0.9);
  border-bottom : double 2px rgba(215, 215, 215, 0.9);

}
.OPEN span:after {
  color : #4169e1;;
  content : "訪問済";
}
/* ------------------------------------------------------------------------- */