@charset "UTF-8";
/* ==========================================================================
   カラーシミュレーター
========================================================================== */
.colorSimPage {
  margin: 87px auto 0;
  width: min(100% - 40px, 1100px);
  padding-bottom: 140px;
}
.colorSimPage .simAppBox {
  display: grid;
  grid-template-columns: 1fr 394px;
  gap: 0 54px;
}
.colorSimPage .selectItem {
  display: flex;
  justify-content: space-between;
}
.colorSimPage .selectItem .itemPhBox {
  flex: 0 1 190px;
  text-align: center;
}
.colorSimPage .selectItem .colorSizeBox {
  flex: 0 1 160px;
}
.colorSimPage .selectItem + .selectItem {
  margin-top: 41px;
}
.colorSimPage .goFormBox .goFormBtn {
  width: 216px;
  height: 50px;
  margin: 31px auto 0;
  color: #fff;
  background: linear-gradient(90deg, #F26EC8 0%, #8472F1 100%);
  border: none;
  padding: 0;
  display: block;
}
.colorSimPage .goFormBox .goFormBtn:hover {
  opacity: 0.8;
}
.colorSimPage .goFormBox .errorBox {
  margin-top: 2em;
  border: 2px solid #C70026;
  text-align: center;
  padding: 1em;
}
.colorSimPage .goFormBox .errorBox p {
  color: #C70026;
}
.colorSimPage .goFormBox .errorBox p + p {
  margin-top: 0.5em;
}
.colorSimPage .selectImages {
  text-align: center;
}
.colorSimPage .selectImages .img {
  width: 140px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.colorSimPage .selectImages .gender {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 31px;
  background: #EBEBEB;
  font-size: 1.2rem;
  margin-top: 11px;
}
.colorSimPage .selectImages .name {
  font-style: 1.4rem;
  margin-top: 11px;
}
.colorSimPage .popupSimBtn {
  margin-top: 11px;
  font-size: 1.4rem;
  display: inline-block;
}
.colorSimPage .popupSimBtn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: underline;
}
.colorSimPage .popupSimBtn span::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url("../../img/sim/array.svg") no-repeat center center/contain;
  flex-shrink: 0;
  margin-left: 7px;
}
.colorSimPage .selectColor ul {
  min-height: 184px;
  padding: 0 2px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-content: center;
}
.colorSimPage .selectColor li input {
  display: none;
}
.colorSimPage .selectColor li label {
  height: 100%;
  display: block;
  border: 2px solid #fff;
}
.colorSimPage .selectColor li input:checked + label {
  border-color: red;
}
.colorSimPage .selectSize {
  margin-top: 27px;
  width: 100%;
  height: 34px;
  border: 1px solid #94969F;
  border-radius: 6px;
  text-align: center;
}
.colorSimPage dialog {
  border: none;
  background: none;
}
.colorSimPage .simOverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.colorSimPage .simOverlay .overlayRow {
  background: #fff;
  width: min(100% - 40px, 885px);
  max-height: 95vh;
  padding: 49px 72px 2px 64px;
  overflow-y: auto;
  overscroll-behavior-y: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 0 65px;
  justify-content: center;
  align-content: start;
  position: relative;
}
.colorSimPage .simOverlay .overlayRow .simModalClose {
  width: 30px;
  position: absolute;
  top: 29px;
  right: 30px;
  cursor: pointer;
}
.colorSimPage .simOverlay .overlayRow .simModalClose:hover {
  opacity: 0.8;
}
.colorSimPage .simOverlay .simPopupBox {
  align-self: start;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  margin-bottom: 47px;
}
.colorSimPage .simOverlay .selectImages .name {
  text-align: left;
}
.colorSimPage .simOverlay .selectColor {
  margin-top: 10px;
}
.colorSimPage .simOverlay .selectColor ul {
  grid-template-columns: repeat(6, 1fr);
  min-height: 0;
  padding: 0 1px;
  gap: 6px;
}
.colorSimPage .simOverlay .selectBtnBox {
  margin-top: 15px;
}
.colorSimPage .simOverlay .selectBtnBox .currentItemBtn {
  background: #F5F5F5;
  color: #C70026;
}
.colorSimPage .simOverlay .selectBtnBox .currentItemBtn::after {
  display: none;
}
.colorSimPage .scene {
  border: 1px solid #94969F;
  position: relative;
  z-index: 1;
  align-self: start;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}
.colorSimPage .scene .sceneImgBox {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.colorSimPage .scene .sceneImgBox img {
  width: 100%;
  height: 629px;
  -o-object-fit: cover;
  object-fit: cover;
}
.colorSimPage .scene .changeImg {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.colorSimPage .scene .changeImg .mannequin {
  width: 271px;
  position: absolute;
  z-index: 1;
  top: 103px;
  left: 50%;
  translate: -50% 0;
  margin-left: -2px;
}
.colorSimPage .scene .changeImg .selectImgScr {
  width: 184px;
  position: absolute;
  z-index: 3;
  top: 166px;
  left: 50%;
  translate: -50% 0;
  margin-left: -3px;
}
.colorSimPage .scene .changeImg .selectImgPnt {
  width: 178px;
  position: absolute;
  z-index: 2;
  top: 275px;
  left: 50%;
  translate: -50% 0;
  margin-left: -2px;
}
.colorSimPage .scene .sceneSelect {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  align-self: end;
  margin: 0 0 17px 16px;
  max-width: 250px;
  height: 34px;
  padding-left: 20px;
  border-radius: 6px;
}

/* vue用 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

@media only screen and (max-width: 767px) {
  /* ==========================================================================
     カラーシミュレーター
  ========================================================================== */
  .colorSimPage {
    margin: 12.8205128205vw auto 0;
    width: 85.1282051282vw;
    padding-bottom: 29.2307692308vw;
  }
  .colorSimPage .simAppBox {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    gap: 14.6153846154vw 0;
  }
  .colorSimPage .selectItem .itemPhBox {
    flex: 0 1 44.1025641026vw;
  }
  .colorSimPage .selectItem .colorSizeBox {
    flex: 0 1 41.0256410256vw;
  }
  .colorSimPage .selectItem + .selectItem {
    margin-top: 14.1025641026vw;
  }
  .colorSimPage .goFormBox .goFormBtn {
    width: 216px;
    height: 50px;
    margin: 31px auto 0;
    color: #fff;
    background: linear-gradient(90deg, #F26EC8 0%, #8472F1 100%);
    border: none;
    padding: 0;
    display: block;
  }
  .colorSimPage .goFormBox .goFormBtn:hover {
    opacity: 0.8;
  }
  .colorSimPage .goFormBox .errorBox {
    margin-top: 2em;
    border: 2px solid #C70026;
    text-align: center;
    padding: 1em;
  }
  .colorSimPage .goFormBox .errorBox p {
    color: #C70026;
  }
  .colorSimPage .goFormBox .errorBox p + p {
    margin-top: 0.5em;
  }
  .colorSimPage .selectImages .img {
    width: 35.8974358974vw;
  }
  .colorSimPage .selectImages .gender {
    width: 23.0769230769vw;
    height: 7.9487179487vw;
    margin-top: 2.8205128205vw;
  }
  .colorSimPage .selectImages .name {
    margin: 2.8205128205vw 1em 0;
  }
  .colorSimPage .popupSimBtn {
    margin-top: 2.8205128205vw;
  }
  .colorSimPage .popupSimBtn span::after {
    width: 3.5897435897vw;
    height: 3.5897435897vw;
    margin-left: 1.7948717949vw;
  }
  .colorSimPage .pnt .selectImages .img {
    width: 26.1538461538vw;
  }
  .colorSimPage .selectColor ul {
    min-height: 47.1794871795vw;
    padding: 0 0.5128205128vw;
    gap: 1.0256410256vw;
  }
  .colorSimPage .selectColor li label {
    border: 0.5128205128vw solid #fff;
  }
  .colorSimPage .selectSize {
    margin-top: 6.9230769231vw;
    height: 8.7179487179vw;
    border: 0.2564102564vw solid #94969F;
    border-radius: 1.5384615385vw;
  }
  .colorSimPage .simOverlay .overlayRow {
    width: 83.5897435897vw;
    max-height: 95vh;
    padding: 12.5641025641vw 15.1282051282vw 12.5641025641vw 17.1794871795vw;
    grid-template-columns: 100%;
    gap: 8.9743589744vw 0;
  }
  .colorSimPage .simOverlay .overlayRow .simModalClose {
    width: 7.6923076923vw;
    top: 3.8461538462vw;
    right: 4.358974359vw;
  }
  .colorSimPage .simOverlay .simPopupBox {
    margin-bottom: 0;
  }
  .colorSimPage .simOverlay .selectColor {
    margin-top: 2.5641025641vw;
  }
  .colorSimPage .simOverlay .selectColor ul {
    min-height: 0;
    padding: 0 0.2564102564vw;
    gap: 1.5384615385vw;
  }
  .colorSimPage .simOverlay .selectBtnBox {
    margin-top: 3.8461538462vw;
  }
  .colorSimPage .scene {
    border: none;
    width: 84.6153846154vw;
    margin: 0 auto;
  }
  .colorSimPage .scene .sceneImgBox img {
    height: 128.2051282051vw;
  }
  .colorSimPage .scene .changeImg .mannequin {
    width: 48.9743589744vw;
    top: 26.4102564103vw;
    margin-left: -0.5128205128vw;
  }
  .colorSimPage .scene .changeImg .selectImgScr {
    width: 33.8461538462vw;
    top: 37.8205128205vw;
    margin-left: -0.5128205128vw;
  }
  .colorSimPage .scene .changeImg .selectImgPnt {
    width: 32.0512820513vw;
    top: 57.3076923077vw;
    margin-left: -0.2564102564vw;
  }
  .colorSimPage .scene .sceneSelect {
    margin: 0 0 3.5897435897vw 4.6153846154vw;
    max-width: 64.1025641026vw;
    height: 8.7179487179vw;
    padding-left: 5.1282051282vw;
    border-radius: 1.5384615385vw;
  }
}/*# sourceMappingURL=../map/simulator/style.css.map */