:root {
            --bg: #f4efe5;
            --paper: #fbf8f1;
            --ink: #11110f;
            --muted: #6f685e;
            --gold: #b9923e;
            --gold2: #d7bc72;
            --black: #0d0e0c;
            --line: #d8cfbf;
            --red: #7a1d1d;
            --green: #173d2b
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
            line-height: 1.7
        }

        a {
            color: inherit;
            text-decoration: none
        }

        .wrap {
            width: min(1160px, 92vw);
            margin: auto
        }

        .serif,
        h1,
        h2,
        h3 {
            font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif
        }

        .top {
            background: #0d0e0c;
            color: #fff;
            text-align: center;
            padding: 10px;
            font-weight: 800;
            font-size: 13px
        }

        header {
            position: sticky;
            top: 0;
            z-index: 30;
            background: rgba(244, 239, 229, .94);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, .08)
        }

        .nav {
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

        .brand {
            font-weight: 900;
            letter-spacing: .08em
        }

        .brand b {
            color: var(--gold)
        }

        .navlinks {  
            display: flex;
            gap: 18px;
            font-size: 12px;
            font-weight: 800
        }

        .headcta {
            background: var(--black);
            color: #fff;
            padding: 12px 18px;
            border-radius: 6px;
            font-weight: 900
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 68px 0 54px
        }

        .hero:after {
            content: "";
            position: absolute;
            right: -160px;
            top: -80px;
            width: 620px;
            height: 620px;
            border-radius: 50%;
            border: 1px solid rgba(185, 146, 62, .28);
            box-shadow: 0 0 0 100px rgba(185, 146, 62, .05), 0 0 0 200px rgba(185, 146, 62, .02)
        }

        .heroGrid {
            display: grid;
            grid-template-columns: 1.08fr .92fr;
            gap: 44px;
            align-items: center;
            position: relative;
            z-index: 2
        }

        .badge {
            display: inline-block;
            border: 1px solid var(--gold);
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 900;
            color: #6d541d;
            background: rgba(255, 255, 255, .5)
        }

        h1 {
            font-size: clamp(44px, 6vw, 78px);
            line-height: 1.1;
            margin: 18px 0 15px;
            letter-spacing: -.03em
        }

        .gold {
            color: var(--gold)
        }

        .heroLead {
            font-size: 19px;
            color: #3c3730;
            max-width: 720px
        }

        .heroNumbers {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 26px 0
        }

        .heroNumbers>div {
            background: #fff;
            border: 1px solid var(--line);
            padding: 15px;
            border-radius: 8px
        }

        .heroNumbers strong {
            display: block;
            font-size: 24px;
            line-height: 1.2
        }

        .heroNumbers small {
            color: var(--muted)
        }

        .btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 16px 22px;
            border-radius: 6px;
            font-weight: 900
        }

        .btn.primary {
            background: var(--black);
            color: #fff
        }

        .btn.gold {
            background: var(--gold);
            color: #111
        }

        .fine {
            font-size: 11px;
            color: var(--muted);
            margin-top: 10px
        }

        .deviceCard {
            background: #11120f;
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 26px 70px rgba(0, 0, 0, .22)
        }

        .deviceCard img {
            width: 100%;
            display: block;
            border-radius: 12px;
            aspect-ratio: 1.35/1;
            object-fit: cover
        }

        .deviceMeta {
            color: #fff;
            padding: 18px 6px 6px
        }

        .deviceMeta small {
            color: var(--gold2);
            letter-spacing: .12em;
            font-weight: 900
        }

        .deviceMeta h3 {
            font-size: 30px;
            margin: 5px 0
        }

        .deviceStats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .deviceStats div {
            border-top: 1px solid rgba(255, 255, 255, .18);
            padding-top: 10px
        }

        .deviceStats b {
            display: block;
            color: var(--gold2);
            font-size: 20px
        }

        .section {
            padding: 82px 0
        }

        .white {
            background: var(--paper)
        }

        .dark {
            background: var(--black);
            color: #fff
        }

        .eyebrow {
            font-size: 11px;
            letter-spacing: .2em;
            color: var(--gold);
            font-weight: 900
        }

        h2 {
            font-size: clamp(34px, 4.4vw, 56px);
            line-height: 1.18;
            margin: 10px 0 16px
        }

        .sub {
            max-width: 820px;
            color: #5e5951
        }

        .dark .sub {
            color: #beb8ae
        }

        .problemGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 28px
        }

        .problem {
            display: flex;
            gap: 14px;
            background: #fff;
            border: 1px solid var(--line);
            padding: 20px;
            border-radius: 8px
        }

        .check {
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            border-radius: 50%;
            background: #111;
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 12px;
            font-weight: 900
        }

        .reasonGrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 30px
        }

        .reason {
            background: #fff;
            border: 1px solid var(--line);
            border-top: 3px solid var(--gold);
            padding: 28px
        }

        .reasonNum {
            font: 50px Georgia, serif;
            color: #d2b35e
        }

        .reason h3 {
            font-size: 23px;
            margin: 6px 0
        }

        .reason p {
            font-size: 14px;
            color: #625d55
        }

        .claims {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 30px
        }

        .claim {
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, .17);
            background: #151612
        }

        .claim strong {
            display: block;
            font: 52px Georgia, serif;
            color: var(--gold2);
            line-height: 1
        }

        .claim h3 {
            font-size: 21px;
            margin: 8px 0
        }

        .claim p {
            font-size: 13px;
            color: #c8c1b7
        }

        .simTable {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border: 1px solid var(--line);
            margin-top: 25px
        }

        .simTable th,
        .simTable td {
            padding: 16px;
            border-bottom: 1px solid var(--line);
            text-align: left
        }

        .simTable th {
            background: #eee6d9
        }

        .highlight {
            font-weight: 900;
            color: #7c611f
        }

        .bigResult {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-top: 18px
        }

        .bigResult div {
            background: #11120f;
            color: #fff;
            padding: 24px;
            border-radius: 8px
        }

        .bigResult span {
            display: block;
            font-size: 12px;
            color: #bbb4a9
        }

        .bigResult strong {
            display: block;
            font: 34px Georgia, serif;
            color: var(--gold2);
            margin-top: 5px
        }

        .returnGrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 25px
        }

        .returnCard {
            background: #fff;
            border: 1px solid var(--line);
            padding: 25px
        }

        .returnCard b {
            font-size: 24px
        }

        .returnCard strong {
            display: block;
            font: 42px Georgia, serif;
            color: var(--gold);
            line-height: 1.1;
            margin: 7px 0
        }

        .scheme {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            border: 1px solid var(--line);
            margin-top: 30px
        }

        .step {
            background: #fff;
            padding: 24px 18px;
            min-height: 190px;
            border-right: 1px solid var(--line)
        }

        .step:last-child {
            border-right: 0
        }

        .step em {
            font-style: normal;
            color: var(--gold);
            font-size: 11px;
            font-weight: 900
        }

        .step h3 {
            font-size: 18px;
            margin: 6px 0
        }

        .step p {
            font-size: 13px;
            color: #625d56
        }

        .lineup {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-top: 30px
        }

        .product {
            background: #fff;
            border: 1px solid var(--line);
            overflow: hidden
        }

        .product img {
            width: 100%;
            aspect-ratio: 1.35/1;
            object-fit: cover;
            display: block
        }

        .productBody {
            padding: 18px
        }

        .product small {
            color: var(--gold);
            font-weight: 900
        }

        .product h3 {
            font-size: 25px;
            margin: 5px 0
        }

        .price {
            font-size: 20px;
            font-weight: 900
        }

        .calcWrap {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 26px;
            margin-top: 30px
        }

        .calcBox {
            background: #fff;
            border: 1px solid var(--line);
            padding: 26px;
            border-radius: 8px
        }

        .calcBox label {
            display: block;
            font-size: 12px;
            font-weight: 900;
            margin-bottom: 6px
        }

        .calcBox input {
            width: 100%;
            padding: 13px;
            border: 1px solid #cfc5b6;
            font: inherit;
            margin-bottom: 14px
        }

        .results {
            background: #11120f;
            color: #fff;
            padding: 26px;
            border-radius: 8px
        }

        .resultRow {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            padding: 13px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .14)
        }

        .resultRow strong {
            color: var(--gold2);
            font-size: 23px
        }

        .monthly {
            overflow: auto;
            margin-top: 18px;
            max-height: 430px;
            background: #fff;
            border: 1px solid var(--line)
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 720px
        }

        th,
        td {
            padding: 14px;
            border-bottom: 1px solid var(--line);
            text-align: left;
            font-size: 13px
        }

        th {
            background: #eee6d9
        }

        td.hi {
            background: #fbf3dc;
            font-weight: 900
        }

        .caseGrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 26px
        }

        .case {
            background: #fff;
            border: 1px solid var(--line);
            padding: 24px
        }

        .case h3 {
            font-size: 22px;
            margin: 6px 0
        }

        .case .kpi {
            font: 34px Georgia, serif;
            color: var(--gold);
            font-weight: 700
        }

        .faq {
            max-width: 900px;
            margin: 26px auto 0
        }

        details {
            border-top: 1px solid var(--line);
            padding: 18px 0
        }

        details:last-child {
            border-bottom: 1px solid var(--line)
        }

        summary {
            font-weight: 900;
            cursor: pointer
        }

        details p {
            color: #5f5a53
        }

        .ctaBand {
            background: linear-gradient(135deg, #11120f, #1b1a15);
            color: #fff;
            padding: 68px 0
        }

        .ctaGrid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 24px;
            align-items: center
        }

        .contact {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 28px;
            margin-top: 28px
        }

        .form {
            background: #fff;
            border: 1px solid var(--line);
            padding: 28px
        }

        .grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .field {
            margin-bottom: 12px
        }

        .field label {
            display: block;
            font-size: 12px;
            font-weight: 800;
            margin-bottom: 5px
        }

        .field input,
        .field select,
        .field textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #cfc5b6;
            font: inherit
        }

        .field textarea {
            min-height: 110px
        }

        .submit {
            width: 100%;
            border: 0;
            background: var(--black);
            color: #fff;
            padding: 16px;
            font-size: 16px;
            font-weight: 900
        }

        .notice {
            background: #fff4d6;
            border-left: 4px solid var(--gold);
            padding: 14px 16px;
            margin-top: 16px;
            font-size: 12px
        }

        footer {
            padding: 32px 0;
            color: #746d63;
            font-size: 12px;
            border-top: 1px solid var(--line)
        }

        .float {
            display: none
        }

        @media(max-width:900px) {
            .navlinks {
                display: none
            }

            .heroGrid,
            .calcWrap,
            .contact,
            .ctaGrid {
                grid-template-columns: 1fr
            }

            .reasonGrid,
            .claims,
            .caseGrid {
                grid-template-columns: 1fr
            }

            .lineup {
                grid-template-columns: 1fr 1fr
            }

            .scheme {
                grid-template-columns: 1fr 1fr
            }

            .bigResult {
                grid-template-columns: 1fr 1fr
            }

            .returnGrid {
                grid-template-columns: 1fr
            }

            .float {
                display: block;
                position: fixed;
                bottom: 12px;
                left: 12px;
                right: 12px;
                background: var(--gold);
                padding: 15px;
                border-radius: 6px;
                text-align: center;
                font-weight: 900;
                z-index: 50;
                box-shadow: 0 8px 25px rgba(0, 0, 0, .25)
            }
        }

        @media(max-width:600px) {

            .problemGrid,
            .lineup,
            .scheme,
            .grid2,
            .bigResult {
                grid-template-columns: 1fr
            }

            h1 {
                font-size: 43px
            }

            .section {
                padding: 62px 0
            }

            .heroNumbers {
                grid-template-columns: 1fr
            }
        }

/* Reference LP visual system: blue / purple finance-consulting palette. */
        :root {
            --bg: #f9fafb;
            --paper: #fff;
            --ink: #1f2937;
            --muted: #6b7280;
            --gold: #2563eb;
            --gold2: #fbbf24;
            --black: #1e40af;
            --line: #e5e7eb;
            --red: #ef4444;
            --green: #10b981
        }

        body {
            background: var(--bg);
            font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
            line-height: 1.7
        }

        .serif,
        h1,
        h2,
        h3 {
            font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif
        }

        .top {
            background: linear-gradient(135deg, #1e40af, #2563eb);
            padding: 11px;
            font-size: 14px
        }

        header {
            background: rgba(255, 255, 255, .98);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
        }

        .brand {
            letter-spacing: .03em;
            color: #1f2937
        }

        .brand b,
        .gold {
            color: var(--gold)
        }

        .headcta,
        .btn.primary {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            box-shadow: 0 4px 14px rgba(37, 99, 235, .28)
        }

        .headcta,
        .btn {
            border-radius: 50px
        }

        .btn {
            padding: 16px 30px
        }

        .btn.gold {
            background: #fbbf24;
            color: #1f2937;
            box-shadow: 0 4px 14px rgba(245, 158, 11, .26)
        }

        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 80px 0;
            text-align: center
        }

        .hero:before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 18% 15%, rgba(255, 255, 255, .16), transparent 32%), radial-gradient(circle at 85% 80%, rgba(251, 191, 36, .18), transparent 30%)
        }

        .hero:after {
            border-color: rgba(255, 255, 255, .22);
            box-shadow: 0 0 0 100px rgba(255, 255, 255, .06), 0 0 0 200px rgba(255, 255, 255, .025)
        }

        .heroLead {
            color: rgba(255, 255, 255, .95);
            margin-inline: auto
        }

        .badge {
            color: #fff;
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .45)
        }

        h1 {
            letter-spacing: -.04em
        }

        .hero .gold {
            color: #fbbf24;
            text-shadow: 2px 4px 8px rgba(0, 0, 0, .25)
        }

        .heroNumbers>div {
            background: rgba(255, 255, 255, .15);
            border-color: rgba(255, 255, 255, .25);
            border-radius: 12px;
            backdrop-filter: blur(10px)
        }

        .heroNumbers small,
        .fine {
            color: rgba(255, 255, 255, .85)
        }

        .hero .fine {
            max-width: 720px;
            margin-inline: auto
        }

        .deviceCard {
            border-radius: 16px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .25);
            box-shadow: 0 20px 45px rgba(30, 41, 59, .3);
            backdrop-filter: blur(10px)
        }

        .deviceMeta small,
        .deviceStats b {
            color: #fbbf24
        }

        .section {
            padding: 78px 0
        }

        .white {
            background: #fff
        }

        .dark {
            background: linear-gradient(135deg, #1e3a8a, #312e81)
        }

        .eyebrow {
            color: #2563eb
        }

        .dark .eyebrow,
        .ctaBand .eyebrow {
            color: #fbbf24
        }

        .sub {
            color: var(--muted)
        }

        .problem,
        .reason,
        .returnCard,
        .product,
        .case,
        .calcBox,
        .form {
            border-color: var(--line);
            border-radius: 12px;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .06)
        }

        .check {
            background: #2563eb
        }

        .reason {
            border-top-color: #2563eb
        }

        .reasonNum {
            color: #93c5fd
        }

        .reason p,
        .step p,
        .productBody p,
        .case p {
            color: var(--muted)
        }

        .claims {
            gap: 18px
        }

        .claim {
            border: 0;
            border-radius: 12px;
            background: rgba(255, 255, 255, .1);
            box-shadow: 0 8px 18px rgba(0, 0, 0, .12)
        }

        .claim strong {
            color: #fbbf24
        }

        .simTable,
        .monthly {
            border-color: var(--line);
            border-radius: 12px;
            overflow: hidden
        }

        .simTable th,
        th {
            background: #eff6ff;
            color: #1e3a8a
        }

        .highlight {
            color: #2563eb
        }

        .bigResult div,
        .results {
            background: linear-gradient(135deg, #1e40af, #2563eb);
            border-radius: 12px
        }

        .bigResult strong,
        .resultRow strong {
            color: #fbbf24
        }

        .returnCard strong,
        .case .kpi {
            color: #2563eb
        }

        .scheme {
            border-color: var(--line);
            border-radius: 12px;
            overflow: hidden
        }

        .step {
            border-color: var(--line)
        }

        .step em,
        .product small {
            color: #2563eb
        }

        .calcBox input,
        .field input,
        .field select,
        .field textarea {
            border: 2px solid #dee2e6;
            border-radius: 6px
        }

        .calcBox input:focus,
        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: 0;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .16)
        }

        td.hi {
            background: #dbeafe;
            color: #1e3a8a
        }

        .notice {
            background: #fffbeb;
            border-left-color: #f59e0b;
            border-radius: 6px
        }

        .submit {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            border-radius: 50px;
            box-shadow: 0 4px 14px rgba(37, 99, 235, .28)
        }

        .ctaBand {
            background: linear-gradient(135deg, #1e40af, #312e81)
        }

        footer {
            background: #fff;
            color: #6b7280;
            border-color: var(--line)
        }

        @media(max-width:900px) {
            .float {
                background: linear-gradient(135deg, #2563eb, #3b82f6);
                border-radius: 50px;
                box-shadow: 0 8px 25px rgba(37, 99, 235, .32)
            }
        }

        /* Motion, navigation, and responsive refinements. */
        .nav { height: 76px }
        .navlinks { gap: 24px; font-size: 14px }
        .navlinks a { position: relative; padding: 10px 0; transition: color .25s ease }
        .navlinks a:after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: #2563eb; transform: scaleX(0); transform-origin: center; transition: transform .25s ease }
        .navlinks a:hover, .navlinks a.active { color: #2563eb }
        .navlinks a:hover:after, .navlinks a.active:after { transform: scaleX(1) }
        .headcta, .btn, .submit, .float { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease }
        .headcta:hover, .btn:hover, .submit:hover, .float:hover { transform: translateY(-3px); filter: brightness(1.04); box-shadow: 0 10px 24px rgba(37, 99, 235, .32) }
        .btn.gold:hover { box-shadow: 0 10px 24px rgba(245, 158, 11, .32) }
        .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .42); transform: scale(0); pointer-events: none; animation: buttonRipple .62s ease-out }
        @keyframes buttonRipple { to { transform: scale(3.4); opacity: 0 } }
        .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1) }
        .reveal.in-view { opacity: 1; transform: none }
        .reveal:nth-child(2) { transition-delay: .08s }
        .reveal:nth-child(3) { transition-delay: .16s }
        .reason, .problem, .claim, .returnCard, .product, .case, .step { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease }
        .reason:hover, .problem:hover, .claim:hover, .returnCard:hover, .product:hover, .case:hover, .step:hover { transform: translateY(-7px); box-shadow: 0 16px 30px rgba(30, 64, 175, .13); border-color: #93c5fd }
        .deviceCard { animation: deviceFloat 5s ease-in-out infinite }
        @keyframes deviceFloat { 50% { transform: translateY(-9px) } }
        .results.pulse-result { animation: resultPulse .55s ease }
        @keyframes resultPulse { 50% { transform: scale(1.018); box-shadow: 0 0 0 7px rgba(96, 165, 250, .18) } }
        @media(max-width:1200px) { .wrap { width: min(1080px, 92vw) } .navlinks { gap: 17px; font-size: 13px } .heroGrid { gap: 30px } }
        @media(max-width:900px) { .nav { height: 68px } .brand { font-size: 15px } .navlinks { display: none } .headcta { padding: 11px 16px; font-size: 13px } .hero { padding: 64px 0 } .heroGrid { text-align: center } .deviceCard { max-width: 560px; margin: auto } .heroNumbers { max-width: 620px; margin: 26px auto } .section { padding: 66px 0 } .scheme { grid-template-columns: 1fr 1fr } .step:nth-child(2n) { border-right: 0 } .step:nth-child(n+3) { border-top: 1px solid var(--line) } }
        @media(max-width:680px) { .top { font-size: 12px; padding: 8px 14px } .nav { height: 62px } .headcta { padding: 9px 13px; font-size: 12px } .hero { padding: 50px 0 } .heroLead { font-size: 16px } .heroNumbers { grid-template-columns: 1fr; gap: 9px } .heroNumbers>div { padding: 13px } .heroNumbers strong { font-size: 22px } .section { padding: 54px 0 } h2 { font-size: 34px } .problemGrid, .reasonGrid, .claims, .caseGrid, .returnGrid, .lineup, .calcWrap, .contact, .ctaGrid { grid-template-columns: 1fr } .scheme { grid-template-columns: 1fr } .step, .step:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); min-height: auto } .step:last-child { border-bottom: 0 } .bigResult { grid-template-columns: 1fr 1fr } .grid2 { grid-template-columns: 1fr } .calcBox, .results, .form { padding: 22px } .ctaGrid { text-align: center } .ctaGrid .btn { width: 100% } }
        @media(max-width:420px) { .wrap { width: min(100% - 28px, 1160px) } h1 { font-size: 38px } .brand { font-size: 13px } .headcta { font-size: 11px; padding: 9px 11px } .bigResult { grid-template-columns: 1fr } .btn { width: 100%; padding: 15px 18px } .deviceCard { padding: 12px } .deviceMeta h3 { font-size: 25px } .float { left: 10px; right: 10px; bottom: 10px } }

        /* Pain points: calm icon cards with a uniform rhythm. */
        .problemGrid { gap: 16px; margin-top: 32px }
        .problem { min-height: 128px; align-items: center; gap: 16px; padding: 23px 24px; border: 1px solid #e2e8f0; background: #fff; box-shadow: none; transition: transform .48s cubic-bezier(.22, 1, .36, 1), border-color .48s ease, background-color .48s ease, box-shadow .48s ease }
        .problem .check { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; color: #2563eb; background: #eff6ff; display: grid; place-items: center; font-size: 21px; font-weight: 800; transition: transform .48s cubic-bezier(.22, 1, .36, 1), color .35s ease, background-color .35s ease }
        .problem b { display: block; margin-bottom: 3px; color: #1e3a8a; font-size: 16px }
        .problem:hover { transform: translateY(-4px); border-color: #bfdbfe; background: #fafdff; box-shadow: 0 12px 28px rgba(37, 99, 235, .10) }
        .problem:hover .check { transform: scale(1.07) rotate(-3deg); color: #fff; background: linear-gradient(135deg, #2563eb, #3b82f6) }
        .problem.reveal { transform: translateY(14px); transition-duration: .82s }
        .problem.reveal.in-view { transform: translateY(0) }

        /* Flat, readable FAQ accordion. */
        .faq { display: grid; gap: 10px; max-width: 940px }
        .faq details { margin: 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; overflow: hidden; transition: background-color .35s ease, border-color .35s ease }
        .faq details:last-child { border-bottom: 1px solid #e2e8f0 }
        .faq details[open] { border-color: #bfdbfe; background: #fff }
        .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; color: #1e3a8a; font-size: 15px; line-height: 1.55; list-style: none; transition: background-color .25s ease, color .25s ease }
        .faq summary:hover { background: #eff6ff }
        .faq summary::-webkit-details-marker { display: none }
        .faq summary:after { content: "+"; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; color: #2563eb; background: #dbeafe; font-size: 22px; font-weight: 400; line-height: 1; transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .25s ease, background-color .25s ease }
        .faq details[open] summary:after { content: "−"; transform: rotate(180deg); color: #fff; background: #2563eb }
        .faq details p { margin: 0; padding: 0 58px 20px 20px; color: #64748b; font-size: 14px; line-height: 1.85; animation: faqOpen .38s cubic-bezier(.22, 1, .36, 1) both }
        @keyframes faqOpen { from { opacity: 0; transform: translateY(-7px) } to { opacity: 1; transform: translateY(0) } }
        @media(max-width:680px) { .problem { min-height: 112px; padding: 19px 18px } .problem .check { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; font-size: 19px } .problem b { font-size: 15px } .faq summary { padding: 16px; font-size: 14px } .faq details p { padding: 0 16px 18px; font-size: 13px } }

        /* Warm black-and-gold restoration: retain the new interactions, restore the premium HIKARI character. */
        :root { --bg: #f4efe5; --paper: #fbf8f1; --ink: #171612; --muted: #6f685e; --gold: #b9923e; --gold2: #d7bc72; --black: #11120f; --line: #d8cfbf; --red: #7a1d1d; --green: #173d2b }
        body { background: var(--bg); color: var(--ink) }
        .top, .headcta, .btn.primary, .submit, .float { background: linear-gradient(135deg, #11120f, #29261f); box-shadow: 0 4px 14px rgba(17, 18, 15, .25) }
        .brand b, .gold, .eyebrow, .navlinks a:hover, .navlinks a.active { color: #9a752b }
        .navlinks a:after { background: #b9923e }
        .headcta:hover, .btn:hover, .submit:hover, .float:hover { box-shadow: 0 10px 24px rgba(17, 18, 15, .3) }
        .btn.gold { background: linear-gradient(135deg, #b9923e, #d7bc72); color: #16130d; box-shadow: 0 4px 14px rgba(185, 146, 62, .3) }
        .btn.gold:hover { box-shadow: 0 10px 24px rgba(185, 146, 62, .36) }
        .hero { background: linear-gradient(135deg, #191914 0%, #302b20 56%, #161713 100%) }
        .hero:before { background: radial-gradient(circle at 18% 15%, rgba(215, 188, 114, .20), transparent 32%), radial-gradient(circle at 85% 80%, rgba(185, 146, 62, .22), transparent 30%) }
        .hero:after { border-color: rgba(215, 188, 114, .28); box-shadow: 0 0 0 100px rgba(185, 146, 62, .06), 0 0 0 200px rgba(185, 146, 62, .025) }
        .hero .gold, .deviceMeta small, .deviceStats b, .claim strong, .bigResult strong, .resultRow strong { color: #d7bc72 }
        .badge { color: #f1d890; background: rgba(185, 146, 62, .14); border-color: rgba(215, 188, 114, .48) }
        .heroNumbers>div, .deviceCard { border-color: rgba(215, 188, 114, .23); background: rgba(255, 255, 255, .08) }
        .white { background: var(--paper) }.dark, .ctaBand { background: linear-gradient(135deg, #11120f, #27241b) }.dark .eyebrow, .ctaBand .eyebrow { color: #d7bc72 }
        .problem, .reason, .returnCard, .product, .case, .calcBox, .form { border-color: var(--line); background: #fffdf8; box-shadow: 0 4px 10px rgba(57, 46, 25, .055) }
        .reason { border-top-color: #b9923e }.reasonNum { color: #d2b35e }.check { background: #11120f }.problem b { color: #3d2f17 }
        .reason:hover, .problem:hover, .claim:hover, .returnCard:hover, .product:hover, .case:hover, .step:hover { border-color: #d7bc72; box-shadow: 0 16px 30px rgba(86, 65, 24, .12) }
        .problem { border-color: #ded4c4; background: #fffdf8 }.problem .check { color: #8b6724; background: #f8eed6 }.problem:hover { border-color: #d7bc72; background: #fffdf7; box-shadow: 0 12px 28px rgba(112, 82, 24, .12) }.problem:hover .check { color: #fff; background: linear-gradient(135deg, #9a752b, #d7bc72) }
        .claim { background: rgba(255, 255, 255, .06) }.simTable, .monthly, .scheme { border-color: var(--line) }.simTable th, th { background: #eee6d9; color: #56421a }.highlight, .returnCard strong, .case .kpi, .step em, .product small { color: #9a752b }
        .bigResult div, .results { background: linear-gradient(135deg, #11120f, #29261f) }.calcBox input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #b9923e; box-shadow: 0 0 0 3px rgba(185, 146, 62, .16) }.notice { background: #fff4d6; border-left-color: #b9923e } td.hi { background: #fbf3dc; color: #5d471c }
        .results.pulse-result { animation-name: resultPulseGold } @keyframes resultPulseGold { 50% { transform: scale(1.018); box-shadow: 0 0 0 7px rgba(215, 188, 114, .18) } }
        .faq details { border-color: #ded4c4; background: #fbf8f1 }.faq details:last-child { border-bottom-color: #ded4c4 }.faq details[open] { border-color: #d7bc72; background: #fffdf8 }.faq summary { color: #3d2f17 }.faq summary:hover { background: #f7f0e2 }.faq summary:after { color: #8b6724; background: #f2e5c5 }.faq details[open] summary:after { color: #fff; background: #9a752b }.faq details p { color: #6f685e }
        #contact .fine { color: #6f685e; opacity: 1 }

        /* Use stable sans-serif, tabular figures for every financial number. */
        .heroNumbers strong, .deviceStats b, .reasonNum, .claim strong, .bigResult strong, .returnCard strong, .case .kpi, .resultRow strong, .price {
            font-family: Arial, "Helvetica Neue", "Noto Sans JP", "Hiragino Sans", sans-serif;
            font-style: normal;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1, "lnum" 1;
            letter-spacing: -.02em;
        }

        /* Keep the monthly simulator within the mobile viewport. */
        @media(max-width:680px) {
            html, body { width: 100%; max-width: 100%; overflow-x: clip }
            header, main, footer, .top, .section, .hero, .ctaBand { width: 100%; max-width: 100% }
            .wrap { width: calc(100% - 28px) !important; max-width: none; margin-left: 14px; margin-right: 14px }
            .heroGrid > *, .calcWrap > *, .contact > *, .ctaGrid > *, .problemGrid > *, .reasonGrid > *, .claims > *, .caseGrid > *, .returnGrid > *, .lineup > *, .scheme > *, .bigResult > * { min-width: 0 }
            .simTable, .monthly { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain }
            .simTable, .monthly table { min-width: 0; width: 100%; table-layout: fixed }
            .simTable th, .simTable td, .monthly th, .monthly td { padding: 10px 5px; font-size: 11px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; word-break: break-word }
            .simTable th, .monthly th { font-size: 10px }
        }

        /* The contact form already provides the final CTA; do not obscure the footer with a duplicate mobile button. */
        .float { display: none !important }

        .honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap }
        .formStatus { margin: 0 0 16px; padding: 12px 14px; border-radius: 6px; font-size: 13px; font-weight: 700 }
        .formStatus.is-success { color: #315328; background: #edf6e8; border: 1px solid #b9d6ad }
        .formStatus.is-error { color: #7a1d1d; background: #fbeaea; border: 1px solid #e7b7b7 }