@charset "utf-8";


body{ padding-bottom:100px; width:85%; }
table{ border-collapse: collapse; border-spacing: 0; }


/*********** ページトップ ***********/
#scrollTop {
  position:fixed;
  vertical-align:middle;
  background-color:rgba(0,0,0,0.8);
  color:#fff;
  padding:10px;
  opacity: 0;
  width:30px;
  height:30px;
  bottom:20px;
  right:20px;
  text-align: center;
  line-height:30px;
  font-size:18px;
  font-weight:bold;
  transition:0.3s;
  cursor:pointer;
  z-index: 3;
}
#scrollTop:hover{
  background-color:rgba(0,0,0,0.4);
}
/*********** ページトップ END ***********/


/*********** サイドメニュー ***********/
nav{
  position:fixed;
  top:0;
  left:0;
  height:98%;
  padding:13px 13px;
  text-align:center;
}
nav a{
  display:block;
  font-size:13px;
  font-weight:bold;
  color:#333;
  text-decoration:none;
  margin:1px auto;
  transition:0.3s;
}
nav a:hover{
  background-color:#ddd;
}
nav img{
  margin-top:4px;
  width:27px;
  height:27px;
}
nav p{
  font-size:12px;
  color:#aaa;
  font-weight:bold;
  margin:5px 0px 2px;
}
#close{
  cursor:pointer;
  transition:0.3s;
}
.grad-wrap{
  position: relative;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 105px;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.9) 80%, rgba(255,255,255,0.9) 80%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 80%,
              rgba(255,255,255,0.9) 80%, #fff 100%);
  content: "";
}
nav input[type=checkbox]:checked ~ .grad-item { height: auto; }
nav input[type=checkbox]:checked:checked ~ .grad-item::before { display: none; }
 
select{
  display:none;
  margin:20px auto 5px;
  padding:5px 0;
  border:none;
  border-bottom:1px solid #222;
  border-radius:5px 5px 0 0;
  outline:none;
  cursor:pointer;
  transition:0.3s;
}

.scroll_box { overflow: auto; }
.scroll_box div { white-space: nowrap; }
.scroll_box::-webkit-scrollbar { width: 7px; height: 8px; }
.scroll_box:hover::-webkit-scrollbar-track { border-radius: 5px; box-shadow: 0 0 4px #aaa inset; }
.scroll_box:hover::-webkit-scrollbar-thumb { border-radius: 5px; background: #ccc; }
/*********** サイドメニュー END ***********/


/*********** 中小リスト ***********/
.medium label{
  /*max-width:900px;*/
  display:block;
  margin:5px 0;
  padding:2px 5px 0;
  border-bottom:1px solid #666;
  color:#333;
  background:rgba(255,255,255,0.3);
  font-size:11px;
  font-weight:bold;
  text-align:center;
}
.small label{
  display:block;
  width:130px;
  margin:5px 0;
  padding:2px 5px;
  background:#eee;
  font-size:11px;
  font-weight:bold;
  text-align:left;
  cursor:pointer;
  transition:0.3s;
}
.medium label:hover, input:checked + .medium_list,
.small label:hover, input:checked + .small_list{
  /*background:#333;*/
  color:#007bff;
  border-bottom:1px solid #007bff;
}


.medium p{
  margin:0;
}
.medium_name, .small_name{
  /*max-width:900px;*/
  display:block;
  margin:5px 0;
  padding:2px 5px;
  background:#ccc;
  color:#333;
  font-size:11px;
  font-weight:bold;
  text-align:center;
}
.medium_name{
  position:relative;
  min-width:380px;
  font-size:17px;
}
.medium_list, .small_list{
  display:block;
  border-bottom:1px solid #666;
  min-width:125px;
  cursor:pointer;
  transition:0.3s;
}

.medium_str, .small_str{
  display:none;
  color:#000;
  font-size:13px;
  padding:0 5px;
  margin-bottom:10px;
}
.medium_str p, .small_str p{
  margin:3px 0;
}
.medium_str b{
  margin-bottom:-5px;
}
.medium_str hr{
  border:none;
  border-bottom:1px solid #000;
}
.medium_name ul{
  position:absolute;
  right:5px;
  top:4px;
  border:1px solid #222;
  font-size:12px;
}
.medium_name ol{
  background:#222;
  color:#fff;
  padding:1px 3px;
  margin:0;
}
.medium_name li{
  background:#fff;
  padding:1px 3px;
  margin:0;
  width:80px;
  text-align:center;
}

/*********** 中小リスト END ***********/



/* モバイル版 */
@media screen and (max-width: 500px) {
  nav{ display:none; }
  select{ display:block; }
  body{ margin:0 auto; width:100%; }
  .medium_name{ min-width:300px; }
}