/*
  Template:     onepress
  Theme Name:   onepress_child
*/


#solutionTop {
  background-image: url(../img/solution/solution_top.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.solutionTop {
  margin: 0 auto;
  padding: 6% 0 0;
  width: 100%;
}
.breadcrumb {
  background-color: rgb(0,0,0,0);
  margin-bottom: 5%;
}

.solutionTop_container {
  text-align: center;
}

.solutionTop-title_en {
  margin-bottom: 0;
}

.solutionTop-title_ja {
  margin: 0 0 5%;
}

.solutionTop-text {
  padding-bottom: 5%;
}

.solutionArrow {
  position: relative;
}

.solutionArrow::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 43%;
  width: 23px;
  height: 23px;
  border-top: 5px solid rgb(255,255,255,0.5);
  border-right: 5px solid rgb(255,255,255,0.5);
  transform: translateX(-50%) rotate(135deg);
}

#xr {
  background-image: url(../img/solution/xR_bg.png);
  background-repeat: no-repeat;
  background-size: cover; }

.xR-img {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}
@media (min-width: 382px) {
  .xR-img img {
    width: 75%;
  }
}
@media (min-width: 576px) {
  .xR-img img {
    width: 80%;
  }
}
@media (min-width: 768px) {
  .xR-img img {
    width: 60%;
  }
}
@media (min-width: 992px) {
  .xR-img img {
    width: 100%;
  }
}

.solution-MR {
  background-image: url(../img/solution/MR.png);
    background-size: 170px;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    background-position: -55px 0; }
.solution-AR {
  background-image: url(../img/solution/AR.png);
    background-size: 170px;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    background-position: -25px 0; }
.solution-VR {
  background-image: url(../img/solution/VR.png);
    background-size: 158px;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    background-position: -21px 0; }


#designWall {
  background-image: url(../img/solution/designWall_bg.png);
  background-repeat: no-repeat;
  background-size: cover; }

#beyond {
  background-image: url(../img/solution/beyond_bg.png);
  background-repeat: no-repeat;
  background-size: cover; }

.inline {
  display: inline-block;
}
.bg-dark-over {
  position: relative;
  z-index: 1;
  padding-top: 4px;
}
.bg-dark-over::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 400%;
  height: 100%;
  background-color: #000;
  z-index: -1;
}
.pageTitle-long-under_7 {
  margin-top: -7%;
}
.pb-10 {
  padding-bottom: 10%;
}
.paddingTop-3 {
  padding-top: 3%;
}
.paddingBottom-5 {
  padding-bottom: 5%;
}

@media (max-width: 992px) {
  .paddingTop-10 {
    padding-top: 10%;
  }
}

.bg-dark {
  background-color: #161619;
}

.bg-dark-gray {
  background-color: #161619;
}

.svg-white {
  fill: #fff;
}

a:hover, a:active {
  color: #fff;
  opacity: 0.8;
}

.font-size-s {
  font-size: 0.8em;
}

.fs-1p5 {
  font-size: 1.5rem;
}

.fs-1 {
  font-size: 1.8rem;
}

.fs-2 {
  font-size: 2rem;
}

.fs-2p5 {
  font-size: 2.5rem;
}

.fs-3 {
  font-size: 3rem;
}

.fs-md-3 {
  font-size: 1.9rem;
}

.fs-5 {
  font-size: 5rem;
}

.fs-md-5 {
  font-size: 3.5rem;
}

.fw-light {
  font-weight: 300;
}

.fw-regular {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-bolder {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.ls-1 {
  letter-spacing: .1em;
}

.ls-2 {
  letter-spacing: .2em;
}

.ls-3 {
  letter-spacing: .3em;
}

.ls-05 {
  letter-spacing: .05em;
}

.lh-base {
  line-height: 1.8em;
}

.lh-small {
  line-height: 1.6em;
}

.border-top-w {
  border-top: #fff solid 1px;
}

.border-btm-w {
  border-bottom: #fff solid 1px;
}

.border-bottom {
  border-bottom: #1D1D21 solid 1px;
}

.border-w {
  border: #fff solid 1px;
}

.border-b {
  border-color: #1D1D21;
}

.border-radius {
  border-radius: 10px;
}

.mb-15 {
  margin-bottom: 15%;
}

.py-3 {
  padding: 3% 0;
}

.py-6 {
  padding: 6% 0;
}

.py-7 {
  padding: 7% 0;
}

.pb-7 {
  padding-bottom: 7%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat','Noto Sans JP', sans-serif;
}

img {
  max-width: 100%;
}

.position-relative {
  position: relative;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.breadcrumb {
  font-size: 0.8em;
}


@media (min-width: 768px) {
  .fs-md-4 {
    font-size: 4rem;
  }
  .fs-md-3 {
    font-size: 3rem;
  }
  .fs-md-5 {
    font-size: 5rem;
  }
}

@media (min-width: 576px) {
  html {
    font-size: 62.5%;
  }
  .solutionTop {
    margin: 0 auto;
    padding: 6% 0 0;
    width: 800%;
  }

  .breadcrumb {
    background-color: rgb(0,0,0,0);
    margin-bottom: 5%;
  }

  #solutionTop {
    background-image: url(../img/solution/solution_top.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .solutionTop {
    margin: 0 auto;
    padding: 6% 0 0;
    width: 100%;
  }

  .solutionTop_container {
    text-align: center;
  }

  .solutionTop-title_en {
    margin-bottom: 0;
  }

  .solutionTop-title_ja {
    margin: 0 0 5%;
  }

  .solutionTop-text {
    padding-bottom: 5%;
  }

  .archive-case__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.products__tag-wrap {
  margin: 0 -8px;
  margin: 0 -1%;
}

.products__tag {
  padding: 4px 14px;
  margin: 8px;
  margin: 1%;
  background: #505050;
  border-radius: 15px;
  font-weight: 400;
  font-size: 0.9em;
}


@media (min-width: 320px) {
  .archive-case__box a {
    padding-top: 55%!important;
    overflow: hidden;
    position: relative;
  }

  .archive-case__img-wrap img {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-width: 100%;
    height: 200%!important;
    max-width: none;
  }
}

@media (min-width: 430px) {
  .archive-case__box a {
    padding-top: 45%!important;
    overflow: hidden;
    position: relative;
  }

  .archive-case__img-wrap img {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-width: 100%;
    height: 200%!important;
    max-width: none;
  }
}

@media (min-width: 992px) {
  .archive-case__box a {
    padding-top: 100%!important;
    overflow: hidden;
    position: relative;
  }

  .archive-case__img-wrap img {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-width: 100%;
    height: 100%!important;
    max-width: none;
  }
}



.archive-case__box {
  position: relative;
}

.archive-case__box a {
  padding-top: 70%;
  overflow: hidden;
  position: relative;
}

.archive-case__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.archive-case__img-wrap::after {
  content: "";
  height: 30%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.7)), color-stop(55%, rgba(0, 0, 0, 0.4)), to(transparent));
  background: linear-gradient(rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
}

.archive-case__img-wrap img {
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 100%;
  height: 130%;
  max-width: none;
}

html {
  font-size: 54.5%;
}