body {
            margin: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        img {
            max-width: 100%;
        }

        br.sp {
            display: none
        }


        [hidden] {
            display: none !important;
        }

        /* ── tokens ───────────────────────────────────────────── */
        :root {
            color-scheme: light;
            --paper: #F5F4F0;
            --surface: #FFFFFF;
            --surface-2: #E7ECEC;
            --surface-3: #EBEAE2;
            --ink: #121A1E;
            --ink-2: #333333;
            --ink-3: #7B8A90;
            --ink-4: #921D22;
            --line: #e9e9e9;
            --line-2: #BDC8CA;
            --line-3: #dad7c9;
            --line-4: #D9D9D9;
            --accent: #16634E;
            --accent-2: #0A4E45;
            --accent-soft: #DFECE8;
            --attent: #F3D7D8;
            --warm: #87735A;
            --warm-soft: #EFEAE2;
            --code-bg: #333;
            --code-ink: #D4E1E3;
            --code-dim: #6C8189;
            --btn-ink: #FFFFFF;
            --surface-soft: #F6FBFA;
            --surface-tag: #FFFEFD;
            --shadow: 0 1px 2px rgba(18, 26, 30, .05), 0 8px 24px -12px rgba(18, 26, 30, .16);
            --sans: "Noto Sans JP", sans-serif;
            --serif: "Noto Serif JP", serif;
            --mono: "Outfit", sans-serif;
            --label: "Outfit", "Noto Sans JP", system-ui, sans-serif;

        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                color-scheme: dark;
                --paper: #0D1316;
                --surface: #151D21;
                --surface-2: #1D262A;
                --ink: #E7EDEE;
                --ink-2: #A2B1B7;
                --ink-3: #78878E;
                --line: #283338;
                --line-2: #38464B;
                --accent: #54B7A6;
                --accent-2: #80CFC1;
                --accent-soft: #132724;
                --warm: #C2A780;
                --warm-soft: #1F1D19;
                --code-bg: #080D0F;
                --code-ink: #CCDBDD;
                --code-dim: #63787F;
                --btn-ink: #08110F;
                --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
            }
        }

        :root[data-theme="dark"] {
            color-scheme: dark;
            --paper: #0D1316;
            --surface: #151D21;
            --surface-2: #1D262A;
            --ink: #E7EDEE;
            --ink-2: #A2B1B7;
            --ink-3: #78878E;
            --line: #283338;
            --line-2: #38464B;
            --accent: #54B7A6;
            --accent-2: #80CFC1;
            --accent-soft: #132724;
            --warm: #C2A780;
            --warm-soft: #1F1D19;
            --code-bg: #080D0F;
            --code-ink: #CCDBDD;
            --code-dim: #63787F;
            --btn-ink: #08110F;
            --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
        }

        /* ── base ─────────────────────────────────────────────── */
        * {
            box-sizing: border-box
        }

        body {
            background: var(--paper);
            color: var(--ink);
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.9;
            letter-spacing: .02em;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%
        }

        a {
            color: var(--accent);
            text-underline-offset: .25em
        }

        h1,
        h2,
        h3,
        h4 {
            margin: 0;
            line-height: 1.45
        }

        p {
            margin: 0
        }

        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 2px
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                transition: none !important;
                animation: none !important
            }
        }

        .wrap {
            width: min(1200px, 100%);
            margin-inline: auto;
            padding-inline: clamp(16px, 4vw, 0px)
        }


        section {
            padding-block: clamp(52px, 7.5vw, 100px);
            border-top: 1px solid var(--line)
        }

        /* eyebrow / labels */
        .eyebrow {
            font-family: var(--mono);
            font-size: 1.3rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: .5em;
        }

        .sec-head {
            display: flex;
            flex-direction: column;
            gap: .6rem;
            margin-bottom: clamp(32px, 4.5vw, 40px);
            border-left: 5px solid var(--accent);
            padding-left: 1.2em;
        }

        .sec-head .eyebrow::before {
            content: "";
            width: 44px;
            height: 1px;
            background: var(--accent);
            flex: none;
        }

        h2 {
            font-family: var(--serif);
            font-weight: 700;
            /* Min: 24px (1.5rem), Preferred co giãn, Max: 35px (2.1875rem) */
            font-size: clamp(1.5rem, 1.2rem + 1.33vw, 2.1875rem);
            letter-spacing: .01em;
        }

        .sec-lead {
            color: var(--ink-2);
            font-size: .95rem;
            margin-bottom: clamp(32px, 4.5vw, 40px);
            line-height: 2.5;
        }



        /* ── header ───────────────────────────────────────────── */
        header.site {
            position: sticky;
            top: 0;
            z-index: 20;
            background: #fff;
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
        }

        header.site .inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            min-height: 60px;
            padding: 15px
        }

        .brand {
            display: flex;
            align-items: baseline;
            gap: .6rem;
            font-size: 1rem;
            letter-spacing: .04em;
            align-items: center;
        }

        .brand .logo-text {
            font-family: var(--sans);
            font-weight: 400;
            font-size: 0.9rem;
            line-height: 1.3;
        }

        .brand .mark {
            font-family: var(--mono);
            color: var(--accent);
            font-weight: 500;
            border: 1px solid var(--accent);
            border-radius: 3px;
            padding: .1em .4em;
            font-size: .75rem;
        }

        .brand .sub {
            font-family: var(--mono);
            font-size: .6875rem;
            color: var(--ink-3);
            letter-spacing: .08em
        }

        @media (max-width:640px) {
            .brand .sub {
                display: none
            }
        }

        /* ── buttons ──────────────────────────────────────────── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: .6em;
            background: var(--accent);
            text-decoration: none;
            font-weight: 700;
            font-size: 1.26rem;
            letter-spacing: .04em;
            padding: .55em 1.6em;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            font-family: var(--sans);
            transition: background .18s ease;
            color: var(--btn-ink);
        }

        .btn:hover {
            background: var(--accent-2)
        }

        .btn.sm {
            padding: .4em 1.5em;
            font-size: 1rem;
            gap: .4em;

        }


        span.tick {
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image: url("../images/tick.svg");
            background-size: contain;
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-inline: .3em;
        }

        span.down {
            display: inline-block;
            width: 16px;
            height: 14px;
            background-image: url(../images/down.svg);
            background-size: contain;
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-top: 4px;
        }

        span.hl {
            color: var(--accent);
            font-weight: 700;
        }

        .cta-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .85rem;
            text-align: center;
            padding: clamp(28px, 4vw, 44px);
            background: var(--surface);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .cta-note {
            font-family: var(--sans);
            font-size: .85rem;
            letter-spacing: .1em;
            color: var(--ink-3);
            margin-left: 1.2em;
        }

        /* ── hero ─────────────────────────────────────────────── */
        .narrow-head {
            border-left: 5px solid var(--accent);
            padding-left: 1.2em;
        }

        .hero {
            padding-block: clamp(44px, 6vw, 84px);
            border-top: none
        }

        .hero .disclaim {
            font-size: 1rem;
            color: var(--ink-2);
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            flex-wrap: wrap;
            overflow: hidden;
            margin-bottom: 1em;
        }

        .hero .disclaims {
            font-family: var(--serif);
            font-weight: 700;
            font-size: clamp(1.8rem, 1.25rem + 2.5vw, 3.125rem);
            line-height: 1.38;
            letter-spacing: .005em;
        }



        .hero .disclaim i {
            flex: 1 1 0;
            height: 1px;
            background: #dad7c9;
            min-width: 0;
        }

        h1 {
            font-family: var(--serif);
            font-weight: 700;
            font-size: clamp(1.8rem, 1.25rem + 2.5vw, 3.125rem);
            line-height: 1.38;
            letter-spacing: .005em;
        }

        h1 .hl {
            color: var(--accent);
            padding-inline: .06em;
        }

        .hero .service-name {
            font-family: var(--sans);
            font-size: 1.28rem;
            letter-spacing: .1em;
            color: var(--accent);
            margin-top: 1.6rem;
            display: flex;
            align-items: center;
            gap: .5em;
            flex-wrap: wrap;
        }

        .hero .service-name::before {
            content: "";
            width: 47px;
            height: 1px;
            background: var(--accent);
            flex: none
        }

        .img-2x {
            zoom: 0.5;
        }

        .hero .lead {
            margin-top: 1.7rem;
            color: var(--ink-2);
            font-size: 1rem;
            display: flex;
            gap: .3em;
            justify-content: space-between;
            max-width: 100%;
            gap: 1.2rem;
        }

        .hero .lead p {
            max-width: 49em;
            line-height: 2.5;
        }

        .hero .lead strong {
            color: var(--ink);
            font-weight: 700
        }

        .hero .cta-row {
            margin-top: 2.2rem;
            display: flex;
            align-items: center;
            gap: 1.2rem;
            flex-wrap: wrap
        }

        /* ── code panels ──────────────────────────────────────── */
        .compare {
            margin-top: clamp(40px, 5vw, 64px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: 4px;
            overflow: hidden;
        }

        @media (max-width:780px) {
            .compare {
                grid-template-columns: 1fr
            }
        }

        .panel {
            background: var(--surface);
            display: flex;
            flex-direction: column;
            /* border-radius: 2px; */
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .55rem 1.1rem;
        }

        .panel-title {
            font-size: 1rem;
            font-weight: 700
        }

        .chip {
            font-family: var(--mono);
            font-size: 0.82rem;
            letter-spacing: .1em;
            padding: .25em 1.6em;
            border-radius: 2px;
            white-space: nowrap;
        }

        .chip.guess {
            background: var(--attent);
            color: var(--ink-4)
        }

        .chip.defined {
            background: var(--accent-soft);
            color: var(--accent)
        }

        pre.code {
            margin: 0;
            background: var(--code-bg);
            color: var(--code-ink);
            font-family: var(--mono);
            font-size: .75rem;
            line-height: 2.3;
            padding: 1.5rem 1.15rem 2.5rem;
            overflow-x: auto;
            flex: 1;
        }

        pre.code .k {
            color: #fff
        }

        pre.code .s {
            color: #fff
        }

        pre.code .t {
            color: #fff;
        }

        pre.code .note {
            color: #fff
        }

        .panel-foot {
            padding: .9rem 0.5rem;
            font-size: .8125rem;
            color: #5D656C;
        }

        /* ── property rows ────────────────────────────────────── */
        .props {
            display: flex;
            flex-direction: column;
            gap: clamp(0.3rem, 2vw, 0.5rem);
        }

        .prop {
            display: grid;
            grid-template-columns: minmax(170px, 220px) 1fr;
            gap: clamp(1rem, 3vw, 2.5rem);
            padding-block: clamp(22px, 3vw, 32px);
            padding-inline: clamp(22px, 3vw, 32px);
            align-items: center;
            background: #fff;
            border-radius: 4px;

        }

        @media (max-width:700px) {
            .prop {
                grid-template-columns: 1fr;
                gap: .7rem
            }
        }

        .prop-key {
            font-family: var(--sans);
            font-size: 1.25rem;
            letter-spacing: .1em;
            color: var(--ink-3);
            padding-top: .55em;
            line-height: 1.7
        }

        .prop h3 {
            font-family: var(--sans);
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: .55rem
        }

        .prop p {
            color: var(--ink-2);
            font-size: .925rem;
        }

        .prop .fine {
            display: block;
            font-size: .8125rem;
            color: var(--ink-3)
        }

        .prop .fine sup.ref {
            color: var(--ink-3);
        }


        /* ── SCOPE ────────────────────────────────────────────── */
        .scope {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .scope-card {
            background: var(--surface);
            border-radius: 5px;
            padding: clamp(20px, 2.4vw, 30px);
            display: flex;
            gap: 30px;
            align-items: center
        }

        @media (max-width:760px) {
            .scope-card {
                flex-direction: column;
                gap: 14px
            }
        }

        .scope-label {
            flex: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start
        }

        .scope-label .t {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.5
        }

        .stamp {
            display: inline-block;
            border: 1px solid var(--line-2);
            color: var(--ink);
            border-radius: 50px;
            font-size: 10px;
            line-height: 1;
            padding: 9px 12px;
            white-space: nowrap
        }

        .scope-list {
            flex: 1 0 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .scope-list.yes li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            border: 1px solid var(--line-2);
            border-radius: 3px;
            padding: 10px;
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink)
        }

        .scope-list.yes .ic {
            flex: none;
            margin-top: .5em;
            color: var(--accent)
        }

        .scope-list.no li {
            background: var(--surface-soft);
            border-radius: 3px;
            padding: 10px
        }

        .scope-list.no b {
            display: block;
            font-size: 16px;
            font-weight: 700;
            color: var(--accent);
            line-height: 1.8
        }

        .scope-list.no p {
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink)
        }

        ul.scope-list {
            list-style: none;
            margin: 0;
            padding: 0
        }

        /* ── 吹き出しカード（弊社の立場 / 貴社対応）──────────── */
        .bubble {
            position: relative;
            background: var(--surface);
            border-radius: 5px;
            padding: clamp(20px, 2.4vw, 30px);
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            gap: 25px
        }

        .bubble::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 40px;
            width: 0;
            height: 0;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            border-bottom: 16px solid var(--surface);
        }

        .bubble-head {
            display: flex;
            align-items: center;
            gap: 20px;
            border-left: 3px solid var(--accent);
            padding-left: 10px
        }

        .bubble-head b {
            font-size: 13px;
            font-weight: 700;
            color: var(--accent);
            line-height: 1.5;
            white-space: nowrap
        }

        .bubble-head i {
            flex: 1 1 0;
            height: 1px;
            background: var(--line);
            min-width: 0
        }

        .bubble p {
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink)
        }

        .bubble p+p {
            margin-top: 1em
        }



        /* ── steps ────────────────────────────────────────────── */
        /* ── STEP / 要因 カード ───────────────────────────────── */
        .cards3 {
            display: flex;
            gap: 30px;
            align-items: stretch
        }

        @media (max-width:900px) {
            .cards3 {
                flex-direction: column
            }
        }

        .card-o {
            flex: 1 0 0;
            min-width: 0;
            background: var(--surface);
            border: 1px solid var(--accent);
            border-radius: 5px;
            padding: clamp(20px, 2.4vw, 23px);
            display: flex;
            flex-direction: column;
            gap: clamp(14px, 2vw, 20px)
        }

        .card-o .num {
            font-size: 18px;
            color: var(--ink);
            line-height: 1.5
        }

        .card-o h3 {
            font-size: clamp(17px, 1.3vw, 20px);
            line-height: 1.8;
            color: var(--ink)
        }

        .card-o p {
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink)
        }

        .ct-grid {
            display: flex;
            gap: 25px
        }

        @media (max-width:760px) {
            .ct-grid {
                flex-direction: column
            }
        }

        .ct {
            flex: 1 0 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .ct h3 {
            font-size: clamp(17px, 1.3vw, 20px);
            line-height: 1.8
        }

        .ct p {
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink)
        }

        .center-note {
            text-align: center;
            font-size: 16px;
            line-height: 2.4;
            color: var(--ink);
            margin-top: 50px;
        }


        /* ── アコーディオン共通 ───────────────────────────────── */
        .acc {
            border-top: 1px solid var(--line)
        }

        details.row {
            border-bottom: 1px solid var(--line-3)
        }

        details.row>summary {
            list-style: none;
            cursor: pointer;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 10px
        }

        details.row>summary::-webkit-details-marker {
            display: none
        }

        .mark {
            margin-left: auto;
            flex: none;
            width: 10px;
            height: 10px;
            position: relative
        }

        .mark::before,
        .mark::after {
            content: "";
            position: absolute;
            background: var(--ink-2);
            left: 0;
            top: 4.5px;
            width: 10px;
            height: 1px
        }

        .mark::after {
            transform: rotate(90deg)
        }

        details.row[open] .mark::after {
            display: none
        }

        .cat-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.5
        }

        .cat-no {
            font-family: var(--label);
            font-size: 13px;
            color: var(--ink-2)
        }

        details.row.dead .cat-name {
            color: var(--ink-4)
        }

        details.row.dead .cat-name small {
            font-size: 16px;
            font-weight: 700
        }

        .tag-body {
            padding: 0 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .tag-item {
            background: var(--surface-tag);
            border-radius: 3px;
            padding: 10px;
            display: flex;
            align-items: flex-start
        }

        @media (max-width:760px) {
            .tag-item {
                flex-direction: column;
                gap: 8px
            }
        }

        .tag-name {
            width: 350px;
            flex: none;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start
        }

        @media (max-width:760px) {
            .tag-name {
                width: auto;
                padding-bottom: 0
            }
        }

        .tag-name b {
            font-size: 16px;
            font-weight: 700;
            color: var(--ink-2);
            line-height: 1.6
        }

        .tag-item p {
            flex: 1 0 0;
            min-width: 0;
            padding: 10px;
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink)
        }

        .status {
            font-size: 10px;
            line-height: 1;
            padding: 10px;
            border-radius: 3px;
            white-space: nowrap
        }

        .status.rich {
            background: var(--accent-soft);
            color: var(--accent)
        }

        .status.info {
            background: var(--line);
            color: var(--ink-2)
        }

        .status.dead {
            background: var(--attent);
            color: var(--ink-4)
        }

        /* ── pricing ──────────────────────────────────────────── */
        .price-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(28px, 4vw, 56px);
            align-items: start;
            margin-bottom: clamp(28px, 4vw, 50px);
        }

        @media (max-width:820px) {
            .price-grid {
                grid-template-columns: 1fr
            }
        }

        .price-fig {
            display: flex;
            align-items: center;
            gap: 24px;
            background-color: #ffffff;
            padding: 10px 20px;
            border-radius: 4px;
        }

        .price-fig>p:first-child {
            white-space: nowrap;
            font-size: clamp(18px, 1.4vw, 20px);
            font-weight: 700;
            color: var(--ink);
            margin: 0;
        }

        .price-fig>p:last-child {
            flex: 1;
            min-width: 0;
            white-space: normal;
            font-size: 14px;
            line-height: 1.6;
            margin: 0;
        }

        .price-fig>p:last-child span {
            display: inline;
            font-size: 13px;
            color: #5D656C;
            font-weight: 300;
            line-height: 1.8
        }

        .price-note {
            margin-top: 1.1rem;
            font-size: 1rem;
            color: var(--ink-2);
        }

        .price-note+.price-note {
            margin-top: 2.8rem
        }

        ul.menu {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        ul.menu::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            border-top: 1.5px solid #DAD7C9;
            border-left: 0.5px solid #DAD7C9;
            border-right: 0.5px solid #DAD7C9;
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            pointer-events: none;
        }

        ul.menu li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.2rem 0.8rem;
            border-bottom: 1px solid var(--line);
            font-size: .9rem;
        }

        ul.menu li .status {
            flex: none
        }

        .factors-head {
            font-family: var(--serif);
            font-size: clamp(20px, 2vw, 25px);
            line-height: 1.8;
            color: var(--ink);
            font-weight: 700;
            margin-bottom: clamp(28px, 3vw, 40px);

        }

        .price .card-o h3 {
            font-size: clamp(15px, 1vw, 18px);
            margin-bottom: clamp(25px, 2vw, 30px);
        }

        .price .cards3 {
            margin-bottom: clamp(25px, 2vw, 30px);
        }



        /* ── faq ──────────────────────────────────────────────── */
        .faq {
            border-top: 1px solid var(--line)
        }

        details.q {
            border-bottom: 1px solid var(--line)
        }

        details.q summary {
            list-style: none;
            cursor: pointer;
            padding-block: 1.25rem;
            font-weight: 700;
            font-size: 1.125rem;
            display: flex;
            gap: .9rem;
            color: var(--ink);
            align-items: baseline;
        }

        details.q summary::-webkit-details-marker {
            display: none
        }

        details.q summary::before {
            content: "Q";
            font-family: var(--mono);
            font-size: 1rem;
            color: var(--ink-3);
            flex: none;
            font-weight: 400;
        }

        details.q summary::after {
            content: "+";
            font-family: var(--mono);
            color: var(--ink-3);
            margin-left: auto;
            font-weight: 400
        }

        details.q[open] summary::after {
            content: "–"
        }

        .a {
            display: grid;
            grid-template-columns: 1.6em 1fr;
            gap: .2rem;
            padding-bottom: 1.6rem;
            padding-right: 1rem;
            color: var(--ink-2);
            font-size: 1rem;
        }

        .a::before {
            content: "A";
            font-family: var(--mono);
            color: var(--ink-3);
            font-size: 1rem
        }

        .a p+p {
            margin-top: .8em
        }

        /* ── sources ──────────────────────────────────────────── */
        .sources {
            background: var(--surface-3);
        }

        .srclist {
            border-top: 1px solid var(--line-3)
        }

        .src {
            display: flex;
            gap: clamp(20px, 6vw, 100px);
            align-items: flex-start;
            padding: 20px;
            border-bottom: 1px solid var(--line)
        }

        @media (max-width:760px) {
            .src {
                flex-direction: column;
                gap: 8px
            }
        }

        .src-no {
            flex: none;
            font-size: 18px;
            color: var(--accent);
            line-height: 1.6
        }

        .src-body {
            flex: 1 0 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .src h4 {
            font-size: clamp(17px, 1.3vw, 20px);
            line-height: 1.8;
            color: var(--ink)
        }

        .src blockquote {
            margin: 0;
            border-left: 3px solid var(--line-4);
            padding-left: 10px;
            font-size: 13px;
            line-height: 1.8;
            color: #5D656C;
        }

        .src a {
            font-size: 16px;
            line-height: 2.4;
            color: var(--accent);
            word-break: break-all
        }

        sup.ref {
            font-size: .65em;
            color: var(--ink);
            padding-left: .15em;
            vertical-align: .4em
        }


        /* ── form ─────────────────────────────────────────────── */
        .form-card {
            background: var(--surface);
            border: 1px solid var(--line);
            padding: clamp(24px, 4vw, 48px);
            margin-inline: auto;
            border-radius: 5px;
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            margin-bottom: 1.5rem
        }

        .field label {
            font-size: .8125rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: .6em
        }

        .req {
            font-family: var(--mono);
            font-size: .5875rem;
            letter-spacing: .08em;
            background: var(--accent-soft);
            color: var(--accent);
            padding: .22em .5em;
            border-radius: 2px
        }

        .opt {
            font-family: var(--mono);
            font-size: .5875rem;
            letter-spacing: .08em;
            color: var(--ink-3)
        }

        .field input,
        .field select,
        .field textarea {
            font-family: var(--sans);
            font-size: .9rem;
            color: var(--ink);
            background: var(--paper);
            border: 1px solid var(--line-2);
            border-radius: 2px;
            padding: .75em .85em;
            width: 100%;
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: var(--ink-3)
        }

        .field textarea {
            min-height: 6.5em;
            resize: vertical;
            line-height: 1.8
        }

        .choices {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem
        }

        .choice {
            display: inline-flex;
            align-items: center;
            gap: .5em;
            font-size: .85rem;
            border: 1px solid var(--line-2);
            border-radius: 2px;
            padding: .55em .9em;
            cursor: pointer;
            background: var(--paper)
        }

        .choice:has(input:checked) {
            background-color: #E0EFEB;
        }

        .choice:hover {
            background-color: #E0EFEB;
        }


        .choice input {
            width: auto;
            accent-color: var(--accent)
        }

        .choices-equal {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .7rem;
            width: fit-content;
        }

        .choices-equal .choice {
            white-space: nowrap;
        }

        .hint {
            font-size: .75rem;
            color: var(--ink-3);
            line-height: 1.8
        }

        .form-foot {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .9rem;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--line)
        }

        .form_control.is-invalid {
            border-color: #e53e3e !important;
            background-color: #fff5f5;
        }

        .error-msg {
            display: none;
            color: #e53e3e;
            font-size: 0.8rem;
            font-weight: 500;
            margin-top: 6px;
            line-height: 1.4;
        }



        /* ── footer ───────────────────────────────────────────── */
        footer.site {
            background: #5D656C;
            color: #fff;
            padding-block: clamp(10px, 3vw, 26px);
        }

        .footer-ctn {
            display: flex;
            flex-wrap: wrap;
            gap: 1.2rem 2rem;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0px 25px;
        }

        footer.site .info {
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 0.82rem;
        }

        footer.site .cr {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
        }

        footer.site .cr a::after {
            content: "";
            background: url(../images/link.svg);
            display: inline-block;
            width: 27px;
            height: 26px;
            background-size: contain;
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-left: 5px;
        }


        footer.site .copy-right {
            font-size: 0.63rem;
        }

        @media (max-width:1200px) {
            .footer-ctn {
                justify-content: center;
            }

        }




        @media (max-width:640px) {

            br.pc {
                display: none
            }

            br.sp {
                display: block;
            }


            .hero .disclaim {
                font-size: .8rem;
            }

            .hero .lead {
                flex-direction: column;
            }

            .brand {
                font-size: 0.8rem;
                line-height: 1.4;
            }

            .btn.sm {
                font-size: 0.8rem;
                padding: .8em 1.5em;
            }

            .hero .service-name {
                font-size: 0.8rem;
            }

            .hero .service-name {
                align-items: flex-start;
                flex-wrap: nowrap;
            }

            .hero .service-name::before {
                width: 32px;
                margin-top: 0.9em;
            }

            .hero .cta-row {
                justify-content: center;
            }

            .hero .btn,
            .btn:not(.sm) {
                display: flex;
                justify-content: center;
                width: 100%;
                max-width: 340px;
                margin-inline: auto;
                padding-block: .75em;
            }

            .cta-note {
                text-align: center;
                margin-left: 0;
            }

            .price .btn {
                margin-bottom: 1.2rem;
            }


            .cta-row {
                text-align: center;
            }



            /* < !-- ── HERO ─────────────────────────────────────────── --> */
            .eyebrow {
                font-size: 1.125rem;
            }

            .sec-lead {
                line-height: 2.4;
            }

            .prop-key {
                margin-bottom: .7rem;
            }

            .prop h3 {
                margin-bottom: 1rem;
            }

            .scope-card {
                align-items: flex-start;
            }

            .bubble-head {
                gap: 7px;
            }

            .center-note {
                margin-top: 35px;
                padding-inline: 33px;
            }

            .price-fig {
                display: block;
            }

            details.q summary {
                align-items: center;
            }

            .choices-equal {
                grid-template-columns: 1fr;
            }

            footer.site .info {
                flex-direction: column;
                text-align: center;
            }

            footer.site .cr {
                flex-direction: column;
            }

            footer.site {
                padding-block: clamp(40px, 9vw, 26px);
            }




        }