body {
  background-color: #202124;
  color: #bdc1c6;
  font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  margin: 0px;
  height: 100%;
  text-align: center;
  
  overflow-x:  auto;
  white-space: nowrap; /*  */
}

a {
  color: #99b6e8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:link {
  color: #99b6e8;
}

a:visited {
  color: #B384FF;
}

ul {
  list-style-type: none;
}

span.inline-block {
  display: inline-block;
}

a.btn {
  text-decoration: none;
}

img.btn {
  width:  15px;
  height: 15px;
  vertical-align: middle;
}

img.lnk_btn {
  width:  23px;
  height: 23px;
  vertical-align: middle;
}

img.plyingdot {
  width:  4px;
  height: 4px;
  vertical-align: middle;
}

img.swtch {
  height: 16px;
  vertical-align: middle;
}

img.share_btn {
  height: 20px;
}

.plyr {
  display: inline-block;
  width:   640px;
  /* margin: 0px auto; */
}

.swtch {
  text-decoration: none;
}

.tooltip_pos {
  position: relative;
  z-index:         1;
}

.tooltip {
  
  position: absolute;
  left:          -3%;
  bottom:       20px;
  transform: translateX(-50%);
  
  display: inline-block;
  padding: 5px;
  text-align: start;
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1.3; /* line space */
  background: #333;
  color: #bdc1c6;
  border-radius: 3px;
  
  transition: all 0.3s ease-in; /* anm */
}

/*
 * html body construction
 */

:root {
  --hdr-h: 287px; /* 280px; 370px; */
  
  --lst-w: 800px;
}

.logo {
  font-family: 'Paytone One', sans-serif;
  font-size:   2.4rem;
  margin:      0px;
}

.logo a {
  text-decoration: none;
  color: #84DCE9;
}

.logo a:link {
  color: #84DCE9;
}

.logo a:visited {
  color: #84DCE9;
}

.header {
  background-color: #202124;
  position: fixed;
  width:    100%;
  
  /*
  display: inline-block;
  overflow-x:  auto;
  white-space: nowrap;
  overflow-y:  hidden;
   */
}

.hdr_lr {
  display: inline-block;
  /* width: calc((100% - (640px + 40px)) / 2); /*  */
  vertical-align: top;
  font-size: 0.8rem;
  
  white-space: normal; /*  */
}

.hdr_l {
  text-align: left;
}

.cntry {
  display: inline-block;
  width:   18px;
}

.grp {
  display: inline-block;
  width:   45px;
}

.cntry_mmbr {
  display: inline-block;
}

.hdr_r {
  text-align: right;
}

.hdr_r div.plyr_size_swtch {
  display: inline-block;
  width:   15%;
  
  text-align: left;
}

.hdr_r div.help {
  display: inline-block;
  width:   80%;
  
  text-align: right;
}

img.srch_icn {
  width:  18px;
  vertical-align: middle;
  margin: 0px 4px;
}

input[type="search"]#flt_bar {
  width:            750px;
  background-color: #1a1c21;
  border-style:     solid;
  border-width:       1px;
  border-radius:      4px;
  border-color:     blueviolet;
  padding-left:      10px;
  color:            #bdc1c6;
  font-size:        0.9rem;
}

input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  content: url("/holo/img/input-cancel.png");
  height :       13px;
  width  :       13px;
  cursor :       pointer;
  padding-right:  4px;
}

::placeholder {
  color: gray;
}

div.body_hdr_space {
  height : var(--hdr-h);
}

div.body_lr {
  display: inline-block;
  width:   220px;
  /* width: calc((100% - (var(--lst-w) + 40px)) / 2); /*  */
  
  /* padding-top: var(--hdr-h); /*  */
  margin:    16px 0px;
  font-size: 0.8rem;
  
  vertical-align: top;
  
  white-space: normal; /*  */
}

div.body_l {
  
  text-align: left;
}

div.body_l div.body_l_fixed {
  position: fixed; /*  */
  width:    220px;
  /* top:      287px; /*  */
  /* left:      20px; /*  */
}

div.body_r {
  text-align: right;
}

div.body_r div.body_r_fixed {
  /* position: fixed; /*  */
  width:    220px;
  
  height:   100%;
  overflow: auto;
}

.video_lst_scrl {
  /* padding-top: var(--hdr-h); /*  */

  text-align: left;
  width: var(--lst-w);

  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;

  /*
  overflow-y: auto;
   */
}

.video_lst_scrl::-webkit-scrollbar {
  display: inline-block;
  /* display:none; */
}

.video_lst {
  /* display: inline-block; */
  display: flex;
  flex-flow: column;
}

.view_cnt {
  display: inline-block;
  width: 85px;
  text-align: right;
  color: #688ccb;
}

.view_cnt_new {
  display: inline-block;
  width: 85px;
  text-align: right;
  color: #5CB095;
}

.title {
  display: inline-block;
  /* margin-left: 15px; /*  */
  font-family: 'Kosugi Maru', sans-serif;
}

.video_li {
  display: block;
  order: 0;
}

div.thmb_frame {
  opacity:         0;        /* はじめは隠しておく     */
  visibility: hidden;        /* はじめは隠しておく     */
  
  position: absolute;             /* 絶対配置               */
  left: calc((100% - var(--lst-w)) / 2); /* 親要素に対する表示位置 */
  transform:
    translateX(-280px)       /* translateX(-200px) */
    translateY(-132px);      /* 親要素に対する表示位置 */
  /* bottom:       24px;        /* 親要素に対する表示位置 */
  z-index:         2;
  /* vertical-align: bottom;    /*                        */
  
  padding:       5px;
  border-radius: 3px;        /* 角丸 */
  background:    #333;
  color:         #bdc1c6;
  
  transition: all 0.25s ease-in; /* anm */
}

.video_li .cdt {
  text-align: right;
  font-size:  0.8rem;
}

.video_li.plying a:link {
  color: #bdc1c6;
}

.video_li span.ply_st {
  display:        inline-block;
  width:          10px;
  text-align:     right;
  vertical-align: middle;
}

span.mmbr_lst_dsp_all {
}

span.mmbr_lst {
  
  opacity:    0;             /*  */
  visibility: hidden;        /*  */
  
  width:   864px;
  padding:   5px;
  
  position:   absolute;      /* 絶対配置               */
  left:    calc((100% - 864px) / 2);
  top:     150px;            /* 親要素に対する表示位置 */
  z-index: 3;
  
  background:    #333;
  color:         #bdc1c6;
  border-radius: 3px;        /* 角丸                   */
  
  vertical-align: top;
  /* text-align: right; */
  
  transition: all 0.25s ease-in; /* anm */
  /* transition-delay: 0.3s;          /* anm */
}

div.mmbr_lst {
  
  height:         600px;
  margin:          5px 0px;
  padding:        20px 0px;
  overflow-y:     auto;
  text-align:     center;
  vertical-align: middle;
  
  position: relative;
}

/*
 * mmbr.html
 */

div.mmbr_gen {
  transition: all 1.5s ease-in; /* anm */
}

div.profile {
  display: inline-block;
  vertical-align: middle;
  
  position: absolute;
  left:     0px;
  top:      0px;
}

img.profile {
  width:  75px;
  height: 75px;
  vertical-align: middle;
}

/*
 * todo > js
div.profile:hover img.profile {
  width:  110px;
  height: 110px;
}
 */

img.icn {
  width:  25px;
  vertical-align: middle;
  
  transition: all 0.70s ease-in-out; /* anm */
}

a.mmbr_name {
  display: none;
}

a.lnk_song_video {
  text-decoration: none;
}

li.video_li_sndtmr{
  
  text-align: center;
}

ul.info_lst{
  margin:       0px;
  padding-left: 0px;
}

/*
 * help.html
 */

.spc {
  display: inline-block;
  text-align: left;
  width: 600px;
  /* width: 500px; */
  
  white-space: normal; /*  */
}