#wrapper {
  min-width: initial;
  --width-sm: 770;
  --width-md: 1000;
}

#sqex-header-main {
  width: auto;
}

.content {
  width: auto;
}

#main {
  min-width: initial;
  background-image: url(../../img/public/paymentlist/base-bg.jpg);
  font-family: Noto Sans JP, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN,
    Hiragino Sans, Meiryo, sans-serif;
}

.media-md #main {
  font-size: 16px;
}

#main img {
  max-width: 100%;
}

.root {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

.text-link {
  color: #e14a00;
  font-weight: bold;
  text-decoration: underline;
}
.text-link:hover {
  text-decoration: none;
}

.media-sm .sm\:gutter,
.media-sm .gutter {
  padding-left: min(calc(100 / var(--width-sm) * 30 * 1vw), 30px);
  padding-right: min(calc(100 / var(--width-sm) * 30 * 1vw), 30px);
}

.media-md .md\:gutter,
.media-md .gutter {
  padding-left: min(calc(100 / var(--width-md) * 20 * 1vw), 20px);
  padding-right: min(calc(100 / var(--width-md) * 20 * 1vw), 20px);
}

/* 角丸ボタン */
/* ---------------------------------------------------------------------- */
.round-btn {
  background-color: #c36000;
  border-radius: 1.2em;
  box-shadow: inset 0 -3px 0 0 #ff8a00cc;
  color: #fff;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: calc(0.6em + 3px);
  padding-top: 0.6em;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
}
.round-btn:hover {
  box-shadow: inset 0 0 0 0 #ff8a00cc;
  transform: translateY(3px);
}
.media-sm .round-btn {
  width: 86%;
}
.media-md .round-btn {
  width: 300px;
}

/* 角丸ボックス */
/* ---------------------------------------------------------------------- */
.round-box {
  box-shadow: inset 0 5px 0 0 #e8cb78, inset 0 -5px 0 0 #e8cb78;
  background-color: #fff;
  border-radius: 1rem;
}
.media-md .round-box {
  border-radius: 1.5rem;
}
.media-sm .round-box__content {
  padding-left: min(calc(100 / var(--width-sm) * 30 * 1vw), 30px);
  padding-right: min(calc(100 / var(--width-sm) * 30 * 1vw), 30px);
}
.media-md .round-box__content {
  padding-left: min(calc(100 / var(--width-md) * 30 * 1vw), 30px);
  padding-right: min(calc(100 / var(--width-md) * 30 * 1vw), 30px);
}

/* DQXロゴ */
/* ---------------------------------------------------------------------- */
.dqx-logo {
  margin-right: auto;
  margin-left: auto;
}
.media-sm .dqx-logo {
  width: min(calc(100 / var(--width-sm) * 470 * 1vw), 470px);
}
.media-md .dqx-logo {
  width: min(calc(100 / var(--width-md) * 388 * 1vw), 388px);
}

/* 広場へ */
/* ---------------------------------------------------------------------- */
.goto-hiroba {
  position: absolute;
  top: 0;
  left: 0;
}
.media-sm .goto-hiroba {
  top: 10px;
  left: 10px;
  width: calc(288 / 640 * 100%);
  width: min(calc(100 / var(--width-sm) * 288 * 1vw), 288px);
}
.media-md .goto-hiroba {
  top: 20px;
  width: min(calc(100 / var(--width-md) * 187 * 1vw), 187px);
}

.media-sm .large-head {
  margin-top: max(calc(100 / var(--width-sm) * -130 * 1vw), -130px);
}
.media-md .large-head {
  margin-top: max(calc(100 / var(--width-md) * -60 * 1vw), -60px);
}

/* ヘッダ */
/* ---------------------------------------------------------------------- */
.header {
  position: relative;
}

/* 見出し */
/* ---------------------------------------------------------------------- */
.media-sm .head-askan {
  width: min(calc(100 / var(--width-sm) * 627 * 1vw), 627px);
}
.media-md .head-askan {
  width: min(calc(100 / var(--width-md) * 439 * 1vw), 439px);
}
.media-sm .head-crysta {
  width: min(calc(100 / var(--width-sm) * 628 * 1vw), 628px);
}
.media-md .head-crysta {
  width: min(calc(100 / var(--width-md) * 440 * 1vw), 440px);
}
.media-sm .head-pgold {
  width: min(calc(100 / var(--width-sm) * 523 * 1vw), 523px);
}
.media-md .head-pgold {
  width: min(calc(100 / var(--width-md) * 366 * 1vw), 366px);
}
.media-sm .head-gem {
  width: min(calc(100 / var(--width-sm) * 256 * 1vw), 256px);
}
.media-md .head-gem {
  width: min(calc(100 / var(--width-md) * 179 * 1vw), 179px);
}

.media-sm .head-bgem {
  width: min(calc(100 / var(--width-sm) * 393 * 1vw), 393px);
}
.media-md .head-bgem {
  width: min(calc(100 / var(--width-md) * 275 * 1vw), 275px);
}

/* 広場バナー */
/* ---------------------------------------------------------------------- */
.media-md .banner a {
  display: block;
  width: 455px;
  margin-right: auto;
  margin-left: auto;
}