@charset "UTF-8";

/* =========================================
   Base
   デザインは横幅1920pxで作成し、最大1200pxで表示。
   --u = 1デザインpx（画面幅に合わせて縮小、最大 1200/1920）
========================================= */
:root {
  --u: calc(min(100vw, 1200px) / 1920);
  --bg: #fdfdfe;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow-x: clip;
}

h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  display: block;
  transition: opacity .3s, transform .3s;
}

a:hover {
  opacity: .8;
}

/* =========================================
   Layout
========================================= */
.lp,
.footer {
  max-width: 1200px;
  margin: 0 auto;
}

/* 各ブロック：中央寄せ＋デザイン上の幅・余白 */
.lp > *,
.about > *,
.footer > * {
  margin-left: auto;
  margin-right: auto;
  width: min(calc(var(--u) * var(--w)), 100%);
  margin-top: calc(var(--u) * var(--mt));
}

.hero              { --w: 1920; --mt: 0; }
.lead              { --w: 1585; --mt: 58; }
.btn-entry         { --w: 994;  --mt: 77; }
.prize             { --w: 1676; --mt: 70; }
.btn-onsen         { --w: 1151; --mt: 42; }
.period            { --w: 1672; --mt: 94; }
.steps             { --w: 1676; --mt: 131; }
.target            { --w: 1672; --mt: 116; }
.tweet             { --w: 1678; --mt: 174; }
.about             { --w: 1672; --mt: 178; }
.about__title      { --w: 1672; --mt: 0; }
.about__logo       { --w: 1389; --mt: 86; }
.faq               { --w: 1692; --mt: 149; }
.notes             { --w: 1672; --mt: 154; }
.btn-entry--bottom { --w: 994;  --mt: 183; }

.footer {
  padding-top: calc(var(--u) * 138);
  padding-bottom: calc(var(--u) * 123);
}

.footer__organizer { --w: 1135; --mt: 0; }
.footer__logo      { --w: 680;  --mt: 90; }
.footer__note      { --w: 1370; --mt: 77; }

.hero img,
.lp > * > img,
.about > * > img,
.footer > * > img {
  width: 100%;
}

/* =========================================
   追従ボタン
========================================= */
.fixed-entry {
  position: fixed;
  top: calc(var(--u) * 147);
  /* 1200pxのコンテンツ幅の右端に合わせる */
  right: max(0px, calc((100% - 1200px) / 2));
  z-index: 100;
  width: clamp(44px, calc(var(--u) * 152), 152px);
}

.fixed-entry:hover {
  opacity: 1;
  transform: translateX(-6px);
}

/* =========================================
   SP
   テキスト画像が小さくなりすぎないよう、左右16pxまで広げる
========================================= */
@media (max-width: 767px) {
  .lp > *:not(.hero):not(.btn-entry):not(.btn-onsen):not(.about),
  .about__title {
    width: calc(100% - 32px);
  }

  .lp > .about {
    width: 100%;
  }

  .lp > .btn-entry,
  .lp > .btn-onsen {
    width: 80%;
  }

  .lp > *:not(.hero) {
    margin-top: max(calc(var(--u) * var(--mt)), 24px);
  }
}