@charset "utf-8";
/* CSS Document */
/* ==============================================================
	カテゴリーから探す　製品名から探す
   ============================================================= */
.category {
  -js-display: flex; /*--- IE9 ---*/
  display: -moz-box; /*--- Android旧ブラウザ用 ---*/
  display: -webkit-box; /*--- Android旧ブラウザ用 ---*/
  display: -ms-flexbox; /*--- IE10 ---*/
  display: -webkit-flex; /*--- safari（PC）用 ---*/
  display: flex;
  height: 100%;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0;
  width: 900px;
}
.category a:hover {
  opacity: 0.6;
  -ms-filter: "category(opacity=60)";
  filter: category(opacity=60);
}
/* ==============================================================
	製品ナビゲーション
   ============================================================= */
#nav {
  border-top: solid 5px #013f98;
}
#nav-product {
  margin: 0 auto 12px;
  width: 900px;
}
#nav-product a:hover img {
  opacity: 0.6;
  -ms-filter: "nav-product(opacity=60)";
  filter: nav-product(opacity=60);
}
#nav-bord ul {
      align-content : stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: .8em 0 0;
}
#nav-bord ul li img{
padding: .3em 0;
}


#nav-option {
  display: flex;
  flex-wrap: wrap;
  height: 130px;
  list-style-type: none;
  margin: .8em auto 50px;
  padding: 0;
  width: 100%;
}
#nav-option li {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: 25%;
}
#nav-option li a {
  color: #555;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
#nav-option li ul {
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
}
#nav-option li:nth-child(1) ul {
  left: 100%;
  top: 0;
  width: 100%;
  z-index: 130;
}
#nav-option li ul li {
  height: 0;
  overflow: hidden;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  width: 100%;
}
#nav-option li ul li a {
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 40px;
  text-align: left;
}
#nav-option li ul li a:hover {
  color: #6699cc;
}
#nav-option li:hover ul li {
  box-shadow: 3px 3px 5px #ccc, 3px 0px 3px #ccc inset;
  height: 20px;
  overflow: visible;
}
#nav-option li:hover ul li:first-child {
  border-top: solid 5px #013f98;
  height: 35px;
}
#nav-option li:hover ul li:first-child a {
  background: #fff;
  color: #6699cc;
  font-size: 15px;
  letter-spacing: 3px;
  padding: 10px;
  text-align: center;
}
#nav-option li:hover ul li:last-child a {
  border-radius: 0 0 3px 3px;
  box-shadow: 3px 3px 5px #ccc;
  height: 20px;
}
/* ==============================================================
	セクション
   ============================================================= */
/*--- 基板 ---*/
.card01 {
  -js-display: flex; /*--- IE9 ---*/
  display: -moz-box; /*--- Android旧ブラウザ用 ---*/
  display: -webkit-box; /*--- Android旧ブラウザ用 ---*/
  display: -ms-flexbox; /*--- IE10 ---*/
  display: -webkit-flex; /*--- safari（PC）用 ---*/
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 0 60px 0;
  padding: 0;
  width: 100%;
}
.card01 .col-2 {
  -webkit-flex: none;
  flex: none;
  width: 590px;
}
.card01 .col-1 {
  margin: auto;
  padding-left: 20px;
}
/*--- 他 ---*/
.card02-flex {
  -js-display: flex; /*--- IE9 ---*/
  display: -moz-box; /*--- Android旧ブラウザ用 ---*/
  display: -webkit-box; /*--- Android旧ブラウザ用 ---*/
  display: -ms-flexbox; /*--- IE10 ---*/
  display: -webkit-flex; /*--- safari（PC）用 ---*/
  display: flex;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  width: 900px;
}
.card02 {
  margin: 0 0 70px 0;
  width: calc(33.3% - 20px);
}
.card02 img {
  display: block;
  margin: 0 auto 25px;
}
.card02 p {
  margin: 15px 0 0;
}
/* ==============================================================
	ボタン
   ============================================================= */
.btn-area {
  -js-display: flex; /*--- IE9 ---*/
  display: -moz-box; /*--- Android旧ブラウザ用 ---*/
  display: -webkit-box; /*--- Android旧ブラウザ用 ---*/
  display: -ms-flexbox; /*--- IE10 ---*/
  display: -webkit-flex; /*--- safari（PC）用 ---*/
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
a.btn01 { /*--- a　消去しない ---*/
  border: 3px solid #013f98;
  border-radius: 5px;
  background-color: #013f98;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, #fff 50%);
  color: #fff;
  display: inline-block;
  font-family: 游ゴシック体, 'Yu Gothic';
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  padding: 2px 3px;
  text-align: center;
  transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .8s ease 0s, background-color .8s ease;
  width: 280px;
}
/*--- IE---*/
@media all and (-ms-high-contrast:none) {
  a.btn01 {
    padding: 0.3em 0.3em 0.1em;
  }
}
.btn01, .btn01::before, .btn01::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .8s;
  transition: all .8s;
}
a.btn01:hover {
  background-color: #fff;
  background-position: -100% 100%;
  color: #6699cc;
}
/* ==============================================================
	タイトル
   ============================================================= */
/* SH */
#section-sh { /*--- リンク位置調節用 ---*/
  margin-top: -30px;
  padding-top: 30px;
}
/* ttl-etc */
.ttl-etc {
  -js-display: flex; /*--- IE9 ---*/
  display: -moz-box; /*--- Android旧ブラウザ用 ---*/
  display: -webkit-box; /*--- Android旧ブラウザ用 ---*/
  display: -ms-flexbox; /*--- IE10 ---*/
  display: -webkit-flex; /*--- safari（PC）用 ---*/
  display: flex;
}
.ttl-etc section {
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}
.ttl-etc .col-2 {
  -webkit-flex: 2;
  flex: 2;
  padding: 0 0 0 20px;
}
p.small {
  color: #aaa;
  font-size: 11px;
  letter-spacing: 2px;
  margin: 1em 0;
  padding-left: 1em;
  text-indent: -1em;
}