@charset "UTF-8";
/*
|---------------------------------------------------------------
| アームズ・スーパーレジェーラ ito エンジニアリング テーラーメイドプログラム
|---------------------------------------------------------------
*/
.mbsc-arms {
  --mbs-arms-order-bg-image-url: url(../../images/arms/arms_spinning_customized/bg_order.jpg);
}

.mbsc-arms-title__logo {
  width: 100%;
  max-width: 956px;
  margin: 0 auto 20px;
}

@media (max-width: 1000px) {
  .mbsc-arms-mv {
    background-image: url(../../images/arms/arms_spinning_customized/bg_main.jpg);
  }
  .mbsc-arms-mv__image {
    padding: 20px 0;
  }
}

.mbsc-arms-option-choices {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * PC
------------------------------------------------*/
.mbsc-arms-choice-preview {
  width: 100%;
  padding-top: 18.56%;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="1"] {
  right: 20.62%;
  bottom: 16%;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="1"] .mbsc-arms-choice-group__content::before {
  display: block;
  width: 160px;
  bottom: 100%;
  right: 100%;
  transform-origin: right bottom;
  transform: translate(0%, 0%) rotate(45deg);
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="1"] .mbsc-arms-choice-group__content::after {
  width: 160px;
  bottom: 100%;
  right: 40%;
  transform-origin: right bottom;
  transform: translate(0%, 0%) rotate(45deg);
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="2"] {
  left: 14.43%;
  bottom: 16%;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="2"] .mbsc-arms-choice-group__content::after {
  top: 100%;
  right: 100%;
  transform-origin: right top;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="3"] {
  top: 0;
  right: 0;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="3"] .mbsc-arms-choice-group__content::after {
  width: 160px;
  top: 100%;
  left: 0;
  transform-origin: right top;
  transform: translate(-50%, 50%) rotate(-45deg);
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="4"] {
  top: 0;
  left: 0;
  right: 0;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="4"] .mbsc-arms-choice-group__content::after {
  width: 160px;
  top: 100%;
  right: 0;
  transform-origin: right top;
  transform: translate(-50%, 50%) rotate(-45deg);
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="5"] {
  top: 0;
  left: 0;
}
.mbsc-arms-choice-preview .mbsc-arms-choice-group[data-index="5"] .mbsc-arms-choice-group__content::after {
  width: 160px;
  top: 100%;
  right: 0;
  transform-origin: right top;
  transform: translate(-50%, 50%) rotate(-45deg);
}

/*
 * SP
------------------------------------------------*/
@media (max-width: 1000px) {
  .mbsc-arms:not([data-choice-step=""]) .mbsc-arms__header,
  .mbsc-arms:not([data-choice-step=""]) .mbsc-arms__technologies {
    display: none;
  }
  .mbsc-arms .mbsc-arms-option,
  .mbsc-arms .mbsc-arms__order {
    display: none;
  }
  .mbsc-arms[data-choice-step="1"] .mbsc-arms-option[data-index="1"] {
    display: block;
  }
  .mbsc-arms[data-choice-step="2"] .mbsc-arms-option[data-index="2"] {
    display: block;
  }
  .mbsc-arms[data-choice-step="3"] .mbsc-arms-option[data-index="3"] {
    display: block;
  }
  .mbsc-arms[data-choice-step="4"] .mbsc-arms-option[data-index="4"] {
    display: block;
  }
  .mbsc-arms[data-choice-step="5"] .mbsc-arms-option[data-index="5"] {
    display: block;
  }
  .mbsc-arms[data-choice-step=order] .mbsc-arms__order {
    display: block;
  }
}

/*
 * 選択肢
------------------------------------------------*/
.mbsc-arms-option-choices__list {
  display: grid;
  gap: 15px;
}
@media (min-width: 1000.02px) {
  .mbsc-arms-option-choices__list__item.js--hasstock {
    order: -1;
  }
}
.mbsc-arms-option-choices[data-index="1"] .mbsc-arms-option-choices__list {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 15px;
}
.mbsc-arms-option-choices[data-index="2"] .mbsc-arms-option-choices__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.mbsc-arms-option-choices[data-index="3"] .mbsc-arms-option-choices__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.mbsc-arms-option-choices[data-index="4"] .mbsc-arms-option-choices__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.mbsc-arms-option-choices[data-index="5"] .mbsc-arms-option-choices__list {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1000.02px) {
  .mbsc-arms-option-choices[data-index="1"] .mbsc-arms-option-choices__list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mbsc-arms-option-choices[data-index="2"] .mbsc-arms-option-choices__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 30px;
  }
  .mbsc-arms-option-choices[data-index="3"] .mbsc-arms-option-choices__list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mbsc-arms-option-choices[data-index="4"] .mbsc-arms-option-choices__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px clamp(25px, 3.33vw, 50px);
  }
  .mbsc-arms-option-choices[data-index="5"] .mbsc-arms-option-choices__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px clamp(25px, 3.33vw, 50px);
  }
}

.mbsc-arms-option-choice {
  max-width: 970px;
  margin: 0 auto;
}