:root {
            --sumi: #241f1b;        /* 墨色 */
            --fude: #3a332b;        /* 筆文字 */
            --gold: #b98f2e;        /* 金色 */
            --gold-light: #e0c27a;  /* 薄金 */
            --shu: #c3272b;         /* 朱色 */
            --shu-deep: #8f1c20;    /* 深朱 */
            --washi: #f7f1e3;       /* 和紙 */
            --washi-deep: #efe3c9;  /* 濃和紙 */
        }

        html { scroll-behavior: smooth; }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
            color: var(--sumi);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
            background-color: var(--washi);
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23b98f2e' stroke-opacity='.08'%3E%3Cpath d='M0,60c0-33.1,26.9-60,60-60s60,26.9,60,60H0z'/%3E%3Cpath d='M-60,60c0-33.1,26.9-60,60-60s60,26.9,60,60H-60z'/%3E%3Cpath d='M60,60c0-33.1,26.9-60,60-60s60,26.9,60,60H60z'/%3E%3Cpath d='M0,30c0-16.6,13.4-30,30-30s30,13.4,30,30H0z'/%3E%3Cpath d='M-60,30c0-16.6,13.4-30,30-30s30,13.4,30,30H-60z'/%3E%3Cpath d='M60,30c0-16.6,13.4-30,30-30s30,13.4,30,30H60z'/%3E%3C/g%3E%3C/svg%3E"),
                repeating-linear-gradient(45deg, rgba(150, 120, 80, 0.03) 0 2px, transparent 2px 4px),
                repeating-linear-gradient(-45deg, rgba(150, 120, 80, 0.025) 0 2px, transparent 2px 4px),
                linear-gradient(180deg, #faf5e9 0%, var(--washi) 45%, var(--washi-deep) 100%);
        }

        /* ==========================================================
           日本画風 ヒーローシーン：朝日 × 富士 × 鳥居 × 青海波
        ========================================================== */
        .hero {
            position: relative;
            width: 100%;
            min-height: clamp(300px, 46vh, 560px);
            overflow: hidden;
        }

        .hero-scene { position: absolute; inset: 0; z-index: 1; }

        .sun {
            position: absolute;
            top: 22%;
            left: 50%;
            transform: translateX(-50%);
            width: 26vmin;
            height: 26vmin;
            border-radius: 50%;
            background: radial-gradient(circle,
                #fbdcc0 0%,
                #f2a06c 30%,
                #e05a35 55%,
                rgba(224, 90, 53, 0.35) 72%,
                rgba(224, 90, 53, 0) 78%);
            box-shadow: 0 0 60px 10px rgba(224, 90, 53, 0.25);
        }

        .fuji {
            position: absolute;
            bottom: -2%;
            left: 50%;
            transform: translateX(-50%);
            height: 36vmin;
            width: auto;
        }

        .torii {
            position: absolute;
            bottom: 6%;
            left: 50%;
            transform: translateX(-50%);
            height: 15vmin;
            width: auto;
            filter: drop-shadow(0 4px 10px rgba(40, 20, 10, 0.25));
        }

        .waves {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 24vmin;
        }

        .crane {
            position: absolute;
            width: 11vmin;
            height: auto;
            z-index: 2;
            filter: drop-shadow(0 2px 4px rgba(50, 40, 30, 0.25));
        }

        .crane-1 { top: 12%; left: 22%; transform: rotate(-8deg); }
        .crane-2 { top: 9%; right: 20%; transform: scaleX(-1) rotate(6deg); }

        .hero-tagline {
            position: absolute;
            top: 22px;
            left: 0;
            right: 0;
            z-index: 3;
            text-align: center;
            font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
            font-size: 14px;
            letter-spacing: 0.5em;
            text-indent: 0.5em;
            color: var(--shu-deep);
            font-weight: 700;
        }

        /* ==========================================================
           色紙風 メインカード
        ========================================================== */
        .shikishi {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 620px;
            margin: -6px 16px 0;
            padding: 42px 40px 30px;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
                linear-gradient(180deg, #fdfaf0 0%, #f6eeda 100%);
            border: 3px solid var(--gold);
            outline: 1px solid rgba(224, 194, 122, 0.55);
            outline-offset: 7px;
            border-radius: 6px;
            box-shadow: 0 24px 60px rgba(90, 60, 20, 0.30), inset 0 0 0 1px rgba(185, 143, 46, 0.30);
            text-align: center;
        }

        .shikishi::before {
            content: '';
            position: absolute;
            inset: 10px;
            border: 1px solid rgba(185, 143, 46, 0.50);
            border-radius: 3px;
            pointer-events: none;
        }

        .shikishi::after {
            content: '';
            position: absolute;
            inset: 15px;
            border: 1px solid rgba(195, 39, 43, 0.30);
            border-radius: 3px;
            pointer-events: none;
        }

        /* 印鑑（ハンコ） */
        .seal {
            position: absolute;
            top: 20px;
            right: 26px;
            width: 50px;
            height: 50px;
            background: var(--shu);
            color: #fff;
            font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
            font-size: 21px;
            font-weight: 700;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            border: 1px solid #f0e6cf;
            box-shadow: 0 3px 8px rgba(140, 30, 25, 0.40);
            transform: rotate(4deg);
        }

        .eyebrow {
            display: inline-block;
            font-size: 13px;
            letter-spacing: 0.30em;
            text-indent: 0.30em;
            color: var(--shu-deep);
            font-weight: 700;
            border: 1px solid rgba(195, 39, 43, 0.50);
            border-radius: 3px;
            padding: 4px 14px 4px 18px;
            background: rgba(195, 39, 43, 0.05);
            margin-bottom: 20px;
        }

        .title {
            font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
            font-size: 33px;
            line-height: 1.55;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: var(--sumi);
            margin-bottom: 6px;
        }

        .title .yen { color: var(--shu); }

        .title .accent {
            display: inline-block;
            transform: rotate(-1.5deg);
            color: #fff;
            background: linear-gradient(180deg, var(--shu), var(--shu-deep));
            padding: 2px 12px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(140, 30, 25, 0.35);
        }

        .brush {
            position: relative;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
            margin: 20px 0 22px;
        }

        .brush::before {
            content: '◆';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: var(--shu);
            font-size: 9px;
            background: #f9f4e6;
            padding: 0 8px;
        }

        .description {
            font-size: 15px;
            line-height: 2.0;
            letter-spacing: 0.02em;
            color: var(--fude);
            text-align: left;
            margin-bottom: 22px;
        }

        .description b {
            color: var(--shu-deep);
            font-weight: 700;
        }

        .bonus-box {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            text-align: left;
            background: linear-gradient(180deg, #fff9e9 0%, #fdf3d8 100%);
            border: 1px solid var(--gold-light);
            border-left: 4px solid var(--shu);
            border-radius: 4px;
            padding: 15px 16px;
            margin-bottom: 24px;
            font-size: 13.5px;
            line-height: 1.75;
            box-shadow: 0 2px 8px rgba(120, 90, 30, 0.12);
        }

        .checkmark {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--shu);
            color: #fff;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
        }

        .bonus-box strong { color: var(--shu-deep); }

        /* ==========================================================
           核心 CTA ボタン
        ========================================================== */
        .cta-button {
            position: relative;
            display: block;
            text-align: center;
            background: linear-gradient(180deg, #e04a3c 0%, var(--shu) 45%, var(--shu-deep) 100%);
            color: #fff;
            font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
            font-size: 21px;
            font-weight: 700;
            letter-spacing: 0.10em;
            text-indent: 0.10em;
            text-decoration: none;
            padding: 19px 20px;
            border-radius: 4px;
            border: 1px solid #7a1714;
            box-shadow: 0 6px 18px rgba(150, 30, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            transition: all 0.25s ease;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            inset: 4px;
            border: 1px solid rgba(255, 235, 180, 0.55);
            border-radius: 2px;
            pointer-events: none;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(150, 30, 25, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            filter: brightness(1.06);
        }

        .cta-button:active { transform: translateY(0) scale(0.99); }

        .cta-arrow { font-size: 19px; margin-left: 8px; }

        .cta-note {
            margin-top: 13px;
            font-size: 12px;
            color: #8a6d2f;
            letter-spacing: 0.08em;
        }

        /* ==========================================================
           リスク開示
        ========================================================== */
        .risk-notice {
            margin-top: 24px;
            padding: 13px 15px;
            font-size: 11px;
            line-height: 1.8;
            color: #6b6459;
            background: rgba(36, 31, 27, 0.05);
            border-left: 3px solid var(--gold);
            border-radius: 0 4px 4px 0;
            text-align: left;
        }

        /* ==========================================================
           ページ下部
        ========================================================== */
        .footer {
            position: relative;
            z-index: 2;
            margin-top: 36px;
            margin-bottom: 20px;
            font-size: 12px;
            color: #8d8574;
            text-align: center;
            line-height: 2.0;
            padding: 0 20px;
        }

        .footer a {
            color: var(--shu-deep);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer a:hover { text-decoration: underline; }

        /* ==========================================================
            桜 の 花びら
        ========================================================== */
        .petal {
            position: fixed;
            top: -6%;
            width: var(--s, 12px);
            height: var(--s, 12px);
            left: var(--x, 10%);
            background: radial-gradient(circle at 35% 30%, #fde1ea 0%, #f6b7cd 55%, #e88ba9 100%);
            border-radius: 100% 0 100% 0;
            opacity: 0;
            z-index: 6;
            pointer-events: none;
            animation: fall var(--d, 12s) linear var(--delay, 0s) infinite;
        }

        @keyframes fall {
            0%   { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
            8%   { opacity: 0.9; }
            100% { transform: translate3d(var(--sway, 40px), 108vh, 0) rotate(560deg); opacity: 0; }
        }

        /* ==========================================================
           レスポンシブ
        ========================================================== */
        @media (max-width: 640px) {
            .hero { min-height: 38vh; }
            .hero-tagline { font-size: 12px; letter-spacing: 0.3em; }
            .shikishi { padding: 36px 22px 24px; margin: -4px 12px 0; }
            .title { font-size: 26px; }
            .seal { width: 42px; height: 42px; font-size: 16px; top: 15px; right: 18px; }
            .eyebrow { font-size: 11px; letter-spacing: 0.2em; }
            .description { font-size: 14px; }
            .cta-button { font-size: 17px; padding: 16px 14px; }
            .cta-arrow { font-size: 15px; }
            .crane { width: 9vmin; }
        }