/* ↓ component css */
.main_vi_sct.main_vi_hm {
  background: #f3f3f3;
  z-index: 1;
}
.main_vi_sct.main_vi_hm .main_vi {
  max-width: 1366px;
  margin-top: 0;
  padding: 0;
}
.main_vi {
  max-width: 1008px;
  margin: 0 auto 8px;
  padding: 0 8px;
}
.main_vi .main_vi_img img {
  display: block;
}

.main_vi_device {
  display: none;
}
@media (max-width: 640px) {
  .main_vi { padding: 0; }
  .main_vi_device { display: block; padding: 16px 20px; background: #666666; }
  .main_vi_device p { margin-top: 8px; }
  .main_vi_device p:first-child { margin-top: 0; }
  .main_vi_device .main_vi_dvc_lead { font-size: 24px; line-height: 1.2; color: #ffffff; }
  .main_vi_device .main_vi_dvc_txt { line-height: 1.2; color: #ffffff; }
  .main_vi_device .main_vi_dvc_btn {}
  .main_vi_device .main_vi_dvc_btn a { position: relative; display: inline-block; padding: 8px 32px 8px 16px; background: #c2c2c2; text-decoration: none; color: #333333;  font-weight: bold; line-height: 1.2;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .main_vi_device .main_vi_dvc_btn a:after { display: block; width: 16px; height: 16px;
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -8px;
    background: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_m_right_03.png) 0 0 no-repeat;
    background-size: contain;
  }
}
.thumb_mn {
  display: block;
  overflow: hidden;
  background: url(../img/icon_s_right_01.png) 100% 50% no-repeat #ffffff;
}
/* ↑ component css */
/* ↓ icon css */
.external_w {
  background-image: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_s_external_02.png) !important;
}
.external {
  background-image: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_s_external_01.png) !important;
}
.detail_ttl .ico_end_l {
  padding: 0 40px 0 0;
  background-position: 100% -6px;
}
@media (max-width: 640px) {
  .detail_ttl .ico_end_l {
    padding: 0 32px 0 0;
    background-position: 100% 1px;
  }
}
/* ↑ icon css */
.drop_down, .drop_down ul li, .drop_down p {
  font-family: Arial, sans-serif;
}

.main_vi_img {
  position: relative;
}

.sp_ttl {
  font-size: 18px;
  padding: 15px 10px 20px;
  background-color: #fff;
}

.main_vi_device {
  padding: 36px 20px;
}
.main_vi_device h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #fff;
}
.main_vi_device .main_vi_dvc_txt {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  font-feature-settings: "palt";
}

.baloon {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.baloon .txt_inner {
  position: absolute;
  top: 32.82%;
  left: 26.65%;
  width: 64.64%;
}
@media screen and (max-width: 900px) {
  .baloon .txt_inner {
    width: 70%;
  }
}
@media screen and (max-width: 750px) {
  .baloon .txt_inner {
    top: 19.82%;
  }
}
.baloon h2 {
  font-size: 48px;
  color: #fff;
  font-feature-settings: "palt";
  margin-bottom: 6px;
}
@media screen and (max-width: 900px) {
  .baloon h2 {
    font-size: 38px;
  }
}
.baloon p {
  font-size: 14px;
  line-height: 1.571;
  letter-spacing: 0.025em;
  color: #fff;
  font-feature-settings: "palt";
}
@media screen and (max-width: 900px) {
  .baloon p {
    font-size: 12px;
  }
}
.baloon figure {
  max-width: 192px;
  width: 18.75%;
  position: absolute;
  top: 14.99%;
  left: 3.3%;
}
.baloon figure img {
  width: 100%;
  height: auto;
}

.lead_txt {
  max-width: 926px;
  width: 100%;
  margin: 72px auto 40px;
  padding: 8px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.025em;
  box-sizing: border-box;
  font-feature-settings: "palt";
}
@media screen and (max-width: 640px) {
  .lead_txt {
    background-color: #6c7074;
    max-width: 100%;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.005em;
    color: #fff;
    margin: 0;
    padding: 36px 16px;
  }
}

.sec_area {
  margin-bottom: 112px;
}
@media screen and (max-width: 640px) {
  .sec_area {
    margin-bottom: 42px;
  }
}

.sec_wrap {
  width: 100%;
  padding: 80px 8px;
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  .sec_wrap {
    padding: 42px 0;
  }
}
.sec_wrap a p {
  color: #333;
}
.sec_wrap:nth-child(even) {
  background-color: #5192aa;
}
.sec_wrap:nth-child(even) .detail .detail_ttl,
.sec_wrap:nth-child(even) .detail .detail_txt {
  color: #fff;
}
.sec_wrap:nth-child(even) a p {
  color: #fff;
}
.sec_wrap:nth-child(even) .txt {
  color: #fff;
}
.sec_wrap .detail {
  max-width: 910px;
  width: 100%;
  margin: 0 auto 48px;
  font-size: 0;
}
@media screen and (max-width: 640px) {
  .sec_wrap .detail {
    max-width: 100%;
    margin-bottom: 6px;
    padding: 0 12px;
    box-sizing: border-box;
  }
}
.sec_wrap .detail .detail_ttl {
  display: inline-block;
  vertical-align: top;
  width: 38.46%;
  font-size: 26px;
  line-height: 36px;
  font-feature-settings: "palt";
}
@media screen and (max-width: 640px) {
  .sec_wrap .detail .detail_ttl {
    font-size: 22px;
    width: 100%;
    margin-bottom: 20px;
  }
}
.sec_wrap .detail .detail_txt {
  display: inline-block;
  vertical-align: top;
  width: 61.54%;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 640px) {
  .sec_wrap .detail .detail_txt {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.005em;
  }
}
.sec_wrap .type_fig {
  max-width: 956px;
  width: 100%;
  margin: 0 auto;
  font-size: 0;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig {
    max-width: 100%;
    padding: 0 1.875%;
    text-align: left;
    box-sizing: border-box;
  }
}
.sec_wrap .type_fig.column3 li {
  width: 31.79%;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig.column3 li {
    width: 50%;
  }
}
.sec_wrap .type_fig li {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig li {
    width: 50%;
    margin-top: 24px;
  }
  .sec_wrap .type_fig li:nth-child(1), .sec_wrap .type_fig li:nth-child(2) {
    margin-top: 0;
  }
}
.sec_wrap .type_fig li a {
  display: block;
  width: 100%;
  text-align: center;
  opacity: 1;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
}
.sec_wrap .type_fig li a figure {
  width: 100%;
  max-width: 143px;
  margin: 0 auto 15px;
}
.sec_wrap .type_fig li a figure img {
  width: 100%;
  height: auto;
  display: block;
}
.sec_wrap .type_fig li a:hover {
  opacity: 0.5;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
  text-decoration: none;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig li a:hover {
    opacity: 1;
  }
}
.sec_wrap .type_fig li p {
  text-align: center;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig li p {
    padding: 0 5px;
    box-sizing: border-box;
  }
}
.sec_wrap .type_fig li p span {
  font-size: 16px;
  line-height: 1.375;
  margin-left: -24px;
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig li p span {
    font-size: 15px;
    margin-left: -1em;
    display: inline;
  }
}
.sec_wrap .type_fig li p span.p_tuning {
  padding-left: 8px;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_fig li p span.p_tuning {
    padding-left: 24px;
  }
}
.sec_wrap .type_txt {
  max-width: 910px;
  width: 100%;
  margin: 0 auto;
  font-size: 0;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_txt {
    max-width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }
}
.sec_wrap .type_txt li {
  width: 21.75%;
  display: inline-block;
  margin-left: 4.3%;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_txt li {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }
}
.sec_wrap .type_txt li:first-child {
  margin-left: 0;
}
@media screen and (max-width: 640px) {
  .sec_wrap .type_txt li:first-child {
    margin-top: 0;
  }
}
.sec_wrap .type_txt li a {
  display: block;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  background-color: transparent;
  opacity: 1;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
}
.sec_wrap .type_txt li a:hover {
  opacity: 0.5;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
  text-decoration: none;
}
.sec_wrap .type_txt li p {
  margin: 0;
  display: table;
  width: 100%;
}
.sec_wrap .type_txt li p span {
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
  color: #333;
  height: 46px;
  width: 100%;
  text-align: center;
}
.sec_wrap:nth-child(even) .type_txt li a {
  border: 1px solid #fff;
}
.sec_wrap:nth-child(even) .type_txt li p span {
  color: #fff;
}
.sec_wrap .sec_box {
  max-width: 910px;
  width: 100%;
  margin: 0 auto;
  font-size: 0;
}
@media screen and (max-width: 640px) {
  .sec_wrap .sec_box {
    max-width: 100%;
  }
}
.sec_wrap .sec_box .sec_box_inner {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  width: 48.02%;
}
@media screen and (max-width: 640px) {
  .sec_wrap .sec_box .sec_box_inner {
    width: 100%;
    margin-top: 42px;
  }
  .sec_wrap .sec_box .sec_box_inner:first-child {
    margin-top: 0;
  }
}
.sec_wrap .sec_box .sec_box_inner:first-child {
  margin-right: 3.96%;
}
@media screen and (max-width: 640px) {
  .sec_wrap .sec_box .sec_box_inner:first-child {
    margin-right: 0;
  }
}
.sec_wrap .sec_box .sec_box_inner .detail .detail_ttl {
  width: 100%;
  margin-bottom: 7px;
}
.sec_wrap .sec_box .sec_box_inner .detail .detail_txt {
  width: 100%;
}
.sec_wrap .sec_box .sec_box_inner .type_fig li {
  width: 100%;
}
@media screen and (max-width: 640px) {
  .sec_wrap .sec_box .sec_box_inner .type_fig li {
    width: 50%;
    margin-top: 24px;
  }
  .sec_wrap .sec_box .sec_box_inner .type_fig li:nth-child(1), .sec_wrap .sec_box .sec_box_inner .type_fig li:nth-child(2) {
    margin-top: 0;
  }
}
.sec_wrap .sec_box .sec_box_inner .type_fig li p.txt {
  margin-top: 15px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .sec_wrap .sec_box .sec_box_inner .type_fig li p.txt {
    width: 200%;
  }
}

.related_box h2 {
  font-size: 26px;
}
@media screen and (max-width: 640px) {
  .related_box h2 {
    font-feature-settings: "palt";
    font-size: 22px;
    margin-bottom: 36px;
  }
}

/*# sourceMappingURL=products_top.css.map */