@charset "UTF-8";
/* CSS Document */

#display_settings_dialog{ left:auto; right:200px}


/*---*/
.tab_nav {
  overflow: hidden;
  /*border-bottom: 1px solid #000*/;
}
.tab_nav li a {
  text-align: center;
  display: block;
  text-decoration: none;
  padding: 10px 0;
  /*border-left: 1px solid #000;*/
  font-weight: bold;
  color: #000;
}
.tab_nav li:first-of-type a {
  border: none;
}
#wrapper {
  width: 283px;
  overflow: hidden;
}
#tabs {
  width: 566px;
  position: relative;
  -webkit-transition: left .3s;
  -moz-transition: left .3s;
  -ms-transition: left .3s;
  -o-transition: left .3s;
  transition: left .3s;
}
.tab_1 #tabs {
  left: 0;
}
.tab_2 #tabs {
  left: -283px;
}
/*.tab_3 #tabs {
  left: -1200px;
}*/
.archives {
  float: left;
  width: 283px;
}
.archives h2 {
  padding: 10px 10px;
  font-size: 100%;
  background-color: #6f7575;
  color: #fff;
}

.archives li a {
  display: block;
  padding: 12px 0 10px 10px;
  line-height: 1.3;
  text-decoration: none;
  font-weight: bold;
  color: #000;
}



.tabmenu{ width:283px;border-bottom: #ccc solid 2px;/* margin:0 -10px 4px -10px;*/}
#scroller-header{ width:283px;border-bottom: #ccc solid 2px; margin-top:8px}
a.bangumi,
a.janru{ display:inline; width:44%;float:left; margin:0 3%; padding-bottom:5px;text-align:center; text-decoration:none;}


#wrapper.tab_1 a.bangumi,
#wrapper.tab_2 a.janru {
border-bottom: #FC0006 solid 4px !important;
}




/*ジャンル等*/

#display_settings_dialog {
    width: 283px;
	 font-size: 0.9rem; color:#464646;
	padding: 0;
	color:#464646 ;
}
#display_settings_dialog a{color:#464646 ;}

#display_settings_dialog #genreSt label {
    font-size: 1.3rem; letter-spacing:0.4; line-height:1.2;padding: 11px 2px 9px 30px;font-feature-settings: "palt";}

#display_settings_dialog #genreSt li.g8 label ,
#display_settings_dialog #genreSt li.g2 label  {padding: 4px 2px 9px 30px;}



#genreSt{ width:263px !important; margin:5px 10px 10px 10px;}
.formBoxGenre{ width:263px !important; margin:0 10px;}

.g8 span,
.g2 span {
    font-size: 0.95rem !important; padding-top:5px!important
}

.g10 {background-color: #AAE2CB;}
.g12 {background-color: #B9A7D3;}

.formBoxGenre{ text-align:center}
.selectAll, .unselectAll {
    display: inline; width:50% !important; float:left;}
#genreSt ul li { height:37px;}

#genreSt input[type=checkbox]:checked + label::after {
    background: #F54E2F; top:12px;
}
#display_settings_dialog input[type=checkbox]:checked + label::before { margin-top:1px;}
#display_settings_dialog input[type=checkbox]:checked + label.lg8::before,
#display_settings_dialog input[type=checkbox]:checked + label.lg2::before { margin-top:8px;}






/*.bangumi_con li{ border-bottom: #ccc solid 2px; padding:15px 30px; width:223px;margin:0 -10px 0 -10px;}*/
.bangumi_con ul{ margin:0 ; padding:0}
.bangumi_con li{ border-bottom: #ccc solid 2px; padding:11px 30px; width:223px; position:relative}
.bangumi_con li:last-child{  padding:5px 30px;border:none}

.ba_help a::before {
    content: '';
    position: absolute;
    bottom: 13px;
    left: 30px;
    width: 22px;
    height: 22px;
    background: url(/images/icon_help.png) no-repeat;
    background-size: 22px 22px;
}
li.ba_help a{text-decoration:none; font-size:13px;padding-left:25px; font-weight:normal;}






/* スイッチ */

.switch{ position:absolute; left:180px; top:5px}

.switch__label {
	width: 27px;
	position: relative;
	display: inline-block;
	padding-top: 2px;
}
.switch__content {
	display: block;
  cursor: pointer;
  position: relative;
  border-radius: 7px;
  height: 13px;
  background-color: #ff8370;
  -webkit-transition: all .1s .4s;
	   -moz-transition: all .1s .4s;
	    -ms-transition: all .1s .4s;
	     -o-transition: all .1s .4s;
	        transition: all .1s .4s;
	overflow: hidden;
}
 
.switch__content:after {
	content: "";
	display: block;
	position: absolute;
	
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	
	border-radius: 7px;
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
}
.switch__input {
	display: none;
}
.switch__circle {
	display: block;
	top: 7px;
	left: 52px;
	position: absolute;
	width: 19px;
	height: 19px;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
	background-color: #f5452f;
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
	-webkit-box-shadow: 0 2px 2px #ccc;
	        box-shadow: 0 2px 2px #ccc;
}
.switch__input:checked ~ .switch__circle {
	left: 35px;
	background-color: #F1F1F1;
}
.switch__input:checked ~ .switch__content {
 
	border-color: transparent;
	-webkit-transition: all 0s;
	   -moz-transition: all 0s;
	    -ms-transition: all 0s;
	     -o-transition: all 0s;
	        transition: all 0s;
}
 
.switch__input:checked ~ .switch__content:after {
	background-color: #b9b9b9;
	width: 100%;
}

/*モーダル*/
.modal-overlay {
  background-color:rgba(0,0,0,0.5);
}


/*spカレンダー*/
@media screen and (max-width: 900px){
#calendar-dialog.modal-dialog {
width: 90%!important; top:20px; 
}
#calendar-dialog .modal-content {
    top: 20px !important;
    width: 90% !important; margin:0 auto;
	padding-bottom:30px;
}
.calendar,
.ui-datepicker-calendar {
    width: auto !important; margin:0 auto ;
}
.calendar table tr th, .calendar table tr td {
    padding:9px 8px!important;font-size:1.6rem;  !important;
}
.ui-datepicker-header { margin-bottom:10px}
.ui-datepicker-title,.modal-content a{font-size:1.7rem;}
.modal-content .calendar {
    margin: 40px 0 5px 0;font-size:1.7rem;
    padding:0;
}

.ui-datepicker-current-day {
   /* border-radius: 15px; margin:5px */
}



#spcatvlist-dialog p.close,
#display_settings_dialog p.close {
    position: absolute;
    right: 10px;
    top:10px;
    border:none;
    width:auto;
    height:auto;
}
#spcatvlist-dialog .modal-header{
    display:block;
    height:40px;
    width:100%;
    position:absolute;
    background-color:#FFF;
    z-index:999;
}

#spcatvlist-dialog .modal-content a{
		width: auto!important; margin:0 auto ;
}
#spcatvlist-dialog .modal-content{
		display:block !important;
		top:auto !important;
		margin:0 auto !important;
		width:90% !important;
		padding:0;
}
#spcatvlist-dialog {
		position:absolute;
		width:90%;
}
.box-tvlist{
        width:100%;
}


ul.spcatvlist{ padding-top:40px}
ul.spcatvlist li{border-bottom:1px solid #CCC; position:relative;}
ul.spcatvlist li a{ text-decoration:none;display:block;padding:10px 30px;}
ul.spcatvlist li a::before {
    position: absolute;
    content: url(../../images/arrow/aro_next.svg);
    width: 7px;
    height: 7px;
    top: 10px;
	right: 20px
}
.display_selectedItem.smaller{
    font-size:0.9rem;
}

li.logo{ /*border-right:1px solid #ccc;*/text-align: left;}
/*#header ul#g_menu li.logo img { width: 80%;}*/
/*#header ul#g_menu li.btn_setting{ position:relative}*/
#header ul#g_menu li.btn_setting a.spOnly {
    display: block;
    background: #fff;
    border-radius: unset;
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 5px;
    width: auto;
}
#header a.settingOpen.modal-open.spOnly::before {
    display: block;
    content: '';
    width: 25px;
    height: 25px;
    background: url(../images/icon_config.png) no-repeat;
    background-size: 25px 25px;
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
}
/*#header ul#g_menu li.search_toggle {right: 10px;}*/
#guide .spmenuhead {/*width:100%;*/ padding-left:5px}
#guide .spmenuhead .tab {
   /* width: 46%;*/
    float: left;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    margin: 10px 1%;
    height: auto;
    padding: 5px 0;
    border-radius: 0;
	border:#CCC 1px solid;
	 background-image: url(/images/arrow/aro_down.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px 8px;
	font-size:12px;

}

.modal-content {border:none;}

}

@media screen and (max-width: 480px){
#calendar-dialog.modal-dialog {
width: 90%; margin:0 auto !important;
}
#display_settings_dialog {
    background: #fff;
}
#guide .spmenuhead .tab#spcallist,
#guide .spmenuhead .tab#spcatvlist{ width:45%}
#spcallist .datem{margin-left:10px} 
p.tokutei{ font-size:1.1rem; margin-top:20px; width:90%; white-space:nowrap; overflow:hidden; display:inline}
.tokutei img{ width:50px; height:auto;margin-top:0; vertical-align:middle}
}

.prefecturelist_wrap {
    margin-left: 10px;
    float: left;
    width: 50%;
}

.prefecturelist_wrap span{
    font-size: 14px;
    font-weight: bold;
    vertical-align: bottom;
}

#prefecturelist {
    width: 10em;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    margin-left: 10px;
    height: auto;
    padding: 2px 0;
    border-radius: 0;
    border:#CCC 1px solid;
    background-image: url(/images/arrow/aro_down.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px 8px;
    font-size:12px;
    position:relative;
    white-space: nowrap;
    display: inline-block;
}

#prefecturelist-dialog .modal-header{
    display:block;
    height:40px;
    width:100%;
    position:absolute;
    background-color:#FFF;
    z-index:999;
}

#prefecturelist-dialog .modal-content a{
    width: auto!important; margin:0 auto ;
}
#prefecturelist-dialog .modal-content{
    display:block !important;
    top:auto !important;
    margin:0 auto !important;
    width:90% !important;
    padding:0;
}
#prefecturelist-dialog {
    position:absolute;
    width:90%;
}

#sp-prefecturelist-dialog .modal-header{
    display:block;
    height:40px;
    width:100%;
    position:absolute;
    background-color:#FFF;
    z-index:999;
}

#sp-prefecturelist-dialog .modal-content a{
    width: auto!important; margin:0 auto ;
}
#sp-prefecturelist-dialog .modal-content{
    display:block !important;
    top:auto !important;
    margin:0 auto !important;
    width:90% !important;
    padding:0;
}
#sp-prefecturelist-dialog {
    position:absolute;
    width:90%;
}

ul.prefecturelist{ padding-top:40px}
ul.prefecturelist li{border-bottom:1px solid #CCC; position:relative;}
ul.prefecturelist li a{ text-decoration:none;display:block;padding:10px 30px;}
ul.prefecturelist li a::before {
    position: absolute;
    content: url(../../images/arrow/aro_next.svg);
    width: 7px;
    height: 7px;
    top: 10px;
    right: 20px
}

#sp-prefecturelist-dialog p.close,
#prefecturelist-dialog p.close,
#display_settings_dialog p.close {
    position: absolute;
    right: 10px;
    top:10px;
    border:none;
    width:auto;
    height:auto;
}