/* 冒頭でimport */
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2017/01/08, 2:13:44
    Author     : yuukisatou
*/
body{
  background-color: #f1f2f6;
  font-family: 'Noto Sans JP' !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP' !important;
}

.site_logo > h1{
  font-size: 32px;
  font-weight: 700;
  display: inline;
  margin: 0;
}
.site_logo > small{
  font-size: 10px;
}

.navbar-default .btn-link:focus, .navbar-default .btn-link:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-link:hover {
  color: #26816a;
  background-color: transparent;
}

.navbar-custom .navbar-brand:active, .navbar-custom .navbar-brand:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.navbar-brand {
  font-size: 32px;
  line-height: 39px;
}

.nav-tabs {
  /*background-color: #eee;*/
}
.topic {
  position: relative;
  padding: 10px 0 60px;
  margin-bottom: 15px;
}

.navbar-custom .nav li a {
  display: block;
  color: #50c1e9;
}

.panel-rankbase {
  border-color: #26816a;
}

.panel-rankbase > .panel-heading {
  color: #fff;
  background-color: #26816a;
  border-color: #26816a;
}

.panel-rankbase > .panel-heading > .panel-title{
  color: #fff;
}

.ranking_lists{
  /*height: 3000px;*/
}

.navbar-custom .navbar-brand {
  opacity: 1.0;
  filter: alpha(opacity=100);
}

.text-red {
  color: #dd4b39 !important;
}
.text-yellow {
  color: #f39c12 !important;
}
.text-aqua {
  color: #00c0ef !important;
}
.text-blue {
  color: #0073b7 !important;
}
.text-black {
  color: #111111 !important;
}
.text-light-blue {
  color: #3c8dbc !important;
}
.text-green {
  color: #00a65a !important;
}
.text-gray {
  color: #d2d6de !important;
}
.text-navy {
  color: #001f3f !important;
}
.text-teal {
  color: #39cccc !important;
}
.text-olive {
  color: #3d9970 !important;
}
.text-lime {
  color: #01ff70 !important;
}
.text-orange {
  color: #ff851b !important;
}
.text-fuchsia {
  color: #f012be !important;
}
.text-purple {
  color: #605ca8 !important;
}
.text-maroon {
  color: #d81b60 !important;
}

.navbar-custom .nav li a {
  display: block;
  color: #3c8dbc;
}

.navbar-custom .nav li a:focus, .navbar-custom .nav li a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  color: #3c8dbc;
}

.panel-body img.ranking_thumbnail{
  margin-bottom: 5px;
  width:100%;
  height:auto;
}

.navbar-custom .nav li a.current, .navbar-custom .nav li a:active {
  border-bottom: none;
}

.navbar-custom .navbar-brand {
  width: auto;
  overflow: hidden;
}

.ranking_multiple_panel{
  /*margin-top: 15px;*/
}

.ranking_multiple_panel ul.group_list{
  display: block;
  padding: 0;
}
.ranking_multiple_panel ul.group_list > li{
  display: block;
  position: relative;
  list-style-type: none;
  width: 100%;
  padding: 5px;
  border-bottom:1px solid #dadada;
  margin-bottom: 5px;
  padding: 5px 0 10px 0;
  background: transparent;
}

.ranking_multiple_panel ul.group_list > li:hover{
  background: #fafafa;
}
.ranking_multiple_panel ul.group_list.adding > li{
  padding: 5px 0 10px 25px;
}

.ranking_multiple_panel.normal ul.group_list.adding > li{
  padding: 5px 0 10px 5px;
}

.ranking_multiple_panel ul.group_list > li > span.rank_num {
  visibility: hidden;
  display: block;
  position: absolute;
  top:5px;
  left:0;
  width: 20px;
  text-align: center;
  height: calc( 100% - 15px );
  background: #eee;
  /*margin: 5px 0 10px 0;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 5px;
  color: #999;
}
.ranking_multiple_panel ul.group_list > li:nth-child(1) > span.rank_num{ color: #fff; background: #DAA520; }
.ranking_multiple_panel ul.group_list > li:nth-child(2) > span.rank_num{ color: #fff; background: #C0C0C0; }
.ranking_multiple_panel ul.group_list > li:nth-child(3) > span.rank_num{ color: #fff; background: #CD7F32; }

.ranking_multiple_panel ul.group_list.adding > li{
  cursor: pointer;
}
.ranking_multiple_panel ul.group_list.adding > li > span.rank_num {
  visibility: visible;
}

.ranking_multiple_panel ul.group_list > li h5 {
  line-height: 26px;
  font-size:18px;
  margin: 5px 0 0;
}

.ranking_multiple_panel ul.group_list > li div.metas {
  display: block;
  width: 100%;
}

.ranking_multiple_panel ul.group_list > li div.metas > span {
  display: block;
  float: left;
  margin-bottom: 5px;
  margin-right: 5px;
}

.ranking_multiple_panel ul.group_list > li button.multiple_add,
.ranking_multiple_panel ul.group_list > li button.multiple_remove{
  max-width: 120px;
}
.ranking_multiple_panel ul.group_list > li button.multiple_remove {
  display: none;
}
.ranking_multiple_panel ul.group_list.adding > li button.multiple_add {
  display: none;
}
.ranking_multiple_panel ul.group_list.adding > li button.multiple_remove {
  display: block;
}

.ranking_multiple_panel ul.group_list > li > h5 > span.rank_pt {
  color: #ed5565;
  font-weight: bold;
  padding-left: 15px;
  visibility: hidden;
}

.ranking_multiple_panel ul.group_list > li > h5 > span.rank_pt::before{
  content: '(';
}
.ranking_multiple_panel ul.group_list > li > h5 > span.rank_pt::after{
  content: 'pt)';
}

.ranking_multiple_panel ul.group_list.adding > li > h5 > span.rank_pt {
  visibility: visible;
}

.ranking_multiple_panel ul.group_list > li button.poll_singular_exec{
  max-width: 120px;
}

.alert {
  margin-top: 0;
  margin-bottom: 15px;
}

li img.choice_meta_img {
  float: left;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.ranking_list_youtube {
  width: 224px;
  float: right;
  margin: 5px 5px 5px 0;
}

.video_responsive{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: visible;
}

.video_responsive > iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.btn-youtube-play{
  cursor: pointer;
}

.user_register_panel{
  margin:15px auto;
  /*max-width: 640px;*/
}


.user_register_panel form{
  max-width: 640px;
  margin:0 auto;
}
.user_register_panel form .avatar_disp img{
  max-width: 200px;
  height: auto;
}


.dropdown-menu {
  background-color: #f8f8f8;
  border: none;
}
.dropdown-menu .divider {
  background-color: #e5e5e5;
}
.dropdown-menu .active a, .dropdown-menu .active a:focus, .dropdown-menu .active a:hover, .dropdown-menu li a:focus, .dropdown-menu li a:hover {
  background-color: #f8f8f8;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
  color: #3c8dbc;
  background-color: transparent;
}

.nav-tabs {
  background-color: #f5f7fa;
}

img.img-circle{
  border-radius: 50%;
}
.mymenu > a > img.img-circle{
  max-width: none;
  height: 40px;
  margin: -10px 5px -10px 0;
}

@media (max-width: 767px) {
  .navbar-custom .navbar-brand {
    padding: 5px 0px 5px 15px;
  }

  .site_logo > h1{
    font-size: 24px;
  }
  .site_logo > small {
    font-size: 8px;
  }
  .ranking_multiple_panel ul.group_list > li div.metas {
    margin-top: 5px;
  }

  li img.choice_meta_img {
    max-width: 40%;
  }
  .ranking_multiple_panel ul.group_list.adding {
    padding: 0 10px;
  }
  .ranking_multiple_panel ul.group_list.adding li .metas{
    display: none;
  }
}



.add_animate{
  color: #8cc152;
  position: absolute;
  z-index: 30;
  display: none;
  font-weight:bold;
}

.navbar-default .navbar-nav .open .dropdown-menu > .dropdown-header {
  color: #3c8dbc;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #3c8dbc;
}

.navbar-default .navbar-nav .open .dropdown-menu > .divider, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
  background-color: #3c8dbc;
  color: #fff;
}

.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  color: #fff;
  background-color: #3c8dbc;
}


span.category_tag {
  position: absolute;
  display: block;
  float: left;
  background: #3c8dbc;
  padding: 3px 6px;
  border-radius: 3px;
  color: #fff;
  opacity: 0.9;
  margin: 0 3px 3px 0;
  font-size: 12px;
}

.indent{
  display: inline-block;
}

.indent-1{
  padding-left: 1em;
}

.indent-2{
  padding-left: 2em;
}

.indent-3{
  padding-left: 3em;
}

.h5, h5 {
  font-size: 16px;
}

.overlay.commingsoon{
  z-index: 50;
  background: rgba(0,0,0,0.3);
  border-radius: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*display: none;*/
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size:12px;
}
.overlay.commingsoon:after{
  content:"Comming Soon."
}

.ranking_list button.btn.multiple_add,
.ranking_list button.btn.poll_singular_exec{
  max-width: 126px !important;
  width: 126px !important;
}

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}

.table-responsive {
  width: 100%;
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /*padding: 0 15px;*/
  box-sizing: border-box;
}

button.poll_exec{
  min-width: 126px;
  width: 100%;
  max-width: 280px;
}

.no-padding .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

.no-padding .row .col-lg-1, .no-padding .row .col-lg-10, .no-padding .row .col-lg-11, .no-padding .row .col-lg-12, .no-padding .row .col-lg-2, .no-padding .row .col-lg-3, .no-padding .row .col-lg-4, .no-padding .row .col-lg-5, .no-padding .row .col-lg-6, .no-padding .row .col-lg-7, .no-padding .row .col-lg-8, .no-padding .row .col-lg-9,
.no-padding .row .col-md-1, .no-padding .row .col-md-10, .no-padding .row .col-md-11, .no-padding .row .col-md-12, .no-padding .row .col-md-2, .no-padding .row .col-md-3, .no-padding .row .col-md-4, .no-padding .row .col-md-5, .no-padding .row .col-md-6, .no-padding .row .col-md-7, .no-padding .row .col-md-8, .no-padding .row .col-md-9,
.no-padding .row .col-sm-1, .no-padding .row .col-sm-10, .no-padding .row .col-sm-11, .no-padding .row .col-sm-12, .no-padding .row .col-sm-2, .no-padding .row .col-sm-3, .no-padding .row .col-sm-4, .no-padding .row .col-sm-5, .no-padding .row .col-sm-6, .no-padding .row .col-sm-7, .no-padding .row .col-sm-8, .no-padding .row .col-sm-9,
.no-padding .row .col-xs-1, .no-padding .row .col-xs-10, .no-padding .row .col-xs-11, .no-padding .row .col-xs-12, .no-padding .row .col-xs-2, .no-padding .row .col-xs-3, .no-padding .row .col-xs-4, .no-padding .row .col-xs-5, .no-padding .row .col-xs-6, .no-padding .row .col-xs-7, .no-padding .row .col-xs-8, .no-padding .row .col-xs-9 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.table-responsive{
  border: none;
}

.table-responsive .table > tbody > tr > td,
.table-responsive .table > tbody > tr > th,
.table-responsive .table > tfoot > tr > td,
.table-responsive .table > tfoot > tr > th,
.table-responsive .table > thead > tr > td,
.table-responsive .table > thead > tr > th {
  white-space: nowrap;
}