@charset "utf-8";

.parent_bar > li {
	margin:0% 0% 0% 3% ;
	padding:2% 5% 0% 0% ;
	border-bottom: 1px dotted #dbdbdb;
	cursor: pointer;
	color: #565d63;
	text-decoration: none;
	font-size:1.12em;
}
@media screen and (min-width:601px) {
    .parent_bar > li.live a {
    	background-position: 98% 50%;
    	background-image:url("../../images/icon_live.gif");
    	background-repeat: no-repeat;
    }
    .parent_bar > li.live a.arrow_upward {
    	background:none;
    }
}


.child_bar li{
	margin:0% 0% 0% 3% ;
	padding:2% 5% 0% 0% ;
	border-bottom: 1px dotted #dbdbdb;
	background-position: 98% 50%;
	background-image:url("../../images/cr_arrow.png");
	background-repeat: no-repeat;
	cursor: pointer;
	color: #565d63;
	text-decoration: none;
	font-size:0.87em;
}

.child_bar li:hover{
	background-color: #dbdbdb;
	transition: background-color 800ms;
}

.child_bar li.live{
	background-image:url("../../images/icon_live.gif");
	background-repeat: no-repeat;
    /*アイコン幅が広がるため*/
    padding-right: 11%;
}

.child_bar li div{
	display:inline-block;
}
.child_bar li .md{
	width:20%;
}
.child_bar li .name{
	width:25%;
}
.child_bar li .nittei{
	width:55%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
img.rotate {
	transform: rotate(90deg);
}

li.active {
	background-image:none !important;
	border-bottom: 0px dotted #dbdbdb;
}

.view_switch input {
    display: none;
}
.view_switch label {
    padding: 0px;
    cursor: pointer;
}

.view_switch label:before {
    padding: 0px 10px;
    content: 'ライブ';
    border-radius: 6px 0 0 6px;
    background: #4f799e;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1) inset;
    color: #FFF;
    text-decoration: none;
}

.view_switch label:after {
    padding: 0px 10px;
    content: '全て';
    border-radius: 0 6px 6px 0;
    background: linear-gradient(to bottom, #F0F0F0 0%, #DDD 100%);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1) inset;
    color: #333;
    text-decoration: underline;
}

.view_switch input:checked + label:before {
    background: linear-gradient(to bottom, #F0F0F0 0%, #DDD 100%);
    color: #333;
    text-decoration: underline;
}

.view_switch input:checked + label:after {
    background: #4f799e;
    color: #FFF;
    opacity: 1;
    text-decoration: none;
}

.view_switch input:disabled + label:before {
    background: linear-gradient(to bottom, #F0F0F0 0%, #DDD 100%);
    color: #333;
    text-decoration: none;
    opacity: 0.5;
}

@media screen and (max-width:600px) {
    .view_switch label {
        font-size: 1.25em;
    }
    
    .view_switch label:before {
        padding: 5px 10px;
    }
    
    .view_switch label:after {
        padding: 5px 10px;
    }
}