#contents {
  padding-top: 90px;
}
.img {
    padding-bottom: 80px;
}
.img img {
    width: 100%;
}
#page_title {
  background-image:url(/items/images/logo/logo_cl_141x141.png);
  background-position:center top;
  background-repeat:no-repeat;
  background-size: 68px auto;
  margin-top: 88px;
  padding-top: 98px;
  text-align: center;
  margin-bottom: 47px;
}
#page_title img {
  width: 342px;
}



#subnavi ul {
  width: 800px;
  display: table;
  margin: 0 auto 55px;
}
#subnavi ul li {
  display: table-cell;
  width: 25%;
  border: 1px solid white;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#subnavi ul li a {
  display: table;
  width: 100%;
  background-color: #f5f5f5;
  text-decoration:none;
  -webkit-transition: background .3s;
  -moz-transition: background .3s;
  -o-transition: background .3s;
  -ms-transition: background .3s;
  transition: background .3s;
}
#subnavi ul li a span {
  display: table-cell;
  text-align:center;
  vertical-align:middle;
  height: 60px;
  background-position: center center;
  background-repeat:no-repeat;
  background-size: auto 33px;
}
#subnavi ul li a span img {
  height: 33px;
  opacity: 0;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  -ms-transition: opacity .3s;
  transition: opacity .3s;
}
#subnavi ul li.current a,
#subnavi ul li a:hover {
  background-color: black;
}

@media only screen and (max-width: 830px) {
#subnavi ul {
  display: block;
  width: 400px;
}
#subnavi ul:after {
  content: "";
  display: block;
  clear: both;
}

#subnavi ul li {
  display: block;
  width: 50%;
  float: left;
}
}
@media only screen and (max-width: 450px) {
#subnavi ul {
  width: 93%;
}
#subnavi ul li {
  float: none;
  width: 100%;
}
}