@charset "UTF-8";
/*--------------------------------------------------------
「円」用のフォント（M PLUS Rounded 1c ExtraBold / SIL OFL 1.1）
数字は Roboto Condensed（Google Fonts / index.php の <link> で読み込み）だが、
このフォントに「円」は入っていない。
端末まかせの明朝・ゴシックが混ざらないように、
LP内の他の金額（uivec_07 など）と同じ丸ゴシックを「円」の1文字だけ埋め込んでいる（776バイト）
--------------------------------------------------------*/
@font-face {
    font-family: 'LP Yen';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAMIABAAAAAABbAAAAKxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbHhxABlYAPBEICoE4gT0LCAABNgIkAwwEIAWDfAcgFyQYCBuYBMgEHnid7f38tJf2TAKeU1MoZr6Z+MxmG76JSP7+VE0Ac6GcP6KojDm6sLQo1Fo3VzwW+1cbG0vVlqQP8AwD1XRhGgG4YKhC1ZWUG0nt9KO6KCqpakJDnQxNU8J5ag7rVnw3YujsKeMIGTll+FhCRjkmjCZkrGOCg5BxjmkTCJHPb0XKDdLAAsoa5ToZ6/IHxDPihaJZFWdNURSpKE5MSruT5sFUdaRhvGLUr5Bd5jQ61ESRN9hL3H72Yx5XVEm5D/L2DvmgEgZYUR8qN+pXXJzPB+aLU/MEQpAL09wq6JxcKNUiNsvmbVX4JRnl4tK85pawLL7t7L72JuqiPTuOXLhgX1Ny6FafPttOB190XrtZiMV2lzUoi27Yx7LI2XltZ9++ZnD9m+XlutBf6kJ/rAt9TEzgE++bnyPTHJM8ddXycfDZMP+rA05q2n9NC9I99fV3H9m0o5ot9Zo01bHZsLId1d4dg8eEex/pM+vNIPesb/Zw+XKof2/dn0YX+dA7f7g54/8ByzE1EW3tjf+Lmvj/Dh2WD+aMvxWWY09E4FEpxuEvAtX8JTUz7aT4iy5G4i4TvppMY8TTd1WbXnaJjBoEScIKCm78BMkoNi2q82AhimFgJY4kzI2lx0cxjWlMIoNYYpnKUKYwmklMIyKGqZ8YRwwTmcJIYqmlhCoamMh0JjCM4Qyjmkn0+HSmEs9QoilmFtOYgoMCJjJOG7YwnCnHPDqRCRjEE0McyaQTQwJxxDPXZnDz9PHTI8mklIlMZCTjGE7JUdxN7jbzdvCGdiOZzjgcTNm4aOi6odMZk4VMZBKzX5U+8hWaxs2qKdysiVEMxzgUHYlBHVOYyBiG69yWyXymM41Rr5h75cJ/0xBzKQkEl4UH8ty/JXTIl2a4Gade+WFnsC7kS2Wb7KIKAAA=) format('woff2');
    unicode-range: U+5186;
}

/*--------------------------------------------------------
LP レイアウト
デザイン原寸：幅900px / 総高9033px

  y=   0  h= 588  uivec_01_a / _b / _c   ヒーロー（クロスフェード）
  y= 588  h= 630  uivec_02bg_a / _b / _c  帯（スライダーに合わせてクロスフェード）
  y= 522  h= 620  uivec_02_a / _b / _c   報酬加算中（スライダー・帯より66px上に出る）
  y=1142  h=  76  ナビ（帯の中に重ねる）
  y=1218  h= 415  uivec_03
  y=1314  h= 215  uivec_btn_a            CTA①（pulse）
  y=1633  h=1162  uivec_04
  y=2795  h= 618  uivec_05
  y=3413  h= 630  uivec_06
  y=4043  h= 700  uivec_07
  y=4743  h=1715  uivec_08
  y=6458  h=1200  uivec_09_7th/8th/9th   入金明細（スライダー）
  y=7658  h=  49  ナビ
  y=7707  h=1326  uivec_10
  y=8517  h= 215  uivec_btn_b            CTA②（pulse）
--------------------------------------------------------*/
.lp {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}

.lp img {
    display: block;
    width: 100%;
    height: auto;
}

.lp a {
    display: block;
}

/* 画像1枚＝1セクション。高さは画像なりに積む（隙間が出ない） */
.sec {
    position: relative;
}

/*--------------------------------------------------------
スライダー（自動送り＋スワイプ）
--------------------------------------------------------*/
.slider {
    position: relative;
    overflow: hidden;
    touch-action: pan-y; /* 縦スクロールは残しつつ横ドラッグを拾う */
}

/* トランジションは常時かけておき、瞬間移動させたいときだけ .is-instant で切る。
   （JS側がこの transition-duration を読んでループの折り返しに使う） */
/* 横に長い1枚の帯がスクロールしていくように見せたいので、
   速度がほぼ一定になるイージングにして、時間も長めにとる */
.slider__track {
    /* じりじり送りの、始まりと終わりの位置（1枚ぶんの幅に対する割合）。
       両方 0% なら今までどおり「止まる→送る」だけになる（JSは共通のまま） */
    --drift-from: 0%;
    --drift-to: 0%;
    display: flex;
    width: 100%;
    /* JSが動き出す前の位置。JSが置く位置（じりじりの始点）と同じにしておかないと、
       読み込みから初期化までの間だけ素の位置に出て、あとから横に飛ぶ */
    transform: translate3d(var(--drift-from), 0, 0);
    transition: transform .35s cubic-bezier(.5, 0, .5, 1);
    will-change: transform;
}

.slider__track > * {
    flex: 0 0 100%;
    width: 100%;
    transition: transform .35s cubic-bezier(.5, 0, .5, 1), opacity .35s ease;
}

/* 表示中の1枚にはJS側が .is-current をつけている。
   カード送りのような奥行きを出したいときはここを有効にする
   （スクロール感は薄れる）
.slider__track > *        { opacity: .5; transform: scale(.9); }
.slider__track > .is-current { opacity: 1; transform: scale(1); }
*/

/* 指で送ったとき。長さは自動送りと同じになったので、
   残っているのは指に追従して見えるイージングの違いだけ */
.slider__track.is-swipe,
.slider__track.is-swipe > * {
    transition-duration: .35s;
    transition-timing-function: cubic-bezier(.2, .85, .3, 1);
}

/* 送る前の「じりじり」。
   絵の右端から左端まで、一定の速さで流す。
   送りきる一瞬だけが動きだと、止まっている時間のほうが長くて帯が死んで見えるため */
.slider__track.is-drift {
    transition-duration: 2.5s;
    transition-timing-function: linear;
}

/* 瞬間移動は常に最優先。.is-swipe より後に書かない */
.slider__track.is-instant,
.slider__track.is-instant > * {
    transition: none;
}

/* 画像＋金額を重ねる1枚 */
.slide {
    position: relative;
}

/* スライドの帯に重ねる「報酬加算中…」。
   帯は uivec_02_*.png 側にあり、文字だけがこの画像（900x66）。
   ゆっくり消えて戻るのを繰り返して、点いたり消えたりしているように見せる */
.slide__hosyu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: hosyu 1.4s ease-in-out infinite;
}

@keyframes hosyu {
    0%, 100% {
        opacity: 1;
    }
    55% {
        opacity: 0;
    }
}

/*--------------------------------------------------------
スライダーのナビ（矢印＋ドット）
デザイン原寸：行の高さ49px／矢印16×27px 中心x=281.5, 617／ドット径20px 中心x=383.5, 449.5, 515.5
--------------------------------------------------------*/
.slider-nav {
    position: relative;
    width: 100%;
    aspect-ratio: 900 / 49;
}

.slider-nav__arrow {
    position: absolute;
    top: 50%;
    width: 10%;
    aspect-ratio: 90 / 49;
    padding: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.slider-nav__arrow--prev {
    left: 31.2778%; /* 281.5 / 900 */
}

.slider-nav__arrow--next {
    left: 68.5556%; /* 617 / 900 */
}

.slider-nav__arrow svg {
    width: 17.7778%; /* 16 / 90 */
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.slider-nav__dots {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16.8889%; /* 152 / 900 */
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-nav__dot {
    width: 13.1579%; /* 20 / 152 */
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color .3s ease;
}

.slider-nav__dot.is-current {
    background-color: #333;
}

/*--------------------------------------------------------
クロスフェード（スライダーに追従して切り替わる側）
先頭の1枚だけを通常フローに残し、高さの基準にする
--------------------------------------------------------*/
.fade {
    position: relative;
}

.fade > * {
    transition: opacity .35s ease; /* 下のスライダーと同じ長さで動かす */
}

.fade.is-quick > * {
    transition-duration: .35s; /* スワイプで送られたとき */
}

.fade > * + * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}

/* JSが動いたら先頭固定をやめ、is-currentの1枚だけを表示する */
.fade.is-ready > * {
    opacity: 0;
}

.fade.is-ready > .is-current {
    opacity: 1;
}

/*--------------------------------------------------------
金額
デザイン原寸：スライド1枚 900x620
  カード     x=487..828（幅341）
  本日の収益 ラベル下の空き y=177..333（中心255）
  今月の累計 ラベル下の空き y=421..571（中心496）

数字そのものはJSが書き換える。ここは置き場所と見た目だけを持つ。
行の高さを --cell にして、その1行を空きの中心に置いている
--------------------------------------------------------*/
.amount {
    /* --cell は「円」だけ font-size が小さいので、
       それに影響されないよう font-size とは別の絶対長として持たせている */
    --fs: min(8.4444vw, 76px); /* 76 / 900 */
    --cell: calc(var(--fs) * 1.2);
    /* 指定のグラデーション。数字と「円」それぞれの文字に流し込む */
    --ink: linear-gradient(to bottom, #ff8c8c 0%, #ff8c8c 0%, #e90000 100%);

    position: absolute;
    left: 54.1111%;  /* 487 / 900 */
    width: 37.8889%; /* 341 / 900 */
    height: var(--cell);
    margin: 0;
    display: flex;
    align-items: baseline; /* 数字と「円」は別フォントなので、ベースラインでそろえる */
    justify-content: center;

    font-family: 'Roboto Condensed', 'Yu Gothic UI', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-optical-sizing: auto;
    font-size: var(--fs);
    font-weight: 700;
    line-height: var(--cell);
    font-feature-settings: normal; /* body の palt を切って桁の幅を揃える */
    white-space: nowrap;
    color: #e90000; /* グラデーションが効かない環境向け */

    /* 出てくるときだけ、少し下からせり上がる。
       長いと0からの登りはじめが見えないので短めにする */
    opacity: 0;
    transform: translateY(.14em);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .3, 1);
}

/* 空きの中心に1行ぶん置く */
.amount--day {
    top: calc(41.129% - var(--cell) / 2); /* 255 / 620 */
}

.amount--total {
    top: calc(80% - var(--cell) / 2); /* 496 / 620 */
}

/* 数え上げ中の1枚だけ見せる。
   クローンも実体と同じ組として数えるので、ここで特別扱いはしない */
.slide.is-shown .amount {
    opacity: 1;
    transform: none;
}

/* 数えている間も「円」を動かさないための重ね。
   見えない控え（amount__ghost）が数え終わった状態の幅を持ち、
   実際に動く数字（amount__live）を同じマスに右そろえで重ねている。
   JSが動かないときは中の span が無いので、ただのテキストとして出る */
.amount__num {
    display: inline-grid;
    justify-items: end;
    flex: none;
}

.amount__num > * {
    grid-area: 1 / 1;
}

.amount__ghost {
    visibility: hidden;
}

/* 「円」は数字より小さく、書体も別（Roboto Condensed に「円」は入っていない）。
   そろえる相手は数字の下端。カンマや「円」はベースラインより下に出るので、
   ベースラインやカンマに合わせると「円」だけ下に落ちて見える。
   上げ幅（マスの高さの2.15%）は Chrome で実際に描かれた数字のインクを
   測って決めたもの（カンマの列は avoid して末尾の桁で測る）。
   どちらかの書体か --cell の倍率を変えたら測り直すこと */
.amount__yen {
    position: relative;
    bottom: calc(var(--cell) * .0215);
    font-family: 'LP Yen', 'Yu Gothic UI', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-size: .62em;
    font-weight: 800;
}

/* 文字の中にグラデーションを流す */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .amount__num,
    .amount__yen {
        background-image: var(--ink);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* 数え直すときは、いったんフェードを切って消えた状態に戻す */
.slide.is-instant .amount {
    transition: none;
}

/*--------------------------------------------------------
↓↓↓ 各種レイアウト ↓↓↓
--------------------------------------------------------*/
.sec01 {
    z-index: 1;
}

/* 報酬加算中：グラデーション帯（h=630）の上端より66px上から始まる */
.sec02 {
    z-index: 2;
}

/* 帯。高さの基準はここ（スライダーは absolute で上に重ねる） */
.sec02__bg {
    position: relative;
    z-index: 1;
}

.sec02__slider {
    position: absolute;
    left: 0;
    width: 100%;
    top: -10.4762%; /* -66 / 630 */
    z-index: 2;
}

/* じりじり送りの始点と終点。

   このスライダーの絵は 900px のうち x=45..861 だけを使っていて、
   左に5%・右に4.333%の透明な余白がある。その余白ぶんだけ振ると、
     始点 … 絵の右端が画面の右端に接する（いちばん右に寄った位置）
     終点 … 絵の左端が画面の左端に接する（いちばん左に寄った位置）
   になり、絵が切れることなく右端から左端まで流せる。

   前後のスライドの絵はちょうど画面の外で接するので、
   じりじりの間は今の1枚だけが見えている。
   この範囲を広げると、隣の絵が端から顔を出しはじめる */
.sec02__slider .slider__track {
    --drift-from: 4.3333%; /* 39/900＝絵の右の余白 */
    --drift-to: -5%;       /* 45/900＝絵の左の余白 */
}

/* ナビは帯の中（スライドの下）に重ねるので、帯の高さは変えない */
.sec02__nav {
    position: absolute;
    left: 0;
    width: 100%;
    top: 89.2857%; /* 562.5 / 630 */
    z-index: 3;
}

/* 入金明細のナビは白地の上に出る。
   選んでいないドットが既定の#fffだと地と同じで消えてしまうので、少しだけ落とす。
   :not() を付けないと .slider-nav__dot.is-current と詳細度が並び、
   あとに書いたこちらが勝って選択中のドットまで薄くなる */
[data-nav="bank"] .slider-nav__dot:not(.is-current) {
    background-color: #eee;
}

/* CTAボタン（セクション画像の余白に重ねる） */
.btn {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 3;
}

.sec03 .btn {
    top: 23.1325%; /* 96 / 415 */
}

.sec10 .btn {
    top: 57.3907%; /* 761 / 1326 */
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.045);
    }
}

.pulse {
    animation: pulse 1.6s ease-in-out infinite;
}

/* OSの「アニメーションを表示しない」設定への配慮。
   止めるのは、装飾として鳴りっぱなしになるCTAのpulseだけ。

   スライダーの横移動・じりじり送り・クロスフェード・金額の数え上げは、
   この設定でも動かす。ここはLPが見せたいものそのもので、
   止めると「報酬が積み上がっていく」という話が伝わらなくなるため。
   （Windowsの「アニメーションを表示する」をOFFにしている環境は珍しくなく、
     そこで全部が一瞬で終わってしまうと作った意味がない）
   もし配慮を戻すなら、ここに次を足す：
     .sec02__slider .slider__track { --drift-from: 0%; --drift-to: 0%; }
   （金額はJSが数えているので、止めるならJS側の COUNT_MS を 0 にする） */
@media (prefers-reduced-motion: reduce) {
    .pulse {
        animation: none;
    }
}
/*--------------------------------------------------------
↑↑↑ 各種レイアウト ↑↑↑
--------------------------------------------------------*/