#page_title {
  background-image:url(mark.png);
  background-position:center top;
  background-repeat:no-repeat;
  background-size: 68px auto;
  margin-top: 56px;
  padding-top: 98px;
  line-height:0;
  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;
  line-height:0;
  -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;
}
#subnavi ul li.current a span img,
#subnavi ul li a:hover span img {
  opacity: 1;
}
#subnavi ul li#sn_index a span {
  background-image:url(page_about.png);
}
#subnavi ul li#sn_used a span {
  background-image:url(page_used.png);
}
#subnavi ul li#sn_feature a span {
  background-image:url(page_feature.png);
}
#subnavi ul li#sn_advance a span {
  background-image:url(page_advance.png);
}

@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%;
}
#page_title img {
  width: 76%;
}
}