@charset "UTF-8";


/* //////////////////////////////////////////////////////////////////////////

    Common Settings

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Helper Class
========================================================================== */
/*  Display
========================================================================== */
.block { display: block !important; }
.inblock { display: inline-block !important; }
.inline { display: inline !important; }
.table { display: table !important; }
/*  Float
========================================================================== */
.fl { float: left !important; }
.floatR { float: right !important; }
.clear { clear: both; }
/*  Margin, Padding, Border
========================================================================== */
/* margin */
.mt0 { margin-top: 0 !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.ml10 { margin-left: 10px !important; }
.mr10 { margin-right: 10px !important; }
/* padding */
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pb20 { padding-bottom: 20px !important; }
.pr10 { padding-right: 10px !important; }
/* border */
.border {
    box-sizing: border-box;
    border: solid 1px #ddd;
}
/*  Columns
========================================================================== */
.col2Wrap,
.col3Wrap,
.col4Wrap {
    display: table;
    width: 100%;
}
.col2Wrap .col,
.col3Wrap .col,
.col4Wrap .col {
    float: left;
    box-sizing: border-box;
    margin: 0 1% 20px 0;
}
.col2Wrap .col:nth-child(2n),
.col3Wrap .col:nth-child(3n),
.col4Wrap .col:nth-child(4n) {
    margin-right: 0;
}
.col3Wrap .col {
    width: 32.6%;
}
.col2Wrap .col {
    width: 49.5%;
}
.col4Wrap .col {
    width: 24.25%;
}
/*  Container
========================================================================== */
.inner {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
.spItem {
    display: none;
}
.imgWrap {
    margin: 20px 0;
    text-align: center;
}
.imgWrap .col {
    display: inline-block;
}
.imgWrap.border {
    padding: 20px;
}
/* ==========================================================================
    Style
========================================================================== */
/*  Heading
========================================================================== */
/* Main Title */
.ttlMain {
    margin: 0 0 1em;
    color: #435b6b;
    font-size: 225%;
    font-weight: normal;
    line-height: 1.2;
}
/* Background */
.ttlBgImg {
    box-sizing: border-box;
    margin: 0 0 1em;
    padding: 15px;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_inner_ttl_h2.gif) no-repeat right center #2c7fab;
    color: #fff;
    font-size: 150%;
    font-weight: normal;
    line-height: 1.2;
}
.ttlBgBlue {
    box-sizing: border-box;
    margin: 0 0 25px;
    padding: 10px 15px;
    border: 1px solid #cee6ef;
    background: #e7f4fa;
    color: #435b6b;
    font-size: 132%;
    font-weight: normal;
}
/* Bold */
.ttlBold {
    font-size: 112.5%;
    font-weight: bold;
    margin-bottom: 20px;
}
.ttlBoldBlue {
    color: #0085c3;
    font-weight: bold;
    font-size: 113%;
    margin-bottom: 20px;
}
/* Border */
.ttlBorderLeft {
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 0 0 0 7px;
    border-left: 3px solid #0085c3;
    color: #435b6b;
    font-size: 113%;
    font-weight: normal;
}
.ttlBorderBottom {
    box-sizing: border-box;
    color: #435b6b;
    font-size: 113%;
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #b6b8b7;
    font-weight: bold;
}
.ttlBorderBottomBlue {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 0 0 2px;
    border-bottom: 1px solid #0085c4;
    font-weight: bold;
}
/*  Text
========================================================================== */
.textBlue { color: #0085c3 !important; }
.textRed { color: #e41a26 !important; }
.textBrown { color: #7e513a !important; }
.textBlack { color: #393939 !important; }
.textBold { font-weight: bold !important; }
.textNormal { font-weight: normal !important; }
.textSmall, small { font-size: 80% !important; }
.textRight { text-align: right !important; }
.textLeft { text-align: left !important; }
.textCenter { text-align: center !important; }
.textBorder {
    border: solid 1px #0085c3;
    color: #0085c3;
}
.textSymbol {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-weight: 500;
}
/*  Link
========================================================================== */
.linkArrow {
    padding: 0 0 0 1em;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_arrow.png) no-repeat left .3em;
    color: #0085c3;
}
.linkBlue { color: #0085c3 !important; }
.linkLine { text-decoration: underline; }
.linkLine:hover { text-decoration: none; }
/*  Box
========================================================================== */
/* Border */
.boxBorder {
    box-sizing: border-box;
    margin: 25px 0;
    padding: 25px;
    border: 3px solid #cee6ef;
}
.boxBorderThin {
    box-sizing: border-box;
    margin: 25px 0;
    padding: 25px;
    border: 1px solid #cee6ef;
}
.boxBorderGray {
    box-sizing: border-box;
    margin: 25px 0;
    padding: 25px;
    border: 1px solid #dedede;
}
.boxBorderDarkBlue {
    box-sizing: border-box;
    border: solid 1px #435b6b;
}
.boxBorderDarkBlue .boxHead {
    padding: .5em 0;
    background: #435b6b;
    color: #fff;
    font-weight: normal;
    text-align: center;
}
.boxBorderDarkBlue .boxBody {
    box-sizing: border-box;
    padding: 20px;
}
/* Background */
.boxBlue {
    box-sizing: border-box;
    padding: 20px;
    background: #e7f4fa;
    color: #0085c3;
}
/*  Table
========================================================================== */
.tableBorder {
    width: 100%;
    border: solid 1px #435b6b;
}
.tableBorder th,
.tableBorder td {
    border: solid 1px #435b6b;
    padding: .5em;
    vertical-align: middle;
}
.tableBorder td.textSymbol {
    font-size: 112.5%;
    line-height: 1;
}
.tableBorder th {
    background: #e7f4fa;
}
.tableBorder thead th {
    background: #374d5C;
    color: #fff;
}
.tableBorder .bgDarkBlue {
    background: #374d5C;
    color: #fff;
}
.tableScroll {
    overflow-x: scroll;
}
.tableScroll::-webkit-scrollbar{
    width: 5px;
    background: #e7f4fa;
}
.tableScroll::-webkit-scrollbar:horizontal{
    height: 5px;
    background: #e7f4fa;
}
.tableScroll::-webkit-scrollbar-thumb{
    background: #3ea8dc;
    border-radius: 2px;
}
.tableScroll::-webkit-scrollbar-thumb:horizontal{
    background: #3ea8dc;
    border-radius: 2px;
}
/*  List
========================================================================== */
/* List Style */
.listNone {
    list-style: none !important;
}
.listDisc {
    padding: 0 0 0 1.2em;
    list-style: outside disc;
}
.listDecimal {
    padding: 0 0 0 1.2em;
    list-style: outside decimal;
}
.listDecimalStyled {
    counter-reset: number;
    display: table;
    width: 100%;
}
.listDecimalStyled li {
    list-style: none;
}
.listDecimalStyled li::before {
    counter-increment: number;
    content: counter(number);
    float: left;
    padding: 0 .5em;
    margin: 0 .5em 0 0;
    color: #fff;
    font-weight: bold;
    background: #0085c3;
}
/* Color */
.listBlue {
    color: #0185c5;
}
.listBlue span {
    color: #363636;
}
/*  Arrow
========================================================================== */
.arrowBottomAfter::after {
    content: '';
    display: block;
    height: 21px;
    margin: 15px 0;
    background: url(../../../../../img/ss/products/vision/visionbasics/arrow_box.jpg) no-repeat center center;
    background-size: auto 100%;
}
.arrowBottomBefore::before {
    content: '';
    display: block;
    height: 21px;
    margin: 15px 0;
    background: url(../../../../../img/ss/products/vision/visionbasics/arrow_box.jpg) no-repeat center center;
    background-size: auto 100%;
}
@media screen and (max-width: 640px) {
    .pcCol .col,
    .pcCol .col,
    .pcCol .col {
        float: none;
        width: 100%;
        margin: 0 0 20px;
    }
    .inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 2%;
    }
    .spItem {
        display: block;
    }
    .pcItem {
        display: none !important;
    }
}

/*  Text
========================================================================== */
.indent_t{
  text-indent: -0.5em;
  margin-left: 0.5em;
}

.textlink:link, .textlink:visited {
  color: #06c;
  text-decoration: none;
}

.textlink:hover {
  text-decoration: underline;
}

/*  compare_images
========================================================================== */
.compare_images {
  margin: 20px auto;
  border: solid 1px #c7c7c7;
}

.compare_images .bar {
  padding: 10px 8px;
  border-bottom: solid 1px #c7c7c7;
  background: linear-gradient(to right, #e7f4fa,#113251);
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.compare_images .image_table {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.compare_images .image_table .row {
  flex: 1 1 50%;
  display: table;
  table-layout: fixed;
  width: 50%;
  border-right: 1px solid transparent;
}

.compare_images .image_table .row:first-of-type {
  border-color: #c7c7c7;
}

.compare_images .image_table .col {
  display: table-cell;
  width: 50%;
  padding: 10px;
  border-right: 1px solid #c7c7c7;
  text-align: center;
}

.compare_images .image_table .col:last-of-type,
.compare_images .image_table .merged .col {
  border-color: transparent;
}

.compare_images .image_table .term {
  padding: 8px;
  background: #76aee2;
}

.compare_images .image_table .row:first-of-type .col:first-of-type .term {
  background: #e7f4fa;
}

.compare_images .image_table .row:last-of-type .col .term {
  background: #113251;
  color: #fff;
}

.compare_images .image_table .caption {
  display: none;
}

@media screen and (max-width: 640px){
  .compare_images {
    border: none;
  }

  .compare_images .bar {
    display: none;
  }

  .compare_images .image_table {
    display: block;
  }

  .compare_images .image_table .row {
    width:  100%;
    margin: 15px 0;
    border: 1px solid #c7c7c7;
  }

  .compare_images .image_table .caption {
    display: block;
    font-size: 24px;
    line-height: 1.25;
  }
}

/*  SVG Wrapper
========================================================================== */
.svg_graph {
  max-width: 720px;
  margin: 40px auto;
}

.prt_svg_wrap {
  position: relative;
  padding-top: 48.6%;
  overflow: hidden;
}

.prt_svg_wrap .svg_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.prt_svg_wrap svg {
  max-width: 100%;
  height: auto;
}

.prt_svg_wrap .svg_text1 {
  fill: #fff;
  font-size: 18px;
}

.prt_svg_wrap .svg_text2 {
  fill: #3d8d4b;
  font-size: 20px;
  font-weight: bold;
}


/*  Inquiry Banner
========================================================================== */
.prt_inquiry_banner {
  max-width: 720px;
  margin: 0 auto 40px;
}

.prt_inquiry_banner a,
.prt_inquiry_banner a * {
  text-decoration: none;
}

.prt_inquiry_banner a {
  display: block;
}

.prt_inquiry_banner a:hover {
  opacity: 0.7;
}

.prt_inquiry_banner .banner {
  position: relative;
  border: 3px solid #3e944d;
  background: #eaf4f6;
}

.prt_inquiry_banner .banner:after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 97px;
  height: 134px;
  background: url(/img/ss/common/icon_calculator_001.png) no-repeat center / contain;
}

.prt_inquiry_banner .caption {
  position: relative;
  padding: 14px 120px 14px 18px;
  background: #3e944d;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.143;
  overflow: hidden;
}

.prt_inquiry_banner .caption:before {
  content: "";
  position: absolute;
  top: 0;
  right: -405px;
  width: 720px;
  height: 400px;
  background: #6ba573;
  transform: rotate(-60deg);
}

.prt_inquiry_banner .caption:after {
  content: "";
  position: absolute;
  top: 0;
  right: -425px;
  width: 720px;
  height: 400px;
  background: #a3ccaa;
  transform: rotate(-60deg);
}

.prt_inquiry_banner .caption span {
  position: relative;
  z-index: 10;
}

.prt_inquiry_banner .content {
  padding: 10px 120px 14px 18px;
}

.prt_inquiry_banner .content p {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.prt_inquiry_banner .content .button {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 12px 0 0;
  padding: 8px 8px 9px;
  background: #ce3939;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}

.prt_inquiry_banner .content .button:after {
  content: "";
  display: inline-block;
  flex: 0 0 13px;
  height: 13px;
  margin-left: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  font-size: 0;
  vertical-align: middle;
  transform: rotate(45deg);
}


/*  Contents Button
========================================================================== */
.prt_sect_cv {
  max-width: 720px;
  margin: 48px auto;
}

.prt_sect_cv * {
  box-sizing:  border-box;
  text-align: inherit;
}

.prt_sect_cv:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: "";
  font-size: 0;
}

.prt_sect_cv .button {
  width: 48%;
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
}

.prt_sect_cv .button.inquiry {
  float: left;
  clear: left;
}

.prt_sect_cv .button.download {
  float: right;
  clear: right;
}

.prt_sect_cv .button a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.prt_inquiry_btn {
  display: table;
  position: relative;
  max-width: 380px;
  width: 100%;
  height: 60px;
  padding:  0 12px;
  border-radius: 5px;
  background: #1284c8;
  background: #3e944c;
  background: linear-gradient(#3e944c, #176a25);
  text-align: center;
  text-decoration: none;
  font-size: 15px;
}

.prt_inquiry_btn .label {
  display: table-cell;
  color: #fff;
  vertical-align: middle;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
}

.prt_inquiry_btn.icon01 > span:first-child {
  background: url(/img/ss/common/icon_download_001.png) no-repeat left center;
}

.prt_inquiry_btn .img01 {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-block;
  transform: translateY(-50%);
}
.ss_download_btn {
  position: relative;
  display: table;
  border-radius: 5px;
  background: #e60012;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #cc1717), color-stop(0, #e24140));
  background: -webkit-linear-gradient(#e24140, #cc1717);
  background: -webkit-gradient(linear, left top, left bottom, from(#e24140), to(#cc1717));
  background: linear-gradient(#e24140, #cc1717);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ss_download_btn.type01,
.ss_download_btn.type02 {
  padding: 6px 0 5px;
  width: 100%;
  text-align: center;
}

.ss_download_btn.type01,
.ss_download_btn.type02 {
  padding-right: 12px;
  padding-left: 12px;
}

.ss_download_btn.type01 {
  max-width: 360px;
  height: 45px;
}

.ss_download_btn.type02 {
  max-width: 350px;
  height: 60px;
}

.ss_download_btn.icon01>span:first-child {
  background: url(/img/ss/common/bg_icon_dl_001.png) no-repeat left center;
}

.ss_download_btn.icon02>span:first-child {
  background: url(/img/ss/common/bg_icon_dl_002.png) no-repeat left center;
}

.ss_download_btn .img01,
.ss_download_btn .img02 {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-block;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ss_download_btn .img01 img,
.ss_download_btn .img02 img {
  border: solid 1px #ccc;
}

.ss_download_btn .txt01,
.ss_download_btn .txt02 {
  display: table-cell;
  color: #fff;
  vertical-align: middle;
  word-break: break-word;
  font-weight: bold;
}

.ss_download_btn .txt01,
.ss_download_btn .txt02 {
  padding-left: 30px;
  width: -webkit-calc(100% - 30px);
  width: calc(100% - 30px);
  font-size: 16px;
  line-height: 1.2;
}

.ss_download_btn .txt01 {
  padding-right: 60px;
}

.ss_download_btn .txt02 {
  padding-right: 79px;
}


/*  SUB Page Bnr
========================================================================== */
.ss_subpage_bnr, .ss_subpage_bnr * {
    box-sizing: border-box;
}
.ss_subpage_bnr {
    margin: 30px 10px;
}
.ss_subpage_bnr img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
.ss_subpage_bnr .banner {
    display: block;
    position: relative;
    max-width: 580px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #2c7fab;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    word-break: break-word;
    overflow: hidden;
}
.ss_subpage_bnr .banner:hover {
    opacity: 0.7;
    text-decoration: none;
}
.ss_subpage_bnr .img {
    float: left;
    width: 104px;
    border: 1px solid #ccc;
}
.ss_subpage_bnr .inner {
    width: auto;
    margin: 0 0 0 130px;
    padding-bottom: 3em;
}
.ss_subpage_bnr .title {
    margin-bottom: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid #2c7fab;
    font-size: 18px;
}
.ss_subpage_bnr .title strong {
    font-weight: bold;
    vertical-align: baseline;
}
.ss_subpage_bnr .btn_wrap {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 124px;
    text-align: center;
}
.ss_subpage_bnr .btn_wrap .button {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 8px 36px;
    border-radius: 5px;
    background-color: #e24141;
    background: url(/img/ss/common/bg_icon_dl_001.png) no-repeat 12px center, linear-gradient(#e24141, #ca1616);
    color: #fff;
    font-weight: bold;
}

@media screen and (max-width: 640px) {
  .ss_subpage_bnr {
    margin: 20px 0;
  }

  .ss_subpage_bnr .banner {
    padding: 20px;
    max-width: none;
    width: 100%;
    line-height: inherit;
  }

  .ss_subpage_bnr .btn_wrap .button {
    padding: 8px 10px 8px 48px;
    width: 100%;
    text-align: left;
  }

  .ss_subpage_bnr .title {
    font-size: inherit;
  }
}

/*  anchorList
========================================================================== */
.prt_anchor_list_01 {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 40px 0 30px;
  padding: 4px 4px 18px;
  background: rgba(83, 83, 83, 0.05);
  font-size: 0;
}

.prt_anchor_list_01.style_col {
  flex-direction: column;
}

.prt_anchor_list_01>li {
  position: relative;
  margin: 0.75rem 0.875rem 0;
  padding-left: 1.125rem;
  font-size: 0.938rem;
  line-height: 1.33333;
}

.prt_anchor_list_01>li::before {
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  background: #2c7fab;
  content: "";
  font-size: 0;
}

.prt_anchor_list_01>li::after {
  position: absolute;
  top: 0.75rem;
  left: 0.375rem;
  width: 0.312rem;
  height: 0.312rem;
  border-top: 0.062rem solid #fff;
  border-left: 0.062rem solid #fff;
  content: "";
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.prt_anchor_list_01>li a {
  color: #06c;
  text-decoration: none;
}

.prt_anchor_list_01>li a:hover {
  text-decoration: underline;
}

.prt_anchor_list_01>li>a {
  font-weight: bold;
}

.prt_anchor_list_01>li ul {
  margin-left: -1.562rem;
  font-size: 0;
}

.prt_anchor_list_01>li ul li {
  position: relative;
  display: inline-block;
  margin: 0.375rem 0.5rem 0;
  padding-left: 0.875rem;
  font-size: 0.938rem;
}

.prt_anchor_list_01>li ul li::before {
  position: absolute;
  top: 0.875rem;
  left: 0.312rem;
  width: 0.375rem;
  height: 0.375rem;
  border-top: 0.125rem solid #2c7fab;
  border-left: 0.125rem solid #2c7fab;
  content: "";
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.prt_anchor_list_01>li.is_line{
  width: 100%;
}

/*  boxStyle
========================================================================== */
.box_style01 {
  padding: 20px;
  background: #e7f4fa;
}

.box_style01 > *:last-child {
  margin-bottom: 0;
}

.box_style01 .box_title {
  margin: 0 0 18px;
  color: #0085c3;
  font-weight: bold;
  font-size: 112.5%;
  line-height: 1.4em;
}

/*  floatImage
========================================================================== */
.float_image {
  overflow: hidden;
  margin-bottom: 35px;
}

.float_image .image {
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}

.float_image.no_wrap .image {
  margin-bottom: 0;
  text-align: center;
}

.float_image.no_wrap .txt {
  overflow: hidden;
  margin: 0;
}

@media screen and (max-width: 640px) {
  .float_image .image,
  .float_image.no_wrap .image {
    float: none;
    margin-bottom: 20px;
    margin-left: 0;
  }
}

/*  colBox
========================================================================== */
.col_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 980px;
  margin: 20px auto 40px;
}

.col_box.col_2 .col {
  width: 350px;
  margin: 0 70px 25px;
}

.col_box.col_3 .col {
  width: 255px;
  margin-right: 107px;
  margin-bottom: 25px;
}

.col_box.col_2 .col:nth-child(2n),
.col_box.col_3 .col:nth-child(3n) {
  margin-right: 0;
}

@media screen and (max-width: 640px) {
  .col_box {
    flex-direction: column;
  }

  .col_box > * {
    min-height: 0%;
  }

  .col_box.col_2 .col,
  .col_box.col_3 .col {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }
}

/*  columnItemStyle
========================================================================== */
.col_style01 > .thumb {
 text-align: center;
 margin-bottom: 5px;
}

.col_style01 > .title {
 font-weight: bold;
 color: #333;
 margin-bottom: 10px;
}

.col_style01 > .txt {
 color: #333;
 font-size: 87.5%;
}

/*  modalLink
========================================================================== */
.modal_link {
 display: block;
 transition: opacity 0.3s;
}

.modal_link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.modal_link:hover img {
  opacity: 1;
}

/*  desc_list
========================================================================== */
.desc_list {
  margin: 20px 0;
}

.desc_list > .item + .item {
  margin-top: 25px;
}
.desc_list > .item .title {
  font-weight: bold;
  font-size: 112.5%;
  margin-bottom: 5px;
}

/*  colorbox
========================================================================== */
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

#colorbox * {
  box-sizing: border-box;
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  margin: 0 auto;
  padding: 20px;
}
#cboxLoadedContent p {
  margin-top: 20px;
}
#cboxLoadedContent p em {
  font-weight: bold;
  font-style: normal;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

#cboxOverlay {
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}

#colorbox {
  outline: 0;
}

#cboxContent {
  margin-top: 44px;
  overflow: visible;
  background: #fff;
}

.cboxIframe {
  background: #fff;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxLoadingOverlay {
  background: #fff;
}

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px;
}
#cboxPrevious, #cboxNext, #cboxSlideshow {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -20px;
}

#cboxTitle {
  position: absolute;
  top: -44px;
  left: 0;
  color: #333;
  padding: 10px 15px;
  font-weight: bold;
  background: #f4f4f4;
  border-bottom: #c3c3c3 1px solid;
  width: 100%;
  min-height: 44px;
}

#cboxClose {
  position: absolute;
  top: -35px;
  right: 15px;
  display: block;
  text-indent: -999em;
  height: 25px;
  width: 25px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
#cboxClose:before {
  content: "";
  display: block;
  background: #666;
  border: #666 1px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 12px;
  right: 3px;
  width: 20px;
  height: 1px;
}
#cboxClose:after {
  content: "";
  display: block;
  background: #666;
  border: #666 1px solid;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 12px;
  right: 3px;
  width: 20px;
  height: 1px;
}
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

#cboxPrevious {
  background-position: 0px 0px;
  right: 44px;
}

#cboxPrevious:hover {
  background-position: 0px -25px;
}

#cboxNext {
  background-position: -25px 0px;
  right: 22px;
}

#cboxNext:hover {
  background-position: -25px -25px;
}

#cboxClose {
  background-position: -50px 0px;
}

#cboxClose:hover {
  background-position: -50px -25px;
}

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 66px;
}

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 44px;
}

.cboxSlideshow_on #cboxSlideshow:hover {
  background-position: -100px -25px;
}

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 44px;
}

.cboxSlideshow_off #cboxSlideshow:hover {
  background-position: -75px -25px;
}

/* modal_movie */
#modal_movie {
  margin: 0 auto;
  max-width: 620px;
  width: 100%;
}
#modal_movie .movie_wrap {
  position: relative;
  overflow: hidden;
  margin: 0 auto 25px;
  max-width: 620px;
  max-height: 355px;
  width: 100vw;
  height: 100vw;
}
#modal_movie .movie_ttl {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
}
#modal_movie .movie_txt {
  font-size: 15px;
}

/*  tableOfContents
========================================================================== */
.tableOfContents {
  max-width: 980px;
  margin: 40px 0;
}

.tableOfContents .tocHeader {
  padding: 10px;
  background: #cee6ef;
  font-weight: bold;
  text-align: center;
  user-select: none;
}

.tableOfContents .tocHeader span {
  margin: 0 0.25em;
  color: #06c;
  cursor: pointer;
}

.tableOfContents .tocHeader span:hover {
  color: #f00;
  opacity: 0.7;
}

.tableOfContents .tocHeader span[data-label-status='show']:before {
  content: attr(data-show-label);
}

.tableOfContents .tocHeader span[data-label-status='hide']:before {
  content: attr(data-hide-label);
}

.tableOfContents .tocBody {
  background: #e7f4fa;
}

.tableOfContents .tocInner {
  padding: 20px;
}

.tableOfContents .catname {
  margin: 8px 0 4px;
  font-weight: bold;
}

.tableOfContents .catname:first-child {
  margin-top: 0;
}

.tableOfContents .chapterList {
  display: flex;
  flex-wrap: wrap;
}

.tableOfContents .chapterList li {
  flex: 1 1 462px;
  margin: 0 4px;
}

.tableOfContents .chapterList a {
  display: inline-block;
  padding: 0 0 0 16px;
  color: #06c;
  text-align: left;
  text-indent: -16px;
}

.tableOfContents .chapterList a:hover {
  color: #f00;
  opacity: 0.7;
  text-decoration: none;
}

.tableOfContents .chapterList a:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: -2px 8px 0 0;
  border-width: 5px 4px 0;
  border-style: solid;
  border-color: #0085c3 transparent transparent;
  font-size: 0;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  .tableOfContents .chapterList {
    display: block;
  }
}

/*  recognitionResultImage
========================================================================== */
.recognitionResultImage_01 {
  display: flex;
  margin: 20px 0;
}

.recognitionResultImage_01 .frame {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 auto;
  padding: 24px 19px 20px 24px;
  box-sizing: border-box;
  border: 1px solid #b6b8b7;
}

.recognitionResultImage_01 .keyImage {
  flex: 1 0 auto;
  margin-right: 5px;
}

.recognitionResultImage_01 .resultImages .caption {
  font-size: 14px;
  line-height: 1.25;
}

.recognitionResultImage_01 .resultImages > .caption {
  margin: 0 0 10px;
  padding: 0 5px;
  text-align: right;
}

.recognitionResultImage_01 .resultImages .caption dl div {
  display: inline-block;
}
.recognitionResultImage_01 .resultImages .caption dl dt,
.recognitionResultImage_01 .resultImages .caption dl dd {
  display: inline;
}

.recognitionResultImage_01 .resultImages .caption dl div {
  text-align: left;
  margin-left: 1em;
}

.recognitionResultImage_01 .resultImages .caption dl div:first-child {
  margin-left: 0;
}

.recognitionResultImage_01 .resultImages .caption dl dt:after {
  content: ": ";
}

.recognitionResultImage_01 .resultImages .images {
  display: flex;
  justify-content: space-between;
}

.recognitionResultImage_01 .resultImages .image {
  flex: 1 0 auto;
  margin: 0 5px;
  text-align: center;
}

.recognitionResultImage_01 .resultImages .image .caption {
  display: flex;
  justify-content: space-around;
  margin: 10px 0 0;
}

.recognitionResultImage_01 .resultImages .image .caption span {
  flex: 1;
  display: inline-block;
  padding: 0 5px;
  font-size: inherit;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .recognitionResultImage_01 {
    display: block;
  }

  .recognitionResultImage_01 .frame {
    display: block;
    padding: 20px;
  }

  .recognitionResultImage_01 .resultImages .caption {
    margin: 20px 0;
    padding: 0;
    font-size: 20px;
  }

  .recognitionResultImage_01 .keyImage {
    margin: 0 0 20px;
  }

  .recognitionResultImage_01 .keyImage,
  .recognitionResultImage_01 .resultImages .image {
    flex: 1;
    text-align: center;
  }

  .recognitionResultImage_01 .resultImages .image.grow2 {
    flex-grow: 2;
  }
}

/* //////////////////////////////////////////////////////////////////////////

    Common Layout

////////////////////////////////////////////////////////////////////////// */
.header {
    width: 100%;
    border-top: solid 5px #2f4554;
    background: #fff;
}
.header .inner {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    box-sizing: border-box;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
/*    Header - Logo
========================================================================== */
.headLogo {
    margin-right: 10px;
    padding: 10px 0;
    flex-shrink: 0;
}
.logoMain span {
    display: block;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}


/*    Header - Contact
========================================================================== */
.headContact ul {
    display: -ms-flexbox;
    display: flex;
    margin-left: -5px;
}
.headContact li {
    margin-left: 5px;
    display: -ms-flexbox;
    display: flex;
}

#header .logoCi {
    margin-left: 10px;
}

.headContact li a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    min-width: 198px;
    text-align: center;
    border-radius: 0 0 5px 5px;
    min-height: 37px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    transition: opacity 0.3s;
    box-sizing: border-box;
    padding: 3px 44px 4px 58px;
}

.headContact li a:hover,
.headContact li a:focus {
    opacity: .7;
    text-decoration: none;
}

#header .btn_download a {
    background: #e60012;
}

#header .btn_contact a {
    background: #41a147;
}

#header .btn_tel a {
    background: #00284a;
}

#header .logoCi a {
    min-width: auto;
    padding: 0;
    border-radius: 0;
}

#header .headContact li a:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -2px;
    transform: translateY(-50%);
}

#header .btn_download a:before {
    width: 18px;
    height: 24px;
    background: url(/img/ss/common/bg_icon_dl_001.png) no-repeat center;
    background-size: contain;
}

#header .btn_contact a:before {
    width: 24px;
    height: 24px;
    background: url(/img/ss/common/bg_icon_contact_001.png) no-repeat center;
    background-size: contain;
}

#header .btn_tel a:before {
    width: 22px;
    height: 30px;
    background: url(/img/ss/common/bg_icon_tel_001.png) no-repeat center;
    background-size: contain;
}

.headContact .btn_tel {
    display: none;
}

#header .logoCi img {
    max-width: inherit;
}

@media screen and (max-width: 640px) {
    .header .inner {
        display: block;
        padding: 0;
    }
    .headLogo {
        margin: 0;
        padding: 6px 184px 6px 12px;
    }
    .logoMain {
    }
    .logoMain a {
        width: auto;
        display: block;
    }
    .logoMain span {
        white-space: inherit;
        font-size: 20px;
    }
    .logoMain img {
        vertical-align: bottom;
    }
    .headContact ul {
        margin-left: 0;
    }
    .headContact li {
        width: 33.33333%;
        margin-left: 0;
    }
    .headContact .btn_tel {
        display: -ms-flexbox;
        display: flex;
    }
    #header .logoCi {
        position: absolute;
        top: 12px;
        right: 12px;
        margin-left: 0;
        width: auto;
    }
    .headContact li a {
        width: 100%;
        padding: 40px 5px 5px;
        min-width: inherit;
        border-radius: 0;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: start;
        align-items: flex-start;
        font-size: 22px;
    }
    #header .headContact li a:before {
        top: 10px;
        left: 50%;
        font-size: 14px;
        transform: translateX(-50%);
    }
    #header .logoCi img {
        width: auto;
    }
}
/* ==========================================================================
    Global Navi
========================================================================== */
.gnav {
    position: relative;
    width: 100%;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_nav.png) repeat-x #2b414f;
    background-size: contain;
    color: #a4b4bc;
}
.gnav.isFixed {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
}
.gnavSpacer {
    position: relative !important;
    top: 0;
}
.gnav > ul {
    display: table;
    width: 980px;
    margin: 0 auto;
}
.gnav > ul > li {
    position: relative;
    display: table-cell;
    width: 20%;
    text-align: center;
    vertical-align: top;
}
.gnav button {
    width: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 100%;
    appearance: none;
}
.gnav button {
    position: relative;
    display: block;
    border-right: 1px solid #2f3d47;
    padding: 14px 0;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.gnav > ul > li:first-child button {
    border-left: 1px solid #2f3d47;
}
.gnav button:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 5px;
    top: 50%;
    right: 7px;
    margin-top: -3px;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_arrow_nav_down.png) no-repeat;
}
.isRunJs .gnav > ul > li > a:hover,
.isRunJs .gnav > ul > li > a.isActive,
.isRunJs .gnav > ul > li > span:hover,
.isRunJs .gnav > ul > li > span.isActive {
    background-color: #4a687d;
}
.gnavUnder {
    color: #a4b4bc;
    font-weight: bold;
}
.gnavSmall {
    display: block;
    font-size: 12px;
}
/* Child */
.gnavChild {
    z-index: 100;
    display: table;
    padding: 15px 0 5px;
    background: #3c5567;
    color: #fff;
    text-align: left;
}
.isRunJs .gnavChild {
    position: absolute;
}
.isRunJs .gnavBasic .gnavChild {
    width: 980px;
}
.gnavChild > li {
    float: left;
    width: 100%;
    max-width: 162px;
    margin: 0 0 10px;
    padding: 0 15px;
}
.isRunJs .gnavBasic .gnavChild > li {
    margin: 0;
}
.gnavChild a {
    display: block;
    padding-left: 10px;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_arrow_nav_right.png) no-repeat left 0.5em;
    color: #fff;
    text-decoration: none;
}
.gnavChild a:hover {
    color: #b2cbdd;
    text-decoration: underline;
}
.gnavChild dt {
    margin: 0 0 10px;
    font-size: 106.3%;
}
.gnavChild dd {
    margin: 0 0 10px;
}
.isHide {
    display: none;
}

/* ==========================================================================
    Breadcrumbs
========================================================================== */
.breadcrumb {
    margin: 0 0 30px;
    padding: 15px 0;
    background: #e7f4fa;
    color: #6a6a6a;
    font-size: 75%;
}
.breadcrumb a {
    color: #6a6a6a;
}
.breadcrumb ol {
    list-style: none;
}
.breadcrumb li {
    display: inline-block;
}
.breadcrumb li::after {
    content: '|';
    display: inline-block;
    margin: 0 10px;
}
.breadcrumb li:first-child::after {
    content: '>';
}
.breadcrumb li:last-child::after {
    display: none;
}
/* ==========================================================================
    Font Size
========================================================================== */
.fontSize {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    text-align: right;
}
.fontSize ul,
.fontSize p {
    display: inline-block;
}
.fontSize li {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #0085c3;
    background: #fff;
    color: #0085c3;
    vertical-align: middle;
    cursor: pointer;
}
.fontSize .current {
    color: #fff;
    background: #0085c3;
}
.toppage .fontSize {
    margin: 20px auto;
}
/* ==========================================================================
    Main
========================================================================== */
.contentsWrap {
    position: relative;
    display: table;
    width: 100%;
    max-width: 980px;
    box-sizing: border-box;
    margin: 10px auto;
    padding: 0 0 40px;
}
.main {
    width: 100%;
}
/* ==========================================================================
    Side
========================================================================== */
.side {
width: 25%;
max-width: 217px;
position: absolute;
top: 0;
left: 50%;
margin-left: 520px;
}
/*  Side - Navi
========================================================================== */
.sideNavWrap {
    padding: 0 0 20px;
    display: none;
}
.sideNav {
    margin: -1px 0 0;
    box-sizing: border-box;
    border-left: solid 1px #e2e2e2;
    border-right: solid 1px #e2e2e2;
    font-size: 88%;
}
.side button {
    width: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    appearance: none;
    font-size: 100%;
}
.sideNav:first-child {
    margin: 0;
}
.sideNavHead,
.side button {
    display: block;
    padding: 1.5em 1em;
    border-bottom: 1px solid #e2e2e2;
    font-weight: bold;
    background-position: 190px center;
    background-repeat: no-repeat;
    background-image: url(../../../../../img/ss/products/vision/visionbasics/side_nav_icon_on.png);
    cursor: pointer;
    text-align: left;
}
.sideNav:first-child .sideNavHead {
    border-top: 1px solid #e2e2e2;
}
.sideNavBody {
    padding: 15px 10px;
    border-bottom: 1px solid #e2e2e2;
}
.sideNavBody dt,
.sideNavBody li {
    padding: 0 0 0 10px;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_arrow.png) no-repeat 0 .5em;
}
.sideNavBody dd,
.sideNavRuled li {
    margin: 0 0 5px;
    padding: 0 0 0 20px;
    background: url(../../../../../img/ss/products/vision/visionbasics/side_nav_icon_ttl.png) no-repeat 10px .5em;
}
.sideNavBody dt {
    margin: 0 0 5px;
}
.sideNavBody li {
    margin: 0 0 15px;
}
.sideNavBody li:last-child,
.sideNavBody dd:last-child {
    margin: 0;
}
.sideNavBody .sideNavChild {
    margin: 0 0 20px;
    padding: 0;
    background: none;
}
.sideNavBody .sideNavChild:last-child {
    margin: 0;
}
/* Active */
.sideNav a.isActive {
    color: #0085c3;
}
.isActive .sideNavHead {
    background-color: #e7f4fa;
    color: #0085c3;
}
/* Accordion - Close */
.isClose.sideNav {
    padding-bottom: 0 !important;
}
.isClose .sideNavHead {
    margin-bottom: 0 !important;
    background-image: url(../../../../../img/ss/products/vision/visionbasics/side_nav_icon_off.png);
}
.sideNavInner {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}
.isLoad .sideNavInner {
    transition: none;
}
/*  Side - Banner
========================================================================== */
.sideCv li {
    margin: 0 0 10px;
}
.sideCv li:first-child {
    height: 0;
}
.sideCv #sideDownload > div{
    display: none;
}
.sideCv li:last-child {
    margin: 0;
}
.sideCv.isFixed {
    position: fixed;
    top: 80px;
}
.sideCv.isBottom {
    position: absolute;
}

.sideBnr {
}
.sideBnr .series_box {
    display: block;
    width: 230px;
    padding: 10px;
    border: solid 2px #2c7fab;
    background: #fff;
    box-sizing: border-box;
}
.sideBnr .series_box .item {
    display: block;
    margin-bottom: 5px;
}
.sideBnr .series_box .item::after {
    display: table;
    content: "";
    clear: both;
}
.sideBnr .series_box .item .right {
    display: block;
    float: right;
    width: 110px;
}
.sideBnr .series_box .item .left {
    display: block;
    float: left;
}
.sideBnr .series_box .item .txt {
    display: block;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 5px;
}
.sideBnr .series_box .item .ttl {
    display: block;
    font-size: 15px;
    line-height: 1.2;
    color: #2c7fab;
    font-weight: bold;
}
.sideCv .ss_download_btn.type03 {
    max-width: 100%;
    height: 26px;
    padding: 6px 8px 5px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.sideCv .ss_download_btn.icon02 > span:first-child {
    background: url(../../../../../img/ss/products/vision/visionbasics/side_bnr_icon.png) no-repeat left center;
}
.sideCv .ss_download_btn .txt05 {
    padding-left: 20px;
    font-size: 12px;
    line-height: 1;
    display: table-cell;
    color: #fff;
    vertical-align: middle;
    word-break: break-all;
    font-weight: bold;
}
.sideCv a:hover{
    text-decoration: none;
}
.sideCv .ss_download_btn{
    position: relative;
    display: table;
    border-radius: 5px;
    background: #e60012;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #cc1717), color-stop(0, #e24140));
    background: -webkit-linear-gradient(#e24140, #cc1717);
    background: -moz-linear-gradient(#e24140, #cc1717);
    background: linear-gradient(#e24140, #cc1717);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.sideCv #sideDownload{
    margin-bottom: 20px;
}
.sideCv .catalog_box {
    display: block;
    width: 230px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e7e7e7;
    background: #fff;
}
.sideCv .catalog_box .catch {
    display: block;
    font-size: 16px;
    color: #d31c1e;
    font-weight: bold;
    margin-bottom: 10px;
}
.sideCv .catalog_box .catch.min {
    font-size: 13px;
}
.sideCv .catalog_box .item {
    display: block;
    margin-bottom: 10px;
}
.sideCv .catalog_box .item::after {
    display: table;
    content: "";
    clear: both;
}
.sideCv .catalog_box .item img {
    display: block;
    float: left;
    width: 46px;
    margin-right: 7px;
    border: 1px solid #ccc;
}
.sideCv .catalog_box .item .txt {
    display: block;
    color: #333;
    float: left;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    width: 140px;
}
/* ==========================================================================
    Summary
========================================================================== */
.summary,
.boxSummary {
    margin: 30px auto;
    padding: 20px;
    background: #e7f4fa;
}
.summary ol,
.summary ul {
    margin: 10px 0;
    color: #0185c5;
}
.summary ol:last-child,
.summary ul:last-child {
    margin-bottom: 0;
}
.summaryHead,
.boxSummary .boxHead {
    background: blue;
    box-sizing: border-box;
    margin: -20px -20px 20px;
    padding: 5px 0;
    background: #0185c5;
    color: #fff;
    font-size: 113%;
    font-weight: bold;
    text-align: center;
}
/* ==========================================================================
    Download
========================================================================== */
.btnDownload {
    margin: 20px 0;
    text-align: right;
}
.btnDownload a {
    display: inline-block;
    width: 40%;
    text-decoration: none;
}
.btnDownload a img {
    width: 100%;
}
.btnDownload.type02{
    margin: 20px 0 40px;
    text-align: right;
    width: auto;
    margin-left: auto;
}
.btnDownload.type02 a{
    max-width: 100%;
    padding: 15px 80px 12px 20px;
    width: auto;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border-radius: 2px;
    background: #e60012;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #cc1717), color-stop(0, #e24140));
    background: -webkit-linear-gradient(#e24140, #cc1717);
    background: -moz-linear-gradient(#e24140, #cc1717);
    background: linear-gradient(#e24140, #cc1717);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.btnDownload.type02 a:hover{
    text-decoration: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.btnDownload.type02 a .txt {
    font-size: 110%;
    line-height: 1;
    display: block;
    color: #fff;
    word-break: break-all;
    font-weight: bold;
    background: url(../../../../../img/ss/products/vision/visionbasics/side_bnr_icon.png) no-repeat left center;
    padding-left: 30px;
    box-sizing: border-box;
}
.btnDownload.type02 a .icon {
    width: 45px;
    border: 1px solid #ccc;
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.btnDownload.type02 a .icon img {
    width: 100%;
    height: auto;
}
.btnDownload.landscape a {
    padding-right: 96px;
}
.btnDownload.landscape a .icon {
    width: 72px;
}

/* ==========================================================================
    btnPageLink
========================================================================== */
.btnPageLink_01 {
  margin-top: 5px;
  margin-bottom: 30px;
  text-align: right;
}

.btnPageLink_01 a {
  position: relative;
  display: inline-block;
  padding: 13px 20px 13px 35px;
  background: #eef4fb;
  text-align: left;
  line-height: 1.2;
}

.btnPageLink_01 a:hover {
  color: #f00;
  opacity: 0.7;
  text-decoration: none;
}

.btnPageLink_01 a:before {
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -1px;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #5bcdda;
  content: "";
  transition: all 0.3s;
  transform: translateY(-50%);
}

/* ==========================================================================
    Pager
========================================================================== */
.pager ul {
    display: table;
    width: 100%;
    padding: 10px 0;
    border-top: solid 1px #b6b8b7;
    border-bottom: solid 1px #b6b8b7;
}
.pagerPrev,
.pagerNext {
    float: left;
    width: 50%;
}
.pagerPrev {
    box-sizing: border-box;
    border-right: solid 1px #b6b8b7;
}
.pagerNext {
    margin-left: -1px;
    border-left: solid 1px #b6b8b7;
}
.pagerNext:first-child {
    margin-left: 50%;
    box-sizing: border-box;
}
.pagerPrev a,
.pagerNext a {
    display: block;
    padding: 0 10%;
}
.pagerPrev a {
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_pager_prev.png) no-repeat left center;
}
.pagerNext a {
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_pager_next.png) no-repeat right center;
}
.pagerPrev a:hover,
.pagerNext a:hover {
    background-color: #ecf9ff;
    text-decoration: none;
}
.pager dt {
    color: #0085c4;
    font-size: 113%;
    font-weight: bold;
}
.pager dd {
    font-size: 100%;
    display: block;
    padding-left: 10px;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_arrow.png) no-repeat 0 .5em;
}
.pagerTop {
    float: left;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: solid 1px #b6b8b7;
    text-align: center;
}
.pagerTop a {
    display: inline-block;
    padding: 0 0 0 1.5em;
    background: url(../../../../../img/ss/products/vision/visionbasics/pager_icon_back.png) no-repeat left center;
}
/* ==========================================================================
    CV Area
========================================================================== */
.cvArea {
    padding: 4% 0;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_cvarea.jpg) no-repeat center center #85c0de;
    background-size: cover;
}
.cvArea .inner {
    display: table;
}
.cvAreaCatalog {
    float: left;
    width: 60%;
}
.cvAreaCatalog > p {
    display: none;
}
.cvAreaCatalogBox a{
    background: #fff;
    display: block;
    padding: 25px;
    font-family:"Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    position: relative;
    transition: opacity 0.3s;
    height: 273px;
    box-sizing: border-box;
}
.cvAreaCatalogBox a:hover{
    text-decoration: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.cvAreaCatalogBox a .ttl{
    margin-bottom: 10px;
    font-size: 194%;
    line-height: 1.2;
    color: #435b6b;
    display: block;
}
.cvAreaCatalogBox a .ttl.min {
    font-size: 150%;
}
.cvAreaCatalogBox a .ttl .em {
    color: #cc1818;
    font-size: 100%;
}
.cvAreaCatalogBox a .inner::after {
    content: "";
    display: table;
    clear: both;
}
.cvAreaCatalogBox a .thumb {
    width: 23%;
    padding: 0;
    display: block;
    float: left;
}
.cvAreaCatalogBox a .thumb > img{
    border: 1px solid #ccc;
    max-width: 100%;
}
 .cvAreaCatalogBox a .txt {
    width: 70%;
    font-size: 106.6%;
    color: #435b6b;
    float: right;
    margin-bottom: 60px;
}
 .cvAreaCatalogBox a .dl_btn{
    display: block;
    position: absolute;
    bottom: 25px;
    right: 4.25%;
    box-sizing: border-box;

 }
.cvAreaContact {
    float: right;
    width: 37%;
}
.cvBanner {
    margin: 30px auto 0;
    text-align: center;
}
.cvBanner li {
    display: inline-block;
    margin: 0 1.6%;
}
.cvBanner figcaption {
    font-weight: bold;
    text-align: left;
}
.cvBanner.download_page {
  font-size: 0;
}
.cvBanner.download_page li {
  margin: 0 12px;
}
.cvBanner.download_page li:first-child {
  margin-left: 0;
}
.cvBanner.download_page li:last-child {
  margin-right: 0;
}
/* ==========================================================================
    Contact
========================================================================== */
.contactArea {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #acd3e1;
    background: #435b6b;
    text-align: center;
}
.contactArea .inner {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
}
.contactAreaTel.pcItem {
    display: block;
    margin: 0 2% 0 0;
    width: 50%;
    text-align: left;
    flex: 1;
}
.contactAreaBtn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: -5px;
    width: 50%;
    flex: 1;
}
.contactAreaBtn li {
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 0 5px;
    width: 50%;
    flex: 1;
}
.contactAreaBtn li a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    position: relative;
    min-height: 47px;
    box-sizing: border-box;
    padding: 10px 26px 10px 45px;
    width: 100%;
}
.contactAreaBtn li a:hover,
.contactAreaBtn li a:focus {
    opacity: .7;
    text-decoration: none;
}
.contactAreaBtn li a.catalog {
    background: #e60012;
}
.contactAreaBtn li a.contact {
    background: #41a147;
}
.contactAreaBtn li a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
}
.contactAreaBtn li a.catalog:before {
    width: 18px;
    height: 24px;
    background: url(/img/ss/common/bg_icon_dl_001.png) no-repeat center;
    background-size: contain;
}
.contactAreaBtn li a.contact:before {
    width: 24px;
    height: 24px;
    background: url(/img/ss/common/bg_icon_contact_001.png) no-repeat center;
    background-size: contain;
}
.contactArea.isFixed {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 640px) {
    .contactArea {
        padding: 0;
    }
    .contactArea .inner {
        display: block;
    }
    .contactAreaTel {
        display: block;
        margin: 0;
    }
    .contactAreaBtn {
        width: 100%;
        margin-left: 0;
    }
    .contactAreaBtn li {
        margin-left: 0;
    }
    .contactAreaBtn li a {
        font-size: 28px;
    }

}
/* ==========================================================================
    Page Top
========================================================================== */
.pageTop {
    position: absolute;
    top: -71px;
    right: -100px;
    cursor: pointer;
}
.pageTop:hover {
    opacity: .7;
}
/* ==========================================================================
    Footer
========================================================================== */
.footer {
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_footer.jpg) no-repeat center top #e7f4fa;
}
/*  Footer - Navi
========================================================================== */
.footerNavWrap {
    display: table;
    padding: 30px 0;
}
.footerNav {
    float: left;
    width: 25%;
}
.footerNavHome {
    float: none;
    width: 100%;
}
.footerNavBasic {
    margin: 10px 0 20px;
}
.footerNavBasic dl {
    display: table;
    width: 100%;
    float: left;
}
.footerNav dt,
.footerNavHome {
    margin: 0 0 5px;
    font-size: 94%;
    font-weight: bold;
}
.footerNav dd dt {
    font-weight: normal;
}
.footerNav dd {
    margin: 0 0 3px;
}
.footerNav dd a {
    display: block;
    padding: 0 .5em 0 1em;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_arrow.png) no-repeat .3em .5em;
    font-size: 88%;
}
/*  Footer - Copyright
========================================================================== */
.footerCopy {
    padding: 15px 0;
    background: #0085c3;
    color: #fff;
    font-size: 75%;
}
.footerCopy .inner {
    display: table;
}
.footerCopy p {
    float: left;
    width: 50%;
}
.footerCopy ul {
    float: right;
    width: 50%;
    text-align: right;
}
.footerCopy li {
    display: inline;
    margin: 0 0 0 10px;
}
.footerCopy li:first-child {
    margin: 0;
}
.footerCopy a {
    color: #fff;
}
/* ==========================================================================
    Common Layout - SP
========================================================================== */
@media screen and (max-width: 640px) {
    .breadcrumb,
    .fontSize {
        display: none;
    }
    .btnDownload {
        text-align: center;
    }
    .btnDownload a,
    .btnDownload a img {
        width: auto;
    }
    .contentsWrap {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 5% 2%;
    }
    .main {
        float: none;
        width: 100%;
    }
    .side {
        display: block;
        position: relative;
        float: none;
        width: 100%;
        max-width: 100%;
        position: relative;
        top: 0;
        left: 0;
        margin-left: 0;
    }
    .pager {
        margin-bottom: 40px;
    }
    .toppage .cvAreaCatalog {
        display: none;
    }
    .cvAreaCatalog {
        width: 100%;
        margin: 0 0 20px;
    }
    .cvAreaCatalog img {
        width: 100%;
    }
    .cvAreaCatalogBox a {
        height: auto;
    }
    .cvAreaCatalogBox a .dl_btn img{
        max-width: 100%;
        height: auto;
    }
    .cvBanner {
        box-sizing: border-box;
        margin: 0;
        padding: 0 2%;
    }
    .cvBanner li {
        display: block;
        width: 100%;
        margin: 10px 0 0;
    }
    .cvBanner li:first-child {
        margin: 0;
    }
    .cvBanner li img {
        width: 100%;
    }
    .footerNav {
        text-align: center;
    }
    .footerNav a {
        font-size: 75%;
    }
    .footerCopy {
        padding: 15px;
        text-align: center;
    }
    .footerCopy .inner {
        padding: 0;
    }
    .footerCopy p {
        float: none;
        width: 100%;
        font-size: 75%;
    }
    .footerCopy ul {
        float: none;
        width: 100%;
        text-align: center;
    }
    .footerCopy li {
        font-size: 75%;
    }
    .sideNavWrap {
        padding: 0;
        display: block;
    }
    .sideNavHead, .side button {
        background-position: 95% center;
        background-image: url(../../../../../img/ss/products/vision/visionbasics/side_nav_icon_on_sp.png);
    }
    .isClose .sideNavHead {
        background-position: 95% center;
        background-image: url(../../../../../img/ss/products/vision/visionbasics/side_nav_icon_off_sp.png);
    }
}
/* //////////////////////////////////////////////////////////////////////////

    Toppage

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Main Image
========================================================================== */
.mainImgWrap {
    margin: 0 0 30px;
    background: url(../../../../../img/ss/products/vision/visionbasics/index_bg_main.jpg) no-repeat center top;
}
.mainImgWrap .inner {
    position: relative;
    color: #fff;
}
.mainImg {
    width: 600px;
    height: 344px;
}
.mainImgTitle {
    position: absolute;
    top: 19%;
    left: 4%;
    font-size: 40px;
}
.mainImgBtn {
    position: absolute;
    width: 317px;
    top: 55%;
    left: 4%;
}
/*  Index Navi - Common
========================================================================== */
.ttlTopNav {
    padding: 25px;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_ttl_default.jpg) no-repeat right center #2C7FAB;
    background-size: auto 100%;
    color: #fff;
    font-size: 175%;
    font-weight: normal;
    line-height: 1;
}
.sttlTopNav {
    margin: 0 0 1em;
    font-size: 125%;
    font-weight: normal;
    line-height: 1;
}
.topNav {
    display: table;
    width: 100%;
    max-width: 980px;
    margin: 0 auto 30px;
}
.topNav li {
    margin: 0 0 .5em;
}
.topNav a {
    display: block;
    padding: 0 0 0 22px;
    background: url(../../../../../img/ss/products/vision/visionbasics/index_icon_arrow.jpg) no-repeat left .3em;
    color: #0085c3;
    font-size: 94%;
}
.topNavBody {
    display: table;
    width: 100%;
    padding: 3% 4.5%;
    box-sizing: border-box;
    border-left: solid 1px #cee6ef;
    border-right: solid 1px #cee6ef;
    border-bottom: solid 1px #cee6ef;
    background: #fff;
}

.topContentsBody {
  padding: 30px;
  border-right: 1px solid #cee6ef;
  border-bottom: 1px solid #cee6ef;
  border-left: 1px solid #cee6ef;
}

.topFigureLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.topFigureLinks > .item {
  flex: 1 1 auto;
  line-height: 1.333;
}

.topFigureLinks > .item > a {
  display: block;
  text-decoration: none;
}

.topFigureLinks > .item > a:hover {
  opacity: 0.7;
}

.topFigureLinks > .item > a:hover img {
  opacity: 1;
}

.topFigureLinks .thumb {
  margin: 0 0 10px;
  text-align: center;
}

.topFigureLinks .caption {
  color: #0085c3;
  font-size: 18px;
}

.topFigureLinks .desc {
  font-size: 15px;
}

@media screen and (max-width: 640px) {
  .topContentsBody {
    padding: 30px 20px;
  }

  .topFigureLinks {
    display: block;
  }

  .topFigureLinks figure {
    display: flex;
  }

  .topFigureLinks .thumb {
    flex: 0 0 160px;
  }

  .topFigureLinks figcaption {
    padding: 0 0 0 24px;
  }

  .topFigureLinks .caption {
    font-size: 30px;
  }

  .topFigureLinks .desc {
    font-size: 26px;
  }
}

/*  Index Navi - Basic
========================================================================== */
.navBasicItem {
    display: table-cell;
    width: 25%;
    box-sizing: border-box;
    padding: 0 2%;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_line.jpg) repeat-y right top;
}
.navBasicItem:first-child {
    padding-left: 0;
}
.navBasicItem:last-child {
    padding-right: 0;
    background: none;
}
/*  Index Navi - Use
========================================================================== */
.navUse ul {
    display: table;
    padding: 3%;
    box-sizing: border-box;
    border-left: solid 1px #cee6ef;
    border-right: solid 1px #cee6ef;
    border-bottom: solid 1px #cee6ef;
    background: #fff;
}
.navUse li {
    float: left;
    width: 25%;
}
/*  Index Navi - Tips
========================================================================== */
.navTips,
.navMerit {
    float: left;
    width: 49%;
}
.navTips .topNavBody,
.navMerit .topNavBody {
    width: 88%;
    box-sizing: content-box;
}
.navTips {
    margin: 0 2% 0 0;
}
.navTips .topNavBody,
.navMerit .topNavBody {
    padding: 6%;
}
/*  Index Navi - History
========================================================================== */
.navHistory {
    width: 100%;
    box-sizing: border-box;
    max-width: 980px;
    margin: 0 auto 30px;
    padding: 8px;
    background: url(../../../../../img/ss/products/vision/visionbasics/con06_bg_line.jpg) repeat left top;
}
.ttlHistory {
    padding: 2.5% 3%;
    border-bottom: 1px solid #cee6ef;
    background: #fff;
    color: #586e7c;
    font-size: 175%;
    font-weight: normal;
    text-align: left;
    line-height: 1;
}
.ttlHistory span {
    display: inline-block;
    box-sizing: border-box;
    padding: .3em .5em;
    margin: 0 20px 0 0;
    color: #fff;
    font-size: 78%;
    background: #586e7c;
    line-height: 1;
    border-radius: 3px;
}
.navHistory ul {
    display: table;
    width: 100%;
    box-sizing: border-box;
    padding: 2.5% 3%;
    background: #fff;
}
.navHistory li {
    display: table-cell;
    width: 20%;
}
.navHistory a {
    display: block;
    padding: 0 0 0 22px;
    background: url(../../../../../img/ss/products/vision/visionbasics/index_icon_arrow.jpg) no-repeat left .3em;
    color: #0085c3;
    font-size: 94%;
}
/*    Index Navi - Basic
========================================================================== */
.indexNavBasic section {
    display: table-cell;
    width: 19%;
    padding: 0 3%;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_line.jpg) repeat-y left top;
}
.indexNavBasic section:first-child {
    background: none;
}
/*    Index Navi - Use
========================================================================== */
.indexNavUse ul {
    display: table;
}
.indexNavUse li {
    float: left;
    width: 25%;
}
/*    Index Navi - Improve
========================================================================== */
.navImprove .topNavBody {
    position: relative;
}
.improveItem {
    position: relative;
    float: left;
    width: 30.1%;
    margin: 0 4.5% 2.5% 0;
    box-sizing: border-box;
    border: 1px solid #cee6ef;
    background: #e7f4fa;
}
.improveItem:nth-child(3n){
    margin-right: 0;
}
.improveItem img {
    width: 100%;
}
.improveItem h3 {
    padding: 7% 5% 0;
    font-weight: normal;
}
.improveItem ul {
    display: table;
    width: 100%;
    box-sizing: border-box;
    padding: 5% 5% 10%;
}
.improveItem li {
    display: table-cell;
}
.improveItem a {
    display: block;
    padding: 0 0 0 22px;
    background: url(../../../../../img/ss/products/vision/visionbasics/index_icon_arrow.jpg) no-repeat left .25em;
    color: #0085c3;
    font-size: 94%;
}
.improveItemFilter {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
}
.improveItemDisable {
    border-color: #f0f8fa;
}
.improveItemDisable:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    background: #fff;
    opacity: .8;
}
.improveItemFilter p {
    position: relative;
    top: 50%;
    margin-top: -1em;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}

/*    Index Navi - Technologies
========================================================================== */
.topOurTechnologies .topContentsBody {
  padding: 10px 9px;
}

.topOurTechnologies .topFigureLinks {
  width: 980px;
  max-width: 100%;
  box-sizing: border-box;
}

.topOurTechnologies .topFigureLinks .item {
  flex-basis: 200px;
  margin: 20px;
}

/*    Index Navi - Platforms
========================================================================== */
.topOurPlatforms .topContentsBody {
  padding: 10px 0;
}

.topOurPlatforms .topFigureLinks {
  flex-wrap: nowrap;
}

.topOurPlatforms .topFigureLinks .item {
  flex-basis: 266px;
  margin: 20px 0;
  padding: 0 30px;
  border-left: 1px dotted #0085c3;
}

.topOurPlatforms .topFigureLinks .item:first-child {
  border-left: none;
}

@media screen and (max-width: 640px) {
  .topOurPlatforms .topFigureLinks .item {
    border-left: none;
  }
}

/*    Index Navi - FAQ
========================================================================== */
.topFaqSection {
  margin: 30px auto;
}

.topFaqChapter {
  margin: 24px 0 0;
}

.topFaqChapter:first-child {
  margin-top: 0;
}

.topFaqHeader {
  position: relative;
  padding: 8px 40px 8px 14px;
  background-color: #2c7fab;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.topFaqHeader:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  transform: translate(0, -50%);
}

.topFaqHeader:after {
  content: "";
  position: absolute;
  right: 24px;
  width: 8px;
  height: 8px;
}

.topFaqHeader[data-label-status='show']:after {
  bottom: 50%;
  border-right: 2px solid #2c7fab;
  border-bottom: 2px solid #2c7fab;
  transform-origin: right bottom;
  transform: translate(0, 5px) scaleY(1.125) rotate(45deg);
}

.topFaqHeader[data-label-status='hide']:after {
  bottom: 50%;
  border-right: 2px solid #2c7fab;
  border-top: 2px solid #2c7fab;
  transform-origin: right top;
  transform: translate(0, 4px) scaleY(1.125) rotate(-45deg);
}

.topFaqBody {
  padding: 18px 14px 24px;
  border-right: 1px solid #cee6ef;
  border-bottom: 1px solid #cee6ef;
  border-left: 1px solid #cee6ef;
  font-size: 15px;
  line-height: 1.2;
}

.topFaqBody >*:first-child {
  margin-top: 0;
}

.topFaqBody >*:last-child {
  margin-bottom: 0;
}

.topFaqBody p {
  margin: 18px 0;
}

.topFaqBody a {
  color: #0085c3;
}

@media screen and (max-width: 640px) {
  .topFaqHeader {
    padding: 16px 80px 16px 28px;;
    font-size: 40px;
  }

  .topFaqHeader:before {
    right: 20px;
    width: 48px;
    height: 48px;
  }

  .topFaqHeader:after {
    right: 44px;
    width: 16px;
    height: 16px;
  }

  .topFaqHeader[data-label-status='show']:after {
    border-right: 4px solid #2c7fab;
    border-bottom: 4px solid #2c7fab;
    transform: translate(0, 10px) scaleY(1.125) rotate(45deg);
  }

  .topFaqHeader[data-label-status='hide']:after {
    border-right: 4px solid #2c7fab;
    border-top: 4px solid #2c7fab;
    transform: translate(0, 8px) scaleY(1.125) rotate(-45deg);
  }

  .topFaqBody {
    font-size: 100%;
  }
}

/*    Index Navi - Study
========================================================================== */
.topStudy {
    padding: 4% 0;
    background: #fff;
}
.topStudy .inner {
    background: url(../../../../../img/ss/products/vision/visionbasics/con07_img01.jpg) no-repeat right bottom;
}
.topStudyHead {
    position: relative;
    margin: 0 0 1em;
    color: #435a6c;
    font-size: 215%;
    font-weight: normal;
    text-align: center;
}
.topStudyHead::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    top: 50%;
    margin: -2px 0 0;
    background: #cfe5f0;
}
.topStudyHead span {
    display: inline-block;
    position: relative;
    padding: 0 1em;
    background: #fff;
}
.topStudyBody {
    font-size: 94%;
    padding: 0 3%;
}
.topStudyBody li {
    color: #ef6411;
    font-weight: bold;
}
.topStudyBtn {
    margin: 5% 0 0;
    text-align: center;
}
.topStudyBtn a {
    display: inline-block;
    padding: 1% 2%;
    background: #0084c4;
    color: #fff;
    font-size: 150%;
    font-weight: bold;
    border-radius: 3px;
    transition: background .2s ease-in-out;
}
.topStudyBtn a:hover {
    background: #4da9d6;
    text-decoration: none;
}
.topStudyBtn span {
    margin: 0 0 0 .5em;
    font-size: 130%;
    line-height: 1;
}
/* ==========================================================================
    Toppage - SP
========================================================================== */
@media screen and (max-width: 640px) {
    .mainImgWrap {
        margin: auto;
        background-size: auto 220px;
    }
    .mainImgWrap .inner {
        padding: 0;
    }
    .mainImg {
        width: 100%;
        max-width: 100%;
        height: 0;
        padding: 0 0 34.375%;
    }
    .mainImgInner {
        width: auto;
        height: 0;
        padding: 41.7% 0 0;
        background: url(../../../../../img/ss/products/vision/visionbasics/index_bg_main.jpg) no-repeat center top;
        background-size: auto 100%;
    }
    .mainImgTitle {
      top: 14%;
      font-size: 36px;
    }
    .mainImgBtn.btnDownload {
        position: static;
        width: 100%;
        padding: 5% 0;
        text-align: center;
    }
    .topNav {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto 20px;
        padding: 0 2%;
    }
    .navBasicItem {
        display: block;
        width: 100%;
        padding: 1em 0;
        border-bottom: dotted 1px #0085c3;
        background: none;
    }
    .navBasicItem:last-child {
        border: 0;
    }
    .navBasicItem li:last-child {
        margin: 0;
    }
    .navUse li {
        width: 50%;
    }
    .navTips,
    .navMerit {
        float: none;
        width: 100%;
    }
    .navTips {
        margin: 0 0 20px;
    }
    .navTips .topNavBody,
    .navMerit .topNavBody {
        width: 100%;
        box-sizing: border-box;
        padding: 3%;
    }
    .navHistory {
        margin: 0 0 20px;
    }
    .navHistory li {
        display: inline-block;
        width: auto;
        margin: 0 1em 0 0 ;
    }
    .improveItem {
        width: 49%;
        margin: 0 2% 2% 0;
    }
    .improveItem:nth-child(even) {
        margin-right: 0;
    }
    .improveItem:nth-child(2n+1) {
        margin: 0 2% 2% 0;
    }
    .topStudy .inner {
        background: none;
    }
    .topStudyHead {
        line-height: 1.2;
    }
    .topStudyHead::before {
        display: none;
    }
    .topStudyHead span {
        padding: 0;
        font-size: 80%;
    }
    .topStudyBody {
        padding: 0;
    }
    .topStudyBtn a {
        font-size: 100%;
        font-weight: normal;
    }
    .contactArea .inner {
        padding: 0;
    }
    .improveItem a {
        background-position: left .5em;
    }
}

/* //////////////////////////////////////////////////////////////////////////

    Basic Beginner

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Constitution
========================================================================== */
.basicBeginner .constitution ol {
    counter-reset: number;
    display: table;
    margin: 20px 0;
}
.basicBeginner .constitution li {
    display: table;
    float: left;
    width: 49%;
    box-sizing: border-box;
    margin: 0 2% 2% 0;
    padding: 2%;
    border: solid 1px #ddd;
    list-style: none;
}
.basicBeginner .constitution li:nth-child(even) {
    margin-right: 0;
}
.basicBeginner .constitution li::before {
    counter-increment: number;
    content: counter(number);
    display: block;
    float: left;
    box-sizing: border-box;
    padding: 0 .5em;
    margin: 0 .5em 0 0;
    background: #0085c3;
    color: #fff;
    font-weight: bold;
}
.basicBeginner .constitution dt {
    display: inline-block;
    margin: 0 0 2%;
    font-weight: bold;
}
/* ==========================================================================
    Influence
========================================================================== */
/*  Influence - Question
========================================================================== */
.basicBeginner .influenceQuestion dt,
.basicBeginner .influenceQuestion dd {
    padding: 0 0 0 2.5em;
}
.basicBeginner .influenceQuestion dt::before,
.basicBeginner .influenceQuestion dd::before {
    display: inline-block;
    padding: 0 .5em;
    margin: 0 .5em 0 -2.5em;
    background: #0085c3;
    color: #fff;
}
.basicBeginner .influenceQuestion dt {
    margin: 0 0 10px;
}
.basicBeginner .influenceQuestion dt::before {
    content: 'Q';
}
.basicBeginner .influenceQuestion dd::before {
    content: 'A';
}
/*  Influence - Point
========================================================================== */
.basicBeginner .influencePoint ul {
    margin: 10px 0 0;
}
.basicBeginner .influencePoint li {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0 .5em;
    background: #435b6b;
    color: #fff;
    font-size: 95%;
}
.basicBeginner .influencePoint li:last-child {
    margin-right: 0;
}
/* ==========================================================================
    Basic Beginner - SP
========================================================================== */
@media screen and (max-width: 640px) {
    .basicBeginner .constitution li {
        display: block;
        width: 100%;
        margin: 0 0 2%;
    }
}
/* //////////////////////////////////////////////////////////////////////////

    Basic Illumination

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Outline
========================================================================== */
.basicIllumination .outline li {
    margin: 0 0 1em;
}
.basicIllumination .outline li:last-child {
    margin: 0;
}
.basicIllumination .outline dt {
    margin: 0 0 .5em;
    font-weight: bold;
}
.basicIllumination .outline dd {
    padding: 0 0 0 1em;
}
.basicIllumination .outline dd::before {
    content: '・';
    margin: 0 0 0 -1em;
}
/* ==========================================================================
    Step1
========================================================================== */
.basicIllumination .step1 ol.imgWrap li {
    position: relative;
    display: inline-block;
    width: 30%;
    padding: 2%;
    vertical-align: top;
}
.basicIllumination .step1 ol.imgWrap li:first-child::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 24px;
    margin: -12px 0 0;
    top: 50%;
    right: 5%;
    background: url(../../../../../img/ss/products/vision/visionbasics/arrow_brown_01.gif) no-repeat center center;
}
.basicIllumination .step1 ol.imgWrap li:last-child {
    border: solid 1px #ab8b74;
}
.basicIllumination .step1 ol.imgWrap li span {
    display: block;
    margin: 10px 0 0;
    font-size: 75%;
}
/* ==========================================================================
    Step2
========================================================================== */
.basicIllumination .step2Img {
    display: table-cell;
    width: 40%;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}
.basicIllumination .step2Img p {
    margin: 20px 0 0;
    padding: 0 10% 0 0;
    font-size: 75%;
    text-align: left;
}
.basicIllumination .step2List {
    display: table-cell;
    width: 60%;
    vertical-align: top;
}
/* ==========================================================================
    Step3
========================================================================== */
.basicIllumination .step3LedWrap {
    box-sizing: border-box;
    padding: 3%;
}
.basicIllumination .step3Led {
    display: table-cell;
    width: 60%;
    text-align: center;
}
.basicIllumination .step3Led li {
    display: inline-block;
    position: relative;
    width: 30%;
    box-sizing: border-box;
    padding: 1% 1% 1.5em;
    text-align: left;
    vertical-align: top;
}
.basicIllumination .step3Led li:nth-child(2){
    color: #de1b21;
}
.basicIllumination .step3Led li:nth-child(3){
    color: #0957a9;
    border: dotted 2px #3978ae;
}
.basicIllumination .step3Led dt {
    margin: 0 0 5px;
    font-size: 81.3%;
    font-weight: bold;
}
.basicIllumination .step3Led dd {
    font-size: 75%;
}
.basicIllumination .step3Led span {
    display: block;
    margin: 1em 0 0;
}
.basicIllumination .step3Led span:nth-child(2) {
    position: absolute;
    width: 80%;
    left: 10%;
    background: #fff;
    font-size: 121.4%;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}
.basicIllumination .step3Led img {
    width: 100%;
}
.basicIllumination .step3Column {
    position: relative;
    display: table-cell;
    width: 40%;
    box-sizing: border-box;
    padding: 3%;
    border: solid 1px #714135;
    border-radius: 5px;
    color: #714135;
    font-size: 75%;
}
.basicIllumination .step3ColumnHead {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em .5em;
    background: #714135;
    color: #fff;
    font-weight: normal;
}
/* ==========================================================================
    Image
========================================================================== */
.basicIllumination .bgYellow {
    padding: 20px 0;
    background: #fff7e2;
}
.basicIllumination .bgYellow span {
    color: #ed0014;
}
/* ==========================================================================
    Basic Illumination - SP
========================================================================== */
@media screen and (max-width: 640px) {
    .basicIllumination .step3Led,
    .basicIllumination .step3Column {
        display: block;
        width: 100%;
    }
    .basicIllumination .step3Column {
        margin-top: 30px;
    }
}
/* //////////////////////////////////////////////////////////////////////////

    Basic Middle

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Effect
========================================================================== */
.basicMiddle .goldlabel {
    padding: 2%;
    text-align: center;
}
.basicMiddle .goldlabel li {
    display: inline-block;
    width: 33.8%;
    max-width: 244px;
    text-align: left;
    vertical-align: top;
}
.basicMiddle .goldlabel li:last-child {
    width: 25.1%;
    max-width: 181px;
}
.basicMiddle .goldlabel .goldlabelTxt {
    display: block;
    width: 74.2%;
    margin: .5em 0 0;
    font-size: 75%;
}
.basicMiddle .goldlabel li:last-child .goldlabelTxt {
    width: 100%;
}
.basicMiddle .ccd figure {
    display: inline-block;
    position: relative;
    margin-left: -6.5em;
}
.basicMiddle .ccd figcaption {
    position: absolute;
    right: -6.5em;
    bottom: 0;
}
/* //////////////////////////////////////////////////////////////////////////

    Basic Size

////////////////////////////////////////////////////////////////////////// */
.basicSize .section02TrendEdgeList dt::before {
    content: '・';
}

/* //////////////////////////////////////////////////////////////////////////

    Basic Position

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Process
========================================================================== */
.basicPosition .algorithmProcess {
    margin: 30px 0 0;
}
.basicPosition .algorithmProcess .ttlBold {
    padding: 0 0 0 6em;
}
.basicPosition .algorithmProcess .ttlBold span {
    position: relative;
    display: inline-block;
    padding: 0 .5em;
    margin: 0 .5em 0 -6em;
    color: #fff;
    background: #0085c3;
}
.basicPosition .shapeTraxSearch .col {
    width: 40%;
}
.basicPosition .shapeTraxSearch .col:last-child {
    width: 59%;
}
/*  Quiz
========================================================================== */
.ttlQuestion {
    margin: 0 0 1em;
    font-size: 100%;
}
.ttlQuestion span {
    color: #0085c4;
    margin: 0 2em 0 0;
}
.listQuestion {
    display: table;
    margin: 1em 0;
    list-style: upper-latin inside;
}
.listQuestion li {
    float: left;
    margin: 0 20px 0 0;
    font-weight: bold;
}
.listQuestion span {
    font-weight: normal;
}
button.btnAnswer {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 0;
    font-size: 100%;
    appearance: none;
    position: relative;
    padding: 0 0 .5em 1em;
    border-bottom: dotted 1px #b6b8b7;
    cursor: pointer;
    text-align: left;
}
.btnAnswer::before {
    display: block;
    content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: solid 2px #0085c4;
    border-right: solid 2px #0085c4;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border: none\9;
    width: 10px\9;
    height: 10px\9;
    background: url(../../../../../img/ss/products/vision/visionbasics/bg_ancIE.png) no-repeat center center\9;
}
.boxAnswer {
    box-sizing: border-box;
    padding: 20px 0 20px 40px;
    border-bottom: solid 1px #b6b8b7;
}
.boxAnswerWrap {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}
.answerOption {
    font-size: 140%;
}
/*  Quiz
========================================================================== */
.listPrimerSummary {
    counter-reset: number;

    padding: 0 0 0 5em;
}
.listPrimerSummary li::before {
    display: inline-block;
    counter-increment: number;
    content: '【手順'counter(number)'】';
    margin: 0 0 0 -5em;
}
.tipsPrimer1 .boxSummary table {
    font-size: 70%;
    background: #fff;
}

.sensorCheckList {
    counter-reset: number;
    display: table;
    width: 100%;
    list-style: none;
}
.sensorCheckList li {
    float: left;
    width: 49%;
    box-sizing: border-box;
    margin: 0 2% 2% 0;
    padding: 2%;
    border: solid 1px #dedede;
}
.sensorCheckList li:nth-child(even) {
    margin: 0 0 2%;
}
.sensorCheckList li::before {
    counter-increment: number;
    content: counter(number);
    float: left;
    padding: 0 .5em;
    margin: 0 .5em 0 0;
    background: #0085c3;
    color: #fff;
    font-weight: bold;
}
.sensorCheckList dt {
    margin: 0 0 .5em;
    font-weight: bold;
}
.sensorCheckList li > dl > dd:last-child {
    box-sizing: border-box;
    margin: .5em 0 0;
    padding: 3%;
    background: #e7f4fa;
}


/* //////////////////////////////////////////////////////////////////////////

    Merit

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Calculator
========================================================================== */
.calculator table {
    width: 90%;
    margin: 0 auto;
}
.calculator th {
    width: 50%;
    padding: 5px 0;
    color: #0085c3;
    font-weight: bold;
    text-align: left;
}
.calculator input {
    margin-right: 10px;
}
.calculator input[type=button] {
    margin-top: 18px;
    width: 100%;
    font-size: 113%;
    font-weight: bolder;
    background-color: #0085c3;
    color: #fff;
    border: none;
    border-radius: 5px;
    line-height: 2.5;
}
.calculator td {
    font-weight: bold;
}
.calculator .boxBlue {
    margin: 20px 0 0;
    color: #393939;
    font-weight: bold;
    text-align: center;
}
.calculator .boxBlue span {
    font-size: 190%;
    color: #0085c3;
    margin-right: 2%;
    word-break: break-all;
    word-wrap: break-word;
}
.boxCalError {
    margin: 20px 0 0;
    padding: 2%;
    background: #f7d1d1;
    color: #cc1313;
    font-weight: bold;
}

.basicPrimer .image256Grad {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px 0;
    margin: 0 -10px;
}
.basicPrimer .table {
    width: 100%;
}
.basicPrimer .caption {
    display: table-cell;
    box-sizing: border-box;
    padding: .5em 1em;
    background: #333;
    color: #fff;
    font-size: 75%;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}



/* //////////////////////////////////////////////////////////////////////////

    History

////////////////////////////////////////////////////////////////////////// */
/* ==========================================================================
    Traceability
========================================================================== */
.historyTraceability .structure .border {
    display: table;
    width: 100%;
    padding: 3%;
}
.historyTraceability .structureItem {
    float: left;
    width: 25%;
    margin: 0 2.5% 0 0;
    padding: 0 10% 0 0;
    background: url(../../../../../img/ss/products/vision/visionbasics/traceability_img01.gif) no-repeat right top;
    background-size: 25% auto;
}
.historyTraceability .structureItem:last-child {
    padding: 0;
    margin: 0;
    background: none;
}
.historyTraceability .structureItem h4 {
    padding: 1em 0;
    background: #7d3a06;
    color: #fff;
    font-size: 112.5%;
    text-align: center;
}
.historyTraceability .structureItem div {
    display: table;
    width: 100%;
    box-sizing: border-box;
    margin: 1em 0 .7em;
    padding: .5em;
    border: solid 1px #7d3a06;
    color: #7d3a06;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}
.historyTraceability .structureItem p {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
.historyTraceability .structureItem p span {
    font-weight: normal;
}
.historyTraceability .structureItem li {
    border: solid 1px #7d3a06;
    margin: -1px 0 0;
    color: #7d3a06;
    font-size: 81.3%;
    text-indent: .5em;
}
.historyTraceability .structureItem table {
    width: 100%;
    border: solid 1px #7d3a06;
    color: #7d3a06;
}
.historyTraceability .structureItem td {
    border: solid 1px #7d3a06;
    font-size: 81.3%;
    text-indent: .5em;
}
@media screen and (max-width: 640px) {
    .historyTraceability .structureItem {
        float: none;
        width: 100%;
        padding: 0 0 12.5%;
        margin: 0 0 2.5%;
        background: url(../../../../../img/ss/products/vision/visionbasics/traceability_img01_sp.gif) no-repeat center bottom;
        background-size: 10% auto;
    }
}
/* //////////////////////////////////////////////////////////////////////////

    Spreq Download

////////////////////////////////////////////////////////////////////////// */
.spreqDownloadColWrap {
    display: table;
}
.spreqDownloadColWrap > li {
    float: left;
    width: 32%;
    margin: 0 2% 2% 0;
    padding: 20px;
    border: solid 1px #ddd;
    text-align: center;
    box-sizing: border-box;
}
.spreqDownloadColWrap > li.spreqDownloadCol1 {
    width: 100%;
}
.spreqDownloadColWrap > li:nth-child(3n+1){
    margin-right: 0;
}
.spreqDownloadColWrap > li > p img {
    border: solid 1px #ccc;
}
.spreqDownloadColWrap > li dt a {
    color: #0094d3;
    font-size: 120%;
    font-weight: bold;
}
.spreqDownloadColWrap > li dt {
    margin: 20px 0 10px;
}
.spreqDownloadColWrap > li dd + dd {
    margin: 10px 0 0;
}
.spreqDownloadColWrap > li.spreqDownloadCol1 p {
    display: table-cell;
    width: 30%;
}
.spreqDownloadColWrap > li.spreqDownloadCol1 dl {
    display: table-cell;
    width: 70%;
    text-align: left;
    vertical-align: top;
}
@media screen and (max-width: 640px) {
    .spreqDownloadColWrap > li {
        width: 100%;
    }
    .spreqDownloadColWrap > li.spreqDownloadCol1 p {
        display: block;
        width: 100%;
    }
    .spreqDownloadColWrap > li.spreqDownloadCol1 dl {
        display: block;
        width: 100%;
        text-align: center;
    }
    .spreqDownloadColWrap > li.spreqDownloadCol1 dd {
        font-size: 80%;
    }
}