@charset "utf-8";

.brand-logo {
  margin-bottom: 10%;
}

.brand-logo img {
  margin: 0 auto;
  display: block;
}

.contents >header {
  margin-bottom: 1em;
}

.contents-container .contents h1 {
  background: none repeat scroll 0 0 #F5F5F5;
  font-size: medium;
  font-weight: bold;
  margin-bottom: 1%;
  padding: 1%;
}

.contents h1 >span {
  font-size: small;
  font-weight: normal;
}

.contents header >img {
  width: 100%;
}

.contents-index {
  margin: 1em 0;
}

.totop {
  text-align: left;
  overflow: hidden;
  margin-bottom: 2%;
}

.totop a {
  display: block;
  padding: 1%;
}

.production-notice {
  font-size: x-small;
  padding: .1em;
}

.notice-text {
  clear: both;
  color: #FF3300;
  margin-bottom: 2%;
}

.notice-text span {
  font-weight: bold;
}

.contents-index li {
  background: url(/common/jp/ja/imgs/icon_link_01p.gif) no-repeat scroll 0 .5em transparent;
  padding-left: 1em;
  margin-bottom: .5em;
}

.top-article,
.relational-contents {
  clear: both;
  border:solid 1px #88BAFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  margin: 3% 0;
  padding: 2%;
}

.top-article >header,
.relational-contents >header {
  margin: -2.1% -2.1% 2.1% -2.1%;
  padding: 2.1%;
  background: none repeat scroll 0 0 #F5F5F5;
  overflow: hidden;
}

.top-article >header >h2,
.relational-contents header >h2 {
  font-weight: bold;
}

.top-article ul {
  margin: .5em 0;
}

.top-article ul li {
  list-style-type: disc;
  margin-left: 1.5em;
}

.top-article hr {
  border: 0 none;
  height: 1px;
  color: #88BAFF;
  background-color: #88BAFF;
  margin: 2.1% -2.1%;
}

.relational-contents >p {
  margin: 1% 0;
}

.relational-contents >header >a {
  float: right;
  font-size: small;
}

.contents .relational-contents header {
  background: none repeat scroll 0 0 #FFFFFF;
}

.contents .relational-contents section {
  margin: -2.1% -2.1% 2.1%;
  padding: 2.1%;
  border-top: solid 1px #88BAFF;
}

.contents .relational-contents section ul {
  border-top: solid 1px #88BAFF;
  padding: .5em 0;
}

.contents .relational-contents header + ul {
  border-top: none;
}

.contents .relational-contents header + section {
  border-top: none;
}

.contents .relational-contents section header {
  clear: both;
  overflow: hidden;
  background: none repeat scroll 0 0 #F5F5F5;
  margin: 2%;
}

.contents .relational-contents section header h3{
  margin: 1%;
  font-weight: bold;
}

.product-panel {
  clear: both;
  letter-spacing: -1em;
}

.product-panel >li {
  letter-spacing: normal;
  width: 17.6%;
  margin: 1% 0 1% 2%;
  vertical-align: top;
  display: inline-block;
  font-size: x-small;

  /* for IE */
  >display: inline;
  >zoom: 1;
}

.product-panel >li a img {
  display: block;
  margin: 0 auto;
}

.remark {
  clear: both;
  border: solid 2px #F5F5F5;
  padding: 2%;
  font-size: x-small;
}

.product-description p {
  margin-bottom: 5%;
}

.product-image img {
/* width: 52%; */
  float: left;
}

.product-description {
  width: 48%;
  float: right;
}

.detail {
  border-collapse: collapse;
  background-color: #CCC;
}

.detail th {
  width: 16.5%;
  border: solid 1px #CCC;
  background-color: #F5F5F5;
  vertical-align: top;
  padding: 1%;
  text-align: left;
}

.detail td {
  border: solid 1px #CCC;
  width: 79%;
  padding: 1%;
  background-color: #FFF;
}

.detail img {
  width: 74%;
}

.lecture {
  margin: 2%;
}

.lecture dt, .lecture dd {
  display: inline-block;
  margin: 2% 0;
  
  /* for IE */
  >display: inline;
  >zoom: 1;
}

.lecture dt {
  width: 22.2%;
}

.lecture dd {
  vertical-align: top;
  width: 75%;
}

.products-list-menu .act {
  background-color: #E7F1FF;
}

.footer-article {
  clear: both;
  border:solid 1px #88BAFF;
  border-radius: 5px;
  overflow: hidden;
  padding: 2%;
}

.footer-article >header {
  margin: -2.1% -2.1% 2.1% -2.1%;
  padding: 2.1%;
  background: none repeat scroll 0 0 #F2F2F2;
  overflow: hidden;
}

.footer-article header >h2 {
  font-weight: bold;
}

.footer-article >p {
  margin: 2% 0;
}

.footer-article .notice {
  border: solid 1px #000;
  padding: .5em;
}

.page-top-link {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: right;
}