/* stylelint-disable-next-line value-keyword-case */
.unq-bg-color,
.unq-bg-mono,
.unq-bg-refreshed {
  width: 100%;
  max-width: 920px;
  height: auto;
  text-align: right;
  margin: 0 auto;
  position: relative;
}
.unq-bg-color::before,
.unq-bg-mono::before,
.unq-bg-refreshed::before {
  content: "";
  display: block;
}

.unq-bg-color {
  background-image: url("/-/media/Project/Canon/CanonJP/Website/business/solution/business-printer/office-mfp/lineup/positioningmap/images/color-back.png");
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .unq-bg-color {
    height: 73vw;
  }
}
.unq-bg-color::before {
  padding-top: 79%;
}

.unq-bg-mono {
  background: url("/-/media/Project/Canon/CanonJP/Website/business/solution/business-printer/office-mfp/lineup/positioningmap/images/mono/mono-back.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.unq-bg-mono::before {
  padding-top: 73.2%;
}

.unq-bg-refreshed {
  background: url("/-/media/BA90E12467B7491597A5CB3497E7F1B2.ashx");
  background-size: contain;
  background-repeat: no-repeat;
}
.unq-bg-refreshed::before {
  padding-top: 60%;
}

.unq-map-color,
.unq-map-mono,
.unq-map-refreshed {
  position: relative;
}
.unq-map-color__ul,
.unq-map-mono__ul,
.unq-map-refreshed__ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.unq-map-color__li,
.unq-map-mono__li,
.unq-map-refreshed__li {
  background: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  display: block;
}
.unq-map-color__li > a:hover,
.unq-map-mono__li > a:hover,
.unq-map-refreshed__li > a:hover {
  opacity: 0.8;
}
.unq-map-color__li > a > img,
.unq-map-mono__li > a > img,
.unq-map-refreshed__li > a > img {
  max-width: 100%;
  height: 100%;
}

.c3222f {
  left: 6%;
  padding-top: 58%;
  width: 24.347826087%;
}

.c431fc331f {
  left: 37%;
  padding-top: 52%;
}

.c3900 {
  left: 7%;
  padding-top: 35%;
}

.c5100 {
  left: 58%;
  padding-top: 22%;
}

.c3150 {
  left: 25%;
  padding-top: 7%;
}

.c7165 {
  left: 63%;
  padding-top: 1%;
}

.c7165,
.c3150,
.c5100,
.c3900,
.c431fc331f {
  width: 31.9565217391%;
}

.b8100 {
  left: 70%;
  padding-top: 20%;
}

.b6100 {
  left: 30%;
  padding-top: 24%;
}

.b4900f {
  left: 14%;
  padding-top: 48%;
}

.b6100,
.b8100,
.b4900f {
  width: 28.4782608696%;
}

.r4545 {
  left: 41%;
  padding-top: 22.2%;
}

.rc3530 {
  left: 12%;
  padding-top: 28%;
}

.rc5540 {
  left: 31.3%;
  padding-top: 7.3%;
}

.rc5550 {
  left: 51%;
  padding-top: 16.3%;
}

.rc5560 {
  left: 71%;
  padding-top: 2.3%;
}

.r4545,
.rc3530,
.rc5540,
.rc5550,
.rc5560 {
  width: 20.7608695652%;
}

@media screen and (min-width: 769px) {
  .of-imageLeft-wide[class] > .inner {
    flex-direction: column-reverse;
  }
}

.of-imageTop[class] > .inner {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .of-imageTop[class] > .inner {
    flex-direction: column-reverse;
  }
}

.mod-box .mod-txt[class] > p {
  margin-top: 0;
}

.mod-media > .inner > .media[class] {
  min-width: 315px;
}

.mod-modal-content .mod-media-lyt > .inner {
  margin-left: inherit;
}
.mod-modal-content dl {
  padding-bottom: 8px;
}
.mod-modal-content dl > dt {
  font-weight: bold;
}
.mod-modal-content .content .mod-box[class] {
  padding: 10px;
  margin-top: 20px;
  max-width: 315px;
}

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