@charset "UTF-8";
:root {
  --max-design-width: 750px;
  --max-width: 500px;
  --scale: calc(var(--max-width) / var(--max-design-width));
  --ui-font: "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
}
/* ボタンスタイル */
.btn {
  display: block;
  color: #fff;
  border: none;
  border-radius: 100vmax;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1;
  position: relative;
  text-decoration: none;
  white-space: normal;
  max-width: 100%;
  transition: 0.3s;
}
.btn::after {
  content: "\25B6"; /* Unicode: ▶ */
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: #fff;
  pointer-events: none;
  z-index: 2;
}

.btn:active,
.btn:hover {
  filter: contrast(0.7);
}

/* ボタンサイズ */
.btn[data-btn-size="large"] {
  width: min(
    calc(573px * var(--scale)),
    calc(573px / var(--max-design-width) * 100vw)
  );
  max-width: 100%;
  padding: clamp(
      20px,
      calc(40px / var(--max-design-width) * 100vw),
      calc(40px * var(--scale))
    )
    0;
  font-size: clamp(
    22px,
    calc(44px / var(--max-design-width) * 100vw),
    calc(44px * var(--scale))
  );
  font-weight: 700;
}
.btn[data-btn-size="medium"] {
  width: min(
    calc(480px * var(--scale)),
    calc(480px / var(--max-design-width) * 100vw)
  );
  padding: clamp(
    16px,
    calc(32px / var(--max-design-width) * 100vw),
    calc(32px * var(--scale))
  );
  font-size: clamp(
    16px,
    calc(32px / var(--max-design-width) * 100vw),
    calc(32px * var(--scale))
  );
  font-weight: 700;
}

/* ボタンカラー */
.btn[data-btn-color="red"] {
  background-color: #df0011;
  background-image: linear-gradient(
    0deg,
    rgba(205, 0, 0, 0.6) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  background-blend-mode: multiply;
  box-shadow: inset 6px 8px 10px -4px rgba(255, 255, 255, 0.5),
    inset -7.5px 5.3px 10px 0 rgba(91, 33, 33, 0.1);
}
.btn[data-btn-color="gold"] {
  background-color: #e4bc4c;
  background-image: linear-gradient(
    0deg,
    rgba(175, 122, 1, 0.5) 0%,
    rgba(231, 203, 154, 0.5) 100%
  );
  background-blend-mode: multiply;
  box-shadow: inset 6px 8px 10px -4px rgba(255, 255, 255, 0.5),
    inset -7.5px 5.3px 10px 0 rgba(91, 33, 33, 0.1);
}
.btn[data-btn-color="white"] {
  background-color: #ffffff;
  color: #001c63;
  box-shadow: inset 6px 8px 10px -4px rgba(255, 255, 255, 0.5),
    inset -7.5px 5.3px 10px 0 rgba(91, 33, 33, 0.1);
  outline: 3px solid #001c63;
  outline-offset: -6px;
}
.btn[data-btn-color="white"]::before {
  content: "\003C"; /* Unicode: < */
  position: absolute;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: #001c63;
  pointer-events: none;
  z-index: 2;
}
.btn[data-btn-color="white"]::after {
  display: none;
}
@media (max-width: 480px) {
  .btn[data-btn-color="white"] {
    outline-width: 2px;
    outline-offset: -5px;
  }
}

/* ボタンタイプ */
.btn[data-btn-type="apply"] {
  margin: clamp(
      25px,
      calc(50px / var(--max-design-width) * 100vw),
      calc(50px * var(--scale))
    )
    auto 0 auto;
}
.btn[data-btn-type="campaign-detail"] {
  font-size: clamp(
    11px,
    calc(34px / var(--max-design-width) * 100vw),
    calc(34px * var(--scale))
  );
  letter-spacing: 0.1rem;
  margin: clamp(
      25px,
      calc(50px / var(--max-design-width) * 100vw),
      calc(50px * var(--scale))
    )
    auto 0 auto;
}
.btn[data-btn-type="scan"] {
  margin: clamp(
      30px,
      calc(60px / var(--max-design-width) * 100vw),
      calc(60px * var(--scale))
    )
    auto 0 auto;
}
.btn[data-btn-type="back"] {
  margin: clamp(
      20px,
      calc(40px / var(--max-design-width) * 100vw),
      calc(40px * var(--scale))
    )
    auto 0 auto;
}
.btn[data-btn-type="lottery"] {
  margin: clamp(
      70px,
      calc(140px / var(--max-design-width) * 100vw),
      calc(140px * var(--scale))
    )
    auto 0 auto;
  position: relative;
}
.btn[data-btn-type="lottery"]::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: -50%;
  transform: translateX(-50%);
  width: min(
    calc(340px * var(--scale)),
    calc(340px / var(--max-design-width) * 100vw)
  );
  height: min(
    calc(80px * var(--scale)),
    calc(80px / var(--max-design-width) * 100vw)
  );
  background: url("../../img/btn_balloon_entry.png") no-repeat center/contain;
  pointer-events: none;
  z-index: 10;
}
.btn[data-btn-type="receive"] {
  position: relative;
  font-size: clamp(
    16px,
    calc(32px / var(--max-design-width) * 100vw),
    calc(32px * var(--scale))
  );
  margin: clamp(
      12px,
      calc(24px / var(--max-design-width) * 100vw),
      calc(24px * var(--scale))
    )
    auto 0;
}
.btn[data-btn-type="lottery_back"] {
  margin: clamp(
      120px,
      calc(240px / var(--max-design-width) * 100vw),
      calc(240px * var(--scale))
    )
    auto 0 auto;
  position: relative;
  z-index: 12;
}

/* JSで制御する非活性ボタンスタイル */
.btn.is-disabled,
a.btn.is-disabled {
  pointer-events: none;
  cursor: not-allowed !important;
  background-color: #6f6f6f;
  background-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}