/* 共通 */

.gpo-app .gpo-element {
  margin-top: 10px;
}

.gpo-app .gpo-label {
  margin-bottom: 8px!important;
  line-height: 1.4!important;
}

.option__caution p,
.gpo-helptext {
  padding-left: 1em!important;
  text-indent: -1em!important;
}

.gpo-helptext {
  display: inline-block;
  margin-top: 8px;
}

.gpo-app .gpo-dropzone {
  padding: 64px 20px!important;
}

/* 加工オプション */
.option__selector .gpo-choicelist.gpo-radio input+label:before,
.option__selector .gpo-choicelist.gpo-radio input+label::after,
.option__selector--pants .gpo-choicelist.gpo-radio input+label:before,
.option__selector--pants .gpo-choicelist.gpo-radio input+label::after {
  display: none;
}

.option__selector .gpo-choicelist input + label,
.option__selector--pants .gpo-choicelist input + label {
  border: 2px solid #B0B0B3;
  padding-left: 0!important;
  padding: 12px;
  max-width: 124px;
  width: 100%;
  transition: border-color 0.3s;
  &:hover {
    border-color: #154DA8;
    transition: border-color 0.3s;
  }
}

.option__selector .gpo-choicelist input + label span,
.option__selector--pants .gpo-choicelist input + label span {
  display: grid;
  place-items: center;
}


.option__selector .gpo-choicelist input + label span::before,
.option__selector--pants .gpo-choicelist input + label span::before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  width: 40px;
  background-color: #B0B0B3;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: background-color 0.3s;
}

.option__selector .gpo-choicelist:first-child input + label span::before,
.option__selector--pants .gpo-choicelist:first-child input + label span::before {
  mask-image: url(//unilist.jp/cdn/shop/t/109/assets/icon_option-menu-01.svg?v=10146953199876869771751450597);
}

.option__selector .gpo-choicelist:nth-child(2) input + label span::before {
  mask-image: url(//unilist.jp/cdn/shop/t/109/assets/icon_option-menu-02.svg?v=4543842337768894441751450598);
}

.option__selector .gpo-choicelist:nth-child(3) input + label span::before {
  mask-image: url(//unilist.jp/cdn/shop/t/109/assets/icon_option-menu-03.svg?v=11558032556221322781751450598);
}

.option__selector--pants .gpo-choicelist:nth-child(2) input + label span::before {
  mask-image: url(//unilist.jp/cdn/shop/t/109/assets/icon_option-menu-04.svg?v=93387311714057873191751450599);
}

.option__selector .gpo-choicelist input + label:hover,
.option__selector--pants .gpo-choicelist input + label:hover {
  color: #154DA8;
  transition: color 0.3s;
}
.option__selector .gpo-choicelist input + label:hover span::before,
.option__selector--pants .gpo-choicelist input + label:hover span::before {
  background-color: #154DA8;
  transition: background-color 0.3s;
}

.option__selector .gpo-ov-wrapper.horizontal,
.option__selector--pants .gpo-ov-wrapper.horizontal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* チェックされた時 */
.option__selector .gpo-choicelist input:checked + label,
.option__selector--pants .gpo-choicelist input:checked + label {
  border-color: #154DA8;
  color: #154DA8;
}

.option__selector .gpo-choicelist input:checked + label span::before,
.option__selector--pants .gpo-choicelist input:checked + label span::before {
  background-color: #154DA8;
}