*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light;
  --ink: #514d55;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  min-width: 280px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff0cf url("img/bg.png") center top / 100% auto repeat-y;
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
  line-height: 1.55;
}

/* Decoration follows the composition rather than a device's viewport height. */
.bg-ic {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.bg-ic-lantern { width: 10%; max-width: 224px; left: 0; top: 9.4vw; }
.bg-ic-helmet { width: 11%; max-width: 247px; left: 53%; top: -1.4vw; }
.bg-ic-rocks { width: 9%; max-width: 202px; right: 9.5%; top: .6vw; }
.bg-ic-shovel { width: 11%; max-width: 247px; left: -2%; top: 39vw; }
.bg-ic-picks { width: 10%; max-width: 224px; right: -.5%; top: 19vw; }
.bg-ic-rocks1 {
  width: calc(min(560px, 100% - 40px) * 0.318);
  max-width: none;
  left: calc(50% - min(560px, 100% - 40px) * 0.2437);
  bottom: 0;
}
.bg-ic-shovel1 { width: 13%; max-width: 280px; right: 0; bottom: 0; }

.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.026fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 2.08vw, 47px);
  width: 87.5%;
  max-width: 1960px;
  margin: 0 auto;
  padding: clamp(24px, 1.66vw, 38px) clamp(32px, 3.33vw, 75px) clamp(90px, 6.5vw, 146px) 0;
}

.col-left, .col-right { min-width: 0; }
.ad-wrap {
  position: relative;
  width: 100%;
  transform: rotate(-2deg);
  transform-origin: center center;
}
.img-ad { display: block; width: 100%; height: auto; }

.btn-wrap {
  position: absolute;
  right: 13.5%;
  bottom: 8.2%;
  width: 64%;
  border-radius: 18px;
  transition: transform .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-img { display: block; width: 100%; height: auto; }
.btn-wrap:active { transform: scale(.98); }
.btn-wrap:focus-visible { outline: 3px solid #7541a5; outline-offset: 4px; }

.col-right {
  display: flex;
  flex-direction: column;
  padding-top: clamp(24px, 2.08vw, 47px);
}
.card {
  position: relative;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card-contact {
  /* Include the transparent tape area in the source's 794 × 472 ratio. */
  aspect-ratio: 794 / 472;
  padding: 14% 10% 9% 9%;
  background-image: url("img/bg_main_01.png");
}
.card-heading { font-size: inherit; line-height: 1; }
.card-tt { display: block; width: 100%; height: auto; }
.card-contact .card-heading { width: 54%; margin-bottom: 5.5%; }
.contact-row { display: flex; align-items: center; gap: 4%; }
.ic-mes { display: block; width: 14%; height: auto; flex: 0 0 14%; }
.contact-email {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(16px, 1.4vw, 31px);
  line-height: 1.35;
  text-decoration: none;
}
.divider-line { display: block; width: 82%; height: 2px; margin: -1% 0 6% 18%; }
.contact-sub { padding-left: 1%; font-size: clamp(14px, 1.15vw, 26px); line-height: 1.45; }

.card-privacy {
  margin-top: -4.5%;
  background-image: url("img/bg_mian_02.png?v=2");
}
/* A ratio spacer also works in browsers that predate CSS aspect-ratio. */
.card-privacy::before { content: ""; display: block; padding-top: 82.391%; }
.card-privacy .card-heading { position: absolute; top: 16%; left: 8.2%; width: 39%; }
.text-wrapper { position: absolute; top: 31%; right: 17%; bottom: 12%; left: 9%; min-height: 0; }
.privacy-body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: #a87ac5 transparent;
  color: #55505a;
  font-size: clamp(14px, 1.15vw, 26px);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.privacy-body:focus-visible { outline: 2px solid #7541a5; outline-offset: 5px; border-radius: 3px; }
.privacy-body::-webkit-scrollbar { width: 6px; }
.privacy-body::-webkit-scrollbar-track { background: transparent; }
.privacy-body::-webkit-scrollbar-thumb { border-radius: 999px; background: #a87ac5; }
.privacy-body p { margin-bottom: .65em; }
.privacy-body strong { color: #3f3a43; }
.privacy-body ul { margin: .2em 0 .7em 1.25em; }
.privacy-body li { margin-bottom: .22em; }
.pp-title { margin: 1em 0 .35em; color: #7541a5; font-size: 1.06em; font-weight: 700; }

.ic-bonus {
  position: absolute;
  z-index: 2;
  right: -24%;
  bottom: -26%;
  width: 40%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-wrap:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.06); }
  .contact-email:hover { color: #228c55; text-decoration: underline; }
}

/* Large screens: fit the poster and both cards in one viewport. */
@media (min-width: 1001px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    --pad-t: clamp(10px, 1.6vh, 22px);
    --pad-b: clamp(44px, 5.4vh, 68px);
    --pad-x: clamp(88px, 7vw, 140px);
    --gap: clamp(28px, 3vw, 56px);
    --fit-h: min(
      calc(100vh - var(--pad-t) - var(--pad-b)),
      calc((100vw - var(--pad-x) - var(--gap) - 16px) / 1.46)
    );
    --fit-h: min(
      calc(100dvh - var(--pad-t) - var(--pad-b)),
      calc((100vw - var(--pad-x) - var(--gap) - 16px) / 1.46)
    );
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .bg-ic-lantern { top: 8vh; }
  .bg-ic-helmet { top: -1.5vh; }
  .bg-ic-rocks { top: 1vh; }
  .bg-ic-shovel { top: 64vh; left: 0; }
  .bg-ic-picks { top: 20vh; right: 8px; }
  .bg-ic-rocks1 { left: 630px; bottom: -36px; width: 10%; }
  .bg-ic-shovel1 { right: 450px; bottom: -30px; width: 12%; }

  .page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    gap: var(--gap);
    padding: var(--pad-t) calc(var(--pad-x) / 2) var(--pad-b);
    overflow: hidden;
  }

  .col-left {
    flex: 0 0 auto;
    width: calc(var(--fit-h) * 0.6809);
    height: var(--fit-h);
  }

  .ad-wrap,
  .img-ad {
    width: 100%;
    height: 100%;
  }

  .img-ad { object-fit: contain; }

  .col-right {
    flex: 0 0 auto;
    width: calc(var(--fit-h) * 0.72);
    height: auto;
    min-height: 0;
    padding-top: 0;
  }

  .contact-email { font-size: clamp(15px, 1.2vw, 26px); }
  .contact-sub { font-size: clamp(13px, 1vw, 20px); }

  .card-privacy::before { padding-top: 72%; }
  .card-privacy .text-wrapper { right: 10%; bottom: 14%; }
  .privacy-body {
    font-size: clamp(13px, 1vw, 20px);
    line-height: 1.5;
  }

  .ic-bonus {
    right: -12%;
    bottom: -20%;
    width: 30%;
  }
}

@media (max-width: 1000px) {
  body { background-size: auto 1000px; }
  .page {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 40px);
    max-width: 640px;
    gap: 8px;
    padding: 24px 0 96px;
  }
  .col-left { width: 100%; max-width: 560px; margin: 0 auto; }
  .col-right { padding-top: 0; }
  .bg-ic { opacity: .55; }
  .bg-ic-helmet { width: 130px; left: auto; right: 2%; top: 0; }
  .bg-ic-lantern { width: 100px; top: 180px; }
  .bg-ic-shovel { width: 110px; top: 800px; }
  .bg-ic-rocks, .bg-ic-picks { display: none; }
  .bg-ic-rocks1 { width: 110px; left: 44px; bottom: 0; }
  .bg-ic-shovel1 { width: 120px; right: 60px; bottom: 0; }
  .card-contact { min-height: 250px; }
  .contact-email { font-size: clamp(16px, 3.4vw, 24px); }
  .contact-sub { font-size: clamp(14px, 2.7vw, 20px); }
  .card-privacy {
    min-height: 560px;
    margin-top: 8px;
    background-image: none;
    /* Fixed cap heights keep the tape from stretching on a taller mobile sheet. */
    border: 0 solid transparent;
    border-image-source: url("img/bg_mian_02.png?v=2");
    border-image-slice: 125 33 31 45 fill;
    border-image-width: clamp(46px, 15vw, 103px) clamp(12px, 4vw, 27px) 24px clamp(18px, 5.8vw, 37px);
    border-image-repeat: stretch;
  }
  .card-privacy .card-heading { top: clamp(66px, 19vw, 112px); }
  .text-wrapper { top: clamp(126px, 34vw, 200px); right: 7%; bottom: 130px; }
  .privacy-body { font-size: 16px; line-height: 1.7; }
  .ic-bonus { width: clamp(125px, 30vw, 175px); right: -7%; bottom: -60px; }
}

@media (max-width: 480px) {
  .bg-ic-rocks1 {
    width: calc((100% - 24px) * 0.318);
    left: calc(12px + (100% - 24px) * 0.1563);
  }
  .page {
    width: calc(100% - 24px);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(88px, env(safe-area-inset-bottom));
  }
  .card-contact { min-height: 230px; padding-top: 16%; padding-bottom: 12%; }
  .card-contact .card-heading { width: 61%; margin-bottom: 8%; }
  .contact-row { gap: 12px; }
  .ic-mes { width: 42px; flex-basis: 42px; }
  .contact-email { font-size: 16px; }
  .divider-line { width: calc(100% - 54px); margin: -2px 0 20px 54px; }
  .contact-sub { font-size: 14px; }
  .card-privacy { min-height: 530px; }
  .card-privacy .card-heading { width: 46%; }
  .text-wrapper { right: 7%; bottom: 110px; }
  .privacy-body { font-size: 15px; padding-right: 8px; }
}

@supports not (aspect-ratio: 1 / 1) {
  .card-contact { min-height: 24vw; }
  @media (max-width: 1000px) { .card-contact { min-height: 250px; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}