﻿#html{
  margin:0.5em 1%;
}
#html UL{
  list-style:none;
}
#html LI{
  width:322px;
  list-style:none;
  margin:5px;
  text-align:right;
  position:relative;
  display:block;
  float:left;
}
#html LI SPAN{
  background:#333333;
  margin:0px;
  padding:3px 5px;
  bottom:0;
  left:0;
  position:absolute;
  display:inline-block;
}
#html A{
  color:#ffffff;
  border:none;
  display:block;
}
#html A:hover{
  background:#ffffff;
  color:#000000;
  border:none;
}
#html LI A:hover SPAN{
  background:#bbbbbb;
}
#html A:after{
  content:"";
  margin-right:5px;
}
#html A IMG{
  border:1px solid #000000;
  border-bottom:1px dotted #666666;
  padding-bottom:5px;
  filter:alpha(opacity=60);
  -moz-opacity:0.6;
  opacity:0.6;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}
#html A:hover IMG{
  border:1px solid #ffffff;
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  opacity:1.0;
}

.html IMG{
  border:1px solid #ffffff;
  filter:drop-shadow(5px 5px 1px rgba(102,102,102,1.0));
}
.html{
  width:100%;
  margin:0px auto 30px auto;
  vertical-align:top;
}
.html_pc{
  width:740px;
}
.html_pc:before{
  font-family:"Font Awesome 5 Free";
  content:"\f108　PC view";
  margin-bottom:5px;
  display:block;
}
.html_tab{
  width:405px;
  margin-top:20px;
  display:block;
  float:left;
}
.html_tab:before{
  font-family:"Font Awesome 5 Free";
  content:"\f3fa　Tablet view";
  margin-bottom:5px;
  display:block;
}
.html_sp{
  width:335px;
  margin-top:20px;
  display:block;
  float:left;
}
.html_sp:before{
  font-family:"Font Awesome 5 Free";
  content:"\f3cd　Mobile view";
  margin-bottom:5px;
  display:block;
}
.html_detail{
  text-align:center;
  line-height:180%;
  margin:20px auto;
}
.html_detail A{
  background:#333333;
  color:#ffffff;
  border:none;
  padding:5px 20px;
  border-radius:5px;
}
.html_detail A:hover{
  background:#ffffff;
  color:#000000;
  border:none;
}
.html_detail SPAN{
  background:#333333;
  font-size:8pt;
  margin:1px 10px 1px 1px;
  padding:1px 3px;
}
.navi{
  border-top:1px dotted #666666;
  padding:5px;
  text-align:center;
}

@media only screen and (max-width:1000px){
.html DIV{
  max-width:100%;
}
.html IMG{
  max-width:100%;
  height:auto;
}
.html_tab{
  width:100%;
  float:none;
}
.html_sp{
  width:100%;
  float:none;
}
}

@media only screen and (max-width:400px){
#html LI{
  width:100%;
  list-style:none;
  margin:5px auto;
  float:none;
}
}