@charset "UTF-8";
/*
 * ゲーム紹介ページ (LP)。デザイン: LP.png (PC / SP)
 *
 * 空・海・太陽・雲・波・ギザギザ・ストライプはぜんぶここで描く。
 * 画像に頼ると差し替えのたびに書き出しが要るし、幅の合わない端末で
 * 帯が切れる。
 *
 * 書き方は SP を素で書いて、768px 以上で PC に組み替える。
 */

/* ── 色と余白 ─────────────────────────────────────────────── */
:root {
    --lp-brown: #845438;          /* 本文 (デザイン実測) */
    --lp-brown-d: #55402A;
    --lp-orange: #F08C21;
    --lp-pink: #F27474;
    --lp-green: #06C755;          /* LINE の緑 */
    /* 空はベタ塗り (デザインはグラデーションではない)。PC と SP で少し違う */
    --lp-sky: #7ACEE3;
    --lp-sky-pc: #8ED1E2;
    --lp-sea: #54B5AA;            /* hero_sea.png の海と同じ色 */
    --lp-sea-d: #3EA096;
    --lp-hill: #7BC144;
    --lp-soil: #A6815A;
    --lp-rose: #FFE9F7;
    --lp-cream: #F7E9C6;
    --lp-yellow: #FCEF74;
    --lp-max: 1000px;

    /* ギザギザ (山が上を向く) */
    --lp-zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15' preserveAspectRatio='none'%3E%3Cpath d='M0 15h22L11 0Z' fill='%23000'/%3E%3C/svg%3E");
    /*
     * セクションのふちのカーブ。上にふくらむ (dome) と下にふくらむ (dome-down)。
     * 放物線 (二次ベジェ) を使う。楕円の弧だと両端で接線が垂直になり、
     * 角が引っかかったように見える。制御点を箱の外に置くと、頂点が
     * ちょうど箱いっぱいの高さになる。
     */
    --lp-dome: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20Q50 -20 100 20Z' fill='%23000'/%3E%3C/svg%3E");
    --lp-dome-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 40 100 0Z' fill='%23000'/%3E%3C/svg%3E");
    /* デコパーツの帯に散らすキラキラ (4 方向にとがった星) */
    --lp-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.2 6.6 4.2 9.6 12 12-7.8 2.4-10.8 5.4-12 12-1.2-6.6-4.2-9.6-12-12 7.8-2.4 10.8-5.4 12-12z' fill='%23000'/%3E%3C/svg%3E");
    /* 土の粒 (丸みのある三角)。720x61 の並びを横に繰り返す */
    --lp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='61' viewBox='0 0 720 61'%3E%3Cdefs%3E%3Cpath id='g' d='M8 .8c2.1 1.5 5.2 5.2 6.2 7.9.9 2.5-2.5 3.7-6.2 3.7s-7.1-1.2-6.2-3.7C2.8 6 5.9 2.3 8 .8z'/%3E%3C/defs%3E%3Cg fill='%23BE9C78'%3E%3Cuse href='%23g' transform='translate(40 8) rotate(20) scale(1.5)'/%3E%3Cuse href='%23g' transform='translate(215 40) rotate(-140) scale(1.2)'/%3E%3Cuse href='%23g' transform='translate(430 10) rotate(70) scale(1.7)'/%3E%3Cuse href='%23g' transform='translate(600 42) rotate(200) scale(1.3)'/%3E%3Cuse href='%23g' transform='translate(330 46) rotate(-30) scale(.9)'/%3E%3C/g%3E%3Cg fill='%238F6A43'%3E%3Cuse href='%23g' transform='translate(130 44) rotate(160) scale(1.4)'/%3E%3Cuse href='%23g' transform='translate(370 12) rotate(-60)'/%3E%3Cuse href='%23g' transform='translate(660 14) rotate(110) scale(1.6)'/%3E%3Cuse href='%23g' transform='translate(520 50) rotate(30) scale(.8)'/%3E%3C/g%3E%3C/svg%3E");
    --lp-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6c10 0 10-6 20-6s10 6 20 6 10-6 20-6 10 6 20 6 10-6 20-6 10 6 20 6v6z' fill='%23fff'/%3E%3C/svg%3E");
}

/* ── 土台 ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* はみ出したふち (丸いふくらみ・ストライプ) で横スクロールが出ないようにする。
   body だけに掛けても、ビューポートを持つのは html なので効かない */
html, body { overflow-x: clip; }

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

body.lp {
    margin: 0;
    background: #fff;
    color: var(--lp-brown);
    font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
        "Hiragino Sans", "Yu Gothic", "游ゴシック体", "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: .04em;
}

/*
 * 素の見た目を落とすだけの指定。:where() で包んで詳細度を 0 にする。
 * ここを素で書くと (.lp p = 詳細度 0,1,1) クラス 1 つ (0,1,0) より強く、
 * .lpXxx { margin: … } が軒並み効かなくなる。実際に見出しやバッジの
 * 余白が丸ごと無視されていた。
 */
:where(.lp img) { max-width: 100%; height: auto; display: block; }
:where(.lp a) { color: inherit; text-decoration: none; }
:where(.lp ul, .lp ol) { margin: 0; padding: 0; list-style: none; }
:where(.lp h1, .lp h2, .lp h3, .lp p) { margin: 0; }

/* 改行の出し分け。デザインの行送りに合わせるための改行は、
   幅が変わると変なところで切れるので画面ごとに出し分ける */
.lpBrPc { display: none; }
.lpBrSp { display: inline; }

.lpInner {
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 22px;
    position: relative;
    z-index: 2;
}

/* ── お知らせバー ─────────────────────────────────────────── */
.lpBar {
    position: relative;
    background: var(--lp-pink);
    /* 斜めのストライプ。画像にすると端末幅で目が変わる */
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .13) 0 14px,
        rgba(255, 255, 255, 0) 14px 28px
    );
    color: #fff;
    /*
     * 高さは中身に任せる (固定すると折り返した行がはみ出す)。
     *
     * 下の余白は波のぶん (11px) + 余裕をとる。波は ::after で下のふちに
     * 空の色を重ねて描いているので、余白が足りないと折り返した 2 行目に
     * 波が食い込む。
     */
    padding: 9px 14px 19px;
}

/*
 * 下のふちを波にする。次の空に食い込ませる。
 *
 * 波の大きさは境目ごとに違う (デザイン実測)。絵は 1 枚 (3 山ぶん) で、
 * 大きさは background-size で決める。タイルの幅 = 山 3 つぶん、
 * 高さ = 波の上下の振れ幅。ここは一番小さい波。
 */
.lpBar::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    /* 少し下に食い込ませる。ふちの半透明な 1 行がちょうど境目に来ると、
       後ろの白が透けて筋になる */
    bottom: -3px;
    height: 8px;
    /* 波の形で空の色を切り抜く */
    background: var(--lp-sky);
    -webkit-mask: var(--lp-wave) repeat-x bottom / 84px 8px;
    mask: var(--lp-wave) repeat-x bottom / 84px 8px;
}

.lpBar__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: var(--lp-max);
    margin: 0 auto;
}

/*
 * 「毎月開催」。白い丸を 1 文字ずつ、少し重ねて並べる。
 * ピル 1 つで塗ると、デザインの「丸が 4 つ連なった形」にならない。
 */
.lpBar__badge {
    flex: none;
    display: flex;
    align-items: center;
    color: var(--lp-pink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0;
}

.lpBar__badge span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: #fff;
}

/* 隣どうしを少しだけ重ねる (丸が連なって見える) */
.lpBar__badge span + span { margin-left: -.45em; }

/*
 * デザインは 2 行 (360px 幅)。狭い端末でも 2 行に収まるよう、
 * 幅に応じて少しだけ縮める。固定にすると 320px の端末で 3 行になり、
 * 最後の行が「る！」だけになる。
 */
.lpBar__text {
    font-size: clamp(11.5px, 3.55vw, 13px);
    line-height: 1.55;
    font-weight: 700;
    letter-spacing: 0;
}

/* ── メニュー ─────────────────────────────────────────────── */
/*
 * 三本線 (MENU) と CLOSE の箱。
 *
 * 箱はここで描く。支給されたのは中の絵だけ (ico_menu.svg / ico_close.svg) で、
 * MENU と CLOSE で同じ箱を使うため。
 * デザイン実測: 71x59、角丸 12px、ふちの内側 4px に点線。
 */
.lpIcoBtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 71px;
    height: 59px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--lp-cream);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .10);
    cursor: pointer;
    line-height: 0;
}

/* 縫い目。ふちの内側に点線を 1 本回す */
.lpIcoBtn::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px dotted #E4CFAA;
    border-radius: 8px;
    pointer-events: none;
}

/*
 * はしに付く箱は、そのはし側の角を落とさない (デザイン実測)。
 *   MENU  … 画面の右はしに貼り付く    → 右の角は直角
 *   CLOSE … ドロワーの左に貼り付く    → 右の角は直角 (ドロワーとつながって見える)
 * 縫い目もその辺だけ open にして、点線を上下ともはしまで走らせる。
 *
 * セレクタは 2 クラスにする。.lpIcoBtn::after と同じ強さだと
 * 書く順番で勝ち負けが変わってしまう。
 */
.lpIcoBtn.lpMenuBtn,
.lpIcoBtn.lpDrawer__close {
    border-radius: 12px 0 0 12px;
}

.lpIcoBtn.lpMenuBtn::after,
.lpIcoBtn.lpDrawer__close::after {
    /* 右は 2px はみ出させて、点線の縦線を箱の外に追い出す */
    inset: 4px -2px 4px 4px;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}

.lpIcoBtn__ico { width: auto; height: auto; }

.lpMenuBtn {
    position: absolute;
    /* デザイン実測: 画面の上から 49px (お知らせバーに少し重なる) */
    top: -19px;
    right: 0;
    z-index: 40;
}

.lpDrawerWrap { position: fixed; inset: 0; z-index: 50; }
.lpDrawerWrap[hidden] { display: none; }

.lpDrawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    border: 0;
    animation: lpFade .2s ease both;
}

.lpDrawer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    /* デザイン実測: 360px 幅に対して 300px */
    width: min(83.3%, 380px);
    background: var(--lp-cream);
    padding: 11px 20px calc(33px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    animation: lpSlide .24s ease both;
    overflow-y: auto;
    /* CLOSE の右のはしを隠す側。下の .lpDrawer__close と対で効く */
    z-index: 1;
}

@keyframes lpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }

/*
 * 閉じるときは開いたときの逆再生。閉じ終わってから hidden にするので、
 * JS 側で animationend を待っている。
 *
 * 同じ名前のまま direction: reverse にしても効かない。すでに終わった
 * アニメーションは名前が変わらないと再生し直されず、いきなり終わりの
 * 姿 (画面の外) になる。別名のキーフレームにすること。
 */
@keyframes lpSlideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes lpFadeOut { from { opacity: 1; } to { opacity: 0; } }

.lpDrawerWrap.is-closing .lpDrawer { animation: lpSlideOut .24s ease both; }
.lpDrawerWrap.is-closing .lpDrawer__backdrop { animation: lpFadeOut .2s ease both; }

/*
 * CLOSE ボタン。
 *
 * 開くときは三本線のボタンがここまで動いてくる (JS が最初だけ
 * 三本線の位置へずらし、transform を戻して滑らせる)。着くまでは
 * 三本線の絵のまま、着いたら CLOSE の箱に変える。
 * いきなり出すと、押した三本線と別のものが降ってきたように見える。
 */
.lpDrawer__close {
    position: absolute;
    top: 52px;
    right: min(83.3%, 380px);
    /* 右のはしはドロワーの下に少しもぐらせる (デザイン) */
    margin-right: -10px;
    /*
     * ドロワーより後ろに置く。前に出ていると、もぐらせた 10px ぶんの
     * 影がドロワーの上に灰色の帯として見えていた。
     * 背景 (.lpDrawer__backdrop) よりは前 (DOM の順で前に出る)。
     */
    z-index: 0;
    transition: transform .24s ease;
}

/* 動いている間は三本線の絵のまま、着いたら CLOSE の絵に変える */
.lpDrawer__close .lpIcoBtn__ico--close,
.lpDrawer__close.is-arrived .lpIcoBtn__ico--menu { display: none; }
.lpDrawer__close.is-arrived .lpIcoBtn__ico--close { display: block; }

.lpDrawer__list li + li { border-top: 2px solid #fff; }

.lpDrawer__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* デザイン実測: 1 行 82px */
    padding: 23px 4px;
    font-size: 18px;
    font-weight: 700;
}

.lpDrawer__arrow {
    width: 10px;
    height: 10px;
    border-top: 2.5px solid var(--lp-brown);
    border-right: 2.5px solid var(--lp-brown);
    transform: rotate(45deg);
}

.lpDrawer__cta { margin-top: auto; padding-top: 24px; }

/* ── ボタン ───────────────────────────────────────────────── */
.lpCtaBlock { text-align: center; }

.lpCta__lead {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* 「\ … /」のかぎ線 */
.lpCta__lead::before,
.lpCta__lead::after {
    content: "";
    width: 2px;
    height: 18px;
    background: currentColor;
    border-radius: 2px;
}
.lpCta__lead::before { transform: rotate(-22deg); }
.lpCta__lead::after { transform: rotate(22deg); }

/* a を付けて .lp a { color: inherit } に勝たせる。
   クラスだけだと負けて、緑のボタンの文字が本文の茶色のままになる */
a.lpCta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 420px);
    margin: 0 auto;
    min-height: 60px;
    /*
     * 左右の余白はカモメンと矢印の丸のぶん。左右で差をつけて、
     * 文字がボタンの中央に来るようにする (デザイン実測)。
     */
    padding: 8px 69px 8px 78px;
    border-radius: 999px;
    background: var(--lp-green);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    transition: transform .12s ease;
}

a.lpCta:active { transform: translateY(2px); }

/*
 * カモメンはボタンから上下にはみ出して立つ。
 * 絵の四辺に透明の余白があるので、見た目の幅 (デザイン実測 67px) に
 * なるよう少し大きく置き、左にずらして絵の端をボタンの端にそろえる。
 */
.lpCta__kamomen {
    position: absolute;
    left: -1px;
    top: 50%;
    width: 73px;
    height: auto;
    /* 中央よりわずかに上 (デザイン実測) */
    transform: translate(0, calc(-50% - 3px));
}

.lpCta__arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lpCta__arrow img { width: 19px; }

/*
 * メニューの中のボタン。カモメンは置かないので左の余白は詰める。
 *
 * a を付けないと a.lpCta (詳細度 0,1,1) に負けて余白が上書きされず、
 * 文字が 3 行に折り返してボタンからはみ出す。
 * 幅は端末によって変わるので、文字も画面幅に合わせて縮める。
 */
a.lpCta--plain {
    font-size: clamp(15px, 4.7vw, 17px);
    min-height: 60px;
    padding: 8px 78px 8px 26px;
}

.lpCta--plain .lpCta__arrow { width: 40px; height: 40px; right: 10px; }

/*
 * スクロール中ずっと出しておくボタン (デザイン: SP のモック)。
 * 画面の下に浮かせる。PC は出さない (デザインに無い)。
 */
.lpSticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0 12px calc(17px + env(safe-area-inset-bottom));
    pointer-events: none;
    animation: lpStickyIn .25s ease both;
}

.lpSticky[hidden] { display: none; }

@keyframes lpStickyIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

a.lpCta--sticky {
    pointer-events: auto;
    width: 100%;
    min-height: 48px;
    padding: 6px 46px 6px 76px;
    font-size: 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.lpCta--sticky .lpCta__kamomen { width: 72px; left: -1px; }
.lpCta--sticky .lpCta__arrow { width: 32px; height: 32px; right: 9px; }
.lpCta--sticky .lpCta__arrow img { width: 14px; }

/* 「DL不要」の吹き出し。カモメンの右上に乗せる */
.lpCta__badge {
    position: absolute;
    left: 64px;
    top: -23px;
    width: 54px;
    height: auto;
}

/* ── 空と雲 ───────────────────────────────────────────────── */
/* ── ヒーロー ─────────────────────────────────────────────── */
/* 背景は body の白のまま。ここで白を塗ると、お知らせバーの波の
   食い込みを隠してしまい、空との境目に薄い筋が出る */
.lpHero { position: relative; }

/*
 * 空と海の箱。ここから下 (ボタン) は白地。
 *
 * デザイン (PC 1440x709 / SP 360x532) の座標をそのまま % にして置く。
 * 箱に aspect-ratio を持たせているので、画面幅が変わっても並びは崩れない。
 * 1 枚絵にしないのは、PC と SP で並びが違うため (SP は島を大きく、
 * 東京タワーを小さく左端に置く。1 枚絵の拡大では両立できない)。
 */
.lpHero__stage {
    position: relative;
    aspect-ratio: 360 / 532;
    background: var(--lp-sky);
    /*
     * 1px 上に食い込ませる。お知らせバーの高さは端数を持つので、
     * 空の一番上の行が後ろの白と混ざって薄い筋になる。
     * 波 (バーの ::after) の上に重ねてしまえば見えない。
     */
    margin-top: -1px;
}

.lpHero__stage > * { position: absolute; margin: 0; }

/*
 * 海の下のふち (SP)。白地との境はまっすぐではなく、下にふくらむ弧。
 * デザイン実測 (360px 幅): 左右のはしが 714px、中央が 725px なので
 * ふくらみは 11px。箱の下にその弧だけを足す。
 *
 * 空と海はステージの背景と子要素なので、ステージ自体を丸めても
 * 中の海は丸まらない (border-radius は中身を切り取らない)。
 * ロゴがステージの下にはみ出す作りなので overflow: hidden も使えない。
 * 1px 重ねているのは、ステージの高さが端数のときに
 * 境目へ白い筋が出るのを防ぐため。
 */
.lpHero__stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    height: 12px;
    background: var(--lp-sea);
    border-radius: 0 0 50% 50% / 0 0 12px 12px;
}

/* 幅は要素ごとに % で決める。ここで img に width を掛けると
   (クラスより詳細度が高いので) 全部 100% で潰れる */
.lpHero__stage img { height: auto; }
.lpHero__copy img,
.lpHero__bubble img { width: 100%; }

/*
 * 海。上のふち (ゆるい山なり) だけ絵で、その下は同じ色でベタ塗り。
 *
 * 絵とベタを縦に積んで、ベタ側に残りを詰めさせる。高さを calc で
 * 出すと端数が合わず、境目に 1px の線 (空が透けたもの) が出る。
 * vw はスクロールバーを含む幅なので、要素の幅とも一致しない。
 */
.lpHero__sea {
    left: 0;
    right: 0;
    top: 68.2%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.lpHero__sea img { width: 100%; }

.lpHero__seaBody {
    flex: 1;
    background: var(--lp-sea);
    /* 端数で隙間があかないよう 1px 食い込ませる */
    margin-top: -1px;
}

.lpHero__hill { left: -7.5%;  top: 46.4%; width: 53.6%; z-index: 1; }
.lpHero__kame { left: 6.1%;   top: 40.6%; width: 99.7%; z-index: 3; }
.lpHero__sun  { left: 85.3%;  top: 14.3%; width: 14.7%; z-index: 1; }

.lpHero__cloud { z-index: 1; }
.lpHero__cloud--1 { left: 15.3%; top: 47.6%; width: 11.1%; }
.lpHero__cloud--2 { left: 84%;   top: 56%;   width: 13%; }
/* .lp img { display: block } と詳細度で並ぶよう img を付ける。
   クラスだけだと負けて、SP でも 3 つ目の雲が出てしまう */
img.lpHero__cloud--3 { display: none; }

.lpHero__copy   { left: 7.2%;  top: 8.8%;  width: 61.9%; z-index: 4; }
.lpHero__bubble { left: 65.8%; top: 23.9%; width: 23.9%; z-index: 4; }

/* ロゴは箱の下にはみ出す (海と白地の境目にまたがる) */
.lpHero__logo { left: 17.2%; top: 91.7%; width: 65.3%; z-index: 5; }

/*
 * 10連ガチャチケットプレゼント (チュートリアル突破の特典)。
 *
 * PC と SP で絵も置き場所も違うので 2 枚用意して出し分ける。
 *   SP … ロゴの下の白地に横いっぱい (ステージの外)
 *   PC … 海の右手に浮かべる (ステージの中)
 * ステージの中と外で親が違うため、1 枚を動かすのではなく片方ずつ出す。
 */
.lpHeroGift { margin: 0; }
.lpHeroGift img { display: block; width: 100%; height: auto; }

/*
 * SP: ロゴのすぐ下 (白地)。
 *
 * ロゴはステージの中に絶対配置されていて、下へはみ出している。
 * そのはみ出しぶんだけ下げないとロゴに重なる。ロゴの下端は
 *   top 91.7% × (532/360) + 幅 65.3% × (237/446) = 幅の 170.2%
 * ステージの下端は幅の 147.8% なので、差の 22.4% が余白。
 * % の margin は親 (.lpHero) の幅を基準にするので、画面幅が変わっても合う。
 * デザインではロゴの下端に少しかかるので 22% にしている。
 */
.lpHeroGift--sp {
    width: 94%;
    margin: 22% auto 0;
}

/* PC 用はステージの中に絶対配置するので SP では出さない。
   .lpHero__stage > * { position: absolute } を打ち消す必要はない (消すだけ) */
.lpHeroGift--pc { display: none; }

/* ロゴが箱からはみ出すぶん、ボタンはその下に置く */
/* 上の余白はロゴのはみ出しを避けるためのもの。SP はプレゼントの絵が
   その役目を持つので、ここはプレゼントとの間隔だけでよい */
.lpHero__cta { position: relative; z-index: 5; padding: 24px 13px 0; }
.lpHero__cta .lpCta__lead { color: var(--lp-green); margin-bottom: 6px; }

/* ボタンの下から次のセクションまで (デザイン実測: SP 20px / PC 64px) */
.lpHero { padding-bottom: 10px; }

/* ── 見出しまわり ─────────────────────────────────────────── */
/* 若葉 + ピル。若葉はピルに少しかぶせる (デザイン実測: 34x23 / 80x26) */
.lpBadge {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.lpBadge .lpSprout {
    /*
     * 絵の四辺に余白があるので、見た目 34px になるよう少し大きく置く。
     * 茎の先が「O」の少し上に来るところまで下げる (デザイン実測)。
     *
     * z-index が要る。ピルは DOM で後ろにあるので、そのままだと
     * 茎の先がピルの水色に隠れて、重なって見えない。
     */
    position: relative;
    z-index: 1;
    width: 38px;
    height: auto;
    margin-bottom: -4px;
}

.lpBadge__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
}

.lpBadge--mint .lpBadge__text  { background: #CBF1EC; color: #54B5AA; }
.lpBadge--pink .lpBadge__text  { background: #FBD6DA; color: var(--lp-pink); }
.lpBadge--cream .lpBadge__text { background: var(--lp-cream); color: var(--lp-orange); }
.lpBadge--sky .lpBadge__text   { background: #BFECFF; color: #5CA7C7; }

.lpH2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 14px;
}

.lpH2--onDark { color: #fff; }
.lpH2 em { font-style: normal; color: #FFE94A; }

.lpLead { text-align: center; font-size: 14px; line-height: 2; }
.lpLead--sm { font-size: 13px; }
.lpLead--onDark { color: #fff; }
/* 本文の中で目を引かせたいところ。色だけだと弱いので太くもする
   (指定: 黄色の「上位に入賞」「“本物の新鮮野菜”」「イベント限定のかわいいデコ」) */
.lpLead em { font-style: normal; font-weight: 700; }
.lpLead em.is-y { color: #FFE94A; }

.lpNote {
    text-align: center;
    font-size: 11px;
    line-height: 1.8;
    margin-top: 12px;
    opacity: .85;
}

.lpNote--onDark { color: #fff; opacity: .9; }

/* セクションの境目に置く芽。カーブ (::after) より手前に出し、
   足元がカーブに少し埋まるところまで下げる */
.lpSproutDivider {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding-top: 26px;
    margin-bottom: -9px;
}

.lpSproutDivider .lpSprout { width: 34px; height: auto; }

/* ── ABOUT ────────────────────────────────────────────────── */
/*
 * 「カメ農園とは？」。文字の大きさ・行間・間隔はデザインの実測値。
 * 下の絵は 黄色いにじみ → 丘 → 雲 → カメ の重ね。位置は vw で置いて
 * 画面幅に追従させる (デザイン: PC 1440 / SP 360 幅)。
 */
/*
 * 黄色いにじみはセクションの背景に置く。ステージ (丘を切るために
 * overflow: hidden) の中だと、注記の裏まで色が回らない。
 */
.lpAbout {
    position: relative;
    padding: 10px 0 0;
    /*
     * 黄色いにじみ。本文と注記の裏まで回すので、ステージより高くとる。
     * 横に広い楕円にして、画面の端まで色が届くようにする。
     */
    background:
        radial-gradient(100% 100% at 50% 100%,
            #F8D67F 0%, #F9D887 38%, #FBE5AF 82%, rgba(255, 255, 255, 0) 100%)
            no-repeat bottom center / 100% calc(63vw + 100px),
        #fff;
}

.lpAbout .lpH2 { font-size: 32px; margin-bottom: 0; }

.lpAbout .lpLead {
    /* 折り返しは改行タグで決める (デザイン: SP 4 行 / PC 3 行) */
    margin: 22px auto 0;
    font-size: 14.5px;
    line-height: 1.72;
}

.lpAbout .lpNote { margin-top: 12px; font-size: 12px; }

.lpAbout__stage {
    position: relative;
    height: 63vw;
    margin-top: -2px;
    overflow: hidden;
}

/*
 * 丘 (海)。上のふちだけ弧で、下は塗りつぶし。
 *
 * 楕円 1 つで描くと、画面のふちに近いほど上下の弧が寄って細くなり、
 * その下に背景の黄色が透けて見える (デザインは端までべた塗り)。
 * 角丸を上の 2 つだけにして、下はセクションの底まで伸ばす。
 */
.lpAbout__hill {
    position: absolute;
    left: 50%;
    top: 26.1vw;
    bottom: 0;
    width: 144%;
    transform: translateX(-50%);
    /* 弧の高さ。デザイン実測: 画面の端と真ん中で 24px の差 */
    border-radius: 50% 50% 0 0 / 23.6vw 23.6vw 0 0;
    background: #359F92;
}

.lpAbout__cloud { position: absolute; }
.lpAbout__cloud--1 { left: 4.4%; top: 6.7vw;  width: 15.8%; }
.lpAbout__cloud--2 { left: 85%;  top: 13.6vw; width: 10%; }
/* 3〜5 は PC だけ (デザイン: SP は 2 つ) */
img.lpAbout__cloud--3,
img.lpAbout__cloud--4,
img.lpAbout__cloud--5 { display: none; }

.lpAbout__kame {
    position: absolute;
    left: 18.9%;
    top: 5vw;
    width: 65.3%;
}

/* ── HOW TO PLAY ──────────────────────────────────────────── */
/*
 * 「デコって、おねだり、つっつく。」
 * カードは PC 3 列 / SP 縦積み。タグ (付箋) と丸い絵は支給素材で、
 * タグはカードの左上にはみ出して貼る。
 */
.lpHow {
    position: relative;
    background: #DBF0F5;
    /* 下の余白はカーブのぶん。芽の足元がカーブの頂点に来る */
    padding: 40px 0 25px;
}

/*
 * 下のふちは「茶色が上にふくらむ」形 (デザイン)。
 * イチオシ・イベント側は overflow: hidden (土の粒と野菜のはみ出しを切る)
 * ので、手前のこちらに描く。
 */
.lpHow::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 28px;
    background: var(--lp-soil);
    -webkit-mask: var(--lp-dome) no-repeat bottom / 100% 100%;
    mask: var(--lp-dome) no-repeat bottom / 100% 100%;
}

/* 上のふちを波にして ABOUT の海とつなぐ */
.lpHow::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -17px;
    height: 18px;
    background: #DBF0F5;
    -webkit-mask: var(--lp-wave) repeat-x bottom / 162px 18px;
    mask: var(--lp-wave) repeat-x bottom / 162px 18px;
}

.lpHow .lpH2 { font-size: 28px; margin-bottom: 0; }

.lpHow .lpLead {
    margin-top: 23px;
    font-size: 15px;
    line-height: 1.45;
}

/* ── カード ───────────────────────────────────────────────── */
.lpCards {
    display: grid;
    /* SP は 1 列 (画面いっぱい)。付箋がすき間に垂れ下がる (デザインどおり) */
    grid-template-columns: 1fr;
    gap: 25px 24px;
    margin-top: 56px;
    justify-content: center;
}

/* カードは画面いっぱい (左右 24px) */
.lpHow .lpInner { padding: 0 24px; }

.lpCard {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 14px 12px 16px;
    text-align: center;
}

/* 付箋。カードの左上にはみ出して貼る (デザイン実測) */
.lpCard__tag {
    position: absolute;
    left: 4px;
    top: -19px;
    width: auto;
    max-width: none;
}

/* 絵の下に水色の丸を敷く (支給素材は絵だけで、丸が入っていない) */
.lpCard__shot {
    width: 160px;
    margin: 0 auto;
    border-radius: 50%;
    background: #8ED1E2;
}

.lpCard__title {
    margin-top: 27px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.lpCard__title em { font-style: normal; color: var(--lp-orange); }

.lpCard__text {
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.62;
}

/* 手順の絵 (支給素材)。デザイン実測: 80px 角、番号の下 13px、見出しまで 19px */
.lpStepIco { display: block; margin: 13px auto 0; width: 80px; }
.lpStart .lpCard__title { margin-top: 19px; }

/* ── イチオシ・イベント ───────────────────────────────────── */
/*
 * 上のふちはゆるい山なり。土の粒・リボン・野菜は支給素材。
 * 位置と大きさはデザインの実測値 (PC 1440 / SP 360 幅)。
 */
.lpEvent {
    position: relative;
    background: var(--lp-soil);
    padding: 24px 0 40px;
    margin-top: -1px;
    overflow: hidden;
}



/* 土の粒。中央は空けてあるので文字にかぶらない */
.lpEvent__soil {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    max-width: 712px;
    transform: translateX(-50%);
}

.lpEvent > .lpInner { position: relative; z-index: 1; padding: 0 24px; }

.lpEvent__ribbon { width: 203px; margin: 0 auto; }

.lpEvent__pre {
    margin-top: 9px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.lpEvent .lpH2 {
    margin-top: 4px;
    font-size: 29px;
    line-height: 1.45;
}

/* SP は左右の余白より少しはみ出す (デザイン: 画面幅 +10px) */
.lpEvent__veg {
    width: 370px;
    max-width: none;
    margin: 48px 0 0 50%;
    transform: translateX(-50%);
}

.lpEvent .lpLead {
    /* SP はデザインの折り返しに合わせて、左右の余白より少し広げる */
    margin: 41px -10px 0;
    font-size: 16px;
    line-height: 1.9;
}

.lpEvent .lpNote { margin-top: 28px; }

/* 番号バッジはカードの中 (デザイン: 上から 24px) */
.lpCards--steps { margin-top: 20px; }

.lpCard--step { padding: 3px 12px 22px; }

/* 番号は絵。丸が 38px になる大きさで置く (デザイン実測) */
.lpNum { display: block; width: 70px; height: auto; margin: 0 auto; }

.lpCard__title--step { margin-top: 17px; color: var(--lp-brown); }
.lpCard--step .lpCard__text { margin-top: 17px; font-size: 14px; }

/* ── DECORATION ───────────────────────────────────────────── */
.lpDeco {
    position: relative;
    background: var(--lp-rose);
    /* 帯の絵とポラロイドが左右にはみ出すので、ここで切り落とす */
    overflow: hidden;
    padding: 60px 0 0;
}

/*
 * 上のふちは「茶色が下にふくらむ」形 (デザイン)。
 * ピンクを上に出すのではなく、ピンクの上に茶色を重ねて削る。
 */
.lpDeco::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 27px;
    background: var(--lp-soil);
    -webkit-mask: var(--lp-dome-down) no-repeat top / 100% 100%;
    mask: var(--lp-dome-down) no-repeat top / 100% 100%;
}

.lpDeco__pre {
    text-align: center;
    color: var(--lp-orange);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.lpDeco .lpH2 { margin-top: 5px; font-size: 28px; line-height: 1.45; margin-bottom: 0; }

.lpDeco .lpLead {
    margin-top: 25px;
    /* デザインは 360px 幅で 1 行 298px。狭い端末で 3 行に折れないよう、
       ぎりぎりまで縮める (PC は 14px のまま) */
    font-size: clamp(13px, 4.05vw, 14px);
    line-height: 1.5;
    letter-spacing: .1em;
    margin-inline: -6px;
}

/*
 * 写真とカードは重ねる。SP は縦に積んで、写真だけ画面から
 * 少しはみ出す (デザイン: 360 幅に対して 381px)。
 */
.lpDeco__row {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lpDeco__photo {
    width: 398px;
    max-width: 106%;
    /* 重なりを作るので、カードより手前 */
    position: relative;
    z-index: 1;
}

.lpStat {
    width: 296px;
    max-width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 26px 16px 16px;
    text-align: center;
    /* 写真の下端に少しもぐり込ませる */
    margin-top: -7px;
}

.lpStat__label { font-size: 23px; font-weight: 700; line-height: 1.4; }

.lpStat__value {
    margin-top: 1px;
    font-size: 40px;
    font-weight: 700;
    color: #FF426F;
    line-height: 1.2;
}

.lpStat__value small { font-size: 16px; color: var(--lp-brown); }
.lpStat__unit { font-size: 16px; font-weight: 700; }

/*
 * デコパーツの帯。中央ぞろえで、画面に入りきらないぶんは切り落とす
 * (デザインも PC と SP で見えている個数が違う)。
 * 絵は支給された切り抜きをそのままの大きさで置く。四辺の余白ぶん
 * 高さが揃わないが、それがデザインのでこぼこした並びになる。
 */
.lpDecoStrip {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 13px;
    /* カードの下ふちに少しかぶるところから並べる (デザイン) */
    margin-top: -40px;
    /* 下のギザギザに絵が食い込まないよう余白を残す */
    padding-bottom: 24px;
}

.lpDecoStrip li { position: relative; flex: 0 0 auto; }

/*
 * すき間のキラキラ。デザインは大きさも高さもばらばらなので、
 * 4 個ごとに 4 種類を繰り返して散らす。
 * 絵はどれも下ぞろえなので、bottom がそのまま「下ふちからの高さ」になる。
 */
.lpDecoStrip li::after {
    content: "";
    position: absolute;
    background: #fff;
    -webkit-mask: var(--lp-sparkle) no-repeat center / contain;
    mask: var(--lp-sparkle) no-repeat center / contain;
}

.lpDecoStrip li:nth-child(4n+1)::after { width: 14px; height: 14px; left: -13.5px; bottom: 78px; }
.lpDecoStrip li:nth-child(4n+2)::after { width: 10px; height: 10px; left: -11.5px; bottom: 20px; }
.lpDecoStrip li:nth-child(4n+3)::after { width: 8px;  height: 8px;  right: -10.5px; bottom: 60px; }
.lpDecoStrip li:nth-child(4n)::after   { width: 12px; height: 12px; left: -12.5px; bottom: 34px; }

/* ── EASY START ───────────────────────────────────────────── */
.lpStart {
    position: relative;
    background: #FF8B32;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .10) 0 14px,
        rgba(255, 255, 255, 0) 14px 28px
    );
    padding: 42px 0 44px;
}

/* 上のふちをギザギザにする (オレンジの山がピンクに食い込む) */
.lpStart::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -14px;
    height: 15px;
    background: #FF8B32;
    -webkit-mask: var(--lp-zig) repeat-x bottom / 33px 15px;
    mask: var(--lp-zig) repeat-x bottom / 33px 15px;
}

.lpStart .lpBadge__text { background: var(--lp-cream); color: var(--lp-orange); }

/*
 * 下のふちは空が山なりに食い込む (SP のデザイン。PC は平ら)。
 * 次のセクション側に描くと overflow: hidden で切られるので、
 * オレンジ側の下ふちに空の色で描く (HOW→EVENT と同じ作り)。
 */
.lpStart::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 25px;
    background: var(--lp-sky);
    -webkit-mask: var(--lp-dome) no-repeat bottom / 100% 100%;
    mask: var(--lp-dome) no-repeat bottom / 100% 100%;
}

/* ── 最後のひと押し ───────────────────────────────────────── */
/*
 * ヒーローと同じ組み方。空はベタ塗りで、雲・丘・海・カメを % で重ねる。
 * 1 枚絵を背景に敷くと、PC に合わせれば SP でカメが小さくなり、
 * SP に合わせれば PC で絵が伸びる (デザインは PC と SP で並びが違う)。
 */
.lpFinal {
    position: relative;
    background: var(--lp-sky);
    padding-top: 31px;
    overflow: hidden;
}

.lpFinal__inner {
    position: relative;
    z-index: 2;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 22px;
}

/* 見出しと本文は PC と SP で同じ大きさ (デザイン実測) */
.lpFinal .lpH2 { font-size: 28px; line-height: 1.46; margin-bottom: 0; }
.lpFinal .lpLead {
    margin-top: 18px;
    /* デザインは 360px 幅で 1 行 307px。狭い端末で 3 行に折れないよう、
       左右の余白より少し広げて、ぎりぎりまで縮める */
    margin-inline: -8px;
    font-size: clamp(14px, 4.16vw, 15px);
    line-height: 1.47;
}

.lpFinal__stage {
    position: relative;
    aspect-ratio: 360 / 373;
}

.lpFinal__stage > * { position: absolute; margin: 0; }
.lpFinal__stage img { height: auto; }

/* 水平線のあたりだけ空を明るくする (デザイン: カメの後ろがぼんやり光る) */
.lpFinal__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(48% 33% at 50% 26.5%,
        rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 100%);
}

/* 丘 (街と東京タワー入り)。タワーの位置と高さがデザインに合う大きさ */
/* 街の絵は左端で切れているので、画面のふちにぴたりと合わせる
   (少しでも内側に置くと、切れた建物が宙に浮いて見える) */
.lpFinal__hill { left: 0; top: 6.7%; width: 40.4%; z-index: 1; }

/* 海。上のふちだけ絵で、その下は同じ色のベタ塗り (ヒーローと同じ) */
.lpFinal__sea {
    left: 0; right: 0;
    top: 26.5%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.lpFinal__sea img { width: 100%; }
.lpFinal__seaBody { flex: 1; background: var(--lp-sea); margin-top: -1px; }

.lpFinal__kame { left: 13%; top: 5.6%; width: 70%; z-index: 3; }

.lpFinal__cloud { z-index: 1; }
.lpFinal__cloud--1 { left: 78.3%; top: 4.3%;  width: 15.3%; }
.lpFinal__cloud--2 { left: -1.7%; top: 8.3%;  width: 12.8%; }
.lpFinal__cloud--3 { left: 91.1%; top: 23.9%; width: 8.9%; }
/* 4 つ目は PC だけ (デザイン: SP は 3 つ) */
img.lpFinal__cloud--4 { display: none; }

/* ボタンは海の上。下から測って置く (文字が折り返しても位置が動かない) */
.lpFinal__cta { left: 0; right: 0; bottom: 11.8%; z-index: 4; padding: 0 13px; }

/* 海の上のボタンは白地に緑 (デザイン)。ヒーローは逆で緑地に白 */
.lpFinal__cta .lpCta__lead { color: #fff; }
.lpFinal__cta a.lpCta { background: #fff; color: var(--lp-green); }
.lpFinal__cta .lpCta__arrow { background: var(--lp-green); }
/* 矢印の絵は緑なので白く塗りつぶす */
.lpFinal__cta .lpCta__arrow img { filter: brightness(0) invert(1); }

/* ── フッター ─────────────────────────────────────────────── */
.lpFoot {
    position: relative;
    background: var(--lp-yellow);
    padding: 36px 22px 0;
    text-align: center;
}

.lpFoot::before {
    /*
     * 上のふちを波にして海とつなぐ。
     *
     * z-index が要る。前のセクションの海 (.lpFinal__sea) が z-index: 2 を
     * 持っていて、DOM で後ろにあるだけでは波がその下に隠れてしまう
     * (親に z-index が無いので、同じ重なりの土俵で数字だけで決まる)。
     */
    content: "";
    position: absolute;
    left: 0; right: 0; top: -17px;
    z-index: 5;
    height: 18px;
    background: var(--lp-yellow);
    -webkit-mask: var(--lp-wave) repeat-x bottom / 162px 18px;
    mask: var(--lp-wave) repeat-x bottom / 162px 18px;
}

.lpFoot__logo { width: 170px; margin: 0 auto; }

.lpFoot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 31px;
    /* 行の間は「すき間 + 高さ 0 の項目 + すき間」になるので半分ずつ */
    gap: 5px 28px;
    font-size: 13px;
    font-weight: 700;
}

/* 3 つ目の後ろで必ず折り返すための空の項目 */
.lpFoot__break { flex-basis: 100%; height: 0; }

/* 若葉。足元が土に少し埋まるところまで下げる (SP は土が山なりに
   ふくらむぶん、その頂点に立たせる) */
/*
 * 若葉。茎の足元は土にもぐらせる (デザイン)。
 * 手前に出す (z-index) と茎が土の上に浮いて見えるので、
 * 土の帯より後ろに置いたままにする。
 */
.lpFoot__sprout {
    display: flex;
    justify-content: center;
    margin-top: 19px;
    /* SP は土が 27px ふくらむ。その頂点より少し下まで下げる */
    margin-bottom: 20px;
}

.lpFoot__sprout .lpSprout { width: 34px; height: auto; }

/*
 * 一番下の土の帯。粒は SVG を横に繰り返して描く
 * (絵にすると幅の合わない端末で切れる)。
 */
.lpFoot__copy {
    position: relative;
    margin: 0 -22px;
    padding: 24px 6px 13px;
    background: var(--lp-grain) repeat-x center top / 720px 61px, var(--lp-soil);
    color: #fff;
    font-size: 13px;
}

/* SP は土が上にふくらむ (デザイン実測: 真ん中が 27px 高い) */
.lpFoot__copy::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -27px;
    height: 27px;
    background: var(--lp-soil);
    -webkit-mask: var(--lp-dome) no-repeat bottom / 100% 100%;
    mask: var(--lp-dome) no-repeat bottom / 100% 100%;
}

/* ── PC ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
    body.lp { font-size: 16px; }

    /* バーの高さ 57px = デザインの空の始まり。ここがずれると
       ヒーローの中身 (% で置いている) が丸ごと上下にずれる */
    .lpBar { padding: 11px 22px 23px; }
    .lpBar__inner { justify-content: center; align-items: center; }
    .lpBar__text { font-size: 15px; }

    /* PC も同じ箱。デザイン実測: 画面の上から 45px */
    .lpMenuBtn { top: -24px; right: 0; }
    .lpBrPc { display: inline; }
    .lpBrSp { display: none; }

    .lpHero { padding-bottom: 30px; }

    /* PC はデザイン 1440x709 の座標をそのまま % にしたもの */
    .lpHero__stage { aspect-ratio: 1440 / 709; background: var(--lp-sky-pc); }

    /* PC の海の下のふちはまっすぐ (デザイン実測: 1440px 幅で全列 896px) */
    .lpHero__stage::after { display: none; }

    .lpHero__sea   { top: 47.25%; }
    .lpHero__hill  { left: 0;      top: 19.75%; width: 29.72%; }
    .lpHero__kame  { left: 36.53%; top: 25.25%; width: 31.81%; }
    .lpHero__sun   { left: 64.79%; top: 9.17%;  width: 6.18%; }

    .lpHero__cloud--1 { left: 19.1%; top: 37.1%; width: 3.8%; }
    .lpHero__cloud--2 { left: 70.8%; top: 27.9%; width: 5.9%; }
    img.lpHero__cloud--3 { display: block; left: 86.8%; top: 44.1%; width: 4.9%; }

    .lpHero__copy   { left: 26.53%; top: 6.91%; width: 21.39%; }
    .lpHero__bubble { left: 47.99%; top: 4.80%; width: 8.33%; }
    .lpHero__logo   { left: 34.51%; top: 72.07%; width: 30.97%; }

    /* 10連ガチャチケットプレゼント。PC は海の右手 (ステージの中)、
       SP 用の横長版は出さない */
    .lpHeroGift--sp { display: none; }
    .lpHeroGift--pc { display: block; left: 66.25%; top: 21.4%; width: 17.8%; z-index: 5; }

    .lpHero__cta { padding: 79px 22px 0; }
    .lpHero__cta .lpCta__lead { margin-bottom: 11px; }
    .lpCta__lead { font-size: 18px; }

    /* PC のボタン (デザイン: 493x69) */
    a.lpCta {
        width: 493px;
        min-height: 69px;
        padding: 8px 110px;
        font-size: 30px;
    }

    /* PC はカモメンが中央よりわずかに上に立つ (デザイン実測) */
    .lpCta__kamomen {
        left: 2px;
        width: 97px;
        transform: translate(0, calc(-50% - 5px));
    }

    .lpCta__arrow { width: 48px; height: 48px; right: 7px; }

    /*
     * メニューの中のボタンは PC の大きさに引きずられない。
     * 493px のままだとドロワー (380px) からはみ出す。
     */
    a.lpCta--plain {
        width: 100%;
        min-height: 60px;
        padding: 8px 78px 8px 26px;
        font-size: 17px;
    }

    .lpCta--plain .lpCta__arrow { width: 40px; height: 40px; right: 10px; }

    /* 画面の下に浮かせるボタンはデザインに無い (SP だけ) */
    .lpSticky { display: none; }

    .lpAbout {
        padding-top: 34px;
        /* PC は左右の端まで届かないので放射状 */
        background:
            radial-gradient(50% 100% at 50% 100%,
                #F8D67F 0%, #FBE5AF 70%, rgba(255, 255, 255, 0) 100%)
                no-repeat bottom center / 100% calc(22.5vw + 60px),
            #fff;
    }

    .lpAbout .lpLead {
        margin-top: 23px;
        font-size: 16px;
        line-height: 2;
    }

    .lpAbout .lpNote { margin-top: 14px; }

    .lpAbout__stage { height: 22.5vw; margin-top: 3px; }
    /* PC は端まで届かない楕円 (デザイン) */
    .lpAbout__hill  { top: 9.3vw; bottom: auto; width: 83.33%; aspect-ratio: 1200 / 640; border-radius: 50%; }
    .lpAbout__kame  { left: 39.65%; top: 3.05vw; width: 21.3%; }

    /* デザイン実測の 5 つ */
    .lpAbout__cloud--1 { left: 15.8%; top: 11vw;   width: 3.54%; }
    .lpAbout__cloud--2 { left: 27.1%; top: 3.68vw; width: 6.67%; }
    .lpAbout__cloud--5 { left: 82.2%; top: 11.6vw; width: 2.64%; }

    img.lpAbout__cloud--3,
    img.lpAbout__cloud--4,
    img.lpAbout__cloud--5 { display: block; }

    .lpAbout__cloud--3 { left: 63.5%; top: 6.1vw; width: 3.2%; }
    .lpAbout__cloud--4 { left: 73.3%; top: 4.4vw; width: 4.5%; }

    .lpH2 { font-size: 34px; }
    .lpLead { font-size: 16px; }
    .lpLead--sm { font-size: 15px; }
    .lpNote { font-size: 12px; }

    /* デザイン実測: バッジまで 66px、カード 300px を 24px 間隔で 3 列 */
    .lpHow { padding: 66px 0 38px; }
    .lpCards--3 { grid-template-columns: repeat(3, 300px); }

    /* デザイン実測: 山なりの立ち上がり 38px、カード 317px を 17px 間隔で 3 列 */
    .lpEvent { padding: 35px 0 44px; }
    /* デザイン実測: 上は 38px、下は 46px ふくらむ */
    .lpHow::after { height: 38px; }
    .lpDeco::before { height: 46px; }

    /* 波は PC のほうが少し大きい (デザイン実測: バー 周期 44 / ABOUT 周期 66) */
    .lpBar::after {
        /* PC の空は SP と色が違う。SP の色のままだと波の下に筋が出る */
        background: var(--lp-sky-pc);
        height: 14px;
        -webkit-mask: var(--lp-wave) repeat-x bottom / 132px 14px;
        mask: var(--lp-wave) repeat-x bottom / 132px 14px;
    }
    .lpHow::before {
        top: -17px;
        -webkit-mask: var(--lp-wave) repeat-x bottom / 198px 18px;
        mask: var(--lp-wave) repeat-x bottom / 198px 18px;
    }

    /* PC は EASY START の下が平ら (デザイン) */
    .lpStart::after { display: none; }
    .lpEvent .lpCards--3 { grid-template-columns: repeat(3, 317px); gap: 17px; }
    .lpEvent__veg { width: 465px; }
    .lpEvent .lpLead { margin-left: 0; margin-right: 0; }

    /* デザイン実測: ふちから若葉まで 100px、写真 398x282 とカード 296x154 を
       39px 重ねて中央に置く (2 つで 655px) */
    .lpDeco { padding-top: 100px; }
    .lpDeco__row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 23px;
    }
    .lpDeco__photo { max-width: none; }
    .lpStat { margin: 0 0 0 -39px; }
    .lpDecoStrip { margin-top: -2px; padding-bottom: 25px; }

    .lpStart { padding: 60px 0 70px; }

    /* デザイン実測: 空のはじまりから見出しまで 59px、絵は 1440x459 */
    .lpFinal { padding-top: 50px; }
    .lpFinal__stage { margin-top: 2px; aspect-ratio: 1440 / 459; }
    .lpFinal__stage::before { background: radial-gradient(48% 33% at 50% 29.4%,
        rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 100%); }
    .lpFinal__hill { left: 0;     top: 0;    width: 22.2%; }
    .lpFinal__sea  { top: 29.4%; }
    .lpFinal__kame { left: 38.1%; top: 4.8%; width: 22.85%; }

    .lpFinal__cloud--1 { left: 62.1%; top: 15%;   width: 3.9%; }
    .lpFinal__cloud--2 { left: 32.2%; top: 18.7%; width: 2.6%; }
    .lpFinal__cloud--3 { left: 68.75%; top: 24.4%; width: 2.4%; }
    img.lpFinal__cloud--4 { display: block; left: 90.8%; top: 28.1%; width: 2.4%; }

    /* PC は土のふちがまっすぐ (デザイン)。若葉の足元はそこに埋める */
    .lpFoot__sprout { margin-bottom: -4px; }
    .lpFoot__copy::before { display: none; }
}

/* 動きを減らす設定の端末では出し入れのアニメを止める */
@media (prefers-reduced-motion: reduce) {
    .lpDrawer, .lpDrawer__backdrop, .lpDrawer__close,
    .lpDrawerWrap.is-closing .lpDrawer,
    .lpDrawerWrap.is-closing .lpDrawer__backdrop { animation: none; }
    .lpDrawer__close { transition: none; }
    .lpCta { transition: none; }
}