/*----------------------------------------------------------
 Common [ WinSize : xs , sm ]
----------------------------------------------------------*/

* {
    position: relative;
}
.input_style {
    width: 100%;
    background-color: transparent;
    color: rgb(254, 254, 254);
    border: 1px solid rgb(254, 254, 254);
    border: 1px solid rgba(254, 254, 254, 0.5);
    border-radius: 0;
    box-shadow: none;
}
.input_style:focus {
    outline-color: rgb(255, 255, 255);
}
.input_disable {
    border: 0;
    pointer-events: none;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cursor-hand:hover, li input[type=checkbox]:hover {
    cursor: pointer;
}
.margin-clear {
    margin: 0 !important;
}
.padding-clear {
    padding: 0 !important;
}
.space-clear{
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
}
.word-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html, body {
    position: relative;
    width: 100vw !important;
    overflow: hidden;
    color: #FFFFFF;
    font-family: "Meiryo UI", Verdana, sans-serif;
    font-size: 1em;
    background-color: #000;
    height: 100%;
}
.container-fluid {
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
.server-output {
    /* Server Modal Check */
    text-align: right;
    width: 3px;
    height: 3px;
    right: 0;
    bottom: 0;
    position: absolute;
    background-color: black;
}
.row {
    margin: 0;
    clear: both;
}
.clear-both {
    clear: both;
}
.footer_btn_space,
.vol_slider_space{
  position: absolute;
  width: 100%;
  z-index: 1020;
}
nav.navbar {
    background-color: rgb(20, 17, 12);
    background-color: rgba(20, 17, 12, 0.3);
    padding: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
}
.navbar-default {
    border: none;
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
}
img {
    max-width: 100%;
    max-height: 100%;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag: none;
}
.switch_MaxHeight {
    max-height: 25px;
}
.PlusMinus_MaxHeight {
    max-height: 30px;
}
.Volume_xs_style {
    z-index: 3;
}
.hide {
    display: none;
}
.modal {
    position: absolute;
}
.modal-content {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #ffffff;
    border-radius: 0;
    border: 0;
}
div[class^="col-"] {
    height: 100%;
    padding: 0;
}
div.center {
    width: 100%;
    text-align: center;
}
.text-center {
    text-align: center;
}
div[class^="content-"] {
    padding: 0;
    margin-top: 0;
}
.slider.slider-horizontal {
    width: 100%;
}
div.left {
    width: 100%;
    height: 100%;
    left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.center {
    width: 100%;
    height: 100%;
    text-align: center;
}
div.right {
    width: 100%;
    right: 0;
    margin-left: 0;
    margin-right: 0;
}
div.left>a, div.right>a {
    display: block;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
nav li>a {
    color: #FFFFFF !important;
    display: block;
    width: 100%;
    height: 100%;
}
nav li>a>.right {
    width: 50%;
    float: left;
    margin: 0;
}
.list-group-item {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    clear: both;
    border-bottom: 1px solid rgb(254, 254, 254);
    border-bottom: 1px solid rgba(254, 254, 254, 0.5);
    border-radius: 0 !important;
}

.list_hover:hover {
    background-color: rgba(254, 254, 254, 0.2) !important;
}
.btn_click_black:active {
    background-color: rgba(0, 0, 0, 0.15) !important;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
}

header {
    background-color: #000000;
}
header .power {
    position: relative;
    width: 14%;
    height: 14%;
    top: 0;
    left: 0;
}
header a {
    display: block;
    height: 100%;
}
header .bar {
    margin: 0;
    background-color: #000000;
}
header .prt2 {
    background-color: #000000;
    opacity: 0.7;
}
footer {
    position: absolute;
    background-color: #000000;
    bottom: 0;
    right: 0;
    left: 0;
}
footer .slider-selection {
    background-image: linear-gradient(to bottom, RGBA(254, 254, 254, 0) 0, RGBA(254, 254, 254, 0) 100%);
}
footer .slider-track {
    height: 6px !important;
    background-image: linear-gradient(to bottom, RGBA(254, 254, 254, 0.7) 0, RGBA(254, 254, 254, 0.7) 100%);
}
footer .slider-handle {
    margin-top: -6px !important;
    background-image: linear-gradient(to bottom, RGB(254, 254, 254) 0, RGB(254, 254, 254) 100%) !important;
    opacity: 1 !important;
    border-radius: 11px !important;
    width: 11px !important;
}
#Modal_Metro .slider-track {
    height: 6px !important;
    background-image: linear-gradient(to bottom, RGB(254, 254, 254) 0, RGB(254, 254, 254) 100%);
}
#Modal_Metro .slider-handle {
    margin-top: -6px !important;
    background-image: linear-gradient(to bottom, RGB(254, 254, 254) 0, RGB(254, 254, 254) 100%) !important;
    opacity: 1 !important;
    border-radius: 11px !important;
    width: 11px !important;
}
.margin_left_1cell {
    margin-left: calc(100vw / 12 * 1);
}
.modal-back {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.5);
}
.modal-backdrop {
    opacity: 0.4 !important;
    background: rgb(0, 0, 0);
}
.blur {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: calc(100vw / 12 * 2);
    right: calc(100vw / 12 * 2);
    width: calc(100vw / 12 * 8);
    height: 80%;
    /*background-color: rgb(192, 192, 192);*/
    background-color: rgba(170, 170, 170, 0.9);
    background-position: center center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.background_blur {
    -webkit-filter: blur(2px);
}
.modal-title {
    text-align: center;
    padding-left: calc(100vw / 12 * 0.5);
    padding-right: calc(100vw / 12 * 0.5);
}
.modal-line {
    border-bottom: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
}
.modal-main {
    overflow: auto;
    overflow-x: hidden;
    height: 75%;
    padding-left: calc(100vw / 12 * 0.5);
    margin-right: calc(100vw / 12 * 0.5);
}
.modal-btn {
    height: 10%;
    top: 5%;
}
.modal-btn .btn {
    margin: 0;
}
.msg_marker {
    /* 本体からのメッセージ確認用　※後から削除する */
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3);
    width: 0.7%;
    height: 1%;
    float: right;
    top: 4%;
}
.modal-btn-1, .btn-1 {
    text-align: center;
}
.btn-1 .btn {
    float: none;
}
.btn-2 {
    padding-left: calc(100vw / 12 * 0.5);
    padding-right: calc(100vw / 12 * 0.5);
}
.btn-sbmit {
    background-color: #fff;
    color: rgb(35, 108, 154);
    width: calc(100vw / 12 * 2);
    border: 0;
    border-radius: 0;
    float: right;
    margin-right: calc(100vw / 12 / 2);
}
.btn-red {
    background-color: #fff;
    color: rgb(255, 0, 0);
    width: calc(100vw / 12 * 2);
    border: 0;
    border-radius: 0;
}
.btn-bk {
    background-color: #fff;
    color: rgb(0, 0, 0);
    width: calc(100vw / 12 * 2);
    border: 0;
    border-radius: 0;
}
.btn-orange {
    color: white !important;
    background-color: RGB(255, 165, 0);
}
.btn-green {
    color: white !important;
    background-color: RGB(180, 181, 94);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    opacity: 0.4;
}
.prt>div {
    text-align: center;
}
.choose_menu_style {
    background-color: rgb(254, 254, 254);
    background-color: rgba(254, 254, 254, 0.2) !important;
}
.choose_pr_menu_style {
    background-color: rgb(254, 254, 254);
    background-color: rgba(254, 254, 254, 0.3) !important;
}
.btn-ctrl-1 {
    float: none;
}
.modal-btn-2 .btn-ctrl-1 {
    float: left;
    margin-left: calc(100vw / 12 * 0.5);
}
.modal-btn-2 .btn-ctrl-2 {
    float: right;
    margin-right: calc(100vw / 12 * 0.5);
}
.modal-btn-3 .btn-ctrl-1 {
    float: none;
    width: 25%;
    margin-left: 10%;
}
.modal-btn-3 .btn-ctrl-2 {
    float: none;
    margin-left: 2.5%;
    width: 25%;
}
.modal-btn-3 .btn-ctrl-3 {
    float: right;
    width: 25%;
    margin-right: 10%;
}
.menu-edit-img {
    z-index: 1031;
}
.menu-detail {
    position: absolute;
    height: 100%;
    float: left;
    padding: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
    overflow-x: hidden;
    overflow-y: hidden;
}
.touch-scrolling {
    -webkit-overflow-scrolling: touch;
}
li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    text-decoration: none;
}
a, .highlight {
    -webkit-tap-highlight-color: rgba(254, 254, 254, 0.2);
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.list-group {
    margin: 0;
}
.float-r {
    float: right !important;
}
.float-l {
    float: left !important;
}
.center {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.sort-ins-1 {
    padding-left: 2%;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.1);
}
.sort-ins-1:hover {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3);
}
.sort-ins-0:hover {
    background-color: transparent;
    color: transparent;
    cursor: default;
}
li.list_choose {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.1);
}
li.list_choose:hover {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3);
}
.input_invalid {
    color: rgb(255, 0, 0);
}
.editMenu-Next {
    text-align: right;
    float: right;
}
.no_wrap {
    white-space: nowrap;
    overflow: hidden;
}
.btn {
    font-size: 18px;
}
span, h1, h2, h3, h4, h5 {
    color: rgb(255, 255, 255);
}
.font_ss {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}
.font_s {
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
}
.font_m {
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
}
.font_mb {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.font_l {
    font-size: 1.8rem;
    margin: 0;
    padding: 0;
}
.font_lb {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.font_ll {
    font-size: 2rem;
    margin: 0;
    padding: 0;
}
.calling_label_size {
    font-size: 25px;
}
.font_ss, .font_s, .font_m, .font_mb, .font_l, .font_lb, font_ll, calling_label_size {
    white-space: nowrap;
}
.font_red {
    color: rgb(255, 0, 0);
}
.font_white {
    color: rgb(255, 255, 255);
}
.dropdown-toggle {
    background-color: transparent;
    border: 0;
}
.text-disp {
    color: rgb(254, 254, 254);
    color: rgba(254, 254, 254, 0.5) !important;
    cursor: default;
}
.text-disp:hover {
    background-color: transparent;
}
.title-group {
    position: absolute;
    border-bottom: 1px solid rgb(254, 254, 254);
    border-bottom: 1px solid rgba(254, 254, 254, 0.5);
    z-index: 1;
    width: 100%;
}
.img-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.line-height-2cell {
    margin: 0;
}
.line-height-3cell {
    margin: 0;
}
.line-height-4cell {
    margin: 0;
}
.line-height-5cell {
    margin: 0;
}
.line-height-6cell {
    margin: 0;
}
.menu-next-4cell {
    float: right;
    padding-right: calc(100vw / 12 / 3);
    padding-left: 0;
}
.max-height-1_5cell {
    width: auto;
}
.max-height-2cell {
    width: auto;
}
.max-height-3cell {
    width: auto;
}
.max-height-4cell {
    width: auto;
}
.max-height-5cell {
    width: auto;
}
.main-list-group {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.main-free-group {
    padding-left: calc(100vw / 12 * 1 / 2);
    padding-right: calc(100vw / 12 * 1 / 2);
    top: 0;
    height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
}

input {
    margin: 0;
    padding: 0;
    width: inherit;
}
.top-line {
    border-top: 1px solid rgb(255, 255, 255);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.bottom-line {
    border-bottom: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.not-bottom-line {
    border-bottom: 0 solid !important;
}
li span, .title-group span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.table {
    display: table;
    margin: 0;
    width: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
}
.vertical-align-top {
    vertical-align: top;
}
.vertical-align-bottom {
    vertical-align: bottom;
}
.tooltip {
    display: none;
}
header .logo {
    width: auto;
}
.mCSB_inside>.mCSB_container {
    margin-right: 0 !important;
}
.para {
    white-space: normal;
}
.word-break-all {
    word-break: break-all;
}
.list_art_padding {
    padding-left: 5px !important;
}
.link, .link:hover {
    text-decoration: none;
    border-bottom: 1px solid rgb(255, 255, 255);
}
.grayOut {
    -webkit-filter: brightness(40%);
    filter: brightness(40%);
}
.listGrayOut {
    background-color: rgba(74,74,74,0.4);
}
.listGrayOut span {
    color: rgba(204,204,204,0.75) !important;
}
.ClickDisable {
    pointer-events: none;
}
.color-LiteGray {
    background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%) !important;
}



.dropdown-menu>li>a {
    color: black !important;
    padding: 0 20px;
}
.dropdown-menu {
    right: 0;
    left: initial;
    background-color: rgb(221, 221, 221);
    background-color: rgba(221, 221, 221, 1);
    overflow: auto;
    z-index: 1010;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto;
    height: auto;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    background-color: rgb(182, 182, 182);
    background-color: rgba(182, 182, 182, 1);
    color: rgb(255, 255, 255) !important;
}

/* Bootstrap Modal CSS Reset */
.modal-dialog {
    position: absolute;
    width: calc(100vw / 12 * 8);
    margin: initial;
}
.modal.in .modal-dialog {
    -webkit-transform: initial;
    -ms-transform: initial;
    -o-transform: initial;
    transform: initial;
}
.modal.fade .modal-dialog {
    -webkit-transition: initial;
    -o-transition: initial;
    transition: initial;
    -webkit-transform: initial;
    -ms-transform: initial;
    -o-transform: initial;
    transform: initial;
}
.prt-sm {
    height: 100%;
}
.song_title_shadow {
    text-shadow: 2px 2px 5px black, -2px 2px 5px black, 2px -2px 5px black, -2px -2px 5px black;
}
.flexiblebox {
    display: flex !important;
    height: inherit !important;
    align-items: center;
    -webkit-align-items: center;
}
.list-group input[type="checkbox"] {
    position: absolute;
    top: 0;
    opacity: 0;
    height: inherit;
    z-index: 2;
    margin: 0;
}
.list-group input[type="checkbox"]+label {
    background-size: contain;
    background-image: url(/images/check2_off.png);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    width: inherit;
    height: inherit;
    z-index: 1;
    margin: 0;
}
.list-group input[type="checkbox"]:checked+label {
    background-image: url("/images/check2_on.png");
}

/*----------------------------------------------------------
 Media
----------------------------------------------------------*/


/* Tablet */
@media only screen and (min-width: 768px) {
    table {
        margin-left: calc(100vw / 12);
    }
    #repeat-sm {
        bottom: 24%;
        left: 0;
    }
    #volume-sm-back {
        bottom: 10%;
        right: 0;
    }
}
@media only screen and (min-width: 768px) and (orientation: portrait), screen and (max-width: 768px) and (max-height: 552px) {
    header .bar {
        height: 100%;
    }
    header .power {
        position: inherit;
    }
    table {
        width: 90%;
        margin-left: calc(100vw / 12);
    }
    .reset {
        font-size: 0.7em;
    }
    .blur {
        width: 95%;
        left: 2.5%
    }
    .Volume_xs_style {
        position: absolute;
        bottom: 10%;
    }
    .backcolor-white1h {
        background: rgb(254, 254, 254);
        background: rgba(254, 254, 254, 0.6);
    }
    .Volume_xs_style .slider-track {
        height: 6px !important;
        background-image: linear-gradient(to bottom, RGBA(254, 254, 254, 0.7) 0, RGBA(254, 254, 254, 0.7) 100%);
    }
    .Volume_xs_style .slider-handle {
        margin-top: -6px !important;
        background-image: linear-gradient(to bottom, RGB(254, 254, 254) 0, RGB(254, 254, 254) 100%) !important;
        opacity: 1 !important;
        border-radius: 11px !important;
        width: 11px !important;
    }
    .btn-sbmit, .btn-red, .btn-bk {
        width: calc(100vw / 12 * 4);
    }
}

/* PC */
@media only screen and (min-width: 1230px) {
    /* Mouse hover */
    .list-group-item a img:hover img {
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
    }
    ul li a:hover, .highlight:hover {
        background-color: rgb(254, 254, 254);
        background-color: rgba(254, 254, 254, 0.2);
        color: rgb(254, 254, 254);
    }
    .pr_menu_col:hover {
        cursor: pointer;
        background-color: rgb(254, 254, 254);
        background-color: rgba(254, 254, 254, 0.3);
        color: rgb(254, 254, 254);
    }
    .pr_menu_col_dis:hover {
        cursor: initial;
        background-color: transparent;
    }
    #RecPlayButton:hover {
        background-color: rgb(254, 254, 254);
        background-color: rgba(254, 254, 254, 0.2);
        color: rgb(254, 254, 254);
    }
}
@media only screen and (min-width: 991px) and (max-width: 1230px) {
    .font_l_ms {
        font-size: 14px;
    }
}

/* SmartPhone */
@media only screen and (max-width: 767px) {
    .font_ss {
        font-size: 10px;
        font-size: 1rem;
        margin: 0;
        padding: 0;
    }
    .font_s {
        font-size: 12px;
        font-size: 1.2rem;
        margin: 0;
        padding: 0;
    }
    .font_m {
        font-size: 14px;
        font-size: 1.4rem;
        margin: 0;
        padding: 0;
    }
    .font_mb {
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .font_l {
        font-size: 16px;
        font-size: 1.6rem;
        margin: 0;
        padding: 0;
    }
    .font_lb {
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .font_ll {
        font-size: 18px;
        font-size: 1.8rem;
        margin: 0;
        padding: 0;
    }
    .calling_label_size {
        font-size: 20px;
    }
    nav.navbar {
        background-color: rgb(20, 17, 12);
        background-color: rgba(20, 17, 12, 0.3);
        padding: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    header .bar {
        height: 100%;
    }
    header .power {
        position: inherit;
    }
    table {
        width: 90%;
        margin-left: calc(100vw / 12);
    }
    .reset {
        font-size: 0.7em;
    }
    #volume-xs-back {
        bottom: 10%;
        right: 0;
        width: 100%;
    }
    .blur {
        width: 95%;
        left: 2.5%
    }
    .modal-line .col-sm-5{
      width: calc(100vw / 12 * 8);
    }
    .Volume_xs_style {
        position: absolute;
        bottom: 10%;
    }
    .backcolor-white1h {
        background: rgb(254, 254, 254);
        background: rgba(254, 254, 254, 0.7);
    }
    .Volume_xs_style .slider-track {
        height: 6px !important;
        background-image: linear-gradient(to bottom, RGBA(254, 254, 254, 0.7) 0, RGBA(254, 254, 254, 0.7) 100%);
    }
    .Volume_xs_style .slider-handle {
        margin-top: -6px !important;
        background-image: linear-gradient(to bottom, RGB(254, 254, 254) 0, RGB(254, 254, 254) 100%) !important;
        opacity: 1 !important;
        border-radius: 11px !important;
        width: 11px !important;
    }
    .btn-sbmit, .btn-red, .btn-bk {
        width: calc(100vw / 12 * 4);
    }
    .dropdown-menu {
        min-width: calc(100vw / 12 * 4);
    }
}
@media only screen and (max-width: 767px) and (orientation:portrait) {
    .font_ss_xs {
        font-size: 10px;
        margin: 0;
        padding: 0;
    }
    .font_s_xs {
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    .font_m_xs {
        font-size: 14px;
        margin: 0;
        padding: 0;
    }
    .font_m2_xs {
        font-size: 15px;
        margin: 0;
        padding: 0;
    }
    .font_mb_xs {
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .font_l_xs {
        font-size: 16px;
        margin: 0;
        padding: 0;
    }
    .font_lb_xs {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .font_l_xs {
        font-size: 18px;
        margin: 0;
        padding: 0;
    }
}
@media only screen and (max-width: 767px) and (orientation:landscape) {
    .btn-sbmit, .btn-red, .btn-bk {
        width: calc(100vw / 12 * 2);
    }
}

/* iPod */
@media only screen and (max-width: 320px) {
    .font_xxs_l {
        font-size: 1.2rem;
    }
    .font_xxs_lb {
        font-size: 1.2rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .font_xxs_m {
        font-size: 1.0rem;
    }
}

/* ScrollBar */
::-webkit-scrollbar {
    width: 3px;
    height: 100%;
    border-radius: 5px;
    background: rgb(254, 254, 254);
    background: rgba(254, 254, 254, 0.2);
    background-clip: padding-box;
    padding-right: 10px;
}
::-webkit-scrollbar-thumb {
    width: 2px;
    border-radius: 5px;
    background: rgb(254, 254, 254);
    background: rgba(254, 254, 254, 0.5);
}
::-webkit-scrollbar-track {
    border-radius: 5px;
    background: transparent;
}

/*----------------------------------------------------------
 ID
----------------------------------------------------------*/

#ysm_url_text a, #notice_text div {
    font-size: 1.6rem;
}
#ysm_url_text a, #notice_text div a {
    color: #337ab7 !important;
    text-decoration: underline !important;
}
#notice_text div {
    white-space: pre-line;
}

/* Slider*/

#tv .slider-track, #performance .slider-track, #audio .slider-track, #Modal_Metro .slider-track, #rlesson_mic_settings .slider-track, #record_omni_in_vol .slider-track {
    height: 6px !important;
    background-image: linear-gradient(to bottom, #FEFEFE 0px, #FEFEFE 100%);
}
#tv .slider-selection, #performance .slider-selection, #audio .slider-selection, #Modal_Metro .slider-selection, #rlesson_mic_settings .slider-selection, #record_omni_in_vol .slider-selection {
    background-image: linear-gradient(to bottom, RGBA(254, 254, 254, 0) 0, RGBA(254, 254, 254, 0) 100%);
}
#tv .slider-track, #performance .slider-track, #audio .slider-track, #Modal_Metro .slider-track, #rlesson_mic_settings .slider-track, #record_omni_in_vol .slider-track {
    height: 6px !important;
    background-image: linear-gradient(to bottom, RGBA(254, 254, 254, 0.7) 0, RGBA(254, 254, 254, 0.7) 100%);
}
#tv .slider-handle, #performance .slider-handle, #audio .slider-handle, #Modal_Metro .slider-handle, #rlesson_mic_settings .slider-handle, #record_omni_in_vol .slider-handle {
    margin-top: -6px !important;
    background-image: linear-gradient(to bottom, RGB(254, 254, 254) 0, RGB(254, 254, 254) 100%) !important;
    opacity: 1 !important;
    border-radius: 11px !important;
    width: 11px !important;
}
.container-xs .navbar .list-group-item, #menu_list li.list-group-item {
    border: none;
}
#main_wrapper {
    position: relative;
    margin-top: 0;
    width: 100%;
    padding-left: var(--leftSpace);
}
#volume-xsSlider,
#volume-smSlider,
#hp-volume-xsSlider,
#hp-volume-smSlider,
#tgVolumeSlider,
#tv-volumeSlider,
#tv-hp-volumeSlider {
    position: absolute;
    z-index: 1000;
    height: inherit;
    background: transparent;
}
#volume-virtual-smSlider,
#volume-virtual-xsSlider,
#tv-volumeSlider-virtual{
  position: absolute;
  height: inherit;
  z-index: 1010;
}
#volume-virtual-smSlider .slider-track,
#volume-virtual-xsSlider .slider-track,
#tv-volumeSlider-virtual .slider-track{
  background: transparent;
}
#title {
    position: absolute;
    float: none;
    text-align: center;
    clear: both;
    left: 0;
    width: 100%;
    font-weight: bold;
    font-size: 18px;
}
.title {
    font-weight: bold;
    white-space: nowrap;
}
.page-height {
    overflow-y: auto;
    height: 86%;
}
#sleep-backdrop .navbar-fixed-top {
    position: fixed;
    width: 100vw;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
}
.wake-disklavier-up {
    border-radius: 100px;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 2em;
}
.wake-disklavier-up span {
    position: absolute;
    text-align: center;
    width: inherit;
}
.wake-disklavier-up img {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100px;
    float: right;
}
.wake-disklavier-up:hover {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.4);
}
#sleep-backdrop .navbar-fixed-top {
    height: 100vh;
}

/*----------------------------------------------------------
 Marquee
----------------------------------------------------------*/

#marquee_play, #marquee_play_ft_xs,
/*#marquee_play_ft_xs,*/

#marquee_play_ft_sm {
    width: 100%;
    overflow: hidden;
}
#marquee_play_time, #marquee_play_time_ft_xs,
#marquee_play_time_ft_sm, .ondemand_list_play_time {
    margin: 0;
    display: inline-block;
    white-space: nowrap;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}
.marquee_move {
    -webkit-animation-name: marquee;
}
@-webkit-keyframes marquee {
    from {
        -webkit-transform: translate(0%);
    }
    99%, to {
        -webkit-transform: translate(-100%);
    }
}
.marquee_time {
    -webkit-animation-duration: 0s;
}

/*----------------------------------------------------------
 Wait Animation
----------------------------------------------------------*/

#floatingBarsG {
    position: relative;
    width: 85px;
    height: 106px;
    margin: auto;
    margin-top: 50px;
}
.blockG {
    position: absolute;
    background-color: rgb(198, 198, 197);
    background-color: rgba(198, 198, 197, 0.87);
    width: 7px;
    height: 20px;
    border: 1px solid rgb(254, 254, 254);
    border: 1px solid rgba(254, 254, 254, 0.1);
    border-radius: 11px 11px 11px 11px;
    -o-border-radius: 11px 11px 11px 11px;
    -ms-border-radius: 11px 11px 11px 11px;
    -webkit-border-radius: 11px 11px 11px 11px;
    -moz-border-radius: 11px 11px 11px 11px;
    transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    animation-name: fadeG;
    -o-animation-name: fadeG;
    -ms-animation-name: fadeG;
    -webkit-animation-name: fadeG;
    -moz-animation-name: fadeG;
    animation-duration: 1.8s;
    -o-animation-duration: 1.8s;
    -ms-animation-duration: 1.8s;
    -webkit-animation-duration: 1.8s;
    -moz-animation-duration: 1.8s;
    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;
}
#rotateG_01 {
    left: 15px;
    top: 24px;
    animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    -ms-animation-delay: 0.45s;
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
    transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}
#rotateG_02 {
    left: 18px;
    top: 12px;
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
}
#rotateG_03 {
    left: 27px;
    top: 3px;
    animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    -ms-animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
    transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
#rotateG_04 {
    left: 39px;
    top: 0;
    animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
#rotateG_05 {
    left: 51px;
    top: 3px;
    animation-delay: 1.05s;
    -o-animation-delay: 1.05s;
    -ms-animation-delay: 1.05s;
    -webkit-animation-delay: 1.05s;
    -moz-animation-delay: 1.05s;
    transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}
#rotateG_06 {
    left: 60px;
    top: 12px;
    animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
}
#rotateG_07 {
    left: 63px;
    top: 24px;
    animation-delay: 1.35s;
    -o-animation-delay: 1.35s;
    -ms-animation-delay: 1.35s;
    -webkit-animation-delay: 1.35s;
    -moz-animation-delay: 1.35s;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
#rotateG_08 {
    left: 60px;
    top: 36px;
    animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
}
#rotateG_09 {
    left: 51px;
    top: 47px;
    animation-delay: 1.65s;
    -o-animation-delay: 1.65s;
    -ms-animation-delay: 1.65s;
    -webkit-animation-delay: 1.65s;
    -moz-animation-delay: 1.65s;
    transform: rotate(150deg);
    -o-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
}
#rotateG_10 {
    left: 39px;
    top: 48px;
    animation-delay: 1.8s;
    -o-animation-delay: 1.8s;
    -ms-animation-delay: 1.8s;
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}
#rotateG_11 {
    left: 27px;
    top: 47px;
    animation-delay: 1.95s;
    -o-animation-delay: 1.95s;
    -ms-animation-delay: 1.95s;
    -webkit-animation-delay: 1.95s;
    -moz-animation-delay: 1.95s;
    transform: rotate(-150deg);
    -o-transform: rotate(-150deg);
    -ms-transform: rotate(-150deg);
    -webkit-transform: rotate(-150deg);
    -moz-transform: rotate(-150deg);
}
#rotateG_12 {
    left: 18px;
    top: 39px;
    animation-delay: 2.1s;
    -o-animation-delay: 2.1s;
    -ms-animation-delay: 2.1s;
    -webkit-animation-delay: 2.1s;
    -moz-animation-delay: 2.1s;
    transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
}
@keyframes fadeG {
    0% {
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.91);
    }
    100% {
        background-color: rgb(197, 197, 197);
        background-color: rgba(197, 197, 197, 0.67);
    }
}
@-o-keyframes fadeG {
    0% {
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.91);
    }
    100% {
        background-color: rgb(197, 197, 197);
        background-color: rgba(197, 197, 197, 0.67);
    }
}
@-ms-keyframes fadeG {
    0% {
        background-color: rgba(0, 0, 0, 0.91);
    }
    100% {
        background-color: rgba(197, 197, 197, 0.67);
    }
}
@-webkit-keyframes fadeG {
    0% {
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.91);
    }
    100% {
        background-color: rgb(197, 197, 197);
        background-color: rgba(197, 197, 197, 0.67);
    }
}
@-moz-keyframes fadeG {
    0% {
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.91);
    }
    100% {
        background-color: rgb(197, 197, 197);
        background-color: rgba(197, 197, 197, 0.67);
    }
}

/*----------------------------------------------------------
 Sleeping Backdrop Turn on Button
----------------------------------------------------------*/

#TurnOnButton {
    -webkit-animation-duration: 3s;
    -webkit-animation-name: TurnOnAnime;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes TurnOnAnime {
    0% {
        -webkit-filter: brightness(60%);
    }
    50% {
        -webkit-filter: brightness(300%);
    }
    100% {
        -webkit-filter: brightness(60%);
    }
}

/*----------------------------------------------------------
 Scroll Guide Arrow UP / Down
----------------------------------------------------------*/

.scroll_up {
    width: 0;
    height: 0;
    left: 50%;
    position: absolute;
}
.scroll_up.show {
    border: 6px solid transparent;
    border-bottom: 6px solid rgb(255, 255, 255);
}
.scroll_up.hide {
    border: 0;
    border-bottom: 0;
}
.scroll_down {
    width: 0;
    height: 0;
    left: 50%;
    position: absolute;
    bottom: 0;
}
.scroll_down.show {
    border: 6px solid transparent;
    border-top: 6px solid rgb(255, 255, 255);
}
.scroll_down.hide {
    border: 0;
    border-top: 0;
}
#volume-smSlider .slider-track ,
#hp-volume-smSlider .slider-track,
#tv-volumeSlider .slider-track,
#tv-hp-volumeSlider .slider-track {
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.5);
}
#volume-smSlider .slider-selection,
#hp-volume-smSlider .slider-selection,
#volume-xsSlider .slider-selection,
#hp-volume-xsSlider .slider-selection,
#tv-volumeSlider .slider-selection,
#tv-hp-volumeSlider .slider-selection{
  background-color: white;
}
#volume-virtual-sm .slider-selection,
#hp-volume-smSlider .slider-selection,
#volume-virtual-xs .slider-selection,
#hp-volume-xsSlider .slider-selection,
#tv-volumeSlider .slider-selection,
#tv-hp-volumeSlider .slider-selection{
  background-color: white;
}
#volume-virtual-xsSlider .slider-selection{
  background: transparent;
}
#volume-smSlider .min-slider-handle,
#volume-smSlider .max-slider-handle,
#hp-volume-smSlider .min-slider-handle,
#hp-volume-smSlider .max-slider-handle,
#volume-xsSlider .min-slider-handle,
#volume-xsSlider .max-slider-handle,
#hp-volume-xsSlider .min-slider-handle,
#hp-volume-xsSlider .max-slider-handle,
#tv-volumeSlider .max-slider-handle,
#tv-hp-volumeSlider .max-slider-handle{
  background: transparent;
  background-image: linear-gradient(to bottom, transparent, transparent) !important;
}
#volume-smSlider .slider-track-low,
#hp-volume-smSlider .slider-track-low,
#volume-xsSlider .slider-track-low,
#hp-volume-xsSlider .slider-track-low,
#tv-volumeSlider .slider-track-low,
#tv-hp-volumeSlider .slider-track-low{
  background-color: white;
}
#volume-xsSlider .slider-track,
#hp-volume-xsSlider .slider-track{
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.2);
}
#volume-smSlider .min-slider-handle,
#hp-volume-smSlider .min-slider-handle,
#volume-xsSlider .min-slider-handle,
#hp-volume-xsSlider .min-slider-handle,
#tv-volumeSlider .min-slider-handle,
#tv-hp-volumeSlider .min-slider-handle{
  /*background: transparent !important;*/
  background: red !important;
  display: none;
}

div.dummy {
background-color:rgb(0,0,0,0);
}

.disable-3d-touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

progress {
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-block;
    block-size: 1em;
    inline-size: 10em;
    vertical-align: -0.2em;
    writing-mode: horizontal-tb !important;
}

progress::-webkit-progress-bar {
    background-color: #ccc;
    border-radius: 10px;
}

progress::-webkit-progress-value {
    background-color: gray;
    border-radius: 10px;
}

/*----------------------------------------------------------
 変数
----------------------------------------------------------*/
:root {
    --safeAreaSize: 0px;
    --leftSpace: 0px;
    --displaySize: calc(100vw - var(--safeAreaSize));
}