@charset "UTF-8";

/**
 * 日南市フォトキャンペーン「あなたの好きな日南を撮ろう」LP
 *
 * 2026-09-18: 0917-5 版の完成カンプ（PC 幅 1920・スマホ幅 390）を PDF どおりに当てた
 * （.plans/20260918-1715-apply-final-design.md のユーザー決定）。
 *
 * 【座標の考え方】
 * カンプの寸法を「デザイン上の 1px」＝ --u で書き、画面幅に合わせて全体を比例で縮める。
 *   スマホ（992px 未満）: --u = 画面幅 / 390（上限 1.25px）。390px で カンプと同寸
 *   PC（992px 以上）    : --u = 画面幅 / 1300（上限 1px）。1300px 以上で カンプと同寸
 * PC は カンプの中央 1300px（x 310〜1610）に中身が収まるため、その範囲を「舞台」（.l-stage）とし、
 * 散らし配置の座標は舞台の左上からの値（カンプの x − 310）で持つ。スマホは x をそのまま使う。
 * 各要素の位置は --x / --y / --w（デザイン px）で与え、.c-deco が絶対配置に変換する。
 *
 * 【絶対配置の範囲】
 * 文言が固定の区画（ファーストビュー〜募集期間）は、カンプの散らし配置を再現するため
 * 区画の高さを固定して絶対配置で組む。原稿が差し替わる募集要項・注意事項と、
 * 件数が変わる応募写真の一覧は通常の流れで組む。
 *
 * レイヤの外に置いているものが 2 つある。
 *   1. :root のトークン定義
 *   2. body の基本スタイル
 * WordPress のグローバルスタイル（global-styles-inline-css）は Cascade Layers の外に出力されるため、
 * 名前付きレイヤの中に body 等の要素セレクタを書くと問答無用で負ける。同じ土俵に置くための措置。
 */

@layer reset, base, layout, components, utilities;

/* ===== レイヤ外: デザイントークン ===== */

:root {
    /* カンプの色（PDF の塗りから実測） */
    --color-orange: #f7931e;            /* 地 */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-note: #863800;              /* 応募方法の注意書き */
    --color-notice-red: #cc0000;        /* スタッフ指示の赤い文字（白との比 5.9:1） */
    --color-tag-marker: #f9a9cb;        /* 「#好きな日南」の下線（#f0277d を乗算 40%） */
    --color-frame-inner: #cccccc;       /* 応募写真の枠の中の灰色 */
    --color-focus: #0b57d0;
    /*
     * Smash Balloon（6.13.0）の投稿・ボタンのフォーカス枠の色。プラグインの既定は #007ca8 で、
     * テーマの他の部品と色が揃わないため、同じフォーカス色に差し替える。
     * プラグインの定義も :root（レイヤ外）にあるため、後から読まれるこちらが勝つ。
     */
    --sb-focus-ring: var(--color-focus);
    --color-pending-bg: #fff4e5;
    --color-pending-text: #7a4b00;
    --color-pending-border: #e0a75e;

    /* 写真・カードの影。カンプは黒の乗算 75% をぼかしたもの */
    --shadow-paper: rgb(0 0 0 / 0.4);

    /*
     * 募集要項・注意事項のカード（2026-10-07 スタッフの見た目の案）。
     * 見出しの帯は、閉じたときも地のオレンジの上で色が分かる薄いオレンジ（2026-10-08 ユーザーが 3 案から選択。
     * 見た目の案の画像の #fcf8f4 は、閉じると白に見えた）。
     * 見出しと開閉ボタンのオレンジは、帯の上で大きな太字の基準 3:1 を満たす濃さにする
     * （#d06400 は帯との比 3.30:1、白との比 3.82:1）
     */
    --color-terms-accent: #d06400;
    --color-terms-rule: #f5c690;        /* 点線の区切り */
    --color-terms-bar: #fdecd6;         /* 見出しの帯 */
    --color-terms-sparkle: #ffc93c;     /* 右下の黄色い飾り線 */
    --shadow-terms-card: rgb(120 60 0 / 0.18);

    --font-family-base: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;

    /*
     * デザイン上の 1px（上の【座標の考え方】）。スマホ版を既定にする。
     * 100vw ではなく 100cqw（.l-page の幅）を使う。100vw はスクロールバーの幅を含むため、
     * スクロールバーが幅を取る環境で舞台が表示幅より広くなり、右端が切れる（2026-09-18 に実測）。
     * cqw は var() を使った側の要素で解決されるため、.l-page の内側ならどこでも同じ値になる。
     */
    --u: min(100cqw / 390, 1.25px);
    --stage-w: 390;

    /* 押せる面の最小寸法。屋外・移動中の閲覧を想定し 44px を採る */
    --tap-target-min: 2.75rem;

    /*
     * 動き（下の「動き」の区画）。強さ・速さはここで調整する。
     * どれも一度きりで 2 秒以内に止まる（自動で動き続けるものは作らない。WCAG 2.2.2）。
     */
    --motion-duration: 0.8s;
    --motion-rise: 1.5rem;                                /* 下から現れる距離 */
    --motion-pop-from: 0.6;                               /* 飾りが弾んで現れるときの最初の大きさ */
    --motion-wiggle: 6deg;                                /* 人物・動物の絵が揺れる角度 */
    --motion-accordion: 0.35s;                            /* 募集要項・注意事項のカードの開閉（assets/js/terms.js も読む） */
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* 速く出て、ゆっくり止まる */
    --motion-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* 少し行き過ぎてから戻る */
}

/* ===== レイヤ外: ブレークポイント =====
 *
 * 切り替えは 992px の 1 点だけ（Bootstrap 5 の lg）。これ未満はスマホ版カンプ、以上は PC 版カンプ。
 * 768px で切り替えると PC 版が 0.59 倍まで縮み、本文が 10px 台になって読めないため。
 * Custom Properties は @media の条件に使えないため、値は各 @media に直書きする。
 */

@media (min-width: 992px) {
    :root {
        --u: min(100cqw / 1300, 1px);
        --stage-w: 1300;
    }
}

/* ===== レイヤ外: body ===== */

body {
    /*
     * 地: オレンジにコルクの質感。カンプの背景を PDF から描き出し、端を少しずつ重ねて
     * 継ぎ目をなじませた繰り返し画像（反転してつなぐと鏡写しの模様が見えるため採らない）。
     */
    background-color: var(--color-orange);
    background-image: url("../images/bg/texture.webp?v=20260918b");
    background-size: 512px 512px;
    color: var(--color-white);
    font-family: var(--font-family-base);
    line-height: 1.8;
}

/*
 * 印刷では背景が出ない設定が既定のブラウザが多い。白い文字が白い紙に消えるため、
 * 本文を黒へ倒す。散らした装飾は紙面を無駄にするので出さない。
 */
@media print {
    body {
        background: #ffffff;
        color: #000000;
    }

    .p-about__lead,
    .p-prize__text,
    .p-terms__body {
        color: #000000;
    }

    /*
     * 画面では募集要項・注意事項を閉じているが、紙には全文を出す。
     * hidden="until-found" に対応したブラウザは content-visibility で、ほかは display で隠すため両方を戻す
     */
    .p-terms__body[hidden] {
        display: block;
        content-visibility: visible;
    }

    .p-terms__icon {
        display: none;
    }

    .c-skip-link {
        display: none;
    }

    /* スクロールで現す前の要素も、印刷では必ず見せる（下の「動き」の区画） */
    [data-reveal] {
        opacity: 1;
        translate: none;
        scale: none;
    }
}

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

    body,
    h1,
    h2,
    h3,
    p,
    ol,
    ul,
    dl,
    dd,
    figure {
        margin: 0;
    }

    ol[class],
    ul[class] {
        padding: 0;
        list-style: none;
    }

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

    a {
        color: inherit;
    }

    /* 動きを減らす設定を尊重する */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer base {
    /* キーボード操作の現在位置を必ず見せる。デザイン指定が無くても外さない */
    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
    }

    /*
     * スキップリンクの飛び先（tabindex="-1" を付けた領域）だけはフォーカス枠を出さない。
     * main を囲む枠はページ全体を縁取ることになり、「ページ全部が選択されている」と読める。
     * tabindex="-1" の要素は操作対象ではないため WCAG 2.4.7 の対象外。
     */
    [tabindex="-1"]:focus-visible {
        outline: none;
    }
}

@layer layout {
    .l-page {
        /* --u の基準幅（100cqw）になる */
        container-type: inline-size;
        min-height: 100svh;
        /* 散らした装飾が区画の外へはみ出しても、ページが横にスクロールしないようにする */
        overflow-x: clip;
    }

    /* カンプの舞台（上の【座標の考え方】）。散らし配置の基準になる */
    .l-stage {
        position: relative;
        width: calc(var(--stage-w) * var(--u));
        margin-inline: auto;
    }

    .l-footer {
        padding-block: calc(112 * var(--u)) calc(62 * var(--u));
        text-align: center;
    }

    /* フォーカス枠をロゴの大きさに合わせる（a が行の幅いっぱいに広がらないように） */
    .l-footer__logo-link {
        display: inline-block;
        vertical-align: top;
    }

    .l-footer__logo-image {
        width: calc(163.6 * var(--u));
        margin-inline: auto;
    }

    .l-footer__privacy {
        margin-top: calc(24 * var(--u));
        font-size: max(0.75rem, calc(14 * var(--u)));
    }

    @media (min-width: 992px) {
        .l-footer {
            padding-block: calc(206 * var(--u)) calc(128 * var(--u));
        }

        .l-footer__logo-image {
            width: calc(239 * var(--u));
        }
    }
}

@layer components {
    /* 本文への到達を 1 タブで済ませる。フォーカスされるまでは画面外へ逃がす */
    .c-skip-link {
        position: absolute;
        top: 0;
        left: 1rem;
        z-index: 100;
        padding: 0.5rem 1rem;
        background-color: #423e83;
        color: #ffffff;
        transform: translateY(-150%);
    }

    /*
     * :focus-visible ではなく :focus で出す。スキップリンクは「見えないのに
     * フォーカスが載っている」状態を作ってはいけない要素で、ブラウザの可視判定に委ねない。
     */
    .c-skip-link:focus {
        transform: translateY(0);
    }

    /* 支給待ち・設定漏れの表示（編集権限のある人にだけ出る。一般の閲覧者には出ない） */
    .c-pending {
        margin: 1rem auto;
        max-width: 40rem;
        padding: 0.75rem 1rem;
        background-color: var(--color-pending-bg);
        border-inline-start: 4px solid var(--color-pending-border);
        color: var(--color-pending-text);
        font-size: 0.875rem;
    }

    /*
     * カンプの座標に置く要素。--x / --y / --w はデザイン px。
     * 高さは画像の縦横比に任せる（width / height 属性で比率が決まる）。
     */
    .c-deco {
        position: absolute;
        left: calc(var(--x, 0) * var(--u));
        top: calc(var(--y, 0) * var(--u));
        width: calc(var(--w, 0) * var(--u));
        margin: 0;
    }

    /* picture はスマホ版と PC 版で画像を出し分ける素材（nichinan_design_image() の pc 引数） */
    .c-deco > img,
    .c-deco > picture > img {
        width: 100%;
    }
}

/* ===== 区画ごとの配置（カンプの実測値） ===== */

@layer components {
    /* ---- ファーストビュー ---- */

    .p-kv {
        position: relative;
        height: calc(554 * var(--u));
        /*
         * 写真の下端がオレンジ地へ V 字でつながる。V の外側（左右の下）を切り落とし、
         * そこから下の地（body の背景）を見せる。辺は 439 / 中央は 515（デザイン px）。
         */
        clip-path: polygon(0 0, 100% 0, 100% calc(439 * var(--u)), 50% calc(515 * var(--u)), 0 calc(439 * var(--u)));
    }

    .p-kv__photo,
    .p-kv__photo-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .p-kv__photo-image {
        object-fit: cover;
    }

    .p-kv__stage {
        height: 100%;
    }

    /* 写真の上で文字を読みやすくする茶色のぼかし。カンプは乗算で重ねている */
    .p-kv__glow {
        mix-blend-mode: multiply;
    }

    /*
     * タイトルのぼかしは、スマホ版ではスマホ版カンプの画像をカンプの位置に置く
     * （PC 版の画像を比率で縮めて置くと、1px ほど下にずれた）。
     * 募集期間はぼかしと白い文字を描き込んだ 1 枚の画像で、枠はぼかしの範囲。
     * 位置はスマホ版カンプ（y 226.37）より 18 下げている（iPhone で約 3mm）。背景の夕日と重なって
     * 見づらいという、クライアントの指摘による（2026-10-09・スタッフ経由）。これより下げると「月」が
     * 写真の右の人物の頭に重なる（頭の上端は y 265.5）。PC はカンプの位置のまま。
     * 期間の文字表示（--text）は画像の枠ではなく文字の位置に置くため、--y を別に持つ（同じだけ下げる）。
     */
    .p-kv__glow--title { --x: 28.19; --y: 66.37; --w: 334; }
    .p-kv__title { --x: 35.2; --y: 74.1; --w: 319.6; }
    .p-kv__period { --x: 28.19; --y: 244.37; --w: 334; }
    .p-kv__glow--catch { --x: 84; --y: 349; --w: 223; }
    .p-kv__catch { --x: 93.3; --y: 358.7; --w: 203.4; }

    /* 期間を変更して画像の日付と合わなくなったときの文字表示（通常は出ない） */
    .p-kv__period--text {
        --x: 0;
        --y: 251.1;
        --w: 390;
        padding-inline: calc(16 * var(--u));
        font-size: calc(14 * var(--u));
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        /* 長いときは 2 行に均等に分ける（日付の途中で 1 文字だけ落ちるのを防ぐ） */
        text-wrap: balance;
        /* 写真の明るい部分でも読めるよう縁取る（画像版はぼかしが同じ役を担っている） */
        text-shadow: 0 0 calc(4 * var(--u)) rgb(80 40 0 / 0.9), 0 0 calc(10 * var(--u)) rgb(80 40 0 / 0.7);
    }

    /* 受付終了後だけ出る一文。キャッチの下へ置く */
    .p-kv__status {
        position: absolute;
        top: calc(420 * var(--u));
        left: 0;
        width: 100%;
        font-size: max(0.875rem, calc(14 * var(--u)));
        font-weight: 700;
        text-align: center;
    }

    @media (min-width: 992px) {
        .p-kv {
            height: calc(1294 * var(--u));
            /* 中央の点（1398）は写真の下端より下にある。写真の外は次の区画の見出しが覆う */
            clip-path: polygon(0 0, 100% 0, 100% calc(1027 * var(--u)), 50% calc(1398 * var(--u)), 0 calc(1027 * var(--u)));
        }

        .p-kv__glow--title { --x: 159; --y: 124; --w: 984; }
        .p-kv__title { --x: 180; --y: 145; --w: 941; }
        .p-kv__period { --x: 335; --y: 596; --w: 648; }
        .p-kv__glow--catch { --x: 424; --y: 862; --w: 453; }
        .p-kv__catch { --x: 443; --y: 881; --w: 413; }

        .p-kv__period--text {
            --x: 0;
            --y: 609;
            --w: 1300;
            font-size: calc(30 * var(--u));
        }

        .p-kv__status {
            top: calc(1010 * var(--u));
            font-size: calc(24 * var(--u));
        }
    }

    /* ---- 日南の写真を大募集!! ／ 例えば… ---- */

    .p-about {
        /* 見出しがファーストビューの写真へ食い込むため、写真より手前に出す */
        z-index: 1;
        height: calc(1026 * var(--u));
    }

    .p-about__heading { --x: 69.5; --y: -105.9; --w: 285.4; z-index: 1; }
    .p-about__burst { --x: 35.4; --y: 54.7; --w: 38.8; z-index: 2; }
    /* お菓子と湯気はカンプより 10 右（本文を 16 にして 1 行目が長くなったため。2026-10-08） */
    .p-about__steam { --x: 328; --y: 80; --w: 44.2; }
    .p-about__obiten { --x: 306; --y: 94; --w: 62; }
    .p-about__girl { --x: 45; --y: 136; --w: 37; }
    .p-about__statues { --x: 296; --y: 206; --w: 80; }
    .p-about__meow { --x: 26.8; --y: 435; --w: 41.9; }
    .p-about__cat { --x: 65; --y: 437; --w: 36; }
    .p-about__flower { --x: 288; --y: 432; --w: 49; }
    .p-about__sparkle-plus { --x: 334.3; --y: 433.7; --w: 6.7; }
    .p-about__sparkle-star { --x: 280.8; --y: 470.4; --w: 9.7; }
    .p-about__example-label { --x: 125.5; --y: 513.5; --w: 139; }
    .p-about__example--scenery { --x: 33; --y: 623; --w: 176; }
    .p-about__example--cat { --x: 216; --y: 584; --w: 132; }
    .p-about__example--staff { --x: 228; --y: 727; --w: 135; }

    /*
     * スマホの本文は 16（カンプは 11。2026-10-07 スタッフ指示「16pt くらい」）。行送りはカンプのまま。
     * 字間はカンプより詰めて、最も長い行（19 文字）を飾りの内側に収める
     */
    .p-about__lead {
        --y: 118;
        --w: 390;
        font-size: calc(16 * var(--u));
        line-height: calc(31 * var(--u));
        letter-spacing: 0.06em;
        text-align: center;
        white-space: nowrap;
    }

    .p-about__note {
        --y: 886;
        --w: 390;
        font-size: calc(16 * var(--u));
        line-height: calc(31.5 * var(--u));
        letter-spacing: 0.1em;
        text-align: center;
        white-space: nowrap;
    }

    /* 本文中の手書き「あなたの好きな日南」（白地つき）。行の中に置く。.c-deco > img の幅指定より強くする */
    .p-about__note > .p-about__note-highlight {
        display: inline-block;
        width: calc(133.5 * var(--u));
        margin-inline-end: calc(2 * var(--u));
        vertical-align: middle;
    }

    @media (min-width: 992px) {
        .p-about {
            height: calc(1706 * var(--u));
        }

        .p-about__heading { --x: 332; --y: -224; --w: 725; }
        .p-about__burst { --x: 245; --y: 182; --w: 102; }
        .p-about__steam { --x: 943; --y: 281; --w: 116; }
        .p-about__obiten { --x: 886; --y: 314; --w: 164; }
        .p-about__girl { --x: 278; --y: 378; --w: 88; }
        .p-about__statues { --x: 902; --y: 486; --w: 216; }
        .p-about__meow { --x: 196; --y: 705; --w: 110; }
        .p-about__cat { --x: 290; --y: 706; --w: 100; }
        .p-about__flower { --x: 882; --y: 714; --w: 132; }
        .p-about__sparkle-plus { --x: 1002; --y: 721; --w: 22; }
        .p-about__sparkle-star { --x: 867; --y: 814; --w: 29; }
        .p-about__example-label { --x: 520; --y: 868; --w: 261; }
        .p-about__example--scenery { --x: 78; --y: 1030; --w: 476; }
        .p-about__example--cat { --x: 534; --y: 1006; --w: 356; }
        .p-about__example--staff { --x: 874; --y: 1070; --w: 352; }

        .p-about__lead {
            --y: 309;
            --w: 1300;
            font-size: calc(17 * var(--u));
            line-height: calc(44 * var(--u));
            letter-spacing: 0.23em;
        }

        /* PC は左揃えで、作例の右下（ネコと店員さんの写真の下）に置く */
        .p-about__note {
            --x: 608;
            --y: 1439;
            --w: 680;
            font-size: calc(18 * var(--u));
            line-height: calc(47 * var(--u));
            letter-spacing: 0.3em;
            text-align: start;
        }

        .p-about__note > .p-about__note-highlight {
            width: calc(225 * var(--u));
            margin-inline-end: calc(4 * var(--u));
        }
    }

    /* ---- 入賞者には… 豪華賞品プレゼント!! ---- */

    .p-prize {
        height: calc(720 * var(--u));
    }

    .p-prize__lead { --x: 125.1; --y: 26.2; --w: 141.7; }
    .p-prize__heading { --x: 30.1; --y: 63.6; --w: 312.2; }
    .p-prize__vibration { --x: 318.8; --y: 219.7; --w: 54.5; }
    .p-prize__containers { --x: 322; --y: 227; --w: 47; }
    .p-prize__speedlines-left { --x: 17.1; --y: 235.6; --w: 56.5; }
    .p-prize__visual { --x: 78.6; --y: 258.4; --w: 231.3; }
    .p-prize__sweat { --x: 43; --y: 362.2; --w: 16; }
    .p-prize__man { --x: 18; --y: 377; --w: 51; }
    .p-prize__speedlines-right { --x: 318.3; --y: 345.9; --w: 45.4; }
    .p-prize__sparkles { --x: 172.6; --y: 610.6; --w: 82; }
    .p-prize__ema--2 { --x: 150; --y: 639; --w: 40; }
    .p-prize__ema--1 { --x: 197; --y: 609; --w: 38; }

    /* 賞品の仮置き（ポラロイド）の影。画像の形に沿わせるため drop-shadow を使う */
    .p-prize__visual > img {
        filter: drop-shadow(calc(3 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) var(--shadow-paper));
    }

    .p-prize__text {
        --y: 485;
        --w: 390;
        text-align: center;
        white-space: nowrap;
    }

    .p-prize__text-line {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .p-prize__highlight--specialty {
        width: calc(130.4 * var(--u));
    }

    .p-prize__highlight--coupon {
        width: calc(102 * var(--u));
    }

    /* 2 行目と同じ 16 にそろえる（カンプは 14.5。2026-10-07 スタッフ指示で 2 行目を 16 にしたため） */
    .p-prize__particle {
        font-size: calc(16 * var(--u));
        font-weight: 500;
        line-height: 1;
    }

    .p-prize__particle--ya {
        margin-inline: calc(4 * var(--u));
    }

    .p-prize__particle--nado {
        margin-inline-start: calc(4 * var(--u));
    }

    .p-prize__text-line--second {
        display: block;
        margin-top: calc(11 * var(--u));
        font-size: calc(16 * var(--u));
        font-weight: 500;
        line-height: calc(26 * var(--u));
        letter-spacing: 0.17em;
    }

    @media (min-width: 992px) {
        .p-prize {
            height: calc(1480 * var(--u));
        }

        .p-prize__lead { --x: 492; --y: 26; --w: 313; }
        .p-prize__heading { --x: 251; --y: 86; --w: 736; }
        .p-prize__vibration { --x: 998; --y: 435; --w: 149; }
        .p-prize__containers { --x: 994; --y: 432; --w: 156; }
        .p-prize__speedlines-left { --x: 141; --y: 473; --w: 166; }
        .p-prize__visual { --x: 317; --y: 538; --w: 666; }
        .p-prize__speedlines-right { --x: 1003; --y: 788; --w: 134; }
        .p-prize__sweat { --x: 244; --y: 831; --w: 46; }
        .p-prize__man { --x: 146; --y: 860; --w: 160; }

        .p-prize__text {
            --y: 1158;
            --w: 1300;
        }

        .p-prize__highlight--specialty {
            width: calc(328 * var(--u));
        }

        .p-prize__highlight--coupon {
            width: calc(257 * var(--u));
        }

        .p-prize__particle {
            font-size: calc(40 * var(--u));
        }

        .p-prize__particle--ya {
            margin-inline: calc(6 * var(--u));
        }

        .p-prize__particle--nado {
            margin-inline-start: calc(6 * var(--u));
        }

        .p-prize__text-line--second {
            margin-top: calc(31 * var(--u));
            font-size: calc(36 * var(--u));
            line-height: calc(50 * var(--u));
            letter-spacing: 0.12em;
        }
    }

    /*
     * ---- 賞品の公開版（ログイン中だけ .p-prize--announced が付く。2026-11-10） ----
     *
     * 非ログイン時の「Coming Soon」版（上の .p-prize の指定）は変えない。ここの指定はすべて
     * .p-prize--announced の子孫セレクタで書き、上の指定より強くしてある（同じ素材の
     * 木箱・揺れ・汗・男性も、公開版では別の位置に置くため）。
     * 公開版だけの要素の名前（__list / __item / __speedlines / __cow / __children）は、
     * 既存の指定と重ならないものにしている。
     *
     * スマホはスマホ版カンプ（幅 390 の 2 倍の書き出し）、PC は PC 版カンプ（幅 1920 を 0.904 倍した書き出し）
     * からの実測。見出しまわりはどちらも仮置き版と同じ位置。
     * スマホ版はカツオの生節の右と焼き肉のたれの左にも集中線があり、絵馬・きらめきは無い（prize.php で出し分け）。
     * ポラロイド・牛・子どもは、傾き・影・手書き文字込みの画像（drop-shadow は付けない）。
     */

    .p-prize--announced {
        height: calc(1000 * var(--u));
    }

    .p-prize--announced .p-prize__item { z-index: 2; }

    /* 揺れの線がポラロイドに掛からないよう、カンプより左へ 16・上へ 10 ずらす（2026-11-10 ユーザー指示） */
    .p-prize--announced .p-prize__vibration { --x: 19; --y: 253; --w: 54.5; }
    .p-prize--announced .p-prize__containers { --x: 22.2; --y: 260.3; --w: 47; }
    .p-prize--announced .p-prize__speedlines--beef-right { --x: 311; --y: 258.5; --w: 61.6; }
    .p-prize--announced .p-prize__item--beef { --x: 75; --y: 289.5; --w: 222.5; }
    .p-prize--announced .p-prize__cow { --x: 293.8; --y: 388.5; --w: 72.6; }
    .p-prize--announced .p-prize__speedlines--beef-left { --x: 12.5; --y: 394.5; --w: 50; }
    .p-prize--announced .p-prize__speedlines--katsuo { --x: 40; --y: 527; --w: 47.5; }
    .p-prize--announced .p-prize__item--katsuo { --x: 112.5; --y: 523.5; --w: 201.5; }
    .p-prize--announced .p-prize__speedlines--katsuo-right { --x: 330; --y: 537; --w: 42.5; }
    .p-prize--announced .p-prize__children { --x: 23; --y: 659.5; --w: 141; }
    .p-prize--announced .p-prize__sweat { --x: 313.5; --y: 688; --w: 16; }
    .p-prize--announced .p-prize__man { --x: 288.5; --y: 702.8; --w: 51; }
    .p-prize--announced .p-prize__item--tare { --x: 87.5; --y: 744.5; --w: 188.5; }
    .p-prize--announced .p-prize__speedlines--tare { --x: 287.5; --y: 795.5; --w: 62; }
    .p-prize--announced .p-prize__speedlines--tare-left { --x: 17.5; --y: 824.5; --w: 47.5; }

    @media (min-width: 992px) {
        .p-prize--announced {
            height: calc(2100 * var(--u));
        }

        .p-prize--announced .p-prize__vibration { --x: 154.5; --y: 512.7; --w: 149; }
        .p-prize--announced .p-prize__containers { --x: 150.5; --y: 509.7; --w: 156; }
        .p-prize--announced .p-prize__speedlines--beef-right { --x: 972.9; --y: 551.4; --w: 170.2; }
        .p-prize--announced .p-prize__item--beef { --x: 325.9; --y: 637.7; --w: 618.2; }
        .p-prize--announced .p-prize__cow { --x: 992.9; --y: 905.3; --w: 234.5; }
        .p-prize--announced .p-prize__speedlines--beef-left { --x: 154.5; --y: 921.9; --w: 135.2; }
        .p-prize--announced .p-prize__speedlines--katsuo { --x: 38.4; --y: 1212.8; --w: 148.3; }
        .p-prize--announced .p-prize__item--katsuo { --x: 196.5; --y: 1212.8; --w: 475.6; }
        .p-prize--announced .p-prize__item--tare { --x: 688.7; --y: 1264.8; --w: 409.2; }
        .p-prize--announced .p-prize__speedlines--tare { --x: 1109; --y: 1336.7; --w: 137.5; }
        .p-prize--announced .p-prize__children { --x: 111.4; --y: 1637.5; --w: 549.7; }
        .p-prize--announced .p-prize__sweat { --x: 895.5; --y: 1688.4; --w: 46; }
        .p-prize--announced .p-prize__man { --x: 797.5; --y: 1717.4; --w: 160; }
    }

    /* ---- 応募方法 ---- */

    /* 高さはカンプの 1500 から、注意書きを 16 にして伸びた分（約 45）を足した */
    .p-howto {
        height: calc(1545 * var(--u));
    }

    .p-howto__heading { --x: 124.3; --y: 21.4; --w: 141.5; }

    /*
     * 白いカード。傾きはカンプの実測（±1.5〜1.8 度）。
     * 静止した傾きで動きではないため prefers-reduced-motion の対象にしない。
     */
    .p-howto__card {
        --w: 234;
        height: calc(333 * var(--u));
        background-color: var(--color-white);
        box-shadow: calc(3 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)) var(--shadow-paper);
        color: var(--color-black);
        transform: rotate(var(--angle, 0deg));
    }

    .p-howto__card--1 { --x: 77.5; --y: 143.5; --angle: 1.71deg; }
    .p-howto__card--2 { --x: 78; --y: 540; }
    .p-howto__card--3 { --x: 78; --y: 949; --angle: -1.47deg; }

    /* スマホの文字はカンプの 12.5 から 16 へ（2026-10-07 スタッフ指示）。カードの幅に収めるため字間を詰める */
    .p-howto__text {
        position: absolute;
        top: calc(var(--text-y, 64) * var(--u));
        left: 0;
        width: 100%;
        font-size: calc(16 * var(--u));
        font-weight: 700;
        line-height: calc(28 * var(--u));
        letter-spacing: 0.05em;
        text-align: center;
        white-space: nowrap;
    }

    .p-howto__card--2 .p-howto__text { --text-y: 65; }
    .p-howto__card--3 .p-howto__text { --text-y: 49; }

    .p-howto__tag-line {
        font-size: calc(20 * var(--u));
    }

    /* 「#好きな日南」の下半分に敷くピンクの線。カンプは乗算の帯 */
    .p-howto__tag {
        background-image: linear-gradient(transparent 55%, var(--color-tag-marker) 55%);
    }

    .p-howto__small {
        font-size: calc(16 * var(--u));
    }

    /* カードより手前に出す装飾（数字・写真・吹き出しなど） */
    .p-howto__num,
    .p-howto__photo,
    .p-howto__star,
    .p-howto__bubble,
    .p-howto__exclaim {
        z-index: 1;
    }

    .p-howto__num--1 { --x: 190.6; --y: 102; --w: 30.6; }
    .p-howto__num--2 { --x: 170.8; --y: 503; --w: 48.3; }
    .p-howto__num--3 { --x: 165.2; --y: 905.9; --w: 51.5; }
    .p-howto__star { --x: 129.7; --y: 286.8; --w: 29; }
    .p-howto__photo--1 { --x: 103; --y: 294; --w: 175; }
    .p-howto__bubble { --x: 176.8; --y: 695.4; --w: 120.7; }
    .p-howto__photo--2 { --x: 114; --y: 728; --w: 172; }
    .p-howto__exclaim { --x: 169; --y: 1105.7; --w: 19.7; }
    .p-howto__photo--3 { --x: 109; --y: 1105; --w: 184; }

    /* スマホの文字はカンプの 10 から 16 へ（2026-10-07 スタッフ指示） */
    .p-howto__notes {
        --y: 1326;
        --w: 390;
        color: var(--color-note);
        font-size: calc(16 * var(--u));
        font-weight: 700;
        line-height: calc(26 * var(--u));
        letter-spacing: 0.02em;
        text-align: center;
        white-space: nowrap;
    }

    .p-howto__notes li + li {
        margin-top: calc(12.5 * var(--u));
    }

    @media (min-width: 992px) {
        .p-howto {
            height: calc(990 * var(--u));
        }

        .p-howto__heading { --x: 520; --y: 24; --w: 261; }

        .p-howto__card {
            --w: 358;
            height: calc(511 * var(--u));
        }

        .p-howto__card--1 { --x: 89.5; --y: 195; --angle: 1.76deg; }
        .p-howto__card--2 { --x: 471; --y: 224; }
        .p-howto__card--3 { --x: 852.5; --y: 153.5; --angle: -1.44deg; }

        .p-howto__text {
            --text-y: 91;
            font-size: calc(20 * var(--u));
            line-height: calc(42 * var(--u));
            letter-spacing: 0.12em;
        }

        .p-howto__card--2 .p-howto__text {
            --text-y: 88;
            line-height: calc(36 * var(--u));
        }

        .p-howto__card--3 .p-howto__text {
            --text-y: 77;
            line-height: calc(38 * var(--u));
        }

        .p-howto__tag-line {
            font-size: calc(32 * var(--u));
        }

        .p-howto__small {
            font-size: calc(20 * var(--u));
        }

        .p-howto__num--1 { --x: 259; --y: 129; --w: 51; }
        .p-howto__num--2 { --x: 611; --y: 165; --w: 78; }
        .p-howto__num--3 { --x: 984; --y: 86; --w: 83; }
        .p-howto__star { --x: 166; --y: 413; --w: 48; }
        .p-howto__photo--1 { --x: 122; --y: 420; --w: 276; }
        .p-howto__bubble { --x: 618; --y: 460; --w: 165; }
        .p-howto__photo--2 { --x: 522; --y: 508; --w: 272; }
        .p-howto__exclaim { --x: 990; --y: 392; --w: 34; }
        .p-howto__photo--3 { --x: 894; --y: 388; --w: 292; }

        /* PC は左揃えで 1 項目 1 行 */
        .p-howto__notes {
            --x: 315;
            --y: 794;
            --w: 900;
            font-size: calc(15 * var(--u));
            line-height: calc(30.5 * var(--u));
            letter-spacing: 0.1em;
            text-align: start;
        }

        .p-howto__notes li + li {
            margin-top: 0;
        }
    }

    /* ---- 募集期間 ---- */

    .p-period {
        height: calc(400 * var(--u));
    }

    .p-period__heading { --x: 124.3; --y: 33; --w: 141.5; }
    .p-period__dates { --x: 23.9; --y: 109.4; --w: 345.7; }
    .p-period__hurry { --x: 149; --y: 219.2; --w: 92; }

    /* 期間を変更して画像の日付と合わなくなったときの文字表示（通常は出ない） */
    .p-period__dates--text {
        --x: 0;
        --w: 390;
        padding-inline: calc(16 * var(--u));
        font-size: calc(18 * var(--u));
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        text-wrap: balance;
    }
    .p-period__moai { --x: 132; --y: 255; --w: 126; }

    @media (min-width: 992px) {
        .p-period {
            height: calc(560 * var(--u));
        }

        .p-period__sparkles { --x: 179; --y: 24; --w: 177; }
        .p-period__ema--1 { --x: 226; --y: 18; --w: 92; }
        .p-period__ema--2 { --x: 130; --y: 82; --w: 92; }
        .p-period__heading { --x: 520; --y: 45; --w: 261; }
        .p-period__dates { --x: 279; --y: 180; --w: 779; }
        .p-period__hurry { --x: 1082; --y: 269; --w: 199; }
        .p-period__moai { --x: 970; --y: 362; --w: 276; }

        .p-period__dates--text {
            --x: 0;
            --w: 1300;
            font-size: calc(44 * var(--u));
        }
    }

    /* ---- みんなの応募写真 ---- */

    .p-gallery {
        /*
         * 写真の白い枠（下を広く取るポラロイドの形）の寸法。単位はデザイン px。
         * 空の枠と写真の入った枠（どちらも .p-gallery__frame）で共有する。
         * 写真面は、枠の上端から --frame-pad-top、左右から --frame-pad-x、下端から --frame-pad-bottom だけ内側。
         */
        --frame-cols: 1;
        --frame-w: 272;
        --frame-gap-x: 26;
        --frame-gap-y: 26;
        --frame-pad-top: 9.5;
        --frame-pad-x: 8.7;
        --frame-pad-bottom: 29;
        /* 最後の枠の下端から view more までの間隔と、view more の幅（画像は 332 : 63） */
        --frame-more-gap: 69;
        --frame-more-w: 207.4;
        --frame-shadow: calc(3 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)) var(--shadow-paper);

        position: relative;
        /* スマホ版は view more の下に、白いシャツの男性と赤い星が入る */
        padding-bottom: calc(222 * var(--u));
    }

    .p-gallery__head {
        height: calc(213 * var(--u));
    }

    .p-gallery__heading { --x: 18.6; --y: 31.7; --w: 357; }

    /*
     * 区画は画面幅いっぱいなので、舞台の左端（中央寄せの余白ぶん）を足して横位置を合わせる。
     * スマホ版は区画の下端からの位置で置く（枠の数で高さが変わっても下端に付いてくる）。
     */
    .p-gallery__stars,
    .p-gallery__man {
        top: auto;
        bottom: calc(var(--bottom) * var(--u));
        left: calc((var(--x) * var(--u)) + ((100% - (var(--stage-w) * var(--u))) / 2));
    }

    .p-gallery__stars { --x: 135; --bottom: 168.6; --w: 46.9; }
    .p-gallery__man { --x: 162; --bottom: 69; --w: 81; }

    .p-gallery__frames {
        display: grid;
        grid-template-columns: repeat(var(--frame-cols), calc(var(--frame-w) * var(--u)));
        justify-content: center;
        gap: calc(var(--frame-gap-y) * var(--u)) calc(var(--frame-gap-x) * var(--u));
    }

    /* 写真の白い枠。中の灰色は写真が入る面 */
    .p-gallery__frame {
        position: relative;
        aspect-ratio: 1;
        background-color: var(--color-white);
        box-shadow: var(--frame-shadow);
    }

    .p-gallery__frame::before {
        content: "";
        position: absolute;
        inset: calc(var(--frame-pad-top) * var(--u)) calc(var(--frame-pad-x) * var(--u)) calc(var(--frame-pad-bottom) * var(--u));
        background-color: var(--color-frame-inner);
    }

    /*
     * 写真の入った枠。写真面は、空の枠の灰色の面（::before）と同じ位置に重ねる。
     * 写真は面いっぱいに広げ、はみ出た分を切り取る（カンプの写真面は少し横長）
     */
    .p-gallery__photo {
        position: absolute;
        inset: calc(var(--frame-pad-top) * var(--u)) calc(var(--frame-pad-x) * var(--u)) calc(var(--frame-pad-bottom) * var(--u));
        display: block;
        background-color: var(--color-frame-inner);
    }

    .p-gallery__photo > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    a.p-gallery__photo {
        transition: opacity 0.2s ease-in;
    }

    a.p-gallery__photo:hover {
        opacity: 0.85;
    }

    /*
     * 最初の枠の数（スマホ 3・PC 9）を超えた写真は「もっと見る」で出す。何枚目まで見せるかは
     * assets/js/gallery.js が is-shown で決める。隠すのは JS が is-collapsible を付けたときだけ（JS が動かなければ全部見える）
     */
    .p-gallery__photos.is-collapsible > .p-gallery__frame--photo:not(.is-shown) {
        display: none;
    }

    .p-gallery__more {
        margin-top: calc(var(--frame-more-gap) * var(--u));
    }

    .p-gallery__more > img {
        width: calc(var(--frame-more-w) * var(--u));
        margin-inline: auto;
    }

    /* 「もっと見る」のボタン。見た目はカンプの手書き「view more」（空の枠のときと同じ画像） */
    .p-gallery__more-button {
        display: block;
        width: calc(var(--frame-more-w) * var(--u));
        /* スマホでは画像の高さが 44px に届かないため、押せる面だけ広げる（画像は中央に置く） */
        min-height: var(--tap-target-min);
        margin: 0 auto;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .p-gallery__more-button[hidden] {
        display: none;
    }

    .p-gallery__more-button > img {
        width: 100%;
        transition: opacity 0.2s ease-in;
    }

    .p-gallery__more-button:hover > img {
        opacity: 0.75;
    }

    .p-gallery__notice,
    .p-gallery__fallback {
        width: min(100% - 2rem, 40rem);
        margin: 0 auto calc(24 * var(--u));
        text-align: center;
    }

    @media (min-width: 992px) {
        .p-gallery {
            --frame-cols: 3;
            --frame-w: 344;
            --frame-gap-x: 44;
            --frame-gap-y: 46;
            --frame-pad-top: 12;
            --frame-pad-x: 11;
            --frame-pad-bottom: 37;
            --frame-more-gap: 78;
            --frame-more-w: 332;

            padding-bottom: calc(150 * var(--u));
        }

        .p-gallery__head {
            height: calc(391 * var(--u));
        }

        .p-gallery__heading { --x: 252; --y: 16; --w: 851; }

        /* PC 版は見出しの左に置き、男性は最初の枠の後ろへ隠れる */
        .p-gallery__stars,
        .p-gallery__man {
            top: calc(var(--y) * var(--u));
            bottom: auto;
        }

        .p-gallery__stars { --x: 66; --y: 246; --w: 87; }
        .p-gallery__man { --x: 158; --y: 250; --w: 144; }

        /* 男性の下半身を最初の枠（写真を出しているときは最初の写真）の後ろへ隠す */
        .p-gallery__frames {
            position: relative;
            z-index: 1;
        }
    }

    /* ---- 募集要項・注意事項 ---- */

    /*
     * 白いカードの開閉（2026-10-07 スタッフの見た目の案。初期は閉じる）。
     * 開閉の仕組みは assets/js/terms.js。JS が動かないときは開いたままのカードで全文を出し、
     * 見出しは押せない帯として描く（.p-terms__bar は、JS がボタンに置き換える前と後で同じ見た目）。
     * 本文の文字の大きさ・行送りは、プライバシーポリシーのページ（.p-policy__card）に合わせる。
     */
    .p-terms {
        padding-top: calc(24 * var(--u));
    }

    .p-terms--notes {
        padding-top: calc(20 * var(--u));
    }

    .p-terms__card {
        width: calc(350 * var(--u));
        margin-inline: auto;
        border-radius: 0.875rem;
        background-color: var(--color-white);
        box-shadow: 0 0.375rem 1.125rem var(--shadow-terms-card);
    }

    /*
     * 見出しの文字は帯の中央に置く（2026-10-08 スタッフ指示）。右の列に丸い開閉ボタンを置き、
     * 左の列を同じ幅の空きにして、文字がボタンの分だけ左へ寄らないようにする
     */
    .p-terms__bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        min-height: 3.5rem;
        padding: 0.625rem 0.875rem;
        border: 0;
        border-radius: 0.875rem;
        background-color: var(--color-terms-bar);
        color: var(--color-terms-accent);
        font: inherit;
        font-family: "Nichinan Heading", var(--font-family-base);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.08em;
        text-align: center;
    }

    .p-terms__label {
        grid-column: 2;
    }

    /* 開いている間は、見出しの帯と本文の境に薄い影を落とす（見た目の案のとおり） */
    .p-terms__card:not(.is-closed) .p-terms__bar {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: 0 0.25rem 0.5rem -0.25rem var(--shadow-terms-card);
    }

    button.p-terms__bar {
        cursor: pointer;
    }

    /* 帯の角丸の内側に描く（外に描くとカードの影と重なって見えにくい） */
    button.p-terms__bar:focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: -4px;
    }

    /* 丸いボタンの絵。閉じているときは下向き、開いているときは上向きの山形 */
    .p-terms__icon {
        display: grid;
        grid-column: 3;
        justify-self: end;
        place-items: center;
        width: 2.25rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: var(--color-terms-accent);
    }

    .p-terms__icon::before {
        content: "";
        width: 0.5rem;
        aspect-ratio: 1;
        margin-top: 0.25rem;
        border: solid var(--color-white);
        border-width: 3px 3px 0 0;
        rotate: -45deg;
    }

    .p-terms__bar[aria-expanded="false"] .p-terms__icon::before {
        margin-top: -0.25rem;
        rotate: 135deg;
    }

    .p-terms__body {
        position: relative;
        padding: 1.25rem 1.25rem 3.25rem;
        color: var(--color-form-text);
        font-size: 0.9375rem;
        line-height: 1.8;
    }

    /*
     * hidden="until-found" は中身を描かないだけで、要素の上下の余白は残る（閉じたカードに空白ができる）。
     * 紙には全文を出すので、画面のときだけ余白を消す
     */
    @media screen {
        .p-terms__body[hidden] {
            padding-block: 0;
        }
    }

    /* 右下の黄色い飾り線（見た目の案のとおり。読み上げ対象外の背景画像） */
    .p-terms__body::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: 0.875rem;
        width: 2.25rem;
        aspect-ratio: 1;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23ffc93c' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M13 4l3 9M27 7l-5 8M33 20l-8 3'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .p-terms__body > * + * {
        margin-top: 0.5rem;
    }

    /* 小見出しの上に点線の区切りを引く（本文の先頭の小見出しには引かない） */
    .p-terms__body .p-terms__subheading {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 2px dotted var(--color-terms-rule);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.6;
    }

    .p-terms__body .p-terms__subheading:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .p-terms__body a {
        color: var(--color-form-accent);
    }

    /* 行頭はオレンジの丸（見た目の案のとおり） */
    .p-terms__list > li {
        position: relative;
        padding-inline-start: 1.25em;
    }

    .p-terms__list > li::before {
        content: "";
        position: absolute;
        top: 0.62em;
        left: 0.15em;
        width: 0.6em;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: var(--color-terms-accent);
    }

    .p-terms__list li + li {
        margin-top: 0.25rem;
    }

    /* お問い合わせの受付開始日時の案内と Instagram の注意（2026-10-07・10-14 スタッフ指示で赤い文字） */
    .p-terms__notice {
        color: var(--color-notice-red);
    }

    /*
     * メールアドレスをハイフンの位置で折り返さない（書き写すときに分かれて読めるため）。
     * 行の残りに入らなければ次の行へ丸ごと送り、枠より広いときだけ中で折り返す
     */
    .p-terms__address {
        display: inline-block;
    }

    @media (min-width: 992px) {
        /* 上の余白は、応募写真の区画の下の余白（150）だけにする */
        .p-terms {
            padding-top: 0;
        }

        .p-terms--notes {
            padding-top: calc(32 * var(--u));
        }

        .p-terms__card {
            width: calc(893 * var(--u));
            border-radius: 1rem;
        }

        .p-terms__bar {
            min-height: 4.5rem;
            padding: 0.75rem 1.25rem;
            border-radius: 1rem;
            font-size: 1.625rem;
        }

        .p-terms__icon {
            width: 2.75rem;
        }

        .p-terms__icon::before {
            width: 0.625rem;
        }

        .p-terms__body {
            padding: 2rem 2.5rem 4rem;
            font-size: 1rem;
        }

        .p-terms__body::after {
            right: 1.5rem;
            bottom: 1.25rem;
            width: 2.75rem;
        }
    }
}

/* ===== お問い合わせ（.plans/20260928-1052-contact-form.md） =====
 *
 * デザイン: docs/00_sources/2026-09-28_お問い合わせフォームのデザイン.png（「出来る範囲で再現」の指示）。
 * カンプの座標で組む区画ではないので、--u の比例ではなく rem で組む（入力欄の文字を 16px 未満にすると
 * iOS が入力時に画面を拡大するため、縮めない）。
 *
 * 読みやすさのためにデザインから変えたもの:
 *   - ボタンと※の色: デザインの #e86321 は白との比が 3.4:1 で足りないため、同じ色味で濃くした（4.7:1）
 *   - 入力欄の枠線: デザインの薄い灰色では白い地との差が 1.1:1 で欄の境目が見えないため、濃くした（3:1 以上）
 *
 * 見出しと案内文は LP のほかの区画に合わせる（2026-09-28 ユーザー決定。.plans/20260928-1450-lp-client-review-readiness.md）。
 *   - 影は付けない。LP のどこにも無く、ここだけ浮いて見えるため（白とオレンジ地の比 2.3:1 は、
 *     カンプどおりに組んだ LP のほかの白い文字と同じ水準）
 *   - 見出しの書体はカンプの書体（モリサワ A1ゴシック）に近いものにする。テープの見出しはカンプから
 *     書き出した画像で A1ゴシックの字形のため、システム書体の太字だと別の書体に見える
 *   - 案内文は募集要項の本文と同じ太さ・字間にする
 */

/*
 * 見出しの書体（お問い合わせの見出しと、募集要項・注意事項のカードの見出し）。
 * A1ゴシックは Web で使えないため、字形の近い Zen Kaku Gothic New Bold
 * （SIL OFL 1.1。assets/fonts/OFL.txt）を使う。LP に角の丸い書体は無いため、丸ゴシック系は合わない
 * （2026-09-28 ユーザー指摘）。見出しの 15 文字（お問い合わせ・募集要項・募集規約・注意事項）だけに
 * 切り出している（約 3KB。Google Fonts の版 1.002 から fonttools の pyftsubset で作成）。
 * 「募集規約」は 2026-10-08 から見出しに使っていないが、ファイルには「規約」の 2 字が残っている。
 * 見出しの文言を変えるときは切り出し直す（無い文字は予備のシステム書体で出て、字形が混ざる）。
 */
@font-face {
    font-family: "Nichinan Heading";
    src: url("../fonts/zen-kaku-gothic-new-bold-headings.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    --color-form-accent: #c84b12;       /* ボタン・※（デザイン #e86321 を濃くしたもの） */
    --color-form-accent-hover: #a83d0e;
    --color-form-text: #1a1a1a;
    --color-form-muted: #4d4d4d;
    --color-form-field-bg: #f3f3f3;     /* デザインの入力欄の地 */
    --color-form-field-border: #8c8c8c;
    --color-form-rule: #e6e6e6;         /* 行の区切り線 */
    --color-form-error: #b3261e;
    --color-form-error-bg: #fff5f4;
}

@layer components {
    /*
     * お問い合わせページ（page-contact.php。2026-10-05 に LP の末尾から移した）の上部。
     * LP の題字を LP へのリンクとして置き、どのキャンペーンの窓口かと戻り方を最初に示す
     */
    .p-contact-page__header {
        padding: 2.5rem 1rem 0;
        text-align: center;
    }

    .p-contact-page__brand {
        display: inline-block;
        width: min(70%, 20rem);
    }

    .p-contact-page__brand img {
        width: 100%;
    }

    .p-contact {
        padding: 1.75rem 1rem 0;
    }

    .p-contact__heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-family: "Nichinan Heading", var(--font-family-base);
        font-size: max(1.75rem, calc(30 * var(--u)));
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.3;
    }

    .p-contact__deco {
        flex: none;
        width: 0.7em;
        height: 0.8em;
        fill: none;
        stroke: currentcolor;
        stroke-width: 2.5;
        stroke-linecap: round;
    }

    .p-contact__deco--right {
        scale: -1 1;
    }

    /* LP の白い文字の本文と同じ太さ・字間。文字の大きさは読める下限を残す */
    .p-contact__lead {
        margin-top: 0.75rem;
        font-size: max(0.8125rem, calc(13 * var(--u)));
        line-height: 1.8;
        letter-spacing: 0.12em;
        text-align: center;
    }

    /*
     * お問い合わせの受付開始日時の案内と Instagram の注意（2026-10-07・10-14 スタッフ指示で赤い文字）。字の大きさと字間は案内文に合わせる。
     * オレンジの地に赤い文字は溶けて読みにくいため、白い帯に載せる（2026-10-07 ユーザー決定。比較画像から選択）。
     * 帯の幅は文の長さに合わせる（フォームの枠の幅だと、PC で 1 行目の末尾だけが次の行に送られる）
     */
    .p-contact__notice {
        width: fit-content;
        max-width: 100%;
        margin: 0.75rem auto 0;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        background-color: var(--color-white);
        color: var(--color-notice-red);
        font-size: max(0.8125rem, calc(13 * var(--u)));
        line-height: 1.8;
        letter-spacing: 0.12em;
        text-align: center;
    }

    .p-contact__card {
        width: min(100%, 47.5rem);
        margin: 1.5rem auto 0;
        padding: 1.5rem 1rem 2rem;
        border-radius: 0.5rem;
        background-color: var(--color-white);
        color: var(--color-form-text);
        line-height: 1.7;
    }

    /* 管理者にだけ出す「表示していない理由」 */
    .p-contact .c-pending ul {
        margin-top: 0.5rem;
        padding-inline-start: 1.25rem;
        list-style: disc;
    }

    .c-form__required-note {
        font-size: 0.75rem;
        text-align: right;
    }

    .c-form__required {
        margin-inline-start: 0.25em;
        color: var(--color-form-accent);
        font-weight: 700;
    }

    .c-form__row {
        display: grid;
        gap: 0.5rem;
        padding-block: 1rem;
        border-bottom: 1px solid var(--color-form-rule);
    }

    .c-form__label {
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .c-form__input {
        display: block;
        width: 100%;
        min-height: var(--tap-target-min);
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--color-form-field-border);
        border-radius: 0.25rem;
        background-color: var(--color-form-field-bg);
        color: var(--color-form-text);
        font: inherit;
        font-size: 1rem;
        line-height: 1.5;
    }

    .c-form__input::placeholder {
        color: #6b6b6b;
        opacity: 1;
    }

    .c-form__input--textarea {
        min-height: 10rem;
        resize: vertical;
    }

    .is-invalid .c-form__input {
        border-color: var(--color-form-error);
        border-width: 2px;
        background-color: var(--color-form-error-bg);
    }

    .c-form__error {
        margin-top: 0.375rem;
        color: var(--color-form-error);
        font-size: 0.875rem;
        font-weight: 700;
    }

    .c-form__summary,
    .c-form__notice {
        margin-bottom: 1rem;
        padding: 0.875rem 1rem;
        border-radius: 0.25rem;
        font-size: 0.9375rem;
    }

    .c-form__summary {
        border: 2px solid var(--color-form-error);
        background-color: var(--color-form-error-bg);
        color: var(--color-form-error);
    }

    .c-form__summary-title {
        font-weight: 700;
    }

    .c-form__summary-list {
        margin-top: 0.5rem;
        padding-inline-start: 1.25rem;
        list-style: disc;
    }

    .c-form__summary-list a {
        text-decoration: underline;
    }

    .c-form__notice {
        border-inline-start: 4px solid var(--color-pending-border);
        background-color: var(--color-pending-bg);
        color: var(--color-pending-text);
    }

    .c-form__title {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .c-form__text {
        margin-top: 0.5rem;
        font-size: 0.9375rem;
    }

    .c-form__review {
        margin-top: 1rem;
        border-top: 1px solid var(--color-form-rule);
    }

    .c-form__review-row {
        display: grid;
        gap: 0.25rem;
        padding-block: 0.875rem;
        border-bottom: 1px solid var(--color-form-rule);
    }

    .c-form__review-label {
        font-size: 0.875rem;
        font-weight: 700;
    }

    .c-form__review-value {
        overflow-wrap: anywhere;
    }

    .c-form__empty {
        color: var(--color-form-muted);
    }

    .c-form__privacy {
        margin-top: 1.25rem;
        color: var(--color-form-muted);
        font-size: 0.8125rem;
    }

    .c-form__privacy a {
        color: var(--color-form-accent-hover);
        text-decoration: underline;
    }

    .c-form__actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .c-form__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        width: min(100%, 16rem);
        min-height: 3.25rem;
        padding: 0.75rem 1.5rem;
        border: 0;
        border-radius: 0.25rem;
        background-color: var(--color-form-accent);
        color: var(--color-white);
        font: inherit;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        cursor: pointer;
    }

    .c-form__button:hover {
        background-color: var(--color-form-accent-hover);
    }

    .c-form__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--tap-target-min);
        padding: 0.5rem 1.25rem;
        border: 1px solid var(--color-form-field-border);
        border-radius: 0.25rem;
        background-color: var(--color-white);
        color: var(--color-form-text);
        font: inherit;
        font-size: 0.9375rem;
        text-decoration: none;
        cursor: pointer;
    }

    /* 機械だけが埋める欄。display: none だと埋めない機械があるため、画面の外へ逃がす */
    .c-form__trap {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    @media (min-width: 992px) {
        .p-contact-page__header {
            padding-top: 4rem;
        }

        .p-contact-page__brand {
            width: 22rem;
        }

        .p-contact {
            padding-top: 2.5rem;
        }

        .p-contact__heading {
            font-size: max(2rem, calc(40 * var(--u)));
        }

        .p-contact__lead,
        .p-contact__notice {
            margin-top: 1rem;
            font-size: max(0.9375rem, calc(18 * var(--u)));
            letter-spacing: 0.15em;
        }

        .p-contact__card {
            margin-top: 2rem;
            padding: 2rem 3rem 2.5rem;
            border-radius: 0.75rem;
        }

        .c-form__row,
        .c-form__review-row {
            /* 「メールアドレス（確認）※」が 1 行に収まる幅 */
            grid-template-columns: 12.5rem 1fr;
            align-items: center;
            gap: 1.5rem;
        }

        /* 複数行の欄は、項目名を上にそろえる */
        .c-form__row:has(textarea),
        .c-form__review-row:last-child {
            align-items: start;
        }

        .c-form__row:has(textarea) .c-form__label {
            padding-top: 0.625rem;
        }

        .c-form__actions--confirm {
            flex-direction: row-reverse;
            justify-content: center;
        }
    }
}

/* ===== 動き（.plans/20260925-1620-lp-motion.md） =====
 *
 * 動かすのは opacity と、変形の個別プロパティ（translate / scale / rotate）だけ。位置と大きさは変えない。
 * transform ではなく個別プロパティを使うのは、応募方法のカードが transform で持つ傾きを
 * 上書きしないため（個別プロパティは transform と合成される）。
 *
 * 隠す指定はすべて prefers-reduced-motion: no-preference の中に置く。動きを減らす設定では、
 * JS の状態にかかわらず何も隠れず、何も動かない。
 * スクロールで現す対象と種類は assets/js/motion.js が data-reveal で付ける。JS が動かなければ何も隠れない。
 */

@layer components {
    @media (prefers-reduced-motion: no-preference) {
        /*
         * ファーストビュー: 読み込み時に一度だけ。JS の読み込みを待たずに始めるため CSS だけで行う。
         * タイトルは透明から始めない。PC では写真が画面いっぱいのため背景とみなされ、タイトルが
         * 最大の描画要素（LCP）になる。透明から始めると候補から外れ、LCP が出なくなる
         * （2026-09-25 に 1440px で実測。スクロール前の 3 秒間、記録 0 件）。
         * 期間とキャッチはタイトルより小さく LCP にならないため、透明から現してよい。
         */
        .p-kv__glow--title,
        .p-kv__title {
            animation: nichinan-pop-in var(--motion-duration) var(--motion-ease-out) 0.1s both;
        }

        .p-kv__period {
            animation: nichinan-rise-in var(--motion-duration) var(--motion-ease-out) 0.45s both;
        }

        .p-kv__glow--catch,
        .p-kv__catch {
            animation: nichinan-rise-in var(--motion-duration) var(--motion-ease-out) 0.7s both;
        }

        /* スクロールで現す。--reveal-delay は同時に入ってきた要素を順にずらす値（JS が付ける） */
        [data-reveal] {
            transition:
                opacity var(--motion-duration) var(--motion-ease-out) var(--reveal-delay, 0s),
                translate var(--motion-duration) var(--motion-ease-out) var(--reveal-delay, 0s);
        }

        [data-reveal]:not(.is-revealed) {
            opacity: 0;
        }

        [data-reveal="rise"]:not(.is-revealed) {
            translate: 0 var(--motion-rise);
        }

        [data-reveal="pop"] {
            transition:
                opacity calc(var(--motion-duration) / 2) var(--motion-ease-out) var(--reveal-delay, 0s),
                scale var(--motion-duration) var(--motion-ease-pop) var(--reveal-delay, 0s);
        }

        [data-reveal="pop"]:not(.is-revealed) {
            scale: var(--motion-pop-from);
        }

        /* 人物・動物の絵は、足もとを軸に、現れてから一度だけ揺らす */
        [data-reveal="wiggle"] {
            transform-origin: 50% 100%;
        }

        [data-reveal="wiggle"].is-revealed:not(.is-settled) {
            animation: nichinan-wiggle 0.9s ease-in-out calc(var(--reveal-delay, 0s) + 0.3s) 1;
        }

        /* 募集要項・注意事項の開閉ボタンの山形。本文の開閉（assets/js/terms.js）と同じ時間で向きを変える */
        .p-terms__icon::before {
            transition:
                rotate var(--motion-accordion) var(--motion-ease-out),
                margin-top var(--motion-accordion) var(--motion-ease-out);
        }
    }

    /* 揺れ終わった絵は、マウスを載せたときにもう一度揺れる（操作したときだけ動く） */
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
        [data-reveal="wiggle"].is-settled:hover {
            animation: nichinan-wiggle 0.9s ease-in-out 1;
        }
    }

    @keyframes nichinan-pop-in {
        from {
            opacity: 0.6;
            scale: 0.94;
        }
    }

    @keyframes nichinan-rise-in {
        from {
            opacity: 0;
            translate: 0 var(--motion-rise);
        }
    }

    @keyframes nichinan-wiggle {
        0%,
        100% {
            rotate: 0deg;
        }

        20% {
            rotate: calc(var(--motion-wiggle) * -1);
        }

        40% {
            rotate: var(--motion-wiggle);
        }

        60% {
            rotate: calc(var(--motion-wiggle) * -0.6);
        }

        80% {
            rotate: calc(var(--motion-wiggle) * 0.3);
        }
    }
}

@layer utilities {
    .u-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* 日時など、行の途中で切れると読み違える語をひとかたまりにする */
    .u-nowrap {
        white-space: nowrap;
    }

    /* スマホ版カンプ・PC 版カンプにだけある要素。display: none の側は読み上げからも外れる */
    @media (max-width: 991.98px) {
        .u-pc-only {
            display: none;
        }
    }

    @media (min-width: 992px) {
        .u-sp-only {
            display: none;
        }
    }
}

/* ===== プライバシーポリシー（page-privacy-policy.php） =====
 *
 * 長い文章を読むページなので、LP と同じ地に白いカードを置き、濃い文字で組む
 * （.plans/20260928-1450-lp-client-review-readiness.md）。カンプの座標で組む区画ではないため rem で組む。
 * 本文は WordPress の固定ページの HTML（h2・h3・p・ul・a・mark）をそのまま受ける。
 */

@layer components {
    .p-policy {
        padding: 2.5rem 1rem 0;
    }

    .p-policy__card {
        /* 1 行を読みやすい長さ（全角 40 字前後）に抑える */
        width: min(100%, 46rem);
        margin-inline: auto;
        padding: 1.5rem 1.25rem 2rem;
        border-radius: 0.5rem;
        background-color: var(--color-white);
        color: var(--color-form-text);
        line-height: 1.9;
    }

    .p-policy__nav {
        font-size: 0.875rem;
    }

    .p-policy__nav a {
        display: inline-block;
        padding-block: 0.5rem;
    }

    .p-policy__title {
        margin-top: 0.5rem;
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .p-policy__body {
        margin-top: 1.25rem;
        font-size: 0.9375rem;
    }

    .p-policy__body > * + * {
        margin-top: 0.75rem;
    }

    .p-policy__body h2 {
        margin-top: 2.25rem;
        padding-bottom: 0.375rem;
        border-bottom: 2px solid var(--color-orange);
        font-size: 1.125rem;
        line-height: 1.5;
    }

    .p-policy__body h3 {
        margin-top: 1.5rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    .p-policy__body ul {
        padding-inline-start: 1.25em;
    }

    .p-policy__body li + li,
    .p-policy__body li > ul {
        margin-top: 0.25rem;
    }

    .p-policy__body a {
        color: var(--color-form-accent);
    }

    /* 【要確認】の箇所。担当者が読み落とさないよう、色だけでなく文字（【要確認】）でも示している */
    .p-policy__body mark {
        padding-inline: 0.125em;
        background-color: #fff1b8;
        color: inherit;
    }

    .p-policy__actions {
        margin-top: 2.5rem;
        text-align: center;
    }

    @media (min-width: 992px) {
        .p-policy {
            padding-top: 5rem;
        }

        .p-policy__card {
            padding: 2.5rem 3.5rem 3rem;
            border-radius: 0.75rem;
        }

        .p-policy__title {
            font-size: 1.75rem;
        }

        .p-policy__body {
            font-size: 1rem;
        }
    }
}