:root {
  --main-font: 'Arial',sans-serif;
  --heading-font: 'Arial',sans-serif;
  --bg-primary: #000000;
  --bg-secondary: #333333;
  --brand: linear-gradient(135.34deg, #FF9D6C 15.43%, #FBE67B 38.47%, #FCFBE7 53.36%, #F7D14E 69.97%, #D4A041 86.26%);
  --text-primary: #FFFFFF;
  --input-background: #565656;
  --input-text: #ffffff;
  --button-text: #000000;
  --corner: #00DA43;
  --modal-bg: rgba(0, 0, 0, 0.5);
  --error: #E74747;
  --error-bg: #FFE0E0
}
.font-arial-black {
  font-family: var(--heading-font)!important
}
.font-arial {
  font-family: var(--main-font)!important
}
.text-bold-arial-black {
  font-family: var(--heading-font)!important;
  font-weight: 900!important
}
body,
html {
  height: 100%;
  width: 100%
}
main {
  height: 100%;
  width: 100%;
  max-height: 538px;
  max-width: 1360px;
  border: 4px solid transparent;
  background: var(--brand);
  border-radius: 20px
}
.info-form {
  display: flex;
  flex-direction: column;
  gap: 8px
}
body {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--main-font),sans-serif
}
.btn {
  font-family: var(--heading-font);
  font-weight: 900;
  text-transform: uppercase
}
.text-primary {
  color: var(--text-primary)!important
}
.text-guide {
  color: var(--text-primary)!important
}
.close-btn {
  height: 36px;
  border: 1px solid var(--error);
  border-radius: 100px;
  padding: 0 12px;
  background: var(--bg-primary);
  color: var(--error);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer
}
.heading-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 0;
  margin-top: 0
}
.heading-container-mb {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 85%
}
.heading {
  background-image: var(--brand)!important;
  background-clip: text!important;
  color: transparent!important;
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 6px;
  text-transform: uppercase
}
.sub-heading {
  background-image: var(--brand)!important;
  background-clip: text!important;
  color: transparent!important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2rem
}
.middle-content {
  display: flex;
  flex: 1;
  gap: 36px;
  width: 100%
}
.middle-content .left-panel {
  width: 472px;
  max-width: 40%;
  height: 300px;
  max-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
.middle-content .left-panel img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px
}
.error-notification-content.middle-content {
  margin: 28px 0
}
.error-notification-content.middle-content .left-panel {
  justify-content: flex-start;
  align-items: start;
  flex-direction: column
}
.error-notification-content.middle-content .left-panel p {
  font-size: 16px
}
.line-break {
  height: 100%;
  width: 1px;
  background: var(--brand);
  border: none
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: .5px
}
.container-pc,
.main-container {
  background: var(--bg-primary);
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-radius: 20px;
  padding: 2.25rem;
  margin: 0 auto
}
.container-mb {
  background: var(--bg-primary);
  width: 100%;
  min-height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  border-radius: 0;
  border: none;
  margin: 0 auto;
  box-sizing: border-box
}
.container-mb .content-container {
  display: flex;
  flex-direction: column;
  gap: 21px
}
.top-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 24px
}
.text-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px
}
.title {
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 900;
  margin: 0
}
#section-success .title,
.error-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0
}
.message {
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0
}
.message ul {
  padding-left: 1.5rem
}
.message li::marker {
  color: var(--brand)
}
.text-box img {
  max-height: 200px
}
.forms-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 280px;
  overflow: hidden
}
.form-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--bg-secondary);
  border-radius: 10px
}
.form-panel.has-errors {
  border-color: var(--error)!important
}
.form-panel.has-errors .panel-title {
  color: var(--error)!important
}
.form-panel-header {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border: 0;
  cursor: pointer;
  border-radius: 10px
}
.form-panel-header .badge-index {
  display: none!important;
  background: var(--brand);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 900;
  margin-right: 8px
}
.form-panel-header .panel-title {
  flex: 1;
  text-align: left;
  font-weight: 700;
  line-height: 28px
}
.form-panel-header .chevron {
  margin-left: 8px;
  transition: transform .2s ease
}
.form-panel.open .form-panel-header .chevron {
  transform: rotate(180deg)
}
.form-panel-body {
  padding: 20px 20px;
  display: block
}
.form-panel.has-padding .form-panel-body {
  padding: 8px 20px
}
.form-panel:not(.open) .form-panel-body {
  display: none
}
.btn-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%
}
.btn-box.mb {
  display: none
}
.btn-box #upload-icon {
  display: none!important
}
.btn-box:has(>:only-child) {
  justify-content: flex-end
}
.btn-box:has(>:nth-child(2):last-child) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}
.btn-box:has(>:nth-child(2):last-child) > :first-child {
  justify-self: center
}
.btn-box:has(>:nth-child(2):last-child) > :last-child {
  justify-self: end
}
.btn-box:has(>:nth-child(2):last-child) .btn {
  min-width: 150px;
  max-width: 100%;
  width: 100%
}
.btn.btn-brand {
  width: 390px;
  background: var(--brand)!important;
  border-color: var(--brand)!important;
  border-radius: 9px;
  color: var(--button-text);
  font-size: 14px;
  line-height: 18px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
:not(.btn-check) + .btn:active {
  background: var(--brand)!important;
  border-color: var(--brand)!important;
  color: var(--button-text)!important
}
.btn-link {
  background-image: var(--link-button-color,var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  padding: 12px;
  text-decoration: none
}
.btn-link:active,
.btn-link:focus,
.btn-link:hover,
.btn-link:target {
  background-image: var(--link-button-color,var(--brand))!important;
  -webkit-text-fill-color: transparent
}
.main-container .btn-box.pc {
  display: flex
}
.main-container .btn-box.mb {
  display: none
}
#section-coupon-upload,
#section-error-notification-page,
#section-error-page,
#section-image-upload-error,
#section-introduction,
#section-processing,
#section-success {
  display: none;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden
}
#section-introduction .text-box {
  justify-content: center
}
.illustration {
  background: var(--bg-primary);
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden
}
.illustration img {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: 0 0
}
.illustration .image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  border-radius: 0;
  padding: 20px;
  box-sizing: border-box
}
#card-overlays {
  position: absolute;
  pointer-events: none;
  background: rgba(0,0,0,.6)
}
#card-overlays .bbox {
  position: absolute;
  border: 3px solid #00da43;
  border-radius: 4px
}
#card-overlays .bbox.valid {
  border-color: #00da43;
  box-shadow: 0 0 0 2px rgba(0,218,67,.15) inset
}
#card-overlays .bbox.invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(231,71,71,.15) inset
}
#section-coupon-upload .title,
#section-image-upload-error .title {
  font-size: 18px
}
.failed-cards-list {
  margin-top: 12px;
  display: none;
  width: 100%
}
.failed-cards-list .failed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a2a2a;
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  max-width: 549px;
  margin: 8px auto
}
.failed-cards-list .failed-item .provider {
  font-weight: 700;
  width: 25%
}
.failed-cards-list .failed-item .serial {
  flex: 1 1 auto
}
.failed-cards-list .failed-item .serial-value {
  color: var(--error);
  font-weight: 700;
  margin-left: 12px
}
#section-coupon-upload .info-form .error-tooltip {
  display: none;
  position: relative;
  align-items: center;
  gap: 6px;
  cursor: pointer
}
#section-coupon-upload .info-form .invalid-text {
  display: none;
  position: absolute;
  width: 180px;
  top: -38px;
  left: -15px;
  background: var(--error-bg);
  color: var(--error);
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  margin-top: 12px;
  border: 1px solid var(--error);
  z-index: 1000
}
#section-coupon-upload .info-form .invalid-text::after {
  content: '';
  position: absolute;
  mask-composite: subtract;
  left: 18px;
  bottom: -12px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--error) transparent transparent transparent
}
#section-coupon-upload .info-form .error-tooltip:hover .invalid-text {
  display: block
}
.form-select.custom-control {
  padding: 4px 18px;
  font-size: 14px
}
#section-coupon-upload .field-row,
#section-processing .field-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  justify-content: space-between
}
#section-coupon-upload .field-label {
  font-size: 14px;
  font-weight: 700
}
#section-coupon-upload .field-label-container {
  display: flex;
  gap: 8px;
  min-width: 110px
}
#section-coupon-upload .field-label-container.invalid {
  color: var(--error)
}
#section-coupon-upload .field-input-container {
  flex: 1 1 auto;
  max-width: 456px
}
.custom-control {
  height: 40px;
  width: 100%;
  border-radius: 30px;
  border: 1px solid var(--input-background);
  padding: 4px 20px;
  font-size: 14px;
  font-weight: 400;
  background-color: var(--input-background);
  color: var(--input-text)
}
input.cardCode::placeholder,
input.custom-control::placeholder,
input.serial::placeholder {
  color: #fff;
  opacity: 1
}
input.cardCode:focus::placeholder,
input.custom-control:focus::placeholder,
input.serial:focus::placeholder {
  color: #000;
  opacity: 1
}
.cdrop {
  position: relative;
  width: 100%
}
.cdrop-hidden {
  display: none!important
}
.cdrop-toggle {
  width: 100%;
  height: 40px;
  border-radius: 30px;
  border: 1px solid var(--input-background);
  background: var(--input-background);
  color: var(--input-text);
  padding: 4px 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: Arial;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  vertical-align: bottom
}
.cdrop-toggle .cdrop-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.cdrop-arrow {
  width: 8px;
  height: 8px;
  border: solid var(--input-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-left: 8px
}
.cdrop[aria-disabled=true] .cdrop-toggle {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none
}
.cdrop[aria-expanded=true] .cdrop-arrow {
  transform: rotate(-135deg);
  top: 2px;
  position: relative
}
.cdrop-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--input-background);
  color: var(--input-text);
  border: 1px solid var(--input-background);
  border-radius: 14px;
  max-height: 180px;
  overflow: auto;
  z-index: 1000;
  display: none
}
.cdrop[aria-expanded=true] .cdrop-menu {
  display: block
}
.cdrop-option {
  padding: 14px 16px;
  cursor: pointer
}
.cdrop-option:hover,
.cdrop-option[aria-selected=true] {
  background: var(--brand);
  color: #000;
  font-weight: 600
}
.cdrop-option[aria-disabled=true] {
  opacity: .6;
  cursor: not-allowed
}
.custom-control:focus {
  border-color: var(--input-background);
  outline: 0;
  box-shadow: none
}
.is-invalid {
  border-color: var(--error)!important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.15) inset;
  background-image: none!important;
  color: var(--error)!important
}
.error-banner {
  margin-top: 0;
  background: var(--error-bg);
  color: var(--error);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 400
}
#section-processing .title {
  font-size: 18px
}
#section-processing .placeholder {
  min-height: 2.5rem;
  border-radius: 12px;
  background-color: #bdbdbd
}
#section-processing .placeholder-left {
  width: 100%;
  box-shadow: 0 15.34px 36.8px -6.13px #10182814;
  border-radius: 20px
}
#section-processing .placeholder {
  height: 100%;
  width: 100%;
  border-radius: 20px
}
#section-processing .placeholder-bottom {
  padding: 1.5rem
}
#section-processing .info-form {
  padding-top: 20px;
  gap: 12px
}
.media-container {
  height: 100%;
  width: 100%;
  max-width: 320px;
  max-height: 275px;
  margin: 0 auto;
  display: flex;
  align-self: center;
  box-sizing: border-box;
  overflow: hidden;
  aspect-ratio: 1/1
}
.media-container .media {
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden
}
.media-container img,
.media-container video {
  width: 100%!important;
  height: 100%!important;
  max-height: 100%!important;
  border-radius: 10px;
  background: var(--bg-primary);
  object-fit: cover
}
#section-success .text-box {
  justify-content: center;
  align-items: center
}
#section-success .btn-box {
  max-width: 600px
}
#section-error-page .message {
  max-height: 70px;
  overflow: hidden
}
#section-image-upload-error .error-message-container {
  flex: 1 1 auto;
  display: flex;
  background: var(--bg-secondary);
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700
}
.guide-bottom,
.guide-top {
  position: absolute;
  inset: 24px;
  pointer-events: none
}
.guide-bottom::after,
.guide-bottom::before,
.guide-top::after,
.guide-top::before {
  content: '';
  position: absolute;
  width: 25%;
  height: 25%
}
.guide-top::before {
  top: 0;
  left: 0;
  border-top: 3px solid var(--corner);
  border-left: 3px solid var(--corner);
  border-top-left-radius: 12px
}
.guide-top::after {
  top: 0;
  right: 0;
  border-top: 3px solid var(--corner);
  border-right: 3px solid var(--corner);
  border-top-right-radius: 12px
}
.guide-bottom::before {
  bottom: 0;
  left: 0;
  border-left: 3px solid var(--corner);
  border-bottom: 3px solid var(--corner);
  border-bottom-left-radius: 12px
}
.guide-bottom::after {
  bottom: 0;
  right: 0;
  border-bottom: 3px solid var(--corner);
  border-right: 3px solid var(--corner);
  border-bottom-right-radius: 12px
}
#section-error-notification-page .middle-content {
  margin: 24px 0
}
#section-error-notification-page .left-panel {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start
}
@media (max-width:1260px) {
  #section-coupon-upload .field-input-container {
    max-width: 380px
  }
}
@media (max-width:1180px) {
  #section-coupon-upload .field-input-container {
    max-width: 320px
  }
}
@media (max-width:1024px) {
  .container-pc,
  .main-container {
    padding: 1.25rem
  }
  .middle-content {
    gap: 24px
  }
  #section-coupon-upload .field-input-container {
    max-width: 280px
  }
}
@media (max-width:400px) {
  .media-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    aspect-ratio: 1/1
  }
  .media-container .media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
}
@media (max-width:768px) and (orientation:portrait) {
  .media-container {
    width: 100%;
    max-width: 360px;
    height: 100%;
    max-height: 275px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    aspect-ratio: 1/1
  }
  .media-container img,
  .media-container video {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover
  }
}
@media (max-width:768px) and (orientation:landscape) {
  .media-container {
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    aspect-ratio: 1/1
  }
  .media-container img,
  .media-container video {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover
  }
}
@media screen and (max-width:932px) and (orientation:portrait) {
  .media-container {
    max-height: 360px!important
  }
}
@media screen and (orientation:portrait) {
  .main-container {
    border-radius: 0
  }
}
@media (max-width:896px) and (orientation:landscape) {
  .media-container,
  .middle-content .left-panel {
    max-height: 100%!important;
    height: 100%!important
  }
  .container-mb .btn-box.btn-box-portrait {
    display: none!important
  }
  .container-mb .btn-box.btn-box-landscape {
    display: grid!important
  }
}
@media screen and (max-width:896px) and (orientation:portrait) {
  .container-mb .btn-box.btn-box-portrait {
    display: grid!important
  }
  .container-mb .btn-box.btn-box-landscape {
    display: none!important
  }
}
@media screen and (max-width:896px) {
  .main-container .btn-box.pc {
    display: none
  }
  .main-container .btn-box.mb {
    display: flex
  }
  main {
    border-width: 3px
  }
  .container-pc,
  .main-container {
    gap: 10px;
    padding: 16px
  }
  .heading {
    font-size: 14px;
    margin-bottom: 2px
  }
  .sub-heading {
    font-size: 12px;
    line-height: normal
  }
  .btn.btn-brand,
  .btn.btn-link {
    width: 320px;
    font-size: 12px;
    line-height: 14px;
    padding: 8px 12px
  }
  .error-notification-content .left-panel h4,
  .title {
    font-size: 14px
  }
  .error-notification-content.middle-content .left-panel p,
  .message {
    font-size: 12px;
    line-height: 14px
  }
  ul.message {
    padding-left: 1rem
  }
  .middle-content {
    gap: 21px
  }
  .cdrop-toggle,
  .custom-control {
    height: 24px;
    border-radius: 12px;
    padding: 5px 10px;
    font-size: 12px
  }
  .form-panel-body,
  .form-panel-header {
    padding: 6px
  }
  .form-panel-header .panel-title {
    font-size: 12px;
    line-height: normal
  }
  img#arrow-down {
    height: 16px;
    width: 18px
  }
  .forms-container {
    height: 178px
  }
  .illustration .image-wrap {
    max-height: 168px;
    height: 168px
  }
  .illustration img {
    border-radius: 8px
  }
  .error-notification-content.middle-content .left-panel {
    max-width: 33%
  }
  .failed-cards-list .failed-item {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px
  }
  .failed-cards-list .failed-item .serial-value {
    margin-left: 4px
  }
  .failed-cards-list .failed-item img {
    margin-left: 6px;
    height: 14px
  }
  .close-btn {
    height: 26px;
    font-size: 10px
  }
  .close-btn img {
    height: 10px
  }
  #section-error-page #error-image,
  #section-success #success-image {
    max-height: 120px
  }
  #section-error-page .error-title,
  #section-success .title {
    font-size: 16px
  }
  #section-error-page .text-box,
  #section-success .text-box {
    gap: 8px
  }
  #section-introduction .middle-content {
    flex-direction: row
  }
  #section-introduction .text-box {
    background: var(--input-background);
    padding: 12px;
    border-radius: 12px;
    width: 100%;
    flex: initial
  }
  #section-introduction .text-box {
    justify-content: flex-start
  }
  #section-processing .middle-content .left-panel {
    max-width: 45%
  }
  #section-processing .title {
    font-size: 12px
  }
  #section-processing .placeholder {
    min-height: 1.75rem
  }
  #section-processing .info-form {
    padding-top: 0;
    gap: 8px
  }
  #section-coupon-upload .title,
  #section-image-upload-error .title {
    font-size: 12px
  }
  #section-coupon-upload .info-form {
    gap: 6px
  }
  #section-coupon-upload .field-row {
    gap: 4px
  }
  #section-coupon-upload .field-label {
    font-size: 12px
  }
  #section-coupon-upload .info-form .invalid-text {
    border-radius: 4px
  }
  #section-coupon-upload .middle-content .left-panel {
    width: 100%;
    height: 100%
  }
  #section-coupon-upload .text-box {
    gap: 6px
  }
  #section-error-notification-page .middle-content .left-panel h4 {
    font-size: 16px
  }
  #section-error-notification-page .middle-content .left-panel p {
    font-size: 12px
  }
  #section-error-notification-page .middle-content {
    margin: 0
  }
}
@media screen and (max-width:480px) {
  body,
  html {
    overflow: hidden;
    height: calc(var(--vh,1vh) * 100);
    position: fixed;
    width: 100%;
    border-radius: 0
  }
  body {
    padding-top: env(safe-area-inset-top,0)
  }
  @supports (height:100dvh) {
    body,
    html {
      height: 100dvh
    }
    main {
      height: 100dvh;
      max-height: 100dvh
    }
  }
  main {
    height: calc(var(--vh,1vh) * 100);
    max-height: calc(var(--vh,1vh) * 100);
    width: 100%;
    border: none;
    border-radius: 0;
    align-items: center;
    justify-content: flex-start;
    background: 0 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    position: relative
  }
  .container,
  .container-mb,
  .main-container {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%
  }
  .container-mb .content-container {
    gap: 16px
  }
  .container {
    width: 100%;
    min-height: 100%;
    height: fit-content;
    border-radius: 0;
    border: none;
    justify-content: flex-start
  }
  .container-pc {
    display: none!important
  }
  .main-container {
    height: fit-content
  }
  .heading {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: .5rem;
    margin-top: 0;
    padding-top: 0
  }
  .sub-heading {
    font-size: 12px
  }
  .heading-container {
    margin-top: 12px;
    padding-top: 0
  }
  .middle-content {
    gap: 16px
  }
  #section-coupon-upload,
  #section-error-notification-page,
  #section-error-page,
  #section-image-upload-error,
  #section-introduction,
  #section-processing,
  #section-success {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center
  }
  #section-coupon-upload .title,
  #section-image-upload-error .title,
  #section-processing .title,
  .title {
    font-size: 16px;
    font-weight: 900
  }
  #section-error-page .error-title,
  #section-success .title,
  .error-title {
    font-size: 24px;
    font-weight: 600
  }
  .message {
    font-size: 14px;
    line-height: 21px;
    font-weight: 400
  }
  .close-btn {
    height: 32px
  }
  ul.message {
    padding-left: 1.25rem
  }
  .text-box {
    gap: 8px
  }
  .illustration .image-wrap {
    max-height: 230px;
    height: 230px
  }
  .media-container {
    max-height: 325px;
    aspect-ratio: 1/1
  }
  #section-error-page #error-image,
  #section-success #success-image {
    max-height: 200px
  }
  .btn-box {
    gap: 12px;
    margin-top: auto;
    flex-direction: column;
    flex-shrink: 0
  }
  .btn-box #upload-icon {
    display: flex!important
  }
  .btn.btn-brand,
  .btn.btn-link {
    padding: 10px 0
  }
  .btn.btn-brand {
    line-height: 18px
  }
  .top-content {
    flex: 0 0 auto;
    justify-content: flex-start;
    width: 100%;
    min-height: auto;
    margin-top: 0;
    padding-top: 0
  }
  #section-introduction .middle-content {
    flex-direction: column
  }
  #section-coupon-upload .field-label {
    font-size: 12px
  }
  #section-coupon-upload .custom-control,
  #section-coupon-upload .form-select.custom-control {
    width: 100%
  }
  #section-coupon-upload .middle-content,
  #section-error-notification-page .middle-content,
  #section-image-upload-error .middle-content,
  #section-processing .middle-content {
    gap: 22px;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto
  }
  #section-coupon-upload .middle-content .left-panel,
  #section-image-upload-error .middle-content .left-panel,
  #section-processing .placeholder-left {
    max-width: 100%;
    height: 230px;
    max-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px
  }
  #section-error-notification-page .middle-content .left-panel {
    max-width: 100%
  }
  #section-coupon-upload .line-break,
  #section-image-upload-error .line-break,
  #section-processing .line-break {
    display: none
  }
  #section-coupon-upload .info-form,
  #section-processing .info-form {
    gap: 8px
  }
  #section-coupon-upload .field-row,
  #section-processing .field-row {
    margin: 0
  }
  #section-processing .btn-box .placeholder {
    height: 44px
  }
  #section-processing .middle-content .left-panel {
    max-width: 100%
  }
  #section-error-page {
    width: 100vw
  }
  #section-error-page .middle-content {
    align-items: center
  }
  .btn.btn-brand {
    width: 100%
  }
  #section-success .text-box .upper-content {
    display: flex;
    flex-direction: column;
    gap: 8px
  }
  #section-success .text-box .message {
    font-size: 12px
  }
  .forms-container {
    height: auto
  }
  .form-panel-header {
    padding: 8px 12px
  }
  .form-panel-body {
    padding: 20px 12px
  }
  .form-panel.has-padding .form-panel-body {
    padding: 8px 20px
  }
  #section-coupon-upload .field-label,
  .form-panel-header .panel-title {
    font-size: 14px
  }
  img#arrow-down {
    height: 24px
  }
  #image-upload-error-message {
    font-size: 18px;
    font-weight: 700
  }
  .cdrop-toggle,
  .custom-control {
    height: 40px;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px
  }
  .btn.btn-brand,
  .btn.btn-link {
    border-radius: 8px
  }
  #section-coupon-upload .field-input-container {
    max-width: 180px
  }
  #error-message,
  #section-success .text-box .message {
    text-align: center
  }
}
@media screen and (max-width:390px) {
  .container-mb {
    padding: 16px;
    gap: 16px;
    box-sizing: border-box
  }
  .container,
  .main-container {
    padding: 16px
  }
  .heading-container {
    margin-top: 10px;
    padding-top: 0
  }
  .heading {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: .25rem
  }
  .sub-heading {
    font-size: 11px;
    line-height: 1.3
  }
  #section-coupon-upload .title,
  #section-image-upload-error .title,
  #section-processing .title,
  .title {
    font-size: 14px
  }
  #section-error-page .error-title,
  #section-success .title,
  .error-title {
    font-size: 20px
  }
  .message {
    font-size: 13px;
    line-height: 18px
  }
  .illustration .image-wrap {
    max-height: 200px;
    height: 200px;
    padding: 16px
  }
  .media-container {
    max-height: 280px;
    aspect-ratio: 1/1
  }
  .btn-box {
    gap: 10px
  }
  .top-content {
    gap: 16px
  }
  .close-btn {
    height: 28px;
    font-size: 10px;
    padding: 0 10px
  }
  #section-coupon-upload .middle-content,
  #section-error-notification-page .middle-content,
  #section-image-upload-error .middle-content,
  #section-processing .middle-content {
    gap: 16px
  }
  #section-coupon-upload .middle-content .left-panel,
  #section-image-upload-error .middle-content .left-panel,
  #section-processing .placeholder-left {
    height: 200px;
    max-height: 200px
  }
  .btn.btn-brand,
  .btn.btn-link {
    border-radius: 5px
  }
}
@media screen and (max-width:376px) {
  .container-mb {
    padding: 12px;
    gap: 12px;
    box-sizing: border-box
  }
  .container,
  .main-container {
    padding: 12px
  }
  .heading-container {
    margin-top: 8px;
    padding-top: 0
  }
  .heading {
    font-size: 15px;
    line-height: 18px
  }
  .title {
    font-size: 13px
  }
  .illustration .image-wrap {
    max-height: 180px;
    height: 180px;
    padding: 12px
  }
  .media-container {
    max-height: 250px;
    aspect-ratio: 1/1
  }
  .btn-box {
    gap: 8px
  }
  .top-content {
    gap: 12px
  }
  #section-coupon-upload .middle-content .left-panel,
  #section-image-upload-error .middle-content .left-panel,
  #section-processing .placeholder-left {
    height: 180px;
    max-height: 180px
  }
  .btn.btn-brand,
  .btn.btn-link {
    border-radius: 5px
  }
}
@media (max-height:680px) and (max-width:480px) {
  .container-mb {
    gap: 14px;
    max-height: calc((var(--vh,1vh) * 100) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }
  .heading-container {
    margin-top: 8px
  }
  .illustration .image-wrap {
    max-height: 180px;
    height: 180px
  }
  .media-container {
    max-height: 240px;
    aspect-ratio: 1/1
  }
  #section-coupon-upload .middle-content .left-panel,
  #section-image-upload-error .middle-content .left-panel,
  #section-processing .placeholder-left {
    height: 180px;
    max-height: 180px
  }
}
@media (max-height:480px) {
  main {
    border: 0
  }
  .main-container,
  body,
  main {
    border-radius: 0
  }
  .container-mb,
  .main-container {
    gap: 10px;
    max-height: calc((var(--vh,1vh) * 100) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }
  .heading-container {
    margin-top: 6px
  }
  .media-container {
    max-height: 190px;
    aspect-ratio: 1/1
  }
  .illustration .image-wrap {
    max-height: 150px;
    height: 150px
  }
  .heading {
    font-size: 14px;
    line-height: 16px
  }
  .title {
    font-size: 12px
  }
}
@media (max-height:380px) {
  .media-container {
    max-height: 130px
  }
  .illustration .image-wrap {
    max-height: 120px;
    height: 120px;
    padding: 8px
  }
}
@media screen and (orientation:portrait) {
  #section-error-notification-page .middle-content {
    gap: 0
  }
  #section-error-notification-page .middle-content .left-panel {
    height: auto
  }
  #section-error-notification-page #failed-cards-list .failed-item {
    margin-bottom: 10px
  }
}