@charset 'utf-8';
/* =========================================================
 /products/use.css
========================================================= */
.caption {
  color: #005bac;
  font-size: 14px;
  padding: 10px 0 2px;
  display: block;
  }


#product-main-content {
  overflow: hidden;
  }

#use-content {
  }
  #use-content .section-ttl {
    padding: 20px 7px;
    }
  #use-list {
    margin-bottom: 25px;
    border-top: 1px solid #e3e1da;
    }
    .use-item {
      border-bottom: 1px solid #e3e1da;
      display: block;
      }
      .use-item a {
        background: url(../png/use_item_btn.png) 98% center no-repeat;
        color:#000;
        padding: 10px 190px 10px 10px;
        display: block;
        }
      .use-item.has-detail a {
        background: url(../png/use_item_arrow.png) 98% center no-repeat;
        color: #005bac;
        }
    .use-info{
      display: inline-block;
      padding: 0 0 0 20%;
      margin: 0;
      }

  #use-nav {
    margin-bottom: 15px;
    }
    #use-nav .cat-list {
      border-top: 1px solid #e3e1da;
      }
      #use-nav .cat-list {

        }
        .use-nav {
          background: #004f96;
        }
        #use-nav .cat-list .nav-item {
          border-bottom: 1px solid #e3e1da;
          border-left: 2px solid #00c0ff;
          }
          #use-nav .cat-list .nav-item a,
          #use-nav .cat-list .nav-item .current {
            background: #fff url(../png/icon_arrow_bottom_blue_small.png) 223px center no-repeat;
            font-size: 14px;
            padding: 13px 37px 12px 15px;
            display: block;
            }
          #use-nav .cat-list .nav-item .current {
            background-color: #00c0ff;
            background-image: url(../png/icon_arrow_bottom_white_small.png);
            color: #fff;
            }
          #use-nav .cat-list .nav-item .current:hover {
            color: #fff;
            }
      #use-nav .current .subcat-list {
        display: block;
        }
        .system-list-item {
          margin-bottom: 0;
          border: none;
          border-top: 1px solid #e3e1da;
          overflow: hidden;
          }
          .system-list-wrap {
            margin-bottom: 40px;
            border-bottom: 1px solid #e3e1da;
            }
          .system-list-wrap ul {
            display: none;
            }
            .system-list-item img {
              vertical-align: middle;
              float: right;
              }
            .system-list-item.bottom-level img {
              margin: 5px;
              }

            .system-list-item ul {
              display: none;
              }
            .system-list-item a {
              background: url(../png/use_nav_op.png) 99% center no-repeat;
              background-color: #0b5caa;
              display: block;
              color: #fff;
              font-size: 13px;
              padding: 12px 15px 8px 22px;
              }

              .system-list-item .no_link > a {
                cursor: default !important;
                background-image: none !important;
                -moz-opacity: 1 !important;
                opacity: 1 !important;
              }


            /* .top-level */
            .system-list-item.top-level a {
              background-color: #064081;
              display: block;
              color: #fff;
              font-size: 13px;
              padding: 12px 30px 8px 20px;
              }
              .system-list-item.top-level a.open {
                background-image: url(../png/use_nav_cl.png);
                }

              /* .system-list-item */
              .system-list-item a.open {
                background-image: url(../png/use_nav_cl.png);
                }
              .system-list-item.bottom-level a {
                background: url(../png/use_item_btn.png) 99% center no-repeat;
                padding-right: 190px;
                }
              .system-list-item.bottom-level.has-detail a {
                background: url(../png/use_item_arrow.png) 99% center no-repeat;
                }


              .system-list-item a span {
                background: url(../png/use_nav_list.png) 0 center no-repeat;
                padding-left: 12px;
                }
                .system-list-item.top-level a span {
                  background: none;
                  padding-left: 0;
                  }
              .system-list-item ul li a {
                background-color: #21c1fc;
                /*background-position: 37px center;*/
                padding-left: 37px
                }
                .system-list-item ul li ul li a {
                  background-color: #b6b6b6;
                  /*background-position: 52px center;*/
                  padding-left: 52px
                  }
                  .system-list-item ul li ul li ul li a {
                    background-color: #f5f5f5;
                    color: #010c16 !important;
                    /*background-position: 67px center;*/
                    padding-left: 67px
                    }
                  .system-list-item ul li ul li ul li ul li a {
                    background-color: #fff;
                    color: #010c16 !important;
                    /*background-position: 67px center;*/
                    padding-left: 82px
                    }
              .bottom-level a {
                background-color: #fff !important;
                color: #010c16 !important;
                }
/*
          .system-list-item a.current {
            background: #00c0ff url(/en/assets/images/common/use_nav_list_hover.png) 20px center no-repeat!important;
            color: #fff;
            padding: 10px 15px 10px 42px;
            }
*/
      .characteristic-nav-close span,
      .use-nav-close span {
        background: url(../png/use_content_close_btn.png) 116px 3px no-repeat;
        color: #005bac;
        font-size: 13px;
        text-align: center;
        width: 125px;
        margin: 20px auto;
        padding: 6px 0 3px;
        border: 1px solid #005bac;
        display: block;
        }


/* ----- #note-content ----- */
#note-content-wrap {
  clear: both;
  }
  .note-btn {
    float: left;
    }
.note-content {
  margin-top: 25px;
  }
  .note-content .section {
    margin-right: 25px;
    margin-left: 25px;
    }
#note-btn-wrap {
  padding-top: 17px;
  }
  #characteristic {
    margin-right: 10px;
    }
#characteristic-content,
#use-content {
  display: none;
  }

/* ----- cols ----- */
  .note-content .col3 .column {
    border-bottom: none;
    }
  .note-content .col2 .column {
    width: 48.4375%;
    margin: 0 0 30px 3.125%;
    }

/*.product-date-ttl {
  margin-left: -10px;
  }*/

.list-item {
color: #fff;
background-color: #064081;
padding: 12px 30px 8px 20px;
border:none;
margin: 0;
}



/* Responsive max-width: 768px
--------------------------------------------------------- */
@media screen and (max-width: 768px){
#note-content-wrap img {
  max-width: 100%;
  height: auto;
  }
  .use-item {
    background-size: 125px;
    }
  .note-btn {
    display: inline-block;
    }

/* ----- cols ----- */
.note-content .col3 .column {
  width: 46.10937%;
  padding: 0 1.72916%;
  }
  .note-content .col3 .column img {
    width: 100%;
    }

}


/* Responsive max-width: 640px
--------------------------------------------------------- */
@media screen and (max-width: 640px){
  
  /* 20171115 fix*/
  .sp_none{
    display: none !important;
  }
  /* 20171115 fix*/
  
    .img-wrap {
      margin-right: 0 !important;
      margin-left: 0 !important;
      float: none !important;
      }
  /* .use-item */
  .use-item {
    background-size: 100px;
    }
    .use-item a {
      background: url(../png/use_item_btn%402x.png) center bottom no-repeat;
      background-size: 170px 32px;
      padding-right: 15px;
      padding-bottom: 40px;
      margin-bottom: 8px;
      }
    .use-item.has-detail a {
      background-size: 16px 16px;
      padding-bottom: 8px;
      margin-bottom: 0;
      }
    /* .system-list-item */
    .system-list-item a {
      background-position: 98% center;
      }
    .system-list-item.bottom-level a {
      background: url(../png/use_item_btn%402x.png) center bottom no-repeat;
      background-size: 170px 32px;
      padding-right: 15px;
      padding-bottom: 40px;
      margin-bottom: 8px;
      }
    .system-list-item.bottom-level.has-detail a {
      background-size: 16px 16px;
      padding-bottom: 8px;
      margin-bottom: 0;
      }

/* ----- #note-content ----- */
#note-btn-wrap {
  text-align: center;
  padding: 0;
  }
  .note-btn {
    float: none;
    }
}


/* Responsive max-width: 480px
--------------------------------------------------------- */
@media screen and (max-width: 480px){
.note-content .col3 .column,
.note-content .col2 .column {
  width: auto;
  float: none;
  }
.note-content .col2 .column {
  margin-left: 0;
  }

}