/* =============================================================================
   ジャックポット開催日 LP
   カラムは Figma の Desktop 幅 500px を基準に組み、--u（カラム幅 / 500）で縮める
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
    background: #8f0008;
}

body {
    position: relative;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: #000;
    background: #8f0008 url("../images/bg-page.jpg") center top / cover no-repeat;
    -webkit-font-smoothing: antialiased;
}

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

ul,
dl,
dd,
p,
h1,
h2 {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   カラム
   ----------------------------------------------------------------------------- */

.page {
    --u: calc(100cqi / 500);
    position: relative;
    width: min(500px, 100%);
    margin: 0 auto;
    /* hidden だと sticky ヘッダーが効かない。clip 非対応ブラウザでは hidden が残り、固定されないだけで崩れない */
    overflow: hidden;
    overflow: clip;
    container-type: inline-size;
    background: #fff;
}

@media (min-width: 440px) {
    .page {
        width: min(500px, 100% - 30px);
    }
}

.spacer {
    height: calc(var(--u) * 30);
    background: #fff;
}

/* 広い画面だけ、カラムの左右にロゴと QR を出す。スクロールしても画面内に残す */
.side {
    display: none;
    position: fixed;
    z-index: 2;
    max-width: none;
}

@media (min-width: 1280px) {
    .side {
        display: block;
    }
}

.side--logo {
    top: 406px;
    left: calc(50% - 622px);
    width: 297px;
}

.side--qr {
    top: 376px;
    left: calc(50% + 387px);
    width: 143px;
}

/* -----------------------------------------------------------------------------
   ヘッダー
   ----------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
}

/* ページ内リンクの着地点を固定ヘッダー（ロゴ 54 + ナビ 40）の下にずらす */
.page [id] {
    scroll-margin-top: calc(var(--u) * 94);
}

.header__logo {
    display: flex;
    align-items: center;
    height: calc(var(--u) * 54);
    padding: 0 0 0 calc(var(--u) * 20);
}

.header__logo-link img {
    width: calc(var(--u) * 165);
}

.header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 60);
    height: calc(var(--u) * 40);
    background: #000;
    white-space: nowrap;
}

.header__nav a {
    font-size: calc(var(--u) * 16);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   メインビジュアル
   ----------------------------------------------------------------------------- */

.mv {
    position: relative;
    height: calc(var(--u) * 878);
    background: url("../images/mv-bg.png") center / cover no-repeat;
}

.mv__panel {
    position: absolute;
    top: calc(var(--u) * 159);
    left: 0;
    width: 100%;
}

.mv__panel > img {
    width: 100%;
}

/* 代替フォントで文字幅が変わっても揃うよう、行ごとに left を持たず共通の枠で中央揃えにする */
.mv__date {
    position: absolute;
    left: calc(var(--u) * 243);
    width: calc(var(--u) * 200);
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: calc(var(--u) * 25);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.mv__date--gold {
    top: calc(var(--u) * 353);
}

.mv__date--silver {
    top: calc(var(--u) * 402);
}

.mv__date--bronze {
    top: calc(var(--u) * 448);
}

.scroll-mark {
    position: absolute;
    z-index: 1;
    top: calc(var(--u) * 799);
    left: 50%;
    width: calc(var(--u) * 131);
    translate: -50% 0;
    pointer-events: none;
}

.scroll-mark img {
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   開催日程・ご注意事項
   ----------------------------------------------------------------------------- */

.schedule {
    position: relative;
    height: calc(var(--u) * 996);
    background:
        url("../images/schedule-bg.png") calc(var(--u) * -401) calc(var(--u) * -1041) / calc(var(--u) * 1081) calc(var(--u) * 2179) no-repeat,
        #fff;
}

.schedule__intro {
    position: absolute;
    top: calc(var(--u) * 56);
    right: calc(var(--u) * 33);
    left: calc(var(--u) * 33);
    font-size: calc(var(--u) * 22);
    font-weight: 900;
    line-height: calc(var(--u) * 46);
    color: #fff;
    text-align: center;
}

.schedule__panel {
    position: absolute;
    left: calc(var(--u) * 25);
    width: calc(var(--u) * 450);
    background: url("../images/schedule-panel.png") center / 100% 100% no-repeat;
}

.schedule__panel--dates {
    top: calc(var(--u) * 272);
    height: calc(var(--u) * 416.5);
}

.schedule__panel--notice {
    top: calc(var(--u) * 722);
    height: calc(var(--u) * 217.6);
    background-image: url("../images/notice-panel.png");
}

.schedule__pill {
    position: absolute;
    left: 50%;
    width: calc(var(--u) * 300);
    height: calc(var(--u) * 40);
    padding-left: 0.36em;
    border-radius: calc(var(--u) * 28);
    background: #000;
    font-size: calc(var(--u) * 19);
    font-weight: 700;
    line-height: calc(var(--u) * 40);
    letter-spacing: 0.36em;
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
}

.schedule__panel--dates .schedule__pill {
    top: calc(var(--u) * 38);
}

.schedule__panel--notice .schedule__pill {
    top: calc(var(--u) * 32);
}

.schedule__table {
    position: absolute;
    top: calc(var(--u) * 100);
    left: calc(var(--u) * 25);
    width: calc(var(--u) * 400);
}

.schedule__table > img {
    width: 100%;
}

.schedule__table-dates li {
    position: absolute;
    left: calc(var(--u) * 220);
    font-size: calc(var(--u) * 19);
    font-weight: 900;
    line-height: calc(var(--u) * 13);
    white-space: nowrap;
}

.schedule__table-dates li:nth-child(1) {
    top: calc(var(--u) * 68);
}

.schedule__table-dates li:nth-child(2) {
    top: calc(var(--u) * 131);
}

.schedule__table-dates li:nth-child(3) {
    top: calc(var(--u) * 193);
}

.schedule__note {
    position: absolute;
    top: calc(var(--u) * 346);
    right: calc(var(--u) * 25);
    left: calc(var(--u) * 25);
    font-size: calc(var(--u) * 12);
    line-height: calc(var(--u) * 21);
}

.schedule__notice {
    position: absolute;
    top: calc(var(--u) * 94);
    right: calc(var(--u) * 16);
    left: calc(var(--u) * 17);
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 25);
}

.schedule__notice li::before {
    content: "▪︎";
}

/* -----------------------------------------------------------------------------
   ジャックポット制度
   ----------------------------------------------------------------------------- */

.system {
    height: calc(var(--u) * 1500);
    overflow: hidden;
}

.system > img {
    width: calc(var(--u) * 510);
    max-width: none;
    margin-left: calc(var(--u) * -5);
}

/* -----------------------------------------------------------------------------
   見出し（FAQ / SNS 共通）
   ----------------------------------------------------------------------------- */

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-title__img--faq {
    width: calc(var(--u) * 161);
}

.section-title__img--sns {
    width: calc(var(--u) * 161);
}

.section-title__sub {
    margin-top: calc(var(--u) * 13);
    padding-left: 0.36em;
    font-size: calc(var(--u) * 18);
    font-weight: 900;
    line-height: calc(var(--u) * 25);
    letter-spacing: 0.36em;
    color: #fff;
    white-space: nowrap;
}

.section-title__sub--sns {
    margin-top: calc(var(--u) * 18);
}

/* -----------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------------- */

.faq {
    padding: calc(var(--u) * 67) 0 calc(var(--u) * 39);
    background: rgba(254, 190, 33, 0.933);
}

.faq__list {
    margin-top: calc(var(--u) * 31);
}

.faq__item + .faq__item {
    margin-top: calc(var(--u) * 34);
}

.faq__q,
.faq__a {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(var(--u) * 350);
    margin-left: calc(var(--u) * 73);
    border-radius: calc(var(--u) * 10);
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 25);
    letter-spacing: 0.17em;
}

.faq__q {
    justify-content: center;
    min-height: calc(var(--u) * 62);
    padding: calc(var(--u) * 6) calc(var(--u) * 12);
    background: #fff;
    font-weight: 500;
    text-align: center;
}

.faq__q--narrow {
    letter-spacing: 0.1em;
}

.faq__q::before,
.faq__a::after {
    content: "";
    position: absolute;
    background: center / contain no-repeat;
}

.faq__q::before {
    top: calc(var(--u) * -21);
    left: calc(var(--u) * -49);
    width: calc(var(--u) * 39);
    height: calc(var(--u) * 47);
    background-image: url("../images/faq-q.svg");
}

.faq__a {
    min-height: calc(var(--u) * var(--box-h));
    margin-top: calc(var(--u) * 23);
    padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 15);
    border: calc(var(--u) * 3) solid #fff;
    font-weight: 700;
    color: #fff;
    text-align: justify;
}

.faq__a--left {
    text-align: left;
}

.faq__a::after {
    top: calc(var(--u) * -10);
    right: calc(var(--u) * -49);
    width: calc(var(--u) * 39);
    height: calc(var(--u) * 42);
    background-image: url("../images/faq-a.svg");
}

.faq__a a {
    color: inherit;
}

/* -----------------------------------------------------------------------------
   SNS
   ----------------------------------------------------------------------------- */

.sns {
    position: relative;
    height: calc(var(--u) * 950);
    background: url("../images/sns-bg.png") center / cover no-repeat;
}

.section-title--sns {
    padding-top: calc(var(--u) * 60);
}

.sns__x,
.sns__line {
    position: absolute;
    left: calc(var(--u) * 30.5);
    width: calc(var(--u) * 446);
}

.sns__x {
    top: calc(var(--u) * 201);
}

.sns__line {
    top: calc(var(--u) * 608);
}

.sns__x > img,
.sns__line > img {
    width: 100%;
}

.sns__follow,
.sns__line-button {
    position: absolute;
    display: block;
}

.sns__follow {
    left: calc(var(--u) * 155);
    width: calc(var(--u) * 212);
}

.sns__follow--wanniki {
    top: calc(var(--u) * 169);
}

.sns__follow--official {
    top: calc(var(--u) * 315);
}

.sns__line-button {
    top: calc(var(--u) * 288);
    left: calc(var(--u) * 45);
    width: calc(var(--u) * 355);
}

.sns__follow img,
.sns__line-button img {
    width: 100%;
}

/* -----------------------------------------------------------------------------
   フッター
   ----------------------------------------------------------------------------- */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(var(--u) * 235);
    padding-top: calc(var(--u) * 24);
    background: rgba(254, 190, 33, 0.933);
    color: #fff;
    font-weight: 900;
    text-align: center;
}

.footer__links {
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 25);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.footer__links a {
    color: inherit;
}

.footer__logo {
    width: calc(var(--u) * 255);
    margin-top: calc(var(--u) * 62);
}

.footer__copy {
    margin-top: calc(var(--u) * 7);
    font-size: calc(var(--u) * 12);
    line-height: calc(var(--u) * 25);
    letter-spacing: 0.06em;
}

/* scroll 画像: 枠は動かさず、画像だけ上 150px からフェードイン */
@media (prefers-reduced-motion: no-preference) {
    .js [data-enter="up"] img {
        opacity: 0;
        translate: 0 calc(var(--u) * -150);
    }

    .js [data-enter="up"].is-in img {
        animation: enter-up 600ms ease-out forwards;
    }
}

@keyframes enter-up {
    to {
        opacity: 1;
        translate: 0 0;
    }
}